body{
    background-color:#60676e;

}
.card{
    border-color: black;
    

}
.carousel-inner{
    max-height: 50rem;
}



 /* ---------------------------------F O O T E R-------------------------- */

 .pie-pagina{
  width: 100%;
  background-color: #0a141d;
}
.pie-pagina .grupo-1{
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:50px;
  padding: 45px 0px;
}
.pie-pagina .grupo-1 .box figure{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pie-pagina .grupo-1 .box figure img{
  width: 250px;
}
.pie-pagina .grupo-1 .box h2{
  color: #fff;
  margin-bottom: 25px;
  font-size: 20px;
}
.pie-pagina .grupo-1 .box p{
  color: #efefef;
  margin-bottom: 10px;
}
.pie-pagina .grupo-1 .red-social a{
  display: inline-block;
  text-decoration: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  color: #fff;
  margin-right: 10px;
  background-color: #0d2033;
  text-align: center;
  transition: all 300ms ease;
}
.pie-pagina .grupo-1 .red-social a:hover{
  color: aqua;
}
.pie-pagina .grupo-2{
  background-color: #0a1a2a;
  padding: 15px 10px;
  text-align: center;
  color: #fff;
}
.pie-pagina .grupo-2 small{
  font-size: 15px;
}
@media screen and (max-width:800px){
  .pie-pagina .grupo-1{
      width: 90%;
      grid-template-columns: repeat(1, 1fr);
      grid-gap:30px;
      padding: 35px 0px;
  }
}

.h5{
  background-color: red;
}
 

/* ---------------------------boton whatzap--------------------------- */

.container-boton{
    background-color: #2e6329;
    border: 1px solid #fff;
    position: fixed;
    z-index: 999;
    border-radius: 50%;
    bottom: 20px;
    right: 25px;
    padding: 25px;
    transition: ease 0.3s;
    animation: efecto 1.2s infinite;
  }
  
  .container-boton:hover{
    transform: scale(1.1);
    transition: 0.3s;
  }
  
  .boton{
    width: 50px;
    transition: ease 1s;
  }
  
  @keyframes efecto{
    0%{
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.85);
    }
    100%{
        box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
    }
  }
  
  /* Configuramos estilos CSS para nuestro Whatssap   */
  
  a{
    text-decoration: none;
  }
  
  #whatsapp {
      position: fixed;
      bottom: 20px;
      right:20px;
  }
  
  svg {  /*Definimos el estilo del boton de whatsapp  */
      width: 80px;
      display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
  }
  
  circle {
    fill: #25d366;
  }
  
  path {
      fill:  #fff;
  }
  
  #whatsapp a {padding: 20px 0;}
  
  #whatsapp a::before {
    /*content: es lo que mostramos al colocar el mouse sobre el icono   */
      content: 'Hola !, Te puedo atenter por whatsapp';
      display: inline-block;
      vertical-align: middle;
      padding: 5px 10px;
      margin-right: 10px;
      color: rgba(0, 0, 0, .8);
      background: white;
      border: 1px solid #ccc;
      border-radius: 20px;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
      transition: .3s ease;
      opacity: 0;
  }
  #whatsapp:hover a::before {opacity: 1;}