@import 'var.colors';
@import 'var.globals';
@import 'var.responsive';
@import 'var.typo';

@import 'mix.responsive';

@import 'base.globals';

@import 'plugin.icomoon';

@import 'utils.fontscale';
@import 'utils.spacing';
@import 'utils.text';
@import 'utils.flex';
@import 'utils.animations';

@import 'mod.button';
@import 'mod.table';
@import 'mod.checkbox-item';
@import 'mod.form-item';
@import 'mod.input';
@import 'mod.overlay';

@import 'comp.header';
@import 'comp.hero';
@import 'comp.section';
@import 'comp.footer';

.pos-r {
  position: relative;
}
.pos-a {
  position: absolute;
}

.hide-content{
  display: none !important;
}

.width-full {
  width: 100%;
}
.height-full {
  height: 100%;
}

.ff-sans {
  font-family: $ff-sans;
}
.ff-sans-2 {
  font-family: $ff-sans-2;
}

ul {
  margin-left: 22px;
}

.hor-align {
  margin: 0 auto;
}

.cont-xs {
  width: 250px;
}
.cont-sm {
  max-width: 480px;
}
.cont-lg {
  max-width: 1000px;
}

img {
  &::selection {
    background: transparent;
  }
}

.link-in-txt {
  color: $primary-color;
  transition: all 0.25s;
  &:hover {
    color: $tertiary-color;
  }
}

// .first {
//   height: 100vh;
//   width: 100vw;
//   background-color: #fff;
//   position: fixed;
//   top: 0;
//   right: 0;
//   z-index: 10;
//   transition: all 0.8s ease-out;
//   transition-delay: 0.2s;
// }
// .first.in-viewport {
//   width: 0;
// }

//home
.index-first {
  background-color: $primary-color;
  color: $primary-color-alt;
  position: relative;
  &:before {
    position: absolute;
    content: '';
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: $primary-color;
  }

  &__txt {
    position: relative;
    z-index: 5;
  }
}

.index-first {
  &__txt {
    transition: all 1.5s ease;
    transition-delay: 1s;
  }
  .first__txt1 {
    transform: translateX(-100px);
  }
  .first__txt2 {
    transform: translateX(100px);
    transition-delay: 1.2s;
  }
  .first__txt2-mob {
    transform: translateX(-100px);
    transition-delay: 1.1s;
  }

  &__title {
    // transition: all 2s ease;
    // transition-delay: 2s;
    // opacity: 0;
    // transform: scale(0.95);
  }
  .home-first-wrap {
    &__img-blob {
      transition: all 5s ease;
      transition-delay: 3.5s;
      opacity: 0;
    }
    &__img-bottle {
      transition: all 1s;
      transition-delay: 1.2s;
      opacity: 0;
      transform: translateY(-100%) rotate(45deg) scale(0.5);
    }
  }
}
.index-first.in-viewport {
  &:after {
    opacity: 1;
    transform: translateX(0%);
  }
  .index-first__txt {
    opacity: 1;
    transform: translateX(0);
  }
  .index-first__title {
    // opacity: 1;
    // transform: scale(1);
  }
  .home-first-wrap {
    &__img-blob {
      opacity: 1;
      #Oval {
        transition: all 0.7s ease;
      }
      #Oval:nth-child(even) {
        opacity: 1;
      }
      #Oval:nth-child(odd) {
        opacity: 1;
      }
    }
    &__img-bottle {
      opacity: 1;
      transform: translateY(0%) rotate(0deg) scale(1);
    }
  }
}

.first__txt2-mob {
  display: none;
}

.home-first-wrap {
  position: absolute;
  height: 110%;
  width: 100%;
  top: -8%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  &__img-bottle {
    position: absolute;
    width: 20vw;
    img {
      transform-origin: 50% 50% 0px;
      animation: bottle-bounce 4s infinite alternate;
    }
  }
  &__img-blob {
    position: absolute;
    top: 8%;
    left: 0;
    height: 100%;
    width: 80%;
  }
}

.float-element,
.float-element2 {
  // transition: all 0.75s cubic-bezier(0, 0.74, 1, 1);
  transition: all 0.7s cubic-bezier(0.4, 0, 1, 1);
}

.pinContainer {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}

.panel {
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  transform: translate3d(0, 0, 0);
}

.horizontal-wrap {
  display: flex;
  width: 100%;
  height: 100vh;
  img {
    object-fit: contain;
  }
}
.hor-title {
  display: inline-block;
  white-space: nowrap;
  letter-spacing: -10px;
  position: relative;
  z-index: 6;
}
.hor-blob {
  position: absolute;
  fill: #cd0f1c;
  z-index: 5;
}

.hor-section-1,
.hor-section-2,
.hor-section-3,
.hor-section-4,
.hor-section-5 {
  position: relative;
}

.hor-section-9 {
  display: none;
}

.hor-section-1 {
  &__img-1 {
    height: 50vh;
    object-fit: cover;
    z-index: 6;
  }
  &__img-2 {
    margin-top: -280px;
    object-fit: contain;
    object-position: top;
    width: 28vw;
    z-index: -1;
  }
  &__blob1 {
    left: -5%;
    bottom: -5%;
    width: 15vw;
    z-index: -1;
  }
  &__blob2 {
    right: 15%;
    bottom: 0%;
    width: 20vw;
  }
}
.hor-section-2 {
  display: flex;
  align-items: flex-end;
  &__txt {
    width: 600px;
  }
  &__img-1 {
    align-self: flex-start;
    width: 31vw;
    max-height: 85vh;
    height: 100%;
    object-position: top;
  }
  &__blob1 {
    right: 25%;
    top: -10%;
    width: 35vw;
    z-index: -1;
  }
}
.hor-section-3 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &__title {
    margin-left: -250px;
  }
  &__img-wrap {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  img {
    max-height: 450px;
    height: 50vh;
  }
  &__img-1 {
    align-self: flex-end;
  }
  &__blob1 {
    bottom: 10%;
    width: 17vw;
    left: -10%;
    z-index: -1;
  }
  &__blob2 {
    bottom: 15%;
    width: 18vw;
    left: 8%;
    z-index: -1;
  }
}
.hor-section-4 {
  display: flex;
  min-width: 100vw;
  justify-content: space-between;
  &__txt-1 {
    width: 530px;
    align-self: flex-end;
  }
  &__img-1 {
    width: 29vw;
    height: 100%;
    object-fit: cover;
  }
  &__img-wrap {
    width: 370px;
  }
  &__img-2 {
    width: 100%;
    max-height: 48vh;
  }
  &__blob1 {
    top: -15%;
    width: 30vw;
    left: -15%;
    z-index: -1;
  }
  &__blob2 {
    top: 6%;
    width: 20vw;
    left: 15%;
    z-index: -1;
  }
  &__blob3 {
    top: 10%;
    width: 18vw;
    right: 11%;
  }
}
.hor-section-5 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &__img-wrap {
    height: 100%;
    // max-width: 105vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  img {
    max-height: 50vh;
  }
  &__img-1 {
    height: 42vh;
  }
  &__img-2 {
    height: 100%;
  }
  &__blob1 {
    top: -5%;
    width: 45vw;
    left: 35%;
    z-index: -1;
  }
}
.hor-section-6,
.hor-section-7,
.hor-section-8 {
  width: 100vw;
  flex-shrink: 0;
}
.hor-section-6 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  img {
    width: 600px;
  }
  background-image: url('../img/forto-logo-color.svg');
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30%;
}
.hor-section-7 {
  position: relative;
  margin-left: -10%;
  &__img-1 {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: left;
  }
}
.hor-section-8 {
  background-color: $primary-color;
  position: relative;
  width: 70vw;
  &:after {
    position: absolute;
    content: '';
    background-color: $primary-color;
    height: 100%;
    width: 110%;
    right: -110%;
  }
}

.home-subsection {
  position: relative;
  padding-bottom: 100px;
  h2 {
    position: relative;
    z-index: 5;
  }
  &:before {
    position: absolute;
    content: '';
    height: 70%;
    width: 100%;
    top: -7%;
    left: 0%;
    background-color: $primary-color;
    clip-path: ellipse(73% 28% at 48% 30%);
    transition: all 2s;
  }
}
.home-subsection.in-viewport {
  &:before {
    top: -70%;
    clip-path: ellipse(97% 62% at 62% 81%);
  }
}

