/* =========================================================
   DESIGNED AROUND YOUR SCHOOL
========================================================= */

.school-fit{
    position:relative;

    padding:120px 24px 90px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(37,99,235,.06),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );
}

.school-fit-container{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1500px;

    margin:auto;
}


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

.school-fit-header{
    max-width:1050px;

    margin:0 auto 70px;

    text-align:center;
}

.school-fit-tag{
    display:inline-flex;

    align-items:center;
    gap:10px;

    padding:10px 23px;

    margin-bottom:18px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #1747c9,
            #1557e8
        );

    color:#fff;

    font-size:13px;
    font-weight:800;

    letter-spacing:1.1px;

    box-shadow:
        0 10px 25px rgba(37,99,235,.18);
}

.school-fit-tag svg{
    width:17px;
    height:17px;
}

.school-fit-header h2{
    margin:0;

    color:#081B4B;

    font-size:
        clamp(48px,5vw,72px);

    line-height:1.05;

    letter-spacing:-3px;

    font-weight:900;
}

.school-fit-header h2 span{
    color:#1557E8;
}

.school-fit-line{
    width:58px;
    height:4px;

    margin:18px auto 0;

    border-radius:50px;

    background:#2563EB;
}

.school-fit-header p{
    max-width:900px;

    margin:20px auto 0;

    color:#475569;

    font-size:18px;

    line-height:1.65;
}


/* =========================================================
   JOURNEY
========================================================= */

.school-fit-journey{
    display:grid;

    grid-template-columns:
        220px
        90px
        minmax(180px,1fr)
        55px
        minmax(180px,1fr)
        55px
        minmax(180px,1fr)
        90px
        220px;

    align-items:center;

    gap:5px;
}


/* =========================================================
   SCHOOL CARDS
========================================================= */

