*{
    scroll-behavior: smooth;
}
body{
font-family:'Inter',sans-serif;
background:#f6f8fb;
margin:0;
}

/* NAVBAR */
.navbar{
position:sticky;
top:0;
background:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
z-index:100;
}
.logo{
font-size:20px;
font-weight:600;
color:#2e8b57;
}

/* SEARCH */

.search-box{
display:flex;
gap:5px;
}

.search-box input{
padding:8px 12px;
border:1px solid #ddd;
border-radius:6px;
}

.search-box button{
background:#2e8b57;
color:white;
border:none;
padding:8px 12px;
border-radius:6px;
cursor:pointer;
}

/* CATEGORY */

.categories{
display:flex;
gap:10px;
padding:10px 20px;
flex-wrap:wrap;
}

.categories button{
border:none;
background:#e9f5ee;
color:#2e8b57;
padding:6px 12px;
border-radius:20px;
cursor:pointer;
}

/* PRODUCTS GRID */

#products{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:20px;
padding:20px;
}

/* PRODUCT CARD */

.product{
background:white;
border-radius:10px;
padding:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
transition:0.25s;
}

.product:hover{
transform:translateY(-4px);
box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

.product h3{
margin:0 0 10px;
font-size:18px;
}

.product p{
margin:4px 0;
color:#555;
}

/* BUTTONS */

button{
font-family:'Inter',sans-serif;
}

/* FAB */

.fab{
position:fixed;
bottom:25px;
right:25px;
width:60px;
height:60px;
border-radius:50%;
background:#2e8b57;
color:white;
font-size:22px;
border:none;
cursor:pointer;
box-shadow:0 6px 16px rgba(0,0,0,0.2);
}

/* TRANSPORT */

.truck{
background:white;
padding:12px;
border-radius:8px;
margin:10px 0;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* MOBILE */

@media(max-width:768px){

.navbar{
flex-direction:column;
gap:10px;
}

.search-box{
width:100%;
}

.search-box input{
flex:1;
}

}

header{

background:linear-gradient(45deg,#2e8b57,#3cb371);

color:white;

padding:20px;

display:flex;

justify-content:space-between;

align-items:center;

}

.auth button{

margin-left:5px;

padding:8px 12px;

border:none;

background:white;

color:#2e8b57;

cursor:pointer;

border-radius:5px;

transition:0.3s;

}

.auth button:hover{

transform:scale(1.1);

}

section{

padding:20px;

}

#products{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

gap:20px;

}

.product{

background:white;

padding:15px;

border-radius:10px;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

transition:0.3s;

}

.product:hover{

transform:translateY(-5px);

}

#trucks{

margin-top:20px;

}

.truck{

background:white;

padding:10px;

margin:10px 0;

border-radius:5px;

animation:fade 0.5s;

}

@keyframes fade{

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

}

.fab{

position:fixed;

bottom:30px;

right:30px;

width:60px;

height:60px;

border-radius:50%;

background:#2e8b57;

color:white;

font-size:30px;

border:none;

cursor:pointer;

box-shadow:0 5px 10px rgba(0,0,0,0.2);

transition:0.3s;

}

.fab:hover{

transform:scale(1.2);

}

.modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

justify-content:center;

align-items:center;

}

.modal-content{

background:white;

padding:20px;

border-radius:10px;

width:300px;

animation:fade 0.3s;

}

input,select{

width:100%;

padding:8px;

margin:5px 0;

}
.footer{

background:#1e2a24;

color:white;

margin-top:40px;

padding-top:40px;

}

.footer-container{

display:grid;

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

gap:30px;

padding:20px 40px;

}

.footer-section h3,
.footer-section h4{

margin-bottom:10px;

}

.footer-section ul{

list-style:none;

padding:0;

}

.footer-section ul li{

margin-bottom:6px;

}

.footer-section a{

color:#ccc;

text-decoration:none;

}

.footer-section a:hover{

color:white;

}

.social a{

font-size:20px;

margin-right:10px;

color:white;

}

.footer-bottom{

text-align:center;

border-top:1px solid #333;

padding:15px;

margin-top:20px;

font-size:14px;

}