@import "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";

@font-face {
    src: url("../../assets/font/uniqaidar_bukra.ttf");
    font-family: "bukra";
}

@font-face {
    src: url("../../assets/font/uniqaidar_news_headline_030.ttf");
    font-family: "headline";
}

:root {
    --red-main: #b82225;
    --red-main-rgb: 184, 34, 37;
    --red-secondary: #d94e50;
    --red-secondary-rgb: 217, 78, 80;
    --red-carousel: #E23D24;
    --red-carousel-rgb: 226, 61, 36
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

.bg-red-main {
    background-color: var(--red-main)
}

.text-red-main {
    color: var(--red-main)
}

.accent-red-main {
    accent-color: var(--red-main)
}

.caret-red-main {
    caret-color: var(--red-main)
}

.border-red-main {
    border-color: var(--red-main)
}

.decoration-red-main {
    text-decoration-color: var(--red-main)
}

.bg-red-secondary {
    background-color: var(--red-secondary)
}

.text-red-secondary {
    color: var(--red-secondary)
}

.accent-red-secondary {
    accent-color: var(--red-secondary)
}

.caret-red-secondary {
    caret-color: var(--red-secondary)
}

.border-red-secondary {
    border-color: var(--red-secondary)
}

.decoration-red-secondary {
    text-decoration-color: var(--red-secondary)
}

.btn-red {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--red-main);
    --bs-btn-border-color: var(--red-main);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dd494c;
    --bs-btn-hover-border-color: #e15f61;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e15f61;
    --bs-btn-active-border-color: #e57476;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--red-main);
    --bs-btn-disabled-border-color: var(--red-main)
}

.btn-outline-red {
    --bs-btn-color: var(--red-main);
    --bs-btn-border-color: var(--red-main);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--red-main);
    --bs-btn-hover-border-color: var(--red-main);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--red-main);
    --bs-btn-active-border-color: var(--red-main);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--red-main);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--red-main);
    --bs-gradient: none
}

.form-control.red:focus {
    border-color: #e15f61;
    box-shadow: 0 0 0 .25rem rgba(var(--red-main-rgb), 0.25)
}

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

:where([dir="rtl"], [dir="rtl"] *) {
    font-family: "bukra", sans-serif;
}

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

.font-bukra {
    font-family: "bukra", sans-serif;
}

.font-headline {
    font-family: "headline", sans-serif;
}

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

.font-headline-rtl:where([dir="rtl"], [dir="rtl"] *) {
    font-family: "headline", sans-serif;
    font-weight: normal !important;
}

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

.active.carousel-item-end:where([dir=rtl],[dir=rtl] *),
.carousel-item-next:not(.carousel-item-start):where([dir=rtl],[dir=rtl] *) {
    transform: translateX(-100%);
}
.active.carousel-item-start:where([dir=rtl],[dir=rtl] *),
.carousel-item-prev:not(.carousel-item-end):where([dir=rtl],[dir=rtl] *) {
    transform: translateX(100%);
}


.active {
    font-weight: 700
}

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

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

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

.w-max {
    width: max-content
}

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

.carousel-indicators [data-bs-target] {
    height: 10px;
    width: 10px;
    border-radius: 9999rem !important;
    border: 1px
}

.logo {
    height: 69px;
    width: 69px
}

@media screen and (min-width: 992px) {
    .logo.header-logo {
        margin-right: 4rem
    }
}

.logo.header-logo:where([dir=rtl],[dir=rtl] *) {
    margin-right: unset
}

@media screen and (min-width: 992px) {
    .logo.header-logo:where([dir=rtl],[dir=rtl] *) {
        margin-left: 4rem
    }
}

.header-search {
    display: flex
}

@media screen and (min-width: 992px) {
    .header-search {
        width: 25rem;
    }
}

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

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

.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: var(--red-secondary);
    -webkit-transition: color .25s linear;
    transition: color .25s linear
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--red-main)
}

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

.text-clip-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.cursor-pointer {
    cursor: pointer;
}

/*.dropdown:hover .dropdown-menu {*/
/*    display: block;*/
/*    margin-top: 0;*/
/*}*/

.nav-secondary-menu {
    left: -1rem;
    text-align: start;
}

.nav-secondary-menu:where([dir=rtl],[dir=rtl] *) {
    left: auto;
    right: -1rem;
}

.text-secondary{
    color: #000000 !important;
}

*{
    line-height: 1.8rem;
}