/* Reset and base styles  */
* {
    padding: 0px;
    margin: 0px;
    border: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Links */

a, a:link, a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* Common */

aside, nav, footer, header, section, main {
    display: block;
}

h1, h2, h3, h4, h5, h6, p {
    font-size: inherit;
    font-weight: inherit;
}

ul, ul li {
    list-style: none;
}

img {
    vertical-align: top;
}

img, svg {
    max-width: 100%;
    height: auto;
}

address {
    font-style: normal;
}

/* Form */

input, textarea, button, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
}

input::-ms-clear {
    display: none;
}

button, input[type="submit"] {
    display: inline-block;
    box-shadow: none;
    background-color: transparent;
    background: none;
    cursor: pointer;
}

input:focus, input:active,
button:focus, button:active {
    outline: none;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

label {
    cursor: pointer;
}

legend {
    display: block;
}

input[type='file'] {
    max-width: 100%;
}

@font-face {
    font-family: 'Circe-Bold';
    src: url("./fonts/circe-bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circe-Regular';
    src: url("./fonts/Circe-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    fluid1024: clamp(700px, calc(700px + (1000 - 700) * ((100vw - 1024px) / (1440 - 1024))), 1000px);
}


body {
    overflow-x: hidden;
    font-family: 'Circe-Bold', sans-serif;
    color: #000;
    font-size: 20px;
    background: #180606;
}

body.active {
    overflow: hidden;
}

.container {
    max-width: 1920px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 clamp(54px, calc(54px + (120 - 54) * ((100vw - 1024px) / (1440 - 1024))), 120px);
}

.title {
    font-weight: 700;
    text-transform: uppercase;
    color: #ffe6be;
    text-align: center;
}

.line {
    background-image: url("./images/line.png");
    width: 100%;
    background-size: cover;
    height: clamp(150px, calc(150px + (280 - 150) * ((100vw - 1024px) / (1920 - 1024))), 280px);
}


.header {
    position: relative;
}

.header.active {
    z-index: 2;
    width: 100%;
    height: 100vh;
}


.header__menu.active {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 200px;
}

.header__content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 42px 0px;
}

.header__list {
    display: flex;
    gap: clamp(20px, calc(20px + (50 - 20) * ((100vw - 1024px) / (1440 - 1024))), 50px);;
}

.header__list.active {
    gap: 40px;
    align-items: center;
    flex-direction: column;
}

.header__list.active .header__list-item {
    display: block;
    width: max-content;
    font-size: 20px;
}

.header__list-item {
    position: relative;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    font-size: 15px;
    text-transform: uppercase;
}

.header__button-profile {
    position: absolute;
    top: 30px;
    right: clamp(25px, calc(25px + (142 - 25) * ((100vw - 1024px) / (1440 - 1024))), 142px);;
    display: flex;
    align-items: center;
    gap: 3px;
    border: 2px solid #d0aa6f;
    border-radius: 60px;
    padding: 8px 19px;
       z-index: 10;
transition: all 300ms ease-in-out;
    span {
        margin-bottom: -4px;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.5;
        text-transform: uppercase;
        color: #d0aa6f;
        text-align: center;
    }
}
.header__button-profile:hover {
    transform: scale(1.04);
}
.header__button-profile.active {
    width: max-content;
    display: flex;
    position: absolute;
    top: 100px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);

    span {
        font-size: 14px;
    }
}


.active .hero__info{
  padding-top:50px ;
}
.hero {
    height: clamp(664px, calc(664px + (1094 - 664) * ((100vw - 1024px) / (1920 - 1024))), 1094px);
    margin-top: -105px;
    background-image: url("./images/fon1.jpg");
    background-size: cover;
    background-position: center;
}

.hero.active {
    background-image: none;
}

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(219px, calc(219px + (430 - 219) * ((100vw - 1024px) / (1920 - 1024))), 430px);
    background: url("./images/fon2.png") no-repeat center / cover;
    }

.hero__content {
    position: relative;
    padding-top: 70px;
}

.hero__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 38px;

    a:first-child {
        width: clamp(130px, calc(130px + (212 - 130) * ((100vw - 1024px) / (1920 - 1024))), 212px);
        height: clamp(62px, calc(62px + (120 - 62) * ((100vw - 1024px) / (1920 - 1024))), 120px);
    }

    a:last-child {
        padding-bottom: 32px;
        width: clamp(179px, calc(179px + (300 - 179) * ((100vw - 1024px) / (1920 - 1024))), 300px);
        height: clamp(36px, calc(36px + (63 - 36) * ((100vw - 1024px) / (1920 - 1024))), 63px);
    }
}

.hero__inner.active {
    z-index: 2;
    align-items: center;
    margin-top: -67px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
}

.hero__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: clamp(619px, calc(619px + (1020 - 619) * ((100vw - 1024px) / (1920 - 1024))), 1020px);
}

.hero__info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 31px;
    margin-top: 40px;
}

.hero__info-subtitle {
    text-align: center;
    font-weight: 400;
    font-size: clamp(18px, calc(18px + (30 - 18) * ((100vw - 1024px) / (1920 - 1024))), 30px);
    line-height: 0.6;
    letter-spacing: 0.07em;
    color: #fff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

}

