/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --cj-navy:    #152d72;
  --cj-green:   #6cc222;
  --cj-text:    #0f0f0f;
  --cj-body:    #2d2d2d;
  --cj-light-bg:#f5f5f5;
  --cj-white:   #ffffff;
  --cj-shadow: 0 2px 20px 0 rgb(0 0 0/12%);
  --cj-radius:  10px;
}


/* ── Shared section defaults ────────────────────────────────── */
.title-18{
  font-size: 18px;
  font-weight: 700;
  color: var(--cj-navy);
  margin-bottom: 8px;
}
.fs-16{font-size:16px;    line-height: 1.65;}
.fs-14{font-size:14px;    line-height: 1.65;}

.fs-h2 {
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 700;
  color: var(--cj-navy);
  line-height: 1.25;
  margin-bottom: 16px;
}

.text-green { color: var(--cj-green); }
.text-navy  { color: var(--cj-navy); }
.bg-green{    background: var(--cj-green)!important;}
.bg-red{    background: #f00!important;}
.boxtype1 {
  border-radius: var(--cj-radius);
  box-shadow: var(--cj-shadow);
  padding: 30px 24px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-cj-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  background: var(--cj-green);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  border: 2px solid var(--cj-green);
  transition: background .2s, transform .15s;
  white-space: nowrap;
  cursor: pointer;
}

.btn-cj-primary:hover {
  background: #5aad18;
  border-color: #5aad18;
  color: #fff;
  transform: translateY(-2px);
}

.btn-cj-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  background: transparent;
  color: var(--cj-navy);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  border: 2px solid var(--cj-navy);
  transition: background .2s, color .2s, transform .15s;
  white-space: nowrap;
  cursor: pointer;
}

.btn-cj-outline:hover {
  background: var(--cj-navy);
  color: #fff;
  transform: translateY(-2px);
}

.btn-cj-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: #fff;
  color: var(--cj-navy);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  border: 2px solid #fff;
  transition: background .2s, color .2s, transform .15s;
  white-space: nowrap;
}

.btn-cj-white:hover {
  background: var(--cj-navy);
  border-color: var(--cj-navy);
  color: #fff;
  transform: translateY(-2px);
}

.btn-cj-block {
  width: 100%;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 1 — HERO
   ═══════════════════════════════════════════════════════════════ */
.spad1{padding: 60px 0}
.hero__heading {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  color: var(--cj-navy);
  line-height: 1.2;
}

.hero__sub {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 500;
  color: var(--cj-navy);
}

/* Three service cards row */
.hero-cards {
  gap: 28px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

/* Card — title is now inside, no external wrapper needed */
.hero-card {
  border-radius: var(--cj-radius);
  box-shadow: var(--cj-shadow);
  padding: 36px 28px 32px;
  width: 200px;
  min-height: 200px;            /* equal height for all cards */
  flex-direction: column;
  gap: 18px;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  cursor: pointer;
}

.hero-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

.hero-card__icon {
  width: 72px;
  height: 72px;
  background: #f1f1f1;
  border-radius: 50%;
  flex-shrink: 0;
}

.hero__body {
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto 36px;
}

.hero__ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 2 — EXPLORE SOLUTIONS
   ═══════════════════════════════════════════════════════════════ */
.bg-white{background-color: #fff}




.explore-card {
  background: #fff;
  border-radius: var(--cj-radius);
  box-shadow: var(--cj-shadow);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform .2s, box-shadow .2s;
}

.explore-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.14);
}

.explore-card__icon {
  margin-bottom: 20px;
}

.explore-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--cj-navy);
  margin-bottom: 4px;
}

.explore-card__subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--cj-green);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.explore-card__body {
  font-size: 14px;
  color: var(--cj-body);
  line-height: 1.7;
  margin-bottom: 20px;
}

.explore-card__benefits-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cj-navy);
  margin-bottom: 10px;
}

.explore-card__benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.explore-card__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--cj-body);
  line-height: 1.5;
}

.explore-card__benefits li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Push CTA to bottom */
.explore-card__cta {
  margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — HOW IT WORKS
   ═══════════════════════════════════════════════════════════════ */


.step-card {
  position: relative;
}

/* Connector arrow between step cards */
.steps .col-lg-3.col-md-6:not(:last-child) .step-card::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -14px;
  width: 14px;
  height: 14px;
  border-top: 3px solid var(--cj-green);
  border-right: 3px solid var(--cj-green);
  transform: translate(0px, -50%) rotate(45deg);
  z-index: 1;
}

.step-card__num {
  width: 40px;
  height: 40px;
	min-width: 40px;
  background: var(--cj-navy);
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.step-card__icon {
  margin-bottom: 16px;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 4 — WHY CHOOSE CJ
   ═══════════════════════════════════════════════════════════════ */
.why {
 background: var(--cj-navy);
}

.why__sub {
  font-weight: 600;
  color: var(--cj-green);
  font-style: italic;
}

.why-item {
  text-align: center;
  padding: 28px 20px;
  border-radius: var(--cj-radius);
  background: rgba(255,255,255,0.06);
  transition: background .2s;
}

.why-item:hover {
  background: rgba(255,255,255,0.11);
}

.why-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(108,194,34,0.18);
  border-radius: 50%;
  margin: 0 auto 18px;
}


.why-item__desc {
  color: rgba(255,255,255,0.78);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 5 — TAKE CONTROL
   ═══════════════════════════════════════════════════════════════ */


.control-card {
  border-radius: var(--cj-radius);
  box-shadow: var(--cj-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}

.control-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.14);
}

.control-card__header {
  height: 80px; 
}

.control-card__header--navy { background: var(--cj-navy); }
.control-card__header--green { background: var(--cj-green); }

.control-card__body {
  padding: 24px 28px 28px;
  background: #fff;
  flex: 1;
}




/* ═══════════════════════════════════════════════════════════════
   SECTION 6 — TRUST
   ═══════════════════════════════════════════════════════════════ */

.trust__intro p { max-width: 640px;}

.trust-item__num {
  font-size: 48px;
  font-weight: 700;
  color: var(--cj-green);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 7 — FINAL CTA
   ═══════════════════════════════════════════════════════════════ */
.final-cta {border-top: 1px solid #e8e8e8;}

.final-cta__body {max-width: 580px;}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .fs-section,
  .hero,
  .explore,
  .steps,
  .why,
  .control,
  .trust,
  .final-cta {
    padding: 52px 0;
  }

  .explore-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }

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

  .step-card:nth-child(2)::after { display: none; }

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

  .trust-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .hero-cards {
    gap: 16px;
  }

  .hero-card {
    width: calc(50% - 8px);   /* 2 per row on small screens */
    min-width: 130px;
    max-width: 180px;
    min-height: 170px;
    padding: 24px 16px 20px;
  }

  .hero-card__icon {
    width: 58px;
    height: 58px;
  }

  .hero-card__title {
    font-size: 13px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .step-card::after { display: none; }

  .why-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 0 auto;
  }

  .control-grid {
    grid-template-columns: 1fr;
  }

  .hero__ctas {
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 575px) {
	.hero-cards {
        gap: 12px;
    }
	    .hero-card {
        width: calc(50% - 6px);
        min-width: 100px;
        max-width: 111px;
        min-height: 130px;
        padding: 20px 16px 20px;
			gap: 10px;
    }
	.hero-card .title-18.fs-16 {
    font-size: 14px;
    line-height: 1.5;margin-bottom:0
}
	
}
	
@media (max-width: 380px) {
	    .hero-card {
        max-width: 105px;
        padding: 20px 10px 20px;
    }
	  
}


/* ═══════════════════════════════════════════════════════════════
 * DEBT RELIEF
   SECTION 1 — HERO
   ═══════════════════════════════════════════════════════════════ */
.dr-hero {
  background: var(--cj-navy);
}
.dr-hero__breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-bottom: 16px;
}
.dr-hero__breadcrumb a { color: var(--cj-green); text-decoration: none; }
.dr-hero__breadcrumb a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — SEE IF YOU QUALIFY (expandable)
   ═══════════════════════════════════════════════════════════════ */
/* Checklist (green ticks) */
.dr-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dr-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--cj-body);
  line-height: 1.6;
}
.dr-checklist li::before {
  content: '✓';
  display: inline-block;
  min-width: 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cj-green);
  line-height: 1.6;
}

