.custom-cursor {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(241,60,0,0.9);
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease;
  z-index: 1000;
}

.custom-cursor::before {
  content: '';
  position: absolute;
  width: 100px;
  background: transparent;
  cursor: default;
}

.display-1 {
  font-size: 3rem;
}

/* 1. SEÇÕES DE CONTEÚDO (APENAS PARA DAR ESPAÇO) */

.content-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.content-section.bg-light {
  position: relative;
  z-index: 10;
}

/* 2. O "GATILHO" (TRIGGER)
           Define a altura total da animação.
           Quanto mais alto (ex: 300vh), mais devagar será o zoom. */

.video-scale-trigger {
  position: relative;
  height: 200vh;
  z-index: 1;
}

/* 3. O WRAPPER STICKY
           Este elemento "gruda" no topo da tela (top: 0)
           enquanto o usuário rola dentro do .video-scale-trigger. */

.video-sticky-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* 4. O SCALER (O ELEMENTO QUE VAMOS ANIMAR)
           É o "alvo" da animação GSAP.
           Ele começa com escala 0.9 (90%). */

.video-scaler {
  width: 100%;
  height: 100%;
  transform: scale(0.9);
  will-change: transform;
}

/* 5. O IFRAME DO VÍDEO
           Usamos a mesma lógica de "cover" de antes
           para preencher o .video-scaler. */

.video-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: calc(100vw * 9 / 16);
  min-height: 100vh;
  min-width: calc(100vh * 16 / 9);
  pointer-events: none;
}

#carousel-1 p.fs-2 {
  font-size: small;
}

.btn {
  color: #FFFFFF;
  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
  --bs-border-opacity: 0.1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
  --bs-bg-opacity: 0.1;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 100px;
}

.btn:hover {
  color: #e0e0e0;
  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
  --bs-border-opacity: 0.1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
  --bs-bg-opacity: 0.1;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 100px;
}