/*****************************************************************
    Template Name    : Techvia - IT Solutions & Business Services HTML5 Responsive Website Template
    Modified to     : AI智能体深蓝紫色主题
    Version          : 2.0
    Created          : 2024
    File Description : 主CSS文件 - AI深蓝紫色主题
*****************************************************************/

/*****************************************************************

** - 01 - 默认CSS (深色主题)
** - 02 - 预加载器
** - 03 - 导航栏
** - 04 - 首页区域
** - 05 - 关于我们
** - 06 - 服务部分
** - 07 - 技术工作区
** - 08 - 行业标签
** - 09 - 博客部分
** - 10 - 分页
** - 11 - 页面标题
** - 12 - 错误页面
** - 13 - 联系表单
** - 14 - 页脚
** - 15 - 版权信息

*****************************************************************/

/**************************************
 ** - 01 - 默认CSS (深色主题)
 **************************************/
*, *:before, *:after {
	box-sizing: inherit;
}

* {
	scroll-behavior: inherit !important;
}

html, body {
	height: auto;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	box-sizing: border-box;
}

body {
	padding: 0;
	margin: 0;
	font-size: 16px;
	font-family: 'Cabin', sans-serif;
	background: #0a0a1a; /* 深蓝色背景 */
	color: #e0e0ff; /* 浅蓝色文字 */
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 3px;
}

button {
	outline: 0 !important;
}

dl, ol, ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.d-table {
	width: 100%;
	height: 100%;
}

.d-table-cell {
	vertical-align: middle;
}

/* 间距工具类 */
.ptb-100 { padding-top: 100px; padding-bottom: 100px; }
.pb-50 { padding-bottom: 50px; }
.pb-70 { padding-bottom: 70px; }
.pb-100 { padding-bottom: 100px; }
.pt-50 { padding-top: 50px; }
.pt-70 { padding-top: 70px; }
.pt-100 { padding-top: 100px; }

/* 背景类 */
.bg-grey {
	background-color: rgba(16, 18, 40, 0.8); /* 深蓝色背景 */
}

.section-padding {
	padding: 100px 0;
}

/* 链接样式 */
a {
	text-decoration: none;
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	outline: 0 !important;
	color: #a0a0ff;
}

a:hover {
	text-decoration: none;
	color: #7b68ee;
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.4;
	font-family: 'Dosis', sans-serif;
	color: #ffffff;
}

/* 段落样式 */
p {
	font-size: 16px;
	line-height: 1.7;
	color: #b0b0d0;
	margin-bottom: 15px;
	font-weight: 400;
	letter-spacing: 0.3px;
	font-family: 'Cabin', sans-serif;
}

p:last-child {
	margin-bottom: 0;
}

/* 按钮样式 - AI科技感 */
.default-btn {
	border: none;
	position: relative;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	z-index: 1;
	color: #ffffff;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	padding: 16px 40px;
	box-shadow: 0 5px 25px rgba(123, 104, 238, 0.3);
	border: 1px solid rgba(123, 104, 238, 0.3);
}

.default-btn:hover, .default-btn:focus {
	color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 10px 35px rgba(123, 104, 238, 0.4);
}

.default-btn-one {
	border: none;
	position: relative;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	z-index: 1;
	color: #ffffff;
	background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	padding: 16px 40px;
	margin-right: 20px;
	box-shadow: 0 5px 25px rgba(0, 212, 255, 0.3);
	border: 1px solid rgba(0, 212, 255, 0.3);
}

.default-btn-one:hover, .default-btn-one:focus {
	color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 10px 35px rgba(0, 212, 255, 0.4);
}

/* 区块标题 */
.section-title {
	text-align: center;
	margin-bottom: 65px;
	line-height: 1.5;
}

.section-title h6 {
	font-size: 16px;
	font-weight: 700;
	color: #00d4ff; /* AI蓝色 */
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 15px;
}

.section-title h2 {
	font-size: 42px;
	color: #ffffff;
	margin: 10px 0 0 0;
	font-weight: 800;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.color-text {
	color: #7b68ee;
}

/*****************************************
 ** - 00 - 返回顶部按钮
 *****************************************/
.go-top {
	position: fixed;
	cursor: pointer;
	top: 0;
	right: 30px;
	color: #ffffff;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	z-index: 4;
	width: 50px;
	text-align: center;
	height: 50px;
	line-height: 50px;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 50%;
	box-shadow: 0 5px 20px rgba(123, 104, 238, 0.3);
}

.go-top.active {
	top: 95%;
	transform: translateY(-98%);
	opacity: 1;
	visibility: visible;
}

.go-top:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(123, 104, 238, 0.4);
}

/**************************************
 ** - 02 - 预加载器
 **************************************/
/**************************************
 ** - 02 - Preloader Section CSS
 **************************************/

.preloader {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader .loader {
	position: relative;
	text-align: center;
	margin: 0 auto;
	width: 80px;
	/*height: 80px;*/
}

.preloader .loader .box {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #7b68ee 0%, #00d4ff 100%);
	animation: animate 1.5s ease-in-out infinite;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 15px;
	box-shadow: 0 0 30px rgba(123, 104, 238, 0.5);
}

.preloader .loader .shadow {
	width: 100%;
	height: 10px;
	background: rgba(123, 104, 238, 0.3);
	position: absolute;
	bottom: -15px;
	left: 0;
	border-radius: 50%;
	animation: shadow 1.5s ease-in-out infinite;
	filter: blur(5px);
}

.preloader::before, .preloader::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 60%;
	height: 100%;
	z-index: -1;
	background: #7b68ee;
	transition: .9s;
}

.preloader::after {
	left: auto;
	right: 0;
}

.preloader.preloader-deactivate {
	opacity: 0;
	visibility: hidden;
}

.preloader.preloader-deactivate::after, .preloader.preloader-deactivate::before {
	width: 0;
}

.preloader.preloader-deactivate .loader {
	opacity: 0;
	visibility: hidden;
}

@keyframes animate {
	0% {
		transform: rotate(0deg) scale(1);
		box-shadow: 0 0 20px rgba(123, 104, 238, 0.5);
	}
	50% {
		transform: rotate(180deg) scale(0.8);
		box-shadow: 0 0 40px rgba(123, 104, 238, 0.8);
	}
	100% {
		transform: rotate(360deg) scale(1);
		box-shadow: 0 0 20px rgba(123, 104, 238, 0.5);
	}
}

@keyframes shadow {
	0%, 100% {
		transform: scale(1);
		opacity: 0.5;
	}
	50% {
		transform: scale(1.2);
		opacity: 0.8;
	}
}

/* 加载文字样式 */
.loading-text {
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	margin-top: 100px;
	text-align: center;
	font-family: 'Dosis', sans-serif;
	text-shadow: 0 0 10px rgba(123, 104, 238, 0.5);
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; }
}

/**************************************
 ** - 04 - 首页区域
 **************************************/
.home-section {
	position: relative;
	z-index: 1;
	height: 100vh;
	/*max-height: 90vh;*/
	/*background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);*/
	background-image: url("/assets/img/my/main_3.png") ;  /* fallback for old browsers */
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.home-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
			radial-gradient(circle at 20% 50%, rgba(123, 104, 238, 0.1) 0%, transparent 50%),
			radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
			radial-gradient(circle at 40% 80%, rgba(255, 107, 157, 0.05) 0%, transparent 50%);
	z-index: -1;
}

.main-banner-content {
	padding-top: 50px;
	position: relative;
	z-index: 2;
}