/* Bullet list */
.dr-bullets {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 20px;
}
.dr-bullets li {
  font-size: 15px;
  color: var(--cj-body);
  line-height: 1.75;
  margin-bottom: 8px;
}

.dr-qualify {
  background: var(--cj-light-bg);
  padding: 56px 0;
  display: none;
}
.dr-qualify.is-open { display: block; }


/* Qualification form */



.qualify-q__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cj-navy);
  margin-bottom: 10px;
  display: block;
}
.qualify-form .wpcf7-radio .wpcf7-list-item {
	 font-size: 14px;display:block; margin:0 0 5px
}
.qualify-form .wpcf7-radio .wpcf7-list-item label  {
  display: flex;
  align-items: center;
	gap: 8px;
}
.qualify-form .wpcf7-radio.options--row .wpcf7-list-item{
    display: inline-block;
    margin: 0 20px 0 0;
}

.qualify-form input[type="radio"] {
  cursor: pointer;
}
.qualify-form select,.qualify-form  input[type="tel"],.qualify-form  input[type="number"],.qualify-form  input[type="text"],.qualify-form  input[type="email"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--cj-navy);
  background: #fff;
  outline: none;
  transition: border-color .2s;
  appearance: none;
}
.qualify-form select:focus,
.qualify-form input[type="tel"]:focus,.qualify-form  input[type="number"]:focus,.qualify-form  input[type="text"]:focus,.qualify-form  input[type="email"]:focus{ border-color: var(--cj-navy); }

