/* Universal components */
nav#header_menu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-family: 'Segoe UI', Verdana, 'Open Sans', Helvetica, Arial, sans-serif;
    background-image: url('../images/');
    background-color: #ffffff;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex; /* Enables Flexbox layout */
    align-items: center; /* Centers items vertically */
    padding: 0 20px; /* Add padding to ensure content isn't flush with edges */
}

/* Company Logo */
div#homebutton {
    width: 80px;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 903;
}

div#homebutton a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/logo-image-mobile.png) left center no-repeat;
    background-size: contain;
    text-decoration: none;
}

/* Center the header title */
#header_titles {
    text-align: left;
    margin-left: 0px; /* Space between the logo and titles */
    color: #336699; /* Font color */
    font-weight: bold; /* Make the font bold */
}

/* Container for right buttons */
#rightButtonContainer {
    display: flex; /* Enables Flexbox layout for buttons */
    margin-left: auto; /* Pushes the container to the far right */
    align-items: center; /* Centers items vertically */
}

/* Right button styling */
#rightButton, #emailButton {
    display: inline-block; /* Makes the anchor behave like a button */
    margin-left: 10px; /* Adds margin to the left of each button for spacing */
    padding: 10px 20px; /* Adds padding inside the button */
    background-color: #336699; /* Button background color */
    color: white; /* Text color */
    border: none; /* Removes default border */
    border-radius: 4px; /* Rounds the corners */
    cursor: pointer; /* Changes cursor to pointer on hover */
    transition: transform 0.3s ease; /* Adds a smooth transition for the transform property */
    font-size: 12px; /* Smaller font size */
    text-decoration: none; /* Removes underline from the anchor text */
    text-align: center; /* Centers text inside the anchor */
    line-height: 1; /* Ensures the button has consistent vertical padding */
}

#rightButton:hover, #emailButton:hover {
    background-color: #336699; /* Darker background on hover */
    transform: translateY(-3px); /* Moves the button 3px upwards on hover */
}

/* Phone Version */
@media only screen and (max-width: 768px) {
    /* Hidden elements in phone version */
    div#phonebutton,
    div#homebutton a {
        display: none;
    }

    a#atoclink {
        display: none;
    }
    a#phonemenulink {
        display: none !important;
    }

    nav#header_menu {
        position: fixed;
        display: none;
        top: 7rem;
        font-size: calc(0.832rem * 1.2);
        z-index: 1000;
        width: 100%;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
    }

    /* Adjustments for header titles */
    #header_titles {
        text-align: center;
        color: #013c73;
        font-weight: bold;
    }

    /* Style for individual titles */
    #header_titles > div {
        margin-bottom: 5px; /* Add space between the titles */
    }
} /* @media */

/* Desktop version */
@media only screen and (min-width: 769px) {
    a#phonemenulink {
        display: none !important;
    }

    #rightButtonContainer {
        display: flex; /* Enables Flexbox layout for buttons */
        margin-left: auto; /* Pushes the container to the far right */
        align-items: center; /* Centers items vertically */
    }

    /* Company Logo */
    div#homebutton {
        width: 80px;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 903;
    }

    div#homebutton a {
        display: block;
        width: 100%;
        height: 100%;
        background: url(../images/logo-image-mobile.png) left center no-repeat;
        background-size: contain;
        text-decoration: none;
    }

    /* Center the header title */
    #header_titles {
        text-align: left;
        margin-left: 5px; /* Space between the logo and titles */
        color: #336699; /* Font color */
        font-weight: bold; /* Make the font bold */
    }
} /* @media */