/* --- 1. GENERAL SECTION STYLING --- */
.about-section {
    padding: 60px 0;
    border-bottom: 1px solid #eee;
}

.about-section:last-of-type {
    border-bottom: none;
}

/* Shared styles for main and sub-headings */
.about-section h2,
.team-subheading {
    font-weight: bold;
    color: #070f43;
}

/* Styles specific to main section headings */
.about-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

/* Styles specific to team sub-headings */
.team-subheading {
    display: inline-block;
    font-size: 2.0rem;
    margin-bottom: 25px;
    padding-bottom: 8px;
    border-bottom: 2px solid #a6e1ff;
    text-align: center;
    margin-top: 40px;
}


/* --- 2. "WHO WE ARE" (INTRO) SECTION --- */
.about-intro {
    display: flex;
    align-items: center;
    gap: 50px; /* Space between text and image */
    padding-top: 0;
}

.about-text-content {
    flex: 1; /* Takes up 50% of the space */
}

.about-image-container {
    flex: 1; /* Takes up the other 50% */
    max-width: 500px;
}

.about-image-container img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}


/* --- 3. PROBLEM EXAMPLE SECTION --- */
.problem-example {
    background-color: #f8f9fa; /* Light grey background */
    padding: 40px;
    border-radius: 10px;
    margin: 20px -40px; /* Make it slightly wider than the main content */
}

.problem-statement {
    font-size: 1.2rem;
    font-style: italic;
    color: #6c757d;
    text-align: center;
    margin-bottom: 30px;
}

.chess-image {
    max-width: 250px;
    height: auto;
    margin: 0 auto;
}

.img-xadrez {
    width: min(100%, 300px);
    margin: 15px auto;
    display: block;
    border-radius: 5px;
}

.accordion {
    margin-top: 30px;
}


/* --- 4. TEAM MEMBER STYLES (Inside Accordion) --- */
.accordion-body {
    text-align: center; /* Center inline/inline-block children like .team-subheading */
}

.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 30px;
}

.member-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 220px; /* Give cards a consistent base width */
}

.member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.member-card img {
    width: 100%;
    height: 220px; /* Made height match width for a square look */
    object-fit: cover;
}

.member-info {
    padding: 20px 15px;
}

.member-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0;
}

.member-email {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 5px;
}

/* --- 5. ACCORDION BUTTON STYLING --- */
#teamAccordion .accordion-button {
    /* Style the main team button to look like a heading */
    font-size: 1.5rem;
    font-weight: bold;
    color: #070f43;
    background-color: transparent; 
    box-shadow: none; 
}

#teamAccordion .accordion-button:not(.collapsed) {
    background-color: #f8f9fa; /* Light background when open */
    color: #070f43;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

#teamAccordion .accordion-button:focus {
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); /* Default Bootstrap focus ring */
}


/* --- 6. RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 992px) {
    .about-intro {
        flex-direction: column; /* Stacks image and text vertically */
    }

    .problem-example {
        margin: 20px 0; /* Remove negative margins on small screens */
        padding: 20px;
    }
}