/* Utilities */
.btn-pill {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 6.25rem;
    background-color: var(--_btn-clr);
    color: var(--_btn-txt-clr);
    padding: 1.25em 2.25rem;
    border: none;
    border-radius: 100vw;
    font-size: var(--_btn-fs, var(--fs-400));
    font-weight: var(--_btn-fw, var(--fw-700));
    text-align: center;
    text-wrap: nowrap;
    text-transform: uppercase;
    transition: all 180ms ease;

    a {
        all: unset;
    }

    &:hover {
        color: var(--_btn-clr);
        background-color: var(--_btn-txt-clr);
        outline: 1px solid var(--_btn-clr);
        transition: all 180ms ease;

        .btn-icon {
            svg {
                path {
                    fill: currentColor;
                }
            }
        }
    }

    &:has(.btn-icon),
    &:has(.bx) {
        --_btn-clr: var(--_btn-icon-clr);
        --_btn-txt-clr: var(--_btn-icon-txt-clr);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0.625rem;

        .btn-icon {
            flex-shrink: 0;
            width: var(--_btn-icon-size, 1.25rem);
            height: var(--_btn-icon-size, 1.25rem);
            aspect-ratio: 1;

            svg {
                width: 100%;
                height: 100%;
            }
        }
    }

    &.btn-primary {
        --_btn-clr: var(--primary-clr);
        --_btn-txt-clr: var(--white-clr);
    }

    &.btn-secondary {
        --_btn-clr: var(--secondary-clr);
        --_btn-txt-clr: var(--white-clr);
    }

    &.btn-secondary-900 {
        --_btn-clr: var(--secondary-clr-900);
        --_btn-txt-clr: var(--white-clr);
    }

    &.btn-tertiary {
        --_btn-clr: var(--tertiary-clr);
        --_btn-txt-clr: var(--white-clr);
    }

    &.btn-tertiary-900 {
        --_btn-clr: var(--tertiary-clr-900);
        --_btn-txt-clr: var(--white-clr);
    }

    &.btn-outline,
    &.btn-outline-tertiary {
        --_btn-clr: var(--white-clr);
        --_btn-txt-clr: var(--tertiary-clr);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-outline-tertiary-900 {
        --_btn-clr: var(--white-clr);
        --_btn-txt-clr: var(--tertiary-clr-900);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-outline-secondary-900 {
        --_btn-txt-clr: var(--secondary-clr-900);
        --_btn-clr: var(--white-clr);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-outline-primary {
        --_btn-clr: var(--white-clr);
        --_btn-txt-clr: var(--primary-clr);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-outline-secondary {
        --_btn-clr: var(--white-clr);
        --_btn-txt-clr: var(--secondary-clr);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-outline-secondary-900 {
        --_btn-clr: var(--white-clr);
        --_btn-txt-clr: var(--secondary-clr-900);
        border: 1px solid var(--_btn-txt-clr);
    }

    &.btn-fw-500 {
        --_btn-fw: var(--fw-500);
    }

    &.btn-sm {
        padding-block: 1rem;

        @media (width <=768px) {
            --_btn-fs: 0.875rem;
        }
    }

    &.btn-md {
        padding-inline: 1.625rem;
    }

    &.btn-xl {
        padding: 1rem 2.5rem;
    }

    &.btn-2xl {
        width: 13.5rem;
    }

    &.btn-3xl {
        padding: 0.875rem;
        width: 20.5rem;
    }

    &.btn-full {
        width: 100%;
    }

    &.btn-partner {
        border: none;
        border-bottom: 2px solid var(--secondary-clr);

        &:hover {
            outline: none;
            border-bottom-color: var(--white-clr);
        }
    }
}

.h1 {
    font-weight: var(--fw-900);
    font-size: var(--fs-1000);
    line-height: 1.14;
}

h2 {
    margin-bottom: 0;
    color: var(--tertiary-clr-900);
}

/* End of Utilities */

.wrapper {
    --_max-width: 1600px;

    @media (width <=768px) {
        --_gap: 0px !important;
    }
}

/* Hero */
.hero-1,
.hero-7 {
    --_gap: 3rem !important;

    @media (width <=768px) {
        --_gap: 1.125rem !important;
    }

    color: var(--white-clr);

    h1,
    p {
        text-align: center;
        margin-inline: auto;
    }

    .h1 {
        text-transform: uppercase;
        font-size: var(--fs-950);
        color: var(--text-clr-700);
        max-width: 30ch;

        @media (width <= 1024px) {
            font-size: var(--fs-800);
        }

        @media (width <= 768px) {
            font-size: var(--fs-700);
        }

        @media (width <= 600px) {
            font-size: var(--fs-650);
        }
    }

    p {
        max-width: 60ch;
        font-size: var(--fs-450);
        font-weight: var(--fw-500);
        color: var(--black-clr);
    }

    .hero-content {
        border-radius: 3rem 3rem 0 0;
        padding-block: clamp(2.25rem, 2.4vw + 1rem, 3rem);
        display: grid;
        gap: clamp(2.25rem, 2.4vw + 1rem, 3rem);
        /* grid-template-columns: repeat(12, 1fr); */
        backdrop-filter: blur(40px);
    }

    .hero-img {
        img,
        video {
            width: 100%;
            max-height: 450px;
            border-radius: 2.25rem;
            object-fit: cover;
        }
        /* video {
      max-height: 750px;
    } */
    }

    .btn-pill {
        height: 44px;
        justify-self: center;
        --_btn-fs: 0.875rem;
    }
}

.hero-2,
.hero-3 {
    --_gap: 3rem !important;

    @media (width <=768px) {
        --_gap: 1.125rem !important;
    }

    color: var(--white-clr);

    .column:last-of-type {
        padding: clamp(4.5rem, 10vw + 1.25rem, 7.5rem) clamp(1.125rem, 3vw, 4rem);
        display: flex;
        flex-direction: column;
        align-items: start;
        background-color: var(--_column-background-clr, var(--white-clr));
        border-radius: 1.5rem;
        border: 1px solid var(--white-clr-800);
    }

    .hero-icon {
        position: relative;
        padding-left: 2.125rem;
        /* padding-block: 1.125rem; */
        margin-bottom: 5rem;
        background-color: transparent;
        width: 100%;
        order: -2;
        isolation: isolate;

        &::before {
            content: "";
            z-index: -2;
            position: absolute;
            margin-block: auto;
            inset-block: 0;
            inset-inline: 0;
            width: 100%;
            height: 1px;
            background-color: #edefff;
        }

        &::after {
            content: "";
            z-index: -1;
            position: absolute;
            width: 60px;
            inset: 0;
            left: 1.125rem;
            background-color: var(--white-clr);
        }
    }

    .h1 {
        text-transform: uppercase;
        font-size: var(--fs-800);
        color: var(--_column-heading-text-clr, var(--text-clr-700));
        max-width: 16ch;
        text-wrap: balance;

        @media (width <= 1024px) {
            font-size: var(--fs-700);
        }
    }

    .pre-heading {
        order: -1;
        padding: 0.25rem 0.875rem;
        margin-bottom: 1.25rem;
        font-size: var(--fs-450);
        font-weight: var(--fw-500);
        font-size: 0.875rem;
        text-transform: uppercase;
        color: var(--_column-preheading-text-clr, var(--text-clr-700));
        border-radius: 100vw;
        background-color: var(--_column-preheading-background-clr, #f5f5fa);
        border: 1px solid var(--_column-preheading-border-clr, #e5e5ef);
    }

    p {
        padding-block: 3.5rem;
        font-size: var(--fs-425);
        font-weight: var(--fw-500);
        color: var(--black-clr);
    }

    .hero-content {
        /* padding-block: 1.125rem; */
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.125rem;

        @media (width <= 1024px) {
            grid-template-columns: 100%;
            grid-template-rows: 425px 1fr;
        }
    }

    .hero-img {
        height: 100%;

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 1.5rem;
        }
    }

    .btn-pill {
        height: 44px;
        --_btn-fs: 0.875rem;
    }
}

.hero-3 {
    @media (width > 1024px) {
        .column:first-child {
            grid-column: 2;
            grid-row: 1;
        }

        .column:last-child {
            grid-row: 1;
            grid-column: 1;
        }
    }
}

.hero-5 .hero-img img {
    object-position: bottom center;
}

.hero-6 {
    .h1 {
        font-size: var(--fs-1000);
        line-height: 1;
    }

    .column:last-child {
        padding-block: clamp(1.25rem, 1.5vw + 1.1rem, 4.5rem);
    }

    p {
        font-size: var(--fs-400);
    }

    .column-accent {
        --_column-background-clr: var(--text-clr-700);
        --_column-preheading-background-clr: #8a2061;
        --_column-preheading-text-clr: var(--white-clr);
        --_column-preheading-border-clr: var(--text-clr-700);
        --_column-heading-text-clr: var(--white-clr);
        background-color: var(--_column-background-clr);

        h1 {
            margin-bottom: clamp(1rem, 2vw + 0.25rem, 1.875rem);

            @media (width <=1024px) {
                font-size: var(--fs-950);
            }

            @media (width <=600px) {
                font-size: var(--fs-800);
            }
        }
    }
}

.hero-7 {
    .hero-content {
        padding-top: 1.125rem;
    }

    .h1 {
        max-width: 24ch;
    }

    .hero-img {
        grid-row: 1;
    }
}

.hero-8 {
    .h1 {
        font-size: var(--fs-950);
    }

    p {
        padding-block: 3rem;
    }

    &:has(.contact-box) {
        p {
            padding-block: 3rem 0;
        }

        .contact-box {
            width: 100%;
            margin-block: 1.5rem;
        }
    }
}
/* End of Hero */

/* Achievements */
.achievements-wrapper {
    padding-top: 1.125rem;

    @media (width <=768px) {
        position: relative;

        &::after {
            content: "";
            inset-inline: -1.25rem;
            top: 2rem;
            height: 30rem;
            width: 100vw;
            position: absolute;
            z-index: -1;
            background-color: rgb(25, 24, 50);
            opacity: 0.7;
            backdrop-filter: blur(10rem);
        }
    }

    .achievements {
        padding: min(7%, 5rem) min(7%, 6rem);
        display: flex;
        justify-content: space-between;
        border-radius: 2.25rem;
        background-color: var(--secondary-clr-900);
        position: relative;
        isolation: isolate;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            border-radius: inherit;
            background-image: url("/assets/images/home/gradient-3.jpg");
            background-size: cover;
            background-position: center;
            opacity: 0.75;
        }
        /* backdrop-filter: blur(40px); */

        @media (width <=768px) {
            gap: 2rem;
            flex-direction: column;
        }
    }

    .achievement {
        text-align: center;

        > * {
            display: block;
        }

        span {
            /* font-size: 3.5rem; */
            font-size: var(--fs-800);
            font-weight: var(--fw-900);
            line-height: 0.97;
            color: var(--white-clr);
            text-transform: uppercase;
        }

        small {
            margin-top: 1.5rem;
            font-size: var(--fs-450);
            font-weight: var(--fw-500);
            color: #b6b1b1;
        }
    }

    .separator {
        width: 1px;
        background: #cb408d;

        @media (width <=768px) {
            height: 1px;
            margin-inline: auto;
            width: min(100%, 92px);
        }
    }
}
/* End of Achievements */

/* Why Us */
.why-us,
.why-us-2,
.why-us-3,
.why-us-4,
.why-us-5 {
    --_gap: 3rem !important;

    @media (width <=768px) {
        --_gap: 1.125rem !important;
    }
    /* --_gap: 1.125rem !important; */

    padding-block: 1.125rem;

    .pre-heading {
        order: -1;
        padding: 0.25rem 0.875rem;
        margin-bottom: 1.25rem;
        font-size: var(--fs-450);
        font-weight: var(--fw-500);
        font-size: 0.875rem;
        text-transform: uppercase;
        color: var(--text-clr-700);
        border-radius: 100vw;
        background-color: #f5f5fa;
        border: 1px solid #e5e5ef;
    }

    .h1 {
        text-transform: uppercase;
        font-size: var(--fs-950);
        color: var(--text-clr-700);
        max-width: 30ch;

        @media (width <= 1024px) {
            font-size: var(--fs-800);
        }

        @media (width <= 768px) {
            font-size: var(--fs-700);
        }
    }

    .btn-pill {
        height: 44px;
        --_btn-fs: 0.875rem;
    }
}

.why-us-content {
    display: grid;
    /* grid-template-columns: repeat(12, 1fr); */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 1.125rem;
    /* @media (width >768px) { */
    @media (width >1024px) {
        grid-auto-flow: row;
        grid-auto-rows: minmax(326px, auto);
        /* grid-template-rows: repeat(4, minmax(326px, auto)); */
    }

    @media (width >694px) {
        .column:nth-of-type(1),
        .column:nth-of-type(2) {
            grid-column: span 2;
            grid-row: span 2;
        }
    }

    @media (694px<= width <=1024px) {
        .column:nth-of-type(2) {
            grid-row: 1 / span 2;
        }

        .why-us-img,
        .column:nth-of-type(1) {
            min-height: 425px;
            max-height: 425px;
        }
    }

    @media (width <= 694px) {
        .column:nth-of-type(2) {
            grid-row: 1;
        }
    }

    @media (width >1024px) {
        grid-template-columns: repeat(4, 1fr);
    }

    .column:first-child {
        padding: 3.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        background-color: var(--white-clr);
        border-radius: 1.5rem;
        border: 1px solid var(--white-clr-800);

        p {
            padding-block: 3rem;
            max-width: 42ch;
            line-height: 1.4;
            font-weight: var(--fw-500);
            color: var(--text-clr-700);
        }
    }

    .why-us-img {
        height: 100%;

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 1.5rem;
        }
    }
}

.why-us-2 {
    @media (694px<= width <=1024px) {
        .why-us-img-wrapper {
            grid-row: 1 / span 2;
            grid-column: 1 / span 2;
        }
    }

    @media (width > 1024px) {
        .why-us-img-wrapper {
            grid-row: span 2;

            &:not(.row-2) {
                grid-column: span 2;
            }
        }
    }

    &.bg-white-rounded.top {
        .column:first-child {
            border: none;

            @media (width<= 1200px) {
                padding: 0;
            }
        }

        .icon-card {
            background-color: #fcfcff;
        }
    }
}

.why-us-3 {
    .why-us-content {
        grid-auto-rows: minmax(410px, auto);
    }

    .column:first-child {
        grid-column: 1/-1;
        grid-row: revert;
    }

    .column:first-child {
        padding-block: clamp(3rem, 6vw + 0.5rem, 4.5rem);
        background-image: url("/assets/images/home/hero-4.jpg");
        background-position: bottom center;
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            border-radius: inherit;
            /* background: url("/assets/images/home/hero-gradient.jpg"); */
            background: url("/assets/images/home/quote.jpg");
            background-size: cover;
            background-position: center;
            opacity: 0.5;
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            border-radius: inherit;
            background: url("/assets/images/home/hero-gradient.jpg");
            background-size: cover;
            background-position: center;
            opacity: 0.5;
        }

        .h1,
        p {
            text-align: center;
            color: var(--white-clr);
        }

        .h1 {
            max-width: 35ch;
        }

        p {
            padding-block: 1.5rem;
            max-width: 65ch;
        }
    }
}

.why-us-6 {
    .why-us-content {
        grid-auto-rows: minmax(410px, auto);
    }

    .column:first-child {
        grid-column: 1/-1;
        grid-row: revert;
    }

    .column:first-child {
        padding-block: clamp(3rem, 6vw + 0.5rem, 4.5rem);
        background-image: url("/assets/images/home/hero-12.jpg");
        background-position: center;
        background-size: cover;
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      border-radius: inherit;
      background: url("/assets/images/home/quote.jpg");
      background-size: cover;
      background-position: center;
      opacity: 0.5;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      border-radius: inherit;
      background: url("/assets/images/home/hero-gradient.jpg");
      background-size: cover;
      background-position: center;
      opacity: 0.5;
    } */

        .h1 {
            text-transform: uppercase;
            color: var(--white-clr);
            max-width: 35ch;
        }

        ul {
            margin-top: 2rem;
            display: grid;
            /* grid-template-columns: ; */
            gap: 0.5rem;
        }

        li {
            list-style: none;
            padding: 0.5rem;
            display: flex;
            gap: 0.5rem;
            align-items: center;
            border-radius: 100vw;
            border: 1px solid #422858;
            background-color: #241134;
        }

        span {
            font-weight: var(--fw-500);
            font-size: var(--fs-400);
            line-height: 0.97;
            color: var(--white-clr);
        }
    }
}

.why-us-4 {
    .why-us-content {
        border-radius: 2.25rem;
        /* padding: 3.5rem; */
        padding: clamp(2.5rem, 4vw + 1.1rem, 3.5rem) clamp(1.25rem, 2.7vw + 1.15rem, 3.5rem);
        position: relative;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background: url("/assets/images/home/gradient-4.jpg");
            background-size: cover;
            background-position: center;
            scale: -1;
            opacity: 0.8;
            background-color: white;
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            border-radius: inherit;
            background: url("/assets/images/home/gradient-5.jpg");
            background-size: cover;
            background-position: center;
        }
    }

    .column:nth-of-type(1) {
        background-color: transparent;
        border: none;
        padding: 0;

        .pre-heading {
            color: #ababab;
        }

        .h1,
        p {
            color: var(--white-clr);
        }
    }
}

.why-us-5 {
    padding-top: 0;

    .why-us-content {
        grid-auto-rows: minmax(410px, auto);
    }

    .column:first-child {
        grid-column: 1/-1;
        grid-row: revert;
    }

    .column:first-child {
        padding-block: clamp(3rem, 6vw + 0.5rem, 4.5rem);
        /* background-image: url("/assets/images/home/hero-4.jpg"); */
        background-position: bottom center;
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background: url("/assets/images/home/gradient-4.jpg");
            background-size: cover;
            background-position: center;
            scale: -1;
            opacity: 0.8;
            background-color: white;
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            border-radius: inherit;
            background: url("/assets/images/home/gradient-5.jpg");
            background-size: cover;
            background-position: center;
        }

        .h1,
        p {
            text-align: center;
            color: var(--white-clr);
        }

        .h1 {
            max-width: 35ch;
        }

        p {
            padding-block: 1.5rem;
            max-width: 65ch;
        }
    }
}

