@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font-family: 'Poppins', sans-serif;
    font-size:18px;
  }

main {
    flex: 1 0 auto;
  }

#header{
	background:#A9AF7E;
}

footer{
  background: #000000;
}

.justy{
  text-align: justify;
}

/* Start: Google Maps Responsive */
.map-responsive {
  overflow:hidden;
  padding-bottom:400px; /*Reduce este valor si el mapa fuera muy alto, por ejemplo 250px, puedes usar porcentajes, 50%*/
  position:relative;
  height:0;
}
.map-responsive iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}
/* End: Google Maps Responsive */

.c-item {
  height: 480px;
}

.c-img {
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}


#nosotros{
  border-radius: 30px;
}

#nosotros img{
  border-radius: 25% 10%;
}

/* WORKS SECTION STYLES */

.sectionWorks{
  padding: 40px 0;
  width: 100%;
}

.containerWorks{
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: auto;
  padding-top: 55px;
}

.contWorks{
  flex-basis: 25%;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.contWorks img{
  width: 100%;
  border-radius: 10px;
  display: block;
  transition: transform 0.5s;
}

.contWorks:hover img{
  transform: scale(1.1);
}

.imgInfo{
  width: 100%;
  height: 0%;
  color: white;
  background: linear-gradient(rgba(0,0,0,0.8), rgb(16, 16, 16));
  border-radius: 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  transition: 0.7s;
}

.imgInfo h3{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.imgInfo a{
  margin-top: 20px;
  color: white;
  text-decoration: none;
  font-size: 40px;
  text-align: center;
  transition: .7s ease-in-out;
}

.imgInfo:hover a{
  color: #DC3535;
}

.contWorks:hover .imgInfo{
  height: 100%;
}

/* Works Section Media Queries */
@media screen and (max-width: 770px){
  #sectionWorks{
      padding-bottom: 0;
  }
  .sectionWorks h1{
      margin-bottom: 60px;
      font-size: 45px;
  }
  .containerWorks{
      padding-top: 0;
  }
  .contWorks{
      flex-basis: 100%;
      margin-bottom: 25px;
  }
  .imgInfo{
      font-size: 15px;
  }
}