@charset "UTF-8";
/**
 * Bootstrap 5.3 – Variabili SCSS di base
 * @see https://getbootstrap.com/docs/5.3/customize/sass/
 */
/* ----------------------------------------------------------
 * SPACING
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * COLOR SYSTEM
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * BODY
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * TYPOGRAPHY
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * LINK
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * BUTTONS
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * BORDER RADIUS
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * ACCORDION
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * TABS
 * ---------------------------------------------------------- */
.block__hero-columns .wrap-img {
  height: 100%;
  width: 100%;
  position: relative;
}
.block__hero-columns .wrap-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block__hero-columns .wrap-img .rectangle-orange,
.block__hero-columns .wrap-img .square-red {
  position: absolute;
  z-index: 1;
  will-change: transform;
}
.block__hero-columns .wrap-img .rectangle-orange {
  width: 325px;
  height: 100px;
  background-color: #f29d38;
  left: 0;
  bottom: 0;
}
.block__hero-columns .wrap-img .square-red {
  width: 100px;
  height: 100px;
  background-color: #fa5947;
  top: 0;
  right: 0;
}
.block__hero-columns h1,
.block__hero-columns h2,
.block__hero-columns .btn {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFade 0.6s ease forwards;
  animation-delay: 0.4s;
}
.block__hero-columns h1 {
  animation-delay: 0.1s;
}
.block__hero-columns h2 {
  animation-delay: 0.3s;
}
.block__hero-columns .btn {
  animation-delay: 0.5s;
}

@keyframes heroFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}