/*Version 1.0.0*/

/*Documentos contractuales CSS*/

.documentos-contractuales-section {

  margin-top: 20px;

}

.doc-contractuales-top-bg {

  /*background-image:linear-gradient(rgba(12, 94, 187, 0.5), rgba(5, 48, 168, 0.5)), url('../images/2023/documentos_contractuales/doc_fondo.webp'); /* Asegúrate de tener la ruta correcta a la imagen de fondo */

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center center;

  padding: 50px 0;
  /* Ajusta el padding para que se vea como en la imagen */

}



.doc-contractuales-info-container {

  position: relative;

  text-align: center;

  color: #007bff;

  font-size: 2rem;

  margin-bottom: 2rem;
  /* Espacio entre las tarjetas */

}

.doc-contractuales-info-container .doc-contractuales-img-fondo {

  max-width: 100%;

  height: auto;

}

.doc-contractuales-info-container p {

  position: absolute;

  top: 30%;
  /* Ajustar según el diseño */

  left: 50%;

  font-weight: bolder;

  transform: translateX(-50%);

  color: #80888C;
  /* Ajustar según el diseño */



}



.doc-contractuales-img-container {

  position: absolute;

  top: -10%;
  /* Ajustar según el diseño */

  left: 50%;

  transform: translateX(-50%);

  width: 30%;
  /* Ajustar según el diseño */

  height: auto;
  /* Ajustar según el diseño */

  padding: 5px;
  /* Ajusta este valor para el ancho del borde */

  display: flex;

  justify-content: center;

  align-items: center;



}

.doc-contractuales-img-superpuesto {

  width: 100%;

  height: auto;

  border-radius: 50%;

  border: 5px solid transparent;

  transition: transform 0.3s ease;
  /* Suaviza la transición de la escala */

}

.doc-contractuales-img-container:hover .doc-contractuales-img-superpuesto {

  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  /* Opcional: añade sombra */

  transform: scale(1.1);
  /* Opcional: efecto de zoom al hacer hover */

}



/*Start Media Query*/

/*Movil*/

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

  .doc-contractuales-top-bg {

    background-position: top center;
    ;
    /* Ajusta la imagen de fondo para que muestre la parte que deseas */

  }

}

/*Tablet*/

@media only screen and (min-width: 769px) and (max-width: 991px) {}

/*Laptop S*/

@media only screen and (min-width: 992px) and (max-width: 1023px) {}

/*Laptop XS O Tablet (caso especial)*/

@media only screen and (min-width: 930px) and (max-width: 991px) {}

/*Desktop*/

@media only screen and (min-width: 1024px) {}

/*Desktop HD*/

@media only screen and (min-width: 1440px) {}

/*Desktop 27*/

@media only screen and (min-width: 1840px) {}