:root {

--dark:#1E1E1E;
--cream:#F8F6F1;
--copper:#B46B35;
--gray:#D9D5CE;
--green:#3E4A3A;

}


* {

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

}


html {

scroll-behavior:smooth;

}


body {

font-family:"Inter", Arial, sans-serif;
background:var(--cream);
color:var(--dark);
line-height:1.7;

}


.container {

width:90%;
max-width:1200px;
margin:auto;

}




/* HEADER */

.header {

background:var(--dark);
padding:20px 0;
position:sticky;
top:0;
z-index:999;

}


.nav-container {

display:flex;
justify-content:space-between;
align-items:center;

}


.logo img {

height:65px;

}


nav a {

color:white;
text-decoration:none;
margin-left:35px;
font-weight:600;
transition:.3s;

}


nav a:hover {

color:var(--copper);

}





/* HERO */

.hero {

height:90vh;

background:
linear-gradient(
90deg,
rgba(30,30,30,.85),
rgba(30,30,30,.35)
),
url("images/hero.jpg");

background-size:cover;
background-position:center;

display:flex;
align-items:center;

}


.hero-content {

color:white;
max-width:750px;

}


.eyebrow {

color:var(--copper);
font-weight:bold;
letter-spacing:3px;
margin-bottom:20px;

}


.hero h1 {

font-family:Georgia, serif;
font-size:clamp(45px,6vw,75px);
line-height:1.1;
margin-bottom:25px;

}


.hero p {

font-size:22px;
color:var(--cream);
margin-bottom:35px;

}





/* BUTTONS */

.button {

display:inline-block;
background:var(--copper);
color:white;
padding:16px 38px;
border-radius:50px;
text-decoration:none;
font-weight:bold;
margin-right:15px;
transition:.3s;

}


.button:hover {

transform:translateY(-3px);
background:#8f5128;

}


.secondary {

background:transparent;
border:2px solid white;

}


.secondary:hover {

background:white;
color:var(--dark);

}





/* SECTION HEADINGS */

h2 {

font-family:Georgia, serif;
font-size:44px;
text-align:center;
margin-bottom:50px;

}


section {

padding:90px 0;

}





/* TRUST */

.trust {

background:var(--green);
color:white;

}


.trust-grid {

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
text-align:center;

}


.trust h3 {

font-size:25px;
margin-bottom:10px;

}





/* SERVICES */

.services {

background:white;

}


.service-grid {

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}


.service-card {

background:var(--cream);
border-radius:18px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;

}


.service-card:hover {

transform:translateY(-10px);

}


.service-card img {

width:100%;
height:250px;
object-fit:cover;

}


.service-card h3 {

font-family:Georgia,serif;
font-size:28px;
padding:20px;

}


.service-card p {

padding:0 20px 30px;

}





/* PROCESS */

.process {

background:var(--dark);
color:white;

}


.process-grid {

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}


.process-grid div {

border:1px solid rgba(255,255,255,.2);
padding:35px;
border-radius:15px;

}


.process span {

font-size:40px;
color:var(--copper);
font-weight:bold;

}


.process h3 {

margin:15px 0;

}





/* PROJECTS */


/* TESTIMONIAL */

.testimonials {

background:white;

}


.testimonial-box {

max-width:700px;
margin:auto;
background:var(--cream);
padding:40px;
border-left:5px solid var(--copper);
font-size:22px;
text-align:center;
border-radius:10px;

}


.testimonial-box strong {

display:block;
color:var(--copper);
margin-top:20px;

}





/* CTA */

.cta {

background:
linear-gradient(
rgba(30,30,30,.8),
rgba(30,30,30,.8)
),
url("images/hero.jpg");

background-size:cover;

color:white;
text-align:center;

}


.cta h2 {

color:white;

}





/* CONTACT */

.contact {

background:white;
text-align:center;

}


.quote-form {

max-width:700px;
margin:40px auto;

display:grid;
gap:20px;

}


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

padding:16px;
border:1px solid var(--gray);
border-radius:8px;
font-size:16px;

}


.quote-form textarea {

min-height:150px;

}


.quote-form button {

border:none;
cursor:pointer;

}





/* FOOTER */

footer {

background:var(--dark);
color:white;
text-align:center;
padding:50px 0;

}


footer h3 {

font-family:Georgia,serif;
font-size:30px;
color:var(--copper);

}





/* ANIMATIONS */

.service-card,
.process-grid div,
.testimonial-box {

animation:fadeUp .8s ease;

}


@keyframes fadeUp {

from {

opacity:0;
transform:translateY(30px);

}

to {

opacity:1;
transform:none;

}

}





/* MOBILE */

@media(max-width:900px){


.service-grid {

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

}


.process-grid {

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

}


.gallery {

grid-template-columns:1fr;

}


.trust-grid {

grid-template-columns:1fr;

}


}
/* BEFORE AFTER SLIDER */

.before-after-container {

position:relative;
width:100%;
max-width:900px;
height:550px;
margin:50px auto;
overflow:hidden;
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,.2);

}


.before-after-container > img {

position:absolute;
width:100%;
height:100%;
object-fit:cover;
top:0;
left:0;

}


.after-container {

position:absolute;
top:0;
left:0;
height:100%;
width:50%;
overflow:hidden;
z-index:2;

}


.after-container img {

width:900px;
max-width:none;

}


.comparison-slider {

position:absolute;
bottom:20px;
left:10%;
width:80%;
z-index:10;

}


.slider-line {

position:absolute;
height:100%;
width:3px;
background:white;
left:50%;
top:0;
z-index:5;

}

/* MOBILE */

@media(max-width:900px){

.service-grid {
    grid-template-columns:repeat(2,1fr);
}

.process-grid {
    grid-template-columns:repeat(2,1fr);
}

.trust-grid {
    grid-template-columns:1fr;
}

.project-grid,
.review-grid {
    grid-template-columns:1fr;
}

}


@media(max-width:600px){

.nav-container {
    flex-direction:column;
}

nav {
    margin-top:20px;
}

nav a {
    margin:0 10px;
}

.hero {
    height:75vh;
}

.hero h1 {
    font-size:42px;
}

.service-grid,
.process-grid {
    grid-template-columns:1fr;
}

.button {
    display:block;
    margin:10px 0;
}
}