.main-banner-content h1 {
	font-size: 60px;
	color: #ffffff;
	margin: 0 0 20px 0;
	font-weight: 800;
	line-height: 1.2;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.main-banner-content p {
	color: #b0b0d0;
	font-size: 20px;
	margin: 0 0 25px 0;
	line-height: 1.6;
}

.main-banner-content .banner-btn {
	margin-top: 35px;
	display: flex;
	justify-content: left;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.video-box {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 25px;
}

.video-box .popup-video {
	display: inline-block;
	position: relative;
	z-index: 9;
	font-size: 24px;
	color: #7b68ee;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	width: 65px;
	height: 65px;
	border-radius: 50%;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.3);
}

.video-box:hover .popup-video {
	background: #7b68ee;
	color: #ffffff;
	transform: scale(1.1);
}

#particles-js {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/**************************************
 ** - 05 - 关于我们
 **************************************/
.about-section {
	position: relative;
	z-index: 1;
}

.about-content {
	padding: 10px;
}

.about-content h6 {
	color: #00d4ff;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.about-content h2 {
	font-size: 42px;
	font-weight: 800;
	margin-bottom: 25px;
	color: #ffffff;
}

.about-content p {
	margin-bottom: 20px;
	color: #b0b0d0;
}

.about-section .skills {
	margin-top: 35px;
}

.about-section .skills .skill-item {
	margin-bottom: 25px;
}

.about-section .skills .skill-item:last-child {
	margin-bottom: 0;
}

.about-section .skills .skill-item h6 {
	position: relative;
	z-index: 4;
	font-size: 16px;
	letter-spacing: 0px;
	text-transform: capitalize;
	font-weight: 600;
	margin-bottom: 10px;
	color: #ffffff;
}

.about-section .skills .skill-item h6 em {
	float: right;
	font-size: 16px;
	font-style: normal;
	color: #00d4ff;
}

.about-section .skills .skill-item .skill-progress {
	position: relative;
	height: 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.about-section .skills .skill-item .skill-progress .progres {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #7b68ee 0%, #00d4ff 100%);
	transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 4px;
}

.about-btn-box {
	margin-top: 35px;
	display: inline-block;
}

.about-image {
	position: relative;
	text-align: center;
	margin-left: 0;
}

.about-image img {
	border-radius: 15px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(123, 104, 238, 0.2);
}

.about-image .sub-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	padding: 20px;
	border-radius: 15px;
	max-width: 370px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: rgba(16, 18, 40, 0.9);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	margin-left: auto;
	margin-right: auto;
	border: 1px solid rgba(123, 104, 238, 0.3);
}

.about-image .sub-content img {
	max-width: 135px;
	border-radius: 10px;
	margin-right: 20px;
}

.about-image .sub-content h3 {
	color: #00d4ff;
	font-size: 45px;
	font-weight: 700;
	margin-bottom: 0;
}

.about-image .sub-content span {
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
}

/*************************************
 ** - 06 - 服务部分
 *************************************/
.services-section .section-title {
	margin-bottom: 35px;
}

.single-services-item {
	position: relative;
	z-index: 1;
	display: block;
	padding: 40px 30px;
	text-align: left;
	border-radius: 15px;
	background: rgba(16, 18, 40, 0.8);
	margin-top: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid rgba(123, 104, 238, 0.1);
	backdrop-filter: blur(10px);
}

.single-services-item:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: 0 20px 40px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.3);
	background: rgba(16, 18, 40, 0.95);
}

.services-icon {
	display: inline-block;
	margin-bottom: 20px;
	transition: 0.5s;
}

.services-icon i {
	color: #00d4ff;
	font-size: 50px;
	transition: 0.5s;
}

.single-services-item:hover .services-icon i {
	color: #7b68ee;
	transform: rotateY(180deg);
}

.single-services-item h3 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 0;
	color: #ffffff;
	transition: all 0.4s;
}

.single-services-item p {
	font-size: 16px;
	margin-top: 15px;
	margin-bottom: 0;
	color: #b0b0d0;
	transition: all 0.4s;
}

/*****************************************
 ** - 08 - 技术工作区
 *****************************************/
.single-technology-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 25px 10px 20px 10px;
	text-align: center;
	border-radius: 15px;
	background: rgba(16, 18, 40, 0.8);
	margin-bottom: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.1);
	backdrop-filter: blur(10px);
}

.single-technology-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.3);
}

.single-technology-item .technology-icon {
	display: inline-block;
	width: 70px;
	margin-right: 10px;
}

.single-technology-item .technology-icon img {
	width: 50px;
}

.single-technology-item h3 {
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

/**************************************
 ** - 10 - 行业标签
 **************************************/
.tab .tabs_item {
	display: none;
}

.tab .tabs_item:first-child {
	display: block;
}

.solutions-list-tab .tabs {
	padding-left: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 50px;
	gap: 15px;
}

.solutions-list-tab .tabs li {
	flex: 1;
	/*max-width: 200px;*/
	text-align: center;
}

.solutions-list-tab .tabs li a {
	display: block;
	color: #ffffff;
	background: rgba(16, 18, 40, 0.8);
	font-size: 17px;
	font-weight: 700;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.1);
	backdrop-filter: blur(10px);
}

.solutions-list-tab .tabs li.current a,
.solutions-list-tab .tabs li:hover a {
	color: #ffffff;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	box-shadow: 0 15px 35px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.3);
	transform: translateY(-5px);
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content h3 {
	font-size: 36px;
	color: #ffffff;
	margin: 0 0 20px 0;
	font-weight: 800;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content p {
	margin: 0 0 20px 0;
	color: #b0b0d0;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list {
	padding-left: 0;
	margin-bottom: 25px;
	margin-top: 25px;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list li {
	font-size: 16px;
	color: #b0b0d0;
	list-style-type: none;
	padding-bottom: 12px;
	padding-left: 25px;
	position: relative;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list li:last-child {
	padding-bottom: 0;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list li i {
	font-size: 16px;
	color: #00d4ff;
	margin-right: 10px;
	position: absolute;
	left: 0;
	top: 3px;
}

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

.tab-image img {
	border-radius: 15px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(123, 104, 238, 0.2);
}

/**************************************
 ** - 18 - 博客部分
 **************************************/
.blog-single-item {
	border-radius: 15px;
	overflow: hidden;
	background: rgba(16, 18, 40, 0.8);
	position: relative;
	margin-bottom: 30px;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(123, 104, 238, 0.1);
	backdrop-filter: blur(10px);
}

.blog-single-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.3);
}

.blog-single-item .blog-image {
	position: relative;
	overflow: hidden;
}

.blog-single-item .blog-image img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.blog-single-item:hover .blog-image img {
	transform: scale(1.05);
}

.blog-single-item .category-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	color: #ffffff;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}

.blog-single-item .blog-description {
	padding: 30px;
	border-top: none;
}

.blog-single-item .blog-description .blog-info {
	padding-left: 0;
	margin-bottom: 15px;
}

.blog-single-item .blog-description .blog-info li {
	list-style-type: none;
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	margin-right: 15px;
	color: #00d4ff;
}

.blog-single-item .blog-description .blog-info li:last-child {
	margin-right: 0;
}

.blog-single-item .blog-description .blog-info li i {
	margin-right: 5px;
}

.blog-single-item .blog-description .blog-text h3 {
	color: #ffffff;
	font-size: 22px;
	margin: 10px 0px 15px 0;
	line-height: 1.4;
	font-weight: 700;
	transition: color 0.3s ease;
}

.blog-single-item .blog-description .blog-text h3:hover {
	color: #00d4ff;
}

.blog-single-item .blog-description .blog-text p {
	margin: 0 0 20px 0;
	font-size: 16px;
	color: #b0b0d0;
	line-height: 1.6;
}

.blog-single-item .blog-description .blog-text .blog-btn {
	margin-top: 15px;
}

.blog-single-item .blog-description .blog-text .blog-btn .blog-btn-one {
	display: inline-block;
	font-size: 16px;
	color: #ffffff;
	font-weight: 600;
	padding: 12px 25px;
	border-radius: 8px;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	transition: all 0.3s ease;
}

.blog-single-item .blog-description .blog-text .blog-btn .blog-btn-one:hover {
	background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
}

/*****************************************************
 ** - 20 - 分页
 *****************************************************/
.pagination-area {
	margin-top: 40px;
	text-align: center;
}

.pagination-area .page-numbers {
	width: 50px;
	height: 50px;
	margin: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 18, 40, 0.8);
	color: #ffffff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	font-size: 18px;
	font-weight: 700;
	border-radius: 8px;
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.1);
}

.pagination-area .page-numbers.current,
.pagination-area .page-numbers:hover,
.pagination-area .page-numbers:focus {
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	color: #ffffff;
	box-shadow: 0 10px 25px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.3);
	transform: translateY(-3px);
}

/************************************************
 ** - 21 - 页面标题
 ************************************************/
