/* تعريف الحركة باستخدام @keyframes */
    @keyframes moveLeftRight {
        0% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(5px);
        }
        100% {
            transform: translateX(-5px);
        }
    }


    /* Customize the slider design */
    .swiper-container {
        width: 100%; /* Slider width: 100% of the screen width */
        margin: 0 auto; /* Center the slider horizontally */
        padding-bottom: 5px;
        overflow: hidden; /* Hide elements outside the visible area */
        position: relative; /* Make buttons follow the container */
    }

    .swiper-wrapper {
        display: flex; /* Align elements horizontally */
    }

    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px; /* Width of each slide */
        height: 100%; /* Height of each slide */
        flex-shrink: 0; /* Prevent elements from shrinking */
    }

    .swiper-button-next, .swiper-button-prev {
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
        width: 30px; /* Button width */
        height: 110%; /* Button height (same as slide height) */
        display: flex;
        align-items: center; /* Center content vertically */
        justify-content: center; /* Center content horizontally */
        position: absolute; /* Position the buttons */
        top: 0; /* Buttons aligned with the top of the slides */
        z-index: 8; /* Ensure buttons appear above other elements */
        border-radius: 0; /* Remove rounded corners */
        transition: transform 0.3s ease; /* Smooth transition for scaling */
    }

    /* Enlarge the button on hover */
    .swiper-button-next:hover, .swiper-button-prev:hover {
        transform: scale(1.1); /* Slightly enlarge the button */
        background-color: rgba(0, 0, 0, 0.78);
    }

    /* Hide buttons when they are disabled */
    .swiper-button-next.swiper-button-disabled,
    .swiper-button-prev.swiper-button-disabled {
        opacity: 0; /* Hide the button */
        pointer-events: none; /* Disable click events */
    }

    /* Position the "Next" button closer to the right edge */
    .swiper-button-next {
        right: -2px; /* Move closer to the right edge */
    }

    /* Position the "Previous" button closer to the left edge */
    .swiper-button-prev {
        left: -2px; /* Move closer to the left edge */
    }

    /* Customize the arrow style inside buttons */
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 24px; /* Arrow size */
        font-weight: bold; /* Arrow thickness */
    }

    .all-games-box {
        cursor: pointer; /* تغيير المؤشر إلى يد عند الاقتراب */
        transition: transform 0.2s ease; /* إضافة حركة سلسة */
    }

    .swiper-slide.all-games-box {
        width: 70%;
        height: 170px;
        position: relative;
        display: flex; /* لجعل النص في المنتصف */
        align-items: center; /* توسيط عمودي */
        justify-content: center; /* توسيط أفقي */
        border-radius: 8px;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        background-color: #6758fa99;
    }

    .swiper-slide.all-games-box {
        box-shadow: inset 0 0 20px 10px rgba(0, 0, 0, 0.3);
        /* تدرج لوني للحواف */
        background-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.1) 20%,
            transparent 50%,
            rgba(0, 0, 0, 0.1) 80%,
            rgba(0, 0, 0, 0.2) 100%
        );
    }

    .swiper-slide.all-games-box:hover {
        background-color: #4f43c5b2;
        transform: scale(1.01);
    }


.svg-icon-1 svg {
    position: absolute;
    bottom: 30px;
    right: 10px; /* الوضع الافتراضي (LTR) */
}

html[dir="rtl"] .svg-icon-1 svg {
    right: auto; /* إلغاء الخاصية right في وضع RTL */
    left: 10px; /* تحريك الأيقونة 10px إلى اليمين في وضع RTL */
    transform: scaleX(-1); /* عكس اتجاه الأيقونة */
   
}
 
/* تطبيق الحركة على الأيقونة عند الاقتراب من العنصر all-games-box */
.all-games-box:hover .svg-icon-1 svg {
    animation: moveLeftRight 0.5s infinite alternate; /* حركة مستمرة يمينًا ويسارًا */
}

/* وضع RTL: الحفاظ على الحركة مع عكس الاتجاه */
html[dir="rtl"] .all-games-box:hover .svg-icon-1 svg {
        animation: none;
}