/*
 * Name: Style.css
 * Author: NetThemes
 * Author Url: https://www.netthemes.ir
 * Description: Parnet HTML Template styles
 * Structure:
                #Variables
                #Base
                #Utilities
                |---- #flex
                #Components
                |---- #stars
                |---- #badge
                |---- #modal
                |---- #swiper
                |---- #PathVisualizer
                |---- #jalaliDatePicker
                #Layouts
                |---- #wrapper
                |---- #header
                |---- #footer
                #DarkTheme
                #Pages
                |---- #index
                |---- #search
                |---- #404
                |---- #profile
                |---- #orders
                |---- #contact
                |---- #detail
                |---- #blog
*/
/* -------------------------------------------------------------------------- */
/*                                 #Variables                                 */
/* -------------------------------------------------------------------------- */
/* :root {
    --font-size-mobile: 13px;
    --font-size: 14px;
    --font-family: Vazirmatn FD, tahoma !important;
    --header-height: 85px;
} */
:root {
    --font-size-mobile: 13px;
    --font-size: 14px;
    --font-family: Vazirmatn FD, tahoma !important;
    --header-height: 70px;
}

/* -------------------------------------------------------------------------- */
/*                                   #fonts                                   */
/* -------------------------------------------------------------------------- */
/* vazir variable */
/* @font-face {
    font-family: Vazirmatn;
    font-stretch: normal;
    font-style: normal;
    font-weight: 100 900;
    src: url('../vendor/fonts/vazir/Vazirmatn-VariableFont_wght.ttf');
} */


/* -------------------------------------------------------------------------- */
/*                                    #Base                                   */
/* -------------------------------------------------------------------------- */
/* Reset basic styling for HTML and body */
html,
body {
    /* Remove default margins and padding */
    margin: 0;
    padding: 0 !important;
    overflow: auto !important;
    font-size: var(--font-size-mobile);
}

@media screen and (min-width: 576px) {

    html,
    body {
        font-size: var(--font-size);
    }

}

/* Ensure consistent font family for tooltips and body */
.tooltip,
body {
    font-family: var(--font-family) !important;
}

/* Basic layout for the body */
body {
    height: 100%;
    /* vertical container for content */
    display: flex;
    flex-direction: column;
}

/* Prevent images from exceeding container width */
img {
    max-width: 100%;
}


/* -------------------------------------------------------------------------- */
/*                                 #Utilities                                 */
/* -------------------------------------------------------------------------- */
/* ---------------------------------- #flex --------------------------------- */
/* flex row */
.nt-flex,
.nt-flex-start-start {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: flex-start;
    align-items: start;
}

.nt-flex-start-center {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: flex-start;
    align-items: center;
}

.nt-flex-start-end {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: flex-start;
    align-items: end;
}

.nt-flex-center-start {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: center;
    align-items: start;
}

.nt-flex-center-center {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: center;
    align-items: center;
}

.nt-flex-center-end {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: center;
    align-items: end;
}

.nt-flex-end-start {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: flex-end;
    align-items: start;
}

.nt-flex-end-center {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: flex-end;
    align-items: center;
}

.nt-flex-end-end {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: flex-end;
    align-items: end;
}

.nt-flex-around-start {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: space-around;
    align-items: start;
}

.nt-flex-around-center {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: space-around;
    align-items: center;
}

.nt-flex-around-end {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: space-around;
    align-items: end;
}

.nt-flex-between-start {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: space-between;
    align-items: start;
}

.nt-flex-between-center {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: space-between;
    align-items: center;
}

.nt-flex-between-end {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    justify-content: space-between;
    align-items: end;
}

/* flex column */
.nt-flex-column,
.nt-flex-column-start-start {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: flex-start;
    align-items: start;
}

.nt-flex-column-start-center {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: flex-start;
    align-items: center;
}

.nt-fl-columnex-start-end {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: flex-start;
    align-items: end;
}

.nt-flex-column-center-start {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: center;
    align-items: start;
}

.nt-flex-column-center-center {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: center;
    align-items: center;
}

.nt-fle-columnx-center-end {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: center;
    align-items: end;
}

.nt-flex-column-end-start {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: flex-end;
    align-items: start;
}

.nt-flex-column-end-center {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: flex-end;
    align-items: center;
}

.nt-flex-column-end-end {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: flex-end;
    align-items: end;
}

.nt-flex-column-around-start {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: space-around;
    align-items: start;
}

.nt-flex-column-around-center {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: space-around;
    align-items: center;
}

.nt-flex-column-around-end {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: space-around;
    align-items: end;
}

.nt-flex-column-between-start {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: space-between;
    align-items: start;
}

.nt-flex-column-between-center {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: space-between;
    align-items: center;
}

.nt-flex-column-between-end {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;

    justify-content: space-between;
    align-items: end;
}

/* ------------------------------- fontWeight ------------------------------- */
.nt-fw-100 {
    font-family: "Vazirmatn", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}
.nt-fw-200 {
    font-family: "Vazirmatn", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}
.nt-fw-300 {
    font-family: "Vazirmatn", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}
