/* =========================================================
   THRIVE EDUCATION LANDING PAGE
   Main Stylesheet
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --thr-purple:
        #35186f;

    --thr-purple-dark:
        #24104e;

    --thr-purple-light:
        #5c3b9c;

    --thr-magenta:
        #bd275f;

    --thr-red:
        #c82e57;

    --thr-red-dark:
        #a51d46;

    --thr-yellow:
        #f4b900;

    --thr-yellow-light:
        #ffd54a;

    --thr-white:
        #ffffff;

    --thr-offwhite:
        #faf8fc;

    --thr-light:
        #f3eff8;

    --thr-text:
        #272333;

    --thr-muted:
        #706a7c;

    --thr-border:
        #e6e0ec;

    --thr-container:
        1240px;

    --thr-radius:
        20px;

    --thr-shadow:
        0 20px 60px rgba(53, 24, 111, 0.10);

    --thr-font-body:
        "DM Sans",
        sans-serif;

    --thr-font-heading:
        "Manrope",
        sans-serif;

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

    scroll-padding-top:
        90px;

}


body {

    margin:
        0;

    padding:
        0;

    background:
        var(--thr-white);

    color:
        var(--thr-text);

    font-family:
        var(--thr-font-body);

    font-size:
        16px;

    line-height:
        1.7;

    overflow-x:
        hidden;

}


img {

    max-width:
        100%;

    height:
        auto;

    display:
        block;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
input,
textarea,
select {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


ul {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


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

.thr-container {

    width:
        min(
            calc(100% - 50px),
            var(--thr-container)
        );

    margin:
        0 auto;

}


/* =========================================================
   PRELOADER
========================================================= */

.thr-preloader {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--thr-purple);

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;

}


.thr-preloader.hide {

    opacity:
        0;

    visibility:
        hidden;

}


.thr-loader {

    display:
        flex;

    gap:
        8px;

}


.thr-loader span {

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        var(--thr-yellow);

    animation:
        thrLoader 0.8s infinite alternate;

}


.thr-loader span:nth-child(2) {

    animation-delay:
        0.2s;

}


.thr-loader span:nth-child(3) {

    animation-delay:
        0.4s;

}


@keyframes thrLoader {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10px);
    }

}


/* =========================================================
   TOP BAR
========================================================= */

.thr-topbar {

    background:
        var(--thr-purple-dark);

    color:
        rgba(255,255,255,0.8);

    font-size:
        13px;

}


.thr-topbar .thr-container {

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.thr-topbar-left,
.thr-topbar-right {

    display:
        flex;

    align-items:
        center;

    gap:
        24px;

}


.thr-topbar span,
.thr-topbar a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

}


.thr-topbar a {

    transition:
        color 0.3s ease;

}


.thr-topbar a:hover {

    color:
        var(--thr-yellow);

}


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

.thr-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(255,255,255,0.96);

    border-bottom:
        1px solid transparent;

    transition:
        0.3s ease;

}


.thr-header.scrolled {

    box-shadow:
        0 8px 30px rgba(53,24,111,0.08);

    border-color:
        var(--thr-border);

}


.thr-header-inner {

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

}


/* =========================================================
   LOGO
========================================================= */

.thr-logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

}


.thr-logo-mark {

    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    color:
        var(--thr-white);

    background:
        linear-gradient(
            145deg,
            var(--thr-purple),
            var(--thr-magenta)
        );

    font-family:
        var(--thr-font-heading);

    font-size:
        30px;

    font-weight:
        800;

}


.thr-logo-text {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;

}


.thr-logo-text strong {

    color:
        var(--thr-purple);

    font-family:
        var(--thr-font-heading);

    font-size:
        28px;

    font-weight:
        800;

}


.thr-logo-text small {

    margin-top:
        5px;

    color:
        var(--thr-magenta);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


/* =========================================================
   NAVIGATION
========================================================= */

.thr-navigation {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

}


.thr-nav-link {

    position:
        relative;

    color:
        var(--thr-text);

    font-size:
        14px;

    font-weight:
        600;

}


.thr-nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        2px;

    background:
        var(--thr-magenta);

    transition:
        width 0.3s ease;

}


.thr-nav-link:hover,
.thr-nav-link.active {

    color:
        var(--thr-magenta);

}


.thr-nav-link:hover::after,
.thr-nav-link.active::after {

    width:
        100%;

}


.thr-nav-cta {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        12px 21px;

    border-radius:
        100px;

    color:
        var(--thr-white);

    background:
        var(--thr-purple);

    font-size:
        14px;

    font-weight:
        700;

    transition:
        0.3s ease;

}


.thr-nav-cta:hover {

    background:
        var(--thr-magenta);

    transform:
        translateY(-2px);

}


/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.thr-menu-toggle {

    display:
        none;

    width:
        46px;

    height:
        46px;

    padding:
        11px;

    border:
        0;

    border-radius:
        12px;

    background:
        var(--thr-light);

}


