.about_section {
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
}

/* Intro paragraph under the "About Us" heading - ~5% smaller than the
   site-wide p/.para rule (app-v62.css: clamp(16px, 1.4vw, 1.4vw)),
   scoped here rather than touching that shared rule (2026-09-06). */
.about_content p {
    font-size: clamp(15.2px, 1.33vw, 1.33vw);
}

.about_section>.about_bg_svg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    /* height: 420px; */
    pointer-events: none;
    z-index: 0;
    top: 100px;
    transform: rotate(-7deg);
}

.xp {
    display: none;
}

.about_svg {
    width: 100vw;
    height: 100%;
    display: block;
}

.about_svg_path {
    fill: none;
    stroke: #9BC53D;
    stroke-width: 14px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about_container {
    margin: 5vw auto;
    position: relative;
    z-index: 2;
}


.about_image {
    position: relative;
    z-index: 3;
}

.about_image img {
    width: 100%;
    display: block;
    border-radius: 36px;
    /* transform: translateY(-6px); */
}


@media (max-width: 991px) {

    .about_section {
        background-size:
            80% auto,
            70% auto;
        background-position:
            -25% 80%,
            120% 78%;
    }
}


/* ================= ABOUT STATS ================= */

.about_stats_section {
    background: #ffffff;
}

.about_stats_container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}





/* Responsive */
@media (max-width: 991px) {
    .about_stats_container {
        grid-template-columns: 1fr 1fr;
    }


}



.about_values_section {
    background: #ffffff;
}

.about_values_container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}



.value_card .value_icon {
    line-height: 0;
}

.value_card h3 {
    font-family: 'Albra', 'Montserrat', sans-serif;
    font-weight: 500;
}



/* Icon */
.value_icon img {
    min-width: 44px;
    width: 4vw;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    margin-bottom: 1vw;
}

/* Heading */

/* Themes */
.value_light {
    background: #F6F1DF;
    color: #163f34;
}

.value_green {
    background: #AFC766;
    color: #163f34;
}

.value_dark {
    background: #183E34;
    color: #ffffff;
}

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

@media (max-width: 991px) {
    .about_values_container {
        grid-template-columns: 1fr 1fr;
    }

    .about_container {
        margin: 0;
    }

    /* ABOUT VALUES: value_card override for min-height */
    .value_card {
        min-height: unset;
    }
}

@media (min-width: 300px) and (max-width: 600px) {
    .about_values_container {
        grid-template-columns: 1fr;
    }


.timeline_slide {
    box-sizing: border-box;
    max-width: 80vw;
    width: 100% !important;
}

    .timeline_line_wrapper {
        top: 30% !important;
    }
    .about_stats_container {
        grid-template-columns: 1fr 1fr;
    }
    .timeline_item.timeline_last .timeline_content,
    .timeline_item.timeline_last .timeline_image {

    min-width: 62vw;
}

    .about_container {
        margin: 3em 0em 0em 0em;
    }


    .about_stats_container {
        padding: 0;
    }

    .about_values_container {
        padding: 0;
    }




    .desktop-br {
        display: none !important;
    }



    .timeline_heading_wrap {
        display: none;
    }

    .xp {
        display: block;
    }

    .timeline_heading_wrap {
        padding-left: 16px !important;
    }


}


/* ================= TEAM SECTION ================= */

.team_section {
    background: #F6F1DF;

    background-image: url('./images/leaf-pattern.svg');
    background-repeat: repeat;
    background-size: 240px;
    position: relative;
    overflow: hidden;
}

