/* ===================================================
   PHP site overrides — header, mobile nav, misc fixes
   =================================================== */

/* ── Top Bar ─────────────────────────────────────── */
.header-top-area {
  background: #fff;
  border-bottom: 1px solid rgba(29,35,31,.08);
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Info item spacing on the right side */
.me-55 { margin-right: 30px !important; }

/* single-info-item-two icon colours */
.single-info-item-two .icon,
.single-info-item-two .icon i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--secondary-color) !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: 0 0 auto;
}

/* Title label above the value */
.single-info-item-two .info span.title {
  display: block;
  font-size: 11px;
  line-height: 16px;
  color: #888;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.single-info-item-two .info h5 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #1c231f;
}
.single-info-item-two .info h5 a {
  color: #1c231f;
  text-decoration: none;
}
.single-info-item-two .info h5 a:hover {
  color: var(--secondary-color);
}
.single-info-item-two .info .ms-3 {
  margin-left: 10px !important;
}

/* ── Navigation Bar ──────────────────────────────── */
.header-navigation-area {
  position: relative;
  z-index: 100;
}

/* .primary-menu.black-bg creates the dark nav bar */
.header-navigation {
  width: 100%;
}
.primary-menu {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 32px;
  border-radius: 12px;
  position: relative;
  z-index: 4;
  margin-bottom: -45px;
}
/* Responsive: remove the negative margin on small screens */
@media (max-width: 1199px) {
  .primary-menu {
    padding: 15px;
    margin-bottom: 0;
    border-radius: 0;
  }
}

/* Nav links (white text on dark bar) */
.primary-menu.black-bg .main-menu > li > a {
  color: #fff !important;
  font: 500 18px "Prompt", sans-serif;
  padding: 22px 0;
  display: block;
  text-transform: capitalize;
}
.primary-menu.black-bg .main-menu > li > a:hover,
.primary-menu.black-bg .main-menu > li.active > a {
  color: var(--secondary-color, #f7921e) !important;
}
.main-menu {
  display: flex !important;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}
.main-menu > li {
  display: inline-block !important;
  position: relative;
  margin: 0 10px;
}

/* ── Sticky Header ───────────────────────────────── */
.header-navigation-area.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  animation: stickySlide 0.4s ease;
}
.header-navigation-area.sticky .primary-menu {
  border-radius: 0;
  margin-bottom: 0;
}
@keyframes stickySlide {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* ── Navbar Toggler (mobile hamburger) ───────────── */
.navbar-toggler {
  background: none;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.navbar-toggler span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: .3s;
}
/* On top-bar, toggler uses dark spans */
.header-top-area .navbar-toggler {
  border-color: rgba(29,35,31,.3);
}
.header-top-area .navbar-toggler span {
  background: #1c231f;
}

/* ── Mobile Slide Nav ────────────────────────────── */
.body-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.body-overlay.active {
  opacity: 1;
  visibility: visible;
}
.mobile-slide-nav {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  padding: 40px 30px;
  transition: left .35s ease;
  overflow-y: auto;
  box-shadow: 3px 0 20px rgba(0,0,0,.15);
}
.mobile-slide-nav.open { left: 0; }
.nav-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #1c231f;
}
.mobile-menu {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.mobile-menu li {
  border-bottom: 1px solid #f0f0f0;
}
.mobile-menu li a {
  display: block;
  padding: 13px 0;
  color: #1c231f;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: color .2s;
}
.mobile-menu li a:hover { color: var(--secondary-color, #f7921e); }
.mobile-logo img { max-height: 65px; width: auto; }
.mt-30 { margin-top: 30px !important; }
.mb-30 { margin-bottom: 30px !important; }
.ms-2  { margin-left: 8px !important; }

/* ── Header Logo ─────────────────────────────────── */
.header-logo img { max-height: 70px; width: auto; }

/* ── Page Banner & Title ─────────────────────────── */
.page-banner {
  position: relative;
  background-size: cover;
  background-position: center;
}
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 100%);
  z-index: 0;
}
.page-banner .container { position: relative; z-index: 1; }
.page-title {
  color: #fff !important;
  font-size: 48px;
  font-weight: 800;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  line-height: 1.2;
}
@media (max-width: 768px) {
  .page-title { font-size: 32px; }
}

/* ── Breadcrumb ──────────────────────────────────── */
.breadcrumb {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,.8);
  font-size: 14px;
  margin-bottom: 10px;
  background: none;
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: 8px;
  opacity: .6;
}
.breadcrumb a { color: rgba(255,255,255,.8); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }

/* ── Gallery slider ──────────────────────────────── */
.single-gallery-item { position: relative; overflow: hidden; height: 300px; }
.single-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.single-gallery-item .img-popup { display: block; height: 100%; }

/* ── Activity tabs ───────────────────────────────── */
.activity-nav-tab .nav-tabs { border-bottom: none; }

/* Parent has Bootstrap text-white which forces color:#fff !important on children,
   making light-grey tab buttons show white-on-white (invisible).
   Re-apply dark text for inactive tabs, white for active (orange) tab. */
.activity-nav-tab .nav-tabs li a,
.activity-nav-tab .nav-tabs li .nav-link {
  color: #1c231f !important;
  transition: color .2s, background .2s;
}
.activity-nav-tab .nav-tabs li a:hover,
.activity-nav-tab .nav-tabs li .nav-link:hover {
  color: var(--secondary-color, #f7921e) !important;
}
.activity-nav-tab .nav-tabs li a.active,
.activity-nav-tab .nav-tabs li .nav-link.active {
  color: #fff !important;
}

/* ── Sidebar info list ───────────────────────────── */
.sidebar-widget-area .info-list {
  list-style: none; padding: 0; margin: 0;
}
.sidebar-widget-area .info-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

/* ── Blog thumbnails ─────────────────────────────── */
.single-blog-post-four .post-thumbnail img,
.single-blog-post .post-thumbnail img {
  width: 100%; height: 250px; object-fit: cover;
}

/* ── Contact info icons ──────────────────────────── */
.contact-info-item .icon { font-size: 36px; color: var(--secondary-color, #f7921e); margin-bottom: 15px; }
.contact-info-item h4 { margin-bottom: 10px; }

/* ── Map ─────────────────────────────────────────── */
.map-box { border-radius: 8px; overflow: hidden; }

/* ── Itinerary Modal (redesigned) ────────────────── */
#itineraryModal .modal-dialog { max-width: 860px; }

.itin-modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.itin-close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 10;
  background: rgba(255,255,255,.15);
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.itin-close:hover { background: rgba(255,255,255,.3); }

.itin-layout {
  display: flex;
  min-height: 520px;
}

/* Sidebar */
.itin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #1c231f;
  padding: 36px 24px 36px 28px;
  display: flex;
  flex-direction: column;
}
.itin-step-list {
  list-style: none;
  padding: 0; margin: 0;
  flex: 1;
}
.itin-step-item {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: default;
  padding: 4px 0;
}
.itin-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
  transition: .3s;
}
.itin-step-item.active .itin-step-num {
  background: var(--secondary-color, #f7921e);
  border-color: var(--secondary-color, #f7921e);
  color: #fff;
}
.itin-step-item.done .itin-step-num {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.7);
}
.itin-step-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.35);
  transition: color .3s;
}
.itin-step-item.active .itin-step-label { color: #fff; }
.itin-step-item.done .itin-step-label { color: rgba(255,255,255,.6); }
.itin-step-line {
  width: 2px; height: 22px;
  background: rgba(255,255,255,.12);
  margin-left: 15px;
  list-style: none;
}

/* Content panel */
.itin-body {
  flex: 1;
  overflow: hidden;
}
.itin-step-panel { height: 100%; }
.itin-step-content {
  padding: 48px 44px;
}
.itin-heading {
  font-size: 30px;
  font-weight: 800;
  color: #1c231f;
  line-height: 1.25;
  margin-bottom: 14px;
}
.itin-step-title {
  font-size: 20px;
  font-weight: 700;
  color: #1c231f;
  margin-bottom: 6px;
}
.itin-icon { color: var(--secondary-color, #f7921e); margin-right: 8px; }
.itin-sub { color: #666; font-size: 15px; line-height: 1.6; margin-bottom: 0; }

/* Form inputs */
.itin-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.itin-input-wrap {
  position: relative;
}
.itin-input-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #aaa; font-size: 14px;
  pointer-events: none;
}
.itin-input {
  width: 100%;
  height: 48px;
  border: 1.5px solid #e2e2e2;
  border-radius: 8px;
  padding: 0 14px 0 38px;
  font-size: 14px;
  color: #1c231f;
  background: #fafafa;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
.itin-input:focus {
  outline: none;
  border-color: var(--secondary-color, #f7921e);
  box-shadow: 0 0 0 3px rgba(247,146,30,.12);
  background: #fff;
}
.itin-textarea {
  height: auto !important;
  padding-top: 12px;
  padding-left: 38px;
  resize: vertical;
}

/* Counter */
.itin-counter {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid #e2e2e2;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
  width: fit-content;
}
.itin-counter-btn {
  width: 44px; height: 48px;
  background: #f0f0f0;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #444;
  transition: background .2s;
  line-height: 1;
}
.itin-counter-btn:hover { background: var(--secondary-color, #f7921e); color: #fff; }
.itin-counter-val {
  width: 64px; height: 48px;
  border: none;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  background: transparent;
  color: #1c231f;
}
.itin-counter-val::-webkit-inner-spin-button,
.itin-counter-val::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Nav buttons */
.itin-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
}
.itin-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--secondary-color, #f7921e);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.itin-btn-primary:hover { background: #d97a15; color: #fff; transform: translateY(-1px); }
.itin-btn-icon {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.itin-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid #ddd;
  border-radius: 50px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.itin-btn-back:hover { border-color: #999; color: #1c231f; }

/* Success screen */
.itin-success-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: #e8f5e9;
  color: #43a047;
  font-size: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 680px) {
  .itin-sidebar { display: none; }
  .itin-step-content { padding: 32px 24px; }
  .itin-heading { font-size: 22px; }
  #itineraryModal .modal-dialog { max-width: 100%; margin: 10px; }
}

/* ── How We Work — Feature Cards ────────────────── */
.feat-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 420px;
  display: block;
}
.feat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.feat-card:hover img {
  transform: scale(1.05);
}
.feat-card-body {
  position: absolute;
  bottom: 24px;
  left: 20px;
  background: #fff;
  border-radius: 10px;
  padding: 18px 22px 20px;
  max-width: calc(100% - 40px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.feat-line {
  display: block;
  width: 38px;
  height: 3px;
  background: var(--secondary-color, #f7921e);
  border-radius: 2px;
  margin-bottom: 12px;
}
.feat-card-body h3 {
  font-size: 20px;
  font-weight: 800;
  color: #1c231f;
  margin: 0;
  line-height: 1.25;
}
@media (max-width: 991px) {
  .feat-card { height: 360px; }
}
@media (max-width: 576px) {
  .feat-card { height: 300px; }
  .feat-card-body h3 { font-size: 17px; }
}

/* ── Fancy icon box (destination features) ───────── */
.fancy-icon-box-two { padding: 20px; border: 1px solid #f0f0f0; border-radius: 8px; height: 100%; }
.fancy-icon-box-two .title { font-size: 16px; margin-bottom: 8px; }
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Utility classes ─────────────────────────────── */
.p-30  { padding: 30px; }
.me-3  { margin-right: 12px !important; }
.gap-2 { gap: 8px !important; }