*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



body{

    font-family:Arial, Helvetica, sans-serif;
    color:#333;

}




header{

    background:#111827;
    padding:20px;

}



nav{

    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1100px;
    margin:auto;

}



.logo{

    color:white;
    font-size:35px;

}



ul{

    display:flex;
    list-style:none;
    gap:30px;

}



li{

    color:white;
    cursor:pointer;

}





.hero{


height:90vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;


background:

linear-gradient(

135deg,

#2563eb,

#1e40af

);


color:white;


}




.contenido{


max-width:700px;


}



.contenido h1{


font-size:50px;

margin-bottom:20px;


}



.contenido p{


font-size:20px;

line-height:1.6;

margin-bottom:30px;


}




button{


padding:15px 35px;

border:none;

border-radius:30px;

background:white;

color:#2563eb;

font-size:18px;

cursor:pointer;


}





.servicios{


padding:70px 10%;

text-align:center;


}



.servicios h2{


font-size:35px;

margin-bottom:40px;


}




.cards{


display:flex;

gap:30px;

justify-content:center;


}



.card{


padding:30px;

width:300px;

box-shadow:0 10px 30px #ddd;

border-radius:15px;


}



.card h3{


margin-bottom:15px;


}





.nosotros{


background:#f3f4f6;

padding:70px;

text-align:center;


}



.nosotros h2{

font-size:35px;

margin-bottom:20px;


}





footer{


background:#111827;

color:white;

padding:20px;

text-align:center;


}




@media(max-width:768px){


.cards{

flex-direction:column;

align-items:center;

}



ul{

display:none;

}



.contenido h1{

font-size:35px;

}


}