/* Language Icon Button Styling */
.language-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: white;
}

.language-btn i {
    transition: color 0.3s ease;
}

.language-btn:hover i {
    color: #007bff; /* Change color on hover */
}

/* Language Dropdown Menu */
.language-dropdown {
    display: none;
    position: absolute;
    top: 100%; /* Adjust based on navbar height */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
.language-dropdown.show {
    display: block;
}





.language-dropdown button {
    background: none;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 1rem;
    display: block;
    width: 100%;
    text-align: left;
}

.language-dropdown button:hover {
    background-color: #f0f0f0;
}


/* Mobile adjustments */
@media (max-width: 768px) {
    .language-dropdown {
        max-width: 100%; /* Fully visible within the screen */
        right: 0; /* Keep natural alignment */

        transform: translateX(0); /* Prevents shifting off-screen */
    }
}

/* Base Styles */
body {
    font-family: Heebo, "Trebuchet MS", "Segoe UI", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000; /* Light gray background */
    text-align: center; /* Center the entire page content */
}

nav {
    background-color: #000; /* Dark gray background */
    color: #fff; /* White text */
    padding: 5px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    text-align: left;
}


nav ul {
    list-style-type: none;
    display: flex;
    justify-content: center; /* Align links to the center */
    gap: 20px; /* Space between links */
    margin: 0;
    padding: 0;
}

nav li {
    display: inline;
}

nav a {
    color: #fff; /* White text for footer links */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the text bold */
    transition: color 0.3s, border-bottom 0.3s; /* Smooth transition for hover effects */
    border-bottom: 1px solid transparent; /* Invisible border to create spacing */
}

nav a:hover {
    color: #3498db; /* Change color on hover */
    border-bottom: 1px solid #fff; /* White border on hover */
}

@media (max-width: 768px) {
    nav ul {
    gap: 10px;
    }
}

/* Container for Main Content */
.container {
    margin-top: 20px; /* Push content below the fixed nav */
    padding: 20px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent; /* White background for content container */

}

/* Heading Styles */
h1, h2, h3 {
    color: #fff; /* Dark gray for headings */
}

/* Paragraph Text */
p {
    color: #666; /* Medium gray for paragraph text */
}



#flash-messages {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 90%; /* Ensures the message doesn’t exceed the viewport width */
    z-index: 1000; /* Ensure it appears above other content */
}

.flash-message {
    background-color: #f8d7da; /* Default background color for error messages */
    color: #721c24; /* Default text color for error messages */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px; /* Space between multiple flash messages */
    opacity: 1;
    transition: opacity 0.5s ease-out, visibility 0s 0.5s;
}

.flash-message.fade-out {
    opacity: 0;
    visibility: hidden; /* Hide element after fading out */
}

/* Optional: Styles for different flash message types */
.flash-message.success {
    background-color: #dfffd3; /* Mellowed neon green with 60% opacity */
    color: #000000; /* Black text color for contrast */
    border: #dfffd3; /* Slightly darker green border with 80% opacity */
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.3); /* Softer glow effect */
}




.flash-message.error {
    background-color: #f8d7da;
    color: #721c24;
}




/* Button Styles */
.btn {
    background-color: #343a40; /* Gray button background color */
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #495057; /* Darker gray on hover */
}



/* Responsive Design */
@media (max-width: 768px) {
    nav {
        text-align: center;
    }

    nav a {
        margin-right: 5px;
    }

    .container {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 5px;
    }

    .btn {
        padding: 8px 16px;
    }
}



.list-unstyled {
    list-style: none; /* Removes the bullet points */
    padding: 0;       /* Optional: removes the padding */
    margin: 0;        /* Optional: removes the margin */
}



/* Additional Footer Styles */
.footer-container {
    max-width: none; /* Override max-width */
    margin: 0; /* Remove any margin */
    padding: 20px 0; /* Add desired padding */
    background-color: #000; /* Black background for footer */
    color: #fff; /* White text in footer */
    margin-top: 20px; /* Space above footer */
}



.footer-link {
    color: #fff; /* White text for footer links */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the text bold */
    transition: color 0.3s, border-bottom 0.3s; /* Smooth transition for hover effects */
    border-bottom: 1px solid transparent; /* Invisible border to create spacing */
}

.footer-link:hover {
    color: #3498db; /* Change color on hover */
    border-bottom: 1px solid #fff; /* White border on hover */
}