:root {
    /* Define main color variables */
    --color-primary: #00a99d;
    --color-secondary: #1f2937; 
    --color-background-light: #f7fbfc;
    --color-light-teal: #e0f2f1;
}

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-background-light);
    color: #1f2937;
}

/* 1. Module: Hero Background Gradient */
.hero-background {
    background-image: linear-gradient(to top, var(--color-background-light) 0%, #ffffff 70%);
}

/* 2. Module: Primary CTA Button Style */
.btn-primary {
    @apply px-6 py-3 bg-[var(--color-primary)] text-white font-semibold rounded-lg shadow-lg shadow-[var(--color-primary)]/40 hover:bg-[#008c7d] transition duration-200;
}

/* 3. Module: Secondary/Outline Button Style */
.btn-secondary-outline {
    @apply px-6 py-3 border-2 border-[var(--color-primary)] text-[var(--color-primary)] font-semibold rounded-lg hover:bg-[var(--color-primary)]/10 transition duration-200;
}

/* 4. Module: Icon Box Style */
.icon-box {
    @apply mx-auto p-3 w-14 h-14 bg-white rounded-xl shadow-lg flex items-center justify-center mb-2;
}
    
/* 5. Module: Footer Style */
.footer-link {
    @apply hover:text-[var(--color-primary)] flex items-center transition duration-150;
}

.footer-icon-link {
    @apply w-8 h-8 flex items-center justify-center border border-gray-600 rounded-full text-gray-400 hover:text-white hover:border-[var(--color-primary)] transition duration-150;
}

/* 6. Module: Section Heading */
.section-heading {
    @apply text-4xl font-extrabold text-gray-900 text-center mb-10;
}

.section-subheading {
    @apply text-lg font-semibold text-[var(--color-primary)] text-center mb-2;
}

/* 7. Module: Testimonial Quote */
.testimonial-quote {
    @apply text-2xl font-serif text-gray-500 italic;
}