@media(min-width:1200px) {
    .container {
        max-width: 1170px;
    }
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width:576px) {
    .container {
        max-width: 540px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 720px
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1140px
    }
}



.skin-routine {
  display: flex;
  flex-direction: column;
  background: #fff1e1;
  padding-bottom: 30px;
  h1 {
    font-size: 32px;
    line-height: 48px;
    color: #bc6935;
    text-align: center;
    border-bottom: 3px solid #bc6935;
    width: fit-content;
    margin: 80px auto;
  }
  a {
    background: #ed6625;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    display: inline-block;
    padding: 11px 40px;
    margin-bottom: 20px;
    width: fit-content;
    margin: auto;
  }
  .block {
    display: flex;
    flex-direction: row;
    margin-bottom: 100px;
    height: 400px;
    .img,
    .text-content {
      width: 50%;
      flex: 50%;

      img {
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        display: block;
      }
    }
  }
  .block-1,
  .block-3 {
    flex-direction: row-reverse;
  }
  .text-content {
    position: relative;
    padding-left: 100px;
    padding-right: 50px;
    .index {
      position: absolute;
      left: 0;
      top: -6px;
      font-size: 90px;
      line-height: 90px;
      width: 90px;
      text-align: right;
      color: #e6cbad;
    }
  }

  .intro,
  .ingredients,
  .benefits {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 20px;
    background-color: #fff1e1;
    padding: 0;
    margin-bottom: 10px;
  }
  .benefits .item {
    margin-bottom: 5px;
    margin-left: 20px;
    position: relative;
  }
  .benefits .item:before {
    content: " ";
    background: url("{{ 'checked.png' | asset_url }}") 0 0 no-repeat;
    background-size: 15px 12px;
    width: 15px;
    height: 12px;
    position: absolute;
    left: -20px;
    top: 50%;
    margin-top: -6px;
  }
  .title {
    font-size: 16px;
    line-height: 26px;
    color: #bc6935;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .intro {
    margin-bottom: 30px;
    .title {
      font-size: 25px;
      line-height: 30px;
    }
  }
}
.july-offer-block {
  padding: 80px 50px 0;

  .button {
    font-size: 17px;
    color: #fff;
    background-color: #ce6e45;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 14px 15px;
    text-align: center;
    width: auto;
    transition: all 0.6s ease-in-out;
    text-transform: uppercase;
    display: flex;
    border: 0;
    margin: auto;
    justify-content: center;
  }

  h1 {
    font-size: 32px;
    line-height: 48px;
    color: #bc6935;
    text-align: center;
    border-bottom: 3px solid #bc6935;
    width: fit-content;
    margin: 80px auto;
    line-height: 76px;
    padding: 0 50px;
  }
  .image {
    margin-bottom: 30px;
  }
  margin-bottom: 10px;

  .savings span {
    padding: 10px;
    background-color: #c5ffb2;
    color: #2ba204;
    font-weight: 600;
  }

  .sample[data-selected="sample-kit"] .image img.discovery-kit,
  .sample[data-selected="discovery-kit"] .image img.sample-kit,
  .sample[data-selected="discovery-kit"] .after.sample-kit,
  .sample[data-selected="sample-kit"] .after.discovery-kit,
  .sample[data-selected="discovery-kit"] .before.sample-kit,
  .sample[data-selected="sample-kit"] .before.discovery-kit,
  .sample[data-selected="discovery-kit"] .title.sample-kit,
  .sample[data-selected="sample-kit"] .title.discovery-kit,
  .sample[data-selected="discovery-kit"] .savings .sample-kit,
  .sample[data-selected="sample-kit"] .savings .discovery-kit {
    display: none;
  }
  .sample[data-selected="discovery-kit"] .image img.discovery-kit,
  .sample[data-selected="sample-kit"] .image img.sample-kit {
    display: block;
  }
  .sample[data-selected="sample-kit"] .after.sample-kit,
  .sample[data-selected="discovery-kit"] .after.discovery-kit,
  .sample[data-selected="sample-kit"] .before.sample-kit,
  .sample[data-selected="discovery-kit"] .before.discovery-kit {
    display: flex;
  }

  .sample {
    padding: 0 30px;
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-bottom: 5px;
    .title {
      font-size: 32px;
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 50px;

      /*   */
      font-size: 18px;
      line-height: 30px;

      .title {
        font-weight: 600;
        font-family: Verdana;
        font-size: 22px;
        line-height: 28.5px;
      }

      button.button,
      a.button {
        margin: 0 0 5px 0 !important;
        width: 100%;
        background-color: #b68057;
        cursor: pointer;
      }
      .size {
        margin-top: 30px;
        margin-bottom: 20px;
        .size-selector {
          list-style-type: none;
          display: flex;
          flex-direction: row;

          li {
            display: flex;
            flex-direction: column;
            width: 50%;
            flex: 50%;
            margin: 0 5px;
            input {
              display: none;
            }
            label {
              background-color: #e8cdaf;
              margin: 0 0 5px 0;
              cursor: pointer;
            }
            label:first-of-type {
              margin-right: 5px;
              cursor: pointer;
            }
            label:last-of-type {
              margin-left: 5px;
              cursor: pointer;
            }
            span {
              text-align: left;
            }
            span.centered {
              text-align: center;
              font-weight: 600;
            }
          }
          li:first-of-type {
            margin-left: 0;
            label {
              margin-left: 0;
            }
          }
          li:last-of-type {
            margin-right: 0;
            label {
              margin-right: 0;
            }
            span {
              padding-left: 5px;
            }
          }

          input[type="radio"]:checked + label {
            background-color: #b68057;
            cursor: pointer;
          }
        }
      }
    }
    .prices {
      display: flex;
      justify-content: center;
      .before {
        color: #939598;
        text-decoration: line-through;
      }
      span {
        padding: 10px;
      }
    }
    .shop-individually {
      margin: 30px auto 0;
      color: #b68057;
      padding-right: 20px;
      position: relative;
      width: fit-content;
      text-decoration: underline;
    }
    .shop-individually:after {
      content: " ";
      display: inline-block;
      background: url("{{ 'drop-down-icon.png' | asset_url }}") 0 0 no-repeat;
      background-size: 14px 14px;
      width: 14px;
      height: 14px;
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -5px;
    }
    .shop-individually:not(.collapsed):after {
      transform: rotate(180deg);
    }
  }
  .sample > div {
    width: 50%;
    flex: 50%;
  }
  .shopping-options {
    display: flex;
    flex-direction: column;
    .individual-item {
      width: 100%;
      border-bottom: 1px solid #bf8e68;
      padding: 10px;
      display: flex;
      flex-direction: row;
      .button {
        margin-right: 0;
      }

      div.img {
        height: 100px;
        width: 140px;
      }
      img {
        height: 100%;
        margin: auto;
        display: block;
      }
      .product-title {
        font-weight: 600;
        margin: auto 0;
      }
    }
    .individual-item:first-of-type {
      border-top: 1px solid #bf8e68;
    }
    .button {
      background-color: #b68057;
      cursor: pointer;
    }
  }

  .shopping-options.container.collapsed {
    display: none;
  }
}
.july-offer-block > h1 {
  margin-top: 0;
}

