@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Zain:wght@200;300;400;700;800;900&display=swap');


* {
    font-family: "Rubik", sans-serif;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}
body {
    /* overflow-x: hidden; */
    /* display: flex; */
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    /* background-image: #121212; */
    background-color: transparent;
    background-image: radial-gradient(#ffffff 1px, #e4e4e494 1px);
    /* background-image: radial-gradient(#000000 1px, #e5e5f7 1px); */
}


/* تخصيص الشريط */
::-webkit-scrollbar {
    width: 8px; /* عرض الشريط العمودي */
    height: 8px; /* عرض الشريط الأفقي */
}

  /* تخصيص المسار (الخلفية) */
::-webkit-scrollbar-track {
    background: #e0e0e071; /* لون الخلفية */
    border-radius: 10px; /* زوايا دائرية */
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.1); /* ظل داخلي خفيف */
}

  /* تخصيص المقبض (المتحرك) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #ff6b6b, #f06595); /* لون متدرج للمقبض */
    border-radius: 10px; /* زوايا دائرية للمقبض */
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2); /* ظل داخلي لتمييز المقبض */
}

  /* تخصيص المقبض عند التحويم */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #ff6b6b, #d6336c); /* لون متدرج داكن عند التحويم */
}











@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px); /* يمكن تعديل القيمة لجعل الحركة تظهر من الأسفل */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
#scrollToTopBtn {
    width: 3.5rem;
    display: none; /* الإخفاء الافتراضي */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    border: none;
    outline: none;
    background-color: #5372f088;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 1.5rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
    opacity: 0; /* يبدأ مخفيًا */
    transition: background-color 1s, opacity 1s; /* تأثير الانتقال */
}
#scrollToTopBtn.show {
    display: block;
    animation: fadeIn 1s forwards; /* تطبيق التأثير */
}




/* slaider photo */
.main{
    height: 100%;
    width: 100%;
}
.warper, .slide{
    width: 100%;
    height: 100%;
}
.slide{
    overflow: hidden;
}
.slide::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
}
.slide .image{
    height: 100%;
    width: 100%;
    object-fit: contain;
    background-repeat: no-repeat;
    background-size: cover;
}
.slide .image-data{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 10;
}
.slide .image-data span{
    font-family: "Zain", serif;
}
.image-data .text{
    font-size: 1rem;
    font-weight: 700;
    color: rgb(255, 255, 255);
}
.image-data h2{
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    margin: 0.5rem 0;
}
.image-data .button{
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border-radius: 1.25rem;
    color: #333;
    background: #fff;
    text-decoration: none;
    margin: 1.25px;
    transition: all 0.3s ease;
}
.button:hover{
    color: #fff;
    background-color: #c87e4f;
}
.nav-btn-slide{
    height: 3.5rem;
    width: 3.5rem;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}
@media screen and (max-width: 768px) {
    .image-data .text{
        font-size: 0.5rem;
    } 
    .image-data h2{
        font-size: 1.7rem;
    }
}
@media screen and (max-width: 533px) {
    .image-data .text{
        font-size: 0.5rem;
    } 
    .image-data h2{
        font-size: 1rem;
    }
    .image-data .button{
        display: inline-block;
        padding: 0.5rem 1rem;
        border-radius: 1.25rem;
        color: #333;
        background: #fff;
        text-decoration: none;
        margin: 1px;
        transition: all 0.3s ease;
    }
}
/* slaider photo */





.test-viso1{
    background-image: url('../photo/back3.png');
    background-size: cover; /* لجعل الصورة تغطي الـ div بالكامل */
    background-repeat: no-repeat; /* لمنع تكرار الصورة */
    background-position: center; /* لجعل الصورة متمركزة */
    /* height: 20rem; */
    height: calc((100vw / 3) - 10vw);
    margin: auto;
    width: 99.4vw;
    top: 0;
    position: relative;
    width: 99.4vw;
    clip-path: inset(0); /* يضمن أن الصورة لا تخرج عن العنصر */
}
/* إعداد تأثير الارتقاء */
@keyframes riseOnScroll {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* الوضع الافتراضي - العنصر مخفي */
.test-viso1 {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

/* عند ظهور العنصر */
.test-viso1.show {
    animation: riseOnScroll 0.6s ease-out forwards;
}























/* vision and story and goal */
.text-for-infosection{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 1rem;
    margin-top:1.8rem ; /* هامش حول النص */
    margin-bottom: 1.8rem;
}

.text-for-infosection h1{
    color: #224373;
}
.text-for-infosection hr{
    border: 1px;
    border-radius: 0.3rem;
    height: 0.2rem;
    width: 18rem;
    margin: 2px;
    background-color: rgb(204, 89, 23);
}
.info-section {
    display: flex;
    justify-content: center;
    padding: 2rem;
    background-color: #ffffff00;
}
.info-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
    width: 100%;
    gap: 3.5rem;
    /* overflow: hidden; */
}
.info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff6c;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    flex: 1; /* توزيع العناصر بالتساوي */
    /* min-width: 0; */
    padding: 0;
    margin: 0; /* إزالة الهوامش */
    border-radius: 1rem solid;

}
.info-image {
    width: 100%; 
    height: auto;
    opacity: 1;
}
.info-image img {
    width: 100%; 
    height: auto; 
    object-fit: cover;
    border-radius: 10px 10px 0 0
}
.info-text {
    padding: 1rem;
    color: #333;
    text-align: center;
}
.info-text h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0.5rem;
}
.info-text p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1rem;
}
.button {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    margin-top: 0.4rem;
    border-radius: 1rem;
    background-color: #224373;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: #c87e4f;
}

