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

/* کانتینر بنر متحرک */
.banner-container {
    background-color: transparent;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    padding: 0.3em 0;
    width: 100%;
    display: flex;
}

/* متن متحرک داخل بنر */
.banner-text {
    display: flex;
    justify-content: space-around;
    align-items: center;
    animation: scroll-right 40s linear infinite;

    /* استفاده از فونت Caza */
    font-family: 'Caza', sans-serif;
    
    font-weight: 700; /* وزن مناسب برای فونت (بولد) */
    font-size: 3rem;
    color: #000080; /* رنگ داخل متن: آبی نفتی */

    /* ایجاد سایه سه‌بعدی با برجستگی و عمق بیشتر */
    text-shadow:
        /* حاشیه سفید در جهات مختلف */
        -1px -1px 0 white,
        1px -1px 0 white,
        -1px 1px 0 white,
        1px 1px 0 white,
        /* سایه‌های تیره برای عمق بیشتر و فاصله بیشتر */
        7px 7px 0px rgba(0, 0, 0, 0.4),
        8px 8px 0px rgba(0, 0, 0, 0.3),
        9px 9px 0px rgba(0, 0, 0, 0.2),
        10px 10px 0px rgba(0, 0, 0, 0.1);
}

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