.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Landing Page Styles */
.landing-container { font-family: Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.landing-header, .landing-footer { background: #f8f9fb; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; }
.landing-main { flex: 1; padding: 40px; display: flex; flex-direction: column; align-items: center; }
.landing-header .logo { font-weight: bold; font-size: 1.5rem; }
.landing-nav a, .lang-select { margin: 0 10px; text-decoration: none; color: #222; }
.start-btn { background: #2563eb; color: #fff; border: none; padding: 14px 32px; border-radius: 8px; font-size: 1.1rem; margin: 24px 0; cursor: pointer; }
.how-it-works { margin: 40px 0; width: 100%; max-width: 900px; }
.how-it-works h2 {text-align: center; }
.steps { display: flex; justify-content: space-between; }
.step { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px #e5e7eb; padding: 24px; flex: 1; margin: 0 10px; text-align: center; }
.step-number { background: #2563eb; color: #fff; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 1.2rem; }
.download-resources { margin: 40px 0; width: 100%; max-width: 900px; }
.download-resources h2 {text-align: center; }
.resources { display: flex; justify-content: space-between; }
.resource-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px #e5e7eb; padding: 24px; flex: 1; margin: 0 10px; text-align: center; }
.view-all { display: block; margin-top: 16px; text-align: right; color: #2563eb; text-decoration: none; }

/* Chat Page Styles */
.chat-container { min-height: 100vh; display: flex; flex-direction: column; background: #f4f6fa; }
.chat-header { background: #2563eb; color: #fff; padding: 20px; font-size: 1.3rem; text-align: center; }
.chat-messages { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.chat-message { max-width: 60%; padding: 12px 18px; border-radius: 16px; margin-bottom: 8px; }
.chat-message.user { align-self: flex-end; background: #2563eb; color: #fff; }
.chat-message.ai { align-self: flex-start; background: #fff; color: #222; border: 1px solid #e5e7eb; }
.chat-input-area { display: flex; padding: 16px; background: #fff; border-top: 1px solid #e5e7eb; }
.chat-input-area input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #e5e7eb; margin-right: 10px; font-size: 1rem; }
.chat-input-area button { background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 10px 24px; font-size: 1rem; cursor: pointer; }