/* تأثير الظهور */
.fade-in {
    opacity: 0; /* جعل العنصر غير مرئي بشكل افتراضي */
    transform: translateY(20px); /* إزاحة العنصر لأسفل قليلاً */
    transition: opacity 1s ease, transform 1s ease; /* إعدادات الانتقال */
}
.fade-in.show {
    opacity: 1; /* جعل العنصر مرئي */
    transform: translateY(0); /* إرجاع العنصر إلى موضعه الأصلي */
}
.fade-in.fade-in.show:hover{
    border-radius: 1rem solid;
    border-color: #5372F0;
    transform: scale(1.1);
}
/* styles.css */

.fade-out {
    opacity: 1; /* جعل العنصر مرئي بشكل افتراضي */
    transform: translateY(0); /* وضع العنصر في موضعه الأصلي */
    transition: opacity 0.5s ease, transform 0.5s ease; /* إعدادات الانتقال */
}
.fade-out.hide {
    opacity: 0; /* جعل العنصر غير مرئي */
    transform: translateY(20px); /* إزاحة العنصر لأسفل قليلاً */
}
@media (max-width: 768px) {
    .info-content {
        flex-direction: column; /* جعل العناصر تتراص عمودياً على الشاشات الصغيرة */
        align-items: center; /* محاذاة العناصر إلى المنتصف */
        gap: 1rem;
    }

    .info-box {
        width: 75%; /* ملء العرض الكامل للشاشة */
        margin-bottom: 1rem; /* مسافة بين العناصر */
    }

    .info-image {
        height: auto; /* جعل الارتفاع تلقائي */
    }
    .text-for-infosection h1{
        font-size: 1.5rem;
    }
    .text-for-infosection hr{
        border: 1px;
        border-radius: 0.3rem;
        height: 0.2rem;
        width: 14rem;
        margin: 2px;
        background-color: rgb(204, 89, 23);
    }
}

/* vision and story and goal */


















/* تنسيق القسم */
.info-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 50px;
    background-color: #f4f4f400;
}

/* تنسيق كل صندوق معلومات */
.info-box {
    flex: 1 1 calc(33.33% - 20px);
    background-color: rgba(255, 255, 255, 0);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    padding: 20px;
}

/* تنسيق الأيقونة */
.icon img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* margin-bottom: 20px; */
}

/* تنسيق النص */
.info-text h2 {
    font-size: 22px;
    color: #002855;
    margin-bottom: 10px;
}

.info-text p {
    font-size: 16px;
    color: #666;
    margin: 5px 0;
}

/* تنسيق اللون للنصوص المهمة */
.info-text p:nth-child(2) {
    color: #ff8c00; /* اللون البرتقالي */
    font-weight: bold;
}

/* تأثير عند التمرير */
.info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* جعل العناصر تتكدس بشكل عمودي على الشاشات الصغيرة */
@media (max-width: 768px) {
    .info-box {
        flex: 1 1 100%; /* جعل كل صندوق يأخذ العرض الكامل */
    }
}



















/* word maneger */

