/*!
Theme Name: Приятного опытита
Description: Цех85 х HH.ru
Version: 1
Text Domain: hhtseh85
*/

/*--------------------------------------------------------------
# RESET
--------------------------------------------------------------*/
:root {
    --hh-red: #FF0002;
    --hh-white: #FFFFFF;
    --hh-black: #1B1B1B;
    --hh-gray: #e5e3d8;
    --hh-lighthgray-hover: #E1E1E1;
    --hh-lighthgray: #888888;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color-rgb: 25 5, 0, 2;
    --hh-mt-section: 240px;
    --hh-mt-md: 80px;
    --hh-fs-1: 56px;
    --hh-fs-2: 36px;
    --hh-fs-3: 28px;
    --hh-fs-4: 24px;
    --hh-fs-5: 20px;
    --hh-fs-6: 16px;

    --hh-radius: 50px;

}


header {
    z-index: 150;
}

body {
    font-family: 'hh sans', sans-serif;
    position: relative;
    overflow-x: hidden;
    line-height: 1.2;
    background: var(--hh-white);
    color: var(--hh-black);
    font-size: 36px;
}

* {
    scroll-margin-top: 0px !important;
}


html {
    /*overflow-x: hidden;*/
}

body {
    overscroll-behavior-x: none;
    max-width: 100%;
    overflow-x: hidden;
}

body.admin-bar .top-0 {
    top: 32px !important;
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'hh sans Display', sans-serif;
}

.fs-1 {
    font-family: 'hh sans Display', sans-serif;
    font-weight: 900;
    font-size: 80px !important;
}

.fs-2 {
    font-family: 'hh sans Display', sans-serif;
    font-weight: 900;
    font-size: 56px !important;
}

.fs-3 {
    font-family: 'hh sans', sans-serif;
    font-weight: 500;
    font-size: 48px !important;
}


.display-1 {
    font-family: 'hh sans Display', sans-serif;
    font-weight: 900;
    font-size: 160px;
}


#intro {
    min-height: 100vh;
    background: var(--hh-red);
    color: var(--hh-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 70px;
    padding-bottom: 140px;
}

#intro .logo {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    height: 60px;
}

#intro .display-1 {
    text-align: center;
    line-height: 1;
    margin: 50px auto 48px;
    position: relative;
}

#intro .display-1 .bulb {
    position: absolute;
    bottom: 85%;
    right: 105%;
}

#intro .btn-row {
    margin-top: 48px;
}

#intro .display-1 .hh-badge {
    position: absolute;
    background: var(--hh-white);
    color: var(--hh-red);
    font-weight: 500;
    font-family: "hh sans", sans-serif;
    text-align: center;
    transform: rotate(-10deg) translateY(16px);
    display: inline-flex;
    height: 148px;
    line-height: .6em;
    padding: 12px 24px;
    border-radius: 200px;
    transform-origin: right center;
    top: unset;
    align-items: baseline;
}

#intro .subtitle {
    font-size: 20px;
    font-weight: 400;
    line-height: 120%;
    max-width: 440px;
    position: relative;
}

#intro .subtitle:after {
    content: "";
    position: absolute;
    display: block;
    width: 250px;
    height: 250px;
    left: 76%;
    top: -20px;
    background-image: url(img/arrow-1.png);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
}

#exp {
    text-align: center;
    padding-top: 140px;
    padding-bottom: 160px;
}

#exp .text {
    max-width: 1120px;
    margin: 0 auto;
}

#exp .fs-3 {
    margin-bottom: 100px;
    position: relative;
}

.decor-dash {
    position: relative;
    text-align: center;
}

.decor-dash:after {
    content: "";
    position: absolute;
    margin-top: 20px;
    background-image: url("./img/line-1.png");
    width: 265px;
    height: 24px;
    background-size: contain;
    left: 50%;
    top: 100%;
    translate: -50% 0;
}

#exp .text p {
    margin-bottom: 50px;
}

#exp .text p:last-child {
    margin-bottom: 0;
}

#slider {
    padding-bottom: 150px;
}

#slider .text {
    text-align: center;
    margin: auto;
    max-width: 850px;
}

.hh-badge {
    height: 60px;
    background-color: var(--hh-red);
    color: var(--hh-white);
    display: inline-flex;
    align-items: center;
    border-radius: 30px;
    padding: 0px 16px;
    transform: rotate(-2deg);
    margin-top: -12px;
    margin-bottom: -12px;
    top: -10px;
    position: relative;
}

.hh-badge.rotate-bottom-right {
    transform: rotate(6deg);
    top: 10px;
}

#ticker-wrapper {
    position: relative;
    z-index: 1;
    padding-top: 4vw;
    padding-bottom: 4vw;
    overflow: hidden;
    margin-top: calc(-4vw + 54px);
    margin-bottom: calc(-4vw + 54px);
}

#ticker {
    height: 170px;
    color: var(--hh-white);
    background: var(--hh-red);
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    transform: rotate(-4deg);
    padding: 52px 3px;
    width: 120%;
    position: relative;
    left: -10%;
    font-family: 'hh sans Display', sans-serif;
    font-weight: 900;
}

.ticker__row {
    animation: ticker 80s infinite linear;
    pointer-events: none;
    user-select: none;
    display: flex;
    gap: 0px;
    align-items: center;
    transform: translateX(0);
    height: 100%;
    flex-shrink: 0;
}

.ticker__row .item {
    display: flex;
    flex-shrink: 0;
}

.ticker__row .item:after {
    content: "";
    display: block;
    background-image: url("./img/ticker-delimeter.svg");
    height: 100px;
    width: 150px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.ticker__row .item:last-of-type {
    margin-right: 0px;
}

@-moz-keyframes ticker {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@-webkit-keyframes ticker {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes ticker {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

#start-test-1 {
    border-bottom-right-radius: var(--hh-radius);
    border-bottom-left-radius: var(--hh-radius);
    margin-bottom: calc(-1 * var(--hh-radius));
    padding-top: 200px;
    padding-bottom: 200px;
    position: relative;
    background: white;
    text-align: center;
}

#start-test-1 .fs-1 {
    margin-bottom: 80px;
}

#start-test-1 .fs-1 span {
    position: relative;
    display: inline-flex;
}

#start-test-1 .fs-1 span:before {
    content: "";
    background-image: url(./img/circle-1.png);
    display: block;
    position: absolute;
    width: 150%;
    height: 180%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    bottom: -20%;
    left: -25%;
}

#merch {
    background-color: var(--hh-red);
    color: var(--hh-white);
    padding-top: 130px;
    padding-bottom: 170px;
}

#merch .fs-1 {
    text-align: center;
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
}

