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

.courses-section{

    padding:100px 0;

    background:#f8f9fc;

}

.courses-section .container{

    max-width:1500px;

}

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

.course-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

    max-width:1150px;

    margin-left:auto;

    margin-right:auto;

}

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

.course-card{

    background:#ffffff;

    min-height:320px;

    padding:0 30px 35px;

    border-radius:18px;

    border:2px solid #cfd9e8;

    box-shadow:0 12px 30px rgba(0,33,71,.08);

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

}

.course-card:hover{

    transform:translateY(-10px);

    border-color:#ffb400;

    box-shadow:0 20px 45px rgba(0,33,71,.15);

}

.course-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#ffb400;

    transition:.4s;

}

.course-card:hover::before{

    width:100%;

}

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

.course-image{

    width:calc(100% + 60px);

    height:180px;

    margin:0 -30px 25px;

    overflow:hidden;

    border-radius:18px 18px 0 0;

}

.course-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s ease;

}

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

    transform:scale(1.08);

}

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

.course-card h3{

    font-size:18px;

    line-height:1.4;

    min-height:80px;

}

.course-desc{

    font-size:12px;

    line-height:1.7;

    color:#666;

    margin-bottom:25px;

    min-height:50px;

}

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

.course-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    background:transparent;

    color:#002147;

    border:2px solid #002147;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.course-btn i{

    transition:.35s;

}

.course-btn:hover{

    background:#ffb400;

    border-color:#ffb400;

    color:#002147;

    transform:translateY(-3px);

}

.course-btn:hover i{

    transform:translateX(4px);

}

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

.section-title{

    max-width:700px;

    margin:0 auto 60px;

    text-align:center;

}

.section-title span{

    display:inline-block;

    padding:8px 22px;

    background:#fff4d6;

    color:#ffb400;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:20px;

}

.section-title h2{

    font-size:48px;

    font-weight:800;

    line-height:1.2;

    color:#002147;

    margin-bottom:20px;

}

.section-title p{

    font-size:18px;

    line-height:1.8;

    color:#666666;

    max-width:700px;

    margin:0 auto;

}