html{
    scroll-behavior:smooth; /* Smooth scrolling */
    scroll-padding-top: 100px; /* Space for fixed header */
}
body { 
    font-family: 'Poppins', sans-serif;
    margin: 0;
    height: 100%;
    overflow-x: hidden; /* Allow scrolling vertically, but prevent horizontal overflow */
  } 

  .text-accent { color: #CCFF66; }
  .bg-accent { background-color: #CCFF66; }
  .bg-mint { background-color: #CCFFCC; }
  .text-primary { color: #301B94; }
  .background-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  .background-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 0;
  }
  .floating-img {
    position: absolute;
    width: 60px;
    animation: float 30s linear infinite;
    z-index: 1;
    opacity: 0.8;
  }
  .img1 { top: 10%; left: 5%; animation-delay: 0s; }
  .img2 { top: 50%; left: 80%; animation-delay: 10s; }
  .img3 { top: 30%; left: 20%; animation-delay: 5s; }
  .img4 { top: 70%; left: 10%; animation-delay: 15s; }
  .img5 { top: 15%; left: 60%; animation-delay: 20s; }

  @keyframes float {
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(80px, -40px) rotate(180deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
  }
  .background-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}