.journey-school{
    min-height:410px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    padding:35px 24px;

    text-align:center;

    border-radius:24px;

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

    backdrop-filter:blur(12px);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.journey-start{
    border:
        1px solid rgba(37,99,235,.28);

    box-shadow:
        0 18px 45px rgba(37,99,235,.07);
}

.journey-result{
    position:relative;

    border:
        1px solid rgba(22,163,74,.30);

    background:
        linear-gradient(
            180deg,
            rgba(240,253,244,.65),
            rgba(255,255,255,.92)
        );

    box-shadow:
        0 18px 45px rgba(22,163,74,.07);
}

.journey-school:hover{
    transform:translateY(-6px);

    box-shadow:
        0 28px 60px rgba(15,23,42,.10);
}


/* SCHOOL ICON */

.journey-school-icon{
    width:110px;
    height:110px;

    margin-bottom:30px;

    display:flex;

    align-items:center;
    justify-content:center;

    color:#1557e8;
}

.journey-school-icon svg{
    width:100px;
    height:100px;

    stroke-width:1.45;
}

.journey-result .journey-school-icon{
    color:#159447;
}

.journey-school h3{
    margin:0 0 22px;

    color:#1557e8;

    font-size:24px;

    line-height:1.25;

    font-weight:900;
}

.journey-result h3{
    color:#16803c;
}

.journey-school p{
    margin:0;

    color:#081B4B;

    font-size:15px;

    line-height:1.7;

    font-weight:500;
}


/* STAR */

.journey-result-star{
    position:absolute;

    top:42px;

    color:#159447;
}

.journey-result-star svg{
    width:25px;
    height:25px;

    fill:currentColor;
}


/* =========================================================
   STEPS
========================================================= */

.journey-step{
    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;
}

.step-number{
    position:absolute;

    z-index:10;

    top:-17px;

    min-width:54px;

    padding:9px 13px;

    border-radius:10px;

    color:#fff;

    font-size:20px;
    font-weight:900;

    box-shadow:
        0 8px 20px rgba(15,23,42,.15);
}


/* STEP CIRCLE */

.step-circle{
    position:relative;

    width:165px;
    height:165px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:28px;

    border-radius:50%;

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

    box-shadow:
        inset 0 0 0 10px rgba(255,255,255,.7),
        0 15px 35px rgba(15,23,42,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.step-circle::before{
    content:"";

    position:absolute;

    inset:8px;

    border-radius:50%;

    border:7px solid currentColor;

    opacity:.28;
}


/* OUTER ORBIT */

.step-orbit{
    position:absolute;

    inset:-23px;

    border-radius:50%;

    border:
        1.5px dashed currentColor;

    opacity:.55;

    animation:
        fitOrbitRotate 18s linear infinite;
}

.step-orbit::before,
.step-orbit::after{
    content:"";

    position:absolute;

    width:9px;
    height:9px;

    border-radius:50%;

    background:currentColor;

    box-shadow:
        0 0 10px currentColor;
}

.step-orbit::before{
    left:8px;
    top:50%;
}

.step-orbit::after{
    right:8px;
    top:50%;
}


/* ICON */

.step-icon{
    position:relative;
    z-index:2;

    width:82px;
    height:82px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff;
}

.step-icon svg{
    width:53px;
    height:53px;

    stroke-width:1.7;
}


/* STEP TEXT */

.journey-step h3{
    margin:0;

    font-size:22px;

    line-height:1.2;

    font-weight:900;
}

.step-small-line{
    width:40px;
    height:3px;

    margin:12px auto 16px;

    border-radius:30px;

    background:currentColor;
}

.journey-step p{
    max-width:235px;

    margin:0 auto;

    color:#081B4B;

    font-size:14px;

    line-height:1.65;
}


/* =========================================================
   STEP COLORS
========================================================= */

.step-understand{
    color:#1557e8;
}

.step-understand .step-number{
    background:#1557e8;
}

.step-customize{
    color:#159447;
}

.step-customize .step-number{
    background:#159447;
}

.step-transform{
    color:#7353d9;
}

.step-transform .step-number{
    background:#7353d9;
}


/* =========================================================
   STEP HOVER
========================================================= */

.journey-step:hover .step-circle{
    transform:scale(1.055);

    box-shadow:
        inset 0 0 0 10px rgba(255,255,255,.75),
        0 22px 45px rgba(37,99,235,.13);
}

.journey-step:hover .step-icon{
    transform:scale(1.06);
}

.step-icon{
    transition:transform .3s ease;
}


/* =========================================================
   CONNECTORS
========================================================= */

.journey-connector{
    position:relative;

    display:flex;

    align-items:center;

    color:#2563EB;
}

.connector-line{
    width:100%;
    height:2px;

    border-top:
        2px dotted currentColor;

    opacity:.65;
}

.connector-dot{
    width:12px;
    height:12px;

    flex:0 0 12px;

    border-radius:50%;

    background:currentColor;

    box-shadow:
        0 0 0 5px rgba(37,99,235,.08);
}

.journey-connector svg{
    width:24px;
    height:24px;

    flex-shrink:0;
}

.connector-green{
    color:#159447;
}


/* BETWEEN STEPS */

.journey-arrow{
    display:flex;

    align-items:center;
    justify-content:center;

    color:#94A3B8;
}

.journey-arrow svg{
    width:38px;
    height:38px;

    stroke-width:1.8;
}


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

.school-fit-benefits{
    margin-top:55px;

    display:grid;

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

    padding:28px 20px;

    border-radius:24px;

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

    border:
        1px solid rgba(37,99,235,.10);

    box-shadow:
        0 18px 50px rgba(15,23,42,.06);
}

.fit-benefit{
    position:relative;

    display:grid;

    grid-template-columns:
        65px 1fr;

    gap:16px;

    align-items:start;

    padding:5px 25px;
}

.fit-benefit:not(:last-child){
    border-right:
        1px solid rgba(37,99,235,.15);
}

.fit-benefit-icon{
    width:58px;
    height:58px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#1557e8;

    background:#eef5ff;

    transition:
        transform .3s ease;
}

.fit-benefit:nth-child(2) .fit-benefit-icon,
.fit-benefit:nth-child(5) .fit-benefit-icon{
    color:#159447;

    background:#edf9f1;
}

.fit-benefit:nth-child(3) .fit-benefit-icon{
    color:#7353d9;

    background:#f2efff;
}

.fit-benefit-icon svg{
    width:29px;
    height:29px;
}

.fit-benefit:hover .fit-benefit-icon{
    transform:
        translateY(-3px)
        scale(1.07);
}

.fit-benefit h4{
    margin:2px 0 8px;

    color:#081B4B;

    font-size:15px;

    line-height:1.35;

    font-weight:800;
}

.fit-benefit p{
    margin:0;

    color:#475569;

    font-size:11px;

    line-height:1.6;
}


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

.school-fit-cta{
    margin-top:25px;

    text-align:center;
}

.school-fit-button{
    min-width:500px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:25px;

    padding:18px 32px;

    border-radius:999px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #1747c9,
            #0860f5
        );

    font-size:20px;
    font-weight:800;

    text-decoration:none;

    box-shadow:
        0 16px 35px rgba(37,99,235,.25);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.school-fit-button svg{
    width:27px;
    height:27px;

    transition:
        transform .3s ease;
}

.school-fit-button:hover{
    transform:translateY(-4px);

    box-shadow:
        0 22px 45px rgba(37,99,235,.32);
}

.school-fit-button:hover svg{
    transform:translateX(6px);
}


/* NOTE */

.school-fit-note{
    margin-top:24px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:18px;

    color:#081B4B;
}

.school-fit-note svg{
    width:24px;
    height:24px;

    color:#1557e8;
}

.school-fit-note strong{
    font-size:17px;
}

.note-dots{
    width:120px;

    border-top:
        3px dotted rgba(37,99,235,.55);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes fitOrbitRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   1250PX
========================================================= */

@media(max-width:1250px){

    .school-fit-journey{
        grid-template-columns:
            180px
            45px
            1fr
            35px
            1fr
            35px
            1fr
            45px
            180px;
    }

    .journey-school{
        min-height:390px;

        padding:
            30px 18px;
    }

    .step-circle{
        width:140px;
        height:140px;
    }

    .step-icon{
        width:70px;
        height:70px;
    }

    .step-icon svg{
        width:45px;
        height:45px;
    }

    .journey-step p{
        font-size:12px;
    }

    .fit-benefit{
        padding:
            5px 14px;

        grid-template-columns:
            52px 1fr;
    }

    .fit-benefit-icon{
        width:48px;
        height:48px;
    }

}


/* =========================================================
   992PX
========================================================= */

@media(max-width:992px){

    .school-fit{
        padding:
            95px 20px 75px;
    }

    .school-fit-header{
        margin-bottom:55px;
    }


    /* Journey becomes vertical */

    .school-fit-journey{
        max-width:650px;

        margin:auto;

        display:flex;

        flex-direction:column;

        gap:25px;
    }

    .journey-school{
        width:100%;

        min-height:auto;

        padding:
            35px 25px;
    }

    .journey-school-icon{
        width:80px;
        height:80px;

        margin-bottom:15px;
    }

    .journey-school-icon svg{
        width:70px;
        height:70px;
    }

    .journey-result-star{
        top:20px;
    }


    /* connectors hidden */

    .journey-connector{
        display:none;
    }


    /* arrows rotate */

    .journey-arrow{
        height:35px;

        transform:rotate(90deg);
    }


    /* steps */

    .journey-step{
        width:100%;

        padding:
            25px 20px;
    }

    .step-circle{
        width:160px;
        height:160px;
    }

    .journey-step p{
        max-width:450px;

        font-size:14px;
    }


    /* benefits */

    .school-fit-benefits{
        grid-template-columns:
            repeat(2,1fr);

        max-width:750px;

        margin:
            50px auto 0;
    }

    .fit-benefit{
        padding:
            20px 25px;
    }

    .fit-benefit:nth-child(even){
        border-right:0;
    }

    .fit-benefit:nth-child(5){
        grid-column:1/-1;

        max-width:350px;

        justify-self:center;

        border-right:0;
    }

}


/* =========================================================
   600PX
========================================================= */

@media(max-width:600px){

    .school-fit{
        padding:
            75px 14px 60px;
    }

    .school-fit-header{
        margin-bottom:45px;
    }

    .school-fit-tag{
        padding:
            8px 16px;

        font-size:10px;
    }

    .school-fit-header h2{
        font-size:36px;

        letter-spacing:-1.5px;
    }

    .school-fit-header p{
        font-size:14px;
    }


    /* SCHOOL */

    .journey-school{
        border-radius:20px;
    }

    .journey-school h3{
        font-size:21px;
    }

    .journey-school p{
        font-size:14px;
    }


    /* STEPS */

    .journey-step{
        padding:
            30px 10px;
    }

    .step-circle{
        width:145px;
        height:145px;
    }

    .step-number{
        top:12px;
    }

    .journey-step h3{
        font-size:20px;
    }

    .journey-step p{
        font-size:13px;
    }


    /* BENEFITS */

    .school-fit-benefits{
        grid-template-columns:1fr;

        padding:
            10px 18px;
    }

    .fit-benefit,
    .fit-benefit:nth-child(5){
        grid-column:auto;

        max-width:none;

        width:100%;

        border-right:0;

        border-bottom:
            1px solid rgba(37,99,235,.12);

        padding:
            20px 5px;
    }

    .fit-benefit:last-child{
        border-bottom:0;
    }

    .fit-benefit h4 br{
        display:none;
    }

    .fit-benefit p{
        font-size:11.5px;
    }


    /* CTA */

    .school-fit-button{
        width:100%;
        min-width:0;

        gap:12px;

        padding:
            17px 20px;

        font-size:16px;
    }

    .school-fit-button svg{
        width:22px;
        height:22px;
    }


    /* NOTE */

    .school-fit-note{
        gap:10px;
    }

    .school-fit-note strong{
        max-width:280px;

        font-size:13px;

        line-height:1.5;
    }

    .note-dots{
        width:35px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .step-orbit{
        animation:none;
    }

}