@charset "UTF-8";
/* Background Container */
.layer-1 {
    margin-top: 0px;
}

.background-container {
    position: relative;
    top: 60;
    width: 1300px;
    margin: 0 auto; /* Center the container horizontally */
    height: 100%;
    z-index: -2; /* Ensure it is behind all other elements */
}

/* Background Slides */
.background-slide {
    position: absolute;
    top: 0px;
    left: 0;
    width: 1300px;
    height: auto;
    background-size: cover;
    background-position: center;
    transform: translateY(70%);
    transition: transform 1s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.background-slide.active {
    transform: translateY(0);
}

/* Hamburger Menu */
.hamburger-menu {
    display: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1000;
}

.hamburger-menu span {
    display: block;
    width: 25px; /* Width of the bar */
    height: 3px; /* Thickness of the bar */
    background-color: grey; /* Change color here */
    margin: 5px 0; /* Space between bars */
    transition: background-color 0.3s ease; /* Optional: Smooth transition for hover effects */
    z-index: 1000;
}

/* Optional: Change color on hover */
.hamburger-menu:hover span {
    background-color: lightgrey; /* Change to a lighter shade on hover */
}

/* Mobile Menu */
.mobile-menu-container {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    margin-top: 6px;
    left: 0;
    width: 100%;
    height: 90%;
    background: rgba(0,0,0,0.76);
    z-index: 1000;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* When active, show the menu */
.mobile-menu-container.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.mobile-menu-container ul {
    list-style: none;
    padding: 20px;
    margin: 0;
    margin-top: -10px;
}

.mobile-menu-container ul li {
    margin: 1px 0;
    text-align: left;
}

.mobile-menu-container ul li a {
    color: white; /* Ensure links are visible */
    text-decoration: none;
    font-size: 0.9em;
    padding: 10px 20px;
    display: block; /* Make links take up full width */
    font-family: 'Poppins', sans-serif;
}

.mobile-menu-container ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Highlight on hover */
}
/* Mobile Menu Links */
.mobile-menu-container a {
    display: block;
    color: white;
    text-decoration: none;
    padding-left: 80px;
    padding-bottom: 5px;
    padding-top: 0px;
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-container a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Menu Overlay */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.menu-overlay.show {
    display: block;
}

/* Submenu Styling */
.sub-menu {
    display: none; /* Initially hidden */
    list-style: none;
    padding-left: 20px;
    margin: 10px 0;
}

.sub-menu li a {
    font-size: 1em;
    text-decoration: none;
    color: white;
    display: block;
    padding: 5px 0;
}

.sub-menu li a:hover {
    color: rgba(255, 255, 255, 0.7); /* Hover effect for sub-links */
}

/* Show sub-menu when toggled */
.sub-menu.show {
    display: block;
}

/* Style for "PROJECTS" (non-clickable) */
.non-clickable {
    color: white; /* Match link text color */
    font-size: 0.9em; /* Adjust to match other links */
    font-family: 'Poppins', sans-serif; /* Match font */
    padding: 10px 20px; /* Consistent spacing */
    display: block; /* Ensure it's block-level for proper layout */
    cursor: pointer; /* Indicate it's interactive */
}
.non-clickable:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Add hover effect */
}


/* Media Queries for Mobile and Desktop */

@media screen and (max-width: 768px) {
    .hamburger-menu {
        display: block; /* Show hamburger on mobile */
    }

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

@media screen and (min-width: 769px) {
    .mobile-menu-container {
        display: none; /* Hide mobile menu on desktop */
    }

    .menu-overlay {
        display: none; /* Hide overlay on desktop */
    }
}

/* Footer Styles */
.footer {
    background-color: #000000;
    color: white;
    text-align: center;
    padding: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
}

.footer-mobile {
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    font-size: 10px;
    text-align: center;
}

    .footer-mobile {
        display: flex; /* Show mobile footer */
    }
}

@media screen and (max-width: 768px) {
    .footer-desktop {
        display: none; /* Hide desktop footer on mobile */
    }

    .footer-mobile {
        display: flex; /* Show mobile footer */
    }
}

@media screen and (min-width: 769px) {
    .footer-desktop {
        display: flex; /* Show desktop footer */
    }

    .footer-mobile {
        display: none; /* Hide mobile footer */
    }
}
/* Mobile-Specific Styles */
@media screen and (max-width: 768px) {
    .layer-text {
        display: none !important; /* Hide headline and text */
    }

    .custom-cursor {
        display: none !important; /* Disable animated cursor */
    }

    body {
        cursor: default !important; /* Ensure default cursor is applied */
    }
}
n