.hero__info-subtitle--bold {
    max-width: clamp(554px, calc(554px + (847 - 554) * ((100vw - 1024px) / (1920 - 1024))), 847px);
    font-weight: 700;
    font-size: clamp(45px, calc(45px + (70 - 45) * ((100vw - 1024px) / (1920 - 1024))), 70px);
    line-height: clamp(58px, calc(58px + (91 - 58) * ((100vw - 1024px) / (1920 - 1024))), 91px);;
    text-transform: uppercase;
    color: #21100e;
    text-align: center;
}

.hero-image--coffee {
    width: clamp(221px, calc(221px + (409 - 221) * ((100vw - 1024px) / (1920 - 1024))), 409px);
    height: clamp(320px, calc(320px + (594 - 320) * ((100vw - 1024px) / (1920 - 1024))), 594px);
    position: absolute;
    left: clamp(29px, calc(29px + (133 - 29) * ((100vw - 1024px) / (1920 - 1024))), 133px);
    bottom: -52px;
}

.hero-image--shar {
    width: clamp(198px, calc(198px + (337 - 198) * ((100vw - 1024px) / (1920 - 1024))), 337px);
    height: clamp(263px, calc(263px + (448 - 263) * ((100vw - 1024px) / (1920 - 1024))), 448px);
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.hero__mechanic {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero__mechanic-inner {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    max-width: clamp(549px, calc(549px + (990 - 549) * ((100vw - 1024px) / (1920 - 1024))), 990px);;
    width: 100%;
}

.hero__mechanic-numbers {
    position: relative;
    display: flex;
    justify-content: space-between;
    max-width: clamp(332px, calc(332px + (719 - 332) * ((100vw - 1024px) / (1920 - 1024))), 719px);;
    width: 100%;
    /* cursor: ; */
}

.hero__mechanic-numbers::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(278px, calc(278px + (617 - 278) * ((100vw - 1024px) / (1920 - 1024))), 617px);;
    height: 3px;
    background-color: #E4C9B5;
}

.hero__mechanic-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(27px, calc(27px + (51 - 27) * ((100vw - 1024px) / (1920 - 1024))), 51px);
    height: clamp(27px, calc(27px + (51 - 27) * ((100vw - 1024px) / (1920 - 1024))), 51px);;
    border-radius: 50%;
    background-color: #d2a76e;
    color: #fff;
    font-weight: 600;
    font-size: clamp(15px, calc(15px + (30 - 15) * ((100vw - 1024px) / (1920 - 1024))), 30px);;
    letter-spacing: 0.03em;
}

.hero__mechanic-number--hidden {
    display: none;
}

.hero__mechanic-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hero__mechanic-title {
    font-weight: 700;
    font-size: clamp(18px, calc(18px + (32 - 18) * ((100vw - 1024px) / (1920 - 1024))), 32px);
    line-height: clamp(22px, calc(22px + (38 - 22) * ((100vw - 1024px) / (1920 - 1024))), 38px);
    text-transform: uppercase;
    color: #fff;
}

.hero__mechanic-subtitle {
    font-family: 'Circe-Regular', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, calc(14px + (20 - 14) * ((100vw - 1024px) / (1920 - 1024))), 20px);
    line-height: clamp(17px, calc(17px + (24 - 17) * ((100vw - 1024px) / (1920 - 1024))), 24px);
    color: #d2a76e;
    max-width: 428px;
    text-align: center;
}

.hero__mechanic-button {
    margin-top: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 90px;
    width: 100%;
    padding: 17px 8px 17px clamp(20px, calc(20px + (24 - 20) * ((100vw - 1024px) / (1920 - 1024))), 24px);
    max-width: clamp(251px, calc(251px + (323 - 251) * ((100vw - 1024px) / (1920 - 1024))), 323px);
    height: clamp(42px, calc(42px + (52 - 42) * ((100vw - 1024px) / (1920 - 1024))), 52px);
    font-weight: 700;
    background: linear-gradient(90deg, #542110 0%, #ce6730 100%);
    font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 1024px) / (1920 - 1024))), 18px);
    line-height: clamp(14px, calc(14px + (18 - 14) * ((100vw - 1024px) / (1920 - 1024))), 18px);;;
    text-transform: uppercase;
    color: #fbd181;

    transition: all 300ms ease-in-out;
    img {
        width: clamp(30px, calc(30px + (40 - 30) * ((100vw - 1024px) / (1920 - 1024))), 40px);
        height: clamp(30px, calc(30px + (40 - 30) * ((100vw - 1024px) / (1920 - 1024))), 40px);
    }
}

.hero__mechanic-button:hover{
 transform: scale(1.0404);
}


.burger {
    z-index: 2;
    display: none;
    position: absolute;
    right: 15px;
    top: 44px;
    height: 32px;
}

.burger-line {
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
    background-color: #fff;
}

.burger-line::after, .burger-line::before {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: rotate 0.3s ease-in-out, top 0.3s ease-in-out, bottom 0.3s ease-in-out;
}

.burger-line::after {
    top: 8px;
}

.burger-line::before {
    bottom: 8px;
}

.burger-line.active {
    background-color: transparent;
}

.burger-line.active::after {
    top: 0;
    rotate: -45deg;
}

.burger-line.active::before {
    bottom: 0;
    rotate: 45deg;
}