.qualify-form__note {
  font-size: 12px;
  color: #999;
  margin-top: 14px;
  line-height: 1.5;
}
span.wpcf7-spinner {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 4 — HOW THE PROGRAM WORKS (timeline)
   ═══════════════════════════════════════════════════════════════ */

.dr-timeline {
  position: relative;
  margin-top: 36px;
  padding-left: 0;
}
.dr-timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}
.dr-step {
  display: flex;
  gap: 24px;
  margin-bottom: 36px;
  position: relative;
}
.dr-step:last-child { margin-bottom: 0; }
.dr-step__num {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: var(--cj-navy);
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.dr-program__note {
  margin-top: 36px;
  padding: 18px 22px;
  background: var(--cj-light-bg);
  border-radius: 8px;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}



/* ═══════════════════════════════════════════════════════════════
   SECTION 5 — IS THIS PROGRAM RIGHT FOR YOU? (expandable)
   ═══════════════════════════════════════════════════════════════ */
.dr-suitability {
  background: var(--cj-light-bg);
  display: none;
}
.dr-suitability.is-open { display: block; }

.suitability-table-wrap {
  overflow-x: auto;
  border-radius: var(--cj-radius);
  box-shadow: var(--cj-shadow);
  margin: 28px 0 30px;
}
.suitability-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}
.suitability-table thead tr { background: var(--cj-navy); }
.suitability-table thead th {
  padding: 16px 24px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  
}
.dr-suitability .suitability-table thead th{width: 50%;} 
.dr-suitability .suitability-table thead th:first-child {
  border-right: 1px solid rgba(255,255,255,.15);
}
.suitability-table tbody tr { border-bottom: 1px solid #eee; }
.suitability-table tbody tr:last-child { border-bottom: none; }
.suitability-table tbody tr:hover { background: #f7f9ff; }
.suitability-table td {
  padding: 16px 24px;
  font-size: 14px;
  vertical-align: top;
  line-height: 1.5;
}
.suitability-table td:first-child {
  color: var(--cj-navy);
  font-weight: 500;
/*border-right: 1px solid #eee; */
}
.suitability-table-icon td:first-child::before {
content:"\f00c";font-family:'FontAwesome';
  color: var(--cj-green);
  font-weight: 700;    margin-right: 4px;
}
.suitability-table-icon td:last-child {
  color: #c0392b;
}
.suitability-table-icon td:last-child::before {
  content:"\f00d";font-family:'FontAwesome';
  color: #c0392b;
  font-weight: 700;    margin-right: 4px;
}
.suitability-table .rate-val {
    font-weight: 700;
    color: var(--cj-green);
}




/* ═══════════════════════════════════════════════════════════════
   SECTION 6 — FINAL CTA (white)
   ═══════════════════════════════════════════════════════════════ */


.dr-final__review-title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--cj-navy);
  margin: 32px 0 14px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */


@media (max-width: 600px) {
  .dr-timeline::before { left: 20px; }
  .dr-step__num { width: 40px; height: 40px; min-width: 40px; font-size: 14px; }
  .suitability-table thead th,
  .suitability-table td { padding: 12px 16px; }
	.dr-section .dr-checklist li div strong {
    display: block;
}
}

/* ═══════════════════════════════════════════════════════════════
 * Mortgage
   SECTION 3 — TODAY'S RATES TABLE
   ═══════════════════════════════════════════════════════════════ */
/* Rates section two-column split */



.rates-table .rate-val {
  font-weight: 700;
  color: var(--cj-green);
  font-size: 15px;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 4 — WHY REFINANCE (numbered cards)
   ═══════════════════════════════════════════════════════════════ */


.why-card__num {
  font-size: 36px;
  font-weight: 700;
  color: var(--cj-green);
  opacity: .25;
  line-height: 1;
  margin-bottom: 12px;
}


.cost-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.whitebox-list li {

    background: #fff;
    border-radius: 8px;
    box-shadow: var(--cj-shadow);
    padding: 14px 16px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 9 — TIPS (icon-pill list)
   ═══════════════════════════════════════════════════════════════ */
.tips-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tips-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  color: var(--cj-body);
  line-height: 1.65;
}
.tips-list li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  background: var(--cj-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 10 — IS REFINANCING RIGHT FOR YOU
   ═══════════════════════════════════════════════════════════════ */
.not-ideal-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.not-ideal-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--cj-body);
  line-height: 1.6;
  padding: 14px 18px;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--cj-shadow);
}
.not-ideal-list li::before {
  content: '✕';
  display: inline-block;
  min-width: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #c0392b;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .cost-list { grid-template-columns: 1fr; }
  .mr-cta-list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 2 — LOAN WIDGET (CTA form)
   ═══════════════════════════════════════════════════════════════ */

.pl-widget__form {
  display: flex;
  gap: 0;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.pl-widget__form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cj-navy);
  margin-bottom: 6px;
}
.pl-widget__form-group { flex: 1; }
.pl-widget__amount-wrap {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  flex: 1;
}
.pl-widget__prefix {
  font-size: 14px;
  color: #888;
  align-self: flex-start;
}
.pl-widget__input {
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--cj-navy);
  width: 100%;
  background: transparent;
}
.pl-widget__btn {
  padding: 0 24px;
  background: var(--cj-green);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
  flex-shrink: 0;
}
.pl-widget__btn:hover { background: #5aad18; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 7 — CALCULATOR
   ═══════════════════════════════════════════════════════════════ */
.calc-suffix-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .2s;
}
.calc-suffix-wrap:focus-within { border-color: var(--cj-navy); }
.calc-suffix-wrap input {
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  flex: 1;

  -moz-appearance: textfield;
}
.calc-suffix-wrap input::-webkit-outer-spin-button,
.calc-suffix-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-suffix {
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #888;
  background: #f5f5f5;
  border-left: 1px solid #ccc;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
  white-space: nowrap;
}
.calc-radio-group {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}
.calc-radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--cj-body);
  cursor: pointer;
  margin: 0;
}
.calc-wrap {
  background: #fff;
  border-radius: 10px;
 box-shadow: var(--cj-shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 32px;
  border: 1px solid #e0e0e0;
}
.calc-right {
  padding: 36px 32px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
}

.calc-left {
  padding: 36px 32px;
  border-right: 1px solid #e8e8e8;
}
.calc-right__label {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  text-align: center;
  margin-bottom: 6px;
}
.calc-right__payment {
  font-size: 48px;
  font-weight: 700;
  color: var(--cj-navy);
  text-align: center;
  margin-bottom: 20px;
  line-height: 1;
}
.calc-divider { height: 1px; background: #e0e0e0; margin-bottom: 20px; }

.calc-chart-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}
.calc-chart { flex-shrink: 0; }
.calc-stats { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.calc-stat__label { font-size: 12px; color: #777; margin-bottom: 2px; }
.calc-stat__value { font-size: 16px; font-weight: 700; color: var(--cj-navy); }

.calc-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}
.calc-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #555;
}
.calc-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 11 — TIPS
   ═══════════════════════════════════════════════════════════════ */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 28px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 14 — FAQ ACCORDION
   ═══════════════════════════════════════════════════════════════ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.faq-item {
  background: #fff;
  border-radius: var(--cj-radius);
  box-shadow: var(--cj-shadow);
  overflow: hidden;
}
.faq-item__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--cj-navy);
  cursor: pointer;
  text-align: left;
  gap: 16px;
  transition: background .15s;
}
.faq-item__btn:hover { background: #f8f8f8; }
.faq-item__icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: var(--cj-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s;
}
.faq-item__icon svg { transition: transform .25s; }
.faq-item.open .faq-item__icon svg { transform: rotate(180deg); }
.faq-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0 24px;
}
.faq-item.open .faq-item__body {
  max-height: 300px;
  padding: 0 24px 20px;
}
.faq-item__body p { font-size: 14px; color: var(--cj-body); line-height: 1.7; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .calc-wrap          { grid-template-columns: 1fr; }
  .calc-left          { border-right: none; border-bottom: 1px solid #e8e8e8; }
  .tips-grid          { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .tips-grid    { grid-template-columns: repeat(2, 1fr); }
 /* .calc-chart-wrap { flex-direction: column; align-items: center; }*/
}
@media (max-width: 480px) {
.tips-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Travel Insurance Page — Styles
   ═══════════════════════════════════════════════════════════════ */

.ti-hero__feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.ti-hero__feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(108,194,34,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ti-hero__feature-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.ti-hero__feature-text {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  line-height: 1.55;
  margin: 0;
}


/* Right column — search card */
.ti-search-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.ti-search-card__banner {
  background: var(--cj-green);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  letter-spacing: .2px;
}
.ti-search-card__body { padding: 22px 22px 24px; }

.ti-dest-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--cj-navy);
  margin-bottom: 3px;
}
.ti-dest-sub {
  font-size: 12px;
  color: #888;
  margin-bottom: 14px;
}
.ti-dest-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ti-dest-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 70px;
  cursor: pointer;
}
.ti-dest-chip__flag {
  width: 54px;
  height: 38px;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  background: var(--bg, linear-gradient(135deg, #152d72 0%, #2a5aac 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
}
.ti-dest-chip:hover .ti-dest-chip__flag,
.ti-dest-chip.is-active .ti-dest-chip__flag {
  border-color: var(--cj-green);
}
.ti-dest-chip__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--cj-navy);
  text-align: center;
  white-space: nowrap;
}

.ti-search-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.ti-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ti-field label {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ti-field input,
.ti-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 13px;
  color: var(--cj-navy);
  background: #fff;
  outline: none;
  transition: border-color .2s;
  appearance: none;
}
.ti-field input:focus,
.ti-field select:focus { border-color: var(--cj-navy); }

.ti-view-plans-btn {
  width: 100%;
  padding: 13px;
  background: var(--cj-green);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: .5px;
  transition: background .2s;
  text-transform: uppercase;
}
.ti-view-plans-btn:hover { background: #5aad18; }

.ti-stat__num {
    font-size:clamp(22px, 4vw, 28px);
    font-weight: 700;
    color: var(--cj-green);
    line-height: 1.15;
    margin-bottom: 4px;
}



/* ═══════════════════════════════════════════════════════════════
   Activities Page — Styles
   ═══════════════════════════════════════════════════════════════ */

/* Category pills row */
.ac-hero__cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ac-hero__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
}
.ac-hero__cat:hover,
.ac-hero__cat.is-active {
  background: var(--cj-green);
  border-color: var(--cj-green);
  color: #fff;
}

.ac-search-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px 24px;
}
.ac-search-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}
.bs-search-row {
    grid-template-columns: 1fr 44px 1fr 1fr;
}
.ac-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ac-field label {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ac-field input,
.ac-field select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--cj-navy);
  background: #fff;
  outline: none;
  transition: border-color .2s;
  appearance: none;
}
.ac-field input:focus,
.ac-field select:focus { border-color: var(--cj-navy); }

