:root{

/* Brand Colors */
--primary:#214079;
--secondary:#2d56a4;
--accent:#417dc3;

/* Text */
--text:#3e3c3d;
--muted:#6c757d;

/* Background */
--white:#ffffff;
--light:#f5f7fa;

/* Buttons */
--btn:#417dc3;
--btn-hover:#2d56a4;

/* Layout */
--page-padding:90px;

}

body{
background:var(--white);
color:var(--text);
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
line-height:1.7;
margin:0;
padding:0;
}

h1,h2,h3,h4,h5{
color:var(--primary);
font-weight:700;
}

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

.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;

background:linear-gradient(-45deg,#2a5393,#2596be,#1f3f70,#2a5393);
background-size:400% 400%;

animation:gradientMove 12s ease infinite;

padding:120px 0;
position:relative;
overflow:hidden;
}

/* Gradient Animation */

@keyframes gradientMove{

0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}

}

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

.site-nav{
background:transparent !important;
border-bottom:none;
transition:.3s;
position:absolute;
top:0;
left:0;
width:100%;
z-index:9999;
}

.site-nav.scrolled{
background:#ffffff !important;
box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.nav-link{
color:#ffffff;
font-weight:600;
margin-left:15px;
}

.nav-link:hover{
color:var(--accent);
}

.nav-link.active{
color:var(--primary);
}

/* ================= FLOATING BUTTONS ================= */

.floating-buttons{
position:fixed;
top:50%;
right:20px;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:12px;
z-index:1200;
}

/* Button */

.floating-btn{
width:52px;
height:52px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;

background:linear-gradient(135deg,#2a5393,#2596be);

color:#ffffff;
font-size:18px;
text-decoration:none;

transition:.3s;

box-shadow:0 6px 18px rgba(0,0,0,.25);
border:2px solid #ffffff;
}

/* Icon */

.floating-btn i{
font-size:18px;
}

/* Hover */

.floating-btn:hover{
transform:translateX(6px) scale(1.08);
background:linear-gradient(135deg,#214079,#2d56a4);
}

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

.btn-primary-custom{
background:var(--btn);
border:none;
color:#fff;
padding:12px 30px;
border-radius:40px;
font-weight:600;
transition:.3s;
}

.btn-primary-custom:hover{
background:var(--btn-hover);
transform:translateY(-2px);
}

/* ================= CARDS ================= */

.card-custom{
background:#fff;
border-radius:12px;
padding:20px;
box-shadow:0 8px 25px rgba(0,0,0,.06);
transition:.3s;
}

.card-custom:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* ================= SECTION BACKGROUND ================= */

.section-light{
background:var(--light);
}