/* =============================================
   SiapTour — Front Page Styles
   Sections: Hero, About, Tour, Destination,
   Why Choose Us, Testimonials, Blog, FAQ
   CSS variable-driven
   ============================================= */
/* Section utilities + .container + btn-view-all: moved to components.css */
/* =============================================
   1. HERO SECTION — Full-screen Slider
   ============================================= */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}
/* Slider wrapper */
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Individual slide */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}
/* Active slide — support both BEM modifier and JS .is-active */
.hero-slide--active,
.hero-slide.is-active {
    opacity: 1;
}
/* Hero background image (replaces background-image for LCP optimization) */
.hero-slide__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* Video background — mp4 & youtube */
.hero-slide__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* YouTube iframe — scale up to cover (16:9 in any viewport), no black bars */
.hero-slide__video--yt {
    width: 100vw;
    height: 56.25vw; /* 16:9 */
    min-height: 100vh;
    min-width: 177.78vh; /* inverse 16:9 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    contain: layout style;
}
/* Lighter overlay when slide has video */
.hero-slide:has(.hero-slide__video) .hero-slide__overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0.15) 70%,
        rgba(0, 0, 0, 0.4) 100%
    );
}
/* Gradient overlay (explicit element from PHP) */
/* Hero overlay — subtle dark gradient over photo */
.hero-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.05) 30%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.55) 100%
    );
    z-index: 1;
}
/* Slide container — desktop: bottom-right, safe from header */
.hero-slide__container {
    position: relative;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 100px 5% 80px;
}
/* Glass card */
.hero-slide__content {
    position: relative;
    z-index: 10;
    max-width: 520px;
    background: rgba(var(--bg-color-rgb), 0.75);
    background: color-mix(in srgb, var(--bg-color) 75%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--heading-color-rgb), 0.1);
    border: 1px solid color-mix(in srgb, var(--heading-color) 10%, transparent);
    border-radius: 24px;
    padding: 32px;
}
.hero-slide__subtitle {
    display: inline-block;
    font-size: var(--small-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cta-text-color);
    background: var(--primary-color);
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 12px;
}
.hero-slide__title {
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 900;
    color: var(--heading-color);
    line-height: 1.15;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}