.ac-search-footer {
  display: flex;
  justify-content: center;
}
.ac-search-btn {
  padding: 13px 56px;
  background: var(--cj-green);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: .5px;
  transition: background .2s;
  text-transform: uppercase;
}
.ac-search-btn:hover { background: #5aad18; }
/* Swap button */
.ac-swap-btn {
  width: 44px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.ac-swap-btn:hover { background: var(--cj-light-bg); border-color: #ccc; }
.bs-search-hint {
  font-size: 12px;
  color: #888;
  margin-bottom: 16px;
  text-align: center;
}
.bs-search-hint a { color: var(--cj-green); text-decoration: none; font-weight: 600; }
.bs-search-hint a:hover { text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════════
   SECTION 2 — ARTICLE: HOW TO MAKE YOUR TRIP MEMORABLE?
   ═══════════════════════════════════════════════════════════════ */


.ac-tip {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
  transition: box-shadow .25s, transform .2s;
}
.ac-tip:hover { box-shadow: 0 8px 32px rgba(0,0,0,.12); transform: translateY(-2px); }

/* Visual panel — fills full card height */
.ac-tip__visual {
  width: 210px;
  flex-shrink: 0;
  background: var(--bg, linear-gradient(135deg, #152d72 0%, #2a5aac 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

/* Content panel — grid layout: number | title on row 1, text spans both cols */
.ac-tip__content {
  flex: 1;
  min-width: 0;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 10px;
  align-content: center;
}
/* Number badge — column 1, row 1, vertically centred with title */
.ac-tip__num {
  grid-column: 1;
  grid-row: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cj-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
}

/* Title — column 2, row 1 */
.ac-tip__title {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--cj-navy);
  line-height: 1.4;
  margin: 0;
  align-self: center;
}

/* Body text — column 2 (indented under title), row 2+ */
.ac-tip__text {
  grid-column: 2;
  font-size: 14px;
  color: var(--cj-body);
  line-height: 1.75;
  margin: 0;
}
/* Second paragraph on tip 1 shares the same column */
.ac-tip__text + .ac-tip__text { margin-top: 6px; }

/* Closing callout */
.ac-closing {
  margin-top: 56px;
  padding: 24px 28px;
  background: var(--cj-navy);
  border-radius: 12px;
  font-size: 16px;
  color: rgba(255,255,255,.92);
  line-height: 1.7;
  font-style: italic;
  text-align: center;
}
/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .ac-search-row { grid-template-columns: 1fr 1fr; }
  .ac-tip__visual { width: 170px; }
}
@media (max-width: 600px) {
  .ac-search-row { grid-template-columns: 1fr; }
  .ac-hero__cats { gap: 6px; }
  .ac-tip { flex-direction: column; }
  .ac-tip__visual {
    width: 100%;
    height: 150px;
    min-height: unset;
  }
  .ac-tip__content {
    padding: 20px 20px;
    grid-template-columns: 32px 1fr;
    column-gap: 10px;
  }
}



/* ═══════════════════════════════════════════════════════════════
   Buses Page — Styles
   ═══════════════════════════════════════════════════════════════ */


/* Offer header bar */
.bs-offers__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.bs-offers__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--cj-navy);
  margin: 0;
}
.bs-offers__tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.bs-offers__tab {
  padding: 5px 14px;
  border-radius: 16px;
  border: 1.5px solid #ddd;
  background: transparent;
  color: #666;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.bs-offers__tab:hover { border-color: var(--cj-navy); color: var(--cj-navy); }
.bs-offers__tab.is-active {
  background: var(--cj-navy);
  border-color: var(--cj-navy);
  color: #fff;
}
.bs-offers__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bs-offers__view-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--cj-navy);
  text-decoration: none;
  white-space: nowrap;
}
.bs-offers__view-all:hover { color: var(--cj-green); }
.bs-offers__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.bs-offers__btn:hover { background: var(--cj-navy); border-color: var(--cj-navy); }
.bs-offers__btn:hover svg path { stroke: #fff; }

/* Offers slider grid — 2-row flow, horizontal scroll */
.bs-offers__slider-wrap { overflow: hidden; }
.bs-offers__grid {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 8px);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bs-offers__grid::-webkit-scrollbar { display: none; }

/* Individual offer card */
.bs-offer-card {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  scroll-snap-align: start;
  transition: box-shadow .2s;
}
.bs-offer-card:hover { box-shadow: var(--cj-shadow); }
.bs-offer-card__img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, linear-gradient(135deg, #152d72 0%, #2a5aac 100%));
}
.bs-offer-card__body {
  flex: 1;
  min-width: 0;
}
.bs-offer-card__tc {
  font-size: 10px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 3px;
}
.bs-offer-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--cj-navy);
  line-height: 1.35;
  margin-bottom: 3px;
}
.bs-offer-card__category {
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
}
.bs-offer-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bs-offer-card__code {
  font-size: 11px;
  color: #666;
}
.bs-offer-card__code span {
  font-weight: 700;
  color: var(--cj-navy);
}
.bs-offer-card__book {
  font-size: 12px;
  font-weight: 700;
  color: var(--cj-green);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.bs-offer-card__book:hover { color: #5aad18; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — POPULAR BUS ROUTES GRID
   ═══════════════════════════════════════════════════════════════ */
/* Uses .bs-section--alt */

.bs-routes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #ddd;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 28px;
}
.bs-route-cell {
  background: #fff;
  padding: 20px 20px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: background .2s;
}
.bs-route-cell:hover { background: #fafafa; }
.bs-route-cell__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg, linear-gradient(135deg, #152d72 0%, #4a7ad4 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bs-route-cell__body {}
.bs-route-cell__heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--cj-navy);
  margin-bottom: 4px;
  line-height: 1.3;
}
.bs-route-cell__cities {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}
.bs-route-cell__cities a {
  color: var(--cj-green);
  text-decoration: none;
  font-weight: 500;
}
.bs-route-cell__cities a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .bs-search-row { grid-template-columns: 1fr 44px 1fr; }
  .bs-routes-grid { grid-template-columns: repeat(2, 1fr); }
  .bs-offers__grid { grid-auto-columns: calc(90% - 8px); }
}

@media (max-width: 600px) {
  .bs-search-row { grid-template-columns: 1fr; }
  .bs-routes-grid { grid-template-columns: 1fr; }
  .bs-offers__tabs { display: none; }
  .bs-offers__grid { grid-auto-columns: 95%; }
}


.modal-header {
    padding: 0;
    border-bottom: transparent;
}
.modal-header .btn-close {
    background-color: #ffffff;
    opacity: 1;
    filter: invert(1);
    border-radius: 50%;
}
.qualify-form__note a{text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════
   Car Rental Page — Styles
   ═══════════════════════════════════════════════════════════════ */
.cr-search-row {
  display: grid;
  grid-template-columns: 2fr 1fr 130px 1fr 130px;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}
/* Bottom row: checkboxes + search btn */
.cr-search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cr-checks {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cr-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cj-navy);
  cursor: pointer;
  user-select: none;
}
.cr-check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--cj-navy);
  cursor: pointer;
  flex-shrink: 0;
}

