@font-face {
    font-family: Chillax;
    src: url("../fonts/Chillax-Variable.ttf");
}


* {
    margin: 0;
    padding: 0;
}


body {
    font-family: "chillax", "sans-serif";
      font-family: sans-serif;

    background-color: var(--color-background);
}

a {
    text-decoration: none;
    color: var(--white);
}



.header {
    width: 100%;
    position: absolute;
    top: 4vh;
}

.header .container {
    width: 90%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .container .item {

    display: flex;
    align-items: center;
    gap: 2vh;
    transition: 0.3s ease all;
    position: relative;
    z-index: 4;
}

.header .container .item .box {
    position: relative;
    display: flex;
    gap: 2vh;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 2vh;
    overflow: hidden;
    z-index: 2 !important;
    background-color: var(--white10);
    border-radius: var(--border-radius);
    border: 0.1vh solid var(--white20);
    backdrop-filter: blur(10vh);
}

.ice-part-1 {
    position: absolute;
    z-index: 1;
    bottom: -2.6vh;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.ice-part-2 {
    position: absolute;
    z-index: 1;
    bottom: -2.6vh;
    left: 2vh;
    pointer-events: none;
    width: 80%;
}

.header .container .item.website {
    cursor: pointer;
}

.header .container .item .box.website::before {
    content: "";
    position: absolute;
    top: 0;
    left: -180%;
    width: 150%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent 0%,
            var(--white20) 50%,
            transparent 100%);
    transform: skewX(-20deg);
}

.header .container .item .box.website:hover::before {
    animation: shine 0.8s ease forwards;
}



.header .container .item .text {
    color: var(--white);
    font-weight: 500;
    transition: 0.3s ease all;

}

.header .container .item .icon {
    width: 5vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background-color: var(--white10);
    font-size: var(--size-6);
    border-radius: var(--border-radius);
    transition: 0.3s ease all;
}

.header .container .item.website:hover {
    transform: scale(1.02);
}

.header .container .item .login-btn {
    position: relative;
    overflow: hidden;
    color: var(--white);
    font-size: var(--size-5);
    padding: 1vh 2vh;
    background-color: var(--white10);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: color 0.3s ease;
    font-weight: 500;
    z-index: 1;
}

.header .container .item .login-btn::before {
    content: "";
    position: absolute;
    width: 300%;
    height: 300%;
    background: var(--color-primary);
    border-radius: 50%;
    top: -150%;
    left: -150%;
    transform: scale(0);
    transition:
        transform 1s ease,
        top 1s ease,
        left 1s ease;
    z-index: -1;
}

.header .container .item .login-btn:hover::before {
    transform: scale(1);
    top: -50%;
    left: -50%;
}

.header .container .item .login-btn:not(:hover)::before {
    transform-origin: right bottom;
    transform: scale(0);
}


.header .container .item .basket-btn {
    width: 5vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background-color: var(--color-primary);
    font-size: var(--size-6);
    border-radius: var(--border-radius);
    transition: 0.3s ease all;
}

.header .container .item .basket-btn:hover {
    opacity: 0.5;
}



.logo-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 30vh;
}



@keyframes floatLogo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2vh);
    }
}



.layout-wrapper {
    width: 90%;
    margin: auto;
    margin-top: 26vh;
}


.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    box-sizing: border-box;
    grid-gap: 3vh;

}


.layout .contents {
    width: 100%;
}

.layout .contents .menu {
    background-color: var(--color-box);
    width: 100%;
    padding: 3vh;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 2vh;
    flex-wrap: wrap;
}

.layout .contents .menu .item {
    background-color: var(--white10);
    padding: 1vh 2vh;
    border-radius: var(--border-radius);
    transition: 0.3s ease all;
    font-weight: 400;
    color:var(--white);
}

.layout .contents .menu .item:hover {
    color: var(--color-primary);
    background-color: var(--color-primary20);
}




.content {
    position: relative;
    background-color: var(--color-box);
    width: 100%;
    padding: 3vh;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    gap: 2vh;
    margin-top: 3vh;
}

.content .hero-title {
    color: var(--white);
    font-weight: 600;
    font-size: var(--size-1);
}


