@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: #FAFAFA;
}

/* Scroll */

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #F1F1F1;
    height: 50px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #C1C1C1;
    height: 50px;
    border-radius: 20px;
}

.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-footer {
    background: url(../public/assets/images/banner-footer.png);
}

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

.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;
}

.hover-mode-item-speciality:hover p:first-child {
    color: #FAFAFA;
}

.hover-mode-item-speciality:hover p:last-child {
    color: #EFEFEF;
}

.cover-head-blogs {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.07) 31.47%, rgba(0, 0, 0, 0.31) 59.72%, rgba(0, 0, 0, 0.70) 89.39%);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.cover-head-blogs img {
    width: 100%;
}

.cover-head-blogs p {
    position: absolute;
    bottom: 32px;
    right: 24px;
    color: #FAFAFA;
    font-size: 24px;
    font-weight: 700;
}

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

    100% {
        width: 85%;
    }
}

.padding-responsive {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.hover-rotate-icon:hover svg {
    transform: rotateY(360deg);
    transition: 0.5s all;
}

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

/* Hidden Scroll */

.hidden-scroll::-webkit-scrollbar-thumb,
.MuiTabs-scroller::-webkit-scrollbar-thumb {
    background: transparent;
}

.hidden-scroll::-webkit-scrollbar,
.MuiTabs-scroller::-webkit-scrollbar {
    height: 0;
}

.opacity-page {
    animation: loadPageOpacity;
    animation-duration: 1s;
}

@keyframes loadPageOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

@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;
    }
}