.page-title-area {
	position: relative;
	z-index: 1;
	background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
	height: 400px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.page-title-area::before {
	content: "";
	position: absolute;
	z-index: -1;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background:
			radial-gradient(circle at 30% 50%, rgba(123, 104, 238, 0.2) 0%, transparent 50%),
			radial-gradient(circle at 70% 20%, rgba(0, 212, 255, 0.2) 0%, transparent 50%);
}

.page-title-content {
	text-align: center;
	margin-top: 0;
}

.page-title-content h2 {
	margin-bottom: 20px;
	color: #ffffff;
	font-size: 48px;
	font-weight: 800;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.page-title-content ul {
	padding-left: 0;
	list-style-type: none;
	margin-top: 15px;
	margin-bottom: 0;
}

.page-title-content ul li {
	color: #b0b0d0;
	display: inline-block;
	position: relative;
	font-weight: 500;
	font-size: 17px;
	margin: 0 15px;
}

.page-title-content ul li a {
	display: inline-block;
	color: #00d4ff;
	transition: 0.3s ease;
}

.page-title-content ul li a:hover {
	color: #7b68ee;
}

.page-title-content ul li::before {
	content: '›';
	position: absolute;
	right: -18px;
	top: 50%;
	transform: translateY(-50%);
	color: #00d4ff;
	font-size: 20px;
}

.page-title-content ul li:last-child::before {
	display: none;
}

/**************************************
 ** - 26 - 联系表单
 **************************************/
.contact-section {
	position: relative;
}

.contact-form .form-group {
	margin-bottom: 30px;
}

.contact-form form .form-control {
	background: rgba(16, 18, 40, 0.8);
	border: none;
	height: 55px;
	font-size: 16px;
	color: #ffffff;
	border-left: 4px solid #7b68ee;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	padding: 15px 20px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.contact-form form .form-control:focus {
	border-left: 4px solid #00d4ff;
	box-shadow: 0 15px 35px rgba(123, 104, 238, 0.3);
	background: rgba(16, 18, 40, 0.9);
}

.contact-form form textarea.form-control {
	height: 180px;
	padding-top: 15px;
	line-height: 1.6;
	resize: none;
}

.contact-form form .btn {
	margin-top: 20px;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	color: #ffffff;
	border: none;
	padding: 16px 40px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 8px;
	transition: all 0.3s ease;
	box-shadow: 0 10px 30px rgba(123, 104, 238, 0.3);
}

.contact-form form .btn:hover {
	background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
	transform: translateY(-3px);
	box-shadow: 0 15px 35px rgba(0, 212, 255, 0.3);
}

/*****************************************
 ** - 30 - 页脚
 *****************************************/
.footer-subscribe-wrapper {
	position: relative;
	z-index: 1;
	background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
}

.footer-subscribe-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
			radial-gradient(circle at 20% 30%, rgba(123, 104, 238, 0.1) 0%, transparent 50%),
			radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
	z-index: -1;
}

.footer-logo {
	display: inline-block;
	margin-bottom: 25px;
}

.footer-heading {
	margin-bottom: 25px;
}

.footer-heading h3 {
	font-size: 22px;
	color: #ffffff;
	font-weight: 700;
	margin: 0 0 0 0;
	position: relative;
	padding-bottom: 15px;
	border-bottom: 2px solid rgba(123, 104, 238, 0.3);
}

.single-footer-widget .footer-social {
	padding-left: 0;
	margin-bottom: 0;
	margin-top: 20px;
}

.single-footer-widget .footer-social li {
	display: inline-block;
	margin-right: 10px;
}

.single-footer-widget .footer-social li:last-child {
	margin-right: 0;
}

.single-footer-widget .footer-social i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	width: 40px;
	line-height: 40px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 50%;
	color: #ffffff;
	transition: all 0.3s ease;
	font-size: 18px;
	border: 1px solid rgba(123, 104, 238, 0.3);
}

.single-footer-widget .footer-social i:hover {
	color: #ffffff;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(123, 104, 238, 0.3);
}

.single-footer-widget p {
	font-size: 16px;
	color: #b0b0d0;
	font-weight: 400;
	line-height: 1.7;
}

.single-footer-widget .footer-quick-links {
	padding-left: 0;
	margin-bottom: 0;
}

.single-footer-widget .footer-quick-links li {
	list-style-type: none;
	padding-bottom: 15px;
}

.single-footer-widget .footer-quick-links li:last-child {
	padding-bottom: 0;
}

.single-footer-widget .footer-quick-links li a {
	display: inline-block;
	color: #b0b0d0;
	font-size: 16px;
	font-weight: 400;
	transition: all 0.3s ease;
}

.single-footer-widget .footer-quick-links li a:hover {
	color: #00d4ff;
	padding-left: 10px;
}

.single-footer-widget .footer-info-contact {
	position: relative;
	padding-left: 35px;
	margin-bottom: 20px;
}

.single-footer-widget .footer-info-contact:last-child {
	margin-bottom: 0;
}

.single-footer-widget .footer-info-contact i {
	color: #00d4ff;
	position: absolute;
	left: 0;
	top: 0px;
	font-size: 20px;
}

.single-footer-widget .footer-info-contact h3 {
	font-size: 16px;
	color: #ffffff;
	font-weight: 600;
	margin: 0 0 8px 0;
}

.single-footer-widget .footer-info-contact span {
	font-size: 16px;
	color: #b0b0d0;
	font-weight: 400;
}

.single-footer-widget .footer-info-contact span a {
	font-size: 16px;
	color: #b0b0d0;
	font-weight: 400;
	transition: color 0.3s ease;
}

.single-footer-widget .footer-info-contact span a:hover {
	color: #00d4ff;
}

/*****************************************
 ** - 31 - 版权信息
 *****************************************/
.copyright-section {
	padding: 35px 0;
	background: rgba(10, 10, 26, 0.9);
	border-top: 1px solid rgba(123, 104, 238, 0.2);
	backdrop-filter: blur(10px);
}

.copyright-section p {
	color: #b0b0d0;
	font-size: 16px;
	margin: 0;
}

.copyright-section p a {
	color: #00d4ff;
	display: inline-block;
	font-weight: 600;
	transition: color 0.3s ease;
}

.copyright-section p a:hover {
	color: #7b68ee;
}

.beian-icon {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	vertical-align: middle;
}

.vertical-center {
	display: inline-flex;
	align-items: center;
}

/* 新增：项目详情页样式 */
.project-details-info {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 15px;
	padding: 30px;
	margin-top: 40px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(123, 104, 238, 0.1);
	backdrop-filter: blur(10px);
}

.project-details-info .single-info-box {
	text-align: center;
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid rgba(123, 104, 238, 0.2);
}

.project-details-info .single-info-box:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.project-details-info .single-info-box h4 {
	color: #b0b0d0;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.project-details-info .single-info-box span {
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
}

/* 文章内容样式 */
.article-content {
	color: #b0b0d0;
	line-height: 1.8;
	font-size: 17px;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
	color: #ffffff;
	margin-top: 30px;
	margin-bottom: 20px;
}

.article-content p {
	margin-bottom: 20px;
	color: #b0b0d0;
}

.article-content ul,
.article-content ol {
	padding-left: 20px;
	margin: 20px 0;
}

.article-content li {
	margin-bottom: 10px;
	color: #b0b0d0;
}

.article-content blockquote {
	border-left: 4px solid #7b68ee;
	padding-left: 25px;
	margin: 30px 0;
	font-style: italic;
	color: #ffffff;
	font-size: 20px;
	background: rgba(123, 104, 238, 0.1);
	padding: 25px;
	border-radius: 8px;
}

/* 搜索框样式 */
.search-box {
	position: relative;
	margin-bottom: 30px;
}

.search-box input {
	width: 100%;
	padding: 15px 50px 15px 20px;
	background: rgba(16, 18, 40, 0.8);
	border: 1px solid rgba(123, 104, 238, 0.3);
	border-radius: 8px;
	color: #ffffff;
	font-size: 16px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.search-box input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.1);
	border-color: #7b68ee;
}

.search-box i {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #7b68ee;
	pointer-events: none;
}

#refresh-btn {
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	color: #ffffff;
	border: none;
	padding: 12px 25px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 600;
}

#refresh-btn:hover {
	background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
}

#refresh-btn i {
	transition: transform 0.3s ease;
}

#refresh-btn:hover i {
	transform: rotate(180deg);
}

/* 响应式设计 */
@media (max-width: 991px) {
	.section-title h2 {
		font-size: 36px;
	}

	.main-banner-content h1 {
		font-size: 48px;
	}

	.solutions-list-tab .tabs {
		flex-direction: column;
		align-items: center;
	}

	.solutions-list-tab .tabs li {
		max-width: 100%;
		width: 100%;
		margin-bottom: 15px;
	}
}

@media (max-width: 767px) {
	.section-title h2 {
		font-size: 32px;
	}

	.main-banner-content h1 {
		font-size: 36px;
	}

	.main-banner-content .banner-btn {
		flex-direction: column;
		align-items: flex-start;
	}

	.video-box {
		margin-left: 0;
		margin-top: 20px;
	}

	.page-title-content h2 {
		font-size: 36px;
	}
}

@media (max-width: 480px) {
	.section-title h2 {
		font-size: 28px;
	}

	.main-banner-content h1 {
		font-size: 32px;
	}

	.page-title-content h2 {
		font-size: 32px;
	}
}
/**************************************
 ** - 优化：课程亮点模块 - 与其他模块协调
 **************************************/

/* 课程亮点主容器 - 与其他section保持一致 */
.overview-section {
	background: transparent;
	border: none;
	box-shadow: none;
	margin: 0;
	position: relative;
}

.overview-section::before,
.overview-section::after {
	content: none; /* 移除装饰性元素 */
}

