/* hero part */

.hero-part {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

.hero-part__image {
    /* width: 45%; */
}

.hero-part__image>img {
    width: 100%;
    z-index: 0;
}

.text__title {
    font-size: 3.8rem;
    font-family: "Morabba Bold";
    color: var(--text-color);
}

.title__design {
    color: var(--main-color);
}

.text__littel-info {
    font-size: 1.8rem;
    color: var(--second-text-color);
}

.text__search {
    margin: 1rem 0;
    background: var(--box-bg);
    border-radius: 1.5rem;
    display: flex;
    padding: 1rem;
}

.search__input {
    width: 100%;
    font-size: 1.8rem;
    border: none;
    color: var(--text-color);
    background: var(--box-bg);
}

.search__btn {
    background: var(--second-box-bg);
    color: var(--third-text-color);
    border: none;
    cursor: pointer;
    border-radius: 1rem;
    font-size: 1.7rem;
    padding: .5rem 1rem;
}

.search__btn>img {
    width: 2rem;
}

.hero-part__abilityes {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.abilityes__links {
    width: 100%;
    font-family: "Morabba Medium";
    font-size: 1.4rem;
    background: var(--box-bg);
    color: var(--text-color);
    padding: 1.2rem 0;
    border-radius: 1.5rem;
    transition: background ease-in-out .3s, color ease-in-out .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.abilityes__links:hover {
    background: var(--main-color);
    color: var(--third-text-color);
}


/* services */

.service {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    border-radius: 1.5rem;
    transition: all ease-in-out .3s;
    box-shadow: var(--shadow);
}

.service:hover {
    transform: scale(1.02);
}

.service__icon {
    width: 15rem;
}

.service__title {
    font-size: 2.4rem;
    font-family: "Dana Demi Bold";
    color: var(--third-text-color);
    margin: 1.5rem 0;
    text-align: center;
}

.service__description {
    color: var(--forthe-text-color);
    font-size: 1.5rem;
    font-family: "Dana Regular";
    text-align: center;
}

/* category */

.product-category-desktop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.product-category-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin: .7rem 0;
}

.product-category__cat {
    text-align: center;
}

.cat__image {
    height: 20rem;
    margin-bottom: .5rem;
    transition: all ease-in-out .3s;
}

.product-category__cat:hover>.cat__image {
    transform: translateY(-.3rem);
}

.cat__name {
    font-size: 1.8rem;
    color: var(--text-color);
    font-family: "Dana Demi Bold";
}

/* banners */

.banners {
    width: 100%;
    display: flex;
}

.banners__banner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner__link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.link__image {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* about us */

.faq__body {
    background: var(--box-bg);
    box-shadow: var(--shadow);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    cursor: pointer;
}

.faq__header {
    display: flex;
    align-items: center;
}

.faq__icon {
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2rem;
    transition: all ease-in-out .2s;
    color: var(--second-text-color);
}

.faq__titel {
    color: var(--text-color);
    font-size: 2rem;
    max-width: 50rem;
}

.faq__information {
    height: 0;
    overflow: hidden;
    transition: all ease-in-out .2;
    text-align: justify;
    color: var(--second-text-color);
}


.faq__icon--close {
    width: 0;
    height: 0;
    overflow: hidden;
    transition: all ease-in-out .2s;
}

.faq__icon--open {
    transition: all ease-in-out .2s;
}








.faq__body--active .faq__icon--open {
    width: 0;
    height: 0;
    overflow: hidden;
}

.faq__body--active .faq__icon--close {
    width: 5.4rem;
    height: 5.4rem;
    overflow: visible;
    color: var(--main-color);
}

.faq__body--active .faq__information {
    height: fit-content;
    overflow: visible;
    padding: 1rem 2rem;
}

/* teachers */


.teacher__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.teacher__container::before {
    content: "";
    position: absolute;
    width: 10rem;
    height: 10rem;
    background: var(--main-color);
    border-radius: 1.5rem;
    z-index: -1;
    right: -1rem;
    top: -1rem;
}

.teacher__list-of-teacher {
    background: var(--box-bg);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    gap: 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.teacher__teacher {
    cursor: pointer;
    border-radius: 50%;
    transition: all .3s ease-in-out;
    width: 6.5rem;
    height: 6.5rem;
    overflow: hidden;
    border: 3px solid transparent;
}

.teacher__teacher:hover {
    transform: translateY(-4px) scale(1.05);
}

.teacher__teacher--active {
    border-color: var(--main-color);
    transform: scale(1.08);
}

.teacher__teacher>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease-in-out;
}

.teacher__teacher:hover img {
    transform: scale(1.08);
}

.teacher__list-of-info {
    position: relative;
    background: var(--box-bg);
    border-radius: 1.8rem;
    box-shadow: var(--shadow);
    padding: 2rem;
}

.teacher__info-container {
    display: flex;
    gap: 1rem;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
    position: absolute;
}

.teacher__info-container>div {
    width:100%;
    background: var(--second-box-bg);
    padding: 2.5rem;
    border-radius: 1.5rem;
}

.teacher__info-container--active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}

.teacher__info-container>div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.teacher__main-image {
    width: 32%;
    aspect-ratio: 4/5;
    border-radius: 1.5rem;
    object-fit: cover;
    box-shadow: var(--shadow);
}

.teacher__name {
    font-size: 2.8rem;
    font-family: "Dana Demi Bold";
    margin-bottom: .5rem;
    color: var(--text-color);
}

.teacher__ability {
    font-size: 1.4rem;
    color: var(--second-text-color);
    font-family: "Dana Regular";
    margin-bottom: 1.2rem;
    margin-bottom: 1.2rem;
}

.teacher__information {
    font-size: 1.5rem;
    color: var(--second-text-color);
    text-align: justify;
    line-height: 1.9;
    overflow: hidden;
}

.teacher__btn:hover {
    background: var(--main-color);
    color: white;
    transform: translateY(-3px);
}

.teacher__btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* students */

.students__effects {
    position: relative;
}

.teacher__btn-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
}


.teacher__btn {
    padding: .8rem 2.2rem;
    border-radius: 2rem;
    font-size: 1.4rem;
    border: 2px solid var(--main-color);
    color: var(--main-color);
    transition: all .3s ease-in-out;
}

.teacher__btn:hover {
    background: var(--main-color);
    color: white;
    transform: translateY(-3px);
}

.students__openions::-webkit-scrollbar {
    display: none;
}

/* fade right */
/* .students__effects::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40rem;
    height: 100%;
    background: linear-gradient(to left, var(--second-box-bg), transparent);
    pointer-events: none;
} */

/* fade left */
/* .students__effects::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40rem;
    height: 100%;
    background: linear-gradient(to right, var(--second-box-bg), transparent);
    pointer-events: none;
} */

.students__boxes {
    background: var(--box-bg);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
    text-align: center;
    scroll-snap-align: start;
}

.students__boxes>div {
    color: var(--second-text-color);
}

.students__image {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

.students__name {
    font-size: 1.6rem;
    font-family: "Dana Demi Bold";
    color: var(--text-color);
}

.students__text {
    font-size: 1.5rem;
    color: var(--second-text-color);
    font-family: "Dana Regular";
    text-align: justify;
}

/* CTA */

.cta__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.4rem;
    background: linear-gradient(135deg, var(--main-color), #6c63ff);
    padding: 4rem 2rem;
    border-radius: 2rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.cta__title {
    font-size: 2.2rem;
    font-family: "Dana Demi Bold";
    color: var(--third-text-color);
}

.cta__subtitle {
    font-size: 1.5rem;
    color: var(--third-text-color);
}

.cta__see-more {
    margin-top: .5rem;
    padding: 1rem;
    border-radius: .8rem;
    background: var(--box-bg);
    color: var(--main-color);
    font-size: 1.5rem;
    transition: all .3s ease-in-out;
}

.cta__see-more:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, .15);
}

/* stats */


.stats {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    background: var(--box-bg);
    border-radius: 1.5rem;
}

.stat__item {
    width: 100%;
    font-family: "Morabba Medium";
    font-size: 1.4rem;
    color: var(--text-color);
    padding: 1.2rem 0;
    transition: background ease-in-out .3s, color ease-in-out .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stat__number {}

.stat__label {
    margin-right: .2rem;
}

/* modal */

.modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-in-out;

}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--box-bg);
    padding: 2.5rem 3rem;
    border-radius: 1.5rem;
    max-width: 42rem;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow);
    animation: popup 0.3s ease-in-out;
    font-family: "Dana Regular";
    color: var(--text-color);
}

