/*=========================================================
    YOG NAMASTE LMS
    COURSES PAGE
=========================================================*/

:root{

    --primary:#0b6e69;
    --secondary:#052a2a;
    --gold:#d4a017;
    --light:#f8f9fb;
    --white:#ffffff;
    --border:#e8ecef;
    --text:#555;
}


/*=========================================================
    PAGE HEADER
=========================================================*/

.course-page-header{

    background:
    linear-gradient(135deg,#052a2a,#0b6e69);

    color:#fff;

    padding:80px 0;

    text-align:center;
}

.course-page-header h1{

    font-size:52px;
    font-weight:700;
    margin-bottom:15px;
}

.course-page-header p{

    font-size:18px;
    opacity:.9;
}

.course-count{

    display:inline-block;

    margin-top:25px;

    background:rgba(255,255,255,.15);

    padding:10px 20px;

    border-radius:50px;

    font-size:15px;
}


/*=========================================================
    BODY
=========================================================*/

.course-page{

    background:#f6f8fb;

    padding:60px 0;
}


/*=========================================================
    FILTER
=========================================================*/

.filter-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 5px 20px rgba(0,0,0,.06);

    position:sticky;

    top:90px;
}

.filter-card h3{

    font-size:24px;

    margin-bottom:25px;

    font-weight:700;

    color:#052a2a;
}

.filter-card label{

    font-weight:600;

    margin-bottom:8px;

    display:block;

    color:#444;
}

.filter-card .form-control,
.filter-card .form-select{

    border-radius:10px;

    min-height:48px;

    border:1px solid #ddd;
}

.filter-card .form-control:focus,
.filter-card .form-select:focus{

    border-color:#0b6e69;

    box-shadow:0 0 0 .15rem rgba(11,110,105,.15);
}

.btn-search{

    width:100%;

    background:#0b6e69;

    color:#fff;

    border:none;

    height:48px;

    border-radius:10px;

    font-weight:600;
}

.btn-search:hover{

    background:#084f4b;

    color:#fff;
}

.btn-reset{

    width:100%;

    border-radius:10px;

    height:48px;
}


/*=========================================================
    SORT
=========================================================*/

.sort-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    flex-wrap:wrap;

    gap:15px;
}

.sort-bar h4{

    margin:0;

    font-size:26px;

    font-weight:700;

    color:#052a2a;
}

.sort-bar .form-select{

    width:230px;

    border-radius:10px;
}


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

.course-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;
}

.course-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);
}


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

.course-image{

    position:relative;

    overflow:hidden;

    height:220px;
}

.course-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;
}

.course-card:hover img{

    transform:scale(1.08);
}

.course-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#ff6b00;

    color:#fff;

    padding:6px 12px;

    border-radius:30px;

    font-size:11px;

    font-weight:700;
}

.featured{

    background:#ffc107;

    color:#222;
}


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

.course-content{

    padding:20px;
}

.course-level{

    color:#0b6e69;

    font-size:13px;

    font-weight:600;

    margin-bottom:8px;
}

.course-title{

    font-size:21px;

    font-weight:700;

    color:#222;

    line-height:1.5;

    min-height:65px;

    margin-bottom:12px;
}

.course-desc{

    color:#666;

    font-size:14px;

    line-height:1.7;

    height:72px;

    overflow:hidden;

    margin-bottom:15px;
}


/*=========================================================
    META
=========================================================*/

.course-meta{

    display:flex;

    justify-content:space-between;

    font-size:13px;

    color:#777;

    margin-bottom:15px;
}


/*=========================================================
    CERTIFICATE
=========================================================*/

.certificate-box{

    background:#f3fff7;

    border:1px solid #d7f0df;

    padding:8px;

    border-radius:8px;

    color:#0b6e69;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;
}


/*=========================================================
    PRICE
=========================================================*/

.price-box{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;
}

.new-price{

    font-size:30px;

    font-weight:700;

    color:#0b6e69;
}

.old-price{

    color:#999;

    text-decoration:line-through;
}


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

.btn-course{

    display:block;

    width:100%;

    background:linear-gradient(135deg,#0b6e69,#084f4b);

    color:#fff;

    text-align:center;

    padding:13px;

    border-radius:10px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;
}

.btn-course:hover{

    color:#fff;

    transform:translateY(-2px);
}


/*=========================================================
    EMPTY
=========================================================*/

.no-record{

    background:#fff;

    padding:80px 20px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 5px 25px rgba(0,0,0,.06);
}

.no-record i{

    font-size:70px;

    color:#ccc;

    margin-bottom:20px;
}

.no-record h3{

    font-size:28px;

    margin-bottom:15px;
}


/*=========================================================
    PAGING
=========================================================*/

.pagination-box{

    margin-top:50px;

    display:flex;

    justify-content:center;

    gap:15px;
}

.pagination-box .btn{

    min-width:140px;
}


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

@media(max-width:991px){

.filter-card{

    position:relative;

    top:auto;

    margin-bottom:25px;
}

.course-page-header{

    padding:60px 0;
}

.course-page-header h1{

    font-size:38px;
}

}

@media(max-width:768px){

.course-page{

    padding:35px 0;
}

.course-page-header h1{

    font-size:30px;
}

.course-page-header p{

    font-size:15px;
}

.sort-bar{

    flex-direction:column;

    align-items:flex-start;
}

.sort-bar .form-select{

    width:100%;
}

.course-image{

    height:190px;
}

.course-title{

    min-height:auto;

    font-size:18px;
}

.new-price{

    font-size:24px;
}

.filter-card{

    padding:18px;
}

}







/*==================================================
PREMIUM SEARCH BAR
==================================================*/

.search-section{

    margin-top:-70px;
    position:relative;
    z-index:30;
}

.search-card{

    background:#fff;

    border-radius:26px;

    padding:35px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.10);

    border:1px solid #edf2f7;
}

.search-title{

    font-size:30px;

    font-weight:700;

    color:#052a2a;

    margin-bottom:8px;
}

.search-subtitle{

    color:#777;

    margin:0;

    font-size:15px;
}

.search-card label{

    font-weight:600;

    color:#444;

    margin-bottom:8px;

    display:block;
}

.search-card .form-select{

    height:58px;

    border-radius:15px;

    border:2px solid #eef2f6;

    font-size:15px;

    transition:.3s;
}

.search-card .form-select:focus{

    border-color:#0b6e69;

    box-shadow:
    0 0 0 .20rem rgba(11,110,105,.12);
}


/*=========================================
COURSE COUNT
=========================================*/

.course-counter{

    background:linear-gradient(135deg,#0b6e69,#084f4b);

    color:#fff;

    border-radius:20px;

    text-align:center;

    padding:18px;

    box-shadow:
    0 10px 30px rgba(11,110,105,.30);
}

.course-counter h2{

    font-size:36px;

    margin:0;

    font-weight:700;
}

.course-counter span{

    font-size:13px;

    opacity:.9;
}


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

@media(max-width:991px){

.search-section{

    margin-top:25px;
}

.search-card{

    padding:22px;
}

.course-counter{

    margin-top:10px;
}

}

@media(max-width:768px){

.search-title{

    font-size:24px;
}

.search-card{

    border-radius:18px;
}

}