/********** Template CSS *********
/* فقط فونت Vazirmatn - بدون دست زدن به direction یا text-align */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'),
         url('../fonts/Vazirmatn-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'),
         url('../fonts/Vazirmatn-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* اگر وزن‌های دیگه داری (مثل Medium یا Light)، اضافه کن */

/* اعمال فونت فقط روی body و تیترها - بدون تغییر جهت */
body {
    font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-4, .display-6,
.display-5, .display-6,
.text-primary, .navbar-brand, .nav-link,
p, span, div, a, li, button {
    font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif !important;
    /* font-weight: 400; */ /* اگر می‌خوای همه جا معمولی باشه، فعال کن */
}

/* تیترها bold بشن (اختیاری) */
h1, h2, h3, h4, h5, h6,
.display-1, .display-4, .display-6 {
    font-weight: 700 !important;
}
:root {
    --primary: #EAA636;
    --secondary: #545454;
    --light: #FDF5EB;
    --dark: #1E1916;
}
h4,
h5,
h6,
.h4,
.h5,
.h6 {
    font-weight: 600 !important;
}

.py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .navbar-nav .nav-link {
    padding: 35px 15px;
    color: var(--light);
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar.fixed-top {
    transition: .5s;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav {
        margin-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, .3);
        background: var(--dark);
    }

    .navbar .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.header-carousel .owl-carousel-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, .5);
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 600px;
    }

    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-carousel .owl-carousel-item p {
        font-size: 16px !important;
    }
}

.header-carousel .owl-nav {
    position: relative;
    width: 80px;
    height: 80px;
    margin: -40px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-carousel .owl-nav::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #FFFFFF;
    transform: rotate(45deg);
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    position: relative;
    font-size: 40px;
    color: var(--primary);
    transition: .5s;
    z-index: 1;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    color: var(--dark);
}

.page-header {
    margin-bottom: 6rem;
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}


/*** Facts ***/
.fact-item {
    transition: .5s;
}

.fact-item:hover {
    margin-top: -10px;
    background: #FFFFFF !important;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
}


/*** About ***/
.img-twice::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 80%;
    top: 10%;
    left: 20%;
    background: var(--primary);
    border: 25px solid var(--light);
    border-radius: 6px;
    z-index: -1;
}


/*** Product ***/
.product-item {
    transition: .5s;
}

.product-item:hover {
    background: var(--primary) !important;
}

.product-item:hover * {
    color: var(--light);
}

.product-item:hover .border-primary {
    border-color: var(--light) !important;
}

.product-item .product-overlay {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}

.product-item:hover .product-overlay {
    height: 100%;
    opacity: 1;
}


/*** Team ***/
.team-item .team-text {
    position: relative;
    height: 100px;
    overflow: hidden;
}

.team-item .team-title {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--light);
    transition: .5s;
}

.team-item:hover .team-title {
    top: -100px;
}

.team-item .team-social {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    transition: .5s;
}

.team-item .team-social .btn {
    margin: 0 3px;
}

.team-item:hover .team-social {
    top: 0;
}


/*** Testimonial ***/
.testimonial-carousel .owl-item .testimonial-item img {
    width: 60px;
    height: 60px;
}

