/* Section for styling the first section of the layout */
.section-one {
    /* Adds a solid border at the bottom of the section with a specified color */
    border-bottom: 10px solid #09526d;
    /* Adds a bottom margin to create space between sections */
    margin-bottom: 2vh; /* vh = viewport height */
}

/* Styling for the profile element */
#profile {
    /* Adds a top margin to push the profile down the page */
    margin-top: 20vh;
    /* Sets a fixed width for the profile element */
    width: 300px; /* Fixed width for consistent sizing */
}

/* Styling for h1 or h2 elements with ID h12 */
#h12 {
    /* Adds a left margin to position the element away from the left edge */
    margin-left: 5vw; /* vw = viewport width */
    /* Adds a top margin to space it from elements above */
    margin-top: 10vh;
}

/* Container for text elements */
.text-container {
    /* Adds a left margin for positioning */
    margin-left: 5vw;
    /* Adds a top margin for spacing from the top */
    margin-top: 20vh;
}

/* Flex container for aligning items horizontally */
.flex-container {
    /* Adds padding on the left side */
    padding-left: 5vw;
    /* Enables flexbox layout for child elements */
    display: flex;             
    /* Vertically centers items within the container */
    align-items: center;        
}

/* Custom table styling */
.custom-table {
    /* Sets the table width to 90% of its container */
    width: 90%;
    /* Centers the table by using auto margins */
    margin-left: auto;
    margin-right: auto;
    /* Adds a bottom margin for spacing below the table */
    margin-bottom: 10vh;
}

/* Specifies width for the last header cell in the custom table */
.custom-table th:last-child {
    /* Sets the width of the last header cell */
    width: 10%; /* Ensures it takes up 10% of the table width */
}

/* Styling for links within the custom table */
.custom-table a {
    /* Removes the default underline from links */
    text-decoration: none;
}

/* Specific styling for the booking button or link */
#bookhere {
    /* Sets the text color to white */
    color: #ffffff;
}

/* Styling for paragraph elements related to booking */
#bookherep {
    /* Adds a left margin for positioning */
    margin-left: 5vw;
    /* Adds a bottom margin for spacing below the element */
    margin-bottom: 10vh;
}

/* General button styling */
button {
    /* Removes the border for a clean look */
    border: none;
    /* Removes the outline to avoid visual distractions */
    outline: none;
    /* Sets the background to transparent */
    background-color: #00000000; /* Fully transparent background */
}