@import url("variables.css");
@import url("utilities.css");


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


body {

    font-family:var(--font-main);

    color:var(--dark);

    background:white;

    line-height:1.7;

}


img {

    max-width:100%;

    display:block;

}


a {

    color:inherit;

}


section {

    padding:80px 0;

}


h1,h2,h3 {

    line-height:1.2;

}


header {

    position:sticky;

    top:0;

    z-index:1000;

    background:white;

    box-shadow:var(--shadow);

}
/* HOME PAGE */


.top-bar{

background:var(--dark);

color:white;

padding:8px;

text-align:center;

font-size:14px;

}



.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

height:80px;

}



.logo{

font-size:28px;

font-weight:800;

}


.logo span{

color:var(--secondary);

}



.navigation{

display:flex;

gap:25px;

align-items:center;

}



.hero{

height:90vh;

position:relative;

display:flex;

align-items:center;

color:white;

overflow:hidden;

}



.hero-video{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

}



.hero-overlay{

position:absolute;

inset:0;

background:
rgba(0,0,0,.55);

}



.hero-content{

position:relative;

z-index:2;

}



.hero h1{

font-size:60px;

margin-bottom:20px;

}



.hero p{

font-size:22px;

max-width:650px;

}



.btn-outline{

border:2px solid white;

color:white;

margin-left:15px;

}



.stats-grid{

grid-template-columns:
repeat(4,1fr);

gap:25px;

}



.stat-box{

text-align:center;

padding:40px;

box-shadow:var(--shadow);

}



.stat-box h2{

font-size:45px;

color:var(--primary);

}



.service-grid{

grid-template-columns:
repeat(3,1fr);

gap:30px;

}



.service-card{

box-shadow:var(--shadow);

padding-bottom:25px;

border-radius:var(--radius);

overflow:hidden;

}



.service-card h3,
.service-card p,
.service-card a{

margin:20px;

display:block;

}



.dark-section{

background:var(--dark);

color:white;

}



.two-column{

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}



.project-grid{

grid-template-columns:
repeat(3,1fr);

gap:30px;

}



.project-card{

box-shadow:var(--shadow);

}



.project-card h3{

padding:20px;

}



.calculator-banner{

background:#eef7ff;

text-align:center;

}



.cta{

text-align:center;

}


.footer-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:40px;

padding:60px 0;

}
/* ABOUT PAGE */


.page-hero{

height:420px;

background:

linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),

url("./images/about-banner.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

color:white;

text-align:center;

}



.page-hero h1{

font-size:60px;

}



.mv-grid{

grid-template-columns:
repeat(3,1fr);

gap:30px;

}



.info-card{

padding:40px;

box-shadow:var(--shadow);

border-radius:var(--radius);

}



.timeline{

border-left:3px solid var(--primary);

margin-top:40px;

padding-left:40px;

}



.timeline-item{

margin-bottom:40px;

}



.team-grid{

grid-template-columns:
repeat(3,1fr);

gap:30px;

}



.team-card{

text-align:center;

box-shadow:var(--shadow);

padding-bottom:30px;

}



.team-card img{

height:320px;

width:100%;

object-fit:cover;

}



.cert-grid{

grid-template-columns:
repeat(4,1fr);

gap:20px;

}



.cert-grid div{

padding:30px;

background:white;

box-shadow:var(--shadow);

text-align:center;

font-weight:bold;

}
.process-grid{

grid-template-columns:
repeat(4,1fr);

gap:30px;

margin-top:40px;

}



.benefit-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

margin-top:40px;

}



.benefit-grid div{

padding:35px;

box-shadow:var(--shadow);

border-radius:var(--radius);

}
/* PRODUCTS */


.product-grid{

grid-template-columns:
repeat(4,1fr);

gap:30px;

}



.product-card{

padding:30px;

box-shadow:var(--shadow);

border-radius:var(--radius);

}



.product-card img{

height:220px;

width:100%;

object-fit:cover;

}




.product-card li{

margin:10px 0;

}





/* PROJECTS */


.project-gallery{

grid-template-columns:
repeat(4,1fr);

gap:30px;

}



.project-card{

overflow:hidden;

border-radius:var(--radius);

}



.project-card img{

height:280px;

object-fit:cover;

width:100%;

}



.project-info{

padding:25px;

background:white;

}




.case-study{

padding:50px;

background:#f4f8fc;

border-radius:var(--radius);

}

/* SUSTAINABILITY */


.impact-grid{

grid-template-columns:
repeat(3,1fr);

gap:30px;

}



.impact-grid div{

text-align:center;

padding:40px;

}





.esg-grid{

grid-template-columns:
repeat(3,1fr);

gap:30px;

}





/* CAREERS */


.job-list{

display:grid;

gap:25px;

margin-top:40px;

}



.job-card{

background:white;

padding:30px;

border-radius:var(--radius);

}




/* BLOG */


.blog-grid{

grid-template-columns:
repeat(3,1fr);

gap:30px;

}



.blog-card{

box-shadow:var(--shadow);

overflow:hidden;

border-radius:var(--radius);

}


