body{

font-family:Montserrat;

margin:0;

background:#f4f6f8;

}



.header{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 30px;

background:#0F2A44;

color:white;

position:sticky;

top:0;

}



.logoBox{

display:flex;

align-items:center;

gap:10px;

}



.logoImg{

width:55px;

}



.tag{

font-size:12px;

margin:0;

}



nav a{

color:white;

margin-left:25px;

text-decoration:none;

font-weight:600;

}



.menu{

display:none;

font-size:28px;

cursor:pointer;

}



.hero{

height:80vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

color:white;

background:


linear-gradient(rgba(0,0,0,.6),

rgba(0,0,0,.6)),

url('https://images.unsplash.com/photo-1581093458791');

background-size:cover;

}



.hero h1{

font-size:45px;

max-width:800px;

}



.btn{

background:#F59E0B;

padding:12px 25px;

color:white;

text-decoration:none;

margin-top:20px;

border-radius:4px;

}



.products{

padding:60px 30px;

text-align:center;

}



.grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:40px;

}



.card{

background:white;

border-radius:8px;

overflow:hidden;

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

transition:.3s;

}



.card:hover{

transform:translateY(-8px);

}



.card img{

width:100%;

height:200px;

object-fit:cover;

}



.about{

padding:60px;

background:white;

text-align:center;

}



.cta{

background:#0F2A44;

color:white;

text-align:center;

padding:60px;

}



footer{

background:#222;

color:white;

text-align:center;

padding:20px;

}



.whatsapp{

position:fixed;

bottom:25px;

right:25px;

background:#25D366;

color:white;

padding:15px;

border-radius:50px;

text-decoration:none;

}



@media(max-width:900px){

nav{

position:absolute;

top:70px;

right:0;

background:#0F2A44;

width:200px;

display:none;

flex-direction:column;

}



nav a{

margin:15px;

}



.menu{

display:block;

}

}



@media(max-width:600px){

.hero h1{

font-size:28px;

}



.products{

padding:40px 15px;

}



.about{

padding:40px 20px;

}

}