/* ✅ Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;600;700&family=Urbanist:wght@300;400;600;700;800&display=swap');
.info-bar {
  width: fit-content;
  margin: 20px auto;
  padding: 12px 25px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeIn 1s ease-in-out;
  letter-spacing: 0.5px;
}

/* Hover effect */
.info-bar:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* Simple fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-15px); }
  to { opacity: 1; transform: translateY(0); }
}

 table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
        background: linear-gradient(180deg, #ffffff, #f9f9f9);
        box-shadow: 1 5px 20px rgba(0,0,0,0.1);
        border-radius: 15px;
        overflow: hidden;
        animation: fadeIn 0.6s ease-in-out;
        
    }

    th, td {
        padding: 12px 15px;
        text-align: left;
        transition: all 0.3s ease;
    }

    th {
        background: linear-gradient(90deg, #4e73df, #1cc88a);
        color: white;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        
    }

    tr {
        border-bottom: 1px solid #ddd;
    }

    tr:nth-child(even) {
        background-color: #f8f9fc;
    }

    tr:hover {
        background-color: #eaf4ff;
        transform: scale(1.01);
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    td {
        color: #333;
        border-width: 2px;
        
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }