@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.swiper-container {
  width: 100%;
  height: 100vh;
}
.swiper-container .swiper-wrapper .swiper-slide {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.swiper-container .swiper-wrapper .swiper-slide p {
  position: absolute;
  top: 40%;
  left: 10%;
  color: #ffffff;
  font-size: 4vw;
  font-weight: 500;
    z-index: 3;
    letter-spacing: 3px;
    line-height: 1.6em;
}
        .swiper-container .swiper-wrapper .swiper-slide p span {font-family: 'Red Hat Display', sans-serif; text-transform: capitalize; font-weight: 700;}
    
.swiper-container .swiper-wrapper .swiper-slide-active p {
  animation-name: fade-in;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: both;
}    
      
 
     .swiper-container .swiper-wrapper .swiper-slide p {
  position: absolute;
  top: 50%;
  left: 5%;
  color:#FFF;
  font-size: 4vw;
  font-weight: bold;
}
        
              

 .swiper-slide::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
/*   background-color: rgba(255, 255, 255, .4);*/
     background-color: rgba(0, 0, 0, .2);
    background-image: radial-gradient(#555 20%, transparent 0), radial-gradient(#555 20%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 4px 4px;
}
         @media screen and (max-width: 768px) {   
   .swiper-container {
  width: 100%;
  height: 30vh;
}
             .swiper-slide::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
/*   background-color: rgba(255, 255, 255, .4);*/
     background-color: rgba(0, 0, 0, .1);
    background-image: none;
    background-position: 0 0, 10px 10px;
    background-size: 4px 4px;
}
             }