/* Base Styles */
        :root {
            --primary: #12372A;
            --secondary: #FF7A00;
            --accent: #00A86B;
            --light: #FFF8EF;
            --dark: #06281E;
            --text: #153B31;
            --white: #ffffff;
            --gray: #6c757d;
            --success: #27ae60;
            --warning: #f39c12;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --gradient: linear-gradient(135deg, #12372A 0%, #00A86B 55%, #FFB000 100%);
            --gradient-secondary: linear-gradient(135deg, #FF7A00 0%, #FFB000 100%);
            --gradient-accent: linear-gradient(135deg, #00A86B 0%, #12372A 100%);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', sans-serif;
        }
        
        body {
            line-height: 1.7;
            color: var(--text);
            background-color: var(--light);
            overflow-x: hidden;
        }
        
        a {
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
        }
        
        ul {
            list-style: none;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 28px;
            background: var(--secondary);
            color: var(--white);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(231, 76, 60, 0.3);
            background: #c0392b;
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid var(--secondary);
            color: var(--secondary);
        }
        
        .btn-outline:hover {
            background: var(--secondary);
            color: var(--white);
            transform: translateY(-3px);
        }
        
        .btn-lg {
            padding: 16px 32px;
            font-size: 1.1rem;
        }
        
        section {
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-title h2 {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 20px;
            font-weight: 700;
            position: relative;
            display: inline-block;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--secondary);
            border-radius: 2px;
        }
        
        .section-title p {
            color: var(--gray);
            max-width: 600px;
            margin: 0 auto;
            font-size: 1.2rem;
            line-height: 1.6;
        }
        
        /* Header Styles */
        header {
            background-color: var(--white);
            box-shadow: var(--shadow);
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            z-index: 1000;
            transition: all 0.3s ease;
            padding: 0;
        }
        
        .header-container {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            /* gap: 20px; */
            padding: 10px 0;
            transition: all 0.3s ease;
            width: 100vw;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .logo-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            background-color: rgb(255, 255, 255);
            font-size: 1.5rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .logo-icon img {
            height: 100%;
        }
        
        .logo-text {
            display: flex;
            flex-direction: column;
        }
        
        .logo h1 {
            font-size: 1.8rem;
            color: var(--primary);
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }
        
        .logo span {
            font-size: 0.9rem;
            color: var(--secondary);
            font-weight: 500;
        }
        
        .nav-menu {
            display: flex;
            gap: 30px;
        }
        
        .nav-menu li a {
            font-weight: 500;
            position: relative;
            padding: 8px 0;
            white-space: nowrap;
        }
        
        .nav-menu li a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--secondary);
            transition: width 0.3s ease;
        }
        
        .nav-menu li a:hover::after,
        .nav-menu li a.active::after {
            width: 100%;
        }
        
        .nav-menu li a:hover,
        .nav-menu li a.active {
            color: var(--secondary);
        }
        
        .mobile-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--primary);
        }
        
        /* Enhanced Hero Section with Parallax */
        .hero {
            background: linear-gradient(135deg, rgba(44, 62, 80, 0.9) 0%, rgba(52, 73, 94, 0.8) 100%), 
                        url('https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: var(--white);
            padding: 200px 0 150px;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.1"><polygon fill="white" points="0,1000 1000,0 1000,1000"/></svg>');
            background-size: cover;
        }
        
        .hero-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 2;
        }
        
        .hero h2 {
            font-size: 4rem;
            margin-bottom: 25px;
            font-weight: 700;
            line-height: 1.1;
            overflow: hidden;
            border-right: 3px solid var(--secondary);
            white-space: nowrap;
            margin: 0 auto 25px;
            letter-spacing: 2px;
            animation: typewriter 3.5s steps(40, end), blink 0.75s step-end infinite;
        }
        
        .hero p {
            font-size: 1.3rem;
            margin-bottom: 40px;
            opacity: 0.9;
            animation: fadeInUp 1s ease 1s forwards;
            opacity: 0;
            transform: translateY(30px);
        }
        
        .hero-btns {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            animation: fadeInUp 1s ease 1.2s forwards;
            opacity: 0;
            transform: translateY(30px);
        }
        
        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 50px;
            margin-top: 80px;
            flex-wrap: wrap;
        }
        
        .stat-item {
            text-align: center;
            animation: fadeInUp 1s ease 1.4s forwards;
            opacity: 0;
            transform: translateY(30px);
        }
        
        .stat-item:nth-child(2) { animation-delay: 1.6s; }
        .stat-item:nth-child(3) { animation-delay: 1.8s; }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: var(--secondary);
            display: block;
            line-height: 1;
        }
        
        .stat-label {
            font-size: 1rem;
            opacity: 0.8;
            margin-top: 5px;
        }
        
        /* Animated Paint Splash */
        .paint-splash-animation {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }
        
        .splash-item {
            position: absolute;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(231, 76, 60, 0.4) 0%, transparent 70%);
            border-radius: 50%;
            animation: paintSplash 2s ease-out forwards;
            opacity: 0;
        }
        
        .splash-1 { top: 20%; left: 10%; animation-delay: 0.5s; }
        .splash-2 { top: 60%; right: 15%; animation-delay: 1s; }
        .splash-3 { bottom: 30%; left: 20%; animation-delay: 1.5s; }
        .splash-4 { top: 40%; right: 25%; animation-delay: 2s; }
        
        /* Floating Color Drops */
        .color-drop {
            position: absolute;
            width: 30px;
            height: 40px;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            animation: floatDrop 8s ease-in-out infinite;
            opacity: 0.7;
            filter: blur(1px);
        }
        
        .drop-1 { 
            background: #e74c3c; 
            top: 10%; 
            left: 15%;
            animation-delay: 0s;
            animation-duration: 10s;
        }
        .drop-2 { 
            background: #3498db; 
            top: 70%; 
            right: 10%;
            animation-delay: 1s;
            animation-duration: 12s;
        }
        .drop-3 { 
            background: #2ecc71; 
            top: 30%; 
            right: 20%;
            animation-delay: 2s;
            animation-duration: 9s;
        }
        .drop-4 { 
            background: #f39c12; 
            bottom: 20%; 
            left: 25%;
            animation-delay: 3s;
            animation-duration: 11s;
        }

        /* Particle Background Effect */
        .particles-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 0;
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            animation: particleFloat 15s infinite linear;
        }

        /* Enhanced Hover Glow Effects */
        .glow-on-hover {
            position: relative;
        }
        
        .glow-on-hover::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(231, 76, 60, 0.2) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
            z-index: -1;
        }
        
        .glow-on-hover:hover::after {
            width: 300px;
            height: 300px;
        }
 /* ================= ULTRA PREMIUM VIDEO SECTION - FIXED + ANIMATED ================= */
        .cinema-video-section {
            position: relative;
            width: 100%;
            overflow: hidden;
            padding: 120px 24px;
            background:
                radial-gradient(circle at 15% 15%, rgba(231, 76, 60, 0.32), transparent 32%),
                radial-gradient(circle at 85% 20%, rgba(52, 152, 219, 0.25), transparent 30%),
                radial-gradient(circle at 50% 95%, rgba(243, 156, 18, 0.18), transparent 34%),
                linear-gradient(135deg, #020617 0%, #0f172a 52%, #111827 100%);
            isolation: isolate;
        }

        .cinema-video-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: radial-gradient(circle at center, black, transparent 78%);
            z-index: 0;
            animation: videoGridMove 18s linear infinite;
        }

        .video-bg-orbs, .video-particles {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(78px);
            opacity: 0.46;
            animation: floatOrb 15s infinite alternate ease-in-out;
        }

        .orb-1 { width: 420px; height: 420px; background: #e74c3c; top: -110px; left: -120px; }
        .orb-2 { width: 520px; height: 520px; background: #2563eb; bottom: -180px; right: -140px; animation-delay: -5s; }
        .orb-3 { width: 360px; height: 360px; background: #f59e0b; top: 45%; left: 58%; opacity: 0.24; animation-delay: -9s; }

        .particle {
            position: absolute;
            border-radius: 50%;
            animation: particleDrift 12s infinite linear;
            box-shadow: 0 0 14px rgba(255,255,255,0.35);
        }

        .video-container-premium {
            position: relative;
            z-index: 3;
            max-width: 1320px;
            margin: 0 auto;
        }

        .cinema-title {
            text-align: center;
            margin-bottom: 64px;
            animation: titleReveal 900ms ease both;
        }

        .cinema-title .badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(231, 76, 60, 0.15);
            color: #ffb4aa;
            border: 1px solid rgba(231, 76, 60, 0.42);
            padding: 9px 22px;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            box-shadow: 0 0 28px rgba(231,76,60,0.18);
        }

        .cinema-title h2 {
            font-size: clamp(2.25rem, 5vw, 4.7rem);
            font-weight: 900;
            margin: 22px 0 14px;
            line-height: 1.05;
            letter-spacing: -0.04em;
            background: linear-gradient(90deg, #ffffff 0%, #ffe2de 40%, #f97316 68%, #ffffff 100%);
            background-size: 220% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: shineText 4s linear infinite;
        }

        .cinema-title .title-glow {
            width: 160px;
            height: 5px;
            margin: 0 auto;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, #e74c3c, #f59e0b, #e74c3c, transparent);
            box-shadow: 0 0 22px rgba(231,76,60,0.55);
        }

        .cinema-title p {
            color: #cbd5e1;
            font-size: 1.08rem;
            max-width: 760px;
            margin: 22px auto 0;
            line-height: 1.75;
        }

        .video-grid-ultra {
            display: grid;
            grid-template-columns: repeat(3, minmax(260px, 1fr));
            gap: 30px;
            perspective: 1400px;
        }

        .video-flip-card {
            position: relative;
            min-height: 455px;
            cursor: pointer;
            transform-style: preserve-3d;
        }

        .video-flip-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 31px;
            background: conic-gradient(from var(--angle, 0deg), transparent, rgba(231,76,60,0.95), rgba(245,158,11,0.9), transparent 35%);
            opacity: 0;
            transition: opacity .35s ease;
            animation: rotateBorder 4.5s linear infinite;
        }

        .video-flip-card:hover::before { opacity: 1; }

        .flip-card-inner {
            position: relative;
            height: 100%;
            border-radius: 30px;
            overflow: hidden;
            background: rgba(15, 23, 42, 0.74);
            border: 1px solid rgba(255,255,255,0.12);
            box-shadow: 0 26px 60px rgba(0,0,0,0.42);
            backdrop-filter: blur(18px);
            transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
            z-index: 1;
        }

        .video-flip-card:hover .flip-card-inner {
            transform: translateY(-14px) rotateX(4deg) rotateY(-4deg);
            box-shadow: 0 36px 80px rgba(231,76,60,0.22);
        }

        .flip-front { position: relative; height: 100%; }
        .flip-front::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 42%, rgba(2,6,23,0.96) 100%);
            pointer-events: none;
        }

        .video-frame-wrap {
            position: relative;
            height: 270px;
            overflow: hidden;
            background: #000;
        }

        .video-frame-wrap iframe {
            width: 100%;
            height: 100%;
            border: none;
            transform: scale(1.04);
            transition: transform .7s ease, filter .7s ease;
            pointer-events: none;
        }

        .video-flip-card:hover iframe {
            transform: scale(1.13);
            filter: saturate(1.2) contrast(1.05);
        }

        .video-play-float {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            z-index: 2;
            pointer-events: none;
        }

        .video-play-float span {
            width: 78px;
            height: 78px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: white;
            background: rgba(231,76,60,0.82);
            border: 1px solid rgba(255,255,255,0.45);
            box-shadow: 0 0 0 12px rgba(231,76,60,0.12), 0 18px 42px rgba(0,0,0,0.35);
            animation: playPulse 1.8s infinite;
        }

        .video-info-front {
            position: relative;
            z-index: 3;
            padding: 24px;
            color: white;
        }

        .video-info-front h3 {
            margin: 0 0 10px;
            font-size: 1.45rem;
            font-weight: 850;
        }

        .video-info-front p {
            margin: 0 0 18px;
            color: #cbd5e1;
            line-height: 1.55;
            font-size: .96rem;
        }

        .video-info-front .meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 18px;
        }

        .video-info-front .meta span {
            display: inline-flex;
            gap: 7px;
            align-items: center;
            color: #fed7aa;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 7px 10px;
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 700;
        }

        .watch-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: 0;
            cursor: pointer;
            background: linear-gradient(135deg, #e74c3c, #f59e0b);
            color: white;
            padding: 12px 18px;
            border-radius: 999px;
            font-weight: 850;
            box-shadow: 0 14px 30px rgba(231,76,60,0.28);
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .watch-btn:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 20px 38px rgba(231,76,60,0.36);
        }

        .video-cta-premium {
            text-align: center;
            margin-top: 62px;
            position: relative;
            z-index: 3;
        }

        .video-cta-premium a {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(14px);
            border: 1px solid rgba(231,76,60,0.55);
            padding: 14px 34px;
            border-radius: 60px;
            color: white;
            font-weight: 800;
            text-decoration: none;
            box-shadow: 0 20px 48px rgba(0,0,0,0.25);
            animation: ctaFloat 2.4s ease-in-out infinite;
        }

        .video-cta-premium p { color: #94a3b8; margin-top: 16px; font-size: .9rem; }

        @property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
        @keyframes rotateBorder { to { --angle: 360deg; } }
        @keyframes videoGridMove { to { background-position: 48px 48px; } }
        @keyframes shineText { to { background-position: 220% center; } }
        @keyframes titleReveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes ctaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
        @keyframes playPulse { 0% { box-shadow: 0 0 0 0 rgba(231,76,60,.35), 0 18px 42px rgba(0,0,0,.35); } 70% { box-shadow: 0 0 0 18px rgba(231,76,60,0), 0 18px 42px rgba(0,0,0,.35); } 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0), 0 18px 42px rgba(0,0,0,.35); } }
        @keyframes floatOrb { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(7%,8%) scale(1.13); } }
        @keyframes particleDrift { 0% { transform: translateY(0) translateX(0); opacity: 0; } 20% { opacity: .9; } 85% { opacity: .5; } 100% { transform: translateY(-460px) translateX(95px); opacity: 0; } }

        @media (max-width: 1024px) {
            .video-grid-ultra { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
        }

        @media (max-width: 680px) {
            .cinema-video-section { padding: 78px 16px; }
            .cinema-title { margin-bottom: 42px; }
            .video-grid-ultra { grid-template-columns: 1fr; gap: 24px; }
            .video-flip-card { min-height: 430px; }
            .video-frame-wrap { height: 230px; }
        }
        /*========================================================================= */
        /* ENHANCED PRODUCTS SECTION */
        /* =========================================================================== */
        .products-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            position: relative;
            overflow: hidden;
        }
        
        .products-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.03"><rect width="1000" height="1000" fill="%232c3e50"/></svg>');
            background-size: 200px;
            z-index: -1;
        }
        
        .products-tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }
        
        .product-tab {
            padding: 12px 24px;
            background: var(--white);
            border: 2px solid var(--light);
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            color: var(--gray);
            position: relative;
            overflow: hidden;
        }
        
        .product-tab::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: var(--secondary);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
            z-index: -1;
        }
        
        .product-tab:hover,
        .product-tab.active {
            color: var(--white);
            border-color: var(--secondary);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(231, 76, 60, 0.2);
        }
        
        .product-tab.active::before,
        .product-tab:hover::before {
            width: 300px;
            height: 300px;
        }
        
        .product-tab span {
            position: relative;
            z-index: 1;
        }
        
        .product-category-section {
            margin-bottom: 80px;
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .product-category-section.active {
            display: block;
        }
        
        .category-title {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .category-title h4 {
            font-size: 2.2rem;
            color: var(--primary);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }
        
        .category-title h4::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: var(--secondary);
            border-radius: 2px;
        }
        
        .category-title p {
            color: var(--gray);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .products-slider-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            padding: 30px 0;
        }
        
       .products-slider-track {
            display: flex;
            gap: 30px;
            width: max-content;
            animation: scrollProducts 8s linear infinite;

        }
        
        .products-grid {
            display: flex;
            gap: 30px;
            flex-wrap: nowrap;
        }
        
        .product-card {
            background: var(--white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            height: 500px;
            width: 350px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
        }
        
        .product-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 30px 60px rgba(231, 76, 60, 0.2);
        }
        
        .product-image {
            height: 250px;
            overflow: hidden;
            background: linear-gradient(45deg, #f0f7ff, #e6f2ff);
            position: relative;
        }
        
        .product-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(228, 233, 238, 0.1), transparent);
            opacity: 0;
            transition: opacity 0.6s ease;
            z-index: 1;
        }
        
        .product-card:hover .product-image::before {
            opacity: 0.3;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 25px;
            transition: transform 0.8s ease;
            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
        }
        
        .product-card:hover .product-image img {
            transform: scale(1.1) rotate(2deg);
        }
        
        .product-info {
            padding: 30px;
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .product-info::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(231, 76, 60, 0.05), transparent);
            transition: left 0.8s ease;
        }
        
        .product-card:hover .product-info::before {
            left: 100%;
        }
        
        .product-name {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--primary);
            transition: all 0.4s ease;
            line-height: 1.3;
            min-height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .product-card:hover .product-name {
            color: var(--secondary);
            transform: translateY(-3px);
        }
        
        .product-category {
            color: var(--secondary);
            font-size: 0.9rem;
            font-weight: 700;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: all 0.4s ease;
            position: relative;
            display: inline-block;
        }
        
        .product-card:hover .product-category {
            transform: translateY(-3px);
            letter-spacing: 3px;
        }
        
        .product-category::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--secondary);
            transform: translateX(-50%);
            transition: width 0.4s ease;
        }
        
        .product-card:hover .product-category::after {
            width: 40px;
        }
        
        .product-description {
            color: var(--gray);
            margin-bottom: 20px;
            line-height: 1.6;
            transition: all 0.4s ease;
            flex: 1;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        
        .product-card:hover .product-description {
            transform: translateY(-3px);
        }
        
        .product-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 15px;
            transform: translateY(10px);
            transition: all 0.4s ease 0.2s;
        }
        
        .product-card:hover .product-actions {
            transform: translateY(0);
        }
        
        .product-action-btn {
            padding: 10px 18px;
            background: var(--light);
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .product-action-btn:hover {
            background: var(--secondary);
            color: var(--white);
            transform: translateY(-2px);
        }
        
        .product-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, var(--secondary), #c0392b);
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 0.8rem;
            font-weight: 700;
            z-index: 2;
            transform: translateX(30px);
            opacity: 0;
            transition: all 0.5s ease 0.2s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .product-card:hover .product-badge {
            transform: translateX(0);
            opacity: 1;
            animation: badgeBounce 2s ease infinite;
        }
        
        .paint-drops {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }
        
        .paint-drop {
            position: absolute;
            width: 15px;
            height: 25px;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            opacity: 0;
            transition: all 0.5s ease;
        }
        
        .product-card:hover .paint-drop {
            opacity: 0.6;
            animation: paintDropFloat 3s ease-in-out infinite;
        }
        
        .paint-drop-1 { 
            background: #e74c3c; 
            top: 15%; 
            left: 10%;
            animation-delay: 0s;
        }
        .paint-drop-2 { 
            background: #f7f8fa; 
            top: 60%; 
            right: 15%;
            animation-delay: 0.5s;
        }
        .paint-drop-3 { 
            background: #2ecc71; 
            bottom: 20%; 
            left: 20%;
            animation-delay: 1s;
        }
        
        .view-all-btn {
            text-align: center;
            margin-top: 60px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease 0.8s forwards;
        }
        
        /* Product Modal */
        .product-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .product-modal.active {
            opacity: 1;
            visibility: visible;
        }
        
        .modal-content {
            background: var(--white);
            border-radius: 25px;
            width: 90%;
            max-width: 900px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            transform: translateY(50px);
            transition: transform 0.5s ease;
            padding: 40px;
        }
        
        .product-modal.active .modal-content {
            transform: translateY(0);
        }
        
        .close-modal {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--secondary);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .close-modal:hover {
            transform: rotate(90deg);
            background: #c0392b;
        }
        
        .modal-body {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: start;
        }
        
        .modal-image {
            border-radius: 20px;
            overflow: hidden;
            background: linear-gradient(45deg, #f0f7ff, #e6f2ff);
        }
        
        .modal-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .modal-details h3 {
            font-size: 2rem;
            margin-bottom: 10px;
            color: var(--primary);
        }
        
        .modal-category {
            color: var(--secondary);
            font-weight: 600;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }
        
        .modal-description {
            color: var(--gray);
            line-height: 1.7;
            margin-bottom: 30px;
            font-size: 1.1rem;
        }
        
        .modal-specs {
            margin-bottom: 30px;
        }
        
        .modal-specs h4 {
            margin-bottom: 15px;
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .spec-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        
        .spec-item {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--gray);
        }
        
        .spec-item i {
            color: var(--secondary);
        }
        
        .modal-actions {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .slider-nav {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }
        
        .slider-nav-btn {
            padding: 12px 24px;
            background: var(--white);
            border: 2px solid var(--secondary);
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .slider-nav-btn:hover {
            background: var(--secondary);
            color: var(--white);
            transform: translateY(-3px);
        }

        /* =========================================================================== */
        /* ENHANCED BIRLA OPUS COLOUR CATALOGUE */
        /* =========================================================================== */
        .colour-catalogue-section {
            background: linear-gradient(135deg, #fff5f5 0%, #ffeaea 100%);
            position: relative;
            overflow: hidden;
        }
        
        .colour-catalogue-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.02"><rect width="1000" height="1000" fill="%23e74c3c"/></svg>');
            background-size: 200px;
            z-index: 0;
        }
        
        .catalogue-container {
            position: relative;
            z-index: 1;
        }
        
        .colour-slider-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            padding: 40px 0;
        }
        
        .colour-slider-track {
            display: flex;
            gap: 25px;
            width: max-content;
            animation: slideInfiniteReverse 30s linear infinite;
        }
        
        .colour-slider-track:hover {
            animation-play-state: paused;
        }
        
        .colour-card {
            background: var(--white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
            transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            width: 280px;
            height: 305px;
            flex-shrink: 0;
        }
        
        .colour-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 25px 50px rgba(231, 76, 60, 0.15);
            z-index: 10;
        }
        
        .colour-swatch {
            height: 200px;
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .colour-swatch::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
            opacity: 0;
            transition: opacity 0.6s ease;
            z-index: 1;
        }
        
        .colour-card:hover .colour-swatch::before {
            opacity: 0.3;
        }
        
        .colour-code {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 700;
            backdrop-filter: blur(5px);
            transform: translateY(10px);
            opacity: 0;
            transition: all 0.4s ease 0.1s;
            z-index: 2;
            letter-spacing: 1px;
        }
        
        .colour-card:hover .colour-code {
            transform: translateY(0);
            opacity: 1;
        }
        
        .colour-info {
            padding: 25px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .colour-info::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(231, 76, 60, 0.03), transparent);
            transition: left 0.8s ease;
        }
        
        .colour-card:hover .colour-info::before {
            left: 100%;
        }
        
        .colour-name {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--primary);
            transition: all 0.4s ease;
        }
        
        .colour-card:hover .colour-name {
            color: var(--secondary);
            transform: translateY(-3px);
        }
        
        .colour-type {
            color: var(--secondary);
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            transition: all 0.4s ease;
        }
        
        .colour-card:hover .colour-type {
            letter-spacing: 2px;
        }
        
        .colour-category {
            color: var(--gray);
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 20px;
            transition: all 0.4s ease;
        }
        
        .colour-card:hover .colour-category {
            transform: translateY(-2px);
        }
        
        .colour-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.4s ease 0.2s;
        }
        
        .colour-card:hover .colour-actions {
            opacity: 1;
            transform: translateY(0);
        }
        
        .colour-action-btn {
            padding: 10px 18px;
            background: var(--light);
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .colour-action-btn:hover {
            background: var(--secondary);
            color: var(--white);
            transform: translateY(-2px);
        }
        
        .colour-preview {
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--white);
            padding: 10px 15px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 20;
            font-weight: 600;
            font-size: 0.9rem;
            white-space: nowrap;
            border: 2px solid var(--light);
        }
        
        .colour-preview::before {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid var(--white);
        }
        
        .colour-card:hover .colour-preview {
            opacity: 1;
            visibility: visible;
            top: -60px;
        }
        
        .catalogue-filter {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }
        
        .filter-btn {
            padding: 12px 24px;
            background: var(--white);
            border: 2px solid var(--light);
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            color: var(--gray);
            position: relative;
            overflow: hidden;
        }
        
        .filter-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: var(--secondary);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
            z-index: -1;
        }
        
        .filter-btn:hover,
        .filter-btn.active {
            color: var(--white);
            border-color: var(--secondary);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(231, 76, 60, 0.2);
        }
        
        .filter-btn.active::before,
        .filter-btn:hover::before {
            width: 300px;
            height: 300px;
        }
        
        .filter-btn span {
            position: relative;
            z-index: 1;
        }
        
        .view-catalogue-btn {
            text-align: center;
            margin-top: 60px;
        }
        
        /* =========================================================================== */
        /* ENHANCED SERVICES SECTION */
        /* =========================================================================== */
        .services-section {
            background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }
        
        .service-card {
            background: var(--white);
            padding: 40px 30px;
            border-radius: 16px;
            box-shadow: var(--shadow);
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--gradient-secondary);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        
        .service-card:hover::before {
            transform: scaleX(1);
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        .service-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-secondary);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: white;
            margin: 0 auto 25px;
            transition: all 0.3s ease;
        }
        
        .service-card:hover .service-icon {
            transform: scale(1.1) rotate(5deg);
        }
        
        .service-card h3 {
            margin-bottom: 15px;
            color: var(--primary);
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .service-card p {
            color: var(--gray);
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .service-features {
            text-align: left;
            margin-top: 20px;
        }
        
        .service-features li {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            color: var(--gray);
        }
        
        .service-features li i {
            color: var(--success);
            font-size: 0.9rem;
        }
        
        /* ================= BOOKING SECTION ANIMATIONS ================= */

.booking-section {
    position: relative;
    overflow: hidden;
    padding: 100px 20px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
}
.booking-form input,
/* Fix booking form dropdown on mobile */

.booking-form select {
    width: 100%;
    padding: 16px;
    margin-bottom: 20px;

    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.2);

    background: rgba(255,255,255,0.08);
    color: #ffffff;

    font-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    transition: 0.4s;
}

/* Dropdown options */
.booking-form select option {
    background: #1e293b;
    color: #ffffff;
}

/* Focus effect */
.booking-form select:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34,197,94,0.4);
}
.booking-form textarea {

    width: 100%;
    padding: 14px 16px;
    margin-bottom: 18px;

    border: 2px solid #1e293b;
    border-radius: 10px;

    font-size: 16px;

    outline: none;
    transition: 0.3s;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {

    border-color: #39e64d;
}

/* Animated background glow */

.booking-section::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    top: -150px;
    left: -150px;
    animation: floatingGlow 8s ease-in-out infinite;
}

