/* =========================================================
   YOGNAMASTE - COURSE DETAILS
   FINAL RESPONSIVE CSS
========================================================= */


/* =========================================================
   COURSE HERO
========================================================= */

.course-hero{
    background:linear-gradient(135deg,#052a2a 0%,#074b47 100%);
    padding:75px 0;
    color:#fff;
}

.course-tag{
    display:inline-block;
    background:#d4a017;
    color:#fff;
    padding:8px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    margin-bottom:16px;
}

.course-title{
    font-size:46px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:15px;
}

.course-subtitle{
    max-width:800px;
    font-size:18px;
    line-height:1.7;
    opacity:.92;
    margin-bottom:0;
}

.course-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 25px;
    margin-top:22px;
    font-size:15px;
}

.course-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}


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

.course-body{
    padding:55px 0 70px;
    background:#f7f8fa;
}


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

.content-card{
    background:#fff;
    padding:25px;
    border:1px solid #edf0f2;
    border-radius:18px;
    margin-bottom:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.content-card h3{
    color:#292929;
    font-size:27px;
    line-height:1.3;
    font-weight:700;
    margin:0 0 20px;
}


/* =========================================================
   COURSE PREVIEW HEADER
========================================================= */

.course-preview-card{
    overflow:hidden;
}

.preview-heading{
    display:flex;
    align-items:center;
    gap:10px;
}

.preview-heading i{
    color:#0b6e69;
    font-size:27px;
}


/* =========================================================
   LMS VIDEO PLAYER
========================================================= */

.lms-player{
    position:relative;

    width:100%;
    max-width:100%;

    aspect-ratio:16 / 9;

    background:#000;

    overflow:hidden;

    border-radius:14px;

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

    isolation:isolate;
}


/* YouTube API container */

#youtubePlayer{
    position:absolute;

    top:0;
    right:0;
    bottom:0;
    left:0;

    width:100%;
    height:100%;

    background:#000;
}


/* YouTube API generated iframe */

.lms-player iframe,
#youtubePlayer iframe{

    position:absolute !important;

    top:0 !important;
    left:0 !important;

    width:100% !important;
    max-width:none !important;

    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    display:block !important;

    border-radius:0 !important;
}


/* Prevent Bootstrap/global iframe rules */

.course-preview-card iframe{
    width:100% !important;
    height:100% !important;
}


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

.content-card p{
    color:#505050;
    font-size:16px;
    line-height:1.7;
}

.content-card p:last-child{
    margin-bottom:0;
}


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

.price-card{
    position:sticky;
    top:100px;

    background:#fff;

    padding:20px;

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

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);
}

.course-image{
    display:block;

    width:100%;
    height:auto;

    border-radius:12px;

    margin-bottom:18px;

    object-fit:cover;
}


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

.price{
    color:#0b6e69;

    font-size:36px;
    line-height:1.2;

    font-weight:700;

    margin-bottom:4px;
}

.old-price{
    color:#999;

    font-size:15px;

    text-decoration:line-through;

    margin-bottom:18px;
}


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

.btn-buy{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;

    min-height:52px;

    background:#0b6e69;

    color:#fff;

    text-align:center;

    padding:13px 20px;

    border-radius:10px;

    font-size:16px;
    font-weight:600;

    text-decoration:none;

    margin-bottom:20px;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.btn-buy:hover{
    background:#074f4b;

    color:#fff;

    transform:translateY(-1px);

    box-shadow:
        0 6px 16px rgba(11,110,105,.20);
}


/* =========================================================
   COURSE FEATURES
========================================================= */

.feature-list{
    margin-top:5px;
}

.feature-list div{
    color:#444;

    font-size:15px;

    padding:11px 0;

    border-bottom:1px solid #eee;
}

.feature-list div:last-child{
    border-bottom:none;
}


/* =========================================================
   COURSE CURRICULUM
========================================================= */

.lesson-row{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:16px 0;

    border-bottom:1px solid #eee;
}

.lesson-row:first-child{
    padding-top:5px;
}

.lesson-row:last-child{
    border-bottom:none;
    padding-bottom:5px;
}

.lesson-row b{
    color:#303030;
    font-size:15px;
    font-weight:600;
}

.lesson-row small{
    display:inline-block;

    color:#777;

    margin-top:4px;

    line-height:1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px){

    .course-hero{
        padding:55px 0;
    }

    .course-title{
        font-size:38px;
    }

    .course-body{
        padding:40px 0 55px;
    }

    .price-card{
        position:relative;
        top:auto;
        margin-top:5px;
    }

}


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

@media(max-width:767.98px){

    .course-hero{
        padding:42px 0;
    }

    .course-title{
        font-size:28px;
        line-height:1.3;
    }

    .course-subtitle{
        font-size:15px;
        line-height:1.6;
    }

    .course-meta{
        gap:10px 15px;
        margin-top:18px;
        font-size:13px;
    }

    .course-body{
        padding:28px 0 40px;
    }

    .content-card{
        padding:17px;

        margin-bottom:18px;

        border-radius:14px;
    }

    .content-card h3{
        font-size:22px;
        margin-bottom:16px;
    }

    .preview-heading i{
        font-size:22px;
    }

    .lms-player{
        width:100%;
        aspect-ratio:16 / 9;
        border-radius:10px;
    }

    .content-card p{
        font-size:15px;
        line-height:1.65;
    }

    .price-card{
        position:relative;
        top:auto;

        padding:17px;

        margin-top:5px;

        border-radius:14px;
    }

    .price{
        font-size:31px;
    }

    .lesson-row{
        gap:12px;
        font-size:14px;
    }

}


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

@media(max-width:480px){

    .course-hero{
        padding:35px 0;
    }

    .course-tag{
        padding:7px 13px;
        font-size:12px;
    }

    .course-title{
        font-size:25px;
    }

    .course-meta{
        flex-direction:column;
        align-items:flex-start;
        gap:7px;
    }

    .content-card{
        padding:14px;
        border-radius:12px;
    }

    .content-card h3{
        font-size:20px;
    }

    .preview-heading{
        gap:7px;
    }

    .preview-heading i{
        font-size:20px;
    }

    .lms-player{
        border-radius:8px;
    }

    .price-card{
        padding:15px;
    }

    .price{
        font-size:29px;
    }

    .btn-buy{
        min-height:48px;
        font-size:15px;
    }

    .lesson-row{
        flex-direction:column;
        align-items:flex-start;
        gap:7px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media(max-width:360px){

    .course-title{
        font-size:23px;
    }

    .content-card{
        padding:12px;
    }

    .content-card h3{
        font-size:19px;
    }

}