@import "base.css";
.service-range {
  margin: 0 auto;
  margin-top: 60px;
}
.service-range.oneModel {
  margin-top: 20px !important;
}
/* 核心技术板块容器：居中 + 最大宽度限制 */
.tech-section {
  /* max-width: 1200px;
  margin: 0 auto; */
  padding: 20px;
}

/* 单个技术块：PC 端 Flex 分栏 */
.tech-block {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  gap: 30px;
}

/* 反向排列的技术块（核心技术二） */
.tech-block--reverse {
  flex-direction: row-reverse;
}

/* 技术块内容区：占比自适应 */
.tech-block__content {
  flex: 2.5;
}

/* 技术标签：绿色小标签 */
.tech-tag {
  display: inline-block;
  background-color: rgba(115, 155, 45,0.1);
  color: var(--primary);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--text-modelfive-size);
  margin-bottom: 10px;
}

/* 技术标题：突出显示 */
.tech-title {
  font-size: var(--text-modeltree-size);
  margin-bottom: 15px;
  color: var(--text);
  font-weight: 600;
}

/* 技术描述：辅助说明 */
.tech-desc {
  font-size: var(--text-modelfive-size);
color: var(--text);
  margin-bottom: 20px;
}

/* 技术特性列表：无默认列表样式 */
.tech-features {
  list-style: none;
  margin-bottom: 20px;
}

/* 单个技术特性项：带勾选图标 */
.tech-feature {
  padding-left: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--text-modelfive-size);
  margin-bottom: 10px;
color: var(--text);
  position: relative;
}
.tech-feature::before {
  position: absolute;
  left: 0;
  top: 10%;
  content: "";
  display: flex;
  width: 30px;
  height: 30px;
  background-image: url("../assets/images/solution/solution1.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.tech-feature span {
  font-size: var(--text-modelfour-size);
color: var(--text);
  font-weight: 600;
}
/* 特性项的勾选图标：与文字间距 */
.tech-feature__icon {
  margin-right: 8px;
  margin-top: 2px;
}

/* 应用范围/技术优势卡片：浅绿背景 + 边框 */
.tech-scope {
  background-color: #f8faf7;
  border-left: 3px solid var(--primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 15px;
}

/* 应用范围/技术优势标题：绿色强调 */
.tech-scope__title {
  font-size: var(--text-modelfour-size);
  color:var(--primary);
  margin-bottom: 8px;
}

/* 应用范围/技术优势描述：灰色文字 */
.tech-scope__desc {
  font-size: var(--text-modelfive-size);
color: var(--text);
}

/* 技术块图片占位：灰色块 + 圆角 */
.tech-block__image {
  flex: 2;
  background-color: #ccc;
  min-height: 300px;
  border-radius: 6px;
}
.tech-block__image img{
width: 100%;
}

/* 移动端适配（屏幕 < 768px 时） */
@media (max-width: 768px) {
  /* 技术块改为纵向堆叠 */
  .tech-block,
  .tech-block--reverse {
    flex-direction: column;
  }

  /* 缩小图片占位高度 + 与内容区间距 */
  .tech-block__image {
    min-height: 200px;
    margin-top: 20px;
  }

  /* 缩小标题字体，适配小屏幕 */
  .tech-title {
    font-size: var(--text-modeltwo-size);
  }
}
/*=============================按钮组件  */
.tech-buttons {
  display: flex;
  justify-content: center;
  gap: 20px; /* 按钮之间的间距 */
  padding: 20px;
  flex-wrap: wrap; /* 移动端自动换行 */
}

/* 按钮基础样式 */
.tech-btn {
  padding: 10px 30px;
  border: 2px solid #6daf48; /* 绿色边框 */
  border-radius: 50px; /* 椭圆圆角 */
  background-color: transparent;
color: var(--text);
  font-size: var(--text-modelfour-size);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s; /* 过渡动画 */
}
.tech-btn:hover{
      background-color: var(--primary);
      color:#fff!important;
}
.tech-btn:hover a{
      color:#fff!important;
}
.tech-btn a {
    width: 100%;
    height: 100%;
    color: var(--text);
      font-weight: 600;
}
/* 激活状态样式 */
.tech-btn--active {
  background-color: var(--primary); /* 绿色背景 */
}
.tech-btn--active a {
  color: #fff !important; /* 白色文字 */
}

/* 移动端适配（小屏幕时调整样式） */
@media (max-width: 576px) {
  .tech-buttons {
    gap: 10px; /* 缩小间距 */
  }
  .tech-btn {
    padding: 8px 20px; /* 缩小内边距 */
    font-size: var(--text-modelfive-size); /* 缩小字体 */
  }
}