:root{

--brand-green:#67c56d;

}

body{

    margin:0;

    font-family:'Poppins',sans-serif;

    background:#0f0f0f;

    color:white;

    overflow-x:hidden;

}



header{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 7%;

background:rgba(10,10,10,.75);

backdrop-filter:blur(12px);

border-bottom:1px solid rgba(255,255,255,.08);

position:fixed;

top:0;

left:0;

width:100%;

box-sizing:border-box;

z-index:1000;

}



.logo{

font-size:24px;
font-weight:bold;

}



nav a{

color:white;

text-decoration:none;

margin:0 15px;

font-weight:500;

transition:.3s;

}

nav a:hover{

color:var(--brand-green);

}



nav{

margin-left:auto;

margin-right:30px;

display:flex;

gap:25px;

}

nav{

display:flex;

align-items:center;

gap:25px;

}



.quote-btn,
.main-btn,
form button{

background:#3FA34D;

color:white;

padding:14px 28px;

border-radius:10px;

text-decoration:none;

font-weight:600;

transition:.3s;

border:none;

cursor:pointer;

}

.quote-btn:hover,
.main-btn:hover,
button:hover{

background:#57c466;

transform:translateY(-2px);

}


.hero{

height:90vh;

display:flex;

align-items:center;

justify-content:center;

padding:0 8%;

background:#0f0f0f;

text-align:center;

}


.hero-text h1{

font-size:64px;

line-height:1.15;

font-weight:700;

color:white;

margin-bottom:25px;

}


.hero-text p{

font-size:20px;

line-height:1.7;

color:#ddd;

max-width:750px;

margin:15px auto;

}


.business-tag{

font-size:20px !important;

color:#ddd !important;

font-weight:400;

}


.hero h1{

font-size:72px;

line-height:1.1;

margin-bottom:20px;

max-width:700px;

}



.hero p{

max-width:700px;

margin-left:auto;

margin-right:auto;

}


section{

padding:60px 8%;

}




.cards{

display:flex;
gap:20px;

}




.cards div,
.service-card{

padding:25px;
border-radius:12px;
box-shadow:0 5px 20px #ddd;

}




.service-card{

margin:20px 0;
cursor:pointer;

}




#service-info{

padding:25px;
background:#eee;

}




.gallery{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;

}




.gallery img{

width:100%;
border-radius:12px;

}




form{

display:flex;
flex-direction:column;
gap:15px;

}



input,
textarea,
select{

padding:15px;
font-size:16px;

}




footer{

margin-top:120px;

padding:60px 20px;

background:#090909;

text-align:center;

border-top:1px solid rgba(255,255,255,.08);

}

footer h3{

color:#67c56d;

margin-bottom:10px;

}

footer p{

color:#aaa;

line-height:1.8;

}







@media(max-width:700px){


header{

flex-direction:column;
gap:15px;

}


nav{

display:none;

}



.hero h1{

font-size:35px;

}



.cards{

flex-direction:column;

}



.gallery{

grid-template-columns:1fr;

}





.nav-menu{
    display:none;
}

.nav-menu.show{
    display:flex;
    position:absolute;
    top:75px;
    right:15px;
    flex-direction:column;
    background:#181818;
    padding:20px;
    border-radius:15px;
    gap:15px;
    width:180px;
}


}


.project{

margin-bottom:60px;

}

.project h3{

text-align:center;
margin-bottom:20px;
font-size:28px;

}

.gallery{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

}

.gallery img{

width:100%;
height:320px;
object-fit:cover;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,.15);

}



.section-title{

text-align:center;

font-size:64px;

margin-bottom:50px;

}



.accordion{

max-width:900px;

margin:auto;

}



.service{

background:#181818;

border-radius:18px;

margin-bottom:22px;

overflow:hidden;

border:1px solid rgba(255,255,255,.08);

}



.accordion-btn{

width:100%;

padding:28px;

font-size:26px;

background:none;

color:white;

border:none;

text-align:left;

cursor:pointer;

font-weight:600;

}



.accordion-btn:hover{

background:#222;

}



.accordion-content{

max-height:0;

overflow:hidden;

transition:max-height .45s ease;

padding:0 30px;

}

.accordion-content.open{

padding:30px;

}


.accordion-content p{

font-size:18px;

line-height:1.8;

color:#ddd;

}



@keyframes fade{

from{

opacity:0;

transform:translateY(-8px);

}

to{

opacity:1;

transform:translateY(0);

}

}



.gallery-grid{

display:grid;

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

gap:25px;

max-width:1000px;

margin:auto;

}



.gallery-grid img{

width:100%;

height:350px;

object-fit:cover;

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,.4);

transition:.3s;

}



.gallery-grid img:hover{

transform:scale(1.03);

}



.gallery-text{

text-align:center;

color:#ccc;

font-size:18px;

margin-bottom:40px;

}



#gallery-page{

padding-top:140px;

min-height:100vh;

}



.logo{

text-decoration:none;

color:white;

font-size:24px;

font-weight:700;

}



.about-box{

max-width:800px;

margin:auto;

background:#181818;

padding:40px;

border-radius:18px;

border:1px solid rgba(255,255,255,.08);

}


.about-box p{

font-size:18px;

line-height:1.8;

color:#ddd;

margin-bottom:20px;

}



.business-tag{

margin-top:15px;

font-size:18px;

color:#aaa;

}



.scroll{

margin-top:50px;

color:var(--brand-green);

font-weight:500;

animation:float 2s infinite;

}



@keyframes float{

0%{

transform:translateY(0);

}


50%{

transform:translateY(8px);

}


100%{

transform:translateY(0);

}

}



.center-section{

text-align:center;

max-width:900px;

margin:auto;

padding:80px 20px;

}



.quote-btn{

background:#3FA34D;

color:white;

padding:14px 28px;

border-radius:10px;

text-decoration:none;

font-weight:600;

transition:.3s;

}


.quote-btn:hover{

background:#57c466;

transform:translateY(-2px);

}



.quote-sub{

text-align:center;

color:#ccc;

font-size:18px;

margin-bottom:40px;

}



.quote-form{

max-width:600px;

margin:auto;

display:flex;

flex-direction:column;

gap:18px;

}



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

background:#181818;

border:1px solid rgba(255,255,255,.15);

border-radius:10px;

padding:15px;

font-size:16px;

color:white;

font-family:'Poppins',sans-serif;

}



.quote-form textarea{

resize:none;

}



.quote-form button{

align-self:center;

width:200px;

}



#reviews-page{

padding-top:140px;

max-width:900px;

margin:auto;

padding-left:20px;

padding-right:20px;

}

.reviews-intro{

text-align:center;

color:#ccc;

font-size:18px;

margin-bottom:50px;

}

.review-card{

background:#181818;

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

padding:30px;

margin-bottom:30px;

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

.review-card h3{

color:var(--brand-green);

margin-bottom:15px;

}

.review-card p{

line-height:1.8;

color:#ddd;

font-size:18px;

}

.review-card span{

display:block;

margin-top:20px;

color:#999;

font-style:italic;

}



.contact-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:30px;

max-width:900px;

margin:auto;

text-align:center;

}


.contact-grid div{

background:#181818;

padding:30px;

border-radius:15px;

border:1px solid rgba(255,255,255,.08);

transition:.3s;

}


.contact-grid div:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.35);

}



.contact-grid p{

color:#ddd;

overflow-wrap:break-word;

word-break:break-word;

}


.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

max-width:1000px;

margin:auto;

}

.why-card{

background:#181818;

padding:30px;

border-radius:15px;

border:1px solid rgba(255,255,255,.08);

transition:.3s;

}

.why-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.why-card h3{

color:#67c56d;

}


