body {
  overflow-x: hidden;
}
.mySlides {
  display:none;
  height: 100vh;
  animation: 1s fade backwards;   
}

 

.mySlides:before {
   background-repeat: repeat;
  content: '';
  scale: 1;
  position: absolute;
  opacity: 0.1;
  top: 0px;
  left: 0px;
  width: 110%;
  height: 100vh;
  z-index: -1;
  animation: 10s moving-bg linear;
}
.mySlides:nth-child(1):before {
background: url("../img/123.jpg"), #fcfcfc;

}
.mySlides:nth-child(2):before  {
  background: url("../img/123.jpg"), #fcfcfc;

}
.mySlides:nth-child(3):before  {
  background: url("../img/123.jpg"), #fcfcfc;

}

.mySlides div {
  flex:1;
  min-width: 0;
}
.mySlides div:nth-child(1) {
top: 35%;
  left: 10%;
  position: relative;
}
.mySlides div:nth-child(2) {
  top:20%;
  right: 3%;
  position: relative;
}
.mySlides img {
  object-fit: contain;
  width: 100%;
  height: 50%;
   animation: 2s 0.2s fade2 backwards;   
   border-radius: 5px;
}
.mySlides h1 {
animation: 1s 0.5s slide-right backwards;
font-family: Poppins, sans-serif;
font-size: 40px;
margin-top: -140px;
font-weight: 800;

}
.mySlides h2 {
  animation: 1s 0.5s slide-right backwards;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  margin-top: -140px;
font-weight: 800;

  }
.mySlides p {
animation: 1s 1.4s slide-up backwards;
font-family: Poppins, sans-serif;
width: 75%;
}
.mySlides button {
animation: 1.5s 2.5s slide-up backwards;

  font-family: Poppins, sans-serif;
  background: #232E50;
  color: #fff;
  padding: 15px 40px;
  border: none;
  border-radius: 4px;
  box-shadow: 3px 6px 6px 0px #0000003d;
}


.w3-left, .w3-right {
  position: absolute;
  top: 50%;
  background: #0000003d;
  padding: 20px 50px;
  border-radius: 6px;
  box-shadow: 3px 7px 13px #0000002b;
}

.w3-right {right: 1%;}
.w3-left {left: 1%;}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

@keyframes slide-right {
from {
  margin-left: -4%;
  opacity: 0;
}
to {
  margin-left: 0%;
  opacity: 1;
}
}

@keyframes slide-up {
from {
  transform: translateY(25px);
  opacity: 0;
}
to {
  transform: translateY(0px);
  opacity: 1;

}
}
@keyframes moving-bg {
 from {
  margin-left: -8%;

}
to {
  margin-left: 0%;
 
}
}
@keyframes fade {
from {
  opacity: 0.5;
}
to {
  opacity: 1;

}

}
@keyframes fade2 {
from {
  opacity: 0;
}
to {
  opacity: 1;

}

}


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


  .mySlides {
    flex-direction: column;
    height: auto;
}
.mySlides div:nth-child(1),.mySlides div:nth-child(2) {
top: 0;
  left: 0;
  position: relative;
  padding:10px;
}
.mySlides p {
width: 100%;
font-size: 14px;
  color: #545454;
}
  .mySlides:before {  
    width: 100%;
    height: 100vh;
    z-index: -1;
    animation: none;
  }

.mySlides h1 {
  animation: 1s 0.5s slide-right backwards;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  margin-top: 40px;
  }
  .mySlides h2 {
    animation: 1s 0.5s slide-right backwards;
    font-family: Poppins, sans-serif;
    font-size: 40px;
    margin-top: 40px;
    }
  .mySlides p {
  animation: 1s 1.4s slide-up backwards;
  font-family: Poppins, sans-serif;
  width: 75%;
  }
}