/* =========================================================
   KODAI BOOK MY TAXI
   PREMIUM HOMEPAGE DESIGN SYSTEM
   File: css/index.css

   Design:
   - Luxury Travel Editorial
   - Navy / Gold / Cream
   - Premium Serif Headings
   - Montserrat UI
   - Responsive
   - Smooth Motion
   ========================================================= */

/* =========================================================
   01. ROOT / DESIGN TOKENS
========================================================= */

:root {
  --kbt-navy: #0b2342;
  --kbt-navy-dark: #06182f;
  --kbt-navy-soft: #153a65;

  --kbt-gold: #d59a2a;
  --kbt-gold-dark: #b97812;
  --kbt-gold-light: #e8b64f;
  --kbt-gold-soft: #f6e8c8;

  --kbt-white: #ffffff;
  --kbt-cream: #fbf8f1;
  --kbt-soft: #f5f7fa;

  --kbt-text: #182334;
  --kbt-text-soft: #566274;
  --kbt-muted: #7a8493;

  --kbt-border: rgba(11, 35, 66, 0.1);

  --kbt-shadow-sm: 0 8px 25px rgba(11, 35, 66, 0.07);

  --kbt-shadow: 0 18px 50px rgba(11, 35, 66, 0.11);

  --kbt-shadow-lg: 0 28px 75px rgba(11, 35, 66, 0.16);

  --kbt-radius-sm: 12px;
  --kbt-radius: 18px;
  --kbt-radius-lg: 26px;

  --kbt-container: 1440px;

  --kbt-section-space: clamp(50px, 5vw, 75px);

  --kbt-heading: Georgia, "Times New Roman", serif;

  --kbt-body: "Montserrat", Arial, sans-serif;

  --kbt-transition: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   GLOBAL PAGE RESET
========================================================= */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

body {
  overflow-x: hidden;
}

.kbt-home {
  width: 100%;
  margin: 0 !important;
  padding: 0;
}

/* =========================================================
   02. GLOBAL
========================================================= */

.kbt-home {
  width: 100%;

  overflow: hidden;

  color: var(--kbt-text);

  background: linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%);

  font-family: var(--kbt-body);
}

.kbt-home *,
.kbt-home *::before,
.kbt-home *::after {
  box-sizing: border-box;
}

.kbt-home img {
  max-width: 100%;

  display: block;
}

.kbt-home a {
  text-decoration: none;
}

.kbt-home button {
  font-family: inherit;
}

.kbt-container {
  width: min(calc(100% - 80px), var(--kbt-container));

  margin-inline: auto;
}

.kbt-section {
  position: relative;

  padding-block: var(--kbt-section-space);
}

/* =========================================================
   03. PREMIUM SECTION HEADING
========================================================= */

.kbt-section-heading {
  position: relative;
}

.kbt-section-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 10px;

  color: var(--kbt-gold);

  font-size: 10px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: 0.25em;

  text-transform: uppercase;
}

.kbt-section-eyebrow::before {
  content: "";

  width: 25px;

  height: 2px;

  border-radius: 10px;

  background: linear-gradient(90deg, var(--kbt-gold), var(--kbt-gold-light));
}

.kbt-section-heading h2 {
  margin: 0;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading);

  font-size: clamp(35px, 4vw, 57px);

  line-height: 0.98;

  font-weight: 700;

  letter-spacing: -0.035em;
}

.kbt-section-heading h2 span {
  color: var(--kbt-gold);

  font-style: italic;
}

.kbt-section-heading p {
  max-width: 600px;

  margin: 13px 0 0;

  color: var(--kbt-text-soft);

  font-size: 12px;

  line-height: 1.8;
}

.kbt-section-heading-row {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 30px;
}

/* =========================================================
   04. VIEW ALL LINK
========================================================= */

.kbt-view-all {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

  color: var(--kbt-gold-dark);

  font-size: 10px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.kbt-view-all::after {
  content: "";

  position: absolute;

  left: 0;

  right: 20px;

  bottom: -6px;

  height: 1px;

  background: var(--kbt-gold);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.35s var(--kbt-transition);
}

.kbt-view-all i {
  font-size: 18px;

  transition: transform 0.3s ease;
}

.kbt-view-all:hover {
  color: var(--kbt-navy);

  transform: translateX(3px);
}

.kbt-view-all:hover::after {
  transform: scaleX(1);
}

.kbt-view-all:hover i {
  transform: translateX(5px);
}

/* =========================================================
   05. HERO
========================================================= */

.kbt-hero {
  position: relative;

  min-height: min(690px, calc(100vh - 110px));

  height: 690px;

  overflow: hidden;

  isolation: isolate;

  background: var(--kbt-navy-dark);
}

.kbt-hero-track {
  position: relative;

  width: 100%;

  height: 100%;
}

.kbt-hero-slide {
  position: absolute;

  inset: 0;

  visibility: hidden;

  opacity: 0;

  overflow: hidden;

  transition:
    opacity 1s ease,
    visibility 1s ease;
}

.kbt-hero-slide.is-active {
  visibility: visible;

  opacity: 1;

  z-index: 2;
}

.kbt-hero-image {
  position: absolute;

  inset: -2%;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  transform: scale(1.04);

  transition: transform 7s var(--kbt-transition);
}

.kbt-hero-slide.is-active .kbt-hero-image {
  transform: scale(1);
}

/* =========================================================
   HERO OVERLAY
========================================================= */

.kbt-hero-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(3, 16, 33, 0.9) 0%,
    rgba(5, 24, 47, 0.74) 32%,
    rgba(5, 24, 47, 0.34) 62%,
    rgba(5, 24, 47, 0.12) 100%
  );
}

.kbt-hero-overlay::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(2, 14, 27, 0.1),
    transparent 40%,
    rgba(2, 14, 27, 0.42)
  );
}

/* =========================================================
   HERO GLOW
========================================================= */

.kbt-hero-glow {
  position: absolute;

  width: 600px;

  height: 600px;

  left: -300px;

  top: 50%;

  transform: translateY(-50%);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(213, 154, 42, 0.13),
    transparent 68%
  );

  filter: blur(10px);

  pointer-events: none;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.kbt-hero-container {
  position: relative;

  z-index: 5;

  height: 100%;

  display: flex;

  align-items: center;
}

.kbt-hero-content {
  width: min(650px, 58%);

  padding-top: 20px;

  color: #fff;
}

.kbt-hero-eyebrow {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 18px;

  color: rgba(255, 255, 255, 0.85);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.34em;

  text-transform: uppercase;

  opacity: 0;

  transform: translateY(25px);
}

.kbt-hero-eyebrow-line {
  width: 32px;

  height: 2px;

  background: var(--kbt-gold-light);
}

.kbt-hero-slide.is-active .kbt-hero-eyebrow {
  animation: kbtHeroReveal 0.75s 0.15s var(--kbt-transition) forwards;
}

.kbt-hero-title {
  margin: 0;

  color: #fff;

  font-family: var(--kbt-heading);

  font-size: clamp(43px, 5.5vw, 76px);

  line-height: 0.94;

  letter-spacing: -0.045em;

  font-weight: 700;
}

.kbt-hero-title span {
  display: block;

  opacity: 0;

  transform: translateY(35px);
}

.kbt-hero-slide.is-active .kbt-hero-title-main {
  animation: kbtHeroReveal 0.85s 0.25s var(--kbt-transition) forwards;
}

.kbt-hero-slide.is-active .kbt-hero-title-highlight {
  color: var(--kbt-gold-light);

  font-style: italic;

  animation: kbtHeroReveal 0.85s 0.35s var(--kbt-transition) forwards;
}

.kbt-hero-slide.is-active .kbt-hero-title-last {
  animation: kbtHeroReveal 0.85s 0.45s var(--kbt-transition) forwards;
}

.kbt-hero-description {
  max-width: 580px;

  margin: 22px 0 24px;

  color: rgba(255, 255, 255, 0.86);

  font-size: 13px;

  line-height: 1.8;

  letter-spacing: 0.01em;

  opacity: 0;

  transform: translateY(25px);
}

.kbt-hero-slide.is-active .kbt-hero-description {
  animation: kbtHeroReveal 0.75s 0.55s var(--kbt-transition) forwards;
}

/* =========================================================
   HERO BENEFITS
========================================================= */

.kbt-hero-benefits {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 21px;

  margin-bottom: 27px;
}

.kbt-hero-benefit {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: rgba(255, 255, 255, 0.92);

  font-size: 10px;

  font-weight: 600;

  opacity: 0;

  transform: translateY(20px);
}

.kbt-hero-slide.is-active .kbt-hero-benefit {
  animation: kbtHeroReveal 0.7s 0.65s var(--kbt-transition) forwards;
}

.kbt-hero-slide.is-active .kbt-hero-benefit:nth-child(2) {
  animation-delay: 0.72s;
}

.kbt-hero-slide.is-active .kbt-hero-benefit:nth-child(3) {
  animation-delay: 0.79s;
}

.kbt-hero-benefit-icon {
  width: 25px;

  height: 25px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--kbt-gold-light);

  border: 1px solid rgba(232, 182, 79, 0.35);

  border-radius: 50%;

  background: rgba(213, 154, 42, 0.08);

  font-size: 14px;
}

/* =========================================================
   HERO ACTIONS
========================================================= */

.kbt-hero-actions {
  display: flex;

  align-items: center;

  gap: 11px;

  opacity: 0;

  transform: translateY(25px);
}

.kbt-hero-slide.is-active .kbt-hero-actions {
  animation: kbtHeroReveal 0.75s 0.82s var(--kbt-transition) forwards;
}

.kbt-hero-primary-btn,
.kbt-hero-secondary-btn {
  min-height: 49px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding: 0 19px;

  border-radius: 999px;

  font-size: 10px;

  font-weight: 700;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.kbt-hero-primary-btn {
  color: #fff;

  background: linear-gradient(135deg, var(--kbt-gold), var(--kbt-gold-dark));

  box-shadow: 0 13px 30px rgba(213, 154, 42, 0.25);
}

.kbt-hero-primary-btn i:last-child {
  font-size: 17px;

  transition: transform 0.3s ease;
}

.kbt-hero-primary-btn:hover {
  color: #fff;

  transform: translateY(-3px);

  box-shadow: 0 17px 38px rgba(213, 154, 42, 0.38);
}

.kbt-hero-primary-btn:hover i:last-child {
  transform: translateX(4px);
}

.kbt-hero-secondary-btn {
  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.45);

  background: rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);
}

.kbt-hero-secondary-btn:hover {
  color: var(--kbt-navy);

  background: #fff;

  border-color: #fff;

  transform: translateY(-3px);
}

/* =========================================================
   HERO LOCATION DECORATION
========================================================= */

.kbt-hero-location {
  position: absolute;

  right: 9%;

  top: 30%;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  color: rgba(255, 255, 255, 0.85);

  font-family: var(--kbt-heading);

  font-size: 17px;

  line-height: 1.1;

  text-align: center;

  font-style: italic;

  transform: rotate(-7deg);

  opacity: 0;

  pointer-events: none;
}

.kbt-hero-location strong {
  display: block;

  color: var(--kbt-gold-light);

  font-weight: 500;
}

.kbt-hero-slide.is-active .kbt-hero-location {
  animation: kbtHeroFloat 1s 1s var(--kbt-transition) forwards;
}

.kbt-hero-location-pin {
  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--kbt-gold-light);

  font-size: 27px;
}

/* =========================================================
   HERO ARROWS
========================================================= */

.kbt-hero-arrow {
  position: absolute;

  z-index: 10;

  top: 50%;

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.38);

  border-radius: 50%;

  color: #fff;

  background: rgba(5, 20, 38, 0.28);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;

  transform: translateY(-50%);

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.kbt-hero-arrow i {
  font-size: 25px;
}

.kbt-hero-prev {
  left: 22px;
}

.kbt-hero-next {
  right: 22px;
}

.kbt-hero-arrow:hover {
  border-color: var(--kbt-gold-light);

  background: var(--kbt-gold);

  transform: translateY(-50%) scale(1.06);
}

/* =========================================================
   HERO PAGINATION
========================================================= */

.kbt-hero-pagination {
  position: absolute;

  z-index: 10;

  left: 50%;

  bottom: 22px;

  display: flex;

  align-items: center;

  gap: 7px;

  transform: translateX(-50%);
}

.kbt-hero-dot {
  width: 7px;

  height: 7px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.55);

  cursor: pointer;

  transition:
    width 0.35s ease,
    background 0.35s ease;
}

.kbt-hero-dot.is-active {
  width: 26px;

  border-radius: 20px;

  background: var(--kbt-gold-light);
}

/* =========================================================
   HERO SCROLL
========================================================= */

.kbt-hero-scroll {
  position: absolute;

  z-index: 10;

  right: 30px;

  bottom: 25px;

  display: flex;

  align-items: center;

  gap: 7px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  writing-mode: vertical-rl;

  transition: color 0.3s ease;
}

.kbt-hero-scroll i {
  font-size: 16px;

  animation: kbtScrollBounce 1.8s infinite;
}

.kbt-hero-scroll:hover {
  color: var(--kbt-gold-light);
}

/* =========================================================
   06. ABOUT
========================================================= */
.kbt-about-section {
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);

  overflow: hidden;
}

.kbt-about-section::before {
  content: "";

  position: absolute;

  width: 500px;

  height: 500px;

  right: -280px;

  top: 50%;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(213, 154, 42, 0.06),
    transparent 70%
  );
}

.kbt-about-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  align-items: center;

  gap: clamp(45px, 7vw, 100px);
}

/* =========================================================
   ABOUT IMAGE
========================================================= */

.kbt-about-media {
  position: relative;

  min-height: 530px;

  display: flex;

  align-items: center;

  justify-content: center;
}

.kbt-about-image-frame {
  position: relative;

  width: min(100%, 570px);

  aspect-ratio: 1 / 0.92;

  z-index: 2;
}

.kbt-about-image-frame::before {
  content: "";

  position: absolute;

  left: -18px;

  top: 25px;

  width: 100%;

  height: 100%;

  border: 1px solid rgba(213, 154, 42, 0.42);

  border-radius: 26px 70px 26px 70px;

  transform: rotate(-4deg);

  z-index: -1;
}

.kbt-about-image-frame::after {
  content: "";

  position: absolute;

  right: -16px;

  bottom: -20px;

  width: 140px;

  height: 140px;

  border-radius: 50%;

  background: radial-gradient(circle, var(--kbt-gold-soft), transparent 70%);

  z-index: -1;
}

.kbt-about-image {
  position: absolute;

  inset: 0;

  overflow: hidden;

  border-radius: 25px 65px 25px 65px;

  box-shadow: var(--kbt-shadow-lg);
}

.kbt-about-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, transparent 50%, rgba(3, 18, 35, 0.42));

  pointer-events: none;
}

.kbt-about-image img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 1s var(--kbt-transition);
}

.kbt-about-image-frame:hover .kbt-about-image img {
  transform: scale(1.06);
}

/* =========================================================
   ABOUT VIDEO
========================================================= */

.kbt-about-video {
  position: absolute;

  z-index: 5;

  left: 50%;

  bottom: 30px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 17px 10px 10px;

  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.35);

  border-radius: 999px;

  background: rgba(7, 25, 46, 0.48);

  backdrop-filter: blur(15px);

  -webkit-backdrop-filter: blur(15px);

  transform: translateX(-50%);

  white-space: nowrap;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.kbt-about-video:hover {
  color: #fff;

  background: rgba(7, 25, 46, 0.72);

  transform: translateX(-50%) translateY(-4px);
}

.kbt-about-video-icon {
  width: 45px;

  height: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--kbt-navy);

  border-radius: 50%;

  background: #fff;

  font-size: 21px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}

.kbt-about-video-text {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.kbt-about-video-text strong {
  font-size: 11px;

  font-weight: 700;
}

.kbt-about-video-text small {
  color: rgba(255, 255, 255, 0.7);

  font-size: 9px;
}

.kbt-about-script {
  position: absolute;

  z-index: 4;

  right: -36px;

  bottom: 90px;

  color: #fff;

  font-family: var(--kbt-heading);

  font-size: 27px;

  line-height: 1;

  font-style: italic;

  transform: rotate(-10deg);

  text-align: center;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   ABOUT DOT DECORATION
========================================================= */

.kbt-about-dots {
  position: absolute;

  left: -40px;

  top: 30px;

  width: 110px;

  height: 110px;

  opacity: 0.65;

  background-image: radial-gradient(var(--kbt-gold) 1.2px, transparent 1.2px);

  background-size: 11px 11px;

  mask-image: linear-gradient(135deg, #000, transparent);
}

/* =========================================================
   ABOUT CONTENT
========================================================= */

.kbt-about-content {
  position: relative;

  z-index: 3;
}

.kbt-about-content .kbt-section-heading h2 {
  max-width: 620px;

  font-size: clamp(40px, 4.3vw, 61px);
}

.kbt-about-copy {
  margin-top: 18px;
}

.kbt-about-copy p {
  margin: 0 0 12px;

  color: var(--kbt-text-soft);

  font-size: 13px;

  line-height: 1.9;
}

.kbt-about-benefits {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-top: 24px;

  margin-bottom: 26px;
}

.kbt-about-benefit {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 9px;

  min-height: 105px;

  padding: 13px 7px;

  text-align: center;

  border: 1px solid var(--kbt-border);

  border-radius: 15px;

  background: rgba(255, 255, 255, 0.75);

  box-shadow: 0 7px 25px rgba(11, 35, 66, 0.04);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.kbt-about-benefit:hover {
  transform: translateY(-5px);

  border-color: rgba(213, 154, 42, 0.3);

  box-shadow: var(--kbt-shadow-sm);
}

.kbt-about-benefit-icon {
  width: 39px;

  height: 39px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--kbt-gold-dark);

  border: 1px solid rgba(213, 154, 42, 0.35);

  border-radius: 50%;

  background: var(--kbt-gold-soft);

  font-size: 19px;
}

.kbt-about-benefit > span:last-child {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.kbt-about-benefit strong {
  color: var(--kbt-navy);

  font-family: var(--kbt-heading);

  font-size: 13px;

  line-height: 1.15;
}

.kbt-about-benefit small {
  color: var(--kbt-text-soft);

  font-size: 9px;

  font-weight: 600;
}

/* =========================================================
   OUTLINE BUTTON
========================================================= */

.kbt-outline-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 45px;

  padding: 0 17px;

  color: var(--kbt-navy);

  border: 1px solid rgba(11, 35, 66, 0.18);

  border-radius: 999px;

  background: #fff;

  font-size: 9px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  box-shadow: 0 7px 22px rgba(11, 35, 66, 0.05);

  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.kbt-outline-btn i {
  font-size: 17px;

  transition: transform 0.3s ease;
}

.kbt-outline-btn:hover {
  color: #fff;

  border-color: var(--kbt-navy);

  background: var(--kbt-navy);

  transform: translateY(-3px);

  box-shadow: 0 12px 25px rgba(11, 35, 66, 0.16);
}

.kbt-outline-btn:hover i {
  transform: translateX(4px);
}
.kbt-about-section {
  padding-top: 55px !important;
  padding-bottom: 70px !important;
}

/* =========================================================
   07. SIGHTSEEING
========================================================= */

.kbt-sightseeing-section {
  background: #f8f8f6;
}

.kbt-sightseeing-section::before {
  content: "";

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(11, 35, 66, 0.1),
    transparent
  );
}

.kbt-sightseeing-grid {
  display: grid;

  grid-template-columns:
    1.25fr
    0.8fr
    0.8fr
    1.05fr;

  grid-template-rows:
    205px
    205px;

  gap: 9px;

  min-height: 419px;
}

.kbt-sightseeing-card {
  position: relative;

  min-width: 0;

  min-height: 0;

  padding: 0;

  overflow: hidden;

  border: 0;

  border-radius: 14px;

  background: #ddd;

  cursor: pointer;

  text-align: left;
}

.kbt-sightseeing-large {
  grid-row: span 2;
}

.kbt-sightseeing-card:nth-child(6) {
  grid-row: span 2;
}

.kbt-sightseeing-card img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.8s var(--kbt-transition);
}

.kbt-sightseeing-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    transparent 35%,
    rgba(4, 16, 31, 0.78) 100%
  );

  transition: background 0.4s ease;
}

.kbt-sightseeing-card:hover img {
  transform: scale(1.08);
}

.kbt-sightseeing-card:hover .kbt-sightseeing-overlay {
  background: linear-gradient(
    180deg,
    rgba(4, 16, 31, 0.05),
    rgba(4, 16, 31, 0.88)
  );
}

.kbt-sightseeing-info {
  position: absolute;

  left: 17px;

  right: 14px;

  bottom: 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;
}

.kbt-sightseeing-title {
  color: #fff;

  font-family: var(--kbt-heading);

  font-size: 14px;

  font-weight: 700;

  line-height: 1.15;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.kbt-sightseeing-open {
  width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.45);

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.kbt-sightseeing-open i {
  font-size: 13px;
}

.kbt-sightseeing-card:hover .kbt-sightseeing-open {
  color: var(--kbt-navy);

  background: #fff;

  transform: rotate(10deg);
}
.kbt-sightseeing-section {
  padding-block: 55px 70px !important;
}

/* =========================================================
   08. LIGHTBOX
========================================================= */

.kbt-lightbox {
  position: fixed;

  inset: 0;

  z-index: 100000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 30px;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.kbt-lightbox.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

.kbt-lightbox-backdrop {
  position: absolute;

  inset: 0;

  background: rgba(3, 13, 26, 0.94);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);
}

.kbt-lightbox-container {
  position: relative;

  z-index: 2;

  width: min(1200px, 100%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 14px;
}

.kbt-lightbox-main {
  position: relative;

  width: min(100%, 1000px);

  height: min(70vh, 650px);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border-radius: 14px;

  background: #020a14;

  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.45);
}

.kbt-lightbox-main img {
  width: 100%;

  height: 100%;

  object-fit: contain;

  opacity: 0;

  transition: opacity 0.3s ease;
}

.kbt-lightbox-main img.is-loaded {
  opacity: 1;
}

.kbt-lightbox-caption {
  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  padding: 25px 20px 17px;

  color: #fff;

  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));

  font-family: var(--kbt-heading);

  font-size: 19px;
}

.kbt-lightbox-close {
  position: fixed;

  top: 22px;

  right: 25px;

  z-index: 5;

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 50%;

  color: #fff;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);

  cursor: pointer;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.kbt-lightbox-close i {
  font-size: 25px;
}

.kbt-lightbox-close:hover {
  background: var(--kbt-gold);

  transform: rotate(90deg);
}

.kbt-lightbox-arrow {
  position: fixed;

  top: 50%;

  z-index: 5;

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.22);

  border-radius: 50%;

  color: #fff;

  background: rgba(255, 255, 255, 0.07);

  backdrop-filter: blur(10px);

  cursor: pointer;

  transform: translateY(-50%);

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.kbt-lightbox-prev {
  left: 25px;
}

.kbt-lightbox-next {
  right: 25px;
}

.kbt-lightbox-arrow i {
  font-size: 24px;
}

.kbt-lightbox-arrow:hover {
  color: #fff;

  background: var(--kbt-gold);

  transform: translateY(-50%) scale(1.08);
}

.kbt-lightbox-thumbnails {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  width: 100%;

  overflow-x: auto;

  padding: 2px 5px 5px;

  scrollbar-width: none;
}

.kbt-lightbox-thumbnails::-webkit-scrollbar {
  display: none;
}

.kbt-lightbox-thumb {
  width: 67px;

  height: 46px;

  flex: 0 0 auto;

  padding: 0;

  overflow: hidden;

  border: 2px solid transparent;

  border-radius: 7px;

  opacity: 0.52;

  background: transparent;

  cursor: pointer;

  transition:
    opacity 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.kbt-lightbox-thumb img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.kbt-lightbox-thumb:hover {
  opacity: 0.85;

  transform: translateY(-2px);
}

.kbt-lightbox-thumb.is-active {
  opacity: 1;

  border-color: var(--kbt-gold-light);
}

/* =========================================================
   09. CAR RENTAL / ROUTES
========================================================= */

.kbt-routes-section {
  background: #fff;
}

.kbt-routes-grid {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 10px;
}

.kbt-route-card {
  position: relative;

  height: 370px;

  overflow: hidden;

  border-radius: 15px;

  color: #fff;

  background: var(--kbt-navy);

  box-shadow: 0 10px 30px rgba(11, 35, 66, 0.1);

  isolation: isolate;

  transition:
    transform 0.45s var(--kbt-transition),
    box-shadow 0.45s ease;
}

.kbt-route-card:hover {
  color: #fff;

  transform: translateY(-8px);

  box-shadow: 0 25px 55px rgba(11, 35, 66, 0.18);
}

.kbt-route-image {
  position: absolute;

  inset: 0;

  z-index: -3;
}

.kbt-route-image img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.8s var(--kbt-transition);
}

.kbt-route-card:hover .kbt-route-image img {
  transform: scale(1.09);
}

.kbt-route-overlay {
  position: absolute;

  inset: 0;

  z-index: -2;

  background: linear-gradient(
    180deg,
    rgba(4, 15, 29, 0.05) 20%,
    rgba(4, 15, 29, 0.22) 40%,
    rgba(3, 14, 28, 0.93) 100%
  );
}

.kbt-route-number {
  position: absolute;

  left: 17px;

  top: 17px;

  font-family: var(--kbt-heading);

  font-size: 27px;

  line-height: 1;

  color: #fff;

  font-weight: 700;
}

.kbt-route-number::after {
  content: "";

  display: block;

  width: 24px;

  height: 2px;

  margin-top: 8px;

  background: var(--kbt-gold-light);
}

.kbt-route-content {
  position: absolute;

  left: 17px;

  right: 17px;

  bottom: 17px;
}

.kbt-route-location {
  display: flex;

  align-items: center;

  gap: 5px;

  margin-bottom: 6px;

  color: var(--kbt-gold-light);

  font-size: 8px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

.kbt-route-location i {
  font-size: 13px;
}

.kbt-route-content h3 {
  margin: 0;

  color: #fff;

  font-family: var(--kbt-heading);

  font-size: 22px;

  line-height: 1.02;

  font-weight: 700;

  letter-spacing: -0.02em;
}

.kbt-route-content h3 span {
  display: block;

  color: var(--kbt-gold-light);

  margin-top: 2px;
}

.kbt-route-content p {
  max-width: 230px;

  margin: 10px 0 0;

  color: rgba(255, 255, 255, 0.78);

  font-size: 8.5px;

  line-height: 1.6;
}

.kbt-route-arrow {
  position: absolute;

  right: 15px;

  bottom: 15px;

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--kbt-navy);

  border: 2px solid rgba(255, 255, 255, 0.72);

  border-radius: 50%;

  background: linear-gradient(135deg, var(--kbt-gold-light), var(--kbt-gold));

  transition:
    transform 0.35s ease,
    background 0.35s ease;
}

.kbt-route-arrow i {
  font-size: 21px;
}

.kbt-route-card:hover .kbt-route-arrow {
  background: #fff;

  transform: translateX(4px) rotate(-5deg);
}

/* =========================================================
   10. BLOG
========================================================= */

.kbt-blog-section {
  background: #f8f8f6;
}

.kbt-blog-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;
}

.kbt-blog-card {
  display: grid;

  grid-template-columns:
    175px
    1fr;

  min-height: 210px;

  overflow: hidden;

  border: 1px solid rgba(11, 35, 66, 0.07);

  border-radius: 15px;

  background: #fff;

  box-shadow: 0 7px 25px rgba(11, 35, 66, 0.045);

  transition:
    transform 0.35s var(--kbt-transition),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.kbt-blog-card:hover {
  transform: translateY(-6px);

  border-color: rgba(213, 154, 42, 0.2);

  box-shadow: var(--kbt-shadow);
}

.kbt-blog-image {
  position: relative;

  overflow: hidden;

  min-height: 210px;
}

.kbt-blog-image img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.7s var(--kbt-transition);
}

.kbt-blog-card:hover .kbt-blog-image img {
  transform: scale(1.08);
}

.kbt-blog-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.15));

  pointer-events: none;
}

