/* ===== Custom Font - PSLxSamson ===== */
@font-face {
    font-family: 'PSLxSamson';
    src: url('../PSLxSamson%20BoldItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Utility class for PSLxSamson font */
.font-pslx-samson {
    font-family: 'Pattaya', 'PSLxSamson', 'Prompt', sans-serif;
    font-weight: bold;
    font-style: italic;
}

/* ===== CSS Variables ===== */
:root {
    --orange: #E86A33;
    --orange-light: #F39D3D;
    --orange-dark: #D45A23;
    --dark: #1a1a1a;
    --darker: #0d0d0d;
    --white: #ffffff;
    --gray-light: #f5f5f5;
    --gray: #888888;
    --text-light: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.6);
}

/* ===== Reset & Base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    /* คืนค่า default เพื่อให้ layout ปกติ */
}

body {
    font-family: 'Pattaya', 'PSLxSamson', 'Poppins', 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 22px;
    /* ตัวหนังสือใหญ่ขึ้นโดยไม่กระทบ layout */
    background: var(--darker);
    color: var(--white);
    line-height: 1.8;
    overflow-x: hidden;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== Top Bar ===== */
.top-bar {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left {
    display: flex;
    gap: 30px;
}

.top-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: var(--text-light);
}

.top-info svg {
    opacity: 0.7;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    color: var(--white);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.social-icon:hover {
    opacity: 1;
    color: var(--orange);
}

/* Language Toggle */
.lang-toggle {
    display: flex;
    gap: 5px;
}

.lang-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-light);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Pattaya', 'Poppins', 'Prompt', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lang-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.lang-btn.active {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
}

/* ===== Header ===== */
.header {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 20px 0;
}

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

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 35px;
}

.nav-link {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-light);
    position: relative;
    padding: 8px 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--orange);
    transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--orange);
}

.nav-link.active::after,
.nav-link:hover::after {
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-image {
    height: 45px;
    width: auto;
    transition: transform 0.3s ease;
}

.btn-primary {
    background: var(--orange);
    color: var(--white);
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-primary:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(232, 106, 51, 0.4);
}

/* ===== Hero Section ===== */
.hero {
    position: relative;
    min-height: 100vh;
    background: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1920&h=1080&fit=crop') center/cover no-repeat;
    display: flex;
    align-items: center;
    padding-top: 60px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.4) 100%);
}

/* Bottom gradient for smooth transition to next section */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, transparent 0%, var(--darker) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 600px;
    padding: 60px 0;
    text-align: center;
    margin: 0 auto;
}

.hero-tag {
    display: inline-block;
    background: var(--orange);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 25px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 25px;
    color: var(--white);
}

.hero-desc {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 35px;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    justify-content: center;
}

/* Hero Search Bar */
.hero-search {
    display: none;
    /* Hidden to match reference design */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px 25px;
    align-items: center;
    gap: 15px;
    max-width: 500px;
}

.hero-search-icon {
    color: var(--orange);
    font-size: 1.5rem;
}

.hero-search input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-size: 1.1rem;
    width: 100%;
    font-family: inherit;
}

