gggg

/* Container for the entire grid */
.custom-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Creates 3 columns, adjusts for smaller screens */
gap: 20px; /* Space between the cards */
padding: 20px; /* Padding around the entire grid */
background-color: #f0f0f0; /* Light grey background for the whole section */
}

/* Styling for each individual card */
.custom-card {
background-color: #e0e6f0; /* Light blue background for the card */
border-radius: 8px; /* Rounded corners */
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
display: flex; /* Use flexbox for internal layout */
flex-direction: column; /* Stack items vertically */
justify-content: space-between; /* Pushes button to the bottom */
}

/* Styling for the card heading */
.custom-card .card-heading {
font-size: 1.3em;
margin-top: 0;
margin-bottom: 15px;
color: #333;
text-align: center; /* Center align the heading */
font-weight: bold;
}

/* Styling for the unordered list */
.custom-card ul {
list-style: none; /* Remove default bullet points */
padding: 0;
margin: 0;
flex-grow: 1; /* Allows the list to take up available space */
}

/* Styling for each list item */
.custom-card ul li {
margin-bottom: 10px;
line-height: 1.4;
}

/* Styling for the links within the list */
.custom-card ul li a {
text-decoration: none; /* Remove underline from links */
color: #0073aa; /* WordPress default link blue */
font-size: 0.95em;
display: block; /* Make the entire list item clickable */
}

.custom-card ul li a:hover {
color: #005177; /* Darker blue on hover */
text-decoration: underline;
}

/* Styling for the “View More…” button */
.custom-card .card-button {
display: block; /* Make the button a block element */
width: fit-content; /* Adjust width to content */
margin: 20px auto 0 auto; /* Center the button and add top margin */
padding: 10px 20px;
background-color: #0073aa; /* Button blue color */
color: white;
text-align: center;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease; /* Smooth hover effect */
}

.custom-card .card-button:hover {
background-color: #005177; /* Darker blue on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.custom-card-grid {
grid-template-columns: 1fr; /* Stack cards vertically on smaller screens */
padding: 10px;
gap: 15px;
}
.custom-card {
padding: 15px;
}
}