:root {

    --hpd-ink: #101828;

    --hpd-text: #344054;

    --hpd-muted: #667085;

    --hpd-line: #e7eaf0;

    --hpd-blue: #2563eb;

    --hpd-indigo: #4f46e5;

    --hpd-cyan: #22d3ee;

    --hpd-yellow: #f5b800;

    --hpd-green: #12b76a;

    --hpd-soft: #f7f9fc;

    --hpd-card: #fff;

    --hpd-radius-xl: 32px;

    --hpd-radius-lg: 24px;

    --hpd-radius-md: 18px;

    --hpd-shadow: 0 24px 70px rgba(16, 24, 40, .10);

    --hpd-shadow-soft: 0 12px 34px rgba(16, 24, 40, .06);

}



.hpd-home {

    position: relative;

    overflow: hidden;

    color: var(--hpd-text);

    background: #fff;

    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

}



.hpd-home *,

.hpd-home *::before,

.hpd-home *::after {

    box-sizing: border-box

}



.hpd-home a {

    text-decoration: none

}



.hpd-home img {

    display: block;

    max-width: 100%

}



/* ========================= HERO: FULL BANNER ONLY ========================= */

.hpd-banner-hero {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: clamp(8px, 2vw, 30px) 0 clamp(28px, 3.4vw, 56px);

    background:

        radial-gradient(circle at 10% 14%, rgba(34, 211, 238, .13), transparent 28%),

        radial-gradient(circle at 91% 10%, rgba(245, 184, 0, .10), transparent 28%),

        radial-gradient(circle at 80% 78%, rgba(79, 70, 229, .09), transparent 30%),

        linear-gradient(180deg, #f8fbff 0%, #ffffff 88%);

}



.hpd-banner-pattern {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}



.hpd-banner-pattern-grid {

    position: absolute;

    inset: -16% -8% 0;

    opacity: .48;

    background-image:

        linear-gradient(rgba(37, 99, 235, .05) 1px, transparent 1px),

        linear-gradient(90deg, rgba(37, 99, 235, .05) 1px, transparent 1px);

    background-size: 42px 42px;

    transform: perspective(900px) rotateX(64deg) translateY(-18%) scale(1.18);

    transform-origin: top center;

    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .66) 48%, transparent 96%);

}



.hpd-banner-pattern-orb {

    position: absolute;

    display: block;

    border-radius: 50%;

    filter: blur(1px);

    animation: hpdBannerOrb 9s ease-in-out infinite alternate;

}



.hpd-banner-pattern-orb.orb-one {

    width: 320px;

    height: 320px;

    left: -130px;

    top: 18%;

    background: rgba(34, 211, 238, .08);

}



.hpd-banner-pattern-orb.orb-two {

    width: 280px;

    height: 280px;

    right: -90px;

    bottom: 4%;

    background: rgba(79, 70, 229, .07);

    animation-delay: -3s;

}



.hpd-banner-wrap {

    position: relative;

    width: min(100%, 1920px);

    margin: 0 auto;

    padding-inline: clamp(5px, 2.6vw, 34px);

}



.hpd-banner-slider {

    --hpd-banner-radius: clamp(11px, 1.7vw, 24px);

    position: relative;

    width: 100%;

    overflow: hidden;

    border: 1px solid rgba(214, 222, 235, .92);

    border-radius: var(--hpd-banner-radius);

    background: #f2f5f9;

    box-shadow: 0 24px 70px rgba(16, 24, 40, .11);

    cursor: grab;

    user-select: none;

    -webkit-user-select: none;

    touch-action: pan-y pinch-zoom;

    transform: translateZ(0);

}



.hpd-banner-slider.is-dragging {

    cursor: grabbing;

}



.hpd-banner-track {

    display: flex;

    width: 100%;

    align-items: flex-start;

    will-change: transform;

    transform: translate3d(0, 0, 0);

}



.hpd-banner-slide {

    position: relative;

    flex: 0 0 100%;

    width: 100%;

    min-width: 100%;

    opacity: .72;

    transition: opacity .42s ease, filter .42s ease;

    filter: saturate(.94) brightness(.98);

}



