/* USER VARIABLES SECTION */
:root {
    --accent: #1eafe4;
    --index: calc(1vw + 1vh);
    --radius: 15rem;
    --gap: 30rem;
}

/* FONTS LOAD SECTION */
@font-face {
    src: url("/fonts/Daikon-Regular.woff2") format("woff2");
    font-family: "daikon-r";
    font-weight: 400;
    font-style: normal;
}

@font-face {
    src: url("/fonts/Daikon-Bold.woff2") format("woff2");
    font-family: "daikon-b";
}

@font-face {
    src: url("/fonts/Daikon-Medium.woff2") format("woff2");
    font-family: "daikon-m";
}

@font-face {
    src: url("/fonts/Daikon-Italic.woff2") format("woff2");
    font-family: "daikon-i";
}

/* GENERAL CSS SETTINGS */
* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) #eee;
    -webkit-tap-highlight-color: transparent;
}

*::-webkit-scrollbar {
    height: 6rem;
    width: 6rem;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 5rem;
}

::placeholder {
    color: #B2BDCC;
}

::selection {
    background-color: var(--accent);
    color: #fff;
}

button {
    border: none;
    outline: none;
    font-family: 'daikon-b', sans-serif;
    font-size: 16rem;
    background-color: transparent;
}

button:disabled {
    pointer-events: none;
    opacity: .6;
    cursor: no-drop;
}

input[type="number"] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    display: none;
}

input, textarea {
    width: 100%;
    outline: none;
    background-color: #3B4F5A;
    border-radius: var(--radius);
    color: #fff;
    height: 60rem;
    font-size: 18rem;
    font-weight: 400;
    font-style: normal;
    border: 2rem solid transparent;
    box-shadow: none;
    padding: 10rem 25rem;
    transition: border .4s ease;
    font-family: 'daikon-r', sans-serif;
}

textarea {
    height: 100rem;
    resize: none;
}

html {
    font-size: calc(1vw / 19);
}

body {
    font-family: 'daikon-r', sans-serif;
    font-size: 16rem;
    line-height: normal;
    color: #fff;
    position: relative;
    overflow-x: hidden;
    background-color: #fff;
}

body.overflow {
    overflow: hidden;
    position: relative;
}

img {
    max-width: 100%;
    pointer-events: none;
    user-select: none;
    object-fit: cover;
    object-position: center;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'daikon-b', sans-serif;
    margin-bottom: 30rem;
}

h1 {
    font-size: 56rem;
}

h2 {
    font-size: 56rem;
    line-height: 112%;
}

h3 {
    font-size: 32rem;
}

a {
    color: #fff;
    display: inline-block;
    transition: color .4s ease;
    text-decoration: none;
    user-select: none;
}

b, strong, .bold {
    font-family: 'daikon-b', sans-serif;
}

p:not(:last-child) {
    margin-bottom: 20rem;
}

svg {
    transition: stroke .4s ease, fill .4s ease;
    flex: 0 0 auto;
    fill-rule: evenodd;
    clip-rule: evenodd;
}

/* USER STYLES */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: max-content;
    height: 66rem;
    padding: 10rem 35rem;
    background-color: var(--accent);
    color: #fff;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 18rem;
    font-family: 'daikon-m', sans-serif;
    transition: background-color .4s ease;
}

.btn.min {
    height: 50rem;
    padding: 10rem 30rem;
}

.btn.link::after {
    content: '';
    background-image: url(../icons/arrow.svg);
    width: 25rem;
    height: 25rem;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 40rem;
}

.btn-more {
    text-decoration: underline;
    color: var(--accent);
    width: max-content;
    margin: 20rem auto;
    cursor: pointer;
    display: none;
}

.header {
    padding: 35rem 0;
    transition: background-color .4s ease, padding .4s ease;
    z-index: 100;
    top: 0;
}

.header.fixed {
    background-color: #181E22;
    padding: 10rem 0;
    position: sticky;
}

.header.bg {
    transition: none;
    background-color: #181E22;
    padding: 10rem 0;
}

.header.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
}

.header__title {
    font-size: 46rem;
    font-family: 'daikon-b', sans-serif;
}

