/* Profile Picture Styling */
.profile-pic {
    transition: transform 0.3s ease; /* Smooth transition for scaling */
    cursor: pointer; /* Indicates that the image is clickable */
    border-radius: 50%; /* Maintain circular shape */
    object-fit: cover; /* Ensure the image covers the area nicely without distortion */
    border: 5px solid white; /* White border to distinguish from the background */
    width: 150px; /* Initial width */
    height: 150px; /* Initial height */
    position: absolute;
    bottom: -45px; /* Position to overlap the banner and content section */
    left: 20px; /* Margin from the left side of the banner */
    background-size: cover;
}

/* Hover effect for the profile picture */
.profile-pic:hover {
    transform: scale(1.1); /* Slightly increase size on hover */
}

/* Adjustments for small screens */
@media (max-width: 768px) {
    .profile-pic {
        width: 120px; /* Smaller size for smaller screens */
        height: 120px;
        bottom: -30px; /* Adjust positioning for smaller profile picture */
        left: 10px; /* Closer to the left side on smaller screens */
    }
}

/* Adjustments for very small screens */
@media (max-width: 480px) {
    .profile-pic {
        width: 100px; /* Even smaller for very small screens */
        height: 100px;
        bottom: -20px; /* Adjust positioning for very small screens */
        left: 5px; /* Minimal left margin on very small screens */
    }
}

/* Enlarged state for interactive engagement */
.profile-pic.enlarged {
    transform: scale(2); /* Double the size for the enlarged state */
    z-index: 10; /* Ensure it's above other content */
}