@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Amiko:wght@400;600;700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amiko:wght@400;600;700&family=Flamenco:wght@300;400&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* General Navbar Styling */
.navigation-bar {
    display: flex; /* Flexbox for alignment */
    justify-content: space-between; /* Space between logo and links */
    align-items: center; /* Align items vertically */
    width: calc(100% - 40px); /* Reduce total width slightly for padding */
    margin: 0 auto; /* Center the navbar horizontally */
    height: 80px; /* Height of the navbar */
    padding: 0 20px; /* Add some horizontal padding */
}

.logo {
    max-height: 80px; /* Scale the logo for better fit */
    max-width: 100%;
    margin-top: 20px;
}

.navigation-bar a {
    margin-left: 20px; /* Spacing between links */
    text-decoration: none; /* Remove underline from links */
    color: #A2A2A2;
    font-size: 16px; /* Link font size */
    line-height: 80px; /* Vertically align links */
    font-family: 'Amiko', sans-serif;
}

.navigation-bar a:hover {
    color: #F3ABB6; /* Change color on hover */
    transition: color 0.5s; /* Smooth transition for hover */
    font-weight: bold;
}

.navigation-bar a.active {
    color: #F3ABB6; /* Highlight active link */
    font-weight: bold;
}

/* Hamburger Menu Styling */
.hamburger {
    display: none; /* Hide on larger screens */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .navigation-bar {
        flex-direction: column; /* Stack logo and links */
        align-items: center; /* Center all items */
    }

    .nav-links {
        display: none; /* Hide links by default */
        flex-direction: column; /* Stack links vertically when visible */
        width: 100%; /* Full width for links */
        gap: 10px; /* Adjust spacing for smaller screens */
    }

    .nav-links.active {
        display: flex; /* Show links when hamburger menu is clicked */
    }

    .hamburger {
        display: block; /* Show hamburger menu on smaller screens */
    }
}

/* Page fade-out effect */
body {
    opacity: 1; /* Start fully visible */
    transition: opacity 0.5s ease-in-out; /* Smooth transition for fade-out */
}

body.fade-out {
    opacity: 0; /* Fades out */
}

/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown button styling (matches nav links) */
.dropbtn {
    background: none;
    border: none;
    color: #A2A2A2;
    font-size: 16px;
    font-family: 'Amiko', sans-serif;
    line-height: 80px;
    cursor: pointer;
    margin-left: 20px;
}

.dropbtn:hover {
    color: #F3ABB6;
    font-weight: bold;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
    top: 80px; /* aligns dropdown below navbar */
}

/* Dropdown links */
.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Show dropdown on hover (desktop) */
.dropdown:hover .dropdown-content {
    display: block;
}