:root {
    /* Premium Soothing Brand Gradient Background Flow */
    --bg-gradient: linear-gradient(180deg, #16222f 0%, #1a232e 35%, #181d24 70%, #15191f 100%);
    --banner-overlay: linear-gradient(125deg, rgba(21, 62, 99, 0.52) 0%, rgba(224, 107, 37, 0.42) 100%);
    
    --brand-blue: #153E63;
    --brand-orange: #E06B25;
    --orange-linear: linear-gradient(135deg, #FF8C42 0%, #E06B25 100%);
    
    /* TRUE KANTORANTS STYLE CLEAR CRYSTAL GLASSMORPHISM */
    --glass-surface-white: rgba(255, 255, 255, 0.05);
    --glass-border-white: rgba(255, 255, 255, 0.22);
    --orange-glass-border: rgba(224, 107, 37, 0.55);
    
    /* High-End Glow Presets */
    --glow-orange-intense: 0 0 25px rgba(224, 107, 37, 0.6);
    --glow-text-orange: 0 0 15px rgba(255, 140, 66, 0.85);
    --glow-whatsapp: 0 0 15px rgba(37, 211, 102, 0.6);
    --glow-facebook: 0 0 15px rgba(24, 119, 242, 0.5);
    --glow-instagram: 0 0 15px rgba(225, 48, 108, 0.5);
    --glow-youtube: 0 0 15px rgba(255, 0, 0, 0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
    background: var(--bg-gradient) !important;
    color: #f1f5f9;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 110px;
    min-height: 100vh;
    width: 100%;
}

/* --- Soothing Scroll Entrance --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- Restricted Particle Canvas Layer --- */
.industrial-bg {
    position: absolute;
    top: 85vh;
    left: 0;
    width: 100%;
    height: calc(100% - 85vh);
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.floating-part {
    position: absolute;
    background: transparent !important;
    fill: none !important;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
    color: transparent !important; 
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.12));
    animation: smoothSpinFloat 26s linear infinite;
    bottom: -60px;
}

@keyframes smoothSpinFloat {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateY(-220vh) rotate(360deg); opacity: 0; }
}

/* --- FIXED BACKGROUND IMAGE HERO BANNER BLOCK --- */
.hero-banner-outer {
    background: var(--banner-overlay), url('../images/banner-bg.jpg') no-repeat center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-wrapper-luxury {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 8%;
    gap: 40px;
}
.hero-content-left { width: 50%; }
.hero-form-right { width: 46%; } /* Expanded slightly to ensure maximum single-line space */

/* --- TRUE CRYSTALLIZED TRANSPARENT GLASSMORPHIC PANELS --- */
.glass-panel-luxury {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(8px) !important; /* Soft minimal blur matching true high-transparency glass look */
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

.glass-panel-luxury-form {
    background: var(--glass-surface-white) !important; /* Pure transparent crystal base */
    border: 1px solid var(--glass-border-white) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255,255,255,0.25);
}

/* Precise alignment selector to hold heading securely on one single line */
.glass-panel-luxury-form h3 {
    font-size: 21px !important; /* Optimized ratio avoiding two-line collapse */
    white-space: nowrap !important; /* Forces layout tracking onto a single horizontal vector */
    letter-spacing: 0.3px !important;
    color: #fff;
    font-weight: 800;
}

/* --- Layout Header Setup --- */
.header-main {
    width: 100%;
    height: 90px;
    background: rgba(22, 30, 41, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-center-logo { position: absolute; left: 50%; transform: translateX(-50%); }
.header-center-logo img { height: 60px; display: block; max-width: 100%; object-fit: contain; }
.header-right-hub { display: flex; align-items: center; gap: 10px; z-index: 1001; }

/* Continuous Pulse Breathing Social Handles Array */
.glow-channel-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: permanentGlowPulse 3s infinite ease-in-out;
}

.glow-channel-icon.whatsapp-style { color: #25D366 !important; border: 1px solid rgba(37, 211, 102, 0.45); box-shadow: var(--glow-whatsapp); animation-delay: 0s; }
.glow-channel-icon.phone-style { color: #FF8C42 !important; border: 1px solid rgba(224, 107, 37, 0.45); box-shadow: var(--glow-orange-intense); animation-delay: 0.4s; }
.glow-channel-icon.fb-style { color: #1877F2 !important; border: 1px solid rgba(24, 119, 242, 0.45); box-shadow: var(--glow-facebook); animation-delay: 0.8s; }
.glow-channel-icon.insta-style { color: #E1306C !important; border: 1px solid rgba(225, 48, 108, 0.45); box-shadow: var(--glow-instagram); animation-delay: 1.2s; }
.glow-channel-icon.yt-style { color: #FF0000 !important; border: 1px solid rgba(255, 0, 0, 0.45); box-shadow: var(--glow-youtube); animation-delay: 1.6s; }

.glow-channel-icon:hover { transform: translateY(-3px) scale(1.1); }

@keyframes permanentGlowPulse {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.04); opacity: 1; filter: brightness(1.2); }
    100% { transform: scale(1); opacity: 0.9; }
}

/* --- Form Field Inside Elements --- */
.form-group-custom input, .form-group-custom textarea {
    width: 100%;
    padding: 14px 18px;
    background: rgba(12, 18, 26, 0.75) !important; /* Light dark mask to hold contrast text crispness */
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px;
    color: #fff !important;
    outline: none;
    font-size: 14px;
    transition: all 0.3s ease;
}
.form-group-custom input:focus, .form-group-custom textarea:focus {
    border-color: #FF8C42 !important;
    box-shadow: 0 0 15px rgba(255, 140, 66, 0.45);
}

/* --- Button Component Layout --- */
.glow-btn-gradient-orange {
    background: var(--orange-linear) !important;
    color: #fff !important;
    border: none;
    box-shadow: var(--glow-orange-intense);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.glow-btn-gradient-orange:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(224, 107, 37, 0.85);
}

/* --- Functional Content Core Card Frame Handles --- */
.luxury-card-frame {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px;
    padding: 35px;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
}
.luxury-card-frame:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--orange-glass-border) !important;
    box-shadow: var(--glow-orange-intense);
}

.gallery-grid-wrapper { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 25px; 
    margin-top: 40px; 
    position: relative; 
    z-index: 2; 
}
.gallery-card-premium { position: relative; border-radius: 16px; overflow: hidden; height: 220px; border: 1px solid rgba(255,255,255,0.1); }
.gallery-card-premium img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-card-premium:hover img { transform: scale(1.1); }
.gallery-overlay-meta { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(to top, rgba(22,34,47,0.95), transparent); color: #fff; font-size: 14px; font-weight: 600; }

/* --- Mini App Floating Menu Panel Vector --- */
.bottom-nav-container-v2 {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px;
    height: 70px;
    background: rgba(22, 34, 47, 0.85) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    padding: 0 15px;
}
.bottom-nav-item-v2 { text-decoration: none; color: #cbd5e1 !important; display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 600; transition: all 0.3s ease; }
.bottom-nav-item-v2 i { font-size: 18px; margin-bottom: 4px; transition: all 0.3s ease; }
.bottom-nav-item-v2:hover, .bottom-nav-item-v2.active { color: #FF8C42 !important; }
.bottom-nav-item-v2.active i { transform: translateY(-4px); filter: drop-shadow(0 0 10px #FF8C42); }

/* --- Mobile Breakpoints Overrides --- */
@media (max-width: 991px) {
    .hero-wrapper-luxury { flex-direction: column !important; padding: 40px 5% !important; gap: 40px !important; text-align: center !important; }
    .hero-content-left, .hero-form-right { width: 100% !important; }
    .dynamic-heading-matrix { font-size: 38px !important; }
    .header-main { padding: 0 4% !important; height: 80px !important; }
    .header-left-info { display: none !important; }
    .header-center-logo { position: static !important; transform: none !important; }
    .header-center-logo img { height: 48px !important; }
    .header-right-hub { gap: 6px !important; }
    .glow-channel-icon { width: 32px !important; height: 32px !important; font-size: 13px !important; }
    .glass-panel-luxury-form h3 { white-space: normal !important; font-size: 20px !important; } /* Wrapping allowed smoothly on small phones layout bounds */
}

@media (max-width: 600px) {
    .dynamic-heading-matrix { font-size: 32px !important; }
    .section-divider-title { font-size: 26px !important; padding: 0 15px !important; }
    .glass-panel-luxury { padding: 25px 20px !important; }
    .gallery-grid-wrapper { grid-template-columns: 1fr !important; }
}


/* --- LUXURY LOGO-CONTRAST BALANCED SLATE HEADER CANVAS --- */
.header-main {
    width: 100% !important;
    height: 115px !important; /* Bumped up slightly to safely cradle the larger 95px logo */
    
    background-color: #1a2432 !important;
    
    background-image: linear-gradient(90deg, 
        rgba(21, 62, 99, 0.45) 0%, 
        rgba(21, 62, 99, 0.45) 60%, 
        rgba(26, 36, 50, 0.95) 75%, 
        rgba(224, 107, 37, 0.25) 100%
    ) !important;
    
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    border-bottom: 2px solid rgba(224, 107, 37, 0.35) !important;
    
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 5% !important;
    
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* --- THE HEADER OFFSET FOR BANNER WRAPPER --- */
.hero-banner-outer {
    background: var(--banner-overlay), url('../images/banner-bg.jpg') no-repeat center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 115px !important; /* Adjusted to perfectly match new header height */
}

/* --- LOGO MASTER SIZE SCALE UP --- */
/* ---
.header-center-logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-center-logo img {
    height: 146px !important; /* Massive, clean, and bold brand visibility 
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 2px 12px rgba(255,255,255,0.1));
} --- */

/* --- MASTER LOGO 146PX WITH BRANDED DUAL-COLOR GLOW --- */
.header-center-logo img {
    height: 146px !important; /* Kept exactly at your preferred perfect size */
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    
    /* 
       DYNAMIC BRAND GLOW ENGINE: 
       1st shadow spreads a premium deep blue aura (#153E63) on the left/top shifts.
       2nd shadow spreads a bright translucent orange aura (#e06b25) on the right/bottom shifts.
    */
    filter: drop-shadow(-8px -4px 20px rgba(21, 62, 99, 0.65)) 
            drop-shadow(8px 4px 20px rgba(224, 107, 37, 0.55)) !important;
            
    /* Smooth rendering transition */
    transition: filter 0.3s ease-in-out !important;
}

/* Optional: Mouse hover par social media icons ki tarah halka sa aura pump up hoga */
.header-center-logo img:hover {
    filter: drop-shadow(-10px -5px 25px rgba(21, 62, 99, 0.8)) 
            drop-shadow(10px 5px 25px rgba(224, 107, 37, 0.7)) !important;
}

/* --- DYNAMIC GREEN PULSE DOT ENGINE --- */
.header-left-info span {
    color: #cbd5e1 !important; 
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.live-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #22c55e !important; /* Neon / Radioactive Green */
    border-radius: 50% !important;
    margin-left: 8px !important;
    display: inline-block !important;
    position: relative !important;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: livePulseSystem 1.6s infinite cubic-bezier(0.66, 0, 0, 1) !important;
}

@keyframes livePulseSystem {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Mobile Devices Adaptation Safeties */
@media (max-width: 991px) {
    .header-main {
        height: 100px !important;
        padding: 0 4% !important;
        background-image: linear-gradient(90deg, 
            rgba(21, 62, 99, 0.45) 0%, 
            rgba(21, 62, 99, 0.45) 65%, 
            rgba(224, 107, 37, 0.22) 100%
        ) !important;
    }
    .hero-banner-outer {
        padding-top: 100px !important;
    }
    .header-center-logo img {
        height: 78px !important; /* Optimized nicely for smaller screens */
    }
}


/* --- LUXURY LOGO-CONTRAST BALANCED SLATE HEADER --- */
.header-main {
    width: 100% !important;
    height: 115px !important; /* Fixed corporate height for the brand setup */
    background-color: #1a2432 !important;
    background-image: linear-gradient(90deg, 
        rgba(21, 62, 99, 0.45) 0%, 
        rgba(21, 62, 99, 0.45) 60%, 
        rgba(26, 36, 50, 0.95) 75%, 
        rgba(224, 107, 37, 0.25) 100%
    ) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 2px solid rgba(224, 107, 37, 0.35) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 5% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* --- BANNER OUTER FRAME INTEGRATION --- */
.hero-banner-outer {
    background: var(--banner-overlay), url('../images/banner-bg.jpg') no-repeat center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 115px !important; /* Perfectly balances the absolute header height layout */
}

/* --- KANTORANTS STYLE EQUAL GAP GRID WRAPPER --- */
.hero-wrapper-luxury {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    
    /* TUNED VISUAL BALANCER: 
       Top aur bottom padding ko custom balance kiya hai aur right-left side space ko 
       5% par lock kiya hai taaki form ke top aur right ka space ekdum perfectly equal aur symmetrical dikhe.
    */
    padding: 40px 5% 50px 5% !important; 
}

/* Mobile Devices Optimization Overrides */
@media (max-width: 991px) {
    .header-main {
        height: 100px !important;
        padding: 0 4% !important;
    }
    .hero-banner-outer {
        padding-top: 100px !important;
    }
    .hero-wrapper-luxury {
        flex-direction: column !important;
        padding: 30px 4% !important; /* Smooth linear spacing injection for responsive stack */
        gap: 35px !important;
        text-align: center !important;
    }
}


/* ==========================================================================
   💥 METRICS GRID BANNER ENHANCER OVERRIDE (FULL FORCE FIX)
   ========================================================================== */

/* 1. Targetting the tiny thumbnail square boxes to expand fully */
.glass-panel div[style*="display: flex"] div[style*="width"],
.glass-panel div[style*="background"],
div[id="leads"] ~ div div[style*="width"],
div div[class*="icon-wrapper"],
div div[class*="thumbnail"],
/* Your direct metric item boxes */
.glass-panel div div:has(> img) {
    width: 100% !important;
    height: 180px !important; /* Forces the box to become a wide display block */
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 !important; /* Removes padding inside that shrinks the image */
    margin-bottom: 20px !important;
    overflow: hidden !important; /* Keeps the zoom clean inside borders */
}

/* 2. Directing images inside those boxes to scale beautifully to 100% */
.glass-panel div div img,
div div[style*="background"] img,
div div:has(> img) img,
div div img[src*="yard"], 
div div img[src*="crush"], 
div div img[src*="extract"] {
    width: 100% !important;
    height: 100% !important; /* Takes full height of the expanded 180px panel */
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important; /* Premium industrial zoom focus crop */
    display: block !important;
    border-radius: 12px !important;
    margin: 0 !important;
    transform: scale(1) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3. Smooth hover matrix animation over the beautiful big images */
.glass-panel div div:hover img,
div div img[src*="yard"]:hover, 
div div img[src*="crush"]:hover, 
div div img[src*="extract"]:hover {
    transform: scale(1.08) !important; /* Premium deep zoom dynamic movement */
}

/* 4. Ensuring text nodes below stay cleanly separated */
.glass-panel h4, 
.glass-panel div text,
.glass-panel div span:not(.live-pulse-dot) {
    display: block !important;
    margin-top: 10px !important;
}



/* ==========================================================================
   💎 PREMIUM KANTORANTS METRICS CARDS ARCHITECTURE
   ========================================================================== */

.metrics-luxury-card {
    background: rgba(23, 31, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4) !important;
    height: 100% !important;
}

/* Hover glow effect like Kantorants */
.metrics-luxury-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--orange-glass-border) !important;
    box-shadow: var(--glow-orange-intense) !important;
}

/* Landscape Image Banner on Top */
.metrics-image-container {
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    position: relative !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

.metrics-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transform: scale(1) !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.metrics-luxury-card:hover .metrics-image-container img {
    transform: scale(1.07) !important;
}

/* Content Box on Bottom */
.metrics-content-container {
    padding: 24px !important;
    display: block !important;
}

.metrics-content-container h4 {
    margin: 0 0 10px 0 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.4px !important;
    line-height: 1.4 !important;
}

.metrics-content-container p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
}