@font-face {
    font-family: shekasteh;
    src: url('../font/DimaShekasteh.ttf');
}


@font-face {
    font-family: vazir;
    src: url('../font/Vazir.ttf');
}

@font-face {
    font-family: vazir-bold;
    src: url('../font/Vazir-Bold.ttf');
}

@font-face {
    font-family: yekan;
    src: url('../font/Yekan.ttf');
}


h2 {
    font-family: shekasteh !important;

    text-shadow: 0.000em 0.005em #ffffff, 0.009em 0.009em #ffffff, 0.003em 0.003em #ffffff, 0.009em 0.009em #ffffff, 0.005em 0.000em #ffffff, 0.009em -0.009em #ffffff, 0.003em -0.003em #ffffff, 0.009em -0.009em #ffffff, 0.000em 0.075em #ffffff, -0.009em -0.009em #ffffff, -0.003em -0.003em #ffffff, -0.009em -0.009em #ffffff, -0.005em -0.000em #ffffff, -0.009em 0.009em #ffffff, -0.003em 0.003em #ffffff, -0.009em 0.009em #ffffff;

}

.m-header {
    font-family: vazir-bold !important;
    width: 100%;
}

body {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    max-width: 99vw !important;
    width: 99vw !important;
    text-align: center;
    font-family: yekan !important;
}

.m-des {
    margin-left: 1rem;
    margin-right: 1rem;
}

.category-scroll {
    display: flex;
    overflow-x: auto;
    /* فعال کردن اسکرول افقی */
    -webkit-overflow-scrolling: touch;
    /* کشیدن نرم روی موبایل */
    scrollbar-width: none;
    /* برای فایرفاکس مخفی کردن اسکرول */
}

.category-scroll::-webkit-scrollbar {
    display: none;
    /* برای کروم، اج و سافاری مخفی کردن اسکرول */
}

.category-scroll .card {
    flex-shrink: 0;
    /* کارت‌ها کوچک نشوند */
    min-width: 80px;
    /* حداقل عرض کارت */
    padding: 0.5rem 1rem;
    /* فاصله متن داخل کارت */
    font-size: 1rem;
    /* اندازه متن ثابت و قابل خواندن */
    text-align: center;
}

/* tea-loader.css */

/* لودینگ کل صفحه */
/* لودینگ کل صفحه */

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
}

svg {
    width: 70px;
    fill: #084c61;
}

#tea-bag {
    animation: bag 1s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: top;
}

#steam1,
#steam2 {
    fill: none;
    stroke: #1aa179;
    stroke-width: 40;
}

#steam1 {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: wave1 2s infinite;
}

#steam2 {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: wave2 2s infinite;
}

@keyframes wave1 {
    10% {
        stroke-dashoffset: 300;
        opacity: 0.4;
    }

    80% {
        stroke-dashoffset: 90;
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 90;
        opacity: 0;
    }
}

@keyframes wave2 {
    0% {
        stroke-dashoffset: 920;
        opacity: 0.4;
    }

    100% {
        stroke-dashoffset: 250;
        opacity: 0;
    }
}

@keyframes bag {
    from {
        transform: rotateZ(-5deg);
    }

    to {
        transform: rotateZ(15deg);
    }
}

.loading {
    display: flex;
    flex-direction: row;
}

.loading-letter {
    font-size: 18px;
    font-weight: bold;
    font-family: shekasteh;
    color: #0da3bc;
    animation: bounce 2s infinite;
}

.loading-letter:nth-child(2) {
    animation-delay: .1s;
}

.loading-letter:nth-child(3) {
    animation-delay: .2s;
}

.loading-letter:nth-child(4) {
    animation-delay: .3s;
}

.loading-letter:nth-child(5) {
    animation-delay: .4s;
}

.loading-letter:nth-child(6) {
    animation-delay: .5s;
}

.loading-letter:nth-child(7) {
    animation-delay: .6s;
}

.loading-letter:nth-child(8) {
    animation-delay: .8s;
}

.loading-letter:nth-child(9) {
    animation-delay: 1s;
}

.loading-letter:nth-child(10) {
    animation-delay: 1.2s;
}

@keyframes bounce {
    0% {
        transform: translateY(0px)
    }

    40% {
        transform: translateY(-6px);
    }

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