.contact-grid a{

color:#ddd;

text-decoration:none;

}

.contact-grid a:hover{

color:var(--brand-green);

}



.contact-grid h3{

color:var(--brand-green);

font-size:24px;

margin-bottom:15px;

}



.contact-grid a{

color:#ddd;

text-decoration:none;

transition:.3s;

}

.contact-grid a:hover{

color:var(--brand-green);

}



.section-title::after{

content:"";

display:block;

width:400px;

height:4px;

background:var(--brand-green);

margin:15px auto 0;

border-radius:999px;

}



/* ---------- Scroll Animations ---------- */

.fade-in{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-in.show{

opacity:1;

transform:translateY(0);

}



@media(max-width:768px){

.hero h1{

font-size:42px;

}

nav{

gap:15px;

}

.gallery-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

header{

padding:15px;

}

}



.navbar {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}


.logo {
  height: 70px;
  width: auto;
}


nav a {
    font-size: 1.15rem;      /* Try 1.2rem or 1.25rem if you want them larger */
    font-weight: 600;
    text-decoration: none;
    margin-left: 32px;
}



.site-title {
    display: flex;
    align-items: center;
    margin: 0;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    color: #1b4332;
}



.site-title {
    display: flex;
    align-items: center;
    gap: 8px;              /* spacing between words */
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

.highlight {
    color: #4CAF50; /* Change this to match your logo exactly */
}



.footer-title {
    color: white;
    text-decoration: none;
    font-weight: 700;
}

.footer-title .highlight {
    color: #4CAF50; /* Replace with your logo's exact green */
}


@media (max-width: 700px){

header{
    padding:10px 15px;
}

.logo{
    height:60px;
}

.site-title{
    font-size:1.3rem;
    text-align:center;
}

nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:0;
}

nav a{
    font-size:.9rem;
    margin:0;
}

.quote-btn{
    padding:10px 18px;
}

}

@media(max-width:700px){

.section-title{
    font-size:38px;
}

.section-title::after{
    width:120px;
}

}

input,
textarea,
select,
button{
    box-sizing:border-box;
    max-width:100%;
}

@media(max-width:700px){

.gallery img{
    height:220px;
}

}

@media(max-width:700px){

.gallery img{
    height:220px;
}

}

@media(max-width:700px){

.hero{
    padding-top:120px;
}

}

nav a:active{
color:var(--brand-green);
}

nav a.active{
color:var(--brand-green);
}

.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:white;
    font-size:32px;
    cursor:pointer;
}



.nav-menu{
    display:flex;
    align-items:center;
    gap:25px;
}

.nav-menu a{
    margin:0;
}


.hero{
    padding-top:140px;
}

@media(max-width:700px){

.site-title{
    display:none;
}

.logo{
    height:55px;
}

header{
    flex-direction:row;
    justify-content:space-between;
    padding:10px 15px;
}

}

.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:white;
    font-size:32px;
    cursor:pointer;
}
  


@media(max-width:700px){

.menu-toggle{
    display:block;
}

}

@media(min-width:701px){

header{
    flex-direction:row;
}

.site-title{
    margin-right:auto;
}

nav{
    display:flex;
    align-items:center;
}

}

@media (min-width:701px){

header{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
}

.site-title{
    display:flex;
    margin-left:15px;
}

nav{
    display:flex;
    align-items:center;
    gap:25px;
    margin-left:auto;
}

nav a{
    display:block;
}

.menu-toggle{
    display:none;
}

}


@media(max-width:700px){

    .nav-menu{
        display:none;
        position:absolute;
        top:75px;
        right:15px;
        flex-direction:column;
        background:#181818;
        padding:20px;
        border-radius:15px;
        gap:15px;
        width:180px;
    }


    .nav-menu.show{
        display:flex;
    }

}



@media(max-width:700px){

.contact-grid a{
    white-space:nowrap;
    font-size:14px;
}

}

section{
    scroll-margin-top:120px;
}