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

body{

    font-family:Inter,Arial,sans-serif;

    color:#233248;

    background:#ffffff;

}

.topbar{

    position:absolute;

    width:100%;

    z-index:100;

}

.container{

    width:min(1400px,92%);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:35px 0;

}

.logo{

    width:370px;
    height:auto;

}

nav{

    display:flex;

    gap:40px;

    align-items:center;

}

nav a{

    text-decoration:none;

    color:#233248;

    font-size:17px;

    font-weight:500;

}

nav a:hover{

    color:#6ab8ff;

}

.lang{

    margin-left:30px;

    color:#7b8796;

    font-size:15px;

}

.hero{

    position:relative;

    height:100vh;

    background-image:url("/img/hero-bg.png");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(255,255,255,.95) 0%,

        rgba(255,255,255,.72) 45%,

        rgba(255,255,255,.25) 100%

    );

}

.hero-content{

    position:relative;

    z-index:10;

}

.hero h1{

    font-size:58px;

    font-weight:300;

    margin-bottom:25px;

    color:#24344b;

}

.hero p{

    font-size:24px;

    color:#6b7683;

}