/* ==========================================================================
   Hire Minds Academy — Home / Hero section
   Styles for resources/views/frontend/index.blade.php (hero only).
   The global navbar lives in assets/css/frontend/navbar.css.
   ========================================================================== */

:root {
    --hm-gold: #E9A320;
    --hm-gold-2: #F6B72B;
    --hm-gold-dark: #C6851A;
    --hm-brown: #2A1D14;
    --hm-brown-2: #3D2A1D;
    --hm-yellow: #F7B500;
    --hm-ink: #23180F;
    --hm-muted: #6D6357;
    --hm-cream: #FCF8F1;
    --hm-white: #FFFFFF;

    --hm-shadow-sm: 0 6px 18px rgba(42, 29, 20, .08);
    --hm-shadow-md: 0 14px 40px rgba(42, 29, 20, .12);
    --hm-shadow-lg: 0 30px 70px rgba(42, 29, 20, .18);
    --hm-radius: 18px;
    --hm-ease: cubic-bezier(.22, .7, .2, 1);
}

/* The shared layout centres #main-content with flex; the hero needs the full
   canvas, so neutralise that just on this page (home.css only loads here). */
#main-content {
    display: block;
    min-height: auto;
    padding: 0;
    text-align: left;
}

/* ============================== HERO SHELL ============================== */
.hm-hero {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 100px;
    /* height: 100vh;
    min-height: 900px;
    padding: 120px 0 60px; */
    overflow: hidden;
    background: #fff
}

/* Slow-rotating background glow — clockwise, covering the whole hero (top
   header area included). The layer is a square whose inscribed circle is
   larger than the hero's half-diagonal, so no corner is ever left uncovered
   while it rotates. */
.hm-hero__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170vmax;
    height: 170vmax;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.hm-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .16;
    filter: blur(46px);
    animation: hm-spin 90s linear infinite;
    will-change: transform;
}

/* The hero's four-colour aurora now lives page-wide on #main-content::before
   (see "Page-wide aurora" at the end of this file) so the very same background
   runs continuously behind every section with no visible seams. */

.hm-hero__container {
    position: relative;
    z-index: 2;

}

/* ============================== LEFT COLUMN ============================== */
.hm-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* padding: 8px 16px 8px 10px; */
    margin-bottom: 16px;

}

.hm-badge__icon {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--hm-yellow), var(--hm-gold-dark));
    flex-shrink: 0;
    animation: hm-fade-pulse 1.6s ease-in-out infinite;
}

/* Blinking caret + fading badge icon share this fade in/out */
@keyframes hm-fade-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.hm-card__title .hm-caret {
    display: inline-block;
    font-weight: 400;
    animation: hm-fade-pulse 1.1s ease-in-out infinite;
}

.hm-badge__text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #843D21;
}

.hm-hero__title {
    margin: 0 0 22px;
    font-size: 48px;
    font-weight: 800;
    line-height: 57px;
    letter-spacing: -.02em;
    color: var(--hm-ink);
}

.hm-hero__title-accent {
    position: relative;
    color: var(--hm-gold);
}

.hm-hero__text {
    max-width: 500px;
    margin: 0 0 34px;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--hm-muted);
}

.hm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Buttons */
.hm-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    transition: transform .25s var(--hm-ease), box-shadow .25s var(--hm-ease), background .25s var(--hm-ease);
}

.hm-btn__label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size:16px;
    font-weight:600;
}

/* White chevron chip on the primary button */
.hm-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: .8rem;
    color: #843D21;
    background: #fff;
    border-radius: 9px;
}

.hm-btn--primary {
    color: #fff;
    background-color: #843D21;
    padding: 8px 8px 8px 26px;
}

/* Continuously looping premium shimmer — two thin slanted light lines that
   sweep across the button together. */
.hm-btn--primary::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -160%;
    width: 55%;
    height: 140%;
    background: linear-gradient(to right,
            transparent 44%,
            rgba(255, 255, 255, .5) 45%,
            rgba(255, 255, 255, .5) 49%,
            /* line 1 */
            transparent 50%,
            transparent 51%,
            rgba(255, 255, 255, .5) 52%,
            rgba(255, 255, 255, .5) 56%,
            /* line 2 — same width, small gap */
            transparent 57%);
    transform: skewX(-20deg);
    animation: hm-shimmer 6s linear infinite;
}

/* .hm-btn--primary:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 18px 42px rgba(233, 163, 32, .48);
    color: #fff;
} */

.hm-btn--ghost {
    color: #843D21;
    background: #fff;
    border: 1.5px solid #843D21;
    padding: 16px 34px;
}

/* .hm-btn--ghost:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 32px rgba(132, 61, 33, .22);
    color: #843D21;
} */

/* Hero: Explore Course + Apply share the exact same width & height. Scoped to
   the hero so the About / Contact buttons keep their own sizing. */
.hm-hero__actions .hm-btn {
    width: 220px;
    height: 56px;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
}
.hm-hero__actions .hm-btn--primary { padding: 0 8px 0 24px; }
.hm-hero__actions .hm-btn--primary .hm-btn__label { width: 100%; justify-content: space-between; gap: 12px; }
.hm-hero__actions .hm-btn--ghost { justify-content: center; }

/* ============================== RIGHT VISUAL ============================== */
/* Nudge the left column up. The row centres both columns against the tall hero
   image; this lifts the text block so it reads higher in the first view.
   transform, so nothing reflows. */
.hm-hero__left {
    transform: translateY(-28px);
}

.hm-hero__right {
    position: relative;
}

.hm-hero__visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    will-change: transform;
}

/* Faint secondary ring (the main dashed ring is inside the student photo) */
.hm-hero__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 104%;
    height: 104%;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(233, 163, 32, .28);
    border-radius: 50%;
    animation: hm-spin-reverse 120s linear infinite;
    pointer-events: none;
}

/* The hero visual is two layers: the yellow shape below, the person above.
   The shape is the theme's own artwork and always renders; the person is an
   optional admin upload, so nothing here may depend on it existing. */
.hm-hero__blob {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Taken out of the flow so the shape alone sets the block's height — otherwise
   removing the photo would collapse the hero.

   The numbers below are measured off the artwork, not guessed. hero-right-bg
   only paints yellow across x 7.3%–95.2% and y 4.1%–92.0% of its own box; the
   rest is transparent padding. Anchoring the figure to the BOX bottom therefore
   dropped her ~56px below the visible yellow and out through the foot of the
   section. bottom: 11% lands her on the shape's real bottom edge; left: 47%
   offsets her against the shape's left-heavy mass, which is what keeps the
   notebook from crossing its right edge.

   Sized by height, not width: an admin can upload a cut-out of any proportion,
   and height + object-fit: contain keeps every one of them filling the same
   vertical band inside the shape instead of scaling by an accident of crop.
   max-width stops a very wide one from spilling past the shape's sides. */
.hm-hero__student {
    position: absolute;
    z-index: 2;
    left: 47%;
    bottom: 11%;
    transform: translateX(-50%);
    display: block;
    height: 78%;
    width: auto;
    max-width: 80%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 26px 44px rgba(42, 29, 20, .20));
}

/* .hm-reveal, .hm-reveal--fade and .hm-reveal.is-visible each set `transform`,
   which would wipe out the translateX(-50%) doing the centring above and throw
   the photo off to the right. Re-apply it in every state the reveal can be in —
   --fade is opacity-only, so one value covers all three. */
.hm-hero__student.hm-reveal,
.hm-hero__student.hm-reveal--fade,
.hm-hero__student.hm-reveal.is-visible {
    transform: translateX(-50%);
}

/* Floating cards */
.hm-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(42, 29, 20, .05);
    border-radius: 16px;
    box-shadow: var(--hm-shadow-md);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hm-card__body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hm-card__title {
    font-size: 16px;
    font-weight: 500;
    color: var(--hm-ink);
}

.hm-card__sub {
    font-size: .72rem;
    color: var(--hm-muted);
    white-space: nowrap;
}

.hm-card__logo,
.hm-card__star {
    display: block;
    flex-shrink: 0;
}

.hm-card__avatars {
    display: block;
    height: 30px;
    width: auto;
}

.hm-card--google {
    top: 12%;
    left: -7%;
}

