/* Example: Highlight the dashboard section if needed */
.dashOptions .title h2 {
    color: #2c3e50;
}

/* Container for all cards */
.infoCards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

/* Individual stat card */
.infoCard {
    flex: 1 1 200px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    min-width: 140px;
}

/* Hover effect */
.infoCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Optional: Different background colors */
#studentsAmount {
    background: #e3f2fd;
    color: #1565c0;
}
#teachersAmount {
    background: #fce4ec;
    color: #c2185b;
}
#boysAmount {
    background: #e8f5e9;
    color: #2e7d32;
}
#girlsAmount {
    background: #fff3e0;
    color: #ef6c00;
}

.shareAdminDataBtn, .getDataBtn{
    padding: 15px;
    font-size: 12px;
    border: none;
    border-radius: 13px;
    margin: 12px;
    cursor: pointer;
}

.shareAdminDataBtn:hover, .getDataBtn:hover{
    padding: 18px;
    transition: 0.6s;
}

.red{
    background: rgb(238, 165, 165);
    color: red;
}

.blue{
    background: rgb(168, 168, 226);
    color: blue;
}


.space-between{
    display: flex;
    justify-content: space-between;
}

/* You can override styles here if needed */