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

:root {
    --main: #003d76;
    --main-rgb: 0, 61, 118;
    --secondary: #1892c3;
    --secondary-rgb: 24, 146, 195
}

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

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

.text-main:hover {
    color: var(--main) !important;
}

link.active, .navbar-nav .nav-link.show {
    color: var(--main) !important;
}

.link:hover {
    color: var(--main) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.btn-category {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--main);
    --bs-btn-border-color: var(--main);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0057a9;
    --bs-btn-active-border-color: #0065c3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--main);
    --bs-btn-disabled-border-color: var(--main)
}

.btn-main {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--main);
    --bs-btn-border-color: var(--main);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #004a90;
    --bs-btn-hover-border-color: #0057a9;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0057a9;
    --bs-btn-active-border-color: #0065c3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--main);
    --bs-btn-disabled-border-color: var(--main)
}

.btn-white {
    --bs-btn-color: #000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #f8f9fa;
    /*--bs-btn-hover-color: #000;*/
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa
}

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

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

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

.form-control.secondary-color:focus, .form-select.secondary-color:focus {
    border-color: #57c0ea;
    box-shadow: 0 0 0 .25rem rgba(var(--secondary-rgb), 0.25)
}

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

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

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

.aspect-square {
    aspect-ratio: 1
}

.border-1 {
    border-style: solid
}

.absolute-placement {
    top: 0;
    left: 0
}

.mobile-nav {
    position: fixed;
    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-logo {
    padding: 1rem
}

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

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

.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(--main, #003d76);
    -webkit-transition: color .25s linear;
    transition: color .25s linear
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #002343
}

.logo {
    height: 47px
}

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

.cursor-pointer {
    cursor: pointer;
}

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

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


#cookie-container {
    position: fixed;
    background-color: #F5F7F8;
    width: 100%;
    padding: 1rem;
    bottom: 0 !important;
    z-index: 1000;
    font-family: "Inter", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;

}

#cookie-container p {
    color: #002343 !important;
    padding: 0 !important;
    line-height: normal !important;
}

#cookie-container p a:hover {
    cursor: pointer;
}