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


.choose-us-wrapper .choose-us-image img {
    width: 100%;
    height: 600px;
    border-radius: 10px;
    object-fit: cover;
}



.collaboration-slider,
.client-slider{
    overflow:hidden;
    width:100%;
}

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

.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:.3s;
}

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

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

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

.brand-section hr{
    margin:60px 0;
    border-color:#ddd;
}

@media(max-width:991px){

.brand-section h2{
    text-align:center;
    margin-bottom:30px;
    font-weight: 500;
    font-size: 40px;
}

}

.section-padding {
    padding: 120px 0 40px 0;
}




.consultancy-image img{
    width:100%;
    height: 540px;
    border-radius:20px;
    object-fit: cover;
}



.consultancy-content h2{
    font-size:42px;
    font-weight:700;
    margin-bottom:20px;
    line-height:1.3;
}

.consultancy-content p{
    color:#666;
    line-height:1.8;
}

/* Redesigned: tinted panel with a green accent rail and a circular icon
   badge, replacing the plain white shadowed card. */
.expert-box{
    position:relative;
    display:flex;
    align-items:center;
    gap:20px;
    background:linear-gradient(135deg, rgba(0,152,74,.08) 0%, rgba(32,64,102,.06) 100%);
    border:1px solid rgba(0,152,74,.18);
    border-left:5px solid #00984a;
    padding:26px 28px;
    border-radius:0 14px 14px 0;
    margin:30px 0;
    box-shadow:none;
}

.expert-box__badge{
    flex:0 0 auto;
    width:62px;
    height:62px;
    border-radius:50%;
    background:#00984a;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,152,74,.28);
}

.expert-box__badge i{
    font-size:28px;
    color:#fff;
    margin:0;
}

.expert-box p{
    margin:0;
    font-size:16px;
    line-height:1.7;
    color:#28241F;
}

.expert-box p strong{
    font-weight:700;
    color:#00984a;
}

@media (max-width:575px){
    .expert-box{ gap:16px; padding:22px 20px; }
    .expert-box__badge{ width:52px; height:52px; }
    .expert-box__badge i{ font-size:23px; }
}

.stats-row{
    margin-top:30px;
}

.stat-box{
    background:#fff;
    text-align:center;
    padding:25px 15px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0, 0, 0, 0.034);
    transition:.3s;
    height:100%;
}

.stat-box:hover{
    transform:translateY(-5px);
}

.stat-box h3{
    color:#00984a;
    font-size:36px;
    font-weight:700;
    margin-bottom:8px;
}

.stat-box span{
    font-size:16px;
    font-weight:600;
    color:#555;
}

@media(max-width:991px){

.consultancy-content{
    text-align:center;
}

.consultancy-content h2{
    font-size:40px;
    font-weight: 500;
}
.consultancy-content p {
    color: #666;
    line-height: 1.8;
    text-align: left;
}

.expert-box{
    flex-direction:column;
    text-align:center;
}

}


/* Increase gap between image and content */
@media (min-width: 992px) {

    .consultancy-highlight-section .consultancy-image {
        margin-right: 40px;
    }

    .consultancy-highlight-section .consultancy-content {
        margin-left: 40px;
    }
    .consultancy-content h2 {
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.3;
}
.about-wrapper-3 .about-left-item .about-image img {
    width: 100%;
    height: 800px;
    border-radius: 12px;
    object-fit: cover;
}

}


.founder-note-section{
    padding:90px 0;
   
}

.founder-card{
    max-width:780px;
    margin:auto;
    background:#fff;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    overflow:hidden;
}



.founder-image img{
    width:80px;
    height:80px;
    border-radius:50%;
    border:3px solid #fff;
    object-fit:cover;
    margin-bottom:8px;
}

.founder-image h4{
    font-size:18px;
    color:#fff;
    margin-bottom:2px;
}

.founder-image span{
    font-size:13px;
    color:#fff;
}

.founder-content{
    padding:20px 25px;
}

.quote-icon{
    font-size:22px;
    color:#00984a;
    margin-bottom:8px;
}

.founder-content h3{
    font-size:18px;
    margin-bottom:10px;
}

.founder-content p{
    font-size:14px;
    line-height:1.7;
    margin-bottom:10px;
    color:#666;
}

.signature{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #eee;
}

.signature h5{
    font-size:16px;
    margin-bottom:2px;
    color:#00984a;
}

.signature span{
    font-size:13px;
    color:#666;
}

@media(max-width:767px){

    .founder-note-section{
        padding:40px 0;
    }

    .founder-content{
        padding:18px;
    }
    .brand-section h2{
    text-align:center;
    margin-bottom:30px;
    font-weight: 500;
    font-size: 28px;
}

   
    .consultancy-content h2{
    font-size:28px;
    font-weight: 500;
}

    .founder-content p{
        font-size:16px;
    }
    .about-wrapper-3 .about-left-item .about-image img {
    width: 100%;
    height: 450px;
    border-radius: 12px;
    object-fit: cover;
}
.about-image-large {
    height: 300px !important;
    overflow: hidden;
    border-radius: 15px;
}
}



.consultancy-spacing{
    padding-top: 50px;
    padding-bottom: 0px;
}

.cta-custom-spacing{
    padding-top: 100px;
    padding-bottom: 100px;
}

.about-image-large{
    height: 620px; /* Increase as needed */
    overflow: hidden;
    border-radius: 15px;
}

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


.counter{
    display:inline-block;
}

/* Bottom matches the how-we-work section below it (110px). At 40px the
   image sat almost on the section edge while every neighbouring section
   left 80-120px, so this one read as cramped. */
