body, p, h1, ul {
    font-family: 'Montserrat',serif;
}

body
{
    background-color:#ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main
{
    background-color:#ffffff;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#container
{
    margin-top: 1vw;
    width: 90%;
    background:#ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#header
{
    background:#ffffff0;
    padding: 10px;
    border-bottom:1px solid white;
}

.image-wrapper {
    display: flex; /* Enables flexbox layout [2] */
    justify-content: center; /* Centers the items horizontally [3] */
}

.top-image {
    object-fit: cover;
    object-position: center top;
}


.myimage {

    object-fit: fill;
    object-position:center top;
}

.mybox {
    border:2px solid #ccc;
    padding:0 10px 0 10px;
    margin:0px;
    font-style:italic;
}
#header h1 { margin: 0; font-family: 'Montserrat', sans-serif; font-weight:600;}

#navigation {
    width: 100%;
    background: #ffffff;
}

#navigation ul {
    margin: 0;
    padding: 0;
    display: flex; /* Makes the list a flexible container */
    justify-content: center; /* Centers the navigation links horizontally */
}

#navigation ul li {
    list-style-type: none;
}

#navigation li a {
    display: block;
    padding: 5px 10px;
    color: #173e7d;
    text-decoration: none;
    border-right: 1px solid #fff;

    font-size: 2em;       /* Scales the text up to be similar to an H1 */
    font-weight: bold;    /* Makes the text bold */
}

#navigation li a:hover {
    background: #e9eef7;
}

/* "Order Delivery" click dropdown: the <li> is the positioning anchor,
   the menu is a plain <div> (not a nested ul/li) so it doesn't get swept
   up by the #navigation ul / #navigation ul li rules above. */
#navigation li.dropdown {
    position: relative;
}

#navigation li.dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    background: #ffffff;
    min-width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 20;
}

/* Shown only while the toggle link has added the "open" class via JS */
#navigation li.dropdown.open .dropdown-menu {
    display: flex;
}

#navigation li.dropdown .dropdown-menu a {
    font-size: 1em;
    font-weight: normal;
    white-space: nowrap;
    padding: 10px 15px;
    border-right: none;
    border-bottom: 1px solid #eee;
}

#navigation li.dropdown .dropdown-menu a:last-child {
    border-bottom: none;
}

.image-reveal-container {
    /* Set a flexible height so the container grows/shrinks with the browser */
    width: 100%;
    height: 50vh; /* Takes up 50% of the viewport height */

    /* Define your image source */
    background-image: url('images/hero_image.jpg'); /* Replace with your image URL */

    /* Cover the entire background area and scale proportionally without stretching */
    background-size: cover;

    /* Anchor the image to the top so it reveals downward as the element grows */
    background-position: top;

    /* Prevent the image from repeating or tiling */
    background-repeat: no-repeat;
}



#content
{
    color:#000044;
    clear: left;
    padding: 20px;

    /* New properties to center everything */
    display: flex;             /* Enables Flexbox layout [2] */
    flex-direction: column;    /* Stacks elements vertically from top to bottom [3] */
    align-items: center;       /* Centers the stacked items horizontally [4] */
    text-align: center;        /* Centers the inline text within those elements [5] */

}

#content h2
{
    color:#000044;
    font-size: 200%;
    margin: 0 0 1vw 0;
    font-family: 'Cabin', sans-serif;
    font-weight:600;
}

#content h4
{
    color:#000044;
    font-size: 80%;
    margin: 0 0 1vw 0;
    font-style: italic;

}