:root {
    --text-primary: #1E1B3A;
    --text-primary-2: #4E2899;
    --text-primary-3: #2A1B60;
    --text-secondary: #1A92B5;
    --text-accent: #FFCC00;
    --text-orange: #FF8D28;
    --text-pink: #FF2D55;
    --text-muted: #868686;
    --text-muted-700: rgb(90, 90, 90);
    --text-dark: #333;
    --text-light: #666666;
    --bg-light: #EFF7FF;
    --white: #FFFFFF;

    --button-primary: #2A1B60;
    --button-secondary: #1A92B5;
    --button-accent: #FFCC00;
    --button-muted: #EAEAEA;

    --bg-primary: #1E1B3A;
    --bg-primary-2: #4E2899;
    --bg-primary-3: #2A1B60;
    --bg-secondary: #1A92B5;
    --bg-accent: #FFCC00;
    --linear-primary: linear-gradient(83.54deg, #1E1B3A -32.28%, #534AA0 78.27%);
    --header-bg: linear-gradient(90deg, #254650 0%, #3F8599 100%);
    --badge-success: rgba(52, 199, 89, 1);
    --badge-success-500: rgba(52, 199, 89, 0.2);
    --badge-yellow: #ffcc00;
    --badge-yellow-500: rgba(255, 179, 0, 0.1);
    --badge-muted: rgba(255, 255, 255, 1);
    --badge-muted-500: rgba(255, 255, 255, 0.2);
    --badge-info: rgba(0, 129, 255, 1);
    --badge-info-500: rgba(0, 129, 255, 0.2);
    --badge-pink: rgba(255, 45, 85, 1);
    --badge-purple: rgba(203, 48, 224, 1);
    --badge-navy: rgba(78, 40, 153, 0.1);

    --muted: #f8fafc;
    --card: #ffffff;

    --bg: #ffffff;
    --bg-1: #DEDEFF;
    --bg-2: #EEEEFF;
    --bg-muted: #EAEAEA;

    --font-primary: "Segoe UI", Tahoma, Geneva, sans-serif;
    --font-1: "Nunito", sans-serif;
    --font-2: "Literata", serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary) !important;
    line-height: 1.6;
}

h1,
h2,
h3,
h4 {
    font-weight: 700;
}

p {
    margin-bottom: 0px !important;
}

.font-style1 {
    font-family: var(--font-1) !important;
}

.font-style2 {
    font-family: var(--font-2) !important;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-26 {
    font-size: 26px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-32 {
    font-size: 32px !important;
}

.fs-36 {
    font-size: 36px !important;
}

.fs-40 {
    font-size: 40px !important;
}

.fs-48 {
    font-size: 48px !important;
}

.fs-56 {
    font-size: 56px !important;
}

.fs-60 {
    font-size: 60px !important;
}

.fs-64 {
    font-size: 64px !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.m-8 {
    margin: 8px !important;
}

.m-12 {
    margin: 12px !important;
}

.m-16 {
    margin: 16px !important;
}

.m-20 {
    margin: 20px !important;
}

.m-24 {
    margin: 24px !important;
}

.m-32 {
    margin: 32px !important;
}

.m-40 {
    margin: 40px !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-8 {
    margin-top: 8px !important;
}

.mt-12 {
    margin-top: 12px !important;
}

.mt-16 {
    margin-top: 16px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-24 {
    margin-top: 24px !important;
}

.mt-32 {
    margin-top: 32px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-18 {
    margin-bottom: 18px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-24 {
    margin-bottom: 24px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-32 {
    margin-bottom: 32px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.ml-8 {
    margin-left: 8px !important;
}

.ml-12 {
    margin-left: 12px !important;
}

.ml-16 {
    margin-left: 16px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.ml-24 {
    margin-left: 24px !important;
}

.ml-32 {
    margin-left: 32px !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-4 {
    margin-right: 4px !important;
}

.mr-8 {
    margin-right: 8px !important;
}

.mr-12 {
    margin-right: 12px !important;
}

.mr-16 {
    margin-right: 16px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-24 {
    margin-right: 24px !important;
}

.mr-32 {
    margin-right: 32px !important;
}


.p-8 {
    padding: 8px !important;
}

.p-12 {
    padding: 12px !important;
}

.p-16 {
    padding: 16px !important;
}

.p-20 {
    padding: 20px !important;
}

.p-24 {
    padding: 24px !important;
}

.p-32 {
    padding: 32px !important;
}

.p-40 {
    padding: 40px !important;
}

.pt-8 {
    padding-top: 8px !important;
}

.pt-12 {
    padding-top: 12px !important;
}

.pt-16 {
    padding-top: 16px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pt-24 {
    padding-top: 24px !important;
}

.pt-32 {
    padding-top: 32px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-8 {
    padding-bottom: 8px !important;
}

.pb-12 {
    padding-bottom: 12px !important;
}

.pb-16 {
    padding-bottom: 16px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pb-24 {
    padding-bottom: 24px !important;
}

.pb-32 {
    padding-bottom: 32px !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-8 {
    padding-left: 8px !important;
}

.pl-12 {
    padding-left: 12px !important;
}

.pl-16 {
    padding-left: 16px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pl-24 {
    padding-left: 24px !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-8 {
    padding-right: 8px !important;
}

.pr-12 {
    padding-right: 12px !important;
}

.pr-16 {
    padding-right: 16px !important;
}

.pr-20 {
    padding-right: 20px !important;
}

.pr-24 {
    padding-right: 24px !important;
}

.lh-1 {
    line-height: 1 !important;
}

.lh-12 {
    line-height: 1.2 !important;
}

.lh-14 {
    line-height: 1.4 !important;
}

.lh-16 {
    line-height: 1.6 !important;
}

.lh-18 {
    line-height: 1.8 !important;
}

a {
    text-decoration: none;
}

.flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flex-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.flex-column {
    display: flex !important;
    flex-direction: column !important;
}

.text-truncate-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rounded-6 {
    border-radius: 6px !important;
}

.rounded-10 {
    border-radius: 10px !important;
}

.rounded-14 {
    border-radius: 14px !important;
}

.rounded-16 {
    border-radius: 16px !important;
}

.rounded-20 {
    border-radius: 20px !important;
}

.rounded-pill {
    border-radius: 999px !important;
}

.section-padding {
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-padding-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.padding-bottom{
    padding-bottom: 80px;
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-primary-2 {
    color: var(--text-primary-2) !important;
}

.text-primary-3 {
    color: var(--text-primary-3) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-muted-1 {
    color: var(--text-muted-700) !important;
}

.text-yellow {
    color: var(--text-accent);
}

.text-orange {
    color: var(--text-orange);
}

.text-pink {
    color: var(--text-pink);
}

.review-star {
    color: #E7B66B;
}

.badge-success {
    background: var(--badge-success);
    border: 1px solid var(--badge-success);
}

.badge-navy {
    background: var(--badge-navy);
}

.border-success {
    border: 1px solid var(--badge-success) !important;
}

.text-success {
    color: var(--badge-success) !important;
}

.text-justify {
    text-align: justify;
}

.badge-success-500 {
    background: var(--badge-success-500);
    border: 1px solid var(--badge-success);
}

.badge-yellow {
    background: var(--badge-yellow);
    color: #000000;
}

.badge-yellow-500 {
    background: var(--badge-yellow-500);
    border: 1px solid var(--badge-yellow);
}

.badge-muted-500 {
    background: var(--badge-muted-500);
    border: 1px solid var(--badge-muted);
}


.badge-orange {
    background: #fb923c;
    color: #fff;
}

.badge-info {
    background: var(--badge-info-500);
    border: 1px solid var(--badge-info);
}

.cursor-pointer {
    cursor: pointer;
}

.btn-xs {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
}

.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
}

.btn-md {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
}

.btn-lg {
    padding: 14px 26px;
    font-size: 16px;
    font-weight: 600;
}

.btn-xl {
    padding: 16px 32px;
    font-size: 18px;
}

.btn-linear {
    background: var(--linear);
    border-radius: 8px;
    color: #ffffff;
    transition: background 0.5s ease, color 0.5s ease;
}

.btn-linear:hover {
    background: linear-gradient(90deg, #534AA0 0%, #534AA0 100%);
    color: #ffffff;
}

.btn-linear:active,
.btn-linear.active,
.btn-linear:focus-visible {
    background: linear-gradient(90deg, #534AA0 0%, #534AA0 100%) !important;
    border-color: linear-gradient(90deg, #534AA0 0%, #534AA0 100%) !important;
    box-shadow: none !important;
}

.btn-primary {
    background: var(--button-primary);
    border-color: var(--button-primary);
    border-radius: 8px;
    color: #ffffff;
}
 
.btn-primary:hover {
    background: #342272;
    color: #ffffff;
    border-color: #342272;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:focus-visible {
    background: #342272 !important;
    border-color: #342272 !important;
    color: #ffffff;
    box-shadow: none !important;
}
.btn-secondary {
    background: var(--button-secondary);
    border-color: var(--button-secondary);
    border-radius: 8px;
    color: #ffffff;
}

.btn-secondary:hover {
    background: var(--button-secondary);
    color: #ffffff;
}

.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:focus-visible {
    background: var(--button-secondary) !important;
    border-color: var(--button-secondary) !important;
    color: #ffffff;
    box-shadow: none !important;
}

.btn-accent {
    background: var(--button-accent);
    border-color: var(--button-accent);
    border-radius: 6px;
    color: #000000;
}

.btn-accent:hover {
    background: #fcd126;
    color: #003377;
    border-color: #f5d249;
}

.btn-accent:active,
.btn-accent.active,
.btn-accent:focus-visible {
    background: #f5d249 !important;
    border-color: #f5d249 !important;
    color: #ffffff;
    box-shadow: none !important;
}

.btn-linear {
    background: linear-gradient(90deg, #1E1B3A 0%, #534AA0 100%);
    border-color: linear-gradient(135deg, #2D2D63 0%, #4B4B9B 100%);
    border-radius: 8px;
    color: #ffffff;
}

.btn-muted {
    background: var(--button-muted);
    border-color: var(--button-muted);
    border-radius: 8px;
    color: #000000;
}

.btn-muted:hover {
    background: #cac9c9;
    color: #000000;
}

.btn-outline-p {
    background: none;
    border: 1px solid var(--text-primary) !important;
    border-radius: 50%;
    color: var(--text-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-outline-p:hover {
    background: #e9e9e9;
    transform: scale(1.05);
}


.bg {
    background-color: var(--bg);
}

.bg-1 {
    background-color: var(--bg-1);
}

.bg-2 {
    background-color: var(--bg-2);
}
.bg-linear {
    background-color: var(--linear-primary);
}
.bg-muted {
    background-color: var(--bg-muted);
}

.bg-muted-1 {
    background-color: #FCFCFA;
}

.bg-primary {
    background-color: var(--bg-primary) !important;
}

.bg-primary-2 {
    background-color: var(--bg-primary-2) !important;
}

.bg-primary-3 {
    background-color: var(--bg-primary-3) !important;
}

.bg-secondary {
    background-color: var(--bg-secondary) !important;
}

.bg-accent {
    background-color: var(--bg-accent) !important;
}

.bg-purple-light {
    background-color: #EDEAF5;
}

.border-primary-lg {
    border: 2px solid var(--bg-primary) !important;
}

.border-primary {
    border: 1px solid var(--bg-primary) !important;
}

.border-primary-2 {
    border: 1px solid var(--text-primary-2) !important;
}

.border-primary-2-lg {
    border: 2px solid var(--text-primary-2) !important;
}

.border-secondary-lg {
    border: 2px solid var(--bg-secondary) !important;
}

.border-secondary {
    border: 1px solid var(--bg-secondary) !important;
}

.linear-yellow {
    background: linear-gradient(90deg, #C8A61E 0%, #FFCC00 100%);
}

.linear-blue {
    background: linear-gradient(90deg, #00C3D0 0%, #9CE5EA 100%);
}

.linear-orange {
    background: linear-gradient(90deg, #FF8D28 0%, #DAA679 100%);
}

.linear-green {
    background: linear-gradient(90deg, #7AA743 0%, #96E97C 100%);
}

.text-linear-ps {
    background: linear-gradient(83.54deg, #1E1B3A -32.28%, #534AA0 78.27%);

    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.border-none {
    border: none;
}

.rounded-4-5 {
    border-radius: 24px;
}

.custom-divider-e {
    width: 100%;
    height: 1px;
    margin: 25px 0;
    background: repeating-linear-gradient(to right,
            var(--text-primary) 0px,
            #8c8991 8px,
            transparent 8px,
            transparent 14px);
}

.custom-divider-e-2 {
    width: 100%;
    height: 1px;
    margin: 25px 0;
    background: repeating-linear-gradient(to right,
            var(--text-muted) 0px,
            #d4d4d6 8px,
            transparent 8px,
            transparent 14px);
}

.mobile-ctb {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #dbdbdb;
    padding: 15px 0;
    z-index: 1050;
}

.mobile-ctb-inner {
    display: flex;
    gap: 10px;
}

.plane-icon-1 {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/plane-1.svg') no-repeat center;
    background-size: contain;
}

.plane-icon-2 {
    width: 18px;
    height: 18px;
    background: url('../assets/icon/plane-2.svg') no-repeat center;
    background-size: contain;
}

.plane-icon-2-lg {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/plane-2.svg') no-repeat center;
    background-size: contain;
}


.calendar-icon-1 {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/calendar-1.svg') no-repeat center;
    background-size: contain;
}

.calendar-icon-2 {
    width: 18px;
    height: 18px;
    background: url('../assets/icon/calendar-2.svg') no-repeat center;
    background-size: contain;
}

.spoon-icon-1 {
    width: 18px;
    height: 18px;
    background: url('../assets/icon/spoon-1.svg') no-repeat center;
    background-size: contain;
}

.r-arrow-icon-1 {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/right-arrow-1.svg') no-repeat center;
    background-size: contain;
}

.bed-icon-1 {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/bed-1.svg') no-repeat center;
    background-size: contain;
}

.bed-icon-2 {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/bed-2.svg') no-repeat center;
    background-size: contain;
}

.cheapest-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/cheapest.svg') no-repeat center;
    background-size: contain;
}

.edit-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/edit.svg') no-repeat center;
    background-size: contain;
}

.night-icon {
    width: 16px;
    height: 16px;
    background: url('../assets/icon/night.svg') no-repeat center;
    background-size: contain;
}

.search-night-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/search-night.svg') no-repeat center;
    background-size: contain;
}

.basis-icon {
    width: 16px;
    height: 16px;
    background: url('../assets/icon/board-basis.svg') no-repeat center;
    background-size: contain;
}

.guest-icon {
    width: 16px;
    height: 16px;
    background: url('../assets/icon/guest.svg') no-repeat center;
    background-size: contain;
}

.departure-icon {
    width: 16px;
    height: 16px;
    background: url('../assets/icon/departure.svg') no-repeat center;
    background-size: contain;
}

.edit-icon-b {
    width: 20px;
    height: 20px;
    background: url('../assets/icon/edit-b.svg') no-repeat center;
    background-size: contain;
}

.star-icon {
    width: 16px;
    height: 16px;
    background: url('../assets/icon/rating-star.svg') no-repeat center;
    background-size: contain;
}

.star-icon-md {
    width: 18px;
    height: 18px;
    background: url('../assets/icon/rating-star.svg') no-repeat center;
    background-size: contain;
}

.star-icon-lg {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/rating-star.svg') no-repeat center;
    background-size: contain;
}

.rise-icon {
    width: 14px;
    height: 14px;
    background: url('../assets/icon/rise.svg') no-repeat center;
    background-size: contain;
}

.rise-icon-md {
    width: 18px;
    height: 18px;
    background: url('../assets/icon/rise.svg') no-repeat center;
    background-size: contain;
}

.ex-rise-icon-md {
    width: 16px;
    height: 16px;
    background: url('../assets/icon/ex-rise.svg') no-repeat center;
    background-size: contain;
}

.protected-icon {
    width: 14px;
    height: 14px;
    background: url('../assets/icon/protected.svg') no-repeat center;
    background-size: contain;
}

.protected-icon-lg {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/protected.svg') no-repeat center;
    background-size: contain;
}

.crown-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/crown.svg') no-repeat center;
    background-size: contain;
}

.diamond-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/diamond.svg') no-repeat center;
    background-size: contain;
}

.method-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/method.svg') no-repeat center;
    background-size: contain;
}

.protected-plane-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/protected-plane.svg') no-repeat center;
    background-size: contain;
}

.umbrella-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/umbrella.svg') no-repeat center;
    background-size: contain;
}

.umbrella-icon-muted {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/umbrella-muted.svg') no-repeat center;
    background-size: contain;
}

.hotel-icon-muted {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/hotel-muted.svg') no-repeat center;
    background-size: contain;
}

.holiday-hotel-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/holiday-hotel.svg') no-repeat center;
    background-size: contain;
}

.holiday-plane-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/holiday-plane.svg') no-repeat center;
    background-size: contain;
}

.holiday-transfer-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/holiday-transfers.svg') no-repeat center;
    background-size: contain;
}

.holiday-entertainment-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/holiday-entertainment.svg') no-repeat center;
    background-size: contain;
}

.holiday-meals-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/holiday-meals.svg') no-repeat center;
    background-size: contain;
}

.holiday-drink-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/holiday-drink.svg') no-repeat center;
    background-size: contain;
}

.holiday-hotel-icon-sm {
    width: 30px;
    height: 30px;
    background: url('../assets/icon/holiday-hotel.svg') no-repeat center;
    background-size: contain;
}

.holiday-plane-icon-sm {
    width: 30px;
    height: 30px;
    background: url('../assets/icon/holiday-plane.svg') no-repeat center;
    background-size: contain;
}

.holiday-transfer-icon-sm {
    width: 30px;
    height: 30px;
    background: url('../assets/icon/holiday-transfers.svg') no-repeat center;
    background-size: contain;
}

.holiday-entertainment-icon-sm {
    width: 30px;
    height: 30px;
    background: url('../assets/icon/holiday-entertainment.svg') no-repeat center;
    background-size: contain;
}

.holiday-meals-icon-sm {
    width: 30px;
    height: 30px;
    background: url('../assets/icon/holiday-meals.svg') no-repeat center;
    background-size: contain;
}

.holiday-drink-icon-sm {
    width: 30px;
    height: 30px;
    background: url('../assets/icon/holiday-drink.svg') no-repeat center;
    background-size: contain;
}

.holiday-family-icon {
    width: 32px;
    height: 32px;
    background: url('../assets/icon/family.svg') no-repeat center;
    background-size: contain;
}

.holiday-adult-icon {
    width: 32px;
    height: 32px;
    background: url('../assets/icon/adult.svg') no-repeat center;
    background-size: contain;
}

.holiday-budget-icon {
    width: 32px;
    height: 32px;
    background: url('../assets/icon/budget.svg') no-repeat center;
    background-size: contain;
}

.holiday-lastminute-icon {
    width: 32px;
    height: 32px;
    background: url('../assets/icon/lastminute.svg') no-repeat center;
    background-size: contain;
}

.holiday-luxury-icon {
    width: 32px;
    height: 32px;
    background: url('../assets/icon/luxury.svg') no-repeat center;
    background-size: contain;
}
.enquiry-w-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/enquiry-w.svg') no-repeat center;
    background-size: contain;
}

.map-outline-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/map-outline.svg') no-repeat center;
    background-size: contain;
}

.cruise-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/cruise.svg') no-repeat center;
    background-size: contain;
}

.solo-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/solo.svg') no-repeat center;
    background-size: contain;
}

.shoe-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/shoe.svg') no-repeat center;
    background-size: contain;
}

.private-tour-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/private-tour.svg') no-repeat center;
    background-size: contain;
}

.multicenter-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/multicenter.svg') no-repeat center;
    background-size: contain;
}

.insurance-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/insurance.svg') no-repeat center;
    background-size: contain;
}

.card-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/card.svg') no-repeat center;
    background-size: contain;
}

.luggage-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/luggage.svg') no-repeat center;
    background-size: contain;
}

.seat-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/seat.svg') no-repeat center;
    background-size: contain;
}

.deposits-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/deposits.svg') no-repeat center;
    background-size: contain;
}

.badge-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/badge.svg') no-repeat center;
    background-size: contain;
}

.headphone-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/headphone.svg') no-repeat center;
    background-size: contain;
}

.call-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/call.svg') no-repeat center;
    background-size: contain;
}

.chat-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/chat.svg') no-repeat center;
    background-size: contain;
}

.call-w-icon {
    width: 20px;
    height: 20px;
    background: url('../assets/icon/call-w.svg') no-repeat center;
    background-size: contain;
}

.call-icon-2 {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/call-2.svg') no-repeat center;
    background-size: contain;
}

.sort-icon {
    width: 16px;
    height: 16px;
    background: url('../assets/icon/sort.svg') no-repeat center;
    background-size: contain;
}

.filter-icon {
    width: 16px;
    height: 16px;
    background: url('../assets/icon/filter.svg') no-repeat center;
    background-size: contain;
}

.map-icon {
    width: 16px;
    height: 16px;
    background: url('../assets/icon/map.svg') no-repeat center;
    background-size: contain;
}

.share-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/share.svg') no-repeat center;
    background-size: contain;
}

.email-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/email.svg') no-repeat center;
    background-size: contain;
}

.clock-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/clock.svg') no-repeat center;
    background-size: contain;
}

.location-icon {
    width: 18px;
    height: 18px;
    background: url('../assets/icon/location.svg') no-repeat center;
    background-size: contain;
}

.heart-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/heart.svg') no-repeat center;
    background-size: contain;
}

