body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #FFA500; /* Your orange background */
}

.orange-background {
    background-color: #FFA500 !important;
}

.navbar.fixed-top {
    z-index: 1020; /* Adjust as needed */
    right:8%;
}

.navbar-brand {
    /* margin-right: auto;  pushes the logo to the left, and contact details to the right */
}

.contact-details {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.contact-details span {
    font-size: 0.9rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gives a little space between the phone and email details */
}


.main-content {
    padding-top: 100px; /* Adjust this value to match your header's height */
    /*  background-color: #ecf0f1; This is a light gray color, but you can choose any color you prefer */
}

.img-top {
    width: 100%;
    height: 100%; /* Set a fixed height for all images */
    object-fit: cover; /* Ensure the image covers the area */
    object-position: center center; /* Center the image within the element */
    border-radius: .25rem .25rem 0 0; /* Match the border radius of Bootstrap cards */
}



/* Logo section styling */
.header-logo {
    flex: 1; /* Adjust the flex value to change the logo section size */
    max-width: 100px; /* Adjust the logo width as needed */
}

    /* Logo image styling */
.header-logo img {
    width: 100%;
    /*height: auto;*/ /* Maintain aspect ratio */
}

/* Submenu styling */
.submenu {
    display: none; /* Hide submenu */
    position: absolute;
    top: 100%; /* Position it below the main menu item */
    left: 0;
    background-color: #FFA500; /* Submenu background color */
    min-width: 160px; /* Set a min-width for submenu items */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Optional: add shadow for dropdown */
    z-index: 1;
}

    /* Submenu item styling */
.submenu li {
    text-transform: none; /* Optional: prevent uppercase for submenu items */
    text-align: left; /* Align text to the left */
}

/* Show the submenu when hovering over the parent menu item */
.header-nav li:hover .submenu {
    display: block; /* Display submenu on hover */
}

/* Optional: Style submenu links */
.submenu a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: white; /* Color of submenu links */
    background-color: #FFA500; /* Background color of submenu links */
}

/* Change the background color of submenu items on hover */
.submenu a:hover {
    background-color: #555; /* Darker background on hover */
}


/* Contact section styling */
.header-contact {
    flex: 1; /* Adjust the flex value to change the contact section size */
    display: flex;
    justify-content: flex-end; /*align-items: flex-start;*/
    text-align: right; /* Align contact info to the right */
}

    /* Contact details styling */
.header-contact div {
    text-align: right;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .header-nav {
        /*flex-direction: column; *//* Stack navigation items on top of each other */
        align-items: inherit; /* Center navigation items */
    }
}

/* Custom styles for mobile view */
@media (max-width: 768px) {
    .navbar-brand {
        position: relative; /* Reset the position to default */
        transform: none; /* Remove the transform */
        left: auto; /* Reset left positioning */
    }

    .navbar-collapse {
        padding-left: 25px; /* Adjust the left padding as needed */
        padding-right: 15px; /* Optional: Adjust the right padding as needed */
    }

    .navbar-toggler {
        margin-right: 10%; /* Optional: Add some margin for spacing */
    }

    .navbar.fixed-top {
        right: 0; /* Extend the navbar to the right edge of the screen */
        left: 0; /* Extend the navbar to the left edge of the screen */
    }

    footer {
        text-align: center; /* Optional: Center-align the text on small screens */
    }

    .footer-text {
        display: block;
        word-wrap: break-word; /* Ensure words break onto the next line */
        white-space: normal; /* Allow wrapping */
        line-height: 1.5; /* Adjust the line height as needed */
    }
}


.container {
    flex: 1 0 auto;
    margin-bottom: 0;
}

footer {
    flex-shrink: 0;
    margin-top: auto; /* This is a slightly different shade of dark blue, but you can adjust it to your liking */
}

.footer-text {
    font-size: small;
    font-family: 'Arial', sans-serif; /* You can change the font family */
    color: white; /* Basic text color */
    margin: 10px; /* Adjust spacing around items */
    padding: 5px; /* Padding inside items */
    transition: all 0.3s ease;
    font-style: italic; /* Smooth transition for hover effects */
    text-decoration: none; /* Remove any underline */
    font-weight: bold;
}

.footer-text:hover {
    transform: scale(1.1); /* Slightly enlarges the item */
    cursor: pointer; /* Changes cursor to indicate clickable */
}

.flex-grow-1 {
    flex-grow: 1;
}

#mainContent {
    display: none;
}

/* Improve the typography and hover effects for navigation links */
.navbar-nav .nav-item .nav-link {
    font-family: 'Gill Sans'; /* Choose a modern, readable font */
    font-size: 1.1rem; /* Slightly larger font size for better readability */
    font-weight: 500; /* Medium font weight for better legibility */
    color: #333333; /* Dark gray color for contrast */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition for hover effects */
    text-transform: uppercase;
    
}

.navbar-nav .nav-item .nav-link:hover, .navbar-nav .nav-item.active .nav-link {
    color: #FFFFFF; /* Light color for hover state */
    background-color: #e67e22; /* Slightly darker orange for hover background */
    border-radius: 5px; /* Rounded corners for the hover background */
}

/* Sticky header */
.navbar.fixed-top {
    z-index: 1020; /* Ensure the header is above other elements */
    transition: background-color 0.3s; /* Smooth transition for background color change on scroll */
}

/* Active and hover styles */
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    color: #FFFFFF; /* White text for active or hovered link */
    background-color: #e67e22; /* Darker orange background for active or hovered link */
    border-radius: 5px; /* Rounded corners */
}