@charset "utf-8";
/* CSS Document */

/* Estilos para evitar que la navbar tape la imagen */
  .banner-section {
    margin-top: 56px; /* Ajusta según la altura de tu navbar */
  }
  
  /* Para dispositivos más grandes donde la navbar podría ser más alta */
  @media (min-width: 992px) {
    .banner-section {
      margin-top: 70px; /* Ajusta según sea necesario */
    }
  }


h3, .h3 {
    font-size: 5.45rem;
	text-align: center;
	margin-top: 12%;
	color: #239CAB;
.public-sans-<uniquifier> 
  font-family: "Public Sans", sans-serif;
 
}

@media (min-width: 992px) {
  h4, .h4 {
    font-size: 1.2rem;
	 margin-top: 0.5%;
  margin-bottom: 0.3rem;
  margin-left: 10%;
  margin-right: 10%;
	  
  }
}
@media (min-width: 992px) {
p {
  margin-top: 0.5%;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  margin-left: 10%;
  margin-right: 10%;
  
}
}
/* haces al div relativo, para controlar las posiciones internas */
.rings {
  position: relative;
  margin-top: 20px;
  
}

/* la imagen debe centrarse automaticamente */
.rings img {
  display: block;
  margin: 0 auto;
}

/* el titulo lo ubicamos en centro, pero puede moverse */
.rings .titulo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: transparent;
}

/* cuando pones el mouse sobre el anchor, opacidad de la imagen */
.rings a:hover img {
  opacity: 0.7;
}

/* cuando pones el mouse sobre el anchor, propiedades del texto */
.rings a:hover .titulo {
  color: white;
}
.rings a {
  display:inline-block;
  position:relative;
}

.rings a span {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color:black;
  display:none;
}

.rings a:hover { 
    background:#000000; 
    border-radius:50%;
	transition:all .3s ease-in-out;
}

.rings a:hover span {
  display:block;
}

.rings a:hover img {
  opacity:0.7;
  filter: opacity(.5);

}