.thr-menu-toggle span {

    display:
        block;

    width:
        22px;

    height:
        2px;

    margin:
        5px auto;

    background:
        var(--thr-purple);

}


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

.thr-mobile-menu {

    position:
        fixed;

    top:
        0;

    right:
        -100%;

    width:
        min(380px, 90%);

    height:
        100vh;

    z-index:
        2000;

    padding:
        25px;

    background:
        var(--thr-white);

    box-shadow:
        -10px 0 40px rgba(0,0,0,0.12);

    transition:
        right 0.4s ease;

}


.thr-mobile-menu.open {

    right:
        0;

}


.thr-mobile-menu-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        50px;

    color:
        var(--thr-purple);

    font-family:
        var(--thr-font-heading);

    font-size:
        20px;

    font-weight:
        700;

}


.thr-mobile-menu-head button {

    width:
        42px;

    height:
        42px;

    border:
        0;

    border-radius:
        10px;

    color:
        var(--thr-purple);

    background:
        var(--thr-light);

}


.thr-mobile-menu nav {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.thr-mobile-menu nav a {

    padding:
        14px;

    border-radius:
        10px;

    font-weight:
        600;

}


.thr-mobile-menu nav a:hover {

    color:
        var(--thr-magenta);

    background:
        var(--thr-light);

}


.thr-mobile-cta {

    margin-top:
        20px;

    color:
        var(--thr-white) !important;

    background:
        var(--thr-purple) !important;

}


.thr-menu-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        1500;

    background:
        rgba(20,10,35,0.6);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        0.3s ease;

}


.thr-menu-overlay.open {

    opacity:
        1;

    visibility:
        visible;

}


/* =========================================================
   HERO
========================================================= */

.thr-hero {

    position:
        relative;

    min-height:
        720px;

    overflow:
        hidden;

    padding:
        90px 0 0;

    color:
        var(--thr-white);

    background:
        linear-gradient(
            120deg,
            var(--thr-purple-dark),
            var(--thr-purple)
        );

}


.thr-hero-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items:
        center;

    gap:
        70px;

}


.thr-hero-content {

    padding-bottom:
        100px;

}


.thr-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        22px;

    color:
        var(--thr-yellow-light);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.thr-eyebrow span {

    width:
        30px;

    height:
        2px;

    background:
        var(--thr-yellow);

}


.thr-hero h1 {

    max-width:
        700px;

    margin:
        0 0 25px;

    font-family:
        var(--thr-font-heading);

    font-size:
        clamp(42px, 5.5vw, 76px);

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -2px;

}


.thr-hero h1 span {

    display:
        block;

    color:
        var(--thr-yellow);

}


.thr-hero-description {

    max-width:
        610px;

    margin:
        0 0 35px;

    color:
        rgba(255,255,255,0.78);

    font-size:
        17px;

}


.thr-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

}


.thr-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        54px;

    padding:
        0 25px;

    border:
        1px solid transparent;

    border-radius:
        100px;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        0.3s ease;

}


.thr-btn-primary {

    color:
        var(--thr-purple);

    background:
        var(--thr-yellow);

}


.thr-btn-primary:hover {

    color:
        var(--thr-white);

    background:
        var(--thr-magenta);

    transform:
        translateY(-3px);

}


.thr-btn-outline {

    color:
        var(--thr-white);

    border-color:
        rgba(255,255,255,0.4);

}


.thr-btn-outline:hover {

    color:
        var(--thr-purple);

    background:
        var(--thr-white);

}


.thr-hero-trust {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    margin-top:
        50px;

}


.thr-trust-item {

    display:
        flex;

    flex-direction:
        column;

}


.thr-trust-item strong {

    color:
        var(--thr-yellow);

    font-family:
        var(--thr-font-heading);

    font-size:
        22px;

}


.thr-trust-item span {

    color:
        rgba(255,255,255,0.65);

    font-size:
        12px;

}


.thr-trust-divider {

    width:
        1px;

    height:
        42px;

    background:
        rgba(255,255,255,0.2);

}


/* =========================================================
   HERO VISUAL
========================================================= */

.thr-hero-visual {

    position:
        relative;

    min-height:
        560px;

}


.thr-hero-circle {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        480px;

    height:
        480px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--thr-magenta),
            #6b369f
        );

    transform:
        translate(-50%, -50%);

}


.thr-hero-card {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        min(370px, 80%);

    padding:
        45px 38px;

    border:
        1px solid rgba(255,255,255,0.25);

    border-radius:
        30px;

    background:
        rgba(255,255,255,0.1);

    backdrop-filter:
        blur(12px);

    transform:
        translate(-50%, -50%) rotate(-5deg);

}


