.home-background {
    background-color: #55546a;
    height: auto;
    width: 100vw;
}

.zojie-div {
    border-bottom: 20px solid black;
}

.company-name {
    color: white;
    font-weight: 900;
    font-size: 45px;
    margin-top: 20px;
    line-height: normal;
    text-align: center;
}

.company-name:nth-child(1) {
    font-size: 48px;
    font-weight: 600;
    margin-top: 160px;
}

.span {
    font-size: 18px;
    font-weight: 400;
    color: white;
    margin-top: 20px;
}

.gold-text {
    color: rgb(175, 152, 92);
    font-size: 64px;
    font-weight: 200;
    line-height: 85px;
}


/* WHO WE ARE */

.zojie-personnel {
    width: 100%;
    height: 1300px;
    background-image: url(/assets/images/zojie-WEBSITE.pdf-image-012.jpg);
    background-size: 100% 50%;
    background-repeat: no-repeat;
    background-color: #dccbb6;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-end;
}


.who-we-are-text {
    text-align: center;
    color: #55546a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 120px;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 45%;
}


.zojie-personnel-text {
    background-color: white;
    width: 45%;
    height: 100%;
    color: black;
    padding: 20px;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* Vision Page */
.vision-page {
    background-color: white;
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 40px 0px;
}

.vision-img {
    width: 45%;
    height: 600px;
}

.vision-text {
    width: 55%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vision-text>p {
    font-size: 17px;
    width: 70%;
}

.vision-header {
    color: #55546a;
    font-size: 60px;
    font-weight: 700;
}

.contact-details {
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding-top: 30px;
}

.contact-details-btn {
    display: flex;
    flex-direction: row;
    width: 600px;
    height: 60px;
    border-radius: 14px;
}

.purple-btn {
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    width: 50%;
    height: inherit;
    background-color: #55546a;
    color: white;
    font-size: 28px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.yellow-btn {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    width: 50%;
    height: inherit;
    background-color: #eab676;
    color: white;
    font-size: 28px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.office-img {
    width: 100vw;
    height: 500px;
    margin-top: 30px;
}

.company-info {
    /* Parent container styling */
    font-family: 'Times New Roman', serif;
    /* or your preferred font */
    color: #000;
    font-size: 26px;
    line-height: 1.5;
    height: auto;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* adjust as needed */
    margin: 0 auto;
    /* center horizontally if needed */
}

.company-info-section {
    margin-bottom: 1.5rem;
    /* space between sections */
}

/* Generic paragraph styling in each section */
.company-info-section p {
    margin: 0.3rem 0;
}

/* Bolded labels in uppercase, normal text after the colon */
.company-info-name,
.registration-number,
.ownership-structure,
.head-office,
.staff-strength,
.bankers {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.company-name span,
.registration-number span,
.ownership-structure span,
.head-office span,
.staff-strength span,
.bankers span {
    font-size: 15px;
    font-weight: normal;
    text-transform: none;
}

/* For lines with icons: email, website, phone */
.email,
.website,
.phone {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

/* Icon styling (Font Awesome assumed) */
.email i,
.website i,
.phone i {
    margin-right: 8px;
    color: #eab676;
    /* or another color to match your design */
}

/* Ensure the text that follows icons can be normal-case */
.email span,
.website span,
.phone span {
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
}


/* GeneralP */

.general-p {
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
}

.general-p>img {
    width: 100%;
    height: 550px;
    margin-top: 0 !important;
}

.general-p-header {
    width: 100vw;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #55546a;
    font-size: 40px;
    font-weight: 600;
    padding: 20px;
}

.general-p-body {
    position: relative;
    /* Make it a reference point for absolute positioning */
    width: 100vw;
    height: auto;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(/assets/images/zojie-WEBSITE.pdf-image-017.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    justify-content: space-evenly;
    gap: 50px;
    z-index: 1;
}

.general-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    background-color: rgb(255, 246, 246);
    /* Dark overlay */
    z-index: 1;
    /* Ensure it sits above the background */
}

.general-p-body>p {
    width: 60%;
    position: relative;
    /* Ensure text appears above overlay */
    z-index: 99;
    font-size: 20px;
    font-weight: 400;
    /* Make sure content is above the overlay */
    color: black;
    /* Adjust text color for contrast */
}

/* Project Management Section */
.project-management {
    width: 100vw;
    height: auto;
    margin-top: -30px;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Ensures absolute child elements align properly */
}

/* Container for the image to position the header */
.project-image-container {
    position: relative;
    width: 100%;
}

/* Image Styling */
.project-management img {
    width: 100%;
    height: 970px;
    display: block;
}

/* Project Header (Title) */
.project-header {
    background-color: #55546a;
    color: white;
    font-size: 40px;
    padding: 20px 15px;
    width: 400px;
    position: absolute;
    bottom: 30px;
    left: 0px;
    /* Adjust for proper alignment */
    z-index: 2;
    /* Ensures text appears above the image */
}

/* Project Body Section */
.project-body {
    position: relative;
    width: 100vw;
    height: auto;
    padding: 50px 10px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(/assets/images/zojie-WEBSITE.pdf-image-022.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: black;
    font-size: 19px;
    font-weight: 700;
}

/* Overlay Effect */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(134, 108, 17, 0.5);
    /* Dark overlay */
    z-index: 1;
    opacity: .9;
}

/* Paragraph Styling */
.project-body p {
    width: 66%;
    position: relative;
    z-index: 99;
    /* Ensure text appears above overlay */
    color: black;
    font-size: 17px;
    font-weight: 300;
    /* Adjust text color for contrast */
}





.company-info {
    /* Parent container styling */
    font-family: 'Times New Roman', serif;
    color: #000;
    font-size: 26px;
    line-height: 1.5;
    height: auto;
    width: 100%;
    /* Center horizontally if needed */
    margin: 0 auto;
    /* Use flex to center children */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Optional: also center text within each child element */
    text-align: center;
}

.company-info-section {
    margin-bottom: 1.5rem;
    /* space between sections */
    /* Also center its direct children (paragraphs) */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Generic paragraph styling in each section */
.company-info-section p {
    margin: 0.3rem 0;
    /* Center the text content itself */
    text-align: center;
}

/* Bolded labels in uppercase, normal text after the colon */
.company-info-name,
.registration-number,
.ownership-structure,
.head-office,
.staff-strength,
.bankers {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.company-info-name span,
.registration-number span,
.ownership-structure span,
.head-office span,
.staff-strength span,
.bankers span {
    font-size: 15px;
    font-weight: normal;
    text-transform: none;
}

/* For lines with icons: email, website, phone */
.email,
.website,
.phone {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

/* Icon styling (Font Awesome assumed) */
.email i,
.website i,
.phone i {
    margin-right: 8px;
    color: #eab676;
    /* or another color */
}

/* Ensure the text that follows icons can be normal-case */
.email span,
.website span,
.phone span {
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
}

/* Consultancy */

.consultancy {
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.consultancy-header {
    background-color: white;
    width: 100%;
    height: 100px;
    padding-top: 10px;
    font-size: 40px;
    font-weight: 900;
    color: #55546a;
    display: flex;
    justify-content: center;
    align-items: center;
}

.consultancy>img {
    width: 100%;
    height: 700px;
}


.consultancy-body {
    background-color: white;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
}

.consultancy-body>p {
    color: black;
    font-size: 19px;
    font-weight: 600;
    width: 80%;
}

.consultancy-body>p>span {
    color: #da831a;
    font-style: italic;
}

/* Engineering Construction */
.e-construction {
    background-image: url(/assets/images/zojie-WEBSITE.pdf-image-024.jpg);
    background-size: 100% 30%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: white;
    height: auto;
    width: 100%;
    position: relative;
    gap: 70px;
    padding-top: 40px;
}

.e-construction-overlay {
    background-color: white;
    position: absolute;
    opacity: .7;
    width: 100%;
    height: 30%;
    top: 0;
    left: 0;
    z-index: 1;
}

.e-construction-header {
    z-index: 99;
    background-color: white;
    color: #55546a;
    font-size: 33px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px;
    align-self: flex-end;
}

.e-construction-body {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    z-index: 99;
}

.e-construction-grid {
    width: 48%;
    height: auto;
    display: flex;
    flex-direction: row;
}

.e-grid1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 37%;
    height: 100%;
}

.e-grid1>.img1 {
    height: 75%;
    width: 100%;
}

.e-grid1>.img2 {
    height: 24%;
    width: 100%;
}

.e-grid2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 61%;
    height: 100%;
}

.e-grid2>.img1 {
    height: 75%;
    width: 100%;
}

.e-grid2>.img2 {
    height: 24%;
    width: 100%;
}

.e-construction-text {
    width: 48%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 30px 10px;
    gap: 30px;
}





/* ICT */

.ict,
.electrical {
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
}


.ict-background,
.electrical-background {
    background-image: url(/assets/images/zojie-WEBSITE.pdf-image-033.jpg);
    height: 500px;
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ict-background>p {
    color: white;
    font-size: 43px;
    font-weight: 600;
    margin-right: 80px;
}

.electrical-background {
    background-image: url(/assets/images/zojie-WEBSITE.pdf-image-040.jpg);
    position: relative;
}

.ict-info,
.electrical-info {
    width: 100vw;
    background-color: white;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.ict-info>.ict-img-grid {
    width: 44%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.ict-info>.ict-text {
    width: 50%;
    height: auto;
    font-size: 21px;
    font-weight: 400;
    font-style: italic;
    padding: 50px 20px;
}

.electrical-text {
    width: 50%;
    height: auto;
    font-size: 21px;
    font-weight: 400;
    font-style: italic;
    padding: 50px 20px;
}

.electrical-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.ict-img-grid>img {
    width: 100%;
    height: 48%;
}

.electrical-grid {
    width: 50%;
    height: 650px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.electrical-text>p {
    font-size: 32px;
    color: #55546a;
    font-weight: 700;
    font-style: normal;
}

.electrical-text {
    font-size: 16px;
}

/* Maritime Services */

.maritime-services {
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
}

.maritime-background {
    background-color: white;
    background-image: url(/assets/images/zojie-WEBSITE.pdf-image-037.jpg);
    height: 500px;
    width: 100vw;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 47px;
    font-weight: 800;
    position: relative;
    text-align: center;
}


.maritime-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Dark overlay */
    z-index: 1;
    /* Ensure it sits above the background */
}

.maritime-background>p {
    z-index: 7;
}

.maritime-info {
    width: 100vw;
    height: 450px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding-left: 30px;
}

.maritime-info>p {
    font-size: 15px;
    color: black;
    width: 26%;
    height: 90%;
    padding-top: 30px;
}

.maritime-info>img {
    width: 68%;
    height: 100%;
}

/* Water */

.water {
    width: 100vw;
    height: auto;
    background-color: white;
}

.water-background {
    position: relative;
    width: 100vw;
    height: 430px;
    background-image: url(/assets/images/zojie-WEBSITE.pdf-image-045.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-right: 150px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.water-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(234, 234, 234, 0.568);
    z-index: 1;
    /* Lower than the text */
}

.water-overlay-text {
    width: 300px;
}

.water-background p {
    position: relative;
    z-index: 2;
    /* Ensures text appears above the overlay */
    color: #55546a;
    font-size: 40px;
    font-weight: 700;
    right: 100px;
}

.water-background span {
    position: relative;
    color: #693f0d;
    font-style: italic;
    font-size: 13px;
    z-index: 99;
    right: 100px;
    /* Ensures text appears above the overlay */
}

.water-img-grid {
    width: 100vw;
    height: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.water-img-grid>img {
    width: 24%;
    height: 93%;
}

.water-text {
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
}

.water-text>p {
    font-size: 16px;
    color: black;
    font-weight: 300;
    font-style: italic;
    width: 90%;
}

/* Road */

.road {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
}

.road-header {
    color: #55546a;
    font-size: 45px;
    font-weight: 700;
    font-style: oblique;
    text-align: center;
}

.road-pics {
    width: 100vw;
    height: 600px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.road-pics>img {
    width: 49%;
    height: 100%;
}

.road-grid {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 49%;
    height: 100%;
}

.road-grid>img {
    width: 100%;
    height: 49%;
}

.road-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 30px;
    padding-bottom: 20px;
}

.road-text>p {
    font-style: italic;
    font-size: 14px;
    width: 90%;
    font-weight: 400;
}

/* Civil */

.civil {
    background-color: white;
    width: 100vw;
    height: auto;
}

.civil-background {
    background-image: url(/assets/images/zojie-WEBSITE.pdf-image-054.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 500px;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
    z-index: 1;
}

.civil-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    opacity: .7;
    /* Lower than the text */
}

.civil-background p {
    position: relative;
    z-index: 8;
    /* Ensures text appears above the overlay */
    color: #a8a7bf;
    font-size: 50px;
    font-weight: 900;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* width: 300px; */
}

.civil-info {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: auto;
}

.civil-grid {
    width: 40%;
    height: 1300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.civil-grid>img {
    width: 100%;
    height: 29%;
}

.civil-grid>img:first-child {
    height: 39%;
}

.civil-text {
    background-color: #7E6741;
    width: 60%;
    height: auto;
    padding-top: 60px;
    display: flex;
    justify-content: center;
    color: white;
    font-style: italic;
    font-weight: 200;
    font-size: 24px;
}

.civil-text>p {
    width: 85%;
}

.certificate {
    position: relative;
    /* allow absolute positioning inside */
    width: 100vw;
    min-height: 100vh;
    /* or height: 500px; if you want it fixed */
    overflow: hidden;
    /* hides anything overflowing */
    margin: 0;
    padding: 0;
    padding-bottom: 300px;
}

.zojie-certificate-box {
    width: 100%;
    height: auto;
    padding: 40px 0px;
    display: flex;
    justify-content: center;
}

.zojie-certificate-box>img {
    width: 80%;
    height: auto;
}


.certificate-background {
    position: absolute;
    /* sits behind the certificate content */
    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
    /* fill the parent’s height */
    background-image: url("/public/assets/images/64.png");
    background-size: cover;
    /* or background-size: 100% 100%; */
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    z-index: 1;
}

/* White overlay/fade at the bottom of the background */
.certificate-background::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    /* adjust how tall you want the overlay */
    background: linear-gradient(rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.8));
    /* You could also just do background-color: rgba(255,255,255,0.7); 
       if you want a solid color instead of a gradient. */
}

.zojie-certificate {
    position: relative;
    top: 300px;
    /* on top of background */
    z-index: 2;
    /* above the background’s z-index */
    width: 100vw;
    min-height: 100vh;
    /* ensure content covers the full area */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* center it vertically if you like */
    background-color: transparent;
    /* If you want a white box behind the certificate, 
       use background-color: white; */
    padding: 2rem 0;
    /* spacing around the certificate */
}

.zojie-certificate>img {
    width: 70%;
    height: auto;
}

/* Container for everything */
.zojie-collage {
    width: 100vw;
    /* Adjust as needed */
    height: auto;
    margin: 0 auto;
    position: relative;
    /* So we can absolutely position the center circle */
    font-family: sans-serif;
    background-color: #55546a;
    padding-bottom: 60px;
}

/* Each row of images */
.zojie-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    /* Spacing between rows */
}

/* Each image container in a row */
.image {
    width: 50%;
    position: relative;
    /* If you need to overlay text or icons inside */
    margin-top: 10px;
}

/* Remove extra margin on the last image in a row */
.image:first-child {
    margin-right: 0;
}

/* Placeholder box with dashed border where you'll insert your real image */
.placeholder {
    width: 100%;
    height: 300px;
    /* Adjust to desired height */
    display: flex;
    font-weight: bold;
    background-color: #55546a;
}

/* Actual image inside the placeholder */
.placeholder>img {
    width: 97%;
    height: 97%;
    /* If you don't need the images above the circle, remove z-index or lower it */
    z-index: 999;
}

/* Center circular overlay */
.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    /* Diameter of the circle */
    height: 400px;
    border-radius: 50%;
    background-color: #55546a;
    /* Adjust to match your design */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    z-index: 1000;
    /* Ensure the circle is on top of images */
}

/* Content inside the center circle */
.circle-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo styling */
.zojie-logo {
    width: 80px;
    /* Adjust as needed */
    margin-bottom: 10px;
}

/* Text info styling */
.company-info {
    margin-top: 5px;
}

.rc-number {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
}

.center-circle h2 {
    margin: 5px 0;
    font-size: 26px;
    font-weight: 900;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.center-circle p {
    margin: 5px 0;
    font-size: 15px;
    color: white;
}

/* Three-image grid in one container */
.grid-dude {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 300px;
    /* Adjust to desired height */
    font-weight: bold;
    background-color: #55546a;
}

.grid-dude>img {
    width: 33.3%;
    height: 100%;
}

/* 
     Media query for screens below 800px
     - Each row stacks in a single column
     - Images become full width
     - Circle is scaled down
  */
@media (max-width: 800px) {
    .zojie-row {
        flex-direction: column;
    }

    .image {
        width: 100%;
    }

    /* Make placeholders & images adjust height automatically */
    .placeholder {
        height: auto;
    }

    .placeholder>img {
        width: 100%;
        height: auto;
    }

    /* Adjust the triple-image container */
    .grid-dude {
        flex-direction: column;
        height: auto;
    }

    .grid-dude>img {
        width: 100%;
        height: auto;
    }

    /* Scale down the center circle and text */
    .center-circle {
        width: 250px;
        height: 250px;
    }

    .zojie-logo {
        width: 60px;
    }

    .center-circle h2 {
        font-size: 20px;
    }

    .center-circle p {
        font-size: 13px;
    }
}


@media screen and (max-width : 900px) {


    .e-construction-body {
        flex-direction: column;
        align-items: center;
    }

    .e-construction-grid {
        width: 100%;
        flex-direction: column;
    }

    .e-grid1 {
        width: 100%;
    }

    .e-grid1>.img1 {
        height: 700px;
    }

    .e-grid2 {
        width: 100%;
    }

    .e-construction-text {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .e-construction-text>p {
        width: 91%;
    }

    .ict-background>p {
        margin-right: 0;
    }

    .zojie-personnel {
        flex-direction: column;
        height: auto;
        align-items: center;
        padding-right: 10px;
    }

    .zojie-personnel-text {
        width: 100%;
        height: auto;
        gap: 50px;
        padding-left: 20px;
        align-items: center;
    }

    .zojie-personnel-text>p {
        width: 95%;
    }

    .who-we-are-text {
        width: 100%;
    }

    .vision-page {
        flex-direction: column;
        width: 100%;
    }

    .vision-img {
        width: 100%;
    }

    .vision-text {
        width: 100%;
    }

    .vision-text>p {
        width: 94%;
    }

    .contact-details-btn {
        width: 70vw;
    }

    .purple-btn,
    .yellow-btn {
        font-size: 21px;
        font-weight: 700;
    }

    .company-info {
        padding: 10px;
        padding-left: 15px;
        width: 85%;
        text-align: left;
    }

    .contact-details-btn {
        width: 70vw;
    }

    .purple-btn,
    .yellow-btn {
        font-size: 21px;
        font-weight: 700;
    }


    .certificate {
        padding-bottom: 100px;
    }


    .civil-info {
        flex-direction: column;
        gap: 30px;
    }

    .electrical-grid {
        height: auto;
    }

    .electrical-grid>img:first-child {
        border-bottom: 20px solid black;
    }

    .civil-info {
        gap: 0 !important;
    }

    .civil-grid {
        width: 100%;
        height: auto;
    }

    .civil-grid>img:first-child {
        height: 600px;
        border-top: 20px solid black;
        border-bottom: 20px solid black;
    }

    .civil-grid>img {
        height: 500px;
        border-bottom: 20px solid black;
    }

    .civil-text {
        width: 100%;
    }

    .civil-text>p {
        width: 90%;
    }

    .road-pics {
        flex-direction: column;
        height: auto;
    }

    .road-pics>img {
        width: 100%;
        height: 550px;
        border-top: 20px solid black;
        border-bottom: 20px solid black;
    }

    .road-grid {
        width: 100%;
    }

    .road-grid>img {
        height: 550px;
        border-bottom: 20px solid black;
    }

    .road-text {
        width: 98%;
    }

    .water-text {
        padding: 30px 0px;
    }

    .water-background {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .water-img-grid {
        flex-direction: column;
        align-items: center;
        height: auto;
    }

    .water-img-grid>img {
        width: 100%;
        height: 550px;
        margin: 0;
        border-bottom: 20px solid black;
    }

    .water-img-grid>img:first-child {
        border-top: 20px solid black;
    }

    .electrical-info {
        flex-direction: column;
    }

    .electrical-grid {
        width: 100%;
    }

    .electrical-text {
        width: 90%;
        font-size: 15px;
    }


    .maritime-info {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0px;
        align-items: center;
    }


    .maritime-info>p {
        font-size: 17px;
        color: black;
        width: 73%;
        height: auto;
        padding-bottom: 20px;
    }

    .maritime-info>img {
        width: 100%;
        height: 500px;
        margin: 0 !important;
    }

    .ict-background {
        padding: 0;
        justify-content: center;
        text-align: center;
    }

    .ict-info {
        flex-direction: column;
        align-items: center;
    }

    .ict-info>.ict-img-grid {
        width: 73%;
    }

    .ict-info>.ict-text {
        width: 73%;
    }

    .water-background p {
        right: 0;
    }

    .water-background span {
        right: 0;
    }
}

@media screen and (max-width: 600px) {
    .service-items {
        font-size: 24px;
    }

    .contact-details-btn {
        width: 90vw;
    }

    .general-p-body>p {
        width: 90%;
    }

    .project-body {
        padding-bottom: 20px !important;
    }

    .project-body>p {
        width: 93% !important;
    }


    .consultancy-body>p {
        width: 90%;
    }

    .ict-info>.ict-img-grid {
        width: 98%;
    }

    .ict-info>.ict-text {
        width: 90%;
    }

    .ict-background {
        padding: 0;
        justify-content: center;
        text-align: center;
    }

    .maritime-background {
        font-size: 34px;
    }

    .maritime-info>p {
        font-size: 17px;
        color: black;
        width: 95%;
        height: auto;
    }

    .maritime-info>img {
        width: 100%;
        height: 500px;
    }
}

.footer-container {
    background-color: #b3955b;
    /* Approximate gold/brown color from your image */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 20px 40px;
    color: #000;
    font-family: 'Arial', sans-serif;
}

/* Left and right sections split */
.left-section,
.right-section {
    display: flex;
    flex-direction: column;
}

/* Phone, email, and website blocks */
.phone-numbers,
.email,
.website {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.phone-numbers,
.email,
.website,
.i {
    color: white !important;
}

.psa {
    color: black !important;
}

/* Icon spacing */
.icon {
    margin-right: 8px;
    font-size: 16px;
    color: white;
}

/* If you want each phone number to appear more distinctly: */
.phone-numbers span:not(:first-child) {
    margin-left: 16px;
}

/* Right section text styling */
.right-section h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.right-section p {
    margin: 0;
}


@media screen and (max-width: 850px) {
    .footer-container {
        flex-direction: column;
        gap: 20px;
    }

    .footer-container>img {
        display: none;
    }
}

/*********************************************
  Section: OUR SERVICES
**********************************************/

/* 
   1) We add a purple overlay by combining a linear-gradient 
      with the background image (or using a ::before pseudo-element). 
   2) We reduce unnecessary spacing.
*/

.our-services {
    width: 100vw;
    /* Use a background gradient overlay on top of your existing image */
    background:
        linear-gradient(rgba(98, 49, 125, 0.6), rgba(98, 49, 125, 0.6)),
        url("/assets/images/zojie-WEBSITE.pdf-image-001.jpg");
    background-size: 100% 40%;
    background-repeat: no-repeat;
    background-position: center top;
    /* adjust if needed */
    padding-top: 120px;
    /* adjust to match the exact look in your mockup */
    margin: 0;
    /* remove unnecessary margin */
    height: auto;
}

.our-services-text {
    color: white;
    font-size: 70px;
    font-weight: 800;
    margin-left: 80px;
    /* reduce/increase to match your design */
    margin-bottom: 40px;
    line-height: 80px;
}

/* 
     1) Make the container for services + images a flex row above 900px.
     2) We’ll switch to column below 900px (media query at bottom).
  */
.services-highlight {
    width: 100vw;
    background-color: #55546a;
    margin-top: 0;
    /* or -20px if it matches your mockup exactly */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
    /* side padding, adjust as needed */
}

.services-list {
    width: 42%;
    padding: 60px 10px;
    /* vertical padding, adjust as needed */
    margin: 0 auto;
    /* remove extra left spacing if you want to center in smaller screens */
}

.service-items {
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-top: 30px;
    /* smaller gap between items */
    font-size: 20px;
    /* make text smaller, yet visible */
}

.service-items:first-child {
    margin-top: 0;
}

/* Adjust if you want to keep the same proportions or remove the inline height */
.purple-img {
    width: 23%;
    height: auto;
    /* from your original code, adjust if needed */
    position: relative;
}

.purple-img>img {
    width: 100%;
    height: 100%;
}

.purple-overlay {
    background-color: purple;
    opacity: .7;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
}

/* The container for the stacked images on the right side */
.team-img-house {
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    position: relative;
}

/* If you need a separate overlay on the "team" images. 
     If not, you can remove or adjust the color/opacity here. */
.team-overlay {
    background-color: #eab676;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


@media screen and (max-width:900px) {
    .team-overlay {
        display: none;
    }

    .our-services {
        padding: 0 !important;
    }
}

/* The actual images inside .team-img-house */
.img {
    width: 82%;
    height: 207px;
    /* maintain the same height from your original code */
    border: 1px solid white;
    position: relative;
    z-index: 2;
    /* above the overlay */
    margin-top: 20px;
    /* if you want consistent spacing instead of .mt-5 */
}

.img:first-of-type {
    margin-top: 0;
    /* so the very first image doesn't get extra top margin */
}

.text-container {
    position: relative;
    z-index: 3;
    /* ensure text is on top of overlay */
    text-align: center;
}

/* Big heading in the overlayed area */
.zojie {
    color: white;
    font-size: 50px;
    font-weight: 900;
    line-height: 60px;
}

/* Subtext under heading */
.span-li {
    font-size: 20px;
    color: white;
}

/*********************************************
    Responsive layout changes at max-width: 900px
  **********************************************/
@media screen and (max-width: 900px) {
    .services-highlight {
        flex-direction: column;
        align-items: center;
        padding: 0 !important;
        /* center everything in column layout */
    }

    .services-list,
    .team-img-house,
    .purple-img {
        width: 100% !important;
        /* ensure they each occupy full width */
    }

    .our-services-text {
        margin-bottom: 0px;
        font-size: 35px;
        line-height: normal;
        padding: 15px 0px;
    }

    .services-list {
        width: 90% !important;
        margin-left: 30px;
    }



    .team-img-house>img {
        height: auto;
    }

    .purple-img {
        height: auto;
        /* let it shrink proportionally */
    }

    /* Remove absolute positioning so images stack naturally */
    .team-img-house {
        position: static;
        padding-top: 20px;
        margin-bottom: 20px;
        right: auto;
        /* reset the right offset */
    }

    .our-services-text {
        margin-left: 0;
        text-align: center;
    }
}

 .personnel-list {
    width: 100vw;
    margin: 0 auto;
    box-sizing: border-box;
    height: auto;
    padding-bottom: 100px;
    /* Extra space below if needed */
}

/* ========== BANNER SECTION ========== */
.banner {
    position: relative;
    width: 100%;
    /* Fixed height to show enough background before the table overlaps. 
       Adjust to match your desired layout. */
    height: 800px;
    overflow: hidden;
}

/* Full-width background image */
.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ensures it fills the area */
    z-index: 0;
}

/* Dark overlay on top of the background image */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* adjust opacity if needed */
    z-index: 1;
}

/* Content container that sits above the overlay */
.banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    /* Position the foreground image near bottom */
    justify-content: center;
    height: 100%;
    padding-bottom: 2rem;
    /* Adjust spacing from bottom */
}

/* Foreground image (team in safety vests) */
.foreground-img {
    max-width: 500px;
    /* adjust as needed */
    width: 100%;
    height: auto;
}

/* ========== TABLE TITLE (Gold/Brown Bar) ========== */
.table-title {
    display: block;
    width: fit-content;
    background-color: #7E6741;
    /* Dark gold/brown from screenshot */
    color: #fff;
    padding: 0.6rem 2rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    /* Negative top margin to "pull" it over the banner slightly */
    margin: -180px auto 0;
    position: relative;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ========== TABLE SECTION ========== */
.personnel-table {
    width: 60%;
    margin: 1rem auto 0;
    border-collapse: collapse;
    background-color: #fff;
    /* Slight shadow for a floating effect */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

    /* Thick gold border around the entire table */
    border: 30px solid #eab676;

    /* Lift the table up over the banner */
    position: relative;
    top: -180px;
    /* matches .table-title offset; adjust as needed */
    z-index: 3;
}

/* Table Header (Dark Brown) */
.personnel-table thead tr {
    background-color: #6e3e03;
    /* Dark brown from screenshot */
}

.personnel-table thead th {
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.95rem;
    padding: 0.75rem;
    border: 1px solid #ccc;
    font-weight: bold;
}

/* Table Body Cells */
.personnel-table tbody td {
    border: 1px solid #ccc;
    font-size: 0.95rem;
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}

/* Center the first and third columns (S/N and NO.) */
.personnel-table tbody tr td:nth-child(1),
.personnel-table tbody tr td:nth-child(3) {
    text-align: center;
}

/* Table Footer */
.personnel-table tfoot td {
    border: none;
    padding: 1rem;
    font-size: 0.9rem;
    font-style: italic;
    color: #333;
}


/* Project Management */

/* Project Management Section */
.project-management {
    width: 100vw;
    height: auto;
    margin-top: -30px;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Ensures absolute child elements align properly */
}

/* Container for the image to position the header */
.project-image-container {
    position: relative;
    width: 100%;
}

/* Image Styling */
.project-management img {
    width: 100%;
    height: auto;
    display: block;
}

/* Project Header (Title) */
.project-header {
    background-color: #55546a;
    color: white;
    font-size: 40px;
    padding: 20px 15px;
    width: 400px;
    position: absolute;
    bottom: 30px;
    left: 0px;
    /* Adjust for proper alignment */
    z-index: 2;
    /* Ensures text appears above the image */
}

/* Project Body Section */
.project-body {
    position: relative;
    width: 100vw;
    height: auto;
    padding: 50px 10px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(/public/assets/images/zojie-WEBSITE.pdf-image-022.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: black;
    font-size: 19px;
    font-weight: 600;
}

/* Overlay Effect */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(207, 210, 112, 0.5);
    /* Dark overlay */
    z-index: 1;
}

/* Paragraph Styling */
.project-body p {
    width: 56%;
    position: relative;
    z-index: 2;
    /* Ensure text appears above overlay */
    color: black;
    /* Adjust text color for contrast */
}