@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Open+Sans:wght@300..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Unbounded:wght@200..900&display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root {
  --primary-color: #F7921E;
  --black-color: #000000;
  --gray-color-1: #FFF9F3;
  --gray-color-2: #F3ECE5;
  --gray-color3: #D9D9D9;

}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0 !important;
  box-sizing: border-box;
  overflow-x: hidden;
  background-color: var(--gray-color-1);

}

/* aspect ratio */
.as-square {
  aspect-ratio: 1/1;
}

.as-4_3 {
  aspect-ratio: 4/3;
}

.as-3_4 {
  aspect-ratio: 3/3.15;
}

.as-3_5 {
  aspect-ratio: 3/5;
}

.as_video {
  aspect-ratio: 16/6;

}

/* == typography styles === */
.text-width {
  width: 100%;
  max-width: 60%;
}

@media screen and (max-width:1024px) {
  .text-width {
    max-width: 80%;
  }
}

@media screen and (max-width:525px) {
  .text-width {
    max-width: 100%;
  }
}

.letter-2 {
  letter-spacing: 2px;
}

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

.text-xs {
  font-size: clamp(8px, 1.5vw, 9px);
}

.text-sm {
  font-size: clamp(12px, 2vw, 14px);
}

.text-smd {
  font-size: clamp(14px, 2.5vw, 16px);
}

.txt-md {
  font-size: clamp(16px, 3vw, 18px);
}

.text-lg {
  font-size: clamp(18px, 3.5vw, 20px);
}

.text-xlg {
  font-size: clamp(20px, 3.8vw, 25px);
}

.text-xl {
  font-size: clamp(22px, 4vw, 30px);
}


.text-2xl {
  font-size: clamp(28px, 5.5vw, 45px);
}

.text-3xl {
  font-size: clamp(32px, 6vw, 80px);
}

.line-55 {
  line-height: 55.2px;
}

.font-500 {
  font-weight: 500;
}

.font-900 {
  font-weight: 900;
}

.font-600 {
  font-weight: 600;
}

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

.font-extrabold {
  font-weight: bolder;
}

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

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

.text-center {
  text-align: center !important;
}

.capitalize {
  text-transform: capitalize;
}

.uppercase {
  text-transform: uppercase;
}

.primary-text {
  color: var(--primary-color);
}

.black-text {
  color: var(--black-color);
}

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 1 line */
.clamp-1 {
  -webkit-line-clamp: 1;
}

/* 2 lines */
.clamp-2 {
  -webkit-line-clamp: 2;
}

/* 3 lines */
.clamp-3 {
  -webkit-line-clamp: 3;
}

.hvr {
  transition: all 0.3s ease-in-out;
}

.hvr:hover {
  color: var(--primary-color);
}

.text-nowrap {
  white-space: nowrap;
  text-wrap: nowrap;
}

/* === background ==== */
.primary-bg {
  background-color: var(--primary-color);
}

.secondary-bg {
  background-color: var(--gray-color3);
}

.tertiary-bg {
  background-color: var(--gray-color-2);
}

.bg-light-yellow {
  background-color: rgba(247, 146, 30, 0.2);

}

/* === object height and width === */
.div-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.size-full {
  width: 100%;
  height: 100%;
}

.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}

/* list */
.list-none {
  list-style: none;
}

.text-d-none {
  text-decoration: none;
  color: inheritd;
}

/* border */
.b-none {
  border: none;
}

.line-none {
  outline: none;
}

.rounded-full {
  border-radius: 50%;
}

/* button */
.primary-btn {
  padding: 8px 12px;
  background-color: var(--primary-color);
  color: var(--black-color);
  border-radius: 12px;
}

/* === header section === */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
}

.logo {
  aspect-ratio: 1/1;
  width: 150px;
  height: 100px;
}

.nav-link {
  transition: all 0.3s ease-in-out;
  padding: 10px;
  border-radius: 99px;
  text-wrap: nowrap;
  white-space: nowrap;
}

.nav-link:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  color: var(--primary-color);
}

.search-container,
.search-container1 {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 8px 12px;
  width: 300px;
  max-width: 380px;
  border-radius: 40px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.search-container input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
  color: #555;
}

.search-container input::placeholder {
  color: #999;
}

.search-icon {
  font-size: 18px;
  color: #555;
  cursor: pointer;
}

.mobile-search-container {
  display: none;
}

/* lang drop down */
.lang-dropdown {
  position: relative;
  display: inline-block;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10;
  cursor: pointer;
  font-size: 14px;
}

.lang-btn img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.arrow {
  font-size: 10px;
}

.lang-menu {
  position: absolute;
  top: 110%;
  left: 0;
  width: 120px;
  background: #fff;
  border: 1px solid #ddd;
  list-style: none;
  padding: 5px 0;
  margin: 0;
  display: none;
  z-index: 1000;
}

.lang-menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
}

.lang-menu li:hover {
  background: #f2f2f2;
}

.lang-menu img {
  width: 20px;
}

.menu-container {
  display: none;
}

/* resposive header/navbar */
.menu-container {
  display: none;
}

/* mobile menu */
.mobile-menu {
  display: none;

}

.search-mobile-field {
  display: none;
}

.search-container1 {
  display: none;
}

.mobile-search-field-container {
  display: none;
}

