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

body{
line-height:1.6;
}

/* HEADER */
.header{
position:sticky;
top:0;
z-index:1000;
background:#0ea5e9;
padding:15px 20px;

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

/* LOGO */
.logo{
width:60px;
border-radius:50%;
}

/* NAV DESKTOP */
.nav{
display:flex;
gap:25px;
}

.nav a{
color:white;
text-decoration:none;
font-weight:bold;
transition:0.3s;
}

.nav a:hover{
opacity:0.8;
}

/* HAMBURGER */
.menu-toggle{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.menu-toggle span{
width:25px;
height:3px;
background:white;
border-radius:3px;
transition:0.3s;
}

/* MOBILE */
@media (max-width:768px){

.menu-toggle{
display:flex;
}

/* NAV DROPDOWN */
.nav{
position:absolute;
top:70px;
left:0;
width:100%;
background:#0284c7;
flex-direction:column;
align-items:center;

max-height:0;
overflow:hidden;

transition:max-height 0.4s ease;
}

/* ACTIVE */
.nav.active{
max-height:300px;
padding:10px 0;
}

/* HAMBURGER ANIMATION */
.menu-toggle.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.menu-toggle.active span:nth-child(2){
opacity:0;
}

.menu-toggle.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

}


/* Hero animation */
.hero{
padding:60px 20px;
text-align:center;
background:#f1f5f9;
animation:fadeIn 1.5s ease-in-out;
}

.hero h1{
font-size:32px;
margin-bottom:10px;
}

/* Button animation */
.btn{
display:inline-block;
padding:12px 20px;
background:#0ea5e9;
color:white;
text-decoration:none;
border-radius:5px;
margin-top:10px;
transition:0.3s;
}

.btn:hover{
transform:scale(1.05);
}


.why{
padding:40px 20px;
background:#f8fafc;
text-align:center;
}
.faq {
padding: 50px 20px;
background: #f9f9f9;
text-align: center;
}

.faq-item {
background: white;
margin: 10px auto;
padding: 15px;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
max-width: 600px;
text-align: left;
transition: 0.3s;
}

.faq-item h3 {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
}

.faq-item span {
font-size: 20px;
font-weight: bold;
}

.faq-item p {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
margin-top: 10px;
}

.faq-item.active p {
max-height: 200px;
}

.faq-item.active span {
content: "-";
}
/* Services */
.services{
padding:40px 20px;
text-align:center;
}

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

.card{
padding:20px;
background:#f8fafc;
border-radius:8px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
transition:0.3s;
animation:slideUp 1s ease forwards;
}

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

/* Pricing */
.pricing{
padding:40px 20px;
background:#f1f5f9;
text-align:center;
}

.price{
font-size:24px;
color:#0ea5e9;
margin:10px 0;
}

/* WhatsApp bounce */
.whatsapp{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
padding:15px;
border-radius:50%;
text-decoration:none;
font-size:20px;
animation:bounce 2s infinite;
}

/* Animations */
@keyframes fadeIn{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes slideUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes fadeDown{
from{
opacity:0;
transform:translateY(-20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes bounce{
0%,20%,50%,80%,100%{
transform:translateY(0);
}
40%{
transform:translateY(-10px);
}
60%{
transform:translateY(-5px);
}
}

/* Mobile Responsive */
@media (max-width:768px){

header{
padding:15px;
}

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

nav{
flex-direction:column;
align-items:center;
gap:10px;
}

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

.card{
margin:10px 0;
}

.btn{
width:100%;
text-align:center;
}

.whatsapp{
bottom:15px;
right:15px;
padding:12px;
}

}
footer{
text-align:center;
padding:20px;
background:#0ea5e9;
color:white;
}