.hm-card--review {
    top: 17%;
    right: -1%;
}

.hm-card--enroll {
    top: 60%;
    right: 78%;
}

/* Floating technology icons — positioned across the hero container
   (moved out of the visual so HTML can sit in the left half). */
.hm-tech {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background: #fff;
    border-radius: 10px !important;
    box-shadow: var(--hm-shadow-md);
}

.hm-tech img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

/* HTML icon floats beside the "Get Hired" end of the badge (top of the left
   column). Positioned from the top now, not the bottom, so it reads against the
   badge rather than the buttons. */
.hm-tech--html {
    left: 27%;
    top: 6%;
}

/* JS icon floats beside "Right Skills" — the end of the heading's second line. */
.hm-tech--js {
    left: 40%;
    top: 34%;
}

/* Scroll-down circular badge */
.hm-scroll {
    position: absolute;
    z-index: 4;
       right: -8%;
    bottom: 20%;
    width: 104px;
    height: 104px;
    padding: 0;
    background: var(--hm-white);
    border: none;
    border-radius: 50%;
    box-shadow: var(--hm-shadow-lg);
    cursor: pointer;
}

.hm-scroll__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: hm-spin 18s linear infinite;
}

.hm-scroll__text {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    fill: var(--hm-brown);
}

.hm-scroll__arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.3rem;
    /* background: linear-gradient(135deg, var(--hm-gold-2), var(--hm-gold-dark)); */
    border-radius: 50%;
}

/* ============================== ANIMATIONS ============================== */
@keyframes hm-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hm-spin-reverse {
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes hm-shimmer {
    0% {
        left: -160%;
    }

    55% {
        left: 160%;
    }

    100% {
        left: 160%;
    }
}

@keyframes hm-float-slow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}

@keyframes hm-float-a {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

@keyframes hm-float-b {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-11px) rotate(1.5deg);
    }
}

@keyframes hm-float-c {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(6px, -12px);
    }
}

.hm-float-a {
    animation: hm-float-a 6s ease-in-out infinite;
}

.hm-float-b {
    animation: hm-float-b 8s ease-in-out infinite;
}

.hm-float-c {
    animation: hm-float-c 7s ease-in-out infinite;
}

@keyframes hm-nudge {

    0%,
    100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, -35%);
    }
}

/* ============================== ENTRANCE REVEAL ============================== */
.hm-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--hm-ease), transform .7s var(--hm-ease);
}

.hm-reveal--fade {
    transform: none;
}

.hm-reveal.is-visible {
    opacity: 1;
    border-radius: 36px;
    transform: none;
}

.hm-reveal[data-delay="100"] {
    transition-delay: .10s;
}

.hm-reveal[data-delay="200"] {
    transition-delay: .20s;
}

.hm-reveal[data-delay="300"] {
    transition-delay: .30s;
}

.hm-reveal[data-delay="400"] {
    transition-delay: .40s;
}

.hm-reveal[data-delay="500"] {
    transition-delay: .50s;
}

/* ============================== RESPONSIVE ============================== */
/* Tablet & below — stack the two columns, centre the content */
@media (max-width: 991.98px) {
    .hm-hero {
        height: auto;
        min-height: 100vh;
        padding: 150px 0 80px;
        text-align: center;
    }

    .hm-badge {
        margin-inline: auto;
    }

    .hm-hero__text {
        margin-inline: auto;
    }

    .hm-hero__actions {
        justify-content: center;
    }

    .hm-hero__visual {
        margin-top: 60px;
        max-width: 460px;
    }

    /* Hide the scattered tech icons once the layout stacks (they overlap otherwise). */
    .hm-tech {
        display: none;
    }
}

/* Mobile — shrink visual, tuck cards inward so nothing clips off-screen */
@media (max-width: 575.98px) {
    .hm-hero {
        min-height: 0;
        margin-top: 0;
        padding: 88px 0 56px;
    }

    .hm-hero__title {
        margin-bottom: 16px;
        font-size: clamp(2rem, 9vw, 2.55rem);
        line-height: 1.15;
    }

    .hm-hero__left { transform: none; }

    .hm-hero__text {
        margin-bottom: 24px;
        font-size: .98rem;
        line-height: 1.65;
    }

    /* Keep both CTAs on one row and let them split the width evenly. */
    .hm-hero__actions {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .hm-hero__actions .hm-btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 48px;
        border-radius: 12px;
    }

    .hm-hero__actions .hm-btn__label {
        font-size: clamp(11px, 3.2vw, 14px);
        white-space: nowrap;
    }

    .hm-hero__actions .hm-btn--primary {
        padding: 0 6px 0 14px;
    }

    .hm-hero__actions .hm-btn--primary .hm-btn__label {
        gap: 8px;
    }

    .hm-hero__actions .hm-btn i {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        font-size: .68rem;
        border-radius: 8px;
    }

    .hm-hero__visual {
        width: min(100%, 350px);
        margin-top: 40px;
    }

    .hm-card {
        padding: 9px 12px;
        gap: 9px;
    }

    .hm-card__title {
        font-size: .8rem;
    }

    .hm-card__sub {
        font-size: .66rem;
    }

    .hm-card--google {
        left: -3%;
    }

    .hm-card--review {
        right: -2%;
    }

    .hm-card--enroll {
        right: -2%;
        top: -6%;
    }

    .hm-scroll {
        width: 82px;
        height: 82px;
        right: 0;
    }

    .hm-scroll__arrow {
        width: 32px;
        height: 32px;
    }

    .hm-badge__text,
    .hm-cats__label-text,
    .hm-courses__label-text,
    .hm-stories__label-text,
    .hm-blogs__label-text {
        font-size: 11px;
        letter-spacing: .12em;
    }

    /* Section headings are sized in the small-screen heading scale at the very
       end of this file — each section's own .hm-*__title rule is declared
       further down, so a rule here would be overridden by it. */

    .hm-cats__desc,
    .hm-courses__desc,
    .hm-stories__desc,
    .hm-blogs__desc,
    .hm-events__desc {
        font-size: .94rem;
        line-height: 1.65;
    }
}

/* ============================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce) {

    .hm-hero__bg img,
    .hm-hero__ring,
    .hm-hero__student,
    .hm-btn--primary::before,
    .hm-float-a,
    .hm-float-b,
    .hm-float-c,
    .hm-scroll__ring,
    .hm-scroll__arrow {
        animation: none !important;
    }

    .hm-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.hm-a {
    top: 109%;
    left: 6%;
    border-radius: 8px;

}

.hm-b {
      top: 30%;
    left: 46%;
    transform: rotate(334deg) !important;
}

/* .apply{
    border: 1px solid #843d21;
} */

/* ============================== TRUSTED PARTNERS ==============================
   Moved to assets/css/frontend/partners.css — the section is now shared with
   the About page (markup: resources/views/frontend/partials/partners.blade.php).
   ============================================================================ */

/* ============================== ABOUT US ============================== */
.hm-about {
    position: relative;
    padding: 90px 0 50px;
    overflow: hidden;
}

/* Slow-rotating premium background (same as the hero) */
.hm-about__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.hm-about__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .10;
    filter: blur(60px);
    animation: hm-spin 90s linear infinite;
    will-change: transform;
}

.hm-about__container {
    position: relative;
    z-index: 1;
}

/* ------------------------------ Left visual ------------------------------ */
.hm-about__visual {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

.hm-about__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;

}

.hm-about__deco {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.hm-about__deco--circle {
    top: 4%;
    left: 2%;
    width: 90px;
    opacity: .8;
}

.hm-about__deco--star {
    top: 2%;
    right: 14%;
    width: 42px;

}

/* ------------------------------ Right content ------------------------------ */
.hm-about__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.hm-about__label-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--hm-yellow), var(--hm-gold-dark));
    animation: 1.6s ease-in-out 0s infinite normal none running hm-fade-pulse;
}

.hm-about__label-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #843D21;
}

.hm-about__title {
    max-width: 560px;
    margin: 0 0 20px;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.25;
    color: #1E1E1E;
}

.hm-about__text {
    max-width: 560px;
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.8;
    color: #6D6357;
}
/* The copy runs to several paragraphs. They sit 16px apart so they read as one
   block; the last one keeps the original 28px that separates the copy from the
   feature cards below it. */
