/* styles.css */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .bg-gradient-blue {
        background: linear-gradient(135deg, #165DFF 0%, #36CBCB 100%);
    }
    .hover-scale {
        transition: transform 0.3s ease;
    }
    .hover-scale:hover {
        transform: scale(1.02);
    }
    .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* 其他全局样式 */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

nav {
    transition: all 0.3s ease;
}

.counter {
    transition: all 2s ease;
}

/* ===================================以下是关于我们页面的主要css代码============================================================== */

/* 配置Tailwind自定义颜色和字体 */
:root {
  --primary: #165DFF;
  --secondary: #0E2F56;
  --accent: #36CFC9;
  --neutral: #F5F7FA;
  --dark: #1D2129;
}

/* 自定义工具类 */
.content-auto {
  content-visibility: auto;
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.transition-transform-opacity {
  transition-property: transform, opacity;
}

.scale-up-center {
  transform: scale(1.05);
}

.section-padding {
  padding: clamp(3rem, 8vw, 6rem) 0;
}

/* 基础动画定义 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

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

.animate-pulse-slow {
  animation: pulse 3s infinite;
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 导航栏滚动效果 */
.navbar-fixed {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur-sm;
}

/* 确保服务卡片高度一致 */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 悬浮效果 */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}