/* ==========================================================
   MERITZA CLASSES
   BECOME A TUTOR / tutor
   ========================================================== */


/* ==========================================================
   PAGE
========================================================== */

.mc-become-tutor-page {

    padding-top:0 !important;

    padding-bottom:0 !important;

    overflow:hidden;

}


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

.mc-tutor-hero {

    position:relative;

    overflow:hidden;

    padding:
        24px
        0
        25px;

    background:
        linear-gradient(
            180deg,
            #102653 0%,
            #123563 38%,
            #184879 72%,
            #245A8F 100%
        );

    color:#FFFFFF;

}


/* ==========================================================
   HERO DECORATIVE LIGHT
========================================================== */

.mc-tutor-hero::before {

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-300px;

    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.12) 0%,
            rgba(212,175,55,.04) 40%,
            transparent 72%
        );

    pointer-events:none;

}


/* ==========================================================
   HERO CONTENT BOX
========================================================== */

.mc-tutor-hero-content {

    position:relative;

    z-index:1;

    width:100%;

    max-width:1050px;

    margin:0 auto;

    padding:
        38px
        50px;

    border-radius:20px;

    background:#0A1946;

    text-align:center;

    box-shadow:
        0 14px 35px
        rgba(0,0,0,.16);

    overflow:hidden;

}


/* ==========================================================
   HERO FLOATING ICONS
========================================================== */

.mc-tutor-floating-icons {

    position:absolute;

    inset:0;

    z-index:0;

    display:grid;

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

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

    align-items:center;

    justify-items:center;

    padding:
        18px
        28px;

    pointer-events:none;

}


.mc-tutor-floating-icons span {

    display:block;

    font-size:24px;

    opacity:.18;

    filter:saturate(.9);

    animation:
        mctutorFloat
        5s
        ease-in-out
        infinite;

}


.mc-tutor-floating-icons span:nth-child(2n) {

    animation-delay:.8s;

    opacity:.22;

}


.mc-tutor-floating-icons span:nth-child(3n) {

    animation-delay:1.5s;

    opacity:.15;

}


.mc-tutor-floating-icons span:nth-child(4n) {

    animation-delay:2.1s;

    opacity:.20;

}


.mc-tutor-floating-icons span:nth-child(5n) {

    animation-delay:2.8s;

    opacity:.17;

}


@keyframes mctutorFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-7px)
            rotate(3deg);

    }

}


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

.mc-tutor-hero-content h1 {

    position:relative;

    z-index:2;

    margin:0;

    font-size:
        clamp(
            2.3rem,
            4.2vw,
            3.65rem
        );

    font-weight:800;

    line-height:1.06;

    letter-spacing:-.035em;

    overflow:hidden;

}


/* ==========================================================
   HERO WHITE TITLE
   LEFT → RIGHT
========================================================== */

.mc-tutor-hero-title-main {

    display:block;

    color:#FFFFFF;

    animation:
        mctutorWhiteReveal
        1.25s
        cubic-bezier(.25,.8,.25,1)
        both;

}


/* ==========================================================
   HERO GOLD TITLE
   RIGHT → LEFT
========================================================== */

.mc-tutor-hero-title-highlight {

    display:block;

    margin-top:5px;

    color:#D4AF37;

    animation:
        mctutorGoldReveal
        1.25s
        cubic-bezier(.25,.8,.25,1)
        .35s
        both;

}


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

.mc-tutor-hero-content p {

    position:relative;

    z-index:2;

    max-width:620px;

    margin:
        14px
        auto
        0;

    color:
        rgba(255,255,255,.82);

    font-size:.86rem;

    line-height:1.65;

    animation:
        mctutorDescriptionReveal
        1.05s
        cubic-bezier(.25,.8,.25,1)
        .85s
        both;

}


/* ==========================================================
   HERO TEXT ANIMATION
========================================================== */

