/*
=======================================================
  DISCOVER INDIA VACATIONS — Unified Stylesheet
  style.css  |  v1.0  |  2025
=======================================================
  Covers:
    • Tour Itinerary pages
    • Destination / Travel Tips pages
    • Pilgrimage / Yatra pages
    • Shared: Navbar, Banner, Breadcrumb, Footer,
              Sidebar, Accordion, Tables, Info Boxes,
              Do/Don't, Season Cards, Tip Cards,
              Highlights, FAQ, Shopping Grid,
              Permit Cards, Responsive
=======================================================
  Page-level theme colours are applied via a
  data attribute on <html> or <body>:
    data-theme="default"   → deep red/saffron (itinerary)
    data-theme="kashmir"   → forest green
    data-theme="ladakh"    → cobalt blue
    data-theme="pilgrim"   → burnt saffron / sacred red

  Usage in HTML:
    <html lang="en" data-theme="ladakh">

  If no data-theme is set, the default (red) is used.
=======================================================
*/


/* =====================================================
   1. THEME TOKENS  (CSS Custom Properties)
===================================================== */

/* ── Default / Tour Itinerary (deep red) ── */
:root,
[data-theme="default"] {
  --primary:        #c0392b;
  --primary-dark:   #96281b;
  --primary-light:  #f9eae8;
  --accent:         #e67e22;
  --accent-gold:    #d4ac0d;
  --navbar-bg:      #1a1a2e;
  --footer-bg:      #12122a;
  --cta-end:        #6b1212;
  --text-dark:      #1a1a2e;
  --text-mid:       #4a4a6a;
  --text-muted:     #888;
  --bg-light:       #f8f7f4;
  --bg-white:       #ffffff;
  --border:         #e8e4de;
  --shadow:         0 4px 20px rgba(0,0,0,0.08);
  --radius:         8px;
  --font-heading:   'Poppins', sans-serif;
  --font-body:      'Poppins', sans-serif;
}

/* ── Kashmir / Destination (forest green) ── */
[data-theme="kashmir"] {
  --primary:        #1a6b4a;
  --primary-dark:   #124d35;
  --primary-light:  #eaf5ef;
  --accent:         #c0392b;
  --accent-gold:    #d4ac0d;
  --navbar-bg:      #0d2b1e;
  --footer-bg:      #0d2b1e;
  --cta-end:        #0e4d31;
  --text-dark:      #12201a;
  --text-mid:       #3a4f42;
  --text-muted:     #7a8f82;
  --bg-light:       #f5faf7;
  --bg-white:       #ffffff;
  --border:         #d8ebe0;
  --shadow:         0 4px 20px rgba(0,0,0,0.08);
  --radius:         8px;
}

/* ── Ladakh / Travel Tips (cobalt blue) ── */
[data-theme="ladakh"] {
  --primary:        #1a4b8c;
  --primary-dark:   #0f3063;
  --primary-light:  #eaf0fb;
  --accent:         #c0392b;
  --accent-gold:    #d4ac0d;
  --navbar-bg:      #0b1e38;
  --footer-bg:      #0b1e38;
  --cta-end:        #0f3063;
  --text-dark:      #111827;
  --text-mid:       #374151;
  --text-muted:     #6b7280;
  --bg-light:       #f4f7fc;
  --bg-white:       #ffffff;
  --border:         #d1dce8;
  --shadow:         0 4px 20px rgba(0,0,0,0.08);
  --radius:         8px;
}

/* ── Pilgrimage / Yatra (saffron red) ── */
[data-theme="pilgrim"] {
  --primary:        #b5451b;
  --primary-dark:   #8c3214;
  --primary-light:  #fdf0eb;
  --accent:         #e8a020;
  --accent-gold:    #e8a020;
  --navbar-bg:      #1c1205;
  --footer-bg:      #1c1205;
  --cta-end:        #6b2a0a;
  --text-dark:      #1c1205;
  --text-mid:       #4a3f2f;
  --text-muted:     #8d7f6f;
  --bg-light:       #faf8f4;
  --bg-white:       #ffffff;
  --border:         #ede5d8;
  --shadow:         0 4px 20px rgba(0,0,0,0.08);
  --radius:         8px;
}


