/*
Theme Name: Help Vehicle Recovery
Author: Asif Nawaz
Description: Custom theme for vehicle recovery.
Version: 1.0
*/

  /* --- Existing CSS --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* FIX: Mobile menu scroll lock */
        .no-scroll {
            overflow: hidden;
        }

        :root {
            --deep-pink: #001F3F;
            --bright-pink: #FF3399;
            --hot-pink: #FF1493;
            --coral: #FF6B9D;
            --gold: #FFD700;
            --orange: #FF8C42;
            --cyan: #00F5FF;
            --electric-blue: #00BFFF;
            --dark-navy: #0A0E27;
            --white: #ffffff;
            --light-gray: #f5f5f5;
        }

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

        /* Animated Background Gradient */
        .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%; }
        }

        /* Additional animated overlay for more depth */
        .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%),
                radial-gradient(circle at 40% 20%, rgba(0, 245, 255, 0.35) 0%, transparent 50%),
                radial-gradient(circle at 60% 60%, rgba(0, 191, 255, 0.3) 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); }
        }

        /* Floating Particles */
        .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); }
            25% { transform: translateY(-100vh) translateX(50px); }
            50% { transform: translateY(-200vh) translateX(-50px); }
            75% { transform: translateY(-300vh) translateX(100px); }
        }

        /* === 1. HEADER (FIXED) === */
        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 hai taake sides mein jagah bache */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem; /* IMPORTANT: Ye Logo aur Menu ko chipakne 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);
}

        /* === 2. LOGO (FIXED) === */
        .logo {
            font-size: clamp(0.9rem, 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(35px, 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); }
        }

        /* Navigation Menu */
        /* Navigation Menu */
