/* ============================================================
   Home page redesign — loaded ONLY by welcome-new.blade.php.
   Reuses the site's existing palette (#DE1D1E red, #01010a ink,
   #e9eac3 cream, #2a1010 maroon) and fonts (Poppins / Barlow).
   Overrides for shared partials (footer, notification, x-slider)
   live here so other pages are untouched.
   ============================================================ */

:root {
    --hi-red: #DE1D1E;
    --hi-red-soft: rgb(235, 87, 87);
    --hi-ink: #01010a;
    --hi-maroon: #2a1010;
    --hi-cream: #e9eac3;
    --hi-cream-soft: #f6f7e9;
    --hi-heading: #161219;
    --hi-muted: #746161;
    --hi-line: #eee9e9;
    --hi-shadow-sm: 0 8px 24px rgba(1, 1, 10, .05);
    --hi-shadow-md: 0 18px 44px rgba(1, 1, 10, .10);
}

/* ---------- Base typography ---------- */
h1, h2, h3, h4, h5, p {
    font-family: "Poppins", sans-serif;
}

h1, h2, h3 {
    font-weight: 700;
    color: var(--hi-heading);
    letter-spacing: -.015em;
}

p {
    font-weight: 400;
    color: var(--hi-muted);
}

section h2 {
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    line-height: 1.3;
}

/* Centered red accent under light-section titles */
.hi-intro h1::after,
.hi-courses h2::after,
.hi-cream-sec h2::after,
.hi-cream-sec h3::after,
.hi-why h2::after,
.hi-blog h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: var(--hi-red);
    margin: 14px auto 0;
}

/* ---------- Notification bar (shared partial — scoped here) ---------- */
body > .container-fluid marquee {
    font-family: "Poppins", sans-serif;
    font-size: .82rem;
    letter-spacing: .02em;
    padding: 7px 0;
}

body > .container-fluid marquee a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Navbar (markup lives in this page) ---------- */
/* No backdrop-filter here. Below xl the theme opens #navbarCollapse as a
   position:fixed panel sized `max-height: calc(100% - 2rem)`; a filter on the
   header makes the header its containing block, so that 100% resolved against
   the 61px header instead of the viewport and the whole menu collapsed to a
   29px sliver. The background is .96 opaque anyway — the blur bought nothing. */
header.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1px 0 rgba(1, 1, 10, .05), 0 10px 30px rgba(1, 1, 10, .06);
}

header.navbar .nav-link b {
    font-weight: 600;
    color: var(--hi-heading);
    transition: color .2s ease;
}

header.navbar .nav-link:hover b,
header.navbar .nav-link:focus b {
    color: var(--hi-red);
}

header.navbar .btn-white {
    background: var(--hi-red) !important;
    border-color: var(--hi-red) !important;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(222, 29, 30, .28);
}

header.navbar .btn-white b {
    color: #fff;
}