.foundation-spacing{
    padding: 60px 0 110px 0;
}

/* Tablet */
@media (max-width: 991px){
    .foundation-spacing{
        padding: 50px 0 90px 0;
    }
}

/* Mobile */
@media (max-width: 767px){
    .foundation-spacing{
        padding: 40px 0 70px 0;
    }
}


@media (max-width: 767px) {
    .about-mobile-spacing {
        padding-top: 30px;
        padding-bottom: 60px;
    }
}
@media (max-width: 768px) {
    .about-mobile-spacing {
        padding-top: 30px;
        padding-bottom: 60px;
    }
}
@media (max-width: 767px) {
    .section-title {
        text-align: left;
        margin-bottom: 0;
    }
    .consultancy-image img {
    width: 100%;
    height: 350px;
    border-radius: 20px;
    object-fit: cover;
}
.consultancy-content p {
    color: #666;
    line-height: 1.8;
    text-align: left;
}
.about-wrapper-3 .about-left-item .about-image{
    height: 420px !important;
}

.about-wrapper-3 .about-left-item .about-image img{
    width: 100%;
    height: 420px !important;
    object-fit: cover;
}
}

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



/* Hide mobile heading on desktop */
.client-mobile-title{
    display:none;
}

/* Mobile & Tablet */
@media (max-width:991px){

    .client-mobile-title{
        display:block;
        text-align:center;
        font-size:32px;
        font-weight:700;
        margin-bottom:25px;
    }

    /* Hide desktop heading */
    .client-row .d-lg-block{
        display:none !important;
    }

    .client-row{
        flex-direction:column;
    }

    .client-row .col-lg-8{
        order:2;
    }

    .client-row .col-12{
        order:1;
    }
}

/* Desktop */
@media (min-width:992px){

    .client-mobile-title{
        display:none;
    }

    .client-row .d-lg-block{
        display:block !important;
    }
}
@media (max-width: 991px) {

    .collaboration-mobile-spacing .mb-5{
        margin-bottom: 25px !important;
    }

    .collaboration-mobile-spacing .mt-5{
        margin-top: 25px !important;
    }

    .collaboration-mobile-spacing hr{
        margin: 20px 0 !important;
    }

}

.scrolling-wrap .comm {
    animation: scroll 200s linear infinite;
}

.about-wrapper-3 .about-left-item .about-image{
    height: 600px !important;
}

.about-wrapper-3 .about-left-item .about-image img{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}
/* Mobile */
@media (max-width: 767px){

    .about-wrapper-3 .about-left-item .about-image{
        height: 350px !important;
        margin-bottom: 25px;
    }

    .about-wrapper-3 .about-left-item .about-image img{
        width: 100%;
        height: 100% !important;
        object-fit: cover;
    }
}


/*=========================================
 Founder Section
=========================================*/



.founder-wrapper{
    display:flex;
    align-items:center;
    gap:45px;
   
    border-radius:20px;
    padding:40px;
  
}

/* Left */

.founder-image{
    flex:0 0 32%;
    text-align:center;
}

.founder-image img{
    width:100%;
    height:430px;
    object-fit:cover;
    border-radius:18px;
}

.founder-info{
    margin-top:20px;
}

.founder-info h4{
    margin-bottom:5px;
    font-size:28px;
    font-weight:700;
}

.founder-info span{
    color:#666;
    font-size:16px;
}

/* Right */

.founder-content{
    flex:0 0 68%;
    position:relative;
}

.quote-icon{
    position:absolute;
    top:-10px;
    right:0;
    font-size:70px;
    color:#00984a;
    opacity:.08;
}

.founder-content h3{
    font-size:32px;
    margin-bottom:20px;
    font-weight:700;
}

.founder-content p{
    font-size:16px;
    line-height:1.9;
    color:#666;
    margin-bottom:18px;
}

.founder-signature{
    margin-top:30px;
    padding-top:20px;
    border-top:1px solid #e8e8e8;
}

.founder-signature h5{
    color:#00984a;
    margin-bottom:10px;
    font-weight:600;
}

.founder-signature h4{
    margin-bottom:5px;
    font-size:24px;
}

.founder-signature span{
    color:#666;
}

/*=========================
 Tablet
=========================*/

@media(max-width:991px){

    .founder-wrapper{
        flex-direction:column;
        padding:30px;
    }

    .founder-image,
    .founder-content{
        flex:100%;
        width:100%;
    }



    .founder-content{
        text-align:center;
    }

    .quote-icon{
        position:static;
        display:block;
        margin-bottom:20px;
        font-size:55px;
    }

}

/*=========================
 Mobile
=========================*/

@media(max-width:767px){

    .founder-wrapper{
        padding:20px;
        gap:25px;
    }

    .founder-image img{
        height:325px !important;
    }

    .founder-content h3{
        font-size:26px;
        text-align: left;
    }

    .founder-content p{
        font-size:16px;
        line-height:1.8;
        text-align: left;
    }

    .founder-info h4{
        font-size:24px;
    }
}