.kbt-blog-image-arrow {
  position: absolute;

  right: 10px;

  bottom: 10px;

  width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  border-radius: 50%;

  background: rgba(11, 35, 66, 0.72);

  backdrop-filter: blur(7px);

  font-size: 15px;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.kbt-blog-card:hover .kbt-blog-image-arrow {
  background: var(--kbt-gold);

  transform: rotate(-10deg);
}

.kbt-blog-content {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding: 19px 17px 15px;
}

.kbt-blog-date {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  color: var(--kbt-gold-dark);

  font-size: 8px;

  font-weight: 700;
}

.kbt-blog-date i {
  font-size: 12px;
}

.kbt-blog-content h3 {
  margin: 9px 0 7px;

  font-family: var(--kbt-heading);

  font-size: 17px;

  line-height: 1.1;
}

.kbt-blog-content h3 a {
  color: var(--kbt-navy);

  transition: color 0.25s ease;
}

.kbt-blog-content h3 a:hover {
  color: var(--kbt-gold-dark);
}

.kbt-blog-content p {
  display: -webkit-box;

  overflow: hidden;

  margin: 0;

  color: var(--kbt-text-soft);

  font-size: 9px;

  line-height: 1.65;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;
}

.kbt-blog-read {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  margin-top: auto;

  padding-top: 12px;

  color: var(--kbt-gold-dark);

  font-size: 8px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.05em;
}

.kbt-blog-read i {
  font-size: 14px;

  transition: transform 0.3s ease;
}

.kbt-blog-read:hover {
  color: var(--kbt-navy);
}

.kbt-blog-read:hover i {
  transform: translateX(4px);
}

/* =========================================================
   11. TESTIMONIAL
========================================================= */

.kbt-testimonial-section {
  background: #fff;
}

/* =========================================================
   TESTIMONIAL CONTROLS
========================================================= */

.kbt-testimonial-controls {
  display: flex;

  align-items: center;

  gap: 7px;
}

.kbt-testimonial-controls button {
  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  border: 1px solid rgba(11, 35, 66, 0.13);

  border-radius: 50%;

  color: var(--kbt-navy);

  background: #fff;

  cursor: pointer;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.kbt-testimonial-controls button:hover {
  color: #fff;

  border-color: var(--kbt-navy);

  background: var(--kbt-navy);

  transform: translateY(-2px);
}

.kbt-testimonial-controls button i {
  font-size: 18px;

  line-height: 1;
}

/* =========================================================
   TESTIMONIAL SLIDER
========================================================= */

.kbt-testimonial-slider {
  width: 100%;

  overflow: hidden;

  margin-top: 25px;
}

.kbt-testimonial-track {
  position: relative;

  width: 100%;

  min-height: 220px;
}

/* =========================================================
   TESTIMONIAL CARD
========================================================= */

.kbt-testimonial-card {
  display: none;

  position: relative;

  width: 100%;

  min-height: 220px;

  padding: 24px;

  box-sizing: border-box;

  overflow: hidden;

  border: 1px solid rgba(11, 35, 66, 0.08);

  border-radius: 17px;

  background: linear-gradient(145deg, #fff, #fbfaf7);

  box-shadow: 0 8px 28px rgba(11, 35, 66, 0.055);

  opacity: 0;

  transform: translateX(20px);

  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.kbt-testimonial-card.is-active {
  display: block;

  opacity: 1;

  transform: translateX(0);
}

/* =========================================================
   CARD DECORATION
========================================================= */

.kbt-testimonial-card::before {
  content: "";

  position: absolute;

  width: 140px;

  height: 140px;

  right: -55px;

  top: -55px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(213, 154, 42, 0.09),
    transparent 70%
  );

  pointer-events: none;
}

.kbt-testimonial-card:hover {
  transform: translateY(-5px);

  border-color: rgba(213, 154, 42, 0.22);

  box-shadow: var(--kbt-shadow);
}

/* =========================================================
   PERSON
========================================================= */

.kbt-testimonial-top {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;
}

.kbt-testimonial-person {
  display: flex;

  align-items: center;

  gap: 11px;

  min-width: 0;
}

.kbt-testimonial-person img {
  width: 48px;

  height: 48px;

  flex: 0 0 48px;

  object-fit: cover;

  border-radius: 50%;

  border: 3px solid var(--kbt-gold-soft);
}

.kbt-testimonial-person h3 {
  margin: 0 0 3px;

  color: var(--kbt-navy);

  font-family: var(--kbt-body);

  font-size: 12px;

  line-height: 1.2;

  font-weight: 800;
}

.kbt-testimonial-person span {
  color: var(--kbt-muted);

  font-family: var(--kbt-body);

  font-size: 9px;

  line-height: 1.3;
}

/* =========================================================
   QUOTE ICON
========================================================= */

.kbt-testimonial-quote {
  flex-shrink: 0;

  color: rgba(213, 154, 42, 0.28);

  font-size: 35px;

  line-height: 1;
}

.kbt-testimonial-quote i {
  display: block;
}

/* =========================================================
   STARS
========================================================= */

.kbt-testimonial-stars {
  display: flex;

  align-items: center;

  gap: 2px;

  margin-top: 17px;

  color: var(--kbt-gold);

  font-size: 13px;
}

/* =========================================================
   REVIEW
========================================================= */

.kbt-testimonial-card p {
  position: relative;

  max-width: 900px;

  margin: 13px 0 0;

  color: var(--kbt-text-soft);

  font-family: var(--kbt-body);

  font-size: 15px;

  line-height: 1.7;
}

/* =========================================================
   DOTS
========================================================= */

.kbt-testimonial-dots {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  margin-top: 22px;
}

.kbt-testimonial-dots button {
  width: 6px;

  height: 6px;

  flex: 0 0 auto;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: #c7cdd5;

  cursor: pointer;

  transition:
    width 0.3s ease,
    background 0.3s ease;
}

.kbt-testimonial-dots button.is-active {
  width: 23px;

  border-radius: 20px;

  background: var(--kbt-gold);
}
/* =========================================================
   12. FAQ SECTION
========================================================= */

.kbt-faq-section {
  position: relative;

  background: linear-gradient(180deg, #fbfaf7 0%, #f4f6f8 100%);
}

/* =========================================================
   FAQ GRID
========================================================= */

.kbt-faq-grid {
  display: grid;

  grid-template-columns:
    0.75fr
    1.25fr;

  gap: clamp(45px, 8vw, 110px);

  align-items: start;
}

/* =========================================================
   FAQ INTRO
========================================================= */

.kbt-faq-intro {
  position: sticky;
  top: 110px;
}

/* =========================================================
   FAQ EYEBROW
========================================================= */

.kbt-faq-intro .kbt-section-eyebrow {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--kbt-gold);

  font-family: var(--kbt-body);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

/* =========================================================
   FAQ HEADING
========================================================= */

.kbt-faq-intro h2 {
  margin: 0;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading);

  font-size: clamp(39px, 4.2vw, 57px);

  font-weight: 500;

  line-height: 0.98;

  letter-spacing: -0.035em;
}

.kbt-faq-intro h2 span {
  display: block;

  color: var(--kbt-gold);

  font-style: italic;
}

/* =========================================================
   FAQ INTRO DESCRIPTION
========================================================= */

.kbt-faq-intro > p {
  max-width: 450px;

  margin: 18px 0 24px;

  color: var(--kbt-text-soft);

  font-family: var(--kbt-body);

  font-size: 15px;

  font-weight: 400;

  line-height: 1.85;
}

/* =========================================================
   FAQ BUTTON
========================================================= */

.kbt-faq-intro .kbt-outline-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 45px;

  padding: 0 18px;

  border: 1px solid rgba(11, 35, 66, 0.18);

  border-radius: 30px;

  color: var(--kbt-navy);

  background: transparent;

  font-family: var(--kbt-body);

  font-size: 11px;

  font-weight: 700;

  text-decoration: none;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.kbt-faq-intro .kbt-outline-btn i {
  font-size: 18px;

  transition: transform 0.3s ease;
}

.kbt-faq-intro .kbt-outline-btn:hover {
  color: #fff;

  background: var(--kbt-navy);

  border-color: var(--kbt-navy);

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(11, 35, 66, 0.12);
}

.kbt-faq-intro .kbt-outline-btn:hover i {
  transform: translateX(4px);
}

/* =========================================================
   FAQ IMAGE
========================================================= */

.kbt-faq-image {
  position: relative;

  width: 100%;

  height: 225px;

  margin-top: 28px;

  overflow: hidden;

  border: 1px solid rgba(213, 154, 42, 0.2);

  border-radius: 16px;

  background: var(--kbt-navy);

  box-shadow: 0 14px 35px rgba(11, 35, 66, 0.1);
}

/* =========================================================
   FAQ IMAGE
========================================================= */

.kbt-faq-image img {
  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transition: transform 0.7s ease;
}

/* =========================================================
   FAQ IMAGE OVERLAY
========================================================= */

.kbt-faq-image-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(11, 35, 66, 0.04) 0%,
    rgba(11, 35, 66, 0.25) 35%,
    rgba(11, 35, 66, 0.88) 100%
  );

  pointer-events: none;
}

/* =========================================================
   FAQ IMAGE HOVER
========================================================= */

.kbt-faq-image:hover img {
  transform: scale(1.06);
}

/* =========================================================
   FAQ IMAGE CONTENT
========================================================= */

.kbt-faq-image-content {
  position: absolute;

  left: 20px;

  right: 20px;

  bottom: 18px;

  z-index: 2;

  display: flex;

  flex-direction: column;

  gap: 5px;
}

/* =========================================================
   IMAGE SMALL LABEL
========================================================= */

.kbt-faq-image-content span {
  display: block;

  color: var(--kbt-gold-light);

  font-family: var(--kbt-body);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

/* =========================================================
   IMAGE TITLE
========================================================= */

.kbt-faq-image-content strong {
  display: block;

  color: #fff;

  font-family: var(--kbt-heading);

  font-size: 22px;

  font-weight: 600;

  line-height: 1.08;

  letter-spacing: -0.015em;
}

/* =========================================================
   FAQ LIST
========================================================= */

.kbt-faq-list {
  display: flex;

  flex-direction: column;

  gap: 9px;

  width: 100%;
}

/* =========================================================
   FAQ ITEM
========================================================= */

.kbt-faq-item {
  position: relative;

  overflow: hidden;

  width: 100%;

  border: 1px solid rgba(11, 35, 66, 0.09);

  border-radius: 14px;

  background: #fff;

  box-shadow: 0 5px 20px rgba(11, 35, 66, 0.035);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* =========================================================
   FAQ ITEM HOVER
========================================================= */

.kbt-faq-item:hover {
  border-color: rgba(213, 154, 42, 0.18);

  box-shadow: 0 9px 25px rgba(11, 35, 66, 0.055);
}

/* =========================================================
   FAQ OPEN ITEM
========================================================= */

.kbt-faq-item.is-open {
  border-color: rgba(213, 154, 42, 0.25);

  box-shadow: 0 12px 30px rgba(11, 35, 66, 0.07);
}

/* =========================================================
   FAQ QUESTION BUTTON
========================================================= */

.kbt-faq-question {
  width: 100%;

  min-height: 70px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  padding: 15px 18px;

  border: 0;

  outline: none;

  background: transparent;

  color: var(--kbt-navy);

  font-family: var(--kbt-body);

  text-align: left;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   FAQ QUESTION TEXT
========================================================= */

.kbt-faq-question-text {
  display: flex;

  align-items: center;

  gap: 14px;

  min-width: 0;

  font-family: var(--kbt-body);

  font-size: 13px;

  font-weight: 700;

  line-height: 1.55;

  color: var(--kbt-navy);
}

/* =========================================================
   FAQ NUMBER
========================================================= */

.kbt-faq-number {
  flex-shrink: 0;

  color: var(--kbt-gold);

  font-family: var(--kbt-heading);

  font-size: 16px;

  font-weight: 700;

  line-height: 1;
}

/* =========================================================
   FAQ ICON
========================================================= */

.kbt-faq-icon {
  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  color: var(--kbt-gold-dark);

  border: 1px solid rgba(213, 154, 42, 0.28);

  border-radius: 50%;

  background: var(--kbt-gold-soft);

  transition:
    transform 0.35s ease,
    background 0.35s ease,
    color 0.35s ease;
}

/* =========================================================
   FAQ ICON
========================================================= */

.kbt-faq-icon i {
  font-size: 16px;

  line-height: 1;

  transition: transform 0.35s ease;
}

/* =========================================================
   FAQ OPEN ICON
========================================================= */

.kbt-faq-item.is-open .kbt-faq-icon {
  color: #fff;

  background: var(--kbt-gold);

  transform: rotate(0);
}

.kbt-faq-item.is-open .kbt-faq-icon i {
  transform: rotate(45deg);
}

/* =========================================================
   FAQ ANSWER
========================================================= */

.kbt-faq-answer {
  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows 0.4s var(--kbt-transition);
}

.kbt-faq-item.is-open .kbt-faq-answer {
  grid-template-rows: 1fr;
}

/* =========================================================
   FAQ ANSWER INNER
========================================================= */

.kbt-faq-answer > div {
  overflow: hidden;
}

/* =========================================================
   FAQ ANSWER TEXT
========================================================= */

.kbt-faq-answer p {
  margin: 0;

  padding: 0 65px 21px 52px;

  color: var(--kbt-text-soft);

  font-family: var(--kbt-body);

  font-size: 14px;

  font-weight: 400;

  line-height: 1.85;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .kbt-faq-grid {
    grid-template-columns:
      0.85fr
      1.15fr;

    gap: 45px;
  }

  .kbt-faq-intro h2 {
    font-size: clamp(37px, 5vw, 50px);
  }

  .kbt-faq-intro > p {
    font-size: 12px;
  }

  .kbt-faq-question-text {
    font-size: 12px;
  }

  .kbt-faq-answer p {
    font-size: 11.5px;
  }

  .kbt-faq-image {
    height: 210px;
  }

  .kbt-faq-image-content strong {
    font-size: 20px;
  }
}

/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 900px) {
  .kbt-faq-intro {
    position: static;
  }

  .kbt-faq-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .kbt-faq-intro {
    max-width: 650px;
  }

  .kbt-faq-intro > p {
    max-width: 580px;
  }

  .kbt-faq-image {
    max-width: 600px;

    height: 240px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .kbt-faq-grid {
    gap: 35px;
  }

  /* INTRO */

  .kbt-faq-intro h2 {
    font-size: clamp(36px, 10vw, 46px);

    line-height: 1;
  }

  .kbt-faq-intro > p {
    margin-top: 16px;

    margin-bottom: 21px;

    font-size: 12px;

    line-height: 1.8;
  }

  /* BUTTON */

  .kbt-faq-intro .kbt-outline-btn {
    min-height: 43px;

    padding: 0 16px;

    font-size: 10px;
  }

  /* IMAGE */

  .kbt-faq-image {
    height: 210px;

    margin-top: 23px;

    border-radius: 14px;
  }

  .kbt-faq-image-content {
    left: 17px;

    right: 17px;

    bottom: 16px;
  }

  .kbt-faq-image-content span {
    font-size: 8px;
  }

  .kbt-faq-image-content strong {
    font-size: 20px;

    line-height: 1.08;
  }

  /* FAQ ITEM */

  .kbt-faq-list {
    gap: 8px;
  }

  .kbt-faq-item {
    border-radius: 12px;
  }

  /* QUESTION */

  .kbt-faq-question {
    min-height: 64px;

    gap: 10px;

    padding: 13px 14px;
  }

  .kbt-faq-question-text {
    gap: 10px;

    font-size: 12px;

    line-height: 1.5;
  }

  /* NUMBER */

  .kbt-faq-number {
    font-size: 14px;
  }

  /* ICON */

  .kbt-faq-icon {
    width: 27px;

    height: 27px;
  }

  .kbt-faq-icon i {
    font-size: 15px;
  }

  /* ANSWER */

  .kbt-faq-answer p {
    padding: 0 45px 17px 42px;

    font-size: 11px;

    line-height: 1.8;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .kbt-faq-intro h2 {
    font-size: 34px;
  }

  .kbt-faq-image {
    height: 190px;
  }

  .kbt-faq-image-content strong {
    font-size: 18px;
  }

  .kbt-faq-question {
    padding: 12px;
  }

  .kbt-faq-question-text {
    gap: 8px;

    font-size: 11.5px;
  }

  .kbt-faq-number {
    font-size: 13px;
  }

  .kbt-faq-icon {
    width: 26px;

    height: 26px;
  }

  .kbt-faq-answer p {
    padding: 0 38px 16px 39px;

    font-size: 10.5px;
  }
}

/* =========================================================
   13. ANIMATIONS
========================================================= */

@keyframes kbtHeroReveal {
  from {
    opacity: 0;

    transform: translateY(28px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes kbtHeroFloat {
  from {
    opacity: 0;

    transform: translateY(20px) rotate(-7deg);
  }

  to {
    opacity: 1;

    transform: translateY(0) rotate(-7deg);
  }
}

@keyframes kbtScrollBounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5px);
  }
}

/* =========================================================
   14. SCROLL REVEAL
========================================================= */

.kbt-reveal {
  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 0.8s var(--kbt-transition),
    transform 0.8s var(--kbt-transition);
}

.kbt-reveal.is-visible {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   15. RESPONSIVE - 1280
========================================================= */

@media (max-width: 1280px) {
  .kbt-container {
    width: min(calc(100% - 60px), var(--kbt-container));
  }

  .kbt-hero {
    height: 630px;
  }

  .kbt-route-card {
    height: 350px;
  }

  .kbt-blog-card {
    grid-template-columns:
      145px
      1fr;
  }
}

/* =========================================================
   16. RESPONSIVE - 1100
========================================================= */

@media (max-width: 1100px) {
  .kbt-hero-content {
    width: 65%;
  }

  .kbt-hero-location {
    right: 7%;

    top: 28%;
  }

  .kbt-about-grid {
    gap: 45px;
  }

  .kbt-about-media {
    min-height: 470px;
  }

  .kbt-about-benefits {
    grid-template-columns: repeat(2, 1fr);
  }

  .kbt-routes-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .kbt-route-card {
    height: 350px;
  }

  .kbt-route-card:nth-child(4),
  .kbt-route-card:nth-child(5) {
    grid-column: span 1;
  }

  .kbt-blog-grid {
    grid-template-columns: 1fr;
  }

  .kbt-blog-card {
    min-height: 190px;

    grid-template-columns:
      230px
      1fr;
  }

  .kbt-testimonial-track {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   17. RESPONSIVE - 900
========================================================= */

@media (max-width: 900px) {
  .kbt-container {
    width: calc(100% - 40px);
  }

  .kbt-section {
    padding-block: 75px;
  }

  /* HERO */

  .kbt-hero {
    height: 610px;

    min-height: 610px;
  }

  .kbt-hero-content {
    width: 76%;
  }

  .kbt-hero-title {
    font-size: clamp(42px, 7vw, 62px);
  }

  .kbt-hero-location {
    display: none;
  }

  .kbt-hero-scroll {
    display: none;
  }

  /* ABOUT */

  .kbt-about-grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .kbt-about-media {
    min-height: 500px;

    max-width: 650px;

    width: 100%;

    margin-inline: auto;
  }

  /* SIGHTSEEING */

  .kbt-sightseeing-grid {
    grid-template-columns: 1fr 1fr;

    grid-template-rows:
      250px
      180px
      180px;

    min-height: auto;
  }

  .kbt-sightseeing-card:nth-child(1) {
    grid-row: span 2;
  }

  .kbt-sightseeing-card:nth-child(6) {
    grid-row: span 1;
  }

  /* ROUTES */

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

  .kbt-route-card {
    height: 370px;
  }

  /* TESTIMONIAL */

  .kbt-testimonial-track {
    grid-template-columns: repeat(3, 100%);
  }

  .kbt-testimonial-card {
    display: none;
  }

  .kbt-testimonial-card.is-active {
    display: block;
  }

  /* FAQ */

  .kbt-faq-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .kbt-faq-intro {
    position: static;
  }

  .kbt-faq-intro > p {
    max-width: 600px;
  }
}

/* =========================================================
   18. RESPONSIVE - 700
========================================================= */

@media (max-width: 700px) {
  .kbt-container {
    width: calc(100% - 30px);
  }

  .kbt-section {
    padding-block: 62px;
  }

  .kbt-section-heading-row {
    align-items: flex-start;

    flex-direction: column;

    gap: 15px;

    margin-bottom: 23px;
  }

  .kbt-section-heading h2 {
    font-size: clamp(34px, 9vw, 48px);
  }

  /* HERO */

  .kbt-hero {
    height: 650px;

    min-height: 650px;
  }

  .kbt-hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(3, 16, 33, 0.89),
      rgba(5, 24, 47, 0.53)
    );
  }

  .kbt-hero-content {
    width: 100%;

    padding: 25px 0 45px;
  }

  .kbt-hero-title {
    font-size: clamp(39px, 11vw, 58px);

    line-height: 0.97;
  }

  .kbt-hero-description {
    max-width: 500px;

    font-size: 11px;

    margin: 18px 0 20px;
  }

  .kbt-hero-benefits {
    gap: 9px 14px;
  }

  .kbt-hero-benefit {
    font-size: 8px;
  }

  .kbt-hero-benefit-icon {
    width: 23px;

    height: 23px;

    font-size: 12px;
  }

  .kbt-hero-actions {
    flex-wrap: wrap;
  }

  .kbt-hero-primary-btn,
  .kbt-hero-secondary-btn {
    min-height: 46px;

    padding-inline: 15px;

    font-size: 9px;
  }

  .kbt-hero-arrow {
    width: 38px;

    height: 38px;

    top: auto;

    bottom: 19px;

    transform: none;
  }

  .kbt-hero-arrow:hover {
    transform: scale(1.05);
  }

  .kbt-hero-prev {
    left: 15px;
  }

  .kbt-hero-next {
    right: 15px;
  }

  .kbt-hero-pagination {
    bottom: 35px;
  }

  /* ABOUT */

  .kbt-about-media {
    min-height: 400px;
  }

  .kbt-about-image-frame {
    width: 94%;
  }

  .kbt-about-script {
    right: -10px;

    bottom: 80px;

    font-size: 18px;
  }

  .kbt-about-video {
    bottom: 22px;
  }

  .kbt-about-benefits {
    gap: 8px;
  }

  .kbt-about-benefit {
    min-height: 95px;

    padding: 10px 5px;
  }

  /* SIGHTSEEING */

  .kbt-sightseeing-grid {
    grid-template-columns: 1fr 1fr;

    grid-template-rows:
      220px
      150px
      150px;
  }

  .kbt-sightseeing-title {
    font-size: 12px;
  }

  /* ROUTES */

  .kbt-routes-grid {
    grid-template-columns: 1fr 1fr;

    gap: 8px;
  }

  .kbt-route-card {
    height: 320px;
  }

  .kbt-route-card:last-child {
    grid-column: span 2;
  }

  .kbt-route-content h3 {
    font-size: 20px;
  }

  /* BLOG */

  .kbt-blog-card {
    grid-template-columns:
      135px
      1fr;

    min-height: 175px;
  }

  .kbt-blog-image {
    min-height: 175px;
  }

  .kbt-blog-content {
    padding: 14px 13px;
  }

  .kbt-blog-content h3 {
    font-size: 15px;
  }

  .kbt-blog-content p {
    font-size: 8px;
  }

  /* FAQ */

  .kbt-faq-question {
    min-height: 60px;

    padding: 11px 13px;
  }

  .kbt-faq-question-text {
    gap: 9px;

    font-size: 9px;
  }

  .kbt-faq-answer p {
    padding: 0 45px 17px 37px;

    font-size: 9px;
  }

  /* LIGHTBOX */

  .kbt-lightbox {
    padding: 15px;
  }

  .kbt-lightbox-main {
    height: 60vh;

    border-radius: 10px;
  }

  .kbt-lightbox-arrow {
    position: absolute;

    top: 45%;

    width: 38px;

    height: 38px;
  }

  .kbt-lightbox-prev {
    left: 10px;
  }

  .kbt-lightbox-next {
    right: 10px;
  }

  .kbt-lightbox-close {
    top: 12px;

    right: 12px;
  }
}

/* =========================================================
   19. RESPONSIVE - 520
========================================================= */

@media (max-width: 520px) {
  .kbt-section-eyebrow {
    font-size: 8px;

    letter-spacing: 0.2em;
  }

  /* HERO */

  .kbt-hero {
    height: 620px;

    min-height: 620px;
  }

  .kbt-hero-eyebrow {
    font-size: 8px;

    letter-spacing: 0.24em;
  }

  .kbt-hero-title {
    font-size: 38px;
  }

  .kbt-hero-description {
    font-size: 10px;

    line-height: 1.7;
  }

  .kbt-hero-benefits {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 7px;
  }

  .kbt-hero-benefit {
    flex-direction: column;

    justify-content: center;

    text-align: center;

    gap: 4px;

    font-size: 7px;
  }

  .kbt-hero-actions {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;
  }

  .kbt-hero-primary-btn,
  .kbt-hero-secondary-btn {
    width: 100%;
  }

  /* ABOUT */

  .kbt-about-media {
    min-height: 340px;
  }

  .kbt-about-image-frame::before {
    left: -8px;

    top: 15px;
  }

  .kbt-about-script {
    display: none;
  }

  .kbt-about-video {
    left: 50%;

    bottom: 15px;

    padding: 7px 12px 7px 7px;
  }

  .kbt-about-video-icon {
    width: 38px;

    height: 38px;

    font-size: 18px;
  }

  .kbt-about-video-text strong {
    font-size: 8px;
  }

  .kbt-about-video-text small {
    font-size: 7px;
  }

  .kbt-about-benefits {
    grid-template-columns: 1fr 1fr;
  }

  .kbt-about-benefit {
    min-height: 92px;
  }

  /* SIGHTSEEING */

  .kbt-sightseeing-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows:
      190px
      130px
      130px;
  }

  .kbt-sightseeing-card:nth-child(1) {
    grid-row: span 2;
  }

  .kbt-sightseeing-card:nth-child(6) {
    grid-column: span 2;
  }

  .kbt-sightseeing-info {
    left: 10px;

    right: 9px;

    bottom: 9px;
  }

  .kbt-sightseeing-title {
    font-size: 10px;
  }

  .kbt-sightseeing-open {
    width: 24px;

    height: 24px;
  }

  /* ROUTES */

  .kbt-routes-grid {
    grid-template-columns: 1fr;
  }

  .kbt-route-card,
  .kbt-route-card:last-child {
    grid-column: auto;

    height: 335px;
  }

  /* BLOG */

  .kbt-blog-grid {
    gap: 10px;
  }

  .kbt-blog-card {
    grid-template-columns:
      115px
      1fr;

    min-height: 155px;
  }

  .kbt-blog-image {
    min-height: 155px;
  }

  .kbt-blog-content h3 {
    font-size: 14px;
  }

  .kbt-blog-content p {
    -webkit-line-clamp: 2;
  }

  /* FAQ */

  .kbt-faq-question-text {
    font-size: 8.5px;
  }

  .kbt-faq-number {
    font-size: 11px;
  }

  .kbt-faq-answer p {
    padding: 0 35px 15px 31px;
  }

  /* LIGHTBOX */

  .kbt-lightbox-main {
    height: 52vh;
  }

  .kbt-lightbox-thumbnails {
    justify-content: flex-start;
  }

  .kbt-lightbox-thumb {
    width: 58px;

    height: 40px;
  }
}

/* =========================================================
   20. RESPONSIVE - 380
========================================================= */

@media (max-width: 380px) {
  .kbt-container {
    width: calc(100% - 24px);
  }

  .kbt-hero {
    height: 610px;

    min-height: 610px;
  }

  .kbt-hero-title {
    font-size: 34px;
  }

  .kbt-hero-benefits {
    grid-template-columns: repeat(3, 1fr);
  }

  .kbt-hero-benefit {
    font-size: 6.5px;
  }

  .kbt-hero-actions {
    grid-template-columns: 1fr;
  }

  .kbt-about-benefits {
    gap: 6px;
  }

  .kbt-about-benefit strong {
    font-size: 10px;
  }

  .kbt-about-benefit small {
    font-size: 7px;
  }

  .kbt-blog-card {
    grid-template-columns:
      100px
      1fr;
  }

  .kbt-blog-content {
    padding: 11px 10px;
  }

  .kbt-blog-content h3 {
    font-size: 13px;
  }

  .kbt-blog-content p {
    font-size: 7.5px;
  }
}

/* =========================================================
   21. ACCESSIBILITY
========================================================= */

.kbt-home :focus-visible {
  outline: 2px solid var(--kbt-gold);

  outline-offset: 3px;
}

/* =========================================================
   22. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .kbt-home *,
  .kbt-home *::before,
  .kbt-home *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }
}
/* =========================================================
   FLOATING CONTACT ACTIONS
   PREMIUM FIXED ALIGNMENT
========================================================= */

.kbt-floating-contact {
  position: fixed !important;

  right: 28px !important;
  bottom: 100px !important;

  z-index: 99999 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;

  gap: 14px !important;

  pointer-events: none;
}

/* =========================================================
   ACTION
========================================================= */

.kbt-floating-action {
  position: relative;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  flex: 0 0 58px;

  border-radius: 999px;

  text-decoration: none;

  pointer-events: auto;

  overflow: visible;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.1);

  transition:
    width 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* =========================================================
   ICON
========================================================= */

.kbt-floating-icon {
  position: relative;

  z-index: 3;

  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 26px;

  box-sizing: border-box;

  transition:
    transform 0.35s ease,
    font-size 0.35s ease;
}

/* =========================================================
   LABEL
========================================================= */

.kbt-floating-label {
  position: absolute;

  left: 18px;
  right: auto;

  top: 50%;

  transform: translateY(-50%) translateX(10px);

  white-space: nowrap;

  padding: 10px 16px;

  border-radius: 999px;

  background: #ffffff;

  color: #10233f;

  font-family: "Montserrat", Arial, sans-serif;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.08em;

  line-height: 1;

  text-transform: uppercase;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  z-index: 1;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
}

/* =========================================================
   WHATSAPP
========================================================= */

.kbt-floating-whatsapp {
  background: #25d366;

  color: #ffffff;
}

/* WhatsApp icon */

.kbt-floating-whatsapp .kbt-floating-icon {
  background: linear-gradient(145deg, #25d366, #128c7e);
}

/* =========================================================
   PHONE
========================================================= */

.kbt-floating-phone {
  background: #d5a84a;

  color: #ffffff;
}

/* Phone icon */

.kbt-floating-phone .kbt-floating-icon {
  background: linear-gradient(145deg, #d5a84a, #9b6d1f);
}

/* =========================================================
   HOVER EXPANSION
========================================================= */

.kbt-floating-action:hover {
  width: 220px;

  transform: translateY(-4px);

  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   SHOW LABEL
========================================================= */

.kbt-floating-action:hover .kbt-floating-label {
  opacity: 1;

  visibility: visible;

  transform: translateY(-50%) translateX(0);
}

/* =========================================================
   ICON HOVER
========================================================= */

.kbt-floating-action:hover .kbt-floating-icon {
  transform: rotate(5deg) scale(1.04);
}

/* =========================================================
   PULSE RING
========================================================= */

.kbt-floating-whatsapp::before,
.kbt-floating-phone::before {
  content: "";

  position: absolute;

  inset: -5px;

  border-radius: 50%;

  opacity: 0;

  pointer-events: none;

  z-index: -1;
}

/* WhatsApp pulse */

.kbt-floating-whatsapp::before {
  border: 1px solid rgba(37, 211, 102, 0.55);

  animation: kbtWhatsappPulse 2.4s infinite;
}

/* Phone pulse */

.kbt-floating-phone::before {
  border: 1px solid rgba(213, 168, 74, 0.55);

  animation: kbtPhonePulse 2.8s infinite;
}

/* =========================================================
   WHATSAPP PULSE
========================================================= */

@keyframes kbtWhatsappPulse {
  0% {
    transform: scale(0.95);

    opacity: 0.8;
  }

  70% {
    transform: scale(1.35);

    opacity: 0;
  }

  100% {
    transform: scale(1.35);

    opacity: 0;
  }
}

/* =========================================================
   PHONE PULSE
========================================================= */

@keyframes kbtPhonePulse {
  0% {
    transform: scale(0.95);

    opacity: 0.7;
  }

  70% {
    transform: scale(1.3);

    opacity: 0;
  }

  100% {
    transform: scale(1.3);

    opacity: 0;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .kbt-floating-contact {
    right: 16px !important;

    bottom: 60px !important;

    gap: 10px !important;
  }

  .kbt-floating-action {
    width: 52px;

    height: 52px;

    flex-basis: 52px;
  }

  .kbt-floating-icon {
    width: 52px;

    height: 52px;

    flex-basis: 52px;

    font-size: 23px;
  }

  .kbt-floating-label {
    display: none;
  }

  .kbt-floating-action:hover {
    width: 52px;

    transform: translateY(-3px);
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .kbt-floating-contact {
    right: 12px !important;

    bottom: 14px !important;

    gap: 9px !important;
  }

  .kbt-floating-action {
    width: 49px;

    height: 49px;

    flex-basis: 49px;
  }

  .kbt-floating-icon {
    width: 49px;

    height: 49px;

    flex-basis: 49px;

    font-size: 21px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .kbt-floating-action,
  .kbt-floating-icon,
  .kbt-floating-label {
    transition: none;
  }

  .kbt-floating-whatsapp::before,
  .kbt-floating-phone::before {
    animation: none;
  }
}
/* =========================================================
   ABOUT CONTENT TYPOGRAPHY
========================================================= */

.kbt-about-copy p {
  font-size: 16px !important;
  line-height: 1.9 !important;
  color: var(--kbt-text-soft);
}

.kbt-section-heading p {
  font-size: 15px !important;
  line-height: 1.85 !important;
}

.kbt-about-benefit strong {
  font-size: 14px !important;
}

.kbt-about-benefit small {
  font-size: 11px !important;
}

.kbt-outline-btn {
  font-size: 11px !important;
}

/* TABLET */
@media (max-width: 991px) {
  .kbt-about-copy p {
    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  .kbt-section-heading p {
    font-size: 14px !important;
  }
}

/* MOBILE */
@media (max-width: 767px) {
  .kbt-about-copy p {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  .kbt-section-heading p {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  .kbt-about-benefit strong {
    font-size: 13px !important;
  }

  .kbt-about-benefit small {
    font-size: 10px !important;
  }
}
/* =========================================================
   CAR RENTAL / POPULAR ROUTES TYPOGRAPHY
========================================================= */

.kbt-routes-section .kbt-section-heading p {
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.kbt-routes-section .kbt-view-all {
  font-size: 11px !important;
}

.kbt-route-location {
  font-size: 10px !important;
  letter-spacing: 0.11em;
}

.kbt-route-location i {
  font-size: 15px !important;
}

.kbt-route-content h3 {
  font-size: 25px !important;
  line-height: 1.05 !important;
}

.kbt-route-content p {
  font-size: 11px !important;
  line-height: 1.65 !important;
  max-width: 250px;
}

.kbt-route-number {
  font-size: 29px !important;
}

.kbt-route-arrow i {
  font-size: 22px !important;
}

/* TABLET */
@media (max-width: 991px) {
  .kbt-routes-section .kbt-section-heading p {
    font-size: 14px !important;
  }

  .kbt-route-content h3 {
    font-size: 22px !important;
  }

  .kbt-route-content p {
    font-size: 10.5px !important;
  }
}

/* MOBILE */
@media (max-width: 767px) {
  .kbt-routes-section .kbt-section-heading p {
    font-size: 14px !important;
  }

  .kbt-routes-section .kbt-view-all {
    font-size: 10px !important;
  }

  .kbt-route-location {
    font-size: 9px !important;
  }

  .kbt-route-content h3 {
    font-size: 22px !important;
  }

  .kbt-route-content p {
    font-size: 11px !important;
    line-height: 1.6 !important;
  }

  .kbt-route-number {
    font-size: 26px !important;
  }
}
/* ROUTE NUMBER + ARROW — SAME TOP ROW */
.kbt-route-number {
  top: 18px !important;
  left: 18px !important;
}

.kbt-route-arrow {
  top: 18px !important;
  right: 18px !important;
  bottom: auto !important;

  width: 38px !important;
  height: 38px !important;
}
/* =========================================================
   KODAI BOOK MY TAXI
   PREMIUM TRAVEL JOURNAL
========================================================= */

.kbt-travel-journal {
  position: relative;

  padding: 90px 0 100px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(213, 154, 42, 0.08),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 85%,
      rgba(11, 35, 66, 0.055),
      transparent 28%
    ),
    linear-gradient(180deg, #fcfbf8 0%, #ffffff 48%, #fbf8f1 100%);
}

/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.kbt-travel-journal::before {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  left: -300px;
  top: -250px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(213, 154, 42, 0.08),
    transparent 68%
  );

  pointer-events: none;
}

.kbt-travel-journal::after {
  content: "";

  position: absolute;

  width: 450px;
  height: 450px;

  right: -280px;
  bottom: -250px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(11, 35, 66, 0.07), transparent 68%);

  pointer-events: none;
}

/* =========================================================
   CONTAINER
========================================================= */

.kbt-travel-journal-container {
  position: relative;

  width: min(calc(100% - 80px), 1440px);

  margin-inline: auto;

  z-index: 2;
}

/* =========================================================
   HEADER
   LEFT CONTENT + RIGHT BUTTON
========================================================= */

.kbt-travel-journal-header {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 40px;

  margin-bottom: 42px;
}

/* =========================================================
   HEADING
========================================================= */

.kbt-travel-journal-heading {
  max-width: 700px;
}

.kbt-travel-journal-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--kbt-gold-dark);

  font-size: 10px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: 0.24em;

  text-transform: uppercase;
}

.kbt-travel-journal-eyebrow::before {
  content: "";

  width: 28px;

  height: 2px;

  flex-shrink: 0;

  background: linear-gradient(90deg, var(--kbt-gold), var(--kbt-gold-light));
}

.kbt-travel-journal-heading h2 {
  margin: 13px 0 0;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading);

  font-size: clamp(45px, 5vw, 70px);

  line-height: 0.94;

  font-weight: 700;

  letter-spacing: -0.045em;
}

.kbt-travel-journal-heading h2 span {
  color: var(--kbt-gold);

  font-style: italic;
}

.kbt-travel-journal-heading p {
  max-width: 620px;

  margin: 17px 0 0;

  color: var(--kbt-text-soft);

  font-size: 15px;

  line-height: 1.8;
}

/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.kbt-travel-journal-view {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  flex-shrink: 0;

  margin-bottom: 5px;

  color: var(--kbt-gold-dark);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.kbt-travel-journal-view i {
  font-size: 20px;

  transition: transform 0.3s ease;
}

.kbt-travel-journal-view:hover {
  color: var(--kbt-navy);

  transform: translateX(3px);
}

.kbt-travel-journal-view:hover i {
  color: var(--kbt-gold-dark);

  transform: translateX(5px);
}

/* =========================================================
   BLOG GRID
========================================================= */

.kbt-travel-journal-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 22px;
}

/* =========================================================
   CARD
========================================================= */

.kbt-travel-journal-card {
  position: relative;

  overflow: hidden;

  border: 1px solid rgba(11, 35, 66, 0.08);

  border-radius: 22px;

  background: #fff;

  box-shadow: 0 12px 40px rgba(11, 35, 66, 0.065);

  transition:
    transform 0.45s var(--kbt-transition),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}

.kbt-travel-journal-card:hover {
  transform: translateY(-8px);

  border-color: rgba(213, 154, 42, 0.3);

  box-shadow: 0 25px 65px rgba(11, 35, 66, 0.14);
}

/* =========================================================
   IMAGE
========================================================= */

.kbt-travel-journal-media {
  position: relative;

  display: block;

  overflow: hidden;

  background: #eef1f4;
}

/*
 * Natural image ratio.
 * No forced height.
 * No cropping.
 */

.kbt-travel-journal-media img {
  width: 100%;

  height: auto;

  display: block;

  object-fit: contain;

  object-position: center;

  transition: transform 0.8s var(--kbt-transition);
}

.kbt-travel-journal-card:hover .kbt-travel-journal-media img {
  transform: scale(1.035);
}

/* =========================================================
   IMAGE OVERLAY
========================================================= */

.kbt-travel-journal-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(3, 15, 30, 0.02) 35%,
    rgba(3, 15, 30, 0.06) 55%,
    rgba(3, 15, 30, 0.52) 100%
  );

  pointer-events: none;

  transition: background 0.4s ease;
}

.kbt-travel-journal-card:hover .kbt-travel-journal-overlay {
  background: linear-gradient(
    180deg,
    rgba(3, 15, 30, 0.04) 25%,
    rgba(3, 15, 30, 0.1) 55%,
    rgba(3, 15, 30, 0.62) 100%
  );
}

/* =========================================================
   IMAGE NUMBER
========================================================= */

.kbt-travel-journal-number {
  position: absolute;

  top: 17px;

  left: 18px;

  color: #fff;

  font-family: var(--kbt-heading);

  font-size: 26px;

  line-height: 1;

  font-weight: 700;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.kbt-travel-journal-number::after {
  content: "";

  display: block;

  width: 24px;

  height: 2px;

  margin-top: 7px;

  background: var(--kbt-gold-light);
}

/* =========================================================
   IMAGE ARROW
========================================================= */

.kbt-travel-journal-image-arrow {
  position: absolute;

  right: 17px;

  bottom: 17px;

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--kbt-navy);

  border: 2px solid rgba(255, 255, 255, 0.72);

  border-radius: 50%;

  background: linear-gradient(135deg, var(--kbt-gold-light), var(--kbt-gold));

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

  font-size: 22px;

  transition:
    transform 0.35s ease,
    background 0.35s ease;
}

.kbt-travel-journal-card:hover .kbt-travel-journal-image-arrow {
  color: var(--kbt-navy);

  background: #fff;

  transform: translateX(4px) rotate(-6deg);
}

/* =========================================================
   CARD CONTENT
========================================================= */

.kbt-travel-journal-content {
  padding: 24px 27px 27px;
}

/* =========================================================
   DATE
========================================================= */

.kbt-travel-journal-date {
  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--kbt-text-soft);

  font-size: 13px;

  line-height: 1.4;

  font-weight: 500;
}

.kbt-travel-journal-date i {
  color: var(--kbt-gold-dark);

  font-size: 18px;
}

/* =========================================================
   TITLE
========================================================= */

.kbt-travel-journal-content h3 {
  margin: 14px 0 12px;

  font-family: var(--kbt-heading);

  font-size: 27px;

  line-height: 1.08;

  font-weight: 700;

  letter-spacing: -0.025em;
}

.kbt-travel-journal-content h3 a {
  color: var(--kbt-navy);

  transition: color 0.25s ease;
}

.kbt-travel-journal-content h3 a:hover {
  color: var(--kbt-gold-dark);
}

/* =========================================================
   DESCRIPTION
========================================================= */

.kbt-travel-journal-content p {
  min-height: 76px;

  margin: 0;

  color: var(--kbt-text-soft);

  font-size: 15px;

  line-height: 1.7;
}

/* =========================================================
   READ MORE
========================================================= */

.kbt-travel-journal-read {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-top: 21px;

  padding-bottom: 7px;

  color: var(--kbt-gold-dark);

  font-size: 14px;

  line-height: 1;

  font-weight: 800;
}

.kbt-travel-journal-read::after {
  content: "";

  position: absolute;

  left: 0;

  right: 39px;

  bottom: 0;

  height: 2px;

  background: var(--kbt-gold);

  transition: right 0.3s ease;
}

.kbt-travel-journal-read i {
  font-size: 23px;

  transition: transform 0.3s ease;
}

.kbt-travel-journal-read:hover {
  color: var(--kbt-navy);
}

.kbt-travel-journal-read:hover::after {
  right: 0;
}

.kbt-travel-journal-read:hover i {
  transform: translateX(5px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .kbt-travel-journal-container {
    width: min(calc(100% - 50px), 1200px);
  }

  .kbt-travel-journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kbt-travel-journal-content h3 {
    font-size: 24px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .kbt-travel-journal {
    padding: 65px 0 75px;
  }

  .kbt-travel-journal-container {
    width: calc(100% - 30px);
  }

  /* HEADER */

  .kbt-travel-journal-header {
    display: block;

    margin-bottom: 30px;
  }

  .kbt-travel-journal-heading {
    max-width: 100%;
  }

  .kbt-travel-journal-eyebrow {
    font-size: 9px;

    letter-spacing: 0.2em;
  }

  .kbt-travel-journal-heading h2 {
    margin-top: 12px;

    font-size: clamp(43px, 12vw, 58px);
  }

  .kbt-travel-journal-heading p {
    margin-top: 14px;

    font-size: 14px;

    line-height: 1.7;
  }

  /* BUTTON */

  .kbt-travel-journal-view {
    margin-top: 21px;

    font-size: 10px;
  }

  /* GRID */

  .kbt-travel-journal-grid {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  /* CARD */

  .kbt-travel-journal-card {
    border-radius: 19px;
  }

  /* IMAGE */

  .kbt-travel-journal-media img {
    width: 100%;

    height: auto;
  }

  /* CONTENT */

  .kbt-travel-journal-content {
    padding: 21px 21px 24px;
  }

  .kbt-travel-journal-date {
    font-size: 12px;
  }

  .kbt-travel-journal-content h3 {
    margin-top: 12px;

    font-size: 24px;
  }

  .kbt-travel-journal-content p {
    min-height: auto;

    font-size: 14px;

    line-height: 1.7;
  }

  .kbt-travel-journal-read {
    margin-top: 19px;

    font-size: 13px;
  }

  .kbt-travel-journal-image-arrow {
    width: 43px;

    height: 43px;

    right: 14px;

    bottom: 14px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .kbt-travel-journal {
    padding: 55px 0 65px;
  }

  .kbt-travel-journal-container {
    width: calc(100% - 24px);
  }

  .kbt-travel-journal-heading h2 {
    font-size: 42px;
  }

  .kbt-travel-journal-content {
    padding: 19px 18px 22px;
  }

  .kbt-travel-journal-content h3 {
    font-size: 22px;
  }

  .kbt-travel-journal-content p {
    font-size: 13.5px;
  }
}
/* ABOUT H1 */
.kbt-about-content .kbt-section-heading h1 {
  max-width: 620px;

  margin: 0;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading);

  font-size: clamp(40px, 4.3vw, 61px);

  line-height: 0.98;

  font-weight: 700;

  letter-spacing: -0.035em;
}

/* H1 Highlight */
.kbt-about-content .kbt-section-heading h1 span {
  color: var(--kbt-gold);

  font-style: italic;
}
.kbt-hero-title {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: var(--kbt-heading);
  font-size: 48px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 5;
}

.kbt-hero-title-main {
  display: block;
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.kbt-hero-slide.is-active .kbt-hero-title-main {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile */
@media (max-width: 767px) {
  .kbt-hero-title {
    font-size: 36px;
    line-height: 1.08;
  }
}
/* =========================================================
   KBT PREMIUM HERO — V2
   NEW HERO ONLY
   Does NOT affect existing .kbt-hero styles
========================================================= */

/* =========================================================
   OPTIONAL PREMIUM FONTS
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700;800&display=swap");

/* =========================================================
   PREMIUM HERO VARIABLES
========================================================= */

.kbt-premium-hero {
  --ph-navy: #061a2d;

  --ph-navy-deep: #03121f;

  --ph-navy-soft: #0d2944;

  --ph-gold: #d9a441;

  --ph-gold-light: #f1c66b;

  --ph-gold-dark: #b77b19;

  --ph-white: #ffffff;

  --ph-cream: #f8f0df;

  --ph-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --ph-body: "Montserrat", Arial, sans-serif;

  --ph-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --ph-height: 760px;

  position: relative;

  width: 100%;

  height: var(--ph-height);

  min-height: 680px;

  overflow: hidden;

  isolation: isolate;

  background: var(--ph-navy-deep);

  font-family: var(--ph-body);
}

/* =========================================================
   SLIDE WRAPPER
========================================================= */

.kbt-premium-hero__slides {
  position: relative;

  width: 100%;

  height: 100%;
}

/* =========================================================
   INDIVIDUAL SLIDE
========================================================= */

.kbt-premium-hero__slide {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  visibility: hidden;

  opacity: 0;

  z-index: 1;

  transition:
    opacity 0.9s ease,
    visibility 0.9s ease;
}

.kbt-premium-hero__slide.is-active {
  visibility: visible;

  opacity: 1;

  z-index: 2;
}

/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.kbt-premium-hero__image {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;
}

.kbt-premium-hero__image::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(2, 15, 27, 0.18) 0%,
    rgba(2, 15, 27, 0.02) 48%,
    rgba(2, 15, 27, 0.05) 100%
  );

  pointer-events: none;
}

.kbt-premium-hero__image img {
  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center center;

  transform: scale(1.07);

  transition: transform 7s var(--ph-ease);
}

.kbt-premium-hero__slide.is-active .kbt-premium-hero__image img {
  transform: scale(1);
}

/* =========================================================
   CINEMATIC IMAGE OVERLAY
========================================================= */

.kbt-premium-hero__overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(3, 17, 31, 0.22) 0%,
    rgba(3, 17, 31, 0.02) 53%,
    rgba(3, 17, 31, 0.12) 100%
  );
}

.kbt-premium-hero__overlay::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(1, 11, 20, 0.32) 0%,
    transparent 22%,
    transparent 65%,
    rgba(1, 11, 20, 0.48) 100%
  );
}

/* =========================================================
   LEFT NAVY EDITORIAL PANEL
========================================================= */

.kbt-premium-hero__slide::before {
  content: "";

  position: absolute;

  z-index: 3;

  left: -5%;

  top: -8%;

  width: 48%;

  height: 118%;

  background: linear-gradient(145deg, #031522 0%, #061b2e 45%, #08243b 100%);

  clip-path: polygon(
    0 0,
    67% 0,
    76% 5%,
    79% 11%,
    80% 17%,
    84% 21%,
    87% 24%,
    88% 29%,
    88% 35%,
    86% 41%,
    83% 46%,
    83% 53%,
    86% 58%,
    87% 64%,
    85% 70%,
    81% 75%,
    78% 82%,
    76% 88%,
    78% 94%,
    84% 100%,
    0 100%
  );

  box-shadow: 25px 0 80px rgba(0, 0, 0, 0.16);
}

/* =========================================================
   SUBTLE TOPOGRAPHY PATTERN
========================================================= */

.kbt-premium-hero__slide::after {
  content: "";

  position: absolute;

  z-index: 4;

  left: 0;

  top: 0;

  width: 30%;

  height: 100%;

  pointer-events: none;

  opacity: 0.18;

  background-image: radial-gradient(
    circle at 20% 20%,
    rgba(241, 198, 107, 0.2) 1px,
    transparent 1.5px
  );

  background-size: 16px 16px;

  mask-image: linear-gradient(135deg, #000, transparent 70%);
}

/* =========================================================
   MAIN CONTENT CONTAINER
========================================================= */

.kbt-premium-hero__container {
  position: relative;

  z-index: 7;

  width: min(calc(100% - 90px), 1440px);

  height: 100%;

  margin-inline: auto;

  display: flex;

  align-items: center;
}

/* =========================================================
   CONTENT
========================================================= */

.kbt-premium-hero__content {
  width: 520px;

  max-width: 42%;

  padding-top: 55px;

  color: var(--ph-white);
}

/* =========================================================
   EYEBROW
========================================================= */

.kbt-premium-hero__eyebrow {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 18px;

  color: rgba(255, 255, 255, 0.86);

  font-size: 10px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  opacity: 0;

  transform: translateY(25px);
}

.kbt-premium-hero__slide.is-active .kbt-premium-hero__eyebrow {
  animation: kbtPremiumReveal 0.75s 0.12s var(--ph-ease) forwards;
}

.kbt-premium-hero__eyebrow-line {
  width: 34px;

  height: 2px;

  flex: 0 0 auto;

  background: linear-gradient(90deg, var(--ph-gold-light), var(--ph-gold));
}

/* =========================================================
   TITLE
========================================================= */

.kbt-premium-hero__title {
  max-width: 500px;

  margin: 0;

  color: var(--ph-white);

  font-family: var(--ph-heading);

  font-size: 68px;

  line-height: 0.88;

  font-weight: 700;

  letter-spacing: -0.045em;

  text-wrap: balance;

  opacity: 0;

  transform: translateY(35px);
}

.kbt-premium-hero__slide.is-active .kbt-premium-hero__title {
  animation: kbtPremiumReveal 0.9s 0.22s var(--ph-ease) forwards;
}

/* =========================================================
   TITLE GOLD ACCENT
   Automatically highlights second line visually when
   title wraps naturally.
========================================================= */

.kbt-premium-hero__title::first-line {
  color: #ffffff;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.kbt-premium-hero__description {
  max-width: 500px;

  margin: 24px 0 27px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 13px;

  line-height: 1.8;

  font-weight: 400;

  letter-spacing: 0.005em;

  opacity: 0;

  transform: translateY(25px);
}

.kbt-premium-hero__slide.is-active .kbt-premium-hero__description {
  animation: kbtPremiumReveal 0.75s 0.4s var(--ph-ease) forwards;
}

/* =========================================================
   ACTION BUTTONS
========================================================= */

.kbt-premium-hero__actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  opacity: 0;

  transform: translateY(25px);
}

.kbt-premium-hero__slide.is-active .kbt-premium-hero__actions {
  animation: kbtPremiumReveal 0.75s 0.54s var(--ph-ease) forwards;
}

/* =========================================================
   BUTTON BASE
========================================================= */

.kbt-premium-hero__btn {
  min-height: 51px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 0 21px;

  border: 1px solid transparent;

  border-radius: 999px;

  font-family: var(--ph-body);

  font-size: 10px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.01em;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

/* =========================================================
   PRIMARY
========================================================= */

.kbt-premium-hero__btn--primary {
  color: #101b27;

  background: linear-gradient(135deg, #f5ce7b, #dca644);

  box-shadow: 0 12px 30px rgba(213, 154, 42, 0.24);
}

.kbt-premium-hero__btn--primary:hover {
  color: #101b27;

  transform: translateY(-4px);

  box-shadow: 0 18px 40px rgba(213, 154, 42, 0.38);
}

.kbt-premium-hero__btn--primary .bx-right-arrow-alt {
  font-size: 18px;

  transition: transform 0.3s ease;
}

.kbt-premium-hero__btn--primary:hover .bx-right-arrow-alt {
  transform: translateX(4px);
}

/* =========================================================
   OUTLINE
========================================================= */

.kbt-premium-hero__btn--outline {
  color: #fff;

  border-color: rgba(255, 255, 255, 0.5);

  background: rgba(255, 255, 255, 0.045);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);
}

.kbt-premium-hero__btn--outline:hover {
  color: var(--ph-navy);

  border-color: #fff;

  background: #fff;

  transform: translateY(-4px);
}

.kbt-premium-hero__btn--outline .bx-right-arrow-alt {
  font-size: 18px;

  transition: transform 0.3s ease;
}

.kbt-premium-hero__btn--outline:hover .bx-right-arrow-alt {
  transform: translateX(4px);
}

/* =========================================================
   BUTTON ICON
========================================================= */

.kbt-premium-hero__btn-icon {
  width: 27px;

  height: 27px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  font-size: 15px;
}

/* =========================================================
   FEATURES
========================================================= */

.kbt-premium-hero__features {
  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 31px;

  opacity: 0;

  transform: translateY(20px);
}

.kbt-premium-hero__slide.is-active .kbt-premium-hero__features {
  animation: kbtPremiumReveal 0.75s 0.68s var(--ph-ease) forwards;
}

/* =========================================================
   FEATURE ITEM
========================================================= */

.kbt-premium-hero__feature {
  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 105px;
}

.kbt-premium-hero__feature:not(:last-child)::after {
  content: "";

  width: 1px;

  height: 28px;

  margin-left: 10px;

  background: rgba(255, 255, 255, 0.18);
}

/* =========================================================
   FEATURE ICON
========================================================= */

.kbt-premium-hero__feature-icon {
  width: 39px;

  height: 39px;

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--ph-gold-light);

  border: 1px solid rgba(241, 198, 107, 0.55);

  border-radius: 50%;

  background: rgba(217, 164, 65, 0.07);

  font-size: 19px;
}

/* =========================================================
   FEATURE TEXT
========================================================= */

.kbt-premium-hero__feature-text {
  display: flex;

  flex-direction: column;

  gap: 2px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 9px;

  line-height: 1.3;
}

.kbt-premium-hero__feature-text strong {
  color: #fff;

  font-size: 10px;

  font-weight: 700;
}

.kbt-premium-hero__feature-text span {
  color: rgba(255, 255, 255, 0.68);
}

/* =========================================================
   ROUTE CONNECTOR
========================================================= */

.kbt-premium-hero__route {
  position: absolute;

  z-index: 8;

  left: 39%;

  top: 38%;

  display: flex;

  flex-direction: column;

  gap: 5px;

  color: #fff;

  font-size: 11px;

  font-weight: 600;

  opacity: 0;

  transform: translateX(-10px);
}

.kbt-premium-hero__slide.is-active .kbt-premium-hero__route {
  animation: kbtPremiumRoute 0.9s 0.65s var(--ph-ease) forwards;
}

/* =========================================================
   ROUTE POINT
========================================================= */

.kbt-premium-hero__route-point {
  display: flex;

  align-items: center;

  gap: 8px;
}

.kbt-premium-hero__route-icon {
  width: 20px;

  height: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--ph-gold-light);

  font-size: 17px;
}

/* =========================================================
   ROUTE LINE
========================================================= */

.kbt-premium-hero__route-line {
  position: relative;

  width: 1px;

  height: 24px;

  margin-left: 9px;

  background: linear-gradient(180deg, var(--ph-gold-light), transparent);
}

.kbt-premium-hero__route-line::before,
.kbt-premium-hero__route-line::after {
  content: "";

  position: absolute;

  left: 50%;

  width: 5px;

  height: 5px;

  border: 1px solid var(--ph-gold-light);

  border-radius: 50%;

  background: var(--ph-navy);

  transform: translateX(-50%);
}

.kbt-premium-hero__route-line::before {
  top: 0;
}

.kbt-premium-hero__route-line::after {
  bottom: 0;
}

/* =========================================================
   KODAIKANAL BADGE
========================================================= */

.kbt-premium-hero__badge {
  position: absolute;

  z-index: 8;

  top: 38%;

  right: 7%;

  width: 145px;

  height: 145px;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transform: scale(0.85) rotate(-5deg);
}

.kbt-premium-hero__slide.is-active .kbt-premium-hero__badge {
  animation: kbtPremiumBadge 1s 0.75s var(--ph-ease) forwards;
}

.kbt-premium-hero__badge-ring {
  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #fff;

  border: 1px solid rgba(241, 198, 107, 0.75);

  border-radius: 50%;

  background: rgba(2, 15, 27, 0.12);

  backdrop-filter: blur(3px);

  -webkit-backdrop-filter: blur(3px);
}

.kbt-premium-hero__badge-ring::before {
  content: "";

  position: absolute;

  inset: 7px;

  border: 1px solid rgba(241, 198, 107, 0.35);

  border-radius: 50%;
}

.kbt-premium-hero__badge-mountain {
  color: var(--ph-gold-light);

  font-size: 29px;

  line-height: 1;

  margin-bottom: 5px;
}

.kbt-premium-hero__badge-ring strong {
  position: relative;

  z-index: 2;

  font-family: var(--ph-body);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.12em;
}

.kbt-premium-hero__badge-ring > span {
  position: relative;

  z-index: 2;

  margin-top: 4px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 7px;

  letter-spacing: 0.18em;
}

.kbt-premium-hero__badge-location {
  position: relative;

  z-index: 2;

  margin-top: 7px;

  color: var(--ph-gold-light);

  font-size: 15px;
}

/* =========================================================
   SCRIPT DECORATION
========================================================= */

.kbt-premium-hero__script {
  position: absolute;

  z-index: 8;

  right: 4.5%;

  bottom: 11%;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  color: #fff;

  font-family: var(--ph-heading);

  font-size: 27px;

  line-height: 0.85;

  font-style: italic;

  text-align: right;

  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);

  opacity: 0;

  transform: translateY(20px) rotate(-5deg);
}

.kbt-premium-hero__slide.is-active .kbt-premium-hero__script {
  animation: kbtPremiumReveal 0.9s 0.85s var(--ph-ease) forwards;
}

.kbt-premium-hero__script span {
  color: rgba(255, 255, 255, 0.9);
}

.kbt-premium-hero__script strong {
  color: var(--ph-gold-light);

  font-weight: 600;
}

.kbt-premium-hero__script i {
  width: 115px;

  height: 2px;

  margin-top: 10px;

  margin-right: 4px;

  border-radius: 10px;

  background: linear-gradient(90deg, transparent, var(--ph-gold-light));

  transform: rotate(-5deg);
}

/* =========================================================
   BOTTOM CONTROLS
========================================================= */

.kbt-premium-hero__bottom {
  position: absolute;

  z-index: 20;

  left: max(45px, calc((100% - 1440px) / 2));

  bottom: 32px;

  display: flex;

  align-items: center;

  gap: 18px;
}

/* =========================================================
   COUNTER
========================================================= */

.kbt-premium-hero__counter {
  display: flex;

  align-items: baseline;

  gap: 4px;

  min-width: 78px;

  color: rgba(255, 255, 255, 0.52);

  font-size: 12px;
}

.kbt-premium-hero__counter strong {
  color: #fff;

  font-family: var(--ph-heading);

  font-size: 28px;

  line-height: 1;
}

.kbt-premium-hero__counter span {
  font-size: 11px;
}

/* =========================================================
   PROGRESS
========================================================= */

.kbt-premium-hero__progress {
  position: relative;

  width: 160px;

  height: 2px;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.24);
}

.kbt-premium-hero__progress-bar {
  position: absolute;

  left: 0;

  top: 0;

  width: 33.333%;

  height: 100%;

  background: var(--ph-gold-light);

  transition: width 0.5s ease;
}

/* =========================================================
   NAVIGATION
========================================================= */

.kbt-premium-hero__navigation {
  display: flex;

  align-items: center;

  gap: 7px;
}

.kbt-premium-hero__nav {
  width: 43px;

  height: 43px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  color: #fff;

  border: 1px solid rgba(241, 198, 107, 0.65);

  border-radius: 50%;

  background: rgba(3, 18, 32, 0.4);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.kbt-premium-hero__nav i {
  font-size: 21px;
}

.kbt-premium-hero__nav:hover {
  color: #111c28;

  background: var(--ph-gold-light);

  transform: translateY(-3px);
}

/* =========================================================
   SCROLL INDICATOR
========================================================= */

.kbt-premium-hero__scroll {
  position: absolute;

  z-index: 20;

  right: 28px;

  bottom: 30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 0.16em;

  writing-mode: vertical-rl;
}

.kbt-premium-hero__scroll i {
  color: var(--ph-gold-light);

  font-size: 17px;

  animation: kbtPremiumScroll 1.8s ease-in-out infinite;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes kbtPremiumReveal {
  from {
    opacity: 0;

    transform: translateY(30px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes kbtPremiumRoute {
  from {
    opacity: 0;

    transform: translateX(-20px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

@keyframes kbtPremiumBadge {
  from {
    opacity: 0;

    transform: scale(0.75) rotate(-10deg);
  }

  to {
    opacity: 1;

    transform: scale(1) rotate(-5deg);
  }
}

@keyframes kbtPremiumScroll {
  0%,
  100% {
    transform: translateY(0);

    opacity: 0.55;
  }

  50% {
    transform: translateY(6px);

    opacity: 1;
  }
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {
  .kbt-premium-hero {
    --ph-height: 800px;
  }

  .kbt-premium-hero__content {
    width: 550px;
  }

  .kbt-premium-hero__title {
    font-size: 74px;
  }

  .kbt-premium-hero__badge {
    right: 8%;

    width: 155px;

    height: 155px;
  }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {
  .kbt-premium-hero {
    --ph-height: 700px;

    min-height: 650px;
  }

  .kbt-premium-hero__container {
    width: calc(100% - 70px);
  }

  .kbt-premium-hero__content {
    width: 470px;

    max-width: 45%;

    padding-top: 45px;
  }

  .kbt-premium-hero__title {
    font-size: 61px;
  }

  .kbt-premium-hero__slide::before {
    width: 50%;
  }

  .kbt-premium-hero__route {
    left: 41%;
  }

  .kbt-premium-hero__badge {
    right: 5%;

    width: 125px;

    height: 125px;
  }

  .kbt-premium-hero__script {
    right: 3%;

    bottom: 12%;

    font-size: 23px;
  }

  .kbt-premium-hero__progress {
    width: 120px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
  .kbt-premium-hero {
    --ph-height: 680px;

    min-height: 620px;
  }

  .kbt-premium-hero__container {
    width: calc(100% - 50px);
  }

  .kbt-premium-hero__content {
    max-width: 52%;

    width: 470px;

    padding-top: 55px;
  }

  .kbt-premium-hero__title {
    font-size: 54px;

    line-height: 0.91;
  }

  .kbt-premium-hero__description {
    max-width: 430px;

    font-size: 12px;
  }

  .kbt-premium-hero__features {
    gap: 12px;
  }

  .kbt-premium-hero__feature {
    min-width: auto;
  }

  .kbt-premium-hero__feature:not(:last-child)::after {
    margin-left: 4px;
  }

  .kbt-premium-hero__feature-icon {
    width: 34px;

    height: 34px;

    font-size: 16px;
  }

  .kbt-premium-hero__route {
    left: 48%;

    top: 37%;

    font-size: 9px;
  }

  .kbt-premium-hero__badge {
    top: 31%;

    right: 4%;

    width: 105px;

    height: 105px;
  }

  .kbt-premium-hero__badge-mountain {
    font-size: 22px;
  }

  .kbt-premium-hero__badge-ring strong {
    font-size: 8px;
  }

  .kbt-premium-hero__script {
    right: 2%;

    bottom: 17%;

    font-size: 19px;
  }

  .kbt-premium-hero__bottom {
    left: 25px;

    bottom: 23px;
  }

  .kbt-premium-hero__scroll {
    display: none;
  }
}

/* =========================================================
   MOBILE — 767
========================================================= */

@media (max-width: 767px) {
  .kbt-premium-hero {
    height: 720px;

    min-height: 720px;
  }

  /* IMAGE */

  .kbt-premium-hero__image img {
    object-position: 62% center;
  }

  /* STRONG MOBILE OVERLAY */

  .kbt-premium-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(2, 15, 27, 0.48) 0%,
      rgba(2, 15, 27, 0.2) 32%,
      rgba(2, 15, 27, 0.76) 100%
    );
  }

  /* MOBILE PANEL */

  .kbt-premium-hero__slide::before {
    left: 0;

    top: auto;

    bottom: 0;

    width: 100%;

    height: 61%;

    background: linear-gradient(
      180deg,
      rgba(3, 18, 31, 0.08),
      rgba(3, 18, 31, 0.97) 18%
    );

    clip-path: none;

    box-shadow: none;
  }

  .kbt-premium-hero__slide::after {
    width: 70%;

    height: 55%;

    opacity: 0.08;
  }

  /* CONTENT */

  .kbt-premium-hero__container {
    width: calc(100% - 34px);

    align-items: flex-end;
  }

  .kbt-premium-hero__content {
    width: 100%;

    max-width: 100%;

    padding: 0 0 112px;
  }

  .kbt-premium-hero__eyebrow {
    margin-bottom: 13px;

    font-size: 8px;

    letter-spacing: 0.2em;
  }

  .kbt-premium-hero__eyebrow-line {
    width: 25px;
  }

  .kbt-premium-hero__title {
    max-width: 360px;

    font-size: 43px;

    line-height: 0.94;

    letter-spacing: -0.035em;
  }

  .kbt-premium-hero__description {
    max-width: 390px;

    margin: 17px 0 19px;

    font-size: 11px;

    line-height: 1.65;
  }

  /* BUTTONS */

  .kbt-premium-hero__actions {
    gap: 8px;
  }

  .kbt-premium-hero__btn {
    min-height: 44px;

    padding: 0 14px;

    gap: 7px;

    font-size: 9px;
  }

  .kbt-premium-hero__btn-icon {
    width: 23px;

    height: 23px;

    font-size: 13px;
  }

  /* FEATURES */

  .kbt-premium-hero__features {
    gap: 8px;

    margin-top: 18px;
  }

  .kbt-premium-hero__feature {
    gap: 5px;
  }

  .kbt-premium-hero__feature:not(:last-child)::after {
    display: none;
  }

  .kbt-premium-hero__feature-icon {
    width: 29px;

    height: 29px;

    font-size: 14px;
  }

  .kbt-premium-hero__feature-text {
    font-size: 7px;
  }

  .kbt-premium-hero__feature-text strong {
    font-size: 8px;
  }

  /* ROUTE */

  .kbt-premium-hero__route {
    left: auto;

    right: 20px;

    top: 27%;

    transform: scale(0.85);

    transform-origin: right center;
  }

  /* BADGE */

  .kbt-premium-hero__badge {
    top: 19%;

    right: 17px;

    width: 92px;

    height: 92px;
  }

  .kbt-premium-hero__badge-mountain {
    font-size: 19px;

    margin-bottom: 2px;
  }

  .kbt-premium-hero__badge-ring strong {
    font-size: 7px;
  }

  .kbt-premium-hero__badge-ring > span {
    font-size: 5px;
  }

  .kbt-premium-hero__badge-location {
    margin-top: 3px;

    font-size: 11px;
  }

  /* SCRIPT */

  .kbt-premium-hero__script {
    right: 18px;

    bottom: 46%;

    font-size: 17px;
  }

  .kbt-premium-hero__script i {
    width: 75px;

    margin-top: 7px;
  }

  /* BOTTOM */

  .kbt-premium-hero__bottom {
    left: 17px;

    right: 17px;

    bottom: 18px;

    gap: 10px;
  }

  .kbt-premium-hero__counter {
    min-width: 52px;
  }

  .kbt-premium-hero__counter strong {
    font-size: 23px;
  }

  .kbt-premium-hero__counter span {
    font-size: 9px;
  }

  .kbt-premium-hero__progress {
    flex: 1;

    width: auto;

    max-width: 130px;
  }

  .kbt-premium-hero__nav {
    width: 35px;

    height: 35px;
  }

  .kbt-premium-hero__nav i {
    font-size: 17px;
  }
}

/* =========================================================
   SMALL MOBILE — 480
========================================================= */

@media (max-width: 480px) {
  .kbt-premium-hero {
    height: 690px;

    min-height: 690px;
  }

  .kbt-premium-hero__container {
    width: calc(100% - 26px);
  }

  .kbt-premium-hero__content {
    padding-bottom: 105px;
  }

  .kbt-premium-hero__title {
    max-width: 300px;

    font-size: 38px;
  }

  .kbt-premium-hero__description {
    max-width: 320px;

    font-size: 10px;
  }

  .kbt-premium-hero__btn {
    min-height: 42px;

    padding: 0 12px;

    font-size: 8px;
  }

  .kbt-premium-hero__btn--outline {
    padding-inline: 11px;
  }

  .kbt-premium-hero__features {
    gap: 6px;
  }

  .kbt-premium-hero__feature-icon {
    width: 27px;

    height: 27px;
  }

  .kbt-premium-hero__feature-text strong {
    font-size: 7px;
  }

  .kbt-premium-hero__feature-text span {
    font-size: 6px;
  }

  .kbt-premium-hero__badge {
    top: 17%;

    right: 12px;

    width: 78px;

    height: 78px;
  }

  .kbt-premium-hero__badge-mountain {
    font-size: 16px;
  }

  .kbt-premium-hero__badge-ring strong {
    font-size: 6px;
  }

  .kbt-premium-hero__badge-ring > span {
    font-size: 4px;
  }

  .kbt-premium-hero__route {
    top: 26%;

    right: 10px;

    transform: scale(0.72);
  }

  .kbt-premium-hero__script {
    right: 12px;

    bottom: 45%;

    font-size: 14px;
  }

  .kbt-premium-hero__bottom {
    bottom: 14px;
  }

  .kbt-premium-hero__progress {
    max-width: 90px;
  }

  .kbt-premium-hero__nav {
    width: 32px;

    height: 32px;
  }
}

/* =========================================================
   EXTRA SMALL — 380
========================================================= */

@media (max-width: 380px) {
  .kbt-premium-hero {
    height: 670px;

    min-height: 670px;
  }

  .kbt-premium-hero__title {
    font-size: 35px;
  }

  .kbt-premium-hero__description {
    margin-top: 14px;

    margin-bottom: 15px;
  }

  .kbt-premium-hero__features {
    margin-top: 14px;
  }

  /* .kbt-premium-hero__feature:nth-child(3) {

        display:
            none;

    } */

  .kbt-premium-hero__script {
    display: none;
  }

  .kbt-premium-hero__progress {
    max-width: 70px;
  }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .kbt-premium-hero *,
  .kbt-premium-hero *::before,
  .kbt-premium-hero *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }
}

/* =========================================================
   KBT FINAL SECTION HEADING OVERRIDE
   HERO IS NOT TOUCHED
========================================================= */

.kbt-home #about .kbt-about-content .kbt-section-heading h1,
.kbt-home #sightseeing .kbt-section-heading h2,
.kbt-home #car-rental .kbt-section-heading h2,
.kbt-home #testimonials .kbt-section-heading h2,
.kbt-home #blog .kbt-travel-journal-heading h2,
.kbt-home #faq .kbt-faq-intro h2 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--kbt-navy) !important;
  font-family: var(--kbt-heading) !important;
  font-size: 42px !important;
  line-height: 1.02 !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
}

.kbt-home #about .kbt-about-content .kbt-section-heading h1 span,
.kbt-home #sightseeing .kbt-section-heading h2 span,
.kbt-home #car-rental .kbt-section-heading h2 span,
.kbt-home #testimonials .kbt-section-heading h2 span,
.kbt-home #blog .kbt-travel-journal-heading h2 span,
.kbt-home #faq .kbt-faq-intro h2 span {
  font-family: var(--kbt-heading) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: var(--kbt-gold) !important;
}

@media (max-width: 700px) {
  .kbt-home #about .kbt-about-content .kbt-section-heading h1,
  .kbt-home #sightseeing .kbt-section-heading h2,
  .kbt-home #car-rental .kbt-section-heading h2,
  .kbt-home #testimonials .kbt-section-heading h2,
  .kbt-home #blog .kbt-travel-journal-heading h2,
  .kbt-home #faq .kbt-faq-intro h2 {
    font-size: 38px !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 480px) {
  .kbt-home #about .kbt-about-content .kbt-section-heading h1 {
    font-size: 34px !important;
  }

  .kbt-home #sightseeing .kbt-section-heading h2,
  .kbt-home #car-rental .kbt-section-heading h2,
  .kbt-home #testimonials .kbt-section-heading h2,
  .kbt-home #blog .kbt-travel-journal-heading h2,
  .kbt-home #faq .kbt-faq-intro h2 {
    font-size: 36px !important;
  }
}
/* =========================================================
   KBT - COMMON SECTION HEADING
========================================================= */

html body .kbt-home .kbt-section-title {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--kbt-heading) !important;

  font-size: 36px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;

  letter-spacing: -0.02em !important;

  color: #0b2342 !important;

  /* IMPORTANT:
       Keep original HTML casing.
       No uppercase transformation.
    */
  text-transform: none !important;
}

/* Heading highlighted words */
html body .kbt-home .kbt-section-title span {
  font-family: var(--kbt-heading) !important;
  font-weight: 700 !important;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 767px) {
  html body .kbt-home .kbt-section-title {
    font-size: 32px !important;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {
  html body .kbt-home .kbt-section-title {
    font-size: 30px !important;
  }
}
/* =========================================================
   BLOG - HEADING GAP
========================================================= */

html body .kbt-home #blog .kbt-travel-journal-heading .kbt-section-title {
  padding-top: 10px !important;
}
/* =========================================================
   KODAI BOOK MY TAXI
   KODAIKANAL CAR RENTAL
   PREMIUM LANDING PAGE
   index.css
   ========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root {
  --kbt-blog-navy: #06243f;
  --kbt-blog-navy-dark: #031a2f;
  --kbt-blog-navy-soft: #123b5b;

  --kbt-blog-gold: #d6a33a;
  --kbt-blog-gold-light: #efc86d;
  --kbt-blog-gold-soft: #f8edcf;

  --kbt-blog-cream: #fbfaf6;
  --kbt-blog-white: #ffffff;

  --kbt-blog-text: #26384a;
  --kbt-blog-text-soft: #687789;
  --kbt-blog-border: #e8e7e2;

  --kbt-blog-shadow: 0 12px 40px rgba(4, 28, 48, 0.08);

  --kbt-blog-shadow-hover: 0 24px 60px rgba(4, 28, 48, 0.15);

  --kbt-blog-heading: Georgia, "Times New Roman", serif;

  --kbt-blog-body: "Montserrat", Arial, sans-serif;

  --kbt-cr-radius-sm: 12px;
  --kbt-cr-radius-md: 20px;
  --kbt-cr-radius-lg: 30px;
  --kbt-cr-radius-xl: 40px;

  --kbt-cr-container: 1320px;

  --kbt-cr-transition: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   RESET
========================================================= */

.kbt-car-rental-page,
.kbt-car-rental-page * {
  box-sizing: border-box;
}

.kbt-car-rental-page {
  width: 100%;
  overflow: hidden;
  background: var(--kbt-blog-white);
  color: var(--kbt-blog-text);
  font-family: var(--kbt-blog-body);
  line-height: 1.7;
}

.kbt-car-rental-page img {
  max-width: 100%;
  display: block;
}

.kbt-car-rental-page a {
  text-decoration: none;
}

.kbt-car-rental-page h1,
.kbt-car-rental-page h2,
.kbt-car-rental-page h3,
.kbt-car-rental-page p {
  margin-top: 0;
}

.kbt-car-rental-page h1,
.kbt-car-rental-page h2,
.kbt-car-rental-page h3 {
  font-family: var(--kbt-blog-heading);
}

/* =========================================================
   CONTAINER
========================================================= */

.kbt-cr-container {
  width: min(calc(100% - 80px), var(--kbt-cr-container));

  margin-inline: auto;
}

/* =========================================================
   COMMON LABEL
========================================================= */

.kbt-cr-section-label {
  display: inline-flex;
  align-items: center;

  padding: 5px 14px;

  border: 1px solid rgba(214, 163, 58, 0.45);
  border-radius: 100px;

  background: rgba(248, 237, 207, 0.75);

  color: var(--kbt-blog-gold);

  font-family: var(--kbt-blog-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.7px;
  line-height: 1.2;
  /* text-transform: uppercase; */
}

.kbt-cr-section-label--light {
  color: var(--kbt-blog-gold-light);

  background: rgba(214, 163, 58, 0.1);

  border-color: rgba(239, 200, 109, 0.4);
}

/* =========================================================
   COMMON SECTION TITLE
========================================================= */

.kbt-cr-section-title {
  margin: 12px 0 20px;

  color: var(--kbt-blog-navy);

  font-family: var(--kbt-blog-heading);
  font-size: clamp(42px, 4.2vw, 68px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -1.8px;
}

.kbt-cr-section-title span {
  display: block;
  color: var(--kbt-blog-gold);
}

/* =========================================================
   HERO
========================================================= */

.kbt-cr-hero {
  position: relative;

  min-height: 650px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.92) 28%,
    rgba(255, 255, 255, 0.42) 52%,
    rgba(255, 255, 255, 0.02) 76%
  );
}

/* HERO BACKGROUND */

.kbt-cr-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.kbt-cr-hero__bg-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter: saturate(1.05);
}

.kbt-cr-hero__overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(251, 250, 246, 0.98) 0%,
    rgba(251, 250, 246, 0.92) 25%,
    rgba(251, 250, 246, 0.6) 45%,
    rgba(251, 250, 246, 0.12) 72%,
    rgba(3, 26, 47, 0.02) 100%
  );
}

/* HERO CONTENT */

.kbt-cr-hero .kbt-cr-container {
  position: relative;
  z-index: 2;

  min-height: 650px;

  display: flex;
  align-items: center;
}

.kbt-cr-hero__content {
  width: 55%;
  padding: 70px 0 70px;
}

/* EYEBROW */

.kbt-cr-eyebrow {
  display: inline-flex;
  align-items: center;

  padding: 7px 16px;

  border-radius: 100px;

  background: var(--kbt-blog-gold-soft);

  color: var(--kbt-blog-navy);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  /* text-transform: uppercase; */

  border: 1px solid rgba(214, 163, 58, 0.35);
}

/* HERO TITLE */

.kbt-cr-hero__title {
  max-width: 680px;

  margin: 18px 0 10px;

  color: var(--kbt-blog-navy);

  font-family: var(--kbt-blog-heading);
  font-size: clamp(54px, 5.8vw, 88px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -3px;
}

.kbt-cr-hero__title span {
  display: block;

  color: var(--kbt-blog-gold);
}

/* HERO SUBTITLE */

.kbt-cr-hero__subtitle {
  margin-bottom: 26px;

  color: var(--kbt-blog-navy);

  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

/* HERO FEATURES */

.kbt-cr-hero__features {
  display: flex;
  align-items: stretch;

  margin: 25px 0 32px;
}

.kbt-cr-hero-feature {
  min-width: 115px;

  padding: 0 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  color: var(--kbt-blog-navy);

  font-size: 13px;
  font-weight: 700;

  border-right: 1px solid rgba(6, 36, 63, 0.28);
}

.kbt-cr-hero-feature:first-child {
  padding-left: 0;
}

.kbt-cr-hero-feature:last-child {
  border-right: 0;
}

.kbt-cr-hero-feature__icon {
  width: 42px;
  height: 42px;

  margin-bottom: 8px;

  display: grid;
  place-items: center;

  color: var(--kbt-blog-navy);

  font-size: 24px;
}

/* HERO BUTTONS */

.kbt-cr-hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.kbt-cr-btn {
  min-height: 52px;

  padding: 0 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border-radius: 100px;

  font-family: var(--kbt-blog-body);
  font-size: 14px;
  font-weight: 700;

  transition:
    transform var(--kbt-cr-transition),
    box-shadow var(--kbt-cr-transition),
    background var(--kbt-cr-transition);
}

.kbt-cr-btn:hover {
  transform: translateY(-3px);
}

.kbt-cr-btn--dark {
  color: var(--kbt-blog-white);

  background: var(--kbt-blog-navy);

  box-shadow: 0 12px 25px rgba(6, 36, 63, 0.2);
}

.kbt-cr-btn--dark:hover {
  color: var(--kbt-blog-white);

  background: var(--kbt-blog-navy-dark);

  box-shadow: 0 18px 35px rgba(6, 36, 63, 0.28);
}

.kbt-cr-btn--light {
  color: var(--kbt-blog-navy);

  background: var(--kbt-blog-white);

  border: 1px solid var(--kbt-blog-border);

  box-shadow: 0 10px 25px rgba(4, 28, 48, 0.08);
}

.kbt-cr-btn--light:hover {
  color: var(--kbt-blog-navy);

  box-shadow: 0 18px 35px rgba(4, 28, 48, 0.14);
}

/* HERO CAR */

.kbt-cr-hero__car {
  position: absolute;

  z-index: 3;

  right: -2%;
  bottom: 0;

  width: 52%;

  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  pointer-events: none;
}

.kbt-cr-hero__car-image {
  width: 100%;
  max-width: 760px;

  max-height: 460px;

  object-fit: contain;
  object-position: right bottom;

  filter: drop-shadow(0 28px 25px rgba(0, 0, 0, 0.22));

  transform: translateY(10px);
}

/* =========================================================
   EXPLORE SECTION
========================================================= */

.kbt-cr-explore {
  position: relative;

  padding: 100px 0;

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(248, 237, 207, 0.55),
      transparent 32%
    ),
    var(--kbt-blog-cream);
}

.kbt-cr-explore__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  align-items: center;

  gap: 80px;
}

.kbt-cr-explore__content {
  max-width: 570px;
}

.kbt-cr-explore__content p {
  max-width: 550px;

  color: var(--kbt-blog-text-soft);

  font-size: 16px;
  line-height: 1.85;
}

.kbt-cr-outline-btn {
  margin-top: 15px;

  display: inline-flex;
  align-items: center;
  gap: 18px;

  padding: 14px 23px;

  color: var(--kbt-blog-white);

  background: var(--kbt-blog-navy);

  border-radius: 100px;

  font-size: 14px;
  font-weight: 700;

  box-shadow: 0 12px 30px rgba(6, 36, 63, 0.15);

  transition:
    transform var(--kbt-cr-transition),
    background var(--kbt-cr-transition);
}

.kbt-cr-outline-btn:hover {
  color: var(--kbt-blog-white);

  background: var(--kbt-blog-gold);

  transform: translateY(-3px);
}

/* =========================================================
   POLAROID GALLERY
========================================================= */

.kbt-cr-explore__gallery {
  position: relative;

  min-height: 500px;
}

.kbt-cr-polaroid {
  position: absolute;

  padding: 10px 10px 34px;

  background: var(--kbt-blog-white);

  box-shadow: 0 22px 55px rgba(4, 28, 48, 0.15);

  border: 1px solid rgba(6, 36, 63, 0.06);

  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.5s ease;

  overflow: hidden;
}

.kbt-cr-polaroid img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.kbt-cr-polaroid span {
  position: absolute;

  bottom: 9px;
  left: 0;
  right: 0;

  text-align: center;

  color: var(--kbt-blog-navy);

  font-family: var(--kbt-blog-heading);
  font-size: 18px;
  font-style: italic;
}

.kbt-cr-polaroid--main {
  top: 25px;
  left: 2%;

  width: 64%;
  height: 410px;

  z-index: 3;

  transform: rotate(-3deg);
}

.kbt-cr-polaroid--top {
  top: 0;
  right: 4%;

  width: 38%;
  height: 250px;

  z-index: 2;

  transform: rotate(5deg);
}

.kbt-cr-polaroid--bottom {
  right: 0;
  bottom: 8px;

  width: 42%;
  height: 250px;

  z-index: 4;

  transform: rotate(4deg);
}

.kbt-cr-polaroid:hover {
  z-index: 10;

  transform: rotate(0deg) translateY(-8px) scale(1.02);

  box-shadow: 0 30px 70px rgba(4, 28, 48, 0.22);
}

.kbt-cr-gallery-decoration {
  position: absolute;

  right: -5%;
  top: 38%;

  z-index: 5;

  color: var(--kbt-blog-gold);

  font-family: var(--kbt-blog-heading);
  font-size: 22px;
  font-style: italic;
  line-height: 1.1;

  transform: rotate(-7deg);
}

/* =========================================================
   ATTRACTIONS
========================================================= */

.kbt-cr-attractions {
  padding: 90px 0 100px;

  background: var(--kbt-blog-white);
}

.kbt-cr-attractions__header {
  display: grid;

  grid-template-columns: 0.7fr 1.3fr;

  align-items: end;

  gap: 70px;

  margin-bottom: 42px;
}

.kbt-cr-attractions__header .kbt-cr-section-title {
  margin-bottom: 0;
}

.kbt-cr-attractions__intro p {
  max-width: 730px;

  margin: 0;

  color: var(--kbt-blog-text-soft);

  font-size: 15px;
  line-height: 1.8;
}

/* ATTRACTION GRID */

.kbt-cr-attraction-grid {
  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 16px;
}

.kbt-cr-attraction-card {
  position: relative;

  min-width: 0;

  padding: 0 0 15px;

  overflow: hidden;

  background: var(--kbt-blog-white);

  border-radius: 16px;

  box-shadow: 0 8px 30px rgba(4, 28, 48, 0.07);

  transition:
    transform var(--kbt-cr-transition),
    box-shadow var(--kbt-cr-transition);
}

.kbt-cr-attraction-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 45px rgba(4, 28, 48, 0.14);
}

.kbt-cr-attraction-card__image {
  height: 190px;

  overflow: hidden;
}

.kbt-cr-attraction-card__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.kbt-cr-attraction-card:hover .kbt-cr-attraction-card__image img {
  transform: scale(1.08);
}

.kbt-cr-attraction-card h3 {
  margin: 13px 10px 0;

  color: var(--kbt-blog-navy);

  font-family: var(--kbt-blog-body);
  font-size: 14px;
  font-weight: 700;

  text-align: center;
}

/* =========================================================
   SOLUTIONS SECTION
========================================================= */

.kbt-cr-solutions {
  position: relative;

  min-height: 610px;

  display: grid;

  grid-template-columns: 48% 52%;

  overflow: hidden;

  background: var(--kbt-blog-navy-dark);
}

.kbt-cr-solutions__image {
  position: relative;

  min-height: 610px;

  overflow: hidden;
}

.kbt-cr-solutions__image::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(3, 26, 47, 0) 45%,
    rgba(3, 26, 47, 0.35) 78%,
    rgba(3, 26, 47, 0.95) 100%
  );
}

.kbt-cr-solutions__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.kbt-cr-solutions__content {
  position: relative;

  z-index: 2;

  padding: 80px max(5vw, 70px) 80px 55px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  color: var(--kbt-blog-white);

  background: linear-gradient(135deg, #06243f 0%, #031a2f 100%);
}

.kbt-cr-solutions__content::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 160px;
  height: 5px;

  background: var(--kbt-blog-gold);
}

.kbt-cr-solutions__content .kbt-cr-section-title {
  max-width: 630px;

  margin-bottom: 42px;

  color: var(--kbt-blog-white);
}

.kbt-cr-solution-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 35px 45px;
}

.kbt-cr-solution-item {
  display: grid;

  grid-template-columns: 52px 1fr;

  gap: 15px;

  align-items: start;
}

.kbt-cr-solution-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  color: var(--kbt-blog-navy);

  background: var(--kbt-blog-white);

  border: 2px solid var(--kbt-blog-gold);

  border-radius: 50%;

  font-size: 18px;
}