.hero-search input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.hero-search-btn {
    background: var(--orange);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.hero-search-btn:hover {
    background: var(--orange-dark);
}

.btn-dark {
    background: var(--dark);
    color: var(--white);
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid var(--dark);
    transition: all 0.3s ease;
}

.btn-dark:hover {
    background: transparent;
    border-color: var(--white);
}

.btn-orange {
    background: var(--orange);
    color: var(--white);
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid var(--orange);
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-orange:hover {
    background: var(--orange-dark);
    border-color: var(--orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(232, 106, 51, 0.4);
}

/* ===== Hero Slider ===== */
.hero-slider {
    position: absolute;
    bottom: 80px;
    right: 60px;
    z-index: 10;
}

.slider-container {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.slider-item {
    width: 140px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.slider-item.active {
    border-color: var(--orange);
}

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

.slider-item:hover img {
    transform: scale(1.1);
}

.slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    padding: 0;
}

.slider-pagination {
    font-size: 1.1rem;
    color: var(--white);
}

.slider-pagination .current {
    font-size: 1.8rem;
    font-weight: 700;
}

.slider-pagination .total {
    font-size: 1rem;
    color: var(--text-muted);
}

.slider-arrows {
    display: flex;
    gap: 10px;
}

.slider-arrow {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-arrow.prev {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
}

.slider-arrow.next {
    background: var(--orange);
    color: var(--white);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.slider-arrow:hover {
    transform: scale(1.1);
}

/* ===== Section Styles ===== */
.section-tag {
    display: inline-block;
    background: var(--orange);
    color: var(--white);
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.section-title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.2;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

/* ===== About Section ===== */
.about-section {
    padding: 120px 0;
    background: var(--darker);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-image {
    position: relative;
}

.about-image img {
    border-radius: 16px;
    width: 100%;
}

.experience-badge {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: var(--orange);
    padding: 30px 40px;
    border-radius: 12px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.exp-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
}

.exp-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.about-content .section-title {
    font-size: 2.4rem;
}

.about-text {
    color: var(--text-muted);
    margin-bottom: 30px;
    line-height: 1.8;
    font-size: 1.25rem;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 35px;
}

.feature-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.feature-icon {
    font-size: 2.5rem;
}

.feature-text h4 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.feature-text p {
    color: var(--text-muted);
    font-size: 1.15rem;
}

/* ===== Services Section ===== */
.services-section {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--darker) 0%, var(--dark) 100%);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
}

.service-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease;
}

.service-card:hover {
    background: rgba(232, 106, 51, 0.1);
    border-color: var(--orange);
    transform: translateY(-10px);
}

.service-icon {
    margin-bottom: 20px;
    color: var(--orange);
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-icon svg {
    transition: all 0.3s ease;
}

.service-card:hover .service-icon svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(232, 106, 51, 0.5));
}

.service-card h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.service-card p {
    color: var(--text-muted);
    font-size: 1.15rem;
}

/* ===== Trips Section ===== */
.trips-section {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--dark) 0%, var(--darker) 100%);
}

.trips-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.trips-more {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.btn-view-more {
    background: transparent;
    border: 2px solid var(--orange);
    color: var(--orange);
    padding: 16px 48px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-view-more:hover {
    background: var(--orange);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(232, 106, 51, 0.4);
}

.trip-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.trip-card:hover {
    transform: translateY(-10px);
    border-color: var(--orange);
    box-shadow: 0 20px 50px rgba(232, 106, 51, 0.2);
}

.trip-image {
    position: relative;
    height: 180px;
    overflow: hidden;
}

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

.trip-card:hover .trip-image img {
    transform: scale(1.1);
}

.trip-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.trip-badge.bestseller {
    background: linear-gradient(135deg, #ff4444, #ff6b6b);
}

.trip-badge.trending {
    background: linear-gradient(135deg, var(--orange), var(--orange-light));
}

.trip-badge.new {
    background: linear-gradient(135deg, #00b4d8, #48cae4);
}

.trip-duration {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 1.05rem;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.trip-difficulty {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 1rem;
}

.trip-content {
    padding: 15px 20px;
}

.trip-name {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.trip-months {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.month-tag {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.month-tag.active {
    background: var(--orange);
    color: var(--white);
}

.trip-dates {
    color: var(--orange);
    font-size: 1.05rem;
    margin-bottom: 20px;
}

.trip-dates-header {
    color: var(--orange);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(232, 106, 51, 0.15);
    border-radius: 6px;
    border-left: 3px solid var(--orange);
}

.trip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trip-price {
    display: flex;
    flex-direction: column;
}

.original-price {
    font-size: 0.9rem;
    color: var(--gray);
    text-decoration: line-through;
}

.current-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--orange);
}

.trip-btn {
    background: var(--orange);
    color: var(--white);
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.trip-btn:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
}

/* ===== Testimonials Section ===== */
.testimonials-section {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--darker) 0%, var(--dark) 100%);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 35px;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    border-color: var(--orange);
}

.testimonial-content {
    margin-bottom: 25px;
}

.testimonial-content p {
    font-size: 1.05rem;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.7;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-author img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
}

.author-info h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 3px;
}

.author-info span {
    font-size: 1.1rem;
    color: var(--gray);
}

/* ===== Newsletter Section ===== */
.newsletter-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.newsletter-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(53, 68, 78, 0.95) 0%, rgba(53, 68, 78, 0.9) 100%),
        url('https://images.unsplash.com/photo-1551632811-561732d1e306?w=1920&h=600&fit=crop') center/cover no-repeat;
    z-index: 0;
}

.newsletter-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400'%3E%3Cpath fill='%23374753' d='M0,400 L0,200 C50,180 100,220 150,200 C200,180 220,150 280,170 C340,190 380,150 420,180 C460,210 500,190 540,200 C580,210 620,160 660,180 C700,200 740,170 780,190 C820,210 860,180 900,200 C940,220 980,190 1020,210 C1060,230 1100,200 1140,220 C1180,240 1220,210 1260,230 C1300,250 1340,220 1380,240 C1420,260 1440,240 1440,240 L1440,400 Z'/%3E%3Cg fill='%232d3a44' opacity='0.9'%3E%3C!-- Hiker silhouettes --%3E%3Cpath d='M200,380 L200,320 L203,310 L206,320 L206,340 L210,340 L210,380 Z M195,340 L212,340 L215,350 L192,350 Z'/%3E%3Ccircle cx='203' cy='305' r='8'/%3E%3Cpath d='M500,370 L500,310 L503,300 L506,310 L506,330 L510,330 L510,370 Z M495,330 L512,330 L515,340 L492,340 Z'/%3E%3Ccircle cx='503' cy='295' r='8'/%3E%3Cpath d='M700,375 L700,315 L703,305 L706,315 L706,335 L710,335 L710,375 Z M695,335 L712,335 L715,345 L692,345 Z'/%3E%3Ccircle cx='703' cy='300' r='8'/%3E%3Cpath d='M1000,365 L1000,305 L1003,295 L1006,305 L1006,325 L1010,325 L1010,365 Z M995,325 L1012,325 L1015,335 L992,335 Z'/%3E%3Ccircle cx='1003' cy='290' r='8'/%3E%3Cpath d='M1200,378 L1200,318 L1203,308 L1206,318 L1206,338 L1210,338 L1210,378 Z M1195,338 L1212,338 L1215,348 L1192,348 Z'/%3E%3Ccircle cx='1203' cy='303' r='8'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom center;
    z-index: 1;
}

.newsletter-section .container {
    position: relative;
    z-index: 2;
}

.newsletter-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.newsletter-text {
    max-width: 500px;
}

.newsletter-text h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 15px;
}

.newsletter-text p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.newsletter-form {
    display: flex;
    gap: 15px;
    flex: 1;
    max-width: 500px;
}

.newsletter-form input {
    flex: 1;
    padding: 16px 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: all 0.3s ease;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-form input:focus {
    border-color: var(--orange);
    background: rgba(255, 255, 255, 0.15);
}

.btn-subscribe {
    padding: 16px 32px;
    background: var(--orange);
    color: var(--white);
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-subscribe:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(232, 106, 51, 0.4);
}

/* ===== Footer ===== */
.footer {
    background: var(--darker);
    padding: 80px 0 30px;
}

.footer-grid-new {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 1.5fr;
    gap: 40px;
    margin-bottom: 50px;
    align-items: start;
}

/* Explore Column */
.footer-col-explore h4,
.footer-col-connect h4,
.footer-col-map h4,
.footer-links-section h4 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--white);
}

