section.intro {
  min-height: 100vh;
  margin-top: 0 !important; /* Ensure this overrides other margin-top rules */
  padding: 0 !important; /* Ensure all padding is zero */
  justify-content: center !important; /* Align children to the top */
  /* align-items: center; from template is likely fine for horizontal centering */
}

body.is-preload #wrapper > section.intro > header {
  transform: translateY(0) !important; /* Override the preload push-down */
}

.intro > header > h1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.intro > header > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.intro > header > ul.actions {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.intro > .hero-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  flex-grow: 0 !important;      /* Let header take its natural height */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* Center children vertically */
  align-items: center !important;  /* Center children horizontally */
  padding-right: 2rem !important;
  padding-left: 2rem !important;
  height: 100% !important;  /* Take full height of parent */
}

.intro > .content {
  padding-top: 0 !important;    /* Ensure content div has no top padding */
  margin-top: 0 !important;     /* Ensure content div has no top margin */
  flex-grow: 1 !important;      /* Let content div fill remaining vertical space */
  min-height: 0 !important;     /* Override template's min-height: 30rem */
}

/* Hero Image Pulse Animation */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 5px rgba(0, 173, 239, 0.5), 0 0 10px rgba(0, 173, 239, 0.4), 0 0 15px rgba(0, 173, 239, 0.3), 0 0 20px rgba(0, 173, 239, 0.2);
  }
  50% {
    box-shadow: 0 0 10px rgba(0, 173, 239, 0.7), 0 0 20px rgba(0, 173, 239, 0.6), 0 0 30px rgba(0, 173, 239, 0.4), 0 0 40px rgba(0, 173, 239, 0.3);
  }
  100% {
    box-shadow: 0 0 5px rgba(0, 173, 239, 0.5), 0 0 10px rgba(0, 173, 239, 0.4), 0 0 15px rgba(0, 173, 239, 0.3), 0 0 20px rgba(0, 173, 239, 0.2);
  }
}

/* Logo styles */
.hero-logo-container {
  margin-bottom: 1rem;
  text-align: center;
}

.hero-logo {
  max-width: 180px;
  height: auto;
  margin-bottom: 1rem;
}

/* Styles for the main image within the .intro section's .content */
.intro .content .image.fill img {
  animation: pulse-glow 3s infinite ease-in-out;
  border-radius: 5px; /* Optional: to make the glow look better on image edges */
}

/* Container for hero overlay, needs relative positioning for absolute children */
.intro .content {
	position: relative; /* To position overlay content absolutely within this container */
}

/* Hero Overlay Content Styling */
.hero-overlay-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10; /* Ensure it's above the image */
	text-align: center; /* Center align text */
	color: #ffffff; /* White text for contrast */
	width: 100%; /* Full width */
	max-width: 500px; /* Maximum width */
	padding: 2em; /* Add padding around the content */
}

.hero-overlay-content h2 {
	font-size: 2.8em; /* Larger font size */
	font-weight: 600; /* Semi-bold weight */
	margin-bottom: 0.5em;
	text-transform: none; /* No text transformation */
	letter-spacing: -0.02em; /* Slight negative letter spacing */
	line-height: 1.1; /* Tighter line height */
	color: #fff; /* White text */
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Text shadow for readability */
}

.hero-overlay-content p {
	font-size: 1.1em; /* Slightly larger body text */
	margin-bottom: 2em; /* More space before button */
	line-height: 1.4; /* Comfortable line height */
	color: #ffffff; /* White text */
	max-width: 90%; /* Constrain paragraph width */
	margin-left: auto;
	margin-right: auto;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Text shadow for readability */
}

.hero-overlay-content .button.join-now {
	display:flex;
	align-items: center;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	background-color: #ffffff; /* White background */
	color: #000000; /* Black text */
	border-radius: 2em; /* Fully rounded */
	padding: 0.75em 2em; /* Padding */
	font-size: 0.9em; /* Slightly smaller font */
	font-weight: 600; /* Semi-bold */
	text-transform: none; /* No text transform */
	letter-spacing: 0; /* No letter spacing */
	border: none; /* No border */
	box-shadow: none; /* No shadow */
	text-align: center;
	transition: background-color 0.3s ease; /* Smooth transition */
}

.hero-overlay-content .button.join-now:hover {
	background-color: #f0f0f0; /* Slightly darker on hover */
}

/* Hero GIF Overlay Styling */
.hero-gif-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5; /* Above the base image but below the text overlay */
	pointer-events: none; /* Allow clicks to pass through */
	opacity: 0.6; /* Adjust opacity as needed */
	mix-blend-mode: screen; /* Creates a nice blending effect with the background */
}

.hero-gif-overlay img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ensures the GIF covers the entire container */
}