/*/////////HEADER//////////////////////*/
header {
    background-color: #003366;
    padding: 1rem;
}

.header .logo {
    display: flex;
    justify-content: flex-start; /* Align logo to the left */
    align-items: center;
    width: auto; /* Allow the logo container to take its natural size */
}

    .header .logo img {
        width: 80px;
    }

.header .text-left {
    font-size: 2.5rem; /* Increased size for desktop */
    font-weight: bold;
    margin-right: 1rem; /* Adjust spacing between TESCORP and tagline */
}

.header .text-right {
    font-size: 1.25rem;
    white-space: nowrap; /* Ensure it stays on one line */
    margin-left: 0; /* Remove left margin to push it left */
}

/* Desktop styling (min-width: 768px) */
@media (min-width: 768px) {
    .header nav {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Align all items (logo, text) to the left */
        width: 100%;
        max-width: 1334px;
    }

    /* Adjust logo positioning */
    .header .logo {
        margin-right: 1rem; /* Add space between the logo and TESCORP text */
    }

    /* Ensure TESCORP text and Triumvirate text align to the left */
    .header .text-left,
    .header .text-right {
        display: flex;
        justify-content: flex-start; /* Align both texts to the left */
        flex-grow: 0; /* Avoid growing to take up remaining space */
    }

    /* Always show menu items on desktop */
    .hamburger-menu {
        display: flex;
        max-height: none;
        opacity: 1;
        flex-direction: row; /* Display items in a row for desktop */
        justify-content: flex-end; /* Align the menu items to the right */
        visibility: visible;
        width: 50%; /* Take more space for the nav */
    }

        .hamburger-menu a {
            margin: 0 1rem; /* Add space between each menu item */
            padding: 0.5rem 1rem;
            background-color: transparent; /* Set background color to orange */
            color: white; /* White text color */
            border: 1px solid white;
            border-radius: 4px;
            text-align: center;
        }

        .hamburger-menu .btn:hover {
            margin: 0 1rem; /* Add space between each menu item */
            padding: 0.5rem 1rem;
            color: white; /* White text color */
            background-color: #FF6600;
            border: 1px solid white;
            text-align: center;
        }

    .hamburger {
        display: none; /* Hide hamburger icon on desktop */
    }
}

/* Mobile styles remain the same */
@media (max-width: 768px) {
    .btn:hover {
        background-color: #FF6600; /* Hover effect on desktop */
        color: #ffffff;
    }

    .header .logo {
        justify-content: center;
        margin-bottom: 1rem;
    }

    .header .text-left {
        font-size: 3.25rem;
        text-align: center; /* Center the TESCORP text */
        width: 100%; /* Ensure it takes full width */
        margin-top: 0.10rem;
        margin-bottom: 0.20rem;
        /*margin-right: 2rem;*/
    }

    .header .text-right {
        font-size: 0.75rem;
        text-align: center; /* Center the tagline text */
        width: 100%; /* Ensure it takes full width */
        margin-top: 0.75rem;
    }

    .header .logo {
        justify-content: center;
        margin-bottom: 1rem; /* Space between logo and text */
    }

    .hamburger {
        display: block; /* Ensure hamburger menu appears */
    }

    .hamburger-menu a {
        display: block; /* Ensure block-level behavior for full width */
        width: 100%; /* Occupy the full width of the screen */
        margin: 0.5rem 0; /* Add vertical margin for spacing */
        padding: 1rem 0; /* Add padding for better touch targets */
        text-align: center; /* Center the text */
        background-color: #FF6600; /* Set background color to orange */
        color: white; /* White text color */
        border: 1px solid black; /* Black border around each item */
        box-sizing: border-box; /* Ensure border is included in the width */
    }

    /* Hamburger Menu - initial hidden state */
    .hamburger-menu {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
        flex-direction: column;
        width: 100%; /* Ensure it takes full width when opened */
        margin-top: 1rem; /* Add margin between the hamburger button and menu */
    }

        /* When the menu is shown */
        .hamburger-menu.show {
            max-height: 300px;
            opacity: 1;
        }

    /* Style the hamburger menu icon */
    .hamburger {
        font-size: 2rem;
        cursor: pointer;
        width: 100%;
        text-align: center;
        margin-top: 2rem;
        color: #ffffff;
    }
}