.prizes {
    margin-top: clamp(160px, calc(160px + (320 - 160) * ((100vw - 768px) / (1920 - 768))), 320px);
    background: #180606;
}

.prizes__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.prizes__title {
    font-size: clamp(40px, calc(40px + (50 - 40) * ((100vw - 1024px) / (1920 - 1024))), 50px);
    line-height: clamp(52px, calc(52px + (65 - 52) * ((100vw - 1024px) / (1920 - 1024))), 65px);
}

.prizes__cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(34px, calc(34px + (140 - 34) * ((100vw - 1024px) / (1920 - 1024))), 140px);
    margin-top: clamp(40px, calc(40px + (50 - 40) * ((100vw - 1024px) / (1920 - 1024))), 50px);
}

.prizes__card {
    position: relative;
    z-index: 2;
    background: #412d26;
    border-radius: 20px;
    padding: clamp(20px, calc(20px + (25 - 20) * ((100vw - 375px) / (1024 - 375))), 25px);
}

.prizes__card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: clamp(370px, calc(370px + (400 - 370) * ((100vw - 1024px) / (1920 - 1024))), 400px);
    width: clamp(420px, calc(420px + (470 - 420) * ((100vw - 1024px) / (1920 - 1024))), 470px);
    border-radius: 20px;
    background-color: #603f2f;
    background-image: url("./images/shadow.png");
    background-position: center center;
}

.prizes__card-images {
    display: flex;
    align-items: flex-end;
}

.prizes__card-quantity {
    margin-left: -50px;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 2px solid #f4e9db;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    background: #d2a76e;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.03em;
    color: #fff;

    span {
        font-size: 10px;
    }

    h3 {
        font-size: 20px;
    }
}

.prizes__card-name {
    margin-top: 40px;
    font-size: clamp(24px, calc(24px + (26 - 24) * ((100vw - 1024px) / (1920 - 1024))), 26px);
    line-height: clamp(31px, calc(31px + (34 - 31) * ((100vw - 1024px) / (1920 - 1024))), 34px);
}


.main-prize {
    margin-top: clamp(50px, calc(50px + (90 - 50) * ((100vw - 1024px) / (1920 - 1024))), 90px);
}

.main-prize__title {
    font-size: clamp(30px, calc(30px + (35 - 30) * ((100vw - 1024px) / (1920 - 1024))), 35px);
    line-height: clamp(39px, calc(39px + (45 - 39) * ((100vw - 1024px) / (1920 - 1024))), 45px);
}

.main-prize__card-body {
    justify-content: flex-end;
    position: relative;
    width: clamp(924px, calc(924px + (1130 - 924) * ((100vw - 1024px) / (1920 - 1024))), 1130px);
    height: clamp(370px, calc(370px + (400 - 370) * ((100vw - 1024px) / (1920 - 1024))), 400px);

    img:first-child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}

.prizes__card--big {
    position: relative;
}

.main-prize__card-image {
    width: clamp(318px, calc(318px + (386 - 318) * ((100vw - 1024px) / (1920 - 1024))), 386px);
    height: clamp(201px, calc(201px + (245 - 201) * ((100vw - 1024px) / (1920 - 1024))), 245px);
}

.main-prize__card--shar {
    position: absolute;
    top: 7px;
    left: 8px;
    width: clamp(159px, calc(159px + (168 - 159) * ((100vw - 1024px) / (1920 - 1024))), 168px);
    height: clamp(207px, calc(207px + (218 - 207) * ((100vw - 1024px) / (1920 - 1024))), 218px);
}

.main-prize__card--shar-2 {
    position: absolute;
    top: 50px;
    right: clamp(114px, calc(114px + (158 - 114) * ((100vw - 1024px) / (1920 - 1024))), 158px);

    width: clamp(164px, calc(164px + (180 - 164) * ((100vw - 1024px) / (1920 - 1024))), 180px);
    height: clamp(214px, calc(214px + (234 - 214) * ((100vw - 1024px) / (1920 - 1024))), 234px);
}

.main-prize__card--shar-3 {
    position: absolute;
    top: 9px;
    right: 14px;
    width: 82px;
    height: 103px;
}

.main-prize__card--shar-4 {
    position: absolute;

    bottom: clamp(51px, calc(51px + (81 - 51) * ((100vw - 1024px) / (1920 - 1024))), 81px);
    left: clamp(154px, calc(154px + (200 - 154) * ((100vw - 1024px) / (1920 - 1024))), 200px);

    width: clamp(82px, calc(82px + (113 - 82) * ((100vw - 375px) / (1024 - 375))), 113px);
    height: clamp(103px, calc(103px + (142 - 103) * ((100vw - 375px) / (1024 - 375))), 142px);
}

.rules {
    position: relative;
}


.rules__inner {
    display: flex;
    justify-content: center;
    margin-top: clamp(30px, calc(30px + (50 - 30) * ((100vw - 375px) / (1024 - 375))), 50px);
}


