/* -------------------- Header Section -------------------- */
.main-header {
    background-color: #222;
    /* رنگ پس‌زمینه هدر */
    color: #fff;
    padding-top: 3px;
    padding-bottom: 2px;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-img {
    margin-top: 4px;
    height: 40px;
    /* ارتفاع لوگو */
    /* اگر لوگو متن است، می‌توانید استایل‌های متنی به .logo بدهید */
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-right: 30px;
    /* فاصله بین آیتم‌های منو */
}

.nav-links li:last-child {
    margin-left: 0;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
    padding: 5px 0;
    position: relative;
}

.nav-links a:hover {
    color: #033f61;
    /* رنگ هاور منو */
}

/* خط زیر منوها هنگام هاور */
.nav-links a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #033f61;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}



/* -------------------- Footer Section -------------------- */
.main-footer {
    background-color: #222;
    /* رنگ پس‌زمینه فوتر */
    color: #fff;
    padding-top: 50px;
    /* فاصله از بالای فوتر */
    font-size: 0.9em;
}

.main-footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.main-footer a:hover {
    color: #033f61;
    /* رنگ هاور لینک‌ها */
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    /* برای اینکه ستون‌ها در موبایل زیر هم قرار بگیرند */
    justify-content: space-between;
    /* توزیع فضا بین ستون‌ها */
    margin-bottom: 40px;
}

.footer-col {
    flex: 1;
    /* هر ستون به طور مساوی فضا اشغال کند */
    min-width: 280px;
    /* حداقل عرض برای هر ستون قبل از شکستن خط */
    margin-bottom: 30px;
    /* فاصله بین ستون‌ها در حالت ریسپانسیو */
    padding: 0 15px;
    /* کمی padding برای داخل ستون */
}

.footer-col h3 {
    font-size: 1.4em;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 3px;
    background-color: #033f61;
    /* خط زیر عنوان فوتر */
}

/* Footer About Section */
.footer-about .logo-img-footer {
    height: 45px;
    /* اندازه لوگو در فوتر */
    margin-bottom: 15px;
}

.footer-about p {
    margin-bottom: 20px;
    line-height: 1.7;
}

.social-icons a {
    font-size: 1.5em;
    margin-left: 15px;
    /* فاصله بین آیکون‌ها */
    color: #bbb;
    /* رنگ آیکون‌ها */
}

.social-icons a:hover {
    color: #033f61;
    transform: scale(1.1);
    /* کمی بزرگ شدن هنگام هاور */
}

/* Footer Links Section */
.footer-links ul {
    list-style: none;
}

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

.footer-links ul li:last-child {
    margin-bottom: 0;
}

/* Footer Contact Section */
.footer-contact p {
    margin-bottom: 10px;
    display: flex;
    /* برای تراز کردن آیکون و متن */
    align-items: flex-start;
}

.footer-contact p i {
    margin-left: 10px;
    /* فاصله بین آیکون و متن */
    font-size: 1.1em;
    color: #033f61;
    /* رنگ آیکون‌های تماس */
    margin-top: 4px;
    /* تنظیم عمودی آیکون */
}

.footer-bottom {
    border-top: 1px solid #444;
    /* خط جداکننده بین ستون‌ها و کپی‌رایت */
    padding: 20px 0;
    text-align: center;
    color: #aaa;
    /* رنگ متن کپی‌رایت */
    font-size: 0.85em;
}




/* -------------------- Hero Section -------------------- */
.hero-section {
    background-image: url('../assets/hero.png');
    /* تصویر پس‌زمینه از طرح شما */
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 150px 0;
    display: flex;
    justify-content: flex-start;
    /* آیتم‌ها را به انتهای محور اصلی (راست در RTL) منتقل می‌کند */
    min-height: 450px;
    /* حداقل ارتفاع بخش هیرو */
    position: relative;
    align-items: flex-start;
    /* محتوا را به پایین کانتینر تراز می‌کند */
    padding-bottom: 80px;
    /* اضافه کردن padding از پایین برای فاصله از لبه */
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* لایه تاریک روی تصویر */
}

.hero-content {
    position: relative;
    /* برای قرار گرفتن بالای لایه تاریک */
    z-index: 1;
    max-width: 800px;
    text-align: right;
    /* متن داخل hero-content را به راست تراز می‌کند */
    padding-right: 20px;
    /* کمی فاصله از سمت راست صفحه */
}

.hero-content h1 {
    margin-right: 150px;
    font-size: 4em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    /* سایه متن برای وضوح بیشتر */
}

.hero-content p {
    margin-right: 150px;
    font-size: 1.8em;
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}




/* -------------------- Responsive Design (واکنش‌گرا) -------------------- */

@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 3em;
        margin-right: 0px;

    }

    .hero-content p {
        font-size: 1.5em;
        margin-right: 0px;
    }

    .section-title,
    .section-title-left {
        font-size: 2em;
    }

    .content-two-columns {
        gap: 30px;
    }

    .footer-col {
        min-width: 250px;
        /* کمی کوچکتر شدن ستون‌ها */
    }



    .hero-section {
        padding: 100px 0;
        min-height: 400px;
        justify-content: center;
        /* در موبایل دوباره متن را وسط‌چین کند */
        align-items: center;
        /* در موبایل دوباره متن را عمودی وسط‌چین کند */
        padding-bottom: 100px;
        /* به مقدار اولیه بازگردد یا مقدار دلخواه */
    }

    .hero-content {
        text-align: center;
        /* در موبایل متن را وسط‌چین کند */
        padding-right: 0;
        /* padding را حذف کند */
    }



    /* Footer Responsive */
    .footer-columns {
        flex-direction: column;
        /* ستون‌های فوتر زیر هم قرار بگیرند */
        align-items: center;
        /* آیتم‌ها وسط‌چین شوند */
    }

    .footer-col {
        min-width: auto;
        /* حذف محدودیت عرض */
        width: 100%;
        /* هر ستون تمام عرض را بگیرد */
        text-align: center;
        padding: 0;
        /* حذف padding داخلی ستون */
    }

    .footer-col h3::after {
        right: 50%;
        /* خط زیر عنوان فوتر وسط‌چین شود */
        transform: translateX(50%);
    }

    .footer-contact p {
        justify-content: center;
        /* آیکون و متن تماس وسط‌چین شوند */
    }

    .social-icons {
        text-align: center;
        /* آیکون‌های اجتماعی وسط‌چین شوند */
    }

    .social-icons a {
        margin: 0 10px;
        /* فاصله بین آیکون‌ها در موبایل */
    }
    }

    @media (max-width: 480px) {
        .hero-content h1 {
            font-size: 2em;
        }

        .hero-content p {
            font-size: 1em;
        }

        .section-title,
        .section-title-left {
            font-size: 1.5em;
        }
    }