.landing-page-july,
.landing-page-july.landing-page-september {
  .m-t-30 {
    margin-top: 30px !important;
  }
  /* background-color: #fff1e1; */
  span,
  button,
  div {
     ;
  }

  .landing-page-july h1 {
    font-size: 32px;
    line-height: 48px;
    color: #bc6935;
    text-align: center;
    border-bottom: 3px solid #bc6935;
    width: fit-content;
    margin: 80px auto;
  }
  /* .title {
    font-size: 16px;
    line-height: 26px;
    color: #bc6935;
    margin-bottom: 10px;
  } */

  .landing-page-july .para{
        margin: 0;
    font-size: 18px;
    letter-spacing: 0px;
    line-height: 150%;
    font-weight: 300;
  }

  .button {
    font-size: 17px;
    color: #fff;
    background-color: #ce6e45;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 14px 15px;
    text-align: center;
    width: auto;
    transition: all 0.6s ease-in-out;
    text-transform: uppercase;
    display: flex;
    border: 0;
    margin: auto;
    justify-content: center;
  }

  .elements {
    background: #dfb59d;
    height: 680px;
    position: relative;
    display: flex;
    flex-direction: row;
    color: #fff1e1 !important;
    img {
      max-height: 100%;
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: -webkit-fill-available;
      text-align: center;
      span {
        display: flex;
        text-align: center;
        margin: 0 auto;
      }
      .sub-title,
      .sub-title .bold {
        font-family: "Lato", sans-serif;
        font-style: italic;
        font-size: 50px;
        line-height: 70px;
        text-transform: none !important;
        font-weight: 300;
        margin-bottom: 0;
      }
      .sub-title .bold {
        font-weight: 700;
        margin-bottom: 0;
      }
      .title {
        font-family: "Lato", sans-serif !important;
        margin-bottom: 0 !important;
      }
      .title.type-1 {
        font-size: 50px;
        line-height: 65px;
      }
      .title.type-2 {
        font-size: 50px;
        line-height: 50px;
        max-width: 720px;
      }
      .big-title {
        font-family: "Lora", serif;
        font-size: 200px;
        line-height: 200px;
        font-style: italic;
        margin-bottom: 0 !important;
      }
    }

    .title {
      font-size: 21pt;
      line-height: 25pt;
      font-family: gabriela_altmedium;
    }
  }

  .product-details {
    max-width: 930px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 20px 0;
    span {
      /*   */
      font-size: 18px;
      line-height: 30px;
      margin-bottom: 40px;
    }
    img {
      max-width: 90px;
      margin: auto;
    }
  }

  .balance-block {
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 20px;
    .part {
      display: flex;
      flex-basis: 1;
      flex-direction: column;
      min-width: 300px;
      justify-content: center;
      text-align: center;
      margin: 0;
      span {
        /*   */
        font-size: 18px;
        line-height: 30px;
      }
      .img {
        height: 160px;
        width: 100%;
        display: block;
        margin-bottom: 30px;
        img {
          height: 100%;
          width: auto;
          margin: 0;
        }
      }

      font-size: 14px;
      line-height: 26px;
      .title {
        color: #bc6935;
        font-weight: 600;
        /*   */
        font-size: 22px;
        line-height: 28.5px;
      }
    }
  }

  .skin-routine {
    .block {
      .text-content {
        span.title {
          font-size: 18px;
          line-height: 30px;
        }
        span {
          font-size: 16px;
          line-height: 28px;
          /*   */
        }
      }
    }
  }

  .as-seen-in {
    text-align: center;
    padding: 50px 0;
    margin: 50px 0;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    display: flex;
    flex-direction: column;
    .title {
      font-size: 25px;
      line-height: 30px;
    }
    img {
      max-width: 800px;
      margin: auto;
    }

    .logos {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-self: center;
      width: 800px;
    }
    .logos > div {
      margin: auto;
    }
    .yoga {
      display: block;
      background: url("{{ 'NY-yoga-and-life-logo.png' | asset_url }}") 0 0
        no-repeat;
      width: 60px;
      height: 60px;
      background-size: 60px 60px;
    }
    .bbs {
      display: block;
      background: url("{{ 'bbs.png' | asset_url }}") 0 0 no-repeat;
      width: 56px;
      height: 50px;
      background-size: 56px 50px;
    }

    .organic-spa {
      display: block;
      background: url("{{ 'organic-spa.png' | asset_url }}") 0 0 no-repeat;
      width: 129px;
      height: 25px;
      background-size: 129px 25px;
    }
    .wwd {
      display: block;
      background: url("{{ 'wwd.png' | asset_url }}") 0 0 no-repeat;
      width: 86px;
      height: 25px;
      background-size: 86px 25px;
    }
    .spirit {
      display: block;
      background: url("{{ 'spiritualityhealth.png' | asset_url }}") 0 0
        no-repeat;
      width: 84px;
      height: 40px;
      background-size: 84px 40px;
    }
    .hl {
      display: block;
      background: url("{{ 'HL-WinnersBadge2020.png' | asset_url }}") 0 0
        no-repeat;
      width: 86px;
      height: 60px;
      background-size: 86px 60px;
    }
    .american-spa {
      display: block;
      background: url("{{ 'american-spa.png' | asset_url }}") 0 0 no-repeat;
      width: 100px;
      height: 25px;
      background-size: 100px 25px;
    }
  }

  .how-to-care {
    color: #414141;

    span {
      font-size: 16px;
      line-height: 28px;
       
    }
    .intro {
      h1 {
        color: #414141;
        padding: 0 50px;
        margin-bottom: 10px;
        border-bottom: 3px solid black;
        line-height: 76px;
      }
      text-align: center;
      margin-bottom: 50px;
    }

    .row {
      display: flex;
      flex-direction: row;
      color: #414141;
      div {
        width: 50%;
        flex: 50%;
        max-height: 400px;
      }
      .text {
        padding: 50px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        line-height: 28px;
        margin: auto;
      }
      .title {
        font-weight: 600;
        color: #414141;
        font-size: 16px;
        line-height: 28px;
      }
    }
    .row-2 {
      flex-direction: row-reverse;
    }
  }

  .product-overview {
    margin: 50px 0;
    img {
      width: 100%;
    }
  }

  .look-for-ingredients {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 50px;
    color: #414141;
    .img {
      height: 150px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      .ingredient {
        height: 150px;
        width: 150px;
        background-position: 50% 50% !important;
        background-size: cover !important;
        background-repeat: no-repeat;
        border-radius: 75px;
      }
      .i-1 {
        background-image: url("{{ 'ingredients-1.jpg' | asset_url }}");
      }
      .i-2 {
        background-image: url("{{ 'ingredients-2.jpg' | asset_url }}");
        margin-left: -30px;
      }
      .i-3 {
        background-image: url("{{ 'ingredients-3.jpg' | asset_url }}");
        margin-left: -30px;
      }
    }
    span {
      max-width: 300px;
      margin: 0 auto;
    }
    .title {
      color: #414141;
      margin-top: 30px;
      margin-bottom: 10px;
    }
    .button {
      margin-top: 30px;
    }
  }

  .manufacturing-process {
    border-bottom: 1px solid #bc6935;
    padding-bottom: 40px;
    .container {
      display: flex;
      flex-direction: column;
      text-align: center;
    }
    .title {
      font-size: 32px;
      line-height: 48px;
    }
    span {
      font-size: 16px;
      line-height: 28px;
       
    }
  }

  .words-from-customers {
    color: #414141;
    text-align: center;
    .title {
      color: #414141;
      font-size: 32px;
      line-height: 48px;
      margin-bottom: 50px;
      display: block;
    }
    .content {
      display: flex;
      flex-direction: row;
      .image {
        width: 40%;
        flex: 40%;
        img{ max-width: 100%; }
      }
      .text {
        width: 60%;
        flex: 60%;
        padding: 50px;
        margin: auto 0;
        display: flex;
        flex-direction: column;
        text-align: left;

        .stars {
          max-width: 120px;
          margin: 20px 0;
        }
        .name {
          font-weight: 600;
          margin-top: 20px;
        }
        span {
          font-size: 16px;
          line-height: 28px;
           
        }
      }
      .labels {
        justify-content: space-around;
        display: flex;
      }
    }
  }

  .faq {
    display: flex;
    flex-direction: column;
    color: #414141;
    margin-top: 50px;
    padding-bottom: 100px;

    .icon {
      max-width: 90px;
      margin: auto;
      margin-bottom: 20px;
    }
    .title {
      margin: 0 auto 30px;
      font-family: "Playfair Display", serif;
      font-size: 38px;
      letter-spacing: 2pt;
      color: #414141;
    }
    dt {
      font-weight: 400;
    }
    .accordion-heading a.card-link.open i:before {
      content: "\f068";
    }

    .accordion-heading {
      padding: 20px 40px;
    }

    .accordion-group:first-child .accordion-heading {
      border-top: none;
    }
  }

  .spr-summary-starrating {
    display: block;
  }
  .reviews-io-rows-block {
    margin-top: 20px;
  }
  .spr-summary,
  .spr-starrating {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .filter-text,
  .overall-review-stars {
    display: none;
  }
  .spr-review {
    .left-block {
      display: none;
    }
    .right-block {
      max-width: 100%;
      flex: 0 0 100%;
    }
  }

  .faq {
    #accordion_content {
      .item {
        margin: 10px 0;
      }
      .single {
        margin: 10px 0;
      }
    }
  }

  .review-pagination {
    margin-bottom: 0;
  }
  .spr-header {
    margin-bottom: 20px;
  }
}

