.image-row .col-md-3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-row .circle2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-row img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  #degra {
    margin-right: 5%;
  } 

  .sections {
    font-size: 65%;
  }

  .image-row {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}


  .image-row {

    margin-top: 15%;
    grid-template-columns: repeat(4, 1fr);
  }



  .image-row img {
margin-bottom: -30px;
      margin-top: 25%;
    width: 80%; /* Ajusta el tamaño de las imágenes en pantallas pequeñas */
  }
}

@media (max-width: 480px) {
  .image-row {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, auto);
  }

  .image-row img {
    width: 70%; /* Ajusta aún más el tamaño de las imágenes en pantallas muy pequeñas */
  }
}

.background-div {
    position: relative;
    background-size: cover;
    background-position: center;
    border: 1px solid white;
    cursor: pointer; /* Cambia el cursor a una mano (indica que es clickeable) */
}

.background-div h3 {
  position: absolute;
  bottom: 28%; /* Ajustar según sea necesario */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: white;
  text-align: center;
  border-radius: 30px; /* Ajustar según sea necesario */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.background-div img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  object-fit: cover;
   /* Ajustar según sea necesario */
}
.circle {
    top: 20%;
    width: 70px;
    height: 70px; /* Hacer el contenedor un círculo perfecto */
    overflow: hidden;
    margin: 0 auto;
    position: relative;
   
}

.circle img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen se escale correctamente dentro del contenedor */
}



/* Estilos específicos para dispositivos con pantalla pequeña */
@media screen and (max-width: 767px) {
  .background-div {
    height: 190px; /* Ajustar según sea necesario */
    border-left: 1px solid white;
  }


 .wrapper .progress-bar-container {
display: none;
}

.card-content{

  width: 50px;
  height: 50px;
}

  .background-div h3 {
    font-size: 70%;
    bottom: 55px; /* Ajustar según sea necesario */
  }

  .circle {
    width: 30px;
    height: 30px;
  }
}

/* Estilos específicos para dispositivos con pantalla grande */
@media screen and (min-width: 768px) {
  .background-div {
    height: 400px; /* Ajustar según sea necesario */
  }

  .background-div h3 {
    bottom: 18%; /* Ajustar según sea necesario */
    width: 200px; /* Ajustar según sea necesario */
  }

  .image-row img {
    width: 100%; /* Asegura que las imágenes se muestren grandes en pantallas grandes */
  }
}

/** Thank You Rafael, por la ayuda, el consejo y limpieza del codigo**/

.newshome{
    max-width:630px;
    margin:0 auto;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    alignt-items:center;
    justify-content:space-between;
}
 
.newshome>div {width: 49%;}
.newshome>div:first-child {width: 100%;}
.newshome>div>a>img {
  width: 100%;
  border-top: 5px solid #F2A814;
  float:left;}
.newshome>div>a>p {
  padding:2px;
  color:#FFFFFF;
  font-size:12px;
  font-family:Verdana;
  background-color:#0B2161;}