/*-------------------------------------------------------------- 
/** VARIABLES 
--------------------------------------------------------------*/ 
:root { 
   font-family: "Montserrat", sans-serif; 
   --body-font: "Montserrat", sans-serif; 
   --bs-btn-font-family: "Montserrat", sans-serif; 
} 
:root { 
  --bs-primary: #F38252; 
  --bs-primary-rgb: 243, 130, 82; 
  --bs-secondary: #598898; 
  --bs-secondary-rgb: 89, 136, 152; 
  --bs-info-rgb: 13, 202, 240; 
  --body-color: #515151; 
  --bs-heading-color: #333636; 
  --bs-secondary-bg: #F6F6F6; 
  --bs-secondary-bg-rgb: 246, 246, 246; 
  --bs-primary-bg-subtle: #F6F1ED; 
  --bs-link-color: var(--bs-heading-color); 
  --bs-link-color-rgb: var(--bs-heading-color); 
  --bs-link-hover-color: var(--bs-primary); 
  --bs-link-hover-color-rgb: var(--bs-primary-rgb); 
  --swiper-theme-color: var(--bs-primary) !important; 
  --swiper-pagination-color: var(--bs-primary) !important; 
} 

body { 
font-family: var(--body-font); 
font-weight: 400; 
font-size: 16px; 
color: var(--body-color); 
} 

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { 
text-transform: capitalize; 
} 

h1 { 
font-size: 51px; 
font-weight: 600; 
font-family: var(--body-font); 
} 

h2 { 
font-size: 39px; 
font-weight: 600; 
font-family: var(--body-font); 
} 

h3 { 
font-size: 22px; 
font-weight: 400; 
font-family: var(--body-font); 
} 

h4 { 
font-size: 21px; 
font-weight: 600; 
font-family: var(--body-font); 
} 

h5 { 
font-size: 18px; 
font-weight: 500; 
font-family: var(--body-font); 
} 

h6 { 
font-size: 16px; 
font-weight: 500; 
font-family: var(--body-font); 
} 

.btn-primary { 
font-family: var(--bs-btn-font-family); 
--bs-btn-color: #fff; 
--bs-btn-bg: var(--bs-secondary); 
--bs-btn-border-color: var(--bs-secondary); 
--bs-btn-hover-color: #fff; 
--bs-btn-hover-bg: var(--bs-primary); 
--bs-btn-hover-border-color: var(--bs-primary); 
--bs-btn-focus-shadow-rgb: 49, 132, 253; 
--bs-btn-active-color: #fff; 
--bs-btn-active-bg: var(--bs-primary); 
--bs-btn-active-border-color: var(--bs-primary); 
text-transform: capitalize; 
} 

.btn-group-lg>.btn, .btn-lg { 
--bs-btn-padding-y: 0.9rem; 
--bs-btn-padding-x: 2rem; 
} 

/* section padding and margin */ 
.section-padding{ 
padding-top: 160px; 
padding-bottom: 160px; 
} 
.section-margin{ 
margin-top: 160px; 
margin-bottom: 160px; 
} 

.navbar { 
--bs-navbar-active-color: var(--bs-primary); 
} 
.nav-link { 
letter-spacing: 1px; 
} 

.swiper-pagination-bullet{ 
background-color: var(--bs-gray-300); 
opacity: 1; 
width: 17px; 
height: 17px; 
} 
.swiper-pagination-bullet.swiper-pagination-bullet-active{ 
background-color: var(--swiper-pagination-color); 
} 

.site-header { 
position: fixed; 
top: 0; 
background-color: transparent; 
width: 100%; 
z-index: 999999; 
transition: background-color 0.3s ease; 
} 
.site-header.sticky{ 
background-color: var(--bs-light); 
} 

.center-vertical { 
display: flex; 
align-items: center; /* 垂直居中 */ 
height: 500px; 
}

/* 添加从HTML中移动过来的样式 */
.logo-img { 
border-radius: 50%; /* 圆角效果 */ 
margin-right: 20px; /* 两个图片之间的间距 */ 
}

.download-section {
position: relative;
background-image: url('images/running_man.jpg');
background-size: cover;
background-position: center;
padding: 100px 0;
color: white;
text-align: center;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 65, 130, 0.7); /* 蓝色蒙版 */
}

.download-content {
position: relative;
z-index: 1; /* 确保内容在蒙版上方 */
color: white; /* 文字颜色为白色 */
}

.qrcode-img {
max-width: 200px;
margin: 20px auto;
display: block;
padding: 10px; /* 二维码周围添加一些内边距 */
border-radius: 10px; /* 圆角效果 */
}

.download-title {
color: white;
font-weight: bold;
}

.download-subtitle {
color: #e0f0ff; /* 浅蓝白色 */
}

/* 统一所有section高度为750px */
section {
min-height: 750px;
display: flex;
align-items: center;
}