/* ---------- Hero ---------- */
.hi-hero {
    /* bright highlight behind the illustration (right of centre),
       falling off to a deep red in the bottom-left corner */
    background:
        radial-gradient(1200px 860px at 76% 34%,
            rgba(247, 130, 118, .95) 0%,
            rgba(240, 92, 86, .55) 38%,
            rgba(222, 29, 30, 0) 70%),
        radial-gradient(1000px 820px at 0% 104%,
            rgba(92, 6, 7, .95) 0%,
            rgba(122, 10, 11, .55) 42%,
            rgba(222, 29, 30, 0) 75%),
        linear-gradient(145deg, #d81b1c 0%, var(--hi-red) 45%, #a81416 100%);
    overflow: hidden;
    min-height: min(72vh, 680px);
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.hi-hero > .firstCntainer {
    width: 100%;
}

/* Text column and illustration share one vertical centre line */
.hi-hero .firstCntainer > .d-flex {
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1rem, 2.5vw, 2rem) clamp(.5rem, 2vw, 1.5rem) !important;
}

.hi-hero .firstHeading {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.05;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 24px rgba(1, 1, 10, .18);
}

/* Break the headline after the comma: "Join Hello," / "Stay Mellow" */
.hi-hero .firstHeading span {
    display: block;
    color: #f7f8e0 !important;
}

.hi-hero p.lead {
    color: rgba(255, 255, 255, .97) !important;
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.6;
    text-transform: none !important;
    max-width: 48ch;
    margin: 0 0 2.75rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Illustration: warm halo so it separates from the background */
.hi-hero .d-flex > .col-md-6:last-child {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.hi-hero .d-flex > .col-md-6:last-child::before {
    content: "";
    position: absolute;
    inset: -8% -10%;
    background: radial-gradient(closest-side,
        rgba(255, 238, 218, .34) 0%,
        rgba(255, 216, 194, .16) 46%,
        rgba(255, 200, 180, 0) 76%);
    pointer-events: none;
}

.hi-hero .col-md-6 > img.img-fluid {
    position: relative;
    width: 120%;
    max-width: 120%;
    filter: drop-shadow(0 34px 50px rgba(1, 1, 10, .38));
}

/* Hero social icons: secondary ghost style (overrides shared chip rules below) */
.hi-hero .firstCntainer a {
    background: transparent !important;
    width: 44px;
    height: 44px;
    margin: 0 12px 0 0 !important;
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
    box-shadow: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.hi-hero .firstCntainer a:hover {
    background: #fff !important;
    border-color: #fff;
    color: var(--hi-red);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(1, 1, 10, .2);
}

.hi-hero .firstCntainer a .fab {
    font-size: 18px !important;
}

/* Below the xl row breakpoint the columns stack — make them full width */
@media (max-width: 1199.98px) {
    /* stacked content sets its own height here */
    .hi-hero {
        min-height: auto;
    }

    .hi-hero .firstCntainer > .d-flex > .col-md-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
    }

    .hi-hero .col-md-6 > img.img-fluid {
        width: 100%;
        max-width: 100%;
    }
}

/* Social chips — hero + footer share .firstCntainer */
.fab.fa-whatsapp,
.fab.fa-facebook-f,
.fab.fa-instagram,
.fab.fa-linkedin,
.fab.fa-youtube {
    font-size: 22px !important;
    padding: 0 !important;
    font-weight: 900;
}

.firstCntainer a {
    background: #fff !important;
    width: 50px;
    height: 50px;
    padding: 0 !important;
    margin: 4px !important;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hi-red);
    box-shadow: 0 10px 22px rgba(1, 1, 10, .18);
    transition: transform .2s ease, box-shadow .2s ease;
    vertical-align: middle;
}

.firstCntainer a:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(1, 1, 10, .26);
}

/* ---------- Intro (SEO copy) ---------- */
.hi-intro {
    text-align: center;
}

.hi-intro h1 {
    font-size: clamp(1.35rem, 2.55vw, 2.05rem);
    line-height: 1.15;
    max-width: 30ch;
    margin: 0 auto 1.4rem;
}

/* wider gap between the heading and its red divider */
.hi-intro h1::after {
    margin-top: 26px;
}

/* White card the copy sits on, against the grey section background */
.hi-intro-card {
    max-width: 72ch;
    margin: 0 auto;
    padding: 44px 32px 32px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(1, 1, 10, .07);
    text-align: left;
}

.hi-intro-card p {
    margin: 0 0 1.35rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #5c5560;
}

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

/* Emphasis, not a second typeface — red is reserved for the divider */
.hi-intro-card p strong {
    color: #1F2937;
    font-weight: 600;
}

/* Two columns on desktop */
@media (min-width: 1024px) {
    .hi-intro-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: start;
        /* 1080 - 64 padding - 48 gap = 484px per column ≈ 58ch at 1.05rem */
        max-width: 1080px;
    }

    .hi-intro-card p {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .hi-intro-card {
        padding: 24px 20px 20px;
    }
}

/* ---------- Blog post cards ---------- */
.hi-post-col {
    display: flex;
}

.hi-post {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0 !important;
    border: 1px solid var(--hi-line) !important;
    border-radius: 16px;
    /* clips the full-bleed image to the card's top corners */
    overflow: hidden;
    box-shadow: var(--hi-shadow-sm) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.hi-post:hover {
    transform: translateY(-4px);
    box-shadow: var(--hi-shadow-md) !important;
}

/* Fixed 16/9 window. padding-bottom zeroes theme's .img-ratio-3 spacer, which
   was the reason the images came out at different heights.
   transform/transition are pinned off because theme.min.css has
   `.card:hover>.card-zoom>[class*=card-img]{transform:scale(1.1)}` plus a
   `transition:all .3s` on the same wrapper — the media box must never move or
   resize, only the image inside it. */
.hi-post .card-img {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding-bottom: 0 !important;
    border-radius: 0;
    overflow: hidden;
    transform: none !important;
    transition: none !important;
}

/* theme's .sk-thumbnail img absolutely-centres the image with
   `transform: scale(1.01) translate(-50%,-50%)`. Left in place, a hover
   transform on the image replaces that translate and the image jumps out of
   the box. Static positioning removes the need for the translate entirely. */
.hi-post .card-img img {
    position: static !important;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
    transform: none;
    transition: transform .35s ease;
}

.hi-post:hover .card-img img {
    transform: scale(1.05);
}

.hi-post .card-footer {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px !important;
    background: transparent;
    border: 0;
}

/* One title wraps to two lines, so equal-height cards leave slack. Pinning the
   byline to the bottom puts that slack between title and byline instead of
   under the byline: every card ends exactly 24px below its byline, and the
   bylines line up across the row. */
.hi-post .nav {
    margin-top: auto !important;
    /* the markup's .mb-3 was leaving ~13px under the byline */
    margin-bottom: 0 !important;
}

/* Title first. height:auto clears theme's .h-48/.h-lg-52, which reserved a
   fixed two-line box and left dead space under one-line titles. */
.hi-post h5 {
    height: auto !important;
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--hi-heading);
    transition: color .2s ease;
}

.hi-post:hover h5 {
    color: var(--hi-red);
}

.hi-post .nav .nav-item {
    padding: 0 !important;
}

.hi-post .nav a {
    color: #5c5560 !important;
}

.hi-post .nav .font-size-sm {
    font-size: 14px;
}

/* Whole card clickable: the title link's ::after covers the card, so there is
   one link target and no nested anchors. */
.hi-post .hi-post-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hi-post:has(a:focus-visible) {
    outline: 3px solid rgba(222, 29, 30, .55);
    outline-offset: 3px;
}

/* Fallback for engines without :has() — outline the link itself instead */
@supports not (selector(:has(*))) {
    .hi-post a:focus-visible {
        outline: 2px solid var(--hi-red);
        outline-offset: 2px;
    }
}

/* ---------- Featured course cards ---------- */
/* Faint red halo behind the heading + a cool wash under the grid, so the white
   cards sit on something instead of dissolving into the page. */
.hi-courses {
    background:
        radial-gradient(760px 320px at 50% 0%, rgba(222, 29, 30, .07), transparent 70%),
        linear-gradient(180deg, #FBFBFC 0%, #F1F2F6 100%);
}

/* Header sits on the grid's left edge rather than centred — reads editorial
   next to a left-aligned card grid. Overrides the .text-center on the markup. */
.hi-courses .row.text-center {
    text-align: left !important;
}

.hi-courses h2 {
    max-width: 34ch;
    margin-inline: 0;
}

.hi-courses h2::after {
    margin: 14px 0 0;
}

/* auto-fill sizes the columns itself — 3-up on desktop, 1-up on phones,
   no breakpoints needed.
   min(320px, 100%) rather than a bare 320px: on a 320px-wide phone the
   container's content box is only ~290px, and a hard 320px minimum kept the
   track wider than its container — the right edge of every card, arrow chip
   included, was cut off with no way to scroll to it. */
.hi-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 24px;
}

/* --hi-t1/--hi-t2 are the card's wash colours; the flag rules below override
   them per language. Default is the brand red + ink for the non-language cards.
   The media block covers the top of the card, so the wash only shows through
   behind the title and the stat pills. */
.hi-course-card {
    --hi-t1: rgba(222, 29, 30, .13);
    --hi-t2: rgba(1, 1, 10, .07);
    position: relative;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(135deg, var(--hi-t1), transparent 72%),
        linear-gradient(315deg, var(--hi-t2), transparent 72%),
        #fff;
    border: 1px solid #E4E6EC;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 6px rgba(1, 1, 10, .05);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

/* :has() lets the flag inside the card drive the card's wash — no extra
   classes in the markup. Browsers without it keep the default red/ink wash. */
.hi-course-card:has(.hi-flag-de) {
    --hi-t1: rgba(255, 206, 0, .34);
    --hi-t2: rgba(221, 0, 0, .17);
}

.hi-course-card:has(.hi-flag-fr) {
    --hi-t1: rgba(0, 35, 149, .20);
    --hi-t2: rgba(237, 41, 57, .19);
}

.hi-course-card:has(.hi-flag-es) {
    --hi-t1: rgba(241, 191, 0, .36);
    --hi-t2: rgba(170, 21, 27, .17);
}

.hi-course-card:has(.hi-flag-jp) {
    --hi-t1: rgba(188, 0, 45, .17);
    --hi-t2: rgba(188, 0, 45, .08);
}

.hi-course-card:has(.hi-flag-cn) {
    --hi-t1: rgba(222, 41, 16, .18);
    --hi-t2: rgba(255, 222, 0, .36);
}

.hi-course-card:hover {
    color: inherit;
    transform: translateY(-8px);
    border-color: #F0CBCB;
    box-shadow: 0 26px 50px -18px rgba(222, 29, 30, .28), 0 12px 28px rgba(1, 1, 10, .10);
}

.hi-course-card:focus-visible {
    outline: 3px solid var(--hi-red);
    outline-offset: 3px;
}

/* Red rule that draws itself across the foot of the card on hover */
.hi-course-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--hi-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.hi-course-card:hover::after,
.hi-course-card:focus-visible::after {
    transform: scaleX(1);
}

.hi-course-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0e0e12;
}

/* Every source is the same monitor-mockup template (photo occupies x 12-88%,
   y 12-73% of the canvas, black bezel below it). The image is blown up to 135%
   and pulled up/left so the box shows the photograph only — no bezel, no
   caption band, no purple background. Percentages are shared by all three
   canvas sizes in use (748x534, 1280x900, 1600x1122) with ~1% margin.
   The vertical pull uses margin-top, not top: percentage margins resolve
   against the container's WIDTH, so the crop stays anchored to the top of the
   photograph at any tile height — a taller box just clips less off the bottom.
   That is what lets the featured tile below reuse these numbers unchanged.
   Box height must stay under 57% of tile width or the bezel creeps back in. */
.hi-course-media img {
    position: absolute;
    top: 0;
    left: -17.6%;
    margin-top: -13%;
    width: 135%;
    height: auto;
    /* Unified grade so eleven differently-lit group photos read as one set;
       hover restores the photo to full colour. */
    filter: saturate(.88) contrast(1.05);
    transition: transform .6s cubic-bezier(.2, .7, .3, 1), filter .45s ease;
}

.hi-course-card:hover .hi-course-media img {
    transform: scale(1.05);
    filter: none;
}

/* Language flag chip — drawn with gradients so there are no image requests and
   no emoji-font gaps (Windows Chrome renders flag emoji as letter pairs).
   It sits in the title row rather than floating on the photo: a title with a
   leading chip and a title without both look deliberate, whereas an empty
   photo corner on the five non-language cards read as a missing badge. */
.hi-flag {
    position: relative;
    flex: none;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(1, 1, 10, .1), 0 2px 6px rgba(1, 1, 10, .16);
    overflow: hidden;
}

.hi-flag-de {
    background: linear-gradient(#000 33.34%, #DD0000 33.34% 66.67%, #FFCE00 66.67%);
}

.hi-flag-fr {
    background: linear-gradient(90deg, #002395 33.34%, #fff 33.34% 66.67%, #ED2939 66.67%);
}

.hi-flag-es {
    background: linear-gradient(#AA151B 25%, #F1BF00 25% 75%, #AA151B 75%);
}

.hi-flag-jp {
    background: #fff;
}

.hi-flag-jp::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: #BC002D;
}

.hi-flag-cn {
    background: #DE2910;
}

/* Large star off-centre plus the small arc — enough to read as China rather
   than any other red-and-yellow flag */
.hi-flag-cn::before {
    content: "★";
    position: absolute;
    top: 52%;
    left: 32%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    line-height: 1;
    color: #FFDE00;
}

.hi-flag-cn::after {
    content: "★ ★ ★";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translateY(-50%);
    font-size: 3px;
    line-height: 1.6;
    letter-spacing: -1px;
    width: 5px;
    color: #FFDE00;
}

/* Title row: flex:1 on the card body pins the meta pills to the bottom edge */
.hi-course-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 18px 12px;
}

.hi-course-title {
    flex: 1 1 auto;
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: #12141A;
    transition: color .25s ease;
}

.hi-course-card:hover .hi-course-title {
    color: var(--hi-red);
}

.hi-course-go {
    flex: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(1, 1, 10, .08);
    color: #8A93A3;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.hi-course-card:hover .hi-course-go,
.hi-course-card:focus-visible .hi-course-go {
    background: var(--hi-red);
    border-color: var(--hi-red);
    color: #fff;
    transform: translateX(3px);
}

.hi-course-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px 18px;
}

/* Stats read as pills. Both stay on one line; the longest label ellipsises
   rather than wrapping, so every card ends at the same height. */
.hi-course-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(1, 1, 10, .07);
    font-size: 12.5px;
    line-height: 1.3;
    color: #4E5665;
    white-space: nowrap;
}

.hi-course-stat > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hi-course-stat svg {
    flex: none;
    width: 14px;
    height: 14px;
    color: #9CA3AF;
}

/* ---------- Featured tile (first card) ----------
   Spans two columns as a photo poster: it gives the section a focal point and
   squares the grid off — 11 cards fill 12 cells exactly, so no gap is left in
   the last row at 2, 3 or 4 columns. Only applied from 768px up, where the
   grid is guaranteed at least two columns (bootstrap .container is 540px
   below that, which fits one 320px track). */
@media (min-width: 768px) {
    .hi-course-card:first-child {
        grid-column: span 2;
        min-height: 340px;
    }

    /* Photo fills the tile instead of sitting in a band at the top */
    .hi-course-card:first-child .hi-course-media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }

    .hi-course-card:first-child .hi-course-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
            rgba(1, 1, 10, .92) 0%,
            rgba(1, 1, 10, .58) 38%,
            rgba(1, 1, 10, .05) 78%);
    }

    .hi-course-card:first-child .hi-course-body {
        position: relative;
        z-index: 1;
        align-items: flex-end;
        padding: 0 26px 8px;
    }

    .hi-course-card:first-child .hi-course-title,
    .hi-course-card:first-child:hover .hi-course-title {
        font-size: 27px;
        font-weight: 700;
        color: #fff;
    }

    .hi-course-card:first-child .hi-course-meta {
        position: relative;
        z-index: 1;
        padding: 0 26px 24px;
    }

    .hi-course-card:first-child .hi-course-stat {
        background: rgba(255, 255, 255, .92);
        border-color: transparent;
    }
}

/* ---------- Dark media bands (results / visas / videos) ---------- */
.hi-dark-band {
    background:
        radial-gradient(900px 380px at 88% -10%, rgba(222, 29, 30, .38), transparent 60%),
        linear-gradient(160deg, #200708 0%, var(--hi-ink) 55%, var(--hi-ink) 100%);
}

.hi-dark-band h2 {
    color: #fff;
    font-weight: 600;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    border-left: 4px solid var(--hi-red);
    padding-left: 16px;
}

/* ---------- Shared carousel band (Latest IELTS Results, Latest Visas) ----------
   Scoped to .hi-carousel so the shared <x-slider> keeps its original look on
   the four other pages that use it. Both dark carousel sections opt in by
   adding .hi-carousel — do not duplicate these rules per section. */
.hi-carousel {
    /* drives both the slide height and the arrows' vertical centre */
    --hi-slide-h: 400px;
    padding-top: clamp(3rem, 6vw, 4.5rem) !important;
    padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
    background:
        radial-gradient(1100px 640px at 50% 60%, rgba(222, 29, 30, .32), transparent 68%),
        radial-gradient(900px 380px at 88% -10%, rgba(222, 29, 30, .3), transparent 60%),
        linear-gradient(160deg, #200708 0%, var(--hi-ink) 55%, var(--hi-ink) 100%);
}

/* Centred header with the divider, replacing the left red bar. Font size is
   restated here because .hi-dark-band h2 runs ~10% smaller than `section h2`,
   which left the carousel titles short of every other section heading. */
.hi-carousel h2 {
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    max-width: 32ch;
    margin-inline: auto;
    padding-left: 0;
    border-left: none;
    text-align: center;
}

.hi-carousel h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: var(--hi-red);
    margin: 18px auto 0;
}

/* These headers sit in a .container.px-2, whose 8px padding is narrower than
   the -12px gutter margins Bootstrap puts on .row — so the row hung ~7px past
   the viewport on phones and body.scrollWidth grew with it. The single .col
   inside carries its own padding, so zeroing the row's margins costs nothing. */
.hi-carousel .row.mb-5 {
    margin-bottom: 2.25rem !important;
    margin-left: 0;
    margin-right: 0;
}

.hi-carousel .first-slider,
.hi-carousel .video-slider,
.hi-carousel .updates-slider {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 56px;
}

/* The component sets .slider{display:flex}, which turns the dots <ul> into a
   flex item beside the track (vertical dots, track pushed off-centre).
   Block layout puts the track and the dots back in a normal column. */
.hi-carousel .first-slider .slider,
.hi-carousel .video-slider .slider,
.hi-carousel .updates-slider .slider {
    display: block;
    position: relative;
    overflow: visible;
    /* slick-theme.min.css puts margin-bottom:30px on .slider, which is the
       dead space under the track — it made the bottom gap 102px against a
       72px top padding. Dots are absent here, so nothing needs the room. */
    margin-bottom: 0;
}

.hi-carousel .slick-slide {
    padding: 0 12px;
}

/* The uniform slide box. Sources run from 0.46 to 1.58 aspect, so `contain`
   letterboxes them by different amounts — the panel is what gives every slide
   the same top and bottom line without cropping anything. Overrides the white
   12px border the component's own inline <style> puts here; that block sits in
   the body, after this file, so !important is what beats it. */
.hi-carousel .center-container {
    width: 100%;
    max-width: 300px;
    height: var(--hi-slide-h);
    margin-inline: auto;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    /* visible, not hidden: the image's drop-shadow has to paint outside the box */
    overflow: visible !important;
    transition: transform .25s ease;
}

.hi-carousel .center-container:hover {
    transform: translateY(-4px) !important;
}

/* The <a> is the flex item, so it has to stretch before the img can fill it.
   Its .overflow-hidden class would clip the image's drop-shadow. */
.hi-carousel .center-container > a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* The box stays a fixed 300x400 so every slide occupies the same space, but it
   is invisible — only the artwork shows. drop-shadow, not box-shadow: with
   object-fit:contain the element box is 300x400 while the painted image is
   smaller, and box-shadow would trace that empty box. drop-shadow works on the
   rendered pixels, so it hugs the image edge. */
.hi-carousel .first-slider .slider img,
.hi-carousel .video-slider .slider img,
.hi-carousel .updates-slider .slider img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* !important beats .rounded (theme.min.css sets .25rem !important) on the
       shared component's <img class="img-fluid rounded">. */
    border-radius: 8px !important;
    box-shadow: none;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
}

