/* General Styles */
body {
  font-family: "Poppins", sans-serif !important;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4; /* A light background for the page if content extends beyond hero */
  overflow-x: hidden;
}



@font-face {
  font-family: 'PassionSansPDac Light';
  font-style: normal;
  font-weight: normal;
  src: local('PassionSansPDac Light'), url('../webfonts/PassionSansPDac-Light.woff') format('woff');
  }


/* define sizes here */
.mt-30 {
  margin-top: 30px !important;
}
.mb-30 {
  margin-bottom: 30px !important;
}
.mt-60 {
  margin-top: 60px !important;
}
.mb-60 {
  margin-bottom: 60px !important;
}

.pb-60 {
  padding-bottom: 60px;
}

.pt-60 {
  padding-top: 60px;
}

.me-75 {
  margin-right: 75px;
}

/* Navbar Customization */
.navbar-custom {
  background-color: transparent; /* Initially transparent */
  border: none;
  transition: background-color 0.3s ease;
  padding-top: 15px;
  padding-bottom: 15px;
  position: fixed; /* Ensures it stays at the top */
  width: 100%;
  z-index: 1030; /* Bootstrap's default navbar z-index */
}
.navbar-custom .navbar-left-items {
  display: flex;
  align-items: center;
  float: left;
  margin-left: 20px;
}
.navbar-custom .language-selector .btn-link,
.navbar-custom .search-icon-btn {
  color: white;
  font-size: 18px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); /* Subtle shadow for readability against hero */
}
.navbar-custom .language-selector .btn-link:hover,
.navbar-custom .search-icon-btn:hover,
.navbar-custom .language-selector .btn-link:focus,
.navbar-custom .search-icon-btn:focus {
  color: #ddd; /* Lighter color on hover/focus */
  text-decoration: none;
  background: transparent;
}
.navbar-custom .flag-icon {
  width: 28px;
  height: auto;
  margin-right: 6px;
  vertical-align: middle;
}
.navbar-custom .caret {
  border-top-color: white !important;
  border-bottom-color: white !important;
  vertical-align: middle;
}
.navbar-custom .language-selector .dropdown-menu {
  background-color: rgba(51, 51, 51, 0.9); /* Dark semi-transparent dropdown */
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.navbar-custom .language-selector .dropdown-menu > li > a {
  color: white;
  padding: 8px 15px;
}
.navbar-custom .language-selector .dropdown-menu > li > a:hover {
  background-color: #7e623c; /* Accent color on hover */
  color: white;
}
.navbar-custom .navbar-toggle {
  border: 1px solid white;
  float: right;
  margin-right: 20px;
  margin-top: 8px; /* Align better with left items */
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: white;
}

/* Hero Section */
.hero-section {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding-top: 70px; /* Approx Navbar height + some breathing room */
  box-sizing: border-box;
  transition: background-image 0.7s ease-in-out; /* Smooth background transition */
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* Adjust darkness as needed */
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  margin-top: -45vh; /* Adjust to pull content slightly up from true center */
}
/* Hero Section ... (other hero styles remain) */

/* New styles for the image logo */
.logo-image-container {
  margin-bottom: 30px; /* Adjust spacing as needed */
  line-height: 0; /* Helps remove extra space if container is inline-block or has text properties */
}

.hero-logo-image {
  max-width: 500px; /* Set a maximum width for your logo - adjust as needed */
  height: auto; /* Maintain aspect ratio */
  display: inline-block; /* Or block if you want it on its own line with margin auto for centering */
  /* If you want a subtle shadow like the text had, you can try a filter: */
  /* filter: drop-shadow(0px 2px 5px rgba(0,0,0,0.3)); */
}

.inner-page {
  max-width: 300px !important;
}

/* ... (rest of your CSS) ... */

/* Responsive adjustments for the logo image if needed */
@media (max-width: 992px) {
  .hero-logo-image {
    max-width: 250px !important; /* Slightly smaller logo on tablets */
  }
  
  .hero-section .subtitle-text-inner1 {
      font-size: 50px;
  }
  
  .hero-section .subtitle-text-inner1.tour-title {
      font-size: 30px;
      line-height: 35px;
  }
  
  .tour-view-over-view-section .section-title.section-title-big {
      font-size: 25px !important;
  }
}

@media (max-width: 768px) {
  .hero-logo-image {
    max-width: 200px !important; /* Smaller logo on mobile */
  }
  
 .experiences-section .experience-category {
      height: 425px;
  }
  
  .experiences-section.our-tips-section .experience-category {
      height: 300px;
  }
  
  .card-title-large {
      font-size: 24px !important;
  }
  
  .card-title-medium {
      font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .hero-logo-image {
    max-width: 160px !important; /* Even smaller on very small screens */
  }
  
  .mob-half {
      width: 50% !important;
  }
  
  .mob-half .guarantee-icon {
      max-width: 35px;
  }
  
  .mob-half h5, .mob-half p {
      font-size: 15px;
  }
  
  .imgc {
      min-width:35px;
  }
  
  .textc {
      width: calc(100% - 35px);
  }
  
  .tb-a {
      font-size: 14px;
  }
  
  .experiences-section.tour-view .experience-category {
      height: 380px !important;
  }
  
  .experiences-section.tour-view .experience-category .tour-card .card-title-custom {
      min-height: 35px;
  }
  
  .experiences-section.tour-view .experience-category .card-title-custom {
      max-height: 5em !important;
  }
}
.subtitle-text {
  font-size: 37px;
  font-weight: 300;
  margin-top: 0px;
  margin-bottom: 15px;
  text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
}

.subtitle-text-inner {
  font-size: 22.4px;
  font-weight: 300;
  margin-top: 5px;
  margin-bottom: 0px;
  text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
}

.subtitle-text-inner1 {
  font-size: 65px;
    font-weight: 300;
    font-family: PassionSansPDac Light;
    margin-top: 15px;
    text-transform: uppercase;
    margin-bottom: 30px;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
    line-height: 50px;
}

.subtitle-text1 {
  font-size: 38.3px;
  font-weight: 300;
  margin-top: 15px;
  margin-bottom: 0px;
  text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
}
.destination-search-form {
  display: flex;
  justify-content: center;
  align-items: stretch; /* Make select and button same height */
}
.destination-dropdown-group {
  margin-bottom: 0;
  width: 366px;
  display: flex;
}
.custom-select {
  background-color: rgb(42 42 42 / 80%); /* Dark, slightly transparent */
  color: white;
  border: 1px solid rgba(42, 42, 42, 0.7);
  height: 40px;
  font-size: 16px;
  padding: 7px 35px 7px 15px; /* Padding for text and custom arrow */
  border-radius: 0px; /* Rounded left corners */
  -webkit-appearance: none; /* Remove default arrow on Chrome/Safari */
  -moz-appearance: none; /* Remove default arrow on Firefox */
  appearance: none; /* Remove default arrow */
  /* Custom arrow using SVG */
  background-image: url("../img/down-arrow.png");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 20px 20px;
  transition: background-color 0.2s ease;
  margin-right: 10px;
}
.custom-select:focus {
  box-shadow: 0 0 0 0.2rem rgb(42 42 42 / 0%); /* Bootstrap-like focus */
  outline: none;
  background-color: rgba(
    55,
    55,
    55,
    0.95
  ); /* Slightly different background on focus */
}
.custom-select option {
  background-color: #2a2a2a; /* Background for dropdown options */
  color: white;
  font-size: 12px;
}
.btn-browse-custom {
  background-color: #7e623c;
  color: white;
  border: 1px solid #7e623c;
  padding: 6px 35px;
  font-size: 16px;
  font-weight: normal;
  height: 40px;
  border-radius: 0px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  letter-spacing: 0.5px;
}
.btn-browse-custom:hover,
.btn-browse-custom:focus {
  background-color: #644d2c; /* Darker accent on hover/focus */
  color: white;
  border-color: #644d2c;
}

/* City Slider Section */
.city-slider-section {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3; /* Above hero overlay but below potential popups */
  padding: 25px 0; /* Padding above and below the slider */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 60%,
    rgba(0, 0, 0, 0.5) 100%
  ); /* Gradient for better text readability */
}
.city-slider-container {
  display: flex;
  align-items: center; /* Vertically aligns arrows with the slider wrapper */
  max-width: 90%; /* Controls overall width of slider area */
  margin: 0 auto; /* Centers the container */
  position: relative; /* For absolute positioning of arrows */
}
.slider-arrow {
  background-color: transparent; /* Make arrows blend more, rely on SVG */
  border: none;
  color: white; /* SVG stroke color will be white */
  cursor: pointer;
  padding: 10px; /* Clickable area padding */
  z-index: 10; /* Above slider items */
  position: absolute;
  top: 50%; /* Vertically center arrows relative to container */
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
  display: flex; /* For centering SVG inside button */
  align-items: center;
  justify-content: center;
}
.slider-arrow:hover {
  opacity: 0.7; /* Slight fade on hover */
}
.slider-arrow.disabled, /* JS will add/remove 'disabled' class or prop */
.slider-arrow:disabled {
  /* For prop('disabled', true) */
  opacity: 0.3; /* More faded when disabled */
  cursor: default;
}
.slider-arrow .arrow-svg {
  width: 25px; /* Adjust visual size of the arrow SVG */
  height: 40px;
  color: #7e623ccc;
}
.prev-arrow {
  left: 0px; /* Position arrows slightly inside or at the very edge */
}
.next-arrow {
  right: 0px;
}

.city-slider-wrapper {
  overflow: hidden; /* Crucial for the sliding effect */
  width: 100%;
  margin: 0 36px; /* Space for arrows if they are outside the wrapper's inner content */
  height: 180px; /* Set a fixed height for the wrapper to accommodate taller focused item */
  position: relative;
}
.city-slider {
  display: flex; /* Aligns city items in a row */
  align-items: flex-end; /* Align items to bottom for height difference effect */
  height: 100%; /* Take full height of wrapper */
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth sliding animation */
  min-width: 100%; /* Ensures it has some width even if JS fails to set dynamic width */
}

.city-slider-section .slider-arrow {
  top: 54%;
}

.city-slider-section .slider-arrow.next-arrow {
  right: 25px;
}

.city-slider-section .slider-arrow.prev-arrow {
  left: 30px;
}

a.city-item {
  /* Styling the <a> tag which is now the .city-item */
  flex: 0 0 auto; /* Don't grow or shrink, use base width */
  width: 160px; /* Base width of a thumbnail */
  height: 160px; /* Base height for non-focused items */
  margin-right: 25px; /* Spacing between items */
  position: relative; /* For absolute positioning of city name */
  border-radius: 5px; /* Rounded corners for thumbnails */
  overflow: hidden; /* Clips image within rounded corners */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow */
  cursor: pointer;
  display: flex; /* For image centering/fitting if needed */
  flex-direction: column; /* Stack city name (if it were inside differently) */
  justify-content: flex-start; /* City name at top (as per design) */
  align-items: stretch; /* Make child image fill item */
  text-decoration: none; /* Remove underline from link */
  color: inherit; /* Inherit text color, or set explicitly if needed for .city-name */
  /* Smooth transitions for height and other properties */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out,
    height 0.4s ease-in-out;
  will-change: height, transform; /* Hint to browser for optimization */
}

a.city-item.focused {
  /* Style for the centered/active thumbnail */
  height: 180px; /* Taller height for focused item */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.45); /* More prominent shadow */
}

