@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

/* __Variables */
:root {
    /* ____________________________________________ */
    /* clr-variables */
    /* clr-variables__primary */
    --clr-primary-100: hsl(43deg 100% 96.07% / 65%);
    --clr-primary-200: hsl(347, 100%, 95%);
    --clr-primary-400: hsla(14, 67%, 54%, 1);
    --clr-hover-700: hsla(6, 70%, 36%, 1);
    --clr-discount-700: hsl(0, 72%, 52%); /* #f53 */
    /* secondary__color */
    --clr-secondary-200: hsla(43, 45%, 92%, 1); /* brand-bg */
    --clr-secondary-300: hsl(218, 47%, 19%);
    --clr-secondary-400: hsla(221, 39%, 11%, 1); /* brand-bg */
    --clr-secondary-500: hsla(227, 73%, 7%, 1); /* brand-bg */
    /* clr-variables__accent */
    --clr-accent-yellow-300: hsl(42, 100%, 50%); /* brand-warning */
    --clr-accent-yellow: hsla(38, 67%, 56%, 1); /* brand-warning */
    --clr-accent-green: hsla(141, 32%, 45%, 1); /* secondary-color */
    --clr-brown: hsl(22.5, 6.1%, 25.9%);
    /* clr-variables__neutral */
    --clr-neutral-100: hsla(0, 0%, 100%, 1); /* default-white */
    --clr-neutral-900: hsla(0, 0%, 0%, 1); /* default-black */
    /* clr-grey-pallete */
    --clr-neutral-grey-100: hsla(220, 14%, 96%, 1);
    --clr-neutral-grey-200: hsla(216, 12%, 84%, 1);
    --clr-neutral-grey-400: hsla(218, 11%, 65%, 1); /*default-grey*/
    --clr-neutral-grey-500: hsl(227, 10%, 43%);
    --clr-neutral-grey-600: rgb(40, 60, 87);
    --clr-neutral-grey-700: hsla(217, 19%, 27%, 1);
    /* header-nav-links-color */
    --clr-header-nav-link: var(--clr-neutral-grey-700);
    /* header-search-bar-border-color */
    --clr-srch-border: var(--clr-neutral-grey-200);
    /* footer-list-color */
    --clr-footer-list: var(--clr-neutral-grey-200);
    /* header-search-bar-label-color */
    --clr-srch-label: var(--clr-neutral-grey-600);
    /* headings-color */
    --clr-primary-heading: var(--clr-primary-400);
    /* secondary-heading-color */
    --clr-secondary-heading: var(--clr-secondary-500);
    /* paragraph-secondary-heading-color */
    --clr-p-secondary-heading: var(--clr-neutral-grey-600);
    /* card-text-color */
    --clr-card-text: var(--clr-neutral-grey-600);
    /* button-color */
    --clr-default-button: var(--clr-primary-400);
    /* button-hover-color */
    --clr-button-hover: var(--clr-hover-700);
    /* input-border */
    /* ____________________________________________ */
    /* font-variables */
    /* font-variables__family */
    --ff-primary: "Nunito Sans", serif;
    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);
    /* font-variables__weight */
    --fw-semi-regular: 300;
    /* based on the design */
    --fw-regular: 400;
    --fw-semi-bold: 500;
    --fw-bold: 700;
    --fw-semi-extra: 800;
    --fw-extra-bold: 900;
    /* font-variables__size */
    /* font-variables__size__base */
    --fs-100: 0.5rem; /* 8px */
    --fs-200: 0.75rem; /* 12px */
    --fs-300: 0.87rem; /* 14px */
    --fs-400: 1rem; /* 16px */
    --fs-500: 1.125rem; /* 18px */
    --fs-600: 1.25rem; /* 20px */
    --fs-700: 1.5rem; /* 24px */
    --fs-725: 2rem; /* 32px */
    --fs-750: 2.25rem; /* 36px */
    --fs-800: 2.5rem; /* 40px */
    --fs-850: 3rem; /* 48px */
    --fs-900: 3.5rem; /* 56px */
    --fs-950: 4rem;
    /* font-variables__size__base-approach */
    --fs-body: var(--fs-400);
    --fs-nav: var(--fs-300);
    --fs-primary-head: var(--fs-750);
    --fs-button: var(--fs-300);
    /* ____________________________________________ */
    /* spacing-variables */
    --space-100: 0.25rem;
    --space-200: 0.5rem; /* 8px */
    --space-360: 0.62rem; /* 10px */
    --space-362: 0.75rem; /* 12px */
    --space-390: 0.93rem; /* 15px */
    --space-400: 1rem; /* 16px */
    --space-420: 1.25rem; /* 20px */
    --space-500: 1.5rem; /* 24px */
    --space-580: 1.87rem; /* 30px */
    --space-600: 2rem; /* 32px */
    --space-650: 2.5rem; /* 40px */
    --space-700: 3rem;
    --space-800: 4rem;
    --space-900: 5rem;
    /* ____________________________________________ */

    --br-5: 0.3rem;
    --br-8: 0.5rem;
    --br-10: 0.62rem;
    --br-15: 0.93rem;
    --br-16: 1rem;
    --br-20: 1.25rem;
    --br-30: 1.87rem;
    --br-50: 3.12rem;
    --br-65: 4.06rem;
    --br-77: 4.81rem;
    --br-81: 5.06rem;
    --br-100: 6.25rem;

    /* transition */
    --defualt-transition: 0.3s;
    /* scaling-effect */
    --card-img-scale: 1.2;
}

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--clr-neutral-grey-400) var(--clr-neutral-grey-100);
}

/* Remove default margin */
/* body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul {
  margin: 0 !important;
} */

/* Custom scrollbar for WebKit-based browsers (Chrome, Safari, Edge) */

/* Firefox scrollbar customization */

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}

