:root {

    --primary: #076b50;

    /* بنفش اصلی */

    --primary-dark: #055943;

    /* بنفش تیره */

    --gray-100: #f3f0f8;

    /* خاکستری روشن با ته‌مایه بنفش */

    --gray-600: #4d756a;

    /* خاکستری متوسط بنفش‌طور */

    --gray-800: #3a534c;

    /* خاکستری تیره بنفش‌طور */

    --bg: #f9f4fb;

    /* پس‌زمینه روشن بنفش‌طور */

    --card-shadow: rgba(0, 0, 0, 0.1);

    --active-shadow: rgba(0, 0, 0, 0.15);

    --transition: 0.4s ease;

}





/* ====== lode page ====== */

@keyframes fadeInHero {

    0% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



@keyframes slideUp {

    0% {

        transform: translateY(50px);

        opacity: 0;

    }



    100% {

        transform: translateY(0);

        opacity: 1;

    }

}



@keyframes fadeInHero {

    0% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



@keyframes slideUp {

    0% {

        transform: translateY(50px);

        opacity: 0;

    }



    100% {

        transform: translateY(0);

        opacity: 1;

    }

}



/* ====== end lode ====== */





/* <!-- ===== PAGE 1 =====  -->  */



/* CSS */

:root {

    --main-height: 585px;

}



.container-slider {

    position: relative;

    margin: 0 auto;

    display: flex;

    flex-direction: row-reverse;

    gap: 15px;

    height: var(--main-height);

    flex-wrap: nowrap;

    align-items: stretch;



    @media (max-width: 1259px) {

        border-radius: 15px;

    }

}



/* سمت راست (اسلایدر) */

.right-side {

    flex: 1.8;

    position: relative;

    overflow: hidden;

    background: #eee;

    height: 100%;

    min-height: 0;

}



.swiper-container,

.swiper-wrapper,

.swiper-slide {

    height: 100%;

}



.swiper-slide>a,

.swiper-slide>a img {

    display: block;

    width: 100%;

    height: 100%;

}



.slide-img,

.image-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    user-select: none;

    -webkit-user-drag: none;

}



/* فلش‌ها */

.nav-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 10;

}



.nav-arrow i {

    font-size: 24px;

    color: #eee;

}



.nav-arrow.left {

    left: 10px;

}



.nav-arrow.right {

    /* right: 10px; */

}



.swiper-button-next::after,

.swiper-button-prev::after {

    display: none !important;

}



/* کانتینر اسلایدر باید نسبی باشه */

#heroSwiper {

    position: relative;

}



/* دات‌ها: همیشه وسط، مستقل از تعداد و عرض دات‌ها */

#heroSwiper .dots {

    position: absolute;

    bottom: 1.5rem;

    left: 0;

    right: 0;

    transform: none;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 5px;

    z-index: 15;

}



/* استایل خود دات‌ها مثل قبل */

#heroSwiper .dots .swiper-pagination-bullet {

    width: 12px;

    height: 12px;

    background-color: rgba(255, 255, 255, 0.5);

    border-radius: 50%;

    opacity: 1;

    transition: all 0.3s ease;

}



#heroSwiper .dots .swiper-pagination-bullet-active {

    width: 26px;

    height: 12px;

    border-radius: 6px;

    background-color: #055943;

}



/* سمت چپ (بنرها) */

.left-side {

    flex: 0.8;

    display: flex;

    flex-direction: column;

    gap: 8px;

    height: 100%;

    min-height: 0;

}



.image-box {

    flex: 1 1 0;

    position: relative;

    border-radius: 15px;

    overflow: hidden;

    min-height: 0;

    background-color: #333;

    object-fit: cover;

    object-position: center;

}



.image-box img {

    object-fit: cover;

    object-position: center;

}



/* واکنش‌گرا */

@media (max-width: 1024px) {

    .container-slider {

        flex-direction: column;

        height: auto;

    }



    .right-side {

        width: 100%;

        height: 380px;

    }



    .image-box {

        height: 380px;

    }

}



@media (max-width: 600px) {

    .right-side {

        height: 300px;

    }



    .image-box {

        height: 300px;

    }

}





/* <!-- === END PAGE 1 ====  --> */



/* <!-- ===== PAGE 2 =====  --> */



/* =================== Tokens (در صورت نیاز) =================== */

:root {

    --primary: #076b50;

    --primary-dark: #055943;

    --line: #e6eaee;

    --card: #fff;

    --ink: #121a27;

    --muted: #5f6b72;

    --shadow: 0 18px 40px rgba(0, 0, 0, .06);

    --svc-z-bg: 10040;

    --svc-z-modal: 10050;

}



/* ========== Services (آیکونی) ========== */

.simple-services {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 3.2rem;

    direction: rtl;

    padding: 20px 0 12px;

}



.service-icon {

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    text-decoration: none;

    font-size: 1.5rem;

    color: #444;

    padding: 1rem;

    border-radius: 1rem;

    overflow: hidden;

    transition: all .3s ease;

}



.service-icon i {

    font-size: 2rem;

    transition: transform .3s, color .3s

}



.service-icon span {

    margin-top: 1rem;

    font-size: 1rem;

    font-weight: 600;

    color: #6d7988;

    transition: .3s

}



.service-icon::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 1rem;

    background: rgba(39, 176, 133, .1);

    transform: scale(0);

    transition: transform .35s

}



.service-icon:hover::before {

    transform: scale(1)

}



.service-icon:hover i,

.service-icon:hover span {

    color: var(--primary)

}



@media (max-width:1024px) {

    .simple-services {

        gap: 2rem

    }

}



@media (max-width:768px) {

    .service-icon {

        flex: 1 1 40%;

        max-width: 150px

    }

}



@media (max-width:480px) {

    .simple-services {

        gap: 1.5rem

    }



    .service-icon {

        flex: 1 1 45%

    }



    .service-icon span {

        font-size: .9rem

    }

}



/* ========== Modal (اسکرول داخلی + هدر چسبان) ========== */

.modal-bg {

    position: fixed;

    inset: 0;

    background: #0008;

    opacity: 0;

    pointer-events: none;

    transition: .25s;

    z-index: var(--svc-z-bg);

}



.modal-bg.show {

    opacity: 1;

    pointer-events: auto

}



.modal {

    position: fixed;

    inset: auto 0 0 0;

    margin: auto;

    width: min(820px, 92vw);

    max-height: 88vh;

    display: flex;

    flex-direction: column;

    transform: translateY(20px);

    opacity: 0;

    pointer-events: none;

    transition: .3s;

    background: var(--card);

    border: 1px solid var(--line);

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 50px 140px rgba(0, 0, 0, .5);

    z-index: var(--svc-z-modal);

    direction: rtl;

}



.modal.show {

    transform: none;

    opacity: 1;

    pointer-events: auto

}



/* Header: sticky + close centered */

.m-head {

    position: sticky;

    top: 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    padding: 12px 14px;

    background: var(--card);

    border-bottom: 1px solid var(--line);

}



.m-head b {

    font-size: 1.05rem

}