.merch-steps {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.merch-steps .step-number {
    margin: auto;
    margin-bottom: 36px;
}

.merch-steps .title {
    text-align: center;
}

.merch-steps .subline {
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

#merch .text {
    text-align: center;
    margin-bottom: 80px;
    margin-top: 100px;
}

#merch .hh-badge {
    color: var(--hh-red);
    background-color: var(--hh-white);
    transform-origin: top right;
    top: 0px;
    transform: rotate(-7.084deg);
}

#merch .rules-link {
    font-size: 28px;
    font-weight: 400;
}

#merch form {
    margin-top: 80px;
    margin-bottom: 80px;
    position: relative;
}

#merch form:before {
    content: "";
    position: absolute;
    display: block;
    width: 170px;
    height: 170px;
    bottom: calc(100% + 40px);
    left: 40px;
    background-image: url("img/arrow-2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#merch .row-steps {
    margin: 0 100px;
}

#test-drive {
    padding-top: 200px;
    margin-top: calc(-1 * var(--hh-radius));
    background-color: var(--hh-white);
    border-top-right-radius: var(--hh-radius);
    border-top-left-radius: var(--hh-radius);
    padding-bottom: 200px;
    overflow: hidden;

}

#test-drive .fs-1 {
    text-align: center;
    margin-bottom: 80px;
}

#test-drive .fs-1 .hh-badge {
    transform: rotate(3deg);
    height: 120px;
    border-radius: 200px;
    align-items: center;
    padding: 0 24px 10px 24px;
    top: 0;
    transform-origin: left center;
}

#test-drive .text {
    text-align: center;
    margin-bottom: 80px;
}

.how-to-wrapper {
    max-width: 775px;
    margin: auto;
    position: relative;
    --bs-link-color-rgb: 0, 0, 0;
}

.how-to-wrapper .products {
    position: absolute;
}

.how-to-wrapper .products.product-1 {
    right: 100%;
    width: 400px;
    top: 120px;
}

.how-to-wrapper .products.product-2 {
    left: 82%;
    top: 230px;
    width: 500px;
}

.how-to-wrapper .products.product-3 {
    left: 100%;
    top: -120px;
    width: 480px;
}

.how-to-wrapper .fs-3 {
    margin-left: 140px;
    margin-bottom: 36px;
}

.how-to {
    margin-bottom: 80px;
    display: flex;
    gap: 30px;
}

.how-to .step-number {
    width: 110px;
    height: auto;

}

#offer {
}

#offer .row {
    justify-content: center;
    --bs-gutter-y: 80px;
}

#offer .fs-2 {
    text-align: center;
    margin-bottom: 60px;
}

.offer-item {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 32px;
    padding-top: 50px;
}

.offer-item .offer-title {
    font-family: 'hh sans Display', sans-serif;
    font-size: 28px;
    position: relative;
}

.offer-title:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    width: 400px;
    height: 200px;
    background-size: contain;
    background-image: url("./img/circle-4.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    left: 50%;
    translate: -50%;
}

.offer-item.item-2 .offer-title:before {
    background-image: url("./img/circle-3.png");
    width: 370px;
}

.offer-item.item-3 .offer-title:before {
    background-image: url("./img/circle-2.png");
    width: 410px;

}

.offer-item.item-4 .offer-title:before {
    background-image: url("./img/circle-5.png");
    width: 450px;

}

.offer-item.item-5 .offer-title:before {
    background-image: url("./img/circle-6.png");
    width: 430px;
}

.offer-item .offer-subtitle {
    font-size: 28px;
}


#faq {
    margin-top: 200px;
}

#faq .fs-2 {
    margin-bottom: 80px;
}

#faq-accordion {
    max-width: 800px;
    margin: auto;
    --acc-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAApCAMAAACyTN9+AAAAPFBMVEUAAAD/AAb/AAL/AAT/AAL/AAH/AAL/AAL/AAL/AAL/AAP/AAT/AAP/AAL/AAL/AAL/AAP/AAH/AAX/AAIEMk+OAAAAE3RSTlMAEO8g38+fUL+vYEAwgHCQj7BvnRboowAAAWxJREFUSMfFlll2wyAMRdHEYIztVvvfa5smcayAh/DT+wlIPD3Jx7j/Y1ziMrhuwOsvIuT6INY7nRoy64OvvvsX1XcFAESX7WN98vQgDFPy80LjR/Wr4jD93T4IJxHGWEI49190BXG+rRRe13jIAY7987oB6e7pJilPeTq4fjTxeq95UtQNUr5pN0Ey8eVuatI32BfYGV+s490UtcI33Rw864YED1lZa9Bngsp/NEfyuuMRGykkvNdfTJ3jZiuKNlKkwcRHW+piuyPSEvEFryOBjQGzs1BI2oBXEZ7RbNRtorklQv346L8lNLucWVuFRF812syJKWQ9e8h88K2npKcguX3AWnHsbBsSOUngzgh8KCK4U+hIgwd3DsXU4aBhjNomu4tQbBoh7jKUpNafwF2HfG2g+wzjQ8+/NHcIsAwmnuHzBKgvel4TeUIzwh0kVbx5Kb2PkRCLxsQsDK4LoOJDyOKz64UIHORxx8EffMJAHZaTGKoAAAAASUVORK5CYII=);
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 0;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--hh-black);
    --bs-accordion-btn-icon: var(--acc-icon);
    --bs-accordion-btn-active-icon: var(--acc-icon);
}

.button-span {
    display: inline-block;
    margin-right: 30px;
}

.accordion-body {
    padding-right: 50px;
}

.accordion-button {
    font-size: 28px !important;
    font-family: "hh sans", sans-serif;
    font-weight: 500;
    --bs-accordion-active-bg: transparent;
}

.accordion-button:focus {
    box-shadow: unset;
}

.accordion-body {
    font-size: 20px;
}

.accordion-item:after {
    content: "";
    width: 100%;
    height: 40px;
    display: block;
    background-image: url("./img/faq-delimeter.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 40px;
    margin-bottom: 40px;
}


#start-test-2 {
    padding-top: 160px;
    padding-bottom: 160px;
}

#start-test-2 .fs-1 {
    text-align: center;
    margin-bottom: 60px;
}

#start-test-2 .fs-1 .hh-badge {
    height: 120px;
    border-radius: 200px;
    align-items: center;
    padding: 0 24px 10px 24px;
    top: 0;
    transform-origin: left center;
    margin-top: 30px;
    position: relative;
}

#start-test-2 .fs-1 .hh-badge:before {
    content: "";
    position: absolute;
    display: block;
    width: 240px;
    height: 240px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("./img/arrow-3.png");
    left: 100%;
    top: 0;
}

footer {
    background-color: var(--hh-red);
    color: var(--hh-white);
    padding-top: 58px;
    padding-bottom: 58px;
}

footer .container {
    display: flex;
    align-items: center;

}

footer .logo {
    width: auto;
    height: 60px;
}

