@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);
  }

  .property-section .container-custom,
  .list-register-section .container-custom,
  .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,
.property-container {
  display: grid;
  gap: 1rem;
}

.property-container,
.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;
}

/* 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"
      / 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 auto;
    grid-template-areas: "logo 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 */
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);
}

@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--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) {
  .navbar .navbar-nav {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .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: 300px;
  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: 610px; /* 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"); /* Update the path */
}

.country-select .country-list {
  min-width: 355px;
  max-width: 355px;
}
/* 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;
}

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

/* ======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: 2.25rem;
  font-size: clamp(2.25rem, 2.2rem + 0.25vw, 2.5rem); */
  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 > 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;
    justify-content: space-between;
    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;
  flex-direction: column; /* the new code */
}
/*
.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 */

.selecting-room .single-room__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,
.selecting-room .selecting-room-holder,
.house-rules .house-rules-holder {
  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);
}

/* map-itinerary */

.map-itinerary ul {
  border-bottom: 1px solid var(--clr-neutral-grey-200);
  text-transform: capitalize;
}

.map-itinerary ul .mid-point {
  position: relative;
  padding-block: var(--space-400);
  display: flex;
  gap: var(--space-400);
  align-items: center;
}

.map-itinerary ul .mid-point .shape-holder .shape {
  position: relative;
  display: block;
  width: 25px;
  aspect-ratio: 1 / 1;
  border-radius: var(--br-50);
  background-color: var(--clr-secondary-300);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.map-itinerary ul .mid-point .shape-holder .shape i {
  color: var(--clr-neutral-100);
  font-size: var(--fs-200);
}

.map-itinerary ul .mid-point .shape-holder {
  position: relative;
}

.map-itinerary ul .mid-point:not(:last-child) .shape-holder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 5rem;
  background-color: var(--clr-primary-400);
  z-index: 1;
}

.map-itinerary ul .mid-point:first-child .shape-holder .shape,
.map-itinerary ul .mid-point:last-child .shape-holder .shape {
  background-color: var(--clr-primary-400);
  border: 1px solid var(--clr-neutral-100);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.map-itinerary ul .mid-point .info-holder {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

/* .map-itinerary ul .mid-point::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -11%;
  width: 15px;
  height: 80px;
  background-color: var(--clr-primary-400);
  z-index: 1;
}

.map-itinerary ul .mid-point:last-child::after {
  all: unset;
} */

.map-itinerary ul .mid-point .main-info,
.map-itinerary ul .mid-point .sub-info {
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  color: var(--clr-secondary-300);
  margin-bottom: 0;
}

.map-itinerary ul .mid-point .sub-info {
  font-size: var(--fs-300);
}

/* 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: nowrap; */
  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);
}

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

@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: 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;
} */

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

.list-properties-main .section-heading::before,
.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 {
  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);
  }
}

.review .review-card .traveler-account-image-holder .traveler-account-image,
.user-profile-section .header .profile-name {
  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-100);
  border-radius: 50%;
  width: 10rem;
  aspect-ratio: 1 / 1;
  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: var(--fs-900);
  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 second third 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);*/
}

.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: left; /* Center-align the heading */
  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 */

.selecting-room-cards-holder .slct-room-card .room-table-holder,
.invoice-informations .invoice-informations-footer {
  width: 100%;
  overflow-x: auto;
}

.selecting-room-cards-holder .slct-room-card table,
.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;
}

.selecting-room-cards-holder .slct-room-card table th,
.selecting-room-cards-holder .slct-room-card table td,
.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);
}

.selecting-room-cards-holder .slct-room-card table thead th,
.invoice-informations .invoice-informations-footer table thead th {
  text-transform: capitalize;
}

.selecting-room-cards-holder .slct-room-card table thead th:not(:first-child),
.invoice-informations
  .invoice-informations-footer
  table
  thead
  th:not(:first-child) {
  text-align: center;
}

.selecting-room-cards-holder .slct-room-card table td,
.invoice-informations .invoice-informations-footer table td {
  font-weight: var(--fw-bold);
  font-size: var(--fs-200);
  text-align: center;
}

.selecting-room-cards-holder .slct-room-card table .item-details,
.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);
}

.selecting-room-cards-holder .slct-room-card table .item-discount,
.invoice-informations .invoice-informations-footer table .item-discount {
  color: var(--clr-discount-700);
}

