/* ==========================================================================
   1. GLOBAL SYSTEM ARCHITECTURE & THEME VARIABLES
   ========================================================================== */
:root {
    --navy: #0A2342;
    --gold: #D4A017;
    --white: #FFFFFF;
    --dark-blue: #06162B;
    --light-bg: #F8FAFC;
    --text-dark: #1E293B;
    --text-light: #64748B;
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-panel: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --form-border: rgba(10, 35, 66, 0.08);
    --error-color: #EF4444;
    --soft-shadow: 0 10px 30px rgba(10, 35, 66, 0.05);
    --heavy-shadow: 0 25px 50px rgba(6, 22, 43, 0.15);
    --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.section-padding {
    padding: 100px 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* UI Action Buttons Components */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: var(--transition-smooth);
    cursor: pointer;
    border: none;
}

.btn-gold {
    background-color: var(--gold);
    color: var(--navy);
    border: 2px solid var(--gold);
}

.btn-gold:hover {
    background-color: transparent;
    color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(214, 160, 23, 0.25);
}

.btn-outline {
    background-color: transparent;
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
    border-color: var(--white);
    transform: translateY(-3px);
}

.btn-primary {
    background-color: var(--navy);
    color: var(--white);
    width: 100%;
    margin-top: 10px;
}

.btn-primary:hover {
    background-color: var(--gold);
    color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(214, 160, 23, 0.25);
}

/* ==========================================================================
   2. SHARED FIXED STICKY HEADER & NAVBAR STYLES
   ========================================================================== */
.sticky-header, header {
    position: sticky;
    top: 0;
    background: rgba(10, 35, 66, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(214, 160, 23, 0.2);
    padding: 14px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.logo-container, .logo-area {
    display: flex;
    flex-direction: column;
}

.logo-fallback, .logo-text {
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.logo-fallback .accent-text, .logo-text span {
    color: var(--gold);
}

.brand-tagline, .tagline {
    color: #FFFFFF;
    font-size: 11px;
    font-style: italic;
    margin-top: 1px;
    letter-spacing: 0.3px;
}

.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 28px;
}

.nav-link, nav ul li a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2px;
    padding: 6px 0;
    position: relative;
    transition: color 0.3s ease;
}

.nav-link:hover, .nav-link.active, nav ul li a:hover, nav ul li a.active {
    color: var(--gold);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--gold);
    transition: width 0.3s ease;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.mobile-nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 22px;
    cursor: pointer;
}

/* ==========================================================================
   3. HOME PAGE EXCLUSIVE SECTIONS
   ========================================================================== */
/* Hero Section */
.hero-section {
    position: relative;
    height: 85vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    padding: 0 5%;
    color: var(--white);
    background-color: var(--dark-blue);
    overflow: hidden;
    margin-top: 0;
}

.parallax-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(6, 22, 43, 0.85), rgba(10, 35, 66, 0.90)), 
                url('https://cdn.phototourl.com/member/2026-07-12-d31aa101-54c3-42ab-b213-1837074667d3.jpg') no-repeat center center/cover;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.hero-content h1 {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 18px;
}

.hero-content p {
    font-size: 18px;
    color: #CBD5E1;
    margin-bottom: 35px;
}

.hero-cta-group { 
    display: flex; 
    gap: 16px; 
}

/* Counters Area */
.counters-section {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 1200px;
    margin: -50px auto 0 auto;
}

.counters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: var(--heavy-shadow);
    overflow: hidden;
    border-bottom: 4px solid var(--gold);
}

.counter-card {
    padding: 35px 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #EDF2F7;
}

.counter-card:last-child { 
    border-right: none; 
}

.counter-icon-box { 
    font-size: 32px; 
    color: var(--gold); 
    margin-bottom: 12px; 
}

.counter-number-wrapper { 
    font-size: 36px; 
    font-weight: 700; 
    color: var(--navy); 
    margin-bottom: 6px; 
}

.counter-static { 
    font-size: 26px; 
}

.counter-label { 
    font-size: 13px; 
    color: var(--text-light); 
    text-transform: uppercase; 
    font-weight: 600; 
}

/* Why Choose Us */
.section-title-wrapper { 
    text-align: center; 
    margin-bottom: 55px; 
}

.section-title-wrapper h2 { 
    font-size: 32px; 
    color: var(--navy); 
    font-weight: 700; 
    position: relative; 
    display: inline-block; 
    padding-bottom: 14px; 
}

.section-title-wrapper h2::after { 
    content: ''; 
    position: absolute; 
    width: 50px; 
    height: 3px; 
    background-color: var(--gold); 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
}

.highlights-3d-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
    align-items: stretch; 
    perspective: 1000px; 
}

.tilt-card { 
    display: flex;
    flex-direction: column;
    height: 100%; 
    background-color: var(--white); 
    border-radius: 12px; 
    border: 1px solid #E2E8F0; 
    position: relative;
    top: 0;
    transform-style: preserve-3d; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

.tilt-card:hover { 
    transform: translateY(-10px) !important; 
    border-top: 3px solid #D6A017; 
    box-shadow: 0 20px 40px rgba(214, 160, 23, 0.12); 
}

.card-inner-space { 
    padding: 35px 25px; 
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    transform: translateZ(30px); 
}

.card-icon { 
    width: 65px; 
    height: 65px; 
    background-color: rgba(10, 35, 66, 0.04); 
    color: var(--navy); 
    font-size: 26px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 22px; 
    transition: var(--transition-smooth); 
}

.tilt-card:hover .card-icon { 
    background-color: var(--navy); 
    color: var(--gold); 
}

.tilt-card:hover .card-icon i {
    transform: rotate(15deg) scale(1.1); 
    color: #D6A017;
    transition: all 0.3s ease;
}

.tilt-card h3 { 
    font-size: 19px; 
    color: var(--navy); 
    margin-bottom: 12px; 
}

.tilt-card:hover h3 {
    color: #D6A017; 
    transition: color 0.3s ease;
}

.tilt-card p { 
    font-size: 14px; 
    color: var(--text-light); 
    line-height: 1.6; 
    margin-top: 15px;
    margin-bottom: 0;
    flex-grow: 1; 
}

@media (min-width: 1200px) {
    .grid-center-item-1 { grid-column: 2 / 3; }
    .grid-center-item-2 { grid-column: 3 / 4; }
}

/* Video Grid Area */
.video-section {
    background: linear-gradient(rgba(6, 22, 43, 0.92), rgba(10, 35, 66, 0.95)), 
                url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=1200') no-repeat center center/cover;
    background-attachment: fixed;
}

.section-title-wrapper.light-text h2 { color: var(--white); }

.glass-video-frame { 
    max-width: 860px; 
    margin: 0 auto; 
    background: var(--glass-panel); 
    backdrop-filter: blur(10px); 
    border: 1px solid var(--glass-border); 
    border-radius: 12px; 
    padding: 16px; 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); 
}

