/* --- */
.appointment-popup {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 12rem;
    left: 50%;
    width: 90rem;
    max-width: 90%;
    background: white;
    border-radius: 1rem;
    z-index: 1;
    display: flex;
    overflow: hidden;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    min-height: 50rem;
    max-height: 65rem;
}

.disabled-calender-button {
    background-color: #b0b0b0 !important;
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed !important;
}

.subscription-step {
    background-image: url("/assets/default/img/subs-bg.png");
}

.hero-circle-item span {
    margin-left: 8px;
}

.close-button {
    border: 1.5px solid #6c6c6c;
}

.ils-20 {
    animation: 0.4s jump ease infinite alternate;
}

.box {
    display: none !important;
}

.planshr {
    display: none;
}

.vidio360 {
    display: none;
}

.vidiofullscreen {
    display: block;
}

.vidiofullscreen img {
    height: 132.23px !important;
    object-fit: contain;
}

.hero-class img {
    height: 25px;
}

.optionborder {
    border: 2px solid #cccccc;
    border-radius: 5px;
    padding: 5px 30px;
    width: 100%;
    margin-bottom: 10px;
}

.nextbtn {
    border: none;
    background-color: transparent;
}

.btnclass {
    color: #00C7C4;
    text-decoration: none;
}

.btnclass:hover {
    color: #00C7C4 !important;
}

.form-check.optionborder.active {
    border: 2px solid #00C7C4;
}

input[type=radio]:checked {
    accent-color: dodgerblue !important;
}

.modalpopup {
    width: 40% !important;
    left: 33% !important;
}

@media screen and (max-width: 320px) {
    .subs-logo {
        width: auto !important;
    }

    .planshr {
        display: block;
    }

    .videoicone {
        top: 22% !important;
        left: 50%;
    }
}

@media screen and (max-width: 425px) {
    .videoicone {
        top: 40% !important;
        left: 50%;
    }
}

@media screen and (max-width: 768px) {
    .classlist a {
        display: flex !important;
        position: absolute;
        right: 10%;
    }

    .modalpopup {
        width: 100% !important;
        left: 0 !important;
    }

    .classlist {
        display: inherit !important;
    }

    .small-device-navigation {
        display: block !important;
    }

    /* .vidio360 {
      display: block;
      padding: 0;
      width: 45% !important;
    } */
    /* .vidio360 {
      display: block;
    } */
    .vidio360 img {
        height: 132.23px !important;
        object-fit: contain;
    }

    /* .vidiofullscreen {
      display: none;
    } */
    .box {
        display: block !important;
        margin-top: -120%;
        margin-left: 10%;
    }

    .filterclass {
        display: none;
    }

    .user-profile-dropdown {
        margin-left: -130px;
        margin-top: -30px;
    }

    .language-select .dropdown-menu {
        margin-left: -100px;
        margin-top: -30px;
    }

    .new-star img {
        margin-left: -340% !important;
    }

    .planshr {
        display: block;
        float: left;
        width: 25%;
    }

    .appointment-popup {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        top: 0;
        border-radius: 0;
        overflow: auto;
        height: calc(100% - 6.4rem);
        min-height: auto;
        max-height: 100%;
    }

    .ils-20 {
        margin-left: 17% !important;
    }

    .custom-dots {
        transform: translate(10%, 10%) !important;
    }

    .custom-dots-video {
        transform: translate(0%, -10%) !important;
    }

}

.select2-container--default .select2-selection--multiple {
    overflow-y: scroll !important;
}

.appointment-popup .appointment-user-wrapper {
    background: #2c3153;
    flex: 0 0 25rem;
}

.logintitlewrap {
    position: relative;
}

.headertitle {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;

    text-align: center;
}

.headertitle h3 {
    font-style: normal;
    font-weight: 400;
    font-size: 80px;
    line-height: 96px;
    Color: #fff;

}

.login-card {
    padding: 75px 15px 75px 15px !important;
    padding-top: 0px;
    max-width: 536px;
    width: 100%;
    margin: 0px auto;
    padding-top: 56px;
}

.login-card h1 {
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    color: #00C7C4;
    text-align: center;
    margin-bottom: 12px;

}

.login-card h6 {
    font-size: 12px;
    line-height: 15px;
    color: #4D4D4D;
    font-weight: 400;
    margin-bottom: 50px;
}

.login-card .input-label {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.19;
    color: #4D4D4D;
    margin-bottom: 4px;
}


.login-card input {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    height: 36px;
}

.loginformwrap {
    max-width: 390px;
    width: 100%;
    margin: 0px auto;
}

.loginformwrap .form-group {
    margin-bottom: 20px !important;
}

#submitlogin {
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    border-radius: 5px;
    width: 281px;
    height: 36px;
    margin: 0px auto;
    margin-top: 0px;
    display: block !important;
    line-height: 30px;
}

.signupcol {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 12px;
}

.signupcol a {
    color: #00C7C4;
    font-weight: 500;
}

.signupcol h6 {
    color: #4D4D4D;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 12px;
}

.frgtpswdcol {
    color: #4d4d4d;
    font-size: 12px;
}

.login-card h6 a {
    font-weight: 700;
    text-decoration: underline;
}

.logintitlewrap {
    background: url("/assets/default/img/login-headerimg.png") no-repeat center center;
    width: 100%;
    height: 300px;
    background-size: cover;
}

.login-card.regformwrap {
    max-width: 844px;
}

.login-card.regformwrap h6 {
    text-align: center;
}

.agreementwrap {
    max-width: 291px;
    width: 100%;
    margin: 0px auto;
}

.agreementwrap .custom-control {
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 69px;
}

.agreementwrap button {
    width: 100%;
}

/*youtube responsive issue*/
.pop-youtube-model {
    width: 100% !important;
    height: 100% !important;
}


@media screen and (max-width: 480px) {
    .logintitlewrap {
        background: url("/assets/default/img/loginmblimg.png") no-repeat center center;
        width: 100%;
        height: 170px;
        background-size: cover;
        background-position: left center;
    }

}

.google-social-signin {
    margin-right: 23px;
}

body.rtl .google-social-signin {
    margin-left: 23px;
}

@media screen and (max-width: 768px) {

    .headertitle {
        width: 100%;
    }

    .headertitle h3 {
        font-size: 36px;
    }

    .appointment-popup .appointment-user-wrapper {
        flex-wrap: wrap;
        display: flex;
        width: 100%;
    }

    .login-card {
        padding-top: 60px;
        text-align: center;
    }

    .login-card.regformwrap {
        max-width: 100%;
        text-align: left;
    }

    body.rtl .login-card.regformwrap {
        text-align: right;
    }


    .login-card.regformwrap .input-label {
        text-align: left;
    }


    .loginformwrap {
        text-align: left
    }
}

