/* 全局样式 */
:root {
	--primary-color: #0074d9;
	--secondary-color: #2ecc40;
	--dark-color: #333;
	--light-color: #f4f4f4;
	--danger-color: #ff4136;
	--success-color: #2ecc40;
	--max-width: 1300px;
	--box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Roboto', 'Microsoft YaHei', sans-serif;
	line-height: 1.6;
	background: #fff;
	color: #333;
	overflow-x: hidden;
	width: 100%;
	max-width: 100%;
}

a {
	text-decoration: none;
	color: var(--dark-color);
}

ul {
	list-style: none;
}

img {
	width: 100%;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.btn {
	display: inline-block;
	padding: 10px 30px;
	cursor: pointer;
	border: none;
	border-radius: 5px;
	transition: all 0.3s ease;
}

.btn-primary {
	background: var(--primary-color);
	color: #fff;
}

.btn-primary:hover {
	background: #005bb5;
}

.btn-secondary {
	background: var(--secondary-color);
	color: #fff;
}

.btn-secondary:hover {
	background: #25a233;
}

.text-center {
	text-align: center;
}

.py-1 { padding: 1rem 0; }
.py-2 { padding: 2rem 0; }
.py-3 { padding: 3rem 0; }
.py-4 { padding: 4rem 0; }

.my-1 { margin: 1rem 0; }
.my-2 { margin: 2rem 0; }
.my-3 { margin: 3rem 0; }
.my-4 { margin: 4rem 0; }

.section-title {
	font-size: 2.5rem;
	display: block;
	padding-bottom: 0.5rem;
	text-align: center;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 2rem;
}

.section-title span {
	color: var(--primary-color);
}

/* 导航栏 */
#main-nav {
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--box-shadow);
}

#main-nav .container {
  display: flex;
  align-items: center;
  padding: 1rem;
  position: relative;
}

#main-nav .nav-left {
	display: flex;
	align-items: center;
}

#main-nav .nav-right {
	display: flex;
	align-items: center;
}

#main-nav .logo {
	width: 180px;
}

#main-nav .logo-text {
	font-family: "SimHei", "Microsoft YaHei", Arial, sans-serif;
	font-size: 2rem;
	font-weight: bold;
	color: var(--primary-color);
	letter-spacing: 1px;
}

#main-nav ul.nav-links {
  display: flex;
  margin: 0 auto;
}

#main-nav ul.nav-links li a {
	padding: 10px 15px;
	font-weight: bold;
	position: relative;
}

#main-nav ul.nav-links li a:hover {
	color: var(--primary-color);
}

#main-nav ul.nav-links li a::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	background: var(--primary-color);
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	transition: width 0.3s;
}

#main-nav ul.nav-links li a:hover::after {
	width: 80%;
}

.language-switch {
	display: flex;
	align-items: center;
	margin-left: 20px;
}

.language-switch a {
	padding: 5px;
	margin: 0 5px;
	font-size: 0.9rem;
	font-weight: bold;
	border-radius: 3px;
}

.language-switch a.active {
	background-color: var(--primary-color);
	color: #fff;
}

/* 语言切换下拉菜单 */
.language-dropdown {
	position: relative;
	/* margin-left: 15px; */
	display: flex;
	align-items: center;
}

.language-dropdown .globe-icon {
	font-size: 1.4rem;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease;
}

.language-dropdown .globe-icon:hover {
	color: #005bb5;
}

.language-dropdown .lang-options {
	position: absolute;
	top: 100%;
	right: 0;
	background: #fff;
	border-radius: 5px;
	box-shadow: var(--box-shadow);
	width: 120px;
	z-index: 100;
	display: none;
	margin-top: 10px;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s, transform 0.3s;
}

