.header-top-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}

.top-list{
    display:flex;
    align-items:center;
    gap:30px;
    margin:0;
    padding:0;
    list-style:none;
}

.social-icon{
    display:flex;
    align-items:center;
    gap:15px;
}

.social-icon a{
    color:#fff;
    font-size:16px;
    transition:.3s;
}

.social-icon a:hover{
    color:#00984a;
}

.top-list li a{
    color:#fff;
    text-decoration:none;
}


/* Top bar text */
.header-top-section .top-list li,
.header-top-section .top-list li a,
.header-top-section .top-list li p{
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

/* Icons */
.header-top-section .top-list li i{
    font-size: 12px;
    margin-right: 6px;
}

/* Social icons */
.header-top-section .social-icon a{
    font-size: 13px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Space between items */
.header-top-section .top-list{
    gap: 20px;
}

/* Header Layout */
.header-main{
    display: flex;
    align-items: center;
}

.header-left{
    flex: 0 0 auto;
}

.header-right{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Menu Center */
.mean__menu-wrapper{
    width: 100%;
}

.main-menu{
    display: flex;
    justify-content: center;
}

.main-menu ul{
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-menu ul li{
    margin: 0 18px;
}


.header-main{
    display: flex;
    align-items: center;
}

.header-left{
    flex: 0 0 220px;
}

.header-right{
    flex: 1;
    display: flex;
    align-items: center;
}

.mean__menu-wrapper{
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-contact-info{
    margin-left: auto;
}


.main-menu .submenu{
    display:block !important;
}

.main-menu .submenu li{
    display:block !important;
    float:none !important;
    width:100% !important;
}

.main-menu .submenu li a{
    display:block !important;
}
/* Logo swap + height cap - see the full note in main.css. Both files define
   these rules and home.css loads later on the pages that link it, so the two
   must stay in sync or the header logo changes between pages. */
.header-logo1 img{
    max-width: none;
    width: auto;
}

/* Both variants share a height so the logo does not resize when the header
   goes sticky. 62px is set by the blue lockup: it is a 3.9:1 shape, so at
   62px it is already ~244px wide against a 220px .header-left slot, and any
   taller pushes it into the menu. The square mark matches that height. */
.header-logo1 .logo-default {
    height: 52px;
}

.header-logo1 .logo-sticky {
    display: none;
    height: 62px;
}

.sticky .header-logo1 .logo-default {
    display: none;
}

.sticky .header-logo1 .logo-sticky {
    display: inline-block;
}

@media (max-width: 575px) {
    .header-logo1 .logo-default {
        height: 42px;
    }

    .header-logo1 .logo-sticky {
        height: 48px;
    }
}

@media (max-width: 320px) {

    .offcanvas__info{
        width: 100% !important;
        max-width: 100% !important;
        left: 0;
        right: 0;
    }

    .offcanvas__wrapper{
        width: 100% !important;
    }

    .offcanvas__content{
        width: 100%;
        padding: 20px 15px;
        overflow-y: auto;
    }
}
/* Hide offcanvas on Desktop */
@media (min-width: 1200px) {
    .fix-area,
    .offcanvas__info,
    .offcanvas__overlay {
        display: none !important;
    }
}

/* About Images Layout */

.about-section-2 .about-image {
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
}

.about-section-2 .about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Bottom Images */

.about-section-2 .about-image-items {
    display: flex;
    gap: 30px;
    margin-top: 25px;
    align-items: stretch;
}


.about-section-2 .about-counter-box {
    width: 35%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
}


.about-section-2 .about-image-2 {
    width: 65%;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
}


.about-section-2 .about-image-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Counter Icon */

.about-counter-box .icon img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}


.about-counter-box h2 {
    font-size: 48px;
    color: #2185e8;
    margin: 15px 0 5px;
}


.about-counter-box p {
    font-size: 16px;
}



/* Tablet */

@media(max-width:991px){

    .about-section-2 .about-image {
        height:350px;
    }


    .about-section-2 .about-image-items{
        gap:20px;
    }


    .about-section-2 .about-counter-box{
        padding:20px;
    }


    .about-counter-box h2{
        font-size:38px;
    }

}


/* Mobile */

@media(max-width:767px){

    .about-section-2 .about-image{
        height:280px;
    }


    .about-section-2 .about-image-items{
        flex-direction:column;
    }


    .about-section-2 .about-counter-box,
    .about-section-2 .about-image-2{
        width:100%;
    }


    .about-section-2 .about-image-2{
        height:200px;
    }

}
.about-wrapper-2 .about-content .about-box-items {
    margin-top: 20px !important;
}

.about-box-items .about-img img {
    width: 150px;
    height: 180px;
    object-fit: cover;
}
.about-wrapper-2 .about-image-items .about-image-2 img {
      width:100%;
    height: 300px !important;
    object-fit: cover;
}



    /* Slider container */
    .services-slider {
        position: relative !important;
        padding-bottom: 90px !important;
    }

    /* Nav wrapper: holds prev arrow + dots + next arrow together, centered */
    #servicesNavWrap {
        position: absolute !important;
        bottom: 0px !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        z-index: 999 !important;
        width: max-content !important;
    }

    /* Arrow buttons */
    #servicesNavWrap .swiper-button-prev,
    #servicesNavWrap .swiper-button-next {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        width: 45px !important;
        height: 45px !important;
        background-color: #fff !important;
        border-radius: 50% !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    #servicesNavWrap .swiper-button-prev::after,
    #servicesNavWrap .swiper-button-next::after {
        font-size: 16px !important;
        color: #000 !important;
        font-weight: 700;
    }

    /* Pagination dots */
    #servicesNavWrap .swiper-pagination {
        position: static !important;
        width: auto !important;
        margin: 0 !important;
    }


    .services-icon i{
    font-size: 38px;
    font-weight: 100;
    color: #fff;
}

.choose-us-image{
    height: 700px;
}

.choose-us-image img{
    width: 100%;
    height: 700px  !important;
   object-fit: cover;
  
}


.why-choose-us-section-2 .row{
    align-items: center;
}

/* Home: Why Choose Us sits under the "Planning a lab..." block, so trim the top
   gap slightly and give a little more breathing room before the Brand section. */
.why-choose-us-section-2.section-padding{
    padding-top: 55px;
    padding-bottom: 95px;
}

/* Below 1200px the Planning section above already ends with 80-100px of
   padding, so keep this section's top tight to avoid a double gap. */
@media (max-width: 1199px) {
    .why-choose-us-section-2.section-padding{
        padding-top: 40px;
        padding-bottom: 120px;
    }
}

@media (max-width: 991px) {
    .why-choose-us-section-2.section-padding{
        padding-top: 20px;
        padding-bottom: 100px;
    }
}

.why-choose-us-section-2 .choose-us-image{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.why-choose-us-section-2 .choose-us-image img{
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}


/* Very small screens (≤400px): shrink the services slider nav so the prev/next
   arrow buttons don't get clipped at the screen edges (the centered row was
   wider than the viewport at 320px). */
@media (max-width: 400px) {
    #servicesNavWrap {
        gap: 12px !important;
        max-width: 100% !important;
    }
    #servicesNavWrap .swiper-button-prev,
    #servicesNavWrap .swiper-button-next {
        width: 38px !important;
        height: 38px !important;
    }
    #servicesNavWrap .swiper-button-prev::after,
    #servicesNavWrap .swiper-button-next::after {
        font-size: 14px !important;
    }
    #servicesNavWrap .swiper-pagination-bullet {
        width: 7px !important;
        height: 7px !important;
        margin: 0 3px !important;
    }
}

