/* General Reset for Body */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* General Body Styles */
body {
    font-family: 'Futura', sans-serif;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    padding: 10px; /* Add outside padding of 10px */
    box-sizing: border-box; /* Include padding in the element's total width and height */
}

/* Centered paragraph above YouTube video */
.centered-paragraph {
    font-size: 1rem; /* Set the default font size */
    color: white;
    text-align: left; /* Left-align the paragraph */
    width: 90%; /* Make the paragraph take up 80% of the container */
    margin: 0 auto 20px auto; /* Center it horizontally and add some bottom margin */
}

/* Optional: Indent the first word more than the rest of the paragraph */
.centered-paragraph::first-letter {
    margin-left: 1em; /* Add extra space before the first letter of the paragraph */
}

/* Styling for H1 text */
h1 {
    font-size: 3rem; /* Set a default font size */
    width: 100%; /* Make the h1 take up the full width of the container */
    color: white;
    text-align: center; /* Center the text */
    margin-bottom: 2px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Styling for H2 text */
h2 {
    font-size: 1.2rem; /* Set a default font size */
    width: 100%; /* Make the h1 take up the full width of the container */
    color: white;
    text-align: center; /* Center the text */
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: normal;
}

.page-title h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Layout Container - Constrain the layout to 1024px */
.container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Contact Information Section */
.contact-info {
    text-align: center;
    margin-bottom: 40px;
}

.contact-info h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.contact-info p {
    font-size: 1.2rem;
    margin: 10px 0;
}

.contact-info a {
    color: limegreen;
    text-decoration: none;
}

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

/* Google Map Section */
.google-map {
    text-align: center;
}

.google-map h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* Make the embedded map responsive */
.map-container iframe {
    width: 100%;
    height: 450px;
    border: none;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    /* Adjust contact info text size */
    .contact-info p {
        font-size: 1rem;
    }

    /* Adjust the map size on small screens */
    .map-container iframe {
        height: 300px;
    }
}

/* Gallery Section */

/* Gallery Section */
.gallery {
    width: 100%;
    text-align: center;
    padding: 20px 10px;
}

.gallery h2 {
    font-size: 2rem;
    color: white;
    margin-bottom: 20px;
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between gallery items */
    justify-content: center;
}

.gallery-item {
    width: 100%;
    max-width: 300px; /* Limit the size of each gallery item */
    text-align: center;
    background-color: #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-image {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

.project-info {
    padding: 15px;
    color: white;
}

.project-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.project-description {
    font-size: 1rem;
    color: #ddd;
    line-height: 1.5;
}

/* Mobile view */
@media screen and (max-width: 768px) {
    .gallery-container {
        flex-direction: column; /* Stack gallery items vertically on small screens */
        align-items: center;
    }

    .gallery-item {
        max-width: 100%;
    }

    .project-title {
        font-size: 1rem;
    }

    .project-description {
        font-size: 0.9rem;
    }
}

.gallery {
    text-align: center;
    padding: 4px 20px;
    background-color: #000000;
    color: white;
}

.gallery h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Create a 4-column grid layout */
    gap: 10px;
    justify-items: center;
    align-items: center;
}

/* Regular Thumbnails */
.gallery-item {
    flex: 1;
    max-width: 100%;
}

.gallery-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.gallery-thumbnail:hover {
    transform: scale(1.05);
}

/* Large Image Spanning 4 Thumbnails */
.gallery-item.large-image {
    grid-column: span 4; /* This makes the image span across all four columns */
}

/* 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%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.9); /* Black background with transparency */
    text-align: center;
}

.modal-content {
    margin: auto;
    max-width: 90%;
    max-height: 90%;
    display: block;
    margin-top: 5%;
}

.caption {
    color: #f1f1f1;
    font-size: 18px;
    padding: 10px;
    text-align: center;
}

/* Close Button */
.close {
    color: white;
    font-size: 36px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 25px;
    color: #f1f1f1;
    cursor: pointer;
}

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

/* Mobile Adjustments */
@media (max-width: 768px) {
    .gallery-container {
        grid-template-columns: repeat(2, 1fr); /* Switch to a 2-column grid on smaller screens */
    }

    .gallery-item.large-image {
        grid-column: span 2; /* On small screens, large image will span 2 columns */
    }
}

@media (max-width: 480px) {
    .gallery-container {
        grid-template-columns: 1fr; /* Switch to 1 column on very small screens */
    }

    .gallery-item.large-image {
        grid-column: span 1; /* On very small screens, large image will take the full width */
    }
}


/* Services Section */
.services {
    text-align: center;
    padding: 6px 0;
    background-color: #000000; /* Optional: background color for the services section */
    color: white;
}

.services h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Container for two service columns */
.service-columns {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* Space between the two columns */
    width: 80%;
    margin: 0 auto;
}

/* Style for each service column */
.service-column {
    flex: 1;
    padding: 0px;
    text-align: left; /* Left align text in columns */
}

.service-column h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: bold;
}

.services h2 {
    font-size: 2rem;
    padding-bottom: 10px; /* Adds spacing between text and the underline */
}

.service-column .bullet {
    margin-right: 10px; /* Space between bullet and the text */
    color: white; /* Color of the bullet */
    font-size: 1rem; /* Size of the bullet */
}

