body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #333; /* Dark grey background for the whole page */
    position: relative; /* Added to provide a positioning context */
    z-index: 0; /* Ensures the body is at the base layer */
}

.navbar, .hero {
    position: relative; /* This ensures that z-index can be applied */
    z-index: 2; /* Higher z-index ensures these elements are on top */
}



/* Updated to remove duplicate navbar CSS and combined the styles */
.navbar {
    background-color: #39245D;
    overflow: hidden;
    text-align: center;
    position: -webkit-sticky; /* For Safari browser support */
    position: sticky;
    top: 0; /* Set the top position to align with the top of the viewport */
    z-index: 1000; /* Ensures the navbar is above other elements when scrolling */
   
}

.navbar a {
    display: block;
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
    float: left;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.navbar a:hover {
    background-color: #211239;
}

.hero {
    background-color: #2c2c2c;
    padding: 40px;
    text-align: center;
    color: #f5f5f5;
    font-family: 'Roboto Condensed', sans-serif;
}

.hero h1 {
    font-size: 2rem;
}

.hero .logo {
    position: absolute;
    top: 0%;
    left: 20px;
    width: 200px;
    height: auto;
}

@media (max-width: 800px) {
    .hero {
        position: relative;  /* Allows absolute positioning within this container */
        height: 120px;  /* Provides a specific height to the hero section */
        text-align: center;  /* Ensures text elements are centered; useful if text reappears */
    }

    .hero h1, .hero p {
        display: none;  /* Hides text to focus on the logo */
    }

    .hero .logo {
        position: absolute;  /* Allows precise control over the logo's position */
        top: 50%;  /* Centers the logo vertically */
        left: 50%;  /* Centers the logo horizontally */
        transform: translate(-50%, -50%);  /* Corrects the position to truly center the logo */
        width: 30%;  /* Increases the logo's width on small screens */
        margin: 0;  /* Removes any margin, ensuring no extra space is affecting positioning */
    }
}


.intro-banner {
    display: flex;
    flex-direction: column; /* Stack child elements vertically */
    justify-content: center; /* Center items vertically, if there are multiple items */
    align-items: center; /* Center items horizontally */
    height: 50vh; /* Full viewport height */
    padding: 20px; /* Add some padding around the content */
    background-image: url('images/QDSlandscapeGuards.jpeg');
    background-size: cover;
    background-position: center;
}

@media (max-width: 768px) {
    .intro-banner {
        height: 40vh; /* Reduce the height for smaller devices */
    }
}


  
  .banner-content {
    margin-top: -20px;
    margin-bottom: auto;
    position: absolute;
    top: 50%; /* Centers the content vertically. Adjust as necessary */
    left: 50%; /* Centers the content horizontally */
    transform: translate(-50%, -200%); /* Adjusts the positioning to truly center based on the element's dimensions */
    text-align: center; /* Centers the text within the content */
    width: 90%; /* Limits the width of the content to ensure padding on the sides. Adjust as needed */
    max-width: 1200px;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    
  }

  .intro-banner .banner-content h1 {
    color: #f5f5f5; 
    font-size: 2.5rem;
  }
  
  .intro-banner .banner-content p {
    color: #d3d3d3; /* Replace with the color you want for the body text */
    font-size: 1.2rem;
  }

  

.services-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns children to the top */
    background-color: #333333; /* Light background to keep it bright and readable */
    color: #f5f5f5; /* Dark text for contrast */
    padding: 40px 20px; /* Ample padding for visual space */
    text-align: center; /* Center-aligning the text */
    z-index: 3;
    font-family: 'Roboto Condensed', sans-serif;
}

.services-section h2 {
    padding-bottom: 20px;
    font-size: 2.5rem; /* Larger font size for the heading */
    margin-bottom: 30px; /* Space below the heading */
    color: #f5f5f5; /* Matching the primary color theme */
}

.services-container {
    margin-bottom: -20px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center; /* This will center the items */
    gap: 20px; /* Keeps space between the items */
    flex-wrap: wrap; /* Allows items to wrap if needed, but with only two items, they should stay in one row */
}


.service-item {
    background-color: #39245D; /* Slightly off-white background for each item */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Padding inside each service item */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Soft shadow for depth */
}

.service-item h3 {
    font-size: 1.5rem; /* Slightly larger font for service titles */
    margin-bottom: 15px; /* Space below the title */
}

