<style>
html {
            overflow: scroll;
        }

p {
    margin-bottom: 10px;
    }

    header {
    z-index: 9998; /* Set a high z-index value to ensure the footer stays on top */
		width: 100%;
    height: 150px;
    min-height: 150px;
		text-align: center;
		color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1); /* Add a text shadow with a glow effect */
		border: 0px solid black;
		font-family: 'helvetica', arial black;
		font-size: 3em;   
		background-size:cover;
    background-image: url('../images/MarineHeader.jpg');
   	background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    }

    #Logo {
    width: 110px;
    height: 110px;
    border: 2px solid white;
    position: absolute;
    top: 11px;
    left: 11px;
    background-image: url('../images/MarineLogo.jpg');
    background-size: cover;
    background-position: bottom right; /* Position the background image at the bottom right corner */
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }

    body {
    margin: 0;
    font-family: sans-serif, Helvetica;
    width: 100%;
    height: 1240px;
    background-color: white;
    background-repeat: no-repeat;
    background-size: 150%;
    background-position-x: 50%;
    }

    nav ul { /*Navigation Bar Container*/
    text-align: center;
    list-style: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 150px;
    padding: 0;
    font-weight: bold;
    width: 100%;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }
    
    nav ul li { /*Navigation Bar Element*/
    text-align: center;
    background-color: white;
    padding: 0px;
    width: 20%;
    height: 25px;
    position: relative;
    float: left;
    margin: 0;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }
    
    nav ul a { /*Navigation Bar Element Text*/
    text-align: center;
    vertical-align: middle;
    color: rgb(19, 33, 139);
    text-decoration: none;
    font-family: 'helvetica', arial black;
    font-size: 1em;
    width: 100%;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }
    
    nav ul li:hover { /*Navigation Bar Element Effect*/
    background-color: #cc9900;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }
    
    nav ul ul { /*2nd Level Navigation Bar Container*/
    display: none;
    position: relative;
    top: 100%;
    left: 50%;
    right: 0;
    margin: 0 auto; /* Center horizontally */
    width: 100%;
    padding-top: 30px;
    font-weight: normal;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }
    
    nav ul ul li { /*2n Level Navigation Bar Element*/
    float: none;
    width: 100%; /* Same width as parent */
    height: 25px;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }
    
    nav ul ul a { /*2n Level Navigation Bar Element Text*/
    line-height: 150%;
    padding: 0px;
    vertical-align: middle;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }
    
    nav ul li:hover > ul { /*2n Level Navigation Bar Element Effect*/
    display: block;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    }


    #Image1 {
    width: 80%;
    height: auto;
    aspect-ratio: 1706 / 411;
    text-align: center;
    position: absolute;
    top: 235px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/CSD_MeasureUp_Diagram.jpg');
    border: 2px solid rgb(255, 255, 255);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    }

    #Text1 {
    width: 40%;
    height: auto; /* Change height to auto to adjust according to content */
    text-align: center;
    padding: 0;
    position: absolute;
    top: calc(235px + 19.28vw + 32px);
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
    border: 0px solid black;
    font-family: 'helvetica', arial black;
    font-size: 1em;
    border: 2px dashed rgb(255, 255, 255);
    line-height: 1.5;
    color: rgb(19, 33, 139);
}
   
.middle-justified {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Ensure the text is vertically centered */
}

.bold-text {
    font-weight: bold;
}
   
    footer {
    width: 100%;
    text-align: left;
    border: 0px solid black;
    font-family: 'helvetica', arial black;
    font-size: 1em;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999; /* Set a high z-index value to ensure the footer stays on top */
    background-size: cover;
    background-image: url('../images/Footer.png');
    background-position: bottom right; /* Position the background image at the bottom right corner */
    }

    #LocationTag {
    width: 100%;
    text-align: center;
    color: white;
    font-family: 'helvetica', arial white;
    font-size: 1em;
    position: relative;
    top: 0px;
    right: 10px;
    }

    #ContactTag {
    width: 100%;
    text-align: center;
    color: white;
    font-family: 'helvetica', arial white;
    font-size: 1em;
    position: relative;
    top: 0px;
    left: 10px;
    }

    #TrmbLogo {
    width: 500px;
    height: 140px;
    transform: scale(0.35); /* Scale the logo */
    border: 2px solid white;
    position: fixed; /* Use fixed position to position relative to the window */
    bottom: -35px;
    right: -150px;
    background-image: url('../images/TrmbLogo.jpg');
    background-size: cover;
    background-position: bottom right;
    z-index: 9999;
    }

  </style>