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

.courses-section{

    padding:120px 0;

    background:#f8fafc;

    position:relative;

    overflow:hidden;

}

/*=========================================
SECTION TITLE
=========================================*/

.section-title{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}

.section-title span{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:#fff8e7;

    color:#d4af37;

    font-size:15px;

    font-weight:600;

    margin-bottom:20px;

}

.section-title h2{

    font-size:46px;

    color:#111;

    margin-bottom:18px;

    line-height:1.25;

}

.section-title p{

    color:#666;

    font-size:17px;

    line-height:1.8;

}

/*=========================================
GRID
=========================================*/

.courses-grid{

    display:grid;

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

    gap:30px;

}

/*=========================================
CARD
=========================================*/

.course-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.4s;

    position:relative;

}

.course-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 55px rgba(0,0,0,.12);

}

/*=========================================
IMAGE
=========================================*/

.course-image{

    position:relative;

    overflow:hidden;

}

.course-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.5s;

}

.course-card:hover .course-image img{

    transform:scale(1.08);

}

.course-badge{

    position:absolute;

    top:18px;

    left:18px;

    padding:8px 16px;

    background:#d4af37;

    color:#fff;

    font-size:13px;

    border-radius:30px;

    font-weight:600;

}

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

.course-content{

    padding:28px;

}

.course-content h3{

    font-size:24px;

    margin-bottom:15px;

    color:#111;

}

.course-content p{

    color:#666;

    font-size:15px;

    line-height:1.8;

    margin-bottom:20px;

}

.course-content ul{

    list-style:none;

    margin-bottom:25px;

}

.course-content ul li{

    margin-bottom:12px;

    color:#555;

    font-size:15px;

}

.course-content ul li i{

    color:#d4af37;

    margin-right:8px;

}

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

.course-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:14px;

    border-radius:50px;

    background:linear-gradient(135deg,#d4af37,#b8860b);

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.course-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(212,175,55,.35);

}

/*=========================================
BOTTOM BUTTON
=========================================*/

.course-bottom{

    text-align:center;

    margin-top:60px;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

    .courses-grid{

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

    }

}

@media(max-width:768px){

    .courses-section{

        padding:80px 0;

    }

    .section-title h2{

        font-size:34px;

    }

    .courses-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .section-title h2{

        font-size:28px;

    }

    .course-image img{

        height:220px;

    }

    .course-content{

        padding:22px;

    }

}