:root {
    --primary-color: #29283F; /* Deep Midnight Blue */
    --secondary-color: #4280EC; /* Blue */
    --accent-color: #DC7287; /* Pinkish Red */
    --text-color-light: #FFFFFF; /* White */
    --text-color-dark: #444444; /* Dark Gray */
    --highlight-color: #F5F5F5; /* Light Gray */
    --box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    --font-family: 'Roboto', sans-serif;
}

/* Header Styles */
nav ul li a {
    color: var(--text-color-light); /* White */
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

nav ul li a:hover {
    background-color: var(--accent-color); /* Pinkish Red */
    color: var(--text-color-light); /* White */
    height: fit-content;
}

/* Logo Styling */
.brand-logo img.logo-img {
    height: 50px; /* Adjust based on the logo's desired height */
    max-width: 100%; /* Ensures responsiveness */
    vertical-align: middle; /* Aligns the logo vertically */
    margin-right: 10px; /* Adds spacing between the logo and navigation links */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.brand-logo img.logo-img:hover {
    transform: scale(1.1); /* Slightly enlarges the logo on hover */
}
.form-container label{
    font-size: 50px;
    margin-bottom: 5rem ;
}
/* Responsive Design */
@media screen and (max-width: 992px) {
    .nav-wrapper ul {
        display: none; /* Hides nav links on smaller screens */
    }
}


@media (max-width: 768px) {
    nav ul {
        display: none; /* Hide nav links on mobile */
    }

    .sidenav-trigger {
        display: inline-block;
    }
}

/* Responsive Footer */
@media (max-width: 768px) {
    footer .container {
        flex-direction: column;
        text-align: center;
    }

    footer .quick-links ul {
        justify-content: center;
    }

    footer .social-icons {
        justify-content: center;
        margin-top: 20px;
    }
}