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

//footer

footer {

  .top-footer {
    padding-top: 84px;
    padding-bottom: 86px;
    background-color: #5aa863;

    .social {
      h2 {
        color: #fff;
        font-size: 28px;
        letter-spacing: 5px;
        font-family: 'SofiaProRegular';
        font-weight: bold;
        margin-bottom: 30px;
        padding-top: 5px;
      }

      a {
        text-decoration: none;

        svg {
          width: 50px;
          height: 50px;
          fill: white;
          stroke: white;
          margin-right: 12px;
          transition: 0.3s;
          display: inline-block;

          &:hover {
            transform: rotate(180deg);
          }
        }
      }

      p {

        color: #fff;
        font-family: 'SofiaProRegular';
        font-size: 9px;
        position: absolute;
        bottom: 0;
      }
    }

    .service-link {
      ul {
        padding-left: 0;

        li {
          list-style-type: none;
          background-color: #6bb173;
          width: 100%;
          margin-bottom: 4px;
          transition: 0.3s;

          &:hover {
            transform: scale(1.1);
            background-color: #7bb982;
          }

          a {
            text-decoration: none;
            color: #fff;
            font-size: 17px;
            font-family: 'SofiaProRegular';
            padding: 20px 34px;
            display: block;

            svg {
              stroke: #fff;
              width: 24px;
              height: 24px;
              margin-right: 36px;
            }
          }
        }
      }
    }

    .quick-info {
      ul {
        padding-top: 0px;
        padding-left: 80px;

        li {
          list-style-type: none;
          margin-bottom: 21px;

          a {
            font-family: 'SofiaProRegular';
            font-size: 16px;
            color: #fff;
            text-decoration: none;
          }
        }
      }
    }
  }

  .lower-footer {
    padding-bottom: 62px;

    .page-width {
      width: 100%;
      max-width: none;

      .grid-top {
        svg {
          margin: 30px 15px;
          width: 280px;
          height: 24px;
          display: inline-block;
        }
      }

      .grid-bottom {
        flex-flow: row wrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;

        img {
          height: 70px;
          width: 70px;
          display: block;
          margin: 0 20px;
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  //footer
  footer {
    .top-footer {
      .service-link {
        ul {
          li {
            a {
              font-size: 15px;

              svg {
                margin-right: 12px;
              }
            }
          }
        }
      }
    }

    .lower-footer {
      .page-width {
        .grid-bottom {
          img {
            margin: 0 14px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 991px) {
  //footer
  footer {
    .top-footer {
      .social {
        a {
          svg {
            margin-bottom: 105px;
          }
        }
      }

      .quick-info {
        ul {
          padding-left: 60px;
        }
      }

      .service-link {
        ul {
          padding: 0;

        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  //footer
  footer {
    .top-footer {
      padding-top: 50px;
      padding-bottom: 50px;

      .social {
        a {
          svg {
            margin-bottom: 92px;
          }
        }
      }

      .service-link {
        ul {
          padding: 0;

          li {
            a {
              padding: 24px 32px;

              svg {
                margin-right: 17px;
              }
            }
          }
        }
      }

      .quick-info {
        ul {
          padding-left: 60px;

          li {
            margin-bottom: 24px;
          }
        }
      }
    }

    .lower-footer {
      padding-bottom: 10px;

      .page-width {
        .grid-bottom {
          img {
            height: 50px;
            width: 50px;
            margin: 0 17px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  //footer
  footer {
    .top-footer {
      .social {
        h2 {
          font-size: 19px;
        }
      }

      .service-link {
        ul {
          li {
            a {
              padding: 20px 10px;
              font-size: 14px;

              svg {
                margin-right: 5px;
              }
            }
          }
        }
      }

      .quick-info {
        ul {
          padding-left: 30px;

          li {
            margin-bottom: 22px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 575px) {
  //footer
  footer {
    .top-footer {
      padding-top: 30px;
      padding-bottom: 30px;

      .social {
        text-align: center;

        p {
          position: static;
        }

        a {
          svg {
            margin-bottom: 10px;
          }
        }
      }


      .service-link {
        ul {
          padding-left: 0;

          li {
            text-align: center;

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

      .quick-info {
        ul {
          padding-left: 0;
          display: flex;
          justify-content: space-between;

          li {
            text-align: center;
            margin-bottom: 0;
          }
        }
      }
    }

    .lower-footer {
      .page-width {
        .grid-bottom {
          img {
            height: 40px;
            width: 40px;
            margin: 0 18px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 360px) {
  //footer
  footer {
    .top-footer {
      .quick-info {
        ul {
          li {
            a {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 320px) {
  //footer
  footer {
    .top-footer {
      .quick-info {
        ul {
          li {
            a {
              font-size: 13px;
            }
          }
        }
      }
    }

    .lower-footer {
      .page-width {
        .grid-top {
          svg {
            margin: 30px 0;
          }
        }

        .grid.grid-bottom {
          img {
            height: 30px;
            width: 30px;
          }
        }
      }
    }
  }
}

.advertising {
  @include max-screen(767px) {
    padding: 0px 15px;
    .advertising-card-subtitle {
      font-size: 18px;
      line-height: 23px;
    }
    .advertising-card-title {
      font-size: 18px;
    }
    .advertising-card-list {
      font-size: 12px;
    }
  }
}

.products {
  padding: 127px 0 145px;
  @include max-screen(767px) {
    padding: 35px 15px 35px;
  }

  &.npod {
    padding-top: 40px;

    h3 {
      font-family: 'Nunito-Bold';
      font-size: 24px;
      color: #272727;
      line-height: 24px;
      padding-bottom: 40px;
      text-align: left;

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

  text-align: center;

  .item {
    background-color: #f8f9fb;
    border-radius: 12px;
    padding-top: 50px;
    padding-bottom: 20px;
    transition: 0.3s;

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

    img {
      display: block;
      width: 100%;
      height: 330px;
      margin-bottom: 20px;

      @include max-screen(1200px) {
        height: 270px;
      }
      @include max-screen(991px) {
        height: 210px;
      }
      @include max-screen(575px) {
        height: auto;
      }
    }

    .btn-outline-dark {
      padding: 13px 0px;
      font-family: SofiaProRegular;
      font-size: 12px;
      border: solid 2px #010101;
      border-radius: 30px;
      line-height: 1;
      display: block;
      max-width: 206px;
      margin: auto;
      text-align: center;
      color: black;
      transition: 0.3s;

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

      &:active {
        outline: none;
      }

      &:hover {
        background-color: black;
        color: white;
      }
    }
  }

  .name_product {
    font-family: 'Nunito-Bold';
    font-size: 1.125rem;
    line-height: 1.125rem;
    padding-top: 35px;
    text-align: center;
    height: 73px;
    overflow: hidden;

  }

  .reviews {
    text-align: center;
    display: inline-block;

    i {
      color: #ffba00;
      font-size: 1rem;
    }

    span {
      font-size: 0.75rem;
      line-height: 1rem;
      color: black;
      display: inline-block;
    }
  }
}

.container-fluid.position-absolute.main-navbar {
  z-index: 1;
}

//product_page

.product_page_header {
  height: 100vh;
  @include max-screen(767px) {
    height: auto;
  }

  .bg_beig {
    height: 100vh;
    background-color: #feefb7;
    text-align: center;

    img {
      max-width: 445px;
      display: block;
      width: 100%;
    }

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

    &.bg_greys {
      background-color: #edeae2;
    }

    &.bg_coffee {
      background-color: #f1eee6;
    }

    &.bg_blue {
      background-color: #dbebf5;
    }

    &.bg_pink {
      background-color: #f3d3d3;
    }

    &.bg_aqua {
      background-image: url("../images/bg_aqua.png");
      background-repeat: repeat;
    }

    &.bg_clear {
      background-image: url("../images/bg_clear.png");
      background-repeat: repeat;
    }

    &.bg_sour {
      background-image: url("../images/bg_sour.png");
      background-repeat: repeat;
    }
  }

  .bg_white {
    height: 100vh;
    background-color: white;
    @include max-screen(767px) {
      height: auto;
      padding-top: 35px;
    }

    h1 {
      font-family: 'Nunito-Bold';
      color: #272727;
      font-size: 2rem;
      line-height: 38px;
      text-align: center;
      width: 100%;
      @include max-screen(767px) {
        font-size: 18px;
        line-height: 23px;
        padding-top: 100px;
      }
      @include max-screen(575px) {
        padding-top: 0;
      }
    }

    .price {
      width: 100%;
      font-family: 'SofiaProSemiBold';
      color: #272727;
      font-size: 2rem;
      line-height: 32px;
      text-align: center;
      margin-bottom: 28px;
      @include max-screen(767px) {
        line-height: 40px;
        margin-bottom: 15px;
      }
    }

    .plus-minus-input {
      align-items: center;
      width: 100px;
      border: solid 2px #b8b8b8;
      justify-content: center;
      border-radius: 30px;
      margin-bottom: 25px;

      i {
        font-size: 13px;
      }

      .input-group-field {
        text-align: center;
        margin-left: 0rem;
        margin-right: 0rem;
        padding: 6px 0;
        width: 50px;
        border: none;

        &::-webkit-inner-spin-button,
        ::-webkit-outer-spin-button {
          appearance: none;
        }
      }

      @include max-screen(767px) {
        width: 100%;
        max-width: 330px;
        padding: 3px;
        border-radius: 25px;
        margin-bottom: 8px;
        border: solid 2px #b8b8b8;
      }

      .input-group-button {
        .circle {
          border-radius: 50%;
          padding: 0.25em 0em;
          border: none;
          background-color: transparent;

          &:focus {
            outline: none;
          }
        }
      }
    }

    .btn-outline-dark {
      padding: 13px 0px;
      font-family: SofiaProRegular;
      font-size: 12px;
      border: solid 2px #010101;
      border-radius: 30px;
      display: block;
      margin: auto;
      text-align: center;
      color: black;
      transition: 0.3s;

      &:active {
        outline: none;
      }

      &:hover {
        background-color: black;
        color: white;
      }

      line-height: 1;
      max-width: 330px;
      width: 100%;
      margin-bottom: 8px;

      &.write {
        color: #cccccc;
        border: solid 2px #cccccc;
        @include max-screen(767px) {
          margin-bottom: 35px;
        }
        &:hover {
          background-color: #cccccc;
          color: white;
        }
      }
    }

    .subscribe {
      padding: 13px 0px;
      font-family: SofiaProRegular;
      font-size: 12px;
      background-color: #50af38;
      border-radius: 30px;
      display: block;
      margin: auto;
      text-align: center;
      color: white;
      transition: 0.3s;
      line-height: 1;
      max-width: 330px;
      width: 100%;
      border: solid 2px #50af38;

      &:active {
        outline: none;
      }

      &:hover {
        background-color: transparent;
        color: black;
      }
    }
  }
}

.rate_rew {
  line-height: 1;
  padding: 11px 0;
  min-width: 45px;
  text-align: center;
  background-color: #ffba00;
  border-radius: 6px;
  font-family: SofiaProRegular;
  color: black;
  font-size: 19px;
  display: inline-block;
  margin-top: 14px;
  margin-bottom: 6px;
  font-weight: 900;
}

.reviews {
  text-align: center;
  display: block;
  margin-bottom: 14px;
  /*@include max-screen(767px) {
      margin-bottom: 35px;
    }*/
  i {
    color: #ffba00;
    font-size: 1rem;
  }

  span {
    font-size: 0.75rem;
    line-height: 0.75rem;
    color: black;
    display: block;
    padding-top: 4px;
    font-weight: 900;
    font-family: SofiaProRegular;
  }
}

.tabs_description {
  background-color: #f8f8f8;
  padding: 50px 0 70px;
  @include max-screen(767px) {
    padding: 35px 15px;
  }

  .nav-tabs {
    display: flex;
    border: solid 1px #ededed;
    border-radius: 12px;
    flex-wrap: nowrap;
    @include max-screen(767px) {
      flex-wrap: wrap;
      border-radius: 0;
    }

    .nav-item {
      width: 100%;

      .nav-link {
        background-color: white;
        border-radius: 0;
        border-right: 1px solid #ededed;
        border-top: none;
        border-left: 0px;
        border-bottom: 1px solid #ededed;
        text-align: center;
        font-family: SofiaProRegular;
        color: #545454;
        font-size: 20px;
        position: relative;
        height: 100%;
        @include max-screen(991px) {
          font-size: 18px;
        }
        @include max-screen(767px) {
          margin-bottom: 20px;
          height: auto;
        }

        &.active {
          background-color: #68b734;
          border-radius: 0;
          color: white;

          &:after {
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            background-color: #68b734;
            transform: rotate(47deg);
            position: absolute;
            left: 50%;
            margin-left: -10px;
            bottom: -10px;
          }
        }

        &:hover {
          border-bottom: 1px solid #ededed;
          border-top: none;
          border-left: 0px;
        }
      }

      &:last-of-type {
        .nav-link {
          border: none;
          border-radius: 0 12px 12px 0;
          @include max-screen(767px) {
            border-radius: 0;
          }
        }
      }

      &:first-of-type {
        .nav-link {
          border: none;
          border-radius: 12px 0 0 12px;
          @include max-screen(767px) {
            border-radius: 0;
          }
        }
      }
    }
  }

  .tab-content {
    padding-top: 57px;

    h3 {
      font-family: SofiaProRegular;
      color: #272727;
      line-height: 20px;
      font-size: 20px;
      @include max-screen(991px) {
        line-height: 18px;
        font-size: 24px;
      }

      &.pb-5 {
        @include max-screen(991px) {
          padding-bottom: 24px !important;
        }
        @include max-screen(767px) {
          padding-bottom: 15px !important;
        }
      }
    }

    p {
      font-family: SofiaProRegular;
      font-weight: 500;
      color: black;
      opacity: 0.8;
      line-height: 38px;
      font-size: 24px;
      min-height: 302px;
      @include max-screen(991px) {
        line-height: 30px;
        font-size: 18px;
        min-height: 211px;
      }
      @include max-screen(767px) {
        line-height: 23px;
        font-size: 12px;
        min-height: auto;
        padding-bottom: 10px;
      }
    }
  }
}

.link_share {
  display: inline-block;
  line-height: 38px;
  min-width: 147px;
  margin: 0 6px;
  background-color: #4868ad;
  font-size: 11px;
  color: white;
  font-family: SofiaProRegular;
  text-align: center;
  border-radius: 6px;
  transition: 0.3s;
  border: solid 1px transparent;
  @include max-screen(1199px) {
    min-width: 100px;
  }
  @include max-screen(991px) {
    min-width: 90px;
    line-height: 30px;
  }

  @include max-screen(767px) {
    min-width: 71px;
    margin: 0 3px;
  }
  @include max-screen(575px) {
    min-width: 90px;
  }
  @include max-screen(359px) {
    min-width: 77px;
  }

  i {
    margin-right: 20px;
    font-size: 15px;
    position: relative;
    bottom: -2px;
    @include max-screen(767px) {
      margin-right: 8px;
    }
  }

  &:hover {
    color: #4868ad;
    background-color: white;
    border: solid 1px #4868ad;

    i {
      color: #4868ad;
    }
  }

  &.green {
    background-color: #62cf72;

    &:hover {
      color: #62cf72;
      border: solid 1px #62cf72;
      background-color: white;

      i {
        color: #62cf72;
      }
    }
  }

  &.blue {
    background-color: #528bf7;

    &:hover {
      color: #528bf7;
      border: solid 1px #528bf7;
      background-color: white;

      i {
        color: #528bf7;
      }
    }
  }
}

.faq {
  padding: 65px 0;
  @include max-screen(767px) {
    padding: 20px 0;
  }

  h2 {
    font-family: 'Nunito-Bold';
    font-size: 24px;
    color: #272727;
    margin-bottom: 35px;
    @include max-screen(767px) {
      margin-bottom: 20px;
      padding: 0px 15px;
    }
  }

  .card {
    border-left: 0;
    border-right: 0;
    border-radius: 0;

    .card-header {
      background-color: transparent;
      border-bottom: 0;

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

    button {
      color: #272727;
      font-size: 17px;
      font-family: 'SofiaProSemiBold';
      outline: none;
      border: none;
      padding: 20px 15px 20px 0;
      opacity: 1;
      position: relative;
      border-radius: 0;
      @include max-screen(991px) {
        font-size: 20px;
      }
      @include max-screen(768px) {
        font-size: 18px;
        padding: 7px 15px 7px 0;
      }

      &:focus {
        outline: none;
        box-shadow: none;
        text-decoration: none;
      }

      &:hover {
        text-decoration: none;
      }

      &:after {
        content: "\f077";
        font-weight: 900;
        font-family: "Font Awesome 5 Free";
        position: absolute;
        right: 0;
        top: 30%;
        transform: rotate(180deg);

        @include max-screen(768px) {
          right: -10px;
          top: 22%;
        }
      }

      &.collapsed {
        opacity: 0.5;
        transition: 0.3s;

        &:after {
          transform: rotate(0deg);
        }
      }
    }

    .card-body {
      font-size: 24px;
      color: #000000;
      font-family: 'SofiaProSemiBold';
      @include max-screen(991px) {
        font-size: 16px;
        padding: 0 20px 10px 20px;
      }
      @include max-screen(768px) {
        font-size: 12px;
        line-height: 23px;
      }
    }
  }

  .accordion {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

.rewievs_block {
  background-color: #f8f8f8;
  padding-top: 34px;
  padding-bottom: 37px;

  h3 {
    font-family: 'Nunito-Bold';
    color: #272727;
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 22px;
  }

  .rate_rew {
    margin-top: 0;
  }

  .btn-outline-dark {
    padding: 13px 0px;
    font-weight: 900;
    font-family: SofiaProRegular;
    font-size: 12px;
    border: solid 2px #010101;
    border-radius: 30px;
    line-height: 1;
    display: block;
    max-width: 206px;
    margin: auto;
    text-align: center;
    color: black;
    transition: 0.3s;

    &:active {
      outline: none;
    }

    &:hover {
      background-color: black;
      color: white;
    }
  }
}

.rewievs_dons {
  background-color: #f8f8f8;

  .rew {
    display: flex;
    width: 100%;
    background-color: white;
    justify-content: space-between;
    padding: 35px 55px 35px;
    border-radius: 12px;
    margin-bottom: 8px;
    @include max-screen(767px) {
      padding: 25px 15px 25px;
      display: block;
    }

    h3 {
      font-family: SofiaProRegular;
      font-size: 19px;
      color: #333333;
      line-height: 19px;
      margin-bottom: 18px;

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

    p {
      color: #333333;
      font-size: 12px;
      line-height: 19px;
      font-family: SofiaProRegular;
    }

    .name_r {
      width: 250px;

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

      .verf {
        font-size: 12px;
        font-family: SofiaProRegular;
        color: #68b734;
        margin-bottom: 7px;

        i {
          font-size: 15px;
          margin-right: 4px;
        }
      }

      .reviews {
        text-align: left;
        @include max-screen(767px) {
          margin-bottom: 20px;
        }

        i {
          color: #ffba00;
          font-size: 1rem;
        }

        span {
          font-size: 0.75rem;
          line-height: 1rem;
          color: #666666;
          display: inline-block;
        }
      }
    }

    .decr_r {
      max-width: 100%;
    }
  }
}

.pagination {
  align-items: center;
  padding-top: 20px;
  padding-bottom: 50px;

  .page-item:first-child .page-link {
    border: solid 2px #000;
    border-radius: 28px;
    margin-right: 40px;
    background-color: transparent;
    transition: 0.3s;
    line-height: 37px;
    padding: 0 37px;

    @include max-screen(576px) {
      padding: 0 20px;
      margin-right: 30px;
    }

    &:hover {
      background-color: black;
      color: white;
    }
  }

  .page-link {
    font-weight: 900;
    color: black;
    font-size: 12px;
    font-family: SofiaProRegular;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    transition: 0.3s;
    display: inline-block;
    min-width: 30px;
    margin: 0 2px;

    &:hover {
      background-color: black;
      color: white;
    }
  }

  .page-item:last-child .page-link {
    border: solid 2px #000;
    border-radius: 28px;
    margin-left: 40px;
    background-color: transparent;
    transition: 0.3s;
    line-height: 37px;
    padding: 0 37px;

    @include max-screen(576px) {
      margin-left: 30px;
      padding: 0 20px;
    }

    &:hover {
      background-color: black;
      color: white;
    }
  }
}

.about_text {
  padding: 50px 0;
  @include max-screen(767px) {
    padding: 25px 15px;
  }

  h4 {
    color: #68b734;
    font-size: 20px;
    font-family: SofiaProRegular;
    line-height: 20px;
    margin-bottom: 40px;
    @include max-screen(767px) {
      margin-bottom: 25px;
    }
  }

  p {
    font-family: 'Nunito-SemiBold';
    font-size: 32px;
    color: #333333;
    line-height: 39px;
    @include max-screen(767px) {
      font-size: 12px;
      line-height: 23px;
      margin-bottom: 0px;
    }
  }

  .btn-outline-dark {
    padding: 12px 0px;
    font-family: SofiaProRegular;
    font-size: 18px;
    border: solid 2px #010101;
    border-radius: 30px;
    line-height: 1;
    display: block;
    max-width: 340px;
    margin: auto;
    text-align: center;
    color: black;
    transition: 0.3s;
    width: 100%;
    margin-bottom: 18px;

    &:active {
      outline: none;
    }

    @include max-screen(767px) {
      padding: 10px 0px;
      font-size: 14px;
      line-height: 14px;
    }

    &:hover {
      background-color: black;
      color: white;
    }

    &:last-of-type {
      margin-bottom: 45px;
      @include max-screen(767px) {
        margin-bottom: 0px;
      }
    }
  }

  .col-12.col-sm-6.d-flex.align-content-end.flex-wrap {
    @include max-screen(1200px) {
      align-content: center !important;
    }
  }
}

.about_text_2 {
  padding: 75px 0 50px;
  @include max-screen(767px) {
    padding: 25px 15px 0px;
  }

  p {
    font-family: 'Nunito-SemiBold';
    font-size: 22px;
    color: #333333;
    opacity: 0.8;
    line-height: 27px;
    padding: 60px 30px 0;
    margin-bottom: 25px;
    @include max-screen(767px) {
      font-size: 12px;
      line-height: 23px;
      padding: 25px 0px 0;
    }
  }
}

.modal-content {
  border: solid 12px black;
  border-radius: 0 !important;

  .modal-header {
    background-image: url("../images/modal_bg.png");
    background-size: cover;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center center;

    .close {
      color: white;
      opacity: 1;
      background-color: black;
      border-radius: 50%;
      margin-right: 7px;
      margin-top: 7px;
      height: 50px;
      width: 50px;

      span {
        position: relative;
        top: -6px;
      }

      &:focus {
        outline: none;
      }
    }
  }

  .modal-body {
    padding: 26px 38px 50px 26px;

    h3 {
      font-family: 'Nunito-Bold';
      font-size: 50px;
      color: #272727;
      line-height: 40px;
      margin-bottom: 10px;
    }

    p {
      font-family: 'SofiaProRegular';
      font-weight: bold;
      font-size: 16px;
      color: #010101;
    }

    .form-group {
      .form-control {
        border: solid 2px #acacac;
        border-radius: 22px;
        line-height: 20px;
        height: 39px;
        font-family: 'SofiaProRegular';
        font-size: 16px;
        color: #010101;
      }
    }

    .btn-primary {
      background-color: #68b734;
      padding: 11px 37px;
      font-family: SofiaProRegular;
      font-size: 16px;
      border: none;
      border-radius: 30px;
      line-height: 1;
    }

    a {
      font-family: SofiaProRegular;
      font-size: 16px;
      display: inline-block;
      margin-left: 30px;
      color: #272727;
      border-bottom: 1px solid;
    }
  }
}

.card-form__product {
  border-bottom: 1px solid #d8d8d9;

  .price {
    &:before {
      @include max-screen(576px) {
        content: "Price";
        font-family: Poppins-Regular;
        font-size: 13px;
        color: black;
        display: block;
        margin-bottom: 15px;
      }
    }
  }

  .Quantity {
    @include max-screen(576px) {
      flex-wrap: wrap;
    }

    &:before {
      @include max-screen(576px) {
        content: "Quantity";
        font-family: Poppins-Regular;
        font-size: 13px;
        color: black;
        display: block;
        text-align: center;
        width: 100%;
        margin-bottom: 5px;
      }
    }
  }

  .Total {
    @include max-screen(576px) {
      flex-wrap: wrap;
    }

    &:before {
      @include max-screen(576px) {
        content: "Total";
        font-family: Poppins-Regular;
        font-size: 13px;
        color: black;
        display: block;
        text-align: center;
        width: 100%;
        margin-bottom: 15px;
      }
    }
  }
}

.card-form__subtitle {
  @include max-screen(576px) {
    text-align: center;
  }
}

.card-form__subtitle.cart-subtitle {
  padding-top: 65px;
}

.profile-wrapper {
  &.p-t-20 {
    padding-bottom: 20px;
  }

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
  }

  .card {
    border: none;
    margin-bottom: 1.875rem;
    transition: all .3s ease;
  }

  .card-body {
    flex: 1 1 auto;
    padding: 35px;

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

  .img-thumbnail {
    padding: .25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
  }

  .list-reset {
    margin: 0;
    padding: 0;
  }

  .list-reset, .no-bullets {
    list-style: none;
  }

  .m-t-40 {
    margin-top: 40px !important;
  }

  h6, ol li, p, ul li {
    font-size: .875rem;
  }

  strong {
    font-weight: 500;
  }

  .m-b-5 {
    margin-bottom: 5px !important;
  }

  .card .card-header {
    padding: 15px 20px;
    position: relative;
    border-bottom: 1px solid rgba(234, 243, 253, .9);
    background-color: transparent;
    min-height: 45px;
    font-weight: 300;
    font-size: 1rem;
  }

  .p-0 {
    padding: 0 !important;
  }

  .nav-tabs {
    border-bottom: 1px solid rgba(210, 221, 234, .5);
    margin-bottom: 20px;
  }

  .p-l-30 {
    padding-left: 30px !important;
  }

  .nav-tabs .nav-item {
    margin-bottom: -1px;
  }

  .nav .nav-item .nav-link.active, .nav .nav-item .nav-link:active,
  .nav .nav-item .nav-link:hover, .nav-tabs.primary-tabs .nav-item .nav-link.active.show,
  .nav-tabs.primary-tabs .nav-item .nav-link:hover,
  .nav-tabs.primary-tabs .nav-item.show .nav-link {
    color: #272727;
    font-size: 12px;
    font-family: 'SofiaProRegular';
  }

  .card.card-tabs .card-header .nav.nav-tabs li a {
    font-size: .875rem;
    height: 60px;
    padding: 1.4rem 1.5rem 1.3rem;
  }

  .nav-tabs.primary-tabs .nav-item .nav-link.active {
    border-bottom: solid 3px #5aa863;
  }

  .nav-tabs .nav-item .nav-link {
    border: none;
    color: #718599;
    font-size: .875rem;
    transition: all .15s ease;
    border-bottom: 1px solid transparent;
    border-radius: 0;
  }

  .p-t-20 {
    padding-top: 0px !important;
  }

  p {
    color: #272727;
    font-family: 'SofiaProRegular';
    opacity: 0.8;
    line-height: 19px;
    font-size: 12px !important;
  }

  .card-title {
    margin-bottom: .75rem;
    font-size: 12px;
    font-family: 'SofiaProRegular';
    color: #272727;
  }

  .p-t-10 {
    padding-top: 10px !important;
  }

  .p-b-10 {
    padding-bottom: 10px !important;
  }

  h6, ol li, p, ul li {
    font-size: .875rem;
  }

  .w-150 {
    width: 150px !important;
  }

  .name_prof {
    font-family: 'SofiaProRegular';
    line-height: 20px;

    h5 {
      font-size: 12px;
      padding-top: 10px;
      color: #272727;
    }

    p {
      &.text-muted {
        font-size: 12px;
        color: #272727;
        opacity: 0.7;
      }
    }
  }

  .blockquote-footer, .text-muted {
    font-family: 'SofiaProRegular';
    line-height: 20px;
    font-size: 12px;
    color: #272727;

    strong {
      display: inline-block;
      min-width: 60px;
    }
  }

  .profile-wrapper_bottom {
    span {
      font-family: 'SofiaProRegular';
      line-height: 20px;
      font-size: 12px;
      color: #272727;
    }
  }
}