a.city-item.focused::after {
  background: rgba(255, 255, 255, 44%);
  width: 100%;
  height: 180px;
  content: "";
  position: absolute;
}

a.city-item:not(.focused)::after {
  background: rgba(0, 0, 0, 44%);
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
}

a.city-item:not(.focused) .city-name {
  color: #fff;
  text-shadow: none;
}

a.city-item img {
  width: 100%;
  height: 100%; /* Make image fill the city-item's height */
  object-fit: cover; /* Cover the area, cropping if necessary */
  display: block; /* Remove any extra space below image */
  filter: brightness(0.75); /* Slightly darken image for text readability */
  transition: filter 0.3s ease; /* Smooth brightness transition */
}

a.city-item:hover img,
a.city-item.focused img {
  filter: brightness(0.9); /* Brighter image on hover/focus */
}

a.city-item .city-name {
  position: absolute;
  color: black;
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  /* Medium devices (tablets) */
  .hero-content {
    margin-top: -6vh;
  }
  .logo-text {
    font-size: 90px;
  }
  .subtitle-text {
    font-size: 26px;
  }
  .destination-dropdown-group {
    width: 280px;
  }

  .city-slider-container {
    max-width: 95%;
  }
  .city-slider-wrapper {
    /* height: 170px; */
    height: 235px;
    margin: 0 20px;
  }
  a.city-item {
    width: 150px;
    height: 200px;
    margin-right: 8px;
  }
  a.city-item.focused {
    height: 220px;
  }
  .slider-arrow .arrow-svg {
    width: 22px;
    height: 35px;
  }
  .prev-arrow {
    left: 5px;
  }
  .next-arrow {
    right: 5px;
  }
}

