/* Hide the scrollbar for all elements */
::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

html {
    -ms-overflow-style: none;  /* Internet Explorer and Edge */
    scrollbar-width: none;     /* Firefox */
    overflow: auto;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling */
body {
    font-family:  Agdasima , sans-serif;
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    background-color: black; /* Set background color to white */
    display: flex;
    justify-content: center; /* Center content horizontally */
    min-height: 100vh; /* Full height of the viewport */
    background: url("/images/backgroundBA.png") ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
h2 {
  font-size: 28px;
  color: #FFF;
  font-weight: bold; /* Optional: change to 'normal' or 'lighter' */
  margin-bottom: 30px; /* Adds 20px above and below */
  margin-top: 30px;
}

/* Carousel container */
.background-carousel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1; /* Place behind the main content */
}

/* Background images */
.carousel-image {
    position: absolute; /* Stack images on top of each other */
    top: 60%; /* Center vertically */
    left: 62%; /* Center horizontally */
    width: auto;
    height: 80vh; /* Set height relative to viewport */
    object-fit: contain; /* Maintain aspect ratio */
    transform: translate(-50%, -50%); /* Center the image exactly */
    opacity: 0; /* Initially hide all images */
    transition: opacity 3s ease-in-out; /* Smooth fade effect */
}

/* Active image class */
.carousel-image.active {
    opacity: 0.1; /* Visible when active, adjust this for desired transparency */
}

/* Basic styles for the landing page container */
.landing-container {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container for the storyline text */
.storyline {
    text-align: center;
    width: 100%; /* Adjust width as needed */
    max-width: 800px;
}

/* Style for each line of text */
.line {
    font-size: 26px; /* Adjust font size as needed */
    opacity: 0; /* Initially hide the line */
    margin-bottom: 20px;
    line-height: 1.5; /* Spacing between lines */
    transition: opacity 1s ease-out;
    display: block;
}

/* Animation for the words in the line */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Each word gets an individual animation */
.line span {
    opacity: 0; /* Initially hide the words */
    display: inline-block;
    margin-right: 10px; /* Space between words */
    animation: fadeIn 0.5s forwards;
}

/* Optional: Style for any hidden lines after fade-out */
.line.hidden {
    display: none;
}

/* General Menu Styling */
.menu-container {
    max-width: 1000px; /* Set maximum width */
    width: 100%; /* Ensure it takes up full width within the max-width */
    margin: 0 auto; /* Center the container on the page */
    position: fixed; /* Fix the menu at the top */
    top: 0;
    left: 0;
    right: 0;
    background-color: black; /* White background to overlay other content */
    z-index: 1000; /* Ensure it stays above other content */
    display: flex;
    justify-content: center; /* Center the logo and nav items */
    align-items: center; /* Align items to the center vertically */
    height: 80px; /* Set menu height */
    padding: 0 30px; /* Padding on left and right */
}

/* Logo styling */
.logo {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.logo img {
    height: 60px;
    margin-right: 20px; /* Add space between logo and menu items */
}

/* Menu Items */
.menu-items {
    list-style: none;
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    padding: 0;
    margin: 0;
}

/* Adjusted Flex Properties */
.menu-item {
    position: relative; /* Ensure relative positioning for dropdowns */
    margin: 0 10px; /* Space between menu items */
}

.menu-item a {
    text-decoration: none;
    padding: 15px 20px;
    display: block;
    padding-left: 20px; /* Set left padding to 20px */
    color: rgba(255, 255, 255, 1); /* Text color */
    font-size: 22px !important; /* Font size for menu items */
}

.menu-item a:hover {
    color: rgba(208, 173, 104, 0.8); /* Light gray background on hover */
}

.Zoom:hover {
    transform: scale(1.05);
}

.Hype {
    color: #d0ad68 !important;
    border: 1px solid white;
    display: inline-block;
}

/* Dropdown Menu Styling */
.menu-item .dropdown-menu {
    display: none;
    position: relative; /* Change to relative positioning by default */
    top: 0; /* Keep dropdown aligned with parent */
    left: 0;
    background-color: black;
    list-style: none;
    padding: 10px 0;
    width: 100%; /* Make it full width of the parent */
    box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.2);
    padding-left: 10px; /* Set left padding for dropdowns */
}

/* Show dropdown on parent item active */
.menu-item.active > .dropdown-menu {
    display: flex; /* Use flex for better alignment */
    flex-direction: column; /* Stack items vertically */
}

/* Fix for nested dropdowns to stay in the same flow */
.menu-item .dropdown-menu .dropdown-menu {
    display: none;
    position: relative; /* Change to relative */
    left: 0; /* Align with parent dropdown */
    top: 0; /* Remove offset */
    width: 100%; /* Ensure it takes the full width of parent */
    padding-left: 0px; /* Set left padding for nested dropdowns */
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

/* Show nested dropdown on parent item active */
.menu-item.active > .dropdown-menu > .menu-item.active > .dropdown-menu {
    display: block;
    position: relative; /* Keep in same flow */
}

/* Mobile Menu */
.hamburger {
    position: absolute; /* Fix position on top of menu */
    right: 30px; /* Align it to the right */
    top: 20px; /* Center it vertically within the menu */
    display: none; /* Hide by default */
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
}

/* Mobile-specific styles */
@media (max-width: 1000px) {
    /* Hide desktop menu */
    .desktop-menu {
        display: none;
    }

    /* Show mobile menu with hamburger toggle */
    .mobile-menu {
        display: none;
        flex-direction: column; /* Stack items vertically */
        width: 100%;
        height: 100%; /* Limit the height of the mobile menu */
        position: fixed; /* Fix the mobile menu */
        top: 0; /* Start from the top */
        left: 0; /* Start from the left */
        background-color: rgba(10, 10, 10, 1); /* Semi-transparent background */
        z-index: 999; /* Ensure it's above other content */
        padding-top: 80px; /* Start items 80px from the top */
        padding-bottom: 80px;
        overflow-y: auto; /* Enable vertical scrolling */
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    .mobile-menu.active {
        display: flex; /* Show mobile menu when active */
    }

    .menu-item {
        margin-left: 0; /* No left margin for mobile items */
        width: 100%; /* Full width for mobile items */
        text-align: left; /* Align text to the left for mobile items */
    }

    .menu-items {
        justify-content: flex-start; /* Align menu items to the left */
    }

    .menu-item a {
        padding: 15px; /* Standard padding */
        text-align: left; /* Align text to the left for mobile items */
        padding-left: 20px; /* Set left padding for mobile items */
    }

    /* Ensure dropdowns in mobile push content down */
    .menu-item .dropdown-menu {
        position: relative; /* Keep relative positioning */
        display: none; /* Hide dropdowns initially */
        flex-direction: column;
        width: 100%;
        box-shadow: none; /* Remove shadow for mobile */
    }

    .menu-item.active > .dropdown-menu {
        display: flex; /* Show dropdowns when active */
    }

    /* Hamburger is visible in mobile */
    .hamburger {
        display: block; /* Show hamburger */
        z-index: 9999;
    }

    .logo {
        margin-right: auto; /* Align logo to the left */
        z-index: 99;
    }
    .logo img {
    height: 50px;
    margin-right: 10px; /* Add space between logo and menu items */
    margin-top: 25px;
}
}

/* Hide mobile menu and show desktop menu on larger screens */
@media (min-width: 1001px) {
    .menu-item.dropdown.main:hover > .dropdown-menu {
        display: block; /* Show dropdown on hover */
    }

    /* Change dropdown width for desktop only */
    .menu-item .dropdown-menu {
        position: absolute; /* Use absolute positioning for desktop */
        top: 100%; /* Position directly below the menu item */
        left: 0; /* Align to the left of the parent */
        width: 300px; /* Set the dropdown width to 250px */
    }

    .hamburger {
        display: none; /* Hide hamburger in desktop view */
    }

    .desktop-menu {
        display: flex;
        justify-content: flex-start; /* Align items to the left */
    }

    .mobile-menu {
        display: none; /* Hide mobile menu */
    }
}

.wrapper {
    display: flex;
    flex-direction: column; /* Stack menu and container vertically */
    justify-content: flex-start; /* Ensure content starts from the top */
    align-items: center; /* Center the content horizontally */
    width: 100%; /* Full width */
    height: 100%; /* Full viewport height */
    margin: 0;
}

/* Main container styling */
.container {
    width: 100%; /* Takes up 100% of the width */
    max-width: 1000px; /* Will max out at 900px */
    height: 100%; /* Adjust height based on menu and footer */
    display: flex; /* Use flexbox to manage internal layout */
    flex-direction: column; /* Arrange content in a column */
    align-items: center; /* Center content horizontally */
}

/* Content inside the container */
.main-content {
    text-align: left; /* Align text to the left */
    margin-top: 0; /* Remove any default margin on top */
    flex: 1; /* Allow content to grow and fill the available space */
}

/* Footer styling */
.footer {
    width: 100%;
    max-width: 900px;
    height: 30px;
    display: flex;
    position: fixed;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    bottom: 0; /* Push the footer to the bottom */
    background-color: #000;
}

/* Horizontal line in the footer */
.footer-line {
    width: 100%; /* Full width of the line */
    max-width: 900px; /* Max width of the line */
    border: none; /* Remove default border */
    border-top: 1px solid #d0ad68; /* Add a top border */
    margin: 0 auto; /* Center the line */
    margin-bottom: 5px; /* Space between line and text */
}

/* Footer text */
.footer-text {
    display: flex; /* Use flexbox for text alignment */
    justify-content: center; /* Space between text and icons */
    align-items: center; /* Align items vertically */
    width: 100%; /* Full width of the footer text */
    max-width: 900px; /* Limit max width */
    margin: 0 auto; /* Center the footer text */
}

/* Center copyright text */
.footer-text p {
    flex-grow: 1; /* Allow copyright text to take available space */
    text-align: center; /* Center the copyright text */
    margin: 0; /* Add margin to the left and right */
    color: #d0ad68 !important;
    line-height: 0px !important;
    font-size: 13px !important;
    text-decoration: none !important;
    font-style: italic !important;
}

/* Align social icons to the left and language icons to the right */
.social-icons {
    position: relative; /* Position absolutely within the footer */
    left: 10px; /* Align to the left */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center align vertically */
}

.language-icons {
    position: relative; /* Position absolutely within the footer */
    right: 20px; /* Align to the right */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center align vertically */
}

.social-icon, .lang-icon {
    height: 14px; /* Set height for icons */
    width: auto; /* Maintain aspect ratio */
    margin-left: 10px; /* Space between icons */
}

.social-icon {
    height: 19px; /* Set height for icons */
    width: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between icons */
}

FIN, SWE, ENG, HID {
    display: none; /* Hide all language tags by default */
}
.lang-icon {
    cursor: pointer; /* Change cursor to pointer for flags */
}