.banner-one {
  height: 30em;
  width: 100vw;
  background-color: white;
  background-repeat: repeat-x;
  position: relative;
  object-fit: cover;
  overflow: hidden;
  white-space: nowrap;
  margin: 12rem 0;
}


.bannertext-one {
  display: flex;
  /* position:relative; */
  width: 100%;
  background-color: white;
  color: var(--prime-fn-clr);
  font-size: 8em;
  justify-content: center;
}

.banner-one img {
  height: 100%;
  position: absolute;
  /* animation-name: bannerslide;
    animation-duration: infinite;
    animation-direction: reverse; */
  animation: bannerslide-one 25s linear infinite;
}

.bannertext-one p {
  font-size: 6rem;
  transform: translateY(50px);
  line-height: 5.5rem;
}

@keyframes bannerslide-one {
  from {
    left: -80%;
  }

  to {
    left: 100%;
  }
}

.banner-two {
  height: 30em;
  width: 100vw;
    background-color: white;
  background-repeat: repeat-x;
  position: relative;
  object-fit: cover;
  overflow: hidden;
  white-space: nowrap;
  margin: 5rem 0;
}


.bannertext-two {
  display: flex;
  /* position:relative; */
  width: 100%;
  background-color: white;
  font-size: 8em;
  justify-content: center;
}

.banner-two img {
  height: 100%;
  position: absolute;
  /* animation-name: bannerslide;
    animation-duration: infinite;
    animation-direction: reverse; */
  animation: bannerslide-two 17s linear infinite;
}

@keyframes bannerslide-two {
  from {
    left: 1%;
  }

  to {
    left: -100%;
  }
}

.bannertext-two p {
   flex-direction: column;
  font-size: 6rem;
    transform: translateY(50px);
   line-height: 5.5rem;
   text-transform: uppercase;
}


.banner-three {
  height: 30em;
  width: 100vw;
  background-color: white;
  background-repeat: repeat-x;
  position: relative;
  object-fit: cover;
  overflow: hidden;
  white-space: nowrap;
}


.bannertext-three {
  display: flex;
  /* position:relative; */
  width: 100%;
  background-color: var(--ath-bg-cl);
  color: var(--prime-fn-clr);
  font-size: 8em;
  justify-content: center;
}

.banner-three img {
  height: 100%;
  position: absolute;
  /* animation-name: bannerslide;
    animation-duration: infinite;
    animation-direction: reverse; */
  animation: bannerslide-three 25s linear infinite;
}

@keyframes bannerslide-three {
  from {
    left: 100%;
  }

  to {
    left: -100%;
  }
}

.bannertext-three p {
  transform: translateY(200px);
}

.banner-four {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100vw;
  background-color: black;
  justify-content: center;
  text-align: center;
  padding: 8rem 0;
  margin: 6em 0;
}

.banner-four h5 {
  color: whitesmoke;
  background-color: black;
  font-size: 10rem;
}

.banner-four p {
  color: whitesmoke;
  font-size: 3rem;
}

.banner-five {
  height: 25rem;
  width: 100%;
  position: relative;
  object-fit: cover;
  margin-top: 6rem;
}

.banner-five img {
  width: 100%;
}


.banner-six {
  height: 30em;
  width: 100vw;
  background-color: white;
  background-repeat: repeat-x;
  position: relative;
  object-fit: cover;
  overflow: hidden;
  white-space: nowrap;
  margin: auto;
}


.bannertext-six {
  display: flex;
  /* position:relative; */
  width: 100%;
  background-color: var(--ath-bg-cl);
  color: var(--prime-fn-clr);
  font-size: 8em;
  justify-content: center;
}

.banner-six img {
  height: 100%;
  position: absolute;
  /* animation-name: bannerslide;
    animation-duration: infinite;
    animation-direction: reverse; */
  animation: bannerslide-six 30s linear infinite;
}