/* Controls */
/* Centred on the track itself, so they stay put whether or not dots render.
   Inset into .first-slider's 56px gutter, clear of the fixed Chat button. */
.hi-carousel .slick-prev,
.hi-carousel .slick-next {
    z-index: 5;
    top: calc(var(--hi-slide-h) / 2);
    transform: translateY(-50%);
    width: 48px !important;
    height: 48px !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .38) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hi-carousel .slick-prev {
    left: -52px;
}

.hi-carousel .slick-next {
    right: -52px;
}

.hi-carousel .slick-prev:hover,
.hi-carousel .slick-next:hover {
    background: var(--hi-red) !important;
    border-color: var(--hi-red) !important;
}

.hi-carousel .slick-prev:before,
.hi-carousel .slick-next:before {
    color: #fff !important;
    opacity: 1;
    font-size: 22px !important;
}

/* Slick (v1.8.1) writes an inline style="display: block" onto the <ul>, which
   outranks any selector. Every layout declaration here needs !important to
   beat that inline declaration — stylesheet order is not the issue. */
.hi-carousel .slick-dots {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    position: static !important;
    width: 100% !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* One dot per page of 3 slides. inline-block, not block — block is what was
   stacking them into a vertical column. */
.hi-carousel .slick-dots li {
    display: none !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hi-carousel .slick-dots li:nth-child(3n+1) {
    display: inline-block !important;
}

/* A page dot reads as current when any of the 3 slides it covers is active. */
.hi-carousel .slick-dots li:nth-child(3n+1):has(+ li.slick-active) button:before,
.hi-carousel .slick-dots li:nth-child(3n+1):has(+ li + li.slick-active) button:before {
    color: var(--hi-red) !important;
    opacity: 1 !important;
}

/* 25+ slides is more than 8 pages, so drop the dots and let the arrows carry
   navigation. There are 44 results today, so this is the branch in effect; it
   re-enables itself automatically if the set drops below 25. */
.hi-carousel .slick-dots:has(li:nth-child(25)) {
    display: none !important;
}

.hi-carousel .slick-dots li button:before {
    color: #fff !important;
    opacity: .35;
    font-size: 10px !important;
}

.hi-carousel .slick-dots li.slick-active button:before {
    color: var(--hi-red) !important;
    opacity: 1;
}

@media (max-width: 767.98px) {
    /* The results and visa artwork is portrait (down to 0.46 wide/tall), so the
       box height is what sizes it: at 340px tall inside a 255px-wide cap the
       image painted ~156px across a 390px screen, less than half the width,
       with dead band either side. The box now takes the whole track and stands
       taller — object-fit:contain still letterboxes, nothing is cropped. */
    .hi-carousel {
        --hi-slide-h: 430px;
    }

    /* 40px each side is the room the arrows are inset into */
    .hi-carousel .first-slider,
    .hi-carousel .video-slider,
    .hi-carousel .updates-slider {
        padding: 0 40px;
    }

    .hi-carousel .center-container {
        max-width: none;
    }

    .hi-carousel .slick-prev,
    .hi-carousel .slick-next {
        width: 40px !important;
        height: 40px !important;
    }

    .hi-carousel .slick-prev {
        left: -38px;
    }

    .hi-carousel .slick-next {
        right: -38px;
    }
}

/* ---------- Cream sections (study abroad / certified / featured-in / reviews) ---------- */
.hi-cream-sec {
    background: linear-gradient(180deg, var(--hi-cream-soft) 0%, var(--hi-cream) 100%);
}

/* Two cream sections in a row each restarted the ramp, so the first ended on
   --hi-cream against the next one's --hi-cream-soft: a near-match that reads as
   a rendering seam. A cream section following another is flat, in the colour
   the one above it ends on, so the pair reads as one continuous field. */
.hi-cream-sec + .hi-cream-sec {
    background: var(--hi-cream);
}

.hi-cream-sec .fs-5 {
    color: var(--hi-muted);
}

/* Study-abroad destination tiles (row uses gy-5; logo rows use g-2).
   Each tile is a single pre-composed 1080x1080 PNG with the flag, the
   "STUDY IN <COUNTRY>" label and the tagline strip all baked into the file,
   so the card's job is just to present the whole square cleanly. */
.hi-cream-sec .row.gy-5 {
    --bs-gutter-y: 24px;
}

.hi-cream-sec .row.gy-5 .sk-fade {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(1, 1, 10, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.hi-cream-sec .row.gy-5 .sk-fade:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(1, 1, 10, .16);
}

.hi-cream-sec .row.gy-5 .sk-thumbnail2 {
    display: block;
}

/* 1/1 is the artwork's real ratio, so the full label and tagline stay visible
   and every card is exactly the same height. */
.hi-cream-sec .row.gy-5 img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    transition: transform .3s ease;
}

.hi-cream-sec .row.gy-5 .sk-fade:hover img {
    transform: scale(1.04);
}

/* Visa-consultant copy — same card treatment as .hi-intro-card, but a single
   column: three paragraphs of uneven length don't balance across two. */
.hi-visa {
    margin-top: 56px;
    text-align: center;
}

.hi-visa h2 {
    font-size: clamp(1.35rem, 2.55vw, 2.05rem);
    line-height: 1.15;
    max-width: 34ch;
    margin: 0 auto 1.4rem;
}

.hi-visa h2::after {
    margin-top: 26px;
}

/* 834px = 70ch of the paragraph font (10.54px/ch at 1.05rem Poppins) + 2x48px
   padding. Not set in ch: the card inherits Barlow/1rem, so its ch is narrower
   than the paragraphs' and the measure would come out short. */
.hi-visa-card {
    max-width: 834px;
    margin: 0 auto;
    padding: 48px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(1, 1, 10, .07);
    text-align: left;
}

.hi-visa-card p {
    margin: 0 0 1.35rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #5c5560;
}

.hi-visa-card p:last-child {
    margin-bottom: 0;
}

.hi-visa-card strong {
    color: #1F2937;
    font-weight: 600;
}

.hi-visa-card a[href^="tel:"] {
    color: var(--hi-red);
    text-decoration: none;
}

.hi-visa-card a[href^="tel:"]:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .hi-visa {
        margin-top: 36px;
    }

    .hi-visa-card {
        padding: 24px 20px;
    }
}

/* ---------- Video lectures carousel ----------
   Everything structural (centred header, arrows, spacing, no card, invisible
   box) comes from .hi-carousel above. Only the landscape 16/9 box, the fill
   mode and the play affordance differ, so that is all this block sets. */
.hi-videos .center-container {
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
}

.hi-videos .video-slider .slider img {
    object-fit: cover;
}

/* Dots off, matching the other two carousels. It also keeps .slider the same
   height as the track, which is what lets the arrows centre on a plain 50%
   instead of the fixed --hi-slide-h the portrait carousels use. */
.hi-videos .slick-dots {
    display: none !important;
}

.hi-videos .slick-prev,
.hi-videos .slick-next {
    top: 50%;
}

/* Play affordance. A pseudo-element, so it is decorative by construction —
   nothing is added to the DOM or the accessibility tree. Bottom-right rather
   than centred: these thumbnails carry their headline text in the middle. */
.hi-videos .center-container > a::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.5v9l7.5-4.5z' fill='%23DE1D1E'/%3E%3C/svg%3E")
        no-repeat 54% center;
    background-size: 24px 24px;
    box-shadow: 0 6px 18px rgba(1, 1, 10, .35);
    transition: transform .25s ease, background-color .25s ease;
    z-index: 2;
    pointer-events: none;
}