.thr-hero-card-top {

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--thr-yellow);

    font-size:
        13px;

    font-weight:
        700;

    text-transform:
        uppercase;

}


.thr-hero-card h2 {

    margin:
        40px 0 0;

    color:
        var(--thr-white);

    font-family:
        var(--thr-font-heading);

    font-size:
        70px;

    line-height:
        1;

}


.thr-hero-card p {

    margin:
        10px 0 35px;

    color:
        rgba(255,255,255,0.8);

    font-size:
        20px;

}


.thr-hero-badge {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px;

    border-radius:
        14px;

    color:
        var(--thr-purple);

    background:
        var(--thr-yellow);

    font-size:
        13px;

    font-weight:
        700;

}


.thr-floating-card {

    position:
        absolute;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px 18px;

    border-radius:
        16px;

    color:
        var(--thr-text);

    background:
        var(--thr-white);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.2);

}


.thr-floating-card > i {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    color:
        var(--thr-purple);

    background:
        var(--thr-light);

    font-size:
        20px;

}


.thr-floating-card div {

    display:
        flex;

    flex-direction:
        column;

}


.thr-floating-card strong {

    font-size:
        13px;

}


.thr-floating-card small {

    color:
        var(--thr-muted);

    font-size:
        10px;

}


.thr-float-one {

    top:
        16%;

    left:
        0;

}


.thr-float-two {

    right:
        0;

    bottom:
        15%;

}


.thr-hero-shape {

    position:
        absolute;

    border-radius:
        50%;

    opacity:
        0.15;

    background:
        var(--thr-magenta);

}


.thr-shape-one {

    width:
        300px;

    height:
        300px;

    top:
        -150px;

    left:
        -100px;

}


.thr-shape-two {

    width:
        400px;

    height:
        400px;

    right:
        -200px;

    bottom:
        -200px;

    background:
        var(--thr-yellow);

}


/* =========================================================
   HERO STRIP
========================================================= */

.thr-hero-strip {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    z-index:
        5;

    padding:
        20px 0;

    background:
        rgba(25,10,55,0.7);

    backdrop-filter:
        blur(10px);

}


.thr-strip-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;

}


.thr-strip-grid div {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    color:
        rgba(255,255,255,0.9);

    font-size:
        13px;

    font-weight:
        600;

}


.thr-strip-grid i {

    color:
        var(--thr-yellow);

    font-size:
        20px;

}


/* =========================================================
   SECTIONS
========================================================= */

.section-space {

    padding:
        110px 0;

}


.thr-section-heading {

    display:
        grid;

    grid-template-columns:
        1fr 0.75fr;

    align-items:
        end;

    gap:
        60px;

    margin-bottom:
        55px;

}


.thr-section-label {

    display:
        inline-block;

    margin-bottom:
        14px;

    color:
        var(--thr-magenta);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.thr-section-heading h2,
.thr-centered-heading h2,
.thr-benefit-intro h2,
.thr-contact-content h2 {

    margin:
        0;

    color:
        var(--thr-purple);

    font-family:
        var(--thr-font-heading);

    font-size:
        clamp(32px, 4vw, 52px);

    font-weight:
        700;

    line-height:
        1.15;

    letter-spacing:
        -1px;

}


.thr-section-heading h2 span,
.thr-centered-heading h2 span,
.thr-benefit-intro h2 span,
.thr-contact-content h2 span {

    color:
        var(--thr-magenta);

}


.thr-section-heading p {

    margin:
        0;

    color:
        var(--thr-muted);

}


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

.thr-support-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        25px;

}


.thr-support-card {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        25px;

    padding:
        38px;

    border-radius:
        var(--thr-radius);

    color:
        var(--thr-white);

}


.thr-support-purple {

    background:
        var(--thr-purple);

}


.thr-support-red {

    background:
        var(--thr-red);

}


.thr-support-icon {

    flex:
        0 0 65px;

    width:
        65px;

    height:
        65px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        18px;

    color:
        var(--thr-purple);

    background:
        var(--thr-yellow);

    font-size:
        28px;

}


.thr-support-card span {

    color:
        rgba(255,255,255,0.65);

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

}


.thr-support-card h3 {

    margin:
        7px 0 10px;

    font-family:
        var(--thr-font-heading);

    font-size:
        24px;

    line-height:
        1.3;

}


.thr-support-card p {

    margin:
        0;

    color:
        rgba(255,255,255,0.75);

    font-size:
        14px;

}


/* =========================================================
   FREE COACHING
========================================================= */

.thr-free-coaching {

    padding:
        55px 0;

    color:
        var(--thr-white);

    background:
        var(--thr-purple);

}


.thr-free-grid {

    display:
        grid;

    grid-template-columns:
        100px 1fr 180px;

    align-items:
        center;

    gap:
        30px;

}


.thr-free-icon {

    width:
        85px;

    height:
        85px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        20px;

    color:
        var(--thr-purple);

    background:
        var(--thr-white);

    font-size:
        40px;

}