.testimonial-carousel .owl-item .testimonial-item,
.testimonial-carousel .owl-item .testimonial-item * {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-item {
    background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-item * {
    color: #FFFFFF !important;
}

.testimonial-carousel .owl-nav {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    margin: 0 12px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-size: 22px;
    color: var(--light);
    background: var(--primary);
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    color: var(--primary);
    background: var(--dark);
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--light);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--light);
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.copyright {
    background: #111111;
}

.copyright a {
    color: var(--primary);
}

.copyright a:hover {
    color: var(--light);
}
/* حداقل کد برای راست‌چین شدن متن + درست شدن نقطه‌ها */
p, li, .card-body p, .product-item span, .fact-item p, .testimonial-item p {
    direction: rtl;
    text-align: right;
}
/* Carousel پایه - برای دسکتاپ و موبایل */
.owl-carousel-item {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* تصویر دسکتاپ */
.owl-carousel-item img.img-fluid {
    width: 100%;
    height: auto;
    display: block;
}

/* ویدیو موبایل */
.owl-carousel-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* یا contain اگر نمی‌خوای برش بخوره */
}

/* overlay متن */
.owl-carousel-inner {
    position: absolute;
    inset: 0;                    /* top:0 right:0 bottom:0 left:0 */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* چون justify-content-start داری */
    z-index: 2;
    padding: 0 15px;             /* کمی فاصله از لبه‌ها */
}

/* ارتفاع پایه برای آیتم‌ها */
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item,
.owl-carousel-item {
    height: 100%;
}

/* موبایل - ارتفاع و موقعیت دقیق */
@media (max-width: 767px) {
    .owl-carousel-item {
        height: 70vh;                /* ارتفاع مناسب موبایل - می‌تونی 60vh یا 80vh تست کنی */
        min-height: 480px;           /* حداقل ارتفاع برای جلوگیری از کوچک شدن */
    }

    .owl-carousel-item video {
        position: absolute;
        inset: 0;
        object-fit: cover;
    }

    .owl-carousel-inner {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.45); /* optional: تاریک کردن پس‌زمینه برای خوانایی متن */
        color: white;                 /* مطمئن شو متن روشن بمونه */
        text-align: right;            /* راست‌چین کردن متن‌ها */
    }

    .owl-carousel-inner .container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .owl-carousel-inner h1,
    .owl-carousel-inner p,
    .owl-carousel-inner .btn {
        text-align: center;            /* همه متن‌ها راست‌چین */
    }
}
@media (max-width: 991px) {  /* تبلت و موبایل – یا 767px برای فقط موبایل */
    .container-xxl.py-6 .col-lg-6 h1.display-6,
    .container-xxl.py-6 .col-lg-6 p,
    .container-xxl.py-6 .col-lg-6 .row.g-2 div {
        text-align: right !important;
    }

    /* اگر می‌خوای دکمه هم وسط بشه در موبایل */
    .container-xxl.py-6 .btn {
        display: block;
        margin: 0 auto;                /* وسط‌چین دکمه */
        text-align: center;
    }
}
/* دسکتاپ - ارتفاع بیشتر */
@media (min-width: 768px) {
    .owl-carousel-item {
        height: 80vh;                /* ارتفاع دسکتاپ */
        min-height: 600px;
    }

    .owl-carousel-item img {
        height: 100%;
        object-fit: cover;
    }

    .owl-carousel-inner {
        background: rgba(0,0,0,0.35); /* optional */
    }
}
/* حذف فاصله‌های Owl Carousel در موبایل */
@media (max-width: 767px) {
    .owl-carousel,
    .owl-stage-outer,
    .owl-stage,
    .owl-item,
    .owl-item .owl-carousel-item {
        margin-bottom: 1 !important;
        padding-bottom: 1 !important;
    }

    /* بخش اول بعد از کاروسل (facts) رو نزدیک‌تر بیار */
    .container-xxl.py-6 {  /* همه py-6ها رو هدف بگیر */
        padding-top: 1rem !important;     /* از 6rem به 2rem کاهش – حدود ۳۰-۳۵ پیکسل */
        margin-top: -2rem !important;     /* overlap بده تا فاصله تقریباً حذف بشه */
    }

    /* اگر بخش آمار id یا کلاس خاص داره (مثلاً .facts) این رو اضافه کن */
    .facts, .fact-item-section, .py-6:first-child + .py-6 {  
        margin-top: -3rem !important;     /* تنظیم بیشتر اگر لازم بود */
    }

    /* جلوگیری از فاصله اضافی container */
    .container-xxl {
        padding-top: 1 !important;        /* اگر container فاصله اضافه می‌کنه */
    }
}