.content .hero-desc {
    color: var(--color-text);
    font-weight: 400;
    line-height: 4vh;
    margin-top: 2vh;
    font-size: var(--size-5);
}


.hero-btns {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 2vh;
    margin-top: 3vh;
}

.primary-btn {
    position: relative;
    padding: 1.4vh 3vh;
    color: var(--white);
    background-color: var(--color-primary);
    font-weight: 600;
    border-radius: var(--border-radius);
    font-size: var(--size-4);
    cursor: pointer;
    overflow: hidden;
    transition: 0.3s ease all;
    display: block;
    width: max-content;
    border: 0.1vh solid transparent;
    text-align:center;
}

.primary-btn.disabled {
    pointer-events:none;
    opacity:0.7;
}

.primary-btn:hover {
    transform: scale(1.02);
}

.primary-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 120%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.35) 50%,
            transparent 100%);
    transform: skewX(-20deg);
}

.primary-btn:hover::before {
    animation: shine 0.7s ease forwards;
}

.secondry-btn {
    position: relative;
    padding: 1.4vh 3vh;
    color: var(--white);
    background-color: var(--color-primary40);
    border: 0.1vh solid var(--color-primary);
    font-weight: 500;
    border-radius: var(--border-radius);
    font-size: var(--size-4);
    cursor: pointer;
    overflow: hidden;
    transition: 0.3s ease all;
    display: block;
    width: max-content;
}

.secondry-btn:hover {
    background-color: var(--color-primary);
}


@keyframes shine {
    from {
        left: -150%;
    }

    to {
        left: 150%;
    }
}

.hero-btns .discord {
    background-color: var(--white10);
    color: var(--white);
    height: 6vh;
    width: 6vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    font-size: var(--size-6);
    transition: 0.3s ease all;
    cursor: pointer;
}

.hero-btns .discord:hover {
    background-color: var(--color-primary);
}


.features {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3vh;
    margin-top: 6vh;
}

.features .item {
    width: 100%;
    padding: 3vh;
    box-sizing: border-box;
    background-color: var(--white06);
    border: 0.1vh solid var(--white20);
    border-radius: var(--border-radius);
    transition: 0.3s ease all;
}

.features .item:hover {
    transform: translateY(-1vh);
    background-color: var(--white10);
    border-color: var(--white40);
}

.features .item .icon {
    width: 7vh;
    height: 7vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background-color: var(--color-primary30);
    color: var(--color-primary);
    font-size: var(--size-5);
}

.features .item .title {
    color: var(--white);
    font-size: var(--size-4);
    margin-top: 2vh;
    font-weight: 600;
}

.features .item .desc {
    color: var(--color-text);
    font-size: var(--size-5);
    margin-top: 2vh;
    line-height: 3vh;
    font-weight: 400;
}

.event {
    margin-top: 3vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding: 3vh;
    box-sizing: border-box;
    background-color: var(--white06);
    border: 0.1vh solid var(--white20);
    border-radius: var(--border-radius);
    grid-gap: 3vh;
}
.event.close {
    display:none;
}
.event .image {
    width: 100%;
    min-height: 40vh;
    max-height: 40vh;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.event .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease all;
}

.event .image:hover img {
    transform: scale(1.2);
}

.event .title-first {
    color: var(--white);
    font-weight: 600;
    font-size: var(--size-2);
}


.event .title-second {
    color: var(--white);
    font-weight: 500;
    font-size: var(--size-3);
    margin-top: 1vh;
}

.event .desc {
    color: var(--color-text);
    font-size: var(--size-5);
    margin-top: 2vh;
    line-height: 3vh;
    font-weight: 400;
}

.event .event-btn {
    margin-top: 3vh;
}

.event .date {
    padding: 1vh 2vh;
    background-color: var(--white10);
    color: var(--color-text);
    width: max-content;
    border-radius: var(--border-radius);
    margin-top: 3vh;
    font-size: var(--size-5);
    font-weight: 400;
}

.event .date span {
    color: var(--white);
}

.support {
    position: relative;
    width: 100%;
    margin-top: 3vh;
    padding: 6vh;
    box-sizing: border-box;
    overflow: hidden;
    background-color: transparent;
    border: 0.1vh solid var(--white20);
    border-radius: var(--border-radius);
}

.support .support-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.2;
    object-fit: cover;
    pointer-events: none;
}

