.about {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 100px 0;

  &__img {
    max-width: 700px;
    width: 100%;
    height: 486px;
    background-image: url("/images/323242423.webp") !important;
    background-repeat: no-repeat;
    background-position: left left;
    background-size: cover;
    object-fit: contain;
    margin-right: 50px;

  }
  &__content {
    max-width: 600px;
    width: 100%;

    &--text {
      color: #666C89;
      opacity: 0.9;
      margin: 5px 0 30px 0;
      font-size: 16px;
    }
    &--info {
      h4 {
        font-size: 24px;
        margin-bottom: 5px;
      }

      &__button {
        .aboutButton {
          width: 28%;
          background-color:#F4F4F4;
          border: none;
          color: #1C1F35;
          padding: 15px 5px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
          margin: 4px 2px;
          cursor: pointer;
          margin-right: 10px;
          font-weight: 500;
        }
        .aboutActive {
          background-color: #FFB82B;
          color: #ffffff;
        }
      }

      &__text {
        div {
          color: #8c92b3;
          animation: fadeIn 0.5s ease-in-out;
          padding: 5px 10px ;
        }
      }

    }

  }
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media screen and (max-width:1024px){
  .about {
    padding: 80px 0;

    &__img {
      height: 350px;
      background-size: cover;
      margin-right: 20px;
    }
    &__content {
      &--text {
        margin: 0px 0 15px 0;
        font-size: 16px;
      }
      &--info {
        h4 {
          font-size: 24px;
        }

        &__button {
          flex-wrap: wrap;
          .aboutButton {
            width: 120px;
            padding: 10px 5px;
            margin: 4px 5px 5px 0;
          }
        }

        &__text {
          div {
            padding: 3px 5px ;
          }
        }

      }

    }
  }

}

@media screen and (max-width:900px){
  .about {
    flex-direction: column;
    padding: 60px 0;

    &__img {
      height: 486px;
      margin-right: 0px;
      margin-bottom: 30px;
    }
    &__content {
      max-width: 700px;

      &--text {
        margin: 5px 0 10px 0;
        font-size: 15px;
      }
      &--info {
        h4 {
          font-size: 22px;
          margin-bottom: 0px;
        }

        &__button {
          .aboutButton {
            width: 30%;
            font-size: 15px;
            margin: 4px 10px 0 0;
          }
        }

        &__text {
          div {
            padding: 5px ;
          }
        }

      }

    }
  }
}

@media screen and (max-width:500px){
  .about {
    padding: 40px 0;

    &__img {
      height: 320px;
      margin-right: 0px;
      margin-bottom: 20px;
    }
    &__content {
      &--text {
        margin: 0px 0 10px 0;
      }
      &--info {
        h4 {
          font-size: 20px;
        }

        &__button {
          .aboutButton {
            width: 32%;
            padding: 10px 3px;
            margin: 4px 2px 5px 0;
          }
        }

        &__text {
          div {
            animation: fadeIn 0.5s ease-in-out;
            padding: 3px 5px;
            font-size: 14px;
          }
        }

      }

    }
  }
}