/* 服务板块样式 */
.section-services {
    width: 100%;
    min-height: auto;
    background-color: #000;
    padding: 40px 8vw;
    position: relative; /* 添加相对定位 */
    overflow: hidden; /* 防止背景图溢出 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.services-title {
    font-size: clamp(2rem, 2vw, 3.5rem);
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.1em; /* 增加字间距 */
    text-align: center;
    position: relative;
    padding-bottom: 20px; /* 为下划线留出空间 */
    z-index: 2;
	border-bottom:1px solid #fff
}

.services-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
   /* background: linear-gradient(90deg, rgba(255,215,0,0.8), rgba(255,255,255,0.8));*/ /* 渐变下划线 */
    border-radius: 2px;
}

/* 添加标题悬停效果 */
.services-title:hover::after {
    width: 80px;
    transition: width 0.3s ease;
}

.services-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC端3列 */
    gap: 20px;
    max-width: 1200px; /* 限制最大宽度 */
    margin: 0 auto;
    z-index: 2;
}

.service-item {
  /*  aspect-ratio: 1/1;*/ /* 保持1:1比例 */
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem); /* 增大字体大小 */
    text-align: center;
    /*white-space: nowrap;*/
    /* text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),  /* 右下阴影 */
        -2px -2px 4px rgba(0, 0, 0, 0.8), /* 左上阴影 */
        2px -2px 4px rgba(0, 0, 0, 0.8),  /* 右上阴影 */
        -2px 2px 4px rgba(0, 0, 0, 0.8),  /* 左下阴影 */
        0 0 8px rgba(0, 0, 0, 0.9);       /* 整体阴影 */ */
    font-weight: 600; /* 加粗文字 */
    /*letter-spacing: 0.05em;*/ /* 增加字间距 */
	border: 1px solid #604374;
	/*padding:  0 15px;*/
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.5);
	font-size:24px;
}

/* 添加悬停效果 */
.service-item:hover .service-text {
    transform: translate(-50%, -50%) scale(1.1);
    transition: transform 0.3s ease;
    /* text-shadow: 
        2px 2px 6px rgba(0, 0, 0, 0.9),
        -2px -2px 6px rgba(0, 0, 0, 0.9),
        2px -2px 6px rgba(0, 0, 0, 0.9),
        -2px 2px 6px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(0, 0, 0, 1); */
}

/* 背景图片容器样式 */
.services-bg-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* 防止图片影响交互 */
}

/* 第一个背景图片 */
.services-bg-container.bg1 {
    top: 0;
    left: 0;
    opacity: 1;
}

/* 第二个背景图片 */
.services-bg-container.bg2 {
    bottom: 0;
    right: 0;
    opacity: 1;
}

.services-bg-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    filter: brightness(1.5); /* 增加亮度 */
}

/* 确保内容在背景之上 */
.services-title,
.services-grid {
    position: relative;
    z-index: 2;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
    .services-bg-container {
        opacity: 0.3; /* 移动端降低背景透明度 */
    }
    
    .services-bg-container.bg1 {
        transform: scale(0.8) translateX(-10%);
    }
    
    .services-bg-container.bg2 {
        transform: scale(0.8) translateX(10%);
    }
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .section-services {
        padding: 30px 5vw;
        gap: 30px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 手机端2列 */
        gap: 15px;
    }

    .service-text {
        font-size: clamp(0.8rem, 4vw, 1.4rem); 
		word-wrap:break-word;/* 移动端适配字体大小 */
    }
}

/* 确保在更小的屏幕上文字仍然清晰可见 */
@media screen and (max-width: 480px) {
    .services-grid {
        gap: 10px;
    }
}