.group-user-icon {
    width: 20px;
    height: 20px;
    background: url('../assets/icon/group-user.svg') no-repeat center;
    background-size: contain;
}

.info-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/info.svg') no-repeat center;
    background-size: contain;
}

.info-b-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/info-b.svg') no-repeat center;
    background-size: contain;
}

.plane-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/airplane.svg') no-repeat center;
    background-size: contain;
}

.hotel-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/hotel.svg') no-repeat center;
    background-size: contain;
}

.deal-flight-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/icon/deal-flight.svg') no-repeat center;
    background-size: contain;
}

.deal-hotel-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url('../assets/icon/deal-hotel.svg') no-repeat center;
    background-size: contain;
}

.deal-car-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/icon/deal-car.svg') no-repeat center;
    background-size: contain;
}

.deal-activities-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../assets/icon/deal-activities.svg') no-repeat center;
    background-size: contain;
}

.tick-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/typcn_tick.svg') no-repeat center;
    background-size: contain;
}

.spoon-icon-2 {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/spoon-2.svg') no-repeat center;
    background-size: contain;
}

.youtube-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/youtube.svg') no-repeat center;
    background-size: contain;
}

.whatsapp-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/whatsapp.svg') no-repeat center;
    background-size: contain;
}

.twitter-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/twitter.svg') no-repeat center;
    background-size: contain;
}

.pinterest-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/pinterest.svg') no-repeat center;
    background-size: contain;
}

.instagram-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/instagram.svg') no-repeat center;
    background-size: contain;
}

.facebook-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/facebook.svg') no-repeat center;
    background-size: contain;
}

.thread-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/threads.svg') no-repeat center;
    background-size: contain;
}

.gym-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/gym.svg') no-repeat center;
    background-size: contain;
}

.spa-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/spa.svg') no-repeat center;
    background-size: contain;
}

.ac-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/ac.svg') no-repeat center;
    background-size: contain;
}


.pool-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/pool.svg') no-repeat center;
    background-size: contain;
}

.google-icon {
    width: 18px;
    height: 18px;
    background: url('../assets/icon/google.svg') no-repeat center;
    background-size: contain;
}

.ab-star-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/ab-star.svg') no-repeat center;
    background-size: contain;
}

.ab-clock-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/ab-clock.svg') no-repeat center;
    background-size: contain;
}

.ab-ribbon-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/ab-ribbon.svg') no-repeat center;
    background-size: contain;
}

.ab-trust-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/ab-trust.svg') no-repeat center;
    background-size: contain;
}

.ab-care-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/ab-care.svg') no-repeat center;
    background-size: contain;
}

.parking-icon {
    width: 24px;
    height: 24px;
    background: url('../assets/icon/parking.svg') no-repeat center;
    background-size: contain;
}

.apple-icon {
    width: 40px;
    height: 34px;
    background: url('../assets/icon/apple-pay.svg') no-repeat center;
    background-size: contain;
}

.g-pay-icon {
    width: 40px;
    height: 34px;
    background: url('../assets/icon/g-pay.svg') no-repeat center;
    background-size: contain;
}

.klarna-icon {
    width: 40px;
    height: 34px;
    background: url('../assets/icon/klarne-pay.svg') no-repeat center;
    background-size: contain;
}

.paypal-icon {
    width: 40px;
    height: 34px;
    background: url('../assets/icon/paypal.svg') no-repeat center;
    background-size: contain;
}


.car-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/car.svg') no-repeat center;
    background-size: contain;
}

.shuttle-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/shuttle.svg') no-repeat center;
    background-size: contain;
}

.dest-clock-icon {
    width: 32px;
    height: 32px;
    background: url('../assets/icon/dest_clock.svg') no-repeat center;
    background-size: contain;
}

.dest-lang-icon {
    width: 32px;
    height: 32px;
    background: url('../assets/icon/dest_lang.svg') no-repeat center;
    background-size: contain;
}


.dest-temp-icon {
    width: 32px;
    height: 32px;
    background: url('../assets/icon/dest_temp.svg') no-repeat center;
    background-size: contain;
}


.dest-currency-icon {
    width: 32px;
    height: 32px;
    background: url('../assets/icon/dest-currency.svg') no-repeat center;
    background-size: contain;
}


.dest-plane-icon {
    width: 32px;
    height: 32px;
    background: url('../assets/icon/dest-plane.svg') no-repeat center;
    background-size: contain;
}


.ht-cruise-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/ht-cruise.svg') no-repeat center;
    background-size: contain;
}

.ht-cruise-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/ht-cruise.svg') no-repeat center;
    background-size: contain;
}

.ht-ski-snow-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/ht-ski-snow.svg') no-repeat center;
    background-size: contain;
}

.ht-adventure-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/ht-adventure.svg') no-repeat center;
    background-size: contain;
}

.ht-beach-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/ht-beach.svg') no-repeat center;
    background-size: contain;
}

.ht-family-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/ht-family.svg') no-repeat center;
    background-size: contain;
}

.ht-all-inclusive-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/ht-all-inclusive.svg') no-repeat center;
    background-size: contain;
}

.ht-tropical-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/ht-tropical.svg') no-repeat center;
    background-size: contain;
}

.ht-romantic-icon {
    width: 40px;
    height: 40px;
    background: url('../assets/icon/ht-romantic.svg') no-repeat center;
    background-size: contain;
}

.mission-icon {
    width: 60px;
    height: 60px;
    background: url('../assets/icon/mission.svg') no-repeat center;
    background-size: contain;
}

.vission-icon {
    width: 60px;
    height: 60px;
    background: url('../assets/icon/vission.svg') no-repeat center;
    background-size: contain;
}

.search-FH-icon {
    width: 60px;
    height: 60px;
    background: url('../assets/icon/search-F+H1.svg') no-repeat center;
    background-size: contain;
}

.search-FH-active-icon {
    width: 60px;
    height: 60px;
    background: url('../assets/icon/search-F+H-active1.svg') no-repeat center;
    background-size: contain;
}

.search-holidays-icon {
    width: 60px;
    height: 60px;
    background: url('../assets/icon/search-holidays1.svg') no-repeat center;
    background-size: contain;
}

.search-holidays-active-icon {
    width: 60px;
    height: 60px;
    background: url('../assets/icon/search-holidays-active1.svg') no-repeat center;
    background-size: contain;
}

.search-cruise-icon {
    width: 60px;
    height: 60px;
    background: url('../assets/icon/search-cruise1.svg') no-repeat center;
    background-size: contain;
}

.search-cruise-active-icon {
    width: 60px;
    height: 60px;
    background: url('../assets/icon/search-cruise-active1.svg') no-repeat center;
    background-size: contain;
}

.search-hotel-icon {
    width: 60px;
    height: 60px;
    background: url('../assets/icon/search-hotel1.svg') no-repeat center;
    background-size: contain;
}

.search-hotel-active-icon {
    width: 60px;
    height: 60px;
    background: url('../assets/icon/search-hotel-active1.svg') no-repeat center;
    background-size: contain;
}

.atol-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: url('../assets/icon/atol.svg') no-repeat center;
    background-size: contain;
}

.transparent-pricing-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: url('../assets/icon/transparent-pricing.svg') no-repeat center;
    background-size: contain;
}

.tailor-made-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: url('../assets/icon/tailor-made.svg') no-repeat center;
    background-size: contain;
}

.global-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: url('../assets/icon/global.svg') no-repeat center;
    background-size: contain;
}

.approach-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: url('../assets/icon/approach.svg') no-repeat center;
    background-size: contain;
}

.booking-options-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: url('../assets/icon/booking-options.svg') no-repeat center;
    background-size: contain;
}

.handshake-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: url('../assets/icon/handshake.svg') no-repeat center;
    background-size: contain;
}

.customer-support-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: url('../assets/icon/customer-support.svg') no-repeat center;
    background-size: contain;
}

.atol-icon-sm {
    width: 40px;
    height: 40px;
    margin: 20px auto 15px;
    background: url('../assets/icon/atol.svg') no-repeat center;
    background-size: contain;
}

.transparent-pricing-sm {
    width: 40px;
    height: 40px;
    margin: 20px auto 15px;
    background: url('../assets/icon/transparent-pricing.svg') no-repeat center;
    background-size: contain;
}

.tailor-made-icon-sm {
    width: 40px;
    height: 40px;
    margin: 20px auto 15px;
    background: url('../assets/icon/tailor-made.svg') no-repeat center;
    background-size: contain;
}

.global-icon-sm {
    width: 40px;
    height: 40px;
    margin: 20px auto 15px;
    background: url('../assets/icon/global.svg') no-repeat center;
    background-size: contain;
}

.approach-icon-sm {
    width: 40px;
    height: 40px;
    margin: 20px auto 15px;
    background: url('../assets/icon/approach.svg') no-repeat center;
    background-size: contain;
}

.booking-options-icon-sm {
    width: 40px;
    height: 40px;
    margin: 20px auto 15px;
    background: url('../assets/icon/booking-options.svg') no-repeat center;
    background-size: contain;
}

