@font-face {
    font-family: 'Peyda-Regular';
    src: url('../fonts/PeydaWeb-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Peyda-Light';
    src: url('../fonts/PeydaWeb-light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}



@font-face {
    font-family: 'Peyda-Medium';
    src: url('../fonts/PeydaWeb-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}



@font-face {
    font-family: 'Peyda-Black';
    src: url('../fonts/PeydaWeb-black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}


.pylight {
    font-family: 'Peyda-Light', sans-serif;
    font-weight: 300;
}

.pyregular {
    font-family: 'Peyda-Regular', sans-serif;
    font-weight: 400;
}

.pymedium {
    font-family: 'Peyda-Medium', sans-serif;
    font-weight: 500;
}


.pyblack {
    font-family: 'Peyda-Black', sans-serif;
    font-weight: 900;
}


.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

html {
scroll-behavior: smooth;
}

.latte-photo{
    width: 16.25rem;
}

@media screen and (min-width: 470px) {

    .snapp-food{
        width: 65%;
    }
    .hidden-latest-border{
        width: 95%;
    }
    .menu-item-persian-text{
    font-size: 1.2rem;
    }
    .menu-item-text{
        font-size: 1.2rem;
    }
    .multi-price-item{
        font-size: 0.7rem;
    }
    .price-item{
        font-size: 1.2rem;
    }
    .bottom_extra_text{
        font-size: 1.2rem;
    }
    .line_bottom_extra_text{
        height: calc(var(--spacing) * 17);
    }

    }

    @media screen and (min-width: 300px) and (max-width: 399px) {

        .cu-navbar{
            height: calc(var(--spacing)* 30);
        }
        .logo-back-shape{
            top: calc(var(--spacing) * 17);
        }
        .menu-icon-back-shape{
            top: 4.90rem;
        }
        .cu-banner{
            margin-top: calc(var(--spacing)* 50);
        }

        .menu-bar-back-shape {
            top: calc(var(--spacing) * 58.5);
        }
    }
@media screen and (min-width: 361px) and (max-width: 399px) {
    .latte-photo{
        width: 15rem;
        top: calc(var(--spacing) * 50);
    }
    .latte-photo-back-shape{
        width:calc(var(--spacing)* 55);
        height:calc(var(--spacing)* 37);
        top:calc(var(--spacing)* 133);
    }
}


@media screen and (min-width: 300px) and (max-width: 360px) {
    .latte-photo{
        width: 14.5rem;
        top: calc(var(--spacing) * 56);
    }
    .latte-photo-back-shape{
        width:calc(var(--spacing)* 50);
        height:calc(var(--spacing)* 37);
        top:calc(var(--spacing)* 129);
        border-radius: 0 0 0 8.5rem;
    }

    }