.hpd-banner-slide.is-active {

    opacity: 1;

    filter: saturate(1) brightness(1);

}



.hpd-banner-link {

    display: block;

    width: 100%;

    background: #f2f5f9;

    cursor: inherit;

}



.hpd-banner-link img {

    display: block;

    width: 100%;

    height: auto;

    max-height: none;

    object-fit: contain;

    object-position: center center;

    pointer-events: none;

    -webkit-user-drag: none;

    transform: translateZ(0);

}


/* Desktop / Mobile banner media support - kept in this file only */
.hpd-banner-media,
.hpd-banner-device-media {
    width: 100%;
}

.hpd-banner-device-media video {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    border: 0;
    pointer-events: none;
    -webkit-user-drag: none;
    transform: translateZ(0);
}

.hpd-banner-video {
    background: #101828;
}

.hpd-media-mobile {
    display: none;
}



.hpd-banner-slide.is-active .hpd-banner-link img {

    animation: hpdBannerReveal .58s cubic-bezier(.22, .84, .27, 1) both;

}



.hpd-banner-arrow {

    position: absolute;

    z-index: 8;

    top: 50%;

    width: clamp(32px, 3.2vw, 52px);

    height: clamp(32px, 3.2vw, 52px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .72);

    border-radius: 50%;

    background: rgba(15, 23, 42, .58);

    color: #fff;

    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);

    backdrop-filter: blur(12px);

    transform: translateY(-50%);

    transition: background .2s ease, transform .2s ease, opacity .2s ease;

}



.hpd-banner-arrow:hover {

    background: rgba(37, 99, 235, .88);

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

}



.hpd-banner-prev {

    left: clamp(8px, 1.3vw, 20px)

}



.hpd-banner-next {

    right: clamp(8px, 1.3vw, 20px)

}



.hpd-banner-dots {

    position: absolute;

    z-index: 8;

    left: 50%;

    bottom: clamp(6px, 1.4vw, 20px);

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, .58);

    border-radius: 999px;

    background: rgba(15, 23, 42, .38);

    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);

    backdrop-filter: blur(12px);

    transform: translateX(-50%);

}



.hpd-banner-dots button {

    width: 7px;

    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 999px;

    background: rgba(255, 255, 255, .58);

    transition: width .22s ease, background .22s ease, transform .22s ease;

}



.hpd-banner-dots button.is-active {

    width: 24px;

    background: #fff;

}



.hpd-banner-dots button:hover {

    transform: scale(1.18);

}



.hpd-banner-progress {

    position: absolute;

    z-index: 7;

    left: 0;

    right: 0;

    bottom: 0;

    height: 3px;

    overflow: hidden;

    background: rgba(255, 255, 255, .16);

}



.hpd-banner-progress span {

    display: block;

    width: 0;

    height: 100%;

    background: linear-gradient(90deg, #22d3ee, #2563eb, #4f46e5);

}



.hpd-btn-light {

    appearance: none;

    -webkit-appearance: none;

    width: auto;

    min-width: 146px;

    min-height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 11px 20px;

    border: 1px solid #dbe3f0;

    border-radius: 999px;

    background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%);

    color: #344054;

    font-size: 13px;

    line-height: 1;

    font-weight: 600;

    box-shadow: 0 10px 26px rgba(16, 24, 40, .07);

    cursor: pointer;

    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;

}



/* ========================= SECTIONS ========================= */

.hpd-section {

    position: relative;

    padding: clamp(64px, 7vw, 64px) 0

}



.hpd-why-section {

    background: #fff

}