.hm-about__text:last-of-type {
    margin-bottom: 28px;
}

/* Feature cards */
.hm-about__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 560px;
    margin-bottom: 30px;
}

.hm-about__card {
    padding: 20px;
    border-radius: 8px;
    transition: transform .3s var(--hm-ease), box-shadow .3s var(--hm-ease);
}

.hm-about__card--blue {
    background: #DFFDFF;
}

.hm-about__card--yellow {
    background: #FFF9CC;
}

/* 
.hm-about__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hm-shadow-md);
} */

.hm-about__card-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
}

.hm-about__card--blue .hm-about__card-title {
    color: #008791;
}

.hm-about__card--yellow .hm-about__card-title {
    color: #B29D00;
}

.hm-about__card-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #111111;
}

/* Reuse the hero CTA look; add the hover the hero button doesn't apply,
   scoped here so the hero button is untouched. */
/* .hm-about__btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 34px rgba(132, 61, 33, .32);
} */

/* ------------------------------ Statistics ------------------------------ */
/* Stat counters moved to assets/css/frontend/counters.css — the section is now
   shared with the About page (markup: partials/counters.blade.php). */

/* ------------------------------ Animations ------------------------------ */
@keyframes hm-float-y {

    0%,
    100% {
        transform: translateY(-8px);
    }

    50% {
        transform: translateY(8px);
    }
}

@keyframes hm-twinkle {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
        opacity: .9;
    }

    50% {
        transform: rotate(180deg) scale(1.2);
        opacity: .45;
    }
}

/* Entrance reveals — triggered when JS adds .is-in to the section */
.hm-anim {
    opacity: 0;
    transition: opacity .7s var(--hm-ease), transform .7s var(--hm-ease);
    will-change: opacity, transform;
}

.hm-anim--left {
    transform: translateX(-45px);
}

.hm-anim--right {
    transform: translateX(45px);
}

.hm-anim--up {
    transform: translateY(34px);
}

.hm-anim--d1 {
    transition-delay: .08s;
}

.hm-anim--d2 {
    transition-delay: .18s;
}

.hm-anim--d3 {
    transition-delay: .28s;
}

.hm-anim--d4 {
    transition-delay: .38s;
}

.is-in .hm-anim {
    opacity: 1;
    transform: none;

}

.hm-about__title {
    font-weight: 700;
    width: auto;
    max-width: 543px;
    font-size: 34px;

}

/* ------------------------------ Responsive ------------------------------ */
/* Tablet */
@media (max-width: 991.98px) {
    .hm-about {
        padding: 70px 0;
    }

    .hm-about__visual {
        margin-bottom: 10px;
        max-width: 480px;
    }

    .hm-about__card {
        padding: 24px;
    }
}

/* Mobile — image first, content below, stats in 2 columns, centred */
@media (max-width: 767.98px) {
    .hm-about__cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hm-about__title,
    .hm-about__text {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .hm-about {
        padding: 56px 0;
    }

    .hm-about__right {
        text-align: center;
    }

    .hm-about__title {
        width: auto;
        margin-inline: auto;
    }

    .hm-about__cards {
        max-width: 420px;
        margin-inline: auto;
    }

    /* Compact CTA — sits inline (centred by .hm-about__right) instead of
       stretching the full column width. */
    .hm-about__btn {
        width: auto;
        min-height: 46px;
        padding: 0 6px 0 18px;
        border-radius: 12px;
    }

    .hm-about__btn .hm-btn__label {
        gap: 10px;
        font-size: 14px;
    }

    .hm-about__btn i {
        width: 32px;
        height: 32px;
        font-size: .7rem;
        border-radius: 8px;
    }

    .hm-about__deco--circle {
        width: 64px;
    }

    .hm-about__deco--star {
        width: 32px;
    }
}

/* Reduced motion — no float/twinkle/rotate, reveal instantly */
@media (prefers-reduced-motion: reduce) {

    .hm-about__bg img,
    .hm-about__img,
    .hm-about__deco--star {
        animation: none !important;
    }

    .hm-anim {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Extra stagger delays for the 12-card categories grid */
.hm-anim--d5 {
    transition-delay: .48s;
}

.hm-anim--d6 {
    transition-delay: .58s;
}

.hm-anim--d7 {
    transition-delay: .68s;
}

.hm-anim--d8 {
    transition-delay: .78s;
}

/* ============================== TOP CATEGORIES ============================== */
.hm-cats {
    position: relative;
    padding: 90px 0 50px;
    overflow: hidden;
}

/* Same slow-rotating premium background as the hero */
.hm-cats__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.hm-cats__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .10;
    filter: blur(60px);
    animation: hm-spin 90s linear infinite;
    will-change: transform;
}

.hm-cats__container {
    position: relative;
    z-index: 1;
}

/* ------------------------------ Header ------------------------------ */
.hm-cats__head {
    position: relative;
    text-align: center;
    margin-bottom: 44px;
}

.hm-cats__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.hm-cats__label-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--hm-yellow), var(--hm-gold-dark));
    animation: 1.6s ease-in-out 0s infinite normal none running hm-fade-pulse;
}

.hm-cats__label-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #843D21;
}

.hm-cats__title {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 700;
    color: #1E1E1E;
}

.hm-cats__desc {
    max-width: 620px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.8;
    color: #6D6357;
}

.hm-cats__seeall {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #843D21;
    text-decoration: none;
    transition: color .25s var(--hm-ease);
}

.hm-cats__seeall i {
    transition: transform .25s var(--hm-ease);
}

.hm-cats__seeall:hover {
    color: var(--hm-gold);
}

.hm-cats__seeall:hover i {
    transform: translateX(4px);
}

/* ------------------------------ Cards ------------------------------ */
.hm-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 120px;
    padding: 0 24px;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(42, 29, 20, .05);
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

.hm-cat:hover {
    box-shadow: 0 18px 40px rgba(42, 29, 20, .12);
    filter: brightness(1.02);
}

.hm-cat__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hm-cat__name {
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 700;
    color: #1E1E1E;
}

.hm-cat__count {
    font-size: 13.5px;
    color: #6D6357;
}

.hm-cat__icon {
    position: relative;        /* stacking context for the blob + glyph */
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Coloured blob — fills the badge, sits behind the glyph, and is the ONLY part
   that rotates. Hovering the icon (not the whole card) spins it. */
.hm-cat__icon-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hm-cat__icon:hover .hm-cat__icon-bg {
    animation: hm-spin 3.5s linear infinite;
}

/* White glyph — centred on the blob, never moves. */
.hm-cat__icon-glyph {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Pastel card tones (icon colour comes from the badge image itself) */
.hm-cat--red {
    background: #FCF2F2;
}

.hm-cat--purple {
    background: #EFECFF;
}

.hm-cat--teal {
    background: #E1FFFD;
}

.hm-cat--pink {
    background: #FFECFE;
}

.hm-cat--blue {
    background: #DFF9FF;
}

.hm-cat--gold {
    background: #F6F9E2;
}

.hm-cat--peach {
    background: #FFEEE3;
}

.hm-cat--green {
    background: #E6FFDE;
}

/* ------------------------------ Responsive ------------------------------ */
/* Tablet — See all drops below the centred header */
@media (max-width: 991.98px) {
    .hm-cats {
        padding: 70px 0;
    }

    .hm-cats__seeall {
        position: static;
        transform: none;
        margin-top: 14px;
    }
}

@media (max-width: 575.98px) {
    .hm-cats {
        padding: 56px 0;
    }

    /* Two cards per row (col-6) — at ~46vw the name and the blob no longer fit
       side by side, so the card stacks: icon on top, name and count beneath. */
    .hm-cats__grid { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }

    .hm-cat {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        height: auto;
        min-height: 108px;
        padding: 16px 14px;
        border-radius: 16px;
    }

    .hm-cat__icon { width: 42px; height: 42px; }
    .hm-cat__icon-glyph { width: 21px; height: 21px; }

    .hm-cat__name  { margin-bottom: 3px; font-size: clamp(12.5px, 3.7vw, 15px); line-height: 1.3; }
    .hm-cat__count { font-size: clamp(10.5px, 3vw, 12.5px); }
}

/* Reduced motion — hold the rotating background still */
@media (prefers-reduced-motion: reduce) {
    .hm-cats__bg img {
        animation: none !important;
    }
}

/* ============================== POPULAR COURSES ============================== */
.hm-courses {
    position: relative;
    padding: 90px 0 50px;
    overflow: hidden;
}

/* Same slow-rotating premium background as the hero */
.hm-courses__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.hm-courses__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .10;
    filter: blur(60px);
    animation: hm-spin 90s linear infinite;
    will-change: transform;
}

.hm-courses__container {
    position: relative;
    z-index: 1;
}

/* Decorative dotted / striped shapes */
.hm-courses__deco {
    position: absolute;
    z-index: 0;
    opacity: .55;
    pointer-events: none;
}

.hm-courses__deco--tl {
    top: 60px;
    left: 20px;
    width: 150px;
}

.hm-courses__deco--br {
    bottom: 40px;
    right: 24px;
    width: 130px;
}

/* ------------------------------ Header ------------------------------ */
.hm-courses__head {
    position: relative;
    text-align: center;
    margin-bottom: 44px;
}

.hm-courses__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.hm-courses__label-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--hm-yellow), var(--hm-gold-dark));
}