.booking-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
    bottom: -120px;
    right: -120px;
    animation: floatingGlow2 10s ease-in-out infinite;
}

/* Container */

.booking-container {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: auto;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
    padding: 50px;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.4),
        0 0 20px rgba(255,255,255,0.08);
    animation: fadeUp 1s ease;
}

/* Title Animation */

.section-title {
    text-align: center;
    color: #ffffff;
    font-size: 3rem;
    margin-bottom: 50px;
    animation: zoomIn 1s ease;
}

/* Step Indicator */

.booking-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    position: relative;
}

/* Step line */

.booking-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 10%;
    width: 80%;
    height: 4px;
    background: rgba(255,255,255,0.2);
    z-index: 0;
}

.step-item {
    position: relative;
    z-index: 2;
    text-align: center;
    transition: 0.4s;
}

.step-item p {
    color: #ffffff;
}

.step-item span {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    border-radius: 50%;
    margin: auto;
    font-size: 1.2rem;
    font-weight: bold;
    transition: 0.4s;
}

/* Active Step */

.step-item.active span {
    background: #22c55e;
    transform: scale(1.15);
    box-shadow: 0 0 25px #22c55e;
    animation: pulseGlow 1.5s infinite;
}

/* Completed Step */

.step-item.completed span {
    background: #3b82f6;
    box-shadow: 0 0 20px #3b82f6;
}

/* Forms */

.booking-form {
    animation: slideFade 0.6s ease;
}

.booking-form h3 {
    color: #ffffff;
    margin-bottom: 20px;
}

.hidden {
    display: none;
}

/* Inputs */

.booking-form input,
.booking-form textarea {
    width: 100%;
    padding: 16px;
    margin-bottom: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    font-size: 1rem;
    transition: 0.4s;
}

.booking-form input::placeholder,
.booking-form textarea::placeholder {
    color: #ffffff;
}

.booking-form input:focus,
.booking-form textarea:focus {
    transform: scale(1.02);
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34,197,94,0.4);
    outline: none;
}

/* Service Cards */

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.service-option {
    background: rgba(255,255,255,0.08);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    transition: 0.5s;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.service-option h4 {
    color: #ffffff;
    margin-bottom: 10px;
}

.service-option p {
    color: #ffffff;
}

/* Shine effect */

.service-option::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.2),
        transparent
    );
    transform: rotate(25deg);
    transition: 0.7s;
}

.service-option:hover::before {
    top: 100%;
    left: 100%;
}

.service-option:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #22c55e;
    box-shadow: 0 15px 35px rgba(34,197,94,0.3);
}

/* Selected Service */

.service-option.selected {
    border-color: #22c55e;
    background: rgba(34,197,94,0.15);
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(34,197,94,0.5);
}

/* Buttons */

.booking-btn {
    padding: 15px 35px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.4s;
}

.booking-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 25px rgba(34,197,94,0.5);
}

.booking-btn:active {
    transform: scale(0.95);
}

/* Secondary Button */

