*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: "Segoe UI", sans-serif;
}

body{
background:#f3f6fb;
}


/* NAVBAR */

.navbar{

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

padding:20px 80px;

background:white;

}

.logo{

font-size:20px;
font-weight:bold;
color:#1e3a8a;

}

.navbar nav a{

margin-right:30px;
text-decoration:none;
color:#4b5563;
font-weight:500;

}

.navbar button{

padding:8px 18px;
background:#2563eb;
color:white;
border:none;
border-radius:20px;
cursor:pointer;

}


/* HERO */

.hero{

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

padding:80px;

background:linear-gradient(135deg,#dbeafe,#bfdbfe);

border-radius:20px;

margin:40px;

}


.hero-left{

max-width:500px;

}


.hero-left h1{

font-size:42px;
color:#1e3a8a;
margin-bottom:20px;

}


.hero-left p{

color:#4b5563;
margin-bottom:25px;

}


.start-btn{

padding:12px 30px;

background:#3b82f6;

color:white;

border:none;

border-radius:25px;

font-size:16px;

cursor:pointer;

}


/* HERO IMAGE */

.hero-right img{

width:420px;

}


/* FEATURES */

.features{

display:flex;

justify-content:center;

gap:25px;

margin:40px;

}


.card{

background:white;

padding:25px;

border-radius:15px;

width:260px;

text-align:center;

box-shadow:0 6px 20px rgba(0,0,0,0.1);

}


.card h3{

margin-bottom:10px;
color:#1e3a8a;

}


.card p{

color:#6b7280;
font-size:14px;

}