@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@200;300;400;500;600;700;800;900&display=swap');
* {
  font-family: 'Urbanist', sans-serif;

}

.imaged{
  transition: all 0.4s ease-in-out;
  filter: grayscale(100%);
}

.imaged:hover{
  filter: grayscale(0);
}

h1 span{
  font-weight: 600 !important;
}
.fa-arrow-right{
transform: rotate(-30deg);
}

.rightl{
  transform: rotate(180deg); 
}

/* Pre Loader  */
#preloader { position: fixed; top: 0; left: 0;  width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 9999; display: flex; align-items: center; justify-content: center;}
.loader { position: relative; height: 40px; width: 6px; color: #FFF; animation: paddles 0.75s ease-out infinite; }
.loader:before { content: ""; position: absolute; margin: 0 auto; left: 0; right: 0; top: 15px; width: 12px; height: 12px; background-color: greenyellow; border-radius: 50%; animation: ballbounce 0.6s ease-out infinite; }

@keyframes paddles {
  0% { box-shadow: -25px -10px, 25px 10px }
  50% { box-shadow: -25px 8px, 25px -10px }
  100% { box-shadow: -25px -10px, 25px 10px }
}

@keyframes ballbounce {
  0% { transform: translateX(-20px) scale(1, 1.2) }
  25% { transform: scale(1.2, 1) }
  50% { transform: translateX(15px) scale(1, 1.2) }
  75% { transform: scale(1.2, 1) }
  100% { transform: translateX(-20px) }
}

.slider-frame{
      overflow: hidden;
      height: 100%;
      width: 600px;
      float: right;
  }
 
  /*---------- SLIDE ANIMATION --------------*/
 
 
  @keyframes slide_animation{
      0% {left:0px;}
      10% {left:0px;}
      20% {left:600px;}
      30% {left: 600px;}
      40% {left: 1200px;}
      50% {left: 1200px;}
      60% {left: 600px;}
      70% {left: 600px;}
      80% {left: 0px;}
      90% {left: 0px;}
      100% {left:0px;}
  }
 
  @-webkit-keyframes slide_animation{
      0% {left:0px;}
      10% {left:0px;}
      20% {left: 600px;}
      30% {left: 600px;}
      40% {left: 1200px;}
      50% {left: 1200px;}
      60% {left: 600px;}
      70% {left: 600px;}
      80% {left: 0px;}
      90% {left: 0px;}
      100% {left:0px;}
  }
 
  .slide-images{
      width: 1800px;
      height: 85%;
      margin: 0 0 0 -1200px;
      position: relative;
      -webkit-animation-name: slide_animation;
      animation-name: slide_animation;
      -webkit-animation-duration: 33s;
      animation-duration: 33s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
      animation-direction: alternate;
      -webkit-animation-play-state: running;
      animation-play-state: running;
  }
 
  .img-container{
      height: 100%;
      width: 600px;
      position: relative;
      float: left;
  }

  @media screen and (max-width: 480px){
    .slider-frame{
      overflow: hidden;
      height: 100%;
      width: 400px;
      float: right;
  }
 
  /*---------- SLIDE ANIMATION --------------*/
  section{
    height: 100% !important;
   }
 
  @keyframes slide_animation{
      0% {left:0px;}
      10% {left:0px;}
      20% {left:400px;}
      30% {left: 400px;}
      40% {left: 800px;}
      50% {left: 800px;}
      60% {left: 400px;}
      70% {left: 400px;}
      80% {left: 0px;}
      90% {left: 0px;}
      100% {left:0px;}
  }
 
  @-webkit-keyframes slide_animation{
      0% {left:0px;}
      10% {left:0px;}
      20% {left: 400px;}
      30% {left: 400px;}
      40% {left: 800px;}
      50% {left: 800px;}
      60% {left: 400px;}
      70% {left: 400px;}
      80% {left: 0px;}
      90% {left: 0px;}
      100% {left:0px;}
  }
 
  .slide-images{
      width: 1200px;
      height: 85%;
      margin: 0 0 0 -800px;
      position: relative;
      -webkit-animation-name: slide_animation;
      animation-name: slide_animation;
      -webkit-animation-duration: 33s;
      animation-duration: 33s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
      animation-direction: alternate;
      -webkit-animation-play-state: running;
      animation-play-state: running;
  }
 
  .img-container{
      height: 100%;
      width: 400px;
      position: relative;
      float: left;
  }
  }

  @media only screen and (min-width: 595px) and (max-width: 1155px) {

 
  /*---------- SLIDE ANIMATION --------------*/
 section{
  height: 100% !important;
 }
 
  }