/* Founder Section Custom Spacing */
.founder-custom-spacing{
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Tablet */
@media (max-width: 991px){
    .founder-custom-spacing{
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* Mobile */
@media (max-width: 767px){
    .founder-custom-spacing{
        padding-top: 60px;
        padding-bottom: 60px;
    }
}
@media (max-width: 768px){
    .founder-image img {
    width: 100%;
    height: 570px;
    object-fit: cover;
    border-radius: 18px;
}
.founder-content p {
    font-size: 16px;
    line-height: 1.9;
    color: #666;
    margin-bottom: 18px;
    text-align: left;
}
   .collaboration-mobile-spacing {
        padding-top: 70px;
        padding-bottom: 40px;
    }
}

/*==========================================
 Consultancy Highlight Section
==========================================*/



/* Reduce gap between columns */
.consultancy-row{
    --bs-gutter-x:1.5rem;
    align-items:center;
}

/* Left Content */

.consultancy-content{
    padding-right:20px;
}

.consultancy-content p{
    margin:25px 0;
    line-height:1.9;
}

.expert-box{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:25px;
    margin-top:25px;
    background:#f8fbff;
    border-left:5px solid #00984a;
    border-radius:12px;
}

.expert-box > i{
    font-size:36px;
    color:#00984a;
}

.expert-box p{
    margin:0;
}

/* Image */

.consultancy-image{
    text-align:right;
    padding-left:20px;
}

.consultancy-image img{
    width:100%;
    max-width:520px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

/* Stats */

.stats-row{
    margin-top:35px;
}

.stat-box{
    text-align:center;
    background:#fff;
    padding:25px 15px;
    border-radius:15px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.stat-box:hover{
    transform:translateY(-5px);
}

.stat-box h3{
    font-size:34px;
    color:#00984a;
    margin-bottom:8px;
}

.stat-box span{
    color:#666;
    font-weight:600;
}

/*==========================================
 Tablet
==========================================*/

@media(max-width:991px){

    .consultancy-spacing{
        padding:50px 0 50px 0px;
    }

    .consultancy-row{
        --bs-gutter-x:0;
    }

    .consultancy-image{
        text-align:center;
        padding-left:0;
        margin-top:40px;
    }

    .consultancy-image img{
        max-width:100%;
    }

    .consultancy-content{
        padding-right:0;
    }

}

/*==========================================
 Mobile
==========================================*/

@media(max-width:767px){

    .consultancy-spacing{
        padding:60px 0;
    }

    .consultancy-content{
        text-align:center;
    }

    .expert-box{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

    .expert-box > i{
        font-size:32px;
    }

    .stats-row .col-4{
        margin-bottom:15px;
    }

    .stat-box{
        padding:20px 10px;
    }

    .stat-box h3{
        font-size:28px;
    }

}

/* Reduce Expert Box Height */
.expert-box{
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 20px;   /* Reduced from 25px */
    margin-top: 20px;
    background: #f8fbff;
    border-left: 5px solid #00984a;
    border-radius: 12px;
}

/* Stats Row */
.stats-row{
    margin-top: 30px;
}

/* Stat Box - Reduce Height */
.stat-box{
    background: #fff;
    padding: 15px 10px;   /* Reduced height */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    min-height: 110px;    /* Reduced from larger height */
}

/* Number */
.stat-box h3{
    margin: 0 0 6px;
    font-size: 32px;
    line-height: 1;
    color: #00984a;
    font-weight: 700;
}

/* Text directly below number */
.stat-box span{
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    color: #666;
    font-weight: 600;
}

/* Expert Box Content Font Size */
.expert-box p{
    font-size:16px;
    line-height:1.6;
    margin:0;
}

.expert-box strong{
    font-size:14px;
}

@media(max-width:767px){

    .stats-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .stats-row .col-4 {
        width: 50%;
    }

    /* Last card center */
    .stats-row .col-4:last-child {
        margin-left: 25%;
        margin-right: 25%;
    }

    .stat-box {
        padding: 12px 5px;
    }

    .stat-box h3 {
        font-size: 24px;
    }

    .stat-box span {
        font-size: 12px;
    }
}

/* ===== Gentle floating effect on about-page section images =====
   Applies to: WHO WE ARE, OUR FOUNDATION, and Trusted Excellence images.
   The Founder's Note image is intentionally excluded. */
@keyframes aboutImageFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

.about-wrapper-3 .about-left-item .about-image-large img,
.why-choose-us-section-2 .choose-us-image img,
.consultancy-highlight-section .consultancy-image img {
    animation: aboutImageFloat 4s ease-in-out infinite;
    will-change: transform;
}

/* Let the WHO WE ARE image float freely without its frame clipping it */
.about-wrapper-3 .about-left-item .about-image-large {
    overflow: visible;
}

.about-wrapper-3 .about-left-item .about-image-large img {
    border-radius: 15px;
}

/* Keep "Learn More" and "Contact Us" on the same row on mobile/tablet
   (they otherwise wrap to two lines). Shrink them so both fit down to 320px. */
@media (max-width: 991px) {
    .about-wrapper-3 .about-content .about-button {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        gap: 10px;
    }

    .about-wrapper-3 .about-content .about-button .theme-btn {
        width: auto;
        padding: 5px 14px;
        padding-left: 5px;
        font-size: 13px;
        white-space: nowrap;
    }

    .about-wrapper-3 .about-content .about-button .theme-btn i {
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin-right: 8px;
    }
}



/* The Collaborations carousel now matches the home page partner slider
   (.brand-slide): a stepping slider with Swiper's default easing. The previous
   linear transition-timing-function override that turned it into a continuous
   marquee has been removed so the two pages look identical. */


/*-----------------------[ Our Clients: logo grid + copy ]--------------------
   Logos on the left, heading and copy on the right. The grid is 4 columns
   wide as asked, so it fills out to a 4x3 block once there are 12 logos;
   with the 7 that exist today it renders as 4 + 3.
----------------------------------------------------------------------------*/

.client-showcase {
    margin-top: 10px;
}

.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;
}



.consultancy-about{
    padding:40px  0 0;
    overflow:hidden;
    position:relative;
}

.consultancy-content{
    padding-right:0px;
}



.consultancy-content .title{
    font-size:52px;
    line-height:1.1;
  
  
    margin-bottom:20px;
}



.consultancy-content p{
    font-size:18px;
    line-height:1.9;
    color:#666;
    margin-bottom:25px;
}

.expert-box{
    display:flex;
    align-items:flex-start;
    gap:18px;
    background:#f8f8f8;
    border-radius:12px;
    padding:20px;
    margin-bottom:35px;
}

.expert-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#00984a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex-shrink:0;
}





/*==========================
RIGHT SIDE
===========================*/

.consultancy-right{
    position:relative;
    padding-left:120px;
}

.consultancy-image-box{
    position:relative;
}

.consultancy-image-box img{
    width:100%;
    height:700px;
    object-fit:cover;
    border-radius:16px;
    display:block;
}

/*==========================
FLOATING CARDS
===========================*/

.consultancy-cards{
    position:absolute;
    left:-30px;
    top:50%;
    transform:translateY(-50%);
    width:280px;
    z-index:5;
}

.consultancy-card{
    background:#fff;
    text-align:center;
    padding:35px 25px;
    border-bottom:1px solid #ececec;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.consultancy-card:first-child{
    border-radius:12px 12px 0 0;
}

.consultancy-card:last-child{
    border-radius:0 0 12px 12px;
    border-bottom:none;
}

.consultancy-card i{
    font-size:40px;
    color:#00984a;
    margin-bottom:15px;
}


.consultancy-card p{
    margin:0;
    font-size:18px;
    color:#555;
    line-height:1.6;
}

.consultancy-card:hover{
    background:#00984a;
}

.consultancy-card:hover i,
.consultancy-card:hover .counter,
.consultancy-card:hover p{
    color:#fff;
}

/*==========================
EXPERIENCE BOX
===========================*/

.experience-box{
    position:absolute;
    right:40px;
    bottom:40px;
    width:260px;
    background:#fff;
    border-radius:18px;
    text-align:center;
    padding:30px;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.experience-box h2{
    font-size:56px;
    color:#00984a;
    margin-bottom:10px;
    font-weight:700;
}

.experience-box p{
    margin:0;
    font-size:22px;
    color:#333;
}

/*==========================
RESPONSIVE
===========================*/

@media (max-width:991px){

.consultancy-content{
    padding-right:0;
    margin-bottom:50px;
}

.consultancy-content .title{
    font-size:42px;
}

.consultancy-right{
    padding-left:0;
}

.consultancy-cards{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:100%;
    margin-bottom:25px;
}

.consultancy-image-box img{
    height:450px;
}

.experience-box{
    right:20px;
    bottom:20px;
    width:220px;
}

.experience-box h2{
    font-size:42px;
}

.experience-box p{
    font-size:18px;
}

}

@media (max-width:767px){

.consultancy-content .title{
    font-size:34px;
}

.consultancy-content p{
    font-size:16px;
}

.consultancy-card{
    padding:25px 20px;
}

.consultancy-card .counter{
    font-size:34px;
}

.consultancy-card p{
    font-size:16px;
}

.consultancy-image-box img{
    height:350px;
}

.experience-box{
    width:180px;
    padding:20px;
}

.experience-box h2{
    font-size:34px;
}

.experience-box p{
    font-size:15px;
}

}



.consultancy-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:35px 25px;
}

.consultancy-card i{
    display:block;
    font-size:42px;
    color:#00984a;
    margin-bottom:18px;
}

.consultancy-card .counter{
    display:block;
    width:100%;
    margin:0 0 10px;
    font-size:30px;
    font-weight:700;
   
    line-height:1;
}

.consultancy-card p{
    display:block;
    margin:0;
    text-align:center;
    font-size:18px;
    line-height:1.6;
}



@media (max-width: 767px){

    .consultancy-content{
        text-align:left !important;
    }

    .consultancy-content .theme-btn{
        display:inline-flex !important;
        float:none !important;
        margin:20px 0 0 0 !important;
        justify-content:center;
        align-items:center;
    }

}
@media (max-width: 767px){

    .consultancy-cards{
        display:flex;
        flex-wrap:wrap;
        gap:15px;
        justify-content:center;
        position:relative;
        width:100%;
        left:0;
        top:0;
        transform:none;
    }

    .consultancy-card{
        width:calc(50% - 8px);
        margin:0;
        border-radius:12px !important;
    }

    /* Last card centered */
    .consultancy-card:last-child{
        width:calc(160% - 8px);
        margin-left:auto;
        margin-right:auto;
    }
       .consultancy-about {
        padding: 0px !important;
    }

}
/* ==========================
320px Mobile
========================== */

@media (max-width: 320px){

    .consultancy-cards{
        display:flex;
        flex-direction:column;
        gap:15px;
        width:100%;
        left:0;
        top:0;
        transform:none;
        position:relative;
    }

    .consultancy-card{
        width:100% !important;
        margin:0 !important;
    }

    .consultancy-card:last-child{
        width:100% !important;
        margin:0 !important;
    }

    .consultancy-card .counter{
        font-size:28px;
    }

    .consultancy-card p{
        font-size:14px;
    }

    .consultancy-card i{
        font-size:30px;
    }
       .consultancy-about {
        padding: 0px !important;
    }

}
/* ==========================
TABLET VIEW
========================== */

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

    /* Content */
    .consultancy-content{
        text-align:left;
        padding-right:0;
        margin-top:35px;
    }

    /* Left align button */
    .consultancy-content .theme-btn{
    
        margin:20px 0 0;
        float:none;
    }

    /* Stats */
    .consultancy-cards{
        position:relative;
        left:0;
        top:0;
        transform:none;

        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:20px;

        width:100%;
        margin-top:25px;
    }

    .consultancy-card{
        width:calc(50% - 10px);
        border-radius:12px !important;
        margin:0;
    }

    /* Last card center */
    .consultancy-card:last-child{
        width:calc(50% - 10px);
        margin-left:auto;
        margin-right:auto;
    }

    .consultancy-image-box img{
        height:450px;
        width:100%;
        object-fit:cover;
    }
    .consultancy-about {
        padding: 0px !important;
    }

}


/*=========================================
1024px Responsive
=========================================*/

@media (min-width:992px) and (max-width:1199px){

    .consultancy-about{
        padding:80px 0  0;
    }

    /* Left Content */
    .consultancy-content{
        padding-right:25px;
    }

    .consultancy-content .tx-title,
    .consultancy-content .title{
        font-size:42px;
        line-height:1.2;
    }

    .consultancy-content p{
        font-size:16px;
        line-height:1.8;
    }

    /* Button */
    .consultancy-content .theme-btn{
        margin-top:20px;
    }

    /* Right Section */
    .consultancy-right{
        padding-left:90px;
    }

    .consultancy-image-box img{
        width:100%;
        height:550px;
        object-fit:cover;
        border-radius:15px;
    }

    /* Floating Stats */
    .consultancy-cards{
        width:220px;
        left:0;
        top:59%;
        transform:translateY(-50%);
    }

    .consultancy-card{
        padding:25px 18px;
    }

    .consultancy-card i{
        font-size:34px;
        margin-bottom:12px;
    }

    .consultancy-card .counter{
        font-size:32px;
        margin-bottom:8px;
    }

    .consultancy-card p{
        font-size:15px;
        line-height:1.5;
    }

    /* Experience Box (if enabled) */
    .experience-box{
        width:210px;
        right:20px;
        bottom:20px;
        padding:20px;
    }

    .experience-box h2{
        font-size:42px;
    }

    .experience-box p{
        font-size:18px;
    }

}



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

    /* Increase content width */
    .consultancy-about .col-lg-5 {
        flex: 0 0 48%;
        max-width: 48%;
    }

    .consultancy-about .col-lg-7 {
        flex: 0 0 52%;
        max-width: 52%;
    }

    .consultancy-content {
        padding-right: 25px;
    }


    /* Image height increase */
    .consultancy-image-box {
        height: 520px;
    }

    .consultancy-image-box img {
        height: 600px;
        object-fit: cover;
        margin-top: -80px;
    }


    /* Give left space for cards */
    .consultancy-right {
        padding-left: 45px;
    }

    .consultancy-cards {
        left: -35px;
        gap: 15px;
    }


    .consultancy-card {
        width: 180px;
        padding: 18px 15px;
    }

    .consultancy-card i {
        font-size: 26px;
    }

    .consultancy-card h3 {
        font-size: 32px;
    }

    .consultancy-card p {
        font-size: 14px;
    }

}


@media (min-width: 1200px) {

    .consultancy-right {
        transform: translateX(40px);
    }

}

@media (min-width:1200px) {

    .consultancy-about {
        padding-left: 0px;
        padding-right: 70px;
    }

}

.header-top-section .social-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-top-section .social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #204066;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
}

.header-top-section .social-btn svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    display: block;
}

