/* =========================================================
   VISITKASHI.COM — REDESIGN v2.0
   Premium frontend layer — all PHP / SEO preserved
   Author: redesign layer (frontend only)
   =========================================================

   HOW THIS FILE WORKS
   -------------------
   This file loads AFTER bootstrap.min.css, style.css, plugin.css
   and icons.css in header.php. It selectively overrides and
   extends those styles without touching PHP, meta tags, forms,
   or existing JavaScript. All existing class names and IDs
   are kept intact; new helpers use a "vk-" prefix.

   TABLE OF CONTENTS
   1. Custom Properties (CSS variables)
   2. Base Improvements
   3. Upper Header Bar
   4. Navigation / Sticky Header
   5. Mobile Hamburger Button
   6. Navigation Dropdowns
   7. Mobile Slide-in Menu
   8. Preloader
   9. Hero / Carousel Banner
  10. Top Destinations Grid
  11. Service Cards (boats / cabs)
  12. Section Headings
  13. Floating Buttons (WhatsApp + Phone)
  14. Footer
  15. Buttons
  16. Responsive — ≤ 991 px
  17. Responsive — ≤ 767 px
  18. Responsive — ≤ 480 px
  19. Accessibility & Print
   ========================================================= */


/* ── 1. Custom Properties ────────────────────────────── */
:root {
  /* Brand palette */
  --vk-navy: #0d1b2a;
  --vk-navy-mid: #152237;
  --vk-gold: #d4850a;
  --vk-gold-light: #f0a62e;
  --vk-saffron: #c1440e;
  --vk-saffron-light: #e05a22;

  /* UI neutrals */
  --vk-light: #f8f5f1;
  --vk-white: #ffffff;
  --vk-text: #1a1a2e;
  --vk-muted: #6b7280;
  --vk-border: #e8e2da;

  /* Elevation */
  --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.07);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.09);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.18);

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 50px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --trans: all 0.3s var(--ease);
  --trans-fast: all 0.18s var(--ease);

  /* Layout */
  --nav-h: 70px;
}


/* ── 2. Base Improvements ────────────────────────────── */
body {
  background-color: var(--vk-light);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.3px;
}

p,
a,
li,
span,
td,
th,
input,
textarea,
select,
button,
label {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Fix: style.css sets img { width:100% } which distorts aspect ratios */
img {
  height: auto;
  max-width: 100%;
}

/* Tighten paragraph justification on small screens */
p {
  text-align: left;
}

a {
  transition: var(--trans-fast);
}


/* ── 3. Upper Header Bar ─────────────────────────────── */
/* ── Fix upper-head + nav together at top ── */
.upper-head {
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1001;
  transition: background 0.35s ease, backdrop-filter 0.35s ease;
}

:root.vk-dark .upper-head {
  background: rgba(6, 14, 23, 0.60);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Push .navigation below the upper-head bar (~36px tall) */
.navigation {
  top: 36px !important;
}

/* Push body content below both bars (36px upper-head + 70px nav = 106px) */
body {
  padding-top: 106px;
}

/* Hero is full-bleed — pull it back up so it fills behind the transparent nav */
#vk-hero {
  margin-top: -106px;
}

/* Breadcrumb pages — pull back up so hero image fills behind nav */
section.breadcrumb-outer {
  margin-top: -106px;
  padding-top: 140px;
}

.upper-head .contact-info p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  text-align: left;
}

.upper-head .contact-info i {
  color: var(--vk-gold);
  margin-right: 6px;
  font-size: 13px;
}

.upper-head .login-btn a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12.5px;
  letter-spacing: 0.2px;
}

.upper-head .login-btn a:hover {
  color: var(--vk-gold-light);
}

.upper-head .login-btn i {
  color: var(--vk-gold);
  margin-right: 6px;
  font-size: 13px;
}


/* ── 4. Navigation / Sticky Header ──────────────────── */
.navigation {
  background: rgb(160 44 1) !important;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: none;
  transition: background 0.38s var(--ease),
    backdrop-filter 0.38s var(--ease),
    box-shadow 0.38s var(--ease);
}

/* Scrolled state — applied by redesign.js after 60px scroll */
.navigation.vk-scrolled {
  background: rgba(13, 27, 42, 0.72) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

:root.vk-dark .navigation.vk-scrolled {
  background: rgba(6, 14, 23, 0.80) !important;
}

.navigation .container {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 15px;
}

.navigation-content,
.header_menu {
  width: 100%;
}

/* Reset Bootstrap navbar defaults */
.navbar.navbar-default {
  display: flex;
  align-items: center;
  /* No justify-content: space-between — logo uses margin-right:auto instead */
  width: 100%;
  height: var(--nav-h);
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  min-height: 0;
  gap: 8px;
}

/* Logo — margin-right:auto pushes all other nav items to the right */
.logo {
  padding: 0;
  flex-shrink: 0;
  float: none !important;
  margin-right: auto;
}

.logo a {
  display: block;
  line-height: 1;
}

.logo img {
  height: 50px;
  width: auto !important;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

/* Nav wrapper — desktop: no flex-grow, sits right of the auto-margin logo */
#navbar.navbar-nav-wrapper {
  float: none !important;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  justify-content: flex-end;
}

ul.nav.navbar-nav#responsive-menu {
  display: flex !important;
  align-items: center;
  gap: 0;
  float: none !important;
  margin: 0 !important;
}

.nav.navbar-nav>li {
  position: relative;
  float: none !important;
  display: inline-block;
  margin: 0 2px !important;
}

