/* =====================
   BANNER SECTION
===================== */
.banner-section {
  position: relative;
  background-image: url('../../images/banner-background.jpg'); /* adjust path */
  background-size: cover;      
  background-position: center; 
  background-repeat: no-repeat;
  background-attachment: fixed; /* parallax effect */
  color: #fff;                 
  padding: 120px 20px;         
  text-align: center;
  font-family: "Century Gothic", Arial, sans-serif; /* apply font */
}

/* Overlay for readability */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}

/* Inner content above overlay */
.banner-inner {
  position: relative;
  z-index: 2;                  
  max-width: 1200px;
  margin: 0 auto;
}

/* Heading */
.banner-inner h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  animation: fadeInUp 1s ease forwards; /* fade-in animation */
  font-family: inherit;
}

/* Paragraph */
.banner-inner p {
  font-size: 1.2rem;
  margin-bottom: 40px;
  animation: fadeInUp 1s ease 0.3s forwards; /* fade-in with delay */
  font-family: inherit;
}

/* Banner features container */
.banner-features {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Individual feature */
.banner-features .feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  opacity: 0; /* start hidden for animation */
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
  font-family: inherit;
}

/* Stagger feature animations */
.banner-features .feature:nth-child(1) { animation-delay: 0.6s; }
.banner-features .feature:nth-child(2) { animation-delay: 0.8s; }
.banner-features .feature:nth-child(3) { animation-delay: 1s; }

/* Feature links */
.banner-features .feature a {
  color: #fff;           /* white text */
  text-decoration: none; /* remove underline */
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: color 0.3s, transform 0.3s;
  font-family: inherit;
}

/* Feature images */
.banner-features .feature img {
  height: 60px;
  margin-bottom: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Image hover: slight scale + shadow */
.banner-features .feature img:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Feature text hover effect */
.banner-features .feature:hover span {
  color: #b2975a;          /* gold accent */
  transform: translateY(-3px);
}

/* Banner button */
.banner-button {
  background-color: #b2975a; 
  color: #fff;
  padding: 15px 40px;
  border: none;
  border-radius: 5px;
  font-size: 1.2rem;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease 1.2s forwards;
  transition: background 0.3s;
  font-family: inherit;
  font-weight: bold; /* makes text bold */
}

.banner-button:hover {
  background-color: #8c6e3e;
}

/* =====================
   RESPONSIVE STYLING
===================== */

/* Tablet screens */
@media (max-width: 1024px) {
  .banner-inner h1 {
    font-size: 2rem;
  }

  .banner-inner p {
    font-size: 1rem;
  }

  .banner-features .feature img {
    height: 50px;
  }

  .banner-button {
    padding: 10px 20px;
    font-size: 1rem;
  }
}

/* Mobile screens */
@media (max-width: 768px) {
  .banner-inner h1 {
    font-size: 1.5rem;
  }

  .banner-inner p {
    font-size: 0.95rem;
  }

  .banner-features {
    flex-direction: column;
    gap: 20px;
  }

  .banner-features .feature img {
    height: 45px;
  }

  .banner-button {
    width: 100%;
    box-sizing: border-box;
  }
}

/* =====================
   ANIMATIONS
===================== */

/* Fade-in from bottom */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}