/* Apply box-sizing to all elements to include padding and border in the element's total width and height */
* {
    box-sizing: border-box;
}

/* Set default font and remove margin and padding for the body */
body {
    font-family: "Lucida Sans", sans-serif; /* Use "Lucida Sans" font with a fallback to sans-serif */
    /*margin: 0;*/ /* Remove default margin */
    padding: 0; /* Remove default padding */
}

/* Define a grid container for the layout */
.grid-container {
    display: grid; /* Use CSS Grid layout */
    grid-template-areas: /* Define named grid areas */
        'top'
        'middle'
        'bottom';
    background-color: white; /* Set background color to white */
    grid-template-rows: 1fr 1fr 1fr; /* Define row heights: top (1 part), middle (2 parts), bottom (1 part) */
    height: 100vh; /* Set height to fill the viewport */
    gap: 10px; /* Add spacing between grid items */
}

/* Style for the top section of the grid */
.top {
    position: sticky;
    top: 0;
    grid-area: top; /* Assign this element to the 'top' grid area */
    display: grid; /* Use CSS Grid layout */
    grid-template-areas: 'header contactinfo menu'; /* Define named grid areas within the top section */
    grid-template-rows: 1fr; /* Set a single row */
    grid-template-columns: 1fr 1fr 1fr; /* Define column widths: header (1 part), menu (3 parts) */
    align-items: start; /* Align items to the start of the row */
    background-color: white; /* Set background color to white */
    max-height: 100px; /* Limit the maximum height */
}

/* Style for the middle section of the grid */
.middle {
    grid-area: middle; /* Assign this element to the 'middle' grid area */
    display: grid; /* Use CSS Grid layout */
    grid-template-areas: /* Define named grid areas within the middle section */
        'main'
        'facts';
    grid-template-rows: 1fr; /* Define row heights: main (2 parts), facts (1 part) */
    background-color: white; /* Set background color to white */
}

/* Style for the bottom section of the grid */
.bottom {
    grid-area: bottom; /* Assign this element to the 'bottom' grid area */
    display: grid; /* Use CSS Grid layout */
    grid-template-areas: 'footer'; /* Define a single grid area for the footer */
    grid-template-rows: 1fr; /* Set a single row */
    background-color: white; /* Set background color to white */
}

/* Style for the header inside the top section */
.header {
    grid-area: header; /* Assign this element to the 'header' grid area */
    
    color: #ffffff; /* Set text color to white */
    max-height: 100px; /* Limit the maximum height */

    margin-left: 100px;
    border-radius: 10px;
    display: flex; /* Use Flexbox layout */
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 25px;
}
    .header img {
        max-height: 100%;
        height: 80%;
        width: 80%;
        object-fit: contain;
        display: block;
    }

.contactinfo {
    grid-area: contactinfo;
    max-height: 100px;
    overflow: hidden;
    margin-left: 0;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: 1em;
    min-width: 180px;
    gap: 1px;
}

.contactinfo-phone {
    font-size: 1.2em;
    font-weight: 500;
    color: purple;
    margin: 0.2em 0;
    letter-spacing: 0.02em;
}

.contactinfo-email {
    font-size: 0.95em;
    font-weight: 500;
    color: purple;
    margin: 0.2em 0;
    letter-spacing: 0.02em;
    word-break: break-all;
}

    .contactinfo-email a {
        color: purple;
        text-decoration: none;
        transition: color 0.2s;
        word-break: break-all;
    }

        .contactinfo-email a:hover,
        .contactinfo-email a:focus {
            color: #0d47a1;
            text-decoration: underline;
        }


.menu {
    grid-area: menu; /* Assign this element to the 'menu' grid area */
    color: #111; /* Set text color to black */
    max-height: 100px; /* Limit the maximum height */
    margin-right: 150px;
    justify-items: end;
    align-items: center;
    display: flex;
    height: 100%;
}

