* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  body {
    background-image: url("../assets/img/bahiablanca.jpg");
    background-image: linear-gradient(to bottom);
    background-size: cover;
  }

  body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Color de fondo negro con opacidad del 50% */
    z-index: -1; /* Asegura que el pseudo-elemento esté detrás del contenido */
  }
  
  .serv-publico {
    margin: 70%
  }

  .imagen {
    height: 230px;
    width: 230px;
  }
  /* Colores de fondo */

  .bombero {
    background-color: red;
    background-size: 190px;
    border-radius: 50%
  }

  .policia {
    background-color: rgb(38, 0, 255);
    background-size: 190px;
    border-radius: 50%
  }

  .defensacivil {
    background-color: rgb(255, 102, 0);
    background-size: 190px;
    border-radius: 50%
  }

  .medico {
    background-color: rgb(0, 255, 34);
    background-size: 190px;
    border-radius: 50%

    /* ----------------------- */
  }
  .btn-abrir-popup {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .375rem .75rem;
    border: 1px solid #007bff;
    border-radius: .25rem;
    color: #007bff;
    transition: color .15s ease-in-out,
    background-color .15s ease-in-out;
  }

  .btn-abrir-popup:hover, .btn-abrir-popup:active, .btn-abrir-popup:focus {
    color: #fff;
    background-color: #007bff;
  }

  .serv-publico button {
    margin: auto;
    margin-top: 10px;
  }

  p {
    font-family: serif;
    color: grey;
  }

  .numeros {
    margin-top: 20px;
  }

  .numeros ul li {
    margin-top: 15px;
  }

  /* PopUp*/

  .overlay {
    background: rgba(0,0,0,.3);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    visibility: hidden;
  }
  
  .overlay.active {
    visibility: visible;
  }
  
  .popup {
    background: #F8F8F8;
    box-shadow: 0px 0px 5px 0px rgba(248, 74, 74, 0.3);
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    padding: 20px;
    text-align: center;
    width: 600px;
    margin-top: 200px;
    margin-bottom: 200px;
    
    transition: .3s ease all;
    transform: scale(0.7);
    opacity: 0;
  }
  
  .popup .btn-cerrar-popup {
    font-size: 16px;
    line-height: 16px;
    display: block;
    text-align: right;
    transition: .3s ease all;
    color: #BBBBBB;
  }
  
  .popup .btn-cerrar-popup:hover {
    color: #000;
  }
  
  .popup h3 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 10px;
    opacity: 0;
  }
  
  .popup h4 {
    font-size: 26px;
    font-weight: 300;
    margin-bottom: 40px;
    opacity: 0;
  }
  
  .popup form .contenedor-inputs {
    opacity: 0;
  }
  
  .popup form .contenedor-inputs input {
    width: 100%;
    margin-bottom: 20px;
    height: 52px;
    font-size: 18px;
    line-height: 52px;
    text-align: center;
    border: 1px solid #BBBBBB;
  }
  
  .popup form .btn-submit {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff;
    background: #5E7DE3;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: .3s ease all;
  }
  
  .popup form .btn-submit:hover {
    background: rgba(94,125,227, .9);
  }

  .socials img {
    height: 30px;
    width: 30px;
    background-color: rgba(184, 184, 184, 0.5);
    border-radius: 18px;
  }
  
  /* ------------------------- */
  /* ANIMACIONES */
  /* ------------------------- */
  .popup.active {	transform: scale(1); opacity: 1; }
  .popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
  .popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
  .popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
  
  @keyframes entradaTitulo {
    from {
      opacity: 0;
      transform: translateY(-25px);
    }
  
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes entradaSubtitulo {
    from {
      opacity: 0;
      transform: translateY(25px);
    }
  
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes entradaInputs {
    from { opacity: 0; }
    to { opacity: 1; }
  }


  /*Media Queries*/

  @media (min-width: 480px) {

    .min-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      list-style-type: none;
    }
  
    li {
      list-style-type: none;
    }

    .socials {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      margin: 10px;
    }

    .socials {
      position: absolute;
      bottom: 0;
      right: 0;
      margin: 10px;
    }
  }

  @media (max-width: 480px) {

    .imagen {
      height: 170px;
      width: 170px;
    }

    .serv-publico {
      margin: 20%;
    }

    li{
      list-style-type: none;
    }

    ul {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
    }
    
    li {
      grid-column: span 1;
    }
    
    ul {
      align-items: center;
      justify-content: center;
    }

    img {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 17%;
    }

    .popup {
      background: #F8F8F8;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
      border-radius: 3px;
      font-family: 'Montserrat', sans-serif;
      padding: 20px;
      text-align: center;
      width: 400px;
      
      transition: .3s ease all;
      transform: scale(0.7);
      opacity: 0;
    }

    .socials {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      margin: 10px;
    }

    




  }