*{
    -webkit-user-select: none; /* لمنع تحديد النصوص في كروم وسفاري */
    -moz-user-select: none;    /* لمنع تحديد النصوص في فايرفوكس */
    -ms-user-select: none;     /* لمنع تحديد النصوص في إنترنت إكسبلورر */
    user-select: none;         /* لمنع تحديد النصوص في بقية المتصفحات */

    padding: 0;
    margin: 0;
    /*color: white;*/
    font-family: "IBM Plex Sans Arabic", sans-serif;
}

/* منع سحب الصور */
img {
    -webkit-user-drag: none; /* لمنع سحب الصور */
}

body{
    background-color: #F4A261;
    display: flex;
    direction: ltr; /* Change element direction to left-to-right */
    text-align: left; /* Align content to the left */
}
/*=============================================*/
/*--------------------------------*/

.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f0f8ff;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    text-align: center;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.popup.show {
    opacity: 1;
}
.popup-content.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.close {
    position: absolute;
    color: black;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
}
input, textarea {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: block;
}
textarea {
    height: 100px;
}
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    margin-top: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
button:hover {
    background-color: #45a049;
}
#confirmationMessage {
    display: none;
    text-align: center;
}

#formTitle{
    color: rgb(41, 41, 41);
}

#message{
    color: rgb(41, 41, 41);
}

#messageForm input{
    color: rgb(41, 41, 41);
}

#confirmationMessage h3 {
    color: #007BFF; /* Blue color */
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 10px;
}

#confirmationMessage h2 {
    color: #020a6e; /* Blue color */
    font-weight: bold;
    font-size: 1.5em;
    margin-top: 10px;
}


#confirmationMessage p {
    font-size: .8em;
    font-weight: normal;
    margin-top: 0;
    color: rgb(49, 49, 49);
}




/*=============================================*/
/*--------------------------------*/
.items1 a{    
    width: 90%;
    height: 50px;
    padding: 0;
    margin: -15px -20px;
}

.items1 a img{    
    width: 80px;
    padding: 0;
    margin: -15px -20px;
}





/*=====================================*/

/*--------------------------------*/
/*=============================================*/



.container {
    max-width: 90%;
    margin: 20px auto;
    padding: 20px;
    background: #fff; /* لون الخلفية الداخلية */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    
}
.container h1, h2, h3, li, p, strong {
    color: #333333; /* لون النص للعناوين */
    font-size: 16px;
}
.container h1 {
    color: #333333; /* لون النص للعناوين */
    font-size: 24px;
    margin-bottom: 20px;
}
.container h2 {
    color: #333333; /* لون النص للعناوين */
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.container p {
    color: #333333; /* لون النص للعناوين */
    margin: 0 0 10px 0;
}
.image {
    text-align: center;
    margin: 20px 0;
}
.image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;

    cursor: pointer;
    transition: transform 0.3s ease;
}
.button {
    display: inline-block;               /* يجعل الزر ككتلة داخلية */
    background-color: #007BFF;          /* لون خلفية الزر */
    font-size: 14px;
    color: white;                        /* لون النص */
    padding: 10px 20px;                 /* padding حول النص */
    text-decoration: none;               /* إزالة خط التسطير */
    border-radius: 5px;                 /* زوايا دائرية */
    transition: transform 0.3s ease-in-out; /* تأثير سلس */
}

/* تنسيق نص الزر */
.button-text {
    color: #ffff;
    margin: 0;                          /* إزالة الهامش الافتراضي */
}

.button:hover,
.button:focus,
.button:active{
    background: #0056b3; /* لون الخلفية للأزرار عند التمرير فوقها */
}

.buttonvol {
    display: inline-block;               /* يجعل الزر ككتلة داخلية */
    background-color: #03b41a;          /* لون خلفية الزر */
    font-size: 14px;
    color: white;                        /* لون النص */
    padding: 10px 20px;                 /* padding حول النص */
    text-decoration: none;               /* إزالة خط التسطير */
    border-radius: 5px;                 /* زوايا دائرية */
    transition: transform 0.3s ease-in-out; /* تأثير سلس */
}

/* تنسيق نص الزر */
.buttonvol-text {
    color: #ffff;
    margin: 0;                          /* إزالة الهامش الافتراضي */
}

.buttonvol:hover,
.buttonvol:focus,
.buttonvol:active{
    background: #027511; /* لون الخلفية للأزرار عند التمرير فوقها */
}