.language-dropdown .lang-options.show {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

.language-dropdown:hover .lang-options {
	display: none;
}

.language-dropdown .lang-options a {
	display: flex;
	align-items: center;
	padding: 8px 15px;
	border-bottom: 1px solid #f4f4f4;
	transition: all 0.3s;
}

.language-dropdown .lang-options a i {
	margin-right: 8px;
	font-size: 1rem;
}

.language-dropdown .lang-options a:hover {
	background: #f9f9f9;
	color: var(--primary-color);
}

.language-dropdown .lang-options a:last-child {
	border-bottom: none;
}

.language-dropdown .lang-options a.active {
	color: var(--primary-color);
	font-weight: bold;
}

/* 用户中心和搜索图标 */
.nav-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-left: 0;
  color: var(--dark-color);
  transition: all 0.3s;
}

.nav-icons a:hover {
	color: var(--primary-color);
}

.nav-icons i {
	font-size: 1.2rem;
}

/* 首页轮播图样式已移至index.css */
@media screen and (max-width: 576px) {
	.btn {
		padding: 8px 20px;
		font-size: 0.9rem;
	}
}

/* 关于我们 */
#about {
	padding: 4rem 0;
}

#about .about-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

#about .about-text h2 {
	margin-bottom: 1rem;
	color: var(--primary-color);
}

#about .about-text p {
	margin-bottom: 1.5rem;
	line-height: 1.8;
}

/* 我们的优势 */
#advantages {
	background: var(--light-color);
	padding: 4rem 0;
}

#advantages .advantages-boxes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

#advantages .box {
	background: #fff;
	text-align: center;
	padding: 2rem;
	border-radius: 5px;
	box-shadow: var(--box-shadow);
	transition: transform 0.3s;
}

#advantages .box:hover {
	transform: translateY(-10px);
}

#advantages .box i {
	font-size: 3rem;
	margin-bottom: 1rem;
	color: var(--primary-color);
}

#advantages .box h3 {
	margin-bottom: 1rem;
}

/* 畅销产品样式已移至index.css */

/* 客户评价样式已移至index.css */

/* 博客推荐样式已移至index.css */

/* 服务内容样式已移至index.css */

/* 联系表单样式已移至index.css */

/* 首页联系表单样式已移至index.css */

/* 页脚 - 响应式设计 */
#main-footer {
	background: var(--dark-color);
	color: #fff;
	padding: 2rem 0 0 0;
}

/* 社交媒体图标和分割线（默认在PC端隐藏） */
.footer-social-icons,
.footer-divider {
	display: none;
}

/* 底部容器 */
#main-footer .footer-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	padding: 0 15px;
}

/* 底部区块 */
.footer-section {
	margin-bottom: 1rem;
}

.footer-title {
	margin-bottom: 1rem;
	color: var(--primary-color);
	font-size: 1.2rem;
	font-weight: 600;
	position: relative;
}

/* 移动端底部导航样式 */
@media (max-width: 768px) {
	/* 底部区块改为手风琴样式 */
	.footer-title {
		cursor: pointer;
		padding: 15px 0;
		margin-bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		letter-spacing: 1px;
		text-transform: uppercase;
		font-size: 0.9rem;
		color: #fff;
	}

	/* 为标题添加下拉图标 */
	.footer-title::after {
		content: '\f107';
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		color: rgba(255,255,255,0.8);
		transition: transform 0.3s;
	}

	.footer-title.active {
		color: rgba(255,255,255,0.9);
	}

	.footer-title.active::after {
		transform: rotate(180deg);
	}
}

.footer-content ul li {
	margin-bottom: 0.5rem;
}

.footer-content ul li a {
	color: #fff;
	font-size: 0.95rem;
	transition: color 0.3s;
}

.footer-content ul li a:hover {
	color: var(--primary-color);
}

.footer-content p {
	color: rgba(255,255,255,0.7);
	line-height: 1.6;
}

/* 底部版权信息 */
#main-footer .footer-bottom {
	background: #222;
	padding: 1rem 0;
	text-align: center;
	margin-top: 2rem;
}

