organicmaps-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 25rem;
  }

  &__btn {
    display: none;

    @media (max-width: $media-sm) {
      display: flex;
      margin: 40rem auto 0;
    }
  }

  &__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;

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

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

    @media (max-width: $media-sm) {
      text-align: left;
    }
  }

  &__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);

    @media (max-width: $media-sm) {
      width: 74rem;
      height: 74rem;
      padding: 13rem;
    }
  }
}

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

  &__title {
    text-align: center;
  }

  &__img {
    display: block;
    width: 47%;
    border-radius: 10rem;
    margin-right: -60rem;

    @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: 66rem;

    @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 {
        margin-right: 0;
        margin-left: -10rem;
        border-radius: 10rem;

        @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: 30rem 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;
  }
}

.donate-services {

  &__row {
    box-shadow: var(--common-card-box-shadow);
    padding: 40rem 15rem 30rem;
    border-radius: 10rem;
    background-color: var(--rewi-card-color);

    @media (max-width: $media-sm) {
      background-color: transparent;
      box-shadow: none;
      padding: 21rem 0 0;
    }
  }

  &__title {
    text-align: center;
    margin-bottom: 33rem;

    @media (max-width: $media-sm) {
      margin-bottom: 20rem;
    }
  }

  &__text {
    color: var(--black-white);
    text-align: center;
    margin-bottom: 34rem;

    @media (max-width: $media-sm) {
      margin-bottom: 20rem;
    }
  }
  &__tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

  }
  &__tab-close {
    cursor: pointer;
  }
 &__tab-row {

   @media (max-width: $media-sm) {
     overflow-x: scroll;

     scrollbar-width: none;

     &::-webkit-scrollbar {
       display: none;
     }
   }
 }
  &__tab {
    padding: 0 30rem 0;
    margin-top: 30rem;
    border-top: 1rem solid transparent;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s;
    &--active {
      border-top: 1rem solid var(--bg-green);
      max-height: 3000rem;
      padding: 0 30rem 30rem;
    }
  }

  &__tab-text {
    display: grid;
    grid-template-columns: 250rem 1fr;
    gap: 10rem;
    @media (max-width: $media-sm) {
      grid-template-columns: 220rem 1fr;
    }
  }

  &__tab-title {
    padding: 20rem 0;
  }

  &__tab-item {
    display: flex;
    overflow: scroll;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    &:first-child {
      text-align: right;
      justify-content: end;
    }

    &--double {
      display: grid;
      grid-template-columns: 130rem 70rem;
      gap: 10rem;

      .p-sm-bold, .p-sm {
        text-align: left;
      }
    }

    @media (max-width: $media-sm) {
      overflow: visible;
    }
  }

  &__icons {
    display: flex;
    gap: 5rem;
    max-width: 750rem;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
    @media (max-width: $media-sm) {

      justify-content: center;
    }
  }

  &__icon {
    text-decoration: none;
    transition: transform 0.5s;
    width: 72rem;
    height: 72rem;
    flex-shrink: 0;

    img {
      width: 100%;
      width: 72rem;
      height: 72rem;
    }

    &:hover {
      transform: scale(1.05);
    }
  }
}

.reviews {
  padding: 110rem 0;

  @media (max-width: $media-sm) {
    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;
  }
}