.hm-courses__label-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #843D21;
}

.hm-courses__title {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 700;
    color: #1E1E1E;
}

.hm-courses__desc {
    max-width: 650px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.8;
    color: #6D6357;
}

.hm-courses__seeall {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #843D21;
    text-decoration: none;
    transition: color .25s var(--hm-ease);
}

.hm-courses__seeall i {
    transition: transform .25s var(--hm-ease);
}

.hm-courses__seeall:hover {
    color: var(--hm-gold);
}

.hm-courses__seeall:hover i {
    transform: translateX(4px);
}

/* ---- Slider variant — used only when more than 4 courses are flagged popular.
   Shows 4 at a time (responsive) with the rest behind the arrows. The vertical
   padding gives room for the card's hover lift + shadow, which Swiper's overflow
   clipping would otherwise cut off. ---- */
.hm-courses__swiper {
    margin-top: 46px;
    padding: 16px 6px 28px;
    overflow: hidden;
}

/* Equal-height cards: the slide stretches, the card fills it, so a course with
   a longer title does not leave a short card floating beside a tall one. */
.hm-courses__swiper .swiper-slide {
    height: auto;
    display: flex;
}

.hm-courses__swiper .swiper-slide>.hm-course {
    width: 100%;
}

/* The reveal animation is on the deck, not the cards: a per-card stagger would
   leave the slides Swiper has parked off-screen stuck at opacity 0. */
.hm-courses__swiper .hm-course {
    opacity: 1;
    transform: none;
    animation: none;
}

.hm-courses__nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 6px;
}

.hm-courses__navbtn {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    font-size: 1.05rem;
    cursor: pointer;
    transition: transform .25s var(--hm-ease), box-shadow .25s var(--hm-ease), background .25s var(--hm-ease);
}

.hm-courses__navbtn--prev { background: #FBEDC7; color: #843D21; }
.hm-courses__navbtn--next { background: linear-gradient(135deg, var(--hm-gold-2), var(--hm-gold-dark)); color: #fff; }

.hm-courses__navbtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(42, 29, 20, .22);
}

/* Swiper adds this to an arrow with nowhere left to go. loop is on, so it
   should not fire — but if it ever does, a dead-looking button beats one that
   silently does nothing. */
.hm-courses__navbtn.swiper-button-disabled {
    opacity: .45;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Little floating JS card near "See all" */
/* .hm-courses__float (the floating JS badge) was removed from the markup; the
   two `display: none` rules for it left in the responsive blocks below are inert
   no-ops now, harmless to keep. */

/* ---- Course card ----
   Moved to assets/css/frontend/courses.css - the card is now shared with
   the courses page (partials/course-card.blade.php).
   -------------------- */

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 991.98px) {
    .hm-courses {
        padding: 70px 0 80px;
    }

    .hm-courses__seeall {
        position: static;
        transform: none;
        margin-top: 14px;
    }

    .hm-courses__float {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .hm-courses {
        padding: 56px 0 64px;
    }

    .hm-courses__deco {
        display: none;
    }
}

/* Reduced motion — hold background/float still */
@media (prefers-reduced-motion: reduce) {

    .hm-courses__bg img,
    .hm-courses__float {
        animation: none !important;
    }
}

/* ============================== STUDENT SUCCESS STORIES ============================== */
.hm-stories {
    position: relative;
    padding: 100px 0 50px;
    overflow: hidden;
}

/* Same slow-rotating premium background as the hero */
.hm-stories__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.hm-stories__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .10;
    filter: blur(60px);
    animation: hm-spin 90s linear infinite;
    will-change: transform;
}

.hm-stories__container {
    position: relative;
    z-index: 1;
}

/* ------------------------------ Header ------------------------------ */
.hm-stories__head {
    position: relative;
    text-align: center;
    margin-bottom: 50px;
}

/* Faint decorative curved lines behind the heading */
.hm-stories__head::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 720px;
    height: 340px;
    max-width: 100%;
    transform: translate(-50%, -50%);
    background: repeating-radial-gradient(circle at 50% 62%, transparent 0 26px, rgba(34, 34, 34, .04) 26px 27px);
    -webkit-mask-image: radial-gradient(62% 62% at 50% 50%, #000, transparent 76%);
    mask-image: radial-gradient(62% 62% at 50% 50%, #000, transparent 76%);
    pointer-events: none;
    z-index: -1;
}

.hm-stories__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.hm-stories__label-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--hm-yellow), var(--hm-gold-dark));
}

.hm-stories__label-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #843D21;
}

.hm-stories__title {
    
    margin: 0 auto 14px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    color: #222222;
}

.hm-stories__desc {
    max-width: 650px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.8;
    color: #6D6357;
}

/* ------------------------------ Float wrapper ------------------------------ */
/* .hm-story-wrap {
    animation: hm-story-float 8s ease-in-out infinite;
    will-change: transform;
} */

@keyframes hm-story-float {

    0%,
    100% {
        transform: translateY(-6px);
    }

    50% {
        transform: translateY(6px);
    }
}

/* .hm-stories__grid>*:nth-child(2) .hm-story-wrap {
    animation-delay: -2s;
}

.hm-stories__grid>*:nth-child(3) .hm-story-wrap {
    animation-delay: -4s;
}

.hm-stories__grid>*:nth-child(4) .hm-story-wrap {
    animation-delay: -6s;
} */

/* ---- Slider variant — used only when there are more than 4 stories.
   Shows 4 at a time (responsive) and autoplays through the rest. The padding
   gives room for the card's -12px hover lift + shadow so Swiper's overflow
   clipping doesn't cut them off. ---- */
.hm-stories__swiper {
    margin-top: 46px;
    padding: 16px 6px 32px;
    overflow: hidden;
}
.hm-stories__swiper .swiper-slide {
    height: auto;
    display: flex;
}
.hm-stories__swiper .swiper-slide .hm-story-wrap {
    width: 100%;
}

/* ------------------------------ Card ------------------------------ */
.hm-story {
    position: relative;
    display: block;
    height: 360px;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 20px 50px rgba(15, 15, 12, .20);
    transition: transform .4s ease, box-shadow .4s ease;
    outline: none;
}

.hm-story:hover,
.hm-story:focus-visible {
    transform: translateY(-12px);
    box-shadow: 0 36px 74px rgba(15, 15, 12, .32);
}

/* Studio background — dark vignette + soft radial spotlight (tinted per card) */
.hm-story__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(55% 42% at 50% 32%, var(--glow), transparent 70%),
        radial-gradient(150% 130% at 50% 8%, var(--base-1) 0%, var(--base-2) 48%, var(--base-3) 100%);
}

.hm-story--olive {
    --glow: rgba(176, 186, 120, .34);
    --base-1: #3a3d27;
    --base-2: #1d1f13;
    --base-3: #0b0c06;
}

.hm-story--teal {
    --glow: rgba(110, 196, 186, .30);
    --base-1: #16413d;
    --base-2: #0e2523;
    --base-3: #050f0e;
}

.hm-story--green {
    --glow: rgba(126, 200, 130, .30);
    --base-1: #1f4225;
    --base-2: #122714;
    --base-3: #06110a;
}

