:root {
  --deep-blue: #0064D8;
  --bright-teal: #1FB8A6;
  --neutral-gray: #F6F9FC;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bg-brand-blue { background-color: var(--deep-blue); }
.bg-brand-teal { background-color: var(--bright-teal); }
.bg-brand-gray { background-color: var(--neutral-gray); }

.text-brand-blue { color: var(--deep-blue); }
.text-brand-teal { color: var(--bright-teal); }

.border-brand-teal { border-color: var(--bright-teal); }

.nav-link {
  @apply text-gray-600 font-medium hover:text-brand-teal transition-colors relative py-1;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--bright-teal);
  transition: width 0.3s ease-in-out;
}

.nav-link:hover::after {
  width: 100%;
}

.service-card {
  @apply bg-white p-8 rounded-lg shadow-md border-2 border-transparent hover:shadow-xl hover:border-brand-teal transition-all duration-300 flex flex-col items-center text-center;
}

.case-card {
  @apply bg-white p-8 rounded-lg shadow-lg flex flex-col md:flex-row items-center gap-8 overflow-hidden;
}

.case-card:nth-child(even) {
  @apply md:flex-row-reverse;
}

.case-content {
  @apply flex-1;
}

.case-metric {
  @apply bg-brand-teal text-white font-black text-center p-8 rounded-lg flex-shrink-0 flex flex-col justify-center items-center w-full md:w-48 h-48;
}
.case-metric span {
  @apply text-6xl leading-none;
}
.case-metric p {
  @apply text-lg mt-1 font-bold;
}


.form-input {
  @apply w-full px-4 py-3 bg-gray-100 rounded-md border border-gray-200 focus:outline-none focus:ring-2 focus:ring-brand-teal focus:bg-white transition-all;
}