@use '../../utils' as *;

.about-us-3 {

  .container {
    z-index: 1;
    position: relative;
  }

   &__space {
     padding-top: 120px;
     padding-bottom: 120px;

     @media #{$md} {
         padding-top: 80px;
         padding-bottom: 80px;
     }
     @media #{$sm,$xs} {
         padding-top: 70px;
         padding-bottom: 70px;
     }
   }

  &__background {
    z-index: -1;
    top: -120px;
    left: -235px;
    width: 1760px;
    height: 900px;
    overflow: hidden;
    position: absolute;
    @include border-radius(50px);
    background: var(--rr-color-100);

    @media #{$md, $sm, $xs} {
      display: none;
    }
  }

   &__shap {
     width: 100%;
     height: 100%;
     opacity: .1;
     background-size: cover;
   }

  &__content  {
    max-width: 578px;

    @media #{$md, $sm, $xs} {
      max-width: 100%;
    }

    &__list {
      list-style: none;

      li {
        gap: 10px;
        display: flex;
        font-style: normal;
        align-items: center;
        font-size: var(--rr-fw-bold);
        text-transform: capitalize;
        color: var(--rr-color-900);

        &:not(:last-child) {
          margin-bottom: 6px;
        }

        i {
          font-weight: 900;
          font-size: 15px;
          color: var(--rr-theme-primary);
        }
      }
    }

    &-btn {
      gap: 15px;
      flex-wrap: wrap;

      &__icon {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        @include border-radius(500px);
        border: 1px solid var(--rr-theme-primary);

        i {
          font-size: 16px;
          color: var(--rr-theme-primary);
        }
      }

      &__text {
        p {
          color: var(--rr-color-800);
        }

        h5 {
          color: var(--rr-color-900);
        }
      }
    }
  }

  &__media {
    max-width: 578px;
    margin-left: auto;

    @media #{$md, $sm, $xs} {
      margin-top: 40px;
      margin-right: auto;
    }

    img {
      width: 100%;
    }
  }
}