/* ==========================================
RAMSME Executive Advisory Theme
Version 1.0
========================================== */

:root {

--primary:#0f172a;
--secondary:#1e293b;
--accent:#2563eb;

--light:#f8fafc;
--white:#ffffff;

--gray:#64748b;
--border:#e2e8f0;

--container:1200px;

--shadow:0 10px 30px rgba(0,0,0,0.08);

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

font-size:18px;
line-height:1.7;

color:var(--secondary);
background:var(--white);

}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

.container{
width:90%;
max-width:var(--container);
margin:auto;
}

/* ==========================
HEADER
========================== */

header{

background:var(--white);
border-bottom:1px solid var(--border);

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

}

header .container{

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

padding:20px 0;

}

.logo a{

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

letter-spacing:1px;

color:var(--primary);

}

nav ul{

display:flex;
gap:28px;
align-items:center;

}

nav a{

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

transition:.3s;

}

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

.btn-nav{

background:var(--primary);
color:#fff;

padding:12px 20px;
border-radius:6px;

}

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

.hero{

padding:120px 0;

background:
linear-gradient(
135deg,
#f8fafc 0%,
#ffffff 100%
);

text-align:center;

}

.hero h1{

font-size:58px;
line-height:1.15;

max-width:950px;
margin:auto;

color:var(--primary);

font-weight:700;

}

.hero-sub{

max-width:850px;
margin:35px auto;

font-size:22px;
color:var(--gray);

}

.hero-buttons{

display:flex;
justify-content:center;
gap:18px;

margin-top:40px;

flex-wrap:wrap;

}

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

.btn-primary{

background:var(--primary);
color:#fff;

padding:16px 28px;
border-radius:8px;

font-weight:600;

transition:.3s;

display:inline-block;

}

.btn-primary:hover{

transform:translateY(-2px);

}

.btn-secondary{

border:1px solid var(--primary);

padding:16px 28px;
border-radius:8px;

font-weight:600;

}

/* ==========================
SECTIONS
========================== */

section{
padding:100px 0;
}

section h2{

font-size:42px;
color:var(--primary);

margin-bottom:30px;

}

section p{
max-width:900px;
}

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

.grid{

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

gap:30px;

margin-top:50px;

}

.card{

background:#fff;

padding:35px;

border:1px solid var(--border);

border-radius:14px;

box-shadow:var(--shadow);

}

.card h3{

margin-bottom:15px;
color:var(--primary);

}

/* ==========================
PROCESS
========================== */

.steps{

display:grid;

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

gap:20px;

margin-top:40px;

}

.step{

text-align:center;

padding:30px;

border:1px solid var(--border);

border-radius:12px;

}

.step span{

display:inline-flex;

width:60px;
height:60px;

border-radius:50%;

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

background:var(--primary);
color:#fff;

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

margin-bottom:20px;

}

/* ==========================
FAQ
========================== */

.faq-item{

border-bottom:1px solid var(--border);

padding:25px 0;

}

.faq-item h3{

font-size:22px;

margin-bottom:10px;

color:var(--primary);

}

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

.cta{

background:var(--primary);

color:#fff;

text-align:center;

}

.cta h2{

color:#fff;

}

.cta p{

margin:auto auto 35px auto;

}

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

.page-hero{

padding:90px 0;

background:#f8fafc;

text-align:center;

}

.page-hero h1{

font-size:56px;
color:var(--primary);

margin-bottom:20px;

}

/* ==========================
FORMS
========================== */

form{

max-width:750px;

margin-top:40px;

}

label{

display:block;
margin-bottom:8px;
font-weight:600;

}

input,
textarea,
select{

width:100%;

padding:15px;

margin-bottom:25px;

border:1px solid var(--border);

border-radius:8px;

font-size:16px;

}

button{

background:var(--primary);
color:#fff;

padding:16px 24px;

border:none;

border-radius:8px;

cursor:pointer;

font-size:16px;

}

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

footer{

background:#0f172a;
color:#fff;

padding-top:60px;

}

.footer-grid{

display:grid;

grid-template-columns:
2fr 1fr 1fr;

gap:40px;

}

footer h4{

margin-bottom:15px;

}

footer li{

margin-bottom:10px;

}

footer a:hover{

color:#cbd5e1;

}

.copyright{

text-align:center;

padding:30px 0;

margin-top:40px;

border-top:1px solid rgba(255,255,255,.1);

}

/* ==========================
TABLES
========================== */

table{

width:100%;

border-collapse:collapse;

margin-top:30px;

}

table th,
table td{

border:1px solid var(--border);

padding:16px;

text-align:left;

}

/* ==========================
RESPONSIVE
========================== */

@media(max-width:900px){

.hero h1{
font-size:42px;
}

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

section h2{
font-size:34px;
}

nav ul{
gap:15px;
}

}

@media(max-width:768px){

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

nav ul{
flex-wrap:wrap;
justify-content:center;
}

.hero{
padding:80px 0;
}

.hero h1{
font-size:34px;
}

.hero-sub{
font-size:20px;
}

.footer-grid{
grid-template-columns:1fr;
}

}