/* CSS Document */

 
    .heroParceiros-section {
    padding-top: 10px;
    padding-bottom: 130px;
  }
  
/*---------------------------------------
  heroParceiros        
-----------------------------------------*/


.heroParceiros-section {

  position: relative;
  overflow: hidden;
  min-height: 220px;
  text-align: center;
}

.heroParceiros-section::after {
  border-radius: 20px;
  content: "";
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-55%, -50%) rotate(45deg);
  width: 250px;
  height: 250px;
  pointer-events: none;
}

.heroParceiros-section h1 {
  color: #ffffff;
}


.heroParceiros-section .custom-border-btn {
  border-color: transparent;
}

.heroParceiros-section .container {
  position: relative;
  z-index: 9;
}

.heroParceiros-slides {
  width: 100%;
    height: 25%;    /*---DEFINE A BORDA inferior TOTAL DO FUNDO-----*/
  position: absolute !important;
}


@media screen and (min-width: 991px) {
  .heroParceiros-section {
  /*---DEFINE A BORDA SUPÉRIOR TOTAL DO FUNDO-----*/
    height: 70vh;

  }
}

@media screen and (max-width: 991px) {
  .heroParceiros-section {
    padding-top: 48px;
    padding-bottom: 50px;
  }
}

@media screen and (max-width: 480px) {

  .heroParceiros-section::after {
    width: 10px;
    height: 90px;
  }
}



/*.heroParceiros-section: Define as regras de estilo para a seção chamada "heroParceiros-section". Isso inclui a definição de margens superiores e inferiores para a seção, o que afeta o espaçamento ao redor do conteúdo dentro dela.

.heroParceiros-section::after: Isso cria um pseudo-elemento ::after para a seção. O pseudo-elemento tem uma forma de um quadrado inclinado com bordas arredondadas. Ele é posicionado de forma absoluta em relação ao elemento pai (a seção "heroParceiros-section") e inclinado usando rotate(45deg).

@media screen and (min-width: 991px): Isso é uma regra de mídia que se aplica somente quando a largura da tela é maior ou igual a 991 pixels. Dentro dessa regra de mídia, a altura da seção "heroParceiros-section" é definida como 20% da altura da visualização (20vh). Isso ajusta a altura da seção com base na largura da tela.

Além disso, existem várias outras classes e estilos específicos para elementos dentro da seção "heroParceiros-section", como títulos, texto, botões e um slideshow (carousel) chamado "heroParceiros-slides". Esses estilos personalizados definem cores, margens, tamanhos e outras propriedades de estilo para esses elementos específicos.

No geral, este código CSS é responsável por estilizar uma seção de herói em um site, ajustando a altura da seção com base na largura da tela (responsiva) e aplicando estilos específicos aos elementos dentro da seção.*/