/* /css/styles.css */

body {
    background-image: url('../images/bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1.text-center {
    color: white !important;  /* Ensure header text is white */
    font-weight: bold !important;
    font-family: 'Poppins', sans-serif !important; /* Apply the Poppins font */
}

#languageDropdown {
    color: white !important;  /* Ensure dropdown text is white */
    border-color: white !important; /* Ensure dropdown border is white */
    background-color: transparent !important; /* Make dropdown background transparent */
}

#languageDropdown .fas.fa-globe {
    color: white !important;  /* Ensure globe icon is white */
}

#languageDropdown:hover,
#languageDropdown:focus,
#languageDropdown:active {
    color: white !important;  /* Ensure text remains white on hover and focus */
    border-color: white !important; /* Ensure border remains white on hover and focus */
    background-color: transparent !important; /* Ensure background remains transparent */
}

#languageDropdown .dropdown-toggle::after {
    color: white !important; /* Ensure the dropdown arrow is white */
}

.btn-check-recall {
    font-size: 1.25rem; /* Increase font size */
    font-weight: bold;
    background: linear-gradient(to right, #4a90e2, #9013fe); /* Blue to purple gradient */
    color: white !important; /* Ensure text color stays white */
    border: none;
    padding: 10px 20px;
    transition: background 0.3s ease;
}

.btn-check-recall:hover {
    background: linear-gradient(to right, #9013fe, #4a90e2); /* Reverse gradient on hover */
}

.form-label {
    color: black !important;  /* Ensure form labels are black */
    display: block;  /* Ensure label is displayed as a block element */
    margin-bottom: 8px; /* Add some space below the label */
    font-weight: normal; /* Set font weight to normal */
}

.form-control {
    color: black !important;  /* Ensure input text is black for contrast against white background */
    background-color: white; /* White background for input field */
    border: 2px solid #4a90e2; /* Blue border to match the button's gradient */
}

.form-control::placeholder {
    color: rgba(0, 0, 0, 0.5); /* Gray placeholder color for visibility */
}