/* ============================================================
   SCROLL-TRIGGERED ENTRANCE ANIMATIONS
   (JS adds .is-visible when element scrolls into view)
   ============================================================ */

.chx-anim{
    opacity:0;
    transform: translateY(48px);
    transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
.chx-anim.is-visible{
    opacity:1;
    transform: translateY(0);
}

.chx-anim-scale{
    opacity:0;
    transform: scale(.96);
    transform-origin: center center;
    transition: opacity .6s cubic-bezier(.16,.84,.44,1), transform .6s cubic-bezier(.16,.84,.44,1);
}
.chx-anim-scale.is-visible{
    opacity:1;
    transform: scale(1);
}

.chx-anim-fade{
    opacity:0;
    transition: opacity .7s ease;
}
.chx-anim-fade.is-visible{
    opacity:1;
}

.chx-delay-1.is-visible{ transition-delay:.05s; }
.chx-delay-2.is-visible{ transition-delay:.15s; }
.chx-delay-3.is-visible{ transition-delay:.25s; }
.chx-delay-4.is-visible{ transition-delay:.35s; }
.chx-delay-5.is-visible{ transition-delay:.45s; }

/* roadmap cards animate in one after another as they scroll into view */
.roadmap-card{
    opacity:0;
    transform: translateY(40px);
    transition: opacity .6s cubic-bezier(.16,.84,.44,1), transform .6s cubic-bezier(.16,.84,.44,1);
}
.roadmap-card.is-visible{
    opacity:1;
    transform: translateY(0);
}
.roadmap-card:nth-child(1).is-visible{ transition-delay:.05s; }
.roadmap-card:nth-child(2).is-visible{ transition-delay:.12s; }
.roadmap-card:nth-child(3).is-visible{ transition-delay:.19s; }
.roadmap-card:nth-child(4).is-visible{ transition-delay:.26s; }
.roadmap-card:nth-child(5).is-visible{ transition-delay:.33s; }
.roadmap-card:nth-child(6).is-visible{ transition-delay:.40s; }
.roadmap-card:nth-child(7).is-visible{ transition-delay:.47s; }
.roadmap-card:nth-child(8).is-visible{ transition-delay:.54s; }
.roadmap-card:nth-child(n+9).is-visible{ transition-delay:.60s; }

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
    .chx-anim, .chx-anim-scale, .chx-anim-fade, .roadmap-card{
        transition:none !important;
        opacity:1 !important;
        transform:none !important;
    }
}

/* ============================================================
   HERO BANNER — responsive across phone / tablet / laptop
   ============================================================ */
.course-hero{
    width:100%;
    overflow:hidden;
    background:#000;
}

.course-image-wrapper img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:#000;
}

/* Phone */
@media(max-width:576px){
    .course-image-wrapper{
        height:200px;
    }
}

/* Tablet */
@media(min-width:577px) and (max-width:991px){
    .course-image-wrapper{
        height:320px;
    }
}

/* Laptop / Desktop */
@media(min-width:992px){
    .course-image-wrapper{
        height:420px;
    }
}

/* ============================================================
   ICON BOX (roadmap/feature icons)
   ============================================================ */
.icon-box{
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    overflow:hidden;
}

.icon-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:50%;
}

.custom-card{
    background:#fff;
    border-radius:18px;
    padding:16px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    margin-bottom:14px;
}

.section-title{
    font-size:18px;
    font-weight:700;
    color:#004aad;
    margin-bottom:4px;
}

.mentor-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    border:1px solid #eef2f7;
    border-radius:16px;
    transition:.3s;
}  

.mentor-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(13,110,253,.12);
}

.mentor-card img{
    width:90px;
    height:90px;
    min-width:90px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #0d6efd;
}

.mentor-card h3{
    margin-top:-4px;
    margin-bottom:2px;
    font-size:20px;
    font-weight:700;
    color:#1e293b;
}

.mentor-card p{
    margin-top:-2px;
    margin-bottom:2px;
    color:#64748b; 
    font-size:15px;
}

.mentor-card span{
    display:inline-block;
    margin-top:1px;
    border-radius:5px;
    background: #000;
    color:#0d6efd;
    font-size:13px;
    font-weight:600;
}

/* Mobile */

@media(max-width:576px){

    .mentor-card{
        flex-direction:column;
        text-align:center;
        padding:16px 12px;
    }

    .mentor-card img{
        width:80px;
        height:80px;
        min-width:80px;
    }

    .mentor-card h3{
        font-size:18px;
        margin-top:-3px;
    }

    .mentor-card p{
        font-size:14px;
    }

    .mentor-card span{
        font-size:12px;
        padding:4px 10px;
    }

}



.chx-desc{
    padding:0;
    margin-bottom:8px;
    font-size:15px;
    color:#222;
}

.dark .chx-desc{
    color: #5BB8FF;
}
        
.rating-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Poppins', sans-serif;
}

/* Star */
.star {
    width: 16px;
    height: 16px;
    fill: #ff9800;
}

/* Rating text */
.rating-text {
    font-weight: 600;
    color: #333;
    flex-wrap: nowrap; 
}

/* Avatar group */
.avatars {
    display: flex;
    align-items: center;
    margin-left: 4px;
    flex-wrap: nowrap; 
}

/* Images */
.avatars img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    margin-left: -8px;
    transition: 0.3s;
}

/* First one fix */
.avatars img:first-child {
    margin-left: 0;
}

/* +more circle */
.more {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #333;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
    border: 2px solid #fff;
}

/* Hover effect */
.avatars img:hover {
    transform: translateY(-2px);
    z-index: 2;
}



