/* GENERIC */
@import "generic/fonts.css";
@import "generic/font-icon.css";
@import "generic/btn.css";
@import "generic/title-public.css";
@import "generic/text-public.css";
@import "generic/swiper.css";
@import "generic/backdrop.css";
@import "generic/modal.css";
@import "generic/table.css";

/* LAYOUT */
@import "layout/header.css";


@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
    html , body {
        direction: rtl;
        text-align: right;
        @apply font-['yekanbakh'] overflow-x-hidden bg-natural-beta
    }
    input,textarea{
        @apply outline-none
    }
    .container {
        @apply xl:!max-w-[1200px]
    }

    .gradient-to-text {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


    .input,.textarea{
        @apply w-full lg:rounded-2xl rounded-xl lg:text-sm-plus text-sm text-dark px-4
    }
    .input{
        @apply lg:h-16 h-11
    }
    .textarea{
        @apply lg:h-48 h-40 p-4
    }
}

@layer utilities {
    .font-primary {
        @apply font-['yekanbakh']
    }
    .font-secondary {
        @apply font-['morabba']
    }
    .mt-between-section {
        @apply lg:mt-20 mt-12
    }
    .mb-between-section {
        @apply lg:mb-20 mb-12
    }
    .my-between-section {
        @apply lg:my-20 my-12
    }
    .py-between-section {
        @apply lg:py-20 py-12
    }
    .pt-between-section {
        @apply lg:pt-20 pt-12
    }
}