.m-head .close {

    border: 0;

    background: #db1032;

    color: #fff;

    width: 40px;

    height: 40px;

    border-radius: 10px;

    display: grid;

    place-items: center;

    cursor: pointer;

    line-height: 0;

    padding: 0;

}



.m-head .close svg {

    display: block;

    width: 22px;

    height: 22px

}



/* Body: fills remaining height & scrolls */

.m-body {

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 14px;

    padding: 14px;

    overflow: auto;

    -webkit-overflow-scrolling: touch;

    flex: 1 1 auto;

}



@media (max-width:680px) {

    .m-body {

        grid-template-columns: 1fr

    }

}



.m-body .cover {

    width: 100%;

    height: 260px;

    object-fit: cover;

    border: 1px solid var(--line);

    border-radius: 12px;

}



/* Buttons row (اختیاری) */

.row {

    display: flex;

    gap: 10px;

    flex-wrap: wrap

}



.btn {

    background: #fff;

    color: #0a3a2a;

    border: 1px solid #90dac0;

    border-radius: 12px;

    padding: .6rem .9rem;

    cursor: pointer;

    font-weight: 900;

    display: inline-flex;

    gap: 8px;

    align-items: center;

    transition: .3s cubic-bezier(.2, .7, .2, 1);

    text-decoration: none;

}



.btn:hover {

    box-shadow: 0 0 0 5px #90dac038;

    transform: translateY(-1px)

}



.btn.dl {

    background: #136e52;

    color: #fff;

    border-color: #0e4f3a

}



/* قفل اسکرول صفحه وقتی مدال بازه (اختیاری اگر از JS استفاده می‌کنی) */

html.svc-ovh,

body.svc-ovh {

    overflow: hidden

}



/* احترام به reduce-motion */

@media (prefers-reduced-motion:reduce) {



    .modal,

    .modal-bg,

    .service-icon::before {

        transition: none

    }

}





/* <!-- === END PAGE 2 ====  --> */



/* <!-- ===== PAGE 3 =====  --> */



.Products {

    padding: 1% 5%;

    padding-bottom: 3%;

}



/* استایل عنوان و توضیحات اصلی */

.text-Products {

    text-align: center;

    margin-bottom: 40px;

}



.text-Products h2 {

    font-size: 2.5rem;

    font-weight: bold;

    margin: 0;

    color: #222;

}



.text-Products p {

    font-size: 1.2rem;

    margin-top: 8px;

    color: #444;

    line-height: 1.5;

}



/* چیدمان گرید دسته‌بندی محصولات */

.CategoryP {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

}



/* تنظیمات باکس‌ها */

.box {

    position: relative;

    overflow: hidden;

    border-radius: 5px;

    cursor: pointer;

    min-height: 280px;

    /* ارتفاع ثابت برای هماهنگی */

    background: #f5f5f5;

    /* پس‌زمینه پیش‌فرض در صورت عدم وجود عکس */

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



/* انیمیشن کلی برای hover روی باکس */

.box:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

}



/* استفاده از pseudo-element برای تصویر زمینه */

.box::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    transition: transform 0.5s ease;

    z-index: 1;

    background-color: transparent;

}



/* اضافه کردن هاله مشکی برای افزایش کنتراست متن */

.box::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.4);

    z-index: 2;

}



/* تصاویر زمینه اختصاصی (مسیر تصاویر رو متناسب با پروژه تنظیم کنید) */

.bike-kids::before {

    background-image: url('../img/page-3/1.jpg');

}



.tricycle::before {

    background-image: url('../img/page-3/2.jpg');

}



.scooter::before {

    background-image: url('../img/page-3/3.jpg');

}



.electric-car::before {

    background-image: url('../img/page-3/4.jpg');

}



.electric-motor::before {

    background-image: url('../img/page-3/5.jpg');

}



/* انیمیشن زوم روی تصویر هنگام hover */

.box:hover::before {

    transform: scale(1.1);

}



/* استایل محتوای داخل باکس */

.box .content {

    position: relative;

    z-index: 3;

    /* بالاتر از pseudo-element ها */

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 100%;

}



/* کلمه کوتاه */

.short-word {

    font-size: 1rem;

    margin: 0;

    color: #f5f5f5;

}



/* عنوان داخل باکس */

.box-title {

    font-size: 1.5rem;

    font-weight: bold;

    margin: 5px 0 0 0;

    color: #f5f5f5;

    align-items: center;

}



.slogan-box p {

    font-size: 1rem;

    font-weight: 600;

    color: #fff;

    margin: 0;

    padding: 5px;

}



/* کادر و استایل شعار */

.slogan-box {

    display: inline-block;

    margin-bottom: 1rem;

    color: #f5f5f5;

    border-radius: .3rem;

    border: .1rem solid #fff;

    font-size: 14px;

    font-weight: 800;

    padding: 10px 18px;

    cursor: pointer;

    background: none;

    transition: .2s linear;

    position: relative;

    z-index: 1;

    overflow: hidden;

    font-weight: 500;

    text-align: center;

}



.slogan-box::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 0;

    background: #f5f5f5;

    z-index: -1;

    transition: .2s linear;

}



.slogan-box:hover {

    color: #222;

}



.slogan-box:hover::before {

    width: 100%;

    right: 0;

}



.bike-kids {

    grid-column: span 2;

}



/* کانتینر والد */

.button-container {

    display: flex;

    justify-content: center;

    /* افقی وسط */

    align-items: center;

    /* عمودی وسط در صورت نیاز */

    margin-top: 20px;

    /* فاصله از بالا */

}



/* خود دکمه */

.cool-button {

    padding: 12px 20px;

    background: transparent;

    border: 1px solid #055943;

    color: #222;

    text-decoration: none;

    border-radius: 12px;

    transition: transform 0.3s, box-shadow 0.3s;

}



.cool-button:hover {

    transform: translateY(-1px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

    color: #444;

}



/* -------------------- */

/* مدیا کوئری برای تبلت (حداکثر عرض 1024px) */

@media (max-width: 1024px) {

    .CategoryP {

        grid-template-columns: repeat(2, 1fr);

    }



    /* در تبلت باکس .bike-kids همچنان span 2 خواهد بود */

}



/* مدیا کوئری برای موبایل (حداکثر عرض 768px) */

@media (max-width: 768px) {

    .CategoryP {

        grid-template-columns: 1fr;

    }



    .bike-kids {

        grid-column: span 1;

    }



    .box {

        min-height: 350px;

    }



    .text-Products h2 {

        font-size: 2rem;

    }



    .text-Products p {

        font-size: 1rem;

    }



    .box-title {

        font-size: 1.5rem;

    }



    .short-word {

        font-size: 0.9rem;

    }

}



/* 1) چون حالا تصویر از <img> می‌آید، بک‌گراندِ قبلی غیرفعال شود (ظاهر تغییری نمی‌کند) */

.box::before {

    display: none !important;

}



/* 2) تصویر HTML پشت اوورلی و زیر محتوا قرار بگیرد (چیدمان لایه‌ها مثل قبل) */

.box .box-img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: 1;

    transform: scale(1);

    transition: transform .5s ease;

}



