body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f4f4f4;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    position: fixed;
    width: calc(100% - 30px); /* Adjust width to account for padding */
    top: 0;
    z-index: 1000;
}
header img {
    height: 40px;
}
nav {
    display: flex;
    gap: 20px;
}
nav a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
}
.content {
    padding: 10px;
    max-width: 900px;
    margin: 40px auto 0; /* Adjust margin to avoid overlap with fixed header */
}
h1 {
    color: #333;
    font-size: 2em; /* Adjusted title font size */
}
h2 {
    color: #333;
    font-size: 1.5em; /* Adjusted section title font size */
    margin-top: 40px; /* Add space before section titles */
	margin-bottom: 20px; /* Add space before section titles */
}
p {
    font-size: 18px;
    line-height: 1;
}
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Increased the space between grid items */
    margin-top: 20px;
}
.grid a {
    flex: 1 1 calc(33.333% - 30px); /* Ensure each cell takes up one-third of the row */
    max-width: calc(33.333% - 30px); /* Ensure each cell takes up one-third of the row */
    text-decoration: none;
}
.grid-item-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px; /* Adjust padding as needed */
    background-size: cover; /* Ensure the image covers the entire box */
    background-position: center;
    background-repeat: no-repeat; /* Ensure the image does not repeat */
    text-decoration: none;
    transition: transform 0.3s, background-color 0.3s;
    height: 250px; /* Set a fixed height for the boxes */
    width: 250px; /* Ensure the content takes up the full width of the cell */
    box-sizing: border-box;
    color: #fff; /* Ensure text is visible on the background */
}
.grid-item-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(40, 40, 40, 0.65);  Gray overlay with 65% transparency */
    z-index: 1;
}
.grid-item-content b {
    font-size: 1.5em; /* Reduced grid elements' text font size */
    z-index: 2; /* Ensure text is above the overlay */
}
.grid-item-content small {
    font-size: 1em; /* Reduced small text font size */
    display: none;
    white-space: normal; /* Allow text to wrap to the next line */
    margin-top: 20px; /* Add space before the small text */
    z-index: 2; /* Ensure text is above the overlay */
}
.grid-item-content:hover small {
    display: block;
}

/* Commented out background images and added background colors */
.grid a:nth-child(1) .grid-item-content {
    /* background-image: url('../images/regulatory-compliance.jpg'); */
    background-color: #034260; /* Dark blue background */
    color: #D0E8E8; /* Light teal font color */
}
.grid a:nth-child(2) .grid-item-content {
    /* background-image: url('../images/SOP_Write.png'); */
    background-color: #034260; /* Light teal background */
    color: #D0E8E8; /* Dark blue font color */
}
.grid a:nth-child(3) .grid-item-content {
    /* background-image: url('../images/version-comparison.png'); */
    background-color: #034260; /* Teal background */
    color: #D0E8E8; /* Dark blue font color */
}
.grid a:nth-child(4) .grid-item-content {
    /* background-image: url('../images/SOP_R_U_Update.png'); */
    background-color: #034260; /* Dark blue background */
    color: #D0E8E8; /* Light teal font color */
}
.grid a:nth-child(5) .grid-item-content {
    /* background-image: url('../images/root-cause-analysis.jpg'); */
    background-color: #D0E8E8; /* Light teal background */
    color: #034260; /* Dark blue font color */
}
.grid a:nth-child(6) .grid-item-content {
    /* background-image: url('../images/qms-compliance-checker.jpg'); */
    background-color: #76BABA; /* Teal background */
    color: #034260; /* Dark blue font color */
}

.section {
    margin-bottom: 20px;
}
ul {
    list-style-type: disc;
    padding-left: 20px;
}
ul li {
    margin-bottom: 10px;
}