.hi-videos .center-container:hover > a::after {
    transform: scale(1.1);
    background-color: var(--hi-red);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.5v9l7.5-4.5z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* ---------- Latest updates carousel ----------
   Square social-post format. Same reuse as .hi-videos: only the box shape, the
   fill mode and the iframe sizing differ. No play affordance — these items are
   fancybox image posts, and the handful that are videos render as live YouTube
   embeds that carry their own play control. */
.hi-updates .center-container {
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 1;
}

.hi-updates .updates-slider .slider img {
    object-fit: cover;
}

/* The video rows render an <iframe> instead of an <a>, so it needs the box
   treatment directly to sit in the same square as its neighbours. */
.hi-updates .updates-slider .slider iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
}

.hi-updates .slick-dots {
    display: none !important;
}

.hi-updates .slick-prev,
.hi-updates .slick-next {
    top: 50%;
}

/* ---------- Why choose tiles ---------- */
.hi-why h2 {
    max-width: 34ch;
    margin-inline: auto;
}

.hi-why .row {
    justify-content: center;
}

/* The card is an inner div, not the column itself: a background on the column
   fills the grid gutter, which is what makes cards touch with no visible gap.
   The column is the flex context that gives every card equal height. */
.hi-tile-col {
    display: flex;
}

.hi-tile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centres the icon+label group if the row stretches this card taller than
       its content, so slack never collects under the label */
    justify-content: center;
    background: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(1, 1, 10, .05);
    transition: transform .25s ease, box-shadow .25s ease;
}