.list {
    list-style: none;
    padding: 0;
}
.list li {
    margin-bottom: 10px;
}
.list li::before {
    content: "✔️";
    margin-right: 10px;
    color: green;
}




/*--------------------------------*/
.items1 a{    
    width: 90%;
    height: 50px;
    padding: 0;
    margin: -15px -20px;
}

.items1 a img{    
    width: 80px;
    padding: 0;
    margin: -15px -20px;
}





/*=====================================*/

/*--------------------------------*/

.menu{
    
    position: sticky;
    top: 0px;
    align-self: flex-start;
    border-radius: 0 0 8px 0;
    background-color: #088395;
    width: 42px;
    height: 94.4vh;
    padding: 20px;
    overflow: hidden;
    transition: width 0.3s ease, font-size 0.3s ease; /* زيادة فترة الانتقال */
    z-index: 0;
    font-size: 25px;
    direction: ltr;
    
}

.menu:hover{
    width: 260px;
    font-size: 18px;  
}

.menu.expanded {
    width: 260px; /* العرض الموسع */
    font-size: 18px; /* حجم النص الموسع */
}

/* السماح بتفاعل جميع العناصر داخل .content في الوضع غير الممتد */
.content * {
    pointer-events: auto; /* السماح بالتفاعل بشكل افتراضي */
}

/* منع تفاعل جميع العناصر داخل .content عند تمدد الميني بار */
.menu.expanded ~ .content * {
    pointer-events: none; /* تعطيل التفاعل */
}






.menu ul{
    top: -18px;
    list-style: none;
    position: relative;
    height: 95%;
    z-index: 2;
}

.menu:hover ul,
.menu:focus ul,
.menu:active ul{
    top: -12px;
}



.menu ul ul{
    display: block;
    margin: 42px 0;
    transition: 0.3s;
}

.menu ul li a{
    display: block;
    text-decoration: none;
    padding: 10px;
    margin: 10px -6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 35px;
    transition: 0.1s;
}
.menu ul li a:hover, .active, .data-info .box:hover,
.menu ul li a:focus, .active, .data-info .box:focus,
.menu ul li a:active, .active, .data-info .box:active{
    background-color: #ffffff55;
    transition: background-color 0.3s ease; /* ضبط الحركة */
}

/*===============================*/
.menu ul li{
    top: 150px;
}

.menu ul li a p{
    color:#fff;
}


.menu #windows p{
    margin-left: 4px;
}
.menu .Security  p{
    margin-left: 3px;
}
.menu #loadPopup-us p{
    margin-left: 7px;
} 
.menu #openPopup p{
    margin-left: -2px;
}
/*===============================*/
#home i, #android i, #windows i, #loadPopup-st i, #openPopup i, #loadPopup-us i{
    color: #f9faf9;
}

.menu .Security  i{ 
    color: #54e67f;
    transition: .2s;
}

.menu ul li a i{
    font-size: 25px;
}

.menu:hover ul li a,
.menu:focus ul li a,
.menu:active ul li a{
    display: block;
    width: 90%;
    text-decoration: none;
    padding: 6px;
    margin: 7px 0px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 35px;  
}

/* التأكد من عرض العناصر بشكل صحيح عند تمدد الميني بار */
.menu.expanded ul li a {
    display: block;
    width: 90%;
    text-decoration: none;
    padding: 6px;
    margin: 7px 0px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 35px;  
    transition: background-color 0.3s ease; /* إضافة انتقال سلس */
}

/*===========================*/
.content{
    
    width: 100%;
    margin: 0px;
}
.titel-info{
    position: sticky;
    top: 10px;
    height: 80px;
    background:rgba(255, 0, 0, 0);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:0 0 0 0;
    margin: 10px 0;
    z-index: 1;
}

/*اضافةعنصر على البادي ليشكل ليصبح دائرة*/

.titel-info::after{
    position: sticky;
    align-self: flex-start;
    content: '';
    width: 100%;
    height: 119px;
    right: 0px;
    top: -20px;
    /*background-image:linear-gradient(to right, #088395, #F4A261 70%); */
    background: #088395;
    
    background-position: center;
    opacity: 100%;
    position: absolute;
    /*تنزيل العنراسفل المستطيل*/
    z-index: -1;
    /*تشكيل العنصر ليصبح دائرة*/
    
}





.titel-info img{
    
    width: 100%;
    height: 80px;
    align-items: center;
}