/* Set core root defaults */
html:focus-within {
    -webkit-scroll-behavior: smooth;
    -moz-scroll-behavior: smooth;
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a {
    text-decoration: none !important;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select,
label {
    font: inherit;
    /* text-transform: capitalize; */
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* general-styling */

body {
    font-family: var(--ff-body) !important;
    font-size: var(--fs-body);
}

.container-custom {
    --max-width: 1310px;
    --padding-mobile: 1rem;
    --padding-desktop: 2vw;
    --padding-max: calc(5rem);
    --padding: clamp(
        var(--padding-mobile),
        var(--padding-desktop),
        var(--padding-max)
    );
    width: min(var(--max-width), 100% - (var(--padding) * 2));
    margin-inline: auto;
    transition: var(--defualt-transition);
}

@media (min-width: 768px) {
    .container-custom {
        padding-inline: var(--padding);
    }

    .about-us .container-custom {
        width: 768px;
    }
}

/* .container-custom {
  --max-width: 1310px;
  /* --padding: 1rem; *
  width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;
  /* custom-padding depend on the client order *

} */

/* @media (min-width: 48em) {
  .container-custom {
  }
} 

 @media (min-width: 62em) {
  .container-custom {
  }
}

@media (min-width: 100em) {
  .container-custom {
  }
} */

.even-columns,
.section-cards {
    display: grid;
    gap: 1rem;
}

.section-cards {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    /* the max-content here (the best case senario i can get (so the problem here was:
  لما امين شال الكاردات وحط كارداية واحدة خادت الفول ويدث فبوظت الشكل فاحتجت اخلي الكارداية تاخد علي قد الكونتيت وده النتيجة اللي وصلتلها عن طريق الماكس كونتيت وبس) */
}

/* .recommend-car-rent-section .section-cards {
  grid-template-columns: repeat(auto-fit, minmax(18rem, min-content));
} */

@media (min-width: 48em) {
    .even-columns {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

h3 {
    font-weight: var(--fw-bold) !important;
    line-height: var(--space-500);
}

p {
    font-size: var(--fs-300);
    line-height: var(--space-400);
    font-weight: var(--fw-regular);
    margin: 0 !important;
}

.flow > :not(:first-child) {
    margin-top: var(--flow-spacer, var(--space-400)) !important;
}

/* Scroll to Top Button Styles */
#scrollToTopBtn {
    position: fixed;
    bottom: 120px;
    inset-inline-end: 33px;
    display: none; /* Hidden initially */
    background-color: var(--clr-primary-400); /* Button color */
    color: var(--clr-neutral-100);
    border: none;
    border-radius: var(--br-50);
    padding: var(--space-360);
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Stay on top */
    transition: var(--defualt-transition);
}
#scrollToTopBtn:hover {
    background-color: var(--clr-button-hover); /* Darker blue on hover */
}

/* Chat Toggle Button */
.chat-support-button {
    position: fixed;
    inset-inline-end: 25px;
    bottom: 50px;
    width: 60px;
    height: 60px;
    background: var(--clr-primary-400);
    border-radius: var(--br-50);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    transition: var(--defualt-transition);
}

/* .chat-support-button:hover {
  background-color: var(--clr-button-hover);
} */

/* <<<<__header-section__>>>> */
/* <<<<<<<<<__header-section__>>>>>>>> */
/* <<<<<<<<<<<<<<__header-section__>>>>>>>>>>>>>> */
/* header-holder-layout */
.header-holder .header-search-bar,
.header-holder .header-details {
    display: none;
}

.header-holder {
    grid-template-columns: 1fr auto;
    align-items: center;
}

/* header-languages */
/* General Dropdown Styling */
.languages {
    position: relative;
    flex-shrink: 0;
}

/* Dropdown Menu */
.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    inset-inline-start: 0;
    background-color: var(--clr-neutral-100);
    padding: var(--space-200) 0;
    /* margin: 0; */
    border: 1px solid var(--clr-neutral-grey-600);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 150px;
}

.dropdown-item {
    padding: var(--space-200) var(--space-400);
    display: flex !important;
    align-items: center;
    gap: 8px; /* Space between the flag and text */
    cursor: pointer;
    white-space: nowrap; /* Prevent text wrapping */
}

.dropdown-item img.flag-icon {
    width: 20px;
    height: 15px;
}

.dropdown-item:hover {
    background-color: #f0f0f0;
}

/* Show the dropdown on toggle */
.languages.open .dropdown-menu {
    display: block;
}

/* header-mobile-sidebar */
/* sidebar-menu */
/* sidebar-op-button */
.sidebar-op-button,
/* sidebar-close-button */
.sidebar-close-button,
.register-close-button,
.login-close-button {
    background-color: var(--clr-primary-200);
    border: 1px solid var(--clr-primary-200);
    color: var(--clr-primary-400);
    border-radius: var(--br-5);
    padding: var(--space-100) var(--space-200);
    line-height: 0;
    font-size: var(--fs-700);
}

/* sidebar-menu */
.sidebar-menu {
    position: fixed;
    top: 0;
    inset-inline-start: -100vw; /* Position the sidebar completely off-screen initially */
    width: 100vw;
    height: 100vh;
    background-color: var(--clr-primary-400);
    z-index: 1000;
    padding: var(--space-650);
    overflow-x: hidden; /* Hide content when the width is 0 */
    visibility: hidden; /*ده عشان من غيرها لما بشد الصفحة من الموبايل للديسكتوب بيظهرلي شكل السايدبار بطريقة مستفزة*/
    transition: var(--defualt-transition);
}
.sidebar-menu.open {
    inset-inline-start: 0;
    visibility: visible;
}
/* sidebar-header */
/* sidebar-main */
.sidebar-main .sidebar-header-details .sidebar-details {
    flex-direction: column;
}

/* sidebar-register-button */

.sidebar-menu .user-profile-sidebar__button {
    display: block;
    border-radius: var(--br-65);
}

.sidebar-menu .user-profile-sidebar__button,
.sidebar-menu .register-sign__button {
    background-color: var(--clr-neutral-100);
    color: var(--clr-primary-400);
    inline-size: 100%;
    padding-block: var(--space-400);
}

.sidebar-menu .user-profile-sidebar__button:hover,
.sidebar-menu .register-sign__button:hover {
    background-color: var(--clr-primary-200);
}

/* sidebar-details links */
.sidebar-menu .sidebar-header-details .sidebar-details a {
    color: var(--clr-neutral-100);
}

@media (min-width: 768px) {
    .header-holder .header-search-bar,
    .header-holder .header-details {
        display: block;
    }
    .header-holder .sidebar-op-button {
        display: none;
    }
    .header-holder {
        grid-template:
            "logo details"
            "srch srch"
            / auto auto;
    }
    .header-holder .website-logo {
        grid-area: logo;
    }

    .header-holder .header-search-bar {
        grid-area: srch;
        margin-block-start: var(--space-400);
    }

    .header-holder .header-details {
        grid-area: details;
    }
}

@media (min-width: 992px) {
    .header-holder {
        grid-template-columns: auto 1fr 1fr;
        grid-template-areas: "logo srch details";
        align-items: center;
    }
    .header-holder .header-search-bar {
        margin: 0 var(--space-400);
    }
}

/*==============================================*/
/* custom-register-form */
/*==============================================*/
.login-section.custom,
.register-section.custom {
    position: fixed;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background-color: var(--clr-neutral-100);
    border-radius: var(--br-10);
    margin: 0;
    padding: var(--space-200);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    width: min(90%, 30rem);
    max-height: 100%;
    overflow-y: auto;
}

/* this is the modification (there was a margin all over the form from the html and i remove it and now edit from css */
/* edit-version */
.register-section.custom form {
    gap: var(--space-200);
}

.register-section.custom form label {
    margin: 0;
}
/* end-of-edit-version */

/* Overlay (to darken the background when the popup is active) */
.custom__overlay {
    display: none;
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom__overlay.active,
.login-section.custom.active,
.register-section.custom.active {
    display: block;
    opacity: 1;
}

.login-section.custom.active,
.register-section.custom.active {
    transition: opacity 0.3s ease-in-out;
}

.login-section.custom .login-section__form,
.register-section.custom .register-section__form {
    border: 1px solid var(--clr-primary-400);
    border-radius: var(--br-8);
}

/*==============================================*/
/*==============================================*/
/*  header-input-container */
.sidebar-header {
    gap: 1rem;
}

header .header-search-bar form .input-container,
.sidebar-menu .sidebar-main .sidebar-header-search-bar .input-container {
    position: relative;
    background-color: var(--clr-neutral-grey-100);
    padding: var(--space-200) var(--space-600);
    border-radius: var(--br-50);
}
/*  header-input */
header .header-search-bar form .input-container input,
.sidebar-menu .sidebar-main .sidebar-header-search-bar .input-container input {
    border: transparent;
    background-color: transparent;
}

header .header-search-bar form .input-container input::placeholder {
    font-size: var(--fs-300);
    color: var(--clr-neutral-grey-400);
}
/*==============================================*/
/*==============================================*/
/*  header-details */
/*  header-ul-details */
header .header-details .details {
    justify-content: space-between;
    align-items: center;
}
@media (min-width: 992px) {
    header .header-details .details {
        justify-content: space-evenly;
    }
}

header .header-details .details:nth-child(-n + 2),
/* sidebar-details links */
.sidebar-menu .sidebar-header-details .sidebar-details {
    font-size: var(--fs-300);
    font-weight: var(--fw-bold);
}

header .header-details .details li a {
    color: var(--clr-neutral-900);
}

/* header-register & signin__button */

header .header-details .details .register-sign__button {
    padding: var(--space-400) var(--space-600);
    border-radius: var(--br-50);
}

/*==============================================*/
/*==============================================*/
/* header-navbar */
/* .navbar-expand-lg .navbar-collapse {
  display: flex;
  flex-basis: auto;
} */

.navbar .navbar-nav {
    flex-direction: row;
    font-size: var(--fs-nav);
    font-size: clamp(var(--fs-nav), 0.8rem + 0.25vw, var(--fs-400));
    font-weight: var(--fw-bold);
    gap: var(--space-362);
    text-wrap: nowrap;
    flex-wrap: wrap;
    row-gap: 0;
}

@media (min-width: 420px) {
    .navbar .navbar-nav {
        gap: var(--space-400);
    }
}

.navbar .navbar-nav .nav-link {
    color: var(--clr-neutral-grey-600);
}
/* <<<<<<<<<<<<<<__header-section__>>>>>>>>>>>>>> */
/* <<<<<<<<<__header-section__>>>>>>>> */
/* <<<<__header-section__>>>> */

/*==============================================*/
/*==============================================*/
/* <<<<__hero-section __>>>> */
/* <<<<<<<<<__hero-section __>>>>>>>> */
/* <<<<<<<<<<<<<<__hero-section __>>>>>>>>>>>>>> */
.hero-section {
    background: url("/assets/imgs/hero-sec.jpg") no-repeat fixed;
    background-size: cover;
    background-position: 50% 70%;
    min-height: 38.5rem;
    position: relative;
    margin-block-end: 9rem;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}
/*==============================================*/
/* trip-search-box */
.hotels__hero-section .trip-search-box,
.hero-section .trip-search-box {
    width: clamp(24.3rem, 90%, 78rem);
    position: absolute;
    inset-inline-start: 50%;
    bottom: -95px;
    transform: translateX(-50%);
    background-color: var(--clr-neutral-100);
    box-shadow: 0 4px 10px 0 rgba(174, 191, 212, 0.26);
    padding: var(--space-580);
    border-radius: var(--br-30);
    z-index: 2;
}

/*==============================================*/
/* trip-search-box__slogan */
.trip-search-box .trip-slogan .slogan-heading {
    font-size: var(--fs-700);
    font-size: clamp(var(--fs-700), 1.35rem + 0.75vw, var(--fs-primary-head));
}

/*==============================================*/
/* trip-search-box__slogan--paragraph */
.trip-search-box .trip-slogan p {
    font-size: var(--fs-500);
}

/*==============================================*/
/* trip-search-box__search-box-tabs */
/* mobile-screen-grid (default) */
.hero-section .trip-search-box .navbar-tabs {
    padding-block: var(--space-580);
}

.hero-section .trip-search-box .navbar-tabs > ul {
    grid-template-areas:
        "tours . attractions"
        "things . hotels"
        "cars . ask";
    gap: var(--space-200);
}

.hero-section .nav-items .list {
    cursor: pointer !important;
}

/*==============================================*/
/* medium-screen-grid-resposive */
@media (min-width: 600px) {
    .hero-section .trip-search-box .navbar-tabs > ul {
        grid-template-areas:
            "tours attractions things"
            "hotels cars ask";
    }
}
/*==============================================*/
/* large-screen-grid-responsive */
@media (min-width: 992px) {
    .hero-section .trip-search-box .navbar-tabs > ul {
        grid-template-columns: auto auto auto auto auto 1fr;
        grid-template-areas: "tours attractions things hotels cars ask";
    }
}

.hero-section .trip-search-box .navbar-tabs > ul > li:first-child {
    grid-area: tours;
}
.hero-section .trip-search-box .navbar-tabs > ul > li:nth-child(2) {
    grid-area: attractions;
}
.hero-section .trip-search-box .navbar-tabs > ul > li:nth-child(3) {
    grid-area: things;
}
.hero-section .trip-search-box .navbar-tabs > ul > li:nth-child(4) {
    grid-area: hotels;
}
.hero-section .trip-search-box .navbar-tabs > ul > li:nth-child(5) {
    grid-area: cars;
}
.hero-section .trip-search-box .navbar-tabs > ul > li:last-child {
    grid-area: ask;
}

.hero-section .trip-search-box .navbar-tabs li:not(:last-child) {
    border: transparent;
    border-radius: var(--br-77);
    background-color: var(--clr-secondary-200);
    /* margin-inline: var(--space-200); */
    transition: var(--defualt-transition);
}

.hero-section .trip-search-box .navbar-tabs li:not(:last-child) .nav-link {
    padding: var(--space-360) var(--space-420);
}

/* .hero-section .trip-search-box .navbar-tabs li:hover:not(:last-child) {
  background-color: var(--clr-primary-400);
} */
.hero-section .trip-search-box .navbar-tabs li.active {
    background-color: var(--clr-primary-400);
}

.hero-section .trip-search-box .navbar-tabs li a {
    font-size: var(--fs-300);
    color: var(--clr-secondary-400);
    font-weight: var(--fw-bold);
    display: block;
    transition: var(--defualt-transition);
}

.hero-section .trip-search-box .navbar-tabs li:hover a {
    color: var(--clr-primary-heading);
}

.hero-section .trip-search-box .navbar-tabs li.active a {
    color: var(--clr-neutral-100);
}

.hero-section .trip-search-box .navbar-tabs li a i {
    padding-inline-end: var(--space-200);
}

.hero-section .trip-search-box .ask-help {
    color: var(--clr-neutral-grey-600) !important;
    font-size: var(--fs-300);
}
.hero-section .trip-search-box .ask-help:hover {
    text-decoration: underline !important;
}

/*==============================================*/
/*  trip-search-box-form */
/*  trip-search-box-form-holder */

.hotels__hero-section .trip-search-box-form-holder,
.hero-section .trip-search-box-form-holder form {
    border: 1px solid var(--clr-neutral-grey-200);
    border-radius: var(--br-8);
    padding: var(--space-400);
    gap: var(--space-500);
}

/*==============================================*/

/*  trip-search-box__input-holder */
.hero-section .trip-search-box-form-holder .input-holder {
    display: grid;
    gap: var(--space-362);
}

/*  trip-search-box__input-holder--label */
.hero-section .trip-search-box-form-holder .input-holder label {
    color: var(--clr-neutral-grey-600);
    font-weight: var(--fw-bold);
    font-size: var(--fs-300);
    /* text-transform: capitalize;  fixed in the normalize */
    margin: 0;
}

/*  trip-search-box__input-holder--select */
.select2-container {
    flex: 1 !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    line-height: inherit !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 100% !important;
}

.select2-container--default .select2-selection--single {
    min-height: 40px !important;
    line-height: 40px !important;
    border: 1px solid var(--clr-neutral-grey-200) !important;
    border-radius: var(--br-5);
}

.custom-select-container {
    position: relative;
    display: flex;
    align-items: center;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-inline-start: var(--space-650); /* Space for left icon */
    padding-inline-end: var(--space-650); /* Space for right arrow */
    line-height: 40px;
}

.select2-container[dir="rtl"]
    .select2-selection--single
    .select2-selection__rendered {
    padding-inline-start: var(--space-650);
    padding-inline-end: var(--space-650);
}

.select2-container--default {
    width: 91% !important;
}

.select-icon-left {
    position: absolute;
    inset-inline-start: 10px;
    pointer-events: none; /* Prevent interaction with icon */
    z-index: 2;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    /* display: none; */
}

.select-icon-right {
    position: absolute;
    inset-inline-end: 10px;
    cursor: pointer; /* Make the right arrow clickable */
    pointer-events: none; /* Prevent interaction with icon */
    z-index: 2;
}

/*  trip-search-box-form-holder-all-divs */
/*==============================================*/
/*  first-input-div-holder */

/*==============================================*/
/*  input-break */
.line-break,
.instructions-break {
    width: 90%;
    border-color: var(--clr-neutral-grey-500);
    margin-inline: auto;
}

.input-break {
    width: clamp(15rem, 70%, 30rem);
    border: 1px solid;
    border-color: var(--clr-neutral-grey-200);
    margin: auto;
}
/*==============================================*/
/*  second-input-div-holder */
/*==============================================*/

/* select-tours-input */
.hotels__hero-section .trip-search-box-form-holder .slct-tours-input,
.hero-section .trip-search-box-form-holder .slct-tours-input {
    position: relative;
    grid-template-areas: "input" "button";
    gap: var(--space-580);
}

.hotels__hero-section .trip-search-box-form-holder .slct-tours-input > div,
.hero-section .trip-search-box-form-holder .slct-tours-input > div {
    flex-direction: column;
    grid-area: input;
}

.hotels__hero-section
    .trip-search-box-form-holder
    .slct-tours-input
    .select-arrow-holder,
.hero-section
    .trip-search-box-form-holder
    .slct-tours-input
    .select-arrow-holder {
    inset-inline-end: 0;
    padding-inline-end: var(--space-400);
}
/*  header-search-button */

.hotels__hero-section
    .trip-search-box-form-holder
    .slct-tours-input
    .button-custom,
.hero-section .trip-search-box-form-holder .slct-tours-input .button-custom {
    grid-area: button;
    width: clamp(9.18rem, 20.09rem + -20.09vw, 16.62rem);
    /* width: clamp(9.18rem, 20.09rem + -11.11vw, 16.62rem); */
    font-size: var(--fs-400);
    padding-block: var(--space-400);
    margin-inline: auto;
}

/* trip-search-box-form-holder-media-query-change */
@media (min-width: 900px) {
    .hero-section .trip-search-box-form-holder form {
        grid-auto-flow: column;
        grid-auto-columns: 1fr 2fr;
        gap: var(--space-500);
    }
    .input-break {
        display: none;
    }

    .hotels__hero-section .trip-search-box-form-holder .slct-tours-input,
    .hero-section .trip-search-box-form-holder .slct-tours-input {
        grid-template-areas: "input input button";
        align-items: center;
        gap: 0;
    }

    .hotels__hero-section
        .trip-search-box-form-holder
        .slct-tours-input::before,
    .hero-section .trip-search-box-form-holder .slct-tours-input::before {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-start: -13px;
        transform: translateY(-50%);
        border-left: 1px solid var(--clr-neutral-grey-200);
        height: 80px;
    }
    .hotels__hero-section
        .trip-search-box-form-holder
        .slct-tours-input
        .button-custom,
    .hero-section
        .trip-search-box-form-holder
        .slct-tours-input
        .button-custom {
        align-self: flex-end;
    }
}

/* special-responsive for trip-search-box */
@media (max-width: 400px) {
    .hotels__hero-section .trip-search-box,
    .hero-section .trip-search-box {
        width: clamp(20rem, 90%, 78rem);
        padding-inline: var(--space-400);
        bottom: -140px;
    }
    .hero-section .trip-search-box .navbar-tabs {
        padding-block: var(--space-200);
    }
    .hero-section .trip-search-box .navbar-tabs > ul {
        grid-template-areas:
            "tours"
            "attractions"
            "things"
            "hotels"
            "cars"
            "ask";
    }
}
/* <<<<<<<<<<<<<<__hero-section __>>>>>>>>>>>>>> */
/* <<<<<<<<<__hero-section __>>>>>>>> */
/* <<<<__hero-section __>>>> */

/*==============================================*/
/*==============================================*/
/* <<<<__other-pages__hero-section __>>>> */
/* <<<<<<<<<__other-pages__hero-section __>>>>>>>> */
/* <<<<<<<<<<<<<<__other-pages__hero-section __>>>>>>>>>>>>>> */
.tours {
    background: url("/assets/imgs/op-bg-01.jpg");
}

.attractions {
    background: url("/assets/imgs/op-bg-02.jpg");
}

.things-to-do {
    background: url("/assets/imgs/op-bg-03.jpg");
}

.car-renting {
    /* background: url("/assets/imgs/op-bg-03.jpg"); */
}

.op__hero-section {
    background-size: cover;
    background-position: center;
    min-height: 0;
    margin-block-end: 5rem;
}

/* op-hero-section__wrapper */
.op__hero-section .hero-section__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 7rem;
    gap: var(--space-650);
    position: relative;
    z-index: 2;
}

/* hero-section__description */

@media (max-width: 500px) {
    .tours .hero-section__wrapper .hs__description,
    .attractions .hero-section__wrapper .hs__description,
    .things-to-do .hero-section__wrapper .hs__description {
        padding-inline-start: 0 !important;
    }
}

.op__hero-section .hero-section__wrapper .hs__description {
    padding-inline-start: var(--space-800);
    align-self: flex-start;
}

@media (max-width: 768px) {
    .car-renting .hero-section__wrapper .hs__description {
        padding: 0;
    }
}

/* hero-seciton-heading */
.hotels__hero-section .hs__heading,
.op__hero-section .hero-section__wrapper .hs__heading {
    color: var(--clr-neutral-100);
    font-size: 2.5rem;
    font-size: clamp(2.5rem, 2.2rem + 1.5vw, 4rem);
    font-weight: var(--fw-extra-bold);
    position: relative;
    text-transform: capitalize;
}

.hotels__hero-section .hs__heading::after,
.op__hero-section .hero-section__wrapper .hs__heading::after {
    content: "";
    position: absolute;
    bottom: 13px;
    inset-inline-end: -30px;
    width: 20px;
    height: 20px;
    background-color: var(--clr-primary-400);
    border-radius: 50%;
}

/* hero-seciton-paragraph */
.op__hero-section .hero-section__wrapper .hs__paragraph {
    color: var(--clr-neutral-100);
    margin-top: var(--space-420) !important;
}

/* other-pages-search-box */
.op__hero-section .hs__search-box {
    position: relative;
    bottom: 0;
    inset-inline-start: 0;
    transform: inherit;
}

/* <<<<<<<<<<<<<<____other-pages__hero-section __>>>>>>>>>>>>>> */
/* <<<<<<<<<____other-pages__hero-section __>>>>>>>> */
/* <<<<____other-pages__hero-section __>>>> */

/* ====horizontal-scroll=====*/
/* ====horizontal-scroll=====horizontal-scroll===== */
/* ====horizontal-scroll=====horizontal-scroll=====horizontal-scroll===== */

/* .offer-section .media-scrollbar, */
.scrollbar-section .media-scrollbar {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-y: hidden;
    overflow-x: auto;
    /* overscroll-behavior-inline: contain; */
    /* margin-top: 5rem; */
    /*scroll-snap-type: x mandatory;  Enable smooth snapping */
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
}

/* @media (max-width: 520px) {
  .offer-section .media-scrollbar {
    grid-auto-columns: 100% !important;
  }
} */

/* .landing-ttd-section .media-scrollbar {
  grid-auto-columns: 300px;
  white-space: unset;
}

.landing-attractions-section .land-attr__media-scrlbar {
  gap: var(--space-420);
} */

.carousel,
.vlog-card-holder {
    will-change: scroll-position;
}

/* .carousel.dragging {
  cursor: grab;
  scroll-behavior: auto;
} */

/*.media-scrollbar::-webkit-scrollbar {
  display: none;  Hide the scrollbar for a cleaner look
} */

/* .carousel div:first-child {
  margin-left: 0px;
} */

.media-element {
    flex: 0 0 auto; /* Ensure elements stay inline */
    /*scroll-snap-align: center; Center snapping for each element*/
    /* width: 300px; Adjust width as needed */
    position: relative;
    /* pointer-events: none;
  user-select: none; */
}

.offer-section .media-element {
    position: relative;
    border-radius: var(--br-10);
    overflow: hidden;
    cursor: pointer;
}

.offer-section .media-element .overlay {
    z-index: 1;
}

.offer-section .media-element .scroll-element-heading {
    position: absolute;
    top: 3rem;
    inset-inline-start: 2rem;
    inset-inline-end: 2rem;
    /* max-width: 40ch; */
    z-index: 2;
}

.offer-section .media-element .scroll-element-heading h3,
.offer-section .media-element .scroll-element-heading p {
    color: #fff;
    font-size: clamp(1.5rem, 0.78rem + 2.28vw, 2rem);
    font-weight: var(--fw-extra-bold) !important;
}

.offer-section .media-element .scroll-element-heading p {
    line-height: 1;
}

.offer-section .media-element .scroll-element-image-holder img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    min-height: 270px;
    max-height: 270px;
}

/* end-offer-section */

.landing-attractions-section
    .land-attr__media-scrlbar
    .media-element
    .land-attr__elmnt-img-holder
    img {
    inline-size: 100%;
    object-fit: cover;
    aspect-ratio: 9 / 16;
}

.landing-attractions-section .swiper-slide {
    flex-shrink: 1;
}

.landing-attractions-section .land-attr__elmnt-img-holder {
    min-width: 100px !important;
    max-width: 100px !important;
    min-height: 135px !important;
    max-height: 135px !important;
    border-radius: var(--br-100);
    overflow: hidden;
}

.landing-attractions-section .land-attr__elmnt-img-holder img {
    min-height: 100%;
}

.landing-attractions-section .landing-attractions-info {
    max-width: 11ch;
    /* i solve the problem with flex-shrink by accident instead of max-width
  -okay the problem here was that the content 
  stretching the card with at least two words in the content 
  but when i solve with shrink by accident i try to
  put one or three card and see what's going on, i realize it 
  bring back the problem so the solution here that
  i let the two line of code (flex-shrink and the max-width)
  and it works in the two ways>
  */
}

.landing-attractions-section .landing-attractions-info :first-child {
    font-size: var(--fs-400);
    font-weight: var(--fw-bold);
    text-wrap: wrap;
    text-align: center;
}

.landing-attractions-section .landing-attractions-info :last-child {
    font-size: var(--fs-300);
    color: var(--clr-neutral-grey-600);
}

/* ====horizontal-scroll=====horizontal-scroll=====horizontal-scroll===== */
/* ====horizontal-scroll=====horizontal-scroll===== */
/* ====horizontal-scroll=====*/

/* ====infinite-scroll-bar===== */
/* ====infinite-scroll-bar=====infinite-scroll-bar===== */
/* ====infinite-scroll-bar=====infinite-scroll-bar=====infinite-scroll-bar====infinite-scroll-bar===== */

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    background-color: var(--clr-primary-400);
    margin-block: var(--space-700);
    overflow: hidden;
}

.scroller__inner > img {
    min-width: 200px;
    max-width: 200px;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
        90deg,
        transparent,
        white 20%,
        white 80%,
        transparent
    );
    mask: linear-gradient(
        90deg,
        hsla(0, 0%, 100%, 0.5),
        white 5%,
        white 95%,
        hsla(0, 0%, 100%, 0.5)
    );
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
        var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

/* ====infinite-scroll-bar=====infinite-scroll-bar=====infinite-scroll-bar====infinite-scroll-bar===== */
/* ====infinite-scroll-bar=====infinite-scroll-bar===== */
/* ====infinite-scroll-bar===== */

/* ====______reel-section====______ */
/* =============____________reel-section____________============= */

.reel-section {
    /* margin-block: var(--space-900); */
    position: relative;
    color: var(--clr-neutral-100);
}

@media (min-width: 1200px) {
    .reel-section {
        margin-block-end: 0;
    }
}

.reel-section:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--clr-primary-400);
    width: 100%;
    height: 320px;
    z-index: -1;
}

