*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

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

}

.container{

    width:90%;
    max-width:1100px;
    margin:auto;

}

header{

    background:#1d3557;
    color:white;
    padding:20px 0;

}

header .container{

    display:flex;
    justify-content:space-between;
    align-items:center;

}

nav a{

    color:white;
    text-decoration:none;
    margin-left:25px;

}

nav a:hover{

    color:#ffd166;

}

.hero{

    height:70vh;

    background:url("images/hero.jpg") center center/cover;

    display:flex;
    justify-content:center;
    align-items:center;

}

.overlay{

    background:rgba(0,0,0,.55);

    color:white;

    text-align:center;

    padding:50px;

    width:100%;

}

.hero h1{

    font-size:50px;
    margin-bottom:20px;

}

.hero p{

    font-size:22px;
    margin-bottom:30px;

}

.button{

    background:#ffd166;
    color:black;

    padding:15px 35px;

    text-decoration:none;

    border-radius:5px;

    font-weight:bold;

}

.button:hover{

    background:white;

}

section{

    padding:80px 0;

}

.gray{

    background:#f5f5f5;

}

h2{

    margin-bottom:25px;
    color:#1d3557;

}

.cards{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}

.card{

    flex:1;

    min-width:250px;

    background:white;

    padding:30px;

    border-radius:8px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

ul{

    margin-left:20px;

}

footer{

    background:#1d3557;

    color:white;

    text-align:center;

    padding:25px;

}

@media(max-width:768px){

header .container{

    flex-direction:column;

}

nav{

    margin-top:15px;

}

.hero h1{

    font-size:34px;

}

.cards{

    flex-direction:column;

}

}