.support .title {
    position: relative;
    color: var(--white);
    font-size: var(--size-2);
    font-weight: 600;
    display: block;
    z-index: 5;

}

.support .desc {
    position: relative;

    color: var(--color-text);
    font-size: var(--size-5);
    margin-top: 2vh;
    line-height: 3vh;
    font-weight: 400;

}

.support .tags {
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    gap: 2vh;
    margin-top: 3vh;

}

.support .tags .tag {
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 1vh;
    font-weight: 500;
    z-index: 2;

}

.support .tags .tag .icon {
    width: 5vh;
    height: 5vh;
    min-width: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    border-radius: var(--border-radius);
}

.support .btns {
    margin-top: 6vh;
    display: flex;
    gap: 2vh;
}



.footer {
    position: relative;
    background-color: var(--color-box);
    width: 100%;
    padding: 3vh;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    gap: 2vh;
    margin-bottom: 8vh;
    margin-top: 3vh;
}

.footer .top {
    display: flex;
    align-items: top;
    justify-content: space-between;
}

.footer .top .icons {
    display: flex;
    gap: 1vh;
}

.footer .top .icon {
    width: 6vh;
    height: 6vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white10);
    color: var(--color-text);
    font-size: var(--size-5);
    border-radius: var(--border-radius);
    transition: 0.3s ease all;
}



.footer .desc {
    color: var(--white);
    font-weight: 400;
    font-size: var(--size-6);
}


.footer .bottom {
    display: flex;
    align-items: center;
    margin-top: 2vh;
    justify-content: space-between;
}

.footer .bottom .text {
    color: var(--color-text);
    font-weight: 400;
    font-size: var(--size-5);
}

.footer .bottom .links {
    display: flex;
    align-items: bottom;
    font-size: var(--size-5);
    flex-wrap: wrap;
    gap: 1vh;
}


.footer .bottom .links .link {
    padding: 1vh 2vh;
    background-color: var(--white10);
    color: var(--white);
    font-size: var(--size-5);
    color: var(--color-text);
    border-radius: var(--border-radius);
    transition: 0.3s ease all;
    font-weight: 400;
}


.footer .top .icon:hover {
    background-color: var(--white20);
    color: var(--white);
}

.footer .bottom .links .link span {
    color: var(--white);
    font-weight: 500;
}

.footer .bottom .links .link:hover {
    background-color: var(--white20);
    color: var(--white);
}

.footer-mobile {
    display: none;
}

.layout .modules {
    position: relative;
    box-sizing: border-box;
    height: max-content;

}



.layout .module {
    position: relative;
    background-color: var(--color-box);
    width: 100%;
    padding: 3vh;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    margin-top: 3vh;
}

.layout .module:nth-child(1) {
    margin-top: 0;
}

.layout .module:last-child::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 8vh;
}

.layout .module .title {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 2vh;
    color: var(--white);
    font-weight: 600;
    font-size: var(--size-4);
}

.layout .module .title .icon {
    color: var(--color-primary);
    background-color: var(--color-primary30);
    width: 6vh;
    height: 6vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    font-size: var(--size-5);
}



.recent-payments .wrapper {
    width: 100%;
    margin-top: 3vh;
    height: 40vh;
    overflow-y: scroll;
        scrollbar-width: none;

}

.recent-payments .wrapper::-webkit-scrollbar {
    width: 0;
}

.recent-payments .wrapper .item {
    width: 100%;
    padding: 2vh;
    box-sizing: border-box;
    background-color: var(--white06);
    border-radius: var(--border-radius);
    transition: 0.3s ease all;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2vh;
}

.recent-payments .wrapper .item:last-child {
    margin-bottom: 0;
}

.recent-payments .wrapper .item .image {
    width: 6vh;
    height:6vh;
        border-radius: var(--border-radius);
}

.recent-payments .wrapper .item .left {
    display: flex;
    align-items: center;
    gap: 2vh;
}

.recent-payments .wrapper .item .left .name {
    color: var(--white);
    font-size: var(--size-5);
    font-weight: 500;
}

.recent-payments .wrapper .item .left .date {
    color: var(--color-text);
    font-size: var(--size-6);
    font-weight: 400;
}