.handshake-icon-sm {
    width: 40px;
    height: 40px;
    margin: 20px auto 15px;
    background: url('../assets/icon/handshake.svg') no-repeat center;
    background-size: contain;
}

.customer-support-icon-sm {
    width: 40px;
    height: 40px;
    margin: 20px auto 15px;
    background: url('../assets/icon/customer-support.svg') no-repeat center;
    background-size: contain;
}

.border-muted {
    border: 1.5px solid #C0C0C0;
}

.v-divider {
    border-left: 2px solid #88898a80;
}

.border-grey {
    border-color: #AEAEAE;
}

.destination-tabs ul {
    list-style: none;
    display: flex;
    gap: 40px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    height: 40px;
    /* ✅ allow next row */
}

.destination-tabs li a {
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    color: #8c8c8c;
    position: relative;
    padding-bottom: 6px;
    transition: 0.3s ease;
}

/* Active Tab */
.destination-tabs li a.active {
    color: #000;
    font-weight: 600;
}

.destination-tabs li a.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #000;
}

/* Hover */
.destination-tabs li a:hover {
    color: #000;
}

.pl-header {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.pl-header-nav {
    padding: 20px 0;
    position: relative;
}

.pl-header-nav>ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    gap: 35px;
    margin: 0;
    padding: 0;
}

.pl-header-nav ul li a {
    text-decoration: none;
    color: #060606;
    font-weight: 600;
    transition: 0.3s;
}

.pl-mega-menu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 999;

    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition:
        max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        transform 0.35s ease;
}

.pl-mega-menu .container {
    max-width: 1200px;
}

.pl-mega-trigger.active .pl-mega-menu {
    max-height: 1200px;
    opacity: 1;
    transform: translateY(0);
}

.pl-nav-link i {
    transition: transform 0.35s ease;
}

.pl-mega-trigger.active .pl-nav-link i {
    transform: rotate(180deg);
}

.pl-mega-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 15px;
    border-bottom: 1px solid #D7D7D7;
    padding-bottom: 8px;
}

.pl-mega-menu ul {
    padding-left: 0;
}

.pl-mega-menu ul li {
    margin-bottom: 8px;
}

.pl-mega-menu ul li a {
    color: #2D2D2D;
    font-weight: 600;
    font-size: 16px;
    transition: 0.3s;
}

.pl-mega-menu ul li a:hover {
    color: #0081FF;
}

.pl-mega-menu .border-end {
    border-right: 1px solid #D7D7D7 !important;
}

.pl-popular-list li {
    cursor: pointer;
    transition: 0.3s;
    padding: 8px 0;
}

.pl-popular-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pl-popular-list li.active a,
.pl-popular-list li a:hover {
    color: #0081FF;
}

/* Sub-destination switch */
.pl-sub-destination {
    display: none;
}

.pl-sub-destination.active {
    display: block;
}

/* ===== HAMBURGER ===== */
.pl-header-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.pl-header-toggle span {
    width: 25px;
    height: 3px;
    background: #333;
}

.pl-header-logo {
    width: 400px;
}

/* Tabs */
.pl-tab {
    opacity: 0.7;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.pl-tab.active {
    opacity: 1;
    border-bottom: 2px solid #fff;
    padding-bottom: 4px;
}

/* Inputs */
.pl-input {
    height: 45px;
}


/* VIEW BOOKING SUMMARY */
.mobile-view-summary {
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    padding: 12px 24px 12px 24px !important;
    padding: 10px 0;
    z-index: 1049;
}

.mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #a6a7a8;
    padding: 10px 0;
    z-index: 1050;
}

.mobile-cta-inner {
    display: flex;
    gap: 10px;
}

.enquire-btn {
    flex: 1;
    background: linear-gradient(83.54deg, #1E1B3A -32.28%, #534AA0 78.27%);
    color: #ffffff;
    border-radius: 10px;
    padding: 12px;
    font-weight: 700;
    text-align: center;
    font-size: 20px;
}

.enquire-btn:hover {
    background: #2a2a72;
    color: #fff;
}

.call-btn {
    flex: 1;
    background: #f3f4f6;
    color: #1f1f50;
    border-radius: 10px;
    padding: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    gap: 6px;
    border: 1px solid #d1d5db;
}

.call-btn i {
    font-size: 20px;
    font-weight: 700;
}

.call-btn:hover {
    background: #e5e7eb;
    color: #1f1f50;
}


.deal-bg {
    background: linear-gradient(90deg, #1E1B3A 0%, #534AA0 100%) !important;
}


/* Breadcrumb */
.breadcrumb-bar {
    background: #1f1f50;
    color: #c7d2fe;
    font-size: 16px;
    padding: 10px 0;
    padding-left: 150px;
}

/* Hero */
.nile-hero {
    position: relative;
    background: url("../assets/nile/nilebanner-1.jpg") center/cover no-repeat;
    display: flex;
    height: 450px;
    align-items: center;
}

.deal-detail-hero {
    position: relative;
    padding-top: 200px;
    background: url("../assets/deal-hero.jpg") center center/cover no-repeat;
    display: flex;
    height: 450px;
    align-items: center;
}

.multi-detail-hero {
    position: relative;
    padding-top: 200px;
    background: url("../assets/multi-detail-hero.png") center center/cover no-repeat;
    display: flex;
    height: 450px;
    align-items: center;
}

.multi-hero {
    position: relative;
    /* padding-top: 200px !important; */
    background: url("../assets/m-main.png") center center/cover no-repeat;
    display: flex;
    height: 450px;
    align-items: center;
}

.cruise-detail-hero {
    position: relative;
    padding-top: 200px;
    background: url("../assets/cruise-hero.png") center center/cover no-repeat;
    display: flex;
    height: 450px;
    align-items: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 50%)
}

.hero-content {
    position: relative;
    color: #fff;
    margin-left: 0;
    margin-right: auto;
}

.nile-content {
    color: #fff;
    z-index: 2;
}

/* Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #3f8599;
    color: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
}

/* Heading */
.hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-title span {
    color: #ffcc00;
    font-weight: 800;
}

/* Text */
.hero-text {
    font-size: 20px;
    font-weight: 600;
    max-width: 700px;
    margin-bottom: 32px !important;
    color: #e5e7eb;
}

/* Buttons */
.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.deal-detail-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---- Nile Place Card ---- */
.nile-place-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 240px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nile-place-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.nile-place-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nile-place-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 50%, transparent 100%);
    padding: 40px 16px 16px;
    text-align: center;
}

.nile-place-overlay a {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0;
}

/* ---- Load More Btn ---- */
.nile-load-more-btn {
    display: inline-block;
    padding: 10px 28px;
    border: 1px solid #1A92B5;
    border-radius: 999px;
    color: #1A92B5;
    font-size: 18px;
    font-weight: 700;
    background: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nile-load-more-btn:hover {
    background: #1A92B5;
    color: #ffffff;
}

.not-included h6 {
    color: rgba(255, 56, 60, 1) !important;
}

.not-included li {
    color: rgba(129, 74, 75, 1) !important;
}

.included {
    height: 350px !important;
}

.not-included {
    height: 350px !important;
}

.included h6 {
    color: rgba(38, 120, 59, 1) !important;
}

.included li {
    color: rgba(35, 116, 56, 1) !important;

}

.deal-card {
    border-radius: 18px;
    overflow: hidden;
    width: 100%;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.24);
    transition: transform 0.3s ease;
}

.deal-card:hover {
    transform: translateY(-1px);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.34);
}

.deal-body {
    padding: 16px;
}

.deal-body h6 {
    font-weight: 700;
    font-size: 18px;
    text-align: start;
    margin-bottom: 14px;
    line-height: 1.4;

    white-space: nowrap;
    /* ✅ Force single line */
    overflow: hidden;
    /* ✅ Hide overflow */
    text-overflow: ellipsis;
    /* ✅ Show ... */
}

.deal-tags {
    gap: 6px;
    margin: 0 0 12px 0;
    height: 100px;
    text-align: start;
    align-content: flex-start;
    font-weight: 600;
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border: 1px solid #2A1B60;
    color: #2A1B60;
    background: white;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.view-all-btn:hover {
    background: #2A1B60;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(42, 27, 96, 0.2);
}

/* ---- Cruise Filter Buttons ---- */
.cruise-filter-btn {
    padding: 6px 20px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 2px solid #1A92B5;
    background: #ffffff;
    color: #1a1a2e;
}

.cruise-filter-btn:hover {
    border-color: #1A92B5;
    color: #1A92B5;
}

.cruise-filter-btn.active {
    background: #1A92B5;
    border-color: #1A92B5;
    color: #ffffff;
}

/* ---- MULTICENTER Filter Buttons ---- */
.multicenter-filter-btn {
    padding: 6px 20px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 2px solid #1A92B5;
    background: #ffffff;
    color: #1a1a2e;
}

.multicenter-filter-btn:hover {
    border-color: #1A92B5;
    color: #1A92B5;
}

.multicenter-filter-btn.active {
    background: #1A92B5;
    border-color: #1A92B5;
    color: #ffffff;
}

/* ---- Nile Cruise Card ---- */
.nile-cruise-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 330px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nile-cruise-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.nile-cruise-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nile-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2A1B60;
    padding: 8px 8px;
    text-align: center;
}

.nile-card-overlay a {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.nile-stars {
    color: #FFCC00;
    font-size: 16px;
    letter-spacing: 2px;
}

/* ---- Nile Badge ---- */
.nile-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 30px;
    color: #fff;
    z-index: 2;
}

.nile-badge-green {
    background: #34c759;
}

.nile-badge-orange {
    background: #ff8d28;
}


.cabin-types-btn {
    padding: 2px 10px 2px 10px !important;
}

.btn-view {
    background: #1f1f50 !important;
    color: #fff;
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
}

.btn-view:hover {
    background: #312e81;
    color: #fff;
}

.btn-deals {
    border-radius: 50px;
    padding: 10px 22px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.accordion-button:not(.collapsed) {
    color: black;
    background-color: white;
    font-size: 16px;
    font-weight: 700;
}

.divider-light {
    border-top: 1px solid #e4ebf3;
    margin: 1rem 0 0.8rem 0;
}

/* MODAL OVERLAY */
.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* MODAL BOX */
.login-modal {
    width: 420px;
    max-width: 95%;
    background: #FCFCFA;
    border-radius: 14px;
    padding: 25px;
    font-family: Arial;
}

/* HEADER */
.login-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.login-sub {
    color: #6b6b6b;
    font-size: 14px;
    margin-bottom: 20px;
}

/* TABS */
.login-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.login-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    font-weight: 600;
}

.login-tab.active {
    border-bottom: 3px solid #1a73e8;
    color: #1a73e8;
}

/* FORM */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    font-weight: 600;
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* BUTTON */
.login-btn {
    width: 100%;
    background: linear-gradient(90deg, #1E1B3A 0%, #534AA0 100%);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
}

/* OR LINE */
.or-line {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.or-line:before,
.or-line:after {
    content: "";
    flex: 1;
    border-bottom: 1px dashed #ccc;
}

.or-line span {
    margin: 0 10px;
    color: #888;
}

/* SOCIAL BUTTONS */
.social-btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 16px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.54);
    margin-bottom: 10px;
    cursor: pointer;
    background: #fff;
}

.apple-btn {
    background: #000;
    color: #fff;
    border: none;
}

/* HIDE */
.hidden {
    display: none;
}

/* CLOSE */
.close-modal {
    position: absolute;
    margin-left: 350px;
    margin-top: 0px;
    cursor: pointer;
    font-size: 20px;
}

.outline-none {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.h-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.h-card:hover {
    transform: translateY(-2px);
    box-shadow:
        8px 10px 14px rgba(0, 0, 0, 0.12);
}

.h-img {
    position: relative;
    height: 267px;
    overflow: hidden;
}

.h-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h-body {
    padding: 18px;
    text-align: center;
}

.hw-40px {
    height: 40px !important;
    width: 40px !important;
}

.hw-50px {
    height: 50px !important;
    width: 50px !important;
}

.hw-60px {
    height: 60px !important;
    width: 60px !important;
}

/* Travel Partner Section */
.partner-card {
    background-color: #1e1b3a;
    padding: 35px 25px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.partner-card:hover {
    background-color: #262247;
    box-shadow: 0 10px 20px rgba(154, 129, 201, 0.8);
}

.partner-icon {
    font-size: 32px;
    color: #b191ff;
    /* Lilac icon color */
    margin-bottom: 15px;
}

.partner-card h5 {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
}

.support-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 38px 20px;
    border: 1px solid #b5b6b8;
    border-radius: 14px;
    background: #fff;
    height: 100%;
    transition: all 0.25s ease;
}

.support-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.support-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #3f8599;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.support-icon i {
    color: #fff;
    font-size: 28px;
}

.support-content h6 {
    text-align: start;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1f1f50;
}

.support-content p {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #1f1f50;
}

/* HOTEL LIST PAGE STYLING */
.holiday-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: none;
}

.carousel-item img {
    height: 240px;
    object-fit: cover;
}

.upgrade-badge {
    top: 15px;
    left: 15px;
    background: #FF2D55;
    padding: 6px 12px;
    z-index: 1;
}

.image-count {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 1;
}

.transition-icon {
    transition: transform 0.3s ease;
}

[aria-expanded="true"] .transition-icon {
    transform: rotate(180deg);
}


.accordion-button {
    font-weight: 700;
}

.swiper-container-wrapper {
    position: relative;
}

.swiper-button-prev-custom,
.swiper-button-next-custom {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.swiper-button-prev-custom {
    left: -20px;
}

.swiper-button-next-custom {
    right: -20px;
}

.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover {
    background: #f8f9fa;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.swiper-button-prev-custom.swiper-button-disabled,
.swiper-button-next-custom.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: translateY(-50%) scale(1);
}

.swiper-button-prev-custom.swiper-button-disabled:hover,
.swiper-button-next-custom.swiper-button-disabled:hover {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-50%) scale(1);
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    font-size: 18px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
}


.deal-img {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.deal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.deal-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 20px;
    color: #fff;
    font-weight: 600;
    z-index: 2;
}

.duration-pill {
    position: absolute;
    bottom: 24px;
    right: 0px;
    background: #2A1B60;
    color: #fff;
    font-size: 14px;
    padding: 3px 5px 3px 9px;
    border-radius: 12px 0px 0px 12px;
    font-weight: 700;
    z-index: 2;
}

.deal-body {
    padding: 16px;
}

.deal-package {
    border: 0.5px solid #E7E7E7;
    background-color: #F3FFFF;
}



.tag {
    padding: 4px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #000000;
}

.deal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}

.price {
    font-weight: 700;
    font-size: 18px;
}

.price small {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
}

.btn-deal {
    background: #1e1b4b;
    color: #fff;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}

.btn-deal:hover {
    background: #312e81;
    color: #fff;
}

.swiper-pagination {
    position: relative !important;
    margin-top: 1rem;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #d1d5db;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #1e1b4b;
}

.site-footer {
    padding: 60px 0 17px 0;
}

.g-main-img img {
    height: 100%;
}

.g-sub-img img {
    width: 116px;
    height: 85px;
}

.g-sub-img .view-all-img img {
    width: 132px;
    height: 85px;
}

.custom-text {
    font-size: 16px;
}

.header-bg {
    background: var(--header-bg);
}

/* --- hero-about Section --- */
.hero-about {
    position: relative;
    height: 550px;
    background: url('../assets/JH/about.jpg') center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10%;
    color: var(--white);
}

.about-hero-content {
    position: relative;
    max-width: 600px;
    text-align: center;
    color: black;
}

.hero-about h1 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 10px;
}

