body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}
header {
    background-color: #f8f8f8; /* Light background for the header */
    padding: 10px 20px; /* Padding for the header */
}

.header-container {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between logo and nav */
    align-items: center; /* Center items vertically */
}

.logo {
    width: 100px; /* Logo width */
    height: auto; /* Maintain aspect ratio */
}

nav {
    position: relative; /* Positioning context for the menu */
}

.nav-list {
    list-style: none; /* Remove bullet points */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: flex; /* Display items in a row */
}

.nav-list li {
    margin-left: 20px; /* Space between menu items */
}

.nav-list a {
    text-decoration: none; /* Remove underline from links */
    color: #333; /* Link color */
}

/* Mobile styles */
.menu-toggle {
    display: none; /* Hide the toggle button by default */
    font-size: 24px; /* Size of the toggle button */
    background: none; /* No background */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .nav-list {
        display: none; /* Hide the nav list by default */
        flex-direction: column; /* Stack items vertically */
        position: fixed; /* Position it absolutely */
        top: 60px; /* Position below the header */
        right: 0; /* Align to the right */
        background-color: #f8f8f8; /* Background color for dropdown */
        width: 100%; /* Full width */
        z-index: 1000; /* Ensure it appears above other content */
        max-height: 300px; /* Set a max height for the dropdown */
        overflow-y: auto; /* Allow scrolling if content exceeds max height */
    }

    .nav-list.active {
        display: flex; /* Show the nav list when active */
    }

    .menu-toggle {
        display: block; /* Show the toggle button on mobile */
    }
}
.full-image {
    position: relative; /* Positioning context for absolute positioning */
    width: 100%; /* Full width */
    overflow: hidden; /* Hide overflow */
}

.full-image img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    /* display: block;  Remove bottom space */
}

.mobile-image {
    display: none; /* Hide mobile image by default */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .desktop-image {
        display: none; /* Hide desktop image on mobile */
    }
    .mobile-image {
        display: block; /* Show mobile image on mobile */
    }
}
/* half and half section */
.half-text-half-image {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    padding: 20px; /* Add some padding */
}

.text {
    flex: 1; /* Allow text to take available space */
    max-width: 500px; /* Set a max width for the text */
    padding: 20px; /* Add padding around the text */
}

.image {
    flex: 1; /* Allow image to take available space */
    display: flex; /* Use flexbox for centering the image */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
}

.image img {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the area while maintaining aspect ratio */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .half-text-half-image {
        flex-direction: column; /* Stack items vertically on mobile */
        text-align: center; /* Center text on mobile */
    }

    .text {
        max-width: 100%; /* Allow text to take full width on mobile */
    }
}

.colored-background {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}



#projects {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: center; /* Center items horizontally */
    text-align: center; /* Center text */
    padding: 20px; /* Add some padding */
}

.project {
    margin: 20px; /* Space between projects */
    max-width: 300px; /* Set a max width for each project */
    flex: 1 1 300px; /* Allow the project to grow and shrink, with a base width of 300px */
}

.project img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
}

hr {
    margin: 10px 0; /* Space above and below the horizontal rule */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    #projects {
        flex-direction: column; /* Stack items vertically on mobile */
    }
}

.enquire-now {
    text-align: center;
    margin: 20px 0;
}

/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 40px;
    border: 1px solid #888;
    width: 40%; /* Could be more or less, depending on screen size */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Stack logo and nav vertically */
        padding-right: 0; /* Remove right padding */
    }

    nav {
        margin-right: 0; /* Remove right margin */
        margin-top: 10px; /* Add some space above the nav */
    }

    nav ul {
        display: flex;
        flex-direction: column; /* Stack nav items vertically */
        align-items: center; /* Center nav items */
    }

    nav ul li {
        margin: 5px 0; /* Space between nav items */
    }

    .half-text-half-image {
        flex-direction: column; /* Stack text and image vertically */
    }

    .half-text-half-image .text, .half-text-half-image .image {
        width: 100%; /* Full width for both text and image */
    }

    .project {
        width: 100%; /* Full width for projects */
        margin: 10px 0; /* Space between projects */
    }

    .enquire-now {
        margin: 20px 0;
        padding: 10px; /* Add some padding */
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 90%; /* Make modal content narrower on small screens */
    }

    header img {
        width: 80px; /* Adjust logo size */
        height: auto; /* Maintain aspect ratio */
    }
}

footer {
    position: relative;
    text-align: center;
    color: white;
    width: 100%; /* Ensure footer takes full width */
}

footer div {
    background-image: url('img/footer.jpg');
    background-size: cover; /* Ensures the image covers the entire footer */
    background-position: center; /* Centers the image */
    padding: 100px 0; /* Adjust padding as needed */
    width: 100%; /* Full width */
    height: auto; /* Adjust height automatically */
}

/* Responsive Styles for Mobile View */
@media (max-width: 768px) {
    footer div {
        padding: 50px 0; /* Adjust padding for mobile view */
        height: 100vh; /* Set height to full viewport height */
    }
}