*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;

}



html{

scroll-behavior:smooth;

}



body{

background:white;
color:#111;

}




/* HEADER */


header{

display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
background:white;
border-bottom:1px solid #ddd;
position:sticky;
top:0;
z-index:1000;

}



.logo img{

width:110px;

}



nav a{

text-decoration:none;
color:#000;
font-weight:bold;
margin-left:20px;

}



nav a:hover{

opacity:.6;

}






/* HERO */


.hero{

height:85vh;
background:#000;
color:white;

display:flex;
align-items:center;
justify-content:center;

text-align:center;
padding:20px;

}



.hero-text{

animation:show 1.5s ease;

}



.hero h1{

font-size:55px;
letter-spacing:2px;

}



.hero p{

font-size:22px;
margin:25px 0;
line-height:1.6;

}



.btn{

display:inline-block;
background:#000;
color:white;
padding:15px 35px;
text-decoration:none;
border:none;
cursor:pointer;
border-radius:5px;

}



.hero .btn{

background:white;
color:black;

}






/* SECTIONS */


section{

padding:70px 8%;
text-align:center;

}



section h2{

font-size:35px;
margin-bottom:40px;

}






/* SERVICES */


.cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}



.cards div{

border:1px solid #ddd;
padding:30px;
transition:.3s;

}



.cards div:hover{

background:#000;
color:white;
transform:translateY(-8px);

}







/* VIDEO */


.video-container{

max-width:900px;
margin:auto;

}



.video-container video{

width:100%;
border-radius:15px;

}







/* GALLERY */


.gallery{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}



.gallery img{

width:100%;
height:260px;

object-fit:cover;

border-radius:10px;

transition:.4s;

}



.gallery img:hover{

transform:scale(1.05);

}








/* ORDER FORM */


form{

max-width:600px;
margin:auto;

}



input,
select,
textarea{


width:100%;
padding:15px;
margin:10px 0;

border:1px solid #ccc;

}



textarea{

height:120px;

}



form .btn{

background:#000;
color:white;

}







/* WHATSAPP BUTTON */


.whatsapp{


position:fixed;

right:20px;

bottom:20px;

background:#000;

color:white;

padding:15px 25px;

border-radius:50px;

text-decoration:none;

font-weight:bold;


}







/* FOOTER */


footer{

background:#000;

color:white;

padding:25px;

text-align:center;


}








/* ANIMATION */


@keyframes show{


from{

opacity:0;

transform:translateY(40px);

}



to{

opacity:1;

transform:translateY(0);

}


}









/* TABLET */


@media(max-width:1000px){


.cards{

grid-template-columns:repeat(2,1fr);

}



.gallery{

grid-template-columns:repeat(3,1fr);

}


}









/* MOBILE */


@media(max-width:600px){


header{

flex-direction:column;

}



nav{

margin-top:20px;

}



nav a{

margin:8px;

display:inline-block;

}



.hero h1{

font-size:32px;

}



.hero p{

font-size:17px;

}



.cards{

grid-template-columns:1fr;

}



.gallery{

grid-template-columns:repeat(2,1fr);

}



.gallery img{

height:180px;

}



}
