.awesome-header {
    width: 100%;
    border: 1px solid black;
    /* Black border */
    box-sizing: border-box;
    /* Include padding and border in element's total width */
    overflow: hidden;
    /* Helps contain floats, though less critical with positioning */
    margin-bottom: 20px;
    /* Add some space below the header */
    position: relative;
    /* Crucial: Make this the positioning context for absolute children */
    /* Add padding-top to create space for the absolute utility bar */
    /* You may need to adjust this value based on the actual height of your utility bar */
    padding-top: 15px;
    padding:0px;
    /* Example: Adjust this value as needed */
}

/* New class to contain and position the utility elements */
.header-utilities {
    position: absolute;
    /* Position relative to the .awesome-header */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    /* Use flexbox to align children (translate left, buttons right) */
    justify-content: space-between;
    /* Push children to opposite ends */
    align-items: center;
    /* Vertically center items in this utility bar */
    padding: 5px 10px;
    /* Add some padding inside the utility bar */
    z-index: 10;
    /* Ensure it layers on top of other header content */
    /* Optional: Add a subtle background if needed for readability over gradient */
    /* background-color: rgba(255, 255, 255, 0.1); */
}

/* Style for the Google Translate element within the utility bar */
#google_translate_element {
    /* Remove float: left; if it was here */
    /* Flexbox on parent handles positioning */
}


/* Style for the container holding the buttons */
.float-right {
    /* Remove float: right; if it was here - Flexbox on parent handles positioning */
    margin-right: 0;margin-top: 20px;
    /* Ensure no extra margin if using flexbox gap */
    display: flex;
    /* Use flexbox for layout of buttons within this div */
    gap: 8px;
    /* Add space between the buttons */
    align-items: center;
    /* Vertically center buttons */
    flex-wrap: wrap;
    /* Allow buttons to wrap on smaller screens */
    justify-content: flex-end;
    /* Align buttons to the right within their container */
}

/* Your existing styles for the header content */
.header-top {
    background: linear-gradient(to right, #FF0000, #0000FF);
    /* Red to Blue gradient */
    display: flex;
    /* Use flexbox for alignment */
    align-items: center;
    /* Vertically align items in the center */
    padding: 10px 20px;
    /* Add padding inside the top section */
    /* Ensure padding-top is sufficient if not handled by .awesome-header padding-top */
    display: block;
    margin:0px;
}

.warning-icon {
    /* float: left; removed - Flexbox on parent (.header-top) handles alignment */
    height: 40px;
    /* Adjust height as needed */
    width: auto;
    /* Maintain aspect ratio */
    margin-right: 15px;
    /* Space between icon and text */
}

.warning-text {
    color: black;
    font-size: 2em;
    /* Adjust size as needed, use em for scalability */
    font-weight: bold;
}

.warning-text2 {
    color: #d0d0d0;
    /* Your specified color */
    font-size: 2em;
    /* Adjust size as needed, use em for scalability */
    font-weight: bold;
    margin-left: 20px;
    /* Add space between WARNING and Top Secret */
}


.header-bottom {
    text-align: center;
    /* Center the text horizontally */
    background-color: #d0d0d0;
    /* Your specified background color */
    color: #FF0000;
    /* Red text color */
    font-size: 3em;
    /* Adjust size as needed */
    font-weight: bold;
    padding: 10px 20px;
    /* Add padding */
    /* Adjusted text-shadow color slightly to be less strictly red */
    text-shadow: 2px 2px 4px rgba(108, 55, 55, 0.7);
    /* Shadow color (adjust values as needed) */
    word-break: break-word;
    /* Prevent text overflow on smaller screens */
    display:block;
    margin: 0px;
}

/* Basic responsiveness for smaller screens */
@media (max-width: 768px) {

    /* Adjust padding-top for the utility bar in smaller screens */
    .awesome-header {
        padding-top: 35px;
        /* Example adjustment */
    }

    .header-utilities {
        padding: 5px;
        /* Adjust padding */
        /* You might need to adjust flex-direction or alignment here if elements stack unexpectedly */
    }

    .float-right {
        gap: 5px;
        /* Adjust gap */
    }


    .header-top {
        padding: 8px 15px;
    }

    .warning-icon {
        height: 30px;
        margin-right: 10px;
    }

    .warning-text {
        font-size: 1.5em;
    }

    .warning-text2 {
        font-size: 1.5em;
        margin-left: 15px;
        /* Adjust space */
    }

    .header-bottom {
        font-size: 2em;
        padding: 8px 15px;
        /* Text shadow might need adjustment for clarity on different backgrounds */
        text-shadow: 1px 1px 3px rgba(108, 55, 55, 0.7);
    }
}

@media (max-width: 480px) {

    /* Adjust padding-top for the utility bar in smaller screens */
    .awesome-header {
        padding-top: 30px;
        /* Example adjustment */
    }

    .header-utilities {
        padding: 3px;
        /* Adjust padding */
        /* You might need to adjust flex-direction or alignment here if elements stack unexpectedly */
    }

    .float-right {
        gap: 3px;
        /* Adjust gap */
    }

    .header-top {
        padding: 5px 10px;
    }

    .warning-icon {
        height: 25px;
        margin-right: 8px;
    }

    .warning-text {
        font-size: 1.2em;
    }

    .warning-text2 {
        font-size: 1.2em;
        margin-left: 10px;
        /* Adjust space */
    }

    .header-bottom {
        font-size: 1.5em;
        padding: 5px 10px;
        /* Text shadow might need adjustment for clarity on different backgrounds */
        text-shadow: 1px 1px 2px rgba(108, 55, 55, 0.7);
    }
}