.home-bottles-wrap {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 4%;
  left: 0;
  z-index: 6;
  img {
    position: absolute;
    height: 40vh;
    filter: drop-shadow(50px 50px 34px #00000042);
    transition: all 1.5s ease;
    opacity: 0;
    &:hover {
      transform: scale(0.8);
    }
  }
  &__img1 {
    top: -10%;
    right: 15%;
    animation: bottle-bounce 4s infinite alternate;
  }
  &__img2 {
    top: -10%;
    right: 30%;
    // animation: bottle-bounce 7s infinite alternate;
  }
  &__img3 {
    top: -10%;
    right: 8%;
    // animation: bottle-bounce 5s infinite alternate;
  }
  &__img4 {
    bottom: 80%;
    left: 55%;
    animation: bottle-bounce 5s infinite alternate;
  }
  &__img5 {
    bottom: 80%;
    left: 35%;
    // animation: bottle-bounce 3s infinite alternate;
  }
}

.home-bottles-wrap {
  &__img1.in-viewport {
    top: 0;
    opacity: 1;
  }
  &__img2.in-viewport {
    top: 12%;
    opacity: 1;
  }
  &__img3.in-viewport {
    top: 30%;
    opacity: 1;
  }
  &__img4.in-viewport {
    bottom: 22%;
    opacity: 1;
  }
  &__img5.in-viewport {
    bottom: 15%;
    opacity: 1;
  }
}
.home-subsection2 {
  position: relative;
}
.home-peppers-wrap {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  right: 0;
  img {
    position: absolute;
    z-index: -1;
    transition: all 0.25s linear;
  }
  &__img-bottle {
    top: 8%;
    right: 15%;
    height: 68vh;
    filter: drop-shadow(100px 150px 50px #00000042);
    animation: bottle-bounce 5s infinite alternate;
  }
  &__img1 {
    right: 30%;
    top: 2%;
    height: 38vh;
    &:hover {
      transform: scale(0.8);
    }
  }
  &__img2 {
    right: 20%;
    top: 10%;
  }
  &__img3 {
    right: 7%;
    top: 5%;
    height: 10vh;
    transform: scale(1);
  }
  &__img4 {
    right: 23%;
    top: 25%;
    height: 20vh;
  }
  &__img5 {
    right: 8%;
    top: 30%;
    transition: all 0.75s linear;
  }
  &__img6 {
    right: 3%;
    top: 42%;
    height: 18vh;
  }
  &__img7 {
    right: 28%;
    top: 52%;
    z-index: -2 !important;
    height: 10vh;
    transition: all 0.75s linear;
  }
  &__img8 {
    right: 16%;
    top: 62%;
    transition: all 0.75s linear;
  }
  &__img9 {
    right: 32%;
    top: 60%;
    height: 23vh;
  }
}

.arrow-next-link {
  transition: all 0.5s;
}

.link-wrap {
  z-index: 12;
  position: relative;
  display: inline-flex;
  &:hover {
    transition: all 0.5s;

    .arrow-next-link {
      transform: scale(1.5) translateX(10px);
    }
  }
}

.wave-wrap {
  position: relative;
  height: 300px;
  width: 100%;
  path {
    fill: $primary-color;
  }
  svg {
    margin-top: -2px;
  }
}
.wave-bg {
  height: 300px;
  width: 100%;
  background-color: $primary-color;
  transition: all 1s ease;
}

.wave-wrap.in-viewport {
  .wave-bg {
    height: 0;
  }
}

.wave-wrap2 {
  position: relative;
  height: 380px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  top: 1px;
  path {
    fill: $primary-color-alt;
  }
  svg {
    width: 100%;
    margin-bottom: -1px;
  }
}

//clients
.clients-wrap {
  display: flex;
  flex-wrap: wrap;
}
.client-box {
  height: 24vw;
  width: calc(100% / 3 - 20px);
  border: 1px solid $secondary-color;
  margin: 10px;
  position: relative;
  img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
.clients-txt-intro {
  color: #fff;
  z-index: 5;
  position: relative;
}

.form-section {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.form-wrap {
  padding: 50px 20%;
  box-shadow: 0 0 40px 0 rgba(255, 255, 255, 0.6);
}

.clients-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.clients-bg-color {
  height: 58%;
  width: 100%;
  background-color: $primary-color;
}

.blog-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: -1;
}
.blog-bg-color {
  height: 40%;
  width: 100%;
  background-color: $primary-color;
}

@keyframes blob8 {
  0% {
    d: path(
      'M42.4,-59.4C52.2,-51.3,55.4,-35.2,61.9,-19.2C68.4,-3.2,78.1,12.7,77.4,28.4C76.8,44.1,65.7,59.7,51.1,70.4C36.5,81.1,18.2,86.9,1,85.4C-16.1,84,-32.3,75.3,-47.6,64.9C-63,54.4,-77.6,42.2,-81.1,27.3C-84.6,12.4,-77.1,-5.1,-69.4,-20.7C-61.8,-36.2,-54,-49.9,-42.4,-57.4C-30.8,-64.9,-15.4,-66.2,0.5,-66.9C16.3,-67.5,32.6,-67.4,42.4,-59.4Z'
    );
  }
  100% {
    d: path(
      'M49.3,-63.8C62.6,-58.2,71.1,-42,77.2,-24.7C83.3,-7.4,87,11,83.2,28.3C79.4,45.6,68,61.8,52.9,68.5C37.8,75.1,18.9,72.3,1.3,70.4C-16.2,68.6,-32.5,67.8,-47.4,61.1C-62.2,54.4,-75.8,41.7,-80,26.5C-84.2,11.4,-79,-6.3,-73.5,-24.1C-68.1,-42,-62.3,-59.9,-50,-65.9C-37.7,-71.8,-18.9,-65.7,-0.4,-65.1C18,-64.5,36,-69.5,49.3,-63.8Z'
    );
  }
}

.clients-blob path {
  animation: blob8 5s linear 0s infinite alternate;
}
.clients-blob {
  position: absolute;
  top: -20%;
  left: -29%;
  height: 130%;
  width: 150%;
  path {
    fill: $primary-color-alt;
  }
}

.form-clients.hide {
  display: none;
}

.thank-you {
  display: none;
  text-align: center;
}
.thank-you.show {
  display: block;
}

.clients-peppers-wrap {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  img {
    position: absolute;
  }
  &__img1 {
    right: 6%;
    bottom: -4%;
    transform: rotate(-123deg);
    width: 8vw;
  }
  &__img2 {
    right: 0%;
    top: 32%;
    animation: bottle-bounce 7s infinite alternate;
  }
  &__img3 {
    bottom: 0%;
    left: 2%;
  }
  &__img4 {
    left: 0%;
    top: 50%;
    width: 8vw;
    animation: bottle-bounce 5s infinite alternate;
  }
  &__img5 {
    right: 2%;
    top: 60%;
    animation: bottle-bounce 4s infinite alternate;
  }
  &__img6 {
    top: 28%;
    left: -6%;
    width: 8vw;
    animation: bottle-bounce 6.5s infinite alternate;
  }
  &__img7 {
    left: -10%;
    bottom: 18%;
  }
  &__img8 {
    top: 17%;
    right: -8%;
    width: 6vw;
    animation: bottle-bounce 6s infinite alternate;
  }
  &__img9 {
    top: 50%;
    right: -14%;
    width: 90px;
  }
  &__circle {
    position: absolute;
    background-color: #cd0f1c;
    border-radius: 50%;
    animation: scale-md 3s linear 0s infinite alternate;
  }
  &__circle1 {
    top: 36%;
    left: 11%;
    width: 10vw;
    height: 10vw;
    animation-duration: 8s;
  }
  &__circle2 {
    top: 50%;
    left: 15%;
    width: 5vw;
    height: 5vw;
  }
  &__circle3 {
    bottom: 10%;
    right: 35%;
    width: 4vw;
    height: 4vw;
  }
  &__blob1 {
    top: 31%;
    right: 4%;
    width: 22vw;
    transform: rotate(16deg);
    animation: scale-md 8s linear 0s infinite alternate;
  }
  &__blob2 {
    bottom: 0%;
    left: -3%;
    width: 28vw;
    z-index: -1;
    animation: scale-md 10s linear 0s infinite alternate;
  }
  &__blob3 {
    bottom: 13%;
    right: -10%;
    width: 32vw;
    z-index: -1;
    transform: rotate(-118deg);
  }
}

//shop

.page-shop {
  position: relative;
  min-height: 50vh;
}
.page-shop.blur {
  filter: blur(2px);
}
.shop-wrap {
  display: flex;
}
.categories-box {
  border: 1px solid $primary-color;
  padding: 40px 25px;
  color: $gray-color;
  width: 350px;
  height: 100%;
  margin: 20px 5px 20px 0;
  position: sticky;
  top: 20px;
}
.line-md {
  background-color: $primary-color;
  height: 5px;
  width: 100px;
}
.line-sm {
  background-color: $primary-color;
  height: 5px;
  width: 30px;
}
.categories-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  input {
    display: none;
  }
  input:checked + span {
    color: $primary-color;
  }
  label {
    cursor: pointer;
    transition: all 0.2s;
    &:hover {
      color: $primary-color-alt;
    }
  }
}
.rate {
  display: flex;
  img {
    margin: 0 2px;
  }
}

.products-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 5px;
  padding-right: 0;
  width: calc(100% - 355px);
}
.products-box {
  padding: 15px 10px;
  padding-bottom: 100px;
  min-width: 300px;
  max-width: 450px;
  // flex: 1;
  display: flex;
  flex-direction: column;
  width: 33%;
  .products-img {
    cursor: pointer;
  }
  &:hover {
    .products-info {
      box-shadow: 3px 4px 9px 0 rgba(0, 0, 0, 0.1),
        0px 0px 12px 0px rgba(0, 0, 0, 0.1);
    }
  }
}
// .products-box-shadow {
//   transition: all 0.3s;
//   &:hover {
//     box-shadow: -2px -4px 10px 0px #f5f5f5;
//   }
// }
.img-txt-wrap {
  .products-box {
    width: 40%;
  }
}
.products-img {
  position: relative;
  height: 250px;
  background-color: #fff;
  box-shadow: 3px 4px 9px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  overflow: hidden;
  .product-img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    // padding: 20px;
    transition: all 1s ease;
    &:hover {
      transform: scale(0.98);
    }
  }
  .limited-img {
    position: absolute;
    left: -5px;
    top: -5px;
  }
  .limited-txt {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    line-height: 1;
    font-weight: bold;
  }
  &:hover {
    box-shadow: 3px 4px 9px 0 rgba(0, 0, 0, 0.1), -2px -4px 10px 0px #f5f5f5;
  }
}
.products-info {
  min-height: 200px;
  background-color: $gray-light-color;
  color: $gray-color;
  box-shadow: 3px 4px 9px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 250px);
  transition: all 0.5s;
}
.on-sale {
  color: $tertiary-color;
  font-weight: bold;
}
.price {
  color: $primary-color;
  font-weight: bold;
}
.price-old {
  font-weight: bold;
  text-decoration: line-through;
  color: $gray-color;
  opacity: 0.5;
}
.quantity-wrap {
  display: flex;
  height: 45px;
  position: relative;
  .minus {
    width: 30px;
    border: 2px solid $gray-color;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    cursor: pointer;
    transition: all 0.2s;
    &:hover {
      background-color: #eeeeee;
    }
    ::selection {
      background: transparent;
    }
  }
  .plus {
    width: 30px;
    border: 2px solid $gray-color;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.2s;
    &:hover {
      background-color: #eeeeee;
    }
    ::selection {
      background: transparent;
    }
  }
  .minus.disabled,
  .plus.disabled {
    color: #ccc;
  }
  .quantity-input {
    width: 40px;
    border: none;
    border-top: 2px solid $gray-color;
    border-bottom: 2px solid $gray-color;
    background-color: $gray-light-color;
    outline: none;
    padding: 5px;
    font-size: 16px;
    font-family: $ff-sans;
    text-align: center;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }
}

