body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    /*padding-top: 60px;*/
    color: #333;
    background-color: #f4f4f4;
}

.info-bar {
    display: flex;
    top: 0;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* Adjust as necessary */
    background-color: #9e2a2b;
    color: white;
}

.logo-and-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto; /* Allows flexing but primarily takes only needed space */
}

.apply-button {
    background-color: #f4f4f4; /* Lighter color for the button */
    color: #9e2a2b; /* Color to match the info bar background */
    padding: 10px 30px; /* Increased horizontal padding */
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    text-align: center;
    display: inline-block; /* Ensures proper button formatting */
    min-width: 10px; /* Optional: Sets a minimum width for the button */
}

.logo {
    height: 50px;
    width: auto;
    margin-bottom: 0.5px; /* Minimal space between logo and company name */
}

.company-name {
    font-size: 0.8em;
}

header {
    background: transparent;
    color: #9e2a2b;
    padding: 0;
    text-align: center;
    font-weight: bold;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: #333; /* Dark color for visibility on a light background */
    text-decoration: none;
}

.contact-page-background {
    background: url('manuhome.jpg') no-repeat center center fixed; /* Adjust the path to your image */
    background-size: cover; /* Ensures the background covers the entire area */
    padding: 50px; /* Add padding as needed to align the content inside */
    display: flex;
    justify-content: center; /* Centers the contact info box horizontally */
    align-items: center; /* Centers the contact info box vertically */
    min-height: 100vh; /* Makes sure the container covers at least the whole viewport height */
}

.contact-info-box {
    border: 2px solid #9e2a2b; /* Adds a solid border with a color that matches the brand */
    padding: 20px;
    margin: 20px auto; /* Centers the box on the page */
    width: 100%; /* Adjust the width as necessary */
    max-width: 500px; /* Ensures the box does not get too wide on larger screens */
    background-color: #fff; /* Optional: Sets a background color for the box */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds a subtle shadow for depth */
    border-radius: 10px; /* Optional: Rounds the corners of the box */
    text-align: center; /* Centers the text inside the box */
}

.contact-info-box p {
    font-size: 1.2em; /* Makes the font larger for better readability */
    color: #333; /* Dark color for text */
    line-height: 1.5; /* Increases line height for better readability */
    margin: 10px 0; /* Adds vertical spacing between elements */
    white-space: normal; /* Overrides any other whitespace settings that may prevent wrapping */
    word-wrap: break-word; /* Ensures words break and wrap onto the next line */
    overflow-wrap: break-word; /* Allows the words to break and wrap to the next line */
}

.contact-info-box a {
    color: #9e2a2b; /* Styles the link color to match the brand */
    text-decoration: none; /* Removes underline from links */
}

#photo {
    background: url('manuhome.jpg') no-repeat center center fixed; /* Adjust the path to your image */
    background-size: cover;
    height: 500px; /* Set this height according to the aspect ratio of the image */
}

.centered-box {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
    padding: 20px;
    border-radius: 10px; /* Optional: adds rounded corners */
    text-align: center; /* Centers the text inside the box */
    max-width: 300px; /* Maximum width of the box */
}

.centered-box p {
    color: black; /* Sets the color of the text */
    font-size: 1.5em; /* Sets the size of the text */
    font-weight: bold; /* Makes the text bold */
}

#reviews {
    text-align: center;
    padding: 20px;
    background: #ffffff; /* Light background for visibility */
    color: #333;
    margin-top: 20px; /* Ensures space between the image and reviews */
    height: 200px; /* Fixed height for the review container */
    overflow-y: auto; /* Allows scrolling within the container if content exceeds the height */
}

.review {
    display: none; /* Hide all reviews initially */
    font-style: italic;
    margin-bottom: 10px;
    min-height: 100px; /* Minimum height for each review to standardize display */
    padding: 10px; /* Padding inside each review for better formatting */
}

.review.active {
    display: block; /* Only show the active review */
}

#services {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap and prevents overflow */
    justify-content: space-between;
    align-items: stretch;
    padding: 20px;
    background-color: #f0f0f0;
}


h2, h3 {
    color: #9e2a2b; /* A green color that matches your info-bar */
}

p {
    color: #333
}

@media (max-width: 768px) {
    .contact-info-box {
        width: 90%; /* Increase width on smaller screens */
        padding: 15px; /* Adjust padding to be less bulky */
        font-size: 0.9em; /* Adjust font size for better readability */
    }
    .apply-button {
        padding: 8px 15px; /* Smaller padding */
        font-size: 0.8em; /* Smaller font size */
    }

    .logo {
        height: 30px; /* Smaller logo height */
    }
    .company-name {
        font-size: 0.8em; /* Smaller font size */
    }
    .service {
        flex-basis: 100%; /* Each service takes full width on smaller screens */
        margin: 10px 0; /* Reduces side margins on smaller screens for better fit */
        padding: 10px; /* Adjust padding for smaller devices */
    }
    .team-container {
        flex-wrap: wrap; /* Allows items to wrap onto the next line */
    }
    .team-member {
        flex-basis: 100%; /* Each team member takes full width on smaller screens */
        margin-bottom: 20px; /* Adds more vertical space between members */
    }

    .team-member img {
        height: 100px; /* Adjusts image height for smaller screens */
    }
    body {
        padding: 5px; /* Reduce padding */
    }

    .header, .footer, .main-content {
        padding: 10px; /* Smaller padding in main sections */
    }

    nav ul {
        display: flex;
        flex-direction: column; /* Stack nav items vertically */
        padding: 0;
    }

    nav ul li {
        margin-bottom: 5px; /* Add space between menu items */
    }

    .info-bar {
        padding: 5px 10px; /* Reduce padding */
    }

    .review-author {
        display: block; /* Ensure author name goes on new line if needed */
    }
}