.nav.navbar-nav>li>a {
  display: flex !important;
  align-items: center;
  gap: 5px;
  padding: 10px 14px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  line-height: 1.3 !important;
  white-space: nowrap;
  transition: var(--trans-fast);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.nav.navbar-nav>li>a .fa-angle-down {
  font-size: 11px;
  opacity: 0.7;
  transition: transform 0.28s var(--ease);
}

.nav.navbar-nav>li:hover>a,
.nav.navbar-nav>li>a:hover {
  color: var(--vk-gold-light) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  text-decoration: none;
}

.nav.navbar-nav>li:hover>a .fa-angle-down {
  transform: rotate(180deg);
}

/* Active state */
.nav.navbar-nav>li.active>a,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  color: var(--vk-gold) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

/* Book Now CTA in nav */
.vk-nav-cta>a,
li.vk-nav-cta>a {
  display: inline-flex !important;
  align-items: center;
  margin-left: 10px;
  padding: 9px 20px !important;
  background: var(--vk-gold) !important;
  color: var(--vk-white) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  box-shadow: 0 2px 10px rgba(212, 133, 10, 0.35);
  transition: var(--trans);
}

.vk-nav-cta>a:hover,
li.vk-nav-cta>a:hover {
  background: var(--vk-gold-light) !important;
  color: var(--vk-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212, 133, 10, 0.45);
}


/* ── 5. Mobile Hamburger Button ──────────────────────── */
.vk-hamburger {
  display: none;
  /* shown via media query */
  flex-direction: column;
  justify-content: space-between;
  width: 34px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1010;
  margin-left: auto;
  flex-shrink: 0;
}

.vk-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: var(--trans);
  transform-origin: center;
}

/* "×" close state */
.vk-hamburger.active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

.vk-hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.vk-hamburger.active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}


/* ── 6. Navigation Dropdowns (desktop) ───────────────── */

/* Override old "display:none" — use opacity/visibility instead */
.nav.navbar-nav li ul {
  display: block !important;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  width: max-content;
  background: var(--vk-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--vk-border);
  border-top: 3px solid var(--vk-gold) !important;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.22s var(--ease),
    visibility 0.22s var(--ease),
    transform 0.22s var(--ease);
  z-index: 9999;
  pointer-events: none;
}

.nav.navbar-nav li:hover>ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.nav.navbar-nav li ul li {
  display: block !important;
  margin: 0 !important;
  float: none;
}

.nav.navbar-nav li ul li a {
  display: block !important;
  padding: 11px 18px !important;
  color: var(--vk-text) !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: none;
  border-bottom: 1px solid #f0ede8;
  transition: var(--trans-fast);
  line-height: 1.4;
  white-space: nowrap;
}

.nav.navbar-nav li ul li:last-child a,
.nav.navbar-nav li>ul>li:last-child>a {
  border-bottom: none !important;
}

.nav.navbar-nav li ul li a:hover {
  color: var(--vk-saffron) !important;
  background: var(--vk-light);
  padding-left: 24px !important;
}


/* ── 7. Mobile Slide-in Menu ─────────────────────────── */

/* Fullscreen dim overlay — must sit below .navigation (z-index:1000) so the
   slide-in panel remains interactive; it still covers all page content (~0). */
.vk-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 999;
}

.vk-nav-overlay.active {
  display: block;
}


/* ── 8. Preloader ────────────────────────────────────── */
#preloader {
  background: var(--vk-navy);
}

#status {
  width: 120px;
  height: 120px;
  background-image: url('/images/visitkashi-logo-favicon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72px;
  /* Pulsing glow animation */
  animation: vk-pulse 1.5s ease-in-out infinite;
}

@keyframes vk-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(0.93);
  }
}


/* ── 9. Hero / Carousel Banner ───────────────────────── */
#home_banner {
  position: relative;
  overflow: hidden;
  background: var(--vk-navy);
}

#home_banner .carousel-inner {
  border-radius: 0;
}

#home_banner .item img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Slide text overlay */
.kenburns_061_slide {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  padding: 20px 40px;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  min-width: 320px;
  max-width: 680px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.kenburns_061_slide h1,
.kenburns_061_slide h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  font-size: 24px !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.kenburns_061_slide h3 {
  color: var(--vk-gold-light);
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.5px;
}

/* Carousel controls */
.carousel-control {
  background: rgba(0, 0, 0, 0.3) !important;
  width: 42px;
  height: 42px;
  top: 50%;
  margin-top: -21px;
  border-radius: 50%;
  opacity: 0.7;
  transition: var(--trans);
}

.carousel-control:hover {
  opacity: 1;
}

.carousel-control.left {
  left: 16px;
}

.carousel-control.right {
  right: 16px;
}


/* ── 10. Top Destinations Grid ───────────────────────── */
.top-destinations {
  padding: 48px 5px;
}

.top-destinations .section-title {
  margin-bottom: 36px;
}

.top-destinations .section-title h2 {
  font-size: 22px;
  color: var(--vk-navy);
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.top-destinations .section-title h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--vk-gold);
  margin: 10px auto 0;
  border-radius: 2px;
}

.top-destinations .section-title p {
  color: var(--vk-muted);
  font-size: 14px;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

/* Destination card */
.top-destination-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
  background: var(--vk-navy);
}

a:hover .top-destination-item {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.top-destination-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease);
}

a:hover .top-destination-item img {
  transform: scale(1.08);
}

.top-destination-item .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(13, 27, 42, 0.82) 0%,
      rgba(13, 27, 42, 0.20) 55%,
      transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  transition: var(--trans);
}

a:hover .top-destination-item .overlay {
  background: linear-gradient(to top,
      rgba(13, 27, 42, 0.90) 0%,
      rgba(13, 27, 42, 0.35) 60%,
      transparent 100%);
}

.top-destination-item .overlay h2 {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
  line-height: 1.3;
}


/* ── 11. Service Cards (boats / cabs) ────────────────── */
.popular-packages {
  padding: 48px 5px;
}

/* Section heading with gold left border */
.popular-packages .text-left {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-left: 14px;
  border-left: 4px solid var(--vk-gold);
}

.popular-packages .text-left h2 {
  font-size: 22px;
  color: var(--vk-navy);
  font-weight: 700;
  margin: 0;
}

a.ri8 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vk-saffron);
  border: 1.5px solid var(--vk-saffron);
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  transition: var(--trans);
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

a.ri8:hover {
  background: var(--vk-saffron);
  color: var(--vk-white);
  text-decoration: none;
}

/* Card */
.package-item {
  background: var(--vk-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
  margin-bottom: 20px;
  display: block;
  height: calc(100% - 20px);
}

a:hover .package-item {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

.package-image {
  position: relative;
  overflow: hidden;
  height: 185px;
  background: var(--vk-light);
}

.package-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}

a:hover .package-image img {
  transform: scale(1.07);
}

/* Tag-style badge overlay */
.package-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
  pointer-events: none;
}

.package-content {
  padding: 14px 16px 16px;
}

.package-content h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--vk-text);
  margin: 0 0 8px;
  line-height: 1.45;
}

