/* =========================================================
   EDUCATION LANGUAGES
========================================================= */

.bilin-education-languages-page{
    background:#fffdf9;
}


/* =========================================================
   HERO
========================================================= */

.education-languages-hero{
    position:relative;
    overflow:hidden;
    padding:105px 0 95px;
    background:
        radial-gradient(circle at 82% 35%, rgba(0,143,114,.12), transparent 32%),
        radial-gradient(circle at 12% 15%, rgba(240,90,40,.08), transparent 28%),
        #fffdf9;
}

.education-languages-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
    align-items:center;
    gap:70px;
}

.education-languages-hero-content{
    position:relative;
    z-index:2;
}

.education-languages-eyebrow{
    display:inline-flex;
    align-items:center;
    margin-bottom:20px;
    padding:7px 15px;
    background:#e1f4ef;
    color:#00745f;
    border:1px solid #a9ddd2;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
}

.education-languages-hero h1{
    margin:0 0 25px;
    color:#16324f;
    font-size:clamp(36px,5vw,62px);
    line-height:1.45;
    font-weight:800;
}

.education-languages-hero h1 span{
    display:block;
    color:#008f72;
}

.education-languages-hero-content > p{
    max-width:650px;
    margin:0 0 32px;
    color:#555f68;
    font-size:18px;
    line-height:2.15;
}

.education-languages-hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
}

.education-languages-primary-button,
.education-languages-secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:12px 26px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.education-languages-primary-button{
    background:#f05a28;
    color:#ffffff;
    box-shadow:0 8px 20px rgba(240,90,40,.18);
}

.education-languages-primary-button:hover{
    background:#d94b20;
    color:#ffffff;
    transform:translateY(-2px);
    box-shadow:0 11px 25px rgba(240,90,40,.23);
}

.education-languages-secondary-button{
    background:#ffffff;
    color:#16324f;
    border:1px solid #ddd2c2;
}