.nt-fw-400 {
    font-family: "Vazirmatn", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.nt-fw-500 {
    font-family: "Vazirmatn", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.nt-fw-600 {
    font-family: "Vazirmatn", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
.nt-fw-700 {
    font-family: "Vazirmatn", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.nt-fw-800 {
    font-family: "Vazirmatn", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}
.nt-fw-900 {
    font-family: "Vazirmatn", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

/* -------------------------------------------------------------------------- */
/*                                 #Components                                */
/* -------------------------------------------------------------------------- */
/* ----------------------------- commonQuestions ---------------------------- */
.commonQuestions {
    background-color: var(--bs-light-bg-subtle);
}
.commonQuestions .accordion-button {
    --bs-accordion-btn-padding-y: 1.5rem;
    --bs-accordion-active-color: var(--bs-dark);
    --bs-accordion-active-bg: var(--bs-gray-100);
}

[data-bs-theme=dark] .commonQuestions .accordion-button {
    --bs-accordion-active-color: var(--bs-light);
    --bs-accordion-active-bg: var(--bs-gray-800);
}

.commonQuestions .commonQuestions-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--bs-border-radius-pill);
    border: 1px solid transparent;

    display: flex;
    justify-content: center;
    align-items: center;

    transition: border-color 0.15s ease-in-out;
}
.commonQuestions .accordion-button:hover .commonQuestions-icon,
.accordion-button:not(.collapsed) .commonQuestions-icon {
    border-color: var(--bs-secondary);
}
.commonQuestions-icon i {
    transition: transform 1s ease-in-out;
}
.accordion-button:not(.collapsed) .commonQuestions-icon i {
    transform: rotateY(360deg);
}

.commonQuestions .accordion-body {
    --bs-accordion-body-padding-x: 1.5rem;
    --bs-accordion-body-padding-y: 1.5rem;
}

/* --------------------------------- #stars --------------------------------- */
/* https://www.putzisan.com/articles/accessible-star-rating-radio-input-html-css
*/
.nt-stars label {
    position: relative;
    color: grey;
    padding: 0 0.25rem;
    transition: color 0.15s;
}

/* Position the invisible input on top of the label */
.nt-stars input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    /* CSS reset */
    margin: 0;
}

/* Add an outline when the input is focused via the keyboard */
.nt-stars label:has(input:focus-visible) {
    outline-offset: 1px;
    outline: black solid 2px;
}

/* Color Adjustments when the input is checked, hovered, or active */
/* checked */
.nt-stars label:is(:has(> input:checked), :has(~ label > input:checked)) {
    color: gold;
}

/* hover */
.nt-stars label:is(:has(> input:hover), :has(~ label > input:hover)) {
    color: goldenrod;
}

/* we need to duplicate the :active identifier, so that the specificity of the selector is higher than the ones from before */
.nt-stars label:has(input:active):has(input:active) {
    color: darkgoldenrod;
}

/* --------------------------------- #badge --------------------------------- */
.nt-badge {
    --bs-bg-opacity: .05;
    padding: 0.2rem 1rem;
    border-radius: var(--bs-border-radius);
    position: relative;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

/* --------------------------------- #modal --------------------------------- */
.modal-body {
    max-height: calc(80vh);
    overflow-y: auto;
}

.modal-header {
    border-bottom: 0;
}

.nt-modal-wrapper {
    text-align: center;
    padding: 1rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

#signModal {
    --bs-modal-header-border-color: transparent;
}


/* --------------------------------- #swiper -------------------------------- */
.swiper {
    /* swiper theme */
    --swiper-theme-color: var(--bs-primary);
}
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
    color: var(--bs-dark);

    top: auto;
    bottom: 0;
    --swiper-navigation-size: 1.5rem;
}

/* ----------------------------- #PathVisualizer ---------------------------- */
.nt-PathVisualizer {
    position: relative;
    height: 1rem;

    display: flex;
    justify-content: center;
    align-items: center;
}

.nt-PathVisualizer::before,
.nt-PathVisualizer::after {
    content: '';

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 0.5rem;
    height: 0.5rem;

    border-radius: 100%;
    border: 1px solid var(--bs-gray);
    background-color: var(--bs-light);
}

.nt-PathVisualizer::before {
    left: 0;
}

.nt-PathVisualizer::after {
    right: 0;
}

.nt-PathVisualizer.reversed-icon i {
    /* transform: rotate(180deg); */
}

.nt-PathVisualizer .nt-PathVisualizer-line {
    width: 100%;
    height: 1px;
    border-top: 1px dashed var(--bs-gray);

    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/* ---------------------------- #jalaliDatePicker --------------------------- */
/* change color of buttons */
jdp-container .jdp-btn-close,
jdp-container .jdp-btn-empty,
jdp-container .jdp-btn-today {
    background: var(--bs-info) !important;
}

/* change red colors of holidays ... */
jdp-container .jdp-day-name.holly-day,
jdp-container .jdp-day-name.last-week,
jdp-container .jdp-day.holly-day,
jdp-container .jdp-day.last-week {
    color: var(--bs-danger) !important;
}

/* -------------------------------------------------------------------------- */
/*                                  #Layouts                                  */
/* -------------------------------------------------------------------------- */
/* -------------------------------- #wrapper -------------------------------- */
.main {
    position: relative;
    flex-grow: 1;
}

.wrapper {
    width: 100%;
    max-width: 400px;
    position: relative;

    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 576px) {
    .wrapper {
        max-width: 600px;
    }
}

@media screen and (min-width: 768px) {
    .wrapper {
        max-width: 800px;
    }
}

@media screen and (max-width: 992px) {
    .booking-wrapper {
        background-size: 130% !important;
        background-position: left top !important;
    }
}
@media screen and (max-width: 467px) {
    .booking-wrapper {
        background-size: 240% !important;
        background-position: 12% top !important;
    }
}

@media screen and (min-width: 992px) {
    .wrapper {
        max-width: 1000px;
    }
}

@media screen and (min-width: 1200px) {
    .wrapper {
        max-width: 1400px;
    }
}

@media screen and (min-width: 1600px) {
    .wrapper {
        max-width: 1680px;
    }
}

.wrapper-xs {
    width: 100%;
    max-width: 380px;
    position: relative;

    margin: 0 auto;
}

.wrapper-sm {
    width: 100%;
    max-width: 576px;
    position: relative;

    margin: 0 auto;
}

.wrapper-md {
    width: 100%;
    max-width: 768px;
    position: relative;

    margin: 0 auto;
}

.wrapper-lg {
    width: 100%;
    max-width: 992px;
    position: relative;

    margin: 0 auto;
}

.wrapper-xl {
    width: 100%;
    max-width: 1200px;
    position: relative;

    margin: 0 auto;
}

/* --------------------------------- #header -------------------------------- */
.header {
    width: 100%;
    height: var(--header-height);
    /*background-color: var(--bs-light);*/
    border-top: 0px solid var(--bs-body-bg);
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

[data-bs-theme=dark] .header {
    background-color: var(--bs-dark);
}

.header,
.header .link {
    color: var(--bs-dark) !important;
}

[data-bs-theme=dark] .header,
[data-bs-theme=dark] .header .link {
    color: var(--bs-light) !important;
}

/* dynamic */
.header.dynamic {
    height: var(--header-height);
    border-bottom: 1px solid transparent;
    background-color: transparent;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    transition: background-color 0.15s ease-in-out,
    color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}

/* dynamic scrolled */
.header.dynamic.scrolled {
    border-bottom-color: var(--bs-gray-100);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(1rem);
}

[data-bs-theme=dark] .header.dynamic.scrolled {
    border-bottom-color: var(--bs-gray-900);
    background: rgba(17, 24, 39, 0.9);
}

.header.dynamic,
.header.dynamic .link {
    color: var(--bs-white) !important;
}

.header.dynamic.scrolled,
.header.dynamic.scrolled .link {
    color: var(--bs-dark) !important;
}

[data-bs-theme=dark] .header.dynamic.scrolled,
[data-bs-theme=dark] .header.dynamic.scrolled .link {
    color: var(--bs-light) !important;
}

/* header logo */
.header-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}
.header-logo a {
    display: block;
    background: url('../img/logo.png') no-repeat;
    background-size: contain;
    text-indent: -1000000px;
    width: 65px;
    aspect-ratio: 4 / 3;
}

/* header nav */
.header-nav {
    display: flex;
    gap: 1rem;
    padding: 0 3rem;
}

.header-nav .btn {
    font-weight: bold;
}

.header-nav .dropdown-menu {
    --bs-dropdown-min-width: 13rem;
    --bs-dropdown-padding-y: 0.75rem;
}

.header-nav .dropdown-item {
    --bs-dropdown-item-padding-y: 0.75rem;
    --bs-dropdown-item-padding-x: 1rem;

    font-weight: bold;

    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* header user */
.header-user {
    font-weight: bold;
}

[data-bs-theme=dark] .header-user {
    color: var(--bs-gray-200);
    background-color: var(--bs-gray-800);

    border-color: var(--bs-gray-500);
}

[data-bs-theme=dark] .header-user:hover {
    background-color: var(--bs-gray-700);
    border-color: var(--bs-gray-400);
}


/* --------------------------------- #footer -------------------------------- */
.footer {
    margin-top: var(--bs-gutter-x);
    position: relative;
}

.footer .link {
    color: var(--bs-dark);
}

[data-bs-theme=dark] .footer .link {
    color: var(--bs-white);
}

.footer::before {
    content: '';

    width: 100%;
    height: 3px;
    background: linear-gradient(to left, var(--bs-primary), var(--bs-secondary));
    background-size: 200% 200%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    animation: Animation 20s ease infinite;
}

@keyframes Animation {
    0% {
        background-position: 10% 0%
    }

    50% {
        background-position: 91% 100%
    }

    100% {
        background-position: 10% 0%
    }
}

.footer svg {
    width: 100%;

    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

/* content */
.footer-badge {
    min-width: 7rem;
    padding: 1rem 0.5rem;

    background-color: var(--bs-white);
    border: 1px solid var(--bs-gray-200);
    border-radius: var(--bs-border-radius);

    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-badge img {
    max-height: 80px;
}

.footer-gr-icon {
    background-image: linear-gradient(to bottom right, var(--bs-primary), var(--bs-primary-bg-subtle));
    color: transparent;
    background-clip: text;
}

/* copyright */
.footer-copyright .footer-copyright a {
    transition: color 0.15s ease-in-out;
}

.footer-copyright .footer-copyright a:hover {
    background-image: linear-gradient(to bottom right, var(--bs-primary), var(--bs-primary-bg-subtle)) !important;
    color: transparent !important;
    background-clip: text !important;
}

/* svg */
.footer svg .path-first {
    fill: var(--bs-gray-100);
}

[data-bs-theme=dark] .footer svg .path-first {
    fill: var(--bs-gray-800);
}

.footer svg .path-second {
    fill: var(--bs-gray-200);
}

[data-bs-theme=dark] .footer svg .path-second {
    fill: var(--bs-gray-700);
}

/* -------------------------------------------------------------------------- */
/*                                 #DarkTheme                                 */
/* -------------------------------------------------------------------------- */
[data-bs-theme=dark] .bg-light {
    --bs-light-rgb: var(--bs-dark-rgb)
}

[data-bs-theme=dark] .bg-white {
    --bs-white-rgb: var(--bs-dark-rgb);
}

[data-bs-theme=dark] .link-dark {
    --bs-dark-rgb: #fff;
}

[data-bs-theme=dark] .link-dark:hover {
    color: var(--bs-gray-200) !important;
}

[data-bs-theme=dark] .btn-light {
    color: var(--bs-gray-300);
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
}

[data-bs-theme=dark] .btn-light:hover {
    background-color: var(--bs-gray-700);
    border-color: var(--bs-gray-300);
}

[data-bs-theme=dark] .btn-outline-dark {
    color: var(--bs-gray-300);
    border-color: var(--bs-gray-400);
}

[data-bs-theme=dark] .btn-outline-dark:hover {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-300);
}

[data-bs-theme=dark] .table-light {
    --bs-table-color: var(--bs-light);
    --bs-table-bg: var(--bs-gray-800);
}

/* jalali date picker */
[data-bs-theme=dark] jdp-container,
[data-bs-theme=dark] jdp-container .jdp-month,
[data-bs-theme=dark] jdp-container .jdp-month input,
[data-bs-theme=dark] jdp-container .jdp-month select,
[data-bs-theme=dark] jdp-container .jdp-time,
[data-bs-theme=dark] jdp-container .jdp-time input,
[data-bs-theme=dark] jdp-container .jdp-time select,
[data-bs-theme=dark] jdp-container .jdp-year,
[data-bs-theme=dark] jdp-container .jdp-year input,
[data-bs-theme=dark] jdp-container .jdp-year select {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-gray-100) !important;
}

[data-bs-theme=dark] jdp-container .jdp-icon-minus,
[data-bs-theme=dark] jdp-container .jdp-icon-plus {
    border-color: var(--bs-gray-500);
}

[data-bs-theme=dark] jdp-container .jdp-months,
[data-bs-theme=dark] jdp-container .jdp-years {
    fill: rgba(255, 255, 255, 0.95) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-bs-theme=dark] jdp-container .jdp-day,
[data-bs-theme=dark] jdp-container .jdp-day-name {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-bs-theme=dark] jdp-container .jdp-day-name.holly-day,
[data-bs-theme=dark] jdp-container .jdp-day-name.last-week,
[data-bs-theme=dark] jdp-container .jdp-day.holly-day,
[data-bs-theme=dark] jdp-container .jdp-day.last-week {
    color: var(--bs-danger) !important;
}

/* swiper */
[data-bs-theme=dark] .swiper .swiper-button-prev,
[data-bs-theme=dark] .swiper .swiper-button-next {
    color: var(--bs-light);
}

/* -------------------------------------------------------------------------- */
/*                                   #pages                                   */
/* -------------------------------------------------------------------------- */
/* --------------------------------- #index --------------------------------- */
/* booking -------------------------------- */
.booking-wrapper {
    max-height: 37rem;
    margin-bottom: 8rem;
    min-height: 20rem;
    position: relative;
    z-index: 100;

    background: linear-gradient(to top right, var(--bs-primary), var(--bs-secondary));
    background-repeat: no-repeat !important;
    background-size: 95%;
    background-position: top;

    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.booking-inner {
    margin-bottom: -5rem;
    margin-top: 15rem;
    border-radius: var(--bs-border-radius);
}

.booking-form {
    --booking-form-item-height: 4.2rem;
    --booking-form-border-width: 2px;
    --booking-form-border-color: var(--bs-gray-300);
    --booking-form-font-size: 1.15rem;

    background-color: var(--bs-body-bg);
    padding: 4rem 2rem;
    margin-top: 0;

    border-radius: var(--bs-border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.booking-wrapper .form-control {
    height: var(--booking-form-item-height);
    font-size: var(--booking-form-font-size);
}

.booking-select .form-select {
    height: var(--booking-form-item-height);
    display: flex;
    align-items: center;

    /* remove bootstrap arrow from select */
    --bs-form-select-bg-img: '';
}

.booking-travelers .btn.dropdown-toggle,
.booking-form .form-select,
.booking-form .form-control {
    border-width: var(--booking-form-border-width);
    border-color: var(--booking-form-border-color);
}

/* booking nav */
.booking-nav {
    padding: 0.75rem 0.75rem 0 0.75rem;
    background-color: #fff;
    border-radius: var(--bs-border-radius);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border-bottom: 1px solid #d7d7d7;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

[data-bs-theme=dark] .booking-nav {
    background-color: rgba(17, 24, 39, 0.9);
}

.booking-nav .btn {
    border: 0;

    font-weight: bold;
    font-size: 1.1rem;

    color: var(--bs-gray-600);
    /*background-color: var(--bs-light);*/

    padding: 1.5rem 1.5rem;
    /*margin-bottom: 0.75rem;*/
}


[data-bs-theme=dark] .booking-nav .btn {
    color: var(--bs-gray-300);
    background-color: var(--bs-gray-800);
}

.booking-nav .btn:hover {
    background-color: var(--bs-body-bg);
}

[data-bs-theme=dark] .booking-nav .btn:hover {
    background-color: var(--bs-gray-900);
}

.booking-nav .btn i {
    font-size: 2.5rem;
    color: var(--bs-gray-600);
}

[data-bs-theme=dark] .booking-nav .btn i {
    color: var(--bs-gray-300);
}


.booking-nav .btn {
    position: relative;
}
.booking-nav .btn::after {
    content: ' ';
    display: block;
    height: 5px;
    background: #0077db00;
    width: 100%;
    bottom: 0;
    position: absolute;
    border-radius: var(--bs-border-radius);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.booking-nav .btn.active::after {
    background: #0077db;
}


/*.booking-nav .btn.active {*/
/*    padding-bottom: calc(0.75rem * 2);*/
/*    margin-bottom: 0;*/
/*    border-bottom-left-radius: 0;*/
/*    border-bottom-right-radius: 0;*/
/*    border-bottom: 3px solid #0077db;*/
/*    color: #0077db;*/
/*    background-color: var(--bs-body-bg);*/
/*}*/

[data-bs-theme=dark] .booking-nav .btn.active {
    color: var(--bs-gray-100);
}

.booking-nav .btn.active i {
    color: #0077db;
}

/* pill */
.booking-nav.booking-navPill {
    margin-bottom: 1rem;
    border-radius: var(--bs-border-radius-pill);
}
.booking-nav.booking-navPill .btn {
    border-radius: var(--bs-border-radius-pill);
}
.booking-nav.booking-navPill .btn.active {
    padding: 0.75rem 1.5rem;
    margin-bottom: 0.75rem;

    border-radius: var(--bs-border-radius-pill);
}
/* compact */
.booking-nav.booking-navCompact {
    gap: 0.25rem;
}
.booking-nav.booking-navCompact .btn {
    margin: 0;

    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.booking-nav.booking-navCompact .btn.active {
    padding: 1.5rem 1.5rem;
}

/* booking fromTo */
.booking-fromTo {
    display: flex;
}

.booking-fromTo .form-select {
    height: var(--booking-form-item-height);
    /* remove bootstrap arrow from select */
    --bs-form-select-bg-img: '';

    display: flex;
    align-items: center;
    border-radius: 0 !important;
}

.booking-fromTo .form-select:first-of-type {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
    border-left: 0 !important;
}

.booking-fromTo .form-select:last-of-type {
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
}

/* bookingDepartureReturn */
.booking-departureReturn {
    display: flex;
}

.booking-departureReturn .form-control {
    border-radius: 0 !important;
}

.booking-departureReturn .form-control:first-of-type {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
    border-left: 0 !important;
}

.booking-departureReturn .form-control:last-of-type {
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
}

/* booking travelers */
.booking-travelers .btn.dropdown-toggle {
    min-width: 11rem;
    height: var(--booking-form-item-height);
    justify-content: start;

    background-color: var(--bs-body-bg);
    font-size: var(--booking-form-font-size);
}

.booking-travelers .btn.dropdown-toggle::after {
    display: none !important;
}


/* dropdown */
.booking-travelers .dropdown-menu {
    --bs-dropdown-min-width: 21rem;
}

.booking-travelers .dropdown-item {
    --bs-dropdown-item-padding-y: var(--bs-gutter-y);
    --bs-dropdown-item-padding-x: var(--bs-gutter-x);
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-color: var(--bs-body-color);
    --bs-dropdown-link-active-bg: transparent;
}

/* bookingsubmit */
.booking-submit {
    width: 100%;
    height: var(--booking-form-item-height);
    font-size: var(--booking-form-font-size);

    justify-content: center;
    gap: var(--bs-gutter-x);
}

/* tom select */
.ts-dropdown {
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
}

.ts-control,
.ts-control input,
.ts-dropdown,
.ts-control,
.ts-control input,
.ts-dropdownlaceholder {
    color: var(--black) !important;
    opacity: 1 !important;
}

.ts-wrapper .dropdown-header-close {
    left: 8px;
    right: auto !important;
    color: var(--bs-gray) !important;
    line-height: 28px !important;
}

.ts-wrapper .dropdown-header {
    background-color: var(--bs-gray-100);
    border-bottom: 1px solid var(--bs-gray-100);
    border-radius: var(--bs-border-radius) !important;
}

[data-bs-theme=dark] .ts-wrapper .dropdown-header {
    background-color: var(--bs-gray-800);
    border-bottom: 1px solid var(--bs-gray-700);
}

.ts-control {
    background-color: var(--bs-body-bg);
    border: 0 !important;
    border-radius: 0 !important;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
    background-color: var(--bs-body-bg) !important;
}

.ts-control,
.ts-control input,
.ts-dropdown {
    font-size: var(--booking-form-font-size) !important;
}

.ts-dropdown .create,
.ts-dropdown .no-results,
.ts-dropdown .optgroup-header,
.ts-dropdown .option {
    padding: 0.75rem !important;
}

.ts-dropdown .active {
    background-color: var(--bs-gray-100) !important;
    color: var(--bs-gray) !important;
}

[data-bs-theme=dark] .ts-dropdown .active {
    background-color: var(--bs-dark) !important;
    color: var(--bs-gray-100) !important;
}

/* formSeparate */
.booking-formSeparate {}
.booking-formSeparate .booking-fromTo {
    gap: 0.25rem;
}
.booking-formSeparate .booking-fromTo .form-select {
    border-radius: var(--bs-border-radius-pill) !important;
    border: var(--booking-form-border-width) solid var(--booking-form-border-color) !important;
}
.booking-formSeparate .booking-departureReturn {
    gap: 0.25rem;
}
.booking-formSeparate .booking-departureReturn .form-control {
    border-radius: var(--bs-border-radius-pill) !important;
    border: var(--booking-form-border-width) solid var(--booking-form-border-color) !important;
}
.booking-formSeparate .booking-travelers .btn.dropdown-toggle {
    border-radius: var(--bs-border-radius-pill) !important;
}
.booking-formSeparate .booking-submit {
    border-radius: var(--bs-border-radius-pill) !important;
}

/* topOffersSlider ---------------------------- */
.topOffersSlider .topOffersSlider-slide {
    width: 100%;
    height: 100%;
    min-height: 15rem;
    color: var(--bs-white);
    border-radius: var(--bs-border-radius);

    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 0.5rem;

    position: relative;
    z-index: 1;

    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: background-position 0.3s ease;
}

.topOffersSlider .topOffersSlider-slide:hover {
    background-position: center 60%;
}

.topOffersSlider .topOffersSlider-slide-content {
    padding: 1rem 1.25rem;
    border-radius: var(--bs-border-radius);

    background-color: rgba(0,0,0,0.85);
    backdrop-filter: blur(0.25rem);
}
.topOffersSlider .topOffersSlider-slide-content .small {
    color: var(--bs-gray-200);
}
.topOffersSlider .topOffersSlider-slide-content .btn {
    color: var(--bs-gray-300);
    border-radius: var(--bs-border-radius-pill);
    border: 1px solid var(--bs-gray-600);
    width: 3rem;
    height: 3rem;
}
.topOffersSlider .topOffersSlider-slide:hover .topOffersSlider-slide-content .btn {
    color: var(--bs-gray-100);
    border-color: var(--bs-gray-500);
}




/* popularRoutes ----------------------------- */
.popularRoutes {
    position: relative;
}
.popularRoutes::before {
    content: "\f6d7"; /*sparkles*/

    font-family: tabler-icons, var(--font-family);
    font-size: 5rem;
    color: var(--bs-primary-bg-subtle);

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.popularRoutes .swiper {
    position: relative;
    --swiper-theme-color: var(--bs-secondary);
}
.popularRoutes .swiper::before {
    content: '';

    width: 95%;
    height: 3rem;
    background: linear-gradient(to left, var(--bs-primary), var(--bs-body-bg));
    border-radius: var(--bs-border-radius-pill);

    position: absolute;
    bottom: 12%;
    left: 0;
    z-index: -1;
}

.popularRoutes .swiper-slide .link {
    color: var(--bs-dark);
    background-color: var(--bs-light);
    background: linear-gradient(to bottom right, var(--bs-gray-100), var(--bs-gray-200));
    border-radius: var(--bs-border-radius);
    border-bottom: 2px solid transparent;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    transition: border-color 0.15s ease-in-out;
}

[data-bs-theme=dark] .popularRoutes .swiper-slide .link {
    color: var(--bs-white);
    background-color: var(--bs-gray-800);
    background: linear-gradient(to bottom right, var(--bs-gray-800), var(--bs-gray-700));
    border-bottom: 2px solid transparent;
}

.popularRoutes .swiper-slide .link:hover {
    border-bottom: 2px solid var(--bs-border-color);
}

.popularRoutes .swiper-slide .link .popularRoutes-image {
    width: 100%;
    height: 200px;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.popularRoutes .popularRoutes-price {
    width: 100%;
    position: relative;
    border-top: 2px dashed var(--bs-body-bg);

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.popularRoutes .popularRoutes-price::before,
.popularRoutes .popularRoutes-price::after {
    content: '';

    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    background-color: var(--bs-body-bg);

    position: absolute;
    top: -0.5rem;
}

.popularRoutes .popularRoutes-price::before {
    left: -0.5rem;
}

.popularRoutes .popularRoutes-price::after {
    right: -0.5rem;
}


/* keyHighlights ----------------------------- */
.keyHighlights {
    height: 100%;
    border-radius: var(--bs-border-radius);
    background: linear-gradient(to bottom left, var(--bs-gray-100), var(--bs-body-bg) 50%);
    border-bottom: 1px solid var(--bs-secondary-bg-subtle);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}
.keyHighlights-icon {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--bs-secondary-bg-subtle);
    border-radius: var(--bs-border-radius);

    display: flex;
    justify-content: center;
    align-items: center;
}

[data-bs-theme=dark] .keyHighlights-icon {
    background-color: var(--bs-secondary);
}
[data-bs-theme=dark] .keyHighlights {
    background: linear-gradient(to bottom left, var(--bs-gray-800), var(--bs-body-bg) 50%);
    border-bottom-color: var(--bs-secondary);
}

/* imageCaption ------------------------------ */
.imageCaption {
    background-image: linear-gradient(
            55deg,
            hsl(48deg 96% 91%) 0%,
            hsl(48deg 95% 87%) 26%,
            hsl(48deg 95% 84%) 40%,
            hsl(48deg 95% 80%) 48%,
            hsl(47deg 95% 76%) 54%,
            hsl(47deg 95% 73%) 59%,
            hsl(47deg 95% 69%) 64%,
            hsl(47deg 95% 65%) 70%,
            hsl(47deg 95% 60%) 78%,
            hsl(48deg 96% 53%) 100%
    );
}

/* imageCaption 2 ----------------------------- */
.imageCaption2 {
    background-color: var(--bs-secondary);
    background: linear-gradient(220deg, var(--bs-secondary) 60%, var(--bs-secondary-bg-subtle));
}
.imageCaption2-image {
    width: 100%;
    height: 100%;

    background-image: var(--image);
    background-size: cover;
    border-radius: var(--bs-border-radius);

    position: relative;
}
.imageCaption2-image::before {
    content: '';

    width: 100%;
    height: 100%;
    background-color: var(--bs-secondary);
    opacity: 0.1;

    position: absolute;
    top: 0;
    left: 0;
}

/* imageCols ------------------------------- */
.imageCols-item {
    position: relative;
}
.imageCols-item::before {
    content: '';

    width: 5rem;
    height: 100%;
    background-color: var(--bs-primary);
    opacity: 0.9;

    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);

    position: absolute;
    top: 0;
    left: 0;
}
.imageCols-content {
    width: 100%;
    height: 100%;

    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;

    display: flex;
    justify-content: end;
    align-items: end;
}

/* featuredBrands ----------------------------- */
.featuredBrands .link {
    width: 100%;
    height: 5rem;

    background-color: var(--bs-gray-800);
    color: var(--bs-light);
    border-radius: var(--bs-border-radius-pill);
    padding: 0.25rem 1rem;
    margin: 0.5rem 0;

    align-items: center;
}
[data-bs-theme=dark] .featuredBrands .link {
    color: var(--bs-light);
}

.featuredBrands .featuredBrands-image {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    margin-right: -1rem;
    margin-left: 1rem;

    background-color: var(--bs-body-bg);
    border-radius: var(--bs-border-radius-pill);
    border: 5px solid var(--bs-gray-800);

    display: flex;
    justify-content: center;
    align-items: center;
}
.featuredBrands .featuredBrands-content {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.featuredBrands .featuredBrands-content .btn {
    background-color: var(--bs-gray-800);
    color: var(--bs-gray-300);
    border-radius: var(--bs-border-radius-pill);
    border: 1px solid var(--bs-gray-600);
    width: 3rem;
    height: 3rem;
}
.featuredBrands .link:hover .btn {
    color: var(--bs-gray-100);
    border-color: var(--bs-gray-300);
}




/* index-2 */

/* topOffersCol ------------------------------ */
.topOffersCol {
    background-color: var(--bs-body-bg);
    border-radius: var(--bs-border-radius);
}

.topOffersCol-item {
    width: 100%;
    height: 100%;
    min-height: 15rem;
    color: var(--bs-white);
    border-radius: var(--bs-border-radius);

    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 0.5rem;

    position: relative;
    z-index: 1;

    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: background-position 0.3s ease;
}

.topOffersCol-item:hover {
    background-position: center 55%;
}
.topOffersCol-item .topOffersCol-animate {
    position: relative;
    z-index: 1;
    overflow: hidden;

}
.topOffersCol-item .topOffersCol-moveUp {
    transform: translateY(1.5rem);
    transition: transform 0.4s ease;
}
.topOffersCol-item .topOffersCol-popUp {
    overflow-y: auto;
    white-space: nowrap;

    transform: translateY(5rem);

    transition: transform 0.4s ease;
}
.topOffersCol-item .topOffersCol-popUp > div {
    flex-wrap: nowrap;
}
.topOffersCol-item:hover .topOffersCol-moveUp,
.topOffersCol-item:hover .topOffersCol-popUp {
    transform: translateY(0);
}
.topOffersCol-item .topOffersCol-animate::before {
    content: '';

    width: 2rem;
    height: 2rem;
    border-radius: var(--bs-border-radius-pill);
    background: var(--bs-body-bg);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(1rem);

    position: absolute;
    bottom: -1rem;
    right: -1rem;
    z-index: -1;

    transition: transform 0.4s ease;
}
.topOffersCol-item:focus .topOffersCol-animate::before,
.topOffersCol-item:hover .topOffersCol-animate::before {
    transform-origin: 50% 50%;
    transform: scale(35);
}
.topOffersCol-item:focus .topOffersCol-animate,
.topOffersCol-item:hover .topOffersCol-animate {
    color: var(--bs-dark);
}

.topOffersCol-item::before {
    content: '';

    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
    border-radius: var(--bs-border-radius);

    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
/* busiestRoutes ----------------------------- */
.busiestRoutes .swiper-slide {
    width: 250px;
}
.busiestRoutes .link {
    width: 100%;
    position: relative;
    z-index: 1;

    border-radius: var(--bs-border-radius);
    border-bottom: 2px solid transparent;
    background-color: var(--bs-light);
    background: linear-gradient(to right, var(--bs-gray-100), var(--bs-body-bg));

    flex-direction: column;

    transition: border-color 0.15s ease-in-out;
}
[data-bs-theme=dark] .busiestRoutes .link {
    background: linear-gradient(to right, var(--bs-gray-800), var(--bs-body-bg));
}

.busiestRoutes .link:hover {
    border-bottom-color: var(--bs-border-color);
}
.busiestRoutes .link:hover i.ti-arrow-left {
    transition: color 0.15s ease-in-out;
}
.busiestRoutes .link:hover i.ti-arrow-left {
    color: var(--bs-secondary);
}
.busiestRoutes .link::before {
    content: '';

    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--bs-body-bg);
    /* background-color: lime; */
    border-radius: var(--bs-border-radius-pill);

    position: absolute;
    top: 2%;
    left: 3%;
    z-index: -1;
}

/* index-3 */
/* top Suggestions slider ------------------------- */
.topSuggestionsSlider {
    background-color: var(--bs-body-bg);
    border-radius: var(--bs-border-radius);
}

.topSuggestionsSlider-slide {
    width: 100%;
    height: 100%;
    min-height: 18rem;
    background: var(--bs-gray-800);
    color: var(--bs-white);
    border-radius: var(--bs-border-radius);
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    position: relative;
    z-index: 1;
}
/* share
*/
.topSuggestionsSlider-slide .topSuggestionsSlider-slide-share {
    padding: 1.5rem;

    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.topSuggestionsSlider-slide:hover .topSuggestionsSlider-slide-share {
    transform: translateX(0);
}
.topSuggestionsSlider-slide-rating {
    padding: 1rem;

    display: flex;
    align-items: center;
    gap: 0.5rem;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* front
*/
.topSuggestionsSlider-slide .topSuggestionsSlider-slide-front {
    width: 100%;
    height: 100%;
    border-radius: var(--bs-border-radius);

    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    align-items: end;
    gap: 0.5rem;

    transform-origin: top;
    transition: transform 0.3s ease-in-out;
}
.topSuggestionsSlider-slide:hover .topSuggestionsSlider-slide-front {
    transform: translateY(-25%);
}
/* back
*/
.topSuggestionsSlider-slide .topSuggestionsSlider-slide-back {
    flex-grow: 1;
    border-radius: var(--bs-border-radius);
    padding: 1rem;

    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 0.5rem;
}

/* title
*/
.topSuggestionsSlider-slide-title {
    width: 100%;
    padding: 1.5rem;

    position: relative;
    z-index: 1;
}
.topSuggestionsSlider-slide-title::before {
    content: '';

    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bs-gray-800), transparent);
    border-radius: var(--bs-border-radius);

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
/* lastTickets ------------------------------ */
.lastTickets {
    position: relative;
    z-index: 1;

    overflow: hidden;
}
.lastTickets svg {
    position: absolute;
    top: 0;
    left: 0;
}
.lastTickets .lastTickets-slide.swiper-slide-next .lastTickets-slideWrapper {
    background-color: var(--bs-secondary);
    color: var(--bs-light);
}
.lastTickets .lastTickets-slide.swiper-slide-next .lastTickets-slideWrapper .btn-secondary {
    background-color: var(--bs-light);
    color: var(--bs-secondary);
}
.lastTickets .lastTickets-slideWrapper {
    width: 100%;
    background-color: var(--bs-light);

    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}


/* --------------------------------- #search -------------------------------- */
.search-header .search-header-content {
    background-color: var(--bs-body-bg);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* sidebar -------------------------------- */
.search-sidebar {
    width: 100%;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.search-sidebar .accordion {
    --bs-accordion-active-bg: transparent !important;
}

.search-sidebar .accordion-button {
    box-shadow: 0 0 0 !important;
}

.search-sidebar .accordion-item {
    border-left: 0;
    border-right: 0;
}

.search-sidebar .accordion-item:last-of-type {
    border-bottom: 0;
}

.search-sidebar .noUi-connect {
    background-color: var(--bs-primary) !important;
}

.search-sidebar .noUi-handle {
    box-shadow: 0 0 0 !important;
}

.search-sidebar .accordion-body .form-check {
    margin-bottom: 1rem;
}

.search-sidebar .accordion-body .form-check:last-child {
    margin-bottom: 0;
}

/* content -------------------------------- */
/* swiper */
.search-content-swiper {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    display: flex !important;
}

.search-content .swiper-slide {
    height: auto !important;
}

.search-content .swiper-slide a {
    height: 100% !important;

    color: var(--bs-muted);
    border-left: 1px solid var(--bs-border-color) !important;
    border-radius: 0;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.search-content .swiper-slide:last-child a {
    border-left: 0 !important;
}

.search-content .swiper-slide a.active {
    border: 2px solid var(--bs-info) !important;
}

.search-content-filter {
    width: 100%;
    border-bottom: 1px solid var(--bs-border-color);

    display: flex;
    align-items: center;

    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
}

.search-content-lists {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.search-content-lists .search-content-item {
    border-radius: var(--bs-border-radius);
    margin-bottom: 1rem;
    border: 1px solid #e4e4e4;
    box-shadow: 0 2px 5px -1px rgba(0 ,0 ,0,0.08);
    transition: border-color 0.15s ease-in-out;
}

.search-content-lists .search-content-item:last-child {
    margin-bottom: 0;
}

.search-content-dividerY {
    border-right: 2px dashed var(--bs-gray-200);
    position: relative;
}

[data-bs-theme=dark] .search-content-dividerY {
    border-color: var(--bs-gray-700);
}

.search-content-dividerY::before,
.search-content-dividerY::after {
    content: '';

    width: 2rem;
    height: 2rem;

    position: absolute;
    right: -1rem;

    border-radius: 100%;
    background-color: var(--bs-light);
}

.search-content-dividerY::before {
    top: -1rem;
}

.search-content-dividerY::after {
    bottom: -1rem;
}

.search-content-dividerX {
    border-top: 2px dashed var(--bs-gray-200);
    position: relative;
}

.search-content-dividerX::before,
.search-content-dividerX::after {
    content: '';

    width: 2rem;
    height: 2rem;

    position: absolute;
    top: -1rem;

    border-radius: 100%;
    background-color: var(--bs-light);
}

.search-content-dividerX::before {
    left: -1rem;
}

.search-content-dividerX::after {
    right: -1rem;
}

.search-content-lists .search-content-item.active {
    border-right-color: var(--bs-primary);
}

.search-content-lists .search-content-item:not(.active) .search-content-total {
    display: none !important;
}

/*.search-content-lists .search-content-item:not(.active) .nav-pills .nav-link {*/
/*    --bs-nav-link-color: var(--bs-dark) !important;*/
/*    --bs-nav-link-hover-color: var(--bs-muted) !important;*/
/*    --bs-nav-pills-link-active-color: var(--bs-dark) !important;*/
/*    --bs-nav-pills-link-active-bg: transparent !important;*/
/*}*/



/* ---------------------------------- #404 ---------------------------------- */
.error404 {
    min-height: 80vh;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.error404 .error404-wrapper {
    width: 100%;
    max-width: 712px;
    margin: 1rem auto;
    padding: 3rem;

    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--bs-border-radius);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(1rem);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.error404 .error404-item {
    width: 100%;
    height: 100%;

    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    transition: border-color 0.15s ease-in-out;
}

.error404 .error404-item:hover {
    border-color: var(--bs-dark);
}

.error404 .error404-item .error404-item-bg {
    width: 100%;
    height: 100px;

    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.error404 svg {
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.error404 svg .path-first {
    fill: var(--bs-gray-100);
}

.error404 svg .path-second {
    fill: var(--bs-gray-200);
}

[data-bs-theme=dark] .error404 svg .path-first {
    fill: var(--bs-gray-800);
}

[data-bs-theme=dark] .error404 svg .path-second {
    fill: var(--bs-gray-700);
}

/* -------------------------------- #profile -------------------------------- */
.profile {
    background-color: var(--bs-light);
    min-height: 70vh;
}

[data-bs-theme=dark] .profile {
    background-color: var(--bs-gray-800);
}

.profile-row {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
    background-color: var(--bs-body-bg);
}

.profile-row:last-child {
    margin-bottom: 0;
}

.profile-title {
    font-size: 1.25rem;
    font-weight: bold;

    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-menu a {
    padding: 1rem 1rem;
    border-color: var(--bs-gray-200);
    justify-content: start;
    color: var(--bs-gray-500);
}

.profile-menu a.active {
    border-color: var(--bs-border-color);
}

.profile-menu a.active i {
    color: var(--bs-primary);
}

/* --------------------------------- #orders -------------------------------- */
.order {
    background-color: var(--bs-light);
}

[data-bs-theme=dark] .order {
    background-color: var(--bs-gray-800);
}

.order-row {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    margin-bottom: 1.5rem;
}

.order-row:last-child {
    margin-bottom: 0;
}

.order-title {
    font-size: 1.25rem;
    font-weight: bold;

    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* breadcrumb */
.order-breadcrumb {
    --bs-breadcrumb-divider: "\ea60";
    font-family: tabler-icons, var(--font-family);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.order-breadcrumb .breadcrumb {
    --bs-breadcrumb-item-active-color: var(--bs-success);
    --bs-breadcrumb-item-padding-x: 0rem;

    padding: 1rem;
    margin-bottom: 0;
    align-items: center;
    gap: 1rem;

    flex-wrap: nowrap;
    overflow-y: auto;
}

.order-breadcrumb .breadcrumb-item {
    line-height: 1rem;
    font-weight: bold;
    padding-right: 2rem;
    white-space: nowrap;
    position: relative;
    color: var(--bs-gray-400);

    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.order-breadcrumb .breadcrumb-item.active {
    color: var(--bs-breadcrumb-item-active-color) !important;
}

.order-breadcrumb .breadcrumb-item.done {
    color: var(--bs-dark);
}

.order-breadcrumb .breadcrumb-item.done i {
    color: var(--bs-success);
}

.order-breadcrumb .breadcrumb-item:first-child {
    padding-right: 0;
}

.order-breadcrumb .breadcrumb-item.done::before,
.order-breadcrumb .breadcrumb-item.active::before {
    color: var(--bs-dark);
}

.order-breadcrumb .breadcrumb-item::before {
    color: var(--bs-gray-400);
    float: none;

    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
/* -------------------------------- #contact -------------------------------- */
.contact-info .contact-bg {
    position: relative;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ccc' fill-opacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.contact-info .contact-bg::before {
    content: '';

    width: 100%;
    height: 100%;
    background: radial-gradient(transparent, var(--bs-body-bg));

    position: absolute;
    top: 0;
    left: 0;
}
.contact-info .contact-info-col {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.contact-info .contact-info-col::before {
    content: '';

    width: 1px;
    height: 8rem;
    background-color: red;
    background: linear-gradient(to bottom, var(--bs-border-color), var(--bs-gray-400), var(--bs-border-color));

    position: absolute;
    bottom: 5%;
    left: -1px;
}
.contact-info .contact-icon {
    width: 3rem;
    height: 3rem;
    background-color: white;
    background: linear-gradient(to top right, var(--bs-gray-100), var(--bs-body-bg));

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
}
[data-bs-theme=dark] .contact-info .contact-icon {
    background: linear-gradient(to top right, var(--bs-gray-800), var(--bs-body-bg));
}
.contact-info .contact-icon,
.contact-info .contact-icon::before {
    border-radius: var(--bs-border-radius);
}
.contact-info .contact-icon::before {
    content: '';

    background-image: linear-gradient(to top right, var(--bs-body-bg) 50%, var(--bs-primary));

    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
}

/* --------------------------------- #detail -------------------------------- */
.detail {
    background-color: var(--bs-light);
    min-height: 100vh;
}
[data-bs-theme=dark] .detail {
    background-color: var(--bs-dark);
}
.detail .swiper .swiper-slide img {
    max-height: var(--max-height-image);
}
.detail .detail-sidebar {
    position: sticky;
    top: 2rem;
    z-index: 1020;
}

.detail .detail-icon {
    width: 3rem;
    height: 3rem;
    background-color: white;
    background: linear-gradient(to top right, var(--bs-gray-100), var(--bs-body-bg));
    border-radius: var(--bs-border-radius);

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
}
[data-bs-theme=dark] .detail .detail-icon {
    background: linear-gradient(to top right, var(--bs-gray-800), var(--bs-body-bg));
}

/* ---------------------------------- #blog --------------------------------- */
.blog {
    background-color: var(--bs-light);
    min-height: 100vh;
}
[data-bs-theme=dark] .blog {
    background-color: var(--bs-dark);
}
.blog .blog-card-item {
    width: 100%;
    height: 100%;
    color: var(--bs-dark);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    flex-direction: column;
}
[data-bs-theme=dark] .blog .blog-card-item {
    color: var(--bs-light);
}
.blog .blog-card-image {
    width: 100%;
    height: 300px;
    position: relative;

    background-repeat: no-repeat;
    background-size: cover;

    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
}
.blog .blog-card-image.sm {
    height: 200px;
}
.blog .blog-card-image .nt-badge {
    --bs-bg-opacity: 0.9;

    position: absolute;
    bottom: 5%;
    left: 5%;
}

.img-cover {
    width: 100%;
    height: 100%;
    display: block;
}

/*img.lozad:not([data-loaded]) {*/
/*  --loading-grey: #ededed;*/
/*  background-color: var(--loading-grey);*/
/*  background: linear-gradient(*/
/*    100deg,*/
/*    rgba(255, 255, 255, 0) 40%,*/
/*    rgba(255, 255, 255, .5) 50%,*/
/*    rgba(255, 255, 255, 0) 60%*/
/*  ) var(--loading-grey);*/
/*  background-size: 200% 100%;*/
/*  background-position-x: 180%;*/
/*  animation: 1s loading ease-in-out infinite;*/
/*}*/

/*@keyframes loading {*/
/*  to {*/
/*    background-position-x: -20%;*/
/*  }*/
/*}*/