body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #333;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px; /* Reduced padding for a slightly smaller header */
    background-color: white;
    position: relative; /* Needed for absolute positioning of nav-toggle */
    z-index: 1000; /* Ensures header is above other content */
}

.logo img {
    max-height: 40px; /* Increased logo size slightly for better visibility */
    width: auto;
}

/* --- Navigation Styles (Desktop First) --- */
nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
    padding: 0;
    margin: 0;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 10px 15px; /* Added padding for clickable area */
    display: block; /* Make links block for full clickable area */
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #1E355E;
}

/* --- Dropdown Menu Styling (Desktop) --- */
.dropdown {
    position: relative; /* Parent for dropdown positioning */
}

.dropdown-menu {
    display: none; /* Initially hidden */
    background-color: white;
    position: absolute;
    top: 100%; /* Position right below the parent link */
    left: 0;
    width: 250px;
    padding: 10px 0;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* More prominent shadow */
    border-radius: 5px;
    max-height: 400px;
    overflow-y: auto;
    flex-direction: column;
    opacity: 0; /* Start with opacity 0 for animation */
    transform: translateY(-10px); /* Start slightly above for slide-down effect */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    font-size: 16px;
    text-decoration: none;
    color: #333;
    transition: background 0.3s ease, color 0.3s ease;
    line-height: 1.4; /* Slightly adjusted line-height */
    white-space: normal;
}

.dropdown-menu a:hover {
    background: #e9ecef; /* Lighter hover background */
    color: #1E355E; /* Change text color on hover */
}

/* Show dropdown menu on hover for desktop */
.dropdown:hover .dropdown-menu,
.dropdown-menu.show { /* '.show' class controlled by JS for active state */
    display: flex; /* Use flex to align items vertically */
    opacity: 1;
    transform: translateY(0);
}

/* --- Hero Sections --- */
.hero, .hero2 {
    position: relative;
    width: 100%;
    height: 90vh; /* Adjusted height for hero sections */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0; /* Removed margin-top, let header handle spacing */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    color: white; /* Ensure text is white over image */
}

.hero {
    background-image: url('fire-safety-image.webp');
}

.hero2 {
    background-image: url('about-header.webp');
}

.hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    display: flex;
    flex-direction: column; /* Stack text and buttons vertically */
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.hero-text {
    max-width: 900px; /* Increased max-width for text */
    padding: 0 20px; /* Add padding to text for smaller screens */
}

