@font-face {
    font-family: Sahel;
    src: url('/fonts/sahel/Sahel.eot');
    src: url('/fonts/sahel/Sahel.woff2') format('woff2'), url('./fonts/sahel/Sahel.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

:root {
    --font-family-base: Sahel, Tahoma, sans-serif;
    /* Base sizes (mobile-first) */
    --fs-base: 15px;
    --fs-h1: 1.9rem;
    --fs-h2: 1.65rem;
    --fs-h3: 1.4rem;
    --fs-h4: 1.2rem;
    --fs-h5: 1.05rem;
    --fs-h6: 1rem;
    --fs-small: 0.85rem;
    /* Line heights */
    --lh-base: 1.75;
    --lh-heading: 1.4;
    /* Max readable line length for paragraphs */
    --content-max-width: 760px;
}

@media (min-width: 768px) {
    :root {
        --fs-base: 16px;
        --fs-h1: 2.1rem;
        --fs-h2: 1.8rem;
        --fs-h3: 1.5rem;
        --fs-h4: 1.25rem;
        --fs-h5: 1.1rem;
        --fs-h6: 1rem;
        --lh-base: 1.8;
    }
}

@media (min-width: 1400px) {
    :root {
        --fs-base: 17px;
        --fs-h1: 2.25rem;
        --fs-h2: 1.9rem;
        --fs-h3: 1.6rem;
        --fs-h4: 1.3rem;
        --fs-h5: 1.15rem;
        --fs-h6: 1.05rem;
        --lh-base: 1.85;
    }
}

html {
    font-size: var(--fs-base);
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f2f7ff;
    font-family: var(--font-family-base) !important;
    font-size: 1rem;
    line-height: var(--lh-base);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    line-height: var(--lh-heading);
    font-weight: 700;
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
    font-weight: 600;
}

h5 {
    font-size: var(--fs-h5);
    font-weight: 600;
}

h6 {
    font-size: var(--fs-h6);
    font-weight: 600;
}

p, li, td, th {
    font-size: 1rem;
    line-height: var(--lh-base);
}

small, .text-muted, .small {
    font-size: var(--fs-small);
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.rtl {
    direction: rtl;
}

.rtl-justified {
    direction: rtl;
    text-align: justify;
    max-width: var(--content-max-width);
}

.ltr {
    direction: ltr;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.link-decoration-none a {
    text-decoration: none;
}

.zoom {
    transition: transform .2s;
}

    .zoom:hover {
        -ms-transform: scale(1.03); /* IE 9 */
        -webkit-transform: scale(1.03); /* Safari 3-8 */
        transform: scale(1.03);
    }

.w-fill {
    width: -webkit-fill-available;
}

.shadow-xl {
    -webkit-box-shadow: 0 30px 60px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 30px 60px 0 rgb(0 0 0 / 30%);
}

.size-70-70 {
    width: 70px;
    height: 70px;
}

.cover-background-center {
    background-size: cover;
    background-position: center;
}

.card-signin {
    margin-top: 100px;
    margin-bottom: 70px;
}

/* Color palette */
.color-1 {
    color: #22577A;
}

.bg-1 {
    background-color: #22577A;
}

.color-2 {
    color: #38A3A5;
}

.bg-2 {
    background-color: #38A3A5;
}

.color-3 {
    color: #57CC99;
}

.bg-3 {
    background-color: #57CC99;
}

.color-4 {
    color: #80ED99;
}

.bg-4 {
    background-color: #80ED99;
}

.color-5 {
    color: #FFF47D;
}

.bg-5 {
    background-color: #FFF47D;
}

.color-6 {
    color: #fff8dc;
}

.bg-6 {
    background-color: #fff8dc;
}

/* Place card component */
.place-card .card-body {
    min-height: 185px;
}

.place-card .btn-group {
    position: absolute;
    bottom: 15px;
}

.place-card-bg {
    width: 100%;
    height: 225px;
}

@media (max-width: 1400px) {
    .place-card .card-body {
        min-height: 215px;
    }
}

@media (max-width: 767px) {
    .place-card .card-body {
        min-height: unset;
    }

    .place-card .btn-group {
        position: unset;
        bottom: unset;
    }
}

.alert-light-primary {
    background-color: #DFECFF;
    max-height: 70px;
}

.toast-notification {
    opacity: 0.9 !important;
    width: 40% !important;
}

#page-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; /* grow to fill available space */
}

#main-content {
    flex: 1 0 auto; /* the actual content area expands */
}

#site-footer {
    flex-shrink: 0; /* footer never gets squeezed, stays at bottom */
    background-image: url('/img/site/home-main-bg.jpg');
    background-size: cover;
}

#site-header {
    background-image: url('/img/site/home-main-bg.jpg');
    background-size: cover;
}

#home-search-button {
    border-radius: 0px;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

#home-input-text {
    border-radius: 0px;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

#login-checkbox {
    position: relative;
    top: 3px;
    height: 17px;
    width: 17px;
}

@media (min-width: 992px) {
    #home-search-form {
        width: 600px;
        margin: auto;
    }
}

.lb-nav a.lb-next {
    opacity: 0.7 !important;
}

.lb-nav a.lb-prev {
    opacity: 0.7 !important;
}

.lb-nav a.lb-next:hover {
    opacity: 1 !important;
}

.lb-nav a.lb-prev:hover {
    opacity: 1 !important;
}

#place-main-image {
    height: 400px;
    overflow: hidden;
}

.btn-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6f42c1;
    --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #59359a;
    --bs-btn-hover-border-color: #53328f;
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #53328f;
    --bs-btn-active-border-color: #4f2f87;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6f42c1;
    --bs-btn-disabled-border-color: #6f42c1;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

    .btn-purple:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn-purple:focus-visible {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn-purple:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
    }

.place-card-img {
    width: 100%;
    aspect-ratio: 457 / 225;
    object-fit: cover;
    object-position: center;
    display: block;
}