/* responsive header/navbar */
@media screen and (max-width: 1024px) {
  .header-container {
    height: 60px;
  }

  .logo {
    height: 100px;
    width: 100px;
  }

  .nav-links-container {
    display: none !important;
  }

  .search-container {
    display: none;
  }

  .book-btn {
    display: none;
  }

  .lang-btn img {
    width: 30px;
    height: 30px;
  }

  .menu-container {
    display: block;
  }

  .menu-btn {
    background-color: var(--primary-color);
    color: var(--black-color);
    padding: 4px 10px;
    border-radius: 20px;
    border: none;
    outline: none;
    text-transform: capitalize;
  }

  .mobile-menu {
    display: block;
    position: absolute;
    top: 0;
    left: -300px;
    height: 100dvh;
    width: 250px;
    transition: left 0.3s ease-in-out;
    background-color: white;
    z-index: 20;
  }

  .active-menu {
    left: 0;
  }

  .mobile-search-container {
    display: block
  }

  .mobile-search-btn {
    background-color: var(--primary-color);
    color: var(--black-color);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    outline: none;
    border: none;
  }

  .mobile-search-field-container {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--gray-color-1);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .mobile-search-field-container.active {
    transform: translateY(0);
    opacity: 1;
  }

  .mobile-search-field-container form {
    flex: 1;
    display: flex;
    gap: 5px;
  }

  .mobile-search-field-container .search-input {
    flex: 1;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px soli;
    outline: none;
  }

  .mobile-search-field-container .search-btn {
    padding: 5px 12px;
    border-radius: 20px;
    border: none;
    background-color: var(--primary-color);
    color: var(--black-color);
    cursor: pointer;
  }

  /* Close button style */
  .mobile-search-field-container button:first-child {
    background: none;
    border: none;
    cursor: pointer;
  }

  .search-input {
    outline: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
  }

  .search-input::placeholder {
    font-size: 12px !important;
  }

  .search-btn {
    outline: none;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: var(--primary-color);
  }

  .mobile-menu-wrapper {
    padding: 20px 10px;

  }

  .mobile-menu-link li a {
    color: var(--black-color);
    font-weight: 400;
    text-transform: capitalize;
  }
}

/* slider css */
.hero-carousel {
  height: calc(100vh - 200px);
  border-radius: 20px;
  overflow: hidden;
}

.hero-img {
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.1));

  z-index: 1;
}

.carousel-item {
  height: calc(100dvh - 200px);
}


