/* ریست اولیه */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* بدنه کلی (جهت راست‌چین برای زبان فارسی) */
body {
    direction: rtl;
    font-family: sans-serif;
}

/* کانتینر هدر */
.header-container {
    display: flex;
    width: 100%;
    height: 120px; /* ارتفاع دلخواه؛ می‌توانید کم یا زیاد کنید */
    background-color: #dff2eb; /* رنگ سبز ملایم (قابل تغییر) */
    color: #6515f3; /* متن مشکی */
    font-family: "B Nazanin", sans-serif;
}

/* بخش تصویر سمت راست که ۱/۶ عرض هدر را می‌گیرد */
.header-image {
    width: 20%; /* 1/6 = 16.666...% */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
}

/* خود تصویر */
.header-image img {
    max-width: 100%;
    height: auto;
}

/* بخش محتوا (۵/۶) */
.header-content {
    width: 70%; /* 5/6 = 83.333...% */
    display: flex;
    flex-direction: column; /* بالا و پایین */
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
    text-align: right;

}

/* بخش بالایی هدر */
.header-top h1 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    /* متن مشکی به صورت پیش‌فرض از color: #000 ارث می‌گیرد */
}

/* خط جداکننده بین بالا و پایین */
.divider {
    width: 100%;
    border: none;
    border-top: 1px solid #000; /* خط مشکی */
    margin-bottom: 10px;
}

/* بخش پایینی هدر که دکمه‌ها (لینک‌ها) در آن قرار دارند */
.header-bottom ul {
    list-style: none;
    display: flex;
    gap: 45px; /* فاصله بین آیتم‌ها */
}

.header-bottom li a {
    text-decoration: none;
    color: #000; /* مشکی */
    font-size: 1.3rem;
}

.header-bottom li a:hover {
    color: #7018ec; /* جلوه هاور ساده */
}

@media (max-width: 768px) {
    .header-content {
    width: 100%; /* 5/6 = 83.333...% */
    padding: 10px;

}
    .header-top h1 {
        font-size: 1.5rem; /* مقدار را بسته به نیاز کاهش دهید */
    }

    /* بخش پایینی هدر که دکمه‌ها (لینک‌ها) در آن قرار دارند */
    .header-bottom ul {
        list-style: none;
        display: flex;
        gap: 1.8rem; /* فاصله بین آیتم‌ها */
    }

    .header-bottom li a {
        text-decoration: none;
        color: #000; /* مشکی */
        font-size: 0.9rem;
    }

    /* خود تصویر */
    .header-image {
        display: none;
    }
}