/* Container for all cards */
.whats-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;             /* Space between cards */
    margin: 2em auto;     /* Space above and below the container */
    padding: 1em;         /* Prevent cards from touching page edges */
    max-width: 1200px;    /* Keeps layout readable on wide screens */
    justify-content: center;
}

/* Individual cards */
.whats-card {
    flex: 1 1 300px;       /* Flexible width, min 300px */
    max-width: 450px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1.5em;        /* Breathing room inside card */
    box-shadow: 0 0 6px rgba(0,0,0,0.05);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Card headings */
.whats-card h2 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.25rem;
}

/* Card paragraphs */
.whats-card p {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Hero image spacing */
.hero-banner img {
    width: 100%;
    height: auto;
    margin-bottom: 1.5em;
    border-radius: 4px;
}

/* Optional: style links inside cards */
.whats-card a {
    color: #006400;          /* Dark green */
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .whats-card {
        flex: 1 1 100%;
    }
}