body {
    font-family: 'Be Vietnam Pro', sans-serif;
    /* background: #1e293b; */
  }

  .nav-text {
    font-family: "DM Serif Display", serif;
  }

  .oswald {
    font-family: "Oswald", serif;
  }

  .glass-card {
    background: rgba(255, 255, 255, 0.87); /* Increased opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3); /* Increased opacity */
    box-shadow: 0 8px 32px 0 rgba(150, 184, 248, 0.37);
  }

  .glass-nav {
    background: rgba(30, 41, 59, 0.7); /* Lighter background */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .hero-section {
    background: linear-gradient(
        to right,
        rgba(30, 41, 59, 0.8),
        rgba(30, 41, 59, 0.6)
      ),
      url('./images/mt-1641-home-header-bg1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
  }

  .mission-vision-section {
    background: linear-gradient(
        to right,
        rgba(30, 41, 59, 0.7),
        rgba(30, 41, 59, 0.5)
      ),
      url('./images/mt-1641-about-banner1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }

  .gradient-text {
    background: linear-gradient(
      135deg,
      #93c5fd,
      #0c99ed
    ); /* Lighter blue gradient */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .countdown-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(95, 98, 145, 0.37);
    border-radius: 16px;
    padding: 1.5rem;
    min-width: 120px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .countdown-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.45);
  }

  .nav-link {
    position: relative;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
  }

  .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    transition: all 0.3s ease;
  }

  .nav-link:hover::after {
    width: 100%;
    left: 0;
  }

  .card-hover {
    transition: all 0.3s ease;
  }

  .card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.45);
  }

  .glow {
    animation: glow 2s infinite alternate;
  }

  @keyframes glow {
    from {
      box-shadow: 0 0 20px -10px #83bbff;
    }
    to {
      box-shadow: 0 0 30px -5px #7ab0f1;
    }
  }

  .scroll-down {
    animation: bounce 2s infinite;
  }

  @keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-20px);
    }
    60% {
      transform: translateY(-10px);
    }
  }
  #mobile-menu {
  transition: all 0.3s ease-in-out;
}