*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins;
}

body{
background:#f6f8fa;
}

nav{
display:flex;
justify-content:space-between;
padding:20px 8%;
align-items:center;
background:white;
position:sticky;
top:0;
box-shadow:0 3px 10px rgba(0,0,0,.1);
}

ul{
display:flex;
gap:30px;
list-style:none;
}

a{
text-decoration:none;
color:black;
}

.logo{
display:flex;
align-items:center;
gap:12px;
}

.logo-icon{
width:55px;
height:55px;

background:linear-gradient(
135deg,
#0a8f4c,
#12c06a
);

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

border-radius:50%;

font-size:28px;

box-shadow:
0 8px 20px rgba(10,143,76,.35);

}

.logo-text{
display:flex;
flex-direction:column;
line-height:1;
}

.logo-text .top{

font-size:30px;
font-weight:700;

color:#0f172a;

letter-spacing:1px;
}

.logo-text .bottom{

margin-top:6px;

font-size:13px;

font-weight:500;

letter-spacing:3px;

text-transform:uppercase;

color:#0a8f4c;

}

.call-btn{
background:#0a8f4c;
padding:10px 18px;
color:white;
border-radius:10px;
}

.hero{

height:90vh;

background:
linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.65)
),

url("https://images.unsplash.com/photo-1621905252507-b35492cc74b4");

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

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

text-align:center;
color:white;

}

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

.hero p{
margin:20px 0;
}

.btn{

background:#0a8f4c;
padding:14px 30px;
display:inline-block;
border-radius:30px;
color:white;

}

section{
padding:80px 8%;
}

h2{
text-align:center;
margin-bottom:40px;
font-size:35px;
}

.cards{

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

gap:25px;

}

.card{

background:white;
padding:30px;
border-radius:20px;

box-shadow:
0 5px 20px rgba(0,0,0,.08);

transition:.3s;

}

.card:hover{
transform:translateY(-8px);
}

.dark{

background:#1d2d35;
color:white;

}

.features{

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

gap:20px;

text-align:center;

}

.steps{

display:flex;
justify-content:space-around;
flex-wrap:wrap;
gap:20px;

}

.steps div{

background:white;

padding:25px;

border-radius:15px;

box-shadow:
0 5px 15px rgba(0,0,0,.1);

}

.contact{

background:#0a8f4c;

color:white;

text-align:center;

}

footer{

padding:30px;
text-align:center;
background:black;
color:white;

}

@media(max-width:768px){

nav{
flex-direction:column;
gap:15px;
}

ul{
flex-wrap:wrap;
justify-content:center;
}

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

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

.contact-box{

max-width:500px;
margin:auto;

background:rgba(255,255,255,.1);

padding:30px;

border-radius:25px;

backdrop-filter:blur(10px);

margin-top:30px;

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

}

.contact h3{

margin-bottom:10px;

font-size:22px;

}

.whatsapp{

margin-left:10px;

background:#25D366;

}

.pest-icons{

display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;

margin:30px 0;

}

.pest-icons span{

background:rgba(255,255,255,.12);

padding:12px 22px;

border-radius:40px;

backdrop-filter:blur(10px);

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

font-size:14px;
font-weight:600;

transition:.3s;

}

.pest-icons span:hover{

transform:translateY(-5px);

background:#0a8f4c;

}

}