@import "../../vars";
@import "../../mixins";

.offer {
  padding-top: 80px;

  &__title {
        font-weight: 600;
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -0.01em;
        color: $vmainGrey;
        align-self: start;
  }

  &__btn {
    @include btn-orange;
    margin-top: 32px;
    padding: 16px 60px;
    
    
    &:hover {
        @include btn-orange-hover;
    }
  }
}


.offer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 694px;
}

.offer-wrapper {
  border: 1px solid #F2994A;
  border-radius: 10px;
  max-width: 100%;
  width: 100%;
  margin-top: 32px;
}

.offer-wrapper-content {
  display: flex;
  max-width: 1085px;
  width: 100%;
  margin: 0 auto;
  padding: 55px 0;

  > :not(:last-child) {
    margin-right: 20px;
  }
}

        .offer-item {
          max-width: 305px;
          width: 100%;

          &__text {
            max-width: 176px;
            width: 100%;
            margin-top: 18px;
            margin-left: 10px;

            &-title {
              font-weight: 600;
              font-size: 14.6087px;
              line-height: 20px;
              letter-spacing: -0.01em;
              text-align: left;
              color: $vmainGrey;
            }

            &-spec {
              margin-top: 18px;
              
              .spec-main {
                font-size: 12.7826px;
                line-height: 15px;
                letter-spacing: -0.01em;
                color: $vMain2;
                margin-top: 7px;

                .spec-second {
                  color: $vMain3;
                  margin-right: 7px;
                }
              }
            }
          }
        }

        .icons-offer {
            visibility: hidden;
        }

        .icons-offer-right {
            margin-top: 5px;
        }


        .plus-elem {
          position: relative;
          width: 42px;
          height: 41px;
          margin: 0 45px;

          &:after {
            position: absolute;
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg width='43' height='42' viewBox='0 0 43 42' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M42.3791 18.2164H24.5231V0.648438H18.4751V18.2164H0.619141V23.8804H18.4751V41.3524H24.5231V23.8804H42.3791V18.2164Z' fill='url(%23pattern0)'/%3E%3Cpath d='M42.3791 18.2164H24.5231V0.648438H18.4751V18.2164H0.619141V23.8804H18.4751V41.3524H24.5231V23.8804H42.3791V18.2164Z' fill='%23333B49'/%3E%3Cdefs%3E%3Cpattern id='pattern0' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_355_35253' transform='matrix(0.000902512 0 0 0.000925926 -0.366411 0)'/%3E%3C/pattern%3E%3C/defs%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: cover;
            width: 42px;
            height: 41px;
            top: 193px;
            left: 0;
          }
        }