.header-top-section .social-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    opacity: 0.85;
}



.social-icon i.fa-whatsapp {
    font-size: 14px !important;
}

.youtube-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px #000;
}

.youtube-outline {
    color: #ff0000;
    width: 24px;
    height: 24px;
}
.youtube-outline {
    color: #ff0000;
}




/* ============================================================
   OUR FOUNDATION section — image height matches the content
   The image column stretches to whatever height the text column
   needs, so both sides of the row end on the same line.
   ============================================================ */

.why-choose-us-section-2.foundation-choose .choose-us-wrapper > .row > [class*="col-"] {
    display: flex;
}

.why-choose-us-section-2.foundation-choose .choose-us-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.why-choose-us-section-2.foundation-choose .choose-us-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
}

.why-choose-us-section-2.foundation-choose .choose-us-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* Stacked layout: fall back to a fixed image height */
@media (max-width: 991px) {

    .why-choose-us-section-2.foundation-choose .choose-us-image {
        height: 400px;
        min-height: 0;
    }
}

@media (max-width: 767px) {

    .why-choose-us-section-2.foundation-choose .choose-us-image {
        height: 320px;
    }

    .why-choose-us-section-2.foundation-choose .choose-us-image img {
        height: 100% !important;
    }
}


/* ==========================================================
   WHO WE ARE — image matches the text column's height
   The image had a fixed 670px, so it ran past the copy.
   Taking it out of flow (absolute) means it contributes no
   intrinsic height, so the row is sized purely by the right
   column and the image fills whatever that comes to.
   lg and up only — below 992px the columns stack.
========================================================== */
@media (min-width: 992px) {
    .about-wrapper-3 .row {
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    .about-wrapper-3 .row > .col-lg-6:first-child {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .about-wrapper-3 .about-left-item {
        position: relative;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

    .about-wrapper-3 .about-left-item .about-image,
    .about-wrapper-3 .about-left-item .about-image-large {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        /* sits a little short of the copy instead of matching it exactly */
        bottom: 40px;
        height: auto !important;
        /* neutralise main.css:6406 (margin-bottom:60px, max-width:600px),
           which would otherwise shorten and narrow the absolute box */
        margin: 0 !important;
        max-width: none !important;
        width: auto;
    }

    .about-wrapper-3 .about-left-item .about-image img,
    .about-wrapper-3 .about-left-item .about-image-large img {
        width: 100%;
        height: 100% !important;
        -o-object-fit: cover;
           object-fit: cover;
        display: block;
    }
}



/* ==========================================================================
   OUR FOUNDERS  (about.html)

   One section carrying both founders under a single heading. Each founder is a
   .founder-row - portrait in one column, copy in the other - and the sides
   alternate down the section via Bootstrap order utilities on the second row.

   Both photographs are seated/standing formal portraits, but their backdrops
   are nothing alike - Dr. Chenthil Pillai's is near black, Dr. Lalitha
   Chenthil's is a daylit office window. So the frame is deliberately neutral -
   rounded corners and a dark scrim only at the foot for the name, no shadow -
   rather than a coloured panel, which would suit one backdrop and fight the
   other.

   From 992px up each portrait runs to exactly the height of the copy beside it:
   its column is a flex container so the frame stretches, and the image is taken
   out of flow inside the frame so the picture never sets the row's height. Only
   the copy does. Below 992px the columns stack and the image goes back to a
   fixed height.
   ========================================================================== */

/* The shared .section-padding is 120px top / 40px bottom, which is the wrong
   balance here: too much air above the heading and too little under two stacked
   founder blocks, where the second portrait ran almost straight into the
   Consultancy Highlight below. Both ends are set here rather than in
   .section-padding, which the rest of the page depends on. */
.founders-section {
    position: relative;
    padding-top: 90px;
    padding-bottom: 120px;
}

/* about.css turns .section-title left-aligned below 768px for the two-column
   sections; this one is a centred masthead over both founders, so it holds its
   alignment at every width. */
.founders-section .founders-heading {
    text-align: center;
    margin-bottom: 55px;
}

/* Separates the two founders without a rule between them - the alternating
   sides already do that work. */
.founders-section .founder-row + .founder-row {
    margin-top: 80px;
}


/* --- Portrait frame ----------------------------------------------------- */

.founders-section .fp-figure {
    position: relative;
    border-radius: 20px;
    background: #E8EFEE;
    /* No overflow clip here - the offset plate below has to escape the box.
       The image and the scrim round their own corners instead. */
}

/* Offset plate: sits behind the frame on its lower left, picking up the brand
   green. Decorative only, and dropped on stacked layouts where the gutter it
   needs is no longer there. */
.founders-section .fp-figure::before {
    content: "";
    position: absolute;
    left: -16px;
    bottom: -16px;
    width: 120px;
    height: 120px;
    border-radius: 20px;
    background: rgba(0, 152, 74, .16);
    z-index: -1;
}

.founders-section .fp-figure img {
    display: block;
    width: 100%;
    height: 520px;
    -o-object-fit: cover;
       object-fit: cover;
    /* Both subjects sit in the upper half of their frame, so the crop is
       anchored to the top rather than centred. */
    -o-object-position: center top;
       object-position: center top;
    border-radius: 20px;
}

/* Name plate over the foot of the portrait. A scrim rather than a solid card,
   so the photograph still reads through it. */
.founders-section .fp-figure-badge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 52px 24px 20px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(to top,
        rgba(5, 24, 40, .92) 0%,
        rgba(5, 24, 40, .68) 45%,
        rgba(5, 24, 40, 0) 100%);
}

.founders-section .fp-badge-value {
    display: block;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--white);
}

.founders-section .fp-badge-label {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .4px;
    color: #6FD6A2;
}


/* --- Copy --------------------------------------------------------------- */

/* h3, not h2 - the section's single heading above is the h2 now that both
   founders share one section. */
.founders-section .fp-name {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--header);
    margin: 0 0 8px;
}