/* Footer Links Wrapper - Two Columns */
.footer-links-wrapper {
    display: flex;
    gap: 50px;
}

.footer-links-section {
    flex: 1;
}

/* Footer Map */
.footer-col-map {
    text-align: left;
}

.footer-map {
    margin-bottom: 15px;
}

.footer-map iframe {
    border-radius: 10px;
}

.map-address {
    color: var(--text-muted);
    font-size: 1.2rem;
    margin-top: 10px;
}

.explore-links {
    display: flex;
    gap: 40px;
}

.explore-links ul {
    list-style: none;
}

/* Quick Links List */
.quick-links-list {
    list-style: none;
}

.quick-links-list li {
    margin-bottom: 12px;
}

.quick-links-list li a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 1.25rem;
}

.quick-links-list li a:hover {
    color: var(--orange);
}

.explore-links ul li {
    margin-bottom: 12px;
}

.explore-links ul li a {
    color: var(--text-muted);
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.explore-links ul li a:hover {
    color: var(--orange);
}

/* Center Column - Logo */
.footer-col-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--white);
    margin-bottom: 20px;
}

.footer-logo-text {
    font-size: 1.5rem;
    font-weight: 600;
    font-style: italic;
}

.footer-center-desc {
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1.7;
    max-width: 350px;
    margin-bottom: 25px;
}