.rules__inner-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.rules__inner-body {
    flex-direction: row;
    background-image: none;
    width: clamp(924px, calc(924px + (1130 - 924) * ((100vw - 1024px) / (1920 - 1024))), 1130px);
    height: 100%;
    justify-content: space-between;
    padding-top: clamp(40px, calc(40px + (45 - 40) * ((100vw - 1024px) / (1920 - 1024))), 45px);
    padding-left: clamp(20px, calc(20px + (30 - 20) * ((100vw - 375px) / (1024 - 375))), 30px);
    padding-bottom: clamp(40px, calc(40px + (45 - 40) * ((100vw - 1024px) / (1920 - 1024))), 45px);
    padding-right: clamp(35px, calc(35px + (53 - 35) * ((100vw - 1024px) / (1920 - 1024))), 53px);
}

.rules__inner-block {
    display: flex;
    align-items: center;
    gap: 17px;
}

.rules__inner-subtitle {
    font-family: 'Circe-Regular', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 1024px) / (1920 - 1024))), 18px);
    max-width: clamp(565px, calc(565px + (653 - 565) * ((100vw - 1024px) / (1920 - 1024))), 653px);
    color: #fff;
    line-height: clamp(19px, calc(19px + (22 - 19) * ((100vw - 1024px) / (1920 - 1024))), 22px);
}

.rules__inner-number {
    padding: 10px;
    width: 100%;
    font-size: clamp(26px, calc(26px + (30 - 26) * ((100vw - 1024px) / (1920 - 1024))), 30px);
    max-width: clamp(45px, calc(45px + (51 - 45) * ((100vw - 1024px) / (1920 - 1024))), 51px);
    height: clamp(45px, calc(45px + (51 - 45) * ((100vw - 1024px) / (1920 - 1024))), 51px);
}

.rules__inner-link {
    margin-left: 67px;
    margin-top: clamp(12px, calc(12px + (25 - 12) * ((100vw - 375px) / (1024 - 375))), 25px);
    display: flex;
    flex-direction: column;
    gap: clamp(14px, calc(14px + (20 - 14) * ((100vw - 375px) / (1024 - 375))), 20px);;
}

.rules__inner-code {
    font-weight: 700;
    font-size: clamp(25px, calc(25px + (28 - 25) * ((100vw - 1024px) / (1920 - 1024))), 28px);
    text-transform: uppercase;
    color: #ffe6be;
}

.rules__inner-coffee {
    width: clamp(194px, calc(194px + (281 - 194) * ((100vw - 1024px) / (1920 - 1024))), 281px);
    height: clamp(249px, calc(249px + (360 - 249) * ((100vw - 1024px) / (1920 - 1024))), 360px);
}



.draw {
    margin-top: clamp(120px, calc(120px + (140 - 120) * ((100vw - 375px) / (1920 - 1024))), 140px);
}

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

.draw__cards {
    margin-top: clamp(34px, calc(34px + (50 - 34) * ((100vw - 375px) / (1024 - 375))), 50px);
    display: flex;
    justify-content: center;
    max-width: 1524px;
    gap: clamp(21px, calc(21px + (40 - 21) * ((100vw - 1024px) / (1920 - 1024))), 40px);
}

.draw__card {
    padding: 20px;
}

.draw__card-body {
    position: relative;
    justify-content: normal;
    padding-top: clamp(30px, calc(30px + (35 - 30) * ((100vw - 375px) / (1024 - 375))), 35px);
    background-image: url("./images/draw-fon.png"), url("./images/shadow.png");
    background-repeat: no-repeat;
    background-size: 103%;
    background-position: bottom;
    width: clamp(273px, calc(273px + (320 - 273) * ((100vw - 1024px) / (1920 - 1024))), 320px);
    height: clamp(360px, calc(360px + (400 - 360) * ((100vw - 375px) / (1024 - 375))), 400px);
}

.draw__card:last-child .draw__card-body {
    background-image: url("./images/shadow.png");
    background-position: center;
}

.draw__card-name {
    font-weight: 700;
    font-size: 20px;
    color: #ffe6be;
    max-width: 232px;
    width: 100%;
    text-transform: uppercase;
    text-align: center;
}