.founders-section .fp-role {
    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--theme-color);
    margin: 0 0 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(32, 64, 102, .12);
}

.founders-section .fp-text {
    font-size: 18px;
    line-height: 1.9;
    color: var(--text);
    margin: 0 0 22px;
}

.founders-section .fp-text:last-child {
    margin-bottom: 0;
}

/* Marks the second block as the letter the page carried before. */
.founders-section .fp-note-label {
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--theme-color);
    margin: 0 0 12px;
}

.founders-section .fp-salutation {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--header);
    margin: 0 0 14px;
}


/* --- Vision statement --------------------------------------------------- */

.founders-section .fp-vision {
    position: relative;
    margin: 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--theme-color);
    font-size: 18px;
    line-height: 1.8;
    font-weight: 500;
    font-style: italic;
    color: var(--theme-color-2);
}


/* --- Portrait matched to the height of the copy ------------------------- */

/* Side-by-side only. Making the column a flex container lets the frame stretch
   to the row's height, and absolutely positioning the image inside it means the
   frame contributes no intrinsic height of its own - so the row is sized by the
   copy column alone and the portrait follows it. */
@media (min-width: 992px) {
    .founders-section .fp-col-figure {
        display: flex;
    }

    /* No min-height. Any floor here gives the figure column an intrinsic height
       of its own, and as soon as that floor is taller than the copy it sets the
       row - leaving the text block short and the picture running past it. The
       frame takes the row's height and nothing else, so the two always match. */
    .founders-section .fp-col-figure .fp-figure {
        width: 100%;
    }

    .founders-section .fp-col-figure .fp-figure img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}


