#headerBackground {
    height: 100vh; 
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

#headerBackground::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    z-index: 1;
}

#headerBackground .container {
    position: relative;
    z-index: 2;
}

#headerCarousel {
    height: 100%;
}

#headerCarousel .carousel-item {
    height: 100vh;
}

#headerCarousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-control-prev,
.carousel-control-next {
    z-index: 3;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
    max-width: 70%;
    margin: 0 auto;
}

/* 导航栏样式优化 */
.navbar-nav .nav-item {
    margin: 0 5px; /* 加大导航项目之间的间距 */
}

.navbar-nav .nav-link {
    white-space: nowrap; /* 防止文本换行 */
    font-size: clamp(0.75rem, 1vw, 1rem); /* 自适应且更小的字体 */
    padding: 0.5rem 0.9rem; /* 稍微增加水平内边距以保持触控舒适 */
}

.navbar-nav .dropdown-toggle::after {
    vertical-align: middle; /* 调整下拉箭头位置 */
}

/* 确保下拉菜单正常工作 */
.navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
}

.features-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.feature-card {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.1);
}

.feature-icon {
    font-size: 3rem;
    color: #007bff;
    margin-bottom: 20px;
}

.feature-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #333;
}

.feature-description {
    color: #666;
    line-height: 1.6;
}

.feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 4rem;
    font-size: 2rem; /* Doubled font size */
    color: white;
}

.destination-card {
    transition: transform 0.3s ease;
}

.destination-card:hover {
    transform: translateY(-10px);
}

/* 下拉菜单样式微调：略小宽度、加大行距、深灰文字 */
.navbar .dropdown-menu {
    min-width: 7rem; /* 默认通常为 10rem，这里略微缩小 */
}

.navbar .dropdown-item {
    line-height: 1.6; /* 行间距更舒适一点 */
    color: #333333; /* 深灰色 */
}

/* Discover section: mobile horizontal scroll */
@media (max-width: 767.98px) {
  .discover-row {
    flex-wrap: nowrap; /* Prevent wrapping so items scroll horizontally */
    overflow-x: auto; /* Enable horizontal scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }
  .discover-row > .col {
    flex: 0 0 auto; /* Don't shrink; keep item width */
    width: 70%; /* Make each card wider on mobile to encourage horizontal scroll */
  }
}

/* Section-specific container width scaling */
#discover .main-content-width {
  max-width: 1200px; /* 1.2x of base 1200px */
}

#features .main-content-width {
  max-width: 1200px; /* 1.5x of base 1200px */
}

.section-tours {
  max-width: 1200px;
  margin: 0 auto;
}

/* Features: mobile tweaks */
@media (max-width: 767.98px) {
  /* Hide description text on mobile */
  #features .feature-item p { display: none; }
  /* Shrink feature icon circle on mobile */
  #features .feature { height: 3rem; width: 3rem; font-size: 0.85rem; }
}

/* Mobile: stack icon above title in Features */
@media (max-width: 576px) {
  #features .feature-item .d-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #features .feature-item .feature {
    margin-right: 0 !important;
    margin-bottom: 0.4rem;
  }
  /* Title under icon with smaller font size */
  #features .feature-item h3.h5 {
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
  }
}



/* Desktop styles for tour-card */
@media (min-width: 769px) {
    .splide__list {
        gap: 0.1rem !important; /* Further reduced gap for desktop */
    }
    .splide__slide {
        margin-right: 0.25rem; /* Further reduced margin for desktop */
    }
    .tour-card {
        height: 350px; /* Fixed desktop height */
        max-width: 700px; /* Desktop width */
    }
    .tour-card img {
        height: 350px; /* Adjust image height for desktop */
    }
    .tour-card-title {
        font-size: 3rem; /* 1.25rem * 1.5 */
        font-weight: 100; /* Thin font */
    }
}

/* Mobile styles for tour-card: ensure image fully covers card */
@media (max-width: 767.98px) {
    .tour-card {
        height: 240px; /* Unified mobile card height */
    }
    .tour-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}
.tour-overlay {
  flex-grow: 1; /* Allow overlay to take remaining space */
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); /* Gradient background */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Reduce gaps inside carousel */
/* Splide.js handles gaps via JS options, no need for this CSS */
/* #featured-tours .carousel .row.gx-2 {
  --bs-gutter-x: 0.5rem;
} */
/* Mobile: single card per slide keeps readability */
@media (max-width: 576px) {
  .tour-card-title { font-size: 1.5rem; }
}

