.about-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10vh 0;
}

.about-text{
  top:0;
  padding: 2vw;
  margin: 0 4vw;
  color: black;
  background: var(--main-salat);
  border-radius: 25px 25px 25px 25px;
  transform: translateY(-100%);
  opacity: 0;
  animation: slide-in 2s forwards;
}

@keyframes slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.about-text p{
  font-size: var(--font-size-pc-p);
  text-align: justify;
}

.about-img{
  padding-top: 5vh;
  z-index: 2;
  margin: 0 5vw;
  color: var(--main-white);
}

.about-img p {
  background-color: var(--main-blue);
  padding: 1vw;
  font-size: var(--font-size-pc-m-h);
  display: inline-block;
  border-radius: 25px;
  font-weight: bold;
  animation: slide-in 1.5s forwards;
}

.about-img img {
  position: relative;
  border-radius: 5px;
  width: 40vw;
  height: auto;
  transform: translateX(-100%);
  opacity: 0;
  animation: slide-in-img 1s forwards;
}

@keyframes slide-in-img {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.about-img::before{
  content: '';
  position: absolute;
  top: 28vw;
  left: 0;
  width: 35vw;
  height: 13vw;
  background: var(--main-blue);
  border-radius: 0 25px 25px 0;
  z-index: 0;
  transform: translateX(-100%);
  opacity: 0;
  animation: slide-in-img 1s forwards;
  animation-delay: 0.5s;
}

@media (max-width: 768px) {
  .about-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0 2vh 0;
  }

  .about-text{
    top:0;
    padding: 3vw;
    margin: 8vw 2vw;
    color: black;
    background: var(--main-salat);
    border-radius: 10px;
    transform: translateY(-100%);
    opacity: 0;
    animation: slide-in 2s forwards;
  }

  @keyframes slide-in {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .about-text p{
    font-size: var(--font-size-ph-p);
  }

  .about-img{
    padding-top: 0;
    z-index: 2;
    margin: 0 5vw;
    color: var(--main-white);
  }

  .about-img p {
    background-color: var(--main-blue);
    padding: 1vw;
    font-size: var(--font-size-ph-m-h);
    display: inline-block;
    border-radius: 10px;
    font-weight: bold;
    animation: slide-in 1.5s forwards;
  }

  .about-img img {
    position: relative;
    border-radius: 5px;
    width: 80vw;
    height: auto;
    transform: translateX(-100%);
    opacity: 0;
    animation: slide-in-img 1s forwards;
  }

  @keyframes slide-in-img {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .about-img::before{
    content: '';
    position: absolute;
    top: 55vw;
    left: 0;
    width: 65vw;
    height: 25vw;
    background: var(--main-blue);
    border-radius: 0 25px 25px 0;
    z-index: 0;
    transform: translateX(-100%);
    opacity: 0;
    animation: slide-in-img 1s forwards;
    animation-delay: 0.5s;
  }
}