.word-maneger{
    /* margin: 1rem; */
    padding-bottom: 1rem;
    padding-left: 0.6rem;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    /* background: #eef6fa6c; */
    background: #ffffff00;
    /* border-radius: 1rem; */
    box-shadow: 0 0.2rem 0.9rem rgba(0, 0, 0, 0.5);

}
.text-maneger{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1rem;
    gap: 0.2rem;
    margin-bottom: 0;
}
.text-maneger h2{
    color: #ff773de0;
    font-size: 2rem;
    width: 100vw;
}
.text-maneger p{
    color: #224373;
    font-size: 1.3rem;
    font-family: "Zain", serif;

}
.photo-maneger{
    display: inline-block;
    margin: 1rem;
    width: 30%;
    object-fit: contain;
}
.text-maneger {
    width: 50%; /* ضبط العرض حسب الحاجة */
    transition: transform 0.5s ease, opacity 0.5s ease; /* تأثير الانتقال */
    opacity: 0; /* بدء النص كغير مرئي */
}
.fade-in-photo-maneger {
    transform: translateX(100%); /* إزاحة الصورة لليمين */
}
.fade-in-text-maneger {
    transform: translateX(-100%); /* إزاحة النص لليسار */
}
.fade-in-photo-maneger.show,
.fade-in-text-maneger.show {
    opacity: 1; /* جعل العنصر مرئي */
    transform: translateX(0); /* إرجاع العنصر إلى موضعه الأصلي */
}
.fade-in-photo-maneger{
    transform: translateX(0);
}
@media (max-width: 800px){
    .word-maneger{
        flex-direction: column;
    }
    .photo-maneger{
        width: 40%;
        margin: auto;
        margin-top: 1rem;
    }
    .text-maneger p{
        width: 88vw;
    }
}
/* word maneger */






/* الوان المربعات الخاصة بالنصوص */
.sec1{
    background-color: #ffd90056 ;
    padding: 0.6rem;
    border-radius: 1.5rem;
    display: inline-block;
    margin-bottom: 0.2rem;
}
.sec2{
    background-color: #ffae0056 ;
    padding: 0.6rem;
    border-radius: 1.5rem;
    display: inline-block;
    margin-bottom: 0.2rem;
}
.sec3{
    background-color: #00ff2a56 ;
    padding: 0.6rem;
    border-radius: 1.5rem;
    display: inline-block;
    margin-bottom: 0.2rem;
}
.sec4{
    background-color: #0044ff56;
    padding: 0.6rem;
    border-radius: 1.5rem;
    display: inline-block;
    margin-bottom: 0.2rem;
}
.sec5{
    background-color: #175da956;
    padding: 0.6rem;
    border-radius: 1.5rem;
    display: inline-block;
    margin-bottom: 0.2rem;
}
.sec6{
    background-color: #d6596456;
    padding: 0.6rem;
    border-radius: 1.5rem;
    display: inline-block;
    margin-bottom: 0.2rem;
}
.sec7{
    background-color: #B197FC56;
    padding: 0.6rem;
    border-radius: 1.5rem;
    display: inline-block;
    margin-bottom: 0.2rem;
}
/* ............. */