.modal-content>h3 {
    font-family: "Morabba Bold";
    margin: 1rem 0;
}

@keyframes popup {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.close-btn {
    margin-top: 2rem;
    padding: 1.2rem 2.5rem;
    background: #4a63e7;
    border: none;
    border-radius: .8rem;
    color: var(--third-text-color);
    cursor: pointer;
    font-size: 1.5rem;
    transition: background ease-in-out 0.3s;
    font-family: "Dana Medium";
}

.close-btn:hover {
    background: #3c51c5;
}

#closeModal {
    margin-top: 15px;
    padding: 10px 20px;
    background: #3b82f6;
    color: var(--third-text-color);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}


/* details page */
/* =========== */
/* =========== */

.course-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--box-bg);
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
    position: relative;
    margin-top: 4rem;
}

.course-header__save-icon {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--second-box-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    padding: .6rem;
    transition: all ease-in-out .3s;
    cursor: pointer;
}

.course-header__save-icon:hover {
    transform: scale(1.1);
    background: var(--main-color);
}

.course-header__save-icon>img {
    width: 3rem;
}

.course-header__image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-header__image>img {
    width: 100%;
    border-radius: .8rem;
}

.course-header__information {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.course-header__title-description {
    margin-bottom: 7rem;
}

.course-header__title {
    font-size: 3.8rem;
    font-family: "Morabba Bold";
    margin-bottom: .5rem;
    color: var(--text-color);
}

.course-header__description {
    font-size: 1.8rem;
    color: var(--second-text-color);
    text-align: justify;
}

.course-header__action-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course-header__bottons {
    display: flex;
    gap: 1rem;
}



.course-header__bottons>a {
    background: var(--second-box-bg);
    color: var(--text-color);
    transition: all ease-in-out .3s;
}

.course-header__bottons>a:hover {
    background: var(--main-color);
    color: var(--third-text-color);
}

.course-header__prices {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--second-text-color);
}