.kbt-cr-solution-item h3 {
  margin: 2px 0 5px;

  color: var(--kbt-blog-white);

  font-family: var(--kbt-blog-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.kbt-cr-solution-item p {
  margin: 0;

  color: rgba(255, 255, 255, 0.68);

  font-size: 12px;
  line-height: 1.55;
}

/* =========================================================
   WHY CHOOSE
========================================================= */

.kbt-cr-why {
  position: relative;

  padding: 85px 0;

  background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
}

.kbt-cr-why__grid {
  display: grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  gap: 45px 65px;

  align-items: center;
}

.kbt-cr-why__content {
  align-self: start;
}

.kbt-cr-why__content p {
  max-width: 500px;

  color: var(--kbt-blog-text-soft);

  font-size: 15px;
}

.kbt-cr-why__image {
  height: 270px;

  overflow: hidden;

  border-radius: 24px;

  box-shadow: var(--kbt-blog-shadow);
}

.kbt-cr-why__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.7s ease;
}

.kbt-cr-why__image:hover img {
  transform: scale(1.04);
}

/* BENEFITS */

.kbt-cr-benefits {
  grid-column: 1 / -1;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.kbt-cr-benefit {
  min-height: 105px;

  display: flex;
  align-items: center;

  gap: 15px;

  padding: 18px 20px;

  background: var(--kbt-blog-white);

  border: 1px solid var(--kbt-blog-border);

  border-radius: 16px;

  box-shadow: 0 8px 25px rgba(4, 28, 48, 0.04);

  transition:
    transform var(--kbt-cr-transition),
    box-shadow var(--kbt-cr-transition);
}

.kbt-cr-benefit:hover {
  transform: translateY(-5px);

  box-shadow: 0 18px 40px rgba(4, 28, 48, 0.1);
}

.kbt-cr-benefit__icon {
  width: 48px;
  height: 48px;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  color: var(--kbt-blog-white);

  background: var(--kbt-blog-navy);

  border-radius: 50%;

  font-size: 17px;
}

.kbt-cr-benefit h3 {
  margin: 0 0 3px;

  color: var(--kbt-blog-navy);

  font-family: var(--kbt-blog-body);
  font-size: 14px;
  font-weight: 700;
}

.kbt-cr-benefit p {
  margin: 0;

  color: var(--kbt-blog-text-soft);

  font-size: 12px;
  line-height: 1.5;
}

.kbt-cr-why__bottom-text {
  margin-top: 25px;

  text-align: center;
}

.kbt-cr-why__bottom-text p {
  margin: 0;

  color: var(--kbt-blog-text);

  font-size: 15px;
  font-weight: 600;
}

/* =========================================================
   PRICING
========================================================= */

.kbt-cr-pricing {
  position: relative;

  padding: 90px 0;

  background: linear-gradient(90deg, #fbfaf6 0%, #ffffff 50%, #fbfaf6 100%);
}

.kbt-cr-pricing__header {
  max-width: 800px;

  margin-bottom: 38px;
}

.kbt-cr-pricing__header p {
  margin-bottom: 0;

  color: var(--kbt-blog-text-soft);

  font-size: 15px;
}

.kbt-cr-pricing__grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;
}

.kbt-cr-price-card {
  min-height: 170px;

  padding: 25px;

  background: var(--kbt-blog-white);

  border: 1px solid var(--kbt-blog-border);

  border-radius: 18px;

  box-shadow: 0 10px 35px rgba(4, 28, 48, 0.05);

  transition:
    transform var(--kbt-cr-transition),
    box-shadow var(--kbt-cr-transition);
}

.kbt-cr-price-card:hover {
  transform: translateY(-7px);

  box-shadow: var(--kbt-blog-shadow-hover);
}

.kbt-cr-price-card__icon {
  width: 45px;
  height: 45px;

  margin-bottom: 15px;

  display: grid;
  place-items: center;

  color: var(--kbt-blog-navy);

  background: var(--kbt-blog-gold-soft);

  border-radius: 12px;

  font-size: 18px;
}

.kbt-cr-price-card h3 {
  margin-bottom: 5px;

  color: var(--kbt-blog-navy);

  font-family: var(--kbt-blog-body);
  font-size: 14px;
  font-weight: 700;
}

.kbt-cr-price-card p {
  margin: 0;

  color: var(--kbt-blog-text-soft);

  font-size: 12px;
}

.kbt-cr-pricing__bottom {
  margin: 25px 0 0;

  color: var(--kbt-blog-text);

  font-size: 14px;
  font-weight: 600;
}

/* =========================================================
   FAQ
========================================================= */

.kbt-cr-faq {
  padding: 90px 0 100px;

  background: var(--kbt-blog-white);
}

.kbt-cr-faq__header {
  margin-bottom: 35px;
}

.kbt-cr-faq__grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;
}

.kbt-cr-faq__column {
  display: flex;
  flex-direction: column;

  gap: 12px;
}

.kbt-cr-faq-item {
  overflow: hidden;

  background: var(--kbt-blog-white);

  border: 1px solid var(--kbt-blog-border);

  border-radius: 12px;

  box-shadow: 0 5px 20px rgba(4, 28, 48, 0.035);
}

.kbt-cr-faq-question {
  width: 100%;

  min-height: 62px;

  padding: 15px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  border: 0;

  background: transparent;

  color: var(--kbt-blog-navy);

  font-family: var(--kbt-blog-body);
  font-size: 13px;
  font-weight: 700;

  text-align: left;

  cursor: pointer;

  transition: background var(--kbt-cr-transition);
}

.kbt-cr-faq-question:hover {
  background: var(--kbt-blog-cream);
}

.kbt-cr-faq-question i {
  width: 26px;
  height: 26px;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  color: var(--kbt-blog-white);

  background: var(--kbt-blog-navy);

  border-radius: 50%;

  font-size: 10px;

  transition:
    transform var(--kbt-cr-transition),
    background var(--kbt-cr-transition);
}

.kbt-cr-faq-question[aria-expanded="true"] i {
  transform: rotate(45deg);

  background: var(--kbt-blog-gold);
}

.kbt-cr-faq-answer {
  max-height: 0;

  overflow: hidden;

  padding: 0 20px;

  opacity: 0;

  transition:
    max-height 0.4s ease,
    padding 0.4s ease,
    opacity 0.3s ease;
}

.kbt-cr-faq-item.is-open .kbt-cr-faq-answer {
  max-height: 300px;

  padding: 0 20px 20px;

  opacity: 1;
}

.kbt-cr-faq-answer p {
  margin: 0;

  color: var(--kbt-blog-text-soft);

  font-size: 13px;
  line-height: 1.75;
}

/* =========================================================
   DESKTOP DECORATION
========================================================= */

.kbt-cr-explore::before {
  content: "";

  position: absolute;

  top: 0;
  left: -100px;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(214, 163, 58, 0.12),
    transparent 70%
  );

  pointer-events: none;
}

