/* =========================================================
   HOME COURSE CAROUSEL
   CLEAN PROFESSIONAL VERSION
========================================================= */


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

.course-showcase{
    width:100%;
    padding:64px 0 72px;

    background:#ffffff;

    overflow:hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.course-showcase > .container{
    width:94%;
    max-width:1540px;

    margin:0 auto;

    padding:0 18px;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.course-showcase-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:24px;

    margin-bottom:28px;
}


.course-eyebrow{
    display:inline-block;

    margin-bottom:7px;

    color:#008e9a;

    font-size:12px;
    line-height:1.3;

    font-weight:800;

    letter-spacing:.08em;
}


.course-showcase-head h2{
    margin:0;

    color:#173b70;

    font-size:clamp(28px,2.2vw,40px);
    line-height:1.2;

    font-weight:800;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.course-head-actions{
    display:flex;
    align-items:center;

    gap:9px;

    flex-shrink:0;
}


.view-all-courses{
    min-height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 16px;

    border:1px solid #d8e3e7;
    border-radius:999px;

    background:#ffffff;
    color:#334b58;

    text-decoration:none;

    font-size:13px;
    font-weight:700;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.view-all-courses:hover{
    background:#f2f9fa;
    border-color:#b7dadd;

    transform:translateY(-1px);
}


/* =========================================================
   ARROWS
========================================================= */

.course-arrow{
    width:40px;
    height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid #d8e3e7;
    border-radius:50%;

    background:#ffffff;
    color:#274252;

    font-size:24px;
    line-height:1;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.course-arrow:hover{
    background:#f2f9fa;
    border-color:#b7dadd;

    transform:translateY(-1px);
}


.course-arrow:disabled{
    opacity:.35;

    cursor:default;

    transform:none;
}


/* =========================================================
   CAROUSEL SHELL
========================================================= */

.course-carousel-shell{
    position:relative;

    width:100%;

    overflow:hidden;
}


/* =========================================================
   CAROUSEL
========================================================= */

.course-carousel{
    display:flex !important;
    flex-wrap:nowrap !important;

    gap:20px;

    width:100%;

    padding:4px 2px 12px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
}


.course-carousel::-webkit-scrollbar{
    display:none;
}


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

.course-slide{
    flex:0 0 calc((100% - 80px) / 5) !important;

    min-width:0;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden;

    border:1px solid #e2e8ec;
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 7px 22px
        rgba(29,52,68,.06);

    scroll-snap-align:start;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.course-slide:hover{
    transform:translateY(-4px);

    border-color:#cfe0e4;

    box-shadow:
        0 14px 30px
        rgba(29,52,68,.10);
}


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

.course-image-wrap{
    position:relative;

    display:block;

    width:100%;

    aspect-ratio:16 / 10;

    overflow:hidden;

    background:#edf3f5;

    text-decoration:none;
}


.course-image-wrap img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .35s ease;
}


.course-slide:hover .course-image-wrap img{
    transform:scale(1.03);
}


/* =========================================================
   FEATURED BADGE
========================================================= */

.featured-ribbon{
    position:absolute;

    top:12px;
    left:12px;

    display:inline-flex;
    align-items:center;

    padding:6px 10px;

    border-radius:999px;

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

    color:#a87515;

    font-size:10px;
    line-height:1;

    font-weight:800;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.08);
}


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

.course-card-body{
    display:flex;
    flex-direction:column;
    flex:1;

    padding:17px;
}


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

.course-card-body h3{
    margin:0 0 10px;

    color:#111827;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Hind Madurai",
        "Segoe UI",
        sans-serif;

    font-size:16px;
    line-height:1.42;

    font-weight:750;

    letter-spacing:-.012em;
}


.course-card-body h3 a{
    color:inherit;

    text-decoration:none;
}


.course-card-body h3 a:hover{
    color:#087f8c;
}


/* =========================================================
   AGE / AUDIENCE BADGE
========================================================= */

.course-age{
    align-self:flex-start;

    display:inline-flex;
    align-items:center;

    margin-bottom:10px;

    padding:5px 9px;

    border-radius:999px;

    background:#eaf7f8;
    color:#087f8c;

    font-size:10px;
    line-height:1.35;

    font-weight:700;
}


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

.course-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:5px;

    margin-bottom:10px;

    color:#374151;

    font-size:11px;
    line-height:1.5;

    font-weight:600;
}


.course-meta i{
    color:#9ca3af;

    font-style:normal;
}


/* =========================================================
   SHORT DESCRIPTION
========================================================= */

.course-short-description{
    margin:0 0 12px;

    color:#374151;

    font-size:11px;
    line-height:1.65;

    font-weight:500;

    display:-webkit-box;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* =========================================================
   RATING
========================================================= */

.course-rating{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:4px;

    min-height:22px;

    margin-bottom:13px;

    color:#4b5563;

    font-size:11px;

    font-weight:600;
}


.stars{
    display:inline-flex;

    gap:1px;
}


.stars b{
    color:#cbd5e1;

    font-size:13px;
    line-height:1;

    font-weight:400;
}


.stars b.is-filled{
    color:#d79a24;
}


.rating-number{
    color:#1f2937;

    font-weight:700;
}


.review-count{
    color:#4b5563;

    font-weight:600;
}


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

.course-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-top:auto;

    padding-top:13px;

    border-top:1px solid #e5e7eb;
}


.course-card-footer strong{
    color:#111827;

    font-size:17px;

    font-weight:800;

    white-space:nowrap;
}


.course-learn-more{
    display:inline-flex;
    align-items:center;

    gap:5px;

    color:#087f8c;

    font-size:11px;

    font-weight:750;

    text-decoration:none;

    white-space:nowrap;
}


.course-learn-more span{
    transition:transform .2s ease;
}


.course-learn-more:hover span{
    transform:translateX(3px);
}


/* =========================================================
   DOTS
========================================================= */

.course-carousel-dots{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    min-height:12px;

    margin-top:13px;
}


.course-carousel-dots button{
    width:7px;
    height:7px;

    padding:0;

    border:0;
    border-radius:999px;

    background:#cbd5d9;

    cursor:pointer;

    transition:
        width .2s ease,
        background .2s ease;
}


.course-carousel-dots button.is-active{
    width:22px;

    background:#008e9a;
}


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

.course-empty{
    padding:46px 28px;

    border:1px dashed #cddadd;
    border-radius:18px;

    background:#f9fbfc;

    text-align:center;
}


.course-empty h3{
    margin:0 0 7px;

    color:#213c4d;

    font-size:20px;
}


.course-empty p{
    margin:0;

    color:#4b5563;

    font-size:13px;
}


/* =========================================================
   VERY LARGE DESKTOP
   6 CARDS
========================================================= */

@media(min-width:1800px){

    .course-showcase > .container{
        width:96%;
        max-width:1760px;
    }

    .course-slide{
        flex-basis:
            calc((100% - 100px) / 6) !important;
    }

}


/* =========================================================
   NORMAL DESKTOP
   5 CARDS
========================================================= */

@media(min-width:1200px) and (max-width:1799px){

    .course-slide{
        flex-basis:
            calc((100% - 80px) / 5) !important;
    }

}


/* =========================================================
   SMALL DESKTOP
   4 CARDS
========================================================= */

@media(min-width:992px) and (max-width:1199px){

    .course-slide{
        flex-basis:
            calc((100% - 60px) / 4) !important;
    }

}


/* =========================================================
   TABLET
   3 CARDS
========================================================= */

@media(min-width:700px) and (max-width:991px){

    .course-showcase{
        padding:54px 0 62px;
    }

    .course-showcase > .container{
        width:94%;

        padding:0 14px;
    }

    .course-carousel{
        gap:18px;
    }

    .course-slide{
        flex-basis:
            calc((100% - 36px) / 3) !important;
    }

}


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

@media(max-width:699px){

    .course-showcase{
        padding:44px 0 52px;
    }

    .course-showcase > .container{
        width:100%;
        max-width:none;

        padding:0 16px;
    }

    .course-showcase-head{
        align-items:flex-start;

        gap:14px;

        margin-bottom:22px;
    }

    .course-showcase-head h2{
        font-size:25px;
    }

    .view-all-courses{
        display:none;
    }

    .course-arrow{
        width:38px;
        height:38px;

        font-size:22px;
    }

    .course-carousel{
        gap:14px;

        padding-right:30px;
    }

    .course-slide{
        flex:0 0 84% !important;
    }

    .course-card-body{
        padding:16px;
    }

    .course-card-body h3{
        font-size:16px;
    }

}


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

@media(max-width:420px){

    .course-showcase-head{
        flex-direction:column;
    }

    .course-head-actions{
        align-self:flex-end;
    }

    .course-slide{
        flex-basis:88% !important;
    }

}