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

body{
font-family:'Poppins',sans-serif;
background:#ffffff;
color:#0b2a4a;
overflow-x:hidden;
}

/* ================= NAVBAR ================= */

.navbar{
background:#fff;
padding:12px 0;
border-bottom:1px solid #edf2f7;

position:sticky;
top:0;
z-index:999;
}

.container{
width:90%;
max-width:1300px;
margin:auto;

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

.logo-img{
width:145px;
display:block;
object-fit:contain;
}

/* ================= NAV ================= */

nav{
display:flex;
align-items:center;
gap:28px;
}

nav a{
text-decoration:none;
font-size:15px;
font-weight:800;
color:#0b2a4a;
transition:.3s;
}

nav a:hover{
color:#1f6ed4;
}

/* =========================
DROPDOWN
========================= */

.dropdown{
position:relative;
}

.dropbtn{
background:none;
border:none;
font-family:'Poppins',sans-serif;
font-size:16px;
font-weight:800;
cursor:pointer;
color:#16324f;
display:flex;
align-items:center;
gap:8px;
transition:0.3s;
}

.dropbtn:hover{
color:#1f6ed4;
}

.dropdown-content{
display:none;
position:absolute;
top:45px;
left:0;
background:#ffffff;
min-width:240px;
border-radius:18px;
padding:10px 0;
box-shadow:0 12px 30px rgba(0,0,0,0.08);
z-index:1000;
}

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

.dropdown-content a{
display:block;
padding:14px 18px;
text-decoration:none;
font-size:15px;
font-weight:500;
color:#16324f;
transition:0.3s;
}

.dropdown-content a:hover{
background:#eef5fc;
color:#1f6ed4;
}

/* ================= HERO ================= */

.page-hero{
padding:90px 20px;

background:
linear-gradient(
135deg,
#eef7ff,
#dceeff
);

text-align:center;
}

.page-hero h1{
font-size:58px;
font-weight:800;

margin-bottom:25px;

line-height:1.2;

background:linear-gradient(
135deg,
#16324f,
#1f6ed4
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-img{
width:90%;
max-width:1050px;

height:450px;

object-fit:cover;

border-radius:35px;

display:block;

margin:35px auto;

box-shadow:
0 25px 60px rgba(0,0,0,0.12);
}

.page-hero p{
max-width:820px;

margin:auto;

font-size:19px;

line-height:1.9;

color:#5c7186;
}

/* ================= SECTION TITLE ================= */

.section-title{
text-align:center;

font-size:50px;
font-weight:800;

margin:90px 0 60px;

letter-spacing:2px;

position:relative;

color:#16324f;
}

.section-title::after{

content:"";

position:absolute;

left:50%;
bottom:-18px;

transform:translateX(-50%);

width:120px;
height:5px;

border-radius:20px;

background:linear-gradient(
90deg,
#16324f,
#1f6ed4,
#6daee6
);
}

/* ================= GRID ================= */

.grid{
width:90%;
max-width:1300px;

margin:auto;

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

flex-wrap:wrap;

gap:35px;
}

/* =====================================================
WHAT WE SUPPORT = BUBBLES
===================================================== */

.support-section .card{

width:320px;
height:320px;

border-radius:50%;

background:#f8fbff;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

text-align:center;

padding:35px;

border:1px solid #e2edf8;

transition:.4s;

box-shadow:
0 15px 35px rgba(0,0,0,0.06);
}

.support-section .card:hover{

transform:
translateY(-10px)
scale(1.03);

background:#eef7ff;

box-shadow:
0 20px 45px rgba(0,0,0,0.08);
}

/* =====================================================
HOW IT HELPS = RECTANGLES
===================================================== */

.help-section .card{

width:280px;
min-height:290px;

background:#f8fbff;

border-radius:28px;

padding:35px 28px;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

text-align:center;

border:1px solid #e2edf8;

transition:.35s;

box-shadow:
0 12px 30px rgba(0,0,0,0.05);
}

.help-section .card:hover{

transform:translateY(-8px);

background:#eef7ff;

box-shadow:
0 18px 40px rgba(0,0,0,0.08);
}

/* =====================================================
WHERE SOLUTIONS APPLY = BUBBLES
===================================================== */

.apply-section .card{

width:320px;
height:320px;

border-radius:50%;

background:#f8fbff;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

text-align:center;

padding:35px;

border:1px solid #e2edf8;

transition:.4s;

box-shadow:
0 15px 35px rgba(0,0,0,0.06);
}

.apply-section .card:hover{

transform:
translateY(-10px)
scale(1.03);

background:#eef7ff;

box-shadow:
0 20px 45px rgba(0,0,0,0.08);
}

/* ================= ICON ================= */

.card i{

width:82px;
height:82px;

margin:0 auto 24px;

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

border-radius:24px;

font-size:30px;

color:#fff;

background:
linear-gradient(
135deg,
#16324f,
#1f6ed4
);

box-shadow:
0 10px 25px rgba(31,110,212,0.18);

transition:.3s;
}

.card:hover i{
transform:translateY(-5px);
}

/* ================= CARD TEXT ================= */

.card h3{

font-size:25px;
font-weight:700;

margin-bottom:16px;

line-height:1.4;

color:#16324f;
}

.card p{

font-size:16px;

line-height:1.9;

color:#5c7186;
}

/* ================= CTA ================= */

.cta-section{
background:#dceeff;

padding:90px 20px;

text-align:center;

margin-top:100px;
}

.cta-section h2{

font-size:44px;
font-weight:800;

margin-bottom:30px;

line-height:1.4;

color:#16324f;
}

/* ================= BUTTON ================= */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;

padding:16px 40px;

background:#16324f;

color:#fff;

text-decoration:none;

font-size:16px;
font-weight:600;

border-radius:15px;

transition:.3s;

box-shadow:
0 0 25px rgba(31,110,212,0.18);
}

.btn:hover{

transform:translateY(-4px);

background:#1f3f66;

box-shadow:
0 0 35px rgba(31,110,212,0.28);
}

/* ================= BOTTOM IMAGE ================= */

.bottom-image{
padding:80px 8% 110px;

background:#f7fbff;
}

.bottom-image img{
width:100%;
max-width:1200px;

display:block;
margin:auto;

border-radius:35px;

box-shadow:
0 20px 50px rgba(0,0,0,0.08);
}

/* ================= MOBILE ================= */

@media(max-width:900px){

.container{
flex-direction:column;
gap:18px;
}

.logo-img{
width:150px;
}

nav{
flex-wrap:wrap;
justify-content:center;
gap:18px;
}

.page-hero{
padding:70px 20px;
}

.page-hero h1{
font-size:40px;
}

.hero-img{
height:auto;
width:100%;
}

.page-hero p{
font-size:17px;
}

.section-title{
font-size:34px;
margin:70px 0 50px;
}

.support-section .card,
.apply-section .card{

width:280px;
height:280px;

padding:28px;
}

.help-section .card{

width:100%;
max-width:320px;

min-height:260px;
}

.card h3{
font-size:22px;
}

.card p{
font-size:15px;
}

.btn{
width:100%;
max-width:300px;
}
  
}

/* ACTIVE PAGE */

.nav-links a.active{
color:#1f6ed4;
}

.nav-links a:hover{
color:#1f6ed4;
}

/* =========================
CONTACT SECTION
========================= */

.cta{
background:linear-gradient(135deg,#1f3b73,#0b1f3a);
color:white;
text-align:center;
padding:100px 20px;
}

.cta h2{
font-size:42px;
margin-bottom:15px;
}

.cta p{
max-width:700px;
margin:auto;
color:#d6d6d6;
}

.contact-icons{
display:flex;
justify-content:center;
gap:18px;
margin-top:35px;
flex-wrap:wrap;
}

.contact-icons a{
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.12);
color:white;
font-size:20px;
text-decoration:none;
transition:.3s;
}

.contact-icons a:hover{
background:white;
color:#0b1f3a;
transform:translateY(-5px);
}

/* ================= FOOTER ================= */

.footer{
background:#0b1f3a;

padding:22px 20px;

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

text-align:center;
}

.footer p{
color:white !important;

font-size:14px;
font-weight:500;

margin:0;
}

.dropbtn.active{
color:#1f6ed4 !important;
}

.dropbtn.active i{
color:#1f6ed4 !important;
}