/* Splide.js specific styles */
.splide__slide {
  /* padding: 0 0.25rem; */ /* Adjust padding for smaller gaps */
}

.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#featured-tours .main-content-width {
  max-width: 1200px;
  margin: 0 auto;
}

#thematic-stream .main-content-width {
  max-width: 1200px;
  margin: 0 auto;
}

/* Adjust Splide pagination dot position */
.splide__pagination {
    position: relative;
    margin-top: 0.5rem; /* Adjusted to be closer to the container */
}

.theme-container {
    border: 2px solid #e0e0e0;
    padding: 15px;
    border-radius: 8px;
    background-color: #f8f9fa;
}

.theme-container h3 {
    font-size: 1.5rem; /* Larger font size for container names */
}



.right-carousel-overlay{background:linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.15)); color:#fff;}
.right-carousel-overlay .badge{background-color:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.2);} 

/* Small left/right controls for right carousel */
.small-carousel-control {
  width: 2rem;
  height: 2rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.4);
  border-radius: 50%;
}
.small-carousel-control .carousel-control-prev-icon,
.small-carousel-control .carousel-control-next-icon {
  width: 1rem;
  height: 1rem;
}
.discover-card-title {
    font-size: 1.5rem; /* Increased font size for city names */
}

#features {
  background-color: #f8f9fa;
}

#values {
  background-color: #f8f9fa;
}

.feature-icon-sm {
  width: 3rem;
  height: 3rem;
  background-color: #e9ecef;
  border: 2px solid white;
}

.feature-icon-sm svg {
  fill: white;
}

.feature-icon-sm-mobile {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .25rem;
  background-color: #e9ecef;
  border: 2px solid white;
}

.feature-icon-sm-mobile svg {
  fill: white;
}