@media (max-width: 768px) {
  /* Small devices (landscape phones, large portrait) */
  .navbar-custom .navbar-left-items {
    display: none;
  } /* Hide lang/search on mobile */
  .navbar-custom .navbar-toggle {
    display: block;
    margin-right: 15px;
  }

  .hero-content {
    margin-top: -5vh;
    padding: 0 20px;
  }
  .logo-text {
    font-size: 70px;
    letter-spacing: 2px;
  }
  .subtitle-text {
    font-size: 22px;
    margin-bottom: 30px;
  }
  .destination-search-form {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  .destination-dropdown-group {
    width: 100%;
  }
  .custom-select {
    border-radius: 4px;
    width: 100%;
  }
  .btn-browse-custom {
    width: 100%;
    border-radius: 4px;
  }

  .city-slider-section {
    padding: 15px 0;
  }
  .city-slider-container {
    max-width: 100%;
  } /* Full width for slider area */
  .city-slider-wrapper {
    /* height: 130px; */
    height: 200px;
    margin: 0 10px;
  }
  a.city-item {
    width: 130px;
    height: 170px;
    margin-right: 8px;
  }
  a.city-item.focused {
    height: 190px;
  }
  a.city-item .city-name {
    font-size: 15px;
    top: 10px;
    left: 10px;
  }
  .slider-arrow .arrow-svg {
    width: 20px;
    height: 30px;
  }
  .prev-arrow {
    left: 0px;
  }
  .next-arrow {
    right: 0px;
  }
}

@media (max-width: 480px) {
  /* Extra small devices (portrait phones) */
  .hero-content {
    margin-top: -4vh;
  }
  .logo-text {
    font-size: 50px;
  }
  .subtitle-text {
    font-size: 18px;
  }

  .city-slider-wrapper {
    height: 165px;
    margin: 0 5px;
  }
  a.city-item {
    width: 110px;
    height: 140px;
    margin-right: 5px;
  }
  a.city-item.focused {
    height: 160px;
  }
  a.city-item .city-name {
    font-size: 13px;
    top: 8px;
    left: 8px;
  }
  .slider-arrow .arrow-svg {
    width: 18px;
    height: 28px;
  }
}

@media (max-width: 480px) and (max-height: 600px) {
  .hero-content {
    margin-top: -45vh;
  }
}

/* Value Propositions Section */
.value-props-section {
  padding: 60px 0;
  background-color: #ffffff; /* White background for this section */
}

.value-props-section .section-title {
  font-size: 34px;
  font-weight: normal;
  color: #333333;
  margin-bottom: 20px;

  text-align: center;
}
.value-props-section .section-subtitle {
  font-size: 15px;
  font-weight: normal;
  color: #333333;
  margin-bottom: 30px;

  text-align: center;
}

.guarantee-subsection,
.reputation-subsection {
}

.guarantee-item {
}

.guarantee-icon {
  max-width: 65px; /* Adjust size as needed */
  height: auto;
  margin-bottom: 25px;
}

.guarantee-item-title {
  font-size: 20px;
  font-weight: normal;
  color: #7e623c; /* Using existing accent color */
  margin-top: 0;
  margin-bottom: 15px;
  min-height: 40px; /* To align titles if they wrap to two lines */
}

.guarantee-item p {
  font-size: 15px;
  color: #555555;
  line-height: 1.7;
  padding: 0 10px 0 0; /* Add some horizontal padding for narrower text block */
  margin-bottom: 0px;
}

.section-divider {
  border: 0;
  height: 2px;
  background-color: #7e623c; /* Accent color */
  width: 100%;
  margin: 40px auto 40px auto; /* Top/bottom margin, centered */
}

.reputation-item {
}

.reputation-logo {
  max-height: 55px; /* Adjust based on actual logo dimensions */
  max-width: 180px; /* Ensure logos don't get too wide */
  height: auto;
  margin-bottom: 20px;
  object-fit: contain; /* Ensures logo is scaled correctly without cropping */
}

.rating-score {
  font-size: 22px;
  font-weight: 700;
  color: #7e623c; /* Accent color */
  margin-top: 0;
  margin-bottom: 8px;
}

.rating-source {
  font-size: 15px;
  color: #555555;
  margin-bottom: 0;
}

/* Responsive Adjustments for Value Props Section */
@media (max-width: 991px) {
  /* Tablets */
  .guarantee-item-title {
    min-height: initial; /* Remove fixed min-height */
  }
  .value-props-section .section-title {
    font-size: 30px;
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  /* Mobile */
  .value-props-section {
    padding: 40px 0;
  }
  .value-props-section .section-title {
    font-size: 26px;
    margin-bottom: 30px;
  }
  .guarantee-icon {
    max-width: 55px;
    margin-bottom: 20px;
  }
  .guarantee-item-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .guarantee-item p {
    font-size: 14px;
  }
  .section-divider {
    margin: 30px auto 40px auto;
  }
  .reputation-logo {
    max-height: 45px;
    margin-bottom: 15px;
  }
  .rating-score {
    font-size: 20px;
  }
  .rating-source {
    font-size: 14px;
  }
  /* Ensure reputation items stack nicely on xs, col-sm-6 takes care of 2-up on sm */
  
  .work-with-us {
      padding: 25px !important;
     
  }
  
}
/* ==========================================================================
   Experiences Section
   ========================================================================== */

/* Experiences Section */
/* Experiences Section */
.experiences-section {
  padding: 60px 0; /* Adjust padding as needed */
  color: #ffffff; /* Text color for content within this section */

  /* Background Image Properties */
  background-color: #fff; /* ===> REPLACE THIS PATH AND FILENAME */
  background-size: cover; /* Scale image to cover the section */
  background-position: center center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-attachment: fixed; /* Optional: Creates a parallax-like effect when scrolling. Remove if not desired. */

  position: relative; /* Crucial for positioning the ::before pseudo-element overlay */
  z-index: 0; /* Establishes a stacking context. Content will be above z-index: -1 */

  overflow: hidden;
}

/* Dark Transparent Overlay */
.experiences-section:not(.white-bg)::before {
  content: ""; /* Necessary for pseudo-elements to render */
  position: absolute; /* Position it relative to .experiences-section */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* The Dark Transparent Color */
  /* Adjust the RGB values for the shade of dark (e.g., 0,0,0 for black) */
  /* Adjust the last value (alpha) for transparency (0.0 = fully transparent, 1.0 = fully opaque) */
  background-color: #101c2c; /* Example: Dark gray with 70% opacity */
  /* Another example: Very dark, almost black overlay: rgba(10, 10, 10, 0.75); */
  /* Your original dark blueish-gray: rgba(38, 50, 56, 0.7); */

  z-index: -1; /* Place this overlay BEHIND the section's direct content,
                           but IN FRONT of the section's background-image. */
}

.our-tips-section::before {
  background-color: rgba(255, 255, 255, 1) !important;
}

.our-tips-section .slider-arrow {
  top: 63% !important;
}

.our-tips-section .card-main-content-area {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-height: 75px;
  white-space: unset;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.experiences-main-title {
  font-size: 34px;
  font-weight: normal;
  margin-top: 0; /* Reset margin if needed */
  margin-bottom: 50px;
  color: #eceff1; /* Lighter text color for main title */
  text-align: center;
}

.white-bg .experiences-main-title,
.white-bg .experience-category-title,
.white-bg .experiences-search-bar .form-control {
  color: #000;
}

.white-bg .experiences-search-bar .form-control {
  background-color: #eee;
}
/* Search Bar within Experiences Section */
.experiences-search-bar {
  max-width: 600px;
  margin: 0 auto 50px auto;
  position: relative;
}

.experiences-search-bar .form-control {
  height: 40px;
  border-radius: 3px; /* Rounded search bar */
  background-color: rgba(0, 0, 0, 0.3); /* Darker semi-transparent input */
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding-left: 20px;
  padding-right: 50px; /* Space for the icon */
  font-size: 16px;
}

.experiences-search-bar .form-control::placeholder {
  color: #b0bec5; /* Lighter placeholder text */
}

.experiences-search-bar .btn-search-icon {
  position: absolute;
  right: 0;
  top: 0;
  height: 40px;
  width: 40px;
  background: transparent;
  border: none;
  color: #cfd8dc; /* Icon color */
  font-size: 18px;
  line-height: 40px; /* Vertically center icon */
  padding: 0;
  border-radius: 0 25px 25px 0;
  cursor: pointer;
}
.experiences-search-bar .btn-search-icon:hover {
  color: #ffffff;
}

/* Category Styling (e.g., "Best Sellers", "Select Tours") */
.experience-category {
  margin-bottom: 40px;
  position: relative;
  height: 367px;
}
.experience-category:last-child {
  margin-bottom: 20px; /* Less margin for the last category */
}

.experience-category-title {
  font-size: 21px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 5px;
  color: #eceff1;
  /* If using .container, padding-left: 15px might not be needed for title
       as .container already provides padding. Adjust if layout is off. */
  /* padding-left: 15px; */
}

/* Slider Mechanics for Experience Cards */
.experience-slider-container {
  position: absolute;
  /* margin: 0 -15px; /* Optional: Counteract container padding for a "bleed" effect if not using full-width container */
}

.experience-slider-wrapper {
  /* overflow: hidden;*/
  /* Add padding inside wrapper if arrows are outside and cards need space from container edge */
  /* padding: 0 10px; */
}

.experience-slider-track {
  display: flex;
  /* transition: transform 0.5s ease; /* JS will handle this for smooth sliding */
  padding-bottom: 15px; /* Space for potential scrollbar or card shadow */
  /* Ensure track is wide enough for all cards, JS might also set this. */
  /* min-width: fit-content; /* Or calculated width via JS */
}

/* Slider Arrows for Experience Cards (Overlaying Cards) */
.experience-slider-container .slider-arrow {
  position: absolute;
  /* Calculated for a card height of 270px where visible image part is ~170px */
  top: 31.5%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.1); /* Very subtle circle background */
  border-radius: 50%;
  color: #ffffff; /* SVG arrow color */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  z-index: 10; /* Ensure arrows are above cards */
  transition: background-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.85; /* Slightly transparent by default */
}

.experience-slider-container .slider-arrow:hover {
  background-color: rgba(0, 0, 0, 0.25); /* Darker on hover */
  opacity: 1;
}

.experience-slider-container .slider-arrow.disabled,
.experience-slider-container .slider-arrow:disabled {
  /* For JS disabling */
  opacity: 0.2;
  cursor: default;
  background-color: rgba(0, 0, 0, 0.05);
}

.experience-slider-container .prev-arrow {
  left: 15px; /* Inset from the left edge of the container (on the card) */
}

.experience-slider-container .next-arrow {
  right: 15px; /* Inset from the right edge of the container (on the card) */
}

.experience-slider-container .slider-arrow .arrow-svg {
  width: 15px; /* Visual size of the arrow SVG */
  height: 25px;
  /* The SVG path itself should have stroke="currentColor" and stroke-width="5" */
}

/* Individual Experience Card Styling */
.experience-card {
  flex: 0 0 270px; /* Card width. Adjust if needed */
  margin-right: 10px; /* Space between cards */
  background-color: #37474f; /* Fallback color if image doesn't load */
  border-radius: 0px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden; /* Important for border-radius and overlay */
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  display: flex; /* Needed for flex track */
  flex-direction: column; /* Internal stacking */
  position: relative; /* Crucial for absolute positioning of overlay */
  height: 270px; /* Fixed card height - IMPORTANT for consistent row & arrow placement */
}

.experience-card-small-height {
  height: 250px;
}
.experience-card:last-child {
  margin-right: 0; /* No margin on the last card in the track */
}
.experience-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.experience-card .card-img-top {
  width: 100%;
  height: 100%; /* Image takes full height of the card */
  object-fit: cover; /* Cover area, crop if needed */
  display: block; /* Remove any default spacing */
  border-radius: 0px; /* Match card radius if image is the direct child */
}

/* Existing CSS for .experience-card (ensure 'position: relative;' is there) */
.experience-card {
  flex: 0 0 270px; /* Card width. Adjust if needed */
  margin-right: 10px; /* Space between cards */
  background-color: #37474f; /* Fallback color if image doesn't load */
  border-radius: 0px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden; /* Important for border-radius and overlay */
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  display: flex; /* Needed for flex track */
  flex-direction: column; /* Internal stacking */
  position: relative; /* Crucial for absolute positioning of overlay AND badge */
  height: 270px; /* Fixed card height - IMPORTANT for consistent row & arrow placement */
}

/* ... (other existing CSS) ... */

.experience-card .card-img-top {
  width: 100%;
  height: 100%; /* Image takes full height of the card */
  object-fit: cover; /* Cover area, crop if needed */
  display: block; /* Remove any default spacing */
  border-radius: 0px; /* Match card radius if image is the direct child */
}

/* --- NEW CSS FOR THE SPECIAL OFFER BADGE --- */
.offer-badge {
  position: absolute; /* Position relative to the .experience-card */
  top: 10px; /* Distance from the top edge of the card */
  right: 10px; /* Distance from the right edge of the card */

  color: white;
  padding: 5px 10px;
  font-size: 12px; /* Adjust size as needed */
  font-weight: normal;
  border-radius: 3px; /* Optional: for slightly rounded corners */
  z-index: 10; /* Ensure it's above the image and other content if necessary */
  line-height: 1; /* To ensure text fits well in a small badge */

  letter-spacing: 0.5px; /* Optional: slight letter spacing */
}

.spl-red {
  background-color: #D30803;
}
.spl-green {
  background-color: green;
}
.cmn-gold {
  background-color: #D69A00;
}

.gal-section .container {
  max-width: calc(90% - 40px);
  width: calc(90% - 40px);
}

.testimonial-box {
  flex: 0 0 400px;
  height: 540px;
  background: #fff;
  border-radius: 6px;
}

/* Overlay for Card Details */
.card-details-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent white overlay */
  padding: 12px;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.05); /* Subtle definition line */
  color: #212121; /* Default text color for overlay content */
}

