@font-face {
	font-family: 'Mulish'; font-style: normal; font-weight: 500; /* Medium weight */
	src: url('/fonts/Mulish-Medium.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}
@font-face {
	font-family: 'Mulish'; font-style: normal; font-weight: 900; /* Black weight */
	src: url('/fonts/Mulish-Black.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}
@font-face {
	font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; /* Regular weight */
	src: url('/fonts/CrimsonPro-Regular.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}
@font-face {
	font-family: 'Crimson Pro'; font-style: normal; font-weight: 600; /* SemiBold weight */
	src: url('/fonts/CrimsonPro-SemiBold.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Banner Styling (Initially at the top of the page) */

#top-banner {
  position: fixed; display: flex;
  top: 0; left: 0; right: 0;
  color: #333; background: #fff;
  padding: 0.625rem 1.25rem; width: 100%; height: 7rem;
  margin-bottom: 2rem;
  text-align: center;
  z-index: 1000;
  transform: translateY(0); transition: transform 0.5s ease-out;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 4px 8px */
}

/* When the banner is hidden (slides up) and leaving the bottom 10px visible */
#top-banner.hidden { transform: translateY(-100%); }

.banner-logo { height: auto; width: 19rem; }
.logo { height: auto; width: 19rem; }
.banner-logo-titles { text-align:center; font-family: 'Mulish', sans-serif; font-size: 0.9rem; color: #ddd; text-decoration: none; }

.banner-social { display: flex; flex-direction: row; gap: 1rem; height: 2rem; width: auto; margin-top: 2rem; margin-left: auto; }

.banner-social-link { width: 2rem; height: 1.7rem; color: #aaaaaa; transition: color 0.25s ease; }
.banner-social-link:hover, .banner-social-link:active { color: #000066; }
.banner-social-link-youtube { width: 2rem; height: 1.3rem; fill: currentColor; }
.banner-social-link-facebook { width: 1.5rem; height: 1.3rem; fill: currentColor; }
.banner-social-link-tiktok { width: 1.3rem; height: 1.3rem; fill: currentColor; }

/* Down arrow positioning for controlling the banner */
#down-arrow { position: fixed;  bottom: -25px; left: 50%; transform: translateX(-50%); display: block; opacity: 1; cursor: pointer; }

/* Styling for the down arrow (64x24 pixel SVG image) */
#down-arrow img { width: 64px; height: 24px; }

/* Hover effect for the arrow */
#down-arrow:hover img { opacity: 0.8; }

/* MENU ***************************************************************************************************/

nav { display: flex; justify-content: space-between; align-items: center; background-color: #fff; margin: 1.5rem 0 0 9rem; }
nav ul { list-style: none; display: flex; padding: 0 0 7px 0; }
nav ul li { margin: 0; padding: 0; width: 100%; box-sizing: border-box; }
nav ul li a { color: white; text-decoration: none; font-size: 18px; display: block; height: 35px; padding: 0 20px 0 20px; line-height: 1.75; font-family: Arial Black; color: #DDDDFF; }

/* Style for the hamburger menu icon */
.menu-icon { display: none; font-size: 28px; color: blueviolet; cursor: pointer; }

#menu li a{ color:#CCCCCC; text-decoration:none; transition:color .25s ease; }

#menu li a:hover,
#menu li a:active{ color:#000066; }

/* Current page */
#menu li a.active{ color:#000066; font-weight:bold; /* optional */ }