@font-face {
    font-family: 'TT Chocolates';
    src: url('../fonts/TTChocolates-Bold.eot');
    src: url('../fonts/TTChocolates-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTChocolates-Bold.woff2') format('woff2'),
    url('../fonts/TTChocolates-Bold.woff') format('woff'),
    url('../fonts/TTChocolates-Bold.ttf') format('truetype'),
    url('../fonts/TTChocolates-Bold.svg#TTChocolates-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates';
    src: url('../fonts/TTChocolates-Regular.eot');
    src: url('../fonts/TTChocolates-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTChocolates-Regular.woff2') format('woff2'),
    url('../fonts/TTChocolates-Regular.woff') format('woff'),
    url('../fonts/TTChocolates-Regular.ttf') format('truetype'),
    url('../fonts/TTChocolates-Regular.svg#TTChocolates-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    font-size: max(0.1px, calc(100vw / 1920));
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.is-gate-active {
    font-size: min(calc(100vh / 1440), calc(100vw / 2560));
    overflow: hidden;
}

.is-gate-active .gate {
    display: flex;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

body {
    font-family: 'TT Chocolates';
}

.gate {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background-image: url("../images/gate-bg.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 90rem 156rem 0;
}

.gate__content {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: white;
    transform: translateY(-18%);
}

.gate__18 {
    display: flex;
}

.gate__18 img {
    width: 130rem;
    /*width: 173px;*/
}

.gate__text {
    margin-top: 50rem;
    font-size: 42rem;
    line-height: 100%;
    /*margin-top: 66px;*/
    /*font-size: 56px;*/
}

.gate__agree {
    margin-top: 80rem;
    font-size: 41rem;
    line-height: 100%;
    font-weight: bold;
    /*margin-top: 106px;*/
    /*font-size: 54px;*/
}

.gate__buttons {
    margin-top: 40rem;
    /*margin-top: 53px;*/
    display: flex;
    gap: 150rem;
    /*gap: 200px;*/
}

.gate__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rem;
    width: 250rem;
    font-size: 46rem;
    /*height: 106px;*/
    /*width: 333px;*/
    /*font-size: 61px;*/
    font-weight: bold;
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 22rem;
    /*border-radius: 30px;*/
    cursor: pointer;
    background:
            linear-gradient(to top right,
            #CACACA 0%,
            #B2B1B1 50%,
            #727172 100%),
            linear-gradient(to bottom left,
            #727172 0%,
            #B2B1B1 50%,
            #CACACA 100%);
    background-clip: padding-box, border-box;
    border: 3px solid transparent;
    position: relative;
    box-shadow: 0 0 15rem 7rem rgba(255, 255, 255, 0.3);
    /*box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.3);*/
    outline: none;
    transition: all 0.3s;
}

.gate__btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15rem 7rem rgba(255, 255, 255, 0.03);
}

.root {
    display: flex;
    flex-direction: column;
}

.top {
    background-image: url("../images/top-bg.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 1274rem;

    padding: 90rem 156rem 0;
}

.top__wrapper {
    max-width: calc(100% - 300rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    z-index: 2;
}

.top__logo img {
    width: min(600rem , 450px);
}

.top__title {
    margin-top: min(100rem , 75px);
    margin-bottom: 0;
    font-size: clamp(16px, 88rem, 66px);
    font-weight: bold;
    line-height: 1.12;
    color: white;
    text-align: center;
}

.top__btn {
    margin-top: 58rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(16px, 75rem, 40px);
    height: clamp(30px, 108rem, 70px);
    font-size: clamp(16px, 70rem, 36px);
    font-weight: bold;
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 300rem;
    cursor: pointer;
    background:
            linear-gradient(to top right, #D1393E, #941F13),
            linear-gradient(to bottom left, #941F13, #D1393E);
    background-clip: padding-box, border-box;
    border: 3px solid transparent;
    position: relative;
    box-shadow: 0 0 30rem 15rem rgba(255, 255, 255, 0.3);
    width: max-content;
    transition: all 0.3s;
}

.top__btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15rem 7rem rgba(255, 255, 255, 0.03);
}

.content {
    display: flex;
    flex-direction: column;
    margin-top: -405rem;
    padding-bottom: 283rem;
    background-image: url("../images/products-bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
}

.years {
    display: flex;
    align-items: center;
    padding-top: 402rem;
    padding-bottom: 380rem;
    height: 1531rem;
    margin: auto;
    font-size: min(80rem, 75px);
    line-height: 0.927;
    letter-spacing: -0.013em;
    text-align: center;
    color: white;
}

.products {
    display: flex;
    flex-direction: column;
    gap: 180rem;
    padding: 0 65rem 0;
    margin-top: 85rem;
}

.product {
    display: grid;
    grid-template-columns: 960rem auto;
    align-items: center;
    gap: 50rem;
}

.product--reverse {
    grid-template-columns: auto 960rem;
}

.product--reverse .product__img img {
    left: auto;
    right: -27rem;
}

.product__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(80rem, 60px);
    transform: translateY(-22%);
}

.product__name {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: min(40rem, 17px) min(40rem, 17px);
    font-size: min(87rem, 37px);
    font-weight: bold;
    line-height: 0.85;
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 300rem;
    cursor: pointer;
    background:
            linear-gradient(to top right, #D1393E, #941F13),
            linear-gradient(to bottom left, #941F13, #D1393E);
    background-clip: padding-box, border-box;
    border: 3px solid transparent;
    position: relative;
    max-width: 440px;
}

.product__desc {
    font-size: min(85rem, 40px);
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    color: black;
}

.product__img {
    position: relative;
    height: 1250rem;
}

.product__img img {
    position: absolute;
    left: -27rem;
    top: 50%;
    transform: translateY(-50%);
    width: min(860rem, 368px);
}

.long {
    margin-top: 575rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1200rem;
}

.long__content {
    display: grid;
    grid-template-columns: 800rem 840rem;
    justify-content: end;
    align-items: center;
    width: 100%;
    color: white;
    text-align: center;
}

.long__content h3 {
    font-size: min(69rem, 42px);
    line-height: 100%;
    letter-spacing: -0.03em;
}

.long__content h4 {
    font-size: min(67rem, 40px);
    line-height: 90%;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.long__content ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: min(10rem, 8px);
    margin-top: min(80rem, 50px);
}

.long__desc {
    transform: translateY(22%);
}

.long__content ul li {
    font-size: min(46rem, 26px);
    line-height: 100%;
}

.long__pack {
    height: min(1200rem, 900px);
    position: relative;
}

.long__pack img {
    position: absolute;
    left: max(-161rem, -55px);
    top: 50%;
    transform: translateY(-43%);
    width: min(990rem, 460px);
}

.footer {
    display: flex;
    flex-direction: column;
    gap: 95rem;
    background: #686868;
    padding: 220rem 90rem;
    color: white;
}

.footer a {
    text-decoration: underline;
    cursor: pointer;
}

.footer a:hover {
    text-decoration: none;
}

.footer__section {
    display: grid;
    grid-template-columns: max(100px, 290rem) auto;
    gap: 36rem;
}

.footer__logo {
    display: flex;
}

.footer__logo img {
    width: max(80px, 260rem);
    height: auto;
}

.footer__aside {
    display: flex;
    flex-direction: column;
    gap: 30rem;
}

.footer__bside p {
    font-size: max(16px, 44rem);
    line-height: 105%;
}

.footer__18 {
    display: flex;
}

.footer__18 img {
    width: 160rem;
    height: auto;
}

.footer__mail {
    display: flex;
    flex-direction: column;
    gap: 25rem;
}

.footer__mail img {
    width: 52rem;
}

.footer__mail span {
    font-size: max(12px, 36rem);
    text-transform: uppercase;
}

.footer__bside ul {
    display: flex;
    flex-direction: column;
    gap: 30rem;
    list-style: none;
    font-size: max(14px, 36rem);
    line-height: 100%;
}

@media screen and (max-width: 1024px) {
    .is-gate-active {
        font-size: 0.45px;
    }
}