/* * BRAND COLOR TOKENS 
         * Custom aqua and pink theme configuration
         */
        :root {
            --brand-brown: #2C1B12;
            --brand-blue: rgb(89, 227, 230);
            --brand-blue2: rgb(14, 91, 179);
            /* darker shade for blue  */
            /* Signature Aqua */
            --brand-blue-hover: rgb(70, 210, 213);
            --brand-pink: #fdf2f8;
            /* Requested Light Pink Background */
            --brand-accent-pink: #F472B6;
            --brand-text: #1A1310;
        }

        /* RESET & BASE STYLES */
        body {
            font-family: 'Inter', sans-serif;
            background-color: white;
            color: var(--brand-text);
            overflow-x: hidden;
            width: 100%;
        }

        /* TYPOGRAPHY ENFORCEMENT */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        button,
        a,
        span,
        p,
        label,
        input,
        select,
        textarea {
            font-family: 'Inter', sans-serif;
        }

        /* BRAND UTILITIES */
        .bg-brand-brown {
            background-color: var(--brand-brown);
        }

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

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

        .text-brand-blue {
            color: var(--brand-blue);
        }

        .text-darker-blue {
            color: var(--brand-blue2);
        }

        .text-brand-brown {
            color: var(--brand-brown);
        }

        .text-brand-pink {
            color: var(--brand-accent-pink);
        }

        .border-brand-blue {
            border-color: var(--brand-blue);
        }

        /* 1. Prevent the HTML and Body from ever growing wider than the screen */
        html,
        body {
            max-width: 100%;
            overflow-x: hidden;
            position: relative;
        }

        /* 2. Contain the Marquee */
        /* Wrap the parent div of .animate-scroll with overflow-hidden if not already there */
        .animate-scroll {
            display: flex;
            width: fit-content;
            /* More stable than fit-content for animations */
        }

        /* 3. Clip the Hero and About sections */
        /* This ensures the 'hero-blobs' don't create invisible white space outside the site */
        #home,
        #about,
        #services {
            overflow: hidden;
        }

        /* 4. Fix for Mobile Flexbox */
        #carousel-inner {
            display: flex;
            will-change: transform;
        }

        .border-brand-pink {
            border-color: var(--brand-accent-pink);
        }

        /* NAVIGATION ANIMATIONS */
        .nav-transition {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* RIBBON SCROLL ANIMATION 
         * Pace maintained at 15s for a fast scroll
         */
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .animate-scroll {
            display: flex;
            width: fit-content;
            animation: scroll 15s linear infinite;
        }

        /* TESTIMONIAL MARQUEE ANIMATION 
         * Smooth side-scrolling reviews
         */
        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .animate-marquee {
            display: flex;
            width: max-content;
            animation: marquee 50s linear infinite;
        }

        .animate-marquee:hover {
            animation-play-state: paused;
        }

        /* INTERSECTION OBSERVER ANIMATIONS */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* CARD HOVER EFFECTS */
        .service-card {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px -12px rgba(89, 227, 230, 0.3);
        }

        /* STICKY NAV SCROLL STATE */
        .scrolled-nav {
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid rgba(89, 227, 230, 0.2);
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            background-color: var(--brand-pink);
        }

        /* RESPONSIVE LAYOUT SPACING */
        .hero-layout-spacing {
            padding-top: clamp(100px, 15vh, 200px);
        }

        /* RESPONSIVE TESTIMONIAL CARD WIDTHS */
        .testimonial-card {
            width: 280px;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @media (min-width: 768px) {
            .testimonial-card {
                width: 380px;
            }
        }

        .testimonial-card:hover {
            transform: translateY(-16px) scale(1.02);
            box-shadow: 0 40px 80px -20px rgba(44, 27, 18, 0.4);
        }

        /* FORM FIELD RESET */
        input[type="date"] {
            min-height: 3.5rem;
            padding-right: 1.5rem;
            width: 100%;
        }

        /* SELECTION HIGHLIGHT */
        ::selection {
            background: var(--brand-blue);
            color: var(--brand-brown);
        }

        /* DECORATIVE BACKGROUND ELEMENTS */
        .hero-blob {
            position: absolute;
            z-index: 0;
            filter: blur(80px);
            opacity: 0.4;
            border-radius: 50%;
        }

        /* STAR RATING COMPONENT STYLES */
        .star-rating svg {
            cursor: pointer;
            transition: all 0.2s ease;
            fill: none;
            stroke: currentColor;
        }

        .star-rating svg.active {
            fill: var(--brand-blue) !important;
            color: var(--brand-blue) !important;
            stroke: var(--brand-blue) !important;
        }

        /* PREVENT OVERFLOW ON MOBILE ANIMATIONS */
        .overflow-x-clip {
            overflow-x: clip;
        }

        /* CART SELECTION STYLES */
        .cart-option {
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid transparent;
        }

        .cart-option:hover {
            transform: translateY(-4px);
        }

        .cart-option.selected {
            border-color: var(--brand-blue);
            background-color: rgba(89, 227, 230, 0.05);
            box-shadow: 0 10px 25px -5px rgba(89, 227, 230, 0.2);
        }

        .cart-option.selected .check-badge {
            display: flex;
        }