.hero h1, .hero2 h1 {
    font-size: 3.5em; /* Larger font size for headings */
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero p {
    font-size: 1.2em; /* Larger font size for paragraphs */
    margin-bottom: 30px;
    line-height: 1.6;
}

.buttons {
    display: flex;
    gap: 15px; /* Spacing between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    justify-content: center;
    margin-top: 20px;
}

.btn-primary, .btn-secondary {
    padding: 14px 28px; /* Slightly larger buttons */
    font-size: 17px;
    border: none;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
    text-align: center;
}

.btn-primary {
    background-color: #1E355E;
    color: white;
}

.btn-secondary {
    background-color: white;
    color: #1E355E;
    border: 2px solid #1E355E;
}

.btn-primary:hover {
    background-color: #152A4A; /* Darker blue on hover */
    border-color: #152A4A;
}

.btn-secondary:hover {
    background-color: #1E355E;
    color: white;
}

/* --- About Section --- */
.about {
    max-width: 900px; /* Consistent max-width */
    margin: 60px auto; /* More vertical spacing */
    padding: 30px; /* More padding */
    text-align: center;
    background-color: white; /* Clear background */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Light shadow */
}

.about h1 {
    font-size: 2.5em;
    color: #1D365F;
    margin-bottom: 25px;
    line-height: 1.3;
}

.about-text {
    font-size: 1.1em;
    line-height: 1.8;
    color: #555; /* Slightly lighter text for readability */
    margin-bottom: 30px;
}

/* --- Services Overview Section (`services.html`) --- */
.services-overview {
    background-image: url(fprs.jpg);
    padding: 60px 20px;
    text-align: center;
}

.services-container {
    max-width: 1000px;
    margin: auto;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.services-container h2 {
    text-align: center;
    color: #1D365F;
    font-size: 32px;
    margin-bottom: 20px;
}

.services-container h3 {
    color: #1D365F; /* Stronger color for service headings */
    font-size: 26px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-bottom: 2px solid #e9ecef; /* Subtle separator */
    padding-bottom: 10px;
}

.services-container p {
    font-size: 1.1em;
    line-height: 1.7;
    color: #444;
}
.services-container p a {
    color: #1E355E;
    font-weight: bold;
    text-decoration: none;
}
.services-container p a:hover {
    text-decoration: underline;
}

/* --- Solutions Section (`solutions.html`) --- */
.services-hero { /* Renamed from solutions-hero for clarity if used broadly */
    width: 100%;
    height: 70vh; /* Consistent hero image height */
    overflow: hidden;
}

.services-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services { /* Reused class name from other sections */
    max-width: 900px;
    margin: 60px auto;
    padding: 30px;
    text-align: left; /* Align text left for readability */
}

.services h1 {
    font-size: 2.5em;
    color: #1D365F;
    margin-bottom: 30px;
    text-align: center; /* Center the main heading */
}

.service {
    margin-bottom: 30px;
    padding: 25px;
    border-left: 5px solid #1D365F; /* More prominent border */
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Lighter shadow */
    transition: transform 0.2s ease-in-out;
}
.service:hover {
    transform: translateY(-5px); /* Subtle lift on hover */
}

.service h2.service-title { /* Explicitly target h2 with service-title class */
    font-size: 1.8em;
    color: #1D365F;
    margin-top: 0;
    margin-bottom: 10px;
    cursor: pointer; /* Indicate it's clickable */
    transition: color 0.3s ease;
}
.service h2.service-title:hover {
    color: #FF6B6B; /* A more engaging hover color */
}

/* Styling for collapsible description */
.service p {
    font-size: 1em;
    line-height: 1.7;
    color: #555;
    /* Initial state for collapsible content */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}

.service p.show-description { /* Class controlled by JS */
    max-height: 500px; /* Enough height to show content */
    opacity: 1;
    margin-top: 15px;
}
.service p a { /* Learn More links within descriptions */
    color: #1E355E;
    font-weight: bold;
    text-decoration: none;
    margin-left: 5px;
}
.service p a:hover {
    text-decoration: underline;
}

/* --- Contact Section --- */
.contact {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh; /* Minimum height for contact section */
    text-align: center;
    background: #1E355E;
    position: relative;
    padding: 60px 20px; /* Add vertical padding */
    box-sizing: border-box;
}

.contact-container {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow */
    max-width: 800px; /* Max-width for the container */
    width: 100%; /* Ensure it takes full width up to max-width */
    position: relative;
    z-index: 2;
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box;
    overflow: hidden;
}

.contact-container h1 {
    color: #1D365F;
    font-size: 2.5em;
    margin-bottom: 25px;
}

.contact-container p {
    font-size: 1.1em;
    margin: 10px 0;
    line-height: 1.6;
    color: #444;
}

.contact-container a {
    color: #1E355E; /* Consistent link color */
    text-decoration: none;
    font-weight: bold;
}
.contact-container a:hover {
    text-decoration: underline;
}

/* Map specific styling */
.google-map {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 8px;
    margin-top: 30px; /* Space above the map */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* --- Footer --- */
.footer {
    background-color: #1D365F;
    color: white;
    padding: 40px 20px;
    text-align: left;
    margin-top: 0; /* Remove top margin, handled by sections */
    box-sizing: border-box;
}

.footer-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
}

.footer-logo {
    flex: 1; /* Allows logo div to take available space */
    min-width: 150px; /* Ensure logo has minimum width */
    margin-right: 20px;
}

.footer-logo img {
    max-height: 50px; /* Adjusted size for footer logo */
    width: auto;
    filter: brightness(0) invert(1); /* Makes logo white for dark background */
}

.footer-contact {
    flex: 2; /* Allows contact info to take more space */
    max-width: 450px;
    text-align: right; /* Align contact text to the right on desktop */
}

.footer-contact p {
    margin: 5px 0;
    font-size: 1em;
}

.footer-contact a {
    color: white;
    text-decoration: none;
    font-weight: normal; /* Less bold than main links */
}

.footer-contact a:hover {
    text-decoration: underline;
}

.footer p:last-child { /* Target copyright text */
    margin-top: 15px;
    font-size: 0.9em;
    opacity: 0.8;
}

/* --- Scrolling Logos Section --- */
.logos {
    overflow: hidden;
    width: 100%;
    padding: 40px 0; /* Added vertical padding */
    background-color: white;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 50px 0;
}

.logo-container {
    display: flex;
    white-space: nowrap; /* Prevent wrapping of logos */
    animation: scrollLogos 30s linear infinite;
    padding: 0 20px; /* Ensure logos don't touch edges initially */
}

.logo-container img {
    height: 70px; /* Adjusted logo height */
    margin-right: 50px; /* More space between logos */
    flex-shrink: 0; /* Prevent logos from shrinking */
    opacity: 0.7; /* Slightly faded */
    transition: opacity 0.3s ease;
}

.logo-container img:hover {
    opacity: 1; /* Full opacity on hover */
}

@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); /* Scroll only half the width to create seamless loop with doubled content */ }
}
/* To make the infinite scroll seamless, you often need to duplicate the content within .logo-container in your HTML
   or dynamically duplicate it with JavaScript so the animation transition is smooth.
   For example, if you have 20 logos, you'd have logo1...logo20logo1...logo20. */