/* --- Responsive --------------------------------------------------------- */

@media (max-width: 991px) {
    .founders-section { padding-top: 70px; padding-bottom: 90px; }
    .founders-section .founders-heading { margin-bottom: 40px; }
    .founders-section .founder-row + .founder-row { margin-top: 60px; }

    /* Stacked: the offset plate has no gutter left to sit in. */
    .founders-section .fp-figure::before { display: none; }

    /* The portrait now spans the full width, so it is capped and centred
       rather than being blown up to a full-bleed head shot. */
    .founders-section .fp-figure {
        max-width: 460px;
        margin: 0 auto;
    }

    .founders-section .fp-figure img { height: 460px; }
}

@media (max-width: 767px) {
    .founders-section { padding-top: 55px; padding-bottom: 70px; }
    .founders-section .founder-row + .founder-row { margin-top: 45px; }
    .founders-section .fp-figure img { height: 380px; }
    .founders-section .fp-name { font-size: 26px; }
    .founders-section .fp-role { font-size: 16px; }
    .founders-section .fp-salutation { font-size: 18px; }
    .founders-section .fp-text,
    .founders-section .fp-vision { font-size: 16px; }
}

/* Counter figures are <p class="counter"> now (were <h3>); keep the look. */
.consultancy-card .counter{
    font-weight:700;
    color:#204066;
    line-height:1.1;
    margin:0 0 8px;
}