.icon-card {
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    border-radius: 1.5rem;
    border: 1px solid var(--white-clr-800);
    background-color: var(--white-clr);
    font-family: var(--ff-geist);

    .icon,
    .iconify {
        color: var(--secondary-clr-900);
        width: fit-content;
        height: 2.25rem;

        svg {
            width: 100%;
            height: 100%;
        }
    }

    hr {
        border: none;
        border-bottom: 1px solid var(--white-clr-600);
        background-color: var(--white-clr-600);
    }

    h3 {
        order: 1;
        width: 14ch;
        font-size: var(--fs-500);
        font-weight: var(--fw-700);
        line-height: 1.1;
        text-wrap: balance;
        text-transform: uppercase;
        color: var(--black-clr);
    }

    p {
        order: 2;
        margin-top: auto;
        font-weight: var(--fw-500);
        font-size: var(--fs-400);
        line-height: 1.3;
        color: var(--black-clr-800);
    }
}

.why-us-about-us {
    .column:first-child.no-bg {
        background-color: transparent;
    }

    .icon-card {
        gap: 1.5rem;

        .icon {
            height: 1.5rem;
        }

        h3 {
            font-size: var(--fs-450);
        }
    }
}

.why-us-img-wrapper.wrapper {
    --_gap: 3rem !important;
    padding-bottom: 1.125rem;

    img {
        max-height: 450px;
        width: 100%;
        border-radius: 2.25rem;
        object-fit: cover;
        object-position: center 45%;
    }
}
/* End of Why Us */

/* Courses */
.courses {
    isolation: isolate;
}

