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

.hero{

    padding:80px 0;

}

.hero .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.tag{

    display:inline-block;

    padding:7px 16px;

    border-radius:30px;

    background:#dbeafe;

    color:#1d4ed8;

    font-weight:700;

}

.hero h1{

    font-size:56px;

    margin:25px 0;

    line-height:1.15;

}

.hero p{

    font-size:20px;

    color:var(--text-light);

}

.hero-buttons{

    margin-top:35px;

    display:flex;

    gap:15px;

}

.hero iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

    border-radius:20px;

}

/* ====================================== */

section{

    padding:70px 0;

}

section h2{

    font-size:36px;

    margin-bottom:30px;

}

/* ====================================== */

.category-grid{

    display:grid;

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

    gap:25px;

}

.category-card{

    padding:35px;

    text-align:center;

    transition:.25s;

}

.category-card:hover{

    transform:translateY(-8px);

}

.category-card .icon{

    font-size:42px;

    margin-bottom:20px;

}

.category-card h3{

    font-size:22px;

}

/* ====================================== */

.featured-grid{

    display:grid;

    grid-template-columns:1.3fr .7fr;

    gap:35px;

}

.featured iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

    border-radius:18px;

}

.featured ul{

    margin:25px 0;

}

.featured li{

    margin-bottom:12px;

}

/* ====================================== */

.lesson-grid{

    display:grid;

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

    gap:30px;

}

.lesson-card{

    overflow:hidden;

}

.lesson-card img{

    aspect-ratio:16/9;

    object-fit:cover;

}

.lesson-card h3{

    padding:18px;

    font-size:22px;

}

.lesson-card p{

    padding:0 18px;

    color:var(--text-light);

}

.lesson-card a{

    display:block;

    padding:20px 18px;

    color:var(--primary);

    font-weight:700;

}

@media(max-width:1000px){

.hero .container{

grid-template-columns:1fr;

}

.featured-grid{

grid-template-columns:1fr;

}

.category-grid{

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

}

.lesson-grid{

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

}

}

@media(max-width:650px){

nav{

display:none;

}

.header-right input{

display:none;

}

.hero h1{

font-size:38px;

}

section h2{

font-size:30px;

}

.category-grid{

grid-template-columns:1fr;

}

.lesson-grid{

grid-template-columns:1fr;

}

}