#ourTrips .card-details-overlay {
  height: 100px;
  top: 0px;
  bottom: 0px;
  margin-top: 30%;
  width: 80%;
  right: 0px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-main-content-area {
  display: flex;
  justify-content: space-between; /* Title block left, meta icons right */
  align-items: flex-start; /* Align to top of their respective containers */
}

.tour-card {
  height: 90px;
}

.tour-card .card-title-custom {
  min-height: 30px;
  font-size: 12px;
  font-weight: 500;
}

.tour-card .meta-text {
  padding-right: 10px;
}

.meta-count {
  padding-left: 10px;
}

.tour-card .meta-info-text {
  font-weight: bold;
  font-size: 15px;
}

.tour-card .fa-star {
  color: #fbb103;
}
.tour-card .card-main-content-area {
  flex-direction: column;
}

.tour-card .card-meta-icon-block {
  flex-direction: row;
  align-items: start;
  justify-content: space-around;
  width: 100%;
  justify-content: space-between;
}

.card-title-block {
  flex-grow: 1; /* Allow title to take available width */
  padding-right: 8px; /* Space between title and meta icons */
  min-width: 0; /* Allow shrinking for flex items */
}

.card-title-custom {
  font-family: "Poppins", sans-serif !important; /* Ensure correct font */
  font-size: 14px;
  font-weight: 700; /* Bold title */
  color: #212121; /* Dark text for title */
  margin: 0;
  line-height: 1.3;
  /* Manage multi-line titles gracefully */
  min-height: 71px; /* approx 3 lines (1.3em line-height * 3) */
  overflow: hidden;
  /* text-overflow: ellipsis;  This only works for single line */
  /* For multi-line ellipsis (better to manage text length or use JS)
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    */
}

.card-title-custom .card-subtitle-line {
  display: block; /* Makes "Walking Tour Venice" go to the next line */
  font-weight: 400; /* Normal weight for the second line */
  font-size: 0.95em; /* Slightly smaller */
  /* Potentially manage overflow for this line too if it can be long */
  /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
}

.card-title-custom .card-location-tag {
  font-weight: 400; /* Normal weight */
  color: #424242; /* Slightly lighter than main title but still dark */
  margin-left: 5px; /* Space between tour type and location */
  font-size: 0.9em;
}

.card-meta-icon-block {
  display: flex;
  flex-direction: column; /* Stack meta items (duration, group size) vertically */
  align-items: flex-end; /* Align to the right side of their container */
  flex-shrink: 0; /* Prevent this block from shrinking too much */
}

.meta-info-line {
  display: flex;
  align-items: center; /* Vertically align text and icon */
  margin-bottom: 3px; /* Space between duration and group size lines */
  font-size: 12px; /* Base size for meta text */
  color: #212121; /* Dark text */
}
.meta-info-line:last-child {
  margin-bottom: 0;
}

.meta-info-line .fa-history {
  font-size: 17px;
}
.meta-info-line .fa-users {
  font-size: 15px;
}

.meta-info-text {
  font-weight: 600; /* Bold for values like "2.5" */
  margin-right: 4px; /* Space before the icon */
}

.meta-info-icon {
  /* For glyphicon time/globe */
  font-size: 15px; /* Size of the icon itself */
  color: #333333; /* Dark icon color */
  line-height: 1; /* Ensure proper alignment */
}

/* Rating Stars */
.card-rating-bar {
  text-align: center; /* Center the stars */
  margin-top: 5px; /* Space above the stars, after title/meta block */
}

.card-rating-bar .glyphicon-star {
  font-size: 15px;
  color: #212121; /* Dark stars to match design */
  margin: 0 1px; /* Small space between stars */
}
.card-rating-bar .glyphicon-star-empty {
  /* If you use empty stars for partial ratings */
  color: #757575; /* Lighter grey for empty stars */
}

/* Responsive Adjustments for Experiences Section */
@media (max-width: 991px) {
  /* Tablets */
  .experiences-main-title {
    font-size: 32px;
  }
  .experience-category-title {
    font-size: 21px;
  }
  .experience-card {
    flex-basis: 260px; /* Slightly smaller cards */
    height: 260px; /* Adjust height proportionally or as needed */
  }
  /* Arrow positioning might need slight adjustment if card height changes significantly */
  .experience-slider-container .slider-arrow {
    /* top: 30%; */ /* Example adjustment if image portion is smaller */
  }
  .experience-slider-container .prev-arrow {
    left: 10px;
  }
  .experience-slider-container .next-arrow {
    right: 10px;
  }
}

