:root {
    --primary-color: #08ffff; /* Change this to your desired primary color */
    --secondary-color: #ffec21; /* Change this to your desired secondary color */
}

/* Override Bootstrap variables with the custom colors */
body {
    --bs-primary: var(--primary-color);
    --bs-secondary: var(--secondary-color);
}

/* .login-body {
    background-image: url("../images/main-background.png");
    background-size: cover;
    background-position: center;
    display: flex;
    height: 100vh;
} */

.container-fluid {
    background-image: url("../images/main-background.png");
    background-size: cover;
    background-position: center;
    display: flex;
    height: 100vh;
    color: antiquewhite;
    font-family: poppins;
}

/* Centered text styling */
.centered-text {
    font-size: 2em;
    text-align: center;
}

/* Optionally, customize other Bootstrap components using the variables */
/* Example: Change the background color of buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-color: #025c56;
    color: #050505;
}

.btn-primary:hover {
    background-color: #025c56;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-secondary {
    background-color: var(--secondary-color);
}

header {
    /* background-color: #333; Change the background color as needed */
    text-align: center;
    padding: 20px;
}

.logo-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the logo */
}
.header-text {
    color: #9c9c9c;
    font-weight: 500;
}

.header-text:hover {
    color: var(--primary-color);
}

.logo-text {
    color: #ececec;
}

.logo-text:hover {
    color: var(--primary-color);
}

.logo-container {
    text-align: center; /* Center the text within the container */
}

.logo-img {
    height: 56px; /* Adjust as needed */
    width: 250px; /* Adjust as needed */
    display: block; /* Ensure the image is a block-level element */
    margin-bottom: 5px; /* Add margin bottom for spacing */
}

.feature-images {
    float: left;
    margin-right: 10px; 
}

.mascot-img {
    margin-left: 10%;
}

.disabled-text {
    color: #999; /* Set text color to a lighter shade */
    opacity: 0.6; /* Set opacity to make text appear faded */
}