/* --- GLOBAL STYLES & RESETS --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f0f2f5;
  overflow-x: hidden; /* Prevents horizontal scrollbars */

  /* IMPORTANT: This creates space for the floating header */
  padding-top: 95px;
}

/* --- CONTAINER FOR CONSISTENT WIDTH --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- TYPOGRAPHY --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  color: #FFFFFF;
}

p {
  margin-bottom: 1rem;
  color: #b2b3b4;
}

a {
  color: #91c63c;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #1F51FF;
}

/* --- IMAGES --- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- GLOBAL SCROLL ANIMATION --- */
/* Initial state: hidden */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Final state: visible */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
  body {
    /* Reduce padding on mobile for a bit more space */
    padding-top: 85px;
  }
}