/* افکت زوم مثل قبل */

.box:hover .box-img {

    transform: scale(1.1);

}



/* 3) روی هاور، رنگ متن‌ها سیاه شود (فقط رنگ) */

.box:hover .content,

.box:hover .short-word,

.box:hover .box-title,

.box:hover .slogan-box p {

    color: #111 !important;

}



.box:hover .slogan-box {

    border-color: #111;

}





/* <!-- === END PAGE 3 ====  --> */



/* ===================================================== */

/* ===================================================== */

/* ===================================================== */

/* ==== کارت‌ها: همون استایل خودت + ریزبهینه برای ریسپانسیو استاندارد ==== */

.news-header1 {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 88%

}



.right-side1 {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #222;

    border-right: 2px solid #e0e0e0;

    padding-right: 10px;



}



.right-side1 .icon {

    color: #222;

    font-size: 20px;

}



.right-side1 h2 {

    margin-bottom: 0;

}



@media (max-width:768px) {

    .news-header1 {

        width: 100%;

        padding: 0 5%

    }

}



#course {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    margin: 0 auto 20px

}



.course-container {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    grid-gap: 20px;

    margin-top: 30px;

    width: 90%

}



@media (max-width:1113px) {

    .course-container {

        grid-template-columns: repeat(2, 1fr)

    }

}



@media (max-width:650px) {

    .course-container {

        grid-template-columns: 1fr;

        width: 94%

    }

}



.course-box {

    width: 100%;

    max-width: 350px;

    border: 1px solid #e6e6e6;

    border-radius: 8px;

    transition: all .3s;

    padding: 10px;

    background: #fff

}



.course-box:hover {

    box-shadow: 2px 20px 30px rgba(0, 0, 0, .05);

    border: #4d756a 1px solid

}



.course-img {

    width: 100%

}



.course-img img {

    width: 100%;

    height: auto;

    aspect-ratio: 16/9;

    object-fit: cover;

    object-position: center;

    margin-bottom: 8px;

    border-radius: 8px

}



.course-text {

    padding: 20px;

    display: flex;

    flex-direction: column

}



.course-text .category {

    color: #333;

    font-size: .9rem;

    font-weight: 500

}



.course-text label {

    color: #333;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    transition: .5s

}



.course-box .course-text label::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    height: 2px;

    width: 0;

    background: #4d756a;

    transition: width .3s

}



.course-box .course-text label:hover::after {

    width: 100%

}



.course-box:hover .course-text label {

    color: #4d756a;

}



.course-text p {

    color: #666;

    font-size: .9rem;

    margin: 10px 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden

}



.lesson-time {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    margin-top: 10px

}



.lesson-time span {

    font-size: .9rem;

    color: #444;

    font-weight: 500

}



.lesson-time span i {

    color: #db1032;

    margin-right: 5px

}



/* ==== مودال خبر (الهام از مودال قبلی، با اسکرول داخلی) ==== */

:root {

    --nm-z-bg: 10040;

    --nm-z-modal: 10050;

    --nm-line: #e6eaee;

    --nm-card: #fff;

}



.news-modal-bg {

    position: fixed;

    inset: 0;

    background: #0008;

    opacity: 0;

    pointer-events: none;

    transition: .25s;

    z-index: var(--nm-z-bg)

}



.news-modal-bg.show {

    opacity: 1;

    pointer-events: auto

}



.news-modal {

    position: fixed;

    inset: auto 0 0 0;

    margin: auto;

    width: min(820px, 92vw);

    max-height: 90vh;

    transform: translateY(20px);

    opacity: 0;

    pointer-events: none;

    background: var(--nm-card);

    border: 1px solid var(--nm-line);

    border-radius: 18px;

    box-shadow: 0 50px 140px rgba(0, 0, 0, .5);

    z-index: var(--nm-z-modal);

    transition: .3s;

    direction: rtl;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.news-modal.show {

    transform: none;

    opacity: 1;

    pointer-events: auto

}



.nm-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding: 12px 14px;

    border-bottom: 1px solid var(--nm-line);

    width: 100%;

}



.nm-head b {

    font-size: 1.05rem

}



.nm-close {

    border: 0;

    background: #db1032;

    color: #fff;

    width: 40px;

    height: 40px;

    border-radius: 10px;

    display: grid;

    place-items: center;

    cursor: pointer;

    margin-inline: auto;

    display: flex;

    /* یا همون grid، فرقی نداره—این مطمئن‌تره */

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    padding: 0;

    margin-inline: 0;

    /* auto رو حذف کن تا جاش تو هدر درست باشه */

    border: 0;

    line-height: 0;

}



.nm-close svg {

    transform: translateY(0.5px);

}



.nm-body {

    display: block;

    padding: 14px;

    overflow: auto;

    /* اسکرول محتوا */

}



.nm-cover {

    width: 100%;

    height: auto;

    aspect-ratio: 16/9;

    object-fit: cover;

    border: 1px solid var(--nm-line);

    border-radius: 12px

}



.nm-meta {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin: 10px 0

}



.chip {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: .2rem .5rem;

    border: 1px solid var(--nm-line);

    border-radius: 999px;

    font-size: .9rem;

    background: #f7faf8;

    color: #27423a

}



.nm-text {

    color: #222;

    line-height: 1.9

}



/* قفل اسکرول هنگام باز بودن مودال */

html.modal-lock,

body.modal-lock {

    overflow: hidden

}



/* احترام به کاهش انیمیشن */

@media (prefers-reduced-motion:reduce) {



    .news-modal,

    .news-modal-bg {

        transition: none

    }

}



/* --- مرکزچین کردن گرید در همه سایزها --- */

#course .course-container {

    /* ستون‌های واکنش‌گرا با حداقل/حداکثر عرض ثابت برای هر کارت */

    grid-template-columns: repeat(auto-fit, minmax(260px, 350px));

    justify-content: center;

    /* خودِ گرید وسط صفحه */

    justify-items: center;

    /* خودِ کارت‌ها وسط ستون‌ها */

    width: min(1200px, 94vw);

    /* ظرف متعادل و وسط‌چین */

    margin-inline: auto;

    /* تضمین وسط‌چینی ظرف */

}



/* اطمینان از یکدست بودن کارت‌ها */

#course .course-box {

    width: 100%;

    max-width: 350px;

}



/* لپ‌تاپ و بالاتر: دقیقا 4 ستون کامل */

@media (min-width: 1024px) {

    #course .course-container {

        grid-template-columns: repeat(4, minmax(0, 1fr));

        justify-content: center;

        justify-items: stretch;

        width: min(1800px, 94vw);

        margin-inline: auto;

    }



    #course .course-box {

        max-width: none;

        /* اجازه بده هر ستون کل عرضش رو بگیره */

        width: 100%;

    }

}



/* end */

/* ===================================================== */

/* ===================================================== */

/* ===================================================== */



/* <!-- ===== PAGE 4 =====  --> */