.course-header__offer-prices {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.course-header__bottons--color {
    background: var(--main-color) !important;
    color: var(--third-text-color) !important;
}

.course-header__bottons .purchased-course{
    background:#28a745 !important;
    border-color:#28a745 !important;
    color:#fff !important;
    width:100%;
    text-align:center;
}
.course-header__bottons .purchased-course:hover{
    background:#1e7e34 !important;
    border-color:#1e7e34 !important;
    color:#fff !important;
    width:100%;
    text-align:center;
}

.course-header__bottons--color:hover {
    background: #2563eb !important;
}

.course-header__description--atractive {
    color: var(--main-color);
    font-family: "Morabba Bold";
    font-weight: 900;
    font-size: 4rem;
    line-height: 1;
}

/* offer course tiem */

.offer-course-time {
    width: 100%;
    background: linear-gradient(135deg, var(--main-color), #6c63ff);
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    flex-direction: row;
}

.offer-course-tiem__title {
    font-size: 2.8rem;
    color: var(--third-text-color);
    line-height: 1;
    font-family: "Morabba Medium";
}

.offer-course-time__timer {
    direction: ltr;
    display: flex;
    gap: .5rem;
}

.offer-course-time__timer>p {
    color: var(--third-text-color);
    font-size: 1.8rem;
}

/* course abilityes */

.detail--space {
    margin: 4rem auto;
}

.course-abilityes__boxe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: var(--box-bg);
    border-radius: 1.5rem;
    padding: 1rem;
    box-shadow: var(--shadow);
    transition: all ease-in-out .3s;
}

.course-abilityes__boxe:hover {
    transform: scale(1.02);
}

.course-abilityes__image {}


.course-abilityes__image>img {
    width: 12rem;
}

.course-abilityes__texets {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.course-abilityes__title {
    color: var(--text-color);
    font-size: 1.6rem;
    font-family: "Dana Demi Bold";
    margin-bottom: .3rem;
}

.course-abilityes__description {
    color: var(--second-text-color);
    font-size: 1.5rem;
    font-family: "Dana Regular";
}

/* online boxes */

.online-boxes {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* flex-direction: row; */
    gap: 1rem;
}

.online-boxes__box {
    width: 100%;
    background: var(--box-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--shadow);
}

.online-boxes__tops-side {
    width: 100%;
    display: flex;
    align-items: center;
}


.oncline_boxes__image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.oncline_boxes__image>img {
    width: 20rem;
}

.online-boxes__informations {}

.online-boxes__title {
    font-size: 2.8rem;
    /* color: var(--main-color); */
    line-height: 1;
    margin-bottom: 1rem;
    font-family: 'Dana Demi Bold';
}

.online-boxes__info {
    font-size: 1.8rem;
    color: var(--second-text-color);
    text-align: justify;
}

.online-boxes__down-side {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    /* background: var(--main-color); */
    border-radius: .8rem;
    color: var(--third-text-color);
    padding: 1rem;
    margin-top: 1rem;
    transition: all ease-in-out .3s;
}

.online-boxes__box:hover>.online-boxes__down-side {
    transform: scale(1.03);
}

/* moveing btns */

.moveing-btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: var(--box-bg);
    border-radius: 1.5rem;
    gap: 2rem;
    padding: 1.5rem 0;
    box-shadow: var(--shadow);
}

.moveing-btns__btn {
    color: var(--text-color);
    background: var(--second-box-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease-in-out .3s;
    cursor: pointer;
}

.moveing-btns__btn:hover {
    background: var(--main-color);
    color: var(--third-text-color);
}

.info-parent {
    position: relative;
}

.info-parent__title {
    background: var(--main-color);
    border-radius: 1.5rem;
    padding: 1rem 4rem;
    color: var(--third-text-color);
    box-shadow: var(--shadow);
    font-size: 1.6rem;
    margin: 0 auto;
    width: fit-content;
    font-family: "Morabba Bold";
    margin-bottom: 2rem;
}

/* vedio area */

.course-detail-vedio {
    width: 100%;
}

/* sample work */

.sample-work-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sample-work-box>img {
    width: 100%;
    border-radius: .8rem;
    transition: all ease-in-out .3s;
}

.sample-work-box>img:hover {
    transform: scale(1.03);
}

/* head course */

.head-course__seassion-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.head-course__seassion {
    margin: 1rem 0;
    list-style: none;
    background: var(--second-box-bg);
    border-radius: .8rem;
    padding: 2rem;
}

.seassion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem;
    border-radius: .8rem;
    cursor: pointer;
    color: var(--text-color);
}

.head-course__parts {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: .3s;
    padding: 0;
    margin: 0;
}

.head-course__parts--active {
    height: auto;
    visibility: visible;
    margin-top: .5rem;
}


.head-course__part {
    width: 100%;
    background: var(--box-bg);
    border-radius: .8rem;
    margin: .8rem 0;
}

.head-course__part>a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    color: var(--second-text-color);
}

