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

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures footer is at least at the bottom of the viewport */
}

header {
    /* background: #f8f9fa; Bootstrap navbar has its own background */
    color: #333;
    /* padding-bottom: 10px; Managed by Bootstrap or can be adjusted if needed */
    /* text-align: center; Navbar items alignment handled by Bootstrap */
    width: 100%;
}

.main-image-container {
    width: 100%;
    max-height: 450px; /* Adjust as needed, controls max height of the image */
    overflow: hidden; /* Hides parts of image that overflow container */
}

#mainTitleImage {
    width: 100%;
    height: auto; /* Maintains aspect ratio */
    display: block;
    object-fit: cover; /* Ensures image covers the container, might crop */
    object-position: center; /* Centers the image within its container */
    max-height: 450px; /* Same as container to ensure consistency */
}

/* Navbar styling is now largely handled by Bootstrap.
   You can add custom styles here to override Bootstrap if needed.
   For example, to ensure the navbar items are truly centered if mx-auto isn't enough
   or if you want a different background for the main nav container.
*/
/*
nav.navbar {
    background: #343a40; /* Dark background for navbar */
    color: #fff;
    padding: 15px 0;
    text-align: center;
}

nav .navbar-nav .nav-item .nav-link {
    color: #fff !important; /* Ensure link color is white, !important might be needed */
    padding: 0.5rem 1rem; /* Adjust padding as needed */
}

nav .navbar-nav .nav-item .nav-link:hover {
    background-color: #495057;
    border-radius: 4px;
}
*/

/* Remove old nav styles as Bootstrap handles them */
/*
nav ul, nav ul li, nav ul li a, nav ul li a:hover, nav ul li a.active {
    list-style: none;
    padding: 0;
    all: unset;
}
*/

main {
    flex: 1; /* Allows main to grow and push footer down */
    /* Padding and max-width are now handled by Bootstrap's .container class */
    /* width: 100%; */
    /* max-width: 1200px; */
    /* margin: 0 auto; */
}

.main-content {
    background-color: #fff;
    /* padding: 20px; Bootstrap's p-4 class handles this */
    border-radius: 5px;
    /* Add box-shadow or other styling as desired */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Example shadow */
}

footer {
    /* Background, color, text-align, padding are handled by Bootstrap classes bg-dark, text-white, text-center, py-3 */
    /* margin-top: auto; Handled by Bootstrap's mt-auto on the footer element */
}

.footer-links a {
    /* color: #adb5bd; Handled by Bootstrap's text-light on the <a> tags */
    text-decoration: none;
    margin: 0 10px;
}

.footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}

footer p {
    margin-top: 10px;
    font-size: 0.9em;
    color: #ced4da;
}

/* Contact Page Specific Styles */
.contact-details, .location-map {
    /* margin-bottom: 30px; Handled by Bootstrap's mb-4 */
    /* padding: 15px; Can be handled by Bootstrap padding classes if needed or keep custom */
    background-color: #f9f9f9;
    border-radius: 4px;
}

.contact-details h2.contact-title, .location-map h2 { /* Adjusted selector for contact title */
    /* These styles can remain if you want specific styling for these headers */
    margin-bottom: 15px;
    color: #343a40;
    width: 100%; /* Ensure title spans full width above columns */
}

.contact-columns {
    display: flex;
    /* flex-wrap: wrap; Bootstrap grid handles wrapping */
    justify-content: space-between;
    /* This class can be removed as Bootstrap's .row handles the flex behavior */
    /* If you keep it, ensure it doesn't conflict with .row */
}

.contact-details p, .contact-details ul {
    margin-bottom: 10px;
}

.contact-details ul {
    list-style-position: inside;
}

/* Responsive Design */
/* Bootstrap handles most responsive navbar changes.
   The media queries below might need adjustment or removal. */

@media (max-width: 768px) {
    /* nav ul li { Bootstrap handles this } */

    .main-image-container, #mainTitleImage {
        max-height: 300px; /* Adjust image height for tablets */
    }
}

@media (max-width: 576px) { /* Adjusted to Bootstrap's sm breakpoint for finer control if needed */
    .main-image-container, #mainTitleImage {
        max-height: 200px; /* Adjust image height for mobile */
    }
    /* Contact columns stacking is handled by Bootstrap's col-md-6 (stacks on <768px) */
    /* Navbar link styling for mobile is handled by Bootstrap */

    .footer-links a {
        display: block;
        margin: 5px 0;
    }

    /* main padding and .main-content padding can be adjusted with Bootstrap utility classes
       e.g., main.container might have p-2 on small screens if mt-4 is too much */
}