/* 内容区域 - 保持与about-section一致 */
.overview-content {
	padding: 0;
	position: relative;
	z-index: 2;
}

.overview-content h6 {
	color: #00d4ff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 15px;
	display: inline-block;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.overview-content h2 {
	font-size: 42px;
	color: #ffffff;
	margin: 10px 0 25px 0;
	font-weight: 800;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1.3;
	padding-bottom: 15px;
	border-bottom: 2px solid rgba(123, 104, 238, 0.3);
}

.overview-content p {
	font-size: 18px;
	color: #b0b0d0;
	line-height: 1.8;
	margin-bottom: 30px;
	padding: 0;
}

/* 亮点列表 - 与services模块协调 */
.features-list {
	position: relative;
	padding-left: 0;
	margin: 30px 0 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.features-list li {
	position: relative;
	padding: 20px;
	margin-bottom: 0;
	background: rgba(16, 18, 40, 0.8);
	border-radius: 12px;
	border: 1px solid rgba(123, 104, 238, 0.2);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: blur(10px);
	list-style: none;
	transform: none;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.features-list li::before {
	content: none; /* 移除左侧竖条 */
}

.features-list li:hover {
	transform: translateY(-5px);
	background: rgba(26, 26, 58, 0.9);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow: 0 10px 25px rgba(123, 104, 238, 0.3);
}

.features-list li span {
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	text-align: left;
}

.features-list li span::before {
	content: '✓';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	width: 24px;
	height: 24px;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	color: #ffffff;
	border-radius: 50%;
	font-size: 14px;
	font-weight: bold;
	margin-right: 12px;
	flex-shrink: 0;
	margin-top: 2px;
}

/* 图片区域优化 - 与about-image一致 */
.overview-image {
	position: relative;
	padding: 0;
	text-align: center;
}

.overview-image img {
	width: 100%;
	height: auto;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(123, 104, 238, 0.2);
	transform: none;
	transition: all 0.3s ease;
}

.overview-image img:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.4);
}

/* 响应式设计 */
@media (max-width: 991px) {
	.overview-content h2 {
		font-size: 36px;
	}

	.features-list {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.overview-image img {
		margin-top: 30px;
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 767px) {
	.overview-content h2 {
		font-size: 32px;
	}

	.overview-content p {
		font-size: 16px;
	}

	.features-list li {
		padding: 18px;
	}

	.features-list li span {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.overview-content h2 {
		font-size: 28px;
	}

	.features-list li {
		padding: 15px;
	}

	.features-list li span {
		font-size: 14px;
	}

	.features-list li span::before {
		min-width: 20px;
		width: 20px;
		height: 20px;
		font-size: 12px;
		margin-right: 10px;
	}
}

/* 与首页其他部分统一的动画 */
.features-list li {
	animation: fadeInUp 0.5s ease forwards;
	opacity: 0;
}

.features-list li:nth-child(1) { animation-delay: 0.1s; }
.features-list li:nth-child(2) { animation-delay: 0.2s; }
.features-list li:nth-child(3) { animation-delay: 0.3s; }
.features-list li:nth-child(4) { animation-delay: 0.4s; }
.features-list li:nth-child(5) { animation-delay: 0.5s; }
.features-list li:nth-child(6) { animation-delay: 0.6s; }

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

/* 添加与其他模块统一的装饰效果 */
.overview-section .row {
	position: relative;
}

.overview-section .row::before {
	content: '';
	position: absolute;
	width: 80px;
	height: 80px;
	right: -20px;
	bottom: -20px;
	background: radial-gradient(circle, rgba(123, 104, 238, 0.1) 0%, transparent 70%);
	z-index: 0;
	opacity: 0.5;
}

/* 为保持一致性，移除之前的复杂动画，采用与其他模块相似的过渡效果 */
.overview-section {
	transition: all 0.3s ease;
}
/**************************************
 ** - 新增：优化布局样式
 **************************************/

/* 关于我们 - 居中布局优化 */
.about-section .about-content.text-center .skills {
	max-width: 600px;
	margin: 40px auto 0;
}

.about-section .skill-item {
	text-align: left;
	margin-bottom: 25px;
}

.about-section .skill-item h6 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.about-section .skill-item h6 em {
	font-style: normal;
	color: #00d4ff;
	font-weight: 700;
	font-size: 18px;
}

/* 课程亮点 - 网格布局 */
.overview-section .features-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 25px;
	margin-top: 40px;
}

.overview-section .feature-item {
	background: rgba(16, 18, 40, 0.8);
	border: 1px solid rgba(123, 104, 238, 0.2);
	border-radius: 12px;
	padding: 25px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	text-align: left;
	display: flex;
	align-items: flex-start;
}

.overview-section .feature-item:hover {
	transform: translateY(-5px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow: 0 10px 30px rgba(123, 104, 238, 0.2);
}

.overview-section .feature-item i {
	color: #00d4ff;
	font-size: 20px;
	margin-right: 15px;
	margin-top: 2px;
	flex-shrink: 0;
}

.overview-section .feature-item span {
	color: #ffffff;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 500;
}

/* 应用领域 - 标签优化 */
.solutions-list-tab .tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 50px;
}

.solutions-list-tab .tabs li {
	flex: 0 0 auto;
}

.solutions-list-tab .tabs li a {
	min-width: 160px;
	text-align: center;
	padding: 15px 25px;
	font-size: 16px;
	white-space: nowrap;
}

/* 移动端菜单栏修复 */
@media (max-width: 991px) {
	/* 确保移动端菜单显示 */
	.techvia-responsive-nav {
		display: block !important;
	}

	.techvia-nav {
		display: none !important;
	}

	/* 移动端菜单按钮 */
	.navbar-toggler {
		display: block !important;
		border: 1px solid rgba(123, 104, 238, 0.3);
		background: rgba(123, 104, 238, 0.1);
		padding: 8px 12px;
		border-radius: 8px;
	}

	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28123, 104, 238, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
		width: 24px;
		height: 24px;
	}

	/* 移动端菜单容器 */
	.navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: rgba(10, 10, 26, 0.98);
		backdrop-filter: blur(20px);
		border: 1px solid rgba(123, 104, 238, 0.3);
		border-radius: 0 0 15px 15px;
		padding: 15px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	/* 移动端菜单项 */
	.navbar-nav {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.navbar-nav .nav-item {
		margin: 0;
	}

	.navbar-nav .nav-item > a {
		display: block;
		padding: 15px 20px;
		color: rgba(255, 255, 255, 0.9);
		font-size: 16px;
		font-weight: 600;
		border-radius: 10px;
		transition: all 0.3s ease;
	}

	.navbar-nav .nav-item > a:hover,
	.navbar-nav .nav-item.active > a {
		background: rgba(123, 104, 238, 0.2);
		color: #ffffff;
	}

	/* 下拉菜单 */
	.navbar-nav .nav-item .dropdown-menu {
		position: static !important;
		float: none;
		width: 100%;
		background: rgba(16, 18, 40, 0.8);
		border: 1px solid rgba(123, 104, 238, 0.2);
		margin-top: 5px;
		padding: 10px 0;
	}

	.navbar-nav .nav-item .dropdown-menu li a {
		padding: 10px 30px;
		font-size: 15px;
	}

	/* 优化布局响应式 */
	.overview-section .features-list {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.solutions-list-tab .tabs {
		flex-direction: column;
		align-items: center;
	}

	.solutions-list-tab .tabs li {
		width: 100%;
		max-width: 300px;
	}

	.solutions-list-tab .tabs li a {
		width: 100%;
	}
}

/* 小屏幕优化 */
@media (max-width: 576px) {
	.overview-section .feature-item {
		padding: 20px;
	}

	.overview-section .feature-item i {
		font-size: 18px;
		margin-right: 12px;
	}

	.overview-section .feature-item span {
		font-size: 15px;
	}

	.about-section .skill-item h6 {
		font-size: 15px;
	}

	.about-section .skill-item h6 em {
		font-size: 16px;
	}

	.section-title h2 {
		font-size: 32px;
	}

	.section-title h6 {
		font-size: 15px;
	}
}

/* 移动端菜单栏激活状态 */
.navbar-collapse.show {
	display: block !important;
}









/**************************************
 ** 大胆布局调整 - 去除图片后的创意设计
 **************************************/

/* 1. 课程介绍部分 - 现代卡片式设计 */
.about-section {
	position: relative;
	overflow: hidden;
}

.about-section::before {
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(123, 104, 238, 0.2) 0%, transparent 70%);
	top: 10%;
	left: 5%;
	z-index: 0;
}

.about-section::after {
	content: '';
	position: absolute;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
	bottom: 10%;
	right: 5%;
	z-index: 0;
}

.about-content {
	position: relative;
	z-index: 2;
	padding: 50px;
	background: rgba(16, 18, 40, 0.6);
	border-radius: 25px;
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(20px);
	box-shadow:
			0 20px 50px rgba(0, 0, 0, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.about-content h6 {
	color: #00d4ff;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 20px;
	display: inline-block;
	padding: 8px 20px;
	background: rgba(0, 212, 255, 0.1);
	border-radius: 50px;
	border: 1px solid rgba(0, 212, 255, 0.3);
}

.about-content h2 {
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;
	margin: 20px 0 30px 0;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.about-content > p {
	font-size: 20px;
	line-height: 1.8;
	color: #d0d0ff;
	margin-bottom: 40px;
	padding-left: 25px;
	border-left: 3px solid #7b68ee;
	background: rgba(123, 104, 238, 0.05);
	padding: 20px 25px;
	border-radius: 0 15px 15px 0;
}

/* 技能条创新设计 */
.skills-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 40px;
}

.skill-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.15) 0%,
	rgba(0, 212, 255, 0.1) 100%);
	border-radius: 20px;
	padding: 30px;
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(10px);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.skill-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #7b68ee, #00d4ff);
	border-radius: 4px 4px 0 0;
}

.skill-card:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow:
			0 25px 50px rgba(123, 104, 238, 0.2),
			0 0 100px rgba(0, 212, 255, 0.1);
	border-color: rgba(123, 104, 238, 0.5);
}

.skill-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.skill-header h3 {
	font-size: 20px;
	color: #ffffff;
	font-weight: 700;
	margin: 0;
}

.skill-percent {
	font-size: 28px;
	font-weight: 800;
	color: #00d4ff;
	text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.skill-progress-wrapper {
	background: rgba(10, 10, 26, 0.4);
	border-radius: 15px;
	padding: 5px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.skill-progress {
	height: 20px;
	border-radius: 12px;
	background: linear-gradient(90deg,
	#7b68ee 0%,
	#00d4ff 50%,
	#7b68ee 100%);
	background-size: 200% 100%;
	animation: progressGlow 2s ease-in-out infinite;
	position: relative;
	overflow: hidden;
}

.skill-progress::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg,
	transparent 0%,
	rgba(255, 255, 255, 0.2) 50%,
	transparent 100%);
	animation: shimmer 3s infinite;
}

@keyframes progressGlow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.8; }
}

