@import "fonts.css";
@import "sub_style";
@import "bootstrap.min.css";

@mixin max-screen($res) {
  @media screen and (max-width: $res) {
    @content;
  }
}

a {
  &:hover {
    outline: none;
    text-decoration: none;
  }
}

.main-title {
  font-family: SofiaProSemiBold;
  color: #68b734;
}

textarea {
  resize: none;
}

//Блок btn
.btn {
  padding: 11px 60px;
  font-family: SofiaProRegular;
  font-size: 21px;
  border: 1px solid transparent;
  border-radius: 30px;
  line-height: 1;
  transition: 0.3s;

  @include max-screen(767px) {
    font-size: 16px;
  }

  &:active {
    outline: none;
  }
}

.btn-success {
  background: #68b734;

  &:hover {
    color: black;
    border-color: #68b734;
    background: transparent;
  }
}

.btn-danger {
  background: #ff1d1d;

  &:hover {
    color: black;
    border-color: #ff1d1d;
    background: transparent;
  }
}

.btn-dark {
  background: #000000;

  &:hover {
    color: black;
    border-color: #000;
    background: transparent;
  }
}

.btn-secondary {
  background: #bfbfbf;

  &:hover {
    color: black !important;
    border-color: #bfbfbf;
    background: transparent;
  }
}

//---------------

.decor-none {
  color: black;

  &:hover {
    color: black;
    text-decoration: none;
  }
}

.bg-grey {
  background: #f0f0f0;
}