.vata-landing-page.landing-page-july.landing-page-september {
  .elements {
    .content {
      .title.type-2 {
        max-width: 500px;
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  .skin-routine {
    .block {
      flex-direction: column;
      height: auto;
      margin-bottom: 5px;
      .img {
        width: 100%;
        flex: 100%;
        height: 260px;
        margin-bottom: 20px;
      }
      .text-content {
        width: 100%;
        flex: 100%;
        padding-left: 70px;
        padding-right: 20px;
        .index {
          width: 60px;
        }
        .ingredients {
          text-align: left;
        }
      }
    }
    .button {
      margin-top: 20px;
    }
  }
  .july-offer-block {
    padding: 0;
    h1 {
      font-size: 18pt;
      line-height: 20pt;
      text-align: center;
      margin-bottom: 20px;
      border-bottom: none;
      padding: 0;
    }
    .sample {
      flex-direction: column;
      padding: 0 50px;
      .image,
      .content {
        width: 100%;
        flex: 100%;
        padding: 0;
      }
    }
    .shopping-options {
      padding: 0;
      .individual-item {
        padding: 20px 10px;
        background: #f1d6b8;
        div.img {
          height: 100px;
          width: 100px;
          img {
            margin: 0;
          }
        }
        .product-title {
          padding: 0 10px;
          font-size: 10pt;
          line-height: 12pt;
          max-width: 35%;
        }
        .button {
          font-size: 8pt;
          line-height: 8pt;
          min-width: 130px !important;
        }
      }
    }
  }
  .vata-landing-page {
    h1 {
      font-size: 18px;
      line-height: 30px;
      border-bottom: 1px solid #bc6935;
      margin: 30px auto;
    }

    .air-and-space {
      position: relative;
      height: 460px;
      overflow: hidden;
      img {
        height: 100%;
        width: auto;
        max-width: none;
      }
      .content {
        z-index: 10;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        justify-content: end;
        padding: 30px;
        .sub-title {
          display: none;
        }
        .title {
          color: #ffeadb;
           ;
          font-size: 14pt;
          line-height: 16pt;
          font-weight: 400;
        }
      }
    }
    .air-and-space::before {
      content: "";
      display: block;
      width: 100%;
      height: 40%;
      bottom: 0;
      position: absolute;
      z-index: 5;
      background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.7)
      );
    }

    .products-details {
      padding: 20px;
      img {
        max-width: 50px;
        margin-bottom: 10px;
      }
      span {
        margin-bottom: 20px;
      }
    }

    .balance-block {
      padding: 0 20px;
      .part {
        min-width: 100px;
        width: 50%;
        justify-content: start;
        padding: 0 10px;
        .img {
          height: 110px;
        }
        span {
          font-size: 8pt;
          line-height: 12pt;
        }
        .title {
          font-size: 11pt;
          line-height: 13pt;
        }
      }
    }

    .as-seen-in {
      padding: 30px 0;
      .logos {
        width: 90%;
        margin: auto;
      }
      .yoga {
        width: 30px;
        height: 30px;
        background-size: 30px 30px;
      }
      .bbs {
        width: 28px;
        height: 25px;
        background-size: 28px 25px;
      }

      .organic-spa {
        width: 50px;
        height: 10px;
        background-size: 50px 10px;
      }
      .wwd {
        width: 35px;
        height: 10px;
        background-size: 35px 10px;
      }
      .spirit {
        width: 42px;
        height: 20px;
        background-size: 42px 20px;
      }
      .hl {
        width: 43px;
        height: 30px;
        background-size: 43px 30px;
      }
      .american-spa {
        width: 50px;
        height: 13px;
        background-size: 50px 13px;
      }
    }

    .how-to-care {
      padding-left: 30px;
      padding-right: 30px;
      overflow: hidden;
      .intro {
        text-align: left;
        h1 {
          border-bottom: none;
          line-height: 20px;
          padding-left: 0;
          margin-bottom: 20px;
          margin-left: 0;
        }
      }
      .row {
        flex-direction: column;
        box-sizing: border-box;
        position: relative;
        left: 0;
        margin: 0;
        margin-bottom: 30px;
        .image,
        .text {
          width: 100%;
          flex: 100%;
        }
        .text {
          padding: 30px 0;
        }
      }

      .row::after {
        content: "";
        display: block;
        width: 140%;
        height: 1px;
        background-color: #414141;
        position: absolute;
        bottom: 0;
        left: -30px;
      }
    }

    .look-for-ingredients {
      .img {
        height: 110px;
        .ingredient {
          width: 100px;
          height: 100px;
        }
      }
    }

    .manufacturing-process {
      padding: 0 20px 20px;
      text-align: left;
      margin-bottom: 20px;
      .title {
        font-size: 18pt;
        line-height: 20pt;
        text-align: left;
      }
      span {
        text-align: left;
      }
    }
    .words-from-customers {
      padding: 0 30px;
      text-align: left;
      .title {
        font-size: 14pt;
        line-height: 26pt;
        text-align: left;
        margin-bottom: 20px;
      }
      .content {
        flex-direction: column;
        .image,
        .text {
          width: 100%;
          flex: 100%;
        }
        .text {
          padding: 0;
        }
      }
    }

    .faq {
      padding-bottom: 30px;
      .title {
        font-size: 16pt;
        line-height: 18pt;
        text-align: center;
        margin-bottom: 20px;
      }
      #accordion_content {
        padding-top: 10px;
        .item {
          margin: 10px 0;
        }
      }
      .accordion-heading {
        padding: 20px 0;
      }
    }

    .bottom-button {
      display: block;
      margin-top: 30px;
    }
  }
}

