@font-face {
    font-family: 'Yekan Bakh FaNum';
    src: url('../fonts/Yekan-Bakh-FaNum/woff/YekanBakhFaNum-Regular.woff') format('woff2'),
    url('../fonts/Yekan-Bakh-FaNum/woff2/YekanBakhFaNum-Regular.woff2') format('woff'),
    url('../fonts/Yekan-Bakh-FaNum/ttf/YekanBakhFaNum-Regular.ttf') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* یا optional */
}

@font-face {
    font-family: 'Yekan_Bakh_bold';
    src: url('../fonts/Yekan-Bakh-FaNum/woff/YekanBakhFaNum-bold.woff') format('woff2'),
    url('../fonts/Yekan-Bakh-FaNum/woff2/YekanBakhFaNum-bold.woff2') format('woff'),
    url('../fonts/Yekan-Bakh-FaNum/ttf/YekanBakhFaNum-bold.ttf') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* یا optional */
}

@font-face {
    font-family: 'Dast Nevis';
    src: url('../fonts/Danstevis.woff2') format('woff2'),
    url('../fonts/Danstevis.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* یا optional */
}

:root {
    --primary-color: #212121;
    --secondary-color: #565656;
    --yellow: #FBCF16;
    --light-yellow: #FDEB9F;
    --gray: #737373;
    --light-gray: #959499;
    --bg-color: #FAFAFA;
    --bg-light: #F8F5EA;
}

.form-control:focus {
    box-shadow: inherit;
}

/** {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    box-sizing: border-box;*/
/*}*/

body {
    font-family: 'Yekan Bakh FaNum', sans-serif;
    background-color: var(--bg-color);
    color: var(--primary-color);
    /*line-height: 1.6;*/
}

.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
}

.font11 {
    font-size: 11px;
}

.font12 {
    font-size: 12px;
}

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

.font21 {
    font-size: 21px;
}

.font20 {
    font-size: 20px;
}

.font22 {
    font-size: 22px;
}

.font24 {
    font-size: 24px;
}

.font36 {
    font-size: 36px;
}

.my-courses-title {
    font-size: 30px;
    font-weight: 600;
    color: #565656;
}

.my-courses-subtitle {
    font-size: 18px;
}

.my-course-card {
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


.my-course-image {
    border-radius: 15px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.my-course-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

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

.course-desc {
    font-size: 10px;
    margin-bottom: 13px;
    margin-top: 9px;
    color: #959499;
}

.course-footer {
    font-size: 12px;
    color: #6c757d;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(51, 51, 51, 0.2);
    margin-top: 13px;
    height: 50px;
}


.status-badge {
    position: absolute;
    top: 76%;
    left: -23px;
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 12px;
    min-width: 100px;
    text-align: center;
}

.status-paid-badge {
    background: #388E3C;
    color: #fff;
}


.status-new-badge {
    background: #565656;
    color: #fff;
}

.btn-course:hover {
    color: #FAFAFA !important;
}

.btn-course {
    width: 100%;
    background-color: #565656;
    color: #FAFAFA;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    border: none;
    display: block;
    text-align: center;
    text-decoration: none;
}

.other-courses-title {
    font-size: 24px;
    color: #565656;
    font-weight: 600;
}

.container-fluid.bg-F8F5EA {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

}

.container-fluid.bg-F8F5EA::-webkit-scrollbar {
    display: none;
}

.section-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: none; /* پنهان در حالت عادی */
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* HTML: <div class="loader"></div> */
.loader {
    color: #333333;
    width: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
    transform: translateX(-38px);
    animation: l21 .5s infinite alternate linear;
}

@keyframes l21 {
    50% {
        box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px
    }
    100% {
        box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px
    }
}


.dl-btn {
    background-color: #565656;
    color: #fff;
    padding: 8px 20px;
    width: 300px;
    border-radius: 8px;
    border: none;
}

.search-box .vip-tik {
    width: 26px;
}

.text-align-justify {
    text-align: justify;
}

/* Rating Section */
.rating-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.course-details .course-details-title {
    font-size: 14px;
    font-weight: bold;
}

.course-details .course-details-value {
    font-size: 12px;
    color: #303030;
}

.stars {
    display: flex;
    gap: 2px;
}

.stars i {
    color: #f18f18;
}

.reviews-count {
    font-size: 12px;
    color: var(--text-muted);
}

.text-565656 {
    color: #565656;
}

.course-list .course-card img {
    width: 125px;
    height: 125px;
    object-fit: cover;
    border-radius: 10px;
}

.course-card-image {
    padding: 8px;
}

.course-card .course-card-title {
    font-size: 20px;
}


.course-card .course-card-desc {
    font-size: 16px;
}

/*.success-payment {*/
/*    max-width: 500px;*/
/*    width: 100%;*/
/*}*/

.success-payment .return-to-home-btn {
    background-color: #565656;
    color: #fff;
    font-size: 14px;
    padding: 8px 80px;
    text-decoration: none;
    border-radius: 8px;
}

.success-payment .view-course-btn {
    color: #212121;
    font-size: 14px;
    padding: 8px 10px;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid #565656;
    background-color: inherit;

}

.success-payment .return-to-home-btn:hover {
    background-color: #565656 !important;
    color: #fff !important;
}

.success-payment .view-course-btn:hover {
    color: #212121 !important;
    background-color: inherit !important;

}

.course-card-section .course-card {
    border: 1px solid #BABABA;
    border-radius: 12px;
    box-shadow: 13px 8px 71.4px 4px #33333333;
    padding: 15px;
    transition: transform 0.5s ease, opacity 0.5s ease;

}

.course-card-section .course-rating {
    background: #F8F5EA;
    border-radius: 12px;
}

.text-bababa {
    color: #bababa;
}

.breadcrumb {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9998 19.9201L8.47984 13.4001C7.70984 12.6301 7.70984 11.3701 8.47984 10.6001L14.9998 4.08008' stroke='%23959499' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.breadcrumb-item.active {
    color: #3C3C3C;
}

.filtered {
    font-size: 11px;
    color: #bababa;
    padding-right: 25px;
}

.cursor-pointer {
    cursor: pointer;
}

.btn:focus, .btn:active {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

.app-dl-images .app-dl-image4 {
    left: 40px;
    top: -18px;
    transform: rotate(-10deg);
    transform-origin: center;
}

.app-web-dl-btn-wrapper {
    margin-right: 100px;
}

.app-web-dl-btn {
    background-color: #565656;
    color: #FAFAFA;
    border-radius: 8px;
    padding: 12px 24px;
    border: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    width: 50%
}

.app-mobile-dl-btn {
    background-color: #FAFAFA;
    color: #565656;
    border-radius: 8px;
    padding: 12px 24px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    width: 50%;
    border: 1px solid;
}

/*.custom-shape {*/
/*    margin: auto;*/
/*    position: relative;*/
/*    width: 722px;*/
/*    height: 122px;*/
/*    background: linear-gradient(*/
/*            to right,*/
/*            #9d9d9d 0%,*/
/*            #757575 38%,*/
/*            #3c3c3c 100%*/
/*    );*/
/*    -webkit-clip-path: path(*/
/*            "M648 59.624C648 68.4606 655.163 75.624 664 75.624H695C709.912 75.624 722 87.7123 722 102.624V106C722 114.837 714.837 122 706 122H161C146.088 122 134 109.912 134 95V60C134 51.1634 126.837 44 118 44H27C12.0883 44 0 31.9117 0 17V16C0 7.16345 7.16344 0 16 0H621C635.912 0 648 12.0883 648 27V59.624Z"*/
/*    );*/
/*    clip-path: path(*/
/*            "M648 59.624C648 68.4606 655.163 75.624 664 75.624H695C709.912 75.624 722 87.7123 722 102.624V106C722 114.837 714.837 122 706 122H161C146.088 122 134 109.912 134 95V60C134 51.1634 126.837 44 118 44H27C12.0883 44 0 31.9117 0 17V16C0 7.16345 7.16344 0 16 0H621C635.912 0 648 12.0883 648 27V59.624Z"*/
/*    );*/
/*}*/

/*.custom-shape .custom-shape-text {*/
/*    position: absolute;*/
/*    width: 65%;*/
/*    right: 102px;*/
/*    color: #fff;*/
/*    top: 27px;*/
/*}*/
.custom-shape-wrapper {
    position: relative;
    width: 100%;
    max-width: 722px;
    margin: auto;
    aspect-ratio: 722 / 130; /* نسبت اصلی شکل */
}

.custom-shape {
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
}

.custom-shape-text {
    position: absolute;
    top: 50%;
    right: 17%;
    transform: translateY(-50%);
    width: 62%;
    color: #fff;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.4;
    text-align: right;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

.highlight {
    background-color: #FDEB9F;
}

.app-dl-images .app-dl-image3 {
    z-index: 2;
    width: 134px;
    transform: rotate(8deg);
    transform-origin: center;
    margin-right: 55px;
}

.app-dl-title {
    font-size: 25px;
}

div:has(.app-dl-title) {
    margin-bottom: 30px;
}

.app-dl-title {
    font-size: 30px;
}


.app-dl-item-icon {
    font-size: 24px;
    font-family: 'Dast Nevis', sans-serif;
}

.app-dl-item-icon img {
    width: 25px;
}

.app-dl-item {
    padding-right: 15px;
}

.app-dl-item-text {
    font-size: 24px;
    color: #585555;
}

.form-check-input:checked {
    background-color: #fff !important;
    border-color: #bababa !important;
}

.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3E%3C/svg%3E") !important;
}


.form-check-input:focus {
    box-shadow: none;
}

.custom-modal h1 {
    font-size: 24px;
}

.custom-modal .form-floating > input {
    height: 70px !important;
    padding-right: 68px;
    padding-top: 43px !important;
    background-color: #F8F5EA;
    border-radius: 12px
}

.custom-modal .form-floating > label {
    right: 15px;
    top: 10px;
    color: #959499;
    font-size: 14px;
    font-weight: 400;
}

.custom-modal .icon::before {
    content: "";
    position: absolute;
    left: -7px;
    top: -9px;
    height: 50px;
    width: 2px;
    background: #BABABA;
    right: 39px;
}

.custom-modal .form-check-label {
    font-size: 16px;
}

/*
.custom-modal .top-design {
    top: 0;
    left: 0;
}*/

.custom-modal .confirm-btn {
    background-color: #565656;
    color: #FAFAFA;
    padding: 11px 15px;
    text-align: center;
    border-radius: 8px;
    margin-top: 35px;
    border: none;
}

.custom-modal .verification-input {
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid #EDF0F7;
    border-radius: 20px;
    padding: 0.5rem;
}

.custom-modal .edit-mobile-link {
    text-decoration: none;
    color: #0288D1;
    font-size: 14px;

}

.custom-modal .resend-link {
    text-decoration: none;
    color: #0288D1;
    font-size: 16px;

}

.custom-modal .timer-text {
    font-size: 16px;

}

.top-shape {
    position: absolute;
    top: -150px;
    left: -150px;
    width: 300px;
    height: 300px;
    background-color: #F8F5EA;
    border-radius: 50%;
    z-index: 99;
}

.app-download h1 {
    font-size: 36px;
}

.section-title {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.466;
    color: var(--primary-color);
    padding-top: 30px;
}

.btn2 {
    padding: 9px 24px;
    border: 1px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.bg-fafafa {
    background-color: #FAFAFA
}

.user-rating i {
    color: #f18f18;
    font-size: 8px;
}

.a-btn {
    padding: 9px 24px;
    border-radius: 8px;
    text-decoration: none;
    color: unset;
    border: 1px solid #565656;
    cursor: pointer;

}

.a-btn:hover {
    color: unset;

}

.btn-warning {
    background-color: var(--yellow);
    border-color: var(--yellow);
    color: var(--bg-color);
}

.btn-dark {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--bg-color);
}

.btn-737373 {
    background-color: #737373;
    border-color: #737373;
    color: var(--bg-color);
}

.btn-737373:hover {
    background-color: #737373;
    border-color: #737373;
    color: var(--bg-color);
}

.section-divider {
    height: 3px;
    background-color: rgba(157, 157, 157, 1);
    opacity: 0.09;
    /*margin: 40px 0;*/
    border: none;
}

/* Header */
.header {
    background-color: rgba(60, 60, 60, 0.8);
    padding: 10px 20px;
    border-radius: 16px;
    margin-top: 0;
    position: relative;
    z-index: 100;
    /*max-width: 1200px;*/
    margin-left: auto;
    margin-right: auto;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    order: 3;
}

.nav-menu {
    order: 2;
}

.header-buttons {
    order: 1;
    display: flex;
    gap: 25px;
}

.logo img {
    max-height: 40px;
}

.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 32px;
}

.nav-item {
    position: relative;
}

header .nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

header .nav-link:hover, header .nav-link:focus {
    color: #ffffff !important;
}

a:hover {
    color: inherit !important;
}


.my-classes-section .nav-tabs {
    border-bottom: none;
}


.my-classes-section .nav-link {
    font-weight: bold;
    font-size: 18px;
    color: #959499;
}


.my-classes-section .nav-link:hover,
.my-classes-section .nav-link:focus,
.my-classes-section .nav-link:focus-visible {
    font-weight: bold;
    font-size: 18px;
    color: #495057;
    border: none;

}

.my-classes-section .nav-link.active:hover,
.my-classes-section .nav-link.active:hover {
    color: inherit;
}

.my-classes-section .nav-link.active {
    border: none;
    border-bottom: 3px solid #FCD73E;
}

.nav-link img {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.nav-item.active .nav-link img {
    transform: rotate(180deg);
}

.submenu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--bg-color);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    padding: 10px 0;
    z-index: 10;
    display: none;
    margin-top: 10px;
}

.nav-item.active .submenu {
    display: block;
}


.submenu-item {
    padding: 8px 20px;
    display: block;
    color: #737373;
    font-size: 13px;
    text-decoration: none;
    text-align: right;
}

header .dropdown-item {
    padding: 8px 20px;
    display: block;
    color: #737373;
    font-size: 13px;
    text-decoration: none;
    text-align: right;
}

.select2-container--default .select2-results__option[aria-selected=true], header .dropdown-item:hover {
    background-color: #F8F5EA;

}

/*.submenu-item:hover {*/
/*    background-color: #F8F5EA;*/
/*    color: var(--primary-color);*/
/*}*/


.profile-btn, .profile-btn:hover {
    background-color: var(--yellow);
    font-size: 14px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #212121;
}

#auth .form-check-input:checked {
    background-color: black !important;
    border-color: black !important;
    box-shadow: none;
}


