* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* padding and border in width and height */
}

/* Body styles */
body {
    font-family: Arial, sans-serif; /*  font  */
}

/* Header styles */
header {
    position: relative; /* position to relative */
}

/* Horizontal navigation bar */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex; 
    justify-content: center; /* flex items are horizontally */
    position: fixed; /* navigation bar at the top */
    width: 100%; /* navigation bar  width */
    background-color: #C3C3C4; /*  background color */
    z-index: 999; /* navigation bar appears above other content */
}

nav li {
    margin: 0 10px; /* Add margin between each list item */
}

nav li:first-child a {
    background-color: #2E69A0; /* Adjust background color for the first navigation item */
    color: #ffffff; /* Adjust text color for the first navigation item */
}

nav li a {
    display: block;
    padding: 14px 16px; /* Add padding to the link text */
    text-decoration: none;
    color: #2E69A0; /* Adjust link text color */
    background-color: transparent; /* Adjust background color for each link */
}

/* Change background color on hover */
nav li a:hover {
    background-color: #ffffff; /* White background color on hover */
}

/* Grid layout */
.grid-wrapper {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) repeat(4, minmax(0, 175px)) minmax(0px, 1fr); /* Adjusted template-columns */
    grid-template-rows: auto; /* adjust this based on your content */
    gap: 10px; /*  gap between grid items */
    padding-top: 50px; /*  padding to accommodate the navigation bar */
}

.row {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* number of columns based on your grid */
    gap: 10px; /*  gap between grid items */
}

.column {
    background-color: #C3C3C4; /*  background color */
    padding: 20px; /* Adjust padding as needed */
    text-align: center; /* Center text horizontally */
}

/*  each child on the grid */
.column:nth-child(1) {
    background-color: #D2A650; /* Color Column 1 */
    width: 998px; /*  width of column 1 */
    height: 123px; /*  height of column 1 */
    grid-column: span 5; /* Span Column 1 across 5 columns */
    align-self: center; /* Align Column 1 along the vertical axis (center) */
}

.column:nth-child(2) {
    background-color: #EAF7D4; /* Color Column 2 */
    width: 998px; 
    height: 392px; 
    grid-column: 1 / span 5; /* Position Column 2 across 5 columns */
}
.column:nth-child(3) {
    background-color: #D7DBEF; /*  Color Column 3 */
    width: 563px; /* width of Column 3 */
    height: 252px; /*  height of Column 3 */
    grid-column: 2 / span 5; /* Span Column 3 across 5 columns */
    align-self: start; /* Align Column 3 along the vertical axis (top) */
}
.column:nth-child(4) {
    background-color: #C8B2F5; /* Color Column 4 */
    width: 563px; /*  width of Column 4 */
    height: 325px; /*  height of Column 4 */
    grid-column: 2 / span 5; /* Span Column 4 across 5 columns */
    align-self: start; /* Align Column 4 along the vertical axis (top) */
}
.column:nth-child(5) {
    background-color: #E8AFE9; /* Color Column 5 */
    width: 998px; /*  width of Column 5 */
    height: 86px; /*  height of Column 5 */
    grid-column: 1 / span 5; /* Span Column 5 across 5 columns */
    align-self: start; /* Align Column 5 along the vertical axis (top) */
}