/*  Your Custom CSS Code Goes Here */

 /* Mobile layout optimization for shooting stars */
  @media screen and (max-width: 750px) {
    .stars .star {
      animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
    }
  }
  
  @media (max-width: 768px) {
    .fc .fc-view-harness {
      height: 350px !important;
    }
  }

  .stars {
  pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-45deg);
    z-index: 5; /* Above bg-stars-overlay, below content */
  }

  .star {
    --star-color: #f0e6ff; /* Soft white with purple tint to match nebula */
    --star-tail-length: 5em; /* Smaller for subtlety */
    --star-tail-height: 2px;
    --star-width: calc(var(--star-tail-length) / 6);
    --fall-duration: 8s; /* Slightly faster for dynamic feel */
    --tail-fade-duration: var(--fall-duration);
    position: absolute;
    top: var(--top-offset);
    left: 0;
    width: var(--star-tail-length);
    height: var(--star-tail-height);
    color: var(--star-color);
    background: linear-gradient(45deg, currentColor, transparent);
    border-radius: 50%;
    filter: drop-shadow(0 0 4px currentColor);
    transform: translate3d(104em, 0, 0);
    opacity: 0; /* Initially invisible */
    animation: fall var(--fall-duration) var(--fall-delay) linear infinite,
      tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
  }

  /* Randomized properties for each star */
  .star:nth-child(1) { --star-tail-length: 5.2em; --top-offset: 20vh; --fall-duration: 7s; --fall-delay: 0.5s; }
  .star:nth-child(2) { --star-tail-length: 4.8em; --top-offset: 30vh; --fall-duration: 8.5s; --fall-delay: 1s; }
  .star:nth-child(3) { --star-tail-length: 5.5em; --top-offset: 40vh; --fall-duration: 6.5s; --fall-delay: 1.5s; }
  .star:nth-child(4) { --star-tail-length: 5.0em; --top-offset: 50vh; --fall-duration: 8s; --fall-delay: 2s; }
  .star:nth-child(5) { --star-tail-length: 5.3em; --top-offset: 60vh; --fall-duration: 7.5s; --fall-delay: 2.5s; }
  .star:nth-child(6) { --star-tail-length: 4.9em; --top-offset: 70vh; --fall-duration: 8.2s; --fall-delay: 3s; }
  .star:nth-child(7) { --star-tail-length: 5.1em; --top-offset: 80vh; --fall-duration: 7.8s; --fall-delay: 3.5s; }
  .star:nth-child(8) { --star-tail-length: 5.4em; --top-offset: 90vh; --fall-duration: 8.1s; --fall-delay: 4s; }
  .star:nth-child(9) { --star-tail-length: 5.0em; --top-offset: 25vh; --fall-duration: 7.2s; --fall-delay: 4.5s; }
  .star:nth-child(10) { --star-tail-length: 4.7em; --top-offset: 35vh; --fall-duration: 8.3s; --fall-delay: 5s; }
  .star:nth-child(11) { --star-tail-length: 5.2em; --top-offset: 45vh; --fall-duration: 7.7s; --fall-delay: 5.5s; }
  .star:nth-child(12) { --star-tail-length: 4.8em; --top-offset: 55vh; --fall-duration: 8.4s; --fall-delay: 6s; }
  .star:nth-child(13) { --star-tail-length: 5.3em; --top-offset: 65vh; --fall-duration: 7.4s; --fall-delay: 6.5s; }
  .star:nth-child(14) { --star-tail-length: 4.9em; --top-offset: 75vh; --fall-duration: 8.6s; --fall-delay: 7s; }
  .star:nth-child(15) { --star-tail-length: 5.1em; --top-offset: 85vh; --fall-duration: 7.9s; --fall-delay: 7.5s; }
  .star:nth-child(16) { --star-tail-length: 5.0em; --top-offset: 15vh; --fall-duration: 7.3s; --fall-delay: 8s; }
  .star:nth-child(17) { --star-tail-length: 5.4em; --top-offset: 28vh; --fall-duration: 8.0s; --fall-delay: 8.5s; }
  .star:nth-child(18) { --star-tail-length: 4.8em; --top-offset: 38vh; --fall-duration: 7.6s; --fall-delay: 9s; }
  .star:nth-child(19) { --star-tail-length: 5.2em; --top-offset: 48vh; --fall-duration: 8.2s; --fall-delay: 9.5s; }
  .star:nth-child(20) { --star-tail-length: 5.5em; --top-offset: 58vh; --fall-duration: 7.1s; --fall-delay: 0.2s; }
  .star:nth-child(21) { --star-tail-length: 4.9em; --top-offset: 68vh; --fall-duration: 8.4s; --fall-delay: 0.7s; }
  .star:nth-child(22) { --star-tail-length: 5.3em; --top-offset: 78vh; --fall-duration: 7.5s; --fall-delay: 1.2s; }
  .star:nth-child(23) { --star-tail-length: 5.1em; --top-offset: 88vh; --fall-duration: 8.1s; --fall-delay: 1.7s; }
  .star:nth-child(24) { --star-tail-length: 5.0em; --top-offset: 23vh; --fall-duration: 7.7s; --fall-delay: 2.2s; }
  .star:nth-child(25) { --star-tail-length: 4.8em; --top-offset: 33vh; --fall-duration: 8.3s; --fall-delay: 2.7s; }
  .star:nth-child(26) { --star-tail-length: 5.2em; --top-offset: 43vh; --fall-duration: 7.4s; --fall-delay: 3.2s; }
  .star:nth-child(27) { --star-tail-length: 5.4em; --top-offset: 53vh; --fall-duration: 8.0s; --fall-delay: 3.7s; }
  .star:nth-child(28) { --star-tail-length: 4.9em; --top-offset: 63vh; --fall-duration: 7.6s; --fall-delay: 4.2s; }
  .star:nth-child(29) { --star-tail-length: 5.3em; --top-offset: 73vh; --fall-duration: 8.2s; --fall-delay: 4.7s; }
  .star:nth-child(30) { --star-tail-length: 5.1em; --top-offset: 83vh; --fall-duration: 7.8s; --fall-delay: 5.2s; }

  .star::before,
  .star::after {
    position: absolute;
    content: '';
    top: 0;
    left: calc(var(--star-width) / -2);
    width: var(--star-width);
    height: 100%;
    background: linear-gradient(45deg, transparent, currentColor, transparent);
    border-radius: inherit;
    animation: blink 2s linear infinite;
  }

  .star::before {
    transform: rotate(45deg);
  }

  .star::after {
    transform: rotate(-45deg);
  }

  @keyframes fall {
    0% {
      transform: translate3d(104em, 0, 0);
      opacity: 0;
    }
    20% {
      opacity: 1; /* Fade in during animation */
    }
    80% {
      opacity: 1;
    }
    100% {
      transform: translate3d(-30em, 0, 0);
      opacity: 0; /* Fade out at the end */
    }
  }

  @keyframes tail-fade {
    0%, 20% {
      width: var(--star-tail-length);
      opacity: 0;
    }
    40%, 60% {
      width: var(--star-tail-length);
      opacity: 1;
    }
    80%, 100% {
      width: 0;
      opacity: 0;
    }
  }

  @keyframes blink {
    50% {
      opacity: 0.6;
    }
  }
  
  
  /* Custom animation for the flag */
    @keyframes flagWave {
      0% { transform: rotate(0deg); }
      25% { transform: rotate(-5deg); }
      50% { transform: rotate(0deg); }
      75% { transform: rotate(5deg); }
      100% { transform: rotate(0deg); }
    }
    
    .flag-animation {
      animation: flagWave 3s ease-in-out infinite;
      transform-origin: bottom center;
    }
    
    /* Bounce animation */
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    .bounce-animation {
      animation: bounce 2s ease-in-out infinite;
    }

	/* Blink animation */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.blink-animation {
  animation: blink 2s ease-in-out infinite;
}
.bounce-slow {
        animation: bounce-slow 3s ease-in-out infinite;
      }
@keyframes bounce-slow {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }