.about-us-section {
  .stroke-mobile {
    display: none;
  }

  /* top container */
  .slide-from-left {
    animation: aboutslideLeft 3s ease forwards;
  }

  .top-container {
    display: flex;

    .top-content {
      padding: 4vw;
      width: 35vw;
      display: flex;
      text-align: left;
      background: #F3EFFF;
      justify-content: center;
      align-items: center;

      .highlight-text {
        font-size: 2vw;
        line-height: 7vh;
        text-align: left;
        font-weight: 600;

        span {
          color: #3197A8;
        }

      }
    }

    .top-image {
      width: 50%;
      height: 100%;

      .about-us-img {
        width: 50vw;
        height: 65vh;
        object-fit: cover;
      }
    }
  }

  /* bottom container */
  .slide-from-right {
    animation: aboutslideRight 3s ease forwards;
  }

  .bottom-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;

    .slide-from-down {
      animation: moveUp 7s ease alternate;
    }

    .bottom-heading {
      width: 35vw;
      height: auto;

      .stroke {
        position: relative;
        top: -6vh;
        font-size: 5vw;
        color: #fff;
        text-shadow:
          -1px -1px 0 #A4A4A4,
          1px -1px 0 #A4A4A4,
          -1px 1px 0 #A4A4A4,
          1px 1px 0 #A4A4A4;
        line-height: 14vh;
        letter-spacing: 0.5vw;
        transform: rotate(-90deg);

        span {
          margin-left: 200px;
        }
      }
    }

    .bottom-content {
      width: 50vw;
      height: 50vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #F3EFFF;

      .para {
        padding: 1vw 2vw 0 2vw;
        font-size: 1vw;
        line-height: 4vh;
      }

      .stats {
        display: flex;
        justify-content: space-evenly;
        gap: 3vw;

        div {
          text-align: center;

          .count {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            font-size: 25px;
            font-weight: 600;

            h1 {
              font-size: 33px;
              margin-bottom: 6px;
              margin-top: 0;
              font-weight: 600;
            }
          }

          span {
            font-size: 18px;
            font-weight: 600;
          }
        }
      }

      .fex-btn {
        display: flex;
        margin-top: 1vw;

        div {
          background: #B7C6C4;
          width: 4vw;
          height: 8vh;
        }

        .viewmorebtn {
          background-color: #3197a8;
          color: #fff;
          border: none;
          cursor: pointer;
          width: 15vw;
          height: 8vh;

          a {
            text-decoration: none;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1vw;
            font-size: 1rem;

            img {
              width: 2vw;
              height: 2vh;
            }
          }
        }
      }
    }

    .aside-text p {
      font-size: 1.5vw;
      transform: rotate(-90deg);
      width: 25vw;
      letter-spacing: 0.5vw;
      line-height: 4vh;
      position: relative;
      top: -15vh;
      right: 9vw;
      color: #626262;
    }

    .aside-text p span {
      margin-left: 10%;
    }

    .aside-text {
      background: #F3EFFF;
      width: 13%;
    }
  }

}

/* animations */
@keyframes aboutslideLeft {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes aboutslideRight {
  from {
    transform: translateX(100%);

  }

  to {
    transform: translateX(0);
  }
}

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

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


@media (min-width: 320px) and (max-width: 668px) {
  .about-us-section {

    .stroke-mobile {
      display: block;
      padding: 3vw;
      text-align: center;
      font-size: 8vw;
      color: #fff;
      text-shadow: -1px -1px 0 #A4A4A4, 1px -1px 0 #A4A4A4, -1px 1px 0 #A4A4A4, 1px 1px 0 #A4A4A4;
      letter-spacing: 0.5vw;
    }

    /* top container */
    .slide-from-left {
      animation: unset;
    }

    .top-container {
      flex-direction: column;

      .top-content {
        width: 42vw;
        position: relative;
        left: 8vw;

        .highlight-text {
          font-size: 3vw;
          line-height: 2vh;
          margin: 0;
        }
      }

      .top-image {
        .about-us-img {
          width: 90vw;
          height: 35vh;
          object-fit: cover;
          position: relative;
          left: 8vw;
        }
      }
    }

    /* bottom container */
    .slide-from-right {
      animation: unset;
    }

    .bottom-container {
      flex-direction: row-reverse;

      .slide-from-down {
        animation: unset;
      }

      .bottom-heading {
        display: none;
      }

      .bottom-content {
        width: 63vw;
        height: 45vh;

        .para {
          padding: 0 3vw;
          font-size: 3vw;
          line-height: 3vh;
        }

        .stats {
          display: flex;
          justify-content: space-evenly;
          gap: 3vw;

          div {
            text-align: center;

            .count {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 5px;
              font-size: 25px;
              font-weight: 600;

              h1 {
                font-size: 33px;
                margin-bottom: 6px;
                margin-top: 0;
                font-weight: 600;
              }
            }

            span {
              font-size: 18px;
              font-weight: 600;
            }
          }
        }

        .fex-btn {
          div {
            width: 10vw;
            height: 5vh;
          }

          .viewmorebtn {
            width: 45vw;
            height: 5vh;

            a {

              img {
                width: 6vw;
                height: 2vh;
              }
            }
          }
        }
      }

      .aside-text p {
        font-size: 5.5vw;
        width: 70vw;
        letter-spacing: 0.5vw;
        line-height: 5vh;
        top: 13vh;
        right: 18vw;
      }

      .aside-text p span {
        margin-left: 10%;
      }

      .aside-text {
        background: none;
        width: 37%;
      }
    }
  }
}

@media (min-width: 668px) and (max-width: 1024px) {
  .about-us-section {
    .stroke-mobile {
      display: block;
      text-align: center;
      font-size: 8vw;
      color: #fff;
      text-shadow: -1px -1px 0 #A4A4A4, 1px -1px 0 #A4A4A4, -1px 1px 0 #A4A4A4, 1px 1px 0 #A4A4A4;
      letter-spacing: 0.5vw;
    }

    /* top container */
    .slide-from-left {
      animation: unset;
    }

    .top-container {
      flex-direction: column;

      .top-content {
        width: 35vw;
        position: relative;
        left: 8vw;

        .highlight-text {
          line-height: 3vh;
        }
      }

      .top-image {

        .about-us-img {
          width: 90vw;
          height: 40vh;
          position: relative;
          left: 10vw;
        }
      }
    }

    /* bottom container */
    .slide-from-right {
      animation: unset;
    }

    .bottom-container {
      flex-direction: row-reverse;

      .slide-from-down {
        animation: moveUp 7s ease alternate;
      }

      .bottom-heading {
        display: none;

        .stroke {
          position: relative;
          top: -6vh;
          font-size: 5vw;
          color: #fff;
          text-shadow:
            -1px -1px 0 #A4A4A4,
            1px -1px 0 #A4A4A4,
            -1px 1px 0 #A4A4A4,
            1px 1px 0 #A4A4A4;
          line-height: 14vh;
          letter-spacing: 0.5vw;
          transform: rotate(-90deg);

          span {
            margin-left: 200px;
          }
        }
      }

      .bottom-content {
        width: 80vw;
        height: 30vh;

        .para {
          padding: 0 2vw;
          font-size: 2vw;
          line-height: 3vh;
        }

        .stats {
          display: flex;
          justify-content: space-evenly;
          gap: 3vw;

          div {
            text-align: center;

            .count {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 5px;
              font-size: 25px;
              font-weight: 600;

              h1 {
                font-size: 33px;
                margin-bottom: 6px;
                margin-top: 0;
                font-weight: 600;
              }
            }

            span {
              font-size: 18px;
              font-weight: 600;
            }
          }
        }

        .fex-btn {
          display: flex;
          margin-top: 0;

          div {
            width: 4vw;
            height: 6vh;
          }

          .viewmorebtn {
            width: 20vw;
            height: 6vh;

            a {
              img {
                width: 4vw;
              }
            }
          }
        }
      }


      .aside-text {
        background: none;
        width: 20%;

        p {
          font-size: 3vw;
          width: 70vw;
          top: 0vh;
          right: 25vw;

          span {
            margin-left: 10%;
          }
        }
      }
    }
  }
}

.reveal {
  position: relative;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 1.5s ease, transform 0.5s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}