.package-content p {
  font-size: 13px;
  margin: 0;
  text-align: left;
  color: var(--vk-muted);
  line-height: 1.4;
}

.package-content p b {
  font-size: 15px;
  font-weight: 700;
  color: var(--vk-saffron);
}


/* ── 12. Section Headings ────────────────────────────── */
.section-title h2 {
  font-size: 22px;
  color: var(--vk-navy);
  font-weight: 700;
}

section:nth-child(odd) {
  background: var(--vk-light);
}

section:nth-child(even) {
  background: var(--vk-white);
}

section.white-bg {
  background: var(--vk-white) !important;
}


/* ── 13. Floating Buttons (WhatsApp + Phone) ─────────── */
.whatsapp {
  position: fixed;
  bottom: 28px;
  right: 22px;
  z-index: 999;
}

.phone {
  position: fixed;
  bottom: 92px;
  right: 22px;
  z-index: 999;
}

.whatsapp a,
.phone a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: var(--trans);
  text-decoration: none;
  overflow: hidden;
}

.whatsapp a {
  background: #25D366;
}

.phone a {
  background: var(--vk-gold);
}

.whatsapp a:hover,
.phone a:hover {
  transform: scale(1.12) translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Replace old PNG images with inline SVG via pseudo-element */
.whatsapp img,
.phone img {
  display: none !important;
}

/* WhatsApp SVG */
.whatsapp a::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Phone SVG */
.phone a::before {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* ── 14. Footer ──────────────────────────────────────── */
footer {
  background: var(--vk-navy);
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0;
}

.footer-upper {
  padding: 52px 0 0;
}

/* Heading */
.footer-recent-post h3 {
  color: var(--vk-gold) !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Body text */
.footer-recent-post p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  text-align: left;
  line-height: 1.75;
  margin-bottom: 10px;
}

/* List links */
.footer-recent-post .menu li,
.footer-recent-post .about-location ul li {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  margin-bottom: 7px;
  line-height: 1.5;
  position: relative;
  padding-left: 0;
  list-style: none;
  transition: var(--trans-fast);
}

.footer-recent-post .menu li::before {
  content: '›';
  color: var(--vk-gold);
  font-size: 15px;
  margin-right: 6px;
  line-height: 1;
}

.footer-recent-post .menu li a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  text-decoration: none;
  transition: var(--trans-fast);
}

.footer-recent-post .menu li a:hover {
  color: var(--vk-gold-light);
  padding-left: 4px;
}

.footer-recent-post .about-location li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.footer-recent-post .about-location li a {
  color: var(--vk-gold-light);
}

/* Divider between footer columns */
.footer-links .row {
  padding-bottom: 32px;
}

/* SEO keyword section */
.seo_section {
  background: rgba(0, 0, 0, 0.22);
  padding: 18px 20px;
  margin-top: 8px;
}

.seo_section .copyright-content p {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.38);
  text-align: left;
  margin: 0;
  line-height: 2;
}

.seo_section .copyright-content p a {
  color: rgba(255, 255, 255, 0.38);
  font-size: 11.5px;
  text-decoration: none;
  transition: var(--trans-fast);
}

.seo_section .copyright-content p a:hover {
  color: var(--vk-gold);
}

/* Copyright bar */
.copyright {
  background: rgba(0, 0, 0, 0.32);
  padding: 14px 15px;
  /* horizontal padding compensates missing container */
}

/* col-sm-12 inside .copyright has no .row parent — remove its own padding */
.copyright>.col-sm-12 {
  padding-left: 0;
  padding-right: 0;
  float: none;
  width: 100%;
}

.copyright .row {
  margin-left: 0;
  margin-right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.copyright .copyright-content p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
  margin: 0;
  text-align: left;
  line-height: 1.6;
}

.copyright .col-md-7 .copyright-content p {
  text-align: right;
}

.copyright .copyright-content a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
  text-decoration: none;
  transition: var(--trans-fast);
}

.copyright .copyright-content a:hover {
  color: var(--vk-gold);
}

/* Top Destinations section inside footer */
.top-destinations .section-title h2 {
  color: var(--vk-navy);
}


/* ── 15. Buttons ─────────────────────────────────────── */
.btn-blue {
  background: var(--vk-navy);
  border-color: var(--vk-navy);
  color: var(--vk-white);
  border-radius: var(--radius-sm);
  padding: 10px 26px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: var(--trans);
}

.btn-blue:hover {
  background: var(--vk-gold);
  border-color: var(--vk-gold);
  color: var(--vk-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212, 133, 10, 0.4);
}

/* Alert */
.alert-success {
  background: #1a5c2a;
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 16px 20px;
}


/* ── 16. Responsive — ≤ 991 px ───────────────────────── */
@media (max-width: 991px) {

  /* Show hamburger */
  .vk-hamburger {
    display: flex;
  }

  /* Nav slides in from right */
  #navbar.navbar-nav-wrapper {
    position: fixed !important;
    top: 0;
    right: -290px;
    width: 280px;
    height: 100vh;
    background: var(--vk-navy-mid);
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1006;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding: calc(var(--nav-h) + 56px) 0 48px;
    display: block !important;
    flex: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }

  #navbar.navbar-nav-wrapper.vk-open {
    right: 0;
  }

  /* Stack nav items vertically */
  ul.nav.navbar-nav#responsive-menu {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 100%;
  }

  .nav.navbar-nav>li {
    display: block !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .nav.navbar-nav>li>a {
    padding: 14px 20px !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.90) !important;
    border-radius: 0 !important;
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: 0.7px !important;
  }

  .nav.navbar-nav>li>a:hover,
  .nav.navbar-nav>li>a:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    padding-left: 26px !important;
    color: var(--vk-gold-light) !important;
  }

  /* Mobile dropdowns: stack below parent, JS-toggled */
  .nav.navbar-nav li ul {
    position: static !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 0;
    box-shadow: none;
    border: none !important;
    border-top: none !important;
    padding: 4px 0;
    /* Hidden until .vk-open added by JS */
    display: none !important;
    width: 100%;
    pointer-events: auto;
    transition: none;
  }

  .nav.navbar-nav li ul.vk-open {
    display: block !important;
  }

  .nav.navbar-nav li ul li a {
    color: rgba(255, 255, 255, 0.72) !important;
    padding: 10px 28px !important;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    white-space: normal;
    text-transform: none;
    letter-spacing: 0.2px;
  }

  .nav.navbar-nav li ul li a:hover {
    color: var(--vk-gold-light) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding-left: 34px !important;
  }

  .nav.navbar-nav li ul li:last-child a {
    border-bottom: none !important;
  }

  /* CTA button in mobile menu */
  li.vk-nav-cta {
    padding: 16px 20px;
    border-bottom: none !important;
  }

  li.vk-nav-cta>a {
    margin-left: 0 !important;
    display: block !important;
    text-align: center;
    padding: 12px 20px !important;
    border-radius: var(--radius-pill) !important;
  }

  /* Old SlickNav — hidden since we have our own hamburger */
  #slicknav-mobile {
    display: none !important;
  }

  /* Banner */
  #home_banner .item img {
    height: 320px;
  }

  .kenburns_061_slide {
    bottom: 24px;
    padding: 14px 20px;
    max-width: 88%;
    min-width: 260px;
  }

  .kenburns_061_slide h1,
  .kenburns_061_slide h2 {
    font-size: 18px !important;
    letter-spacing: 0.8px;
  }

  .kenburns_061_slide h3 {
    font-size: 13px;
  }

  /* Copyright — stack columns and left-align everything on tablet/mobile */
  .copyright .row {
    display: block;
  }

  .copyright .col-md-5,
  .copyright .col-md-7 {
    width: 100%;
    float: none;
    padding: 0;
  }

  .copyright .col-md-7 .copyright-content p {
    text-align: left;
    margin-top: 6px;
  }
}


