/* /* ==========================================
   TESTIMONIAL SECTION
========================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    background:#fff;
    /* `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;
}

.testimonial-section{
    /* Bottom is a step shorter than the top. The cards sit inside a fixed
       240px wrapper they do not fill, so this seam was already carrying a
       band of dead space before either section's padding started. */
    padding:var(--space-section) 0 var(--space-section-sm);
    text-align:center;
    overflow:hidden;
}

.testimonial-title{
    font-size:var(--fs-section);
    /* 700, the weight .small-title and the rest of the homepage's section
       headings use. 900 made this one read heavier than every other title
       on the page. */
    font-weight:800;
    color:var(--ink);
    margin-bottom:16px;
}

.testimonial-subtitle{
    font-size:var(--fs-lead);
    color:var(--ink-500);
    font-weight:400;
    margin-bottom:var(--space-block);
    /* This was a short line with no measure of its own, so it just took the
       section's full width. The rewritten copy is a full sentence pair, which
       stretched edge to edge as one ~1400px line. Held to a readable measure
       it settles into two centred lines, the second shorter than the first. */
    max-width:860px;
    margin-inline:auto;
    line-height:1.55;
    text-wrap:pretty;
}

.testimonial-wrapper{
    position:relative;
    width:100%;
    height:240px;
    display:flex;
    justify-content:center;
    align-items:center;
}

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

.testimonial-card{
    position:absolute;
    background:#fff;
    border:2px solid #ffe4ca;
    border-radius:12px;
    overflow:hidden;
    text-align:left;

    box-shadow:
        0 10px 25px rgba(255,123,31,.24),
        0 0 12px rgba(255,150,70,.20);

    transition:.45s ease;
}

.testimonial-main-card{
    width:580px;
    min-height:190px;
    padding:22px 26px;
    z-index:5;
}

.testimonial-side-card{
    width:350px;
    /* min-height, not height: the card also carries overflow:hidden, so a
       fixed one sliced the last line of any quote whose role wrapped to two
       lines rather than letting the review's own line-clamp end it. */
    min-height:125px;
    padding:12px 14px;
    cursor:pointer;
    z-index:2;
}

.testimonial-left-card{
    left:25px;
    top:48px;
}

.testimonial-right-card{
    right:25px;
    top:48px;
}

.testimonial-side-card:hover{
    transform:scale(1.03);
}

/* ==========================================
   CARD HEADER
========================================== */

.testimonial-card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}

.testimonial-profile{
    display:flex;
    align-items:center;
    gap:15px;
}

.testimonial-avatar{
    width:62px;
    height:62px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid #ddd;
}

.testimonial-name{
    font-size:18px;
    font-weight:700;
    color:#000;
}

.testimonial-role{
    font-size:15px;
    color:var(--ink-500);
    margin-top:2px;
}

.testimonial-stars{
    color:#f28a3c;
    font-size:20px;
    letter-spacing:1px;
    white-space:nowrap;
} 

/* ==========================================
   REVIEW
========================================== */

.testimonial-review{
    margin-top:16px;
    /* The shared lead token, so a quote here sets at the same size as the
       intro paragraph under any other section heading on the page. */
    font-size:var(--fs-lead);
    line-height:1.6;
    color:#000;
}

/* ==========================================
   SIDE CARD
========================================== */

.testimonial-side-card .testimonial-profile{
    gap:10px;
}

.testimonial-side-card .testimonial-avatar{
    width:38px;
    height:38px;
}

.testimonial-side-card .testimonial-name{
    font-size:13px;
    font-weight:700;
}

.testimonial-side-card .testimonial-role{
    font-size:11px;
}

.testimonial-side-card .testimonial-stars{
    font-size:15px;
    margin-top:4px;
}

.testimonial-side-card .testimonial-review{

    font-size:12px;
    line-height:1.4;
    /* The card is a fixed 125px. At the old 10px the three clamped lines
       cleared it with room to spare; at 12px they do not, and the third one
       was being sliced by the card's own overflow before the clamp could
       ellipsise it. The gap above pays for the difference. */
    margin-top:10px;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;

}

/* ==========================================
   ANIMATION
========================================== */

.testimonial-fade{

    opacity:0;
    transform:scale(.96);
    transition:.35s ease;

}

/* ==========================================
   HOVER
========================================== */

.testimonial-card:hover{

    box-shadow:
        0 15px 35px rgba(255,123,31,.28),
        0 0 15px rgba(255,150,70,.25);

}

.testimonial-main-card:hover{

    transform:translateY(-4px);

}

.testimonial-side-card:hover{

    transform:translateY(-4px) scale(1.03);

}

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

@media (max-width:900px){

    .testimonial-section{
        padding:var(--space-section) 18px;
    }

    .testimonial-title{
        margin-bottom:14px;
    }

    .testimonial-subtitle{
        margin-bottom:32px;
    }

    .testimonial-wrapper{
        height:auto;
    }

    .testimonial-side-card{
        display:none;
    }

    .testimonial-main-card{
        position:relative;
        width:100%;
        min-height:auto;
        left:unset;
        right:unset;
        top:unset;
    }

    .testimonial-card-top{
        flex-direction:column;
        gap:15px;
    }

    .testimonial-role{
        font-size:15px;
    }

    .testimonial-avatar{
        width:55px;
        height:55px;
    }

    .testimonial-stars{
        font-size:20px;
    }

}

