*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: "Inter", sans-serif;
}

img, .container, .w-full {
  max-width: 100%;
}

.triangle-left {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.diagonal-line {
  clip-path: polygon(45% 48%, 43% 45%, 100% 93%, 100% 94%);
}

.first-of-type {
  animation: showup 2s ease-in-out 1;
  /* animation-timeline: view();
    animation-range: cover 0% cover 100%; */
}

.topics {
  animation: revealCurtin 2s ease-out forwards;
  animation-timeline: view();
  animation-range: cover 0% cover 50%;
}

.video-intro {
  width: 90%;      /* largura padrão para desktop */
  max-width: 100%;   /* nunca ultrapassa o container */
  display: block;
  margin: 0 auto;    /* centraliza */
}

@media (max-width: 768px) {
  .video-intro {
    width: 100vw;     /* largura para mobile */
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .space-x-8 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 2rem !important;
  }
  .text-readable {
    font-size: 1.2rem !important;
  }
  .h-20 {
    height: 72px !important;
  }
}
/* Background images - CSS customizado */
.bg-hero1 {
  background-image: url('./images/hero1.jpeg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.bg-section3 {
  background-image: url('./images/hero2.jpeg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

@media (min-width: 768px) {
  .hero-section {
    background-image: url('./images/hero2.jpeg');
  }
}

/* Responsive background */
@media (min-width: 768px) {
  .md\:bg-section3 {
    background-image: url('./images/hero2.jpeg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}


@keyframes showup {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes revealCurtin {
  0% {
    opacity: 0;
    /* clip-path: inset(0 100% 0 0); */
    /* transform: translateX(-20px); */
  }

  100% {
    opacity: 1;
    /* clip-path: inset(0 0 0 0); */
    /* transform: translateX(0); */
  }
}

/* Estilos para vídeos clicáveis */
video {
  cursor: pointer !important;
}

video:hover {
  opacity: 0.9;
}

.play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: opacity 0.2s;
}
.play-btn[hidden] {
  display: none !important;
}
.video-wrapper video {
  z-index: 1;
}