.vata-landing-page {
  .elements {
    .background-image {
      width: 100%;
      height: 100%;
      position: absolute;
      background-image: url('{{"Vata-Desktop-sampled.png" | asset_url }}');
      background-size: cover;
      background-size: cover;
      background-position: center center;
      top: 0;
      bottom: 0;
    }
    .content {
      left: 15%;
      position: absolute;
      width: 35%;
      bottom: 40%;
      color: #fff;
      span {
        color: #fff;
      }
    }
  }
}

.pitta-landing-page,
.landing-page-july.landing-page-september {
  .elements {
    .background-image {
      width: 100%;
      height: 100%;
      position: absolute;
      bbackground-image: none !important;
      top: 0;
      bottom: 0;
    }
    .content {
      left: 15%;
      position: absolute;
      width: 35%;
      bottom: 40%;
      color: #bc6935;
      span {
        color: #fff;
        font-family: "Fitzgerald";
      }

      flex-basis: 50%;
      align-items: flex-end !important;
      justify-content: center;

      .content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      position: relative;
      width: 50%;
      padding: 0;
      left: 0;
      top: 0;
      align-items: center;
      .pitta-logo,
      .element-logo-top {
        width: 100px;
        height: 100px;
        background-image: url("{{ 'pitta-logo.png' | asset_url }}");
        background-size: cover;
        background-position: center center;
        margin-bottom: 30px;
      }

      .sub-title,
      .title,
      .big-title {
        text-transform: none !important;
      }
      .sub-title,
      .title {
        color: #fff;
        font-weight: 500;
        margin-bottom: 10px;
        .bold {
          font-weight: 700 !important;
        }
      }
      .big-title {
        color: #fff;
        font-weight: 600;
        margin-bottom: 10px;
        text-transform: uppercase !important;
        letter-spacing: 2px;
        font-style: italic;
      }
    }

    background-color: #678317 !important;
    display: flex;
    flex-direction: row;
    padding: 0 30px;
    column-gap: 60px;

    .elements-logo {
      padding-left: 50px;
      flex-basis: 50%;
      display: flex;
      flex-direction: row;
      justify-content: left;
      align-items: center;
      column-gap: 60px;
      .element-logo {
        width: 250px;
        height: 250px;
        background-size: cover;
        background-position: center center;
        border-radius: 50%;
        box-shadow: 0 0 50px 15px #fff;
        padding: 0;
      }
      .element-logo.element-1 {
        background-image: url("{{ 'fire.png' | asset_url }}");
      }
      .element-logo.element-2 {
        background-image: url("{{ 'water.png' | asset_url }}");
      }
    }
  }

  .look-for-ingredients {
    .img {
      .i-1 {
        background-image: url("{{ 'licorice.png' | asset_url }}");
      }
      .i-2 {
        background-image: url("{{ 'cucumber.png' | asset_url }}");
      }
      .i-3 {
        background-image: url("{{ 'chamomile.png' | asset_url }}");
      }
    }
  }

  .product-details {
    padding: 20px;
  }
}