.hpd-destination-section {

    background: linear-gradient(180deg, #f8fbff, #fff)

}



.hpd-packages-section {

    background: #fff

}



.hpd-testimonial-section {

    background: linear-gradient(180deg, #fff, #f7f9fc)

}



.hpd-section-head {

    margin-bottom: 30px

}



.hpd-section-head-centered {

    text-align: center;

    max-width: 760px;

    margin-left: auto;

    margin-right: auto

}



.hpd-section-head-row {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 24px

}



.hpd-section-head h2 {

    margin: 8px 0 8px;

    color: var(--hpd-ink);

    font-size: clamp(2rem, 3.3vw, 3.45rem);

    line-height: 1.08;

    letter-spacing: -.035em;

    font-weight: 600

}



.hpd-section-head p {

    max-width: 720px;

    margin: 0;

    color: var(--hpd-muted);

    line-height: 1.7

}



.hpd-section-kicker {

    color: #3156b7;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .10em;

    text-transform: uppercase

}



.hpd-section-kicker-light {

    color: #bfdbfe

}



.hpd-why-card {

    --hpd-card-rx: 0deg;

    --hpd-card-ry: 0deg;

    height: 100%;

    padding: 24px 20px;

    border: 1px solid #e9edf4;

    border-radius: 20px;

    background: #fff;

    box-shadow: var(--hpd-shadow-soft);

    transform: perspective(900px) rotateX(var(--hpd-card-rx)) rotateY(var(--hpd-card-ry));

    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease

}



.hpd-why-card:hover {

    border-color: #cdd8f6;

    box-shadow: 0 20px 50px rgba(37, 99, 235, .10);

    transform: perspective(900px) rotateX(var(--hpd-card-rx)) rotateY(var(--hpd-card-ry)) translateY(-4px)

}



.hpd-why-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: linear-gradient(135deg, #eef4ff, #f7f8ff);

    color: #3156e8;

    font-size: 19px

}



.hpd-why-card h3 {

    margin: 16px 0 8px;

    color: #1d2939;

    font-size: 15px;

    font-weight: 600

}



.hpd-why-card p {

    margin: 0;

    color: #98a2b3;

    font-size: 12px;

    line-height: 1.6

}



.hpd-destination-tabs {

    display: flex;

    gap: 8px;

    padding: 5px;

    border: 1px solid #e5eaf1;

    border-radius: 14px;

    background: #fff;

    box-shadow: 0 8px 22px rgba(16, 24, 40, .045)

}



.hpd-destination-tabs button {

    padding: 9px 14px;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color: #667085;

    font-size: 13px;

    font-weight: 600

}



.hpd-destination-tabs button.is-active {

    background: #172033;

    color: #fff

}



.hpd-destination-pane {

    display: none

}



.hpd-destination-pane.is-active {

    display: block

}



.hpd-destination-card {

    --hpd-card-rx: 0deg;

    --hpd-card-ry: 0deg;

    position: relative;

    height: 100%;

    overflow: hidden;

    border: 1px solid #e8edf4;

    border-radius: 22px;

    background: #fff;

    color: #344054;

    box-shadow: var(--hpd-shadow-soft);

    transform: perspective(1000px) rotateX(var(--hpd-card-rx)) rotateY(var(--hpd-card-ry));

    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease

}



.hpd-destination-card:hover {

    color: #344054;

    border-color: #cbd7f5;

    box-shadow: 0 24px 54px rgba(37, 99, 235, .11);

    transform: perspective(1000px) rotateX(var(--hpd-card-rx)) rotateY(var(--hpd-card-ry)) translateY(-5px)

}



.hpd-destination-image {

    position: relative;

    aspect-ratio: 4/3;

    overflow: hidden;

    background: #eef2f7

}



.hpd-destination-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .5s ease

}



.hpd-destination-card:hover .hpd-destination-image img {

    transform: scale(1.05)

}



.hpd-destination-price {

    position: absolute;

    left: 12px;

    bottom: 12px;

    padding: 6px 9px;

    border-radius: 999px;

    background: rgba(15, 23, 42, .72);

    color: #fff;

    font-size: 10px;

    font-weight: 600;

    backdrop-filter: blur(10px)

}



.hpd-destination-body {

    padding: 15px 16px 18px

}



.hpd-destination-body h3 {

    margin: 0;

    color: #1d2939;

    font-size: 17px;

    font-weight: 600

}



.hpd-destination-body p {

    display: -webkit-box;

    overflow: hidden;

    margin: 7px 0 0;

    color: #98a2b3;

    font-size: 11px;

    line-height: 1.55;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical

}



.hpd-destination-arrow {

    position: absolute;

    right: 14px;

    top: 14px;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: rgba(255, 255, 255, .90);

    color: #344054;

    box-shadow: 0 8px 20px rgba(16, 24, 40, .08);

    transition: transform .22s ease

}



.hpd-destination-card:hover .hpd-destination-arrow {

    transform: translate(2px, -2px)

}



.hpd-view-more-wrap {

    display: flex;

    justify-content: center;

    margin-top: 28px

}



#hpdHomePage .hpd-view-more-wrap .hpd-btn.hpd-btn-soft {

    appearance: none;

    -webkit-appearance: none;

    width: auto;

    min-width: 146px;

    min-height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 11px 20px;

    border: 1px solid #dbe3f0;

    border-radius: 999px;

    background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%);

    color: #344054;

    font-size: 13px;

    line-height: 1;

    font-weight: 600;

    box-shadow: 0 10px 26px rgba(16, 24, 40, .07);

    cursor: pointer;

    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease

}