/* =========================================================
   ANIMATION STATES
========================================================= */

.kbt-cr-hero__content,
.kbt-cr-hero__car,
.kbt-cr-explore__content,
.kbt-cr-explore__gallery,
.kbt-cr-attraction-card,
.kbt-cr-solution-item,
.kbt-cr-benefit,
.kbt-cr-price-card,
.kbt-cr-faq-item {
  will-change: transform, opacity;
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {
  .kbt-cr-container {
    width: min(calc(100% - 120px), 1440px);
  }

  .kbt-cr-hero {
    min-height: 720px;
  }

  .kbt-cr-hero .kbt-cr-container {
    min-height: 720px;
  }

  .kbt-cr-hero__title {
    font-size: 94px;
  }

  .kbt-cr-hero__car {
    width: 53%;
  }

  .kbt-cr-attraction-card__image {
    height: 220px;
  }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {
  .kbt-cr-container {
    width: min(calc(100% - 50px), 1100px);
  }

  .kbt-cr-hero {
    min-height: 610px;
  }

  .kbt-cr-hero .kbt-cr-container {
    min-height: 610px;
  }

  .kbt-cr-hero__content {
    width: 58%;
  }

  .kbt-cr-hero__car {
    width: 50%;
    right: -5%;
  }

  .kbt-cr-hero__title {
    font-size: clamp(50px, 6vw, 72px);
  }

  .kbt-cr-explore__grid {
    gap: 45px;
  }

  .kbt-cr-polaroid--main {
    height: 360px;
  }

  .kbt-cr-polaroid--top,
  .kbt-cr-polaroid--bottom {
    height: 220px;
  }

  .kbt-cr-attraction-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kbt-cr-solutions__content {
    padding: 70px 45px;
  }

  .kbt-cr-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
  .kbt-cr-container {
    width: min(calc(100% - 40px), 760px);
  }

  /* HERO */

  .kbt-cr-hero {
    min-height: auto;

    background: var(--kbt-blog-cream);
  }

  .kbt-cr-hero__background {
    position: absolute;
  }

  .kbt-cr-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(251, 250, 246, 0.94),
      rgba(251, 250, 246, 0.55) 55%,
      rgba(251, 250, 246, 0.9)
    );
  }

  .kbt-cr-hero .kbt-cr-container {
    min-height: auto;

    display: block;
  }

  .kbt-cr-hero__content {
    position: relative;

    z-index: 4;

    width: 100%;

    padding: 85px 0 35px;
  }

  .kbt-cr-hero__title {
    max-width: 700px;

    font-size: clamp(48px, 8vw, 70px);
  }

  .kbt-cr-hero__car {
    position: relative;

    right: auto;
    bottom: auto;

    width: 100%;

    margin-top: -25px;

    justify-content: center;
  }

  .kbt-cr-hero__car-image {
    max-width: 650px;

    max-height: 360px;
  }

  /* EXPLORE */

  .kbt-cr-explore {
    padding: 75px 0;
  }

  .kbt-cr-explore__grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .kbt-cr-explore__content {
    max-width: 760px;
  }

  .kbt-cr-explore__gallery {
    min-height: 480px;

    max-width: 700px;

    width: 100%;

    margin-inline: auto;
  }

  /* ATTRACTIONS */

  .kbt-cr-attractions {
    padding: 70px 0;
  }

  .kbt-cr-attractions__header {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .kbt-cr-attraction-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* SOLUTIONS */

  .kbt-cr-solutions {
    grid-template-columns: 1fr;
  }

  .kbt-cr-solutions__image {
    min-height: 430px;
  }

  .kbt-cr-solutions__content {
    padding: 65px 40px;
  }

  /* WHY */

  .kbt-cr-why__grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .kbt-cr-why__content {
    max-width: 760px;
  }

  .kbt-cr-why__image {
    height: 330px;
  }

  .kbt-cr-benefits {
    grid-column: auto;

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* PRICING */

  .kbt-cr-pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* FAQ */

  .kbt-cr-faq__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE LARGE
========================================================= */

@media (max-width: 767px) {
  .kbt-cr-container {
    width: min(calc(100% - 30px), 620px);
  }

  /* COMMON */

  .kbt-cr-section-title {
    font-size: clamp(38px, 11vw, 52px);

    letter-spacing: -1px;
  }

  /* HERO */

  .kbt-cr-hero__content {
    padding: 60px 0 25px;
  }

  .kbt-cr-eyebrow {
    font-size: 10px;
  }

  .kbt-cr-hero__title {
    margin-top: 15px;

    font-size: clamp(43px, 12vw, 60px);

    letter-spacing: -2px;
  }

  .kbt-cr-hero__subtitle {
    font-size: 13px;

    line-height: 1.5;
  }

  .kbt-cr-hero__features {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    margin: 25px 0;
  }

  .kbt-cr-hero-feature {
    min-height: 70px;

    padding: 10px;

    border-right: 0;

    border: 1px solid rgba(6, 36, 63, 0.13);

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.58);

    font-size: 11px;
  }

  .kbt-cr-hero-feature__icon {
    width: 30px;
    height: 30px;

    margin-bottom: 3px;

    font-size: 18px;
  }

  .kbt-cr-hero__actions {
    width: 100%;

    flex-direction: column;

    align-items: stretch;
  }

  .kbt-cr-btn {
    width: 100%;
  }

  .kbt-cr-hero__car {
    margin-top: 0;
  }

  .kbt-cr-hero__car-image {
    max-height: 280px;
  }

  /* EXPLORE */

  .kbt-cr-explore {
    padding: 60px 0;
  }

  .kbt-cr-explore__grid {
    gap: 35px;
  }

  .kbt-cr-explore__content p {
    font-size: 14px;
  }

  .kbt-cr-explore__gallery {
    min-height: 390px;
  }

  .kbt-cr-polaroid {
    padding: 7px 7px 27px;
  }

  .kbt-cr-polaroid--main {
    width: 68%;
    height: 300px;

    left: 0;
  }

  .kbt-cr-polaroid--top {
    width: 39%;
    height: 180px;

    right: 0;
  }

  .kbt-cr-polaroid--bottom {
    width: 43%;
    height: 180px;

    right: 0;
    bottom: 5px;
  }

  .kbt-cr-polaroid span {
    bottom: 5px;

    font-size: 13px;
  }

  .kbt-cr-gallery-decoration {
    right: -1%;

    top: 42%;

    font-size: 14px;
  }

  /* ATTRACTIONS */

  .kbt-cr-attractions {
    padding: 60px 0;
  }

  .kbt-cr-attractions__header {
    margin-bottom: 28px;
  }

  .kbt-cr-attractions__intro p {
    font-size: 13px;
  }

  .kbt-cr-attraction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
  }

  .kbt-cr-attraction-card__image {
    height: 170px;
  }

  .kbt-cr-attraction-card h3 {
    font-size: 12px;
  }

  /* SOLUTIONS */

  .kbt-cr-solutions__image {
    min-height: 300px;
  }

  .kbt-cr-solutions__content {
    padding: 55px 25px 60px;
  }

  .kbt-cr-solutions__content .kbt-cr-section-title {
    margin-bottom: 30px;
  }

  .kbt-cr-solution-grid {
    grid-template-columns: 1fr;

    gap: 22px;
  }

  .kbt-cr-solution-item {
    grid-template-columns: 45px 1fr;

    gap: 12px;
  }

  .kbt-cr-solution-icon {
    width: 42px;
    height: 42px;

    font-size: 15px;
  }

  .kbt-cr-solution-item h3 {
    font-size: 14px;
  }

  .kbt-cr-solution-item p {
    font-size: 11px;
  }

  /* WHY */

  .kbt-cr-why {
    padding: 60px 0;
  }

  .kbt-cr-why__image {
    height: 250px;

    border-radius: 18px;
  }

  .kbt-cr-benefits {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .kbt-cr-benefit {
    min-height: 85px;

    padding: 14px;
  }

  /* PRICING */

  .kbt-cr-pricing {
    padding: 60px 0;
  }

  .kbt-cr-pricing__grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .kbt-cr-price-card {
    min-height: 125px;

    padding: 20px;
  }

  /* FAQ */

  .kbt-cr-faq {
    padding: 60px 0 70px;
  }

  .kbt-cr-faq-question {
    min-height: 58px;

    padding: 14px 15px;

    font-size: 12px;
  }

  .kbt-cr-faq-answer {
    padding-left: 15px;
    padding-right: 15px;
  }

  .kbt-cr-faq-item.is-open .kbt-cr-faq-answer {
    padding: 0 15px 16px;
  }

  .kbt-cr-faq-answer p {
    font-size: 12px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .kbt-cr-container {
    width: calc(100% - 24px);
  }

  .kbt-cr-section-label {
    font-size: 9px;

    padding: 5px 11px;

    letter-spacing: 1.2px;
  }

  .kbt-cr-section-title {
    font-size: 37px;

    line-height: 1;
  }

  /* HERO */

  .kbt-cr-hero__content {
    padding: 45px 0 20px;
  }

  .kbt-cr-hero__title {
    font-size: 43px;

    line-height: 0.96;
  }

  .kbt-cr-hero__subtitle {
    font-size: 11px;

    letter-spacing: 0.3px;
  }

  .kbt-cr-hero__features {
    gap: 8px;
  }

  .kbt-cr-hero-feature {
    min-height: 67px;

    font-size: 10px;
  }

  .kbt-cr-hero__car-image {
    max-height: 220px;
  }

  /* EXPLORE */

  .kbt-cr-explore__gallery {
    min-height: 300px;
  }

  .kbt-cr-polaroid--main {
    height: 230px;
  }

  .kbt-cr-polaroid--top,
  .kbt-cr-polaroid--bottom {
    height: 145px;
  }

  .kbt-cr-polaroid span {
    font-size: 10px;
  }

  /* ATTRACTIONS */

  .kbt-cr-attraction-grid {
    grid-template-columns: 1fr 1fr;

    gap: 8px;
  }

  .kbt-cr-attraction-card {
    border-radius: 10px;
  }

  .kbt-cr-attraction-card__image {
    height: 130px;
  }

  .kbt-cr-attraction-card h3 {
    margin-top: 8px;

    font-size: 10px;
  }

  /* SOLUTIONS */

  .kbt-cr-solutions__image {
    min-height: 240px;
  }

  .kbt-cr-solutions__content {
    padding: 45px 18px 50px;
  }

  .kbt-cr-solution-item {
    grid-template-columns: 38px 1fr;
  }

  .kbt-cr-solution-icon {
    width: 38px;
    height: 38px;

    font-size: 13px;
  }

  .kbt-cr-solution-item h3 {
    font-size: 12px;
  }

  .kbt-cr-solution-item p {
    font-size: 10px;
  }

  /* WHY */

  .kbt-cr-benefit {
    border-radius: 12px;
  }

  .kbt-cr-benefit__icon {
    width: 40px;
    height: 40px;

    font-size: 14px;
  }

  /* FAQ */

  .kbt-cr-faq-question {
    gap: 10px;

    font-size: 11px;
  }

  .kbt-cr-faq-question i {
    width: 22px;
    height: 22px;

    font-size: 8px;
  }
}

/* =========================================================
   TOUCH DEVICE
========================================================= */

@media (hover: none) {
  .kbt-cr-polaroid:hover {
    transform: none;
    box-shadow: 0 22px 55px rgba(4, 28, 48, 0.15);
  }

  .kbt-cr-attraction-card:hover {
    transform: none;
  }

  .kbt-cr-price-card:hover {
    transform: none;
  }

  .kbt-cr-benefit:hover {
    transform: none;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .kbt-car-rental-page *,
  .kbt-car-rental-page *::before,
  .kbt-car-rental-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   SAFETY - PREVENT HORIZONTAL OVERFLOW
========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.kbt-car-rental-page {
  max-width: 100%;
  overflow-x: clip;
}
/* =========================================================
   GLOBAL HEADING SIZE - 32px to 36px
========================================================= */

.kbt-car-rental-page h1,
.kbt-car-rental-page h2 {
  font-size: 36px !important;
}

/* HERO H1 */

.kbt-cr-hero__title {
  font-size: 36px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.8px !important;
}

/* HERO SUBTITLE */

.kbt-cr-hero__subtitle {
  font-size: 32px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

/* ALL SECTION H2 */

.kbt-cr-section-title {
  font-size: 36px !important;
  line-height: 1.15 !important;
}

/* H3 */

.kbt-car-rental-page h3 {
  font-size: 20px !important;
  line-height: 1.3 !important;
}

/* MOBILE */

@media (max-width: 767px) {
  .kbt-cr-hero__title {
    font-size: 32px !important;
  }

  .kbt-cr-hero__subtitle {
    font-size: 24px !important;
  }

  .kbt-cr-section-title {
    font-size: 32px !important;
  }

  .kbt-car-rental-page h3 {
    font-size: 18px !important;
  }
}
.kbt-cr-section-label {
  display: inline-block;
  margin-bottom: 15px !important;
}

.kbt-cr-section-title {
  margin-top: 0 !important;
  line-height: 1.15;
}
/* =========================================================
   COMPLETE KODAI CAR RENTAL SOLUTIONS
   FINAL IMAGE FIX
   FULL SECTION FIT - NO CROP - NO EMPTY SPACE
========================================================= */

.kbt-cr-solutions {
  position: relative !important;

  display: grid !important;

  grid-template-columns: 48% 52% !important;

  width: 100% !important;

  min-height: 0 !important;
  height: auto !important;

  align-items: stretch !important;

  overflow: hidden !important;

  background: var(--kbt-blog-navy-dark) !important;
}

/* =========================================================
   IMAGE COLUMN
========================================================= */

.kbt-cr-solutions__image {
  position: relative !important;

  width: 100% !important;
  height: auto !important;

  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  align-self: stretch !important;

  background: transparent !important;
}

/* REMOVE ANY OLD OVERLAY */
.kbt-cr-solutions__image::after {
  pointer-events: none !important;
}

/* =========================================================
   ACTUAL IMAGE
========================================================= */

.kbt-cr-solutions__image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: fill !important;

  object-position: center center !important;
}

/* =========================================================
   CONTENT COLUMN
========================================================= */

.kbt-cr-solutions__content {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;

  height: auto !important;

  min-height: 0 !important;

  z-index: 2 !important;
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {
  .kbt-cr-solutions {
    grid-template-columns: 48% 52% !important;

    min-height: 610px !important;
  }

  .kbt-cr-solutions__image {
    height: 100% !important;
    min-height: 610px !important;
  }

  .kbt-cr-solutions__image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: fill !important;
  }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {
  .kbt-cr-solutions {
    grid-template-columns: 46% 54% !important;

    min-height: 580px !important;
  }

  .kbt-cr-solutions__image {
    height: 100% !important;
    min-height: 580px !important;
  }

  .kbt-cr-solutions__image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: fill !important;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {
  .kbt-cr-solutions {
    grid-template-columns: 42% 58% !important;

    min-height: 560px !important;
  }

  .kbt-cr-solutions__image {
    width: 100% !important;
    height: 100% !important;

    min-height: 560px !important;
  }

  .kbt-cr-solutions__image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: fill !important;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .kbt-cr-solutions {
    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    min-height: 0 !important;

    height: auto !important;

    overflow: hidden !important;
  }

  .kbt-cr-solutions__image {
    position: relative !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    overflow: hidden !important;
  }

  .kbt-cr-solutions__image img {
    position: static !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;

    min-width: 100% !important;

    min-height: 0 !important;

    max-width: 100% !important;

    max-height: none !important;

    object-fit: contain !important;

    object-position: center !important;
  }

  .kbt-cr-solutions__content {
    width: 100% !important;

    min-height: 0 !important;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .kbt-cr-solutions__image {
    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;
  }

  .kbt-cr-solutions__image img {
    width: 100% !important;

    height: auto !important;

    object-fit: contain !important;
  }
}

/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 360px) {
  .kbt-cr-solutions__image {
    width: 100% !important;

    height: auto !important;
  }

  .kbt-cr-solutions__image img {
    width: 100% !important;

    height: auto !important;
  }
} /* =========================================================
   HERO BUTTON ICON SIZE + HOVER
========================================================= */

/* BOTH ICONS - SAME SIZE */
.kbt-cr-hero__actions .kbt-cr-btn i {
  width: 18px !important;
  height: 18px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  font-size: 17px !important;
  line-height: 1 !important;

  margin: 0 !important;
  flex-shrink: 0;
}

/* =========================================================
   CALL ICON
   NORMAL = WHITE
========================================================= */

.kbt-cr-hero__actions .kbt-cr-btn--dark i {
  color: #ffffff !important;
}

/* CALL HOVER = WHITE
   BUTTON CHANGES TO GREEN
========================================================= */

.kbt-cr-hero__actions .kbt-cr-btn--dark:hover {
  background: #128c7e !important;
  border-color: #128c7e !important;
  color: #ffffff !important;
}

.kbt-cr-hero__actions .kbt-cr-btn--dark:hover i {
  color: #ffffff !important;
}

/* =========================================================
   WHATSAPP ICON
   NORMAL = WHATSAPP DARK GREEN
========================================================= */

.kbt-cr-hero__actions .kbt-cr-btn--light i {
  color: #075e54 !important;

  font-size: 18px !important;
}

/* WHATSAPP HOVER
   BUTTON = WHATSAPP GREEN
   ICON = WHITE
========================================================= */

.kbt-cr-hero__actions .kbt-cr-btn--light:hover {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #ffffff !important;
}

.kbt-cr-hero__actions .kbt-cr-btn--light:hover i {
  color: #ffffff !important;
}

/* =========================================================
   BUTTON HOVER LIFT
========================================================= */

.kbt-cr-hero__actions .kbt-cr-btn:hover {
  transform: translateY(-3px);
}
.kbt-cr-eyebrow {
  margin-bottom: 18px !important;
}

.kbt-cr-hero__title {
  margin-top: 0 !important;
}
/* =========================================================
   KODAI BOOK MY TAXI
   PREMIUM FLOATING CONTACT ACTIONS
========================================================= */

.kbt-floating-contact {
  position: fixed !important;

  right: 28px !important;
  bottom: 100px !important;

  z-index: 99999 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;

  gap: 14px !important;

  pointer-events: none;
}

/* =========================================================
   FLOATING ACTION
========================================================= */

.kbt-floating-btn {
  position: relative;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  flex: 0 0 58px;

  border-radius: 999px;

  text-decoration: none !important;

  pointer-events: auto;

  overflow: visible;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.1);

  transition:
    width 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* =========================================================
   ICON CIRCLE
========================================================= */

.kbt-floating-btn i {
  position: relative;

  z-index: 3;

  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 26px;
  line-height: 1;

  box-sizing: border-box;

  transition:
    transform 0.35s ease,
    font-size 0.35s ease;
}

/* =========================================================
   LABEL
========================================================= */

.kbt-floating-tooltip {
  position: absolute;

  left: 18px;
  right: auto;

  top: 50%;

  transform: translateY(-50%) translateX(10px);

  white-space: nowrap;

  padding: 10px 16px;

  border-radius: 999px;

  background: #ffffff;

  color: #10233f;

  font-family: "Montserrat", Arial, sans-serif;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.08em;

  line-height: 1;

  text-transform: uppercase;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  z-index: 1;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
}

/* =========================================================
   WHATSAPP
========================================================= */

.kbt-floating-whatsapp {
  background: #25d366;

  color: #ffffff !important;
}

.kbt-floating-whatsapp i {
  background: linear-gradient(145deg, #25d366, #128c7e);

  color: #ffffff !important;
}

/* =========================================================
   PHONE
========================================================= */

.kbt-floating-call {
  background: #d5a84a;

  color: #ffffff !important;
}

.kbt-floating-call i {
  background: linear-gradient(145deg, #d5a84a, #9b6d1f);

  color: #ffffff !important;
}

/* =========================================================
   HOVER EXPANSION
========================================================= */

.kbt-floating-btn:hover {
  width: 220px;

  transform: translateY(-4px);

  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   SHOW LABEL
========================================================= */

.kbt-floating-btn:hover .kbt-floating-tooltip {
  opacity: 1;

  visibility: visible;

  transform: translateY(-50%) translateX(0);
}

/* =========================================================
   ICON HOVER
========================================================= */

.kbt-floating-btn:hover i {
  transform: rotate(5deg) scale(1.04);
}

/* =========================================================
   PULSE RING
========================================================= */

.kbt-floating-whatsapp::before,
.kbt-floating-call::before {
  content: "";

  position: absolute;

  inset: -5px;

  border-radius: 50%;

  opacity: 0;

  pointer-events: none;

  z-index: -1;
}

/* =========================================================
   WHATSAPP PULSE
========================================================= */

.kbt-floating-whatsapp::before {
  border: 1px solid rgba(37, 211, 102, 0.55);

  animation: kbtWhatsappPulse 2.4s infinite;
}

/* =========================================================
   PHONE PULSE
========================================================= */

.kbt-floating-call::before {
  border: 1px solid rgba(213, 168, 74, 0.55);

  animation: kbtPhonePulse 2.8s infinite;
}

/* =========================================================
   WHATSAPP ANIMATION
========================================================= */

@keyframes kbtWhatsappPulse {
  0% {
    transform: scale(0.95);

    opacity: 0.8;
  }

  70% {
    transform: scale(1.35);

    opacity: 0;
  }

  100% {
    transform: scale(1.35);

    opacity: 0;
  }
}

/* =========================================================
   PHONE ANIMATION
========================================================= */

@keyframes kbtPhonePulse {
  0% {
    transform: scale(0.95);

    opacity: 0.8;
  }

  70% {
    transform: scale(1.35);

    opacity: 0;
  }

  100% {
    transform: scale(1.35);

    opacity: 0;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .kbt-floating-contact {
    right: 16px !important;

    bottom: 60px !important;

    gap: 10px !important;
  }

  .kbt-floating-btn {
    width: 52px;

    height: 52px;

    flex-basis: 52px;
  }

  .kbt-floating-btn i {
    width: 52px;

    height: 52px;

    flex-basis: 52px;

    font-size: 23px;
  }

  .kbt-floating-tooltip {
    display: none;
  }

  .kbt-floating-btn:hover {
    width: 52px;

    transform: translateY(-3px);
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .kbt-floating-contact {
    right: 12px !important;

    bottom: 14px !important;

    gap: 9px !important;
  }

  .kbt-floating-btn {
    width: 49px;

    height: 49px;

    flex-basis: 49px;
  }

  .kbt-floating-btn i {
    width: 49px;

    height: 49px;

    flex-basis: 49px;

    font-size: 21px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .kbt-floating-btn,
  .kbt-floating-btn i,
  .kbt-floating-tooltip {
    transition: none;
  }

  .kbt-floating-whatsapp::before,
  .kbt-floating-call::before {
    animation: none;
  }
}
/* =========================================================
   KODAI BOOK MY TAXI
   KODAIKANAL CAB SERVICE PAGE
   PREMIUM RESPONSIVE DESIGN
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
  --kbt-navy: #0b2342;
  --kbt-navy-dark: #06182f;
  --kbt-navy-soft: #153a65;

  --kbt-gold: #d59a2a;
  --kbt-gold-dark: #b97812;
  --kbt-gold-light: #e8b64f;
  --kbt-gold-soft: #f6e8c8;

  --kbt-white: #ffffff;
  --kbt-cream: #fbf8f1;
  --kbt-soft: #f5f7fa;

  --kbt-text: #182334;
  --kbt-text-soft: #566274;
  --kbt-muted: #7a8493;

  --kbt-border: rgba(11, 35, 66, 0.1);

  --kbt-shadow-sm: 0 8px 25px rgba(11, 35, 66, 0.07);

  --kbt-shadow: 0 18px 50px rgba(11, 35, 66, 0.11);

  --kbt-shadow-lg: 0 28px 75px rgba(11, 35, 66, 0.16);

  --kbt-radius-sm: 12px;
  --kbt-radius: 18px;
  --kbt-radius-lg: 26px;

  --kbt-container: 1440px;

  --kbt-section-space: clamp(50px, 5vw, 75px);

  --kbt-heading: Georgia, "Times New Roman", serif;

  --kbt-body: "Montserrat", Arial, sans-serif;

  --kbt-transition: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   RESET
========================================================= */

.kbt-cab-page,
.kbt-cab-page *,
.kbt-cab-page *::before,
.kbt-cab-page *::after {
  box-sizing: border-box;
}

.kbt-cab-page {
  width: 100%;
  overflow: hidden;
  background: var(--kbt-cream);
  color: var(--kbt-text);
  font-family: var(--kbt-body);
  line-height: 1.6;
}

.kbt-cab-page img {
  display: block;
  max-width: 100%;
}

.kbt-cab-page a {
  text-decoration: none;
}

.kbt-cab-page button {
  font-family: inherit;
}

.kbt-cab-page h1,
.kbt-cab-page h2,
.kbt-cab-page h3,
.kbt-cab-page h4 {
  margin: 0;
  font-family: var(--kbt-heading);
  color: var(--kbt-navy);
}

.kbt-cab-page p {
  margin-top: 0;
}

.kbt-container {
  width: min(100% - 40px, var(--kbt-container));
  margin-inline: auto;
}

/* =========================================================
   HERO
========================================================= */

.kbt-cab-hero {
  position: relative;
  min-height: 610px;
  isolation: isolate;
  overflow: hidden;
  background: var(--kbt-navy);
  display: flex;
  align-items: center;
}

.kbt-cab-hero__background {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.kbt-cab-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.kbt-cab-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(251, 248, 241, 0.98) 0%,
    rgba(251, 248, 241, 0.94) 25%,
    rgba(251, 248, 241, 0.7) 43%,
    rgba(11, 35, 66, 0.1) 65%,
    rgba(11, 35, 66, 0.02) 100%
  );
}

.kbt-cab-hero__content {
  position: relative;
  width: min(650px, 56%);
  padding: 80px 0 105px;
  z-index: 5;
}

.kbt-cab-hero__eyebrow {
  color: var(--kbt-navy);
  font-family: var(--kbt-heading);
  font-size: clamp(44px, 5vw, 70px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -2px;
  margin-bottom: 0;
}

.kbt-cab-hero__title {
  color: var(--kbt-gold-dark) !important;
  font-family: var(--kbt-heading);
  font-size: clamp(44px, 5vw, 70px) !important;
  font-weight: 700;
  line-height: 0.95 !important;
  letter-spacing: -2px;
  margin-bottom: 12px !important;
}

.kbt-cab-hero__subheading {
  color: var(--kbt-navy);
  font-family: var(--kbt-heading);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}

.kbt-cab-hero__subheading span {
  color: var(--kbt-gold);
  padding: 0 5px;
}

.kbt-cab-hero__description {
  max-width: 580px;
  color: var(--kbt-text);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 25px;
}

.kbt-cab-hero__features {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
}

.kbt-cab-hero__feature {
  min-width: 105px;
  padding: 0 18px;
  border-right: 1px solid rgba(11, 35, 66, 0.25);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  text-align: center;
  color: var(--kbt-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.kbt-cab-hero__feature:first-child {
  padding-left: 0;
}

.kbt-cab-hero__feature:last-child {
  border-right: 0;
}

.kbt-cab-hero__feature-icon {
  width: 53px;
  height: 53px;
  margin-bottom: 7px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  border: 2px solid var(--kbt-gold);

  background: linear-gradient(145deg, var(--kbt-navy), var(--kbt-navy-soft));

  color: var(--kbt-white);
  font-size: 21px;

  box-shadow: 0 6px 18px rgba(11, 35, 66, 0.2);
}

.kbt-cab-hero__car {
  position: absolute;
  right: 2%;
  bottom: 35px;
  width: min(600px, 47%);
  z-index: 4;
  pointer-events: none;
}

.kbt-cab-hero__car img {
  width: 100%;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.28));
  transform: translateY(0);
  animation: kbtHeroCar 5s ease-in-out infinite;
}

@keyframes kbtHeroCar {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

/* =========================================================
   COMMON SECTION TITLES
========================================================= */

.kbt-section-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--kbt-gold-dark);
  font-family: var(--kbt-heading);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.kbt-section-kicker::before,
.kbt-section-kicker::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--kbt-gold);
}

.kbt-section-title {
  position: relative;
  font-size: clamp(30px, 3vw, 36px) !important;
  line-height: 1.12 !important;
  font-weight: 700;
  letter-spacing: -0.6px;
}

.kbt-section-title span {
  display: block;
  color: var(--kbt-navy);
}

.kbt-section-description {
  color: var(--kbt-text-soft);
  font-size: 14px;
  line-height: 1.7;
}

.kbt-section-heading {
  text-align: center;
  margin-bottom: 28px;
}

.kbt-section-heading--left {
  text-align: left;
  margin-bottom: 14px;
}

.kbt-section-heading__icon {
  display: inline-flex;
  width: 45px;
  height: 45px;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;

  color: var(--kbt-gold-dark);
  font-size: 28px;
}

/* =========================================================
   ABOUT
========================================================= */

.kbt-cab-about {
  position: relative;
  padding: 70px 0 80px;
  background:
    radial-gradient(
      circle at 8% 30%,
      rgba(213, 154, 42, 0.08),
      transparent 28%
    ),
    var(--kbt-cream);
}

.kbt-cab-about__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.kbt-cab-about__content {
  padding: 10px 0;
}

.kbt-cab-about__content > p {
  color: var(--kbt-text-soft);
  font-size: 14px;
  line-height: 1.8;
  margin: 22px 0 18px;
}

.kbt-cab-about__highlight {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;

  padding: 15px 20px;
  margin-top: 24px;

  color: var(--kbt-white);
  background: var(--kbt-navy);

  border-radius: 0 14px 14px 0;
  box-shadow: var(--kbt-shadow-sm);
}

.kbt-cab-about__highlight::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--kbt-gold);
}

.kbt-cab-about__highlight-icon {
  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: rgba(213, 154, 42, 0.16);
  color: var(--kbt-gold-light);
  font-size: 22px;
}

.kbt-cab-about__highlight p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  line-height: 1.55;
}

.kbt-cab-about__visual {
  position: relative;
  min-height: 440px;
}

.kbt-cab-about__main-image {
  position: absolute;
  inset: 0 7% 0 4%;
  overflow: hidden;

  border-radius: 28px 8px 28px 8px;
  box-shadow: var(--kbt-shadow-lg);
}

.kbt-cab-about__main-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 24, 47, 0.2));
}

.kbt-cab-about__main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--kbt-transition);
}

.kbt-cab-about__visual:hover .kbt-cab-about__main-image img {
  transform: scale(1.04);
}

.kbt-cab-about__photo {
  position: absolute;
  width: 170px;
  height: 125px;
  padding: 7px;

  background: var(--kbt-white);
  box-shadow: 0 15px 35px rgba(11, 35, 66, 0.18);

  z-index: 3;
}

.kbt-cab-about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kbt-cab-about__photo--one {
  right: -10px;
  top: 28px;
  transform: rotate(5deg);
}

.kbt-cab-about__photo--two {
  right: 35px;
  bottom: 22px;
  transform: rotate(-5deg);
}

/* =========================================================
   EXPLORE
========================================================= */

.kbt-cab-explore {
  padding: 45px 0 55px;
  background: var(--kbt-white);
  border-top: 1px solid rgba(11, 35, 66, 0.04);
  border-bottom: 1px solid rgba(11, 35, 66, 0.04);
}

.kbt-cab-attraction-slider {
  position: relative;
}

.kbt-cab-attraction-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 126px;
  gap: 10px;

  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;

  padding: 4px 45px 12px;
}

.kbt-cab-attraction-track::-webkit-scrollbar {
  display: none;
}

.kbt-cab-attraction-card {
  cursor: pointer;
  text-align: center;
}

.kbt-cab-attraction-card__image {
  position: relative;
  height: 92px;
  overflow: hidden;

  border-radius: 13px;
  border: 3px solid var(--kbt-white);

  box-shadow: var(--kbt-shadow-sm);
}

.kbt-cab-attraction-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 35, 66, 0.22));
}