@media (max-width: 767px) {
  /* Mobile */
  .experiences-main-title {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .experiences-search-bar {
    max-width: 100%;
    padding: 0 15px; /* Add padding for mobile context */
    margin-bottom: 30px;
  }
  .experience-category-title {
    font-size: 21px;
    margin-bottom: 20px;
  }
  .experience-card {
    flex-basis: 240px; /* Even smaller cards for mobile scroll */
    margin-right: 15px;
    height: 250px; /* Adjust height */
  }
  .card-title-custom {
    font-size: 13px;
    max-height: 3.9em; /* (1.3em * 3 lines for 13px font) */
  }
  .meta-info-line {
    font-size: 11px;
  }
  .meta-info-icon {
    font-size: 14px;
  }
  .card-rating-bar .glyphicon-star {
    font-size: 14px;
  }
  /* Arrow size and position for mobile */
  .experience-slider-container .slider-arrow {
    width: 35px;
    height: 35px;
    /* top: 28%; */ /* Example adjustment */
  }
  .experience-slider-container .slider-arrow .arrow-svg {
    width: 12px;
    height: 20px;
  }
  .experience-slider-container .prev-arrow {
    left: 10px;
  }
  .experience-slider-container .next-arrow {
    right: 10px;
  }
  /* Optional: Hide arrows on very small screens if space is too tight */
  /* @media (max-width: 400px) {
        .experience-slider-container .slider-arrow { display: none; }
    } */
}

@media (max-width: 480px) {
  /* Extra small devices */
  .search-input {
      width: 100% !important;
  }
  .experience-card {
    flex-basis: 220px; /* Or make them scrollable one-by-one */
    height: 240px; /* Adjust height */
    margin-right: 10px;
  }

  .testimonials-section .experience-card {
    flex-basis: 220px; /* Or make them scrollable one-by-one */
    /* height: 240px; Adjust height */
    height: auto;
    margin-right: 10px;
  }

  .card-title-custom {
    font-size: 12px;
    max-height: 3.6em; /* (1.2em * 3 lines for 12px font if line-height changes) */
  }
  .meta-info-icon {
    font-size: 13px;
  }
  .card-rating-bar .glyphicon-star {
    font-size: 13px;
  }
}

/* ----------  GLOBAL RESET  ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ----------  HEADER SHELL  ---------- */
.site-header {
  width: 100%;
  padding: 0 60px; /* side spacing */
  position: relative; /* anchor for dropdowns */
  z-index: 999999 !important;
}
.header-container {
  width: 90%;
  margin: 0 auto;
  min-height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 0px;
}

/* ----------  ICON / BUTTON BASICS  ---------- */
.header-icon,
.language-selector,
.menu-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 17px;
  padding: 5px;
}
.header-icon:hover,
.language-selector:hover {
  color: #fff;
}

/* When hamburger is open, swap icon to ❌ */
.menu-toggle[aria-expanded="true"] .fa-bars {
  display: none;
}
.menu-toggle[aria-expanded="true"]::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f00d";
}

/* ----------  LANGUAGE DROPDOWN  ---------- */
.language-dropdown-container {
  position: relative;
}
.language-selector {
  border-radius: 4px;
  padding: 8px 9px;
}
.flag-icon {
  width: 25px;
  height: 15px;
  display: none;
}
.lang-arrow {
  font-size: 0.7em;
  color: #fff;
  margin-left: 5px;
}

.language-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  padding: 5px 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 110;
}
.language-dropdown-menu.show {
  display: block;
}

.language-option {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  font-size: 0.9em;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
}
.language-option:hover {
  background: #f0f0f0;
}
.language-option .flag-icon {
  display: inline-block;
  width: 20px;
  height: auto;
  margin-right: 10px;
  border: 1px solid #eee;
}

/* rotate chevron when open */
.language-selector[aria-expanded="true"] .lang-arrow {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

/* ----------  CENTER LOGO (shown on scroll)  ---------- */
.header-center {
  text-align: center;
  width: 100%;
}
.header-sticky-logo {
  width: 100px;
}
.hide-me {
  display: none;
}

/* Sticky‑header reveal handled via JS */
#stickyHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 63px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  color: #fff;
  z-index: 1000;
  transition: transform 0.35s ease;
}
#stickyHeader.show {
  transform: translateY(0);
}
.sticky-header-bg-solid {
  background: #000c;
  transition: background-color 0.4s;
}
.sticky-header-bg {
  background: #222c;
  transition: background-color 0.4s;
}

/* ----------  MEGA‑MENU  ---------- */
.site-header-nav {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #f8f9fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease-out;
  z-index: 999;
}
.site-header-nav.is-open {
  max-height: 600px;
}

.mega-menu-container {
  padding: 25px 35px 30px;
  margin: 0 auto;
  box-sizing: border-box;
}
.mega-menu-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.mega-menu-column {
  flex: 1 1 200px;
}
.mega-menu-column.destinations-column {
  flex-basis: 40%;
}
.destinations-subcolumns {
  display: flex;
  gap: 60px;
}

.mega-menu-title {
  font-family: "Poppins", sans-serif !important;
  font-size: 1.1rem;
  font-weight: 600;
  color: #b8860b;
  margin: 0 0 15px;
}
.mega-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega-menu-list li {
  margin-bottom: 10px;
}
.mega-menu-list a {
  font-size: 0.9rem;
  text-decoration: none;
  color: #333;
  transition: color 0.2s;
}
.mega-menu-list a:hover {
  text-decoration: underline;
  color: #b8860b;
}

/* ----------  RESPONSIVE (≤768 px)  ---------- */
@media (max-width: 768px) {
  .mega-menu-content {
    flex-direction: column;
    gap: 25px;
  }
  .destinations-subcolumns {
    gap: 20px;
  }
  .mega-menu-container {
    padding-top: 17px;
  }
}

/* --- Search Popup --- */

.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65); /* Semi-transparent black overlay */
  z-index: 1040; /* Below popup, above other content */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Fade transition */
}

.search-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.search-popup {
  position: fixed;
  top: 40%; /* Adjust vertical position */
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9); /* Start slightly scaled down */
  background-color: #0d1d3b; /* Dark blue background like image */
  color: #ffffff;
  padding: 30px 40px;
  border-radius: 5px;
  z-index: 1050; /* Above overlay */
  max-width: 600px; /* Limit width */
  width: 90%; /* Responsive width */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.search-popup.active {
  top: 50%; /* Move to final position */
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1); /* Scale to full size */
  transition: opacity 0.3s ease, transform 0.3s ease, top 0.3s ease;
}

.search-popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  color: #ccc;
  font-size: 1.5rem; /* Adjust size */
  cursor: pointer;
  padding: 5px;
  line-height: 1;
}

.search-popup-close:hover {
  color: #fff;
}

.search-popup-title {
  text-align: center;
  margin-top: 0;
  margin-bottom: 25px;
  font-weight: 500; /* Adjust weight */
  font-size: 1.5rem; /* Adjust size */
  font-family: "Poppins", sans-serif !important; /* Use Poppins if desired */
}

.search-popup-form {
  display: flex;
  align-items: center;
  background-color: #fff; /* White background for input area */
  border-radius: 3px;
  overflow: hidden; /* Clip button */
}

.search-popup-input {
  flex-grow: 1;
  border: none;
  padding: 12px 15px;
  font-size: 1rem;
  color: #333;
  outline: none;
}
.search-popup-input::placeholder {
  color: #888;
}

.search-popup-submit {
  background-color: #fff; /* Match input background */
  border: none;
  color: #0d1d3b; /* Dark blue icon */
  padding: 0 15px;
  cursor: pointer;
  font-size: 1.3rem; /* Adjust icon size */
  display: flex;
  align-items: center;
  height: 100%; /* Align vertically */
}
.search-popup-submit:hover {
  color: #2952a3; /* Lighter blue on hover */
}

/* ==========================================================================
   Testimonials Section
   ========================================================================== */

.testimonials-section {
  padding: 60px 0;
  background-color: #ffffff; /* Light background for the section itself */

  overflow: hidden;
}

.testimonials-section .slider-arrow {
  top: 57%;
}