.head-course__part>a>img {
    width: 5rem;
}

/* teacher in details page */

.teacher-in-details {
    display: flex;
    gap: 1rem;
    opacity: 1;
    background: var(--second-box-bg);
    border-radius: .8rem;
    padding: 2rem;
}

.teacher__left-side {
        width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* students openion in details */

.datails-box .students__boxes {
    background: var(--second-box-bg) !important;
}

/* auth */
.pattern-bg {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg,
            var(--bg-grad-1),
            var(--bg-grad-2) 40%,
            var(--bg-grad-3) 100%);
    z-index: -1;
}
html, body {
    height: 100%;
    margin: 0;
}

.auth__container {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}


.form-box {
    width: 38rem;
    padding: 3rem;
    background: var(--box-bg);
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    width: 12rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 6px 0px #00000010);
}

.form-box>h2 {
    font-size: 2.4rem;
    margin-bottom: 2.5rem;
    font-family: "Dana Demi Bold";
    color: var(--text-color);
}

.form-box>p {
    margin-top: .5rem;
}

.form-box input {
    font-family: "Dana Medium";
}

.input-field {
    width: 100%;
    height: 4.8rem;
    padding: 0 1.2rem;
    margin-bottom: 1.2rem;
    border-radius: 1rem;
    border: 0.1rem solid var(--second-box-bg);
    font-size: 1.5rem;
    box-sizing: border-box;
    background: var(--box-bg);
}

.input-field:focus {
    border-color: var(--main-color);
}

.main-btn {
    width: 100%;
    height: 4.8rem;
    background: var(--main-color);
    color: var(--third-text-color);
    border: none;
    border-radius: 1rem;
    font-size: 1.6rem;
    cursor: pointer;
    font-family: "Dana Medium";
    transition: all ease-in-out .3s;
}

.main-btn:hover {
    background: #2f59e0;
}

.auth-link {
    display: inline-block;
    margin-top: .6rem;
}

/* article page */

.article-body-content-container {
    width: 100%;
    margin-top: 2rem;
}

.article-publisher {
    margin-bottom: 2rem;
    position: relative;
}

.article-publisher>h1 {
    font-size: 3.8rem;
    font-family: "Morabba Bold";
}

.article-publisher__info {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}

.article-publisher__info>p {
    font-size: 1.8rem;
    color: var(--second-text-color);
}


/* about us page */


.hero {
    text-align: center;
    position: relative;
    padding-top: 4rem;
}

.hero-card {
    width: 100%;
    padding: 2rem;
    background: var(--box-bg);
    border-radius: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(3rem);
    transition: 0.6s ease;
}

.hero-card.show {
    opacity: 1;
    transform: translateY(0);
}

.card-icon {
}

.card-icon>img{
    width: 14rem;
}

.hero-card h3 {
    font-size: 2.4rem;
    font-family: "Dana Demi Bold";
    color: var(--text-color);
}

.hero-card p {
    font-size: 1.8rem;
    color: var(--second-text-color);
    font-family: "Dana Regular";
}

/* Sections */

.section {
    display: flex;
    align-items: center;
    gap: 5rem;
    opacity: 0;
    transition: 0.8s;
    background: var(--box-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--shadow);
    margin: 5rem 0;
}

.section.show {
    opacity: 1;
    transform: translateY(0);
}

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

.section-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-img img {
    width: 100%;
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
}

.section-text h2 {
    color: var(--main-color);
    margin-bottom: 2rem;
    font-size: 2.8rem;
    line-height: 1;
    font-family: "Dana Medium";
}