.content .Write-info{
    padding: 0;
    width: 100hv;
    top: 300px;
    margin: 0 20px;
    
}

.Write-info h3{
    font-size: 30px;
    color: #002;
    font-weight: 700;
    letter-spacing: 1px;
}

.Write-info i{
    color: #5933e2;
    font-size: 50px;
}

.content .Write-info h4{
    font-size: 20px;
    color: rgb(2, 2, 145);
    font-weight: bolder;
    
    letter-spacing: 1px;
}

.content .Write-info p strong{
    
    font-size: 18px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight: bold;
    
    letter-spacing: 1px;
}

.content .Write-info p{
padding: 0;
margin: 0;
font-size: 16px;
color: rgb(34, 34, 34);
font-weight: bold;
letter-spacing: 1px;
}

/* تنسيق الفوتر */
footer {
    background-color: #09092b; /* لون خلفية داكن */
    color: #fff; /* لون النص أبيض */
    text-align: center;
    padding: 20px 0;
    width: 100%;
    margin-top: 10px;
}

.moo {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

/* تنسيق الروابط الاجتماعية */
.contact-me a {
    color: #fff;
    margin: 0 10px;
    text-decoration: none;
    font-size: 24px; /* حجم الأيقونات */
}

.contact-me a:hover {
    color: #ffcc00; /* لون التغيير عند التمرير */
}

.contact-me i {
    transition: color 0.3s ease;
}





/* خاص بالقصص اعلى الجزء الاوسط*/
.data-info {
    top: 300px;
    margin: 10px;
    display: flex;
    align-items: center; /* يحاذي العناصر عموديًا في المنتصف */
    justify-content: center; /* يحاذي العناصر أفقيًا في المنتصف */
    flex-wrap: wrap;
    gap: 15px;
    direction: rtl; /* تعيين اتجاه العناصر من اليمين لليسار */
}


.story {
    /* إعدادات عامة للعنصر */
    flex-basis: 200px;
    flex-grow: 1;
    border-radius: 8px;
    position: relative;
    max-width: 450px;
    aspect-ratio: 3 / 2; /* نسبة العرض إلى الارتفاع */
    background-image: linear-gradient(transparent, rgba(0,0,0,.5)), url(images/status-1.png);
    background-position: center;
    background-size: cover;
    direction: rtl; /* Change element direction to right-to-left */
    transition: 0.5s;
}

/* للأجهزة الصغيرة (مثل الهواتف الذكية) */
@media (max-width: 600px) {
    .story {
        flex-basis: 90%; /* احتلال العرض بالكامل */
        max-width: 100%; /* إلغاء الحد الأقصى للعرض */
        aspect-ratio: 4 / 3; /* ضبط نسبة العرض إلى الطول */
    }
    .contact-me a{
        margin: 0 5px 0 5px;
    }
    .moo {
        margin: 1%;
        font-size: 14px;
    }
    
    /* تنسيق الروابط الاجتماعية */
    .contact-me a {
        font-size: 20px; /* حجم الأيقونات */
    }
}

/* للأجهزة المتوسطة (مثل الأجهزة اللوحية) */
@media (min-width: 601px) and (max-width: 1024px) {
    .story {
        flex-basis: 40%; /* عرض بنسبة 50% للشاشات المتوسطة */
        max-width: 50%; /* حد أقصى للعرض */
        aspect-ratio: 3 / 2; /* يمكنك تعديل النسبة حسب الحاجة */
    }
}

/* للأجهزة الكبيرة (مثل أجهزة الكمبيوتر) */
@media (min-width: 1025px) {
    .story {
        flex-basis: 20%;
        max-width: 25%;
        aspect-ratio: 3 / 2; /* إعادة تطبيق النسبة الأصلية */
    }
}


/*
.story img{
    position: absolute;
    width: 45%;
    border-radius: 50%;
    top: -10px;
    left:-10px;
    border: 2px solid blue;
    transition: 1s;
}*/

.story img{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10PX;
    top: 0px;
    left:0px;
    border: 0px solid blue;
    opacity: 0%;
    transition: .25s;
}


.story:hover{
    cursor: pointer;
    transform: scale(0.9);
    box-shadow:0px 0px 30px rgb(15, 15, 15) ;
    
}

.story p{
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 100%;
    stroke-width: 1px;
    color: white;
    font-size: 30px;
}


.s1{
    background-image:linear-gradient(transparent, rgba(14, 15, 87, 0.349)) ,url(https://i.ibb.co/SwF9qDL2/Beyblade-Burst-App.webp);
    background-size: 100% 100%;
}
.s2{
    background-image:linear-gradient(transparent, rgba(14, 15, 87, 0.349)) ,url(https://i.ibb.co/GrtdQr6/Bowmasters.webp);
    background-size: 100% 100%;
}
.s3{
    background-image:linear-gradient(transparent, rgba(14, 15, 87, 0.349)) ,url(https://i.ibb.co/ZRRPvKhg/Brawl-Stars.webp);
    background-size: 100% 100%;
}
.s4{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/JW6bLKHh/Car-X-Drift-Racing.webp);
    background-size: 100% 100%;
}
.s5{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/NcrPr1H/Cooking-Fever.webp);
    background-size: 100% 100%;;
}
.s6{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/0y6Sn2zd/Creative-Destruction.webp);
    background-size: 100% 100%;
}   
.s7{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/1Gtrsyzp/PES-2025.webp);
    background-size: 100% 100%;
}
.s8{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/Zzy68G4/GTA-ALL.webp);
    background-size: 100% 100%;
}
.s9{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/yFRrK220/PUBG-New-State.webp);
    background-size: 100% 100%;
}
.s10{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/8DHFSCgG/Fashion-Queen.webp);
    background-size: 100% 100%;
}
.s11{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/rKC5CCR3/Zooba.webp);
    background-size: 100% 100%;
}   
.s12{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/846tmRhj/Going-Balls.webp);
    background-size: 100% 100%;
}
.s13{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/8L24SSbp/Free-Fire-MAX.webp);
    background-size: 100% 100%;
}
.s14{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/8G63K6h/Dragon-City.webp);
    background-size: 100% 100%;
}
.s15{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/MDGLsw8V/Fortnite.webp);
    background-size: 100% 100%;
}
.s16{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/Qv41sdbT/Game-Turbo-5.webp);
    background-size: 100% 100%;
}   
.s17{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/Jjp4BjJr/Hay-Day.webp);
    background-size: 100% 100%;
    
}
.s18{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/k6rXyZ93/GTA-San-Andreas.webp);
    background-size: 100% 100%;
}
.s19{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/1YY0JFCD/Feeding-Frenzy.webp);
    background-size: 100% 100%;
}
.s20{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/fGMQz9DQ/Hill-Climb-Racing-2.webp);
    background-size: 100% 100%;
}
.s21{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/hxcxy0Zk/GTA-10.webp);
    background-size: 100% 100%;
}   
.s22{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/kspQ76Zg/Home-Scapes.webp);
    background-size: 100% 100%;
}
.s23{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/67h2Vd9c/Pou.webp);
    background-size: 100% 100%;
}
.s24{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/XfMWRQGd/Jetpack-Joyride.webp);
    background-size: 100% 100%;
}
.s25{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/PYhVkr5/y6emz2f3.webp);
    background-size: 100% 100%;
}
.s26{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/DDPDXzVQ/Minecraft.webp);
    background-size: 100% 100%;
}
.s27{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/PZTVRkQL/Pubg-Mobile-China.webp);
    background-size: 100% 100%;
}
.s28{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/1Yy8PRTm/Ratatouille.webp);
    background-size: 100% 100%;
}
.s29{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/fGvxZRCz/DLS-2023.webp);
    background-size: 100% 100%;
}
.s30{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/cjgFgBF/Farming-Simulator-20.webp);
    background-size: 100% 100%;
}
.s31{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/LTLsVNs/Spider-Man.webp);
    background-size: 100% 100%;
}
.s32{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/XpW8spR/sck4ahyd.webp);
    background-size: 100% 100%;
}
.s33{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/67pyX7sW/Generals-Zero-Hour.webp);
    background-size: 100% 100%;
}
.s34{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/Xkx41ypK/God-of-War-2.webp);
    background-size: 100% 100%;
}
.s35{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/hF2Fg8Zs/GTA-9.webp);
    background-size: 100% 100%;
}
.s36{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/5vHSTW4/svdtfh2m.webp);
    background-size: 100% 100%;
}
.s37{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/v6xSRJcS/Poppy-Playtime-Chapter-2.webp);
    background-size: 100% 100%;
}
.s38{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/MH1ZWhG/Head-Ball-2.webp);
    background-size: 100% 100%;
}
.s39{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/TDvs0xCV/My-Talking-Tom-Friends.webp);
    background-size: 100% 100%;
}
.s40{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/S4cNvHYY/WWE-2K20.webp);
    background-size: 100% 100%;
}
.s41{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/js4CXpy/FIFA-2023-pc.webp);
    background-size: 100% 100%;
}
.s42{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/JR6smB5m/Barbie-Dreamhouse.webp);
    background-size: 100% 100%;
}
.s43{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/Cb4Bz8B/4cvhb0yr.webp);
    background-size: 100% 100%;
}
.s44{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/LD1J4fVf/House-Flipper.webp);
    background-size: 100% 100%;
}
.s45{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/BqMkBRH/5xitrefi.webp);
    background-size: 100% 100%;
}
.s46{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/fzRdVzym/Among-US.webp);
    background-size: 100% 100%;
}
.s47{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/JRmrrXfn/e-Football-PES-2023.webp);
    background-size: 100% 100%;
}
.s48{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/6PX3TMC/Grow-Empire-Rome-1.webp);
    background-size: 100% 100%;
}
.s49{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/B6V9Rbg/7xsqqwhs.webp);
    background-size: 100% 100%;
}
.s50{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/jk6m28dP/8-Ball-Pool.webp);
    background-size: 100% 100%;
}
.s51{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/n8KSWvbL/Bus-Simulator-Ultimate.webp);
    background-size: 100% 100%;
}
.s52{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/hxQVYTty/Candy-Crush-Saga.webp);
    background-size: 100% 100%;
}
.s53{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/60bgnsMw/FIFA-23-Mobile.webp);
    background-size: 100% 100%;
}
.s54{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/Vp3bMJvX/Avakin-Life.webp);
    background-size: 100% 100%;
}
.s55{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/zFGxN3s/ardwlbri.webp);
    background-size: 100% 100%;
}
.s56{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/DkMCLFn/xfnwy90s.webp);
    background-size: 100% 100%;
}
.s57{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/7dZ5v38z/Gta-Vice-City.webp);
    background-size: 100% 100%;
}
.s58{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/YFXq4LFG/Bully-1.webp);
    background-size: 100% 100%;
}
.s59{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/hf4rQRL/xhi15lfs.webp);
    background-size: 100% 100%;
}
.s60{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/ks3WmrXg/Plants-Vs-Zombies-2.webp);
    background-size: 100% 100%;
}
.s61{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/ZRQmcKBM/Poppy-Playtime-Chapter-1.webp);
    background-size: 100% 100%;
}
.s62{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/Z6MkTKch/Score-Hero.webp);
    background-size: 100% 100%;
}
.s63{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/6cDYyxkP/Roblox.webp);
    background-size: 100% 100%;
}
.s64{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/v6v2q2wQ/Slither-io.webp);
    background-size: 100% 100%;
}
.s65{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/23kdT7LT/Traffic-Racer.webp);
    background-size: 100% 100%;
}
.s66{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/34bhkGL/bpzkw61p.webp);
    background-size: 100% 100%;
}
.s67{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/X4fPtYj/v63ea1hm.webp);
    background-size: 100% 100%;
}
.s68{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/SwGg01GH/pes-2023-psp.webp);
    background-size: 100% 100%;
}
.s69{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/nmHT8tC/5e3lizxn.webp);
    background-size: 100% 100%;
}
.s70{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/yFd6wk18/FRAG-Pro-Shooter.webp);
    background-size: 100% 100%;
}
.s71{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/zF64RqG/gwamkdda.webp);
    background-size: 100% 100%;
}
.s72{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/F4nmCNw/74qecxmn.webp);
    background-size: 100% 100%;
}
.s73{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/sWDhv0r/m5s7mrgg.webp);
    background-size: 100% 100%;
}
.s74{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/5BhFS9T/e5z0zbvq.webp);
    background-size: 100% 100%;
}
.s75{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/20D0stsz/Bat-Man-Game.webp);
    background-size: 100% 100%;
}
.s76{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/2r9XM40/FIFA-Mobile-2022.webp);
    background-size: 100% 100%;
}
.s77{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/YF5yCw1T/internet-cafe-simulator-1.webp);
    background-size: 100% 100%;
}
.s78{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/gZqycMFR/Medal-of-Honor.webp);
    background-size: 100% 100%;
}
.s79{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/sSsV7nR/Red-Alert-2.webp);
    background-size: 100% 100%;
}
.s80{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/H5PdcRW/Shadow-Fight-3.webp);
    background-size: 100% 100%;
}
.s81{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/Z6dN8vmN/Talking-Tom-Gold-Run.webp);
    background-size: 100% 100%;
}
.s82{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/DPXBJTtv/2021-FIFA.webp);
    background-size: 100% 100%;
}
.s83{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/qYxG01hn/Car-Simulator-2.webp);
    background-size: 100% 100%;
}
.s84{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/RS3Fhff/bbozp34a.webp);
    background-size: 100% 100%;
}
.s85{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/84T5PZhT/My-Talking-Tom-2.webp);
    background-size: 100% 100%;
}
.s86{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/j9F7vrb0/GTA-3.webp);
    background-size: 100% 100%;
}
.s87{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/67LWjF0j/Sonic.webp);
    background-size: 100% 100%;
}
.s88{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/7sV8NfD/DLS-2019.webp);
    background-size: 100% 100%;
}
.s89{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/xGwPf6D/zgddjlnw.webp);
    background-size: 100% 100%;
}
.s90{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/1YmNvSBV/The-Grand-Mafia.webp);
    background-size: 100% 100%;
}
.s91{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/FhwPXj9/zv3945nm.webp);
    background-size: 100% 100%;
}
.s92{
    background-image:linear-gradient(transparent, rgba(0,0,0,.5)) ,url(https://i.ibb.co/McybYhx/Truckers-of-Europe-3-2024.webp);
    background-size: 100% 100%;
}







@media (max-width:1280px){
    .menu{
        height: 100vh;
        width: 42px;  
    }
    .menu.expanded {
        height: 100vh;
        width: 260px; /* العرض الموسع على الشاشات الصغيرة */
    }
    .data-info{
        width: 97%;
        margin: 0 1.5% 0 1.5% ;
    }
    
    .w-img{
        max-width: 98%; 
        border-radius:15px;
    }
    

    .menu.expanded ul li a {
        display: block;
        width: 90%;
        text-decoration: none;

        font-size: 0px;
        padding: 6px;
        margin: 7px 0px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 10px;  
        transition: background-color 0.3s ease; /* إضافة انتقال سلس */
    }
    .menu.expanded ul{
        top: -11px;
    }
    /*.menu:hover ul li a{
        display: block;
        
        text-decoration: none;
        padding: 6px;
        font-size: 14px;
        margin: 7px 0px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 10px;  
    }*/
    
    .menu.expanded ul li i{
        font-size: 15px;
        transition: width 0.3s ease, font-size 0.3s ease; /* زيادة فترة الانتقال */
    }
    .menu.expanded ul li p{
        font-size: 20px;
        transition: width 0.3s ease, font-size 0.3s ease; /* زيادة فترة الانتقال */
    }
    .menu .Connect-us{
        gap: -14px;
        transition: width 0.3s ease, font-size 0.3s ease; /* زيادة فترة الانتقال */
    }
    .menu .Security_P{
        gap: 12px;
        transition: width 0.3s ease, font-size 0.3s ease; /* زيادة فترة الانتقال */
    }
    
    .items p{
        font-size: 10px;
        transition: width 0.3s ease, font-size 0.3s ease; /* زيادة فترة الانتقال */
    }
    .items li img{
        width: 30px;
        transition: width 0.3s ease, font-size 0.3s ease; /* زيادة فترة الانتقال */
    }
}

@media (min-width: 541px) and (max-width: 1023px) {

    #nainimg{
        width: 80%;
        display: block;
        margin: 0 auto;
    }
}

