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

html{
scroll-behavior:smooth;
}

body{
font-family:Cambria,"Times New Roman",serif;
background:#fff;
color:#111827;
overflow-x:hidden;
line-height:1.6;
}

/* =========================
   HEADER
========================= */
.main-header{
position:fixed;
top:0;
left:0;
width:100%;
background:rgba(255,255,255,.96);
backdrop-filter:blur(10px);
z-index:9999;
box-shadow:0 2px 15px rgba(0,0,0,.05);
}

/* =========================
   NAV WRAP
========================= */
.nav-wrap{
max-width:1250px;
margin:auto;
padding:12px 20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.main-header,
.nav-wrap{
padding:0px;
height:auto;
}

/* =========================
   LOGO
========================= */
.brand{
display:flex;
align-items:center;
font-size:28px;
font-weight:700;
color:#2563eb;
letter-spacing:.5px;
}

.brand img{
width:90px;
height:80px;
object-fit:contain;
}
/* =========================
   MENU BUTTON
========================= */
.menu-toggle{
display:none;
width:45px;
height:45px;
border:none;
border-radius:12px;
background:#2563eb;
color:#fff;
font-size:18px;
cursor:pointer;
}

/* =========================
   NAVIGATION
========================= */
.nav-links{
display:flex;
align-items:center;
gap:8px;
}

.nav-link{
text-decoration:none;
padding:10px 14px;
font-size:12px;
font-weight:600;
color:#1e293b;
border-radius:10px;
transition:.3s;
display:block;
white-space:nowrap;
}

.nav-link:hover{
background:#eff6ff;
color:#2563eb;
}

.active{
background:#2563eb;
color:#fff;
}

/* =========================
   LOGIN BUTTON
========================= */
.login-btn{
background:
linear-gradient(
135deg,
#1e3a8a,
#2563eb
);
color:#fff!important;
}

.login-btn:hover{
transform:translateY(-2px);
box-shadow:
0 10px 20px rgba(37,99,235,.25);
}

/* =========================
   DROPDOWN
========================= */
.dropdown{
position:relative;
}

.dropdown-menu{
position:absolute;
top:110%;
left:0;
min-width:170px;
background:#fff;
padding:8px;
border-radius:14px;
box-shadow:
0 15px 35px rgba(0,0,0,.08);
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:.3s;
}

.dropdown:hover .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.dropdown-menu a{
display:block;
text-decoration:none;
padding:11px 14px;
font-size:13px;
color:#334155;
border-radius:8px;
transition:.25s;
}

.dropdown-menu a:hover{
background:#eff6ff;
color:#2563eb;
padding-left:18px;
}

/* =========================
   HERO SECTION
========================= */
.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:140px 20px 70px;
background:
linear-gradient(
135deg,
#eff6ff,
#ffffff,
#dbeafe
);
}

.hero-wrap{
max-width:1250px;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:60px;
}

.hero-content h1{
font-size:58px;
font-weight:700;
line-height:1.1;
color:#0f172a;
}

.hero-content h1 span{
color:#2563eb;
}

.hero-content p{
margin-top:22px;
font-size:18px;
line-height:1.8;
color:#475569;
max-width:600px;
}

/* =========================
   BUTTONS
========================= */
.hero-buttons{
display:flex;
gap:15px;
margin-top:35px;
flex-wrap:wrap;
}

.hero-btn{
text-decoration:none;
padding:15px 26px;
border-radius:14px;
font-size:15px;
font-weight:600;
transition:.3s;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
}

.primary-btn{
background:
linear-gradient(
135deg,
#2563eb,
#1d4ed8
);
color:#fff;
}

.primary-btn:hover{
transform:translateY(-3px);
box-shadow:
0 15px 30px rgba(37,99,235,.25);
}

.secondary-btn{
border:2px solid #2563eb;
color:#2563eb;
background:#fff;
}

.secondary-btn:hover{
background:#2563eb;
color:#fff;
}

/* =========================
   HERO IMAGE
========================= */
.hero-image{
display:flex;
justify-content:center;
}

.hero-image img{
width:100%;
max-width:520px;
animation:float 4s ease-in-out infinite;
}

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0);
}

}

/* =========================
   STATS
========================= */
.hero-stats{
display:flex;
gap:30px;
margin-top:40px;
flex-wrap:wrap;
}

.stat-box h2{
font-size:34px;
color:#2563eb;
}

.stat-box p{
margin-top:4px;
font-size:14px;
color:#64748b;
}

/* =========================
   TABLET
========================= */
@media(max-width:992px){

.hero-wrap{
grid-template-columns:1fr;
text-align:center;
gap:40px;
}

.hero-content{
order:2;
}

.hero-image{
order:1;
}

.hero-content h1{
font-size:46px;
}

.hero-content p{
margin:20px auto 0;
font-size:16px;
}

.hero-buttons,
.hero-stats{
justify-content:center;
}

.hero-image img{
max-width:380px;
}

}

/* =========================
   MOBILE
========================= */
@media(max-width:768px){

body{
overflow-x:hidden;
}

/* HEADER */
.nav-wrap{
padding:12px 15px;
flex-wrap:wrap;
}

.brand{
font-size:23px;
}

/* MENU BUTTON */
.menu-toggle{
display:flex;
align-items:center;
justify-content:center;
}

/* NAV */
nav{
width:100%;
}

.nav-links{
display:none;
flex-direction:column;
align-items:stretch;
width:100%;
background:#fff;
padding:15px;
border-radius:18px;
box-shadow:
0 10px 30px rgba(0,0,0,.08);
gap:10px;
}

.nav-links.active{
display:flex;
}

.nav-link{
width:100%;
padding:14px 16px;
font-size:15px;
border-radius:12px;
}

/* DROPDOWN */
.dropdown{
width:100%;
}

.dropdown-menu{
position:static;
opacity:1;
visibility:visible;
transform:none;
display:none;
background:#f8fafc;
box-shadow:none;
margin-top:8px;
border-radius:14px;
padding:8px 0;
width:100%;
}

.dropdown.active .dropdown-menu{
display:block;
}

.dropdown-menu a{
padding:12px 15px;
font-size:14px;
}

/* HERO */
.hero{
padding:130px 15px 70px;
min-height:auto;
}

.hero-wrap{
grid-template-columns:1fr;
gap:35px;
}

.hero-content{
text-align:center;
}

.hero-content h1{
font-size:34px;
line-height:1.2;
}

.hero-content p{
font-size:15px;
line-height:1.8;
margin-top:18px;
}

.hero-buttons{
flex-direction:column;
margin-top:28px;
}

.hero-btn{
width:100%;
padding:14px 20px;
font-size:14px;
}

.hero-image img{
max-width:270px;
}

/* STATS */
.hero-stats{
justify-content:center;
gap:18px;
margin-top:30px;
}

.stat-box{
width:100%;
max-width:120px;
}

.stat-box h2{
font-size:28px;
}

.stat-box p{
font-size:13px;
}

}
.nav-link,
.dropdown-menu  i{
color:#2563eb!important;
}

/* =========================
   SMALL MOBILE
========================= */
@media(max-width:480px){

.hero{
padding-top:120px;
}

.hero-content h1{
font-size:28px;
}

.hero-content p{
font-size:14px;
}

.hero-image img{
max-width:220px;
}

.stat-box h2{
font-size:24px;
}

}