@font-face {font-family: 'regular';src: url('Tajawal-Bold.ttf') format('truetype');}
a:active{-webkit-tap-highlight-color: transparent;}
body{overflow-x: hidden;margin: 0;font-family:'regular';color: white;background-color: black;}
.loader-wrapper {width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background:black;z-index:10;}
.loader{width:30%;}
.moonlinks,.loader-wrapper,.media,.swiper-carousel-animate-opacity{display: flex;justify-content: center;align-items: center;}
.vip{width: 12%;position: absolute;left: 50%;transform: translateX(-50%);top:1%}
.logo{width: 30%;display: block;margin:5vh auto 0;}
.moonlinks{flex-direction: column;background-color:#ec1c24;margin-top: -2vh;}
.slare{width: 8vw;}p,h1,h2,h3,h4{text-align: center;}
h1,h2,h3,h4{text-transform: uppercase;font-weight: 100;}
h1,h2,h4{color:#f6e72a;}p{padding:0 5%;}.p{margin:5vh 0;}
h1{margin: 1vh 0;}
.top{width:100%;}
.media{gap: 10vw;}
.link{width:10vw;}
img.link{position: absolute;right: 5%;top:1%}
.swiper-carousel-animate-opacity{flex-direction: column;}
.swiper-carousel {padding-bottom: 32px;width:90%;}
.swiper-slide img{width: 80%;}
.swiper{border:2px solid white;border-radius: 30px;}
.swiper1{background-color:#0174bb;}
.swiper2{background-color:#ffdd00;}
h1{font-size:1.8em;}
h2{font-size:1.6em;}
h3{opacity: 0;font-size:1.3em;}
.swiper2 h3{color: black;}
.swiper-slide-active h3{opacity:1;}
.swiper-slide img{filter: blur(3px);}
.swiper-slide-active img{filter: blur(0);}
.red{margin-top:-13vh;}h4{font-size:1.9em;padding:0 10%;}
footer a{text-decoration: none;color: white;}
.effect{position: absolute;top:60%;left: 50%;transform: translate(-50%,-50%);width:100%;}
.swiper-slide .abs{position: absolute;width:28%;bottom:25%;z-index:2;opacity:0;}
.abs-left{left:20%;}
.abs-right{right:20%;}
.swiper-div{position:relative;}
.abs-a{position: absolute;width:20%;animation:float 5s ease-in-out infinite;}
.a-1{left:0%;z-index: 2;}
.a-2{right:30%;top:-10%;}
.a-3{right:0%;z-index:2;}
.a-4{right:5%;z-index:2;top:80%;width:30%;}
.a-5{left:5%;z-index:2;top:85%;width:30%;}
.a-6{left:0%;z-index:2;top:35%;width:30%;}
.swiper-slide-active .abs-left {
  animation: anim 0.8s ease forwards, float 3s ease-in-out infinite 0.8s;
}
p{z-index:3;position:relative;}
.swiper-slide-active .abs-right {
  animation: anim 0.8s ease forwards, float 4s ease-in-out infinite 0.8s;
}

@keyframes anim{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(.95);
  }
}
@media only screen and (min-width: 600px){
.vip{width: 7%;}
.logo{width:20%;}
.loader{width:10%;}
.slare{width: 5vw;}
.link{width:7vw;}
.effect{top: 70%;}
h1{font-size:2.3em;}
h2{font-size:2em;}
h3{font-size:1.7em;}
p{font-size:1.3em;}.p{margin:9vh 0;}
.swiper-slide .abs{bottom:15%;}
.red{margin-top:-20vh;}h4{font-size:3em;}
}
@media only screen and (min-width: 992px) {
.vip{width: 4%;}
.logo{width:15%;}
.slare{width: 3vw;}
.swiper-carousel {padding-bottom: 32px;max-width: 1200px;}
.swiper-slide img{width:60%;}
.media{gap: 5vw;}
.link{width:5vw;}
h3{font-size:2em;}
.effect{width:80%;top: 68%;}
.swiper-slide .abs{width:20%;bottom:15%;}
.abs-left{left:25%;}
.abs-right{right:25%;}
.red{margin-top:-40vh;}h4{font-size:4em;}
.abs-a{position: absolute;width:10%;  animation:float 5s ease-in-out infinite;}
.a-1{left:12%;z-index: 2;top:-5%;}
.a-2{right:30%;top:-10%;}
.a-3{right:12%;z-index:2;}
.a-4{right:17%;z-index:2;top:85%;width:15%;}
.a-5{left:17%;z-index:2; top:90%;width:14%;}
.a-6{right:10%;z-index:2;top:35%;width:14%;}
}
@media only screen and (min-width: 1700px) {
.vip{width: 3%;}
.logo{width: 10%;}
.slare{width: 2vw;}
.link{width:3vw;}
.red{margin-top:-55vh;}
.a-4{top:80%;}
.a-5{top:80%;}
}