footer .links {
    display: flex;
    gap: 56px;
    margin-left: auto;
}

footer .links a,
footer .links .copyright {
    color: var(--hh-white);
    text-decoration: none;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
}

.form-control {
    border-radius: 12px;
    padding: 22px 14px;
    border: 0;
    background-color: var(--hh-white);
    color: var(--hh-black);
    font-size: 20px;
    line-height: 1.2;
    height: 68px;
}


.form-control:focus {
    color: var(--hh-black);
    background-color: var(--hh-white);
    outline: 0;
    box-shadow: none;
}

.form-control::placeholder {
    color: var(--hh-lighthgray);
    opacity: .4;
}

.wpcf7-not-valid-tip {
    color: var(--hh-white);
    font-size: 14px;
    line-height: 1.4;
    margin-top: 10px;
}

.row-submit {
    position: relative;
}

.row-submit .wpcf7-spinner {
    position: absolute;
    margin: 0;
    right: 0;
    top: 50%;
    translate: -50% -50%;
}

.form-warning {
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    margin-top: 10px;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000000s ease-in-out 0s;
    -webkit-text-fill-color: var(--hh-black) !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent;
    border-color: var(--hh-gray);
    color: var(--hh-black);
}

.btn-row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-row .btn {
    width: 100%;
    max-width: 450px;
}

.btn {
    padding: 19px 24px;
    font-size: 28px;
    line-height: 1;
    border-width: 1px;
    border-radius: 12px;
    position: relative;
}

.btn-sm {
    padding: 10px 35px;
    font-size: var(--hh-fs-5);
    line-height: var(--hh-fs-4);
}


.btn-primary {
    --bs-btn-color: var(--hh-red);
    --bs-btn-bg: var(--hh-white);
    --bs-btn-border-color: var(--hh-white);
    --bs-btn-hover-color: var(--hh-red);
    --bs-btn-hover-bg: var(--hh-white);
    --bs-btn-hover-border-color: var(--hh-white);
    --bs-btn-active-color: var(--hh-red);
    --bs-btn-active-bg: var(--hh-white);
    --bs-btn-active-border-color: var(--hh-white);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--hh-red);
    --bs-btn-disabled-bg: var(--hh-white);
    --bs-btn-disabled-border-color: var(--hh-white);
}

