/* --- GLOBAL RESET & VARIABLES --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        .no-scroll { overflow: hidden; }
        :root {
            --deep-pink: #FF0066;
            --bright-pink: #FF3399;
            --hot-pink: #FF1493;
            --gold: #FFD700;
            --orange: #FF8C42;
            --cyan: #00F5FF;
            --dark-navy: #0A0E27;
            --white: #ffffff;
            --primary-pink: #F90082;
            --primary-green: #00FFAA;
            --primary-blue: #1E90FF;
        }

        body {
            font-family: 'Poppins', sans-serif;
            overflow-x: hidden;
            background: var(--dark-navy);
            color: var(--white);
            line-height: 1.6;
        }

        /* --- ANIMATED BACKGROUND --- */
        .animated-bg {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, #1a0a1f 0%, #00BFFF 20%, #00F5FF 35%, #4a0e4e 50%, #00BFFF 65%, #00F5FF 80%, #1a0a1f 100%);
            background-size: 200% 200%;
            animation: smoothGradient 20s ease-in-out infinite;
            z-index: -1;
        }
        @keyframes smoothGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        
        .animated-bg::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 20% 50%, rgba(0, 245, 255, 0.4) 0%, transparent 50%),
                         radial-gradient(circle at 80% 80%, rgba(0, 191, 255, 0.4) 0%, transparent 50%);
            animation: overlayMove 15s ease infinite;
        }
        @keyframes overlayMove { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.05); } }

        .particle {
            position: fixed; width: 3px; height: 3px; background: var(--bright-pink); border-radius: 50%;
            animation: float 20s infinite; opacity: 0.6; z-index: 1;
        }
        @keyframes float { 
            0%, 100% { transform: translateY(0) translateX(0); } 
            50% { transform: translateY(-200vh) translateX(-50px); } 
            100% { transform: translateY(-300vh) translateX(100px); } 
        }

        /* --- HEADER --- */
        header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(10, 14, 39, 0.95);
    backdrop-filter: blur(20px);
    padding: 0.8rem 3%; /* Padding adjust ki */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem; /* IMPORTANT: Ye Logo aur Menu ko takrane se rokega */
    z-index: 1000;
    box-shadow: 0 4px 30px rgba(255, 17, 104, 0.3);
    border-bottom: 2px solid rgba(255, 69, 161, 0.3);
}
        .logo {
            font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 800; color: var(--white); display: flex; align-items: center;
            gap: 0.6rem; text-shadow: 0 0 20px rgba(255, 17, 104, 0.8); text-decoration: none; white-space: nowrap;
        }
        .logo .truck-img {
            width: clamp(40px, 4.5vw, 55px); height: auto; animation: truckBounce 2s ease-in-out infinite;
            filter: drop-shadow(0 0 15px rgba(255, 0, 102, 0.8));
        }
        @keyframes truckBounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-5deg); } }

        .nav-menu { 
    display: flex; 
    gap: 1rem; /* Gap 2rem se kam karke 1rem kar diya */
    align-items: center; 
}
        .nav-menu a { color: var(--white); text-decoration: none; font-weight: 600; transition: all 0.3s; position: relative; white-space: nowrap; }
        .nav-menu a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--deep-pink), var(--bright-pink)); transition: width 0.3s; }
        .nav-menu a:hover::after { width: 100%; }
        
        .call-buttons { display: flex; gap: 0.5rem; align-items: center; }
        .call-btn {
            background: linear-gradient(135deg, var(--deep-pink), var(--bright-pink)); color: var(--white);
            padding: 0.6rem 1.2rem; border-radius: 50px; font-weight: 700; text-decoration: none;
            display: flex; align-items: center; gap: 0.5rem; transition: all 0.3s;
            box-shadow: 0 5px 20px rgba(255, 17, 104, 0.4); font-size: 0.9rem;
        }
        .call-btn:hover { transform: scale(1.05); box-shadow: 0 8px 30px rgba(255, 17, 104, 0.6); }
        .btn-quote-nav { display: none; }
        
        .menu-toggle { display: none; flex-direction: column; cursor: pointer; gap: 5px; z-index: 1002; }
        .menu-toggle span { width: 30px; height: 3px; background: var(--bright-pink); border-radius: 3px; transition: all 0.3s; }

        /* --- HERO SECTION --- */
        .hero {
            text-align: center; padding: 10rem 5% 5rem; position: relative; z-index: 1; overflow: hidden;
            min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
        }
        .hero h1 {
            font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; color: var(--primary-pink); margin-bottom: 1rem;
            animation: glow 2s ease-in-out infinite alternate; line-height: 1.2;
            text-shadow: 0 0 30px rgba(249, 0, 130, 0.8);
        }
        @keyframes glow { from { filter: drop-shadow(0 0 10px rgba(249, 0, 130, 0.5)); } to { filter: drop-shadow(0 0 30px rgba(249, 0, 130, 0.8)); } }
        .hero h2 { font-size: clamp(1rem, 2.5vw, 1.5rem); color: var(--white); margin-bottom: 3rem; font-family: 'Inter', sans-serif; font-weight: 500; }
        
        .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; max-width: 850px; margin: 0 auto; }
        .hero-buttons .btn-primary {
            /* Final Desktop/Tablet size */
            padding: 0.8rem 1.5rem; border-radius: 50px; font-weight: 700; font-size: 0.9rem; text-decoration: none;
            transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
            min-width: 200px; background: linear-gradient(135deg, var(--deep-pink), #D60070); color: #fff;
            box-shadow: 0 10px 30px rgba(249, 0, 130, 0.5); animation: pulseGlow 2s infinite;
        }
        .hero-buttons .btn-quote {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important; /* Force Yellow */
    color: #000 !important;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5) !important;
    animation: pulseYellow 2s infinite;
}
        .hero-buttons .btn-primary:hover { transform: translateY(-5px) scale(1.05); }

        /* --- GALLERY GRID --- */
        .gallery-grid {
            padding: 3rem 5%; max-width: 1400px; margin: 0 auto; display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; position: relative; z-index: 1;
        }
        .gallery-item {
            position: relative; border-radius: 20px; overflow: hidden; background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(10px); border: 2px solid transparent; cursor: pointer;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); animation: fadeInUp_gallery 0.6s ease-out backwards;
        }
        @keyframes fadeInUp_gallery { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        .gallery-item::before {
            content: ''; position: absolute; inset: -2px; border-radius: 20px;
            background: linear-gradient(45deg, var(--deep-pink), var(--primary-green)); z-index: -1; opacity: 0; transition: opacity 0.3s;
        }
        .gallery-item:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 60px rgba(249, 0, 130, 0.5); }
        .gallery-item:hover::before { opacity: 1; }
        .gallery-img {
            width: 100%; height: 300px; background-size: cover; background-position: center; background-repeat: no-repeat;
            display: flex; align-items: center; justify-content: center; transition: all 0.5s;
        }
        .gallery-item:hover .gallery-img { transform: scale(1.1); }

        /* --- MODAL --- */
        .modal {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95);
            z-index: 2000; align-items: center; justify-content: center; padding: 2rem;
        }
        .modal.active { display: flex; }
        .modal-content {
            max-width: 900px; width: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(20px);
            border-radius: 20px; padding: 0.5rem; border: 2px solid rgba(249, 0, 130, 0.3); position: relative;
        }
        .modal-close {
            position: absolute; top: 1rem; right: 1rem; font-size: 2rem; color: #fff; cursor: pointer;
            width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
            background: rgba(249, 0, 130, 0.3); border-radius: 50%; transition: all 0.3s; z-index: 2001;
        }
        .modal-close:hover { background: var(--deep-pink); transform: rotate(90deg); }
        .modal-image {
            width: 100%; height: 80vh; background-size: contain; background-position: center;
            background-repeat: no-repeat; border-radius: 15px;
        }
        .modal-nav { display: flex; justify-content: space-between; padding: 1rem 0 0.5rem; }
        .modal-nav-btn {
            background: rgba(255, 255, 255, 0.1); border: 1px solid var(--deep-pink); color: #fff;
            padding: 0.5rem 1rem; border-radius: 50px; cursor: pointer; transition: background 0.3s;
        }
        .modal-nav-btn:hover { background: var(--deep-pink); }

        /* --- SECTIONS GENERAL --- */
        .section-title {
            font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; color: var(--primary-pink); margin-bottom: 3rem;
            animation: glow 2s ease-in-out infinite alternate; text-align: center;
        }
        .stats-section, .video-section, .testimonials-section, .cta-section {
            padding: 5rem 5%; text-align: center; background: rgba(0,0,0,0.5);
            backdrop-filter: blur(10px); position: relative; z-index: 1;
        }

        /* --- STATS --- */
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 1200px; margin: 3rem auto 0; }
        .stat-card {
            padding: 3rem 2rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px);
            border-radius: 20px; position: relative; overflow: hidden; transition: all 0.3s;
        }
        .stat-card::before {
            content: ''; position: absolute; inset: -2px; background: linear-gradient(45deg, var(--deep-pink), var(--primary-green));
            border-radius: 20px; z-index: -1; opacity: 0; transition: opacity 0.3s;
        }
        .stat-card:hover { transform: translateY(-10px); } .stat-card:hover::before { opacity: 1; }
        .stat-icon {
            font-size: 3rem; margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--deep-pink), var(--primary-green));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .stat-number { font-size: 3rem; font-weight: 800; color: var(--deep-pink); margin-bottom: 0.5rem; }

        /* --- VIDEOS --- */
        .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
        .video-item {
            position: relative; height: 250px; border-radius: 20px; display: flex; align-items: center;
            justify-content: center; cursor: pointer; overflow: hidden; border: 2px solid rgba(249, 0, 130, 0.3);
            transition: all 0.3s; background-size: cover; background-position: center;
        }
        .play-btn {
            width: 80px; height: 80px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);
            border: 2px solid var(--deep-pink); border-radius: 50%; display: flex; align-items: center;
            justify-content: center; font-size: 2rem; color: #fff; animation: pulse 2s infinite; transition: all 0.3s ease;
        }
        .video-item:hover .play-btn { transform: scale(1.1); background: rgba(249, 0, 130, 0.7); }
        @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 0, 130, 0.7); } 50% { box-shadow: 0 0 0 20px rgba(249, 0, 130, 0); } }

        /* --- TESTIMONIALS --- */
        .testimonials-container { max-width: 1200px; margin: 3rem auto 0; overflow: hidden; }
        .testimonials-slider { display: flex; gap: 2rem; animation: scroll 20s linear infinite; }
        @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .testimonial-card { min-width: 350px; padding: 2rem; background: rgba(0, 0, 0, 0.6); border-radius: 20px; border: 2px solid rgba(249, 0, 130, 0.3); }
        .testimonial-avatar {
            width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--deep-pink), var(--primary-green));
            margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 2rem;
        }
        .stars { color: var(--primary-green); margin-bottom: 1rem; }
        .testimonial-author { font-weight: 700; color: var(--primary-green); }

        /* --- CTA --- */
        .cta-phones { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0; }
        .phone-card {
            padding: 2rem 3rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px);
            border-radius: 20px; border: 2px solid rgba(249, 0, 130, 0.3); transition: all 0.3s;
        }
        .phone-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(249, 0, 130, 0.5); }
        .phone-number { font-size: 2rem; font-weight: 800; color: var(--deep-pink); margin-bottom: 0.5rem; }
        .whatsapp-btn {
            display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.5rem;
            background: linear-gradient(135deg, #25D366, #128C7E); border-radius: 50px; color: #fff;
            text-decoration: none; font-weight: 700; transition: all 0.3s; margin-top: 1rem;
        }
        .whatsapp-btn.call-action { background: linear-gradient(135deg, var(--deep-pink), var(--hot-pink)); }
        .whatsapp-btn:hover { transform: scale(1.05); }

        /* --- CHAT WIDGET --- */
        .chat-widget-toggle {
            position: fixed; bottom: 25px; right: 25px; height: 50px; background: linear-gradient(135deg, var(--gold), #FFB700);
            color: var(--dark-navy); border: none; border-radius: 50px; display: flex; align-items: center; justify-content: center;
            cursor: pointer; box-shadow: 0 5px 25px rgba(255, 215, 0, 0.5); z-index: 1005; padding: 0 1.2rem; font-weight: 700; transition: all 0.3s ease;
        }
        .chat-widget-toggle:hover { transform: scale(1.05); box-shadow: 0 8px 40px rgba(255, 215, 0, 0.8); }
        .chat-widget-menu {
            position: fixed; bottom: 85px; right: 25px; width: 250px; background: rgba(10, 14, 39, 0.95);
            backdrop-filter: blur(20px); border: 2px solid rgba(255, 215, 0, 0.4); border-radius: 20px;
            box-shadow: 0 5px 40px rgba(255, 215, 0, 0.3); z-index: 1004; transform: scale(0);
            transform-origin: bottom right; transition: transform 0.3s ease; overflow: hidden;
        }
        .chat-widget-menu.active { transform: scale(1); }
        .chat-widget-header {
            padding: 1rem; text-align: center; font-weight: 700; font-size: 1.1rem;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 183, 0, 0.2));
            color: var(--gold); border-bottom: 2px solid rgba(255, 215, 0, 0.3);
        }
        .chat-widget-menu a {
            display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem; color: var(--white);
            text-decoration: none; font-weight: 600; font-size: 0.9rem;
            border-bottom: 1px solid rgba(255, 69, 161, 0.2); transition: background 0.3s;
        }
        .chat-widget-menu a:hover { background: rgba(255, 69, 161, 0.1); }
        .chat-widget-toggle .icon-close { display: none; }
        .chat-widget-toggle.active .icon-open { display: none; }
        .chat-widget-toggle.active .icon-close { display: inline-block; }

        /* --- FOOTER --- */
        footer {
            background: rgba(10, 14, 39, 0.95); color: var(--white); padding: 3rem 5% 1rem;
            border-top: 2px solid rgba(255, 69, 161, 0.3); z-index: 1; position: relative;
        }
        .footer-content {
            max-width: 1200px; margin: 0 auto; display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem;
        }
        .footer-section h3 {
            font-size: 1.3rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, #00F5FF, #FF0066);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .footer-section a {
            color: rgba(255, 255, 255, 0.8); text-decoration: none; display: block;
            margin-bottom: 0.8rem; transition: all 0.3s;
        }
        .footer-section a:hover { color: var(--bright-pink); padding-left: 5px; }
        
        /* Footer Contact Icons Fix (About Us Style) */