.vata-landing-page.landing-page-september {
  .elements {
    .content {
      .element-logo-top {
        width: 100px;
        height: 100px;
        background-image: url("{{ 'vata-logo.png' | asset_url }}");
        background-size: cover;
        background-position: center center;
        margin-bottom: 30px;
      }
    }

    background-color: #3065a2 !important;

    .elements-logo {
      .element-logo {
        background-size: 105%;
      }
      .element-logo.element-1 {
        background-image: url("{{ 'air.png' | asset_url }}");
      }
      .element-logo.element-2 {
        background-image: url("{{ 'space.png' | asset_url }}");
      }
    }
  }
}

.kapha-landing-page.landing-page-september {
  .elements {
    .content {
      .element-logo-top {
        background-image: url("{{ 'kapha-logo.png' | asset_url }}");
      }
    }

    background-color: #a82f27 !important;

    .elements-logo {
      .element-logo {
        background-size: 105%;
      }
      .element-logo.element-1 {
        background-image: url("{{ 'air.png' | asset_url }}");
      }
      .element-logo.element-2 {
        background-image: url("{{ 'space.png' | asset_url }}");
      }
    }
  }
}

.kapha-landing-page {
  .elements {
    .background-image {
      width: 100%;
      height: 100%;
      position: absolute;
      background-image: url('{{"Kapha-Desktop-sampled.png" | asset_url }}');
      background-size: cover;
      background-size: cover;
      background-position: center center;
      top: 0;
      bottom: 0;
    }
    .content {
      left: 15%;
      position: absolute;
      width: 35%;
      bottom: 40%;
      color: #fff;
      span {
        color: #fff;
      }
    }
  }
  .look-for-ingredients {
    .img {
      .i-1 {
        background-image: url("{{ 'bergamot.png' | asset_url }}");
      }
      .i-2 {
        background-image: url("{{ 'neem.png' | asset_url }}");
      }
      .i-3 {
        background-image: url("{{ 'hazel.png' | asset_url }}");
      }
    }
  }
}