.section-text p {
    font-size: 1.6rem;
    line-height: 1.8;
    text-align: justify;
    color: var(--second-text-color);
}

/* CTA */

.cta {
    background: var(--box-bg);
    padding: 2rem;
    text-align: center;
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
    color: var(--text-color);
}

.cta__box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta.show {
    opacity: 1;
}

.cta-buttons {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cta-btn {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--third-text-color);
    font-size: 2.4rem;
    text-decoration: none;
    transition: 0.3s;
}


.cta-btn:hover {
    transform: translateY(-0.8rem);
}

.icon-3d {
    width: 3rem;
    height: 3rem;
}

/* Features */


.features.show {
    opacity: 1;
}

.feature-item {
    flex: 1;
    background: var(--box-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow);
    position: relative;
}

.feature-item img {
    width: 12rem;
}

.feature-item>p {
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--second-text-color);
}

.coffeenet-number {
    background: var(--main-color);
    color: var(--third-text-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: -.5rem;
    right: -.5rem;
}

/* Animation helpers */

.fade-up {
    opacity: 0;
    transform: translateY(3rem);
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

.fade-delay1 {
    transition-delay: 0.2s;
}

.fade-delay2 {
    transition-delay: 0.4s;
}

.fade-delay3 {
    transition-delay: 0.6s;
}

.fade-delay4 {
    transition-delay: 0.8s;
}

.sms {
    background: #3c6df9;
}

.insta {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.rubika {
    background: #0086ff;
}

.whatsapp {
    background: #25D366;
}

.telegram {
    background: #0088cc;
}

/* contact us */

.contact-us {
    background: var(--box-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    margin: 5rem 0;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.contact-us__image {
    width: 100%;
    height: 56rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
}

.contact-us__image>div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-us__image>div>h2 {
    font-size: 2.8rem;
    color: var(--text-color);
    line-height: 1;
    margin: 1.5rem 0;
}

.contact-us__image>div>input,
.contact-us__image>div>textarea {
    padding: 1rem 2rem;
    border-radius: .8rem;
    border: .1rem solid var(--second-box-bg);
    font-family: "Dana Medium";
    box-shadow: var(--shadow);
    background: var(--box-bg);
}

.contact-us__image>div>textarea {
    height: 15rem;
}

.contact-us__image>button {
    border: none;
    background: var(--second-box-bg);
    color: var(--text-color);
    padding: 1.5rem 1rem;
    border-radius: .8rem;
    font-family: "Dana Medium";
    transition: all ease-in-out .3s;
    cursor: pointer;
}

.contact-us__image>button:hover {
    background: var(--main-color);
    color: var(--third-text-color);
}

/* be teacher page */

.be-teacher {
    background: var(--box-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.be-teacher__title {
    font-size: 3.8rem;
    font-family: "Morabba Bold";
    margin-bottom: .5rem;
    color: var(--text-color);
}

.be-teacher__description {
    font-size: 1.8rem;
    color: var(--second-text-color);
    /* text-align: center; */
}

.be-teacher__btns {
    margin-top: 2rem;
    background: var(--second-box-bg);
    color: var(--text-color);
    transition: all ease-in-out .3s;
}

.be-teacher__btns:hover {
    background: var(--main-color);
    color: var(--third-text-color);
}

/* shy you should be a teacher */

.be-teacher-box__container {
    text-align: center;
    background: var(--box-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--shadow);
}

.be-teacher-box__image-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

.be-teacher-box__image-area>img {
    width: 14rem;
}

.be-teacher-box__title {
    font-size: 1.6rem;
    font-family: "Dana Demi Bold";
    color: var(--text-color);
    margin-bottom: .3rem;
}

.be-teacher-box-description {
    font-size: 1.5rem;
    color: var(--second-text-color);
    font-family: "Dana Regular";
}

/* achivement boxes */

.achivement-boxes__container {
    text-align: center;
    background: var(--main-color);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.achivement-boxes__container>img {
    width: 14rem;
}

.achivement-boxes__text {
    font-size: 2.5rem;
    color: var(--third-text-color);
    font-family: "Morabba Bold";
}

/* teacher openions */


.client {
    width: 100%;
    display: flex;
    gap: 2rem;
    overflow: hidden;
}

.client__image {
    /* width: 45rem; */
    height: 45rem;
    border-radius: .8rem 30rem .8rem .8rem;
    margin-right: 2rem;
}

.client__content {
    background: var(--box-bg);
    border-radius: .8rem .8rem .8rem 30rem;
    padding: 6rem 3rem;
    font-size: 2.2rem;

}

.client__servece {
    font-family: "Dana Demi Bold";
    margin-bottom: 2rem;
    color: var(--text-color);
}

.client__coment {
    font-size: 1.5rem;
    color: var(--second-text-color);
    font-family: "Dana Regular";
}

.btn__contorol {
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-button-next,
.swiper-button-prev {
    position: relative;
    width: 3rem;
    height: 1.5rem;
    border: 1px solid var(--main-color);
    border-radius: 10rem;
    margin-left: 1.3rem;
    margin-right: 1.3rem;
    opacity: 1 !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

/* teacher sign in form */

.teacher-sign-in-form>.contact-us__image {
    background: var(--box-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--shadow);
    height: auto;

}

/* blog page design */

.blog-design {
    display: flex;
    align-items: center;
    background: var(--box-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--shadow);
    transition: all ease-in-out .3s;
    position: relative;
}

.blog-design::before {
    content: '';
    width: 2rem;
    height: 2rem;
    border-radius: 1.5rem;
    background: var(--main-color);
    position: absolute;
    right: -1rem;
    top: -1rem;
}


.blog-design:hover {
    background: #ceebff;
}

.blog-design__right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.blog-design__right>img {
    width: 50%;
    border-radius: 1.5rem;
}

.blog-design__title {
    text-align: start;
    font-size: 2.8rem;
    color: var(--text-color);
}

/* start programing page */


.hero {
    background: var(--second-box-bg);
    text-align: center;
}

.hero__btn {
    background: var(--main-color);
    color: var(--third-text-color);
    font-size: 1.5rem;
    text-decoration: none;
    transition: 0.3s;
}

.hero__btn:hover {
    opacity: 0.85;
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.hero__content>.text__littel-info {
    width: 70rem;
}

/* section title */

.path .right-side__title,
.languages .right-side__title,
.cta__box .right-side__title {
    margin-bottom: 4rem;
    text-align: center;
}

/* path */

.path__grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));

    gap: 2rem;

}

.path__card {

    background: var(--box-bg);
    padding: 3rem;
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
    position: relative;

}

.path__card>p {
    font-size: 1.5rem;
    color: var(--second-text-color);
    font-family: "Dana Regular";

}



.path__number {

    position: absolute;
    top: -1rem;
    right: -1rem;
    background: var(--main-color);
    color: var(--third-text-color);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.4rem;
    font-family: "Morabba Bold";
}

/* languages */

.languages {

    background: var(--second-box-bg);

}

.languages__grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

    gap: 2rem;

}

.lang-card {

    background: var(--box-bg);

    padding: 3rem;

    border-radius: 1.2rem;

    box-shadow: var(--shadow);

}

.lang-card h3 {

    font-size: 2rem;

    margin-bottom: 1rem;

}

.lang-card p {

    font-size: 1.4rem;

    color: var(--second-text-color);

    margin-bottom: 2rem;

}

.lang-card a {

    color: var(--main-color);
    font-size: 1.4rem;
    text-decoration: none;

}

/* courses */

.courses-container {
    display: flex;
    gap: 2rem;
}

.courses-filter {
    width: 28rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* filter boxes */

.filter-box {
    background: var(--box-bg);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

/* title */

.filter-title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* search box */

.search-box {
    display: flex;
    align-items: center;
    border: 0.1rem solid var(--second-box-bg);
    border-radius: 0.8rem;
    overflow: hidden;

}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    padding: 1rem;
    font-size: 1.4rem;
    font-family: 'Dana Medium';
    background: var(--box-bg);
}

.search-box button {
    border: none;
    background: var(--main-color);
    color: var(--third-text-color);
    padding: 1rem 1.4rem;
    cursor: pointer;
    font-size: 1.4rem;
}

/* filter items */

.filter-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    cursor: pointer;
    font-family: "Dana Medium";
}

.filter-item input {
    width: 1.6rem;
    height: 1.6rem;
    cursor: pointer;
}

.filter-item:last-child {
    margin-bottom: 0;
}

.courses-filter {
    width: 28rem;
    /* 280px */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* 20px */
    direction: rtl;
    /* راست‌چین */
}

.filter-box {
    background: var(--box-bg);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.filter-title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
}

/* استایل فیلترهای تکی (هم چک‌باکس هم رادیو) */
.filter-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* 10px */
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
    cursor: pointer;
    color: var(--second-text-color);
    transition: color ease-in-out 0.3s;
}

.filter-item:hover {
    color: var(--main-color);
}

/* استایل Input ها */
.filter-item input[type="checkbox"],
.filter-item input[type="radio"] {
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
    accent-color: var(--main-color);
    /* رنگ دایره انتخاب شده */
}

.filter-item:last-child {
    margin-bottom: 0;
}

.search-box {
    display: flex;
    border: 0.1rem solid var(--second-box-bg);
    border-radius: 0.8rem;
    overflow: hidden;
}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    padding: 1rem;
    font-size: 1.3rem;
    font-family: "Dana Medium";
}

.search-box button {
    border: none;
    background: var(--box-bg);
    color: var(--text-color);
    padding: 0 1.5rem;
    cursor: pointer;
    font-size: 1.5rem;
}

.courses-top-side {
    background: var(--main-color);
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
    padding: 2rem;
    margin-top: 4rem;
}

.courses-top-side__title {
    color: var(--third-text-color);
    text-align: center;
    font-size: 3.8rem;
    font-family: "Morabba Bold";
    margin-bottom: 1.3rem;
}

.courses-top-side__description {
    color: var(--forthe-text-color);
    text-align: center;
    font-size: 1.8rem;
}





/* resume page */

.resume {
    display: flex;
    gap: 2rem;
}

.sidebar {
    width: 30%;
    background: var(--box-bg);
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
}

.teacher-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.teacher-info img {
    width: 10rem;
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.teacher-info h2,
.teacher-info h3 {
    margin: 2rem 0;
}

.teacher-info ul {
    width: 100%;
    list-style: none;
}

.teacher-info ul li {
    width: 100%;
    background: var(--second-box-bg);
    padding: .8rem;
    margin-bottom: .6rem;
    border-radius: .8rem;
}

.social {
    margin-top: 2.5rem;
}

.social h3 {
    margin-bottom: 1rem;
}

.social a {
    display: block;
    text-decoration: none;
    background: var(--main-color);
    color: var(--third-text-color);
    padding: .8rem;
    border-radius: .8rem;
    margin-bottom: .8rem;
    text-align: center;
    transition: all ease-in-out 0.3s;
}

.social a:hover {
    background: #3867d6;
}

.content {
    width: 70%;
    background: var(--box-bg);
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.content h2 {
    margin-bottom: 1rem;
}

.content p {
    margin-bottom: 2rem;
    text-align: justify;
}

.content h3 {
    margin-bottom: 1rem;
}

.content ul {
    padding-right: 1.8rem;
}

.content ul li {
    margin-bottom: .8rem;
}



/* basket page */

.cart {
    margin: 4rem 0;
}

.cart__container {
    display: flex;
    gap: 2rem;
}

/* محصولات */

.cart__products {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.remove-btn {
    background: #dc2626;
    border-radius: .8rem;
    padding: .5rem 1rem;
    color: var(--third-text-color);
    font-family: "Dana Demi Bold";
    position: absolute;
    top: .8rem;
    left: .8rem;
    transition: all ease-in-out .3s;
}

.remove-btn:hover {
    background: #a31313;
}

.cart__sidebar {
    flex: 1;
    height: fit-content;
    background: var(--box-bg);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.sidebar__title {
    font-family: "Dana Demi Bold";
    font-size: 1.8rem;
    margin-bottom: 2rem;
    color: var(--text-color);
}

/* price rows */

.sidebar__price {
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: var(--second-text-color);
}

.sidebar__discount span {
    color: #e03131;
}

.sidebar__final {
    font-family: "Dana Demi Bold";
    font-size: 1.6rem;
}

/* discount code */

.discount-code {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.discount-code input {
    flex: 1;
    padding: 0.8rem;
    border: 1px solid var(--forthe-text-color);
    border-radius: 0.6rem;
    font-family: "Dana Medium";
    background: var(--box-bg);
}

.discount-code button {
    background: var(--main-color);
    color: var(--third-text-color);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 0.6rem;
    cursor: pointer;
    font-family: "Dana Medium";
}

/* checkout */

.checkout-btn {
    width: 100%;
    margin-top: 2rem;
    background: var(--main-color);
    color: var(--third-text-color);
    border: none;
    padding: 1rem;
    border-radius: 0.8rem;
    font-size: 1.4rem;
    cursor: pointer;
    font-family: "Dana Medium";
}

/* coffeenet page */

.coffeenet-box .contact-us__image {
    height: auto !important;
}

/* detail add openion */




/* باکس فرم نظر */
.course-review-box{
    background: var(--box-bg);
    border-radius: 1.4rem;
    padding: 2.2rem;
    margin-top: 1.8rem;

    display: flex;
    flex-direction: column;
    gap: 1.6rem;

    border: .1rem solid rgba(0,0,0,.05);
}

/* عنوان */
.course-review-title{
    font-size: 1.6rem;
    color: var(--text-color);
}

/* textarea */
.course-review-text{
    width: 100%;
    min-height: 13rem;
    resize: vertical;

    padding: 1.4rem 1.6rem;

    border-radius: 1.2rem;
    border: .1rem solid transparent;

    background: var(--second-box-bg);
    color: var(--text-color);

    font-size: 1.4rem;
    line-height: 1.9;

    font-family: "Dana Medium";

    transition: all .25s ease;
}

/* placeholder */
.course-review-text::placeholder{
    color: var(--second-text-color);
}

/* فوکوس */
.course-review-text:focus{
    outline: none;
    border-color: var(--main-color);
    background: var(--box-bg);
    box-shadow: 0 0 0 .3rem rgba(29,155,239,.12);
}

/* دکمه ثبت */
.course-review-submit{
    width: fit-content;

    padding: 1rem 2.6rem;

    border: none;
    border-radius: 1rem;

    background: var(--main-color);
    color: var(--third-text-color);

    font-size: 1.4rem;
    font-family: "Dana Medium";

    cursor: pointer;

    transition: all .25s ease;
}

/* هاور */
.course-review-submit:hover{
    transform: translateY(-.2rem);
    box-shadow: 0 .8rem 2rem rgba(0,0,0,.08);
}

/* کلیک */
.course-review-submit:active{
    transform: translateY(0);
}

/* ردیف ستاره‌ها */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 0.6rem;        /* 6px */
    padding: 0.6rem 0;  /* 6px */
}

/* ستاره */
.star {
    font-size: 2rem;
    cursor: pointer;
    color: var(--second-text-color);
    transition: color .25s ease, transform .2s ease;
    user-select: none;
    line-height: 1;
}

/* ستاره پر */
.star.filled {
    color: #FFD43B;
}

/* هاور */
.star:hover {
    transform: scale(1.18);
}

/* وقتی کل مجموعه ستاره‌ها هاور شود */
.star-rating:hover .star {
    color: var(--second-text-color);
}

/* متن راهنما */
.star-rating-hint {
    margin-top: 0.4rem; /* 4px */
    font-size: .9rem;
    color: var(--second-text-color);
}

/* ورودی‌های فرم */
.course-review-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;        /* 8px */
    color: var(--text-color);
}

/* ردیف ستاره‌ها (بخش دوم کد تو) */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 0.4rem;        /* 4px */
    font-size: 1.6rem;
}

/* خود ستاره */
.star {
    cursor: pointer;
    color: var(--second-text-color);
    transition: color .2s ease, transform .15s ease;
    user-select: none;
}

/* ستاره پر */
.star.filled {
    color: #FFC107;
}

/* هاور */
.star:hover {
    transform: scale(1.1);
}

/* راهنمای زیر ستاره‌ها */
.star-rating-hint {
    font-size: 0.85rem;
    color: var(--second-text-color);
}

.timer-digit {
    display: inline-block;
    transition: all 0.25s ease;
}

.timer-digit.change {
    transform: translateY(-6px);
    opacity: 0;
}
/* Mobile User Box */
.mobile-user-box{
    background: var(--box-bg);
    border-radius: 1.2rem;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--shadow);
}

.mobile-user-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.4rem;
}

.mobile-user-greet{
    color: var(--paragraph-color);
}

.mobile-user-name{
    font-family: "Dana Demi Bold";
    color: var(--text-color);
}

.mobile-user-actions{
    display: flex;
    gap: .8rem;
}

.user-btn{
    flex: 1;
    text-align: center;
    padding: .8rem;
    border-radius: .8rem;
    font-size: 1.3rem;
    text-decoration: none;
}

.panel-btn{
    background: var(--main-color);
    color: #fff;
}

.logout-btn{
    background: #f1f1f1;
    color: #333;
}
.course-desc-scroll {
    max-height: 50rem;          /* حدودا معادل 10 خط بر اساس line-height */
    overflow-y: auto;           /* اسکرول عمودی */
    line-height: 1.8;           /* فاصله استاندارد بین خطوط */
    padding: 10px 5px;          /* کمی فاصله داخلی */
    text-align: justify;        /* برای نظم بیشتر متن */
    white-space: normal;        /* اجازه خط شکنی */
}

.students__effects {
    position: relative;
}

.students__effects .swiper {
    overflow: hidden;
    padding: 10px 0;
}

.students__effects .swiper-wrapper {
    align-items: stretch;
}

.students__effects .swiper-slide {
    width: 260px; /* عرض هر کارت */
    height: auto;
    display: flex;
}

.students__boxes {
    background: var(--box-bg);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
    text-align: center;
    scroll-snap-align: start;

    width: 100%;
    height: 360px; /* ارتفاع ثابت */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.datails-box .students__boxes {
    background: var(--second-box-bg) !important;
}

.students__image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

.students__name {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
    flex-shrink: 0;
}

.students__text {
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* تعداد خطوط متن */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin: 0.75rem 0;
    line-height: 1.8;
}

.students__boxes > div {
    color: var(--second-text-color);
    flex-shrink: 0;
    margin-top: auto;
}