#nainimg{
    width: 95%;
    display: block;
    margin: 0 auto;
}

.container {
    flex: 1;
    min-width: 0; /* عشان تمنع التمدد الغير ضروري */
    overflow: hidden;
    padding: 10px;
}

.data-info{
    flex: 1;
    min-width: 0; /* عشان تمنع التمدد الغير ضروري */
    overflow: hidden;
    
}

.content .story p {
    position: absolute;
    bottom: 5px;
    left: -5px;
    width: 100%;
    stroke-width: 1px;
    color: white;
    font-size: 30px;
    transition: all 0.5s ease;
}

/* منع تفاعل جميع العناصر داخل .content عند تمدد الميني بار */
.menu.expanded ~ .content * {
    pointer-events: none; /* تعطيل التفاعل */
}

/* إنجليزية: يبدأ من الشمال بمسافة */
html[lang="en"] .content .story p {
    left: 10px; /* أو ممكن تستخدم padding-left بدلاً من left */
    text-align: left;
}

/* الصفحة الإنجليزية: اختفاء لليمين */
html[lang="en"] .menu.expanded ~ .content .story p {
    transform: translateX(100%);
    opacity: 0;
}

.menu.expanded ~ .content .story p {
    font-size: 0;
    width: 0;
    overflow: hidden;
}

