/* Bubble container for bubbling animation */
.bubble-container {
    position: relative; /* To position bubbles absolutely */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    overflow: hidden; /* Hide overflowing bubbles */
    width: 100%; /* Make the container full width */
    height: auto; /* Adjust the height as needed */
    padding: 20px 0; /* Add some vertical padding */
    box-sizing: border-box; /* Include padding in width and height */
    margin: 0 auto; /* Center the container itself (in case of a flex parent) */
}

/* Style for the Responsive Image */
.responsive-img {
    width: 100%;
    max-width: 600px; /* Maximum width of the image */
    height: auto;
    display: block; /* Center the image */
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

/* Bubbling effect for each bubble */
.bubble {
    position: absolute;
    bottom: 0;
    width: 10px; /* Bubble size */
    height: 10px; /* Bubble size */
    background-color: rgba(255, 255, 255, 0.7); /* White bubbles with some transparency */
    border-radius: 50%; /* Make the shape circular */
    animation: bubble 5s infinite ease-in-out; /* Animation for bubbling */
    opacity: 0; /* Start invisible */
}

/* Keyframes for the bubbling animation */
@keyframes bubble {
    0% {
        transform: translateY(0) scale(0.5); /* Start small at the bottom */
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    50% {
        transform: translateY(-100px) scale(1); /* Move upwards and grow */
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) scale(0); /* End small and higher up */
        opacity: 0;
    }
}

/* Position and Animation Delay for Each Bubble */
.bubble:nth-child(2) {
    left: 20%; /* Position bubble */
    animation-delay: 2s; /* Delay animation */
}

.bubble:nth-child(3) {
    left: 40%;
    animation-delay: 3s;
}

.bubble:nth-child(4) {
    left: 60%;
    animation-delay: 1s;
}

.bubble:nth-child(5) {
    left: 80%;
    animation-delay: 4s;
}

.bubble:nth-child(6) {
    left: 30%;
    animation-delay: 0s;
}

.bubble:nth-child(7) {
    left: 70%;
    animation-delay: 2.5s;
}

/* Additional Bubbles for Variety */
.bubble:nth-child(1) {
    left: 10%;
    animation-delay: 1.5s;
}

/* Centered Footer Styling */
footer {
    text-align: center; /* Center the text */
    margin-top: 20px; /* Add some space above the footer */
    padding: 10px; /* Add some padding for a nicer look */
    background-color: #f8f8f8; /* Optional: Light background color */
    width: 100%; /* Take full width */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow */
}