/* navigation new css cod  */
/* =========================
   HEADER: Black BG + White Text
   ========================= */

/* Header background */
.main-header.header-style-one .header-lower {
    background: #000 !important;
}

/* All menu links + general header text */
.main-header.header-style-one .main-menu .navigation>li>a,
.main-header.header-style-one .main-menu .navigation li a,
.main-header.header-style-one .sticky-header,
.main-header.header-style-one .sticky-header a {
    color: #fff !important;
}

/* Dropdown background + dropdown text */
.main-header.header-style-one .main-menu .navigation li ul {
    background: #000 !important;
}

.main-header.header-style-one .main-menu .navigation li ul li a {
    color: #fff !important;
}

/* Hover (optional but clean) */
.main-header.header-style-one .main-menu .navigation>li:hover>a,
.main-header.header-style-one .main-menu .navigation li ul li a:hover {
    color: #fff !important;
    opacity: 0.85;
}

/* =========================
   OVERFLOW FIX (horizontal scroll)
   ========================= */

/* Prevent tiny horizontal scroll caused by container/padding/100vw issues */
html,
body {
    overflow-x: hidden;
}

/* Make sure header wrappers never exceed viewport width */
.main-header.header-style-one,
.main-header.header-style-one .outer-box,
.main-header.header-style-one .header-lower,
.main-header.header-style-one .auto-container {
    max-width: 100%;
}


/* =========================
   FIX HEADER SIDE SPACING
   ========================= */

/* Give proper left-right padding to header content */
.main-header.header-style-one .header-lower .auto-container {
    padding-left: 40px;
    padding-right: 40px;
}