.btn-decor:after {
    content: "";
    position: absolute;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="43" height="40" viewBox="0 0 43 40" fill="none"><path d="M2.84418 11.2581C2.85207 11.0289 2.90433 10.7766 3.01312 10.5579L3.06293 10.4661L3.06586 10.4612C3.15744 10.3129 3.28967 10.2122 3.39789 10.1458C3.51228 10.0755 3.63844 10.0209 3.76117 9.98071C3.99205 9.90515 4.2829 9.85767 4.53851 9.89771L4.53949 9.89673C5.16662 9.99082 5.80632 10.1914 6.37445 10.4739C9.81807 12.1779 13.2484 13.8945 16.6655 15.636L16.6664 15.636C17.9478 16.2932 19.2177 16.9888 20.475 17.6653C20.9152 17.8956 21.3405 18.1511 21.7377 18.4192L21.7368 18.4202C22.0034 18.5941 22.2618 18.839 22.3969 19.1565C22.5451 19.5049 22.5255 19.8991 22.2856 20.259L22.2836 20.262C22.2206 20.3552 22.0833 20.5957 21.8803 20.7668C21.6408 20.9686 21.3343 21.0745 20.937 21.0745L20.8813 21.0745L20.8276 21.0627C20.209 20.9236 19.6206 20.8253 19.0756 20.6575L19.0756 20.6565C13.7462 19.0324 9.01058 16.4262 4.53265 13.4749L4.53168 13.4739C3.97804 13.1067 3.42879 12.6325 3.05121 12.0803L3.05219 12.0803C2.87868 11.8276 2.83548 11.5115 2.84418 11.2581Z" fill="white" stroke="white"/><path d="M35.1951 14.0328C35.1811 13.4931 35.1932 12.8645 35.3503 12.2847L35.3513 12.2798C36.2846 8.95703 37.2453 5.63433 38.2195 2.32477L38.2195 2.32379C38.3454 1.89903 38.5713 1.43809 38.9158 1.0816L38.9158 1.08258C39.3624 0.609939 39.9659 0.420336 40.5271 0.538635C41.0941 0.658237 41.5651 1.08173 41.7449 1.71149L41.7468 1.7193C41.8106 1.95696 41.8247 2.19711 41.8318 2.40973C41.8393 2.63704 41.8391 2.82989 41.8582 3.05328L41.864 3.12067L41.8513 3.18707C41.7504 3.73211 41.6573 4.48392 41.489 5.16559L41.488 5.16754C40.8298 7.79629 40.1707 10.4285 39.4841 13.0484L39.4841 13.0494C39.318 13.6744 39.0344 14.274 38.7166 14.8072L38.7156 14.8072C38.4775 15.212 38.1716 15.5174 37.7996 15.6978C37.4244 15.8796 37.0198 15.9169 36.6218 15.8453C36.2126 15.7716 35.8458 15.5786 35.5837 15.2457C35.3256 14.9177 35.2049 14.4991 35.196 14.0328L35.1951 14.0328Z" fill="white" stroke="white"/><path d="M1.1554 36.4674C1.11716 36.0307 1.34111 35.6453 1.62512 35.3834C1.91615 35.1151 2.3184 34.9259 2.76575 34.8776C3.68524 34.7788 4.6511 34.6885 5.61047 34.7272C8.38636 34.8385 11.1748 34.9986 13.9464 35.1715L13.9484 35.1725C14.8847 35.2354 15.8181 35.348 16.7452 35.485L16.7491 35.486C17.1017 35.5412 17.5077 35.6553 17.8361 35.8688L17.8351 35.8698C18.2997 36.1605 18.5892 36.6228 18.5529 37.1354C18.5159 37.6545 18.156 38.0719 17.6427 38.2819L17.6417 38.2819C17.1402 38.4857 16.5511 38.566 16.0411 38.566L16.0411 38.5651C14.4366 38.6254 6.83271 38.4415 4.55383 38.2809L4.5509 38.2799C3.8702 38.2278 3.19749 38.0988 2.55481 37.9479L2.5509 37.9469C1.84918 37.7773 1.23829 37.3015 1.15637 36.4733L1.1554 36.4674Z" fill="white" stroke="white"/></svg>');
    left: -30px;
    top: -30px;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.btn-decor.style-1:after {
    background-image: url('data:image/svg+xml,<svg width="43" height="40" viewBox="0 0 43 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.84418 11.2583C2.85207 11.0291 2.90433 10.7769 3.01312 10.5581L3.06293 10.4663L3.06586 10.4614C3.15744 10.3132 3.28967 10.2124 3.39789 10.146C3.51228 10.0758 3.63844 10.0211 3.76117 9.98096C3.99205 9.9054 4.2829 9.85791 4.53851 9.89795L4.53949 9.89697C5.16662 9.99106 5.80632 10.1916 6.37445 10.4741C9.81807 12.1781 13.2484 13.8948 16.6655 15.6362L16.6664 15.6362C17.9478 16.2934 19.2177 16.989 20.475 17.6655C20.9152 17.8958 21.3405 18.1513 21.7377 18.4194L21.7368 18.4204C22.0034 18.5944 22.2618 18.8393 22.3969 19.1567C22.5451 19.5051 22.5255 19.8994 22.2856 20.2593L22.2836 20.2622C22.2206 20.3555 22.0833 20.596 21.8803 20.7671C21.6408 20.9689 21.3343 21.0747 20.937 21.0747L20.8813 21.0747L20.8276 21.063C20.209 20.9238 19.6206 20.8255 19.0756 20.6577L19.0756 20.6567C13.7462 19.0327 9.01058 16.4264 4.53265 13.4751L4.53168 13.4741C3.97804 13.107 3.42879 12.6328 3.05121 12.0806L3.05219 12.0806C2.87868 11.8279 2.83548 11.5118 2.84418 11.2583Z" fill="%23FF0002" stroke="%23FF0002"/><path d="M35.1951 14.033C35.1811 13.4932 35.1932 12.8647 35.3503 12.2849L35.3513 12.28C36.2846 8.95721 37.2453 5.63451 38.2195 2.32495L38.2195 2.32397C38.3454 1.89921 38.5713 1.43827 38.9158 1.08179L38.9158 1.08276C39.3624 0.610122 39.9659 0.420519 40.5271 0.538818C41.0941 0.65842 41.5651 1.08192 41.7449 1.71167L41.7468 1.71948C41.8106 1.95714 41.8247 2.1973 41.8318 2.40991C41.8393 2.63722 41.8391 2.83007 41.8582 3.05347L41.864 3.12085L41.8513 3.18726C41.7504 3.73229 41.6573 4.4841 41.489 5.16577L41.488 5.16772C40.8298 7.79647 40.1707 10.4286 39.4841 13.0486L39.4841 13.0496C39.318 13.6746 39.0344 14.2742 38.7166 14.8074L38.7156 14.8074C38.4775 15.2121 38.1716 15.5176 37.7996 15.698C37.4244 15.8798 37.0198 15.9171 36.6218 15.8455C36.2126 15.7718 35.8458 15.5788 35.5837 15.2458C35.3256 14.9179 35.2049 14.4993 35.196 14.033L35.1951 14.033Z" fill="%23FF0002" stroke="%23FF0002"/><path d="M1.1554 36.4675C1.11716 36.0308 1.34111 35.6454 1.62512 35.3835C1.91615 35.1152 2.3184 34.926 2.76575 34.8777C3.68524 34.7789 4.6511 34.6886 5.61047 34.7273C8.38636 34.8386 11.1748 34.9987 13.9464 35.1716L13.9484 35.1726C14.8847 35.2355 15.8181 35.3481 16.7452 35.4851L16.7491 35.4861C17.1017 35.5413 17.5077 35.6555 17.8361 35.8689L17.8351 35.8699C18.2997 36.1607 18.5892 36.6229 18.5529 37.1355C18.5159 37.6546 18.156 38.072 17.6427 38.282L17.6417 38.282C17.1402 38.4858 16.5511 38.5662 16.0411 38.5662L16.0411 38.5652C14.4366 38.6255 6.83271 38.4416 4.55383 38.281L4.5509 38.28C3.8702 38.2279 3.19749 38.0989 2.55481 37.948L2.5509 37.947C1.84918 37.7775 1.23829 37.3016 1.15637 36.4734L1.1554 36.4675Z" fill="%23FF0002" stroke="%23FF0002"/></svg>');
}

.btn-decor.style-2:after {
    background-image: url('data:image/svg+xml,<svg width="40" height="44" viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.6605 3.46297C28.8896 3.47411 29.1411 3.52993 29.3583 3.64181L29.4494 3.69291L29.4542 3.69591C29.6012 3.78959 29.7 3.92322 29.7649 4.03237C29.8335 4.14775 29.8864 4.27467 29.9248 4.39796C29.9971 4.62989 30.0404 4.92138 29.9968 5.1764L29.9977 5.17739C29.8948 5.80312 29.6852 6.43992 29.3947 7.00399C27.6421 10.4231 25.8771 13.8289 24.0874 17.2209L24.0874 17.2219C23.4121 18.4938 22.6986 19.7538 22.0044 21.0014C21.7679 21.4382 21.5064 21.8599 21.2327 22.2533L21.2317 22.2523C21.054 22.5165 20.8055 22.7714 20.4861 22.902C20.1357 23.0452 19.7418 23.02 19.3853 22.775L19.3824 22.773C19.29 22.7087 19.0515 22.568 18.8833 22.3626C18.6849 22.1202 18.5834 21.8123 18.589 21.415L18.5898 21.3593L18.6023 21.3058C18.7502 20.6892 18.8568 20.1023 19.0323 19.5597L19.0333 19.5598C20.7326 14.2538 23.4057 9.55561 26.4201 5.1199L26.4211 5.11894C26.796 4.57055 27.2779 4.02808 27.8354 3.65835L27.8354 3.65932C28.0905 3.48941 28.4072 3.45069 28.6605 3.46297Z" fill="white" stroke="white"/><path d="M25.4283 35.7711C25.9681 35.7648 26.5964 35.7858 27.1739 35.9511L27.1788 35.9521C30.4881 36.9323 33.7969 37.9399 37.0923 38.9609L37.0933 38.9609C37.5162 39.0928 37.9739 39.3253 38.3255 39.6747L38.3245 39.6747C38.7908 40.128 38.9718 40.7341 38.8456 41.2936C38.718 41.8588 38.2879 42.3238 37.6556 42.4946L37.6478 42.4965C37.4092 42.5568 37.1689 42.5676 36.9562 42.5716C36.7288 42.576 36.536 42.573 36.3124 42.5889L36.2449 42.5938L36.1787 42.5802C35.6351 42.4715 34.8847 42.3678 34.2055 42.1899L34.2035 42.1889C31.5844 41.4935 28.9618 40.7972 26.3518 40.0736L26.3509 40.0736C25.7282 39.8987 25.1327 39.6066 24.6041 39.2812L24.6041 39.2803C24.2027 39.0365 23.9016 38.7263 23.7265 38.3517C23.55 37.974 23.5185 37.5689 23.5958 37.172C23.6752 36.7639 23.8734 36.3999 24.21 36.1425C24.5416 35.8891 24.9619 35.7743 25.4283 35.772L25.4283 35.7711Z" fill="white" stroke="white"/><path d="M3.47769 1.41737C3.91488 1.38532 4.29711 1.61471 4.55491 1.9024C4.81906 2.19719 5.00257 2.60208 5.04458 3.05007C5.13036 3.97086 5.20692 4.9379 5.15469 5.89664C5.00409 8.67067 4.8045 11.4566 4.5924 14.2255L4.5914 14.2274C4.51527 15.1627 4.38945 16.0944 4.23934 17.0196L4.23831 17.0235C4.17814 17.3752 4.05822 17.7795 3.84015 18.1048L3.83919 18.1039C3.54186 18.5643 3.07558 18.8472 2.56353 18.8036C2.045 18.7594 1.63274 18.3936 1.43004 17.8773L1.43006 17.8764C1.23337 17.372 1.16135 16.7818 1.16856 16.2719L1.16954 16.2719C1.13191 14.6667 1.42345 7.06618 1.61629 4.7898L1.61731 4.78689C1.67907 4.10699 1.8176 3.43618 1.97756 2.79569L1.97859 2.7918C2.15806 2.09255 2.6425 1.48846 3.47181 1.41827L3.47769 1.41737Z" fill="white" stroke="white"/></svg>');
    left: unset;
    right: -30px;
}


.btn-secondary {
    --bs-btn-color: var(--hh-white);
    --bs-btn-bg: var(--hh-red);
    --bs-btn-border-color: var(--hh-red);
    --bs-btn-hover-color: var(--hh-white);
    --bs-btn-hover-bg: var(--hh-red);
    --bs-btn-hover-border-color: var(--hh-red);
    --bs-btn-active-color: var(--hh-white);
    --bs-btn-active-bg: var(--hh-red);
    --bs-btn-active-border-color: var(--hh-red);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--hh-white);
    --bs-btn-disabled-bg: var(--hh-red);
    --bs-btn-disabled-border-color: var(--hh-red);
}

