/* ====================================
VERANO FRUIT
Luxury Coming Soon
==================================== */

:root{

--bg:#FFFDF8;
--text:#252525;

--green:#5A8F3D;
--green-dark:#355E3B;

--beige:#F5F1E8;

}

/* RESET */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:'Manrope',sans-serif;
background:var(--bg);

overflow:hidden;

color:var(--text);

position:relative;

height:100vh;

}

/* BACKGROUND */

.gradient{

position:absolute;

inset:0;

background:
radial-gradient(circle at top,
#ffffff,
#FFFDF8 60%,
#F5F1E8 100%);

z-index:-2;

}

.grid{

position:absolute;

inset:0;

background-image:

linear-gradient(rgba(53,94,59,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(53,94,59,.05) 1px, transparent 1px);

background-size:80px 80px;

z-index:-1;

}

/* MAIN */

main{

height:100%;

display:flex;

justify-content:center;

align-items:center;

padding:40px;

}

/* HERO */

.hero{

max-width:980px;

text-align:center;

}

/* LOGO */

.logo{

width:185px;

margin-bottom:20px;

opacity:0;

animation:fade 1.2s forwards;

}

/* TITLE */

h1{

font-size:clamp(2.5rem,8vw,4.5rem);

font-weight:800;

line-height:.98;

letter-spacing:-3px;

opacity:0;

animation:up 1.2s .4s forwards;

}

/* PARAGRAPH */

p{

margin:42px auto;

max-width:720px;

font-size:18px;

line-height:1.6;

font-weight:400;

color:#555;

opacity:0;

animation:fade 1.4s .9s forwards;

}

.orange-text {
	color: #F4A300
}

/* SMALL */

.launching{

display:inline-block;

margin-top:15px;

font-size:20px;

letter-spacing:2px;

text-transform:uppercase;

font-weight:700;

color:var(--green);

opacity:0;

animation:fade 1.4s 1.3s forwards;

}

/* FRUITS */

.fruit{

position:absolute;

pointer-events:auto;

transition:.45s;

filter:drop-shadow(0 18px 35px rgba(0,0,0,.12));

user-select:none;

}

.fruit:hover{

transform:scale(1.08);

}

/* POSITIONS */

.lemon{

width:120px;

left:7%;

top:18%;

animation:float1 8s ease-in-out infinite;

}

.orange{

width:130px;

right:9%;

top:9%;

animation:float2 11s ease-in-out infinite;

}

.avocado{

width:135px;

left:8%;

bottom:10%;

animation:float3 9s ease-in-out infinite;

}

.pineapple{

width:150px;

right:8%;

bottom:8%;

animation:float1 10s ease-in-out infinite;

}

.strawberry{

width:85px;

left:26%;

bottom:22%;

animation:float2 7s ease-in-out infinite;

}

.watermelon{

width:150px;

right:22%;

top:52%;

animation:float3 12s ease-in-out infinite;

}

/* ANIMATIONS */

@keyframes float1{

0%,100%{

transform:translateY(0px) rotate(0deg);

}

50%{

transform:translateY(-18px) rotate(5deg);

}

}

@keyframes float2{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(22px) rotate(-5deg);

}

}

@keyframes float3{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px) rotate(3deg);

}

}

@keyframes fade{

to{

opacity:1;

}

}

@keyframes up{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:none;

}

}

/* RESPONSIVE */

@media(max-width:992px){

h1{

font-size:64px;

}

p{

font-size:18px;

max-width:90%;

}

.fruit{

opacity:.8;

}

}

@media(max-width:768px){

body{

overflow:auto;

}

main{

padding:70px 30px;

}

.logo{

width:165px;

}

h1{

font-size:42px;

letter-spacing:-2px;

}

p{

font-size:15px;

line-height:1.6;

}

.lemon{

width:80px;

}

.orange{

width:85px;

}

.avocado{

width:90px;

}

.pineapple{

width:95px;

}

.watermelon{

width:90px;

}

.strawberry{

width:55px;

}

}