/* ===========================
   XS devices < 576px)
   =========================== */
@media (max-width: 576px) {

    #co-account-login, #co-account-register, #co-forgot-password {
        min-height: 100vh;
    }

    #co-forgot-password{
        margin-top:0px !important;
    }

    #co-account-settings {
        margin-top: 10px !important;
    }

    #co-account-profile-settings{
        padding-top: 15px !important;
    }

    #co-account-security-settings{
        padding: 0px !important;
        margin-left: 10px !important;
    }

    #co-learner-payment {
        margin-top: 15px !important;
        padding: 20px !important;
    }

    #co-course-list-main {
        margin-top: -25px;
    }

    #co-mobile-logout{
        background-color: #eee;
        width: 100vw;
        height: 75px;
        position:absolute;
        bottom: 0px;
        font-size:22px;
        text-align: center;
    }

    .co-my-course-item {
        margin-bottom: 20px;
    }

    #co-course-view-img{
        margin-left: -5px;
    }

    #co-course-view-desc {
        margin-left: -10px;
}

    #co-course-search-m, #co-course-search-m2 {
        width: 100%;
        position: relative !important;
        left: 0px;
    }

    .co-course-item-border{
        margin-right: 0px !important;
    }

    #co-learner-checkout-profile, #co-learner-checkout-payment{
        margin-left: 0px !important;
        margin-top: 10px !important;
    }

    #co-learner-checkout-payment-main{
        padding: 15px !important;
    }

    #co-chapter-view-m {
        padding: 10px;
        height: 65px;
        background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%);
    }

    #co-nav-top{
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border-bottom: 1px solid #eee;
    }

    #co-course-search-m2{
        margin-top: -10px;
    }

    #co-course-chapter-list-m {
        position: absolute;
        width: 100%;
        min-height: 200vh;
        height: auto !important;
        top: -57px;
        right: 0px;
        border-left: 5px solid #eee;
    }

    #co-course-preview-chapter{
        padding-right: 0px !important;
    }

    .co-accordian {
        margin-right: -10px !important;
    }

    .co-course-name {
        min-height: 55px !important;
        max-height: 75px !important;
    }

    #videoPlayerX{
        border-radius: 10px !important;
    }

    #co-instructor-profile-img-mobile,
    #co-instructor-profile-img-2-mobile,
    #co-instructor-profile-img-3-mobile,
    #co-instructor-profile-img-4-mobile {
        margin-left: 0px !important;
    }

    #co-instructor-profile-img-3-mobile {
        margin-top: -30px !important;
    }

    #co-instructor-profile-img-4-mobile {
        margin-top: -30px !important;
    }

    #co-instructor-profile-img-5-mobile {
        margin-left: -10px !important;
    }

    #co-certificate{
        margin-top: 10px !important;
    }
}

/* ===========================
   SM devices (≥576px)
   =========================== */
@media (min-width: 576px) {

    #co-account-login, #co-account-register {
        margin-top: 40px;
    }

    #co-mobile-logout {
        background-color: #eee;
        width: 100vw;
        height: 75px;
        position: absolute;
        bottom: 0px;
        font-size: 22px;
        text-align: center;
    }

    .co-my-course-item {
        margin-bottom: 20px;
    }

    #co-account-settings {
        margin-top: 10px !important;
}

    #co-course-search-m, #co-course-search-m2 {
        width: 100%;
        position: relative !important;
        left: 0px;
    }

    #co-learner-payment {
        margin-top: 15px !important;
        padding: 20px !important;
    }

    .co-course-item-border {
        margin-right: 0px !important;
    }

    #co-learner-checkout-profile, #co-learner-checkout-payment {
        margin-left: 0px !important;
        margin-top: 15px !important;
    }

    #co-chapter-view-m {
        padding: 10px;
        height: 65px;
        background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%);
    }

    #co-nav-top {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border-bottom: 1px solid #eee;
    }

    #co-course-search-m2 {
        margin-top: -10px;
    }

    #co-course-chapter-list-m {
        position: absolute;
        width: 100%;
        min-height: 200vh;
        height: auto !important;
        top: -57px;
        right: 0px;
        border-left: 5px solid #eee;
    }

    #co-course-preview-chapter {
        padding-right: 0px !important;
    }

    .co-accordian {
        margin-right: -10px !important;
    }

    .co-course-name {
        min-height: 55px !important;
        max-height: 75px !important;
    }

    #videoPlayerX {
        border-radius: 10px !important;
    }

    #co-instructor-profile-img-mobile {
        margin-left: 0px !important;
    }

    #co-certificate {
        margin-top: 10px !important;
    }
}

