/* Base body styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background-color: #fff;
}

/* Header styling */
header {
  background: #111827;
  color: white;
  padding: 1rem;
  text-align: center;
}

/* Logo image */
.logo {
  width: 80px;
  height: auto;
  margin-bottom: 0.5rem;
}

/* Fade-in animation */
.fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards; /* Runs animation once, keeps end state */
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Navigation links */
nav a {
  color: white;
  margin: 0 1rem;
  text-decoration: none;
}

/* Main content padding */
main {
  padding: 2rem;
}

/* Footer styling */
footer {
  background: #f3f4f6;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

/* Slide-in sections base state */
.slide-in {
  transform: translateY(50px); /* Starts slightly lower */
  opacity: 0;
  transition: all 1s ease-out;
}

/* Slide-in once visible */
.slide-in.visible {
  transform: translateY(0); /* Moves to original position */
  opacity: 1;
}