@media (max-width:576px){

    .testimonial-section{
        padding:var(--space-section) 15px;
    }

    .testimonial-subtitle{
        line-height:1.6;
    }

    .testimonial-main-card{
        padding:18px;
    }

    .testimonial-avatar{
        width:48px;
        height:48px;
    }

    .testimonial-name{
        font-size:17px;
    }

    .testimonial-role{
        font-size:14px;
    }

    .testimonial-review{
        margin-top:14px;
    }

}

/* ==========================================
   END OF TESTIMONIAL COMPONENT
========================================== */

/* ==========================
   TRUSTED BY LEARNERS

   Ratings are real, taken from each platform's live listing (see the comment
   on the section in index.html). The quotes are the same three learner
   testimonials the carousel above already carries — this section does not
   claim they were posted on these platforms, only that these are the
   platforms the ratings come from.

   Laid out as plain columns rather than cards: a logo + rating row, an
   oversized quote glyph, the quote, then the name. Nothing boxed, so the row
   stays quiet next to the carousel directly above it.
========================== */

.trust-badges-section{
    padding:0 0 var(--space-section);
    text-align:center;
}

.trust-badges-title{
    font-size:var(--fs-section);
    font-weight:800;
    color:var(--ink);
    margin-bottom:var(--space-block);
}

.trust-badges-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(24px,3vw,48px);
    max-width:1180px;
    margin-inline:auto;
    padding-inline:20px;
    /* Was `start`, which let each card take only the height its own quote
       needed. At full width the three quotes happen to wrap to the same
       number of lines and it looked fine; from about 1100px down the
       JustDial one takes an extra line and its card ran 25px deeper than
       its neighbours, leaving the row's bottom edge ragged. Stretch keeps
       the three the same height whatever the copy does. */
    align-items:stretch;
}

.trust-badge{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:#fff;
    /* Carried no border at all -- a white card on a near-white band, held
       together by a soft orange shadow that only showed under the bottom
       edge. The hairline is what makes the three read as cards. */
    border:1px solid var(--primary-50);
    border-radius:16px;
    padding:28px 22px 24px;
    box-shadow:0 6px 24px rgba(255,111,26,.12);
    transition:
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.trust-badge:hover{
    transform:translateY(-6px);
    border-color:var(--primary-75);
    box-shadow:0 16px 36px rgba(255,111,26,.22);
}

/* logo + rating, sitting on one line like the reference */

.trust-badge-head{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:22px;
    min-height:30px;
    white-space:nowrap;
}

.trust-badge-mark{
    display:flex;
    align-items:center;
}

.trust-badge-mark--google svg{
    width:26px;
    height:26px;
    /* Full-colour mark now (4 paths, each with its own fill), so nothing is
       overridden here — a single fill would flatten it back to one colour. */
}

/* AmbitionBox and JustDial's actual icon files, upscaled from a small source
   and matted onto a transparent background so the white square they shipped
   on doesn't show as a box on the card. */

.trust-badge-mark img{
    width:26px;
    height:26px;
    object-fit:contain;
}

.trust-badge-wordmark{
    font-family:var(--font-sans);
    font-size:20px;
    font-weight:600;
    color:#1a1a1a;
    letter-spacing:-.02em;
}

.trust-badge-rating{
    font-family:var(--font-sans);
    font-size:19px;
    font-weight:700;
    color:var(--ink);
    white-space:nowrap;
}

.trust-badge-of5{
    font-weight:500;
    color:#9a9a9a;
}

/* The quote glyph is decorative and sits to the left of the text block, the
   way the reference hangs it off the first line. */

.trust-badge-quote{
    position:relative;
    margin:0;
    padding:0 6px 0 26px;
    font-family:var(--font-sans);
    font-size:15px;
    line-height:1.62;
    color:#555;
    text-align:center;
}

.trust-badge-quote::before{
    content:"\201C";
    position:absolute;
    left:0;
    top:-14px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:52px;
    line-height:1;
    color:#d9dee8;
    pointer-events:none;
}

.trust-badge-author{
    margin-top:16px;
    font-family:var(--font-sans);
    font-size:15px;
    font-weight:700;
    font-style:normal;
    color:var(--ink);
}

.trust-badge-link{
    margin-top:8px;
    display:inline-block;
    font-family:var(--font-sans);
    font-size:12.5px;
    color:#8a8a8a;
    text-decoration:none;
    transition:color var(--dur-base) var(--ease-out);
}

/* The text itself stays small fine-print; on touch the tappable area grows to
   the ~44px a finger needs via padding rather than a bigger font. */

@media (hover:none){

    .trust-badge-link{
        padding:11px 4px;
        margin-top:0;
        min-height:44px;
    }

}

a.trust-badge-link:hover{
    color:var(--primary);
    text-decoration:underline;
}

.trust-badge-link--plain{
    cursor:default;
}

@media (max-width:900px){

    .trust-badges-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:36px 24px;
    }

}

@media (max-width:560px){

    .trust-badges-row{
        grid-template-columns:1fr;
        gap:34px;
        max-width:420px;
    }

}

/* ==========================================
   TOUCH TARGETS

   Every rule below exists because a real element measured under 40px tall
   or 32px wide at a 390px viewport — measured, not guessed. Desktop is
   untouched; these only open up where a finger is doing the pointing.

   The query is width OR (hover:none) deliberately. (hover:none) alone is
   the semantically right test — a 1280px tablet needs the same room a phone
   does — but it never matches in a desktop browser, which makes the fix
   impossible to verify by measurement. The pair covers both.
========================================== */
@media (max-width:768px), (hover:none){

    /* "265 reviews on Google" and its neighbour were 19px tall. */
    .trust-badge-link{
        display:inline-block;
        padding-block:12px;
    }

}