/*-----------------------[ Hero sub-line under the About H1 ]-----------------*/
.breadcrumb-wrapper .page-heading .breadcrumb-items-area .about-hero-sub {
    position: relative;
    z-index: 9;
    color: var(--white);
    font-size: 18px;
    margin: 6px 0 0;
}

@media (max-width: 575px) {
    .breadcrumb-wrapper .page-heading .breadcrumb-items-area .about-hero-sub {
        font-size: 16px;
    }
}

/*-----------------------[ How we work: vertical timeline on a dark band ]----
   Navy band with a soft green glow and a faint dot field. Centred heading,
   then a vertical timeline: a glowing line down the middle, numbered nodes,
   and cards alternating left / right. Below 992px the line moves to the left
   edge and every card sits to its right.
----------------------------------------------------------------------------*/
.how-we-work-section {
    position: relative;
    padding: 110px 0;
    background-color: #0b1f38;
    background-image:
        radial-gradient(circle at 88% 12%, rgba(0, 152, 74, 0.35) 0%, rgba(0, 152, 74, 0) 45%),
        radial-gradient(circle at 5% 95%, rgba(0, 152, 74, 0.18) 0%, rgba(0, 152, 74, 0) 50%),
        linear-gradient(125deg, #0b1f38 0%, #1b3a5e 60%, #0f4a36 100%);
    overflow: hidden;
    isolation: isolate;
}

/* faint dot field behind everything */
.how-we-work-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    z-index: -1;
}

.hww-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    right: -120px;
    bottom: -160px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.02), 0 0 0 120px rgba(255, 255, 255, 0.015);
    z-index: -1;
    pointer-events: none;
}

/* Heading */
.hww-heading {
    margin-bottom: 60px;
}

/* the base subtitle tint is !important, so the glass fill needs the same weight */
.how-we-work-section .section-title .subtitle {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--white) !important;
}

.how-we-work-section .section-title h2 {
    color: var(--white);
}

/* Timeline */
.hww-timeline {
    --node: 64px;
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* the line: fades in at the top and out at the bottom */
.hww-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
        rgba(0, 152, 74, 0) 0%,
        rgba(0, 152, 74, 0.9) 12%,
        rgba(0, 152, 74, 0.9) 88%,
        rgba(0, 152, 74, 0) 100%);
    box-shadow: 0 0 12px rgba(0, 152, 74, 0.6);
}

.hww-step {
    position: relative;
    width: 50%;
    padding: 0 calc(var(--node) / 2 + 40px) 0 0;
    margin: 0;
    list-style: none;
}

.hww-step + .hww-step {
    margin-top: 40px;
}

/* even steps sit on the right half */
.hww-step:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 0 calc(var(--node) / 2 + 40px);
}

/* numbered node on the line */
.hww-node {
    position: absolute;
    top: 28px;
    right: calc(var(--node) / -2);
    width: var(--node);
    height: var(--node);
    border-radius: 50%;
    background: #0b1f38;
    border: 2px solid var(--theme-color);
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(0, 152, 74, 0.14), 0 0 24px rgba(0, 152, 74, 0.45);
    z-index: 2;
    transition: background-color .35s ease, transform .35s ease;
}

.hww-step:nth-child(even) .hww-node {
    right: auto;
    left: calc(var(--node) / -2);
}

.hww-step:hover .hww-node {
    background: var(--theme-color);
    transform: scale(1.08);
}

/* card */
.hww-card {
    position: relative;
    padding: 32px 32px 30px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    transition: transform .35s ease, border-color .35s ease, background-color .35s ease;
}

/* short connector from the card to the node */
.hww-card::after {
    content: "";
    position: absolute;
    top: calc(28px + var(--node) / 2 - 1px);
    right: -40px;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 152, 74, 0.2), var(--theme-color));
}

.hww-step:nth-child(even) .hww-card::after {
    right: auto;
    left: -40px;
    background: linear-gradient(270deg, rgba(0, 152, 74, 0.2), var(--theme-color));
}

.hww-step:hover .hww-card {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(0, 152, 74, 0.55);
}

.hww-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--theme-color);
    color: var(--white);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 10px 24px rgba(0, 152, 74, 0.35);
}

.hww-card h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
    color: var(--white);
}

.hww-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