.btn-success {
    --bs-btn-border-color: var(--hh-red);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--hh-red);
    --bs-btn-active-border-color: var(--hh-red);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--hh-red);
    --bs-btn-disabled-border-color: var(--hh-red);
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--hh-red);
    --bs-btn-hover-bg: var(--hh-red);
    --bs-btn-hover-border-color: var(--hh-red);
    --bs-btn-hover-color: var(--hh-black);
}


.btn-submit {
    --bs-btn-border-color: var(--hh-black);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--hh-black);
    --bs-btn-active-border-color: var(--hh-black);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--hh-black);
    --bs-btn-disabled-border-color: var(--hh-black);
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--hh-black);
    --bs-btn-hover-bg: var(--hh-black);
    --bs-btn-hover-border-color: var(--hh-black);
    --bs-btn-hover-color: var(--hh-white);
    width: 100%;
}

#quiz .btn.btn-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.quiz {
    display: none;
    flex-direction: column;
    padding-top: 54px;
    margin: auto;
}

.quiz.active {
    display: flex;
}

.quiz-question-num {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
}

.quiz-question-num .current {
    color: var(--hh-red);
}

.quiz-question {
    font-size: 36px;
    font-weight: 900;
    position: relative;
    margin-bottom: 80px;
}

.quiz-answers {
    max-width: 540px;
    margin: 0 auto 80px auto;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}


.quiz-result {
    flex-direction: column;
    margin-top: 50px;
    margin-bottom: 50px;
    flex-grow: 1;
    width: 100%;
}

.result-post {
    text-align: center;
    position: relative;
    margin: 0 auto 80px;
}


.result-post:before {
    content: "";
    background-image: url(./img/circle-1.png);
    display: block;
    position: absolute;
    width: 1000px;
    height: 210px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    bottom: -30px;
    left: 50%;
    translate: -50%;
}


.result-row {
    display: flex;
    gap: 160px;
}

.result-text {
    display: flex;
    flex-direction: column;
    height: 100%;
}


.result-text .btn {
    margin-top: auto;
}

.result-subtitle {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 36px;
}

.result-resume-title {
    font-weight: 500;
    position: relative;
    margin-bottom: 80px;
    margin-right: auto;
}

.result-resume {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 40px;
    padding-left: 0;
}

.result-resume li {
    font-size: 20px;
    font-weight: 400;
    list-style: none;
    display: inline-flex;

}

.result-resume li:before {
    background-image: url('data:image/svg+xml,<svg width="30" height="22" viewBox="0 0 30 22" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_242_710)"><mask id="mask0_242_710" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="22"><path d="M30 0H0V22H30V0Z" fill="white"/></mask><g mask="url(%23mask0_242_710)"><mask id="mask1_242_710" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="22"><path d="M30 0H0V22H30V0Z" fill="white"/></mask><g mask="url(%23mask1_242_710)"><mask id="mask2_242_710" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="22"><path d="M29.5716 0H0.428711V21.5769H29.5716V0Z" fill="white"/></mask><g mask="url(%23mask2_242_710)"><mask id="mask3_242_710" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="22"><path d="M29.5716 0H0.428711V21.5769H29.5716V0Z" fill="white"/></mask><g mask="url(%23mask3_242_710)"><mask id="mask4_242_710" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="22"><path d="M29.5716 0H0.428711V21.5769H29.5716V0Z" fill="white"/></mask><g mask="url(%23mask4_242_710)"><path d="M0.470913 10.0837C0.604238 8.2173 2.2779 8.2778 3.42953 9.28763C4.68715 10.3905 5.1802 12.6558 5.97134 14.098C7.08314 16.1249 7.01581 16.0859 8.57722 14.3577C10.0085 12.7735 11.6357 11.3096 13.2657 9.93204C16.3019 7.36603 19.7353 5.1711 23.0087 2.91509C24.3579 1.98518 26.3671 0.232726 28.0887 0.027989C29.8992 -0.187282 29.9012 0.874422 28.9025 2.00386C27.6855 3.38027 25.8186 4.50049 24.4097 5.68154C22.7253 7.0936 21.0607 8.5218 19.4426 10.0094C16.4058 12.8009 13.221 15.5566 10.7001 18.8388C8.63727 21.5246 6.94874 22.9658 4.46706 19.6762C2.74949 17.3996 0.12784 13.0484 0.470913 10.0837C0.496331 9.72805 0.364335 11.0047 0.470913 10.0837Z" fill="%23FF0002"/></g></g></g></g></g></g><defs><clipPath id="clip0_242_710"><rect width="30" height="22" fill="white"/></clipPath></defs></svg>');
    content: '';
    display: inline-flex;
    width: 30px;
    height: 22px;
    margin-right: 14px;
    flex-shrink: 0;
}


.result-photo {
    position: relative;
    background-color: var(--hh-black);
    width: 100%;
    height: 100%;
    border-radius: 50px;
    overflow: hidden;
}