.hi-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(1, 1, 10, .12);
}

/* Every icon here is inline SVG painting with fill="currentColor", so a single
   colour on the circle turns the whole set brand red — no per-icon filter. The
   six unrelated colours came from inline style attributes, now removed. */
.hi-tile .icon-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(222, 29, 30, .08);
    color: var(--hi-red);
    margin-bottom: 20px;
    transition: background-color .25s ease, color .25s ease;
}

/* viewBoxes differ (45x45, 50x42, 38x51...); the default preserveAspectRatio
   fits each inside the 40px square without distorting it. */
.hi-tile .icon-circle svg {
    width: 40px;
    height: 40px;
}

.hi-tile:hover .icon-circle {
    background: var(--hi-red);
    color: #fff;
}

/* Label area floors at two lines so a wrapping label never makes its card
   taller than the rest. Centred rather than top-aligned: at widths where every
   label fits on one line, top-aligning left the reserved second line showing as
   a gap under the text. The block is the same height and position in every
   card, so labels still line up across the row. */
.hi-tile p {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin: 0 !important;
    color: #1F2937 !important;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}

/* ---------- Logo walls (Certified / Featured In) ---------- */
/* theme.min.css pairs this with .img-ratio-9, which adds
   padding-bottom: 69.4% as an aspect spacer. Every use of it on this page
   supplies its own height, so keep that spacer zeroed as the page always did. */
.sk-thumbnail2 {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0;
}

/* 24px padding + a 56px logo cap = 104px, identical for every tile */
.sk-thumbnail_logo {
    height: 104px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.certifiedLogo {
    padding: 24px;
    border-radius: 12px !important;
    border: 1px solid #EAEAEA !important;
    background: #fff;
    box-shadow: 0 2px 8px rgba(1, 1, 10, .04) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.certifiedLogo:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(1, 1, 10, .10) !important;
}

/* The first tile holds its <img> directly while the other five nest it two
   levels deep (.card-zoom > a.sk-thumbnail2). Stretching those wrappers is what
   lets one rule size all six logos the same. */
.certifiedLogo .card-zoom,
.certifiedLogo .sk-thumbnail2 {
    width: 100%;
    height: 100%;
    /* !important because the anchors carry Bootstrap's .d-block, which is
       itself !important — specificity alone loses to it and the logos stay
       pinned to the left padding edge. */
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Normalises source artwork that ranges from 163x152 to 266x189 */
.certifiedLogo img {
    max-height: 56px;
    max-width: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: auto;
}

.hi-logo-row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.hi-certs h2 {
    max-width: 34ch;
    margin-inline: auto;
}

.hi-certs {
    padding-top: clamp(3.5rem, 7vw, 5.5rem) !important;
    padding-bottom: clamp(3.5rem, 7vw, 5.5rem) !important;
}

.certifiedLogo img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    box-shadow: none !important;
}

/* ---------- Stats ---------- */
.hi-stats-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 55% of the old rendered size. It used to fill the col-lg-6 content box at
   576px (the source is 2318px wide, so .img-fluid capped it); 0.55 x 576 = 317. */
.hi-stats-logo img {
    max-width: min(317px, 100%);
}

.hi-stats-row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.hi-stat-col {
    display: flex;
}

/* Grid, not flex: it puts the circle in one cell spanning both rows with the
   number and label stacked beside it, without wrapping them in an extra div. */
.hi-stat {
    width: 100%;
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 18px;
    align-items: center;
    text-align: left;
    background: #fff;
    border: 1px solid #EAEAEA;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 2px 10px rgba(1, 1, 10, .04);
    transition: transform .25s ease, box-shadow .25s ease;
}

.hi-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(1, 1, 10, .10);
}

/* Same treatment as .hi-tile's icon circle, minus the dashed border the theme
   class carries */
.hi-stat .rounded-circle {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 64px !important;
    height: 64px !important;
    border: none !important;
    background: rgba(222, 29, 30, .08) !important;
    color: var(--hi-red) !important;
}

.hi-stat .rounded-circle svg {
    width: 30px;
    height: 30px;
}

.hi-stat .h1 {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    /* !important throughout: the markup carries .text-black and .fw-bold, both
       of which are !important in theme.min.css. */
    color: #1F2937 !important;
    font-size: 38px;
    font-weight: 800 !important;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.hi-stat .h1 span[data-toggle="countup"] {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #1F2937 !important;
}

.hi-stat .h5 {
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    font-size: 15px;
    font-weight: 500 !important;
    color: #5c5560 !important;
}

/* Divider between the logo and the stats, desktop only — below lg the columns
   stack and a left border would read as a stray vertical line. */
@media (min-width: 992px) {
    .hi-stats-panel {
        border-left: 1px solid #EAEAEA;
        padding-left: clamp(28px, 4vw, 56px);
    }
}

/* ---------- Testimonials ---------- */
#testimonialCarousel {
    text-align: center;
}

.testimonial-section p {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 6em;
}

.testimonial-card {
    background: white;
    color: black;
    border-radius: 20px;
    padding: 28px 22px;
    box-shadow: 0 14px 36px rgba(1, 1, 10, .08);
    margin: 10px;
    border: 1px solid var(--hi-line);
}

.testimonial-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(222, 29, 30, .25);
}

