/* Fade in & float up animation */
@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Apply animation to hero text */
.hero-text {
  opacity: 0;
  animation: floatUp 2s ease-out forwards;
  animation-delay: 0.8s; /* text appears after image */
}

/* Optional: if you want the hero image or overlay to animate */
.hero-bg {
  background-image: url('assets/snakologybg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; 
}
 /* Space above and below all article images */
.article-image {
  margin: 20px 0; /* 20px top and bottom */
  display: block; /* ensures margins apply properly */
}

/* Space above and below headings */
.article-heading {
  margin-top: 30px;
  margin-bottom: 15px;
}


.hero-bg {
  background-image: url('assets/anaconda.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* <-- this makes it “stay” */
}

.article-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

/* Adjust the image width so the box has space */
.article-main-image {
  flex: 0 0 50%;   /* FORCE 50% width */
  max-width: 50%;
  height: auto;
}

/* This box will now ALWAYS take the width you set */
.species-info-box {
  flex: 0 0 45%;   /* ← FORCE the width */
  max-width: 45%;
  padding: 40px;
  background-color: #f7f7f7;
  border: 3px solid #b3b3b3;
  border-radius: 4px;
  font-size: 15px;
  line-height: 2;
  box-sizing: border-box; /* ensures padding doesn't break layout */
}

.species-info-box h3 {
  margin-top: 0;
  font-size: 20px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}