.pitta-dry-landing-page {
  .elements {
    .background-image {
      width: 100%;
      height: 100%;
      position: absolute;
      background-image: url('{{"main-banner_3.png" | asset_url }}');
      background-size: cover;
      background-size: cover;
      background-position: center center;
      top: 0;
      bottom: 0;
    }
    .content {
      left: 15%;
      position: absolute;
      width: 35%;
      bottom: 40%;
      color: #fff;
      span {
        color: #fff;
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  /* general mobile settings */
  .landing-page-july,
  .pitta-dry-landing-page {
    .balance-block {
      flex-direction: column;
      .part {
        margin-top: 20px;
      }
    }
    .as-seen-in {
      .logos {
        flex-wrap: wrap;
        width: 100%;
        row-gap: 20px;
        column-gap: 20px;
      }
    }
    .faq .title {
      line-height: 40px;
    }

    .how-to-care.container {
      .row {
        flex-direction: column;
        .image,
        .text {
          width: 100%;
        }
      }
    }
    .words-from-customers.container {
      .content {
        flex-direction: column;
        .image,
        .text {
          width: 100%;
        }
      }
    }
  }
  .vata-landing-page {
    .elements {
      display: block;
      width: 100%;
      background-color: transparent;
      .content {
        left: 10%;
        width: 80%;
        top: 5%;
        bottom: auto;
        color: #fff;
        span {
          color: #fff;
        }
      }
      .background-image {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: transparent;
        background-image: url('{{"Vata-Mobile.png" | asset_url }}');
        top: 0;
        bottom: 0;
        background-size: cover;
        background-position: 50% 50%;
      }
    }

    .balance-block {
      .part {
        width: 100%;
      }
    }
  }

  .pitta-landing-page {
    .elements {
      background-color: #726050;
      .content {
        left: 10%;
        width: 80%;
        top: 5%;
        bottom: auto;
        color: #bc6935;
        span {
          color: #fff;
        }
      }
      .background-image {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: transparent;
        background-image: url('{{"Pitta-Mobile.png" | asset_url }}');
        top: 0;
        bottom: 0;
        background-position: center center;
        background-size: cover;
      }
    }
  }

  .pitta-demo-landing-page {
    .elements {
      flex-direction: column;
      row-gap: 20px;
      height: auto;
      padding: 30px 10px;
      .elements-logo {
        flex-direction: row;
        padding-left: 0;
        justify-content: center;
        column-gap: 50px;
        .element-logo {
          width: 150px;
          height: 150px;
          box-shadow: 0 0 20px 10px #fff;
        }
      }
    }
  }

  .pitta-dry-landing-page {
    .elements {
      background-color: #726050;
      .background-image {
        background-image: url('{{"Pitta-dry-main-image-mobile.jpg" | asset_url }}');
      }
      .content {
        left: 7%;
        position: absolute;
        width: 86%;
        top: 7%;
        bottom: auto;
        color: #bc6935;
        span {
          color: #fff;
        }
      }
      .background-image {
        width: 100%;
        height: 70%;
        position: absolute;
        background-color: #726050;
        background-image: url('{{"main-banner_3.png" | asset_url }}');
        top: auto;
        bottom: 0;
        background-position: 75% 50%;
      }
    }
  }

  .kapha-landing-page {
    .elements {
      background-color: transparent;
      .content {
        left: 10%;
        width: 80%;
        top: 5%;
        bottom: auto;
        color: #bc6935;
        span {
          color: #fff;
        }
      }
      .background-image {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: transparent;
        background-image: url('{{"Kapha-Mobile.png" | asset_url }}');
        top: 0;
        bottom: 0;
        background-size: cover;
        background-position: 50% 50%;
      }
    }
  }
}

@media only screen and (max-width: 2300px) {
  .landing-page-july,
  .landing-page-july.landing-page-september {
    .elements {
      .content {
        .sub-title,
        .sub-title .bold {
          font-size: 45px; /*50 - 10% */
          line-height: 63px; /*70*/
        }
        .title.type-1 {
          font-size: 45px; /*50px;*/
          line-height: 58px; /*65px;*/
        }
        .title.type-2 {
          font-size: 45px; /*50*/
          line-height: 45px; /*50*/
          max-width: 570px;
        }
        .big-title {
          font-size: 180px; /*200px;*/
          line-height: 180px; /*200px;*/
        }
      }
    }
  }

  .vata-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
        .title.type-2 {
          max-width: 500px;
        }
      }
    }
  }

  .kapha-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
        .title.type-2 {
          max-width: 615px;
        }
      }
    }
  }
}