@keyframes mctutorWhiteReveal {

    0% {

        opacity:0;

        transform:
            translateX(-90px);

    }

    100% {

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes mctutorGoldReveal {

    0% {

        opacity:0;

        transform:
            translateX(90px);

    }

    100% {

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes mctutorDescriptionReveal {

    0% {

        opacity:0;

        transform:
            translateY(18px);

    }

    100% {

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   COMMON SECTION
========================================================== */

.mc-tutor-section {

    position:relative;

    padding:
        32px
        0;

}


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

.mc-tutor-section-heading {

    max-width:760px;

    margin:
        0
        auto
        18px;

    text-align:center;

}


.mc-tutor-section-number {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    margin-bottom:6px;

    border-radius:50%;

    background:
        rgba(212,175,55,.11);

    border:
        1px solid
        rgba(212,175,55,.25);

    color:#B98C14;

    font-size:.65rem;

    font-weight:800;

}


.mc-tutor-section-heading h2 {

    margin:0;

    color:#0A1946;

    font-size:
        clamp(
            1.95rem,
            3.4vw,
            2.85rem
        );

    font-weight:750;

    line-height:1.12;

    letter-spacing:-.025em;

}


.mc-tutor-section-heading p {

    max-width:650px;

    margin:
        7px
        auto
        0;

    color:#66758B;

    font-size:.84rem;

    line-height:1.6;

}


/* ==========================================================
   01. WHO CAN BECOME
========================================================== */

.mc-tutor-who {

    padding-top:28px;

    padding-bottom:30px;

}


.mc-tutor-who-grid {

    display:grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap:12px;

}


.mc-tutor-who-card {

    padding:
        21px
        20px;

    border:
        1px solid
        rgba(10,25,70,.08);

    border-radius:16px;

    background:#FFFFFF;

    box-shadow:
        0 8px 25px
        rgba(10,25,70,.05);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}


.mc-tutor-who-card:hover {

    transform:translateY(-4px);

    border-color:
        rgba(212,175,55,.30);

    box-shadow:
        0 14px 30px
        rgba(10,25,70,.08);

}


.mc-tutor-card-icon {

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:11px;

    border-radius:11px;

    background:
        rgba(212,175,55,.10);

    border:
        1px solid
        rgba(212,175,55,.22);

    color:#2867C7;

    font-size:.98rem;

}


.mc-tutor-who-card h3 {

    margin:0;

    color:#0A1946;

    font-size:.91rem;

    font-weight:720;

    line-height:1.35;

}


.mc-tutor-who-card p {

    margin:
        6px
        0
        0;

    color:#68788F;

    font-size:.74rem;

    line-height:1.58;

}


/* ==========================================================
   02. WHAT tutorS CAN TEACH
========================================================== */

.mc-tutor-teach {

    padding-top:30px;

    padding-bottom:30px;

    background:
        rgba(255,255,255,.34);

}


.mc-tutor-teach-layout {

    display:grid;

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

    gap:14px;

}


.mc-tutor-teach-block {

    padding:
        22px
        24px;

    border-radius:17px;

    border:
        1px solid
        rgba(10,25,70,.07);

    background:
        rgba(255,255,255,.82);

}


.mc-tutor-teach-label {

    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:14px;

    color:#0A1946;

    font-size:.88rem;

    font-weight:720;

}


.mc-tutor-teach-label i {

    color:#D4AF37;

    font-size:1rem;

}


.mc-tutor-pill-group {

    display:flex;

    flex-wrap:wrap;

    gap:7px;

}


.mc-tutor-pill {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
        7px
        11px;

    border-radius:999px;

    border:
        1px solid
        rgba(10,25,70,.09);

    background:#FFFFFF;

    color:#31425E;

    font-size:.70rem;

    font-weight:650;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;

}


.mc-tutor-pill:hover {

    border-color:
        rgba(212,175,55,.45);

    background:
        rgba(212,175,55,.08);

    color:#0A1946;

}


/* ==========================================================
   03. HOW JOINING WORKS
========================================================== */

.mc-tutor-joining {

    padding-top:30px;

    padding-bottom:30px;

}


.mc-tutor-steps {

    display:grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap:0;

    position:relative;

}


.mc-tutor-steps::before {

    content:"";

    position:absolute;

    top:22px;

    left:11%;

    right:11%;

    height:1px;

    background:
        rgba(212,175,55,.32);

    pointer-events:none;

}


.mc-tutor-step {

    position:relative;

    z-index:1;

    padding:
        0
        10px;

    text-align:center;

}


.mc-tutor-step-number {

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:
        0
        auto
        11px;

    border-radius:50%;

    background:#0A1946;

    border:
        3px solid
        #FFFFFF;

    box-shadow:
        0 0 0 1px
        rgba(212,175,55,.45);

    color:#D4AF37;

    font-size:.68rem;

    font-weight:800;

}


.mc-tutor-step-content h3 {

    margin:0;

    color:#0A1946;

    font-size:.88rem;

    font-weight:720;

}


.mc-tutor-step-content p {

    max-width:210px;

    margin:
        5px
        auto
        0;

    color:#68788F;

    font-size:.72rem;

    line-height:1.55;

}


/* ==========================================================
   04. tutor BENEFITS
========================================================== */

.mc-tutor-benefits {

    padding-top:30px;

    padding-bottom:30px;

}


.mc-tutor-benefit-grid {

    display:grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap:12px;

}


.mc-tutor-benefit-card {

    padding:
        21px
        20px;

    border:
        1px solid
        rgba(10,25,70,.08);

    border-radius:16px;

    background:#FFFFFF;

    box-shadow:
        0 8px 25px
        rgba(10,25,70,.05);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}


.mc-tutor-benefit-card:hover {

    transform:translateY(-4px);

    border-color:
        rgba(212,175,55,.30);

    box-shadow:
        0 14px 30px
        rgba(10,25,70,.08);

}


.mc-tutor-benefit-icon {

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:11px;

    border-radius:11px;

    background:
        rgba(212,175,55,.10);

    border:
        1px solid
        rgba(212,175,55,.22);

    color:#2867C7;

    font-size:.98rem;

}


.mc-tutor-benefit-card h3 {

    margin:0;

    color:#0A1946;

    font-size:.91rem;

    font-weight:720;

    line-height:1.35;

}


.mc-tutor-benefit-card p {

    margin:
        6px
        0
        0;

    color:#68788F;

    font-size:.74rem;

    line-height:1.58;

}


/* ==========================================================
   05. ELIGIBILITY
========================================================== */

.mc-tutor-eligibility {

    padding-top:30px;

    padding-bottom:30px;

    background:
        rgba(255,255,255,.34);

}


.mc-tutor-eligibility-grid {

    display:grid;

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

    gap:14px;

}


.mc-tutor-eligibility-card {

    padding:
        23px
        25px;

    border-radius:17px;

    border:
        1px solid
        rgba(10,25,70,.07);

    background:#FFFFFF;

    box-shadow:
        0 8px 25px
        rgba(10,25,70,.045);

}


.mc-tutor-eligibility-header {

    display:flex;

    align-items:center;

    gap:11px;

    margin-bottom:15px;

}


.mc-tutor-eligibility-icon {

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    border-radius:11px;

    background:
        rgba(212,175,55,.10);

    border:
        1px solid
        rgba(212,175,55,.22);

    color:#2867C7;

}


.mc-tutor-eligibility-header h3 {

    margin:0;

    color:#0A1946;

    font-size:1rem;

    font-weight:720;

}


.mc-tutor-eligibility-card ul {

    list-style:none;

    padding:0;

    margin:0;

}


.mc-tutor-eligibility-card li {

    display:flex;

    align-items:flex-start;

    gap:9px;

    padding:
        7px
        0;

    color:#5F6F86;

    font-size:.77rem;

    line-height:1.55;

    border-bottom:
        1px solid
        rgba(10,25,70,.055);

}


.mc-tutor-eligibility-card li:last-child {

    border-bottom:0;

}


.mc-tutor-eligibility-card li i {

    flex:0 0 auto;

    margin-top:3px;

    color:#D4AF37;

    font-size:.72rem;

}


/* ==========================================================
   06. FINAL CTA
========================================================== */

.mc-tutor-final-section {

    padding:
        18px
        0
        30px;

}


.mc-tutor-final-box {

    position:relative;

    overflow:hidden;

    max-width:1100px;

    margin:0 auto;

    padding:
        42px
        30px;

    border-radius:21px;

    background:
        linear-gradient(
            135deg,
            #07183D 0%,
            #0A1946 52%,
            #173477 100%
        );

    text-align:center;

    box-shadow:
        0 16px 38px
        rgba(10,25,70,.17);

}


.mc-tutor-final-box::before {

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    top:-270px;

    left:-80px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.10) 0%,
            transparent 70%
        );

    pointer-events:none;

}


.mc-tutor-final-box::after {

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-170px;

    bottom:-300px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.07) 0%,
            transparent 70%
        );

    pointer-events:none;

}


/* ==========================================================
   CTA FLOATING ICONS
========================================================== */

.mc-tutor-cta-icons {

    position:absolute;

    inset:0;

    display:grid;

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

    align-items:center;

    padding:
        15px
        28px;

    pointer-events:none;

}


.mc-tutor-cta-icons span {

    color:#FFFFFF;

    font-size:20px;

    opacity:.12;

    animation:
        mctutorCtaFloat
        5.5s
        ease-in-out
        infinite;

}


.mc-tutor-cta-icons span:nth-child(2n) {

    opacity:.17;

    animation-delay:.7s;

}


.mc-tutor-cta-icons span:nth-child(3n) {

    opacity:.10;

    animation-delay:1.4s;

}


.mc-tutor-cta-icons span:nth-child(4n) {

    opacity:.15;

    animation-delay:2s;

}


@keyframes mctutorCtaFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


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

.mc-tutor-final-content {

    position:relative;

    z-index:2;

}


.mc-tutor-final-icon {

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:
        0
        auto
        13px;

    border-radius:50%;

    background:
        rgba(212,175,55,.12);

    border:
        1px solid
        rgba(212,175,55,.30);

    color:#D4AF37;

    font-size:1rem;

}


.mc-tutor-final-box h2 {

    margin:0;

    color:#FFFFFF;

    font-size:
        clamp(
            1.95rem,
            3.2vw,
            2.75rem
        );

    font-weight:760;

    line-height:1.12;

    letter-spacing:-.025em;

}


.mc-tutor-final-box p {

    max-width:650px;

    margin:
        10px
        auto
        20px;

    color:
        rgba(255,255,255,.80);

    font-size:.80rem;

    line-height:1.62;

}


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

.mc-tutor-cta-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-width:185px;

    padding:
        12px
        22px;

    border:
        1px solid
        #2867C7;

    border-radius:8px;

    background:#2867C7;

    color:#FFFFFF;

    font-size:.82rem;

    font-weight:750;

    line-height:1;

    text-decoration:none;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.18);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.mc-tutor-cta-button:hover {

    transform:translateY(-2px);

    background:#3475D2;

    color:#FFFFFF;

    box-shadow:
        0 11px 25px
        rgba(0,0,0,.23);

}


.mc-tutor-cta-button i {

    font-size:.88rem;

}


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

@media (max-width:991.98px) {


    .mc-tutor-hero-content {

        max-width:
            calc(100% - 30px);

    }


    .mc-tutor-who-grid {

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

    }


    .mc-tutor-benefit-grid {

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

    }


    .mc-tutor-steps {

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

        gap:
            25px
            10px;

    }


    .mc-tutor-steps::before {

        display:none;

    }


    .mc-tutor-teach-layout {

        gap:12px;

    }

}


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

@media (max-width:767.98px) {


    .mc-tutor-hero {

        padding:
            20px
            0
            22px;

    }


    .mc-tutor-hero-content {

        max-width:none;

        padding:
            30px
            20px;

        border-radius:16px;

    }


    .mc-tutor-hero-content h1 {

        font-size:
            clamp(
                2rem,
                9vw,
                2.7rem
            );

    }


    .mc-tutor-hero-title-highlight {

        margin-top:4px;

    }


    .mc-tutor-hero-content p {

        margin-top:14px;

        font-size:.78rem;

        line-height:1.6;

    }


    .mc-tutor-floating-icons {

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

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

        padding:
            12px
            14px;

    }


    .mc-tutor-floating-icons span {

        font-size:19px;

    }


    /* ----------------------------------------------
       COMMON MOBILE SECTION SPACING
    ---------------------------------------------- */

    .mc-tutor-section {

        padding:
            25px
            0;

    }


    .mc-tutor-section-heading {

        margin-bottom:17px;

    }


    .mc-tutor-section-heading h2 {

        font-size:1.95rem;

    }


    .mc-tutor-section-heading p {

        margin-top:6px;

        font-size:.79rem;

    }


    /* ----------------------------------------------
       WHO
    ---------------------------------------------- */

    .mc-tutor-who {

        padding-top:23px;

        padding-bottom:25px;

    }


    .mc-tutor-who-grid {

        grid-template-columns:1fr;

        gap:10px;

    }


    .mc-tutor-who-card {

        padding:
            19px;

    }


    /* ----------------------------------------------
       TEACH
    ---------------------------------------------- */

    .mc-tutor-teach {

        padding-top:25px;

        padding-bottom:25px;

    }


    .mc-tutor-teach-layout {

        grid-template-columns:1fr;

        gap:10px;

    }


    .mc-tutor-teach-block {

        padding:
            19px;

    }


    .mc-tutor-pill {

        padding:
            7px
            10px;

        font-size:.67rem;

    }


    /* ----------------------------------------------
       JOINING
    ---------------------------------------------- */

    .mc-tutor-joining {

        padding-top:25px;

        padding-bottom:25px;

    }


    .mc-tutor-steps {

        grid-template-columns:1fr;

        gap:18px;

    }


    .mc-tutor-step {

        display:grid;

        grid-template-columns:
            48px
            1fr;

        gap:13px;

        text-align:left;

        padding:
            0
            5px;

    }


    .mc-tutor-step-number {

        margin:0;

    }


    .mc-tutor-step-content p {

        margin:
            4px
            0
            0;

    }


    /* ----------------------------------------------
       BENEFITS
    ---------------------------------------------- */

    .mc-tutor-benefits {

        padding-top:25px;

        padding-bottom:25px;

    }


    .mc-tutor-benefit-grid {

        grid-template-columns:1fr;

        gap:10px;

    }


    .mc-tutor-benefit-card {

        padding:
            19px;

    }


    /* ----------------------------------------------
       ELIGIBILITY
    ---------------------------------------------- */

    .mc-tutor-eligibility {

        padding-top:25px;

        padding-bottom:25px;

    }


    .mc-tutor-eligibility-grid {

        grid-template-columns:1fr;

        gap:10px;

    }


    .mc-tutor-eligibility-card {

        padding:
            20px
            19px;

    }


    /* ----------------------------------------------
       CTA
    ---------------------------------------------- */

    .mc-tutor-final-section {

        padding:
            15px
            0
            25px;

    }


    .mc-tutor-final-box {

        padding:
            34px
            18px;

        border-radius:16px;

    }


    .mc-tutor-cta-icons {

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

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

        padding:
            12px
            15px;

    }


    .mc-tutor-cta-icons span {

        font-size:18px;

    }


    .mc-tutor-final-box h2 {

        font-size:1.95rem;

    }


    .mc-tutor-final-box p {

        margin-top:9px;

        margin-bottom:19px;

        font-size:.76rem;

    }


    .mc-tutor-cta-button {

        min-width:170px;

        padding:
            11px
            18px;

        font-size:.80rem;

    }

}


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

@media (max-width:480px) {


    .mc-tutor-hero {

        padding:
            17px
            0
            20px;

    }


    .mc-tutor-hero-content {

        padding:
            27px
            17px;

    }


    .mc-tutor-hero-content h1 {

        font-size:
            2.25rem;

    }


    .mc-tutor-section {

        padding:
            23px
            0;

    }


    .mc-tutor-who {

        padding-top:21px;

        padding-bottom:23px;

    }


    .mc-tutor-teach,
    .mc-tutor-joining,
    .mc-tutor-benefits,
    .mc-tutor-eligibility {

        padding-top:23px;

        padding-bottom:23px;

    }


    .mc-tutor-who-card,
    .mc-tutor-teach-block,
    .mc-tutor-benefit-card {

        padding:
            18px;

    }


    .mc-tutor-eligibility-card {

        padding:
            19px
            17px;

    }


    .mc-tutor-final-box {

        padding:
            30px
            16px;

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion:reduce) {

    .mc-tutor-hero-title-main,
    .mc-tutor-hero-title-highlight,
    .mc-tutor-hero-content p,
    .mc-tutor-floating-icons span,
    .mc-tutor-cta-icons span {

        animation:none;

    }

}