/* Search submit */
.cr-search-btn {
  padding: 11px 32px;
  background: var(--cj-green);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cr-search-btn:hover { background: #5aad18; }
/* ═══════════════════════════════════════════════════════════════
   SECTION 2 — DEALS BANNER
   ═══════════════════════════════════════════════════════════════ */
.cr-deals-banner {
  background: linear-gradient(100deg, var(--cj-navy) 0%, #1e4080 50%, #0d5c4a 100%);
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}
.cr-deals-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cr-deals-banner__icon {
  opacity: .15;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — FEATURES STRIP
   ═══════════════════════════════════════════════════════════════ */
.cr-features {
  background: #fff;
  padding: 40px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.cr-feature-item__icon {
  width: 48px;
  height: 48px;
  background: var(--cj-light-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 4 — TOP CAR RENTALS SLIDER
   ═══════════════════════════════════════════════════════════════ */
/* Uses .cr-section--alt */

.cr-slider-wrap {
  position: relative;
  margin-top: 28px;
}
.cr-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
}
.cr-slider::-webkit-scrollbar { display: none; }

.cr-slider-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
.cr-slider-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.cr-slider-btn:hover { background: var(--cj-navy); border-color: var(--cj-navy); }
.cr-slider-btn:hover svg path { stroke: #fff; }

/* Location rental card */
.cr-loc-card {
  min-width: 260px;
  max-width: 260px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--cj-shadow);
  scroll-snap-align: start;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.cr-loc-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.15); }

.cr-loc-card__img {
  height: 155px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
	background-size:cover;
	background-position: bottom;
	background-repeat: no-repeat
}
.cr-loc-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 60%, transparent 100%);
}
.cr-loc-card__img-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}
.cr-loc-card__body {
  padding: 14px 16px 16px;
}
.cr-loc-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cj-navy);
  margin-bottom: 4px;
}
.cr-loc-card__type {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
}
.cr-loc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cj-green);
  text-decoration: none;
  transition: gap .15s;
}
.cr-loc-card__cta:hover { gap: 9px; color: var(--cj-green); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .cr-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .cr-step-card:nth-child(2)::after { display: none; }
  .cr-step-card:nth-child(odd):not(:last-child)::after { display: block; }
}

@media (max-width: 860px) {
  .cr-search-row { grid-template-columns: 1fr 1fr; }


}

@media (max-width: 600px) {
  .cr-search-row { grid-template-columns: 1fr; }
  .cr-steps-grid { grid-template-columns: 1fr; }
  .cr-loc-card { min-width: 230px; max-width: 230px; }
}

/* ═══════════════════════════════════════════════════════════════
   Flights Page — Styles
   ═══════════════════════════════════════════════════════════════ */
/* Trip-type tabs */
.fl-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.fl-tab {
  padding: 8px 22px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.35);
  background: transparent;
  color: rgba(255,255,255,.75);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.fl-tab:hover { border-color: rgba(255,255,255,.7); color: #fff; }
.fl-tab.is-active {
  background: var(--cj-green);
  border-color: var(--cj-green);
  color: #fff;
}

/* Search form card */
.fl-search-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px 24px;
}

.fl-search-row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.fl-search-row--bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.fl-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fl-field label {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.fl-field input,
.fl-field select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--cj-navy);
  background: #fff;
  outline: none;
  transition: border-color .2s;
  appearance: none;
}
.fl-field input:focus,
.fl-field select:focus { border-color: var(--cj-navy); }