.kbt-cab-attraction-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--kbt-transition);
}

.kbt-cab-attraction-card:hover .kbt-cab-attraction-card__image img {
  transform: scale(1.09);
}

.kbt-cab-attraction-card__name {
  padding-top: 8px;
  color: var(--kbt-navy);
  font-family: var(--kbt-heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.kbt-slider-arrow {
  position: absolute;
  top: 42px;
  z-index: 4;

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  background: var(--kbt-navy);
  color: var(--kbt-white);

  box-shadow: var(--kbt-shadow-sm);
  cursor: pointer;

  transition:
    transform 0.3s var(--kbt-transition),
    background 0.3s ease;
}

.kbt-slider-arrow:hover {
  background: var(--kbt-gold-dark);
  transform: translateY(-2px);
}

.kbt-slider-arrow--prev {
  left: 0;
}

.kbt-slider-arrow--next {
  right: 0;
}

/* =========================================================
   TRUSTED TAXI
========================================================= */

.kbt-cab-trusted {
  position: relative;
  padding: 65px 0;
  background: linear-gradient(
    90deg,
    var(--kbt-cream) 0%,
    var(--kbt-cream) 55%,
    rgba(245, 247, 250, 0.85) 100%
  );
}

.kbt-cab-trusted__grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 45px;
  align-items: center;
}

.kbt-cab-trusted__content {
  position: relative;
  z-index: 2;
}

.kbt-cab-trusted__content .kbt-section-title {
  padding-right: 20px;
}

.kbt-cab-trusted__content .kbt-section-title::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 3px;
  margin-left: 12px;
  vertical-align: middle;
  background: var(--kbt-gold);
}

.kbt-cab-travel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 22px;
}

.kbt-cab-travel-card {
  min-height: 85px;
  padding: 11px 7px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--kbt-border);
  border-radius: 10px;

  box-shadow: 0 5px 20px rgba(11, 35, 66, 0.05);

  transition:
    transform 0.3s var(--kbt-transition),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.kbt-cab-travel-card:hover {
  transform: translateY(-5px);
  border-color: rgba(213, 154, 42, 0.35);
  box-shadow: var(--kbt-shadow-sm);
}

.kbt-cab-travel-card__icon {
  color: var(--kbt-navy);
  font-size: 21px;
  margin-bottom: 5px;
}

.kbt-cab-travel-card__title,
.kbt-cab-travel-card__subtitle {
  display: block;
  color: var(--kbt-navy);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
}

.kbt-cab-travel-card__subtitle {
  color: var(--kbt-text-soft);
}

.kbt-cab-trusted__bottom {
  margin: 18px 0 0;
  color: var(--kbt-text-soft);
  font-size: 12px;
}

.kbt-cab-trusted__visual {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border-radius: 25px;
}

.kbt-cab-trusted__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(251, 248, 241, 0.18),
    transparent 45%
  );
}

.kbt-cab-trusted__visual img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  transition: transform 0.8s var(--kbt-transition);
}

.kbt-cab-trusted__visual:hover img {
  transform: scale(1.04);
}

/* =========================================================
   SIGHTSEEING
========================================================= */

.kbt-cab-sightseeing {
  padding: 65px 0;
  background:
    radial-gradient(
      circle at 92% 15%,
      rgba(213, 154, 42, 0.09),
      transparent 25%
    ),
    var(--kbt-cream);
}

.kbt-cab-sightseeing__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 55px;
  align-items: center;
}

.kbt-cab-sightseeing__content > p {
  color: var(--kbt-text-soft);
  font-size: 14px;
  line-height: 1.75;
  margin: 20px 0;
}

.kbt-cab-sightseeing__label {
  display: inline-flex;
  padding: 7px 14px;

  border-radius: 30px;
  background: var(--kbt-navy);
  color: var(--kbt-white);

  font-size: 11px;
  font-weight: 700;

  margin-bottom: 12px;
}

.kbt-cab-sightseeing__places {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 30px;
}

.kbt-cab-sightseeing__place {
  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--kbt-text);
  font-size: 12px;
  line-height: 1.35;
}

.kbt-cab-sightseeing__place span {
  width: 18px;
  height: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 18px;

  border-radius: 50%;
  background: var(--kbt-gold);
  color: var(--kbt-white);

  font-size: 9px;
}

.kbt-cab-sightseeing__note {
  font-size: 11px !important;
  margin-top: 20px !important;
}

.kbt-cab-sightseeing__visual {
  position: relative;
  min-height: 390px;
}

.kbt-cab-photo-card {
  position: absolute;
  width: 47%;
  height: 190px;

  padding: 8px;

  background: var(--kbt-white);
  box-shadow: var(--kbt-shadow);

  transition:
    transform 0.45s var(--kbt-transition),
    box-shadow 0.45s ease;

  z-index: 2;
}

.kbt-cab-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kbt-cab-photo-card--one {
  top: 0;
  left: 3%;
  transform: rotate(-5deg);
}

.kbt-cab-photo-card--two {
  top: 25px;
  right: 2%;
  transform: rotate(5deg);
}

.kbt-cab-photo-card--three {
  bottom: 0;
  left: 12%;
  transform: rotate(5deg);
}

.kbt-cab-photo-card--four {
  bottom: 18px;
  right: 4%;
  transform: rotate(-6deg);
}

.kbt-cab-photo-card:hover {
  z-index: 8;
  transform: rotate(0) scale(1.05);
  box-shadow: var(--kbt-shadow-lg);
}

/* =========================================================
   AIRPORT + OUTSTATION SERVICES
========================================================= */

.kbt-cab-services {
  padding: 0 0 65px;
  background: var(--kbt-cream);
}

.kbt-cab-services__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
}

.kbt-cab-service-card {
  position: relative;
  overflow: hidden;

  padding: 28px;

  border-radius: 18px;

  box-shadow: var(--kbt-shadow);

  transition:
    transform 0.35s var(--kbt-transition),
    box-shadow 0.35s ease;
}

.kbt-cab-service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--kbt-shadow-lg);
}

.kbt-cab-service-card--airport {
  background: linear-gradient(135deg, var(--kbt-navy-dark), var(--kbt-navy));
  color: var(--kbt-white);
}

.kbt-cab-service-card--outstation {
  background: linear-gradient(135deg, #fffaf0, #f5ead5);
}

.kbt-cab-service-card__header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.kbt-cab-service-card__icon {
  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 46px;

  border-radius: 50%;

  background: rgba(213, 154, 42, 0.16);
  color: var(--kbt-gold-light);

  font-size: 23px;
}

.kbt-cab-service-card--outstation .kbt-cab-service-card__icon {
  color: var(--kbt-gold-dark);
  background: rgba(213, 154, 42, 0.14);
}

.kbt-cab-service-card h2 {
  color: var(--kbt-white);
  font-size: 27px !important;
  line-height: 1.15;
}

.kbt-cab-service-card--outstation h2 {
  color: var(--kbt-navy);
}

.kbt-cab-service-card p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1.55;
  margin: 10px 0;
}

.kbt-cab-service-card--outstation p {
  color: var(--kbt-text-soft);
}

.kbt-cab-airport-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.kbt-cab-airport-item {
  text-align: center;
}

.kbt-cab-airport-item__image {
  width: 100%;
  height: 70px;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.kbt-cab-airport-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.kbt-cab-airport-item:hover img {
  transform: scale(1.08);
}

.kbt-cab-airport-item span {
  display: block;
  margin-top: 5px;
  color: var(--kbt-white);
  font-size: 9px;
  font-weight: 600;
}

.kbt-cab-service-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: 17px;

  color: rgba(255, 255, 255, 0.88);
  font-size: 10px;
}

.kbt-cab-service-card__footer i {
  color: var(--kbt-gold-light);
}

.kbt-cab-outstation-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.kbt-cab-outstation-item {
  text-align: center;
}

.kbt-cab-outstation-item__image {
  width: 100%;
  height: 73px;

  overflow: hidden;

  border-radius: 50%;
  border: 3px solid var(--kbt-white);

  box-shadow: 0 5px 15px rgba(11, 35, 66, 0.12);
}

.kbt-cab-outstation-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform 0.4s ease;
}

.kbt-cab-outstation-item:hover img {
  transform: scale(1.1);
}

.kbt-cab-outstation-item span {
  display: block;
  margin-top: 5px;
  color: var(--kbt-navy);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
}

/* =========================================================
   BOTTOM THREE CARDS
========================================================= */

.kbt-cab-bottom-grid {
  padding: 0 0 65px;
  background: var(--kbt-cream);
}

.kbt-cab-bottom-grid__wrapper {
  display: grid;
  grid-template-columns: 1.05fr 0.85fr 1fr;
  gap: 12px;
}

.kbt-cab-bottom-card {
  position: relative;
  min-height: 305px;
  overflow: hidden;

  padding: 24px;

  border-radius: 17px;
  background: var(--kbt-white);

  border: 1px solid rgba(11, 35, 66, 0.07);

  box-shadow: var(--kbt-shadow-sm);

  transition:
    transform 0.35s var(--kbt-transition),
    box-shadow 0.35s ease;
}

.kbt-cab-bottom-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--kbt-shadow);
}

.kbt-cab-bottom-card__heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.kbt-cab-bottom-card__heading > span {
  width: 43px;
  height: 43px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 43px;

  border-radius: 50%;

  color: var(--kbt-navy);
  background: var(--kbt-gold-soft);

  font-size: 22px;
}

.kbt-cab-bottom-card h2 {
  font-size: 26px !important;
  line-height: 1.1;
}

.kbt-cab-bottom-card p {
  color: var(--kbt-text-soft);
  font-size: 11px;
  line-height: 1.55;
  margin-bottom: 12px;
}

/* WHY */

.kbt-cab-bottom-card--why {
  background: linear-gradient(145deg, #ffffff, #f8f5eb);
}

.kbt-cab-advantages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.kbt-cab-advantage {
  min-height: 72px;
  padding: 7px 4px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(11, 35, 66, 0.06);
  border-radius: 8px;
}

.kbt-cab-advantage__icon {
  color: var(--kbt-navy);
  font-size: 16px;
  margin-bottom: 3px;
}

.kbt-cab-advantage__title,
.kbt-cab-advantage__subtitle {
  display: block;
  color: var(--kbt-navy);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
}

.kbt-cab-advantage__subtitle {
  color: var(--kbt-text-soft);
}

/* PRICING */

.kbt-cab-bottom-card--pricing {
  background: linear-gradient(145deg, #fffdf7, #f5ead4);
}

.kbt-cab-pricing-list {
  display: grid;
  gap: 7px;
}

.kbt-cab-pricing-item {
  display: flex;
  align-items: center;
  gap: 7px;

  color: var(--kbt-text);
  font-size: 11px;
  font-weight: 600;
}

.kbt-cab-pricing-item i {
  color: var(--kbt-gold-dark);
}

.kbt-cab-pricing-car {
  position: absolute;
  right: 4px;
  bottom: -2px;
  width: 58%;
}

.kbt-cab-pricing-car img {
  width: 100%;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.18));
}

/* EXPLORE */

.kbt-cab-bottom-card--explore {
  min-height: 305px;
  background-image: url("../images/booking-road.webp");
  background-size: cover;
  background-position: center;
}

.kbt-cab-bottom-card__overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(11, 35, 66, 0.08) 0%,
    rgba(6, 24, 47, 0.9) 100%
  );
}

.kbt-cab-bottom-card__content {
  position: relative;
  z-index: 2;
}

.kbt-cab-bottom-card--explore .kbt-cab-bottom-card__heading h2 {
  color: var(--kbt-white);
}

.kbt-cab-bottom-card--explore .kbt-cab-bottom-card__heading > span {
  color: var(--kbt-gold-light);
  background: rgba(255, 255, 255, 0.12);
}

.kbt-cab-bottom-card--explore p {
  max-width: 450px;
  color: rgba(255, 255, 255, 0.9);
}

/* =========================================================
   FLOATING CONTACT
========================================================= */

.kbt-floating-contact {
  position: fixed !important;

  right: 28px;
  bottom: 100px;

  z-index: 99999;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 14px;

  pointer-events: none;
}

.kbt-floating-btn {
  position: relative;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;

  justify-content: flex-start;

  border-radius: 999px;

  overflow: visible;

  color: var(--kbt-white) !important;

  pointer-events: auto;

  box-shadow: 0 12px 30px rgba(11, 35, 66, 0.22);

  transition:
    width 0.45s var(--kbt-transition),
    transform 0.35s var(--kbt-transition),
    box-shadow 0.35s ease;
}

.kbt-floating-btn > i {
  position: relative;
  z-index: 3;

  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 25px;

  transition: transform 0.4s var(--kbt-transition);
}

.kbt-floating-tooltip {
  position: absolute;

  right: 58px;

  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  transform: translateX(12px);

  padding: 9px 15px;

  border-radius: 30px;

  background: var(--kbt-white);
  color: var(--kbt-navy);

  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;

  box-shadow: 0 8px 25px rgba(11, 35, 66, 0.12);

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.35s var(--kbt-transition);
}

.kbt-floating-btn:hover {
  width: 205px;
  transform: translateY(-4px);

  box-shadow: 0 18px 42px rgba(11, 35, 66, 0.28);
}

.kbt-floating-btn:hover .kbt-floating-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.kbt-floating-btn:hover > i {
  transform: rotate(-8deg) scale(1.08);
}

.kbt-floating-whatsapp {
  background: #25d366;
}

.kbt-floating-whatsapp > i {
  background: linear-gradient(145deg, #25d366, #128c7e);
}

.kbt-floating-call {
  background: var(--kbt-gold);
}

.kbt-floating-call > i {
  background: linear-gradient(145deg, var(--kbt-gold), #9b6d1f);
}

/* floating pulse */

.kbt-floating-btn::before {
  content: "";

  position: absolute;
  inset: -5px;

  border-radius: 50%;

  border: 2px solid currentColor;

  opacity: 0.25;

  animation: kbtFloatingPulse 2.5s ease-out infinite;

  pointer-events: none;
}

.kbt-floating-call::before {
  animation-delay: 0.8s;
}

@keyframes kbtFloatingPulse {
  0% {
    transform: scale(0.85);
    opacity: 0.35;
  }

  70% {
    transform: scale(1.25);
    opacity: 0;
  }

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

/* =========================================================
   SCROLL REVEAL
========================================================= */

.kbt-cab-page .kbt-reveal {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.7s ease,
    transform 0.7s var(--kbt-transition);
}

.kbt-cab-page .kbt-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {
  .kbt-container {
    width: min(100% - 32px, 1120px);
  }

  .kbt-cab-hero {
    min-height: 560px;
  }

  .kbt-cab-hero__content {
    width: 56%;
  }

  .kbt-cab-hero__car {
    width: 50%;
    right: -1%;
  }

  .kbt-cab-about__grid {
    gap: 45px;
  }

  .kbt-cab-about__visual {
    min-height: 390px;
  }

  .kbt-cab-travel-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .kbt-cab-bottom-grid__wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .kbt-cab-bottom-card--explore {
    grid-column: span 2;
  }
}

/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 991px) {
  .kbt-container {
    width: min(100% - 30px, 900px);
  }

  .kbt-cab-hero {
    min-height: 680px;
    align-items: flex-start;
  }

  .kbt-cab-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(251, 248, 241, 0.98) 0%,
      rgba(251, 248, 241, 0.92) 43%,
      rgba(251, 248, 241, 0.3) 70%,
      rgba(11, 35, 66, 0.05) 100%
    );
  }

  .kbt-cab-hero__content {
    width: 100%;
    max-width: 700px;
    padding: 60px 0 0;
  }

  .kbt-cab-hero__car {
    width: min(540px, 70%);
    right: 50%;
    transform: translateX(50%);
    bottom: 15px;
  }

  .kbt-cab-about {
    padding: 60px 0;
  }

  .kbt-cab-about__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .kbt-cab-about__visual {
    min-height: 440px;
  }

  .kbt-cab-trusted__grid {
    grid-template-columns: 1fr;
  }

  .kbt-cab-trusted__visual {
    min-height: 360px;
  }

  .kbt-cab-sightseeing__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .kbt-cab-sightseeing__visual {
    min-height: 420px;
  }

  .kbt-cab-services__grid {
    grid-template-columns: 1fr;
  }

  .kbt-cab-bottom-grid__wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .kbt-cab-bottom-card--explore {
    grid-column: span 2;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .kbt-container {
    width: min(100% - 24px, 680px);
  }

  .kbt-cab-hero {
    min-height: 650px;
  }

  .kbt-cab-hero__content {
    padding-top: 45px;
  }

  .kbt-cab-hero__eyebrow,
  .kbt-cab-hero__title {
    font-size: 43px !important;
    letter-spacing: -1.5px;
  }

  .kbt-cab-hero__subheading {
    font-size: 21px;
  }

  .kbt-cab-hero__description {
    max-width: 100%;
    font-size: 13px;
  }

  .kbt-cab-hero__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }

  .kbt-cab-hero__feature {
    min-width: 0;
    padding: 0 5px;
  }

  .kbt-cab-hero__feature-icon {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }

  .kbt-cab-hero__feature {
    font-size: 9px;
  }

  .kbt-cab-hero__car {
    width: 92%;
    bottom: 20px;
  }

  .kbt-section-title {
    font-size: 32px !important;
  }

  .kbt-cab-about {
    padding: 50px 0;
  }

  .kbt-cab-about__visual {
    min-height: 340px;
  }

  .kbt-cab-about__main-image {
    inset: 0 4% 0 0;
  }

  .kbt-cab-about__photo {
    width: 125px;
    height: 95px;
  }

  .kbt-cab-about__photo--one {
    right: 0;
    top: 18px;
  }

  .kbt-cab-about__photo--two {
    right: 20px;
    bottom: 12px;
  }

  .kbt-cab-about__highlight {
    padding: 13px;
  }

  .kbt-cab-about__highlight p {
    font-size: 10px;
  }

  .kbt-cab-explore {
    padding: 40px 0;
  }

  .kbt-section-heading {
    margin-bottom: 20px;
  }

  .kbt-cab-attraction-track {
    grid-auto-columns: 110px;
    padding-inline: 32px;
    gap: 8px;
  }

  .kbt-cab-attraction-card__image {
    height: 78px;
  }

  .kbt-cab-attraction-card__name {
    font-size: 10px;
  }

  .kbt-slider-arrow {
    width: 29px;
    height: 29px;
    top: 35px;
  }

  .kbt-cab-trusted,
  .kbt-cab-sightseeing {
    padding: 50px 0;
  }

  .kbt-cab-travel-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .kbt-cab-travel-card {
    min-height: 70px;
  }

  .kbt-cab-travel-card__icon {
    font-size: 17px;
  }

  .kbt-cab-travel-card__title,
  .kbt-cab-travel-card__subtitle {
    font-size: 8px;
  }

  .kbt-cab-trusted__visual {
    min-height: 280px;
  }

  .kbt-cab-trusted__visual img {
    min-height: 280px;
  }

  .kbt-cab-sightseeing__places {
    gap: 7px 15px;
  }

  .kbt-cab-sightseeing__place {
    font-size: 10px;
  }

  .kbt-cab-sightseeing__visual {
    min-height: 340px;
  }

  .kbt-cab-photo-card {
    height: 145px;
    padding: 6px;
  }

  .kbt-cab-services {
    padding-bottom: 50px;
  }

  .kbt-cab-service-card {
    padding: 20px;
  }

  .kbt-cab-service-card h2 {
    font-size: 24px !important;
  }

  .kbt-cab-airport-grid,
  .kbt-cab-outstation-grid {
    gap: 5px;
  }

  .kbt-cab-airport-item__image {
    height: 55px;
  }

  .kbt-cab-outstation-item__image {
    height: 58px;
  }

  .kbt-cab-airport-item span,
  .kbt-cab-outstation-item span {
    font-size: 7px;
  }

  .kbt-cab-bottom-grid {
    padding-bottom: 50px;
  }

  .kbt-cab-bottom-grid__wrapper {
    grid-template-columns: 1fr;
  }

  .kbt-cab-bottom-card--explore {
    grid-column: auto;
  }

  .kbt-cab-bottom-card {
    min-height: 285px;
  }

  .kbt-cab-bottom-card h2 {
    font-size: 23px !important;
  }

  .kbt-cab-advantages {
    grid-template-columns: repeat(4, 1fr);
  }

  .kbt-cab-advantage {
    min-height: 65px;
  }

  .kbt-cab-advantage__title,
  .kbt-cab-advantage__subtitle {
    font-size: 7px;
  }

  .kbt-floating-contact {
    right: 16px;
    bottom: 60px;
    gap: 10px;
  }

  .kbt-floating-btn {
    width: 52px;
    height: 52px;
  }

  .kbt-floating-btn > i {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    font-size: 22px;
  }

  .kbt-floating-tooltip {
    display: none;
  }

  .kbt-floating-btn:hover {
    width: 52px;
    transform: translateY(-3px);
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .kbt-container {
    width: calc(100% - 20px);
  }

  .kbt-cab-hero {
    min-height: 600px;
  }

  .kbt-cab-hero__content {
    padding-top: 35px;
  }

  .kbt-cab-hero__eyebrow,
  .kbt-cab-hero__title {
    font-size: 38px !important;
    letter-spacing: -1.2px;
  }

  .kbt-cab-hero__subheading {
    font-size: 18px;
  }

  .kbt-cab-hero__description {
    font-size: 11px;
    line-height: 1.45;
    margin-bottom: 18px;
  }

  .kbt-cab-hero__feature-icon {
    width: 39px;
    height: 39px;
    font-size: 16px;
  }

  .kbt-cab-hero__feature {
    font-size: 7px;
  }

  .kbt-cab-hero__car {
    width: 100%;
    bottom: 10px;
  }

  .kbt-section-title {
    font-size: 30px !important;
  }

  .kbt-cab-about__visual {
    min-height: 280px;
  }

  .kbt-cab-about__photo {
    width: 105px;
    height: 78px;
    padding: 5px;
  }

  .kbt-cab-travel-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kbt-cab-travel-card {
    min-height: 75px;
  }

  .kbt-cab-trusted__visual,
  .kbt-cab-trusted__visual img {
    min-height: 230px;
  }

  .kbt-cab-sightseeing__places {
    grid-template-columns: 1fr;
  }

  .kbt-cab-sightseeing__visual {
    min-height: 280px;
  }

  .kbt-cab-photo-card {
    height: 120px;
  }

  .kbt-cab-service-card {
    padding: 17px;
  }

  .kbt-cab-service-card__header {
    gap: 10px;
  }

  .kbt-cab-service-card__icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 19px;
  }

  .kbt-cab-service-card h2 {
    font-size: 21px !important;
  }

  .kbt-cab-service-card p {
    font-size: 10px;
  }

  .kbt-cab-airport-grid,
  .kbt-cab-outstation-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .kbt-cab-airport-item__image {
    height: 48px;
  }

  .kbt-cab-outstation-item__image {
    height: 48px;
  }

  .kbt-cab-bottom-card {
    padding: 18px;
  }

  .kbt-cab-bottom-card h2 {
    font-size: 21px !important;
  }

  .kbt-cab-advantages {
    grid-template-columns: repeat(2, 1fr);
  }

  .kbt-cab-pricing-car {
    width: 65%;
  }

  .kbt-cab-bottom-card--explore {
    min-height: 270px;
  }

  .kbt-floating-contact {
    right: 12px;
    bottom: 14px;
    gap: 9px;
  }

  .kbt-floating-btn {
    width: 49px;
    height: 49px;
  }

  .kbt-floating-btn > i {
    width: 49px;
    height: 49px;
    flex-basis: 49px;
    font-size: 20px;
  }
}

/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 360px) {
  .kbt-cab-hero__eyebrow,
  .kbt-cab-hero__title {
    font-size: 34px !important;
  }

  .kbt-cab-hero__subheading {
    font-size: 16px;
  }

  .kbt-cab-hero__features {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 12px;
  }

  .kbt-cab-hero__feature {
    border-right: 0;
  }

  .kbt-cab-hero__car {
    bottom: 5px;
  }

  .kbt-section-title {
    font-size: 28px !important;
  }

  .kbt-cab-airport-grid,
  .kbt-cab-outstation-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 12px;
  }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.kbt-cab-page :focus-visible,
.kbt-floating-contact a:focus-visible {
  outline: 3px solid var(--kbt-gold);
  outline-offset: 4px;
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .kbt-cab-page *,
  .kbt-cab-page *::before,
  .kbt-cab-page *::after,
  .kbt-floating-contact *,
  .kbt-floating-contact *::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
/* =====================================================
   KODAIKANAL ATTRACTION LIGHTBOX
===================================================== */

.kbt-attraction-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.kbt-attraction-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =====================================================
   BACKDROP
===================================================== */

.kbt-attraction-lightbox__backdrop {
  position: absolute;
  inset: 0;

  background: rgba(3, 12, 25, 0.94);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* =====================================================
   DIALOG
===================================================== */

.kbt-attraction-lightbox__dialog {
  position: relative;

  width: min(1200px, 94vw);
  max-height: 94vh;

  display: flex;
  flex-direction: column;

  z-index: 2;

  padding: 20px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 24px;

  background: linear-gradient(
    145deg,
    rgba(20, 42, 70, 0.96),
    rgba(5, 20, 39, 0.98)
  );

  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);

  transform: scale(0.94) translateY(15px);

  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.kbt-attraction-lightbox.is-open .kbt-attraction-lightbox__dialog {
  transform: scale(1) translateY(0);
}

/* =====================================================
   CLOSE
===================================================== */

.kbt-attraction-lightbox__close {
  position: absolute;

  top: 14px;
  right: 14px;

  width: 44px;
  height: 44px;

  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: 50%;

  background: rgba(5, 18, 34, 0.85);

  color: #fff;

  font-size: 17px;

  cursor: pointer;

  transition:
    background 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

.kbt-attraction-lightbox__close:hover {
  background: var(--kbt-gold);

  border-color: var(--kbt-gold);

  transform: rotate(90deg);
}

/* =====================================================
   MAIN IMAGE AREA
===================================================== */

.kbt-attraction-lightbox__main {
  position: relative;

  width: 100%;

  height: min(68vh, 650px);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 18px;

  background: rgba(0, 0, 0, 0.25);
}

/* =====================================================
   IMAGE WRAPPER
===================================================== */

.kbt-attraction-lightbox__image-wrap {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px 75px;
}

.kbt-attraction-lightbox__image {
  display: block;

  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 12px;

  user-select: none;

  -webkit-user-drag: none;

  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);

  animation: kbtLightboxImageIn 0.35s ease;
}

@keyframes kbtLightboxImageIn {
  from {
    opacity: 0;

    transform: scale(0.96);
  }

  to {
    opacity: 1;

    transform: scale(1);
  }
}

/* =====================================================
   MAIN SLIDER ARROWS
===================================================== */

.kbt-attraction-lightbox__arrow {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 52px;
  height: 52px;

  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: 50%;

  background: rgba(6, 24, 47, 0.88);

  color: #fff;

  font-size: 18px;

  cursor: pointer;

  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.kbt-attraction-lightbox__arrow:hover {
  background: var(--kbt-gold);

  box-shadow: 0 10px 30px rgba(213, 154, 42, 0.28);
}

.kbt-attraction-lightbox__arrow--prev {
  left: 18px;
}

.kbt-attraction-lightbox__arrow--next {
  right: 18px;
}

/* =====================================================
   TITLE
===================================================== */

.kbt-attraction-lightbox__title {
  padding: 16px 5px 12px;

  text-align: center;

  color: #fff;

  font-family: var(--kbt-heading);

  font-size: 25px;

  font-weight: 700;
}

/* =====================================================
   THUMBNAILS
   NO THUMBNAIL SLIDER
===================================================== */

.kbt-attraction-lightbox__thumbnails {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 10px;

  width: 100%;

  max-height: 115px;

  overflow-y: auto;

  overflow-x: hidden;

  padding: 4px 4px 2px;

  scrollbar-width: thin;
}

.kbt-attraction-lightbox__thumbnail {
  position: relative;

  flex: 0 0 auto;

  width: 76px;
  height: 54px;

  padding: 0;

  border: 2px solid transparent;

  border-radius: 9px;

  overflow: hidden;

  background: transparent;

  cursor: pointer;

  opacity: 0.58;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

.kbt-attraction-lightbox__thumbnail:hover {
  opacity: 1;

  transform: translateY(-2px);
}

.kbt-attraction-lightbox__thumbnail.is-active {
  opacity: 1;

  border-color: var(--kbt-gold);

  box-shadow: 0 0 0 2px rgba(213, 154, 42, 0.16);
}

.kbt-attraction-lightbox__thumbnail img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* =====================================================
   BODY LOCK
===================================================== */

body.kbt-lightbox-open {
  overflow: hidden;
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {
  .kbt-attraction-lightbox {
    padding: 20px;
  }

  .kbt-attraction-lightbox__dialog {
    width: 96vw;

    padding: 15px;
  }

  .kbt-attraction-lightbox__main {
    height: min(64vh, 560px);
  }

  .kbt-attraction-lightbox__image-wrap {
    padding: 15px 65px;
  }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {
  .kbt-attraction-lightbox {
    padding: 10px;
  }

  .kbt-attraction-lightbox__dialog {
    width: 100%;

    max-height: 96vh;

    padding: 10px;

    border-radius: 18px;
  }

  .kbt-attraction-lightbox__main {
    height: 58vh;

    border-radius: 13px;
  }

  .kbt-attraction-lightbox__image-wrap {
    padding: 12px 48px;
  }

  .kbt-attraction-lightbox__arrow {
    width: 40px;
    height: 40px;

    font-size: 14px;
  }

  .kbt-attraction-lightbox__arrow--prev {
    left: 8px;
  }

  .kbt-attraction-lightbox__arrow--next {
    right: 8px;
  }

  .kbt-attraction-lightbox__close {
    width: 38px;
    height: 38px;

    top: 8px;
    right: 8px;

    font-size: 14px;
  }

  .kbt-attraction-lightbox__title {
    font-size: 20px;

    padding: 12px 5px 8px;
  }

  .kbt-attraction-lightbox__thumbnails {
    gap: 7px;

    max-height: 100px;
  }

  .kbt-attraction-lightbox__thumbnail {
    width: 62px;
    height: 44px;

    border-radius: 7px;
  }
}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {
  .kbt-attraction-lightbox__main {
    height: 52vh;
  }

  .kbt-attraction-lightbox__image-wrap {
    padding: 10px 43px;
  }

  .kbt-attraction-lightbox__thumbnail {
    width: 56px;
    height: 40px;
  }

  .kbt-attraction-lightbox__title {
    font-size: 18px;
  }
}

/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {
  .kbt-attraction-lightbox,
  .kbt-attraction-lightbox__dialog,
  .kbt-attraction-lightbox__image,
  .kbt-attraction-lightbox__arrow,
  .kbt-attraction-lightbox__thumbnail {
    transition: none !important;

    animation: none !important;
  }
}
/* =========================================================
   BACK TO TOP BUTTON
   ========================================================= */

.kbt-detail-back-top {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 9997;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid rgba(214, 163, 58, 0.35);
  border-radius: 50%;

  background: var(--kbt-blog-gold);
  color: var(--kbt-blog-navy-dark);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(15px);

  box-shadow: var(--kbt-blog-shadow);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

/* Visible State */

.kbt-detail-back-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Icon */

.kbt-detail-back-top i {
  font-size: 18px;
  line-height: 1;
}

/* Hover */

.kbt-detail-back-top:hover {
  background: var(--kbt-blog-navy);
  color: var(--kbt-blog-gold-light);
  transform: translateY(-4px);
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .kbt-detail-back-top {
    right: 14px;
    bottom: 14px;

    width: 48px;
    height: 48px;
  }

  .kbt-detail-back-top i {
    font-size: 16px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .kbt-detail-back-top {
    right: 12px;
    bottom: 12px;

    width: 45px;
    height: 45px;
  }
}
/* =========================================================
   KBT - SECTION HEADINGS LEFT ALIGN FIX
   TESTIMONIALS / CAR RENTAL / SIGHTSEEING
========================================================= */

html body .kbt-home #testimonials .kbt-section-heading,
html body .kbt-home #car-rental .kbt-section-heading,
html body .kbt-home #sightseeing .kbt-section-heading {
  width: 100% !important;
  display: block !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Eyebrow - left */
html body .kbt-home #testimonials .kbt-section-eyebrow,
html body .kbt-home #car-rental .kbt-section-eyebrow,
html body .kbt-home #sightseeing .kbt-section-eyebrow {
  display: inline-flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Heading - left */
html body .kbt-home #testimonials .kbt-section-heading h2,
html body .kbt-home #car-rental .kbt-section-heading h2,
html body .kbt-home #sightseeing .kbt-section-heading h2 {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Description - left */
html body .kbt-home #testimonials .kbt-section-heading p,
html body .kbt-home #car-rental .kbt-section-heading p,
html body .kbt-home #sightseeing .kbt-section-heading p {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* =========================================================
   KODAI BOOK MY TAXI
   PREMIUM HOMEPAGE
   css/index.css
========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root {
  --kbt-navy: #0b2342;
  --kbt-navy-dark: #06182f;
  --kbt-navy-soft: #153a65;

  --kbt-gold: #d59a2a;
  --kbt-gold-dark: #b97812;
  --kbt-gold-light: #e7b84f;

  --kbt-cream: #fffaf1;
  --kbt-cream-dark: #f7efe1;
  --kbt-white: #ffffff;

  --kbt-text: #18324f;
  --kbt-text-soft: #5e6d7d;
  --kbt-border: rgba(11, 35, 66, 0.1);

  --kbt-shadow-sm: 0 8px 25px rgba(11, 35, 66, 0.08);
  --kbt-shadow-md: 0 18px 45px rgba(11, 35, 66, 0.12);
  --kbt-shadow-lg: 0 28px 70px rgba(11, 35, 66, 0.18);

  --kbt-radius-sm: 12px;
  --kbt-radius-md: 18px;
  --kbt-radius-lg: 28px;

  --kbt-heading: Georgia, "Times New Roman", serif;
  --kbt-body: "Montserrat", Arial, sans-serif;

  --kbt-container: 1440px;
}

/* =========================================================
   GLOBAL
========================================================= */

.kbt-home-page {
  width: 100%;
  overflow: hidden;
  background: var(--kbt-cream);
  color: var(--kbt-text);
  font-family: var(--kbt-body);
}

.kbt-home-page *,
.kbt-home-page *::before,
.kbt-home-page *::after {
  box-sizing: border-box;
}

.kbt-home-page img {
  max-width: 100%;
  display: block;
}

.kbt-home-page a {
  text-decoration: none;
}

.kbt-home-page button,
.kbt-home-page a {
  -webkit-tap-highlight-color: transparent;
}

.kbt-home-page .container {
  width: min(100% - 40px, var(--kbt-container));
  margin-inline: auto;
}

/* =========================================================
   COMMON TYPOGRAPHY
========================================================= */

.kbt-section-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--kbt-gold-dark);

  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;

  letter-spacing: 2.5px;
  text-transform: uppercase;

  margin-bottom: 10px;
}

.kbt-section-eyebrow span {
  width: 42px;
  height: 1px;
  background: var(--kbt-gold);
  display: inline-block;
}

.kbt-section-eyebrow.light {
  justify-content: center;
  color: #f4c766;
}

.kbt-section-heading {
  margin-bottom: 35px;
}

.kbt-section-heading .kbt-section-eyebrow {
  justify-content: center;
}

.kbt-section-title {
  margin: 0;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading);
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;

  line-height: 1.05;
  letter-spacing: -0.7px;
}

.kbt-section-title span {
  color: var(--kbt-gold-dark);
}

/* =========================================================
   HERO
========================================================= */

.kbt-hero-section {
  position: relative;
  min-height: 690px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background: var(--kbt-cream);
}

.kbt-hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.kbt-hero-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center right;
}

.kbt-hero-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(255, 251, 242, 0.98) 0%,
    rgba(255, 251, 242, 0.94) 25%,
    rgba(255, 251, 242, 0.72) 42%,
    rgba(255, 251, 242, 0.1) 72%,
    rgba(255, 251, 242, 0) 100%
  );
}

/* Decorative lower curve */

.kbt-hero-section::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -95px;

  height: 180px;

  background: var(--kbt-cream);

  border-radius: 50% 50% 0 0 / 70% 70% 0 0;

  z-index: 2;
}

.kbt-hero-container {
  position: relative;
  z-index: 3;

  padding-top: 60px;
  padding-bottom: 115px;
}

.kbt-hero-content {
  width: min(620px, 52%);
}

/* Hero badge */

.kbt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 8px 17px;

  border-radius: 999px;

  color: #fff;
  background: var(--kbt-navy);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;

  box-shadow: 0 8px 25px rgba(11, 35, 66, 0.18);

  margin-bottom: 15px;
}