.hero-about h1 span {
    display: block;
    font-size: 4rem;
    color: black;
    text-transform: uppercase;
}

.hero-about p {
    margin-top: 30px;
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 0.9;
    line-height: 1.3;
}

/* --- Who Are We --- */
.who-are-we {
    padding: 80px 0;
    text-align: center;
    background-color: var(--white);
}

.who-are-we p {
    max-width: 850px;
    margin: 0 auto 20px;
    color: var(--text-light);
    font-size: 1.05rem;
}

/* --- Our services-about --- */
.services-about {
    padding: 40px 0;
    background-color: #FBF7F1;
    text-align: center;
}

.services-about .section-title {
    text-align: center;
}

.services-about .section-tag {
    text-align: center;
}

.services-about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.service-card {
    background: var(--white);
    padding: 10px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: left;
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.service-card .num-visible {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.service-card .num-visible::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 17px;
    width: 62px;
    height: 62px;
    background: var(--text-accent);
    z-index: -1;
    border-radius: 50%;
    opacity: 0.4;
}

/* --- Mission & Vision --- */
.mission-vision {
    padding: 100px 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

/* --- Our Values --- */
.values {
    padding: 80px 0;
    color: var(--white);
    text-align: center;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.value-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.value-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

/* --- Safe Hands --- */
.safe-hands {
    padding: 80px 0;
    text-align: center;
}

.safe-hands p {
    max-width: 900px;
    margin: 0 auto 30px;
}

/* --- Footer CTA --- */
.footer-cta {
    padding: 0 0 60px 0;
    text-align: center;
}

.jh-footer {
    background: #ffffff;
    padding: 50px 40px 20px;
    font-family: Arial, sans-serif;
    color: #000000;
}

.jh-footer-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 40px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 30px;
}

.jh-footer-logo {
    max-width: 280px;
    margin-bottom: 20px;
}

.jh-footer-title {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
}

.jh-footer-heading {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
}

.jh-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jh-footer-col ul li {
    margin-bottom: 8px;
}

.jh-footer-col ul li a {
    text-decoration: none;
    color: #202020;
    transition: 0.3s;
}

.jh-footer-col ul li a:hover {
    color: #0081FF;
}

.jh-footer-contact li {
    margin-bottom: 10px;
}

.jh-footer-social {
    margin-top: 15px;
}

.jh-footer-social a {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    background: #e9e9e9;
    margin-right: 8px;
    border-radius: 50%;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    transition: 0.3s;
}

.jh-footer-social a:hover {
    background: #e9e9e9;
    color: #0081FF;
}

.jh-footer-bottom {
    text-align: center;
    padding-top: 20px;
    font-weight: 500;
    font-size: 16px;
    color: #181818;
}

/* --- DESTINATION-DETAILS Hero Section --- */
.hero-d-details {
    position: relative;
    height: 550px;
    background: url('../assets/JH/tenerife.jpg') center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    overflow: hidden;
}

.hero-d-details-overlay {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: rgba(0, 0, 0, 0.33);
    z-index: 1;
    border-radius: 24px;
}

.d-details-hero-content {
    position: relative;
    max-width: 700px;
    text-align: center;
    color: #FFFFFF;
    z-index: 2;
    padding: 0 20px;
}

.hero-d-details h1 {
    font-size: 3.9rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-d-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    opacity: 1;
    margin-bottom: 20px !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.hero-d-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1A92B5;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 26px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-d-cta:hover {
    background: #28a4ca;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Destination Info Tabs & Content */
.dest-info-tabs {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    border-bottom: 2px solid #eee;

}

.dest-info-tab {
    font-size: 1.25rem;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    position: relative;
    padding-bottom: 8px;
    transition: all 0.3s ease;
    font-family: 'Outfit', sans-serif;
}

.dest-info-tab:hover {
    color: #333;
}

.dest-info-tab.active {
    color: #000;
}

.dest-info-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #e91e63;
    border-radius: 2px;
}

.dest-info-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.dest-info-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dest-info-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #003377;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dest-info-paragraph {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 25px;
}

.dest-info-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.dest-info-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 600;
}

.read-more-btn {
    color: #e91e63;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    margin-left: 5px;
}

.read-more-btn:hover {
    text-decoration: underline;
}

.collapsed-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Map Sidebar Improvements */
.map-trigger {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.map-trigger:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.arrow-up-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.arrow-up-icon::after {
    content: '↗';
    color: white;
    font-size: 18px;
    font-weight: bold;
}

/* Travel Information Section */
.dest-travel-info-section {
    background: #1E1B3A;
    color: white;
}

.dest-travel-info-section .dest-title-main {
    color: white;
}

.dest-travel-info-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.dest-info-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    backdrop-filter: blur(5px);
}

.dest-info-card .dest-info-label {
    font-size: 16px;
    opacity: 0.85;
    font-weight: 400;
}

.dest-info-card .dest-info-value {
    font-size: 20px;
    font-weight: 700;
}

/* Monthly Temperature Grid */
.dest-month-temp-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
}

.dest-month-item {
    border-radius: 10px;
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform 0.2s ease;
}

.dest-month-item:hover {
    transform: scale(1.02);
}

.dest-month-name {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.dest-month-temp {
    font-size: 24px;
    font-weight: 700;
    color: #000;
}

/* Temperature color variants */
.dest-month-item.temp-low {
    background: #ffc107;
}

.dest-month-item.temp-med {
    background: #ff9800;
}

.dest-month-item.temp-high {
    background: #f57c00;
}

.dest-month-item.temp-vhigh {
    background: #e65100;
}

@media (min-width: 1200px) {}

@media (max-width: 1200px) {
    .hero-d-details-overlay {
        position: absolute;
        top: 24%;
        left: 2%;
        width: 96%;
        height: 55%;
        background: rgba(0, 0, 0, 0.33);
        z-index: 1;
        border-radius: 24px;
    }
}

@media (max-width: 1024px) {}

@media (max-width: 992px) {
    .destination-tabs ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 20px;
        scrollbar-width: none;
    }

    .destination-tabs ul::-webkit-scrollbar {
        display: none;
    }

    .destination-tabs li {
        flex: 0 0 auto;
    }
}

@media (min-width: 991px) and (max-width: 1200px) {
    .custom-text {
        font-size: 12px;
    }
}

@media (min-width: 992px) {
    .hero-content {
        max-width: 100%;
    }

    .breadcrumb-bar {
        font-size: 16px;
        padding: 10px 0 10px 40px;
    }

}

@media (max-width: 767.98px) {

    .swiper-slide {
        margin: 0 auto;
    }

    .swiper-button-prev-custom,
    .swiper-button-next-custom {
        width: 35px;
        height: 35px;
    }

    .swiper-button-prev-custom {
        left: -0.5rem;
    }

    .swiper-button-next-custom {
        right: -0.5rem;
    }

    .pl-header-logo {
        width: 150px;
    }

    .pl-header-toggle {
        display: flex;
    }

    .pl-header-nav {
        display: none;
        width: 100%;
        background: #fff;
    }

    .pl-header-nav.active {
        display: block;
    }

    /* Main menu vertical */
    .pl-header-nav>ul {
        flex-direction: column;
        gap: 0;
    }

    .pl-nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }


    /* Hide mega menu default */
    .pl-mega-menu {
        max-height: none !important;
        opacity: 1 !important;
        transform: none !important;
        display: none;
        position: static;
        box-shadow: none !important;
        padding: 10px 0 !important;
    }

    /* When opened */
    .pl-mega-trigger.mobile-open>.pl-mega-menu {
        display: block;
    }

    /* Convert mega columns into accordion blocks */
    .pl-mega-menu .row {
        flex-direction: column;
    }

    /* Keep Popular + Sub list side by side on mobile */
    .pl-mega-menu .pl-popular-list,
    .pl-mega-menu .pl-sub-destination {
        width: 100%;
    }

    /* Override bootstrap stacking */
    .pl-mega-menu .col-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Make sure row stays horizontal */
    .pl-mega-menu .row {
        flex-direction: row !important;
    }

    .pl-mega-menu .col-12,
    .pl-mega-menu .col-md-6,
    .pl-mega-menu .col-lg-3,
    .pl-mega-menu .col-lg-4,
    .pl-mega-menu .col-lg-8 {
        width: 100%;
        border: none !important;
        padding: 0 !important;
    }

    /* Sub Category Title Clickable */
    .pl-mega-title {
        cursor: pointer;
        padding: 12px 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Hide sub lists */
    .pl-mega-title+ul,
    .pl-sub-destination {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition:
            max-height 0.4s ease,
            opacity 0.3s ease;
    }

    /* When Open */
    .pl-mega-title.mobile-open+ul,
    .pl-sub-destination.mobile-open {
        max-height: 600px;
        opacity: 1;
    }

    /* Open sub list */
    .pl-mega-title.mobile-open+ul {
        display: block;
        padding-left: 15px;
    }

    .pl-sub-destination.mobile-open {
        display: block;
        padding-left: 15px;
        margin-top: 10px;
    }

    .pl-mega-title .mobile-chevron {
        font-size: 14px;
        transition: transform 0.3s ease;
    }

    /* Rotate when open */
    .pl-mega-title.mobile-open .mobile-chevron {
        transform: rotate(180deg);
    }

    /* Hide by default */
    .pl-accordion-content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.3s ease;
    }

    /* When open */
    .pl-mega-title.mobile-open+.pl-accordion-content {
        max-height: 1000px;
        opacity: 1;
    }

    .jh-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .jh-footer-top> :first-child {
        grid-column: 1 / -1;
    }

    .h-card {
        display: flex;
        align-items: stretch;
        height: 150px;
    }

    .h-img {
        width: 48%;
        height: 100%;
        border-radius: 10px;
    }

    .h-img img {
        height: 100%;
    }

    .h-body>div:first-child {
        width: 24px;
        min-width: 24px;
        display: flex;
        justify-content: center;
    }

    .h-body {
        width: 52%;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
        padding-left: 20px;
    }

    .h-body h5 {
        font-size: 15px;
        margin: 0;
    }

    .nile-cruise-card {
        height: 220px;
    }

    .cruise-filter-btn {
        font-size: 14px;
    }

    .hero-title {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .nile-place-card {
        height: 180px;
    }

    .multicenter-filter-btn {
        font-size: 14px;
        padding: 4px 16px;
    } 

    .hero-about {
        height: 300px;
        justify-content: center;
        padding-right: 0;
        text-align: center;
    }

    .about-hero-content {
        text-align: center;
        padding: 0 20px;
    }

    .hero-about h1 {
        font-size: 2rem;
    }

    .hero-about h1 span {
        font-size: 2.5rem;
    }

    .mission-vision {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .section-title {
        font-size: 1.25rem;
    }

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

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

@media (min-width: 768px) {

    .breadcrumb-bar {
        font-size: 16px;
        padding: 10px 0 10px 32px;
    }

    .hero-text {
        font-size: 15px;
    }

    .hero-actions {
        justify-content: flex-start;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .deal-card {
        margin: 0 auto;
        max-width: 350px;
    }
}

@media (min-width: 576px) {}

@media (max-width: 576px) {


    .hero-text {
        font-size: 16px;
        font-weight: 600;
        max-width: 700px;
        margin-bottom: 32px !important;
        color: #e5e7eb;
    }

    .breadcrumb-bar {
        padding-left: 30px !important;
    }

    .jh-footer {
        padding: 40px 20px;
    }

    .jh-footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .jh-footer-social {
        margin-top: 10px;
    }

    .dest-hero {
        height: 350px;
        background: url(../assets/JH/allinclusive.jpg) no-repeat center center;
    }

    /* Hero */
    .nile-hero,
    .multi-hero {
        height: 400px;
    }

    .deal-detail-hero,
    .cruise-detail-hero,
    .multi-detail-hero {
        height: 350px;
    }

    .cruise-detail-hero,
    .deal-detail-hero,
    .multi-detail-hero {
        padding-top: 0px;
    }

    .hero-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .hero-text {
        font-size: 16px;
        font-weight: 600;
        max-width: 700px;
        margin-bottom: 32px !important;
        color: #e5e7eb;
    }

    .nile-place-overlay {
        padding: 40px 4px 16px;
    }

    .nile-place-overlay a {
        font-size: 16px;
    }

    .nile-card-overlay a {
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
    }

    .destination-tabs li a {
        font-size: 16px !important;
    }

    .destination-tabs ul {
        gap: 10px !important;
    }

    .main-content>* {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    .g-sub-img img {
        width: 70px !important;
        height: 60px !important;
    }

    .g-sub-img .view-all-img img {
        width: 70px !important;
        height: 60px !important;
    }
    .mb-sm-20 {
        margin-bottom: 20px !important;
    }
    .fs-sm-10 {
        font-size: 10px !important;
    }

    .fs-sm-11 {
        font-size: 11px !important;
    }

    .fs-sm-12 {
        font-size: 12px !important;
    }

    .fs-sm-13 {
        font-size: 13px !important;
    }

    .fs-sm-14 {
        font-size: 14px !important;
    }

    .fs-sm-16 {
        font-size: 16px !important;
    }

    .fs-sm-18 {
        font-size: 18px !important;
    }

    .fs-sm-20 {
        font-size: 20px !important;
    }

    .fs-sm-24 {
        font-size: 24px !important;
    }

    .mb-sm-5 {
        margin-bottom: 10px !important;
    }

    .call-btn {
        font-size: 16px;
    }

    .call-btn i {
        font-size: 16px;
        font-weight: 700;
    }

    .enquire-btn {
        font-size: 16px;
    }

    .nile-card-overlay {
        padding: 4px 8px;
    }

    .hero-d-details-overlay {
        position: absolute;
        top: 24%;
        left: 2%;
        width: 96%;
        height: 55%;
        background: rgba(0, 0, 0, 0.33);
        z-index: 1;
        border-radius: 24px;
    }

    .hero-d-details h1 {
        font-size: 2rem;
    }

    .hero-d-subtitle {
        font-size: 1rem;
    }

    .dest-info-tab {
        font-size: 1rem;
    }

    .dest-info-title {
        font-size: 1rem;
    }

    .dest-info-paragraph {
        font-size: 0.875rem;
    }

    .otherdest-btn {
        font-size: 14px;
    }

}

@media (max-width: 480px) {}

input[type="radio"] {
    transform: scale(1.3);
    accent-color: #4E2899;
    cursor: pointer;
}

.srp-border {
    height: 80px !important;
    padding: 10px 20px;
    border: 1px solid #C0C0C0;
    border-radius: 8px;
}

.srp-border.selected {
    border: 2px solid #4E2899;
    background: rgba(78, 40, 153, 0.1);
}


/* Search Bar Tabs */
.jh-search-tabs-container {
    background: #fff;
    border-radius: 6px;
    display: inline-flex;
    top: 40px;
    padding: 0px 40px 0px;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
    gap: 20px;
}

.jh-search-tab {
    padding: 15px 25px 0px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #333;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.jh-search-tab.active {
    color: #1a92b5;
    font-weight: 700;
    border-bottom-color: #1a92b5;
}

/* .jh-search-tab.active span {
        font-weight: 400;
    } */

.jh-search-tab i {
    font-size: 24px;
}

.jh-search-tab span {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}

/* ── SEARCH BAR WRAPPER ── */
.jh-search-bar-wrapper {
    background: #fff;
    border-radius: 8px;
    padding: 80px 24px 24px;
    width: 100%;
    max-width: 1298px;

    box-shadow: 0 10px 20px rgba(42, 27, 96, 1);
    display: flex;
    align-items: flex-end;
    gap: 12px;
    position: relative;
    margin-top: -2px;
    flex-wrap: nowrap;
}

/* ── LAYOUT ROWS ── */
.jh-search-layout {
    display: flex;
    flex: 1;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}

.jh-search-layout.d-none {
    display: none !important;
}

/* ── FIELDS ── */
.jh-search-field {
    flex: 1;
    text-align: left;
    min-width: 0;
    position: relative;
    /* anchor for dropdown */
}

.jh-search-label {
    font-size: 13px;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
    display: block;
    white-space: nowrap;
}

.jh-search-input-group {
    background: #e9f4f7;
    border-radius: 8px;
    padding: 11px 14px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.2s;
    min-height: 46px;
}

.jh-search-input-group:hover,
.jh-search-input-group.active {
    border-color: #1a92b5;
    background: #fff;
    box-shadow: 0 0 10px rgba(26, 146, 181, 0.12);
}

.jh-search-input-group>i {
    color: #1a92b5;
    font-size: 16px;
    flex-shrink: 0;
}

.jh-search-input-group>span {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── SEARCH BUTTON ── */
.jh-search-btn-wrapper {
    flex-shrink: 0;
}

.jh-search-btn {
    border: none;
    padding: 10px 32px;
    font-size: 16px;
    font-weight: 700;
    height: 46px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.jh-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(45, 45, 99, 0.7);
}

.jh-more-options {
    color: #000;
    text-decoration: underline;
    font-weight: 700;
    font-size: 15px;
}

/* ════════════════════════════════
     DESTINATION DROPDOWN
  ════════════════════════════════ */
.jh-destination-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    width: 300px;
    overflow: hidden;
    animation: jh-dropIn 0.16s ease;
    border: 1px solid #e5eef2;
}

.jh-destination-dropdown.open {
    display: block;
}

@keyframes jh-dropIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown search bar */
.jh-dd-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #cacaca;
    background: #fff;
}

.jh-dd-search-bar i {
    color: #1a92b5;
    font-size: 15px;
    flex-shrink: 0;
}

.jh-dd-search-bar input {
    border: none;
    outline: none;
    font-size: 15px;
    color: #333;
    width: 100%;
    background: transparent;
    font-family: "Nunito", sans-serif;
}

.jh-dd-search-bar input::placeholder {
    color: #aaa;
}

.jh-dd-section-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.7px;
    color: #000000;
    text-transform: uppercase;
    padding: 10px 20px 4px;
}

.jh-dd-list {
    max-height: 250px;
    overflow-y: auto;
}

.jh-dd-list::-webkit-scrollbar {
    width: 4px;
}

.jh-dd-list::-webkit-scrollbar-thumb {
    background: #d5e5ec;
    border-radius: 4px;
}

.jh-dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.12s;
    gap: 10px;
    user-select: none;
}

.jh-dd-item:hover {
    background: #c5ecf8;
}

.jh-dd-item.jh-selected {
    background: #eaf6fa;
}

.jh-dd-item.jh-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.jh-dd-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.jh-dd-item-left i {
    color: #1a92b5;
    font-size: 13px;
}

.jh-dd-item-name {
    font-size: 16px;
    color: #222;
    font-weight: 400;
}

/* Custom checkbox */
.jh-dd-checkbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    background: #fff;
}

