/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  overflow-x:hidden;
}

/* MAIN SECTION */
.hero{
  width:100%;
  min-height:100vh;
  background:url(../images/ground-bg-oil.png) no-repeat center/cover;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:60px;
}

/* OVERLAY */
.hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(to right, rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 75%);
}

/* CONTENT */
.content{
  position:relative;
  max-width:600px;
  z-index:2;
  animation:fadeUp 1.5s ease;
    background:#FFFFFF;
	padding:0 2% 0 2%;
background-color: rgba(255, 255, 255, 0.7); 

}

/* TITLE */
.content h1{
  font-size:50px;
  color:#1b5e20;
  margin-bottom:20px;
  letter-spacing:2px;
}

/* TEXT */
.content p{
  font-size:16px;
  line-height:1.8;
  color:#333;
  margin-bottom:15px;
  opacity:0;
  transform:translateY(20px);
  transition:all 0.8s ease;
  
}

/* ACTIVE TEXT */
.content p.show{
  opacity:1;
  transform:translateY(0);
}

/* QUOTE */
.quote{
  font-style:italic;
  color:#2e7d32;
}

/* FLOATING LEAVES */
.leaf{
  position:absolute;
  width:60px;
  animation:leafFloat 6s infinite ease-in-out;
  opacity:0.8;
}

.leaf:nth-child(1){ top:10%; left:5%; }
.leaf:nth-child(2){ top:40%; left:15%; animation-delay:2s;}
.leaf:nth-child(3){ top:70%; left:10%; animation-delay:4s;}

/* OIL DROP */
.drop{
  position:absolute;
  top:10%;
  left:25%;
  width:90px;
  animation:dropMove 3s infinite ease-in-out;
}

/* FEATURES BAR */
.features{
  position:absolute;
  bottom:0;
  width:100%;
  background:linear-gradient(to right,#1b5e20,#2e7d32);
  color:white;
  display:flex;
  justify-content:space-around;
  padding:18px;
  z-index:2;
}

.features div{
  font-size:14px;
  text-align:center;
}

/* ANIMATIONS */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(40px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes leafFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-20px);}
}

@keyframes dropMove{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(25px);}
}

/* RESPONSIVE */
@media(max-width:900px){
  .hero{
    justify-content:center;
    text-align:center;
    padding:30px;
  }

  .hero::before{
    background:rgba(255,255,255,0.9);
  }

  .content h1{
    font-size:36px;
  }
}