@font-face {
    font-family: GTPressuraMono;
    src: url(../fonts/GTPressuraMono-Light.woff2)format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: GTPressuraMono;
    src: url(../fonts/GTPressuraMono.woff2)format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ATCDuel-V4Oblique;
    src: url(../fonts/ATCDuel-V4Oblique.woff2)format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: ATCDuel-V4;
    src: url(../fonts/ATCDuel-V4.woff2)format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ATCDuelRound-V4;
    src: url(../fonts/ATCDuelRound-V4.woff2)format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ATCDuelRound-V4;
    src: url(../fonts/ATCDuelRound-V4Italic.woff2)format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap
}

:root {
    --font: GTPressuraMono, sans-serif;
    --font-title: ATCDuelRound-V4, sans-serif;
}

body {
    font-family: var(--font);
    background: #fff7e3;
    overflow-x: hidden;
}

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

header {
    padding: 1vw 5vw;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 9999;
    background: #fef6e2e0;
    backdrop-filter: blur(5px);

    .logo {
        img {
            height: 4.5vw;
        }
    }

    nav {
        display: flex;
        align-items: center;
        gap: 2.5vw;

        a {
            font-family: var(--font-title);
            color: #393e46;
            text-transform: uppercase;
            transition: all .3s ease;
            font-size: 1.1vw;

            &:hover {
                color: #5d6571;
            }
        }
    }

    .order-btn {
        background: #b3d5c9;
        padding: 1.2vw 3vw;
        border-radius: 50px;
        font-family: var(--font-title);
        color: #393e46;
        transition: all .3s ease;
        font-size: 1.1vw;

        &:hover {
            background: #393e46;
            color: #fff;
        }
    }
}

@keyframes slogan-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-30%);
    }
}