/* ── 17. Responsive — ≤ 767 px ───────────────────────── */
@media (max-width: 767px) {

  /* Hide upper header on small screens to save vertical space */
  .upper-head {
    display: none;
  }

  /* Nav moves to top (upper-head is hidden), body padding adjusts accordingly */
  .navigation {
    top: 0 !important;
  }

  body {
    padding-top: 70px;
  }

  #vk-hero {
    margin-top: -70px;
  }

  section.breadcrumb-outer {
    margin-top: -70px;
    padding-top: 100px;
  }

  /* Reduce section padding */
  .top-destinations,
  .popular-packages {
    padding: 32px 5px;
  }

  /* Banner */
  #home_banner .item img {
    height: 240px;
  }

  .kenburns_061_slide {
    bottom: 14px;
    padding: 10px 14px;
    min-width: 0;
    max-width: 92%;
  }

  .kenburns_061_slide h1,
  .kenburns_061_slide h2 {
    font-size: 15px !important;
  }

  .kenburns_061_slide h3 {
    font-size: 12px;
    display: none;
  }

  /* Destination grid — 2 per row */
  .top-destination-item {
    aspect-ratio: 3 / 2;
  }

  /* Card image height */
  .package-image {
    height: 150px;
  }

  /* Section heading */
  .popular-packages .text-left h2,
  .top-destinations .section-title h2 {
    font-size: 18px;
  }

  /* Footer columns stack */
  .footer-links .col-sm-4,
  .footer-links .col-sm-8 {
    width: 100%;
  }

  .footer-recent-post {
    margin-bottom: 28px;
  }

  /* Floating buttons smaller on mobile */
  .whatsapp a,
  .phone a {
    width: 46px;
    height: 46px;
  }

  .phone {
    bottom: 82px;
  }
}


/* ── 18. Responsive — ≤ 480 px ───────────────────────── */
@media (max-width: 480px) {
  .logo img {
    height: 40px;
  }

  .nav.navbar-nav li ul li a {
    font-size: 12px;
    padding: 9px 24px !important;
  }

  #home_banner .item img {
    height: 200px;
  }

  .popular-packages .text-left {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  a.ri8 {
    align-self: flex-start;
  }
}


/* ── 19. Day / Night Mode Toggle Button ─────────────── */

/* Circular icon button always visible in the navbar */
/* ── Theme toggle: pill switch ── */
.vk-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 58px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}

/* Sliding knob */
.vk-theme-toggle::before {
  content: '';
  position: absolute;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease;
  z-index: 1;
}

/* Dark mode: slide knob right + change track colour */
:root.vk-dark .vk-theme-toggle {
  background: rgba(212, 133, 10, 0.30);
  border-color: rgba(212, 133, 10, 0.55);
}

:root.vk-dark .vk-theme-toggle::before {
  transform: translateX(30px);
  background: #f0a62e;
}

/* Hover state */
.vk-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.40);
}

:root.vk-dark .vk-theme-toggle:hover {
  background: rgba(212, 133, 10, 0.45);
  border-color: rgba(212, 133, 10, 0.80);
}

.vk-theme-toggle:focus-visible {
  outline: 2px solid var(--vk-gold);
  outline-offset: 3px;
}