/* 移动端底部导航样式 */
@media (max-width: 768px) {
	#main-footer {
		padding: 30px 15px 0 15px;
		text-align: center;
	}

	/* 显示社交媒体图标 */
	.footer-social-icons {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.footer-social-icons a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		margin: 0 10px;
		color: #fff;
		font-size: 20px;
		transition: all 0.3s;
	}

	.footer-social-icons a:hover {
		color: var(--primary-color);
	}

	/* 显示分割线 */
	.footer-divider {
		display: block;
		height: 1px;
		background-color: rgba(255,255,255,0.2);
		margin: 20px 0 30px 0;
	}

	/* 改变底部容器布局 */
	#main-footer .footer-container {
		display: block;
		padding: 0;
	}

	/* 底部区块改为手风琴样式 */
	.footer-section {
		border-bottom: 1px solid rgba(255,255,255,0.2);
		margin-bottom: 0;
	}

	/* 隐藏内容默认 */
	.footer-content {
		display: none;
		padding: 0 0 15px 0;
		text-align: left;
	}

	/* 内容区链接样式 */
	.footer-content ul {
		list-style: none;
		padding: 0;
	}

	.footer-content ul li {
		margin-bottom: 10px;
	}

	.footer-content ul li a {
		color: rgba(255,255,255,0.7);
		transition: color 0.3s;
	}

	.footer-content ul li a:hover,
	.footer-content ul li a:focus {
		color: var(--primary-color);
	}

	.footer-content p {
		padding: 10px 0;
		margin: 0;
	}
}

/* 响应式设计 */
@media(max-width: 1100px) {
	#products .product-items,
	#advantages .advantages-boxes {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media(max-width: 992px) {
  #main-nav .container {
    /* 在此断点无需额外规则，继承桌面端flex布局即可 */
  }

  #main-nav .nav-left {
    width: auto;
    margin-right: 0;
  }

  #main-nav .nav-right {
    width: auto;
    margin-left: 0;
  }

  #main-nav ul.nav-links {
    /* 继承桌面端 margin: 0 auto; 即可，移除旧的覆盖规则 */
  }

  #main-nav ul.nav-links li {
    margin: 0;
  }

  /* 减小链接内边距和字体以适应屏幕 */
  #main-nav ul.nav-links li a {
    padding: 10px 8px;
    font-size: 14px;
  }
}

@media(max-width: 900px) {
	.section-title {
		font-size: 2rem;
	}

	#products .product-items,
	#advantages .advantages-boxes,
	#services .service-items {
		grid-template-columns: repeat(2, 1fr);
	}

	#testimonials .testimonial-items,
	#blog .blog-items {
		grid-template-columns: 1fr;
		max-width: 600px;
		margin: 0 auto;
	}

	#about .about-content,
	#contact .contact-content,
	#main-footer .footer-container {
		grid-template-columns: 1fr;
	}

	#about .about-image {
		text-align: center;
		margin-bottom: 2rem;
	}

	#about .about-image img {
		max-width: 500px;
	}
}

@media(max-width: 768px) {
	#main-nav .logo-text {
		font-size: 1.8rem;
	}

	#main-nav ul.nav-links {
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 10px;
	}

	#showcase .showcase-content h1 {
		font-size: 2.5rem;
	}

	#showcase .showcase-content p {
		font-size: 1.1rem;
	}

	#products .product-items,
	#advantages .advantages-boxes,
	#services .service-items {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin: 0 auto;
	}
}

/* 导航链接的选中状态 */
.nav-links a.active {
	color: var(--primary-color);
	font-weight: bold;
	position: relative;
}

.nav-links a.active::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--primary-color);
}

/* 实用导航条样式 */
.utility-nav {
	background-color: #f0f0f0;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	font-size: 0.9rem;
}

.utility-nav .contact-info {
	display: flex;
	align-items: center;
}

