html, body {
    overflow-x: hidden; 
    width: 100%;
    /* Soni Scroll Button ke liye auto karna zaroori hai */
    scroll-behavior: auto; 
}
/* Header ko lock karne ke liye */
.fixed-top-menu {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 99999;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Header ke niche content na chhupa rahe */
body { 
    padding-top: 115px; /* Isse content header ke niche nahi jayega */
}

/* Blur Overlay */
.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
    z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.3s;
}
.menu-overlay.active { opacity: 1; visibility: visible; }
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Plus Jakarta Sans', 'Segoe UI', Tahoma, sans-serif; 
}

body {
    background-color: #ffffff; 
    color: #0f172a;
    display: flex; 
    flex-direction: column; 
    min-height: 100vh;
    padding-top: 90px !important; /* Space for locked header */
    animation: fadeInPage 0.6s ease-in forwards;
}

/* 🔥 FIX: Animation without transform allows header to lock perfectly 🔥 */
@keyframes fadeInPage { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
}

body.fade-out { 
    opacity: 0; 
    transition: opacity 0.4s ease-in-out; 
}

.no-scroll { 
    overflow: hidden !important; 
    touch-action: none !important; 
}

/* =========================================
   2. 100% LOCKED HEADER & NAVIGATION
   ========================================= */
header.master-header, header {
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important;
    background-color: rgba(255, 255, 255, 0.98) !important; 
    backdrop-filter: blur(20px) !important;
    padding: 15px 40px !important; 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important; 
    z-index: 9999999 !important; 
    box-shadow: 0 4px 30px rgba(0,0,0,0.08) !important;
    height: 90px !important; 
    border-bottom: 2px solid rgba(0,43,66,0.05) !important;
}

.logo { display: flex; align-items: center; }
.site-logo { height: auto; max-height: 65px; width: 100%; max-width: 350px; object-fit: contain; }

nav ul { list-style: none; display: flex; align-items: center; margin: 0; }
nav ul li { margin-left: 35px; }
nav ul li a { 
    text-decoration: none; color: #002b42; font-weight: 800; font-size: 16px; 
    text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.3s ease; 
}
nav ul li a:hover, nav ul li a.active { color: #ff9800; }

.menu-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 100000; }
.menu-toggle .bar { height: 4px; width: 35px; background-color: #002b42; border-radius: 5px; transition: all 0.3s ease-in-out; }
.menu-toggle.is-active .bar:nth-child(1) { transform: translateY(10px) rotate(45deg); background-color: #ff9800; }
.menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); background-color: #ff9800; }

.menu-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 
    background: rgba(0, 31, 48, 0.8); backdrop-filter: blur(5px); z-index: 990; 
    visibility: hidden; opacity: 0; transition: all 0.3s ease; cursor: pointer; 
}
.menu-overlay.active { visibility: visible; opacity: 1; }

/* =========================================
   3. GLOBAL DGP COLORS & BRANDING
   ========================================= */