.nav-menu {
    display: flex;
    gap: 1rem; /* Pehle 2rem tha, ab 1rem kar diya hai */
    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%; }
        .nav-menu a:hover { color: var(--white); }

        .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;
        }

        /* Specific Style for WhatsApp Button globally */
        .btn-whatsapp {
            background: linear-gradient(135deg, #25D366, #128C7E);
            color: var(--white) !important;
            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(37, 211, 102, 0.4);
            font-size: 0.9rem;
        }
        .btn-whatsapp:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
        }

        .call-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 30px rgba(255, 17, 104, 0.6);
        }
        
        .btn-quote-nav { display: none; }

        /* Mobile Menu Toggle */
        .menu-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
            gap: 5px;
            z-index: 1002; 
            position: relative;
        }
        .menu-toggle span {
            width: 30px;
            height: 3px;
            background: var(--bright-pink);
            border-radius: 3px;
            transition: all 0.3s;
        }

        /* Hero Section */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 120px 5% 60px;
        }

        /* === 3. TRUCK/ROAD (FIXED) === */
        .road-line {
            position: absolute;
            bottom: 2%; 
            width: 100%;
            height: 4px;
            background: repeating-linear-gradient(90deg, var(--orange) 0px, var(--orange) 40px, transparent 40px, transparent 80px);
            animation: roadMove 2s linear infinite;
            box-shadow: 0 0 20px var(--orange);
            z-index: 5;
        }

        @keyframes roadMove {
            0% { transform: translateX(0); }
            100% { transform: translateX(-80px); }
        }

        .hero-content {
            text-align: center;
            color: var(--white);
            z-index: 10;
            animation: fadeInUp 1s ease;
            max-width: 900px;
            padding-bottom: 50px;
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .hero-content h1 {
            font-size: clamp(2.5rem, 6vw, 4rem);
            font-weight: 900;
            margin-bottom: 1rem;
            color: #FFFFFF;
            text-shadow: 0 0 15px rgba(0, 245, 255, 1), 0 0 30px rgba(255, 0, 102, 1), 0 0 45px rgba(0, 191, 255, 0.8), 3px 3px 6px rgba(0, 0, 0, 0.9);
            letter-spacing: 3px;
            animation: titlePulse 3s ease-in-out infinite;
            line-height: 1.2;
        }

        @keyframes titlePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }

        .hero-content p {
            font-size: clamp(1.1rem, 2.8vw, 1.5rem);
            margin-bottom: 2rem;
            color: #FFFFFF;
            text-shadow: 0 0 10px rgba(0, 245, 255, 0.8), 0 0 20px rgba(255, 0, 102, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.9);
            font-weight: 600;
            line-height: 1.6;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap; 
            max-width: 850px; 
            margin: 0 auto; 
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--deep-pink), var(--bright-pink));
            color: var(--white);
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: clamp(0.8rem, 1.5vw, 0.9rem);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s;
            animation: pulseGlow 2s infinite;
            box-shadow: 0 0 30px rgba(255, 17, 104, 0.6);
            border: 2px solid transparent;
        }

        .cta-buttons .btn-primary, .cta-buttons .btn-whatsapp {
            justify-content: center;
            flex: 0 1 auto;
            min-width: 220px;
        }

        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 30px rgba(255, 17, 104, 0.6); }
            50% { box-shadow: 0 0 50px rgba(255, 17, 104, 1), 0 0 80px rgba(255, 69, 161, 0.8); }
        }

        .btn-primary:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(255, 17, 104, 0.8);
        }

        .btn-secondary {
            background: linear-gradient(135deg, var(--deep-pink), var(--bright-pink));
            color: var(--white);
            padding: 1rem 2.5rem;
            border: 2px solid transparent; 
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: clamp(0.9rem, 2vw, 1.1rem);
            transition: all 0.3s;
            box-shadow: 0 5px 20px rgba(255, 17, 104, 0.4);
        }

        .btn-secondary:hover {
            transform: scale(1.05);
            color: var(--white);
            box-shadow: 0 8px 30px rgba(255, 17, 104, 0.6);
        }

        .btn-quote {
            background: linear-gradient(135deg, var(--gold), #FFB700) !important;
            color: var(--dark-navy) !important;
            font-weight: 800 !important;
            text-shadow: none !important;
            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.5) !important;
            animation: pulseYellow 2s infinite !important;
            border: 2px solid transparent !important;
        }
        .btn-quote:hover {
            background: transparent !important;
            border: 2px solid var(--gold) !important;
            color: var(--gold) !important;
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.7) !important;
        }
        @keyframes pulseYellow {
            0%, 100% { box-shadow: 0 5px 20px rgba(255, 215, 0, 0.5); }
            50% { box-shadow: 0 8px 40px rgba(255, 215, 0, 0.9); }
        }

        .truck-animation {
            position: absolute;
            bottom: 3%; 
            left: -250px;
            width: clamp(120px, 15vw, 200px);
            animation: truckMove 20s linear infinite;
            filter: drop-shadow(0 0 20px rgba(255, 0, 102, 0.8));
            z-index: 5;
            transform: scaleX(-1);
        }

        .truck-animation img {
            width: 100%;
            height: auto;
            display: block;
        }

        @keyframes truckMove {
            0% { left: -250px; transform: scaleX(-1) translateY(0); }
            50% { transform: scaleX(-1) translateY(-10px); }
            100% { left: calc(100% + 250px); transform: scaleX(-1) translateY(0); }
        }

        section {
            padding: 5rem 5%;
            position: relative;
        }

        .section-title {
            text-align: center;
            font-size: clamp(2.2rem, 5vw, 3.2rem);
            font-weight: 900;
            margin-bottom: 3rem;
            position: relative;
            color: #FFFFFF;
            text-shadow: 0 0 15px rgba(0, 245, 255, 1), 0 0 30px rgba(255, 0, 102, 1), 0 0 45px rgba(0, 191, 255, 0.8), 3px 3px 6px rgba(0, 0, 0, 1);
            letter-spacing: 3px;
            text-transform: uppercase;
            animation: sectionTitleGlow 4s ease-in-out infinite;
        }

        @keyframes sectionTitleGlow {
            0%, 100% { text-shadow: 0 0 15px rgba(0, 245, 255, 1), 0 0 30px rgba(255, 0, 102, 1), 0 0 45px rgba(0, 191, 255, 0.8); }
            50% { text-shadow: 0 0 25px rgba(0, 245, 255, 1), 0 0 50px rgba(255, 0, 102, 1), 0 0 75px rgba(0, 191, 255, 1); }
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 5px;
            background: linear-gradient(90deg, #00F5FF, #FF0066, #00BFFF);
            background-size: 200% 200%;
            animation: lineMove 3s ease infinite;
            box-shadow: 0 0 30px #00F5FF, 0 0 50px #FF0066, 0 0 70px #00BFFF;
            border-radius: 10px;
        }

        @keyframes lineMove {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        /* Quote Section */
        .quote-section {
            background: rgba(10, 14, 39, 0.8);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 69, 161, 0.3);
            border-radius: 30px;
            padding: clamp(1.5rem, 3vw, 3rem);
            max-width: 900px;
            margin: 0 auto;
            box-shadow: 0 10px 50px rgba(255, 17, 104, 0.3);
        }

        .quote-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--orange);
            text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 1rem;
            border: 2px solid rgba(255, 69, 161, 0.3);
            border-radius: 15px;
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            background: rgba(255, 255, 255, 0.05);
            color: var(--white);
            backdrop-filter: blur(10px);
            transition: all 0.3s;
            width: 100%; /* Ensure full width */
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.5); }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--bright-pink);
            box-shadow: 0 0 20px rgba(255, 17, 104, 0.5);
            background: rgba(255, 255, 255, 0.1);
        }

        .form-group select option {
            background: var(--dark-navy);
            color: var(--white);
        }

        .full-width { grid-column: 1 / -1; }

        /* --- CAPTCHA CSS --- */
        .captcha-group {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .captcha-display {
            padding: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 69, 161, 0.3);
            border-radius: 15px;
            font-size: 1.3rem;
            font-weight: 600;
            letter-spacing: 5px;
            user-select: none;
            font-family: 'Courier New', Courier, monospace;
            text-decoration: line-through;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            color: var(--cyan);
            flex-grow: 1;
            min-width: 120px;
            text-align: center;
        }
        .captcha-input {
            padding: 1rem;
            border: 2px solid rgba(255, 69, 161, 0.3);
            border-radius: 15px;
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            background: rgba(255, 255, 255, 0.05);
            color: var(--white);
            backdrop-filter: blur(10px);
            transition: all 0.3s;
            flex-grow: 1;
            min-width: 150px;
        }
         .captcha-input:focus {
            outline: none;
            border-color: var(--bright-pink);
            box-shadow: 0 0 20px rgba(255, 17, 104, 0.5);
            background: rgba(255, 255, 255, 0.1);
         }
        .refresh-captcha {
            background: transparent;
            border: none;
            color: var(--orange);
            font-size: 1.5rem;
            cursor: pointer;
            transition: transform 0.3s;
        }
        .refresh-captcha:hover { transform: rotate(180deg); }

        .submit-btn {
            grid-column: 1 / -1;
            background: linear-gradient(135deg, var(--deep-pink), var(--bright-pink));
            color: var(--white);
            padding: 1.2rem 2rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 30px rgba(255, 17, 104, 0.5);
            margin-top: 1rem;
            border: 2px solid transparent;
            width: 100%; /* Full width button */
        }

        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 50px rgba(255, 17, 104, 0.8);
        }
        
        .submit-btn:disabled {
            background: #aaa;
            cursor: not-allowed;
            animation: none;
        }

        /* Services Section */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .service-card {
            background: rgba(10, 14, 39, 0.8);
            backdrop-filter: blur(20px);
            padding: 2rem;
            border-radius: 25px;
            text-align: center;
            border: 2px solid rgba(255, 69, 161, 0.3);
            transition: all 0.4s;
            cursor: pointer;
            box-shadow: 0 5px 30px rgba(255, 17, 104, 0.2);
        }

        .service-card:hover {
            transform: translateY(-15px) scale(1.05);
            border-color: var(--bright-pink);
            box-shadow: 0 20px 60px rgba(255, 17, 104, 0.6);
            background: rgba(255, 17, 104, 0.1);
        }

        .service-card i {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
            background: linear-gradient(135deg, #00F5FF, #FF0066, #00BFFF, #FF1493);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
            transition: all 0.3s;
            animation: iconGlow 4s ease infinite;
            filter: drop-shadow(0 0 20px rgba(0, 245, 255, 1)) drop-shadow(0 0 40px rgba(255, 0, 102, 0.8));
        }

        @keyframes iconGlow {
            0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 20px rgba(0, 245, 255, 1)); }
            50% { background-position: 100% 50%; filter: drop-shadow(0 0 30px rgba(255, 0, 102, 1)); }
        }

        .service-card:hover i { transform: scale(1.2) rotate(5deg); }

        .service-card h3 {
            font-size: clamp(1.2rem, 2.8vw, 1.5rem);
            margin-bottom: 0.5rem;
            color: #FFFFFF;
            font-weight: 700;
            text-shadow: 0 0 10px rgba(0, 245, 255, 0.8);
        }
        .service-card p {
            color: rgba(255, 255, 255, 0.95);
            line-height: 1.8;
            font-size: clamp(0.95rem, 2.2vw, 1.1rem);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            font-weight: 500;
        }

        /* About Section */
        .about-content {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
            line-height: 1.9;
            font-size: clamp(1.05rem, 2.7vw, 1.2rem);
            color: #FFFFFF;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
            font-weight: 500;
        }

        .about-icons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .about-icon {
            background: rgba(10, 14, 39, 0.8);
            backdrop-filter: blur(20px);
            padding: 2rem;
            border-radius: 20px;
            border: 2px solid rgba(255, 69, 161, 0.3);
            transition: all 0.3s;
        }

        .about-icon:hover {
            transform: translateY(-10px);
            border-color: var(--bright-pink);
            box-shadow: 0 15px 40px rgba(255, 17, 104, 0.4);
        }

        .about-icon i {
            font-size: clamp(2.5rem, 5vw, 3rem);
            background: linear-gradient(135deg, #00F5FF, #FF0066, #00BFFF);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
            animation: iconPulse 3s ease infinite;
        }
        
        @keyframes iconPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* England Cities Coverage */
        .cities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1.5rem;
            max-width: 1400px;
            margin: 2rem auto;
        }

        .city-card {
            background: rgba(10, 14, 39, 0.8);
            backdrop-filter: blur(20px);
            padding: 1.5rem;
            border-radius: 20px;
            text-align: center;
            border: 2px solid rgba(255, 107, 53, 0.3);
            transition: all 0.3s;
            cursor: pointer;
        }

        .city-card:hover {
            transform: translateY(-5px);
            border-color: var(--orange);
            box-shadow: 0 10px 40px rgba(255, 107, 53, 0.5);
        }

        .city-card i {
            font-size: clamp(1.8rem, 3vw, 2rem);
            color: var(--orange);
            margin-bottom: 0.5rem;
            animation: locationPulse 2s infinite;
        }

        @keyframes locationPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        .city-card h4 {
            color: #FFFFFF;
            font-size: clamp(1.05rem, 2.3vw, 1.2rem);
            margin-bottom: 0.3rem;
            font-weight: 700;
            text-shadow: 0 0 8px rgba(0, 245, 255, 0.6);
        }

        .city-card .status {
            color: #00ff88;
            font-size: clamp(0.8rem, 1.5vw, 0.9rem);
            font-weight: 600;
        }

        /* Interactive Map */
        #map {
            height: 500px;
            border-radius: 25px;
            border: 3px solid rgba(255, 69, 161, 0.4);
            box-shadow: 0 10px 50px rgba(255, 17, 104, 0.3);
            margin-top: 2rem;
        }

        /* Contact Section */
        .contact-info {
            max-width: 1200px; 
            margin: 0 auto 3rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
            gap: 2rem;
        }

        .info-card {
            background: rgba(10, 14, 39, 0.8);
            backdrop-filter: blur(20px);
            padding: 2rem;
            border-radius: 20px;
            text-align: center;
            border: 2px solid rgba(255, 69, 161, 0.3);
            transition: all 0.3s;
        }

        .info-card:hover {
            transform: translateY(-5px);
            border-color: var(--bright-pink);
            box-shadow: 0 10px 40px rgba(255, 17, 104, 0.4);
        }

        .info-card i {
            font-size: 2.5rem;
            color: var(--orange);
            margin-bottom: 1rem;
        }

        .info-card h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: #FFFFFF;
            font-weight: 700;
        }

        .info-card a,
        .info-card p {
            color: rgba(255, 255, 255, 0.95);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            font-weight: 500;
            word-break: break-word; 
        }

        .info-card a {
            color: var(--bright-pink);
            text-decoration: none;
            font-weight: 600;
            display: block;
            margin-bottom: 5px;
        }

        .info-card a:hover { text-decoration: underline; }

        /* Service Details CSS */
        section[id] { scroll-margin-top: 90px; }
        .service-detail-block {
            background: rgba(10, 14, 39, 0.8);
            backdrop-filter: blur(20px);
            padding: 2.5rem;
            border-radius: 25px;
            border: 2px solid rgba(255, 69, 161, 0.3);
            margin-bottom: 2rem;
            box-shadow: 0 5px 30px rgba(255, 17, 104, 0.2);
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        .service-detail-block h3 {
            font-size: clamp(1.5rem, 3vw, 2.2rem);
            margin-bottom: 1.5rem;
            color: #FFFFFF;
            font-weight: 700;
            text-shadow: 0 0 10px rgba(0, 245, 255, 0.8);
        }
        .service-detail-block p, .service-detail-block li {
            color: rgba(255, 255, 255, 0.95);
            line-height: 1.8;
            font-size: clamp(1rem, 2.2vw, 1.15rem);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            font-weight: 500;
            margin-bottom: 0.8rem;
        }
        .service-detail-block ul {
            list-style-type: none;
            padding-left: 0;
            margin-top: 1.5rem;
        }
        .service-detail-block li::before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: var(--orange);
            margin-right: 12px;
            text-shadow: 0 0 10px var(--orange);
        }
        .service-detail-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 2rem;
            justify-content: flex-start;
        }
        .service-detail-buttons .btn-primary, .service-detail-buttons .btn-whatsapp {
            padding: 0.8rem 1.5rem;
            font-size: 0.95rem;
            min-width: 190px;
            text-align: center;
            justify-content: center;
            animation: none;
        }

        /* City Details Modal CSS */
        .city-modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(10, 14, 39, 0.85); backdrop-filter: blur(10px);
            z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem;
            opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .city-modal-overlay.active { opacity: 1; visibility: visible; }
        .city-modal-content {
            background: var(--dark-navy); border: 2px solid var(--bright-pink); border-radius: 25px;
            padding: 2.5rem; max-width: 95%; width: 800px; max-height: 90vh; overflow-y: auto;
            box-shadow: 0 10px 60px rgba(255, 17, 104, 0.6); position: relative;
            transform: scale(0.9); transition: transform 0.3s ease;
        }
        .city-modal-overlay.active .city-modal-content { transform: scale(1); }
        .modal-close {
            position: absolute; top: 15px; right: 25px; font-size: 2.5rem; color: var(--white);
            font-weight: 300; line-height: 1; cursor: pointer; transition: all 0.3s;
        }
        .modal-close:hover { color: var(--bright-pink); transform: rotate(90deg); }
        #modal-city-title {
            font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 1.5rem; color: #FFFFFF; font-weight: 700;
            text-shadow: 0 0 10px rgba(0, 245, 255, 0.8);
        }
        #modal-city-description p {
            color: rgba(255, 255, 255, 0.95); line-height: 1.8; font-size: clamp(0.95rem, 2.2vw, 1.1rem);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); font-weight: 500; margin-bottom: 1rem;
        }
        #modal-city-description h3 {
            font-size: clamp(1.2rem, 2.8vw, 1.5rem); margin-top: 1.5rem; margin-bottom: 1rem;
            color: var(--orange); font-weight: 700; text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
        }
        .modal-service-links {
            margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 69, 161, 0.3);
            display: flex; flex-wrap: wrap; gap: 0.75rem;
        }
        .modal-service-links h4 {
            width: 100%; font-size: 1.1rem; color: var(--orange); margin-bottom: 0.5rem;
        }
        .modal-service-link {
            display: inline-block; background: transparent; border: 1px solid var(--orange); color: var(--orange);
            padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; font-size: 0.9rem; font-weight: 600;
            transition: all 0.3s;
        }
        .modal-service-link:hover { background: var(--orange); color: var(--white); box-shadow: 0 0 20px rgba(255, 107, 53, 0.5); }

        /* Modal CTA Buttons CSS */
        .modal-cta-buttons {
            display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 69, 161, 0.3);
        }
        .modal-cta-buttons .btn-primary, .modal-cta-buttons .btn-whatsapp, .modal-cta-buttons .call-btn {
            width: 100%; justify-content: center; padding: 0.8rem 1.5rem; font-size: 1rem; animation: none; min-width: unset;
            border: none; border-radius: 50px; font-weight: 700; text-decoration: none; transition: all 0.3s;
            display: inline-flex; align-items: center; gap: 0.5rem;
        }
        .modal-cta-buttons .btn-primary:hover, .modal-cta-buttons .call-btn:hover { transform: translateY(-3px); }
        @media (min-width: 600px) { .modal-cta-buttons { grid-template-columns: repeat(3, 1fr); } }

        /* === 4. WIDGET Z-INDEX (FIXED) === */
        .chat-widget-toggle {
            position: fixed;
            bottom: 25px;
            right: 25px;
            width: auto;
            height: 50px; 
            background: linear-gradient(135deg, var(--gold), #FFB700);
            color: var(--dark-navy);
            border: none;
            border-radius: 50px;
            font-size: 1rem; 
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 5px 25px rgba(255, 215, 0, 0.5);
            z-index: 1003;
            transition: all 0.3s ease;
            overflow: hidden;
            padding: 0 1.2rem; 
            font-weight: 700;
        }
        .chat-widget-toggle:hover {
            box-shadow: 0 8px 40px rgba(255, 215, 0, 0.8);
            transform: scale(1.05);
        }
        .chat-widget-toggle i {
            display: inline-block;
            transition: transform 0.3s ease, display 0s;
            position: relative;
            font-size: 1.3rem;
        }

        .chat-widget-toggle span {
            margin-left: 0.5rem;
            transition: all 0.3s ease;
        }
        .chat-widget-toggle.active span { display: none; }
        
        .chat-widget-toggle .icon-open {
            animation: iconWiggle 1.5s ease-in-out infinite;
            transform: scale(1);
        }
        .chat-widget-toggle .icon-close { 
            display: none;
            transform: scale(0);
        }
        .chat-widget-toggle.active { transform: none; animation: none; }
        .chat-widget-toggle.active:hover { transform: scale(1.05); }
        .chat-widget-toggle.active .icon-open { transform: scale(0); display: none; }
        .chat-widget-toggle.active .icon-close { transform: scale(1); display: inline-block; }

        @keyframes iconWiggle {
            0%, 100% { transform: rotate(0deg) scale(1); }
            25% { transform: rotate(-10deg) scale(1); }
            75% { transform: rotate(10deg) scale(1); }
        }

        .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: 1002;
            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, transform 0.3s ease, opacity 0.3s ease;
            transform: translateX(20px);
            opacity: 0;
        }
        .chat-widget-menu.active a { transform: translateX(0); opacity: 1; }
        .chat-widget-menu.active a:nth-of-type(1) { transition-delay: 0.05s; }
        .chat-widget-menu.active a:nth-of-type(2) { transition-delay: 0.1s; }
        .chat-widget-menu.active a:nth-of-type(3) { transition-delay: 0.15s; }

        .chat-widget-menu a:last-child { border-bottom: none; }
        .chat-widget-menu a:hover { background: rgba(255, 69, 161, 0.1); }
        .chat-widget-menu a i {
            font-size: 1.2rem;
            width: 20px;
            text-align: center;
            color: var(--orange);
            transition: color 0.3s ease;
        }
        .chat-widget-menu a:nth-of-type(2) i { color: #25D366; }
        
        .chat-widget-menu a#chat-widget-quote-link {
            background: linear-gradient(135deg, var(--gold), #FFB700);
            color: var(--dark-navy);
            font-weight: 800;
        }
        .chat-widget-menu a#chat-widget-quote-link:hover {
            background: rgba(255, 255, 255, 0.05); 
            color: var(--gold);
            text-shadow: 0 0 10px var(--gold);
        }
        .chat-widget-menu a#chat-widget-quote-link i { color: var(--dark-navy); }
        
        .chat-widget-menu a#chat-widget-quote-link:hover i { color: var(--gold); }

        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);
        }

        .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: 1rem;
            background: linear-gradient(135deg, #00F5FF, #FF0066);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: footerTitle 4s ease infinite;
            filter: drop-shadow(0 0 15px rgba(0, 245, 255, 0.7));
        }

        @keyframes footerTitle {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .footer-section p,
        .footer-section a {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.8;
            text-decoration: none;
            display: block;
            margin-bottom: 0.5rem;
            transition: all 0.3s;
        }

        .footer-section a:not(.call-btn):not(.btn-whatsapp):hover {
            color: var(--bright-pink);
            padding-left: 5px;
        }
        
        /* New Footer Button Styles */
        .footer-section .call-btn, .footer-section .btn-whatsapp {
            margin-bottom: 1rem;
            justify-content: center;
            width: 100%;
            color: var(--white) !important;
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
            flex-wrap: wrap; 
        }

        .social-links a {
            color: var(--white);
            font-size: 1.5rem;
            transition: all 0.3s;
            filter: drop-shadow(0 0 10px rgba(255, 69, 161, 0.5));
            display: inline-block;
        }

        .social-links a:hover {
            color: var(--bright-pink);
            transform: translateY(-3px);
            filter: drop-shadow(0 0 20px rgba(255, 17, 104, 1));
            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);
        }
        
        .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;         
            background: linear-gradient(135deg, #00F5FF, #FF0066);
            background-size: 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.7));
        }
        .footer-section p:has(i) a:hover {
            padding-left: 0;
            text-decoration: underline;
        }

        /* === 5. MOBILE RESPONSIVE (FINAL ADJUSTMENTS) === */
        @media (max-width: 1100px) { 
            /* FIX: Reduced padding top and set padding bottom to accommodate new truck position and fixed widget */
            .hero { padding-top: 70px; padding-bottom: 150px; }
            
            /* ADD: Ensure the truck is visible well above the bottom fixed elements (chat widget) */
            .truck-animation {
                bottom: 120px; 
                width: clamp(100px, 20vw, 150px);
                z-index: 1004; /* Increased Z-Index to ensure it's OVER the widget and road */
            }
            
            /* ADD: Road line positioned directly beneath the truck's wheels/base */
            .road-line {
                bottom: 110px; 
                z-index: 1004; /* Increased Z-Index to ensure it's OVER the widget */
            }

            /* FIX: Mobile Buttons - Equal size and smaller (Optimized for space) */
            .cta-buttons {
                display: flex;
                flex-direction: column;
                width: 100%;
                gap: 10px;
                max-width: 350px; /* Further constrained width for better fit */
                margin-left: auto;
                margin-right: auto;
            }
            .cta-buttons .btn-primary, .cta-buttons .btn-whatsapp, .cta-buttons .btn-quote {
                width: 100%;
                margin: 0;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                min-width: auto;
                flex: 1 1 auto;
                padding: 0.7rem 1.4rem; /* Reduced padding slightly */
                font-size: 0.95rem; /* Reduced font size slightly */
            }

            header { padding: 1rem 3%; }
            
            /* Responsive Menu */
            .nav-menu { 
                position: fixed; 
                top: 0; 
                left: 0; 
                width: 100%; 
                height: 100vh; 
                background: var(--dark-navy); 
                flex-direction: column; 
                justify-content: center; 
                align-items: 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);
            }
            .nav-menu a { 
                font-size: 1.5rem; 
                padding: 0; 
                border-bottom: none; 
                width: auto;
            }
            .call-buttons { 
                flex-direction: column; 
                width: 100%; 
                max-width: 300px; 
                margin-top: 1rem; 
                gap: 1rem;
            }
            .call-btn, .btn-whatsapp { 
                width: 100%; 
                justify-content: center;
                padding: 0.8rem 1.2rem;
                font-size: 1.1rem; 
            }
            
            .btn-quote-nav {
                display: flex;
                background: linear-gradient(135deg, var(--gold), #FFB700);
                color: var(--dark-navy) !important; 
                font-weight: 800;
                padding: 0.8rem 1.2rem;
                border-radius: 50px;
                font-size: 1.1rem;
                width: 100%;
                max-width: 300px;
                justify-content: center;
                border-bottom: none !important;
            }
            .btn-quote-nav:hover { color: var(--dark-navy) !important; }
            .btn-quote-nav::after { display: none; }
            
            .menu-toggle { display: flex; }
            .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
            .menu-toggle.active span:nth-child(2) { opacity: 0; }
            .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

            section { padding: 3rem 3%; }
            #map { height: 300px; }
            
            .chat-widget-toggle { width: auto; height: 50px; font-size: 1rem; bottom: 20px; right: 20px; padding: 0 1rem; }
            .chat-widget-menu { bottom: 80px; right: 20px; width: 240px; }
        }
        
        @media (max-width: 480px) {
            .logo { font-size: 1rem; } 
            .logo .truck-img { width: 35px; } 
            
            /* IMPORTANT: Grid adjustments for mobile */
            .services-grid, .cities-grid, .projects-grid { grid-template-columns: 1fr; }
            
            /* IMPORTANT: Quote Form Responsive Fix */
            .quote-form { 
                display: flex; 
                flex-direction: column; 
                gap: 1rem;
            }
            .form-group { width: 100%; }
            
            /* FINAL FIX: Button size optimization for smallest screens */
            .cta-buttons .btn-primary, .cta-buttons .btn-whatsapp, .cta-buttons .btn-quote {
                font-size: 0.9rem; 
                padding: 0.6rem 1rem;
            }

            /* FINAL FIX: Ensure roadline is directly under the truck, above the fixed widget */
            .road-line {
                bottom: 80px; 
                z-index: 1004;
            }
             .truck-animation {
                bottom: 90px; 
                z-index: 1004;
            }

            .service-detail-buttons { flex-direction: column; }
            .service-detail-buttons .btn-primary, .service-detail-buttons .btn-whatsapp { width: 100%; }
            
            .city-modal-content { padding: 2rem 1.5rem; }
            .modal-close { right: 15px; }
            .contact-info { grid-template-columns: 1fr; }
            .footer-content { grid-template-columns: 1fr; } 
            
            .captcha-group { flex-direction: column; align-items: stretch; } 
            .captcha-display, .captcha-input { width: 100%; text-align: center;}
            .refresh-captcha { align-self: center; margin-top: 0.5rem;} 

            /* Widget responsiveness (Ensures Road/Truck are above this) */
            .chat-widget-toggle {
                height: 45px;
                bottom: 15px;
                right: 15px;
            }
            .chat-widget-menu {
                width: calc(100vw - 30px); 
                bottom: 70px; 
                right: 15px;
                max-width: 350px; 
            }
        }
        /* --- FORCE BLUE COLOR FOR ALL CALL BUTTONS --- */