/* Swap button */
.fl-swap-btn {
  width: 44px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.fl-swap-btn:hover { background: var(--cj-light-bg); border-color: #ccc; }

/* Search submit */
.fl-search-btn {
  padding: 11px 28px;
  background: var(--cj-green);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
  align-self: end;
}
.fl-search-btn:hover { background: #5aad18; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 2 — FEATURES STRIP
   ═══════════════════════════════════════════════════════════════ */
.fl-features {
  background: #fff;
  padding: 36px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.fl-features__grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.fl-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  min-width: 100px;
}
.fl-feature-item__icon {
  width: 52px;
  height: 52px;
  background: var(--cj-light-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl-feature-item__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cj-navy);
  line-height: 1.35;
}
/* ═══════════════════════════════════════════════════════════════
   SECTION 4 — DEALS & OFFERS (slider)
   ═══════════════════════════════════════════════════════════════ */
.fl-slider-wrap {
  position: relative;

}
.fl-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
}
.fl-slider::-webkit-scrollbar { display: none; }

.fl-slider-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
.fl-slider-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.fl-slider-btn:hover { background: var(--cj-navy); border-color: var(--cj-navy); }
.fl-slider-btn:hover svg path { stroke: #fff; }

/* Deal cards */
.fl-deal-card {
  min-width: 260px;
  max-width: 260px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--cj-shadow);
  overflow: hidden;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.fl-deal-card__img {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
  position: relative;
}
.fl-deal-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--cj-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}
.fl-deal-card__body {
  padding: 14px 16px 18px;
}
.fl-deal-card__route {
  font-size: 15px;
  font-weight: 700;
  color: var(--cj-navy);
  margin-bottom: 4px;
}
.fl-deal-card__airline {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
}
.fl-deal-card__price {
  font-size: 22px;
  font-weight: 700;
  color: var(--cj-green);
  margin-bottom: 2px;
}
.fl-deal-card__price-note {
  font-size: 11px;
  color: #aaa;
}
/* ═══════════════════════════════════════════════════════════════
   SECTION 6 — FLIGHT CLASSES (slider)
   ═══════════════════════════════════════════════════════════════ */
.fl-class-card {
  min-width: calc(50% - 10px);
  max-width: calc(50% - 10px);
  border-radius: 14px;
  overflow: hidden;
  scroll-snap-align: start;
  flex-shrink: 0;
  position: relative;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 28px 24px;
  color: #fff;
}
.fl-class-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: 0;
}
.fl-class-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 60%, transparent 100%);
  z-index: 1;
}
.fl-class-card--economy    { background: linear-gradient(135deg, #1a3a8a 0%, #0d5c8c 100%); }
.fl-class-card--premium    { background: linear-gradient(135deg, #2d5a27 0%, #4a8c3f 100%); }
.fl-class-card--business   { background: linear-gradient(135deg, #5c2d0a 0%, #9c4f1a 100%); }
.fl-class-card--first      { background: linear-gradient(135deg, #2a0a5c 0%, #6a1a9c 100%); }

.fl-class-card__content {
  position: relative;
  z-index: 2;
}
.fl-class-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
}
.fl-class-card__title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.fl-class-card__desc {
  font-size: 13px;
  color: rgba(255,255,255,.8);
  line-height: 1.5;
  margin-bottom: 16px;
}
.fl-class-card__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 20px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s;
}
.fl-class-card__btn:hover { background: rgba(255,255,255,.35); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 8 — POPULAR DESTINATIONS (slider)
   ═══════════════════════════════════════════════════════════════ */
.fl-dest-card {
  min-width: 220px;
  max-width: 220px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  height: 160px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  text-decoration: none;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.fl-dest-card__bg {
  position: absolute;
  inset: 0;
  background: var(--bg);
  transition: transform .35s ease;
	    background-size: cover;
    background-position: bottom;
}
.fl-dest-card:hover .fl-dest-card__bg { transform: scale(1.05); }
.fl-dest-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
	    background-size: cover;
    background-position: bottom;
}
.fl-dest-card__label {
  position: relative;
  z-index: 2;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.fl-dest-card__sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,.75);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .fl-search-row {
    grid-template-columns: 1fr 44px 1fr;
    grid-template-rows: auto auto;
  }
  .fl-search-row--bottom {
    grid-template-columns: 1fr 1fr;
  }
  .fl-class-card { min-width: 85%; max-width: 85%; }
}

@media (max-width: 600px) {
  .fl-search-row { grid-template-columns: 1fr 40px 1fr; }
  .fl-search-row--bottom { grid-template-columns: 1fr; }
  .fl-class-card { min-width: 92%; max-width: 92%; height: 240px; }
  .fl-features__grid { gap: 16px; }
  .fl-dest-card { min-width: 180px; max-width: 180px; height: 130px; }
}


/* ═══════════════════════════════════════════════════════════════
   Hotels Page — Styles
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   SECTION 2 — MEMBER PRICES BANNER STRIP
   ═══════════════════════════════════════════════════════════════ */
.ht-member-strip {
  background: #1a1a2e;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ht-member-strip__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ht-member-strip__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cj-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ht-member-strip__text {
  flex: 1;
  font-size: 14px;
  color: rgba(255,255,255,.9);
  line-height: 1.5;
  min-width: 220px;
}
.ht-member-strip__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ht-strip-btn {
  padding: 9px 22px;
  border-radius: 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  border: none;
}
.ht-strip-btn--primary {
  background: var(--cj-green);
  color: #fff;
}
.ht-strip-btn--primary:hover { background: #5aad18; color: #fff; }
.ht-strip-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.4);
}
.ht-strip-btn--ghost:hover { border-color: #fff; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — ONEKEYCASH FEATURE CARDS
   ═══════════════════════════════════════════════════════════════ */
/* Uses .ht-section */


.ht-cash-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--cj-shadow);
  display: flex;
  flex-direction: column;
}
.ht-cash-card__body {
  background: #ffd700;
  padding: 22px 20px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ht-cash-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
}
.ht-cash-card__link {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  transition: gap .15s;
}
.ht-cash-card__link:hover { gap: 8px; }
.ht-cash-card__visual {
  height: 100px;
  background: var(--bg, linear-gradient(135deg, #152d72 0%, #2a5aac 100%));
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ═══════════════════════════════════════════════════════════════
   SECTION 4 — PROPERTY TYPE SLIDER ("Stumble Upon...")
   ═══════════════════════════════════════════════════════════════ */
/* Uses .ht-section--alt */

.ht-slider-wrap {
  position: relative;
  margin-top: 32px;
}
.ht-slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
}
.ht-slider::-webkit-scrollbar { display: none; }

.ht-slider-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
.ht-slider-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.ht-slider-btn:hover { background: var(--cj-navy); border-color: var(--cj-navy); }
.ht-slider-btn:hover svg path { stroke: #fff; }

/* Property type card */
.ht-prop-card {
  min-width: 160px;
  max-width: 160px;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s;
}
.ht-prop-card:hover { transform: translateY(-4px); }
.ht-prop-card__img {
  height: 130px;
  background: var(--bg);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ht-prop-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.35) 100%);
}
.ht-prop-card__icon {
  position: relative;
  z-index: 1;
  opacity: .9;
}
.ht-prop-card__label {
  padding: 10px 12px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--cj-navy);
  text-align: center;
}
/* ═══════════════════════════════════════════════════════════════
   SECTION 5 — SAVE BIG ON YOUR NEXT TRIP
   ═══════════════════════════════════════════════════════════════ */

.ht-city-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.ht-city-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.ht-city-banner__card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 36px;
  max-width: 380px;
  flex-shrink: 0;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.ht-city-banner__card-tag {
  display: inline-block;
  background: var(--cj-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.ht-city-banner__card-title {
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 700;
  color: var(--cj-navy);
  line-height: 1.25;
  margin-bottom: 12px;
}
.ht-city-banner__card-text {
  font-size: 14px;
  color: var(--cj-body);
  line-height: 1.7;
  margin-bottom: 22px;
}
.ht-city-banner__visual {
  flex: 1;
  min-width: 260px;
  height: 300px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1a4a5c 0%, #2a7a9c 50%, #1a5c3a 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ht-city-banner__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255,255,255,.06) 0%, transparent 60%);
}
.ht-city-banner__visual-label {
  position: relative;
  z-index: 1;
  text-align: center;
  color: rgba(255,255,255,.5);
  font-size: 13px;
  font-weight: 500;
}

/* City skyline decorative silhouette */
.ht-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  opacity: .12;
}

/* ═══════════════════════════════════════════════════════════════
   Holiday Package Page — Styles
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   SECTION 1 — HERO (holiday search form)
   ═══════════════════════════════════════════════════════════════ */

.hp-search-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px 24px;
}
.hp-search-hint {
  font-size: 12px;
  color: #888;
  margin-bottom: 18px;
  text-align: center;
}
.hp-search-hint a { color: var(--cj-green); text-decoration: none; font-weight: 600; }
.hp-search-hint a:hover { text-decoration: underline; }

.hp-search-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}
.hp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hp-field label {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.hp-field input,
.hp-field select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--cj-navy);
  background: #fff;
  outline: none;
  transition: border-color .2s;
  appearance: none;
}
.hp-field input:focus,
.hp-field select:focus { border-color: var(--cj-navy); }

.hp-search-footer {
  display: flex;
  justify-content: center;
}
.hp-search-btn {
  padding: 13px 56px;
  background: var(--cj-green);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: .5px;
  transition: background .2s;
  text-transform: uppercase;
}
.hp-search-btn:hover { background: #5aad18; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 2 — BEST SELLING DESTINATIONS SLIDER
   ═══════════════════════════════════════════════════════════════ */
.hp-destinations {
  background: #fff;
  padding: 48px 0;
  border-bottom: 1px solid #eee;
}
.hp-destinations__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.hp-destinations__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--cj-navy);
  margin: 0;
}
.hp-destinations__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hp-destinations__view-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--cj-navy);
  text-decoration: none;
  white-space: nowrap;
}
.hp-destinations__view-all:hover { color: var(--cj-green); }
.hp-destinations__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.hp-destinations__btn:hover { background: var(--cj-navy); border-color: var(--cj-navy); }
.hp-destinations__btn:hover svg path { stroke: #fff; }

/* Single-row horizontally scrolling slider */
.hp-destinations__slider-wrap { overflow: hidden; }
.hp-destinations__slider {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.hp-destinations__slider::-webkit-scrollbar { display: none; }

/* Destination card */
.hp-dest-card {
  flex: 0 0 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ebebeb;
  scroll-snap-align: start;
  transition: box-shadow .2s, transform .2s;
  cursor: pointer;
}
.hp-dest-card:hover { box-shadow: var(--cj-shadow); transform: translateY(-3px); }
.hp-dest-card__img {
  height: 130px;
  background: var(--bg, linear-gradient(135deg, #152d72 0%, #2a5aac 100%));
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
	background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}
.hp-dest-card__nights {
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.hp-dest-card__body {
  background: #fff;
  padding: 12px 14px 14px;
}
.hp-dest-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--cj-navy);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-dest-card__package {
  font-size: 12px;
  color: #777;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-dest-card__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--cj-green);
}
.hp-dest-card__price span {
  font-size: 11px;
  font-weight: 400;
  color: #999;
}
/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — EXPLORE HOLIDAYS BY THEME
   ═══════════════════════════════════════════════════════════════ */
/* Uses .hp-section--alt */

.hp-theme-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8e8e8;
  transition: box-shadow .2s, transform .2s;
  cursor: pointer;
}
.hp-theme-card:hover { box-shadow: var(--cj-shadow); transform: translateY(-3px); }
.hp-theme-card__img {
  height: 160px;
  background: var(--bg, linear-gradient(135deg, #152d72 0%, #4a7ad4 100%));
  display: flex;
  align-items: center;
  justify-content: center;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;
}
.hp-theme-card__body {
  padding: 14px 16px;
}

.hp-theme-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.hp-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1.5px solid #ddd;
  font-size: 11px;
  color: #555;
  font-weight: 500;
  transition: border-color .2s, color .2s;
  cursor: pointer;
}
.hp-tag:hover { border-color: var(--cj-navy); color: var(--cj-navy); }
.hp-theme-card__link {
  font-size: 12px;
  font-weight: 700;
  color: var(--cj-green);
  text-decoration: none;
  transition: color .15s;
}
.hp-theme-card__link:hover { color: #5aad18; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hp-search-row { grid-template-columns: 1fr 1fr 1fr; }
 
}
@media (max-width: 860px) {
 
  .hp-destinations__slider .hp-dest-card { flex: 0 0 190px; }
}
@media (max-width: 600px) {
  .hp-search-row { grid-template-columns: 1fr; }

  .hp-offers__tabs { display: none; }

  .hp-destinations__slider .hp-dest-card { flex: 0 0 80%; }
}

/* ═══════════════════════════════════════════════════════════════
   Home Services Landing Page — Styles
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   HERO — ADDITIONAL ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
.hsl-hero__zip-block {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
  margin-top: 20px;
}
.hsl-hero__zip-subtext { font-size: 13px; color: rgba(255,255,255,.5); }
.hsl-hero__zip-subtext strong { color: rgba(255,255,255,.78); font-weight: 600; }
.hsl-hero__zip-wrap {
  display: flex;
  max-width: 420px;
  background: #fff;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
}
.hsl-hero__zip-input {
  flex: 1;
  border: none;
  padding: 14px 22px;
  font-size: 15px;
  color: var(--cj-body);
  outline: none;
  min-width: 0;
  background: transparent;
}
.hsl-hero__zip-input::placeholder { color: #aaa; }
.hsl-hero__zip-btn {
  background: var(--cj-green);
  color: #fff;
  border: none;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s;
  white-space: nowrap;
}
.hsl-hero__zip-btn:hover { background: #5aad1a; }

.hsl-compare-btn {
  background: var(--cj-green);
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--cj-font);
  transition: background .18s;
}
.hsl-compare-btn:hover { background: #5aad1a; }




/* ============================================================
   travel-landing.css  |  prefix: tl-
   ============================================================ */
/* ── SEARCH WIDGET ───────────────────────────────────────── */
.tl-search-widget { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 10px 44px rgba(0,0,0,.22); }

/* Service tabs */
.tl-service-tabs { display:flex; border-bottom:1px solid #eee; overflow-x:auto; scrollbar-width:none; }
.tl-service-tabs::-webkit-scrollbar { display:none; }
.tl-service-tab { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 16px; cursor:pointer; border:none; background:none; border-bottom:3px solid transparent; transition:all .18s; flex-shrink:0; font-family:var(--cj-font); text-decoration:none; color:inherit; }
.tl-service-tab:hover { background:#f8f8f8; }
.tl-service-tab.active { border-bottom-color:var(--cj-green); background:#f8fff2; }
.tl-service-tab__icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(21,45,114,.08); transition:background .18s; }
.tl-service-tab.active .tl-service-tab__icon { background:rgba(108,194,34,.15); }
.tl-service-tab__label { font-size:11px; font-weight:700; color:var(--cj-navy); white-space:nowrap; line-height:1.2; text-align:center; }
.tl-service-tab.active .tl-service-tab__label { color:var(--cj-green); }

/* Search forms */
.tl-search-forms { padding:20px 22px 22px; }
.tl-search-form { display:none; }
.tl-search-form.active { display:block; }

/* Trip type radios */
.tl-trip-type { display:flex; gap:18px; margin-bottom:16px; }
.tl-trip-type__label { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--cj-navy); cursor:pointer; }
.tl-trip-type__label input[type="radio"] { accent-color:var(--cj-green); width:15px; height:15px; }

/* Fields grid */
.tl-fields { display:grid; gap:10px; margin-bottom:14px; }
.tl-fields--5 { grid-template-columns:repeat(5,1fr); }
.tl-fields--4 { grid-template-columns:repeat(4,1fr); }
.tl-fields--3 { grid-template-columns:repeat(3,1fr); }
.tl-fields--2 { grid-template-columns:repeat(2,1fr); }
.tl-field { display:flex; flex-direction:column; gap:4px; }
.tl-field__label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#999; }
.tl-field__input { padding:10px 12px; border:1.5px solid #e0e0e0; border-radius:8px; font-size:13.5px; font-family:var(--cj-font); color:var(--cj-body); outline:none; transition:border-color .18s; background:#fff; }
.tl-field__input:focus { border-color:var(--cj-green); }
.tl-field__input::placeholder { color:#bbb; }
.tl-field__input:disabled { opacity:.45; cursor:not-allowed; }
.tl-search-btn-row { display:flex; justify-content:center; }
.tl-search-btn { background:var(--cj-green); color:#fff; border:none; padding:13px 60px; border-radius:8px; font-size:15px; font-weight:700; letter-spacing:.06em; font-family:var(--cj-font); cursor:pointer; transition:background .18s; }
.tl-search-btn:hover { background:#5aad1a; }

/* ── DEALS SLIDER ────────────────────────────────────────── */
.tl-deals-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px;  }
.tl-slide-controls { display:flex; gap:8px; }
.tl-slide-btn { width:36px; height:36px; border-radius:50%; border:1.5px solid #ddd; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .18s; color:var(--cj-navy); }
.tl-slide-btn:hover { background:var(--cj-navy); color:#fff; }
.tl-slide-btn svg { pointer-events:none; }
.tl-deals-slider { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding-bottom:6px; margin-top:22px; }
.tl-deals-slider::-webkit-scrollbar { display:none; }
.tl-deal-card { flex:0 0 340px; scroll-snap-align:start; background:#fff; border-radius:14px; overflow:hidden; border:1px solid #e0e0e0; display:flex; flex-direction:column; transition:box-shadow .2s,transform .18s; }
.tl-deal-card:hover { box-shadow:var(--cj-shadow); transform:translateY(-3px); }
.tl-deal-card__top { background:var(--cj-navy); padding:18px 20px; display:flex; gap:14px; align-items:center; }
.tl-deal-card__icon { width:48px; height:48px; border-radius:12px; background:rgba(108,194,34,.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tl-deal-card__category { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--cj-green); margin-bottom:4px; }
.tl-deal-card__headline { font-size:14.5px; font-weight:700; color:#fff; line-height:1.3; }
.tl-deal-card__body { padding:15px 18px 16px; flex:1; display:flex; flex-direction:column; }
.tl-deal-card__desc { font-size:13px; color:var(--cj-body); line-height:1.6; flex:1; margin-bottom:12px; }
.tl-deal-card__cta { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--cj-green); text-decoration:none; text-transform:uppercase; letter-spacing:.06em; }

/* ── HOTELS ──────────────────────────────────────────────── */
.tl-hotels-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:32px; }
.tl-hotel-card { border-radius:14px; overflow:hidden; border:1px solid #e0e0e0; background:#fff; transition:box-shadow .2s,transform .18s; cursor:pointer; }
.tl-hotel-card:hover { box-shadow:var(--cj-shadow); transform:translateY(-3px); }
.tl-hotel-card__img { height:130px; display:flex; align-items:center; justify-content:center; position:relative; }
.tl-hotel-card__img svg { opacity:.2; }
.tl-hotel-card__body { padding:14px 14px 12px; }
.tl-hotel-card__name { font-size:13.5px; font-weight:700; color:var(--cj-navy); line-height:1.35; margin-bottom:5px; }
.tl-hotel-card__location { font-size:12px; color:#888; display:flex; align-items:center; gap:4px; }
.tl-hotel-card--1 .tl-hotel-card__img { background:linear-gradient(145deg,#152d72,#1e3a8a); }
.tl-hotel-card--2 .tl-hotel-card__img { background:linear-gradient(145deg,#0277bd,#0288d1); }
.tl-hotel-card--3 .tl-hotel-card__img { background:linear-gradient(145deg,#00695c,#009688); }
.tl-hotel-card--4 .tl-hotel-card__img { background:linear-gradient(145deg,#880e4f,#c2185b); }

/* ── PERKS ───────────────────────────────────────────────── */
.tl-perks-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
.tl-perk-card { background:#fff; border-radius:14px; padding:24px 20px 20px; border:1px solid #e8e8e8; transition:box-shadow .2s,transform .18s; }
.tl-perk-card:hover { box-shadow:var(--cj-shadow); transform:translateY(-3px); }
.tl-perk-card__icon { width:52px; height:52px; border-radius:14px; background:var(--cj-navy); display:flex; align-items:center; justify-content:center; margin-bottom:14px; transition:background .18s; }
.tl-perk-card:hover .tl-perk-card__icon { background:var(--cj-green); }
.tl-perk-card__title { font-size:14px; font-weight:700; color:var(--cj-navy); line-height:1.38; }

/* ── DESTINATIONS ────────────────────────────────────────── */
.tl-dest-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
.tl-dest-card { border-radius:14px; overflow:hidden; border:1px solid #e0e0e0; background:#fff; transition:box-shadow .2s,transform .18s; cursor:pointer; }
.tl-dest-card:hover { box-shadow:var(--cj-shadow); transform:translateY(-4px); }
.tl-dest-card__top { height:100px; display:flex; align-items:flex-end; padding:10px 12px; position:relative; }
.tl-dest-card__top::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.52)); }
.tl-dest-card__city { font-size:15px; font-weight:700; color:#fff; position:relative; z-index:1; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.tl-dest-card__body { padding:12px 14px 14px; }
.tl-dest-card__desc { font-size:12.5px; color:var(--cj-body); line-height:1.6; }
.tl-dest-card--1 .tl-dest-card__top { background:linear-gradient(135deg,#1a237e,#3949ab); }
.tl-dest-card--2 .tl-dest-card__top { background:linear-gradient(135deg,#e65100,#ff6d00); }
.tl-dest-card--3 .tl-dest-card__top { background:linear-gradient(135deg,#37474f,#607d8b); }
.tl-dest-card--4 .tl-dest-card__top { background:linear-gradient(135deg,#1b5e20,#388e3c); }
.tl-dest-card--5 .tl-dest-card__top { background:linear-gradient(135deg,#006064,#0097a7); }
.tl-dest-card--6 .tl-dest-card__top { background:linear-gradient(135deg,#01579b,#039be5); }
.tl-dest-card--7 .tl-dest-card__top { background:linear-gradient(135deg,#4a148c,#7b1fa2); }
.tl-dest-card--8 .tl-dest-card__top { background:linear-gradient(135deg,#b71c1c,#e53935); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:960px) {
  .tl-fields--5 { grid-template-columns:repeat(3,1fr); }
  .tl-perks-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:800px) {
  .tl-hotels-grid { grid-template-columns:repeat(2,1fr); }
  .tl-dest-grid { grid-template-columns:repeat(2,1fr); }
  .tl-fields--5,.tl-fields--4 { grid-template-columns:repeat(2,1fr); }
  .tl-fields--3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .tl-fields--5,.tl-fields--4,.tl-fields--3,.tl-fields--2 { grid-template-columns:1fr; }
  .tl-trip-type { flex-wrap:wrap; gap:10px; }
  .tl-deal-card { flex:0 0 290px; }
}
@media (max-width:480px) {
  .tl-hotels-grid { grid-template-columns:1fr; }
  .tl-perks-grid { grid-template-columns:repeat(2,1fr); }
  .tl-dest-grid { grid-template-columns:1fr; }
}