@keyframes shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* 2. 课程亮点部分 - 时间轴设计 */
.overview-section {
	position: relative;
	padding: 100px 0;
}

.timeline-container {
	position: relative;
	max-width: 1000px;
	margin: 60px auto 0;
}

.timeline-container::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(to bottom,
	#7b68ee,
	#00d4ff,
	#7b68ee);
	transform: translateX(-50%);
	border-radius: 2px;
	box-shadow: 0 0 20px rgba(123, 104, 238, 0.5);
}

.timeline-item {
	position: relative;
	width: calc(50% - 60px);
	/*margin-bottom: 50px;*/
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s ease;
}

.timeline-item.show {
	opacity: 1;
	transform: translateY(0);
}

.timeline-item:nth-child(odd) {
	left: 0;
	text-align: right;
	padding-right: 80px;
}

.timeline-item:nth-child(even) {
	left: calc(50% + 60px);
	padding-left: 80px;
}

.timeline-dot {
	position: absolute;
	width: 30px;
	height: 30px;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-radius: 50%;
	top: 20px;
	right: -68px;
	z-index: 2;
	box-shadow:
			0 0 20px rgba(123, 104, 238, 0.8),
			0 0 40px rgba(0, 212, 255, 0.4);
	border: 4px solid #0a0a1a;
}

.timeline-item:nth-child(even) .timeline-dot {
	left: -68px;
	right: auto;
}

.timeline-content {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 20px;
	padding: 30px;
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(15px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
	transition: all 0.4s ease;
}

.timeline-content:hover {
	transform: translateY(-10px);
	border-color: rgba(123, 104, 238, 0.5);
	box-shadow:
			0 25px 50px rgba(123, 104, 238, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.timeline-content h4 {
	font-size: 22px;
	color: #ffffff;
	margin-bottom: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 12px;
}

.timeline-content h4 i {
	color: #00d4ff;
	font-size: 24px;
}

.timeline-content p {
	color: #b0b0d0;
	line-height: 1.7;
	margin: 0;
}

/* 3. 应用领域部分 - 现代卡片切换 */
.tab-section {
	position: relative;
	padding: 100px 0;
	background: rgba(10, 10, 26, 0.5);
}

.tab-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg,
	transparent,
	rgba(123, 104, 238, 0.5),
	transparent);
}

.tab-container {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 40px;
	max-width: 1200px;
	margin: 40px auto 0;
}

.tab-navigation {
	position: sticky;
	top: 120px;
	height: fit-content;
}

.tab-nav-item {
	background: rgba(16, 18, 40, 0.8);
	padding: 20px 25px;
	margin-bottom: 15px;
	border-radius: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.2);
	position: relative;
	overflow: hidden;
}

.tab-nav-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg,
	rgba(123, 104, 238, 0.3),
	rgba(0, 212, 255, 0.2));
	transition: width 0.3s ease;
	z-index: 0;
}

.tab-nav-item:hover::before {
	width: 100%;
}

.tab-nav-item:hover {
	transform: translateX(10px);
	border-color: rgba(123, 104, 238, 0.4);
}

.tab-nav-item.active {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.3),
	rgba(0, 212, 255, 0.2));
	border-color: rgba(123, 104, 238, 0.5);
	transform: translateX(10px);
}

.tab-nav-item.active::before {
	width: 100%;
}

.tab-nav-item span {
	position: relative;
	z-index: 1;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 12px;
}

.tab-nav-item i {
	color: #7b68ee;
	font-size: 18px;
	transition: all 0.3s ease;
}

.tab-nav-item.active i {
	color: #00d4ff;
	transform: scale(1.2);
}

.tab-content-area {
	position: relative;
}