.quantity-wrap.highlight {
  .minus,
  .plus,
  .quantity-input {
    border-color: $primary-color;
    transition: all 0.2s;
  }
}

.carousel-wrap {
  position: relative;
  width: 500px;
  height: 600px;
  margin: 0 80px 80px 0;
  .main-img {
    height: 80%;
    margin-bottom: 8px;
    background-color: #fff;
    box-shadow: 3px 4px 9px 0 rgba(0, 0, 0, 0.1);
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  .thumbs {
    height: 20%;
    display: flex;
    justify-content: space-between;
    .thumb {
      width: 24%;
      background-color: #f1f1f1;
      transition: all 0.2s;
      cursor: pointer;
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
      &:hover {
        opacity: 0.8;
      }
    }
    .swiper-slide-active {
      border: 1px solid $primary-color;
    }
  }
}

.zoom-icon {
  position: absolute;
  bottom: 119px;
  z-index: 55;
  left: 0px;
  height: 40px;
  width: 40px;
}

.zoom-on-hover {
  height: 100%;
}
.zoom {
  height: 150% !important;
  width: 150% !important;
}

.side-buy-cart {
  // display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%;
  background-color: #fff;
  color: $gray-color;
  padding: 25px;
  z-index: 20;
  transition: all 0.5s;
  transform: translateX(100%);
  box-shadow: 0px 0px 16px #e1e1e1;
  .side-buy-list {
    height: 40%;
    padding-right: 10px;
    overflow-y: auto;
    .side-buy-product {
      display: flex;
      align-items: center;
      border-bottom: 1px solid $gray-color;
      .product-img {
        position: relative;
        width: 28%;
        min-height: 60px;
        height: 10vh;
        img {
          position: absolute;
          height: 100%;
          width: 100%;
          object-fit: contain;
          padding: 3px;
        }
      }
      .product-info {
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      &:last-child {
        border-bottom: none;
      }
    }
  }
  // &:before {
  //   position: absolute;
  //   content: '';
  //   height: 100%;
  //   width: calc(100vw - 400px);
  //   top: 0px;
  //   left: calc(-100vw + 400px);
  //   z-index: 9;
  //   background-color: rgba(0, 0, 0, 0.4);
  // }
}
.side-buy-cart.open {
  display: block;
  overflow-y: auto;
  transform: translateX(0%);
}

.close-btn {
  position: fixed;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 5;
  cursor: pointer;
  .close-line {
    width: 28px;
    height: 3px;
    background-color: $gray-color;
    box-shadow: 0px 0 1px 0px #fff;
    transition: all 0.25s;
  }
  .close-line:nth-child(1) {
    transform: rotate(45deg) translateX(1px) translateY(1px);
  }
  .close-line:nth-child(2) {
    transform: rotate(-45deg) translateX(1px) translateY(-1px);
  }
  &:hover {
    .close-line {
      background-color: $primary-color-alt;
    }
  }
}

.product-name-link a {
  transition: all 0.3s;
  &:hover {
    color: $primary-color;
  }
}

//cart
.cart-wrap {
  color: $gray-color;
  display: flex;
  justify-content: space-between;
}
.cart-table {
  width: 70%;
  min-height: 400px;
  border: 1px solid $gray-color;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cart-table-h {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  border-bottom: 1px solid $gray-color;
  padding-bottom: 10px;
}

.cart-table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  &:nth-child(2),
  &:nth-child(3) {
    border-bottom: 1px solid $gray-color;
  }
}
.cart-empty-wrap {
  border-top: 1px solid #5c5c5c;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cart-empty {
  display: flex;
  cursor: pointer;
  &:hover {
    color: $primary-color;
    .icon-bin {
      filter: sepia(1);
      transform: rotate(20deg);
    }
  }
}

.cart-table {
  .col-sm {
    width: 120px;
    text-align: center;
    justify-content: center;
  }
  .product-info {
    display: flex;
    align-items: center;
  }
  .product-img {
    position: relative;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    img {
      position: absolute;
      height: 100%;
      width: 100%;
      object-fit: cover;
      padding: 10px;
    }
  }
  .quantity-wrap .quantity-input {
    background-color: #fff;
  }
}

.total-box {
  width: 28%;
  min-width: 300px;
  height: 100%;
  background-color: $gray-light-color;
  padding: 15px 40px 20px 40px;
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.arrow-left {
  border-left: 3px solid $primary-color;
  border-top: 3px solid $primary-color;
  width: 12px;
  height: 12px;
  transform: rotate(-45deg);
  margin: 0px 5px 2px 5px;
}
.arrow-right {
  border-right: 3px solid $primary-color;
  border-bottom: 3px solid $primary-color;
  width: 12px;
  height: 12px;
  transform: rotate(-45deg);
  margin: 0px 5px 2px 5px;
}

.mob-symb {
  display: none;
}
.xs-empty {
  width: 34px;
}

.icon-bin {
  cursor: pointer;
  transition: all 0.2s;
  &:hover {
    filter: sepia(1);
    transform: rotate(20deg);
  }
}

//pay
.page-pay {
  color: $gray-color;
}
.pay-left {
  border: 1px solid $gray-color;
  padding: 30px;
  padding-bottom: 60px;
  .input,
  hr {
    max-width: 400px;
  }
  hr {
    border: none;
    border-bottom: 1px solid $primary-color;
  }
  .input {
    margin-bottom: 18px;
  }
}
.pay-right {
  height: 100%;
  background-color: $gray-light-color;
  padding: 30px;
  margin-left: 20px;
  position: sticky;
  top: 20px;
  .col-sm {
    width: 115px;
    text-align: right;
  }
}

.corvus-logo {
  margin-top: -10px;
  height: 40px;
}

.bt-bold {
  border-top: 5px solid $gray-color;
}
.bb-bold {
  border-bottom: 5px solid $gray-color;
}

.btn-send {
  .btn {
    pointer-events: all;
  }
  .loader-line {
    display: none;
  }
}

.error-txt {
  color: #d0021b;
  text-align: center;
}

.sendingMsg {
  .btn {
    opacity: 0.5;
    pointer-events: none;
  }
  .loader-line {
    display: block;
  }
}

//blog
.blog-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.blog-box-link {
  margin-bottom: 40px;
}
.blog-box {
  max-width: 600px;
  width: 100%;
  color: $gray-color;
  padding: 12px;
  img {
    width: 100%;
    height: 370px;
    background-color: #fff;
    transition: all 0.3s;
  }
  .fs-md {
    letter-spacing: -1px;
  }
  h3 {
    transition: all 0.3s;
  }
  &:hover {
    h3 {
      color: $primary-color-alt;
    }
    img {
      box-shadow: 0px 4px 0px $primary-color;
    }
  }
  .wp-blurb {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'Sen', sans-serif;
    }
  }
}

.blog-img {
  object-fit: cover;
}
.blog-placeholder {
  object-fit: contain;
  padding: 15%;
  border: 1px solid $primary-color;
}

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 10px;
  color: $primary-color;
  font-weight: bold;

  .number {
    border: 1px solid $primary-color;
    border-radius: 50%;
    width: 33px;
    height: 33px;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: 'Sen', sans-serif;
    cursor: pointer;
    transition: all 0.25s;
    &:hover {
      background-color: $primary-color;
      color: #fff;
    }
  }
  .number.active {
    background-color: $primary-color;
    color: #fff;
  }
  .arrow-left,
  .arrow-right {
    margin: 10px;
    padding: 0;
    font-family: 'Sen', sans-serif;
    cursor: pointer;
    transition: all 0.25s;
    &:hover {
      opacity: 0.6;
    }
  }
}
.wp-blurb {
  strong {
    font-weight: normal;
  }
  span {
    color: $primary-color;
    transition: all 0.2s;
  }
  &:hover {
    span {
      color: $tertiary-color;
    }
  }
}

.blog-no-feature-img {
  object-fit: contain !important;
}

//post
.back-wrap {
  color: #fff;
  .arrow-left {
    border-color: #fff;
  }
}
.post-header {
  position: relative;
  background: linear-gradient(#00000066, #000);
  color: #fff;
  padding: 90px 8%;
  .fs-lg {
    max-width: 650px;
  }
  .line-sm {
    background-color: #fff;
  }
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.post-body {
  color: $gray-color;
  max-width: 870px;
  margin: 40px 8% 90px 8%;
  p {
    line-height: 1.5;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    max-width: 480px;
    padding-top: 30px;
    padding-bottom: 10px;
  }
  a {
    color: $primary-color;
    transition: all 0.2s;
    &:hover {
      color: $tertiary-color;
    }
  }
  .wp-block-image {
    margin: 20px 0;
    img {
      width: 100%;
      max-height: 500px;
      object-fit: cover;
    }
    figcaption {
      color: #ccc;
    }
  }
}

.post-share {
  display: flex;
  align-items: center;
}
.share-button {
  display: flex;
  align-items: center;
}

.post-go-back {
  display: none;
}

.cls-1 {
  fill: $tertiary-color;
}

.loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  .loader-txt {
    z-index: 5;
  }
  .loader-img {
    transform: rotate(360deg);
    transition: all 5s linear;
    object-fit: contain;
    z-index: 0;
    width: 150px;
  }
}

//contact
.contact-first {
  position: relative;
  min-height: calc(100vh - 95px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 200px 8% 0 8%;
}
.contact-left {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5%;
}
.contact-logo {
  width: 70%;
}
.contact-right {
  position: relative;
  height: 100%;
  width: 45%;
  // background-color: $primary-color-alt;
  color: #fff;
  padding: 10vh 10%;
  a {
    transition: all 0.3s;
    &:hover {
      color: $tertiary-color;
    }
  }
}

.contact-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  z-index: -1;
}
.contact-bg-color {
  height: 20%;
  width: 100%;
  background-color: $primary-color;
}

@keyframes blob9 {
  0% {
    d: path(
      'M47.3,-62.7C59.5,-56.2,66.3,-40,69.8,-24C73.2,-7.9,73.2,7.9,69.9,24.1C66.6,40.3,59.9,56.8,47.7,64.2C35.5,71.7,17.7,70.1,2.3,67C-13.2,63.9,-26.4,59.2,-41.8,52.8C-57.2,46.4,-74.8,38.2,-82,24.6C-89.2,11,-86.1,-8,-76.9,-21.5C-67.8,-35.1,-52.6,-43.3,-38.7,-49.2C-24.9,-55.2,-12.5,-59,2.5,-62.5C17.5,-66,35.1,-69.2,47.3,-62.7Z'
    );
  }
  100% {
    d: path(
      'M41.2,-54.4C51.9,-49,58.1,-34.9,65.9,-19.4C73.7,-3.9,83.1,13.1,77.8,24C72.4,34.8,52.3,39.6,36.9,48.6C21.5,57.6,10.7,70.9,-2.9,74.8C-16.5,78.8,-33,73.4,-48.8,64.5C-64.6,55.6,-79.7,43.2,-84.9,27.5C-90.2,11.8,-85.6,-7.3,-78.5,-24.5C-71.5,-41.7,-62.1,-57.1,-48.6,-61.6C-35.1,-66.1,-17.6,-59.7,-1.2,-58.2C15.3,-56.6,30.5,-59.8,41.2,-54.4Z'
    );
  }
}

.contact-blob path {
  animation: blob9 5s linear 0s infinite alternate;
}
.contact-blob {
  position: absolute;
  top: -55%;
  left: -50%;
  height: 200%;
  width: 200%;
  path {
    fill: $primary-color-alt;
  }
}

.contact-peppers-wrap {
  position: absolute;
  height: 100%;
  width: 100%;
  img {
    position: absolute;
  }

  &__img1 {
    top: -6%;
    left: 24%;
    width: 10vw;
    transform: rotate(-45deg);
  }
  &__img2 {
    left: 37%;
    bottom: 20%;
    z-index: -1;
  }
  &__img3 {
    right: 12%;
    top: 46%;
    width: 9vw;
  }
  &__img4 {
    top: 20%;
    left: 42%;
    width: 7vw;
    animation: bottle-bounce 5s infinite alternate;
  }
  &__img5 {
    left: 9%;
    top: 33%;
    z-index: -1;
  }
  &__img6 {
    right: 21%;
    bottom: 12%;
    width: 12vw;
    animation: bottle-bounce 4s infinite alternate;
  }
  &__img7 {
    left: 18%;
    bottom: 33%;
    z-index: -1;
    width: 5vw;
  }
  &__img8 {
    bottom: 17%;
    left: 4%;
    width: 10vw;
    z-index: -1;
    animation: bottle-bounce 6s infinite alternate;
  }
}

//privacy

.pay-card {
  height: 45px;
  padding-right: 5%;
  &:last-child {
    padding-right: 0;
  }
}
.pay-verify {
  height: 60px;
  padding-right: 5%;
  &:last-child {
    padding-right: 0;
  }
}

//success
.fullH-page {
  min-height: calc(100vh - 95px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-msg {
  position: relative;
  z-index: 5;
}

.success-peppers-wrap {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  img {
    position: absolute;
    min-width: 50px;
  }
  &__img1 {
    left: 25%;
    bottom: 18%;
    width: 5vw;
    animation: bottle-bounce 7s infinite alternate;
  }
  &__img2 {
    left: 5%;
    bottom: 20%;
    width: 8vw;
  }
  &__img3 {
    right: 37%;
    top: 20%;
    width: 10vw;
  }
  &__img4 {
    right: 38%;
    bottom: 10%;
    width: 8vw;
    animation: bottle-bounce 4s infinite alternate;
  }
  &__img5 {
    left: 34%;
    top: 15%;
    width: 70px;
    transform: rotate(135deg);
  }
  &__img6 {
    right: 24%;
    bottom: 27%;
    width: 90px;
    transform: rotate(30deg);
  }
}

//error page
.error-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.error-imgs-wrap {
  position: relative;
  height: 380px;
  width: 520px;
  margin-right: -3%;
  img {
    position: absolute;
  }
  .blob1 {
    position: absolute;
    top: -24%;
    left: 3%;
    height: 400px;
  }
  .bottle1 {
    bottom: 0;
    right: 0;
    width: 55%;
  }
  .bottle2 {
    bottom: 15%;
    left: 22%;
    width: 12%;
  }
}

//home blobs
.index-blobs {
  z-index: 9;
  position: relative;
  height: 100%;
  width: 100%;
  svg {
    position: absolute;
    path {
      fill: #ef9d1c;
    }
  }
}

@keyframes index-blob-1 {
  0% {
    d: path(
      'M60.9111128,64.8574193 C46.8549549,34.3452369 85.70926,20.0977134 60.9111128,0.959735488 C36.1129657,-18.1782424 -19.4642453,17.247494 7.63706125,71.0068437 C34.7383678,124.766193 74.9672708,95.3696016 60.9111128,64.8574193 Z'
    );
  }
  100% {
    d: path(
      'M67.2823877,66.2023285 C22.9588055,42.1556266 49.7539132,34.4424623 55.0651311,4.07487613 C60.376349,-26.29271 -19.1946487,21.4409162 7.90665788,75.2002658 C35.0079645,128.959616 111.60597,90.2490304 67.2823877,66.2023285 Z'
    );
  }
}
@keyframes index-blob-2 {
  0% {
    d: path(
      'M55.5671516,142.58357 C63.8660977,200.711047 141.221285,161.371771 103.364712,108.656275 C65.5081392,55.9407787 91.8290572,29.55748 56.2087961,9.37808231 C20.588535,-10.8013154 -20.5722209,23.4992573 -2.55986216,62.12933 C15.4524965,100.759403 47.2682055,84.4560922 55.5671516,142.58357 Z'
    );
  }
  100% {
    d: path(
      'M54.1246468,136.028018 C49.0270064,230.926409 164.465984,119.487883 92.4882707,105.995183 C20.5105578,92.5024825 91.6282138,29.7502807 56.0079527,9.570883 C20.3876916,-10.6085147 -20.7730643,23.6920579 -2.76070556,62.3221306 C15.2516531,100.952203 59.2222871,41.1296273 54.1246468,136.028018 Z'
    );
  }
}
@keyframes index-blob-3 {
  0% {
    d: path(
      'M87.2929674,67.8898504 C71.1172889,32.7767526 115.830414,16.3808526 87.2929674,-5.64293064 C58.7555209,-27.6667139 -5.20214774,13.1008502 25.9857502,74.9665432 C57.1736482,136.832236 103.468646,103.002948 87.2929674,67.8898504 Z'
    );
  }
  100% {
    d: path(
      'M71.4393155,57.076282 C11.3138536,18.1104253 118.899182,45.2432083 93.7365049,-2.70968737 C68.5738281,-50.6625831 1.24138977,16.0340935 32.4292878,77.8997865 C63.6171857,139.76548 131.564777,96.0421386 71.4393155,57.076282 Z'
    );
  }
}
@keyframes index-blob-6 {
  0% {
    d: path(
      'M116.764182,156.347289 C58.139166,79.625756 119.964711,69.1905391 84.4647106,28.2100703 C48.9647106,-12.7703984 -15.6891246,45.5971413 -0.364905806,121.292454 C14.9593129,196.987766 175.389198,233.068822 116.764182,156.347289 Z'
    );
  }
  100% {
    d: path(
      'M144.317269,197.159238 C136.417737,151.759983 177.93401,145.993805 123.655158,45.9428983 C69.3763048,-54.1080084 -38.79517,89.9899217 27.188181,162.104403 C93.171532,234.218885 152.216801,242.558493 144.317269,197.159238 Z'
    );
  }
}
@keyframes index-blob-8 {
  0% {
    d: path(
      'M108.909765,218.461669 C118.73789,316.051513 271.089453,190.824951 163.589453,147.305419 C56.0894529,103.785888 163.589453,42.2858881 128.089453,1.30541932 C92.5894529,-39.6750494 -20.2347659,18.7858881 -4.91054712,94.4812006 C10.4136716,170.176513 99.0816404,120.871826 108.909765,218.461669 Z'
    );
  }
  100% {
    d: path(
      'M111.637941,239.019072 C129.847157,313.086456 287.576744,209.422544 166.317629,167.862822 C45.0585143,126.3031 166.317629,62.8432912 130.817629,21.8628224 C95.3176289,-19.1176463 -151.776044,101.66817 -2.18237106,115.038604 C147.411302,128.409037 93.428726,164.951689 111.637941,239.019072 Z'
    );
  }
}
@keyframes index-blob-11 {
  0% {
    d: path(
      'M130.810695,127.983241 C72.1856784,51.2617078 134.011223,40.8264908 98.5112231,-0.153977903 C63.0112231,-41.1344467 -1.64261213,17.2330931 13.6816066,92.9284056 C29.0058254,168.623718 189.435711,204.704774 130.810695,127.983241 Z'
    );
  }
  100% {
    d: path(
      'M78.4494063,95.6762081 C19.8243902,18.954675 130.173542,53.5949424 94.6735415,12.6144737 C59.1735415,-28.3659951 -5.48029365,30.0015447 9.8439251,105.696857 C25.1681439,181.39217 137.074423,172.397741 78.4494063,95.6762081 Z'
    );
  }
}
@keyframes index-blob-12 {
  0% {
    d: path(
      'M88.0292581,67.3728697 C71.8535796,32.2597718 116.566704,15.8638719 88.0292581,-6.15991135 C59.4918117,-28.1836946 -4.46585701,12.5838695 26.722041,74.4495625 C57.909939,136.315256 104.204937,102.485968 88.0292581,67.3728697 Z'
    );
  }
  100% {
    d: path(
      'M64.5565015,42.4630423 C48.3808231,7.34994446 113.600285,19.0918111 85.0628391,-2.93197215 C56.5253927,-24.9557554 -7.43227602,15.8118087 23.755622,77.6775017 C54.9435199,139.543195 80.73218,77.5761402 64.5565015,42.4630423 Z'
    );
  }
}
@keyframes index-blob-15 {
  0% {
    d: path(
      'M341.662313,305.746212 C202.321697,123.393585 349.269366,98.591041 264.892555,1.18818928 C180.515745,-96.2146624 26.8457625,42.5139806 63.2685427,222.427474 C99.6913229,402.340968 481.002929,488.098838 341.662313,305.746212 Z'
    );
  }
  100% {
    d: path(
      'M215.015954,222.031031 C82.5020722,157.57406 164.234128,53.1151806 92.8713557,9.92825988 C21.5085839,-33.2586608 0.517664444,53.4128758 9.08989755,185.720711 C17.6621307,318.028547 347.529836,286.488002 215.015954,222.031031 Z'
    );
  }
}

@keyframes scale1 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
@keyframes scale2 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
@keyframes scale3 {
  0% {
    transform: scale(1) skew(0);
  }
  100% {
    transform: scale(1.4) skew(5deg, 10deg);
  }
}
@keyframes scale4 {
  0% {
    transform: scale(1) skew(0);
  }
  100% {
    transform: scale(0.7) skew(10deg, 5deg);
  }
}
@keyframes scale5 {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(0.6) rotate(20deg);
  }
}
@keyframes scale6 {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(0.6) rotate(-50deg);
  }
}

.index-blob-1 {
  top: 12%;
  right: 29%;
  width: 4vw;
  transform: rotate(120deg);
  path {
    transition: all 1s;
    animation: index-blob-1 4s ease-in-out 0s infinite alternate;
  }
}
.index-blob-2 {
  top: 12%;
  right: 34%;
  width: 5vw;
  path {
    animation: index-blob-2 3s ease-in-out 0s infinite alternate;
  }
}
.index-blob-3 {
  top: 32%;
  right: 32%;
  width: 6vw;
  // path {
  //   animation: index-blob-3 3s ease-in-out 0s infinite alternate;
  // }
  animation: scale4 6s ease-in-out 0s infinite alternate;
  transition: all 2s;
  &:hover {
    opacity: 0.9;
  }
}
.index-blob-4 {
  top: 20%;
  right: 39%;
  width: 4vw;
  transition: all 1s;
  animation: scale1 4s ease-in-out 0s infinite alternate;
  &:hover {
    opacity: 0.9;
  }
}
.index-blob-5 {
  top: 29%;
  right: 39%;
  transition: all 1s;
  animation: scale1 2s ease-in-out 0s infinite alternate;
  &:hover {
    opacity: 0.9;
  }
}
.index-blob-6 {
  top: 26%;
  right: 41%;
  width: 7vw;
  // path {
  //   animation: index-blob-6 4s ease-in-out 0s infinite alternate;
  // }
  animation: scale6 6s ease-in-out 0s infinite alternate;
  transition: all 2s;
  &:hover {
    opacity: 0.9;
  }
}
.index-blob-7 {
  top: 26%;
  right: 48%;
  transition: all 2s;
  animation: scale1 4s ease-in-out 0s infinite alternate;
  &:hover {
    opacity: 0.8;
  }
}
.index-blob-8 {
  top: 31%;
  right: 46%;
  width: 11vw;
  // path {
  //   animation: index-blob-8 3s ease-in-out 0s infinite alternate;
  // }
  transition: all 2s;
  animation: scale4 6s ease-in-out 0s infinite alternate;
  &:hover {
    opacity: 0.8;
  }
}
.index-blob-9 {
  top: 33%;
  right: 62%;
  transition: all 3s;
  animation: scale2 2s ease-in-out 0s infinite alternate;
  &:hover {
    opacity: 0.8;
  }
}
.index-blob-10 {
  top: 40%;
  right: 58%;
  width: 5vw;

  transition: all 2s;
  animation: scale2 4s ease-in-out 0s infinite alternate;
  &:hover {
    opacity: 0.9;
  }
}
.index-blob-11 {
  top: 54%;
  right: 53%;
  width: 9vw;
  // path {
  //   animation: index-blob-11 4s ease-in-out 0s infinite alternate;
  // }
  transition: all 2s;
  animation: scale4 6s ease-in-out 0s infinite alternate;
  &:hover {
    opacity: 0.9;
  }
}
.index-blob-12 {
  top: 50%;
  right: 63%;
  width: 6vw;
  // path {
  //   animation: index-blob-12 3s ease-in-out 0s infinite alternate;
  // }
  transition: all 2s;
  animation: scale3 4s ease-in-out 0s infinite alternate;
  &:hover {
    opacity: 0.9;
  }
}
.index-blob-13 {
  top: 63%;
  right: 62%;
  width: 5vw;
  transition: all 2s;
  animation: scale1 3s ease-in-out 0s infinite alternate;
  &:hover {
    opacity: 0.9;
  }
}
.index-blob-14 {
  top: 73%;
  right: 66%;
  transition: all 3s;
  animation: scale1 2s ease-in-out 0s infinite alternate;
  &:hover {
    opacity: 0.7;
  }
}
.index-blob-15 {
  top: 70%;
  right: 70%;
  width: 21vw;
  // path {
  //   animation: index-blob-15 4s ease-in-out 0s infinite alternate;
  // }
  animation: scale5 6s ease-in-out 0s infinite alternate;
}
.index-blob-16 {
  top: 73%;
  right: 80%;
  width: 4vw;
  transition: all 2s;
  animation: scale3 3s ease-in-out 0s infinite alternate;
  &:hover {
    opacity: 0.7;
  }
}

//home blobs end

.not-selected-3-btn {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
  &::before {
    position: absolute;
    content: 'Izaberite umake';
    background-color: $primary-color;
    color: #fff;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.not-selected-3-btn--en {
  &::before {
    content: 'Select 3 sauces';
  }
}

//media

@media (max-width: 1600px) {
  .form-section {
    max-width: 900px;
  }
  .clients-peppers-wrap {
    &__circle1 {
      top: 34%;
      left: 0%;
    }
    &__circle2 {
      left: 3%;
    }
    &__blob1 {
      right: -6%;
    }
    &__blob2 {
      bottom: 6%;
      left: -10%;
    }
    &__blob3 {
      right: -17%;
    }
    &__img1 {
      right: -10%;
      bottom: -2%;
    }
    &__img2 {
      right: -25%;
    }
    &__img3 {
      left: -20%;
    }
    &__img4 {
      left: -24%;
    }
    &__img5 {
      right: -25%;
    }
    &__img6 {
      left: -20%;
    }
    &__img7 {
      left: -15%;
      bottom: 27%;
    }
    &__img8 {
      right: -15%;
    }
    &__img9 {
      top: 52%;
      right: -10%;
    }
  }
}

@media (max-width: 1400px) {
  .side-buy-cart {
    h3 {
      padding: 20px 0;
    }
  }
  .cart-table .col-sm {
    width: 105px;
  }
  .cart-table .product-img {
    width: 80px;
    height: 80px;
  }
  .total-box {
    padding: 15px 25px 20px 25px;
  }
  .blog-box {
    max-width: 500px;
    img {
      height: 300px;
    }
  }
  .clients-wrap {
    padding-bottom: 20px;
  }
  .categories-box {
    width: 290px;
    padding: 20px;
  }
  .products-wrap {
    width: calc(100% - 290px);
    .products-box {
      padding: 15px 5px 100px 5px;
    }
  }
  .contact-blob {
    position: absolute;
    top: -55%;
    left: -15%;
    height: 200%;
    width: 150%;
  }
  .carousel-wrap {
    height: 500px;
    margin: 0 50px 0px 0;
  }
  .index-first {
    padding-top: 20px;
  }
  .index-blobs {
    height: 95%;
    top: -5%;
  }
}

@media (max-width: 1350px) {
  .products-wrap {
    .products-box {
      padding: 15px 10px 100px 10px;
      flex: 1;
    }
  }
  .clients-peppers-wrap {
    &__img1 {
      right: 20%;
      bottom: 0%;
    }
    &__img2 {
      right: 10%;
      top: 20%;
    }
    &__img3 {
      left: -15%;
    }
    &__img4 {
      left: -5%;
    }
    &__img5 {
      display: none;
    }
    &__img6 {
      left: 15%;
      top: 26%;
    }
    &__img7 {
      display: none;
    }
    &__img8 {
      right: -2%;
    }
    &__img9 {
      right: -8%;
    }
  }
}

@media (max-width: 1200px) {
  .cart-wrap {
    flex-direction: column;
  }
  .cart-table {
    width: 100%;
    min-height: 300px;
  }
  .total-box {
    width: 100%;
    margin: 50px 0;
  }
  .blog-box {
    max-width: 440px;
    img {
      height: 270px;
    }
  }
  // .product-modal {
  //   .close-btn {
  //     right: 5%;
  //   }
  // }
  .products-wrap {
    justify-content: center;
    .products-box {
      width: 100%;
    }
  }
  .contact-first {
    padding: 100px 5% 0 5%;
  }
  .contact-left {
    width: 45%;
  }
  .contact-right {
    width: 50%;
    padding: 10vh 5%;
  }
  .contact-blob {
    left: -24%;
    width: 150%;
  }
  .post-header {
    padding: 120px 8% 60px 8%;
  }
}

@media (max-width: 1000px) {
  .md-fd--c {
    flex-direction: column;
  }
  .md-p0 {
    padding: 0;
  }
  .categories-box {
    width: 100%;
    padding: 20px;
    position: relative;
    top: 0;
  }
  .products-wrap {
    padding: 5px 0;
    width: 100%;
  }
  .carousel-wrap {
    height: 450px;
    width: 400px;
    margin: 0 30px 50px 0;
  }
  .img-txt-wrap {
    justify-content: space-between;
    .products-box {
      width: unset;
      flex-grow: 1;
      padding-left: 0;
      padding-right: 0;
    }
  }
  .zoom-icon {
    bottom: 20%;
  }
  .pay-left {
    padding: 20px 3%;
  }
  .pay-right {
    padding: 20px 5%;
    margin-top: 30px;
    margin-left: 0;
    position: relative;
  }
  .blog-wrap {
    padding-bottom: 0;
  }
  .blog-box {
    max-width: 700px;
  }
  .post-body .wp-block-image img {
    max-height: 350px;
  }
  .post-go-back {
    display: flex;
    padding: 100px 0 0 0;
  }
  .clients-blob {
    left: 0;
    width: 100%;
  }
  .clients-txt-intro {
    margin: 0 auto;
  }
  .clients-peppers-wrap {
    &__img3,
    &__img4,
    &__img8 {
      display: none;
    }
    &__img9 {
      right: 0%;
    }
    &__blob1 {
      right: 0%;
    }
    &__blob2 {
      left: -5%;
    }
    &__blob3 {
      right: 0%;
    }
  }
  .contact-left {
    width: 200px;
    height: 400px;
    padding: 0;
    z-index: 5;
  }
  .contact-logo {
    width: 100%;
  }
  .contact-peppers-wrap__img4 {
    top: 30%;
  }
  .pinContainer {
    height: 100%;
  }
  .panel {
    height: 100%;
    width: 100%;
    position: relative;
    flex-direction: column;
    padding: 0;
  }
  .hor-title {
    display: block;
    white-space: unset;
  }
  .hor-section-1 {
    max-width: 100vw;
    padding: 50px 4%;
    &__img-1 {
      height: auto;
      width: 100%;
      padding: 0;
    }
    &__img-2 {
      height: 100%;
      width: 50vw;
      padding: 40px 0 0 0;
      margin: 0 auto;
    }
    &__blob1 {
      left: unset;
      bottom: unset;
      width: 30vw;
      right: 5%;
      top: 20%;
    }
    &__blob2 {
      right: 10%;
      bottom: 27%;
      width: 60vw;
    }
  }
  .hor-section-2 {
    max-width: 100vw;
    padding: 50px 4%;
    flex-direction: column;
    &__txt {
      width: 100%;
      padding-left: 0;
    }
    &__img-1 {
      width: 50vw;
      height: auto;
      padding: 0;
      align-self: flex-end;
    }
    &__blob1 {
      right: unset;
      top: 30%;
      width: 70vw;
      left: -20%;
    }
  }
  .hor-section-3 {
    max-width: 100vw;
    padding: 50px 4%;
    &__title {
      margin-left: 0;
    }
    img {
      height: auto;
    }
    &__img-wrap {
      flex-direction: column;
      img {
        width: 100%;
        padding: 0;
        max-height: 280px;
        &:last-child {
          width: 70%;
          align-self: flex-end;
          margin-top: -40px;
          padding: 0 5%;
        }
      }
    }
    &__img-1 {
      height: auto !important;
      width: 40vw !important;
      position: absolute;
      top: -34%;
      left: 15%;
    }
    &__blob1 {
      bottom: 20%;
      width: 20vw;
      left: 33%;
      z-index: 0;
    }
    &__blob2 {
      display: none;
    }
  }
  .hor-section-4 {
    max-width: 100vw;
    min-width: unset;
    padding: 50px 4%;
    flex-direction: column;
    &__txt-1 {
      align-self: flex-start;
      width: 100%;
    }
    &__img-1 {
      width: 100%;
      margin: 0;
    }
    &__img-2 {
      display: none;
    }
    &__blob1 {
      display: none;
    }
    &__blob2 {
      top: 17%;
      width: 60vw;
      left: auto;
      right: 1%;
    }
    &__blob3 {
      display: none;
    }
    &__img-wrap {
      width: 100%;
      padding-left: 0;
    }
  }
  .hor-section-5 {
    max-width: 100vw;
    padding: 50px 4% 0px 4%;
    &__img-wrap {
      width: 100%;
      padding: 0;
      padding-top: 50px;
      img {
        height: auto;
        width: 100%;
        max-height: unset;
        padding: 0;
      }
    }
    &__img-1 {
      width: 100%;
    }
    &__img-2 {
      display: none;
    }
    &__blob1 {
      top: -25%;
      width: 100vw;
      left: -30%;
    }
  }
  .hor-section-6 {
    min-height: 400px;
  }
  .hor-section-7,
  .hor-section-8 {
    display: none;
  }
  .hor-section-9 {
    display: block;
  }
  .home-peppers-wrap__img-bottle {
    height: unset;
    width: 18vw;
    filter: drop-shadow(80px 80px 50px rgba(0, 0, 0, 0.25882));
  }
  .arrow-next-link {
    width: 20px;
  }
  .hor-title {
    letter-spacing: -5px;
  }
  .index-first .first__txt2 {
    transform: translateX(10px);
  }
  .home-subsection {
    padding-bottom: 300px;
    h2 {
      line-height: 1.5;
    }
  }
  .link-wrap {
    .fs-xl {
      letter-spacing: -2px;
      font-size: 50px;
    }
  }

  .home-bottles-wrap {
    img {
      height: unset;
      width: 20vw;
    }
    &__img5.in-viewport {
      bottom: 2%;
    }
  }

  .home-clients-title {
    line-height: 1.5;
  }
  .home-subsection2 {
    padding-bottom: 400px;
  }

  .home-peppers-wrap {
    &__img-bottle {
      bottom: 5%;
      top: unset;
      width: 35vw;
      filter: drop-shadow(30px -30px 50px rgba(0, 0, 0, 0.25882));
      right: 5%;
    }
    &__img1 {
      right: unset;
      top: -10%;
      height: unset;
      width: 25vw;
      left: -10%;
      opacity: 0.9;
    }
    &__img3 {
      right: 7%;
      top: -10%;
      height: 10vh;
      transform: scale(1);
    }
    &__img4 {
      right: 31%;
      height: unset;
      width: 10vw;
    }
    &__img5 {
      right: 0%;
      top: 22%;
      width: 15vw;
    }
    &__img6 {
      right: unset;
      top: 50%;
      left: 20%;
    }
    &__img7 {
      right: 50%;
      top: unset;
      bottom: 5%;
    }
    &__img8 {
      right: 2%;
      top: unset;
      bottom: 2%;
      width: 10vw;
    }
    &__img9 {
      right: unset;
      top: unset;
      height: 20vh;
      bottom: 0%;
      left: -2%;
    }
  }
  .wave-wrap {
    height: 150px;
  }
  .home-subsection.in-viewport {
    &:before {
      top: -40%;
      clip-path: ellipse(97% 62% at 62% 81%);
    }
  }

  .home-first-wrap__img-bottle {
    width: 30vw;
    img {
      width: 100%;
    }
  }
}

@media (max-width: 900px) {
  // .product-modal {
  //   .img-txt-wrap {
  //     flex-direction: column;
  //   }
  //   .carousel-wrap {
  //     width: 100%;
  //     height: 500px;
  //   }
  //   .products-box {
  //     padding: 15px 0;
  //     padding-bottom: 40px;
  //     min-width: unset;
  //     max-width: 450px;
  //     width: 100%;
  //   }
  // }
}

@media (max-width: 800px) {
  .cart-table {
    .product-info {
      flex-direction: column;
      align-items: flex-start;
    }
    .col-sm {
      width: 95px;
    }
  }
  .products-wrap {
    justify-content: center;
    .products-box {
      width: 100%;
    }
  }
  .post-body .wp-block-image img {
    max-height: 250px;
  }
  .home-img {
    max-height: 350px;
  }
  .arrow-next-link {
    height: 15px;
    padding-left: 2px;
    margin-bottom: 4px;
  }
  .index-first {
    padding-top: 100px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .contact-first {
    flex-direction: column;
    height: 100%;
  }
  .contact-top-bg {
    height: 100px;
  }
  .contact-right {
    width: 80%;
    padding: 10vh 0%;
  }
  .img-txt-wrap {
    flex-direction: column;
  }
  .product-back {
    padding: 30px 0 40px 0;
  }
  .carousel-wrap {
    width: 100%;
    max-width: 500px;
    height: 500px;
  }
  .fullH-page {
    flex-direction: column-reverse;
  }
  .clients-txt-intro {
    padding: 80px 5% 80px 5%;
    width: 300px;
  }
}

@media (max-width: 700px) {
  .success-page {
    min-height: 100vh;
  }
}

@media (max-width: 600px) {
  .xs-fd--c {
    flex-direction: column;
  }
  .xs-fd--cr {
    flex-direction: column-reverse;
  }
  .xs-p-0 {
    padding: 0;
  }
  .xs-pt-sm {
    padding-top: 80px;
  }
  .xs-txt-align-c {
    text-align: center;
  }
  .clients-txt-intro {
    color: #fff;
    padding: 60px 8% 60px 2%;
  }
  .client-box {
    height: 40vw;
    width: calc(100% / 2 - 10px);
    margin: 5px;
  }
  .form-wrap {
    padding: 50px 5%;
    box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.5);
  }

  .products-wrap .products-box {
    padding: 20px 0px;
    width: 100%;
    max-width: 100%;
  }
  .products-img {
    // height: 280px;
    box-shadow: 3px 0px 7px 0 rgba(0, 0, 0, 0.1);
    .product-img {
      object-fit: contain;
      padding: 5px;
    }
  }
  .products-info {
    height: auto;
    min-height: 150px;
    padding: 20px 15px 15px 15px;
  }
  .quantity-wrap {
    height: 40px;
  }

  // .product-modal {
  //   .carousel-wrap {
  //     height: 350px;
  //     .main-img {
  //       box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.1);
  //     }
  //   }
  // }
  .zoom-icon {
    height: 30px;
    width: 30px;
  }

  .mob-symb {
    display: inline;
    color: $gray-color;
  }
  .mob-hide {
    display: none;
  }
  .cart-table {
    padding: 15px;
  }
  .cart-wrap .icon-bin {
    padding: 0 5px 0 25px;
  }
  .xs-empty {
    width: 44px;
  }
  .blog-box-link {
    margin-bottom: 30px;
  }
  .blog-box {
    padding: 12px 0;
  }
  .blog-box img {
    width: 100%;
    height: 200px;
  }
  .blog-img {
    object-fit: cover;
  }

  .blog-pagination {
    margin: 20px 0px;
    .number {
      width: 30px;
      height: 30px;
      margin: 5px;
    }
  }
  .post-header {
    padding: 100px 5% 20px 5%;
    background: linear-gradient(#0000, #000);
  }
  .post-body {
    margin: 20px 5%;
  }
  .post-share {
    padding: 50px 5%;
  }
  .post-go-back {
    padding: 50px 5%;
  }
  .share-button {
    margin-left: 15px;
    margin-right: 0;
  }

  .side-buy-cart {
    width: 100%;
    padding: 70px 25px;
  }

  .pay-card {
    height: 30px;
  }
  .pay-verify {
    height: 50px;
  }
  .pay-right {
    padding: 30px 3%;
  }
  .corvus-logo {
    height: 26px;
  }
  .total-box {
    padding: 20px 1%;
  }
  .cart-table .product-img img {
    padding: 5px 5px 0 0;
  }

  .page-shop {
    min-height: 90vh;
  }

  .clients-peppers-wrap {
    &__circle1 {
      top: 33%;
      width: 12vw;
      height: 12vw;
    }
    &__circle2 {
      left: 1%;
      width: 7vw;
      height: 7vw;
    }
    &__circle3 {
      bottom: 12%;
      right: 15%;
      width: 10vw;
      height: 10vw;
    }
    &__blob2 {
      left: -7%;
      bottom: 7%;
      width: 50vw;
    }
    &__blob3 {
      display: none;
    }
    &__img9 {
      display: none;
    }
  }
  .wave-wrap2 {
    height: 100px;
  }

  .clients-blob {
    left: -15%;
    width: 120%;
    top: -30%;
    height: 150%;
  }
  .clients-wrap {
    padding-top: 80px;
  }
  .contact-bg {
    display: none;
  }
  .contact-left {
    height: 300px;
  }
  .contact-peppers-wrap {
    &__img1 {
      top: 2%;
      left: 10%;
    }
    &__img3 {
      right: 10%;
      top: 35%;
      width: 15vw;
    }
    &__img5 {
      left: 0%;
    }
    &__img6 {
      bottom: 0%;
      width: 20vw;
    }
    &__img8 {
      bottom: 0%;
      left: 10%;
      width: 20vw;
    }
  }
  .contact-blob {
    width: 140%;
  }
  .home-first-wrap__img-bottle {
    width: unset;
    bottom: 10%;
    img {
      width: 65vw;
    }
  }
  .index-first {
    justify-content: space-between;
    padding-bottom: 120px;
  }
  .first__txt2-mob {
    display: flex;
  }
  .first__txt2 {
    display: none;
  }
  .index-first__txt {
    color: #d38c1d;
  }
  .home-first-wrap {
    height: 90%;
  }
  .home-first-wrap__img-blob {
    width: 100%;
  }
  .error-msg {
    align-items: center;
    padding-top: 80px;
    padding-bottom: 0;
  }
  .error-imgs-wrap {
    width: 90%;
    margin-right: 0%;
    .blob1 {
      height: unset;
      width: 75%;
      top: unset;
      bottom: 20%;
    }
    .circle2 {
      top: 20% !important;
    }
  }

  .home-first-wrap__img-blob {
    width: 100%;
  }
  .index-blobs {
    height: 100%;
    top: 50px;
  }
  .index-blob-1 {
    top: 7%;
    right: 10%;
    width: 16vw;
  }
  .index-blob-2 {
    top: 5%;
    right: 30%;
    width: 15vw;
  }
  .index-blob-3 {
    top: 20%;
    right: 15%;
    width: 16vw;
  }
  .index-blob-4 {
    top: 13%;
    right: 34%;
    width: 5vw;
  }
  .index-blob-5 {
    top: 24%;
    right: 18%;
  }
  .index-blob-6 {
    top: 24%;
    right: 25%;
    width: 17vw;
  }
  .index-blob-7 {
    top: 24%;
    right: 38%;
  }
  .index-blob-8 {
    top: 12%;
    right: 37%;
    width: 21vw;
  }
  .index-blob-9 {
    top: 40%;
    right: 80%;
  }
  .index-blob-10 {
    top: 30%;
    right: 25%;
    width: 10vw;
  }
  .index-blob-11 {
    top: 41%;
    right: 73%;
    width: 15vw;
  }
  .index-blob-12 {
    top: 47%;
    right: 75%;
    width: 14vw;
  }
  .index-blob-13 {
    top: 55%;
    right: 80%;
    width: 15vw;
  }
  .index-blob-14 {
    top: 58%;
    right: 83%;
  }
  .index-blob-15 {
    top: 80%;
    right: 75%;
    width: 31vw;
  }
  .index-blob-16 {
    top: 56%;
    right: 85%;
    width: 14vw;
  }
}

@media (max-width: 500px) {
  .carousel-wrap {
    height: 380px;
  }
  .error-imgs-wrap .blob1 {
    bottom: 15%;
  }
}