.level-btn {
    color: #FBCF16;
    border: #FBCF16 solid 0.5px;
}

.level-btn:hover {
    color: #FBCF16 !important;
    border: #FBCF16 solid 0.5px;
}

.level-btn:hover {
    color: #FBCF16;
    border: #FBCF16 solid 0.5px;
}

.top-left-design {
    position: fixed;
    /*background-color: #F8F5EA;*/
    width: 944px;
    height: 627px;
    /* left: -698px; */
    /* top: -332px; */
    transform: translate(-1104px, -405px);
    border-radius: 50%;
}

/* Hero Section
.hero-section {
    position: relative;
    background-color: #FAFAFA; /* From Figma fill_9JDGUR
    padding: 0;
    overflow: hidden;
}
*/
/* Desktop Hero Styles */
.hero-content {
    padding: 100px 0 160px;
    position: relative;
    height: 600px;
}

.hero-content-bg1 {
    z-index: 2;
    right: 135px;
    top: 32px;
}

.hero-content-bg2 {
    z-index: 1;
    right: 100px
}

.hero-content-bg-mobile {
    z-index: -1;
    top: 18px;
    left: 4px
}

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

.app-content-image-div {
    height: 474px;
    z-index: -1;
    top: -115px;
    /* left: -360px; */
    right: 170px;
}

.app-content-image-m {
    width: 335px;
    height: 422px;
    position: absolute;
    left: 270px;
    top: -119px;
}

.bg-F8F5EA {
    background-color: #F8F5EA;
}


.ellipse-cream {
    position: absolute;
    width: 944px;
    height: 624px;
    border-radius: 50%;
    background: #F8F5EA; /* From Figma fill_HL84LU */
    top: -80px;
    left: -80px;
    opacity: 0.8;
}

.ellipse-yellow {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 0.5px solid #FBCF16; /* From Figma stroke_BPCJ90 */
    top: 100px;
    left: 80px;
}

.vector-line-1 {
    position: absolute;
    height: 34px; /* From Figma strokeWeight */
    width: 120px;
    background: #FDEB9F; /* From Figma stroke_DHD84K */
    transform: rotate(-45deg);
    top: 150px;
    right: 220px;
}

.vector-line-2 {
    position: absolute;
    height: 34px; /* From Figma strokeWeight */
    width: 180px;
    background: #FDEB9F; /* From Figma stroke_DHD84K */
    transform: rotate(-45deg);
    top: 200px;
    right: 120px;
}

.decorative-lines {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 1px dashed #BBB9B0; /* From Figma stroke_4XA5SP */
    bottom: 50px;
    right: -80px;
    opacity: 0.4;
}

.hero-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    max-width: 100%;
    z-index: 2;
}

.violin-img {
    height: 458px;
    border-radius: 30px;
    z-index: 2;
    position: absolute;
    right: 145px;
    top: 44px;
}

/* .hero-text {
    position: relative;
    z-index: 3;
    padding-right: 20px;
    text-align: right;
    max-width: 500px;
    margin-right: 70px;
} */

.hero-text .subtitle {
    font-family: 'Dast Nevis', sans-serif;
    font-size: 40px; /* From Figma style_A721I2 */
    line-height: 1;
    color: #212121; /* From Figma fill_XBX10R */
    margin-bottom: 20px;
    font-weight: 400;
}

.hero-text .main-title {
    font-family: 'Dast Nevis', sans-serif;
    font-size: 64px; /* From Figma style_YLG68O */
    line-height: 1;
    color: #565656; /* From Figma fill_676RQD */
    margin-bottom: 20px;
    font-weight: 400;
}

