@font-face {
    font-family: fursanFont;
    src: url("../fonts/formal-script-421-bt.ttf");
    src: url("../fonts/formal-script-421-bt.woff");
}

    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: transparent;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

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

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

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

   
    .mySwiper-1 .swiper-pagination-bullet {
  
      width: 34px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      color: rgb(127, 121, 97);
      opacity: 1;
      background: hsla(0, 0%, 0%, 0);
      font-weight: bold;
    }

    .mySwiper-1 .swiper-pagination-bullet-active {
      color: rgb(177 147 9);
      background: hsla(0, 0%, 0%, 0);
      width: fit-content;
      font-size: 22px;
    }
    .mySwiper-2{
      height: 90% !important;
    }

    .mySwiper-2 .swiper-pagination-bullet {
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      color: #ffffff;
      opacity: 1;
      background: rgba(255, 255, 255, 0.2);
    }

    .mySwiper-2 .swiper-pagination-bullet-active {
      color: #fff;
      background: rgb(205, 167, 41);
    }

    .pilot-card{
      background-image: #000;
      height: 70%;
      width: 44%;
      border-radius: 22px;
      background-image: url(../images/card-bg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      border-radius: 22px;
      box-shadow: 11px 14px 21px #00000029;
    }

    .mySwiper-2 .swiper-pagination-bullets.swiper-pagination-horizontal > span:nth-child(1)::before{
       
      height: 77px;
      width: 360px;
      content: '';
      position: absolute;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-image: url(../images/pilots/2020-pilots.png);
      z-index: -1;
      top: -52px;
      left: 0;
      right: 0;
      margin: auto;
    }

    .mySwiper-2.team-2 .swiper-pagination-bullets.swiper-pagination-horizontal > span:nth-child(1)::before{
       
       height: 77px;
       width: 360px;
       content: '';
       position: absolute;
       background-position: center;
       background-size: cover;
       background-repeat: no-repeat;
       background-image: url(../images/pilots/2021-pilots.png);
       z-index: -1;
       top: -52px;
       left: 0;
       right: 0;
       margin: auto;
     }
   
     
    .mySwiper-2.team-3 .swiper-pagination-bullets.swiper-pagination-horizontal > span:nth-child(1)::before{
       
       height: 77px;
       width: 360px;
       content: '';
       position: absolute;
       background-position: center;
       background-size: cover;
       background-repeat: no-repeat;
       background-image: url(../images/pilots/2022-pilots.png);
       z-index: -1;
       top: -52px;
       left: 0;
       right: 0;
       margin: auto;
     }

    .mySwiper-2 .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
      margin: 0 var(--swiper-pagination-bullet-horizontal-gap,14px);

    }

    
.pilot-img {
  top: 38px;
    width: 60%;
    left: -210px;
    position: absolute;
   
}

  .card-image-pilot{
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
  }

  
.pilot-number{
  position: absolute;
  font-size: 122px;
  color: #ad8229;
  font-family: 'fursanFont';
  top: 10px;
    left: 78px;

}


.pilot-details{
  font-size: 14px;
  text-align: start;
  font-weight: 300;
  /* font-family: 'Roboto'; */
  color: #f4f4f3;
  z-index: 2;
  left: 13%;
}

.pilot-name{
  font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    text-shadow: 0px 4px 6px black;
}

.pilot-title{
  color: #da9e22;
  text-transform: uppercase;
  line-height: 0;
}


.plane-position{
  text-align: center;
  font-size: 16px;
  transform: scale(0.95);
  background-image: url(../images/plane-bg.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: #ad8229;
  text-indent: 2px;
}

.plane{
  width: 50px;
  height: 45px;
  background-image: url(../images/icons/active-plans.png);
  filter: grayscale();
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin: 2px 11px;
  text-indent: 20px;
  font-family: 'fursanFont';
  display: inline-block;


}
.plane.active{
  background-image: url('../images/icons/active-plans.png');

  
  filter: grayscale(0);
}
.plane.s1d{
  display: block;
  margin: 7px auto;
  padding: 3px 10px;
}

.plane.active::before{
  content: '';
  position: absolute;
  height: 49px;
  width: 49px;
  border-radius: 32px;
  background: #ffffff14;
  left: 0;
  right: 0;
  margin: auto;
  animation: mymove 2s infinite ease-in-out;
  transform: scale(0);
   
}

 

@keyframes mymove{
 0%{
  transform: scale(0);
 } 50%{
  transform: scale(1);
 } 100%{
  transform: scale(0);
 }
}
.plane.active::after{
  content: '';
  position: absolute;
  height: 34px;
  width: 33px;
  border-radius: 32px;
  background: #ffffff14;
  left: 0;
  right: 0;
  margin: auto;
  top: 7px;
  animation: mymove 2s infinite ease-in-out;

}


.h60{
  height: 55vh;
  padding: 43px;

}
.up-30{
  position: relative;
    top: -30px;
}
 
.wrapper-pilot{
  height: 100%;
  display: flex;
  align-items: end;
}

.wrapper-pilot .row{
  padding: 26px 0px;

}

.swiper-slide .pilot-img {
  opacity: 0;
  transform: translateX(-30px);
  transition: all .5s ease-in-out;
}

.swiper-slide .swiper-slide-active .pilot-img {
  opacity: 1;
  transform: translateX(0px);
  transition: all .5s ease-in-out;
}

.swiper-slide .pilot-title ,.swiper-slide .pilot-name , .swiper-slide .pilot-des    {
  opacity: 0;
  transform: translateY(20px);

}

.swiper-slide .swiper-slide-active .pilot-title {
  opacity: 1;
  transform: translateY(0px);
  transition: all .4s ease-in;
}

.swiper-slide .swiper-slide-active .pilot-name {
  opacity: 1;
  transform: translateY(0px);
  transition: all .5s ease-in;
}

.swiper-slide .swiper-slide-active .pilot-des {
  opacity: 1;
  transform: translateY(0px);
  transition: all .6s ease-in;
}
 
 
 
 
 
/* small screen */

    @media only screen and (max-width: 768px){

      .pilot-card{
      background-image: #000;
      height: 70%;
      width: 73%;
      border-radius: 22px;
      background-image: url(../images/card-bg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      border-radius: 22px;
      box-shadow: 11px 14px 21px #00000029;
    }
    .pilot-number {
      position: absolute;
      color: #ad8229;
      font-family: 'fursanFont';
      top: -50px;
      left: -30px;
    }
    .card-image-pilot{
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    }.pilot-img {
    top: -96px;
    width: 89%;
    bottom: 0px;
    left: 0px;
    right: 0;
    margin: auto;
    overflow: visible;
}.pilot-number {
      position: absolute;
      color: #ad8229;
      font-family: 'fursanFont';
      top: -30px;
    left: 20px;
    }
    .pilot-details{
      top: 26px;
      /* scale: 0.8; */
      left: 0;
      }
      .pilot-number {
        font-size: 92px;
      }
      .card-image-pilot.sm{

        width: 90%;
      }

    }
    @media only screen and (max-width: 468px){
      .pilot-details{ 
      margin: 0 !important; 
      }
      .pilot-plane{
         /* transform: scale(0.8); */
         padding: 24px;
      }
.wrapper-pilot {
  
    transform: scale(0.8);
}

    }