/* اگر هنوز فاصله بود، این رو هم تست کن (به عنوان آخرین راه) */
@media (max-width: 767px) {
    body > main > .container-xxl:first-of-type + .container-xxl {
        margin-top: -1rem !important;
    }
}
@media (max-width: 575px) {  /* موبایل کوچک */
    .fact-item {
        padding: 15px !important;            /* کوچیک‌تر کردن پدینگ */
        font-size: 0.85rem !important;       /* متن کوچیک‌تر */
    }

    .fact-item i {
        font-size: 2.5rem !important;        /* آیکون کوچیک‌تر */
    }

    .fact-item h1.display-5 {
        font-size: 2rem !important;          /* عدد بزرگ کوچیک‌تر */
    }

    .fact-item p {
        font-size: 0.8rem !important;        /* متن زیر کوچیک‌تر */
    }

    .row.g-4 .col-lg-3.col-md-6 {
        flex: 0 0 50%;                       /* ۲ ستونه (برای فضای کمتر) یا 25% برای ۴ ستونه */
        max-width: 50%;                      /* اگر می‌خوای ۴ ستونه: flex: 0 0 25%; max-width: 25%; */
    }
}
@media (max-width: 767px) {
    .bg-primary .row.g-4 {
        flex-direction: column-reverse !important;  /* تماس اول، عنوان دوم – اگر لازم */
        padding: 10px;                              /* پدینگ کمتر */
    }

    .bg-primary .col-lg-6 {
        text-align: center !important;              /* وسط برای موبایل */
        max-width: 100% !important;                 /* عرض کامل */
        margin-bottom: 15px !important;             /* فاصله بین بخش‌ها */
    }

    .bg-primary h1.display-4 {
        font-size: 0.8rem !important;               /* عنوان کوچیک‌تر */
    }

    .bg-primary .fs-1 {
        font-size: 0.5rem !important;               /* شماره کوچیک‌تر */
    }

    .bg-primary .d-inline-flex {
        justify-content: center !important;         /* تماس وسط */
    }
}
/* راست‌چین اجباری فقط در موبایل - برای بخش خدمات/مزایا */
@media (max-width: 767px) {
    /* بخش خدمات اصلی */
    .container-xxl.py-6 .col-lg-6 h1.display-6,
    .container-xxl.py-6 .col-lg-6 > p,
    .container-xxl.py-6 .row.gy-5 .col-sm-6,
    .container-xxl.py-6 .row.gy-5 .col-sm-6 h5,
    .container-xxl.py-6 .row.gy-5 .col-sm-6 span {
        text-align: right !important;
        direction: rtl !important;          /* فعال کردن رفتار BiDi فارسی */
        unicode-bidi: plaintext !important; /* هر بلاک جداگانه راست‌چین بشه */
    }

    .container-xxl.py-6 .d-flex.align-items-center {
        flex-direction: row-reverse !important; /* آیکون راست، متن چپ */
        justify-content: flex-end !important;
    }

    /* فوتر - آدرس دفتر و لینک‌ها */
    .footer .text-light.mb-4,
    .footer h4.text-light.mb-4,
    .footer .btn.btn-link,
    .footer p.mb-2,
    .footer .d-flex.pt-2 {
        text-align: right !important;
        direction: rtl !important;
    }

    /* لیست لینک‌ها در فوتر راست‌چین */
    .footer .btn.btn-link {
        text-align: right !important;
        padding-right: 0 !important;
        padding-left: 15px !important; /* فاصله مناسب */
    }
}
/* راست‌چین کامل منو همبرگری + دکمه toggler در موبایل */
@media (max-width: 991.98px) {  /* دقیقاً جایی که collapse فعال می‌شه */
    /* دکمه سه‌خط رو به راست ببر */
    .navbar-toggler {
        margin-right: 1rem !important;      /* فاصله از راست */
        margin-left: auto !important;       /* به راست فشار بده */
    }

    /* منوی بازشده */
    .navbar-collapse {
        text-align: right !important;
        direction: rtl !important;
        background: var(--dark);            /* اگر می‌خوای پس‌زمینه تیره بمونه */
        padding: 1rem !important;
    }

    /* لیست آیتم‌ها */
    .navbar-nav {
        align-items: flex-end !important;   /* همه آیتم‌ها به راست */
        text-align: right !important;
    }

    .navbar-nav .nav-item,
    .navbar-nav .nav-link {
        text-align: right !important;
        width: 100%;                        /* عرض کامل برای راست‌چین بهتر */
        padding: 0.75rem 1rem !important;   /* فاصله مناسب از راست */
    }

    /* اگر dropdown داری */
    .navbar-nav .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        text-align: right !important;
    }

    /* optional: آیکون caret یا arrow رو هم راست بچین */
    .navbar-nav .dropdown-toggle::after {
        margin-left: 0 !important;
        margin-right: 0.5rem !important;
    }
}
#cart-count {
    position: absolute;
    top: 18px; /* پایین تر از قبل */
    right: -5px;
    background: red;
    color: white;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%;
    transition: all 0.3s;
}

#cart-count.animate {
    transform: scale(1.5);
}

.cart-msg {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #0d6efd;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    font-weight: bold;
    z-index: 9999;
}
<style>
body { font-family: 'Vazir', sans-serif; background: #f9f9f9; }

/* سبد خرید */
#cart-icon { position: relative; font-size: 1.5rem; cursor: pointer; }
#cart-count {
    position: absolute;
    top: 55%; right: 55%;
    background: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.8rem;
    font-weight: bold;
    transition: all 0.3s ease;
}
.added { transform: scale(1.5); background: #ff6b6b !important; }

/* پیام پایین صفحه */
.cart-msg {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #0d6efd;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    animation: fadeInOut 2s forwards;
}
@keyframes fadeInOut {
    0% {opacity:0; transform: translateX(-50%) translateY(20px);}
    10% {opacity:1; transform: translateX(-50%) translateY(0);}
    90% {opacity:1; transform: translateX(-50%) translateY(0);}
    100% {opacity:0; transform: translateX(-50%) translateY(-20px);}
}

/* محصولات */
.product-item img { max-height: 180px; object-fit: cover; }

/* منوی پایین موبایل */
.mobile-nav {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: #ffffff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: flex; justify-content: space-around; padding: 5px 0; z-index: 999;
}
.mobile-nav a {
    text-decoration: none; color: #333; font-size: 0.9rem;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mobile-nav a:hover { color: #007bff; }
.mobile-nav i { font-size: 1.5rem; }
@media(min-width:768px){ .mobile-nav{ display:none; } }