/* .reel-section .video-content-holder {
  grid-template-areas: "vid inf";
  gap: 2rem;
} */

.reel-section .video-content-holder {
    grid-template-areas: "vid inf";
    justify-content: center;
    gap: var(--space-600);
}

.vlog-article .reel-video,
.reel-section .reel-video {
    position: relative;
    width: 256px;
    border-radius: 20px;
    overflow: hidden;
    grid-area: vid;
    min-height: 400px;
}

@media (max-width: 600px) {
    .reel-section .video-content-holder {
        gap: var(--space-400);
    }
    .reel-section .reel-video {
        width: 200px;
    }
}

.vlog-article .reel-video video,
.reel-section .reel-video video {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.reel-section .reel-info {
    flex-direction: column;
    justify-content: center;
    grid-area: inf;
}

.reel-section .reel-info h3 {
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 0.78rem + 2.28vw, 2.5rem);
    margin-bottom: var(--space-100);
}

.reel-section .reel-info p {
    margin: var(--space-360) 0 var(--space-420) !important;
}

.reel-section .reel-info button[data-inverted="inverted"] {
    background-color: var(--clr-secondary-200);
    color: var(--clr-neutral-grey-700);
    align-self: flex-start;
}

.reel-section .reel-info button[data-inverted="inverted"]:hover {
    background-color: var(--clr-neutral-grey-700);
    color: var(--clr-neutral-secondary-200);
}

/* =============____________reel-section____________============= */
/* ====______reel-section====______ */

/* =============____________footer____________============= */
/* global-footer-styling */
footer ul li {
    padding-block: var(--space-200);
}

footer ul li a {
    font-size: var(--fs-400);
    color: var(--clr-neutral-grey-200);
}

footer a:hover {
    text-decoration: underline !important;
}

footer h3 {
    font-size: var(--fs-500);
    font-weight: var(--fw-regular);
    text-transform: capitalize;
}

footer i {
    color: var(--clr-neutral-100);
}

/* ============================== */

footer {
    position: relative;
    overflow: hidden;
}

/* footer-holder */
footer .footer-holder {
    position: relative;
    z-index: 1;
}

/* footer-after-pseudo-element */
footer::after {
    content: "";
    background-image: url("/assets/imgs/website-logo.png");
    background-size: cover; /* Adjust size */
    background-position: 80%; /* Adjust position */
    background-repeat: no-repeat; /* Prevent tiling */
    display: block; /* Necessary for visibility */
    width: 480px; /* Required dimensions */
    height: 470px;
    position: absolute;
    bottom: 5rem;
    inset-inline-end: -15rem;
    filter: grayscale(1) opacity(0.15);
}

@media (min-width: 768px) {
    footer::after {
        inset-inline-end: 0;
    }
}

/* footer-head */
footer .footer-head {
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--space-400);
}

@media (min-width: 768px) {
    footer .footer-head {
        flex-direction: row;
        justify-content: space-between;
    }
}
/* =================================== */
/* footer-main */
footer .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-400);
}

@media (min-width: 768px) {
    footer .footer-main {
        grid-template-columns: repeat(5, 1fr);
    }
    footer .footer-main > :first-child {
        order: 1;
    }
}
/* =================================== */
/* footer-foot */

.copyright {
    display: flex;
    flex-direction: column;
    gap: var(--space-500);
}

@media (min-width: 768px) {
    .copyright {
        flex-direction: row;
    }
}

/* =================================== */

/* =============____________footer____________============= */

/* form-general-styling */
label {
    color: var(--clr-neutral-grey-600);
    font-weight: var(--fw-bold);
    font-size: var(--fs-300);
    /* this style from header-label-section, so i'm waiting for ok to this style and i'll group it */
}

.register-section,
.reset-password-section {
    --custom-margin-block: 2rem; /* 15rem not for too long */
    margin-block: var(--custom-margin-block);
}

.login-section,
.forgot-password-section {
    margin-block: var(--space-650);
}

.input-group {
    border-radius: var(--br-5);
    overflow: hidden;
}

.input-group .input-group__icon {
    background-color: var(--clr-secondary-200);
    padding: var(--space-362) var(--space-400);
}

.user-profile-section .user-box .input-group .input-group__icon {
    background-color: var(--clr-primary-400);
    color: var(--clr-neutral-100);
}

.form__button-box .register-btn,
.form__button-box .login-btn {
    padding: var(--space-400) var(--space-600);
}

.form__input-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-100);
}

/* form-logo-image */
.img-holder {
    width: 340px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    position: relative;
}

.login-section .img-holder,
.reset-password-section .img-holder,
.forgot-password-section .img-holder,
.register-section .img-holder {
    position: relative;
}

.login-section .img-holder::before,
.reset-password-section .img-holder::before,
.forgot-password-section .img-holder::before,
.register-section .img-holder::before {
    content: "";
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    background-color: var(--clr-primary-400);
    border-radius: 50%;
    z-index: -1;
}

@media (min-width: 768px) {
    .register-section .img-holder::before {
        top: 100px;
    }
}

.img-holder .orange-circle {
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    background-color: var(--clr-primary-400);
    border-radius: 50%;
    z-index: -1;
}

@media (min-width: 768px) {
    .img-holder .orange-circle {
        top: 45px;
    }
}

/* __register-form */
.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label,
.was-validated .form-control:valid {
    border-color: #dee2e6 !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #000 !important;
}

.was-validated .form-check-input:valid:checked {
    background-color: var(--clr-primary-400) !important;
    border-color: var(--clr-primary-400) !important;
}

.register-section .register-section__form form {
    display: grid;
}

.form-check {
    margin-block-start: var(--space-400);
}

/* .register-section .register-section__form .form__input-box input {
  border: 1px solid var(--input-border);
} */

.group-style {
    position: relative;
}

.group-style .show-eye {
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    z-index: 10;
    padding-inline: var(--space-362);
    cursor: pointer;
}

.country-select .flag {
    background-image: url("/assets/imgs/flags.png");
}

.country-select .country-list {
    min-width: 355px;
    z-index: 20;
}

.iti__dropdown-content {
    z-index: 20 !important;
}

/* login-form */
.login-section > div {
    /* width: clamp(200px, 80%, 600px);
  margin-inline: auto;
  background-color: #f7f7f7;
  box-shadow: 0 3px 15px #cccccc;
  padding-block: var(--space-400);
  padding-inline: var(--space-600);
  min-height: 25rem;
  display: grid; */
}

@media (max-width: 768px) {
    .login-section .login-form h1 {
        margin-block-start: var(--space-400) !important;
    }
}

.login-section .login-section__form form .pass .forgot-password {
    display: flex;
    justify-content: flex-end;
}

/* forgot-pasasword-section */

.forgot-password-section .forgot-password-container > a {
    display: block;
    text-align: center;
    text-decoration: none;
}

.forgot-password-section .forgot-password-container .forgot-password__form {
    display: grid;
    /* gap: var(--space-200); */
}

/* reset-pasasword-section */

.reset-password-container {
    flex-direction: column;
    justify-content: center;
}

/* trending-section */
.trending {
    background-color: var(--clr-neutral-grey-100);
    padding-block: var(--space-650);
}

/* ============== features-section ============== */
.feature-section {
    /* margin-block: var(--space-700); */
}

.feature-section .feature-holder {
    display: grid;
    gap: var(--space-400);
}

@media (min-width: 750px) {
    .feature-section .feature-holder {
        grid-template-columns: 1fr 1fr;
    }
}

.feature-section .feat-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-height: 450px;
}

.feature-section .feat-images > div {
    border-radius: var(--br-15);
    overflow: hidden;
}

.feature-section .feat-images > div > img {
    min-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
}

.feature-section .feat-images > :first-child {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
}

.feature-section .feat-images > :nth-of-type(2) {
    grid-column: 1 / span 2;
    grid-row: 3 / span 2;
}

.feature-section .feat-images > :last-child {
    grid-column: 3 / -1;
    grid-row: 3 / span 2;
}

@media (min-width: 950px) {
    .feature-section .feat-images > :first-child {
        grid-column: 1 / -1;
        grid-row: 1 / 5;
    }

    .feature-section .feat-images > :nth-of-type(2) {
        grid-column: 1 / span 2;
        grid-row: 5 / 7;
    }

    .feature-section .feat-images > :last-child {
        grid-column: 3 / span 2;
        grid-row: 3 / 7;
    }
}

.feature-section .feat-info,
.feature-section .feat-info > div {
    display: flex;
    flex-direction: column;
}

.feature-section .feat-info {
    padding: var(--space-400);
    justify-content: center;
    gap: var(--space-400);
}

.feature-section .feat-info > div {
    gap: var(--space-200);
}

.feature-section .feat-info > div h1 {
    font-size: 0.875rem;
    font-size: clamp(0.875rem, 0.55rem + 1.625vw, 2.5rem);
    max-width: 20ch;
}

@media (max-width: 749px) {
    .feature-section .feat-info > div h1 {
        white-space: nowrap;
        max-width: fit-content;
    }
}

.feature-section .feat-info p {
    font-size: var(--fs-300);
    color: var(--clr-neutral-grey-600);
    line-height: 1.6;
    max-width: 60ch;
}

@media (min-width: 400px) {
    .feature-section .feat-info .feat-list {
        columns: 2;
        column-gap: 0px;
    }
}

.feature-section .feat-info .feat-list li {
    display: flex;
    gap: var(--space-200);
    /* margin-top: var(--space-200); */
}

.feature-section .feat-info .feat-list li img {
    color: var(--clr-primary-400);
}

.feature-section .feat-info .feat-list li span {
    color: var(--clr-neutral-grey-400);
    font-size: var(--fs-300);
}

/* ============== features-section ============== */
/* second-feature-for-another-section */

.ttd {
    position: relative;
    background: url("/assets/imgs/op-bg-02.jpg") no-repeat center;
    background-size: cover;
    padding-block: var(--space-800);
    text-align: center;
    color: var(--clr-neutral-100);
}

.ttd .overlay {
    background-color: hsla(
        0,
        0%,
        0%,
        0.3
    ); /* hsla(14.1, 66.8%, 53.9%, 0.5) */ /*var(--clr-secondary-400)*/
}

.ttd .container-custom {
    position: relative;
    z-index: 1;
}

.ttd h3,
span {
    text-transform: capitalize;
}

.ttd h3 {
    font-size: var(--fs-750);
    font-weight: var(--fw-extra-bold) !important;
}

.ttd p {
    max-width: 50ch;
    margin: var(--space-400) auto !important;
    line-height: normal !important;
}

.ttd-icons-holder {
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.ttd-icons-holder > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ttd-icons-holder > div .circle-around {
    border: 2px solid var(--clr-neutral-100);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    line-height: 60px;
}

.ttd-icons-holder > div span {
    font-size: var(--fs-200);
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-100);
    margin-top: var(--space-360);
}

@media (max-width: 600px) {
    .ttd-icons-holder div {
        flex: 1;
    }
}

/* ======section-style====== */
/* ==========section-style========== */
/* ====================section-style==================== */

.section-card {
    display: flex;
    /* justify-self: flex-start; */
}

.explore-card,
.card-hold {
    border-radius: var(--br-15);
    overflow: hidden;
    /* box-shadow: 0px 0px 6px rgba(141, 149, 193, 0.24); */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    transition: var(--defualt-transition);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.section-card:hover .card-hold {
    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.5);
}

/* section-heading */
/* .section-heading {
  font-size: var(--fs-750);
} */

.section-heading {
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
    font-weight: var(--fw-bold);
}

/* activities & sort-by__area */
.activities-found {
    flex-wrap: wrap;
    text-wrap: nowrap;
}

.activities-found > div {
    font-size: 0.75rem;
    font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
}

.activities-found .mca-text {
    font-size: 0.75rem;
    font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
}

.section-cards,
.land-attr__media-scrlbar {
    margin-top: var(--space-500);
}

.section-card,
.explore-card {
    cursor: pointer;
    height: auto;
}

.section-card .card-image-holder {
    min-height: 225px;
    max-height: 225px;
    overflow: hidden;
}

/* section-single-card img */
.section-card .card-image-holder img[alt="egyptra-tours"] {
    min-width: 100%;
    min-height: 225px;
    max-height: 225px;
    object-fit: cover;
    object-position: center;
    transition: var(--defualt-transition);
}
.section-card:hover .card-hold .card-image-holder > img {
    scale: var(--card-img-scale);
}
/* section-single-card card-descrition */
.section-card .card-info {
    position: relative;
    background-color: var(--clr-neutral-100);
    padding: var(--space-420) var(--space-390);
    z-index: 1;
    flex: 1;
    display: grid;
    align-content: space-evenly;
    gap: var(--space-100);
}

.section-card .card-info::before {
    content: "";
    position: absolute;
    inset-block-start: -10px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 50px;
    background-color: var(--clr-neutral-100);
    border-radius: var(--br-16) var(--br-16) 0 0;
    overflow: hidden;
    z-index: -1;
}

.section-card .card-info .flag-card,
.car-flag {
    position: absolute;
    top: -27px;
    background-color: var(--clr-accent-yellow);
    padding: var(--space-200) var(--space-400);
    border-radius: var(--br-81);
    color: var(--clr-neutral-100);
    font-weight: var(--fw-bold);
    font-size: var(--fs-300);
}

/* section-single-card card-descrition card-heading */

.section-card .card-info .card-heading {
    font-size: var(--fs-600);
    margin-block-end: 0;
}

.hotels-section-cards .card-info .card-heading {
    line-height: 1.2;
}

/* section-single-card card-descrition card-distance-time */

.section-card .card-info .distance-time span,
.section-card .card-info .card-location span {
    font-size: var(--fs-200);
    font-weight: var(--fw-regular);
}

/* section-single-card card-descrition card-paragraph */

.section-card .card-info p {
    color: var(--clr-neutral-grey-600);
}

@media (min-width: 768px) {
    .section-card .card-info p {
        max-width: 50ch;
    }
}

/* card-discount */

.renting-card .card-discount[data-line="through"] span,
.card-price .card-discount[data-line="through"] span {
    font-size: var(--fs-300);
    text-decoration: line-through 2px var(--clr-neutral-grey-400);
    color: var(--clr-neutral-grey-400);
}

.single-tour__check .card-discount[data-line="through"] span {
    /* text-decoration: line-through 2px var(--clr-neutral-grey-600);
  color: var(--clr-neutral-grey-600); */
}

.currency-price {
    font-size: var(--fs-500);
}

.current-price span {
    color: var(--clr-discount-700);
    font-weight: var(--fw-bold);
}

.single-car__check .current-price span {
    color: var(--clr-primary-400);
}

.single-tour-price span {
    font-size: var(--fs-700);
    color: var(--clr-primary-400);
    line-height: var(--space-500);
}

/* person-count-part */
.single-tour__check .person-count {
    font-size: var(--fs-300);
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-grey-600);
}
/* single-tour-check button */

.single-tour__check button {
    margin-block-start: var(--space-400);
    white-space: nowrap;
    width: 100%;
}

@media (min-width: 992px) {
    .single-tour__check button {
        margin-block-start: 0;
        flex: 1;
    }
}

/* ====================section-style==================== */
/* ==========section-style========== */
/* ======section-style====== */

/* ====================<<<<<<<<<**pagination**>>>>>>>>>>==================== */
.pagination-navbar {
    place-items: center;
}

.pagination-navbar .pagination li a {
    color: var(--clr-primary-400) !important;
}

.pagination-navbar .pagination li:hover a {
    background-color: var(--clr-hover-700);
    color: var(--clr-neutral-100) !important;
}

/* ====================<<<<<<<<<**pagination**>>>>>>>>>>==================== */

/* =================== single-tour-section =================== */
.h1,
.h2,
.h3,
.h4,
.h5,
.orange-line {
    position: relative;
    text-transform: capitalize;
}
.orange-line::after,
.h1::after,
.h2::after,
.h3::after,
.h4::after,
.h5::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: -5px;
    width: 40px;
    height: 4px;
    background-color: var(--clr-primary-400);
    border-radius: var(--br-50);
}

.single-hotel,
.single-tour {
    overflow: hidden;
}

.single-hotel header {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "head head"
        "charge charge"
        "gallery gallery"
        "both both"
        "location location";
    gap: var(--space-400);
}

.single-hotel header .rating-info-holder {
    flex-direction: column;
    gap: var(--space-200);
}

@media (min-width: 768px) and (max-width: 991px) {
    .single-hotel header .rating-info-holder {
        flex-direction: row;
    }
    .single-hotel header .rating-info-holder > div:first-of-type {
        flex: 2;
    }
    .single-hotel header .rating-info-holder > div:last-of-type {
        flex: 3;
    }
}

@media (min-width: 992px) {
    .single-hotel header {
        grid-template-areas:
            "head charge"
            "gallery both"
            "location both";
    }

    .single-hotel header .rating-info-holder {
        flex-direction: column;
        gap: var(--space-200);
    }
}

.single-hotel header .single-hotel-rating-holder {
    grid-area: head;
}

.single-hotel-charge {
    grid-area: charge;
}

.single-hotel header .hotel-gallery-holder {
    grid-area: gallery;
}
.single-hotel header .hotel-location-holder {
    grid-area: location;
}