.brand-slide .swiper-slide{
    display: flex;
    justify-content: center;
    align-items: center;
}

.barnd-image{
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.barnd-image img{
    /* Fixed height normalises every logo to the same optical size,
       regardless of its own aspect ratio; max-width caps very wide logos. */
    height: 70px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
    transition: all .3s ease;
}

.barnd-image img:hover{
    transform: scale(1.05);
}

@media (max-width:991px){
    .barnd-image{
        height:125px;
    }

    .barnd-image img{
        height:60px;
        max-width:185px;
    }
}

.project-section-2 .project-image-2{
    height: 450px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.project-section-2 .project-image-2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-section-2 .project-content{
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
}

/* Zig-zag layout */
.project-section-2 .zigzag-card{
    margin-top: 60px;
}

/* Mobile & Tablet */
@media (max-width: 991px){
    .project-section-2 .zigzag-card{
        margin-top: 0;
    }

    .project-section-2 .project-image-2{
        height: 380px;
    }
}

.marquee-section-2 .cmn-textslide img{
    width: 110px;
    height: 110px;
    object-fit: contain;
    margin-right: 10px;
    vertical-align: middle;
}


.cta-left-items .icon img{
    width: 70px;
    height: 70px;
    object-fit: contain;
}
.cta-bg{
    background: #00984a;
    border-radius: 20px;
}
.cta-wrapper-2::before,
.zoom-effect-style::before{
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
}
.cta-section-2{
    background: transparent !important;
}

.cta-wrapper-2,
.zoom-effect-style{
    background-image: none !important;

    position: relative;
}

.cta-wrapper-2::before,
.cta-wrapper-2::after,
.zoom-effect-style::before,
.zoom-effect-style::after{
    content: none !important;
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
}

.testimonial-image img {
    width: 100%;
    /* was 650px !important - the desktop height is now driven by the
       content column (see "image column matches the content column" below) */
    height: 650px;
    object-fit: cover;
    position: center right;
}

@media (max-width: 991px) {
    .testimonial-image img {
        height: 500px;
    }
}

@media (max-width: 767px) {
    .testimonial-image img {
        height: 400px;
    }
}

.testimonial-image {
    width: 100%;
    height: 650px;
    overflow: hidden;
}

.testimonial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}
.testimonial-image {
    position: relative;
    overflow: visible !important;
}

.testimonial-image img {
    width: 100%;
    height: 650px;
    object-fit: cover;
    object-position: 80% center;
}

.counter-box {
    z-index: 5;
    position: absolute;
}

.quote-img {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-img i {
    font-size: 28px;
    color: #00984a;
}

.services-section-2::before {
    display: none !important;
}

.services-section-2 {
    background-image: none !important;
    background-color: #78c26826; /* your required color */
}
.black-heading {
    color: #000 !important;
}

.services-section-2 .services-box-items-2 {
    background: #204066 !important;
    transition: none !important;
}

/* Alternating "arc" stagger on the services slider (desktop only). Cards
   without .style-margin lift up a little; .style-margin cards drop down a
   little. Because the slider advances one card at a time, each 3-card view
   reads sides-up / middle-down, then flips to sides-down / middle-up on the
   next step, repeating. translateY keeps every slide the same height (unlike
   margin-top), and the class travels with Swiper's loop clones so the pattern
   stays correct as it scrolls. */
@media (min-width: 992px) {
    /* :hover pinned to the same value so the card never shifts on hover */
    .services-section-2 .services-slider .services-box-items-2,
    .services-section-2 .services-slider .services-box-items-2:hover {
        transform: translateY(-20px) !important;
    }
    .services-section-2 .services-slider .services-box-items-2.style-margin,
    .services-section-2 .services-slider .services-box-items-2.style-margin:hover {
        transform: translateY(10px) !important;
        margin-top: 0px !important; /* drop the old 80px margin stagger */
    }
}


/* Remove hover effect (keep the card's resting transform so the slider's
   staggered cards don't jump when hovered). */
.services-section-2 .services-box-items-2:hover {
    background: #204066 !important;
}

/* Card text color */
.services-section-2 .services-box-items-2 h3 a,
.services-section-2 .services-box-items-2 .services-list li {
    color: #fff !important;
}

/* Check icon */
.services-section-2 .services-box-items-2 .services-list li i {
    color: #fff !important;
}

.services-section-2 .services-icon i {
    font-size: 50px !important;
}

.time-box-items {
    visibility: visible !important;
    opacity: 1 !important;
}
.testimonial-box-area {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.testimonial-box-items {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.testimonial-box-area {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.testimonial-box-items {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.testimonial-box-area {
    position: relative;
    padding-left: 30px;
}

.testimonial-box-area::before {
    content: "";
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #024ca1;
}

/* services Slider Navigation */
#servicesNavWrap {
    margin-top: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}


/* Pagination Dots */
#servicesNavWrap .swiper-pagination {
    position: relative;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

#servicesNavWrap .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #204066;
    opacity: 0.5;
    border-radius: 50%;
    transition: all 0.3s ease;
}


#servicesNavWrap .swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 20px;
    background: #00984a;
    opacity: 1;
}


/* Navigation Arrows */
#servicesNavWrap .swiper-button-prev,
#servicesNavWrap .swiper-button-next {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}


#servicesNavWrap .swiper-button-prev::after,
#servicesNavWrap .swiper-button-next::after {
    font-size: 16px;
    color: #fff;
}


/* Hover */
#servicesNavWrap .swiper-button-prev:hover,
#servicesNavWrap .swiper-button-next:hover {
    background: #00984a;
    border-color: #00984a;
}


/* Mobile */
@media(max-width:767px){

    #servicesNavWrap {
        margin-top: 30px;
        gap: 15px;
    }

    #servicesNavWrap .swiper-button-prev,
    #servicesNavWrap .swiper-button-next {
        width:35px;
        height:35px;
    }

    #servicesNavWrap .swiper-pagination-bullet-active {
        width:22px;
    }

}
.services-slider {
    padding-bottom: 60px;
}


/* Navigation spacing */
#servicesNavWrap {
    margin-top: 20px;
}


/* Mobile */
@media(max-width:767px){
    .services-slider {
        padding-bottom: 40px;
    }

    #servicesNavWrap {
        margin-top: 15px;
    }
}