.footer-section p:has(i) { 
    display: flex; 
    align-items: flex-start; 
    gap: 0.75rem; 
    margin-bottom: 0.8rem; 
}
.footer-section p:has(i) a { 
    display: inline; 
    margin-bottom: 0; 
    line-height: 1.6; 
}
.footer-section p:has(i) i { 
    width: 18px; 
    flex-shrink: 0; 
    text-align: center; 
    margin-top: 6px; 
    /* Ye wo gradient color hai jo About Us mein hai */
    background: linear-gradient(135deg, #00F5FF, #FF0066); 
    background-size: 100%; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}
.footer-section p:has(i) a:hover { 
    padding-left: 0; 
    text-decoration: underline; 
}
        
        .social-links { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
        .social-links a { font-size: 1.5rem; display: inline-block; margin-bottom: 0; color: var(--white); }
        .social-links a:hover { color: var(--bright-pink); transform: translateY(-3px); padding-left: 0; }
        .footer-bottom {
            text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255, 69, 161, 0.2);
            color: rgba(255, 255, 255, 0.6);
        }

        /* --- MOBILE RESPONSIVE FINAL ADJUSTMENTS --- */
        @media (max-width: 1100px) {
            .hero h1 { font-size: 2rem; }
            .hero h2 { font-size: 1.1rem; }

            /* FINAL FIX: Mobile Buttons - Optimized size for tablet/medium mobile */
            .hero-buttons {
                flex-direction: column;
                width: 100%;
                gap: 10px;
                max-width: 350px; 
            }
            .hero-buttons .btn-primary {
                width: 100%;
                padding: 0.7rem 1.4rem; 
                font-size: 0.95rem; 
                min-width: unset;
            }

            .nav-menu {
                position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--dark-navy);
                flex-direction: column; justify-content: center; padding: 2rem; gap: 2.5rem; z-index: 1001;
                opacity: 0; pointer-events: none; transform: translateY(-100%); transition: all 0.4s ease-out;
            }
            .nav-menu.active { opacity: 1; pointer-events: all; transform: translateY(0); }
            .menu-toggle { display: flex; }
            .btn-quote-nav {
                display: flex; justify-content: center; background: linear-gradient(135deg, var(--gold), #FFB700);
                color: var(--dark-navy) !important; border-radius: 50px; padding: 0.8rem; width: 100%; max-width: 300px;
            }
            .hero { padding-top: 8rem; }
            
            /* TRUCK/ROAD/WIDGET SEPARATION (High Z-index) */
            /* NOTE: Truck/Road animation removed from gallery page as they were inherited but not needed/visible here. */
            
            .chat-widget-toggle { z-index: 1005; }
            .chat-widget-menu { z-index: 1004; }

            /* Gallery Grid Optimization */
             .gallery-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 480px) {
            .logo { font-size: 1rem; } .logo .truck-img { width: 35px; }
            
            /* FINAL FIX: Button size optimization for smallest screens */
            .hero-buttons .btn-primary {
                font-size: 0.85rem; 
                padding: 0.5rem 0.8rem; 
            }
            .hero h1 { font-size: 1.8rem; }
            .hero h2 { font-size: 1rem; }

            .gallery-grid, .stats-grid, .video-grid, .footer-content { grid-template-columns: 1fr; }

            /* Widget responsiveness */
            .chat-widget-toggle {
                height: 45px;
                bottom: 15px;
                right: 15px;
                z-index: 1005; /* Highest Z-index */
            }
            .chat-widget-menu {
                width: calc(100vw - 30px); 
                bottom: 70px; 
                right: 15px;
                max-width: 350px; 
                z-index: 1004;
            }
        }
        /* --- CTA BUTTONS BASE STYLES --- */
.hero-buttons { 
    display: flex; 
    gap: 1rem; 
    justify-content: center; 
    flex-wrap: wrap; 
    max-width: 850px; 
    margin: 0 auto;
}
.hero-buttons .btn-primary,
.hero-buttons .btn-whatsapp {
    padding: 0.8rem 1.5rem; 
    border-radius: 50px; 
    font-weight: 700; 
    font-size: 0.9rem; 
    text-decoration: none;
    transition: all 0.3s; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.8rem;
    min-width: 200px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* 1. Primary Button (Call - Blue) */
.hero-buttons .btn-primary {
    background: linear-gradient(135deg, #0072FF, #00C6FF) !important;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 114, 255, 0.5) !important;
    animation: pulseGlow 2s infinite;
}
.hero-buttons .btn-primary:hover { 
    transform: translateY(-5px) scale(1.05); 
}

/* 2. WhatsApp Button (Green) */
.hero-buttons .btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E); 
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5);
    animation: none; /* Do not pulse the WhatsApp button */
}
.hero-buttons .btn-whatsapp:hover { 
    transform: translateY(-5px) scale(1.05); 
}