/* Using a shared .section-title style if available, otherwise define like this: */
.testimonials-section .section-title {
  font-size: 34px;
  font-weight: normal;
  color: #333333; /* Dark text for title */
  margin-top: 0;
  margin-bottom: 50px;
  text-align: center;
}

.testimonial-cards-row {
  margin-bottom: 40px; /* Space above the footer elements */
  /* height: 600px; */
  height: 625px;
  background: #fff;
}

/* Outer Testimonial Card (with background image) */
.testimonial-card {
  height: 540px; /* Adjust height as needed, or use min-height */
  background-size: cover;
  background-position: center center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  margin-bottom: 0px; /* Space between cards when they stack */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* TripAdvisor-style Overlay Box */
.testimonial-overlay.tripadvisor-style {
  background-color: rgb(255 255 255 / 70%); /* White, mostly opaque */
  padding: 13px;
  border-radius: 6px;
  width: 60%; /* Width of the review box relative to the card */
  max-width: 400px; /* Max width it can grow to */
  min-height: 300px; /* Minimum height for content */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  text-align: left; /* Content aligns to the left */
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  box-sizing: border-box;
}

.reviewer-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
  border: 1px solid #eee;
}

.reviewer-details {
  display: flex;
  flex-direction: column;
}

.reviewer-name {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}

.reviewer-contributions {
  font-size: 12px;
  color: #777;
  line-height: 1.2;
}

.review-rating-dots {
  margin-bottom: 12px;
  display: flex;
}

.rating-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #e0e0e0; /* Inactive dot color */
  margin-right: 4px;
  display: inline-block;
}

.rating-dot.active {
  background-color: #00aa6c; /* TripAdvisor green for active dots */
}

.review-title {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.3;
}

.review-text {
  font-size: 12px;
  line-height: 1.6;
  color: #232323;
  margin-bottom: 15px;
  flex-grow: 1; /* Allows text to take available vertical space */
}

.review-date {
  font-size: 13px;
  color: #424242;
  margin-top: auto; /* Pushes date to the bottom of the flex container */
  margin-bottom: 0;
}

/* Footer with TripAdvisor Logo and Button */
.testimonials-footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* Space between logo and button */
}

.tripadvisor-logo {
  max-height: 50px;
  width: auto;
}

.btn-see-more-reviews {
  background-color: #7e623c; /* Your accent color */
  color: white;
  border: 1px solid #7e623c;
  padding: 10px 25px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-see-more-reviews:hover,
.btn-see-more-reviews:focus {
  background-color: #b06d36; /* Darker accent */
  color: white;
  border-color: #a05d2e;
  text-decoration: none;
}

/* Responsive Adjustments for Testimonials Section */
@media (max-width: 991px) {
  /* Tablets */
  .testimonials-section .section-title {
    font-size: 30px;
    margin-bottom: 40px;
  }
  .testimonial-card {
    height: 480px; /* Adjust card height for tablets if needed */
  }
  .testimonial-overlay.tripadvisor-style {
    width: 90%; /* Overlay can be a bit wider on tablets */
    padding: 18px;
  }
  .review-title {
    font-size: 15px;
  }
  .review-text {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  /* Mobile Phones */
  .testimonials-section .section-title {
    font-size: 26px;
    margin-bottom: 30px;
  }
  .testimonial-card {
    height: auto; /* Allow height to be determined by content */
    min-height: 420px; /* Still give some min height for bg image */
    align-items: flex-start; /* Align overlay to top */
    padding-top: 20px; /* Space for overlay from card top */
    padding-bottom: 20px;
  }
  .testimonial-overlay.tripadvisor-style {
    width: calc(
      100% - 30px
    ); /* Overlay takes most of width with small side margins */
    margin-left: auto;
    margin-right: auto;
    min-height: 0; /* Content dictates height */
    padding: 15px;
    height: 100%;
  }
  .reviewer-avatar {
    width: 35px;
    height: 35px;
  }
  .reviewer-name {
    font-size: 14px;
  }
  .reviewer-contributions {
    font-size: 11px;
  }
  .rating-dot {
    width: 13px;
    height: 13px;
  }
  .review-title {
    font-size: 14px;
  }
  .review-text {
    font-size: 12px;
  }
  .review-date {
    font-size: 12px;
  }
  .testimonials-footer {
    flex-direction: column; /* Stack logo and button */
    gap: 15px;
  }
  .btn-see-more-reviews {
    width: auto; /* Allow button to size to content or set specific width */
    max-width: 250px;
  }
}

.review-text {
  max-height: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   CTA Hero Section
   ========================================================================== */

.cta-hero-section {
  padding: 210px 0;
  background-image: url("../img/Berlin.webp"); /* Ensure this path is correct from CSS file location */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Optional: for parallax effect */
  position: relative;
  color: #ffffff;
}

.cta-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Dark overlay, adjust opacity (0.0 to 1.0) as needed */
  z-index: 1;
}

.cta-hero-content-container {
  position: relative;
  z-index: 2; /* Content above overlay */

  background: #ffffffab;
  padding: 30px;
  border-radius: 10px;
}

.cta-hero-content-container .cta-pre-title img {
  /* filter: invert(1) brightness(0.5); */
}
/* Left Text Column */
.cta-text-column {
  padding-right: 30px; /* Space between left and right columns */
}

.cta-pre-title {
  font-family: "Dancing script", cursive; /* Add more script font fallbacks or your specific font */
  font-size: 32px;
  color: #7e623c; /* Gold-ish color */
  margin-bottom: 5px;
  line-height: 1;
}

.cta-main-title {
  font-size: 34px;
  font-weight: normal;
  color: #000;
  margin-top: 0;
  margin-bottom: 25px;
  line-height: 1.1;
}

.cta-description {
  font-size: 15px;
  line-height: 1.7;
  color: #000; /* Slightly off-white */
  margin-bottom: 20px;
}

.btn-contact-us {
  background-color: #7e623c; /* Your accent color */
  color: white;
  border: 1px solid #7e623c;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: normal;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: inline-block;
  margin-top: 15px;
}

.btn-contact-us:hover,
.btn-contact-us:focus {
  background-color: #b06d36;
  color: white;
  border-color: #a05d2e;
  text-decoration: none;
}

/* Right Features & Form Column */
.cta-features-form-column {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0px;
}

.cta-gap {

  gap: 6px !important;
}

.hero-font-style{
  font-family: 'PassionSansPDac Light';
}

.cta-feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 25px; /* Increased space */
}
.cta-feature-item:last-of-type {
  margin-bottom: 50px; /* More space before form */
}

.cta-feature-icon {
  margin-right: 25px; /* Increased space */
  flex-shrink: 0;
}

.cta-feature-icon img,
.cta-feature-icon svg {
  width: 60px; /* INCREASED ICON SIZE */
  height: 60px; /* INCREASED ICON SIZE */
  /* For SVGs: if they are black, use filter or ensure fill="currentColor" or fill="#ffffff" in SVG */
  filter: brightness(0) invert(0);
}

.cta-feature-text {
  font-size: 19px; /* INCREASED FONT SIZE */
  line-height: 1.3;
  color: #000;
  font-weight: normal; /* Or 600 if a bit bolder is needed */
}

/* Availability Form */
.cta-availability-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 20px; /* Space above the form, adjusted from previous feature item margin */
}

.form-group-inline {
  /* Wrapper for each select */
  flex-grow: 1;
  min-width: 100px; /* Prevent selects from becoming too narrow */
}

.cta-select {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 50px;
  font-size: 16px;
  border-radius: 4px;
  padding-left: 15px; /* Padding for text */
  padding-right: 35px; /* More space for custom arrow */
  width: 100%;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27292.4%27%20height%3D%27292.4%27%3E%3Cpath%20fill%3D%27%23FFFFFF%27%20d%3D%27M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-13z%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center; /* Adjust arrow position */
  background-size: 10px 10px;
}

.cta-select option {
  background-color: #2a2a2a;
  color: white;
}

.cta-select:focus {
  border-color: #7e623c;
  box-shadow: 0 0 0 0.2rem rgba(199, 125, 62, 0.25);
  outline: none;
}