.testimonial-card h5 {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5;
}

.testimonial-section .carousel-control-prev,
.testimonial-section .carousel-control-next {
    width: 46px;
    height: 46px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--hi-ink);
    border-radius: 50%;
    opacity: .8;
    transition: opacity .2s ease, background-color .2s ease;
}

.testimonial-section .carousel-control-prev:hover,
.testimonial-section .carousel-control-next:hover {
    opacity: 1;
    background-color: var(--hi-red);
}

.testimonial-section .carousel-control-prev {
    left: -6px;
}

.testimonial-section .carousel-control-next {
    right: -6px;
}

.testimonial-section .carousel-control-prev-icon,
.testimonial-section .carousel-control-next-icon {
    width: 1.1rem;
    height: 1.1rem;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

.testimonial-section .carousel-indicators button {
    background-color: var(--hi-red);
}

/* View-all links (testimonials + blog headers) */
.testimonial-section .col-md-auto a,
.hi-blog .col-md-auto a {
    color: var(--hi-red);
}

/* ---------- Featured In (press logos) ---------- */
/* The markup uses <h3> here while every other section title is <h2>; matching
   the size keeps the visual hierarchy without changing the document outline. */
.hi-featured h3 {
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    max-width: 34ch;
    margin-inline: auto;
}

/* Press marks are wordier than the certification marks, so they cap smaller */
.hi-featured .certifiedLogo img {
    max-height: 44px;
    max-width: 75%;
}

/* ---------- Student reviews ---------- */
.hi-viewall {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.1rem;
    color: var(--hi-red);
    font-weight: 600;
}

.hi-viewall:hover {
    color: var(--hi-red-dark, #B31718);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Gutters without the negative row margins: .carousel-inner clips at exactly
   the container's content box, so -14px margins push the first and last cards
   onto the clip edge and their border, radius and shadow disappear. */
.hi-reviews .carousel-item .row {
    --bs-gutter-x: 28px;
    margin-left: 0;
    margin-right: 0;
}

.hi-reviews .carousel-item .row > [class*="col-"] {
    display: flex;
}

.hi-reviews .testimonial-card {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 30px 26px 28px;
    border-radius: 16px;
    border: 1px solid var(--hi-line);
    box-shadow: 0 6px 22px rgba(1, 1, 10, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.hi-reviews .testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(1, 1, 10, .12);
}

/* Decorative quote watermark. A background image rather than a text glyph, so
   no assistive technology can announce it — pseudo-elements cannot take
   aria-hidden, but an empty box with a background has nothing to announce. */
.hi-reviews .testimonial-card::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 16px;
    width: 74px;
    height: 74px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23DE1D1E' d='M9.9 5.5c-3.3 1.5-5.4 4.4-5.4 8.1 0 3.1 1.9 5 4.3 5 2.2 0 3.8-1.7 3.8-3.8 0-2-1.4-3.6-3.3-3.6-.4 0-.9.1-1 .1.3-1.7 2-3.6 3.7-4.5l-2.1-1.3zm9.2 0c-3.3 1.5-5.4 4.4-5.4 8.1 0 3.1 1.9 5 4.3 5 2.2 0 3.8-1.7 3.8-3.8 0-2-1.4-3.6-3.3-3.6-.4 0-.9.1-1 .1.3-1.7 2-3.6 3.7-4.5l-2.1-1.3z'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: .09;
    pointer-events: none;
}

.hi-reviews .testimonial-card > * {
    position: relative;
    z-index: 1;
}

/* Name, course and stars stay centred; the review body is left-aligned — it is
   too long to read ragged-both-sides. */
.hi-reviews .testimonial-card img,
.hi-reviews .testimonial-card h5,
.hi-reviews .testimonial-card p.text-success {
    text-align: center;
}

.hi-reviews .testimonial-card p.text-success {
    margin-bottom: 1rem;
}

/* Fixed four lines: clamped so long reviews cut cleanly, min-height so short
   ones still fill the box. Every card then ends flush with its bottom padding
   at the same height, with no "Read more" copy added. */
.hi-reviews .testimonial-card p:not(.text-success) {
    text-align: left;
    font-size: 14px;
    line-height: 1.7;
    -webkit-line-clamp: 4;
    max-height: none;
    height: calc(4 * 1.7em);
    margin: 0;
}

/* Arrows clear of the cards and centred on the track, matching the geometry of
   the slick arrows on the other carousels. Dark fill rather than the slick
   translucent white, which would disappear on this cream background. */
.hi-reviews .carousel-control-prev,
.hi-reviews .carousel-control-next {
    width: 48px;
    height: 48px;
}

/* -60px is only safe once the viewport is wide enough to leave 60px outside the
   container — that is 1440px up. Below it there is less room, and the fixed
   offset pushed the next arrow past the right edge (21px at 768, 45px at 1200),
   where body's overflow-x:hidden silently cut it off. Clamp the offset to the
   margin that actually exists; the 12px keeps it clear of a scrollbar, which
   100vw counts and the viewport does not. */
.hi-reviews .carousel-control-prev {
    left: max(-60px, calc((100% - 100vw) / 2 + 12px));
}

.hi-reviews .carousel-control-next {
    right: max(-60px, calc((100% - 100vw) / 2 + 12px));
}

/* Below md the desktop carousel is display:none and the mobile one takes over,
   but .container is still capped at 540px — so between 576px and ~620px the
   -60px inset put both arrows past the edges of the screen, half of each one
   unreachable. Inside the track at every width where the mobile carousel runs. */
@media (max-width: 767.98px) {
    .hi-reviews .carousel-control-prev {
        left: 4px;
    }

    .hi-reviews .carousel-control-next {
        right: 4px;
    }
}

/* ---------- Slick sliders (shared x-slider + home-only sliders) ----------
   Component <style> blocks load after this file, so these use !important. */
.slick-prev,
.slick-next {
    width: 46px !important;
    height: 46px !important;
    background: rgba(255, 255, 255, .14) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    backdrop-filter: blur(4px);
}

.slick-prev:hover,
.slick-next:hover {
    background: var(--hi-red) !important;
}

.center-container {
    border: none !important;
    padding: 10px;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35) !important;
}

.center-container:hover {
    transform: scale(1.02) !important;
}

.first-slider .slider img,
.updates-slider .slider img,
.video-slider .slider img {
    border-radius: 10px;
}

.slick-dots li button:before {
    color: #fff !important;
    opacity: .4;
    font-size: 9px !important;
}

.slick-dots li.slick-active button:before {
    color: var(--hi-red) !important;
    opacity: 1;
}

/* ---------- Footer (shared partial — scoped here) ---------- */
footer.py-8 {
    border-top: 4px solid var(--hi-red);
}

footer.py-8 .text-reset {
    color: rgba(255, 255, 255, .78) !important;
    transition: color .2s ease;
    text-underline-offset: 4px;
}

footer.py-8 .text-reset:hover {
    color: #fff !important;
    text-decoration: underline;
    text-decoration-color: var(--hi-red);
}

footer.py-8 .footer-accordion-toggle {
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .85rem;
}

footer.py-8 p.text-white,
footer.py-8 a.text-white {
    color: rgba(255, 255, 255, .85) !important;
}

footer.py-8 .firstCntainer a {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}

/* ---------- Mobile ---------- */
@media (max-width: 575px) {
    .hi-hero .firstCntainer a {
        width: 40px;
        height: 40px;
        margin-right: 10px !important;
    }

    .slick-dots {
        display: none !important;
    }

    .sk-thumbnail_logo {
        height: 90px;
    }

    /* Six logos three-across leaves ~95px per card; the desktop 24px padding
       plus the 80% cap squeezed the ISO/IDP/ETS marks down to ~40px, small
       enough to read as smudges. Trimming the padding and dropping the cap
       gives the artwork the whole cell. */
    .certifiedLogo {
        padding: 12px;
    }

    .certifiedLogo img,
    .hi-featured .certifiedLogo img {
        max-width: 100%;
    }

    /* No fixed height: it fought the 1/1 aspect-ratio above and object-fit:cover
       cropped the bottom of the artwork, cutting the country name off every
       tile ("STUDY IN" with UK / USA / CANADA sliced in half). */

    .testimonial-section .carousel-control-prev {
        left: 4px;
    }

    .testimonial-section .carousel-control-next {
        right: 4px;
    }

    .hi-tile {
        min-height: 170px;
    }

    /* One card per row here, so the equal-height argument for clipping these to
       one line no longer applies — and it was clipping real content
       ("750+ Visa Approv…", "Visa time: 1-2 Mont…"). Let them wrap instead. */
    .hi-course-meta {
        flex-wrap: wrap;
    }

    .hi-course-stat {
        white-space: normal;
    }

    .hi-course-stat > span {
        overflow: visible;
        text-overflow: clip;
    }
}