.footer-social-new {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
}

/* Footer Contact Info */
.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.footer-contact-info .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 1.2rem;
}

.footer-contact-info .contact-icon {
    width: 16px;
    height: 16px;
    color: var(--orange);
    flex-shrink: 0;
}

.map-address {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 12px;
}

.map-address .location-icon {
    color: var(--orange);
    flex-shrink: 0;
}

.social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-link:hover {
    color: var(--orange);
    transform: scale(1.2);
}

/* Connect With Us Column */
.connect-list {
    list-style: none;
}

.connect-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    color: var(--text-muted);
    font-size: 1.2rem;
    align-items: flex-start;
}

.connect-icon {
    font-size: 1rem;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gray);
    font-size: 1.2rem;
}

/* ===== LINE Chat Button ===== */
.line-chat-btn {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #00B900, #00E000);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0, 185, 0, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.line-chat-btn:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 185, 0, 0.5);
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 8px 25px rgba(0, 185, 0, 0.4);
    }

    50% {
        box-shadow: 0 8px 35px rgba(0, 185, 0, 0.6);
    }
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .footer-col-center {
        grid-column: span 2;
        order: -1;
    }

    .newsletter-content {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-text {
        max-width: 100%;
    }

    .newsletter-form {
        max-width: 100%;
        width: 100%;
    }

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

@media (max-width: 992px) {

    .nav-left,
    .nav-right {
        display: none;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .hero-slider {
        display: none;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .experience-badge {
        right: 20px;
        bottom: -20px;
    }
}

@media (max-width: 768px) {

    /* ===== Mobile Top Bar - Single Row Layout ===== */
    .top-bar .container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .top-bar-left {
        flex-direction: row !important;
        gap: 5px !important;
    }

    /* Hide address on mobile, keep phone only */
    .top-bar-left .top-info:first-child {
        display: none !important;
    }

    .top-bar-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .social-icons {
        display: flex !important;
        gap: 10px !important;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

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

    .about-content .section-title {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    .about-text {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
    }

    .feature-icon {
        font-size: 1.8rem !important;
    }

    .feature-text h4 {
        font-size: 1.1rem !important;
    }

    .feature-text p {
        font-size: 0.9rem !important;
    }

    .about-features {
        gap: 15px !important;
        margin-bottom: 25px !important;
    }

    .about-section,
    .services-section,
    .trips-section,
    .testimonials-section {
        padding: 60px 0 !important;
    }

    .btn-orange,
    .btn-dark {
        padding: 12px 24px !important;
        font-size: 1rem !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Experience Badge - smaller on mobile */
    .experience-badge {
        padding: 16px 20px !important;
        bottom: -15px !important;
        right: 10px !important;
        border-radius: 10px !important;
    }

    .exp-number {
        font-size: 2.5rem !important;
    }

    .exp-text {
        font-size: 0.7rem !important;
    }

    .about-grid,
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* ===== Mobile Trip Cards - Matching Reference Design ===== */
    .trips-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .trip-card {
        border-radius: 20px !important;
        /* Slightly reduced radius */
        overflow: hidden !important;
        background: #1a1a1a !important;
        margin-bottom: 5px !important;
    }

    .trip-image {
        height: 150px !important;
        /* Reduced from 190px */
        border-radius: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Pill-shaped badges */
    .trip-badge,
    .trip-duration,
    .trip-difficulty {
        position: absolute !important;
        padding: 6px 12px !important;
        /* Reduced padding */
        border-radius: 30px !important;
        font-size: 0.75rem !important;
        /* Reduced font size */
        font-weight: 700 !important;
        color: #fff !important;
        z-index: 10;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    .trip-badge {
        top: 4px !important;
        /* Reduced from 12px to 4px */
        left: 4px !important;
        /* Reduced from 12px to 4px */
        background: #ff6b6b !important;
    }

    .trip-badge.trending {
        background: linear-gradient(135deg, #ff9a56, #e86a33) !important;
    }

    .trip-badge.new {
        background: linear-gradient(135deg, #00b4d8, #48cae4) !important;
    }

    .trip-duration {
        bottom: 4px !important;
        /* Reduced from 12px to 4px */
        left: 4px !important;
        /* Reduced from 12px to 4px */
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(4px);
    }

    .trip-difficulty {
        bottom: 4px !important;
        /* Reduced from 12px to 4px */
        right: 4px !important;
        /* Reduced from 12px to 4px */
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(4px);
    }

    .trip-content {
        padding: 15px 15px !important;
        /* Adjusted padding */
    }

    .trip-name {
        font-size: 1.1rem !important;
        /* Reduced from 1.25rem */
        font-weight: 700 !important;
        color: #fff !important;
        /* Changed to white as per image */
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }

    .trip-months {
        display: flex !important;
        gap: 4px !important;
        /* Reduced gap */
        flex-wrap: nowrap !important;
        /* Force to single row */
        overflow-x: auto !important;
        /* Allow horizontal scroll if needed */
        margin-bottom: 8px !important;
        scrollbar-width: none;
        /* Hide scrollbar Firefox */
        -ms-overflow-style: none;
        /* Hide scrollbar IE/Edge */
    }

    .trip-months::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari */
    }

    .month-tag {
        font-size: 0.6rem !important;
        /* Extremely small font */
        padding: 3px 5px !important;
        /* Minimal padding */
        border-radius: 4px !important;
        background: #333 !important;
        color: #fff !important;
        white-space: nowrap !important;
        /* Prevent text wrapping */
        flex-shrink: 0;
        /* Prevent shrinking */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    /* Show only first 3 months on mobile */
    .month-tag:nth-child(n+4) {
        display: none !important;
    }

    .month-tag.active {
        background: #FF6B35 !important;
        color: #fff !important;
    }

    .trip-footer {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        /* Align to bottom */
        margin-top: 15px !important;
        gap: 10px !important;
    }

    .trip-price {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    .original-price {
        font-size: 0.8rem !important;
        color: #888 !important;
        text-decoration: line-through !important;
    }

    .current-price {
        font-size: 1.2rem !important;
        /* Reduced from 1.4rem */
        font-weight: 700 !important;
        color: #FF6B35 !important;
    }

    .trip-btn {
        display: inline-block !important;
        padding: 6px 12px !important;
        /* Significantly reduced */
        font-size: 0.75rem !important;
        /* Smaller text */
        font-weight: 700 !important;
        background: #FF6B35 !important;
        color: #fff !important;
        border-radius: 8px !important;
        /* Slightly smaller radius */
        text-align: center !important;
        white-space: nowrap !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    .trip-dates {
        display: none !important;
    }

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

    .footer-grid-new {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-col-center {
        grid-column: span 1;
    }

    .footer-links-section h4 {
        font-size: 1.1rem !important;
        /* Smaller heading for mobile */
        margin-bottom: 12px !important;
    }

    .quick-links-list li {
        margin-bottom: 6px !important;
    }

    .quick-links-list li a {
        font-size: 0.9rem !important;
        /* Smaller links for mobile */
    }

    .explore-links {
        flex-direction: column;
        gap: 20px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    /* ===== Mobile Navigation Bar - Exact Reference Match ===== */
    .header {
        top: 15px !important;
        /* Reduced from 25px to move even closer to top bar */
        padding: 5px 0 !important;
        /* Reduced padding */
        background: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    .nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0px !important;
        /* Reduced to 0 to maximize center space */
        padding: 0 2px !important;
        /* Reduced further */
        width: 100% !important;
    }

    .nav::-webkit-scrollbar {
        display: none;
    }

    /* Nav containers */
    .nav-left,
    .nav-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 2px !important;
        /* Reduced from 6px */
        flex: 1 !important;
    }

    .nav-left {
        justify-content: flex-start !important;
    }

    .nav-right {
        justify-content: flex-end !important;
    }

    .logo {
        flex-shrink: 0 !important;
        margin: 0 2px !important;
        /* Minimized margin */
        position: static !important;
        width: auto !important;
    }

    .logo-image {
        height: 80px !important;
        transform: none !important;
    }

    /* Nav links - plain text */
    .nav-link {
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        padding: 8px 6px !important;
        /* Reduced horizontal padding from 12px */
        border-radius: 20px !important;
        background: transparent !important;
        color: #fff !important;
        flex-shrink: 0;
        border: none !important;
        text-decoration: none !important;
    }

    /* Orange primary button */
    .btn-primary {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        flex-shrink: 0;
        border-radius: 8px !important;
        background: #FF6B35 !important;
        color: #fff !important;
    }

    /* Hide specific links on mobile */
    .nav-left .nav-link:nth-child(2),
    .nav-left .nav-link:nth-child(4) {
        display: none !important;
    }

    .nav-right .nav-link:nth-child(1),
    .nav-right .nav-link:nth-child(2) {
        display: none !important;
    }

    /* Services grid - 2 items in a row */
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .service-card {
        padding: 24px 16px !important;
        border-radius: 12px !important;
    }

    .service-icon svg {
        width: 48px !important;
        height: 48px !important;
    }

    .service-card h3 {
        font-size: 0.9rem !important;
        margin-top: 10px !important;
    }

    .service-card p {
        display: block !important;
        font-size: 0.8rem !important;
        margin-top: 8px !important;
        line-height: 1.4 !important;
    }

    /* Floating buttons - smaller and repositioned */
    .floating-social-btns {
        bottom: 15px;
        right: 15px;
        gap: 8px;
    }

    .floating-btn {
        width: 45px;
        height: 45px;
    }

    .floating-btn svg {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    .hero-content {
        padding: 50px 0;
    }

    .newsletter-text h2 {
        font-size: 1.5rem;
    }

    /* Logo on very small screens - handled by main nav flex rules now */

    /* Even smaller floating buttons */
    .floating-social-btns {
        bottom: 10px;
        right: 10px;
        gap: 6px;
    }

    .floating-btn {
        width: 40px;
        height: 40px;
    }

    .floating-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Top bar simplification */
    .top-bar {
        padding: 8px 0;
    }

    .top-bar .container {
        flex-direction: column;
        gap: 8px;
    }

    .top-bar-right {
        gap: 10px;
    }

    .social-icon svg {
        width: 14px;
        height: 14px;
    }

    .lang-btn {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
}

/* ===== Floating Social Buttons ===== */
.floating-social-btns {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
}

.floating-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

.facebook-btn {
    background: #1877F2;
}

.facebook-btn:hover {
    background: #166fe5;
}

.line-btn {
    background: #00B900;
}

.line-btn:hover {
    background: #009900;
}

/* ===== Trip Search Autocomplete ===== */
.trip-search-container {
    width: 100%;
    max-width: 600px;
    margin: 40px auto 0;
}

.trip-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--orange);
    border-radius: 50px;
    padding: 15px 25px;
    transition: all 0.3s ease;
}

.trip-search-wrapper:focus-within {
    background: rgba(0, 0, 0, 0.8);
    border-color: var(--orange-light);
    box-shadow: 0 0 30px rgba(232, 106, 51, 0.4);
}

.trip-search-icon {
    color: var(--orange);
    margin-right: 15px;
    flex-shrink: 0;
}

.trip-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-size: 1.2rem;
    font-family: inherit;
}

.trip-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.trip-search-results {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 10px;
    background: rgba(13, 13, 13, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    z-index: 100;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5);
    scrollbar-width: thin;
    scrollbar-color: #E86A33 rgba(255, 255, 255, 0.1);
}

/* Custom scrollbar for Chrome, Safari, Opera */
.trip-search-results::-webkit-scrollbar {
    width: 8px;
}

.trip-search-results::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.trip-search-results::-webkit-scrollbar-thumb {
    background: #E86A33;
    border-radius: 10px;
}

.trip-search-results::-webkit-scrollbar-thumb:hover {
    background: #F39D3D;
}

.trip-search-results.active {
    display: block;
}

/* ===== Mobile Specific Fixes ===== */
@media (max-width: 768px) {
    .itinerary-details ul li {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    .itinerary-details ul li strong {
        font-size: 0.9rem !important;
    }
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: rgba(232, 106, 51, 0.15);
}

.search-result-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.search-result-info {
    flex: 1;
}

.search-result-name {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 3px;
}

.search-result-price {
    color: var(--orange);
    font-size: 0.95rem;
    font-weight: 500;
}

.search-no-results {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted);
}

/* Search highlight for matching text */
.search-highlight {
    color: var(--orange);
}