.selecting-room-cards-holder .slct-room-card table .table-button,
.invoice-informations .invoice-informations-footer table .table-button {
  border-radius: var(--br-5);
}

/* list-your-properties__page style */

.list-properties-main .section-heading {
  width: fit-content;
  margin-inline: auto;
}

/* why-list-properties section */

@media (min-width: 550px) {
  .why-list-properties .section-heading::before {
    width: 120%;
  }
}

.why-list-properties .reason {
  background-color: white;
  border-radius: 10px;
  padding: 2rem;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  height: 100%;
}

.why-list-properties .reason i {
  font-size: var(--fs-800);
}

.why-list-properties .reason .reason-info h3 {
  line-height: 1.2;
}

/* list-properties-haveToDo section */

.list-properties-haveToDo .step {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  border-radius: var(--br-10);
  border: 1px solid var(--clr-neutral-grey-200);
  padding: var(--space-400);
  height: 100%;
}

.list-properties-haveToDo .step .step-number {
  display: inline-block;
  border: 1px solid var(--clr-neutral-grey-600);
  border-radius: var(--br-50);
  width: 30px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
}

.list-properties-haveToDo .step .step-info p {
  line-height: 1.5;
}

.list-properties-haveToDo .section-heading::before {
  width: 115%;
}

/* list-properties-faq section */

.list-properties-faq .section-heading::before {
  width: 10rem;
}

/* progress-page style */

/* progress-section */
main .progress-section .progress-heading-holder h2::first-letter {
  text-transform: capitalize;
}

/* progress-holder */

main .progress-section .progress-holder {
  display: flex;
  align-items: center;
  justify-content: start;
}

main .progress-section .progress-holder .progress-bar {
  --progressHeight: 0.5rem;
  background-color: var(--clr-neutral-grey-200);
  margin: 0 2px;
  flex: 1 1;
  height: var(--progressHeight);
  cursor: pointer;
}

main .progress-section .progress-holder .progress-bar.previous {
  background-color: var(--clr-primary-400);
}
main .progress-section .progress-holder .progress-bar.current {
  height: calc(var(--progressHeight) * 2);
}

/* progress-footer */
/* next & prev buttons */

.progress-footer .buttons button {
  padding: var(--space-200) var(--space-500);
  background: var(--clr-primary-400);
  border: none;
  border-radius: var(--br-8);
  color: var(--clr-neutral-100);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transition: all 200ms linear;
}
.buttons button:active {
  transform: scale(0.97); /* nice idea */
}
.buttons button.prev {
  background: transparent;
  border: 1px solid var(--clr-neutral-grey-400);
  color: var(--clr-neutral-grey-600);
}

.buttons button.next:hover {
  background-color: var(--clr-button-hover);
}

.progress-header {
  border-bottom: 1px solid var(--clr-neutral-grey-100);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: var(--space-600);
}

.progress-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid var(--clr-neutral-grey-100);
  box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.2);
  margin-top: var(--space-400);
  padding-block: var(--space-400);
}

/* property-page style */

