/* General */
p{
  margin: 0;
  font-size: 20px;
}

.hero-content h1, .hero-content .header-description, .hero-content p, .nilloma-threecontainer h2, .nilloma-threecontainer p, .clients h2 {color: white;}
.nilloma-sec2 h2, .resume h3, .resume p {color: #3B501F;}
.gallery-side:last-child::-webkit-scrollbar {width: 0;}
/* End */

.hero-banner{
  height: 100vh;
  position: relative;
}

.hero-banner:before{
  content: '';
  background-image: url(https://molecularfarmaceutica.com/wp-content/uploads/2025/02/Nilloma-Shape-1.svg);
  width: 260px;
  height: 200px;
  position: absolute;
  bottom: 0;
  z-index: 1;
  left: -4%;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner-bg{
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  object-position: 100% 37%;
}

.responsive-pic{display: none;}

.hero-content {
  left: 0;
  right: 0;
  display: flex;
  height: 80%;
  width: 100%;
  padding: 4em;
  margin: 0 auto;
  max-width: 80vw;
  position: absolute;
  flex-direction: column;
  justify-content: center;
}

.hero-content h1{
  max-width: 50%;
  /* line-height: 1; */
  line-height: 0.8;
  margin-bottom: 3.5rem;
}

.hero-content .header-description{
  font-weight: 500;
  line-height: 1;
  margin-bottom: 2rem;
  max-width: 680px;
}

.hero-content p{
  font-size: 20px;
  max-width: 700px;
}

.hero-content form .qib-button-wrapper{display: none;}

.hero-content button.single_add_to_cart_button.button{
  border: none !important;
  color: #f86400  !important;
  margin-bottom: 1.2em;
}

.hero-content button.single_add_to_cart_button.button:hover{
  color: black !important;
  background-color: #FFDF93 !important;
  border: 1px solid #FFDF93 !important;
}

/* .hero-content .hero-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 40px;
  width: fit-content;
  border-radius: 10px;
  font-weight: 500;
  margin: 1.2em 0 3em;
  font-size: 18px;
  transition: all .4s ease;
} */

/* .hero-content .hero-btn:hover, .sec5-side .global-btn:hover{
  color: black !important;
  background-color: #FFDF93 !important;
  border: 1px solid #FFDF93 !important;
} */

.hero-btn-new:hover{
  color: white !important;
  background-color: #f86400 !important;
  border: 1px solid #f86400 !important;
}

small {
  font-size: 14px;
  font-weight: 200;
}

.nilloma-sec1 {
  z-index: 2;
  position: relative;
  padding: 5em 4em;
  background-color: #ff7b04;
}

.info-2-2{
  text-align: center;
  font-size: 22px;
  max-width: 1400px;
  margin: 0 auto 2rem;
}

.info-2-2 h2, .info-2-2 p{color: white;}
.info-2-2 p{margin: 15px auto 15px;}

/* Section 2 */
.nilloma-sec2 {
  z-index: 2;
  position: relative;
  background-color: #FFDF93;
  padding: 5em 4em;
}

.nilloma-sec1 h2, .nilloma-sec2 h2 {
  text-align: center;
  font-size: 60px;
  font-weight: 400;
}

.nilloma-sec2 .info-2 {
  text-align: center;
  font-size: 22px;
  max-width: 1400px;
  margin: 0 auto 4rem;
}

.nilloma-sec2 .info-2 p {
  color: #3B501F;
  margin: 15px auto 15px;
}

.nilloma-secontainer{
  margin: 0 auto;
  max-width: 1600px;
}

.resume-info {
  gap: 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.resume{width: 29%;}

.resume img{
  width: 50px;
  height: 50px;
}

.resume h3 {font-size: 35px;}
.resume p {font-size: 20px;}

/* Section 3 */
.nilloma-sec3 {
  position: relative;
  background-color: #f86400;
}

.nilloma-deco1, .nilloma-deco2{position: absolute;}

.nilloma-deco1{
  left: 0;
  top: 11em;
  width: 800px;
}

.nilloma-deco2 {
  right: 0;
  top: 20em;
  bottom: 0;
  margin: auto 0;
}

.nilloma-sec3:before, .nilloma-sec3:after{
  content: '';
  z-index: 1;
  height: 610px;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
}

.nilloma-sec3:before{
  background-image: url('https://molecularfarmaceutica.com/wp-content/uploads/2025/02/Nilloma-Shape-3.png');
  width: 430px;
  top: 130px;
  left: 0;
}

.nilloma-sec3:after{
  background-image: url('https://molecularfarmaceutica.com/wp-content/uploads/2025/02/Nilloma-Shape-2.png');
  width: 400px;
  top: -270px;
  right: 0;
}

.nilloma-threecontainer {
  padding: 6em 4em;
  max-width: 1600px;
  margin: 0 auto;
}

.nilloma-threecontainer h2, .nilloma-threecontainer p, .nilloma-threecontainer ul {
  z-index: 2;
  position: relative;
}

.nilloma-threecontainer h2 {
  font-size: 50px;
  line-height: 1.1;
}

.nilloma-threecontainer p {
  margin: 1rem 0 0;
  font-size: 25px;
}

.nilloma-threecontainer ul {
  font-size: 20px;
  color: white;
  margin-bottom: 3em;
  display: flex;
  gap: .3em 1em;
  padding: 0 0 0 18px;
  flex-wrap: wrap;
  position: relative;
  flex-direction: column;
}

.nilloma-threecontainer ul li{position: relative;}

/* .nilloma-threecontainer ul li:not(:first-child):before {
  content: " | ";
  left: -12px;
  font-weight: 900;
  position: absolute;
}

.nilloma-threecontainer ul li:nth-child(3) {padding-left: 1em;}
.nilloma-threecontainer ul li:nth-child(3):before{left: 2px !important;} */

.gallery {
  display: flex;
  gap: 2em;
  flex-direction: row;
  max-height: 675px;
  height: 100%;
  z-index: 2;
  position: relative;
}

.gallery-pic img{
  width: 100%;
  height: 100%;
  cursor: pointer;
  object-fit: cover;
  border-radius: 30px;
}

.video-steps-p, .video-steps{
  width: 100%;
  background-color: black;
  overflow: hidden;
  border-radius: 30px;
}

.video-steps-p{
  height: 700px;
  object-fit: contain;
}

.video-steps{
  object-fit: cover;
  height: 100%;
  cursor: pointer;
  z-index: -1;
    position: relative;
}

.main-carousel .owl-carousel .owl-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-carousel .owl-carousel .owl-item .item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* .main-video-container {
  background-color: black;
  height: 100%;
  width: 100%;
  min-height: 700px;
  border-radius: 30px;
} */

.gallery-side:first-child{width: 75%;}

.gallery-side:first-child .gallery-pic {
  height: 705px;
  display: block;
  width: 100%;
}

.gallery-side:last-child{
  width: 25%;
  height: 705px;
  overflow-y: scroll;
}

.thumb-carousel{
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.gallery-side:last-child .gallery-pic {
  height: 212px;
  display: block;
  width: 100%;
  z-index: 2;
}

/* Owl */
.gallery-side .owl-carousel .owl-item img {
  height: 705px !important;
  object-fit: cover;
  border-radius: 30px;
}
/* End */

/* Benefits */
.feat-info h2 {
  color: white;
  font-size: clamp(2em, 7.5vw, 12em);
  text-align: center;
  line-height: 1;
  z-index: 1;
  position: relative;
  text-transform: uppercase;
  letter-spacing: -10px;
}

.feat-info p {
  color: white;
  text-align: center;
  margin: 1em auto 0;
  max-width: 1600px;
  z-index: 2;
  position: relative;
}

.benefits-container{
  display: flex;
  padding: 12em 4em 10em;
  max-width: 1600px;
  margin: 0 auto;
}

.benefits-side:first-child {
  display: flex;
  flex-direction: column;
  gap: 4em;
  padding-top: 4.7em;
}

.benefits-side{
  width: 50%;
  position: relative;
}

.beitem{
  display: flex;
  flex-direction: row;
  gap: 2em;
  align-items: center;
}

.beside {
  z-index: 3;
  position: relative;
}

.beside:first-child{width: 15%;}
.beside:first-child p{font-size: 80px;}

.beside p{
  color: white;
  font-size: 20px;
  line-height: 1;
}

/* Testimonials */
.beside:last-child{width: 50%;}

.testimonial-pic{
  position: absolute;
  width: 60%;
  right: 0;
  margin-top: -8.9em;
  z-index: 2;
}

.testimonials {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
}

.testimonial {
  display: flex;
  flex-direction: row;
  gap: 1em;
  padding: .5em 2em 0.7em 1em;
  border-radius: 50px;
  /* width: 430px; */
  width: 510px;
  align-items: center;
  position: absolute;
  height: max-content;
}

.testimonial:first-child {left: -7em;}

.testimonial:nth-child(2) {
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.testimonial:last-child {
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
}

.testimonial-side img{
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-side p {font-size: 16px;}
/* End */

/* Clients */
.clients{
  padding: 1em 4em 8em;
  max-width: 1600px;
  margin: 0 auto;
}

.sec-header{
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto 4em;
  max-width: 1400px;
}

.clients h2{
  color: white;
  font-size: 60px;
  line-height: 1.1;
}

.clients p{color: white;}

.clients-carousel {
  margin: 0 auto;
  max-width: 1200px;
}

.client-item {
  display: flex;
  flex-direction: row;
  gap: 3em;
}

.client-side:first-child {width: 40%;}

.client-side img, .client-side video{
  width: 100%;
  height: 700px;
  border-radius: 30px;
  /* object-fit: cover; */
  background-color: black;
}

.client-side:last-child {
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.client-item p, .client-item a{color: white;}
.client-side p{font-size: 38px;}

.clients-carousel .owl-nav {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.clients-carousel .owl-nav button img{width: 20px;}
.clients-carousel .owl-prev, .clients-carousel .owl-next {position: relative;}
.clients-carousel .owl-prev {left: -5em;}
.clients-carousel .owl-next {right: -5em;}

.clients-carousel .owl-dots .owl-dot span {
  margin: 5px 10px !important;
  background: transparent !important;
  border: 1px solid white;
}

.clients-carousel .owl-dots {bottom: -4em !important;}
.clients-carousel .owl-theme .owl-dots .owl-dot.active span, .clients-carousel .owl-theme .owl-dots .owl-dot:hover span {background: white !important;}
/* End Section 3 */

.hero-btn-new{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 40px;
  width: fit-content;
  border-radius: 10px;
  font-weight: 500;
  margin: 1.2em 0 0;
  font-size: 18px;
  transition: all .4s ease;
}
/* Section 4 */
.nilloma-sec4{
  height: 100%;
  padding-bottom: 5em;
  background-position-y: top;
  background-size: 100%;
  /* background-position: center; */
  background-repeat: no-repeat;
  background-color: #ffd579;
}

.nilloma-sec4 .container{
  display: flex;
  flex-direction: row;
  padding: 6em 4em;
  max-width: 1800px;
  margin: 0 auto;
}

.sec4-side:first-child {width: 55%;}
.sec4-side:last-child {width: 45%;}

.sec4-side h2 {
  font-size: 35px;
  margin-bottom: 1rem;
  color: #3B501F;
}

.sec4-side p {
  color: #3B501F;
  margin-bottom: 3rem;
}

.details-group {
  display: flex;
  flex-direction: column;
  gap: 2em;
  position: relative;
  z-index: 2;
}

.details {
  width: 100%;
  overflow: hidden;
  border-bottom: 2px solid #3B501F;
  transition: height 300ms ease-in-out;
}

.details__summary, .details__content {padding: 24px 45px 24px 24px;}

.details__summary {
  font-weight: bold;
  color: #3B501F;
  position: relative;
  list-style: none;
  /* padding-left: 35px; */
  outline: 0;
  display: flex;
  gap: 10px;
  cursor: pointer;
  font-size: 24px;
  text-transform: uppercase;
  line-height: 1.2;
  transition: color 300ms ease-in-out;
}

.details__summary span{margin-right: 0em;}
[open] > .details__summary {color: #f74f00;}
.details__summary::-webkit-details-marker {display: none;}

.details__summary:before, .details__summary:after {
  content: "";
  position: absolute;
}

.details__summary:before {
  right: 20px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  width: 16px;
  background: #3B501F;
}

.details__summary:after {
  right: 28px;
  top: 50%;
  height: 16px;
  margin-top: -8px;
  width: 2px;
  margin-right: -1px;
  background: #3B501F;
  transition: all 300ms ease-in-out;
}

[open] .details__summary:after {
  opacity: 0;
  transform: translateY(25%);
}

.details__content {
  padding-top: 0;
  padding-left: 48px;
  color: #3B501F;
}

.details__content p, .details__content ul{
  color: #3B501F;
  font-size: clamp(.9em, 1.3vw, 1.3em);
}

.details__content p{max-width: 615px;}
/* End */

/* Section 5 */
.nilloma-sec5{
  background-color: #f96600;
  padding: 5em 5em;
  max-height: 100%;
  height: 920px;
  position: relative;
}

.nilloma-sec5:before, .nilloma-sec5:after{
  content: '';
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
}

.nilloma-sec5:before{
  background-image: url(https://molecularfarmaceutica.com/wp-content/uploads/2025/02/Nilloma-Ellipse-2.svg);
  width: 770px;
  height: 900px;
  bottom: 0;
  left: 0;
  background-size: 100%;
}

.nilloma-sec5:after{
  background-image: url(https://molecularfarmaceutica.com/wp-content/uploads/2025/02/Nilloma-Shape-46.png);
  width: 630px;
  height: 630px;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto 0;
  background-position: right;
  background-size: contain;
}

.nilloma-sec5 .container{
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  gap: 4em;
  align-items: center;
  z-index: 2;
  position: relative;
  height: 100%;
}

.sec5-side{
  position: relative;
  height: 100%;
}

.sec5-side:first-child{
  width: 50%;
  display: flex;
  align-items: center;
}

.feat-pics {
  gap: 1em;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}

/* .feat-pics img {
  width: 340px;
  height: 340px;
  margin: auto;
  object-fit: cover;
  position: absolute;
  border-radius: 20px;
}

.feat-pics img:nth-child(1) {
  top: 0;
  left: 80px;
  right: 0;
  z-index: 1;
}

.feat-pics img:nth-child(2) {
  top: -150px;
  right: 70px;
  z-index: 1;
  bottom: 0;
}

.feat-pics img:nth-child(3) {
  bottom: 0;
  left: 0;
  right: -330px;
  z-index: 2;
} */

.sec5-side:last-child{
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sec5-side h2, .sec5-side p {color: white;}

.sec5-side h2 {
  font-size: 90px;
  font-weight: 400;
  max-width: 700px;
  font-weight: bold;
  line-height: 1.1;
}

.sec5-side .followers {
  font-size: 70px;
  font-weight: bold;
  margin: 1.5rem 0 1em;
}

.sec5-side .followers i {margin-right: 1rem;}

.sec5-side .global-btn{
  display: flex;
  justify-content: center;
  transition: all .4s ease;
  align-items: center;
  padding: 10px 40px;
  width: fit-content;
  border-radius: 10px;
  font-weight: 500;
  margin: 0 0 1em;
  color: #f74f00;
  font-size: 18px;
  background-color: white;
}

.ti-widget[data-wkey="feed-instagram"][data-col="3"] .ti-layout-item {flex: 0 0 calc(100% / 6) !important;}

.ti-widget[data-wkey="feed-instagram"][data-style=custom-style][data-widget-type=social] {
  height: 100% !important;
  display: flex !important;
  width: 100% !important;
  flex-direction: column;
  justify-content: center;
}

/* Tienda */
/* main .store-summary {padding: 4em 4em 5em;} */

/* Responsive Mode */
@media (max-width: 1920px){  
  .hero-content {
    height: 85%;
    max-width: 1700px;
  }

  .hero-content h1 {margin-bottom: 2.5rem;}

  .hero-content .header-description {
    max-width: 660px;
    font-size: clamp(1em, 1.3vw, 24px) !important;
  }

  .hero-content p {
    font-size: 18px;
    max-width: 640px;
  }

  .resume-info {
    max-width: 1460px;
    margin: 0 auto;
  }

  .nilloma-sec1 h2, .nilloma-sec2 h2 {
    line-height: 1.1;
    font-size: clamp(28px, 3.5vw, 3.8em);
  }

  .nilloma-threecontainer h2 {font-size: clamp(1.5em, 4.5vw, 4em);}
  .nilloma-threecontainer p {font-size: 24px;}
  .clients {padding: 0 4em 7em;}
  .sec4-side h2 {font-size: clamp(1.5em, 3.2vw, 2.5em);}
  .details__summary {font-size: 22px;}
  .details-group {gap: 1em;}
  .testimonial-pic {margin-top: -7.8em;}

  .feat-pics img {
    width: 330px;
    height: 330px;
  }

  .feat-pics img:nth-child(1) {left: 0;}

  .feat-pics img:nth-child(2) {
    top: -140px;
    right: 0;
  }

  .feat-pics img:nth-child(3) {right: -200px;}

  .ti-widget[data-wkey="feed-instagram"][data-col="3"] .ti-layout-item {flex: 0 0 calc(100% / 4) !important;}
  .sec5-side h2 {font-size: clamp(2.5em, 4.5vw, 5em);}
  .sec5-side .followers {margin: 1.3rem 0 2rem;}
}

@media (max-width: 1680px){
  .nilloma-sec4 {
    height: 100%;
    padding-bottom: 0;
    background-position-y: top;
    background-size: 130% 90%;
    background-position-x: 55%;
  }
}

@media (max-width: 1600px){
  .hero-content {max-width: 1500px;}

  .hero-banner:before {
    width: 180px;
    height: 180px;
    bottom: -40px;
  }

  .hero-content .header-description {
    max-width: 555px;
    margin-bottom: 1rem;
  }

  .hero-content p {
    font-size: 16px;
    max-width: 560px;
  }

  .info-2-2 {max-width: 1200px;}
  .nilloma-secontainer {max-width: 1300px;}
  .nilloma-threecontainer {max-width: 1400px;}

  .nilloma-sec3:before {
    width: 300px;
    height: 500px;
    top: 220px;
  }

  .nilloma-sec3:after {width: 350px;}

  .nilloma-threecontainer ul {
    gap: 0.3em 1em;
    max-width: 100%;
  }

  .video-steps-p {height: 600px;}
  .gallery-side .owl-carousel .owl-item img {height: 605px !important;}
  .gallery-side:last-child {height: 605px;}
  .gallery-side:last-child .gallery-pic {height: 180px;}

  .benefits-container {max-width: 1400px;}
  .client-side img, .client-side video {height: 600px;}

  .nilloma-sec4 .container {padding: 3em 4em;}
  .sec4-side h2 {margin-bottom: 1rem;}

  .details-group {gap: 1em;}
  .details__summary {font-size: 20px;}
  .details__summary span {margin-right: 0.5em;}

  .nilloma-sec5 {
    padding: 5em 5em 2em;
    height: 830px;
  }

  .ti-widget[data-wkey="feed-instagram"][data-style=custom-style][data-widget-type=social] {justify-content: flex-start;}

  .nilloma-sec5:after {
    width: 50vw;
    height: 30vw;
  }

  .feat-pics img {
    width: 270px;
    height: 270px;
  }

  .feat-pics img:nth-child(1) {left: 0;}

  .feat-pics img:nth-child(3) {
    bottom: 60px;
    right: -130px;
  }

  main .store-summary {max-width: 1400px;}
}

@media (max-width: 1440px){
  .benefits-container {padding: 6em 4em 4em;}

  .nilloma-sec4 {
    height: 100%;
    padding-bottom: 0;
    background-position-y: top;
    background-size: 101%;
    background-position-x: 1200%;
  }

  .sec4-side:first-child {width: 45%;}
  .sec4-side:last-child {width: 55%;}

  .details-group {gap: 0em;}  
}

@media (max-width: 1400px){
  .testimonial-pic {
    width: 75%;
    right: -180px;
    margin-top: -8em;
  }

  .testimonial-side p {font-size: 13px;}
  .testimonial {gap: 1em;}

  .testimonial {
    padding: .5em 1em 0.7em 1em;
    width: 365px;
  }

  .testimonial-side img {
    width: 50px;
    height: 50px;
  }

  .testimonial:nth-child(2) {top: -70px;}
  .testimonial:last-child {bottom: 90px;}
}

@media (max-width: 1300px){
  .hero-content .header-description {
    font-size: 35px;
    max-width: 470px;
  }

  .hero-content p {font-size: 15px;}
  .feat-info h2 {letter-spacing: -3px;}
  .resume h3 {font-size: 25px;}
  .resume p {font-size: 16px;}

  .nilloma-sec3:after {
    width: 250px;
    height: 380px;
    top: -140px;
  }

  .nilloma-sec3:before {
    width: 200px;
    height: 380px;
    top: 170px;
  }

  .nilloma-deco1 {width: 600px;}
  .nilloma-deco2 {width: 55%;}

  .nilloma-threecontainer {padding: 4em;}
  .nilloma-threecontainer p {font-size: 25px;}
  .gallery-side:last-child {height: 608px;}
  .clients h2 {font-size: clamp(1.8em, 4.2vw, 3.8em);}
  .client-side img, .client-side video {height: 500px;}
  .client-side p {font-size: 30px;}
  .clients-carousel .owl-prev {left: -3em;}
  .clients-carousel .owl-next {right: -3em;}

  .details-group {gap: 1em;}

  .details__summary {
    padding-left: 20px;
    font-size: 18px;
  }

  .feat-pics img {
    width: 230px;
    height: 230px;
  }

  .feat-pics img:nth-child(1) {left: -150px;}

  .feat-pics img:nth-child(3) {
    bottom: 20px;
    right: -80px;
  }

  .nilloma-sec4 {padding-bottom: 0em;}
  .nilloma-sec5 {height: 650px;}

  .nilloma-sec5:before {
    width: 570px;
    height: 500px;
  }

  .ti-widget[data-wkey="feed-instagram"][data-style=custom-style][data-widget-type=social] {justify-content: center;}

  .sec5-side:last-child {width: 50%;}
  .note {font-size: 18px;}
}

@media (max-width: 1100px){
  .hero-banner {height: 85vh;}
  .hero-content {height: 100%;}

  .hero-content .header-description {max-width: 400px;}
  .hero-content p {max-width: 380px;}

  .hero-content .hero-btn {
    padding: 8px 40px;
    margin: 1.2em 0 2em;
  }

  .nilloma-sec1, .nilloma-sec2 {padding: 3em 4em;}

  .nilloma-threecontainer ul {
    max-width: 100%;
    font-size: 18px;
  }

  .gallery {gap: 1em;}
  .gallery-side .owl-carousel .owl-item img {height: 515px !important;}
  .gallery-pic img, .video-steps-p, .video-steps {border-radius: 20px;}
  .video-steps-p {height: 550px;}
  .gallery-side:last-child .gallery-pic {height: 130px;}
  .gallery-side:last-child {height: 550px;}
  .thumb-carousel {gap: 1em;}

  .beside:first-child {
    width: 21%;
    margin-top: 0;
  }

  .beside:last-child {width: 65%;}
  .beside p {font-size: 18px;}

  .video-steps-p {height: 425px;}
  .gallery-side:last-child {height: 425px;}
  .gallery-side .owl-carousel .owl-item img {height: 425px !important;}

  .testimonial-pic {
    right: -130px;
    margin-top: -5em;
  }

  .testimonial {width: 330px;}
  .testimonial-side p {font-size: 12px;}

  .testimonial:first-child {top: 0;}
  .testimonial:nth-child(2) {top: -70px;}
  .testimonial:last-child {bottom: 80px;}

  .nilloma-sec4 .container {padding: 4em 4em 5em;}
  .sec4-side:first-child {width: 40%;}
  .sec4-side:last-child {width: 60%;}
  .details-group {gap: 1em;}

  .details__summary span {
    max-width: 95%;
    font-size: 17px;
  }

  .nilloma-sec5 {
    padding: 5em 4em;
    max-height: 100%;
    height: 100%;
  }

  .nilloma-sec5 .container {gap: 3em;}

  .feat-pics img {
    width: 160px;
    height: 160px;
  }

  .feat-pics img:nth-child(1) {
    left: 100px;
    right: 0;
  }

  .feat-pics img:nth-child(2) {top: -100px;}

  .feat-pics img:nth-child(3) {
    right: 0;
    bottom: 40px;
  }

  .sec5-side:last-child {width: 50%;}
  .note {font-size: 16px;}
}

@media (max-width: 1024px){

}

@media (max-width: 900px){
  .hero-banner {height: 35em;}
  .hero-content {padding: 3em;}
  .banner-bg {width: 113%;}
}

@media (max-width: 850px){
  .desktop-pic {object-position: 100% 10%;}
  .hero-banner {height: 600px;}
  .hero-content {height: 85%;}
  .hero-content .header-description {font-size: 25px;}
  .hero-banner:before{display: none;}

  .nilloma-sec1, .nilloma-sec2 {padding: 3em;}
  .resume {width: 32%;}
  .resume h3 {font-size: 20px;}
  .nilloma-threecontainer {padding: 4em 3em;}
  .benefits-container {padding: 6em 3em 4em;}

  .client-item {gap: 2em;}
  .client-side:first-child {width: 45%;}
  .client-side img, .client-side video {height: 450px;}
  .client-side p {font-size: 23px;}
  .clients-carousel .owl-theme .owl-nav {margin-top: -40px;}
  .clients-carousel .owl-prev {left: -3em;}
  .clients-carousel .owl-next {right: -3em;}
  
  .nilloma-sec4 {background-image: none !important;}
  .nilloma-sec4 .container {padding: 4em 3em;}
  .sec4-side:first-child {width: 0;}
  .sec4-side:last-child {width: 100%;}

  .nilloma-sec5 {padding: 5em 2em;}
  .sec5-side .followers {font-size: 50px;}

  .feat-pics img {
    width: 170px;
    height: 170px;
  }

  .feat-pics img:nth-child(1) {left: 0;}
  .feat-pics img:nth-child(3) {right: initial;}

  .sec5-side .followers {
    font-size: 50px;
    margin: 1.5rem 0 .5em;
  }

  .note {font-size: 16px;}

  main .store-summary {padding: 4em 3em 0;}
}

@media (max-width: 700px){
  .resume-info,   .resume, .nilloma-threecontainer h2, .nilloma-threecontainer p, .sec4-side h2 {text-align: center;}

  .hero-banner {height: 45em;}

  .hero-content {
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    padding: 11em 4em 4em;
  }

  .hero-content .header-description {
    margin-bottom: 0;
    text-align: center;
  }

  .desktop-pic{display: none;}
  .responsive-pic{display: block;}

  .hero-content h1 {
    max-width: 100%;
    padding-bottom: 13rem;
  }

  .info-2-2 p, .nilloma-sec2 .info-2 p {font-size: 14px;}

  .resume-info {
    gap: 3em;
    flex-direction: column;
  }

  .resume {width: 100%;}
  .resume h3 {font-size: 25px;}

  .nilloma-threecontainer p {font-size: 16px;}

  .nilloma-threecontainer ul {
    font-size: 13px;
    justify-content: center;
  }

  .gallery {
    gap: 1.5em;
    flex-direction: column;
    max-height: 100%;
  }

  .gallery-side:first-child {width: 100%;}

  .video-steps-p, .gallery-side .owl-carousel .owl-item img {
    height: 350px !important;
    width: 100% !important;
  }

  .gallery-side:last-child {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
  }

  .thumb-carousel {
    gap: 1em;
    flex-direction: row;
    overflow-y: hidden;
  }

  .testimonial-pic {display: none;}
  .benefits-container {padding: 2em;}
  .benefits-side {width: 100%;}

  .benefits-side:first-child {
    gap: 1em;
    width: 100%;
    padding-top: 0;
  }

  .beitem {gap: 1em;}

  .beside:first-child {
    width: 20%;
    margin-top: 0;
  }

  .beside:last-child {width: 80%;}
  .no{display: none;}

  .clients {padding: 3em 2em 6em;}
  .clients-carousel {width: 90% !important;}

  .client-side img, .client-side video {height: 400px;}
  .client-side p {font-size: 20px;}

  .nilloma-sec4 {background-image: none !important;}
  .sec4-side:first-child {width: 0;}
  .sec4-side:last-child {width: 100%;}

  .nilloma-sec5 {padding: 3em 2em;}

  .nilloma-sec5 .container {
    flex-direction: column-reverse;
    gap: 1em;
  }

  .nilloma-sec5:before, .nilloma-sec5:after{display: none;}

  .sec5-side {width: 100% !important;}
  .sec5-side:first-child {height: 100%;}

  .feat-pics img {
    width: 140px;
    height: 140px;
  }

  .feat-pics img:nth-child(1) {
    left: 0;
    top: 25px;
    right: auto;
  }

  .feat-pics img:nth-child(2) {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
  }

  .feat-pics img:nth-child(3) {
    right: 0;
    left: initial;
    bottom: auto;
  }

  .sec5-side h2 {text-align: center;}

  .sec5-side .followers {
    font-size: 50px;
    margin: 10px 0;
    text-align: center;
  }

  .sec5-side .global-btn {margin: 0 auto 1em;}

  .note {
    text-align: center;
    font-size: 14px;
  }

  body .store-summary {padding: 3em 0 6em !important;}
  .store-side {padding: 0 2em;}
  .store-side:first-child {padding-top: 3em;}
}

@media (max-width: 600px){
  p{font-size: 14px !important;}
  .hero-banner {height: 39em;}

  .banner-bg {
    width: 105%;
    object-position: 110%;
  }

  .hero-content {padding: 8em 2em 4em;}

  .hero-content h1 {
    text-align: center;
    padding-bottom: 8rem;
  }
  
  .hero-content p{
    text-align: center;
    margin-top: 1em;
    font-size: 13px !important;
  }

  .product .add-cart, button.single_add_to_cart_button.button.alt {margin: 20px 0 5px !important;}
  small {text-align: center;}

  .nilloma-sec1{
    padding: 0 2em 1em;
    background-color: #f86400;
  }

  .nilloma-sec2 {padding: 3em 2em 5em;}
  .resume-info {gap: 2em;}
  .resume p {font-size: 14px;}
  .nilloma-threecontainer {padding: 3em 1.5em;}

  .nilloma-threecontainer ul {
    font-size: 14px;
    width: 80vw;
    margin: 1em auto 3em;
  }
  
  .nilloma-threecontainer ul li:not(:first-child):before {left: -8px;}
  .nilloma-threecontainer p {margin: .7rem 0 .5rem;}
  .nilloma-threecontainer p br {display: none;}
  .feat-info h2 {letter-spacing: -1px;}
  .feat-info p{padding: 0 1.5em;}

  .nilloma-sec3:before {
    width: 100px;
    height: 200px;
    left: -8%;
    top: 0;
    bottom: 0;
    margin: auto 0;
  }

  .nilloma-sec3:after {
    width: 200px;
    height: 340px;
    top: -80px;
  }

  .video-steps-p, .gallery-side .owl-carousel .owl-item img {
    height: 250px !important;
    width: 100% !important;
  }

  .gallery-side:last-child .gallery-pic {height: 100px;}
  .sec-header {margin: 0 auto;}

  .thumb-carousel {
    gap: 0.7em;
    width: 100%;
    overflow-x: scroll;
  }

  .gallery-side .owl-carousel .owl-item img, .gallery-pic img {border-radius: 15px;}

  .benefits-container {padding: 2em 2em;}
  .beside:first-child p {font-size: 50px !important;}
  .beside:first-child {width: 18%;}
  .beitem {gap: 1em;}
  .beside:last-child {width: 85%;}
  .beside p {font-size: 15px !important;}

  .clients {padding: 3em 0 5em;}
  .clients h2 {margin: 0;}
  .clients p {padding: 10px 1.5em 2rem;}
  .clients-carousel {width: 100% !important;}

  .client-item {
    flex-direction: column;
    gap: 1.5em;
  }

  .client-side {
    gap: 8px;
    width: 100% !important;
  }

  .client-side img, .client-side video {border-radius: 20px;}

  .client-side p {
    font-size: 15px;
    text-align: center;
  }

  .client-side p span {margin-top: 15px;}
  .clients-carousel .owl-dots {bottom: -3em !important;}

  .nilloma-sec4 .container {padding: 3em 1.5em 5em;}
  .sec4-side h2 {margin-bottom: 2rem;}
  .details__content {padding-left: 25px;}
  .details__summary {padding: 5px 10px 15px;}

  .details__summary span {
    max-width: 80%;
    font-size: 15px;
  }

  .details__summary:before {right: 10px;}
  .details__summary:after {right: 18px;}

  .feat-pics img:nth-child(3) {top: 0;}
}