.recent-payments .wrapper .item .purchased {
    padding: 1vh 2vh;
    background-color: var(--color-primary30);
    color: var(--color-primary);
    border-radius: var(--border-radius);
    font-size: var(--size-5);
}

.recent-payments .wrapper .item:hover {
    background-color: var(--white10);
    border-color: var(--white40);
}

.module .desc {
    color: var(--color-text) !important;
    font-weight: 400 !important;
    line-height: 4vh !important;
    margin-top: 2vh !important;
    font-size: var(--size-5) !important;
}
.community-goal .desc {
      color: var(--color-text);
    font-weight: 400;
    line-height: 4vh;
    margin-top: 2vh;
    font-size: var(--size-5);  
}
.community-goal .process {
    width: 100%;
    height: 3vh;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    background-color: var(--white10);
    margin-top: 2vh;
}

 .process  .progress-bar {
    position: absolute;
    content: "";
    left: 0;
    border-radius: var(--border-radius);
    top: 0;
    height: 3vh;
    background-color: var(--color-primary);
}

.community-goal .numbers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1vh;
}

.community-goal .numbers .percent {
    color: var(--color-primary);
    font-size: var(--size-5);
    font-weight: 400;
}

.community-goal .numbers .num {
    color: var(--color-text);
    font-size: var(--size-5);
    font-weight: 400;
}

.community-goal .numbers .num span {
    color: var(--white);
}


.giftcard-balance .giftcard-input {
    width: 100%;
    border: none;
    background-color: var(--white10);
    outline: none;
    box-sizing: border-box;
    padding: 2vh 3vh;
    color: var(--color-text);
    margin: 2vh 0;
    border-radius: var(--border-radius);
    font-size: var(--size-5);

}

.server-status .text {
    color: var(--color-text);
    font-weight: 400;
    margin-top: 2vh;
    font-size: var(--size-5);
    display: flex;
    align-items: center;
    gap: 1vh;
    margin: 3vh 0;
}

.server-status .text span {
    width: 5vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white10);
    color: var(--white);
    border-radius: var(--border-radius);
}






.featured-package .item {
    width: 100%;
    padding: 2vh;
    box-sizing: border-box;
    background-color: var(--white06);
    border-radius: var(--border-radius);
    transition: 0.3s ease all;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 2vh;
}

.featured-package .item:hover {
    background-color: var(--white10);
}



.featured-package .item .image {
    width: 8vh;
    height: 8vh;
    object-fit: cover;
    box-sizing: border-box;
    border-radius: var(--border-radius);
}



.featured-package .name {
    color: var(--white);
    font-size: var(--size-4);
    font-weight: 500;
}

.featured-package .price {
    color: var(--color-text);
    font-size: var(--size-5);
    font-weight: 400;
}






.top-customer .item {
    width: 100%;
    padding: 2vh;
    box-sizing: border-box;
    background-color: var(--white06);
    border-radius: var(--border-radius);
    transition: 0.3s ease all;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 2vh;
    position: relative;
}

.top-customer .item:hover {
    background-color: var(--white10);
}



.top-customer .item .image {
    width: 8vh;
    height: 8vh;
    object-fit: cover;
    box-sizing: border-box;
    border-radius: var(--border-radius);
}


.top-customer .name {
    color: var(--white);
    font-size: var(--size-4);
    font-weight: 500;
}

.top-customer .price {
    color: var(--color-text);
    font-size: var(--size-5);
    font-weight: 400;
}

.top-customer .medal {
    position: absolute;
    right: -2vh;
    top: -2vh;
    width: 10vh;
    height: 10vh;
}


.products-top {
    display: flex;
    justify-content: space-between;
}

.products-top .title {
    color: var(--white);
    font-weight: 600;
    font-size: var(--size-1);
}



#overlay {
    pointer-events: none;
}

#overlay.active {
    pointer-events: auto;
}



.currency {
    position: relative;
    pointer-events:auto;
}


.currency-toggle {
    width: 100%;
    padding: 10px 14px;
    display: flex;
    gap: 0.6vh;
    background: var(--color-background);
    border-radius: var(--border-radius);
    color: var(--white);
    border: 0.1vh solid var(--white20);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;

}