.single-hotel header .rating-info-holder {
    grid-area: both;
}
/*
.single-hotel-rating-holder .single-hotel-charge .card-set {
   background-color: var(--clr-neutral-grey-100); 
  padding: 1rem;
  border-radius: var(--br-5);
  
}
*/
.single-hotel-charge .current-price .currency-price {
    font-size: var(--fs-725);
    line-height: 1;
    color: var(--clr-secondary-400);
}

.single-hotel-charge .single-hotel-charge-button {
    border-radius: var(--br-5);
    background-color: var(--clr-secondary-300);
    font-size: var(--fs-600);
    padding: var(--space-362) var(--space-420);
}

.single-hotel-charge .single-hotel-charge-button:hover {
    opacity: 0.8;
}

/* single-hotel-gallery */
/* vlog-article-gallery */
/* single-tour-gallery */

.single-hotel .single-hotel__gallery {
    position: relative;
    height: 30rem;
}

.single-hotel .single-hotel__gallery .image-container img {
    transition: opacity var(--defualt-transition);
}

.single-hotel .single-hotel__gallery .image-container:hover img {
    opacity: 0.8;
}

.vlog-article .vlog-article__gallery,
.single-tour .single-tour__gallery {
    height: 25rem;
    position: relative;
}

.single-hotel .single-hotel__gallery .image-container,
.vlog-article .vlog-article__gallery .image-container,
.single-tour .single-tour__gallery .image-container {
    position: relative;
    overflow: hidden;
}

/* single-tour-gallery img */

.single-hotel .single-hotel__gallery img,
.vlog-article .vlog-article__gallery img,
.single-tour .single-tour__gallery img {
    object-fit: cover;
    object-position: center;
    min-width: 100%;
    min-height: 100%;
    max-height: 100%;
    border-radius: var(--br-8);
}

.single-hotel .single-hotel__gallery img {
    border-radius: var(--br-5);
}

/* reel-gallery */
.single-tour .single-tour__gallery .reel-video {
    border-radius: var(--br-20);
    overflow: hidden;
}

.single-tour .single-tour__gallery .reel-video,
.single-tour .single-tour__gallery .reel-video video {
    min-width: 100%;
    max-width: 100%;
    min-height: 400px;
    max-height: 100%;
    object-fit: cover;
}

.single-hotel .single-hotel__gallery,
.vlog-article .vlog-article__gallery,
.single-tour .single-tour__gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-200);
}

.single-hotel .single-hotel__gallery,
.single-tour .single-tour__gallery {
    grid-template-columns: 220px 1fr;
}

.single-tour .single-tour__gallery .image-01,
.single-tour .single-tour__gallery .image-02,
.single-tour .single-tour__gallery .image-03 {
    display: block;
}

/* .single-tour .single-tour__gallery .image-container:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: span 2;
} */

.single-tour .single-tour__gallery .image-container:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / span 6;
    /* transform: translateY(20px); */
}

.single-tour .single-tour__gallery .image-container:nth-child(2),
.single-tour .single-tour__gallery .image-container:nth-child(3),
.single-tour .single-tour__gallery .image-container:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: span 2;
}

.single-tour .single-tour__gallery .image-container:nth-child(5) {
    display: none;
}

.vlog-article .vlog-article__gallery .image-03,
.vlog-article .vlog-article__gallery .image-04 {
    display: none;
}

.vlog-article .vlog-article__gallery .image-container:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / span 3;
}
.vlog-article .vlog-article__gallery .image-container:nth-child(2) {
    grid-column: 2 / 3;
}

.single-hotel .single-hotel__gallery .image-container:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

@media (min-width: 48em) {
    .single-hotel .single-hotel__gallery,
    .vlog-article .vlog-article__gallery,
    .single-tour .single-tour__gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, auto);
    }

    .single-tour .single-tour__gallery {
        grid-template-columns: 220px 1fr 1fr 1fr;
    }

    /* .vlog-article .vlog-article__gallery {
    grid-template-rows: repeat(3, auto);
  } */

    .vlog-article .vlog-article__gallery .image-03,
    .vlog-article .vlog-article__gallery .image-04 {
        display: block;
    }

    /* .vlog-article .vlog-article__gallery img, */
    .single-tour .single-tour__gallery img {
        display: block;
    }

    /* ========================single-tour-image-gallery-grid-layout============================ */
    .single-tour .single-tour__gallery .image-container:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: span 3;
    }

    .single-tour .single-tour__gallery .image-container:nth-child(2) {
        grid-column: 2 / 4;
        grid-row: span 3;
    }

    .single-tour .single-tour__gallery .image-container:nth-child(3) {
        grid-column: 4 / 5;
        grid-row: 1 / 2;
    }

    .single-tour .single-tour__gallery .image-container:nth-child(4) {
        grid-column: 4 / 5;
        grid-row: 2 / 3;
    }

    .single-tour .single-tour__gallery .image-container:nth-child(5) {
        display: block;
    }
    /* ========================end-single-tour-image-gallery-grid-layout============================ */

    /* ========================vlog-image-gallery-grid-layout============================ */
    .vlog-article .vlog-article__gallery .image-container:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / span 2;
    }

    .vlog-article .vlog-article__gallery .image-container:nth-child(2) {
        grid-column: 3 / -1;
        grid-row: 1 / span 4;
    }

    .vlog-article .vlog-article__gallery .image-container:nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 3 / span 4;
    }

    .vlog-article .vlog-article__gallery .image-container:nth-child(4) {
        grid-column: 3 / -1;
        grid-row: 5 / span 2;
    }
    /* ======================== end-vlog-image-gallery-grid-layout============================ */
    /* ========================hotel-image-gallery-grid-layout============================ */
    .single-hotel .single-hotel__gallery .image-container:nth-child(1) {
        grid-column: 1 / span 3;
        grid-row: 1 / span 2;
    }
}

/* gallery-imgs-num */
.gallery-imgs-num {
    position: absolute;
    inset-inline-end: var(--space-400);
    bottom: var(--space-400);
    border-radius: var(--br-50);
    padding: var(--space-200) var(--space-400);
    border: 3px solid var(--clr-secondary-200);
    background-color: var(--clr-secondary-200);
    color: var(--clr-primary-400);
    font-weight: var(--fw-bold);
    font-size: var(--fs-400);
    cursor: pointer;
    transition: var(--defualt-transition);
}

.gallery-imgs-num:hover {
    background-color: var(--clr-primary-400);
    color: var(--clr-secondary-200);
    border: 3px solid var(--clr-primary-400);
}

/* single-hotel-gallery-style */
.single-hotel .single-hotel__gallery .memo-stamp {
    inset-block-start: 0;
    inset-inline-start: var(--space-600);
    width: min-content;
    height: min-content;
    background-color: var(--clr-accent-yellow);
    border-radius: 0 0 var(--br-8) var(--br-8);
    padding: var(--space-100);
}

.single-hotel .hotel-info {
    border: 1px solid var(--clr-neutral-grey-200);
    border-radius: var(--br-5);
}

.single-hotel .hotel-info header {
    border-bottom: 1px solid var(--clr-neutral-grey-200);
}

/* hotel-facilities */

.single-hotel-header .facilities li {
    display: flex;
    align-items: center;
    position: relative;
    padding-inline-start: var(--space-420);
    gap: var(--space-200);
}

.single-hotel-header .facilities li p {
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-grey-500);
    font-size: var(--fs-300);
}

.single-hotel .hotel-progression ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.single-hotel .hotel-progression .progress-title {
    font-size: var(--fs-300);
}

.single-hotel .hotel-progression .progress-bar {
    min-width: 6rem;
    height: 13px;
    background-color: var(--clr-neutral-grey-200);
    border-radius: var(--br-50);
}

.single-hotel .hotel-progression .progress-bar span {
    height: 100%;
}

.single-hotel .hotel-progression .progress-number {
    font-size: var(--fs-200);
}

.single-hotel .hotel-info .hotel-highlights {
    padding: var(--space-400);
}

.single-hotel .hotel-info .hotel-highlights ul li {
    display: flex;
    align-items: center;
    gap: var(--space-400);
}

.single-hotel .hotel-info .hotel-highlights ul h5 {
    text-transform: capitalize;
    font-weight: var(--fw-bold);
    color: var(--clr-secondary-400);
    margin: 0;
}

.single-hotel .hotel-info .hotel-highlights ul li i {
    font-size: var(--fs-700);
}

.single-hotel .hotel-info .hotel-highlights ul li h5 {
    font-size: var(--fs-400);
}

.single-hotel .hotel-info .hotel-highlights ul li p {
    color: var(--clr-neutral-grey-500);
    line-height: 1.4;
}

.single-hotel .hotel-info .hotel-info-footer {
    padding: var(--space-400);
}

.single-hotel .hotel-info .hotel-info-footer .hotel-info-button {
    display: block;
    border-radius: var(--br-5);
    text-align: center;
}

/* hotel-participants & price */

.single-hotel-price .price-holder {
    position: relative;
    z-index: 10;
}

.single-hotel .single-hotel-header,
.single-hotel-price .price-holder,
.hotels-section-cards .related-hotels {
    border: 1px solid var(--clr-neutral-grey-200);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.single-hotel-price .single-hotel-participant-heading::first-letter {
    text-transform: capitalize;
}

.single-hotel-price .participants,
.single-hotel-price .select-input {
    border: 1px solid var(--clr-neutral-grey-200);
}

.single-hotel-participant .select-holder .button-custom {
    border-radius: var(--br-5) !important;
}

/* style the image inside the lightbox itself */
.pswp__img {
    border: 5px solid #fff;
    border-radius: var(--br-10);
    object-fit: cover;
    transition: var(--defualt-transition) linear; /* Add a smooth transition effect */
}

/* single-tour-main */
.single-tour .single-tour-main {
    margin-block-start: var(--space-600);
    /* margin-block-end: var(--space-400); */
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "brief brief"
        "about about"
        "details details"
        "aside aside";
    /* "expert expert"; */
    gap: var(--space-362);
    position: relative;
    z-index: 2;
}

.single-tour .single-tour-main aside {
    grid-area: aside;
}

.single-tour .single-tour-main .single-tour__brief {
    grid-area: brief;
    display: flex;
    align-items: center;
}
.single-tour .single-tour-main .about-tour {
    grid-area: about;
}

.single-tour .single-tour-main .about-tour,
.single-tour .single-tour-main .single-tour__details {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.single-tour .single-tour-main .single-tour__details {
    grid-area: details;
}

/* .single-tour .single-tour-main .collapse-section {
  grid-area: collapse;
} */

/* .single-tour .single-tour-main .experience {
  grid-area: expert;
} */

/* experience */

.accordion-button:focus {
    box-shadow: none;
}

.accordion-item .accordion-button.collapsed {
    background-color: var(--clr-neutral-grey-100);
}

.accordion-button:not(.collapsed) {
    background-color: var(--clr-secondary-200);
    color: var(--clr-neutral-grey-600);
}

.accordion-body {
    background-color: var(--clr-primary-100);
}

.single-tour .experience .accordion-body ul {
    margin: 0;
}

.single-tour .experience {
    /* what an a freaking ideaaaaaaaaaa, expand the section using negative margin even it's inside a container that wrap it */
    /* and it didn't work cause overflow:hidden of the container  حاسس ان الكود فاللحظة ده عامل زي فيلم الباشا تلميذ فاخر الفيلم*/
    /* padding-inline: 100%;
  margin-inline: -100%; */
    /* position: relative;
  padding-block: var(--space-400);
  margin-block: var(--space-400); */
}

/* .single-tour .experience:before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--clr-secondary-200);
  z-index: -1;
  padding-inline: 100%;
  margin-inline: -100%;
  /* it worked, cause my small brain didn't notice that i can give the overflow:hidden; to the body or the main-section not the container 
} */

.single-tour .experience .exp-notes {
    gap: var(--space-400);
}

@media (min-width: 700px) {
    .single-tour .experience .exp-notes {
        grid-template-columns: auto auto;
    }
}

.single-tour .experience .exp-notes .note-holder ul > li {
    position: relative;
    padding-inline-start: var(--space-420);
}

/* default-aside__layout */
.aside {
    flex-direction: column-reverse;
}

/* .aside .single-tour__check {
  order: 1;
} */

@media (min-width: 768px) {
    .single-tour .single-tour-main {
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "brief aside"
            "about aside"
            "details aside";
        /* grid-template-rows: 0fr 0fr 0fr auto 1fr; */
        /* "expert expert"; */
    }
    .aside {
        flex-direction: column;
    }
    /* .aside .map-section {
    order: 1;
  } */
}

/* end-_default-aside__layout */

.single-car-renting-section .single-car__check,
.single-tour .single-tour-main aside .single-tour__check {
    border: 1px solid hsl(347, 100%, 95%);
}

.single-tour .single-tour-main .save-up {
    background-color: var(--clr-primary-200);
    color: var(--clr-primary-400);
    font-weight: var(--fw-bold);
    font-size: var(--fs-300);
    text-align: right;
    padding: var(--space-100) var(--space-200);
}

/* map-section-styling */

.map-section iframe {
    width: 100% !important;
    height: 450px !important;
    border-radius: var(--br-8);
}

/* single-tour-brief */
.single-tour__details .single-tour__flags ul li span,
.single-tour p {
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-grey-600);
    line-height: var(--space-420);
}

/* single-tour-details */

.single-tour__details ul li {
    display: flex;
}

/* tour-details */

.single-tour__details .tour-details ul li {
    gap: var(--space-360);
}

.single-tour__details .tour-details ul li h5 {
    font-size: var(--fs-400);
    font-weight: var(--fw-bold);
}

.single-tour__details .tour-details ul li p {
    color: var(--clr-neutral-grey-500);
}

/* single-tour-flags */
.single-tour__details .single-tour__flags ul {
    flex-wrap: wrap;
    gap: var(--space-400);
}

.single-tour__details .single-tour__flags ul li {
    flex-basis: 20%;
    white-space: nowrap;
    align-items: center;
    gap: var(--space-200);
}

.single-tour__details .single-tour__flags ul li span {
    font-size: var(--fs-300);
}

.single-tour__details .tourist-instructions {
    background-color: var(--clr-secondary-200);
    padding: var(--space-400);
    border-radius: var(--br-10);
    border: 1px solid var(--clr-neutral-grey-400);
}

.single-tour__details .tourist-instructions h5 {
    display: inline-block;
    color: var(--clr-primary-400);
    border-radius: var(--br-5);
    padding: var(--space-100) var(--space-200);
}

/* ==================single-tour__attributes================== */
/* special-order-for-ameen */
@media (max-width: 444px) {
    .single-car__attributes .attributes-wrapper,
    .single-tour__attributes .attributes-wrapper {
        grid-template-columns: auto !important;
    }

    .single-tour__attributes .attributes-wrapper .label-list .child-attr {
        display: block !important;
    }
    .single-tour__attributes
        .attributes-wrapper
        .label-list
        .child-attr
        .stepper-container {
        margin-top: var(--space-200);
    }
}

.collapse-section {
    position: relative;
    border: 1px solid var(--clr-primary-400);
    border-radius: var(--br-8);
    padding: var(--space-400);
    /* background: url("/assets/imgs/aswan.jpg") no-repeat fixed;
  background-size: cover; */
    z-index: 10; /* this is for participant dropdown to be in the top of it's beneath section */
}

/* .collapse-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.collapse-section * {
  color: #fff !important;
  z-index: 2;
} */

.single-tour__attributes .worth-mention {
    color: var(--clr-neutral-grey-500) !important;
}

.single-car__attributes .attributes-wrapper,
.single-tour__attributes .attributes-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--space-400);
    /* box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1); */
}

