/* Force the navigation container to behave */
.hero-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #1a1d33 !important; /* Match your brand dark blue */
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    padding: 1rem 5% !important;
    clip-path: none !important; /* Removes the broken diagonal cut */
}

/* Ensure the logo stays proportional */
.hero-nav-left-box {
    flex: 0 0 150px !important; /* Set a fixed width for the logo area */
}

/* Force the nav links to sit in a line */
.div-block-5 {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    align-items: center !important;
    width: auto !important;
}

/* Remove the absolute positioning that is causing the overlap */
.hero-nav-right-box {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}