/*Borders*/
    div, header, footer, main, * {
        border:0px solid black;
    }

    header {
        position:sticky!important;
        z-index:30;
        top:0;
    }

    header div{
        vertical-align:middle;
    }

    #topnav {
        padding:1% 0;
        display:none;
    }

    #logo {
        width:32.9%;
        overflow:hidden;
        padding:1.5% 0;
    }

    #logo img {
        width:50%;
    }

header div.twothirdswidth:has(#header-nav){
    justify-content: right;
}

    header div.twothirdswidth:has(#header-nav) div {
    vertical-align: middle;
}

   header div.twothirdswidth:has(#header-nav) div.fifthwidth {
       padding:5px 0;
   }

    header div.twothirdswidth:has(#header-nav) div.fifthwidth button {
        width: 85%;
    }
    
    header button {
        background:white;
        color:black;
    }

#header-nav li:hover {
    color:var(--red);
    opacity:0.8;
}


#header-nav {
    display: flex;
    justify-content: flex-start; /* keeps items close together */
    align-items: center;
    gap: 8px; /* spacing between items */
    padding: 5px 0;
}

    #header-nav li a {
        display: block;
        padding: 8px 10px;
        text-transform: uppercase;
        letter-spacing: 0.1vw;
        font-size: clamp(0.875rem, 0.5vw + 0.8rem, 1rem);
        text-decoration: none;
    }
    
    ul#menu-primary-menu, ul#menu-primary-menu-1  {
        padding:0!important;
        display:flex!important;
    }

            nav li {
                list-style-type: none;
            }

#menu-toggle {
    display: none; /* Hide on desktop by default */
    align-items: center;
    justify-content: flex-end; /* Keeps icon to the right */
    width: 49.5%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Base styles for the SVG lines */
.line {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
    stroke: #000; /* Set your color here */
}