.hero-text h3.subtitle {
    font-family: 'Dast Nevis', sans-serif;
    font-size: 40px; /* From Figma style_A721I2 */
    margin-top: 20px;
    font-weight: 400;
}

/* Mobile Hero Styles */
.hero-content-mobile {
    padding: 40px 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.hero-bg-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ellipse-cream-mobile {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #F8F5EA;
    top: -30px;
    left: -50px;
    opacity: 0.8;
}

.hero-image-mobile {
    width: 75%;
    max-width: 280px;
    margin: 20px 0;
    position: relative;
    z-index: 2;
}

.violin-img-mobile {
    width: 148px;
    height: 172px;
    border-radius: 20px;
    /*box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.2);*/
    display: block;
}

/*.hero-text-mobile {*/
/*    position: relative;*/
/*    z-index: 3;*/
/*    width: 100%;*/
/*    padding: 0 15px;*/
/*    text-align: center;*/
/*}*/

.subtitle-mobile {
    font-family: 'Dast Nevis', sans-serif;
    font-size: 20px;
    line-height: 1.2;
    color: #212121;
    margin-bottom: 10px;
    font-weight: 400;
    text-align: right;
    padding-right: 20px;
}

.main-title-mobile {
    font-family: 'Dast Nevis', sans-serif;
    font-size: 20px;
    line-height: 1.1;
    color: #565656;
    margin-bottom: 10px;
    font-weight: 400;
    text-align: center;
}

h3.subtitle-mobile {
    font-family: 'Dast Nevis', sans-serif;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 400;
    color: #212121;
}

.text-end {
    text-align: right;
}

.class-title {
    font-size: 16px;
    font-weight: 400;
}

.class-short-desc {
    font-size: 12px;
    font-weight: 400;
    color: #959499;
    /*border-bottom: 0.5px solid #BABABA;*/
    /*padding-bottom: 17px;*/
}

.class-details {
    margin-top: -82px;
}

.class-details li {
    margin-bottom: 6px;
}

.class-details-title {
    font-size: 12px;
    color: #959499;
}

.class-details-desc {
    font-size: 12px;
    color: #959499;

}

.class-more-info-btn {
    color: #212121;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: inherit;
    border: none;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.class-more-info-btn:hover {
    color: #212121;
    background-color: inherit;
}

.class-register-info-btn {
    color: #FAFAFA;
    background-color: #565656;
    padding: 5px 43px;
    border-radius: 8px;
    text-decoration: none;
}

.class-register-info-btn:hover {

    color: #FAFAFA !important;
}

/*.btn-fafafa {*/
/*    background-color: #565656;*/
/*    color: #FAFAFA;*/
/*    padding: 5px 128px;*/
/*    border-radius: 8px;*/
/*}*/

.checkout-box .pay-btn {
    background-color: #565656;
    color: #FAFAFA;
    width: 90%;
    height: 38px;
    border: none;
    border-radius: 8px;
}

.checkout-box .table td {
    font-size: 14px;
}

.teacher-about-title {
    font-weight: 600;
    font-size: 14px;
}

.checkout-box .price-original {
    text-decoration: line-through;
    color: #bababa;
    font-size: 16px;
}

.checkout-box .discounted-price {
    color: #212121;
    text-align: center;
    font-size: 18px;
}

.main-title {
    font-size: 36px;
    font-weight: 700;
    color: #565656;
    margin-top: 40px;
}

.main-subtitle {
    font-size: 24px;
    font-weight: 400;
    color: #565656;
    margin-bottom: 40px;
}

.main-title-hr {
    border-top: 0.5px solid #BABABA
}

/* Filter section styles */
.filters {
    background: #fff;
    border: 1px solid #BABABA;
    border-radius: 12px;
    /*width: 282px;*/
    padding: 24px 12px;
    margin: 0 auto 32px auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filters .form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")

}

#discountCode::placeholder {
    color: #dadada;
}

#reagentCode::placeholder {
    color: #dadada;
}

.checkout-box .form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")

}

.filters .form-check .form-check-input, .filters .form-check label {
    cursor: pointer;
}

.accordion {
    --bs-accordion-active-color: none;
    --bs-accordion-active-bg: none;
    /*height: auto;*/
    gap: 8px;
}

.courses-more-btn {
    border: 0.5px solid;
    color: #565656;
    background-color: #fff;
    cursor: pointer;
    padding: 5px 30px;
    border-radius: 8px;
}

.courses-reg-btn {
    border: 0.5px solid;
    color: #fff;
    background-color: #565656;
    cursor: pointer;
    padding: 5px 75px;
    border-radius: 8px;
}

.view-paid-course-btn {
    border: 0.5px solid;
    color: #fff;
    background-color: #388E3C;
    cursor: pointer;
    padding: 7px 75px;
    font-size: 14px;
    border-radius: 8px;
}

.view-course-btn {
    border: 0.5px solid;
    color: #fff;
    background-color: #565656;
    font-size: 14px;
    padding: 7px 70px;
    border-radius: 8px;
    text-decoration: none;

}

.view-course-btn:hover {
    color: #fff !important;
    background-color: #565656;
}

.courses-list-old-price {
    color: #B2B2B2;
    font-size: 18px
}

.courses-list-new-price {
    color: #388E3C;
    font-size: 22px
}

.courses-list-paid-badge {
    color: #388E3C;
    font-size: 18px
}

.class-status-btn {
    background-color: #737373;
    color: #ffffff;
    padding: 10px 20px;
    position: absolute;
    border-radius: 16px;
    border: none;
}

.class-end-sessions-status-btn {
    background-color: #D32F2F;
    color: #ffffff;
    padding: 10px 20px;
    position: absolute;
    border-radius: 16px;
    border: none;
    top: 43%;
    left: 40%;
}

.class-inactive-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: 12px;
}

.accordion-button:focus {
    border-color: unset;
    box-shadow: unset;
}


.filter-row {
    background: #fff;
    border: 1px solid #BABABA;
    border-radius: 8px;
    padding: 4px 8px;
    /*width: 258px;*/
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 0;
    gap: 16px;
}

.filter-row .form-check {
    padding-right: 7px;
}

.filter-label {
    color: #212121;
    font-size: 14px;
    font-weight: 400;
}

/* Custom toggle switch */
.switch {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #cccccc;
    transition: .4s;
    border-radius: 15px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 1px;
    bottom: 1px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #388E3C;
}

input:checked + .slider:before {
    transform: translateX(15px);
}

/* Filter buttons */
.filter-btn {
    width: 140px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    /*padding: 8px 18px;*/
    margin: 0;
}

.filter-btn.btn-dark {
    background: #565656;
    color: #FAFAFA;
    border: none;
}

.filter-btn.btn-outline-dark {
    color: #565656;
    border: 0.5px solid #565656;
    background: #fff;
}

.filter-select {
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #BABABA;
    background: #fff;
    color: #212121;
    padding: 4px 8px;
    height: 36px;
}

.filter-days {
    display: flex;
    gap: 4px;
    width: 100%;
    justify-content: space-between;
}

.filter-day {
    font-size: 14px;
    border-radius: 8px !important;
    min-width: 32px;
    padding: 4px 0;
    border: 1px solid #565656;
    color: #565656;
    background: #fff;
    transition: background 0.2s, color 0.2s;
}

.filter-day.active, .filter-day:active, .filter-day.selected {
    background: #565656 !important;
    color: #fff !important;
    border-color: #565656 !important;
}

.card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.discount {
    color: white;
    background-color: #dc3545;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 8px;
}

.price-original {
    text-decoration: line-through;
    color: gray;
    font-size: 0.9rem;
}

.teacher-img {
    width: 131px;
    height: 131px;
    border-radius: 10px;
    object-fit: cover;
}

.info-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 5px;
}

.info-footer > * {
    margin-top: 0.5rem;
}

.row-no-collapse {
    flex-wrap: nowrap !important;
}

.accordion-body .form-check label {
    color: #959499;
    font-size: 14px;
}

.accordion-button {
    font-size: 14px;

}

.course-tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: absolute;
    left: 0;
    height: 100%;
    top: 0;
    text-align: center;
    border-radius: 10px;


}

.course-card-details::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: #BABABA;

}

.course-special-tag {
    background-color: #FBCF16;
    color: #565656;
    font-weight: 500;
}

.course-new-tag {
    background: #C4D091;
    color: #212121;
    font-weight: 500;
}

.course-popular-tag {
    background-color: #FDEB9F;
    color: #565656;
    font-weight: 500;
}

.course-paid-tag {
    background-color: #388E3C;
    color: #fff;
    font-weight: 500;
}

.text-388E3C {
    color: #388E3C;
}

/*div:has(.app-screen) {*/
/*    margin-bottom: 130px;*/
/*}*/

/*.app-screen {*/
/*margin-top: 240px*/
/*}*/

.app-screen .lef-image {
    width: 167px;
    margin-left: -49px;
    z-index: 2;
    margin-top: 55px;
}

.app-screen .center-image {
    width: 248px;
    position: relative;
    z-index: 3;
}