.currency-list {
    position: absolute;
    top: 100%;
    right: 0;
    width: auto;
    background: var(--color-background);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 0.1vh solid var(--white20);
    margin-top: 1vh;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: var(--border-radius);
    overflow: hidden;
    padding: 1vh;
    transform: translateY(2vh);
    transition: 0.3s ease all;

}


.currency-list a {
    position: relative;
    padding: 1.2vh 2vh;
    color: var(--color-text);
    font-size: var(--size-5);
    text-decoration: none;
    transition: 0.3s ease all;
    border-radius: var(--border-radius);
    cursor:pointer;
        z-index: 4;

}

.currency-list a:hover {
    background: var(--white10);
    color: var(--white);
}

.currency.open .currency-list {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

.currency .arrow {
    transition: 0.3s ease all;
    font-size: var(--size-6);
}





.products-wrapper {
    margin-top: 2vh;
}

.products-wrapper .item {
    position: relative;
    width: 100%;
    background-color: var(--white10);
    border: 0.1vh solid var(--white30);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2vh;
    box-sizing: border-box;
    transition: 0.3s ease all;
    margin-bottom: 2vh;
}

.products-wrapper .item:last-child {
    margin-bottom: 0vh;
}

.products-wrapper .item .left {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 2vh;
}

.products-wrapper .item .image {
    width: 10vh;
    height: 10vh;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.products-wrapper .item:hover {
    background-color: var(--white20);
    border-color: var(--white50);
}

.products-wrapper .item .name {
    color: var(--white);
    font-size: var(--size-4);
    font-weight: 500;
}

.products-wrapper .item .price {
    color: var(--color-text);
    font-size: var(--size-5);
    font-weight: 400;
}

.products-wrapper .item .price .discount {
    text-decoration: line-through;
    font-size: var(--size-6);
        color: var(--color-primary);

}

.primary-btn.add-cart {
}

.products-wrapper .item .btns {
    display: flex;
    align-items: center;
    gap: 2vh;
}

.products-wrapper .item .info {
    position: relative;
    color: var(--white);
    background-color: var(--white20);
    font-weight: 600;
    border-radius: var(--border-radius);
    font-size: var(--size-4);
    cursor: pointer;
    overflow: hidden;
    transition: 0.3s ease all;
    display: block;
    border: 0.1vh solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7vh;
    height: 7vh;
}

.products-wrapper .item .info:hover {
    background-color: var(--color-primary);
}





.login-overlay {
    position: fixed;
    inset: 0;
    background: #0000008c;
    backdrop-filter: blur(1vh);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    z-index: 9;
}

.login-overlay.active {
    opacity: 1;
    pointer-events: all;
}



/* Popup */
.login-popup {
    background: var(--color-box);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    padding: 4vh;
    width: 60vh;
    box-shadow: 0 20px 60px #000000b3;
    border: 0.1vh solid var(--white20);
}

.login-popup .title {
    color: var(--white);
    font-size: var(--size-2);
    font-weight: 600;
}



.login-popup .label {
    display: flex;
    gap: 1vh;
    align-items: center;
    justify-content: left;
    color: var(--white);
    font-size: var(--size-5);
    width: max-content;
    display:none;

}

.login-popup .checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 3.2vh;
    height: 3.2vh;
    border-radius: var(--border-radius);
    border: 0.1vh solid #dbdbdb;
    background: #111;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
}

.login-popup .checkbox:hover {
    border-color: var(--color-primary);
}

.login-popup .checkbox:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.login-popup .checkbox:checked::after {
    content: "✔";
    color: white;
    font-size: 2.2vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
}


.login-popup .login-submit {
    margin-top: 3vh;
    width: 100%;
    border: none;
    border-radius: var(--border-radius);
    background: var(--color-primary);
    color: white;
    cursor: pointer;
    width: max-content;
}

.login-popup .username-inp {
    width: 100%;
    border: none;
    background-color: var(--white10);
    outline: none;
    box-sizing: border-box;
    padding: 2vh 3vh;
    color: var(--color-text);
    margin: 2vh 0;
    border-radius: var(--border-radius);
    font-size: var(--size-5);
}


.login-popup.minecraft .label {
    display: flex;
}






.basket {
    position: fixed;
    right: 5vh !important;
    height: 90vh !important;
    width: 70vh;
    max-width: 70vh;
    z-index: 4;
    opacity: 1;
    transition: 0.5s ease all;
    border-radius: var(--border-radius);
    background: var(--color-box);
    border: 0.1vh solid var(--white20);
}

.basket.open {
    filter: blur(0);
    pointer-events: auto;
    opacity: 1;
}

.basket .container {
    width: 86%;
    height: 100%;
    margin: auto;
    margin-top: 4vh;
}

.basket .container .up {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.basket .container .up .name {
    color: var(--white);
    font-size: var(--size-4);
    font-weight: 500;
}

.basket .container .up .close {
    width: 4vh;
    height: 4vh;
    background-color: #DA4D4D20;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1vh;
    color: #DA4D4D;
    cursor: pointer;
    transition: 0.3s ease all;
    font-size: 2vh;
}

.basket .container .up .close:hover {
    background-color: #DA4D4D50;
}

.basket .container .wrapper {
    margin-top: 4vh;
    height: 60vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;

}



.basket .container .wrapper .item {
    position: relative;
    width: 100%;
    padding: 2vh;
    background-color: var(--white10);
    display: flex;
    justify-content: space-between;
    gap: 2vh;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    transition: 0.3s ease all;
    margin-top: 2vh;
}

.basket .container .wrapper .item .left {
    display: flex;
    align-items: center;
    gap: 2vh;

}

.basket .container .wrapper .item:nth-child(1) {
    margin-top: 0;
}

.basket .container .wrapper .item:hover {
    background-color: var(--white20);

}

.basket .container .wrapper .item img {
    border-radius: var(--border-radius);
    width: 8vh;
    height: 8vh;
    object-fit: cover;
}

.basket .container .wrapper .item .title {
    color: var(--white);
    font-size: var(--size-4);
    font-weight: 500;
}

.basket .container .wrapper .item .info {
    display: flex;
    align-items: left;
    justify-content: center;
    flex-direction: column;
}


.basket .container .wrapper .item .price {
    color: var(--color-text);
    font-weight: 400;
    font-size: var(--size-5);
}

.basket .container .wrapper .item .row {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 1vh;
}

.basket .container .wrapper .item .remove {
    position: relative;
    background-color: #DA4D4D20;
    color: #DA4D4D;
    font-size: 1.6vh;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s ease all;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5vh;
    height: 5vh;
}

.basket .container .wrapper .item .remove:hover {
    background-color: #DA4D4D40;

}

.basket .container .total-text {
    color: var(--color-text);
    font-size: var(--size-5);
    font-weight: 600;
    margin: 3vh 0;
}

.basket .container .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.basket .container .bottom .total-price {
    color: var(--white);
    border-radius: var(--border-radius);
    font-size: var(--size-5);
    font-weight: 500;
}

.basket .purchase {
    padding: 2vh 4vh;
    width: 100%;
    border: none;
}


.product-overlay {
    position: fixed;
    inset: 0;
    background: #0000008c;
    backdrop-filter: blur(1vh);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
    transition: 0.3s ease;
    z-index: 9;
    display: none;
}


.product-details {
    width: 110vh;
    height: max-content;
    background-color: var(--color-box);
    border: 0.1vh solid var(--white20);
    border-radius: var(--border-radius);
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3vh;
    z-index: 3;
    gap: 3vh;
    box-sizing:border-box;
}

.product-details .left {
    position:relative;
    width: 100%;
    min-height: 50vh;
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 3vh;
}

.product-details .left .images {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 2vh;
    background-color: var(--white10);
    border-radius: var(--border-radius);
    padding: 3vh 2vh;
    overflow-x: scroll;
    overflow-y: hidden;
        box-sizing:border-box;
                scrollbar-width: none;


}

.product-details .left .images::-webkit-scrollbar {
    height: 0;
}


.product-details .left .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.product-details .left .side-image {
    width: 6vh;
    height: 6vh;
    max-width: 8vh;
    max-height: 8vh;
    object-fit: cover;
    border-radius: var(--border-radius);
    cursor: pointer;
}



.product-details .title {
    color: var(--white);
    font-weight: 600;
    font-size: var(--size-1);
}

.product-details .price {
    color: var(--color-primary);
    font-size: var(--size-4);
    margin-top: 2vh;
    font-weight: 600;
}


.product-details .desc {
    color: var(--color-text);
    font-weight: 400;
    line-height: 3.6vh;
    margin-top: 2vh;
    font-size: var(--size-5);
}

.detail-add-cart-btn {
    margin-top: 3vh;
}


.product-details .gift {
    position: relative;
    width: 7vh;
    height: 7vh;
    margin-top: 3vh;
    font-size: var(--size-3);
    background-color: var(--white20);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: 0.3s ease all;
    z-index: 2;
}

.product-details .gift.active {
    background-color: var(--color-primary);

}

.product-details .input-box {
    position: absolute;
    left: 9vh;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: left;
    width: 30vh;
    height: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    transform: translateX(-2vh);
    transition: 0.3s ease all;
    pointer-events: none;
    opacity: 0;
}

.gift-box {
    position: relative;
}

.product-details .gift.active {
    background-color: var(--color-primary);
}

.product-details .gift.active~.input-box {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.product-details .input-box .gift-inp {
    width: 20vh;
    height: 100%;
    background-color: var(--white10);
    border: none;
    z-index: 1;
    color: var(--color-text);
    padding: 0vh 2vh;
    box-sizing: border-box;
    font-size: var(--size-5);
    outline: none;
}

.product-details .input-box .gift-btn {
    height: 100%;
    background-color: var(--color-primary20);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0vh 2vh;
    font-size: var(--size-5);
    color: var(--color-primary);
    font-weight: 500;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    transition: 0.3s ease all;
}

.product-details .desc {
    color: var(--color-text);
    font-size: var(--size-5);
    margin: 2vh 0;
    line-height: 3vh;
    font-weight: 400;
}


.product-details .input-box .gift-btn:hover {
    background-color: var(--color-primary);
    color: var(--white);
}




@media screen and (max-width:1100px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .layout .modules {
        max-height: 100%;
    }

    .footer-desktop {
        display: none;
    }

    .footer-mobile {
        display: block;
    }


}

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



    .features {
        grid-template-columns: 1fr;
    }

    .event {
        grid-template-columns: 1fr;
    }

    .footer .top {
        flex-direction: column;
        gap: 2vh;
    }

    .footer .bottom {
        flex-direction: column-reverse;
        gap: 2vh;
    }

    .support .btns {
        flex-direction: column;
    }

    .support {
        padding: 3vh;
    }

    .primary-btn {
        font-size: var(--size-5);
    }

    .secondry-btn {
        font-size: var(--size-5);
    }

    .logo-container .logo {
        width: 26vh;
    }

    .event .image {
        min-height: 20vh;
    }

    .products-wrapper .item {
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        gap: 2vh;
    }

    .products-wrapper .item .btns {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 2vh;
    }


    .basket {
        left: 0;
        top: 0;
        height: 100vh;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }



    .product-details {
        width: 60vh;
        grid-template-columns: 1fr;
        gap: 1vh;
    }

    .product-details .left .main-image {
        max-height: 30vh;
    }

    .product-details .left {
        min-height: auto;
    }

}


.top-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    pointer-events: none;
    max-height: 8vh;
}

.big-box-decor {
    position: absolute;
    left: -3.4vh;
    top: -2vh;
    width: 105%;
}


.snow-container,
.candy-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 200;
}

/* BASE IMAGE */
.snow-container img{
    position: absolute;
    top: -60px;
    opacity: 0.9;
    will-change: transform;
    animation: fall linear infinite;
}


.quantity-field {
  display: flex;
  align-items: stretch;
  justify-content: center;
  color: var(--color-text);
  background: var(--white10);
    border-radius: var(--border-radius);
}


/* FALL ANIMATION */
@keyframes fall {
    from {
        transform: translateY(-100px) rotate(0deg);
    }

    to {
        transform: translateY(110vh) rotate(360deg);
    }
}

.snow-little {
    width: 2vh;
}


.snow-medium {
    width: 4vh;
}

.snow-big {
    width: 5vh;
}

@keyframes snow-fall-rotate {
    0% {
        transform: translate3d(0, -50px, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(30px, 60vh, 0) rotate(180deg);
    }

    100% {
        transform: translate3d(60px, 120vh, 0) rotate(360deg);
    }
}