/* -------------------- Header & Navigation Styles (for Hamburger Menu) -------------------- */



/* دکمه همبرگر (به طور پیش‌فرض در دسکتاپ پنهان است) */
.menu-toggle {
    display: none;
    /* در دسکتاپ پنهان باشد */
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8em;
    /* اندازه آیکون همبرگر */
    cursor: pointer;
    padding: 5px 10px;
    z-index: 1001;
    /* اطمینان از قرار گرفتن بالای منو */
}

/* متن برای دسترسی‌پذیری که در صفحه نمایش خوانده نمی‌شود */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}


/* -------------------- Media Query for Mobile (max-width: 768px) -------------------- */
@media (max-width: 768px) {
    .main-nav {
        flex-direction: row-reverse;
        /* لوگو راست، همبرگر چپ */
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .logo {
        margin-right: auto;
        margin-left: auto;
    }

    .logo-img {
        height: 40px;
    }

    /* دکمه همبرگر در موبایل نمایش داده شود */
    .menu-toggle {
        display: block;
        /* نمایش دکمه همبرگر */
    }

    /* منوی ناوبری (nav-links) در موبایل (به طور پیش‌فرض پنهان است و از راست خارج شده) */
    .nav-links {
        display: none;
        /* باید فلکس باشد تا آیتم‌ها عمودی چیده شوند */
        flex-direction: column;
        position: fixed;
        /* از absolute به fixed تغییر دهید تا همیشه در viewport بماند */
        top: 0;
        /* موقعیت شروع منو از بالای صفحه */
        right: 0;
        width: 80%;
        /* عرض منوی باز شده */
        height: 100vh;
        /* ارتفاع کامل viewport */
        background-color: #333;
        padding: 80px 20px 20px;
        box-shadow: -5px 0 10px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease-out;
        /* انیمیشن برای باز و بسته شدن */
        transform: translateX(100%);
        /* منو به طور پیش‌فرض از صفحه خارج شده است */
        z-index: 1000;
        overflow-y: auto;
        /* اسکرول در صورت نیاز */

        /* این بخش برای پنهان کردن منو قبل از ترانزیشن */
        pointer-events: none;
        /* رویدادهای ماوس را نادیده بگیرد */
        visibility: hidden;
        /* دیده نشود */
    }
    
    /* حالتی که منو باز می‌شود */
    .nav-links.active {
        display: block;
        transform: translateX(0);
        /* منو به داخل صفحه می‌آید */
        pointer-events: auto;
        /* رویدادهای ماوس را فعال کند */
        visibility: visible;
        /* دیده شود */
    }

    .nav-links li {
        margin: 0;
        text-align: right;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links li a {
        padding: 15px 0;
        display: block;
        text-align: right;
    }

    .nav-links li a::after {
        display: none;
    }

    /* تغییر آیکون همبرگر به علامت X */
    .menu-toggle .fa-bars {
        display: block;
    }

    .menu-toggle .fa-times {
        display: none;
    }

    .menu-toggle.active .fa-bars {
        display: none;
    }

    .menu-toggle.active .fa-times {
        display: block;
    }
}




/* ---  استایل دهی برای سایدبار (Sidebar) --- */

/* کانتینر اصلی سایدبار */
/* اینها رایج ترین شناسه ها/کلاس ها هستند. یکی یا چند تا از آنها را که قالبتان استفاده می کند انتخاب کنید. */
#secondary, /* ID رایج برای سایدبار (توسط get_sidebar() ایجاد می‌شود) */
#sidebar,   /* ID رایج دیگر */
.widget-area, /* کلاس رایج برای سایدبار */
.main-sidebar { /* اگر قالب شما نام متفاوتی استفاده می کند */
    flex-basis: 280px; /* عرض ثابت برای سایدبار */
    flex-shrink: 0; /* جلوگیری از جمع شدن سایدبار در صورت کمبود فضا */
    padding: 20px; /* فضای داخلی سایدبار */
    background-color: #f9f9f9; /* رنگ پس‌زمینه سایدبار */
    border-radius: 8px; /* گوشه‌های گرد */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* سایه ملایم */
    direction: rtl; /* برای سایدبار فارسی (راست به چپ) */
    text-align: right; /* تراز متن به راست */
}

/* استایل دهی برای هر ویجت در سایدبار */
.widget, /* کلاس رایج برای هر ویجت */
.sidebar-widget { /* اگر قالبتان نام متفاوتی استفاده می کند */
    margin-bottom: 30px; /* فاصله بین ویجت‌ها */
    background-color: #fff; /* پس‌زمینه هر ویجت */
    padding: 15px 20px; /* فضای داخلی هر ویجت */
    border-radius: 6px; /* گوشه‌های گرد برای هر ویجت */
    border: 1px solid #eee; /* بوردر دور هر ویجت */
    box-shadow: 0 1px 4px rgba(0,0,0,0.05); /* سایه کوچک برای هر ویجت */
}

/* عنوان ویجت */
.widget-title, /* کلاس رایج برای عنوان ویجت */
.widget h2,   /* اگر عنوان ویجت h2 است */
.widget h3 {   /* اگر عنوان ویجت h3 است */
    font-size: 20px;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff; /* خط زیر عنوان */
    text-align: right;
}

/* لیست‌های ویجت‌ها (مثل برگه‌ها، دسته‌بندی‌ها، بایگانی‌ها) */
.widget ul {
    list-style: none; /* حذف نشانگرهای لیست (دایره، مربع) */
    padding: 0; /* حذف پدینگ پیش‌فرض لیست */
    margin: 0;
}

.widget ul li {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #ddd; /* خط نقطه‌چین بین آیتم‌ها */
    position: relative;
}

.widget ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.widget ul li a {
    text-decoration: none;
    color: #007bff;
    font-size: 16px;
    transition: color 0.3s ease, padding-right 0.3s ease;
    display: block;
    padding-right: 0;
}

.widget ul li a:hover {
    color: #0056b3;
    padding-right: 5px;
}

/* استایل برای فرم جستجو در سایدبار */
.widget #searchform,
.widget .search-form {
    display: flex;
    margin-bottom: 15px;
}

.widget #s,
.widget .search-field {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px 0 0 5px;
    font-size: 16px;
    text-align: right;
}

.widget #searchsubmit,
.widget .search-submit {
    background-color: #007bff;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.widget #searchsubmit:hover,
.widget .search-submit:hover {
    background-color: #0056b3;
}


/* ---  واکنش‌گرایی (Responsive Design) برای سایدبار و محتوای اصلی --- */
@media (max-width: 992px) { /* برای صفحه نمایش های متوسط و کوچک تر (مثل تبلت و موبایل) */
    .site-content-wrapper {
        flex-direction: column; /* در موبایل زیر هم قرار گیرند: محتوا بالا، سایدبار پایین */
        padding: 20px 15px; /* کمی پدینگ از کناره ها */
    }

    #primary,
    .content-area,
    #secondary,
    #sidebar,
    .widget-area,
    .main-sidebar {
        width: 100%; /* هر دو عرض کامل را بگیرند */
        margin-left: 0; /* حذف margin چپ */
        margin-right: 0; /* حذف margin راست */
    }

    /* اضافه کردن فاصله بین محتوا و سایدبار در حالت موبایل */
    #secondary,
    #sidebar,
    .widget-area,
    .main-sidebar {
        margin-top: 30px;
    }
}

/*  -----------  Button ---------------- */

.read-more-button {
    display: inline-block;
    background-color: #033F61;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    align-self: center;
    margin-top: auto;
    margin-bottom: 5px;
}

.read-more-button:hover {
    background-color: #059FB7;
    transform: translateY(-2px);
}


.btn  {
    display: inline-block;
    background-color: #033F61;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    align-self: center;
    margin-top: auto;
    margin-bottom: 5px;
}


.btn:hover {
    background-color: #059FB7;
    transform: translateY(-2px);
}

/* ------------    Page Title    -------------------- */
.page-title {
    margin-top: 40px;
    margin-bottom: 60px;
    text-align: center;
    font-size: 2.5rem;
    color: #2c3e50;
    position: relative;
    padding-bottom: 15px;
}

.page-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #033F61;
    border-radius: 2px;
}

#primary{
    padding: 0 60px;
}



.section-title {
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
    position: relative;
    padding-bottom: 10px;
    /* برای فضای خط زیر عنوان */
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    /* برای قرار گرفتن در وسط در حالت RTL */
    transform: translateX(50%);
    /* تکمیل وسط‌چین کردن */
    width: 60px;
    height: 4px;
    background-color: #033f61;
    /* رنگ خط زیر عنوان - می‌توانید تغییر دهید */
}