.banner {

    position: relative;

    width: 100%;

    height: clamp(14rem, 28vw, 22rem);

    /* ارتفاع واکنش‌گرا */

    display: flex;

    align-items: center;

    justify-content: center;

    background: url(../img/page-4/1.jpg) no-repeat;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    /* روی موبایل پایین‌تر خاموش می‌کنیم */

    isolation: isolate;

    /* رندر ایزوله برای لایه تیره */

}



/* افکت سایه یکنواخت */

.banner::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, .55));

    z-index: 0;

}



/* ظرف متن مرکزچین */

.overlay {

    position: relative;

    z-index: 1;

    width: min(1100px, 92vw);

    margin-inline: auto;

    padding: 0 1rem;

    text-align: center;

    color: #fff;

}



/* تایپوگرافی واکنش‌گرا با clamp */

.overlay h2 {

    font-weight: 800;

    font-size: clamp(1.8rem, 4vw, 3rem);

    margin-bottom: 1.1rem;

}



.overlay p {

    font-size: clamp(1rem, 2.4vw, 1.5rem);

    margin-bottom: .25rem;

    color: #fff;

    line-height: 1.8;

}



/* دکمه با افکت پرشدن از سمت راست (سازگار با RTL) */

.news-btn {

    position: relative;

    overflow: hidden;

    display: inline-block;

    margin-top: 1rem;

    color: #f5f5f5;

    border-radius: .8rem;

    border: .1rem solid #fff;

    font-size: 20px;

    padding: 10px 20px;

    cursor: pointer;

    background: none;

    transition: color .2s linear, border-color .2s linear;

    font-weight: 500;

    text-decoration: none;

}



.news-btn::before {

    content: "";

    position: absolute;

    inset: 0;

    /* چهار طرف 0 */

    background: #f5f5f5;

    transform: scaleX(0);

    transform-origin: right;

    /* پر شدن از راست (مناسب فارسی) */

    transition: transform .25s ease;

    z-index: -1;

}



.news-btn:hover::before {

    transform: scaleX(1);

}



.news-btn:hover {

    color: #222;

}



/* پارالاکس در موبایل/تبلت خاموش (بهبود عملکرد) */

@media (max-width: 1024px) {

    .banner {

        background-attachment: scroll;

    }

}



/* ارتفاع کمی بیشتر وقتی تیتر دوخطی می‌شود */

@media (max-width: 480px) {

    .banner {

        height: clamp(16rem, 45vw, 20rem);

    }

}



/* احترام به کاهش انیمیشن کاربر */

@media (prefers-reduced-motion: reduce) {

    .news-btn::before {

        transition: none;

    }

}



/* <!-- === END PAGE 4 ====  --> */



/* <!-- ===== PAGE 5 =====  --> */



#history {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    margin: 20px auto;

    z-index: 1

}



.products-header1 {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 70%

}



.products-header1 a:hover {

    color: #fff

}



.products-header1 a i {

    margin-left: 5px

}



.right-side2 {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    border-right: 2px solid #e0e0e0;

    padding-right: 10px

}



.right-side2 .icon {

    color: #C9A227;

    font-size: 20px

}



.right-side2 h2 {

    font-size: 22px;

    font-weight: 700;

    margin: 0

}



.left-link1 {

    font-size: 14px;

    color: #fff;

    background: #C9A227;

    padding: 8px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 500;

    transition: all .3s ease

}



.course-box1 {

    width: 100%;

    max-width: 350px;

    border: 1px solid #e6e6e6;

    border-radius: 8px;

    transition: all ease .3s;

    padding: 10px

}



.course-box1:hover {

    box-shadow: 2px 20px 30px rgba(0, 0, 0, .05);

    border: #C9A227 1px solid

}



.course-img1 {

    width: 100%

}



.course-img1 img {

    width: 100%;

    height: 150px;

    object-fit: cover;

    object-position: center;

    margin-bottom: 8px;

    border-radius: 8px

}



.course-text1 {

    gap: 10px

}



.course-text1 .category1 {

    color: #fff;

    font-size: .9rem;

    font-weight: 500;

    border-bottom: solid 1px #e0e0e0

}



.course-text1 label {

    color: #fff;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    transition: all .5s ease;

    padding-top: 12px

}



.course-box1:hover .course-text1 label {

    color: #C9A227

}



.course-text1 p {

    color: #fff;

    font-size: .9rem;

    margin: 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden

}



.lesson-time1 {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    margin-top: 10px

}



.lesson-time1 span {

    font-size: .9rem;

    color: #fff;

    font-weight: 500

}



.lesson-time1 span i {

    color: #db1032;

    margin-right: 5px

}



.course-container1 {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-gap: 20px;

    margin-top: 30px;

    width: 70%

}



@media (max-width:1113px) {}



@media (max-width:550px) {

    #history {

        margin: 0 43px

    }

}



@media (max-width:370px) {

    #history {

        margin: 0 auto

    }

}



.hero {

    position: relative;

    height: 100vh;

    opacity: 0;

    animation: fadeInHero 2s forwards;

    animation-delay: .5s;

    overflow: hidden

}



.hero::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, .5);

    z-index: -1

}



.video-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1

}



.video-container video {

    position: absolute;

    top: 50%;

    left: 50%;

    width: auto;

    height: auto;

    min-width: 100%;

    min-height: 100%;

    transform: translate(-50%, -50%)

}



.video-container .overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 30%;

    background: linear-gradient(to top, black, transparent);

    pointer-events: none

}



.hero-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    height: 100%;

    text-align: center;

    padding: 0 5px;

    transform: translateY(50px);

    opacity: 0;

    animation: slideUp 1.5s forwards;

    animation-delay: 1s;

    color: #fff;

    line-height: 1.5

}



.hero-content h1:nth-child(1) {

    font-size: 7rem

}



.hero-content h1:nth-child(2) {

    letter-spacing: 2px;

    font-weight: 100;

    margin-top: -52px

}



.hero-content h1 {

    font-size: 4rem

}



.hero-content p {

    font-size: 1.2rem;

    margin-bottom: 40px

}



.cta-btn {

    display: inline-block;

    margin-top: 1rem;

    color: #f5f5f5;

    border-radius: .3rem;

    border: .1rem solid #fff;

    font-size: 20px;

    padding: 10px 60px;

    cursor: pointer;

    background: none;

    transition: .2s linear;

    position: relative;

    z-index: 1;

    overflow: hidden;

    font-weight: 500

}



.cta-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 0;

    background: #f5f5f5;

    z-index: -1;

    transition: .2s linear

}



.cta-btn:hover::before {

    width: 100%;

    right: 0

}



.cta-btn:hover {

    color: #222

}



.video-background {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1

}



.video-background video {

    position: absolute;

    top: 50%;

    left: 50%;

    width: auto;

    height: auto;

    min-width: 100%;

    min-height: 100%;

    transform: translate(-50%, -50%)

}



#history .course-container1 {

    grid-template-columns: repeat(auto-fit, minmax(260px, 350px));

    justify-content: center;

    justify-items: center;

    width: min(1200px, 90vw);

    margin-inline: auto

}



#history .course-box1 {

    max-width: 350px;

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 100%

}



