/* ========================================
    1. GENERAL STYLES
========================================
*/

body {
    font-family: 'Inter', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* ========================================
    2. COLOR DEFINITIONS & UTILITIES
========================================
*/

/* Custom Tailwind Colors - As per main page */
:root {
    --color-primary: #FDD835;
    --color-button: #5cb85c;
    --color-text-dark: #333333;
    --color-highlight: #0275d8;
    --color-light-bg: #f8f8f8;
}

/* * Utility classes to apply the colors.
 * These are used by Tailwind in web.html
*/
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.hover\:bg-primary:hover { background-color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }

.text-button { color: var(--color-button); }
.bg-button { background-color: var(--color-button); }
.hover\:bg-button:hover { background-color: var(--color-button); }

.text-text-dark { color: var(--color-text-dark); }
.bg-text-dark { background-color: var(--color-text-dark); }

.text-highlight { color: var(--color-highlight); }
.bg-highlight { background-color: var(--color-highlight); }

.bg-light-bg { background-color: var(--color-light-bg); }


/* ========================================
    3. COMPONENT & SECTION STYLES
========================================
*/

/* Custom gradient for the hero section */
.hero-gradient {
    background: linear-gradient(135deg, #FFFDE7 0%, #FFF9C4 100%);
}

/* Button glow effect */
.glow-btn {
    box-shadow: 0 8px 32px 0 #FFF9C4, 0 0 16px 4px #FFF9C4;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    position: relative;
}

.glow-btn:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px 0 #FFF9C4, 0 0 32px 8px #FFF9C4;
}

/* Service card glow effect */
.service-glow {
    box-shadow: 0 0px 24px 0 #FFF9C4, 0 0 8px 2px #FFF9C4;
    transition: box-shadow 0.3s cubic-bezier(.4,0,.2,1);
}

.service-glow:hover {
    box-shadow: 0 16px 69px 0 #FFF9C4, 0 0 4px 8px #FFF9C4;
}

/* Pricing Card Styles */
.price-card {
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.price-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.price-category {
    font-size: 1.5rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    padding: 1.5rem;
    text-align: center;
    background-color: var(--color-primary); /* Use primary color for header */
    color: var(--color-text-dark); /* Dark text on primary background */
    position: relative;
    z-index: 1;
}

.price-list {
    padding: 1.5rem;
    flex-grow: 1; /* Allow list to take available space */
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
    font-size: 1.125rem; /* text-lg */
    border-bottom: 1px dotted rgba(0, 0, 0, 0.1); /* Dotted line */
    padding-bottom: 0.5rem;
}

.price-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.price-item span:first-child {
    font-weight: 500; /* Medium weight for item name */
    flex-grow: 1;
    padding-right: 0.5rem;
}

.price-item span:last-child {
    font-weight: 600; /* Semi-bold for price */
    color: var(--color-highlight); /* Highlight price */
    white-space: nowrap; /* Prevent price from wrapping */
}

/* ========================================
    4. ANIMATION STYLES
========================================
*/

/* --- Service Card Staggered Animation --- */
.service-item-animate {
    opacity: 0;
    transform: scale(0.8);
    /* Use transition for a smooth change when class is added */
    transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}

.service-item-animate.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger the transition delay based on the child order */
.service-item-animate.is-visible:nth-child(1) { transition-delay: 0.1s; }
.service-item-animate.is-visible:nth-child(2) { transition-delay: 0.2s; }
.service-item-animate.is-visible:nth-child(3) { transition-delay: 0.3s; }
.service-item-animate.is-visible:nth-child(4) { transition-delay: 0.4s; }
.service-item-animate.is-visible:nth-child(5) { transition-delay: 0.5s; }
.service-item-animate.is-visible:nth-child(6) { transition-delay: 0.6s; }


/* --- Scroll Animation (Left/Right) --- */
.animate-on-scroll-left,
.animate-on-scroll-right {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.4,0,.2,1);
}

.animate-on-scroll-left {
    transform: translateX(-60px);
}

.animate-on-scroll-right {
    transform: translateX(60px);
}

.animate-on-scroll-left.is-visible,
.animate-on-scroll-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}


/* --- Mobile Menu Transition Styles --- */
#mobile-menu {
    /* Start hidden */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    /* Prevent clicking when hidden */
    pointer-events: none; 
}

#mobile-menu.is-open {
    /* Make visible */
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}


/* --- Pricing Card Fade-in Animation --- */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-fadeInScale {
    animation: fadeInScale 0.6s ease-out forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }