body {
    background-color: #a7b7c7;
    background-image: linear-gradient(rgba(50, 66, 78, 0.3), rgba(50, 66, 78, 0.3)), url('../images/back2.webp');
    background-attachment: fixed; /* Keeps the image fixed in place as you scroll */
    background-position: left;
    background-size: auto;
    background-repeat: repeat-x; /* Prevents the image from repeating */

    height:100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.header {
    background-color: rgb(13, 253, 253);
    max-width: 1280px;
    min-height: 150px;
    display: flex;
    align-items: center; /* vertical centering */
    margin-left: auto;
    margin-right: auto;
    background-image: url('../images/back1.webp');
    background-repeat: no-repeat;
    background-blend-mode: luminosity; /* or overlay, multiply, etc. */
    background-size: cover;
    width: 100%;
    color: whitesmoke;
}

.tagline {
    max-width: 100%;
    margin-right: 0; /* fallback */
    color: #c3eaea;
    margin-top:-4px;
}

@media (max-width: 576px) {
    .tagline {
        max-width: 70%; /* Force it to wrap earlier */
        margin-right: auto; /* Prevent collision with logo */
    }
}

.accordion-button {
    background-color: #d4e4ee;
}

.content-wrapper {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    background-color: whitesmoke;
    border: none;

    min-height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column;
}

    .content-wrapper > main {
        flex-grow: 1; /* Allow the main content to grow and push the footer down */
    }

.extra-small {
    font-size: 0.8rem;
}

.footer {
    background-color: rgb(13, 253, 253);
    background-image: url('../images/back1.webp');
    background-repeat: no-repeat;
    background-blend-mode: luminosity; /* or overlay, multiply, etc. */
    background-size: cover;
    width: 100%;
    color: #c3eaea;
}

    .footer a {
        color: navajowhite; /* Set the hyperlink color (white in this case) */        
    }


@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-slide-in {
    animation: fadeSlideIn 0.6s ease-out;
    will-change: opacity, transform;
}

#termsText {
    padding: 0.5rem; /* Adjust padding to your liking, or set to 0 */
    border: 1px solid #ced4da; /* Match Bootstrap input styling */
    line-height: 1.5; /* Improve readability */
    background-color: white;
    font-family: Arial, sans-serif; /* Match your site’s typography */
}

/* Remove the horizontal border under the title */
.modal-header {
    border-bottom: none;
}

/* Remove the horizontal border and center buttons */
.modal-footer {
    border-top: none;
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    gap: .5rem; /* Adds space between the buttons */
}

    /* Making buttons the same width */
    .modal-footer .btn {
        min-width: 120px; /* Set your desired width */
    }

/* Remove Border from Pills */
.nav-pills .nav-link {
    border: none;
    box-shadow: none; /* Also removes any subtle shadow */
}

    /* Optional: Adjust active pill style to be more subtle */
    .nav-pills .nav-link.active {
        background-color: #B0D4EB; /* Makes the active pill look similar to the others */
        border: none;
        color: rgb(13, 110, 253);
    }



@media (max-width: 576px) { /* Adjust breakpoint as needed */
    #loading-indicator .modal-dialog {
        max-width: 90%; /* Makes the modal narrower on narrow screens */
        width: auto; /* Ensures it's responsive */
    }
}
/* debug */
/* * {
    outline: 1px solid red;
    }  */