@media (min-width:1024px) {

    #history .course-container1 {

        grid-template-columns: repeat(3, minmax(0, 1fr));

        justify-items: stretch

    }

}



:root {

    --am-z-bg: 10040;

    --am-z-modal: 10050;

    --am-line: #e6eaee;

    --am-card: #fff

}







.am-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding: 12px 14px;

    border-bottom: 1px solid var(--am-line);

    width: 100%

}



.am-head b {

    font-size: 1.05rem

}



.am-close {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    padding: 0;

    margin-inline: 0;

    border: 0;

    border-radius: 10px;

    cursor: pointer;

    background: #db1032;

    color: #fff;

    line-height: 0

}



.am-close svg {

    display: block

}



.am-body {

    display: block;

    padding: 14px;

    overflow: auto

}



.am-cover {

    width: 100%;

    height: auto;

    aspect-ratio: 16/9;

    object-fit: cover;

    border: 1px solid var(--am-line);

    border-radius: 12px

}



.am-meta {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin: 10px 0

}



.chip {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: .2rem .5rem;

    border: 1px solid var(--am-line);

    border-radius: 999px;

    font-size: .9rem;

    background: #f7faf8;

    color: #27423a

}



.am-text {

    color: #222;

    line-height: 1.9

}



html.modal-lock,

body.modal-lock {

    overflow: hidden

}



@media (prefers-reduced-motion:reduce) {



    .art-modal,

    .art-modal-bg {

        transition: none

    }

}



.article-swiper {

    width: min(1200px, 90vw);

    margin-inline: auto;

    padding: 10px 0

}



.article-swiper .swiper-wrapper {

    align-items: stretch

}



.article-swiper .swiper-slide {

    height: auto;

    display: flex

}



.article-swiper .course-box1 {

    width: 100%;

    max-width: none

}



.article-swiper .swiper-btns .swiper-button-prev,

.article-swiper .swiper-btns .swiper-button-next {

    width: 42px;

    height: 42px;

    border-radius: 10px;

    background: #C9A227;

    color: #fff

}



.article-swiper .swiper-button-prev:after,

.article-swiper .swiper-button-next:after {

    font-size: 18px;

    color: #fff

}



.article-swiper .swiper-pagination-bullet {

    background: #fff;

    opacity: .5

}



.article-swiper .swiper-pagination-bullet-active {

    background: #C9A227;

    opacity: 1

}



@media (max-width:1024px) {

    .hero {

        height: 72vh

    }



    .video-container video {

        min-width: 100%;

        min-height: 100%

    }

}



.hero {

    isolation: isolate;

    min-height: clamp(60vh, 85vh, 100vh)

}



.hero::after {

    z-index: 0

}



.video-container {

    z-index: -1

}



#history {

    position: relative;

    z-index: 1

}



@media (max-width:1225px) {

    .hero {

        min-height: 105vh

    }



    .video-container video {

        min-width: 100%;

        min-height: 100%;

        object-fit: cover

    }

}



@media (max-width:520px) {

    .hero {

        min-height: 150vh

    }

}



.products-header1 {

    width: min(1200px, 92vw);

    margin-inline: auto;

    gap: 12px;

    flex-wrap: wrap

}



.right-side2 {

    padding-right: 10px

}



.left-link1 {

    white-space: nowrap

}



#history .course-container1 {

    display: grid !important;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 20px;

    width: min(1200px, 92vw);

    margin: 30px auto 0;

    justify-items: stretch

}



#history .course-box1 {

    width: 100%;

    max-width: none;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    height: auto;

    min-height: 100%;

    overflow: hidden;

    box-sizing: border-box

}



.course-img1 img {

    width: 100%;

    aspect-ratio: 16/9;

    height: auto !important;

    object-fit: cover;

    border-radius: 8px

}



.course-text1 {

    display: flex;

    flex-direction: column;

    gap: 10px;

    flex-grow: 1

}



.course-text1 .category1 {

    display: inline-block;

    padding-bottom: 6px;

    border-bottom: 1px solid rgba(224, 224, 224, .5)

}



.course-text1 label {

    font-size: clamp(1rem, 1.6vw, 1.15rem);

    line-height: 1.6;

    color: #fff;

    cursor: pointer;

    transition: color .2s ease

}



.course-box1:hover .course-text1 label {

    color: #C9A227

}



.course-text1 p {

    font-size: clamp(.9rem, 1.4vw, 1rem);

    line-height: 1.9;

    color: #fff;

    margin: 0;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    overflow-wrap: anywhere;

    display: block;

    white-space: normal;

    overflow: visible

}



.lesson-time1 {

    gap: 8px;

    row-gap: 6px

}



.lesson-time1 span {

    font-size: .9rem;

    color: #fff;

    white-space: nowrap

}



@media (max-width:600px) {

    #history {

        margin: 8vh auto

    }



    .products-header1 {

        text-align: center

    }



    .right-side2 {

        border-right: 0;

        padding-right: 0

    }

}



.am-close {

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 0;

    padding: 0;

    margin-inline: 0

}



.am-close svg {

    display: block

}



.am-body {

    overscroll-behavior: contain

}



.course-box1 {

    width: 100%;

    max-width: 100%;

    border: 1px solid #e6e6e6;

    border-radius: 12px;

    padding: 14px;

    transition: transform .3s ease, box-shadow .3s ease, border .3s ease;

    display: flex;

    flex-direction: column;

    background: rgba(255, 255, 255, .03);

    backdrop-filter: blur(6px);

    min-width: 0

}



.course-box1:hover {

    transform: translateY(-6px);

    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);

    border: 1px solid #C9A227

}



.course-img1 img {

    width: 100%;

    aspect-ratio: 16/9;

    object-fit: cover;

    border-radius: 10px;

    margin-bottom: 10px

}



.course-text1 p {

    font-size: clamp(.9rem, 1.4vw, 1rem);

    line-height: 1.7;

    color: #fff;

    margin: 0;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

    overflow-wrap: break-word

}



.course-text1 label {

    font-size: clamp(1rem, 1.6vw, 1.15rem);

    font-weight: 700;

    color: #fff;

    cursor: pointer;

    transition: color .25s ease

}



.course-box1:hover .course-text1 label {

    color: #C9A227

}



.left-link1 {

    transition: background .3s ease, transform .2s ease

}



.left-link1:hover {

    background: #db1032;

    transform: scale(1.05)

}



#history .course-container1 {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 22px;

    width: min(1200px, 92vw);

    margin: 40px auto 0;

    justify-items: stretch;

    gap: 20px;

    align-items: stretch

}



.hero {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    min-height: 100svh

}



.video-container {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none

}



.hero-content {

    position: relative;

    z-index: 1

}



.hero {

    position: relative;

    isolation: isolate;

    overflow: hidden

}



.video-container,

.hero::after {

    z-index: 0 !important;

    pointer-events: none

}



.hero>#history {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    bottom: clamp(12px, 3vh, 32px);

    z-index: 2;

    width: min(1200px, 92vw);

    margin: 0 !important

}



.hero {

    padding-bottom: var(--history-space, 0)

}