.education-languages-secondary-button:hover{
    background:#f7f0e7;
    color:#16324f;
    border-color:#cdbda9;
    transform:translateY(-2px);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.education-languages-hero-visual{
    position:relative;
    min-height:430px;
}

.education-languages-hero-glow{
    position:absolute;
    top:50%;
    right:50%;
    width:330px;
    height:330px;
    transform:translate(50%,-50%);
    background:rgba(0,143,114,.13);
    border-radius:50%;
    filter:blur(12px);
}

.education-languages-hero-orbit{
    position:absolute;
    top:50%;
    right:50%;
    border:1px solid rgba(0,143,114,.18);
    border-radius:50%;
    transform:translate(50%,-50%);
}

.education-languages-hero-orbit-one{
    width:360px;
    height:360px;
}

.education-languages-hero-orbit-two{
    width:470px;
    height:470px;
    border-color:rgba(240,90,40,.12);
}

.education-languages-hero-globe{
    position:absolute;
    top:50%;
    right:50%;
    width:230px;
    height:230px;
    transform:translate(50%,-50%);
    overflow:hidden;
    border-radius:50%;
    background:
        radial-gradient(circle at 35% 30%, #ffffff, #e5f5f1 55%, #c7e7df);
    border:8px solid rgba(255,255,255,.9);
    box-shadow:
        0 25px 60px rgba(22,50,79,.15),
        inset 0 0 35px rgba(0,143,114,.10);
}

.education-language-globe-line{
    position:absolute;
    border:1px solid rgba(0,143,114,.23);
    border-radius:50%;
}

.education-language-globe-line-one{
    top:35px;
    right:42px;
    width:145px;
    height:145px;
}

.education-language-globe-line-two{
    top:-5px;
    right:82px;
    width:65px;
    height:235px;
}

.education-language-globe-line-three{
    top:78px;
    right:-5px;
    width:235px;
    height:70px;
}

.education-language-globe-mark{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    background:#ffffff;
    color:#16324f;
    border:1px solid #dceee9;
    border-radius:50%;
    font-weight:800;
    box-shadow:0 8px 20px rgba(22,50,79,.10);
}

.education-language-globe-mark-one{
    top:38px;
    right:34px;
}

.education-language-globe-mark-two{
    top:105px;
    right:88px;
    background:#f05a28;
    color:#ffffff;
    border-color:#f05a28;
}

.education-language-globe-mark-three{
    bottom:28px;
    left:35px;
}

.education-language-floating-card{
    position:absolute;
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 15px;
    background:#ffffff;
    border:1px solid #eee5d8;
    border-radius:13px;
    box-shadow:0 12px 30px rgba(22,50,79,.10);
}

.education-language-floating-card span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    background:#e1f4ef;
    color:#00745f;
    border-radius:10px;
    font-size:12px;
    font-weight:800;
}

.education-language-floating-card strong{
    color:#16324f;
    font-size:14px;
}

.education-language-floating-card-one{
    top:50px;
    right:8px;
}

.education-language-floating-card-two{
    bottom:58px;
    right:10px;
}

.education-language-floating-card-three{
    bottom:28px;
    left:15px;
}

.education-language-floating-card-three span{
    background:#fff0e9;
    color:#d94b20;
}

.education-language-hero-dot{
    position:absolute;
    width:9px;
    height:9px;
    border-radius:50%;
}

.education-language-hero-dot-one{
    top:28px;
    left:100px;
    background:#f05a28;
}

.education-language-hero-dot-two{
    top:145px;
    left:25px;
    background:#008f72;
}

.education-language-hero-dot-three{
    bottom:85px;
    right:115px;
    background:#f2a900;
}


/* =========================================================
   INTRO
========================================================= */

.education-languages-intro{
    padding:90px 0 35px;
    background:#ffffff;
}

.education-languages-section-heading{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

.education-languages-section-eyebrow{
    display:inline-block;
    margin-bottom:12px;
    color:#f05a28;
    font-size:14px;
    font-weight:800;
}

.education-languages-section-heading h2{
    margin:0 0 18px;
    color:#16324f;
    font-size:clamp(28px,4vw,42px);
    line-height:1.6;
}

.education-languages-section-heading p{
    margin:0;
    color:#626b73;
    font-size:17px;
    line-height:2.1;
}


/* =========================================================
   LANGUAGE LIST
========================================================= */

.education-languages-list{
    padding:45px 0 105px;
    background:#ffffff;
}

.education-languages-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
}

.education-language-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:265px;
    padding:25px;
    overflow:hidden;
    background:#fffdf9;
    border:1px solid #eee5d8;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(22,50,79,.055);
    text-decoration:none;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background-color .3s ease;
}

.education-language-card::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:4px;
    background:#008f72;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .3s ease;
}

.education-language-card:hover{
    transform:translateY(-7px);
    background:#ffffff;
    border-color:#d9cbbb;
    box-shadow:0 18px 42px rgba(22,50,79,.11);
    text-decoration:none;
}

.education-language-card:hover::before{
    transform:scaleX(1);
}

.education-language-card-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    margin-bottom:22px;
    background:#e1f4ef;
    color:#00745f;
    border:1px solid #b8e0d7;
    border-radius:17px;
}

.education-language-card-icon span{
    font-size:18px;
    font-weight:800;
    letter-spacing:.4px;
}

.education-language-card-content{
    display:flex;
    flex:1;
    flex-direction:column;
}

.education-language-card h3{
    margin:0 0 10px;
    color:#16324f;
    font-size:21px;
    line-height:1.6;
}

.education-language-card p{
    margin:0;
    color:#69727a;
    font-size:14px;
    line-height:1.9;
}

.education-language-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    padding-top:20px;
}

.education-language-program-count{
    color:#008f72;
    font-size:13px;
    font-weight:700;
}

.education-language-card-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    width:35px;
    height:35px;
    background:#fff0e9;
    color:#f05a28;
    border-radius:10px;
    font-size:17px;
    transition:
        background-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.education-language-card:hover .education-language-card-arrow{
    background:#f05a28;
    color:#ffffff;
    transform:translateX(-3px);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.education-languages-empty{
    max-width:700px;
    margin:0 auto;
    padding:60px 30px;
    text-align:center;
    background:#fbf7f0;
    border:1px solid #eadfce;
    border-radius:22px;
}

.education-languages-empty-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:70px;
    height:70px;
    margin:0 auto 20px;
    background:#e1f4ef;
    color:#008f72;
    border-radius:18px;
    font-size:25px;
}

