/* General */
@font-face { font-family: 'svenson'; src: url( '../fonts/svenson/svenson.eot?57585949' ); src: url( '../fonts/svenson/svenson.eot?57585949#iefix' ) format( 'embedded-opentype' ), url( '../fonts/svenson/svenson.woff2?57585949' ) format( 'woff2' ), url( '../fonts/svenson/svenson.woff?57585949' ) format( 'woff' ), url( '../fonts/svenson/svenson.ttf?57585949' ) format( 'truetype' ), url( '../fonts/svenson/svenson.svg?57585949#svenson' ) format( 'svg' ); }
[class^="i-"]:before, [class*=" i-"]:before { font: 20pt 'svenson'; display: inline-block; text-decoration: inherit; text-align: center; color: #fff; }
[class^="i-"]:hover:before, [class*=" i-"]:hover:before { color: #fff; }
#page .container { width: 1200px; max-width: 95%; box-sizing: border-box; }
#page h2 { font-weight: 700; font-size: clamp( 18pt, 4.5vw, 33pt ); text-transform: none; color: #00aca7; background: linear-gradient( to right, #29a9a2, #47c5bf ); background-clip: text; -webkit-background-clip: text; }
#page button:hover { background: #ffa407; }

/* Banner */
#page picture { display: block; width: 100%; cursor: pointer; }
#page picture img { width: 100%; }

/* Consultation */
#consultation { padding: 85px 0 185px; }
#consultation section { background: url( '../images/bg/consultation.webp' ) no-repeat left center/cover; border-radius: 51px; padding: 47px; display: flex; height: 731px; box-sizing: border-box; box-shadow: 0 0 60px #75d8d366; }
#consultation section:after { content: ' '; display: block; clear: both; }
#consultation section div:last-of-type { width: 456px; height: max-content; max-width: 95%; box-sizing: border-box; margin: 165px 0 20px auto; background: #fff; border-radius: 51px; padding: 56px 40px; box-shadow: 0 0 60px #75d8d366; }
#consultation h2 { font-weight: 700; color: #fff; font-size: clamp( 20pt, 3vw, 31pt ); margin: 0 0 20px; text-transform: uppercase; }
#consultation em { display: block; font-weight: 500; font-style: italic; font-size: clamp( 15pt, 2vw, 24pt ); color: #fff; margin: 0 0 15px; }
#consultation section div:first-of-type p { position: relative; font-style: italic; font-weight: 500; font-size: clamp( 13pt, 2vw, 23pt ); text-shadow: -3px 4px 2px #776a6c; }
#consultation section div:first-of-type p b { font-style: normal; font-size: clamp( 20pt, 5vw, 51pt ); vertical-align: top; line-height: .8; }
#consultation section div:first-of-type p:before { content: ' '; display: inline-block; width: 47px; height: 2px; background: #fff; vertical-align: super; margin: 0 9px 0 0; }
#consultation section div:last-of-type span { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 12px; font-size: clamp( 14pt, 1.6vw, 18pt ); color: #2f8b85; border: 2px solid #1b9d95; border-radius: 29px; width: 497px; max-width: 100%; margin: auto; padding: 0 0 0 30px; box-sizing: border-box; }
#consultation span em { display: inline-block; border-radius: 25px; padding: 15px 35px; color: #fff; background: #1b9d95; font-style: normal; font-weight: 700; text-transform: uppercase; margin: 0 0 0 auto; }
#consultation form { display: flex; flex-direction: column; align-items: center; width: 400px; max-width: 100%; margin: auto; box-sizing: border-box; }
#consultation label { font-weight: 500; font-size: clamp( 12pt, 1vw, 15pt ); text-transform: none; color: #4e4a4b; margin: 0 0 10px; width: 100%; }
#consultation input, #consultation select { font-size: 12pt; background: 0; color: #4e4a4b; border: 1px solid #4e4a4b; border-radius: 25px; height: 50px; margin: 0 0 12px; width: 100%; padding: 3px 16px; box-sizing: border-box; }
#consultation button { display: block; width: 100%; margin: 33px 0 0; background: #00aca7; height: 50px; border-radius: 25px; font-size: 15pt; font-weight: 700; text-transform: none; }
#consultation h3 { text-transform: none; color: #fff; font-weight: 700; font-size: clamp( 18pt, 2.5vw, 33pt ); line-height: 1.2; margin: 0 0 10px; }
#consultation p { color: #fff; font-size: clamp( 13pt, 1.5vw, 17pt ); line-height: 1.2; }
#consultation > div { width: clamp( 300px, 35vw, 470px ); max-width: 100%; margin: 27px 0 0; }
#consultation > div p { font-weight: 700; font-size: clamp( 13pt, 2.5vw, 19pt ); color: #817f84; margin: 0 0 16px; }
#consultation blockquote { border-left: 5px solid #817f84; padding: 0 0 0 25px; font-size: clamp( 13pt, 2vw, 22pt ); line-height: 1.2; color: #817f84; }
#consultation blockquote small { display: block; font-size: clamp( 12pt, 1.5vw, 16pt ); font-weight: 700; font-style: italic; color: inherit; }

/* Steps */
#steps { padding: 0 0 122px; }
#steps section > div:first-of-type { display: flex; flex-wrap: nowrap; gap: 37px; margin: 0 0 40px; }
#steps section > div:first-of-type p { color: #817f84; line-height: 1.3; font-size: clamp( 12pt, 2vw, 18pt ); }
#steps h3 { flex: none; font-size: clamp( 14pt, 2.5vw, 24pt ); line-height: 1.3; font-weight: 700; text-transform: none; color: #817f84; width: 363px; max-width: 100%; margin: 0; }
#steps h3 i { font-weight: 300; }
#steps h2 { text-align: center; font-style: italic; }
#steps > hr { margin: 27px auto 65px; width: 94px; height: 3px; background: #1eb4ad; }
#steps-slider { display: flex; flex-wrap: nowrap; gap: 20px; }
#steps-slider > div:first-of-type { position: relative; background: linear-gradient( 42deg, #1b9d95, #4ed0c8 ); border-radius: 21px; width: calc( 100% - 476px ); }
#steps-slider > div:last-of-type { flex: none; border-radius: 21px; width: 456px; max-width: 100%; }
#steps-slider > div:first-of-type li div { padding: 24px 35px; }
#steps-slider img { border-radius: 21px; }
#steps-slider span { display: block; text-align: center; font-weight: 500; font-size: clamp( 13pt, 2.5vw, 19pt ); text-transform: uppercase; border: 1px solid #fff; border-radius: 16px; padding: 7px; width: 129px; max-width: 100%; color: #fff; box-sizing: border-box; margin: 0 0 80px; }
#steps-slider h4 { color: #fff; font-size: clamp( 15pt, 2.5vw, 24pt ); margin: 0; }
#steps-slider hr { position: relative; display: block; background: #81ccc4; height: 2px; width: 100%; margin: 8px 0 12px -35px; overflow: visible; }
#steps-slider hr:after { content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY( -50% ); width: 8px; aspect-ratio: 1; background: #fff; border-radius: 50%; }
#steps-slider p { color: #fff; text-align: justify; line-height: 1.1; }
#steps-controls { position: absolute; bottom: 13px; right: 21px; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 12px; }
#steps-controls div { cursor: pointer; background: #fff url( '../images/icons/angle.webp' ) no-repeat center; border-radius: 50%; width: 50px; height: 50px; color: #11ada7; }
#steps-controls .next { transform: rotate( 180deg ); }
#steps-controls div:hover { background-color: #c3c3c3; }

/* Why */
#why { padding: 0 0 217px; }
#why h2 { text-align: center; margin: 0 0 54px; }
#why section { display: flex; }
#why section figure { flex: none; }
#why ul {  display: flex; flex-wrap: wrap; gap: 60px 26px; max-height: 453px; }
#why li { width: calc( ( 100% - 26px ) / 2 ); box-sizing: border-box; }
#why li:not( :first-of-type ) { background: #fff; box-shadow: 0 0 60px #75d8d366; display: flex; gap: 11px; align-items: center; padding: 14px; border-radius: 48px; max-height: 110px; }
#why li img { flex: none; }
#why p { display: block; }
#why p b { display: block; color: #26b1a9; margin: 0 0 5px; font-size: clamp( 13pt, 2.5vw, 16pt ); line-height: 1.2; }
#why li:first-of-type p { font-size: clamp( 12pt, 2.5vw, 28pt ); color: #817f84; }
#why li:first-of-type p span { display: block; font-size: clamp( 13pt, 2.5vw, 33pt ); font-weight: 700; font-style: italic; }

/* Recommended */
#recommended { position: relative; display: flex ; flex-wrap: nowrap; align-items: flex-start; justify-content: center; padding: 0 0 331px; }
#recommended > div { position: absolute; left: -66px; top: 10px; width: clamp( 400px, 50vw, 659px ); max-width: 100%; }
#recommended section { display: flex; justify-content: center; background: url( '../images/bg/recommended.webp' ) no-repeat bottom right/cover; border-radius: 49px; width: clamp( 650px, 62vw, 806px ); max-width: 100%; margin: 0 0 0 auto; padding: 160px 0 68px; box-shadow: 0 0 60px #75d8d366; }
#recommended section div { width: 412px; max-width: 100%; }
#recommended h2 { color: #fff; text-transform: uppercase; margin: 0 0 25px; }
#recommended p { position: relative; color: #ffffffb3; display: flex; flex-wrap: nowrap; gap: 9px; }
#recommended p:before { content: ' '; flex: none; display: block; width: 34px; height: 1px; background: #ffffffb3; margin: 9px 0 0; }
#recommended li:not( :last-of-type ) { margin: 0 0 20px; }
#recommended li.active p { color: #fff; font-size: 15pt; font-weight: 700; }
#recommended li.active p:before { height: 2px; width: 52px; background: #fff; }

/* Results */
#results { padding: 0 0 187px; }
#results section { display: flex; justify-content: center; gap: 20px 87px; }
#results section > div:last-of-type { font-size: 0; }
#results h2 { margin: 0 0 73px; text-align: center; }
#results span { display: block; background: #00aca7; color: #fff; font-weight: 700; font-size: clamp( 13pt, 2.5vw, 17pt ); border-top-left-radius: 25px; border-bottom-left-radius: 25px; margin: 0 0 10px auto; padding: 7px; text-align: center; width: 180px; max-width: 100%; box-sizing: border-box; }
#results p { font-size: clamp( 13pt, 2.5vw, 15pt ); color: #817f84; text-align: right; margin: 0 38px 0 0; }
#results li { position: relative; padding: 0 57px 57px 0; }
#results li:last-of-type { padding-bottom: 0; }
#results li:not( :last-of-type ):before { content: ''; display: block; position: absolute; right: 9px; top: 12px; width: 3px; height: 100%; background: #817f84; }
#results li:after { content: ' '; display: block; position: absolute; top: 6px; right: 0; background: url( '../images/icons/dot.webp' ) no-repeat center/contain; width: 22px; aspect-ratio: 1; }
#results img { width: 100%; max-width: max-content; }
#before-after-slider { width: max-content; max-width: 100%; position: relative; overflow: hidden; border-radius: 47px; border: 1px solid #00aca7; }
#after-image { display: block }
#before-image { position: absolute; height: 100%; width: 50%; top: 0; left: 0; overflow: hidden; z-index: 2; }
#resizer { position: absolute; display: flex; align-items: center; z-index: 5; top: 0; left: 50%; height: 100%; width: 4px; background: #00aca7; -ms-touch-action: pan-y; touch-action: pan-y; }
#resizer:after { background: #ffffffb3 url( '../images/icons/left-right.webp' ) no-repeat center; content: ' '; display: flex; justify-content: center; align-items: center; color: #00aca7; position: absolute; margin:  0 0 0 -20px; width: 42px; height: 42px; border: 1px solid #00aca7; border-radius: 50%; }

/* Promotion */
#promotion h4 { text-align: center; font-weight: 700; font-size: clamp( 18pt, 4.5vw, 33pt ); text-transform: none; color: #00aca7; margin: 0 0 60px; }
#promotion h2 { text-align: center; font-size: clamp( 30pt, 6vw, 87pt ); line-height: .9; letter-spacing: -1px; background: linear-gradient( to top, #71d5d1 0%, #00aca7 0% ); -webkit-background-clip: text; margin: 0 0 6px; }
#promotion h2 span { display: block; font: clamp( 20pt, 3vw, 40pt )/.9 'Bebas Neue', sans-serif; background: linear-gradient( to top, #add3ee 0%, #537c8e 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; }
#promotion h2 sup { vertical-align: top; }
#promotion small { display: block; color: #a6a6a6; font-style: italic; text-align: center; font-size: 9pt; line-height: 1.4; margin: 0 0 33px; }
#promotion section { position: relative; background: #1eb4ad url( '../images/bg/promotion.webp' ) no-repeat bottom right/cover; padding: 30px 35px; border-radius: 20px; border: 1.87px solid #00aca7; height: 290px; box-sizing: border-box; }
#promotion h3 { color: #fff; margin: 0 0 12px; font-weight: 700; font-size: clamp( 18pt, 3vw, 34pt ); line-height: 1; text-transform: none; }
#promotion p { color: #fff; margin: 0 0 30px; font-weight: 500; font-size: clamp( 13pt, 2.5vw, 25pt ); line-height: 1.2; }
#promotion em { display: block; color: #fff; font-style: normal; font-weight: 300; font-size: clamp( 15pt, 2.5vw, 28pt ); }
#promotion button { position: absolute; right: 90px; bottom: 50px; color: #1eb4ad; font-weight: 700; font-size: clamp( 13pt, 2.5vw, 15pt ); background: #fff; border: 0; border-radius: 28px; height: 56px; width: clamp( 240px, 17vw, 294px ); max-width: 100%; }
#promotion button:hover { color: #fff; }

/* Trichologists */
#trichologist { position: relative; background: #fff; z-index: 0; margin: 180px 0 0; }
#trichologist:before { content: ' '; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: url( '../images/bg/trichologist-bg.webp' ) no-repeat bottom center/contain; z-index: -1; }
#trichologist section { padding: 5vw 0 3vw; }
#trichologist div { width: 37vw; max-width: 478px; margin: 0 0 0 auto; box-sizing: border-box; }
#trichologist h2 { font-size: clamp( 18pt, 2.5vw, 32pt ); margin: 0 0 26px; }
#trichologist p { font-size: clamp( 13pt, 2.5vw, 16pt ); line-height: 1.3; width: 440px; max-width: 100%; }
#trichologist p span { font: inherit; color: #1b9d95; font-weight: 500; }

/* Certificate */
#certificate { background: #efeffa; overflow: hidden; }
#certificate section { display: flex; align-items: center; gap: 30px 70px; }
#certificate section > div:first-of-type { position: relative; background: url( '../images/bg/cert-bg.webp' ) no-repeat center/cover; padding: 80px 4vw 100px; flex: none; width: 620px; box-sizing: border-box; }
#certificate section > div:last-of-type { overflow: hidden; padding: 0 0 30px; }
#certificate h2 { color: #fff; margin: 0 0 20px; font-size: clamp( 20pt, 4.5vw, 32pt ); }
#certificate h3 { text-transform: none; font-size: clamp( 12pt, 2.5vw, 16pt ); text-align: center; margin: 15px 0 0; }
#certificate p { color: #fff; font-size: clamp( 13pt, 2.5vw, 16pt ); line-height: 1.4; font-weight: 100; }
#certificate .slick-slide { margin: 0 25px; width: 255px; }
#certificate .slick-slide img { width: 240px; margin: auto; }
#certificate .slick-dots { bottom: -65px; width: 150px; left: 40%; }
#certificate .slick-dots li button:before { background: #f9fafc; border-radius: 50%; width: 13px; height: 13px; color: transparent; opacity: 1; }
#certificate .slick-dots li button:before:hover { background: #c3c0c4; }
#certificate .slick-dots li.slick-active button:before { color: transparent; background: #c3c0c4; }
#certificate .slick-dots li button:hover { background: 0; }
#certificate .slick-arrow { display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; width: 65px; height: 65px; background: 0; }
#certificate .slick-arrow:before { content: '\276C'; display: block; font-size: 26pt; line-height: 1; color: #fff; }
#certificate .next-arrow:before { content: '\276D'; }
#certificate section > div:first-of-type div { display: flex; align-items: center; gap: 20px; flex-wrap: nowrap; margin: 35px 0 0; }

/* Footer */
#footer { background-color: #00b2a9; color: #fff; padding: 90px 0; }
#footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; }
#footer svg { margin: 0 0 26px; }
#footer p { font-size: clamp( 13pt, 2.5vw, 14pt ); line-height: 1.3; }
#footer .container div { flex: 1 155px; }
#footer .container div:first-of-type { flex: 0 450px; }
#footer .container div:last-of-type { flex: 1 30%; }
#footer .container div p { margin: 0 0 20px; }
#footer .container div:last-of-type ul li { margin: 0 0 22px; }
#footer a { color: inherit; font: inherit; }
#footer a:hover { color: #c6c6c6; }
#footer p a { border-bottom: 1px solid #fff; }
#footer h3 { text-transform: none; font-weight: 700; font-size: clamp( 14pt, 3.5vw, 17pt ); margin: 0 0 25px; }
#footer ul { list-style: none; margin-top: 1rem; }
#footer ul li { font-size: clamp( 13pt, 2.5vw, 14pt ); margin: 0 0 20px; }
#footer ul li a, #footer .whatsapp { display: inline-block; padding: 0 0 0 41px; position: relative; top: 0; left: 0; background: 0; width: auto; text-transform: none; font: inherit; }
#footer ul li a:before { position: absolute; left: 0; top: 50%; transform: translateY( -50% ); }
.i-phone:before { content: '\e800'; }
.i-mail-alt:before { content: '\f0e0'; }
.i-whatsapp:before { content: '\f232'; }

@media (max-width: 1300px) {
    #recommended { padding: 0 0 200px; }

    #certificate section > div:first-of-type { width: 500px; }
}

@media (max-width: 1200px) {
    #consultation label, #consultation input, #consultation select, #consultation button { font-size: 12pt; }
}

@media (max-width: 1110px) {
    #steps-controls { position: static; justify-content: flex-start; margin: 0 0 30px 30px; }

    #trichologist br { display: none; }
}

@media (max-width: 990px) {
    #why { padding: 0 0 100px; }
    #why ul { max-height: 100%; gap: 30px; }
    #why li { width: 100%; }

    #recommended { flex-direction: column; padding: 0 0 100px; }
    #recommended > div { position: static; margin: auto; }
    #recommended section { width: 450px; max-width: 100%; margin: auto; padding: 50px 15px; box-sizing: border-box; }
}

@media (max-width: 980px) {
    #consultation { padding: 50px 0; }
    #consultation section { background-position: center; background-size: cover; border-radius: 50px; }
}

@media (max-width: 940px) {
    #consultation section { padding: 30px; }

    #results { padding: 0 0 100px; }
    #results section { gap: 20px 40px; }
    #results li { padding: 0 30px 40px 0; }

    #certificate section { gap: 30px 25px; }
    #certificate section > div:first-of-type { width: 450px; padding: 75px 4vw; }
}

@media (max-width: 920px) {
    #steps section > div:first-of-type { gap: 20px; }

    #certificate section > div:last-of-type { max-width: 100%; }
}

@media (max-width: 880px) {
    #consultation section { flex-direction: column; gap: 20px; }
    #consultation section div:last-of-type { margin: 0 0 0 auto; }
}

@media (max-width: 850px) {
    #steps-slider { flex-direction: column; width: 400px; max-width: 100%; margin: auto; }
    #steps-slider > div:first-of-type { width: 100%; }
}

@media (max-width: 800px) {
    #consultation section { height: auto; }
    #consultation section div:first-of-type { text-align: center; }
    #consultation section div:last-of-type { margin: auto; }
    #consultation label, #consultation input, #consultation select, #consultation button { font-size: 11pt; }
    #consultation input, #consultation select, #consultation button { height: 40px; }
    #consultation > div { width: max-content; margin: 20px auto 0; }

    #recommended { padding: 0 0 50px; }
    #recommended p { line-height: 1.1; }

    #results section { flex-direction: column; width: 450px; max-width: 100%; margin: auto; }
    #results span { border-radius: 0; border-top-right-radius: 25px; border-bottom-right-radius: 25px; margin: 0 0 10px; }
    #results p { text-align: left; }
    #results p br { display: none; }
    #results li:after { left: 0; right: auto; }
    #results li:not( :last-of-type ):before { left: 9px; right: auto; }
    #results li { padding: 0 0 40px 30px; }

    #certificate section > div:first-of-type { width: 400px; }
    #certificate .slick-dots { left: 33%; }

    #trichologist { margin: 50px 0 0; }
    #trichologist section { padding: 3vw 0; }
}

@media (max-width: 767px) {
    #trichologist { margin: 40px 0 0; }
    #trichologist h2 { margin: 0 0 25px; }
    #trichologist div { margin: auto; padding: 0 20px 62vw; width: 100%; max-width: 100%; }
    #trichologist:before { background-image: url( '../images/icons/trichologist.webp' ); background-position: center bottom; }
    #trichologist section { padding: 0; }
    #trichologist p { width: 100%; }

    #certificate section > div:first-of-type { padding: 70px 15vw; }
    #certificate section { flex-direction: column; }
    #certificate section > div:first-of-type { width: auto; max-width: 100%; min-width: auto; }
    #certificate section > div:last-of-type { padding: 0 0 40px; }

    #footer { padding: 40px 0; }
    #footer h3 { margin: 0 0 20px; }
    #footer ul li { margin: 0 0 15px; }
}

@media (max-width: 700px) {
    #steps { padding: 0 0 80px; }
    #steps > hr { margin: 20px auto 30px; }
    #steps section > div:first-of-type { flex-direction: column; width: 400px; max-width: 100%; gap: 15px; margin: 0 auto 20px; }
    #steps-slider span { margin: 0 0 40px; }
    
    #why { padding: 0 0 50px; }
    #why section { flex-direction: column; gap: 30px; width: 400px; max-width: 100%; margin: auto; }
    #why li:first-of-type p { text-align: center; }
}

@media (max-width: 640px) {
    #consultation { padding: 50px 0; }
    #consultation section div:last-of-type { padding: 30px 15px; }
    #consultation section { padding: 40px 0; }
    #consultation label { margin: 0 0 5px; }
    #consultation input, #consultation select { height: 35px; margin: 0 0 10px; }
    #consultation button { margin: 20px 0 0; }
    #consultation em { margin: 0 0 5px; }
}

@media (max-width: 550px) {
    #steps { padding: 0 0 50px; }

    #why h2 { margin: 0 0 30px; }

    #results { padding: 0 0 50px; }
    #results h2 { margin: 0 0 30px; }

    #promotion h4 { margin: 0 0 30px; }
    #promotion section { padding: 30px 25px; height: auto; }
    #promotion button { position: static; margin: 30px 0 0; }
    #promotion p { margin: 0 0 20px; }

    #footer .container div:nth-of-type( n ) { flex: auto; }
}

@media (max-width: 480px) {
    #consultation label { font-size: 10pt; }

    #certificate section > div:first-of-type { padding: 50px 20px; }
    #certificate .slick-arrow { width: 50px; height: 50px; }
    #certificate .slick-arrow:before { font-size: 22pt; }
}

@media (max-width: 420px) {
    #certificate section > div:first-of-type { padding: 40px 20px; }
}