.logo-container {
    position: relative;
    width: 200px; /* Adjust based on your logo size */
    height: 200px; /* Adjust based on your logo size */
    border-radius: 25px;
    z-index: 1000;
}

.logo-container img {
    /* Existing styles */
    border-radius: 150px;
    object-fit: cover; /* This will cover the area without losing the aspect ratio */
    width: 100%;
    height: 100%;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Example shadow */
    transition: box-shadow 0.3s ease; /* Smooth transition for the shadow */
}

.logo-container img:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
}

#logo {
    width: 100%;
    cursor: pointer;
}

#cv-image {
    transition: transform 0.3s ease, filter 0.3s ease; /* Smooth animation */
}

#cv-image:hover {
    transform: scale(1.1); /* Slightly enlarge the image */
    filter: brightness(1.5); /* Brighten the image */
}


.visible {
    opacity: 1; /* Fully visible */
}

/* Styling for Bubble Elements */
.bubble {
    position: absolute;
    width: 50px; /* Bubble size */
    height: 50px; /* Bubble size */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Start hidden */
    transform: scale(0) translate(-50%, -50%); /* Start scaled down */
    top: 50%; /* Start at center */
    left: 50%; /* Start at center */
    transition: all 0.1s ease; /* Smooth transition */
    cursor: pointer;      

}

/* Target positions (as you defined earlier) */

    /* Overlay1 - Me+CV*/
    #bubble0 {
        top: -11%;
        left: 50%;
        transform: scale(0) translate(50%, 50%);
        background-color: #D34E24;
        border-style: ridge;
        border-color: #000;
        border-radius: 250px 250px 17px 56px;  
    }
    
        /* Overlay2 - About*/
    #bubble1 {
        top: -2%;
        left: 86%;
        transform: scale(0) translate(50%, 50%);
        background-color: #74860c;
        border-style: ridge;
        border-color: #000;
        border-radius: 80px 25px 50px 20px;    
    }
    
        /* Overlay3 - Stories*/
    #bubble2 {
        top: -1%;
        left: 13%;
        transform: scale(0) translate(50%, 50%);
        background-color: #F28123;
        border-style: ridge;
        border-color: #000;
        border-radius: 25px 80px 20px 50px;    
    }
    
        /* Gallery*/
    #bubble3 {
        top: 70%;
        left: 109%;
        transform: scale(0) translate(50%, 50%);
        background-color: #480bf0;
        border-style:ridge;
        border-color: #000;
        border-radius: 20px 50px 25px 80px;       
    }
    
        /* Overlay4 - IT*/
    #bubble4 {
        top: 25%;
        left: 107%;
        transform: scale(0) translate(50%, 50%);
        background-color: #563F1B;
        border-style:ridge;
        border-color: #000;
        border-radius: 80px 25px 50px 20px;      
    }
    
        /* Admin*/
    #bubble5 {
        top: 111%;
        right: 100%;
        transform: scale(0) translate(50%, 50%);
        background-color: #fa0505;
        border-style:ridge;
        border-color: #000;
        border-radius: 17px 56px 250px 250px;      
    }
    
        /* Blog*/
    #bubble6 {
        top: 25%;
        left: -6%;
        transform: scale(0) translate(50%, 50%);
        background-color: #831d0b;
        border-style:ridge;
        border-color: #000;
        border-radius: 25px 80px 20px 50px;     
    }
    
        /* Overlay5 - Contact*/
    #bubble7 {
        top: 70%;
        left: -10%;
        transform: scale(0) translate(50%, 50%);
        background-color: #633705;    
        border-style:ridge;
        border-color: #000;
        border-radius: 50px 20px 80px 25px;       
    }

.bubble:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
}

#bubble0:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
    background-color: #4ee265;
}

#bubble1:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
    background-color: #4ee265;
}

#bubble2:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
    background-color: #4ee265;
}

#bubble3:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
    background-color: #4ee265;
}

#bubble4:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
    background-color: #4ee265;
}

#bubble6:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
    background-color: #4ee265;
}

#bubble7:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
    background-color: #4ee265;
}