/* style.css */

/* Keyframes for the animation */
@keyframes waving-gradient {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

/* New keyframes for star rotation */
@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

/* Apply the animation to the #index-hero section */
#index-hero {
background: radial-gradient(circle at top center, #002e8b 0%, #000d26 100%); /* Modified gradient */
}


/* Apply rotation to the .rotate-stars class */
.rotate-stars {
  animation: rotate 20s linear infinite; /* Adjust the duration (20s) for speed */
}

/* --- Preloader Styles --- */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--eu-blue-dark); /* Solid background */
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
transition: transform 0.6s ease-out; /* Keep the slide-up */
}

#preloader.hidden {
transform: translateY(-100%);
}

#preloader .preloader-content {
text-align: center; /* Ensure text is centered */
}

#preloader .preloader-content img {
margin-bottom: 1rem; /* Space between stars and text */
}

:root {
  --eu-gold: #FFCC00;
  --eu-blue: #003399;
  --eu-blue-dark: #002266;
  --eu-blue-bright: #3366CC;
}

#header-nav a.active {
  font-weight: bold;
  color: var(--eu-gold);
}

.transition-bg {
  transition: background-color 0.3s ease; /* Smooth transition for background */
}

.border-gradient {
  position: relative;
}

.border-gradient::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
background: linear-gradient(to bottom, #e5e7eb, #e5e7eb 20%, white 40%); /* Added color stops */
padding: 1px;
-webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
        mask-composite: exclude;
}

/* Mobile menu links when header is LIGHT */
#header-nav a {
@apply text-eu-blue-dark;
}

/* Active link style */
#header-nav a.active {
@apply font-bold text-eu-gold;
}

/* Mobile menu links when open */
#header-nav.block a {
@apply text-white;
}

/* Inner Shadow for Header */
#inner-header {
  box-shadow: inset 0px -8px 8px -8px rgba(51, 102, 204, 0.6);
}