.tab-content {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 25px;
	padding: 50px;
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(20px);
	box-shadow:
			0 20px 50px rgba(0, 0, 0, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
	min-height: 600px;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s ease;
}

.tab-content.active {
	opacity: 1;
	transform: translateY(0);
}

.tab-content h3 {
	font-size: 36px;
	color: #ffffff;
	margin-bottom: 25px;
	font-weight: 800;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.tab-content .description {
	font-size: 18px;
	line-height: 1.8;
	color: #d0d0ff;
	margin-bottom: 40px;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(123, 104, 238, 0.3);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 25px;
	margin-top: 40px;
}

.feature-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.1) 0%,
	rgba(0, 212, 255, 0.05) 100%);
	border-radius: 20px;
	padding: 30px;
	border: 1px solid rgba(123, 104, 238, 0.2);
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.feature-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,
	transparent 0%,
	rgba(255, 255, 255, 0.03) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.feature-card:hover {
	transform: translateY(-10px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow:
			0 20px 40px rgba(123, 104, 238, 0.2),
			0 0 50px rgba(0, 212, 255, 0.1);
}

.feature-card:hover::before {
	opacity: 1;
}

.feature-card i {
	font-size: 40px;
	color: #00d4ff;
	margin-bottom: 20px;
	display: block;
}

.feature-card h4 {
	font-size: 20px;
	color: #ffffff;
	margin-bottom: 15px;
	font-weight: 700;
}

.feature-card p {
	color: #b0b0d0;
	line-height: 1.6;
	margin: 0;
	font-size: 15px;
}

/* 响应式设计 */
@media (max-width: 991px) {
	.about-content {
		padding: 40px 30px;
	}

	.about-content h2 {
		font-size: 36px;
	}

	.skills-container {
		grid-template-columns: 1fr;
	}

	.timeline-container::before {
		left: 30px;
	}

	.timeline-item {
		width: calc(100% - 60px);
		left: 0 !important;
		text-align: left !important;
		padding-left: 80px !important;
		padding-right: 0 !important;
	}

	.timeline-dot {
		left: 16px !important;
		right: auto !important;
	}

	.tab-container {
		grid-template-columns: 1fr;
	}

	.tab-navigation {
		position: static;
		display: flex;
		overflow-x: auto;
		gap: 10px;
		padding-bottom: 10px;
	}

	.tab-nav-item {
		min-width: 180px;
		margin-bottom: 0;
		text-align: center;
	}

	.tab-content {
		padding: 40px 30px;
	}

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

@media (max-width: 767px) {
	.about-content {
		padding: 30px 20px;
	}

	.about-content h2 {
		font-size: 32px;
	}

	.about-content > p {
		font-size: 18px;
		padding: 15px;
	}

	.skill-card {
		padding: 25px;
	}

	.timeline-item {
		width: calc(100% - 40px);
		padding-left: 60px !important;
	}

	.timeline-dot {
		left: 11px !important;
		width: 25px;
		height: 25px;
	}

	.timeline-content {
		padding: 25px;
	}

	.tab-content h3 {
		font-size: 28px;
	}

	.feature-card {
		padding: 25px;
	}
}

@media (max-width: 480px) {
	.about-content h2 {
		font-size: 28px;
	}

	.skill-header h3 {
		font-size: 18px;
	}

	.skill-percent {
		font-size: 24px;
	}

	.timeline-content h4 {
		font-size: 20px;
	}

	.tab-content {
		padding: 30px 20px;
	}

	.tab-content h3 {
		font-size: 24px;
	}

	.feature-card h4 {
		font-size: 18px;
	}
}

/* 动画效果 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-on-scroll {
	animation: fadeInUp 0.8s ease forwards;
}









/**************************************
 ** 优化调整 - 字体大小协调、布局紧凑、Tabs体验优化
 **************************************/

/* 1. 课程介绍部分字体调整 - 更加协调 */
.about-content h2 {
	font-size: 42px; /* 从48px调小 */
	font-weight: 800;
	line-height: 1.2;
	margin: 15px 0 25px 0; /* 减少上下边距 */
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.about-content > p {
	font-size: 18px; /* 从20px调小 */
	line-height: 1.7;
	color: #d0d0ff;
	margin-bottom: 30px; /* 减少下边距 */
	padding-left: 20px;
	border-left: 3px solid #7b68ee;
	background: rgba(123, 104, 238, 0.05);
	padding: 18px 22px;
	border-radius: 0 12px 12px 0;
}

.about-content h6 {
	color: #00d4ff;
	font-size: 15px; /* 从16px调小 */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 15px;
	display: inline-block;
	padding: 6px 18px;
	background: rgba(0, 212, 255, 0.1);
	border-radius: 50px;
	border: 1px solid rgba(0, 212, 255, 0.3);
}

.skill-header h3 {
	font-size: 18px; /* 从20px调小 */
	color: #ffffff;
	font-weight: 600; /* 从700调小 */
	margin: 0;
}

.skill-percent {
	font-size: 24px; /* 从28px调小 */
	font-weight: 700; /* 从800调小 */
	color: #00d4ff;
	text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

/* 2. 课程亮点部分 - 紧凑布局 */
.overview-section {
	position: relative;
	padding: 80px 0; /* 从100px减少 */
}

.timeline-container {
	position: relative;
	max-width: 1000px;
	margin: 40px auto 0; /* 从60px减少 */
}

.timeline-item {
	position: relative;
	width: calc(50% - 50px); /* 从60px减少，更紧凑 */
	margin-bottom: -10px; /* 从80px减少 */
}

.timeline-item:nth-child(odd) {
	left: 0;
	text-align: right;
	padding-right: 60px; /* 从80px减少 */
}

.timeline-item:nth-child(even) {
	left: calc(50% + 50px); /* 从60px调整 */
	padding-left: 60px; /* 从80px减少 */
}

.timeline-dot {
	position: absolute;
	width: 24px; /* 从30px减小 */
	height: 24px;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-radius: 50%;
	top: 15px; /* 从20px上移 */
	right: -47px; /* 从68px调整 */
	z-index: 2;
	box-shadow:
			0 0 15px rgba(123, 104, 238, 0.7),
			0 0 30px rgba(0, 212, 255, 0.3);
	border: 3px solid #0a0a1a; /* 从4px减小 */
}

.timeline-item:nth-child(even) .timeline-dot {
	left: -47px; /* 从68px调整 */
	right: auto;
}

.timeline-content {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 16px; /* 从20px减小 */
	padding: 25px; /* 从30px减少 */
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(12px); /* 从15px减小 */
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); /* 从15px/35px调整 */
}

.timeline-content:hover {
	transform: translateY(-8px); /* 从10px减小 */
	border-color: rgba(123, 104, 238, 0.5);
	box-shadow:
			0 20px 40px rgba(123, 104, 238, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.timeline-content h4 {
	font-size: 20px; /* 从22px减小 */
	color: #ffffff;
	margin-bottom: 12px; /* 从15px减少 */
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
}

.timeline-content h4 i {
	color: #00d4ff;
	font-size: 20px; /* 从24px减小 */
}

.timeline-content p {
	color: #b0b0d0;
	line-height: 1.6; /* 从1.7减小 */
	margin: 0;
	font-size: 15px; /* 从16px减小 */
}

/* 3. 应用领域部分 - Tabs体验优化 */
.tab-section {
	position: relative;
	padding: 80px 0; /* 从100px减少 */
}

.tab-content {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 22px; /* 从25px减小 */
	padding: 40px; /* 从50px减少 */
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(16px); /* 从20px减小 */
	box-shadow:
			0 16px 40px rgba(0, 0, 0, 0.25), /* 从20px/50px减小 */
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
	min-height: 500px; /* 从600px减少 */
	opacity: 0;
	transform: translateY(15px); /* 从20px减小 */
	transition: all 0.4s ease;
	position: relative;
}

/* 添加滚动锚点，确保切换时内容在顶部 */
.tab-content.active {
	opacity: 1;
	transform: translateY(0);
	animation: fadeInUp 0.4s ease;
}

.tab-content h3 {
	font-size: 32px; /* 从36px减小 */
	color: #ffffff;
	margin-bottom: 20px; /* 从25px减少 */
	font-weight: 800;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.tab-content .description {
	font-size: 17px; /* 从18px减小 */
	line-height: 1.7;
	color: #d0d0ff;
	margin-bottom: 30px; /* 从40px减少 */
	padding-bottom: 25px; /* 从30px减少 */
	border-bottom: 1px solid rgba(123, 104, 238, 0.3);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 从300px减小 */
	gap: 20px; /* 从25px减小 */
	margin-top: 30px; /* 从40px减少 */
}

.feature-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.1) 0%,
	rgba(0, 212, 255, 0.05) 100%);
	border-radius: 18px; /* 从20px减小 */
	padding: 25px; /* 从30px减少 */
	border: 1px solid rgba(123, 104, 238, 0.2);
	transition: all 0.3s ease; /* 从0.4s加快 */
	position: relative;
	overflow: hidden;
	min-height: 180px; /* 确保卡片有最小高度 */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.feature-card:hover {
	transform: translateY(-8px); /* 从10px减小 */
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow:
			0 16px 35px rgba(123, 104, 238, 0.2),
			0 0 40px rgba(0, 212, 255, 0.1);
}

.feature-card i {
	font-size: 36px; /* 从40px减小 */
	color: #00d4ff;
	margin-bottom: 15px; /* 从20px减少 */
	display: block;
}

.feature-card h4 {
	font-size: 18px; /* 从20px减小 */
	color: #ffffff;
	margin-bottom: 12px; /* 从15px减少 */
	font-weight: 700;
}

.feature-card p {
	color: #b0b0d0;
	line-height: 1.6;
	margin: 0;
	font-size: 14px; /* 从15px减小 */
	flex-grow: 1;
}

/* 4. 导航标签样式调整 */
.tab-navigation {
	position: sticky;
	top: 120px;
	height: fit-content;
	background: rgba(16, 18, 40, 0.6);
	border-radius: 16px; /* 从15px增加 */
	padding: 15px; /* 从原样式添加 */
	border: 1px solid rgba(123, 104, 238, 0.2);
}

.tab-nav-item {
	background: rgba(26, 26, 58, 0.6);
	padding: 18px 22px; /* 从20px/25px减少 */
	margin-bottom: 10px; /* 从15px减少 */
	border-radius: 12px; /* 从15px减小 */
	cursor: pointer;
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.2);
	position: relative;
	overflow: hidden;
}

.tab-nav-item:last-child {
	margin-bottom: 0;
}

.tab-nav-item:hover {
	transform: translateX(8px); /* 从10px减小 */
	border-color: rgba(123, 104, 238, 0.4);
}

.tab-nav-item.active {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.3),
	rgba(0, 212, 255, 0.2));
	border-color: rgba(123, 104, 238, 0.5);
	transform: translateX(8px); /* 从10px减小 */
}

.tab-nav-item span {
	position: relative;
	z-index: 1;
	color: #ffffff;
	font-size: 15px; /* 从16px减小 */
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}

.tab-nav-item i {
	color: #7b68ee;
	font-size: 16px; /* 从18px减小 */
	transition: all 0.3s ease;
}

/* 5. 添加平滑滚动和焦点管理 */
.tab-content-area {
	position: relative;
	scroll-margin-top: 20px; /* 添加滚动边距 */
}

.tab-content {
	scroll-margin-top: 120px; /* 确保滚动到正确位置 */
}

/* 添加标签切换时的滚动平滑效果 */
.tab-container {
	scroll-behavior: smooth;
}

/* 6. 响应式调整优化 */
@media (max-width: 991px) {
	.about-content h2 {
		font-size: 36px;
	}

	.about-content > p {
		font-size: 16px;
		padding: 15px 18px;
	}

	.timeline-item {
		width: calc(100% - 40px);
		padding-left: 50px !important;
		padding-right: 0 !important;
		/*margin-bottom: 50px;*/
	}

	.timeline-dot {
		left: 13px !important;
		right: auto !important;
		width: 20px;
		height: 20px;
		top: 12px;
	}

	.timeline-content {
		padding: 20px;
	}

	.tab-content {
		padding: 30px;
		min-height: auto;
	}

	.feature-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.feature-card {
		padding: 20px;
		min-height: 160px;
	}

	.feature-card i {
		font-size: 32px;
	}
}

@media (max-width: 767px) {
	.about-content h2 {
		font-size: 32px;
	}

	.about-content h6 {
		font-size: 14px;
		padding: 5px 15px;
	}

	.skill-header h3 {
		font-size: 16px;
	}

	.skill-percent {
		font-size: 22px;
	}

	.timeline-content h4 {
		font-size: 18px;
		gap: 8px;
	}

	.timeline-content p {
		font-size: 14px;
	}

	.tab-content h3 {
		font-size: 28px;
	}

	.tab-content .description {
		font-size: 16px;
	}

	.tab-nav-item span {
		font-size: 14px;
	}

	.tab-nav-item i {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.about-content h2 {
		font-size: 28px;
	}

	.about-content > p {
		font-size: 15px;
		padding: 12px 15px;
		margin-bottom: 25px;
	}

	.skill-card {
		padding: 20px;
	}

	.skill-header h3 {
		font-size: 15px;
	}

	.skill-percent {
		font-size: 20px;
	}

	.timeline-content {
		padding: 18px;
	}

	.timeline-content h4 {
		font-size: 16px;
	}

	.timeline-content h4 i {
		font-size: 18px;
	}

	.tab-content {
		padding: 25px;
	}

	.tab-content h3 {
		font-size: 24px;
	}

	.feature-card h4 {
		font-size: 16px;
	}

	.feature-card p {
		font-size: 15px;
	}
}

/* 7. 添加焦点样式，提高可访问性 */
.tab-nav-item:focus {
	outline: 2px solid #00d4ff;
	outline-offset: 2px;
}

.tab-content:focus-within {
	border-color: #00d4ff;
	box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

/* 8. 添加切换时的动画优化 */
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tab-content.active {
	animation: slideIn 0.4s ease forwards;
}

/* 9. 添加内容区域的粘性导航指示器 */
.tab-container {
	position: relative;
}

.tab-navigation::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	background: linear-gradient(to bottom, #7b68ee, #00d4ff);
	border-radius: 3px;
	transition: height 0.3s ease, top 0.3s ease;
	z-index: 1;
}

/* 10. 优化技能条的紧凑度 */
.skill-card {
	padding: 25px; /* 从30px减少 */
	border-radius: 18px; /* 从20px减小 */
}

.skill-progress-wrapper {
	border-radius: 12px; /* 从15px减小 */
	padding: 4px; /* 从5px减少 */
}

.skill-progress {
	height: 10px; /* 从20px减小 */
	border-radius: 10px; /* 从12px减小 */
}

/* 修改应用领域部分 - 右侧内容区域一行一个 */
.feature-grid {
	display: flex;
	flex-direction: column;
	gap: 15px; /* 减小间距，更加紧凑 */
	margin-top: 25px;
}

.feature-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.1) 0%,
	rgba(0, 212, 255, 0.05) 100%);
	border-radius: 15px;
	padding: 20px 25px;
	border: 1px solid rgba(123, 104, 238, 0.2);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	min-height: auto; /* 移除固定高度 */
	display: flex;
	align-items: center;
	text-align: left;
	width: 100%;
	margin-bottom: 0;
}