#hpdHomePage .hpd-view-more-wrap .hpd-btn.hpd-btn-soft:hover {

    transform: translateY(-2px);

    border-color: #b8c7ec;

    background: #fff;

    color: #3156e8;

    box-shadow: 0 16px 34px rgba(49, 86, 232, .12)

}



#hpdHomePage .hpd-view-more-wrap .hpd-btn.hpd-btn-soft i {

    font-size: 13px;

    transition: transform .2s ease

}



#hpdHomePage .hpd-view-more-wrap .hpd-btn.hpd-btn-soft:hover i {

    transform: translateY(2px)

}



.hpd-horizontal-track {

    display: flex;

    gap: 20px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    padding: 4px 2px 14px;

    cursor: grab;

    user-select: none;

    -webkit-user-select: none;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-inline: contain;

    scroll-behavior: smooth

}



.hpd-horizontal-track::-webkit-scrollbar {

    display: none

}



#hpdHomePage .hpd-horizontal-track.is-dragging {

    cursor: grabbing;

    scroll-snap-type: none;

    scroll-behavior: auto

}



#hpdHomePage .hpd-horizontal-track.is-dragging a {

    pointer-events: none

}



#hpdHomePage .hpd-horizontal-track img {

    -webkit-user-drag: none;

}



#hpdHomePage .hpd-testimonial-head-actions {

    display: flex;

    align-items: center;

    gap: 12px

}



.hpd-package-card {

    --hpd-card-rx: 0deg;

    --hpd-card-ry: 0deg;

    flex: 0 0 min(340px, 84vw);

    scroll-snap-align: start;

    overflow: hidden;

    border: 1px solid #e8edf4;

    border-radius: 22px;

    background: #fff;

    box-shadow: var(--hpd-shadow-soft);

    transform: perspective(1000px) rotateX(var(--hpd-card-rx)) rotateY(var(--hpd-card-ry));

    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease

}



.hpd-package-card:hover {

    border-color: #cbd7f5;

    box-shadow: 0 24px 54px rgba(37, 99, 235, .11);

    transform: perspective(1000px) rotateX(var(--hpd-card-rx)) rotateY(var(--hpd-card-ry)) translateY(-5px)

}



.hpd-package-card>a {

    color: inherit

}



.hpd-package-image {

    position: relative;

    height: 220px;

    overflow: hidden;

    background: #eef2f7

}



.hpd-package-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .5s ease

}



.hpd-package-card:hover .hpd-package-image img {

    transform: scale(1.05)

}



.hpd-package-badge {

    position: absolute;

    left: 14px;

    top: 14px;

    padding: 6px 9px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .92);

    color: #3156e8;

    font-size: 10px;

    font-weight: 600;

    box-shadow: 0 8px 18px rgba(16, 24, 40, .08)

}



.hpd-package-fav {

    position: absolute;

    right: 14px;

    top: 14px;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .92);

    color: #344054;

    box-shadow: 0 8px 18px rgba(16, 24, 40, .08)

}



.hpd-package-body {

    padding: 18px

}



.hpd-package-place {

    color: #667085;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .08em

}



.hpd-package-title {

    margin: 8px 0 13px;

    color: #1d2939;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 600

}



.hpd-package-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 8px 14px;

    color: #667085;

    font-size: 11px

}



