html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/*html {
  position: relative;
  min-height: 100%;
}*/

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #FFFBFB;
    position: relative; /* Important for absolute bubble positioning */
    overflow-x: hidden; /* Hide overflowing bubbles */
    overflow-y: auto; /* Enable vertical scrolling */
    font-family: 'Manrope', sans-serif;
}

#bubble-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* So bubbles don’t block clicks */
    overflow: hidden; /* Hide overflowing bubbles */
}

/*.bubbles {
    position: absolute;
    bottom: -150px;
    font-size: 2rem;
    animation: floatUp 9s linear infinite;
}

@keyframes floatUp {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translate(0, -120vh) translateX(calc(-50vw + 100vw * var(--randomX)));
        opacity: 0;
    }
}*/

/*.bubbles {
    position: absolute;
    bottom: -150px;
    font-size: 2rem;
    animation: floatUp 20s linear infinite;
}

@keyframes floatUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    80% {
        opacity: 1;*/ /* stays visible longer */
    /*}

    100% {
        transform: translateY(-150vh) translateX(calc(-50vw + 100vw * var(--randomX)));
        opacity: 0;*/ /* fade only at the last moment */
    /*}
}*/

.bubbles {
    position: absolute;
    bottom: -50px; /* Start below screen */
    /* Animation name is set here, but duration is handled by JS now */
    animation-name: floatUp;
    animation-timing-function: linear;
    animation-iteration-count: 1; /* Run once, then JS removes it */
    /* Fallback duration if JS fails */
    animation-duration: 20s;
}

@keyframes floatUp {
    0% { 
        transform: translateY(0); 
        opacity: 1; 
    }
    90% { 
        opacity: 1; 
    }
    100% {
        transform: translateY(calc(-1 * var(--rise-distance)));
        opacity: 0;
    }
}


.dropdown-menu .dropdown-item {
    color: black !important; /* Change link text color */
    text-decoration: none !important; /* Remove underline if any */
}

    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus {
        color: #000000 !important; /* Keep hover color black or choose another */
        background-color: #f8f9fa !important; /* Light gray background on hover */
    }

header {
    background-color: #FFFFFF;
    position: relative;
    z-index: 5;
}

main {
    background-color: #FFFBFB;
    margin: 0;
}

footer {
    background-color: #F5F5F5;
}

.page-footer {
    width: 100%; /* make it full width */
    position: relative; /* remove fixed positioning */
    z-index: 5;
    bottom: auto; /* reset bottom */
    left: auto; /* reset left */
    right: auto;
}