@keyframes bannerslide-six {
  from {
    left: 50%;
  }

  to {
    left: -50%;
  }
}


.bannertext-seven {
  display: flex;
  /* position:relative; */
  width: 100%;
  background-color: white;
  color: var(--prime-fn-clr);
  font-size: 8em;
  justify-content: center;
}

.banner-seven img {
  height: 100%;
  position: absolute;
  /* animation-name: bannerslide;
      animation-duration: infinite;
      animation-direction: reverse; */
  animation: bannerslide-seven 30s linear infinite;
}

@keyframes bannerslide-six {
  from {
    left: 30%;
  }

  to {
    left: -50%;
  }
}



.bannertext-eight {
  display: flex;
  /* position:relative; */
  width: 100%;
  background-color: white;
  color: var(--prime-fn-clr);
  font-size: 8em;
  justify-content: center;
}

.banner-eight img {
  height: 100%;
  position: absolute;
  /* animation-name: bannerslide;
        animation-duration: infinite;
        animation-direction: reverse; */
  animation: bannerslide-six 30s linear infinite;
}

@keyframes bannerslide-eight {
  from {
    left: 70%;
  }

  to {
    left: -50%;
  }
}


@media (max-width: 768px) {
  .banner-one {
    width: 100%;
    background-color: white;
    background-repeat: repeat-x;
    position: relative;
    object-fit: cover;
    overflow: hidden;
    white-space: nowrap;
    margin: 4em 0.2em;
  }

  .bannertext-one {
    display: flex;
    /* position:relative; */
    width: 100%;
    background-color: white;
    color: var(--prime-fn-clr);
    font-size: 2em;
    justify-content: center;
  }

  .banner-one img {
    height: 100%;
    position: absolute;
    /* animation-name: bannerslide;
    animation-duration: infinite;
    animation-direction: reverse; */
    animation: bannerslide-one 5s linear infinite;
  }

  .bannertext-one p {
    font-size: 2rem;
    transform: translateY(50px);
    line-height: 5.5rem;
  }

  @keyframes bannerslide-one {
    from {
      left: -80%;
    }

    to {
      left: 100%;
    }
  }

  .banner-two {
    width: 100vw;
    background-color: white;
    background-repeat: repeat-x;
    position: relative;
    object-fit: cover;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 4rem;
  }

  .bannertext-two {
    display: flex;
    /* position:relative; */
    width: 100%;
    background-color: white;
    font-size: 1em;
    justify-content: center;
  }

  .banner-two img {
    height: 100%;
    position: relative;
    /* animation-name: bannerslide;
    animation-duration: infinite;
    animation-direction: reverse; */
    animation: bannerslide-two 4s linear infinite;
  }

  @keyframes bannerslide-two {
    from {
      left: 10%;
    }

    to {
      left: -100%;
    }
  }

  .bannertext-two p {
    transform: translateY(200px);
  }

.banner-three {
  width: 100vw;
  background-color: white;
  background-repeat: repeat-x;
  position: relative;
  object-fit: cover;
  overflow: hidden;
  white-space: nowrap;
}


.bannertext-three {
  display: flex;
  /* position:relative; */
  width: 100%;
  background-color: var(--ath-bg-cl);
  color: var(--prime-fn-clr);
  font-size: 8em;
  justify-content: center;
}

.banner-three img {
  height: 100%;
  position: absolute;
  /* animation-name: bannerslide;
    animation-duration: infinite;
    animation-direction: reverse; */
  animation: bannerslide-three 7s linear infinite;
}

@keyframes bannerslide-three {
  from {
    left: -100%;
  }

  to {
    left: 100%;
  }
}

.bannertext-three p {
  transform: translateY(200px);
}



.banner-four{
padding: 2rem;
}

.banner-four h5 {
  font-size: 2.2em;
}
.banner-four p {
  font-size: 1em;
}

.banner-five {
 display: none;
}

}