.about-image-2 {
    height: 260px;
    overflow: hidden;
}

.about-image-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-counter-box .icon i {
    font-size: 50px;
    color: #00984a;
}
/* About images equal height fix */

.about-image,
.about-image-2 {
    height: 100%;
    overflow: hidden;
}

.about-image img,
.about-image-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Main image height */
.about-image {
    height: 450px;
}


/* Bottom small image */
.about-image-2 {
    height: 220px;
}


/* Remove extra spacing below images */
.about-image-items {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.about-image-items .about-counter-box,
.about-image-items .about-image-2 {
    height: 220px;
}
.about-img {
    width: auto;
    height: auto;
    min-width: auto;
    display: flex;
   
}

.about-img i {
    font-size: 45px;
    line-height: 1;
    color: #00984a;
    display: inline-block;
}


/*responsive*/
@media (max-width: 767px) {
    .choose-us-image img {
        height: 350px !important;
    }
    .project-section-2 .section-title {
    margin-bottom: 50px;
}
.testimonial-box-items {
    border-left: 4px solid #024ca1;
    padding-left: 25px;
    margin-bottom: 25px;
}
.testimonial-box-items {
    width: 95%;
    margin-left: -20px;
    border-left: 4px solid #024ca1;
    padding-left: 25px;
}
.counter-box {
    width: 220px;
    padding: 20px;
  
}
.testimonial-image {
    position: relative;
}

.testimonial-image .counter-box {
   
    position: absolute;
    left: 10px !important;
    right: auto !important;
    transform: translateX(-50%);
    bottom: 30px;
}
}

@media (min-width: 768px) and (max-width: 991px) {
    .choose-us-image img {
        height: 450px !important;
    }

}

@media (min-width:768px) and (max-width:991px) {

    .testimonial-image {
        width: 95%;
        margin: 0 auto;
    }

    .testimonial-image img {
        width: 100%;
        height: 350px;
        object-fit: cover;
    }

    .testimonial-image .counter-box {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 20px;
    }

}
@media (min-width:768px) and (max-width:991px) {

    .testimonial-section-2 .col-lg-6:first-child {
        display: flex;
        justify-content: center;
    }

    .testimonial-image {
        width: 95%;
        margin: 0 auto;
    }

    .testimonial-image img {
        width: 100%;
        height: 350px;
        object-fit: cover;
        display: block;
    }

}
@media (min-width:768px) and (max-width:991px) {

    .testimonial-section-2 .row {
        justify-content: center;
    }

    .testimonial-section-2 .col-lg-6:first-child {
        width: 100%;
        display: flex !important;
        justify-content: center !important;
    }

    .testimonial-image {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        left: auto !important;
        right: auto !important;
    }

    .testimonial-image img {
        width: 100% !important;
        height: 600px !important;
        object-fit: cover;
        display: block;
    }

}
@media (min-width:768px) and (max-width:1024px){

    .testimonial-image .counter-box {
        left: 5% !important;
        bottom: 20px;
        transform: translateX(-50%);
    }

}

/* Tablet/mobile: the photo is capped at 320px (main.css) but .testimonial-image
   kept its fixed 650px desktop height, so the counter card anchored to the
   container's bottom landed well below the photo. Let the container hug the
   photo and sit the card inside its bottom-left corner. */
@media (max-width: 991px) {
    .testimonial-wrapper-2 .testimonial-image {
        height: auto !important;
    }

    .testimonial-wrapper-2 .testimonial-image img {
        display: block;
    }

    .testimonial-wrapper-2 .testimonial-image .counter-box {
        left: 16px !important;
        right: auto !important;
        bottom: 16px !important;
        transform: none !important;
        padding: 22px 26px;
        width: auto;
        max-width: calc(100% - 32px);
    }

    .testimonial-wrapper-2 .testimonial-image .counter-box h2 {
        font-size: 34px;
        margin-bottom: 4px;
    }

    .testimonial-wrapper-2 .testimonial-image .counter-box p {
        font-size: 15px;
        line-height: 1.4;
        margin: 0;
    }
}
@media(max-width:767px){

   
   

    .cta-right-items .theme-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        
    }

}


#formMessage .alert {
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 15px;
}
    /* ===== Fix black gap above CTA section ===== */
    .cta-section-2 {
        background-color: #ffffff !important; /* match your page bg color */
        margin-top: 0 !important;
        padding-top: 60px;
        overflow: hidden;
    }

    .cta-wrapper-2 {
        margin-top: 0 !important;
        position: relative;
        z-index: 1;
    }

    /* If a previous section has negative bottom margin pulling CTA up, reset it */
    .cta-section-2 + section,
    section:has(+ .cta-section-2) {
        margin-bottom: 0 !important;
    }


    .appointment-wrapper-2 .row {
    align-items: end !important;
}

.appointment-wrapper-2 .form-clt {
    height: 100%;
}

.appointment-wrapper-2 .form-clt input,
.appointment-wrapper-2 .form-clt select,
.appointment-wrapper-2 .form-clt button {
    height: 55px;
}

.appointment-wrapper-2 .theme-btn {
    /* inline-flex + width:auto so the button hugs its label. It was width:90%,
       which was fine inside a narrow grid column but stretched across the whole
       form once the submit moved onto its own line. */
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    height: 55px;
    width: auto;
    border-radius: 50px;
    padding: 5px 24px 5px 4px;
}

/* The reduced (non-full-width) submit sits in the last grid column; right-align
   it so its right edge meets the form's right padding, matching the space on
   the left of the first field — i.e. equal left/right breathing room. */
.appointment-wrapper-2 .appointment-submit {
    text-align: right;
}

/* Left-align the submit button on mobile (fields stack full-width) */
@media (max-width: 767px) {
    .appointment-wrapper-2 .appointment-submit {
        text-align: left;
    }
}

/* #formMessage used to land inside .row: the form's .row div was never closed
   before </form>, so the parser kept .row open and adopted the message div
   into it. This rule hid it to stop it breaking the grid - which also meant
   the success and error alerts were invisible and the form looked like it did
   nothing at all. The markup is closed properly now and the message sits after
   the form, so only an empty placeholder is hidden. Do not put this back to a
   blanket display:none or the alerts disappear again. */
