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

body{

font-family:'Plus Jakarta Sans',sans-serif;

background:#f5f7fb;

overflow-x:hidden;

}

/* NAVBAR */

.navbar{

height:80px;

background:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 50px;

position:fixed;

width:100%;

top:0;

left:0;

z-index:1000;

box-shadow:0 3px 10px rgba(0,0,0,.05);

}

.nav-left{

display:flex;

gap:35px;

}

.nav-left a{

text-decoration:none;

color:#111827;

font-weight:500;

transition:.3s;

}

.nav-left a:hover{

color:#2563eb;

}

.logo{

position:absolute;

left:50%;

transform:translateX(-50%);

font-weight:800;

font-size:20px;

}

.outline-btn{

text-decoration:none;

padding:14px 32px;

border-radius:35px;

border:2px solid #1f2937;

color:#1f2937;

font-weight:600;

transition:.3s;

}

.outline-btn:hover{

background:#1f2937;

color:white;

}

/* HERO */

.hero{

margin:100px 25px 25px;

height:88vh;

border-radius:20px;

background:

linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),

url("images/hero.jpg");

background-size:cover;

background-position:center;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

position:relative;

overflow:hidden;

}

.overlay{

position:absolute;

inset:0;

background:linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.22));

}

.tag{

position:absolute;

top:90px;

background:rgba(255,255,255,.88);

padding:10px 20px;

border-radius:6px;

backdrop-filter:blur(12px);

font-size:14px;

box-shadow:0 8px 25px rgba(0,0,0,.18);

z-index:2;

}

.hero h1{

position:relative;

z-index:2;

color:white;

font-size:88px;

font-weight:800;

line-height:.95;

letter-spacing:-3px;

text-align:center;

margin-top:50px;

}

.hero-btn{

margin-top:45px;

position:relative;

z-index:2;

width:320px;

padding:18px;

text-align:center;

text-decoration:none;

background:#23395d;

color:white;

font-weight:700;

font-size:22px;

border-radius:45px;

transition:.3s;

box-shadow:0 10px 30px rgba(0,0,0,.3);

}

.hero-btn:hover{

transform:translateY(-4px);

background:#162742;

}

@media(max-width:1000px){

.logo{

position:static;

transform:none;

}

.navbar{

flex-direction:column;

height:auto;

padding:20px;

gap:15px;

}

.hero{

margin-top:150px;

}

.hero h1{

font-size:60px;

}

}

@media(max-width:650px){

.hero h1{

font-size:42px;

letter-spacing:-1px;

}

.hero-btn{

width:240px;

font-size:18px;

}

.nav-left{

gap:18px;

flex-wrap:wrap;

justify-content:center;

}

}