.hero{
position:relative;
padding:200px 20px 160px 20px;
text-align:center;
background:var(--primary);
overflow:hidden;
}

/* HERO CONTENT */

.hero-content{
max-width:750px;
margin:auto;
position:relative;
z-index:2;
}

.hero h1{
font-size:56px;
margin-bottom:20px;
}

.hero p{
font-size:18px;
margin-bottom:30px;
}

.hero-btn{
background:var(--black);
color:var(--white);
padding:14px 30px;
text-decoration:none;
font-weight:bold;
border-radius:8px;
display:inline-block;
transition:all .25s ease;
}

.hero-btn:hover{
transform:translateY(-3px);
}

/* FLOATING ICE CREAM */

.float{
position:absolute;
width:90px;
opacity:0.9;
animation:float 6s ease-in-out infinite;
}

/* positions */

.float1{
top:80px;
left:10%;
animation-delay:0s;
}

.float2{
top:120px;
right:12%;
animation-delay:1s;
}

.float3{
bottom:70px;
left:18%;
animation-delay:2s;
}

.float4{
bottom:90px;
right:20%;
animation-delay:3s;
}

/* animation */

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-18px);
}

100%{
transform:translateY(0px);
}

}