.result-photo img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 0;
    left: 0;
}

.result-photo .text {
    color: var(--hh-white);
    font-size: 20px;
    font-weight: 400;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px 48px;
    z-index: 1;
}

.result-photo .text:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    height: 150%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%);
}

.form-check-input {
    --bs-border-color: var(--hh-black);
    margin-top: .125em;
    width: 1em;
    height: 1em;
}

.form-check-input:checked {
    background-color: var(--hh-red);
    border-color: var(--hh-red);
}

.form-check-input:focus {
    border-color: var(--hh-red);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(255, 0, 2, .25);
}

.modal-title {
    font-size: 32px;
}

.modal-success {
    font-size: 20px;
}

.modal-success a {
    color: var(--hh-black);
}

.slider {
    padding-bottom: 60px;
    margin: auto;
}

.slider-text {
    color: #FFF;
    font-size: 24px;
    font-weight: 400;
}

.slider-item {
    display: block;
    overflow: hidden;
    width: 524px;
    max-width: 80vw;
    padding-top: 130%;
    position: relative;
    z-index: 1;
    border-radius: 30px;
    box-shadow: -4px 8px 6px 0 rgba(0, 22, 71, 0.05), -4px 8px 30px 0 rgba(0, 22, 71, 0.20);
}

.slider-container {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 45px 40px;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 40%), linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 40%)
}

.slider-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 0;
    left: 0;
    z-index: -1;
}

.flipster--carousel .flipster__item--past-2 .flipster__item__content {
    transform: translateX(20%) rotateY(0deg) scale(.65);
}

.flipster--carousel .flipster__item--past-1 .flipster__item__content {
    transform: rotateY(0deg) scale(.8);
}

.flipster--carousel .flipster__item--future-1 .flipster__item__content {
    transform: rotateY(0deg) scale(.8);
}

.flipster--carousel .flipster__item--future-2 .flipster__item__content {
    transform: translateX(-20%) rotateY(0deg) scale(.65);
}

.flipster--carousel .flipster__item--past-1, .flipster--carousel .flipster__item--future-1,
.flipster--carousel .flipster__item--past-2, .flipster--carousel .flipster__item--future-2 {
    opacity: 1;
}

.flipster__item .btn,
.flipster__item .slider-text {
    opacity: 0;
    transition: .3s linear opacity;
}

.flipster__item.flipster__item--current .btn,
.flipster__item.flipster__item--current .slider-text {
    opacity: 1;
}

.modal-header {
    border: 0;
}

.modal-content {
    border-radius: 0;
    box-shadow: none;
    border: 0;
}

@media (min-width: 1750px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1720px;
    }
}

@media (max-width: 1749.98px) {
    #merch .row-steps {
        margin: 0;
    }

    #merch form:before {
        width: 140px;
        height: 140px;
        bottom: calc(100% + 50px);
        left: -30px;
        rotate: -15deg;
    }
}

@media (max-width: 1399.98px) {

    body {
        font-size: 32px;
    }

    .display-1 {
        font-size: 130px;
    }

    #intro .display-1 .hh-badge {
        height: 138px;
    }

    .fs-1 {
        font-size: 70px !important;
    }

    .fs-2 {
        font-size: 48px !important;
    }

    .fs-3 {
        font-size: 44px !important;
    }

    .offer-item .offer-title {
        font-size: 26px;
    }

    .offer-item .offer-subtitle {
        font-size: 24px;
    }

    .offer-title:before {
        width: 360px;
    }

    .offer-item.item-2 .offer-title:before {
        width: 330px;
    }

    .offer-item.item-3 .offer-title:before {
        width: 370px;
    }

    .offer-item.item-4 .offer-title:before {
        width: 400px;
    }

    .offer-item.item-5 .offer-title:before {
        width: 400px;
    }

    #exp {
        padding-top: 100px;
        padding-bottom: 120px;
    }

    #ticker {
        height: 150px;
    }

    #start-test-1 {
        padding-top: 150px;
        padding-bottom: 150px
    }

    #merch form:before {
        width: 140px;
        height: 140px;
        bottom: calc(100% + 62px);
        left: -35px;
        rotate: -23deg;
    }

    #faq {
        margin-top: 160px;
    }

    #start-test-2 {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    footer {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    #test-drive {
        padding-top: 160px;
        padding-bottom: 160px;
    }

    .result-post:before {
        width: 950px;
    }

    footer .links {
        display: flex;
        gap: 42px;
    }

    .links .copyright {
        max-width: 275px;
    }
}

