
#submit {
    position: relative;
    display: block;
    width: 100px; /* Smaller width for a circular button */
    height: 100px; /* Equal height to width to make it circular */
    border-radius: 50%; /* Makes the button circular */
    padding: 15px;
    font-size: 16px;
    background-color: #007bff; /* Blue background */
    color: white;
    border: none;
    text-align: center;
    cursor: pointer;
    margin: 0 auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center; /* Center the text inside the button */
}

#submit:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

#submit:active {
    background-color: #003366; /* Even darker blue when clicked */
}

/* Center the button on the screen */
.center-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh; /* Full height of the screen */
    position: relative;
    margin: 0; /* Ensure it takes full space */
}

/* Add the animated ring around the button */
#submit::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border: 3px solid rgba(0, 123, 255, 0.6); /* Blue color with some transparency */
    border-radius: 50%;
    animation: ring-animation 2s linear infinite; /* Ring animation */
    z-index: 1;
}

/* Animation for the ring */
@keyframes ring-animation {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.5);
        opacity: 1;
    }
}

/* Make sure the page content fits in the viewport */
html, body {
    height: 100%; /* Full height */
    margin: 0; /* Remove any default margin */
    display: flex;
    flex-direction: column;
}

.container-fluid {
    flex: 1; /* Allow container to fill the remaining space */
}