.hm-story--violet {
    --glow: rgba(198, 142, 208, .30);
    --base-1: #3b2540;
    --base-2: #221426;
    --base-3: #0e0710;
}

/* Student portrait (transparent cut-out over the studio bg) */
.hm-story__img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
   
    transition: transform .4s ease;
}

.hm-story:hover .hm-story__img {
    transform: scale(1.08);
}

/* Readability overlay */
.hm-story__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45) 42%, transparent 70%);
    transition: background .4s ease;
}

.hm-story:hover .hm-story__overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, .12) 78%);
}

/* Bottom content */
.hm-story__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom:5px !important;
    z-index: 3;
    padding: 30px;
    color: #fff;
}

.hm-story__salary {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.hm-story__amount {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.hm-story__lpa {
    font-size: 14px;
    font-weight: 600;
    opacity: .85;
}

.hm-story__name {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
}

/* Role pill — collapsed until hover/focus so only salary + name show first;
   on hover it expands, fades in and slides up (below the name). */
.hm-story__role {
    display: inline-block;
    max-height: 0;
    margin-top: 0;
    padding: 0 22px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(22, 22, 22, .5);
    border: 1px solid rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .35s ease, transform .35s ease, max-height .35s ease, margin-top .35s ease, padding .35s ease;
}

.hm-story:hover .hm-story__role,
.hm-story:focus-within .hm-story__role {
    max-height: 48px;
    margin-top: 14px;
    padding: 10px 22px;
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 991.98px) {
    .hm-stories {
        padding: 70px 0;
    }

    .hm-story {
        height: 470px;
    }
}

@media (max-width: 575.98px) {
    .hm-stories {
        padding: 56px 0;
    }

    .hm-story {
        height: 440px;
    }
}

/* Reduced motion — hold background + float still (role still reveals on hover) */
@media (prefers-reduced-motion: reduce) {

    .hm-stories__bg img,
    .hm-story-wrap {
        animation: none !important;
    }
}

/* ============================== LATEST BLOG ============================== */
.hm-blogs {
    position: relative;
    padding: 100px 0 50px;
    overflow: hidden;
}

/* Same slow-rotating premium background as the hero */
.hm-blogs__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}
.hm-blogs__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .10;
    filter: blur(60px);
    animation: hm-spin 90s linear infinite;
    will-change: transform;
}
.hm-blogs__container {
    position: relative;
    z-index: 1;
}

/* ------------------------------ Header ------------------------------ */
.hm-blogs__head {
    position: relative;
    text-align: center;
    margin-bottom: 44px;
}
.hm-blogs__head::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 720px;
    height: 320px;
    max-width: 100%;
    transform: translate(-50%, -50%);
    background: repeating-radial-gradient(circle at 50% 62%, transparent 0 26px, rgba(34, 34, 34, .04) 26px 27px);
    -webkit-mask-image: radial-gradient(62% 62% at 50% 50%, #000, transparent 76%);
            mask-image: radial-gradient(62% 62% at 50% 50%, #000, transparent 76%);
    pointer-events: none;
    z-index: -1;
}
.hm-blogs__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.hm-blogs__label-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--hm-yellow), var(--hm-gold-dark));
}
.hm-blogs__label-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #843D21;
}
.hm-blogs__title {
    max-width: 850px;
    margin: 0 auto 14px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    color: #222222;
}
.hm-blogs__desc {
    max-width: 650px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.8;
    color: #6D6357;
}
.hm-blogs__seeall {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hm-gold-dark);
    text-decoration: none;
    transition: color .25s var(--hm-ease);
}
.hm-blogs__seeall i { transition: transform .25s var(--hm-ease); }
.hm-blogs__seeall:hover { color: #843D21; }
.hm-blogs__seeall:hover i { transform: translateX(4px); }

/* ------------------------------ Blog card ------------------------------ */
.hm-blog {
    position: relative;
    display: flex;
    align-items: center;    /* centres the 165px thumb in the 174px inner height */
    gap: 18px;
    height: 210px;
    padding: 18px;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(42, 29, 20, .05);
    transition: transform .35s ease, box-shadow .35s ease;
}
.hm-blog:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 26px 52px rgba(42, 29, 20, .14);
}

/* Each tone is a top-to-bottom wash: near-white at the top settling into the
   tint at the foot. Never a flat fill. */