.bg-gradient-grey {
  background: rgb(247, 247, 247);
  background: linear-gradient(180deg, rgba(247, 247, 247, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

//header
.header-info {
  background: #272727;
  padding: 10px 0;

  &.hide_up {
    display: none;
  }

  @include max-screen(767px) {
    display: none;
  }
}

.header-info__text {
  font-size: 20px;
  color: white;
  font-family: SofiaProRegular;
  line-height: 1;

  @include max-screen(500px) {
    font-size: 16px;
  }
}

.header-info__exit {
  right: 16px;
  color: red;
  cursor: pointer;
}

//__Бургер-меню__
.main-navbar {
  padding-top: 30px;

  @include max-screen(767px) {
    padding-top: 14px;
  }

  &.white-theme {
    .button-menu {
      &:before, &:after {
        background: white;
      }
    }

    .shop-icon {
      color: white;
    }

    .search-icon {
      color: white !important;
    }

    .user-icon {
      color: white;
    }

    .bag-icon {
      fill: white;
    }
  }
}


.locked {
  overflow: hidden;

  &:before {
    content: '';
    background-color: black;
    width: 100%;
    height: 200%;
    position: absolute;
    opacity: 0.8;
    z-index: 1;
    overflow: hidden;
  }
}

.nav-menu {
  display: block;
  position: fixed;
  background: #ffffff;
  width: 42%;
  height: 100vh;
  box-shadow: 0 4px 2px -2px rgba(36, 36, 36, 0.17);
  left: -42%;
  top: 0;
  transition: 0.5s;
  opacity: 0.1;
  z-index: 998;

  @include max-screen(768px) {
    width: 100%;
    left: -100%;
  }
}

.wrap-nav-btn {
  min-height: 15%;

  @include max-screen(768px) {
    min-height: 20%;
  }
}

.nav__wrapper {
  min-height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 33px;

  @include max-screen(768px) {
    margin-bottom: 30px;
    justify-content: start;
    line-height: 1;
    min-height: 55%;
  }
}

.nav-menu.open-menu {
  overflow: auto;
  left: 0;
  opacity: 1;
  transition: 0.5s;
}

.top__menu {
  display: block;
  margin-bottom: 84px;

  @include max-screen(768px) {
    margin-bottom: 50px;
  }
}

.menu__item {
  line-height: 20px;
  margin-bottom: 34px;

  &:last-of-type {
    margin-bottom: 0;
  }
}

.menu__item-link {
  font-size: 24px;
  font-family: SofiaProLight;
  color: black;
  text-decoration: none;
  position: relative;
  transition: 0.3s;
  transition-delay: 150ms;

  @include max-screen(768px) {
    font-size: 24px;
  }

  &:after {
    content: '';
    width: 0;
    height: 2px;
    background: transparent;
    border-radius: 20px;
    position: absolute;
    left: 0;
    bottom: -5px;
    transition: 0.3s;
    cursor: default;
    transition-delay: 150ms;
  }

  &:hover {
    font-size: 26px;
    transition: 0.2s;

    &:after {
      content: '';
      width: 100%;
      height: 2px;
      background: #e5dfd6;
      border-radius: 20px;
      position: absolute;
      left: 0;
      bottom: -5px;
      transition: 0.2s;
    }
  }
}

.button-menu {
  position: relative;
  width: 20px;
  height: 7px;
  cursor: pointer;
  margin-right: 13px;

  &:after, &:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background: black;
  }

  &:before {
    top: 0;
  }

  &:after {
    bottom: -4px;
  }

  @include max-screen(767px) {
    height: 10px;

    &:after {
      bottom: 0;
    }
  }

  @include max-screen(360px) {
    margin-right: 0;
  }
}

.nav-menu__btn-exit {
  left: 33px;

  img {
    position: absolute;
    width: 35px;
    top: 12px;
    left: 9px;

    @include max-screen(768px) {
      width: 20px;
      left: 10px;
    }
  }
}

.btn-exit-menu {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: solid 1px #e5dfd6;
  cursor: pointer;

  @include max-screen(768px) {
    width: 45px;
    height: 45px;
  }
}

//---------------------------------------------
.logo img {
  width: 175px;
  height: 90px;

  @include max-screen(767px) {
    position: relative;
    top: 10px;
  }

  @include max-screen(600px) {
    width: 140px;
    height: 70px;
  }

  @include max-screen(500px) {
    width: 132px;
    height: 67px;
  }

  @include max-screen(374px) {
    width: 90px;
    height: 45px;
  }
}

.link-menu {
  font-family: SofiaProRegular;
  font-size: 18px;
  font-weight: bold;
}

.search-icon {
  &:before {
    content: "\f002";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    margin-right: 15px;
  }

  @include max-screen(767px) {
    margin-left: 0;

    &:before {
      margin-right: 0;
    }
  }

  @include max-screen(360px) {
    position: relative;
    left: 13px;
  }
}

.shop-icon {
  margin-right: 21px;
}

.search-icon span, .shop-icon {
  @include max-screen(767px) {
    display: none;
  }
}

.register-item {
  line-height: 1;
  text-transform: uppercase;
  font-family: Poppins-Regular;
  font-size: 12px;
}

.nav__social-group {
  min-height: 15%;
  padding: 0 33px;

  svg {
    width: 50px;
    height: 50px;
    border: 2px solid black;
    border-radius: 25px;
  }

  @include max-screen(768px) {
    min-height: 25%;
    background: white;
    align-items: baseline !important;


    svg {
      width: 40px;
      height: 40px;
    }
  }
}

.user-icon {
  font-size: 24px;
  display: inline-block;
}

.drop-down {
  display: flex;
  justify-content: space-around;
  padding: 10px 20px;
  height: auto;
  width: 175px;
  position: absolute;
  top: 30px;
  right: 10px;
  font-size: 16px;
  font-family: SofiaProRegular;
  background: aliceblue;
  border-radius: 20px;
  visibility: collapse;
  opacity: 0;
  transition: 0.4s;
}

.icon-wrap:hover .drop-down {
  visibility: visible;
  opacity: 0.9;
  transition: 0.4s;
}

.drop_1, .drop_2 {
  cursor: pointer;
}

.bag-icon {
  color: white;
  margin-left: 24px;

  &:hover {
    color: white;
  }

  @include max-screen(576px) {
    bottom: 3px;
    margin-left: 12px;
  }
}

.amount-icon {
  position: absolute;
  font-size: 12px;
  font-family: SofiaProRegular;
  padding: 3px 6px;
  line-height: 1;
  background: #ff7200;
  border: 1px;
  border-radius: 15px;
  bottom: -25%;
  right: -25%;
}

//--Регистрационная форма
.register-form {
  width: 50%;
  background: white;
  position: fixed;
  top: 0;
  overflow: auto;
  height: 100vh;
  z-index: 999;

  @include max-screen(768px) {
    width: 100%;

    button {
      font-size: 16px;
    }
  }
}

.form-top {
  background: white;
  min-height: 65%;

  a {
    font-family: Poppins-Medium;
    font-size: 12px;
    color: #7c5e30;
    font-weight: 700;
  }

  @include max-screen(768px) {
    margin-bottom: 30px;
    min-height: 50%;
    justify-content: start !important;

    .form-group-width:last-of-type {
      margin-bottom: 32px;
    }

    .btn.btn-success.mb-4 {
      margin-bottom: 16px !important;
    }
  }
}

.form-top__title {
  font-size: 42px;
  margin-bottom: 40px;

  @include max-screen(1400px) {
    margin-bottom: 20px;
  }
}

.form-control {
  border-width: 0 0 2px 0;
  border-radius: 0;
  background: transparent;

  &:focus {
    box-shadow: none;
    border-color: #68b734;
  }
}

.form-group-width {
  width: 50%;

  @include max-screen(500px) {
    width: 75%;
  }

  @include max-screen(320px) {
    width: 90%;
  }
}

.form-bottom {
  min-height: 20%;

  @include max-screen(768px) {
    min-height: 30%;
    padding-top: 15px;
    justify-content: start !important;
  }
}

.form-bottom__title {
  font-family: Poppins-Medium, sans-serif;
  font-size: 12px;
}

.register-wrapper, .login-wrapper {
  right: 0%;
  opacity: 0;
  visibility: collapse;
  transition: 0.5s;
}

.open-register, .open-login {
  opacity: 1;
  visibility: visible;
  transition: 0.5s;
  overflow: auto;
}

.nav-menu__btn-register {
  right: 33px;
}

.btn-arrow-right {
  img {
    position: absolute;
    width: 35px;
    right: 10px;
    top: 12px;

    @include max-screen(768px) {
      width: 20px;
    }
  }
}

.banner-page-index {
  background-image: url("../images/banner1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px 0px;
  height: 80vh;
  position: relative;

  @include max-screen(1024px) {
    // background-size: 130%;
    background-position: 75% 0%;
    //  height: 80vh;
  }

  @include max-screen(940px) {
    // background-size: 150%;
    // height: 100vh;
  }

  @include max-screen(768px) {
    // background-size: 180%;
    background-position: 85% 10%;
    // height: 100vh;
  }

  @include max-screen(680px) {
    // background-size: 210%;
    background-position: 80% 0%;
    height: 100vh;
  }

  @include max-screen(580px) {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0px 0px;
    height: 80vh;
    background-image: url("../images/banner1_mobile.png");
  }

  .btn {
    @include max-screen(767px) {
      line-height: 13px;
      padding: 14px 32px 13px;
    }
    @include max-screen(480px) {
      line-height: 13px;
      padding: 12px 32px;
    }
  }
}

.wrap-content-banner {
  position: absolute;
  bottom: 50px;

  @include max-screen(767px) {
    bottom: 40px !important;
    left: 30px;
    right: 30px;
  }

  @include max-screen(375px) {
    bottom: 30px;
  }

  @include max-screen(320px) {
    bottom: 10px;
  }
}

.content-banner-btn {
  padding: 16px 30px;

  @include max-screen(1500px) {
    font-size: 18px;
  }

  @include max-screen(470px) {
    padding: 14px 32px;
  }

  @include max-screen(470px) {
    font-size: 16px;
    line-height: 13px;
  }
}

.banner-page__title {
  font-family: Nunito-Bold;
  font-size: 62px;
  line-height: 62px;
  margin-bottom: 40px;

  @include max-screen(1200px) {
    font-size: 46px;
    line-height: 50px;
    margin-bottom: 10px;
  }

  @include max-screen(767px) {
    font-size: 32px;
    line-height: 36px;
  }

  @include max-screen(470px) {
    font-size: 28px;
    line-height: 32px;
  }

  @include max-screen(375px) {
    font-size: 24px;
    line-height: 28px;
  }
  @include max-screen(320px) {
    font-size: 22px;
  }
}

.text-banner {
  font-family: SofiaProRegular;
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 23px;

  @include max-screen(767px) {
    font-size: 18px;
  }

  @include max-screen(470px) {
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 10px;
  }

  @include max-screen(375px) {
    font-size: 14px;
  }

  @include max-screen(360px) {
    font-size: 12px;
  }
  @include max-screen(320px) {
    font-size: 12px;
    line-height: 12px;
  }
}

.search-form {
  display: none;
  width: 100%;
  padding-bottom: 25px;
  background: #ffffff;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;


}

.search-title {
  font-family: SofiaProSemiBold;
  font-size: 42px;
  color: #68b734;
  margin-bottom: 0;

  @include max-screen(767px) {
    font-size: 32px;
  }
}

.wrap-search-form {
  @include max-screen(575px) {
    display: block !important;
    margin-bottom: 10px;
    text-align: center;
  }

  .form-group {
    margin-right: 24px;

    input {
      font-family: Poppins-Medium;
      font-size: 12px;
    }
  }
}

.search-btn {
  @include max-screen(991px) {
    padding: 12px 30px;
    font-size: 20px;
  }

  @include max-screen(767px) {
    padding: 12px 24px;
    font-size: 14px;
  }
}

.form-search {
  font-family: Poppins-Medium;
  font-size: 1em;
}

.btn-cross {
  img {
    width: 30px;
    position: absolute;
    top: 14px;
    left: 14px;

    @include max-screen(767px) {
      width: 20px;
      top: 12px;
      left: 12px;
    }
  }
}

.advertising-card-title {
  font-family: SofiaProRegular;
  font-size: 20px;
  color: #68b734;
}

.advertising-card-subtitle {
  font-family: Nunito-SemiBold;
  font-size: 32px;

  @include max-screen(576px) {
    font-size: 24px;
  }
}

.advertising-card-btn {
  padding: 9px 5px;
  font-size: 16px;

  @include max-screen(460px) {
    width: 50% !important;
  }
}

.advertising-card-list {
  font-family: SofiaProRegular;
  font-size: 21px;
}

.star-wrap, .star-wrap:hover {
  color: black;
}

.headliner-reviews__title {
  font-family: SofiaProRegular;
  font-size: 14px;

  @include max-screen(767px) {
    font-size: 12px;
  }
}

.headliner-subtitle {
  font-family: SofiaProRegular;
  font-size: 21px;

  @include max-screen(768px) {
    font-size: 18px;
  }

}

.headliner-title {
  font-family: Poppins;
  color: black;
  font-size: 42px;
  font-weight: 600;

  @include max-screen(768px) {
    font-size: 32px;
  }

}

.owl-dots {
  position: absolute;
  bottom: 25px;
  width: 100%;
  text-align: center;
}

button.owl-dot {
  width: 10px;
  height: 10px;
  background: #999999 !important;
  border-radius: 5px;
  margin-right: 5px;

  &:last-of-type {
    margin-right: 0;
  }

  &:focus {
    outline: none;
  }
}

button.active {
  background: black !important;
}

.sub-btn {
  font-family: Nunito-Bold;
  color: #68b734;
  font-size: 14px;

  @include max-screen(767px) {
    font-size: 12px;
  }

  &:hover {
    color: #68b734 !important;
  }
}

.home-title {
  font-family: Nunito-Bold;
  font-size: 42px;
  line-height: 42px;
  margin-bottom: 10px;

  @include max-screen(767px) {
    font-size: 18px;
    line-height: 18px;
  }
}

section.pt-5 {
  @include max-screen(768px) {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.subscribe-offers__subtitle {
  font-family: SofiaProRegular;
  font-size: 20px;
  margin-bottom: 24px;

  @include max-screen(767px) {
    font-size: 12px;
    margin-bottom: 16px;
  }
}

.subscribe__form-wrapper {
  min-width: 344px;

  @include max-screen(767px) {
    min-width: auto;
  }
}

.subscribe-offers__form {
  border-width: 3px;
  border-radius: 30px;

  @include max-screen(767px) {
    font-size: 14px;
  }
}

.subscribe-btn {
  position: relative;
  bottom: 1px;
  padding: 11px 0;
  width: 55px;
  font-size: 14px;

  @include max-screen(767px) {
    padding: 9px 0;
  }
}

.shop-service, .shipping-service, .track-service {
  svg {
    position: relative;
    bottom: 4px;
  }
}

//Section>>>>>>>>>>>>>>----------->>>>>>>>>Shop

.banner-page-shop {
  background-image: url('../images/banner_3.png');
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 80vh;

  @include max-screen(580px) {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 60vh;
    background-image: url("../images/banner_3_mobile.png");
    position: relative;
  }

  .wrap-content-banner__shop {
    bottom: 70px;
  }

  .banner-page-shop__title {
    font-size: 75px;
    margin-bottom: 0;

    @include max-screen(767px) {
      font-size: 45px;
    }
  }

  &.about {
    background-image: url('../images/banner_4.png');

    @include max-screen(580px) {
      background-image: url("../images/banner_4_mobile.png");
      background-position: center center;
    }

    .wrap-content-banner__shop {
      bottom: 40%;
    }
  }

  &.white-theme {
    .banner-page__title {
      color: white;
    }
  }
}

.product-shop-wrap {
  margin-bottom: 76px;
}

//Section>>>>>>>>>>>>>>----------->>>>>>>>>Shipping/faq/terms

.text-information {
  padding-top: 250px;
  padding-bottom: 100px;

  @include max-screen(991px) {
    padding-top: 200px;
  }

  @include max-screen(767px) {
    padding-top: 160px;
  }
}

.text-information__title {
  margin-bottom: 110px;
  font-size: 54px;

  @include max-screen(991px) {
    font-size: 42px;
    margin-bottom: 70px;
  }

  @include max-screen(767px) {
    font-size: 32px;
    margin-bottom: 55px;
  }
}

.text-information-wrapper {
  margin-bottom: 64px;

  &:last-of-type {
    margin-bottom: 0;
  }

  @include max-screen(991px) {
    margin-bottom: 40px;
  }

  @include max-screen(767px) {
    margin-bottom: 28px;
  }
}

.text-information__subtitle {
  font-family: Poppins-SemiBold;
  margin-bottom: 50px;
  color: black;
  line-height: 34px;
  font-size: 28px;

  @include max-screen(991px) {
    font-size: 22px;
    margin-bottom: 20px;
    line-height: 28px;
  }

  @include max-screen(767px) {
    font-size: 18px;
    margin-bottom: 18px;
    line-height: 23px;
  }
}

.text-information__text {
  font-family: Poppins-SemiBold;
  color: #282828;
  line-height: 30px;
  font-size: 20px;

  @include max-screen(991px) {
    font-size: 16px;
  }

  @include max-screen(767px) {
    font-size: 12px;
    line-height: 22px;
  }

  a {
    color: #967e59;
  }
}

//---terms&conditions----
.text-information-terms {
  padding-bottom: 530px;

  @include max-screen(991px) {
    padding-bottom: 100px;

    @include max-screen(767px) {
      padding-bottom: 40px;
    }
  }

  .terms-bm-subtitle {
    margin-bottom: 60px;

    @include max-screen(767px) {
      margin-bottom: 35px;
    }
  }

  .terms-title {
    margin-bottom: 34px;
    font-size: 42px;

    @include max-screen(767px) {
      font-size: 32px;
      margin-bottom: 30px;
    }
  }

  .text-information-wrapper-terms {
    margin-bottom: 40px;

    &:last-of-type {
      margin-bottom: 0;
    }

    @include max-screen(767px) {
      margin-bottom: 28px;
    }

    .terms-subtitle {
      margin-bottom: 46px;
      color: #282828;

      @include max-screen(991px) {
        margin-bottom: 20px;
      }

      @include max-screen(767px) {
        margin-bottom: 18px;
      }
    }

    .terms-text {
      margin-bottom: 50px;

      @include max-screen(767px) {
        margin-bottom: 18px;
      }

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}

//-----------
.order-form-wrapper {
  padding-top: 250px;
  padding-bottom: 88px;

  @include max-screen(767px) {
    padding-top: 174px;
    padding-bottom: 60px;
  }
}

.order-title {
  font-size: 42px;
  margin-bottom: 62px;

  @include max-screen(767px) {
    font-size: 32px;
    margin-bottom: 50px;
  }
}

.contact {
  padding-top: 190px;

  @include max-screen(767px) {
    padding-top: 140px;
  }
}


//-----------
.contact__title {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 38px;

  @include max-screen(767px) {
    font-size: 32px;
  }
}

.address-form {
  padding: 55px 32px;
  background: #f7f7f7;
  width: 350px;
  position: absolute;
  top: 80px;

  @include max-screen(991px) {
    position: sticky;
    width: 100%;
    margin-bottom: 38px;
  }

  @include max-screen(767px) {
    padding: 32px 20px;
  }

  .address-form__title {
    font-size: 32px;
    margin-bottom: 24px;

    @include max-screen(767px) {
      font-size: 18px;
    }
  }

  .address-form__info {
    font-family: Poppins-SemiBold;
    font-size: 16px;
    line-height: 1.63;
    color: black;
    margin-bottom: 40px;

    @include max-screen(767px) {
      font-size: 12px;
      margin-bottom: 30px;
    }
  }

  .address-form__subtitle {
    font-family: Poppins-SemiBold;
    font-size: 18px;
    color: black !important;
    margin-bottom: 30px;
  }

  .address-form__text {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 2.14;
    color: black;

    @include max-screen(767px) {
      font-size: 12px;
    }
  }
}

.contact-form-wrapper {
  padding: 90px 0 70px;

  @include max-screen(767px) {
    padding: 40px 0 30px;
  }


  .contact-form-title {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 36px;

    @include max-screen(767px) {
      font-size: 18px;
    }
  }

  .form-group {
    @include max-screen(767px) {
      input {
        font-size: 12px;
      }
    }
  }

  textarea {
    height: 190px;

    @include max-screen(767px) {
      font-size: 12px;
      height: 100px;
    }
  }
}

//Section>>>>>>>>>>>>>>----------->>>>>>>>>payment
//-----------Payment--------

section.payment-wrapper {
  padding-top: 30px;
  padding-bottom: 60px;
  background: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(242, 245, 240, 1) 50%, rgba(238, 241, 235, 1) 100%);

  @include max-screen(767px) {
    background: white;
  }

  .payment_form {
    padding-right: 70px;
    @include max-screen(767px) {
      padding-right: 15px;
    }

    a {
      i {
        margin-right: 10px;
      }
    }
  }

  .payment-product {
    padding-left: 70px;
    @include max-screen(767px) {
      padding-left: 15px;
    }
  }

  .address, .method_selection, .method_selection_payment, .method_selection_address {
    .payment-subtitle {
      font-weight: 900;
    }
  }

  .payment-title {
    font-family: SofiaProRegular;
    font-size: 12px;
    font-weight: 900;
  }

  .payment-subtitle {
    font-family: SofiaProLight;
    font-size: 12px;

    &.size {
      font-size: 10px;
    }
  }

  .form-control {
    border-width: thin;
    font-size: 12px;
    font-family: SofiaProRegular;
  }

  .btn-success {
    font-family: SofiaProLight;
    font-size: 16px;
    padding: 15px 35px 15px 30px;
    border: 1px solid #6dba3b;
    border-radius: 0;
  }

  .payment-product__btn {
    padding: 7px 44px;

    @include max-screen(992px) {
      padding: 7px 25px;
    }
    @include max-screen(767px) {
      padding: 7px 44px;
    }
  }


  nav {
    .breadcrumb {
      justify-content: center;
      background: none;

      .breadcrumb-item {
        font-size: 12px;
        font-weight: 900;
        font-family: SofiaProRegular;

        &.active {
          font-weight: 500;

          &:before {
            font-weight: 900;
            color: #6c757d;
          }
        }

        a {
          text-decoration: none;
          color: black;
        }

        &:before {
          content: "\f105";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          color: black;
          font-size: 12px;
          position: relative;
          top: 2px;

          @include max-screen(992px) {
            top: 0;
          }
        }

        &:first-child {
          &:before {
            content: "";
          }
        }
      }
    }
  }

  //page payment-information
  .express_checkout {
    margin-bottom: 30px;

    fieldset {
      border: 1px solid #e6e6e6;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 15px;
      line-height: 0;

      legend {
        width: auto;
        text-align: center;
        font-family: SofiaProRegular;
        font-size: 10px;
      }

      .btn {
        padding: 10px 0;
        font-size: 0;
        width: 48%;
        border-radius: 5px;

        @include max-screen(991px) {
          width: 45%;
        }
      }

      .btn-amazon_pay {
        background: #f99e1a;
      }

      .btn-paypal {
        background: #f7c557;

        img {
          position: relative;
          bottom: 1px;
        }
      }
    }
  }

  .form-address-subtitle {
    font-size: 12px;
  }

  .text-wrap {
    font-size: 12px;

    @include max-screen(991px) {
      font-size: 11px;
    }

    span.payment-subtitle {
      margin-right: 6px;
    }
  }

  .payment-link-item {
    &:hover {
      text-decoration: revert;
    }
  }


  //page payment-shipping

  .address {
    margin-bottom: 30px;

    .wrap-address {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      border: 1px solid #e6e6e6;
      padding: 15px 10px;

      .info {
        display: flex;
        align-items: baseline;
      }

      h6, p, a {
        margin: 0;
      }

      h6 {
        min-width: 70px;
        color: #666666;
      }

      a {
        font-size: 10px;
        color: black;
        margin-left: 10px;
      }
    }
  }

  .shipping_method {
    margin-bottom: 50%;

    @include max-screen(767px) {
      margin-bottom: 150px;
    }

    .shipping_method__title {
      margin-bottom: 30px;

      @include max-screen(767px) {
        margin-bottom: 15px;
      }
    }

    .method_selection {
      padding: 15px 10px 0;
      border: 1px solid #e6e6e6;


      span.form-baseline {
        position: relative;
        top: 2px;
        @include max-screen(992px) {
          top: 5px;
        }
      }

      p.form-baseline-sum {
        position: relative;
        top: 2px;

        @include max-screen(992px) {
          top: 4px;
        }
      }
    }
  }

  //page payment-payment

  .payment {
    margin-bottom: 36px;

    .method_selection_payment {
      padding: 15px 10px;
      border: 1px solid #e6e6e6;

      .payment__form-wrap {
        line-height: 20px;
        margin-bottom: 10px;

        &:last-of-type {
          margin-bottom: 0;
        }
      }

      .payment-img-height {
        max-height: 22px;
      }

      .payment-img-position {
        position: relative;
        right: 6px;
        bottom: 1px;
      }
    }
  }

  .method_selection_address {
    margin-bottom: 30px;

    .form-check {
      line-height: 22px;
      padding: 10px 30px;
      border: 1px solid #e6e6e6;

      &:first-child {
        border-bottom: none;
      }
    }
  }

  .remember {
    margin-bottom: 150px;

    @include max-screen(767px) {
      margin-bottom: 100px;
    }
  }
}

.payment, .dilling-address {
  span.form-baseline {
    @include max-screen(992px) {
      position: relative;
      top: 2px;
    }
  }
}

//payment-product
.payment-product {
  padding-top: 66px;

  @include max-screen(767px) {
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid #e7d7de;
  }

  .payment-product__text {
    font-family: SofiaProLight;
    font-size: 14px;
    font-weight: 900;
  }

  .payment-product__section {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #e7d7de;

    @include max-screen(992px) {
      flex-direction: column;
    }

    @include max-screen(768px) {
      flex-direction: row;
    }
  }

  .img-wrap {
    width: 125px;
    height: 125px;
    background: white;

    span {
      position: absolute;
      right: -9px;
      top: -9px;
      color: #fff;
      border: 1px solid #f29938;
      width: 18px;
      height: 18px;
      border-radius: 100%;
      background: #f29938;
      font-family: SofiaProRegular;
      font-size: 11px;
      text-align: center;
    }
  }

  .payment-product__form {
    display: flex;
    justify-content: space-between;

    @include max-screen(575px) {
      align-items: baseline;
    }

    input {
      width: 350px;

      @include max-screen(1200px) {
        width: 250px;
      }

      @include max-screen(992px) {
        width: 175px;
      }
      @include max-screen(767px) {
        width: 350px;
      }
      @include max-screen(515px) {
        width: 300px;
      }
      @include max-screen(467px) {
        width: 250px;
      }
      @include max-screen(414px) {
        width: 200px;
      }
      @include max-screen(370px) {
        width: 150px;
      }
    }
  }

  .total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;

    &:last-of-type {
      margin-bottom: 0;
    }

    p {
      line-height: 12px;
      margin-bottom: 0;
      color: black;
    }
  }
}

.implementation {
  padding-top: 90px;
  padding-bottom: 114px;
  font-family: SofiaProRegular;

  img {
    margin-bottom: 24px;
  }

  .implementation__title {
    font-size: 46px;
    line-height: 40px;
    color: black;
    margin-bottom: 28px;
  }

  .implementation__subtitle {
    font-size: 12px;
    color: black;
    margin-bottom: 28px;
  }
}

.implementation__btn {
  padding: 11px 45px;
  font-size: 20px;
}

.cart-wrapper {
  padding-top: 170px;
  padding-bottom: 95px;

  @include max-screen(576px) {
    padding-top: 130px;
    padding-bottom: 50px;
  }

  .cart-title {
    font-family: Poppins-Regular;
    font-size: 13px;
    color: black;
    @include max-screen(414px) {
      font-size: 11px;
    }
  }

  .cart-subtitle {
    font-family: Poppins-SemiBold;
    font-size: 13px;
    color: black;
    font-weight: 900;

    @include max-screen(414px) {
      font-size: 11px;
    }
  }

  .card-wrapper__title {
    font-size: 42px;
    margin-bottom: 62px;

    @include max-screen(575px) {
      font-size: 32px;
    }
  }

  .card-form__title {
    border-bottom: 1px solid #d8d8d9;
    padding-bottom: 30px;
    margin-bottom: 0px;
  }


  .card-form__product {
    padding: 25px 0;

    .card-form__product-img {
      width: 80px;
      height: 80px;
      background: white;
    }

    .btn-dark {
      padding: 8px;
      font-size: 9px;
      font-family: Poppins-Regular;
      width: 52px;
      border-radius: 0;
    }

    .btn, .btn-dark {
      &:focus, &:active {
        box-shadow: none !important;
        outline: none;
      }
    }

    input {
      width: 50px;
    }
  }

  .card-form__subtitle {
    margin-bottom: 42px;
  }

  textarea {
    height: 130px;
    border: none;
    background: white;
    margin-bottom: 40px;
  }

  .card-form_total {
    .total-sum {
      margin-bottom: 44px;

      span:first-of-type {
        margin-right: 62px;
      }
    }

    .card-form__text {
      font-size: 10px;
    }

    .btn-success {
      @include max-screen(575px) {
        font-size: 18px;
      }
    }
  }
}

//-----profile-------

.profile-wrapper {
  padding-top: 174px;
  padding-bottom: 72px;

  @include max-screen(767px) {
    padding-top: 120px;
    padding-bottom: 40px;
  }

  .profile-wrapper__title {
    font-size: 42px;
    margin-bottom: 34px;

    @include max-screen(767px) {
      font-size: 32px;
    }
  }

  .btn {
    font-family: SofiaProLight;
    font-size: 16px;
    padding: 14px 24px;
    color: white;
    border-radius: 3px;

    @include max-screen(991px) {
      font-size: 14px;
    }
  }
}

.profile-nav {
  .profile-nav__menu {
    @include max-screen(767px) {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        margin-right: 10px;
      }
    }
  }

  .profile-nav__item {
    margin-bottom: 18px;

    a {
      font-family: SofiaProRegular;
      font-size: 16px;
      line-height: 12px;
      display: inline-block;
      min-width: 180px;
      color: #777777;
      border: 1px solid transparent;
      padding: 16px 0 16px 24px;
      border-radius: 30px;
      transition: 0.3s;

      &:hover {
        border: 1px solid #68b734;
        transition: 0.3s;
        border-radius: 30px;

      }
    }

    &.active {
      a {
        border-radius: 30px;
        background: #68b734;
        color: white;
      }
    }
  }

  .profile-menu-btn {
    position: relative;
    font-family: SofiaProRegular;
    text-align: center;
    border-radius: 18px;
    border: 1px solid #68b734;
    font-size: 16px;
    line-height: 12px;
    min-width: 180px;
    color: #777777;
    padding: 16px 0;
    display: none;
    cursor: pointer;
    transition: 0.2s;

    &:after {
      content: '';
      width: 16px;
      height: 16px;
      position: absolute;
      bottom: 0;
      transform: rotate(45deg);
      left: calc(50% - 8px);
      background: #f0f0f0;
      transition: 0.2s;
      opacity: 0;
    }

    &.nav__menu_open {
      background: #68b734;
      color: white;
      transition: 0.2s;

      &:after {
        content: '';
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: -8px;
        left: calc(50% - 8px);
        transform: rotate(45deg);
        background: #68b734;
        transition: 0.2s;
        opacity: 1;
      }
    }

    @include max-screen(991px) {
      font-size: 14px;
    }

    @include max-screen(767px) {
      display: inline-block;
    }
  }
}

.profile {
  .btn-success {
    &:hover {
      color: black;
    }
  }

  .form-control {
    border-width: 1px;
  }

  .profile__title {
    font-size: 21px;

    @include max-screen(767px) {
      font-size: 18px;
      margin-bottom: 26px !important;
    }
  }

  .profile__photo {
    width: 78px;
    height: 78px;

    img {
      max-width: 78px;
      max-height: 78px;
    }
  }

  .profile__photo-wrapper {
    margin-bottom: 26px;

    .hide {
      position: absolute;
      overflow: hidden;
      z-index: -1;
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
    }

    .btn-delete {
      @include max-screen(420px) {
        width: 186px;
        margin-top: 2px;
      }
    }
  }

  .profile-form {
    .form-group {
      margin-bottom: 15px;

      input, label, small, select {
        font-family: SofiaProRegular;
        font-size: 12px;
      }

      label {
        color: black;
      }

      textarea {
        height: 70px;
      }
    }

    .size-photo-wrap {
      margin-bottom: 31px;

      .size-photo {
        span {
          display: inline-block;
          text-align: center;
          font-size: 16px;
          color: black;
          background: #dbdbdb;
          margin-right: 16px;

          @include max-screen(420px) {
            font-size: 14px;
            margin-right: 0;
          }

          &:last-of-type {
            margin-right: 0;
          }
        }

        .size1 {
          width: 79px;
          height: 21px;
          line-height: 22px;

          @include max-screen(420px) {
            width: 70px;
          }
        }

        .size2 {
          width: 116px;
          height: 51px;
          line-height: 53px;

          @include max-screen(420px) {
            width: 95px;
          }
          @include max-screen(340px) {
            width: 85px;
          }
        }

        .size3 {
          width: 116px;
          height: 43px;
          line-height: 45px;

          @include max-screen(420px) {
            width: 95px;
          }
          @include max-screen(340px) {
            width: 85px;
          }
        }

        .size4 {
          width: 80px;
          height: 32px;
          line-height: 34px;
        }
      }
    }
  }
}

.profile-profile {
  .profile__title {
    margin-bottom: 45px;
  }
}

.profile-payment {
  .profile__title {
    margin-bottom: 55px;


  }
}

.profile-shipping {
  .profile__title {
    margin-bottom: 27px;
  }
}