@import url(/style.css);

/* Section One */
.section-one-about {
  height: 100vh;
  width: 100%;
  background-image: url(/wp-content/themes/astra-child/images/About/front-view-desk-concept-with-copy-space.jpg);
  background-position: bottom;
  background-size: cover;
  text-align: center;
  cursor: url(/assets/About/microscope_cursor_32x32.png) 16 16, auto;
}
.section-one-about img {
  position: absolute;
  width: 30vw;
  top: 17vh;
  left: 58vw;
  /* margin-bottom: 5vh; */
}

/* New Code Start for Animation*/

.section-one-about .letters {
  padding-top: 20vh;
  display: flex;
  gap: 0px;
  justify-content: center;
  align-items: center;
}

.section-one-about .letter-box {
  position: relative;
  height: 10vw;
  overflow: hidden;
  display: inline-block;
}

.section-one-about .inner-sequence {
  display: block;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}
.section-one-about .border-right {
  border-right: 0.2vw solid white;
}
.section-one-about .letters:hover .inner-sequence {
  animation-play-state: paused;
}

.section-one-about .scroll-down {
  animation-name: scrollDown;
}

.section-one-about .scroll-up {
  animation-name: scrollUp;
}

.section-one-about .char {
  font-size: 10vw;
  font-weight: bold;
  font-family: "Gilroy-Black";
  color: black;
  height: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.5vw;
  white-space: nowrap;
}

.section-one-about .char.yellow {
  color: #f4a300;
}
.section-one-about .char.white {
  color: white;
}

@keyframes scrollDown {
  0% {
    transform: translateY(-448px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-448px);
  }
}

/* New Code End for Animation*/

@media (max-width: 1024px) {
  .section-one-about img {
    width: 35vw;
    top: 22vh;
    left: 58vw;
  }
  /* New Code Start for Animation*/

  .section-one-about .letter-box {
    height: 13vw;
  }

  .section-one-about .char {
    font-size: 10vw;
    height: 8vw;
    margin: 0 0.5vw;
  }
  /* New Code End for Animation*/
}

@media (max-width: 768px) {
  .section-one-about img {
    width: 40vw;
    top: 23vh;
    left: 60vw;
  }
  /* New Code Start for Animation*/

  .section-one-about .letter-box {
    height: 15vw;
  }

  .section-one-about .char {
    font-size: 12vw;
    height: 10vw;
    margin: 0 0.5vw;
  }
  /* New Code End for Animation*/
}

@media (max-width: 480px) {
  .section-one-about img {
    width: 60vw;
    top: 34vh;
    left: 60vw;
  }
    .section-one-about,
    .letters {
      padding-top: 10vh;
    }
  /* New Code Start for Animation*/

  .section-one-about .letter-box {
    height: 18vw;
  }

  .section-one-about .char {
    font-size: 15vw;
    height: 12vw;
    margin: 0 0.5vw;
  }
  /* New Code End for Animation*/
}

/* Section Two */
.section-two-about {
  width: 100%;
  background-color: rgba(233, 165, 8, 255);
  color: black;
  padding: 2vw 0;
}
.section-two-about .counters {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.section-two-about .counter {
  text-align: center;
}

.section-two-about .counter h1 {
  font-family: Gilroy-Regular;
  font-size: 10vw;
}

.section-two-about .counter p {
  font-size: 2vw;
  font-family: Gilroy-Black;
}

@media (max-width: 768px) {
  .section-two-about {
    padding: 5vw 0;
  }

  .section-two-about .counters {
    flex-direction: column;
    gap: 5vw;
  }

  .section-two-about .counter h1 {
    font-size: 15vw;
  }

  .section-two-about .counter p {
    font-size: 4vw;
  }
}

@media (max-width: 480px) {
  .section-two-about {
    padding: 5vw 0;
  }

  .section-two-about .counter h1 {
    font-size: 20vw;
  }

  .section-two-about .counter p {
    font-size: 6vw;
  }
}

/* Section Three */

.section-three-about {
  height: 100%;
  width: 100vw;
  background-color: black;
  color: white;
  border-bottom: 3px solid white;
}

.section-three-about > .container {
  width: 100vw;
  height: 100%;
  background-image: url(/wp-content/themes/astra-child/images/About/About\ us-02.png);
  background-position: 92%;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-three-about > .container p {
  font-size: 1.5vw;
  line-height: 1.5;
  padding: 15vh 25vw;
  text-align: justify;
  font-family: Gilroy-Regular;
}

@media (max-width: 1024px) {
  .section-three-about > .container {
    width: 100vw;
    height: 100%;
    background-image: url(/wp-content/themes/astra-child/images/About/About\ us-02.png);
    background-position: 92%;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .section-three-about > .container p {
    font-size: 2.5vw;
    padding: 5vh 38vw 5vh 5vw;
  }
}

@media (max-width: 768px) {
  .section-three-about > .container p {
    font-size: 3vw;
    padding: 5vh 38vw 5vh 5vw;
  }
}

@media (max-width: 480px) {
  .section-three-about > .container p {
    font-size: 3vw;
    padding: 5vh 38vw 5vh 5vw;
  }
}