.hero-slide__desc {
    font-size: var(--secondary-size);
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 18px;
}
.hero-slide__buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--primary-color);
    color: var(--cta-text-color) !important;
    font-size: var(--button-size);
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.hero-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: rgba(var(--heading-color-rgb), 0.1);
    background: color-mix(in srgb, var(--heading-color) 10%, transparent);
    color: var(--heading-color);
    font-size: var(--button-size);
    font-weight: 700;
    border: 2px solid rgba(var(--heading-color-rgb), 0.15);
    border: 2px solid color-mix(in srgb, var(--heading-color) 15%, transparent);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.hero-btn-secondary:hover {
    background: rgba(var(--heading-color-rgb), 0.2);
    background: color-mix(in srgb, var(--heading-color) 20%, transparent);
    border-color: rgba(var(--heading-color-rgb), 0.3);
    border-color: color-mix(in srgb, var(--heading-color) 30%, transparent);
    transform: translateY(-2px);
}
/* Slide Navigation Dots */
.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 5%;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 991px) {
    .hero-dots {
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }
}
.hero-dot {
    width: 14px;
    height: 14px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(var(--heading-color-rgb), 0.3);
    border: 2px solid color-mix(in srgb, var(--heading-color) 30%, transparent);
    background: transparent;
    background-clip: content-box;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 5px;
}
/* Active dot — support both BEM modifier and JS .is-active */
.hero-dot--active,
.hero-dot.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.2);
}
.hero-dot:hover {
}
/* Prev / Next Buttons — centered vertically */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: var(--heading-color);
    background: rgba(var(--bg-color-rgb), 0.2);
    background: color-mix(in srgb, var(--bg-color) 20%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--heading-color-rgb), 0.1);
    border: 1px solid color-mix(in srgb, var(--heading-color) 10%, transparent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.hero-nav:hover {
    background: rgba(var(--bg-color-rgb), 0.4);
    background: color-mix(in srgb, var(--bg-color) 40%, transparent);
    transform: translateY(-50%) scale(1.1);
}
.hero-nav svg {
    width: 20px;
    height: 20px;
}
.hero-nav--prev {
    left: 5%;
}
.hero-nav--next {
    right: 5%;
}
/* =============================================
   QUICK NAV — Icon shortcuts below hero
   ============================================= */
.quick-nav {
    position: relative;
    z-index: 5;
    margin-top: -40px;
    padding: 0 0 20px;
}
.quick-nav__grid {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.quick-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 28px;
    min-width: 120px;
    background: var(--bg-color);
    border: 1px solid rgba(var(--heading-color-rgb), 0.08);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.quick-nav__item:hover {
    transform: translateY(-6px);
    border-color: var(--primary-color);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}
.quick-nav__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-color-rgb), 0.1);
    border-radius: 16px;
    color: var(--primary-color);
    transition: all 0.3s ease;
}
.quick-nav__icon svg {
    width: 28px;
    height: 28px;
}
.quick-nav__item:hover .quick-nav__icon {
    background: var(--primary-color);
    color: var(--cta-text-color);
}
.quick-nav__label {
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--heading-color);
    text-align: center;
}
/* WhatsApp item accent */
.quick-nav__item--wa .quick-nav__icon {
    background: rgba(var(--wa-color-rgb), 0.1);
    color: var(--wa-color);
}
.quick-nav__item--wa:hover .quick-nav__icon {
    background: var(--wa-color);
    color: var(--cta-text-color);
}
.quick-nav__item--wa:hover {
    border-color: var(--wa-color);
}
@media (max-width: 768px) {
    .quick-nav {
        margin-top: -30px;
    }
    .quick-nav__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .quick-nav__item {
        padding: 16px 12px;
        min-width: 0;
        border-radius: 12px;
    }
    .quick-nav__icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .quick-nav__icon svg {
        width: 22px;
        height: 22px;
    }
    .quick-nav__label {
        font-size: var(--xs-size);
    }
}
@media (max-width: 480px) {
    .quick-nav__item {
        padding: 14px 8px;
    }
    .quick-nav__icon {
        width: 40px;
        height: 40px;
    }
    .quick-nav__label {
        font-size: var(--xxs-size);
    }
}
/* =============================================
   2. ABOUT SECTION
   ============================================= */
.about-section {
    background: var(--bg-color);
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.about-image-col {
    position: relative;
}
.about-image-wrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4/5;
}
.about-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-badge {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: var(--primary-color);
    color: var(--cta-text-color);
    padding: 20px 24px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.about-badge__number {
    font-size: var(--h2-size);
    font-weight: 900;
    color: var(--cta-text-color);
    display: block;
    line-height: 1;
}
.about-badge__text {
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--cta-text-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
    display: block;
}
.about-content-col .section-subtitle {
    text-align: left;
}
.about-content-col .section-title {
    text-align: left;
    font-size: var(--h2-size);
    font-weight: 900;
    color: var(--heading-color);
    margin-bottom: 20px;
    letter-spacing: -1px;
    line-height: 1.2;
}
.about-desc {
    font-size: var(--body-size);
    color: var(--text-color);
    line-height: 1.8;
    opacity: 0.8;
    margin-bottom: 20px;
}
.about-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    margin-top: 28px;
    background: var(--primary-color);
    color: var(--cta-text-color) !important;
    font-size: var(--button-size);
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.about-cta:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.3);
}
/* =============================================
   3. TOUR SECTION — 3-column Cards
   ============================================= */
