@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
    /* `clip`, not `hidden`: hidden turns <body> into a scroll container,
       which silently kills every position:sticky on the page -- the header
       pill included. Global.css sets clip for exactly this reason and this
       rule was overriding it back. clip trims the overflow just the same. */
    overflow-x:clip;
}

/* =========================================
   CONTAINER
========================================= */

/* A block with a max-width and no auto margins sits flush left, not
   centred. Below 1400 that never showed, because the box filled the window
   and there was nothing to centre. Above it -- a wide monitor, or any
   zoomed-out view -- both sections built on this wrapper pinned themselves
   to the left edge while the rest of the page stayed centred. */

.containz{
    width:100%;
    max-width:1400px;
    margin-inline:auto;
    padding:0 20px;
}

/* =========================================
   FEATURE SECTION
========================================= */

.feature-section{
    background:#ffffff;
    padding:var(--space-section) 0;
}

/* =========================================
   HEADING
========================================= */

/* This was orange in full, back when the heading was a short line. Every
   other heading on the site is ink with only its final word accented, and
   a whole sentence in orange reads as a warning rather than a heading — so
   the colour comes from .bao-last now, like everywhere else. */

.small-title{
    text-align:center;
    color:var(--ink);
    /* Sized to hold this heading on one line: at the shared --fs-section it
       needs ~980px, past the 900 it used to be capped at, so it broke in two.
       Slightly under the token, with the cap lifted to the section width. */
    font-size:var(--fs-section);
    font-weight:800;
    max-width:100%;
    margin-inline:auto;
    text-wrap:balance;
}

/* Unconstrained this ran the full 1310px of the section as a single line,
   which is far past a comfortable measure. 700px breaks it cleanly into two
   lines and holds at two from 620px to 820px, so it isn't fragile. The old
   line-height:100% had the lines touching once it wrapped. */

.main-title{
    text-align:center;
    font-size:var(--fs-lead);
    font-weight:400;
    margin-top:14px;
    /* Widened from 760, where this ran to three lines. The heading above it
       now spans most of the section, so the lead can share that measure and
       settle into two. */
    max-width:72rem;
    margin-inline:auto;
    line-height:1.6;
    /* pretty rags the lines so the block tapers toward the last one instead
       of leaving a stub word hanging on its own. */
    text-wrap:pretty;
    color:var(--ink-500);
}

.main-title span{
    color:#FF6600;
}

.divider{
    width:90px;
    height:3px;
    background:#FF6600;
    margin:25px auto var(--space-block);
    border-radius:50px;
}

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

.cardsz{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    flex-wrap:nowrap;
}


