website/sass/pages/new-support.scss

@import "../variables/media";

.new-support {
  &__text {
    color: var(--black-white);
  }
}

.support-benefit {
  margin: -120rem 0 80rem;
  position: relative;
  z-index: 10;
  @media (max-width: $media-sm) {
    margin: -20rem 0 80rem;
  }

  &__container {
    display: flex;
    justify-content: center;
    gap: 15rem;
    @media (max-width: $media-sm) {
      flex-direction: column;
    }
  }

  &__item {
    background-color: var(--wite-green);
    border-radius: 10rem;
    box-shadow: var(--card-box-shadow);
    padding: 28rem 26rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15rem;
  }

  &__text {
    max-width: 292rem;
    text-align: center;
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 143rem;
    width: 143rem;
    height: 143rem;
    background-color: var(--acordion-green-bg);
    color: var(--green-button);
    border: 1rem solid var(--green-button-transparent);
  }
}

.services-support {
  &__container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__title {
    text-align: center;
  }

  &__img {
    display: block;
    width: 47%;
    border-radius: 10rem 0 0 10rem;
    @media (max-width: $media-sm) {
      border-radius: 10rem;
      width: calc(100% - 10rem);
      margin: 0 10rem -20rem 0;
    }
  }

  &__item {
    border-radius: 10rem;
    display: flex;
    align-items: center;
    margin-bottom: 10rem;
      @media (max-width: $media-sm) {
          margin-bottom: 20rem;
      }
    &:nth-child(2n) {
      flex-direction: row-reverse;
      @media (max-width: $media-sm) {
        flex-direction: column;
      }

      .services-support__img {
        border-radius: 0 10rem 10rem 0;
        @media (max-width: $media-sm) {
          border-radius: 10rem;
          width: calc(100% - 10rem);
          margin: 0 0rem -20rem 10rem;
        }
      }
      .services-support__item-content  {
        @media (max-width: $media-sm) {

          width: calc(100% - 10rem);
          margin: 0 10rem 0rem 0;
        }
      }
    }

    @media (max-width: $media-sm) {
      flex-direction: column;

    }
  }

  &__sub-title {
    padding: 10rem 0;
  }

  &__row {
    margin-bottom: 40rem;
    @media (max-width: $media-sm) {
         margin-bottom: 10rem;
      }
  }

  &__item-content {
    background-color: var(--bg-green);
    padding: 110rem 40rem;
    border-radius: 10rem;
    position: relative;
    @media (max-width: $media-sm) {
      padding: 20rem 16rem;
      width: calc(100% - 10rem);
      margin: 0 0 0 10rem;
    }
  }

  &__count {
    display: flex;
    gap: 19rem;
    align-items: center;
  }

  &__number {
    color: var(--green-button);
  }

  &__icon {
    width: 53rem;
    height: 53rem;
    border-radius: 53rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--icon-check-color);

    color: var(--common-green);
    @media (max-width: $media-sm) {
      width: 33rem;
      height: 33rem;
    }
  }

  &__title-row {
    @media (max-width: $media-sm) {
      display: flex;
      align-items: center;
      gap: 16rem;
    }
  }

  &__line {
    margin: 10rem auto 40rem;
  }
}

.reviews {
  padding: var(--container-mob-section) 0;

  &__title {
    text-align: center;
  }
&__line {
  @media (max-width: $media-sm) {
      margin-bottom: -10rem;
    }
}
  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--card-box-shadow);
    margin: 30rem 30rem 65rem;
    border-radius: 10rem;
    padding: 58rem 30rem 0;
    background-color: var(--rewi-card-color);
    position: relative;
 @media (max-width: $media-sm) {
         padding: 30rem 30rem 0;
    }
    &:before {
      content: "";
      width: 150rem;
      height: 150rem;

      position: absolute;
      bottom: -30rem;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      z-index: 1;
      border-radius: 30rem;
      box-shadow: var(--card-box-shadow);
      background-color: var(--rewi-card-color);
    }

    &:after {
      content: "";
      width: 100%;
      height: 100%;
      border-radius: 10rem;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;

      background-color: var(--rewi-card-color);
    }
  }

  &__text {
    color: var(--black-white);
    max-width: 390rem;
    z-index: 4;
  }

  &__s-title {
    text-align: center;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 200rem;
    justify-content: space-between;
    margin: 30rem 0 10rem;
    z-index: 4;

    &:before {
      content: "";
      width: 16rem;
      height: 1rem;
      background-color: var(--green-button);
    }

    &:after {
      content: "";
      width: 16rem;
      height: 1rem;
      background-color: var(--green-button);
    }
  }

  &__icon {
    display: block;
    margin-top: auto;
    width: 80rem;
    height: 80rem;
    border-radius: 80rem;
    margin-bottom: -30rem;
    z-index: 4;
  }

  &__pag {
    position: relative;
    margin-top: 60rem;
  }
}