@media (max-width: 1199.98px) {
    #intro {
        padding-top: 60px;
        padding-bottom: 90px;
    }

    #intro .subtitle {
        font-size: 18px;
    }

    #intro .subtitle:after {
        width: 210px;
        height: 210px;
        left: 76%;
    }

    #intro .logo, footer .logo {
        height: 52px;
    }

    #intro .display-1 .bulb {
        width: 100px;
    }

    .display-1 {
        font-size: 100px;
    }

    #intro .display-1 .hh-badge {
        height: 105px;
        padding: 12px 16px;
    }

    body {
        font-size: 30px;
    }

    #ticker {
        height: 130px;
        padding: 16px 0 0 0;
    }

    .fs-1 {
        font-size: 60px !important;
    }

    .fs-2 {
        font-size: 44px !important;
    }

    .fs-3 {
        font-size: 36px !important;
    }

    #slider {
        padding-bottom: 100px;
    }

    #start-test-1 {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    #merch {
        padding-bottom: 120px;
    }

    #merch .fs-1 {
        margin-bottom: 80px
    }

    #merch form:before {
        content: unset;
    }

    #merch form .row {
        --bs-gutter-y: 20px;
    }

    #merch .text {
        text-align: center;
        margin-bottom: 40px;
        margin-top: 60px;
    }

    .merch-steps .step-number {
        width: 90px;
        margin-bottom: 24px;
    }

    .hh-badge {
        height: 48px;
    }

    #test-drive {
        padding-top: 100px;
        padding-bottom: 170px;
    }

    #test-drive .fs-1 .hh-badge {
        height: 90px;
        padding: 0 16px 10px 16px;
    }

    #test-drive .text {
        margin-bottom: 60px;
    }

    .how-to {
        margin-bottom: 40px;
        gap: 20px;
    }

    .how-to .step-number {
        width: 90px;
    }

    .how-to-wrapper .fs-3 {
        margin-left: 110px;
        margin-bottom: 32px;
    }

    .how-to-wrapper .products.product-3 {
        left: 84%;
        top: -90px;
        width: 350px;
    }

    .how-to-wrapper .products.product-2 {
        left: 82%;
        top: 200px;
        width: 360px;
    }

    .how-to-wrapper .products.product-1 {
        right: 92%;
        width: 300px;
        top: 0;
    }

    #offer .fs-2 {
        margin-bottom: 40px;
    }

    #offer .row {
        --bs-gutter-y: 50px;
    }

    #faq {
        margin-top: 100px;
    }

    .accordion-button {
        font-size: 24px !important;
    }

    .accordion-item:after {
        margin: 10px 0;
    }

    #start-test-2 .fs-1 .hh-badge {
        height: 90px;
        padding: 0 16px 10px 16px;
        margin-top: 20px;
    }

    #start-test-2 {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    footer .links {
        gap: 24px;
    }

    footer {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .result-post::before {
        width: 800px;
    }

    .slider-item {
        width: 400px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --hh-radius: 30px;
    }


    .display-1 {
        font-size: 90px;
    }

    #intro .subtitle:after {
        width: 160px;
        height: 160px;
        left: 81%;
        top: 20px;
        rotate: -40deg;
    }

    footer .container {
        flex-direction: column;
        gap: 20px;
    }

    footer .links a,
    footer .links .copyright {
        font-size: 16px;
    }

    footer .links {
        gap: 20px;
        margin: 0;
    }

    #intro .display-1 .bulb {
        width: 85px;
    }

    #intro .display-1 .hh-badge {
        height: 90px;
        padding: 10px 12px;
    }

    #intro .display-1 {
        text-align: center;
        line-height: 1;
        margin: 30px auto 60px;
        position: relative;
    }

    .btn {
        padding: 14px 32px;
        font-size: 24px;
    }

    .btn-row .btn {
        max-width: 350px;
    }

    .btn-decor:after {
        left: -20px;
        top: -20px;
        width: 30px;
        height: 30px;
    }

    body {
        font-size: 24px;
    }

    .hh-badge {
        height: 42px;
    }

    .hh-badge.rotate-bottom-right {
        transform: rotate(4deg);
        top: 10px;
    }

    .decor-dash:after {
        margin-top: 12px;
        width: 198px;
        height: 18px;
        background-repeat: no-repeat;
    }

    #exp .fs-3 {
        margin-bottom: 80px;
    }

    #exp {
        padding-top: 80px;
        padding-bottom: 90px;
    }

    .fs-1 {
        font-size: 44px !important;
    }

    .fs-2 {
        font-size: 36px !important;
    }

    .fs-3 {
        font-size: 28px !important;
    }

    #start-test-2 .fs-1 .hh-badge {
        height: 64px;
        margin-top: 12px;
    }

    .offer-item .offer-title {
        font-size: 24px;
    }

    .offer-item .offer-subtitle {
        font-size: 20px;
    }

    .ticker__row .item:after {
        height: 64px;
        width: 90px;
    }

    #ticker {
        height: 100px;
        padding: 10px 0 0 0;
    }

    #merch {
        padding-top: 80px;
        padding-bottom: 90px;
    }

    #merch .fs-1 {
        margin-bottom: 40px;
    }

    .form-control {
        padding: 15px 14px;
        font-size: 18px;
        height: 54px;
    }

    .form-warning {
        font-size: 12px;
        line-height: 1.2;
    }

    .wpcf7-not-valid-tip {
        font-size: 12px;
        line-height: 1.2;
        margin-top: 8px;
    }

    .hh-badge {
        height: 32px;
        padding: 0 10px;
    }


    #merch .rules-link {
        font-size: 18px;
    }

    #test-drive .fs-1 .hh-badge {
        height: 70px;
        padding: 0 12px 10px 12px;
    }

    #test-drive {
        padding-top: 80px;
        padding-bottom: 90px;
    }

    .how-to-wrapper {
        max-width: 450px;
    }

    .how-to {
        margin-bottom: 30px;
        gap: 20px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .how-to .step-number {
        width: 80px;
    }

    .how-to-wrapper .fs-3 {
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        margin-bottom: 24px;
    }

    .how-to-wrapper .products.product-3 {
        left: 91%;
        top: 0;
        width: 350px;
    }

    .how-to-wrapper .products.product-2 {
        left: 86%;
        top: 250px;
        width: 360px;
    }

    .how-to-wrapper .products.product-1 {
        right: 85%;
        width: 300px;
        top: 150px;
    }

    .offer-title:before {
        width: 280px;
        bottom: -16px;
    }

    .offer-item.item-2 .offer-title:before {
        width: 270px;
    }

    .offer-item.item-3 .offer-title:before {
        width: 315px;
        bottom: -14px;
    }
    
    .offer-item.item-4 .offer-title:before {
        width: 350px;
    }

    .offer-item {
        gap: 24px;
        padding-top: 24px;
    }

    .offer-item.item-5 .offer-title:before {
        width: 300px;
    }

    #faq .fs-2 {
        margin-bottom: 50px;
    }

    #start-test-2 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #start-test-2 .fs-1 {
        margin-bottom: 40px;
    }

    #start-test-2 .fs-1 .hh-badge:before {
        width: 150px;
        height: 150px;
        left: 106%;
        top: 0;
    }

    .slider-item {
        width: 350px;
    }

    .slider-text {
        font-size: 20px;
    }

    .slider-container {
        padding: 30px 24px;
    }
}

