html, body {
  overflow-x: hidden;
}

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
}
/* Animation */
@keyframes bounceFadeIn {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    60% {
      transform: translateY(-5px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-bounce-fade {
    animation: bounceFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @keyframes highlight-fade {
    0% {
      background-size: 0% 100%;
    }
    100% {
      background-size: 100% 100%;
    }
  }

  .highlight-animated {
    background-image: linear-gradient(120deg, #facc15 0%, #f59e0b 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    animation: highlight-fade 1s ease-out forwards;
    animation-delay: 0.5s;
  }


/* style.css */

/* Mission Items Container (Desktop) */
@media (min-width: 1050px) {
  .mission-items-container {
    max-height: 600px;
    overflow-y: auto;
    padding: 0 16px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    position: relative;
    transition: scroll-top 0.3s ease;
  }

  .mission-items-container::-webkit-scrollbar {
    width: 8px;
  }

  .mission-items-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  .mission-items-container::-webkit-scrollbar-thumb {
    background: #0d9488; /* teal-600 */
    border-radius: 4px;
  }

  .mission-items-container::-webkit-scrollbar-thumb:hover {
    background: #047857; /* teal-700 */
    /* background: #065f46; teal-800 */
  }

  .mission-item:not(.active) {
    transform: scale(0.95);
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
  }

  .mission-item.active {
    transform: scale(1.05);
    opacity: 1;
    border-color: #10b981;
    border-width: 1.5px;
  }


}

/* Mobile: No container scrolling */
@media (max-width: 1049px) {
  .mission-items-container {
    max-height: none;
    overflow-y: visible;
    padding: 0;
  }
}

/* Smooth transitions for card opening (mobile and desktop) */
.mission-description {
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out; /* Increased duration, added easing */
}

.mission-item svg {
  transition: transform 0.4s ease-in-out; /* Smoother arrow rotation */
}

/* Scroll margin for nav link */
#mission {
  scroll-margin-top: 64px;
}