.dgp-brand-text, .dgp-text-logo { display: inline-block; font-weight: 900; letter-spacing: -0.5px; }
.logo-d { background: linear-gradient(to right, #0047AB, #00d4ff); background-clip: text; color: transparent; }
.logo-g { background: linear-gradient(to right, #ffaa00, #ff0055); background-clip: text; color: transparent; }
.logo-p { background: linear-gradient(to right, #5b00a3, #b800ff); background-clip: text; color: transparent; }
.text-network { background: linear-gradient(90deg, #0033cc, #00aaff, #00cc44, #ffcc00, #ff3300, #cc0099, #6600cc); background-clip: text; color: transparent; font-weight: 900; }

/* =========================================
   4. LAYOUT UTILITIES & GRIDS
   ========================================= */
.section-padding { padding: 100px 20px; }
.container, .container-fluid { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 10px; font-weight: 800; font-size: 16px; padding: 18px 45px; text-transform: uppercase; transition: all 0.4s ease; cursor: pointer; border: none; }
.btn-primary { background: linear-gradient(135deg, #ff9800, #e65c00); color: #fff !important; box-shadow: 0 10px 20px rgba(255, 152, 0, 0.3); }
.btn-primary:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(255, 152, 0, 0.5) !important; background: #e08600; }
.btn-outline { background: transparent; border: 2px solid #002b42 !important; color: #002b42 !important; }
.btn-outline:hover { background: #002b42; color: #fff !important; transform: translateY(-5px); }

/* =========================================
   5. ALL CARDS (HOME, ABOUT, SERVICES, PROJECTS)
   ========================================= */
.card { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 43, 66, 0.05); border: 1px solid rgba(0, 43, 66, 0.03); transition: all 0.4s ease; }
.card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0, 43, 66, 0.12); }

.glass-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; transition: all 0.4s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.glass-card:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }

/* Home Page Cards */
.uniform-card { background: #fff; border-radius: 16px; padding: 40px 25px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.06); transition: all 0.4s ease; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid rgba(0,0,0,0.03); border-top: 6px solid #ff9800; }
.uniform-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.12); }
.read-more-link { margin-top: 25px; display: inline-flex; align-items: center; justify-content: center; color: #ff9800; font-weight: 800; font-size: 15px; text-decoration: none; transition: 0.3s; background: #fff7ed; padding: 12px; border-radius: 8px; }
.uniform-card:hover .read-more-link { background: #ff9800; color: #fff; gap: 8px; }

/* Services Page CSS */
.matrix-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(0, 43, 66, 0.08); border-radius: 24px; padding: 55px 45px; display: flex; flex-direction: column; justify-content: space-between; position: relative; transition: all 0.5s ease; box-shadow: 0 10px 40px rgba(0, 43, 66, 0.02); }
.matrix-card:hover { transform: translateY(-15px); box-shadow: 0 40px 70px rgba(0, 43, 66, 0.12); border-color: rgba(255, 152, 0, 0.25); }
.icon-pillar { width: 70px; height: 75px; background: #f4f7f6; border-radius: 16px; display: flex; justify-content: center; align-items: center; font-size: 34px; margin-bottom: 35px; transition: all 0.4s ease; }

/* About Page CSS */
.exec-card { padding: 30px 20px; background: #fff; text-align: center; border-top: 6px solid #002b42; border-radius: 16px; transition: 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.exec-card:nth-child(odd) { border-top-color: #ff9800; }
.exec-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
/* 🔥 EXECUTIVE PHOTOS IN ROUND FRAME 🔥 */
.exec-photo { 
    width: 120px !important; 
    height: 120px !important; 
    object-fit: cover !important; 
    border-radius: 50% !important; /* Yeh photo ko gol (round) karega */
    margin: 0 auto 15px auto !important; 
    display: block !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important; 
    border: 3px solid #ff9800 !important; /* Ek premium orange border */
}

/* Projects Page CSS */
.industry-card { background: #fff; border-radius: 24px; padding: 50px; box-shadow: 0 15px 40px rgba(0, 43, 66, 0.04); border: 1px solid rgba(0, 43, 66, 0.03); transition: all 0.5s ease; }
.industry-card:hover { transform: translateY(-15px); box-shadow: 0 30px 70px rgba(0, 43, 66, 0.12); border-color: rgba(255, 152, 0, 0.3); }

/* =========================================
   6. CONTACT FORM & INFO CARDS
   ========================================= */
.luxe-info-card { background: #fff; border-radius: 20px; padding: 45px; box-shadow: 0 15px 35px rgba(0, 43, 66, 0.04); transition: all 0.4s ease; border: 1px solid rgba(0,0,0,0.02); }
.luxe-info-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0, 43, 66, 0.1); }
.luxe-form-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 24px; padding: 55px; box-shadow: 0 20px 60px rgba(0, 43, 66, 0.06); border: 1px solid rgba(0, 43, 66, 0.05); }
.contact-form input, .contact-form textarea { background: #f1f5f9; border: 2px solid transparent; border-radius: 12px; padding: 18px 22px; font-size: 16px; color: #0f172a; width: 100%; margin-bottom: 24px; transition: all 0.3s; }
.contact-form input:focus, .contact-form textarea:focus { background: #fff; border-color: #ff9800; outline: none; box-shadow: 0 10px 25px rgba(255, 152, 0, 0.15); }
.btn-luxe-submit { background: linear-gradient(135deg, #002b42, #001524); color: #fff; font-size: 20px; font-weight: 800; padding: 20px; border: none; border-radius: 12px; width: 100%; cursor: pointer; transition: all 0.4s ease; text-transform: uppercase; }
.btn-luxe-submit:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(255, 152, 0, 0.35); background: linear-gradient(135deg, #ff9800, #e65c00); }

/* =========================================
   7. PERMANENT FAST BACK TO TOP BUTTON
   ========================================= */
#backToTop {
    position: fixed !important; bottom: 30px !important; right: 30px !important; width: 65px !important; height: 65px !important;
    background: linear-gradient(135deg, #ff9800, #ff0055) !important; color: #fff !important; border: 4px solid #fff !important; 
    border-radius: 50% !important; font-size: 30px !important; font-weight: 900 !important; cursor: pointer !important; 
    display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    z-index: 9999999 !important; transition: all 0.3s ease !important;
}
#backToTop:hover { transform: scale(1.15) translateY(-5px) !important; background: #002b42 !important; border-color: #002b42 !important; }

/* =========================================
   🚨 ULTRA-COMPACT MOBILE RESPONSIVE 🚨
   ========================================= */
@media (max-width: 992px) {
    header.master-header, header { padding: 15px 20px !important; height: 80px !important; }
    .site-logo { max-width: 200px; max-height: 45px; }
    body { padding-top: 80px !important; }
    
    .nav-links { display: none; }
    .menu-toggle { display: flex !important; position: absolute !important; right: 20px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 1005 !important; }
    
    nav ul {
        flex-direction: column; justify-content: flex-start; align-items: flex-start;
        position: fixed; top: 80px; right: 0; transform: translateX(100%);
        width: 100%; height: calc(100vh - 80px); background-color: #fff;
        padding-top: 30px; padding-left: 35px; transition: transform 0.4s ease;
        box-shadow: -10px 0 30px rgba(0,0,0,0.1); z-index: 1001; display: flex;
    }
    nav ul.active { transform: translateX(0); }
    nav ul li { margin: 15px 0; width: 100%; text-align: left; }
    nav ul li a { font-size: 18px; color: #002b42; display: inline-block; padding: 10px 0; }
}

@media (max-width: 768px) {
    /* 1. Global Sections Padding Reduction */
.site-logo { 
        max-width: 260px !important;  
        max-height: 80px !important;  
        margin-left: -5px !important; 
    }

    .section-padding { padding: 45px 15px !important; }
    
    /* 2. Responsive Typography (Words scaling down naturally) */
    h1, .txt-hero, .hero-title-luxe { font-size: 26px !important; line-height: 1.2 !important; margin-bottom: 10px !important; }
    h2, .section-title { font-size: 22px !important; margin-bottom: 25px !important; }
    h3, .hero-sub, .exec-name { font-size: 16px !important; margin-bottom: 8px !important; }
    p, .hero-desc, .industry-desc { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
    ul li { font-size: 13px !important; margin-bottom: 8px !important; }

    /* =========================================
       🔥 MOBILE GRIDS (EXACTLY 3x2 & 2x2) 🔥
       ========================================= */
    /* 6 Boxes -> 3 Columns x 2 Rows = 3x2 Grid */
    .services-6-grid { 
        display: grid !important; 
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 8px !important; 
    }
    /* 4 Boxes -> 2 Columns x 2 Rows = 2x2 Grid */
    .sectors-4-grid { 
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important; 
    }
    
    /* Compact Card Styling for Grid Fit */
    .uniform-card { padding: 15px 6px !important; border-radius: 10px !important; min-width: unset !important; width: 100% !important; }
    .sector-card { padding: 15px 10px !important; border-radius: 12px !important; min-width: unset !important; width: 100% !important; }
    .matrix-card, .industry-card { padding: 20px 15px !important; border-radius: 16px !important; }
    
    /* VERY small icons and text so columns fit without breaking screen */
    .service-icon, .icon-pillar { font-size: 22px !important; margin-bottom: 6px !important; height: auto !important; width: auto !important; }
    .uniform-card h3 { font-size: 11px !important; margin-bottom: 5px !important; line-height: 1.2 !important; }
    .sector-card h3 { font-size: 13px !important; }
    
    /* Hide descriptions in grids to make them look like sharp app buttons */
    .uniform-card p, .sector-card p, .matrix-card p { display: none !important; } 
    
    .read-more-link { font-size: 10px !important; padding: 5px !important; margin-top: 6px !important; border-radius: 4px !important; }

    /* General Layout Grids */
    .grid-2, .grid-3 { display: flex !important; flex-direction: column !important; gap: 15px !important; }
    /* 🔥 MOBILE PAR EK HI LINE (1 COLUMN) MEIN KARNE KE LIYE 🔥 */
    .exec-row { 
        display: grid !important; 
        grid-template-columns: 1fr !important; /* Pehle 'repeat(2, 1fr)' tha, usko 1fr kar diya */
        gap: 20px !important; 
    }

    /* Timeline Optimization */
    .timeline-container { padding-left: 20px !important; margin-left: 5px !important; border-left-width: 2px !important; }
    .timeline-dot { left: -28px !important; width: 14px !important; height: 14px !important; top: 20px !important; border-width: 2px !important; }
    .timeline-content { padding: 15px 12px !important; }

    /* Stats & Brands */
    .stats-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .stat-number { font-size: 24px !important; }
    .brand-item { width: 90px !important; padding: 0 5px !important; }
    .brand-item img { max-width: 60px !important; }

    /* Buttons & Form */
    .btn, .btn-luxe-submit, .btn-industry { width: 100% !important; padding: 12px !important; font-size: 13px !important; text-align: center !important; }
    .luxe-form-card, .luxe-info-card { padding: 20px 15px !important; }
    .contact-form input, .contact-form textarea { padding: 10px 12px !important; font-size: 13px !important; margin-bottom: 12px !important; }

    /* Back To Top Shrink */
    #backToTop { width: 45px !important; height: 45px !important; bottom: 15px !important; right: 15px !important; font-size: 20px !important; border-width: 2px !important; }
}/* 🔥 MOBILE DIRECTORS: 3 IN 1 ROW (SABSE NEECHE PASTE KAREIN) 🔥 */
@media (max-width: 768px) {
    .exec-row { 
        display: grid !important; 
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 8px !important; 
    }
    .exec-card { 
        padding: 15px 5px !important; 
        border-radius: 12px !important; 
    }
    .exec-photo { 
        width: 70px !important; 
        height: 70px !important; 
        border-width: 2px !important; 
        margin-bottom: 8px !important; 
    }
    .exec-name { 
        font-size: 12px !important; 
        margin-bottom: 4px !important; 
        line-height: 1.2 !important; 
    }
    .exec-title { 
        font-size: 9px !important; 
    }
}
/* 🔥 EXECUTIVE LEADERSHIP: 3 LOG 1 HI BOX MEIN & 1 HI LINE (ROW) MEIN 🔥 */
    .exec-row { 
        display: flex !important; 
        flex-direction: row !important; /* 🔥 ASLI FIX: Isse teeno ek line (left-to-right) mein aayenge 🔥 */
        flex-wrap: nowrap !important; /* Isse koi box neeche nahi girega */
        justify-content: center !important; 
        align-items: flex-start !important;
        background: #fff !important; 
        padding: 20px 5px !important; 
        border-radius: 16px !important; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; 
        border-top: 5px solid #ff9800 !important;
        gap: 5px !important;
    }
    
    .exec-card { 
        background: transparent !important; 
        box-shadow: none !important; 
        border: none !important; 
        padding: 0 !important; 
        width: 32% !important; /* Ek screen ko 3 barabar hisso mein baant dega */
        flex: 0 0 32% !important;
    }
    
    .exec-photo { 
        width: 65px !important; /* Photo thodi choti ki taaki 3 line mein fit ho sakein */
        height: 65px !important; 
        border-radius: 50% !important; 
        border: 2px solid #002b42 !important; 
        margin: 0 auto 8px auto !important; 
        display: block !important;
    }
    
    .exec-name { 
        font-size: 11px !important; 
        margin-bottom: 2px !important; 
        line-height: 1.2 !important; 
        text-align: center !important;
    }
    
    .exec-title { 
        font-size: 9px !important; 
        text-align: center !important;
        display: block !important;
    }
    /* 🔥 MOBILE MENU FIX (SLIDE-IN ANIMATION) 🔥 */
@media (max-width: 992px) {
    nav ul.nav-links {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 80px !important; /* Locked header ke theek neeche */
        right: 0 !important;
        width: 260px !important;
        height: calc(100vh - 80px) !important;
        background-color: #ffffff !important; /* White premium background */
        padding: 40px 30px !important;
        box-shadow: -10px 0 30px rgba(0,0,0,0.15) !important;
        transform: translateX(100%) !important; /* Starting mein screen ke bahar chhipa rahega */
        transition: transform 0.4s cubic-bezier(0.2, 1, 0.2, 1) !important; /* Smooth sliding */
        z-index: 1001 !important;
        align-items: flex-start !important;
    }
    
    /* Jab JS 'active' class lagayega, tab slide hoke andar aayega */
    nav ul.nav-links.active {
        transform: translateX(0) !important; 
    }
    
    nav ul.nav-links li {
        margin: 15px 0 !important;
        width: 100% !important;
    }
    
    nav ul.nav-links li a {
        font-size: 20px !important;
        color: #002b42 !important;
        font-weight: 800 !important;
        display: block !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    }
}
/* 🔥 PREMIUM GLASSMORPHISM MOBILE MENU (SLIM & COMPACT) 🔥 */
@media (max-width: 992px) {
    nav ul.nav-links {
        background-color: rgba(0, 31, 48, 0.85) !important; 
        backdrop-filter: blur(15px) !important; 
        -webkit-backdrop-filter: blur(15px) !important; 
        z-index: 99999999 !important; 
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 80px !important; 
        right: 0 !important;
        
        /* 🔥 FIX 1: Width kam ki (Pehle 280px thi, ab 200px kar di) 🔥 */
        width: 200px !important; 
        height: calc(100vh - 80px) !important;
        
        /* 🔥 FIX 2: Box ki extra padding kam ki 🔥 */
        padding: 25px 20px !important; 
        box-shadow: -10px 0 30px rgba(0,0,0,0.5) !important;
        transform: translateX(100%) !important; 
        transition: transform 0.4s cubic-bezier(0.2, 1, 0.2, 1) !important; 
        align-items: flex-start !important;
    }
    
    nav ul.nav-links.active {
        transform: translateX(0) !important; 
    }
    
    nav ul.nav-links li {
        /* 🔥 FIX 3: Options ke beech ka space kam kiya (Pehle 15px tha) 🔥 */
        margin: 8px 0 !important; 
        width: 100% !important;
    }
    
    nav ul.nav-links li a {
        /* 🔥 FIX 4: Words chhote kiye (Pehle 20px the, ab 15px kiye) 🔥 */
        font-size: 15px !important; 
        color: #ffffff !important; 
        font-weight: 800 !important;
        display: block !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; 
    }

    nav ul.nav-links li a:hover {
        color: #ff9800 !important;
    }
}

/* 🔥 3. JAB MENU KHULA HO TOH 'UPAR JANE WALA BUTTON' GAYAB KARNA 🔥 */
body:has(nav ul.nav-links.active) #backToTop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
/* 🔥 MOBILE HERO SLIDER HEIGHT REDUCTION 🔥 */
@media (max-width: 768px) {
    .hero-slider { 
        height: 45vh !important;       /* Screen ka sirf 45% hissa lega */
        min-height: 320px !important;  /* Lambaai 500px se ghatakar 320px kar di */
    }
    
    /* Arrows thode chhote kiye taaki jagah na khayen */
    .slider-arrow { 
        width: 35px !important; 
        height: 35px !important; 
        font-size: 14px !important; 
    }
    .prev-btn { left: 10px !important; }
    .next-btn { right: 10px !important; }
    
    /* Dots ko thoda aur neeche aur chhota kiya */
    .slider-dots { 
        bottom: 15px !important; 
    }
    .dot { 
        width: 10px !important; 
        height: 10px !important; 
    }
}
body { 
    padding-top: 135px !important; 
}

/* Yeh wrapper (Header + Breadcrumb) dono ko top par lock karega */
.fixed-top-menu { 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    width: 100% !important; 
    z-index: 999999 !important; 
    background: #fff !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; 
    display: block !important;
}

/* Header ko apni jagah rakhne ke liye */
header.master-header, .master-header { 
    position: relative !important; 
    display: flex !important; 
    width: 100% !important; 
    z-index: 10 !important;
}

/* Breadcrumb ko zabardasti show aur lock karne ke liye */
.breadcrumb-force, .fixed-top-menu .breadcrumb {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    background: #eee !important; 
    padding: 12px 30px !important; 
    font-size: 15px !important; 
    border-bottom: 1px solid #ddd !important;
    z-index: 9999 !important;
}

body {
    padding-top: 140px !important;
}

/* Mobile Screens ke liye padding adjust */
@media (max-width: 992px) {
    body { padding-top: 145px !important; }
}
/* ========================================================
   🔥 BOSS KA FINAL MENU OVERLAP FIX (BINA KUCH DELETE KIYE) 🔥
   ======================================================== */
@media (max-width: 992px) {
    /* 1. Menu ko ekdum white header ke theek neeche (80px) se shuru karo */
    #nav-links, nav ul.nav-links {
        top: 80px !important; 
        height: calc(100vh - 80px) !important;
        z-index: 99999999 !important;
    }
    
    /* 2. JAB MENU KHULE: Breadcrumb wali line ko hide kar do taaki wo menu ko na kaate */
    body.no-scroll .breadcrumb {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* 3. Cross Button ko hamesha sabse upar rakho */
    .menu-toggle, #mobile-menu {
        z-index: 999999999 !important;
    }
}


        .hero-slider { position: relative; height: 65vh; min-height: 450px; width: 100%; overflow: hidden; background: #001f30; }
        .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; text-align: center; transition: opacity 1.2s ease-in-out; }
        .slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%); z-index: 2; }
        .slide.active { opacity: 1; visibility: visible; z-index: 5; animation: slightPan 15s infinite alternate ease-in-out; }
        @keyframes slightPan { from { transform: scale(1.05); } to { transform: scale(1); } }
        
        .hero-slider-content { position: relative; z-index: 10; width: 90%; max-width: 1200px; padding: 20px; text-shadow: 0 5px 25px rgba(0,0,0,1); opacity: 0; transform: translateY(20px); }
        .slide.active .hero-slider-content { animation: heroPopUp 1s ease forwards; animation-delay: 0.2s; }
        @keyframes heroPopUp { to { opacity: 1; transform: translateY(0); } }

        .txt-hero { font-size: 70px; font-weight: 900; line-height: 1.1; color: #fff; margin-bottom: 10px; text-transform: uppercase; }
        .hero-sub { font-size: 28px; font-weight: 700; color: #ff9800; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 2px; }
        .hero-desc { font-size: 20px; color: #e2e8f0; margin-top: 15px; font-weight: 500; max-width: 900px; margin-left: auto; margin-right: auto; }
        
        .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255,255,255,0.4); color: #fff; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 40; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
        .slider-arrow:hover { background: #ff9800; border-color: #ff9800; transform: translateY(-50%) scale(1.1); }
        .prev-btn { left: 20px; } .next-btn { right: 20px; }
        .slider-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 30; }
        .dot { width: 16px; height: 16px; background: rgba(255,255,255,0.3); border-radius: 50%; cursor: pointer; transition: 0.3s; border: 2px solid transparent; }
        .dot:hover, .dot.active { background: #fff; box-shadow: 0 0 15px #fff; transform: scale(1.2); }

        .section-title { text-align: center; font-size: 40px; color: #002b42; margin-bottom: 45px; font-weight: 900; text-transform: uppercase; }

        /* Unified Card Styles (Desktop base) */
        .uniform-card { background: #fff; border-radius: 16px; padding: 40px 25px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.06); transition: all 0.4s ease; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid rgba(0,0,0,0.03); border-top: 6px solid #ff9800; }
        .uniform-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.12); }
        .read-more-link { margin-top: 25px; display: inline-flex; align-items: center; justify-content: center; color: #ff9800; font-weight: 800; font-size: 15px; text-decoration: none; transition: 0.3s; background: #fff7ed; padding: 12px; border-radius: 8px; }
        .uniform-card:hover .read-more-link { background: #ff9800; color: #fff; gap: 8px; }

        .services-6-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; align-items: stretch; }
        .sectors-4-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: stretch; }
        
        .service-icon { font-size: 45px; margin-bottom: 15px; display: block; }
        .uniform-card h3 { font-size: 18px; color: #002b42; margin-bottom: 10px; line-height: 1.4; font-weight: 900; }
        .uniform-card p { font-size: 14px; color: #64748b; line-height: 1.6; flex-grow: 1; }

        .sector-bg { background: linear-gradient(rgba(0,31,48,0.85), rgba(0,43,66,0.92)), url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') center/cover fixed; color: #fff; }
        .sector-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-top: 6px solid #ff9800; border-radius: 16px; padding: 40px 30px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; transition: 0.4s; }
        .sector-card:hover { background: rgba(255,255,255,0.15); transform: translateY(-10px); border-top-color: #00d4ff; }
        .sector-card h3 { font-size: 24px; color: #fff; margin-bottom: 15px; font-weight: 800; }
        .sector-card p { font-size: 15px; color: #cbd5e1; line-height: 1.7; flex-grow: 1; }

        /* Timeline */
        .timeline-container { max-width: 900px; margin: 0 auto; position: relative; padding-left: 40px; border-left: 4px solid rgba(255, 152, 0, 0.3); }
        .timeline-step { position: relative; margin-bottom: 40px; }
        .timeline-dot { position: absolute; left: -52px; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: #002b42; border: 4px solid #ff9800; }
        .timeline-content { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-left: 5px solid #002b42; }

        /* Exec Leadership */
        .exec-card { padding: 30px 20px; background: #fff; text-align: center; border-top: 6px solid #002b42; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.3s; }
        .exec-card:nth-child(odd) { border-top-color: #ff9800; }
        .exec-card:hover { transform: translateY(-10px); }
        .exec-photo { width: 100%; max-width: 160px; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; margin-bottom: 15px; }
        .exec-name { color: #002b42; font-size: 20px; font-weight: 900; margin-bottom: 5px; }
        .exec-title { font-weight: 700; font-size: 13px; color: #ff9800; text-transform: uppercase; }

/* ========================================================
   🔥 STATS SECTION (VIDEO BG + 3D + MOBILE 1 ROW) 🔥
   ======================================================== */
.stats-section { 
    position: relative; 
    padding: 100px 20px; 
    color: #fff; 
    text-align: center; 
    overflow: hidden; 
    background: transparent !important; /* Purana solid color force-remove kiya */
}

/* Video ko peeche set karne ka code */
.stats-bg-video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;
    z-index: 0 !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
}

/* Video ke upar ka transparent sheesha (opacity 0.4 ki hai) */
.stats-overlay {
    position: absolute !important;
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important;
    background: rgba(0, 31, 48, 0.4) !important; /* Halka kiya taaki video dikhe */
    backdrop-filter: blur(2px) !important;
    z-index: 1 !important;
}

/* Dabbon aur text ko video ke upar laane ka code */
.stats-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
    max-width: 1200px; 
    margin: 0 auto; 
    position: relative !important;
    z-index: 5 !important; /* Overlay aur video se upar */
    perspective: 1000px;
}

/* 3D Glass Box */
.stat-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 35px 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.stat-box:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: #ff9800;
    box-shadow: 0 20px 40px rgba(255, 152, 0, 0.3);
}

.stat-number { 
    font-size: 55px; 
    font-weight: 900; 
    color: #ff9800; 
    margin-bottom: 5px; 
    line-height: 1; 
    text-shadow: 0 5px 15px rgba(255,152,0,0.4);
}

.stat-title { 
    font-size: 15px; 
    font-weight: 700; 
    color: #ffffff; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* ========================================================
   🔥 3D SCROLL ENTRY ANIMATION CLASSES 🔥
   ======================================================== */


/* ========================================================
   🚨 MOBILE RESPONSIVE: 1 ROW MEIN 4 DABBE 🚨
   ======================================================== */
@media (max-width: 768px) {
    .stats-section { padding: 15px 10px; }
    .stats-grid { 
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 5px !important; 
    }
    .stat-box { 
        padding: 10px 3px; 
        border-radius: 10px; 
    }
    .stat-number { font-size: 20px !important; margin-bottom: 2px !important; }
    .stat-title { font-size: 8px !important; letter-spacing: 0; line-height: 1.1; word-break: break-word; }
}
/* ========================================================
   🔥 BRAND SECTION FIX (LOGOS & AUTO-SCROLL) 🔥
   ======================================================== */
.brand-section { 
    background: #fff !important; 
    border-top: 1px solid #e2e8f0 !important; 
    border-bottom: 1px solid #e2e8f0 !important; 
    overflow: hidden !important; 
    white-space: nowrap !important; 
    padding: 40px 0 !important; 
    position: relative !important; 
}

.brand-track { 
    display: inline-flex !important; 
    align-items: center !important; 
    animation: infiniteScroll 25s linear infinite !important; 
}

/* Mouse (Hover) le jane par scroll automatic ruk jayega */
.brand-section:hover .brand-track {
    animation-play-state: paused !important; 
}

.brand-item { 
    flex: 0 0 auto !important; 
    width: 220px !important; 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    padding: 0 20px !important; 
}

/* Logos ko bada hone se rokne ka Pukka Lock */
.brand-item img { 
    max-width: 140px !important; /* Ye logos ko limit me rakhega */
    height: auto !important; 
    filter: grayscale(100%) !important; 
    opacity: 0.6 !important; 
    transition: 0.4s !important; 
}

/* Hover karne par logo bada aur rangeen hoga */
.brand-item:hover img { 
    filter: grayscale(0%) !important; 
    opacity: 1 !important; 
    transform: scale(1.15) !important; 
}

@keyframes infiniteScroll { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

/* Mobile Screen ke liye Logos ki size set karna */
@media (max-width: 768px) {
    .brand-section { padding: 15px 0 !important; }
    .brand-item { width: 120px !important; }
    .brand-item img { max-width: 80px !important; }
}

        /* Form */
        .luxe-form-card { background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 20px 50px rgba(0, 43, 66, 0.08); border-top: 6px solid #ff9800; }
        .contact-form input, .contact-form textarea { background: #f1f5f9; border: 2px solid transparent; border-radius: 12px; padding: 15px 20px; font-size: 15px; width: 100%; margin-bottom: 20px; transition: all 0.3s; font-family: inherit; }
        .contact-form input:focus, .contact-form textarea:focus { background: #fff; border-color: #ff9800; outline: none; }
        
        /* New Custom Extra Length Sections */
        .testimonial-card { background: #fff; padding: 30px; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); position: relative; border-left: 5px solid #00d4ff; }
        .testimonial-text { font-style: italic; color: #555; font-size: 15px; line-height: 1.6; margin-bottom: 15px; }
        .testimonial-author { font-weight: 800; color: #002b42; }
        .csr-container { background: #002b42; color: #fff; border-radius: 20px; padding: 50px; text-align: center; }