.tour-section {
    background: rgba(var(--heading-color-rgb), 0.02);
}
.tour-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.tour-card {
    background: var(--bg-color);
    border: 1px solid rgba(var(--heading-color-rgb), 0.05);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.tour-card__image {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.tour-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.tour-card:hover .tour-card__img {
    transform: scale(1.05);
}
.tour-card__placeholder {
    width: 100%;
    height: 100%;
    background: rgba(var(--heading-color-rgb), 0.05);
}
.tour-card__price {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--primary-color);
    color: var(--cta-text-color);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: var(--small-size);
    font-weight: 700;
}
.tour-card__content {
    padding: 24px;
}
.tour-card__title {
    font-size: var(--h5-size);
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tour-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.tour-card__title a:hover {
    color: var(--primary-color);
}
.tour-card__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    font-size: var(--small-size);
    color: var(--text-color);
    opacity: 0.5;
}
.tour-card__duration,
.tour-card__destination {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tour-card__meta svg {
    width: 16px;
    height: 16px;
    color: var(--primary-color);
}
.tour-card__btn {
    display: inline-block;
    padding: 10px 24px;
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--cta-text-color);
    background: var(--cta-bg-color);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}
/* =============================================
   4. DESTINATION SECTION — 4-column Overlay Cards
   ============================================= */
.destination-section {
    background: var(--bg-color);
}
/* Destination Slider */
.dest-slider {
    position: relative;
    overflow: hidden;
    padding: 0;
}
.dest-slider__track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: grab;
}
.dest-slider__track:active {
    cursor: grabbing;
}
.dest-slider__slide {
    flex: 0 0 calc(25% - 15px);
    min-width: 0;
}
.dest-slider__btn-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 1px solid rgba(var(--heading-color-rgb), 0.1);
    color: var(--heading-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.dest-slider__btn-nav:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.dest-slider__btn-nav--prev {
    left: 10px;
}
.dest-slider__btn-nav--next {
    right: 10px;
}
.dest-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3/4;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dest-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.dest-card__link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.dest-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.dest-card:hover .dest-card__img {
    transform: scale(1.08);
}
.dest-card__placeholder {
    width: 100%;
    height: 100%;
    background: rgba(var(--heading-color-rgb), 0.05);
}
.dest-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0) 50%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    z-index: 2;
}
.dest-card__name {
    font-size: var(--h5-size);
    font-weight: 800;
    color: var(--overlay-text-color, #ffffff);
    margin-bottom: 4px;
}
.dest-card__count {
    font-size: var(--small-size);
    color: rgba(255, 255, 255, 0.7);
}
/* =============================================
   5. WHY CHOOSE US — Icon Cards + Counter
   ============================================= */
.why-section {
    background: rgba(var(--heading-color-rgb), 0.02);
    position: relative;
}

/* Why section with background image */
.why-section--has-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.why-section--has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--overlay-bg-rgb), 0.88);
    pointer-events: none;
}

.why-section--has-bg > .container {
    position: relative;
    z-index: 1;
}

.why-section--has-bg .section-subtitle {
    color: var(--overlay-text-color);
}

.why-section--has-bg .section-title {
    color: var(--overlay-text-color);
}

.why-section--has-bg .why-card {
    background: var(--bg-color);
    border-color: rgba(var(--heading-color-rgb), 0.1);
}

.why-section--has-bg .why-card__desc {
    opacity: 0.7;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}
.why-card {
    text-align: center;
    padding: 36px 24px;
    background: var(--bg-color);
    border: 1px solid rgba(var(--heading-color-rgb), 0.05);
    border-radius: 20px;
    transition: all 0.3s ease;
}
.why-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}
.why-card__icon {
    width: 72px;
    height: 72px;
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}
.why-card:hover .why-card__icon {
    background: var(--primary-color);
    color: var(--cta-text-color);
}
.why-card__icon .dashicons {
    font-size: var(--content-h2-size);
    width: 32px;
    height: 32px;
}
.why-card__title {
    font-size: var(--h5-size);
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 12px;
}
.why-card__desc {
    font-size: var(--secondary-size);
    color: var(--text-color);
    opacity: 0.6;
    line-height: 1.6;
}
/* Counter Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 40px;
    background: var(--primary-color);
    border-radius: 20px;
}
.stat-item {
    text-align: center;
    color: var(--cta-text-color);
}
.stat-item__number {
    font-size: var(--h2-size);
    font-weight: 900;
    color: var(--cta-text-color);
    line-height: 1;
    margin-bottom: 8px;
    display: block;
}
.stat-item__label {
    font-size: var(--secondary-size);
    color: var(--cta-text-color);
    opacity: 0.85;
    font-weight: 500;
}
/* =============================================
   6. TESTIMONIAL SECTION — Carousel/Slider
   ============================================= */
