/* Estilos específicos para a página institucional */

.institucional-main {
    padding: 4rem 0;
}

.about-section {
    padding: 40px 0; /* Vertical padding for the section */
    background-color: #F8F8F8;
}

.about-section .container {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.about-content {
    flex: 1; /* Allow content to take available space */
    min-width: 300px; /* Minimum width before wrapping */
    text-align: left; /* Align text to the left */
}

.about-content h2 {
    font-size: 1.8em;
    color: #2e3192;
    margin-top: 0;
    margin-bottom: 15px;
}

.about-content p {
    line-height: 1.7;
    color: #555;
}

.about-image {
    flex: 1; /* Allow image to take available space */
    min-width: 300px; /* Minimum width before wrapping */
    text-align: center; /* Center image if it doesn't fill space */
}

.about-image img {
    max-width: 100%; /* Ensure image is responsive */
    height: auto;
    border-radius: 1rem; /* Rounded corners for the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.cards-section h2 {
    text-align: left; /* Align subtitle to the left */
    margin-bottom: 30px; /* Space below the subtitle */
    color: #333;
    font-size: 1.8em;
}

.cards-container {
    display: flex;
    justify-content: center; /* Center the cards horizontally */
    gap: 20px; /* Space between cards */
    flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
}

.section-title-center {
    text-align: center;
    font-size: 2.5em;
    margin-top: 40px;
    margin-bottom: 40px;
    color: #2e3192;
}

.clinical-staff-section {
    padding: 40px 0;
    background-color: #f8f8f8; /* Slightly darker white background */
}

.clinical-staff-section h2 {
    text-align: left;
    margin-bottom: 30px;
    color: #333;
    font-size: 1.8em;
}

.clinical-staff-cards {
    display: flex;
    justify-content: center;
    gap: 30px; /* Space between cards */
    flex-wrap: wrap;
}

.clinical-staff-card {
    display: flex; /* Use flexbox for image and text inside card */
    align-items: center; /* Vertically align image and text */
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    flex: 1; /* Allow cards to grow and shrink */
    max-width: 45%; /* Max width for two cards side-by-side */
    min-width: 300px; /* Minimum width before wrapping */
    gap: 20px; /* Space between image and text */
}

.clinical-staff-card .staff-image {
    flex-shrink: 0; /* Prevent image from shrinking */
}

.clinical-staff-card .staff-image img {
    width: 120px; /* Fixed width for staff image */
    height: 120px; /* Fixed height for staff image */
    border-radius: 50%; /* Circular image */
    object-fit: cover; /* Cover the area */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.clinical-staff-card .staff-details h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #2e3192;
    font-size: 1.4em;
}

.clinical-staff-card .staff-details p {
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.history-section {
    padding: 40px 0;
    background-color: #ffffff; /* White background */
}

.history-section h2 {
    text-align: left;
    margin-bottom: 20px;
    color: #333;
    font-size: 1.8em;
}

.history-section .history-text {
    text-align: justify; /* Justify text */
    margin: 0 auto; /* Center horizontally */
    max-width: 800px; /* Limit width for readability */
    line-height: 1.8;
    color: #555;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .about-section .container {
        flex-direction: column; /* Stack columns vertically */
        text-align: center; /* Center content when stacked */
    }

    .about-content {
        text-align: center; /* Center text when stacked */
    }

    .cards-container {
        flex-direction: column; /* Stack cards vertically */
        align-items: center; /* Center cards horizontally */
    }

    .cards-section .card { /* Target cards within this section */
        max-width: 90%; /* Make cards take almost full width */
        margin-bottom: 20px; /* Add space between stacked cards */
    }

    .clinical-staff-cards {
        flex-direction: column; /* Stack cards vertically */
        align-items: center; /* Center cards horizontally */
    }

    .clinical-staff-card {
        max-width: 90%; /* Make cards take almost full width */
        flex-direction: column; /* Stack image and text vertically within card */
        text-align: center; /* Center text within card */
    }

    .clinical-staff-card .staff-image {
        margin-bottom: 15px; /* Space between image and text when stacked */
    }
}