.courses-content {
    --_course-top: -4.625rem;
    padding-bottom: clamp(3rem, 5vw + 1.5rem, 6rem);
    margin-top: clamp(-0.5rem, 5vw - 3.125rem, 3rem);
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    text-align: center;

    &::before {
        content: "";
        inset: 0;
        z-index: -1;
        top: var(--_course-top);
        position: absolute;
        border-radius: 3rem;
        background: linear-gradient( 180deg, var(--white-clr) 67.72%, var(--white-clr-700) 96.2% );
    }

    .courses-header {
        grid-column: 3/11;
    }

    .courses-tabs,
    .courses-list {
        grid-column: 1/-1;
    }

    .btn-pill {
        grid-column: 1/-1;
        justify-self: center;
    }

    @media (width <=1200px) {
        .courses-header {
            grid-column: 2/-2;
        }
    }

    @media (width <=600px) {
        grid-template-columns: repeat(4, 1fr);
        padding-inline: 1.25rem;

        .courses-header {
            grid-column: 1/-1;
        }
    }
}

.courses-header {
    h2 {
        text-transform: uppercase;

        @media (width <=1024px) {
            font-size: var(--fs-950);
        }

        @media (width <=600px) {
            font-size: 2rem;
        }
    }
}

.courses-preheading {
    padding-bottom: 3rem;
    text-transform: uppercase;
    max-width: 520px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    font-weight: var(--fw-700);
    font-size: var(--fs-400);
    line-height: 1.2;

    @media (width <=768px) {
        padding-bottom: 6rem;
        flex-direction: column;
        text-align: center;

        &::after {
            content: "";
            position: relative;
            bottom: -3rem;
            width: 50%;
            height: 1px;
            border: 1px solid #c3c5da;
        }
    }
}

.courses-header-text {
    font-size: var(--fs-500);
    font-weight: var(--fw-500);
    padding-block: 1.5rem 3rem;

    @media (width <=1024px) {
        font-size: var(--fs-450);
    }

    @media (width <=600px) {
        font-size: var(--fs-400);
    }
}

.courses-preheading-icon {
    min-width: fit-content;
    display: inline-block;
    padding: 1rem;
    background-color: var(--white-clr-700);
    border-radius: 50%;
}

.courses-tabs {
    margin-inline: auto;
    position: relative;
    isolation: isolate;
    padding: 0.375rem;
    margin-bottom: 1.5rem;
    width: fit-content;
    min-height: 50px;
    display: flex;
    align-items: stretch;
    background-color: var(--tertiary-clr-100);
    border-radius: 100vw;

    .slide {
        position: absolute;
        height: calc(100% - 10px);
        top: 5px;
        left: var(--_slide-left, 0.25rem);
        width: var(--_slide-width, 12rem);
        z-index: -1;
        background-color: var(--tertiary-clr-900);
        border-radius: inherit;
        transition: all 0.5s ease;
    }

    .tab {
        --_tab-padding-inline: 0.625rem;
        cursor: pointer;
        flex: 0 0 auto;
        /* Will be set by JS */
        width: auto;
        min-width: auto;
        padding: var(--_tab-padding-inline) 1rem;
        text-align: center;
        padding: var(--_tab-padding-inline) 1rem;
        text-align: center;
        font-weight: var(--fw-500);
        font-size: var(--_slide-fs, var(--fs-400));
        text-transform: uppercase;
        background-color: transparent;
        border: none;
        border-radius: inherit;
        transition: color 0.3s ease;
        position: relative;

        &.tab-active {
            color: var(--white-clr);
        }
    }

    @media (width <=768px) {
        --_slide-fs: 0.875rem;
    }

    @media (width <=480px) {
        --_slide-fs: 0.75rem;
    }
}

.courses-list {
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.125rem;

    @media (width <=1200px) {
        padding: 1.5rem;
        /* grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); */
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1rem;
    }

    @media (width <=600px) {
        padding: 1.25rem 0;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .course-item {
        padding: 1.25rem 0.875rem 3rem 0.875rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: start;
        outline: 1px solid #e8e8fd;
        border-radius: 1.25rem;
        background-color: #fafafc;
        transition: 300ms ease all;

        &:hover,
        &:focus-within {
            background-color: var(--white-clr);
            outline-width: 2px;
            box-shadow: 0px 0px 30px 0px #2c2f4a0d;

            .course-link {
                rotate: 0deg;
                opacity: 1;
                background-color: var(--white-clr-700);
                pointer-events: revert;
            }
        }

        p {
            max-width: 15ch;
            font-weight: var(--fw-500);
            font-size: 0.875rem;
            line-height: 0.97;
            text-align: center;
            color: var(--secondary-clr);
        }

        @media (width <=600px) {
            padding: 1rem 0.75rem 2.625rem 0.75rem;
        }
    }

    .course-link {
        opacity: 0;
        align-self: end;
        pointer-events: none;
        border-radius: 50%;
        padding: 0.75rem;
        rotate: -90deg;
        transition: 300ms ease all;

        &:focus-visible {
            outline: none;
        }
    }

    .course-img {
        height: 2.125rem;
        width: 2.125rem;
        aspect-ratio: 1;
        overflow: hidden;

        svg,
        img {
            width: 100%;
            height: 100%;
            aspect-ratio: 1;
            filter: drop-shadow(100px 0 0 var(--secondary-clr));
            transform: translateX(-100px);
        }
    }

    .course-title {
        max-width: 15ch;
        padding-block: 2rem 0.5rem;
        line-height: 1.05;
        font-size: var(--fs-450);
        font-weight: var(--fw-700);
        text-transform: uppercase;
        color: var(--tertiary-clr-900);
    }

    .course-availability {
        grid-column: 2/3;
        display: flex;
        gap: 0.5rem;
        align-items: center;
        justify-content: center;

        svg {
            width: 12px;
            height: 12px;
            aspect-ratio: 1;
        }
    }
}

/* End of Courses */

/* Counsellor Steps */
.counsellor-steps {
    --_gap: 1.125rem !important;
}

.counsellor-steps-content {
    padding-block: clamp(3.5rem, 6vw + 1.5rem, 7rem);

    @media (width > 768px) {
        padding-inline: 4.5rem;
    }
}

.counsellor-steps-header {
    /* padding-bottom: 56px; */
    padding-bottom: 3rem;
    display: grid;
    grid-template-columns: auto 1fr;

    @media (width > 480px) {
        .btn-pill {
            width: fit-content;
        }
    }

    @media (width > 1024px) {
        &:not(.btn-pill) {
            grid-column: 1;
        }

        .btn-pill {
            align-self: end;
            justify-self: end;
            grid-column: 2;
            grid-row: 1 / span 2;
        }
    }

    @media (width <=1024px) {
        grid-template-columns: 1fr;

        p {
            padding-block: 2rem 2.25rem;
        }
    }

    h2 {
        color: var(--tertiary-clr-900);
        font-size: var(--fs-800);
        font-weight: var(--fw-900);
        text-transform: uppercase;

        span {
            display: block;
            font-weight: var(--fw-700);
            line-height: 1.2;
        }

        @media (width <=1022px) {
            font-size: var(--fs-700);
        }
    }

    p {
        font-weight: var(--fw-500);
        font-size: var(--fs-400);
        color: var(--black-clr);
    }
}

.counsellor-steps :where(.steps-list) {
    counter-reset: steps;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    display: grid;

    @media (width <=1024px) {
        /* min-height: 468px; */
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 468px);
    }
}

.counsellor-steps :where(.step-card) {
    --_steps-padding: 2.25rem;
    counter-increment: steps;
    padding: var(--_steps-padding);
    position: relative;
    border-radius: 1.5rem;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: var(--white-clr);

    &::before {
        content: counter(steps);
        width: 96px;
        height: 96px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: var(--fw-700);
        font-size: var(--fs-800);
        border-radius: 50%;
        background-color: var(--secondary-clr-900);
    }

    .step-card-img {
        z-index: -2;
        border-radius: inherit;
        inset: 0;
        position: absolute;

        img {
            border-radius: inherit;
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

        &::before {
            /* TODO: Fix blur under text */
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0.8;
            background: url("/assets/images/home/hero-gradient.jpg");
            background-position: bottom center;
            background-size: cover;
            border-radius: inherit;
            /* scale: -1; */
        }

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            height: 130px;
            inset-inline: 0;
            backdrop-filter: blur(8px);
            border-bottom-left-radius: inherit;
            border-bottom-right-radius: inherit;
        }
    }
    /* text-align: center; */
    h3 {
        max-width: 10ch;
        font-weight: var(--fw-900);
        font-size: var(--fs-700);
        line-height: 1.1;
        text-wrap: balance;
        text-align: center;
        text-transform: uppercase;
    }

    p {
        font-weight: var(--fw-500);
        font-size: var(--fs-450);
        line-height: 1.3;
        text-align: center;

        @media (width <=1024px) {
            font-size: 1.125rem;
        }
    }

    @media (width >1024px) {
        min-height: 586px;
    }
}

/* End of Counsellor Steps */

/* Steps */
.steps {
    margin-bottom: 1.125rem;
}

.steps-content {
    display: grid;
    padding-block: clamp(3rem, 3vw + 1.5rem, 4.5rem);
    padding-inline: clamp(2.5rem, 2.8vw + 1.1rem, 3.5rem);
    backdrop-filter: blur(40px);
    border-radius: 1.5rem;
    border: 1px solid var(--border-clr);
    background-color: var(--white-clr);

    @media (width <=600px) {
        padding-inline: 1.125rem;
    }
}

.steps-header {
    color: var(--tertiary-clr-900);
    text-transform: uppercase;
    justify-self: center;
    max-width: 80ch;
    margin-inline: auto;
    text-align: center;

    h2 {
        /* text-align: center; */
        font-size: var(--fs-850);
        font-weight: var(--fw-900);
        line-height: 1.25;

        @media (width <= 768px) {
            font-size: var(--fs-700);
        }

        @media (width <= 600px) {
            font-size: var(--fs-650);
        }
    }

    p {
        font-weight: var(--fw-500);
        font-size: var(--fs-650);
    }

    .btn-pill {
        width: fit-content;
        margin-inline: auto;
        margin-block: 3rem 2.25rem;
        height: 44px;
        line-height: 0.97;
    }
}

.steps-img {
    img {
        width: 100%;
        height: 425px;
        object-fit: cover;
        border-radius: 2.25rem;
    }
}