/* 1. Blue Gradient Background & Shadow */
.call-btn, 
.btn-call, 
.header-call-btn, 
.btn-call-hero {
    background: linear-gradient(135deg, #0072FF, #00C6FF) !important; /* Electric Blue */
    color: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0, 114, 255, 0.5) !important; /* Blue Glow */
    border: none !important;
}

/* 2. Hover Effect (Darker Blue when mouse over) */
.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;
}

/* 3. Animation Color Fix (Making the pulse blue) */
@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); } 
}
/* --- Laptop/Medium Screen Fix (Overlap Rokene ke liye) --- */
@media (min-width: 1024px) and (max-width: 1350px) {
    header { padding: 0.8rem 2%; }
    .nav-menu { gap: 0.7rem; }
    .nav-menu a { font-size: 0.85rem; }
}
/* --- FORCE BLUE COLOR GLOBALLY (FIX) --- */

/* 1. Call Buttons & Hero Buttons (Electric Blue) */
.call-btn,
.cta-buttons .btn-primary {
    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;
    animation: pulseGlow 2s infinite !important;
}

/* 2. Hover Effect */
.call-btn:hover,
.cta-buttons .btn-primary: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;
}

/* 3. Quote Button ko Yellow hi rakhna hai (Override Blue) */
.cta-buttons .btn-quote,
a.btn-quote,
.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;
    animation: pulseYellow 2s infinite !important;
}