/* Icons sit inside the track on each side */
.vk-theme-toggle svg {
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Moon icon — right side (visible in light mode) */
.vk-icon-moon {
  right: 6px;
  opacity: 1;
  color: rgba(255, 255, 255, 0.75);
}

/* Sun icon — left side (visible in dark mode) */
.vk-icon-sun {
  left: 6px;
  opacity: 0;
  color: #0d1b2a;
}

/* Dark mode: flip icon visibility */
:root.vk-dark .vk-icon-moon {
  opacity: 0;
}

:root.vk-dark .vk-icon-sun {
  opacity: 1;
}


/* ── 20. Dark Mode ───────────────────────────────────── */

/*
   Class vk-dark is placed on <html> by the anti-flash inline
   script in header.php <head>, then kept in sync by redesign.js.
   Using :root.vk-dark so the class is on the html element —
   this eliminates flash-of-wrong-theme on page load.
*/

/* Override CSS variables — anything using var() auto-inherits */
:root.vk-dark {
  --vk-light: #0f172a;
  /* page background  */
  --vk-white: #1e293b;
  /* surface / cards  */
  --vk-text: #e2e8f0;
  /* primary text     */
  --vk-muted: #94a3b8;
  /* secondary text   */
  --vk-border: #334155;
  /* borders / dividers */
}

/* Smooth background transition when toggling */
:root.vk-dark body,
body {
  transition: background-color 0.3s ease, color 0.2s ease;
}

/* Body base (override style.css hardcoded #fff) */
:root.vk-dark body {
  background: var(--vk-light);
  color: var(--vk-text);
}

/* Headings (style.css uses colour on h1 only; h2-h6 are unset → inherit) */
:root.vk-dark h1,
:root.vk-dark h2,
:root.vk-dark h3,
:root.vk-dark h4,
:root.vk-dark h5,
:root.vk-dark h6 {
  color: var(--vk-text);
}

/* Paragraphs (style.css: color:#555) */
:root.vk-dark p {
  color: var(--vk-muted);
}

/* Body links (style.css: color:#002147) */
:root.vk-dark a {
  color: #94c4f5;
}

:root.vk-dark a:hover {
  color: var(--vk-gold-light);
}

/* Section backgrounds — override style.css alternating bg */
:root.vk-dark section:nth-child(odd) {
  background: var(--vk-light) !important;
}

:root.vk-dark section:nth-child(even) {
  background: var(--vk-white) !important;
}

:root.vk-dark section.white-bg {
  background: var(--vk-white) !important;
}

/* Navigation dropdowns — override white bg */
:root.vk-dark .nav.navbar-nav li ul {
  background: #1e293b;
  border-color: #334155;
}

:root.vk-dark .nav.navbar-nav li ul li a {
  color: var(--vk-text) !important;
  border-bottom-color: #334155;
}

:root.vk-dark .nav.navbar-nav li ul li a:hover {
  background: #0f172a;
  color: var(--vk-gold-light) !important;
}

/* Service / package cards */
:root.vk-dark .package-item {
  background: var(--vk-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

:root.vk-dark .package-content h4 {
  color: var(--vk-text);
}

:root.vk-dark .package-content p {
  color: var(--vk-muted);
}

/* VK box utility */
:root.vk-dark .vkbox {
  background: var(--vk-white);
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.35);
}

/* Section headings (text that won't auto-inherit from h2 override above) */
:root.vk-dark .popular-packages .text-left h2 {
  color: var(--vk-text);
}

:root.vk-dark .top-destinations .section-title h2 {
  color: var(--vk-text);
}

:root.vk-dark .section-title h2 {
  color: var(--vk-text);
}

:root.vk-dark .section-title p {
  color: var(--vk-muted);
}

/* Form elements (style.css: bg #fff, border #847d7d) */
:root.vk-dark .form-control,
:root.vk-dark input[type=text],
:root.vk-dark input[type=email],
:root.vk-dark input[type=tel],
:root.vk-dark input[type=number],
:root.vk-dark input[type=date],
:root.vk-dark input[type=password],
:root.vk-dark input[type=search],
:root.vk-dark select,
:root.vk-dark textarea {
  background: var(--vk-white);
  border-color: var(--vk-border);
  color: var(--vk-text);
}

/* Breadcrumb box */
:root.vk-dark .breadcrumb-content ul {
  background: var(--vk-white);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
}

:root.vk-dark .breadcrumb-content li a {
  color: #94c4f5;
}

:root.vk-dark .breadcrumb>.active {
  color: var(--vk-text);
}

/* Tables (detail pages) */
:root.vk-dark table {
  background: transparent;
}

:root.vk-dark td,
:root.vk-dark th {
  color: var(--vk-text);
  border-color: var(--vk-border) !important;
}

/* Footer/navigation already dark — stays unchanged in dark mode */


/* ── 21. Accessibility & Print ───────────────────────── */

/* Focus outlines for keyboard navigation */
.nav.navbar-nav>li>a:focus,
.nav.navbar-nav li ul li a:focus,
.vk-hamburger:focus,
a:focus-visible {
  outline: 2px solid var(--vk-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip to content (if ever added) */
.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  z-index: 99999;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {

  .navigation,
  .upper-head,
  .whatsapp,
  .phone,
  footer {
    display: none;
  }

  #home_banner {
    display: none;
  }

  #vk-hero {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HERO SECTION  — vk-hero
   ═══════════════════════════════════════════════════════════════ */

#vk-hero {
  position: relative;
  width: 100%;
  height: 82vh;
  min-height: 520px;
  max-height: 780px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* extra bottom space so the destination strip overlaps into the hero */
  padding-bottom: 80px;
}

/* ── Background image layers ── */
.vk-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s ease, transform 6s ease;
  will-change: opacity, transform;
}

.vk-hero-bg.vk-hero-bg-active {
  opacity: 1;
  transform: scale(1);
}

/* ── Dark gradient overlay ── */
.vk-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.45) 50%,
      rgba(0, 0, 0, 0.72) 100%);
  z-index: 1;
}

/* ── Text content ── */
.vk-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
  max-width: 820px;
}

.vk-hero-eyebrow {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.90);
  margin-bottom: 18px;
}

.vk-hero-title {
  font-size: clamp(48px, 7.5vw, 96px);
  font-weight: 900;
  line-height: 1.08;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0 0 20px;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.65);
}

/* Animated city name */
.vk-city-highlight {
  color: #C9A227;
  display: inline-block;
  font-weight: 900;
}

@keyframes vkCitySlideIn {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.vk-city-highlight.vk-city-anim {
  animation: vkCitySlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.vk-hero-tagline {
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.5px;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   DESTINATION CIRCLES STRIP  — vk-dest-section
   ═══════════════════════════════════════════════════════════════ */

#vk-dest-section {
  background: #ffffff;
  padding: 18px 0 20px;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12), 0 4px 20px rgba(0, 0, 0, 0.07);
  position: relative;
  z-index: 10;
  margin-top: -72px;
  /* overlap into the hero bottom */
  border-radius: 20px 20px 0 0;
}

:root.vk-dark #vk-dest-section {
  background: #152237;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.35), 0 4px 20px rgba(0, 0, 0, 0.20);
}

.vk-dest-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.vk-dest-inner::-webkit-scrollbar {
  display: none;
}

.vk-dest-track {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 25px;
  flex-wrap: nowrap;
  min-width: max-content;
  padding: 6px 8px 4px;
}

/* Individual destination card */
.vk-dest-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  cursor: pointer;
  gap: 10px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.vk-dest-item:hover {
  transform: translateY(-4px);
  text-decoration: none !important;
}

/* Circle image */
.vk-dest-circle {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  border: 3.5px solid #e0e0e0;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
  flex-shrink: 0;
}

.vk-dest-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.vk-dest-item:hover .vk-dest-circle img {
  transform: scale(1.08);
}