.jh-dd-item.jh-selected .jh-dd-checkbox {
    background: #1a92b5;
    border-color: #1a92b5;
}

.jh-dd-item.jh-selected .jh-dd-checkbox::after {
    content: "✓";
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

/* Limit notice */
.jh-dd-limit-notice {
    font-size: 14px;
    color: #c0392b;
    font-weight: 600;
    padding: 5px 14px 10px;
    display: none;
}

.jh-dd-limit-notice.show {
    display: block;
}

.jh-dd-no-results {
    padding: 16px;
    text-align: center;
    color: #aaa;
    font-size: 13px;
}

/* ════════════════════════════════
     SELECTED TAGS SLIDER in input
  ════════════════════════════════ */
/* Replace the single <span class="selected-val"> with this structure */
.jh-dest-content {
    display: flex;
    align-items: center;
    gap: 4px;
    /* flex: 1; */
    min-width: 0;
    overflow: hidden;
}

.jh-dest-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1a92b5;
    color: #fff;
    border-radius: 2px;
    padding: 2px 6px 2px 6px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.5;
}

.jh-dest-tag .jh-tag-remove {
    cursor: pointer;
    opacity: 0.8;
    font-size: 11px;
    line-height: 1;
    transition: opacity 0.15s;
    margin-left: 1px;
}

.jh-dest-tag .jh-tag-remove:hover {
    opacity: 1;
}

.jh-dest-placeholder {
    color: #555;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.jh-tags-track-wrapper {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    cursor: grab;
}

.jh-tags-track-wrapper.dragging {
    cursor: grabbing;
}

.jh-tags-track {
    display: flex;
    gap: 5px;
    transition: transform 0.25s ease;
    width: max-content;
    user-select: none;
    -webkit-user-select: none;
}

.jh-tags-track.no-transition {
    transition: none !important;
}

.jh-dep-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid #ddeaf0;
    width: 1025px;
    animation: jh-dropIn 0.16s ease;
    overflow: hidden;
}

.jh-dep-dropdown.open {
    display: block;
}

/* Departure search bar */
.jh-dep-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f5;
    background: #fff;
}

.jh-dep-search-bar i {
    color: #1a3a6b;
    font-size: 15px;
    flex-shrink: 0;
}

.jh-dep-search-input {
    border: 1.5px solid #1a3a6b;
    border-radius: 6px;
    outline: none;
    font-size: 13px;
    color: #333;
    width: 280px;
    max-width: 100%;
    background: #fff;
    font-family: "Nunito", sans-serif;
    padding: 8px 12px;
    transition: border-color 0.2s;
}

.jh-dep-search-input:focus {
    border-color: #1a92b5;
}

.jh-dep-search-input::placeholder {
    color: #aaa;
}

/* Scrollable body */
.jh-dep-body {
    padding: 14px 18px 18px;
    max-height: 370px;
    overflow-y: auto;
}

.jh-dep-body::-webkit-scrollbar {
    width: 5px;
}

.jh-dep-body::-webkit-scrollbar-thumb {
    background: #c5dde8;
    border-radius: 4px;
}

/* Section headings */
.jh-dep-section-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid #e8f3f8;
}

/* 4-column grid */
.jh-dep-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 10px;
    margin-bottom: 16px;
}

/* Checkbox item */
.jh-dep-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 8px;
    transition: background 0.12s;
    user-select: none;
}

.jh-dep-item:hover {
    background: #1a91b58a;
}

.jh-dep-item.jh-dep-selected {
    background: #e3f4fa;
}

.jh-dep-cb {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid #bbb;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all 0.15s;
}

.jh-dep-item.jh-dep-selected .jh-dep-cb {
    background: #1a3a6b;
    border-color: #1a3a6b;
}

.jh-dep-item.jh-dep-selected .jh-dep-cb::after {
    content: "✓";
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.jh-dep-item-name {
    font-size: 14px;
    color: #222;
    font-weight: 500;
    line-height: 1.3;
}

.amenity-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.amenity-card:hover {
    border-color: #b0bec5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.amenity-card i {
    font-size: 18px;
    color: #1a73e8;
    flex-shrink: 0;
}

.amenity-card span {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

/* Modal styles */
.modal-amenity-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    transition: border-color 0.15s;
}

.modal-amenity-card:hover {
    border-color: #2A1B60;
    background: #f5faff;
}

.modal-amenity-card i {
    font-size: 20px;
    color: #2A1B60;
    flex-shrink: 0;
}

.modal-amenity-card span {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
}

/* ════════════════════════════════
     RESPONSIVE
  ════════════════════════════════ */
@media (max-width: 1100px) {
    .jh-search-bar-wrapper {
        flex-wrap: wrap;
        padding: 80px 20px 20px;
    }

    .jh-search-layout {
        flex-wrap: wrap;
        flex: 0 0 100%;
    }

    .jh-search-field {
        flex: 1 1 calc(50% - 10px);
        min-width: 140px;
    }

    /* 4-column grid */
    .jh-dep-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px 10px;
        margin-bottom: 16px;
    }

    .jh-hero-title {
        font-size: 32px;
        margin-bottom: 0px;
    }

    .jh-search-btn-wrapper {
        flex: 0 0 100%;
    }

    .jh-dep-dropdown {
        width: 100%;
        left: 0;
    }

    .jh-search-btn {
        width: 100%;
        height: 46px;
    }
}

@media (max-width: 768px) {
    .jh-hero {
        padding: 40px 12px 60px;
        min-height: auto;
    }

    .jh-hero-title {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .jh-search-tabs-container {
        width: 100%;
        padding: 0;
        display: flex;
        justify-content: space-around;
        border-radius: 10px;
        gap: 0;
    }

    .jh-search-tab {
        flex: 1;
        padding: 10px 6px 10px;
    }

    .jh-search-tab i,
    .search-FH-icon::before,
    .search-hotel-icon::before,
    .search-cruise-icon::before,
    .search-holidays-icon::before {
        font-size: 18px;
    }

    .jh-search-tab span {
        font-size: 11px;
    }

    .jh-search-bar-wrapper {
        padding: 16px;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 0;
    }

    .jh-search-layout {
        flex-wrap: wrap;
        flex: 0 0 100%;
        gap: 8px;
    }

    .jh-search-field {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0;
    }

    .jh-search-field:first-child {
        flex: 0 0 100% !important;
    }

    .jh-destination-dropdown {
        width: 100%;
        left: 0;
    }

    .jh-search-btn-wrapper {
        flex: 0 0 100%;
    }

    .jh-search-btn {
        width: 100%;
    }

    .jh-more-options {
        font-size: 14px;
    }

    .jh-dep-dropdown {
        width: calc(100vw - 54px);
        left: 0;
        right: 0;
    }
}

@media (max-width: 480px) {
    .jh-hero-title {
        font-size: 26px;
    }

    .jh-search-field {
        flex: 0 0 100% !important;
    }

    .jh-search-tab span {
        font-size: 10px;
    }
}

@media (max-width: 992px) {
    .holiday-types-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .egypt-journey-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .holiday-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .partner-card {
        padding: 8px 5px;
    }

    .partner-card h5 {
        font-size: 12px;
        font-weight: 500;
    }

    .jh-hero {
        height: auto;
        padding: 40px 0 60px;
    }

    .jh-hero-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .jh-search-tabs-container {
        width: 100%;
        border-radius: 12px;
        margin-bottom: 20px;
        display: flex;
        padding: 0px 20px;
        top: 35px;
        justify-content: space-around;
    }

    .jh-search-tab {
        padding: 10px 5px;
        flex: 1;
    }

    .jh-search-tab i {
        font-size: 20px;
    }

    .jh-search-tab span {
        font-size: 14px;
    }

    .jh-search-bar-wrapper {
        flex-wrap: wrap;
        padding-top: 30px !important;
        padding: 15px;
        gap: 10px;
    }

    .jh-search-layout {
        flex: 0 0 100%;
        gap: 10px;
    }

    .jh-search-field {
        flex: 0 0 100% !important;
    }

    .jh-search-field:not(:first-child) {
        flex: 0 0 calc(100% - 5px) !important;
    }

    .jh-search-btn-wrapper {
        flex: 0 0 100%;
        margin-top: 10px;
    }

    .jh-destination-dropdown {
        width: 100%;
        left: 0;
        top: 100%;
    }

    .jh-more-options {
        color: #000;
        text-decoration: underline;
        font-weight: 700;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .holiday-types-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .holiday-type-card {
        height: 150px;
    }

    .holiday-type-name {
        font-size: 18px;
    }

    .egypt-card {
        height: 250px;
    }

    .egypt-journey-title p {
        background: linear-gradient(90deg, #1e1b3a, #574f9c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .partner-title-mobile {
        font-size: 12px;
    }
}

/* ════════════════════════════════
     GUEST DROPDOWN
  ════════════════════════════════ */
.jh-guest-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 9999;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.18);
    border: 1px solid #ddeaf0;
    width: 340px;
    animation: jh-dropIn 0.16s ease;
    overflow: hidden;
}

.jh-guest-dropdown.open {
    display: block;
}

/* Rooms container */
.jh-guest-rooms {
    padding: 6px 0 0;
}

/* Single room card */
.jh-guest-room {
    border: 1px solid #e4eff4;
    border-radius: 10px;
    margin: 10px 14px;
    padding: 14px 16px;
    background: #fff;
}

/* Room header row */
.jh-guest-room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.jh-guest-room-title {
    font-size: 15px;
    font-weight: 800;
    color: #1a3a6b;
}

.jh-guest-room-remove {
    background: none;
    border: none;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.15s;
    font-family: "Nunito", sans-serif;
}

.jh-guest-room-remove:hover {
    color: #c0392b;
}

/* Guest type row (Adults / Child) */
.jh-guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.jh-guest-row:last-child {
    margin-bottom: 0;
}

.jh-guest-type-label {
    flex: 1;
}

.jh-guest-type-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    display: block;
}

.jh-guest-type-sub {
    font-size: 11px;
    color: #999;
    display: block;
    margin-top: 1px;
}

/* Counter */
.jh-guest-counter {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid #d0dde4;
    border-radius: 8px;
    overflow: hidden;
}

.jh-guest-counter-btn {
    width: 34px;
    height: 34px;
    background: #fff;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: #1a92b5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    font-family: "Nunito", sans-serif;
    flex-shrink: 0;
}

.jh-guest-counter-btn:hover {
    background: #e9f4f7;
}

.jh-guest-counter-btn:disabled {
    color: #ccc;
    cursor: default;
    background: #fff;
}

.jh-guest-counter-val {
    min-width: 32px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #222;
    border-left: 1.5px solid #d0dde4;
    border-right: 1.5px solid #d0dde4;
    height: 34px;
    line-height: 34px;
    user-select: none;
}

/* Note text */
.jh-guest-note {
    font-size: 12px;
    color: #1a3a6b;
    padding: 0 16px 14px;
    line-height: 1.5;
}

.jh-guest-note strong {
    color: #1a92b5;
}

/* Footer */
.jh-guest-footer {
    display: flex;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid #eef2f5;
}

.jh-guest-add-room {
    flex: 1;
    background: #fff;
    border: 1px solid #222;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #222;
    padding: 10px 0;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Nunito", sans-serif;
}

.jh-guest-add-room:hover {
    background: #f5f5f5;
}

.jh-guest-add-room:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.jh-guest-done {
    flex: 1;
    background: #1f1f50;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    padding: 10px 0;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Nunito", sans-serif;
}

.jh-guest-done:hover {
    background: #33337a;
}

@media (max-width: 480px) {
    .jh-guest-dropdown {
        width: calc(100vw - 60px);
        right: 0;
        left: 0;
    }
}