/* 4. Animation ko Pink se Blue karna */
@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); } 
}
/* --- FIX REMAINING BUTTONS (Service Details & Read More) --- */

/* 1. Make Service Buttons & Read More Button Blue */
.service-detail-buttons .btn-primary,
.btn-secondary {
    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;
    animation: none; /* In par animation ki zarurat nahi */
}

/* 2. Hover Effect for these buttons */
.service-detail-buttons .btn-primary:hover,
.btn-secondary: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;
}
/* --- FIX: Quote Button in Service Details (Back to Yellow) --- */
.service-detail-buttons .btn-quote {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #000 !important; /* Text Black */
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.5) !important;
    border: 2px solid transparent !important;
}

.service-detail-buttons .btn-quote:hover {
    background: transparent !important;
    border: 2px solid #FFD700 !important;
    color: #FFD700 !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.7) !important;
}
/* --- FIX: Equal Size Buttons in Service Details --- */
.service-detail-buttons {
    display: flex;
    gap: 10px; /* Buttons ke beech fasla */
    flex-wrap: wrap; /* Mobile par toot kar niche aa sakein */
}

.service-detail-buttons a {
    flex: 1; /* Ye property sab buttons ko barabar size de degi */
    min-width: 160px; /* Kam se kam itna chaura hoga */
    max-width: 280px; /* Isse zyada bada nahi hoga (Control size) */
    justify-content: center; /* Text aur Icon ko center karega */
    text-align: center;
    padding: 0.8rem 0.5rem !important; /* Padding same rakhi */
    font-size: 0.9rem !important; /* Font size same rakha */
    box-sizing: border-box;
}
/* --- FIX: Service Buttons (Compact & Equal Size) --- */
.service-detail-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start; /* Left side par rahenge */
}