.appointment-wrapper-2 #formMessage:empty {
    display: none;
}
/* Allow submenu click */
.main-menu .submenu,
.main-menu .sub-menu {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

.main-menu li {
    position: relative;
}

.main-menu .submenu li a,
.main-menu .sub-menu li a {
    pointer-events: auto !important;
    cursor: pointer;
}

/* Prevent parent overlay blocking */
.header-section,
.menu-area,
.main-menu {
    position: relative;
    z-index: 999;
}
.appointment-wrapper-2,
.appointment-wrapper-2 form,
.appointment-wrapper-2 .form-clt,
.appointment-wrapper-2 select {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
}

.appointment-wrapper-2 select {
    cursor: pointer;
}
input[type="email"] {
    text-transform: lowercase;
}

/* Mobile Brand Section Padding */
@media (max-width: 767px) {

    .mobile-brand-padding {
        padding-top: 40px;
        padding-bottom: 40px;
    }

}
.project-slide-2 {
    overflow: hidden;
}

.project-wrapper-2 {
    overflow: hidden;
    padding: 0 15px;   /* left-right spacing */
}

.project-slide-2 {
    overflow: hidden;
    padding: 0;
    margin: 0 -15px;   /* offset the parent padding */
}

.project-slide-2 .swiper-wrapper {
    box-sizing: border-box;
}

.project-slide-2 .swiper-slide {
    box-sizing: border-box;
    width: auto;   /* let Swiper calculate exact width via slidesPerView */
}


.project-section-2 .array-button-2 .array-next,
.project-section-2 .array-button-2 .array-next:hover,
.project-section-2 .array-button-2 .array-next:focus,
.project-section-2 .array-button-2 .array-next:active {
    background-color: var(--theme-color) !important;
    color: var(--white) !important;
}

.project-section-2 .array-button-2 .array-prev:hover,
.project-section-2 .array-button-2 .array-prev:focus,
.project-section-2 .array-button-2 .array-prev:active {
    background-color: var(--theme-color) !important;
    color: var(--white) !important;
}


/* Blog layout adjustments - image smaller, content wider, font reduced */
/* Make both blog cards fill their (equal-height) column so a longer title or
   description doesn't leave one card taller than the other. */
.team-section-2 .team-box-items-2 {
    height: 100%;
    /* More compact blog cards on the home page */
    padding: 14px;
    gap: 18px;
    align-items: center;
}

.team-section-2 .team-box-items-2 .team-image {
    max-width: 140px;
    height: 180px; /* matches the blog listing page (blogs.html) thumbnail */
    flex-shrink: 0;
    overflow: hidden;
}

.team-section-2 .team-box-items-2 .team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-section-2 .team-box-items-2 .team-content {
    flex: 1;
}

.team-section-2 .team-box-items-2 .team-content h3 {
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 6px;
}

.team-section-2 .team-box-items-2 .team-content .sub-text {
    font-size: 12px;
    padding: 6px 10px;
    margin-bottom: 8px;
}

.team-section-2 .team-box-items-2 .team-content p {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blogs page: allow one extra line (3) in the card description. Scoped to
   .page-blogs so the homepage blog preview cards stay at 2 lines. */
.page-blogs .team-section-2 .team-box-items-2 .team-content p {
    -webkit-line-clamp: 3;
}

.team-section-2 .team-box-items-2 .team-content .theme-btn {
    font-size: 12px;
    padding: 4px 16px 4px 5px;
    margin-top: 8px;
}

/* Smaller circular icon on the blog-card "Read More" buttons */
.team-section-2 .team-box-items-2 .team-content .theme-btn i {
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin-right: 10px;
    font-size: 11px;
}

@media (max-width: 1199px) {
    .team-section-2 .team-box-items-2 .team-image {
        max-width: 100%;
        width: 100%;
        height: 190px;
    }
}

@media (max-width: 767px) {
    .team-section-2 .team-box-items-2 .team-image {
        max-width: 100%;
        width: 100%;
        height: 175px;
    }
    .testimonial-wrapper-2 .testimonial-image {
    max-width:700px;
    position: relative;
   
}

.about-wrapper .about-image img {
    width: 100%;
    height: 300px !important;
    margin-top: 15px;
    border-radius: 10px;
}

/* Collapse the image container to fit the image (removes empty gap below) */
.about-section .about-image {
    height: auto !important;
}

/* Hide the floating image on mobile only (kept on tablet) */
.about-section .about-img-3 {
    display: none;
}

}


/* Main image container */
.about-section .about-image {
    min-height: 700px !important;
    position: relative;
}

.about-wrapper .about-image img {
    width: 100%;
    height: 600px;
    margin-top: 60px;
    border-radius: 10px;
}

/* Floating image container */
.about-section .about-img-3 {
    width: 280px; /* adjust if needed */
}

/* Floating image */
.about-section .about-img-3 img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-top: 200px;
   
}

/* Reduce gap between image and content on mobile */
@media (max-width: 991px) {

    .about-section .about-image {
        min-height: auto !important;
        margin-bottom: 10px !important;
    }

    .about-section .about-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .about-section .row {
        row-gap: 10px !important;
    }

    .about-section .col-lg-5,
    .about-section .col-lg-7 {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

}

/* Consultancy section image — the shared .about-section rules force the image
   into a fixed 600px height (700px min-height container), which crops/stretches
   it. Scoped to .consultancy-section: let the image size to its natural aspect
   ratio so the whole picture is visible. */
/* Make the image column the same height as the text column, so the image runs
   from the "Consultancy" subheading line down to the button line. Override the
   row's align-items-center (which would vertically centre a short image) with
   stretch, and let the image fill that stretched height. */
.consultancy-section .about-wrapper .row {
    align-items: stretch !important;
}

/* The image (consultancy.webp) is taller than the text, so if left in flow it
   would drive the row height and spill below the button. Instead the text
   column sets the height, and the image is pulled out of flow and absolutely
   stretched to fill it — top at the subheading, bottom exactly at the button. */
.consultancy-section .col-lg-5 {
    position: relative;
}

.consultancy-section .about-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    min-height: auto !important;
    height: auto !important;
    width: auto;
    margin: 0 !important;
}

.consultancy-section .about-image img {
    width: 100% !important;
    height: 100% !important;     /* fills the text-column height, ends at button */
    object-fit: cover;
    margin: 0 !important;
    border-radius: 10px;
}

/* Columns stack on tablet/mobile — put the image back in flow with a fixed
   height so it doesn't collapse. */
@media (max-width: 991px) {
    .consultancy-section .about-image {
        position: static;
        height: auto !important;
    }

    .consultancy-section .about-image img {
        height: 360px !important;
    }
}

/* Home "About Us" section — trim its top padding slightly (section-padding
   gives 75px). Scoped via .home-about so the consultancy section that shares
   .about-section is unaffected. Higher specificity beats .section-padding. */
.about-section.home-about {
    padding-top: 50px;
}

/* Section headings (.sec_title) weren't shrinking enough on tablet/mobile —
   they read the same as desktop. Force a clear step-down at each breakpoint.
   !important beats any inline size the SplitText (tz-itm-anim) animation bakes
   onto the heading. */
@media (max-width: 991px) {
    .section-title .sec_title {
        font-size: 34px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 767px) {
    .section-title .sec_title {
        font-size: 28px !important;
    }
}

@media (max-width: 480px) {
    .section-title .sec_title {
        font-size: 24px !important;
    }
}

/* CTA bottom spacing before footer (matches hospitals.html) */
.cta-custom-spacing {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media (max-width: 767px) {
    .cta-custom-spacing {
        padding-top: 100px;
        padding-bottom: 60px;
    }
}

/* Newsletter-style CTA card (services.html): white button so it stands out
   on the green card, inverting to green on hover. */
.cta-newsletter-wrapper .form-content .theme-btn {
    margin-top: 28px;
    background-color: #ffffff;
    color: var(--theme-color);
}

.cta-newsletter-wrapper .form-content .theme-btn i {
    background-color: var(--theme-color);
    color: #ffffff;
}

.cta-newsletter-wrapper .form-content .theme-btn:hover {
    background-color: var(--theme-color);
    color: #ffffff;
}

.cta-newsletter-wrapper .form-content .theme-btn:hover i {
    background-color: #ffffff;
    color: var(--theme-color);
}

/* services.html "What We Offer" — More About Us button turns white on hover */
.theme-btn.btn-hover-white:hover {
    background-color: #ffffff;
    color: #00984a;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.theme-btn.btn-hover-white:hover i {
    background-color: #00984a;
    color: #ffffff;
}

/* About Section Shapes */
.about-section .shape-1-img img {
    width: 70px;
    height: auto;
}

.about-section .shape-2-img img {
    width: 60px;
    height: auto;
}

.about-section .shape-3-img img {
    width: 80px;
    height: auto;
}


/* Reduce gap between Collaborations & Our Clients */

.brand-section hr{
    margin: 30px 0 !important;
}

.brand-section .row.mb-5{
    margin-bottom: 30px !important;
}

.brand-section .row.mt-5{
    margin-top: 30px !important;
}
/*-----------------------[ Testimonials: horizontal auto carousel ]-----------
   Was a vertically stacked list beside a sticky image. The stack decoration
   (the vertical rule via ::before and its left padding) no longer applies now
   that the items slide horizontally.
----------------------------------------------------------------------------*/

.testimonial-box-area {
    padding-left: 0;
}

.testimonial-box-area::before {
    display: none;
}

/* the swiper must clip its slides even though the wrapper is overflow:visible */
.testimonial-box-area .testimonial-slider {
    overflow: hidden;
    width: 100%;
}

/* Earlier rules in this file force `display:block !important` /
   `overflow:visible !important` on the testimonial area and items (left over
   from the stacked layout). Restate the flex track explicitly so those cannot
   flatten the slider — without a flex wrapper the autoplay still ticks but no
   movement is visible. */
.testimonial-box-area .testimonial-slider .swiper-wrapper {
    display: flex !important;
    align-items: stretch;
}

.testimonial-box-area .swiper-slide {
    height: auto;          /* let slides match the tallest, not collapse */
    display: flex;
    flex-shrink: 0;
}

.testimonial-box-area .swiper-slide .testimonial-box-items {
    width: 100%;
    /* An earlier `.testimonial-box-items` rule sets width:95% and
       margin-left:-20px. The width is overridden above, but the negative
       margin was not — it shifted the card left and left a gap on the right
       inside the slider. Reset it so the card fills the slide evenly. */
    margin-left: 0;
}

/*-----------------------[ Partner logos: heading above the carousel ]--------
   Full-width centred section title, matching the other section headings, with
   the logo slider directly beneath it.
----------------------------------------------------------------------------*/

.brand-section .brand-heading {
    margin-bottom: 10px;
}

@media (max-width: 991px) {
    .brand-section .brand-heading {
        margin-bottom: 32px;
    }
}

/*-----------------------[ Decorative brand vectors ]-------------------------
   Faint healthcare line-art sitting behind section content. Deliberately very
   low opacity and pointer-events:none so they never compete with the copy or
   intercept clicks. Hidden on small screens where there is no room for them.
----------------------------------------------------------------------------*/

.brand-shape {
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 0.13;
}

.brand-shape img {
    display: block;
    width: 100%;
    height: auto;
}

/* About section */
.about-section .shape-1-img.brand-shape {
    width: 190px;
    top: 40px;
    right: 40px;
}

.about-section .shape-2-img.brand-shape {
    width: 230px;
    bottom: 30px;
    left: 30px;
}

/* Our Process */
.time-table-section-2 .time-shape-1.brand-shape {
    width: 220px;
}

.time-table-section-2 .time-shape-2.brand-shape {
    width: 260px;
}

/* keep section content above the artwork */
.about-section .container,
.time-table-section-2 .container {
    position: relative;
    z-index: 1;
}

/* Compact process step cards (home + services): tighter padding and a smaller
   step number keep the cards short; the 24px title / 18px copy are the sizes
   the client asked for. */
.time-table-wrapper-2 .time-box-items {
    padding: 22px 28px;
    gap: 22px;
    margin-top: 16px;
}

.time-table-wrapper-2 .time-box-items .time-table-content h3 {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 0;
}

.time-table-wrapper-2 .time-box-items .time-table-content p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
}

.time-table-wrapper-2 .time-box-items .time-number {
    font-size: 56px;
    line-height: 1;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .time-table-wrapper-2 .time-box-items {
        padding: 20px 22px;
    }
}

@media (max-width: 991px) {
    .brand-shape {
        display: none;
    }
}


/* "our blogs" on the homepage sits directly under the testimonials, so the
   two 120px paddings stacked into ~240px of gap. Reduced rather than zeroed
   (unlike the partners section above it) because this one has a dark
   background - with no top padding the heading would sit flush against the
   top edge of the dark panel.

   Scoped to its own class: blogs.html also uses .team-section-2 and keeps
   the standard spacing there. */
.blog-section-tight {
    padding-top: 60px;
    /* A little more breathing room below the blog cards before the CTA */
    padding-bottom: 100px;
}

@media (max-width: 991px) {
    .blog-section-tight {
        padding-top: 45px;
        padding-bottom: 90px;
    }
}


/*-----------------[ Testimonials: stacked reading order ]--------------------
   Desktop is two columns - image left, content right. When they stack below
   992px the image column came first, so the photo appeared above the
   "OUR TESTIMONIAL / Trusted by Healthcare Entrepreneurs" heading.

   Wanted order: heading -> image -> rating + reviews. The heading is not a
   sibling of the image, it is nested inside the right-hand column, so a plain
   column swap cannot interleave them. display:contents dissolves that column
   and its .testimonial-content wrapper, promoting the heading, star rating
   and review slider to be siblings of the image column - at which point flex
   order can place the image between them.

   Safe to dissolve: .testimonial-content carries no box styling of its own,
   only descendant rules. Bootstrap's `.row > *` then applies to the promoted
   children, so they keep the grid gutter and vertical spacing.
----------------------------------------------------------------------------*/

@media (max-width: 991px) {

    .testimonial-section-2 .testimonial-wrapper-2 > .row {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .testimonial-section-2 .testimonial-wrapper-2 > .row > .col-lg-6:last-child,
    .testimonial-section-2 .testimonial-wrapper-2 .testimonial-content {
        display: contents;
    }

    .testimonial-section-2 .testimonial-wrapper-2 .testimonial-content > .section-title {
        order: 1;
    }

    .testimonial-section-2 .testimonial-wrapper-2 > .row > .col-lg-6:first-child {
        order: 2;
    }

    .testimonial-section-2 .testimonial-wrapper-2 .testimonial-content > .star-items {
        order: 3;
    }

    .testimonial-section-2 .testimonial-wrapper-2 .testimonial-content > .testimonial-box-area {
        order: 4;
    }

    /* the promoted children lose the column's gutter padding with it */
    .testimonial-section-2 .testimonial-wrapper-2 .testimonial-content > * {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    /* separate the heading from the image now sitting under it */
    .testimonial-section-2 .testimonial-wrapper-2 .testimonial-content > .section-title {
        margin-bottom: 8px;
    }
}


/* Mobile */
@media (max-width: 767px) {

    .services-slider .swiper-slide{
        height: auto !important;
        display: flex;
    }

    .services-slider .services-box-items-2{
        display: flex;
        flex-direction: column;
        /* The slide is a flex row; without an explicit width this card shrinks
           to its content and packs left, leaving a gap on the right. Force it
           to fill the slide so it is centred/full-width on mobile. */
        width: 100%;
        height: 430px;
        min-height: 330px; /* Increase/decrease as needed */
    }

    .services-slider .services-list{
        flex: 1;
    }

    .services-slider .services-btn{
        margin-top: auto;
    }

}


.brand-spacing {
    padding-top: 80px;
    padding-bottom:45px;
}

/* Tablet/mobile: match the .section-padding bottom used by the other sections
   (100px below 1200px, 80px below 992px) so the gap before the next section
   is consistent down the page. */
@media (max-width: 1199px) {
    .brand-spacing {
        padding-bottom: 100px;
    }
}

@media (max-width: 991px) {
    .brand-spacing {
        padding-bottom: 80px;
    }
}


/* 1024px View */
@media (min-width: 992px) and (max-width: 1199px) {

    .services-slider .swiper-slide{
        display: flex;
        height: auto;
    }

    .services-slider .services-box-items-2{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 470px; /* Adjust if needed */
    }

    .services-slider .services-list{
        flex: 1;
    }

    .services-slider .services-btn{
        margin-top: auto;
    }

    /* Remove alternate top spacing */
    .services-slider .style-margin{
        margin-top: 0 !important;
    }
}
/* ------------------------------------------------------------------
   Heading semantics (AEO): the hero carousel previously used <h1> on
   every slide, giving the homepage multiple H1s. Slide 2 now uses <h2>.
   These rules reproduce the <h1> rendering exactly, so the slide looks
   and behaves identically - this is a semantics-only change.
   Mirrors: main.css `h1` base + breakpoints, and `.hero-2 .hero-content h1`.
   ------------------------------------------------------------------ */
.hero-2 .hero-content h2 {
  font-size: 68px;
  line-height: 122%;
  font-weight: 700;
  color: var(--white);
  text-transform: capitalize;
  margin-top: 20px;
}

@media (max-width: 1399px) {
  .hero-2 .hero-content h2 { font-size: 60px; }
}

@media (max-width: 991px) {
  .hero-2 .hero-content h2 { font-size: 58px; }
}

@media (max-width: 767px) {
  .hero-2 .hero-content h2 { font-size: 50px; }
}

@media (max-width: 575px) {
  .hero-2 .hero-content h2 { font-size: 40px; }
}

@media (max-width: 470px) {
  .hero-2 .hero-content h2 { font-size: 32px; }
}

/* ==========================================================
   Consultancy - drop the bottom padding on mobile and
   tablet. .section-padding is a shorthand (main.css:694 sets
   80px 0 below 992px), so the section carries 80px of dead
   space under the Explore Consultancy button. The next
   section's own top padding already separates them.
========================================================== */
@media (max-width: 991px) {
    .consultancy-home.section-padding {
        padding-bottom: 0;
    }
}

/* ==========================================================
   Testimonials - no top padding at any width. The preceding
   section's own bottom padding already separates them, so
   the padding above the heading was dead space. The bottom
   is raised from the 75px .section-padding default so the
   CTA banner that follows does not crowd the cards.
========================================================== */
.testimonial-home.section-padding {
    padding-top: 0;
    padding-bottom: 120px;
}

@media (max-width: 991px) {
    .testimonial-home.section-padding {
        padding-bottom: 80px;
    }
}

/* Desktop: image column matches the content column height. The photo is
   taken out of flow so its natural height no longer stretches the row; it
   then fills the column (which .row stretches to the taller, content side)
   and is cropped to fit with object-fit. The counter badge stays positioned
   against .testimonial-image as before. */
@media (min-width: 992px) {
    .testimonial-home .testimonial-wrapper-2 .testimonial-image {
        height: 100%;
    }

    .testimonial-home .testimonial-wrapper-2 .testimonial-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 88%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
}

/* ------------------------------------------------------------------
   Tablet + mobile hero height (homepage banner)

   main.css sets `.hero-2 .hero-height { padding: 190px 0 250px }` with only
   the top padding stepped down on small screens, so the banner stayed very
   tall below desktop. The top padding only has to clear the absolutely
   positioned header, which under 1200px is the 42-52px logo plus its padding
   (the 35px contact bar is hidden there), so the old 135-160px left a lot of
   slack.

   The bottom padding is what .appointment-wrapper-2 pulls back up into
   (margin-top: -120px), so the gap left between the hero copy and the
   consultation card is padding-bottom minus 120px - kept at ~30-50px here.

   The tiers must stay in ascending-narrowness order: they have equal
   specificity, so the last matching block wins.
   ------------------------------------------------------------------ */
@media (max-width: 1199px) {
  .hero-2 .hero-height {
    padding: 110px 0 150px;
  }
}

@media (max-width: 767px) {
  .hero-2 .hero-height {
    padding: 110px 0 170px;
  }
}

@media (max-width: 575px) {
  .hero-2 .hero-height {
    padding: 95px 0 160px;
  }
}

/* Shorter banner. The 250px desktop bottom padding (150-170px below 1200px)
   was headroom for the consultation card that used to overlap the hero by
   120px; the About section follows directly now, so most of it was empty
   space. Top padding still has to clear the absolutely positioned header
   (~154px on desktop, see main.css .hero-2 .hero-height), so it only comes
   down a little. Same specificity as the tiers above - order matters. */
.hero-2 .hero-height {
  padding: 175px 0 110px;
}

@media (max-width: 1199px) {
  .hero-2 .hero-height {
    padding: 110px 0 90px;
  }
}

@media (max-width: 767px) {
  .hero-2 .hero-height {
    padding: 110px 0 60px;
  }
}

@media (max-width: 575px) {
  .hero-2 .hero-height {
    padding: 95px 0 50px;
  }
}


/* ==========================================================================
   CLIENT LOGO WALL (.client-wall)
   The same 13-logo component as project.html, with the rules copied from
   project.css so a page that loads only home.css can use it. Not currently
   placed on the home page; the About page uses the 7-logo orbit (about.css).
   ========================================================================== */
.client-wall-intro {
    max-width: 760px;
    margin: 18px auto 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.75;
}

/* Flex rather than grid, so a short final row centres itself under the one
   above instead of hanging off to the left - the count of logos will not
   always divide evenly by the columns. --cols/--gap drive the item width,
   so the breakpoints below only need to change those two numbers. */
.client-wall {
    --cols: 5;
    --gap: 30px;
    --row-gap: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--gap);
    row-gap: var(--row-gap);
    margin-top: 46px;
}

/* Padding is in px, not %: percentage padding on a flex item resolves
   against the whole row's width, not the item's, so a % here would inset
   every logo about five times too far. */
.client-wall__item {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 22px;
    transition: transform 0.3s ease;
}

.client-wall__item:hover {
    transform: scale(1.06);
}

/* Per-logo optical sizing. The Dr. Sridevi lockup is a wide, short strip
   that reads undersized at the padding the other logos share, so it gets
   a tighter inset. */
.client-wall__item--lg {
    padding: 4px;
}

.client-wall__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* max-width/max-height rather than a stretched width, so every logo keeps
   its own aspect ratio and the small ones - the Affiniti wordmark is only
   395px wide - are never upscaled into a blur. */
.client-wall__logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 1199px) {
    .client-wall {
        --cols: 4;
        --gap: 26px;
    }
}

@media (max-width: 991px) {
    .client-wall {
        --cols: 3;
        margin-top: 36px;
    }
}

@media (max-width: 575px) {
    .client-wall {
        --cols: 2;
        --gap: 18px;
        --row-gap: 0;
    }

    .client-wall__item {
        padding: 14px;
    }
}

.brand-section .client-wall__item {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
}

.client-wall-cta {
    margin-top: 40px;
}

/* Testimonial section: intro copy + Google Reviews call-to-action (the
   placeholder review slider was removed; real reviews are collected on Google). */
.testimonial-home .testimonial-intro {
    color: #666;
    line-height: 1.9;
    margin: 22px 0 28px;
}

.testimonial-home .google-reviews-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
}

.testimonial-home .google-reviews-link {
    font-weight: 600;
    color: var(--header);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.testimonial-home .google-reviews-link i {
    color: #f5b301;
    margin-right: 4px;
}

.testimonial-home .google-reviews-link:hover {
    color: var(--theme-color, #00984a);
}

/* Blog cards: author + published date line under the title (home + blogs page) */
.team-section-2 .team-box-items-2 .team-content .blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12px;
    line-height: 1.5;
    color: #777;
    margin: 0 0 8px;
}

.team-section-2 .team-box-items-2 .team-content .blog-card-meta i {
    color: var(--theme-color);
    margin-right: 5px;
}

/* Featured guide card on the home blog section: same card component, but full
   width with a larger image and a slightly bigger title so it leads the list. */
.team-section-2 .team-box-items-2.blog-featured-guide {
    border: 1px solid rgba(0, 152, 74, .25);
    box-shadow: 0 10px 30px rgba(0, 152, 74, .10);
}

.team-section-2 .team-box-items-2.blog-featured-guide .team-image {
    max-width: 300px;
    height: 200px;
}

.team-section-2 .team-box-items-2.blog-featured-guide .team-content h3 {
    font-size: 22px;
}

.team-section-2 .team-box-items-2.blog-featured-guide .team-content .sub-text {
    background: var(--theme-color);
    color: #fff;
}

.team-section-2 .team-box-items-2.blog-featured-guide .team-content .sub-text i {
    font-size: 11px;
    margin-right: 4px;
}

.team-section-2 .team-box-items-2.blog-featured-guide .team-content p {
    font-size: 15px;
    -webkit-line-clamp: 3;
}

@media (max-width: 767px) {
    .team-section-2 .team-box-items-2.blog-featured-guide .team-image {
        max-width: 100%;
        height: 180px;
    }

    .team-section-2 .team-box-items-2.blog-featured-guide .team-content h3 {
        font-size: 19px;
    }
}

/* ==========================================================================
   BEFORE YOU START - four tiles + one-line note bar
   ========================================================================== */
.start-section {
    background: var(--white);
}

.start-tile {
    background: var(--white);
    border: 1px solid rgba(0, 152, 74, .12);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(6, 3, 48, .05);
    padding: 28px 24px;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}

.start-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(6, 3, 48, .09);
}

.start-tile__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 152, 74, .10);
    color: var(--theme-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.start-tile__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--theme-color);
    margin-bottom: 6px;
}