/* ════════════════════════════════
     NIGHTS DROPDOWN
  ════════════════════════════════ */
.jh-nights-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    border: 1px solid #e0ecf2;
    width: 160px;
    overflow: hidden;
    animation: jh-dropIn 0.16s ease;
}

.jh-nights-dropdown.open {
    display: block;
}

.jh-nights-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 0;
}

.jh-nights-list::-webkit-scrollbar {
    width: 4px;
}

.jh-nights-list::-webkit-scrollbar-thumb {
    background: #d5e5ec;
    border-radius: 4px;
}

.jh-nights-item {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 6px;
    margin: 2px 6px;
}

.jh-nights-item:hover {
    background: #f0f8fb;
}

.jh-nights-item.jh-nights-selected {
    background: #e3f4fa;
    color: #1a3a6b;
    font-weight: 800;
}

/* ════════════════════════════════
     TRAVEL DATE DROPDOWN
  ════════════════════════════════ */
.jh-date-dropdown {
    display: none;
    position: absolute;
    z-index: 99999;
    background: #fff;
    top: 80px;
    left: -400px;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    border: 1px solid #ddeaf0;
    width: 1060px;
    max-width: calc(100vw - 24px);
    animation: jh-dropIn 0.14s ease;
    overflow: hidden;
}

.jh-date-dropdown.open {
    display: block;
}

/* Two-panel layout */
.jh-date-inner {
    display: flex;
    min-height: 320px;
}

/* ── LEFT: month pills ── */
.jh-date-months-col {
    width: 550px;
    flex-shrink: 0;
    padding: 14px 10px;
    overflow-y: auto;
    max-height: 400px;
    border-right: 1px solid #eef2f5;
}

.jh-date-months-col::-webkit-scrollbar {
    width: 4px;
}

.jh-date-months-col::-webkit-scrollbar-thumb {
    background: #c8dde8;
    border-radius: 4px;
}

.jh-date-month-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.jh-date-month-btn {
    background: #1a92b5;
    color: #fff;
    border: none;
    padding: 12px 4px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.15s,
        transform 0.1s;
    font-family: "Nunito", sans-serif;
    text-align: center;
    line-height: 1.3;
}

.jh-date-month-btn:hover {
    background: #1580a0;
    transform: scale(1.03);
}

.jh-date-month-btn.jh-date-month-active {
    background: #0f5e78;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px #1a92b5;
}

.jh-date-month-btn.jh-date-month-selected {
    background: #1f1f50;
    color: #ffffff;
}

.jh-date-month-btn.jh-date-month-selected:hover {
    background: #2a2a63;
}

/* ── RIGHT: calendar ── */
.jh-date-cal-col {
    flex: 1;
    padding: 14px 18px;
    min-width: 0;
    position: relative;
    /* anchor for month picker overlay */
}

.jh-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.jh-cal-nav-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #555;
    cursor: pointer;
    padding: 2px 10px;
    border-radius: 6px;
    transition: background 0.15s;
    font-family: "Nunito", sans-serif;
    line-height: 1;
}

.jh-cal-nav-btn:hover {
    background: #eef6fa;
    color: #1a92b5;
}

.jh-cal-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.jh-cal-nav-btn:disabled:hover {
    background: none;
}

.jh-cal-title {
    font-size: 15px;
    font-weight: 800;
    color: #1a3a6b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.jh-cal-title:hover {
    background: #eef6fa;
    color: #1a92b5;
}

.jh-cal-title-arrow {
    font-size: 13px;
    color: #1a92b5;
    transition: transform 0.2s;
    display: inline-block;
}

.jh-cal-title-arrow.open {
    transform: rotate(180deg);
}

.jh-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.jh-cal-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #aaa;
    padding: 4px 0;
}

.jh-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.jh-cal-day {
    text-align: center;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s;
}

.jh-cal-day:hover {
    background: #eef6fa;
    color: #1a92b5;
}

.jh-cal-day.jh-cal-empty {
    cursor: default;
}

.jh-cal-day.jh-cal-empty:hover {
    background: none;
}

.jh-cal-day.jh-cal-past {
    color: #ccc;
    cursor: not-allowed;
}

.jh-cal-day.jh-cal-past:hover {
    background: none;
    color: #ccc;
}

.jh-cal-day.jh-cal-today {
    color: #1a92b5;
    font-weight: 800;
}

.jh-cal-day.jh-cal-selected {
    background: #1a92b5;
    color: #fff;
}

.jh-cal-day.jh-cal-selected:hover {
    background: #1580a0;
    color: #fff;
}

/* ── Month picker overlay (inside cal col) ── */
.jh-cal-month-picker {
    display: none;
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    overflow-y: auto;
    z-index: 10;
    animation: jh-dropIn 0.14s ease;
}

.jh-cal-month-picker.open {
    display: block;
}

.jh-cal-month-picker::-webkit-scrollbar {
    width: 4px;
}

.jh-cal-month-picker::-webkit-scrollbar-thumb {
    background: #c8dde8;
    border-radius: 4px;
}

.jh-cal-mpicker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.jh-cal-mpicker-btn {
    background: #1a92b5;
    color: #fff;
    border: none;
    padding: 12px 4px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: "Nunito", sans-serif;
    text-align: center;
    line-height: 1.3;
    transition:
        background 0.15s,
        transform 0.1s;
}

.jh-cal-mpicker-btn:hover {
    background: #1580a0;
    transform: scale(1.03);
}

.jh-cal-mpicker-btn.jh-cal-mpicker-active {
    background: #0f5e78;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px #1a92b5;
}

/* ── Mobile ── */

@media (max-width: 768px) {
    .jh-date-dropdown {
        top: 50px;
        left: -15px;
        width: calc(100vw - 70px) !important;
    }

    .jh-date-months-col {
        display: none !important;
    }

    .jh-date-inner {
        min-height: auto;
    }

    .jh-date-cal-col {
        padding: 12px;
    }

    .jh-cal-day {
        padding: 6px 1px;
        font-size: 12px;
    }

    .jh-cal-mpicker-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .jh-date-dropdown {
        top: 50px;
        left: -15px;
        width: 500px !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .jh-date-dropdown {
        top: 60px;
        left: -10px;
        width: 680px;
    }

    .jh-date-months-col {
        width: 315px;
    }
}

/* Laptop */
@media (min-width: 992px) and (max-width: 1021px) {
    .jh-date-dropdown {
        left: -10px;
        width: 915px;
    }
}

/* Desktop */
@media (min-width: 1022px) {
    .jh-date-dropdown {
        left: -330px;
        width: 930px;
    }
}

@media (max-width: 400px) {
    .jh-cal-mpicker-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* GRID */
.cheapest-wrapper {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* COMMON CARD */
.day-card {
    text-align: center;
    padding: 15px 4px 0px 4px;
    background: #fff;
    cursor: pointer;
    transition: 0.3s;
}

/* ========================= */
/* SELECTED CARD */
/* ========================= */
.active-card {
    background: linear-gradient(83.54deg, #1E1B3A -32.28%, #534AA0 78.27%);

    color: #fff;
    position: relative;
}

.label {
    color: #003377;
}

.active-card .label {
    background: #fff;
    color: #534AA0;
    display: inline-block;
    padding: 1px 10px;
    border-radius: 4px;
}

/* Triangle */
.active-card::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #534AA0;
}

/* ========================= */
/* CHEAPEST CARD */
/* ========================= */
.cheapest {
    border: 1px solid #34C759;
}

.cheapest-label {
    background: #34C759;
    color: white;
    padding: 1px 18px;
    border-radius: 4px;
    display: inline-block;
}

.cheapest-price {
    color: #34C759;
}

/* MOBILE SLIDER */
@media (max-width: 768px) {
    .cheapest-wrapper {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 1px;
        scroll-snap-type: x mandatory;
    }

    .day-card {
        min-width: 130px;
        /* controls card size */
        max-width: 130px;
        flex: 0 0 auto;
        /* IMPORTANT: prevents full width */
        scroll-snap-align: center;
        padding: 12px 6px;
    }

    /* Hide scrollbar (optional clean UI) */
    .cheapest-wrapper::-webkit-scrollbar {
        display: none;
    }

    .cheapest-wrapper {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* BUTTON STYLE */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.left-btn {
    left: 0px;
}

.right-btn {
    right: 0px;
}

/* SHOW ONLY ON MOBILE */
@media (min-width: 768px) {
    .slider-btn {
        display: none;
    }
}

.slider-wrapper::before,
.slider-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 30px;
    height: 100%;
    z-index: 5;
}

.slider-wrapper::before {
    left: 0;
}

.slider-wrapper::after {
    right: 0;
}

.tab-link {
    text-decoration: none;
    color: #8a8a8a;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.tab-link:hover {
    color: #1f1f50;
    font-weight: 600;
    border-bottom-color: #1f1f50;
}

.tab-link.active {
    color: #1f1f50;
    border-bottom-color: #1f1f50;
    font-weight: 600;
}

.jh-cal-wrapper {
    max-width: 810px;
    margin: auto;
    background: #fff;
}

.jh-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.jh-cal-month-wrapper {
    position: relative;
    cursor: pointer;
}

.jh-cal-month {
    font-weight: 700;
    font-size: 18px;
}

.jh-cal-arrow {
    margin-left: 6px;
}

.jh-cal-nav {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.jh-cal-month-dropdown {
    position: absolute;
    top: 30px;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    display: none;
    z-index: 10;
    width: 160px;
}

.jh-cal-month-dropdown div {
    padding: 8px 12px;
    cursor: pointer;
}

.jh-cal-month-dropdown div:hover {
    background: #f4f2ff;
}

.jh-cal-days,
.jh-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.jh-cal-days {
    font-weight: 600;
    color: #2A1B60;
    font-size: 16px;
    border-top: 1px solid #C5C5C5;
    border-bottom: 1px solid #C5C5C5;
    padding: 4px 0px;
}

.jh-cal-grid {
    gap: 8px;
    padding-top: 15px;
}

.jh-cal-date {
    padding: 10px 5px;
    border-radius: 8px;
    cursor: pointer;
}

.jh-cal-date span {
    font-size: 20px;
    display: block;
    font-weight: 600;
    color: black;
}

.jh-cal-date small {
    font-size: 16px;
    font-weight: 600;
    color: #666;
}

.jh-cal-date:hover {
    background: #f4f2ff;
}

.jh-cal-selected {
    background: #1A92B5;
    color: white !important;
}

.jh-cal-selected:hover {
    background: #1185a8;
    color: white !important;
}

.jh-cal-selected span,
.jh-cal-selected small {
    color: white !important;
}

.jh-cal-cheapest span,
.jh-cal-cheapest small {
    color: #1A92B5;
    font-weight: 600;
}

.jh-cal-legend {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 13px;
    padding: 20px 0;
    border-top: 1px solid #e5e7eb;
}

.jh-cal-cheapest-dot,
.jh-cal-selected-dot {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 6px;
    background: #1A92B5;
}

@media (max-width: 576px) {
    /* .jh-cal-wrapper {
            padding: 15px;
        } */

    .jh-cal-grid {
        gap: 1px;
        padding-top: 15px;
    }


    .jh-cal-date {
        padding: 6px 3px;
        border-radius: 12px;
        cursor: pointer;
    }

    .jh-cal-date span {
        font-size: 16px;
        display: block;
        font-weight: 600;
    }

    .jh-cal-date small {
        font-size: 12px;
        font-weight: 600;
        color: #666;
    }
}

/* =================== */
/* CARD */
.dd-flight-card {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    border: 2px solid rgba(206, 206, 206, 1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    margin-bottom: 25px;
    cursor: pointer;
    transition: 0.3s ease;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.dd-flight-card.selected {
    border: 2px solid #4E2899;
    box-shadow: 0px 0px 10px 0px rgba(0, 129, 255, 1);
}

/* LEFT CONTENT */
.flight-left {
    padding: 20px;
    flex: 1;
}


.dd-flight-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 15px 0;
}

/* RIGHT SIDE */
.dd-flight-right {
    width: 270px;
    border-left: 2px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.dd-select-btn {
    background: linear-gradient(83.54deg, #1E1B3A -32.28%, #534AA0 78.27%);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
}

.dd-select-btn:hover {
    background: linear-gradient(83.54deg, #534AA0 -32.28%, #534AA0 78.27%);
}

.dd-included-btn {
    background: #1A92B5;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    width: 100%;
    cursor: default;
}

.input-width {
    width: 150px;
}

.custom-divider-bs {
    width: 33%;
    height: 1.05px;
    margin: 10px 0;
    background: repeating-linear-gradient(to right, #C5C5C5 5px, #E0E0DF 10px, transparent 0px, transparent 13px);
}

.custom-divider-flight {
    width: 80px;
    height: 2px;
    margin: 10px 0;
    background: repeating-linear-gradient(to right, #C5C5C5 5px, #E0E0DF 10px, transparent 0px, transparent 13px);
}

.airways-width {
    width: 80px;
}


@media(min-width: 567px) {
    .cal-height {
        height: 720px !important;
    }

    .cal-inner-height {
        height: 660px !important;
    }
}

@media(max-width: 567px) {
    .cal-inner-height {
        height: 540px;
    }
}

@media (max-width:1200px) {

    .dd-flight-card {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .flight-left {
        width: 100%;
        padding: 15px;
    }

    .dd-flight-right {
        width: 100%;
        border-left: none;
        border-top: 1px solid #eee;
        padding: 15px;
    }

    .dd-select-btn {
        width: 100%;
    }

}

@media (max-width: 1024px) {
    .hero-about h1 {
        font-size: 2.5rem;
    }

    .hero-about h1 span {
        font-size: 3.2rem;
    }

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

    .values-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .hero-d-details-overlay {
        position: absolute;
        top: 24%;
        left: 2%;
        width: 96%;
        height: 55%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1;
        border-radius: 24px;
    }
}

@media(max-width: 576px) {
    .custom-divider-flight {
        width: 70px;
    }

    .airways-width {
        width: 60px;
    }
}


.rotate-plane {
    transform: rotate(-45deg);
}

.offcanvas.offcanvas-end {
    width: 900px !important;
    transform: translateX(100%);
}

.hotel-tabs {
    position: sticky;
    top: -25px;
    z-index: 1000;
    background: #fff;
}

#overview,
#amenities,
#reviews,
#map {
    scroll-margin-top: 90px;
    /* tab height */
}

.price-toggle {
    font-size: 14px;
}

/* LABEL */
.toggle-label {
    font-size: 14px !important;
    font-weight: 600;
    color: #6c757d;
    transition: 0.3s;
}

.toggle-label.active {
    font-weight: 700;
    color: #4E2899;
}

/* SWITCH */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.switch input {
    display: none;
}

/* SLIDER */
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #1A92B5;
    border-radius: 30px;
    transition: 0.3s;
}

/* CIRCLE */
.slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

/* ACTIVE STATE */
.switch input:checked+.slider {
    background-color: #1A92B5;
}

.switch input:checked+.slider:before {
    transform: translateX(22px);
}

.page-item {
    padding: 6px 12px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.page-item:hover {
    border: 1px solid #2D2D2D;
}

.page-item.active {
    border: 1px solid #2D2D2D;
    color: #2D2D2D;
}

.page-item.dots {
    cursor: default;
    border: none !important;
}

.custom-divider {
    width: 100%;
    height: 2px;
    margin: 10px 0;
    background: repeating-linear-gradient(to right,
            #C5C5C5 0px,
            #e0e0e0 8px,
            transparent 8px,
            transparent 14px);
}

/* Board Options */
.board-option {
    padding: 2px 8px;
    border: 1px solid #060606;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.board-option.selected {
    border: 2px solid #4E2899;
    background: rgba(78, 40, 153, 0.1);
}

/* Room Card */
.room-card {
    border: 1px solid #ddd;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Default = mobile stacked */
}

.room-card.selected {
    border: 2px solid #4E2899;
}

.ex-slider {
    position: relative;
    width: 300px;
    height: 212px;
    overflow: hidden;
    border-radius: 14px 0px 0px 14px;
}

@media (max-width: 991px) {
    .ex-slider {
        width: 100%;
        height: 230px;
        border-radius: 14px 14px 0 0;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .ex-slider {
        height: 292px;
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .ex-slider {
        height: 230px;
    }
}


.ex-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.ex-slider img.active {
    display: block;
}

.ex-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7);
    border: none;
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 50%;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 12px;
}

.price-btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: 2px solid #003377;
    background: white;
    color: #003377;
    font-weight: bold;
    cursor: pointer;
}

.selected-btn {
    background: linear-gradient(83.54deg, #1E1B3A -32.28%, #534AA0 78.27%);
    color: white;
    border: none;
    padding: 5px 20px;
    transition: transform 0.3s ease;
}

.selected-btn:hover {
    transform: scale(1.02);
    color: white;
}

.custom-shadow {
    box-shadow: none;
}

@media (min-width: 768px) {
    .custom-shadow {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .bg-md-white {
        background: white;
    }
}

@media (max-width: 767px) {
    .custom-shadow-sm {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
}

/* Large screens → row layout */
@media (min-width: 992px) {
    .room-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .ex-slider {
        flex: 0 0 350px;
        max-width: 350px;
    }

    .room-info {
        flex: 1;
        display: flex;
    }
}

/* Holiday Types Section */
.holiday-types-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.holiday-type-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 315px;
    cursor: pointer;
    transition:
        transform 0.5s ease,
        box-shadow 0.3s ease;
}

.holiday-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(154, 129, 201, 0.8);
}

.holiday-type-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.holiday-type-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    text-align: center;
}

.holiday-type-name {
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 0;
}


/* Egypt Journey Section */
.egypt-section {
    background: #fff;
    padding: 60px 0;
}

.egypt-journey-title {
    font-size: 60px;
    font-weight: 700;
    color: #1f1f50;
    line-height: 1.1;
    margin-bottom: 20px;
    line-height: 0.9;
    text-transform: uppercase;
}

.btn-journey {
    font-weight: 700;
    padding: 15px 30px;
    text-transform: uppercase;
    font-size: 16px;
    border: none;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-journey:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(100, 100, 255, 0.5);
}

.egypt-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 430px;
    transition: all 0.5s ease;
}

/* Image */
.egypt-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient overlay */
.egypt-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.5) 70%,
            rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
}

/* Text overlay */
.egypt-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    color: #fff;
    z-index: 2;
    /* above gradient */
}

/* Hover effect */
.egypt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(154, 129, 201, 0.6);
}

.egypt-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.egypt-card p {
    font-size: 13px;
    margin-bottom: 0;
    opacity: 0.9;
}

.egypt-journey-title p {
    background: linear-gradient(90deg, #1e1b3a, #574f9c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero Section */
.jh-hero {
    position: relative;
    height: 600px;
    background: url("../assets/JH/jh-hero.jpg") no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

/* Overlay */
.jh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
}

/* Content above overlay */
.jh-hero .container {
    position: relative;
    z-index: 2;
    color: #fff;
}

.jh-hero-title {
    font-size: 64px;
    font-weight: 800;
    margin-bottom: 40px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.travel-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

/* CARD */

.travel-card {
    position: relative;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.4s ease;
}

.travel-card:hover {
    box-shadow: 0 10px 20px rgba(154, 129, 201, 0.8);
}

/* IMAGE */

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

/* OVERLAY */

.travel-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.35) 40%,
            rgba(0, 0, 0, 0) 70%);
    z-index: 1;
}

/* TEXT AREA */

.travel-overlay {
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    color: white;
    z-index: 2;
}

/* TITLE */

.travel-overlay h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    transition: transform 0.35s ease;
}

.travel-card:hover .travel-overlay h2 {
    transform: translateY(-5px);
}

/* BUTTON */

.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid white;
    border-radius: 6px;
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: 600;

    opacity: 0;
    transform: translateY(20px);
    transition: all 0.35s ease;
}

.travel-card:hover .explore-btn {
    opacity: 1;
    transform: translateY(0);
}

/* HOVER EFFECT */

.travel-card:hover img {
    transform: scale(1.04);
}

@media (max-width: 1100px) {
    .travel-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .travel-section {
        grid-template-columns: 1fr;
    }

    .travel-card {
        height: 260px;
    }

    .travel-overlay h2 {
        font-size: 20px;
        margin-bottom: 0px;
    }

    .explore-btn {
        padding: 6px 10px;
    }
}

.dest-top-dest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.dest-top-dest-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    aspect-ratio: 16/10;
    cursor: pointer;
}

.dest-top-dest-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.dest-top-dest-card:hover img {
    transform: scale(1.1);
}

.dest-top-dest-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: background 0.3s ease;
}

.dest-top-dest-name {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
    text-align: center;
}

.dest-view-all-btn {
    display: block;
    margin: 0 auto;
    padding: 5px 20px;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    background: transparent;
    font-size: 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    width: fit-content;
}

.dest-view-all-btn:hover {
    background: var(--text-secondary);
    border: 1px solid var(--text-secondary);
    color: white;
}

@media (max-width: 992px) {
    .dest-top-dest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .dest-top-dest-grid {
        grid-template-columns: 1fr;
    }
}

.dest-section-padding {
    padding: 40px 0;
}

.dest-title-main {
    font-weight: 700;
    font-size: 2rem;
    color: black;
    text-align: center;
    margin-bottom: 8px;
}

.dest-subtitle-main {
    max-width: 650px;
    font-size: 1rem;
    margin: 0 auto 3rem;
    color: var(--text-dark);
    line-height: 1.3;
}
 
 
.otherdest-btn {
    color: #0081ff;
    background-color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    border-radius: 50px;
    padding: 5px 20px;
    transition: all 0.3 ease;
}

.otherdest-btn:hover {
    box-shadow: 0px 10px 20px 0px rgba(0, 129, 255, 0.4) !important;
    transform: translateY(-1px);
}

/* Hide scrollbar in Chrome/Edge */
.card::-webkit-scrollbar {
    width: 0px;
}

/* On hover: show scrollbar */
.card:hover {
    scrollbar-width: thin;
}

/* Show scrollbar when hovered */
.card:hover::-webkit-scrollbar {
    width: 6px;
}

/* Thumb styling */
.card:hover::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.card:hover::-webkit-scrollbar-thumb:hover {
    background: #999;
}

@media (min-width: 992px) {
    .row.equal-cols>div {
        flex: 1;
        max-width: 100%;
    }
}

/* ---Blog Hero Section --- */
.blog-hero {
    position: relative;
    height: 550px;
    overflow: hidden;
}

.blog-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    color: white;
}

