/* =========================================================
   index.css
   - HERO FINAL
   - 3 BOXES FINAL
========================================================= */

:root{
  --hero-text-max: 560px;
}

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

.hero{
  position:relative;
  height:700px;
  overflow:hidden;
  margin-top:80px;
}

.hero__slides{
  position:absolute;
  inset:0;
}

.hero__slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .55s ease;
}

.hero__slide.is-active{
  opacity:1;
  animation:heroKenBurns 3.2s ease-in-out both;
  will-change:transform;
}

@keyframes heroKenBurns{
  0%{
    transform:scale(1) translate3d(0,0,0);
  }
  100%{
    transform:scale(1.06) translate3d(-0.8%, -0.4%, 0);
  }
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(7,50,96,.08) 0%,
    rgba(7,50,96,.42) 48%,
    rgba(7,50,96,.86) 100%
  );
  z-index:1;
}

.hero__inner{
  position:relative;
  z-index:2;
  max-width:var(--container);
  margin:0 auto;
  height:100%;
  padding:0 28px;
  padding-left:120px;
  padding-top:180px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  color:#fff;
}

.hero__kicker{
  display:none;
}

.hero__title{
  margin:0;
  max-width:var(--hero-text-max);
  font-size:50px;
  font-weight:900;
  line-height:1.12;
  letter-spacing:-0.03em;
}

.hero__desc{
  display:none;
}

/* arrows */
.hero__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:24px;
  cursor:pointer;
  z-index:4;
  transition:background .2s ease;
}

.hero__prev{
  left:20px;
}

.hero__next{
  right:20px;
}

.hero__arrow:hover{
  background:rgba(0,0,0,.35);
}

/* dots */
.hero__dots{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  gap:10px;
}

.hero__dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.12);
  cursor:pointer;
  transition:all .2s ease;
}

.hero__dot.is-active{
  width:24px;
  background:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.9);
}



/* =========================
   3 BOXES
========================= */

.home-box{
  padding:60px 0;
}

.home-box .container{
  max-width:1800px;
}

.home-box__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
}

.home-box__item{
  position:relative;
  height:300px;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:28px;
  padding-bottom:50px;
  color:#fff;
  background-size:cover;
  background-position:center;
  text-decoration:none;
  isolation:isolate;
  transition:transform .25s ease, filter .25s ease;
}

.home-box__item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}



.home-box__item::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(12, 28, 48, .20);
  z-index:0;
}

.home-box__item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(7,23,42,.70),
    rgba(7,23,42,.22)
  );
  z-index:1;
}

.home-box__item span{
  position:relative;
  z-index:2;
  font-size:24px;
  font-weight:900;
  letter-spacing:-0.01em;
}

.home-box__item:hover{
  transform:translateY(-4px);
  filter:saturate(1.03);
}

.home-box__item:hover::before{
  background:rgba(12, 28, 48, .14);
}

.home-box__item{
  background-repeat:no-repeat;
}

.home-box__item{
  will-change:transform;
}

.home-box__item::before,
.home-box__item::after{
  pointer-events:none;
}

.home-box__item{
  background-size:cover;
}

.home-box__item:hover{
  background-size:108%;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:900px){
  .hero{
    height:620px;
  }

  .hero__inner{
    padding-left:28px;
  }

  .hero__title{
    font-size:40px;
    max-width:460px;
  }

  .home-box__grid{
    grid-template-columns:1fr;
  }

  .home-box__item{
    height:220px;
    background-size:cover !important;
  }
}

@media (max-width:640px){
  .hero{
    height:560px;
  }

  .hero__inner{
    padding:0 20px;
    padding-top:140px;
  }

  .hero__title{
    font-size:34px;
    line-height:1.15;
  }

  .hero__arrow{
    width:40px;
    height:40px;
    font-size:20px;
  }

  .home-box{
    padding:48px 0;
  }

  .home-box__item{
    height:190px;
  }

  .home-box__item span{
    font-size:18px;
  }
}