.attributes-wrapper .attribute-box input[type="radio"] {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

.single-car__attributes .attributes-wrapper li,
.single-tour__attributes .attributes-wrapper li {
    position: relative;
    border: 1px solid var(--clr-primary-400);
    /* background-color: var(--clr-secondary-200); */
    border-radius: var(--br-8);
    padding: var(--space-400);
    cursor: pointer;
}

.single-tour__attributes .attributes-wrapper li:hover {
    background-color: var(--clr-primary-100);
}

/* .categorie-info .categorie-mark {
  position: relative;
  padding: var(--space-400);
  border-radius: var(--br-50);
  background-color: var(--clr-primary-400);
  outline: 2px solid var(--clr-primary-400);
}

.categorie-info .categorie-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--clr-neutral-100);
  padding: var(--space-200);
  border-radius: var(--br-50);
} */

.single-car__attributes .attributes-wrapper li .label-list,
.single-tour__attributes .attributes-wrapper li .label-list {
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    padding-inline-start: var(--space-200);
    gap: var(--space-400);
}

.single-car__attributes .attributes-wrapper li .label-list > *,
.single-tour__attributes .attributes-wrapper li .label-list > * {
    flex-basis: auto;
    text-wrap: wrap;
    cursor: pointer;
}

@media (min-width: 707px) {
    .single-car__attributes .attributes-wrapper li .label-list,
    .single-tour__attributes .attributes-wrapper li .label-list {
        flex-direction: column;
        gap: var(--space-200);
    }
}

.single-car__attributes .attributes-wrapper .label-list .child-attr,
.single-tour__attributes .attributes-wrapper .label-list .child-attr {
    gap: var(--space-650);
}

@media (min-width: 692px) {
    .single-car__attributes .attributes-wrapper .label-list .child-attr,
    .single-tour__attributes .attributes-wrapper .label-list .child-attr {
        gap: var(--space-200);
    }
}

.stepper-container {
    align-items: center;
    gap: 1rem;
}

.cycle-check .stepper-container .stepper-button,
.participant-dropdown .stepper-container .stepper-button,
.single-car__attributes
    .attributes-wrapper
    li
    .label-list
    .child-attr
    .stepper-button,
.single-tour__attributes
    .attributes-wrapper
    li
    .label-list
    .child-attr
    .stepper-button {
    background-color: var(--clr-primary-400);
    border: 1px solid var(--clr-primary-400);
    color: var(--clr-neutral-100);
    border-radius: var(--br-50);
    font-size: var(--fs-100);
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
}

.bg-change {
    border: 1px solid var(--clr-neutral-grey-400) !important;
    background-color: transparent !important;
    color: var(--clr-neutral-grey-400) !important;
    cursor: not-allowed !important;
}
/* ==================single-tour__lang-date================== */

.single-hotel-participant .select-box {
}

.single-tour__lang-date .select-box {
    background-color: var(--clr-secondary-300);
    color: var(--clr-neutral-100);
    border-radius: var(--br-10);
    padding: var(--space-400);
}

.single-hotel-participant .select-box .select-holder,
.single-tour__lang-date .select-box .select-holder {
    display: grid;
    gap: var(--space-400);
}

@media (min-width: 700px) {
    .single-hotel-participant .select-box .select-holder,
    .single-tour__lang-date .select-box .select-holder {
        grid-template-columns: repeat(2, 1fr);
        /* grid-template-areas:
      "partic date"
      "lang ."
      "btn"; */
    }
    .single-hotel-price .select-box .select-holder button,
    .single-tour__lang-date .select-box .select-holder button {
        grid-column: 1 / -1;
    }
}
@media (min-width: 900px) {
    .single-hotel-participant .select-box .select-holder,
    .single-tour__lang-date .select-box .select-holder {
        grid-template-columns: repeat(3, 1fr);
        /* grid-template-areas:
      "partic date lang"
      "btn btn btn";
    justify-content: center; */
    }
    .single-hotel-price .select-box .select-holder button,
    .single-tour__lang-date .select-box .select-holder button {
        grid-column: 3 / -1;
    }
}

.single-hotel-participant .select-box .lang-date__heading,
.single-tour__lang-date .select-box .lang-date__heading {
    margin-block-end: var(--space-200) !important;
}

.select-input,
.select-lang {
    position: relative;
    background-color: var(--clr-neutral-100);
    border-radius: var(--br-5);
    display: flex;
    align-items: center;
}
.select-input {
    pointer-events: auto; /* Ensure interactivity */
}
/* 
.select-input {
  grid-area: date;
}
.select-input + div {
  grid-area: lang;
}

.select-holder button {
  grid-area: btn;
} */

/* start-participant-select */
.participants {
    /* grid-area: partic; */
    position: relative;
    background-color: var(--clr-neutral-100);
    border-radius: var(--br-5);
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 36px;
    align-items: center;
    cursor: pointer;
}

.participants i:not(.stepper-button i) {
    color: var(--clr-secondary-400);
    font-size: var(--fs-400);
    padding-inline: var(--space-390);
}

/* participant-dropdown-style */

.participant-dropdown {
    position: absolute;
    top: 100%;
    min-width: 100%;
    background-color: var(--clr-neutral-100);
    padding: var(--space-500);
    border: 1px solid var(--clr-neutral-grey-200);
    border-radius: var(--br-5);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    color: var(--clr-secondary-400);
    z-index: 5;
    transform: translateY(-10px); /* Start slightly above */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Prevent interaction */
    transition: all var(--defualt-transition) ease; /* Smooth transition */
}

.participant-dropdown.show {
    transform: translateY(0); /* Drop down into place */
    opacity: 1; /* Fully visible */
    visibility: visible; /* Enable interaction */
}

/* special-responsive for this */
.participant-dropdown.show .first-div,
.participant-dropdown.show .second-div {
    flex-wrap: wrap;
    /* align-items: flex-start !important; */
    gap: var(--space-400) !important;
}

/* end-participant-select */

.select-lang {
    padding-inline: var(--space-360);
}

.single-tour__lang-date .select-box .select-input i,
.single-tour__lang-date .select-box .select-lang i {
    color: var(--clr-secondary-400);
    cursor: pointer;
}

.hotels__hero-section .select-input i,
.single-hotel-participant .select-box .select-input i,
.single-tour__lang-date .select-box .select-input i {
    position: absolute;
}

.hotels__hero-section .select-input i:first-child,
.single-hotel-participant .select-box .select-input i:first-child,
.single-tour__lang-date .select-box .select-input i:first-child {
    inset-inline-start: var(--space-400);
}

.hotels__hero-section .select-input .ar-down,
.single-hotel-participant .select-box .select-input .ar-down,
.single-tour__lang-date .select-box .select-input .ar-down {
    inset-inline-end: var(--space-400);
}

.single-hotel-participant .select-box .select-input input,
.single-tour__lang-date .select-box .select-input input {
    border: transparent;
    border-radius: var(--br-5);
    padding-inline-start: var(--space-650);
    position: relative;
    background: transparent;
    z-index: 2;
}

/* the problem in flatpicker was because : Flatpickr automatically adds a mobile-friendly fallback (flatpickr-mobile) in browsers that support native date pickers (like Firefox in responsive design mode). This fallback uses the native date and time picker instead of the Flatpickr interface.
    You can disable this behavior to ensure the Flatpickr UI always shows, even on mobile devices or in responsive design mode.
  */

.lang-select {
    flex: 1;
    padding: 0.5rem;
    background-color: transparent;
    border: transparent;
    cursor: pointer;
}

/* Experience-section */

.single-car__check .price-details ul > li,
.single-car__highlights ul > li,
/*.experience > ul > li*/
.single-tour .experience .accordion-body ul li {
    padding-inline-start: var(--space-420);
    position: relative;
    /* margin-block-start: var(--space-200); */
}

.single-hotel-header .facilities li:before,
.single-car__check .price-details ul > li:before,
.single-car__highlights ul > li:before,
.single-tour .experience .accordion-body ul li:before
/* .experience > ul > li:before*/ {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 2px;
    transform: translateY(100%);
    background-color: var(--clr-primary-400);
    width: 6px;
    height: 6px;
    border-radius: var(--br-50);
}

/* cycle-check */
.cycle-check {
    display: none;
    overflow: hidden; /* Prevent content from overflowing */
    transition: var(--defualt-transition); /* Smooth transition effect */
}

.cycle-check.show {
    display: block;
}

.cycle-check .modify-button {
    display: flex;
    align-items: center;
    padding: var(--space-200) var(--space-400);
    border-radius: var(--br-5);
    gap: var(--space-200);
    background-color: var(--clr-accent-green);
}

.cycle-check .modify-button:hover {
    background-color: hsla(141.4, 31.9%, 44.9%, 0.9);
}

.cycle-check ul > li {
    display: flex;
    align-items: center;
    gap: var(--space-360);
}

.cycle-check ul > li span {
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-400);
    color: var(--clr-secondary-400);
}

.cycle-check .booking-continue {
    position: relative;
    background-color: var(--clr-neutral-grey-100);
    border-radius: var(--br-10);
}

@media (max-width: 600px) {
    .cycle-check .booking-continue .card-price {
        flex-direction: column;
        row-gap: var(--space-400);
        align-items: stretch !important;
    }
}

.cycle-check .price-breakdown span {
    color: var(--clr-neutral-grey-500);
    font-weight: var(--fw-bold);
}

@media (max-width: 500px) {
    .check-buttons {
        flex-direction: column;
        gap: var(--space-400) !important;
    }
}

.cycle-check .check-buttons .book {
    background-color: transparent;
    color: var(--clr-primary-400);
    border: 2px solid var(--clr-primary-400);
    transition: var(--defualt-transition);
}

.cycle-check .check-buttons .book:hover {
    background-color: var(--clr-primary-400);
    color: var(--clr-neutral-100);
}

.single-tour-vlogs p {
    color: var(--clr-neutral-100);
}

/* ==========---------- landing-page ----------========== */
.tour,
.tour-section-cards,
.attractions-section-cards,
.ttd-section-cards,
.hotels-section-cards,
.landing-attractions-section,
.landing-ttd-section,
.recommend-car-rent-section {
    padding-block: var(--space-500);
    margin-block: var(--space-400);
    /* margin-block-start: var(--space-650); */
}
/* special-responsive for this */
@media (max-width: 390px) {
    .tour .activities-found {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-362);
    }

    .tour .activities-found div:last-child {
        justify-content: space-between;
    }

    .tour .activities-found div:last-child .dropdown {
        margin-inline: 0 !important;
    }
}

.tour,
.landing-ttd-section,
.contact-us {
    background-color: var(--clr-primary-100);
}

/* horizental-scrollbar-buttons */

.explore-card {
    position: relative;
    border-radius: var(--br-8);
    overflow: hidden;
    display: flex;
}

.explore-card .explore-card__bg img {
    position: absolute;
    inset: 0;
    min-height: 100%;
    object-fit: cover;
    transition: var(--defualt-transition);
}

.explore-card:hover .explore-card__bg img {
    transform: scale(var(--card-img-scale));
}

.explore-card .explore-card__content {
    background: linear-gradient(
        180deg,
        transparent,
        var(--clr-primary-400) 150px,
        var(--clr-primary-400)
    );
    margin-top: auto;
    position: relative;
    z-index: 2;
    padding: var(--space-420);
    /* flex: 1; */
    height: 250px;
    justify-content: flex-end;
    align-items: flex-end;
}

.explore-card .explore-card__content button {
    background-color: var(--clr-secondary-200);
    color: var(--clr-secondary-400);
}

.explore-card .explore-card__content button:hover {
    background-color: var(--clr-secondary-300);
    color: var(--clr-secondary-200);
}

/* recommeded-car-rentals-section */

.car-flag {
    top: 0;
    background-color: var(--clr-accent-green);
    z-index: 2;
    margin-block-start: var(--space-400);
    margin-inline-start: var(--space-400);
}

.current-price .perDay {
    font-size: var(--fs-300);
    color: var(--clr-neutral-grey-400);
    align-self: flex-end;
    text-transform: lowercase;
}

.car-btn {
    /* background-color: transparent !important;
  color: var(--clr-primary-400) !important; */
}
.cars-prop {
    justify-content: space-around;
    align-items: center;
    padding-block: var(--space-400);
    margin-block: var(--space-400);
    border: 1px solid;
    border-top-color: var(--clr-neutral-grey-200);
    border-left-color: transparent;
    border-bottom-color: var(--clr-neutral-grey-200);
    border-right-color: transparent;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 992px) {
    .recommend-car-rent-section .cars-prop {
        justify-content: space-evenly;
    }
}

.cars-prop > div {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    gap: var(--space-200);
}

.recommend-car-rent-section .cars-prop > div {
    flex-direction: column;
}

.cars-prop .prop-holder .prop-icon {
    color: var(--clr-primary-400);
}

.cars-prop .prop-holder .prop-info {
    font-weight: var(--fw-bold);
    font-size: var(--fs-200);
    text-transform: capitalize;
}

/* =========== vlogs-section =========== */

.play-icon {
    position: absolute;
    inset-inline-end: var(--space-400);
    top: var(--space-400);
    color: var(--clr-neutral-100);
    z-index: 100;
    cursor: pointer;
    border: 2px solid var(--clr-neutral-100);
    border-radius: var(--br-50);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    transition: var(--defualt-transition);
}

.play-icon:hover {
    border-color: var(--clr-primary-400);
    background-color: var(--clr-primary-400);
}

.vlogs .vlog-card-holder {
    display: grid;
    grid-auto-columns: 220px;
    grid-auto-rows: 339px;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.vlogs .vlog-card-holder .section-card {
    /* width: 220px; /* Card width */
    /* height: 339px; /* Card height */
    scroll-snap-align: start; /* Optional: for better snap scrolling */
}

.vlogs .vlog-holder {
    min-height: 100%;
    display: grid;
    position: relative;
    border-radius: var(--br-5);
}

.vlogs .vlogs-card-image-holder {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.vlogs .vlogs-card-image-holder img {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.vlogs .vlogs__card-info {
    position: absolute;
    inset-inline-start: var(--space-400);
    bottom: var(--space-400);
    color: var(--clr-neutral-100);
    z-index: 2;
    white-space: wrap !important;
}

.vlogs .vlogs__card-info h3 {
    font-size: var(--fs-400);
}

.vlogs .vlogs__card-info p {
    font-size: var(--fs-300);
}

/* ==========---------- landing-page ----------========== */

/* car-renting-section */

.car-renting-section .renting-cards-holder {
    margin-block-end: var(--space-900);
}

.car-renting-section .renting-card {
    cursor: pointer;
}

.single-car-renting-section .renting-card,
.car-renting-section .renting-card {
    background-color: var(--clr-neutral-grey-100) !important;
    border: 1px solid var(--clr-neutral-grey-200) !important;
}

.single-car-renting-section .renting-card,
.car-renting-section .renting-card {
    background-color: var(--clr-neutral-100);
    border-radius: var(--br-10);
    box-shadow: 0 4px 10px 0 rgba(15, 41, 77, 0.11);
    border: 2px solid var(--clr-primary-200);
    /* gap: var(--space-400); */
    padding: var(--space-400);
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-400);
}

.single-car-renting-section .renting-card > div,
.car-renting-section .renting-card > div {
    flex: 1;
}

@media (min-width: 700px) {
    .single-car-renting-section .renting-card,
    .car-renting-section .renting-card {
        grid-auto-flow: column;
    }

    .car-renting-section .renting-card {
        grid-template-columns: 1fr 2fr;
    }
}

@media (min-width: 992px) {
    .car-renting-section .renting-card {
        grid-template-columns: 1fr 3fr;
    }
}

.single-car-renting-section .renting-card .renting-thum-image-holder,
.car-renting-section .renting-card .renting-thum-image-holder {
    display: flex;
    justify-content: center;
    align-self: center;
    border-radius: var(--br-8);
    overflow: hidden;
}

.single-car-renting-section .renting-card .renting-card-info-holder,
.car-renting-section .renting-card .renting-card-info-holder {
    display: flex;
    flex-direction: column;
    padding: var(--space-400);
    gap: var(--space-400);
}
.single-car-renting-section .renting-card .renting-card-desc h3,
.car-renting-section .renting-card .renting-card-desc h3 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
}

@media (min-width: 992px) {
    .single-car-renting-section .renting-card .renting-card-desc h3,
    .car-renting-section .renting-card .renting-card-desc h3 {
        max-width: 30ch;
    }
}

.single-car-renting-section .renting-card .renting-card-desc p,
.car-renting-section .renting-card .renting-card-desc p {
    color: var(--clr-neutral-grey-600);
}

@media (min-width: 992px) {
    .single-car-renting-section .renting-card > div,
    .car-renting-section .renting-card > div {
        flex: fit-content;
    }
    .single-car-renting-section .renting-card .renting-card-info-holder,
    .car-renting-section .renting-card .renting-card-info-holder {
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        padding: 0;
    }
    .single-car-renting-section
        .renting-card
        .renting-card-info-holder
        .cars-prop,
    .car-renting-section .renting-card .renting-card-info-holder .cars-prop {
        margin-block-end: 0;
    }
}

@media (min-width: 500px) {
    .single-car-renting-section .renting-card .cars-prop > div,
    .car-renting-section .renting-card .cars-prop > div {
        flex-direction: row;
    }
}

.single-car-renting-section .renting-card .car-rent-attributes ul li,
.car-renting-section .renting-card .car-rent-attributes ul li {
    color: var(--clr-neutral-grey-400);
    font-weight: var(--fw-bold);
    font-size: var(--fs-300);
}

.single-car-renting-section .renting-card .from-word,
.car-renting-section .renting-card .from-word {
    color: var(--clr-neutral-grey-600);
    font-size: var(--fs-300);
    font-weight: var(--fw-regular);
}

.single-car-renting-section .renting-card .currency-price,
.car-renting-section .renting-card .currency-price {
    background-color: var(--clr-primary-200);
    color: var(--clr-primary-400);
    border-radius: var(--br-8);
    padding: var(--space-100);
}

.renting-btn {
    border-radius: var(--br-10) !important;
}

/* single-car-renting-section */
/* single-car-header */

@media (max-width: 768px) {
    .single-car-renting-section .single-car-header {
        flex-direction: column;
    }
}

.great-choice ul span {
    font-size: var(--fs-300);
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-grey-500);
}

.single-car__check .price-details ul > li {
    margin: 0;
    color: var(--clr-neutral-grey-500);
}

.single-car__check .current-price > * {
    padding-inline: var(--space-400);
    margin-block-end: var(--space-200);
}

/* brief-highlights-section */
.brief-highlights-section .brief-highlights-holder {
    gap: var(--space-400);
}