.utility-nav .contact-info i {
	margin-right: 5px;
	color: #555;
}

.utility-nav .utilities {
	display: flex;
	align-items: center;
}

/* 下拉菜单通用样式 */
.dropdown-container {
	position: relative;
	margin-left: 15px;
}

.dropdown-toggle {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 5px 10px;
	border-radius: 3px;
	transition: background-color 0.2s;
}

.dropdown-toggle:hover {
	background-color: #e0e0e0;
}

.dropdown-toggle i {
	margin-right: 5px;
}

.dropdown-toggle .arrow {
	margin-left: 5px;
	font-size: 10px;
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 150px;
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	border-radius: 4px;
	z-index: 9999;
	display: none;
	padding: 5px 0;
	transform: translateY(10px);
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
}

.dropdown-container:hover .dropdown-menu {
	display: block;
	transform: translateY(0);
	opacity: 1;
}

.dropdown-menu a {
	display: flex;
	align-items: center;
	padding: 8px 15px;
	color: #333;
	text-decoration: none;
	transition: background-color 0.2s;
}

.dropdown-menu a:hover {
	background-color: #f5f5f5;
}

.dropdown-menu a i {
	margin-right: 8px;
	width: 16px;
	text-align: center;
}

.dropdown-menu a.active {
	font-weight: bold;
	background-color: #f0f0f0;
}

/* 搜索框样式 */
.search-container {
        position: relative;
	margin-right: 0;
	display: flex;
	align-items: center;
}

.search-toggle {
	background: none;
	border: none;
	color: #555;
	font-size: 16px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	z-index: 2;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	transition: background-color 0.2s ease;
}

.search-toggle:hover {
	background-color: #f5f5f5;
}

.search-form {
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border-radius: 20px;
	border: 1px solid #ddd;
	overflow: hidden;
	transition: width 0.3s ease;
	z-index: 1;
}

.search-container:hover .search-form,
.search-form:focus-within {
	width: 300px;
}

.search-form input {
	width: 100%;
	height: 100%;
	padding: 0 40px 0 15px;
	border: none;
	outline: none;
	font-size: 14px;
	background-color: transparent;
	opacity: 0;
	transition: opacity 0.3s ease 0.1s;
}

.search-container:hover .search-form input,
.search-form:focus-within input {
	opacity: 1;
}

.search-form button {
	position: absolute;
	right: 0;
	top: 0;
	background: none;
	border: none;
	color: #555;
	cursor: pointer;
	height: 100%;
	width: 40px;
	background-color: transparent;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.search-container:hover .search-form button,
.search-form:focus-within button {
	opacity: 1;
}

/* 搜索框悬停时隐藏搜索图标按钮 */
.search-container:hover .search-toggle {
	opacity: 0;
	visibility: hidden;
}

/* 手动添加聚焦时的class */
.search-toggle.hide {
	opacity: 0;
	visibility: hidden;
}





/* 响应式调整 */
@media (max-width: 992px) {
	.search-container:hover .search-form,
	.search-form:focus-within {
		width: 200px;
	}
}

@media (max-width: 768px) {
	.search-container {
		margin-right: 0;
	}

	.search-container:hover .search-form,
	.search-form:focus-within {
		width: 200px;
		right: 0;
	}
}

/* 移动端导航 */
.mobile-nav {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background-color: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	z-index: 1000;
	padding: 0 15px;
}

.mobile-nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.mobile-logo {
	height: 35px;
	display: flex;
	align-items: center;
}

.mobile-logo a {
	font-size: 24px;
	font-weight: bold;
	color: var(--primary-color);
}

.mobile-nav-right {
	display: flex;
	align-items: center;
}

.mobile-nav-right button {
	background: none;
	border: none;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	color: #333;
	cursor: pointer;
}

.menu-toggle {
	position: relative;
	z-index: 1002;
}

/* 侧滑菜单 */
.mobile-menu {
	position: fixed;
	top: 0;
	right: -80%;
	width: 80%;
	height: 100%;
	background-color: #fff;
	z-index: 1001;
	overflow-y: auto;
	transition: right 0.3s ease;
	box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

.mobile-menu.active {
	right: 0;
}

.mobile-menu-header {
	display: flex;
	justify-content: flex-end;
	padding: 15px;
	border-bottom: 1px solid #eee;
}

.mobile-menu-close {
	background: none;
	border: none;
	font-size: 24px;
	color: #333;
	cursor: pointer;
}

.mobile-menu-content {
	padding: 15px 0;
}

.mobile-menu-item {
	border-bottom: 1px solid #eee;
}

.mobile-menu-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	color: #333;
	font-size: 16px;
	text-decoration: none;
}

.mobile-menu-link.has-submenu:after {
	content: '';
	display: none;
}

.mobile-menu-link.active.has-submenu:after {
	transform: none;
}

.mobile-submenu {
	display: none;
}

.mobile-submenu.active {
	display: none;
}

.mobile-social {
	display: flex;
	padding: 20px;
	border-top: 1px solid #eee;
}

.mobile-social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 15px;
	background-color: #f0f0f0;
	color: #333;
	font-size: 16px;
	text-decoration: none;
}

