/* Global Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh; /* Ensure the body takes the full height of the viewport */
    background: linear-gradient(to right, #7f8c8d, #1abc9c); /* Gray to pool gradient */
    color: black /* Dark text color for readability */
}
li {
    color: black; /* Black text color for list items */
    padding: 2px; /* Padding for list items */
    list-style-type: none; /* Remove bullet points */
}
/* Navbar Styles */
.navbar a {
    float: left;
    display: block;
    color: #333; /* Dark gray for navbar links */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a:hover {
    background-color: #cfd8dc; /* Light gray on hover */
    color: black;
}

/* Content Styles */
.content {
    padding: 20px;
    text-align: center; /* Center the title and description */
}

.content h1 {
    color: #333; /* Dark gray for titles */
    margin: 20px 0; /* Add margin to push the title down */
    padding: 0; /* Remove default padding */
    text-align: center; /* Center the title */
}




/* Card Styles */
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the cards */
}

.card {
    border: 2px solid #444; /* Increased border thickness and changed color for solid lines */
    border-radius: 15px; /* Increased border-radius for rounder cards */
    padding: 15px;
    margin: 5px; /* Reduced margin to bring cards closer together */
    flex: 0 38%; /* Adjusts the width of the cards to 38% */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Added shadow effect */
    transition: transform 0.2s; /* Smooth transition for hover effect */
    background-color: #eceff1; /* Light gray for card background */
}

.card:hover {
    transform: scale(1.05); /* Scale effect on hover */
}

.card img {
    max-width: 100%;
    height: auto;
    border-radius: 15px; /* Increased border-radius for images */
}

.card-title {
    font-size: 1.5em;
    margin: 10px 0;
    color: #333; /* Updated text color for better contrast */
}

.bullet-points {
    list-style-type: disc;
    padding-left: 20px;
    color: black; /* Updated bullet points color for a professional look */
}

/* Footer Styles */
footer {
    background-color: #455a64; /* Dark gray for footer */
    color: white; /* White text color */
    text-align: center; /* Center text in footer */
    padding: 10px 0; /* Padding for footer */
    position: relative; /* Positioning for footer */
    bottom: 0; /* Stick to the bottom */
    width: 100%; /* Full width */
}