.property-card {
  min-height: 300px;
  padding: var(--space-400);
  border: 2px solid var(--clr-neutral-grey-200);
  cursor: pointer;
  border-radius: var(--br-10);
  transition: var(--defualt-transition);
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.property-card .property-info,
.property-card .property-image-holder {
  flex: 1;
}

.property-card .property-image-holder {
  display: flex;
  align-items: center;
}

.property-card .property-image-holder i {
  font-size: var(--fs-900);
}

.property-card .property-info p {
  margin-top: var(--space-362);
  font-weight: var(--fw-regular);
  line-height: 1.7;
}

.property-card.selected {
  border-color: var(--clr-primary-400);
  background-color: var(--clr-secondary-200);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* selecting-room-section-style */

.selecting-room .selecting-room-cards-holder {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.selecting-room .slct-room-card {
  display: grid;
  gap: var(--space-400);
}

@media (min-width: 768px) {
  .selecting-room .slct-room-card {
    grid-template-columns: 1fr 2fr;
  }
}

.selecting-room .slct-room-card .card-info::before {
  all: unset;
}

.selecting-room .slct-room-card .card-info ul li {
  display: flex;
  align-items: center;
  gap: var(--space-200);
}

/* room-table-styling */
.slct-room-card .room-table-holder {
  /* overflow-x: unset !important; */
}

.slct-room-card .room-table-holder .room-table thead {
  background-color: var(--clr-neutral-grey-100);
}

.selecting-room-cards-holder .slct-room-card table th {
  padding: var(--space-100) var(--space-400) !important;
}

.selecting-room-cards-holder .slct-room-card table tbody td:first-child {
  text-align: left;
}

.selecting-room-cards-holder .slct-room-card table tbody .chosen-list {
  --flow-spacer: var(--space-200);
  margin: 0 !important;
}

.selecting-room-cards-holder .slct-room-card table tbody .chosen-list li {
  display: flex;
  align-items: center;
  gap: var(--space-200);
}

/* modal-styling */

@media (min-width: 768px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 80%;
  }
}

.modal-content .modal-body {
  display: flex;
  gap: var(--space-400);
}

.modal-content .modal-body > * {
  flex: 1;
}

@media (min-width: 992px) {
  .modal-content .modal-body .single-room__gallery {
    flex-basis: 60%;
  }

  .modal-content .modal-body .room-details {
    flex-basis: 40%;
  }
}

/* single-room__gallery */
.selecting-room .modal-dialog .modal-body .single-room__gallery {
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-400);
  max-height: 75svh;
  overflow-y: scroll;
}

/* room-details */

.modal-dialog .room-details .room-heading {
  font-size: 1rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.modal-dialog .room-details .list-section h5 {
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  text-transform: capitalize;
}

.modal-dialog .room-details .list-section li {
  display: flex;
  align-items: center;
  gap: var(--space-200);
}

/* list-layout */

.modal-dialog .room-details .list-section .list-layout {
  --flow-spacer: var(--space-100);
  padding-inline-start: var(--space-200);
}

.modal-dialog .room-details .list-section .list-layout {
  display: grid;
}

@media (min-width: 768px) {
  .modal-dialog .room-details .list-section .list-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

.modal-dialog .room-details .list-section .list-layout p {
  text-transform: lowercase;
}

.selecting-room .modal-dialog .modal-body .room-details {
  max-height: 75svh;
  overflow-y: scroll;
}

/* house-rules styling */

.house-rules .house-rules-list li {
  border-top: 1px solid var(--clr-neutral-grey-200);
  display: flex;
  padding: var(--space-500);
}

.house-rules .house-rules-list li span {
  text-transform: lowercase;
}

.house-rules .house-rules-list li:last-child {
  border-bottom: 1px solid var(--clr-neutral-grey-200);
}

.house-rules .house-rules-list li .info-answer,
.house-rules .house-rules-list li .info-question {
  display: flex;
  align-items: center;
}

.house-rules .house-rules-list li .info-question {
  flex: 1;
  gap: var(--space-200);
}

.house-rules .house-rules-list li .info-question span {
  font-weight: var(--fw-bold);
}

.house-rules .house-rules-list li .info-answer {
  flex: 2;
  gap: var(--space-100);
}

.house-rules .house-rules-list li .info-answer {
  font-size: var(--fs-300);
  color: var(--clr-neutral-grey-600);
}

/* wishlist styling */

.wishlist-icon-holder {
  position: absolute;
  inset-block-start: var(--space-400);
  inset-inline-end: var(--space-400);
  z-index: 2;
}

.wishlist-icon-holder i {
  overflow: hidden;
  padding: var(--space-200);
  background-color: var(--clr-neutral-100);
  border-radius: var(--br-50);
}

.wishlist-icon-holder i::before {
  color: var(--clr-primary-400);
}

/* wishlist-button */

.wishlist-button {
  border: 1px solid var(--clr-secondary-400);
  border-radius: var(--br-50);
  transition: var(--defualt-transition);
}

.wishlist-button a {
  display: inline-block;
  padding: var(--space-200) var(--space-400);
  color: var(--clr-secondary-400);
  transition: var(--defualt-transition);
  font-weight: var(--fw-bold);
}

.wishlist-button a span {
  font-size: var(--fs-300);
}

.wishlist-button:hover {
  background-color: var(--clr-secondary-400);
}

.wishlist-button:hover a {
  color: var(--clr-neutral-100);
}

.wishlist-button:hover a span {
  text-decoration: underline !important;
}

/* review styling */

/* review-card */

.review .review-cards-holder {
  display: grid;
  gap: var(--space-400);
}

@media (min-width: 700px) {
  .review .review-cards-holder {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  }
}

.review .review-card {
  background-color: var(--clr-neutral-100);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  border-radius: var(--br-10);
  padding: var(--space-400);
  min-height: 10rem;
}

.review .review-card .review-card-header {
  text-wrap: nowrap;
  gap: var(--space-100);
  flex-wrap: wrap-reverse;
}

.review .review-card .traveler-account-image-holder .traveler-account-image {
  width: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
}

/* traveler-details */
.review .review-card .review-card-header .traveler-info .traveler-details {
  font-size: var(--fs-400);
  text-transform: capitalize;
}

/* post-date */
.review .review-card .review-card-header .traveler-info .post-date {
  font-size: var(--fs-300);
  color: var(--clr-neutral-grey-400);
}

.review .review-card .review-card-header .traveler-info .traveler-details,
.review .review-card .review-card-header .traveler-info .post-date {
  font-weight: var(--fw-bold);
}

/* post-review-section style */

.post-review .post-image-holder {
  position: relative;
}

/* .post-review .post-image-holder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--clr-neutral-grey-100);
  border: 5px dotted var(--clr-primary-400);
  border-radius: var(--br-10);
  overflow: hidden;
  z-index: -1;
} */

/* post-details */
/* rating-with-stars-holder */

.rating-with-stars-holder,
.writing-review-holder {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.writing-review-holder .writing-review-heading::first-letter,
.rating-with-stars-holder .rating-with-stars-heading::first-letter {
  text-transform: uppercase;
}

.writing-review-holder .writing-review-heading,
.rating-with-stars-holder .rating-with-stars-heading {
  font-size: 1rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: var(--fw-bold);
}

/* Rating container */
.rating-with-stars {
  display: flex;
  flex-direction: row-reverse; /* Right to left */
  justify-content: start;
  gap: 0.3rem;
  --star-size: 2.5rem;
}

/* Hide radio buttons */
.rating-with-stars input {
  display: none;
}

/* Style full-stars */
.rating-with-stars label {
  font-size: var(--star-size);
  color: var(--clr-neutral-grey-200);
  cursor: pointer;
  transition: color 0.3s;
}

.rating-with-stars-holder .rating-with-stars input:checked ~ label,
.rating-with-stars-holder .rating-with-stars label:hover,
.rating-with-stars-holder .rating-with-stars label:hover ~ label {
  color: var(--clr-accent-yellow-300); /* Fill stars on hover or selection */
}

/* .rating-with-stars label.half::before {
  content: "\f005"; /* Unicode for solid star (FontAwesome) *
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: var(--clr-neutral-grey-200);
} */
/* writing-review-holder */

/* writing-review-heading */

/* writing-review-textarea */

.writing-review-holder .writing-review-textarea {
  min-height: 150px;
  padding: var(--space-200);
  color: var(--clr-neutral-grey-600);
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
}

.writing-review-holder .writing-review-textarea::placeholder {
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  color: var(--clr-neutral-grey-400);
}

/* 
.room-details {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--clr-neutral-100);
  width: 80vw;
  height: 80vh;
  max-height: calc(100% - 80px);
  border-radius: var(--br-5);
  z-index: 1000;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);
  padding: var(--space-600);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* room-details-header *

.room-details .room-details-header {
  /* position: relative;
  inset: 0;
  width: 100%;
  height: fit-content;
  z-index: 10000; *
  display: flex;
  align-items: center;
  justify-content: end;
}

.room-details .room-details-header .closing-icon {
  cursor: pointer;
}

.room-details .popup-content {
  flex: 1;
}

.room-details .room-images {
  /* display: grid; *
  /* grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); *
  display: flex;
  flex-wrap: wrap;
  max-height: 500px;
  overflow-y: auto;
  gap: var(--space-400);
}

.room-details .room-images .room-image-holder {
  flex: 1;
  border-radius: var(--br-5);
  overflow: hidden;
}

@media (min-width: 768px) {
  .room-details .room-images .room-image-holder {
    flex: 50%;
  }
}

@media (min-width: 992px) {
  .room-details .room-images .room-image-holder {
    flex: 33.3333%;
  }
}

.room-details .room-images .room-image-holder img {
  min-height: 100%;
  object-fit: cover;
}

.selecting-room
  .room-details
  .room-info
  .expanding-details
  .list-holder
  .list-heading {
  font-weight: var(--fw-bold);
}

.room-details .room-info .expanding-details .list-holder ul {
  display: flex;
  gap: var(--space-400);
}

.room-details .room-info .expanding-details .list-holder ul li {
  flex: 1;
} */

/* 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;
}

.o-6 {
  order: 6;
}

.o-7 {
  order: 7;
}

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