/* =========================
   SLIDER WRAPPER
========================= */

.kizito-slider{
  position:relative;
  width:100%;
  height:100vh;
  min-height:520px;
  overflow:hidden;
}

/* Fix mobile browser 100vh issue */
@supports (-webkit-touch-callout:none){
  .kizito-slider{
    height:-webkit-fill-available;
  }
}

/* =========================
   SLIDES
========================= */

.kizito-slide{
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1s ease, transform 6s ease;
}

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

.kizito-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.1);
}

.kizito-slide.active img{
  transform:scale(1);
}

/* =========================
   OVERLAY
========================= */

.kizito-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,.2));
}

/* =========================
   HERO TEXT
========================= */

.kizito-hero-text{
  position:absolute;
  top:50%;
  left:8%;
  transform:translateY(-50%);
  color:#fff;
  max-width:650px;
  z-index:5;
}

.kizito-hero-text .title{
  font-size:56px;
  line-height:1.1;
  margin-bottom:20px;
}

.kizito-hero-text p{
  font-size:20px;
  margin-bottom:25px;
}

/* =========================
   HERO BUTTONS
========================= */

.kizito-buttons{
  display:flex;
  gap:15px;
  margin-top:25px;
  flex-wrap:wrap;
}

.kizito-btn{
  padding:14px 28px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  color:#fff;
  font-size:16px;
  transition:.3s;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* Coverage */
.kizito-btn.coverage{
  background:#ff3f8e;
}

.kizito-btn.coverage:hover{
  background:#e22d79;
  transform:translateY(-3px);
}

/* Deals */
.kizito-btn.deals{
  background:#2d6cdf;
}

.kizito-btn.deals:hover{
  background:#1f56b9;
  transform:translateY(-3px);
}

/* Signup */
.kizito-btn.signup{
  background:#2fb64c;
}

.kizito-btn.signup:hover{
  background:#22933a;
  transform:translateY(-3px);
}

/* =========================
   NAVIGATION
========================= */

.kizito-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:26px;
  width:55px;
  height:55px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:10;
}

.kizito-nav:hover{
  background:#00a0df;
}

.kizito-nav.prev{ left:20px; }
.kizito-nav.next{ right:20px; }

/* =========================
   DOTS
========================= */

.kizito-dots{
  position:absolute;
  bottom:35px;
  width:100%;
  text-align:center;
  z-index:10;
}

.kizito-dot{
  width:13px;
  height:13px;
  margin:0 5px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  display:inline-block;
}

.kizito-dot.active{
  background:#00a0df;
  transform:scale(1.2);
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

.kizito-slider{
  height:85vh;
}

.kizito-hero-text{
  left:50%;
  top:55%;
  transform:translate(-50%,-50%);
  text-align:center;
  max-width:90%;
}

.kizito-hero-text .title{
  font-size:30px;
}

.kizito-buttons{
  justify-content:center;
}

.kizito-btn{
  width:100%;
  max-width:260px;
  text-align:center;
}

}