.feature-card:hover {
	transform: translateY(-3px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow:
			0 10px 25px rgba(123, 104, 238, 0.15),
			0 0 30px rgba(0, 212, 255, 0.1);
}

.feature-card i {
	font-size: 28px;
	color: #00d4ff;
	margin-right: 20px;
	flex-shrink: 0;
	margin-bottom: 0;
}

.feature-card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.feature-card h4 {
	font-size: 18px;
	color: #ffffff;
	margin-bottom: 8px;
	font-weight: 700;
	line-height: 1.4;
}

.feature-card p {
	color: #b0b0d0;
	line-height: 1.6;
	margin: 0;
	font-size: 14px;
	flex-grow: 0; /* 不占用额外空间 */
}

/* 调整标签内容区域的整体布局 */
.tab-content {
	min-height: 400px; /* 减少最小高度 */
}

/* 响应式调整 */
@media (max-width: 991px) {
	.feature-card {
		padding: 18px 22px;
	}

	.feature-card i {
		font-size: 24px;
		margin-right: 15px;
	}

	.feature-card h4 {
		font-size: 17px;
	}
}

@media (max-width: 767px) {
	.feature-card {
		padding: 16px 20px;
	}

	.feature-card i {
		font-size: 22px;
		margin-right: 12px;
	}

	.feature-card h4 {
		font-size: 16px;
		margin-bottom: 6px;
	}

	.feature-card p {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.feature-card {
		padding: 14px 16px;
		flex-direction: column;
		align-items: flex-start;
	}

	.feature-card i {
		margin-right: 0;
		margin-bottom: 10px;
	}

	.feature-card-content {
		width: 100%;
	}
}

/* 应用领域卡片布局优化 - 紧凑型 */
.feature-grid {
	display: flex;
	flex-direction: column;
	gap: 12px; /* 进一步减小间距 */
	margin-top: 20px;
}

.feature-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.12) 0%,
	rgba(0, 212, 255, 0.06) 100%);
	border-radius: 12px; /* 减小圆角 */
	padding: 16px 20px; /* 减小内边距 */
	border: 1px solid rgba(123, 104, 238, 0.25);
	transition: all 0.25s ease;
	position: relative;
	overflow: hidden;
	min-height: auto;
	height: auto; /* 确保高度自适应内容 */
	display: flex;
	align-items: center;
	text-align: left;
	width: 100%;
	margin-bottom: 0;
	backdrop-filter: blur(8px);
}

.feature-card:hover {
	transform: translateY(-3px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow:
			0 8px 20px rgba(123, 104, 238, 0.15),
			0 0 25px rgba(0, 212, 255, 0.08);
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.18) 0%,
	rgba(0, 212, 255, 0.09) 100%);
}

/* 左侧对号图标 */
.feature-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-radius: 10px; /* 稍微减小圆角 */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 18px; /* 减小右边距 */
	box-shadow: 0 4px 12px rgba(123, 104, 238, 0.25);
}

.feature-icon i {
	font-size: 18px; /* 减小图标大小 */
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 右侧内容区域 */
.feature-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 50px; /* 设置最小高度 */
}

.feature-title {
	font-size: 20px; /* 减小标题字体 */
	color: #ffffff;
	margin-bottom: 4px; /* 减小与描述的间距 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.2px;
}

.feature-desc {
	color: #b0b0d0;
	line-height: 1.5;
	margin: 0;
	font-size: 15px; /* 减小描述字体 */
	font-weight: 400;
	opacity: 0.9;
}

/* 调整整体内容区域，确保卡片紧凑 */
.tab-content {
	min-height: 350px; /* 进一步减小最小高度 */
}

/* 响应式调整 */
@media (max-width: 991px) {
	.feature-card {
		padding: 14px 18px;
	}

	.feature-icon {
		width: 34px;
		height: 34px;
		margin-right: 16px;
		border-radius: 9px;
	}

	.feature-icon i {
		font-size: 17px;
	}

	.feature-title {
		font-size: 18px;
	}

	.feature-desc {
		font-size: 12.5px;
	}
}

@media (max-width: 767px) {
	.feature-grid {
		gap: 10px;
	}

	.feature-card {
		padding: 12px 16px;
		border-radius: 10px;
	}

	.feature-icon {
		width: 32px;
		height: 32px;
		margin-right: 14px;
		border-radius: 8px;
	}

	.feature-icon i {
		font-size: 16px;
	}

	.feature-title {
		font-size: 16px;
		margin-bottom: 3px;
	}

	.feature-desc {
		font-size: 12px;
		line-height: 1.4;
	}
}

