body{

background:#0b0c10;
color:white;
font-family:Arial;

margin:0;

}

header{

display:flex;
justify-content:space-between;
padding:20px;

background:black;

}

nav a{

color:#66fcf1;
margin:10px;
text-decoration:none;

}

.hero{

text-align:center;
padding:120px 20px;

background:linear-gradient(black,#111);

}

.hero button{

padding:15px 30px;
background:#45a29e;
border:none;
color:white;
cursor:pointer;

}

.services{

padding:120px 10%;

}

.service-grid{

display:grid;

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

gap:20px;

padding:40px;

}

.card{

background:#1f2833;
padding:20px;
border-radius:10px;

}

.timeline{

padding:50px;
text-align:center;

}

.step{

margin:15px;
padding:10px;
border-left:3px solid cyan;

}

.whatsapp{

position:fixed;
bottom:20px;
right:20px;

background:#25D366;

color:white;

padding:15px;

border-radius:50px;

font-weight:bold;

}

.cursor{

position:fixed;
width:20px;
height:20px;
border-radius:50%;
background:cyan;
pointer-events:none;
filter:blur(8px);

}

.lightbox{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.9);

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

z-index:9999;

}

.lightbox img{

max-width:90%;
max-height:90%;

border-radius:10px;

}

/* PORTFOLIO LIGHTBOX STYLES */

.lightbox-overlay {
position: fixed;
top: 0;
left: 0;
width: 60%;
height: 100%;
background: rgba(0,0,0,0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.lightbox-image {
max-width: 60%;
max-height: 60%;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0,255,255,0.4);
animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}