.steps :where(.steps-list) {
    --_step-card-height: 450px;
    --_step-card-width: 232px;
    counter-reset: steps;
    padding-top: clamp(1rem, 3vw + 0.5rem, 1.5rem);
    display: grid;
    gap: 1.125rem;
    grid-auto-flow: row;
    grid-auto-rows: var(--_step-card-height);

    @media (width >600px) {
        /* Double minmax to have even no of columns */
        grid-template-columns: repeat( auto-fit, minmax(min(100%, var(--_step-card-width)), 1fr) minmax(min(100%, var(--_step-card-width)), 1fr) );
    }

    @media (width <=1200px) {
        --_step-card-width: 280px;
    }

    @media (width <=1024px) {
        --_step-card-height: 380px;
    }
}

.steps :where(.step-card) {
    --_steps-padding: 3rem 2.25rem;
    --_step-card-overlay: linear-gradient( hsla(273, 45%, 34%, 0.75), hsla(273, 45%, 34%, 0.75) );

    &:not(.no-number) {
        counter-increment: steps;
        background-image: var(--_step-card-overlay, linear-gradient(transparent, transparent)), url("/assets/images/home/step-bg.jpg");
        background-size: cover;

        &::before {
            content: counter(steps);
            font-weight: var(--fw-700);
            font-size: var(--fs-950);
            line-height: 1;
            width: 1ch;
        }
    }

    &.no-number {
        background-color: #450455;

        h3 {
            font-weight: var(--fw-900);
            font-size: var(--fs-650);
            line-height: 1.1;
        }

        p {
            margin-top: auto;
            font-weight: var(--fw-700);
            font-size: var(--fs-450);
            line-height: 1.3;
        }
    }

    padding: var(--_steps-padding);
    position: relative;
    border-radius: 1.5rem;
    isolation: isolate;
    contain: paint;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    color: var(--white-clr);
    box-shadow: 0px 10px 30px 0px #d81a2133;

    .step-card-img {
        z-index: -2;
        border-radius: inherit;
        inset: 0;
        position: absolute;

        img {
            border-radius: inherit;
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            height: 130px;
            inset-inline: 0;
            backdrop-filter: blur(8px);
            border-bottom-left-radius: inherit;
            border-bottom-right-radius: inherit;
        }
    }

    h3 {
        max-width: 13ch;
        font-family: var(--ff-inter);
        font-weight: var(--fw-700);
        font-size: var(--fs-600);
        text-transform: uppercase;
        line-height: 1.2;
        text-wrap: balance;
    }

    p {
        margin-top: auto;
        max-width: 20ch;
        font-family: var(--ff-geist);
        font-weight: var(--fw-500);
        font-size: var(--fs-400);
        line-height: 1.3;
    }
}

.steps-2 {
    margin-top: 1.125rem;

    h2 {
        font-family: Satoshi;
        font-weight: 900;
        font-style: Black;
        font-size: 6rem;
        line-height: 1.1;
        text-align: center;
        text-transform: uppercase;

        @media (width <=1024px) {
            font-size: var(--fs-1000);
        }

        @media (width <=600px) {
            font-size: var(--fs-650);
        }
    }

    .steps-header p {
        margin-top: 2rem;
        text-transform: none;
        max-width: 60ch;
        margin-inline: auto;
        font-size: var(--fs-425);
    }

    .step-card.no-number p {
        max-width: 15ch;
    }
}
/* End of Steps */

/* Quote */
.quote {
    --_gap: 1.125rem !important;
}

.quote-content {
    padding: clamp(4.5rem, 8vw + 1.5rem, 5.75rem) 1.125rem;
    text-align: center;
    background-image: url("/assets/images/home/quote.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 3rem;

    > * {
        margin-inline: auto;
    }

    h2 {
        max-width: 45ch;
        padding-bottom: 3rem;
        font-size: var(--fs-700);
        font-weight: var(--fw-700);
        line-height: 1.3;
        line-height: 1.4;
        text-transform: uppercase;
        color: var(--white-clr);

        @media (width <=768px) {
            font-size: var(--fs-550);
        }
    }

    .btn-pill {
        width: fit-content;
    }
}

/* End of Quote */

/* Counsellors */
.counsellors {
    --_gap: 1.125rem !important;
}

.counsellors-content {
    padding-block: clamp(2.25rem, 6vw, 3rem);

    .btn-pill {
        --_btn-fs: 0.875rem;
        height: 44px;
        width: fit-content;
        margin-inline: auto;
        margin-top: 2.25rem;
    }

    @media (width > 768px) {
        padding-inline: 4.5rem;
    }
}

.counsellors-header {
    padding-bottom: 56px;
    border-bottom: 1px solid #d2d5ed;
    text-align: center;

    .h1 {
        color: var(--tertiary-clr-900);
        font-size: var(--fs-1000);
        font-weight: var(--fw-900);
        text-transform: uppercase;
        max-width: 26ch;
        margin-inline: auto;

        span {
            display: block;
            font-weight: var(--fw-700);
            line-height: 1.2;
        }

        @media (width <= 1024px) {
            font-size: var(--fs-900);
        }

        @media (width <= 768px) {
            font-size: var(--fs-700);
        }
    }

    p {
        padding-top: 1.125rem;
        font-weight: var(--fw-500);
        font-size: var(--fs-400);
        color: var(--black-clr);
    }
}

.round-btns-wrapper {
    &.right-align {
        position: relative;

        .round-btns {
            position: absolute;
            z-index: 1;
            padding-inline: 2rem;
            margin-inline: auto;
            top: -28px;
            inset-inline: 0;
            background-color: var(--white-clr-700);

            @media (width <=600px) {
                margin-inline: auto;
                padding-right: 2rem;
            }
        }
    }
}

.round-btns {
    width: fit-content;
    display: flex;
    gap: 1.5rem;

    .prev-btn,
    .next-btn {
        cursor: pointer;
        width: 3rem;
        height: 3rem;
        aspect-ratio: 1;
        border-radius: 50%;
        border: none;
        color: var(--tertiary-clr-900);
        background-color: var(--white-clr);

        &:hover {
            background-color: var(--tertiary-clr-900);
            border-color: var(--tertiary-clr-900);
            color: var(--white-clr);
        }

        &:disabled {
            color: var(--white-clr);
            background-color: var(--border-clr);
            outline: 1px solid var(--white-clr);
        }

        svg {
            margin: auto;
        }
    }
}

.counsellors-slider {
    padding-top: 3rem;
    overflow-x: clip;
}

.card-list {
    --_card-list-gap: 1.125rem;
    --_card-size: 344px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--_card-size);
    touch-action: pan-y pinch-zoom;
    /* Card list gap */
    margin-right: calc(var(--_card-list-gap) * -1);

    > * {
        margin-right: var(--_card-list-gap);
    }

    @media (width <=400px) {
        --_card-size: max(100%, 344px);
    }

    .card {
        display: flex;
        flex-direction: column;
        background-color: var(--white-clr);
        padding: 1.25rem;
        border-radius: 2rem;
        border: 1px solid var(--white-clr);
    }

    .card-profile img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        margin-inline: auto;
    }

    .card-post,
    .card-name {
        text-align: center;
    }

    .card-name {
        display: block;
        font-weight: var(--fw-700);
        font-size: var(--fs-450);
        color: var(--tertiary-clr-900);
    }

    .card-post {
        display: block;
        font-weight: var(--fw-500);
        font-size: var(--fs-400);
        padding-bottom: 1.25rem;
    }

    .icon-text {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;

        &.border {
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #e8e8f7;
        }
    }

    .icon-key {
        display: flex;
        gap: 0.375rem;
        align-items: center;
        justify-content: center;

        .icon {
            flex-shrink: 0;
        }
    }

    .title {
        color: #a9a9b8;
        font-weight: var(--fw-500);
        font-size: var(--fs-300);
    }

    .icon-value {
        --_line-clamp: 1;
        color: #090820;
        font-weight: var(--fw-500);
        font-size: var(--fs-300);
    }

    .btns {
        /* justify-content: center; */
        /* height: 44px; */
        /* margin-top: auto;
    display: flex;
    align-items: end;
    gap: 0.5rem;
    font-size: var(--fs-300); */
    }

    .btn-pill {
        margin-inline: 0;
        flex: 1;
        --_btn-fs: 0.75rem;
    }

    .btn-round {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.875rem;
        gap: 10px;
        border-radius: 50%;
        background: #ffffff;
        color: var(--tertiary-clr-900);
        border: 1px solid #eaeaf0;
        aspect-ratio: 1;

        svg {
            width: 1.5rem;
            height: 1.5rem;
        }

        &:hover {
            background-color: var(--tertiary-clr-900);
            color: var(--white-clr);
            border-color: var(--tertiary-clr);
        }
    }
}

.card-body {
    margin-top: 1.25rem;
    padding: 1.125rem 1rem;
    font-weight: var(--fw-500);
    font-style: Medium;
    font-size: var(--fs-300);
    color: #090820;
    background-color: #ededf6;
    border-radius: 0.5rem;
}

.card-tags {
    max-height: 74px;
    overflow-y: clip;
    margin-block: 1.125rem;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0.375rem;
}

.card-tag {
    padding: 0.375rem 0.5rem;
    font-weight: var(--fw-500);
    background-color: #f8f8f9;
    border: 1px solid #c8cad9;
    font-size: var(--fs-200);
    border-radius: 100vw;
}

/* End of Counsellors */

/* Events */
.events {
    --_gap: 1.125rem !important;
}

.events-content {
    padding-block: clamp(3.5rem, 6vw + 1.5rem, 7rem);

    .events-btns {
        margin-left: auto;
        top: -28px;
        inset-inline: 0;
        width: fit-content;
        display: flex;
        gap: 1rem 0.25rem;
        background-color: var(--white-clr-700);

        @media (width <=480px) {
            width: 100%;
            flex-direction: column;
        }
    }

    @media (width <=768px) {
        display: flex;
        flex-direction: column;

        .round-btns-wrapper {
            padding-top: 2.25rem;
            position: relative;

            &::before {
                height: 1px;
                background-color: #d2d5ed;
            }
        }

        .round-btns {
            position: static;
        }

        .events-btns-wrapper {
            order: 1;
        }

        .events-btns {
            padding-top: 2.25rem;
            margin-right: auto;
        }
    }

    @media (width > 768px) {
        padding-inline: 4.5rem;

        > .event-focus-img {
            display: none;
        }

        .round-btns-wrapper {
            display: none;
        }

        .events-btns-wrapper {
            position: relative;
        }

        .events-btns {
            position: absolute;
            padding-left: 2rem;
        }
    }
}