.app-screen .brand-text {
    color: #997E0D;
    font-size: 100px;
    font-family: Hurricane;
    position: absolute;
    left: -210px;
    top: -50px;
    transform: rotate(-30deg);
}

.app-screen .active-users-count {
    top: 20px;
    text-align: center;
    width: 100px;
    right: -25px;
    background: linear-gradient(90.01deg, #9D9D9D -18.17%, #757575 29.69%, #3C3C3C 104.98%);
    border-radius: 24px;
    color: #fff;
    padding: 10px;
    z-index: 3;
}

.app-screen .active-users-count .count-txt {
    font-size: 24px
}

.app-screen .active-users-count .user-txt {
    font-size: 16px;
    color: #D9D9D9;
}

.success-downloads-count .downloads-count {
    font-size: 24px;
}

.success-downloads-count .downloads-txt {
    font-size: 16px;
    color: #D9D9D9
}

.success-downloads-count {
    text-align: center;
    width: 165px;
    background: linear-gradient(90.01deg, #9D9D9D -18.17%, #757575 29.69%, #3C3C3C 104.98%);
    border-radius: 24px;
    color: #fff;
    z-index: 3;
    bottom: -40px;
    left: -30px;
    padding: 29px;
}

.courses-count {
    text-align: center;
    width: 153px;
    right: -78px;
    /*right: -205px;*/
    background: linear-gradient(90.01deg, #9D9D9D -18.17%, #757575 29.69%, #3C3C3C 104.98%);
    border-radius: 24px;
    color: #fff;
    padding: 10px;
    z-index: 3;
    bottom: 55px;
    /*bottom: -62px;*/
}

.courses-count .count-txt {
    font-size: 24px
}

.courses-count .course-txt {
    font-size: 16px;
    color: #D9D9D9
}

.app-screen .right-image {
    width: 172px;
    margin-right: -45px;
    z-index: 1;
    margin-top: 50px;

}

.my-class-card {
    border-radius: 12px;
    border: 1px solid #ddd;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
}

.my-classes-section .term-name {
    font-size: 24px;
    color: #959499;
    margin-top: 50px;
    margin-bottom: 20px;
}

.my-class-card th, .my-class-card td {
    font-size: 14px;
    color: #565656;
    font-weight: normal;
    /*display: flex;*/
    /* flex-direction: column;*/
    /* align-items: center;*/
    /* justify-content: center;*/
    /* gap: 5px;*/
}

/*.my-class-card th span:after{*/
/*    content: '|';*/
/*    height: 100%;*/
/*    width: 1px;*/
/*}*/
.my-class-card th span, .my-class-card td span {
    padding-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.my-class-card td {
    vertical-align: middle;
}

.my-class-card td span {
    line-height: 3;
}

.my-class-card th:not(:last-child) span, .my-class-card td:not(:last-child) span {
    border-left: 1px solid #bababa;
}

.my-class-type {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    padding: 10px;
    font-weight: bold;
    font-size: 14px;

}

.my-class-freediscussion-type {
    background-color: #E7DDAF;
    color: #333;
}

.my-class-private-type {
    background-color: #D9BD1C;
    color: #333;
}

.status-active {
    color: #198754;
    font-weight: bold;
}

.view-btn {
    background-color: #555;
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
}

.view-btn:hover {
    background-color: #555;
    color: #fff !important;
}

.my-class-sessions-card {
    border-radius: 10px;
    border: 1px solid #ddd;
    overflow: hidden;
    margin-bottom: 20px;
}

.my-class-active-session-card {
    border: none;
    background-color: #F8F5EA;
}

.my-class-sessions-card th, .my-class-sessions-card td {
    font-size: 14px;
    color: #565656;
    font-weight: normal;

}

.my-class-sessions-card th span, .my-class-sessions-card td span {
    /*padding-left: 15px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.my-class-sessions-card td {
    vertical-align: middle;
}

.my-class-sessions-card td span {
    line-height: 3;
}

.my-class-sessions-card .border-left-item {
    border-left: 1px solid #bababa;
    padding-left: 50px;
}

.my-class-sessions-card th:not(:last-child) span, .my-class-sessions-card td:not(:last-child) span {
    color: #959499;
}

.my-class-sessions-card .status-btn {
    border: 1px solid;
    border-radius: 8px;
    text-align: center;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 10px;
}

.my-class-sessions-card .login-btn {
    border-radius: 8px;
    text-align: center;
    color: #000000;
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 600;
    background-color: #FBCF16;
    text-decoration: none !important;
}

.my-class-sessions-card .session-name {
    color: #959499;
    text-align: center
}

.my-class-sessions-card .session-date {
    color: #333333;
    text-align: center
}


.my-class-sessions-card .session-time {
    color: #959499;
    text-align: center
}

.my-class-sessions-card.active {
    border: none;
    background-color: #F8F5EA;
}

.my-class-sessions-card.active .session-name {
    color: #000000;
    text-align: center
}

.my-class-sessions-card.active .session-time {
    color: #333333;
    text-align: center
}

.my-class-sessions-card.active .session-name svg path,
.my-class-sessions-card.active .session-date svg path,
.my-class-sessions-card.active .session-time svg path {
    stroke: #997E0D;
}

.my-class-sessions-card.active .session-date .session-date-txt b {
    color: #000000;
    font-weight: bold;
    font-size: 18px;

}

.my-class-sessions-card.active.is-future {
    background-color: white;
    border: none;

}

@media (min-width: 768px) {

    .custom-modal .modal-dialog {
        width: 816px !important;
        max-width: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }

    .custom-modal .modal-content {
        min-height: 627px;
        border-radius: 40px;
        padding: 80px 135px;
        overflow: hidden;
    }

    .custom-modal .confirm-btn {
        width: 90%;

    }
}


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


    .checkout-box .pay-btn {
        background-color: rgb(86, 86, 86);
        color: rgb(250, 250, 250);
        border-radius: 8px;
    }

    .hero-content {
        height: 500px;
    }

    .hero-image {
        width: 320px;
    }

    .hero-text .subtitle {
        font-size: 38px;
    }

    .hero-text .main-title {
        font-size: 60px;
    }

    .hero-text h3.subtitle {
        font-size: 30px;
    }

    .class-details {
        margin-top: 1px;
    }
}

.class-register-button {
    background-color: #565656;
    color: var(--bg-color);
    font-weight: 600;
    padding: 8px 25px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #565656;
    cursor: pointer;
    font-size: 12px;

}

/* Search Section */
.search-section {
    margin-top: -135px;
    position: relative;
    z-index: 5;
    padding-bottom: 40px;
}

.search-box {
    margin: 0 auto;
    background-color: #FAFAFA;
    border-radius: 16px;
    padding: 15px 30px;
    box-shadow: 13px 8px 71px 4px rgba(51, 51, 51, 0.2);
    width: 80%;
}

.search-title {
    font-size: 27px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.466;
    color: #212121;
    text-align: right;
}

.search-description {
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 25px;
    color: #959499;
    text-align: right;
    margin-top: 5px;
}

.search-filters {
    margin-bottom: 30px;
}

/* Select2 Custom Styling */
.select-wrapper {
    position: relative;
    width: 100%;
}

/* Style for native selects */
.search-select {
    width: 100%;
    border-radius: 12px;
    border: 0.5px solid #737373;
    font-size: 14px;
    font-weight: 400;
    color: #212121;
    background-color: transparent;
    text-align: right;
    padding: 8px 16px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Arrow for native selects */
.select-wrapper:after {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    /*background-image: url('../assets/select-arrow.svg');*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
    pointer-events: none;
    z-index: 1;
}


/* Select2 Container */
/*.select2-container {*/
/*    width: 185px !important;*/
/*}*/

/* Select2 Selection */
.select2-container--default .select2-selection--single {
    background-color: transparent;
    border: 0.5px solid #737373;
    border-radius: 12px;
    height: 42px;
    text-align: right;
    direction: rtl;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #212121;
    line-height: 42px;
    padding-right: 16px;
    padding-left: 40px;
    font-size: 14px;
    font-weight: 400;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 20px;
    left: 12px !important;
    right: auto;
    width: 20px;
    top: 11px;
}

/* Hide default arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

/* Add custom arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('../select-arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
}

/* Remove duplicate arrow when select2 is initialized */
.select-wrapper .select2-container .select2-selection--single {
    background-image: none;
}

.select-wrapper .select2-container {
    z-index: 2;
    width: 100% !important;
}

.dropdown-toggle::after {
    display: none !important;
}

.select2-container--default ~ .select-wrapper:after,
.select2-container--default + .select-wrapper:after,
.select-wrapper.select2-container:after {
    display: none;
}

/* Make sure Select2 doesn't show default arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none;
}

/* Select2 Dropdown */
.select2-container--default .select2-dropdown {
    border: 0.5px solid #737373;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    direction: rtl;
    text-align: right;
}

.select2-container--default .select2-results__option {
    padding: 8px 16px;
    color: #737373;
    font-size: 13px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #FDEB9F;
    color: #737373;

}

.select2-container--default .select2-results__option[aria-selected=true], header .submenu-item:hover {
    background-color: #F8F5EA;

}

.select2-search--dropdown {
    padding: 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #737373;
    border-radius: 8px;
    padding: 8px;
    text-align: right;
}

.search-buttons {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

/*.search-btn, .level-btn {*/
/*    font-size: 16px;*/
/*    font-weight: 600;*/
/*    padding: 12px 24px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 8px;*/
/*}*/

/*.search-btn {*/
/*    background-color: #737373;*/
/*    color: #FAFAFA;*/
/*}*/

/*.search-btn img {*/
/*    width: 20px;*/
/*    height: 20px;*/
/*}*/

/* Offline Classes Section */
.offline-classes {
    padding: 40px 0;
}

.class-options {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 36px;
    border-bottom: 3px solid rgba(157, 157, 157, 0.2);
    height: 125px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

}


.class-options::-webkit-scrollbar {
    display: none;
}


.class-options::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.class-options .card-title {
    cursor: pointer;
}

/*.class-card {*/
/*    width: 150px;*/
/*    height: 124px;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    gap: 16px;*/
/*    padding: 16px;*/
/*    cursor: pointer;*/
/*    transition: all 0.3s ease;*/
/*}*/

.course-title-icon {
    height: 120px;
}

/*.course-title-icon.active {*/
/*    border-bottom: 4px solid #FBCF16;*/
/*}*/

.icon .icon-active path {
    fill: #212121;
}

.icon path {
    fill: #9D9D9D;
}

.course-title-icon.active .card-title {
    color: #000000;
}

.course-title-icon .card-title {
    width: max-content;
}

.course-title-icon.active svg path {
    fill: #212121;
}

.course-title-icon svg path {
    fill: #9D9D9D;
}


.card-title {
    font-size: 20px;
    font-weight: 400;
    color: #959499;
    margin: 0;
    text-align: center;
    line-height: 1.6;
}

.class-card.active .card-title {
    color: #212121;
}

/* Mobile App Section */
.mobile-app {
    padding: 60px 0;
    position: relative;
    background-color: var(--bg-color);
    overflow: hidden;
}

.mobile-app::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: url('../img/app-background.png') no-repeat center center;*/
    opacity: 0.2;
    z-index: 0;
}

.app-content {
    position: relative;
    z-index: 2;
    padding: 30px 0;
}

.app-subtitle {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.app-title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.app-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 25px;
    justify-content: flex-end;
}

.app-label-text {
    font-size: 36px;
    font-weight: 700;
    color: #000;
}

/*.app-logo {*/
/*    height: 30px;*/
/*}*/

.download-btn {
    background-color: var(--secondary-color);
    color: var(--bg-color);
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    width: 282px;
}

.app-images {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 20px;
}

/* Results Section */
.results-section {
    padding: 60px 0;
}

.results-videos {
    margin-top: 32px;
}

.video-card {
    background-color: var(--bg-color);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 13px 8px 71px 4px rgba(51, 51, 51, 0.2);
    height: 100%;
}


.comments {
    display: flex;
    flex-wrap: nowrap;
    gap: 36px;
    margin: 0 -15px;
    padding: 0 15px 20px;
    justify-content: flex-start;
}

.comments.swiper-wrapper .swiper-slide {
    width: 15% !important;
}

.video-play-btn {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    padding: 10px 12px;
    opacity: 0.4;
}

.video-thumbnail {
    width: 100%;
    height: 150px;
    background-color: #212121;
    border-radius: 23px;
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
}

.video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.video-play-btn {
    position: absolute;
    top: 40%;
    left: 40%;
    background-color: #fff;
    border-radius: 50%;
    padding: 10px 12px;
    cursor: pointer;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    /*background-color: #fff;*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.play-button img {
    width: 20px;
    height: 20px;
}

.video-title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--primary-color);
}

.video-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--light-gray);
    margin: 0;
}


.course-card-section {
    padding: 40px 0;
}

.course-card-section .show-details {
    color: #000000;
    text-decoration: none;
    padding: 11px 2px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    margin-left: 10px;
}

.course-card-section .register-btn:hover {
    color: #ffffff !important;
}

.course-card-section .register-btn {
    background-color: #565656;
    color: #ffffff;
    text-decoration: none;
    padding: 8px 2px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    width: 50%;
}

/* Special Offer */
.special-offer {
    background: linear-gradient(to right, #3C3C3C, #565656);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.special-offer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 18px solid #FDE378;
    border-radius: 52px;
    pointer-events: none;
}

.offer-content {
    text-align: center;
    margin-bottom: 20px;
}

.offer-content h3 {
    font-size: 30px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.offer-des {
    font-size: 12px;
    color: #9f9f9f;
    margin-bottom: 10px;
}

.offer-tag {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.offer-courses {
    display: flex;
    flex-wrap: wrap;
    gap: -30px;
    justify-content: center;
    margin-top: 20px;
}

.course-thumbnail {
    width: 115px;
    position: relative;
    margin: 10px;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 7.5px 4.6px 41.2px 2.3px rgba(51, 51, 51, 0.2);
}

.course-thumbnail img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border: 1.7px solid var(--text-light);
    border-radius: 7px;
}

.course-thumbnail span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--text-light);
    font-size: 10.38px;
    font-weight: 700;
    padding: 5px;
    text-align: center;
}

.offer-container .course-offer-box-image {
    cursor: pointer;
    /*color: white;*/
    transition: transform 0.15s ease;
    will-change: transform;
}

/*.offer-container .course-offer-box-image:hover {*/
/*    transform: scale(1.3);*/
/*    z-index: 99;*/
/*}*/

.offer-container .course-name {
    font-size: 11px;
    margin-top: 7px;
}


/*.course-card-section .row {*/
/*    border: 1px solid #dddddd;*/
/*    border-radius: 10px;*/
/*}*/

.course-list .course-card {
    border-radius: 12px;
    min-height: 120px;
}

.course-image-container {
    position: relative;
}

.course-image {
    border-radius: 10px;
    /*width: 100%;*/
}

.course-title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
    color: #212121;
}

.course-features {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*gap: 8px;*/
    margin-bottom: 30px;
    max-width: 210px;
}

.register-button {
    background-color: #565656;
    color: var(--bg-color);
    font-weight: 600;
    padding: 8px 26px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #565656;
    cursor: pointer;
    font-size: 14px;

}


.register-button:hover {
    color: var(--bg-color);

}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #212121;
}

.feature-icon {
    width: 18px;
    height: 18px;
}

.course-rating {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    width: max-content;
    z-index: 1;
}

.rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.star-icon {
    width: 14px;
    height: 14px;
}

.rating-number {
    font-size: 12px;
    color: #565656;
    line-height: 2.33;
}

.course-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.details-button {
    font-size: 14px;
    /*font-weight: 600;*/

    /*padding: 8px 12px;*/
    /*border-radius: 8px;*/
    /*color: #212121;*/
    /*text-decoration: none;*/
    /*border: 0.5px solid #565656;*/
    /*display: inline-block;*/
    /*text-align: center;*/
    /*width: 114px;*/
}

/*.details-button:hover {*/
/*    background-color: #f5f5f5;*/
/*    color: #212121;*/
/*}*/

/*.register-button {*/
/*    background-color: #565656;*/
/*    color: #FAFAFA;*/
/*    font-size: 14px;*/
/*    font-weight: 600;*/
/*    padding: 8px 12px;*/
/*    border-radius: 8px;*/
/*    text-decoration: none;*/
/*    display: inline-block;*/
/*    text-align: center;*/
/*    width: 141px;*/
/*}*/

/*.register-button:hover {*/
/*    background-color: #404040;*/
/*    color: #FAFAFA;*/
/*}*/

.reviews {
    font-size: 12px;
    color: #565656;
}

/* Special Offer Banner */
.special-offer {
    padding: 40px 0;
}

.offer-banner {
    border: 1px solid #BABABA;
    border-radius: 12px;
    position: relative;
    z-index: 2;
    /*padding: 40px;*/
    /*position: relative;*/
    /*background: url('../img/special-offer-bg.jpg') no-repeat center center;*/
    /*background-size: cover;*/
    /*overflow: hidden;*/
}

.offer-content {
    position: relative;
    z-index: 2;
    /*max-width: 60%;*/
    text-align: right;
}

.title-container {
    position: relative;
    margin-bottom: 15px;
    display: inline-block;
}

.offer-title {
    font-family: 'Yekan Bakh FaNum', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #212121;
    line-height: 1.466;
    text-align: center;
}

.yellow-underline {
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 100%;
    height: 18px;
    z-index: -1;
}

.offer-container .offer-text {
    text-align: center;
    font-size: 15px;
    padding-left: 0;
}

.offer-container .suggest-text {
    font-size: 14px;
    padding-right: 4px;
}

.offer-text {
    font-family: 'Yekan Bakh FaNum', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #494949;
    line-height: 1.556;

}

.offer-text strong.fw-normal {
    font-size: 24px;
}

.offer-description {
    font-family: 'Yekan Bakh FaNum', sans-serif;
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #212121;
    line-height: 2;
}

.offer-button {
    background-color: #565656;
    color: #fff;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
    text-align: center;
    width: 301px;
    line-height: 1.5;
}

.offer-button:hover {
    color: #fff !important;
}

.m-register-button {
    background-color: #565656;
    color: #fff;
    font-weight: 500;
    padding: 7px 20px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
    text-align: center;
    width: 301px;
    line-height: 1.5;
}

.m-register-button:hover {
    color: #fff !important;
}

/* Footer */
.footer {
    background-color: var(--bg-color);
    padding: 50px 0 30px;
    border-top: 3px solid rgba(157, 157, 157, 0.09);
    margin-top: 100px;
}

.footer-brand {
    text-align: right;
}

.footer-logo {
    width: 142px;
    height: 94px;
}

.brand-text {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 4px;
}

.brand-name {
    font-size: 36px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 4px;
}

.brand-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 26px;
}

.footer-links a {
    color: #333333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
}

.footer-links a:hover {
    color: var(--yellow);
}

.social-title {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    margin-bottom: 16px;
    text-align: center;
}

.social-icons {
    display: flex;
    padding: 12px 0;
    margin-bottom: 20px;
    justify-content: center;
    gap: 40px;
}

.social-icons a {
    text-decoration: none;
    font-size: 24px;
}

.instagram {
    color: #E1306C;
}

.youtube {
    color: #FF0000;
}

.linkedin {
    color: #0077B5;
}

.telegram {
    color: #0088cc;
}

.footer-contact {
    display: flex;
    gap: 44px;
    justify-content: center;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background-color: var(--yellow);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon i {
    color: #333;
    font-size: 24px;
}

.contact-info {
    text-align: center;
}

.contact-title {
    font-size: 18px;
    font-weight: 400;
    color: #333;
    margin-bottom: 1px;
}

.contact-number {
    font-size: 24px;
    font-weight: 400;
    color: #333;
    margin: 0;
}


.classModal .modal-dialog {
    max-width: 800px;
}

.classModal .modal-header {
    display: block;
    padding: 5px 5px 10px 0;
}

.classModal .btn-close {
    margin: 0;
    font-size: 14px;
}

.classModal .modal-title {
    text-align: center;
    font-size: 15px;
}

.classModal .modal-body {
    padding: 30px 25px;
}

.classModal .modal-footer {
    display: block;
    font-size: 14px;
    color: #959499;
}

.classModal .class-time-title {
    font-size: 12px;
    color: #959499;
}

.classModal .class-time-value {
    font-size: 14px;
    color: #212121;
}

.course-reactions-tabs .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #FAFAFA;
    background-color: #565656;
}

.course-reactions-tabs .nav-link {
    color: #959499;
}

.checkout-box .accordion-button::after {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px; /* گوشه گرد */
    background-color: #555; /* خاکستری تیره */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");;
    transition: transform 0.3s ease;
    transform: rotate(180deg); /* حالت بسته */
}

.checkout-box .accordion-button:not(.collapsed)::after {
    transform: rotate(0deg); /* حالت باز */
}


.checkout-box .accordion-button {
    padding: 12px 15px;
}

.discountCodeConfirmBtn, .reagentCodeConfirmBtn {
    background-color: #565656;
    color: #FAFAFA;
    padding: 5px 43px;
    border-radius: 8px;
}

/* Media Queries for Responsive Design */
@media (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }

    /*.header {*/
    /*    max-width: 960px;*/
    /*}*/
    .hero-title {
        font-size: 40px;
    }

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

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


}

@media (max-width: 991.98px) {
    /*.container {*/
    /*    max-width: 720px;*/
    /*}*/
    /*.header {*/
    /*    max-width: 720px;*/
    /*}*/
    .nav-list {
        gap: 20px;
    }

    .header-buttons {
        gap: 15px;
    }

    .class-options {
        justify-content: center;
        gap: 30px;
        border-bottom: 3px solid #9D9D9D;
    }

    .course-features {
        grid-template-columns: 1fr;
    }

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

    .hero-subtitle {
        font-size: 54px;
    }

    .hero-description {
        font-size: 28px;
    }

    .hero-image {
        width: 40%;
    }

    .course-title {
        font-size: 15px
    }

    .register-button {
        background-color: #565656;
        color: var(--bg-color);
        font-weight: 600;
        padding: 8px 85px;
        border-radius: 8px;
        text-decoration: none;
        border: 1px solid #565656;
        cursor: pointer;
        font-size: 12px;

    }


    .offer-banner-img {
        width: 400px;
    }

    .app-subtitle {
        font-size: 14px;
    }

    .app-title {
        font-size: 22px;
    }

    .app-label-text {
        font-size: 22px
    }

    .section-title {
        font-size: 22px
    }

    .comments {
        overflow-x: auto;
    }
}


@media (max-width: 767.98px) {

    .my-class-sessions-card .session-date {
        font-size: 14px;
    }


    .my-class-sessions-card .session-time {
        font-size: 14px;
    }

    .my-class-sessions-card .border-left-item {
        padding-left: 0;
    }

    .my-courses-title {
        font-size: 19px;
    }

    .my-courses-subtitle {
        font-size: 10px;
    }

    .other-courses-title {
        font-size: 19px;
        font-weight: 700;
    }

    .my-course-title {
        font-size: 14px;
        font-weight: 400;
    }

    .my-course-card {
        flex-direction: row;
        align-items: center;
        height: auto;
        border: 2px solid #dddddd;
        box-shadow: none;
    }

    .my-course-image {
        border-radius: 15px;
        width: 105px;
        height: 105px;
        margin: 10px;
        box-shadow: 4px 4px 8px 0px #00000040;
    }

    .course-body {
        flex: 1;
        padding: 10px;
    }

    .btn-course {
        color: #565656;
        font-size: 12px;
        border: 1px solid #565656;
        background-color: #fff;
        padding: 4px 8px;
        font-weight: 600;

    }

    .status-badge {
        top: 84px;
        left: 10px;
        width: 105px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .search-box .vip-tik {
        width: 20px;
    }

    .comments.swiper-wrapper {
        transform: unset !important;
    }

    .comments.swiper-wrapper .swiper-slide {
        width: 66% !important;
    }

    /*.offer-button {*/
    /*    width: 90px;*/
    /*}*/
    .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 250px;
        background-color: #fff;
        padding: 1rem;
        z-index: 1050;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
        transform: translateX(100%);
        transition: transform 0.4s ease;
    }

    .navbar-collapse.show {
        transform: translateX(0);
    }

    header .nav-link {
        color: black;
    }

    header .nav-link:hover, header .nav-link:focus {
        color: black !important;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .custom-shape {
        width: 87%;
        /*position: absolute;*/
        /*right: 33px;*/
    }

    .custom-shape-text {
        font-size: 10px;
        width: 57%;
        right: 20%;
    }

    .app-screen {
        margin-top: 45px;
    }

    .app-screen .lef-image {
        width: 100px;
        margin-left: -34px;
        z-index: 2;
        margin-top: 55px;
    }

    .app-screen .center-image {
        width: 164px;
        /*width: auto;*/
        position: relative;
        z-index: 3;
    }

    .app-screen .right-image {
        width: 100px;
        margin-right: -35px;
        z-index: 1;
        margin-top: 50px;

    }

    .app-screen .brand-text {
        /*left: -30px;*/
        /*top: -26px;*/
        font-size: 36px;
        left: 0;
        top: -38px;
        /*right: 165px;*/
    }

    .app-screen .active-users-count {
        top: 38px;
        text-align: center;
        width: 50px;
        right: -30px;
        background: linear-gradient(90.01deg, #9D9D9D -18.17%, #757575 29.69%, #3C3C3C 104.98%);
        border-radius: 8px;
        color: #fff;
        padding: 5px;
        z-index: 3;
    }

    .app-screen .active-users-count .count-txt {
        font-size: 10px
    }

    .app-screen .active-users-count .user-txt {
        font-size: 10px;
        color: #D9D9D9
    }

    .courses-count {
        text-align: center;
        width: 57px;
        right: 2%;
        background: linear-gradient(90.01deg, #9D9D9D -18.17%, #757575 29.69%, #3C3C3C 104.98%);
        border-radius: 10px;
        color: #fff;
        padding: 5px 0;
        z-index: 3;
        bottom: 32px;
    }

    .courses-count .count-txt {
        font-size: 11px
    }

    .courses-count .course-txt {
        font-size: 9px;
        color: #D9D9D9
    }

    .success-downloads-count .downloads-count {
        font-size: 9px;
    }

    .success-downloads-count .downloads-txt {
        font-size: 9px;
        color: #D9D9D9
    }

    .success-downloads-count {
        text-align: center;
        width: 73px;
        background: linear-gradient(90.01deg, #9D9D9D -18.17%, #757575 29.69%, #3C3C3C 104.98%);
        border-radius: 10px;
        color: #fff;
        z-index: 3;
        bottom: -3%;
        left: 4%;
        padding: 8px;
    }

    /*.app-shape {*/
    /*    margin: auto;*/
    /*    position: relative;*/
    /*    width: 290px;*/
    /*    height: 80px;*/
    /*    background: linear-gradient(*/
    /*            to right,*/
    /*            #9d9d9d 0%,*/
    /*            #757575 38%,*/
    /*            #3c3c3c 100%*/
    /*    );*/
    /*    clip-path: path("M262.894 24.8589C262.894 28.4344 265.793 31.3325 269.368 31.3325H281.913C287.946 31.3325 292.838 36.224 292.838 42.2579V43.6235C292.838 47.1992 289.939 50.0981 286.363 50.0981H65.8326C59.7987 50.0981 54.9072 45.2067 54.9072 39.1728V25.0112C54.9072 21.4356 52.0083 18.5366 48.4326 18.5366H11.6109C5.577 18.5366 0.685547 13.6452 0.685547 7.61127V7.20654C0.685547 3.63089 3.58451 0.731934 7.16016 0.731934H251.968C258.002 0.731934 262.894 5.62338 262.894 11.6573V24.8589Z");*/
    /*    -webkit-clip-path: path("M262.894 24.8589C262.894 28.4344 265.793 31.3325 269.368 31.3325H281.913C287.946 31.3325 292.838 36.224 292.838 42.2579V43.6235C292.838 47.1992 289.939 50.0981 286.363 50.0981H65.8326C59.7987 50.0981 54.9072 45.2067 54.9072 39.1728V25.0112C54.9072 21.4356 52.0083 18.5366 48.4326 18.5366H11.6109C5.577 18.5366 0.685547 13.6452 0.685547 7.61127V7.20654C0.685547 3.63089 3.58451 0.731934 7.16016 0.731934H251.968C258.002 0.731934 262.894 5.62338 262.894 11.6573V24.8589Z");*/
    /*}*/
    /*.app-shape-text{*/
    /*    position: absolute;*/
    /*    width: 65%;*/
    /*    right: 40px;*/
    /*    color: #fff;*/
    /*    top: 10px;*/
    /*    font-size: 10px;*/
    /*}*/
    .app-shape {
        width: 294px;
        height: 51px;
        background: linear-gradient(90deg, #9D9D9D 0%, #757575 38%, #3C3C3C 100%);
        clip-path: path("M262.894 24.8589C262.894 28.4344 265.793 31.3325 269.368 31.3325H281.913C287.946 31.3325 292.838 36.224 292.838 42.2579V43.6235C292.838 47.1992 289.939 50.0981 286.363 50.0981H65.8326C59.7987 50.0981 54.9072 45.2067 54.9072 39.1728V25.0112C54.9072 21.4356 52.0083 18.5366 48.4326 18.5366H11.6109C5.577 18.5366 0.685547 13.6452 0.685547 7.61127V7.20654C0.685547 3.63089 3.58451 0.731934 7.16016 0.731934H251.968C258.002 0.731934 262.894 5.62338 262.894 11.6573V24.8589Z");
        -webkit-clip-path: path("M262.894 24.8589C262.894 28.4344 265.793 31.3325 269.368 31.3325H281.913C287.946 31.3325 292.838 36.224 292.838 42.2579V43.6235C292.838 47.1992 289.939 50.0981 286.363 50.0981H65.8326C59.7987 50.0981 54.9072 45.2067 54.9072 39.1728V25.0112C54.9072 21.4356 52.0083 18.5366 48.4326 18.5366H11.6109C5.577 18.5366 0.685547 13.6452 0.685547 7.61127V7.20654C0.685547 3.63089 3.58451 0.731934 7.16016 0.731934H251.968C258.002 0.731934 262.894 5.62338 262.894 11.6573V24.8589Z");

        color: white;
        font-size: 12px;
        line-height: 1.4;
        direction: rtl;
        position: relative;
        margin: auto;
    }

    .app-shape-text {
        width: 70%;
        position: absolute;
        top: 5px;
        font-size: 11px;
        right: 35px;
    }

    .app-dl-images .app-dl-image3 {
        top: 0;
        position: relative;
        left: 80px;
        width: 160px;
    }

    .app-dl-title {
        font-size: 22px;
    }

    div:has(.app-dl-title) {
        margin-bottom: 15px;
    }


    .app-dl-images .app-dl-image4 {
        left: -25px;
        top: -18px;
        width: 204px;
    }

    .app-dl-item-icon {
        font-size: 16px;
    }

    .app-dl-item-icon img {
        width: 15px;
    }

    .app-dl-item-text {
        font-size: 14px;
    }

    .app-web-dl-btn-wrapper {
        margin-right: unset;
    }

    .app-web-dl-btn {
        width: 100%;
    }

    .app-mobile-dl-btn {
        width: 100%;
        border: 1px solid;

    }

    .offer-container .suggest-text {
        font-size: 12px;
        padding-right: unset;
        text-align: center;
    }

    .app-images {
        justify-content: center;
        padding-right: 0;
    }

    .app-download h1 {
        font-size: 22px;
    }

    .select2-container {
        width: 100% !important;
    }

    .search-box {
        width: 100%;
    }

    .course-title {
        margin-bottom: 5px;
    }

    .course-image-container {
        margin-bottom: 12px;
    }

    .course-card-section .course-rating {
        background: unset;
        border-radius: unset;
    }

    .offer-container .courses-thumbs {
        padding: 10px;
    }

    .offer-container .courses-thumbs .flex-md-nowrap {
        background-color: #D9D9D9;
        backdrop-filter: blur(4px);
        border-radius: 5px;
    }

    .course-card-section {
        padding: 5px;
    }


    .course-card-section .course-card {
        border: 1px solid #BABABA;
        border-radius: 12px;
        box-shadow: 13px 8px 71.4px 4px #33333333;
        padding: 15px;
    }

    .offer-container .course-name {
        font-size: 8px;
    }

    .custom-modal .top-line {
        width: 45%;
        background: #565656;
        height: 4px;
        margin: auto;
        border-radius: 16px;
    }

    .custom-modal h1 {
        font-size: 16px;
    }


    .custom-modal .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        min-height: auto;
        display: block;
    }

    .custom-modal .modal-content {
        width: 100%;
        height: auto;
        border-radius: 16px 16px 0 0;
        overflow: hidden;
        padding: 10px 20px 20px;
    }

    .custom-modal .form-floating > input {
        height: 64px !important;
    }

    .custom-modal .confirm-btn {
        width: 100%;

    }

    .custom-modal .form-check-label {
        font-size: 14px;
    }

    .custom-modal .edit-mobile-link {
        font-size: 12px;
    }

    .custom-modal .resend-link {
        text-decoration: none;
        color: #0288D1;
        font-size: 12px;

    }

    .custom-modal .timer-text {
        font-size: 15px;

    }

    .course-card-image {
        padding: 0 10px;
    }

    .course-list .course-card {
        width: 94%;
        margin: 0 auto;
        border-width: 1px;
    }

    .course-card-image {
        padding: 12px;
    }

    .checkout-box .pay-btn {
        width: 250px;
    }

    .course-card .course-card-title {
        font-size: 19px;
    }


    .course-card .course-card-desc {
        font-size: 12px;
    }

    .course-list .course-card img {
        width: 100%;
        height: auto;
    }

    .course-tag {
        writing-mode: unset;
        transform: none;
        height: unset;
        left: 15px;
        top: 15px;
    }

    .courses-list-old-price {
        color: #B2B2B2;
        font-size: 12px
    }

    .courses-list-new-price {
        color: #388E3C;
        font-size: 16px
    }

    .success-payment .return-to-home-btn {
        padding: 8px 8px;
    }

    .success-payment .view-course-btn {
        border: none;
    }

    .view-course-btn {
        padding: 8px 32px;
        margin-right: 12px;
        /*width: 56%;*/
    }

    .course-tag {
        writing-mode: unset;
        transform: none;
        height: unset;
    }

    .offer-text {
        font-size: 14px;
    }

    .course-info-card-price {
        box-shadow: 13px 8px 71.4px 4px #33333333;
        border-radius: 12px;
        background-color: #fff;
        position: fixed;
        z-index: 999;
        bottom: 0;
    }

    .price-info {
        text-align: right;
        padding: 5px;
        font-size: 14px;
    }

    .course-info-card-price .old-price span, .course-info-card-price .new-price span {
        font-size: 14px !important;
    }

    .course-info-card-price .offer-button {
        font-size: 13px;
    }

    .classModal .modal-content {
        position: absolute;
        bottom: 0;
    }

    .classModal .modal-title {
        text-align: right;
        padding-right: 22px;
    }

    .class-desc-item {
        font-size: 11px;
    }

    .accordion-button {
        font-size: 13px;
    }

    .teacher-img {
        width: 77px;
        height: 77px;
    }

    .row-no-collapse {
        flex-direction: row-reverse;
    }


    .teacher-column {
        flex: 0 0 131px;
        max-width: 131px;
    }

    .content-column {
        flex: 1;
    }

    .info-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .info-footer .btn-group {
        width: 100%;
    }

    .info-footer .btn-group .btn {
        flex: 1;
    }

    .teacher-about-title {
        font-weight: 400;
        font-size: 10px;
    }

    body {
        direction: rtl;
        background-color: #f2f2f2;
    }

    .class-details {
        margin-top: 6px;
        border-top: 0.5px solid #dddddd;
        padding-top: 11px;
    }


    .top-container {
        padding-right: 0;
        padding-left: 0;
    }

    /*.container {*/
    /*    max-width: 540px;*/
    /*}*/
    .header {
        background-color: var(--primary-color);
        /*padding: 15px 0;*/
        margin-top: 20px;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        /*max-width: 540px;*/
        margin-left: auto;
        margin-right: auto;
        z-index: 1000;
    }

    .header-inner {
        justify-content: space-between;
        flex-direction: row;
        padding: 0 15px;
    }

    .nav-menu {
        display: none;
    }

    .header-buttons {
        display: none;
    }

    /*.logo img {*/
    /*    max-height: 59px;*/
    /*}*/
    .mobile-menu-toggle {
        display: flex !important;
    }

    .hero-section {
        margin-top: 23px;
        position: relative;
        overflow-x: hidden;

    }

    .hero-content {
        text-align: center;
        padding: 0 15px;
    }

    .hero-title {
        font-size: 24px;
        text-align: center;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        font-size: 32px;
        text-align: center;
        margin-bottom: 10px;
    }

    .hero-description {
        font-size: 20px;
        text-align: center;
        margin-top: 10px;
    }

    .hero-image {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 80%;
        margin: 40px auto 0;
        max-width: 280px;
    }

    .ellipse-1 {
        width: 150px;
        height: 150px;
        top: -30px;
        left: -30px;
    }

    .ellipse-2 {
        width: 100px;
        height: 100px;
        top: 10%;
        left: 5%;
    }

    .vector-1, .vector-2 {
        display: none;
    }

    .vector-3 {
        width: 150px;
        height: 150px;
        bottom: 5%;
        right: -30px;
    }

    .search-section {
        margin-top: -14px;
    }

    .search-filters {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        margin: 0 -15px;
        padding: 0 15px 10px;
    }

    .select-wrapper {
        min-width: 160px;
    }

    .class-options {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 36px;
        margin: 0 -15px;
        padding: 0 8px;
        justify-content: flex-start;
        border-bottom: 2px solid #9D9D9D;
        height: 120px;
    }

    .class-card {
        min-width: 150px;
        flex-shrink: 0;
        height: 124px;
    }

    .mobile-app {
        padding: 30px 0;
    }

    .results-section .section-title {
        font-size: 22px;
    }

    .video-card {
        min-width: 100%;
        margin-right: 0;
        margin-top: 20px;
    }

    .results-videos .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 20px;
    }

    .results-videos .col-md-6 {
        min-width: 280px;
        padding: 0;
        flex-shrink: 0;
    }

    .special-offer {
        padding: 20px 0;
    }

    .offer-banner {
        padding: 25px;
    }

    .offer-content {
        max-width: 100%;
    }

    .title-container {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        display: block;
    }

    .offer-title {
        font-size: 24px;
        text-align: center;
    }

    .yellow-underline {
        left: 0;
        right: 0;
        margin: auto;
    }

    .offer-text {
        font-size: 14px;
        text-align: center;
    }

    .offer-description {
        text-align: center;
    }

    .offer-button {
        display: block;
        margin: 0 auto;
        text-align: center;
        /*width: 90px;*/
    }

    .m-register-button {
        display: block;
        margin: 0 auto;
        text-align: center;
        width: 100px;
    }

    .footer {
        padding-top: 30px;
    }

    .footer-brand {
        text-align: left;
        margin-bottom: 30px;
    }

    .footer .row > div.col-md-4:not(:last-child) {
        border-bottom: 1px solid rgba(157, 157, 157, 0.09);
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .footer-links {
        text-align: right;
    }

    .footer-social {
        text-align: center;
        padding-top: 15px;
    }

    .footer-contact {
        padding-bottom: 2px;
        border-bottom: 1px solid rgba(157, 157, 157, 0.09);
    }

    /*.footer .btn-dark {*/
    /*    width: 100%;*/
    /*    margin-top: 20px;*/
    /*    padding: 15px;*/
    /*}*/
    .course-features {
        max-width: 100%;
    }

    .course-buttons {
        flex-direction: column;
    }

    .course-rating {
        top: 170px
    }

    .feature-item {
        font-size: 10px
    }

    .register-button {
        font-size: 12px;
    }

    .offer-banner-img {
        width: 400px;
    }


    .app-subtitle {
        font-size: 14px;
    }

    .app-title {
        font-size: 22px;
    }

    .app-label-text {
        font-size: 22px
    }

    .section-title {
        font-size: 22px
    }

    .comments {
        overflow-x: auto;
    }

    .footer-logo {
        width: 137px;
        height: 66.2px;
    }

    .brand-text {
        font-size: 12px;
        top: 2px;
        /*font-weight: 400;*/
        /*color: #333333;*/
        /*margin-bottom: 4px;*/
    }

    .brand-name {
        font-size: 29px;
        /*font-weight: 700;*/
        /*color: #333333;*/
        /*margin-bottom: 4px;*/
    }

    .brand-subtitle {
        font-size: 14px;
        /*font-weight: 400;*/
        /*color: #333333;*/
    }

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links a {
        font-size: 13px;
    }

    .subtitle-mobile {
        padding-right: 18px;
    }


    .search-box .btn2, .search-box .a-btn {
        width: 290px;
        text-align: center;
    }

    .filters {
        padding: 5px 12px;
    }
}

@media (max-width: 575.98px) {
    .course-card-section .show-details {
        font-size: 13px;
    }

    .course-card-section .register-btn {
        font-size: 13px;
    }

    .app-dl-item {
        padding-right: 0;
    }

    .app-content-image-div-m {
        bottom: 155px;
        z-index: -1;

    }

    .course-card-image {
        padding: 10px;
    }

    .offer-container .offer-text {
        text-align: center;
    }

    .course-tag {
        writing-mode: unset;
        transform: none;
        height: unset;
        left: 15px;
        top: 15px;
        min-width: 100px;
        border-radius: 15px;
    }

    .classModal .modal-title {
        text-align: right;
        padding-right: 22px;
    }

    .classModal .modal-content {
        position: absolute;
        bottom: 0;
    }

    .class-desc-item {
        font-size: 11px;
    }

    #filters {
        position: absolute;
        z-index: 99;
    }

    .filters {
        padding: 5px 12px;
    }

    .teacher-about-title {
        font-weight: 400;
        font-size: 11px;

    }

    .class-more-info-btn {
        border: 0.5px solid #565656;
        padding: 5px 28px;
    }

    .class-register-info-btn {
        padding: 5px 44px;
    }

    .header {
        border-radius: 0;
        margin-top: 0;
        width: 100%;
        /*max-width: calc(100% - 30px);*/
    }

    .top-container {
        padding-right: 0;
        padding-left: 0;
    }

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

    .hero-subtitle {
        font-size: 30px;
        text-align: center;
    }

    .hero-description {
        font-size: 20px;
        line-height: 1.5;
        text-align: center;
    }

    .search-box {
        padding-top: 12px;
        padding-bottom: 18px;
        padding-right: 20px;
        padding-left: 20px;
        width: 90%;
    }

    .search-description {
        margin-bottom: 12px;
    }

    .search-title {
        font-size: 16px;
        text-align: center;
    }

    .search-description {
        text-align: center;
    }

    .select-wrapper {
        min-width: 160px;
        display: flex;
        justify-content: center;
    }

    .class-card {
        width: 130px;
        height: 110px;
        padding: 10px;
    }

    .card-title {
        font-size: 14px;
    }

    .app-content {
        text-align: center;
        padding-top: 14px;
    }

    .app-label {
        justify-content: center;
    }


    .course-buttons {
        flex-direction: column;
    }

    .offer-banner {
        padding: 20px 15px;
    }

    .offer-title {
        font-size: 22px;
        text-align: center;
    }

    .offer-text {
        font-size: 14px;
        text-align: center;
    }

    .offer-description {
        text-align: center;
    }

    .offer-content .details-btn {
        margin: 0 auto;
        display: block;
    }

    .course-title {
        font-size: 15px
    }

    .course-rating {
        top: 155px
    }

    .feature-item {
        font-size: 10px
    }

    .register-button {

        font-size: 12px;

    }

    .offer-banner-img {
        width: 400px;
    }


    .app-subtitle {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .app-title {
        font-size: 22px;
    }

    .app-label-text {
        font-size: 22px
    }

    .section-title {
        font-size: 22px
    }

    .comments {
        overflow-x: auto;
    }


    .search-box .btn2, .search-box .a-btn {
        width: 290px;
        text-align: center;
    }

    .class-box {
        width: 886px;
        height: 280px;
        /*top: 338px;*/
        /*left: 120px;*/
        border-radius: 16px;
        border: 1px solid #BABABA;

    }


}


@media (max-width: 345px) {
    .courses-count {
        right: 1%;
        bottom: 26px;
    }

    .app-screen .active-users-count {
        right: -18px;
    }

    .success-downloads-count {
        bottom: -8%;
        left: 3%;
    }
}