﻿.course-section{
    padding:80px 0;
    background:#f7f9fc;
}

.container{
    width:95%;
    max-width:1400px;
    margin:auto;
}

.course-header{
    text-align:center;
    margin-bottom:40px;
}

.course-header h2{
    font-size:42px;
    font-weight:700;
    color:#0f172a;
}

.course-header p{
    color:#64748b;
}

.course-filter{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:50px;
}

.cat-btn{
    display:inline-block;
    padding:12px 25px;
    border-radius:40px;
    background:#fff;
    color:#333;
    text-decoration:none;
    margin:5px;
    transition:.4s;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.cat-btn:hover{
    background:linear-gradient(
    135deg,
    #6C63FF,
    #4FD1C5);
    color:#fff;
}

.search-box{
    display:flex;
    gap:10px;
}

.search-input{
    width:260px;
    height:45px;
    border:none;
    border-radius:30px;
    padding:0 20px;
}

.search-btn{
    background:#6C63FF;
    color:#fff;
    border:none;
    padding:0 25px;
    border-radius:30px;
}

.course-grid{

    display:grid;

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

    gap:30px;

}

.course-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;

    box-shadow:
    0 10px 35px rgba(0,0,0,.08);

    transition:.4s;
}

.course-card:hover{
    transform:translateY(-10px);
}

.course-image{

    height:260px;

    overflow:hidden;

}
.course-content h3{

    font-size:24px;

    font-weight:700;

    min-height:65px;

}
.course-image img{
    width:100%;
    height:auto;
    display:block;
}

.course-card:hover img{
    transform:scale(1.08);
}

.course-content{
    padding:25px;
}

.course-meta{
    display:flex;
    justify-content:space-between;
    margin-bottom:15px;
    color:#6C63FF;
}

.course-content h3{
    font-size:28px;
    margin-bottom:15px;
}

.price{
    font-size:32px;
    font-weight:700;
    color:#2563eb;
    margin-bottom:15px;
}

.highlight{
    background:#eef4ff;
    padding:12px;
    border-radius:12px;
    margin-bottom:20px;
    color:#475569;
}

.enquire-btn{
    display:block;
    text-align:center;
    padding:14px;
    border-radius:50px;
    text-decoration:none;
    color:#fff;

    background:
    linear-gradient(
    135deg,
    #6C63FF,
    #4FD1C5);
}

.enquire-btn:hover{
    color:#fff;
}

@media(max-width:991px){

    .course-grid{

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

    }

}

/* Mobile */

@media(max-width:767px){

    .course-grid{

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

    }

}
    .course-badge{

    position:absolute;

    top:15px;
    left:15px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5722
    );

    color:#fff;

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    z-index:2;

}