/* 遮罩层 */
.mobile-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 1000;
	display: none;
}

.mobile-overlay.active {
	display: block;
}

/* 在移动设备上显示移动底部导航 */
@media (max-width: 768px) {
	body {
		padding-top: 60px;
	}

	.utility-nav,
	#main-nav {
		display: none;
	}

	.mobile-nav {
		display: block;
	}
}

.mobile-dropdown {
	position: relative;
	/* margin-right: 10px; */
}

.mobile-dropdown-menu {
	position: absolute;
	top: 100%;
	right: 0;
	width: 120px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	overflow: hidden;
	z-index: 1003;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* 确保下拉菜单显示在其他元素上方 */
.mobile-dropdown.active .mobile-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(5px);
	z-index: 1005;
}

/* 移动端顶部导航下拉菜单的修复 */
.mobile-nav-right .mobile-dropdown {
	position: static;
}

.mobile-nav-right .mobile-dropdown-menu {
	position: absolute;
	top: 60px; /* 导航栏高度 */
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	background-color: #fff;
	border-radius: 0;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	z-index: 1005;
	padding: 10px 0;
}

.mobile-nav-right .mobile-dropdown-menu a {
	padding: 15px 20px;
	text-align: left;
	border-bottom: 1px solid #f0f0f0;
	display: block;
	font-size: 16px;
	display: flex;
	align-items: center;
	min-height: 48px;
}

.mobile-nav-right .mobile-dropdown-menu a:last-child {
	border-bottom: none;
}

.mobile-nav-right .mobile-dropdown-menu a i {
	margin-right: 10px;
	width: 20px;
	text-align: center;
}

.mobile-nav-right .mobile-dropdown-menu a.active {
	color: var(--primary-color);
	font-weight: bold;
	background-color: rgba(0, 116, 217, 0.05);
}

.mobile-dropdown-menu::before {
	display: none; /* 移除小三角 */
}

/* 响应式调整 */
@media (max-width: 992px) {
	.container {
		padding: 0 20px;
		max-width: 100%;
	}
}

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

/* WhatsApp 浮动按钮 */
.whatsapp-float {
	position: fixed;
	right: 20px;
	bottom: 80px;
	z-index: 999;
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
}

@keyframes whatsappBounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-8px);
	}
	60% {
		transform: translateY(-4px);
	}
}

@keyframes whatsappPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

.whatsapp-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	animation: whatsappBounce 2s ease-in-out infinite;
	animation-delay: 3s;
	z-index: 2;
	position: relative;
	transition: all 0.3s ease;
}

