body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
 margin: 0;
 padding: 0;
 background-color: #f8f9fa;
}

.card-container {
 display: flex;
 flex-wrap: wrap;
 gap: 20px; /* space between cards */
 padding: 20px;
 justify-content: center; /* center cards horizontally */
}

.card {
 background-color: white; /* blue background for the card */
 color: black; /* white text color */
 border-radius: 8px;
 width: 300px; /* fixed width for all cards */
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 display: flex;
 flex-direction: column;
}

.card-header {
 background-color: #EDD159; /* darker blue for header */
 padding: 10px;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 font-weight: bold;
 text-align: center;
 height:30px;
}

.card-body {
 padding: 15px;
 display: flex;
 flex-direction: column;
 flex-grow: 1; /* allow card body to expand and take available space */
}

.card-title {
 margin: 0 0 10px 0;
 font-size: 18px;
}

.card-text {
 margin: 0;
 font-size: 14px;
 line-height: 1.3;
 text-align: justify;
 flex-grow: 1; /* allow card text to expand and take available space */
}

/* Responsive Design */
@media (max-width: 768px) {
 .card-container {
     padding: 10px;
 }

 .card {
     width: 100%; /* Full width for mobile */
 }
}