.testimonial-section {
    background: var(--bg-color);
    overflow: hidden;
}
.testimonial-slider {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.testimonial-track {
    position: relative;
}
.testimonial-slide {
    display: none;
    padding: 0 20px;
}
/* Active slide — support both BEM modifier and JS .is-active */
.testimonial-slide--active,
.testimonial-slide.is-active {
    display: block;
}
.testimonial-card {
    text-align: center;
}
/* Star Rating */
.testimonial-card__rating {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 24px;
}
.testimonial-card__rating .star-icon {
    width: 20px;
    height: 20px;
}
.testimonial-card__rating .star-filled {
    color: var(--star-color, #FFB800);
}
.testimonial-card__rating .star-empty {
    color: rgba(var(--heading-color-rgb), 0.2);
}
/* Quote content */
.testimonial-card__content {
    font-size: var(--h4-size);
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 32px;
}
.testimonial-card__content p {
    margin: 0;
}
/* Author info */
.testimonial-card__author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.testimonial-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(var(--primary-color-rgb), 0.2);
}
.testimonial-card__avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--h4-size);
    font-weight: 800;
}
.testimonial-card__info {
    text-align: left;
}
.testimonial-card__name {
    font-size: var(--body-size);
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 4px;
    display: block;
}
.testimonial-card__role {
    font-size: var(--small-size);
    color: var(--text-color);
    opacity: 0.5;
    display: block;
}
/* Testimonial Dots */
.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}
.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(var(--heading-color-rgb), 0.2);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
/* Active dot — support both BEM modifier and JS .is-active */
.testimonial-dot--active,
.testimonial-dot.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
/* =============================================
   7. CLIENT SLIDER
   ============================================= */
.client-section {
    background: rgba(var(--heading-color-rgb), 0.02);
}
.client-slider {
    position: relative;
    overflow: hidden;
    padding: 0;
}
.client-slider__track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: grab;
}
.client-slider__track:active {
    cursor: grabbing;
}
.client-slider__slide {
    flex: 0 0 calc(33.333% - 14px);
    min-width: 0;
}
/* Reuse .client-card from client.css — but ensure it's available on front page */
.client-section .client-card {
    background: var(--bg-color);
    border: 1px solid rgba(var(--heading-color-rgb), 0.05);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}
