@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    src: url(../../christmas-shop/assets/fonts/Montserrat/static/Montserrat-Regular.ttf) format("truetype");
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    src: url(../../christmas-shop/assets/fonts/Montserrat/static/Montserrat-SemiBold.ttf) format("truetype");
}
@font-face {
    font-family: "Allura";
    font-style: normal;
    font-weight: 400;
    src: url(../../christmas-shop/assets/fonts/Allura/Allura-Regular.ttf) format("truetype");
}
:root {
    --Dark: rgba(24, 28, 41);
    --Primary: rgba(255, 70, 70);
    --Primary-10: rgba(255, 70, 70, 0.10);
    --Static-White: rgba(255, 255, 255);
    --Static-White-40: rgba(255, 255, 255, 0.4);
    --Content-Background: rgba(236, 243, 248);
    --Overlay: rgba(24, 28, 41, 0.80);
    --Tag-Purple: rgba(67, 97, 255);
    --Tag-Green: rgba(6, 164, 79);
    --Tag-Pink: rgba(255, 67, 247);
}
* {
    box-sizing: border-box;
    color: red;
    margin: 0;
    padding: 0;
    font-size: 24px;
}
html, body {
    scroll-behavior: smooth;
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1440px;
    margin: 0 auto;
}
/* HEADER */
.header-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--Static-White);
    padding: 12px 82px;
    height: 64px;
}
.logo-box {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    max-width: 142px;
    height: 40px;
    padding: 8px 20px;
    gap: 8px;
    border-radius: 4px;
    text-decoration: none;
}
.logo-text {
    color: var(--Dark);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
/* MENU */
.burger {
    display: none;
}
.nav {
    display: flex;
    align-items: center;
}
.nav-list {
    display: flex;
    list-style: none;
    gap: 8px;
}
.nav-item {
    display: flex;
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
    transition: all 0.5s ease-in-out;
}
.nav-link {
    text-decoration: none;
    color: var(--Dark);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 12px 20px;
    transition: all 0.5s ease-in-out;
}
/* MAIN */
.main {
    border-radius: 20px;
    background-color: var(--Primary);
}
/* HERO */
.hero {
    display: flex;
    padding: 60px 8px;
    border-radius: 20px 20px 0 0;
    flex-direction: column;
    align-items: center;
    max-width: 1440px;
    height: auto;
    background-image: url(../../christmas-shop/assets/images/bg-ball.png), url(../../christmas-shop/assets/images/bg-snow.png);
    background-position: center, center;
    background-size: cover, cover;
    background-color: var(--Primary);
}
.hero-container {
    display: flex;
    max-width: 430px;
    padding: 60px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.hero-text {
    color: var(--Static-White);
    text-align: center;
    font-family: "Allura";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1.2px;
}
.hero-title {
    color: var(--Static-White);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 5.76px;
    text-transform: uppercase;
}
.hero-btn {
    display: flex;
    padding: 20px 32px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border-width: 0;
    background: var(--Dark);
    color: var(--Static-White);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: all 0.5s ease-in-out;
}
/* ABOUT */
.about {
    display: flex;
    padding: 60px 82px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-image: url(../../christmas-shop/assets/images/bg-snow.png);
    background-position: center;
    background-size: cover;
    background-color: var(--Primary);
}
.about-container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    border-radius: 20px;
    background: var(--Static-White);
}
.about-article {
    display: flex;
    margin: 0 60px;
    padding-right: 92px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}
.about-caption {
    color: var(--Primary);
    font-family: "Allura";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: 1.2px;
}
.about-title {
    color: var(--Dark);
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.52;
    letter-spacing: 3.84px;
    text-transform: uppercase;
}
.about-text {
    color: var(--Dark);
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.48;
}
.about-img-wrapper {
    width: 50%;
    height: 528px;
    border-radius: 20px;
    flex-shrink: 0;
    background-position: center;
    background-image: url(../../christmas-shop/assets/images/santa.png);
}
/* SLIDER */
.slider {
    display: flex;
    overflow: hidden;
    padding: 60px 82px;
    gap: 20px;
    flex-direction: column;
    background-image: url(../../christmas-shop/assets/images/bg-snow.png);
    background-position: center;
    background-size: cover;
    background-color: var(--Primary);
}
.slider-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.slider-caption {
    color: var(--Static-White);
    text-align: center;
    font-family: "Allura";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: 1.2px;
}
.slider-title {
    color: var(--Static-White);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.52;
    letter-spacing: 3.84px;
    text-transform: uppercase;
}
.slider-wrapper {
    display: flex;
    position: relative;
    padding: 0;
    align-items: center;
    gap: 20px;
    transition: transform 0.5s ease;
}
.slider-text {
    color: var(--Static-White);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}
.slider-image {
    display: flex;
    width: 200px;
    height: 200px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 20px;
    background: lightgray 50% / cover no-repeat;
}
.snowman {
    background-image: url(../../christmas-shop/assets/images/snowman.png);
}
.christmas-trees {
    background-image: url(../../christmas-shop/assets/images/christmas-trees.png);
}
.christmas-tree-ball {
    background-image: url(../../christmas-shop/assets/images/christmas-tree-ball.png);
}
.fairytale-house {
    background-image: url(../../christmas-shop/assets/images/fairytale-house.png);
}
.slider-btn-wrapper {
    display: flex;
    align-self: end;
    align-items: center;
    gap: 20px;
}
.slider-btn {
    display: flex;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 1px solid var(--Static-White);
    background-color: var(--Primary);
    transition: all 0.5s ease-in-out;
}
.disabled-btn svg path {
    stroke: var(--Static-White-40);
}
.disabled-btn {
    pointer-events: none;
    cursor: default;
    display: flex;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 1px solid var(--Static-White-40);
    background-color: var(--Primary);
}
/* BEST GIFTS */
.best-gifts {
    display: flex;
    padding: 60px 8px;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 20px;
    background-image: url(../../christmas-shop/assets/images/bg-snow.png);
    background-position: center;
    background-size: cover;
    background-color: var(--Primary);
}
.best-gifts-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.best-gifts-caption {
    color: var(--Static-White);
    text-align: center;
    font-family: "Allura";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: 1.2px;
}
.best-gifts-title {
    color: var(--Static-White);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.52;
    letter-spacing: 3.84px;
    text-transform: uppercase;
}
.best-gifts-container-cards {
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 12px;
    align-self: stretch;
    flex-wrap: wrap;
}
.card {
    display: flex;
    width: 310px;
    height: 342px;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    background: var(--Static-White);
}
.all.shadow {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: var(--Overlay);
    z-index: 10;
}
.body-hidden {
    overflow: hidden;
}
.modal-window {
    display: none;
    justify-content: center;
    position: fixed;
    top: 50%;
    margin: -257px 8px auto 8px;
    z-index: 500;
    max-width: 400px;
    height: auto;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    background: var(--Static-White);
}
.show {
    display: flex;
}
.card-img-wrapper {
    display: flex;
    width: 100%;
    height: 230px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: var(--Content-Background);
    border-radius: 20px 20px 0 0;
}
.modal-card-img-wrapper {
    display: flex;
    position: relative;
    overflow: hidden;
    top: -40px;
    z-index: 10;
    width: 100%;
    height: 230px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: var(--Content-Background);
    border-radius: 20px 20px 0 0;
}
.modal-card-text {
    color: var(--Dark);
    font-family: "Montserrat";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.48;
}
.title-modal-info {
    margin-top: 12px;
    color: var(--Dark);
    font-family: "Montserrat";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.30;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.modal-info-container {
    width: 100%;
}
.modal-info-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 0;
}
.modal-card-box {
    display: flex;
    flex-direction: row;
    gap: 12px;
}
.snowflake-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.snow-box {
    display: flex;
    width: 16px;
    height: 16px;
}
.chest-box {
    display: flex;
    align-self: end;
    z-index: 100;
    position: relative;
    right: 12px;
    top: 12px;
    width: 40px;
    height: 40px;
}
.card-img {
    width: 100%;
}
.card-content {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    background-color: var(--Static-White);
    border-radius: 0 0 20px 20px;
}
.modal-card-content {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    margin-top: -40px;
    gap: 8px;
    align-self: stretch;
    background-color: var(--Static-White);
    border-radius: 0 0 20px 20px;
}
.card-text {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.card-title{
    color: var(--Dark);
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.52;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    transition: all 0.5s ease-in-out;
}
.for-work{
    color: var(--Tag-Purple);
}
.for-health {
    color: var(--Tag-Green);
}
.for-harmony {
    color: var(--Tag-Pink);
}
/* CTA */
.cta {
    display: flex;
    padding: 60px 8px;
    margin: -1px 0;
    border-radius:  0 0 20px 20px;
    flex-direction: column;
    align-items: center;
    max-width: 1440px;
    height: auto;
    background-image: url(../../christmas-shop/assets/images/bg-forest.png), url(../../christmas-shop/assets/images/bg-snow.png);
    background-position: center, center;
    background-size: cover, cover;
    background-color: var(--Primary);
}
.cta-container {
    display: flex;
    max-width: 426px;
    padding: 120px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.cta-title {
    color: var(--Static-White);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.52;
    letter-spacing: 3.84px;
    text-transform: uppercase;
}
.cta-timer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.cta-caption {
    color: var(--Static-White);
    text-align: center;
    font-family: "Allura";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: 1.2px;
}
.timer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 72px;
    width: 344px;
    padding: 8px 12px 12px;
    align-items: center;
    border-radius: 20px;
    background: var(--Static-White-40);
}
.separator {
    width: 1px;
    height: 20px;
    background: var(--Static-White-40);
}
.timer-wrap {
    display: flex;
    width: 80px;
    flex-direction: column;
    align-items: center;
}
.timer-digit {
    color: var(--Static-White);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.52;
    letter-spacing: 3.84px;
    text-transform: uppercase;
}
.timer-word {
    color: var(--Static-White);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
/* FOOTER */
.footer-wrapper {
    display: flex;
    padding: 60px 8px;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    background: var(--Static-White);
}
.footer-container {
    display: flex;
    flex-direction: row;
    align-self: stretch;
    justify-content: center;
    gap: 12px;
}
.contact-wrapper {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: var(--Content-Background);
    max-width: 417px;
    gap: 12px;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
    flex: 1 0 0;
}
.contact-text {
    color: var(--Dark);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.52;
    letter-spacing: 3.84px;
    text-transform: uppercase;
    transition: all 0.5s ease-in-out;
}
.contact-caption {
    color: var(--Dark);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.52;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    transition: all 0.5s ease-in-out;
}
.footer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}
.socials-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
}
.socials {
    padding: 8px;
    height: 40px;
    width: 40px;
    transition: all 0.5s ease-in-out;
}
.socials path {
    stroke: #181C29;
    transition: all 0.5s ease-in-out;
}
.footer-text {
    color: var(--Dark);
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.48;
}
.footer-caption {
    color: var(--Dark);
    text-align: center;
    font-family: "Allura";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: 1.2px;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
}
/* MEDIA */
@media screen and (max-width: 1400px) {
    .about-article {
        padding-right: 0;
    }
}
@media screen and (max-width: 1060px) {
    .footer-container {
        flex-direction: column;
    }
    .contact-wrapper {
        max-width: 1043px;
    }
}
@media screen and (max-width: 930px) {
    .about {
        padding: 60px 8px;
    }
    .slider {
        align-items: normal;
        padding: 60px 8px;
    }
    .slider-btn-wrapper {
        margin-right: 0;
    }
}
@media screen and (max-width: 768px) {
    .nav {
        display: flex;
        position: fixed;
        top: 63px;
        right: -100%;
        width: 100%;
        height: 100%;
        justify-content: center;
        z-index: 5;
        background-color: var(--Static-White);
        transition: right 0.5s;
    }
    .nav.open {
        display: flex;
        position: absolute;
        right: 0;
        transition: right 0.6s;
        z-index: 5;
    }
    .nav-list {
        position: fixed;
        top: 50%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin: auto;
        margin-top: -100px;
        padding: 0;
    }
    .nav-link {
        font-size: 24px;
        line-height: 1.52;
        letter-spacing: 3.84px;
    }
    .burger {
        display: flex;
        cursor: pointer;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        z-index: 10;
    }
    .burger-item1, .burger-item2 {
        width: 20px;
        height: 1px;
        border-radius: 1px;
        background-color: var(--Dark);
        transition: 0.3s;
    }
    /* rotate item1 */
    .active .burger-item1 {
        transform: rotate(-45deg) translate(-3px, 3px);
    }
    /* rotate item2 */
    .active .burger-item2 {
        transform: rotate(45deg) translate(-3px, -3px);
    }
    .hidden {
        overflow: hidden;
    }
    .header-wrapper {
        padding: 12px 8px;
    }
}
@media screen and (max-width: 670px) {
    .about-article {
        margin: 0 20px;
        padding: 60px 0;
    }
}
@media screen and (max-width: 550px) {
    .about-container {
        flex-direction: column;
    }
    .about-img-wrapper {
        width: 100%;
    }
}
@media (hover: hover) {
    .chest-box:hover {
        cursor: pointer;
    }
    .logo-box:hover {
        cursor: pointer;
    }
    .nav-item:hover {
        cursor: pointer;
        border-radius: 12px;
        color: var(--Primary);
        background: var(--Primary-10);
        transition: all 0.5s ease-in-out;
    }
    .nav-item:hover .nav-link {
        color: var(--Primary);
        transition: all 0.5s ease-in-out;
    }
    .hero-btn:hover {
        cursor: pointer;
        color: var(--Dark);
        background: var(--Static-White);
        transition: all 0.5s ease-in-out;
    }
    .right:hover, .left:hover {
        cursor: pointer;
        border: 1px solid var(--Static-White);
        background: var(--Static-White);
        transition: all 0.5s ease-in-out;
    }
    .right:hover svg path {
        cursor: pointer;
        stroke: var(--Primary);
        transition: all 0.5s ease-in-out;
    }
    .left:hover svg path {
        cursor: pointer;
        stroke: var(--Primary);
        transition: all 0.5s ease-in-out;
    }
    .card:hover {
        cursor: pointer;
    }
    .card:hover .card-title {
        color: var(--Primary);
        transition: all 0.5s ease-in-out;
    }
    .contact-wrapper:hover .contact-text {
        color: var(--Primary);
        transition: all 0.5s ease-in-out;
    }
    .contact-wrapper:hover .contact-caption {
        color: var(--Primary);
        transition: all 0.5s ease-in-out;
    }
    .socials:hover {
        cursor: pointer;
        transition: all 0.5s ease-in-out;
    }
    .socials:hover path {
        stroke: var(--Primary);
        cursor: pointer;
        transition: all 0.5s ease-in-out;
    }
    .footer-caption:hover {
        color: var(--Primary);
        transition: all 0.5s ease-in-out;
    }
}