.cardx{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.cardx-img{

    width:100%;
    height:300px;

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

    margin-bottom:2px;

}

/* IMAGE CONTAINER */

/* There was a per-image block here — three :nth-child rules with a
   different max-width and max-height each, and a margin-left:100px on one
   of them. Only the first ever applied: every .cardx-img holds a single
   <img>, so that img is :nth-child(1) in all three cards and the other two
   rules matched nothing.

   What the surviving rule did was cap height at 275px. Two of the source
   images are about 1.62 wide to tall and came out at 245px; img1.webp is
   1.37, so it hit that ceiling and rendered 30px taller than its
   neighbours, sitting 15px higher in the row. That is the misalignment.

   Sizing the box by ratio instead means the three match whatever shape
   their sources happen to be. contain rather than cover so nothing is
   cropped — img1.webp is composed differently from the other two and would
   lose its edges. */

.cardx-img img{
    aspect-ratio:459 / 284;
    object-fit:contain;
}

/* IMAGE */

.cardx-img img{

    width:90%;
    max-width:470px;
    height:auto;

    display:block;

    transition: all 2.5s cubic-bezier(0.22, 1, 0.36, 1);

    will-change:transform;

    backface-visibility:hidden;

}

/* ONLY IMAGE MOVES */

.cardx:hover .cardx-img img{

   transform: translateY(-15px) scale(1.05);

}

/* ==========================
   CARD TEXT
========================== */

.cardx h3{

    /* One line each — the paragraphs below only start at a common height if
       none of the titles wraps. This was 18px, sized when the longest title
       was "Industry-Relevant Curriculum" (~285px in a 440px card). The
       rewritten titles are far longer: "Don't Just Learn. Have Something to
       Show for It." needs ~450px at 18px, so it broke and left "It." alone on
       a second line while the other two stayed single. 17px with the tracking
       pulled in brings the longest back under the card width.
       The old rule also carried `max-height:18px` (contradicted by the
       min-height, so inert but misleading) and `top`/`left` offsets with no
       `position` to act on — Figma-export leftovers, dropped. */
    font-size:17px;
    letter-spacing:-0.012em;
    font-weight:800;
    line-height:1.5;

    margin-top:0px;

    min-height:calc(1 * 1.5em);

    display:flex;
    align-items:center;
    justify-content:center;
    max-width: 100%;

}
.cardx p{

    /* Small breather under the title — with the h3 box trimmed to a single
       line the two were sitting almost flush. */
    margin-top:10px;

    /* Three cards side by side, three different sentence lengths. Without
       this the wrap point is wherever the words happen to fall, and the one
       whose second line came out nearly full width read as a block against
       the tapered pair either side of it. */
    text-wrap:pretty;

    line-height:1.8;

    color:black;

    font-weight: 400;

    /* The blurbs are fixed copy (~100-116 chars) and all three have to land
       on two lines. At a flat 15px with 10px side padding the longest one
       needed ~58 chars per line and only just missed, spilling a third line
       that was often a single word. Dropping the side padding buys back 20px
       of measure, and the fluid size keeps the fit as the cards narrow on
       smaller laptops instead of re-wrapping at each breakpoint. */
    /* The cap matters as much as the floor: the cards stop growing at 440px
       (container max-width), so above ~1470px only the font keeps scaling and
       the measure shrinks in em terms. The longest blurb needs ~31em to break
       cleanly in two, i.e. no more than 440/31 = 14px once the cards top out. */
    font-size: clamp(13px, 1.02vw, 14px);

    padding:0;

    /* Two lines' worth, so the cards keep a common bottom edge. */
    min-height:calc(2 * 1.8em);

}
/* =========================================
   ACCREDITATION
========================================= */

.recognized-section{
    background:rgba(217, 217, 217, 0.2);

    /* Fixed max-heights here came from a Figma export. Once the heading got
       a fluid size it wrapped to two lines and spilled over the paragraph,
       so the band sizes to its content instead. */

    /* The 1439px cap was on the band itself, so the grey only reached that
       far across and then stopped -- on a wide screen it ended a quarter of
       the way over with white beyond it. The band is a full-width section
       like every other one; the measure belongs on the wrapper inside it,
       which is where .recognized-section .containz already puts it. Below
       1439 nothing changes: the cap was never reached. */
    opacity: 1;
    padding:var(--space-section) 0;
    display: flex;
     justify-content: center;
      align-items: center;
}

.recognized-section .containz{
    
    max-width: 1142px;
    gap: 18px;
    display: grid;

}

.recognized{

    text-align:center;
    margin-left: 40px;
    margin-right: 40px;


}

/* Accreditation marks under the heading. The three source files are very
   different shapes — MSME is tall, DPIIT wide, ISO a squat badge — so they are
   normalised on height and left to keep their own width.

   The accred-*.png files are trimmed to their ink on purpose: the originals
   carried different amounts of transparent padding (31px a side on the ISO
   badge), which made a uniform flex gap look uneven on the page. */

.accred-row{

    margin:var(--space-block) 40px 0;
    padding:0;
    list-style:none;

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:clamp(32px,5.2vw,74px);

}

.accred-row img{

    display:block;
    width:auto;
    height:clamp(64px,7.4vw,100px);
    object-fit:contain;

}

@media (max-width:600px){

    .accred-row{
        gap:30px;
    }

}

.recognized h2{

    font-size:var(--fs-section);

    font-weight:800;
    max-width: 1142px;
    line-height:1.2;

    /* Was 'Poppins'. Once cta.css stopped forcing Poppins on the whole
       document, this was the one heading left on it -- every other section
       title on the page reads in var(--font-sans). */
    font-family:var(--font-sans);
    color:var(--ink);
}

.recognized span{

    color:#FF6600;

}


.recognized p{
    text-align:center;
    font-size:var(--fs-lead);
    color:var(--ink-500);
    font-weight:400;
    line-height: 1.5;
    max-width: 1142px;


}

/* The copy is one long sentence; left to wrap on its own it broke after
   "employers" and left "across sectors." alone on the second line. The
   <br> after "skills" splits it into two balanced lines instead — but
   only on desktop, since narrower screens wrap it several times anyway
   and a forced break there just creates a stray short line. */

.recognized p br{
    display:none;
}

@media(min-width:993px){

    .recognized p br{
        display:inline;
    }

}

/* =========================================
   TABLET
========================================= */

@media(max-width:992px){
    

.cards{

    gap:20px;

}

.card-img{

    height:auto;

}

.card-img img{

    max-width:auto;

}

.logos{

    gap:40px;

}

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

.divider{


}

.cards{

    flex-direction:column;

    align-items:center;

    gap:55px;

}

.card{

    width:100%;

    max-width:auto;

}

.card-img{

    height:auto;

}

.card-img img{

    max-width:auto; 

}
.card:hover .card-img img{

    transform:translateY(-15px);

}

.card h3{

    font-size:22px;

}

.card p{

    font-size:15px;

}

.accreditation-section{

    margin-top:var(--space-block);

    padding:var(--space-section-sm) 0;

}

.accreditation h2{

    font-size:30px;

}

.logos{

    gap:25px;

}

.india-logo{

    max-width:auto;

}

.startup-logo{

    max-width:auto;

}

.iso-logo{

    max-width:auto;

}

}

/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:480px){

.container{

    padding:0 16px;

}

.card-img img{

    max-width:200px;

}

.card h3{

    font-size:20px;

}

.card p{

    font-size:14px;

}

.accreditation h2{

    font-size:26px;

}

}


/* ==========================
   WHY-BAOIAM CARDS — MOBILE

   The responsive blocks above target .cards / .card / .card-img, but the
   markup uses .cardsz / .cardx, so none of them ever matched: the row stayed
   flex-wrap:nowrap all the way down to 390px, squeezing each card to ~110px
   and breaking its text one word per line.

   This block sits at the end of the file on purpose — the base .cardx rule
   (flex:1) appears after the .cardsz declaration, so an earlier media query
   would lose to it on source order.
========================== */

@media (max-width:900px){

    .cardsz{
        flex-wrap:wrap;
        justify-content:center;
        gap:40px;
    }

    /* 280px basis: two per row on a tablet, one per row on a phone. */
    .cardx{
        flex:1 1 280px;
        max-width:420px;
    }

}