@media (min-width: 768px) {
    .brief-highlights-section .brief-highlights-holder {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-650);
    }
}

/* ================= main-vlog-page ================= */
.main-vlog-hero-section .hero-section__wrapper {
    align-items: center;
    gap: var(--space-400);
}

@media (min-width: 900px) {
    .main-vlog-hero-section .hero-section__wrapper {
        gap: var(--space-600);
    }
}

@media (min-width: 48em) {
    .main-vlog-hero-section .hero-section__wrapper {
        grid-auto-flow: column;
    }
}

.main-vlog-hero-section .vlog-image-holder {
    position: relative;
}

.main-vlog-hero-section .vlog-image-holder .image-shadow {
    position: absolute;
    inset-inline-end: -10px;
    bottom: -35px;
    width: 100%;
    height: 100%;
    background-color: var(--clr-primary-200);
    border-radius: var(--br-50) 0;
    z-index: -1;
}

@media (min-width: 768px) {
    .main-vlog-hero-section .vlog-image-holder .image-shadow {
        inset-inline-end: -25px;
    }
}

@media (min-width: 992px) {
    .main-vlog-hero-section .vlog-image-holder .image-shadow {
        inset-inline-end: -35px;
    }
}

.main-vlog-hero-section .vlog-image-holder img {
    border-radius: 0 var(--br-50);
    overflow: hidden;
}

.vlog-article-hero-section .hs__heading,
.main-vlog-hero-section .hs__heading {
    font-size: 2rem;
    font-size: clamp(2rem, 1.25rem + 3.7500000000000004vw, 5rem);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--clr-secondary-400);
}

.main-vlog-hero-section .hs__heading .eye-catch {
    position: relative;
    border-radius: var(--br-10);
    padding: var(--space-100);
}

.main-vlog-hero-section .hs__heading .eye-catch::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    background-color: var(--clr-primary-400);
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: var(--br-5);
    transform: skew(-20deg);
}

.main-vlog-hero-section .hs__paragraph {
    font-size: 0.9rem;
    font-size: clamp(0.9rem, 0.875rem + 0.12499999999999999vw, 1rem);
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-grey-600);
    margin-block-start: var(--space-400) !important;
    max-width: 50ch;
    line-height: 1.6;
}

/* vlogs__form-search-bar */
.main-vlog-hero-section .form-holder {
    display: grid;
    grid-template-rows: auto 55px;
    background-color: var(--clr-neutral-grey-100);
    padding: var(--space-650);
    border-radius: var(--br-10);
    gap: var(--space-400);
}

@media (min-width: 650px) {
    .main-vlog-hero-section .form-holder {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto;
    }
}

.main-vlog-hero-section .form-holder .article-search {
    position: relative;
}

.main-vlog-hero-section .form-holder .article-search::after {
    content: "\f002"; /* Unicode for the FontAwesome user icon */
    font-family: "Font Awesome 5 Free"; /* The FontAwesome font family */
    font-weight: 900; /* Some icons require specific weights like 900 for solid icons */
    position: absolute;
    inset-inline-end: var(--space-500);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
}

.main-vlog-hero-section .form-holder .article-search input[type="text"] {
    border-radius: var(--br-50);
    padding: var(--space-390) var(--space-600);
}

.main-vlog-hero-section .form-holder .categories {
    background-color: var(--clr-neutral-100);
    border-radius: var(--br-50);
    display: grid;
    padding-inline: var(--space-420);
}

.main-vlog-hero-section .form-holder .categories select {
    border: transparent;
    background-color: transparent;
}

.main-vlog-hero-section .form-holder .categories select,
.main-vlog-hero-section .form-holder .categories select option {
    cursor: pointer;
}

.main-vlog-articles .vlog-card-holder {
    grid-template-columns: repeat(auto-fit, 220px);
    justify-content: center;
    gap: var(--space-800);
}

@media (min-width: 488px) {
    .main-vlog-articles .vlog-card-holder {
        gap: var(--space-400);
    }
}

.vlog-article .article-main .article-side-group .tags,
.main-vlog-hero-section .tags {
    border: 1px solid;
    border-top-color: var(--clr-neutral-grey-100);
    border-right-color: transparent;
    border-bottom-color: var(--clr-neutral-grey-100);
    border-left-color: transparent;
}

.hotels-section-cards .tags ul li,
.vlog-article .article-main .article-side-group .tags ul li,
.main-vlog-hero-section .tags ul li {
    padding: var(--space-100) var(--space-200);
    border: 1px solid var(--clr-neutral-grey-400);
    border-radius: var(--br-5);
    cursor: pointer;
    transition: var(--defualt-transition);
}

.hotels-section-cards .tags ul li:hover,
.vlog-article .article-main .article-side-group .tags ul li:hover,
.main-vlog-hero-section .tags ul li:hover {
    background-color: var(--clr-secondary-400);
    border: 1px solid var(--clr-secondary-400);
}

.hotels-section-cards .tags ul li a,
.vlog-article .article-main .article-side-group .tags ul li a,
.main-vlog-hero-section .tags ul li a {
    color: var(--clr-secondary-400);
    font-size: var(--fs-300);
    transition: var(--defualt-transition);
}

.hotels-section-cards .tags ul li:hover a,
.vlog-article .article-main .article-side-group .tags ul li:hover a,
.main-vlog-hero-section .tags ul li:hover a {
    color: var(--clr-neutral-100);
}

.main-vlog-articles .vlog-card-holder .article-history {
    padding: var(--space-100) var(--space-200);
    border-radius: 0 0 var(--br-5) var(--br-5);
}

.main-vlog-articles .vlogs__card-info {
    bottom: var(--space-580);
}

.main-vlog-articles .vlog-holder .vlogs-card-image-holder img {
    transition: var(--defualt-transition);
}

.main-vlog-articles .vlog-holder:hover .vlogs-card-image-holder img {
    transform: scale(1.1);
}

/* ================= end-main-vlog-page ================= */

/* ================= vlog-article-section ================= */
@media (min-width: 992px) {
    .vlog-article-hero-section .hero-section__wrapper,
    .categorie-hero-section .hero-section__wrapper {
        grid-template-columns: 80%;
        justify-content: center;
    }
}

.vlog-article-hero-section .hs__heading {
    font-size: 2rem;
    font-size: clamp(2rem, 1.775rem + 1.125vw, 3.125rem);
}

/* categorie-info */
.categorie-info .categorie-mark {
    position: relative;
    padding: var(--space-400);
    border-radius: var(--br-50);
    background-color: var(--clr-primary-400);
    outline: 2px solid var(--clr-primary-400);
}

.categorie-info .categorie-mark::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--clr-neutral-100);
    padding: var(--space-200);
    border-radius: var(--br-50);
}

.categorie-info .categorie-name span {
    font-weight: var(--fw-bold);
    color: var(--clr-secondary-400);
}

.vlog-article .vlog-article-section-image {
    position: relative;
    border-radius: var(--br-15);
    overflow: hidden;
}

/* .vlog-article .vlog-article-section-image div {
  position: absolute;
  padding: var(--space-100) var(--space-400);
  color: var(--clr-neutral-100);
  border-radius: var(--br-10);
  font-weight: var(--fw-bold);
  font-size: var(--fs-300);
  z-index: 300;
}

.vlog-article .vlog-article-section-image div.green-box {
  background-color: var(--clr-accent-green);
  top: 5rem;
  inset-inline-start: 12rem;
} */

.vlog-article .section-heading {
    position: relative;
    background-color: var(--clr-neutral-100);
    padding-inline: var(--space-200);
}

.vlog-article .section-heading::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--clr-primary-400);
    border-radius: var(--br-50);
    width: 20rem;
    height: 4px;
    z-index: -1;
}

@media (min-width: 768px) {
    .vlog-article .article-main {
        grid-template-columns: 1fr 2fr;
        margin-block: 4rem;
    }
}

.vlog-article .article-main .article-side-group .tags {
    border-top-color: transparent;
    padding-bottom: 3rem;
    border-bottom-color: var(--clr-neutral-grey-400);
}

@media (min-width: 768px) {
    .vlog-article .article-main .article-side-group .tags {
        inline-size: 15.5rem;
    }
}

.vlog-article .article-main .article-side-group .tags ul > * {
    flex: 1;
}

.vlog-article .article-main .article-side-group .article-side-group-holder {
    position: sticky;
    top: var(--space-900);
}

.article-main .articles-group p {
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-grey-500);
    line-height: 1.3;
    text-align: justify;
}

.article-main .article-content-02,
.article-main .article-content-04 {
    gap: var(--space-400);
}

@media (min-width: 991px) {
    .article-main .article-content-02,
    .article-main .article-content-04 {
        grid-template-columns: repeat(6, 1fr);
    }

    .article-main .article-content-02 h3,
    .article-main .article-content-04 h3 {
        grid-column: 1 / -1;
        grid-row: span 1;
    }

    .article-main .article-content-02 .vlog-article-section-image {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }

    .article-main .article-content-04 .vlog-article-section-image {
        grid-column: 4 / -1;
        grid-row: 2 / 3;
    }

    .article-main .article-content-02 .side-paragraphs {
        grid-column: 4 / -1;
        grid-row: 2 / 3;
    }

    .article-main .article-content-04 .side-paragraphs {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }

    .article-main .article-content-04 .paragraphs-container,
    .article-main .article-content-02 .paragraphs-container {
        grid-column: 1 / -1;
        grid-row: 3 / 4;
    }
}

.related-articles {
    padding-block-start: var(--space-700);
    margin-block-end: var(--space-900);
}

/* ================= end-vlog-article-section ================= */

/* cart-section */

.cart-section .cart__check .card-price {
    align-content: flex-end;
}

.cart-section .cart__check .price-details ul > li {
    display: flex;
    justify-content: space-between;
}

.cart-section .cart__check .price-details ul > li span {
    color: var(--clr-neutral-grey-500);
}

.cart-section .cart-box {
    flex-direction: column;
}

@media (min-width: 768px) {
    .cart-section .cart-box {
        flex-direction: row;
    }
    .cart-section .cart__check {
        align-self: flex-start;
    }
}

/* carts-holder */
.carts-holder {
    grid-template-columns: 1fr;
    background-color: var(--clr-neutral-100);
    padding: var(--space-600);
    border-radius: var(--br-15);
    box-shadow: 0 15px 15px hsla(0, 0%, 0%, 0.188);
    overflow: hidden;
}

.cart-section .carts-holder header h5 {
    font-weight: var(--fw-bold);
    text-transform: capitalize;
    font-size: 0.75rem;
    font-size: clamp(0.75rem, 0.6875rem + 0.3125vw, 1rem);
    margin: 0;
}

/* single-cart */
.cart-section .carts-holder .single-cart {
    grid-template-rows: 150px;
    padding-block: var(--space-500);
    gap: var(--space-400);
}

.cart-section .carts-holder .single-cart:not(:nth-last-of-type(2)) {
    border-bottom: 1px solid var(--clr-neutral-grey-200);
}

.carts-holder .single-cart .cart-info-holder {
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "img desc"
        "quant quant"
        "action action";
    gap: var(--space-400);
}

@media (min-width: 992px) {
    .carts-holder .single-cart .cart-info-holder {
        grid-template-areas:
            "img desc"
            "img quant"
            "img action";
    }
}

.carts-holder .single-cart .cart-info-holder .cart-image-holder {
    grid-area: img;
}

.carts-holder .single-cart .cart-info-holder .cart-desc {
    grid-area: desc;
}

.carts-holder .single-cart .cart-info-holder .cart-quantity {
    grid-area: quant;
}

.carts-holder .single-cart .cart-info-holder .cart-quantity ul li {
    display: flex;
    align-items: center;
    gap: var(--space-200);
}

.carts-holder .single-cart .cart-info-holder .cart-action {
    grid-area: action;
}

.carts-holder .single-cart .cart-info-holder .cart-image-holder {
    border-radius: var(--br-10);
    overflow: hidden;
    min-width: 100px;
    max-width: 100px;
    aspect-ratio: 1 / 1;
}
.carts-holder .single-cart .cart-info-holder .cart-image-holder img {
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
}

.carts-holder .single-cart .cart-info-holder .cart-desc h5 {
    font-size: 0.87rem;
    font-size: clamp(0.87rem, 0.704rem + 0.83vw, 1.7rem);
}

.carts-holder .single-cart .cart-info-holder .cart-desc .item-type {
    font-size: var(--fs-200);
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-grey-500);
    text-transform: uppercase;
}

.carts-holder .single-cart .cart-quantity span,
.carts-holder .single-cart .cart-total-price span {
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-grey-600);
    font-size: var(--fs-200);
}

/* single-cart-media-layout */
@media (min-width: 992px) {
    .cart-box .cart__check {
        flex: 1;
    }
}

.delete-item-icon {
    background-color: var(--clr-primary-400);
    border-radius: var(--br-50);
    align-self: center;
    cursor: pointer;
    transition: background-color var(--defualt-transition);
    padding: var(--space-100) var(--space-200);
    font-size: var(--fs-300);
    align-self: center;
}

.delete-item-icon:hover {
    background-color: var(--clr-hover-700);
}

.delete-item-icon i {
    color: var(--clr-neutral-100);
}

/* cart-message-after disapearing */
/* Style for the empty cart message */
.not-found-message,
.empty-cart-message {
    text-align: center;
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    color: var(--clr-primary-400);
    margin-block-start: var(--space-500);
    background-color: var(--clr-primary-200);
    border-radius: var(--br-10);
    padding: var(--space-650);
    display: none; /* Hide by default */
}

.not-found-message {
    padding-inline: 0 !important;
    background-color: var(--clr-primary-100);
}

.not-found-message .not-found-image-holder {
    width: 300px;
    margin-inline: auto;
}

/* Fade-out animation for the .single-cart */
.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
/* add-to-cart-button */

.add-to-cart {
    display: block;
    margin-block-start: var(--space-400);
    background-color: var(--clr-neutral-100);
    border-radius: var(--br-50);
    width: fit-content;
    margin-inline: auto;
    padding: var(--space-100) var(--space-200);
    font-size: var(--fs-400);
    color: var(--clr-primary-400) !important;
    cursor: pointer;
}

/* landing-contact-us(CTA) */

.cta .cta-image-holder {
    position: relative;
}
/* 
.cta .cta-image-holder div {
  position: absolute;
  padding: 5rem;
}

.cta .cta-image-holder div img {
  border-radius: var(--br-20);
  overflow: hidden;
}

.cta .cta-image-holder div:first-of-type {
  top: 0;
}

.cta .cta-image-holder div:nth-child(2) {
  bottom: 0;
} */

.cta .form__input-box label > span {
    color: var(--clr-discount-700);
}

.cta .form__input-box input,
.cta .form__input-box textarea {
    border-radius: var(--br-5);
    padding: var(--space-200) var(--space-400);
    background-color: transparent;
    border: 1px solid var(--clr-neutral-grey-200);
    font-size: var(--fs-300); /* Font size */
    color: var(--clr-neutral-grey-500); /* Text color */
    text-transform: lowercase;
}

.cta .form__input-box textarea {
    min-height: 200px;
}

.cta .form__input-box input:focus-visible,
.cta .form__input-box textarea:focus-visible {
    outline: 1px solid transparent;
    border: 1px solid var(--clr-primary-400);
    box-shadow: none;
}

/* user-profile-main-content */

/* user-profile-dropdown */

.user-profile-dropdown {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    background-color: var(--clr-neutral-100);
    border-radius: var(--br-5);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--clr-neutral-grey-200);
    min-width: 200px;
    padding-block-start: var(--space-400) !important;
    transition: var(--defualt-transition);
    z-index: 1000;
}

.user-profile-dropdown .user-profile-dropdown__heading {
    font-size: var(--fs-400);
    text-align: center;
}

.user-profile-dropdown .user-profile-dropdown__list {
    border: 1px solid var(--clr-neutral-grey-100);
    border-right-color: transparent;
    border-left-color: transparent;
    cursor: pointer !important;
    display: grid;
}

.user-profile-dropdown .user-profile-dropdown__list i {
    color: var(--clr-primary-400);
}

.user-profile-dropdown .user-profile-dropdown__list a {
    display: flex;
    align-items: center;
    padding: var(--space-400);
    gap: var(--space-200);
    color: var(--clr-neutral-grey-500) !important;
    transition: var(--defualt-transition);
}

.user-profile-dropdown .user-profile-dropdown__list a:hover {
    background-color: var(--clr-neutral-grey-100);
}

/* sidebar-tabs */
.sidebar-tabs {
    background-color: var(--clr-primary-400);
    height: max-content;
    padding: var(--space-500) var(--space-400);
    border-radius: var(--br-5);
    text-transform: capitalize;
}

.sidebar-tabs .sidebar-tabs__link {
    display: block;
    padding: var(--space-400) var(--space-500);
    color: var(--clr-secondary-200);
    font-weight: var(--fw-semi-extra);
    border-radius: var(--br-5);
    font-size: var(--fs-500);
    transition: var(--defualt-transition);
}

.sidebar-tabs .sidebar-tabs__item.active .sidebar-tabs__link {
    background-color: var(--clr-secondary-200);
}

