*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

        font-family: "ADLaM Display", system-ui;
        font-weight: 400;
        font-style: normal;
      
}
*
{
    font-family: "Tajawal", sans-serif !important;
}
.tajawal-extralight {
    font-family: "Tajawal", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .tajawal-light {
    font-family: "Tajawal", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .tajawal-regular {
    font-family: "Tajawal", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .tajawal-medium {
    font-family: "Tajawal", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .tajawal-bold {
    font-family: "Tajawal", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .tajawal-extrabold {
    font-family: "Tajawal", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .tajawal-black {
    font-family: "Tajawal", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
:root
{
    --bg-ads-section:#262626;
    --color-ads-section:#FAFAFA;
    --main-text-color:#6c5ce7;

}

.h-container
{
  max-width: 100%;
  width: 90%;
  margin: 0 auto;
}

/* customize stylign */
#customize
{
    background-color: #f1f2f6;
    position: fixed;
    height: 100vh;
}
.cus-main li
{
    background-color: red;
    color: #f1f2f6;
    text-align: center;
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}


/* MEDUA QUARE  */
@media (max-width:600px) {
    .h-container
    {
          width: 100%;
         padding: 0px 15px;

    }
}




/* تغيير شكل زر التالي */
.swiper-button-next {
            width: 50px !important;
            height: 50px !important;
            padding: 20px !important;
            background-color: var(--main-text-color) !important;
            color: #fff !important;


            position: absolute !important;
            top: -40px !important;
            right: 0 !important;

  }
  
  .swiper-button-prev {
    position: absolute !important;
    top: -15px !important;
    left: calc(100% - 150px) !important; 

    width: 50px !important;
    height: 50px !important;
    padding: 20px !important;
    background-color: var(--main-text-color) !important;
    color: #fff !important;
  }
  
  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 25px !important; /* حجم الأيقونة */
  }


  .swiper
  {
    /* overflow: visible !important; */
  }



  
*/
.swiper-button-next {
    position: absolute !important;
     right: 100px !important; /* المسافة من اليمين */
     top: -50px !important; /* جعله في المنتصف */
    transform: translateY(-50%); /* تصحيح التوسيط */
}

/* تحريك زر السابق */
.swiper-button-prev {
    position: absolute !important;

  right: 100px !important; /* المسافة من اليسار */
  top: -50px; 
  transform: translateY(-50%);
}

.main_text
{
  position: absolute;
  right: 152px;
  top: -62px;
  font-size: 22px;
  background-color: var(--main-text-color);
  color: #fff;
  font-weight: bold !important;
  padding: 11.5px;
  width: calc(100% - 159px);
    
}