.events-header {
    h2 {
        text-transform: uppercase;
        font-size: var(--fs-950);

        @media (width <=1024px) {
            font-size: var(--fs-850);
        }
    }

    p {
        padding-block: 2.25rem;
        font-weight: var(--fw-500);
        color: var(--black-clr);
        border-bottom: 1px solid #d2d5ed;
    }
}

.events-body {
    --_card-list-gap: 1.125rem;
    --_card-size: 340px;
    --_card-title-width: 260px;
    padding-top: 4rem;

    @media (width <=400px) {
        --_card-size: max(100%, 308px);
    }

    @media (width > 1200px) {
        --_card-size: 308px;
        --_card-title-width: 230px;
        display: grid;
        grid-template-columns: 1fr 600px;
        gap: var(--_card-list-gap);

        .event-focus-img {
            display: revert;
            max-height: 628px;
        }
    }
}

.events-slider {
    overflow-x: clip;
}

.event-card-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--_card-size);
    touch-action: pan-y pinch-zoom;
    /* For gapping */
    margin-right: calc(var(--_card-list-gap) * -1);

    > * {
        margin-right: var(--_card-list-gap);
    }

    @media (width <=768px) {
        > .event-focus-img {
            display: none;
        }
    }

    .icon-text {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &.border {
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #e8e8f7;
        }
    }

    .icon-key {
        display: flex;
        gap: 0.375rem;
        align-items: center;
        justify-content: center;
    }

    .title {
        color: #a9a9b8;
        font-weight: var(--fw-500);
        font-size: var(--fs-300);
    }

    .icon-value {
        color: #090820;
        font-weight: var(--fw-500);
        font-size: var(--fs-300);
    }
}

.event-focus-img {
    display: none;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 2.25rem;
    }
}

.event-card {
    position: relative;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    border-radius: 2.25rem;
    border: 1px solid #ddddeb;
    background-color: var(--white-clr);

    .btns {
        --_btn-icon-size: 1.875rem;
        margin-top: auto;
        display: flex;
        justify-content: stretch;
        gap: 0.75rem;

        > * {
            flex-grow: 1;
        }
    }

    .expired {
        position: absolute;
        top: 1.625rem;
        left: 1.625rem;
        display: flex;
        gap: 0.25rem;
        padding: 0.5rem;
        color: var(--white-clr);
        background-color: #f42b3f;
        border-radius: 100vw;
        font-weight: 500;
        font-size: 0.875rem;
    }

    .icon-text,
    .card-body,
    .card-tags {
        margin-inline: 0.5rem;
    }

    .card-body {
        max-height: 284px;
    }
}

.event-card-img {
    padding-bottom: 1rem;

    img {
        width: 100%;
        height: 275px;
        border-radius: 1.5rem;
        object-fit: cover;
        outline: 1px solid var(--white-clr);
    }
}

.event-card-title {
    padding: 1rem;
    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    top: 176px;
    width: var(--_card-title-width);
    font-weight: var(--fw-500);
    font-size: 0.875rem;
    line-height: 100%;
    color: #090820;
    backdrop-filter: blur(30px);
    background-color: #ededf6cc;
    border-radius: 0.75rem;
}

.event-card-name {
    --_line-clamp: 1;
}

.event-card-location {
    margin-top: 1rem;
    padding-top: 1rem;
    display: flex;
    gap: 0.375rem;
    align-items: center;
    border-top: 1px solid #ccb2ba;

    .icon {
        flex-shrink: 0;
    }
}

/* End of Events */

/* Testimonials */

.testimonials-wrapper {
    --_gap: 1.125rem !important;
    --_card-size: 524px;
    --_card-list-gap: 1.5rem;
    --_navigations-spacing: 1.125rem;
    --_navigation-size: 4rem;
}

.testimonials-content {
    padding-block: clamp(3.5rem, 6vw + 1.5rem, 7rem);

    .round-btns {
        padding-block: 2.5rem;
        margin-inline: auto;
    }

    @media (width > 768px) {
        .round-btns {
            position: relative;
            padding-block: 2rem;
            width: auto;
        }

        .prev-btn,
        .next-btn {
            z-index: 1;
            position: absolute;
            bottom: -9rem;
            inset-inline: 0;
            background-color: var(--tertiary-clr-900);
            color: var(--white-clr);
            outline: 1px solid var(--white-clr);
            transition: all 300ms ease;

            &:hover {
                scale: 1.1;
            }
        }

        .prev-btn {
            margin-inline: var(--_card-list-gap) auto;
        }

        .next-btn {
            margin-inline: auto var(--_card-list-gap);
        }
    }
}

.testimonials-header {
    display: grid;

    h2 {
        padding-inline: 1.125rem;
        text-align: center;
        font-size: var(--fs-850);
        font-weight: var(--fw-900);
        text-transform: uppercase;

        span {
            display: block;
            font-weight: var(--fw-700);
            line-height: 1.2;
        }

        @media (width <=1024px) {
            font-size: var(--fs-700);
        }
    }

    p {
        font-weight: var(--fs-500);
        font-size: var(--fs-500);
        color: var(--black-clr);
    }
}

.testimonial-slider {
    /* --slide-height: 19rem;
  --slide-spacing: 1rem;
  --slide-size: 100%; */

    overflow-x: clip;
    margin-inline: var(--_card-list-gap);

    @media (width <=1024px) {
        --_card-list-gap: 1rem;
    }

    @media (width <=768px) {
        --_card-list-gap: 0.75rem;
    }

    @media (width <=600px) {
        --_card-size: 100%;
        /* --_card-list-gap: 0.625rem; */
    }
}

.embla-thumbs {
    width: min(574px, 100%);
    margin-inline: auto;
    overflow-x: clip;
    overflow-clip-margin: 2rem;
}

.testimonial-navigations {
    margin-inline: auto;
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid #cccee5;
    display: flex;
    align-items: center;
    justify-content: center;
    /* For agpping */
    margin-left: calc(var(--_navigations-spacing) * -1);

    > * {
        margin-left: var(--_navigations-spacing);
    }
}

.navigation {
    /* margin-left: 1.125rem; */
    margin-bottom: 5.75rem;

    .navigation-btn {
        border-radius: 50%;
        aspect-ratio: 1;
        border: none;
        /* min-width: fit-content; */
        width: var(--_navigation-size);
        height: var(--_navigation-size);

        img {
            aspect-ratio: 1;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            border-radius: inherit;
        }
    }

    &.active {
        position: relative;

        .navigation-btn {
            outline: 4px solid var(--secondary-clr-900);
        }

        &::after {
            content: attr(data-name);
            position: absolute;
            bottom: -3rem;
            left: -2rem;
            display: block;
            margin-inline: auto;
            width: fit-content;
            /* z-index: 2; */
            /* word-wrap: no-wrap; */
            white-space: nowrap;
            /* margin-block: 0.75rem 3rem; */
            padding: 0.625rem 1rem;
            font-weight: var(--fw-700);
            color: var(--tertiary-clr-900);
            border-radius: 100vw;
            background-color: var(--white-clr);
        }
    }

    @media (width <=1024px) {
        --_navigation-size: 3.5rem;
    }
}

.testimonial-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--_card-size);
    touch-action: pan-y pinch-zoom;
    /* Card list gap */
    margin-right: calc(var(--_card-list-gap) * -1);

    > * {
        margin-right: var(--_card-list-gap);
        /* @media (width <=600px) {
      margin-right: var(--_card-spacing);
    } */
    }
}

.testimonial {
    border-radius: 36px;
    border-width: 1px;
    padding: 36px;
    background-color: var(--white-clr);
    border: 1px solid #ebebf2;
    transition: 500ms all ease;

    &:not(.active) {
        opacity: 50%;
        scale: 0.9;
    }

    p {
        font-weight: var(--fw-700);
        font-size: 1.125rem;
        line-height: 1.3;
        color: var(--tertiary-clr-900);

        @media (width <=768px) {
            font-size: var(--fs-500);
        }
    }

    &.testimonial-popover {
        z-index: 100;
        opacity: 1;
        inset: 0;
        margin: auto;
        position: fixed;
        max-width: 500px;
        box-shadow: 0px 4px 40px 0px hsl(from var(--text-clr-700) h s l / 0.25);

        &::backdrop {
            opacity: 0;
            background: hsl(from var(--text-clr-700) h s l / 0.7);
            transition-property: opacity overlay;
            transition-duration: 1000ms;
            transition-behavior: allow-discrete;
        }

        &:popover-open::backdrop {
            opacity: 1;
        }
    }

    .avatar-wrapper {
        margin-top: 1.5rem;
    }
}

.avatar-wrapper {
    padding-top: 1.5rem;
    display: grid;
    grid-template-columns: 64px auto;
    gap: 0.5rem 0.75rem;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.5em;
    border-top: 1px solid #e8e8f7;

    .avatar {
        grid-row: span 2;
    }

    .avatar-name {
        font-weight: var(--fw-700);
        font-size: var(--fs-450);
        color: var(--tertiary-clr-900);
        align-self: end;
    }

    .avatar-country {
        align-self: start;
        font-weight: var(--fw-500);
        font-size: var(--fs-400);
        color: #787b93;
    }
}

.avatar {
    outline-offset: 0.375rem;
    border-radius: 50%;

    img {
        width: 60px;
        height: 60px;
        aspect-ratio: 1;
        border: 4px solid #ebebf2;
        border-radius: inherit;
        aspect-ratio: 1;
        object-fit: cover;
    }
}

/* End of testimonials */

/* Trusted Institutions */
.trusted-wrapper {
    --_trusted-vertical-spacing: clamp(3rem, 6vw + 0.5rem, 4.5rem) clamp(3rem, 7vw + 1rem, 6rem);
    background-color: var(--white-clr);
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
}