.education-languages-empty h2{
    margin:0 0 12px;
    color:#16324f;
}

.education-languages-empty p{
    margin:0;
    color:#69727a;
    line-height:2;
}


/* =========================================================
   FINAL CTA
========================================================= */

.education-languages-final-cta{
    padding:0 0 110px;
    background:#ffffff;
}

.education-languages-final-cta-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:45px 50px;
    background:
        radial-gradient(circle at 90% 20%, rgba(0,143,114,.14), transparent 35%),
        linear-gradient(135deg,#fbf7f0,#ffffff);
    border:1px solid #eadfce;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(22,50,79,.07);
}

.education-languages-final-cta-content{
    max-width:720px;
}

.education-languages-final-cta-eyebrow{
    display:inline-block;
    margin-bottom:10px;
    color:#f05a28;
    font-size:14px;
    font-weight:800;
}

.education-languages-final-cta-content h2{
    margin:0 0 12px;
    color:#16324f;
    font-size:clamp(25px,3vw,36px);
    line-height:1.6;
}

.education-languages-final-cta-content p{
    margin:0;
    color:#626b73;
    line-height:2;
}

.education-languages-final-cta-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:13px 28px;
    background:#f05a28;
    color:#ffffff;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    white-space:nowrap;
    box-shadow:0 8px 20px rgba(240,90,40,.18);
    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.education-languages-final-cta-button:hover{
    background:#d94b20;
    color:#ffffff;
    transform:translateY(-2px);
    box-shadow:0 11px 25px rgba(240,90,40,.23);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .education-languages-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .education-languages-hero-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .education-languages-hero-content{
        text-align:center;
    }

    .education-languages-hero-content > p{
        margin-left:auto;
        margin-right:auto;
    }

    .education-languages-hero-actions{
        justify-content:center;
    }

    .education-languages-hero-visual{
        max-width:560px;
        width:100%;
        margin:0 auto;
    }

    .education-languages-final-cta-box{
        flex-direction:column;
        align-items:flex-start;
    }

}


@media(max-width:700px){

    .education-languages-hero{
        padding:75px 0 65px;
    }

    .education-languages-hero h1{
        font-size:36px;
    }

    .education-languages-hero-content > p{
        font-size:16px;
    }

    .education-languages-hero-visual{
        min-height:350px;
        transform:scale(.9);
        transform-origin:center;
        margin-top:-10px;
        margin-bottom:-20px;
    }

    .education-languages-hero-globe{
        width:190px;
        height:190px;
    }

    .education-languages-hero-orbit-one{
        width:300px;
        height:300px;
    }

    .education-languages-hero-orbit-two{
        width:390px;
        height:390px;
    }

    .education-language-floating-card{
        padding:9px 11px;
    }

    .education-language-floating-card-one{
        top:30px;
        right:0;
    }

    .education-language-floating-card-two{
        bottom:35px;
        right:0;
    }

    .education-language-floating-card-three{
        bottom:15px;
        left:0;
    }

    .education-languages-intro{
        padding:65px 0 25px;
    }

    .education-languages-list{
        padding:35px 0 75px;
    }

    .education-languages-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .education-language-card{
        min-height:225px;
    }

    .education-languages-final-cta{
        padding-bottom:75px;
    }

    .education-languages-final-cta-box{
        padding:32px 24px;
        border-radius:20px;
    }

    .education-languages-final-cta-action{
        width:100%;
    }

    .education-languages-final-cta-button{
        width:100%;
    }

}


@media(max-width:480px){

    .education-languages-hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .education-languages-primary-button,
    .education-languages-secondary-button{
        width:100%;
    }

    .education-languages-hero-visual{
        min-height:315px;
        transform:scale(.78);
        margin-top:-30px;
        margin-bottom:-55px;
    }

    .education-language-card{
        padding:22px;
    }

}