.sidebar-tabs .sidebar-tabs__item:hover .sidebar-tabs__link {
    background-color: var(--clr-secondary-200);
    color: var(--clr-neutral-grey-600);
}

.sidebar-tabs .sidebar-tabs__item:hover .sidebar-tabs__link,
.sidebar-tabs .sidebar-tabs__item.active .sidebar-tabs__link {
    color: var(--clr-primary-400);
}

@media (max-width: 500px) {
    .sidebar-tabs .sidebar-tabs__link {
        padding: var(--space-400);
    }
}

@media (max-width: 767px) {
    .reservations-section .row,
    .invoices-section .row,
    .user-profile-section .row {
        gap: var(--space-600);
    }
    .sidebar-tabs ul {
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
    }
}

/* user-profile-content */
.user-profile-section .header {
    grid-template-columns: 1fr 200px;
    /* justify-items: center; */
    align-items: center;
}

@media (max-width: 600px) {
    .user-profile-section .header {
        gap: var(--space-400);
    }
}

.user-profile-section .header .profile-name {
    background-color: var(--clr-primary-400);
    color: var(--clr-neutral-100);
    border-radius: 50%;
    width: 10rem;
    height: 10rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.user-profile-section .header .profile-name h2,
.user-profile-section .header .profile-name p {
    font-weight: var(--fw-bold);
}

/* end-user-profile-header */

/* user-profile-content */
.content h3 {
    margin-bottom: var(--space-420);
}

.form-group {
    margin-bottom: var(--space-400);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: var(--space-360);
    border: 1px solid var(--clr-neutral-grey-200);
    border-radius: var(--br-5);
    font-size: var(--fs-300);
}

.form-group input[disabled] {
    background-color: var(--clr-neutral-grey-100);
    cursor: not-allowed;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1;
}

@media (max-width: 579px) {
    .user-profile-section .user-box .save-button {
        justify-content: flex-start !important;
    }
}

/* invoices-section */
/* reservations-section */

.reservations-section .reservations-box-holder,
.invoices-section .invoice-box-holder {
    flex-direction: column;
}

.reservations-section .reservations-box-holder > *,
.invoices-section .invoice-box-holder > * {
    flex: 1;
}

.reservations-section .reservation-box,
.invoices-section .invoice-box {
    border: 2px solid var(--clr-neutral-grey-200);
    border-radius: var(--br-20);
    padding: var(--space-400);
    cursor: pointer;
    transition: var(--defualt-transition);
}

.reservations-section .reservation-box:hover,
.invoices-section .invoice-box:hover {
    transform: translateY(-5px);
    /* border: 2px dashed var(--clr-primary-400); */
    background-color: rgb(255 235 255);
}

.reservations-section .reservation-box h4,
.invoices-section .invoice-box h4,
.reservations-section .reservation-box h5,
.invoices-section .invoice-box h5 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-400);
}

.reservations-section .reservation-box span,
.invoices-section .invoice-box span,
.reservations-section .reservation-box ul li,
.invoices-section .invoice-box ul li {
    color: var(--clr-neutral-grey-500);
}

/* single-reservation-section */
/* reservation-info */
/* reservation-info-header */
.single-reservation-section .reservation-holder {
    align-items: flex-start;
}

.single-reservation-section .reservation-info,
.single-reservation-section .reservation-payment-details {
    background-color: var(--clr-secondary-200);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    border-radius: var(--br-8);
    padding: var(--space-600) var(--space-400) !important;
}

.single-reservation-section .reservation-info-header {
    border-bottom: 1px solid var(--clr-neutral-grey-200);
    padding-block: var(--space-400);
    gap: var(--space-360);
}

.single-reservation-section .reservation-info-header .header-side {
    flex-wrap: wrap;
}

.single-reservation-section .reservation-info-header .header-side .item-price,
.single-reservation-section .reservation-info-header .header-side .item-state,
.single-reservation-section
    .reservation-info-header
    .header-side
    .reservation-invoice {
    color: #fff;
    font-weight: var(--fw-bold);
    padding: var(--space-100) var(--space-200);
    border-radius: var(--br-5);
}

.single-reservation-section .reservation-info-header .header-side .item-price {
    background-color: var(--clr-accent-green);
}

.single-reservation-section .reservation-info-header .header-side .item-state {
    background-color: var(--clr-button-hover);
}

.single-reservation-section
    .reservation-info-header
    .header-side
    .reservation-invoice {
    background-color: var(--clr-secondary-300);
    cursor: pointer;
    transition: var(--defualt-transition);
}

.single-reservation-section
    .reservation-info-header
    .header-side
    .reservation-invoice:hover {
    background-color: hsla(218.7, 46.4%, 19%, 0.84);
}

.single-reservation-section .tour-data .group-data {
    text-transform: capitalize;
}

.single-reservation-section .tour-data .group-data ul li {
    display: flex;
    align-items: center;
    gap: var(--space-200);
}
.single-reservation-section .tour-data .group-data h6 {
    margin: 0;
    font-weight: var(--fw-bold);
}

.single-reservation-section .tour-data .group-data ul li span {
    color: var(--clr-neutral-grey-500);
    font-weight: var(--fw-bold);
}

.single-reservation-section .tour-data .inputs-group-data {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--space-400);
}

.single-reservation-section
    .tour-data
    .inputs-group-data
    .form-group:nth-child(5),
.single-reservation-section
    .tour-data
    .inputs-group-data
    .form-group:last-child {
    grid-column: 1 / -1;
    display: grid;
}

.single-reservation-section .tour-data .inputs-group-data .form-group textarea {
    min-height: 100px;
    background-color: var(--clr-neutral-grey-100);
    border: 1px solid var(--clr-neutral-grey-200);
    border-radius: var(--br-5);
    padding: var(--space-400);
}

/* reservation-payment-details */
/* reservation-payment-details-header */
.reservation-payment-details .reservation-payment-header {
    border-bottom: 1px solid var(--clr-neutral-grey-200);
}

/* reservation-payment-details-info */
.reservation-payment-details .reservation-payment-info {
    padding: var(--space-400);
    border-bottom: 1px solid var(--clr-neutral-grey-200);
}

.reservation-payment-details .reservation-payment-info ul li {
    display: flex;
    justify-content: space-between;
    font-weight: var(--fw-bold);
}

.reservation-payment-details .reservation-payment-info ul li span:first-child {
    color: var(--clr-neutral-grey-500);
}

.reservation-payment-details
    .reservation-payment-info
    ul
    li:last-of-type
    span:last-child {
    color: var(--clr-discount-700);
}

.reservation-payment-details .reservation-payment-footer {
    font-weight: var(--fw-bold);
    padding: var(--space-400);
}

/* categorie-section */
.categorie-hero-section .categories select {
    padding: var(--space-200);
}

.categorie-articles .categorie-holder {
    grid-template-columns: 1fr;
    gap: var(--space-400);
}

@media (min-width: 768px) {
    .categorie-articles .categorie-holder {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 991px) {
    .categorie-articles .categorie-holder {
        grid-template-columns: repeat(3, 1fr);
    }
}

.categorie-articles .categorie-holder .categorie-card {
    border-radius: var(--br-10);
    cursor: pointer;
    overflow: hidden;
}

.categorie-articles .categorie-card .categorie-image-holder {
    overflow: hidden;
}

.categorie-articles .categorie-card .categorie-image-holder img {
    transition: var(--defualt-transition);
}

.categorie-articles
    .categorie-holder
    .categorie-card:hover
    .categorie-image-holder
    img {
    scale: var(--card-img-scale);
}

.categorie-articles
    .categorie-holder
    .categorie-card
    .categorie-card-info-holder {
    background-color: var(--clr-secondary-200);
    padding: var(--space-400);
}

/* about-us-section */

.about-us__hs {
    background: url("/assets/imgs/op-bg-01.jpg") no-repeat;
    background-size: cover;
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    position: relative;
    color: var(--clr-neutral-100);
}

.about-us__hs h1 {
    font-size: 2.5rem;
    font-size: clamp(2.5rem, 2.3rem + 1vw, 3.5rem);
    margin-bottom: 0;
    font-weight: var(--fw-extra-bold);
    display: grid;
    align-items: center;
    grid-auto-flow: column;
}

/* Chat Support Styles */
.chat-support {
    position: fixed;
    bottom: 175px;
    inset-inline-end: 10px;
    /* bottom: 30px;
  inset-inline-end: 100px; */
    z-index: 1000;
}

@media (min-width: 435px) {
    .chat-support {
        bottom: 50px;
        inset-inline-end: 90px;
    }
}

/* Chat Box */
.chat-box {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 330px;
    height: 480px;
    background: var(--clr-neutral-100);
    border-radius: var(--br-10);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: none !important;
}

/* Chat Header */
.chat-header {
    padding: var(--space-390);
    color: var(--clr-neutral-100);
    text-align: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-500);
}

/* Chat Talk */
.chat-talk {
    padding: var(--space-390);
    background: var(--clr-secondary-200);
    /* max-height: 100%; */
    overflow-y: auto;
}

.chat-talk .return-box-holder,
.chat-talk .respond-box-holder {
    display: grid;
    grid-auto-flow: column;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: var(--space-362);
    gap: var(--space-200);
}

.chat-talk .return-box-holder {
    justify-content: flex-start;
}

.chat-talk .return-box-holder .box-content,
.chat-talk .respond-box-holder .box-content {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: var(--space-100);
}

.chat-talk .return-box-holder .box-content {
    flex: 1;
    align-items: start;
}

.chat-talk .avatar {
    background-color: var(--clr-neutral-grey-200);
    width: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    flex: 1;
}

.chat-talk .return-box-holder .box-content .box-content-header,
.chat-talk .respond-box-holder .box-content .box-content-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-200);
}

.chat-talk .respond-box-holder .box-content .box-content-main {
    /* width: min-content; */
}

.chat-talk .return-box-holder .box-content .box-content-header .box-name,
.chat-talk .return-box-holder .box-content .box-content-header .box-time,
.chat-talk .respond-box-holder .box-content .box-content-header .box-name,
.chat-talk .respond-box-holder .box-content .box-content-header .box-time {
    font-weight: var(--fw-bold);
}

.chat-talk .return-box-holder .box-content .box-content-header .box-time,
.chat-talk .respond-box-holder .box-content .box-content-header .box-time {
    font-size: var(--fs-200);
    color: var(--clr-neutral-grey-500);
}

.chat-talk .user-return,
.chat-talk .user-respond {
    padding: var(--space-362) var(--space-390);
    border-radius: var(--space-390);
    /* max-width: 80%; */
    font-size: var(--fs-300);
    font-weight: var(--fw-regular);
    font-weight: var(--fw-semi-bold);
    /* word-break: break-word; */
}

.user-return {
    background-color: var(--clr-neutral-100);
    color: var(--clr-neutral-900);
    align-self: flex-start;
}

.user-respond {
    background-color: var(--clr-primary-400);
    color: var(--clr-neutral-100);
    /* align-self: flex-end; */
}

/* Chat Footer */
.chat-footer {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr auto;
    align-items: center;
    padding: var(--space-362);
    background: var(--clr-neutral-grey-100);
    border-top: 1px solid var(--clr-neutral-grey-100);
}

.chat-footer .text-input input {
    flex-basis: 100%;
    padding: 10px;
    border: 1px solid var(--clr-neutral-grey-200);
    border-radius: 5px;
    outline: none;
}

.chat-footer .chat-send-button {
    margin-left: var(--space-362);
    cursor: pointer;
}

.chat-footer .chat-send-button img {
    width: 24px;
    height: auto;
}

/* the chat-support-button- up with scroll to top button */

/* 
/* chat-support *

.chat-support {
  position: fixed;
  bottom: 30px;
  inset-inline-end: 150px;
  z-index: 100;
  display: block;
}

/* chat-support-box *
.chat-support .chat-box {
  --custom-height: 20rem; /* 40rem *
  inline-size: 22.5rem;
  min-height: var(--custom-height);
  grid-template-rows: auto 1fr auto;
}

/* chat-support-header *
.chat-support .chat-box .chat-header {
  padding-block: var(--space-362);
  border-radius: var(--br-5) var(--br-5) 0 0; /* 15 stands for design *
}

/* chat-support-talk *
.chat-support .chat-box .chat-talk {
  padding: var(--space-400) var(--space-580);
}

.chat-support .chat-box .chat-talk .user-return,
.chat-support .chat-box .chat-talk .user-respond {
  width: fit-content;
  background-color: var(--clr-neutral-100);
  padding: var(--space-200) var(--space-400);
  border-radius: var(--br-15);
  color: var(--clr-neutral-900);
  font-size: var(--fs-300);
  align-self: flex-end;
}

.chat-support .chat-box .chat-talk .user-return {
  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-100);
  align-self: flex-start;
}

/* chat-support-footer *
.chat-support .chat-box .chat-footer {
  border-top: 1px solid var(--clr-neutral-grey-200);
  border-radius: 0 0 var(--br-5) var(--br-5);
  /* padding: var(--space-362); */

/* box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); show it when click on input *
}

.chat-support .chat-box .chat-footer .text-input input {
  all: unset;
  padding: var(--space-362);
}

/* chat-footer-send-button *
.chat-support .chat-box .chat-footer .chat-send-button {
  inline-size: 20px;
  aspect-ratio: 16/9;
  color: var(--clr-primary-400);
}

.chat-support .chat-box .chat-footer .chat-send-button img {
  /* mix-blend-mode: multiply; *
  color: var(--clr-primary-400);
}

/* chat-support-main-button *
.chat-support-button {
  position: fixed;
  bottom: 120px;
  inset-inline-end: 33px;
  z-index: 100;
  cursor: pointer;
} */

/* end-chat-support */

/* moving-car-styling */
/* css for class 'hero' */
.hero {
    height: 500px;
    width: 100%;
    background-image: url("/assets/imgs/moving-car/sky.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden; /* Ensure nothing escapes the viewport */
}

.highway {
    height: 200px;
    width: 100%; /* Match the viewport width */
    background-image: url("/assets/imgs/moving-car/road.jpg");
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    background-repeat: repeat-x;
    z-index: 1;
    animation: highway 5s linear infinite;
}

@keyframes highway {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 100%; /* Scrolls to the right to simulate forward motion */
    }
}

.city {
    height: 250px;
    width: 100%; /* Match the viewport width */
    background-image: url("/assets/imgs/moving-car/city.png");
    position: absolute;
    bottom: 200px;
    inset-inline-start: 0;
    background-repeat: repeat-x;
    z-index: 0; /* Ensure it's behind the highway */
    animation: city 20s linear infinite;
}

@keyframes city {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 100%; /* Scrolls to the right to simulate forward motion */
    }
}

.car {
    width: 400px;
    inset-inline-start: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    position: absolute;
    z-index: 2;
}

.car img {
    width: 100%;
    animation: car 1s linear infinite;
}

@keyframes car {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(2px);
    }
}
.wheel {
    position: absolute;
    inset-inline-start: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    width: 100px;
    height: 77px;
    z-index: 3; /* Ensure it appears above background elements */
}

.wheel img {
    width: 72px;
    height: 72px;
    animation: wheel 1s linear infinite;
    position: absolute;
}

.back-wheel {
    inset-inline-start: -115px; /* Adjust to match the back wheel position */
}

.front-wheel {
    inset-inline-start: 130px; /* Adjust to match the front wheel position */
}

@keyframes wheel {
    100% {
        transform: rotate(-360deg); /* Negative rotation for forward motion */
    }
}

/* swiper-styles */

/* .swiper {
  width: 600px;
  height: 300px;
} */

.single-tour .swiper {
    overflow: visible;
}

/* Ensure the swiper container allows overflow */
.swiper-container {
    width: 100%;
    overflow: hidden;
}

.related-articles .swiper-wrapper .swiper-slide {
    /* width: 220px !important;
  height: 339px; */
    /* width: 220px !important; */
    /* height: auto;
  aspect-ratio: 220 / 339; /* Ensures the slide maintains a 220:339 aspect ratio 
  flex-shrink: 0;
  overflow: hidden; Prevent content overflow */
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    /* transform: translateY(-50%); */
    z-index: 10;
    background-color: var(--clr-primary-400);
    color: var(--clr-neutral-100);
    border-radius: var(--br-50);
    padding: var(--space-400);
    width: 30px;
    height: 30px;
    opacity: 1; /* Ensure it’s visible */
    visibility: visible; /* Ensure it’s not hidden */
    transition: var(--defualt-transition);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: var(--clr-secondary-200);
    color: var(--clr-primary-400);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-family: "Font Awesome 6 Free"; /* Ensure the font is defined */
    content: ""; /* Icon code for next/prev */
    font-size: var(--fs-400);
    font-weight: var(--fw-extra-bold);
}

.swiper-button-next::after {
    content: "\f054"; /* Font Awesome Unicode for 'arrow-right' */
}

.swiper-button-prev::after {
    content: "\f053"; /* Font Awesome Unicode for 'arrow-left' */
}

@media (min-width: 1200px) {
    .swiper-button-prev {
        inset-inline-start: -10px;
    }
    .swiper-button-next {
        inset-inline-end: -10px;
    }

    .single-tour .swiper-button-prev {
        inset-inline-start: -40px;
    }
    .single-tour .swiper-button-next {
        inset-inline-end: -40px;
    }
}

