*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#0f0f0f;
color:white;
line-height:1.6;
font-family: Inter, sans-serif;
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
padding:20px 10%;
background:#111;
}

.nav-links{
list-style:none;
display:flex;

gap:20px;
}

.nav-links a{
text-decoration:none;
color:white;

}

/* HERO */

.hero{
text-align:center;
padding:120px 20px;
}

.hero h1{
font-size:48px;
margin-bottom:20px;
}

.cta-button{
display:inline-block;
margin-top:20px;
padding:12px 25px;
background:#4CAF50;
color:white;
text-decoration:none;
border-radius:5px;
transition:0.3s;
}





.cta-button:hover{
transform:scale(1.05);
box-shadow:0 0 15px rgba(76,175,80,0.6);
}

/* SERVICES */

.services{
padding:80px 10%;
text-align:center;
transition: 0.3s;
}

.services:hover {
  transform:translateY(-10px);

}

.service-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
margin-top:40px;
}

.service{
background:#1b1b1b;
padding:30px;
border-radius:10px;
}

/* PROCESS */

.process{
padding:80px 10%;
text-align:center;
}

/* ABOUT */

.about{
padding:80px 10%;
text-align:center;
}

/* CONTACT */

.contact{
padding:80px 10%;
text-align:center;
}

form{
display:flex;
flex-direction:column;
gap:15px;
max-width:400px;
margin:auto;
}

input, textarea{
padding:10px;
border:none;
border-radius:5px;
}

select{
padding:10px;
border-radius:5px;
border:none;
}

button{
padding:10px;
border:none;
background:#4CAF50;
color:white;
border-radius:5px;
}

.whatsapp-button{
display:inline-block;
margin-top:30px;
padding:12px 25px;
background:#25D366;
color:white;
text-decoration:none;
border-radius:30px;
font-weight:600;
transition:0.3s;
}

.whatsapp-button:hover{
transform:scale(1.05);
box-shadow:0 0 10px rgba(37,211,102,0.6);
}

/* FOOTER */

footer{
text-align:center;
padding:30px;
background:#111;
}

.logo {
 width: 300px;
margin-right: 20px;
}

.logo-image {
  width:100%;
  border-radius: 15px;
  transition:0.3s;
}


.logo-image:hover{
transform:scale(1.1);
}

section{
animation:fadeUp 1s ease;
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}
}