/* Basic Reset */
* {
    margin: 0 auto 0 auto;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 1050px;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.responsive-container {
    padding: 20px;
    background: #000; /* Light background for container */
    color: #fff; /* White text for container */
    font-style: normal;
    text-align: center;
    font-size: 32px;
}

.row {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: center; /* Center items vertically */
    gap: 20px; /* Space between cells */
}

.cell {
    flex: 1;
    padding: 10px;
}

.text-cell {
    flex: 1;
    min-width: 200px; /* Ensure the text cell is at least 200px wide */
}

.image-cell {
    flex: 1;
    min-width: 200px; /* Ensure the image cell is at least 200px wide */
    display: flex; /* Flexbox for centering image */
    justify-content: center;
    align-items: center;
}

.image-cell img {
    max-width: 100%; /* Make image responsive */
    height: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .row {
        flex-direction: column; /* Stack cells vertically on tablet and smaller screens */
    }

    .text-cell, .image-cell {
        text-align: center;
    }

    .image-cell img {
        margin-bottom: 10px; /* Space below the image */
    }
}

@media (max-width: 480px) {
    .responsive-container {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .cell {
        flex: 1 1 100%; /* Ensure full width for each cell */
        padding: 5px;
    }

    .text-cell p, .image-cell img {
        margin-bottom: 10px; /* Consistent spacing for elements */
    }
}

/* ==============================================
Section 2
================================================ */

.responsive-container-2 {
    padding: 20px;
    background: #f9f9f9; /* Light background for container */
    max-width: 1200px;
    margin: auto;
}

.row-2 {
    display: flex;
    flex-direction: column; /* Single cell, so column direction by default */
    align-items: center; /* Center items horizontally */
}

/* Cell Styling */
.cell-2 {
    border-top: 3px solid rgb(28,167,5);
    border-bottom: 3px solid rgb(28,167,5);
    padding: 10px;
    width: 100%;
}

.text-cell-2 p {
    text-align: justify;
    font-style: italic;
    font-size: 34px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .responsive-container-2 {
        padding: 15px; /* Adjust padding for tablet screens */
    }

    .text-cell-2 p {
        font-size: 1.1em; /* Slightly reduce font size for tablets */
    }
}

@media (max-width: 480px) {
    .responsive-container-2 {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .text-cell-2 p {
        font-size: 1em; /* Further reduce font size for mobile phones */
    }
}

/* ======================================================================
Section 3
====================================================================== */

.responsive-container-3 {
    background: #fff; /* Light background for container */
    font-size: 20px;
    text-align: justify;
    color: #000;
    font-weight: 400;
    font-style: normal;
    padding: 5px 5px;
}

.text-cell-3 span {
    color: rgb(28,167,5);
}

.row-3 {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: justified; /* Center items vertically */
    gap: 20px; /* Space between cells */
}

.cell-3 {
    flex: 1;
    padding: 10px;
}

.text-cell-3 {
    flex: 1;
    min-width: 200px; /* Ensure the text cell is at least 200px wide */
}

.image-cell-3 {
    flex: 1;
    min-width: 200px; /* Ensure the image cell is at least 200px wide */
    display: flex; /* Flexbox for centering image */
    justify-content: center;
    align-items: center;
}

.image-cell-3 img {
    max-width: 100%; /* Make image responsive */
    height: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .row-3 {
        flex-direction: column; /* Stack cells vertically on tablet and smaller screens */
    }

    .text-cell-3, .image-cell-3 {
        text-align: center;
    }

    .image-cell-3 img {
        margin-bottom: 10px; /* Space below the image */
    }
}

@media (max-width: 480px) {
    .responsive-container-3 {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .cell-3 {
        flex: 1 1 100%; /* Ensure full width for each cell */
        padding: 5px;
    }

    .text-cell-3 p, .image-cell-3 img {
        margin-bottom: 10px; /* Consistent spacing for elements */
    }
}

/* ===============================================
Section 4
================================================= */

.project-gallery {
    padding: 20px;
    background: #f9f9f9; /* Light background for container */
    max-width: 1200px;
    margin: auto;
}

.row-4 {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: center;
    gap: 0px; /* Space between cells */
}

.cell-4 {
    flex: 1;
    padding: 10px;
}

.title-cell-4 {
    flex: 1; /* Ensure the title takes adequate space */
    min-width: 200px;
}

.title-cell-4 h2 {
    font-size: 1.5em;
    color: #333;
}

.image-cell-4 {
    flex: 1;
    min-width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-cell-4 img {
    max-width: 100%; /* Make images responsive */
    height: auto;

}

.image-wrapper {
    width: 100%; /* Full width of the parent container */
    max-width: 300px; /* Maximum width for the images */
    overflow: hidden; /* Ensure the images do not overflow */
    height: 500px; /* Fixed height for all images */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ddd; /* Background color for wrapper */
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the area */
}

/* Responsive Design */
@media (max-width: 768px) {
    .row-4 {
        flex-direction: column; /* Stack cells vertically on tablet and smaller screens */
    }

    .title-cell-4, .image-cell-4 {
        text-align: center;
    }

    .image-cell-4 img {
        margin-bottom: 10px; /* Space below the image */
    }
}

@media (max-width: 480px) {
    .project-gallery {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .title-cell-4, .image-cell-4 {
        flex: 1 1 100%; /* Ensure full width for each cell */
        padding: 5px;
    }

    .title-cell-4 h2, .image-cell-4 img {
        margin-bottom: 10px; /* Consistent spacing for elements */
    }
}

/* =================================================
Section five
================================================= */
.gallery-title {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
}

.gallery-title .note {
    border-bottom: 3px solid rgb(28,167,5)
}

.gallery-title .note p{
    font-size: 10pt;
    text-align: center;
    margin: 10px;
}

.gallery-title .title {
    font-size: 30px;
    color: #444444;
    text-align: center;
    font-weight: 500;
    margin: 100px auto 0 auto;
    display: flex;
    justify-content: center ;
    border-top:3px solid rgb(28,167,5)

}

.gallery-container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.gallery-item {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    max-width: 200px;
    flex: 1 1 calc(25% - 20px);
    box-sizing: border-box;
}

.gallery-item img {
    width: 100%;
    height: auto;
    object-fit: cover;

}

.caption {
    margin-top: 10px;
    font-size: 14px;
}

/* ====================================================================
    footer
 ====================================================================*/
footer {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 20px;
    height: fit-content;
}
footer.footer {
    display: flex;
    justify-content: space-between;
    background-color: #000;
    color: #fff;
    padding: 20px 40px;
    box-sizing: border-box;
}

.footer-cell {
    flex: 1;
    padding: 20px;
}

.footer-cell h3 {
    margin-top: 0;
    border-bottom: 1px solid #ecf0f1;
    padding-bottom: 10px;
}

.footer-cell p, .footer-cell ul, .footer-cell li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-cell ul {
    padding-top: 10px;
}

.footer-cell a {
    color: #ecf0f1;
    text-decoration: none;
}

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

/* =============================
all other responsive code
 ============================*/

/* Responsive Design */
@media (max-width: 768px) {
    .gallery-item {
        flex: 1 1 calc(50% - 20px); /* 2 items per row with 20px gap */
    }

}

@media (max-width: 480px) {
    .gallery-item {
        flex: 1 1 100%; /* 1 item per row */
    }
}
/* Media Query for Tablets (portrait and landscape) */
@media (max-width: 768px) {
    .footer {
        flex-direction: column; /* Stacks the footer cells vertically */
        align-items: center;    /* Centers the footer cells */
    }

    .footer-cell {
        text-align: center;     /* Centers text for better readability */
    }

    .footer img {
        margin-bottom: 10px;    /* Adds space below the logo */
    }
}

/* Media Query for Mobile Phones */
@media (max-width: 480px) {
    .footer {
        padding: 10px; /* Reduces padding for smaller screens */
    }

    .footer-cell {
        padding: 10px 5px; /* Reduces padding for better fit on small screens */
        min-width: 100%; /* Ensures cells take full width */
    }
}