*{
box-sizing:border-box;
}


body{

margin:0;

font-family:

-apple-system,
BlinkMacSystemFont,
"PingFang SC",
"Microsoft YaHei",
sans-serif;


background:#f5f5f7;

color:#1d1d1f;

}




.nav{

display:flex;

justify-content:space-between;

padding:20px 10%;

background:white;

}




.nav a{

margin-left:20px;

text-decoration:none;

color:#1d1d1f;

}





.hero{

text-align:center;

padding:110px 10% 70px;

}



.hero h1{

font-size:56px;

}



.hero p{

font-size:20px;

color:#6e6e73;

}





.section{

padding:70px 10%;

text-align:center;

}





.cards{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}





.card{

background:white;

width:260px;

padding:35px;

border-radius:25px;

}





.card h3{

font-size:24px;

}



.card p{

color:#6e6e73;

line-height:1.8;

}