/* General styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}

.content-section {
    padding: 20px;
    background-color: #f5f5f5;
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Resources and Support Section */
.resource-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between cards */
    justify-content: center; /* Center cards */
}

.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    padding: 20px;
    width: 300px; /* Set card width */
    box-sizing: border-box; /* Include padding and border in width */
    margin-bottom: 20px; /* Space below card */
}

.card h4 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
}

.card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card ul li {
    margin-bottom: 15px; /* Space between list items */
}

a.button {
    display: inline-block;
    padding: 10px 15px;
    font-size: 14px;
    color: #ffffff;
    background-color: #fe5102; /* Button background color */
    border: none;
    border-radius: 5px; /* Rounded corners */
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-bottom: 10px; /* Space below buttons */
}

a.button:hover {
    background-color: #e44601; /* Darker background on hover */
    transform: scale(1.05); /* Slightly larger on hover */
}

a.button:active {
    background-color: #c63e00; /* Even darker background when clicked */
    transform: scale(0.95); /* Slightly smaller when clicked */
}

/* Map styling */
.map {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
    margin-top: 20px;
    border: 3px solid #fe5102;
    border-radius: 8px; /* Retaining rounded edges */
}

/* Location list styling */
.location-list {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center items horizontally */
    gap: 20px; /* Space between items */
    padding: 0;
    list-style: none;
}

.location-list li {
    flex: 1 1 calc(50% - 20px); /* Two cards per row with gap consideration */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow for card effect */
    margin-bottom: 20px;
    box-sizing: border-box; /* Ensure padding and border are included in width */
    max-width: calc(50% - 20px); /* Ensure items do not exceed container width */
    text-align: center; /* Center text inside card */
}

/* Specific background color for SAPS list */
#saps-list .location-item {
    background-color: #E5DFD1 !important; /* Background color for SAPS list */
}

/* Specific background color for Hospital list */
#hospital-list .location-item {
    background-color: #F9F9F9 !important; /* Gray background for Hospital list */
}

/* Additional rules to ensure styling */
.location-item {
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow for card effect */
    margin-bottom: 20px;
    box-sizing: border-box; /* Ensure padding and border are included in width */
    text-align: center; /* Center text inside card */
}

.location-list li h4 {
    margin: 0 0 5px;
}

.location-list li p {
    margin: 0;
}

.navigate-button {
    display: inline-block;
    background-color: #007bff; /* Blue background */
    color: #ffffff; /* White text */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 15px; /* Padding */
    font-size: 14px; /* Font size */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */
    margin-top: 10px; /* Space above button */
    text-align: center; /* Center text inside button */
}

.navigate-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: scale(1.05); /* Slightly larger on hover */
}

.navigate-button:active {
    background-color: #004080; /* Even darker blue when clicked */
    transform: scale(0.95); /* Slightly smaller when clicked */
}

.navigate-button:focus {
    outline: none; /* Remove default outline */
}

/* Mobile view adjustments */
@media (max-width: 768px) {
    .location-list li {
        flex: 1 1 100%; /* Stack items vertically */
        max-width: 100%; /* Ensure items take full width */
    }
}

/* General link styles */
a[href^="mailto:"]{
    color: #007bff; /* Primary link color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease, border-bottom 0.3s ease; /* Smooth transition */
}

/* Link hover state */
a[href^="mailto:"]:hover{
    color: #0056b3; /* Darker color on hover */
    border-bottom: 2px solid #0056b3; /* Add underline on hover */
}

/* Button-style links */
a.button {
    display: inline-block;
    padding: 10px 15px;
    font-size: 14px;
    color: #ffffff;
    background-color: #fe5102; /* Updated button background color */
    border: none;
    border-radius: 5px; /* Rounded corners */
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 15px; /* Added space above the button */
    margin-bottom: 15px; /* Added space below the button */
}


a.button:hover {
    background-color: #af1515; /* Darker background on hover */
    transform: scale(1.05); /* Slightly larger on hover */
}

a.button:active {
    background-color: #fe5102; /* Even darker background when clicked */
    transform: scale(0.95); /* Slightly smaller when clicked */
}

/* Heading styles for subgroups */
h4 {
    font-size: 1.2em; /* Slightly larger text for subgroup headings */
    margin-bottom: 10px; /* Space below the heading */
    color: #fe5102 !important; /* Force darker text color for headings */
    font-weight: bold; /* Bold text for headings */
}