.hm-blog--cream  { background: linear-gradient(180deg, #FFFCF5 0%, #F8EEDC 100%); }
.hm-blog--blue   { background: linear-gradient(180deg, #F7FBFE 0%, #E3F0FA 100%); }
.hm-blog--green  { background: linear-gradient(180deg, #F8FCF7 0%, #E4F3E1 100%); }
.hm-blog--purple { background: linear-gradient(180deg, #FAF8FE 0%, #ECE5F9 100%); }

.hm-blog__thumb {
    flex: 0 0 197px;
    width: 197px;
    height: 165px;
    border-radius: 16px;
    overflow: hidden;
}
.hm-blog__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.hm-blog:hover .hm-blog__thumb img { transform: scale(1.08); }

.hm-blog__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.hm-blog__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hm-blog__title a {
    color: #1E1E1E;
    text-decoration: none;
    transition: color .35s ease;
}
.hm-blog:hover .hm-blog__title a { color: #843D21; }
.hm-blog__desc {
    margin: 0 0 auto;
    font-size: 14px;
    line-height: 1.6;
    color: #6D6357;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hm-blog__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}
.hm-blog__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6D6357;
}
.hm-blog__date i { color: #A79C90; }
.hm-blog__more {
    padding: 8px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--hm-gold-2), var(--hm-gold-dark));
    color: #23180F;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .35s ease, color .35s ease, transform .35s ease;
}
.hm-blog:hover .hm-blog__more {
    background: #843D21;
    color: #fff;
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 991.98px) {
    .hm-blogs { padding: 70px 0; }
    .hm-blogs__seeall { position: static; transform: none; margin-top: 14px; }
}
@media (max-width: 575.98px) {
    .hm-blogs { padding: 56px 0; }

    /* Two cards per row (col-6) — each is ~46vw, so the thumb goes on top and
       everything steps down a size. */
    .hm-blogs__grid { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }

    .hm-blog {
        flex-direction: column;
        height: auto;
        /* The row's align-items: center would centre on the horizontal axis once
           the direction flips, shrinking the body to its content width. */
        align-items: stretch;
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
    }
    .hm-blog__thumb {
        flex: none;
        width: 100%;
        height: clamp(96px, 30vw, 130px);
        border-radius: 12px;
    }

    .hm-blog__title { margin-bottom: 6px; font-size: clamp(12.5px, 3.7vw, 15px); }
    .hm-blog__desc  { font-size: clamp(10.5px, 3.1vw, 12.5px); line-height: 1.55; }

    /* Date over button — they will not sit side by side in a half-width card. */
    .hm-blog__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-top: 10px;
    }
    .hm-blog__date { gap: 5px; font-size: clamp(10px, 3vw, 11.5px); }
    .hm-blog__more { padding: 7px 12px; font-size: 11px; }
}

/* Reduced motion — hold the rotating background still */
@media (prefers-reduced-motion: reduce) {
    .hm-blogs__bg img { animation: none !important; }
}

/* ============ TESTIMONIALS + FAQ ============
   Moved to assets/css/frontend/testimonials.css and faq.css — both sections
   are now shared with the About page (partials/testimonials.blade.php,
   partials/faq.blade.php).
   ============================================ */
/* ============ CONTACT ============
   Moved to assets/css/frontend/contact-form.css - the section is now shared
   with the contact page (partials/contact-form.blade.php).
   ================================= */

/* ============================== OUR JOURNEY / REELS ============================== */
/* ============ CAREER SUCCESS / REELS ============
   Moved to assets/css/frontend/career-success.css - the section is now
   shared with the testimonials page (partials/career-success.blade.php).
   ================================================ */

/* ==========================================================================
   WHY CHOOSE HIREMINDS — pinned stacked-card storytelling (GSAP ScrollTrigger)
   Visual design matches the reference; only the scroll/stack behaviour is new.
   ========================================================================== */
.hm-why {
    position: relative;
    background: #FFFDFB;
    padding-bottom: 50px;
    /* .hm-why__bg is 170vmax wide and absolutely positioned, so without this it
       pushes ~35vw past each edge and the whole page scrolls sideways — every
       other section already clips its backdrop, this one was the exception.
       `clip` rather than `hidden`: hidden would make this a scroll container and
       can break the GSAP ScrollTrigger pin inside it, whereas clip does not. */
    overflow-x: clip;
}

/* Heading block — normal flow, scrolls away before the card area pins. */
.hm-why__intro {
    position: relative;
    z-index: 1;
    padding: 96px 0 34px;             /* top clears the fixed navbar on entry */
}

/* Card wrapper — pins on its own (heading excluded) so only the card shows. */
.hm-why__pin {
    position: relative;
    overflow: hidden;                 /* clips the rotating background */
    padding: 10px 0 44px;
}

/* Reused hero rotating background (identical treatment to .hm-hero__bg). */
.hm-why__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170vmax;
    height: 170vmax;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}
.hm-why__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .16;
    filter: blur(46px);
    animation: hm-spin 90s linear infinite;
    will-change: transform;
}

.hm-why__container {
    position: relative;
    z-index: 1;
}

/* ---- Heading ---------------------------------------------------------- */
.hm-why__head {
    text-align: center;
    max-width: 660px;
    margin: 0 auto;
}
.hm-why__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--hm-gold-dark, #C6851A);
}
.hm-why__eyebrow i { font-size: 8px; color: var(--hm-gold, #E9A320); }
.hm-why__title {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--hm-ink, #23180F);
}
.hm-why__lead {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--hm-muted, #6D6357);
}

/* ---- Card stack ------------------------------------------------------- */
/* Default (no-JS / reduced motion): readable vertical list, every card shown. */
.hm-why__stack {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.hm-why__card {
    position: relative;
    height: 420px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(42, 29, 20, .18);
    backface-visibility: hidden;
}

/* Card colour sets. */
.hm-why__card--orange { background: #F9CDA1; }
.hm-why__card--blue   { background: #C6E4F6; }
.hm-why__card--yellow { background: #F6D24F; }
.hm-why__card--pink   { background: #F7C4C5; }

/* Flowing line overlay + decorative component. */
.hm-why__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .85;
    pointer-events: none;
    z-index: 1;
}
/* Decorative layer — soft floating circles, a plus-grid and a diagonal hatch,
   sitting behind the content (matches the reference card). */
.hm-why__decor {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.hm-why__circle {
    position: absolute;
    height: auto;
    opacity: .85;
    animation: hm-why-float 6s ease-in-out infinite;
}
.hm-why__circle--a { top: 16%; left: 46%; width: 56px; }
.hm-why__circle--b { bottom: 11%; right: 8%; width: 82px; animation-delay: -3s; }

.hm-why__plus {
    position: absolute;
    top: 26px;
    right: 34px;
    width: 68px;
    height: 52px;
    opacity: .6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cpath d='M8.5 4.5v8M4.5 8.5h8' stroke='%23000' stroke-opacity='.28' stroke-width='1.2'/%3E%3C/svg%3E");
}

.hm-why__slash {
    position: absolute;
    bottom: 15%;
    left: 44%;
    width: 62px;
    height: 40px;
    opacity: .5;
    background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .18) 0 1.4px, transparent 1.4px 7px);
}

@keyframes hm-why-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Inner layout — content + person, alternating sides. */
.hm-why__card-inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: stretch;
    height: 100%;
}
.hm-why__card.is-reverse .hm-why__card-inner { flex-direction: row-reverse; }

.hm-why__content {
    flex: 1 1 56%;
    align-self: center;
    padding: 44px 46px;
}
.hm-why__card-title {
    margin: 0 0 14px;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1.2;
}
.hm-why__card-desc {
    margin: 0 0 26px;
    max-width: 400px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #2f2a24;
}

/* Title colour per tone. */
.hm-why__card--orange .hm-why__card-title { color: #8A3F1E; }
.hm-why__card--blue   .hm-why__card-title { color: #0E3E6E; }
.hm-why__card--yellow .hm-why__card-title { color: #6E5013; }
.hm-why__card--pink   .hm-why__card-title { color: #C22A3E; }

/* Pills. */
.hm-why__pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}
.hm-why__pill {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 11px 24px;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
    will-change: transform, opacity;
}
.hm-why__pill-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}
.hm-why__card--orange .hm-why__pill { background: #6E3512; }
.hm-why__card--blue   .hm-why__pill { background: #0E3E6E; }
.hm-why__card--yellow .hm-why__pill { background: #6E5013; }
.hm-why__card--pink   .hm-why__pill { background: #C22A3E; }

/* Person figure. The person fills its column via object-fit:cover, so both
   portrait (person-1/3) and landscape (person-2/4) cut-outs frame correctly.
   'tall' = portrait/square (narrower column, head at top); 'wide' = landscape
   (wider column so the gesture/prop isn't cropped). */
.hm-why__figure {
    align-self: stretch;
    height: 100%;
    overflow: hidden;
}
.hm-why__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .12));
}
.hm-why__figure--tall { flex: 0 0 44%; }
.hm-why__figure--tall img { object-position: center top; }
.hm-why__figure--wide { flex: 0 0 52%; }
.hm-why__figure--wide img { object-position: center bottom; }

/* ---- Desktop: GSAP stacked mode (JS adds .is-gsap once pinned) --------- */
@media (min-width: 992px) {
    /* Only the card area pins — it clears the fixed navbar and centres the
       card, so the card floats on the page (heading has scrolled away). */
    .hm-why__pin.is-gsap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        padding: 92px 16px 32px;
    }

    /* Fixed reference card: 990 × 542, 30px radius. Centred, with the rest of
       the deck peeking out (blurred) along the bottom edge. */
    .hm-why__stack.is-gsap {
        display: block;
        width: min(990px, calc(100vw - 48px));
        height: 542px;
        margin: 0 auto;
        overflow: visible;              /* let the stacked cards peek below */
        gap: 0;
    }
    .hm-why__stack.is-gsap .hm-why__card {
        position: absolute;
        inset: 0;
        height: 100%;
        border-radius: 30px;
        box-shadow: 0 24px 52px rgba(42, 29, 20, .17);
        will-change: transform, opacity, filter;
    }

    /* Content spacing tuned to the 990 × 542 card. */
    .hm-why__stack.is-gsap .hm-why__content { padding: 52px 56px; }
    .hm-why__stack.is-gsap .hm-why__card-title { font-size: 30px; margin-bottom: 14px; }
    .hm-why__stack.is-gsap .hm-why__card-desc { margin-bottom: 26px; font-size: 15px; max-width: 384px; }
    .hm-why__stack.is-gsap .hm-why__pills { gap: 14px; }
    .hm-why__stack.is-gsap .hm-why__pill { padding: 11px 26px; font-size: 14.5px; }

    /* Person fills its column (cover); widths per orientation are set on the
       base .hm-why__figure--tall / --wide rules. */
    .hm-why__stack.is-gsap .hm-why__figure { align-self: stretch; }
}

/* Short viewports: scale the reference card down so it still fits on-screen. */
@media (min-width: 992px) and (max-height: 720px) {
    .hm-why__pin.is-gsap { padding: 74px 16px 20px; }
    .hm-why__stack.is-gsap { height: min(542px, calc(100vh - 120px)); }
}

/* ---- Mobile / tablet-portrait: native swipe slider (scroll-snap) ------- */
@media (max-width: 991.98px) {
    .hm-why__stack {
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 6px;
    }
    .hm-why__stack::-webkit-scrollbar { display: none; }
    .hm-why__card {
        flex: 0 0 88%;
        height: 470px;
        scroll-snap-align: center;
    }
    .hm-why__content { padding: 34px 30px; }
    .hm-why__figure  { flex-basis: 38%; }

    /* ---- GSAP takes over: same pinned deck as desktop ----
       The swipe slider above is the fallback (no JS / reduced motion). Once the
       timeline is driving, the row of snap-slides becomes one stage with every
       card stacked on it — card in front sharp, the rest peeking out blurred
       behind — and the section pins while they hand off, exactly as on desktop.
       Only the stage size differs, because it has to fit a phone. */
    .hm-why__pin.is-gsap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* svh = the viewport WITH the address bar showing. Plain vh is the
           bar-hidden height, so the stage grew taller than the screen the moment
           the bar reappeared and the pinned card was cut off at the bottom. */
        height: 100vh;
        height: 100svh;
        padding: 84px 12px 24px;
    }

    .hm-why__stack.is-gsap {
        display: block;
        position: relative;
        width: 100%;
        max-width: 560px;
        /* Short enough that the cards behind — which sit up to 12% of this
           height lower — still fit inside the pinned viewport rather than being
           clipped by the pin. */
        height: min(430px, calc(100vh - 200px));
        height: min(430px, calc(100svh - 200px));
        margin: 0 auto;
        gap: 0;
        padding-bottom: 0;
        overflow: visible;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .hm-why__stack.is-gsap .hm-why__card {
        position: absolute;
        inset: 0;
        flex: none;
        width: 100%;
        height: 100%;
        border-radius: 26px;
        scroll-snap-align: none;
        will-change: transform, opacity, filter;
    }
}

@media (max-width: 575.98px) {
    .hm-why__card { height: auto; }
    .hm-why__card-inner,
    .hm-why__card.is-reverse .hm-why__card-inner { flex-direction: column; }
    .hm-why__content  { padding: 22px 20px 10px; }

    /* ---- Person framing -------------------------------------------------
       The four cut-outs are composed very differently — person-1 is a full
       body portrait (686x1200), 2 and 4 are wide half-body shots (1024x559),
       3 is square. On phones each one is scaled down to fit its box WHOLE
       (object-fit: contain) and sat on the bottom edge, so no card ever cuts
       the person off. The earlier version cropped to a fixed per-card height
       and feathered the cut with a mask, which is what clipped the mentor
       mid-body on the narrow screens. */
    .hm-why__figure {
        flex: 0 0 auto;
        height: 220px;
        padding: 0 10px;
        overflow: hidden;
    }

    .hm-why__figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
    }

    /* The paragraph is dropped on phones — the title and the three pills carry
       the message, and the card stays short enough to read without scrolling. */
    .hm-why__card-desc { display: none; }

    .hm-why__card-title { margin-bottom: 14px; font-size: 19px; }
    .hm-why__pills { gap: 9px; }
    .hm-why__pill  { padding: 9px 18px; font-size: 12.5px; }

    /* Inside the pinned deck the card height is fixed, so the copy takes what
       it needs at the top and the figure gets a fixed SHARE of the card — a
       percentage of a definite height, which is what lets the image size itself
       against the box. On a short phone the share shrinks with the card and the
       person scales down with it rather than running past the bottom edge. */
    .hm-why__stack.is-gsap .hm-why__content {
        flex: 1 1 auto;
        align-self: stretch;
        padding: 20px 18px 6px;
    }
    .hm-why__stack.is-gsap .hm-why__figure {
        flex: 0 0 46%;
        height: 46%;
        margin-top: auto;
        padding: 0 10px 12px;
    }
}

/* ---- Reduced motion — hold the rotating background + card float still --- */
@media (prefers-reduced-motion: reduce) {
    .hm-why__bg img,
    .hm-why__circle { animation: none !important; }
}

/* ==========================================================================
   UPCOMING EVENTS — Cover-Flow rotational carousel
   ========================================================================== */
.hm-events {
    position: relative;
    overflow: hidden;
    padding: 100px 0 50px;
    background: #FFFDFB;
}
.hm-events__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.hm-events__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .95;
}
.hm-events__container { position: relative; z-index: 1; }

/* ---- Header ---- */
.hm-events__head { text-align: center; max-width: 780px; margin: 0 auto; }
.hm-events__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--hm-gold-dark, #C6851A);
}
.hm-events__badge-sq { width: 11px; height: 11px; border-radius: 2px; background: var(--hm-gold, #E9A320); }
.hm-events__title {
    font-family: 'Poppins', 'Geist', sans-serif;
    margin: 0 0 16px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    color: #222222;
}
.hm-events__desc {
    max-width: 700px;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.7;
    color: #6D6357;
}

/* Header entrance — fade down. */
.hm-ev-anim {
    opacity: 0;
    transform: translateY(-22px);
    transition: opacity .7s var(--hm-ease), transform .7s var(--hm-ease);
}
/* Any [data-ev-io] container reveals its own .hm-ev-anim children once the
   observer marks it .is-in. This used to name .hm-events__head alone, so an
   animated element added to a different container in this section stayed at
   opacity 0 for good — which is exactly what happened to the "See all" button. */
.hm-events__head.is-in .hm-ev-anim,
.hm-events__more.is-in .hm-ev-anim { opacity: 1; transform: none; }
.hm-events__head.is-in .hm-ev-anim:nth-child(2) { transition-delay: .1s; }
.hm-events__head.is-in .hm-ev-anim:nth-child(3) { transition-delay: .2s; }

/* ---- Carousel shell ---- */
.hm-ev-carousel {
    position: relative;
    max-width: 1120px;
    height: 520px;
    margin: 54px auto 0;
    outline: none;
}
.hm-ev-track { position: absolute; inset: 0; }

/* ---- Cards — absolutely centred; position classes translate/scale them ---- */
.hm-ev-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 392px;
    height: 457px;
    border-radius: 26px;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(.9);
    z-index: 1;
    box-shadow: 0 30px 70px rgba(20, 14, 30, .28);
    transition: transform .7s cubic-bezier(.22, .61, .36, 1),
                opacity .7s cubic-bezier(.22, .61, .36, 1);
    will-change: transform, opacity;
}
.hm-ev-card.is-left {
    transform: translate(calc(-50% - 292px), -50%) scale(.9);
    opacity: .85;
    z-index: 3;
}
.hm-ev-card.is-right {
    transform: translate(calc(-50% + 292px), -50%) scale(.9);
    opacity: .85;
    z-index: 3;
}
.hm-ev-card.is-center {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 5;
    box-shadow: 0 44px 96px rgba(20, 14, 30, .42);
}
.hm-ev-card.is-hidden {
    transform: translate(-50%, -50%) scale(.82);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}
/* Collapsed + hidden until the entrance reveal runs (staggered by JS). */
.hm-ev-card:not(.ev-revealed) {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.86);
}

/* Card colour sets (dark premium gradients + radial glow behind the person). */
.hm-ev-card--purple { background: radial-gradient(120% 88% at 74% 72%, #7d2f95 0%, rgba(125, 47, 149, 0) 56%), linear-gradient(158deg, #251636 0%, #3b2154 100%); }
.hm-ev-card--teal   { background: radial-gradient(120% 88% at 70% 68%, #1c7f8a 0%, rgba(28, 127, 138, 0) 56%), linear-gradient(158deg, #0c2529 0%, #123b42 100%); }
.hm-ev-card--green  { background: radial-gradient(120% 88% at 70% 68%, #2f7d40 0%, rgba(47, 125, 64, 0) 56%), linear-gradient(158deg, #0f2218 0%, #163420 100%); }

/* ---- Card content ---- */
.hm-ev-card__body {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    /* How much of the card the copy may use before it would reach the speaker
       photo. One variable, retuned per breakpoint, instead of a max-width on each
       text element. */
    --hm-ev-text: 54%;
}
.hm-ev-card__speaker { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.hm-ev-card--purple .hm-ev-card__speaker { color: #e29bff; }
.hm-ev-card--teal   .hm-ev-card__speaker { color: #4fd8e8; }
.hm-ev-card--green  .hm-ev-card__speaker { color: #7ee08a; }

.hm-ev-card__title {
    margin: 0;
    font-family: 'Poppins', 'Geist', sans-serif;
    font-size: clamp(30px, 2.5vw, 36px);
    font-weight: 700;
    line-height: 1.16;
    color: #fff;
    /* Allowed wider than the rows beneath it: at this height the photo is only
       the head, sitting over the faded edge of the gradient. */
    max-width: 7.4em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ---- When (date / time) ----
   Sits between the title and the footer, kept clear of the speaker photo. The
   venue is not shown on the card — it needs two or three lines and crowded the
   photo — so these two rows are short by design. */
.hm-ev-card__when {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    max-width: var(--hm-ev-text);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hm-ev-card__when-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .82);
}

.hm-ev-card__when-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;      /* optical align with the first line of text */
    color: rgba(255, 255, 255, .55);
}

/* Kept for the event details page, which does show the venue. */
.hm-ev-card__when-place {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hm-ev-card__foot { margin-top: auto; }
.hm-ev-card__meta { margin-bottom: 20px; max-width: var(--hm-ev-text); }
.hm-ev-card__type { display: block; font-size: 15px; color: rgba(255, 255, 255, .62); margin-bottom: 5px; }
.hm-ev-card__price { display: block; font-size: 27px; font-weight: 700; color: #fff; }

.hm-ev-card__btn svg { width: 14px; height: 14px; flex: 0 0 auto; }

.hm-ev-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 30px;
    background: rgba(0, 0, 0, .40);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background .25s var(--hm-ease), transform .25s var(--hm-ease);
}
.hm-ev-card__btn:hover { background: var(--hm-gold, #E9A320); color: #fff; transform: translateY(-2px); }
.hm-ev-card__btn i { font-size: 12px; }

/* ---- Speaker cut-out — bottom-right, grayscale, blended into the card ----
   The box is FIXED (a share of the card, not the image's own aspect ratio) and the
   photo is fitted inside it, bottom-anchored. That is what makes every slide match:
   the cut-outs are all different shapes — full body, half body, square, plus
   whatever an admin uploads — and with `height: auto` each rendered at its own
   size, so no two cards looked alike and the tall ones reached far enough left to
   sit under the copy. */
.hm-ev-card__person {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46%;
    height: 92%;
    object-fit: contain;
    object-position: bottom right;
    z-index: 1;
    filter: grayscale(1) contrast(1.03) brightness(.98);
    /* Only the leading sliver fades now — the copy no longer reaches this far, so
       a long fade would wash out the person for nothing. */
    -webkit-mask-image: linear-gradient(to left, #000 84%, transparent 100%);
    mask-image: linear-gradient(to left, #000 84%, transparent 100%);
    pointer-events: none;
}

/* ---- "See all" under the carousel ---- */
.hm-events__more {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.hm-events__all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 30px;
    border-radius: 999px;
    background: var(--hm-gold, #E9A320);
    color: #23180F;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(233, 163, 32, .32);
    transition: transform .25s var(--hm-ease, cubic-bezier(.22, .61, .36, 1)),
                box-shadow .25s ease;
}

.hm-events__all i { font-size: 11px; }

.hm-events__all:hover,
.hm-events__all:focus-visible {
    color: #23180F;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(233, 163, 32, .42);
}

/* ---- Navigation buttons ---- */
.hm-ev-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #1b1b1b;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
    opacity: 0;
    transition: background .25s var(--hm-ease), transform .25s var(--hm-ease), opacity .5s var(--hm-ease);
}
.hm-ev-carousel.is-in .hm-ev-nav { opacity: 1; }
.hm-ev-nav--prev { left: 4px; }
.hm-ev-nav--next { right: 4px; }
.hm-ev-nav:hover { background: var(--hm-gold, #E9A320); transform: translateY(-50%) scale(1.07); }
.hm-ev-nav:focus-visible { outline: 3px solid rgba(233, 163, 32, .5); outline-offset: 3px; }

/* ---- Tablet — smaller cards, sides tucked closer ---- */
@media (max-width: 991.98px) {
    .hm-ev-carousel { height: 470px; }
    .hm-ev-card { width: 348px; height: 406px; }
    .hm-ev-card.is-left  { transform: translate(calc(-50% - 190px), -50%) scale(.86); }
    .hm-ev-card.is-right { transform: translate(calc(-50% + 190px), -50%) scale(.86); }
    .hm-ev-card__title { font-size: 29px; }

    /* Narrower card: the copy takes a bigger share and the photo gives width back. */
    .hm-ev-card__body { padding: 28px 26px; --hm-ev-text: 56%; }
    .hm-ev-card__person { width: 44%; height: 88%; }

    /* The card loses 51px of height here, so the schedule tightens with it. */
    .hm-ev-card__when { margin-top: 14px; gap: 8px; }
}

/* ---- Mobile — one card, swipe, buttons below ---- */
@media (max-width: 575.98px) {
    .hm-ev-carousel { height: 450px; padding-bottom: 76px; }
    .hm-ev-card { width: min(340px, 88vw); height: 396px; }
    .hm-ev-card.is-left,
    .hm-ev-card.is-right {
        transform: translate(-50%, -50%) scale(.8);
        opacity: 0;
        pointer-events: none;
    }
    .hm-ev-card.is-center { transform: translate(-50%, -50%) scale(1); }

    /* 396px of card holds speaker + title + 2 schedule rows + footer, so the title
       gives up its third line — otherwise "Event Details" is pushed off the bottom. */
    .hm-ev-card__title {
        font-size: 23px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    /* Phones are the tightest split, so the photo is smallest here. */
    .hm-ev-card__body { padding: 26px 22px; --hm-ev-text: 62%; }
    .hm-ev-card__person { width: 42%; height: 78%; }

    .hm-ev-card__when { margin-top: 12px; gap: 7px; }
    .hm-ev-card__when-row { font-size: 13px; }
    .hm-ev-card__when-icon { width: 15px; height: 15px; }
    .hm-ev-card__price { font-size: 21px; }
    .hm-ev-card__meta { margin-bottom: 14px; }

    .hm-ev-nav { top: auto; bottom: 8px; transform: none; }
    .hm-ev-nav:hover { transform: none; }
    .hm-ev-nav--prev { left: 50%; margin-left: -70px; }
    .hm-ev-nav--next { left: 50%; margin-left: 10px; }
}

/* ---- Reduced motion — no travel, no autoplay flourish ---- */
@media (prefers-reduced-motion: reduce) {
    .hm-ev-card,
    .hm-ev-anim,
    .hm-ev-nav { transition: none !important; }
}

/* ==========================================================================
   Page-wide aurora — ONE continuous background for the whole page, fixed to
   the viewport. Every section shares it, so no section boundary is ever
   visible: nothing reads as "the next section's background".
   ========================================================================== */
#main-content {
    position: relative;
    background: #FFFDFB;
}

#main-content::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 30%, rgba(150, 120, 255, .30), transparent 26%),
        radial-gradient(circle at 70% 50%, rgba(255, 205, 95, .30), transparent 26%),
        radial-gradient(circle at 50% 70%, rgba(255, 150, 195, .30), transparent 26%),
        radial-gradient(circle at 30% 50%, rgba(120, 178, 255, .30), transparent 26%);
    filter: blur(64px);
    opacity: .55;
    animation: hm-spin 55s linear infinite;
}

/* Sections sit above the page aurora and stay transparent, so it shows through
   as one uninterrupted background from the hero all the way down. */
.hm-hero, .hm-about, .hm-cats, .hm-courses, .hm-stories,
.hm-blogs, .hm-tst, .hm-faq, .hm-contact, .hm-reels, .hm-why, .hm-events {
    position: relative;
    background: transparent;
}

/* The Partners section keeps itself above the glow — see partners.css. */

@media (prefers-reduced-motion: reduce) {
    #main-content::before { animation: none; }
}

/* ==========================================================================
   SMALL-SCREEN HEADING SCALE
   One size for every section heading on phones and small tablets. It lives at
   the end of the file on purpose: each section declares its own 34px
   .hm-*__title further up, and those rules carry the same specificity, so an
   earlier media query would lose to them.
   ========================================================================== */
@media (max-width: 767.98px) {
    .hm-about__title,
    .hm-cats__title,
    .hm-courses__title,
    .hm-stories__title,
    .hm-blogs__title,
    .hm-why__title,
    .hm-events__title {
        margin-bottom: 12px;
        font-size: clamp(1.15rem, 4.6vw, 1.6rem);
        line-height: 1.25;
    }
}

/* Phone view keeps each section focused on its heading and primary action.
   Card details remain visible; only the introductory paragraphs are hidden. */
@media (max-width: 575.98px) {
    .hm-hero__text,
    .hm-about__text,
    .hm-cats__desc,
    .hm-courses__desc,
    .hm-stories__desc,
    .hm-blogs__desc,
    .hm-why__lead,
    .hm-events__desc,
    .hm-tst__desc,
    .hm-faq__desc,
    .hm-contact__desc,
    .hm-reels__desc {
        display: none;
    }
}