.kbt-badge-dot {
  color: var(--kbt-gold-light);
}

/* Hero title */

.kbt-hero-title {
  margin: 0;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading);
  font-size: clamp(45px, 5.1vw, 76px);
  font-weight: 700;

  line-height: 0.99;
  letter-spacing: -2.5px;
}

.kbt-hero-title span {
  display: block;
  color: var(--kbt-gold-dark);
}

.kbt-hero-description {
  max-width: 560px;

  margin: 20px 0 25px;

  color: var(--kbt-text);

  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
}

/* Hero buttons */

.kbt-hero-buttons {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 32px;
}

.kbt-btn {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 0 25px;

  border-radius: 999px;

  font-size: 13px;
  font-weight: 800;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

.kbt-btn:hover {
  transform: translateY(-3px);
}

.kbt-btn i {
  font-size: 15px;
}

.kbt-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--kbt-gold), var(--kbt-gold-dark));

  box-shadow: 0 10px 25px rgba(185, 120, 18, 0.25);
}

.kbt-btn-primary:hover {
  color: #fff;

  box-shadow: 0 15px 32px rgba(185, 120, 18, 0.32);
}

.kbt-btn-outline {
  color: var(--kbt-navy);

  border: 1.5px solid var(--kbt-gold-dark);

  background: rgba(255, 255, 255, 0.75);

  backdrop-filter: blur(8px);
}

.kbt-btn-outline:hover {
  color: #fff;
  background: var(--kbt-gold-dark);
}

/* Hero features */

.kbt-hero-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  max-width: 570px;
}

.kbt-hero-feature {
  min-height: 58px;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0 15px;

  border-right: 1px solid rgba(11, 35, 66, 0.14);
}

.kbt-hero-feature:first-child {
  padding-left: 0;
}

.kbt-hero-feature:last-child {
  border-right: 0;
}

.kbt-feature-icon {
  flex: 0 0 35px;

  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  color: var(--kbt-navy);

  font-size: 20px;
}

.kbt-hero-feature span {
  color: var(--kbt-navy);

  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
}

/* Hero location */

.kbt-hero-location-badge {
  position: absolute;

  top: 55px;
  right: 55px;

  z-index: 5;

  display: flex;
  align-items: center;
  gap: 12px;

  color: #fff;

  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

.kbt-hero-location-badge i {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  font-size: 26px;
}

/* =========================================================
   ABOUT SECTION
========================================================= */

.kbt-about-section {
  position: relative;
  z-index: 5;

  padding: 60px 0 80px;

  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(213, 154, 42, 0.06),
      transparent 28%
    ),
    var(--kbt-cream);
}

/* Gallery */

.kbt-about-gallery {
  position: relative;

  min-height: 450px;

  padding: 15px 55px 25px 15px;
}

.kbt-about-main-image {
  position: relative;

  width: 100%;
  height: 405px;

  overflow: hidden;

  border: 7px solid #fff;
  border-radius: 12px;

  box-shadow: var(--kbt-shadow-lg);

  transform: rotate(-1deg);
}

.kbt-about-main-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.kbt-about-main-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(180deg, transparent 55%, rgba(11, 35, 66, 0.35));

  pointer-events: none;
}

/* Play */

.kbt-about-play {
  position: absolute;
  left: 50%;
  top: 50%;

  z-index: 4;

  transform: translate(-50%, -50%);
}

.kbt-about-play a {
  width: 64px;
  height: 64px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--kbt-navy);
  background: #fff;

  font-size: 18px;

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);

  transition: 0.3s ease;
}

.kbt-about-play a:hover {
  transform: scale(1.1);

  color: #fff;
  background: var(--kbt-gold-dark);
}

/* Script */

.kbt-about-script {
  position: absolute;
  left: 28px;
  bottom: 25px;

  z-index: 4;

  color: #fff;

  font-family: cursive;
  font-size: 29px;

  line-height: 0.95;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.kbt-about-script small {
  display: block;

  margin-top: 5px;

  font-family: var(--kbt-body);
  font-size: 8px;

  letter-spacing: 1px;
}

/* Small floating images */

.kbt-about-small-image {
  position: absolute;

  width: 145px;
  height: 115px;

  overflow: hidden;

  border: 6px solid #fff;
  border-radius: 5px;

  background: #fff;

  box-shadow: var(--kbt-shadow-md);

  z-index: 5;
}

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

.kbt-about-image-one {
  top: 45px;
  right: 8px;

  transform: rotate(4deg);
}

.kbt-about-image-two {
  right: 28px;
  bottom: 38px;

  transform: rotate(5deg);
}

/* About content */

.kbt-about-content {
  padding-left: 35px;
}

.kbt-about-text {
  max-width: 650px;

  margin: 18px 0 25px;

  color: var(--kbt-text-soft);

  font-size: 14px;
  line-height: 1.7;
}

/* Benefits */

.kbt-about-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 10px;
}

.kbt-about-benefit {
  min-height: 92px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 12px;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.9);

  box-shadow: 0 8px 25px rgba(11, 35, 66, 0.07);

  border: 1px solid rgba(11, 35, 66, 0.04);
}

.kbt-benefit-icon {
  color: var(--kbt-gold-dark);

  font-size: 20px;

  margin-bottom: 8px;
}

.kbt-about-benefit strong,
.kbt-about-benefit span {
  display: block;
}

.kbt-about-benefit strong {
  color: var(--kbt-navy);

  font-family: var(--kbt-heading);
  font-size: 14px;
}

.kbt-about-benefit span {
  color: var(--kbt-text-soft);

  font-size: 11px;
  line-height: 1.3;
}

/* =========================================================
   SERVICES
========================================================= */

.kbt-services-section {
  position: relative;

  padding: 75px 0 90px;

  background:
    radial-gradient(circle at 50% 0, rgba(213, 154, 42, 0.08), transparent 32%),
    #fffdf8;
}

/* curved top */

.kbt-services-section::before {
  content: "";

  position: absolute;

  top: -40px;
  left: -5%;
  width: 110%;
  height: 80px;

  background: #fffdf8;

  border-radius: 50% 50% 0 0;
}

/* Grid */

.kbt-services-grid {
  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 16px;
}

/* Service card */

.kbt-service-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  background: #fff;

  border-radius: 12px;

  box-shadow: 0 8px 25px rgba(11, 35, 66, 0.08);

  border: 1px solid rgba(11, 35, 66, 0.06);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.kbt-service-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 40px rgba(11, 35, 66, 0.15);
}

.kbt-service-image {
  height: 145px;
  overflow: hidden;
}

.kbt-service-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;
}

.kbt-service-card:hover .kbt-service-image img {
  transform: scale(1.07);
}

.kbt-service-content {
  position: relative;

  min-height: 118px;

  padding: 30px 13px 13px;
}

.kbt-service-icon {
  position: absolute;

  top: -20px;
  left: 13px;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--kbt-gold-dark);
  background: #fff;

  font-size: 16px;

  box-shadow: 0 5px 18px rgba(11, 35, 66, 0.12);
}

.kbt-service-content h3 {
  margin: 0 0 6px;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading);
  font-size: 15px;
  line-height: 1.15;
}

.kbt-service-content p {
  margin: 0;

  color: var(--kbt-text-soft);

  font-size: 10px;
  line-height: 1.4;
}

/* =========================================================
   DESTINATIONS
========================================================= */

.kbt-destinations-section {
  position: relative;

  padding: 58px 0 70px;

  color: #fff;

  background: linear-gradient(
    180deg,
    rgba(5, 35, 67, 0.97),
    rgba(8, 48, 87, 0.98)
  );

  border-radius: 70px 70px 0 0;
}

/* subtle background */

.kbt-destinations-section::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.12;

  background:
    linear-gradient(rgba(11, 35, 66, 0.4), rgba(11, 35, 66, 0.4)),
    url("../img/kodaikanal-mountain-bg.jpg") center / cover no-repeat;

  pointer-events: none;
}

.kbt-destinations-section > .container {
  position: relative;
  z-index: 2;
}

/* heading */

.kbt-destination-heading {
  margin-bottom: 25px;
}

.kbt-destination-heading .kbt-section-eyebrow {
  margin-bottom: 8px;
}

.kbt-destination-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;
}

.kbt-section-title.light {
  color: #fff;
}

.kbt-view-all-btn {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 11px 19px;

  color: #fff;

  border: 1px solid var(--kbt-gold);
  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;

  transition: 0.3s ease;
}

.kbt-view-all-btn:hover {
  color: var(--kbt-navy);

  background: var(--kbt-gold);
}

/* Destination grid */

.kbt-destination-slider {
  display: grid;

  grid-template-columns: repeat(9, minmax(0, 1fr));

  gap: 8px;
}

.kbt-destination-card {
  overflow: hidden;

  border-radius: 8px;

  background: #fff;

  border: 1px solid rgba(255, 255, 255, 0.6);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.kbt-destination-card:hover {
  transform: translateY(-7px);

  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
}

.kbt-destination-image {
  height: 120px;

  overflow: hidden;
}

.kbt-destination-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;
}

.kbt-destination-card:hover img {
  transform: scale(1.08);
}

.kbt-destination-card h3 {
  margin: 0;

  min-height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 7px 4px;

  color: var(--kbt-navy);

  background: #fff;

  font-family: var(--kbt-body);
  font-size: 10px;
  font-weight: 800;

  text-align: center;
}

/* =========================================================
   VEHICLES
========================================================= */

.kbt-vehicles-section {
  position: relative;

  padding: 70px 0;

  background: var(--kbt-cream);
}

.kbt-vehicles-content {
  padding-right: 20px;
}

.kbt-vehicles-grid {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 12px;

  margin-top: 25px;
}

.kbt-vehicle-card {
  min-width: 0;

  padding: 12px 9px 13px;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.95);

  border: 1px solid rgba(11, 35, 66, 0.06);

  box-shadow: 0 7px 22px rgba(11, 35, 66, 0.07);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.kbt-vehicle-card:hover {
  transform: translateY(-5px);

  box-shadow: 0 15px 30px rgba(11, 35, 66, 0.13);
}

.kbt-vehicle-image {
  height: 80px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.kbt-vehicle-image img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.kbt-vehicle-card h3 {
  margin: 7px 0 8px;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading);
  font-size: 14px;
}

.kbt-vehicle-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kbt-vehicle-info span {
  display: flex;
  align-items: center;
  gap: 5px;

  color: var(--kbt-text-soft);

  font-size: 8px;
  line-height: 1.2;
}

.kbt-vehicle-info i {
  width: 12px;

  color: var(--kbt-gold-dark);

  font-size: 9px;
}

/* Vehicle showcase */

.kbt-vehicle-showcase {
  position: relative;

  min-height: 390px;

  overflow: hidden;

  border-radius: 0 0 0 90px;

  box-shadow: var(--kbt-shadow-lg);
}

.kbt-vehicle-showcase img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.kbt-vehicle-showcase-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(7, 33, 62, 0.75),
    rgba(7, 33, 62, 0.08)
  );
}

.kbt-vehicle-showcase-text {
  position: absolute;

  left: 35px;
  top: 50%;

  transform: translateY(-50%);

  color: #fff;

  font-family: cursive;

  line-height: 0.9;
}

.kbt-vehicle-showcase-text span,
.kbt-vehicle-showcase-text strong,
.kbt-vehicle-showcase-text em {
  display: block;
}

.kbt-vehicle-showcase-text span {
  font-size: 38px;
}

.kbt-vehicle-showcase-text strong {
  font-size: 48px;
  font-weight: 500;
}

.kbt-vehicle-showcase-text em {
  font-size: 39px;
}

/* =========================================================
   WHY CHOOSE
========================================================= */

.kbt-why-section {
  position: relative;

  padding: 30px 0 75px;

  background: var(--kbt-cream);
}

.kbt-why-content {
  padding-right: 30px;
}

.kbt-why-content > p {
  max-width: 680px;

  margin: 15px 0 22px;

  color: var(--kbt-text-soft);

  font-size: 13px;
  line-height: 1.65;
}

/* Features */

.kbt-why-features {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 8px;
}

.kbt-why-feature {
  min-height: 62px;

  display: flex;
  align-items: center;
  gap: 7px;

  padding: 9px;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 6px 20px rgba(11, 35, 66, 0.06);
}

.kbt-why-icon {
  flex: 0 0 32px;

  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--kbt-gold-dark);

  background: rgba(213, 154, 42, 0.12);

  font-size: 13px;
}

.kbt-why-feature span {
  color: var(--kbt-navy);

  font-size: 9px;
  line-height: 1.25;
  font-weight: 800;
}

/* Why image */

.kbt-why-image {
  position: relative;

  height: 275px;

  overflow: hidden;

  border-radius: 25px 25px 25px 80px;

  box-shadow: var(--kbt-shadow-md);
}

.kbt-why-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05),
    rgba(11, 35, 66, 0.05)
  );
}

.kbt-why-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* =========================================================
   FLOATING CONTACT
   Existing common classes retained
========================================================= */

.floating-contact {
  position: fixed;

  right: 20px;
  bottom: 25px;

  z-index: 9990;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.floating-contact .contact-btn {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #fff;

  font-size: 19px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.floating-contact .contact-btn:hover {
  transform: translateY(-4px) scale(1.05);

  box-shadow: 0 15px 32px rgba(0, 0, 0, 0.25);
}

.floating-contact .contact-btn.call {
  background: linear-gradient(135deg, var(--kbt-gold), var(--kbt-gold-dark));
}

.floating-contact .contact-btn.whatsapp {
  background: #25d366;
}

/* =========================================================
   BACK TO TOP
   Existing .kbt-back-top class retained
========================================================= */

.kbt-back-top {
  position: fixed;

  right: 20px;
  bottom: 150px;

  z-index: 9985;

  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  color: #fff;

  background: linear-gradient(135deg, var(--kbt-navy), var(--kbt-navy-soft));

  box-shadow: 0 10px 25px rgba(11, 35, 66, 0.22);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(15px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
}

.kbt-back-top.is-visible,
.kbt-back-top.show,
.kbt-back-top.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0);
}

.kbt-back-top:hover {
  color: var(--kbt-navy);

  background: var(--kbt-gold);

  transform: translateY(-3px);
}

.kbt-back-top i {
  font-size: 16px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {
  .kbt-hero-section {
    min-height: 630px;
  }

  .kbt-hero-content {
    width: 55%;
  }

  .kbt-hero-title {
    font-size: clamp(42px, 5vw, 64px);
  }

  .kbt-hero-location-badge {
    right: 35px;
  }

  .kbt-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kbt-destination-slider {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 12px;
  }

  .kbt-vehicles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kbt-vehicle-showcase {
    min-height: 350px;
  }
}

/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 991px) {
  .kbt-home-page .container {
    width: min(100% - 30px, var(--kbt-container));
  }

  /* Hero */

  .kbt-hero-section {
    min-height: 700px;
  }

  .kbt-hero-background {
    opacity: 1;
  }

  .kbt-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 251, 242, 0.97) 0%,
      rgba(255, 251, 242, 0.9) 47%,
      rgba(255, 251, 242, 0.15) 100%
    );
  }

  .kbt-hero-container {
    padding-top: 65px;
  }

  .kbt-hero-content {
    width: 65%;
  }

  .kbt-hero-location-badge {
    top: 30px;
    right: 25px;
  }

  .kbt-hero-title {
    font-size: clamp(40px, 6vw, 58px);
  }

  /* About */

  .kbt-about-gallery {
    margin-bottom: 35px;
  }

  .kbt-about-content {
    padding-left: 0;
  }

  .kbt-about-benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Services */

  .kbt-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Destinations */

  .kbt-destination-slider {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .kbt-destination-image {
    height: 105px;
  }

  /* Vehicles */

  .kbt-vehicles-content {
    padding-right: 0;
  }

  .kbt-vehicle-showcase {
    margin-top: 35px;
    min-height: 350px;
  }

  /* Why */

  .kbt-why-content {
    padding-right: 0;
    margin-bottom: 30px;
  }

  .kbt-why-image {
    height: 320px;
  }
}

/* =========================================================
   MOBILE LARGE
========================================================= */

@media (max-width: 767px) {
  .kbt-home-page .container {
    width: min(100% - 26px, 680px);
  }

  /* Common */

  .kbt-section-title {
    font-size: 34px;
    line-height: 1.08;
  }

  .kbt-section-eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
  }

  /* Hero */

  .kbt-hero-section {
    min-height: 760px;
    align-items: flex-start;
  }

  .kbt-hero-background {
    height: 100%;
  }

  .kbt-hero-image {
    object-position: 68% center;
  }

  .kbt-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 251, 242, 0.98) 0%,
      rgba(255, 251, 242, 0.94) 37%,
      rgba(255, 251, 242, 0.6) 62%,
      rgba(255, 251, 242, 0.05) 100%
    );
  }

  .kbt-hero-section::after {
    bottom: -65px;
    height: 120px;
  }

  .kbt-hero-container {
    padding-top: 35px;
    padding-bottom: 110px;
  }

  .kbt-hero-content {
    width: 100%;
  }

  .kbt-hero-location-badge {
    top: auto;
    right: 18px;
    bottom: 150px;

    font-size: 10px;
  }

  .kbt-hero-location-badge i {
    width: 30px;
    height: 30px;
    font-size: 21px;
  }

  .kbt-hero-badge {
    padding: 7px 13px;
    margin-bottom: 13px;

    font-size: 10px;
  }

  .kbt-hero-title {
    font-size: clamp(37px, 10vw, 52px);
    line-height: 0.98;
    letter-spacing: -1.5px;
  }

  .kbt-hero-description {
    max-width: 500px;

    margin: 17px 0 20px;

    font-size: 12px;
    line-height: 1.55;
  }

  .kbt-hero-buttons {
    margin-bottom: 25px;
  }

  .kbt-btn {
    min-height: 44px;
    padding: 0 18px;

    font-size: 11px;
  }

  .kbt-hero-features {
    max-width: 100%;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    row-gap: 10px;
  }

  .kbt-hero-feature {
    min-height: 48px;
    padding: 5px 8px;
  }

  .kbt-hero-feature:nth-child(2) {
    border-right: 0;
  }

  .kbt-feature-icon {
    flex-basis: 29px;
    width: 29px;
    height: 29px;

    font-size: 17px;
  }

  .kbt-hero-feature span {
    font-size: 9px;
  }

  /* About */

  .kbt-about-section {
    padding: 45px 0 60px;
  }

  .kbt-about-gallery {
    min-height: 370px;
    padding: 12px 40px 20px 8px;
  }

  .kbt-about-main-image {
    height: 335px;
  }

  .kbt-about-small-image {
    width: 110px;
    height: 88px;

    border-width: 5px;
  }

  .kbt-about-image-one {
    right: 0;
  }

  .kbt-about-image-two {
    right: 12px;
    bottom: 25px;
  }

  .kbt-about-script {
    left: 18px;
    bottom: 20px;
    font-size: 23px;
  }

  .kbt-about-content {
    margin-top: 10px;
  }

  .kbt-about-text {
    font-size: 12px;
  }

  .kbt-about-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;
  }

  .kbt-about-benefit {
    min-height: 80px;
  }

  /* Services */

  .kbt-services-section {
    padding: 60px 0 70px;
  }

  .kbt-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  .kbt-service-image {
    height: 120px;
  }

  .kbt-service-content {
    min-height: 105px;
    padding: 27px 10px 10px;
  }

  .kbt-service-content h3 {
    font-size: 13px;
  }

  .kbt-service-content p {
    font-size: 9px;
  }

  /* Destinations */

  .kbt-destinations-section {
    padding: 50px 0 60px;

    border-radius: 45px 45px 0 0;
  }

  .kbt-destination-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .kbt-view-all-btn {
    font-size: 10px;
  }

  .kbt-destination-slider {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;
  }

  .kbt-destination-image {
    height: 100px;
  }

  .kbt-destination-card h3 {
    min-height: 32px;
    font-size: 9px;
  }

  /* Vehicles */

  .kbt-vehicles-section {
    padding: 55px 0;
  }

  .kbt-vehicles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;
  }

  .kbt-vehicle-card {
    padding: 10px;
  }

  .kbt-vehicle-image {
    height: 70px;
  }

  .kbt-vehicle-card h3 {
    font-size: 13px;
  }

  .kbt-vehicle-info span {
    font-size: 8px;
  }

  .kbt-vehicle-showcase {
    min-height: 290px;

    border-radius: 0 0 0 55px;
  }

  .kbt-vehicle-showcase-text {
    left: 25px;
  }

  .kbt-vehicle-showcase-text span {
    font-size: 28px;
  }

  .kbt-vehicle-showcase-text strong {
    font-size: 38px;
  }

  .kbt-vehicle-showcase-text em {
    font-size: 30px;
  }

  /* Why */

  .kbt-why-section {
    padding: 10px 0 55px;
  }

  .kbt-why-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kbt-why-image {
    height: 270px;

    border-radius: 20px 20px 20px 55px;
  }

  /* Floating */

  .floating-contact {
    right: 13px;
    bottom: 18px;

    gap: 7px;
  }

  .floating-contact .contact-btn {
    width: 45px;
    height: 45px;

    font-size: 17px;
  }

  .kbt-back-top {
    right: 13px;
    bottom: 125px;

    width: 43px;
    height: 43px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .kbt-home-page .container {
    width: min(100% - 20px, 460px);
  }

  /* Hero */

  .kbt-hero-section {
    min-height: 720px;
  }

  .kbt-hero-container {
    padding-top: 28px;
  }

  .kbt-hero-title {
    font-size: 36px;
  }

  .kbt-hero-description {
    font-size: 11px;
  }

  .kbt-hero-buttons {
    gap: 8px;
  }

  .kbt-btn {
    padding: 0 14px;
  }

  .kbt-hero-location-badge {
    bottom: 120px;
  }

  /* About */

  .kbt-about-gallery {
    min-height: 315px;
  }

  .kbt-about-main-image {
    height: 285px;
  }

  .kbt-about-small-image {
    width: 92px;
    height: 74px;
  }

  .kbt-about-play a {
    width: 53px;
    height: 53px;
    font-size: 15px;
  }

  .kbt-about-script {
    font-size: 19px;
  }

  /* Services */

  .kbt-services-grid {
    grid-template-columns: 1fr 1fr;
  }

  .kbt-service-image {
    height: 100px;
  }

  .kbt-service-content {
    min-height: 98px;
  }

  .kbt-service-content h3 {
    font-size: 11px;
  }

  .kbt-service-content p {
    font-size: 8px;
  }

  /* Destinations */

  .kbt-destination-slider {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kbt-destination-image {
    height: 125px;
  }

  /* Vehicles */

  .kbt-vehicles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kbt-vehicle-image {
    height: 65px;
  }

  .kbt-vehicle-card h3 {
    font-size: 12px;
  }

  /* Why */

  .kbt-why-features {
    gap: 7px;
  }

  .kbt-why-feature {
    min-height: 58px;
    padding: 7px;
  }

  .kbt-why-icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .kbt-why-feature span {
    font-size: 8px;
  }

  .kbt-why-image {
    height: 230px;
  }
}

/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {
  .kbt-hero-title {
    font-size: 32px;
  }

  .kbt-hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .kbt-btn {
    width: 100%;
  }

  .kbt-hero-location-badge {
    display: none;
  }

  .kbt-section-title {
    font-size: 29px;
  }

  .kbt-destination-image {
    height: 105px;
  }

  .kbt-destination-card h3 {
    font-size: 8px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .kbt-home-page *,
  .kbt-home-page *::before,
  .kbt-home-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* =========================================================
   VEHICLE CARD FONT SIZE - IMPORTANT OVERRIDE
   ========================================================= */

.kbt-vehicle-card h3 {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin: 8px 0 10px !important;
}

.kbt-vehicle-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

.kbt-vehicle-info span {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #687789 !important;
}

.kbt-vehicle-info i {
  width: 15px !important;
  min-width: 15px !important;
  font-size: 12px !important;
  color: #c58a18 !important;
}

/* TABLET */
@media (max-width: 991px) {
  .kbt-vehicle-card h3 {
    font-size: 17px !important;
  }

  .kbt-vehicle-info span {
    font-size: 12.5px !important;
  }
}

/* MOBILE */
@media (max-width: 575px) {
  .kbt-vehicle-card h3 {
    font-size: 18px !important;
  }

  .kbt-vehicle-info span {
    font-size: 13px !important;
  }

  .kbt-vehicle-info i {
    font-size: 12px !important;
  }
}
/* =========================================================
   ABOUT SECTION - LEFT ALIGN FIX
   ========================================================= */

html body .kbt-home #about .kbt-about-content {
  text-align: left !important;
}

html body .kbt-home #about .kbt-about-content .kbt-section-heading {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

html body .kbt-home #about .kbt-about-content .kbt-section-eyebrow {
  display: inline-flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

html body .kbt-home #about .kbt-about-content .kbt-section-title,
html body .kbt-home #about .kbt-about-content .kbt-section-heading h1 {
  width: 100% !important;
  max-width: 620px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

html body .kbt-home #about .kbt-about-content .kbt-section-title span,
html body .kbt-home #about .kbt-about-content .kbt-section-heading h1 span {
  display: block !important;
  text-align: left !important;
}

html body .kbt-home #about .kbt-about-content .kbt-section-heading > p {
  max-width: 600px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
/* =========================================================
   MOBILE FLOATING BUTTON + BACK TO TOP
   FINAL OVERLAP FIX
========================================================= */

@media (max-width: 767px) {
  /* -------------------------------
       FLOATING WHATSAPP / CALL
    -------------------------------- */

  .kbt-floating-contact {
    position: fixed !important;

    right: 14px !important;
    bottom: 88px !important;

    z-index: 99999 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;

    gap: 9px !important;
  }

  .kbt-floating-btn {
    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;
    min-height: 46px !important;

    flex: 0 0 46px !important;

    border-radius: 50% !important;
  }

  .kbt-floating-btn > i {
    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;

    font-size: 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide expanded labels on mobile */
  .kbt-floating-label {
    display: none !important;
  }

  /* -------------------------------
       BACK TO TOP
    -------------------------------- */

  .kbt-back-to-top,
  .kbt-detail-back-top {
    position: fixed !important;

    right: 14px !important;
    bottom: 18px !important;

    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;
    min-height: 46px !important;

    z-index: 99990 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    transform: translateY(15px);

    transition:
      opacity 0.3s ease,
      visibility 0.3s ease,
      transform 0.3s ease,
      background 0.3s ease;
  }

  .kbt-back-to-top.is-visible,
  .kbt-detail-back-top.is-visible,
  .kbt-back-to-top.show,
  .kbt-detail-back-top.show,
  .kbt-back-to-top.active,
  .kbt-detail-back-top.active {
    transform: translateY(0) !important;
  }

  .kbt-back-to-top i,
  .kbt-detail-back-top i {
    font-size: 18px !important;
    line-height: 1 !important;
  }
}
/* =========================================================
   KODAI BOOK MY TAXI
   TERMS & CONDITIONS PAGE
   EXACT PREMIUM RESPONSIVE DESIGN
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */

.kbt-terms-page {
  --kbt-navy: #0b2342;
  --kbt-navy-dark: #06182f;
  --kbt-navy-deep: #031426;
  --kbt-navy-soft: #153a65;

  --kbt-gold: #d59a2a;
  --kbt-gold-dark: #b97812;
  --kbt-gold-light: #f0b93f;

  --kbt-cream: #fbf7ef;
  --kbt-cream-soft: #fffdf8;

  --kbt-white: #ffffff;

  --kbt-text: #26384c;
  --kbt-text-light: #687789;

  --kbt-border: rgba(11, 35, 66, 0.08);

  --kbt-card-shadow: 0 8px 28px rgba(11, 35, 66, 0.055);

  --kbt-card-shadow-hover: 0 16px 38px rgba(11, 35, 66, 0.1);

  --kbt-heading-font: Georgia, "Times New Roman", serif;

  --kbt-body-font: "Montserrat", Arial, sans-serif;
}

/* =========================================================
   PAGE RESET
========================================================= */

.kbt-terms-page,
.kbt-terms-page * {
  box-sizing: border-box;
}

.kbt-terms-page {
  width: 100%;
  overflow: hidden;
  color: var(--kbt-text);
  background: #fff;
  font-family: var(--kbt-body-font);
}

.kbt-terms-page h1,
.kbt-terms-page h2,
.kbt-terms-page h3,
.kbt-terms-page h4 {
  font-family: var(--kbt-heading-font);
}

.kbt-terms-page p {
  margin-top: 0;
}

.kbt-terms-page a {
  text-decoration: none;
}

/* =========================================================
   BOOTSTRAP CONTAINER OVERRIDE
   Keeps screenshot proportions
========================================================= */

.kbt-terms-page .container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 22px;
  padding-right: 22px;
}

/* =========================================================
   HERO SECTION
========================================================= */

.kbt-terms-hero {
  position: relative;

  min-height: 365px;

  display: flex;

  align-items: center;

  overflow: hidden;

  color: #fff;

  isolation: isolate;
}

/* Hero image */

.kbt-terms-hero-image {
  position: absolute;

  inset: 0;

  z-index: -3;

  background-image: url("../images/terms.webp");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;

  transform: scale(1.015);
}

/* Dark blue overlay */

.kbt-terms-hero-overlay {
  position: absolute;

  inset: 0;

  z-index: -2;

  background: linear-gradient(
    90deg,
    rgba(3, 20, 38, 0.96) 0%,
    rgba(5, 27, 51, 0.91) 28%,
    rgba(7, 35, 64, 0.7) 52%,
    rgba(8, 39, 70, 0.3) 77%,
    rgba(4, 24, 45, 0.08) 100%
  );
}

/* Hero content */

.kbt-terms-hero-content {
  position: relative;

  z-index: 5;

  width: 100%;

  padding-top: 52px;

  padding-bottom: 72px;
}

/* =========================================================
   BREADCRUMB
========================================================= */

.kbt-terms-breadcrumb {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 21px;

  font-family: var(--kbt-body-font);

  font-size: 12px;

  font-weight: 500;
}

.kbt-terms-breadcrumb a {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: rgba(255, 255, 255, 0.92);

  transition: 0.25s ease;
}

.kbt-terms-breadcrumb a:hover {
  color: var(--kbt-gold-light);
}

.kbt-terms-breadcrumb a i {
  color: var(--kbt-gold-light);

  font-size: 17px;
}

.kbt-terms-breadcrumb > i {
  color: rgba(255, 255, 255, 0.55);

  font-size: 15px;
}

.kbt-terms-breadcrumb > span {
  color: rgba(255, 255, 255, 0.76);
}

/* =========================================================
   HERO TITLE
========================================================= */

.kbt-terms-hero-heading {
  max-width: 690px;
}

.kbt-terms-hero-heading h1 {
  margin: 0;

  color: #fff;

  font-family: var(--kbt-heading-font);

  font-size: 36px;

  line-height: 1.06;

  font-weight: 700;

  letter-spacing: -0.4px;
}

.kbt-terms-hero-heading h1 span {
  color: rgba(255, 255, 255, 0.85);

  margin-left: 4px;
}

.kbt-terms-hero-heading h1 strong {
  display: block;

  margin-top: 4px;

  color: var(--kbt-gold-light);

  font-family: var(--kbt-heading-font);

  font-size: 36px;

  line-height: 1.08;

  font-weight: 700;
}

.kbt-terms-hero-heading p {
  max-width: 560px;

  margin: 17px 0 21px;

  color: rgba(255, 255, 255, 0.94);

  font-family: var(--kbt-body-font);

  font-size: 13px;

  line-height: 1.65;

  font-weight: 500;
}

/* =========================================================
   HERO BUTTON
========================================================= */

.kbt-terms-hero-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 17px;

  min-width: 143px;

  height: 44px;

  padding: 0 20px;

  border-radius: 50px;

  color: var(--kbt-navy) !important;

  background: linear-gradient(135deg, #f6b52d, #e7a11d);

  font-family: var(--kbt-body-font);

  font-size: 11px;

  font-weight: 800;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.kbt-terms-hero-btn:hover {
  color: var(--kbt-navy) !important;

  transform: translateY(-3px);

  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.28);
}

.kbt-terms-hero-btn i {
  font-size: 21px;

  line-height: 1;
}

/* =========================================================
   HERO CURVE
========================================================= */

.kbt-terms-hero::before {
  content: "";

  position: absolute;

  left: -4%;

  right: -4%;

  bottom: -49px;

  height: 76px;

  z-index: 6;

  border-radius: 50% 50% 0 0 / 100% 100% 0 0;

  background: #fff;
}

/* Gold line underneath curve */

.kbt-terms-hero::after {
  content: "";

  position: absolute;

  left: -4%;

  right: -4%;

  bottom: -39px;

  height: 4px;

  z-index: 7;

  border-radius: 50%;

  background: var(--kbt-gold);
}

/* =========================================================
   TERMS MAIN SECTION
========================================================= */

.kbt-terms-content-section {
  position: relative;

  padding: 58px 0 0;

  background: linear-gradient(180deg, #ffffff 0%, #fcfaf5 100%);
}

/* subtle background mountain effect */

.kbt-terms-content-section::after {
  content: "";

  position: absolute;

  right: -100px;

  top: 70px;

  width: 520px;

  height: 500px;

  pointer-events: none;

  opacity: 0.045;

  background: url("../img/solutions.webp") center / cover no-repeat;

  filter: grayscale(1);

  mask-image: linear-gradient(90deg, transparent, #000);

  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
}

/* =========================================================
   SECTION HEADING
========================================================= */

.kbt-terms-heading {
  position: relative;

  z-index: 3;

  max-width: 920px;

  margin-bottom: 25px;
}

.kbt-terms-eyebrow {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 10px;

  color: var(--kbt-navy);

  font-family: var(--kbt-body-font);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.06em;
}

.kbt-terms-eyebrow span {
  width: 29px;

  height: 2px;

  display: block;

  background: var(--kbt-gold);
}

.kbt-terms-heading h2 {
  margin: 0;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading-font);

  font-size: 36px;

  line-height: 1.1;

  font-weight: 700;

  letter-spacing: -0.5px;
}

.kbt-terms-heading-line {
  width: 48px;

  height: 2px;

  margin: 9px 0 10px;

  background: var(--kbt-gold);
}

.kbt-terms-heading h3 {
  margin: 0 0 4px;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading-font);

  font-size: 20px;

  line-height: 1.25;

  font-weight: 700;
}

.kbt-terms-heading > p {
  max-width: 850px;

  margin: 0;

  color: var(--kbt-text);

  font-family: var(--kbt-body-font);

  font-size: 12px;

  line-height: 1.65;
}

/* =========================================================
   TERMS CARDS
========================================================= */

.kbt-terms-list {
  position: relative;

  z-index: 4;

  display: flex;

  flex-direction: column;

  gap: 10px;
}

/* =========================================================
   SINGLE CARD
========================================================= */

.kbt-term-card {
  position: relative;

  width: 100%;

  min-height: 98px;

  display: grid;

  grid-template-columns:
    42px
    66px
    1px
    minmax(0, 1fr);

  align-items: center;

  column-gap: 15px;

  padding: 13px 20px;

  border: 1px solid rgba(11, 35, 66, 0.055);

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.97);

  box-shadow: 0 5px 20px rgba(11, 35, 66, 0.045);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.kbt-term-card:hover {
  transform: translateY(-2px);

  border-color: rgba(213, 154, 42, 0.16);

  box-shadow: 0 13px 32px rgba(11, 35, 66, 0.085);
}

/* =========================================================
   NUMBER CIRCLE
========================================================= */

.kbt-term-number {
  width: 38px;

  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: var(--kbt-gold-light);

  background: var(--kbt-navy);

  font-family: "Montserrat", Arial, sans-serif;

  font-size: 10px;

  font-weight: 800;

  box-shadow: 0 5px 13px rgba(11, 35, 66, 0.17);
}

/* =========================================================
   ICON CIRCLE
========================================================= */

.kbt-term-icon {
  width: 60px;

  height: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #fcf5e7;

  border: 1px solid rgba(213, 154, 42, 0.08);
}

.kbt-term-icon i {
  font-size: 26px !important;

  line-height: 1;

  color: var(--kbt-navy);
}

/* =========================================================
   VERTICAL GOLD DIVIDER
========================================================= */

.kbt-term-divider {
  width: 1px;

  height: 63px;

  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--kbt-gold) 50%,
    transparent 100%
  );
}