.header__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40rem;
    row-gap: 10rem;
}

.container {
    max-width: 1300rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 15rem;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.linear-1 {
    background: linear-gradient(247.74deg, #445B67 8.57%, #191F23 86.92%);
}

.linear-2 {
    background: linear-gradient(244.86deg, #445B67 12.3%, #191F23 87.45%);
}

.linear-3 {
    background: linear-gradient(245.8deg, #191F23 11.1%, #445B67 87.28%);
}

.block {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
    padding: 80rem 0;
    position: relative;
}

.block__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: 30rem;
}

.block__heading .block__title {
    margin-bottom: 0;
}

.block__title, .block__title.white span {
    color: var(--accent);
}

.block__title.white {
    color: #fff;
}

.block__description {
    color: #ffffff;
}

.block__why-title span {
    color: var(--accent);
}

.block--primary h1 {
    font-size: 105rem;
    margin-bottom: 0;
}

.block--primary .block__container, .block--usage .block__container {
    display: flex;
    align-items: center;
    height: 100%;
    width: 58%;
    margin-left: auto;
    padding-left: 40rem;
}

.block--usage .block__content {
    position: relative;
    z-index: 1;
}

.block--primary .block__description {
    line-height: 32rem;
    font-size: 20rem;
    width: 85%;
}

.block--primary .block__why-title {
    margin-top: 50rem;
}

.block--primary .block__image, .block--usage .block__image {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1088rem;
    height: 888rem;
}

.block--primary .block__image img, .block--usage .block__image img {
    width: 100%;
    height: 100%;
}

.block__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.block__feature {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block__feature-icon {
    width: 80rem;
    height: 80rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15rem;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 50%;
    padding: 15rem;
}

.block__feature-icon img {
    max-width: 45rem;
    max-height: 45rem;
    width: 100%;
    height: 100%;
}

.block--secondary .block__container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.block--secondary .block__title {
    margin-bottom: 70rem;
}

.block__components {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.block__component.expanded .block__component-list{
    display: grid;
}

.block__component-more {
    display: none;
}

.block__component-icon {
    max-width: 105rem;
    max-height: 105rem;
    width: 100%;
    height: 100%;
    margin: 0 auto 30rem;
}

.block__component-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.block__component-title {
    font-size: 26rem;
    font-family: 'daikon-b', sans-serif;
    text-align: center;
}

.block__component-subtitle {
    font-size: 20rem;
    font-family: 'daikon-b', sans-serif;
    text-align: center;
    margin: 10rem 0 20rem;
}

.block__component-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10rem;
}

.block__component-item {
    font-size: 13rem;
    background-color: rgba(255, 255, 255, .1);
    padding: 10rem;
    border-radius: var(--radius);
    text-align: center;
}

.block--tertiary .block__title {
    margin-bottom: 100rem;
}

.block--tertiary .block__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.block__steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 100rem;
    counter-reset: item-counter;
    position: relative;
    z-index: 1;
}

.block__steps::after {
    content: '';
    position: absolute;
    top: -20rem;
    left: 39%;
    transform: translateX(-50%);
    width: 52%;
    height: 100%;
    background-image: url(../icons/way.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}

.block__step {
    display: flex;
    align-items: center;
    gap: var(--gap);
    position: relative;
}

.block__step::after {
    content: counter(item-counter, decimal-leading-zero);
    counter-increment: item-counter;
    position: absolute;
    top: 30rem;
    left: 150rem;
    font-size: 32rem;
    z-index: 1;
    width: 56rem;
    height: 56rem;
    border-radius: 50%;
    background-color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'daikon-b', sans-serif;
}

.block__step-icon {
    width: 230rem;
    height: 230rem;
    position: relative;
}

.block__step-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150rem;
    height: 150rem;
    border-radius: 50%;
    z-index: -1;
    background: linear-gradient(90deg, #7CD7F8 0%, #0DA7E0 100%);
    filter: blur(50rem);

}

.block__step-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.block__step-info {
    flex: 0 0 auto;
    width: 280rem;
}

.block__step-title {
    font-size: 24rem;
    font-family: 'daikon-b', sans-serif;
    margin-bottom: 20rem;
}

.block--usage {
    overflow: hidden;
}

.block--usage .block__content {
    margin-top: 30rem;
}

.block--usage .block__subtitle {
    font-size: 24rem;
}

.block--usage .block__image {
    width: 890rem;
    height: 700rem;
    left: 5%;
    top: calc(100rem + 50%);
}

.block__dose-note {
    color: var(--accent);
    font-family: 'daikon-i', sans-serif;
    margin-bottom: 20rem;
    width: 80%;
}

.block__table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--radius);
    overflow: hidden;
}

.block__table th,
.block__table td {
    text-align: center;
    font-size: 18rem;
}

.block__table th {
    font-family: 'daikon-b', sans-serif;
    text-transform: uppercase;
    background-color: #253138;
    padding: 25rem;
}

.block__table td {
    background-color: #3B4F5A;
    font-family: 'daikon-m', sans-serif;
    padding: 18rem 25rem;
}

.block__table tbody tr:not(:first-child) {
    border-top: 2rem solid #586B76;
}

.block__icon-drink {
    vertical-align: middle;
}

.block__icon-drink::before {
    content: '';
    display: inline-block;
    background-image: url(../icons/wine.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20rem;
    height: 32rem;
    margin-left: 6rem;
}

.block__note {
    font-size: 13rem;
    line-height: 152%;
    width: 80%;
    margin: 30rem 0 40rem;
}

.block--hangover {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.block--hangover .block__text {
    padding-left: 50rem;
}

.block--hangover .block__description {
    background-color: rgba(255, 255, 255, .1);
    font-size: 22rem;
    line-height: 164%;
    padding: 45rem 35rem;
    border-radius: var(--radius);
    margin-bottom: 50rem;
    margin-left: -50rem;
    width: 90%;
}

.block--hangover .block__description-elem {
    width: 56%;
}

.block__image--person {
    position: absolute;
    right: 14%;
    bottom: -10rem;
    width: 680rem;
}

.block__image--person img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.block--oils .block__description {
    font-size: 20rem;
    line-height: 160%;
}

.block--oils__wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: var(--gap);
}

.block__bottles {
    margin-bottom: 70rem;
}

.block__bottles img {
    width: 100%;
    height: 226rem;
}

.block__product {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.block__product .block__description {
    margin-left: 45%;
}

.block__product-image {
    position: absolute;
    left: -80rem;
    bottom: -40rem;
    height: 350rem;
}

.block__product-image img {
    width: 100%;
    height: 100%;
}

.block__product-diagram-text {
    font-size: 13rem;
    font-family: 'daikon-i', sans-serif;
    margin-bottom: 15rem;
    text-align: center;
}

.block__product-diagram {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.block__product-diagram img {
    width: 100%;
    height: 240rem;
}

.block--efficacy .block__subtitle {
    margin-bottom: 15rem;
}

.block--efficacy .block__description {
    font-size: 22rem;
}

.block--efficacy .btn {
    margin: 50rem auto 0;
}

.block__charts {
    display: flex;
    margin-top: 30rem;
    gap: var(--gap);
}

.block__charts-text {
    font-size: 18rem;
    margin-bottom: 30rem;
    line-height: 152%;
}

.block__charts-item {
    display: flex;
    flex-direction: column;
}

.block__charts-item.full {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.block__charts-item.full .block__charts-text {
    width: 80%;
}

.block__charts-item.full .block__charts-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.block__charts-wrap {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chart {
    background-color: #191F23;
    border-radius: var(--radius);
    padding: 15rem 10rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chart__image {
    margin-top: auto;
}

.chart__image img {
    width: 100%;
    height: 100%;
}

.chart__caption {
    margin-bottom: 20rem;
    font-family: 'daikon-m', sans-serif;
    text-align: center;
}

.block--articles {
    display: flex;
    align-items: center;
}

.articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}

.article {
    background-color: rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30rem;
}

.article__image {
    border-radius: var(--radius) var(--radius) 0 0;
    height: 230rem;
    margin: -30rem -30rem 30rem;
}

.article__image img {
    width: 100%;
    height: 100%;
}

.article__title {
    font-size: 20rem;
    font-family: 'daikon-b', sans-serif;
    margin-bottom: 14rem;
    width: 90%;
}

.article__text {
    margin-bottom: 40rem;
}

.article__link {
    font-size: 18rem;
    font-family: 'daikon-m', sans-serif;
    color: var(--accent);
    text-decoration: underline;
    margin-top: auto;
    width: max-content;
}

.block-show {
    padding: 80rem 0;
}

.block-show .block__description {
    line-height: 152%;
}

.block-show .block__description ol, .block-show .block__description ul {
    padding-left: 15rem;
    margin-bottom: 20rem;
}

.block-show .block__description li {
    margin-bottom: 5rem;
}

.block-show .block__description img {
    border-radius: var(--radius);
    width: 690rem;
    height: 410rem;
}

.faq {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}

.faq__item {
    position: relative;
}

.faq__item-block {
    background-color: #3B4F5A;
    border-radius: var(--radius);
    padding: 25rem;
    transition: background-color .4s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.faq__item.expanded .faq__item-block {
    background-color: #fff;
    color: #000;
}

.faq__item.expanded .faq__answer {
    display: block;
}

.faq__question {
    text-transform: uppercase;
    font-size: 18rem;
    font-family: 'daikon-m', sans-serif;
    transition: color .4s ease;
    margin-bottom: 15rem;
}

.faq__answer {
    width: 100%;
    display: none;
    background-color: var(--accent);
    padding: 25rem;
    border-radius: var(--radius);
    position: absolute;
    z-index: 1;
    max-height: 300rem;
    overflow-y: auto;
}

.faq__button {
    cursor: pointer;
    width: max-content;
    color: var(--accent);
    font-size: 18rem;
    font-family: 'daikon-m', sans-serif;
    margin-top: auto;
}

.footer {
    background-color: #181E22;
    padding: 60rem 0 40rem;
    margin-top: auto;
}

.footer__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rem;
    gap: var(--gap);
}

.footer__title {
    font-size: 46rem;
    font-family: 'daikon-b', sans-serif;
}

.footer__nav {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40rem;
    row-gap: 10rem;
}

.footer__contact {
    font-size: 13rem;
}

.footer__note {
    margin-top: 50rem;
    text-align: center;
    text-transform: uppercase;
}

/* Modal */
.modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    background: rgba(106, 106, 106, .9);
    z-index: 9999;
    transition: visibility 0s .25s, opacity .25s;
}

.modal.active {
    visibility: visible;
    opacity: 1;
}

.modal__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.modal__body {
    position: relative;
    margin: 0 24rem;
    max-height: 100%;
    min-width: 1012rem;
    opacity: 0;
    transition: opacity 0s .25s, opacity .25s;
}

.modal.show .modal__body {
    opacity: 1;
    transition: opacity 0s 0s, opacity .25s;
}

.modal__inner {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: var(--radius);
    padding: 70rem;
    background-color: #181E22;
}

.modal__title {
    margin-bottom: 15rem;
}

.modal__text {
    font-size: 22rem;
    margin-bottom: 30rem;
}

.form-group {
    display: flex;
    gap: var(--gap);
}

.form-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.form-policy a {
    text-decoration: underline;
}

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

.d-none {
    display: none;
}




.article {
    margin: 0 auto; 
    width: 50%
}

@media (max-width: 575.98px) {
.article {
    margin: 0 auto; 
    width: 100%
}

}

.page-container ul {
	padding-left: 18px;
}



.choose-socials__inner {
	background-color: rgba(255, 255, 255, .1);
    font-size: 22rem;
    padding: 25rem 35rem;
    border-radius: var(--radius);
    margin: 50rem 0;
    width: 35%;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
	.choose-socials__inner {
		width: 60%;
	}
}


@media (max-width: 768px) {
	.choose-socials__inner {
		width: 80%;
	}
}

@media (max-width: 580px) {
	.choose-socials__inner {
		width: 100%;
	}
}