@import "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400..700&display=swap');

* {
    font-family: "Inter", sans-serif
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

:where([dir="rtl"], [dir="rtl"] *) {
    font-family: "Noto Naskh Arabic", serif
}

.font-inter {
    font-family: "Inter", sans-serif
}

.font-noto {
    font-family: "Noto Naskh Arabic", serif
}

.font-inter-rtl:where([dir="rtl"], [dir="rtl"] *) {
    font-family: "Inter", sans-serif
}

.font-noto-rtl:where([dir="rtl"], [dir="rtl"] *) {
    font-family: "Noto Naskh Arabic", serif
}

.show-rtl:where([dir="rtl"], [dir="rtl"] *) {
    display: block;
}

.show-rtl:where(:not([dir="rtl"], [dir="rtl"] *)) {
    display: none;
}

.show-ltr:where([dir="ltr"], [dir="ltr"] *) {
    display: block;
}

.show-ltr:where(:not([dir="ltr"], [dir="ltr"] *)) {
    display: none;
}

:root {
    --bs-btn-hover-color: var(--bs-yellow)
}

.active {
    font-weight: 700
}

.w-max {
    width: max-content;
}

.btn-round {
    border-radius: 9999rem
}

.w-fit {
    width: -moz-fit-content;
    width: fit-content
}

.max-w-800 {
    max-width: 800px
}

.aspect-square {
    aspect-ratio: 1
}

.mobile-nav {
    position: fixed;
    padding: .5rem 1rem;
    top: 0;
    left: -70vw;
    height: 100vh;
    width: 70vw;
    z-index: 10;
    transition: all .3s ease-in-out
}

.mobile-nav.open {
    left: 0
}

.mobile-nav .mobile-nav-items {
    display: grid;
    grid-template-columns:1fr;
    gap: .5rem
}

.mobile-nav:where([dir=rtl],[dir=rtl] *) {
    left: unset;
    right: -70vw
}

.mobile-nav:where([dir=rtl],[dir=rtl] *).open {
    right: 0
}

.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: -100vw;
    height: 100vh;
    width: 100vw;
    background-color: #000;
    opacity: 0;
    z-index: 9;
    transition: all .3s ease-in-out
}

.mobile-nav-overlay.open {
    left: 0;
    opacity: .3
}

.mobile-nav-overlay:where([dir=rtl],[dir=rtl] *) {
    left: unset;
    right: -100vw
}

.mobile-nav-overlay:where([dir=rtl],[dir=rtl] *).open {
    right: 0
}

.scrollbar::-webkit-scrollbar {
    width: .4rem;
    height: .4rem
}

.scrollbar .small::-webkit-scrollbar {
    width: .3rem;
    height: .3rem
}

.scrollbar::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0)
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2549019608);
    -webkit-transition: color .25s linear;
    transition: color .25s linear;
    border-radius: 9999rem
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .5960784314)
}

.logo {
    height: 60px
}

.header .search.dropstart .dropdown-toggle::before {
    content: none
}

.header .search .dropdown-menu {
    width: 12rem
}

@media screen and (min-width: 1200px) {
    .header .search .dropdown-menu {
        width: 15rem
    }
}

.pagination-button {
    aspect-ratio: 1;
    min-height: 2.5rem
}

.header-search {
    display: flex
}

.header-search :first-child {
    border-top-left-radius: .375rem !important;
    border-bottom-left-radius: .375rem !important
}

.header-search :first-child:where([dir=rtl],[dir=rtl] *) {
    border-radius: 0 !important;
    border-top-right-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important
}

.dropdown-menu.p-0.show:where([dir=rtl],[dir=rtl] *) {
    right: -631%;
}

.header-search :last-child {
    border-top-right-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important
}

.header-search :last-child:where([dir=rtl],[dir=rtl] *) {
    border-radius: 0 !important;
    border-top-left-radius: .375rem !important;
    border-bottom-left-radius: .375rem !important
}