.hpd-package-meta span {

    display: inline-flex;

    align-items: center;

    gap: 5px

}



.hpd-package-footer {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 12px;

    margin-top: 18px;

    padding-top: 14px;

    border-top: 1px solid #eef1f5

}



.hpd-package-price small {

    display: block;

    color: #98a2b3;

    font-size: 10px

}



.hpd-package-price strong {

    display: block;

    margin-top: 3px;

    color: #101828;

    font-size: 18px;

    font-weight: 600

}



.hpd-old-price {

    margin-left: 6px;

    color: #98a2b3;

    font-size: 11px;

    font-weight: 500;

    text-decoration: line-through

}



.hpd-package-link {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #eff4ff;

    color: #3156e8

}



.hpd-carousel-arrows {

    display: flex;

    gap: 8px

}



.hpd-carousel-arrows button {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #e2e7ef;

    border-radius: 13px;

    background: #fff;

    color: #344054;

    box-shadow: 0 8px 20px rgba(16, 24, 40, .05);

    cursor: pointer;

    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease

}



.hpd-carousel-arrows button:hover {

    transform: translateY(-2px);

    border-color: #b9c8ee;

    color: #3156e8;

    box-shadow: 0 13px 28px rgba(49, 86, 232, .12)

}



.hpd-carousel-arrows button:active {

    transform: translateY(0) scale(.96)

}



.hpd-care-section {

    background: #fff

}



.hpd-care-shell {

    display: grid;

    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);

    gap: 36px;

    align-items: center;

    padding: clamp(28px, 4vw, 54px);

    border-radius: 30px;

    background: radial-gradient(circle at 10% 20%, rgba(34, 211, 238, .16), transparent 32%), radial-gradient(circle at 90% 80%, rgba(79, 70, 229, .20), transparent 34%), linear-gradient(135deg, #172033, #243152 62%, #1b2c4f);

    box-shadow: 0 30px 80px rgba(16, 24, 40, .20)

}



.hpd-care-copy h2 {

    margin: 10px 0 12px;

    color: #fff;

    font-size: clamp(2rem, 3.2vw, 3.35rem);

    line-height: 1.08;

    letter-spacing: -.035em;

    font-weight: 600

}



.hpd-care-copy p {

    max-width: 560px;

    margin: 0 0 24px;

    color: #cbd5e1;

    line-height: 1.7

}



.hpd-care-grid {

    display: grid;

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

    gap: 14px

}



.hpd-care-card {

    --hpd-card-rx: 0deg;

    --hpd-card-ry: 0deg;

    padding: 20px;

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 20px;

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(12px);

    transform: perspective(900px) rotateX(var(--hpd-card-rx)) rotateY(var(--hpd-card-ry));

    transition: transform .22s ease, background .22s ease, border-color .22s ease

}



.hpd-care-card:hover {

    background: rgba(255, 255, 255, .12);

    border-color: rgba(255, 255, 255, .22);

    transform: perspective(900px) rotateX(var(--hpd-card-rx)) rotateY(var(--hpd-card-ry)) translateY(-4px)

}



.hpd-care-card>span {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: rgba(255, 255, 255, .12);

    color: #fff;

    font-size: 18px

}



.hpd-care-card h3 {

    margin: 14px 0 7px;

    color: #fff;

    font-size: 14px;

    font-weight: 600

}



.hpd-care-card p {

    margin: 0;

    color: #cbd5e1;

    font-size: 11px;

    line-height: 1.6

}



.hpd-rating-summary {

    display: grid;

    grid-template-columns: auto auto;

    align-items: center;

    column-gap: 8px;

    padding: 10px 14px;

    border: 1px solid #e7ebf2;

    border-radius: 16px;

    background: #fff;

    box-shadow: 0 8px 22px rgba(16, 24, 40, .04)

}



.hpd-rating-number {

    grid-row: 1/3;

    color: #101828;

    font-size: 26px;

    font-weight: 600

}



.hpd-rating-stars {

    color: #f5b800;

    font-size: 12px;

    letter-spacing: .05em

}



.hpd-rating-summary small {

    color: #98a2b3;

    font-size: 10px

}



