.team-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 0;
}

/* --- Team Section Specific Styles --- */
.team-section {
    padding: 60px 0;
    background-color: #fff; /* White background for the section itself */
}

.section-title {
    text-align: center;
    margin-bottom: 20px;
}

.section-title h2 {
    /* Using Poppins for the main section title */
    font-size: 2.5rem;
    font-weight: 700; /* Bold */
    color: #2c3e50; /* Dark blue/grey */
    margin-bottom: 10px;
}

/* --- Team Grid --- */
.team-grid {
    display: grid;
    /* Keep the 2-column definition for the overall grid structure */
    grid-template-columns: repeat(2, 1fr);
    gap: 25px; /* Increased gap slightly for better spacing */
    margin: 0 auto;    /* Center the grid if max-width is used */
}

/* Make the FIRST team card span both columns */
.team-grid .team-card:first-child {
    grid-column: 1 / -1; /* Span from the first column line to the last */
    max-width: 900px;
    margin: 0 auto 0 auto; /* Center it and add bottom margin */
}

/* --- Team Card --- */
.team-card {
    display: flex;
    gap: 25px; /* Space between member info and QA section */
    padding: 30px;
    /* border-radius: 15px; */
    overflow: hidden; /* Prevent content spill */
    color: #fff; /* Default text color for cards */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* Card Background Colors */
.team-card--blue {
    background-color: #3498db; /* Primary Blue */
}

.team-card--yellow {
    background-color: #f39c12; /* Primary Yellow/Orange */
}

/* --- Left Side: Member Info --- */
.team-member-info {
    flex: 0 0 40%; /* Takes up 40% width, doesn't grow/shrink */
    max-width: 280px; /* Max width constraint */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    text-align: center;
}

.member-image-container {
    width: 100%;
    height: 100%;
    max-width: 220px; /* Control image size */
    aspect-ratio: 1 / 1; /* Make it square */
    border-radius: 15px; /* Rounded corners for image container */
    overflow: hidden; /* Clip image to rounded corners */
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border: 6px solid rgba(255, 255, 255, 0.5); /* Subtle white border */
}

.member-image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container without distortion */
}

/* dots */
.dots {
    display: flex;
    gap: 3px;
    margin-bottom: -10px;
    padding: 0;
}

.dots span {
    width: 10px;
    height: 10px;
    background-color: #FFEBCCA1; /* Orange dots */
    border-radius: 50%;
    display: block;
}

.left {
    justify-content: flex-start;
}

.right {
    justify-content: flex-end;
}



.member-details h3 {
    /* Using Poppins for names */
    font-size: 1.6rem;
    font-weight: 600; /* Semi-bold */
    color: #fff;
    position: relative; /* ADD: Make h3 a positioning context */
    padding-bottom: 3px; 
    margin-bottom: 0; /* ADD: Remove bottom margin if padding is enough */
}

/* ADD THIS NEW RULE for the underline below the h3 */
.member-details h3::after {
    content: '';
    position: absolute;
    bottom: 0;       /* Position at the very bottom of the padding */
    left: 0;        /* Start at the left edge */
    right: 0;       /* End at the right edge */
    /* OR use width: 100%; instead of left/right */
    height: 2px;
    background-color: rgba(255, 255, 255, 0.7); /* Line color */
}

.member-details .member-title {
    /* Using Nunito for titles */
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85); /* Slightly transparent white */
    margin-top: 4px; /* Optional: Add a small top margin for spacing */
}


/* --- Right Side: QA Bubbles --- */
.team-member-qa {
    flex: 1; /* Takes remaining available space */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between question and answer bubbles */
}

.question-bubble{
    border-top-left-radius: 30px; 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 30px; 
    border-bottom-left-radius: 30px; 
}
.answer-bubble{
    border-top-left-radius: 0; 
    border-top-right-radius: 30px; 
    border-bottom-right-radius: 30px; 
    border-bottom-left-radius: 30px; 
}

.qa-bubble {
    padding: 20px;
      /* Set individual corners */
    position: relative;
    font-size: 0.9rem;
     /* Using Nunito for bubble text */
    line-height: 1.5;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.qa-bubble p {
    margin: 0;
}

/* Bubble Colors - Inverted from Card Background */
.team-card--blue .qa-bubble {
    background-color: #f39c12; /* Yellow */
    color: #fff;
}
.team-card--yellow .qa-bubble {
    background-color: #3498db; /* Blue */
    color: #fff;
}

/* Bubble Indicator (...) */
.bubble-indicator {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 1.5rem; /* Make dots bigger */
    line-height: 1;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6); /* Semi-transparent white dots */
}
/* Re-color indicator based on bubble color */
.team-card--blue .bubble-indicator { color: rgba(255, 255, 255, 0.6); }
.team-card--yellow .bubble-indicator { color: rgba(255, 255, 255, 0.6); }


/* Answer Bubble Specifics */
.answer-bubble {
    flex-grow: 1; /* Allows button to be pushed down */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom */
}

/* Explore Button */
.explore-button {
    display: inline-block;
    padding: 8px 35px;
    border-radius: 20px; /* Pill shape */
    border: 1px solid #fff; /* White border */
    background-color: transparent; /* Transparent background */
    color: #fff; /* White text */
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    align-self: center; /* Center button horizontally */
    margin-top: 15px; /* Space above button */
}

/* Button Hover - Invert colors matching the bubble */
.team-card--blue .explore-button:hover {
    background-color: #fff;
    color: #f39c12; /* Yellow text on hover */
}
.team-card--yellow .explore-button:hover {
    background-color: #fff;
    color: #3498db; /* Blue text on hover */
}


/* --- Responsive Adjustments --- */

@media (max-width: 1125px) {
    .qa-bubble {
        padding: 15px;
        margin-bottom: 10px;
    }
    
    .team-member-qa{
        gap: 17px;
    }
    
}

@media (max-width: 1025px) {
    .member-image-container{
        height: 60%;
    }
    .answer-bubble {
        margin-bottom: 80px;
    }
    .team-member-qa{
        gap: 5px;
    }
    .dots {
        margin-bottom: 0px;
    }
    
    .team-card{
        padding: 15px;
    } 
}

@media (max-width: 992px) {
    .team-section {
        padding: 20px 0 60px 0;
    }
    .team-card{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        gap: 5px;
    } 
    
    .team-grid .team-card:first-child {
        grid-column: 1 / -1;
        max-width: 600px;
        margin: 0 auto 0 auto;
    }
    
    .member-image-container{
        height: 70%;
    }
    .answer-bubble {
        margin-bottom: 0px;
    }
    
    .team-card{
        padding: 20px;
    } 
}

@media (max-width: 910px) {
    .member-image-container{
        height: 60%;
    }
    
    .team-card{
        gap: 0px;
    } 
}


@media (max-width: 512px) {
    .team-grid {
        grid-template-columns: 1fr; /* Stack to 1 column */
    }
    
    .team-member-info {
        flex-basis: auto; /* Reset basis */
        width: 80%;
        max-width: 360px; /* Allow slightly wider on tablet */
    }
    .team-member-qa {
        width: 100%;
        max-width: 500px; /* Limit width of QA bubbles */
    }
     .qa-bubble {
        width: 100%; /* Make bubbles take full width of their container */
    }
     .explore-button {
         align-self: center; /* Ensure centered */
     }
     
    .member-image-container{
        height: 100%;
    }
    .answer-bubble {
        margin-bottom: 0px;
    }
    .team-card{
        gap: 0;
    } 
}