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

.hero{
  /* margin-top: 40px; */
  width:100%;
  height:80vh;
   /* min-height:500px; */
  position:relative;
  overflow:hidden;
}

.slider{
  width:100%;
  height:100%;
  position:relative;
}

.slide{
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  transition:0.8s ease-in-out;
}

.slide.active{
  opacity:1;
  z-index:1;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(60%);
}


.content{
  position:absolute;
  top:50%;
  left:10%;
  transform:translateY(-50%);
  color:#fff;
  max-width:500px;
  z-index:10;
}

.content h1{
  font-size:60px;
  font-weight: bold;
  margin-bottom:15px;
}
content p,
.content .btn{
  opacity:0;
  transform:translateY(40px);
  
}

.slide.active .content h1{
  animation:fadeUp 0.8s ease forwards;
}

.slide.active .content p{
  animation:fadeUp 0.8s ease forwards;
  animation-delay:0.3s;
}

.slide.active .content .btn{
  animation:fadeUp 0.8s ease forwards;
  animation-delay:0.6s;
}

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



/* .content{
  position:absolute;
  top:50%;
  left:10%;
  transform:translateY(-50%);
  color:#fff;
  max-width:500px;
}

.content h1{
  font-size:3rem;
  margin-bottom:15px;
}

.content p{
  font-size:1.1rem;
  margin-bottom:20px;
} */

.btn{
  display:inline-block;
  padding:12px 25px;
  background:#00b894;
  color:#fff;
  text-decoration:none;
  border-radius:30px;
  transition:0.3s;
}

.btn:hover{
  background:#019874;
}

/* DOTS */
.dots{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ccc;
  cursor:pointer;
  transition:0.3s;
}

.dot.active{
  background:#00b894;
  transform:scale(1.2);
}

/* ARROWS */
.arrows{
  position:absolute;
  top:50%;
  width:100%;
  display:flex;
  justify-content:space-between;
  transform:translateY(-50%);
  padding:0 20px;
  z-index:10;
}

.arrow{
  width:45px;
  height:45px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  color:#fff;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  cursor:pointer;
  transition:0.3s;
}

.arrow:hover{
  background:#00b894;
}

/* mobile size */
@media(max-width:768px){
  .arrow{
    width:35px;
    height:35px;
    font-size:18px;
     display: none;
  }
}


/* RESPONSIVE */
@media(max-width:768px){
  .content{
    left:5%;
    max-width:90%;
  }

  .content h1{
    font-size:2rem;
  }

  .content p{
    font-size:0.9rem;
  }
}