.client-section .client-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-color);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.1);
}
.client-section .client-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.client-section .client-card__image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.client-section .client-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.client-section .client-card:hover .client-card__img {
    transform: scale(1.05);
}
.client-section .client-card__placeholder {
    width: 100%;
    height: 100%;
    background: rgba(var(--heading-color-rgb), 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
}
.client-section .client-card__period {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--primary-color);
    color: var(--cta-text-color);
    padding: 5px 14px;
    border-radius: 50px;
    font-size: var(--xs-size);
    font-weight: 700;
}
.client-section .client-card__content {
    padding: 20px;
    flex: 1;
}
.client-section .client-card__name {
    font-size: var(--h5-size);
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 6px;
}
.client-section .client-card__tours {
    font-size: var(--small-size);
    color: var(--text-color);
    opacity: 0.5;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.client-section .client-card__packs {
    font-size: var(--xs-size);
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* Slider Buttons */
.client-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--heading-color);
    background: var(--bg-color);
    border: 1px solid rgba(var(--heading-color-rgb), 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.client-slider__btn:hover {
    background: var(--primary-color);
    color: var(--cta-text-color);
    border-color: var(--primary-color);
}
.client-slider__btn--prev {
    left: 10px;
}
.client-slider__btn--next {
    right: 10px;
}
@media (max-width: 991px) {
    .client-slider__slide {
        flex: 0 0 calc(50% - 10px);
    }
    .client-slider__btn--prev { left: 8px; }
    .client-slider__btn--next { right: 8px; }
}
@media (max-width: 768px) {
    .client-slider__slide {
        flex: 0 0 calc(100% - 60px);
    }
    .client-slider__btn {
        display: none;
    }
}
/* =============================================
   RENTAL SLIDER SECTION
   ============================================= */
.rental-section {
    background: var(--bg-color);
}
.rental-slider {
    position: relative;
    overflow: hidden;
    padding: 0;
}
.rental-slider__track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: grab;
}
.rental-slider__track:active {
    cursor: grabbing;
}
.rental-slider__slide {
    flex: 0 0 calc(33.333% - 14px);
    min-width: 0;
}
.rental-slider__card {
    background: var(--bg-color);
    border: 1px solid rgba(var(--heading-color-rgb), 0.05);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}
.rental-slider__card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-color);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.1);
}
.rental-slider__image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.rental-slider__img,
.rental-slider__card .tour-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.6s ease;
}
.rental-slider__card:hover .rental-slider__img {
    transform: scale(1.05);
}
.rental-slider__placeholder {
    width: 100%;
    height: 100%;
    background: rgba(var(--heading-color-rgb), 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
}
.rental-slider__price {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--primary-color);
    color: var(--cta-text-color);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: var(--small-size);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 2px;
}
.rental-slider__price small {
    font-weight: 500;
    font-size: var(--xs-size);
    opacity: 0.8;
}
.rental-slider__content {
    padding: 20px;
}
.rental-slider__name {
    font-size: var(--h5-size);
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 4px;
}
.rental-slider__specs {
    font-size: var(--small-size);
    color: var(--text-color);
    opacity: 0.5;
    margin-bottom: 12px;
}
/* Price table in slider card */
.rental-slider__price-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}
.rental-slider__price-table th {
    font-size: var(--xxs-size);
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 0 3px 4px;
}
.rental-slider__price-table th:first-child {
    text-align: left;
}
.rental-slider__price-table td {
    font-size: var(--xs-size);
    font-weight: 700;
    color: var(--heading-color);
    text-align: center;
    padding: 4px 3px;
}
.rental-slider__price-table tr + tr td {
    border-top: 1px solid rgba(var(--heading-color-rgb), 0.05);
}
.rental-slider__row-label {
    font-size: var(--xxs-size) !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    text-align: left !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rental-slider__actions {
    display: flex;
    gap: 8px;
}
.rental-slider__book-btn {
    flex: 1;
    display: inline-block;
    padding: 10px 16px;
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--cta-text-color);
    background: var(--cta-bg-color);
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
}
.rental-slider__wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
    padding: 8px;
    color: var(--wa-color);
    background: rgba(var(--wa-color-rgb), 0.08);
    border: 1px solid rgba(var(--wa-color-rgb), 0.2);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.rental-slider__wa-btn svg {
    width: 18px;
    height: 18px;
}
.rental-slider__wa-btn:hover {
    background: var(--wa-color);
    color: var(--cta-text-color);
    border-color: var(--wa-color);
}
/* Slider Nav Buttons */
.rental-slider__btn-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--heading-color);
    background: var(--bg-color);
    border: 1px solid rgba(var(--heading-color-rgb), 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.rental-slider__btn-nav:hover {
    background: var(--primary-color);
    color: var(--cta-text-color);
    border-color: var(--primary-color);
}
.rental-slider__btn-nav--prev {
    left: 10px;
}
.rental-slider__btn-nav--next {
    right: 10px;
}
@media (max-width: 991px) {
    .rental-slider__slide {
        flex: 0 0 calc(50% - 10px);
    }
    .rental-slider__btn-nav--prev { left: 8px; }
    .rental-slider__btn-nav--next { right: 8px; }
}
@media (max-width: 768px) {
    .rental-slider__slide {
        flex: 0 0 calc(100% - 60px);
    }
    .rental-slider__btn-nav {
        display: none;
    }
}
/* =============================================
   7b. ACCOMMODATION SLIDER
   ============================================= */
.acc-section { background: var(--bg-color); }
.acc-slider { position: relative; overflow: hidden; padding: 0; }
.acc-slider__track { display: flex; gap: 20px; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); cursor: grab; }
.acc-slider__track:active { cursor: grabbing; }
.acc-slider__slide { flex: 0 0 calc(33.333% - 14px); min-width: 0; }
.acc-slider__card { background: var(--bg-color); border: 1px solid rgba(var(--heading-color-rgb), 0.05); border-radius: 20px; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); height: 100%; }
.acc-slider__card:hover { transform: translateY(-6px); border-color: var(--primary-color); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.1); }
.acc-slider__image { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.acc-slider__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.acc-slider__card:hover .acc-slider__img { transform: scale(1.05); }
.acc-slider__price { position: absolute; top: 14px; right: 14px; background: var(--primary-color); color: var(--cta-text-color); padding: 6px 14px; border-radius: 50px; font-size: var(--small-size); font-weight: 700; display: flex; align-items: center; gap: 2px; }
.acc-slider__price small { font-weight: 500; font-size: var(--xs-size); opacity: 0.8; }
.acc-slider__content { padding: 20px; }
.acc-slider__place { font-size: var(--xs-size); color: var(--primary-color); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; font-weight: 600; }
.acc-slider__place svg { flex-shrink: 0; }
.acc-slider__price-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.acc-slider__price-table th:first-child { text-align: left; }
.acc-slider__row-label { font-size: var(--xxs-size) !important; font-weight: 700 !important; color: var(--primary-color) !important; text-align: left !important; text-transform: uppercase; letter-spacing: 0.5px; }
.acc-slider__actions { display: flex; gap: 8px; }
.acc-slider__book-btn { flex: 1; display: inline-block; padding: 10px 16px; font-size: var(--small-size); font-weight: 700; color: var(--cta-text-color); background: var(--cta-bg-color); border-radius: 10px; text-decoration: none; text-align: center; }
.acc-slider__wa-btn { display: flex; align-items: center; justify-content: center; width: 40px; flex-shrink: 0; padding: 8px; color: var(--wa-color); background: rgba(var(--wa-color-rgb), 0.08); border: 1px solid rgba(var(--wa-color-rgb), 0.2); border-radius: 10px; text-decoration: none; transition: all 0.3s ease; }
.acc-slider__wa-btn svg { width: 18px; height: 18px; }
.acc-slider__wa-btn:hover { background: var(--wa-color); color: var(--cta-text-color); border-color: var(--wa-color); }
.acc-slider__btn-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; color: var(--heading-color); background: var(--bg-color); border: 1px solid rgba(var(--heading-color-rgb), 0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); }
.acc-slider__btn-nav:hover { background: var(--primary-color); color: var(--cta-text-color); border-color: var(--primary-color); }
.acc-slider__btn-nav--prev { left: 10px; }
.acc-slider__btn-nav--next { right: 10px; }
@media (max-width: 991px) { .acc-slider__slide { flex: 0 0 calc(50% - 10px); } .acc-slider__btn-nav--prev { left: 8px; } .acc-slider__btn-nav--next { right: 8px; } }
@media (max-width: 768px) { .acc-slider__slide { flex: 0 0 calc(100% - 60px); } .acc-slider__btn-nav { display: none; } }
/* =============================================
   8. BLOG SECTION — 3-column Cards
   ============================================= */
