/* 1. تعریف فونت وزیرمتن برای استفاده در سایت */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body { font-family: 'Vazirmatn', Arial, sans-serif; direction: rtl; }
h1, h2, h3, h4, h5, h6 { font-family: 'Vazirmatn', Arial, sans-serif; unicode-bidi: isolate; }

/* =================================== */
/* === New Homepage Styles Start === */
/* =================================== */
.hero-overlay-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.5); padding: 2rem; border-radius: 1rem; width: 80%; max-width: 800px; }
@media (max-width: 768px) { .hero-overlay-content h1 { font-size: 1.8rem; } .hero-overlay-content .lead { font-size: 1rem; } .hero-overlay-content .btn { font-size: 0.9rem; padding: 0.5rem 1rem; } }
.feature-icon { width: 4rem; height: 4rem; border-radius: 50%; }
.feature-icon i { font-size: 2rem; }
.category-icon-box { background-color: #fff; border: 1px solid #e9ecef; border-radius: 1rem; padding: 1.5rem; text-align: center; transition: all 0.3s ease-in-out; }
.category-icon-link { text-decoration: none; color: inherit; }
.category-icon-box:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); border-color: var(--bs-primary); }
.product-card { border: 1px solid #e9ecef; border-radius: 1rem; transition: all 0.3s ease; overflow: hidden; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.product-card .card-img-top { aspect-ratio: 4 / 3; object-fit: contain; padding: 1rem; }
.product-card .card-title { font-size: 1rem; font-weight: 500; }
.product-card .card-title a { transition: color 0.2s ease; }
.product-card .card-title a:hover { color: var(--bs-primary); }
.product-card .stretched-link::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; }
.testimonial-card { background-color: #fff; padding: 2rem; border-radius: 1rem; border: 1px solid #e9ecef; height: 100%; }
.testimonial-text { font-style: italic; color: #555; position: relative; padding-right: 25px; }
.testimonial-text::before { content: '“'; position: absolute; right: 0; top: -10px; font-size: 3rem; color: var(--bs-primary); opacity: 0.2; }
.testimonial-author { margin-top: 1rem; font-weight: 600; color: #333; }
.article-card { border-radius: 1rem; transition: all 0.3s ease; }
.article-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.article-card .card-img-top { border-top-left-radius: 1rem; border-top-right-radius: 1rem; aspect-ratio: 16 / 9; object-fit: cover; }
/* =================================== */
/* === New Homepage Styles End === */
/* =================================== */

.category-pill { padding: 8px 15px !important; border: 1px solid #dee2e6; border-radius: 25px; color: #495057; transition: all 0.3s ease; background-color: #fff; margin: 0; }
.category-pill:hover { background-color: #f8f9fa; color: var(--bs-primary) !important; border-color: #adb5bd; }
.category-pill.active { background-color: var(--bs-primary) !important; color: white !important; border-color: var(--bs-primary) !important; }
p.text-muted a { color: #0056b3; font-weight: 500; }
#contact-footer .text-danger { color: #ff8a8a !important; }

/* ================================================================== */
/* ===      حل مشکل بیرون‌زدگی منو بدون به هم ریختن سایت            === */
/* ================================================================== */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu { display: block; }
    
    /* منوهای اصلی */
    .navbar .dropdown-menu {
        margin-top: 0 !important;
    }

    /* منوهای زیرمجموعه */
    .navbar .dropdown-submenu { position: relative; }
    .navbar .dropdown-submenu:hover > .dropdown-menu {
        display: block;
        top: 0;
        right: 100%;
        left: auto;
    }
    
    /* ترفند نهایی: اگر منو از صفحه بیرون زد، آن را به داخل برگردان */
    .dropdown-menu {
        right: 0 !important;
        left: auto !important;
    }
}