.trusted-institutions-slider {
    --_institution-background-hover: var(--white-clr-900);
}
/* End of Trusted Institutions */

/* Call To Action */
.call-to-action {
    /* --_gap: 1.125rem !important; */

    --_gap: 3.5rem !important;

    @media (width <=768px) {
        --_gap: 1.25rem !important;
    }
    /* background-color: var(--white-clr); */
    position: relative;
    z-index: 1;
    border-image-source: conic-gradient(var(--white-clr) 0% 0%);
    border-image-slice: fill 0;
}

.call-to-action-content {
    position: relative;
    display: grid;
    border-radius: 2.5rem;

    @media (width >600px) {
        /* padding-block: 6rem; */
        padding-block: clamp(3rem, 9vw, 6rem);
        padding-inline: 2rem;

        &::after {
            content: "";
            position: absolute;
            z-index: -2;
            inset: 0;
            background-image: url("/assets/images/home/call-to-action.jpg");
            background-size: cover;
            background-position: right;
            transform: scaleX(-1);
            border-radius: inherit;
        }

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background-image: url("/assets/images/home/hero-gradient.jpg");
            background-size: cover;
            opacity: 0.25;
            border-radius: inherit;
        }
    }
}

.call-to-action-img {
    margin-bottom: 3rem;
    isolation: isolate;
    position: relative;
    border-radius: 2.25rem;

    img {
        height: 400px;
        transform: scaleX(-1);
        border-radius: inherit;
        object-fit: cover;
    }

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background-image: url("/assets/images/home/hero-gradient.jpg");
        background-size: cover;
        opacity: 0.25;
        border-radius: inherit;
    }

    @media (width > 600px) {
        display: none;
    }
}

.call-to-action-card {
    border-radius: 1.5rem;
    width: fit-content;
    max-width: min(642px, 100%);

    h2 {
        font-weight: var(--fw-900);
        font-size: var(--fs-800);
        text-transform: uppercase;

        @media (width <=1024px) {
            font-size: var(--fs-700);
        }
    }

    p {
        padding-block: 2.25rem 2rem;
        color: var(--black-clr);
        font-size: var(--fs-450);
        font-weight: var(--fw-500);
    }

    .btns {
        display: flex;
        gap: 0.5rem;

        @media (width <=480px) {
            flex-direction: column;
        }
    }

    @media (width > 600px) {
        padding: 3rem 2.25rem;
        backdrop-filter: blur(60px);

        h2,
        p {
            color: var(--white-clr);
        }
    }
}

/* End of Call To Action */
/* Signup */
.signup {
    background-color: #f8f8f8;
    padding-block: 1rem 3rem;
    position: relative;
    overflow-x: clip;
    isolation: isolate;

    .star-1 {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 400px;
        color: #ffdb44;
    }

    .star-2 {
        position: absolute;
        z-index: -1;
        top: 44%;
        left: 46%;
        color: #ffd8a9;
    }

    .star-3 {
        position: absolute;
        z-index: -1;
        top: 80%;
        left: 50%;
        color: #ffd8a9;
    }

    .star-4 {
        position: absolute;
        z-index: -1;
        bottom: 5%;
        left: 40%;
        color: #ffdb44;
    }
}

.signup-content {
    display: grid;
    align-items: center;

    @media (width<=768px) {
        .column:last-of-type {
            grid-row: 1;
        }

        gap: 3rem;
    }

    @media (width<=500px) {
        .column:last-of-type {
            display: none;
        }
    }

    @media (width>768px) {
        gap: 1.5rem;
        grid-template-columns: 1fr 1fr;
    }

    @media (width<=1024px) {
        .btn {
            max-width: 10rem;
        }
    }
}

.signup-header {
    color: var(--black-clr);

    h2 {
        padding-block: 1.5rem;
    }
}

/* End of Signup */

/* Counselor */
.counselor {
    padding-block: clamp(3rem, 9vw, 6rem);
    background-color: #f9f2f74d;
    position: relative;
    isolation: isolate;

    &::after {
        content: "";
        position: absolute;
        top: 216px;
        right: 0;
        height: 517px;
        width: 399px;
        background-image: url("/assets/images/dotted-pattern.svg");
        /* background-repeat: no-repeat; */
        background-position: center;
        background-size: cover;
        background-size: 32.4%;
        z-index: -1;
    }

    @media (width <=1024px) {
        .btn {
            margin-top: 1.15rem;
            margin-inline: auto;
        }

        .counselor-figures {
            flex-wrap: wrap;
        }
    }

    @media (600px < width <=1024px) {
        .counselor-figures {
            justify-content: center;
        }
    }
}

.counselor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    line-height: 24px;

    div {
        width: 45ch;
    }

    p {
        color: hsl(0, 0%, 0%);
    }
}

.counselor-figures {
    padding: 1rem 1.5rem;
    margin-block: 1.875rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background-color: #f8f8f8;
}

.counselor-figure {
    flex: 0 0 auto;
    max-width: 26ch;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.625rem;
}

.counselor-figure-icon {
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1;
    padding: 0.5rem;
    border-radius: 50%;
    background-color: var(--secondary-clr);

    svg {
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
    }
}

.counselor-list {
    display: grid;
    gap: 1.15rem;

    @media (width>600px) {
        grid-template-columns: 1fr 1fr;
        place-items: center;
        gap: clamp(1.15rem, 5vw, 2.625rem);
    }

    @media (width>1200px) {
        grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
        gap: 1.15rem;
    }
}

.counselor-card {
    /* width: 262px; */
    /* width: min(100%, 400px); */
    padding: 1rem;
    position: relative;
    isolation: isolate;
    /* overflow: clip; */
    contain: paint;
    background-color: white;
    /* background-color: #f9f2f74d; */
    /* border-image: fill 1 linear-gradient(90deg, white, white); */
    border-radius: 0.75rem;
    border: 1px solid #d5d5d5;
    transition: all 180ms ease;

    &:hover {
        border: 1px solid var(--secondary-clr);
    }
}

.counselor-card-bg-img {
    position: absolute;
    z-index: -1;
    top: 7px;
    right: -53px;
    width: 175px;
    height: 331px;

    svg {
        width: 100%;
        height: 100%;
    }
}

.counselor-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.counselor-img {
    width: 4.5rem;
    height: 4.5rem;
    aspect-ratio: 1;
}

.counselor-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.counselor-name {
    color: hsl(0, 0%, 8%);
}

.counselor-country {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
}

.counselor-country-name {
    font-size: var(--fs-300);
    line-height: 16.8px;
    color: var(--tertiary-clr);
}

.counselor-languages {
    font-size: var(--fs-200);
    line-height: 14.4px;
    color: var(--text-clr);
}

.counselor-details {
    display: grid;
    gap: 0.25rem;
    padding-block: 1rem 0.5rem;
    border-top: 1px solid #e0e0e0;
}

.counselor-university {
    font-size: var(--fs-300);
    font-weight: var(--fw-500);
    color: var(--black-clr);
    line-height: 16.8px;
}

.counselor-expertise {
    font-size: var(--fs-200);
    line-height: 14.4px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tag {
    padding: 0.25rem;
    font-size: var(--fs-200);
    line-height: 14.4px;
    border: 1px solid #d5d5d5;
    border-radius: 0.25rem;
    color: var(--secondary-clr);
    background-color: var(--white-clr);
    transition: all 180ms ease;

    &:hover {
        background-color: var(--secondary-clr-5);
    }
}

.counselor-btn {
    margin-top: 2rem;
}

/* End of Counselor */

/* Works */
.works {
    padding-block-start: clamp(2.25rem, 7vw, 4.375rem);
    padding-block-end: clamp(14rem, 7vw, 17.125rem);
    background-color: #f7f5f7;
    position: relative;
    isolation: isolate;
    overflow-x: clip;

    &::after {
        content: "";
        position: absolute;
        bottom: -5.5rem;
        right: -8.625rem;
        width: 640px;
        height: 760px;
        background-image: url("/assets/images/works-ellipse.png");
        background-repeat: no-repeat;
        z-index: -1;
    }
}

.works-cards {
    counter-reset: works-card-counter;
    padding-top: 5.625rem;
    display: grid;

    @media (width <=1024px) {
        gap: clamp(3rem, 5vw, 4rem);
        grid-auto-flow: row;
        grid-auto-columns: fit-content(450px);
        justify-content: center;
    }

    @media (width > 1024px) {
        grid-auto-flow: column;
        grid-auto-columns: 280px;
        gap: 2rem;
        justify-content: space-between;
        background-image: url("/assets/images/start/path.svg");
        background-position-y: 85%;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

.works-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;

    div {
        width: 45ch;
    }

    p {
        color: hsl(0, 0%, 0%);
    }
}

.works-card {
    position: relative;
    padding: 3.5rem 1.25rem 1.25rem;
    background: var(--white-clr);
    border: 1px solid #d5d5d5;
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.07);
    text-align: center;
    color: hsl(0, 0%, 0%);
}

.works-card-header {
    counter-increment: works-card-counter;

    &::before {
        content: counter(works-card-counter) ".";
        width: 3.5rem;
        height: 3.5rem;
        padding: 1.1rem 0.9rem;
        position: absolute;
        top: -1.6875rem;
        inset-inline: 0;
        margin: auto;
        font-size: var(--fs-800);
        font-weight: var(--fw-800);
        color: var(--secondary-clr);
        background: #eeeeef;
        border-radius: 50%;
        outline: 1px solid var(--secondary-clr);
        box-shadow: 0 0 0 4px var(--white-clr);
    }
}

.works-card-img {
    img {
        margin-inline: auto;
    }
}

.works-card-title {
    padding-block: 0.75rem;
    font-size: var(--fs-600);
    font-weight: var(--fw-600);
    line-height: 21.6px;
}

/* End of Works */

/* Promises */
.arrow-list {
    font-family: var(--ff-geist);
    font-size: var(--fs-450);
    font-weight: var(--fw-600);
    text-transform: uppercase;
    width: 100%;
}

.arrow-list-item {
    display: flex;
    align-items: center;
    gap: 1.25em;
    padding-block: 1.5rem;

    &:last-of-type {
        padding-bottom: 0;
    }

    &:not(:last-of-type) {
        border-bottom: 1px solid #891b58;
    }

    .iconify {
        color: var(--secondary-clr-900);
        font-size: 1.625rem;

        path {
            stroke-width: 3;
        }
    }
}
/* End of Promises */

/* Timeline */
.timeline-content {
    background-color: var(--white-clr);
    border: 1px solid #dadced;
    border-radius: 2.25rem;
    padding: 3.5rem clamp(1.5rem, 6vw + 0.5rem, 4.5rem);

    h2 {
        font-weight: var(--fw-900);
        font-size: var(--fs-1000);
        line-height: 1.1;
        text-transform: uppercase;
        color: var(--secondary-clr-900);
        max-width: 15ch;
        margin-bottom: clamp(2rem, 6vw + 0.5rem, 4.5rem);

        @media (width <=1024px) {
            font-size: var(--fs-950);
        }

        @media (width <=600px) {
            font-size: var(--fs-800);
        }
    }
}

.timeline {
    @media (width <= 1024px) {
        --_time-line-indent: clamp(1rem, 3vw + 1.5rem, 4rem);
    }

    @media (width > 1024px) {
        padding-inline: 8.875rem;
    }

    li {
        &:nth-child(odd) {
            padding-block: 1.25rem;
            font-weight: var(--fw-900);
            font-size: var(--fs-950);
            line-height: 1;
            text-transform: uppercase;
            color: #dadced;
        }

        &:nth-child(even) {
            border-left: 2px solid #f2f2f8;
            padding: var(--fs-800) var(--fs-850);
            margin-left: var(--_time-line-indent, clamp(4rem, 4.5vw + 1.5rem, 6rem));
        }
    }

    dl {
        display: grid;
    }

    dt {
        font-weight: var(--fw-700);
        font-size: var(--fs-400);
        line-height: 1.3;
        color: #9496b1;
    }

    dd {
        font-weight: var(--fw-700);
        font-size: var(--fs-450);
        line-height: 1.3;
        color: var(--text-clr-700);

        &:not(:last-child) {
            margin-bottom: var(--fs-450);
        }
    }
}
/* End of Timeline */

/* Logos Wrapper */
.logos-wrapper {
    background-color: var(--white-clr);
}

.logos-content {
    padding: var(--fs-1000) 1.125rem clamp(2rem, 3.2vw + 1.2rem, 4rem);

    h2 {
        font-weight: var(--fw-900);
        font-size: var(--fs-1000);
        line-height: 1;
        text-transform: uppercase;
        text-align: center;
        padding-bottom: var(--fs-650);
        border-bottom: 1px solid #cccee5;
        width: fit-content;
        margin-inline: auto;
        margin-bottom: var(--fs-650);

        @media (width <=1024px) {
            font-size: var(--fs-950);
        }

        @media (width <=600px) {
            font-size: var(--fs-800);
        }
    }
}

.logos-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.125rem;
    justify-content: center;
}