.course-box1 {

    background: rgba(0, 0, 0, .15);

    backdrop-filter: saturate(120%) blur(2px)

}



.swiper-pagination-horizontal {

    bottom: -5px;

}



/* <!-- === END PAGE 5 ====  --> */



/* <!-- ===== PAGE 6 =====  --> */





.banner-music {



    position: relative;

    width: 100%;

    /* ارتفاع متناسب */

    display: flex;

    align-items: center;

    justify-content: center;

    background: url(../img/page-6/3.jpg) no-repeat;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    height: 100vh;

    animation: fadeInHero 2s forwards;

}



/* افکت سایه مشکی */

.banner-music::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    /* سایه‌ی نیمه‌شفاف */



}



.art-modal {

    display: none;

}



.art-modal-bg {

    display: none;

}



#music {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    margin: 25vh auto;

    z-index: 1;

    width: 100%;

}





/* فقط برای اسلایدر موسیقی؛ ظاهر کارت‌ها تغییر نمی‌کند */

.music-swiper {

    width: min(1200px, 90vw);

    margin-inline: auto;

    padding: 10px 0

}



.music-swiper .swiper-wrapper {

    align-items: stretch

}



.music-swiper .swiper-slide {

    display: flex;

    height: auto

}



.music-swiper .course-box1 {

    width: 100%;

    max-width: none

}



.music-swiper .swiper-button-prev,

.music-swiper .swiper-button-next {

    width: 42px;

    height: 42px;

    border-radius: 10px;

    background: #C9A227;

    color: #fff

}



.music-swiper .swiper-button-prev:after,

.music-swiper .swiper-button-next:after {

    font-size: 18px

}



.music-swiper .swiper-pagination-bullet {

    background: #fff;

    opacity: .5

}



.music-swiper .swiper-pagination-bullet-active {

    background: #C9A227;

    opacity: 1

}



/* فقط مودال صوت؛ ظاهر عمومی مودال‌ها دست‌نخورده */

.audio-modal .am-body-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    align-items: start;

    direction: rtl;

}



.audio-modal .am-cover {

    width: 100%;

    height: auto;

    aspect-ratio: 16/9;

    object-fit: cover;

    border-radius: 12px;

}



.audio-modal .am-col-left {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



/* موبایل: زیرهم */

@media (max-width: 720px) {

    .audio-modal .am-body-grid {

        grid-template-columns: 1fr;

    }

}



/* <!-- === END PAGE 6 ====  --> */



/* <!-- ===== PAGE 8 =====  --> */





.banner-library {



    position: relative;

    width: 100%;

    /* ارتفاع متناسب */

    display: flex;

    align-items: center;

    justify-content: center;

    background: url(../img/page-8/1.jpg) no-repeat;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    height: 100vh;

    animation: fadeInHero 2s forwards;

}



/* افکت سایه مشکی */

.banner-library::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    /* سایه‌ی نیمه‌شفاف */



}



#library {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    margin: 25vh auto;

    z-index: 1;

    width: 100%;

}



.course-box2 {

    width: 100%;

    max-width: 350px;

    border: 1px solid #e6e6e6;

    border-radius: 8px;

    transition: all ease 0.3s;

    padding: 10px;

}



.course-box2:hover {

    box-shadow: 2px 20px 30px rgba(0, 0, 0, 0.05);

    border: #C9A227 1px solid;

}



.course-img2 {

    width: 100%;

}



.course-img2 img {

    width: 100%;

    height: 290px;

    object-fit: cover;

    object-position: center;

    margin-bottom: 8px;

    border-radius: 8px;

}



.course-text2 {

    gap: 10px;

}



.course-text2 .category2 {

    color: #fff;

    font-size: 0.9rem;

    font-weight: 500;

    border-bottom: solid 1px #e0e0e0;

}



.course-text2 label {

    color: #fff;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.5s ease;

    padding-top: 12px;

}



.course-box2:hover .course-text2 label {

    color: #C9A227;

}



.course-text2 p {

    color: #fff;

    font-size: 0.9rem;

    margin: 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.lesson-time2 {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    margin-top: 10px;

}



.lesson-time2 span {

    font-size: 0.9rem;

    color: #fff;

    font-weight: 500;

}



.lesson-time2 span i {

    color: #db1032;

    margin-right: 5px;



}



.course-container2 {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr;

    grid-gap: 20px;

    margin-top: 30px;



    width: 70%;

}



/* Library modal layout (scoped) */

.lib-modal .lm-body-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    align-items: start;

    direction: rtl

}



.lib-modal .am-cover {

    width: 100%;

    height: auto;

    aspect-ratio: 16/9;

    object-fit: cover;

    border-radius: 12px

}



.lib-modal .lm-col-left {

    display: flex;

    flex-direction: column;

    gap: 10px

}



@media (max-width:720px) {

    .lib-modal .lm-body-grid {

        grid-template-columns: 1fr

    }

}



/* تصویر کامل و عمودی، سمت راست با RTL */

.modal .m-body {

    direction: rtl;

}

/* Fix: don't let .art-modal hide our lib modal when .show */

.lib-modal-bg.show { display:block !important; }

.lib-modal.show    { display:flex !important; } /* یا block؛ ما فلکسی طراحی کردیم */



/* تصویر ستون راست می‌ایستد */



.modal .m-body .cover {

    width: 100%;

    height: auto;

    /* ارتفاع آزاد */

    max-height: min(30vh, 520px);

    /* داخل قد مودال جا شود */

    object-fit: contain;

    /* بدون کراپ، کامل دیده شود */

    aspect-ratio: auto;

    /* لغو نسبت ثابت قبلی */

    background: #fff;

    /* حاشیه سفید برای تصاویر باریک */

    padding: 8px;

    border: 1px solid var(--line);

    border-radius: 12px;

}



@media (max-width:680px) {

    .modal .m-body .cover {

        max-height: 50vh;

        /* موبایل: کمی کوتاه‌تر */

        margin-inline: auto;

        /* وسط‌چین وقتی یک‌ستونه شد */

    }

}



/* ====== Library Modal: دو ستونه + نمایش کامل کاور عمودی ====== */

.lib-modal .lm-body-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    align-items: start;

    direction: rtl;

}



.lib-modal .am-cover {

    width: 100%;

    height: auto;

    max-height: min(30vh, 520px);

    object-fit: contain;

    aspect-ratio: auto;

    background: #fff;

    padding: 8px;

    border: 1px solid var(--line);

    border-radius: 12px;

}



