/*========================================================================*/
/* استایل نوار هدر (نوار سبز رنگ بالا) و محتوای آن */
/*========================================================================*/

/* این بخش شامل استایل‌های اصلی برای نوار بالایی صفحه (هدر) است. */
header {
    background-color: rgb(18, 197, 197); /* رنگ پس‌زمینه سبز نوار هدر */
    padding: 0; /* حذف فاصله داخلی (پدینگ) */
    border-radius: 10px 10px 0 0; /* گرد کردن گوشه‌های بالا */
    height: 2vh; /* ارتفاع نسبی نوار (2% از ارتفاع صفحه) */
    min-height: 1.5cm; /* حداقل ارتفاع ثابت نوار */
    width: calc(100% - 4mm); /* عرض نوار با کمی فاصله از طرفین */
    margin: 0 auto; /* قرار دادن نوار در مرکز افقی */
    /* طرح لوزی روی پس‌زمینه */
    background-image: linear-gradient(45deg, rgba(0,0,0,.15) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.15) ),
                      linear-gradient(45deg, rgba(0,0,0,.15) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.15) );
    background-size: 20px 20px; /* اندازه لوزی‌ها */
    background-position: 0 0, 10px 10px; /* موقعیت شروع لوزی‌ها */
}

/*========================================================================*/
/* استایل بنر متحرک در هدر */
/*========================================================================*/

/* کانتینر بنر متحرک که متن در آن قرار می‌گیرد.*/
.banner-container {
    background-color: transparent; /* پس‌زمینه شفاف برای نمایش متن روی هدر سبز */
    text-align: center; /* تراز کردن متن در مرکز */
    overflow: hidden; /* مخفی کردن محتوایی که از کادر بیرون می‌زند */
    white-space: nowrap; /* جلوگیری از شکسته شدن متن به خط جدید */
    padding: 0.5em 0; /* فاصله داخلی بالا و پایین */
    position: fixed; /* موقعیت ثابت نسبت به صفحه مرورگر */
    top: 0.1cm; /* فاصله نیم سانتی‌متری از بالای صفحه */
    width: 100%; /* عرض کامل کانتینر */
    z-index: 1001; /* اطمینان از قرارگیری بنر در بالاترین لایه */
    /* استفاده از فلکس باکس برای تراز کردن بهتر محتوا */
    display: flex;
}

/* متن متحرک داخل بنر */
.banner-text {
    /* تکرار متن در داخل بنر */
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* این انیمیشن برای حرکت از راست به چپ مناسب است */
    animation: scroll-right 20s linear infinite;
    font-family: 'Shabnam', sans-serif; /* استفاده از فونت پیشنهادی Shabnam */
    font-weight: 900; /* استفاده از وزن Bold فونت برای خوانایی بیشتر */
    font-size: 1.5rem; /* اندازه فونت */
    color: white; /* رنگ متن (سفید) */
}

/* تعریف انیمیشن: حرکت متن از چپ به راست */
@keyframes scroll-right {
    /* شروع انیمیشن: متن کاملاً در سمت چپ و خارج از کادر است */
    0%   { transform: translateX(-100%); }
    /* پایان انیمیشن: متن کاملاً در سمت راست و خارج از کادر است */
    100% { transform: translateX(100%); }
}




/*
    این کانتینر برای نگه داشتن گروه لوگوها استفاده می‌شود.
*/
.logo-container {
    position: fixed; /* موقعیت ثابت نسبت به صفحه مرورگر */
    top: 2cm; /* فاصله ثابت از بالا */
    right: 0.5cm; /* فاصله ثابت از سمت راست */
    z-index: 1000; /* اطمینان از قرارگیری روی بقیه محتوا */
}

/*
    این المان برای قرار دادن دو لوگو در یک خط استفاده می‌شود.
*/
.logo-group {
    display: flex; /* المان‌ها را در یک خط نمایش می‌دهد */
    align-items: center; /* تراز کردن عمودی در مرکز */
    gap: 10px; /* فاصله بین دو لوگو */
}

/*
    استایل برای تصویر اصلی لوگو
*/
.logo-fa-ar {
    width: 5vw; /* عرض لوگو (5% از عرض صفحه نمایش) */
    height: 5vw; /* ارتفاع لوگو (5% از عرض صفحه نمایش) */
    max-width: 100px; /* حداکثر عرض ثابت */
    max-height: 100px; /* حداکثر ارتفاع ثابت */
}

/*
    استایل برای عنوان متنی لوگو
*/
.logotitle-fa-ar {
    width: 25vw; /* عرض عنوان (25% از عرض صفحه نمایش) */
    height: auto; /* ارتفاع خودکار */
    max-width: 350px; /* حداکثر عرض ثابت */
}