.blog-hero-badge {
    background: #ffffff;
    color: #FF383C;
    padding: 4px 18px;
    border: 1px solid #FF383C;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    display: inline-block;
    width: fit-content;
    margin-bottom: 1.5rem;
}

.blog-hero-title {
    font-size: 3.125rem;
    font-weight: 700;
    line-height: 60px;
    max-width: 700px;
    margin-bottom: 1.5rem;
}

.blog-hero-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    font-weight: 700;
}

.blog-hero-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
}

.btn-read-now {
    background: #FFCC00;
    color: #000;
    border: none;
    padding: 8px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 20px;
    margin-top: 2rem;
    transition: all 0.3s ease;
}

.btn-read-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 204, 0, 0.3);
    background: #fcd126;
}

/* --- Featured Blogs --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.section-title {
    font-weight: 800;
}

.blog-nav-controls {
    display: flex;
    gap: 1rem;
}

.blog-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EAF3FF;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #4E2899;
}

.blog-nav-btn:hover {
    background: #4E2899;
    color: white;
    border-color: #4E2899;
}

.blog-nav-btn i {
    font-size: 24px !important;
}

.featured-blog-card {
    display: flex;
    gap: 3rem;
    background: transparent;
}

.blog-featured-img-wrapper {
    flex: 0 0 45%;
    height: 400px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

.blog-featured-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-blog-card:hover .blog-featured-img-wrapper img {
    transform: scale(1.05);
}

.blog-featured-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-featured-content h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: #1A1A1A;
}

.blog-featured-content p {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.blog-read-more-link {
    color: #F92485;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
    margin-top: 1rem;
}

.blog-read-more-link:hover {
    gap: 0.8rem;
}

/* Swiper Fixes */
.featured-blogs-swiper {
    width: 100%;
    padding-bottom: 20px;
}

.featured-blogs-swiper .swiper-slide {
    height: auto;
}

/* --- Collection --- */
.blog-filter-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.blog-filter-btn {
    padding: 6px 24px;
    border-radius: 100px;
    border: none;
    background: #F1F1F1;
    color: #000;
    font-weight: 700;
    transition: all 0.3s ease;
}

.blog-filter-btn.active {
    background: #2A1B60;
    color: white;
}

.blog-filter-btn:hover:not(.active) {
    background: #E5E5E5;
}

.blog-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #F0F0F0;
}

.blog-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.blog-card-img {
    height: 240px;
    overflow: hidden;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-body {
    padding: 1.5rem;
}

.blog-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #060606;
    line-height: 1.4;
}

.blog-card-meta {
    font-size: 0.75rem;
    color: #000;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.btn-load-more {
    border: 1px solid #2A1B60;
    color: #2A1B60;
    background: white;
    padding: 12px 40px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-load-more:hover {
    background: #2A1B60;
    color: white;
}

/* Filtering Transitions */
.blog-card-col {
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.blog-card-col.hide {
    opacity: 0;
    transform: scale(0.9);
    visibility: hidden;
    display: none;
}

/* --- Dot indicators --- */
.carousel-indicators-custom {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E0E0E0;
    cursor: pointer;
}

.dot.active {
    background: var(--text-secondary);
    width: 24px;
    border-radius: 4px;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .blog-hero {
        height: 400px;
    }

    .blog-hero-title {
        font-size: 2.5rem;
    }

    .featured-blog-card {
        flex-direction: column;
        gap: 1.5rem;
    }

    .blog-featured-img-wrapper {
        width: 100%;
        height: 300px !important;
        flex: 0 0 300px;
    }
}

@media (max-width: 768px) {
    .blog-hero {
        height: 350px;
    }

    .blog-hero-title {
        line-height: 35px;
    }

    .blog-hero-meta {
        font-size: .875rem;
    }

    .blog-hero-title {
        font-size: 1.75rem;
    }

    .blog-hero-overlay {
        padding: 1.5rem;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .blog-featured-img-wrapper {
        height: 220px !important;
        flex: 0 0 220px;
    }

    .blog-featured-content h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .blog-featured-content p {
        font-size: 1rem;
    }

    .blog-nav-btn {
        width: 35px;
        height: 35px;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #deedff;
        cursor: pointer;
        transition: all 0.3s ease;
        color: var(--text-secondary);
    }

    .blog-filter-btn {
        font-size: 14px;
    }

    .blog-card-title {
        font-size: 16px;
    }
}

/* --- blog-breadcrumbs --- */
.blog-breadcrumb-container {
    padding: 2rem 0 1rem;
}

.blog-breadcrumb {
    margin-bottom: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.blog-breadcrumb-item a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.blog-breadcrumb-item a:hover {
    color: #2A1B60;
}

.blog-breadcrumb-item.active {
    color: var(--text-muted);
    font-weight: 500;
}

/* --- blog-article Header --- */
.blog-article-header {
    text-align: center;
    padding: 2rem 0 4rem;
    margin: 0 auto;
}

.blog-article-title {
    font-size: 3rem;
    font-weight: 700;
    padding: 0px 40px;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: #000000;
}

.blog-article-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    color: #2A1B60;
    font-weight: 700;
    font-size: 1.1rem;
}

.blog-article-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 20px;
}

.blog-article-meta i {
    color: #2A1B60;
    font-size: 1.2rem;
}

/* --- blog-article Content --- */
.blog-article-content {
    margin: 0 auto;
    padding-bottom: 5rem;
}

.blog-article-intro {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 1rem !important;
    line-height: 1.6;
}

.blog-article-section {
    margin-bottom: 4rem;
}

.blog-article-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.blog-article-section p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.blog-article-section ul {
    margin-bottom: 1.5rem;
    padding-left: 1.2rem;
}

.blog-article-section li {
    font-size: 1rem;
    position: relative;
}

.blog-article-section b {
    font-weight: 700;
}

/* --- Featured Image --- */
.blog-featured-image-container {
    margin: 3rem 0;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.blog-featured-image-container img {
    width: 100%;
    height: 550px;
    display: block;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .blog-article-title {
        font-size: 2.75rem;
    }

    .blog-hero {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .blog-hero {
        height: 350px;
    }

    .blog-article-title {
        font-size: 1.5rem;
        line-height: 1.3;
        padding: 0px;
    }

    .blog-article-meta span {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 14px;
    }

    .blog-article-intro {
        font-size: 1rem;
    }

    .blog-article-header {
        text-align: center;
        padding: 2rem 0 2rem;
        margin: 0 auto;
    }

    .blog-article-section p {
        font-size: 1rem;
    }

    .blog-featured-image-container img {
        width: 100%;
        height: 300px;
        display: block;
    }

    .blog-article-meta {
        flex-direction: row;
        gap: 1rem;
    }

    .blog-article-section h2 {
        font-size: 1.25rem;
    }

    .blog-article-content {
        padding: 0 1rem 3rem;
    }
}


.tab-link {
    text-decoration: none;
    color: #8a8a8a;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.tab-link:hover {
    color: #1f1f50;
    font-weight: 600;
    border-bottom-color: #1f1f50;
}

.tab-link.active {
    color: #1f1f50;
    border-bottom-color: #1f1f50;
    font-weight: 600;
}

#overview,
#amenities,
#reviews,
#map {
    scroll-margin-top: 90px;
    /* tab height */
}

.tripadvisor-rating {
    align-items: center;
}

.tripadvisor-circle {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #00aa6c;
    /* TripAdvisor green */
    background: transparent;
    display: inline-block;
}

.tripadvisor-circle.filled {
    background: #00aa6c;
}

.offcanvas {
    z-index: 1051;
}

.offcanvas-header h5 {
    color: #1f1f50;
    font-weight: 700 !important;
    margin-bottom: 0px !important;
}

/* Backdrop */
.custom-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1050;
}

/* Modal wrapper */
.custom-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* Card */
.enquiry-card {
    width: 100%;
    max-width: 520px;
}

/* Why Visit Section */
.dest-why-visit-container {
    border-radius: 20px;
    padding: 60px 40px;
    margin-top: -150px;
    /* Overlap with hero */
    position: relative;
    z-index: 10;
}

@media (max-width: 768px) {
    .dest-why-visit-container {
        padding: 40px 20px;
        margin-top: -100px;
    }

}

/* TOURIST TAX STYLES */
.tt-section {
    padding: 60px 0;
    background-color: #F8F9FA;
}

.tt-header {
    text-align: center;
    margin-bottom: 40px;
}

.tt-title {
    font-size: 36px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
}

.tt-subtitle {
    font-size: 20px;
    color: #2D2D2D;
    margin: 0 auto;
    line-height: 1.2;
}

/* Desktop Tab Navigation */
.tt-nav {
    display: flex;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 24px 0px #00000040;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid #eee;
}

.tt-nav-item {
    flex: 1;
    padding: 9px;
    border: none;
    background: none;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    border-right: 1px solid #CDCDCD;
}

.tt-nav-item:last-child {
    border-right: none;
}

.tt-nav-item.active {
    background: #1A92B5;
    color: #fff;
}

/* Panels & Accordion Headers */
.tt-panel {
    margin-bottom: 10px;
}

.tt-accordion-header {
    display: none;
    /* Hidden on desktop */
    width: 100%;
    padding: 16px 20px;
    background: #fff;
    border: none;
    border-radius: 8px;
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 5px;
}

.tt-accordion-header.active {
    background: #0081FF;
    color: #fff;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.tt-accordion-header i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.tt-panel-content {
    padding: 30px;
    border-radius: 0 0 12px 12px;
    display: none;
    /* Hidden by default toggled by active class */
}

.tt-panel.active .tt-panel-content {
    display: block;
}

/* Content Typography */
.tt-content-title {
    font-size: 20px;
    font-weight: 700;
    color: #4E2899;
    margin-bottom: 6px;
}

.tt-content-desc {
    font-size: 20px;
    color: #000000;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 20px !important;
}

.tt-content-list {
    list-style: none;
    padding: 0;
}

.tt-content-list li {
    position: relative;
    padding-left: 20px;
    font-weight: 600;
    font-size: 18px;
    color: #000000;
}

.tt-content-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #333;
    font-weight: bold;
}

/* COUNTRY GUIDE CARD */
.guide-card {
    background: #fff;
    margin-top: 30px;
    border-radius: 30px;
    padding: 50px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.04);
    border: 1px solid #E9EFF5;
}