.hpd-testimonial-track {

    gap: 18px

}



.hpd-testimonial-card {

    --hpd-card-rx: 0deg;

    --hpd-card-ry: 0deg;

    flex: 0 0 min(380px, 88vw);

    scroll-snap-align: start;

    padding: 22px;

    border: 1px solid #e8edf4;

    border-radius: 22px;

    background: #fff;

    box-shadow: var(--hpd-shadow-soft);

    transform: perspective(1000px) rotateX(var(--hpd-card-rx)) rotateY(var(--hpd-card-ry));

    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease

}



.hpd-testimonial-card:hover {

    border-color: #d0dbf7;

    box-shadow: 0 22px 50px rgba(37, 99, 235, .09);

    transform: perspective(1000px) rotateX(var(--hpd-card-rx)) rotateY(var(--hpd-card-ry)) translateY(-4px)

}



.hpd-testimonial-top {

    display: flex;

    align-items: center;

    gap: 12px

}



.hpd-testimonial-avatar {

    width: 46px;

    height: 46px;

    overflow: hidden;

    border-radius: 50%;

    background: #eef4ff

}



.hpd-testimonial-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover

}



.hpd-testimonial-avatar-fallback {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #3156e8;

    font-weight: 600

}



.hpd-testimonial-name {

    color: #1d2939;

    font-size: 14px;

    font-weight: 600

}



.hpd-testimonial-stars {

    margin-top: 3px;

    color: #f5b800;

    font-size: 11px;

    letter-spacing: .05em

}



.hpd-testimonial-quote {

    margin: 18px 0 0;

    color: #667085;

    font-size: 13px;

    line-height: 1.75

}



.hpd-final-cta {

    padding: 0 0 clamp(64px, 7vw, 100px);

    background: #f7f9fc

}



.hpd-final-cta-shell {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

    padding: clamp(28px, 4vw, 48px);

    border-radius: 28px;

    background: linear-gradient(135deg, #3156e8, #5b4dee 64%, #7c3aed);

    color: #fff;

    box-shadow: 0 30px 70px rgba(49, 86, 232, .24)

}



.hpd-final-cta-kicker {

    display: inline-block;

    margin-bottom: 8px;

    color: #dbeafe;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .10em

}



.hpd-final-cta h2 {

    margin: 0;

    color: #fff;

    font-size: clamp(1.8rem, 3vw, 3rem);

    line-height: 1.1;

    font-weight: 600;

    letter-spacing: -.03em

}



.hpd-final-cta p {

    max-width: 720px;

    margin: 10px 0 0;

    color: #e0e7ff;

    line-height: 1.65

}



/* ========================= SKELETON / EMPTY ========================= */

.hpd-skeleton-card {

    height: 100%;

    padding: 16px;

    border: 1px solid #edf1f5;

    border-radius: 20px;

    background: #fff

}



.hpd-skeleton {

    display: block;

    border-radius: 999px;

    background: linear-gradient(90deg, #f2f4f7 25%, #e5e9f0 50%, #f2f4f7 75%);

    background-size: 200% 100%;

    animation: hpdShimmer 1.25s infinite

}



.hpd-skeleton-image {

    height: 180px;

    margin-bottom: 15px;

    border-radius: 14px

}



.hpd-skeleton-line {

    height: 11px;

    margin-top: 9px

}



.hpd-skeleton-circle {

    width: 46px;

    height: 46px;

    border-radius: 50%

}



.hpd-skeleton-why {

    min-height: 190px

}



.hpd-skeleton-destination {

    min-height: 300px

}



.hpd-skeleton-package {

    min-height: 400px

}



.hpd-skeleton-testimonial {

    min-height: 210px

}



.hpd-package-skeleton-item {

    flex: 0 0 min(340px, 84vw)

}



.hpd-testimonial-skeleton-item {

    flex: 0 0 min(380px, 88vw)

}



.hpd-empty {

    width: 100%;

    padding: 34px;

    border: 1px dashed #d0d5dd;

    border-radius: 18px;

    background: #fcfcfd;

    color: #98a2b3;

    text-align: center;

    font-size: 13px

}



/* ========================= REVEAL ========================= */

.hpd-reveal {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity .65s ease, transform .65s ease

}



.hpd-reveal.is-visible {

    opacity: 1;

    transform: none

}



/* ========================= ANIMATIONS ========================= */

@keyframes hpdBannerOrb {

    to {

        transform: translate3d(0, -18px, 0) scale(1.035)

    }

}



@keyframes hpdBannerReveal {

    from {

        opacity: .72;

        filter: saturate(.9) brightness(.96)

    }



    to {

        opacity: 1;

        filter: saturate(1) brightness(1)

    }

}



@keyframes hpdShimmer {

    0% {

        background-position: 200% 0

    }



    100% {

        background-position: -200% 0

    }

}



/* ========================= RESPONSIVE ========================= */

@media(max-width:1199.98px) {

    .hpd-home .hpd-care-grid {

        grid-template-columns: 1fr

    }

}



@media(max-width:991.98px) {

    #hpdHomePage .hpd-section-head-row {

        align-items: flex-start;

        flex-direction: column

    }



    #hpdHomePage .hpd-care-shell {

        grid-template-columns: 1fr

    }



    #hpdHomePage .hpd-final-cta-shell {

        align-items: flex-start;

        flex-direction: column

    }

}