.thr-free-content > span {

    color:
        var(--thr-yellow);

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

}


.thr-free-content h2 {

    margin:
        3px 0;

    font-family:
        var(--thr-font-heading);

    font-size:
        clamp(32px, 4vw, 52px);

    line-height:
        1;

}


.thr-free-content h2 strong {

    color:
        var(--thr-yellow);

}


.thr-free-content p {

    margin:
        10px 0 0;

    color:
        rgba(255,255,255,0.7);

}


.thr-free-badge {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        160px;

    height:
        160px;

    border-radius:
        50%;

    color:
        var(--thr-purple);

    background:
        var(--thr-yellow);

    text-align:
        center;

}


.thr-free-badge strong {

    font-family:
        var(--thr-font-heading);

    font-size:
        28px;

    line-height:
        1;

}


.thr-free-badge span {

    font-size:
        16px;

    font-weight:
        800;

}


.thr-free-badge small {

    max-width:
        110px;

    font-size:
        8px;

    font-weight:
        800;

}


/* =========================================================
   COURSE SECTION
========================================================= */

.thr-courses {

    background:
        var(--thr-offwhite);

}


.thr-centered-heading {

    max-width:
        700px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


.thr-centered-heading p {

    max-width:
        580px;

    margin:
        20px auto 0;

    color:
        var(--thr-muted);

}


.thr-course-grid {

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:
        18px;

}


.thr-course-card {

    position:
        relative;

    min-height:
        370px;

    padding:
        30px 24px;

    overflow:
        hidden;

    border:
        1px solid var(--thr-border);

    border-radius:
        18px;

    background:
        var(--thr-white);

    transition:
        0.35s ease;

}


.thr-course-card:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--thr-magenta);

    box-shadow:
        var(--thr-shadow);

}


.thr-course-number {

    position:
        absolute;

    top:
        20px;

    right:
        20px;

    color:
        #e9e3ef;

    font-family:
        var(--thr-font-heading);

    font-size:
        30px;

    font-weight:
        800;

}


.thr-course-icon {

    width:
        65px;

    height:
        65px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        30px;

    border-radius:
        17px;

    color:
        var(--thr-purple);

    background:
        var(--thr-light);

    font-size:
        28px;

    transition:
        0.3s ease;

}


.thr-course-card:hover .thr-course-icon {

    color:
        var(--thr-white);

    background:
        var(--thr-magenta);

}


.thr-course-card > span {

    color:
        var(--thr-magenta);

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

}


.thr-course-card h3 {

    margin:
        8px 0 12px;

    color:
        var(--thr-purple);

    font-family:
        var(--thr-font-heading);

    font-size:
        19px;

    line-height:
        1.3;

}


.thr-course-card p {

    margin:
        0 0 25px;

    color:
        var(--thr-muted);

    font-size:
        13px;

}


.thr-course-card a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--thr-purple);

    font-size:
        12px;

    font-weight:
        700;

}


.thr-course-card a:hover {

    color:
        var(--thr-magenta);

}


/* =========================================================
   BENEFITS
========================================================= */

.thr-benefits {

    background:
        var(--thr-white);

}


.thr-benefit-wrapper {

    display:
        grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap:
        80px;

    align-items:
        center;

}


.thr-benefit-intro p {

    max-width:
        450px;

    margin:
        25px 0 0;

    color:
        var(--thr-muted);

}


.thr-benefit-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        1px;

    overflow:
        hidden;

    border:
        1px solid var(--thr-border);

    border-radius:
        20px;

}


.thr-benefit-item {

    padding:
        35px;

    background:
        var(--thr-white);

}


.thr-benefit-icon {

    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        20px;

    border-radius:
        14px;

    color:
        var(--thr-purple);

    background:
        #f5eaf1;

    font-size:
        21px;

}


.thr-benefit-item h3 {

    margin:
        0 0 10px;

    color:
        var(--thr-purple);

    font-family:
        var(--thr-font-heading);

    font-size:
        18px;

}


.thr-benefit-item p {

    margin:
        0;

    color:
        var(--thr-muted);

    font-size:
        13px;

}


/* =========================================================
   CTA
========================================================= */

.thr-cta {

    padding:
        55px 0;

    background:
        linear-gradient(
            110deg,
            var(--thr-magenta),
            var(--thr-purple)
        );

}


