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

.hero-banner{
  height: 120vh;
  position: relative;
  background-repeat: no-repeat;
  background-position: 40% 85%;
  background-size: 110%;
}

.banner-responsive{display: none;}

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

.hero-content h1{
  line-height: 0.9;
  margin-bottom: 3.5rem;
  max-width: 50%;
}

.hero-content h2{
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: 2rem;
}

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

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

.hero-content button.single_add_to_cart_button.button{
  border: none !important;
  color: #5f5f5f !important;
  margin: 1.5em 0 2em;
  background-color: #ffc700 !important;
}

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

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

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

.extra-info-banner {
  height: 30%;
  width: 100%;
  padding: 4em;
  margin: 0 auto;
  max-width: 80vw;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.extra-info-banner {text-align: center;}

.extra-info-banner h2, .sec2-side h2 {
  font-size: 70px;
  font-weight: 400;
  margin-bottom: 3rem;
  line-height: 1.1;
}

.extra-info-banner p {
  max-width: 1060px;
  margin: 0 auto;
}

/* Section 2 */
.belepoc-sec2 .container {
  gap: 6em;
  display: flex;
  height: 79em;
  padding-top: 7em;
  flex-direction: row;
  max-width: 2000px;
}

.sec2-side:first-child {width: 50%;}

.side-title{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sec2-side h2 {
  padding: 0 2em;
  margin: 0 auto 3rem;
}

.sec2-side img {
  top: -24em;
  position: relative;
  z-index: -1;
  width: 65vw;
  min-width: 50%;
}

.sec2-side:last-child {
  width: 60%;
  padding: 1em 4em 0 0;
}

.sec2-side h3 {
  font-size: 23px;
  margin-bottom: 1rem;
}

.sec2-side p {margin: 16px 0 40px;}

/* Section 2 Featured */
.feature-section {
  position: relative;
  height: 100%;
}

.mega-title,  .mega-desc{
  z-index: 2;
  position: relative;
  margin: 0 auto;
}

.mega-title {
  font-size: clamp(1.3em, 5vw, 5em);
  text-align: center;
  line-height: 1;
  max-width: 1400px;
}

.mega-desc {
  text-align: center;
  max-width: 1100px;
  padding: 2em 0 0;
}

.mega-desc p{font-size: 21px;}

.feature-img{
  max-width: 100%;
  width: 100%;
  height: 700px;
  display: block;
  z-index: 1;
  position: absolute;
  top: -17em;
  object-fit: fill;
}

/* Section List */
.feature-list {
  display: flex;
  flex-direction: row;
  padding: 0 4em 5em;
  gap: 2em;
  max-width: 80%;
  margin: 5em auto 0;
  z-index: 2;
  position: relative;
}

.fitem{
  width: 33%;
  display: flex;
  flex-direction: row;
  gap: 2em;
  align-items: center;
}

.fside:first-child{width: 18%;}
.fside:first-child p{font-size: 80px;}
.fside:last-child {width: 82%;}
.fside p{line-height: 1.1;}
/* End */

/* Section 4 */
.belepoc-sec3{
  height: 100%;
  padding-bottom: 5em;
  background-size: 70%;
  background-repeat: no-repeat;
  background-position-x: 0%;
  background-position-y: 80%;
}

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

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

.sec3-side h2 {
  font-size: 60px;
  margin-bottom: 3rem;
  /* color: #EC6365; */
}

.details-group {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.details {
  width: 100%;
  overflow: hidden;
  transition: height 300ms ease-in-out;
}

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

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

.details__summary span{margin-right: 0;}
[open] > .details__summary {color: #EC6365;}
.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;
}

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

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

.details__content {
  padding-top: 0;
  padding-left: 48px;
}

.details__content p, .details__content ul{font-size: clamp(.9em, 1vw, 1.3em);}
.details__content p{max-width: 615px;}
/* End */

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

.clients h2{
  font-size: 60px;
  line-height: 1.1;
  text-align: center;
  margin-bottom: 4rem;
}

.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;
  background-color: black;
}

.client-side img {object-fit: cover !important;}

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

/* .client-item p, .client-item a{color: #ec6365;} */
.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 #ec6365;
}

.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 5 */
.belepoc-sec4{
  background-color: #EFF0F3;
  padding: 5em 5em;
  max-height: 100%;
  height: 790px;
}

.belepoc-sec4 .container{
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  align-items: center;
  gap: 1em;
  height: 100%;
}

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

.sec4-side:first-child{width: 30%;}

.feat-pics {
  gap: 1em;
  display: flex;
  flex-direction: column;
}

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

.sec4-side:first-child .feat-pics img:nth-child(1) {
  top: 0;
  right: 0;
}

.sec4-side:first-child .feat-pics img:nth-child(2) {
  right: 6em;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.sec4-side:nth-child(2){
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sec4-side h2, .sec4-side p {color: #EC6365;}

.sec4-side h2 {
  font-size: 70px;
  font-weight: 400;
  text-align: center;
  max-width: 700px;
  line-height: 1.1;
}

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

.sec4-side:last-child .feat-pics img:nth-child(1) {
  top: 0;
  right: 8em;
  z-index: 2;
}

.sec4-side:last-child .feat-pics img:nth-child(2) {
  bottom: 0;
  left: 0;
}

.sec4-side:nth-child(2) p {
  margin: 2.5rem auto;
  font-size: 20px;
  max-width: 600px;
  text-align: center;
}

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

/* Tienda */
main .store-summary {padding: 6em 4em 5em;}
.store-summary h2, .store-summary p, .store-summary h4 {color: black;}

/* Responsive Mode */
@media (max-width: 1920px) {
  .extra-info-banner h2, .sec2-side h2 {font-size: clamp(1.8em, 4.2vw, 4.2em);}

  .hero-banner {
    background-size: cover;
    background-position: 100% 125%;
  }

  .hero-content {max-width: 1790px;}
  .hero-content h2 {font-size: clamp(2em, 3.2vw, 2.9em);}

  .feature-list {
    gap: 3em;
    margin: 0 auto;
    max-width: 1760px;
    padding: 0 4em;
  }

  .belepoc-sec2 {padding: 0 0 3em;}

  .belepoc-sec2 .container {
    gap: 2em;
    height: 67em;
    padding-top: 2em;
  }

  .sec2-side img {top: -20em;}
  .sec2-side:last-child {width: 48%;}
  .mega-desc {padding: 2em 2em 3em;}

  .belepoc-sec3 {
    background-position-y: top;
    background-size: 100%;
    background-position-x: -340px;
  }

  .sec3-side h2 {font-size: clamp(2em, 4.2vw, 3.8em);}

  .details__summary {padding-left: 28px;}
  [open] > .details__summary {color: #ffc700;}

  .clients h2 {font-size: clamp(2em, 4.2vw, 3.8em);}

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

  .sec4-side:first-child .feat-pics img:nth-child(1) {
    top: 2em;
    right: 0;
  }

  .sec4-side:first-child .feat-pics img:nth-child(2) {
    right: auto;
    left: 0;
    bottom: 2em;
  }
  
  .feature-img {
    top: -19em;
    height: 500px;
  }

  .sec4-side h2 {font-size: clamp(1.5em, 4.3vw, 5em);}

  .sec4-side:last-child .feat-pics img:nth-child(1) {
    top: 2em;
    right: 2em;
  }
  
  .sec4-side:last-child .feat-pics img:nth-child(2) {bottom: 3em;}
}

@media (max-width: 1600px){
  .hero-content {max-width: 1400px;}
  .hero-content p {font-size: 16px;}
  .sec2-side:first-child {width: 50%;}
  .sec2-side h2 {max-width: 100%;}

  .belepoc-sec2 .container {height: 100%;}
  /* .mega-title {margin-top: -3em;} */

  .feature-img {
    top: -13em;
    height: 400px;
  }

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

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

  .details-group {gap: 1em;}
  
  .details__summary {
    font-size: 20px;
    padding-left: 18px;
  }

  .details__summary span {margin-right: 0.1em;}

  .client-side img, .client-side video {height: 600px;}

  .belepoc-sec4 {
    padding: 3em 5em;
    height: 600px;
  }

  .sec4-side:first-child .feat-pics img:nth-child(2) {
    right: auto;
    left: 0;
  }

  .sec4-side:last-child .feat-pics img:nth-child(1) {right: 0;}
}

@media (max-width: 1440px){
  .mega-title {
    margin-top: 3em;
    padding: 0 2em;
  }

  .feature-img {top: -15em;}
  .fside p {font-size: 15px;}
  .feature-list {gap: 1.5em;}
  .clients {padding: 0em 4em 8em;}

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

@media (max-width: 1300px){
  .extra-info-banner {height: 40%;}

  /* .belepoc-sec2 .container {height: 70em;} */

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

  .sec2-side img {
    top: -9em;
    width: 90vw;
  }

  .sec2-side:last-child {width: 60%;}

  .feature-img {
    top: -14em;
    height: 400px;
  }

  .feature-list {
    gap: 1em 2em;
    flex-wrap: wrap;
    padding: 0em 4em 2em;
    justify-content: center;
  }

  .fitem {
    gap: 1em;
    width: 48%;
  }

  .fitem:last-child {width: 100%;}
  .fitem:last-child .fside:first-child {width: auto;}

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

  .clients h2 {font-size: clamp(1.5em, 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;}

  .belepoc-sec3 .container {padding: 4em;}
  .sec3-side h2 {margin-bottom: 2rem;}

  .belepoc-sec4 {height: 500px;}

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

  .sec4-side:first-child .feat-pics img:nth-child(2) {bottom: 0;}
  .sec4-side:last-child .feat-pics img:nth-child(2) {bottom: 1em;}
}

@media (max-width: 1100px){
  .hero-banner {
    background-size: 110%;
    background-position: -50% 
  }

  .hero-content h2 {margin-bottom: 1rem;}
  .hero-content p {font-size: 15px;}

  .hero-content .hero-btn {
    font-size: 16px;
    padding: 7px 40px;
    margin: 1.2em 0 3em;
  }

  .extra-info-banner {max-width: 100%;}
  .extra-info-banner h2, .sec2-side h2 {margin-bottom: 2rem;}

  .extra-info-banner p {
    max-width: 900px;
    font-size: 16px;
  }

  .sec2-side p{font-size: 16px;}

  .belepoc-sec2 .container {
    height: auto;
    padding-top: 4em;
  }

  .feature-img {
    top: -13em;
    height: 350px;
  }

  .feature-list {
    gap: 2em;
    padding: 3em 2em;
  }

  .fitem {gap: 1em;}
  .fside:first-child p {font-size: 60px;}
  .fside p {font-size: 16px;}
  .details-group {gap: 1em;}
  .belepoc-sec3 {padding-bottom: 1em;}
  .belepoc-sec3 {background-position-x: -260px;}

  .belepoc-sec4 {
    padding: 3em 5em;
    height: 440px;
  }

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

  .sec4-side:first-child .feat-pics img:nth-child(1) {top: 0;}
  .sec4-side:first-child .feat-pics img:nth-child(2) {bottom: 0;}
  .sec4-side:last-child .feat-pics img:nth-child(1) {top: 0;}
  .sec4-side:last-child .feat-pics img:nth-child(2) {bottom: 0em;}

  .sec4-side:nth-child(2) p {
    margin: 1.5rem auto;
    font-size: 16px;
  }
}

@media (max-width: 1024px){
  .extra-info-banner {height: 31%;}

  .belepoc-sec2 .container {
    height: 100%;
    padding-bottom: 2em;
  }

  .feature-img {height: 300px;}

  .feature-list {
    padding: 2em 2em;
    margin: 2em auto 0;
  }

  .belepoc-sec4 {
    padding: 3em 4em;
    height: 440px;
  }
}

@media (max-width: 950px){
  .hero-banner {
    height: 50em;
    background-size: 110%;
    background-position: -70% 0%;
  }

  .extra-info-banner {
    height: auto;
    padding: 2em 4em;
  }

  .belepoc-sec2 .container {
    gap: 1em;
    height: 100%;
    flex-direction: column;
    padding-top: 0;
  }

  .sec2-side:first-child {width: 100%;}
  .sec2-side h2 {margin-bottom: 0;}
  .sec2-side h2 br {display: none;}
  .sec2-side img {display: none;}

  .sec2-side:last-child {
    width: 100%;
    padding: 1em 3em 0;
    text-align: center;
  }

  .mega-title {
    display: block;
    margin-bottom: 2rem;
  }

  .mega-desc {padding: 2em 2em 0em;}

  .feature-img {
    top: -4em;
    height: 190px;
    object-fit: contain;  
  }

  .feature-list {
    padding: 2em;
    flex-direction: column;
    margin: 0 auto;
    max-width: 80%;
  }

  .fitem {
    gap: 2em;
    width: 100%;
  }

  .fside:first-child {width: 70px;}

  .fside:first-child p {
    font-size: 50px;
    text-align: right;
  }

  .fside:first-child, .fitem:last-child .fside:first-child {width: 70px;}
  .fside:last-child {width: 100%;}

  .belepoc-sec3 {background-image: none !important;}
  .belepoc-sec3 .container {padding: 0em 4em 4em;}
  .sec3-side:first-child {width: 0;}
  .sec3-side:last-child {width: 100%;}

  .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;}

  .belepoc-sec4 {
    padding: 3em 4em;
    height: 100%;
  }

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

  .sec4-side:nth-child(2) p {margin: 1rem auto;}

  .note {font-size: 16px;}

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

@media (max-width: 700px){
  .hero-banner {
    background-position: 55% -457%;
    height: 100%;
    background-size: 130% 90vh;
  }

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

  .hero-content {
    height: 70%;
    padding: 8em 1.5em 1em;
    align-items: center;
    justify-content: flex-start;
  }

  .hero-content h2 {
    /* font-size: 31px !important; */
    text-align: center;
  }

  .hero-content h1 {
    margin: 0;
    max-width: 100%;
    text-align: center;
    padding-bottom: 22rem;
  }

  .hero-content p {
    font-size: 14px;
    max-width: 100%;
    text-align: center;
  }

  .hero-content p br {display: none;}
  .hero-content .hero-btn {margin: 1.2em 0 2em;}

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

  small{text-align: center;}
  .extra-info-banner {padding: 2em 1.5em;}
  .sec2-side:last-child {padding: 1em 1.5em 0;}
  .mega-desc p {font-size: 16px;}
  .feature-list {padding: 2em 0;}

  .belepoc-sec3 .container {padding: 0em 1.5em 4em;}
  .belepoc-sec4 {padding: 3em 2em;}
  .sec4-side:first-child {width: 25%;}
  .sec4-side:nth-child(2) p {font-size: 13px;}
  .sec4-side:last-child {width: 25%;}

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

@media (max-width: 600px){
  .hero-banner {
    background-position: 53% -27%;
    height: 100%;
    background-size: 600px 70%;
  }

  .hero-content h1 {padding-bottom: 19rem;}
  .hero-content h2 br {display: none;}

  .extra-info-banner {
    height: 31%;
    padding: 2em 1.5em;
  }

  .extra-info-banner p {font-size: 14px;}
  .belepoc-sec2 .container {padding-top: 1em;}
  .sec2-side:last-child {padding: 1em 1.5em 0;}
  .sec2-side h2 {padding: 0 1.5em;}
  .sec2-side h3 {font-size: 21px;}
  .sec2-side p {font-size: 14px;}

  .mega-title {padding: 0 1.5rem;}
  .mega-desc p {font-size: 14px;}

  .feature-img {top: -6em;}

  .feature-list {
    gap: 1.5em;
    padding: 2em 1.5em;
    max-width: 100%;
  }

  .fitem {gap: 1em;}
  .fside:first-child p {font-size: 50px;}
  .fside p {font-size: 14px;}

  .belepoc-sec3 .container {padding: 0 1.5em;}
  .sec3-side h2 {text-align: center;}
  .details-group {gap: 0;}
  .details__content {padding-left: 25px;}

  .details__summary {
    font-size: 14px;
    padding-left: 10px;
  }
  
  .details__summary:before {right: 10px;}
  .details__summary:after {right: 18px;}
  .clients {padding: 3em 0 6em;}

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

  .clients h2 {margin-bottom: 2rem;}

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

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

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

  .client-side p span {margin-top: 15px;}
  .belepoc-sec4 {padding: 3em 1.5em;}

  .belepoc-sec4 .container {
    gap: 6em;
    flex-direction: column;
  }

  .sec4-side:first-child, .sec4-side:nth-child(2) {width: 100%;}

  .feat-pics {
    flex-direction: row;
    width: 100%;
  }

  .feat-pics img {
    width: 210px;
    height: 175px;
    position: relative;
  }

  .sec4-side:first-child .feat-pics img:nth-child(1) {top: 0;}

  .sec4-side:first-child .feat-pics img:nth-child(2) {
    bottom: auto;
    top: 4em;
    left: -3em;
  }

  .sec4-side:last-child {
    width: 0;
    display: none;
  }
}