* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    overflow-y: auto;
}
body.no-scroll {
    overflow-y: hidden;
}

/* Menu styles */
.menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: white;
    z-index: 1000;
    
}
.menu ul {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
}
.menu li {
    margin-left: 20px;
}
.menu a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Main container */
.container,
.project-page {
    display: flex;
    padding-top: 40px; /* Reduced from 60px to 40px */
    min-height: calc(100vh - 70px);
}

/* Gallery styles */
.gallery {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
}
.tile {
    flex: 1 0 33.333%;
    height: 33.333vw;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.tile:hover img {
    transform: scale(1.1);
}

/* Project info styles */
.project-info,
.info-content,
.project-page .project-content {
    width: 66.666%;
    padding: 20px;
    background-color: #f8f8f8;
    overflow-y: auto;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
    display: none;
    padding-top: 40px; /* Reduced from 60px to 40px */
}
.project-info h2,
.info-content h2,
.project-page .project-content > h2 {
    margin-bottom: 30px;
    padding-top: 30px;
}
.project-info p,
.info-content p,
.project-page .project-content p {
    margin-bottom: 20px;
}

/* Close button styles */
.close-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 50%;
    z-index: 1002;
}
.mobile-close-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container,
    .project-page {
        flex-direction: column;
        padding-top: 40px; /* Reduced from 60px to 40px */
    }
    .gallery {
        flex-direction: column;
    }
    .tile {
        flex: 0 0 100%;
        height: 100vw;
    }
    .project-info,
    .info-content,
    .project-page .project-content {
        width: 100%;
        height: 100%;
        padding-top: 60px; /* Reduced from 80px to 60px */
    }
    .project-info h2,
    .info-content h2,
    .project-page .project-content h2 {
        padding-top: 30px; /* Slightly reduced padding for mobile, but still accounting for mobile menu */
    }
    .project-info img,
    .info-content img,
    .project-image {
        width: 100%; /* Full width on mobile */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Block element */
        margin: 10px 0; /* Vertical spacing */
        object-fit: cover; /* Cover the container while maintaining aspect ratio */
    }
    .close-btn {
        display: none;
    }
    .mobile-close-btn {
        display: block;
    }
}
/* Styles for direct project page access */
.project-page {
    padding-top: 40px; /* Reduced from 60px to 40px */
}

.project-page .project-content {
    width: 100%; /* This remains 100% for other project pages */
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px 20px; /* Reduced top padding from 80px to 60px */
    position: relative;
    height: auto;
    display: block;
    text-align: center;
}

/* Updated specific style for the contact page */
.project-page.contact-page .project-content {
    width: 80%; /* Set width to 80% for the contact page */
    max-width: 960px; /* 80% of 1200px */
}

.project-page .project-content > h2 {
    text-align: left;
    margin-bottom: 30px;
    padding-top: 20px;
    font-weight: bold;
}

.project-page .project-content p {
    margin-bottom: 20px;
    text-align: left;
}

.project-page .project-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
    object-fit: cover;
}

/* Responsive adjustments for direct project page access */
@media (max-width: 768px) {
    .project-page .project-content {
        padding: 20px; /* Increase padding for better readability */
    }
}

/* Common styling for all project and info page images */
.project-image,
.info-image {
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Block element */
    margin: 10px 0; /* Vertical spacing */
    object-fit: cover; /* Cover the container while maintaining aspect ratio */
}

/* Optional: Add a max-width for larger screens */
@media (min-width: 769px) {
    .project-image,
    .info-image {
        max-width: 100%; /* Limit width on larger screens if needed */
    }
}

/* Additional styles for about page */
.description-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.description-logo {
    max-width: 150px;
    height: auto;
    margin-right: 20px;
}

.info-content p {
    flex: 1;
}

/* Adjust alignment for mobile devices */
@media (max-width: 768px) {
    .description-container {
        flex-direction: column;
        align-items: flex-start; /* Change from center to flex-start */
        text-align: left; /* Change from center to left */
    }

    .description-logo {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* Ensure text is left-aligned on mobile */
    .info-content p,
    .project-page .project-content p {
        text-align: left;
    }
}

.two-column-text {
    column-count: 2;
    column-gap: 30px;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

@media (max-width: 768px) {
    .two-column-text {
        column-count: 1;
    }
}

/* Placeholder tile styles */
.tile.placeholder {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
}

.placeholder-content {
    font-size: 18px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hover effect for placeholder tiles */
.tile.placeholder:hover {
    background-color: #e0e0e0;
}

.tile.placeholder:hover .placeholder-content {
    color: #666;
}

/* Hide placeholder tiles on mobile devices */
@media (max-width: 768px) {
    .tile.placeholder {
        display: none;
    }
}

.project-image-container {
    width: 100%;
    margin: 10px 0;
}

.project-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
}

/* Update this existing rule */
.project-page .project-content > h2,
#root h2, #root h3, #root h1 {
    text-align: left;
    margin-bottom: 30px;
    padding-top: 40px;
    font-weight: bold;
    font-size: 1.5rem;
}

/* Add this new rule to center-align the form h2 */
#root h2 {
    text-align: center;
    padding-bottom: 20px;
}

/* Add this new rule to increase space after h2 elements */
.project-page .project-content > h2 + p,
#root h2 + p, #root h3 + p, #root h1 + p {
    margin-top: 20px; /* Add top margin to paragraphs that follow headings */
}

/* Update the existing rule for paragraphs */
.project-info p,
.info-content p,
.project-page .project-content p {
    margin-bottom: 20px; /* Increased from 15px to 20px */
}

/* Additional style for the description container */
.description-container {
    margin-top: 20px; /* Add some space above the description container */
}

/* Styles for the contact button */
.contact-button-container {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 30px;
}

.contact-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    /* Add these lines to match the form submit button font */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.contact-button:hover {
    background-color: #0056b3;
}

/* Add these new styles to align labels to the left */
form label {
  text-align: left;
  display: block;
  margin-bottom: 5px;
}

/* You may also want to adjust the input and textarea styles */
form input,
form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Update the existing rule */
.project-page.contact-page .project-content {
    width: 80%; /* Set width to 80% for the contact page */
    max-width: 960px; /* 80% of 1200px */
}

/* Add this media query for mobile devices */
@media (max-width: 768px) {
    .project-page.contact-page .project-content {
        width: 100%; /* Full width on mobile */
        max-width: none; /* Remove max-width constraint */
        padding: 20px; /* Add some padding on the sides */
    }

    /* Adjust the root container for the form */
    #root {
        width: 100%;
    }

    /* Ensure form inputs and textareas are full width */
    form input,
    form textarea {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Update the existing rule for all project pages */
@media (max-width: 768px) {
    .project-page .project-content {
        padding: 20px; /* Increase padding for better readability */
    }
}

/* Cookie Consent Banner Styles */
#cookieConsent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
    display: none; /* This will be overridden by JavaScript when needed */
    z-index: 9999;
}

/* Add this new rule to ensure text is visible */
#cookieConsent p {
    margin-bottom: 10px;
    color: #333; /* Ensure text color contrasts with the background */
}

#cookieConsent button {
    margin: 0 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#acceptCookies {
    background-color: #4CAF50;
    color: white;
}

#denyCookies {
    background-color: #f44336;
    color: white;
}

/* Responsive adjustments for cookie consent */
@media (max-width: 768px) {
    #cookieConsent {
        padding: 10px;
    }

    #cookieConsent button {
        margin: 5px;
        padding: 8px 16px;
    }
}