/* Full-width SVG background behind rows */
.team_bg_svg {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

.team_bg_svg svg {
    width: 100%;
    height: 100%;
    opacity: 0.25;
    padding-top: 25px;
}

.partners_bg {
    top: 1180px;
}

/* Core team only (2026-09-17, 3rd pass): .team_row now splits into two
   stacked sub-grids - .team_row_images (just the 5 photos) and
   .team_row_info (name/role/icon) - specifically so .core_bg can be a
   child of .team_row_images and bottom-align to it (top:auto;bottom:0)
   instead of a percentage/px offset that would have to be recalculated
   per row (role text length varies a lot, so row height did too) or
   per breakpoint. bottom:0 against a container whose only real content
   is the 5 uniformly-sized photos needs no calculation at all: the
   leaf-strip band sits exactly where the photos end, at any viewport,
   forever.
   Earlier passes: (1) a single .team_bg_svg outside the grid at a fixed
   top:420px, tuned for the old single-row 3-founder layout, only ever
   lined up with row 1 once this grew to 3 rows; (2) moved into each row
   with top:0/height:100%, which stretched the 3 leaf-strip svgs to
   33.334% each and visibly distorted them (height:100% is a no-op
   without a definite parent height, so the distortion was invisible
   until the parent got a real height here); (3) this pass: back to
   natural svg sizing (height:auto), only 2 strips (not 10), bottom-
   anchored to the images row specifically rather than filling the
   whole card+text row. */
.core_team .team_row_images {
    position: relative;
}

.core_team .team_row_images .core_bg {
    top: auto;
    bottom: 0;
}

.core_team .team_row_images .core_bg svg {
    height: auto;
}

.team_heading,
.team_grid,
.team_card,
.team_card_info {
    position: relative;
    z-index: 2;
}


/* Grid */
.team_grid {
    display: grid;
}

/* Core team: 3 explicit .team_row wrappers (5/5/4 cards, 2026-09-17),
   each split into a .team_row_images sub-grid and a .team_row_info
   sub-grid stacked below it (1vw apart, matching the old img-to-name
   gap_sm spacing) - not one flat 5-column grid of combined image+text
   cards anymore, so .core_bg can bottom-align to just the images (see
   above). .team_grid's own gap_lg (6vw, applied via the element's
   class list) still spaces the 3 .team_row wrappers apart vertically;
   each sub-grid gets the same 6vw as its own internal column gap. */
.core_team {
    display: flex;
    flex-direction: column;
}

.core_team .team_row {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.core_team .team_row_images,
.core_team .team_row_info {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6vw;
}

.partners_team {
    grid-template-columns: repeat(3, 1fr);
}

/* Card */
.team_card,
.team_card_info {
    text-align: left;
}

/* Image wrapper */
.team_img_wrap {
    width: 100%;
    /* height: 360px; */
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.team_img_wrap::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 260px;
    /* background: #AFC766; */
    border-radius: 120px 120px 0 0;
    z-index: 1;
}

.team_img_wrap img {
    position: relative;
    z-index: 2;
    /* max-height: 320px; */
    object-fit: cover;
}


.team_img_wrap img {
    position: relative;
    z-index: 2;
}

/* Name pill */
.team_name {
    padding: .8vw 2vw;
    max-width:max-content;
}

/* Core team only: the pill's text inherits .h5's clamp(16px, 1.5vw, 1.5vw)
   from the markup's "h5" class, sized for the original 3-column layout.
   At 5 columns (2026-09-17) that wraps longer real names ("Priyadarshi
   Bhaskar", "Aditya Pandharpure") onto two lines inside the pill, which
   looks broken since the pill is meant to stay a single rounded chip.
   Two classes beats .h5's one, so this wins regardless of source order.
   Bumped up twice same day: first pass read too small, then +35% again
   once the layout centered and had room to read bigger. */
.core_team .team_name {
    font-size: clamp(17.5px, 1.55vw, 20px);
    padding: .6vw 1.3vw;
}

/* LinkedIn icon (2026-09-17): on its own line below the role, as a
   sibling of .team_role inside .team_card's flex column - not inline
   at the end of the role text anymore, since role length varies a lot
   per person ("Co-Founder" vs "Associate Director - Business Ops
   (Telangana & Andhra Pradesh)") and left the icon landing in a
   different spot on every card. A fixed block position under the role
   is uniform regardless of how long that text runs. Placeholder href="#"
   on every card until real profile URLs are supplied.
   Negative margin-top pulls it in closer than .team_card's own 1vw flex
   gap (gap_sm, app-v65.css) would otherwise leave - that gap applies
   between every child in the column, and was too airy for a small
   trailing icon that doesn't need as much breathing room as the image/
   name/role rows above it. */
.team_linkedin {
    display: block;
    margin-top: -.6vw;
}

/* Sized 10% smaller than the first pass (1.4vw/18/22 -> 1.26vw/16/20),
   requested same day once it sat next to the (now larger) role text. */
.team_linkedin img {
    width: 1.26vw;
    min-width: 16px;
    max-width: 20px;
    display: block;
}

/* Role: originally 20% below the site-wide <p> size, then another 10%
   off that same day. 16px * 0.8 * 0.9 = 11.52px, 1.4vw * 0.8 * 0.9 =
   1.008vw. margin-left zeroed out (was 2vw) so the role text starts
   flush with the name pill's left edge above it, instead of indented
   relative to it - requested 2026-09-17 once both were left-aligned. */
.team_role {
    margin-left: 0;
    font-size: clamp(11.52px, 1.008vw, 1.008vw);
}

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

@media (max-width: 991px) {
    .partners_team,
    .core_team .team_row_images,
    .core_team .team_row_info {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .core_team .team_row_images,
    .core_team .team_row_info,
    .partners_team {
        grid-template-columns: 1fr;
    }

}

/* ================= TEAM HEADSHOTS (round photos) ================= */
/* New Core Team layout (2026-09-25): plain round headshot + name +
   role + LinkedIn, no card border/pill background. The leaf-background
   .team_section above is hidden (not deleted - still under internal
   review and may come back) rather than removed. Reuses the same
   14-person roster/LinkedIn URLs as .team_section (see the @php array
   in about-us.blade.php). Real round headshots (WebP,
   team/headshots/*.webp) supplied 2026-09-25, already circular crops -
   object-fit:cover below is just a safety net if a future replacement
   photo isn't pre-cropped square/round. */
.team_section {
    display: none;
}

.headshots_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3vw 2vw;
}

.headshot_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .4vw;
}

/* .headshot_name is a <div>, not a real h4/h5/h6/p/span tag, so it
   doesn't pick up app-v66.css's "a,h4,h5,h6,p,small,span{font-family:
   Montserrat}" rule the way .headshot_role's <p> does - it was falling
   through to the browser's serif default (no font-family is ever set on
   body/html), which read as an odd, oversized, off-brand heading next
   to the small round photo. Explicit Montserrat + a size/weight closer
   to .headshot_role (was .h5 + weight_b: clamp(16,1.5vw,1.5vw) @ 600,
   too heavy for this compact a card) makes the name read as a label for
   the photo instead of competing with it. */
.headshot_name {
    font-family: Montserrat, sans-serif;
    font-size: clamp(15px, 1.05vw, 17px);
    font-weight: 600;
    line-height: 1.3;
}

.headshot_role {
    font-size: clamp(12px, .95vw, 13px);
    line-height: 1.4;
}

.headshot_photo {
    width: clamp(90px, 9vw, 140px);
    height: clamp(90px, 9vw, 140px);
    border-radius: 50%;
    overflow: hidden;
}

.headshot_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter .35s ease;
}