/* Active state */
.vk-dest-item.vk-dest-active .vk-dest-circle {
  border-color: #C9A227;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22);
  transform: scale(1.1);
}

/* Label */
.vk-dest-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #444;
  letter-spacing: 0.3px;
  text-align: center;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.vk-dest-item.vk-dest-active .vk-dest-name {
  color: #C9A227;
}

:root.vk-dark .vk-dest-name {
  color: #ccc;
}

:root.vk-dark .vk-dest-item.vk-dest-active .vk-dest-name {
  color: #C9A227;
}

:root.vk-dark .vk-dest-circle {
  border-color: #444;
}




/* ── Responsive ── */
@media (max-width: 768px) {
  #vk-hero {
    height: 72vh;
    min-height: 420px;
    padding-bottom: 60px;
  }

  #vk-dest-section {
    margin-top: -56px;
    border-radius: 16px 16px 0 0;
  }

  .vk-hero-title {
    font-size: clamp(36px, 7vw, 60px);
  }

  .vk-dest-inner {
    overflow-x: visible;
    padding: 0 8px;
  }

  .vk-dest-track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 4px;
    min-width: auto;
    padding: 6px 4px 4px;
  }

  .vk-dest-item {
    width: 23%;
    flex-shrink: 0;
  }

  .vk-dest-circle {
    width: 72px;
    height: 72px;
  }

  .vk-dest-name {
    font-size: 11.5px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  #vk-hero {
    height: 65vh;
    min-height: 360px;
    padding-bottom: 48px;
  }

  #vk-dest-section {
    margin-top: -44px;
    border-radius: 14px 14px 0 0;
  }

  .vk-hero-eyebrow {
    font-size: 13px;
    letter-spacing: 1.5px;
  }

  .vk-hero-title {
    font-size: clamp(30px, 8vw, 48px);
    letter-spacing: 1.5px;
  }

  .vk-dest-inner {
    overflow-x: visible;
    padding: 0 4px;
  }

  .vk-dest-track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 2px;
    min-width: auto;
    padding: 4px 2px;
  }

  .vk-dest-item {
    width: 23%;
  }

  .vk-dest-circle {
    width: 62px;
    height: 62px;
    border-width: 2.5px;
  }

  .vk-dest-name {
    font-size: 10.5px;
    white-space: normal;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════════
   WHAT WE OFFER SECTION  — #vk-offer-section
   ═══════════════════════════════════════════════════════════════ */

#vk-offer-section {
  background: #f0eeeb;
  padding: 56px 24px 64px;
}

:root.vk-dark #vk-offer-section {
  background: #111111;
}

/* ── Header ── */
.vk-offer-header {
  text-align: center;
  margin-bottom: 36px;
}

.vk-offer-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e8295c;
  margin-bottom: 10px;
  text-align: center;
}

.vk-offer-title {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  color: #222222;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-align: center;
}

:root.vk-dark .vk-offer-title {
  color: #f0eeeb;
}

/* ── Card grid: 5 columns, middle card taller ── */
.vk-offer-grid {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
}

/* ── Individual card ── */
.vk-offer-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  height: 240px;
  display: block;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.vk-offer-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  text-decoration: none !important;
}

/* Featured (middle) card is taller */
.vk-offer-card-featured {
  height: 290px;
  flex: 1.15;
}

/* ── Card image ── */
.vk-offer-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.vk-offer-card:hover img {
  transform: scale(1.07);
}

/* ── Dark overlay ── */
.vk-offer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.18) 55%,
      rgba(0, 0, 0, 0.04) 100%);
  border-radius: inherit;
}

/* ── Label ── */
.vk-offer-label {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.vk-offer-icon {
  font-size: 20px;
  line-height: 1;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .vk-offer-grid {
    gap: 10px;
  }

  .vk-offer-card {
    height: 190px;
  }

  .vk-offer-card-featured {
    height: 230px;
  }

  .vk-offer-label {
    font-size: 13px;
    bottom: 12px;
    left: 12px;
  }

  .vk-offer-icon {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  #vk-offer-section {
    padding: 40px 16px 48px;
  }

  .vk-offer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
  }

  /* Featured card spans full width in mobile grid */
  .vk-offer-card-featured {
    grid-column: 1 / -1;
    height: 200px;
    flex: unset;
  }

  .vk-offer-card {
    height: 150px;
    flex: unset;
  }

  .vk-offer-label {
    font-size: 13px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   POPULAR PACKAGES — TripAdvisor-style cards  #vk-pkg-section
   ═══════════════════════════════════════════════════════════════ */

#vk-pkg-section {
  background: #dfdddd;
  padding: 52px 0 60px;
}

:root.vk-dark #vk-pkg-section {
  background: #161616;
}

/* ── Header row ── */
.vk-pkg-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 24px;
  gap: 16px;
}

.vk-pkg-title-main {
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 800;
  color: #1a1a2e;
  margin: 0 0 4px;
  line-height: 1.2;
}

:root.vk-dark .vk-pkg-title-main {
  color: #f0eeeb;
}

.vk-pkg-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.vk-pkg-see-all {
  font-size: 14px;
  font-weight: 600;
  color: #C9A227;
  white-space: nowrap;
  text-decoration: none !important;
  flex-shrink: 0;
  transition: color 0.2s;
}

.vk-pkg-see-all:hover {
  color: #a07d10;
  text-decoration: none !important;
}

/* ── Scroll container + arrows ── */
.vk-pkg-scroll-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.vk-pkg-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.vk-pkg-track::-webkit-scrollbar {
  display: none;
}

/* ── Arrow buttons ── */
.vk-pkg-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #333;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, box-shadow 0.2s;
}

.vk-pkg-arrow:hover {
  background: #C9A227;
  color: #fff;
  border-color: #C9A227;
  box-shadow: 0 4px 16px rgba(201, 162, 39, 0.35);
}

.vk-pkg-prev {
  left: -8px;
}

.vk-pkg-next {
  right: -8px;
}

:root.vk-dark .vk-pkg-arrow {
  background: #2a2a2a;
  border-color: #444;
  color: #ccc;
}

/* ── Individual card ── */
.vk-pkg-card {
  flex: 0 0 220px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  border: 1px solid #f0eeeb;
}

.vk-pkg-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
  text-decoration: none !important;
}