.content .story p {
    transform: translateX(0);
    opacity: 1;
}





/* دوران يمين سريع */
@keyframes spinY-right-fast {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(720deg); }
}

/* دوران يمين بطيء */
@keyframes spinY-right-slow {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(720deg); }
}

/* دوران شمال سريع */
@keyframes spinY-left-fast {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-720deg); }
}

/* دوران شمال بطيء */
@keyframes spinY-left-slow {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-720deg); }
}

/* الوضع الطبيعي للقصص */
.content .story {
    transition: transform 0.4s ease;
    transform: rotateY(0deg);
}

/* حركات مختلفة حسب الكلاس */
.menu.expanded ~ .content .rotate-right-fast {
    animation: spinY-right-fast 0.6s ease-in-out;
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

.menu.expanded ~ .content .rotate-right-slow {
    animation: spinY-right-slow 1s ease-in-out;
    animation-delay: 0.4s;
    animation-fill-mode: both;
}

.menu.expanded ~ .content .rotate-left-fast {
    animation: spinY-left-fast 0.6s ease-in-out;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.menu.expanded ~ .content .rotate-left-slow {
    animation: spinY-left-slow 1s ease-in-out;
    animation-delay: 0.6s;
    animation-fill-mode: both;
}


.story:hover{
    cursor: pointer;
    transform: scale(0.9);
    box-shadow:0px 0px 30px rgb(15, 15, 15) ;
    
}
/* تنسيق الصورة المصغرة ============================================*/
/* الخلفية السوداء التي تظهر عند تكبير الصورة */
/* الخلفية السوداء التي تظهر عند تكبير الصورة */
    /* Pop-up specific to images */
.image-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.image-popup {
    max-width: 90%; /* تحديد الحد الأقصى لعرض الصورة */
    max-height: 90%; /* تحديد الحد الأقصى لارتفاع الصورة */
    width: auto;
    height: auto;
    border: 5px solid white;
    border-radius: 10px;
}

.close-image-popup {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

/*=============================================*/
/*=============================================*/
/*=============================================*/
/*=============================================*/
/*=============================================*/
/*=============================================*/
/*=============================================*/
/*=============================================*/
/*=============================================*/
.intro h1{
    font-size: 26px; 
    color:#160147; 
    font-weight: 900; 
    transition: font-size 0.3s ease;
}
.container1{
    background: none; 
    color:#f0f8ff;  
}
#download{
    transition: width 0.3s ease, font-size 0.3s ease;
}
.button-text{
    color:#f0f8ff; 
    font-size:16px;
    margin:0;
}
#download .button-text{
    color:#f0f8ff; 
    font-size:16px;
    margin:0;
}
.title{
    font-size: 24px; 
    color:#160147;         
}
.subtitle{
    font-size: 16px;
    font-weight: bold; 
    color:#160147;
}
.ending h3{
    font-size: 16px; 
    color:#160147;
    font-weight: bold; 
    padding: 6px 20px;
}
.buttonvol{
    font-size: 16px; 
    border-radius: 8px; 
    padding: 10px 30px;
}
.contact-moo .moo{
    color:#fff;
    font-size: 20px;
    font-weight: bold;
}
.popup-content h2{
    color:rgb(2, 2, 141);
}
#messageForm input, textarea{
    direction: ltr; /* Change element direction to left-to-right */
    text-align: left; /* Align content to the left */
             
}
#confirmationMessage img{
    width: 80%; 
    height:auto; 
    margin-top: 20px;
}

.hidden {
    display: none;
}




/* خلفية البوب أب */
.popup-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* إطار البوب أب */
.popup-box {
    background: #fff;
    padding: 20px;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    box-shadow: 0 0 10px #000;
    position: relative;
}

/* زر الإغلاق */
.close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    background: crimson;
    color: #fff;
    border: none;
    font-size: 18px;
    padding: 5px 10px;
    cursor: pointer;
}

.popup-iframe {
    width: 100%;
    height: 80vh;
    border: none;
}