/* General settings */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f4f7f6; 
    margin: 0; 
    text-align: center; 
    color: #333; /* Darker text for readability */
}

header { background-color: #1a2b3c; color: white; padding: 2rem 0; }

/* Grid layout for the 4 sections */
.category-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 25px; 
    padding: 30px; 
    max-width: 1200px; /* Keeps the cards from getting too stretched on wide screens */
    margin: 0 auto;    /* Centers the whole grid */
}

/* Design of the cards */
.card { 
    background: white; 
    padding: 25px; 
    border-radius: 12px; 
    box-shadow: 0 6px 10px rgba(0,0,0,0.08);
    transition: transform 0.2s; /* Smooth animation */
}

.card:hover { transform: translateY(-5px); } /* Card lifts slightly when hovering */

/* Design of the buttons */
.card a { 
    display: inline-block; 
    margin-top: 15px; 
    padding: 12px 24px; 
    background: #2ecc71; 
    color: white; 
    text-decoration: none; 
    border-radius: 6px; 
    font-weight: bold;
    transition: background 0.3s;
}

.card a:hover { background: #27ae60; } /* Darker green on hover */