style.css

/*Mandamos a llamar las fuentes descargadas*/
@font-face {
    font-family: "CinzelDecorative-Regular";
    src: url(./assets/font/CinzelDecorative-Regular.ttf);  
}

/*Con Metodologia First Movile*/

/*Resetar los estilos del navegador*/
*
{
   box-sizing: border-box; 
}

html
{
    font-size: 62.5%;
}

body
{
    margin: 0;
    font-size: 1.6rem;
    font-family: "CinzelDecorative-Regular";
}

h1, h2, h3, h4, h5, h6
{
    font-family: "CinzelDecorative-Regular";
} 
img
{
    display: block;
    max-width: 100vw;
}

/*Interlineado*/
p
{
    line-height: 3rem;
}
/*Header*/

.container--flex
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-header
{
    padding: 0 1.5rem;
}

.main-title
{
    color: white;
    font-size: 3.5rem;
}

.color-span
{
    color: #eead33;
}

.icon-menu
{
    font-size: 2.4rem;
    color: #eead33;
    border: 0.1rem solid white;
    display: block;
    padding: 0.5rem 1.2rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.menu
{
   position: absolute;
   top: 11rem;
   left: 5%;
   background: #212121;
   width: 90%;
   list-style: none;
   padding: 2rem;
   margin: 0;
   z-index: 999;
   opacity: 0;
   visibility: hidden;
   transition: all 0.5s;
   border-radius: 0.5rem;
}
.menu__item
{
    padding: 1rem;
    text-align: center;
    width: 15rem;
    margin: auto;
}

.menu__link
{
    color: white;
    text-decoration: none;
    position: relative;
    display: block;
}

.menu__link span
{
    padding: 1rem;
    display: block;
}

.menu__link:before
{
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 0.2rem solid #eead33;
    border-top: 0.2rem solid #eead33;
    top: 0;
    right: 0;
    opacity: 0;
}

.menu__link:after
{
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-left: 0.2rem solid #eead33;
    border-bottom: 0.2rem solid #eead33;
    bottom: 0;
    left: 0;
    opacity: 0;
}

.menu__link span:before
{
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-left: 0.2rem solid #eead33;
    border-top: 0.2rem solid #eead33;
    top: 0;
    left: 0;
    opacity: 0;
}

.menu__link span:after
{
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 0.2rem solid #eead33;
    border-bottom: 0.2rem solid #eead33;
    bottom: 0;
    right: 0;
    opacity: 0;
}

/*Esta parte no esta funcionando*/

/* .menu__link--select:before, .menu__link--select:after, .menu__link--select span:before, .menu__link--select span:after
{
    opacity: 1;
} */

/*Estilos de hover*/


.menu__item:hover .menu__link:before
{
    opacity: 1;
} 

.menu__item:hover .menu__link:after
{
    opacity: 1;
} 

.menu__item:hover .menu__link span:before
{
    opacity: 1;
} 

.menu__item:hover .menu__link span:after
{
    opacity: 1;
} 

/*Iconos*/

.nav-social
{
    display: flex;
    justify-content: center;
}

.nav-social__item
{
    width: 3.5rem;
    height: 3.5rem;
    display: block;
    text-align: center;
    padding: 1rem;
    margin: 1rem;
    border-radius: 50%;
}

.nav-social__item:first-child
{
    background: #3b5998;
    color: white;
}

.nav-social__item:nth-child(2)
{
    background: #1da1f2;
    color: white;
}

.nav-social__item:nth-child(3)
{
    background: #ea4c89;
    color: white;
}

/*Revisar*/
/* .nav-social__item i
{
    color: white;
} */


/*Mostrar despues del evento click*/
.mostrar
{
 opacity: 1;
 visibility: visible;
}

/*banner*/
.banner
{
    background: url(./assets/img/banner.jpg);
    min-height: 40rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: -999;
}

.banner::before
{
    content: "";
    width: 100vw;
    min-height: 40rem;
    background: rgba(0, 0,0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
}

.banner__content
{
    width: 100vw;
    padding: 1.5rem;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: white;
    font-size: 2rem;
}

/*Main*/

.main
{
    margin-top: 27rem;
}

.welcome
{
    text-align: center;
    padding: 2rem;
}

.section__title
{
    font-size: 3.2rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

/*Ponemos la barrita con un pseudo elemeto (position relative y absolute)*/

.section__title:before
{
    content: "";
    width: 20rem;
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    height: 0.3rem;
    background: #eead33;
}

.section__txt
{
    color: #777;
    text-align: center;
    padding: 2rem;
}

.welcome__btn
{
    display: block;
    border: 0.2rem solid #eead33;
    width: 20rem;
    margin: auto;
    padding: 0.1rem;
    text-decoration: none;
    color: #eead33;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 3rem;
    /*Animacion*/
    transition: all 0.5s;
}

.welcome__btn:hover
{
    background: #eead33;
    color: white;
}

/*Design Container*/

.container__design
{
    margin: 2rem 0;
}

.design__item
{
    position: relative;
}

/*obscurecer la imagen*/
.design__item:before
{
    content: "";
    width: 100vw;
    height: 100%;
    background: rgba(0, 0,0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
}



.design__title
{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: white;
    font-size: 2.8rem;
    width: 100vw;
    text-align: center;
    text-transform: uppercase;
}

.design__title:before
{
    content: "";
    width: 20rem;
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    height: 0.3rem;
    background: #eead33;
}

.design__title:after
{
    content: "";
    width: 20rem;
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    height: 0.3rem;
    background: #eead33;
}

.container-testimonials
{
    margin: 6rem 0;
}

.testimonials__img
{
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    /*Para que no se distorcione*/
    object-fit: cover;
    margin: auto;
    border: 0.3rem #eead33 solid;

}

.testimonials__name
{
    text-align: center;
    font-size: 2rem;
    color: #eead33;
    font-weight: bold;
    /*Texto en mayuscula*/
    text-transform: uppercase;
}

/*Nuevos iconos*/
.services__container
{
    margin: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin: 3rem 0;

}

.services__content
{
    width: 70%;
    margin: 0 1rem;
}

.services__icon
{
    width: 8rem;
    height: 8rem;
    border: 0.2rem solid #777;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.2rem;
    color: #eead33;
}

.services__icon:hover
{
    color: black;
}

.services__title
{
    color: #eead33;
    font-size: 2rem;

}

.services__txt
{
    color: #777;
    font-size: 1.2rem;
}

/*newslettes*/

.form
{
  margin: 1rem;  
  display: flex;
  justify-content: center;

}

.form__email
{
    background: #ccc;
    padding: 1rem;
    font-family: "CinzelDecorative-Regular";
    border: none;
    margin-right: 0.5rem;
}

.form__submit
{
    background: #eead33;
    border: none;
    font-family: "CinzelDecorative-Regular";
    padding: 0 1rem;
}

/*Footer*/

.column--50-25
{
    width: 48%;
    padding: 1rem;
}

.main-footer
{
    background: #282828;
    color: white;
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

.footer__title
{
    color: #eead33;

    font-size: 2rem;
}

.footer__author
{
    text-align: right;
    color: #eead33;
    display: block;
}

.footer__txt
{
    font-size: 1.2rem; 

}

.footer__txt .fa-twitter
{
    color: #3bbef5;
    margin-right: 0.5rem;
}

.footer__link
{
    color: #eead33;
    font-size: 1.2rem;
}

.footer__date
{

    font-size: 1.2rem;
    border-bottom: 0.1rem solid white;
    padding: 1rem;
}



/*Social*/

.social-icon
{
    display: flex;
    align-items: center;
    margin-bottom: 2rem ;
}

.social-icon i
{
    margin-right: 1rem;
    width: 3.5rem;
    height: 3.5rem;
    text-align: center;
    color: white;
    padding: 1rem;
    border-radius: 50%;
}

.social-icon .fa-facebook
{
  background: #3b5998;  
}

.social-icon .fa-twitter
{
   background: #3bbef5; 
}

.social-icon .fa-dribbble
{
    background: #ea4c89; 
}

.social-icon .fa-pinterest
{
    background: #e23139;     
}

.social-icon .fa-github
{
    background: black;    
}

.social__link
{
    display: block;
    text-decoration: none;
    color: white;
    font-size: 1.2rem;
}

.social__link:hover
{
    color: #eead33;
}

.footer__txt .fas
{
    margin-right: 0.5rem;
}

.copy
{

    background: black;
    margin: auto;
    color: white;
    text-align: center;
    padding: 1rem;

}

.copy a
{
    color: #eead33;
    text-decoration: none;
}