.whatsapp-icon::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: transparent;
	border-radius: 50%;
	animation: whatsappPulse 2s infinite;
	z-index: -1;
}

.whatsapp-icon i {
	font-size: 30px;
	color: white;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.whatsapp-text {
	position: absolute;
	right: 55px;
	background: linear-gradient(145deg, #25D366 0%, #128C7E 100%);
	color: white;
	padding: 0 26px 0 35px;
	height: 48px;
	display: flex;
	align-items: center;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.5px;
	white-space: nowrap;
	border-radius: 24px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transform: translateX(20px);
	transition: all 0.3s ease;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 添加文字区域的亮光效果 */
.whatsapp-text::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	border-radius: 24px 24px 0 0;
	background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
	pointer-events: none;
}

/* 添加右侧连接装饰 */
.whatsapp-text::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	background: linear-gradient(145deg, #25D366 0%, #128C7E 100%);
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
	z-index: 1;
}

.whatsapp-float:hover .whatsapp-icon {
	animation-play-state: paused;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
	transform: scale(1.05);
}

.whatsapp-float:hover .whatsapp-text {
	opacity: 1;
	transform: translateX(0);
}
.mobile-only{
	display: none;
}
.desktop-only{
	display: flex;
}
/* 移动端调整 */
@media (max-width: 768px) {
	.mobile-only{
		display: flex;
	}
	.desktop-only{
		display: none;
	}

	.whatsapp-float {
		bottom: 30px;
		right: 15px;
	}

	.whatsapp-icon {
		width: 50px;
		height: 50px;
	}

	.whatsapp-icon i {
		font-size: 25px;
	}

	/* 在移动端隐藏文本 */
	.whatsapp-text {
		display: none; /* 完全隐藏文本元素 */
	}

	/* 移动端不需要连接装饰 */
	.whatsapp-text::after {
		display: none;
	}
}

.language-option {
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 0.5rem; /* 图片与文字之间的间距 */
}

.language_img {
    width: 1rem;  /* 调整为你想要的小尺寸 */
    height: auto; /* 保持比例 */
    vertical-align: middle;
}

/* 返回顶部按钮 */
#back-to-top-btn {
  position: fixed;
  right: 25px;
  bottom: 150px;
  z-index: 998;
  width: 50px;
  height: 50px;
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.3s;
}

#back-to-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top-btn:hover {
  background-color: #005bb5; /* A darker shade of primary color */
}

/* 返回顶部按钮 - 响应式调整 */
@media (max-width: 768px) {
  #back-to-top-btn {
    right: 17px;
    bottom: 90px;
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
}

/* 全宽Banner - 全局样式 */
.full-width-banner {
  background-size: cover;
  background-position: center;
  height: 30vh;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  position: relative;
}

.full-width-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.full-width-banner .banner-content {
  position: relative;
  z-index: 1;
  padding: 2rem;
}

.full-width-banner h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.full-width-banner .breadcrumb {
  justify-content: center;
}

.full-width-banner .breadcrumb a, 
.full-width-banner .breadcrumb .current,
.full-width-banner .breadcrumb .separator {
  color: #fff;
}

.full-width-banner .breadcrumb a:hover {
  text-decoration: underline;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .full-width-banner {
    height: auto;
    padding: 3rem 1rem;
  }
  
  .full-width-banner h1 {
    font-size: 2rem;
  }
}

/* 系统提示框样式 */
#alert {
  z-index: 9999;
  position: fixed;
  top: 30%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  transition: all 0.3s ease;
}

@media (min-width: 992px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}

.alert {
  position: relative;
  padding: 15px 20px;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  animation: fadeInDown 0.5s ease;
  display: flex;
  align-items: flex-start;
}

.alert .alert-message {
	flex: 1;
	min-width: 0;
	word-wrap: break-word;
}

.alert i {
  margin-right: 10px;
  font-size: 18px;
  margin-top: 2px;
}

