/* 马来西亚留学一网通 - 自定义样式 */

/* 字体引入 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* 根变量定义 */
:root {
  /* 主色调 - 低饱和度柔和色调 */
  --primary-blue: #4A6FA5;
  --primary-green: #6B8E6B;
  --primary-yellow: #D4A574;
  --primary-pink: #C48B9F;
  
  /* 辅助色 */
  --light-blue: #E8F2FF;
  --light-green: #F0F7F0;
  --light-yellow: #FDF6E8;
  --light-pink: #FDF2F8;
  
  /* 中性色 */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  
  /* 字体 */
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Poppins', sans-serif;
}

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--gray-700);
  background-color: var(--gray-50);
}

/* 自定义组件样式 */
.gradient-bg {
  background: linear-gradient(135deg, var(--light-blue) 0%, var(--light-green) 100%);
}

.card-hover {
  transition: all 0.3s ease;
}

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

.btn-primary {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-green) 100%);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--primary-yellow) 0%, var(--primary-pink) 100%);
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 导航栏样式 */
.nav-item {
  position: relative;
  transition: all 0.3s ease;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-green));
  transition: width 0.3s ease;
}

.nav-item.active::after,
.nav-item:hover::after {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-item {
    padding: 0.75rem 1rem;
  }
  
  .card-hover:hover {
    transform: none;
  }
}

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

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-blue);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-green);
}