.routine-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    max-width: 360px;
    margin: 8px 0;

    padding: 7px 18px;

    border-radius: 999px;

    background: #f2f8ff;
    border: 2px solid #bcdcff;

    color: #2b7cd3;
    font-size: 15px;
    font-weight: 500;

    text-decoration: none;
    transition: 0.2s ease;
}

/* icon */
.routine-btn .icon {
    width: 18px;
    height: 18px;
    fill: #2b7cd3;
}

/* hover */
.routine-btn:hover {
    background: #e9f3ff;
    border-color: #9ecbff;
}

/* ============================================================
   ENROLL PAGE WRAPPER
   ============================================================ */
.course-enroll-page{
    width:97%;
    margin:20px auto;
    padding:20px 10px;
    background:#fff;
    border-radius: 20px;
    box-shadow: 0 -10px 25px rgba(0, 150, 255, 0.25);
}


/* 📱 Tablet */
@media (max-width: 768px){
    .course-enroll-page{
        margin-top: 16px;
        padding:16px 8px;
    }
}

/* 📱 Mobile */
@media (max-width: 480px){
    .course-enroll-page{
        margin-top: 12px;
        padding:12px 6px;
        height:auto;
    }
    
}

@media (max-width: 400px){
    .course-enroll-page{
        margin-top: 10px;
        padding:10px 6px;
        height:auto;
    }
    
}

/* ============================================================
   PAGE LAYOUT — two column (left content + right sticky sidebar)
   ✅ Added: age ei class gulo (course-container, course-left,
   course-right, chx-header, enroll-card, bottom-cta-card etc.)
   kothao define kora chilo na, tai page structure-i broken/
   unstyled dekhachhilo. Ekhon full layout add kora hoise.
   ============================================================ */

.course-container{
    display:flex;
    align-items:flex-start;
    gap:24px;
    max-width:1180px;
    margin:0 auto;
}

.course-left{
    flex:1;
    min-width:0;
}

.course-right{
    width:340px;
    flex-shrink:0;
    position:sticky;
    top:20px;
}

@media(max-width:991px){
    .course-container{
        flex-direction:column;
        gap:16px;
    }

    .course-right{
        display:none; /* mobile-e bottom-cta-card use hoy eর বদলে */
    }
}

/* ============================================================
   HEADER (title, description, tags, rating)
   ============================================================ */
.chx-header{
    margin-bottom:16px;
}

.chx-title-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.chx-accent-bar{
    display:none;
}

.chx-meta{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.chx-tags{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.chx-tag{
    display:inline-flex;
}

.chx-routine-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 14px;
    border-radius:999px;
    background:#f2f8ff;
    border:1px solid #bcdcff;
    color:#2b7cd3;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
}

.meta{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.chx-rule{
    display:block;
    height:1px;
    background:#eef2f7;
    margin-top:16px;
}

/* ============================================================
   ROADMAP SECTION
   ============================================================ */
.roadmap-section{
    margin-bottom:16px;
}

.roadmap-card{
    display:flex;
    align-items:flex-start;
    gap:12px;
    background:#fff;
    border-radius:16px;
    padding:14px;
    margin-bottom:10px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.card-header{
    display:flex;
    align-items:center;
}

/* ============================================================
   ENROLL CARD (desktop sidebar)
   ============================================================ */
.enroll-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
    border:1px solid #eef2f7;
}

.enroll-header{
    background:linear-gradient(135deg,#0d6efd,#5a8dee);
    color:#fff;
    padding:16px 20px;
    font-size:14px;
    font-weight:600;
}

.enroll-header h2{
    margin:4px 0 0;
    font-size:17px;
    font-weight:700;
    line-height:1.4;
}

.price{
    font-size:28px;
    font-weight:800;
    color:#0f172a;
    padding:18px 20px 6px;
}

.btn-routine{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0 20px 12px;
    padding:10px 16px;
    border-radius:12px;
    background:#f2f8ff;
    border:1px solid #bcdcff;
    color:#2b7cd3;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

.btn-routine:hover{
    background:#e9f3ff;
}

.btn-enroll{
    display:block;
    text-align:center;
    margin:0 20px 20px;
    padding:14px;
    border-radius:14px;
    background:linear-gradient(135deg,#0d6efd,#2563eb);
    color:#fff !important;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    border:none;
    width:calc(100% - 40px);
    transition:.3s;
}

.btn-enroll:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(13,110,253,.25);
}

/* ============================================================
   BOTTOM MOBILE CTA BAR
   ============================================================ */
.bottom-cta-card{
    display:none;
}

@media(max-width:991px){
    .bottom-cta-card{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        background:#fff;
        padding:10px 16px;
        box-shadow:0 -8px 25px rgba(0,0,0,.1);
        z-index:1000;
    }
}

.cta-info{
    flex:1;
    min-width:0;
}

.price-box{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.new-price{
    font-size:18px;
    font-weight:800;
    color:#0f172a;
    margin:0;
}

.old-price{
    font-size:13px;
    color:#94a3b8;
    text-decoration:line-through;
    margin:0;
}

.best-value-btn{
    display:inline-block;
    background:#dcfce7;
    color:#16a34a;
    font-size:11px;
    font-weight:700;
    padding:2px 8px;
    border-radius:999px;
}

.btn-enroll-card{
    flex-shrink:0;
    padding:12px 22px;
    border-radius:12px;
    background:linear-gradient(135deg,#0d6efd,#2563eb);
    color:#fff !important;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    border:none;
    text-align:center;
}

.btn-enroll-card:disabled{
    background:#94a3b8;
    cursor:not-allowed;
}

/* ============================================================
   UTILITY
   ============================================================ */
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* leave room at the bottom on mobile so bottom-cta-card doesn't cover content */
@media(max-width:991px){
    body{
        padding-bottom:72px;
    }
}