@media (max-width: 480px) {
	.feature-card {
		padding: 10px 14px;
	}

	.feature-icon {
		width: 30px;
		height: 30px;
		margin-right: 12px;
		border-radius: 7px;
	}

	.feature-icon i {
		font-size: 15px;
	}

	.feature-title {
		font-size: 14px;
	}

	.feature-desc {
		font-size: 11.5px;
	}
}

/* 为不同标签页的卡片添加微妙的背景区别 */
.tab-content:nth-child(1) .feature-icon { background: linear-gradient(135deg, #7b68ee, #4a3c99); }
.tab-content:nth-child(2) .feature-icon { background: linear-gradient(135deg, #00d4ff, #0099ff); }
.tab-content:nth-child(3) .feature-icon { background: linear-gradient(135deg, #ff6b9d, #ff8e53); }
.tab-content:nth-child(4) .feature-icon { background: linear-gradient(135deg, #a855f7, #ec4899); }

/* 添加卡片之间的分割线效果 */
.feature-card:not(:last-child)::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50px;
	right: 20px;
	height: 1px;
	background: linear-gradient(90deg,
	transparent,
	rgba(123, 104, 238, 0.1),
	transparent);
}


/**************************************
 ** 优化：应用领域卡片样式 - 修复内容混乱
 **************************************/

/* 清除冲突的样式定义 */
.feature-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

/* 统一的卡片样式 - 修复内容混乱 */
.feature-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.12) 0%,
	rgba(0, 212, 255, 0.06) 100%);
	border-radius: 12px;
	padding: 16px 20px;
	border: 1px solid rgba(123, 104, 238, 0.25);
	transition: all 0.25s ease;
	position: relative;
	overflow: hidden;
	min-height: auto;
	display: flex;
	align-items: center;
	text-align: left;
	width: 100%;
	margin-bottom: 0;
	backdrop-filter: blur(8px);
	height: auto !important; /* 确保高度自适应 */
}

.feature-card:hover {
	transform: translateY(-3px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow: 0 8px 20px rgba(123, 104, 238, 0.15),
	0 0 25px rgba(0, 212, 255, 0.08);
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.18) 0%,
	rgba(0, 212, 255, 0.09) 100%);
}

/* 图标区域 - 固定大小 */
.feature-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 18px;
	box-shadow: 0 4px 12px rgba(123, 104, 238, 0.25);
}

.feature-icon i {
	font-size: 18px;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	margin: 0 !important; /* 清除所有边距 */
	line-height: 1;
}

/* 内容区域 - 确保正确显示 */
.feature-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 40px; /* 减小最小高度 */
}

.feature-title {
	font-size: 20px;
	color: #ffffff;
	margin-bottom: 4px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.2px;
	display: block !important;
}

.feature-desc {
	color: #b0b0d0;
	line-height: 1.5;
	margin: 0 !important;
	font-size: 15px;
	font-weight: 400;
	opacity: 0.9;
	display: block !important;
}

/* 为不同标签页的卡片添加颜色区别 */
.tab-content:nth-child(1) .feature-icon {
	background: linear-gradient(135deg, #7b68ee, #4a3c99);
}
.tab-content:nth-child(2) .feature-icon {
	background: linear-gradient(135deg, #00d4ff, #0099ff);
}
.tab-content:nth-child(3) .feature-icon {
	background: linear-gradient(135deg, #ff6b9d, #ff8e53);
}
.tab-content:nth-child(4) .feature-icon {
	background: linear-gradient(135deg, #a855f7, #ec4899);
}

/* 添加卡片之间的分割线效果 */
.feature-card:not(:last-child)::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50px;
	right: 20px;
	height: 1px;
	background: linear-gradient(90deg,
	transparent,
	rgba(123, 104, 238, 0.1),
	transparent);
}

/* 确保tab内容区域高度正确 */
.tab-content {
	min-height: 350px;
	display: flex;
	flex-direction: column;
}

/* 确保卡片容器不会溢出 */
.tab-content .feature-grid {
	flex: 1;
	overflow: visible;
}

/* 移除所有可能导致冲突的旧样式 */
.feature-card i[class*="fa-"],
.feature-card i[class*="fas"],
.feature-card i[class*="far"],
.feature-card i[class*="fab"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
}

/* 响应式调整 */
@media (max-width: 991px) {
	.feature-card {
		padding: 14px 18px;
	}

	.feature-icon {
		width: 34px;
		height: 34px;
		margin-right: 16px;
		border-radius: 9px;
	}

	.feature-icon i {
		font-size: 17px;
	}

	.feature-title {
		font-size: 18px;
	}

	.feature-desc {
		font-size: 12.5px;
	}
}

@media (max-width: 767px) {
	.feature-grid {
		gap: 10px;
	}

	.feature-card {
		padding: 12px 16px;
		border-radius: 10px;
	}

	.feature-icon {
		width: 32px;
		height: 32px;
		margin-right: 14px;
		border-radius: 8px;
	}

	.feature-icon i {
		font-size: 16px;
	}

	.feature-title {
		font-size: 16px;
		margin-bottom: 3px;
	}

	.feature-desc {
		font-size: 12px;
		line-height: 1.4;
	}
}

@media (max-width: 480px) {
	.feature-card {
		padding: 10px 14px;
	}

	.feature-icon {
		width: 30px;
		height: 30px;
		margin-right: 12px;
		border-radius: 7px;
	}

	.feature-icon i {
		font-size: 15px;
	}

	.feature-title {
		font-size: 14px;
	}

	.feature-desc {
		font-size: 11.5px;
	}
}

/* 确保卡片内元素垂直居中 */
.feature-card {
	align-items: flex-start; /* 改为顶部对齐，防止文本被拉伸 */
}

.feature-content {
	padding-top: 2px; /* 稍微向下偏移，使文本与图标顶部对齐 */
}

/* 清除可能干扰的浮动样式 */
.feature-card::before,
.feature-card::after {
	content: none;
}

.feature-icon::before,
.feature-icon::after {
	content: none;
}


/**************************************
 ** 案例展示模块样式
 **************************************/
.cases-section {
	position: relative;
	background: linear-gradient(135deg, rgba(10, 10, 26, 0.9) 0%, rgba(26, 26, 58, 0.9) 100%);
}

.cases-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(123, 104, 238, 0.5), transparent);
}

.cases-container {
	margin-top: 30px;
}

.case-card {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 20px;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid rgba(123, 104, 238, 0.2);
	backdrop-filter: blur(10px);
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.case-card:hover {
	transform: translateY(-10px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow: 0 20px 40px rgba(123, 104, 238, 0.3);
}

.case-header {
	padding: 20px 20px 0;
}

.author-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.author-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(123, 104, 238, 0.3);
}

.author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 20px;
	font-weight: bold;
}

.author-details {
	flex: 1;
}

.author-name {
	font-size: 18px;
	color: #ffffff;
	margin: 0 0 4px 0;
	font-weight: 600;
}

.author-title {
	font-size: 14px;
	color: #00d4ff;
	background: rgba(0, 212, 255, 0.1);
	padding: 3px 10px;
	border-radius: 12px;
	border: 1px solid rgba(0, 212, 255, 0.2);
}

.case-thumbnail {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	margin: 20px 0;
}

.case-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.case-card:hover .case-thumbnail img {
	transform: scale(1.05);
}

.thumbnail-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(123, 104, 238, 0.1), rgba(0, 212, 255, 0.1));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
}

.thumbnail-placeholder i {
	font-size: 48px;
	margin-bottom: 10px;
}

.thumbnail-placeholder span {
	font-size: 14px;
}

.case-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.case-card:hover .case-overlay {
	opacity: 1;
}

.case-link {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 20px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.case-link:hover {
	transform: scale(1.1);
	box-shadow: 0 0 20px rgba(123, 104, 238, 0.5);
}

.case-content {
	padding: 0 20px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.case-title {
	font-size: 22px;
	color: #ffffff;
	margin: 0 0 12px 0;
	font-weight: 700;
	line-height: 1.3;
}

.case-description {
	color: #b0b0d0;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 20px;
	flex: 1;
}

.case-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(123, 104, 238, 0.1);
	color: #7b68ee;
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.3);
	gap: 8px;
}

.case-btn:hover {
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	color: white;
	border-color: transparent;
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(123, 104, 238, 0.3);
}

/* 响应式设计 */
@media (max-width: 991px) {
	.case-thumbnail {
		height: 180px;
	}

	.case-title {
		font-size: 20px;
	}

	.case-description {
		font-size: 14px;
	}
}

@media (max-width: 767px) {
	.case-card {
		margin-bottom: 30px;
	}

	.case-thumbnail {
		height: 200px;
	}

	.author-avatar {
		width: 45px;
		height: 45px;
	}

	.author-name {
		font-size: 16px;
	}
}

@media (max-width: 576px) {
	.cases-container .col-md-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.case-card {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
}