.lib-modal .lm-col-left {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



@media (max-width:720px) {

    .lib-modal .lm-body-grid {

        grid-template-columns: 1fr;

    }



    .lib-modal .am-cover {

        max-height: 50vh;

        margin-inline: auto;

    }

}







/* فقط برای اسلایدر کتابخانه؛ ایزوله */

.library-swiper {

    width: min(1200px, 90vw);

    margin-inline: auto;

    padding: 10px 0

}



.library-swiper .swiper-wrapper {

    align-items: stretch

}



.library-swiper .swiper-slide {

    display: flex;

    height: auto

}



.library-swiper .course-box2 {

    width: 100%;

    max-width: none

}



/* دکمه‌ها مطابق تم */

.library-swiper .swiper-button-prev,

.library-swiper .swiper-button-next {

    width: 42px;

    height: 42px;

    border-radius: 10px;

    background: #C9A227;

    color: #fff

}



.library-swiper .swiper-button-prev:after,

.library-swiper .swiper-button-next:after {

    font-size: 18px;

    color: #fff

}



/* نقاط صفحه‌بندی */

.library-swiper .swiper-pagination-bullet {

    background: #fff;

    opacity: .5

}



.library-swiper .swiper-pagination-bullet-active {

    background: #C9A227;

    opacity: 1

}





:root {

    --hl-line: var(--line, #e6eaee);

    --hl-card: #fff;

    --hl-bg-dim: #0008;

    --hl-primary: var(--primary, #076b50);

    --hl-primary-dark: var(--primary-dark, #055943);

}



/* Modal */

.hl-modal-bg {

    position: fixed;

    inset: 0;

    background: var(--hl-bg-dim);

    opacity: 0;

    pointer-events: none;

    transition: .25s;

    z-index: 10040

}



.hl-modal-bg.show {

    opacity: 1;

    pointer-events: auto

}



.hl-modal {

    position: fixed;

    inset: auto 0 0 0;

    margin: auto;

    width: min(820px, 92vw);

    max-height: 88vh;

    transform: translateY(20px);

    opacity: 0;

    pointer-events: none;

    transition: .3s;

    background: var(--hl-card);

    border: 1px solid var(--hl-line);

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 50px 140px rgba(0, 0, 0, .5);

    z-index: 10050;

    direction: rtl;

    display: flex;

    flex-direction: column

}



.hl-modal.show {

    transform: none;

    opacity: 1;

    pointer-events: auto

}



.hl-head {

    position: sticky;

    top: 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    padding: 12px 14px;

    background: var(--hl-card);

    border-bottom: 1px solid var(--hl-line);

    width: 100%;

}



.hl-close {

    border: 0;

    background: #db1032;

    color: #fff;

    width: 42px;

    height: 42px;

    border-radius: 10px;

    display: grid;

    place-items: center;

    cursor: pointer;

    line-height: 0;

    padding: 0

}



.hl-body {

    display: grid;

    grid-template-columns: 240px 1fr;

    gap: 14px;

    padding: 14px;

    overflow: auto;

    flex: 1 1 auto

}



@media (max-width:680px) {

    .hl-body {

        grid-template-columns: 1fr

    }

}



.hl-cover {

    width: 100%;

    height: 280px;

    object-fit: contain;

    background: #fff;

    padding: 8px;

    border: 1px solid var(--hl-line);

    border-radius: 12px

}



.hl-col-left {

    display: flex;

    flex-direction: column;

    gap: 10px

}



.hl-meta {

    display: flex;

    gap: 8px;

    flex-wrap: wrap

}



.hl-chip {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: .25rem .55rem;

    border: 1px solid var(--hl-line);

    border-radius: 999px;

    font-size: .9rem;

    background: #f7faf8;

    color: #27423a

}



.hl-text {

    color: #222;

    line-height: 1.9

}



.hl-row {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 6px

}



.hl-btn {

    background: #fff;

    color: var(--hl-primary-dark);

    border: 1px solid #90dac0;

    border-radius: 12px;

    padding: .6rem .9rem;

    cursor: pointer;

    font-weight: 900;

    display: inline-flex;

    gap: 8px;

    align-items: center;

    transition: .25s;

    text-decoration: none

}



.hl-btn:hover {

    box-shadow: 0 0 0 5px #90dac038;

    transform: translateY(-1px)

}



.hl-btn-dl {

    background: var(--hl-primary);

    color: #fff;

    border-color: var(--hl-primary-dark)

}



html.hl-lock,

body.hl-lock {

    overflow: hidden

}



/* <!-- === END PAGE 8 ====  --> */



/* <!-- ===== PAGE  =====  --> */



.AboutUs {



    width: 90%;

    display: flex;

    align-items: center;

    gap: 0;

    justify-content: center;



    @media (max-width: 1259px) {

        flex-direction: column;

        gap: 20px;

        padding: 0 2%;

        margin: 0 auto;

    }

}



.imgBx-3 {

    position: relative;

    max-width: 100%;

    max-height: 250px;

    width: 250px;

    height: auto;

    object-fit: contain;

    cursor: pointer;



    @media (max-width: 768px) {

        width: 300px;

        height: auto;

        padding-bottom: 20px;

    }

}



.imgBx-3 img {

    display: block;

    max-width: 100%;

    border-radius: 18px;

}



.text-aboutUs {

    position: relative;

    padding: 0 15%;

    width: 100%;

    top: 4em;

    display: flex;

    align-items: center;



}



.text-aboutUs h1 {

    font-size: 2.5em;

}



.box-AboutUs {

    width: 90%;

    max-width: 750px;

    height: auto;

    margin: 50px auto;

    background: #fff;

    color: #222;

    min-height: 200px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* Soft shadow */

    padding: 20px;

    border-radius: 26px;



    @media (max-width: 768px) {

        padding: 10px;

        width: 100%;

    }

}



.box-AboutUs ul {

    margin: 0;

    padding: 0 10px 0;

    display: flex;

    background: #fff;

    justify-content: center;

    gap: 10px;

}



.box-AboutUs ul li {

    flex: 1 1 250px;

    margin: 0;

    padding: 5px;

    width: 35%;

    box-sizing: border-box;

    text-align: center;

    list-style: none;

    cursor: pointer;

    background: #f5f5f5;

    border-radius: 18px;

}



.box-AboutUs ul li:hover {

    background: #e0e0e0;

    /* تغییر رنگ زمینه در حالت هاور */

}



.box-AboutUs ul li .fa-solid {

    color: #262626;

    font-size: 36px;

    padding: 5px;



    @media (max-width: 373px) {

        padding: 8px;

    }

}



.box-AboutUs ul li h4 {

    margin: 0;

    padding: 10px 0;

    color: #222;

    font-size: 18px;



    @media (max-width: 768px) {

        font-size: 14px;



    }



    @media (max-width: 373px) {

        display: none;

    }

}



.box-AboutUs ul li.active .fa-solid,

.box-AboutUs ul li.active h4 {

    color: #fff;



}



.box-AboutUs ul li.active {

    color: #ff7b00;

    background: linear-gradient(106.32deg, #3B6E4D 14.23%, rgba(225, 25, 25, 0) 139.97%);

}



.panel {

    display: none;

}



.panel.active {

    display: block;

}



.content {

    padding: 20px;

}



.content1 p {

    margin: 0;

    padding: 10px 0;

    text-align: justify;

    color: #222;

}



/* <!-- === END PAGE  ====  --> */



/* <!-- === END PAGE 7 ====  --> */



/* <!-- ===== PAGE 8 =====  --> */



.Services-section {

    width: 100%;

    padding: 3% 15%;

    display: flex;

    align-items: center;

    gap: 5%;

    justify-content: center;



    @media (max-width: 1259px) {

        flex-direction: column;

        gap: 10px;

        padding: 10% 5%;

    }

}



.imgBx-2 {

    position: relative;

    max-width: 100%;

    max-height: 400px;

    width: 400px;

    height: auto;

    object-fit: contain;

    cursor: pointer;



    @media (max-width: 768px) {

        width: 300px;

        height: auto;

        padding-bottom: 100px;

    }

}



.imgBx-2 img {

    display: block;

    max-width: 100%;

}



.Services-left {

    position: relative;

    max-width: 100%;

    z-index: 10;

    flex: 1;

}



.Services-title h1 {

    font-size: 2em;

    color: #333;

    transition: .5s;



    @media (max-width: 768px) {

        font-size: 26px;

    }

}



.Services-title p {

    text-align: justify;

    color: #666;

    margin: 20px 0;

    transition: 0.5s;

    font-size: 1.3em;



    @media (max-width: 768px) {

        margin: 12px 0;

        font-size: 20px;

    }

}



.Services-full-box {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    justify-content: center;



    /* Center items horizontally */

    @media (max-width: 424px) {

        display: block;

    }

}



.Services-box {

    width: 280px;

    padding: 20px;

    border-radius: 25px;

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);

    background-color: #ffffff;

    text-align: center;

    transition: all 0.3s ease;

    flex: 1 0 auto;

    margin-bottom: 14px;



    /* Gap between rows */

    @media (max-width: 768px) {

        width: calc(36.33% - 14px);

        /* Three columns on tablets */



    }



    @media (max-width: 424px) {

        width: 100%;

    }

}



.Services-box:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

}



.Services-box>div {

    display: flex;

    color: #2c2c2c;

}



.Services-box h3 {

    font-size: 1.5em;

    color: #333;

    font-weight: 700;

    margin-bottom: 10px;



    @media (max-width: 768px) {

        font-size: 24px;

    }

}



.Services-box p {

    line-height: 1.6;

    text-align: justify;

    color: #666;

    margin: 10px 0;

    font-size: 25px;



    @media (max-width: 768px) {

        margin: 12px 0;

        font-size: 20px;

    }

}



/* === فقط بهبود ریسپانسیو و نمایش عکس‌ها (بدون تغییر بقیه استایل‌ها) === */



/* ظرف‌های تصویر: اجازه‌ی ارتفاع آزاد و وسط‌چین */

.imgBx-2,

.imgBx-3 {

    height: auto !important;

    max-height: none !important;

    margin-inline: auto;

    /* وسط‌چین ظرف */

}



/* خود تصویر: همیشه تمام عرض ظرف، بدون کشیدگی */

.imgBx-2 img,

.imgBx-3 img {

    display: block;

    width: 100%;

    height: auto;

    /* نسبت واقعی حفظ شود */

    border-radius: 18px;

    /* مطابق استایل فعلی */

}



/* اندازه‌ی منطقی ظرف‌ها در اندازه‌های مختلف (بدون تغییر کلی چیدمان) */

@media (min-width: 1260px) {

    .imgBx-2 {

        width: 400px;

    }



    .imgBx-3 {

        width: 370px;

    }

}



@media (max-width: 1259px) {

    .imgBx-2 {

        width: min(420px, 92vw);

    }



    .imgBx-3 {

        width: 70%;

    }

}



@media (max-width: 768px) {

    .imgBx-2 {

        width: 100%;

    }



    .imgBx-3 {

        width: 100%

    }

}



/* <!-- === END PAGE 8 ====  --> */





/* <!-- ===== PAGE 9 =====  --> */



.store-features {



    display: flex;

    justify-content: center;

    align-items: center;

    gap: 40px;

    flex-wrap: wrap;

    padding-bottom: 20px;



    @media (max-width: 1259px) {

        flex-direction: column;

        gap: 20px;

        padding: 0 2%;

    }

}



.feature {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    max-width: 220px;

    padding: 10px 20px;

    transition: transform 0.4s ease, box-shadow 0.4s ease;

    opacity: 0;

    transform: translateY(40px);

}



.feature.visible {

    opacity: 1;

    transform: translateY(0);

}



.feature i {

    font-size: 32px;

    color: #333;

    margin-bottom: 16px;

    transition: transform 0.4s ease;

}



.feature:hover i {

    transform: scale(1.2) rotate(-5deg);

    color: #444;

}



.feature-text h3 {

    font-size: 16px;

    font-weight: 700;

    margin-bottom: 6px;

    color: #222;

}



.feature-text p {

    font-size: 14px;

    color: #666;

    margin: 0;

    line-height: 1.6;

}



.feature-divider {

    display: none;

    width: 1px;

    height: 60px;

    background-color: #eee;

}



@media (min-width: 768px) {

    .store-features {

        flex-wrap: nowrap;

    }



    .feature-divider {

        display: block;

    }

}



.store-features .feature {

    opacity: 1 !important;

    transform: none !important;

}



/* ===== فقط ریسپانسیو و چیدمان (بدون تغییر استایل کارت‌ها) ===== */



/* ظرف جمع‌وجور و مرکزچین */

.store-features {

    width: min(1100px, 94vw);

    margin-inline: auto;

}



/* دسکتاپ: سه‌ستونه‌ی تمیز */

@media (min-width:1100px) {

    .store-features {

        display: grid !important;

        grid-template-columns: repeat(3, minmax(220px, 1fr));

        gap: 32px 36px;

        align-items: start;

    }



    .feature-divider {

        display: none !important;

    }

}



/* تبلت: الگوی ۲ تا بالا + ۱ دونه وسطی */

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

    .store-features {

        display: grid !important;

        grid-template-columns: repeat(2, minmax(220px, 1fr));

        gap: 28px 28px;

        justify-items: center;

    }



    .feature-divider {

        display: none !important;

    }



    /* کارت سوم را وسطِ ردیف دوم بیاور */

    .store-features>.feature:last-child {

        grid-column: 1 / -1;

        /* کشیدن روی هر دو ستون */

        justify-self: center;

        /* وسط‌چین */

        max-width: 320px;

        /* عرض معقول */

    }

}



/* موبایل: تک‌ستونه، خوانا و متعادل */

@media (max-width:767px) {

    .store-features {

        display: grid !important;

        grid-template-columns: 1fr;

        gap: 20px;

        padding: 0 4% 20px;

    }



    .feature-divider {

        display: none !important;

    }



    .feature {

        max-width: 360px;

        width: 100%;

        margin-inline: auto;

    }

}



/* احترام به کاهش حرکت سیستم؛ فقط برای تجربه بهتر */

@media (prefers-reduced-motion: reduce) {

    .feature {

        transition: none !important;

        transform: none !important;

        opacity: 1 !important;

    }

}



/* <!-- === END PAGE 9 ====  --> */













/* ================================ */

/* ================================ */

/* ================================ */

/* ================================ */

/* ================================ */

/* ================================ */





/* ================================ */

/* ================================ */

/* ================================ */

/* ================================ */

/* ================================ */