.draw__card-date {
    margin-top: 20px;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

.draw__card-images {
    margin-top: 55px;
}

.draw__card-image--coffee {
    position: relative;
    bottom: 35px;
    z-index: 1;
    width: clamp(84px, calc(84px + (91 - 84) * ((100vw - 375px) / (1024 - 375))), 91px);
    height: clamp(174px, calc(174px + (187 - 174) * ((100vw - 375px) / (1024 - 375))), 197px);
}

.draw__card-image--sertifecat {
    margin-left: -25px;
    margin-top: 15px;
    width: clamp(118px, calc(118px + (130 - 118) * ((100vw - 375px) / (1024 - 375))), 130px);
    height: 99px;
}

.draw__card-image--main-prize {
    position: relative;
    z-index: 2;
    margin-top: clamp(75px, calc(75px + (100 - 75) * ((100vw - 375px) / (1024 - 375))), 100px);
    width: 184px;
    height: 117px;
}

.draw__card-image--shar {
    position: absolute;
    top: clamp(106px, calc(106px + (133 - 106) * ((100vw - 375px) / (1024 - 375))), 133px);
    left: 5px;
    width: clamp(84px, calc(84px + (91 - 84) * ((100vw - 1024px) / (1920 - 1024))), 91px);
    height: clamp(106px, calc(106px + (115 - 106) * ((100vw - 1024px) / (1920 - 1024))), 115px);
}

.draw__card-image--shar-2 {
    position: absolute;
    top: clamp(106px, calc(106px + (133 - 106) * ((100vw - 375px) / (1024 - 375))), 133px);
    right: 5px;
    width: clamp(96px, calc(96px + (102 - 96) * ((100vw - 1024px) / (1920 - 1024))), 102px);
    height: clamp(126px, calc(126px + (132 - 126) * ((100vw - 1024px) / (1920 - 1024))), 132px);
}

.draw__card-dates {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    gap: 13px;
    transition: all 400ms ease-in-out;
}

.draw__card-dates .active:hover{
    transform: scale(1.0404);
    cursor: pointer;
}

.draw__card-date--button {
    transition: all 300ms ease-in-out;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    width: 200px;
    height: 44px;
    text-align: center;
    border: 2px solid #fff;
    background: #E0BC83;
    font-size: 20px;
    color: #fff;
    cursor: not-allowed;
 
}

.decorate__shar {
    position: absolute;
    left: clamp(-102px, calc(-102px + (-133 - -102) * ((100vw - 1024px) / (1920 - 1024))), -133px);
    bottom: -133px;

    width: clamp(273px, calc(273px + (375 - 273) * ((100vw - 1024px) / (1920 - 1024))), 375px);
    height: clamp(343px, calc(343px + (470 - 343) * ((100vw - 1024px) / (1920 - 1024))), 470px);
}


.faq {
    position: relative;
    margin-top: clamp(120px, calc(120px + (150 - 120) * ((100vw - 1024px) / (1920 - 1024))), 150px);
}

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

.faq__card {
    padding: clamp(20px, calc(20px + (40 - 20) * ((100vw - 375px) / (1024 - 375))), 40px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: max-content;
    margin-top: clamp(40px, calc(40px + (80 - 40) * ((100vw - 1024px) / (1920 - 1024))), 80px);
}

.faq__card-body {
    background-image: none;
    position: relative;
    display: flex;
    align-items: normal;
    width: clamp(894px, calc(894px + (1100 - 894) * ((100vw - 1024px) / (1920 - 1024))), 1100px);
    height: auto;

    label {
        padding: 20px;
    }
}

.faq__card-arrow {
    background-repeat: no-repeat;
    width: 15px;
    height: 12px;
    background-image: url("./images/arrow.svg");
    position: absolute;
    right: 20px;
    top: 29px;
    pointer-events: none;
}

.faq__card-title {
    max-width: calc(100% - 20px);
    width: 100%;
    font-weight: 700;
    font-size: clamp(18px, calc(18px + (20 - 18) * ((100vw - 1024px) / (1920 - 1024))), 20px);
    text-transform: uppercase;
    color: #fff;
}

.faq__card-text {
    font-family: 'Circe-Regular', sans-serif;
    display: none;
    margin-top: 20px;
    font-weight: 400;
    font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 1024px) / (1024 - 375))), 16px);
    color: #000;
}

input[type="radio"] {
    display: none;
}



.faq__card-body:has(input[type="radio"]:checked) {
    background: #F5D3BD;
}

.faq__card-body:has(input[type="radio"]:checked) .faq__card-title {
    color: #000;
}

.faq__card-body:has(input[type="radio"]:checked) .faq__card-arrow {
    background-image: url("./images/arrow-dark.svg");
}

.faq__card-body:has(input[type="radio"]:checked) .faq__card-text {
    display: block;
}

.faq__feedback {
    gap: 30px;
    padding: 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: clamp(30px, calc(30px + (40 - 30) * ((100vw - 1024px) / (1920 - 1024))), 40px);
}

.faq__feedback-title {
    text-align: center;
    font-weight: 700;
    font-size: clamp(25px, calc(25px + (36 - 25) * ((100vw - 1024px) / (1920 - 1024))), 36px);
    text-transform: uppercase;
    color: #FFE6BE;
}

.faq__feedback-link {
    font-family: 'Circe-Regular', sans-serif;
    display: flex;
    align-items: center;
    gap: clamp(20px, calc(20px + (30 - 20) * ((100vw - 1024px) / (1920 - 1024))), 30px);
    font-weight: 400;
    font-size: clamp(30px, calc(30px + (40 - 30) * ((100vw - 1024px) / (1920 - 1024))), 40px);
    text-transform: uppercase;
    color: #FFE6BE;

    img {
        width: clamp(28px, calc(28px + (36 - 28) * ((100vw - 1024px) / (1920 - 1024))), 36px);
        height: clamp(26px, calc(26px + (34 - 26) * ((100vw - 1024px) / (1920 - 1024))), 34px);
    }
}

.decorate__shar-2 {
    position: absolute;
    transform: translateX(133px);
    right: 0;
    top: 0;
    left: auto;
    z-index: 2;
}

.footer {
    position: relative;
}

.footer__background {
    background-image: url("./images/footer.webp"), url("./images/footer-shadow.webp");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center bottom, center;
    width: 100%;
    height: clamp(254px, calc(254px + (657 - 254) * ((100vw - 1024px) / (1920 - 1024))), 657px);
}

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

