@font-face {
    font-family: bahij;
    src: url(../font/alfont_com_AlFont_com_TheSansArabic-Light-1.otf);
}

*{
    box-sizing: border-box;
    font-family: "bahij" , sa;
}

.active-nav-btn{
    color: #C3AF7D;
    font-weight:bold;
}


.not-active-nav-btn{
    color: #1B1717;
    font-weight:500;
}

.not-active-nav-btn:hover{
     color: #C3AF7D;
}

/* hero section */


    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.banner-content{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}


.layout-hero{
height: 100%;
width: 100%;
}




@keyframes slideLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes slideRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


.animate-slide-left {
    animation: slideLeft 2s forwards;
}

.animate-slide-right {
    animation: slideRight 2s forwards;
}

.animate-fade-in {
    animation: fadeIn 1.5s 1.5s forwards;
}


  .mySwiper2  .swiper-slide {
      font-size: 18px;
      background:white;
      display: flex;
      border-radius: 24px;
      width: auto;
      height: max-content;
    }

  .mySwiper2  .swiper-slide img {
    width: 100%;
    height: 200px;
    border-radius: 24px 24px 0px 0px;
      object-fit: cover;
    }



    /*  .mySwiper3 */


 .mySwiper3   .swiper {
      width: 100%;
      height: 100%;
    }

  .mySwiper3  .swiper-slide {
      font-size: 18px;
      background:white;
      display: flex;
      border-radius: 24px;
      overflow: hidden;
      width: auto;
      height: max-content;
    }

    .mySwiper3  .swiper-slide div {
      height: 300px;

    }

.mySwiper3 .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.mySwiper3 .swiper-slide iframe {
  width: 100%;
  height: 100% !important;
}