.appointment-popup .appointment-user-wrapper .user-avatar {
    position: relative;
    padding-bottom: 100%;
    width: 100%;
    overflow: hidden;
}

.appointment-popup .appointment-user-wrapper .user-avatar img {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
    .appointment-popup .appointment-user-wrapper .user-avatar {
        flex: 0 0 35%;
        padding-bottom: 35%;
    }
}

.appointment-popup .appointment-user-wrapper .appointment-user {
    padding: 2rem 2rem 0 2rem;
}

@media screen and (max-width: 768px) {
    .appointment-popup .appointment-user-wrapper .appointment-user {
        flex: 1;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        padding: 2rem;
        flex-direction: column;
    }
}

.appointment-popup .appointment-user-wrapper .appointment-user .username {
    color: white;
    font-size: 1.8rem;
}

.appointment-popup .appointment-user-wrapper .appointment-user .specialization {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.3rem;
    display: block;
    margin-top: 0.5rem;
}

.appointment-popup .appointment-user-wrapper .appointment-user .notation {
    display: flex;
    margin-top: 0.5rem;
}

.appointment-popup .appointment-user-wrapper .appointment-user .notation span {
    padding: 0.25rem !important;
}

.appointment-popup .appointment-user-wrapper .appointment-user .notation span:before {
    content: "\f005";
    font-family: "Font Awesome 5 Pro";
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
    display: block;
}

.appointment-popup .appointment-user-wrapper .appointment-user .notation.five span:nth-child(-n + 5):before,
.appointment-popup .appointment-user-wrapper .appointment-user .notation.four span:nth-child(-n + 4):before,
.appointment-popup .appointment-user-wrapper .appointment-user .notation.three span:nth-child(-n + 3):before,
.appointment-popup .appointment-user-wrapper .appointment-user .notation.two span:nth-child(-n + 2):before,
.appointment-popup .appointment-user-wrapper .appointment-user .notation.one span:nth-child(-n + 1):before {
    color: #ee5181;
}

