/* Font should always be top*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

/* ══════════════════════════════════════════
   HOME PAGE
══════════════════════════════════════════ */

html {
  scroll-behavior: smooth !important;
}

@media (min-width: 768px) {
	.slogan-button,
	.reg-button{
		margin-left: 100px !important;
	}
	
	.footer-column{
		padding-left: 10vw !important;
		padding-right: 10vw !important;
	}
}

/* mobile config */
@media (max-width: 768px) {
	.slogan-sub,
	.slogan-main{
			margin-left: 0 !important;
			margin-right: 0 !important;
		}
  label#toggle-menu,
  input#toggle {
    display: none !important;
  }
	.custom-logo{
		padding-left: 10px !important;
	}		
	.image-button{	
    margin: 0 auto !important;
	}
	
	/* mega-menu-wrap has default large right padding wtf */
	#mega-menu-wrap-menu-1{
		padding: 10px !important;
	}
	.stat-bar,
	.footer-column{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.sponsor-level{
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
	.BOD-image{
		width: 80% !important;
	}
}


.site-header{
  font-family: 'Montserrat', sans-serif !important;
}


/* Non sticky when mobile */
/*
@media (min-width: 768px){
	.site-header{
  	position: sticky !important;
	}
}
*/

/* ── Make the header/mega menu bar sticky ── */
.site-header{
	position: sticky !important;
  top: 0 !important;
  z-index: 999!important;
  background: #ffffff !important;
}
.site-header{
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10) !important;
	width: 100% !important;
	 max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.custom-logo{
	padding-left: 3vw;
	max-width: none !important; 
}

.mega-menu-wrap{
	padding-right: 10vw !important;
}

/* ── Remove the responsive-max-width constraint on footer ── */
footer#colophon.responsive-max-width,
.site-footer.responsive-max-width {
	padding: 0 auto !important;
  max-width: none !important;
  width: 100% !important;
}

/* ── Also fix the inner widget area ── */
aside.widget-area.responsive-max-width,
.widget-area.responsive-max-width {
  max-width: none !important;
}




.menu-button a {
    background-color: #aad400 !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    text-decoration: none !important;
		padding-left: 18px !important;
	  padding-right: 24px !important;
}


.menu-button a:hover {
    background-color: #0040d4 !important;
		color: #aad400 !important;
}

.slogan-button a:hover,
.reg-button a:hover,
.about-button a:hover,
.explore-button a:hover,
.coach-button a:hover,
.flip-button a:hover,
.sponsor-button a:hover,
.message-button a:hover{
		text-decoration: none !important;
    background-color: #0040d4 !important;
		color: #aad400 !important;
}

.swiper-pagination-bullet-active {
  background-color: #aad400 !important;
}

.flip-cover{
  white-space: nowrap !important;
	padding: 0 !important;
}

.contact-us{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* ══════════════════════════════════════════
   HERO SLOGAN — Staggered Fade Up Animation
══════════════════════════════════════════ */

/* ── Define the fade-up keyframe ── */
@keyframes fadeUpIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Start all three elements invisible ── */
.slogan-main,
.slogan-sub,
.slogan-button {
  opacity: 0; /* hidden before animation starts */
  animation-fill-mode: forwards; /* stays visible after animation ends */
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* smooth ease-out */
  animation-duration: 0.85s;
  animation-name: fadeUpIn;
}

/* ── Stagger the delays — each one starts after the previous ── */
.slogan-main {
  animation-delay: 0.15s;   /* appears first */
}

.slogan-sub {
  animation-delay: 0.30s;  /* appears second */
}

.slogan-button {
  animation-delay: 0.45s;  /* appears last */
}

/* ══════════════════════════════════════════
   VOLUNTEER PAGE
══════════════════════════════════════════ */
.image-button {
  width: fit-content;
  cursor: pointer;
  border-radius: 999px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;  
}

.image-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(107, 153, 0, 0.35); /* #6b9900 */
}

/* ══════════════════════════════════════════
   SPONSORSHIP PAGE
══════════════════════════════════════════ */
.dt-container.dt-empty-footer {
	font-family: 'Open Sans', sans-serif !important;
	padding-left: 10vw !important;
		padding-right: 10vw !important;
  max-width: none !important;
  width: 100% !important;
}