.footer__decorate-shar {
    width: clamp(185px, calc(185px + (261 - 185) * ((100vw - 1024px) / (1920 - 1024))), 261px);
    height: clamp(227px, calc(227px + (322 - 227) * ((100vw - 1024px) / (1920 - 1024))), 322px);
    position: absolute;
    left: clamp(42px, calc(42px + (80 - 42) * ((100vw - 1024px) / (1920 - 1024))), 80px);
    top: 0;
}

.footer__line {
    background-image: url("./images/footer-line.png");
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    height: 263px;
}

.footer__subtitle {
    font-family: 'Circe-Regular', sans-serif;
    max-width: clamp(858px, calc(858px + (1179 - 858) * ((100vw - 1024px) / (1920 - 1024))), 1179px);
    width: 100%;
    font-weight: 500;
    font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 375px) / (1024 - 375))), 18px);
    text-align: center;
    color: #fff;
}

.footer__images {
    margin-top: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(98px, calc(98px + (111 - 98) * ((100vw - 1024px) / (1920 - 1024))), 111px);

    a:first-child {
        width: clamp(150px, calc(150px + (170 - 150) * ((100vw - 1024px) / (1920 - 1024))), 170px);
        height: clamp(89px, calc(89px + (97 - 89) * ((100vw - 1024px) / (1920 - 1024))), 97px);
    }

    a:last-child {
        width: clamp(230px, calc(230px + (260 - 230) * ((100vw - 1024px) / (1920 - 1024))), 260px);
        height: clamp(50px, calc(50px + (55 - 50) * ((100vw - 1024px) / (1920 - 1024))), 55px);
    }
}

@media screen and (min-width: 953px) {
    .header__content {
        padding: 30px 0px 42px 0px;
    }
}

@media screen and (min-width: 1921px) {
    .hero {
        height: 1305px;
    }

    .hero__wrapper {
        height: 1293px;
    }
}

@media screen and (min-width: 1580px) {
    .footer__images {
        margin-bottom: -268px;
    }
}


@media screen and (max-width: 1600px) {
    .hero__info-subtitle {
        line-height: 1;
        letter-spacing: 0.11em;
    }

    .header__list-item {
        font-size: 14px;
    }

    /* .header__content {
        justify-content: flex-start;
        margin-left: 185px;
    } */
}

@media screen and (max-width: 1200px) {
    .decorate__shar {
        bottom: -368px;
    }

    .decorate__shar-2 {
        top: auto;
        bottom: -170px;
    }

    .footer__images {
        margin-top: 140px;
    }

    .footer__decorate-shar {
        top: auto;
        bottom: clamp(147px, calc(147px + (261 - 147) * ((100vw - 375px) / (1200 - 375))), 261px);
    }

    .footer__line {
        background-size: contain;
    }

    .hero {
        background-image: url("./images/fon-1024.jpg");
    }
}