.offer-section .swiper-slide {
    max-width: 380px;
}

.landing-attractions-section .swiper-slide {
    width: auto; /* Allow width to adjust based on content */
    /* max-width: 300px; Optional: Set a max width if you don't want cards to get too wide */
    height: auto !important;
    cursor: pointer;
}

.vlogs .swiper-slide {
    cursor: pointer;
}

/* aos-css-custom */

/* recently-viewed */
.hotels-section-cards .section-cards {
    grid-template-columns: repeat(auto-fit, minmax(15rem, max-content));
}

.recently-viewed .section-card {
    margin-block-end: var(--space-400);
    /* max-width: 280px; */
}

.recently-viewed .section-card:hover .card-hold {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}

.recently-viewed .section-card .card-image-holder {
    min-height: 105px;
    max-height: 105px;
}

/* hotels-section */
/* hotels__hero-section */
.hotels__hero-section {
    position: relative;
    min-height: 200px;
    background-color: var(--clr-primary-400);
}

.hotels__hero-section .hs__heading {
    width: fit-content;
    padding-top: var(--space-400);
    padding-left: var(--space-420);
}

.hotels__hero-section .hs__heading::after {
    background-color: var(--clr-accent-yellow) !important;
}

.hotels__hero-section .trip-search-box {
    top: 50% !important;
    bottom: inherit;
    transform: translate(-50%);
}

.hotels__hero-section .trip-search-box-form-holder {
    grid-template-areas: "first" "second" "third" "last";
    gap: var(--space-500);
}

.hotels__hero-section .trip-search-box-form-holder .first-input-holder {
    grid-area: first;
}
.hotels__hero-section .trip-search-box-form-holder .second-input-holder {
    grid-area: second;
}
.hotels__hero-section .trip-search-box-form-holder .third-input-holder {
    grid-area: third;
}
.hotels__hero-section .trip-search-box-form-holder .slct-tours-input {
    grid-area: last;
}

@media (min-width: 768px) {
    .hotels__hero-section .trip-search-box-form-holder {
        /* grid-template-areas: "first second" "third last"; */
    }
}

@media (min-width: 1200px) {
    .hotels__hero-section .trip-search-box-form-holder {
        grid-template-areas: "first last";
    }
}

.hotels__hero-section .trip-search-box-form-holder .first-input-holder,
.hotels__hero-section .trip-search-box-form-holder .second-input-holder,
.hotels__hero-section .trip-search-box-form-holder .third-input-holder,
.hotels__hero-section .trip-search-box-form-holder .slct-tours-input {
    position: relative;
}

.hotels__hero-section .trip-search-box-form-holder .second-input-holder::before,
.hotels__hero-section .trip-search-box-form-holder .third-input-holder::before,
.hotels__hero-section .trip-search-box-form-holder .slct-tours-input::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: -13px;
    transform: translateY(-50%);
    border-left: 1px solid var(--clr-neutral-grey-200);
    height: 80px;
}

.hotels__hero-section .select-input input {
    padding-inline-start: var(--space-650);
}

.recently-viewed-holder,
.hotels-section-cards-holder {
    border: 1px solid var(--clr-neutral-grey-200);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
    .recently-viewed {
        padding-block-start: var(--space-800) !important;
    }
}

.hotels-section-cards .section-cards {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.hotels-section-cards .section-card .card-hold {
    border: 1px solid var(--clr-neutral-grey-400);
}

.hotels-section-cards .card-image-holder {
    overflow: hidden;
}

.hotels-section-cards .card-hold {
    border-radius: var(--br-5);
}

.hotels-section-cards .section-card:hover .card-hold {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    transform: translateY(-10px);
}

.hotels-section-cards .section-card .card-hold .card-image-holder > img {
    /* filter: brightness(0.9); Increases brightness */
}

.hotels-section-cards .section-card:hover .card-hold .card-image-holder > img {
    scale: none;
    filter: brightness(1.1); /* Increases brightness */
}

.hotels-section-cards .section-card .card-image-holder {
    position: relative;
    min-height: 185px;
    max-height: 185px;
}

.memo-stamp {
    position: absolute;
    inset-block-end: var(--space-200);
    inset-inline-end: var(--space-200);
    width: min-content;
    background-color: var(--clr-accent-yellow);
    z-index: 10;
    border-radius: var(--br-50) var(--br-50) var(--br-8) var(--br-8);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-100);
    border: 1px solid var(--clr-neutral-100);
}

.hotels-section-cards .section-card .card-info {
    align-content: space-evenly; /* in case siblings content change */
    padding: var(--space-400);
    gap: var(--space-362);
}

.hotels-section-cards .card-info::before {
    all: unset;
}

.recently-viewed .hotel-rating {
    width: fit-content;
    border-radius: var(--br-8) 0 var(--br-8) var(--br-8);
}

.hotel-rating {
    border-radius: var(--br-8) var(--br-8) var(--br-8) 0;
}

.hotels-section-cards .current-price .from-word {
    color: var(--clr-neutral-grey-500);
    font-weight: var(--fw-regular);
    font-size: var(--fs-300);
}

.hotels-section-cards .current-price .currency-price {
    color: var(--clr-secondary-400) !important;
    font-size: var(--fs-600) !important;
}

.single-hotel-price .cycle-check header .single-hotel-image-holder {
    max-width: 300px;
    margin-inline: auto;
}
.single-hotel-price .cycle-check header .single-hotel-image-holder img {
    transition: opacity var(--defualt-transition);
    /* cursor: pointer; */
}

.single-hotel-price .cycle-check header .single-hotel-image-holder:hover img {
    opacity: 0.9;
}

@media (min-width: 650px) {
    .single-hotel-price .cycle-check header {
        grid-template-columns: 200px 1fr;
    }
}

.single-hotel-price .cycle-check button {
    border-radius: var(--br-5);
}

.single-hotel-price .cycle-check .single-hotel-info-holder {
    width: fit-content;
}

/* ============================ modifictaion ============================ */
.contact-us ul {
    position: relative;
}

.contact-us ul::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: url("/assets/imgs/dec-arrow.png") no-repeat;
}

.contact-us ul li {
    font-size: 1rem;
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.3rem);
    font-weight: var(--fw-bold); /* Semi-bold text */
    color: var(
        --clr-neutral-grey-500
    ); /* Dark gray color for better readability */
    line-height: 1.1; /* Improve spacing between lines */
    text-align: start;
    font-style: italic; /* Optional: make highlighted words italic */
}

.contact-us ul li::first-letter {
    text-transform: capitalize;
}

.contact-us ul li:nth-of-type(2) {
    margin-inline-start: var(--space-400);
}

.contact-us ul li:last-of-type {
    margin-inline-start: var(--space-600);
}

.contact-us ul li span {
    color: var(
        --clr-primary-400
    ); /* Highlight specific words in a different color */
    font-style: italic; /* Optional: make highlighted words italic */
    font-weight: var(--fw-extra-bold) !important;
}

/* landing-tabs-style */
/* Style the tab content */

.nav-tabs {
    border: none;
}

.nav-tabs .nav-link {
    border: transparent !important;
    margin: 0;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: transparent !important;
    border: none;
}

.fade:not(.show) {
    display: none !important;
}

/* single-invoice-section */

.invoice-informations header {
    display: flex;
    flex-direction: column;
    border-radius: var(--br-8) var(--br-8) 0 0;
    gap: var(--space-400);
}

@media (min-width: 768px) {
    .invoice-informations header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-500);
    }
}

.invoice-informations header .image-holder {
    max-width: 20rem;
}

.invoice-informations header ul {
    color: var(--clr-neutral-grey-500);
    font-size: var(--fs-300);
    font-weight: var(--fw-bold);
    --flow-spacer: var(--space-200);
    max-width: 45rem;
}

.invoice-informations .invoice-informations-content {
    border: 1px solid var(--clr-neutral-grey-200);
}

.invoice-informations .invoice-informations-content .invoice-number {
    border-bottom: 1px solid var(--clr-neutral-grey-200);
    padding: var(--space-400);
}

.invoice-informations
    .invoice-informations-content
    .even-columns
    div:nth-child(2) {
    border-top: 1px solid var(--clr-neutral-grey-200);
    border-right: transparent;
    border-bottom: 1px solid var(--clr-neutral-grey-200);
    border-left: transparent;
}

@media (min-width: 768px) {
    .invoice-informations
        .invoice-informations-content
        .even-columns
        div:nth-child(n + 2) {
        border-left: 1px solid var(--clr-neutral-grey-200);
        border-top: transparent;
        border-right: transparent;
        border-bottom: transparent;
    }
}

.invoice-informations .invoice-informations-content .even-columns div {
    display: flex;
    flex-wrap: wrap;
}

.invoice-informations .invoice-informations-content .even-columns ul {
    padding: var(--space-400);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-200);
    text-transform: capitalize;
    font-size: var(--fs-300);
    color: var(--clr-neutral-grey-500);
    font-weight: var(--fw-semi-bold);
}

/* invoice-informations-footer */

.invoice-informations .invoice-informations-footer {
    width: 100%;
    overflow-x: auto;
}

.invoice-informations .invoice-informations-footer table {
    width: 100%;
    white-space: nowrap;
    border: 1px solid var(--clr-neutral-grey-400);
}

.invoice-informations .invoice-informations-footer table caption {
    caption-side: top;
}

.invoice-informations .invoice-informations-footer table th,
.invoice-informations .invoice-informations-footer table td {
    border: 1px solid var(--clr-neutral-grey-200);
    padding: var(--space-400);
}

.invoice-informations .invoice-informations-footer table thead th {
    text-transform: capitalize;
}

.invoice-informations
    .invoice-informations-footer
    table
    thead
    th:not(:first-child) {
    text-align: center;
}

.invoice-informations .invoice-informations-footer table td {
    font-weight: var(--fw-bold);
    font-size: var(--fs-200);
    text-align: center;
}

.invoice-informations .invoice-informations-footer table .item-details {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-inline-start: var(--space-200);
    gap: var(--space-100);
}

.invoice-informations .invoice-informations-footer table .item-discount {
    color: var(--clr-discount-700);
}

.invoice-informations .invoice-informations-footer table .table-button {
    border-radius: var(--br-5);
}

/* utility-classes */

.grid-columns {
    grid-auto-flow: column;
}

@media (min-width: 768px) {
    .grid-xs-columns {
        grid-auto-flow: column;
    }
}

.basis-50 {
    flex-basis: 50%;
}

.basis-70 {
    flex-basis: 70%;
}

.line-24 {
    line-height: var(--space-500) !important;
}

.line-30 {
    line-height: var(--space-580);
}

/* special-edit */

@media (max-width: 508px) {
    .max-xs-15 {
        max-width: 15ch;
    }
}
@media (max-width: 390px) {
    .fs-xxs-14 {
        font-size: var(--fs-300);
    }
}

@media (max-width: 460px) {
    .max-xs-25 {
        max-width: 25ch;
    }
    .fs-xs-14 {
        font-size: var(--fs-300);
    }
    .fs-xs-24 {
        font-size: var(--fs-700);
    }
}

.max-50 {
    max-width: 50px;
}

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

.over-hidden {
    overflow: hidden;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.z-index-negative-1 {
    z-index: -1;
}

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

.auto-column {
    grid-auto-flow: column;
}

.equal-columns {
    grid-template-columns: 1fr 1fr;
}

.fr-1 {
    grid-template-columns: 1fr;
}

.place-center {
    place-items: center;
}

.self-center {
    align-self: center;
}
.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

@media (min-width: 500px) {
    .self-sm-end {
        align-self: flex-end;
    }
}

.self-stretch {
    align-self: stretch;
}

.text-nowrap {
    text-wrap: nowrap;
}

.pointer {
    cursor: pointer;
}

.justify-start {
    justify-content: flex-start;
}

.justify-self-end {
    justify-self: flex-end;
}

.flex-center {
    display: flex;
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .flex-md-center {
        display: flex;
        align-items: center;
    }
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-auto {
    flex: auto;
}

.text-cap {
    text-transform: capitalize;
}

.text-upper {
    text-transform: uppercase;
}

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

.justify-start {
    justify-content: flex-start;
}

.p-block-3 {
    padding-block: 3rem;
}

.p-block-4 {
    padding-block: 4rem;
}

.p-block-5 {
    padding-block: 5rem;
}

.m-block-2 {
    margin-block: 2rem;
}

.m-block-3 {
    margin-block: 3rem;
}

.m-block-end-7 {
    margin-block-end: 7rem;
}

.text-underline-hover:hover {
    text-decoration: underline !important;
}

.line-through {
    text-decoration: line-through;
}

.decoration-none {
    text-decoration: none !important;
}

.bg-transparent {
    background-color: transparent;
}

.bg-clr-neutral-100 {
    background-color: var(--clr-neutral-100);
}

.bg-clr-neutral-900 {
    background-color: var(--clr-neutral-900);
}

.bg-clr-primary-100 {
    background-color: var(--clr-primary-100);
}

.bg-clr-primary-200 {
    background-color: var(--clr-primary-200);
}

.bg-clr-primary-400 {
    background-color: var(--clr-primary-400);
}

.bg-clr-grey-100 {
    background-color: var(--clr-neutral-grey-100);
}

.bg-clr-grey-200 {
    background-color: var(--clr-neutral-grey-200);
}

.bg-clr-grey-300 {
    background-color: var(--clr-neutral-grey-300);
}

.bg-clr-grey-400 {
    background-color: var(--clr-neutral-grey-400);
}

.bg-clr-grey-500 {
    background-color: var(--clr-neutral-grey-500);
}

.bg-clr-grey-600 {
    background-color: var(--clr-neutral-grey-600);
}

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

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

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

.bg-clr-brown {
    background-color: var(--clr-brown);
}

.bg-clr-red {
    background-color: var(--clr-hover-700);
}

.clr-primary-400 {
    color: var(--clr-primary-400);
}

.clr-secondary-400 {
    color: var(--clr-secondary-400);
}

.clr-grey-400 {
    color: var(--clr-neutral-grey-400);
}

.clr-grey-500 {
    color: var(--clr-neutral-grey-500);
}

.clr-grey-600 {
    color: var(--clr-neutral-grey-600);
}

.clr-white {
    color: var(--clr-neutral-100);
}

.clr-green {
    color: var(--clr-accent-green);
}

.clr-red {
    color: var(--clr-hover-700);
}

.clr-yellow {
    color: var(--clr-accent-yellow);
}

.clr-black {
    color: var(--clr-neutral-900) !important;
}

.fw-regular {
    font-weight: var(--fw-regular);
}

.fw-bold {
    font-weight: var(--fw-bold);
}

.fw-semi-bold {
    font-weight: var(--fw-semi-bold);
}

.fw-semi-extra {
    font-weight: var(--fw-semi-extra) !important;
}

.fw-extra-bold {
    font-weight: var(--fw-extra-bold);
}

.fs-8 {
    font-size: var(--fs-100);
}

.fs-12 {
    font-size: var(--fs-200);
}

.fs-14 {
    font-size: var(--fs-300);
}

.fs-16 {
    font-size: var(--fs-400);
}

.fs-18 {
    font-size: var(--fs-500);
}

.fs-20 {
    font-size: var(--fs-600) !important;
}

.fs-40 {
    font-size: var(--fs-800) !important;
}

.card-icon {
    color: var(--clr-primary-400);
}
/* orders-classes */

.o-1 {
    order: 1;
}
.o-2 {
    order: 2;
}
.o-3 {
    order: 3;
}
.o-4 {
    order: 4;
}
.o-5 {
    order: 5;
}

.br-5 {
    border-radius: var(--br-5);
}

.br-8 {
    border-radius: var(--br-8);
}

.br-10 {
    border-radius: var(--br-10);
}

.unset {
    all: unset !important;
}

/* own-framwork */

.overlay {
    position: absolute;
    inset: 0;
    background-color: hsla(0, 0%, 0%, 0.2);
}

.single-hotel-charge-button,
.button-custom {
    background-color: var(--clr-primary-400);
    color: #fff;
    border: transparent;
    border-radius: var(--br-65);
    padding: var(--space-200) var(--space-400);
    font-size: var(--fs-button);
    font-weight: var(--fw-bold);
    text-transform: capitalize;
    transition: var(--defualt-transition);
}

.button-custom:hover {
    background-color: var(--clr-button-hover);
}

.underline-hvr:hover {
    text-decoration: underline !important;
}

.p {
    font-size: var(--fs-300);
    line-height: var(--space-420);
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-grey-500);
}

@media (max-width: 767px) {
    .d-none-xs {
        display: none;
    }
    .d-flex-column-xs {
        display: flex !important;
        flex-direction: column;
    }
    .gap-xs-0 {
        gap: 0;
    }
}

@media (max-width: 579px) {
    .column-xxs {
        flex-direction: column;
    }
}

@media (min-width: 500px) {
    .column-xs {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .column-sm {
        column-count: 2;
    }
}

.column {
    column-count: 2;
}

.img {
    min-width: 100%;
    object-fit: cover;
}

.img-custom {
    inline-size: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
}

@media (max-width: 991px) {
    .gap-sm-3 {
        gap: 3rem;
    }
}