/* ==========================================================
   TEAM CIRCLES (Layout Fixed for Side-by-Side)
   ========================================================== */

/* --- CONTAINER --- */
.team-circles {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* FIXED: Removed 'auto' margin so it doesn't force center on desktop */
    /* -100px pulls it up to the border line */
    margin: -100px 0 0 0; 
    
    max-width: 500px;
    position: relative;
    z-index: 10;
    padding: 0 20px;
}

/* --- CIRCLES (Shared Styles) --- */
.team-circle {
    /* Fixed Size */
    width: 200px;
    height: 200px;
    
    border-radius: 50%;
    border: 6px solid #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    object-fit: cover;
    object-position: center;
    
    /* Overlap Logic */
    margin-left: -80px; 
    
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

/* Reset first circle so it doesn't overlap nothing */
.team-circle:first-child {
    margin-left: 0;
    z-index: 3;
}
.team-circle:nth-child(2) { z-index: 2; }
.team-circle:nth-child(3) { z-index: 1; }

/* Hover Animation */
.team-circle:hover {
    transform: translateY(-15px) scale(1.1);
    z-index: 10;
}

/* ==========================================================
   TABLET (768px and below)
   ========================================================== */
@media (max-width: 768px) {
    .team-circles {
        max-width: 400px;
        /* On tablet/mobile, we usually want them centered again */
        margin-left: auto;
        margin-right: auto;
    }
    
    .team-circle {
        width: 150px;
        height: 150px;
        margin-left: -60px;
        border: 5px solid #fff;
    }
}

/* ==========================================================
   MOBILE (480px and below)
   ========================================================== */
@media (max-width: 480px) {
    .team-circles {
        max-width: 280px;
        padding: 0 10px;
        
        /* FIX: Re-enable centering for mobile */
        margin-left: auto !important;
        margin-right: auto !important;
        /* Keep the negative top margin */
        margin-top: 0 !important; 
    }
    
    .team-circle {
        width: 110px;
        height: 110px;
        margin-left: -45px;
        border: 4px solid #fff;
    }
}