/* --- Mobile Responsiveness --- */
/* Hamburger Menu (visible on mobile) */
.nav-toggle {
    display: none; /* Hidden by default on desktop */
    position: absolute; /* Keep this */
    top: 20px; /* Adjust as needed */
    right: 20px;
    background: none;
    border: none;
    font-size: 35px; /* Larger icon */
    cursor: pointer;
    color: #1E355E; /* Color of the hamburger icon */
    z-index: 1001; /* Ensure it's above the mobile menu */
}

@media (max-width: 768px) {
    /* Header adjustments */
    header {
        padding: 10px 15px; /* Adjusted: Reduced padding for header */
    }

    /* Logo image adjustments for mobile */
    .logo img {
        max-height: 30px; /* Adjusted: Make the logo image smaller on mobile */
        width: auto; /* Maintain aspect ratio */
    }

    /* Show hamburger button */
    .nav-toggle {
        display: block;
        position: absolute;
        top: 5px;   /* Adjusted: Even closer to the top edge */
        right: 5px; /* Adjusted: Even closer to the right edge */
        background: transparent; /* Adjusted */
        border: none;
        font-size: 35px;
        cursor: pointer;
        color: #1E355E;
        z-index: 9999; /* Adjusted: Extremely high z-index to ensure it's on top */
        padding: 10px; /* Adjusted: Increased clickable area */
        border-radius: 3px;
        outline: none; /* Adjusted */
    }

    /* Hide desktop navigation and style mobile menu */
    nav ul {
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 100%; /* Initially off-screen */
        width: 100%;
        height: 100%;
        background-color: white;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
        z-index: 999; /* Below toggle button */
        transition: transform 0.4s ease-in-out;
        overflow-y: auto;
        box-sizing: border-box;
    }

    /* Mobile menu slides in */
    nav ul.show {
        transform: translateX(-100%);
    }

    nav ul li {
        margin: 15px 0; /* Spacing between menu items */
    }

    nav ul li a {
        font-size: 26px; /* Larger links for touch */
        color: #333;
        padding: 15px 20px;
    }

    /* Dropdown menus on mobile */
    .dropdown-menu {
        position: static; /* Stack dropdown items normally */
        width: auto; /* Take full available width */
        box-shadow: none; /* No shadow in mobile menu */
        border-radius: 0;
        max-height: fit-content;
        opacity: 1; /* Always visible when active */
        transform: translateY(0);
        padding: 10px 0;
        background-color: #f8f9fa; /* Slightly different background for sub-menu */
        margin-top: 10px; /* Space from parent link */
    }

    .dropdown-menu a {
        font-size: 20px; /* Smaller sub-links */
        padding: 10px 30px; /* Indent sub-links */
    }

    .dropdown-menu.show { /* For mobile clicks */
        display: flex; /* Show the sub-menu when toggled */
    }

    /* General mobile padding and font adjustments */
    body {
        padding: 0; /* Reset body padding for consistent layout */
    }

    .hero h1, .hero2 h1 {
        font-size: 2.5em; /* Smaller hero title for mobile */
    }

    .hero p {
        font-size: 1em;
    }

    .buttons {
        flex-direction: column; /* Stack buttons vertically */
        gap: 10px;
    }

    .btn-primary, .btn-secondary {
        width: 80%; /* Make buttons wider */
        max-width: 300px;
        margin: 0 auto; /* Center buttons */
    }

    .about, .services, .services-overview .services-container, .contact-container {
        padding: 30px 20px; /* Consistent padding for main content sections */
        margin: 40px auto; /* Adjust vertical margin */
    }

    .about h1, .services h1, .contact-container h1 {
        font-size: 2em;
    }

    .about-text, .services-container p, .contact-container p, .service p {
        font-size: 0.95em; /* Slightly smaller text */
    }

    .service h2.service-title {
        font-size: 1.5em;
    }

    .google-map {
        height: 250px; /* Smaller map on mobile */
    }

    .footer-container {
        flex-direction: column; /* Stack footer elements */
        text-align: center;
        align-items: center;
    }

    .footer-logo, .footer-contact {
        margin: 0;
        text-align: center;
        width: 100%;
        max-width: none;
    }

    .footer-logo img {
        margin-bottom: 20px;
    }

    .footer-contact p {
        margin-bottom: 10px;
    }

    .logos {
        padding: 20px 0;
    }

    .logo-container img {
        height: 50px; /* Smaller logos on mobile */
        margin-right: 30px;
    }

    @keyframes scrollLogos {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } /* Still scrolls, but less impact */
    }
}