.cta-center {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.cta-center a {
  border-radius: 99px;
}

@media screen and (max-width:767px) {
  .cta-center {
    top: 70%;
  }
}

.social-item {
  position: absolute;
  bottom: 2%;
  right: 2%;
  z-index: 10;
}

/* about us section  */
.about-image {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 12px;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* user */
.user-since {
  background-color: var(--gray-color3);
  border-radius: 99px;
}

.user-since-p {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
}

/* why choose section  */
.why-choose-section {
  background-color: var(--gray-color-2);
}

.why-choose-img-container {
  height: 116px;
  width: 116px;
}

.why-choose-qoute {
  width: 100%;
  max-width: 241px;
  background-color: var(--gray-color3);
  border-radius: 99px;
  box-shadow: 1px 9px 10px 0px rgba(247, 146, 30, 0.75);
  -webkit-box-shadow: 1px 9px 10px 0px rgba(247, 146, 30, 0.75);
  -moz-box-shadow: 1px 9px 10px 0px rgba(247, 146, 30, 0.75);
}

.plane {
  transform: translateY(-250px);
  left: 0;
  z-index: 10;
  position: absolute;
}

.stepped-image-container {
  width: 100%;
  max-width: 100%;
  /* Adjust as needed */
  aspect-ratio: 2 / 1;
  /* Matches the landscape shape */
  background: #f0f0f0;

  /* This links to the SVG ID defined below */
  clip-path: url(#steppedMask);

  /* Basic centering for the demo */
  margin: 50px auto;
}

.stepped-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pr-title {
  position: absolute;
  top: 34%;
  max-width: 360px;

}

.pr-qoute-line {
  position: absolute;
  top: 5%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  left: 40%;
  width: 100%;
  max-width: 200px;
}

.capsule {
  background-color: var(--primary-color);
  border-radius: 99px;
  width: fit-content;

}

.pr-book {
  position: absolute;
  bottom: 10%;
  right: 10%;
}

@media screen and (max-width:1024px) {
  .plane {
    display: none;
  }

  .pr-title {
    top: 8%;
    max-width: 200px;
  }

  .pr-qoute-line {
    transform: translateY(-50px);
    left: 30%;
  }
}

.mobile-personalize {
  display: none;
}

@media screen and (max-width:525px) {

  .personalize-container {
    display: none;
  }

  .mobile-personalize {
    display: block;
  }

  .mobile-pr {
    aspect-ratio: 4/3;
    border-radius: 20px;
    overflow: hidden;
  }
}

.activity-section {
  background-color: var(--gray-color-2);
}

.trekking-image {
  width: 50px;
  height: 50px;
}

.trekking-card-wrapper {
  border: 4px solid var(--primary-color);
  border-radius: 30px !important;
  max-width: 245px !important;
  height: 142px !important;
  background-color: transparent !important;
}

button.trekking-card-wrapper.nav-link.active {
  background-color: rgba(232, 144, 5, 0.2) !important;
}

.tab-image-1 {
  height: 500px;
  width: 100%;
  border-radius: 100px;
  overflow: hidden;
}

.tab-img-2 {
  width: 100%;
  border-radius: 100px 0 0 100px;
  height: 500px;
  overflow: hidden;
}

@media screen and (max-width: 525px) {

  .wrapper-trekking {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }

  .trekking-card-wrapper {
    width: fit-content !important;
    height: fit-content !important;
    white-space: nowrap;
  }

  .tab-image-1,
  .tab-img-2 {
    height: 250px;
    border-radius: 20px !important;
  }

  .trekking-image {
    width: 25px;
    height: 25px;
  }
}

.hide-scroll-bar {
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE & Edge */
}

.hide-scroll-bar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

/* package section */
.package-card {
  width: 100%;
  height: 444px;
}

.package-image-container {
  width: 100%;
  height: 260px;
}

.package-desc {
  background-color: white;
  border-radius: 0 0 10px 10px;
  /* Standard */
  box-shadow: -1px 11px 9px 0px rgba(0, 106, 114, 0.24);

  /* Vendor prefixes for older browsers (optional) */
  -webkit-box-shadow: -1px 11px 9px 0px rgba(0, 106, 114, 0.24);
  -moz-box-shadow: -1px 11px 9px 0px rgba(0, 106, 114, 0.24);

  transition: all 0.3s ease-in;
  height: 184px;
  width: 100%;
}

.package-card:hover .package-desc {
  background: linear-gradient(135deg,
      rgba(232, 144, 5, 0.6) 0%,
      #fff 70%,
      #ffffff 100%);
}

.pkg-price {
  transition: all 0.3s ease-in;
}

.package-card:hover .pkg-price {
  transform: translateY(-30px);
}

.pkg-view {
  display: none;
  transition: all 0.3s ease-in;
}

.package-card:hover .pkg-view {
  display: block;
}

/* instagram section  */
.instagram-section {
  background-color: var(--gray-color-2);
}

/* testimonial section */
.fs-gallery-slider {
  width: 100%;
  position: relative;
}

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

/* --- Slider Item (The Card) --- */
.slider-item {
  background: #FFF9F3;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
  border-radius: 40px;
  display: flex;
  height: 500px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Logic for "Center Peek" - Side items are smaller and faded */
.owl-item {
  opacity: 0.4;
  transform: scale(0.85);
  transition: all 0.5s ease;
}

.owl-item.center {
  opacity: 1;
  transform: scale(1);
}

.item-content {
  flex: 1.2;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item-image {
  flex: 0.8;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* --- The Profile Bubble --- */
.profile-bubble {
  background-color: rgba(213, 205, 205, 0.1);
  padding: 25px 35px;
  border-radius: 40px;
  width: fit-content;
  margin-bottom: 35px;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
  border: 1px solid rgba(0, 0, 0, 0.02);
}


/* --- Navigation Arrows --- */
.fs-slider-arrows {
  list-style: none;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

.fs-slider-arrows li {
  position: absolute;
  background: var(--gray-color3);
  color: white;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0;
  /* Hide text "Previous/Next" */
  pointer-events: auto;
  transition: background 0.3s;
}

/* Position arrows near the edges of the CENTER card */
.fs-slider-arrows li.prev {
  left: calc(50% - 460px);
}

.fs-slider-arrows li.next {
  right: calc(50% - 460px);
}

.fs-slider-arrows li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 18px;
}

.fs-slider-arrows li.prev::before {
  content: "\f060";
}

.fs-slider-arrows li.next::before {
  content: "\f061";
}

/* --- Dots Navigation --- */
.fs-slider-nav {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  padding: 0;
}

.fs-slider-nav li {
  width: 12px;
  height: 12px;
  background: var(--gray-color3);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0;
  transition: all 0.3 ease-in;
}

.fs-slider-nav li.active {
  background: var(--primary-color);
  width: 40px;
  border-radius: 99px;
}

/* --- Loader --- */
.fs-gallery-slider.loading .wrap {
  opacity: 0;
}

.fs-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.fs-gallery-slider.loading .fs-loader {
  display: block;
}

/* Mobile Responsive */
@media (max-width: 1024px) {

  .fs-slider-arrows li.prev {
    left: 10px !important;
  }

  .fs-slider-arrows li.next {
    right: 10px !important;

  }
}

@media (max-width: 525px) {
  .slider-item {
    flex-direction: column-reverse;
    min-width: 80vw;
    min-height: 70dvh;
  }

  .item-image {
    height: 200px;
    width: 200px;
    object-fit: cover;
    object-position: center;
    margin: auto;
    border-radius: 20px;
  }

  .fs-slider-arrows li.prev {
    left: 10px !important;
  }

  .fs-slider-arrows li.next {
    right: 10px !important;

  }
}


/* gallery section */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  /* Base height of each row */
  margin: 0 auto;
}

.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Prevents distortion */
  display: block;
}

/* Grid Item Spans (Desktop) */
.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

/* Spans 2 cols, 2 rows (Top Left) */
.item-2 {
  grid-area: 1 / 3 / 2 / 5;
}

/* Spans 2 cols, 1 row (Top Right) */
.item-3 {
  grid-area: 2 / 3 / 3 / 4;
}

/* Middle center */
.item-4 {
  grid-area: 2 / 4 / 3 / 5;
}

/* Middle right */
.item-5 {
  grid-area: 3 / 1 / 4 / 3;
}

/* Bottom left (Wide) */
.item-6 {
  grid-area: 3 / 3 / 4 / 4;
}

/* Bottom middle */
.item-7 {
  grid-area: 3 / 4 / 4 / 5;
}

/* Bottom right (View More) */

/* View More Overlay */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease;
  cursor: pointer;
}

.gallery-item:hover .overlay {
  background: rgba(255, 255, 255, 0.6);
}

/* --- RESPONSIVENESS --- */

/* Tablet Layout (2 Columns) */
@media (max-width: 900px) {
  .gallery-container {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  /* Reset specific spans to avoid breaking 2-col logic */
  .item-1,
  .item-2,
  .item-3,
  .item-4,
  .item-5,
  .item-6,
  .item-7 {
    grid-area: auto;
  }

  .item-1 {
    grid-column: span 2;
    grid-row: span 2;
  }

  .item-2 {
    grid-column: span 2;
  }

  .item-5 {
    grid-column: span 2;
  }
}

/* Mobile Layout (1 Column) */
@media (max-width: 600px) {
  .gallery-container {
    grid-template-columns: 1fr;
    grid-auto-rows: 250px;
  }

  .item-1,
  .item-2,
  .item-3,
  .item-4,
  .item-5,
  .item-6,
  .item-7 {
    grid-area: auto;
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* affilaition section  */
.affiliation-section {
  background-color: var(--gray-color-2);
}

.affiliation-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
}

.affiliation-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Center circles in columns */
.affiliation-section .col-4,
.affiliation-section .col-md-4,
.affiliation-section .col-lg-3,
.affiliation-section .col-xl-2 {
  display: flex;
  justify-content: center;
}

/* Mobile */
@media (max-width: 525px) {
  .affiliation-image {
    width: 100px;
    height: 100px;
  }
}

/* footer */
.contact-footer {
  height: 40px;
  width: 40px;
}

.icon-box {
  width: 48px;
  height: 48px;
  background: #fff;
  color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-icon {
  cursor: pointer;
  transition: all 0.3s ease-in;
}

.contact-icon:hover .icon-box {
  background-color: var(--primary-color);
  color: white;
}

.footer-logo {
  aspect-ratio: 210px;
  height: auto;
}

.footer-social-link>a {
  border: 1px solid gray;
}

/* news letter */
.email-box {
  width: 100%;
  background: #e7dddd;
  /* light beige background */
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.email-box input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: #333;
  padding-left: 10px;
  flex: 1;
}

.email-box input::placeholder {
  color: #555;
  font-size: 14px;
}

.email-box button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--primary-color);
  /* orange button */
  color: #000;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.email-box button:hover {
  opacity: 0.9;
}

@media screen and (max-width:1024px) {
  .footer-logo {
    width: 200px;
    height: auto;
  }
}

@media screen and (max-width:525px) {
  .footer-logo {
    width: 100px;
    height: auto;
  }
}

/* hero banner */
.hero-banner {
  position: relative;
  width: 100%;
  height: 575px;
  /* This shows through the clipped area */
  border-radius: 40px;
  overflow: hidden;
}

/* 3. The Image Layer with Clip Path */
.hero-banner .image-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;

  /* Link to the SVG path below */
  clip-path: url(#trekkingClip);
  -webkit-clip-path: url(#trekkingClip);
}

/* 4. Text Styling */
.hero-banner .text-container {
  position: absolute;
  bottom: 35px;
  /* Adjust based on your visual preference */
  left: 45px;
  z-index: 1;
  max-width: 150px;
  height: fit-content;
}

/* Hidden SVG definition */
.hero-banner-svg {
  width: 0;
  height: 0;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .hero-banner {
    height: 250px;
  }

  .hero-banner .image-layer {
    clip-path: none;
  }

  .hero-banner .text-container {
    width: 100%;
    left: 50%;
    top: 50%;
    bottom: auto;
    /* IMPORTANT */
    transform: translate(-50%, -50%);
    text-align: center;
    /* optional */
    max-width: 90%;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    width: fit-content;
    padding: 10px;
    margin: 0;
  }
}

/* trekking package section */
.trekking-package-section {
  background-image: url("../assets/images/backround/bg-1.png");
  background-size: cover;
  width: 100%;
  background-repeat: no-repeat;
}

.custom-select {
  color: var(--primary-color);
  border: 1px solid var(--primary-color) !important;
}

.custom-select option:checked,
.custom-select option:selected {
  color: var(--primary-color) !important;
  background-color: rgba(247, 146, 30, 0.1) !important;
}

/* interested container */
.interested-container {
  height: 280px;
  width: 100%;
}

/* destination */
.destination-conatainer-section {
  padding-bottom: 150px;
}

.destination-circle {
  width: 115px;
  height: 115px;
  background-color: var(--gray-color3);
  overflow: hidden;
}

.destinatio-image1 {
  width: 100%;
  max-width: 334px;
  height: 357px;
}

.destinatio-image2 {
  width: 100%;
  max-width: 243px;
  height: 274px;
  position: absolute;
  bottom: -100px;
  right: -100px;
  transform: none;
}

.destination-text1 {
  position: absolute;
  top: 40px;
  right: -100px;
  background-color: var(--gray-color3);
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.destination-text2 {
  position: absolute;
  bottom: -20px;
  left: 30px;
  background-color: var(--gray-color3);
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.__detination__container {
  max-width: 350px;
  height: 400px;
}

@media screen and (max-width:1024px) {
  .__detination {
    margin-bottom: 120px;
  }
}

@media screen and (max-width:767px) {
  .destination-text1 {
    right: 0;
  }

  .destinatio-image2 {
    right: -40px;
    width: 100%;
  }
}

@media screen and (max-width:525px) {
  .__detination__container {
    width: 100%;
  }

  .destinatio-image2 {
    right: 0;
  }
}

/* destination card */
.destination-card {
  height: 400px;
  width: 300px;
  overflow: hidden;
}

.destination-card img {
  transform-origin: center;
  transition: all 0.3s ease-in;

}

.destination-card:hover .destination-card-image {
  transform: scale(1.3);
}

/* grid destination detail */
.destinatio-item-1 {
  height: 608px;
  width: 100%;
}

.destinatio-item-2 {
  height: 419px;
  width: 100%;
}

.destination-overlay {
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 10px;
  transition: all 0.3s ease-in;
}

.destinatio-item:hover .destination-overlay {
  align-items: center;
}

.destination-title {
  transition: all 0.3s ease-in;
}

.destinatio-item:hover .destination-title {
  color: white;
}

.destination-item-image {
  transition: all 0.3s ease-in;
  transform-origin: center;
}

.destinatio-item:hover .destination-item-image {
  transform: scale(1.4);
}


/* about us */
.about-us-wrapper-container {
  width: 500px;
}

.about-us-image-container {
  padding: 10px;
  border: 4px solid rgba(247, 146, 30, 0.2);
  border-radius: 50px;
  width: fit-content;
}

.about-us-image-1 {
  height: 478px;
  width: 344px;
  border-radius: 50px;
  overflow: hidden;

}

.about-us-image-2 {
  height: 361px;
  width: 274px;
  border-radius: 50px;
  overflow: hidden;
}

.about-secondary {
  position: absolute;
  bottom: -250px;
  right: -50px;
}

.history-section {
  min-height: 100dvh;
  margin-bottom: 100px;
}

@media screen and (max-width:1024px) {
  .about-secondary {
    position: static;
  }

  .about-us-wrapper-container {
    align-items: flex-start;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  .history-section {
    margin-bottom: 50px;
  }

  .about-us-image-1,
  .about-us-image-2 {
    width: 100%;
  }
}

/* mission vision card */
.missison-vision-card {
  background-color: var(--gray-color-2);
  border-radius: 50px;
  min-height: 306px;
  width: 100%;
  padding: 20px;
}

/* founder seciton  */
.founder-section {
  background-image: url("../assets/images/backround/bg3.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.founder-desc-image {
  height: 895px;
  width: 100%;
  overflow: hidden;
  border-radius: 50px;
}

@media screen and (max-width:1024px) {
  .founder-desc-image {
    height: 400px;
  }
}

@media screen and (max-width:525px) {
  .founder-desc-image {
    height: 250px;
  }
}

/* team section */
.team-cotianer {
  position: relative;
  min-height: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 8rem;
}

/* Team Image */
.team-image1 {
  width: 12vw;
  max-width: 12rem;
  min-width: 6rem;

  height: 12vw;
  max-height: 12rem;
  min-height: 6rem;

  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  overflow: hidden;
  background-color: #fff;
}


/* Team Description */
.team-desc1 {
  width: 100%;
  max-width: 45rem;
  padding: 2rem 2.5rem;
  border-radius: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--gray-color-2);
  box-shadow: rgba(0, 0, 0, 0.35) 0 0.3rem 1rem;
}

/* Tablet */
@media screen and (max-width: 62em) {
  .team-cotianer {
    padding-left: 7rem;
  }

  .team-image1 {
    width: 10vw;
    height: 10vw;
  }
}

/* Mobile */
@media screen and (max-width: 48em) {
  .team-cotianer {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
    min-height: auto;
  }

  .team-image1 {
    position: relative;
    top: 0;
    left: 0;
    transform: none;

    width: 30vw;
    height: 30vw;

    max-width: 8rem;
    max-height: 8rem;
  }

  .team-desc1 {
    width: 100%;
    border-radius: 1.5rem;
    padding: 1.5rem;
  }
}

/* ethical card */
.ethical-card {
  width: 100%;
  border-radius: 50px;
  box-shadow: 1px 10px 5px 0px rgba(247, 146, 30, 0.75);
  -webkit-box-shadow: 1px 10px 5px 0px rgba(247, 146, 30, 0.75);
  -moz-box-shadow: 1px 10px 5px 0px rgba(247, 146, 30, 0.75);
  padding: 10px 15px;
  min-height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ethical-circle {
  height: 80px;
  width: 80px;
  background-color: rgba(247, 146, 30, 0.2);
}

/* ethical */
.ethical-image {
  aspect-ratio: 4/2.5;
  overflow: hidden;
  border-radius: 30px;
}

/*  */
.section-wrapper {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.image-container {
  position: relative;
  width: 50%;
  z-index: 1;
  overflow: hidden;
  border-radius: 30px;
}

.content-box {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  max-width: 500px;
  background: linear-gradient(135deg, #ff9933 0%, #ff8822 100%);
  border-radius: 40px;
  padding: 30px 10px;
  box-shadow: 0 20px 60px rgba(255, 119, 17, 0.4);
  z-index: 2;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feature-item {
  text-align: center;
}

.icon {
  width: 45px;
  height: 45px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon svg {
  width: 100%;
  height: 100%;
  stroke: #000;
}

/* Tablet */
@media (max-width: 1024px) {
  .content-box {
    width: 55%;
    padding: 50px 40px;
  }

  .image-container {
    width: 65%;
  }

  .content-box h1 {
    font-size: 1.8rem;
  }

  .content-box p {
    font-size: 0.95rem;
  }
}

/* Small Tablet / Large Mobile */
@media (max-width: 768px) {
  .section-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .content-box {
    position: relative;
    width: 100%;
    max-width: 500px;
    transform: none;
    left: auto;
    top: auto;
    margin-bottom: -60px;
    z-index: 2;
    padding: 40px 35px;
  }

  .image-container {
    width: 100%;
    max-width: 600px;
    z-index: 1;
  }

  .content-box h1 {
    font-size: 1.6rem;
  }

  .content-box p {
    font-size: 0.9rem;
    margin-bottom: 35px;
  }

  .features-grid {
    gap: 28px 20px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  body {
    padding: 20px 15px;
  }

  .content-box {
    padding: 30px 25px;
    margin-bottom: -40px;
    border-radius: 30px;
  }

  .content-box h1 {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }

  .content-box p {
    font-size: 0.85rem;
    margin-bottom: 30px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .icon {
    width: 40px;
    height: 40px;
  }

  .feature-item h3 {
    font-size: 0.7rem;
  }

  .image-container img {
    border-radius: 20px;
  }
}

/* about social */
.aboot-social-link {
  width: 62px;
  height: 62px;
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--primary-color);
  color: var(--black-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* contact page */
.contact-icon-page {
  height: 62px;
  width: 62px;
  background-color: var(--gray-color-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-form {
  background-color: var(--gray-color3);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  padding: 30px 20px;
  border-radius: 30px;
}

.contact-input-group {
  width: 90%;
}

.contact-input {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 99px;
  background-color: #E8F0FE;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px,
    rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border: 2px solid transparent;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-input:focus {
  border-color: var(--primary-color);
}

.google-map {
  aspect-ratio: 16/4;
}

.google-map>iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width:1024px) {
  .google-map {
    aspect-ratio: 16/5;
  }
}

@media screen and (max-width:525px) {
  .google-map {
    aspect-ratio: 16/9;
  }
}

.book-form {
  background-image: url("../assets/images/backround/bg4.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5vw;
  border-radius: 50px;
}

/* book page */
.book-input {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 99px;
  background-color: transparent;
  border: 1px solid var(--primary-color);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.book-input::placeholder {
  color: var(--primary-color);
}

.book-input:focus {
  border-color: var(--primary-color);
}

.book-select {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 99px;
  background-color: transparent;
  border: 1px solid var(--primary-color);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  color: var(--primary-color);
  /* ✅ selected text color */
}

.book-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* Placeholder color only */
.book-select option[value=""] {
  color: #999;
}

.date-picker {
  position: relative;
}

.book-input {
  width: 100%;
  padding: 12px 44px 12px 12px;
  color: var(--primary-color);
}

/* Calendar icon */
.calendar-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-color);
  pointer-events: none;
}

/* Native picker indicator hidden but clickable */
.book-input::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Firefox */
.book-input {
  accent-color: var(--primary-color);
}

.check-input {
  width: 30px;
  height: 30px;
  border: 1px solid var(--primary-color);
}

/* accordion */
.accordion-container {
  width: 100%;
}

.accordion-item {
  position: relative;
  padding-left: 30px;
  border-left: 10px solid var(--primary-color);
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  cursor: pointer;
  user-select: none;
}

/* The Orange Sidebar from your image */
.accordion-item.active .orange-bar {
  opacity: 1;
}

.day-title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-main);
}

/* CSS Triangle Icons */
.arrow-icon {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--primary-color);
  transition: transform 0.4s ease;
}

.accordion-item.active .arrow-icon {
  transform: rotate(180deg);
}

/* Expand/Collapse Logic */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.accordion-item.active .accordion-content {
  max-height: 1000px;
  /* High value to allow content to grow */
  transition: max-height 1s ease-in-out;
}

.content-inner {
  padding: 0 0 30px 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 80%;
}

/* package-banner */
.package-banner {
  height: 613px;
}

.package-cta {
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* faqs */
.faqs-container {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.faqs-item {
  border-radius: 50px;
  overflow: hidden;
  transition: all 0.3s ease-in;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  background-color: var(--gray-color-2);
}

.faqs-header {
  width: 100%;
  padding: 30px 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  outline: none;
}


.faqs-icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in;
  flex-shrink: 0;
}

/* Accordion Body Logic */
.faqs-body {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in;
}

.faqs-content {
  padding: 0 45px 35px 45px;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* Active State Styles */
.faqs-item.faqs-active .faqs-body {
  max-height: 300px;
}

.faqs-item.faqs-active .faqs-icon {
  transform: rotate(180deg);
}

/* team page */
.team-page-body {
  background-color: #fdf8f4;
  /* Light beige background from the image */
  font-family: Arial, sans-serif;
}

.team-section {
  padding: 50px 20px;
  display: flex;
  justify-content: center;
}

.team-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two equal columns */
  gap: 20px;
  /* Spacing between images */
  max-width: 1000px;
  width: 100%;
}

.team-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Vertical spacing within columns */
}

.team-item {
  width: 100%;
  overflow: hidden;
}

.team-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  /* Optional: transition for a smoother feel */
  transition: transform 0.3s ease;
}

/* Hover Effect (Optional) */
.team-item img:hover {
  transform: scale(1.02);
}

/* Responsive Design */

/* Tablet view */
@media (max-width: 768px) {
  .team-container {
    gap: 15px;
  }

  .team-column {
    gap: 15px;
  }
}

/* Mobile view - Stack everything in one column */
@media (max-width: 480px) {
  .team-container {
    grid-template-columns: 1fr;
  }

  .team-section {
    padding: 20px 10px;
  }
}

/* team values */
.team-values-circle {
  width: 55vw;
  height: 50vw;
  border: 50px solid var(--primary-color);
  border-radius: 50%;
  position: relative;
  position: absolute;
  left: -120%;
  overflow: hidden;
  top: 0;
}

.team-circle {
  width: 8vw;
  height: 8vw;
  min-width: 100px;
  min-height: 100px;
  border-radius: 50%;
  background-color: var(--primary-color);
}

.team-values-text {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}



@media screen and (max-width:525px) {
  .team-values-circle {
    position: static;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 3px;
  }
}

@media screen and (max-width:1006px) {
  .team-values-circle {
    position: static;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 3px;
  }
}

@media screen and (max-width:1024px) {
  .team-values-circle {
    left: -30%;
  }
}

@media screen and (max-width:1500px) {
  .team-values-circle {
    left: -50%;
  }
}

/* team list */
.team-card-2 {
  width: 100%;
  min-height: 500px;
  overflow: hidden;
  border-radius: 50px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: all 0.3s ease-in;
}

.custom-hr {
  border: none;
  height: 2px;
  background-color: #000;
}

.team-card-2:hover {
  background-color: rgba(247, 146, 30, 0.2);
}

.team-view {
  display: none;
  transition: all 0.3s ease-in;
}

.team-card-2:hover .team-view {
  display: block;
}

.team-icon-card {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  max-width: 300px;
  padding: 20px;
  border-radius: 50px;
  min-height: 150px;
}

.team-banner {
  height: 400px;
}

.team-contact-card {
  width: 100%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  padding: 20px;
  border-radius: 99px;
}

/* blog page */
/* Search Bar Container */
.search-container-blog {
  width: 100%;
  max-width: 800px;
  /* Limits width on desktop */
  background-color: #f4ece4;
  /* Slightly darker cream for the bar */
  border-radius: 50px;
  /* Pill shape */
  padding: 10px 30px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

/* Focus effect */
.search-container-blog:focus-within {
  background-color: var(--gray-color-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Input Styling */
.search-input-blog {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 12px 0;
  font-size: 1.2rem;
  color: var(--primary-color);
  /* Orange text color */
}

/* Placeholder color */
.search-input-blog::placeholder {
  color: var(--primary-color);
  opacity: 0.8;
  font-size: 16px;
}

/* Search Icon Styling */
.search-icon-blog {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--primary-color);
  /* Orange stroke */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: pointer;
  margin-left: 10px;
}


@media screen and (max-width:766px) {
  .search-container-blog {
    padding: 10px;
  }

  .search-input-blog {
    padding: 0 10px;
  }
}

.blog-card {
  border-radius: 50px;
  background-color: var(--gray-color3);
  padding: 30px;
}

.blog-image {
  border-radius: 30px 30px 0 0;
  overflow: hidden;
}

/* pagination */
/* Pagination Container */
.pagination-container {
  display: flex;
  gap: 8px;
  /* Space between boxes */
  flex-wrap: wrap;
  justify-content: end;
}

/* Individual Page Box */
.page-box {
  width: 60px;
  height: 60px;
  background-color: var(--gray-color-2);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--black-color);
  user-select: none;
  transition: opacity 0.2s ease;
}

.page-box:hover {
  opacity: 0.8;
}

/* Active Page State */
.page-box.active {
  background-color: var(--primary-color);
  cursor: default;
}

.page-box.active:hover {
  opacity: 1;
}

/* Ellipsis Box */
.page-box.dots {
  background-color: transparent;
  cursor: default;
}

/* Arrow Icons */
.arrow {
  font-weight: bold;
  font-size: 1.5rem;
}

/* Responsive Adjustments */
@media (max-width: 480px) {
  .page-box {
    font-size: 1rem;
  }

  .pagination-container {
    gap: 5px;
  }
}

/* fqas */
/* Block: faq */
.faq__container {
  width: 100%;
  padding: 10px 0;
  border-radius: 2px;
  height: fit-content;
}

/* Element: item */
.faq__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.faq__item:last-child {
  border-bottom: none;
}

/* Element: button (header) */
.faq__button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: background 0.2s ease;
}

.faq__button:hover {
  background-color: rgba(0, 0, 0, 0.01);
}

/* Element: question text */
.faq__question {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--black-color);
  line-height: 1.4;
  padding-right: 20px;
}

/* Element: icon (+/- logic) */
.faq__icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background-color: #000;
  transition: all 0.3s ease-in;
}

/* Horizontal bar */
.faq__icon::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Vertical bar */
.faq__icon::after {
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* Modifier: Active State */
.faq__item--active .faq__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

/* Element: answer-wrapper (for animation) */
.faq__answer-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in;
}

.faq__item--active .faq__answer-wrapper {
  max-height: 400px;
  /* Adjust based on content length */
}

/* Element: answer-content */
.faq__answer {
  padding: 0 40px 30px 40px;
  color: var(--black-color);
  line-height: 1.6;
  font-size: 0.98rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .faq__button {
    padding: 20px;
  }

  .faq__question {
    font-size: 1rem;
  }

  .faq__answer {
    padding: 0 20px 20px 20px;
    font-size: 0.92rem;
  }
}

.prefix-faqs-wrapper {
  position: relative;
  width: 90%;
  max-width: 500px;
}

/* The element that creates the shape */
.prefix-faqs-image-shape {
  width: 100%;
  aspect-ratio: 4 / 5;

  background-size: cover;
  background-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125'%3E%3Cpath d='M 0,15 A 15,15 0 0 1 15,0 H 85 A 15,15 0 0 1 100,15 V 110 A 15,15 0 0 1 85,125 H 65 A 15,15 0 0 1 50,110 V 90 A 15,15 0 0 0 35,75 H 15 A 15,15 0 0 1 0,60 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125'%3E%3Cpath d='M 0,15 A 15,15 0 0 1 15,0 H 85 A 15,15 0 0 1 100,15 V 110 A 15,15 0 0 1 85,125 H 65 A 15,15 0 0 1 50,110 V 90 A 15,15 0 0 0 35,75 H 15 A 15,15 0 0 1 0,60 Z' fill='black'/%3E%3C/svg%3E");

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  transition: transform 0.3s ease;
}

.prefix-faqs-image-shape:hover {
  transform: scale(1.02);
}

.faqs-image {
  width: 11vw;
  min-width: 130px;
  height: 11vw;
  min-height: 130px;
  border-radius: 30px;
}

@media screen and (max-width:1024px) {
  .faqs-image {
    width: 28vw;
    height: 28vw;
  }
}


/* inquiry form */
.inquiry-form {
  background-color: rgba(254, 198, 183, 0.3);
  border-radius: 50px;
  padding: 30px;
}

.inquire-input {
  padding: 10px 20px;
  border-radius: 99px;
  border: 1px solid var(--primary-color);
  outline: none;
}

.inquire-input::placeholder {
  color: var(--primary-color);
}

.inquire-input:focus {
  outline: 1px solid var(--primary-color);
}

.package-select {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 99px;
  border: 1px solid var(--primary-color);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  color: var(--primary-color);
  /* ✅ selected text color */
}

.package-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* Placeholder color only */
.package-select option[value=""] {
  color: #999;
}

.inquiry-gallery-wrapper {
  max-width: 900px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  /* FIX: uniform grid rows so span works correctly */
  grid-auto-rows: 30px;

  gap: 0;
}

/* White card */
.inquiry-photo-card {
  background: white;
  padding: 15px;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 1;

  /* FIX: prevents height collapse */
  aspect-ratio: 4 / 3;
}

/* Hover effect */
.inquiry-photo-card:hover {
  transform: translateY(-5px) scale(1.01);
  z-index: 10;
}

/* TOP image */
.inquiry-item-top {
  grid-column: 1 / span 7;
  grid-row: 1 / span 8;
}

/* MIDDLE image (overlapping) */
.inquiry-item-middle {
  grid-column: 5 / span 8;
  grid-row: 6 / span 10;
  z-index: 2;
}

/* BOTTOM image (overlapping) */
.inquiry-item-bottom {
  grid-column: 2 / span 7;
  grid-row: 15 / span 8;
  z-index: 3;
}

/* ---------------------------
   RESPONSIVE (Tablet & Mobile)
---------------------------- */
@media (max-width: 768px) {
  .inquire-container {
    display: none;
  }

  .inquire-form-container {
    margin: 0px 0 !important;
  }
}

@media (max-width: 1024px) {
  .inquire-form-container {
    margin: 150px 0;
  }
}

/*  testimonial page */
.user-testimonial-card {
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  background-color: white !important;
}

.user-testimonial-info-card {
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  padding: 20px 30px;
  width: 70%;
  border-radius: 99px;
  width: 70%;
}

/* plan my trip */

#multiStepForm {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
    url("../assets/images/backround/bg-5.jpg");
  background-size: cover;
  border-radius: 40px;
  max-width: 1000px;
  margin: auto;
  padding: 30px;
}

.plan-my-trip-title {
  text-align: center;
  color: var(--primary-color);
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 40px;
}

.plan-my-trip-step {
  display: none;
}

.plan-my-trip-step.active {
  display: block;
}

.plan-my-trip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.plan-my-trip-group {
  display: flex;
  flex-column: column;
  flex-direction: column;
  gap: 8px;
}

.plan-my-trip-label {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 1.1rem;
}

.plan-my-trip-input,
.plan-my-trip-select,
.plan-my-trip-textarea {
  padding: 12px 20px;
  border: 2px solid var(--primary-color);
  border-radius: 25px;
  background: white;
  font-size: 1rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.plan-my-trip-textarea {
  border-radius: 15px;
  resize: none;
  height: 120px;
}

.plan-my-trip-error {
  color: red;
  font-size: 0.85rem;
  height: 15px;
  margin-left: 15px;
}

.plan-my-trip-footer {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.plan-my-trip-btn {
  background: var(--primary-color);
  color: black;
  border: none;
  padding: 12px 45px;
  border-radius: 15px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.2s, background 0.2s;
}

.plan-my-trip-btn:hover {
  background: #e67e00;
  transform: translateY(-2px);
}

.plan-my-trip-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Full width for comments */
.plan-my-trip-full-width {
  grid-column: span 2;
}

@media (max-width: 768px) {
  #multiStepForm {
    padding: 30px 20px !important;
    border-radius: 10px !important;
  }

  .plan-my-trip-grid {
    grid-template-columns: 1fr;
  }

  .plan-my-trip-full-width {
    grid-column: span 1;
  }
}

/* gallery */
.gallery-image {
  overflow: hidden;
}

.gallery-image img {
  transition: all 0.3s ease-in;
  transform-origin: center;
}

.gallery-image:hover img {
  transform: scale(1.3);
}

/*  useful info */

.useful-info-container {
  width: 100%;
  margin: 0 auto;
}

/* Tabs Navigation */
.useful-info-tabs-nav {
  display: flex;
  gap: 15px;
  flex-wrap: nowrap;
  overflow-x: scroll;
  margin-bottom: 60px;
  white-space: nowrap;
}

.useful-info-tab-btn {
  background: white;
  border: 1px solid var(--primary-color);
  padding: 14px 30px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
 width: fit-content;
  text-align: center;
}

.useful-info-tab-btn:hover {
  background-color: #f0f0f0;
}

.useful-info-tab-btn.useful-info-active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* Content Sections */
.useful-info-tab-panel {
  display: none;
  /* Hidden by default */
  animation: usefulInfoFadeIn 0.5s ease forwards;
}

.useful-info-tab-panel.useful-info-active {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 50px;
  align-items: start;
}

.useful-info-content-title {
  color: var(--primary-color);
  font-size: 32px;
  margin-bottom: 25px;
  font-weight: 600;
}

.useful-info-text-area p {
  line-height: 1.7;
  margin-bottom: 18px;
  font-size: 16px;
  color: #333;
}

.useful-info-image-area img {
  aspect-ratio: 3/4;
  width: 100%;
  border-radius: 4px;
  display: block;
}

/* Animation */
@keyframes usefulInfoFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 992px) {
  .useful-info-tab-panel.useful-info-active {
    grid-template-columns: 1fr;
  }

  .useful-info-image-area {
    order: -1;
    /* Image on top for mobile */
    max-width: 500px;
    margin: 0 auto;
  }

  .useful-info-content-title {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .useful-info-tab-btn {
    width: 100%;
  }
}