@media screen and (max-width: 1023px) {
    .draw__cards {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 992px) {
    .prizes__cards {
        flex-wrap: wrap;
    }
}


@media screen and (max-width: 954px) {
    .container {
        padding-left: clamp(15px, calc(15px + (54 - 15) * ((100vw - 375px) / (1024 - 375))), 54px);
        padding-right: clamp(15px, calc(15px + (54 - 15) * ((100vw - 375px) / (1024 - 375))), 54px);
    }

    .header__menu {
        transform: translateX(-200%);
    }

    .header__button-profile {
        display: none;
    }

    .header {
        box-shadow: 0 5px 5px 0 rgba(24, 7, 7, 0.3);
        background: linear-gradient(180deg, #180707 0%, #3b150d 7.74%, rgba(58, 21, 13, 0.9) 43.72%, rgba(53, 22, 15, 0.9) 100%);
    }


    .hero__wrapper {
        padding-top: 40px;
    }

    .hero__content {
        padding-top: 19px;
    }

    .hero__inner {
        justify-content: normal;

        a:first-child {
            width: clamp(93px, calc(93px + (130 - 93) * ((100vw - 375px) / (1024 - 375))), 130px);
            height: clamp(53px, calc(53px + (62 - 53) * ((100vw - 375px) / (1024 - 375))), 62px);
        }

        a:last-child {
            width: clamp(132px, calc(132px + (179 - 132) * ((100vw - 375px) / (1024 - 375))), 179px);
            height: clamp(27px, calc(27px + (36 - 27) * ((100vw - 375px) / (1024 - 375))), 36px);
        }
    }

    .burger {
        display: block;
    }

    .hero {
        height: clamp(578px, calc(578px + (664 - 578) * ((100vw - 375px) / (1024 - 375))), 664px);
    }

    .hero__info-subtitle {
        font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 375px) / (1024 - 375))), 18px);
        line-height: 18px;
        letter-spacing: 0.12em;
    }

    .hero-image--shar {
        width: clamp(120px, calc(120px + (198 - 120) * ((100vw - 375px) / (1024 - 375))), 198px);
        height: clamp(160px, calc(160px + (263 - 160) * ((100vw - 375px) / (1024 - 375))), 263px);
    }

    .hero-image--coffee {
        width: clamp(130px, calc(130px + (221 - 130) * ((100vw - 375px) / (1024 - 375))), 221px);
        height: clamp(190px, calc(190px + (320 - 190) * ((100vw - 375px) / (1024 - 375))), 320px);
        bottom: 17px;
    }

    .hero__info-subtitle--bold {
        font-size: clamp(30px, calc(30px + (45 - 30) * ((100vw - 375px) / (1024 - 375))), 45px);
        line-height: clamp(39px, calc(39px + (58 - 39) * ((100vw - 375px) / (1024 - 375))), 58px);
    }

    .prizes__title {
        font-size: clamp(30px, calc(30px + (40 - 30) * ((100vw - 375px) / (1024 - 375))), 40px);
        line-height: clamp(39px, calc(39px + (52 - 39) * ((100vw - 375px) / (1024 - 375))), 52px);
    }

    .prizes__cards {
        margin-top: clamp(30px, calc(30px + (40 - 30) * ((100vw - 375px) / (1024 - 375))), 40px);
        gap: clamp(20px, calc(20px + (34 - 20) * ((100vw - 375px) / (1024 - 375))), 34px);
    }

    .prizes__card-body {
        height: clamp(360px, calc(360px + (370 - 360) * ((100vw - 375px) / (1024 - 375))), 370px);
        width: clamp(285px, calc(285px + (420 - 285) * ((100vw - 375px) / (1024 - 375))), 420px);
    }

    .prizes__card-name {
        font-size: clamp(20px, calc(20px + (24 - 20) * ((100vw - 375px) / (1024 - 375))), 24px);
        line-height: clamp(26px, calc(26px + (31 - 26) * ((100vw - 375px) / (1024 - 375))), 31px);
    }

    .main-prize__title {
        font-size: clamp(25px, calc(25px + (30 - 25) * ((100vw - 375px) / (1024 - 375))), 30px);
        line-height: clamp(32px, calc(32px + (39 - 32) * ((100vw - 375px) / (1024 - 375))), 39px);
    }

    .main-prize__card-body {
        width: clamp(285px, calc(285px + (924 - 285) * ((100vw - 375px) / (1024 - 375))), 924px);
        height: clamp(360px, calc(360px + (370 - 360) * ((100vw - 375px) / (1024 - 375))), 370px);
    }

    .main-prize__card-image {
        width: clamp(251px, calc(251px + (318 - 251) * ((100vw - 375px) / (1024 - 375))), 318px);
        height: clamp(159px, calc(159px + (201 - 159) * ((100vw - 375px) / (1024 - 375))), 201px);
    }

    .main-prize__card--shar {
        width: clamp(113px, calc(113px + (159 - 113) * ((100vw - 375px) / (1024 - 375))), 159px);
        height: clamp(147px, calc(147px + (207 - 147) * ((100vw - 375px) / (1024 - 375))), 207px);
    }

    .main-prize__card--shar-2 {
        top: 162px;
        right: clamp(5px, calc(5px + (114 - 5) * ((100vw - 375px) / (1024 - 375))), 114px);
        width: clamp(116px, calc(116px + (164 - 116) * ((100vw - 375px) / (1024 - 375))), 164px);
        height: clamp(152px, calc(152px + (214 - 152) * ((100vw - 375px) / (1024 - 375))), 214px);
    }

    .main-prize__card--shar-4 {
        left: clamp(44px, calc(44px + (154 - 44) * ((100vw - 375px) / (1024 - 375))), 154px);
    }


    .rules__inner-body {
        width: clamp(273px, calc(273px + (924 - 273) * ((100vw - 375px) / (1024 - 375))), 924px);
        padding-top: clamp(22px, calc(22px + (40 - 22) * ((100vw - 375px) / (1024 - 375))), 40px);
        padding-bottom: clamp(2px, calc(2px + (40 - 2) * ((100vw - 375px) / (1024 - 375))), 40px);
        padding-right: clamp(11px, calc(11px + (35 - 11) * ((100vw - 375px) / (1024 - 375))), 35px);
    }


    .rules__inner-subtitle {
        font-size: clamp(15px, calc(15px + (16 - 15) * ((100vw - 375px) / (1024 - 375))), 16px);
        line-height: 18px;
    }

    .rules__inner-code {
        line-height: 21px;
        font-size: clamp(16px, calc(16px + (21 - 16) * ((100vw - 375px) / (1024 - 375))), 21px);
    }

    .rules__inner-coffee {
        margin-top: 20px;
        width: clamp(115px, calc(115px + (194 - 115) * ((100vw - 375px) / (1024 - 375))), 194px);
        height: clamp(148px, calc(148px + (249 - 148) * ((100vw - 375px) / (1024 - 375))), 249px);
    }



    .draw__card-body {
        width: clamp(273px, calc(273px + (320 - 273) * ((100vw - 375px) / (1024 - 375))), 320px);
        height: clamp(360px, calc(360px + (400 - 360) * ((100vw - 375px) / (1024 - 375))), 400px);
    }

    .decorate__shar {
        width: clamp(148px, calc(148px + (273 - 148) * ((100vw - 375px) / (1024 - 375))), 273px);
        height: clamp(185px, calc(185px + (342 - 185) * ((100vw - 375px) / (1024 - 375))), 342px);
    }

    .faq__card-body {
        width: clamp(276px, calc(276px + (894 - 276) * ((100vw - 375px) / (1024 - 375))), 894px);
    }


    .faq__card-title {
        font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 375px) / (1024 - 375))), 18px);
    }

    .faq__card {
        margin-top: clamp(30px, calc(30px + (40 - 30) * ((100vw - 375px) / (1024 - 375))), 40px);
    }

    .faq__feedback-title {
        font-size: clamp(18px, calc(18px + (25 - 18) * ((100vw - 375px) / (1024 - 375))), 25px);
    }

    .faq__feedback-link {
        font-size: clamp(20px, calc(20px + (30 - 20) * ((100vw - 375px) / (1024 - 375))), 30px);

        img {
            width: clamp(21px, calc(21px + (28 - 21) * ((100vw - 375px) / (1024 - 375))), 28px);
            height: clamp(19px, calc(19px + (26 - 19) * ((100vw - 375px) / (1024 - 375))), 26px);
        }
    }

    .footer__background {
        height: clamp(106px, calc(106px + (254 - 106) * ((100vw - 375px) / (1024 - 375))), 254px);
    }

    .footer__decorate-shar {
        left: clamp(23px, calc(23px + (42 - 23) * ((100vw - 375px) / (1024 - 375))), 42px);
        width: clamp(71px, calc(71px + (185 - 71) * ((100vw - 375px) / (1024 - 375))), 185px);
        height: clamp(87px, calc(87px + (227 - 87) * ((100vw - 375px) / (1024 - 375))), 227px);
    }

    .footer__subtitle {
        max-width: clamp(359px, calc(359px + (858 - 359) * ((100vw - 375px) / (1024 - 375))), 858px);
    }

    .footer__images {
        gap: clamp(20px, calc(20px + (98 - 20) * ((100vw - 375px) / (1024 - 375))), 98px);

        a:first-child {
            width: clamp(89px, calc(89px + (150 - 89) * ((100vw - 375px) / (1024 - 375))), 150px);
            height: clamp(52px, calc(52px + (89 - 52) * ((100vw - 375px) / (1024 - 375))), 89px);
        }

        a:last-child {
            width: clamp(132px, calc(132px + (230 - 132) * ((100vw - 375px) / (1024 - 375))), 230px);
            height: clamp(30px, calc(30px + (50 - 30) * ((100vw - 375px) / (1024 - 375))), 50px);
        }
    }
}



