.title-style {
font-family: Arial, sans-serif; /* Font for the title */
font-size: 2em; /* Title size */
font-weight: bold; /* Make the title bold */
color: #051229; /* Title text color (blue) */
text-align: center; /* Center-align the title */
text-transform: uppercase; /* Make all text uppercase */
}

.section-style {
    background-color: #00B5E2; /* Light blue background */
    padding: 40px !important; /* Space inside the section */
    max-width: 100vw; /* Center the content with a maximum width */
    font-size: 1em !important; /* Adjust text size - set to important to prevent it being over-ridden */
}

.section-style p {
    max-width: 80vw; /* Restricts paragraph width to 80% of the viewport width */
    margin: 0 auto; /* Centers the paragraph */
    text-align: justify; /* Optional: Justifies the text */
    line-height: 1.6; /* Improves readability */
}

.section-menu-style {    
    display: flex; /* Creates a flex container for columns */    
    background-color: #F0F8FF; /* Light blue background */
    padding: 40px; /* Space inside the section */
    max-width: 100vw; /* Center the content with a maximum width */
    font-size: 1em; /* Adjust text size */
}

.section-menu-style p {
    max-width: 80vw; /* Restricts paragraph width to 80% of the viewport width */
    margin: 0 auto; /* Centers the paragraph */
    text-align: justify; /* Optional: Justifies the text */
    line-height: 1.6; /* Improves readability */
}

.left-column {
  flex: 1; /* Adjust width proportionally */
  display: flex; /* Makes buttons stackable */
  flex-direction: column; /* Vertically stacks buttons */
  max-width: 10vw; /* Center the content with a maximum width */
  position: sticky; /* Keeps the column "stuck" in place */
  top: 0; /* Sticks the column to the top of the viewport */
}

.left-column button {
 /* background-color: #051229; /* Dark blue background */
 color: #ffffff; /* White text */
 padding: 10px 15px; /* Adds button-like spacing */
 border-radius: 5px; /* Round corners */
 margin: 10px 0; /* Vertical spacing between buttons */
 width: 150px; /* Ensures all buttons are the same width */
 text-align: center; /* Centers text */
 text-decoration: none; /* Removes underline */
 display: inline-block; /* Makes it behave like a button */
 transition: background-color 0.3s ease-in-out; /* Smooth hover effect */
 border: none; /* Removes border */
}

.right-column {
  flex: 2; /* Adjust width proportionally */
  overflow-y: auto; /* Enables vertical scrolling */
  text-align: justify; /* Aligns text cleanly */
  line-height: 1.6; /* Improves readability */
}

.center-text-section {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    text-align: center; /* Center text inside the div */
    height: auto; /* Adjust height based on content */
    font-size: 1.1em; /* Adjust text size */
}

.center-text-section p {
    max-width: 80vw; /* Restricts paragraph width to 80% of the viewport width */
    margin: 0 auto; /* Centers the paragraph */
    text-align: justify; /* Optional: Justifies the text */
    line-height: 1.6; /* Improves readability */
}

.center-text-section ul {
    list-style-type: disc; /* Default bullet points */
    padding-left: 20px; /* Add some space to align the bullets nicely */
    margin-top: 10px; /* Space between the paragraph and the list */
    text-align: left; /* Aligns the list items to the left for readability */
}

.center-text-section ul li {
    margin-bottom: 5px; /* Add space between the list items */
}

.center-table {
    margin-top: 20px; /* Adds space between the paragraph and the table */
    border-collapse: collapse; /* Combines borders for a clean look */
    width: auto; /* Dynamically adjusts width based on content */
    text-align: center; /* Centers text inside table cells */
    border: 1px solid #051229; /* Dark blue border around the table */
    font-size: 1.1em; /* Adjust text size */
}

.center-table th {
    border: 1px solid #051229; /* Dark blue borders around each cell */
    padding: 10px; /* Provides padding inside each cell */
    white-space: nowrap; /* Prevents text wrapping for short content */    
}

.center-table td {
    border: 1px solid #051229; /* Dark blue borders around each cell */
    padding: 10px; /* Provides padding inside each cell */
    white-space: nowrap; /* Prevents text wrapping for short content */
}

.center-table img {
    width: 80px; /* Set the width */
    height: 80px; /* Set the height */
    object-fit: cover; /* Ensures the image maintains its aspect ratio and fills the dimensions */
    border-radius: 5px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a slight shadow for style */
}

center-table, td, th, p {
    font-size: inherit; /* Ensure consistency */
}

.highlight-red {
    background-color: #ffcccc; /* Light red background */
    color: #d80000; /* Dark red text */
    font-weight: bold; /* Optional: Make the text bold */
}


/* Section of left image display and right hand text */
.image-left-text-right-container {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align content */
    justify-content: flex-start; /* Align items to the left */
    gap: 10px; /* Space between image and text */
    padding: 20px; /* Add some padding */
    max-width: 80vw; /* Limit container width */
    margin: 20px auto; /* Center the container */
}