.btn-check-availability {
  background-color: #7e623c; /* Your accent color */
  color: white;
  border: 1px solid #7e623c;
  padding: 0 25px;
  font-size: 16px;
  font-weight: bold;
  height: 50px;
  border-radius: 4px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0; /* Prevent button from shrinking too much */
}

.btn-check-availability:hover,
.btn-check-availability:focus {
  background-color: #b06d36;
  color: white;
  border-color: #a05d2e;
}

/* Responsive Adjustments for CTA Hero Section */
@media (max-width: 991px) {
  /* Tablets */
  .cta-hero-section {
    padding: 60px 0;
  }
  .cta-text-column,
  .cta-features-form-column {
    padding-left: 15px;
    padding-right: 15px;
  }
  .cta-pre-title {
    font-size: 28px;
  }
  .cta-main-title {
    font-size: 44px;
  }
  .cta-description {
    font-size: 14px;
  }
  .cta-features-form-column {
    margin-top: 40px;
  }
  .cta-feature-icon img,
  .cta-feature-icon svg {
    width: 65px; /* Slightly smaller for tablets */
    height: 65px;
  }
  .cta-feature-text {
    font-size: 20px; /* Slightly smaller for tablets */
  }
  .cta-availability-form {
    flex-wrap: wrap; /* Allow form items to wrap if needed, though ideally they fit */
  }
  .form-group-inline {
    min-width: 150px; /* Ensure selects have reasonable width on tablets */
  }
}