@keyframes slogan-right {
    0% {
        transform: translateX(-30%);
    }

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

.main-hero {
    font-family: var(--font-title);
    font-size: 4vw;
    line-height: 4vw;
    height: 100vh;
    overflow: hidden;

    .slogan-right {
        -webkit-text-stroke: 1px black;
        color: #fff6e3;
        will-change: transform;
        justify-content: center;
        align-items: center;
        height: 100%;
        display: flex;
        animation: slogan-right 15s linear infinite;
        width: max-content;
    }

    .slogan-left {
        will-change: transform;
        justify-content: center;
        align-items: center;
        height: 100%;
        display: flex;
        animation: slogan-left 15s linear infinite;
        width: max-content;

    }

    .marquee-slogan {
        position: absolute;
        top: 8.5vw;
        left: 50%;
        transform: rotate(-7deg) translate(-50%, 0);
    }

    .hero__main-img-wrap {
        z-index: 1;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        display: flex;
        position: absolute;
        inset: 0%;
        transform: none;
    }

    .hero__main-img-circle {
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        top: 0;
        clip-path: circle(22% at 50% 58%);
        transition: all 1s ease;
        overflow: hidden;
    }

    .hero__main-img {
        width: 100%;
        transform: none;
        object-fit: cover;
    }

    .hero__heading {
        opacity: 0;
        text-align: center;
        position: absolute;
        top: 9vw;
        left: 50%;
        transform: translate(-50%);
        font-size: 2.8vw;
        transition: all .5s ease;
        transition-delay: 1s;
        max-width: 45vw;
        text-transform: uppercase;
        line-height: normal;
    }

    .detail-btn {
        position: absolute;
        bottom: -100%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.2vw;
        transition: all .3s ease;
        background: #393e46;
        padding: 1.3vw 3vw;
        color: #fff;
        border-radius: 5vw;
        line-height: normal;
        transition: all .5s ease;
        transition-delay: 1s;
    }

    &.scrolled {
        .hero__main-img-circle {
            clip-path: circle(100% at 50% 50%);
        }

        .hero__main-img {
            width: 100%;
        }

        .hero__heading {
            opacity: 1;
        }

        .detail-btn {
            bottom: 5vw;
        }
    }
}

.home-about {
    background: #B3D5C9;
    color: #393e46;
    padding: 7vw 5vw;
    overflow: hidden;

    .title {
        font-family: var(--font-title);
        font-size: 4vw;

    }

    .desc {
        font-size: 1.1vw;
        font-family: var(--font);
        text-transform: uppercase;
    }

    .detail-btn {
        background: #fef5e2;
        padding: 1.2vw 3vw;
        border-radius: 50px;
        font-family: var(--font-title);
        color: #393e46;
        transition: all .3s ease;
        font-size: 1.1vw;
        text-transform: uppercase;
        float: right;
    }

    .scroll-area {
        margin-top: 3vw;
        display: flex;
        gap: 15px;

        img {
            height: 29vw;
            width: 20vw;
            object-fit: cover;

            &:nth-of-type(even) {
                border-radius: 20vw;
            }
        }
    }
}

.parallax-bg {
    background: url('../img/chunky.svg') no-repeat center center/cover;
    background-attachment: fixed;
    height: 10vw;
}

.home-products {
    padding: 7vw 5vw 12vw 5vw;

    .title {
        font-family: var(--font-title);
        font-size: 3vw;
        text-align: center;
        color: #393e46;
        margin-bottom: 9vw;
    }

    .products-slider {
        padding: 0 5vw;

        .s-product {
            text-align: center;
            margin: 0 2vw;
            transition: all .5s ease;
            transform: scale(0.7);
            filter: blur(5px);

            img {
                width: 100%;
            }

            .product-name {
                font-family: var(--font-title);
                font-size: .9vw;
                margin-top: 1vw;
                color: #393e46;
                opacity: 0;
                transition: all .5s ease;
            }

            .p-props {
                font-family: var(--font);
                font-size: .55vw;
                color: #393e46;
                text-transform: uppercase;
                opacity: 0;
                transition: all .5s ease;

                span {
                    font-family: var(--font-title);
                }
            }
        }

        .slick-active {
            transform: scale(1);
            filter: blur(0);
        }

        .slick-center {
            transform: scale(1.6);

            .product-name,
            .p-props {
                opacity: 1;
            }
        }

        .slick-list {
            overflow: visible;
        }
    }

    .p-left,
    .p-right {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        width: 50px;
        height: 50px;
        border: 2px solid #000;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .p-left {
        left: 5.5vw;
        transform: translate(0, -50%) rotateY(180deg);
    }

    .p-right {
        right: 5.5vw;
    }
}

.home-instagram {
    padding: 7vw 5vw;
    background: #fbefd5;

    .title {
        font-family: var(--font-title);
        font-size: 3vw;
        text-align: center;
        color: #393e46;
        margin-bottom: 5vw;
    }

    .posts {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;

        .item {

            &:nth-of-type(even) {
                transform: translateY(40px);
            }

            img {
                width: 100%;
                border-radius: 20px;
            }
        }

    }

    .detail-btn {
        display: block;
        margin: 7vw auto 0 auto;
        background: #393e46;
        padding: 1.2vw 3vw;
        border-radius: 50px;
        font-family: var(--font-title);
        color: #fff;
        transition: all .3s ease;
        font-size: 1.1vw;
        width: max-content;

        &:hover {
            background: #5d6571;
        }
    }
}

.home-order {
    padding: 1vw 0vw;
    font-family: var(--font-title);
    font-size: 5vw;
    font-style: italic;
    background: #b3d5c9;
    color: #393e46;

    .item {
        display: flex;
        align-items: center;

        &:nth-of-type(even) {
            color: #fef5e2;
        }

        a {
            font-size: 1vw;
            border: 2px solid #393e46;
            padding: .5vw 1vw;
            border-radius: 2vw;
            margin: 0 2vw;
            font-style: normal;
            color: #393e46;
        }
    }

    .marquee-shop {
        animation: slogan-left 10s linear infinite;
        display: flex;
        width: max-content;
    }
}

footer {
    background: #393e46;
    padding: 3vw 5vw;
    color: #fff;
    font-family: var(--font);

    img {
        height: 4vw;
    }

    nav {
        display: flex;
        align-items: center;
        gap: 60px;

        a {
            font-family: var(--font-title);
            font-size: 1.2vw;
            color: #fef5e2;
            text-transform: uppercase;
        }
    }
}

.copyright {
    padding: 1vw 5vw;
    font-size: .9vw;
    color: #fef5e2;
    background: #282b30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;

    img {
        height: 2vw;
    }

    .agree {
        display: flex;
        gap: 30px;
    }
}

.about {
    color: #393e46;
    padding: 8vw 5vw 7vw 5vw;

    .about-top {
        display: flex;
        align-items: center;
        gap: 6vw;

        .first-title {
            font-family: var(--font-title);
            font-size: 7vw;
            text-transform: uppercase;
            margin-left: -2vw;
            width: 50%;
        }

        .first-desc {
            text-transform: uppercase;
            font-size: 1.1vw;
        }
    }

    .about-bottom {
        display: flex;
        gap: 3vw;
        margin-top: 2vw;

        .left {
            width: 30%;
            flex-shrink: 1;
            box-sizing: border-box;

            img {
                border-top: 1.5vw solid #fff;
                border-left: 1.5vw solid #fff;
                border-right: 1.5vw solid #fff;
                border-bottom: 5vw solid #fff;
                margin-top: -5vw;
            }
        }

        .right {
            width: 70%;

            flex-shrink: 1;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;

            img {
                width: 90%;
                margin-left: 10%;
                float: right;
                display: block;
            }

            .title-next {
                font-family: var(--font-title);
                font-size: 5vw;
                /* text-transform: uppercase; */
                margin-left: 0;
                line-height: 5vw;
                margin-top: 1.5vw;
                color: #282b30;
                margin-bottom: 2vw;
            }

            .first-desc {
                text-transform: uppercase;
                font-size: 1.1vw;
            }
        }
    }
}

.contact {
    color: #393e46;
    padding: 8vw 5vw 7vw 5vw;

    .cont-top {
        display: flex;
        align-items: center;
        gap: 6vw;

        .first-title {
            font-family: var(--font-title);
            font-size: 7vw;
            text-transform: uppercase;
            margin-left: 0;
            width: 50%;
        }

        .first-desc {
            text-transform: uppercase;
            font-size: 1.1vw;
        }
    }

    .cont-info {
        padding: 2vw;
        background: #fff;
        margin-top: 2vw;
        position: relative;

        .boxes {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            margin-top: 1vw;

            .c-title {
                font-family: var(--font-title);
                font-size: 1.5vw;
                text-transform: uppercase;
            }

            a {
                text-transform: uppercase;
            }
        }

        .cont-img {
            position: absolute;
            border-top: .7vw solid #fff;
            border-left: .7vw solid #fff;
            border-right: .7vw solid #fff;
            border-bottom: 1.3vw solid #fff;
            box-shadow: 2px 2px 7px #00000030;

        }

        .gallery {
            top: -1vw;
            width: 9vw;
            left: -1vw;
            transform: rotate(-20deg);
        }

        .gallery-2 {
            top: 20vw;
            width: 9vw;
            right: -3vw;
            transform: rotate(20deg);
        }

        /* .gallery-3 {
            top: -4vw;
            width: 9vw;
            right: 20vw;
            transform: rotate(10deg);
        } */
    }
}
.mobile-btn{
    display: none;
}
.mobile-menu{
    display: none;
}