/* ========================================
   INVITED - LEARN
======================================== */

:root{
    --navy:#021018;
    --white:#ffffff;
}

body{
    background:var(--navy);
    color:var(--white);
}



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

.hero{

    min-height:85vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:140px 20px 80px;
}

.hero span{

    font-size:.85rem;

    letter-spacing:8px;

    opacity:.55;
}

.hero h1{

    margin:25px 0;

    font-family:"Cormorant Garamond",serif;

    font-size:5.8rem;

    font-weight:500;

    line-height:1.1;
}

.hero p{

    max-width:760px;

    font-size:1.1rem;

    line-height:2;

    opacity:.8;
}



/* ========================================
   COURSES
======================================== */

.courses{

    max-width:1300px;

    margin:100px auto 180px;

    padding:0 70px;

    display:grid;

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

    gap:35px;
}

.course{

    padding:55px 45px;

    border:1px solid rgba(255,255,255,.12);

    transition:.4s;

    display:flex;

    flex-direction:column;
}

.course:hover{

    transform:translateY(-8px);

    border-color:rgba(255,255,255,.35);

    background:rgba(255,255,255,.03);
}

.course span{

    font-size:.8rem;

    letter-spacing:5px;

    opacity:.45;
}

.course h2{

    margin:22px 0;

    font-family:"Cormorant Garamond",serif;

    font-size:2.5rem;

    font-weight:500;
}

.course p{

    line-height:2;

    opacity:.8;

    flex:1;

    margin-bottom:40px;
}

.course a{

    display:inline-block;

    width:fit-content;

    padding:14px 32px;

    border:1px solid rgba(255,255,255,.25);

    color:#fff;

    letter-spacing:2px;

    transition:.3s;
}

.course a:hover{

    background:#fff;

    color:#021018;
}



/* ========================================
   ENDING
======================================== */

.ending{

    text-align:center;

    padding:0 20px 220px;
}

.ending h2{

    font-family:"Cormorant Garamond",serif;

    font-size:4rem;

    font-weight:500;

    margin-bottom:25px;
}

.ending p{

    opacity:.75;

    margin-bottom:55px;

    font-size:1.05rem;
}

.cta{

    display:inline-block;

    padding:18px 46px;

    border:1px solid rgba(255,255,255,.35);

    color:#fff;

    letter-spacing:2px;

    transition:.35s;
}

.cta:hover{

    background:#fff;

    color:#021018;
}



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

@media (max-width:900px){

    .hero{

        min-height:70vh;

        padding:120px 25px 60px;
    }

    .hero h1{

        font-size:3.5rem;
    }

    .hero p{

        font-size:1rem;
    }

    .courses{

        grid-template-columns:1fr;

        padding:0 25px;

        margin:80px auto 120px;
    }

    .course{

        padding:40px 30px;
    }

    .course h2{

        font-size:2.2rem;
    }

    .ending{

        padding:0 25px 140px;
    }

    .ending h2{

        font-size:2.8rem;
    }

}