/* HERO */

.slide1 {
  background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
  url('assets/img/1.arco-cirugicoV2.png');
}

.slide2 {
  background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
  url('assets/img/2.imobilização-ortopedicaV2.png');
}

.slide3 {
  background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
  url('assets/img/3.radiologia-forenseV2.png');
}

.slide4 {
  background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
  url('assets/img/4.imagenologiaV2.png');
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 100vh; /* Garante uma altura mínima */
    display: flex;
    align-items: center;
    background: #000; /* Fundo reserva */
    color: var(--white);
}
.hero-content {
    padding: 120px 0;
}
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Velocidade da transição */
}
.slide.active {
    opacity: 1;
}
/* Garante que o texto fique acima das imagens */
.hero .container {
    position: relative;
    z-index: 2;
}

.hero h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 20px; max-width: 1000px; }
.hero .headline { color: var(--white); opacity: 0.9; font-size: 1.2rem; }
.hero .subheadline { color: var(--white); font-size: 1.4rem; }
.hero .subheadline { max-width: 600px; color: #ffffff; margin-bottom: 40px; } 

@media (max-width: 900px) and (min-width:700px ) {

  .hero {
    padding-top: clamp(90px, 20vh, 150px);
    padding-bottom: clamp(60px, 16vh, 120px);
  }

  .hero-content {
    max-width: 90%;
  }

  .hero h1 {
    max-width: 100%;
    font-size: 1.2rem;
  }
}
@media (max-width: 768px) {

  .slide1 {
    background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url('assets/img/mobile1.png');
  }

  .slide2 {
    background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url('assets/img/mobile2.png');
  }

  .slide3 {
    background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url('assets/img/mobile3.png');
  }

  .slide4 {
    background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url('assets/img/mobile4.png');
  }

}