@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

*{box-sizing:border-box}
body{
margin:0;
font-family:Nunito,sans-serif;
background:#faf4eb;
color:#292929
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 7%;
background:#faf4eb
}
.logo{
font-size:38px;
font-weight:900;
color:#2e8b57
}
nav a{
margin:0 12px;
text-decoration:none;
color:#333
}
.hero{
display:flex;
align-items:center;
padding:60px 8%;
gap:40px
}
.hero-text{flex:1}
.hero h1{
font-size:60px;
line-height:1.1;
color:#2e8b57
}
.hero p{font-size:20px}
.hero-art img{max-width:350px}
.btn,button{
background:#f47a2a;
color:white;
padding:15px 30px;
border:0;
border-radius:30px;
text-decoration:none;
cursor:pointer
}
.products,.ingredients,.reviews,.story{
padding:60px 8%;
text-align:center
}
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px
}
.card{
background:white;
padding:25px;
border-radius:30px;
box-shadow:0 10px 30px #00000010
}
.card img{
max-width:100%;
height:250px;
object-fit:contain
}
.story{
background:#fff0d8
}
footer{
padding:40px;
text-align:center;
background:#2e8b57;
color:white
}
@media(max-width:768px){
.hero{flex-direction:column}
.hero h1{font-size:42px}
.grid{grid-template-columns:1fr}
}

.hero-gif{
    width:100%;
    max-width:520px;
    border-radius:40px;
    display:block;
    animation: floatGumbee 4s ease-in-out infinite;
}

@keyframes floatGumbee{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
}