.logos-list-item {
    flex: 0 0 clamp(160px, 20vw, 250px);
    padding: 1.125rem;

    img {
        object-fit: contain;
    }
}
/* End of Logos Wrapper */

/* Facts */
.facts {
    padding-top: clamp(3rem, 9vw, 6rem);

    @media (width <=1024px) {
        .facts-items-wrapper {
            &::before {
                content: "";
                max-width: 650px;
                aspect-ratio: 764/700;
                background-image: url("/assets/images/australia-map.svg");
                /* background-size: 84%; */
                background-size: contain;
                background-repeat: no-repeat;
                position: absolute;
                inset: 0;
                /* background-position: 129px; */
            }
        }
    }

    @media (width > 1024px) {
        .facts-items-wrapper {
            position: relative;
            padding: 8rem;

            &::before {
                content: "";
                width: 764px;
                height: 700px;
                background-image: url("/assets/images/australia-map.svg");
                background-size: 84%;
                background-repeat: no-repeat;
                position: absolute;
                right: 8rem;
                bottom: 0;
                margin: auto;
                background-position: center;
                z-index: -2;
            }
        }
    }
}

.facts-content {
    position: relative;
}

.facts-avatar {
    @media (width <=1024px) {
        display: none;
    }

    @media (width > 1024px) {
        position: absolute;
        height: 92px;
        width: 92px;
        overflow: hidden;
        background-color: #f6d67f;
        border-radius: 50%;
        border-right: 4px solid #a90466;
        z-index: -1;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &.avatar-1 {
            right: 39.375rem;
            top: 186px;
        }

        &.avatar-2 {
            right: 25.375rem;
            bottom: 25.75rem;
        }

        &.avatar-3 {
            right: 344px;
            bottom: 224px;
        }

        &.avatar-4 {
            right: 12rem;
            bottom: 340px;
        }

        &.avatar-5 {
            right: 256px;
            bottom: 120px;
        }
    }
}

.facts-header {
    max-width: 45ch;
}

.facts-items-wrapper {
    min-height: 480px;
    position: relative;

    @media (width <=1024px) {
        &::before {
            inset: 0;
            margin: auto;
        }

        .facts {
            width: fit-content;
            margin-inline: auto;
        }
    }
}

.facts-items {
    margin-top: clamp(3rem, 9.25vw, 4.25rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 266px));
    grid-template-rows: repeat(5, 1fr);
    gap: 1.5rem 3rem;

    .facts-item {
        grid-row: span 2;
    }

        .facts-item:nth-of-type(2n) {
            grid-column: 2/-1;
        }

        .facts-item:nth-of-type(2) {
            grid-row: 2/4;
        }
}

.facts-item {
    padding-block: clamp(0.75rem, 3vw, 1.5rem);
    padding-inline: clamp(1rem, 3vw, 2.625rem) 0.5rem;
    font-size: clamp(var(--fs-200), 3vw, var(--fs-600));
    color: var(--tertiary-clr);
    line-height: 24px;
    background-color: var(--white-clr);
    border: 1px solid var(--secondary-clr);
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.07);
    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        width: 70px;
        height: 70px;
        aspect-ratio: 1;
        left: 1.25rem;
        inset-block: 0;
        margin: auto;
        background-color: #f6e6f0;
        border-radius: 50%;
        z-index: -1;
    }

    span {
        display: block;
        color: var(--secondary-clr);
        font-size: var(--fs-850);
        font-weight: var(--fw-900);
        line-height: 43.2px;
        letter-spacing: 12%;
    }
}

/* End of Facts */
/* Bridge */
.bridge {
    padding-block: clamp(5rem, 8vw, 5.625rem) clamp(5.5rem, 10vw, 7.5rem);
    position: relative;
    overflow-x: clip;

    &::before {
        content: "";
        position: absolute;
        bottom: 7.5rem;
        left: -6rem;
        width: 640px;
        height: 760px;
        background-image: url("/assets/images/bridge-ellipse.png");
        background-repeat: no-repeat;
        z-index: -1;
    }

    @media (width <=525px) {
        padding-top: 0;
    }

    @media (width <=600px) {
        padding-bottom: 4rem;
    }
}

.bridge-content {
    display: grid;
    gap: 2rem;

    @media (width > 1024px) {
        grid-template-columns: 1fr 1fr;
    }

    @media (width <=1024px) {
        & .focus-img-3 {
            width: 100%;
            height: 392.89px;
            margin-top: 2rem;
        }
    }
}

.bridge-list {
    padding-block: 1.875rem 2.5rem;
    color: var(--black-clr);
    display: grid;
    gap: clamp(1rem, 3vw, 1.875rem);
    line-height: 22px;
    letter-spacing: -2%;
}

.bridge-list-item {
    position: relative;
    isolation: isolate;
    padding-left: 2.5rem;

    &::before {
        content: "";
        position: absolute;
        left: 0;
        z-index: 1;
        display: block;
        background-image: url("/assets/icons/check-circle.svg");
        background-size: contain;
        width: 1.5rem;
        height: 1.5rem;
        aspect-ratio: 1;
    }
}

/* End of Bridge */

/* FAQ */
.faq-wrapper {
    padding-top: clamp(3rem, 9vw, 6rem);
    background-color: var(--white-clr);
}

.faq-content {
    padding-inline: 3.5rem;
    display: grid;

    @media (width > 1024px) {
        grid-template-columns: 1fr 1fr;

        .column:first-child {
            justify-self: center;
        }
    }

    @media (width <= 1024px) {
        padding-inline: 1.125rem;
    }

    @media (width <= 768px) {
        padding-inline: 3rem;
    }

    @media (width <= 600px) {
        padding-inline: 1.25rem;
    }

    .column:first-child {
        padding-block: 3.5rem;
    }

    h2 {
        display: flex;
        flex-direction: column;
        font-weight: var(--fw-900);
        font-size: var(--fs-1000);
        line-height: 1;
        color: var(--tertiary-clr-900);

        @media (width > 1024px) {
            font-size: 128px;
        }

        .pre-heading {
            max-width: 15ch;
            font-weight: var(--fw-500);
            font-size: var(--fs-450);
            color: var(--secondary-clr-900);
            text-transform: uppercase;
        }

        .heading {
            padding-block: 2.25rem 3rem;
            border-bottom: 1px solid #cccee5;
        }
    }
}
/* End of FAQ */

.bg-white-rounded {
    position: relative;
    z-index: 1;
    border-image-source: conic-gradient(var(--white-clr) 0% 0%);
    border-image-slice: fill 0;
    /* border-image-outset: 5px 100vw; */
    border-image-outset: 0px 100vw;

    &.top {
        margin-top: 3rem;

        &::before {
            content: "";
            position: absolute;
            z-index: -5;
            margin-inline: auto;
            width: 100%;
            height: 100%;
            background-color: var(--white-clr);
            border-radius: 3rem;
            bottom: 3rem;
        }
    }

    &::after {
        content: "";
        position: absolute;
        z-index: -5;
        margin-inline: auto;
        width: 100%;
        height: 100%;
        background-color: var(--white-clr);
        border-radius: 3rem;
        bottom: -3rem;
    }
}