/* 3. Quote Button (Yellow) */
.hero-buttons .btn-quote {
    background: linear-gradient(135deg, #FFD700, #FFA500); 
    color: #000;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5); 
    animation: pulseYellow 2s infinite;
}

/* Animation Keyframes */
@keyframes pulseGlow { 
    0%, 100% { box-shadow: 0 0 30px rgba(0, 114, 255, 0.6); } 
    50% { box-shadow: 0 0 50px rgba(0, 114, 255, 1), 0 0 80px rgba(0, 198, 255, 0.8); } 
}
@keyframes pulseYellow { 
    0%, 100% { box-shadow: 0 5px 20px rgba(255, 215, 0, 0.5); } 
    50% { box-shadow: 8px 10px 40px rgba(255, 215, 0, 0.9); } 
}

/* --- MOBILE BUTTON FIX (Smart Size & Centered) --- */
@media (max-width: 1100px) {
    .hero-buttons {
        display: flex;
        flex-direction: column; /* Buttons upar-neechay */
        align-items: center;    /* Bilkul Center */
        width: 100%;
        gap: 15px;              /* Thoda khula faasla */
        margin-top: 1rem;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-whatsapp,
    .hero-buttons .btn-quote {
        width: auto !important;      /* Full width khatam */
        min-width: 250px !important; /* Smart Size (Na chota, na lamba) */
        max-width: 90% !important;   /* Screen se bahar nahi jayega */
        display: inline-flex;
        justify-content: center;
        padding: 0.8rem 1.5rem !important;
        font-size: 0.95rem !important;
        margin: 0 !important;
    }
}

/* --- HEADER BUTTON STYLES (From About Us Page) --- */

/* 1. Container for the buttons */
.call-buttons { 
    display: flex; 
    gap: 0.5rem; 
    align-items: center; 
}

/* 2. Pink Call Button Style */
.call-btn {
    background: linear-gradient(135deg, var(--deep-pink), var(--bright-pink)); 
    color: var(--white);
    padding: 0.6rem 1.2rem; 
    border-radius: 50px; 
    font-weight: 700; 
    text-decoration: none;
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    transition: all 0.3s; 
    box-shadow: 0 5px 20px rgba(255, 17, 104, 0.4); 
    font-size: 0.9rem;
}
.call-btn:hover { 
    transform: scale(1.05); 
    box-shadow: 0 8px 30px rgba(255, 17, 104, 0.6); 
}

/* 3. Green WhatsApp Button Style (Specific for Header) */
.btn-whatsapp-header { 
    background: linear-gradient(135deg, #25D366, #128C7E); 
    color: var(--white);
    padding: 0.6rem 1.2rem; 
    border-radius: 50px; 
    font-weight: 700; 
    text-decoration: none;
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    transition: all 0.3s; 
    font-size: 0.9rem;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
}
.btn-whatsapp-header:hover { 
    transform: scale(1.05); 
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6); 
}

/* 4. Mobile Responsive Adjustments (Important for Phone view) */
@media (max-width: 1100px) {
    .call-buttons { 
        flex-direction: column; 
        width: 100%; 
        margin-top: 1rem; 
        gap: 1rem; 
    }
    /* Make buttons full width on mobile menu */
    .call-btn, .btn-whatsapp-header { 
        width: 100%; 
        justify-content: center; 
        padding: 0.8rem 1.2rem; 
        font-size: 1rem; 
    }
}
/* --- FORCE ELECTRIC BLUE FOR ALL CALL BUTTONS (FIXED) --- */
.call-btn, 
.btn-call, 
.header-call-btn, 
.btn-call-hero { 
    background: linear-gradient(135deg, #0072FF, #00C6FF) !important; 
    color: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0, 114, 255, 0.5) !important; 
    border: none !important;
}

.call-btn:hover, 
.btn-call:hover, 
.header-call-btn:hover, 
.btn-call-hero:hover {
    background: linear-gradient(135deg, #0056CC, #0099FF) !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(0, 114, 255, 0.8) !important;
}
    /* --- Laptop/Medium Screen Fix (Overlap Rokene ke liye) --- */
@media (min-width: 1024px) and (max-width: 1350px) {
    header { padding: 0.8rem 2%; }
    .logo { font-size: 1rem; }
    .nav-menu { gap: 0.7rem; }
    .nav-menu a { font-size: 0.85rem; }
    .call-btn, .btn-whatsapp-header { padding: 0.5rem 0.8rem; font-size: 0.8rem; }
}
/* --- FINAL FIX FOR YELLOW QUOTE BUTTON --- */
.hero-buttons a.btn-quote,
.hero-buttons .btn-quote {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #000 !important;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5) !important;
    border: 2px solid transparent !important;
    animation: pulseYellow 2s infinite !important;
}
/* --- FINAL RESTORED MOBILE MENU (Index Style) --- */
@media (max-width: 1100px) {
    
    /* 1. Menu Container */
    .nav-menu {
        justify-content: flex-start !important;
        padding-top: 80px !important;
        padding-bottom: 150px !important;
        gap: 1rem !important;
        overflow-y: auto !important;
    }

    /* 2. BUTTONS SIZE (Standard Smart Size - 280px) */
    .nav-menu .btn-quote-nav, 
    .nav-menu .call-btn, 
    .nav-menu .btn-whatsapp-header,
    .nav-menu .btn-whatsapp {
        width: 100% !important;
        max-width: 280px !important; /* Ye perfect size hai */
        min-width: auto !important;
        height: auto !important;     /* Height auto rakhi taake text fit aaye */
        padding: 0.8rem 1.5rem !important; /* Padding wapis normal ki */
        margin: 0 auto !important;   /* Center Align */
        
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        
        font-size: 1rem !important;
        font-weight: 700 !important;
        border-radius: 50px !important;
    }

    /* 3. Spacing (Faasla wapis normal kiya) */
    .nav-menu .btn-quote-nav {
        margin-bottom: 15px !important; /* 15px Gap */
        margin-top: 10px !important;
    }
    .call-buttons {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important; /* Buttons ke beech 15px Gap */
        margin-top: 0 !important;
    }
    
    /* 4. Colors (Hero Style) */
    .nav-menu .btn-quote-nav {
        background: linear-gradient(135deg, #FFD700, #FFA500) !important;
        color: #000 !important;
        box-shadow: 0 5px 20px rgba(255, 215, 0, 0.5) !important;
    }
    .nav-menu .call-btn {
        background: linear-gradient(135deg, #0072FF, #00C6FF) !important;
        color: #fff !important;
        box-shadow: 0 5px 20px rgba(0, 114, 255, 0.5) !important;
    }
    .nav-menu .btn-whatsapp-header,
    .nav-menu .btn-whatsapp {
        background: linear-gradient(135deg, #25D366, #128C7E) !important;
        color: #fff !important;
        box-shadow: 0 5px 20px rgba(37, 211, 102, 0.5) !important;
    }
}