@media screen and (max-width: 1200px) {
    .course-instructor .container {
        padding: 0px;
    }

    .course-content .container {
        padding: 0px;
    }

    .course-comments .container {
        padding: 0px;
    }

    .instructor-profile-img img {
        width: 120px;
        height: 120px;
        margin-top: 20px;
    }

    .course-overview-content {
        grid-template-columns: calc(200% / 3 - 10px) 300px;
        column-gap: 25px;
    }

    #course-info-sidebar {
        padding: 40px 25px 35px 25px;
    }
}

@media screen and (max-width: 1125px) {
    .course-intro-video-box img {
        width: 480px;
    }

    .menu-search-bar {
        display: none !important;
    }

    .course-intro-text h1 {
        font-size: 20px !important;
    }

    .course-content-main {
        grid-template-columns: calc(200% / 3 - 10px);
    }
}

@media screen and (max-width: 992px) {
    .course-intro {
        padding: 70px 0px 50px 0px;
    }

    .course-intro-content {
        flex-direction: column;
    }

    .course-intro::before {
        content: '';
        background-image: none;
        top: 0px;
        left: 0px;
        bottom: 0px;
        width: 0px;
        height: 0px;
    }

    .course-intro-main {
        width: 100%;
    }

    .course-intro-video-box img {
        width: 80%;
        display: block;
        margin: auto;
    }

    .course-intro-video {
        margin-top: 50px;
    }

    .course-overview-content {
        display: flex !important;
        flex-direction: column-reverse;
    }

    #course-tags-sidebar {
        padding: 25px 0px 20px 0px;
    }

    .course-tags-main {
        padding: 0px;
        margin-top: 23px;
    }

    .course-tags-main ul {
        justify-content: center;
    }

    .course-content-main {
        grid-template-columns: none;
    }

    .your-comment {
        grid-template-columns: none;
    }

    .registered-comments {
        grid-template-columns: none;
    }

    .suggested-courses-main {
        grid-template-columns: repeat(2, auto);
        row-gap: 30px;
    }
}

@media screen and (max-width: 768px) {
    /* .container {
        width: calc(100% - 100px);
        padding: 0px 50px;
    }  */

    .course-instructor-box-top-section {
        flex-direction: column;
    }

    .course-instructor-main {
        padding: 10px 40px 35px 40px;
    }

    .instructor-summary-information-on-the-site {
        margin-right: 0px;
    }

    .suggested-courses-main {
        grid-template-columns: repeat(1, auto);
        row-gap: 30px;
    }

    .course-intro-video-box img {
        width: 100%;
    }

    .session-video {
        width: 100%;
        height: auto;
    }

    .answer-comment-box {
        width: 100%;
    }

    .ck-code-block-dropdown {
        display: none !important;
    }

    .ck-toolbar__separator {
        display: none !important;
    }

    .ck-toolbar__separator:first-child {
        display: inline-block !important;
    }

    .session-number-container {
        border: 0px !important;
    }

    .session-duration {
        display: none;
    }

    .session-condition {
        display: none;
    }

    .session-condition-mobile {
        display: block;
    }

    .session-condition-mobile {
        text-align: end;
    }

    .watch-video-icon-container {
        width: 36px;
        height: 35px;
        background-color: #00000000 !important;
    }

    .session-condition-mobile svg {
        font-size: 16px;
        padding: 6px;
        border-radius: 50%;
    }

    .session-condition-mobile button svg {
        /* margin-left: 5px; */
        color: var(--blue);
        border: 1px solid var(--blue);
        box-sizing: content-box !important;
    }

    .session-condition-mobile a svg {
        box-sizing: content-box !important;
        border: 1px solid var(--green);
    }

    .fa-lock {
        border: 1px solid var(--red);
        padding: 6px 7px !important;
        font-size: 16px;
        border-radius: 50%;
    }

    .video-container {
        width: 100%;
    }

    .video-container video {
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .container {
        width: 100%;
        padding: 0px 15px;
    }

    .course-intro-video-box video {
        height: 235px;
        width: 100%;
    }

    .user-profile-img-in-comment {
        display: none;
    }

    .course-intro-meta {
        flex-direction: column;
        margin-top: 10px;
    }

    .course-overview {
        padding-top: 0;
    }

    .course-overview-main {
        margin-top: 20px;
    }

    .course-instructor-info {
        border-left: 0px;
        margin-left: 0px;
        padding-left: 0px;
    }

    .instructor-profile-img {
        text-align: center;
    }

    .instructor-summary-information-on-the-site {
        text-align: center;
    }

    .instructor-activity-on-the-site ul {
        flex-direction: column;
    }

    .instructor-activity {
        padding-right: 0px;
        margin-top: 15px;
    }

    .instructor-course-count {
        padding-left: 0px;
        border: none;
    }

    .ck-sticky-panel {
        display: none !important;
    }

    .ck-disabled {
        display: none !important;
    }

    .ck-color-ui-dropdown {
        display: none !important;
    }

    .ck-font-size-dropdown {
        display: none !important;
    }

    .session-number-container {
        border: none;
        padding: none;
    }

    .session-condition button,
    .session-condition a {
        font-size: 11px;
    }

    .session-number {
        width: 27px;
        height: 27.5px;
    }

    .session-number b {
        font-size: 12px;
    }

    .session-number-container {
        font-size: 12px;
    }

    .session-duration {
        display: none;
    }

    .session-boxes ul li {
        flex-direction: column;
    }

    .session-condition-mobile {
        margin-top: 10px;
    }

    .your-comment-main form button {
        font-size: 12px;
        padding: 8.5px 20px;
    }

    .answer-box {
        width: calc(100% - 30px);
        margin-right: 30px;
    }
}

@media screen and (max-width: 380px) {
    .course-intro {
        padding-bottom: 30px;
    }

    .notification-slider {
        height: 100px !important;
    }

    .ck-editor__editable_inline {
        min-height: 200px;
    }
}