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

/* 
    ============================================================
    Empieza Sección de  Estilos Que Se Aplican a toda la Página
    Y Sus Elementos
    ============================================================
*/

*{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth; 
   
}

/* 
    ============================================================
    Acaba Sección de  Estilos Que Se Aplican a toda la Página
    Y Sus Elementos
    ============================================================
*/

/* 
    ============================================================
    Empieza Clases Que Se Usaron Para Reducir Imagenes
    ============================================================
*/

.reduce{

    width: 65px;
    height: 65px;
}

.reduce2{

    width: 1200px;
    height: 600px;
}

/* 
    ============================================================
    Acaba Clases Que Se Usaron Para Reducir Imagenes
    ============================================================
*/


/* 
    ============================================================
    Empieza Contenedor Con Telefonos y Mail
    ============================================================
*/
.container-phone{

    width: 100%;
    height: auto;
    display: flex;
    background-color: #EEEEEE;
    padding: 30px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.link{

    text-decoration: none;
    color: #003263;
    text-align:  center;
    /*Cambiar en responsive un poco el padding*/
}

.icon{

    color: #D2AA66;
    font-size: 20px;
    margin-right: 5px;
}

/* .box-mail, .box-mail{

    padding: 10px;
} */



/* 
    ============================================================
    Acaba Contenedor Con Telefonos y Mail
    ============================================================
*/


/* 
    ============================================================
    Empieza Contenedor Con Logo y Menu
    ============================================================
*/

.container-nav{

    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /* padding: 15px 15px; */
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 30px ; 
    /* outline: 1px solid #003263; */
    border-bottom: 1px solid #003263;
    background-color: #FFFFFF;
}


.nav-ul{

    display: flex;
    list-style: none;
    cursor: pointer;
    margin-left: 10px;
}

.nav-ul li a{

    text-decoration: none;
    color: #003263;
    margin: 14px;
    font-size: 16px;
    

}

.nav-ul li a:hover{

    color: #D2AA66;
}

.hamburger{

    background-color: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: none;
}

/* 
    ============================================================
    Acaba Contenedor Con Logo y Menu
    ============================================================
*/


/* 
    ============================================================
    Empieza Contenedor Hero Y Sus Elementos
    ============================================================
*/





.container-hero{

    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
    padding: 40px 0px;
    
}

.hero{

    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
    padding: 40px 0px;  
}








/* 
    ============================================================
    Acaba Contenedor Hero Y Sus Elementos
    ============================================================
*/

/* 
    ============================================================
    Empieza Lista de Presentacion
    ============================================================
*/
.intro{

    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background-color: #C4C4C4;
}

.intro-text{

    color: #003263;
    text-align: center;
    width: 70%;
   
}

.intro-text ul {

    list-style: circle;
}

.intro-text ul li{

    margin: 5px;
    text-align:justify; /*Se le cambio de center a justify*/
}

/* 
    ============================================================
    Acaba Lista de Presentacion
    ============================================================
*/



/* 
    ============================================================
    Empieza Contenedores de Mision, Etiquetas y Cinturones.
    Los Boxes Están en otra Sección Abajo
    ============================================================
*/

/*Aqui abajo poner el nuevo container producto */

.container-mision, .container-etiquetas, .container-cinturon, .container-productos{ /*Usamos la misma clase para el contenedor de las etiquetas*/

    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: justify;  /*Se le cambio de center a justify*/
    padding: 30px;

    
}

/* 🚨 Se le dan éstilos a las columnas con iconos, titulos e información */

.container-mision p, .container-etiquetas p, .container-cinturon p, .container-productos p{

    color: #003263;
    text-align: justify;
    font-size: 16px;
    margin: 10px;
}

.container-mision ul li, .container-etiquetas ul li, .container-cinturon ul li, .container-productos ul li{

    margin: 10px;
    text-align: justify;
    font-size: 16px;
    color: #003263;
}

.container-mision h4, .container-etiquetas h4, .container-cinturon h4, .container-productos h4{

    color: #D2AA66;
    text-align: center;
    font-size: 20px;
    margin: 10px;
}

/* 🚨 Se le dan éstilos a las columnas con iconos, titulos e información */

/* 
    ============================================================
    Acaba Contenedores de Mision, Etiquetas y Cinturones.
    Los Boxes Están en otra Sección Abajo
    ============================================================
*/


/* 
    ============================================================
    Empieza Boxes de Mision, Etiquetas, Cinturones, Catálogo.
    Los Contenedores Están en otra Sección Arriba
    ============================================================
*/

.box-cinturon{

    width: 49%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* outline: 1px solid #003263; */
    text-align: start;
    font-size: 14px;
    padding: 30px;

}

.box-mision, .box-etiquetas, .box-productos{ /*Usamos la misma clase para el box de las etiquetas*/

    width: 32%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* outline: 1px solid #003263; */
    text-align: start;
    font-size: 14px;
    padding: 30px;
}

.box-mision > *, .box-etiquetas > *, .box-cinturon > *, .box-catalogo > *, .box-productos > *{ /*Catalogo se incluyo*/
    
        margin: 12px;
}



.box-catalogo{

    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    /* outline: 1px solid #003263; */
    text-align: start;
    font-size: 14px;
    padding: 30px;
    
}




.box-catalogo a{

    color: #003263;
    font-size: 20px;
    margin: 20px;
    text-align: center;
    padding: 30px;
    text-decoration: none; 
}

/* 
    ============================================================
    Acaba Boxes de Mision, Etiquetas, Cinturones, Catálogo.
    Los Contenedores Están en otra Sección Arriba
    ============================================================
*/

/*Productos*/

.titulo-producto{

    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    flex-direction: column;
    color: #003263; /*Le cambie el color a los titulos*/
    
    
}

.titulo-producto p{

    font-size: 16px;
    text-align: justify;
    margin-top: 30px;
    width: 80%;
    
   
}



.container-empaque, .container-cinturones { /*Usamos la misma clase para el contenedor de las etiquetas*/

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 30px;
    align-items: center;
}

 .box-empaque, .box-cinturones{ /*Usamos la misma clase para el box de las etiquetas*/

    width: 30%;  /*Se le cambio el width a 30% o 50% si se quiere 2 o 3 filas*/
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* outline: 0.1px solid #003263;  Hacer efecto grid en las imagenes de los productos */
    padding: 30px;  /*Se le cambio el padding a 30px*/
   
}

 .box-empaque img, .box-cinturones img{

    width: 100%;
    height : 50%;
    
}

.box-empaque img:hover, .box-cinturones img:hover{

    transform: scale(1.2);
    transition: 0.6s;
}

/*End Productos*/

/* 
    ============================================================
    Empieza Contenedor Logo de Clientes
    ============================================================
*/

.container-clientes{
    
        width: 100%;
        height: auto;
        display: flex;
        align-items: stretch;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        /* outline: 1px solid red;  */
         padding: 30px; 
        
}

.box-clientes{
    
        width: 20%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        /* outline: 1px solid #003263;    */
        /* padding: 30px;  */
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 10px;
}

.box-clientes img{

        width: 100px;
        height: auto;

}









/* 
    ============================================================
    Acaba Contenedor Logo de Clientes
    ============================================================
*/

/* 
    ============================================================
    Empieza Contenedores y Boxes de Contacto
    Incluye Mapa y Datos de Contacto
    ============================================================
*/

.container-contacto{

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* outline: 1px solid #D2AA66; */

}

.box-contacto{

    width: 49%;
    height: auto;
    padding: 30px;
    /* outline: 1px solid #003263; */
    color: #003263;

}

.box-contacto p{

    font-size: 16px;
    text-align: justify;
    margin: 20px; 
}

.box-contacto h3{

    font-size: 20px;
    text-align: justify;
    margin: 20px; 

}

/* 
    ============================================================
    Acaban Contenedores y Boxes de Contacto
    Incluye Mapa y Datos de Contacto
    ============================================================
*/


/* 
    ============================================================
    Empieza Contenedor Y Elementos de la Frase Vince Lombardi
    ============================================================
*/

.container-quote{

    width: 100%;
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #8896A0;
    margin-top: 30px; 
    padding: 60px;
}

.container-quote q, .container-quote p{

    color: #FFFFFF;
    font-size: 16px; /*Se le cambio el tamaño a 16px, previamente 20px*/
    text-align: center;
    margin: 10px;
    width: 70%;
    
}

/* 
    ============================================================
    Acaba Contenedor Y Elementos de la Frase Vince Lombardi
    ============================================================
*/


/* 
    ============================================================
    Empieza Footer Y Elementos del Footer
    ============================================================
*/

footer{

    width: 100%;
    height: auto;
    padding: 30px; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    background-color: #ffff;
    /* border-top: 2px solid #003263; */
    /* border-bottom: 2px solid #003263; */
}

/* 
    ============================================================
    Acaba Footer Y Elementos del Footer
    ============================================================
*/


/* 
    ============================================================
    Empieza Aviso Y Elementos del Aviso
    ============================================================
*/

 .container-aviso{

    width: 100%;
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    background-color: #EEEEEE;
    /* border-top: 1px solid #003263; */
     /* margin-top: 30px; */


 }

 .container-aviso p{

    font-size: 10px;
    text-align: center;
    /* margin: 10px; */
    width: 70%;
    color: #003263;
    margin: 20px;   
 }


/* 
    ============================================================
    Empieza Aviso Y Elementos del Aviso
    ============================================================
*/





/*
==================================================================================================================
   

    Empieza Media Query Que Vuelve La Página Responsive/Móvil CSS Responsive


*/


@media screen and (max-width: 980px){


    /* 
    ============================================================
    Empieza Clase Link Usada En Todos Los Elementos de Contacto
    ============================================================
    */      

    .link{

        text-decoration: none;
        color: #003263;
        text-align:  start;
        margin-top: 10px;
        /*Cambiar en responsive un poco el padding*/
    }


    /* 
    ============================================================
    Acaban Clase Link Usada En Todos Los Elementos de Contacto
    ============================================================
    */    

 /* 
    ============================================================
    Empiezan Clases Reduce Que Se Usaron Para Reducir Tamano de Imagenes
    ============================================================
*/   

    .reduce3{

        width: 80%;
        height: auto;
    }

    .reduce2{

        width: 100%;
        height: 100%;
    }


    /* 
    ============================================================
    Acaba Clases Reduce Que Se Usaron Para Reducir Tamano de Imagenes
    ============================================================
    */

    /* 
    ============================================================
    Empieza El Menú de Navegación y Elementos del Menú
    ============================================================
    */

    .container-nav{

        padding: 40px;
    }
   

   
    .nav{

        width: 50%;
        
    }

   .nav img {

    width: 200px;
    height: 50px; /*Se le cambio el height a 50px antes auto, Si se pone al 100% se rompe*/
    }

    .nav-ul{

        display: none;
        margin: 10px;
    }

    .nav-ul.show{

        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        margin: 10px;
        padding: 10px;
    }

    .nav-ul li {

        text-decoration: none;
        color: #fff;
        margin: 12px;
        font-size: 16px;
        text-align: center;
    }

    .show{

        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        margin: 12px;

    }

    .hamburger{

        display: block;
        color: #D2AA66;
        font-size: 22px;
    }

    /* 
    ============================================================
    Acaba El Menú de Navegación y Elementos del Menú
    ============================================================
    */


    /* 
    ============================================================
    Empieza Aviso Y Elementos del Aviso
    ============================================================
    */

    .container-mision, .container-etiquetas, .container-cinturon, .container-productos{ /*Usamos la misma clase para el contenedor de las etiquetas*/

        width: 100%;
        height: auto;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        padding: 30px;
        
        
    }

    .box-mision, .box-etiquetas, .box-cinturones, .box-productos { /*Usamos la misma clase para el mision de las etiquetas*/
            
            min-width: 100%; /*En responsive se cambia el width a 100%*/
           
    }

    .box-productos, .box-empaque, .box-cinturon{ /*Usamos la misma clase para el box de las etiquetas*/

        width: 100%; /*En responsive se cambia el width a 100%*/
    }



    /* 
    ============================================================
    Empieza Clase Titulo Prodcuto Usada En 🚨 Todos los Titulos de Secciones 🚨
    ============================================================
    */
    
    .titulo-producto p{

        
        width: 100%;
        text-align: justify;
    }

    .titulo-producto img{

        display: none;
    }

     /* 
    ============================================================
    Acaba Clase Titulo Prodcuto
    ============================================================
    */
      



    /* 
    ============================================================
    Empieza Contacto Y Elementos del Contacto (Big es para el tamaño del mapa)
    ============================================================
    */

    .container-contacto{

        display: flex;
        flex-wrap: wrap;
      
 

    }

    .box-contacto{

        width: 100%;
   
       
    }

    .big{

        width: 300px;
        height: 300px;
    }

      
    /* 
    ============================================================
    Acaba Contacto Y Elementos del Contacto (Big es para el tamaño del mapa)
    ============================================================
    */


    /* 
    ============================================================
    Empieza Catalogo Y Elementos del Catalogo
    ============================================================
    */


    .box-catalogo{

        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        /* outline: 1px solid #003263; */
        padding: 30px;
        
        
    }
    
    
    .box-catalogo a{
    
        color: #003263;
        font-size: 20px;
        text-align: center;
        padding:   30px;  /*Se le cambio el padding a 10px antes de 30px*/
    }

    /* 
    ============================================================
    Acaba Catalogo Y Elementos del Catalogo
    ============================================================
    */



    /* 
    ============================================================
    Empieza Logo Clientes
    ============================================================
    */


    .box-clientes{
    
    width: 40%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* outline: 1px solid #003263;    */
    /* padding: 30px;  */
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 10px;
    }

    .box-clientes img{

    width: 120px;
    height: auto;

    }

/* 
    ============================================================
    Acaba Logo Clientes
    ============================================================
 */


/* 
    ============================================================
    Empieza Frase Lombardi
    ============================================================
*/

    .container-quote{

        width: 100%;
        display: flex;
        height: auto;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #8896A0;
        padding: 60px;
    }
    
    .container-quote q, .container-quote p{
    
        color: #FFFFFF;
        font-size: 16px; /*Se cambio el font-size a 16px antes de 14px*/
        text-align:  justify; /*En responsive se cambió el text-align a justify*/
        margin: 10px;
        width: 100%;
        
    }
    /* 
    ============================================================
    Acaba La Frase Lombardi
    ============================================================
    */


     /* 
    ============================================================
    Empieza Footer (Se ajustó el tamaño de la imagen unicamente)
    ============================================================
    */

      footer img{

        width: 75px;
        height: 75px;
      }

      /* 
    ============================================================
    Acaba Footer
    ============================================================
    */


    /* 
    ============================================================
    Empieza Aviso Y Elementos del Aviso
    ============================================================
    */

    .container-aviso{

    width: 100%;
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    
    }

    .container-aviso p{

    color: #003263;
    font-size: 10px;
    text-align: justify;
    margin: 10px; 
    width: 100%;
    }


   /* 
    ============================================================
    Acaba Aviso Y Elementos del Aviso
    ============================================================
*/



/*
================================================================================================================

    Acaba Media Query Que Vuelve La Página Responsive/Móvil CSS Responsive


*/













    /*
    ===========================================================================================
                                       Textos en Responsive Align Start 🚨 OPCIONAL 🚨
    */


    /* 
    .intro-text ul li{

    margin: 5px;
    text-align:start; 
    } 

    .box-misio p, .box-etiquetas p, .box-cinturon p, .titulo-producto p, .container-mision p{

        text-align: start;
    }  

     .container-mision p, .container-etiquetas p, .container-cinturon p{

        color: #003263;
        text-align:  start;
        font-size: 16px;
        margin: 10px;
    }
    
    .container-mision ul li, .container-etiquetas ul li, .container-cinturon ul li{
    
        margin: 10px;
        text-align: start;
        font-size: 16px;
        color: #003263;
    } */


    
}