/* =====================================================
   2. BASE RESET & TYPOGRAPHY
===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-dark);
  background: var(--bg-white);
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-dark);
}

a { color: var(--primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; }


/* =====================================================
   3. SCROLL-TO-TOP BUTTON
===================================================== */
.progress-wrap {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 42px; height: 42px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary);
  border-radius: 50%;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  opacity: 0;
  transition: opacity .3s;
}
.progress-wrap.active-progress { opacity: 1; }
.progress-wrap i { color: #fff; font-size: 18px; }


/* =====================================================
   4. NAVBAR
===================================================== 
.navbar {
  background: var(--navbar-bg);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.navbar .container { height: 68px; }

.logo-text { font-family: var(--font-heading); color: #fff; font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.logo-text span { color: #f0c040; }

.navbar-nav .nav-link {
  color: rgba(255,255,255,.8) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px !important;
  letter-spacing: .3px;
  transition: color .2s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active-link { color: #fff !important; }

.navbar-toggler { border-color: rgba(255,255,255,.3); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* =====================================================
   5. BANNER HEADER
===================================================== 
.banner-header {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 60px 0 52px;
}
/* Background image is set inline or via per-page class 
.banner-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.1) 100%);
}
.banner-header .container { position: relative; z-index: 1; }

.banner-header h5 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #f0c040;
  margin-bottom: 12px;
}
.banner-header h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.12;
}
.banner-header .banner-subtitle,
.banner-header .date-comment span {
  color: rgba(255,255,255,.78);
  font-size: 14px;
  letter-spacing: .8px;
}
.banner-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.banner-badge {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 50px;
  display: flex; align-items: center; gap: 6px;
}
.banner-badge i { color: #f0c040; }


/* =====================================================
   6. BREADCRUMB  (sits below the banner)
===================================================== 
.breadcrumb-wrap {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  padding: 10px 0;
}
.breadcrumb-wrap .breadcrumb { margin: 0; background: transparent; padding: 0; font-size: 13px; }
.breadcrumb-item a { color: var(--primary); }
.breadcrumb-item.active { color: var(--text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }


/* =====================================================
   7. SECTION / LAYOUT
===================================================== */
.section-padding { padding: 70px 0; }

.services-details__content h3 {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}
.services-details__content h5 {
  font-size: 1.05rem;
  color: var(--text-mid);
  font-family: var(--font-body);
  font-weight: 500;
  margin-bottom: 16px;
}
.services-details__content p {
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 16px;
}
.text-justify { text-align: justify; }


/* =====================================================
   8. COMMON BADGE LIST  (itinerary top bar)
===================================================== */
.common-list { margin-bottom: 28px; }
.common-list ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.common-list ul li {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  display: flex; align-items: center; gap: 8px;
}
.common-list ul li i { color: var(--primary); }


/* =====================================================
   9. ROUTE TRAIL  (itinerary pages)
===================================================== */
.route-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  padding: 14px 18px;
  background: var(--bg-light);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.rt-stop {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 13px;
  border-radius: 50px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.rt-nights {
  font-size: 10px;
  background: rgba(0,0,0,.10);
  border-radius: 10px;
  padding: 1px 6px;
  font-weight: 500;
}
.rt-arr { color: var(--text-muted); font-size: 14px; }

/* Route stop colour classes */
.c-leh     { background: #E6F1FB; color: #0C447C; }
.c-nubra   { background: #FAEEDA; color: #633806; }
.c-turtuk  { background: #fff3e0; color: #7b3f00; }
.c-pang    { background: #FAECE7; color: #993C1D; }
.c-mono    { background: #E1F5EE; color: #085041; }
.c-tso     { background: #E1F5EE; color: #085041; }
.c-shiv    { background: #f3e5f5; color: #4a148c; }
.c-patn    { background: #e8f5e9; color: #1b5e20; }
.c-srg     { background: #e8f4fd; color: #1a5276; }
.c-hlp     { background: #e8f8f5; color: #0e6655; }
.c-cave    { background: #fdf2e9; color: #784212; }
.c-heli    { background: #fff3cd; color: #7b3f00; }
.c-jammu   { background: #fce4ec; color: #880e4f; }
.c-katra   { background: #fff3e0; color: #7b3f00; }
.c-bhairon { background: #f3e5f5; color: #4a148c; }
.c-dep     { background: #f1efeb; color: #555; }


/* =====================================================
   10. PAGE HIGHLIGHTS LIST
===================================================== */
.page-list { list-style: none; padding: 0; }
.page-list li {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: var(--bg-light);
  border-radius: var(--radius);
  border-left: 3px solid var(--primary);
}
.page-list-icon { color: var(--primary); margin-top: 2px; font-size: 14px; flex-shrink: 0; }
.page-list-text p { margin: 0; font-size: 14px; color: var(--text-mid); }


/* =====================================================
   11. DAY ACCORDION  (itinerary)
===================================================== */
.accordion-box { list-style: none; padding: 0; }
.accordion-box .accordion.block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.accordion-box .accordion.block:hover { box-shadow: var(--shadow); }

.acc-btn {
  padding: 15px 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--bg-white);
  user-select: none;
  gap: 10px;
  transition: background .2s;
  flex-wrap: wrap;
}
.acc-btn:hover { background: var(--bg-light); }
.acc-btn.active { background: var(--primary); color: #fff; }
.acc-btn .icon { font-size: 13px; flex-shrink: 0; transition: transform .3s; margin-left: auto; }
.acc-btn.active .icon { transform: rotate(45deg); }
.acc-btn .day-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; opacity: .65; flex-shrink: 0; min-width: 44px;
}
.acc-btn.active .day-label { opacity: .85; }
.acc-btn .day-loc-badge {
  font-size: 11px; font-weight: 600;
  padding: 2px 10px; border-radius: 50px;
  white-space: nowrap; flex-shrink: 0;
}

.acc-content { display: none; }
.acc-content.current { display: block; }
.acc-content .content {
  padding: 18px 20px 20px;
  background: var(--bg-light);
  border-top: 1px solid var(--border);
}
.acc-content .text {
  font-size: 14.5px; line-height: 1.85;
  color: var(--text-mid); margin-bottom: 14px;
}
.acc-content .text p { margin-bottom: 12px; color: var(--text-mid); font-size: 14.5px; }
.acc-content .text p:last-child { margin-bottom: 0; }

/* Sub-section heading inside accordion (Vaishno Devi / Shivkhori pages) */
.sight-heading {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--primary);
  margin: 14px 0 6px;
  display: flex; align-items: center; gap: 8px;
}
.sight-heading i { font-size: 14px; }

.dayattr {
  font-size: 13px;
  color: var(--text-muted) !important;
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 14px; margin-top: 4px;
}
.dayattr i { color: var(--primary); }


/* =====================================================
   12. NOTE / ALERT BOXES  (inside day accordion)
===================================================== */
.day-note {
  background: #fff8e1;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 13.5px;
  color: #5d4037;
}
.day-note i { color: var(--accent); margin-right: 6px; }
.day-note-red { background: #fdecea; border-left-color: var(--primary); }
.day-note-red i { color: var(--primary); }
.day-note-green { background: #e8f5e9; border-left-color: #27ae60; }
.day-note-green i { color: #27ae60; }
.day-note-purple { background: #f3e5f5; border-left-color: #8e24aa; }
.day-note-purple i { color: #8e24aa; }


/* =====================================================
   13. INFO BOXES  (travel tips / destination pages)
===================================================== */
.info-box {
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 16px 0;
  border: 1px solid;
}
.info-box.green  { background: #f0fdf4; border-color: #86efac; }
.info-box.amber  { background: #fffbeb; border-color: #fcd34d; }
.info-box.blue   { background: #eff6ff; border-color: #93c5fd; }
.info-box.red    { background: #fef2f2; border-color: #fca5a5; }
.info-box.purple { background: #f5f3ff; border-color: #c4b5fd; }
.info-box.slate  { background: #f8fafc; border-color: #cbd5e1; }

.info-box h6 {
  font-family: var(--font-heading);
  font-size: 14.5px;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.info-box.green  h6 { color: #15803d; }
.info-box.amber  h6 { color: #b45309; }
.info-box.blue   h6 { color: #1d4ed8; }
.info-box.red    h6 { color: #b91c1c; }
.info-box.purple h6 { color: #6d28d9; }
.info-box.slate  h6 { color: #334155; }

.info-box p, .info-box > ul { font-size: 13.5px; color: var(--text-mid); margin: 0; line-height: 1.7; }
.info-box ul { list-style: none; padding: 0; }
.info-box ul li { padding: 3px 0; display: flex; align-items: flex-start; gap: 8px; }
.info-box ul li::before { content: '→'; color: var(--primary); flex-shrink: 0; margin-top: 1px; font-size: 12px; }


/* =====================================================
   14. SPIRITUAL & NATURE BOXES  (Yatra pages)
===================================================== */
.spiritual-box {
  background: linear-gradient(135deg, #fff8e1 0%, #fdf3e3 100%);
  border: 1px solid #f0c040;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 20px 0;
}
.spiritual-box h6 {
  font-family: var(--font-heading);
  font-size: 15px;
  color: #7b4f00;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.spiritual-box p { font-size: 14px; color: #6d4c00; margin: 0; line-height: 1.75; }

.nature-box {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  border: 1px solid #a5d6a7;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 20px 0;
}
.nature-box h6 {
  font-family: var(--font-heading);
  font-size: 15px;
  color: #1b5e20;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.nature-box p { font-size: 14px; color: #2e7d32; margin: 0; line-height: 1.75; }


/* =====================================================
   15. ALTITUDE STRIP  (Ladakh tips page)
===================================================== */
.altitude-strip {
  background: linear-gradient(135deg, #1a4b8c 0%, #0f3063 100%);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 20px 0;
  color: #fff;
}
.altitude-strip h5 {
  font-family: var(--font-heading);
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.altitude-strip p { font-size: 14px; color: rgba(255,255,255,.85); margin-bottom: 0; line-height: 1.75; }
.altitude-strip ul {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.altitude-strip ul li { font-size: 13px; color: rgba(255,255,255,.85); display: flex; align-items: flex-start; gap: 8px; }
.altitude-strip ul li i { color: #f0c040; flex-shrink: 0; margin-top: 3px; }


/* =====================================================
   16. AMS SYMPTOM CARDS  (Ladakh tips page)
===================================================== */
.ams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.ams-card { border-radius: var(--radius); padding: 14px 16px; border: 1px solid; }
.ams-mild   { background: #fffbeb; border-color: #fcd34d; }
.ams-severe { background: #fef2f2; border-color: #fca5a5; }
.ams-mild h6   { color: #b45309; font-family: var(--font-heading); font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ams-severe h6 { color: #b91c1c; font-family: var(--font-heading); font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ams-card ul { list-style: none; padding: 0; margin: 0; }
.ams-card ul li { font-size: 13px; color: var(--text-mid); padding: 3px 0; display: flex; align-items: center; gap: 8px; }
.ams-card ul li i { font-size: 11px; flex-shrink: 0; }
.ams-mild   ul li i { color: #b45309; }
.ams-severe ul li i { color: #b91c1c; }


/* =====================================================
   17. QUICK FACTS GRID  (tips pages)
===================================================== */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.fact-tile {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 14px;
  text-align: center;
}
.fact-tile i { font-size: 22px; color: var(--primary); display: block; margin-bottom: 8px; }
.fact-tile .ft-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; }
.fact-tile .ft-val { font-size: 13px; font-weight: 600; color: var(--text-dark); line-height: 1.4; }


/* =====================================================
   18. SEASON CARDS  (tips pages)
===================================================== */
.season-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0; }
.season-card { border-radius: var(--radius); padding: 16px 18px; border: 1px solid var(--border); }
.season-card h6 { font-family: var(--font-heading); font-size: 15px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.season-card ul { list-style: none; padding: 0; margin: 0; }
.season-card ul li { font-size: 13px; color: var(--text-mid); padding: 3px 0; border-bottom: 1px dashed var(--border); display: flex; justify-content: space-between; gap: 8px; }
.season-card ul li:last-child { border-bottom: none; }
.season-card ul li span { font-weight: 600; color: var(--text-dark); text-align: right; }

.s-spring { background: #f0fdf4; }
.s-spring h6 { color: #15803d; }
.s-summer { background: #fffbeb; }
.s-summer h6 { color: #b45309; }
.s-autumn { background: #fff7ed; }
.s-autumn h6 { color: #c2410c; }
.s-winter { background: #eff6ff; }
.s-winter h6 { color: #1d4ed8; }


/* =====================================================
   19. TIP SECTION & TIP CARDS  (tips pages)
===================================================== */
.tip-section { margin-bottom: 40px; }
.tip-section h3 { margin-top: 0; }

.tip-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.tip-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex; align-items: flex-start; gap: 14px;
  transition: box-shadow .2s;
}
.tip-card:hover { box-shadow: var(--shadow); }
.tip-card .tc-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tip-card .tc-icon i { color: var(--primary); font-size: 16px; }
.tip-card .tc-body h6 { font-family: var(--font-heading); font-size: 14px; color: var(--text-dark); margin-bottom: 4px; }
.tip-card .tc-body p { font-size: 13px; color: var(--text-mid); margin: 0; line-height: 1.55; }


/* =====================================================
   20. NUMBERED TIP LIST  (tips pages)
===================================================== */
.tip-list { list-style: none; padding: 0; counter-reset: tipcount; }
.tip-list li {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 12px;
  padding: 12px 16px;
  background: var(--bg-light);
  border-radius: var(--radius);
  border-left: 3px solid var(--primary);
  counter-increment: tipcount;
}
.tip-list li::before {
  content: counter(tipcount);
  min-width: 26px; height: 26px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0; margin-top: 1px;
}
.tip-list li p { margin: 0; font-size: 14px; color: var(--text-mid); }
.tip-list li strong { color: var(--text-dark); }


/* =====================================================
   21. DO / DON'T COLUMNS  (safety sections)
===================================================== */
.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.do-box, .dont-box { border-radius: var(--radius); padding: 16px 18px; }
.do-box   { background: #f0fdf4; border: 1px solid #86efac; }
.dont-box { background: #fef2f2; border: 1px solid #fca5a5; }
.do-box h6   { color: #15803d; font-family: var(--font-heading); font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.dont-box h6 { color: #b91c1c; font-family: var(--font-heading); font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.do-box ul, .dont-box ul { list-style: none; padding: 0; margin: 0; }
.do-box ul li, .dont-box ul li { font-size: 13.5px; color: var(--text-mid); padding: 5px 0; border-bottom: 1px dashed; display: flex; align-items: flex-start; gap: 8px; }
.do-box   ul li { border-color: #bbf7d0; }
.dont-box ul li { border-color: #fecaca; }
.do-box   ul li:last-child, .dont-box ul li:last-child { border-bottom: none; }
.do-box   ul li i { color: #15803d; flex-shrink: 0; margin-top: 2px; }
.dont-box ul li i { color: #b91c1c; flex-shrink: 0; margin-top: 2px; }


/* =====================================================
   22. PERMIT CARDS  (Ladakh tips page)
===================================================== */
.permit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin: 20px 0;
}
.permit-card { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.permit-card .pc-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 50px; display: inline-block; margin-bottom: 10px; }
.permit-card .pc-badge.ilp  { background: #dbeafe; color: #1e40af; }
.permit-card .pc-badge.pap  { background: #ede9fe; color: #5b21b6; }
.permit-card .pc-badge.free { background: #dcfce7; color: #15803d; }
.permit-card h6 { font-family: var(--font-heading); font-size: 14px; color: var(--text-dark); margin-bottom: 6px; }
.permit-card p  { font-size: 13px; color: var(--text-mid); margin: 0; line-height: 1.55; }


/* =====================================================
   23. DESTINATION SHOWCASE CARDS  (Yatra pages)
===================================================== */
.dest-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
.dest-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg-white); }
.dest-card .dc-thumb { height: 130px; background-size: cover; background-position: center; position: relative; }
.dest-card .dc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 60%); }
.dest-card .dc-title { position: absolute; bottom: 10px; left: 12px; color: #fff; font-size: 14px; font-weight: 700; font-family: var(--font-heading); }
.dest-card .dc-badge { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 50px; background: rgba(255,255,255,.9); color: var(--text-dark); }
.dest-card .dc-body { padding: 12px 14px; }
.dest-card .dc-body p { font-size: 13px; color: var(--text-mid); margin: 0; line-height: 1.6; }


/* =====================================================
   24. INFO GRID TILES  (Yatra / Shivkhori pages)
===================================================== */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 20px 0; }
.info-tile { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; text-align: center; }
.info-tile i { font-size: 22px; color: var(--primary); display: block; margin-bottom: 8px; }
.info-tile .it-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 3px; }
.info-tile .it-val { font-size: 13px; font-weight: 600; color: var(--text-dark); }


/* =====================================================
   25. HELICOPTER INFO STRIP  (Amarnath page)
===================================================== */
.heli-strip { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.heli-card  { flex: 1; min-width: 160px; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; text-align: center; }
.heli-card i { font-size: 24px; color: var(--primary); display: block; margin-bottom: 8px; }
.heli-card .hc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; }
.heli-card .hc-val   { font-size: 14px; font-weight: 600; color: var(--text-dark); }


/* =====================================================
   26. PUJA TIMINGS GRID  (Amarnath page)
===================================================== */
.puja-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.puja-item { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.puja-item .pt-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 3px; }
.puja-item .pt-val   { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.puja-item .pt-val span { font-size: 12px; font-weight: 400; color: var(--text-muted); display: block; }


/* =====================================================
   27. SHOPPING GRID  (tips pages)
===================================================== */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 20px 0; }
.shop-item { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.shop-item .si-icon { font-size: 24px; display: block; margin-bottom: 8px; }
.shop-item h6 { font-family: var(--font-heading); font-size: 14px; color: var(--text-dark); margin-bottom: 4px; }
.shop-item p  { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.55; }


/* =====================================================
   28. ROUTE OPTION CARDS  (Vaishno Devi page)
===================================================== */
.route-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.route-card  { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.route-card h6 { font-family: var(--font-heading); font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.route-card ul { list-style: none; padding: 0; margin: 0; }
.route-card ul li { font-size: 13px; color: var(--text-mid); padding: 4px 0; border-bottom: 1px dashed var(--border); display: flex; justify-content: space-between; gap: 8px; }
.route-card ul li:last-child { border-bottom: none; }
.route-card ul li span { font-weight: 600; color: var(--text-dark); text-align: right; }


/* =====================================================
   29. GENERAL TABLES
===================================================== */

/* Package cost / hotels table */
.table-cost { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-cost th, .table-cost td { padding: 11px 14px; text-align: center; border: 1px solid var(--border); }
.table-cost thead th { background: var(--primary); color: #fff; font-weight: 600; font-family: var(--font-body); font-size: 13px; }
.table-cost tbody tr:nth-child(even) { background: var(--bg-light); }
.table-cost tbody tr:hover { background: var(--primary-light); }
.table-cost td:first-child { text-align: left; }

/* Clothing / passes / reference tables */
.clothing-table, .passes-table, .trek-table {
  width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0;
}
.clothing-table th, .passes-table th, .trek-table th {
  background: var(--primary); color: #fff;
  padding: 10px 14px; text-align: left;
  font-weight: 600; font-family: var(--font-body); font-size: 13px;
}
.clothing-table td, .passes-table td, .trek-table td {
  padding: 10px 14px; border: 1px solid var(--border); color: var(--text-mid);
}
.clothing-table tbody tr:nth-child(even),
.passes-table  tbody tr:nth-child(even),
.trek-table    tbody tr:nth-child(even) { background: var(--bg-light); }
.clothing-table tbody tr:hover,
.passes-table  tbody tr:hover,
.trek-table    tbody tr:hover { background: var(--primary-light); }
.passes-table td:first-child, .trek-table td:first-child { font-weight: 600; color: var(--text-dark); }


/* =====================================================
   30. INCLUDES / EXCLUDES LISTS
===================================================== */
.wedding_list, .wedding_list1 { list-style: none; padding: 0; }
.wedding_list li, .wedding_list1 li {
  padding: 7px 0;
  font-size: 14px;
  color: var(--text-mid);
  border-bottom: 1px dashed var(--border);
  display: flex; align-items: flex-start; gap: 10px;
}
.wedding_list  li:last-child, .wedding_list1 li:last-child { border-bottom: none; }
.wedding_list  li i { color: #27ae60; margin-top: 3px; flex-shrink: 0; }
.wedding_list1 li i { color: var(--primary); margin-top: 3px; flex-shrink: 0; }


/* =====================================================
   31. FAQ  (Bootstrap accordion override)
===================================================== */
.accordion-item     { background: var(--bg-white) !important; border-radius: var(--radius) !important; }
.accordion-button   { font-size: 14px; font-weight: 600; color: var(--text-dark); background: var(--bg-white); border-radius: var(--radius) !important; }
.accordion-button:not(.collapsed) { background: var(--primary-light); color: var(--primary-dark); box-shadow: none; }
.accordion-body     { font-size: 14px; color: var(--text-mid); line-height: 1.8; }


/* =====================================================
   32. ITINERARY SIDEBAR  (tour pages)
===================================================== */
.sidebar { position: sticky; top: 80px; }

.sidewidget { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-white); box-shadow: var(--shadow); }
.sidewidget_title { background: var(--primary); }
.sidewidget_title span { color: #fff !important; font-size: 17px !important; font-weight: 700; }

.btn-center { text-align: center; margin-top: 14px; }
.btn-center .btn, .cta-btn {
  background: var(--primary); color: #fff;
  padding: 10px 28px; border: none;
  border-radius: 50px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .2s, transform .15s;
  display: inline-block;
}
.btn-center .btn:hover, .cta-btn:hover {
  background: var(--primary-dark); color: #fff; transform: translateY(-1px);
}

.widget { margin-bottom: 24px; }
.widget-title {
  font-size: 16px; font-weight: 700; color: var(--text-dark);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 8px; margin-bottom: 16px;
  font-family: var(--font-heading);
}
.recent { list-style: none; padding: 0; }
.recent li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.recent li:last-child { border-bottom: none; }
.recent li .thum { width: 60px; height: 50px; border-radius: 6px; flex-shrink: 0; }
.recent li a { font-size: 13px; font-weight: 600; color: var(--text-dark); display: block; margin-bottom: 2px; line-height: 1.3; }
.recent li a:hover { color: var(--primary); }
.recent li p { font-size: 12px; color: var(--text-muted); margin: 0; }

/* Sidebar quick info row */
.info-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; gap: 10px; }
.info-row:last-child { border-bottom: none; }
.info-row .ir-label { color: var(--text-muted); flex-shrink: 0; }
.info-row .ir-val   { color: var(--text-dark); font-weight: 600; text-align: right; }


/* =====================================================
   33. DESTINATION / TIPS SIDEBAR
===================================================== */
.sidebar-widget {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
.sw-title {
  background: var(--primary); color: #fff;
  padding: 14px 18px;
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
}
.sw-body { padding: 16px 18px; }

.sw-links { list-style: none; padding: 0; margin: 0; }
.sw-links li { border-bottom: 1px solid var(--border); }
.sw-links li:last-child { border-bottom: none; }
.sw-links li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; font-size: 14px; color: var(--text-mid);
  transition: color .2s, padding .2s;
}
.sw-links li a:hover { color: var(--primary); padding-left: 8px; }
.sw-links li a i    { color: var(--primary); font-size: 13px; flex-shrink: 0; }
.sw-links li.active a { color: var(--primary); font-weight: 600; }

.quick-info-table { width: 100%; font-size: 13px; }
.quick-info-table tr td { padding: 7px 10px; border-bottom: 1px dashed var(--border); color: var(--text-mid); vertical-align: top; }
.quick-info-table tr:last-child td { border-bottom: none; }
.quick-info-table td:first-child { font-weight: 600; color: var(--text-dark); width: 44%; }

.why-us { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.wu-item {
  background: var(--bg-light);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--border);
}
.wu-item .wu-icon {
  width: 36px; height: 36px;
  background: var(--primary); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wu-item .wu-icon i { color: #fff; font-size: 15px; }
.wu-item h6 { font-family: var(--font-heading); font-size: 13.5px; color: var(--text-dark); margin-bottom: 3px; }
.wu-item p  { font-size: 12.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }

.cta-box {
  background: linear-gradient(135deg, var(--primary) 0%, var(--cta-end) 100%);
  border-radius: var(--radius);
  padding: 22px 20px; text-align: center;
}
.cta-box h5 { font-family: var(--font-heading); color: #fff; font-size: 17px; margin-bottom: 8px; }
.cta-box p  { color: rgba(255,255,255,.8); font-size: 13px; margin-bottom: 16px; }
.cta-box a  {
  background: #fff; color: var(--primary);
  padding: 9px 24px; border-radius: 50px;
  font-size: 13px; font-weight: 700;
  display: inline-block; transition: background .2s;
}
.cta-box a:hover { background: #f0c040; }


/* -- View all link --*/
.tour-packages__footer {
  display: block;
  text-align: center;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  border-top: 0.5px solid var(--border);
  margin-top: 4px;
  transition: color 0.18s ease, background 0.18s ease;
}

.tour-packages__footer:hover {
  color: var(--pine);
  background: var(--cream);
}

.tour-packages__footer i {
  font-size: 12px;
  vertical-align: -1px;
  margin-left: 4px;
}

/* -- CTA block (below packages) --*/
.tour-packages__cta {
  background: var(--sky-lt);
  border: 0.5px solid var(--sky);
  border-radius: 12px;
  padding: 16px;
}

.tour-packages__cta-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--sky);
  margin-bottom: 6px;
}

.tour-packages__cta-text {
  font-size: 12px;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 14px;
}

.tour-packages__cta-btn {
  display: block;
  text-align: center;
  background: var(--pine);
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s ease;
}

.tour-packages__cta-btn:hover {
  background: var(--pine-mid);
  color: #fff;
}

.tour-packages__cta-btn i {
  font-size: 12px;
  vertical-align: -1px;
  margin-left: 4px;
}

/* ----------------------------------------
   QUICK FACTS PANEL
---------------------------------------- */

.quick-facts {
  background: #fff;
  border: 0.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.quick-facts__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--border);
  background: var(--cream);
	text-transform: uppercase;
}

.quick-facts__header i {
  font-size: 16px;
  color: var(--text-soft);
}

.quick-facts__header span {
  font-size: 16px;
  font-weight: 500;
  color: var(--pine);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.quick-facts__list {
  list-style: none;
  margin: 0;
  padding: 0 16px;
}

.quick-facts__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
}

.quick-facts__item:last-child {
  border-bottom: none;
}

.quick-facts__icon {
  font-size: 15px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  text-align: center;
}

.quick-facts__label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 3px;
}

.quick-facts__value {
  display: block;
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.5;
}

.quick-facts__value strong {
  color: var(--pine);
  font-weight: 500;
}



/* =====================================================
   34. FOOTER
===================================================== 
footer.footer { background: var(--footer-bg); color: rgba(255,255,255,.75); margin-top: 60px; }
.first-footer  { border-bottom: 1px solid rgba(255,255,255,.08); padding: 32px 0; }

.footer-contact-links-wrapper { display: flex; flex-wrap: wrap; align-items: center; }
.footer-contact-link-wrapper  { display: flex; align-items: center; gap: 14px; padding: 8px 28px; }
.footer-contact-links-divider { width: 1px; height: 48px; background: rgba(255,255,255,.12); }

.icon-footer {
  width: 42px; height: 42px;
  background: var(--accent); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; flex-shrink: 0;
}
.footer-contact-link-content h6 { font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; }
.footer-contact-link-content p  { font-size: 14px; color: #fff; margin: 0; font-weight: 500; }

.second-footer { padding: 48px 0 32px; }

.footer-logo-text { font-family: var(--font-heading); color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 14px; display: block; }
.footer-logo-text span { color: #f0c040; }

.widget-text p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.7; }

.social-icons ul { list-style: none; padding: 0; display: flex; gap: 10px; margin-top: 14px; }
.social-icons ul li a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.1); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7); font-size: 14px; transition: background .2s;
}
.social-icons ul li a:hover { background: var(--accent); color: #fff; }

.widget-area h3.widget-title,
.widget-area h3.widget-footer-title {
  color: rgba(255,255,255,.9);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 8px; margin-bottom: 16px;
  font-size: 16px; font-weight: 700;
}

.usful-links ul { list-style: none; padding: 0; }
.usful-links ul li { padding: 5px 0; }
.usful-links ul li a { font-size: 14px; color: rgba(255,255,255,.6); transition: color .2s, padding .2s; }
.usful-links ul li a:hover { color: #fff; padding-left: 4px; }

.widget-newsletter form { display: flex; gap: 8px; margin-top: 8px; }
.widget-newsletter form input {
  flex: 1; padding: 9px 14px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.07); color: #fff; font-size: 13px;
}
.widget-newsletter form input::placeholder { color: rgba(255,255,255,.4); }
.widget-newsletter form button {
  background: var(--accent); color: #fff; border: none;
  padding: 9px 18px; border-radius: 50px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.widget-newsletter form button:hover { opacity: .88; }

.bottom-footer-text { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; }
.bottom-footer-text p { font-size: 13px; color: rgba(255,255,255,.4); margin: 0; text-align: center; }
.bottom-footer-text a { color: rgba(255,255,255,.5); }
.bottom-footer-text a:hover { color: #fff; }


/* =====================================================
   35. UTILITY CLASSES
===================================================== */
.mt-25  { margin-top: 25px; }
.mt-40  { margin-top: 40px; }
.mb-20  { margin-bottom: 20px; }
.mb-30  { margin-bottom: 30px; }
.mr-10  { margin-right: 10px; }
.font-weight-bold   { font-weight: 700 !important; }
.fw-semibold        { font-weight: 600 !important; }
.text-justify       { text-align: justify; }
.border-bottom.border-width-2.border-color-1 { border-color: var(--border) !important; }

/* Sidebar form field baseline */
.border-bottom.border-width-2.border-color-1 { border-color: var(--border) !important; }


/* =====================================================
   36. RESPONSIVE BREAKPOINTS
===================================================== */
@media (max-width: 991px) {
  .sidebar               { position: static; margin-top: 40px; }
  .footer-contact-link-wrapper { padding: 8px 14px; }
  .footer-contact-links-divider { display: none; }
  .season-grid           { grid-template-columns: 1fr 1fr; }
  .do-dont               { grid-template-columns: 1fr; }
  .ams-grid              { grid-template-columns: 1fr; }
  .altitude-strip ul     { grid-template-columns: 1fr; }
  .route-cards           { grid-template-columns: 1fr; }
  .dest-cards            { grid-template-columns: 1fr 1fr; }
  .puja-grid             { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .dest-cards            { grid-template-columns: 1fr; }
  .heli-strip            { flex-direction: column; }
}

@media (max-width: 576px) {
  .banner-header         { min-height: 320px; padding: 40px 0 36px; }
  .banner-header h1      { font-size: 1.75rem; }
  .season-grid           { grid-template-columns: 1fr; }
  .facts-grid            { grid-template-columns: repeat(2, 1fr); }
  .info-grid             { grid-template-columns: 1fr 1fr; }
  .acc-btn               { font-size: 13px; }
  .acc-btn .day-loc-badge { display: none; }
  .altitude-strip        { padding: 16px 18px; }
}


/* Route trail */
.route-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 28px; padding: 14px 0px; background: var(--bg-light); border-radius: var(--radius);  }
.rt-stop { font-size: 12px; font-weight: 600; padding: 4px 13px; border-radius: 50px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.rt-nights { font-size: 10px; background: rgba(0,0,0,0.10); border-radius: 10px; padding: 1px 6px; font-weight: 500; }
.rt-arr { color: var(--text-muted); font-size: 14px; }
.c-srg  { background: #e8f4fd; color: #1a5276; }
.c-hlp  { background: #e8f8f5; color: #0e6655; }
.c-cave { background: #fdf2e9; color: #784212; }
.c-heli { background: #fff3cd; color: #7b3f00; }
.c-dep  { background: #f4ecf7; color: #6c3483; }
.banner-header .banner-subtitle { color: rgba(255,255,255,0.78); font-size: 14px; letter-spacing: 0.8px; }

/* Trek comparison cards */
.trek-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.trek-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.trek-card.recommended { border-color: #27ae60; border-width: 2px; }
.trek-card h6 { font-family: var(--font-heading); font-size: 15px; color: var(--text-dark); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.trek-card h6 i { font-size: 18px; }
.trek-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #e9f7ef; color: #1e8449; margin-left: 4px; }
.trek-card ul { list-style: none; padding: 0; margin: 0; }
.trek-card ul li { font-size: 13px; color: var(--text-mid); padding: 4px 0; border-bottom: 1px dashed var(--border); display: flex; gap: 8px; align-items: flex-start; }
.trek-card ul li:last-child { border-bottom: none; }
.trek-card ul li i { color: var(--primary); font-size: 12px; margin-top: 3px; flex-shrink: 0; }

/* Spiritual box */
.spiritual-box { background: linear-gradient(135deg, #fff8e1 0%, #fef5e7 100%); border: 1px solid #f0c040; border-radius: var(--radius); padding: 18px 20px; margin: 20px 0; }
.spiritual-box h6 { font-family: var(--font-heading); font-size: 15px; color: #7b4f00; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.spiritual-box p { font-size: 14px; color: #6d4c00; margin: 0; line-height: 1.75; }
.spiritual-box p + p { margin-top: 8px; }



/* Darshan timing grid */
.darshan-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 16px 0; }
.darshan-item { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; text-align: center; }
.darshan-item .di-icon { font-size: 20px; margin-bottom: 6px; }
.darshan-item .di-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 3px; }
.darshan-item .di-val { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.darshan-item .di-time { font-size: 12px; color: var(--primary); font-weight: 500; }

/* ----------------------------------------
   PERMIT ALERT BOX
   Used on: Turtuk, Nubra, Pangong, Hanle
   Section: Permit / Restricted Area Warning
---------------------------------------- */

.alert-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fffbf0;
  border: 0.5px solid #e8c84a;
  border-left: 3px solid #c4943a;
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 13px;
  color: #4a3a10;
  line-height: 1.7;
}

/* -- Bold label inside the box -- */
.alert-box strong {
  font-weight: 600;
  color: #3a2800;
}

/* ----------------------------------------
   VARIANTS
---------------------------------------- */

/* Warning — amber (default, used for permits) */
.alert-box--warning {
  background: #fffbf0;
  border-color: #e8c84a;
  border-left-color: #c4943a;
  color: #4a3a10;
}

.alert-box--warning strong {
  color: #3a2800;
}

/* Info — blue (used for general tips)  */
.alert-box--info {
  background: #f0f6ff;
  border-color: #a0c0e8;
  border-left-color: #3a6b8a;
  color: #1a2a3a;
}

.alert-box--info strong {
  color: #0a1a2a;
}

/* Success — green (used for open/accessible notes)  */
.alert-box--success {
  background: #f0faf4;
  border-color: #a0d8b8;
  border-left-color: #2d6b4a;
  color: #0a2a1a;
}

.alert-box--success strong {
  color: #051510;
}

/* Danger — red (used for road closures, safety)  */
.alert-box--danger {
  background: #fff4f4;
  border-color: #e8a0a0;
  border-left-color: #c43a3a;
  color: #3a0a0a;
}

.alert-box--danger strong {
  color: #280000;
}

/* ----------------------------------------
   WITH ICON VARIANT
   Wrap content in alert-box__body when
   using an explicit icon element
----------------------------------------  */

.alert-box--with-icon {
  gap: 14px;
}

.alert-box__icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.4;
  margin-top: 1px;
}

.alert-box__body {
  flex: 1;
  min-width: 0;
}

.alert-box__title {
  font-weight: 600;
  font-size: 13px;
  color: #3a2800;
  margin-bottom: 4px;
  display: block;
}

.alert-box__text {
  font-size: 12px;
  color: #6a5020;
  line-height: 1.65;
  margin: 0;
}

/* -- Variant title colours --  */
.alert-box--info    .alert-box__title { color: #0a1a2a; }
.alert-box--info    .alert-box__text  { color: #2a3a4a; }
.alert-box--success .alert-box__title { color: #051510; }
.alert-box--success .alert-box__text  { color: #1a3a2a; }
.alert-box--danger  .alert-box__title { color: #280000; }
.alert-box--danger  .alert-box__text  { color: #4a1010; }

/* ----------------------------------------
   STACKED VARIANT
   Multiple alerts in a vertical group
----------------------------------------  */

.alert-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alert-stack .alert-box {
  margin-top: 0;
}

/* ----------------------------------------
   PERMIT TAG — inline badge version
   Use inside prose or tip-box paragraphs
----------------------------------------  */

.permit-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: #fff8e0;
  border: 0.5px solid #e8c84a;
  color: #7a5a00;
  white-space: nowrap;
  vertical-align: middle;
}

.permit-tag::before {
  content: '??';
  font-size: 11px;
  line-height: 1;
}

/* -- Variants --  */
.permit-tag--free {
  background: #f0faf4;
  border-color: #a0d8b8;
  color: #1a5a3a;
}

.permit-tag--free::before {
  content: '?';
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
}

.permit-tag--required {
  background: #fff4f4;
  border-color: #e8a0a0;
  color: #7a1a1a;
}

.permit-tag--required::before {
  content: '??';
}

/* ----------------------------------------
   RESPONSIVE
----------------------------------------  */

@media (max-width: 576px) {
  .alert-box {
    padding: 14px 14px;
    font-size: 12px;
    gap: 10px;
  }

  .alert-box__icon {
    font-size: 18px;
  }

  .alert-box__title {
    font-size: 12px;
  }

  .alert-box__text {
    font-size: 11px;
  }
}


/* ----------------------------------------
   EXPERIENCE HIGHLIGHT SECTION
   Used on: Pangong Lake Destination Guide
---------------------------------------- */

/* -- Section wrapper -- */
.experience-section {
  padding: 56px 0;
  border-bottom: 0.5px solid var(--border);
}

/* -- Intro text -- */
.experience-intro {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.8;
  max-width: 680px;
  margin-bottom: 32px;
}

/* ----------------------------------------
   HIGHLIGHT CARD — Main experience block
---------------------------------------- */

.highlight-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  background: #fff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.highlight-card:hover {
  box-shadow: 0 4px 24px rgba(10, 26, 42, 0.08);
  border-color: var(--sky);
}

/* -- Icon area -- */
.highlight-card__icon {
  font-size: 42px;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--pine-light);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* -- Text area -- */
.highlight-card__body {
  flex: 1;
  min-width: 0;
}

.highlight-card__tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sky);
  font-weight: 500;
  margin-bottom: 6px;
}

.highlight-card__title {
  font-family: 'Poppins', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--pine);
  margin-bottom: 8px;
  line-height: 1.2;
}

.highlight-card__desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.75;
  margin: 0;
}

/* -- Best time badge inside card -- */
.highlight-card__badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
  margin-top: 10px;
}

.highlight-card__badge--time {
  background: var(--sky-lt);
  color: var(--sky);
}

.highlight-card__badge--tip {
  background: #fff5e0;
  color: #7a5a00;
}

/* ----------------------------------------
   FEATURED CARD — Full-width hero experience
---------------------------------------- */

.highlight-card--featured {
  background: linear-gradient(135deg, var(--pine-light), #f4f8fd);
  border-color: var(--sky);
  border-width: 1px;
}

.highlight-card--featured .highlight-card__title {
  font-size: 20px;
}

.highlight-card--featured .highlight-card__icon {
  width: 72px;
  height: 72px;
  font-size: 48px;
  border-radius: 16px;
  background: var(--sky-lt);
}

/* ----------------------------------------
   COMPACT CARD — 2 column grid variant
---------------------------------------- */

.highlight-card--compact {
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.highlight-card--compact .highlight-card__icon {
  width: 48px;
  height: 48px;
  font-size: 28px;
  border-radius: 10px;
}

.highlight-card--compact .highlight-card__title {
  font-size: 18px;
}

/* ----------------------------------------
   EXPERIENCE GRID LAYOUTS
---------------------------------------- */

/* Default — single column stack */
.experience-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Two column grid */
.experience-grid--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* First card spans full width in 2col grid */
.experience-grid--2col .highlight-card:first-child {
  grid-column: 1 / -1;
}

/* Three column grid */
.experience-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ----------------------------------------
   EXPERIENCE STAT STRIP
   Small fact row below the experiences
---------------------------------------- */

.experience-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 28px;
  padding: 20px;
  background: var(--pine-light);
  border-radius: 12px;

  border: 0.5px solid var(--border);
}

.experience-stat {
  text-align: center;
}

.experience-stat__value {
  font-family: 'Poppins', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--pine);
  display: block;
  line-height: 1.1;
}

.experience-stat__label {
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ----------------------------------------
   RESPONSIVE
---------------------------------------- */

@media (max-width: 768px) {
  .experience-grid--2col,
  .experience-grid--3col {
    grid-template-columns: 1fr;
  }

  .experience-grid--2col .highlight-card:first-child {
    grid-column: auto;
  }

  .experience-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .highlight-card {
    flex-direction: column;
    gap: 14px;
  }

  .highlight-card--featured .highlight-card__title {
    font-size: 22px;
  }

  .experience-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 16px;
  }

  .experience-stat__value {
    font-size: 22px;
  }
}

/* ----------------------------------------
   ART & HERITAGE SECTION
   Used on: Alchi Destination Guide
---------------------------------------- */

/* -- Section intro text -- */
.art-intro {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.8;
  max-width: 680px;
  margin-bottom: 32px;
}

/* ----------------------------------------
   ART HIGHLIGHT CARD — Main block
---------------------------------------- */

.art-highlight {
  background: linear-gradient(135deg, #fdf0e4, #fdfaf4);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.art-highlight:hover {
  box-shadow: 0 6px 28px rgba(58, 26, 8, 0.1);
  border-color: var(--gold);
}

/* -- Decorative accent line -- */
.art-highlight::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--gold), var(--pine-mid));
  border-radius: 14px 0 0 14px;
}

/* -- Century / period label -- */
.art-highlight__period {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.art-highlight__period::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--border);
  max-width: 120px;
}

/* -- Title -- */
.art-highlight__title {
  font-family: 'Poppins', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--pine);
  margin-bottom: 12px;
  line-height: 1.2;
}

/* -- Description -- */
.art-highlight__desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 0;
}

/* -- Significance tag -- */
.art-highlight__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--sky-lt);
  color: var(--sky);
  margin-top: 14px;
  font-weight: 500;
  border: 0.5px solid var(--border);
}

.art-highlight__tag::before {
  content: '?';
  font-size: 9px;
  color: var(--gold);
}

/* ----------------------------------------
   FEATURED VARIANT — First / primary card
---------------------------------------- */

.art-highlight--featured {
  background: linear-gradient(135deg, #fdf0e4, #faf0e0);
  border-color: var(--gold);
  border-width: 1px;
  padding: 32px 28px;
}

.art-highlight--featured::before {
  width: 4px;
  background: var(--gold);
}

.art-highlight--featured .art-highlight__title {
  font-size: 28px;
}

.art-highlight--featured .art-highlight__period {
  font-size: 11px;
}

/* ----------------------------------------
   COMPACT VARIANT — Side-by-side layout
---------------------------------------- */

.art-highlight--compact {
  padding: 20px 18px;
  margin-bottom: 12px;
}

.art-highlight--compact .art-highlight__title {
  font-size: 18px;
  margin-bottom: 8px;
}

.art-highlight--compact .art-highlight__desc {
  font-size: 12px;
}

/* ----------------------------------------
   TEMPLE ICON VARIANT — With icon badge
---------------------------------------- */

.art-highlight--with-icon {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.art-highlight__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--pine-light);
  border: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.art-highlight--with-icon .art-highlight__body {
  flex: 1;
  min-width: 0;
}

/* ----------------------------------------
   ART GRID LAYOUTS
---------------------------------------- */

/* Default stacked layout */
.art-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Two-column grid */
.art-grid--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* First card spans full width in 2col */
.art-grid--2col .art-highlight:first-child {
  grid-column: 1 / -1;
}

/* ----------------------------------------
   TIMELINE LAYOUT — Vertical timeline strip
---------------------------------------- */

.art-timeline {
  position: relative;
  padding-left: 32px;
}

/* Vertical line */
.art-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold), transparent);
}

/* Timeline dot on each card */
.art-timeline .art-highlight {
  position: relative;
  margin-bottom: 20px;
}

.art-timeline .art-highlight::after {
  content: '';
  position: absolute;
  left: -26px;
  top: 28px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--cream);
  box-shadow: 0 0 0 1px var(--gold);
}

/* ----------------------------------------
   ART FACT STRIP — Key numbers row
---------------------------------------- */

.art-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg, #fdf0e4, #fdfaf4);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  margin-top: 28px;
  margin-bottom: 28px;
}

.art-fact {
  text-align: center;
  padding: 4px 0;
}

.art-fact__value {
  font-family: 'Poppins', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--pine);
  display: block;
  line-height: 1.1;
}

.art-fact__label {
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}

/* ----------------------------------------
   PHOTOGRAPHY RULE ALERT
---------------------------------------- */

.art-photo-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff8e8;
  border: 1px solid #e8c84a;
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 20px;
  font-size: 13px;
  color: #5a4010;
}

.art-photo-alert__icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.art-photo-alert__title {
  font-weight: 500;
  color: #3a2800;
  margin-bottom: 4px;
  font-size: 13px;
}

.art-photo-alert__text {
  font-size: 12px;
  color: #6a5020;
  line-height: 1.6;
  margin: 0;
}

/* ----------------------------------------
   RESPONSIVE
---------------------------------------- */

@media (max-width: 768px) {
  .art-grid--2col {
    grid-template-columns: 1fr;
  }

  .art-grid--2col .art-highlight:first-child {
    grid-column: auto;
  }

  .art-facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .art-timeline {
    padding-left: 24px;
  }
}

@media (max-width: 576px) {
  .art-highlight {
    padding: 20px 16px;
  }

  .art-highlight--featured {
    padding: 22px 18px;
  }

  .art-highlight--featured .art-highlight__title {
    font-size: 22px;
  }

  .art-highlight--with-icon {
    flex-direction: column;
    gap: 12px;
  }

  .art-facts {
    grid-template-columns: repeat(2, 1fr);
    padding: 14px;
  }

  .art-fact__value {
    font-size: 22px;
  }
}

/* ----------------------------------------
   STARGAZING BANNER
   Used on: Hanle Destination Guide
   Section: The Finest Night Sky in India
---------------------------------------- */

.stargazing-banner {
  position: relative;
  background: linear-gradient(135deg, #0a0a28, #101048);
  border-radius: 14px;
  padding: 30px 26px;
  overflow: hidden;
  border: 0.5px solid rgba(160, 128, 32, 0.3);
}

/* -- Star-field background dots -- */
.stargazing-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.85) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.65) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.4)  1px, transparent 1px);
  background-size:
    130px 130px,
    90px  90px,
    210px 210px,
    60px  60px;
  background-position:
    12px 18px,
    58px 68px,
    95px 32px,
    30px 80px;
  opacity: 0.45;
  pointer-events: none;
}

/* -- Milky Way diagonal glow -- */
.stargazing-banner::after {
  content: '';
  position: absolute;
  top: 15%;
  left: -15%;
  width: 130%;
  height: 45%;
  background: linear-gradient(
    105deg,
    transparent        10%,
    rgba(180,160,255,0.05) 30%,
    rgba(200,185,255,0.09) 50%,
    rgba(180,160,255,0.05) 70%,
    transparent        90%
  );
  transform: rotate(-14deg);
  pointer-events: none;
}

/* -- All text content sits above pseudo elements -- */
.stargazing-banner__label,
.stargazing-banner__title,
.stargazing-banner__desc,
.stargazing-banner__stat {
  position: relative;
  z-index: 2;
}

/* -- Reserve label -- */
.stargazing-banner__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-lt);
  font-weight: 500;
  margin-bottom: 10px;
}

.stargazing-banner__label::before {
  content: '?';
  font-size: 11px;
  color: var(--gold-lt);
  line-height: 1;
}

/* -- Main title -- */
.stargazing-banner__title {
  font-family: 'Poppins', serif;
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 600;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 12px;
}

/* -- Description paragraph -- */
.stargazing-banner__desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.8;
  max-width: 600px;
  margin-bottom: 18px;
}

/* -- Stat pill -- */
.stargazing-banner__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold-lt);
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.stargazing-banner__stat::before {
  content: '·';
  font-size: 20px;
  line-height: 0;
  color: var(--gold-lt);
  opacity: 0.7;
}

/* -- Responsive -- */
@media (max-width: 576px) {
  .stargazing-banner {
    padding: 22px 18px;
  }

  .stargazing-banner__title {
    font-size: 20px;
  }

  .stargazing-banner__desc {
    font-size: 12px;
  }

  .stargazing-banner__stat {
    font-size: 11px;
    padding: 4px 11px;
  }
}

/* ----------------------------------------
   BALTI CULTURE & HERITAGE SECTION
   Used on: Turtuk Destination Guide
   Section: The unique Balti world of Turtuk
---------------------------------------- */

/* -- Section intro paragraph -- */
.culture-intro {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.8;
  max-width: 680px;
  margin-bottom: 28px;
}

/* ----------------------------------------
   CULTURE CARD — Base styles
---------------------------------------- */

.culture-card {
  position: relative;
  background: linear-gradient(135deg, var(--pine-light), var(--cream));
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 28px 26px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

.culture-card:last-child {
  margin-bottom: 0;
}

.culture-card:hover {
  box-shadow: 0 6px 28px rgba(10, 42, 26, 0.1);
  border-color: var(--sky);
}

/* -- Left accent bar -- */
.culture-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--sky),
    var(--pine-mid)
  );
  border-radius: 14px 0 0 14px;
}

/* -- Subtle pattern overlay -- */
.culture-card::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(26, 90, 58, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* ----------------------------------------
   CULTURE CARD — Inner elements
---------------------------------------- */

/* -- Category label -- */
.culture-card__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sky);
  font-weight: 500;
  margin-bottom: 8px;
}

.culture-card__label::before {
  content: '';
  width: 18px;
  height: 1.5px;
  background: var(--sky);
  border-radius: 2px;
  flex-shrink: 0;
}

/* -- Card title -- */
.culture-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: 23px;
  font-weight: 600;
  color: var(--pine);
  line-height: 1.2;
  margin-bottom: 12px;
}

/* -- Card description -- */
.culture-card__desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 0;
}

/* -- Significance tag -- */
.culture-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--sky-lt);
  color: var(--sky);
  border: 0.5px solid var(--border);
  margin-top: 14px;
  font-weight: 500;
}

.culture-card__tag::before {
  content: '?';
  font-size: 7px;
  color: var(--sky);
  opacity: 0.7;
}

/* ----------------------------------------
   CULTURE CARD — Featured variant
   Use on the first / most important card
---------------------------------------- */

.culture-card--featured {
  background: linear-gradient(135deg, #e0f5ea, #f4fdf8);
  border-color: var(--sky);
  border-width: 1px;
  padding: 32px 28px;
}

.culture-card--featured::before {
  width: 4px;
  background: var(--sky);
}

.culture-card--featured .culture-card__title {
  font-size: 24px;
}

.culture-card--featured .culture-card__label {
  font-size: 11px;
  letter-spacing: 3.5px;
}

/* ----------------------------------------
   CULTURE CARD — With icon variant
---------------------------------------- */

.culture-card--with-icon {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.culture-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--sky-lt);
  border: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.culture-card--with-icon .culture-card__body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* ----------------------------------------
   CULTURE CARD — Compact variant
   Use in a 2-column grid layout
---------------------------------------- */

.culture-card--compact {
  padding: 20px 18px;
  margin-bottom: 0;
}

.culture-card--compact .culture-card__title {
  font-size: 18px;
  margin-bottom: 8px;
}

.culture-card--compact .culture-card__desc {
  font-size: 12px;
  line-height: 1.7;
}

/* ----------------------------------------
   CULTURE GRID LAYOUTS
---------------------------------------- */

/* Default: stacked single column */
.culture-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Two-column grid for compact cards */
.culture-grid--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* First card spans full width in 2-col */
.culture-grid--2col .culture-card:first-child {
  grid-column: 1 / -1;
}

/* ----------------------------------------
   CULTURE FACTS STRIP
   Horizontal row of key cultural numbers
---------------------------------------- */

.culture-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg, var(--pine-light), var(--cream));
  border: 0.5px solid var(--border);
  border-radius: 12px;
  margin-top: 28px;
  margin-bottom: 0;
}

.culture-fact {
  text-align: center;
}

.culture-fact__value {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--pine);
  display: block;
  line-height: 1.1;
  margin-bottom: 4px;
}

.culture-fact__label {
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ----------------------------------------
   RESPONSIVE
---------------------------------------- */

@media (max-width: 768px) {
  .culture-grid--2col {
    grid-template-columns: 1fr;
  }

  .culture-grid--2col .culture-card:first-child {
    grid-column: auto;
  }

  .culture-facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .culture-card {
    padding: 20px 16px;
  }

  .culture-card--featured {
    padding: 22px 18px;
  }

  .culture-card--featured .culture-card__title {
    font-size: 22px;
  }

  .culture-card--with-icon {
    flex-direction: column;
    gap: 12px;
  }

  .culture-facts {
    grid-template-columns: repeat(2, 1fr);
    padding: 14px;
    gap: 10px;
  }

  .culture-fact__value {
    font-size: 22px;
  }
}

.destinations-links .widget-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    padding: 14px 30px;
    border-bottom: 2px solid #f0f0f0;
	background: var(--cream);
    text-transform: uppercase;
	color: var(--pine);
    letter-spacing: 0.3px;
 
}

.dest-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dest-links li {
    border-bottom: 1px solid #f0f0f0;
}

.dest-links li a {
    display: block;
    padding: 10px 25px;
    transition: all 0.3s ease;
	font-size: 13px;
    color: var(--text-mid);
    line-height: 1.5;
}

.dest-links li a:hover {
    padding-right: 61px;  /* increases right padding on hover */
    padding-left: 19px;   /* decreases left padding to compensate */
    color: var(--text-dark);
}

.dest-links li a i {
   font-size: 15px;
    color: var(--gold);
    margin-right: 8px;

}

.dest-links li.active a {
    color: #your-brand-color;
    font-weight: 600;
}

.dest-links li:last-child {
    border-bottom: none;
}