/* Providers */
.providers-wrapper {
    @media (width <=768px) {
        --_gap: 1.125rem !important;
    }
}

.providers-content {
    padding-block: 74px;

    h2 {
        font-weight: var(--fw-900);
        font-size: var(--fs-700);
        line-height: 1.2;
        text-transform: uppercase;
        color: var(--text-clr-700);
    }

    > header {
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 2.25rem;

        hr {
            flex-grow: 1;
            border-top: none;
            border-color: #d2d5ed;
        }

        @media (width <= 600px) {
            flex-direction: column;
            gap: 0;

            hr {
                margin-top: 3rem;
                width: 100%;
            }

            .round-btns {
                margin-block: -1.5rem 2rem;
                padding-inline: 1rem;
                background-color: var(--white-clr-700);
            }
        }
    }

    .round-btns {
        width: fit-content;
        display: flex;
        gap: 1.5rem;

        .prev-btn,
        .next-btn {
            cursor: pointer;
            width: 3rem;
            height: 3rem;
            aspect-ratio: 1;
            border-radius: 50%;
            border: none;
            color: #31343a;
            background-color: var(--white-clr);
            outline: 1px solid #e8e8f7;

            &:hover {
                background-color: #31343a;
                color: var(--white-clr);
                outline-color: #31343a;
            }

            &:disabled {
                color: #31343a;
                background-color: var(--border-clr);
                outline: 1px solid #31343a;
            }

            svg {
                margin: auto;
            }
        }
    }

    overflow-x: clip;
}

.providers-list {
    --_card-list-gap: 0.625rem;
    --_card-size: 20rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--_card-size);
    margin-right: calc(var(--_card-list-gap) * -1);

    > * {
        margin-right: var(--_card-list-gap);
    }

    @media (width <= 400px) {
        --_card-size: 100%;
    }
}

.provider-card {
    padding: 1.125rem 1.125rem 2.25rem;
    display: grid;
    gap: 1.125rem;
    border-radius: 1.5rem;
    background-color: var(--white-clr);
    border: 1px solid #e8e8f7;
    transition: border-color 300ms ease, box-shadow 500ms ease-out;

    &:hover,
    &:focus-within {
        border-color: #2c2f4a;
        box-shadow: 0px 0px 20px 2px #2c2f4a26;
    }

    .provider-img {
        max-height: 140px;
        padding: 2rem;
        /* flex-basis: 200px; */
        outline: 1px solid #e1e1ed;
        border-radius: 0.75rem;
        background-color: #fcfcff;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    h3 {
        --_line-clamp: 1;
        font-weight: var(--fw-700);
        font-size: 1.25rem;
        line-height: 0.97;
        color: var(--text-clr-700);
    }

    .card-tags {
        margin-block: 0;
    }

    .card-tag {
        color: var(--text-clr-700);
        padding: 0.5rem 0.875rem;
        line-height: 1;
        border: 1px solid #e5e5ef;
        background-color: #f5f5fa;
    }

    .provider-ranks {
        display: flex;
        justify-content: space-between;
    }

    hr {
        border-left: none;
        border-color: #f7f7ff;
    }

    .provider-rank {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .provider-rank-title {
        padding-block: 0.375rem 0.75rem;
        font-weight: var(--fw-500);
        line-height: 0.97;
        color: #9496b1;
    }

    .provider-rank-value {
        font-weight: var(--fw-700);
        font-size: 1.5rem;
        line-height: 0.97;
        color: var(--text-clr-700);
    }

    .provider-overview {
        --_line-clamp: 5;
        font-size: 0.875rem;
        line-height: 1.35;
        color: var(--text-clr-700);
    }

    .provider-link {
        width: fit-content;
        font-weight: var(--fw-500);
        line-height: 0.97;
        text-decoration: underline;
        color: var(--text-clr-700);
        transition: text-decoration 500ms ease;

        &:hover {
            text-decoration-thickness: 3px;
        }
    }
}

/* End of Providers */

/* Form */
.form-wrapper {
    @media (480px<= width <=768px) {
        --_gap: 1.125rem !important;
    }
}

.form-content {
    --_form-title-fs: var(--fs-700);
    margin-bottom: 1.125rem;
    display: grid;
    grid-template-columns: 100%;
    gap: 1.5rem;

    @media (width<=600px) {
        .column:first-child {
            display: none;
        }
    }

    @media (600px<width <= 1024px) {
        grid-template-rows: 352px 1fr;
    }

    @media (width<= 1024px) {
        --_form-title-fs: var(--fs-600);
    }

    @media (width > 1024px) {
        grid-template-columns: 1fr 1fr;
    }

    @media (1024px < width <= 1200px) {
        .column:last-child {
            padding: 2rem;
        }
    }

    .column:last-child {
        padding: clamp(3rem, 6vw + 0.5rem, 4.5rem) clamp(1.25rem, 4vw + 0.5rem, 4.5rem);
        background-color: var(--white-clr);
        border-radius: 2.25rem;
        border: 1px solid #e8e8f9;

        > * {
            margin-inline: auto;
            max-width: 500px;
        }
    }

    h2 {
        font-weight: var(--fw-900);
        font-size: var(--_form-title-fs);
        line-height: 1;
        text-transform: uppercase;
        color: var(--text-clr-700);
        text-wrap: balance;
    }

    p {
        padding-block: 1.125rem 2.25rem;
        font-weight: var(--fw-500);
        line-height: 1.4;
        color: var(--black-clr);
    }
}

.form-img {
    height: 100%;
    width: 100%;

    img {
        height: inherit;
        width: inherit;
        border-radius: 2.25rem;
        object-fit: cover;
    }
}

.partner-form {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;

    .span-2 {
        grid-column: 1/-1;
    }
}
/* End of Form */

/* Journey */
.journey {
    margin-top: 1.125rem;

    .content {
        background-color: transparent;
    }

    > .content {
        /* padding: 3.5rem; */
        padding: 3.5rem clamp(2.5rem, 2.8vw + 1.1rem, 3.5rem);
        background-color: var(--text-clr-700);
        border-radius: 1.5rem;

        @media (width <= 768px) {
            padding-inline: max(5%, 2rem);
        }
    }

    .hero-8 {
        .column:last-of-type {
            border: none;
            background-color: transparent;
        }

        .pre-heading {
            color: var(--white-clr);
            background-color: var(--secondary-clr-900);
            border-color: #c24489;
        }

        .h1,
        p {
            color: var(--white-clr);
        }
    }

    .hero-content {
        grid-auto-flow: row;
        /* grid-auto-rows: minmax(700px, auto); */
        /* grid-auto-rows: minmax(700px, 1fr); */
        grid-auto-rows: 700px;

        .column:last-of-type {
            @media (width <= 1024px) {
                padding: 3rem 0;
            }
        }
    }

    .steps-content {
        padding: 0;
    }

    .steps {
        margin-bottom: 0;

        .content {
            border: none;
        }
    }

    .step-card {
        &::after {
            border-image: fill 0 linear-gradient(hsla(327, 64%, 41%, 0.75), hsla(327, 64%, 41%, 0.75));
        }
    }
}

.scholarship-claim,
.referral-claim,
.refund-request {
    display: contents;
}

/* Migration Agents Carousel - Desktop & Mobile */

/* Slider container - handles overflow and margins responsively */
.migration-agents-slider {
    overflow-x: clip;

    @media (width <= 1024px) {
        --_card-list-gap: 1rem;
    }

    @media (width <= 768px) {
        --_card-list-gap: 0.75rem;
    }

    @media (width <= 600px) {
        --_card-size: 100%;
    }
}

/* Card list - EXACT pattern from home.css .card-list but with desktop auto-fit */
.migration-agents-section .card-list {
    --_card-list-gap: 1.125rem;
    --_card-size: 344px;
    display: grid;
    touch-action: pan-y pinch-zoom;
    padding: 0;
    /* Desktop: Natural wrapping grid layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 344px));
    gap: var(--_card-list-gap);
    justify-content: center;
    /* Mobile: Horizontal carousel (EXACT pattern from home.css) */
    @media (width <= 768px) {
        grid-auto-flow: column;
        grid-auto-columns: var(--_card-size);
        gap: 0;
        justify-content: flex-start;
        /* Card list gap - margin trick for carousel */
        margin-right: calc(var(--_card-list-gap) * -1);

        > * {
            margin-right: var(--_card-list-gap);
        }
    }
    /* Very small screens: Full width cards */
    @media (width <= 400px) {
        --_card-size: max(100%, 344px);
    }
}

/* Section wrapper */
.migration-agents-section {
    padding: 3rem 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header styling */
.migration-agents-header {
    padding-bottom: 56px;
    text-align: center;

    .h1 {
        color: var(--tertiary-clr-900);
        font-size: var(--fs-1000);
        font-weight: var(--fw-900);
        text-transform: uppercase;
        max-width: 26ch;
        margin-inline: auto;

        span {
            display: block;
            font-weight: var(--fw-700);
            line-height: 1.2;
        }

        @media (width <= 1024px) {
            font-size: var(--fs-900);
        }

        @media (width <= 768px) {
            font-size: var(--fs-700);
        }
    }

    p {
        max-width: 600px;
        margin: 1rem auto 0;
        color: var(--text-clr);
    }
}

/* Navigation buttons - reuse round-btns styling */
.migration-agents-section .round-btns-wrapper {
    position: relative;
    margin-bottom: 2rem;

    .round-btns {
        position: relative;
        width: fit-content;
        display: flex;
        gap: 1.5rem;
        margin-inline: auto;

        .prev-btn,
        .next-btn {
            cursor: pointer;
            width: 3rem;
            height: 3rem;
            aspect-ratio: 1;
            border-radius: 50%;
            border: none;
            color: var(--tertiary-clr-900);
            background-color: var(--white-clr);
            transition: all 300ms ease;

            &:hover {
                background-color: var(--tertiary-clr-900);
                color: var(--white-clr);
            }

            &:disabled {
                color: var(--white-clr);
                background-color: var(--border-clr);
                outline: 1px solid var(--white-clr);
                cursor: not-allowed;
            }

            svg {
                margin: auto;
            }
        }
    }
}

/* End of Journey */