/* Style for the main content area */
.main {
    grid-area: main; /* Assign this element to the 'main' grid area */
    display: flex; /* Use Flexbox layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    width: 100%; /* Ensure it spans the full width of the container */
    height: 100%; /* Ensure it spans the full height of the container */
    flex-direction: column;
}

/* Style for the content section inside .main */
.content {
    grid-area: content; /* Assign this element to the 'content' grid area */
    display: flex; /* Use Flexbox layout */
    /*align-items: center;  Center content vertically */
    flex-direction: column;
    justify-content: flex-start; /* Align content to the start horizontally */
}
    /* Style for the content area's h1 element */
    .content > h1 {
        font-size: 25px; /* Set font size for the content title */
        margin-bottom: 7px; /* Add spacing below the title */
    }

    /* Style for the content area's paragraph elements */
    .content > p {
        margin-bottom: 15px; /* Add spacing below paragraphs */
    }

.mainimage {
    grid-area: mainimage; /* Assign this element to the 'mainimage' grid area */
    display: flex; /* Use Flexbox layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    width: 100%; /* Ensure the image does not exceed the grid area width */
    height: 100%; /* Ensure the image does not exceed the grid area height */
    max-width: 1000px; /* Set a maximum width for the image */
    max-height: 1000px; /* Set a maximum height for the image */
    overflow: hidden; /* Prevent the image from overflowing */
    background-color: transparent; /* Set background color to orange */
    position: relative;
}

    .mainimage img {
        max-width: 100%; /* Ensure the image scales within the container's width */
        max-height: 100%; /* Ensure the image scales within the container's height */
        object-fit: contain; /* Maintain the aspect ratio of the image */
        border-radius: 10px;
    }

    .mainimage .btn {
        position: absolute;
        bottom: 45px;
        left: 0px;
        width: auto;
        padding: 10px 24px;
        font-size: 25px;
        background-color: #0078d7;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        opacity: 0.9;
    }

.btn:hover {
    background-color: #005a9e;
}

/* Style for the facts section */
.facts {
    grid-area: facts; /* Assign this element to the 'facts' grid area */
    border: 1px solid #0099cc; /* Add a border with a blue color */
    background-color: beige; /* Set background color to beige */
    padding: 10px; /* Add padding inside the facts section */
    max-width: fit-content; /* Limit the width to fit the content */
    overflow: hidden; /* Hide any content that overflows */
}

    /* Style for the facts section's h2 element */
    .facts > h2 {
        font-size: 20px; /* Set font size for the facts title */
    }

    /* Style for the list items inside the facts section */
    .facts li {
        margin-bottom: 5px; /* Add spacing below each list item */
    }



/* Style for elements that are marked as required */
.required {
    color: red; /* Set text color to red */
    font-weight: bold; /* Make the text bold */
}

/* Style for the main content area with ID 'main-content' */
#main-content {
    display: flex; /* Use Flexbox layout */
    padding-bottom: 45px;
    flex-direction: column;
    /*justify-content: center;  Center content horizontally */
    /*align-items: center;  Center content vertically */
    /*text-align: center; Center-align text inside the div */
}

.oval {
    height: 300px;
    width: 550px;
    background-color: lightblue;
    border-radius: 10%;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

    .oval > p {
        font-size: 24px; /* Set font size for the facts title */
    }




/* Style for the footer */

/*.footer {
    grid-area: footer; Assign this element to the 'footer' grid area 
    background-color: #0099cc;  Set background color to blue 
    color: #ffffff;  Set text color to white 
    text-align: center;  Center-align text 
    max-height: 25px;  Limit the maximum height 
    overflow: hidden;  Hide any content that overflows 
    align-self: end;  Align the footer to the end of the grid cell 
}*/

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #0099cc;
    color: white;
    text-align: center;
    max-height: 25px; /* Limit the maximum height */
    overflow: hidden; /* Hide any content that overflows */
}