.image-left-text-right-container img {
    max-width: 40%; /* Image takes up 40% of the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Round corners */
    border: 3px solid #051229; /* Adds a 3px solid border with a blue color */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Adds a soft shadow around the image */
}

.image-left-text-right-container p {
    font-size: 1.1em; /* Adjust text size */
    color: #051229; /* Text color */
    line-height: 1.6; /* Improve readability */
    max-width: 60%; /* Limit text width */
    margin-left: 10vw; /* Removes any extra left margin */
    text-align: center; /* Optional: Justifies the text */
}

/* Style for right-aligned images and left-aligned text */
.image-right-text-left-container {
    display: flex; /* Use flexbox for layout */
    flex-direction: row-reverse; /* Reverse the direction to place image on the right */
    align-items: center; /* Vertically align content */
    gap: 10px; /* Space between image and text */
    padding: 20px; /* Add some padding */
    max-width: 80vw; /* Limit container width */
    margin: 20px auto; /* Center the container */
}

.image-right-text-left-container img {
    max-width: 40%; /* Image takes up 40% of the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Round corners */
    border: 3px solid #051229; /* Adds a 3px solid border with a blue color */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Adds a soft shadow around the image */
}

.image-right-text-left-container p {
    font-size: 1.1em; /* Adjust text size */
    color: #051229; /* Text color */
    line-height: 1.6; /* Improve readability */
    max-width: 60%; /* Limit text width */
    text-align: justify; /* Optional: Justifies the text */
}

/* Style for center-aligned images and center aligned text below */
.image-center-text-below {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    margin: 20px auto; /* Center the container */
    max-width: 80vw; /* Limit container width */
}

.image-center-text-below img {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Round corners */
    border: 3px solid #051229; /* Adds a solid border with a blue color */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Adds a soft shadow around the image */
    margin-bottom: 10px; /* Add space between the image and text */
}

.image-center-text-below p {
    font-size: 1.0em; /* Adjust text size */
    color: #051229; /* Text color */
    text-align: center; /* Center-align the text */
    line-height: 1.5; /* Improve readability */
    max-width: 70vw; /* Limit text width */
    margin: 0; /* Removes default margins */
}

.pdf-viewer {
    display: block; /* Ensures the iframe behaves like a block-level element */
    margin: 20px auto; /* Centers the iframe horizontally */
    width: 60vw; /* Adjust the width as needed */
    height: 80vh; /* Set the height of the iframe */
    overflow: hidden; /* Ensure no content spills out */
    border: none; /* Remove the border */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Adds a soft shadow */
    border-radius: 10px; /* Optional: Rounds the corners */
}

/* Table Styles for the contacts page*/
.center-table-container {
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    width: 80vw%; /* Full width of the container */
}

/* Add classes for text alignment */
.text-left {
    text-align: left; /* Align text to the left */
}

.text-right {
    text-align: right; /* Align text to the right */
}

.text-center {
    text-align: center; /* Align text to the center */
}

.no-border {
    border: none; /* Removes the border from the table */
    border-collapse: collapse; /* Ensures clean layout without borders */
}

.no-border th, .no-border td {
    border: none; /* Removes borders from cells */
}

.vertical-top {
    vertical-align: top; /* Aligns the text to the top of the row */
}

.top-left-align {
    text-align: left; /* Align text to the left */
    vertical-align: top; /* Align text to the top */
}

/* Adjust the layout for small screens */
@media (max-width: 768px) {
    div .image-left-text-right-container, div.image-right-text-left-container {
        display: flex;
        flex-direction: column; /* Stack content vertically */
        align-items: center; /* Center align the content */
        text-align: center; /* Center align the text */
        margin: 15px 0; /* Adjust margins for spacing */
    }

    div.image-left-text-right-container img,
    div.image-right-text-left-container img {
        width: 80%; /* Adjust image width for small screens */
        max-width: 400px; /* Optional: Set a maximum width */
        height: auto; /* Maintain aspect ratio */
    }

    div.image-left-text-right-container p,
    div.image-right-text-left-container p {
        margin-top: 10px; /* Add some space between the image and the text */
        font-size: 1.0em; /* Adjust text size for better readability */
    }
}

@media screen and (max-width: 600px) and (orientation: portrait) {
    .center-table, .center-table thead, .center-table tbody, .center-table tr, .center-table td, .center-table th {
        display: block;
        width: 100%;
    }
    
    .center-table thead {
        display: none; /* Hide header row on small screens */
    }
    
    .center-table tr {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        padding: 8px;
        display: block;
    }

    .center-table td {
        display: block;
        text-align: right;
        position: relative;
        padding-left: 50%;
    }

    .center-table td::before {
        content: attr(data-label); /* Use data attributes for labels */
        position: absolute;
        left: 10px;
        font-weight: bold;
        text-align: left;
    }
}