/* =========================================================
   CARD CONTENT
========================================================= */

.kbt-term-content {
  min-width: 0;

  padding-right: 5px;
}

.kbt-term-content h3 {
  margin: 0 0 4px;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading-font);

  font-size: 18px;

  line-height: 1.25;

  font-weight: 700;
}

.kbt-term-content ul {
  margin: 0;

  padding-left: 14px;
}

.kbt-term-content li {
  margin: 0;

  color: var(--kbt-text);

  font-family: var(--kbt-body-font);

  font-size: 10px;

  line-height: 1.55;

  font-weight: 500;
}

.kbt-term-content li::marker {
  color: var(--kbt-gold);

  font-size: 11px;
}

/* =========================================================
   BOTTOM ASSISTANCE SECTION
========================================================= */

.kbt-terms-bottom {
  position: relative;

  z-index: 5;

  margin-top: 10px;

  overflow: hidden;

  border-radius: 15px 15px 0 0;

  background: linear-gradient(135deg, #edf3f7, #f8fafb);

  border: 1px solid rgba(11, 35, 66, 0.05);
}

/* =========================================================
   ASSISTANCE BOX
========================================================= */

.kbt-assistance-box {
  min-height: 150px;

  display: flex;

  align-items: center;

  gap: 20px;

  padding: 22px 30px;

  border-right: 1px solid rgba(11, 35, 66, 0.14);
}

.kbt-assistance-icon {
  flex: 0 0 65px;

  width: 65px;

  height: 65px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--kbt-navy);
}

.kbt-assistance-icon i {
  font-size: 44px !important;
}

.kbt-assistance-box h3 {
  margin: 0 0 5px;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading-font);

  font-size: 22px;

  line-height: 1.2;

  font-weight: 700;
}

.kbt-assistance-box p {
  max-width: 480px;

  margin: 0;

  color: var(--kbt-text);

  font-family: var(--kbt-body-font);

  font-size: 9.5px;

  line-height: 1.6;
}

/* =========================================================
   BOOKING BOX
========================================================= */

.kbt-terms-booking-box {
  min-height: 150px;

  padding: 20px 28px;
}

.kbt-terms-available {
  display: flex;

  align-items: center;

  gap: 5px;

  margin-bottom: 2px;

  color: var(--kbt-navy);

  font-family: var(--kbt-body-font);

  font-size: 9px;

  font-weight: 800;
}

.kbt-terms-available i {
  color: var(--kbt-gold-dark);

  font-size: 17px;
}

.kbt-terms-booking-box h3 {
  margin: 0 0 5px;

  color: var(--kbt-navy);

  font-family: var(--kbt-heading-font);

  font-size: 22px;

  line-height: 1.2;

  font-weight: 700;
}

.kbt-terms-booking-box p {
  max-width: 500px;

  margin: 0 0 11px;

  color: var(--kbt-text);

  font-family: var(--kbt-body-font);

  font-size: 9.5px;

  line-height: 1.55;
}

/* =========================================================
   CTA BUTTONS
========================================================= */

.kbt-terms-booking-buttons {
  display: flex;

  align-items: center;

  gap: 9px;

  flex-wrap: wrap;
}

.kbt-terms-call-btn,
.kbt-terms-whatsapp-btn {
  height: 39px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  padding: 0 14px;

  border-radius: 50px;

  font-family: "Montserrat", Arial, sans-serif;

  font-size: 9.5px;

  font-weight: 800;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.kbt-terms-call-btn {
  color: var(--kbt-navy);

  background: linear-gradient(135deg, #f6b52d, #e7a11d);
}

.kbt-terms-whatsapp-btn {
  color: #fff;

  background: var(--kbt-navy);
}

.kbt-terms-call-btn:hover,
.kbt-terms-whatsapp-btn:hover {
  color: inherit;

  transform: translateY(-2px);

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.kbt-terms-whatsapp-btn:hover {
  color: #fff;
}

.kbt-terms-call-btn i,
.kbt-terms-whatsapp-btn i {
  font-size: 17px;
}

/* =========================================================
   FINAL NAVY STRIP
========================================================= */

.kbt-terms-final-strip {
  position: relative;

  min-height: 73px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: var(--kbt-navy);
}

/* Gold curved top */

.kbt-terms-final-strip::before {
  content: "";

  position: absolute;

  left: -4%;

  right: -4%;

  top: -38px;

  height: 50px;

  border-radius: 50% 50% 0 0;

  background: var(--kbt-gold);
}

.kbt-terms-final-strip::after {
  content: "";

  position: absolute;

  left: -4%;

  right: -4%;

  top: -32px;

  height: 45px;

  border-radius: 50% 50% 0 0;

  background: var(--kbt-navy);
}

.kbt-terms-final-content {
  position: relative;

  z-index: 3;

  width: 100%;

  display: flex;

  align-items: center;

  gap: 14px;

  padding-top: 10px;
}

.kbt-terms-car-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--kbt-gold-light);
}

.kbt-terms-car-icon i {
  font-size: 29px !important;
}

.kbt-terms-final-divider {
  width: 1px;

  height: 27px;

  background: rgba(255, 255, 255, 0.4);
}

.kbt-terms-final-content p {
  margin: 0;

  color: rgba(255, 255, 255, 0.93);

  font-family: "Montserrat", Arial, sans-serif;

  font-size: 9.5px;

  line-height: 1.5;
}

/* =========================================================
   FLOATING CONTACT
   Supports both current class systems
========================================================= */

.floating-contact,
.kbt-floating-contact {
  position: fixed !important;

  right: 18px !important;

  bottom: 94px !important;

  z-index: 99998 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 8px !important;
}

.floating-contact .contact-btn,
.kbt-floating-contact .kbt-floating-btn {
  width: 48px !important;

  height: 48px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 50% !important;

  color: #fff !important;

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;

  transition: transform 0.25s ease !important;
}

.floating-contact .contact-btn:hover,
.kbt-floating-contact .kbt-floating-btn:hover {
  transform: translateY(-3px) !important;
}

.floating-contact .call,
.kbt-floating-contact .kbt-floating-call {
  background: var(--kbt-gold) !important;
}

.floating-contact .whatsapp,
.kbt-floating-contact .kbt-floating-whatsapp {
  background: #18b85a !important;
}

.floating-contact i,
.kbt-floating-contact i {
  font-size: 21px !important;
}

/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199px) {
  .kbt-terms-page .container {
    max-width: 1100px;
  }

  .kbt-terms-hero {
    min-height: 350px;
  }

  .kbt-term-card {
    grid-template-columns:
      40px
      60px
      1px
      minmax(0, 1fr);

    column-gap: 13px;
  }

  .kbt-term-content h3 {
    font-size: 17px;
  }

  .kbt-term-content li {
    font-size: 9.7px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
  .kbt-terms-page .container {
    max-width: 100%;

    padding-left: 24px;

    padding-right: 24px;
  }

  .kbt-terms-hero {
    min-height: 400px;
  }

  .kbt-terms-hero-content {
    padding: 65px 0 75px;
  }

  .kbt-terms-hero-heading {
    max-width: 620px;
  }

  .kbt-terms-hero-heading h1,
  .kbt-terms-hero-heading h1 strong {
    font-size: 34px;
  }

  .kbt-terms-heading h2 {
    font-size: 34px;
  }

  .kbt-term-card {
    min-height: 105px;

    grid-template-columns:
      40px
      58px
      1px
      minmax(0, 1fr);

    padding: 13px 15px;
  }

  .kbt-term-icon {
    width: 55px;

    height: 55px;
  }

  .kbt-term-icon i {
    font-size: 26px !important;
  }

  .kbt-term-content h3 {
    font-size: 17px;
  }

  .kbt-term-content li {
    font-size: 9.5px;
  }

  .kbt-assistance-box {
    border-right: 0;

    border-bottom: 1px solid rgba(11, 35, 66, 0.12);
  }

  .kbt-terms-bottom .row {
    margin: 0;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .kbt-terms-page .container {
    padding-left: 15px;

    padding-right: 15px;
  }

  /* Hero */

  .kbt-terms-hero {
    min-height: 470px;

    align-items: flex-start;
  }

  .kbt-terms-hero-image {
    background-position: 65% center;
  }

  .kbt-terms-hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(3, 20, 38, 0.96) 0%,
      rgba(4, 25, 46, 0.88) 55%,
      rgba(4, 25, 46, 0.52) 100%
    );
  }

  .kbt-terms-hero-content {
    padding: 58px 0 90px;
  }

  .kbt-terms-breadcrumb {
    margin-bottom: 22px;

    font-size: 10px;
  }

  .kbt-terms-hero-heading h1 {
    font-size: 32px !important;

    line-height: 1.08;
  }

  .kbt-terms-hero-heading h1 strong {
    font-size: 32px !important;
  }

  .kbt-terms-hero-heading p {
    max-width: 480px;

    font-size: 12px;

    line-height: 1.7;
  }

  .kbt-terms-hero-btn {
    min-width: 140px;

    height: 45px;

    font-size: 10px;
  }

  /* Main */

  .kbt-terms-content-section {
    padding-top: 48px;
  }

  .kbt-terms-heading {
    margin-bottom: 24px;
  }

  .kbt-terms-eyebrow {
    font-size: 9px;
  }

  .kbt-terms-heading h2 {
    font-size: 32px !important;

    line-height: 1.12;
  }

  .kbt-terms-heading h3 {
    font-size: 18px;
  }

  .kbt-terms-heading > p {
    font-size: 11px;

    line-height: 1.7;
  }

  /* Cards */

  .kbt-terms-list {
    gap: 10px;
  }

  .kbt-term-card {
    display: grid;

    grid-template-columns:
      38px
      52px
      minmax(0, 1fr);

    grid-template-rows: auto auto;

    column-gap: 10px;

    row-gap: 8px;

    min-height: 0;

    padding: 15px 12px;
  }

  .kbt-term-number {
    width: 34px;

    height: 34px;

    grid-row: 1 / span 2;

    align-self: start;

    font-size: 9px;
  }

  .kbt-term-icon {
    width: 50px;

    height: 50px;

    grid-row: 1 / span 2;

    align-self: start;
  }

  .kbt-term-icon i {
    font-size: 25px !important;
  }

  .kbt-term-divider {
    display: none;
  }

  .kbt-term-content {
    grid-column: 3;

    grid-row: 1 / span 2;

    padding: 0;
  }

  .kbt-term-content h3 {
    margin-bottom: 6px;

    font-size: 16px;

    line-height: 1.25;
  }

  .kbt-term-content ul {
    padding-left: 14px;
  }

  .kbt-term-content li {
    font-size: 9.5px;

    line-height: 1.6;
  }

  /* Bottom */

  .kbt-terms-bottom {
    margin-top: 10px;
  }

  .kbt-assistance-box {
    min-height: auto;

    gap: 15px;

    padding: 23px 18px;

    align-items: flex-start;
  }

  .kbt-assistance-icon {
    flex: 0 0 50px;

    width: 50px;

    height: 50px;
  }

  .kbt-assistance-icon i {
    font-size: 38px !important;
  }

  .kbt-assistance-box h3 {
    font-size: 21px;
  }

  .kbt-assistance-box p {
    font-size: 9.5px;

    line-height: 1.65;
  }

  .kbt-terms-booking-box {
    min-height: auto;

    padding: 22px 18px 25px;
  }

  .kbt-terms-booking-box h3 {
    font-size: 21px;
  }

  .kbt-terms-booking-box p {
    font-size: 9.5px;
  }

  .kbt-terms-booking-buttons {
    width: 100%;

    gap: 8px;
  }

  .kbt-terms-call-btn,
  .kbt-terms-whatsapp-btn {
    min-height: 42px;

    flex: 1;

    padding: 0 12px;

    font-size: 9px;
  }

  /* Final strip */

  .kbt-terms-final-strip {
    min-height: 80px;
  }

  .kbt-terms-final-content {
    gap: 10px;

    padding: 16px 0;
  }

  .kbt-terms-car-icon i {
    font-size: 28px !important;
  }

  .kbt-terms-final-divider {
    height: 25px;
  }

  .kbt-terms-final-content p {
    font-size: 8.5px;

    line-height: 1.55;
  }

  /* Floating */

  .floating-contact,
  .kbt-floating-contact {
    right: 13px !important;

    bottom: 80px !important;

    gap: 8px !important;
  }

  .floating-contact .contact-btn,
  .kbt-floating-contact .kbt-floating-btn {
    width: 44px !important;

    height: 44px !important;
  }

  .floating-contact i,
  .kbt-floating-contact i {
    font-size: 20px !important;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .kbt-terms-hero {
    min-height: 450px;
  }

  .kbt-terms-hero-content {
    padding: 50px 0 82px;
  }

  .kbt-terms-hero-heading h1,
  .kbt-terms-hero-heading h1 strong {
    font-size: 30px !important;
  }

  .kbt-terms-hero-heading p {
    font-size: 11px;

    line-height: 1.7;
  }

  .kbt-terms-heading h2 {
    font-size: 30px !important;
  }

  .kbt-terms-heading h3 {
    font-size: 17px;
  }

  .kbt-terms-heading > p {
    font-size: 10px;
  }

  .kbt-term-card {
    grid-template-columns:
      34px
      46px
      minmax(0, 1fr);

    column-gap: 9px;

    padding: 13px 9px;
  }

  .kbt-term-number {
    width: 31px;

    height: 31px;

    font-size: 8px;
  }

  .kbt-term-icon {
    width: 44px;

    height: 44px;
  }

  .kbt-term-icon i {
    font-size: 23px !important;
  }

  .kbt-term-content h3 {
    font-size: 14px;
  }

  .kbt-term-content li {
    font-size: 8.5px;

    line-height: 1.55;
  }

  .kbt-assistance-box {
    gap: 12px;

    padding: 20px 15px;
  }

  .kbt-assistance-icon {
    flex-basis: 43px;

    width: 43px;
  }

  .kbt-assistance-icon i {
    font-size: 34px !important;
  }

  .kbt-assistance-box h3 {
    font-size: 20px;
  }

  .kbt-assistance-box p {
    font-size: 8.7px;
  }

  .kbt-terms-booking-box {
    padding: 20px 15px 23px;
  }

  .kbt-terms-booking-box h3 {
    font-size: 20px;
  }

  .kbt-terms-booking-box p {
    font-size: 8.8px;
  }

  .kbt-terms-booking-buttons {
    flex-direction: column;

    align-items: stretch;
  }

  .kbt-terms-call-btn,
  .kbt-terms-whatsapp-btn {
    width: 100%;

    flex: none;
  }

  .kbt-terms-final-content p {
    font-size: 8px;
  }
}

/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 360px) {
  .kbt-terms-hero-heading h1,
  .kbt-terms-hero-heading h1 strong {
    font-size: 28px !important;
  }

  .kbt-terms-heading h2 {
    font-size: 28px !important;
  }

  .kbt-term-card {
    grid-template-columns:
      31px
      42px
      minmax(0, 1fr);

    column-gap: 7px;
  }

  .kbt-term-number {
    width: 29px;

    height: 29px;
  }

  .kbt-term-icon {
    width: 40px;

    height: 40px;
  }

  .kbt-term-icon i {
    font-size: 21px !important;
  }

  .kbt-term-content h3 {
    font-size: 13px;
  }

  .kbt-term-content li {
    font-size: 7.8px;
  }
}

/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

@media (max-width: 767px) and (orientation: landscape) {
  .kbt-terms-hero {
    min-height: 390px;
  }

  .kbt-terms-hero-content {
    padding-top: 45px;

    padding-bottom: 70px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .kbt-terms-page *,
  .kbt-terms-page *::before,
  .kbt-terms-page *::after {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;
  }
}
/* =========================================================
   TERMS CARD DESCRIPTION - FONT SIZE INCREASE
========================================================= */

.kbt-term-content li {
  font-size: 13px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
}

/* TABLET */
@media (max-width: 991px) {
  .kbt-term-content li {
    font-size: 11.5px !important;
    line-height: 1.6 !important;
  }
}

/* MOBILE */
@media (max-width: 767px) {
  .kbt-term-content li {
    font-size: 11px !important;
    line-height: 1.65 !important;
  }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
  .kbt-term-content li {
    font-size: 10.5px !important;
    line-height: 1.6 !important;
  }
}
/* =========================================================
   NEED ASSISTANCE - SIZE INCREASE
========================================================= */

.kbt-assistance-icon i {
  font-size: 48px !important;
}

.kbt-assistance-box h3 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

.kbt-assistance-box p {
  max-width: 560px !important;

  font-size: 12px !important;
  line-height: 1.7 !important;

  font-weight: 500 !important;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
  .kbt-assistance-icon i {
    font-size: 44px !important;
  }

  .kbt-assistance-box h3 {
    font-size: 24px !important;
  }

  .kbt-assistance-box p {
    font-size: 11.5px !important;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .kbt-assistance-icon i {
    font-size: 40px !important;
  }

  .kbt-assistance-box h3 {
    font-size: 22px !important;
  }

  .kbt-assistance-box p {
    font-size: 11px !important;
    line-height: 1.65 !important;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .kbt-assistance-icon i {
    font-size: 38px !important;
  }

  .kbt-assistance-box h3 {
    font-size: 21px !important;
  }

  .kbt-assistance-box p {
    font-size: 10.5px !important;
  }
}
/* ABOUT VIDEO BUTTON + DECORATIVE TEXT */
.kbt-about-video {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.kbt-about-script {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
@media (max-width: 380px) {
  .kbt-premium-hero__features {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 15px !important;
    margin-top: 14px;
  }

  .kbt-premium-hero__feature {
    flex: 0 0 auto;
    gap: 10px;
    padding: 0 !important;
    margin: 0 !important;
  }
}
/* =========================================================
   ABOUT HEADING — FINAL 2 LINE FIX
========================================================= */

html body .kbt-home #about .kbt-about-content .kbt-section-heading h1 {
    max-width: 700px !important;
    width: 100% !important;
    font-size: 42px !important;
    line-height: 1.02 !important;
}

html body .kbt-home #about .kbt-about-content .kbt-section-heading h1 span {
    display: inline !important;
    color: var(--kbt-gold) !important;
    font-style: italic !important;
}

/* =========================================================
   KODAI BOOK MY TAXI
   PREMIUM CONTACT / SEND ENQUIRY SECTION
   Add this at the END of css/index.css
========================================================= */


/* =========================================================
   CONTACT ROOT
========================================================= */

.kbt-contact-section {

    position: relative;

    width: 100%;

    min-height: 760px;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

    padding: 90px 0 105px;

    background: #f8f5ed;

}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.kbt-contact-bg {

    position: absolute;

    inset: 0;

    z-index: -3;

    background-image:
        url("/demo/images/hero-kodaikanal-lake.webp");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    transform: scale(1.02);

}


/* =========================================================
   BACKGROUND PREMIUM OVERLAY
========================================================= */

.kbt-contact-overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.94) 22%,
            rgba(255,255,255,.82) 36%,
            rgba(255,255,255,.48) 51%,
            rgba(255,255,255,.12) 68%,
            rgba(255,255,255,.02) 100%
        );

}


/* =========================================================
   EXTRA LIGHT HAZE
========================================================= */

.kbt-contact-section::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 24% 42%,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.72) 24%,
            rgba(255,255,255,0) 52%
        );

}


/* =========================================================
   BOTTOM PREMIUM CURVE
========================================================= */

.kbt-contact-section::after {

    content: "";

    position: absolute;

    left: -4%;

    right: -4%;

    bottom: -105px;

    height: 165px;

    z-index: 4;

    background: #0b2342;

    border-top: 8px solid #d59a2a;

    border-radius: 50% 50% 0 0 / 35% 35% 0 0;

    transform: rotate(-1.5deg);

    pointer-events: none;

}


/* =========================================================
   CONTAINER
========================================================= */

.kbt-contact-section .kbt-container {

    position: relative;

    z-index: 5;

    width: min(1320px, calc(100% - 60px));

    margin: 0 auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.kbt-contact-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(520px, .98fr);

    align-items: center;

    gap: 70px;

}


/* =========================================================
   LEFT CONTACT INFORMATION
========================================================= */

.kbt-contact-info {

    position: relative;

    max-width: 590px;

    padding: 20px 0 30px;

}


/* =========================================================
   EYEBROW
========================================================= */

.kbt-contact-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 14px;

    color: rgb(213, 154, 42);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: .04em;

    text-transform: uppercase;

}


.kbt-contact-eyebrow span {

    display: block;

    width: 40px;

    height: 2px;

    flex: 0 0 45px;

    background:
        linear-gradient(
            90deg,
            #d59a2a,
            #f2bd55
        );

}


/* =========================================================
   MAIN CONTACT TITLE
========================================================= */

.kbt-contact-title {

    margin: 0 0 36px;

    color: #0b2342;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(52px, 5.1vw, 76px);

    font-weight: 500;

    line-height: .94;

    letter-spacing: -.045em;

}


/* Gold second line */

.kbt-contact-title strong {

    display: block;

    color: #d59a2a;

    font-weight: 600;

}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.kbt-contact-details {

    display: flex;

    flex-direction: column;

    gap: 17px;

}


/* =========================================================
   SINGLE CONTACT ITEM
========================================================= */

.kbt-contact-detail {

    display: flex;

    align-items: center;

    gap: 20px;

    width: fit-content;

    max-width: 100%;

    color: #102c4d;

    text-decoration: none;

    transition:
        transform .3s ease,
        color .3s ease;

}


.kbt-contact-detail:hover {

    color: #0b2342;

    transform: translateX(6px);

}


/* =========================================================
   CONTACT ICON CIRCLE
========================================================= */

.kbt-contact-detail-icon {

    width: 55px;

    height: 55px;

    min-width: 55px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #f2b632;

    background:
        linear-gradient(
            145deg,
            #0b2b50,
            #09213e
        );

    border: 1px solid
        rgba(255,255,255,.16);

    box-shadow:
        0 10px 25px
        rgba(11,35,66,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


.kbt-contact-detail:hover
.kbt-contact-detail-icon {

    transform: translateY(-3px);

    background:
        linear-gradient(
            145deg,
            #d59a2a,
            #b97812
        );

    color: #fff;

    box-shadow:
        0 14px 30px
        rgba(213,154,42,.25);

}


.kbt-contact-detail-icon i {

    font-size: 25px;

    line-height: 1;

}


/* =========================================================
   CONTACT TEXT
========================================================= */

.kbt-contact-detail-text {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;

    color: #102c4d;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: 600;

    line-height: 1.45;

}


.kbt-contact-detail-text strong {

    color: #102c4d;

    font-weight: 700;

}


.kbt-contact-detail-text span {

    color: #102c4d;

}


.kbt-contact-detail-text a {

    display: block;

    color: #102c4d;

    text-decoration: none;

    font-weight: 700;

    transition: color .25s ease;

}


.kbt-contact-detail-text a:hover {

    color: #c48618;

}


/* =========================================================
   LOCATION ARROW
========================================================= */

.kbt-contact-location-link
.kbt-contact-detail-text {

    flex-direction: row;

    align-items: center;

    gap: 13px;

}


.kbt-contact-location-link
.kbt-contact-detail-text > i {

    color: #0b2342;

    font-size: 27px;

    line-height: 1;

    transition:
        transform .3s ease,
        color .3s ease;

}


.kbt-contact-location-link:hover
.kbt-contact-detail-text > i {

    color: #d59a2a;

    transform: translateX(5px);

}


/* =========================================================
   ENQUIRY CARD
========================================================= */

.kbt-contact-form-wrap {

    position: relative;

    width: 100%;

    max-width: 670px;

    justify-self: end;

    padding: 0;

}


/* =========================================================
   FORM CARD
========================================================= */

.kbt-contact-form {

    position: relative;

    width: 100%;

    padding: 48px 55px 50px;

    box-sizing: border-box;

    overflow: hidden;

    border-radius: 36px;

    border: 1px solid
        rgba(11,35,66,.08);

    border-top: 5px solid #d59a2a;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(250,250,249,.97)
        );

    box-shadow:

        0 30px 80px
        rgba(11,35,66,.18),

        0 8px 28px
        rgba(11,35,66,.08);

}


/* =========================================================
   FORM DECORATIVE LIGHT
========================================================= */

.kbt-contact-form::before {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -145px;

    top: -145px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(213,154,42,.13),
            rgba(213,154,42,0) 70%
        );

    pointer-events: none;

}


/* =========================================================
   FORM EYEBROW
========================================================= */

.kbt-contact-form-eyebrow {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 13px;

    color: rgb(213, 154, 42);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .035em;

    text-transform: uppercase;

}


.kbt-contact-form-eyebrow span {

    width: 43px;

    height: 3px;

    display: block;

    background:
        linear-gradient(
            90deg,
            #d59a2a,
            #f3bd58
        );

}


/* =========================================================
   FORM TITLE
========================================================= */

.kbt-contact-form-title {

    position: relative;

    margin: 0 0 27px;

    color: #0b2342;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(43px, 4vw, 61px);

    font-weight: 500;

    line-height: .98;

    letter-spacing: -.035em;

}


.kbt-contact-form-title strong {

    color: #d59a2a;

    font-weight: 600;

}


/* =========================================================
   FORM MESSAGE
========================================================= */

.kbt-contact-form-message {

    min-height: 0;

    margin: 0;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.5;

}


.kbt-contact-form-message:not(:empty) {

    margin-bottom: 13px;

    padding: 10px 13px;

    border-radius: 10px;

    background: rgba(213,154,42,.09);

    color: #7a5413;

}


/* =========================================================
   FORM INPUT
========================================================= */

.kbt-contact-input {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 57px;

    margin-bottom: 11px;

    box-sizing: border-box;

    border: 1px solid
        rgba(11,35,66,.15);

    border-radius: 13px;

    background:
        rgba(255,255,255,.92);

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease,
        background .3s ease;

}


.kbt-contact-input:hover {

    border-color:
        rgba(11,35,66,.27);

}


/* =========================================================
   INPUT FOCUS
========================================================= */

.kbt-contact-input:focus-within {

    border-color: #d59a2a;

    background: #fff;

    box-shadow:
        0 0 0 4px
        rgba(213,154,42,.10);

    transform: translateY(-1px);

}


/* =========================================================
   INPUT ICON
========================================================= */

.kbt-contact-input > i {

    width: 58px;

    min-width: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #637286;

    font-size: 23px;

    line-height: 1;

    pointer-events: none;

    transition: color .3s ease;

}


.kbt-contact-input:focus-within > i {

    color: #c48618;

}


/* =========================================================
   INPUT / TEXTAREA
========================================================= */

.kbt-contact-input input,
.kbt-contact-input textarea {

    width: 100%;

    min-width: 0;

    border: 0;

    outline: 0;

    background: transparent;

    color: #102c4d;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 500;

}


.kbt-contact-input input {

    height: 55px;

    padding: 0 18px 0 0;

}


.kbt-contact-input textarea {

    min-height: 108px;

    padding: 17px 18px 17px 0;

    resize: vertical;

    line-height: 1.6;

}


/* =========================================================
   PLACEHOLDER
========================================================= */

.kbt-contact-input input::placeholder,
.kbt-contact-input textarea::placeholder {

    color: #7c8795;

    opacity: 1;

    font-weight: 500;

}


.kbt-contact-input input:focus::placeholder,
.kbt-contact-input textarea:focus::placeholder {

    color: #a1a8b0;

}


/* =========================================================
   TEXTAREA
========================================================= */

.kbt-contact-textarea {

    align-items: flex-start;

}


.kbt-contact-textarea > i {

    padding-top: 19px;

}


/* =========================================================
   CAPTCHA ROW
========================================================= */

.kbt-contact-captcha-row {

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(115px, .72fr)
        34px;

    align-items: center;

    gap: 11px;

    margin-top: 3px;

    margin-bottom: 16px;

}


/* =========================================================
   CAPTCHA INPUT
========================================================= */

.kbt-contact-captcha {

    margin: 0;

}


.kbt-contact-captcha input {

    min-width: 0;

}


/* =========================================================
   CAPTCHA CODE
========================================================= */

.kbt-contact-captcha-code {

    height: 57px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border-radius: 12px;

    border: 1px solid
        rgba(11,35,66,.09);

    background:
        linear-gradient(
            135deg,
            #eef0f3,
            #e1e4e8
        );

    color: #111;

    font-family:
        "Courier New",
        monospace;

    font-size: 23px;

    font-weight: 900;

    letter-spacing: .15em;

    user-select: none;

    text-shadow:
        1px 1px 0 rgba(255,255,255,.7);

}


/* =========================================================
   CAPTCHA REFRESH
========================================================= */

.kbt-contact-captcha-refresh {

    width: 34px;

    height: 57px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    outline: 0;

    background: transparent;

    color: #50647b;

    cursor: pointer;

    font-size: 25px;

    transition:
        color .3s ease,
        transform .3s ease;

}


.kbt-contact-captcha-refresh:hover {

    color: #d59a2a;

    transform:
        rotate(180deg);

}


.kbt-contact-captcha-refresh:focus-visible {

    border-radius: 8px;

    box-shadow:
        0 0 0 3px
        rgba(213,154,42,.18);

}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.kbt-contact-submit {

    position: relative;

    width: 100%;

    min-height: 59px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 14px 25px;

    border: 0;

    border-radius: 999px;

    outline: 0;

    overflow: hidden;

    color: #09213e;

    background:
        linear-gradient(
            100deg,
            #eaa21f 0%,
            #f4b735 50%,
            #e59b18 100%
        );

    box-shadow:
        0 12px 25px
        rgba(213,154,42,.23);

    cursor: pointer;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 16px;

    font-weight: 800;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;

}


.kbt-contact-submit::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 75%;

    height: 100%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.38),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left .65s ease;

}


.kbt-contact-submit:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 17px 35px
        rgba(213,154,42,.31);

    filter: saturate(1.08);

}


.kbt-contact-submit:hover::before {

    left: 140%;

}


.kbt-contact-submit:active {

    transform:
        translateY(-1px);

}


.kbt-contact-submit span,
.kbt-contact-submit i {

    position: relative;

    z-index: 2;

}


.kbt-contact-submit i {

    font-size: 25px;

    line-height: 1;

    transition:
        transform .3s ease;

}


.kbt-contact-submit:hover i {

    transform:
        translateX(6px);

}


/* =========================================================
   FORM AUTOFILL
========================================================= */