.h2-custom-style {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.main-content-width {
  max-width: 960px;
}

@media (min-width: 768px) {
  .order-md-1 {
    order: 1;
  }
  .order-md-2 {
    order: 2;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media (min-width: 992px) {
  .order-lg-1 {
    order: 1;
  }
  .order-lg-2 {
    order: 2;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}
.feature-item {
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.h2-custom-style {
  margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
  .feature-item {
    text-align: left !important;
  }

  .feature-icon-sm {
    justify-content: flex-start !important;
  }
}


/* 基础斜体样式 */
.italic-thin {
  font-style: italic; /* 关键属性，实现斜体 */
  /* 若需要“thin”（细体）效果，还需补充字体粗细属性 */
  font-weight: 300; /* 300 对应细体，可根据字体支持情况调整为 200/100 */
}

/* 基础斜体样式 */
.italic-bold {
  font-style: italic; /* 关键属性，实现斜体 */
  /* 若需要“thin”（细体）效果，还需补充字体粗细属性 */
  font-weight: 800; /* 300 对应细体，可根据字体支持情况调整为 200/100 */
}



/* Thematic Discovery Stream Module Styles */

/* Theme subtitle color */
#thematic-stream .theme-container h4 {
    color: #343a40; /* Dark color for better readability, adjust as needed */
}

/* Card hover effect */
#thematic-stream .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#thematic-stream .card:hover {
    transform: scale(1.02);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Deeper shadow */
}

/* Article title line clamping */
.article-title-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Values Section Mobile Styles */
.w-85vw {
    width: 85vw;
    max-width: 100%;
    padding: 0 4px;
}

.w-85vw img {
    object-fit: contain;
    height: auto !important;
}

.w-85vw .feature-description {
    width: 90%;
    margin: 0 auto;
    word-wrap: break-word;
}

.overflow-x-auto::-webkit-scrollbar {
    display: none; /* For Webkit browsers */
}

.overflow-x-auto {
    -ms-overflow-style: none;  /* For Internet Explorer and Edge */
    scrollbar-width: none;  /* For Firefox */
}

/* Unified mobile horizontal scroll for single-card viewport */
@media (max-width: 767.98px) {
  .mobile-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-left: 0; padding-right: 0;
  }
  .mobile-scroll-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem; /* consistent spacing between cards */
  }
  .mobile-scroll-item {
    flex: 0 0 100vw;
    width: 100vw; /* ensure exactly one card fits per viewport */
    max-width: 100%;
  }
}

/* 中国红/朱红色按钮样式 */
.btn-china-red {
    background-color: #b00409; /* 经典的朱红色 */
    border-color: #b00409;
    color: #fff;
    font-weight: bold;
}
.btn-china-red:hover {
    background-color: #fffdfd;
    border-color: #b00409;
    color: #b00409;
}

/* Override Bootstrap primary colors to China Red */
:root {
    --bs-primary-rgb: 176, 4, 9;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #b00409;
    --bs-btn-border-color: #b00409;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #941419;
    --bs-btn-hover-border-color: #941419;
    --bs-btn-focus-shadow-rgb: 208, 4, 10;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #941419;
    --bs-btn-active-border-color: #941419;
    --bs-btn-disabled-bg: #b00409;
    --bs-btn-disabled-border-color: #b00409;
}

.text-primary {
    color: #b00409 !important;
}

.bg-primary {
    background-color: #b00409 !important;
}

.text-xs {
    font-size: 0.75rem !important; /* Approximately 12px */
}

.btn-bottom-border {
    border-bottom: 1px solid currentColor;
}
.navbar .site-title {
  font-weight: 700; /* bold */
  font-size: 1.25rem; /* larger font */
  line-height: 1; 
  color: #b00409; /* black text for light navbar */
}

/* Make all navbar texts bold */
.navbar .nav-link,
.navbar .dropdown-item,
.navbar .navbar-brand {
  font-weight: 700;
}

/* Navbar top-level links use brand vermilion color */
.navbar .nav-link {
  color: #b00409 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #920307 !important; /* slightly darker vermilion on hover */
}

.navbar .nav-link.active {
  color: #b00409 !important;
}

/* Dropdown items use primary color */
.navbar .dropdown-menu .dropdown-item {
  color: var(--text-primary) !important;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  color: var(--text-primary) !important;
}
/* --- Brand Vermilion utilities (centralized) --- */
.vermilion { background-color: #b00409 !important; }
.text-vermilion { color: #b00409 !important; }
.border-vermilion { border-color: #b00409 !important; }
.hover-text-vermilion:hover { color: #920307 !important; }

/* --- Card hover effects --- */
.card-hover:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* --- CTA button hover and shadow --- */
.cta-button { transition: all 0.2s ease-in-out; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(176, 4, 9, 0.4); background-color: #920307 !important; }

/* --- Button styles (outline/vermilion/light) --- */
.btn-outline-vermilion {
  --bs-btn-color: #b00409;
  --bs-btn-border-color: #b00409;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b00409;
  --bs-btn-hover-border-color: #920307;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #920307;
  --bs-btn-active-border-color: #7d0206;
  transition: all 0.2s;
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.btn-vermilion { background-color: #b00409; color: white; border: none; }
.btn-vermilion:hover { background-color: #920307; color: white; }

.btn-vermilion-light {
  --bs-btn-border-color: #b00409;
  font-size: 1rem;
  color: #b00409;
  background-color: #fff;
}

/* --- Horizontal scroll utility --- */
.scroll-horizontal { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.scroll-horizontal > .col { display: inline-block; float: none; margin-right: 1rem; }

/* --- Featured carousel (centralized shared styles) --- */
.featured-carousel-card-style {
  background-color: #f2f2f2;
  padding: 0;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  height: 400px !important;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured-carousel-card-style .card { height: 100%; width: 100%; border: none; background-color: transparent; }

.carousel-featured-image-container {
  position: relative;
  width: 100%;
  padding-bottom: 85%; /* default aspect ratio */
  height: 0 !important;
  overflow: hidden;
  background-color: #e9ecef;
}
.carousel-featured-image-container img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 8px;
}
.featured-carousel-card-style .h2.fw-bolder {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 6em; margin-top: 0.5rem;
}
.featured-carousel-card-style p.text-truncate {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 4.5em; white-space: normal;
}
.carousel-tags-container { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.2rem; }
.carousel-tags-container .badge { border-radius: 0.2rem; padding: 0.2em 0.4em; font-size: 0.7em; }

@media (max-width: 991.98px) {
  .featured-carousel-card-style .card .col-lg-6.col-xl-7,
  .featured-carousel-card-style .card .col-lg-6.col-xl-5 { width: 100%; flex: none; }
  .featured-carousel-card-style .card-body .p-4.p-md-5 { padding: 0.5rem !important; }
}

.carousel-control-prev,
.carousel-control-next { width: auto; padding: 0 0.5rem; }