body { font-family: 'Nunito', sans-serif; scroll-behavior: smooth; }
    h1, h2, h3, h4, h5 { font-family: 'Poppins', sans-serif; }
    . {
      background: linear-gradient(rgba(11,34,57,0.7), rgba(11,34,57,0.7)), url('bg3.jpg') center/cover no-repeat;
      min-height: 100vh;
    }
    .card { border-radius: 12px; transition: transform 0.3s ease-in-out; }
    .card:hover { transform: translateY(-8px); }
    .btn-primary { background-color: #0D6EFD; border: none; }
    .btn-primary:hover { background-color: #0B5ED7; }
    footer a { font-size: 1.2rem; }
    
    /* --- Card Hover Effect --- */
    .card {
      border-radius: 12px;
      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    
    .card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
    }
    
    /* --- Icon Hover Scale --- */
    .card .text-center i {
      transition: transform 0.3s ease, color 0.3s ease;
    }
    
    .card:hover .text-center i {
      transform: scale(1.2);
    }
    
    /* --- Button Hover Animation --- */
    .btn {
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .btn i {
      display: inline-block;
      transition: transform 0.3s ease;
    }
    
    .btn:hover i {
      transform: translateX(5px);
    }
    
    /* Optional: smooth outline button hover color */
    .btn-outline-primary:hover {
      background-color: #0d6efd;
      color: #fff;
      border-color: #0d6efd;
    }
    
    .btn-outline-warning:hover {
      background-color: #ffc107;
      color: #212529;
      border-color: #ffc107;
    }
    
    .btn-outline-success:hover {
      background-color: #198754;
      color: #fff;
      border-color: #198754;
    }
    /* Card hover effect */
    .event-card {
      border-radius: 12px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .event-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
    }
    
    /* Icon hover scale */
    .event-icon {
      transition: transform 0.3s ease;
    }
    
    .event-card:hover .event-icon {
      transform: scale(1.2);
    }
    
    /* Button hover animation */
    .register-btn {
      transition: all 0.3s ease;
      position: relative;
    }
    
    .register-btn i {
      transition: transform 0.3s ease;
    }
    
    .register-btn:hover i {
      transform: translateX(5px);
    }
    /* Navbar link styles */
    .navbar-nav .nav-link {
      position: relative;
      color: #000; /* default text-dark */
      transition: color 0.3s ease;
    }
    
    /* Hover underline */
    .navbar-nav .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px; /* space below text */
      width: 0;
      height: 2px;
      background-color: chocolate;
      transition: width 0.3s ease;
    }
    
    .navbar-nav .nav-link:hover::after {
      width: 100%;
    }
    
    /* Active link */
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:focus {
      color: chocolate !important;
    }
    /* Default Light Mode */
body {
  background-color: #fff;
  color: #000;
}

/* Dark Mode */
body.dark-mode {
  background-color: #121212;
  color: #f5f5f5;
}

/* Optional: Cards, navbars, etc */
.card.dark-mode {
  background-color: #1e1e1e;
  color: #f5f5f5;
}