.header-container {
    background-color: #000000;
    padding: 2.5rem;
    border-radius: 12px;
    /* Fixed typo: removed spaces around the minus signs in box-shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    width: 100%;
    max-width: 400px;
    /* Added display block to guarantee margin: auto works */
    display: block; 
    margin: 0 auto;     
    box-sizing: border-box; /* Prevents padding from making the container wider than 400px */
}

/* The main header layout wrapper */
.header {
    position: relative;
    width: 100%; /* Changed from inherit to fully fill the parent's width */
    height: 150px; /* Changed from inherit to a fixed height so the banner is visible */
    background-image: url('https://kg5epw.com/images/Banner1.png'); 
    background-size: cover; /* Changed to cover so it scales cleanly without squishing */
    background-position: center;   
    background-repeat: no-repeat;  
    display: flex;                 
    align-items: flex-end;         
    padding: 20px;                 
    box-sizing: border-box;        
    /*border-radius: 8px;  Optional: curves the header corners to match the parent */
}

.avatar {
    position: relative;            
    z-index: 2;                    
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ffffff;     
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);  
    margin: -60px 0px;
}

/* The actual image inside the container */
#avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}