.blog-card h3,
.blog-card p,
.blog-card a{

padding:0 25px;

display:block;

margin:20px 0;

}



.newsletter{

text-align:center;

}



.newsletter input{

padding:15px;

width:300px;

border-radius:8px;

border:1px solid #ddd;

}
/* CONTACT */


.contact-layout{

grid-template-columns:
1fr 1fr;

gap:60px;

}



.contact-form,
.quote-form{

display:grid;

gap:20px;

}



.contact-form input,
.contact-form textarea,
.contact-form select,
.quote-form input,
.quote-form select{


padding:15px;

border:1px solid #ddd;

border-radius:8px;

}



.contact-form textarea{

height:150px;

}




.map-placeholder{

height:350px;

background:#eee;

display:flex;

align-items:center;

justify-content:center;

margin-top:30px;

}





/* FAQ */


.faq-container{

max-width:900px;

}



.faq-item{

padding:30px;

margin-bottom:20px;

box-shadow:var(--shadow);

border-radius:var(--radius);

}
.logo img{
    height:65px;
    width:auto;
    transition:.3s;
}

.logo img:hover{
    transform:scale(1.03);
}
.hero-slider{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.slides{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    animation:slider 36s infinite;
}

.slides img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.slides:nth-child(1){animation-delay:0s;}
.slides:nth-child(2){animation-delay:6s;}
.slides:nth-child(3){animation-delay:12s;}
.slides:nth-child(4){animation-delay:18s;}
.slides:nth-child(5){animation-delay:24s;}
.slides:nth-child(6){animation-delay:30s;}

@keyframes slider{

0%{
opacity:0;
}

5%{
opacity:1;
}

16%{
opacity:1;
}

21%{
opacity:0;
}

100%{
opacity:0;
}

}

.caption{
    position:absolute;
    left:8%;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    max-width:700px;
}

.caption h1{
    font-size:62px;
    font-weight:700;
    margin-bottom:20px;
}

.caption p{
    font-size:24px;
}

.hero-slider::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}
.page-hero{
    position:relative;
    height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;

    background-image:url("../images/company-building.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    overflow:hidden;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(0,35,70,0.70),
        rgba(0,20,40,0.65)
    );
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:900px;
    padding:0 20px;
}

.page-hero h1{
    font-size:58px;
    font-weight:700;
    margin-bottom:20px;
    text-transform:uppercase;
}

.page-hero p{
    font-size:24px;
    line-height:1.6;
    max-width:760px;
    margin:auto;
}
.page-hero{
    animation:heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom{

    from{
        background-size:100%;
    }

    to{
        background-size:108%;
    }

}
.services-hero{

background-image:url("../images/services-banner.png");

background-size:cover;

background-position:center;

height:500px;

position:relative;

}
/* ==========================================
   Careers - Job Cards
========================================== */

.job-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    margin-top:50px;
}

.job-card{
    background:#ffffff;
    color:#222;
    padding:35px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    transition:.3s;
}

.job-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.job-card h3{
    color:#0b4ea2;
    margin-bottom:15px;
}

.job-card p{
    color:#555;
    line-height:1.7;
    margin-bottom:15px;
}

.job-card strong{
    color:#222;
}

.job-card ul{
    margin:20px 0;
    padding-left:20px;
}

.job-card li{
    color:#555;
    margin-bottom:8px;
}

.job-card .btn{
    margin-top:15px;
}
.footer-grid a{
    display:block;
    color:#d9d9d9;
    text-decoration:none;
    margin:8px 0;
    transition:0.3s;
}

.footer-grid a:hover{
    color:#ffc107;
    padding-left:6px;
}

.footer-grid h4{
    color:#ffffff;
    margin-bottom:15px;
}
/* Footer column */
.footer-column{
    display:flex;
    flex-direction:column;
}

.footer-column h4{
    color:#ffffff;
    margin-bottom:15px;
    font-size:18px;
}

/* Better clickable links */
.footer-column a{
    display:block;
    color:#d6d6d6;
    text-decoration:none;
    padding:10px 12px;
    border-radius:8px;
    margin-bottom:4px;
    transition:all 0.3s ease;
    font-weight:500;
}

.footer-column a:hover{
    background:#1b2a44;
    color:#ffb400;
    transform:translateX(4px);
}

/* Footer background */
footer{
    background:#0d1525;
    color:#ffffff;
}

.footer-grid{
    align-items:start;
}
@media (max-width:768px){
    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .footer-column a{
        padding:12px 14px;
    }
}
.footer-column{
    display:flex;
    flex-direction:column;
}

.footer-column h4{
    color:#ffffff;
    font-size:20px;
    margin-bottom:18px;
}

.footer-column a{
    display:block;
    width:100%;
    padding:10px 15px;
    margin-bottom:6px;
    color:#d8d8d8;
    text-decoration:none;
    border-radius:6px;
    transition:all .3s ease;
}

.footer-column a:hover{
    background:#0c5aa6;
    color:#ffffff;
    padding-left:22px;
}

.footer-column a:active{
    background:#0a4b89;
}

.footer-column a:focus{
    outline:2px solid #ffb400;
    outline-offset:2px;
}