* {
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
section[id] {
  scroll-margin-top:80px;
}
body{
  background-color: whitesmoke;
    max-width: 2000px;
    margin: auto;
}
::selection{
  background-color: #C10230;
  color: #f5f5F5;
}
img{
  display: block;
    width: 100%;
}
h1, h2, h3{
  font-weight: 700;
  line-height: 1;
  padding: 1em 0em;
}
h2, h3, h4, h5, p {
  color: #222222;
}
h1{
  font-size: 5vw;
  color: #C10230;
}
h2{
  font-size: 2vw;
}
/*Header*/
.header{
  background-color: whitesmoke;
  padding: .5em;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
}
.nav{
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  margin:auto;
    padding:0 2em;
  max-width: 2000px;
}
.logo-gobra{
  width: 190px;
}
.nav-menu{
  display: flex;
}
.nav-menu-item{
  font-size: 1.2em;
  margin-left: 1em;
}
.nav-menu-link{
  color: #222222;
  font-weight: 700;
  display: block;
  overflow: hidden;
  position: relative;
}
.nav-menu-link::before{
 content: '';
 width: 100%;
 position: absolute;
 border-bottom: .2em solid #C10230;
 bottom: 0;
 right: 300%;
 transition: .2s all ease-in-out;
}
.nav-menu-link:hover::before, .nav-menu-link-active::before{
  right: 0;
}
.nav-toggle{
  background: none;
  border: none;
  margin-right: 1em;
  font-size: 1.4em;
  cursor: pointer;
  display: none;
}
/*Seccion 1*/
#section-1{
  margin-top: 5em;
    background-color: #e9e9e9;
}
.intro h1{
  padding: 1em;
}
.intro img{
  width: 100%
}

/*Seccion 2*/

#section-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3em 5em;
}
.nosotros p{
  font-size: 1.2em;
}
.carousel{
  width: 70%;
  margin: auto 0 auto auto;
  overflow:hidden;
}
.carousel__contenedor{
  position: relative;
}
.carousel__anterior{
  left: 0%;
}
.carousel__siguiente{
  right: 0;
}
.carousel__anterior, .carousel__siguiente{
  position: absolute;
  display: block;
  width: 30px;
  height: 50px;
  border: none;
  top: calc(50% - 30px);
  background-color: #222222;
  color: whitesmoke;
  opacity: 50%;
  transition: .2s all ease-in-out;
  z-index: 1;
}
.carousel__anterior:hover, .carousel__siguiente:hover{
  opacity: 80%;
}
.carousel__lista{
  z-index: 0;
}
.glider-slide img{
  margin: 0 auto;
}
.glider-dot.active{
  background: #C10230;
}

/*Seccion 3*/

#section-3{
  padding: 3em 4em;
  text-align: center;
    background-color: #e9e9e9;
}
#section-3 h2{
    font-size: 2em;
    color: #C10230;
    margin: 0;
    padding-top: 0;
}
.servicios{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.servi__cards{
  padding: 1em;
  margin: 0 .5em;
}
.servi__title{
  font-weight: 700;
}
.servi__list{
  margin-top: .5em;
}

/*Seccion 4*/
#section-4{
    width: 100%;
    padding: 4em;
}
#section-4 h2{
    text-align: center;
    margin: auto;
    color: #C10230;
}
.gallery__cont{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}
.gallery__section img{
    margin: 10px auto;
}
/* Seccion 5 */
#section-5{
    background-color: #e9e9e9;
    padding: 3em 5em;
}
#section-5 h2{
    padding: 0;
    font-size: 3em;
}
#section-5 h3{
    font-size: 1.6em;
    padding: .5em 0;
}
.contacto{
    margin-top: 2em;
    display: grid;
    grid-template-columns: 1fr;
}
.contacto__oficina a, .contacto__personal a{
    color:#222222;
    text-transform: lowercase;
    display: flex;
    font-weight: 700;
    transition: .2s all;
}
.contacto__personal{
    margin-top: 1em;
}
.contacto__oficina a:hover, .contacto__personal a:hover{
    color: #C10230;
}
/*footer*/
#footer{
    background-color: #C10230;
    padding: 2em 5em;
    display: grid;
    grid-template-columns: 1fr;
}
.footer__logo{
    width: 300px;
}
.nav-footer{
    display: flex;
    float: right;
}
.nav-footer-item{
    margin-left: 1em;
}
.nav-footer-link{
    color: whitesmoke;
    font-weight: 500;
}
.low__izq p, .low__izq a{
    color: whitesmoke;
}
.low__izq a:hover{
    color: #222222;
}
/*Media*/
@media screen and (max-width:1024px){
    .contacto{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width:768px){
  /*header*/
  .nav{
    margin: auto;
  }
  .logo-gobra{
    width: 40%;
  }
  .nav-menu{
    width: 100%;
    height: calc(100% - 60px);
    left: 100%;
    top: 60px;
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    margin-right: 0;
    padding: 1em 0;
    position: fixed;
    transition: .2s all ease-in-out;
    z-index: 2;
    background-color: #2a2a2a;
  }
  .nav-menu-item{
    margin-right: 0;
    padding: 1em 0;
  }
  .nav-menu-link{
    color: whitesmoke;
  }
  .nav-toggle{
    display: block;
  }
  .nav-menu-visible{
    left: 0;
  }
  /*Seccion 1*/
  .intro h1{
    font-size: 2em;
  }
  /*Seccion 2*/
  #section-2{
    grid-template-columns: 1fr;
  }
  .nosotros h2{
    font-size: 2em;
  }
  .carousel{
    width: 100%;
    margin: auto;
  }
  /*Seccion 3*/
  .servicios{
    grid-template-columns: 1fr;
  }
  .servi__cards{
    margin: .5em auto;
  }
  /*Seccion 4*/
    #section-4 h2{
        font-size: 2em;
    }
    .gallery__cont{
        grid-template-columns: 1fr;
    }
    /*seccion 5*/
    .contacto{
        grid-template-columns: 1fr;
        font-size: 1.3em;
    }
    .contacto__personal{
        margin-top: 1em;
    }
    /*Footer*/
    #footer{
        grid-template-columns: 1fr;
        margin: auto;
        text-align: center;
    }
    .footer__izq{
        margin: auto;
        padding-bottom: 1em;
    }
    .nav-footer{
        display: flex;
        float:inherit;
        justify-content: center;
        padding-bottom: 1em;
    }
}
@media screen and (max-width:430px){
    #section-2, #section-3, #section-4, #section-5{
        padding: 1.3em;
    }
    .nosotros p{
        font-size: .9em;
        padding-bottom: 1.5em;
    }
    #section-5 h2{
        font-size: 2em;
    }
    #section-5 h3{
        font-size: 1.3em;
    }
    .contacto__oficina, .contacto__personal{
        font-size: .8em;
    }
    #footer{
        padding: 2em 0;
    }
    .footer__logo{
        width: 200px;
    }
}