/*configurales globales en css*/
:root{
    /*colores*/
    --fondo:rgb(255, 255, 255);
    --colorFooter:#000;
    --colorHeader:rgb(49, 6, 6);

    /*Fuentes*/
    --textos:'Roboto', sans-serif;
    --titulos:'Lato', sans-serif;
    --colorTextos:#000;

}

/*body*/
body{
    font-family:var(--textos);
    /*background-color: var(--fondo)!important;*/
    color: var(--colorTextos);
    font-size: 1.2rem;
}

*{
    box-sizing: border-box;
}

h1{
    font-family:var(--titulos);
    color: var(--colorTextos);
    font-size:3.5rem;
    text-align: center;
    font-weight: bold;
    /*background-color: rgb(29, 133, 218);*/
}

h2{
    font-family:var(--titulos);
    color: var(--colorTextos);
    font-size: 2.5rem;
    text-align: center;
    font-weight: bold;
}


/*header*/
/*utilizar las clases en css, se representa por un punto(.)
, que van relacionadas con el html*/
.home-wrapper{
    background:linear-gradient(rgba(0, 0, 0, 0.603),rgba(0, 0, 0, 0.746)),url('../images/background.jpg') no-repeat center top;
    background-size: cover;
    color:var(--fondo);
}

/*selector de etiqueta header*/
header{
    width: 100%;
    background-color:var(--colorHeader);
    position:fixed;/*header esta en posición fija*/
    padding: 10px 0;
}

/*selector compuesto de etiquetas*/
header img{
    width: 200px;
}

header nav{
    float: right;
    margin-top: 8px;
}

header nav a{
    color: var(--fondo);
    text-decoration: none;
    font-weight: 700;
    margin-left: 10px;
    padding: 10px 15px;
}

header nav a.active{
    background-color: rgb(226, 192, 42);
    border-radius: 3px;
}

header nav a:hover{
    color: rgb(202, 223, 18);
}

header nav a.active:hover{
    color:#000;
}

.container{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/*sección home*/
/*los identificadores en css se representan por (#) 
y en html se representan por id
*/
#home{
    text-align: center;
    padding: 250px 0 150px;
}

/*combinación de identificador y selector de etiqueta h1*/
#home h1{
    color:white;
    margin-bottom: 45px;
    line-height: 1.2;
}

/*combinación de identificador y clase .divider*/
#home .divider{
    width:90px;
    border-top: 5px solid rgb(226, 192, 42);
    margin: 0 auto;
}

#home p{
    margin-top: 40px;
    color: white;
    padding-left: 185px;
}

/*iconos de las redes sociales*/
#home .social{
    margin-top: 50px;
}

/*aplicar estilos a los links de los iconos
combinando el identificador #home, la clase .social 
y el selector de etiqueta de enlace o link a

*/
#home .social a{
    color: var(--fondo);
    background-color: #000;
    display: inline-block;
    font-size: 25px;
    font-weight: bold;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    line-height: 50px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition:  all .3s;
    transition: all .3s;
}

#home .social a:hover{
    background-color: rgb(226, 192, 42);
}

/*sección de servicios*/
/*utilizar selector de etiqueta, para section*/
section{
    padding: 80px 0;
}

/*aplicar combinanción de selectores de etiquetas en este
caso seria section y h2
*/

section h2{
    text-align: center;
    margin-bottom: 65px;
    font-size: 3.0rem;
    font-weight: bold;
}

p{
    text-align: justify;/*justificar  textos*/
}

/*dividir los servicios en tres columnas*/
/*combinar el identificador servicios y la clase box*/
#novedades .box{
    display: inline-block;
    width: 33%;/*dividir el 100% * 3, el resultado es 33% */
    padding: 8px; 
       

}

#novedades .box img{
    padding-left: 30%;
    padding-bottom: 10px;
}

#novedades .box h3{
    text-align: center;
    color: aqua;
}

/*categoria*/
#categoria .box{
    display: inline-block;
    width: 33%;
    padding: 1%;
    text-align: center;
}

#categoria .box img{
    width: 100%;
}


/*footer*/
footer{
    width: 100%;
    background-color: var(--colorFooter);
    text-align: center;
    color: #fff;
    font-size: 16px;
    padding: 20px 0;
}

/*Contacto*/
#contacto{
    background-image: url('../images/map-image.png');
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    background-size: cover;
}

#contacto h2{
    color:#fff;
}

#contacto input,
textarea,select{
    width: 600px;
    padding: 20px 10px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1;
    background-color: rgb(248, 246, 246);
    font-weight: bold;
}