/* Tablet */
@media (max-width: 991px) {
    .main-header.header-style-one .header-lower .auto-container {
        padding-left: 25px;
        padding-right: 25px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .main-header.header-style-one .header-lower .auto-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}




/* End of navigation new css cod  */



/* ==============================
   FIX: Services Section Six slider not visible
   (because style-home-3.css is empty)
   ============================== */

/* Give spacing before slider */
.services-section-six .service-slide-wrapper {
    margin-top: 30px;
}

/* Minimal Swiper core CSS (required) */
.services-section-six .swiper-container {
    width: 100%;
    overflow: hidden;
}

.services-section-six .swiper-wrapper {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

.services-section-six .swiper-slide {
    flex: 0 0 auto;
    width: 380px;
    /* card width like your reference */
}

/* Make sure blocks are not hidden by animation */
.services-section-six .anim-fade-move {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Responsive */
@media (max-width: 991px) {
    .services-section-six .swiper-slide {
        width: 320px;
    }
}

@media (max-width: 575px) {
    .services-section-six .swiper-slide {
        width: 260px;
    }
}



/* =========================================
   FIX: Projects slider not showing (Swiper CSS missing)
   ========================================= */

.projects-section-three .project-swiper-container {
    width: 100%;
    overflow: hidden;
}

/* Swiper base behavior */
.projects-section-three .swiper-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Slide size like reference (center big + sides visible) */
.projects-section-three .swiper-slide {
    flex: 0 0 auto;
    width: 820px;
    max-width: calc(100vw - 60px);
}

/* Ensure image area has height even before image loads */
.projects-section-three .project-block-three .image-box .image,
.projects-section-three .project-block-three .image-box .image img {
    display: block;
    width: 100%;
}

.projects-section-three .project-block-three .image-box .image {
    min-height: 520px;
    /* important: prevents blank collapse */
}

/* Responsive */
@media (max-width: 991px) {
    .projects-section-three .swiper-slide {
        width: 620px;
    }

    .projects-section-three .project-block-three .image-box .image {
        min-height: 420px;
    }
}

@media (max-width: 575px) {
    .projects-section-three .swiper-slide {
        width: 88vw;
    }

    .projects-section-three .project-block-three .image-box .image {
        min-height: 320px;
    }
}

/* =========================================
   FIX: Projects slider layout (match reference)
   - remove flex gap (breaks Swiper)
   - show side slides
   - center slides + proper arrows position
   ========================================= */

.projects-section-three .outer-box,
.projects-section-three .project-swiper-outer {
    overflow: visible !important;
}

.projects-section-three .project-swiper-container {
    overflow: visible !important;
}

/* IMPORTANT: Swiper can't work properly with CSS gap on wrapper */
.projects-section-three .swiper-wrapper {
    gap: 0 !important;
    align-items: center !important;
}

/* Center arrows like reference */
.projects-section-three .custom-nav {
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 99 !important;
}


/* =========================================
   PROJECTS SLIDER: MATCH REFERENCE (CENTER BIG + SIDE PEEK)
   (Added - do not remove other code)
   ========================================= */

.projects-section-three .outer-box {
    position: relative !important;
    overflow: visible !important;
}

.projects-section-three .project-swiper-outer {
    overflow: visible !important;
}

/* show side slides by giving inner padding */
.projects-section-three .project-swiper-container {
    overflow: visible !important;
    padding: 0 220px !important;
    /* side peek space */
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* IMPORTANT: Swiper wrapper should not use gap */
.projects-section-three .swiper-wrapper {
    gap: 0 !important;
}

/* slide sizing + inactive look */
.projects-section-three .swiper-slide {
    width: 900px !important;
    max-width: 900px !important;
    transition: all 0.35s ease !important;
    opacity: 0.35 !important;
    transform: scale(0.88) !important;
}

/* active center slide */
.projects-section-three .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* near slides (left/right) */
.projects-section-three .swiper-slide.swiper-slide-prev,
.projects-section-three .swiper-slide.swiper-slide-next {
    opacity: 0.75 !important;
    transform: scale(0.92) !important;
}

/* arrows centered vertically like reference */
.projects-section-three .swiper-button-prev.custom-nav,
.projects-section-three .swiper-button-next.custom-nav {
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 999 !important;
}

.projects-section-three .swiper-button-prev.custom-nav {
    left: -10px !important;
}

.projects-section-three .swiper-button-next.custom-nav {
    right: -10px !important;
}

/* responsive */
@media (max-width: 1199px) {
    .projects-section-three .project-swiper-container {
        padding: 0 140px !important;
    }

    .projects-section-three .swiper-slide {
        width: 760px !important;
        max-width: 760px !important;
    }
}

@media (max-width: 991px) {
    .projects-section-three .project-swiper-container {
        padding: 0 70px !important;
    }

    .projects-section-three .swiper-slide {
        width: 88vw !important;
        max-width: 88vw !important;
    }
}




/* testimonule section  */

/* =========================================
   FIX: Testimonial slider stacking issue
   Make it look like screenshot-1
   ========================================= */

.testimonial-section-three .testimonial-slider-h3 {
    overflow: hidden;
    /* important */
    width: 100%;
}

.testimonial-section-three .testimonial-slider-h3 .swiper-wrapper {
    display: flex;
    /* important */
    align-items: stretch;
}

.testimonial-section-three .testimonial-slider-h3 .swiper-slide {
    flex: 0 0 100%;
    /* show one slide */
    width: 100%;
}

/* If swiper JS is NOT initialized, show ONLY first slide (prevents vertical stacking) */
.testimonial-section-three .testimonial-slider-h3:not(.swiper-initialized) .swiper-slide {
    display: none;
}

.testimonial-section-three .testimonial-slider-h3:not(.swiper-initialized) .swiper-slide:first-child {
    display: block;
}

/* Keep bottom controls aligned like reference */
.testimonial-section-three .slider-info {
    display: flex;
    align-items: center;
    gap: 18px;
}



/* navigation new css code  */

/* =========================================================
   KEEP FIRST NAVBAR ON SCROLL + DISABLE SECOND STICKY HEADER
   ========================================================= */

/* 1) Never show the sticky header (the 2nd navbar) */
/* =========================================================
   KEEP FIRST NAVBAR ALWAYS (DISABLE STICKY NAV COMPLETELY)
   ========================================================= */

/* 1) Never show the 2nd navbar (sticky header), even after scroll */
.main-header.header-style-one .sticky-header,
.main-header.header-style-one .sticky-header.fixed-header {
    display: none !important;
}

/* 2) Make the FIRST navbar stay visible while scrolling */
.main-header.header-style-one .header-lower {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999;

    /* keep same look */
    background: #000 !important;
    /* your reference is black */
}

/* 3) Prevent any animation/transform from moving/hiding it */
.main-header.header-style-one .header-lower,
.main-header.header-style-one .header-lower.anim-fade-move {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4) Because header is fixed, push page content down (adjust if needed) */
body {
    padding-top: 90px;
    /* desktop header height (adjust 80/90/100 if needed) */
}

@media (max-width: 767px) {
    body {
        padding-top: 70px;
        /* mobile header height */
    }
}


/* conter section css code  */

.count-box {
    display: flex;
    align-items: center;
    gap: 5px;

}


/* export section css code  */



/* Make the service card relative so year can sit nicely */
.service-block-seven .inner-box {
    position: relative;
}

/* Highlight Year like your example */
.service-block-seven .number.year-highlight {
    position: absolute;
    top: 20px;
    right: 24px;

    font-size: 72px;
    /* big */
    font-weight: 800 !important;
    /* bold */
    line-height: 1;

    color: red;
    /* soft premium pink */
    letter-spacing: 1px;

    z-index: 1;
    pointer-events: none;
}

/* Keep icon/text above if needed */
.service-block-seven .icon-box,
.service-block-seven .content-box,
.service-block-seven .btn-box {
    position: relative;
    z-index: 2;
}

/* Responsive */
@media (max-width: 576px) {
    .service-block-seven .number.year-highlight {
        font-size: 52px;
        top: 16px;
        right: 16px;
    }
}