@import url("https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Poppins:wght@400;500;600&display=swap");
/*=============== HOME ===============*/
.home{
  position: relative;
  background: url("Background(2).png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  align-items: center;
  background-attachment: fixed;
  filter: brightness(1.1);
}

.home__container{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;

}

.home::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background: linear-gradient(
    rgba(0,0,0,0.30),
    rgba(0,0,0,0.10)
  );
}

.home__data{
  text-align: left;
}

.home__title{
  font-size: 64px;
  font-family: 'Poppins', sans-serif;
  font-weight: 530;
  line-height: 1.1;
  margin-bottom: 7px;
  color: #ece3ca;
}

.home__subtitle{
  font-family:'Poppins', sans-serif;
  font-size:32px;
  font-weight:500;
  color:#6bc48f;
  margin-bottom:10px;
}

.home__description{
  font-family:'Poppins', sans-serif;
  font-size:18px;
  line-height:1.6;
  color:#e5e5e5;
  margin-bottom:30px;
  max-width:500px;
}

.home__fruit,
.home__branch{
  filter: var(--filter-img);
  position: absolute;
}

.home__buttons{
  display:flex;
  gap:20px;
  margin-bottom:25px;
}

.button--outline{

   border:2px solid white;
   background:transparent;
   color:transparent;

}

.home__features{
   margin-top:10px;
   display:flex;
   flex-direction:column;
   gap:8px;
   font-size:0.95rem;
   color: white;
   font-weight: 500;
}


/*=============== BUTTON ===============*/
.button{
  display: inline-block;
  background-color: var(--first-color);
  padding: 0.5rem 2rem ;
  border-radius: 4rem;
  color: var(--white-color);
  font-weight: 300;
  transition: box-shadow .4s;
}

.button:hover{
  box-shadow: 0 8px 24px hsla(140, 40%, 48%, .3);
}

.button--outline{
  background-color: transparent;

}

/* ===================================== */
/* HOME RESPONSIVE */
/* ===================================== */

/* =========================
   MACBOOK / LAPTOP
========================= */
@media screen and (max-width:1200px){

   .home{
      background-size:cover;
   }


   .home__title{
      font-size:56px;
   }

   .home__subtitle{
      font-size:28px;
   }

   .home__description{
      font-size:17px;
   }

}

/* =========================
   TABLET
========================= */
@media screen and (max-width:992px){

   .home{
      background-position:center;
      background-attachment:scroll;
   }

   .home__container{
      padding:120px 30px 0;
   }

   .home__title{
      font-size:48px;
   }

   .home__subtitle{
      font-size:24px;
   }

   .home__description{
      max-width:600px;
      font-size:16px;
   }

   .home__buttons{
      flex-wrap:wrap;
   }

}

/* =========================
   MOBILE
========================= */
@media screen and (max-width:576px){

   .home{
      min-height:100vh;
      padding-top:100px;
      padding-bottom:50px;
      display:flex;
      align-items:center;
   }

   .home__container{
      padding:0 20px;
   }

   .home__data{
      text-align:center;
   }

   .home__title{
      font-size:36px;
      line-height:1.15;
      margin-bottom:10px;
   }

   .home__subtitle{
      font-size:20px;
      margin-bottom:15px;
   }

   .home__description{
      font-size:15px;
      line-height:1.8;
      max-width:100%;
      margin-left:auto;
      margin-right:auto;
   }

   .home__buttons{
      justify-content:center;
      flex-direction:column;
      gap:12px;
   }

   .button{
      width:100%;
      text-align:center;
      padding:14px 20px;
   }

   .home__features{
      align-items:center;
      font-size:14px;
   }

}

/* =========================
   VERY SMALL PHONE
========================= */
@media screen and (max-width:375px){

   .home__title{
      font-size:30px;
   }

   .home__subtitle{
      font-size:18px;
   }

   .home__description{
      font-size:14px;
   }

}