.thr-cta-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.thr-cta-inner > div > span {

    color:
        var(--thr-yellow);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.thr-cta h2 {

    max-width:
        700px;

    margin:
        8px 0 0;

    color:
        var(--thr-white);

    font-family:
        var(--thr-font-heading);

    font-size:
        clamp(28px, 4vw, 45px);

    line-height:
        1.2;

}


.thr-cta h2 strong {

    color:
        var(--thr-yellow);

}


.thr-btn-light {

    flex:
        0 0 auto;

    color:
        var(--thr-purple);

    background:
        var(--thr-white);

}


.thr-btn-light:hover {

    color:
        var(--thr-purple);

    background:
        var(--thr-yellow);

    transform:
        translateY(-3px);

}


/* =========================================================
   CONTACT
========================================================= */

.thr-contact {

    background:
        var(--thr-offwhite);

}


.thr-contact-grid {

    display:
        grid;

    grid-template-columns:
        1fr 0.7fr;

    gap:
        80px;

    align-items:
        center;

}


.thr-contact-content > p {

    max-width:
        570px;

    margin:
        25px 0 35px;

    color:
        var(--thr-muted);

}


.thr-contact-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


.thr-contact-list > * {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


.thr-contact-list > * > i {

    flex:
        0 0 50px;

    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    color:
        var(--thr-purple);

    background:
        var(--thr-white);

    box-shadow:
        0 10px 30px rgba(53,24,111,0.06);

}


.thr-contact-list div {

    display:
        flex;

    flex-direction:
        column;

}


.thr-contact-list small {

    color:
        var(--thr-muted);

    font-size:
        11px;

}


.thr-contact-list strong {

    color:
        var(--thr-purple);

    font-size:
        15px;

}


.thr-contact-card {

    padding:
        50px;

    border-radius:
        25px;

    color:
        var(--thr-white);

    background:
        var(--thr-purple);

    box-shadow:
        var(--thr-shadow);

}


.thr-contact-card-icon {

    width:
        60px;

    height:
        60px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        25px;

    border-radius:
        15px;

    color:
        var(--thr-purple);

    background:
        var(--thr-yellow);

    font-size:
        25px;

}


.thr-contact-card > span {

    color:
        var(--thr-yellow);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.thr-contact-card h3 {

    margin:
        8px 0;

    font-family:
        var(--thr-font-heading);

    font-size:
        38px;

}


.thr-contact-card p {

    margin:
        0 0 25px;

    color:
        rgba(255,255,255,0.7);

    font-size:
        14px;

}


/* =========================================================
   FOOTER
========================================================= */

.thr-footer {

    padding:
        70px 0 25px;

    color:
        rgba(255,255,255,0.7);

    background:
        var(--thr-purple-dark);

}


.thr-footer-grid {

    display:
        grid;

    grid-template-columns:
        1.5fr 0.8fr 1fr 1fr;

    gap:
        50px;

    padding-bottom:
        50px;

}


.thr-footer .thr-logo-text strong {

    color:
        var(--thr-white);

}


.thr-footer-brand p {

    max-width:
        330px;

    margin:
        20px 0 0;

    font-size:
        13px;

}


.thr-footer h3 {

    margin:
        0 0 20px;

    color:
        var(--thr-white);

    font-family:
        var(--thr-font-heading);

    font-size:
        16px;

}


.thr-footer-links {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


.thr-footer-links a {

    font-size:
        13px;

    transition:
        color 0.3s ease;

}


.thr-footer-links a:hover {

    color:
        var(--thr-yellow);

}


.thr-footer-contact {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        7px;

}


.thr-footer-contact a {

    color:
        var(--thr-yellow);

    font-size:
        14px;

}


.thr-footer-contact p {

    margin:
        5px 0 0;

    font-size:
        13px;

}


.thr-footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-top:
        25px;

    border-top:
        1px solid rgba(255,255,255,0.1);

}


.thr-footer-bottom p {

    margin:
        0;

    font-size:
        12px;

}


.thr-social-links {

    display:
        flex;

    gap:
        8px;

}


.thr-social-links a {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--thr-white);

    background:
        rgba(255,255,255,0.1);

    transition:
        0.3s ease;

}


.thr-social-links a:hover {

    color:
        var(--thr-purple);

    background:
        var(--thr-yellow);

}


/* =========================================================
   WHATSAPP
========================================================= */

.thr-whatsapp {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        900;

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--thr-white);

    background:
        #20b95c;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.2);

    font-size:
        28px;

    transition:
        transform 0.3s ease;

}


.thr-whatsapp:hover {

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

}


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

@media (max-width: 1100px) {


    .thr-navigation {

        gap:
            18px;

    }


    .thr-course-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }


    .thr-benefit-wrapper {

        grid-template-columns:
            1fr;

    }


    .thr-benefit-intro p {

        max-width:
            600px;

    }


    .thr-footer-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 991px) {


    .thr-navigation {

        display:
            none;

    }


    .thr-menu-toggle {

        display:
            block;

    }


    .thr-hero {

        padding-top:
            70px;

    }


    .thr-hero-grid {

        grid-template-columns:
            1fr;

    }


    .thr-hero-content {

        padding-bottom:
            30px;

        text-align:
            center;

    }


    .thr-eyebrow,
    .thr-hero-actions,
    .thr-hero-trust {

        justify-content:
            center;

    }


    .thr-hero-description {

        margin-right:
            auto;

        margin-left:
            auto;

    }


    .thr-hero-visual {

        min-height:
            500px;

    }


    .thr-section-heading {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .thr-free-grid {

        grid-template-columns:
            80px 1fr;

    }


    .thr-free-badge {

        display:
            none;

    }


    .thr-contact-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 767px) {


    .thr-container {

        width:
            min(
                calc(100% - 30px),
                var(--thr-container)
            );

    }


    .thr-topbar {

        display:
            none;

    }


    .thr-header-inner {

        min-height:
            70px;

    }


    .thr-logo-mark {

        width:
            43px;

        height:
            43px;

        font-size:
            25px;

    }


    .thr-logo-text strong {

        font-size:
            24px;

    }


    .thr-hero {

        min-height:
            800px;

    }


    .thr-hero h1 {

        font-size:
            43px;

        letter-spacing:
            -1px;

    }


    .thr-hero-description {

        font-size:
            15px;

    }


    .thr-hero-trust {

        gap:
            12px;

    }


    .thr-trust-divider {

        height:
            35px;

    }


    .thr-trust-item strong {

        font-size:
            17px;

    }


    .thr-trust-item span {

        font-size:
            10px;

    }


    .thr-hero-visual {

        min-height:
            400px;

    }


    .thr-hero-circle {

        width:
            330px;

        height:
            330px;

    }


    .thr-hero-card {

        width:
            280px;

        padding:
            30px;

    }


    .thr-hero-card h2 {

        font-size:
            55px;

    }


    .thr-floating-card {

        padding:
            10px;

    }


    .thr-float-one {

        left:
            0;

    }


    .thr-float-two {

        right:
            0;

    }


    .thr-strip-grid {

        grid-template-columns:
            1fr;

        gap:
            8px;

    }


    .thr-strip-grid div {

        justify-content:
            flex-start;

    }


    .section-space {

        padding:
            75px 0;

    }


    .thr-support-grid {

        grid-template-columns:
            1fr;

    }


    .thr-support-card {

        padding:
            28px;

    }


    .thr-free-grid {

        grid-template-columns:
            1fr;

    }


    .thr-free-icon {

        width:
            65px;

        height:
            65px;

        font-size:
            28px;

    }


    .thr-course-grid {

        grid-template-columns:
            1fr;

    }


    .thr-course-card {

        min-height:
            auto;

    }


    .thr-benefit-grid {

        grid-template-columns:
            1fr;

    }


    .thr-cta-inner {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .thr-contact-card {

        padding:
            35px 25px;

    }


    .thr-footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .thr-footer-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


@media (max-width: 480px) {


    .thr-hero h1 {

        font-size:
            36px;

    }


    .thr-hero-actions {

        flex-direction:
            column;

    }


    .thr-btn {

        width:
            100%;

    }


    .thr-hero-trust {

        gap:
            8px;

    }


    .thr-trust-divider {

        display:
            none;

    }


    .thr-hero-visual {

        min-height:
            350px;

    }


    .thr-hero-circle {

        width:
            280px;

        height:
            280px;

    }


    .thr-hero-card {

        width:
            245px;

        padding:
            25px;

    }


    .thr-hero-card h2 {

        margin-top:
            25px;

        font-size:
            45px;

    }


    .thr-floating-card {

        transform:
            scale(0.85);

    }


    .thr-float-one {

        left:
            -15px;

    }


    .thr-float-two {

        right:
            -15px;

    }


    .thr-support-card {

        flex-direction:
            column;

    }


    .thr-contact-card h3 {

        font-size:
            32px;

    }

}

/* =========================================================
   HIGHER STUDIES GUIDANCE
   THRIVE EDUCATION
========================================================= */

.thr-guide-section {

    position:
        relative;

    padding:
        95px 0;

    overflow:
        hidden;

    background:
        #faf8fc;

}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.thr-guide-bg-shape {

    position:
        absolute;

    pointer-events:
        none;

    border-radius:
        50%;

    opacity:
        0.5;

}


.thr-guide-shape-one {

    width:
        400px;

    height:
        400px;

    top:
        -200px;

    right:
        -100px;

    background:
        rgba(189, 39, 95, 0.06);

}


.thr-guide-shape-two {

    width:
        300px;

    height:
        300px;

    bottom:
        -180px;

    left:
        -100px;

    background:
        rgba(53, 24, 111, 0.05);

}


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

.thr-guide-card {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1.2fr 0.8fr;

    align-items:
        center;

    gap:
        60px;

    min-height:
        500px;

    padding:
        65px 70px;

    overflow:
        hidden;

    border:
        1px solid rgba(53, 24, 111, 0.08);

    border-radius:
        28px;

    background:
        var(--thr-white);

    box-shadow:
        0 25px 70px
        rgba(53, 24, 111, 0.08);

}


/* =========================================================
   NUMBER
========================================================= */

.thr-guide-number {

    position:
        absolute;

    top:
        25px;

    right:
        35px;

    color:
        rgba(53, 24, 111, 0.04);

    font-family:
        var(--thr-font-heading);

    font-size:
        100px;

    font-weight:
        700;

    line-height:
        1;

    user-select:
        none;

}


/* =========================================================
   CONTENT
========================================================= */

.thr-guide-content {

    position:
        relative;

    z-index:
        2;

}


.thr-guide-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        18px;

    color:
        var(--thr-magenta);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;

}


.thr-guide-label i {

    font-size:
        16px;

}


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

.thr-guide-content h2 {

    max-width:
        600px;

    margin:
        0 0 20px;

    color:
        var(--thr-purple);

    font-family:
        var(--thr-font-heading);

    font-size:
        clamp(
            38px,
            5vw,
            60px
        );

    font-weight:
        600;

    line-height:
        1.12;

    letter-spacing:
        -1.5px;

}


.thr-guide-content h2 span {

    display:
        inline-block;

    color:
        var(--thr-magenta);

}


.thr-guide-description {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--thr-muted);

    font-size:
        16px;

    line-height:
        1.8;

}


.thr-guide-description strong {

    color:
        var(--thr-purple);

    font-weight:
        600;

}


/* =========================================================
   MAIN HIGHLIGHT
========================================================= */

.thr-guide-highlight {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    max-width:
        520px;

    margin-top:
        32px;

    padding:
        20px 22px;

    border:
        1px solid
        rgba(244, 185, 0, 0.35);

    border-radius:
        16px;

    background:
        linear-gradient(
            100deg,
            rgba(244, 185, 0, 0.12),
            rgba(189, 39, 95, 0.04)
        );

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.thr-guide-highlight:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(53, 24, 111, 0.08);

}


.thr-guide-highlight-icon {

    flex:
        0 0 54px;

    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    color:
        var(--thr-purple);

    background:
        var(--thr-yellow);

    font-size:
        23px;

}


.thr-guide-highlight-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.thr-guide-highlight-content span {

    color:
        var(--thr-muted);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.thr-guide-highlight-content strong {

    color:
        var(--thr-purple);

    font-family:
        var(--thr-font-heading);

    font-size:
        19px;

    font-weight:
        600;

}


.thr-guide-highlight-content em {

    margin:
        0 4px;

    color:
        var(--thr-magenta);

    font-style:
        normal;

}


/* =========================================================
   WORK VISA CARD
========================================================= */

.thr-guide-visa {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    max-width:
        520px;

    margin-top:
        15px;

    padding:
        15px 18px;

    border:
        1px solid
        rgba(53, 24, 111, 0.08);

    border-radius:
        14px;

    background:
        var(--thr-offwhite);

    transition:
        transform 0.35s ease,
        background 0.35s ease;

}


.thr-guide-visa:hover {

    transform:
        translateX(5px);

    background:
        #f3eff8;

}


.thr-guide-visa-icon {

    flex:
        0 0 43px;

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    color:
        var(--thr-white);

    background:
        var(--thr-purple);

    font-size:
        19px;

}


.thr-guide-visa > div {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

}


.thr-guide-visa span {

    color:
        var(--thr-muted);

    font-size:
        10px;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.8px;

}


.thr-guide-visa strong {

    color:
        var(--thr-purple);

    font-size:
        14px;

    font-weight:
        600;

}


.thr-guide-arrow {

    color:
        var(--thr-magenta);

    font-size:
        18px;

    transition:
        transform 0.3s ease;

}


.thr-guide-visa:hover
.thr-guide-arrow {

    transform:
        translate(
            3px,
            -3px
        );

}


/* =========================================================
   VISUAL AREA
========================================================= */

.thr-guide-visual {

    position:
        relative;

    min-height:
        390px;

    display:
        grid;

    place-items:
        center;

}


/* =========================================================
   GLOBE
========================================================= */

.thr-guide-globe {

    position:
        relative;

    z-index:
        3;

    width:
        210px;

    height:
        210px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--thr-white);

    background:
        linear-gradient(
            145deg,
            var(--thr-purple),
            var(--thr-magenta)
        );

    box-shadow:
        0 25px 60px
        rgba(53, 24, 111, 0.22);

    transition:
        transform 0.5s ease;

}


.thr-guide-card:hover
.thr-guide-globe {

    transform:
        rotate(
            8deg
        )
        scale(
            1.04
        );

}


.thr-guide-globe i {

    font-size:
        90px;

    opacity:
        0.95;

}


/* =========================================================
   ORBIT
========================================================= */

.thr-guide-orbit {

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    border:
        1px dashed
        rgba(53, 24, 111, 0.18);

    border-radius:
        50%;

    animation:
        thrGuideOrbit
        20s
        linear
        infinite;

}


@keyframes thrGuideOrbit {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


.thr-guide-orbit span {

    position:
        absolute;

    width:
        13px;

    height:
        13px;

    border-radius:
        50%;

    background:
        var(--thr-magenta);

}


.thr-guide-orbit span:nth-child(1) {

    top:
        20px;

    left:
        50%;

}


.thr-guide-orbit span:nth-child(2) {

    right:
        20px;

    bottom:
        35px;

    background:
        var(--thr-yellow);

}


.thr-guide-orbit span:nth-child(3) {

    bottom:
        20px;

    left:
        20%;

    background:
        var(--thr-purple);

}


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

.thr-guide-floating {

    position:
        absolute;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 17px;

    border:
        1px solid
        rgba(53, 24, 111, 0.08);

    border-radius:
        12px;

    color:
        var(--thr-purple);

    background:
        var(--thr-white);

    box-shadow:
        0 15px 40px
        rgba(53, 24, 111, 0.12);

    font-size:
        12px;

    font-weight:
        600;

    transition:
        transform 0.35s ease;

}


.thr-guide-floating i {

    color:
        var(--thr-magenta);

    font-size:
        18px;

}


.thr-guide-float-top {

    top:
        15%;

    right:
        0;

}


.thr-guide-float-bottom {

    bottom:
        12%;

    left:
        0;

}


.thr-guide-card:hover
.thr-guide-float-top {

    transform:
        translateY(-7px);

}


.thr-guide-card:hover
.thr-guide-float-bottom {

    transform:
        translateY(7px);

}


/* =========================================================
   LOCATION BADGE
========================================================= */

.thr-guide-location {

    position:
        absolute;

    right:
        8%;

    bottom:
        2%;

    z-index:
        6;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px 13px;

    border-radius:
        100px;

    color:
        var(--thr-white);

    background:
        var(--thr-red);

    font-size:
        10px;

    font-weight:
        600;

}


.thr-guide-location i {

    color:
        var(--thr-yellow);

}


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

@media (max-width: 991px) {

    .thr-guide-section {

        padding:
            75px 0;

    }


    .thr-guide-card {

        grid-template-columns:
            1fr;

        gap:
            50px;

        padding:
            55px 45px;

    }


    .thr-guide-content {

        max-width:
            700px;

    }


    .thr-guide-visual {

        min-height:
            360px;

    }


    .thr-guide-number {

        font-size:
            80px;

    }

}


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

@media (max-width: 767px) {

    .thr-guide-section {

        padding:
            55px 0;

    }


    .thr-guide-card {

        gap:
            35px;

        padding:
            40px 25px;

        border-radius:
            22px;

    }


    .thr-guide-number {

        top:
            15px;

        right:
            20px;

        font-size:
            60px;

    }


    .thr-guide-content h2 {

        font-size:
            38px;

        letter-spacing:
            -0.8px;

    }


    .thr-guide-description {

        font-size:
            15px;

    }


    .thr-guide-highlight {

        align-items:
            flex-start;

        padding:
            17px;

    }


    .thr-guide-highlight-content strong {

        font-size:
            17px;

    }


    .thr-guide-visa {

        align-items:
            flex-start;

    }


    .thr-guide-visual {

        min-height:
            320px;

    }


    .thr-guide-globe {

        width:
            165px;

        height:
            165px;

    }


    .thr-guide-globe i {

        font-size:
            68px;

    }


    .thr-guide-orbit {

        width:
            260px;

        height:
            260px;

    }


    .thr-guide-floating {

        font-size:
            10px;

        padding:
            10px 12px;

    }


    .thr-guide-float-top {

        top:
            5%;

        right:
            -5px;

    }


    .thr-guide-float-bottom {

        bottom:
            5%;

        left:
            -5px;

    }


    .thr-guide-location {

        right:
            0;

        bottom:
            -5px;

    }

}


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

@media (max-width: 480px) {

    .thr-guide-content h2 {

        font-size:
            33px;

    }


    .thr-guide-highlight {

        gap:
            12px;

    }


    .thr-guide-highlight-icon {

        flex:
            0 0 45px;

        width:
            45px;

        height:
            45px;

        font-size:
            19px;

    }


    .thr-guide-highlight-content strong {

        font-size:
            15px;

    }


    .thr-guide-visa {

        gap:
            10px;

        padding:
            13px;

    }


    .thr-guide-visa strong {

        font-size:
            12px;

    }


    .thr-guide-visual {

        min-height:
            280px;

    }


    .thr-guide-globe {

        width:
            140px;

        height:
            140px;

    }


    .thr-guide-globe i {

        font-size:
            58px;

    }


    .thr-guide-orbit {

        width:
            220px;

        height:
            220px;

    }

}