.booking-btn.secondary {
    background: linear-gradient(135deg, #64748b, #475569);
}

/* Summary */

.booking-summary,
.booking-summary p,
.booking-summary span,
.booking-summary strong {
    color: #ffffff;
}

/* Success Box */

.booking-success {
    text-align: center;
    color: #ffffff;
    animation: zoomBounce 0.8s ease;
}

.booking-success h2 {
    font-size: 2.5rem;
    margin: 20px 0;
    color: #ffffff;
    animation: pulseGlow 1.5s infinite;
}

.booking-success h3,
.booking-success p {
    color: #ffffff;
}

/* ================= KEYFRAMES ================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFade {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomBounce {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 10px #22c55e;
    }
    50% {
        box-shadow: 0 0 30px #22c55e;
    }
    100% {
        box-shadow: 0 0 10px #22c55e;
    }
}

@keyframes floatingGlow {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(40px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes floatingGlow2 {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* ================= MOBILE ================= */

@media(max-width:768px){

    .booking-container {
        padding: 25px;
    }

    .booking-steps {
        gap: 10px;
    }

    .step-item span {
        width: 45px;
        height: 45px;
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 2rem;
    }

}
        
        /* =========================================================================== */
        /* ENHANCED LOGIN SECTION */
        /* =========================================================================== */
        .login-section {
            padding: 100px 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
        }
        
        .login-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.1"><circle cx="100" cy="100" r="80" fill="white"/><circle cx="800" cy="200" r="120" fill="white"/><circle cx="500" cy="800" r="100" fill="white"/></svg>');
            background-size: 300px;
        }
        
        .login-container {
            max-width: 500px;
            margin: 0 auto;
            background: var(--white);
            border-radius: 25px;
            padding: 50px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
            animation: fadeInUp 1s ease;
        }
        
        .login-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #e74c3c, #3498db, #27ae60, #f39c12);
            background-size: 300% 100%;
            animation: gradientSlide 3s ease infinite;
        }
        
        .login-container::after {
            content: '\f023';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 8rem;
            opacity: 0.03;
            color: var(--primary);
        }
        
        .login-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 20px;
        }
        
        .login-tab {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1.1rem;
        }
        
        .login-tab.active {
            background: linear-gradient(135deg, var(--secondary), #c0392b);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(231, 76, 60, 0.2);
        }
        
        .login-tab:not(.active) {
            background: transparent;
            color: var(--secondary);
            border: 2px solid var(--secondary);
        }
        
        .login-tab:not(.active):hover {
            background: var(--secondary);
            color: white;
            transform: translateY(-2px);
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .login-icon {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, var(--secondary), #c0392b);
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: float 3s ease-in-out infinite;
            box-shadow: 0 10px 30px rgba(231, 76, 60, 0.3);
        }
        
        .login-icon i {
            font-size: 3rem;
            color: white;
        }
        
        .login-header h3 {
            color: var(--primary);
            font-size: 1.8rem;
            margin-bottom: 10px;
        }
        
        .login-header p {
            color: var(--gray);
        }
        
        .login-form {
            display: block;
        }
        
        .login-form.hidden {
            display: none;
        }
        
        .otp-section {
            margin-top: 20px;
            padding: 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 15px;
            animation: slideIn 0.5s ease;
        }
        
        .otp-input-group {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin: 20px 0;
        }
        
        .otp-box {
            width: 50px;
            height: 60px;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            font-size: 1.8rem;
            font-weight: 700;
            text-align: center;
            color: var(--primary);
            transition: all 0.3s ease;
        }
        
        .otp-box:focus {
            outline: none;
            border-color: var(--secondary);
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
            transform: translateY(-2px);
        }
        
        .timer {
            text-align: center;
            color: var(--secondary);
            font-weight: 600;
            margin: 15px 0;
        }
        
        .timer i {
            margin-right: 5px;
        }
        
        .resend-link {
            text-align: center;
            margin: 15px 0;
        }
        
        .resend-link a {
            color: var(--secondary);
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .resend-link a:hover {
            color: #c0392b;
            text-decoration: underline;
        }
        
        .login-footer {
            text-align: center;
            margin-top: 25px;
            padding-top: 25px;
            border-top: 2px solid #f0f0f0;
        }
        
        .login-footer a {
            color: var(--secondary);
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .login-footer a:hover {
            color: #c0392b;
            text-decoration: underline;
        }
        
        .login-benefits {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 30px;
        }
        
        .benefit-item {
            text-align: center;
            padding: 15px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 12px;
            transition: all 0.3s ease;
        }
        
        .benefit-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .benefit-item i {
            font-size: 1.5rem;
            color: var(--secondary);
            margin-bottom: 8px;
        }
        
        .benefit-item span {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--primary);
            display: block;
        }
        
        /* =========================================================================== */
        /* ENHANCED TESTIMONIALS */
        /* =========================================================================== */
        .testimonials {
            background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);
            color: var(--white);
            position: relative;
            overflow: hidden;
        }
        
        .testimonials::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.05"><circle cx="200" cy="200" r="100" fill="white"/><circle cx="800" cy="800" r="150" fill="white"/><circle cx="600" cy="300" r="80" fill="white"/></svg>');
        }
        
        .testimonials .section-title h2,
        .testimonials .section-title p {
            color: var(--white);
        }
        
        .testimonials .section-title h2::after {
            background: var(--secondary);
        }
        
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }
        
        .testimonial-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 40px 30px;
            border-radius: 16px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        .testimonial-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.15);
        }
        
        .testimonial-quote {
            font-size: 3rem;
            color: var(--secondary);
            opacity: 0.5;
            line-height: 1;
            margin-bottom: 10px;
        }
        
        .testimonial-text {
            font-style: italic;
            margin-bottom: 25px;
            line-height: 1.6;
            font-size: 1.1rem;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .author-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--gradient-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        
        .author-info h4 {
            margin-bottom: 5px;
            font-size: 1.1rem;
        }
        
        .author-info p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }
        
        .rating {
            color: var(--warning);
            margin-top: 5px;
        }
        
        /* =========================================================================== */
        /* ENHANCED GALLERY */
        /* =========================================================================== */
        .gallery-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }
        
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
        }
        
        .gallery-item {
            height: 280px;
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            box-shadow: var(--shadow);
        }
        
        .gallery-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(0,0,0,0.3), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1;
        }
        
        .gallery-item:hover::before {
            opacity: 1;
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        
        .gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 25px;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            z-index: 2;
        }
        
        .gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
        
        .gallery-title {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 1.2rem;
        }
        
        .gallery-category {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        /* =========================================================================== */
        /* ENHANCED STORE LOCATOR */
        /* =========================================================================== */
        .store-locator {
            background: linear-gradient(135deg, #e8f4f8 0%, #d1e7f5 100%);
        }
        
        .locator-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: start;
        }
        
        .store-map {
            height: 500px;
            background: var(--light);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow);
            position: relative;
        }
        
        .map-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            text-align: center;
        }
        
        .map-placeholder i {
            font-size: 4rem;
            margin-bottom: 20px;
            color: var(--accent);
        }
        
        .store-map img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .store-list {
            max-height: 500px;
            overflow-y: auto;
            padding-right: 10px;
        }
        
        .store-list::-webkit-scrollbar {
            width: 6px;
        }
        
        .store-list::-webkit-scrollbar-track {
            background: var(--light);
            border-radius: 10px;
        }
        
        .store-list::-webkit-scrollbar-thumb {
            background: var(--secondary);
            border-radius: 10px;
        }
        
        .store-item {
            padding: 25px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 12px;
            margin-bottom: 15px;
            background: var(--white);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .store-item:hover {
            transform: translateX(5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .store-item.active {
            background: var(--white);
            border-left: 4px solid var(--secondary);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .store-name {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .store-address {
            color: var(--gray);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .store-hours {
            font-size: 0.9rem;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .store-features {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        
        .store-feature {
            background: var(--light);
            color: var(--primary);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        /* =========================================================================== */
        /* ENHANCED ABOUT SECTION */
        /* =========================================================================== */
        .about-section {
            background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
        }
        
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        
        .about-text h2 {
            font-size: 2.5rem;
            margin-bottom: 25px;
            color: var(--primary);
            font-weight: 700;
            line-height: 1.2;
        }
        
        .about-text p {
            margin-bottom: 20px;
            color: var(--gray);
            line-height: 1.7;
            font-size: 1.1rem;
        }
        
        .about-features {
            margin: 30px 0;
        }
        
        .about-feature {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .about-feature i {
            color: var(--success);
            font-size: 1.2rem;
        }
        
        .about-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 40px;
        }
        
        .about-stat {
            text-align: center;
            padding: 20px;
            background: var(--white);
            border-radius: 12px;
            box-shadow: var(--shadow);
        }
        
        .about-stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--secondary);
            display: block;
            line-height: 1;
        }
        
        .about-stat-label {
            color: var(--gray);
            margin-top: 5px;
            font-size: 0.9rem;
        }
        
        .about-image {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            position: relative;
            background-color: rgb(250, 250, 250);
        }
        
        .about-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--gradient-secondary);
            opacity: 0.1;
            z-index: 1;
        }
        
        .about-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }
        
        .about-image:hover img {
            transform: scale(1.05);
        }
        
        /* =========================================================================== */
        /* ENHANCED CONTACT SECTION */
        /* =========================================================================== */
        .contact-section {
            background: linear-gradient(135deg, #f0f9ff 0%, #e6f4ff 100%);
            position: relative;
            overflow: hidden;
        }
        
        .contact-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.03"><path d="M500,500 m-280,0 a280,280 0 1,1 560,0 a280,280 0 1,1 -560,0" fill="%232c3e50"/></svg>');
            background-size: 300px;
            z-index: 0;
        }
        
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            position: relative;
            z-index: 1;
        }
        
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            padding: 30px;
            background: var(--white);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }
        
        .contact-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(231, 76, 60, 0.05), transparent);
            transition: left 0.8s ease;
        }
        
        .contact-item:hover::before {
            left: 100%;
        }
        
        .contact-item:hover {
            transform: translateY(-8px) translateX(0);
            box-shadow: 0 20px 40px rgba(231, 76, 60, 0.1);
        }
        
        .contact-icon {
            width: 70px;
            height: 70px;
            background: var(--gradient-secondary);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: white;
            flex-shrink: 0;
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .contact-icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }
        
        .contact-item:hover .contact-icon {
            transform: scale(1.1) rotate(5deg);
        }
        
        .contact-item:hover .contact-icon::before {
            left: 100%;
        }
        
        .contact-details h3 {
            margin-bottom: 12px;
            color: var(--primary);
            font-size: 1.3rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .contact-item:hover .contact-details h3 {
            color: var(--secondary);
        }
        
        .contact-details p {
            color: var(--gray);
            line-height: 1.6;
            font-size: 1.05rem;
            transition: all 0.3s ease;
        }
        
        .contact-item:hover .contact-details p {
            transform: translateY(-2px);
        }
        
        .contact-form {
            background: var(--white);
            padding: 50px 40px;
            border-radius: 25px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
        }
        
        .contact-form::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--secondary), var(--accent), #27ae60, #f39c12);
            background-size: 300% 100%;
            animation: gradientSlide 3s ease infinite;
        }
        
        .contact-form::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(231, 76, 60, 0.02), transparent);
            z-index: -1;
        }
        
        .form-group {
            margin-bottom: 30px;
            position: relative;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: var(--primary);
            font-size: 1.05rem;
            transition: all 0.3s ease;
        }
        
        .form-group:focus-within label {
            color: var(--secondary);
            transform: translateX(5px);
        }
        
        .form-control {
            width: 100%;
            padding: 18px 22px;
            border: 2px solid #e9ecef;
            border-radius: 14px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: var(--white);
            position: relative;
            z-index: 1;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.15);
            transform: translateY(-2px);
        }
        
        textarea.form-control {
            min-height: 160px;
            resize: vertical;
            line-height: 1.5;
        }
        
        .contact-form .btn {
            width: 100%;
            padding: 18px;
            font-size: 1.1rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--secondary), #c0392b);
            border-radius: 14px;
            margin-top: 10px;
            position: relative;
            overflow: hidden;
        }
        
        .contact-form .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(231, 76, 60, 0.25);
        }
        
        .contact-social-links {
            display: flex;
            gap: 15px;
            margin-top: 30px;
            justify-content: center;
        }
        
        .contact-social-link {
            width: 50px;
            height: 50px;
            background: var(--white);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 1.3rem;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .contact-social-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }
        
        .contact-social-link:hover::before {
            left: 100%;
        }
        
        .contact-social-link:hover {
            transform: translateY(-5px) scale(1.1);
            color: var(--white);
        }
        
        .contact-social-link:nth-child(1):hover {
            background: #1877f2;
            box-shadow: 0 15px 30px rgba(24, 119, 242, 0.25);
        }
        
        .contact-social-link:nth-child(2):hover {
            background: linear-gradient(45deg, #405DE6, #E1306C, #FD1D1D, #F77737, #FFDC80);
            box-shadow: 0 15px 30px rgba(225, 48, 108, 0.25);
        }
        
        .contact-social-link:nth-child(3):hover {
            background: #25d366;
            box-shadow: 0 15px 30px rgba(37, 211, 102, 0.25);
        }
        
        .contact-social-link:nth-child(4):hover {
            background: #0077b5;
            box-shadow: 0 15px 30px rgba(0, 119, 181, 0.25);
        }
        
        .form-message {
            margin-top: 25px;
            padding: 20px;
            border-radius: 14px;
            text-align: center;
            display: none;
            animation: messageEntrance 0.5s ease;
            position: relative;
            overflow: hidden;
        }
        
        .form-message::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            opacity: 0.8;
            z-index: -1;
        }
        
        .form-message.success {
            background-color: #d4edda;
            color: #155724;
            border: 2px solid #c3e6cb;
        }
        
        .form-message.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 2px solid #f5c6cb;
        }
        
        /* =========================================================================== */
        /* ENHANCED FOOTER */
        /* =========================================================================== */
        footer {
            background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
            color: var(--white);
            padding: 80px 0 30px;
            position: relative;
        }
        
        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.05"><polygon points="0,1000 1000,0 1000,1000" fill="white"/></svg>');
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 50px;
            position: relative;
            z-index: 1;
        }
        
        .footer-column h3 {
            font-size: 1.4rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
            font-weight: 600;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background: var(--secondary);
            border-radius: 2px;
        }
        
        .footer-column p {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .footer-column ul li {
            margin-bottom: 12px;
        }
        
        .footer-column ul li a {
            color: rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .footer-column ul li a:hover {
            color: var(--secondary);
            transform: translateX(5px);
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            transition: all 0.3s ease;
            font-size: 1.2rem;
        }
        
        .social-links a:hover {
            background: var(--secondary);
            transform: translateY(-3px);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.6);
            position: relative;
            z-index: 1;
        }
        
        /* =========================================================================== */
        /* ANIMATION KEYFRAMES */
        /* =========================================================================== */
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        @keyframes slideInFromTop {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes slideInFromBottom {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes rotateIn {
            from {
                opacity: 0;
                transform: rotate(-180deg) scale(0.3);
            }
            to {
                opacity: 1;
                transform: rotate(0) scale(1);
            }
        }
        
        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3);
            }
            50% {
                opacity: 1;
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0) translateX(0);
            }
            50% {
                transform: translateY(-20px) translateX(10px);
            }
        }
        
        @keyframes floatDrop {
            0%, 100% {
                transform: translateY(0) translateX(0) rotate(0deg);
                opacity: 0.7;
            }
            33% {
                transform: translateY(-30px) translateX(20px) rotate(120deg);
                opacity: 1;
            }
            66% {
                transform: translateY(-15px) translateX(-15px) rotate(240deg);
                opacity: 0.9;
            }
        }
        
        @keyframes paintSplash {
            0% {
                transform: scale(0) rotate(0deg);
                opacity: 0;
            }
            50% {
                opacity: 0.8;
            }
            100% {
                transform: scale(4) rotate(180deg);
                opacity: 0;
            }
        }
        
        @keyframes shine {
            to {
                transform: translateX(100%);
            }
        }
        
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }
        
        @keyframes typewriter {
            from {
                width: 0;
            }
            to {
                width: 100%;
            }
        }
        
        @keyframes blink {
            0%, 100% {
                border-color: var(--secondary);
            }
            50% {
                border-color: transparent;
            }
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slideOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(-100px);
            }
        }
        
        @keyframes gradientSlide {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        @keyframes particleFloat {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) translateX(100px);
                opacity: 0;
            }
        }
        
        @keyframes cardEntrance {
            from {
                opacity: 0;
                transform: translateY(50px) rotateX(30deg);
            }
            to {
                opacity: 1;
                transform: translateY(0) rotateX(0);
            }
        }
        
        @keyframes badgeFloat {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
        }
        
        @keyframes badgeBounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
        }
        
        @keyframes paintDropFloat {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-15px) rotate(10deg);
            }
        }
        
        @keyframes slideInfinite {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }
        
        @keyframes slideInfiniteReverse {
            0% {
                transform: translateX(-50%);
            }
            100% {
                transform: translateX(0);
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        @keyframes messageEntrance {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes backgroundSpin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        @keyframes gradientShift {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }
        
        @keyframes tabPulse {
            0%, 100% {
                box-shadow: 0 15px 30px rgba(231, 76, 60, 0.2);
            }
            50% {
                box-shadow: 0 15px 35px rgba(231, 76, 60, 0.3);
            }
        }
        
        @keyframes iconFloat {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            33% {
                transform: translateY(-10px) rotate(5deg);
            }
            66% {
                transform: translateY(-5px) rotate(-5deg);
            }
        }
        
        @keyframes dateBounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
        }
        
        @keyframes badgeGlow {
            0% {
                filter: brightness(1);
            }
            50% {
                filter: brightness(1.2);
            }
            100% {
                filter: brightness(1);
            }
        }
        
        @keyframes featureIcon {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.2);
            }
        }
        
        @keyframes cardDropFloat {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            33% {
                transform: translateY(-15px) rotate(20deg);
            }
            66% {
                transform: translateY(-8px) rotate(-20deg);
            }
        }
        
        @keyframes labelPulse {
            0%, 100% {
                background: rgba(0,0,0,0.2);
            }
            50% {
                background: rgba(231, 76, 60, 0.3);
            }
        }
        
        @keyframes tickerScroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
        
        @keyframes dayPulse {
            0%, 100% {
                box-shadow: 0 15px 30px rgba(231, 76, 60, 0.3);
            }
            50% {
                box-shadow: 0 20px 40px rgba(231, 76, 60, 0.4);
            }
        }
        
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        
        @keyframes shake {
            0%, 100% {
                transform: translateX(0);
            }
            10%, 30%, 50%, 70%, 90% {
                transform: translateX(-5px);
            }
            20%, 40%, 60%, 80% {
                transform: translateX(5px);
            }
        }
        
        @keyframes glowPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
            }
        }
        
        /* Notification */
        .notification {
            position: fixed;
            top: 100px;
            right: 20px;
            background: var(--success);
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 9999;
            transform: translateX(120%);
            transition: transform 0.3s ease;
        }
        
        .notification.error {
            background: var(--secondary);
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        /* Responsive Styles */
        @media (max-width: 1200px) {
            .hero h2 {
                font-size: 3.5rem;
            }
            
            .section-title h2 {
                font-size: 2.5rem;
            }
            
            .product-card, .colour-card {
                width: 300px;
            }
        }
        
        @media (max-width: 992px) {
            .about-content,
            .contact-container,
            .locator-container {
                grid-template-columns: 1fr;
            }
            
            .about-image {
                order: -1;
            }
            
            .hero h2 {
                font-size: 3rem;
            }
            
            .nav-menu {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: var(--white);
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                padding-top: 50px;
                transition: left 0.3s ease;
                box-shadow: var(--shadow);
            }
            
            .nav-menu.active {
                left: 0;
            }
            
            .mobile-toggle {
                display: block;
            }
            
            .modal-body {
                grid-template-columns: 1fr;
            }
            
            .updates-grid {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            }
            
            .subscribe-input-group {
                flex-direction: column;
            }
            
            .login-benefits {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .booking-container {
                padding: 30px;
            }
        }
        
        @media (max-width: 768px) {
            .hero h2 {
                font-size: 2.5rem;
            }
            
            .hero-btns {
                flex-direction: column;
                align-items: center;
            }
            
            .hero-btns .btn {
                width: 100%;
                max-width: 300px;
                margin-bottom: 10px;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .product-card, .colour-card {
                height: 450px;
                width: 280px;
            }
            
            .product-image, .colour-swatch {
                height: 200px;
            }
            
            .contact-form {
                padding: 30px 25px;
            }
            
            .modal-content {
                width: 95%;
                padding: 30px;
            }
            
            .spec-list {
                grid-template-columns: 1fr;
            }
            
            .subscribe-form {
                padding: 30px;
            }
            
            .calendar-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .news-ticker .ticker-label {
                display: none;
            }
            
            .ticker-content {
                padding-left: 20px;
            }
            
            .login-container {
                padding: 30px;
            }
            
            .otp-box {
                width: 40px;
                height: 50px;
                font-size: 1.5rem;
            }
            
            .booking-actions {
                flex-direction: column;
            }
            
            .service-options {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .hero {
                padding: 150px 0 100px;
            }
            
            .hero h2 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1.1rem;
            }
            
            .section-title h2 {
                font-size: 1.8rem;
            }
            
            .stat-number {
                font-size: 2.5rem;
            }
            
            .services-grid,
            .testimonials-grid,
            .gallery-grid,
            .updates-grid {
                grid-template-columns: 1fr;
            }
            
            .product-card, .colour-card {
                height: 420px;
                width: 260px;
            }
            
            .product-image, .colour-swatch {
                height: 180px;
            }
            
            .product-name, .colour-name {
                font-size: 1.4rem;
            }
            
            .product-description {
                font-size: 1rem;
            }
            
            .contact-form {
                padding: 25px 20px;
            }
            
            .contact-item {
                padding: 20px;
            }
            
            .contact-icon {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }
            
            .products-tabs {
                justify-content: flex-start;
                overflow-x: auto;
                padding-bottom: 10px;
            }
            
            .modal-content {
                padding: 20px;
            }
            
            .calendar-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .otp-box {
                width: 35px;
                height: 45px;
                font-size: 1.3rem;
            }
            
            .booking-container {
                padding: 20px;
            }
            
            .booking-steps {
                flex-direction: column;
                gap: 20px;
            }
            
            .booking-steps::before {
                display: none;
            }
        }
        


        /* ================= GANAPATHI NEW PREMIUM THEME + MOBILE FIX ================= */
        html { scroll-behavior: smooth; overflow-x: hidden; }
        body { background: radial-gradient(circle at top left, #fff3d9 0, #fffaf2 35%, #f3fff8 100%); }
        header { width: 100%; backdrop-filter: blur(16px); background: rgba(255, 248, 239, 0.92); border-bottom: 1px solid rgba(0,168,107,0.15); }
        .header-container { width: 100%; max-width: 1240px; margin: 0 auto; justify-content: space-between; padding: 10px 18px; }
        .logo h1 { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .nav-menu a.active, .nav-menu a:hover { color: var(--secondary); }
        .btn, .booking-btn, .watch-btn, .product-tab.active { background: var(--gradient-secondary) !important; box-shadow: 0 12px 28px rgba(255,122,0,.22); }
        section { animation: sectionFadeUp .9s ease both; }
        .section-title h2 { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .section-title h2::after { background: var(--gradient-secondary); width: 110px; }
        .service-card, .product-card, .colour-card, .testimonial-card, .gallery-item, .about-stat, .contact-item, .contact-form, .video-flip-card, .booking-form, .store-item { animation: cardFloatIn .9s ease both; border: 1px solid rgba(0,168,107,.14); }
        .service-card:hover, .product-card:hover, .colour-card:hover, .testimonial-card:hover, .gallery-item:hover, .about-stat:hover, .contact-item:hover, .video-flip-card:hover, .booking-form:hover { transform: translateY(-10px) scale(1.015); box-shadow: 0 25px 55px rgba(18,55,42,.16); }
        .animated-bg div, .bg-shape-1, .bg-shape-2, .bg-shape-3 { filter: hue-rotate(95deg) saturate(1.4); animation-duration: 10s !important; }
        .hero { background: linear-gradient(135deg, rgba(18,55,42,.92), rgba(0,168,107,.76)), url('https://images.unsplash.com/photo-1589939705384-5185137a7f0f?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat; }
        .hero h2, .hero p { animation: heroSlideMobile 1s ease both; }
        .hero p { animation-delay: .18s; }
        .hero-btns { animation: heroSlideMobile 1s ease .28s both; }
        .contact-section { background: linear-gradient(135deg, #fff8ef 0%, #eafff4 52%, #fff2db 100%); }
        .contact-container { align-items: stretch; }
        .contact-action-card { background: linear-gradient(135deg, #eafff4, #ffffff); }
        .contact-details a { color: var(--primary); font-weight: 700; }
        .contact-details a:hover { color: var(--secondary); }
        .contact-form { background: rgba(255,255,255,.86); backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(18,55,42,.14); }
        .contact-form::before { background: var(--gradient); height: 6px; }
        .form-message.success { display:block; margin-top:18px; padding:16px; border-radius:14px; background:#eafff4; color:#12372A; border:1px solid rgba(0,168,107,.25); }
        .form-control { min-height: 58px; color: var(--primary); }
        select.form-control { appearance: auto; }
        .cinema-video-section { background: radial-gradient(circle at top, #134532 0%, #071d18 48%, #030c09 100%) !important; }
        .video-flip-card { animation: videoPulseFloat 4.5s ease-in-out infinite; }
        .video-flip-card:nth-child(2) { animation-delay: .45s; }
        .video-flip-card:nth-child(3) { animation-delay: .9s; }
        .video-frame-wrap iframe { pointer-events: auto; }
        
        .ge-reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s ease; }
        .ge-reveal.ge-visible { opacity: 1; transform: translateY(0); }
        @media (prefers-reduced-motion: reduce) { .ge-reveal, section, .video-flip-card { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }

        @keyframes sectionFadeUp { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes cardFloatIn { from { opacity: 0; transform: translateY(45px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes heroSlideMobile { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes videoPulseFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
        @media (max-width: 992px) {
            header { position: sticky; top: 0; }
            .nav-menu { top: 72px; height: calc(100dvh - 72px); overflow-y: auto; background: rgba(255,248,239,.98); padding: 28px 18px; gap: 6px; }
            .nav-menu li, .nav-menu a { width: 100%; text-align: center; }
            .nav-menu a { display: block; padding: 14px; border-radius: 14px; background: rgba(18,55,42,.04); }
            .contact-container, .about-content, .locator-container { grid-template-columns: 1fr !important; gap: 28px; }
            .video-container-premium, .container, .booking-container { width: 100%; max-width: 100%; }
        }
        @media (max-width: 768px) {
            .container { width: 100%; padding: 0 16px; }
            section { padding: 64px 0; }
            .header-container { padding: 8px 14px; }
            .logo-icon { width: 42px; height: 42px; }
            .logo h1 { font-size: 1.05rem; white-space: normal; line-height: 1.15; }
            .logo span { font-size: .72rem; }
            .hero { min-height: auto; padding: 118px 0 72px; text-align: center; }
            .hero h2 { font-size: clamp(2rem, 9vw, 2.85rem); line-height: 1.08; }
            .hero p { font-size: 1rem; }
            .section-title { margin-bottom: 34px; }
            .section-title h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
            .section-title p { font-size: .98rem; padding: 0 8px; }
            .video-grid-ultra, .services-grid, .testimonials-grid, .gallery-grid, .updates-grid, .service-grid { grid-template-columns: 1fr !important; }
            .video-flip-card { min-height: auto; animation: none; }
            .video-frame-wrap { height: 210px !important; }
            .contact-item { flex-direction: row; padding: 18px; gap: 14px; border-radius: 18px; }
            .contact-icon { width: 52px; height: 52px; font-size: 1.25rem; border-radius: 14px; }
            .contact-details h3 { font-size: 1.05rem; }
            .contact-details p { font-size: .92rem; word-break: break-word; }
            .contact-form { padding: 24px 16px !important; border-radius: 22px; }
            .form-group { margin-bottom: 22px; }
            .form-control { padding: 16px; font-size: 16px; }
            .contact-social-links { flex-wrap: wrap; }
            .booking-container { padding: 20px 14px !important; border-radius: 20px; }
            .booking-steps { display: grid !important; grid-template-columns: repeat(4,1fr); gap: 8px; }
            .booking-steps .step-item p { font-size: .72rem; }
            .booking-steps .step-item span { width: 34px; height: 34px; }
            .booking-form input, .booking-form select, .booking-form textarea { width: 100%; font-size: 16px; }
            .products-tabs { overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
            .product-tab { flex: 0 0 auto; }
            .product-card, .colour-card { width: min(86vw, 300px); }
            .footer-content { grid-template-columns: 1fr !important; gap: 28px; }
        }
        @media (max-width: 420px) {
            .contact-item { flex-direction: column; }
            .hero-btns .btn, .btn-lg { width: 100%; justify-content: center; }
            .video-frame-wrap { height: 190px !important; }
            .booking-steps { grid-template-columns: repeat(2,1fr); }
        }

        /* Utility Classes */
        .text-center {
            text-align: center;
        }
        
        .mb-30 {
            margin-bottom: 30px;
        }
        
        .mt-30 {
            margin-top: 30px;
        }
        
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Decorative Elements */
        .decorative-circle {
            position: absolute;
            border-radius: 50%;
            background: var(--gradient-secondary);
            opacity: 0.1;
            z-index: 0;
            animation: float 8s ease-in-out infinite;
        }
        
        .circle-1 {
            width: 300px;
            height: 300px;
            top: 10%;
            left: 5%;
        }
        
        .circle-2 {
            width: 200px;
            height: 200px;
            bottom: 15%;
            right: 10%;
            animation-delay: 2s;
            animation-duration: 10s;
        }
        
        .circle-3 {
            width: 150px;
            height: 150px;
            top: 40%;
            right: 20%;
            animation-delay: 1s;
            animation-duration: 12s;
        }
        
        .animated-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.05;
        }
        
        .bg-shape-1 {
            position: absolute;
            width: 200px;
            height: 200px;
            background: var(--secondary);
            border-radius: 50%;
            top: 10%;
            left: 10%;
            animation: float 15s ease-in-out infinite;
        }
        
        .bg-shape-2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background: var(--accent);
            border-radius: 50%;
            bottom: 20%;
            right: 15%;
            animation: float 12s ease-in-out infinite reverse;
        }
        
        .bg-shape-3 {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--success);
            border-radius: 50%;
            top: 60%;
            left: 5%;
            animation: float 18s ease-in-out infinite;
        }
        
    

        /* ================= REQUESTED FIX: KEEP TEXT COLOUR + VIDEO ENHANCEMENT + MOBILE VIEW ================= */
        /* Keeps normal website text colours instead of converting headings/logo to gradient text */
        .logo h1,
        .section-title h2 {
            background: none !important;
            -webkit-background-clip: initial !important;
            background-clip: initial !important;
            color: var(--primary) !important;
        }
        .hero h2,
        .hero p,
        .cinema-title h2,
        .cinema-title p,
        .video-info-front,
        .video-info-front h3,
        .video-info-front p,
        .booking-section .section-title,
        footer,
        footer p,
        footer a { color: inherit; }

        /* Video section enhanced without changing normal page text colours */
        .cinema-video-section {
            padding: 130px 18px !important;
            background:
                radial-gradient(circle at 18% 12%, rgba(255,122,0,.28), transparent 30%),
                radial-gradient(circle at 80% 22%, rgba(0,168,107,.25), transparent 33%),
                linear-gradient(135deg, #071510 0%, #0d261c 52%, #050806 100%) !important;
        }
        .cinema-video-section::after {
            content: '';
            position: absolute;
            inset: 18px;
            border-radius: 34px;
            border: 1px solid rgba(255,255,255,.09);
            pointer-events: none;
            z-index: 1;
            animation: videoFrameGlow 3.6s ease-in-out infinite;
        }
        .cinema-title h2 {
            color: #ffffff !important;
            text-shadow: 0 0 24px rgba(255,122,0,.22);
        }
        .video-grid-ultra { align-items: stretch; }
        .video-flip-card { min-height: 480px; border-radius: 32px; }
        .flip-card-inner {
            transform: translateZ(0);
            border: 1px solid rgba(255,255,255,.16);
        }
        .video-frame-wrap {
            height: 290px;
            border-bottom: 1px solid rgba(255,255,255,.1);
        }
        .video-frame-wrap::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 65%);
            transform: translateX(-120%);
            animation: videoShine 4.5s ease-in-out infinite;
            z-index: 2;
            pointer-events: none;
        }
        .video-play-float span { animation: playPulse 1.8s infinite, playRotate 5s linear infinite; }
        .video-info-front { min-height: 185px; }
        .watch-btn { position: relative; overflow: hidden; }
        .watch-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
            transform: translateX(-120%);
            animation: btnLightMove 2.8s infinite;
        }

        /* Contact section: email only, no WhatsApp message sending */
        .contact-form form { position: relative; z-index: 2; }
        .form-message.error {
            display: block;
            margin-top: 18px;
            padding: 16px;
            border-radius: 14px;
            background: #fff1f1;
            color: #9f1239;
            border: 1px solid rgba(225,29,72,.24);
        }

        /* Strong mobile view settings */
        html, body { max-width: 100%; overflow-x: hidden; }
        img, iframe, video { max-width: 100%; }
        @media (max-width: 992px) {
            header { position: fixed !important; width: 100% !important; }
            body { padding-top: 0; }
            .mobile-toggle { display: block !important; }
            .nav-menu {
                position: fixed !important;
                left: -100%;
                top: 70px !important;
                width: 100% !important;
                height: calc(100dvh - 70px) !important;
                display: flex !important;
                flex-direction: column !important;
                transition: left .35s ease !important;
                z-index: 9999 !important;
            }
            .nav-menu.active { left: 0 !important; }
            .header-container { width: 100% !important; }
            .contact-container { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 768px) {
            body { font-size: 15px; }
            .container { width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; }
            .cinema-video-section { padding: 86px 12px !important; }
            .cinema-video-section::after { inset: 8px; border-radius: 22px; }
            .cinema-title h2 { font-size: clamp(1.9rem, 9vw, 2.6rem) !important; line-height: 1.12; }
            .cinema-title p { font-size: .95rem !important; }
            .video-grid-ultra { grid-template-columns: 1fr !important; gap: 22px !important; }
            .video-flip-card { min-height: auto !important; width: 100% !important; }
            .flip-card-inner { border-radius: 24px !important; }
            .video-frame-wrap { height: 56.25vw !important; min-height: 205px; max-height: 270px; }
            .video-frame-wrap iframe { pointer-events: auto !important; transform: none !important; }
            .video-flip-card:hover .flip-card-inner { transform: translateY(-6px) !important; }
            .video-info-front { padding: 20px 16px 22px !important; min-height: auto !important; }
            .video-info-front h3 { font-size: 1.18rem !important; }
            .video-info-front p { font-size: .9rem !important; }
            .video-play-float span { width: 62px !important; height: 62px !important; }
            .contact-section { padding-top: 66px !important; }
            .contact-item { width: 100%; }
            .contact-form .btn { min-height: 54px; }
        }
        @media (max-width: 420px) {
            .logo h1 { font-size: .95rem !important; }
            .logo span { font-size: .66rem !important; }
            .hero { padding-top: 110px !important; }
            .contact-icon { width: 48px !important; height: 48px !important; }
            .form-control { min-height: 54px; }
        }
        @keyframes videoFrameGlow { 0%,100% { box-shadow: 0 0 0 rgba(255,122,0,0); } 50% { box-shadow: 0 0 44px rgba(255,122,0,.13); } }
        @keyframes videoShine { 0%, 45% { transform: translateX(-120%); } 75%, 100% { transform: translateX(120%); } }
        @keyframes playRotate { to { transform: rotate(360deg); } }
        @keyframes btnLightMove { 0%, 40% { transform: translateX(-120%); } 75%, 100% { transform: translateX(120%); } }



        /* ================= FINAL THEME UPGRADE: LUXURY PAINT GALLERY STYLE ================= */
        :root {
            --primary: #071f2a;
            --secondary: #ff8a00;
            --accent: #00b894;
            --light: #fff7ec;
            --dark: #031118;
            --text: #12313f;
            --white: #ffffff;
            --gray: #60707a;
            --gradient: linear-gradient(135deg, #071f2a 0%, #007f73 48%, #ff8a00 100%);
            --gradient-secondary: linear-gradient(135deg, #ff8a00 0%, #ffd166 100%);
            --gradient-accent: linear-gradient(135deg, #00b894 0%, #071f2a 100%);
            --shadow: 0 18px 48px rgba(7, 31, 42, .16);
        }

        * { font-family: 'Poppins', sans-serif !important; }
        body {
            background:
                radial-gradient(circle at 12% 8%, rgba(255, 138, 0, .12), transparent 34%),
                radial-gradient(circle at 88% 22%, rgba(0, 184, 148, .12), transparent 30%),
                linear-gradient(180deg, #fffaf2 0%, #eefbf7 48%, #fff7ec 100%) !important;
            color: var(--text) !important;
        }

        h1, h2, h3, .section-title h2, .hero h1, .glow-text {
            font-family: 'Playfair Display', serif !important;
            letter-spacing: .2px;
        }

        .section-title h2, .hero h1 {
            background: linear-gradient(135deg, #071f2a, #007f73 55%, #ff8a00);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent !important;
        }

        p, li, .section-title p, .product-card p, .service-card p, .testimonial-card p {
            color: #385260 !important;
        }

        header, .navbar, nav {
            backdrop-filter: blur(18px);
            background: rgba(255, 255, 255, .86) !important;
            border-bottom: 1px solid rgba(0, 127, 115, .12);
        }

        .btn, .watch-btn, .video-cta-premium a {
            background: linear-gradient(135deg, #ff8a00, #ffb703) !important;
            color: #071f2a !important;
            border-radius: 999px !important;
            box-shadow: 0 16px 34px rgba(255, 138, 0, .28) !important;
        }

        .btn:hover, .watch-btn:hover, .video-cta-premium a:hover {
            transform: translateY(-4px) scale(1.02) !important;
            box-shadow: 0 22px 46px rgba(255, 138, 0, .38) !important;
        }

        .service-card, .product-card, .colour-card, .testimonial-card, .gallery-item, .about-stat, .contact-item, .contact-form, .booking-form, .store-item {
            background: rgba(255,255,255,.84) !important;
            border: 1px solid rgba(0, 127, 115, .14) !important;
            border-radius: 26px !important;
            box-shadow: 0 18px 48px rgba(7, 31, 42, .11) !important;
            backdrop-filter: blur(12px);
        }

        /* ================= VIDEO SECTION: PREMIUM CINEMATIC ENHANCEMENT ================= */
        .cinema-video-section {
            isolation: isolate;
            background:
                radial-gradient(circle at 15% 15%, rgba(255, 183, 3, .24), transparent 28%),
                radial-gradient(circle at 86% 18%, rgba(0, 184, 148, .30), transparent 31%),
                radial-gradient(circle at 50% 100%, rgba(255, 138, 0, .18), transparent 35%),
                linear-gradient(135deg, #020b12 0%, #05202b 42%, #06372f 100%) !important;
        }

        .cinema-video-section::before {
            opacity: .32 !important;
            background-size: 36px 36px !important;
        }

        .cinema-title .badge {
            background: rgba(255, 138, 0, .16) !important;
            color: #ffd166 !important;
            border: 1px solid rgba(255, 209, 102, .40) !important;
            box-shadow: 0 0 30px rgba(255, 138, 0, .18);
        }

        .cinema-title h2, .cinema-title .glow-text {
            color: #ffffff !important;
            text-shadow: 0 0 28px rgba(255, 209, 102, .28);
        }
        .cinema-title h2 span { color: #ffd166 !important; }
        .cinema-title p { color: #d7f7ef !important; }

        .video-grid-ultra {
            gap: 34px !important;
        }

        .video-flip-card {
            min-height: 510px !important;
            border-radius: 34px !important;
            background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05)) !important;
            border: 1px solid rgba(255,255,255,.22) !important;
            box-shadow: 0 28px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.22) !important;
            backdrop-filter: blur(20px);
        }

        .video-flip-card::before {
            background: linear-gradient(120deg, transparent, rgba(255, 209, 102, .42), transparent) !important;
        }

        .video-frame-wrap {
            height: 275px !important;
            border-radius: 28px 28px 8px 8px !important;
            border: 1px solid rgba(255, 209, 102, .24) !important;
            box-shadow: 0 18px 48px rgba(0,0,0,.30) !important;
        }

        .video-frame-wrap iframe {
            filter: saturate(1.18) contrast(1.06) brightness(.95);
        }

        .video-play-float span {
            background: linear-gradient(135deg, #ff8a00, #ffd166) !important;
            color: #071f2a !important;
            box-shadow: 0 0 0 12px rgba(255, 138, 0, .18), 0 16px 42px rgba(255, 138, 0, .38) !important;
        }

        .video-info-front {
            background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,251,247,.92)) !important;
            border-radius: 0 0 30px 30px !important;
            padding: 26px 24px 28px !important;
        }

        .video-info-front h3 {
            color: #071f2a !important;
            font-size: 1.48rem !important;
        }

        .video-info-front p {
            color: #385260 !important;
            font-size: .98rem !important;
        }

        .video-info-front .meta span {
            background: rgba(0, 184, 148, .10) !important;
            color: #00695f !important;
            border: 1px solid rgba(0, 184, 148, .18) !important;
            border-radius: 999px;
        }

        .video-cta-premium p { color: #d7f7ef !important; }

        @media (max-width: 768px) {
            .video-flip-card { min-height: auto !important; }
            .video-frame-wrap { height: 220px !important; }
            .cinema-title h2 { font-size: 2.25rem !important; }
        }

    

/* ================= GANAPATHI PREMIUM 2026 THEME OVERRIDE ================= */
:root {
    --primary: #0F172A;
    --secondary: #FF6B00;
    --accent: #FBBF24;
    --light: #F8FAFC;
    --dark: #020617;
    --text: #1E293B;
    --white: #ffffff;
    --gray: #64748B;
    --success: #22C55E;
    --warning: #F59E0B;
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
    --gradient: linear-gradient(135deg, #0F172A 0%, #1E3A8A 45%, #FF6B00 100%);
    --gradient-secondary: linear-gradient(135deg, #FF6B00 0%, #FBBF24 100%);
    --gradient-accent: linear-gradient(135deg, #FBBF24 0%, #FF6B00 100%);
}

html { scroll-behavior: smooth; }

* { font-family: 'Poppins', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

body {
    color: var(--text) !important;
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 107, 0, 0.08), transparent 28%),
        radial-gradient(circle at 92% 20%, rgba(251, 191, 36, 0.12), transparent 30%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 38%, #FFF7ED 100%) !important;
}

h1, h2, h3, h4, h5, h6,
.section-title h2,
.hero h2,
.cinema-title h2 {
    letter-spacing: -0.035em;
    font-weight: 800 !important;
}

p, li, span { color: inherit; }

header, nav, .navbar, .top-header {
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.18) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

nav a, header a, .navbar a {
    color: #F8FAFC !important;
    font-weight: 650 !important;
}

nav a:hover, header a:hover, .navbar a:hover {
    color: var(--accent) !important;
}

.hero {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 58, 138, 0.70)),
        radial-gradient(circle at 20% 20%, rgba(255, 107, 0, 0.42), transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.32), transparent 28%) !important;
    color: #FFFFFF !important;
}

.hero h1, .hero h2 {
    color: #FFFFFF !important;
    text-shadow: 0 14px 35px rgba(0,0,0,0.35);
}

.hero h1 span, .hero h2 span,
.highlight, .accent-text {
    background: linear-gradient(90deg, #FBBF24, #FF6B00, #FFFFFF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.hero p {
    color: #E2E8F0 !important;
    font-weight: 500;
}

.btn, button, input[type='submit'] {
    background: var(--gradient-secondary) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 18px 38px rgba(255, 107, 0, 0.28) !important;
}

.btn:hover, button:hover, input[type='submit']:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 24px 55px rgba(255, 107, 0, 0.38) !important;
}

.btn-outline {
    background: rgba(255,255,255,0.08) !important;
    border: 2px solid rgba(251, 191, 36, 0.85) !important;
    color: #FBBF24 !important;
}

.section-title h2 {
    color: var(--primary) !important;
    background: linear-gradient(90deg, #0F172A 0%, #1E3A8A 50%, #FF6B00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.section-title p,
.card p,
.service-card p,
.product-card p {
    color: #475569 !important;
}

.card, .service-card, .product-card, .feature-card, .testimonial-card {
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: blur(12px);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}

.card:hover, .service-card:hover, .product-card:hover, .feature-card:hover, .testimonial-card:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(255, 107, 0, 0.28) !important;
    box-shadow: 0 30px 70px rgba(255, 107, 0, 0.16) !important;
}

/* Premium cinematic video area */
.cinema-video-section {
    padding: 130px 24px !important;
    background:
        radial-gradient(circle at 10% 18%, rgba(255, 107, 0, 0.34), transparent 33%),
        radial-gradient(circle at 88% 15%, rgba(251, 191, 36, 0.28), transparent 31%),
        radial-gradient(circle at 50% 92%, rgba(30, 58, 138, 0.34), transparent 35%),
        linear-gradient(135deg, #020617 0%, #0F172A 44%, #111827 100%) !important;
}

.cinema-title .badge {
    background: rgba(251, 191, 36, 0.14) !important;
    color: #FDE68A !important;
    border: 1px solid rgba(251, 191, 36, 0.42) !important;
    box-shadow: 0 0 35px rgba(251, 191, 36, 0.18) !important;
}

.cinema-title h2 {
    background: linear-gradient(90deg, #FFFFFF 0%, #FDE68A 34%, #FF6B00 62%, #FFFFFF 100%) !important;
    background-size: 240% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.cinema-title p {
    color: #CBD5E1 !important;
    font-size: clamp(1rem, 1.7vw, 1.16rem) !important;
}

.video-flip-card::before {
    background: conic-gradient(from var(--angle, 0deg), transparent, rgba(251,191,36,.95), rgba(255,107,0,.95), rgba(30,58,138,.70), transparent 42%) !important;
}

.flip-card-inner {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.94)) !important;
    border: 1px solid rgba(251, 191, 36, 0.18) !important;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48) !important;
}

.video-flip-card:hover .flip-card-inner {
    box-shadow: 0 38px 88px rgba(255, 107, 0, 0.24), 0 0 0 1px rgba(251,191,36,.18) inset !important;
}

.video-play-float span {
    background: linear-gradient(135deg, #FF6B00, #FBBF24) !important;
    box-shadow: 0 0 0 14px rgba(255,107,0,0.13), 0 22px 48px rgba(0,0,0,0.38) !important;
}

.video-info-front h3 {
    color: #FFFFFF !important;
    font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
}

.video-info-front p,
.video-info-front .meta,
.video-cta-premium p {
    color: #CBD5E1 !important;
}

.video-info-front .meta span {
    background: rgba(251, 191, 36, 0.12) !important;
    color: #FDE68A !important;
    border: 1px solid rgba(251, 191, 36, 0.22) !important;
}

.video-cta-premium {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(251, 191, 36, 0.16) !important;
    border-radius: 28px !important;
    padding: 32px !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
}

footer, .footer {
    background: linear-gradient(135deg, #020617, #0F172A) !important;
    color: #E2E8F0 !important;
}

footer h3, footer h4, .footer h3, .footer h4 { color: #FFFFFF !important; }
footer a:hover, .footer a:hover { color: #FBBF24 !important; }

@media (max-width: 768px) {
    .section-title h2 { font-size: 2.1rem !important; }
    .cinema-video-section { padding: 90px 16px !important; }
    .video-cta-premium { padding: 24px 18px !important; }
}

    

/* ================= FINAL READABILITY + BOOKING SERVICE ENHANCEMENT ================= */
:root{
    --ge-navy:#0f172a;
    --ge-blue:#1e3a8a;
    --ge-orange:#ff6b00;
    --ge-gold:#fbbf24;
    --ge-green:#16a34a;
    --ge-text:#1e293b;
    --ge-muted:#475569;
    --ge-light:#f8fafc;
}

body,
section,
.card,
.product-card,
.service-card,
.colour-card,
.gallery-item,
.contact-card,
.update-card,
.testimonial-card{
    color:var(--ge-text) !important;
}

p, li, span, label, input, textarea, select{
    color:var(--ge-text) !important;
}

h1,h2,h3,h4,h5,h6,
.section-title,
.section-title h2,
.logo h1{
    color:var(--ge-navy) !important;
    text-shadow:none !important;
}

.hero h1,.hero h2,.hero h3,.hero p,
.cinema-video-section h1,.cinema-video-section h2,.cinema-video-section h3,.cinema-video-section p,
footer h1, footer h2, footer h3, footer h4, footer p, footer a,
.video-info-front, .video-info-front h3, .video-info-front p{
    color:#ffffff !important;
}

.nav-menu a,
header a{
    color:var(--ge-navy) !important;
    font-weight:700 !important;
}

.nav-menu a:hover,
.nav-menu a.active{
    color:var(--ge-orange) !important;
}

.booking-section{
    padding:110px 18px !important;
    background:
        radial-gradient(circle at 15% 10%, rgba(255,107,0,.35), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(251,191,36,.28), transparent 28%),
        linear-gradient(135deg,#07111f 0%,#10233d 48%,#06101c 100%) !important;
}

.booking-container{
    max-width:1180px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(255,255,255,.8) !important;
    border-radius:34px !important;
    padding:52px !important;
    box-shadow:0 30px 90px rgba(2,6,23,.35), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.booking-section .section-title{
    color:var(--ge-navy) !important;
    font-size:clamp(2rem,4vw,3.2rem) !important;
    margin-bottom:14px !important;
    letter-spacing:-.04em;
}

.booking-subtitle{
    text-align:center;
    max-width:760px;
    margin:0 auto 42px;
    color:var(--ge-muted) !important;
    font-size:1.05rem;
    line-height:1.7;
}

.booking-steps{
    background:#f1f5f9;
    padding:22px 18px;
    border-radius:24px;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);
}

.booking-steps::before{
    background:linear-gradient(90deg,var(--ge-orange),var(--ge-gold),var(--ge-green)) !important;
    opacity:.35;
}

.step-item p{
    color:var(--ge-navy) !important;
    font-weight:800;
    margin-top:10px;
}

.step-item span{
    background:#ffffff !important;
    color:var(--ge-navy) !important;
    border:2px solid #e2e8f0;
    box-shadow:0 10px 24px rgba(15,23,42,.10);
}

.step-item.active span,
.step-item.completed span{
    color:#ffffff !important;
    border-color:transparent !important;
}

.booking-form{
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:28px;
    padding:34px;
    box-shadow:0 16px 45px rgba(15,23,42,.08);
}

.booking-form h3{
    color:var(--ge-navy) !important;
    font-size:1.55rem;
    margin-bottom:24px;
}

.service-grid{
    grid-template-columns:repeat(auto-fit,minmax(235px,1fr)) !important;
    gap:22px !important;
}

.service-option{
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
    border:1px solid #e2e8f0 !important;
    border-radius:26px !important;
    padding:34px 24px !important;
    box-shadow:0 14px 32px rgba(15,23,42,.08) !important;
}

.service-option i{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 18px;
    border-radius:20px;
    background:linear-gradient(135deg,var(--ge-orange),var(--ge-gold));
    color:#ffffff !important;
    font-size:1.65rem;
    box-shadow:0 14px 26px rgba(255,107,0,.24);
}

.service-option h4{
    color:var(--ge-navy) !important;
    font-size:1.17rem;
    font-weight:900;
    margin-bottom:10px;
}

.service-option p{
    color:var(--ge-muted) !important;
    font-weight:600;
    line-height:1.55;
}

.service-option:hover{
    border-color:var(--ge-orange) !important;
    box-shadow:0 22px 46px rgba(255,107,0,.18) !important;
}

.service-option.selected{
    background:linear-gradient(135deg,#fff7ed,#fffbeb) !important;
    border-color:var(--ge-orange) !important;
    box-shadow:0 20px 48px rgba(255,107,0,.24) !important;
}

.booking-form input,
.booking-form select,
.booking-form textarea{
    background:#ffffff !important;
    color:var(--ge-navy) !important;
    border:1.8px solid #cbd5e1 !important;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
}

.booking-form input::placeholder,
.booking-form textarea::placeholder{
    color:#64748b !important;
}

.booking-form select option{
    background:#ffffff !important;
    color:var(--ge-navy) !important;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{
    border-color:var(--ge-orange) !important;
    box-shadow:0 0 0 4px rgba(255,107,0,.16) !important;
}

.booking-btn{
    background:linear-gradient(135deg,var(--ge-orange),#f97316) !important;
    color:#ffffff !important;
    box-shadow:0 14px 28px rgba(255,107,0,.28) !important;
}

.booking-btn.secondary{
    background:linear-gradient(135deg,#334155,#0f172a) !important;
}

.booking-summary,
.booking-summary p,
.booking-summary span,
.booking-summary strong,
.booking-success,
.booking-success h2,
.booking-success h3,
.booking-success p{
    color:var(--ge-navy) !important;
}

@media(max-width:768px){
    .booking-container{padding:28px 16px !important;border-radius:24px !important;}
    .booking-form{padding:24px 16px !important;}
    .booking-steps{gap:10px;overflow-x:auto;}
    .step-item span{width:48px;height:48px;}
}

    

/* ================= FINAL TEXT VISIBILITY FIX - ALL SECTIONS ================= */
html, body { background:#f8fafc !important; color:#1e293b !important; }
body * { text-shadow: none; }

/* Disable hidden reveal issue so content always shows */
.ge-reveal, .ge-reveal.ge-visible, section, .container, .section-title,
.service-card, .product-card, .colour-card, .testimonial-card, .gallery-item,
.contact-item, .contact-form, .booking-form, .video-flip-card {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Light section text */
section:not(.hero):not(.cinema-video-section):not(.booking-section),
section:not(.hero):not(.cinema-video-section):not(.booking-section) h1,
section:not(.hero):not(.cinema-video-section):not(.booking-section) h2,
section:not(.hero):not(.cinema-video-section):not(.booking-section) h3,
section:not(.hero):not(.cinema-video-section):not(.booking-section) h4,
section:not(.hero):not(.cinema-video-section):not(.booking-section) p,
section:not(.hero):not(.cinema-video-section):not(.booking-section) li,
section:not(.hero):not(.cinema-video-section):not(.booking-section) span {
    color:#1e293b !important;
    -webkit-text-fill-color: currentColor !important;
}
section:not(.hero):not(.cinema-video-section):not(.booking-section) .section-title p,
.service-card p, .product-card p, .colour-card p, .testimonial-card p, .about p, .contact p {
    color:#475569 !important;
    -webkit-text-fill-color:#475569 !important;
}

/* Stop invisible gradient/transparent headings */
.section-title h2, .logo h1, .about h2, .services h2, .products h2, .gallery h2, .contact h2 {
    background:none !important;
    background-image:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    color:#0f172a !important;
    -webkit-text-fill-color:#0f172a !important;
}

/* Header */
header, #header { background:rgba(15,23,42,.96) !important; }
.logo h1, header .logo h1 { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; }
.logo span, header .logo span { color:#fbbf24 !important; -webkit-text-fill-color:#fbbf24 !important; }
.nav-menu a, header a { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; }
.nav-menu a:hover, .nav-menu a.active { color:#fbbf24 !important; -webkit-text-fill-color:#fbbf24 !important; }
.mobile-toggle i { color:#ffffff !important; }

/* Dark sections text */
.hero, .cinema-video-section, footer, .footer {
    color:#ffffff !important;
}
.hero h1, .hero h2, .hero h3, .hero p, .hero span,
.cinema-video-section h1, .cinema-video-section h2, .cinema-video-section h3, .cinema-video-section h4, .cinema-video-section p, .cinema-video-section span,
footer h1, footer h2, footer h3, footer h4, footer p, footer a, footer li {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}
.hero p, .cinema-title p, .video-info-front p, footer p, footer li { color:#e2e8f0 !important; -webkit-text-fill-color:#e2e8f0 !important; }

/* Video cards */
.video-info-front h3 { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; }
.video-info-front p { color:#cbd5e1 !important; -webkit-text-fill-color:#cbd5e1 !important; }

/* Book Service section - premium and readable */
.booking-section {
    padding:110px 18px !important;
    background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 52%,#111827 100%) !important;
}
.booking-container {
    background:#ffffff !important;
    color:#1e293b !important;
    border-radius:34px !important;
    padding:52px !important;
    box-shadow:0 30px 90px rgba(0,0,0,.30) !important;
}
.booking-section .section-title,
.booking-section .section-title h2,
.booking-section h1, .booking-section h2, .booking-section h3, .booking-section h4,
.booking-section p, .booking-section span, .booking-section label, .booking-section li {
    color:#0f172a !important;
    -webkit-text-fill-color:#0f172a !important;
    background:none !important;
}
.booking-section .section-title p, .booking-subtitle { color:#475569 !important; -webkit-text-fill-color:#475569 !important; }
.booking-steps { background:#f1f5f9 !important; border-radius:24px !important; padding:22px !important; }
.step-item p { color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; font-weight:800 !important; }
.step-item span { background:#ffffff !important; color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; border:2px solid #e2e8f0 !important; }
.step-item.active span, .step-item.completed span { background:#ff6b00 !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; }
.booking-form { background:#ffffff !important; border:1px solid #e2e8f0 !important; border-radius:28px !important; padding:34px !important; }
.booking-form h3 { color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; }
.service-option { background:#ffffff !important; border:1px solid #e2e8f0 !important; color:#1e293b !important; }
.service-option h4 { color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; }
.service-option p { color:#475569 !important; -webkit-text-fill-color:#475569 !important; }
.booking-form input, .booking-form select, .booking-form textarea {
    background:#ffffff !important;
    color:#0f172a !important;
    -webkit-text-fill-color:#0f172a !important;
    border:2px solid #cbd5e1 !important;
}
.booking-form input::placeholder, .booking-form textarea::placeholder { color:#64748b !important; -webkit-text-fill-color:#64748b !important; }
.booking-form select option { background:#ffffff !important; color:#0f172a !important; }
.booking-btn { background:linear-gradient(135deg,#ff6b00,#fbbf24) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; }

@media(max-width:768px){
    .booking-container{padding:26px 14px !important;}
    .booking-form{padding:22px 14px !important;}
}



/* FINAL BOOK SERVICE WHATSAPP FORM FIX */
.booking-section, .booking-section * { color: #102033 !important; }
.booking-section { background: linear-gradient(135deg, #fff7ed 0%, #eef7ff 50%, #ffffff 100%) !important; }
.booking-container { max-width: 980px !important; margin: 0 auto !important; padding: 40px 16px !important; }
.booking-form { background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.10) !important; box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14) !important; border-radius: 26px !important; }
.booking-form h3 { color: #0f172a !important; margin-top: 18px !important; }
.booking-subtitle { color: #334155 !important; font-weight: 600 !important; }
.booking-form input, .booking-form select, .booking-form textarea { background: #ffffff !important; color: #0f172a !important; border: 2px solid #cbd5e1 !important; border-radius: 14px !important; font-weight: 600 !important; }
.booking-form input::placeholder, .booking-form textarea::placeholder { color: #64748b !important; opacity: 1 !important; }
.booking-form select option { color: #0f172a !important; background: #ffffff !important; }
.booking-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.booking-summary { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-left: 5px solid #ff6b00 !important; border-radius: 18px !important; padding: 16px !important; margin: 18px 0 !important; }
.booking-summary p, .booking-summary strong { color: #0f172a !important; }
.booking-btn { background: linear-gradient(135deg, #ff6b00, #fbbf24) !important; color: #06111f !important; font-weight: 900 !important; letter-spacing: .2px !important; border: none !important; }
@media (max-width: 768px) { .booking-two-col { grid-template-columns: 1fr; } .booking-container { padding: 28px 12px !important; } .booking-form { padding: 22px 14px !important; } }



/* ================= BOOKING ENHANCED FINAL + TESTIMONIAL TEXT FIX ================= */
.booking-section{
  background:linear-gradient(135deg,#0f172a 0%,#12372a 45%,#ff7a00 130%) !important;
  padding:110px 16px !important;
}
.booking-premium-card{
  max-width:1180px !important;
  background:#ffffff !important;
  border-radius:36px !important;
  padding:44px !important;
  box-shadow:0 35px 95px rgba(2,6,23,.35) !important;
  border:1px solid rgba(255,255,255,.85) !important;
}
.booking-header{text-align:center;margin-bottom:28px;}
.booking-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff7ed !important;color:#c2410c !important;-webkit-text-fill-color:#c2410c !important;
  border:1px solid #fed7aa;border-radius:999px;padding:10px 18px;font-weight:900;margin-bottom:14px;
}
.booking-section .section-title{
  color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;
  font-size:clamp(2rem,4vw,3.4rem) !important;font-weight:1000 !important;margin:0 0 10px !important;
}
.booking-subtitle,.booking-subtitle strong{color:#334155 !important;-webkit-text-fill-color:#334155 !important;font-weight:800 !important;}
.booking-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0;}
.booking-benefits div{background:linear-gradient(180deg,#f8fafc,#ffffff);border:1px solid #e2e8f0;border-radius:20px;padding:18px 12px;text-align:center;box-shadow:0 12px 25px rgba(15,23,42,.07);}
.booking-benefits i{color:#ff6b00 !important;-webkit-text-fill-color:#ff6b00 !important;font-size:1.35rem;margin-bottom:8px;display:block;}
.booking-benefits span{color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;font-weight:900 !important;}
.booking-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr);gap:26px;align-items:start;}
.booking-form,.booking-side-panel{background:#ffffff !important;border:1px solid #e2e8f0 !important;border-radius:28px !important;padding:30px !important;box-shadow:0 20px 50px rgba(15,23,42,.10) !important;}
.booking-form h3,.booking-side-panel h3{color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;font-weight:1000 !important;font-size:1.35rem !important;margin:16px 0 18px !important;display:flex;gap:10px;align-items:center;}
.booking-form h3 i,.booking-side-panel h3 i{color:#ff6b00 !important;-webkit-text-fill-color:#ff6b00 !important;}
.booking-two-col{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important;}
.booking-form input,.booking-form select,.booking-form textarea{
  width:100% !important;background:#f8fafc !important;color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;
  border:2px solid #cbd5e1 !important;border-radius:16px !important;padding:15px 16px !important;margin-bottom:14px !important;
  font-size:16px !important;font-weight:800 !important;outline:none !important;box-shadow:none !important;
}
.booking-form input::placeholder,.booking-form textarea::placeholder{color:#64748b !important;-webkit-text-fill-color:#64748b !important;opacity:1 !important;}
.booking-form select option{background:#ffffff !important;color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;}
.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{border-color:#ff6b00 !important;background:#ffffff !important;box-shadow:0 0 0 4px rgba(255,107,0,.15) !important;}
.booking-btn{width:100% !important;margin-top:10px !important;background:linear-gradient(135deg,#16a34a,#22c55e) !important;color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;border:none !important;border-radius:18px !important;padding:17px 22px !important;font-size:1rem !important;font-weight:1000 !important;box-shadow:0 18px 35px rgba(22,163,74,.25) !important;}
.booking-btn:hover{transform:translateY(-2px);box-shadow:0 25px 45px rgba(22,163,74,.32) !important;}
.booking-side-panel{position:sticky;top:100px;background:linear-gradient(180deg,#fff7ed,#ffffff) !important;}
.side-note{color:#475569 !important;-webkit-text-fill-color:#475569 !important;font-weight:700 !important;line-height:1.6;}
.booking-summary{background:#ffffff !important;border:1px solid #fed7aa !important;border-left:6px solid #ff6b00 !important;border-radius:18px !important;padding:18px !important;margin:20px 0 !important;}
.booking-summary p,.booking-summary strong{color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;font-weight:800 !important;}
.booking-info-list p{color:#1e293b !important;-webkit-text-fill-color:#1e293b !important;font-weight:800 !important;display:flex;gap:10px;align-items:flex-start;margin:12px 0;}
.booking-info-list i{color:#16a34a !important;-webkit-text-fill-color:#16a34a !important;margin-top:3px;}
.testimonials,.testimonials *{color:#1e293b !important;-webkit-text-fill-color:#1e293b !important;opacity:1 !important;visibility:visible !important;}
.testimonials .section-title h2,.testimonials h2{color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;background:none !important;text-shadow:none !important;font-weight:1000 !important;}
.testimonials .section-title p,.testimonials p{color:#475569 !important;-webkit-text-fill-color:#475569 !important;}
.testimonial-card{background:#ffffff !important;border:1px solid #e2e8f0 !important;box-shadow:0 16px 40px rgba(15,23,42,.08) !important;}
@media(max-width:900px){.booking-layout{grid-template-columns:1fr !important}.booking-side-panel{position:static}.booking-benefits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.booking-premium-card{padding:24px 14px !important;border-radius:26px !important}.booking-form,.booking-side-panel{padding:20px 14px !important}.booking-two-col{grid-template-columns:1fr !important}.booking-benefits{grid-template-columns:1fr}.booking-section{padding:80px 10px !important}}



/* Premium booking section final enhancement */
.premium-visit-section{background:linear-gradient(135deg,#fff7ed 0%,#f8fafc 45%,#e8fff5 100%) !important;position:relative;overflow:hidden;}
.premium-visit-section *{color:#0f172a !important;-webkit-text-fill-color:initial !important;}
.premium-booking-header .section-title,.testimonials .section-title,.testimonial-section .section-title,#testimonials .section-title{color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;text-shadow:none !important;}
.premium-booking-header .booking-subtitle{color:#334155 !important;-webkit-text-fill-color:#334155 !important;font-weight:700 !important;max-width:900px;margin:0 auto;}
.premium-booking-form,.premium-booking-side-panel{background:#ffffff !important;border:1px solid rgba(255,122,0,.25) !important;box-shadow:0 25px 80px rgba(15,23,42,.12) !important;}
.booking-step-title{display:flex;align-items:center;gap:12px;margin:26px 0 14px;}
.booking-step-title span{background:linear-gradient(135deg,#ff7a00,#fbbf24) !important;color:#fff !important;-webkit-text-fill-color:#fff !important;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:900;box-shadow:0 10px 25px rgba(255,122,0,.35);}
.booking-step-title h3{margin:0 !important;color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;font-weight:900 !important;font-size:1.15rem !important;}
.booking-form input,.booking-form select,.booking-form textarea{background:#fff !important;color:#111827 !important;-webkit-text-fill-color:#111827 !important;border:2px solid #e2e8f0 !important;border-radius:16px !important;font-weight:700 !important;}
.booking-form input::placeholder,.booking-form textarea::placeholder{color:#64748b !important;-webkit-text-fill-color:#64748b !important;opacity:1 !important;}
.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{border-color:#ff7a00 !important;box-shadow:0 0 0 4px rgba(255,122,0,.14) !important;outline:none !important;}
.service-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 18px;}
.service-checkbox-grid label{background:#f8fafc !important;color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;border:1px solid #e2e8f0;border-radius:14px;padding:13px 14px;font-weight:800;display:flex;align-items:center;gap:10px;cursor:pointer;transition:.25s ease;}
.service-checkbox-grid label:hover{background:#fff7ed !important;border-color:#ff7a00;transform:translateY(-2px);}
.service-checkbox-grid input{width:18px;height:18px;accent-color:#ff7a00;}
.upload-note{font-size:.88rem;color:#475569 !important;-webkit-text-fill-color:#475569 !important;font-weight:700;margin:8px 0 0;}
.booking-action-row{display:grid;grid-template-columns:1.2fr .9fr;gap:14px;margin-top:20px;}
.booking-btn{background:linear-gradient(135deg,#16a34a,#22c55e) !important;color:#fff !important;-webkit-text-fill-color:#fff !important;border:none !important;}
.callback-btn{background:linear-gradient(135deg,#0f172a,#334155) !important;}
.premium-info-list p,.premium-info-list i,.booking-summary p,.booking-summary strong,.side-note{color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;opacity:1 !important;visibility:visible !important;}
.testimonials h2,.testimonials h3,.testimonials p,.testimonial-card,.testimonial-card *{color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;opacity:1 !important;visibility:visible !important;}
@media(max-width:768px){.service-checkbox-grid{grid-template-columns:1fr}.booking-action-row{grid-template-columns:1fr}.booking-step-title h3{font-size:1rem !important}.premium-booking-header .section-title{font-size:2rem !important}.premium-visit-section{padding-left:10px !important;padding-right:10px !important}}




/* ========== FINAL MOBILE VIEW FIX ========== */
html, body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
*, *::before, *::after{ box-sizing:border-box !important; }
img, video, iframe{ max-width:100% !important; height:auto; }
.container, .video-container-premium, .booking-container{
  width:min(100% - 28px, 1200px) !important;
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
section, .hero, .cinema-video-section{ overflow:hidden !important; }
/* make all hidden animation items visible on phones */
.ge-reveal, section, .service-card, .product-card, .colour-card, .testimonial-card,
.gallery-item, .contact-item, .contact-form, .booking-form, .video-flip-card{
  opacity:1 !important;
  visibility:visible !important;
}
/* readable text everywhere */
section h1, section h2, section h3, section h4{ opacity:1 !important; visibility:visible !important; }
.product-card p, .service-card p, .colour-card p, .gallery-item p, .contact-item p,
.booking-container p, .about p, .hero p{ opacity:1 !important; visibility:visible !important; }
/* video cards fixed */
.cinema-video-section{
  background:linear-gradient(135deg,#071022 0%,#0f172a 55%,#1e293b 100%) !important;
}
.cinema-video-section .section-title h2,
.cinema-video-section .section-title p,
.cinema-video-section .cinema-title h2,
.cinema-video-section .cinema-title p{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
}
.video-grid-ultra{ align-items:stretch !important; }
.video-flip-card{ width:100% !important; perspective:none !important; }
.video-flip-card .flip-card-inner{
  transform:none !important;
  background:#0f172a !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
.video-flip-card:hover .flip-card-inner{ transform:none !important; }
.video-frame-wrap{ width:100% !important; overflow:hidden !important; background:#000 !important; }
.video-frame-wrap iframe{ width:100% !important; height:100% !important; display:block !important; transform:none !important; }
.video-info-front{
  background:#0f172a !important;
  padding:24px 20px !important;
  min-height:auto !important;
}
.video-info-front h3{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
}
.video-info-front p{
  color:#dbeafe !important;
  -webkit-text-fill-color:#dbeafe !important;
  opacity:1 !important;
}
.video-info-front .meta span{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:rgba(255,122,0,.22) !important;
}
.video-play-float span{ font-size:0 !important; color:#fff !important; background:#ff7a00 !important; }
.video-play-float span::before{ content:'▶'; font-size:30px; margin-left:4px; color:#fff !important; }
.watch-btn, .video-cta-premium a{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  background:linear-gradient(135deg,#ffb000,#ff7a00) !important;
  font-weight:900 !important;
}
@media (max-width: 992px){
  header{
    position:sticky !important;
    top:0 !important;
    width:100% !important;
    z-index:10000 !important;
    background:#0f172a !important;
  }
  .header-container{
    width:100% !important;
    max-width:100% !important;
    padding:10px 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }
  .logo{ min-width:0 !important; flex:1 1 auto !important; display:flex !important; align-items:center !important; gap:10px !important; }
  .logo-icon{ width:46px !important; height:46px !important; flex:0 0 46px !important; }
  .logo-icon img{ width:100% !important; height:100% !important; object-fit:contain !important; }
  .logo-text{ min-width:0 !important; }
  .logo h1{
    font-size:clamp(1rem, 4.6vw, 1.35rem) !important;
    line-height:1.08 !important;
    white-space:normal !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }
  .logo span{
    display:block !important;
    font-size:clamp(.72rem, 3.4vw, .9rem) !important;
    line-height:1.1 !important;
    color:#fbbf24 !important;
    -webkit-text-fill-color:#fbbf24 !important;
  }
  .mobile-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    color:#fff !important;
    background:rgba(255,255,255,.12) !important;
    border-radius:12px !important;
    cursor:pointer !important;
    z-index:10002 !important;
  }
  .mobile-toggle i{ color:#fff !important; -webkit-text-fill-color:#fff !important; font-size:20px !important; }
  .nav-menu{
    position:fixed !important;
    left:-105% !important;
    top:66px !important;
    width:100% !important;
    height:calc(100dvh - 66px) !important;
    background:#0f172a !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    padding:18px 16px 32px !important;
    gap:8px !important;
    overflow-y:auto !important;
    transition:left .25s ease !important;
    z-index:10001 !important;
    box-shadow:0 20px 50px rgba(0,0,0,.35) !important;
  }
  .nav-menu.active{ left:0 !important; }
  .nav-menu li{ width:100% !important; list-style:none !important; }
  .nav-menu a{
    display:block !important;
    width:100% !important;
    padding:14px 16px !important;
    text-align:center !important;
    border-radius:14px !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:rgba(255,255,255,.08) !important;
  }
  .nav-menu a.active, .nav-menu a:hover{
    color:#fbbf24 !important;
    -webkit-text-fill-color:#fbbf24 !important;
    background:rgba(255,122,0,.18) !important;
  }
}
@media (max-width: 768px){
  body{ font-size:15px !important; }
  section{ padding:62px 0 !important; }
  .hero{ min-height:auto !important; padding:84px 0 58px !important; text-align:center !important; }
  .hero h2{ font-size:clamp(2rem, 9vw, 2.8rem) !important; line-height:1.08 !important; }
  .hero p{ font-size:1rem !important; }
  .hero-btns{ flex-direction:column !important; align-items:center !important; gap:12px !important; }
  .hero-btns .btn, .btn-lg{ width:100% !important; max-width:320px !important; justify-content:center !important; }
  .section-title{ margin-bottom:30px !important; }
  .section-title h2{ font-size:clamp(1.75rem, 7.2vw, 2.25rem) !important; line-height:1.15 !important; }
  .section-title p{ font-size:.98rem !important; }
  .video-grid-ultra, .services-grid, .testimonials-grid, .gallery-grid, .updates-grid, .service-grid,
  .about-content, .contact-container, .locator-container{ grid-template-columns:1fr !important; gap:22px !important; }
  .cinema-video-section{ padding:72px 0 !important; }
  .video-frame-wrap{ height:56.25vw !important; min-height:195px !important; max-height:260px !important; }
  .video-info-front h3{ font-size:1.22rem !important; }
  .video-info-front p{ font-size:.94rem !important; }
  .video-info-front .meta{ gap:8px !important; flex-wrap:wrap !important; }
  .video-info-front .meta span{ font-size:.78rem !important; padding:8px 10px !important; }
  .product-card, .colour-card, .service-card, .testimonial-card, .gallery-item{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
  }
  .booking-container{ padding:22px 14px !important; border-radius:20px !important; }
  .booking-steps{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  input, select, textarea{ font-size:16px !important; }
}
@media (max-width: 420px){
  .header-container{ padding:8px 10px !important; }
  .logo-icon{ width:40px !important; height:40px !important; flex-basis:40px !important; }
  .nav-menu{ top:60px !important; height:calc(100dvh - 60px) !important; }
  .video-frame-wrap{ min-height:180px !important; }
}

/* ================= BOOKING SECTION ENHANCED V2 ================= */
.booking-v2{
  position:relative !important;
  background:
    radial-gradient(circle at top left, rgba(255,107,0,.20), transparent 34%),
    radial-gradient(circle at bottom right, rgba(251,191,36,.22), transparent 34%),
    linear-gradient(135deg,#f8fafc 0%,#fff7ed 50%,#eef2ff 100%) !important;
  padding:90px 16px !important;
  overflow:hidden !important;
}
.booking-v2::before{
  content:""; position:absolute; inset:18px; border:1px solid rgba(15,23,42,.08); border-radius:34px; pointer-events:none;
}
.booking-v2-shell{max-width:1200px !important; margin:0 auto !important; background:rgba(255,255,255,.92) !important; border:1px solid rgba(15,23,42,.08) !important; box-shadow:0 28px 80px rgba(15,23,42,.14) !important; border-radius:34px !important; padding:32px !important; color:#0f172a !important;}
.booking-v2-hero{display:grid; grid-template-columns:1.55fr .85fr; gap:26px; align-items:stretch; margin-bottom:26px;}
.booking-v2-hero-text{background:linear-gradient(135deg,#0f172a 0%,#1e293b 58%,#7c2d12 100%) !important; color:#fff !important; border-radius:30px; padding:34px; position:relative; overflow:hidden;}
.booking-v2-hero-text::after{content:""; position:absolute; width:220px; height:220px; border-radius:50%; right:-60px; top:-70px; background:rgba(251,191,36,.24);}
.booking-v2-badge{display:inline-flex !important; align-items:center; gap:9px; color:#fff !important; background:rgba(255,255,255,.14) !important; border:1px solid rgba(255,255,255,.22) !important; padding:10px 15px !important; border-radius:999px !important; font-weight:800 !important;}
.booking-v2-title{color:#fff !important; font-size:clamp(2rem,4vw,3.4rem) !important; line-height:1.05 !important; margin:18px 0 14px !important; text-shadow:0 8px 24px rgba(0,0,0,.22) !important;}
.booking-v2-subtitle{color:#e2e8f0 !important; font-size:1.05rem !important; max-width:760px !important; margin:0 !important;}
.booking-v2-subtitle strong{color:#fbbf24 !important;}
.booking-v2-trust-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;}
.booking-v2-trust-row span{display:inline-flex; align-items:center; gap:8px; color:#fff !important; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:10px 12px; font-weight:700; font-size:.9rem;}
.booking-v2-trust-row i{color:#fbbf24 !important;}
.booking-v2-quick-card{background:linear-gradient(180deg,#ffffff,#fff7ed) !important; border:1px solid rgba(255,107,0,.18) !important; border-radius:30px; padding:28px; box-shadow:0 18px 45px rgba(255,107,0,.12); display:flex; flex-direction:column; justify-content:center; color:#0f172a !important;}
.booking-v2-quick-card .quick-card-icon{width:68px; height:68px; border-radius:22px; display:grid; place-items:center; background:#22c55e; color:#fff; font-size:2.3rem; box-shadow:0 14px 30px rgba(34,197,94,.32); margin-bottom:18px;}
.booking-v2-quick-card h3{color:#0f172a !important; font-size:1.45rem !important; margin:0 0 10px !important;}
.booking-v2-quick-card p{color:#475569 !important; margin:0 0 18px !important; line-height:1.7 !important;}
.booking-v2-quick-card a{color:#fff !important; background:linear-gradient(135deg,#16a34a,#22c55e) !important; text-decoration:none !important; border-radius:16px; padding:13px 16px; text-align:center; font-weight:900;}
.booking-v2-benefits{display:grid !important; grid-template-columns:repeat(5,1fr) !important; gap:12px !important; margin-bottom:22px !important;}
.booking-v2-benefits div{background:#fff !important; border:1px solid rgba(15,23,42,.08) !important; color:#0f172a !important; border-radius:18px !important; padding:16px 12px !important; box-shadow:0 10px 28px rgba(15,23,42,.06) !important;}
.booking-v2-benefits i{color:#ff6b00 !important; font-size:1.2rem !important;}
.booking-v2-progress{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:18px 0 24px;}
.booking-v2-progress span{background:#fff; color:#334155; border:1px solid #e2e8f0; border-radius:999px; padding:10px 12px; text-align:center; font-weight:900; font-size:.85rem; box-shadow:0 8px 18px rgba(15,23,42,.05);}
.booking-v2-progress span.active{background:linear-gradient(135deg,#ff6b00,#fbbf24); color:#111827; border-color:transparent;}
.booking-v2-layout{display:grid !important; grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr) !important; gap:26px !important; align-items:start !important;}
.booking-v2-form{background:transparent !important; box-shadow:none !important; border:none !important; padding:0 !important;}
.booking-step-card{background:#fff !important; border:1px solid rgba(15,23,42,.08) !important; border-radius:24px !important; padding:22px !important; margin-bottom:18px !important; box-shadow:0 16px 40px rgba(15,23,42,.07) !important;}
.booking-step-title{margin-bottom:16px !important;}
.booking-step-title span{background:linear-gradient(135deg,#0f172a,#ff6b00) !important; color:#fff !important; box-shadow:0 10px 20px rgba(255,107,0,.22) !important;}
.booking-step-title h3{color:#0f172a !important; font-weight:900 !important;}
.booking-v2 input,.booking-v2 select,.booking-v2 textarea{background:#f8fafc !important; color:#0f172a !important; border:1px solid #cbd5e1 !important; border-radius:16px !important; min-height:52px !important; padding:14px 15px !important; font-weight:700 !important; outline:none !important; width:100% !important;}
.booking-v2 textarea{min-height:auto !important; line-height:1.6 !important;}
.booking-v2 input::placeholder,.booking-v2 textarea::placeholder{color:#64748b !important; opacity:1 !important;}
.booking-v2 input:focus,.booking-v2 select:focus,.booking-v2 textarea:focus{background:#fff !important; border-color:#ff6b00 !important; box-shadow:0 0 0 4px rgba(255,107,0,.14) !important;}
.booking-v2-service-grid{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important;}
.booking-v2-service-grid label{background:#f8fafc !important; border:1px solid #e2e8f0 !important; border-radius:16px !important; padding:12px !important; color:#0f172a !important; font-weight:800 !important; display:flex !important; gap:10px !important; align-items:center !important; cursor:pointer !important; transition:.25s ease !important;}
.booking-v2-service-grid label:hover{border-color:#ff6b00 !important; transform:translateY(-2px); background:#fff7ed !important;}
.booking-v2-service-grid input{width:18px !important; min-height:18px !important; accent-color:#ff6b00 !important;}
.booking-v2-service-grid span{display:flex; align-items:center; gap:9px; color:#0f172a !important;}
.booking-v2-service-grid i{color:#ff6b00 !important; width:18px;}
.upload-note{color:#64748b !important; font-weight:700 !important; margin-top:10px !important;}
.booking-v2-actions{display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; position:sticky; bottom:12px; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); padding:12px; border:1px solid rgba(15,23,42,.08); border-radius:22px; z-index:5;}
.booking-v2-actions .booking-btn{width:100% !important; min-height:56px !important; border-radius:16px !important; font-size:1rem !important; font-weight:950 !important; color:#fff !important; background:linear-gradient(135deg,#16a34a,#22c55e) !important; border:none !important; box-shadow:0 14px 28px rgba(34,197,94,.22) !important;}
.booking-v2-actions .callback-btn{background:linear-gradient(135deg,#0f172a,#334155) !important; box-shadow:0 14px 28px rgba(15,23,42,.18) !important;}
.booking-v2-side{background:transparent !important; box-shadow:none !important; border:none !important; padding:0 !important;}
.booking-sticky-card{position:sticky; top:90px; background:linear-gradient(180deg,#0f172a,#1e293b) !important; color:#fff !important; border-radius:28px; padding:24px; box-shadow:0 24px 65px rgba(15,23,42,.24); border:1px solid rgba(255,255,255,.10);}
.booking-sticky-card h3{color:#fff !important; font-size:1.5rem !important; margin-bottom:8px !important;}
.booking-sticky-card .side-note{color:#cbd5e1 !important;}
.booking-v2-preview{background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:20px !important; padding:16px !important; margin:16px 0 !important;}
.booking-v2-preview p{color:#e2e8f0 !important; margin:10px 0 !important; font-size:.95rem !important;}
.booking-v2-preview strong{color:#fbbf24 !important;}
.booking-v2-preview span{color:#fff !important; font-weight:800 !important;}
.booking-call-box{display:flex; gap:12px; align-items:center; background:linear-gradient(135deg,#ff6b00,#fbbf24); color:#111827 !important; border-radius:18px; padding:14px; margin:16px 0;}
.booking-call-box i{font-size:1.5rem;}
.booking-call-box a{display:block; color:#111827 !important; font-weight:950; text-decoration:none !important;}
.booking-sticky-card .premium-info-list p{color:#e2e8f0 !important; font-size:.92rem !important; border-bottom:1px solid rgba(255,255,255,.08); padding:8px 0; margin:0 !important;}
.booking-sticky-card .premium-info-list i{color:#22c55e !important;}
@media (max-width: 980px){
  .booking-v2-hero,.booking-v2-layout{grid-template-columns:1fr !important;}
  .booking-v2-benefits{grid-template-columns:repeat(2,1fr) !important;}
  .booking-v2-progress{grid-template-columns:repeat(2,1fr);}
  .booking-sticky-card{position:static;}
}
@media (max-width: 640px){
  .booking-v2{padding:55px 10px !important;}
  .booking-v2::before{display:none;}
  .booking-v2-shell{padding:14px !important; border-radius:24px !important;}
  .booking-v2-hero-text,.booking-v2-quick-card,.booking-step-card,.booking-sticky-card{border-radius:22px !important; padding:20px !important;}
  .booking-v2-benefits{grid-template-columns:1fr !important;}
  .booking-v2-progress{grid-template-columns:1fr !important;}
  .booking-v2-service-grid,.booking-two-col,.booking-v2-actions{grid-template-columns:1fr !important;}
  .booking-v2-title{font-size:2rem !important;}
}


/* ===== BOOKING SECTION NEW DESIGN - NO UPLOAD PHOTOS ===== */
.booking-v3-no-upload{
  background: radial-gradient(circle at top left, rgba(255,107,0,.14), transparent 32%),
              radial-gradient(circle at bottom right, rgba(15,23,42,.14), transparent 35%),
              linear-gradient(135deg,#fff7ed 0%,#f8fafc 45%,#ffffff 100%) !important;
  padding: 90px 18px !important;
}
.booking-v3-no-upload .booking-v2-shell{
  max-width: 1220px !important;
  margin: auto !important;
  border: 1px solid rgba(255,107,0,.18) !important;
  border-radius: 34px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 30px 90px rgba(15,23,42,.16) !important;
  overflow: hidden !important;
  position: relative !important;
}
.booking-v3-no-upload .booking-v2-shell:before{
  content:""; position:absolute; inset:0 0 auto 0; height:8px;
  background: linear-gradient(90deg,#0f172a,#ff6b00,#fbbf24,#22c55e);
}
.booking-v3-no-upload .booking-v2-hero{
  background: linear-gradient(135deg,#0f172a 0%,#1e293b 55%,#ff6b00 160%) !important;
  color: #fff !important;
  padding: 44px !important;
  border-radius: 0 0 30px 30px !important;
}
.booking-v3-no-upload .booking-v2-title,
.booking-v3-no-upload .booking-v2-subtitle,
.booking-v3-no-upload .booking-v2-hero-text strong,
.booking-v3-no-upload .booking-v2-trust-row span{
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
}
.booking-v3-no-upload .booking-v2-title{font-size:clamp(2rem,4vw,3.6rem)!important;line-height:1.05!important;margin:12px 0!important;}
.booking-v3-no-upload .booking-v2-subtitle{font-size:1.08rem!important;max-width:760px!important;opacity:.96!important;}
.booking-v3-no-upload .booking-v2-badge{
  background: rgba(255,255,255,.14) !important; color:#fff !important; border:1px solid rgba(255,255,255,.28) !important;
}
.booking-v3-no-upload .booking-v2-quick-card{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.22) !important;
}
.booking-v3-no-upload .booking-v2-quick-card h3,
.booking-v3-no-upload .booking-v2-quick-card p,
.booking-v3-no-upload .booking-v2-quick-card a{color:#fff!important;-webkit-text-fill-color:#fff!important;}
.booking-v3-no-upload .booking-v2-benefits{padding:26px 36px!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:15px!important;background:#fff!important;}
.booking-v3-no-upload .booking-v2-benefits div{
  background:linear-gradient(180deg,#fff,#fff7ed)!important;border:1px solid #fed7aa!important;border-radius:18px!important;padding:17px 12px!important;box-shadow:0 10px 30px rgba(15,23,42,.08)!important;color:#0f172a!important;
}
.booking-v3-no-upload .booking-v2-benefits i{color:#ff6b00!important;font-size:1.35rem!important;}
.booking-v3-no-upload .booking-v2-progress{padding:0 36px 24px!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:10px!important;}
.booking-v3-no-upload .booking-v2-progress span{
  color:#0f172a!important;-webkit-text-fill-color:#0f172a!important;background:#f1f5f9!important;border:1px solid #e2e8f0!important;border-radius:999px!important;padding:12px 10px!important;text-align:center!important;font-weight:800!important;
}
.booking-v3-no-upload .booking-v2-progress span.active{background:linear-gradient(135deg,#ff6b00,#fbbf24)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;}
.booking-v3-no-upload .booking-v2-layout{display:grid!important;grid-template-columns:1.45fr .75fr!important;gap:28px!important;padding:0 36px 42px!important;align-items:start!important;}
.booking-v3-no-upload .booking-step-card{
  background:#ffffff!important;border:1px solid #e2e8f0!important;border-radius:24px!important;padding:25px!important;margin-bottom:22px!important;box-shadow:0 18px 45px rgba(15,23,42,.08)!important;position:relative!important;overflow:hidden!important;
}
.booking-v3-no-upload .booking-step-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(#ff6b00,#fbbf24);}
.booking-v3-no-upload .booking-step-title h3,
.booking-v3-no-upload .booking-step-title i{color:#0f172a!important;-webkit-text-fill-color:#0f172a!important;}
.booking-v3-no-upload .booking-step-title span{background:#0f172a!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 8px 20px rgba(15,23,42,.25)!important;}
.booking-v3-no-upload input,
.booking-v3-no-upload select,
.booking-v3-no-upload textarea{
  background:#f8fafc!important;color:#0f172a!important;-webkit-text-fill-color:#0f172a!important;border:1.5px solid #cbd5e1!important;border-radius:15px!important;font-weight:700!important;box-shadow:none!important;
}
.booking-v3-no-upload input::placeholder,
.booking-v3-no-upload textarea::placeholder{color:#64748b!important;-webkit-text-fill-color:#64748b!important;}
.booking-v3-no-upload input:focus,
.booking-v3-no-upload select:focus,
.booking-v3-no-upload textarea:focus{border-color:#ff6b00!important;background:#fff!important;box-shadow:0 0 0 4px rgba(255,107,0,.14)!important;outline:none!important;}
.booking-v3-no-upload .booking-v2-service-grid label{
  background:#fff!important;border:1.5px solid #e2e8f0!important;border-radius:18px!important;color:#0f172a!important;box-shadow:0 10px 28px rgba(15,23,42,.06)!important;transition:.25s!important;
}
.booking-v3-no-upload .booking-v2-service-grid label:hover{transform:translateY(-4px)!important;border-color:#ff6b00!important;box-shadow:0 18px 36px rgba(255,107,0,.14)!important;}
.booking-v3-no-upload .booking-v2-service-grid span,
.booking-v3-no-upload .booking-v2-service-grid i{color:#0f172a!important;-webkit-text-fill-color:#0f172a!important;}
.booking-v3-no-upload .booking-v2-service-grid input:checked + span{color:#ff6b00!important;-webkit-text-fill-color:#ff6b00!important;}
.booking-v3-no-upload .booking-v2-actions{display:flex!important;gap:15px!important;flex-wrap:wrap!important;}
.booking-v3-no-upload .booking-btn{border-radius:18px!important;padding:16px 24px!important;font-weight:900!important;background:linear-gradient(135deg,#22c55e,#16a34a)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 18px 35px rgba(22,163,74,.26)!important;border:0!important;}
.booking-v3-no-upload .callback-btn{background:linear-gradient(135deg,#0f172a,#334155)!important;box-shadow:0 18px 35px rgba(15,23,42,.25)!important;}
.booking-v3-no-upload .booking-sticky-card{background:#0f172a!important;border-radius:26px!important;padding:25px!important;box-shadow:0 25px 60px rgba(15,23,42,.25)!important;position:sticky!important;top:96px!important;}
.booking-v3-no-upload .booking-sticky-card h3,
.booking-v3-no-upload .booking-sticky-card p,
.booking-v3-no-upload .booking-sticky-card span,
.booking-v3-no-upload .booking-sticky-card strong,
.booking-v3-no-upload .booking-sticky-card a{color:#fff!important;-webkit-text-fill-color:#fff!important;}
.booking-v3-no-upload .booking-v2-preview{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:18px!important;padding:16px!important;}
.booking-v3-no-upload .booking-info-list p{background:rgba(255,255,255,.08)!important;border-radius:12px!important;padding:10px!important;margin:8px 0!important;}
.booking-v3-no-upload .booking-info-list i{color:#fbbf24!important;}
@media(max-width:900px){
 .booking-v3-no-upload{padding:55px 10px!important;}
 .booking-v3-no-upload .booking-v2-hero{padding:30px 18px!important;}
 .booking-v3-no-upload .booking-v2-benefits{grid-template-columns:1fr 1fr!important;padding:20px!important;}
 .booking-v3-no-upload .booking-v2-progress{grid-template-columns:1fr!important;padding:0 20px 20px!important;}
 .booking-v3-no-upload .booking-v2-layout{grid-template-columns:1fr!important;padding:0 16px 28px!important;}
 .booking-v3-no-upload .booking-two-col{grid-template-columns:1fr!important;}
 .booking-v3-no-upload .booking-sticky-card{position:relative!important;top:0!important;}
}


/* ===== FIXED BOOKING STEP-WISE TABS ===== */
.booking-v3-no-upload .booking-v2-progress{
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:14px!important;
    padding:0 0 24px!important;
    margin:20px 0!important;
}
.booking-v3-no-upload .booking-v2-progress .booking-tab{
    border:1px solid #e2e8f0!important;
    background:#f8fafc!important;
    color:#0f172a!important;
    -webkit-text-fill-color:#0f172a!important;
    border-radius:999px!important;
    padding:17px 14px!important;
    font-size:1rem!important;
    font-weight:900!important;
    box-shadow:0 10px 28px rgba(15,23,42,.06)!important;
    cursor:pointer!important;
    min-height:60px!important;
}
.booking-v3-no-upload .booking-v2-progress .booking-tab.active,
.booking-v3-no-upload .booking-v2-progress .booking-tab.completed{
    background:linear-gradient(135deg,#ff6b00,#fbbf24)!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    border-color:transparent!important;
    box-shadow:0 18px 35px rgba(255,107,0,.25)!important;
}
.booking-v3-no-upload .booking-step-card{
    display:none!important;
}
.booking-v3-no-upload .booking-step-card.active{
    display:block!important;
}
.booking-step-nav{
    display:flex!important;
    justify-content:space-between!important;
    gap:14px!important;
    margin-top:18px!important;
}
.booking-step-btn{
    border:none!important;
    border-radius:999px!important;
    padding:14px 26px!important;
    font-weight:900!important;
    cursor:pointer!important;
}
.booking-step-btn.back{background:#e2e8f0!important;color:#0f172a!important;}
.booking-step-btn.next{background:linear-gradient(135deg,#ff6b00,#fbbf24)!important;color:#fff!important;}
.booking-step-btn:disabled{opacity:.45!important;cursor:not-allowed!important;}
@media(max-width:768px){
    .booking-v3-no-upload .booking-v2-progress{grid-template-columns:1fr!important;gap:10px!important;}
    .booking-v3-no-upload .booking-v2-progress .booking-tab{min-height:52px!important;padding:14px!important;}
}

/* ================= ICON FIX: SERVICE + SOCIAL MEDIA ICONS =================
   The earlier global font rule used !important and forced all <i> icons to Poppins,
   so Font Awesome showed empty square boxes. This final override restores icon fonts.
========================================================================== */
.fa, .fas, .far, .fa-solid, .fa-regular,
.fa::before, .fas::before, .far::before, .fa-solid::before, .fa-regular::before {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
.fa, .fas, .fa-solid,
.fa::before, .fas::before, .fa-solid::before {
    font-weight: 900 !important;
}
.far, .fa-regular,
.far::before, .fa-regular::before {
    font-weight: 400 !important;
}
.fab, .fa-brands,
.fab::before, .fa-brands::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: 400 !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
.service-icon i,
.contact-social-link i,
.social-links i,
.contact-icon i,
.quick-card-icon i,
.booking-step-title i,
.booking-v2-service-grid i,
.service-features i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: inherit;
    color: inherit;
    -webkit-text-fill-color: currentColor !important;
}
.service-icon {
    color: #ffffff !important;
}
.contact-social-link i,
.social-links i {
    font-size: 1.2rem !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ================= FINAL ICON FIX: SOCIAL + SERVICE ICONS ================= */
.contact-social-link span,
.social-links a span{
    display:none !important;
}
.contact-social-link,
.social-links a{
    overflow:hidden !important;
    text-indent:0 !important;
    flex:0 0 54px !important;
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    font-size:0 !important;
}
.contact-social-link i,
.social-links a i{
    font-size:24px !important;
    width:24px !important;
    height:24px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-family:"Font Awesome 6 Free","Font Awesome 6 Brands" !important;
    color:inherit !important;
    -webkit-text-fill-color:currentColor !important;
    text-indent:0 !important;
}
.contact-social-link i::before,
.social-links a i::before{
    display:inline-block !important;
    font-size:24px !important;
}
.contact-social-link[aria-label="Facebook"] i::before,
.social-links a[aria-label="Facebook"] i::before{content:"f" !important;font-family:Arial, sans-serif !important;font-weight:900 !important;}
.contact-social-link[aria-label="Instagram"] i::before,
.social-links a[aria-label="Instagram"] i::before{content:"◎" !important;font-family:Arial, sans-serif !important;font-weight:900 !important;}
.contact-social-link[aria-label="Email"] i::before,
.social-links a[aria-label="Email"] i::before{content:"✉" !important;font-family:Arial, sans-serif !important;font-weight:900 !important;}
.contact-social-link[aria-label="WhatsApp"] i::before,
.social-links a[aria-label="WhatsApp"] i::before{content:"☎" !important;font-family:Arial, sans-serif !important;font-weight:900 !important;}
.service-icon i::before,
.quick-card-icon i::before,
.contact-icon i::before,
.booking-step-title i::before{
    font-family:"Font Awesome 6 Free", Arial, sans-serif !important;
    font-weight:900 !important;
}


/* FINAL FIXES - header, customer text, social icons, booking success */
header .header-container{
    justify-content:flex-start !important;
    gap:28px !important;
}
header .logo{
    margin-left:0 !important;
    padding-left:0 !important;
    flex:0 0 auto !important;
    max-width:520px !important;
    overflow:visible !important;
}
header .logo-text{
    text-align:left !important;
    overflow:visible !important;
}
header .logo h1{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:none !important;
    font-size:2rem !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
}
header .logo span{
    color:#fbbf24 !important;
    -webkit-text-fill-color:#fbbf24 !important;
    text-align:left !important;
}
.nav-menu{margin-left:auto !important;}
.testimonials .section-title h2,
.testimonials h2,
#testimonials h2{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:none !important;
    opacity:1 !important;
    text-shadow:0 3px 18px rgba(0,0,0,.45) !important;
}
.testimonials .section-title p,
.testimonials p{
    color:#e2e8f0 !important;
    -webkit-text-fill-color:#e2e8f0 !important;
    opacity:1 !important;
}
.contact-social-link span,
.social-links a span{
    display:none !important;
}
.contact-social-link,
.social-links a{
    overflow:hidden !important;
    justify-content:center !important;
    align-items:center !important;
    text-indent:0 !important;
}
.contact-social-link i,
.social-links a i{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:100% !important;
    font-size:22px !important;
    color:inherit !important;
    font-family:"Font Awesome 6 Brands","Font Awesome 6 Free" !important;
    text-indent:0 !important;
    position:relative !important;
    z-index:3 !important;
}
.booking-success-message{
    margin-top:18px !important;
    padding:16px 18px !important;
    border-radius:16px !important;
    background:#dcfce7 !important;
    border:1px solid #22c55e !important;
    color:#166534 !important;
    -webkit-text-fill-color:#166534 !important;
    font-weight:900 !important;
    align-items:center !important;
    gap:10px !important;
    box-shadow:0 12px 30px rgba(34,197,94,.18) !important;
}
.booking-success-message i{color:#16a34a !important;-webkit-text-fill-color:#16a34a !important;}
@media(max-width:768px){
    header .logo h1{font-size:1rem !important;white-space:normal !important;}
    header .header-container{gap:10px !important;}
}


/* FINAL FIX: remove booking services step + header overflow */
.booking-v2-progress{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
#booking [data-booking-step="3"] .booking-step-title i.fa-calendar-check,
#booking [data-booking-step="4"] .booking-step-title i.fa-location-dot{
    color:inherit !important;
}
#booking .booking-summary p:has(#previewService){display:none !important;}

header .header-container{
    width:100% !important;
    max-width:1500px !important;
    padding-left:20px !important;
    padding-right:20px !important;
    justify-content:flex-start !important;
    gap:18px !important;
    overflow:visible !important;
}
header .logo{
    flex:0 1 470px !important;
    max-width:470px !important;
    min-width:360px !important;
    margin-left:0 !important;
}
header .logo h1{
    font-size:1.72rem !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
}
header .logo span{
    font-size:1rem !important;
    line-height:1.05 !important;
}
header .nav-menu{
    flex:1 1 auto !important;
    justify-content:flex-end !important;
    gap:18px !important;
    min-width:0 !important;
    margin-left:0 !important;
}
header .nav-menu a{
    font-size:.98rem !important;
    white-space:nowrap !important;
    padding:8px 0 !important;
}
@media(max-width:1200px){
    header .logo{min-width:300px !important;max-width:360px !important;}
    header .logo h1{font-size:1.25rem !important;}
    header .logo span{font-size:.86rem !important;}
    header .nav-menu{gap:12px !important;}
    header .nav-menu a{font-size:.9rem !important;}
}
@media(max-width:768px){
    .booking-v2-progress{grid-template-columns:1fr !important;}
    header .logo{min-width:0 !important;max-width:calc(100% - 56px) !important;}
    header .logo h1{font-size:1rem !important;white-space:normal !important;}
}

/* =========================================================
   FINAL MOBILE RESPONSIVE FIX - 05 JULY
   Fix: website was zoomed/big on mobile and horizontal scrolling.
   ========================================================= */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

img, video, iframe, canvas, svg {
  max-width: 100% !important;
}

@media (max-width: 992px) {
  header,
  .header-container,
  .container,
  section,
  .hero,
  .booking-v3-no-upload,
  .booking-v2-shell,
  .booking-container,
  .contact-section,
  .footer,
  .products-slider-container,
  .colour-slider-container,
  .gallery-section,
  .testimonials-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .container {
    width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  header {
    left: 0 !important;
    right: 0 !important;
  }

  .header-container {
    justify-content: space-between !important;
    padding: 8px 12px !important;
  }

  .logo {
    max-width: calc(100% - 56px) !important;
    overflow: hidden !important;
  }

  .logo h1 {
    font-size: clamp(1rem, 4.4vw, 1.35rem) !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  .logo span {
    font-size: clamp(.72rem, 3.2vw, .9rem) !important;
  }

  .nav-menu {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px !important;
  }

  section {
    padding: 55px 0 !important;
  }

  .hero {
    padding: 90px 14px 55px !important;
    min-height: auto !important;
    background-attachment: scroll !important;
  }

  .hero h1,
  .hero h2,
  .section-title h2,
  .booking-v2-title {
    font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }

  .hero p,
  .section-title p,
  p {
    font-size: 0.96rem !important;
    line-height: 1.55 !important;
  }

  .products-track,
  .colour-track,
  .slider-track,
  .updates-grid,
  .gallery-grid,
  .services-grid,
  .testimonials-grid,
  .contact-container,
  .about-content,
  .booking-v2-layout,
  .booking-v2-hero,
  .booking-two-col,
  .booking-v2-service-grid,
  .booking-v2-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    gap: 18px !important;
  }

  .product-card,
  .colour-card,
  .service-card,
  .testimonial-card,
  .gallery-item,
  .contact-form,
  .contact-info,
  .booking-step-card,
  .booking-sticky-card,
  .booking-v2-hero-text,
  .booking-v2-quick-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .booking-v3-no-upload {
    padding: 55px 10px !important;
  }

  .booking-v2-shell,
  .booking-container,
  .booking-form {
    padding: 16px 12px !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .booking-v2-progress,
  .booking-steps {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .booking-v2-progress button,
  .booking-steps button,
  .step-item {
    width: 100% !important;
    min-width: 0 !important;
    font-size: .82rem !important;
    padding: 10px 6px !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea,
  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  .btn,
  .btn-lg,
  button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .logo-icon {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  .logo h1 {
    font-size: 1rem !important;
  }

  .logo span {
    font-size: .72rem !important;
  }

  .booking-v2-progress,
  .booking-steps {
    grid-template-columns: 1fr !important;
  }
}