/* MD (≥768px) */
@media (min-width: 768px) {

    #co-account-login, #co-account-register {
        margin-top: 40px;
    }

    .co-my-course-item {
        margin-bottom: 20px;
    }

    #co-account-settings {
        margin-top: 10px !important;
    }

    #co-course-search-m, #co-course-search-m2 {
        width: 70%;
        position: relative !important;
        left: 0px;
    }
    
    #co-course-search-m2{
        width: 100%;
    }

    .co-course-item-border {
        margin-right: 0px !important;
    }

    #co-learner-checkout-profile, #co-learner-checkout-payment {
        margin-left: 0px !important;
        margin-top: 15px !important;
    }

    #co-chapter-view-m {
        padding: 10px;
        height: 65px;
        background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%);
    }

    #co-nav-top {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border-bottom: 1px solid #eee;
    }

    #co-course-search-m2 {
        margin-top: 30px;
        margin-bottom: -20px;
    }

    #co-course-chapter-list-m {
        position: absolute;
        width: 100%;
        min-height: 200vh;
        height: auto !important;
        top: -57px;
        right: 0px;
        border-left: 5px solid #eee;
    }

    #co-course-preview-chapter {
        padding-right: 0px !important;
    }

    .co-accordian {
        margin-right: -10px !important;
    }

    .co-course-name {
        min-height: 55px !important;
        max-height: 75px !important;
    }

    #videoPlayerX {
        border-radius: 10px !important;
    }

    #co-instructor-profile-img-mobile {
        margin-left: 0px !important;
    }

    #co-certificate {
        margin-top: 10px !important;
    }
}

/* LG (≥992px) */
@media (min-width: 992px) {
    #co-course-list {
        margin-left: 345px;
        position: absolute;
        top: 75px
    }

    #co-account-login {
        margin-top: 40px;
    }
    
    #co-account-register {
        margin-top: 40px;
    }

    .co-my-course-item-odd {
        margin-left: 2% !important;
    }

    .co-my-course-item {
        margin-bottom: 2% !important;
    }

    #co-course-view-details-row {
        padding-left: 50px;
        padding-right: 25px;
    }

    #co-nav-top {
        -webkit-box-shadow: 0 8px 10px -6px #ddd !important;
        -moz-box-shadow: 0 8px 10px -6px #ddd !important;
        box-shadow: 0 8px 10px -6px #ddd !important;
    }

    #co-course-search-m2 {
        display:none;
    }

    #co-instructor-profile-img-6-mobile {
        width: 48%;
        margin-left: 2% !important;
    }

    #co-certificate {
        margin-top: 40px !important;
    }

    #co-ai-assistant-form{
        top: 7px !important;
    }
}

/* Apply fullscreen modal only on devices smaller than LG */
@media (max-width: 991px) {

    .modal-dialog {
        max-width: 100%;
        margin: 0;
    }

    .modal-content {
        height: 100vh;
        background-color: #f8f9fa;
    }

    .modal-header {
        border-bottom: none;
        display: flex;
        justify-content: flex-end;
    }

    .close-icon {
        font-size: 2rem;
        cursor: pointer;
    }

    .modal-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }

    .nav-link {
        font-size: 18px;
        padding: 5px 0;
    }

    .nav-item {
        text-align: center;
        margin: 10px 0;
    }

    /* Smooth transition */
    .modal.fade .modal-dialog {
        transform: translateY(-100%);
        transition: transform 0.3s ease-out;
    }

    .modal.show .modal-dialog {
        transform: translateY(0);
    }
}