@media screen and (max-height: 640px) {
    .burger.active {
        top: 12px;
    }

    .header__menu.active {
        top: 130px;
    }

    .header__button-profile.active {
        top: 55px;
    }
}

@media screen and (max-width: 954px) and (min-width: 588px) {
    .hero__wrapper {
        height: 664px;
    }

    .hero-image--coffee {
        bottom: -29px;
    }
}


@media screen and (max-width: 846px) {
    .rules__inner-body {
        flex-direction: column;
    }

    .rules__inner-link {
        align-items: center;
        margin-left: 0;
    }
}

@media screen and (max-width: 761px) {
    .decorate__shar-2 {
        transform: translateX(65px);
    }
}

@media screen and (max-width: 701px) {
    .header__content {
        padding: 26px 0px;
    }

    .line {
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 600px) {
    .prizes__card {
        width: 100%;
    }

    .prizes__card-body {
        width: 100%;
    }

    .main-prize__card-body {
        width: clamp(285px, calc(285px + (924 - 285) * ((100vw - 375px) / (1024 - 375))), 924px);
    }
}

@media screen and (max-width: 588px) {

    .decorate__shar {
        bottom: -182px;
    }

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

    .rules__button {
        max-width: clamp(215px, calc(215px + (323 - 215) * ((100vw - 1024px) / (1920 - 1024))), 323px);
        img {
            display: none;
        }
    }

    .footer__images {
        flex-direction: column;
    }

    .hero__wrapper {
        height: 935px;
    }

    .hero-image--shar {
        z-index: 2;
        bottom: -35px;
    }

    .hero__mechanic-inner {
        flex-direction: column;
        gap: 30px;
    }

    .hero__mechanic-numbers {
        display: none;
    }

    .hero__mechanic-number--hidden {
        display: flex;
    }

    .hero {
        height: 664px;
    }


    .hero::after {
        background: url("./images/fon2-new.png");
        background-size: cover;
        height: 414px;
        background-position: center center;
        margin-top: -2px;
    }

    .prizes {
        margin-top: 470px;
    }

    .footer__line {
        background-image: url("./images/footer-line-mobile.png");
    }
}


@media screen and (max-width: 400px) {
    .hero__inner {
        gap: 20px;
    }

    #prizes__card-quantity {
        margin-left: -85px;
    }
}

@media screen and (min-width: 1144px) {
.hero-image--coffee {

    bottom: 70px;
}

.hero-image--shar {
 
    bottom: 140px;
}
.hero::after {
    margin-top: -120px;
    
    }

.hero {
   
    background-position: center -120px;
}

.hero__wrapper{
    margin-top: -120px;
}
.hero__info {

    margin-top: 70px;
}
.prizes {
    margin-top: clamp(160px, calc(160px + (320 - 160) * ((100vw - 2024px) / (1920 - 768))), 320px);
}


}



@media screen and (min-width: 1450px) {


.hero {
   
    background-position: center -120px!important;
}


}

@media screen and (max-width: 1450px) and (min-width: 1144px) {


.hero {
   
    background-position: center -100px;
}


}