@media only screen and (max-width: 1600px) {
  .landing-page-july,
  .landing-page-july.landing-page-september {
    .elements {
      .content {
        .sub-title,
        .sub-title .bold {
          font-size: 40px; /*50 - 20% */
          line-height: 56px; /*70*/
        }
        .title.type-1 {
          font-size: 40px; /*50px;*/
          line-height: 81px; /*65px;*/
        }
        .title.type-2 {
          font-size: 40px; /*50*/
          line-height: 40px; /*50*/
          max-width: 520px;
        }
        .big-title {
          font-size: 160px; /*200px;*/
          line-height: 160px; /*200px;*/
        }
      }
    }
  }

  .vata-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
        .title.type-2 {
          max-width: 430px;
        }
      }
    }
  }

  .kapha-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
        .title.type-2 {
          max-width: 550px;
        }
      }
    }
  }
}

@media only screen and (max-width: 1350px) {
  .landing-page-july,
  .landing-page-july.landing-page-september {
    .elements {
      .content {
        .sub-title,
        .sub-title .bold {
          font-size: 35px; /*50 - 30% */
          line-height: 49px; /*70*/
        }
        .title.type-1 {
          font-size: 35px; /*50px;*/
          line-height: 45px; /*65px;*/
        }
        .title.type-2 {
          font-size: 35px; /*50*/
          line-height: 35px; /*50*/
          max-width: 500px;
        }
        .big-title {
          font-size: 140px; /*200px;*/
          line-height: 140px; /*200px;*/
        }
      }

      .elements-logo {
        column-gap: 60px;
        .element-logo {
          width: 220px;
          height: 220px;
        }
      }
    }
  }

  .vata-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
        .title.type-2 {
          max-width: 380px;
        }
      }
    }
  }

  .kapha-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
        .title.type-2 {
          max-width: 495px;
        }
      }
    }
  }
}

