:root{

--blue:#072b63;
--blue-light:#1a4d94;
--red:#e31d2d;
--light:#f5f7fb;
--text:#333;
--radius:20px;
--shadow:0 15px 40px rgba(7,43,99,.08);

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:Poppins,sans-serif;
color:var(--text);
line-height:1.6;
overflow-x:hidden;

}

section[id]{
scroll-margin-top:88px;
}

.container{

width:min(1100px,92%);
margin:auto;

}

header{

background:rgba(255,255,255,.92);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
position:sticky;
top:0;
z-index:100;
box-shadow:0 3px 15px rgba(0,0,0,.06);

}

.nav{

display:flex;
justify-content:space-between;
align-items:center;
padding:16px 0;

}

.logo{

display:flex;
align-items:center;
gap:12px;
font-size:2rem;
font-weight:800;

}

.brand-logo{
width:56px;
height:56px;
object-fit:cover;
border-radius:50%;
box-shadow:0 8px 20px rgba(7,43,99,.16);
}

.brand-text{
letter-spacing:.04em;
}

.blue{

color:var(--blue);

}

.red{

color:var(--red);

}

nav{

display:flex;
gap:30px;

}

nav a{

position:relative;
text-decoration:none;
font-weight:500;
color:#444;
padding:6px 0;
transition:color .25s;

}

nav a::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0;
height:2px;
background:var(--red);
transition:width .25s;
}

nav a:hover{
color:var(--blue);
}

nav a:hover::after{
width:100%;
}

.nav-toggle{
display:none;
flex-direction:column;
justify-content:center;
gap:5px;
width:38px;
height:38px;
border:none;
background:none;
cursor:pointer;
padding:0;
}

.nav-toggle span{
display:block;
width:100%;
height:3px;
border-radius:3px;
background:var(--blue);
transition:transform .25s,opacity .25s;
}

.nav-toggle.open span:nth-child(1){
transform:translateY(8px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2){
opacity:0;
}

.nav-toggle.open span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}

.hero{

min-height:90vh;

background:url("Images/hero.png") center/cover;

position:relative;

display:flex;
align-items:center;

}

.overlay{

position:absolute;
inset:0;

background:linear-gradient(90deg,
rgba(255,255,255,.97) 0%,
rgba(255,255,255,.86) 46%,
rgba(255,255,255,.55) 100%);

}

.hero-content{

position:relative;
max-width:650px;
padding:24px 0;

}

.hero h1{

font-size:4rem;
color:var(--blue);
font-weight:800;
line-height:1.1;

margin-bottom:20px;

}

.hero p{

font-size:1.2rem;

margin-bottom:22px;

}

.hero-badge{

display:inline-block;
margin-bottom:24px;
padding:10px 16px;
border-radius:999px;
background:rgba(7,43,99,.08);
color:var(--blue);
font-weight:600;
font-size:.95rem;
}

.hero-actions,
.footer-actions{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:8px;
}

.footer-actions{
justify-content:center;
}

.button{

display:inline-block;

background:var(--red);

color:white;

padding:15px 35px;

border-radius:40px;

text-decoration:none;

font-weight:600;

transition:transform .3s,box-shadow .3s,background .3s;

box-shadow:0 10px 25px rgba(227,29,45,.2);

}

.button.primary{
background:var(--red);
}

.button.secondary{
background:transparent;
color:var(--blue);
border:2px solid rgba(7,43,99,.15);
box-shadow:none;
}

.button.secondary:hover{
background:rgba(7,43,99,.06);
}

.button:hover{

transform:translateY(-3px);
box-shadow:0 14px 30px rgba(227,29,45,.28);

}

.button.secondary:hover{
box-shadow:none;
}

.features{

margin-top:-70px;

position:relative;

z-index:5;

}

.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.card{

background:white;

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:transform .3s,box-shadow .3s;

}

.card:hover{
transform:translateY(-6px);
box-shadow:0 20px 45px rgba(7,43,99,.14);
}

.icon{
display:flex;
align-items:center;
justify-content:center;
width:56px;
height:56px;
border-radius:50%;
background:rgba(227,29,45,.1);
font-size:1.5rem;
margin-bottom:18px;
}

.card h3,
.info h3{
font-size:1.15rem;
margin-bottom:8px;
color:var(--blue);
}

.section{

padding:90px 0;

}

.light{

background:var(--light);

}

.kicker{
display:inline-block;
color:var(--red);
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
font-size:.8rem;
margin-bottom:10px;
}

.section h2{

color:var(--blue);

font-size:2.3rem;

margin-bottom:25px;

position:relative;

}

.narrow{

max-width:800px;

}

.message{

background:white;

padding:40px;

border-left:6px solid var(--red);

border-radius:12px;

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

}

.message p{

margin-bottom:18px;

}

.info-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

gap:25px;

margin-top:40px;

}

.info{

background:white;

padding:30px;

text-align:center;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:transform .3s,box-shadow .3s;

}

.info:hover{
transform:translateY(-6px);
box-shadow:0 18px 38px rgba(7,43,99,.12);
}

.info .icon{
margin-left:auto;
margin-right:auto;
}

#faq h3{
color:var(--blue);
margin-top:26px;
margin-bottom:6px;
}

#faq h3:first-of-type{
margin-top:0;
}

footer{

background:var(--blue);

color:white;

text-align:center;

padding:70px 20px;

}

footer h2{

margin-bottom:20px;

}

footer p{

margin:20px auto;

max-width:650px;

}

.copyright{

opacity:.7;

margin-top:50px;

font-size:.9rem;

}

.reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .6s ease,transform .6s ease;
}

.reveal.visible{
opacity:1;
transform:none;
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto;
}

.reveal{
opacity:1;
transform:none;
transition:none;
}
}

@media(max-width:900px){
.hero h1{
font-size:3rem;
}
}

@media(max-width:700px){

.nav-toggle{
display:flex;
}

nav{
position:absolute;
top:100%;
left:0;
right:0;
flex-direction:column;
gap:0;
background:white;
box-shadow:0 15px 25px rgba(0,0,0,.08);
max-height:0;
overflow:hidden;
transition:max-height .3s ease;
}

nav.open{
max-height:280px;
}

nav a{
padding:16px 24px;
border-bottom:1px solid rgba(0,0,0,.06);
}

nav a::after{
display:none;
}

.logo{
font-size:1.5rem;
}

.brand-logo{
width:46px;
height:46px;
}

.hero h1{

font-size:2.3rem;
line-height:1.2;

}

.hero p{
font-size:1rem;
}

.hero{

min-height:78vh;

padding:40px 0;

}

.hero-content{
padding:20px 0;
}

.hero-actions,
.footer-actions{
flex-direction:column;
align-items:flex-start;
}

.footer-actions{
align-items:center;
}

.button{
padding:13px 24px;
width:100%;
text-align:center;
}

}

@media(max-width:480px){
.hero h1{
font-size:2rem;
}

.section{
padding:70px 0;
}

.message,
.card,
.info{
padding:24px;
}
}