/* --- Service Subpage Specific Styles (e.g., pms.html, fas.html) --- */
.service-page {
    padding: 80px 20px; /* Generous padding for content */
    max-width: 900px; /* Limit content width for readability */
    margin: 40px auto; /* Center the content horizontally with vertical margin */
    background-color: #ffffff; /* White background for the content area */
    border-radius: 10px; /* Slightly rounded corners */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
    text-align: center; /* Center the main heading */
}

.service-page h1 {
    font-size: 3em; /* Larger, prominent heading */
    color: #1D365F; /* Consistent brand color */
    margin-bottom: 30px; /* Space below the heading */
    line-height: 1.2;
    position: relative; /* For potential underline effect */
    padding-bottom: 15px; /* Space for pseudo-element underline */
}

.service-page h1::after {
    content: '';
    position: absolute;
    left: 50%; /* Center the underline */
    transform: translateX(-50%); /* Adjust for perfect centering */
    bottom: 0;
    width: 80px; /* Length of the underline */
    height: 4px; /* Thickness of the underline */
    background-color: #FF6B6B; /* Accent color for the underline */
    border-radius: 2px;
}

.service-content {
    text-align: left; /* Align description text to the left for readability */
    margin-top: 40px; /* Space between heading and content */
}

.service-content p.service-description {
    font-size: 1.15em; /* Slightly larger text for readability */
    line-height: 1.8; /* Good line spacing */
    color: #444; /* Darker text for good contrast */
    margin-bottom: 20px; /* Space between paragraphs if multiple exist */
}

/* Responsive adjustments for service subpages */
@media (max-width: 768px) {
    .service-page {
        padding: 40px 15px; /* Reduced padding on smaller screens */
        margin: 20px auto; /* Reduced margin on smaller screens */
    }

    .service-page h1 {
        font-size: 2.2em; /* Smaller heading on mobile */
        margin-bottom: 25px;
    }

    .service-page h1::after {
        width: 60px; /* Smaller underline on mobile */
    }

    .service-content p.service-description {
        font-size: 1em; /* Standard text size on mobile */
        line-height: 1.6;
    }
}

/* Responsive adjustments for service subpages */
@media (max-width: 768px) {
    .service-page {
        padding: 40px 15px; /* Reduced padding on smaller screens */
        margin: 20px auto; /* Reduced margin on smaller screens */
    }

    .service-page h1 {
        font-size: 2.2em; /* Smaller heading on mobile */
        margin-bottom: 25px;
    }

    .service-page h1::after {
        width: 60px; /* Smaller underline on mobile */
    }

    .service-content p.service-description {
        font-size: 1em; /* Standard text size on mobile */
        line-height: 1.6;
    }
}