.service-item p {
    font-size: 1rem; /* Regular font size for descriptions */
    line-height: 1.6; /* Improved readability for longer text */
}

/*.service-item:last-of-type {
    margin-bottom: 60px; /* This adds space below the last service box */
/*}*/

@media (max-width: 768px) {
    .services-container {
        flex-direction: column; /* For Flexbox */
        grid-template-columns: 1fr; /* For Grid, adjusts to a single column layout */
    }
}

.contact-section {
    background-color: #f4f4f4; /* Or any background color that fits your website's theme */
    padding: 40px 20px 100px;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
}

.contact-section .container {
    max-width: 600px; /* Or the max-width that fits your design */
    margin: 0 auto;
}

.contact-section h2 {
    color: #333; /* A color that stands out on the background */
    margin-bottom: 20px;
}

.contact-section p {
    color: #666; /* Slightly lighter text for the description */
    line-height: 1.6;
}

.email-link {
    color: #8A2BE2; /* Use your brand color */
    font-weight: bold; /* Makes the email link bold */
    text-decoration: none; /* Removes the underline from the link */
}

.email-link:hover,
.email-link:focus {
    text-decoration: underline; /* Adds underline on hover/focus for visual feedback */
    color:#211239; /* A darker shade for the hover state */
}

.contact-section .phone-link {
    color: #8A2BE2; /* Match the brand color or choose a distinct color for phone links */
    text-decoration: none; /* Optional: Removes the underline from the link */
}

.contact-section .phone-link:hover,
.contact-section .phone-link:focus {
    text-decoration: underline; /* Adds underline on hover/focus for visual feedback */
}


/* Adjust the bottom padding on smaller screens */
@media (max-width: 768px) {
    .contact-section {
        padding-bottom: 150px; /* Increase if the footer is taller on smaller screens */
    }
}

footer {
    background-color: #2c2c2c;
    color: #d9d9d9;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 3; /* Ensure the footer is above all other content */
}

/* Base styles for About Section - mirroring Services Section */
.about-section {
    background-color: #333333; /* Same background color as Services for consistency */
    color: #f5f5f5; /* Light text for contrast */
    padding: 10px 10px; /* Adequate padding for visual spacing */
    text-align: center; /* Central alignment for headers and text */
    background-image: url('images/QDSAbout.jpg');
    background-size: cover;
    background-position: center;
}

.about-section h2 {
    font-size: 2.5rem; /* Large font size for the section heading */
    margin-bottom: 30px; /* Bottom margin for spacing below the header */
}

.about-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap in smaller screens */
    justify-content: space-evenly; /* Distributes space around items evenly */
    gap: 20px; /* Space between the flex items */
}

.about-item {
    background-color: #39245D; /* Theme color for items */
    border-radius: 8px; /* Rounded corners for aesthetics */
    padding: 20px; /* Padding inside each item */
    width: calc(33.333% - 20px); /* One third of the container width minus gap */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.about-item h3 {
    font-size: 1.5rem; /* Font size for subheadings */
    margin-bottom: 15px; /* Space below subheadings */
}

.about-item p {
    font-size: 1rem; /* Paragraph text size */
    line-height: 1.6; /* Line height for readability */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column; /* Stack items vertically on small screens */
    }

    .about-item {
        width: 100%; /* Full width for small screens */
    }
}
.expertise-section {
    background-color: #282828; /* Dark background for contrast */
    color: #ffffff; /* White text color */
    padding: 40px 20px; /* Padding for spacing */
    text-align: center; /* Center-align text */
}

.expertise-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    justify-content: space-around; /* Evenly spaces the flex items */
    gap: 20px; /* Gap between items */
}

.expertise-item {
    background-color: #393939; /* Slightly lighter background for items */
    border-radius: 8px; /* Rounded corners for aesthetics */
    padding: 20px; /* Padding inside each item */
    width: calc(50% - 20px); /* Half the width of container minus gap, two items per row */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Subtle shadow for depth */
}

.expertise-item h3 {
    margin-bottom: 10px; /* Space below the heading */
}

.expertise-item p {
    font-size: 1rem; /* Paragraph font size */
    line-height: 1.4; /* Line height for readability */
}

@media (max-width: 768px) {
    .expertise-container {
        flex-direction: column; /* Stack items vertically on smaller screens */
    }

    .expertise-item {
        width: 100%; /* Full width for small screens */
    }
    .expertise-item:last-of-type {
        margin-bottom: 60px; /* This adds space below the last service box */
    }
}