@media(max-width:968px) {
    html,body{
        overflow-x: hidden !important;
        touch-action: manipulation;
    }

    header {

        .text-center {
            text-align: left !important;
        }

        padding: 4vw 5vw;

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

        nav,
        .order-btn {
            display: none;
        }
    }

    .main-hero {
        font-size: 9vw;
        line-height: 9vw;

        .marquee-slogan {
            top: 30%;
            transform: rotate(-7deg) translate(-50%, -50%);
            width: 100%;
        overflow: hidden;
        }

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

    .home-about {
        .title {
            font-size: 9vw;
        }

        .desc {
            font-size: 3vw;
            margin-bottom: 15px;
        }

        .detail-btn {
            font-size: 3vw;
            float: left;
            margin-bottom: 30px;
        }

        .scroll-area {
            img {
                height: 300px;
                width: 350px;

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

        }
    }

    .parallax-bg {
        height: 30vw;
        background-attachment: scroll;
    }

    .home-products {
        overflow: hidden;

        .title {
            font-size: 6vw;
        }

        .products-slider {
            .s-product {
                .product-name {
                    font-size: 2.5vw;
                    margin-top: 0;
                }

                .p-props {
                    font-size: 2vw;
                    line-height: 2vw;
                    margin-bottom: 10vw;
                }
            }
        }
    }

    .home-instagram {
        .title {
            font-size: 6vw;
        }

        .detail-btn {
            margin: 17vw auto 0 auto;
            font-size: 3vw;
        }

        .posts {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .home-order {
        .item {
            a {
                font-size: 3vw;
                padding: 1vw 2vw;
                border-radius: 5vw;
                margin: 0 2vw;
            }
        }
    }

    footer {
        padding: 10vw 5vw;

        img {
            height: 9vw;
            margin: 3vw 0;
        }

        nav {
            gap: 5px;
            flex-direction: column;

            a {
                font-size: 3vw;
            }
        }
    }

    .copyright {
        padding: 4vw 5vw;
        font-size: 2vw;
        flex-direction: column;
        gap: 5px;

        img {
            height: 3vw;
        }
    }

    .main-hero {
        .detail-btn {
            font-size: 4.2vw;
            padding: 2.3vw 4vw;
        }

        &.scrolled {
            .detail-btn {
                bottom: 15vw;
            }
        }

        .hero__heading {
            top: 40vw;
            font-size: 7.8vw;
            max-width: 100vw;
        }
    }

    .about {
        margin-top: 20vw;

        .about-top {
            gap: 0vw;
            flex-direction: column;

            .first-desc {
                font-size: 3vw;
                text-align: justify;
            }
        }

        .about-bottom {
            margin-top: 10vw;

            .right {
                width: 100%;
                text-align: center;

                .title-next {
                    margin-top: 3vw;
                }

                .first-desc {
                    font-size: 3vw;
                    text-align: justify;
                }

                img{
                    width: 100%;
                    margin-left: 0;
                    margin-bottom: 30px;
                }
            }
            .left{
                display: none;
            }
        }
    }

    .contact {
        padding: 26vw 5vw 7vw 5vw;

        .cont-top {
            gap: 0;
            flex-direction: column;

            .first-title {
                width: 100%;
                text-align: center;
            }

            .first-desc {
                font-size: 3vw;
                text-align: center;
                margin-bottom: 5vw;
            }
        }

        .cont-info {
            .gallery {
                top: 5vw;
                width: 30vw;
                left: -8vw;
            }

            .gallery-2 {
                top: 75vw;
                width: 25vw;
                right: -7vw;
            }

            .boxes {
                grid-template-columns: repeat(1, 1fr);
                gap: 5vw;

                .c-title {
                    font-size: 3vw;
                    text-align: center;
                }
                            a {
                text-align: center;
                display: block;
            }
            }
        }
    }

    .mobile-btn {
        display: block;
        position: absolute;
        top: 10vw;
        right: 5vw;
        width: 6vw;
        height: 6vw;
        cursor: pointer;
        z-index: 9999;

        span {
            display: block;
            width: 100%;
            height: 0.5vw;
            background-color: #000;
            margin-bottom: 1.2vw;
            transition: all 0.3s ease-in-out;

            &:last-child {
                margin-bottom: 0;
            }
        }

        &.active {
            span {
                position: absolute;
                top: 30%;
                transform: translate(0, 0);
            }

            span:nth-child(1) {
                transform: rotate(45deg);
            }

            span:nth-child(2) {
                opacity: 0;
            }

            span:nth-child(3) {
                transform: rotate(-45deg);
            }
        }
    }

    .mobile-menu {
        position: fixed;
        top: 96px;
        background: #fef6e2e0;
        backdrop-filter: blur(5px);
        left: 0;
        right: 0;
        z-index: 999;
        padding: 30px;
        display: flex;
        opacity: 0;
        visibility: hidden;
        flex-direction: column;
        text-align: center;
        text-transform: uppercase;
        font-size: 20px;
        gap: 10px;
        font-family: 'ATCDuelRound-V4';
        border-top: 1px solid #393e46;

        &.active {
            opacity: 1;
            visibility: visible;
        }
    }
}