.service-detail-buttons a {
    flex: unset !important;       /* Stretch khatam kar diya */
    width: 200px !important;      /* Fixed size: Ziada bada nahi hoga */
    max-width: 100% !important;   /* Mobile par screen se bahar na jaye */
    padding: 0.6rem !important;   /* Padding thodi kam ki taake smart lage */
    font-size: 0.85rem !important; /* Text size normal kiya */
    justify-content: center;      /* Text beech mein rahega */
    display: inline-flex;
    align-items: center;
}
/* --- FINAL MOBILE FIX: Truck/Road in Empty Space --- */
@media (max-width: 1100px) {
    
    /* 1. Road ko Widget se thoda upar (Safe Space mein) rakha */
    .road-line {
        bottom: 110px !important; /* Widget se clear fasla */
        z-index: 1 !important;
    }

    /* 2. Truck ko Road ke upar set kiya */
    .truck-animation {
        bottom: 120px !important; /* Road se 10px upar */
        width: 130px !important;  /* Mobile ke liye perfect size */
        z-index: 1 !important;
    }
}
/* --- FINAL MOBILE BUTTON FIX (Index Page) --- */
@media (max-width: 1100px) {
    .cta-buttons {
        display: flex;
        flex-direction: column; /* Upar-Neeche */
        align-items: center;    /* Bilkul Center */
        width: 100%;
        gap: 15px;              /* Beech ka fasla */
        max-width: 100% !important;
        margin-top: 1rem;
    }

    /* Buttons ka Smart Size */
    .cta-buttons a, 
    .cta-buttons .btn-primary, 
    .cta-buttons .btn-whatsapp, 
    .cta-buttons .btn-quote {
        width: auto !important;      /* Full width khatam */
        min-width: 250px !important; /* Smart Size (Gallery jaisa) */
        max-width: 90% !important;   /* Screen se bahar na jaye */
        display: inline-flex;
        justify-content: center;
        padding: 0.8rem 1.5rem !important;
        font-size: 0.95rem !important;
        margin: 0 !important;
    }
}
/* --- FINAL MOBILE MENU SPACING FIX --- */
@media (max-width: 1100px) {
    .nav-menu {
        justify-content: flex-start !important; /* Content Upar se shuru ho */
        padding-top: 100px !important;      /* Header ke neeche */
        
        /* YE LINE IMPORTANCE HAI: Neeche 200px jagah chori hai */
        padding-bottom: 200px !important;   
        
        overflow-y: auto !important;        /* Scroll karne ki ijazat di */
        gap: 15px !important;
    }

    /* Buttons ko thoda khula (Open) kiya */
    .btn-quote-nav, 
    .call-btn, 
    .btn-whatsapp-header {
        margin-bottom: 10px !important; /* Har button ke neeche thoda gap */
        min-height: 50px !important;    /* Button ki motai fix ki taake text na kate */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
/* --- FINAL MOBILE MENU FIX (Exact Hero Match) --- */
@media (max-width: 1100px) {
    
    /* 1. Menu Layout */
    .nav-menu {
        justify-content: flex-start !important;
        padding-top: 80px !important;
        padding-bottom: 150px !important; /* Scrolling space */
        gap: 1rem !important;
        overflow-y: auto !important;
    }

    /* --- FINAL MOBILE MENU FIX (All Buttons Same Size) --- */
@media (max-width: 1100px) {
    
    /* 1. Menu Layout */
    .nav-menu {
        justify-content: flex-start !important;
        padding-top: 80px !important;
        padding-bottom: 150px !important;
        gap: 1rem !important;
        overflow-y: auto !important;
    }

    /* 2. ALL BUTTONS SIZE FIX (Sabko Target kiya) */
    .nav-menu .btn-quote-nav, 
    .nav-menu .call-btn, 
    .nav-menu .btn-whatsapp-header, 
    .nav-menu .btn-whatsapp { /* Yahan dono classes add kar di hain */
        
        /* Size Settings */
        width: 100% !important;
        max-width: 280px !important; /* Sabki chaudai barabar */
        min-width: 250px !important;
        height: 55px !important;     /* Sabki lumbai (height) barabar */
        
        /* Alignment Settings */
        padding: 0 !important;       /* Padding zero karke center kiya */
        margin: 5px auto !important; /* Center Align */
        box-sizing: border-box !important;
        
        /* Text Centering */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        
        /* Font Style */
        font-size: 1rem !important;
        font-weight: 700 !important;
        border-radius: 50px !important;
        border: none !important;
    }

    /* 3. Colors & Shadows */
    
    /* Yellow Quote */
    .nav-menu .btn-quote-nav {
        background: linear-gradient(135deg, #FFD700, #FFA500) !important;
        color: #000 !important;
        font-weight: 800 !important;
        box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5) !important;
        animation: pulseYellow 2s infinite !important;
    }

    /* Blue Call */
    .nav-menu .call-btn {
        background: linear-gradient(135deg, #0072FF, #00C6FF) !important;
        color: #fff !important;
        box-shadow: 0 10px 30px rgba(0, 114, 255, 0.5) !important;
        animation: pulseGlow 2s infinite !important;
    }

    /* Green WhatsApp (Sab classes cover ki) */
    .nav-menu .btn-whatsapp-header,
    .nav-menu .btn-whatsapp {
        background: linear-gradient(135deg, #25D366, #128C7E) !important;
        color: #fff !important;
        box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5) !important;
    }

    /* 4. Containers Adjust */
    .call-buttons {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        margin-top: 0 !important;
    }
    
    /* 5. Icons Spacing */
    .nav-menu a i {
        margin-right: 10px !important;
        font-size: 1.2rem !important;
    }
}