@media only screen and (max-width: 1100px) {
  .landing-page-july,
  .landing-page-july.landing-page-september {
    .elements {
      .content {
        .sub-title,
        .sub-title .bold {
          font-size: 30px; /*50 - 40% */
          line-height: 42px; /*70*/
        }
        .title.type-1 {
          font-size: 30px; /*50px;*/
          line-height: 39px; /*65px;*/
        }
        .title.type-2 {
          font-size: 30px; /*50*/
          line-height: 30px; /*50*/
          max-width: 450px;
        }
        .big-title {
          font-size: 120px; /*200px;*/
          line-height: 120px; /*200px;*/
        }
      }

      .elements-logo {
        column-gap: 50px;
        padding-left: 0;
        .element-logo {
          width: 200px;
          height: 200px;
        }
      }
    }
  }

  .vata-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
        .title.type-2 {
          max-width: 340px;
        }
      }
    }
  }

  .kapha-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
        .title.type-2 {
          max-width: 430px;
        }
      }
    }
  }
}

@media only screen and (max-width: 960px) {
  .landing-page-july,
  .landing-page-july.landing-page-september {
    .elements {
      .content {
        .sub-title,
        .sub-title .bold {
          font-size: 25px; /*50 - 50% */
          line-height: 35px; /*70*/
        }
        .title.type-1 {
          font-size: 25px; /*50px;*/
          line-height: 37px; /*65px;*/
        }
        .title.type-2 {
          font-size: 25px; /*50*/
          line-height: 25px; /*50*/
          max-width: 350px;
        }
        .big-title {
          font-size: 100px; /*200px;*/
          line-height: 100px; /*200px;*/
        }
      }

      .elements-logo {
        column-gap: 40px;
        padding-left: 0;
        .element-logo {
          width: 180px;
          height: 180px;
        }
      }
    }
  }

  .vata-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
        .title.type-2 {
          max-width: 310px;
        }
      }
    }
  }

  .kapha-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
        .title.type-2 {
          max-width: 360px;
        }
      }
    }
  }
}

@media only screen and (max-width: 850px) {
  .kapha-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
      }
      .elements-logo {
        column-gap: 40px;
        padding-left: 0;
        .element-logo {
          width: 150px;
          height: 150px;
        }
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  .landing-page-july,
  .landing-page-july.landing-page-september {
    .elements {
      flex-direction: column;
      row-gap: 40px;
      padding-bottom: 40px;
      height: auto;
      width: 100%;
      flex-basis: 100%;

      .content {
        justify-content: center;
        align-items: center !important;
        left: 0 !important;
        top: 0 !important;
        padding-top: 20px;
        width: 100%;
        flex-basis: 100%;

        .element-logo-top {
          margin-bottom: 20px;
          margin-top: 10px;
        }

        .pitta-logo {
          width: 65px;
          height: 65px;
        }

        .sub-title,
        .sub-title .bold {
          font-size: 20px;
          line-height: 30px;
          margin-bottom: 0 !important;
        }
        .title.type-1 {
          font-size: 20px;
          line-height: 30px;
        }
        .title.type-2 {
          font-size: 20px;
          line-height: 30px;
          max-width: 350px;
        }
        .big-title {
          font-size: 90px;
          line-height: 90px;
        }
      }

      .elements-logo {
        column-gap: 40px;
        padding-left: 0;
        justify-content: center;
        flex-basis: auto;
        .element-logo {
          width: 40%;
          height: auto;
          aspect-ratio: 1 / 1;
        }
      }
    }

    .balance-block {
      padding: 0 20px;
      .part {
        flex-basis: 50%;
        align-self: flex-start;
        min-width: 45% !important;
      }
    }

    .as-seen-in {
      padding: 0 20px;
      .logos {
        width: 100%;
      }
    }
  }

  .vata-landing-page.landing-page-july.landing-page-september {
    .elements {
      .content {
        .title.type-2 {
          max-width: 250px;
        }
      }
    }
  }
}