.video-mock-container { 
    position: relative; 
    width: 100%; 
    aspect-ratio: 16 / 9; 
    background: url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&q=80&w=1000') no-repeat center center/cover; 
    border-radius: 6px; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.video-overlay-tint { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(6, 22, 43, 0.35); 
    z-index: 1; 
}

.play-trigger-btn { 
    position: relative; 
    z-index: 2; 
    width: 75px; 
    height: 75px; 
    background-color: var(--gold); 
    border: none; 
    border-radius: 50%; 
    color: var(--navy); 
    font-size: 24px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding-left: 4px; 
    cursor: pointer; 
    animation: beaconPulse 2s infinite; 
}

@keyframes beaconPulse { 
    0% { box-shadow: 0 0 0 0 rgba(214, 160, 23, 0.6); } 
    70% { box-shadow: 0 0 0 18px rgba(214, 160, 23, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(214, 160, 23, 0); } 
}

.video-caption-text { 
    text-align: center; 
    margin-top: 22px; 
    color: #94A3B8; 
    font-size: 14px; 
    font-style: italic; 
}

/* Testimonials Carousel */
.carousel-viewport { 
    position: relative; 
    max-width: 820px; 
    margin: 0 auto; 
    overflow: hidden; 
    padding: 10px 0; 
}

.carousel-track { 
    display: flex; 
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
    will-change: transform; 
}

.testimonial-card { 
    min-width: 100%; 
    background-color: var(--white); 
    border-radius: 8px; 
    box-shadow: var(--soft-shadow); 
    padding: 45px; 
    position: relative; 
    transition: opacity 0.4s, transform 0.4s; 
    opacity: 0.4; 
    transform: scale(0.96); 
}

.testimonial-card.slide-active { 
    opacity: 1; 
    transform: scale(1); 
}

.structural-quote-icon { 
    position: absolute; 
    top: 35px; 
    right: 40px; 
    font-size: 36px; 
    color: rgba(214, 160, 23, 0.12); 
}

.review-quote-body { 
    font-size: 16px; 
    font-style: italic; 
    margin-bottom: 30px; 
    line-height: 1.7; 
}

.client-meta-row { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
}

.client-avatar { 
    width: 52px; 
    height: 52px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 2px solid var(--gold); 
}

.client-title-block h4 { 
    font-size: 15px; 
    color: var(--navy); 
    font-weight: 600; 
}

.location-tag { 
    display: block; 
    font-size: 12px; 
    color: var(--text-light); 
    margin-top: 2px; 
}

.location-tag i { 
    color: var(--gold); 
    margin-right: 4px; 
}

.carousel-nav-controls { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 20px; 
    margin-top: 35px; 
}

.nav-arrow-btn { 
    background-color: var(--white); 
    border: 1px solid #E2E8F0; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--navy); 
    cursor: pointer; 
    box-shadow: var(--soft-shadow); 
    transition: var(--transition-smooth); 
}

.nav-arrow-btn:hover { 
    background-color: var(--navy); 
    color: var(--gold); 
    border-color: var(--navy); 
}

.carousel-pagination-dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background-color: #CBD5E1; cursor: pointer; transition: var(--transition-smooth); }
.dot.dot-active { background-color: var(--gold); width: 20px; border-radius: 4px; }

/* Conversion CTA Panel */
.cta-conversion-banner { padding: 60px 5% 100px 5%; background-color: var(--light-bg); }
.cta-inner-panel { max-width: 1100px; margin: 0 auto; background: linear-gradient(135deg, var(--navy) 0%, var(--dark-blue) 100%); border-radius: 12px; padding: 60px 40px; text-align: center; color: var(--white); box-shadow: var(--heavy-shadow); }
.cta-inner-panel h2 { font-size: 32px; margin-bottom: 14px; }
.cta-inner-panel p { font-size: 16px; color: #94A3B8; max-width: 620px; margin: 0 auto 35px auto; }

/* ==========================================================================
   4. CONTACT PAGE EXCLUSIVE SECTIONS (FIXED FULL-WIDTH MOBILE SYSTEM)
   ========================================================================= */
.contact-hero { 
    position: relative; 
    padding: 80px 5%; 
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--navy) 100%); 
    color: var(--white); 
    text-align: center;
    width: 100% !important;        /* Fix: Hero will now cover 100% phone width */
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.hero-container {
    width: 100% !important;
    max-width: 800px;
    margin: 0 auto;
}

.hero-container h1 { 
    font-size: 38px; 
    font-weight: 700; 
    margin-bottom: 15px; 
}

.hero-container p { 
    color: #CBD5E1; 
    font-size: 16px; 
    line-height: 1.5;
}

/* Master Layout Framework Grid */
.contact-wrapper { 
    max-width: 1300px; 
    margin: 40px auto; 
    display: grid; 
    grid-template-columns: 1.3fr 1fr; 
    gap: 40px; 
    align-items: start; 
    padding: 0 24px;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Mobile adjustments inside Section 4 itself for stability */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr !important; /* Converts side-by-side to block grid */
        gap: 30px !important;
        padding: 0 20px !important;
    }
    
    .contact-hero {
        padding: 60px 20px !important;
    }
    
    .hero-container h1 {
        font-size: 30px !important;
    }
    
    .form-container {
        padding: 25px 20px !important; /* Extra breathing space inside phone forms */
    }
}

.form-container { 
    background: var(--glass-bg); 
    backdrop-filter: blur(8px); 
    border: 1px solid var(--form-border); 
    padding: 40px; 
    border-radius: 16px; 
    box-shadow: 0 20px 40px rgba(10, 35, 66, 0.04); 
}

.form-container h2 { font-size: 26px; color: var(--navy); margin-bottom: 10px; }
.form-sub { color: var(--text-light); font-size: 14px; margin-bottom: 30px; }
.form-row { display: flex; gap: 20px; }
.form-group { flex: 1; display: flex; flex-direction: column; margin-bottom: 22px; position: relative; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 8px; text-transform: uppercase; }
.form-group input, .form-group select, .form-group textarea { padding: 12px 16px; border: 1px solid #CBD5E1; border-radius: 6px; font-size: 15px; background-color: var(--white); transition: all 0.3s; width: 100%; box-sizing: border-box; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214, 160, 23, 0.15); }

.form-group.invalid input, .form-group.invalid select, .form-group.invalid textarea { border-color: var(--error-color); }
.error-msg { color: var(--error-color); font-size: 12px; margin-top: 5px; display: none; }
.form-group.invalid .error-msg { display: block; }
.success-banner { background-color: #DCFCE7; color: #15803D; padding: 15px; border-radius: 6px; margin-top: 20px; text-align: center; border: 1px solid #BBF7D0; font-weight: 500; }

.details-container { display: flex; flex-direction: column; gap: 25px; }
.info-card { background: var(--white); padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); transition: transform 0.4s ease, box-shadow 0.4s; }
.info-card:hover { transform: translateY(-5px); box-shadow: var(--heavy-shadow); }
.info-icon { width: 50px; height: 50px; background: rgba(10, 35, 66, 0.05); color: var(--navy); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 20px; }
.info-card h3 { font-size: 18px; color: var(--navy); margin-bottom: 12px; }
.info-card p { color: var(--text-light); font-size: 15px; line-height: 1.6; }
.info-card .hours { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; font-size: 13px; color: var(--gold); font-weight: 500; }

.map-placeholder { width: 100%; margin: 0 auto 80px auto; height: 350px; background: #E2E8F0; border: 2px dashed #CBD5E1; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-light); text-align: center; }
.map-placeholder i { font-size: 45px; color: #94A3B8; margin-bottom: 15px; }
/* ==========================================================================
   4A. REQ-A-QUOTE PREMIUM MODIFICATIONS (INTEGRATED ADD-ON)
   ========================================================================== */
.quote-section {
    position: relative;
    padding: 100px 0 !important; /* Improvement 1: Premium breathing space */
    /* Improvement 5: High Quality Manufacturing Plant Image with Deep Dark Blue Overlay */
    background: linear-gradient(rgba(6, 20, 45, 0.78), rgba(6, 20, 45, 0.78)), 
                url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&q=80&w=1800') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Desktop Parallax smooth motion */
    width: 100%;
    overflow: hidden;
}

/* Improvement 10: Engineering Blueprint Lines Overlay */
.industrial-grid-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 1;
    pointer-events: none;
}

.quote-card-wrapper {
    position: relative;
    z-index: 5;
    max-width: 950px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* Improvement 2: Corporate Ultra-Luxury Glassmorphism Card Base */
.quote-card {
    background: rgba(21, 40, 67, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px;
    padding: 55px 50px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4), 
                inset 0 1px 2px rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    width: 100%;
}

/* Improvement 9: Realigned Corporate Typography Headlines */
.quote-card h2 {
    font-size: 32px;
    color: var(--white) !important;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.quote-subtitle {
    font-size: 15px;
    color: #CBD5E1;
    line-height: 1.6;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px auto;
}

/* Form Layout Grid Framework */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.form-group-full {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 30px;
}

.quote-card .form-group label, 
.form-group-full label {
    font-size: 12px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* Improvement 4: Input Form Boxes Transitions & Focus State Glow Aura */
.quote-card .form-group input, 
.quote-card .form-group select, 
.form-group-full textarea {
    padding: 14px 18px;
    background: rgba(6, 15, 30, 0.6) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px;
    color: var(--white) !important;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.quote-card .form-group select option {
    background-color: #152843;
    color: var(--white);
}

/* Golden Matrix Input Glow Interactions */
.quote-card .form-group input:focus, 
.quote-card .form-group select:focus, 
.form-group-full textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 4px rgba(214, 160, 23, 0.18),
                inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    background: rgba(6, 15, 30, 0.8) !important;
}

/* Improvement 3: Premium Gold to Corporate Dark Gold Hover Action Submit Button */
.btn-submit {
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, #D4A017 0%, #B38310 100%);
    color: var(--navy);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(214, 160, 23, 0.2);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn-submit:hover {
    background: linear-gradient(135deg, #B38310 0%, #8C6407 100%);
    color: var(--white);
    transform: translateY(-3px); /* Lifts exactly 3px */
    box-shadow: 0 12px 28px rgba(179, 131, 16, 0.4); /* Deeper industrial shadow drop */
}

/* Improvement 8: 4-Column Micro Trust System Badges Directly Below Form */
.form-trust-footer-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
}

.trust-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 500;
}

.trust-pill i {
    color: var(--gold);
    font-size: 14px;
}

/* Improvement 7: ISO Global Corporate Verification Strip for Footer Integration */
.footer-trust-strip {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 40px;
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
}

.footer-trust-strip span i {
    color: var(--gold);
    margin-right: 8px;
}

/* ==========================================================================
   MOBILE ECOSYSTEM REPAIR OVERRIDES (APPENDED IN BULLET 3 INTEGRATION)
   ========================================================================== */
@media (max-width: 768px) {
    .quote-section {
        padding: 60px 0 !important;
        background-attachment: scroll !important; /* Optimizes performance on touch devices */
    }
    .quote-card {
        padding: 35px 20px !important;
        border-radius: 18px;
    }
    .quote-card h2 {
        font-size: 24px;
    }
    .quote-subtitle {
        font-size: 14px;
        margin-bottom: 30px;
    }
    .form-grid {
        grid-template-columns: 1fr !important; /* Collapses to 1-column on smartphones safely */
        gap: 18px;
    }
    .form-trust-footer-badges {
        grid-template-columns: repeat(2, 1fr) !important; /* Wraps clean to 2x2 grid on mobile layout */
        gap: 16px 12px;
    }
    .trust-pill {
        font-size: 12px;
        justify-content: flex-start;
    }
    .footer-trust-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-left: 10px;
    }
}

/* ==========================================================================
   5. ABOUT PAGE TIMELINE EXTENSION STYLES
   ========================================================================== */
.timeline-wrapper { position: relative; max-width: 900px; margin: 0 auto; padding: 20px 0; }
.timeline-wrapper::before { content: ''; position: absolute; width: 4px; background-color: var(--navy); top: 0; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0.1; }
.timeline-item { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 40px; position: relative; }
.timeline-item:nth-child(even) { flex-direction: row-reverse; }
.timeline-year { width: 45%; text-align: right; font-size: 28px; font-weight: 700; color: var(--gold); padding: 0 30px; }
.timeline-item:nth-child(even) .timeline-year { text-align: left; }
.timeline-content { width: 45%; background-color: var(--white); padding: 30px; border-radius: 8px; box-shadow: var(--soft-shadow); border-left: 4px solid var(--navy); }
.timeline-item:nth-child(even) .timeline-content { border-left: none; border-right: 4px solid var(--navy); }
.timeline-content h4 { font-size: 18px; color: var(--navy); margin-bottom: 8px; }
.timeline-content p { font-size: 14px; color: var(--text-light); line-height: 1.6; }

/* ==========================================================================
   6. FIXED SHARED GLOBAL FOOTER SYSTEM
   ========================================================================== */
.main-footer { background-color: var(--dark-blue); color: #94A3B8; border-top: 3px solid var(--gold); padding: 75px 5% 25px 5%; }
.footer-grid-wrapper { max-width: 1200px; margin: 0 auto 50px auto; display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 50px; }
.footer-column h4 { color: var(--white); font-size: 16px; font-weight: 600; margin-bottom: 22px; position: relative; padding-bottom: 8px; }
.footer-column h4::after { content: ''; position: absolute; width: 25px; height: 2px; background-color: var(--gold); bottom: 0; left: 0; }
.footer-desc { font-size: 14px; margin-top: 15px; }
.social-links-row { display: flex; gap: 12px; margin-top: 20px; }
.social-links-row a { width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.04); color: var(--white); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: var(--transition-smooth); }
.social-links-row a:hover { background-color: var(--gold); color: var(--navy); transform: translateY(-2px); }
.contact-nav-links ul { list-style: none; }
.contact-nav-links ul li { margin-bottom: 12px; }
.contact-nav-links ul li a { color: #94A3B8; text-decoration: none; font-size: 14px; }
.contact-nav-links ul li a:hover { color: var(--gold); }
.footer-address-block { font-style: normal; display: flex; flex-direction: column; gap: 14px; }
.address-item { display: flex; gap: 12px; font-size: 14px; }
.address-item i { color: var(--gold); margin-top: 4px; }
.email-links a { display: block; color: #94A3B8; text-decoration: none; }
.email-links a:hover { color: var(--gold); }
.footer-legal-bar { max-width: 1200px; margin: 0 auto; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.05); text-align: center; font-size: 13px; }

/* ==========================================================================
   7. UNIVERSAL RESPONSIVE MEDIA BREAKPOINTS (UNIFIED DESKTOP & MOBILE ONLY)
   ========================================================================== */

/* 1. Laptops & Large Screens: Yahan hamesha text menu dikhega, 3 lines strictly hidden rahengi */
@media (min-width: 769px) {
    .mobile-nav-toggle, 
    header .mobile-nav-toggle, 
    .sticky-header .mobile-nav-toggle {
        display: none !important; /* Kisi bhi desktop/laptop window par 3 lines nahi dikhengi */
    }
    
    .nav-menu {
        display: block !important; /* Saare names samne row mein dikhenge */
    }
    
    .nav-menu ul {
        display: flex !important;
        flex-direction: row !important;
        gap: 28px !important;
        align-items: center !important;
    }
}

/* 2. Tablets Layout Adjustments */
@media (max-width: 1199px) and (min-width: 769px) {
    .highlights-3d-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 20px !important;
    }
    .grid-center-item-1, .grid-center-item-2 { grid-column: auto !important; }
}

/* 3. Pure Mobile Phones ONLY (Yahan se real 3 lines strictly active hongi) */
@media (max-width: 768px) {
    .mobile-nav-toggle { 
        display: block !important; /* Sirf smartphones par 3 lines dikhengi */
    }
    
    .nav-menu { 
        display: none !important; 
        position: absolute; 
        top: 100%; 
        left: 0; 
        width: 100%; 
        background-color: var(--navy); 
        padding: 20px; 
        box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
        z-index: 999;
    }
    
    /* JavaScript toggle menu open class */
    .nav-menu.menu-open { 
        display: block !important; 
    }
    
    .nav-menu ul { 
        flex-direction: column !important; 
        gap: 16px !important; 
        text-align: center !important; 
    }
    
    .nav-link::after { 
        display: none !important; 
    }
    
    /* Mobile Hero Center Utilities */
    .hero-section { 
        height: auto !important; 
        min-height: 80vh !important; 
        padding: 80px 20px !important; 
        text-align: center !important; 
    }
    
    .hero-content h1 { 
        font-size: 32px !important; 
        line-height: 1.3 !important;
    }
    
    .hero-content p { 
        font-size: 15px !important; 
    }
    
    .hero-cta-group { 
        flex-direction: column !important; 
        max-width: 280px !important; 
        margin: 0 auto !important; 
        gap: 12px !important;
    }
    
    .hero-cta-group .btn {
        width: 100% !important;
    }

    /* Counters Grid Reset on Mobile */
    .counters-section {
        width: 92% !important;
        margin: -40px auto 0 auto !important;
    }

    .counters-grid {
        grid-template-columns: 1fr !important;
    }

    .counter-card {
        border-right: none !important;
        border-bottom: 1px solid #EDF2F7 !important;
        padding: 25px 15px !important;
    }

    .counter-card:last-child {
        border-bottom: none !important;
    }

    /* "Why Choose Us" Grid Repair */
    .highlights-3d-grid { 
        grid-template-columns: 1fr !important; 
        gap: 20px !important;
        perspective: none !important;
    }

    .tilt-card {
        transform: none !important;
        top: 0 !important;
    }

    .tilt-card:hover {
        transform: translateY(-5px) !important;
    }
    
    .grid-center-item-1, .grid-center-item-2 { 
        grid-column: auto !important; 
    }

    /* Footer & Grid Component Fixes */
    .footer-grid-wrapper { 
        grid-template-columns: 1fr !important; 
        gap: 30px !important; 
    }
    
    .form-row { 
        flex-direction: column !important; 
        gap: 12px !important; 
    }
    
    /* Timeline Mobile Adjustments */
    .timeline-wrapper::before { left: 20px; }
    .timeline-item, .timeline-item:nth-child(even) { flex-direction: column; align-items: flex-start; gap: 10px; }
    .timeline-year, .timeline-item:nth-child(even) .timeline-year { width: 100%; text-align: left; padding-left: 45px; font-size: 22px; }
    .timeline-content, .timeline-item:nth-child(even) .timeline-content { width: 100%; margin-left: 45px; border-left: 4px solid var(--navy); border-right: none; }
}

/* Super Small Displays (Under 480px) */
@media (max-width: 480px) {
    .section-title-wrapper h2 { font-size: 26px !important; }
    .testimonial-card { padding: 25px !important; }
    .structural-quote-icon { top: 15px; right: 20px; font-size: 28px; }
}
/* ==========================================================================
   FLOATING REQUEST A QUOTE BUTTON SYSTEM (PREMIUM UTILITY)
   ========================================================================== */
.floating-quote-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    /* Aapki zaroorat ke mutabiq single clean styling */
    background: linear-gradient(135deg, #D4A017 0%, #B38310 100%); /* Gold Luxury Gradient */
    color: #0A2342 !important; /* Navy Dark Text */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 50px; /* Capsule Shape */
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 25px rgba(214, 160, 23, 0.4);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.floating-quote-btn i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* Hover State: Corporate Premium Shift & Lift */
.floating-quote-btn:hover {
    background: linear-gradient(135deg, #B38310 0%, #8C6407 100%); /* Dark Gold */
    color: #FFFFFF !important;
    transform: translateY(-5px) scale(1.03); /* Chhota sa premium lift bounce */
    box-shadow: 0 15px 35px rgba(179, 131, 16, 0.5);
}

.floating-quote-btn:hover i {
    transform: rotate(15deg) scale(1.1); /* Icon animation */
}

/* ==========================================================================
   MOBILE RESPONSIVE ADJUSTMENT FOR FLOATING BUTTON
   ========================================================================== */
@media (max-width: 768px) {
    .floating-quote-btn {
        bottom: 20px;
        right: 20px;
        padding: 12px 16px; /* Mobile par thoda compact design */
        font-size: 13px;
        box-shadow: 0 8px 20px rgba(214, 160, 23, 0.3);
    }
    
    /* Optional: Agar thumb space kam pade mobile par, toh aap span ko hide karke 
       sirf gold icon round button bhi bana sakte hain (uncomment niche wala code agar sirf icon chahiye mobile par): */
    /* 
    .floating-quote-btn span { display: none; }
    .floating-quote-btn { padding: 14px; border-radius: 50%; } 
    */
}
/* Floating Request Quote Button */
.floating-quote-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    background-color: var(--gold);
    color: var(--navy);
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.floating-quote-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(214, 160, 23, 0.4);
    background-color: var(--white);
    color: var(--navy);
}

/* मोबाइल के लिए छोटा साइज */
@media (max-width: 768px) {
    .floating-quote-btn {
        bottom: 20px;
        right: 20px;
        padding: 12px 20px;
        font-size: 13px;
    }
}
/* ==========================================================================
   8. REMOVE AGGRESSIVE TILT & ADD SUBTLE ZOOM (FIXES ENQUIRE NOW CLICK)
   ========================================================================== */
/* 1. Heavy 3D perspective को पूरी तरह बंद करें */
.highlights-3d-grid {
    perspective: none !important;
}

/* 2. Card के 3D इफ़ेक्ट को फ्लैट करें और ट्रांज़िशन को स्मूथ बनाएं */
.tilt-card {
    transform: scale(1) !important;
    transform-style: flat !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-top 0.25s ease !important;
    top: 0 !important;
}

/* 3. अंदर के एलिमेंट्स (जैसे बटन/टेक्स्ट) को अपनी जगह पर स्थिर रखें ताकि कर्सर न भटके */
.card-inner-space {
    transform: none !important;
}

/* 4. होवर (Hover) करने पर सिर्फ हल्का सा साफ़-सुथरा ज़ूम इफ़ेक्ट (No lifting/shaking) */
.tilt-card:hover {
    transform: scale(1.03) !important; /* सिर्फ 3% हल्का सा ज़ूम */
    border-top: 3px solid #D4A017 !important;
    box-shadow: 0 12px 25px rgba(10, 35, 66, 0.08) !important;
}

/* 5. आइकॉन का घूमना और टिल्ट होना भी बंद करें */
.tilt-card:hover .card-icon i {
    transform: none !important;
}

/* 6. सुनिश्चित करें कि बटन हमेशा क्लिक करने के लिए पूरी तरह रेडी रहे */
.tilt-card .btn-primary {
    position: relative;
    z-index: 15;
}