:root {
            --dark-blue: #233799; 
            --bright-orange: #ff5e36; 
            --text-dark: #1f2229;
            --font-primary: 'Saira', sans-serif;
        }

    
        /*==========================
          PREMIUM HERO SLIDER
        ==========================*/
        .hero-slider {
            position: relative;
            overflow: hidden;
            background: #000;
            height: 90vh;
            /* min-height: 750px; */
        }

        .hero-slider .carousel-inner,
        .hero-slider .carousel-item {
            height: 100%;
        }

        /* Background slide animation setup */
        .hero-slider .carousel-item {
            background-size: cover;
            background-position: center;
            transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1);
        }

        /* Premium Overlay */
        .hero-slider .carousel-item::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,
                rgba(14, 38, 113, 0.95) 0%,
                rgba(20, 55, 145, 0.8) 40%,
                rgba(0, 0, 0, 0.3) 100%);
            z-index: 1;
        }

        /*==========================
          HERO CONTENT
        ==========================*/
        .carousel-container {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            height: 100%;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 24px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 30px;
            text-transform: uppercase;
        }

        .hero-badge i { color: var(--bright-orange); }

        .hero-title {
            font-size: 75px;
            font-weight: 800;
            line-height: 1.15;
            color: #fff;
            margin-bottom: 25px;
        }

        .stroke-text {
            color: transparent;
            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
        }

        .orange-text { color: var(--bright-orange); }

        .hero-desc {
            font-size: 19px;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.85);
            max-width: 650px;
            margin-bottom: 40px;
        }

        .hero-features {
            display: flex;
            gap: 35px;
            margin-bottom: 45px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 18px;
            font-weight: 600;
            color: #fff;
        }

        .feature-item i {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255, 94, 54, 0.15);
            border: 1px solid rgba(255, 94, 54, 0.3);
            color: var(--bright-orange);
        }

        /* Buttons */
        .btn-hero-orange, .btn-hero-blue {
            padding: 16px 36px;
            border-radius: 60px;
            font-weight: 700;
            font-size: 16px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.4s ease;
        }
        .btn-hero-orange { background: var(--bright-orange); color: #fff; }
        .btn-hero-blue { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.3); }
        
        .btn-hero-orange:hover, .btn-hero-blue:hover {
            transform: translateY(-5px);
            background: #fff;
            color: var(--text-dark);
            border-color: #fff;
        }

        /* Navigation Controls */
        .carousel-control-prev, .carousel-control-next {
            width: 65px !important; height: 65px !important;
            border-radius: 50%; top: 50% !important; transform: translateY(-50%) !important;
            background: rgba(255, 255, 255, 0.1) !important;
            border: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 15; opacity: 1 !important; transition: all 0.3s;
        }
        .carousel-control-prev { left: 45px !important; }
        .carousel-control-next { right: 45px !important; }
        .carousel-control-prev:hover, .carousel-control-next:hover { background: var(--bright-orange) !important; border-color: var(--bright-orange); }

        /*======================================
          CSS FALLBACK ANIMATIONS (Jisse Text Dikhega!)
        ======================================*/
        .carousel-item .hero-badge,
        .carousel-item .hero-title,
        .carousel-item .hero-desc,
        .carousel-item .hero-features,
        .carousel-item .btn-wrap {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* Jab slide active hogi toh content smooth pop-up hoga */
        .carousel-item.active .hero-badge { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
        .carousel-item.active .hero-title { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
        .carousel-item.active .hero-desc  { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
        .carousel-item.active .hero-features { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
        .carousel-item.active .btn-wrap   { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }

        @media(max-width: 991px) {
            .hero-slider { height: auto; }
            .hero-slider .carousel-item { height: auto; min-height: 100vh; padding: 140px 0 80px; }
            .hero-title { font-size: 42px; }
            .hero-features { flex-direction: column; gap: 15px; }
            .carousel-control-prev, .carousel-control-next { display: none !important; }
        }

        /* about us */


        /* Premium Blue & Orange Color Palette variables */
:root {
    --primary-orange: #ff5e14;
    --premium-blue: #3143aa; 
    --royal-blue: #3143aa;   
    --light-blue-bg: #eef4ff; 
}

/* Utilities inside parent context where needed, or general utilities */
.text-orange { color: var(--primary-orange); }
.text-premium-blue { color: var(--premium-blue); }
.text-royal-blue { color: var(--royal-blue); }
.z-index-1 { z-index: 1; }
.z-index-2 { z-index: 2; }

/* ─── PARENT SELECTOR `.about_us` SCOPED STYLES ─── */
.about_us {
    background-color: #ffffff;
    padding: 50px;
}

.about_us .about-image-wrapper {
    position: relative;
    padding: 60px 0;
    max-width: 550px;
    margin: 0 auto;
}

/* Piche wali background image style update */
.about_us .bg-image-behind {
    width: 100%;
    height: 100%;
    top: 0;
    left: -30px; 
    z-index: 1;  
    opacity: 0.15; 
    pointer-events: none;
}

.about_us .bg-image-behind img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Images & Custom Shapes styling */
.about_us .custom-shape-1 {
border-radius: 200px 200px 0px 200px;
    border: 10px solid #ffffff;
    box-shadow: 0px 20px 50px rgba(10, 28, 58, 0.12);
    width: 300px;
    height: 410px;
    object-fit: cover;
    position: relative;
    top: -80px;
    left: -70px;
}

.about_us .image-box-two {
    position: absolute;
    bottom: 0px;
    right: 10px;
    z-index: 3;
}

.about_us .custom-shape-2 {
    border-radius: 0px 200px 199px 200px;;
    border: 10px solid #ffffff;
    box-shadow: 0px 20px 50px rgba(10, 28, 58, 0.18);
    width: 270px;
    height: 360px;
    object-fit: cover;
}

/* Badge styling */
.about_us .experience-badge {
    position: absolute;
      top: 10%;
    left: 70%;
    transform: 
    transform: translate(-50%, -50%);
    background-color: var(--primary-orange);
    color: #ffffff;
    width: 135px;
    height: 135px;
    border-radius: 50%;
    border: 6px double #ffffff;
    box-shadow: 0px 15px 35px rgba(255, 94, 20, 0.4);
    z-index: 4;
    animation: floatingEffect 4s infinite ease-in-out;
}

.about_us .experience-badge .exp-number {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.about_us .experience-badge .exp-text {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Right layout typography */
.about_us .sub-title {
    background-color: var(--light-blue-bg);
    color: var(--royal-blue);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.about_us .main-title {
    font-size: 48px;
    color: #1f2229;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* Features block with Bootstrap Icons alignment fixes */
.about_us .feature-icon-box {
    background-color: var(--light-blue-bg);
    color: var(--royal-blue);
    min-width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px; /* Bootstrap Icon crisp center */
}

/* List element adjustments */
.about_us .custom-list li {
    font-weight: 600;
    font-size: 15px;
}

.about_us .icon-list-box {
    background-color: rgba(255, 94, 20, 0.1); 
    color: var(--primary-orange);               
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; 
    transition: all 0.3s ease;
}

/* Call to Action Premium Buttons */
.about_us .btn-blue-premium {
    background-color: var(--primary-orange);
    color: #ffffff;
    border: none;
    transition: all 0.3s ease-in-out;
}

.about_us .btn-blue-premium:hover {
    background-color: var(--premium-blue);
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0px 10px 25px rgba(255, 94, 20, 0.3);
}

/* Animations mapping */
@keyframes floatingEffect {
    0% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-6px); }
    100% { transform: translate(-50%, -50%) translateY(0px); }
}

/* Responsive Media Queries with Parent targeting */
@media (max-width: 991px) {
    .about_us .about-image-wrapper {
        margin-bottom: 60px;
        max-width: 460px;
    }
    .about_us .custom-shape-1 { width: 240px; height: 340px; }
    .about_us .custom-shape-2 { width: 210px; height: 300px; }
    .about_us .main-title { font-size: 32px; }
    .about_us .bg-image-behind { left: 0; opacity: 0.1; }
}  

/* service */



    
:root {
    --primary-orange: #ff5e14;
    --premium-blue: #0A1C3A;
    --royal-blue: #2b3c94;
    --card-bg: #ffffff;
}

.z-index-1 { z-index: 1; }
.z-index-2 { z-index: 2; }

/* Parent Section Styling */
.service_section {
    background-color: #fdfaf6; 
    background-image: linear-gradient(to right, 
                        rgba(253, 250, 246, 0.85) 0%, 
                        rgba(253, 250, 246, 0.4) 50%, 
                        rgba(253, 250, 246, 0) 100%), 
                      url('images/bgimage2.webp'); 
    background-repeat: no-repeat;
    background-position: right center; 
    background-size: cover;
    padding: 80px 0;
    position: relative;
}

/* Header Elements Typography */
.service_section .sub-title {
    background-color: rgba(255, 94, 20, 0.1);
    color: var(--primary-orange);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.service_section .main-title {
    font-size: 48px;
    color: var(--premium-blue);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.service_section .text-royal-blue {
    color: var(--royal-blue);
}

.service_section .description {
    font-size: 15px;
    max-width: 420px;
    display: inline-block;
}

.service_section .btn-orange-premium {
    background-color: var(--primary-orange);
    color: #ffffff;
    border: none;
    transition: all 0.3s ease-in-out;
}
.service_section .btn-orange-premium:hover {
    background-color: var(--premium-blue);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0px 8px 20px rgba(255, 94, 20, 0.25);
}

/* ─── PREMIUM AIRNEX CARDS CONFIG ─── */
.service_section .service-card {
    background-color: var(--card-bg);
    border-radius: 35px; 
    border: 1px solid rgba(10, 28, 58, 0.05);
    box-shadow: 0px 15px 40px rgba(10, 28, 58, 0.02);
    position: relative;
    overflow: hidden; 
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s ease;
}

/* Interactive Glow Gradient Background Layer */
.service_section .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #2b3c94 0%, #17246b 100%);
    border-radius: 35px;
    opacity: 0;
    transform: scale(0.9);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

/* Base Card Content Configurations */
.service_section .service-card .icon-wrapper {
    background-color: var(--primary-orange);
    color: #ffffff;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    font-size: 28px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.service_section .service-card .card-title {
    font-size: 21px;
    color: var(--premium-blue);
    transition: color 0.4s ease;
}

.service_section .service-card .card-desc {
    font-size: 14.5px;
    line-height: 1.6;
    transition: color 0.4s ease;
}

/* Line Divider Setup */
.service_section .service-card .card-divider {
    height: 1px;
    width: 100%;
    background-color: rgba(10, 28, 58, 0.08);
    transition: background-color 0.4s ease;
}

.service_section .service-card .read-more-link {
    color: var(--royal-blue);
    font-size: 14px;
    transition: all 0.4s ease;
}

/* ─── HOVER STATES ACTIVATION ─── */
.service_section .service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 25px 50px rgba(23, 36, 107, 0.2);
}

/* Background Zoom Effect On Hover */
.service_section .service-card:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* Card Content Shifts to High Visibility White */
.service_section .service-card:hover .card-title {
    color: #ffffff;
}

.service_section .service-card:hover .card-desc {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Divider Transparency Shift on Hover */
.service_section .service-card:hover .card-divider {
    background-color: rgba(255, 255, 255, 0.15);
}

/* UPDATED: Learn More Link Color Shifts to Pure White on Hover */
.service_section .service-card:hover .read-more-link {
    color: #ffffff;
}

/* White Circle Icon Pop Up Style */
.service_section .service-card:hover .icon-wrapper {
    background-color: #ffffff;
    color: var(--primary-orange);
    transform: scale(1.06);
}

/* Responsive Breakpoints Scoped */
@media (max-width: 991px) {
    .service_section { padding: 60px 0; }
    .service_section .main-title { font-size: 32px; }
}



    
:root {
    --accent-orange: #ff5e14;
    --deep-bg-blue: #062265;
}

/* .z-index-2 { z-index: 2; } */

/* ─── CUSTOM POWERFUL RESPONSIVE PADDING SECTIONS ─── */
.feature-choose-section {
    background-color: var(--deep-bg-blue);
    /* Yahan se linear-gradient overlay ko poora hata diya hai */
    background-image: url('images/bgimage3.webp'); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    
    /* Dynamic spacing for mobile and desktop */
    padding-top: calc(40px + 3vw);
    padding-bottom: calc(40px + 3vw);
    overflow: hidden;
}
/* ─── UPGRADED HIGH-END AIRNEX SPLIT BADGE STYLING ─── */
.feature-choose-section .feature-badge {
    background-color: rgb(255, 255, 255);
    color: var(--accent-orange);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Badge Ke Andar Icon Ka Custom Background Wrapper Box */
.feature-choose-section .badge-icon-wrapper {
    width: 32px;
    height: 32px;
    background-color: var(--accent-orange);
    color: #ffffff;
    border-radius: 50%;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(255, 94, 20, 0.4);
    animation: rotateGear 6s linear infinite; /* Subtle premium micro-rotation animation */
}

/* Micro-Gear Spin Logic */
@keyframes rotateGear {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Main Heading Typography Scaler */
.feature-choose-section .feature-main-title {
    font-size: calc(24px + 1.2vw);
    line-height: 1.25;
    letter-spacing: -0.5px;
}

/* Flex Grid Point Layouts */
.feature-choose-section .point-icon-circle {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background-color: #ffffff;
    color: var(--accent-orange);
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.feature-choose-section .feature-point-item:hover .point-icon-circle {
    transform: scale(1.12) rotate(8deg);
}

/* Call to Action Button */
.feature-choose-section .btn-feature-action {
    background-color: var(--accent-orange);
    color: #ffffff;
    border: none;
    font-size: 15px;
    transition: all 0.3s ease-in-out;
}
.feature-choose-section .btn-feature-action:hover {
    background-color: #ffffff;
    color: var(--accent-orange);
    transform: translateY(-3px);
    box-shadow: 0px 10px 20px rgba(255, 94, 20, 0.3);
}

/* Frame Layouts & Overlaps */
.feature-choose-section .feature-image-wrapper {
    display: inline-block;
    width: 100%;
}

.feature-choose-section .technician-img {
    border-radius: 35px;
    width: 88%;
    max-height: 520px;
    object-fit: cover;
    border: 6px solid rgba(255, 255, 255, 0.06);
}

/* Google badge setup floating config */
.feature-choose-section .google-review-badge {
    background-color: #ffffff;
    border-radius: 18px;
    bottom: 30px;
    left: 10%;
    width: auto;
    min-width: 220px;
    z-index: 3;
    animation: bounceFloating 4.5s ease-in-out infinite;
}

.feature-choose-section .stars-row i {
    font-size: 13px;
}

/* Smooth Floating keyframe */
@keyframes bounceFloating {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

/* ─── PURE SMART RESPONSIVE MOBILE BREAKPOINTS ─── */
@media (max-width: 991px) {
    .feature-choose-section .technician-img {
        width: 100%;
        max-height: 400px;
        margin-bottom: 25px;
    }
    
    /* Mobile standard floating badge recalculation */
    .feature-choose-section .google-review-badge {
        left: 50%;
        transform: translateX(-50%);
        bottom: 50px;
    }
    
    @keyframes bounceFloating {
        0% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(-8px); }
        100% { transform: translateX(-50%) translateY(0); }
    }
}

@media (max-width: 575px) {
    /* Mobile small text fixes */
    .feature-choose-section .feature-point-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .feature-choose-section .google-review-badge {
        min-width: 200px;
        padding: 10px 15px !important;
        bottom: 40px;
    }
}

/* why chose */

 
:root {
    --accent-orange: #ff5e14;
    --light-card-bg: #fffbf9; /* Exact soft cream tint from image_753504.jpg */
    --text-dark-blue: #062265;
}

/* Section Wrapper Base Layout */
.why-choose-section {
    background-color: #ffffff;
 padding:50px;
}

/* ─── AIRNEX MINI BRANDING BADGE ─── */
.why-choose-section .choose-badge {
    background-color: #fff4ef;
    color: var(--accent-orange);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 18px 6px 6px !important;
}

.why-choose-section .badge-icon-box {
    width: 28px;
    height: 28px;
    background-color: var(--accent-orange);
    color: #ffffff;
    border-radius: 50%;
    font-size: 12px;
}

/* Core Typography Setup */
.why-choose-section .choose-main-title {
    font-size: 48px;
    line-height: 1.2;
    color: var(--text-dark-blue);

}

.why-choose-section .choose-description {
    font-size: 15px;
    line-height: 1.6;
}

.why-choose-section .text-dark-blue-color {
    color: var(--text-dark-blue);
}

/* ─── SINGLE SHARED BACKGROUND INNER CARDS BLOCK ─── */
.why-choose-section .choose-cards-container-box {
    background-color: var(--light-card-bg);
    border-radius: 24px;
}

.why-choose-section .choose-card-icon {
    width: 56px;
    height: 56px;
    background-color: var(--accent-orange);
    color: #ffffff;
    border-radius: 50%;
    font-size: 22px;
}

/* Modern Transparent Outline Watermark Effect */
.why-choose-section .card-watermark-num {
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 94, 20, 0.09); /* Soft orange transparent outline frame */
    font-family: sans-serif;
}

/* ─── EXACT GEOMETRIC OVERLAPPING FRAMES STYLING ─── */
.why-choose-section .choose-images-layout-wrapper {
    display: block;
    min-height: 540px; /* Safe minimum vertical layout wrapper */
}

/* Base Main Frame (Top-Left Background Frame) */
.why-choose-section .main-frame-box {
    width: 78%;
    border-radius: 30px 30px 0px 30px; /* Distinctive smooth round matching template corners */
}

.why-choose-section .base-frame-img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
}

/* Overlapping Floating Foreground Frame (Bottom-Right) */
.why-choose-section .overlapping-frame-box {
    width: 58%;
    bottom: 0px;
    right: 0px;
    border-radius: 30px 30px 30px 30px;
    border: 12px solid #ffffff; /* Thick stark isolation space from layout image */
    background-color: #ffffff;
    box-shadow: 0 15px 45px rgba(0,0,0,0.08);
}

.why-choose-section .top-frame-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    border-radius: 18px; /* Smooth inside image clipping logic */
}

/* ─── FULL MOBILE AND TABLET BREAKPOINTS OPTIMIZATION ─── */
@media (max-width: 1199px) {
    .why-choose-section .choose-main-title { font-size: 36px; }
    .why-choose-section .choose-images-layout-wrapper { min-height: 480px; }
    .why-choose-section .base-frame-img { height: 400px; }
    .why-choose-section .top-frame-img { height: 260px; }
}

@media (max-width: 991px) {
    .why-choose-section { padding-top: 60px; padding-bottom: 60px; }
    .why-choose-section .choose-images-layout-wrapper { min-height: auto; margin-bottom: 0px; }
    .why-choose-section .main-frame-box { width: 85%; margin: 0 auto; }
    .why-choose-section .overlapping-frame-box { width: 55%; right: 5%; }
}

@media (max-width: 575px) {
    .why-choose-section .choose-main-title { font-size: 28px; }
    .why-choose-section .choose-cards-container-box { padding: 30px 20px !important; gap: 4px !important; }
    .why-choose-section .choose-card-item { flex-direction: column; align-items: flex-start; }
    .why-choose-section .card-watermark-num { display: none; } /* Hide tracking number outlines on mobile for breathing room */
    .why-choose-section .main-frame-box { width: 100%; border-radius: 20px; }
    .why-choose-section .overlapping-frame-box { width: 65%; right: 0px; border-width: 6px; }
}


/* counter section */


/* .z-index-2 { z-index: 2; } */



.counter-section {
   
    
    /* Background Image setup properly layered with original template theme gradient overlay */
    background-image: linear-gradient(135deg, rgba(255, 94, 20, 0.96) 0%, rgba(235, 75, 10, 0.96) 100%), 
                      url('images/counterbg.webp'); /* Aapki asset image ka path yahan aayega */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 60px 0;
    overflow: hidden;
}

/* Flex item adjustments to keep side-by-side alignment */
.counter-section .counter-item {
    padding: 10px;
}

/* Premium White Circle Border around Icons */
.counter-section .counter-icon-box {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border: 2px dashed rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 32px;
    transition: transform 0.4s ease;
}

.counter-section .counter-item:hover .counter-icon-box {
    transform: rotate(15deg) scale(1.05);
    border-color: #ffffff;
}

/* Numbers & Details Typography */
.counter-section .counter-number {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.counter-section .counter-title {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .counter-section .counter-number { font-size: 32px; }
    .counter-section .counter-icon-box { width: 60px; height: 60px; min-width: 60px; font-size: 26px; }
}

@media (max-width: 767px) {

    .counter-section .counter-item { justify-content: start; }
}



/* proceesss sectuion */

 :root {
            --accent-orange: #ff5e14;
            --light-card-bg: #fff6f2; /* Exact premium soft cream background from image */
            --text-dark-blue: #062265;
        }

        /* Section Main Setup */
        .process-sticky-section {
                background-color: #fcfcfc;
            padding: 50px;
            font-family:   'Saira', sans-serif;;
        }

        /* ─── LEFT COLUMN STICKY CONFIG ─── */
        @media (min-width: 992px) {
            .position-sticky-lg {
                position: -webkit-sticky !important;
                position: sticky !important;
                top: 120px; /* Navbar header space setup */
                z-index: 10;
                will-change: transform; /* Hardware optimization for ultra-fast response */
            }
        }

        .process-left-sticky-box {
            margin-bottom: 40px;
        }

        /* Split Design Template Badge */
        .process-sticky-section .process-badge {
            background-color: #fff4ef;
            color: var(--accent-orange);
            border-radius: 50px;
            font-size: 14px;
            font-weight: 700;
            padding: 6px 18px 6px 6px !important;
        }

        .process-sticky-section .badge-icon-box {
            width: 28px;
            height: 28px;
            background-color: var(--accent-orange);
            color: #ffffff;
            border-radius: 50%;
            font-size: 13px;
        }

        /* Section Headings */
        .process-sticky-section .process-main-title {
            font-size: 44px;
            line-height: 1.2;
            color: var(--text-dark-blue);
            letter-spacing: -0.5px;
        }

        .process-sticky-section .process-description {
            font-size: 15px;
            line-height: 1.6;
        }

        /* Premium CTA Action Button Styling */
        .process-sticky-section .btn-process-cta {
            background-color: var(--accent-orange);
            color: #ffffff;
            border-radius: 50px;
            padding: 14px 32px;
            font-size: 15px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-shadow: 0 4px 15px rgba(255, 94, 20, 0.2);
            text-decoration: none;
        }

        .process-sticky-section .btn-process-cta:hover {
            background-color: var(--text-dark-blue);
            color: #ffffff;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(6, 34, 101, 0.2);
        }

        /* ─── RIGHT COLUMN CARDS STACKING MECHANISM ─── */
        @media (min-width: 992px) {
            .js-sticky-card {
                position: -webkit-sticky !important;
                position: sticky !important;
                top: 120px; /* JS isko override karke quick stacking offset lagayega */
                transform: translateZ(0); /* Hardware Acceleration trigger */
                will-change: top, transform, box-shadow;
                transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease, background-color 0.2s ease;
            }

            /* Stacked standard elevation drop */
            .js-sticky-card.is-stuck {
                box-shadow: 0 -15px 35px rgba(6, 34, 101, 0.07);
                background-color: #ffffff !important; /* Stack hone par active white background design */
                border-color: rgba(241, 91, 35, 0.08) !important;
            }
        }

        /* Card Main Layout Details */
        .process-sticky-section .process-step-card {
            background-color: var(--light-card-bg);
            border-radius: 20px;
            border: 1px solid rgba(241, 91, 35, 0.02);
            margin:10px;
        }

        /* Hover animation on untracked layout */
        .process-sticky-section .process-step-card:hover {
            transform: translateY(-5px) translateZ(0);
            background-color: #ffffff;
            box-shadow: 0 20px 40px rgba(6, 34, 101, 0.06);
        }

        /* Left Image Circle Box */
        .process-sticky-section .process-img-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 4px solid #ffffff;
            box-shadow: 0 6px 15px rgba(0,0,0,0.05);
        }

        .process-sticky-section .process-step-card h4 {
            color: var(--text-dark-blue);
            font-size: 22px;
        }

        /* Solid Watermark Style matching image screenshot */
        .process-sticky-section .process-card-num {
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 95px;
            font-weight: 800;
            line-height: 1;
            color: #ffece3; 
            z-index: 1;
        }

        .process-sticky-section .process-text-content,
        .process-sticky-section .process-img-circle {
            position: relative;
            z-index: 2; /* Content background watermark ke upar rahegi */
        }

        /* ─── SMART STACK RESPONSIVE MOBILE FIXES ─── */
        @media (max-width: 991px) {
            .process-main-title {
                font-size: 36px !important;
            }
            .process-sticky-section {
                padding-top: 60px;
                padding-bottom: 60px;
            }
        }

        @media (max-width: 575px) {
            .process-sticky-section .process-main-title {
                font-size: 28px !important;
            }
            .process-sticky-section .process-step-card {
                flex-direction: column;
                align-items: flex-start !important;
                padding: 30px 20px !important;
            }
            .process-sticky-section .process-img-circle {
                width: 90px;
                height: 90px;
                margin-bottom: 10px;
            }
            .process-sticky-section .process-card-num {
                top: 20px;
                transform: none;
                right: 20px;
                font-size: 60px;
            }
        }



/* Breadcrumb Section Style */
.breadcrumb-section {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 100px 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Dark Overlay */
.breadcrumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: -1;
}

/* Content Styles */
.breadcrumb-content {
    position: relative;
    z-index: 2;
}

.breadcrumb-content .page-title {
    font-size: 42px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: capitalize;
}

/* Breadcrumb Links Inline horizontal karne ke liye */
.breadcrumb-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Elements ke beech ka gap thoda badhaya hai */
}

.breadcrumb-links li {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center; /* Vertical alignment ke liye */
}

.breadcrumb-links li a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover Effect */
.breadcrumb-links li a:hover {
    color: #ff5e14; 
}

/* Bootstrap Icon Separator styling */
.breadcrumb-links .separator {
    color: #ffffff; 
    font-size: 15px; /* Bootstrap icons thode bade hote hain, isliye size 12px kiya */
}

.breadcrumb-links .active {
    color: #ff5e14; 
}

        @media screen  and (min-width:300px) and (max-width:768px){
            body,html{
                overflow-x: hidden;
                overflow-y: none;
            }
            .hero-slider .carousel-item{
                        padding: 40px 0 80px;
                        min-height: auto;
            }
            
         .btn-hero-orange, .btn-hero-blue {
        padding: 12px 17px;
        font-size: 14px;
    }
           .hero-slider .carousel-item{
            height: auto;
           }
           .hero-badge{
            font-size: 10px;
           }
               .hero-title {
        font-size: 30px;
    }
    section{
        padding: 20px 0 !important;
    }
    .about_us .image-box-two {
    position: absolute;
    bottom: -50px;
    right: 0px;
    z-index: 3;
}
.about_us .custom-shape-1 {
left: 0px;
}
.about_us .experience-badge {
    top: 22%;
    left: 81%;
}
.service_section .main-title {
        font-size: 30px;
    }
    .service_section .btn-orange-premium {
    font-size: 13px;
    }
        .process-sticky-section .process-main-title {
        font-size: 30px !important;
    }
    .process-left-sticky-box{
        margin-bottom: 0px;
    }
        .cta-img-col {
        display: none !important;
        }
        .footer-matrix-core{
            padding: 20px 0px !important;
        }

        .contact-main-title {
        font-size: 30px !important;
        }
        .footer-logo img {
    height: 100px !important;
    width: 100px !important;
    object-fit: contain;
}
    .about_us .main-title {
        font-size: 26px;
    }
   .feature-choose-section .feature-main-title {
        font-size: 26px !important;
    }
        .why-choose-section .choose-main-title {
        font-size: 26px;
    }
        .cta-heading {
        font-size: 26px !important;
    }
    .process-sticky-section .process-main-title {
        font-size: 26px !important;
    }
    .service_section .main-title {
        font-size: 26px;
    }

    .hero-desc {
    font-size: 15px;
    }
    .process-sticky-section .process-step-card h4 {
        font-size: 20px;
    }
    .airnex-cta-banner{
        min-height: auto !important;
    }
}