.responsive-header {
    text-align: center;
    padding: 20px;
    background-color: #222;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image Container Styling */
.image-container {
    position: relative;
    max-width: 100%; /* Make the container responsive */
    width: 100%; /* Full width by default */
    margin: 0 auto; /* Center container horizontally */
}

/* Base Image Styling */
.base-image {
    width: 100%; /* Make the base image scale with the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px;
    max-height: 300px; /* Optional: rounded corners */
}

/* Overlay Image Styling */
.overlay-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%; /* Adjust size of the overlay image */
    height: auto; /* Maintain aspect ratio */
    transform: translate(-50%, -50%); /* Center the overlay image */
    opacity: 1; /* Adjust transparency */
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .responsive-header {
        padding: 15px;
    }

    .overlay-image {
        width: 60%; /* Adjust overlay size for smaller screens */
    }
}

@media (max-width: 480px) {
    .overlay-image {
        width: 70%; /* Further resizing for very small screens */
    }
}