@media (max-width: 767.98px) {

    #intro {
        padding-top: 40px;
        padding-bottom: 60px;
        overflow: hidden;
    }

    .display-1 {
        font-size: 72px;
    }

    #intro .display-1 .hh-badge {
        height: 76px;
        padding: 8px 10px;
    }

    .fs-1 {
        font-size: 36px !important;
    }

    .fs-2 {
        font-size: 28px !important;
    }

    .fs-3 {
        font-size: 24px !important;
    }

    body {
        font-size: 20px;
    }

    #intro .subtitle {
        font-size: 16px;
        margin: auto;
        text-align: center;
    }

    #intro .display-1 .bulb {
        width: 70px;
        right: 102%;
    }

    .decor-dash:after {
        margin-top: 10px;
        width: 150px;
        height: 14px;
    }

    #test-drive .fs-1 .hh-badge {
        height: 50px;
        padding: 0 8px 8px 8px;
        transform: rotate(2deg);
    }

    #test-drive .fs-1 {
        margin-bottom: 40px;
    }

    #test-drive .text {
        margin-bottom: 30px;
    }

    .how-to-wrapper {
        max-width: 350px;
    }

    .hh-badge {
        height: 24px;
        padding: 0 8px;
        top: -4px;
    }

    .hh-badge.rotate-bottom-right {
        transform: rotate(2deg);
        top: 4px;
    }

    #exp {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    #exp .fs-3 {
        margin-bottom: 50px;
    }

    #exp .text p {
        margin-bottom: 24px;
    }

    #slider {
        padding-bottom: 60px;
    }

    #ticker-wrapper {
        margin: 0;
    }

    #ticker {
        height: 80px;
        transform: rotate(-3deg);
    }

    .ticker__row .item:after {
        height: 50px;
        width: 75px;
    }


    #start-test-1 {
        padding-top: 80px;
        padding-bottom: 100px;
    }

    #start-test-1 .fs-1 {
        margin-bottom: 30px;
    }

    .row-steps {
        justify-content: center;
        --bs-gutter-y: 24px;
    }


    #merch form {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    #merch form:before {
        content: "";
        width: 90px;
        height: 90px;
        left: 0;
        bottom: calc(100% + 64px);
    }

    #merch .hh-badge {
        transform: rotate(-4deg);
    }


    #start-test-2 .fs-1 .hh-badge {
        height: 50px;
        padding: 0 8px 8px 8px;
        margin-top: 8px;
    }

    .offer-title:before {
        max-width: 100%;
    }

    .offer-item .offer-title {
        font-size: 18px;
        width: 100%;
    }

    .offer-item .offer-subtitle {
        font-size: 16px;
    }

    .offer-item.item-5 .offer-title:before {
        width: 250px;
    }


    #start-test-2 .fs-1 {
        margin-bottom: 30px;
    }

    .accordion-button {
        font-size: 20px !important;
    }

    .accordion-body {
        font-size: 16px;
    }

    footer .links {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    footer .links a br {
        display: none;
    }

    footer {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .quiz-answers {
        gap: 20px;
        margin: 0 auto 40px auto;
    }

    .quiz-question {
        font-size: 30px;
    }


    .result-photo {
        border-radius: 20px;
        padding-top: 120%;
    }

    .result-post::before {
        height: 24vw;
        background-position: bottom;
        width: 90vw;
        bottom: -20px;

    }

    .result-post {
        margin: 0 auto 40px;
    }

    .result-resume-title {
        margin-bottom: 60px;
        font-size: 19px;
    }

    .result-resume li {
        font-size: 16px;
    }


    .result-subtitle {
        font-size: 16px;
    }

    .result-resume {
        gap: 20px;
        margin-bottom: 80px;
    }

    .result-photo .text {
        font-size: 14px;
        padding: 12px 12px;
    }

    .result-text {
        margin-top: 24px;
        height: auto;
    }

    .result-resume li:before {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        top: 4px;
    }

    .quiz-result {
        margin-top: 0;
    }

    .result-text .btn {
        width: 75vw;
        margin: auto;
    }

    #start-test-2 .fs-1 .hh-badge:before {
        width: 120px;
        height: 120px;
        left: 110%;
        top: -20px;
        rotate: -12deg;
    }

    .modal-title {
        font-size: 24px;
    }

    .links .copyright {
        max-width: unset;
    }
}

@media (max-width: 575.98px) {

    #intro {
        min-height: 100svh;
    }

    #intro .logo, footer .logo {
        height: 48px;
    }

    #intro .display-1 .hh-badge {
        height: 17vw;
    }

    #intro .container {
        flex-grow: 1;
    }

    #intro .display-1 .bulb {
        width: 74px;
        right: 85%;
        bottom: 100%;
    }

    .display-1 {
        font-size: 16vw;
    }

    .btn-row .btn {
        max-width: 75vw;
    }

    .btn {
        padding: 14px 32px;
        font-size: 18px;
    }


    #intro .display-1 {
        margin-bottom: 0;
        margin-top: auto;
    }

    #intro .subtitle {
        margin-bottom: 0;
        margin-top: 40px;
    }

    #intro .subtitle:after {
        rotate: unset;
        left: 50%;
        top: 100%;
        max-height: 15vh;
    }

    #intro .btn-row {
        margin-top: 17vh;
    }

    .hh-badge {
        top: 0;
        rotate: 1deg;
        height: 20px;
    }

    .hh-badge.rotate-bottom-right {
        transform: rotate(1deg);
        top: 0;
    }

    body {
        font-size: 16px;
    }

    .fs-1 {
        font-size: 24px !important;
    }

    .fs-2 {
        font-size: 22px !important;
    }

    .fs-3 {
        font-size: 20px !important;
    }

    #merch .hh-badge {
        transform: rotate(-2deg);
    }

    #merch .rules-link {
        font-size: 13px;
    }

    .how-to .step-number {
        width: 64px;
    }

    .merch-steps .step-number {
        width: 64px;
        margin-bottom: 16px;
    }

    .merch-steps .subline {
        font-size: 12px;
        margin-top: 4px;
        text-align: center;
    }

    .row-steps {
        --bs-gutter-y: 32px;
    }

    #merch form:before {
        content: unset;
    }

    #merch .fs-1 {
        margin-bottom: 0;
    }

    .form-control {
        padding: 12px 14px;
        font-size: 16px;
        line-height: 16px;
        height: 48px;
        border-radius: 8px;
    }

    .row-submit:after {
        content: unset;
    }

    .form-warning {
        text-align: center;
    }

    #ticker {
        height: 60px;
        padding-top: 0;
    }

    .ticker__row .item:after {
        height: 36px;
        width: 68px;
    }

    #test-drive {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    #test-drive .fs-1 .hh-badge {
        height: 38px;
        padding: 0 8px 4px 8px;
    }

    #offer .fs-2 {
        margin-bottom: 32px;
    }

    .offer-item .offer-title:before {
        max-width: 250px;
        height: 100px;
    }

    #offer .row {
        --bs-gutter-y: 40px;
    }

    #start-test-2 .fs-1 .hh-badge {
        height: 38px;
        padding: 0 8px 4px 8px;
    }


    .how-to-wrapper {
        padding-bottom: 55vw;
    }


    .how-to-wrapper .products.product-1 {
        top: unset;
        bottom: 0;
        width: 48%;
        left: -12%;
    }

    .how-to-wrapper .products.product-2 {
        top: unset;
        bottom: 0;
        width: 48%;
        left: 61%;
    }

    .how-to-wrapper .products.product-3 {
        top: unset;
        bottom: 0;
        width: 48%;
        left: 22%;
    }

    .quiz {
        padding-top: 32px;
    }

    .quiz-question {
        font-size: 24px;
        margin-bottom: 50px;
    }

    .quiz-answers {
        gap: 16px;
        margin: 0 auto 40px auto;
        font-size: 16px;
    }

    #start-test-2 .fs-1 .hh-badge:before {
        width: 60px;
        height: 60px;
        left: 100%;
        top: -5px;
        rotate: 0deg;
    }

    footer .links a, footer .links .copyright {
        font-size: 10px;
        line-height: 1;
    }

    footer .links {
        gap: 8px;
    }

    .copyright br {
        display: none;
    }

    .slider-text {
        font-size: 14px;
    }

    .slider-item {
        border-radius: 20px;
    }

    .slider-container {
        padding: 20px 16px;
    }

    #quiz .btn.btn-close {
        padding: .5rem;
    }

}

/* iPhone 5S/SE */
@media (max-width: 350px) {
}