body{ background: red !important; }
html, body { scroll-behavior: smooth; }
html, body { background: transparent !important; }

.card, .card-body {
  background: transparent !important;
}

html, body{
  height: 100%;
}
.z-top{ z-index: 10; } 
.hero-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.hero-bg{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}


.float-img{
  position: absolute;
  z-index: 1;
  width: clamp(160px, 28vw, 340px);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.float-img img{
  width: 100%;
  height: auto;
  display: block;
}

@media (hover:hover){
  .float-img{ transition: transform 260ms ease; }
  .float-img img{ transition: transform 260ms ease, filter 260ms ease; }
  .float-img:hover{ transform: translateY(-14px) rotate(-0.8deg); }
  .float-img:hover img{ transform: scale(1.04); filter: contrast(1.03); }
}

.fi-1{ top: 14%; left: 8%; }
.fi-2{ top: 3%; right: 5%; }
.fi-3{ top: 56%; left: -4%; }
.fi-4{ top: 70%; right: -5%; }

@media (min-width: 576px){
  .float-img{ width: clamp(240px, 18vw, 420px); }
  .fi-1{ top: 16%; left: 10%; }
  .fi-2{ top: 10%; right: 10%; }
  .fi-3{ top: 52%; left: 6%; }
  .fi-4{ top: 66%; right: 6%; }
}

@media (min-width: 768px){
  .float-img{ width: clamp(240px, 18vw, 420px); }
  .fi-1{ top: 16%; left: 10%; }
  .fi-2{ top: 10%; right: 13%; }
  .fi-3{ top: 55%; left: 15%; }
  .fi-4{ top: 65%; right: 6%; }
}

@media (min-width: 992px){
  .float-img{ width: clamp(240px, 15vw, 420px); }
  .fi-1{ top: 10%; left: 18%; }
  .fi-2{ top: 10%; right: 18%; }
  .fi-3{ top: 58%; left: 15%; }
  .fi-4{ top: 55%; right: 2%; }
}

@media (min-width: 1200px){
  .float-img{ width: clamp(240px, 15vw, 420px); }
  .fi-1{ top: 5%; left: 18%; }
  .fi-2{ top: 10%; right: 30%; }
  .fi-3{ top: 58%; left: 15%; }
  .fi-4{ top: 45%; right: 10%; }
}

.nav-static {
  pointer-events: none;
  cursor: default;
  text-decoration: none !important;
}

.nav-active {
  cursor: pointer;
  text-decoration: underline;
  transition: 0.2s;
}