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

/* Font Irans Sans X */

@font-face {
    font-family: iran-sans;
    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Thin.ttf);
    font-weight: 100;
}

@font-face {
    font-family: iran-sans;
    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBlack.ttf);
    font-weight: 200;
}

@font-face {
    font-family: iran-sans;
    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Light.ttf);
    font-weight: 300;
}

@font-face {
    font-family: iran-sans;
    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: iran-sans;
    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: iran-sans;
    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-DemiBold.ttf);
    font-weight: 600;
}

@font-face {
    font-family: iran-sans;
    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: iran-sans;
    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBold.ttf);
    font-weight: 800;
}

@font-face {
    font-family: iran-sans;
    src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Black.ttf);
    font-weight: 900;
}

/* Font Kalame */

@font-face {
    font-family: kalame;
    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Thin.ttf);
    font-weight: 100;
}

@font-face {
    font-family: kalame;
    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraLight.ttf);
    font-weight: 200;
}

@font-face {
    font-family: kalame;
    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Light.ttf);
    font-weight: 300;
}

@font-face {
    font-family: kalame;
    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: kalame;
    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: kalame;
    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-SemiBold.ttf);
    font-weight: 600;
}

@font-face {
    font-family: kalame;
    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: kalame;
    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-ExtraBold.ttf);
    font-weight: 800;
}

@font-face {
    font-family: kalame;
    src: url(../public/fonts/kalame/StandardFonts/TTF/Kalameh-Black.ttf);
    font-weight: 900;
}

body {
    font-family: iran-sans;
    padding: 0;
    margin: 0;
    background: #F5F5F5;
}

.font-kalame {
    font-family: kalame;
}

/* .bg-banner-home,
.bg-banner-register {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
} */

.bg-border-t-gradient-sign {
    background: linear-gradient(90deg, #E5E5E5 0%, #BABABA 48.5%, #E5E5E5 100%);
}

.bg-banner-home {
    background: url(../public/assets/images/banner-home.png);
    position: relative;
}

.bg-banner-home::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 40%;
    background: url(../public/assets/images/banner-register.png);
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.bg-banner-register {
    background: url(../public/assets/images/banner-register.png);
}

.animate-open {
    animation: openx;
    animation-duration: 2s;
}

@keyframes openx {
    0% {
        width: 0;
    }

    100% {
        width: 85%;
    }
}

.padding-responsive {
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 640px) {
    .padding-responsive {
        padding-left: 52px;
        padding-right: 52px;
    }
}

@media (min-width: 768px) {
    .padding-responsive {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media (min-width: 1024px) {
    .padding-responsive {
        padding-left: 108px;
        padding-right: 108px;
    }
}