.service {
    flex: 0 0 32%; /* Flex-grow, flex-shrink, and flex-basis */
    margin: 20px auto; /* Narrows the margins by centering the content and reducing side margins */
    width: 80%; /* Adjust the width as necessary */
    max-width: 800px; /* Ensures the section does not get too wide */
    padding: 20px;
    background-color: #fff; /* Solid background for readability */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: Adds shadow for better visibility */
    text-align: center; /* Centers the text within each service */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

.service p {
    text-align: left; /* Centers the text within each service */
}

.service_centered p {
    margin-left: 80px; /* Adds indentation to the left */
    margin-right: 40px; /* Optional: adds some right indentation for aesthetic balance */
    padding: 5px; /* Adds space around the text for emphasis */
    background-color: #f9f9f9; /* Optional: a slight background color change to highlight this section */
    border-left: 5px solid #9e2a2b; /* Optional: adds a vertical line to visually distinguish the section */
    font-style: italic; /* Optional: italicizes the text to emphasize it */
}

.service_centered h4, .service_centered a {
    white-space: normal; /* Allows the text to wrap */
    word-wrap: break-word; /* Breaks long words if necessary to fit within the container */
    overflow-wrap: break-word; /* Allows the break of long words to prevent overflow */
}

#about-us-content {
    padding: 20px;
    background: #ffffff; /* White background for readability */
    color: #333; /* Standard text color */
    border-top: 2px solid #9e2a2b; /* Adds a thematic border at the top */
}

#about-us-content h2 {
    text-align: center;
}

#our-mission {
    margin: 20px auto; /* Narrows the margins by centering the content and reducing side margins */
    width: 80%; /* Adjust the width as necessary */
    max-width: 800px; /* Ensures the section does not get too wide */
    padding: 20px; /* Adds padding for better readability */
    background-color: #fff; /* Optional: sets a background color */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: adds a subtle shadow */
}

#our-mission h2 {
    text-align: center; /* Centers the heading */
}

#our-mission p {
    text-align: left; /* Ensures text alignment is consistent */
    margin-bottom: 15px; /* Provides space between paragraphs */
}

.mission-details {
    margin-left: 40px; /* Adds indentation to the left */
    margin-right: 40px; /* Optional: adds some right indentation for aesthetic balance */
    padding: 5px; /* Adds space around the text for emphasis */
    background-color: #f9f9f9; /* Optional: a slight background color change to highlight this section */
    border-left: 5px solid #9e2a2b; /* Optional: adds a vertical line to visually distinguish the section */
    font-style: italic; /* Optional: italicizes the text to emphasize it */
}

.mission-details p {
    margin-bottom: 10px; /* Adds spacing between paragraphs */
}

.team-container {
    border-top: 2px solid #9e2a2b; /* Adds a thematic border at the top */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Distributes space evenly and handles alignment */
    align-items: flex-start; /* Aligns items at the top */
}

.team-member {
    flex: 1 1 22%; /* Adjust this value depending on how many you want in a row */
    margin: 20px; /* Provides ample space around each box */
    padding: 15px; /* Padding inside the box for spacing around content */
    border: 2px solid #9e2a2b; /* Solid border around each team member, adjust color as needed */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds shadow for depth */
    background-color: #fff; /* Optional: Sets a background color for each box */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-aligns items horizontally */
    text-align: center; /* Centers the text within each box */
    box-sizing: border-box; /* Ensures padding and border are included in width */
}

.team-member img {
    width: auto; /* Maintains the aspect ratio */
    height: 150px; /* Sets a fixed height for all images */
    margin-bottom: 10px; /* Space between the image and the text */
}

.team-member h4, .team-member p {
    width: 100%; /* Ensures text blocks use the full available width */
}

.team-member h4 {
    margin-bottom: 5px; /* Reduces space between the name and the ID number */
}

.team-member h5 {
    margin-top: 0px; /* Eliminates additional space above the ID number */
    font-size: 0.9em; /* Optionally adjust font size for better fit */
    color: #777; /* Optionally, change color to differentiate from the name */
}

footer {
    text-align: center;
    background: #9e2a2b;
    color: #fff;
    position: relative;
    bottom: 0;
    width: 100%;
	padding-top:15px;
	padding-bottom: 15px;
}
footer p{
	margin-top:0px;
	margin-bottom: 0px;
	color:#fff;
}

@media {
    .service_centered p {
        margin-left: 10px; /* Reduces left margin to bring text closer to the side */
        margin-right: 10px; /* Reduces right margin to maintain aesthetic balance */
    }

    .mission-details {
        margin-left: 20px; /* Reduces left margin to utilize screen space better */
        margin-right: 20px; /* Reduces right margin to balance out the reduced left margin */
        border-left: 3px solid #9e2a2b; /* Optionally reduce border thickness for smaller screens */
    }

    .service_centered h4, .service_centered a {
    font-size: 0.9em; /* Adjusts font size for links and headers within the div */
    }

}