/* From Uiverse.io by mask_guy_0 */ 
.animated-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 36px;
    border: 4px solid;
    border-color: transparent;
    font-size: 16px;
    background-color: inherit;
    border-radius: 40px;
    font-weight: 600;
    color: #002855;
    box-shadow: 0 0 0 2px #002855;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button svg {
    position: absolute;
    width: 24px;
    fill: #002855;
    z-index: 9;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button .arr-1 {
    right: 16px;
  }
  
  .animated-button .arr-2 {
    left: -25%;
  }
  
  .animated-button .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: #002855;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button .text {
    position: relative;
    z-index: 1;
    transform: translateX(-12px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button:hover {
    box-shadow: 0 0 0 12px transparent;
    color: #fff;
    border-radius: 12px;
  }
  
  .animated-button:hover .arr-1 {
    right: -25%;
  }
  
  .animated-button:hover .arr-2 {
    left: 16px;
  }
  
  .animated-button:hover .text {
    transform: translateX(12px);
  }
  
  .animated-button:hover svg {
    fill: #fff;
  }
  
  .animated-button:active {
    scale: 0.95;
    box-shadow: 0 0 0 4px white;
  }
  
  .animated-button:hover .circle {
    width: 220px;
    height: 220px;
    opacity: 1;
  }




/* award-part link */
.awa-par-link{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0; /* العنصر مخفي عند التحميل */
    transform: translateY(50px); /* انتقال إلى الأسفل */
    transition: all 1s ease; /* تأثير سلس */
}
.awa-par-link-text{
    width: 50%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.awa-par-link-icon{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
}
.awa-par-link-icon img{
    transition: all 0.4s ease;
    border-radius: 6px;
}
.awa-img-1{
    display: flex;
    justify-content: space-around;
}
.awa-par-link-text h4{
    font-size: 1.5rem;
    color: #c87e4f;
    margin-bottom: 1rem;
    text-align: right;
}
.awa-par-link-text p{
    font-family: "Zain", serif;
    font-size: 1.3rem;
    font-weight: 500;
    padding-right: 0.5rem;
    text-align: center;
}
.buto-awa-par{
    margin-top: 4rem;
}


.awa-par-link.visible {
    opacity: 1; /* إظهار العنصر */
    transform: translateY(0); /* إعادة العنصر لموقعه */
}

.awa-par-link[data-layout="text-left"] {
    flex-direction: row; /* النص على اليسار والصور على اليمين */
}

.awa-par-link[data-layout="text-right"] {
    flex-direction: row-reverse; /* النص على اليمين والصور على اليسار */
}

/* التأثير على النص */
.awa-par-link-text {
    transform: translateX(50px); 
    transition: all 0.8s ease;
    /* display: none; */
}

.awa-par-link.visible .awa-par-link-text {
    transform: translateX(0); /* إعادة النص لموقعه الأصلي */
}

/* التأثير على الصور */
.awa-par-link-icon {
    display: flex;
    gap: 8px;
    transform: translateX(50px); /* انتقال الصور للخارج */
    transition: all 0.8s ease;
}

.awa-par-link.visible .awa-par-link-icon {
    transform: translateX(0); /* إعادة الصور لموقعها الأصلي */
}


.awa-par-link-icon img:hover {
    transform: scale(1.05); /* تأثير تكبير بسيط عند التمرير */
}

  /* Media Queries لشاشات الهواتف */
  @media screen and (max-width: 1200px) {
    .awa-par-link-icon img{
        width: 30%;
    }
    .awa-par-link-text h4{
        font-size: 1rem;
        margin-bottom: 0.7rem;
    }
    .awa-par-link-text p{
        font-size: 1rem;
    }
}
  @media screen and (max-width: 768px) {
    .awa-par-link {
      flex-direction: column; /* تغيير الاتجاه إلى عمودي */
      align-items: center; /* تصحيح التمركز */
      gap: 16px; /* مسافة بين النص والصور */
    }
  
    .awa-par-link-text {
      text-align: center; /* محاذاة النص في الوسط */
    }
  

    .awa-par-link-icon img{
        transition: all 0.4s ease;
        border-radius: 6px;
    }
    .awa-img-1{
        display: flex;
        justify-content: center;        
    }
    .awa-par-link-text h4{
        font-size: 1.5rem;
        color: #c87e4f;
        margin-bottom: 1rem;
        text-align: center;
    }
    .awa-par-link-text p{
        font-family: "Zain", serif;
        font-size: 1.3rem;
        font-weight: 500;
        padding-right: 0.5rem;
        text-align: center;
    }
    .awa-par-link-text {
        /* margin: 0; */
        /* padding: 0; */
        width: 100%;
      }
    
      .awa-par-link-icon img {
        width: 50%;
        margin: 0.2rem;
      }
      .buto-awa-par {
        margin-top: 1rem;
    }
  }




  /* store */
.store-text{
    padding: 2vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}
.store-text h4{
    color: #c87e4f;
    font-size: 2rem;
}
.store-text p{
    font-family: "Zain", serif;
    font-size: 1.5rem;
    color: #002855;
}

.store-photo{
    display: flex;
    flex-direction: column;
    gap: 4vh;
}
.store-icon{
    display: flex;
    flex-wrap: wrap;
    /* gap: 1rem; */
    justify-content: space-around;
    padding: 1rem;
}
.store-icon .store-icon1{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
.store-icon .store-icon1 img{
    filter: contrast(90%);
    width: calc((120vw / 6) - 6rem);
    display: inline-block;
    transform-origin: center; /* تحديد مركز التكبير */
    transition: all 0.4s ease-in-out;
    min-width: 2rem;
}
.store-icon .store-icon1 img:hover{
    transform: scale(1.2); /* تكبير العنصر بنسبة 20% */
}
.store-icon .store-icon1 p{
    color: #002855;
    font-family: "Zain", serif;
    /* background: #7c98b8; */
    /* padding: 0.2rem; */
    /* border-radius: 0.4rem; */
}
.store-product{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem;
    justify-content: center;
}
.store-product img{
    width: calc((140vw / 6) - 2rem);
    border: 2px solid #ff8c00;
    border-radius: 0.4rem;
    transition: all 0.4s ease-in-out;
}
.store-product img:hover{
    transform: scale(1.2); /* تكبير العنصر بنسبة 20% */
}
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}