#circle01:hover { fill: #333333; stroke: #5A6DFC; stroke-width: 6; }
#circle02:hover { fill: #333333; stroke: #FFA628; stroke-width: 6; }
#circle03:hover { fill: #333333; stroke: #3FA144; stroke-width: 6; }
#circle04:hover { fill: #333333; stroke: #B34d00; stroke-width: 6; }
#circle05:hover { fill: #333333; stroke: #919191; stroke-width: 6; }
#circle06:hover { fill: #333333; stroke: #ffffff; stroke-width: 6; }
#circle07:hover { fill: #333333; stroke: #F03935; stroke-width: 6; }
#circle08:hover { fill: #333333; stroke: #000000; stroke-width: 6; }
#circle09:hover { fill: #333333; stroke: #D7DC57; stroke-width: 6; }
#circle10:hover { fill: #333333; stroke: #C54CF5; stroke-width: 6; }
#circle11:hover { fill: #333333; stroke: #FA92EF; stroke-width: 6; }
#circle12:hover { fill: #333333; stroke: #7ebec5; stroke-width: 6; }
/* Custom Footer Styling */
#custom-footer {
    background-color: #FFFFFF; /* Change as needed */
    color: #818181; /* Footer text color */
    text-align: center;
    padding: 15px;
    margin-top: 20px;
}

#footer-logo {
    max-width: 100px; /* Adjust size */
    display: block;
    margin: 10px auto;
}

#footer-text {
    font-size: 14px;
}