@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@layer base {
    @font-face {
        font-family: "Dana";
        src: url("../fonts/Dana/woff2/DanaFaNum-Regular.woff2") format("woff2");
        font-display: swap;
    }
    @font-face {
        font-family: "Dana Medium";
        src: url("../fonts/Dana/woff2/DanaFaNum-Medium.woff2") format("woff2");
        font-display: swap;
    }
    @font-face {
        font-family: "Dana DemiBold";
        src: url("../fonts/Dana/woff2/DanaFaNum-DemiBold.woff2") format("woff2");
        font-display: swap;
    }
    @font-face {
        font-family: "Morabba Light";
        src: url("../fonts/Morabba/woff2/Morabba-Light.woff2") format("woff2");
        font-display: swap;
    }
    @font-face {
        font-family: "Morabba Medium";
        src: url("../fonts/Morabba/woff2/Morabba-Medium.woff2") format("woff2");
        font-display: swap;
    }
    @font-face {
        font-family: "Morabba Bold";
        src: url("../fonts/Morabba/woff2/Morabba-Bold.woff2") format("woff2");
        font-display: swap;
    }
}
@theme {
    /* colors */
    --color-Brown-100: #ece0d1;
    --color-Brown-300: #dbc1ac;
    --color-Brown-600: #967259;
    --color-Brown-900: #634832;
    /* boxShadow */
    --shadow-normal: 0 1px 10px rgba(0, 0, 0, 0.05);
    /* radius */
    --radius-4xl: 2rem;
    /* fontfamliy */
    --font-Dana: "Dana";
    --font-DanaMedium: "Dana Medium";
    --font-DanaDemiBold: "Dana DemiBold";
    --font-MorabbaLight: "Morabba Light";
    --font-MorabbaMedium: "Morabba Medium";
    --font-MorabbaBold: "Morabba Bold";
    /* letterspacing */
    --tracking-tightest: -0.065rem;
    /* breakpoint */
    --breakpoint-xs: 480px;
    --breakpoint-2xl: initial;
    /* spacing */
    --spacing-4.5: 1.125rem;
    --spacing-25: 6.25rem;
    --spacing-50: 12.5rem;
}
@utility container {
    @apply mx-auto px-4 lg:px-2.5;
}
@layer utilities {
    .tracking-tightest {
        --tw-tracking: var(--tracking-tightest);
    }
    /* WebKit مرورگرها */
    ::-webkit-scrollbar {
        @apply w-3 h-3; /* ضخامت کمی بیشتر */
    }

    ::-webkit-scrollbar-track {
        @apply bg-gray-200 dark:bg-gray-800;
        border-radius: 12px; /* منحنی کلی track */
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    }

    ::-webkit-scrollbar-thumb {
        @apply bg-zinc-400 dark:bg-zinc-500 rounded-full;
    }

    ::-webkit-scrollbar-thumb:hover {
        @apply bg-zinc-500 dark:bg-zinc-400;
    }

    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: theme("colors.zinc.400") theme("colors.gray.200");
    }

    .dark * {
        scrollbar-color: theme("colors.zinc.500") theme("colors.gray.800");
    }
    .flex-center {
        @apply flex items-center justify-center;
    }
    .ltr-text {
        direction: ltr;
        text-align: left;
    }
}
@layer components {
    .submenu {
        @apply hidden flex-col gap-y-3 pr-7 mt-3 text-zinc-600 dark:text-white text-sm;
    }
    .submenu--open {
        @apply flex;
    }
    .submenu__item--active {
        @apply relative text-orange-300 pr-2.5;
    }
    .submenu__item--active::after {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 100px;
        background-color: #fdba74;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    .overlay {
        @apply md:hidden invisible opacity-0 fixed inset-0 w-full h-full bg-black/40 z-10 transition-all;
    }
    .overlay--visible {
        @apply visible opacity-100;
    }

    .circle {
        @apply flex items-center justify-center border rounded-full;
    }
    .circle--main {
        @apply absolute bottom-0 left-0 right-0 mx-auto hidden md:flex;
    }
    .circle--lg {
        @apply w-[203px] h-[203px] border-white/25;
    }
    .circle--md {
        @apply w-[145px] h-[145px] border-white/50;
    }
    .circle--sm {
        @apply w-[95px] h-[95px] border-white/80;
    }
    @media screen and (min-width: 1280px) {
        html.dark .product {
            background-image: url("../images/body-bg.png");
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .product {
            background:
                linear-gradient(rgba(243, 244, 246, 0.65), rgba(243, 244, 246, 0.65)), url("../images/body-bg.png");
            background-repeat: no-repeat;
            background-size: 100%;
        }
    }

    .section--title {
        @apply font-MorabbaMedium text-zinc-700 dark:text-white text-2xl md:text-5xl;
    }
    .section--subtitle {
        @apply inline-block mt-0.5 md:mt-1.5 font-MorabbaLight text-zinc-700 dark:text-white text-lg md:text-3xl;
    }
    .section--link {
        @apply flex items-center md:gap-x-1 h-10 pr-3 pl-1 rounded-md text-orange-300 md:text-xl tracking-tightest md:hover:bg-orange-300/20 transition-colors;
    }
    .offer {
        @apply relative text-gray-400;
    }
    .offer::after {
        content: "";
        width: 100%;
        height: 1px;
        position: absolute;
        inset: 0;
        margin: auto;
        background-color: #ef4444;
        top: -1.5px;
    }
    .category--banner__item1 {
        background:
            linear-gradient(270deg, rgba(0, 0, 0, 0.6) 33.85%, rgba(0, 0, 0, 0.1) 100%),
            url("../images/About us/۲۰۲۳_۱۱_۱۲_۱۳_۳۳_IMG_0995.JPG");
        background-repeat: no-repeat;
        background-size: cover;
    }
    .category--banner__item2 {
        background:
            linear-gradient(270deg, rgba(0, 0, 0, 0.6) 33.85%, rgba(0, 0, 0, 0.1) 100%),
            url("../images/About us/IMG_0773.JPG");
        background-repeat: no-repeat;
        background-size: cover;
    }
    .swiper-button-prev-custom,
    .swiper-button-next-custom {
        @apply flex items-center justify-center size-9 md:size-11 shadow-normal bg-white text-zinc-700 dark:text-white dark:bg-zinc-700 rounded-full hover:bg-gray-300 dark:hover:bg-white dark:hover:text-zinc-700 transition-all;
    }
    .services {
        @apply relative;
    }
    .services::after,
    .services::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        margin: auto;
        background-color: #d1d5db;
    }
    html.dark .services::after,
    html.dark .services::before {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .services::after {
        width: 1px;
        height: calc(100% + 1.25rem);
    }
    .services::before {
        width: calc(100% - 2rem);
        height: 1px;
    }
    @media screen and (min-width: 640px) {
        .services::after,
        .services::before {
            content: none;
        }
    }
    .is-active {
        color: #fdba74;
    }
}