.guide-title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}

.guide-subtitle {
    font-size: 20px;
    color: #2D2D2D;
    text-align: center;
    margin-bottom: 40px !important;
    line-height: 1.2;
}

.guide-list {
    border-top: 2px solid #D7DEF0;
}

.guide-item {
    border-bottom: 2px solid #D7DEF0;
}

.guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    cursor: pointer;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
}

.guide-name {
    font-size: 24px;
    font-weight: 700;
    color: #4E2899;
}

.guide-icon {
    color: #1A92B5;
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.guide-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.guide-item.active .guide-body {
    max-height: 500px;
}

.guide-content {
    padding: 0 0 25px 0;
    color: #2D2D2D;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .tt-nav {
        display: none;
        /* Hide tabs on mobile */
    }

    .tt-accordion-header {
        display: flex;
        /* Show accordion on mobile */
    }

    .tt-panel-content {
        padding: 20px;
        border: 1px solid #eee;
        border-top: none;
        margin-bottom: 10px;
    }

    .tt-title {
        font-size: 24px;
    }

    .tt-subtitle {
        font-size: 15px;
    }

    .tt-content-title {
        font-size: 16px;
    }

    .tt-content-desc {
        font-size: 14px;
    }

    .tt-content-list li {
        font-size: 14px;
    }

    .guide-card {
        padding: 25px;
        border-radius: 20px;
    }

    .guide-title {
        font-size: 20px;
    }

    .guide-content {
        font-size: 16px;
    }

    .guide-subtitle {
        font-size: 12px;
    }

    .guide-name {
        font-size: 18px;
        font-weight: 700;
        color: #4E2899;
    }
}

/* Flights Included Popup Stylings */
.flight-info-container {
    position: relative;
}

.flight-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: fit-content;
}

.flight-toggle:hover .fs-12 {
    color: #0081ff;
}

.flight-details-popup {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 400px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 24px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    margin-bottom: 15px;
    border: 1px solid #f0f0f0;
}

.flight-details-popup.show {
    display: block;
    animation: flightFadeIn 0.3s ease;
}

.flight-details-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 30px;
    border-width: 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.flight-title-muted {
    font-size: 16px;
    color: #242424;
    font-weight: 700;
    margin-bottom: 6px;
}

.flight-route-bold {
    font-size: 14px;
    font-weight: 500;
    color: #1A1A1A;
    margin-bottom: 15px;
    line-height: 1.4;
}

.flight-schedule-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4px;
}

.flight-date-text {
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
}

.flight-time-main {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1;
}

.flight-dashed-spacer {
    flex-grow: 1;
    height: 0;
    border-top: 1.5px dashed #7e7e7e;
    margin: 0 18px 0px 18px;
}

.flight-hr-divider {
    height: 1.5px;
    background: #F0F0F0;
    margin: 12px 0;
}

@keyframes flightFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 380px) {
    .flight-details-popup {
        width: 280px;
        left: -10px;
    }
}

.faq-header {
    text-align: center;
    margin-bottom: 52px;
}

.faq-title {
    font-size: 32px;
    font-weight: 700;
    color: black;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.faq-subtitle {
    margin-top: 14px;
    font-size: 16px;
    font-weight: 300;
    color: black;
    line-height: 1.6;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 2px solid #D7DEF0;
}

.faq-item {
    border-bottom: 2px solid #D7DEF0;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 4px;
    gap: 24px;
    text-align: left;
    transition: background 0.2s;
}

.faq-question:hover .q-text {
    color: black;
}

.q-text {
    font-size: 18px;
    font-weight: 700;
    color: black;
    line-height: 1.5;
    transition: color 0.25s;
}

.q-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.q-icon svg {
    width: 14px;
    height: 14px;
    stroke: #0081ff;
    transition: stroke 0.25s;
}

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-answer {
    max-height: 400px;
}

.faq-answer-inner {
    padding: 0 4px 28px;
    font-size: 16px;
    font-weight: 400;
    color: #2c2c2c;
    line-height: 1.75;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s 0.05s, transform 0.3s 0.05s;
}

.faq-item.open .faq-answer-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered entrance */
.faq-item {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp 0.5s forwards;
}

.faq-item:nth-child(1) {
    animation-delay: 0.05s;
}

.faq-item:nth-child(2) {
    animation-delay: 0.12s;
}

.faq-item:nth-child(3) {
    animation-delay: 0.19s;
}

.faq-item:nth-child(4) {
    animation-delay: 0.26s;
}

.faq-item:nth-child(5) {
    animation-delay: 0.33s;
}

.faq-item:nth-child(6) {
    animation-delay: 0.40s;
}

.faq-item:nth-child(7) {
    animation-delay: 0.47s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-header {
    opacity: 0;
    animation: fadeUp 0.5s forwards;
}

/* Other Hotels Section */
.other-hotels-grid {
    display: grid;
    gap: 20px;
    margin-top: 40px;
}

.ph-hotel-mini-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-decoration: none;
}

.ph-hotel-mini-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.ph-hotel-mini-card:hover .ph-hotel-mini-img {
    transform: scale(1.03);
}

.ph-hotel-mini-name {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.2;
}

.ph-hotel-mini-location {
    font-size: 14px;
    color: #2c2c2c;
    margin: 0;
}

.view-all-container {
    display: flex;
    justify-content: center;
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border: 1px solid #1A92B5;
    color: #1A92B5;
    background: white;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.view-all-btn:hover {
    background: #1A92B5;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
}

/* Responsive Grid */
@media (min-width: 1400px) {
    .other-hotels-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 1399px) and (min-width: 1200px) {
    .other-hotels-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .other-hotels-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .other-hotels-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) and (min-width: 480px) {
    .other-hotels-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .other-hotels-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ph-hotel-mini-location {
        font-size: 12px;
    }
}

.other-dest-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.otherdest-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 100px;
    background: #1A92B5;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
    white-space: nowrap;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

@media (max-width: 576px) {
    .other-dest-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .otherdest-btn {
        width: fit-content;
        max-width: 90%;
        font-size: 14px;
        text-align: center;
        margin-bottom: 0px;
    }
    .hero-d-details { 
        height: 350px; 
    }
}

/* Hotel Card Redesign */
.ph-hotel-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    height: calc(100% - 20px);
    /* margin-bottom: 20px; */
}

.ph-hotel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.25);
}

.ph-hotel-img-wrapper {
    position: relative;
    width: 100%;
    height: 205px;
    overflow: hidden;
}

.ph-hotel-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ph-hotel-content {
    padding: 15px;
}

.ph-hotel-stars {
    color: #ffcc00;
    font-size: 11px;
    margin-bottom: 4px;
}

.ph-hotel-name {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.ph-hotel-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-size: 12px;
    margin-bottom: 10px;
}

.ph-hotel-location i, span {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.ph-hotel-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ph-hotel-rating img.ta-logo {
    width: 18px;
    height: auto;
}

.ta-rating-dots {
    display: flex;
    gap: 3px;
}

.ta-rating-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00aa6c;
    /* TripAdvisor Green */
}

.ta-rating-dots span.empty {
    background: #e0e0e0;
}

.ph-reviews-count {
    font-size: 14px;
    color: #3f3f3f;
    font-weight: 400;
}

/* Swiper Nav Improvements */
.dest-swiper-nav-btn {
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 48.5%;
    transform: translateY(-50%);
    z-index: 20;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    color: #333;
    font-size: 18px;
}

.dest-swiper-nav-btn i {
    font-size: 24px;
}

.dest-swiper-nav-prev {
    left: -20px;
}

.dest-swiper-nav-next {
    right: -20px;
}

.dest-swiper-nav-btn:hover {
    background: #f8f8f8;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.dest-swiper-nav-btn.swiper-button-disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

@media (max-width: 992px) {
    .dest-swiper-nav-prev {
        left: 5px;
    }

    .dest-swiper-nav-next {
        right: 5px;
    }
}

/* Top Hotels Redesign - Horizontal Cards */
.ph-hotel-card.horizontal {
    display: flex;
    flex-direction: row;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    width: 410px;
    border: 1px solid #f0f0f0;
}

.ph-hotel-card.horizontal:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.ph-hotel-card.horizontal .ph-hotel-img-wrapper {
    width: 45%;
    height: 150px;
}

.ph-hotel-card.horizontal .ph-hotel-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ph-hotel-card.horizontal .ph-hotel-content {
    width: 55%;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ph-hotel-card.horizontal .ph-hotel-stars {
    color: #ffcc00;
    font-size: 13px;
    margin-bottom: 5px;
}

.ph-hotel-card.horizontal .ph-hotel-stars i {
    margin-right: 2px;
}

.ph-hotel-card.horizontal .ph-hotel-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ph-hotel-card.horizontal .ph-hotel-location {
    font-size: 13px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ph-hotel-card.horizontal .ph-hotel-location i {
    margin-right: 0px;
}

.ph-hotel-card.horizontal .ph-hotel-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ph-hotel-card.horizontal .ta-logo {
    width: 18px;
    height: auto;
}

/* Filter Improvements */
.hotel-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.btn-filter {
    padding: 8px 25px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    border: 1px solid #2A1B60 !important;
    background: #EDEAF5;
    color: #000;
}

.btn-filter.active {
    background: #2A1B60;
    color: white !important;
}

.btn-filter-yellow {
    background: #1A92B5;
    border-color: #1A92B5 !important;
    color: #fff;
}

.btn-filter-yellow:hover {
    background: #1A92B5;
    color: #fff !important;
}

/* Swiper Adjustments */
.hotelSwiper {
    padding-bottom: 30px !important;
    height: auto;
}

.hotelSwiper .swiper-slide {
    height: auto;
    display: flex;
}

.dest-swiper-nav-btn {
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: all 0.3s ease;
}

.dest-swiper-nav-btn:hover {
    background: #f8f8f8;
    color: #0081ff;
}

@media (max-width: 1199px) {
    .ph-hotel-card.horizontal {
        flex-direction: row;
        height: auto;
        width: 100%;
        max-width: 100%;
    }

    .ph-hotel-card.horizontal .ph-hotel-img-wrapper {
        width: 40%;
        height: 140px;
    }

    .ph-hotel-card.horizontal .ph-hotel-content {
        width: 60%;
        padding: 10px 15px;
    }

    .ph-hotel-card.horizontal .ph-hotel-name {
        font-size: 15px;
        white-space: normal;
    }

    .ph-hotel-card.horizontal .ph-hotel-location {
        font-size: 12px;
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .hotel-filters {
        gap: 8px;
        justify-content: center;
        padding: 0 10px;
    }

    .btn-filter {
        padding: 6px 14px;
        font-size: 12px;
    }

    .dest-swiper-nav-btn {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .hotel-filters {
        gap: 6px;
    }

    .btn-filter {
        padding: 5px 12px;
        font-size: 11px;
    }

    .ph-hotel-card.horizontal .ph-hotel-img-wrapper {
        height: 160px;
    }

    .view-all-btn {
        padding: 5px 15px;
        font-size: 14px;
    }
}

.holiday-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: start;
}

.hlist-card {
    background: #1A92B5;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border: 1px solid #eee;
}

.hlist-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.hlist-card-img {
    height: 220px;
    overflow: hidden;
    border-left: 6px solid #1A92B5;
    border-radius: 10px 0px 0px 0px;
}

.hlist-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hlist-card-body {
    padding: 15px;
    text-align: center;
    background: #1A92B5;
}

.hlist-card-title a {
    font-weight: 700;
    color: #ffffff !important;
    font-size: 20px;
    line-height: 1.3;
    word-break: break-word;
    /* 👈 important */
    display: block;
}


.h-list-hero {
    position: relative;
    height: 550px;
    background: url('../assets/JH/d-list.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.h-list-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.h-list-hero-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    padding: 20px;
}

.h-list-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.h-list-hero p {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 0;
}


.dest-section-title {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.dest-section-desc {
    color: #333;
    margin-bottom: 2rem !important;
    max-width: 900px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}


/* Responsiveness */
@media (max-width: 1200px) {
    .holiday-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .holiday-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .dest-search-inner {
        flex-direction: column;
        align-items: stretch;
    }
}

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

    .h-list-hero h1 {
        font-size: 2.5rem;
    }

    .h-list-hero {
        height: 400px;
    }
}

@media (max-width: 576px) {
    .h-list-hero {
        height: 350px;
    }

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

    .h-list-hero h1 {
        font-size: 2rem;
    }

    .dest-search-bar-wrapper {
        margin-top: 0;
    }

    .dest-section-title {
        font-size: 20px;
    }

    .dest-section-desc {
        font-size: 15px;
    }
}

.holiday-hero {
    position: relative;
    height: 550px;
    background: url('../assets/JH/allinclusive.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.holiday-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}

.holiday-hero-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    padding: 20px;
}

.holiday-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.holiday-hero p {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.h-other-dest-btn {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 20px;
    background: #fff;
    text-decoration: none;
    font-size: 20px;
    color: #007bff;
    margin-bottom: 10px;
    white-space: nowrap;
}

.h-other-dest-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
}

@media (max-width: 576px) {
    .h-other-dest-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .h-other-dest-btn {
        width: fit-content;
        max-width: 90%;
        text-align: center;
        margin-bottom: 0px;
    }
}