:root.vk-dark .vk-pkg-card {
  background: #222;
  border-color: #333;
}

/* ── Image wrapper ── */
.vk-pkg-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.vk-pkg-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.vk-pkg-card:hover .vk-pkg-img-wrap img {
  transform: scale(1.07);
}

/* Wishlist heart */
.vk-pkg-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  transition: background 0.2s, transform 0.2s;
  z-index: 2;
}

.vk-pkg-wish svg {
  width: 16px;
  height: 16px;
  color: #888;
  transition: color 0.2s, fill 0.2s;
}

.vk-pkg-wish:hover,
.vk-pkg-wish.vk-wished {
  background: #fff;
  transform: scale(1.12);
}

.vk-pkg-wish.vk-wished svg {
  color: #e8295c;
  fill: #e8295c;
}

/* ── Card body ── */
.vk-pkg-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* Location badge */
.vk-pkg-location {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  padding: 3px 8px;
  border-radius: 20px;
  width: fit-content;
}

:root.vk-dark .vk-pkg-location {
  background: #2e2e2e;
  color: #aaa;
}

/* Title */
.vk-pkg-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:root.vk-dark .vk-pkg-name {
  color: #f0eeeb;
}

/* Stars + rating */
.vk-pkg-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.vk-pkg-stars {
  color: #00aa6c;
  font-size: 13px;
  letter-spacing: 1px;
}

.vk-pkg-rating-val {
  font-size: 12.5px;
  font-weight: 700;
  color: #1a1a2e;
}

:root.vk-dark .vk-pkg-rating-val {
  color: #f0eeeb;
}

.vk-pkg-review-count {
  font-size: 12px;
  color: #6b7280;
}

/* Duration */
.vk-pkg-duration {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

/* Price */
.vk-pkg-price {
  font-size: 13px;
  color: #444;
  margin: 2px 0 0;
}

.vk-pkg-price strong {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a2e;
}

.vk-pkg-price .vk-pkg-orig-price {
  font-size: 12px !important;
  color: #e74a3b !important;
  text-decoration: line-through !important;
  margin-right: 4px;
  font-weight: 600 !important;
}

.vk-pkg-price .vk-pkg-disc-price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1cc88a !important;
}

:root.vk-dark .vk-pkg-price,
:root.vk-dark .vk-pkg-price strong {
  color: #f0eeeb;
}

:root.vk-dark .vk-pkg-price .vk-pkg-disc-price {
  color: #2ecc71;
}

:root.vk-dark .vk-pkg-price .vk-pkg-orig-price {
  color: #ff6b6b;
}


/* ── Responsive ── */
@media (max-width: 768px) {
  .vk-pkg-header {
    padding: 0 16px;
  }

  .vk-pkg-scroll-wrap {
    padding: 0 16px;
  }

  .vk-pkg-card {
    flex: 0 0 180px;
  }

  .vk-pkg-img-wrap {
    height: 160px;
  }

  .vk-pkg-arrow {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   TOP ATTRACTIONS GRID  — #vk-attr-section
   ═══════════════════════════════════════════════════════════════ */

#vk-attr-section {
  background: #f8f5f1;
  padding: 56px 24px 64px;
}

:root.vk-dark #vk-attr-section {
  background: #111;
}

/* ── Header ── */
.vk-attr-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
}

.vk-attr-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #C9A227;
  margin-bottom: 10px;
}

.vk-attr-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: #1a1a2e;
  margin: 0 0 10px;
  line-height: 1.25;
}

:root.vk-dark .vk-attr-title {
  color: #f0eeeb;
}

.vk-attr-sub {
  font-size: 14.5px;
  color: #6b7280;
  margin: 0;
}

/* ── Grid ── */
.vk-attr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Base card ── */
.vk-attr-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: block;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vk-attr-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  text-decoration: none !important;
}

.vk-attr-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.vk-attr-card:hover img {
  transform: scale(1.08);
}

/* ── Featured: tall (spans 2 rows) ── */
.vk-attr-featured {
  grid-row: span 2;
}

/* ── Wide: spans 2 columns ── */
.vk-attr-wide {
  grid-column: span 2;
}

/* ── Dark overlay ── */
.vk-attr-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.15) 55%,
      transparent 100%);
}

/* ── Info block ── */
.vk-attr-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 18px;
}

.vk-attr-info h3 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Featured / wide cards show a subtitle too */
.vk-attr-featured .vk-attr-info h3,
.vk-attr-wide .vk-attr-info h3 {
  font-size: 22px;
  margin-bottom: 4px;
}

.vk-attr-info p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Tag badge */
.vk-attr-tag {
  display: inline-block;
  background: #C9A227;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* Explore arrow on hover */
.vk-attr-card::after {
  content: 'Explore →';
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.vk-attr-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .vk-attr-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 170px;
  }
}

@media (max-width: 600px) {
  #vk-attr-section {
    padding: 40px 14px 48px;
  }

  .vk-attr-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
    gap: 10px;
  }

  .vk-attr-featured {
    grid-row: span 2;
  }

  .vk-attr-wide {
    grid-column: span 2;
  }

  .vk-attr-info h3 {
    font-size: 13px;
  }

  .vk-attr-featured .vk-attr-info h3,
  .vk-attr-wide .vk-attr-info h3 {
    font-size: 16px;
  }

  .vk-attr-card::after {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   EXPLORE DESTINATIONS CARD STRIP  — vk-explore-section
   ═══════════════════════════════════════════════════════════════ */

#vk-explore-section {
  padding: 56px 0;
  background: #fff;
}

:root.vk-dark #vk-explore-section {
  background: var(--vk-surface);
}

/* Header row: title+subtitle left, arrows right */
.vk-explore-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
}

.vk-explore-header-text {
  flex: 1;
  min-width: 0;
}

.vk-explore-title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  color: var(--vk-navy);
  margin: 0 0 4px;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

:root.vk-dark .vk-explore-title {
  color: var(--vk-text);
}

.vk-explore-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

:root.vk-dark .vk-explore-subtitle {
  color: #9ca3af;
}

/* Arrow pair */
.vk-explore-arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-self: center;
}

.vk-explore-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  padding: 0;
}

.vk-explore-arrow:hover {
  background: var(--vk-navy);
  border-color: var(--vk-navy);
  color: #fff;
}

:root.vk-dark .vk-explore-arrow {
  background: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}

