* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.main-list {
margin-left: 10px;
padding-left: 20px;
}

.nested-list {
padding-left: 0; 
margin-left: 40px; 
}

.nested-list li {
    margin-bottom: 5px;
}

/* -- nav bar */
.navbar {
    background-color: #312782; /* MedFindit's Brand Colour Navy Blue colour */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

/* MedFindit Logo Image  */
.logo img {
    height: 40px; /* Set the height of the image */
    width: auto;
    display: block; 
}

/* Menu Links */
.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
}

/* Anchor/Link  */
.nav-links a {
    color: white; /* White text for the menus */
    text-decoration: none;
    font-size: 1em;
    padding: 5px 10px;
    transition: color 0.3s;
    text-align: center;
}

/* Hover Effect */
.nav-links a:hover {
    color: #e20613; /* Set Hover colour to MedFindit Brand colour Red #e20613 */
}

/* ---- Medfindit hero image  */

.hero-section {
    width: 100%;
    overflow: hidden; 
}

.hero-image {
    width: 100%;
    height: auto; 
    display: block;
}

/* Mobile layout */
.grid {
    display: grid;
    grid-template-columns: 20px 290px 290px 20px;
    grid-template-areas:
    ". title title. "
    ". descriptor descriptor. "
    ". content content ."
    ". content2 sidebar ."
    ". footer footer .";
    }


.title {
    grid-area: title;
    /* justify-self: center; */
    padding: 30px 30px;
    font-size: 1.7em;
}

.descriptor {
    grid-area: descriptor;
    text-align: center;
    margin: 0px 50px;
    font-size: 1.6em;
    color: #555;
    padding: 0px 20px;
}

.content {
    grid-area: content;
    font-size: 1.5em;
    line-height: 1.5;
}

.content2 {
    grid-area: content2;
}

.sidebar {
    grid-area: sidebar;
}

.footer {
    grid-area: footer;
}


@media screen and (min-width: 736px) { /* Sset width so to switch to mobile layout*/


/* Desktop Layout*/
.grid {
    display: grid;
    grid-template-columns: 1fr 550px 550px 1fr;
    /* Grid-template-rows: 1fr 1fr 1fr 1fr; */
    grid-template-areas:
    ". title title ."
    ". descriptor descriptor ."
    ". content content ."
    ". content2 sidebar ."
    ". footer footer .";
    }
}
body {
    font-family: Roboto, Arial;
    background-color: #f4f7f6; /* Light grey-green background */

}

h1 {
    margin: 30px;
    font-size: 2.8em;
    letter-spacing: 0px;
    text-align: center;
}

h2 {
    margin-top: 0px;
    font-size: 1.75em;
    font-weight: normal;
    text-align: center;
}


h3 {
    color: #3498db; /* Set  section headings colour to  */
    border-bottom: 2px solid #3498db; /* MedFindit Brand colour - Lighter blue underline */
    padding-bottom: 8px;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.4em;
}

h4 {
    padding-bottom: 0px;
    margin-top: 40px;
    font-size: 1.1em;
}


p {
    margin-bottom: 15px;
    color: #333;
    line-height: 1.5;
}

ul { 
    list-style-type: disc;
    margin-left: 20px; /*-REMEMBER  TO ADJUST INDENT-*/
    margin-bottom: 15px;
}

/* Table CSS styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fdfdfd;
}

        th, td {
            border: 2px solid #dddddd;
            padding: 12px;
            text-align: left;
            line-height: 1.2;
            font-size: 0.8em;
        }

        th {
            background-color: #312782; /* Darker blue-grey for table header */
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.8em;
            letter-spacing: 0.5px;
            line-height: 1.1;
        }

.invisible-separator {
height: 0; 
border: none;
margin-top: 15px;
margin-bottom: 15px; 
}

footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    color: #828282;
    font-size: 0.7em;
    border-top: 3px solid #eee;
}
/* This was to compensate for the fixed nav bar blocking the titles 
when you jumped to the anchors */
.fixed-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px; /* IMPORTANT: Use this height for the offset */
    background-color: #333;
    color: white;
    z-index: 1000;
}

[id] {
    scroll-margin-top: 80px; 
}