/* Apply the Inter font to the entire document */
body {
    font-family: 'Inter', sans-serif;
}

.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%;
}

select.form-control {
    appearance: auto; /* Ensures dropdown arrow is visible */
    -webkit-appearance: auto; /* For Safari */
    -moz-appearance: auto; /* For Firefox */
}

/* Select hover and checked styles */
/*select.form-control option:hover {
  background-color: #e82d3b;*/ /* Change to your desired hover color */
  /*color: white;*/ /* Text color on hover */
/*}

select.form-control option:checked {
  background-color: #e82d3b !important;*/ /* Change to your desired selected color */
  /*color: white;*/ /* Text color when selected */
/*}*/

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #e82d3b; /* Your hover color */
    color: white;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da; /* Bootstrap default border */
    height: 38px;
    padding: .375rem .75rem;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 30px;
    }

.banner-container {
    position: relative;
    text-align: center;
    color: white;
}

.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

#userRegister {
    font-weight: 800 !important;
}

#responseMessage {
    display: none;
    text-align: center;
/*    margin: 138px;*/
}

footer {
    background-color: #E82D3B;
    color: white;
}

footer a {
    text-decoration: none; /* Remove underline */
    color: white; /* Set text color to black */
}

footer a:hover {
    color: white; /* Ensure it stays black on hover */
    text-decoration: underline; /* Prevent underline on hover */
}

#imgpara {
    display: flex; /* Enable flexbox */
    align-items: center; /* Vertically align the logo and text */
    justify-content: flex-start; /* Align items to the left */
}

#footerpara {
    margin-top: revert; /* Remove any extra margin */
    font-size: 14px; /* Adjust text size, if needed */
}

#footer-links {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center the links horizontally */
    align-items: center; /* Align the links vertically */
    gap: 10px; /* Add space between the links */
}

#footer-links a:hover {
    text-decoration: underline !important;
}

header img, footer img {
    max-height: 60px;
}

.red-line {
    background-color: #E82D3B;
    height: 4px;
    width: 45px;
    margin: 5px auto;
}

#countrySpinner, #stakeSpinner, #chapterSpinner {
    display: none;
}

#submitbtn {
    background-color: #E82D3B;
    border-color: #E82D3B;
    color: #fff;
    border-radius: .4rem;
    padding: .375rem 1.25rem;
}

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

@media (max-width: 576px) {
    #imgpara {
        align-items: center; /* Center items horizontally */
        gap: 10px; /* Reduce the gap for small screens */
    }

    #footerpara {
        text-align: center; /* Center-align text for better readability */
    }
}

.banner-text h4 {
    display: none;
}

.banner-text h5 {
    display: none;
}

@media (max-width: 700px) {
    /* Change h1 to h4 */
    .banner-text h1 {
        display: none;
    }

    .banner-text h4 {
        display: block;
    }

    /* Lower the font size of the paragraph */
    .banner-text p {
        font-size: 10px;
    }
}

@media (max-width: 530px) {
    /*Change h4 to h5*/
    .banner-text h4 {
        display:none;
    }

    .banner-text h5 {
        display: block;
    }
}