.alert-dismissible {
  padding-right: 40px;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 15px 20px;
  background: transparent;
  border: 0;
  font-size: 20px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  opacity: 0.5;
}

.alert-dismissible .btn-close:hover {
  opacity: 1;
}

.alert-dismissible .btn-close::before {
  content: '×';
  font-size: 1.5rem;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
  display: block;
}

.alert-dismissible .btn-close:hover::before {
  opacity: 1;
}

.alert a {
  font-weight: 700;
  text-decoration: underline;
}

.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

.alert-success a {
  color: #0a3622;
}

.alert-success i {
  color: #198754;
}

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

.alert-danger a {
  color: #671219;
}

.alert-danger i {
  color: #dc3545;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.alert-warning a {
  color: #523e02;
}

.alert-warning i {
  color: #ffc107;
}

.alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}

.alert-info a {
  color: #04414c;
}

.alert-info i {
  color: #0dcaf0;
}

/* Form Control Styles */
.form-control,
.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus,
.form-select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6-6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

/* Form labels and validation */
.form-label {
    margin-bottom: 0.5rem;
}

.required > .form-label::before {
    content: '* ';
    color: #dc3545;
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: #dc3545;
}

.invalid-feedback.d-block {
    display: block;
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
    border-color: #dc3545;
}

.form-check-input.is-invalid ~ .form-check-label {
    color: #dc3545;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom styles for pagination active/disabled state */
.pagination .page-numbers .active.disabled a {
    background-color: #f0f0f0;
    color: #ccc;
    border-color: #ddd;
    cursor: not-allowed;
}

.pagination .page-numbers .active.disabled a:hover {
    background-color: #f0f0f0;
    color: #ccc;
    border-color: #ddd;
}

/* common-success 页面样式 */
#common-success {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  margin: 2rem auto 3rem auto;
  padding: 2.5rem 2rem 2rem 2rem;
  max-width: 800px;
  min-height: 320px;
}
#common-success h1 {
  color: var(--primary-color);
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: left;
}
#common-success .text-end {
  text-align: right;
  margin-top: 2rem;
}
#common-success p, #common-success ul, #common-success li {
  font-size: 1.08rem;
  color: #333;
  margin-bottom: 0.7rem;
}
@media (max-width: 768px) {
  #common-success {
    padding: 1.2rem 0.5rem 1.5rem 0.5rem;
    min-height: 200px;
  }
  #common-success h1 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  #common-success .text-end {
    margin-top: 1.2rem;
  }
}

/* 首页联系表单错误提示样式已移至index.css */

/* 提示框样式 */
.notification-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 380px;
  max-width: calc(100% - 30px);
}

.notification {
  position: relative;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease forwards;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.notification.hide {
  animation: fadeOut 0.3s ease forwards;
}

.notification-icon {
  margin-right: 15px;
  font-size: 20px;
  display: flex;
  align-items: center;
}

.notification-content {
  flex: 1;
}

.notification-message {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}

.notification-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.notification-close:hover {
  opacity: 1;
}

/* 提示框类型样式 */
.notification-success {
  background-color: #d1e7dd;
  border-left: 4px solid #198754;
  color: #0f5132;
}

.notification-success .notification-icon {
  color: #198754;
}

.notification-error {
  background-color: #f8d7da;
  border-left: 4px solid #dc3545;
  color: #842029;
}

.notification-error .notification-icon {
  color: #dc3545;
}

.notification-warning {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  color: #664d03;
}

.notification-warning .notification-icon {
  color: #ffc107;
}

.notification-info {
  background-color: #cff4fc;
  border-left: 4px solid #0dcaf0;
  color: #055160;
}

.notification-info .notification-icon {
  color: #0dcaf0;
}

/* 提示框动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* 移动端适配 */
@media (max-width: 576px) {
  .notification-container {
    top: 20px;
    left: 15px;
    right: 15px;
    transform: none;
    width: auto;
  }
}