@media(max-width:767.98px) {

    div#hpdHomePage .hpd-btn {

        width: 100%

    }



    div#hpdHomePage .hpd-section {

        padding: 58px 0

    }



    div#hpdHomePage .hpd-section-head h2 {

        font-size: clamp(1.8rem, 8vw, 2.5rem)

    }



    div#hpdHomePage .hpd-destination-tabs {

        width: 100%

    }



    div#hpdHomePage .hpd-destination-tabs button {

        flex: 1

    }



    div#hpdHomePage .hpd-destination-body {

        padding: 13px

    }



    div#hpdHomePage .hpd-destination-body h3 {

        font-size: 15px

    }



    div#hpdHomePage .hpd-package-image {

        height: 200px

    }



    div#hpdHomePage .hpd-care-shell {

        padding: 24px 18px;

        border-radius: 24px

    }



    div#hpdHomePage .hpd-final-cta-shell {

        padding: 26px 20px;

        border-radius: 24px

    }

}



@media(max-width:420px) {

    body #hpdHomePage .hpd-destination-card {

        border-radius: 18px

    }



    body #hpdHomePage .hpd-destination-arrow {

        width: 30px;

        height: 30px;

        right: 10px;

        top: 10px

    }

}



@media(min-width:1200px) {

    #hpdHomePage #popularPackagesTrack .hpd-package-card {

        flex-basis: calc((100% - 60px) / 4);

        min-width: 0

    }



    #hpdHomePage #testiSlides .hpd-testimonial-card {

        flex-basis: calc((100% - 36px) / 3);

        min-width: 0

    }

}



@media(min-width:768px) and (max-width:1199.98px) {

    #hpdHomePage #popularPackagesTrack .hpd-package-card {

        flex-basis: calc((100% - 20px) / 2);

        min-width: 0

    }



    #hpdHomePage #testiSlides .hpd-testimonial-card {

        flex-basis: calc((100% - 18px) / 2);

        min-width: 0

    }

}



@media(max-width:767.98px) {

    body #hpdHomePage .hpd-testimonial-head-actions {

        width: 100%;

        justify-content: space-between

    }



    #hpdHomePage .hpd-rating-summary {

        flex: 1

    }



    #hpdHomePage #popularPackagesTrack .hpd-package-card {

        flex-basis: 88%

    }



    #hpdHomePage #testiSlides .hpd-testimonial-card {

        flex-basis: 92%

    }

}





/* Banner device switch */
@media(max-width:767.98px) {
    .hpd-media-desktop {
        display: none;
    }

    .hpd-media-mobile {
        display: block;
    }
}

@media(min-width:768px) {
    .hpd-media-desktop {
        display: block;
    }

    .hpd-media-mobile {
        display: none;
    }
}

@media(prefers-reduced-motion:reduce) {

    .hpd-home [class*="hpd-"] {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important

    }

}