.blog-section {
    background: rgba(var(--heading-color-rgb), 0.02);
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.blog-card {
    background: var(--bg-color);
    border: 1px solid rgba(var(--heading-color-rgb), 0.05);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.blog-card__image {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.blog-card:hover .blog-card__img {
    transform: scale(1.05);
}
.blog-card__placeholder {
    width: 100%;
    height: 100%;
    background: rgba(var(--heading-color-rgb), 0.05);
}
.blog-card__content {
    padding: 24px;
}
.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: var(--small-size);
    color: var(--text-color);
    opacity: 0.5;
}
.blog-card__date {
    display: flex;
    align-items: center;
    gap: 6px;
}
.blog-card__date svg {
    width: 14px;
    height: 14px;
    color: var(--primary-color);
}
.blog-card__category {
    font-size: var(--xs-size);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-color);
}
.blog-card__title {
    font-size: var(--content-size);
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.blog-card__title a:hover {
    color: var(--primary-color);
}
.blog-card__excerpt {
    font-size: var(--secondary-size);
    color: var(--text-color);
    opacity: 0.5;
    line-height: 1.6;
    margin-bottom: 16px;
}
.blog-card__btn {
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
.blog-card__btn:hover {
}
/* =============================================
   8. FAQ SECTION — 2-column Accordion
   ============================================= */
.faq-section {
    background: var(--bg-color);
}
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.faq-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.faq-item {
    background: rgba(var(--heading-color-rgb), 0.02);
    border: 1px solid rgba(var(--heading-color-rgb), 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}
.faq-item.is-open {
    border-color: var(--primary-color);
}
.faq-item__question {
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    text-align: left;
    font-size: var(--body-size);
    font-weight: 700;
    font-family: var(--body-font);
    color: var(--heading-color);
    transition: color 0.3s ease;
}
.faq-item.is-open .faq-item__question {
    color: var(--primary-color);
}
.faq-item__text {
    flex: 1;
}
.faq-item__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}
.faq-item__icon svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
}
.faq-item.is-open .faq-item__icon svg {
    transform: rotate(180deg);
    color: var(--primary-color);
}
.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item__answer p {
    padding: 0 24px 20px;
    font-size: var(--secondary-size);
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.7;
    margin: 0;
}
/* =============================================
   9. RESPONSIVE BREAKPOINTS
   ============================================= */
@media (max-width: 991px) {
    .section-padding {
        padding: 60px 0;
    }
    /* Hero — tablet: center, raised to avoid icon overlap */
    .hero-slide__container {
        justify-content: center;
        padding: 80px 5% 120px;
    }
    .hero-slide__content {
        max-width: none;
        padding: 28px;
    }
    .hero-dots {
        bottom: 60px;
    }
    .hero-nav {
        display: none;
    }
    /* About */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .about-image-wrapper {
        max-width: 500px;
        margin: 0 auto;
    }
    /* Tour */
    .tour-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Destination */
    .dest-slider__slide {
        flex: 0 0 calc(33.333% - 14px);
    }
    .dest-slider__btn-nav--prev { left: 8px; }
    .dest-slider__btn-nav--next { right: 8px; }
    /* Why */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 32px;
    }
    /* Blog */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* FAQ */
    .faq-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .section-padding {
        padding: 48px 0;
    }
    .section-title {
        font-size: clamp(24px, 5vw, 32px);
    }
    /* Hero */
    .hero-section {
        min-height: 500px;
    }
    .hero-slide__container {
        padding: 70px 4% 110px;
    }
    .hero-dots {
        bottom: 50px;
    }
    .hero-slide__content {
        padding: 20px;
        border-radius: 16px;
    }
    .hero-slide__title {
        font-size: clamp(20px, 5vw, 28px);
    }
    .hero-slide__desc {
        font-size: var(--small-size);
        margin-bottom: 14px;
    }
    /* Tour */
    .tour-grid {
        grid-template-columns: 1fr;
    }
    /* Destination */
    .dest-slider__slide {
        flex: 0 0 calc(100% - 60px);
    }
    .dest-slider__btn-nav {
        display: none;
    }
    .dest-card {
        aspect-ratio: 16/9;
    }
    /* Why */
    .why-grid {
        grid-template-columns: 1fr;
    }
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        padding: 24px;
    }
    /* Blog */
    .blog-grid {
        grid-template-columns: 1fr;
    }
    /* Testimonial */
    .testimonial-card__content {
        font-size: var(--h5-size);
    }
}
@media (max-width: 480px) {
    .section-padding {
        padding: 36px 0;
    }
    /* Hero */
    .hero-section {
        min-height: 450px;
    }
    .hero-slide__container {
        padding: 60px 4% 100px;
    }
    .hero-dots {
        bottom: 44px;
    }
    .hero-slide__content {
        padding: 18px;
        border-radius: 14px;
    }
    .hero-slide__subtitle {
        font-size: var(--xxs-size);
        padding: 4px 10px;
        margin-bottom: 8px;
    }
    .hero-slide__title {
        font-size: clamp(18px, 5vw, 24px);
        margin-bottom: 8px;
    }
    .hero-slide__desc {
        font-size: var(--small-size);
        margin-bottom: 12px;
        line-height: 1.5;
    }
    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: var(--small-size);
    }
    /* About */
    .about-badge {
        padding: 14px 18px;
        bottom: 16px;
        left: 16px;
    }
    .about-badge__number {
        font-size: var(--h3-size);
    }
    /* Counter */
    .stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 20px;
        border-radius: 16px;
    }
    .stat-item__number {
        font-size: var(--h3-size);
    }
    /* View All Button */
    .btn-view-all {
        width: 100%;
        justify-content: center;
    }
    /* Testimonial */
    .testimonial-card__author {
        flex-direction: column;
        text-align: center;
    }
    .testimonial-card__info {
        text-align: center;
    }
}