/* desktop-header.css */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding-top: 80px; /* Initial padding to prevent content from being hidden behind the fixed header */
    transition: padding-top 0.3s ease; /* Smooth transition when padding changes */
}

header#desktop-header {
	font-family: 'Switzer Variable', sans-serif;
    background-color: #fff;
    padding: 20px 0; /* Initial padding */
    width: 100%;
    transition: padding 0.3s ease; /* Smooth transition for padding changes */
    position: fixed; /* Make the header fixed at the top */
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure the header stays above other elements */
}

/* Scrolled Header Styles */
header#desktop-header.scrolled {
    padding: 10px 0; /* Reduced padding when scrolled */
    /* Removed box-shadow to eliminate shadow when scrolled */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

body.scrolled {
    padding-top: 60px; /* Adjust body padding to match reduced header height */
}

/* Container */
.container {
    width: 100%;
    max-width: 1500px; /* Current max-width for large screens */
    margin: 0 auto;    /* Center the container */
    padding: 0 5vw;    /* Responsive horizontal padding */
}

/* Header Top */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically centers logo and Lottie */
    margin-bottom: 20px;
    flex-wrap: nowrap; /* Prevent items from wrapping and stretching */
}

/* Logo and Lottie */
.logo-wrapper img,
.lottie-wrapper lottie-player {
    max-height: 50px;
    height: auto; /* Maintain aspect ratio */
    width: auto;  /* Prevent stretching by auto width */
    max-width: 100%; /* Ensure the image doesn't exceed its container */
}

/* Positional Adjustments */
.logo-wrapper {
    /* Ensure the container only takes the space of the logo */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    max-width: 100%;
    flex-shrink: 0;
    
    /* Optional: Shift logo if needed */
    transform: translateX(-10px);
}

.lottie-wrapper {
    /* Shift Lottie 2px to the right and 15px up */
    transform: translateX(2px) translateY(-15px);
}

/* Navigation Menu */
.menu ul {
    display: flex;
    justify-content: space-between; /* Evenly distribute menu items */
    align-items: center;
    list-style: none;
    gap: 20px; /* Consistent 20px gap between menu items */
    padding-left: 0;
    padding-right: 0;
    /* Removed overflow-x: auto; to eliminate scrollbar */
    
    /* Removed border-bottom to eliminate border under the menu */
    border-bottom: none;
}

.menu li {
	font-family: 'Switzer Variable', sans-serif;
    font-size: 22px;
    color: #BDBDBD;
    font-weight: 400;
    white-space: nowrap; /* Prevent text from wrapping */
    cursor: pointer; /* Indicate interactivity */
    transition: color 0.3s ease; /* Smooth hover transition */
}

.menu li a {
    text-decoration: none;
    color: inherit; /* Inherit color from li */
    display: block; /* Make the entire area clickable */
}

.menu li:hover {
    color: #ff6600; /* Hover effect */
}

/* Add this to your CSS file to style the active menu item */
.menu li a.active {
    color: #ff6600; /* Highlight color */
    font-weight: 500; /* Make it stand out */
}

/* Responsive Adjustments */

/* Hide Desktop Header on Mobile Devices */
@media (max-width: 768px) {
    #desktop-header {
        display: none; /* Hide desktop header on mobile */
    }
}

/* Show Desktop Header on Larger Screens */
@media (min-width: 769px) {
    #desktop-header {
        display: block; /* Ensure desktop header is visible on desktop */
    }
}

/* Tablet View */
@media (max-width: 1024px) and (min-width: 769px) {
    .header-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .menu ul {
        justify-content: center; /* Center the menu items */
        flex-wrap: wrap; /* Allow items to wrap to the next line if necessary */
        gap: 15px; /* Reduced gap for smaller screens */
        
        /* Ensure no border-bottom remains */
        border-bottom: none;
    }

    /* Adjust positional shifts for tablet */
    .logo-wrapper {
        transform: translateX(-5px); /* Shift logo less on smaller screens */
    }

    .lottie-wrapper {
        transform: translateX(14px) translateY(-7.5px); /* Adjust Lottie shift proportionally */
    }
}

/* Large Screen View (1920px and above) */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px; /* Cap the container width at 1600px for larger screens */
    }

    /* Optional: Increase padding if necessary */
    .container {
        padding: 0 4vw; /* Slightly reduced padding to accommodate larger max-width */
    }
    
    /* Scale Menu Items and Gaps */
    .menu ul {
        gap: 25px; /* Increased gap for larger screens */
    }

    .menu li {
        font-size: 24px; /* Increased font size for better readability */
    }

    /* Adjust positional shifts for large screens */
    .logo-wrapper {
        transform: translateX(-12px); /* Shift logo more to the left */
    }

    .lottie-wrapper {
        transform: translateX(135px) translateY(-20px); /* Shift Lottie more to the right and up */
    }
}

/* Extra Large Screen View (Above 2560px) */
@media (min-width: 2560px) {
    .container {
        max-width: 1600px; /* Ensure max-width remains at 1600px */
    }

    /* Further Scale Menu Items and Gaps if desired */
    .menu ul {
        gap: 30px; /* Further increased gap */
    }

    .menu li {
        font-size: 26px; /* Further increased font size */
    }

    /* Adjust positional shifts for extra large screens */
    .logo-wrapper {
        transform: translateX(-15px); /* Further shift logo to the left */
    }

    .lottie-wrapper {
        transform: translateX(135px) translateY(-25px); /* Further shift Lottie to the right and up */
    }
}