:root{
--padding-container: 100px 0;
--color-tittle: #001A49;
}
body{
font-family: "Poppins", sans-serif;
}
.container{
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
padding: var(--padding-container);
}
.hero{
width: 100%;
height: 100vh;
min-height: 400px;
max-height: 650px;
position: relative;
display: grid;
grid-template-rows: 250px 1fr;
color: #fff;
}
.hero::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, #0000008c 0%, #0000008c 100%), url("../Images/taca1.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
clip-path: ellipse(66% 59% at 49% 37%);
z-index: -1;
}
/*Nav datos del titulo*/
.nav_title{
font-weight: 800;
color: #fff;
}
.nav_link{
margin-left: auto;
padding: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 3em;
height: 70%;
}
.nav_items{
list-style: none;
}
.nav_links{
color: #fff;
text-decoration: none;
}
.nav_menu{
margin-left: auto;
cursor: pointer;
display: none;
}
.nav_img{
display: block;
width: 50px;
}
.nav_close{
display: var(--show, none);
}
.hero_container{
max-width: 1000px;
--padding-container:0;
display: grid;
grid-auto-rows: max-content;
align-content: center;
gap: 3em;
padding-bottom: 50px;
text-align: center;
}
/*ESTILO DEL LOGO*/
.logo{
position: relative;
width: 100%;
height: auto;
top: 10px;
left: 10px;
width: 180px;
z-index: 10;
}
/* TAMAÑO DEL TITULO*/
.hero_title{
font-size: 4rem;
}
.hero_paragraph{
margin-bottom: 1px;
}
nav a:hover{
background-color: rgb(250, 248, 248);
}
.menu > li{
float: left;
width: 16;
text-align: center;
}
li ul{
display: none;
}
li:hover > ul{
display: block;
}
nav ul{
list-style: none;
}
header a:hover{
color: rgb(3, 15, 20);
}
/* FOOTER */
.footer{
background-color: #12496e;
}
.footer_title{
font-weight: 300;
font-size: 2rem;
margin-bottom: 30px;
}
.footer_title, .footer_newslatter{
color: #fff;
}
.footer_container{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #fff;
padding-bottom: 60px;
}
.nav--footer{
padding-bottom: 20px;
display: grid;
gap: 1em;
grid-auto-flow: row;
height: 100%;
}
.nav_link--footer{
display: flex;
margin: 0;
margin-right: 20px;
flex-wrap: wrap;
}
.footer_inputs{
margin-top: 10px;
display: flex;
overflow: hidden;
}
.footer_input{
background-color: #fff;
height: 50px;
display: block;
padding-left: 10px;
border-radius: 6px;
font-size: 1rem;
outline: none;
border: none;
margin-right: 16px;
}
.footer_submit{
margin-left: auto;
display: inline-block;
height: 50px;
padding: 0 20px;
background-color: #2091f9;
border: none;
font-size: 1rem;
color: #fff;
border-radius: 6px;
}
.footer_copy{
--padding-container: 30px 0;
text-align: center;
color: #fff;
}
.footer_copyright{
font-weight: 300;
}
.footer_icons{
display: inline-flex;
margin-bottom: 60px;
}
.footer_img1{
width: 25px;
padding: 10%;
}
.footer_img2{
width: 28px;
padding: 10%;
}
.footer_img3{
width: 29px;
padding: 10%;
}
/* MEDIA QUERIES */
@media (max-width:800px){
.nav_menu{
display: block;
}
.nav_link--menu{
position: fixed;
background-color: #000;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 100;
opacity: 0;
pointer-events: none;
transition: .7s opacity;
}
.nav_link--show{
--show: block;
opacity:1 ;
pointer-events: unset;
}
.nav_close{
position: absolute;
top: 30px;
right: 30px;
width: 30px;
cursor: pointer;
}
.caracteristicas_container{
color: #333;
background-color: #f0f0f0;
padding: 10px;
}
.caracteristicas_paragraph{
line-height: 1.7;
}
.caracteristicas_text{
text-align: justify;
}
.caracteristicas_text2{
text-align: justify;
}