.kbt-contact-input input:-webkit-autofill {

    -webkit-text-fill-color: #102c4d;

    box-shadow:
        0 0 0 1000px #fff inset;

    transition:
        background-color 9999s ease-in-out 0s;

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.kbt-contact-input input:focus-visible,
.kbt-contact-input textarea:focus-visible {

    outline: none;

}


.kbt-contact-detail:focus-visible {

    outline:
        2px solid #d59a2a;

    outline-offset: 5px;

    border-radius: 10px;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .kbt-contact-section {

        min-height: 800px;

        padding-top: 105px;

        padding-bottom: 125px;

    }


    .kbt-contact-section .kbt-container {

        width: min(1390px, calc(100% - 80px));

    }


    .kbt-contact-grid {

        gap: 90px;

        grid-template-columns:
            minmax(0, .94fr)
            minmax(570px, .98fr);

    }


    .kbt-contact-form {

        padding:
            52px 58px 55px;

    }


    .kbt-contact-detail-icon {

        width: 58px;

        height: 58px;

        min-width: 58px;

    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) and (max-width: 1499px) {

    .kbt-contact-grid {

        gap: 55px;

    }


    .kbt-contact-form {

        padding:
            43px 48px 45px;

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .kbt-contact-section {

        min-height: auto;

        padding:
            85px 0 115px;

    }


    .kbt-contact-section .kbt-container {

        width:
            min(960px, calc(100% - 50px));

    }


    .kbt-contact-grid {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(450px, .95fr);

        gap: 42px;

    }


    .kbt-contact-title {

        font-size: 55px;

    }


    .kbt-contact-form-title {

        font-size: 48px;

    }


    .kbt-contact-form {

        padding:
            40px 38px 42px;

        border-radius: 30px;

    }


    .kbt-contact-detail {

        gap: 15px;

    }


    .kbt-contact-detail-icon {

        width: 51px;

        height: 51px;

        min-width: 51px;

    }


    .kbt-contact-detail-icon i {

        font-size: 22px;

    }


    .kbt-contact-detail-text {

        font-size: 15px;

    }

}


/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media (max-width: 991px) {

    .kbt-contact-section {

        padding:
            75px 0 110px;

    }


    .kbt-contact-section .kbt-container {

        width:
            min(760px, calc(100% - 42px));

    }


    .kbt-contact-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .kbt-contact-info {

        max-width: 680px;

        margin: 0 auto;

        width: 100%;

    }


    .kbt-contact-form-wrap {

        width: 100%;

        max-width: 680px;

        margin: 0 auto;

        justify-self: center;

    }


    .kbt-contact-title {

        font-size:
            clamp(48px, 8vw, 65px);

        margin-bottom: 30px;

    }


    .kbt-contact-details {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 18px 28px;

    }


    .kbt-contact-detail {

        width: 100%;

    }


    .kbt-contact-form {

        padding:
            42px 45px 45px;

    }


    .kbt-contact-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(255,255,255,.96) 0%,
                rgba(255,255,255,.91) 30%,
                rgba(255,255,255,.72) 58%,
                rgba(255,255,255,.55) 100%
            );

    }


    .kbt-contact-section::before {

        background:

            radial-gradient(
                circle at 50% 20%,
                rgba(255,255,255,.95),
                rgba(255,255,255,0) 58%
            );

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .kbt-contact-section {

        padding:
            62px 0 105px;

        min-height: auto;

    }


    .kbt-contact-section .kbt-container {

        width:
            calc(100% - 30px);

    }


    .kbt-contact-grid {

        gap: 35px;

    }


    /* Background */

    .kbt-contact-bg {

        background-position:
            55% center;

        transform: scale(1.04);

    }


    .kbt-contact-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(255,255,255,.97) 0%,
                rgba(255,255,255,.94) 32%,
                rgba(255,255,255,.82) 63%,
                rgba(255,255,255,.70) 100%
            );

    }


    /* Left */

    .kbt-contact-info {

        padding:
            5px 0 0;

    }


    .kbt-contact-eyebrow {

        gap: 10px;

        font-size: 12px;

        margin-bottom: 12px;

    }


    .kbt-contact-eyebrow span {

        width: 34px;

        flex-basis: 34px;

        height: 2px;

    }


    .kbt-contact-title {

        margin-bottom: 27px;

        font-size:
            clamp(42px, 12vw, 56px);

        line-height: .96;

    }


    /* Details */

    .kbt-contact-details {

        display: flex;

        gap: 13px;

    }


    .kbt-contact-detail {

        gap: 13px;

    }


    .kbt-contact-detail-icon {

        width: 46px;

        height: 46px;

        min-width: 46px;

    }


    .kbt-contact-detail-icon i {

        font-size: 20px;

    }


    .kbt-contact-detail-text {

        font-size: 13px;

        line-height: 1.35;

    }


    /* Form */

    .kbt-contact-form-wrap {

        max-width: 100%;

    }


    .kbt-contact-form {

        padding:
            30px 20px 25px;

        border-radius: 24px;

        border-top-width: 4px;

    }


    .kbt-contact-form-eyebrow {

        gap: 9px;

        font-size: 11px;

        margin-bottom: 10px;

    }


    .kbt-contact-form-eyebrow span {

        width: 30px;

        height: 2px;

    }


    .kbt-contact-form-title {

        margin-bottom: 20px;

        font-size:
            clamp(38px, 10.5vw, 48px);

        line-height: .98;

    }


    /* Inputs */

    .kbt-contact-input {

        min-height: 53px;

        margin-bottom: 9px;

        border-radius: 11px;

    }


    .kbt-contact-input > i {

        width: 48px;

        min-width: 48px;

        font-size: 20px;

    }


    .kbt-contact-input input {

        height: 51px;

        font-size: 13px;

    }


    .kbt-contact-input textarea {

        min-height: 95px;

        padding-top: 15px;

        font-size: 13px;

    }


    .kbt-contact-textarea > i {

        padding-top: 17px;

    }


    /* Captcha */

    .kbt-contact-captcha-row {

        grid-template-columns:
            minmax(0, 1fr)
            90px
            30px;

        gap: 7px;

        margin-top: 1px;

        margin-bottom: 13px;

    }


    .kbt-contact-captcha-code {

        height: 53px;

        font-size: 17px;

        letter-spacing: .11em;

    }


    .kbt-contact-captcha-refresh {

        width: 30px;

        height: 53px;

        font-size: 21px;

    }


    /* Submit */

    .kbt-contact-submit {

        min-height: 54px;

        font-size: 13px;

        gap: 9px;

    }


    .kbt-contact-submit i {

        font-size: 22px;

    }


    /* Curve */

    .kbt-contact-section::after {

        bottom: -80px;

        height: 125px;

        border-top-width: 6px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .kbt-contact-section {

        padding:
            55px 0 92px;

    }


    .kbt-contact-section .kbt-container {

        width:
            calc(100% - 22px);

    }


    .kbt-contact-grid {

        gap: 30px;

    }


    .kbt-contact-title {

        font-size:
            43px;

    }


    .kbt-contact-detail {

        gap: 11px;

    }


    .kbt-contact-detail-icon {

        width: 43px;

        height: 43px;

        min-width: 43px;

    }


    .kbt-contact-detail-icon i {

        font-size: 18px;

    }


    .kbt-contact-detail-text {

        font-size: 12px;

    }


    .kbt-contact-form {

        padding:
            27px 14px 22px;

        border-radius: 21px;

    }


    .kbt-contact-form-title {

        font-size:
            39px;

    }


    .kbt-contact-input {

        min-height: 51px;

    }


    .kbt-contact-input > i {

        width: 44px;

        min-width: 44px;

        font-size: 19px;

    }


    .kbt-contact-input input {

        height: 49px;

        font-size: 12px;

    }


    .kbt-contact-input textarea {

        min-height: 88px;

        font-size: 12px;

    }


    .kbt-contact-captcha-row {

        grid-template-columns:
            minmax(0, 1fr)
            82px
            27px;

        gap: 5px;

    }


    .kbt-contact-captcha-code {

        height: 51px;

        font-size: 15px;

    }


    .kbt-contact-captcha-refresh {

        width: 27px;

        font-size: 19px;

    }


    .kbt-contact-submit {

        min-height: 52px;

        font-size: 12px;

    }


    .kbt-contact-submit i {

        font-size: 20px;

    }


    .kbt-contact-section::after {

        bottom: -70px;

        height: 105px;

        border-top-width: 5px;

    }

}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .kbt-contact-section .kbt-container {

        width:
            calc(100% - 18px);

    }


    .kbt-contact-title {

        font-size: 39px;

    }


    .kbt-contact-detail-text {

        font-size: 11px;

    }


    .kbt-contact-detail-icon {

        width: 40px;

        height: 40px;

        min-width: 40px;

    }


    .kbt-contact-form {

        padding:
            24px 11px 20px;

    }


    .kbt-contact-form-title {

        font-size: 35px;

    }


    .kbt-contact-captcha-row {

        grid-template-columns:
            minmax(0, 1fr)
            73px
            25px;

    }


    .kbt-contact-captcha-code {

        font-size: 13px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kbt-contact-detail,
    .kbt-contact-detail-icon,
    .kbt-contact-input,
    .kbt-contact-submit,
    .kbt-contact-submit::before,
    .kbt-contact-submit i,
    .kbt-contact-captcha-refresh {

        transition: none !important;

    }

}
.kbt-contact-captcha-code {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    padding: 0 10px;
}

/* =========================================
   KBT PREMIUM PHONE COUNTRY DROPDOWN
========================================= */

/* Phone field layering */
.kbt-contact-form-wrap,
.kbt-contact-form {
    overflow: visible !important;
}

.kbt-contact-input:has(#phone) {
    position: relative;
    z-index: 10000 !important;
    overflow: visible !important;
}

.kbt-contact-input:has(#phone) .iti {
    width: 100%;
    overflow: visible !important;
}

/* Dropdown main container */
.iti__dropdown-content {
    background: #ffffff !important;
    opacity: 1 !important;
    border: 1px solid #e8eaf0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-top: 8px !important;
    box-shadow: 0 15px 40px rgba(16, 47, 99, 0.14) !important;
    z-index: 999999 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Search input */
.iti__search-input {
    width: calc(100% - 20px) !important;
    margin: 10px !important;
    padding: 11px 13px !important;
    height: 40px !important;
    border: 1px solid #e5e9ef !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #102f63 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    outline: none !important;
    box-shadow: none !important;
}

.iti__search-input:focus {
    background: #ffffff !important;
    border-color: #d5a84a !important;
}

/* Country list */
.iti__country-list {
    background: #ffffff !important;
    opacity: 1 !important;
    color: #263238 !important;
    border: none !important;
    max-height: 230px !important;
    padding: 5px 0 !important;
    scrollbar-width: thin;
    scrollbar-color: #d5a84a #f3f5f8;
}

/* Individual country */
.iti__country {
    background: #ffffff !important;
    color: #263238 !important;
    padding: 11px 14px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Country hover */
.iti__country:hover,
.iti__country.iti__highlight {
    background: #f4f8fc !important;
    color: #164a9c !important;
}

/* Dial code */
.iti__dial-code {
    color: #8a94a3 !important;
    font-size: 12px !important;
    margin-left: 4px !important;
}

/* Selected country */
.iti__country.iti__active {
    background: #fff8ec !important;
}

/* Flag spacing */
.iti__flag {
    margin-right: 9px !important;
}

/* Premium scrollbar */
.iti__country-list::-webkit-scrollbar {
    width: 5px;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: #d5a84a;
    border-radius: 10px;
}

.iti__country-list::-webkit-scrollbar-track {
    background: #f3f5f8;
}

/* ============================================================
   KODAI BOOK MY TAXI
   PREMIUM TOUR EXPERIENCES
   UNIQUE PREFIX: kbt-experience-
   Reference-inspired itinerary layout
============================================================ */


/* ============================================================
   ROOT VARIABLES
============================================================ */

:root {
    --kbt-exp-primary: #153a65;
    --kbt-exp-primary-light: #153a65;
    --kbt-exp-navy: #0b2342;

    --kbt-exp-gold: #d59a2a;
    --kbt-exp-gold-light: #e8b64f;

    --kbt-exp-white: #ffffff;
    --kbt-exp-cream: #fbf8f1;
    --kbt-exp-soft: #f5f7fa;

    --kbt-exp-text: #182334;
    --kbt-exp-muted: #566274;

    --kbt-exp-border: rgba(11, 35, 66, 0.1);

    --kbt-exp-shadow: 0 18px 50px rgba(11, 35, 66, 0.11);
}



/* ============================================================
   MAIN SECTION
============================================================ */

.kbt-experience-section {
    position: relative;
    width: 100%;
    padding: 0 0 95px;
    margin: 0;
    background: var(--kbt-exp-soft);
    overflow: hidden;
    isolation: isolate;
    font-family: "Montserrat", Arial, sans-serif;
}

.kbt-experience-section *,
.kbt-experience-modal * {
    box-sizing: border-box;
}


/* ============================================================
   PREMIUM BANNER
============================================================ */

.kbt-experience-banner {
    position: relative;
    width: 100%;
    min-height: 355px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 75px 25px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    overflow: hidden;
}

.kbt-experience-banner-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(10, 29, 60, 0.90),
            rgba(16, 47, 99, 0.73),
            rgba(10, 29, 60, 0.90)
        );
    z-index: 1;
}

.kbt-experience-banner::before {
    content: "";
    position: absolute;
    inset: 17px;
    border: 1px solid rgba(213, 168, 74, 0.55);
    z-index: 2;
    pointer-events: none;
}

.kbt-experience-banner::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -130px;
    bottom: -190px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}

.kbt-experience-banner-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

.kbt-experience-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--kbt-exp-gold-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 1.6;
    text-transform: uppercase;
}

.kbt-experience-banner-content h2 {
    margin: 0 0 17px;
    color: var(--kbt-exp-white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 5vw, 59px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.5px;
}

.kbt-experience-banner-content h2 span {
    color: var(--kbt-exp-gold-light);
}

.kbt-experience-banner-content p {
    max-width: 680px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
}

.kbt-experience-banner-line {
    width: 65px;
    height: 3px;
    margin: 25px auto 0;
    background: var(--kbt-exp-gold);
    border-radius: 10px;
}


/* ============================================================
   MAIN CONTAINER
============================================================ */

.kbt-experience-container {
    width: min(1380px, calc(100% - 60px));
    margin: 0 auto;
}


/* ============================================================
   INTRODUCTION
============================================================ */

.kbt-experience-intro {
    max-width: 760px;
    margin: 65px auto 38px;
    text-align: center;
}

.kbt-experience-label {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--kbt-exp-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.kbt-experience-intro h3 {
    margin: 0 0 13px;
    color: var(--kbt-exp-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(29px, 3vw, 39px);
    font-weight: 700;
    line-height: 1.25;
}

.kbt-experience-intro p {
    margin: 0;
    color: var(--kbt-exp-muted);
    font-size: 13px;
    line-height: 1.9;
}


/* ============================================================
   TOUR GRID
============================================================ */

.kbt-experience-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}


/* ============================================================
   TOUR CARD
============================================================ */

.kbt-experience-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--kbt-exp-white);
    border: 1px solid rgba(16, 47, 99, 0.08);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--kbt-exp-shadow);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.kbt-experience-card:hover {
    transform: translateY(-8px);
    border-color: rgba(213, 168, 74, 0.7);
    box-shadow: 0 22px 48px rgba(16, 47, 99, 0.16);
}


/* ============================================================
   CARD IMAGE
============================================================ */

.kbt-experience-card-image {
    position: relative;
    width: 100%;
    height: 195px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--kbt-exp-navy);
}

.kbt-experience-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.65s cubic-bezier(.2, .7, .3, 1);
}

.kbt-experience-card:hover .kbt-experience-card-image img {
    transform: scale(1.08);
}

.kbt-experience-card-number {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 50%;
    background: rgba(16, 47, 99, .82);
    color: var(--kbt-exp-white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
}

.kbt-experience-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10, 30, 62, 0.36),
        transparent 60%
    );
    pointer-events: none;
}


/* ============================================================
   CARD CONTENT
============================================================ */

.kbt-experience-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 21px 17px 18px;
}

.kbt-experience-card-content h4 {
    width: 100%;
    margin: 0 0 9px;
    color: var(--kbt-exp-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.kbt-experience-card-content p {
    min-height: 48px;
    margin: 0;
    color: var(--kbt-exp-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.8;
}

.kbt-experience-card-divider {
    width: 100%;
    height: 1px;
    margin: 17px 0;
    background: var(--kbt-exp-border);
}


/* ============================================================
   VIEW ITINERARY BUTTON
============================================================ */

.kbt-experience-view-button {
    width: 100%;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 8px 15px;
    border: 1px solid var(--kbt-exp-navy);
    border-radius: 30px;
    background: var(--kbt-exp-navy);
    color: var(--kbt-exp-white);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s ease;
}

.kbt-experience-view-button:hover {
    border-color: var(--kbt-exp-gold);
    background: var(--kbt-exp-gold);
    color: var(--kbt-exp-navy);
}

.kbt-experience-button-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: inherit;
    transition: transform .3s ease, background .3s ease;
}

.kbt-experience-button-icon i {
    font-size: 19px;
    line-height: 1;
}

.kbt-experience-view-button:hover .kbt-experience-button-icon {
    background: rgba(16, 47, 99, .10);
    transform: translateX(3px);
}

.kbt-experience-view-button:focus-visible {
    outline: 3px solid rgba(213, 168, 74, .55);
    outline-offset: 4px;
}


/* ============================================================
   MODAL BACKDROP
============================================================ */

.kbt-experience-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px;
    background: rgba(17, 25, 20, .66);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.kbt-experience-modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ============================================================
   MODAL DIALOG
============================================================ */

.kbt-experience-modal-dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 11px;
    background: var(--kbt-exp-cream);
    box-shadow: 0 25px 85px rgba(0, 0, 0, .35);
    transform: translateY(20px) scale(.985);
    transition: transform .35s ease;
}

.kbt-experience-modal.is-visible .kbt-experience-modal-dialog {
    transform: translateY(0) scale(1);
}


/* ============================================================
   MODAL CLOSE BUTTON
============================================================ */

.kbt-experience-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;
    background: rgba(16, 47, 99, .88);
    color: var(--kbt-exp-white);
    font-family: Arial, sans-serif;
    font-size: 27px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: .3s ease;
}

.kbt-experience-modal-close:hover {
    background: var(--kbt-exp-gold);
    color: var(--kbt-exp-navy);
    transform: rotate(90deg);
}


/* ============================================================
   MODAL IMAGE
============================================================ */

.kbt-experience-modal-image {
    position: relative;
    width: 100%;
    height: 395px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--kbt-exp-navy);
}

.kbt-experience-modal-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* ============================================================
   MODAL SCROLL AREA
============================================================ */

.kbt-experience-modal-scroll {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--kbt-exp-primary) #e7e2d7;
}

.kbt-experience-modal-scroll::-webkit-scrollbar {
    width: 8px;
}

.kbt-experience-modal-scroll::-webkit-scrollbar-track {
    background: #e7e2d7;
}

.kbt-experience-modal-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--kbt-exp-primary);
}


/* ============================================================
   MODAL CONTENT
============================================================ */

.kbt-experience-modal-content {
    padding: 34px 36px 27px;
    background: var(--kbt-exp-cream);
}

.kbt-experience-modal-meta {
    margin: 0 0 10px;
    color: #68715C;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

.kbt-experience-modal-content h2 {
    margin: 0 0 10px;
    color: var(--kbt-exp-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}

.kbt-experience-modal-description {
    margin: 0 0 22px;
    color: #52605A;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.85;
}


/* ============================================================
   DYNAMIC ITINERARY LIST
============================================================ */

.kbt-experience-itinerary-list {
    width: 100%;
    margin: 0;
    padding: 0;
}

.kbt-experience-itinerary-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(16, 47, 99, .14);
}

.kbt-experience-itinerary-item:first-child {
    border-top: 1px solid rgba(16, 47, 99, .14);
}

.kbt-experience-itinerary-number {
    color: #A16B37;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.65;
}

.kbt-experience-itinerary-place {
    color: #263238;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.75;
}


/* ============================================================
   MODAL FOOTER
============================================================ */

.kbt-experience-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 6px;
    padding-top: 21px;
    border-top: 1px solid rgba(16, 47, 99, .14);
}

.kbt-experience-modal-footer-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kbt-experience-modal-footer-info span {
    color: #68715C;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.kbt-experience-modal-footer-info strong {
    color: var(--kbt-exp-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 700;
}

.kbt-experience-modal-footer-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 1px solid var(--kbt-exp-navy);
    border-radius: 30px;
    background: var(--kbt-exp-navy);
    color: var(--kbt-exp-white);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
}

.kbt-experience-modal-footer-button:hover {
    border-color: var(--kbt-exp-gold);
    background: var(--kbt-exp-gold);
    color: var(--kbt-exp-navy);
}


/* ============================================================
   LARGE TABLET
============================================================ */

@media (max-width: 1200px) {

    .kbt-experience-container {
        width: calc(100% - 45px);
    }

    .kbt-experience-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }

    .kbt-experience-card-image {
        height: 220px;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 768px) {

    .kbt-experience-section {
        padding-bottom: 70px;
    }

    .kbt-experience-banner {
        min-height: 300px;
        padding: 65px 25px;
    }

    .kbt-experience-banner::before {
        inset: 12px;
    }

    .kbt-experience-banner-content h2 {
        font-size: 39px;
    }

    .kbt-experience-banner-content p {
        font-size: 13px;
    }

    .kbt-experience-container {
        width: calc(100% - 36px);
    }

    .kbt-experience-intro {
        margin: 48px auto 30px;
    }

    .kbt-experience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .kbt-experience-card-image {
        height: 200px;
    }

    .kbt-experience-card-content {
        padding: 18px 14px 15px;
    }

    .kbt-experience-card-content h4 {
        font-size: 20px;
    }

    .kbt-experience-modal-image {
        height: 300px;
    }

    .kbt-experience-modal-content {
        padding: 27px 25px 24px;
    }

    .kbt-experience-modal-content h2 {
        font-size: 30px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

    .kbt-experience-banner {
        min-height: 260px;
        padding: 55px 20px;
    }

    .kbt-experience-eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
        margin-bottom: 13px;
    }

    .kbt-experience-banner-content h2 {
        font-size: 32px;
    }

    .kbt-experience-banner-content p {
        font-size: 12px;
        line-height: 1.8;
    }

    .kbt-experience-container {
        width: calc(100% - 28px);
    }

    .kbt-experience-intro {
        margin: 38px auto 25px;
    }

    .kbt-experience-intro h3 {
        font-size: 29px;
    }

    .kbt-experience-intro p {
        font-size: 12px;
    }

    .kbt-experience-grid {
        gap: 13px;
    }

    .kbt-experience-card {
        border-radius: 8px;
    }

    .kbt-experience-card-image {
        height: 155px;
    }

    .kbt-experience-card-number {
        top: 9px;
        left: 9px;
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .kbt-experience-card-content {
        padding: 14px 10px 12px;
    }

    .kbt-experience-card-content h4 {
        font-size: 17px;
        margin-bottom: 7px;
    }

    .kbt-experience-card-content p {
        min-height: 53px;
        font-size: 10px;
        line-height: 1.65;
    }

    .kbt-experience-card-divider {
        margin: 12px 0;
    }

    .kbt-experience-view-button {
        min-height: 40px;
        padding: 6px 7px 6px 10px;
        font-size: 9px;
        letter-spacing: .2px;
    }

    .kbt-experience-button-icon {
        width: 25px;
        height: 25px;
    }

    /* Modal */

    .kbt-experience-modal {
        padding: 9px;
    }

    .kbt-experience-modal-dialog {
        width: 100%;
        max-height: 94vh;
        border-radius: 9px;
    }

    .kbt-experience-modal-image {
        height: 235px;
    }

    .kbt-experience-modal-close {
        top: 9px;
        right: 9px;
        width: 35px;
        height: 35px;
        font-size: 24px;
    }

    .kbt-experience-modal-content {
        padding: 23px 18px 20px;
    }

    .kbt-experience-modal-meta {
        font-size: 11px;
    }

    .kbt-experience-modal-content h2 {
        font-size: 27px;
    }

    .kbt-experience-modal-description {
        font-size: 12px;
        line-height: 1.8;
        margin-bottom: 17px;
    }

    .kbt-experience-itinerary-item {
        grid-template-columns: 65px minmax(0, 1fr);
        gap: 8px;
        padding: 14px 0;
    }

    .kbt-experience-itinerary-number {
        font-size: 14px;
    }

    .kbt-experience-itinerary-place {
        font-size: 12px;
        line-height: 1.7;
    }

    .kbt-experience-modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding-top: 18px;
    }

    .kbt-experience-modal-footer-info strong {
        font-size: 20px;
    }

    .kbt-experience-modal-footer-button {
        width: 100%;
        min-height: 44px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    .kbt-experience-banner-content h2 {
        font-size: 28px;
    }

    .kbt-experience-grid {
        gap: 10px;
    }

    .kbt-experience-card-image {
        height: 125px;
    }

    .kbt-experience-card-content {
        padding: 12px 8px 10px;
    }

    .kbt-experience-card-content h4 {
        font-size: 15px;
    }

    .kbt-experience-card-content p {
        font-size: 9px;
        min-height: 55px;
    }

    .kbt-experience-view-button {
        font-size: 8px;
        padding-left: 7px;
    }

    .kbt-experience-modal-image {
        height: 195px;
    }

    .kbt-experience-modal-content {
        padding: 20px 15px;
    }

    .kbt-experience-modal-content h2 {
        font-size: 24px;
    }

}


/* ============================================================
   ACCESSIBILITY & REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .kbt-experience-card,
    .kbt-experience-card-image img,
    .kbt-experience-view-button,
    .kbt-experience-modal,
    .kbt-experience-modal-dialog,
    .kbt-experience-modal-close,
    .kbt-experience-modal-footer-button {
        transition: none !important;
    }

}

/* ==================================================
   TOUR INTRO - POPULAR PLACES DESIGN
   Paste this CSS at the END of your stylesheet
================================================== */

.kbt-experience-section .kbt-experience-intro {
    width: 100%;
    max-width: 100%;
    margin: 0 0 38px;
    padding: 0;
    text-align: left;
}

.kbt-experience-section .kbt-experience-label {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 9px;
    color: #b97812;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
    line-height: 1.5;
    text-transform: uppercase;
}

.kbt-experience-section .kbt-experience-label::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 2px;
    flex: 0 0 25px;
    background: #d59a2a;
}

.kbt-experience-section .kbt-experience-intro h3 {
    margin: 0 0 13px;
    padding: 0;
    color: #0b2342;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 3.5vw, 39px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-align: left;
}

.kbt-experience-section .kbt-experience-intro p {
    margin: 0;
    padding: 0;
    color: #566274;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    text-align: left;
}

/* TABLET */

@media (max-width: 768px) {

    .kbt-experience-section .kbt-experience-intro {
        margin-bottom: 30px;
    }

}

/* MOBILE */

@media (max-width: 600px) {

    .kbt-experience-section .kbt-experience-intro {
        margin-bottom: 25px;
    }

    .kbt-experience-section .kbt-experience-label {
        gap: 9px;
        margin-bottom: 8px;
        font-size: 10px;
        letter-spacing: 2px;
    }

    .kbt-experience-section .kbt-experience-label::before {
        width: 21px;
        flex-basis: 21px;
    }

    .kbt-experience-section .kbt-experience-intro h3 {
        margin-bottom: 10px;
        font-size: 29px;
        line-height: 1.25;
    }

    .kbt-experience-section .kbt-experience-intro p {
        font-size: 12px;
        line-height: 1.75;
    }

}

/* TOUR CARD DESCRIPTION - IMPORTANT */

.kbt-experience-section .kbt-experience-card-content p {
    font-size: 13px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    color: #566274 !important;
}

/* TABLET */
@media (max-width: 768px) {
    .kbt-experience-section .kbt-experience-card-content p {
        font-size: 12px !important;
        line-height: 1.75 !important;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .kbt-experience-section .kbt-experience-card-content p {
        font-size: 11px !important;
        line-height: 1.7 !important;
    }
}
/* =========================================================
   CONTACT TITLE - FINAL OVERRIDE
========================================================= */

.kbt-contact-title {
    margin: 0 !important;
    color: var(--kbt-navy) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

.kbt-contact-title strong {
    color: var(--kbt-gold) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: inherit !important;
    font-weight: 700 !important;
}
/* =========================================================
   SEND ENQUIRY TITLE
========================================================= */
.kbt-contact-form-title {
    margin: 0 !important;
    color: var(--kbt-navy) !important;
    font-family: 42px !important;
    font-size: clamp(35px, 4vw, 57px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
     margin-bottom: 22px !important;
}

.kbt-contact-form-title strong {
    color: var(--kbt-gold) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: inherit !important;
    font-weight: 700 !important;
}
/* =========================================================
   CONTACT INFO — FINAL SPACING & TEXT SIZE
========================================================= */

.kbt-contact-title {
    margin-bottom: 38px !important;
}

.kbt-contact-detail-text {
    font-size: 15px !important;
    line-height: 1.45 !important;
}

.kbt-contact-detail-text strong {
    font-size: 15px !important;
}

.kbt-contact-details {
    gap: 18px !important;
}


/* Address text */
.kbt-contact-detail:first-child .kbt-contact-detail-text {
    max-width: 390px;
}


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

    .kbt-contact-title {
        margin-bottom: 34px !important;
    }

    .kbt-contact-detail-text,
    .kbt-contact-detail-text strong {
        font-size: 13px !important;
    }

    .kbt-contact-details {
        gap: 15px !important;
    }

}
/* ============================================================
   KBT PREMIUM TOUR SHOWCASE
   TOTAL CARD HEIGHT: 375PX
============================================================ */

.kbt-tour-showcase {
    width: 100%;
    padding: 58px 0 38px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 10%,
            rgba(213, 154, 42, 0.06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fc 100%
        );
}


/* ============================================================
   CONTAINER
============================================================ */

.kbt-tour-showcase-container {
    width: min(calc(100% - 48px), 1700px);
    margin: 0 auto;
}


/* ============================================================
   SECTION INTRO
============================================================ */

.kbt-tour-showcase-intro {
    margin-bottom: 28px;
}

.kbt-tour-showcase-label {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 9px;

    color: #c58a13;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 1;
    text-transform: uppercase;
}

.kbt-tour-showcase-label span {
    width: 30px;
    height: 2px;

    display: block;

    border-radius: 20px;

    background: #d59a2a;
}

.kbt-tour-showcase-intro h2 {
    margin: 0;

    color: #0b2342;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
}

.kbt-tour-showcase-intro h2 span {
    color: #d59a2a;
}

.kbt-tour-showcase-intro p {
    max-width: 850px;

    margin: 14px 0 0;

    color: #53657d;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
}


/* ============================================================
   TOUR GRID
============================================================ */

.kbt-tour-showcase-grid {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 325px));

    justify-content: center;

    gap: 18px;

    align-items: stretch;
}


/* ============================================================
   CARD
   EXACT TOTAL HEIGHT = 375PX
============================================================ */

.kbt-tour-showcase-card {
    position: relative;

    width: 100%;
    height: 375px;
    min-height: 375px;
    max-height: 375px;

    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(11, 35, 66, 0.08);
    border-radius: 23px;

    background: #ffffff;

    box-shadow:
        0 12px 30px rgba(11, 35, 66, 0.08);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.kbt-tour-showcase-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 40px rgba(11, 35, 66, 0.14);
}


/* ============================================================
   IMAGE
============================================================ */

.kbt-tour-showcase-image {
    position: relative;

    width: 100%;
    height: 205px;
    min-height: 205px;

    flex-shrink: 0;

    overflow: visible;

    background: #dfe9f4;
}

.kbt-tour-showcase-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 23px 23px 0 0;

    transition:
        transform .7s cubic-bezier(.2,.7,.3,1);
}

.kbt-tour-showcase-card:hover
.kbt-tour-showcase-image img {
    transform: scale(1.045);
}


/* ============================================================
   CURVED WHITE IMAGE BOTTOM
============================================================ */

.kbt-tour-showcase-image::after {
    content: "";

    position: absolute;

    left: -8%;
    bottom: -32px;

    width: 116%;
    height: 70px;

    background: #ffffff;

    border-radius:
        50% 50% 0 0 /
        100% 100% 0 0;

    z-index: 2;

    pointer-events: none;
}


/* ============================================================
   NUMBER
============================================================ */

.kbt-tour-showcase-number {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 6;

    width: 51px;
    height: 51px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.97);

    color: #d59a2a;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;

    box-shadow:
        0 7px 18px rgba(11,35,66,.10);
}


/* ============================================================
   TOUR ICON
============================================================ */

.kbt-tour-showcase-icon {
    position: absolute;

    right: 14px;
    bottom: -23px;

    z-index: 8;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #d59a2a;

    box-shadow:
        0 8px 22px rgba(11,35,66,.13);

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.kbt-tour-showcase-icon i {
    font-size: 26px;
}

.kbt-tour-showcase-card:hover
.kbt-tour-showcase-icon {
    transform: translateY(-3px);

    background: #d59a2a;
    color: #ffffff;
}


/* ============================================================
   CONTENT
============================================================ */

.kbt-tour-showcase-content {
    position: relative;

    z-index: 5;

    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 25px 17px 12px;

    background: #ffffff;

    text-align: center;
}

.kbt-tour-showcase-content h4 {
    width: 100%;

    margin: 0 0 6px;

    color: #0b2342;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
}

.kbt-tour-showcase-content p {
    width: 100%;

    min-height: 34px;

    margin: 0;

    color: #596b82;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}


/* ============================================================
   GOLD DIVIDER
============================================================ */

.kbt-tour-showcase-line {
    width: 60px;
    height: 1px;

    flex-shrink: 0;

    margin: 10px auto 10px;

    background: #d59a2a;
}


/* ============================================================
   VIEW ITINERARY BUTTON
============================================================ */

.kbt-tour-showcase-button {
    width: 100%;
    min-height: 38px;
    height: 38px;

    margin-top: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 4px 6px 4px 14px;

    border: 1px solid #d59a2a;
    border-radius: 999px;

    background: #ffffff;
    color: #0b2342;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.kbt-tour-showcase-button:hover {
    background: #0b2342;
    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(11,35,66,.15);
}


/* ============================================================
   BUTTON ARROW
============================================================ */

.kbt-tour-showcase-arrow {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #d59a2a;
    color: #ffffff;

    transition:
        transform .3s ease,
        background .3s ease;
}

.kbt-tour-showcase-arrow i {
    font-size: 18px;
    line-height: 1;
}

.kbt-tour-showcase-button:hover
.kbt-tour-showcase-arrow {
    transform: translateX(3px);

    background: #ffffff;
    color: #d59a2a;
}


/* ============================================================
   FOOTER
============================================================ */

.kbt-tour-showcase-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    margin-top: 27px;
}

.kbt-tour-showcase-footer span {
    width: 45px;
    height: 1px;

    background: rgba(11,35,66,.35);
}

.kbt-tour-showcase-footer i {
    color: #d59a2a;
    font-size: 21px;
}

.kbt-tour-showcase-footer strong {
    color: #68778b;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* ============================================================
   LARGE SCREEN
============================================================ */

@media (max-width: 1740px) {

    .kbt-tour-showcase-container {
        width: calc(100% - 50px);
    }

    .kbt-tour-showcase-grid {
        gap: 15px;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1450px) {

    .kbt-tour-showcase-container {
        width: calc(100% - 40px);
    }

    .kbt-tour-showcase-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
    }

    .kbt-tour-showcase-card {
        height: 375px;
        min-height: 375px;
        max-height: 375px;
    }

    .kbt-tour-showcase-image {
        height: 202px;
        min-height: 202px;
    }

    .kbt-tour-showcase-content {
        padding-left: 13px;
        padding-right: 13px;
    }

    .kbt-tour-showcase-content h4 {
        font-size: 19px;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

    .kbt-tour-showcase {
        padding: 50px 0 35px;
    }

    .kbt-tour-showcase-container {
        width: calc(100% - 34px);
    }

    .kbt-tour-showcase-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .kbt-tour-showcase-card {
        height: 375px;
        min-height: 375px;
        max-height: 375px;
    }

    .kbt-tour-showcase-image {
        height: 205px;
        min-height: 205px;
    }

}


/* ============================================================
   SMALL TABLET
============================================================ */

@media (max-width: 768px) {

    .kbt-tour-showcase {
        padding: 45px 0 32px;
    }

    .kbt-tour-showcase-container {
        width: calc(100% - 28px);
    }

    .kbt-tour-showcase-intro {
        margin-bottom: 24px;
    }

    .kbt-tour-showcase-label {
        font-size: 10px;
        letter-spacing: 2.2px;
    }

    .kbt-tour-showcase-label span {
        width: 30px;
        height: 2px;
    }

    .kbt-tour-showcase-intro h2 {
        font-size: 32px !important;
        letter-spacing: -0.01em !important;
    }

    .kbt-tour-showcase-intro p {
        font-size: 11px;
    }

    .kbt-tour-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .kbt-tour-showcase-card {
        height: 375px;
        min-height: 375px;
        max-height: 375px;

        border-radius: 19px;
    }

    .kbt-tour-showcase-image {
        height: 205px;
        min-height: 205px;
    }

    .kbt-tour-showcase-image img {
        border-radius: 19px 19px 0 0;
    }

    .kbt-tour-showcase-number {
        width: 47px;
        height: 47px;

        top: 10px;
        left: 10px;

        font-size: 18px;
    }

    .kbt-tour-showcase-icon {
        width: 53px;
        height: 53px;

        right: 10px;
        bottom: -21px;
    }

    .kbt-tour-showcase-icon i {
        font-size: 23px;
    }

    .kbt-tour-showcase-content {
        padding: 24px 11px 10px;
    }

    .kbt-tour-showcase-content h4 {
        font-size: 18px;
    }

    .kbt-tour-showcase-content p {
        min-height: 34px;
        font-size: 9px;
    }

    .kbt-tour-showcase-line {
        width: 52px;
        margin: 9px auto;
    }

    .kbt-tour-showcase-button {
        min-height: 36px;
        height: 36px;

        padding-left: 10px;

        font-size: 8px;
    }

    .kbt-tour-showcase-arrow {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 560px) {

    .kbt-tour-showcase {
        padding: 40px 0 28px;
    }

    .kbt-tour-showcase-container {
        width: calc(100% - 22px);
    }

    .kbt-tour-showcase-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .kbt-tour-showcase-card {
        width: 100%;
        max-width: 375px;

        height: 375px;
        min-height: 375px;
        max-height: 375px;

        margin: 0 auto;
    }

    .kbt-tour-showcase-image {
        height: 205px;
        min-height: 205px;
    }

    .kbt-tour-showcase-number {
        width: 50px;
        height: 50px;

        font-size: 19px;
    }

    .kbt-tour-showcase-icon {
        width: 57px;
        height: 57px;

        right: 13px;
        bottom: -23px;
    }

    .kbt-tour-showcase-icon i {
        font-size: 25px;
    }

    .kbt-tour-showcase-content {
        padding: 26px 16px 11px;
    }

    .kbt-tour-showcase-content h4 {
        font-size: 21px;
    }

    .kbt-tour-showcase-content p {
        font-size: 10px;
        line-height: 1.55;
    }

    .kbt-tour-showcase-button {
        min-height: 38px;
        height: 38px;

        font-size: 8.5px;
    }

    .kbt-tour-showcase-arrow {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    .kbt-tour-showcase-container {
        width: calc(100% - 18px);
    }

    .kbt-tour-showcase-card {
        height: 375px;
        min-height: 375px;
        max-height: 375px;
    }

    .kbt-tour-showcase-image {
        height: 202px;
        min-height: 202px;
    }

    .kbt-tour-showcase-content {
        padding-left: 13px;
        padding-right: 13px;
    }

    .kbt-tour-showcase-content h4 {
        font-size: 20px;
    }

}


/* ============================================================
   EXTRA SMALL
============================================================ */

@media (max-width: 320px) {

    .kbt-tour-showcase-card {
        height: 375px;
        min-height: 375px;
        max-height: 375px;
    }

    .kbt-tour-showcase-image {
        height: 195px;
        min-height: 195px;
    }

    .kbt-tour-showcase-number {
        width: 46px;
        height: 46px;

        font-size: 17px;
    }

    .kbt-tour-showcase-icon {
        width: 53px;
        height: 53px;
    }

    .kbt-tour-showcase-content h4 {
        font-size: 19px;
    }

    .kbt-tour-showcase-content p {
        font-size: 9px;
    }

}
/* FAQ - SAME SECTION EYEBROW LINE */

.kbt-faq-intro .kbt-section-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.kbt-faq-intro .kbt-section-eyebrow::before {
    content: "" !important;

    width: 25px !important;
    height: 2px !important;

    flex-shrink: 0;

    border-radius: 10px !important;

    background: linear-gradient(
        90deg,
        var(--kbt-gold),
        var(--kbt-gold-light)
    ) !important;
}
/* FAQ IMAGE - REMOVE BLACK BORDER */
.kbt-faq-image {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}