.appointment-popup .appointment-user-wrapper .appointment-location {
    padding: 2rem 0;
    margin: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.appointment-popup .appointment-user-wrapper .appointment-location p {
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

@media screen and (max-width: 768px) {
    .appointment-popup .appointment-user-wrapper .appointment-location {
        width: 100%;
        margin: 0;
    }
}

.appointment-popup .appointment-calendar {
    width: 100%;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
}

.appointment-popup .appointment-calendar .current-week {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 0;
    border-bottom: 1px solid #f3f3f3;
    align-items: center;
}

.appointment-popup .appointment-calendar .current-week > span {
    font-size: 2rem;
    color: #2d3152;
}

.appointment-popup .appointment-calendar .current-week > span i {
    color: #ee5181;
    margin-right: 0.5rem;
    opacity: 0.5;
}

.appointment-popup .appointment-calendar .current-week .calendar-nav button {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0;
    cursor: pointer;
}

.appointment-popup .appointment-calendar .current-week .calendar-nav button:before {
    font-family: "Font Awesome 5 Pro";
    font-size: 2rem;
    padding: 0 1.5rem;
    display: block;
}

.appointment-popup .appointment-calendar .current-week .calendar-nav button.prev:before {
    content: "\f053";
}

.appointment-popup .appointment-calendar .current-week .calendar-nav button.next:before {
    content: "\f054";
}

@media screen and (max-width: 768px) {
    .appointment-popup .appointment-calendar .current-week .calendar-nav {
        flex-wrap: wrap;
    }

    .appointment-popup .appointment-calendar .current-week .calendar-nav .calendar-nav button:before {
        padding: 0 1rem;
        font-size: 1.2rem;
    }

    .appointment-popup .appointment-calendar .current-week .calendar-nav > span {
        font-size: 1.5rem;
    }
}

.appointment-popup .appointment-calendar .calendar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.appointment-popup .appointment-calendar .calendar-wrapper .calendar-week {
    border-bottom: 1px solid #f3f3f3;
}

.appointment-popup .appointment-calendar .calendar-wrapper .calendar-week ul {
    padding: 0;
    list-style: none;
    display: flex;
    width: 100%;
    margin: 0;
}

.appointment-popup .appointment-calendar .calendar-wrapper .calendar-week ul li {
    width: 100%;
    padding: 1.5rem 0;
    text-align: center;
    color: #575757;
}

.appointment-popup .appointment-calendar .calendar-wrapper .calendar-hours {
    overflow: auto;
    margin: 0 -2rem;
    padding: 1rem 2rem;
    height: 100%;
}

.appointment-popup .appointment-calendar .calendar-wrapper .calendar-hours ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.appointment-popup .appointment-calendar .calendar-wrapper .calendar-hours > ul {
    display: flex;
}

.appointment-popup .appointment-calendar .calendar-wrapper .calendar-hours > ul > li {
    width: 100%;
    text-align: center;
}

.appointment-popup .appointment-calendar .calendar-wrapper .calendar-hours > ul > li > ul > li {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 3.5rem;
    color: #71678c;
    cursor: pointer;
    padding: 0.5rem;
}

.appointment-popup .appointment-calendar .calendar-wrapper .calendar-hours > ul > li > ul > li.empty:hover {
    background: none;
    box-shadow: none;
}

.appointment-popup .appointment-calendar .calendar-wrapper .calendar-hours > ul > li > ul > li.empty:before {
    content: "";
    width: 1.5rem;
    margin: 0 auto;
    height: 0.5rem;
    background: #f3f3f3;
    display: block;
}

.appointment-popup .appointment-calendar .calendar-wrapper .calendar-hours > ul > li > ul > li:hover,
.appointment-popup .appointment-calendar .calendar-wrapper .calendar-hours > ul > li > ul > li.active {
    background: #ee5181;
    border-radius: 1rem;
    color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.appointment-popup .appointment-calendar .calendar-buttons {
    display: flex;
    border-top: 1px solid #f3f3f3;
    margin: 0 -2rem;
}

.appointment-popup .appointment-calendar .calendar-buttons button {
    cursor: pointer;
    outline: none;
    background: transparent;
    width: 100%;
    border: none;
    font-size: 1.5rem;
    padding: 2rem;
    color: #9b9b9b;
    letter-spacing: 1px;
}

.appointment-popup .appointment-calendar .calendar-buttons button:hover {
    background: #f3f3f3;
}

.appointment-popup .appointment-calendar .calendar-buttons button.validation {
    background: #ee5181;
    color: white;
}

.appointment-popup .appointment-calendar .calendar-buttons button.validation:hover {
    background: #ec3a70;
}

.br-5 {
    border-radius: 5px !important;
}

@media screen and (max-width: 768px) {

    /*Responsive Chanages*/
    .hero-circle-item span {
        margin-left: 8px;
    }

    .hero-section__second-title {
        margin-top: 17px;
    }

    section.hero-section.container {
        padding-bottom: 0px !important;
    }

    .learn-more-section p {
        margin-bottom: 25px !important;
    }

    .newsletter-title {
        padding: 0px 20px;
    }

    a.ils-20 {
        width: 90%;
        text-align: left;
    }

    /*End Chanaegs*/
    .appointment-popup .appointment-calendar {
        padding: 0;
    }

    .appointment-popup .appointment-calendar .calendar-wrapper .calendar-hours {
        padding: 0;
        margin: 0;
    }

    .appointment-popup .appointment-calendar .calendar-wrapper .calendar-hours > ul > li > ul > li {
        padding: 1rem 0 0.75rem 0;
        font-size: 1.2rem;
    }

    .appointment-popup .appointment-calendar .calendar-buttons {
        margin: 0;
    }
}

.panel-group {
    margin-bottom: 0;
}

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
}

.panel-group .panel .panel-heading {
    padding: 0;
}

.panel-group .panel .panel-heading h4 a {
    background: #f8f8f8;
    display: block;
    font-weight: bold;
    padding: 15px;
    text-decoration: none;
    transition: 0.15s all ease-in-out;
    position: relative;
    padding-right: 30px !important;
    padding-left: 30px !important;
    font-size: 16px;
}

.panel-group .panel .panel-heading h4 a:hover,
.panel-group .panel .panel-heading h4 a:not(.collapsed) {
    background: #fff;
    transition: 0.15s all ease-in-out;
}

.panel-group .panel .panel-heading h4 a:not(.collapsed) i:before {
    content: "\f068";
}

.panel-group .panel .panel-heading h4 a i {
    color: #999;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(0, -50%);
}

.panel-group .panel .panel-body {
    padding-top: 0;
}

.panel-group .panel .panel-heading + .panel-collapse > .list-group,
.panel-group .panel .panel-heading + .panel-collapse > .panel-body {
    border-top: none;
}

.panel-group .panel + .panel {
    border-top: none;
    margin-top: 0;
}

@media (min-width: 991px) {
    .menu-category > ul > li {
        background-color: transparent;
    }
}

.menu-category > ul > li {
    font-weight: 400;
    font-size: 14px;
}

.form-control {
    border-radius: 0;
    border: 1px solid #00c7c4;
}

.btn {
    border-radius: 0;
}

.custom-mark {
    z-index: -1;
    bottom: 0px;
    transform: translate(-30%, 40%);
}

.custom-star {
    top: 0;
    right: 0;
    transform: translate(100%, -120%);
}

.newsletter-form {
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid #afafaf;
    max-height: 60.3px;
    width: 430px;
}

.inst-video {
    border-radius: 1.5rem;
}

.calendarr {
    border-radius: 1rem;
}

.swiper-container {
    width: 600px;
}

.custom-gift {
    bottom: 0;
    left: 14px;
    z-index: 100;
}

.custom-gift-2 {
    bottom: 0;
    right: 14px;
    z-index: 100;
}

.tulkka-navbar {
    background-color: #00c7c4;
    height: 71px;
}

.comp-logo {
    width: 150px;
}

.hero-title {
    font-size: 32px;
}

.subs-logo {
    width: 300px;
}

.footer-title {
    font-size: 20px;
}

.footer-branding-title {
    font-size: 17px;
}

.social-icon {
    font-size: 20px;
}

.newsletter-title {
    font-size: 26px;
}

.profile-img {
    width: 64px;
    height: 64px;
}

.teacher-description {
    font-size: 14px;
}

.profile-section {
    margin-top: 200px;
}

.hero-student {
    object-fit: cover;
    width: 100%;
    height: 303px;
}

.translate-middle {
    transform: translate(-5%, -50%);
}

.custom-dots {
    z-index: -1;
    bottom: 0;
    right: 0;
    transform: translate(20%, 30%);
}

.custom-dots-video {
    z-index: -1;
    top: 0;
    left: 0;
    transform: translate(-30%, -30%);
}

.stats-title {
    font-size: 18px;
}

.stats-desc {
    font-size: 14px;
}

.stats-img {
    width: 40px;
    height: 40px;
}

.font-40 {
    font-size: 40px;
}

.font-10 {
    font-size: 10px;
}

.custom-highlight {
    top: -20px;
    left: -12px;
}

.custom-sweet-mark {
    top: -20px;
    left: -15px;
}

.question-img {
    width: 360px;
}

.play-button {
    font-size: 35px;
    position: absolute;
    top: 100px;
    left: 150px;
    width: 70px;
    height: 70px;
}

.question-section-title {
    font-size: 26px;
}

.custom-mark-video {
    z-index: -1;
    bottom: 0px;
    right: 0px;
    transform: translate(80%, 64%);
}

.navbar-toggle-content {
    background-color: #00c7c4 !important;
}

.nav-item {
    color: white;
}

.close-icon {
    font-size: 26px;
}

.comp-logo-mobile {
    width: 175px;
}

.pag-left {
    z-index: 100;
    top: 50%;
    left: -50px;
}

.pag-right {
    z-index: 100;
    top: 50%;
    right: -50px;
}

.testimonial-img {
    width: 49px;
    height: 49px;
}

.testimonial-title {
    font-size: 30px;
}

.instructor-thumb-img {
    width: 300px;
}

.play-button-instructor {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
}

.instructor-about {
    font-size: 13px;
}

.instructor-name {
    font-size: 15px;
}

.cart-banner {
    background-image: linear-gradient(to bottom,
    rgba(0, 199, 196, 0.2),
    rgba(0, 199, 196, 0.4)),
    url("/assets/default/img/aboutus-header.png");
    height: 348px;
    background-position: center;
    background-size: cover;
}

.grow-img {
    width: 350px;
    transform: translate(-10px, 0);
}

.custom-branding {
    z-index: -1;
    bottom: 90px;
    right: 150px;
    transform: translate(80%, 64%);
}

.upgrade-title {
    font-size: 28px;
}

.upgrade-section {
    background-image: url("/assets/default/img/upgrade-bg.png");
}

.custom-upgrade {
    z-index: -1;
    top: 0px;
    left: 0px;
}

.custom-upgrade-img {
    width: 150px;
}

.upgrade-img {
    width: 350px;
    transform: translate(20px, 0);
}

.subs-modal-title {
    font-size: 20px;
}

.subs-modal-price {
    font-size: 30px;
}

.subs-modal-desc {
    font-size: 10px;
}

.course-content-section .nav-tabs .nav-item a.active {
    color: white !important;
    background-color: #00c7c4 !important;
}

.nav-tabs .nav-item a.active:after {
    display: none;
}

.custom-dots-profile {
    z-index: -1;
    top: 0;
    right: 0;
    transform: translate(40%, -40%);
}

.profil-img {
    z-index: 2;
}

.subs-howoften {
    font-size: 12px;
}

.subs-howlong {
    font-size: 12px;
}

.hero-features {
    font-size: 18px;
}

.panel-group .panel .panel-heading h4 a:hover,
.panel-group .panel .panel-heading h4 a:not(.collapsed) {
    box-shadow: 0 3px 15px 0 rgb(0 0 0 / 10%) !important;
}

.popular-badge {
    transform: translate(0px, -25px);
    position: absolute;
    left: 30%;
    top: 0;
}

.card {
    background-color: #bfefee !important;
}

.modal-header {
    border-bottom: 1px solid #00c7c4;
}

.buy-card {
    border: 1px solid #d0d0d0;
    background-color: #fbfbfb;
}

.buy-card-item {
    background-color: #bfefee;
}

.subs-modal-header {
    font-size: 16px;
}

.modal-title {
    font-size: 15px;
    font-weight: 400;
}

.subs-modal-package {
    font-size: 16px;
}

.navbar {
    direction: ltr !important;
}

html[lang="he"] .custom-dots {
    left: 0 !important;
}

.search-icon {
    position: absolute;
    right: 26px;
    top: 16px;
}

html[lang="he"] .search-icon {
    position: absolute;
    left: 26px !important;
    top: 18px;
    right: initial;
}

.flagstrap-icon {
    display: none !important;
}

.goal-modal {
    background: #fbfbfb;
}

.custom-control {
    margin: 10px;
}

.navbar-brand {
    width: 150px;
}

.navbar-toggler {
    background-color: white;
    border: none;
}

.navbar-toggler-icon {
    background-image: url("/store/1/bars-icon.svg") !important;
}

.hero-section__second-title {
    text-align: center;
    font-size: 14px;
}

html[lang="he"] .hero-section__second-title {
    text-align: right;
}

.hero-section__element-list {
    font-size: 12px;
}

@media screen and (min-width: 768px) {
    .custom-mark {
        transform: translate(-30%, 40%);
    }

    .hero-section__second-title {
        text-align: left;
    }

    .modal-title {
        font-size: 20px;
        font-weight: 400;
    }

    .popular-badge {
        transform: translate(0px, -25px);
        position: absolute;
        left: 20%;
        top: 0;
    }

    .hero-section__element-list {
        font-size: 15px;
    }

    .modal-dialog {
        max-width: initial;
    }

    .custom-upgrade {
        width: 200px;
    }

    .upgrade-img {
        width: 300px;
        transform: translate(50px, 0);
    }

    .upgrade-title {
        font-size: 30px;
    }

    .grow-img {
        width: 348px;
        transform: translate(-40px, 0);
    }

    .custom-branding {
        width: 120px;
        z-index: -1;
        bottom: 330px;
        right: 150px;
        transform: translate(80%, 64%);
    }

    .instructor-name {
        font-size: 20px;
    }

    .instructor-about {
        font-size: 14px;
    }

    .instructor-thumb-img {
        width: 182px;
    }

    .instructor-layout.row {
        margin-right: -32px;
        margin-left: -32px;
    }

    .instructor-layout.row [class^="col-"] {
        padding-right: 32px;
        padding-left: 32px;
    }

    .custom-dots {
        transform: translate(20%, 30%);
    }

    .custom-star {
        top: 0;
        right: 0;
        transform: translate(120%, -120%);
    }
}

@media screen and (min-width: 992px) {
    .custom-mark {
        transform: translate(-80%, 40%);
    }

    .videoicone {
        top: 50% !important;
        left: 50%;
    }

    .hero-section__element-list {
        font-size: 20px;
    }

    .hero-section__second-title {
        text-align: left;
        font-size: 20px;
    }

    .subs-modal-package {
        font-size: 18px;
    }

    .subs-modal-header {
        font-size: 20px;
    }

    .popular-badge {
        transform: translate(0px, -25px);
        position: absolute;
        left: 25%;
        top: 0;
    }

    .modal-dialog {
        max-width: 1140px;
    }

    .custom-upgrade-img {
        width: 210px;
    }

    .upgrade-img {
        width: 458px;
        transform: translate(50px, 0);
    }

    .upgrade-title {
        font-size: 40px;
    }

    .grow-img {
        width: 630px;
        transform: translate(-150px, 0);
    }

    .custom-branding {
        z-index: -1;
        bottom: 150px;
        right: 200px;
        transform: translate(80%, 64%);
    }

    .custom-sweet-mark {
        top: -30px;
        left: -30px;
    }

    .testimonial-title {
        font-size: 40px;
    }

    .play-button {
        font-size: 35px;
        position: absolute;
        top: 155px;
        left: 245px;
        width: 70px;
        height: 70px;
    }

    .nav-link {
        color: black !important;
    }

    .menu-category > ul > li {
        color: black !important;
    }

    .navbar-toggle-content {
        background-color: white !important;
    }

    .tulkka-navbar {
        background-color: white;
        height: 95px;
    }

    .hero-title {
        font-size: 50px;
        color: black;
    }

    .menu-category > ul > li {
        padding: 0 !important;
    }

    .newsletter-title {
        font-size: 40px;
    }

    .profile-img {
        width: 76px;
        height: 76px;
    }

    .hero-student {
        object-fit: cover;
        width: 463px;
        height: 463px;
    }

    .translate-middle {
        transform: translate(-20%, -50%);
    }

    .custom-dots {
        transform: translate(40%, 30%);
    }

    .question-img {
        width: 535px;
    }

    .question-section-title {
        font-size: 40px;
    }

    .custom-mark-video {
        z-index: -1;
        bottom: 0px;
        right: 0px;
        transform: translate(120%, 44%);
    }
}

@media screen and (min-width: 1200px) {
    .comp-logo {
        width: 180px;
    }

    .navbar-brand {
        width: 170px;
    }
}

@keyframes jump {
    0% {
        transform: translate(-20%, -50%) scale(1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    100% {
        transform: translate(-20%, -50%) scale(1.05);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
}

/* Custom css*/
.navbar .dropdown-menu {
    left: auto;
    right: 0;
}

.navbar .dropdown-menu:after {
    top: -9px;
    right: 15px;
    left: auto;
}

.modal-dialog-scrollable .modal-body.is-video {
    padding: 0;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-body.is-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-circle-item {
    display: flex;
}

.hero-circle-item > i {
    margin-top: 3px;
}

.container {
    max-width: none;
    padding: 0 15px;
}

.contact-banner {
    background-image: url("/assets/default/img/contact-header.jpg");
    height: 248px;
}

.contact-heading {
    font-size: 5rem;
}

.contact-info-section {
    padding: 15px 0;
    color: #fff;
    background-color: #00c7c4;
}

.contact-subtitle {
    color: #f3f3f3;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.contact-item + .contact-item {
    border-left: 1px solid #fff;
}

.contact-icon-title {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info-box {
    max-width: 240px;
}

.contact-form-section {
    margin-bottom: 50px;
}

.contact-form-section .input-label,
.contact-form-section .form-control {
    font-size: 16px;
    line-height: 18px;
}

.newsletter-title {
    max-width: 551px;
    margin-bottom: 20px;
}

.footer .footer-subscribe.newsletter-container {
    padding: 47px 10px;
}

.newsletter-email {
    height: 58px;
    font-size: 16px;
}

.newsletter-btn {
    margin-top: 24px;
    font-size: 18px;
}

/* .modal-dialog-scrollable .plan-modal {
  overflow: auto;
}
.plan-modal::-webkit-scrollbar-thumb {
  display: none;
}
.plan-modal .modal-dialog {
  max-height: none;
}
.plan-modal .modal-body {
  overflow: hidden;
  max-height: none;
} */
.plan-modal .modal-body::-webkit-scrollbar {
    width: 4px;
}

.panel-sidebar .sidebar-menu {
    height: 100%;
}

.stats-container .row {
    padding: 0 40px;
}

.broad-card-header {
    margin-bottom: 22px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f3f3;
}

.broad-card-bottom {
    margin-top: 16px;
}

.broad-card-btn {
    padding: 5px 16px;
    background: #b0eceb;
}

.broad-card-btn img {
    margin-right: 4px;
}

.broad-card-video {
    height: 167px;
    object-fit: cover;
}

.panel-content {
    padding: 20px 24px;
    min-height: calc(100vh - 95px);
    margin-top: 0 !important;
}

.font-18 {
    font-size: 18px !important;
}

#status {
    max-width: 111px;
}

.custom-table tbody td {
    font-weight: 400;
}

.default-row {
    margin-left: -6px;
    margin-right: -6px;
}

.default-row > [class^="col-"] {
    padding-right: 6px;
    padding-left: 6px;
}

.row-40 {
    margin-left: -20px;
    margin-right: -20px;
}

.row-40 [class^="col-"] {
    padding-left: 20px;
    padding-right: 20px;
}

.row-20 {
    margin-left: -10px;
    margin-right: -10px;
}

.row-20 [class^="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

.settings-header-card {
    min-height: 91px;
}

.settings-user-profile {
    padding: 30px 36px;
}

.settings-user-profile .input-label {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 0;
}

.settings-user-profile .form-group {
    width: 222px;
}

.settings-user-profile .select2-container--default .select2-selection--single {
    border-color: #ccc !important;
}

.settings-user-profile .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ccc;
}

@media (max-width: 660px) {
    .settings-user-profile .form-group {
        width: 100%;
    }
}

.settings-user-profile .form-control {
    height: 32px;
    color: #ccc;
    border-radius: 5px;
    border-color: #ccc;
}

.settings-user-avatar {
    width: 140px;
    height: 140px;
}

.settings-user-name {
    margin-top: 8px;
}

.settings-timezone .select2-selection {
    height: 32px !important;
    padding: 0 10px !important;
}

.settings-timezone .select2-container .select2-selection__arrow {
    top: 3px !important;
}

.settings-btn {
    height: 30px;
    border-radius: 5px;
    padding: 0 20px;
}

.settings-bottom-sec {
    margin-right: -22.5px;
    margin-left: -22.5px;
}

.settings-bottom-item {
    min-height: 188px;
    height: 100%;
}

.settings-bottom-sec [class^="col-"] {
    padding-left: 22.5px;
    padding-right: 22.5px;
}

@media (max-width: 1439px) {
    .settings-bottom-sec {
        margin-right: -10px;
        margin-left: -10px;
    }

    .settings-bottom-sec [class^="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.br-10 {
    border-radius: 10px !important;
}

.font-weight-semibold {
    font-weight: 600 !important;
}

.time-slot .time-slot-item {
    display: inline-block;
    padding: 4px;
    margin-bottom: 10px;
    line-height: 1.2;
}

.custom-sm-switch .custom-switch .custom-control-label:before {
    width: 1.8rem;
    height: 1rem;
    top: -0.15rem;
    left: -2rem;
}

.custom-sm-switch .custom-switch .custom-control-label::after {
    width: calc(1rem - 3px);
    height: calc(1rem - 3px);
    top: calc(-0.1rem + 1px);
    left: calc(-2rem + 3px);
}

.settings-bottom-sec .custom-switch .custom-control-input:checked ~ .custom-control-label:after {
    transform: translateX(0.7rem);
}

/* .right-0 {
  right: 0;
} */

div.play-button-instructor {
    top: 50%;
    transform: translateY(-50%);
}

.text-left {
    text-align: left !important;
}

.hero-video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 8px 10px 12px;
    background: #fff;
    border-radius: 50%;
}

.hero-video-icon svg {
    stroke: var(--secondary);
    fill: var(--secondary);
}

.stats-container {
    background-color: #e7f0f2;
}

.stats-container > .container {
    box-shadow: 0px 0px 50px rgb(0 0 0 / 5%);
}

.footer-branding-title a:last-child img {
    margin-top: -5px;
}

a.bg-hover-primary:hover {
    background-color: var(--primary);
    color: #fff !important;
}

.border-primary {
    border: 1px solid var(--primary);
}

.plan-modal .dropdown .dropdown-menu {
    bottom: calc(100% + 15px);
    top: auto !important;
}

.plan-modal .dropdown .dropdown-menu:after {
    top: auto;
    bottom: -9px;
    border-top: 10px solid #fff;
    border-bottom-width: 0 !important;
}

.dashboard-profile-img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
}

.dashboard-timebox {
    padding: 8px 6px;
}

.z-index {
    z-index: 1 !important;
}

.br-none {
    border: none !important;
}

.font-60 {
    font-size: 60px;
}

.dashboard-ul {
    text-align: left;
    list-style-type: disc;
}

.dashboard-ul li {
    list-style: disc;
}

.btn.disable {
    cursor: not-allowed;
    background-color: #ccc;
    color: #fff;
}

.calendar-header {
    border-bottom: 1px solid var(--primary);
}

.panel-sidebar .dashboard-profile-img {
    width: 84px;
    height: 84px;
}

/* Front Pages Calendar */
.front-calendar .time-picker-container {
    padding: 10px;
}

.front-calendar .calendar-header {
    border-color: #ccc;
}

.front-calendar .date-slot-item {
    background-color: #ccc !important;
    border-radius: 10px;
}

.front-calendar .date-slot-item * {
    color: #000 !important;
}

.front-calendar .time-slot-item:hover,
.front-calendar .time-slot-item.picked {
    background: #ccc;
    border-color: #ccc;
    color: #000;
}

.time-slot-cont::-webkit-scrollbar {
    width: 4px;
}

.time-slot-cont::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.question-swiper-pagination {
    margin-top: 30px;
    text-align: center;
}

.question-swiper-pagination .swiper-pagination-bullet-active {
    background-color: #00c7c4;
}

/* Lesson Modal */
.lesson-modal .modal-dialog {
    max-width: 466px;
}

.lesson-content .custom-control-label {
    padding: 11px 20px;
    width: 100%;
    padding-left: 40px;
    border: 1px solid #b9b9b9;
    border-radius: 10px;
    margin-bottom: 8px;
}

.lesson-content .custom-control-label:before {
    top: 14px;
    left: 12px;
    width: 16px;
    height: 16px;
}

.lesson-content .custom-control-label:after {
    top: 12px;
    left: 10px;
    width: 20px;
    height: 20px;
}

.lesson-content .custom-control-input:checked ~ .custom-control-label,
.lesson-content .custom-control-input:not(:disabled):active ~ .custom-control-label {
    border-color: var(--primary) !important;
}

.max-h-100 {
    max-height: 100% !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

#inputTypes::-webkit-scrollbar {
    width: 0;
}

.btn-book {
    min-width: 160px;
    height: 24px;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 1rem;
}

.round-dots {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.mobile-filter-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 492;
}

.mobile-filter-container {
    position: fixed;
    top: 66px;
    right: -28rem;
    padding: 1rem;
    min-width: auto;
    background: #fff;
    max-width: 280px;
    height: 100%;
    opacity: 1;
    visibility: hidden;
    transform: none;
    overflow: auto;
    transition: right 0.3s, visibility 0.3s;
    z-index: 1000;
}

.instructor-layout.opened .mobile-filter-container {
    visibility: visible;
    right: 0;
}

.instructor-layout.opened .mobile-filter-overlay {
    visibility: visible;
    opacity: 1;
}

.full {
    display: none;
}

.screen {
    display: block;
}

@media (max-width: 1199px) {
    .video-modal .modal-content {
        width: calc(100% - 20px) !important;
        height: 100% !important;
    }

    .broad-container .btn-sm {
        padding: 0 10px;
    }

    .video-modal .modal-dialog {
        max-width: none;
    }
}

@media (max-width: 991px) {
    .panel-sidebar {
        top: 71px;
        z-index: 99999;
    }

    .full {
        display: block;
    }

    .screen {
        display: none !important;
    }

    .videoicone {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 20px 12px 0 rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        z-index: 2;
    }

    .videoicone svg {
        stroke: var(--secondary);
        fill: var(--secondary);
    }

    .learn-more-section .custom-dots-video {
        left: 10%;
    }

    .learn-more-section .play-button {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .learn-more-section .question-img {
        width: 80%;
    }

    .learn-more-section > .row > .col-12:first-child {
        text-align: center;
    }

    .learn-more-section .mt-md-0 {
        max-width: 80%;
        margin: auto;
        text-align: center;
    }

    .learn-more-section .mt-md-0 p {
        font-size: 14px;
        margin: auto;
        text-align: left;
    }

    .class-first-row {
        max-width: calc(100% + 20px);
        margin-right: -10px;
        margin-left: -10px;
    }

    .class-first-row [class^="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 991px) {
    .navbar .navbar-toggle-content {
        overflow: scroll;
    }
}


@media screen and (max-width: 990px) {
    .lang {
        display: block !important;
    }

    .loginpanel {
        position: relative;
        top: 0;
        left: 0;
        margin-left: 0PX !important;
        order: 2;
    }

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


    .borderspan {
        border: 2px solid #fff;
        margin-top: 1px;
        margin-left: -1px;
        height: 38px;
    }

    .registerbtn {
        background-color: #fff !important;
        color: #00C7C4 !important;
    }

    .loginpanel a.mx-10 {
        margin-left: 0px !important;
    }

    .planshr {
        display: block;
        float: left;
        width: 15%;
    }

    .btn-transparent {
        border-radius: 50%;
        border: 2px solid #fff;
    }

    .btn-transparent i {
        width: 30px;
        height: 30px;
    }

    .btn-transparent .fa-x:before {
        font-size: 18px;
    }

    .language-select button {
        color: #fff;
        padding: 0px !important;
    }

    .navbar .dropdown-toggle {
        color: #fff;
    }

    .navbar .dropdown-menu {
        left: 40px;
        right: auto;
        top: -10px;
    }

    .navbar .dropdown-menu:after {
        top: -9px;
        right: auto;
        left: 20PX;
    }

    ul.navbar-nav {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .learn-more-section .mt-md-0 {
        text-align: left;
    }

    .font-md-10 {
        font-size: 10px;
    }

    img.rounded-circle {
        min-width: 24px !important;
    }

    .btn-transparent {
        border-radius: 50%;
        border: 2px solid #fff;
    }

    .btn-transparent i {
        width: 30px;
        height: 30px;
    }

    .btn-transparent .fa-x:before {
        font-size: 18px;
    }

    .navbar .dropdown-menu {
        left: 160px;
        right: auto;
        top: 15px;
    }

    .shadow-md-none {
        box-shadow: none !important;
    }

    .navbar .dropdown-menu:after {
        left: 15px;
        right: auto;

    }

    .navbar .dropdown-toggle {
        color: #fff;
    }

    .panel-sidebar .dashboard-profile-img {
        width: 36px;
        height: 36px;
    }

    .navbar .ml-md-50.d-lg-none a:first-child {
        margin-left: 0 !important;
    }

    .w-md-100 {
        width: 100% !important;
    }

    .contact-heading {
        font-size: 36px;
    }

    .about-firstsec {
        display: flex;
        flex-direction: column-reverse;
    }

    .grow-img {
        width: 80%;
        margin: auto;
        margin-top: 30px;
    }

    .potential-sec {
        text-align: center;
    }

    .potential-sec .custom-upgrade {
        z-index: 1;
        left: 15%;
    }
}

@media (max-width: 575px) {
    .potential-sec .custom-upgrade {
        left: 20px;
    }

    .time-slot .time-slot-item {
        padding: 2px;
        margin-bottom: 0 0 5px;
        font-size: 10px;
    }

    .hero-section .px-sm-40 {
        /* width: 130px; */
        width: 100%;
    }

    .flagstrap {
        display: inline;
    }

    /* .navbar .dropdown-menu {
      left: 50%;
    } */
    .navbar .dropdown-menu:after {
        right: auto;
    }
}

@media (min-width: 768px) {
    .panel-content {
        padding: 20px 32px;
    }

    .pt-md-90 {
        padding-top: 90px !important;
    }

    .hero-circle-item {
        margin-bottom: 1rem;
    }

    .grow-img {
        float: right;
        margin-left: 30px;
    }
}

@media (min-width: 992px) {
    .grow-img {
        max-width: 50%;
        float: left;
        transform: translate(-80px, 50px);
        margin-bottom: 60px;
    }

    .time-slot .time-slot-item {
        padding: 4px 18px;
        width: 90%;
    }

    .time-slot-item-dashboard {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1180px;
        padding: 0;
    }

    .panel-content {
        padding: 20px;
    }
}

.setting-tabs .active .settings-header-card {
    border: 2px solid var(--primary);
    color: var(--primary);
}

.settings-biography textarea,
.settings-biography input {
    border: 1px solid #ccc;
}

.btnclassjoin {
    color: #00c7c4 !important;
}

.butjoinclass {
    background-color: #cccccc;
    color: #ffffff !important;
    border-radius: 7px;
}

.instructor-finder {
    padding-bottom: 50px;
}

.round-dots + p {
    width: calc(100% - 23px);
}

.instructor-finder-card {
    align-items: self-start !important;
    background: #fff !important;
    margin-top: 0 !important;
    border: 0 !important;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1) !important;
    padding: 20px !important;
}

.instructor-finder-card a.d-flex.flex-column {
    padding: 0 15px 0 0 !important;
}

#instructorsList {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    background: transparent;
    margin-top: 40px;
    box-shadow: none !important;
}

.instructor-finder-card a.d-flex.flex-column .col-5.d-flex {
    flex: 0 0 calc(100% - 80px);
    max-width: calc(100% - 80px);
    padding: 0 10px;
    margin: 0 !important;
}


.pace-activity {
    display: block !important;
    position: fixed !important;
    z-index: 9999 !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0000005e;
    animation: inherit !important;
}

.pace-activity:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 50px;
    height: 50px;
    background: url(../img/Logo-svg.svg);
    background-size: 50px;
    filter: brightness(22);
    background-repeat: no-repeat;
    -webkit-animation: zoom-anim 1s linear infinite;
    -moz-animation: zoom-anim 1s linear infinite;
    -ms-animation: zoom-anim 1s linear infinite;
    -o-animation: zoom-anim 1s linear infinite;
    animation: zoom-anim 1s linear infinite;
}

@keyframes zoom-anim {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.4);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.pace-activity span {
    display: block;
    position: absolute;
    z-index: 9999;
    top: 46%;
    left: 48%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%);
    border: solid 3px transparent;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 50%;
    -webkit-animation: pace-spinner 400ms linear infinite;
    -moz-animation: pace-spinner 400ms linear infinite;
    -ms-animation: pace-spinner 400ms linear infinite;
    -o-animation: pace-spinner 400ms linear infinite;
    animation: pace-spinner 400ms linear infinite;
}

.panel-section-card {
    padding: 20px !important;
}

.panel-section-card .position-absolute {
    position: relative !important;
}

.panel-content table.custom-table {
    white-space: nowrap;
}

table .table-actions a {
    margin-right: 25px !important;
}

.subs-logo {
    width: 170px;
}

.subs-modal-header {
    margin-top: 10px !important;
}

.subscription-step .subs-card {
    padding: 30px !important;
}

.subscription-step .modal-body {
    padding-bottom: 40px !important;
}

.testimonials-container .home-sections {
    margin-top: 0;
}

.testimonials-container {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.footer .container-fluid {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.learn-more-section {
    padding-bottom: 70px !important;
    padding-top: 70px !important;
}

.webinar-actions.mx-2 {
    margin-left: 20px !important;
}


@media screen and (max-width: 375px) {
    .videoicone {
        top: 30% !important;
        left: 50%;
    }

    .panel-content .activities-container .class-first-row .col-md-4.col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width: 320px) {
    .subs-logo {
        width: auto !important;
    }

    .planshr {
        display: block;
    }

    .videoicone {
        top: 22% !important;
        left: 50%;
    }
}

@media screen and (max-width: 768px) {
    .modal-content.pop-youtube-model {
        height: 50% !important;
    }
}

@media (max-width: 1441px) {
    .headertitle h3 {
        font-size: 50px;
        line-height: 76px;
    }

    .logintitlewrap {
        height: 240px;
    }

    .login-card {
        padding: 55px 15px 55px 15px !important;
    }
}

@media (max-width: 1281px) {
    .logintitlewrap {
        height: 200px;
    }

    .login-card h6 {
        margin-bottom: 30px;
    }

    .headertitle h3 {
        font-size: 40px;
        line-height: 66px;
    }

    .agreementwrap .custom-control {
        margin-top: 30px;
    }
}

@media (max-width: 1200px) {

    .footer .footer-branding-title a i,
    .footer .footer-branding-title a img {
        margin: 0 5px !important;
    }

    .footer .footer-branding-title a img {
        position: relative;
        top: -2px;
    }
}

@media (max-width: 991px) {
    .learn-more-section {
        padding-bottom: 50px !important;
        padding-top: 50px !important;
    }

    .learn-more-section .box {
        margin-top: 0;
        margin-left: 0;
        padding: 0 20px;
    }

    .learn-more-section .question-img {
        width: 100%;
    }

    .learn-more-section .mt-md-0 p {
        font-size: 14px;
        margin: auto;
        margin-top: 20px !important;
    }

    .rtl .learn-more-section .mt-md-0 p {
        text-align: right;
    }

    .learn-more-section .mt-md-0 {
        max-width: 100%;
    }

    .chat-page {
        flex-wrap: wrap;
    }

    .chat-page .chat-content {
        width: calc(100% - 100px);
    }

    .chat-page .chat-sidepanel {
        width: 100px;
    }

    .chat-page .chat-search {
        display: none !important;
    }

    .chat-sidepanel #contacts ul li span {
        display: none;
    }

    .chat-page .chat-sidepanel {
        margin-top: 92px;
        height: calc(100vh - 325px);
    }

    #navbar.navbar .navbar-toggle-content {
        display: flex !important;
        flex-direction: column;
    }

    .navbar-toggle-content .navbar-toggle-header {
        order: 1;
    }

    .navbar-toggle-content .navbar-search {
        order: 2;
    }

    .navbar-toggle-content ul.navbar-nav {
        order: 5;
        width: 100%;
        margin: 0;
    }

    .navbar-toggle-content hr.planshr {
        order: 4;
        margin-right: auto;
        margin-left: 0;
        margin-bottom: 0;
        width: 100%;
        margin-top: 5px;
    }

    .navbar-toggle-content .lang {
        order: 3;
        margin: 0 !important;
    }

    .navbar-toggle-content .nav-start-a-live-btn {
        order: 6;
    }

    .navbar-toggle-content .dropdown.mt-20 {
        order: 4;
        position: absolute;
        top: 157px;
        left: 160px;
    }

    table.custom-table thead tr th:first-child {
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 99;
    }

    table.custom-table tbody tr {
        background: transparent !important;
    }

    table.custom-table tbody tr td {
        background: var(--panel-bg) !important;
    }

    table.custom-table tbody tr td:first-child {
        position: sticky;
        left: 0;
        z-index: 99;
    }

    table.custom-table thead tr th:first-child {
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 99;
    }

    table.custom-table tbody tr td .user-inline-avatar span.text-gray {
        display: none !important;
    }

    .panel-section-card .form-group.mt-4 {
        margin: 0 !important;
    }

    .panel-section-card .form-group.mt-4 svg {
        margin-top: 10px;
        width: 25px !important;
        height: 25px !important;
    }

}

@media (max-width: 767px) {
    .rtl .hero-section__element-list {
        font-size: 15px;
    }

    .rtl .hero-section__second-title {
        font-size: 16px;
    }

    .rtl .h4,
    .rtl h4 {
        font-size: 1.3rem;
    }

    .bg-panel-bg.py-md-100 {
        padding-bottom: 60px !important;
        padding-top: 60px !important;
    }

    .rtl .learn-more-section .mt-md-0 {
        text-align: right;
    }

    .home-sections {
        margin-top: 0;
    }

    .pb-60,
    .py-60 {
        padding-bottom: 30px !important;
    }

    .pt-60,
    .py-60 {
        padding-top: 30px !important;
    }

    .hero-section .hero-video {
        padding: 0 !important;
    }

    .footer .container-fluid.py-100 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .pb-100,
    .py-100 {
        padding-bottom: 40px !important;
    }

    .pt-100,
    .py-100 {
        padding-top: 40px !important;
    }

    .login-card {
        padding: 50px 15px 50px 15px !important;
    }

    .panel-content {
        margin-top: 70px !important;
        padding: 15px;
    }

    .setting-tabs li.col-12 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .settings-header-card {
        min-height: auto;
        padding: 20px 10px;
    }

    .settings-bottom-item {
        min-height: auto;
        height: auto;
        margin-bottom: 15px;
    }

    .settings-bottom-item .settings-btn {
        bottom: 0 !important;
        position: relative !important;
        margin-top: 0 !important;
    }

    .settings-user-profile {
        padding: 30px 15px;
    }

    .settings-user-profile .justify-content-between.pt-25 {
        padding-top: 0 !important;
    }

    .settings-biography {
        padding: 20px !important;
    }

    .panel-content .activities-container .class-first-row .col-md-4.col-12 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }

    .panel-content .activities-container .class-first-row .col-md-4.col-12 .mt-40,
    .panel-content .activities-container .class-first-row .col-md-4.col-12 .my-40 {
        margin-top: 20px !important;
    }

    .stats-card {
        height: 100%;
        padding-bottom: 10px;
    }

    .panel-content .activities-container .class-first-row .stats-card .mt-20 {
        margin-top: 10px !important;
    }

    .panel-content {
        min-height: calc(100vh - 141px);
    }

    .chat-page .chat-content {
        height: calc(100vh - 175px);
    }

    .chat-message-input .chat-send {
        width: 40px;
    }

    .panel-content .activities-container .col-12.col-md-6.col-xl-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .instructor-finder-card a.d-flex.flex-column {
        padding: 0 20px 0 0 !important;
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%;
    }

    .instructor-finder-card .vidiofullscreen {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
        margin-top: 0 !important;
    }

    .menu_btn .btn-primary {
        width: auto !important;
        border-radius: 7px !important;
        padding: 9px 15px 9px 50px;
        height: auto;
        position: relative;
    }

    .menu_btn .btn-primary span.toggle-btn {
        position: absolute;
        width: 26px;
        height: 2px;
        background: #fff;
        left: 14px;
        top: 11px;
    }

    .menu_btn .btn-primary span.toggle-btn:before {
        content: "";
        position: absolute;
        left: 3px;
        top: 5px;
        width: 20px;
        height: 2px;
        background: #fff;
    }

    .menu_btn .btn-primary span.toggle-btn:after {
        content: "";
        position: absolute;
        left: 6px;
        top: 10px;
        width: 14px;
        height: 2px;
        background: #fff;
    }

    .menu_btn.menu_btn_collapse .btn-primary span.toggle-btn {
        transform: rotate(43deg);
        top: 16px;
        width: 22px;
    }

    .menu_btn.menu_btn_collapse .btn-primary span.toggle-btn:before {
        display: none;
    }

    .menu_btn.menu_btn_collapse .btn-primary span.toggle-btn:after {
        width: 22px;
        transform: rotate(85deg);
        top: 0px;
        left: 0px;
    }

    .mobile-sidebar-width {
        width: 300px;
    }

    .small-device-navigation {
        position: fixed !important;
        z-index: 1;
    }

    .panel-section-card .align-items-center.justify-content-center.col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    .panel-content > .container-fluid {
        padding: 0 !important;
    }

    .panel-content > .container-fluid .row .d-flex.p-4.mt-30.col-12 {
        padding: 15px !important;
        margin-top: 0px !important;
    }
}

@media (max-width: 575px) {
    .instructor-finder-card a.d-flex.flex-column {
        padding: 0 !important;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .instructor-finder-card .vidiofullscreen {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 15px !important;
    }

    .btn-book {
        min-width: auto;
    }

    .instructor-finder-card .vidiofullscreen img {
        height: 180px !important;
        object-fit: cover;
    }
}

@media (max-width: 481px) {
    .cart-banner {
        height: 200px;
    }

    .font-18 {
        font-size: 16px !important;
    }

    .settings-header-card {
        padding: 15px 10px;
    }

    .testimonials-container {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .footer .container-fluid {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .learn-more-section {
        padding-bottom: 50px !important;
        padding-top: 50px !important;
    }

}

@media (max-width: 411px) {
    .mobile-sidebar-width {
        width: 220px;
        padding: 15px !important;
    }
}