/* display background color black on navbar scroll 
.navbarScroll.navbarDark {
    background-color: black;
}
*/

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* hero background image */
.slideshow-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: black; /* Prevents white flashes between slides */
}

.bgimage {
  height: 100vh;
  position: relative;
  background-size: cover;
  background-position: center;
  z-index: 1; /* Lower than navbar */
  /* Adjust '15s' to change the total speed of the loop */
  animation: slideshow 60s infinite;
}

@keyframes slideshow {
  /* 0% to 30%: First Image */
  0%, 30% { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/RCCGC.jpeg'); }
  
  /* 33% to 63%: Second Image */
  33%, 63% { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/CSCBC.jpeg'); }
  
  /* 66% to 96%: Third Image */
  66%, 96% { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/HPCC.jpeg'); }
  
  /* 100%: Loop back to start */
  100% { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/RCCGC.jpeg'); }
}

/* text css above hero image*/
.hero_title {
    font-size: 4.5rem;
}
.hero_desc {
    font-size: 2rem;
}

.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

/* spacing on all sections */
/**/ 
#event, #schedule, #campsite, #login, #signup, #profile {
    margin-top: 5rem;
    padding-top: 5rem;
} 

#registation {
    padding-bottom: 5rem;
}

/* about section image css */
.imageAboutPage {
    width: 100%;
}

/* services section css */
.servicesText.card {
    height: 280px;
    cursor: pointer;
  }
.servicesIcon {
    font-size: 36px;
    text-align: center;
    width: 100%;
}
.card-title {
    text-align: center;
}
.card:hover .servicesIcon {
    color: #008000;
}
.servicesText:hover {
    border: 1px solid #008000;
}

/* social media icons styling */
.social-icons {
    font-size: 36px;
    cursor: pointer;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-linkedin:hover, .fa-twitch:hover {
    color: #008000;
}
.fab {
    color: #000000;
}
/* footer styling */
#footer {
    background-color: black;
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
}

/* Example targeting mobile devices */
@media (max-width: 576px) {
  .hero_title {
    font-size: 1.5rem !important; /* Reduce large titles on mobile */
    line-height: 1.2;
  }
   .hero_desc {
    font-size: 1.5rem !important; /* Reduce large titles on mobile */
    line-height: 1.2;
  }
  
  .hero-text {
    padding: 10px; /* Ensure enough space from screen edges */
  }
}

/* registration form css */
.form-step {
    display: none; /* Hide all steps */
}
.form-step.active {
    display: block; /* Only show the active step */
}