:root {
    --text-dark: rgb(64, 63, 61, 1);
    --text-light: rgb(225, 212, 201, 1);
    --text-accent: rgb(176, 144, 122, 1);
    --background-body: rgb(225, 212, 201, 1);
    --background-container: rgb(102, 95, 85, 1);
    --background-backdrop: rgba(64, 63, 61, 0.80);
    --background-page: rgb(182, 174, 167);
    --border-light: rgb(193, 182, 173, 1);
    --border-dark: rgb(102, 95, 85, 1);
    --white: rgb(255, 255, 255);


    --ff-inter: Inter, Arial, "Helvetica Neue", Helvetica, sans-serif;

    --page-max-width: 1440px;
    --page-tablet-width: 768px;
    --page-min-width: 380px;
}

@font-face {
    font-family: Inter;
    src: local("Inter"), local("Inter-Regular"),
        url(./../assets/fonts/Inter/Inter-Regular.woff2) format("woff2"),
        url(./../assets/fonts/Inter/Inter-Regular.woff) format("woff"),
        url(./../assets/fonts/Inter/Inter-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    src: local("Inter SemiBold"), local("Inter-SemiBold"),
        url(./../assets/fonts/Inter/Inter-SemiBold.woff2) format("woff2"),
        url(./../assets/fonts/Inter/Inter-SemiBold.woff) format("woff"),
        url(./../assets/fonts/Inter/Inter-SemiBold.ttf) format("truetype");
    font-weight: 600;
    font-style: normal;
}


@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

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

html {
    box-sizing: border-box;
    height: 100%;
}


body {
    min-height: 100%;
    min-width: var(--page-min-width);
    background-color: var(--background-body);
    color: var(--text-dark);
    font-family: var(--ff-inter);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    overflow-x: hidden;
    /* Prevent adjustments of font size after orientation changes in iOS: */
    -webkit-text-size-adjust: 100%;
    /* Change the default tap highlight to be completely transparent in iOS: */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.body-locked {
    height: 100%;
    overflow-y: hidden;
}

.h1 {
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: var(--ff-inter);
    font-size: 4.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 105%;
    margin: 0;
}

.h1__accent {
    font-style: italic;
    color: var(--text-accent);
}

.h2 {
    font-size: 3.75rem;
    font-weight: 600;
    line-height: 125%;
    margin: 0;
}

.h2__accent {
    color: var(--text-accent);
    font-style: italic;
}

.h3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 125%;
    margin: 0;
}

.h3__accent {
    font-style: italic;
}

.caption {
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    margin: 0;
}

.text {
    margin: 0;
}

.cover-img {
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.icon-coffee {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALCSURBVHgBzVJNTxNRFL3z0em86Xx0CC2lhmihQqnRtBXFBBcsWLjSmLBwi1tj4s6t+BNcslKXsBExhoQ1RA0aQlIR5au0BVroTKfTaTvTdsbXxpgorWtvcjf33XveueceArrE5OQkixASeJ5XotGoMzs7a3frpbs9xOPxG16vlw2GQjt0s6nikobT6dRLdgMxDGMrFoud9ft8437/JRb+ER2ZOI5DZ7NZtlAo9GA2zVKpJONaiSCISqd+4q9h//dvm0+OMul7RfUsWKvWJMRxUK83HI+H17yy/HUwHHkdCA7MdWSCAcjtrY33K28Xric/f4D04SHougFu5IG6WSVkWZLDI5GJ+O2pCV1TA4IkPz8HkkwmaZdjx+ZfvYTj0xLwggCSwIHtUFC3Gdjey8Fm8gBzpyAxPnF3ZXnJF748XAgNjTz7vc7m+lrkwsXQJ1VRhOV3S3CcPoByqQh2o4HZcIB4AQaHIzB6ZRTSmayqlcs3SYe6dX96+ohqAWx8WXuYz+fmGYaR3G4XeHgOOIGH3kAQZH8fIEEEBiHgeQQIscBxCAX6fFOKqiQZN58iFSV3razrL1wu2mtZJpBEi5wNplkDfB3I509BVTWwLAsIkmx7gqIoyJ3ko6JHeJxIJD5iHzWvMi7a46Kp9iAA/pVhgHUz0KpROLHogHuAJgnQNA00vYy1cmBwaMiLz+7Qvb39iyeZw1K9boqOY8PB/m4bQOQ9UGIZMKsGMCQFXixyPpeDol4BFmtEECRei3/Tvg5GKudymTuZ1O5itVrxVSpl2PmRAcu0oL0e5l+rWbCXSgFNY3BJBFGUbFEQF0YHwk//MFs6ne5RT9OPVFV5UNa1YcPQaWw2aLFrDTNut82yKM+w3DonSHMISctjY2P1c479ZTpidXW13zSUSL1hyabZIB27adgkta9p1eOZmZki/LfxE95WMm+YXSs6AAAAAElFTkSuQmCC")
}

.icon-tea {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKgSURBVHgB1ZLLS1RRHMd/c++d+8rxASI2uuihFRI5EWW7QqSQtIVhhG36A4IWhbSJYcCNSETUKC0qDSKMqBjMmjJcNEmSOiqmpYNWjM2Mhc2dO97Xueee7h0dkFq1qx/nwHl9P+d3vucH8F/E8NuoL5lR73T09FbA30YoFBLn4t+bPyzG+5dXM2Rm6dv9yYXUsfy+3++nhsfGSvNzyu8PFkzFli85Y2fh3qNwXVH5jghloZDIs6dNQwOWIW2EqOGnQyNR/7W72061nevhCR2NTMz0OhpGFLOFNDG63k3Fyg7XVrUXFpfUlZWX7/d4RBB5GtwuAAVhoBgNvBXgq6z09sfjX7TJoRe+Q40n39zqfbIzl86z8PDg0koadd9+uHv68+piIoOIZBBiN2LZfQ0TksyaJJaSyfhCgjwIvWpzdK8joz0j07NHck9QdPWlyLmZE83HJwSW2m6aCHQDAcIEdIuAqiEwdA0sjIBYGMSi0urc7S4XA5oJjDNenPsY2bWnBixCiwAYMOLAZFkwVNo+CGAgG6obNkwHObsG2YzU0Nra2iEK/N7R8dGfrrzBjwfCUnFJaYHbTQPPs+Bm3UBTFBACYGITTGTmIOmMDCs/VhMH9tVcTaUS9Y31R5uYDYgVj33q0ivUgCCKIIgCsCwDFOW8lgDGVi4bRVFBkmQ7U7R1JZlomZ0cP+MccG0qD/r6jZtjnsISHy/w6xCa3oBgMGyPFFWDrCyDKkt9Ujp9obOzU8oJN0FIbXXVc04UWuwPKbZsoYkMQLYXum2qpiqgZGUbknkfm58/GwwGpbzQ9Xu1+tvbvZxnSx/LCw0UtW6sA8QW1m3ogCGlzge6upObNX9A8nHl8sWDHMc3sSznRcj4ijV1EHMF0UAgYME/G78AIPRXc+W35ZwAAAAASUVORK5CYII=")
}

.icon-dessert {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKxSURBVHgBvVPPaxNBFH4zsz+6iU1rgq2loETBigexIFiKF6GX4kFBqn+BKL14E8SDV09CD970LsWD5iBFCpUKNUKoYmNtkGJplaRt2qRJ3B/ZmXm+3UOgioge3N0H8+N73/e9NzsA/+OZm5sz/oThv9toTN0fnb119Wku/3BqcXH2FCKyvyIpzkyng4X8k/7F9SspByZL6/nih8LLwsf38zeJLPEzfh97IZdLfLdrE1bdvXP4weOh0PNg2QLounsDDvUdBS44mJZdTqS672WPjzxijGGHZGFh2uGBvqSUuk1KZ3C7ylrPZqBpMOg9cQwGx8fAdiwQQoDgDDiFbdnzCPpaX/ZCheFeMb269iXHhBglAKMvrpFzDoagAWnFghgCSh9QBaSMgGaGNvXz/qGLl1mrtdTP6tVKKAkUugCqAbq9AxDWAdp1YNgCpjxa92k9IpBE1oYwdQ505nw4cJJ3G8nkp+pW8bUnVNMR2qWaEaRUpEjiqGNVTk6iN7bFBXDTARFsgEJmVlbYQNyTzTeTXw10B7n2gRuakk2CUzCHcg4As1KAoicO4EnQ3AaJBijNUQt1JP6R7PTwjuDGIBcOoNFNyV0UNjVDEGHkCOPQ5AyVAjoAGpNbVG5oONWYxMkMl4n2tIqAShMIaRo5UnEFcSFREjUVwwawoEpzAW2zbzebHfdjEqZZLapea1KgE5DtFvVxlxpZAwy2KXEXlFujZu+BwIjIA9kzAiqTLkX5MUmtnG9Kj8x4W3QilEwgregUyA0NKCQRkwyVw5kC6fuB0ZsoK6VfdEjq3941UDZiBZQu2ZagwhBRag+12kSl15Qvl4QpSga3ltEy11vuduXs2ITbIWk2gxJT/lvtu5+1561Q/augjTUt2cbAweRO9vor/9cbVtg/jW5ocXrCgn98fgADa5IFRbQ9JwAAAABJRU5ErkJggg==")
}

.link {
    display: inline-flex;
    text-decoration: none;
    position: relative;
    margin: 0;
}

.link:hover {
    text-decoration: none;
}

.link_underlined::after {
    content: "";
    display: block;
    position: absolute;
    opacity: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    bottom: 0;
    height: 0.125rem;
    transition: 0.5s all ease;
    background-color: currentColor;
}

.link_underlined.link_hovered:after {
    width: 100%;
    opacity: 1;
}


.link-primary {
    color: var(--text-dark);
    align-items: flex-start;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: var(--ff-inter);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    gap: 0.5rem;
}

.link-primary_light {
    color: var(--text-light);
}

.link-primary__icon {
    vertical-align: bottom;
    width: 1.25rem;
    height: 1.25rem;
}

.link-primary_md-big {
    font-size: 2rem;
    line-height: 125%;
}

.link-primary_md-big .link-primary__icon {
    width: 2.5rem;
    height: 2.5rem;
}

.btn {
    display: inline-block;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    text-align: center;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
    vertical-align: middle;
}

.btn:disabled {
    cursor: default;
}

.btn_full-width {
    width: 100%;
}

.btn-tab {
    border-radius: 6.25rem;
    padding: 0.45rem 0.9rem 0.45rem 0.5rem;
    border: 1px solid var(--border-light);
    color: var(--text-dark);
    font-family: var(--ff-inter);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    transition: 0.5s all ease;
}

.btn-tab_active {
    cursor: default;
}

.btn-tab_active {
    color: var(--text-light);
    border-color: var(--background-container);
    background-color: var(--background-container);
}

.btn-tab_active .btn-tab__icon-wrap {
    background: var(--background-body);
}

.btn-tab__inner {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-tab__icon-wrap {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background-color: var(--border-light);
    transition: 0.5s all ease;
}

.btn-tab__icon {
    width: 1rem;
    height: 1.5rem;
    color: var(--text-dark);
}

.switch-btn {
    position: relative;
}

.switch-btn__control {
    display: block;
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;

}

.switch-btn__control:checked+.btn-tab {
    cursor: default;
    color: var(--text-light);
    border-color: var(--background-container);
    background-color: var(--background-container);
}

.switch-btn__control:checked+.btn-tab .btn-tab__icon-wrap {
    background: var(--background-body);
}

.btn-primary {
    color: var(--text-dark);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: var(--ff-inter);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    padding: 1.25rem;

    background: var(--background-body);
    min-width: 12.5rem;
    border-radius: 6.25rem;
}

.btn-primary__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary__text {
    position: relative;
    background: var(--background-body);
}


.btn-primary__icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}


.btn-secondary {
    color: var(--text-dark);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: var(--ff-inter);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    border-radius: 6.25rem;
    border: 1px solid var(--border-dark);
    padding: 0.55rem;
    transition: 0.5s all ease;
    width: 100%;
    max-width: 12.5rem;
}

.btn-app {
    color: var(--text-dark);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: var(--ff-inter);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    border-radius: 6.25rem;
    border: 1px solid var(--border-dark);
    min-width: 12.5rem;
    padding: 0.75rem 1.25rem;
    transition: 0.5s all ease;
}

.btn-app__inner {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-app__content{
    text-align: left;
}

.btn-app__icon {
    width: 2.25rem;
    height: 2.25rem;
}

.btn-app__small-text {
    font-size: 0.625rem;
    line-height: 140%;
}

.btn-round {
    border-radius: 50%;
    width: 3.75rem;
    height: 3.75rem;
    transition: 0.5s all ease;
}

.btn-round__inner {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
}

.btn-round__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.btn-round_dark {
    border: 1px solid var(--border-dark);
    color: var(--text-dark);
}

.btn-round_light {
    border: 1px solid var(--border-light);
    color: var(--background-body);
}

.list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.logo {
    width: 6.25rem;
    height: 3.75rem;
    display: flex;
}

.hamburger {
    border: 1px solid var(--border-dark);
    color: var(--text-dark);
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    transition: 0.2s all ease;
}

.hamburger_active .hamburger__inner:before {
    transform: rotate(45deg) translateY(-2.5px)
}

.hamburger_active .hamburger__inner::after {
    transform: rotate(-45deg) translateY(+2.5px);
}

.hamburger__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 6px;
}

.hamburger__inner:before,
.hamburger__inner:after {
    display: block;
    content: "";
    width: 16px;
    height: 2px;
    background-color: var(--text-dark);
    border-radius: 1.5px;
    transition: 0.5s ease;
    transform-origin: left;
}

.page {
    margin: 0 auto;
    background-color: var(--background-body);
    max-width: var(--page-max-width);
    overflow-x: hidden;
    position: relative;
    padding-bottom: 2.5rem;
}

.page__header {
    margin-bottom: 1.25rem;
}

.page__enjoy {
    margin-bottom: 6.25rem;
}

.page__favourites-coffee {
    margin-bottom: 6.25rem;
}

.page__about {
    margin-bottom: 6.25rem;
}

.page__mobile-app {
    margin-bottom: 6.35rem;
}

.page__menu {
    margin-bottom: 6.25rem;
}

.header {
    display: flex;
    align-items: center;
    gap: 1rem 3.5%;
    padding: 1.25rem 2.5rem 0;
    background-color: var(--background-body);
}

.header__home-link {
    flex: none;
}

.header__nav {
    flex: 1 1 auto;
}


.header__menu {
    display: flex;
    gap: 1rem 3.5%;
    flex-wrap: wrap;
}


.header__item:first-child {
    margin-left: auto;
}

.header__item:last-child {
    margin-left: auto;
}

.header__toggler {
    display: none;
}

.enjoy {
    color: var(--text-light);
    padding: 0 2.5rem;
}

.enjoy__inner {
    border-radius: 2.5rem;
    padding: 6.25rem;
    background: url("../assets/img/intro/img-hero.jpg") no-repeat center / cover;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.enjoy__column {
    max-width: 530px;
}

.enjoy__title {
    margin-bottom: 2.5rem;
}

.enjoy__text {
    margin-bottom: 2.5rem;
}

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

.favourites-coffee {
    padding: 0 2.5rem;
}

.favourites-coffee__title {
    text-align: center;
    margin-bottom: 2.5rem;
}

.slider {
    position: relative;
}

.slider__viewport {
    overflow: hidden;
    max-width: 480px;
    margin: 0 auto 2.5rem;
}

.slider__items{
    max-width: 100%;
    display: flex;
}

.slider__item {
    flex: 0 0 100%;
    touch-action: pan-y;
}

.slider__btn {
    position: absolute;
    margin-top: -1.3rem;
    top: 50%;
    transform: translateY(-50%);
}

.slider__next-btn {
    right: 5px;
}

.slider__prev-btn {
    left: 5px;
}

.slider__product-card {
    margin: 0 auto;
    max-width: 480px;
}

.slider__dots {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.slider__dot {
    width: 2.5rem;
    height: 0.25rem;
    background-color: var(--border-light);
}

.slider__dot-inner{
    display: block;
    height: 100%;
    width: 0;
    background-color: var(--border-dark);
}

.product-card {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.product-card__img-wrap {
    flex: none;
    height: 480px;
    margin-bottom: 1.25rem;
}

.product-card__img {}

.product-card__title {
    margin-bottom: 1rem;
}

.product-card__description {
    margin-bottom: 1rem;
}

.about {
    padding: 0 2.5rem;
}

.about__title {
    margin-bottom: 2.5rem;
}

.about__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 2.5rem;
}

.about__img-wrap {
    border-radius: 1.25rem;
    overflow: hidden;
    aspect-ratio: 660 / 430;
}

.about__img-wrap:nth-child(3n + 1) {
    aspect-ratio: 660 / 590;
}

.about__img-wrap:nth-child(4n + 1) {
    grid-row: 1 / 3;
}

.about__img-wrap:nth-child(4n + 4) {
    grid-row: 2 / 4;
}


.about__img {
    transform: scale(1.1);
    transition: 0.5s all ease;
}

.mobile-app {
    padding: 0 2.5rem;
}

.mobile-app__grid {
    gap: 6.25rem 7.4%;
    display: flex;
    align-items: center;
}

.mobile-app__column {
    flex: 0 1 50%
}

.mobile-app__title {
    margin-bottom: 2.5rem;
}

.mobile-app__text {
    margin-bottom: 2.5rem;
}

.mobile-app__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.contacts {
    padding: 0 2.5rem;
    color: var(--text-light);
}

.contacts__grid {
    padding: 6.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 4.5rem 8.5%;
    background: var(--background-container);
    border-radius: 2.5rem;
}

.contacts__column {
    flex: 1 1 0;
}

.contacts__title {
    margin-bottom: 2.5rem;
}

.contacts__title-accent {
    color: var(--text-accent);
    font-style: italic;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem
}

.social-links__item {
    flex: none;
}

.contacts__section-title {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

.contacts-list {
    display: inline-flex;
    flex-direction: column;
    gap: 1.25rem;
    font-weight: 600
}

.contacts-list__item {
    display: flex;
    gap: 0.5rem;
}

.contacts-list__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}


.menu {
    padding: 0 2.5rem;
}

.menu__title {
    max-width: 800px;
    text-align: center;
    margin: 0 auto 2.5rem;

}

.menu__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.4rem;
    justify-content: center;
}

.menu__control-item {
    flex: none;
}

.menu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 310px);
    gap: 40px;
    grid-auto-rows: 1fr;
    justify-content: center;
}

.menu__card {
    min-height: 100%;
}

.menu__load-btn {
    margin: 2.4rem auto 0;
    display: block;
}

.menu__load-btn_hidden {
    display: none;
}


.tabs {

}

.tabs__tab {
    display: none;
}

.tabs__tab_active {
    display: block;
    transition: opacity 0.5s linear;
}

.tabs__tab_hidden {
    opacity: 0;
}

.item-card {
    display: flex;
    flex-direction: column;
    border-radius: 2.5rem;
    border: 1px solid var(--border-light);
}

.item-card__img-wrap {
    flex: none;
    aspect-ratio: 1 / 1;
    border-radius: 2.5rem;
    overflow: hidden;
}

.item-card__img {
    transform: scale(1.1);
    transition: 0.5s all ease;
}

.item-card__body {
    padding: 1.25rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.item-card__title {
    margin-bottom: 0.75rem;
}

.item-card__text {
    margin-bottom: 0.75rem;
}

.item-card__price {
    margin-top: auto;
}

.slideIn {
    animation-name: slideIn;
}

.slideOut {
    animation-name: slideOut;
}

.backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    pointer-events: none;
    visibility: hidden;
    background: var(--background-backdrop);
    opacity: 0;
    transition: opacity 0.5s ease,
        visibility 0.5s ease;
}

.backdrop_active {
    pointer-events: auto;
    visibility: visible;
    opacity: 0.6;
}

.modal-block {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem;
    pointer-events: none;
}

.modal-block_active {
    pointer-events: auto;
}

.modal-block__window {
    flex: none;
    width: 100%;
    max-width: 800px;
    max-height: calc(100vh - 5rem);
    position: relative;
    margin: auto 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform 0.5s ease,
        opacity 0.5s ease,
        visibility 0.5s ease;
    transform: scale(0.9);
    opacity: 0;
    visibility: hidden;
    border-radius: 2.5rem;
    padding: 1rem;
    background: var(--background-body);
}

.modal-block_active .modal-block__window {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

.calculator {}

.calculator__inner {
    display: flex;
    gap: 1.25rem;
}

.calculator__img-wrap {
    width: 310px;
    height: 310px;
    flex: none;
    border-radius: 2.5rem;
    overflow: hidden;
}

.calculator__img {
    scale: 1.1;
}

.calculator__content {
    flex: 1 1 0;
}

.calculator__title {
    margin-bottom: 0.7rem;
}

.calculator__description {
    margin: 0 0 1.25rem;
}

.calculator__option {
    margin: 0 0 1.25rem;
    padding: 0;
    border: none;
}

.calculator__option-title {
    margin: 0 0 0.5rem;
    display: block;
    padding: 0;
    white-space: normal;
}

.calculator__option-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

}

.calculator__result {
    display: flex;
    gap: 1.25rem;
    margin: 0 0 1.25rem;
}

.calculator__result-title {
    margin-right: auto;
}

.calculator__result-sum {}

.calculator__note {
    display: flex;
    padding: 0.75rem 0;
    gap: 0.5rem;
    align-items: flex-start;
    border-top: 1px solid var(--border-light);
    margin-bottom: 1.25rem;
}

.calculator__note-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.calculator__note-text {}

.calcultator__close-btn {
    max-width: none;
}

@keyframes slideIn {
    0% {
        visibility: visible;
        transform: translateX(100%);
    }

    100% {
        visibility: visible;
        transform: translateX(0%);
    }
}

@keyframes slideOut {
    0% {
        visibility: visible;
        transform: translateX(0%);
    }

    to {
        visibility: hidden;
        transform: translateX(100%);
    }
}

@media (max-width: 768px) {

    .page__mobile-app {
        margin-bottom: 6.45rem;
    }

    .header {
        position: relative;
        z-index: 10;
    }

    .header__nav {
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        padding: 5rem 2.5rem 3.75rem;
        min-height: 100vh;
        background-color: var(--background-body);
        transform: translateX(100%);
        visibility: hidden;
        animation-fill-mode: both;
        animation-duration: 0.5s;
    }

    .header__menu {
        flex-direction: column;
        align-items: center;
        gap: 3.75rem;
    }

    .header__item:first-child {
        margin-left: 0;
    }

    .header__item:last-child {
        margin-left: 0;
        margin-top: 2.5rem;
    }

    .header__toggler {
        display: block;
        margin-left: auto;
    }

    .header__link {
        text-align: center;
        font-size: 2rem;
        line-height: 125%;
    }

    .header__link .link-primary__icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .enjoy__inner {
        padding: 6.25rem 3.75rem;
    }

    .slider__next-btn {
        right: 0;
    }

    .slider__prev-btn {
        left: 0;
    }

    .about__images {
        display: flex;
        flex-wrap: wrap;
    }

    .about__img-wrap {
        display: none;
        height: 590px;
        width: 100%;
    }

    .about__img-wrap:first-child,
    .about__img-wrap:last-child {
        display: block;
    }

    .about__img-wrap:nth-child(n) {
        aspect-ratio: auto;
    }

    .about__img {
        transform: scale(1.05);
    }

    .mobile-app__grid {
        flex-wrap: wrap;
    }

    .mobile-app__column {
        flex: 0 1 100%
    }

    .mobile-app__img-column {
        padding: 0 1.875rem;
    }

    .contacts__grid {
        padding: 6.25rem 3.75rem;
    }

    .contacts__column {
        flex: 1 1 100%;
    }

    .menu__grid {
        padding: 0 14px;
    }
}

@media (max-width: 700px) {
    .calculator__img-wrap {
        display: none;
    }

    .modal-block {
        padding: 1.19rem;
    }
}

@media (max-width: 550px) {

    .h1 {
        font-size: 2.625rem;
        line-height: 115%;
    }

    .h2 {
        font-size: 2rem;
    }

    .enjoy {
        padding: 0 1rem;
    }

    .favourites-coffee {
        padding: 0 1rem;
    }

    .menu {
        padding: 0 1.2rem;
    }

    .header {
        padding: 1.25rem 1rem 0;
    }

    .enjoy__inner {
        padding: 3.75rem 1rem;
    }

    .about {
        padding: 0 1rem;
    }

    .product-card__img-wrap {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .mobile-app {
        padding: 0 1rem;
    }

    .contacts {
        padding: 0 1rem;
    }

    .about__img {
        transform: scale(1.25);
    }

    .mobile-app__grid {
        gap: 2.3rem 7.4%;
        display: flex;
        align-items: center;
    }

    .mobile-app__img-column {
        padding: 0;
    }

    .contacts__grid {
        padding: 3.85rem 1rem;
        gap: 2.5rem;
    }

    .contacts__section-title {
        margin-top: 0rem;
        margin-bottom: 2.5rem;
    }

    .menu__controls {
        gap: 0.5rem;
        margin: 0 -0.3rem 2.4rem;
    }

    .slider__btn {
        display: none;
    }
}

@media (hover: hover) {
    .link_underlined:hover:after {
        width: 100%;
        opacity: 1;
    }

    .btn-tab:hover {
        color: var(--text-light);
        border-color: var(--background-container);
        background-color: var(--background-container);
    }

    .btn-tab:hover:not(:disabled) .btn-tab__icon-wrap {
        background: var(--background-body);
    }

    .btn-tab_active .btn-tab__icon-wrap{
        background: var(--background-body);
    }

    .btn-primary__text {
        left: calc((0.5rem + 1.25rem) / 2);
        transition: 0.5s all ease;
    }

    .btn-primary__icon {
        opacity: 0;
        transition: 0.5s all ease;
    }

    .btn-primary:hover:not(:disabled) .btn-primary__icon {
        opacity: 1;
    }

    .btn-primary:hover:not(:disabled) .btn-primary__text {
        left: 0;
    }

    .btn-secondary:hover:not(:disabled) {
        color: var(--text-light);
        background: var(--background-container);
    }

    .btn-app:hover:not(:disabled) {
        color: var(--text-light);
        background: var(--background-container);
    }

    .btn-round_dark:hover:not(:disabled) {
        color: var(--background-body);
        background: var(--background-container);
    }

    .btn-round_light:hover:not(:disabled) {
        color: var(--text-dark);
        background: var(--background-body);
    }

    .about__img:hover {
        transform: scale(1);
    }

    .item-card:hover {
        cursor: pointer;
    }

    .item-card:hover .item-card__img {
        transform: scale(1);
    }

}