/* Below 992px: line on the left edge, every card to its right */
@media (max-width: 991px) {
    .how-we-work-section { padding: 80px 0; }
    .hww-heading { margin-bottom: 44px; }

    .hww-timeline { --node: 52px; }

    .hww-timeline::before {
        left: calc(var(--node) / 2);
        transform: none;
    }

    .hww-step,
    .hww-step:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding: 0 0 0 calc(var(--node) + 28px);
    }

    .hww-node,
    .hww-step:nth-child(even) .hww-node {
        left: 0;
        right: auto;
        top: 24px;
        font-size: 17px;
    }

    .hww-card::after,
    .hww-step:nth-child(even) .hww-card::after {
        left: -28px;
        right: auto;
        width: 28px;
        top: calc(24px + var(--node) / 2 - 1px);
        background: linear-gradient(270deg, rgba(0, 152, 74, 0.2), var(--theme-color));
    }
}

@media (max-width: 575px) {
    .how-we-work-section { padding: 60px 0; }
    .hww-timeline { --node: 44px; }
    .hww-step,
    .hww-step:nth-child(even) { padding-left: calc(var(--node) + 20px); }
    .hww-card { padding: 24px 20px; }
    .hww-card::after,
    .hww-step:nth-child(even) .hww-card::after { left: -20px; width: 20px; }
    .hww-node,
    .hww-step:nth-child(even) .hww-node { font-size: 15px; }
    .hww-card h3 { font-size: 20px; }
    .hww-step:hover .hww-card { transform: none; }
}

/*-----------------------[ YouTube strip ]------------------------------------*/
.about-youtube-section {
    padding: 0 0 80px;
}

.about-youtube {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 30px;
    padding: 30px 36px;
    border-radius: 14px;
    background: var(--bg);
}

.about-youtube-text {
    display: flex;
    align-items: center;
    gap: 18px;
}

.about-youtube-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ff0000;
    color: var(--white);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-youtube h2 {
    font-size: 26px;
    font-weight: 500;
    margin: 0 0 4px;
}

.about-youtube p {
    margin: 0;
}

.about-youtube-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 767px) {
    .about-youtube-section { padding-bottom: 50px; }
    .about-youtube { padding: 24px 20px; }
    .about-youtube h2 { font-size: 22px; }
}
/*-----------------------[ Equipment Brands: equal space above and below ]---
   The block sat 30px under the client logos and 40px above the YouTube strip.
   Both gaps are set to the same value. .row.client-showcase matches the
   specificity of home.css's ".brand-section .row.mb-5 { 30px !important }";
   about.css loads after home.css, so this wins.
----------------------------------------------------------------------------*/
.brand-section .row.client-showcase {
    margin-bottom: 80px !important;
    /* home.css gives this row an 80px top margin (60px <=767px) on top of the
       section's 120px padding; trimmed slightly for the About page. */
    margin-top: 30px;
}

.brand-section.collaboration-mobile-spacing {
    padding-bottom: 80px;
}

@media (max-width: 991px) {
    .brand-section .row.client-showcase {
        margin-bottom: 50px !important;
    }

    .brand-section.collaboration-mobile-spacing {
        padding-bottom: 50px;
    }
}

/*-----------------------[ FAQ (moved from the home page) ]-------------------
   Last section before the CTA band. Tinted, so it alternates with the white
   YouTube strip above; the question cards are white.
----------------------------------------------------------------------------*/
.home-faq-section {
    background: #eef5f5;
}

.home-faq-section .section-title {
    margin-bottom: 36px;
}

/* .section-padding above is a flat 120px top with no breakpoints, which on a
   phone leaves most of a screen empty before the heading. Ease it back as the
   viewport narrows. */
@media (max-width: 991px) {
    .home-faq-section.section-padding {
        padding-top: 70px;
    }
}

@media (max-width: 767px) {
    .home-faq-section.section-padding {
        padding-top: 55px;
    }

    .home-faq-section .section-title {
        margin-bottom: 26px;
    }
}

@media (max-width: 575px) {
    .home-faq-section.section-padding {
        padding-top: 45px;
    }
}

.home-faq {
    max-width: 900px;
    margin: 0 auto;
}

.home-faq .accordion-item {
    border: 1px solid rgba(32, 64, 102, 0.1);
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--white);
}

.home-faq .accordion-button {
    padding: 20px 24px;
    font-size: 17px;
    font-weight: 600;
    color: var(--header);
    background: var(--white);
    box-shadow: none;
}

.home-faq .accordion-button:not(.collapsed) {
    color: var(--theme-color);
    background: var(--white);
}

.home-faq .accordion-button:focus {
    box-shadow: none;
}

.home-faq .accordion-button:focus-visible {
    outline: 2px solid var(--theme-color-2);
    outline-offset: -2px;
}

.home-faq .accordion-body {
    padding: 0 24px 22px;
    background: var(--white);
}

.home-faq .accordion-body p {
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 575px) {
    .home-faq .accordion-button { padding: 18px; font-size: 16px; }
    .home-faq .accordion-body { padding: 0 18px 18px; }
}

/* FAQ in two columns, three questions each (stacks below 992px) */
.home-faq.home-faq--two {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;
    align-items: start;
}

@media (max-width: 991px) {
    .home-faq.home-faq--two {
        grid-template-columns: 1fr;
        max-width: 760px;
    }
}

/* YouTube strip on phones: the two channel buttons were different widths and
   left-aligned. Stack everything centred and give both buttons the full width
   so they line up. */
@media (max-width: 767px) {
    .about-youtube {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .about-youtube-text {
        flex-direction: column;
        gap: 14px;
    }

    .about-youtube-links {
        flex-direction: column;
        width: 100%;
    }

    .about-youtube-links .theme-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
}