@media (max-width: 767px) {
  /* Mobile Phones */
  .cta-hero-section {
    padding: 50px 0;
    text-align: center;
  }
  .cta-text-column {
    padding-right: 0;
    margin-bottom: 30px; /* Space before features column stacks */
  }
  .cta-pre-title {
    font-size: 24px;
  }
  .cta-main-title {
    font-size: 36px;
    margin-bottom: 20px;
  }
  .cta-description {
    text-align: left;
    padding: 0 10px;
    margin-bottom: 15px;
  }

  .cta-description.city-description {
    padding: 0;
  }

  .btn-contact-us {
    margin-top: 10px;
    margin-bottom: 0; /* Will be handled by .cta-text-column margin-bottom */
  }

  .cta-features-form-column {
    padding-left: 0;
    margin-top: 0; /* text-column margin-bottom handles spacing */
    align-items: center;
  }
  .cta-feature-item {
    justify-content: center;
    text-align: left;
    max-width: 350px;
    margin-bottom: 30px;
  }
  .cta-feature-item:last-of-type {
    margin-bottom: 40px;
  }
  .cta-feature-icon img,
  .cta-feature-icon svg {
    width: 50px; /* Adjusted for mobile */
    height: 50px;
  }
  .cta-feature-text {
    font-size: 18px; /* Adjusted for mobile */
  }

  .cta-availability-form {
    flex-direction: column;
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
  .form-group-inline {
    margin-bottom: 10px;
    width: 100%;
  }
  .form-group-inline:last-of-type {
    /* If it's the second select */
    margin-bottom: 10px; /* Ensure space before button if it's also in a group */
  }
  .btn-check-availability {
    width: 100%; /* Full width button on mobile */
  }
}

.disabled-card {
  opacity: 0.4;
}

.our-trips-title {
  text-align: center;
  width: 100%;
  font-size: 34px;
  color: #000;
  margin-bottom: 50px;
  font-weight: normal;
}
/* ==========================================================================
   Site Footer
   ========================================================================== */

.site-footer {
  background-color: #101c2c; /* Very dark blue from image */
  color: #a9b2c1; /* Light grayish-blue for text */
  padding: 60px 0;
  font-size: 14px;
  line-height: 1.7;
}

.site-footer .container {
  max-width: calc(90% - 40px);
  width: calc(90% - 40px);
}

.footer-col {
}

.footer-logo {
  max-width: 285px; /* Adjust as needed based on your logo's dimensions */
  margin-bottom: 20px;
}

.footer-copyright {
  font-size: 13px;
  color: #818a99; /* Slightly darker gray for copyright */
  line-height: 1.6;
}

.footer-heading {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff; /* White for headings */
  margin-top: 0;
  margin-bottom: 20px;
  text-transform: none; /* Ensure it's not uppercase if other h5 are */
}

.footer-links {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links li a {
  color: #a9b2c1; /* Default link color */
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links li a:hover,
.footer-links li a:focus {
  color: #ffffff; /* Brighter on hover */
  text-decoration: none;
}

/* Specific styling for the second column of destination links if needed,
   especially for alignment on smaller screens if headings are present.
   In this case, the second destinations column has no heading, so its top
   should align with where the first list item of the first destinations column is.
   We can achieve this by adjusting its top margin if needed, but with no heading it should be fine.
   If it had a heading, we'd hide it and adjust padding.
*/
.footer-destinations-col2 {
  /* On larger screens, if no heading, it might need a top margin
       to align with lists that *do* have a heading.
       However, Bootstrap columns should align fine.
       If list items don't align, this can be used:
    */
  /* padding-top: 43px; /* Approx height of heading + margin-bottom */
}

.footer-social-icons {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex; /* Default for larger screens */
  flex-direction: column; /* Stack icons vertically */
  align-items: flex-end; /* Align to the right */
}

.footer-social-icons li {
  margin-bottom: 15px; /* Space between social icons */
}
.footer-social-icons li:last-child {
  margin-bottom: 0;
}

.footer-social-icons li a {
  color: #ffffff; /* White social icons */
  font-size: 20px; /* Size of the icons */
  display: inline-block;
  transition: color 0.2s ease;
}

.footer-social-icons li a:hover,
.footer-social-icons li a:focus {
  color: #7e623c; /* Your accent color on hover */
}

/* Responsive Adjustments for Footer */
@media (max-width: 991px) {
  /* Tablets */
  .footer-logo {
    max-width: 180px;
  }
  .footer-heading {
    font-size: 15px;
  }
  .site-footer {
    font-size: 13px;
  }
  .footer-social-icons {
    align-items: flex-start; /* Align to left on tablet if stacking */
    margin-top: 10px; /* Add some space if it comes after a stacked column */
  }
  .footer-destinations-col2 {
    padding-top: 0; /* Reset padding if set for larger screens */
  }
}

@media (max-width: 767px) {
  /* Mobile Phones */
  .site-footer {
    text-align: center; /* Center text in columns on mobile */
    padding: 40px 0;
  }
  .footer-logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .footer-heading {
    margin-bottom: 15px;
  }
  .footer-col {
    margin-bottom: 25px; /* Consistent margin for stacked columns */
  }
  .footer-social-icons {
    flex-direction: row; /* Icons in a row on mobile */
    justify-content: center; /* Center the row of icons */
    align-items: center;
    margin-top: 10px;
  }
  .footer-social-icons li {
    margin-bottom: 0;
    margin-left: 10px;
    margin-right: 10px;
  }
  .footer-social-col.text-right {
    /* Override text-right from Bootstrap */
    text-align: center !important;
  }
  .footer-destinations-col2 {
    padding-top: 0; /* Reset padding */
  }
}

.experiences-section .container {
  max-width: calc(90% - 40px);
  width: calc(90% - 40px);
}

.testimonials-section .container {
  max-width: calc(90% - 40px);
  width: calc(90% - 40px);
}

/* Style for the placeholder text when it's the selected item */
select.custom-select:required:invalid {
  color: #fff; /* A common placeholder gray color (Bootstrap's text-muted) */
  /* You can use any color you prefer, e.g., gray, lightgray, #999 */
}

/* Style for the selected text once a valid option is chosen */
select.custom-select:required:valid {
  color: #fff; /* Default Bootstrap form control text color, adjust as needed */
  /* Or simply 'inherit' or your desired text color for selected items */
}

/* Ensure all options in the dropdown list itself are black (or your default) */
/* This is usually the default, but can be explicitly set if needed */
select.custom-select option {
  color: #fff; /* Or your desired text color for items in the list */
}

/* Optional: If you want the placeholder option (if it were visible) to also be gray */
/* Not strictly necessary because we made it 'hidden' */
/*
select.custom-select option[value=""] {
    color: #6c757d;
}
*/

select.custom-select:focus {
  outline: none !important; /* Removes the standard browser outline */
  box-shadow: none !important; /* Removes Bootstrap's typical focus glow */
  /* Optional: If Bootstrap also changes the border color on focus and you want to prevent that */
  /* border-color: #ced4da; /* Replace with your select's normal border color if needed */
}

.form-control:focus {
  outline: none !important; /* Removes the standard browser outline */
  box-shadow: none !important; /* Removes Bootstrap's typical focus glow */
  border: none !important;
}

/* ----------  RESPONSIVE (≤768 px)  ---------- */
@media (max-width: 768px) {
  .testimonial-cards-row {
    height: 500px;
  }
}

/* ----------  RESPONSIVE (≤991 px)  ---------- */
@media (max-width: 991px) {
  .testimonial-cards-row {
    height: 520px;
  }

  .testimonial-cards-row .experience-card {
    height: auto;
  }
}
/* make the visible select box transparent */
.destination-search-form .custom-select {
  background-color: #00000086 !important; /* remove grey fill */
  /* keep or drop as you like */
  color: #fff; /* pick text colour to suit */
  appearance: none; /* hide native arrow */
}

/* optional—tone down the dropdown panel itself.
 Most browsers let you set this, but support varies. */
.destination-search-form .custom-select option {
  background-color: transparent; /* or rgba(0,0,0,.5) for 50 % opacity */
  color: #000; /* text colour inside the list */
}
.choices__list--dropdown {
  background: transparent; /* the open menu */
  backdrop-filter: blur(4px); /* optional frosted-glass look */
}

.dp-center {
  width: 100%;
}

/* the code below is for the dropdown heading */
.setting-description {
  background-color: #1c2028;
  border-radius: 15px 15px 0px 0px;

  min-width: 231.5px;
  width: 100% !important;
  max-width: 483px;
}

h10 {
  font-size: 12px;
  margin-left: 5px !important;
  letter-spacing: 0.8px;
  font-family: Arial !important;
}

.setting-description-text {
  padding-top: 18px !important;
  color: #81828b;
  font-family: Gilroy-Regular !important;
}

/* the code below is for the dropdown menu */
.wrapper-dropdown {
  position: relative;
  display: inline-block;
  width: 96% !important;
  padding: 8px;
  min-height: 40px;
  border-radius: 0px 0px 0px 0px;
  background: rgba(0, 0, 0, 0.5);
  text-align: left;
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-bottom: 20px;
  max-height: 50px;
  margin-left: -14px;
}

.scrollable-menu {
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
}

.arrow {
  margin-right: 0px;
  float: right;
  rotate: 180deg;
}

.selected-display {
  margin-left: 10px;
}

svg {
  transition: all 0.3s;
}

.wrapper-dropdown::before {
  position: absolute;
  top: 50%;
  right: 16px;

  margin-top: -2px;

  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #fff transparent;
}

.rotated {
  transform: rotate(-180deg);
}

.wrapper-dropdown .dropdown {
  transition: 0.3s;

  position: absolute;
  top: 104%;
  right: 0;
  left: 0;

  margin: 0;
  padding: 0;

  list-style: none;

  z-index: 99;

  border-radius: 0px;
  box-shadow: inherit;
  background: rgba(0, 0, 0, 0.5);

  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  opacity: 0;
  visibility: hidden;
}

.wrapper-dropdown .dropdown li {
  padding: 4px 21px;
  line-height: normal;
  overflow: hidden;
  font-size: 14px;
}

.wrapper-dropdown .dropdown li:last-child {
  border-bottom: none;
}

.dropdown {
  padding: 0.5rem !important;
}

.wrapper-dropdown .dropdown li:hover {
  background-color: rgb(35, 40, 49, 0.5);
  border-radius: 0px;
}

.wrapper-dropdown.active .dropdown {
  opacity: 1;
  visibility: visible;

  border-radius: 0px;
}

.city-slider-wrapper {
  position: relative; /* Crucial for absolute positioning of child */
  overflow: hidden; /* Hides the parts of the slider that are off-screen */
  /* You must define a width for the wrapper */
  /* e.g., width: 80%; margin: 0 auto; or a fixed width */
}

.city-slider {
  position: absolute; /* Allows positioning with 'left' */
  top: 0;
  left: 0; /* Initial position, will be controlled by JS */
  display: flex; /* To arrange items horizontally */
  /* height: ...; */ /* Ensure items have a consistent height */
  /* Transition will be applied by JavaScript */
}

.city-item {
  flex-shrink: 0; /* Prevent items from shrinking */
  /* Ensure items have consistent width and margins, box-sizing: border-box is helpful */
}

@media (max-width: 576px) {
  .wrapper-dropdown {
    width: 100% !important;
    margin-left: 0;
  }

  .language-selector {
    padding: 5px;
  }

  .header-container {
    margin: 0;
  }

  .header-left {
    gap: 0;
  }

  .header-sticky-logo {
    margin-left: 65px;
  }

  .our-tips-section .slider-arrow {
    top: 75% !important;
  }
}

@media (max-width: 767px) {
  .experiences-search-bar .btn-search-icon {
    right: 6%;
  }
}

.blog-feed-title {
  width: 100%;
  font-size: 21px;
  color: #000;
  margin-bottom: 20px;
  font-weight: normal;
}

.blog-input.search-input::placeholder {
  color: white;
}

.blog-input {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  outline: none;
  border: none;
  cursor: default;
}

.search-input {
  height: 40px;
  width: 96%;
  padding: 8px;
}

.our-tips-section .blog-nav.slider-arrow {
  top: 50% !important;
}

.common-hero.hero-section {
  margin-top: -10vh;
}

/* city page style */
.cta-city-hero-section {
  padding: 60px 0;
  background-color: white;
}
.btn-browse-custom.city-btn {
  height: auto;
  min-height: 40px;
}

/* city page image slider */
.margin-top-25 {
  margin-top: 25px;
}

.experience-category.experience-category-city-slider {
  height: 275px;
}

.experience-category.experience-category-city-slider .slider-arrow .arrow-svg {
  color: white;
}

.value-props-section .section-subtitle {
  font-size: 15px;
  font-weight: normal;
  color: #333333;
  margin-bottom: 30px;

  text-align: center;
  width: 78%;
  margin-left: auto;
  margin-right: auto;
}

.experience-category-subtitle {
  font-size: 16px;
  font-weight: 100;
  margin-bottom: 12px;
}

.half-screen {
  height: 50vh;
}

.sdf h5 {
  font-size: 18px !important;
}


.gold-color{
  color: #7e623c ;
  font-family: 'PassionSansPDac Light';

}

.font-passion {
  font-family: 'PassionSansPDac Light';
}

.prl30{
  padding: 0 30px;
}
.experience-card.tour-type {
    height: 325px;
}
.card-title-large, .card-title-medium {
    text-align: center;
    text-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.8), /* bottom-right shadow */
    -1px -1px 2px rgba(0, 0, 0, 0.6); /* top-left shadow */
}

.card-title-medium {
    font-size: 21px;
}
.card-title-large {
  font-size: 28px;
  color: white;
}
.card-title-wrapper {
    position: absolute;
    width: 100%;
    top: 10px;
}
.entry-wrapper{
    position: absolute;
    bottom: 100px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 20px;
}
.price-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    background-color: rgba(100, 77, 44, 0.9);
    padding-top: 15px;
}

.guarantee-icon-small {
    width: 20px;
    filter: invert(1);
    margin-right: 10px;
}
.price-from {
    font-size: 12px;
}

.dollar-amt {
    font-weight: bold;
}

.dollar-amt span {
    font-size: 13px;
}

.entry-type {
    font-size: 16px;
    margin-top: 5px;
}
.entry-size{
  font-size: 16px;
}
.price-content{
  padding-top: 12px;
}