.service-column ul {
    list-style: none; /* Remove default bullets */
    padding-left: 30px; /* Indentation for list items */
}

.service-column li {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 10px; /* Space between each service item */
}

/* General Video Styles */
.youtubecontainer {
    border-radius: 10px;  /* Adjust this value to change the roundness */
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 10px;
}

/* Layout Container - Constrain the layout to 1024px */
.container {
    width: 100%;
    max-width: 1024px; /* Ensure the website never exceeds 1024px */
    margin: 0 auto; /* Center the content */
}

/* Header Section */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 100%;
    border-bottom: 1px dotted white;
}

.logo-container img {
    width: 150px; /* Adjust logo size */
}

.nav-container {
    display: flex;
    justify-content: flex-end;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 15px; /* Ensure there’s space between each navigation item */
}

.nav-links li {
    display: inline-block;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: normal;
}

.nav-links a:hover {
    color: #5ed863;
}

/* Adding white "|" separator between links */
.nav-links li:not(:last-child)::after {
    content: " |";
    color: white;
    margin-left: 10px;

}

/* Body Section */
.body-section {
    width: 100%;
    padding: 10px 0; /* Removed left and right padding */
    text-align: center;
}

.body-image {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Footer Section */
.footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    border-top: 1px dotted white;
    background-color: black;
}

.footer-column {
    flex: 1; /* Allow columns to take up equal space */
    padding: 0 20px; /* Consistent padding */
    text-align: center; /* Center text horizontally in each column */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content vertically */
    min-width: 250px; /* Prevent column from shrinking too much and causing wrapping */
}

/* Footer Column Heading */
.footer-column h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    padding-top:10px;
    font-weight: bold;
    text-decoration: underline dotted white;
}

/* Footer Column Text */
.footer-column p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Mobile View Adjustments */
@media screen and (max-width: 768px) {
    .footer {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .footer-column {
        width: 100%;
        padding: 10px 0;
        text-align: center; /* Ensure footer columns are centered */
    }

    .footer-column:first-child,
    .footer-column:nth-child(2),
    .footer-column:last-child {
        text-align: center;
    }
}

/* Adjust font size on smaller screens */

@media (max-width: 768px) {
    h1 {
        font-size: 1.4rem; /* Adjust for mobile screens */
    }
}

@media (max-width: 768px) {
    h2 {
        font-size: 1rem; /* Adjust for mobile screens */
    }
}

/* Mobile View - Stack the service columns into one */
@media (max-width: 768px) {
    .service-columns {
        flex-direction: column; /* Stack the columns vertically */
        gap: 10px; /* Add space between stacked columns */
        width: 90%;
    }

    .service-column {
        padding: 0; /* Padding for the stacked columns */
    }
}


/* Mobile View */
@media screen and (max-width: 768px) {
    /* Make header layout vertical on smaller screens */
    .header {
        flex-direction: column;
        align-items: center;
    }

    .nav-container {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px; /* Reduce gap between links on smaller screens */
        font-size: 0.8rem; /* Reduce the font size */
    }

    /* Adding white "|" separator between links */
    .nav-links li:not(:last-child)::after {
        content: " |";
        color: white;
        margin-left: 10px;
    }

    /* Footer Layout for Mobile */
    .footer {
        flex-direction: column; /* Stack the footer columns vertically */
        align-items: center; /* Center the columns */
        text-align: center; /* Center the text in the footer */
        width: 100%;
    }

    .footer-column {
        width: 100%; /* Ensure each column takes the full width */
        padding: 10px 0;
        text-align: center; /* Center text inside each column */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Ensure all footer columns are centered on mobile */
    .footer-column:first-child,
    .footer-column:nth-child(2),
    .footer-column:last-child {
        text-align: center; /* All footer content should be centered */
    }
}


/* Desktop Footer Adjustment for Left, Center, and Right Alignment */
.footer-column:first-child {
    text-align: left; /* Align the first column to the left */
}

.footer-column:nth-child(2) {
    text-align: center; /* Keep the second column centered */
}

.footer-column:last-child {
    text-align: right; /* Align the third column to the right */
}



.gallery-info {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Reduced gap for a tighter layout */
    padding: 20px; /* Reduced padding to tighten up the space */
    color: white;
    align-items: flex-start; /* Aligns the top of both sections */
}

.contributors, .project-details {
    flex: 1;
    padding: 15px; /* Reduced padding inside sections */
    border-radius: 8px;
}

.contributors h3, .project-details h3 {
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 18px;
    border-bottom: 2px solid #444;
    padding-bottom: 5px;
}

.contributor {
    margin-bottom: 10px; /* Reduced space between contributors */
}

.contributor-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 2px; /* Reduced spacing */
}

.contributor-role {
    font-size: 14px;
    color: #bbb;
    margin: 0;
}

.project-title {
    text-align: center;
    font-size: 26px; /* Slightly smaller title for balance */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px; /* Reduced space below title */
    color: white;
    letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
    .gallery-info {
        flex-direction: column;
        align-items: center;
        gap: 10px; /* Reduce gap on smaller screens */
    }

    .contributors, .project-details {
        width: 100%;
        padding: 12px; /* Slightly less padding on mobile */
    }
}