:root.vk-dark .vk-explore-arrow:hover {
  background: var(--vk-gold);
  border-color: var(--vk-gold);
  color: #111;
}

/* Track wrapper clips overflow so arrows stay inside container */
.vk-explore-track-wrap {
  overflow: hidden;
}

.vk-explore-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.vk-explore-track::-webkit-scrollbar {
  display: none;
}

/* Card */
.vk-explore-card {
  position: relative;
  flex: 0 0 190px;
  height: 290px;
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
  display: block;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.vk-explore-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.17);
  text-decoration: none;
}

.vk-explore-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.vk-explore-card:hover img {
  transform: scale(1.07);
}

/* Bottom gradient overlay */
.vk-explore-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.70) 0%,
      rgba(0, 0, 0, 0.15) 45%,
      transparent 68%);
  pointer-events: none;
}

/* City name */
.vk-explore-name {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1px;
  line-height: 1.2;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  #vk-explore-section {
    padding: 40px 0;
  }

  .vk-explore-card {
    flex: 0 0 165px;
    height: 255px;
  }
}

@media (max-width: 600px) {
  #vk-explore-section {
    padding: 32px 0;
  }

  .vk-explore-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .vk-explore-card {
    flex: 0 0 148px;
    height: 225px;
    border-radius: 12px;
  }

  .vk-explore-name {
    font-size: 14px;
    bottom: 10px;
    left: 10px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER  — vk-footer
   ═══════════════════════════════════════════════════════════════ */

/* ── Override legacy footer styles ── */
footer.vk-footer .footer-upper,
footer.vk-footer .copyright {
  background: none !important;
  padding: 0 !important;
  border: none !important;
}

/* ── Main footer wrapper ── */
.vk-footer {
  background: #0d1b2a !important;
  color: #c5cdd8 !important;
  font-size: 14px;
  line-height: 1.65;
}

/* ── Main links band ── */
.vk-footer-main {
  padding: 56px 0 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.vk-footer-main .container-fluid {
  padding-left: 40px;
  padding-right: 40px;
}

.vk-footer-row {
  display: flex;
  flex-wrap: wrap;
}

.vk-footer-col {
  padding: 0 20px 28px;
}

/* ── Brand column ── */
.vk-footer-logo-link {
  display: inline-block;
  margin-bottom: 14px;
}

.vk-footer-logo {
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.vk-footer-about {
  color: #8fa3b8;
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 280px;
}

.vk-footer-address {
  font-style: normal;
  color: #8fa3b8;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.vk-footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.vk-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #8fa3b8;
  font-size: 13.5px;
  margin-bottom: 6px;
}

.vk-footer-contact .fa {
  color: #d4850a;
  margin-top: 3px;
  flex-shrink: 0;
  font-size: 13px;
}

.vk-footer-contact a {
  color: #c5cdd8;
  text-decoration: none;
  transition: color 0.18s;
}

.vk-footer-contact a:hover {
  color: #d4850a;
}

/* ── Social icons ── */
.vk-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.vk-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #c5cdd8;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.vk-footer-social a:hover {
  background: #d4850a;
  color: #fff;
}

/* ── Column headings ── */
.vk-footer-heading {
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #d4850a;
  display: inline-block;
}

/* ── Link lists ── */
.vk-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.vk-footer-links a {
  color: #8fa3b8;
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.18s, padding-left 0.18s;
  display: block;
}

.vk-footer-links a:hover {
  color: #d4850a;
  padding-left: 4px;
}

/* Inline pill style for nearby destinations */
.vk-footer-links-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vk-footer-links-inline li {
  margin: 0;
}

.vk-footer-links-inline a {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  color: #8fa3b8;
  transition: background 0.18s, color 0.18s;
}

.vk-footer-links-inline a:hover {
  background: #d4850a;
  color: #fff;
  padding-left: 10px;
}

/* ── SEO keywords band ── */
.vk-footer-seo {
  padding: 14px 0;
  background: #091422;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.vk-footer-seo .container-fluid {
  padding-left: 40px;
  padding-right: 40px;
}

.vk-footer-seo-links {
  margin: 0;
  line-height: 2;
  font-size: 12.5px;
}

.vk-footer-seo-links a {
  color: #5a7a96;
  text-decoration: none;
  transition: color 0.18s;
  margin-right: 4px;
}

.vk-footer-seo-links a::after {
  content: ' |';
  color: #2a3f52;
  margin-left: 4px;
}

.vk-footer-seo-links a:last-child::after {
  content: '';
}

.vk-footer-seo-links a:hover {
  color: #d4850a;
}

/* ── Copyright bar ── */
.vk-footer-bottom {
  padding: 18px 0;
  background: #8b0202 !important;
}

.vk-footer-bottom .container-fluid {
  padding-left: 40px;
  padding-right: 40px;
}

.vk-footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.vk-footer-copy {
  color: #ffffff;
  font-size: 12.5px;
  margin: 0;
}

.vk-footer-policy {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}

.vk-footer-policy a {
  color: #ffffff;
  text-decoration: none;
  font-size: 12.5px;
  transition: color 0.18s;
  padding: 0 10px;
  border-right: 1px solid #1e3246;
}

.vk-footer-policy a:last-child {
  border-right: none;
}

.vk-footer-policy a:hover {
  color: #d4850a;
}

/* ── Dark mode overrides ── */
:root.vk-dark .vk-footer {
  background: #060e17;
}

:root.vk-dark .vk-footer-seo {
  background: #040a10;
}

:root.vk-dark .vk-footer-bottom {
  background: #020608;
}

/* ── Responsive ── */
@media (max-width: 991px) {

  .vk-footer-main .container-fluid,
  .vk-footer-seo .container-fluid,
  .vk-footer-bottom .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .vk-footer-main {
    padding: 40px 0 24px;
  }

  .vk-footer-col {
    padding: 0 14px 24px;
  }
}

@media (max-width: 767px) {

  .vk-footer-main .container-fluid,
  .vk-footer-seo .container-fluid,
  .vk-footer-bottom .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

  .vk-footer-col {
    padding: 0 8px 20px;
    width: 50%;
  }

  .vk-footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .vk-footer-policy a {
    padding: 0 8px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .vk-footer-col {
    width: 100%;
  }

  .vk-footer-about {
    max-width: 100%;
  }
}