.headshot_card:hover .headshot_photo img,
.headshot_card:focus-within .headshot_photo img {
    filter: grayscale(0%);
}

.headshot_linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .3vw;
}

.headshot_linkedin img {
    width: 15.6px;
    height: 15.6px;
    display: block;
}

@media (max-width: 991px) {
    .headshots_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .headshots_grid {
        grid-template-columns: 1fr;
    }
}

/* ================= TIMELINE (HORIZONTAL) ================= */

.timeline_section {
    position: relative;
    background: #ffffff;
    overflow: hidden;

    /* CRITICAL FIX */
    isolation: isolate;
}

/* Background leaf */
.timeline_bg_leaf {
    position: absolute;
    right: 50px;
    top: 20px;
    width: 220px;
    height: 520px;
    opacity: 0.35;
    z-index: 1;
}


/* Horizontal wrapper */
.timeline_wrapper {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

/* Track */
.timeline_track {
    display: flex;
    width: max-content;
}

.timeline_slide {
    width: 40vw;
    padding-left: 10vw;
    padding-right: 5vw;
    box-sizing: border-box;
}

/* ✅ LAST SLIDE MUST BE WIDER */
.timeline_slide:last-child {
    width: 80vw;
}

.timeline_line {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.timeline_line.line_1 {
    left: 18%;
    top: 58%;
    width: 420px;
}

.timeline_line.line_2 {
    right: 6%;
    top: 36%;
    width: 380px;
}

/* Timeline card */
.timeline_item {
    width: 100%;
}

.timeline_item.reverse {
    align-items: flex-end;
    text-align: left;
}

/* Image */
.timeline_image img {
    width: 100%;
    border-radius: 36px;
    display: block;
}





/* ================= OUR CLIENTS ================= */

/* Disable text & image selection while dragging */
.clients_section,
.clients_section * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

.clients_section {
    background: #ffffff;
    text-align: center;
}

.clients_heading {
    font-family: 'Albra', 'Montserrat', sans-serif;
    color: #6b6b6b;
}

/* Slider container */
.clients_slider_wrap {
    position: relative;
    width: 80%;
    overflow: hidden;
    margin: 0 auto;
}

/* Slider viewport */
.clients_slider {
    width: 100%;
    overflow: hidden;
    cursor: grab;
}

.clients_slider:active {
    cursor: grabbing;
}

/* Track */
.clients_track {
    display: flex;
    align-items: center;
    gap: 120px;
    width: max-content;
    will-change: transform;
}

/* Logos */
.clients_track img {
    height: 75px;
    /* opacity: 0.45; */
    filter: grayscale(100%);
    transition: opacity 0.3s ease;
}

/* Slightly larger for logos that read small at the standard height
   (compact/square marks like EA, LinkedIn, Sattva) */
.clients_track img.logo-lg {
    height: 95px;
}

.clients_track img:hover {
    opacity: 0.7;
}

/* Fade edges */
.clients_fade {
    position: absolute;
    top: 0;
    width: 220px;
    height: 110%;
    z-index: 2;
    pointer-events: none;
}

.clients_fade.left {
    left: 0;
    background: linear-gradient(to right, #ffffff 30%, transparent);
}

.clients_fade.right {
    right: 0;
    background: linear-gradient(to left, #ffffff 30%, transparent);
}

/* Animation */
@keyframes clients-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Responsive */
@media (max-width: 768px) {

    .clients_track {
        gap: 72px;
    }
    .team_name {
    padding: 2vw 4vw;
    max-width: max-content;
}
.team_role {
    margin-left: 0;
}

    .clients_track img {
        height: 36px;
    }

    .clients_track img.logo-lg {
        height: 46px;
    }


    .clients_slider_wrap {
        width: 100%;
    }

    .clients_fade {
        width: 50px;
    }



}



/* ================= TIMELINE SVG PATH (CLEAN RESET) ================= */

.timeline_line_wrapper {
    position: absolute;
    left: 0;
    top: 52%;
    width: 100%;
    height: 260px;
    pointer-events: none;

    /* MUST be below everything */
    z-index: 0;
}

.timeline_svg {
    width: 100%;
    height: 100%;
}

.timeline_path {
    fill: none;
    stroke: #a3c539;
    stroke-width: 18px;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.timeline_heading_wrap,
.timeline_wrapper,
.timeline_track,
.timeline_slide,
.timeline_item,
.timeline_image,
.timeline_content {
    position: relative;
    z-index: 2;
}

/* .timeline_content, .timeline_image{
    background-color: #ffffff;
} */

.timeline_section {
    position: relative;
    z-index: 0;
}

.timeline_svg,
.timeline_path {
    pointer-events: none;
}

/* ================= LAST TIMELINE CARD FIX (CORRECT SPACING) ================= */

.timeline_item.timeline_last {
    display: grid !important;
    gap: 8vw;
    grid-template-columns: 1.2fr 1fr;
    align-items: flex-start;
    padding-right: 8vw;
}

/* Image on left */
.timeline_item.timeline_last .timeline_image {
    /* max-width: 560px; */
    width: 100%;
}

/* Text on right with proper breathing room */
.timeline_item.timeline_last .timeline_content {
    background-color: #ffffff;
}



/* Ensure SVG line stays behind */
.timeline_item.timeline_last,
.timeline_item.timeline_last * {
    position: relative;
    z-index: 2;
}

/* Rounded image */
.timeline_item.timeline_last .timeline_image img {
    border-radius: 44px;
}

/* Mobile fallback */



@media (max-width: 991px) {
    .timeline_slide:last-child {
        width: 100vw;
    }

    .timeline_item.timeline_last {
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
    }

    .timeline_item.timeline_last .timeline_content,
    .timeline_item.timeline_last .timeline_image {
        max-width: 100%;
        padding-top: 0;
    }

}


.team_bg_svg.partners_bgg {
    top: 2000px;
}

/* @supports not (-webkit-touch-callout: none) {
  body {
    font-size: 0.95rem;
  }
} */



@media(mix-width: 900px) {
    .xp {
        display: none;
    }

    .timeline_heading_wrap {
        display: block;
    }

}

@media(max-width: 1300px) {



    .about_section>.about_bg_svg {

        top: 65px;

    }


    .timeline_bg_leaf {
        width: 160px;
    }


    .timeline_line_wrapper {
        top: 48% !important;
    }

}