.start-tile h3 {
    font-size: 19px;
    line-height: 1.3;
    color: var(--header);
    margin-bottom: 8px;
}

.start-tile p {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

.start-tile p a {
    color: var(--theme-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.start-tile p a:hover {
    color: var(--header);
}

.start-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 30px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 18px 26px;
    background: #fff9ec;
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 12px;
}

.start-note p {
    margin: 0;
    color: #555;
    line-height: 1.6;
    flex: 1 1 420px;
}

.start-note p i {
    color: #b45309;
    margin-right: 8px;
}

.start-note p strong {
    color: var(--header);
}

.start-note .theme-btn {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .start-tile {
        padding: 22px 20px;
    }

    .start-note {
        padding: 18px 20px;
    }
}

/* "Why BT Consultancy" is an <h3> now (was <h5>); keep the h5 size. */
.consultancy-home .why-bt-heading {
    font-size: 20px;
    /* replaces the stray <br> that used to sit between the intro and this heading */
    margin-top: 22px;
    margin-bottom: 15px;
}

/* Hero supporting line under each slide headline (same white as the heading). */
.hero-2 .hero-content .hero-sub {
    color: rgba(255, 255, 255, .92);
    font-size: 18px;
    line-height: 1.6;
    max-width: 560px;
    margin: 18px 0 0;
}

@media (max-width: 767px) {
    .hero-2 .hero-content .hero-sub {
        font-size: 16px;
        margin-top: 14px;
    }
}

/* Hero: the eyebrow line now carries the audience, so let it run wider than the
   template's 275px; two actions side by side (button + text link). */
.hero-2 .hero-content .icon p {
    max-width: 520px;
}

.hero-2 .hero-button {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

.hero-2 .hero-button .hero-link {
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hero-2 .hero-button .hero-link i {
    font-size: 13px;
}

.hero-2 .hero-button .hero-link:hover {
    color: var(--theme-color);
}

/* ==========================================================================
   OUR CLIENTS on the home page - same 7-logo orbit + copy layout as
   about.html. Rules copied from about.css (which the home page does not
   load). The block sits below the equipment slider in the brand section, so
   it carries a top gap.
   ========================================================================== */
.brand-section .client-showcase {
    margin-top: 80px;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .brand-section .client-showcase {
        margin-top: 60px;
    }
}

.client-intro {
    padding-left: 20px;
}

/* .section-title carries mb-0, so the gap before the copy comes from the
   heading - matching the spacing under "Provide The Best Consultancy". */
.client-intro .section-title h2 {
    margin-bottom: 25px;
}

.client-intro p {
    color: #666;
    line-height: 1.9;
    margin-bottom: 14px;
}

.client-intro p:last-child {
    margin-bottom: 0;
}

/* "See the Centres and Photos" button under the copy - links to the full
   project gallery (the orbit only shows seven of the brands). */
.client-intro-cta {
    margin-top: 22px;
}

@media (max-width: 991px) {
    .client-intro {
        padding-left: 0;
        margin-top: 30px;
    }
}


/*-----------------------[ Our Clients: logo orbit ]--------------------------
   7 client logos evenly spaced around a circle with the Blood Test
   Consultancy mark at its centre.

   Positioning uses top/left percentages rather than a rotate/translate
   chain, because percentage values in `translate` resolve against the
   ELEMENT's own size, not the container - which would make the radius
   depend on each tile's dimensions. top/left percentages resolve against
   the container, so the whole arrangement scales with it and needs no
   per-breakpoint maths.

   Each position is 50% +/- 37% * sin/cos of its angle (360/7 = 51.43deg
   apart). Regenerate these if the logo count changes.
----------------------------------------------------------------------------*/

.client-orbit {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

/* dashed guide ring at the orbit radius (2 x 37% = 74%) */
.client-orbit::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 74%;
    height: 74%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(32, 64, 102, .18);
    border-radius: 50%;
    pointer-events: none;
}

.client-orbit__item,
.client-orbit__center {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 50%;
    transition: transform .3s ease, box-shadow .3s ease;
}

.client-orbit__item {
    width: 25%;
    height: 25%;
    padding: 9px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

.client-orbit__center {
    top: 50%;
    left: 50%;
    width: 34%;
    height: 34%;
    padding: 12px;
    border-color: rgba(0, 152, 74, .35);
    box-shadow: 0 10px 30px rgba(0, 152, 74, .16);
}

/* Logos vary from square marks to wide lockups and from small to large
   intrinsic sizes. Filling the same box with object-fit:contain scales every
   logo to one uniform area and centres it inside its round tile, instead of
   each rendering at its own intrinsic size. */
.client-orbit__item img,
.client-orbit__center img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Per-logo size + position tweaks. These two PNGs carry uneven transparent
   whitespace (Sree Ranga's oval sits in the top ~60%, Affiniti's lockup a
   little above centre), so object-fit centres the whole file but the visible
   artwork looks off. translateY pushes the artwork down to the circle's centre;
   scale() sizes it. transform-origin stays at the centre. */
.client-orbit__item img.client-logo--sm { transform: translateY(13%) scale(0.7); }   /* Sree Ranga: smaller, nudged down */
.client-orbit__item img.client-logo--lg { transform: translateY(7%) scale(1.22); }   /* Affiniti Scans: larger, nudged down */

.client-orbit__item:hover {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .12);
}

.client-orbit__item:nth-child(1) { top: 13.00%; left: 50.00%; }
.client-orbit__item:nth-child(2) { top: 26.93%; left: 78.93%; }
.client-orbit__item:nth-child(3) { top: 58.23%; left: 86.07%; }
.client-orbit__item:nth-child(4) { top: 83.34%; left: 66.05%; }
.client-orbit__item:nth-child(5) { top: 83.34%; left: 33.95%; }
.client-orbit__item:nth-child(6) { top: 58.23%; left: 13.93%; }
.client-orbit__item:nth-child(7) { top: 26.93%; left: 21.07%; }

@media (max-width: 991px) {
    .client-orbit {
        max-width: 440px;
    }
}

@media (max-width: 575px) {
    .client-orbit {
        max-width: 330px;
    }

    .client-orbit__item {
        padding: 6px;
    }

    .client-orbit__center {
        padding: 8px;
    }
}


/* The Our Clients copy sits beside the logo orbit, so it stays left-aligned
   at every width. .brand-section h2 centres headings at <=991px and again at
   <=767px - written for the old centred section headings - and those rules
   catch this one too. Scoping to .client-intro (0,2,1) outranks them (0,1,1). */
.brand-section .client-intro,
.brand-section .client-intro .section-title,
.brand-section .client-intro .section-title h2,
.brand-section .client-intro .section-title .subtitle,
.brand-section .client-intro p {
    text-align: left;
}

/* ==========================================================================
   STATIC HERO (.hero-static)
   No Swiper any more, so the reveal that main.css tied to .swiper-slide-active
   is applied directly, and the bottom padding that reserved room for the
   overlapping consultation card is reduced (the card sits mid-page now).
   ========================================================================== */
.hero-2.hero-static .hero-content,
.hero-2.hero-static .hero-button {
    opacity: 1;
    transform: none;
}

.hero-2.hero-static .hero-bg {
    transform: scale(1.04);
}

.hero-2.hero-static .hero-height {
    padding-bottom: 140px;
}

.hero-2.hero-static .hero-content .icon p {
    max-width: none;
}

.hero-2.hero-static .hero-content h1 {
    font-size: 54px;
    line-height: 1.18;
}

.hero-2.hero-static .hero-button {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-top: 32px;
}

.hero-2.hero-static .hero-whatsapp-btn {
    background: #25d366;
}

.hero-2.hero-static .hero-whatsapp-btn i {
    color: #25d366;
}

.hero-2.hero-static .hero-whatsapp-btn:hover {
    background: #1ebe5a;
}

.hero-2.hero-static .hero-phone {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.hero-2.hero-static .hero-phone i {
    color: var(--theme-color);
    background: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.hero-2.hero-static .hero-phone:hover {
    color: var(--theme-color);
}

@media (max-width: 1399px) {
    .hero-2.hero-static .hero-content h1 { font-size: 48px; }
}

@media (max-width: 1199px) {
    .hero-2.hero-static .hero-height { padding-bottom: 100px; }
    .hero-2.hero-static .hero-content h1 { font-size: 42px; }
}

@media (max-width: 767px) {
    .hero-2.hero-static .hero-height { padding-bottom: 90px; }
    .hero-2.hero-static .hero-content h1 { font-size: 34px; }
}

@media (max-width: 575px) {
    .hero-2.hero-static .hero-height { padding-bottom: 80px; }
    .hero-2.hero-static .hero-content h1 { font-size: 28px; }
    .hero-2.hero-static .hero-button .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; }
}

/* Consultation card mid-page: no hero overlap. */
.appointment-inline .appointment-wrapper-2 {
    margin-top: 0;
}

.appointment-inline {
    padding-bottom: 120px;
}

@media (max-width: 991px) {
    .appointment-inline { padding-bottom: 80px; }
}

/* About Us follows the hero directly; the hero already carries 110px of
   bottom padding, so only a modest top gap is needed here. */
.about-section.home-about {
    padding-top: 40px;
}

@media (max-width: 991px) {
    .about-section.home-about { padding-top: 30px; }
}

/* Home: consultation buttons scroll to the on-page form instead of a popup. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}