/* RESET */

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

body{

font-family:'Source Sans 3', sans-serif;
background:#f4f7fb;
color:#1a1a1a;
line-height:1.6;

}


/* COLORI */

:root{

--blue:#1f3c88;
--light-blue:#4a6cf7;
--gold:#caa54a;
--dark:#0f172a;
--gray:#6b7280;
--bg:#f4f7fb;

}


/* HEADER */

header{

background:linear-gradient(135deg,var(--blue),#0b1f4d);
color:white;
padding:30px 20px;
text-align:center;

}

.header-anchor{

display:flex;
align-items:center;
justify-content:center;
gap:20px;

}

.header-anchor h1{

font-family:'Playfair Display',serif;
font-size:40px;

}

.anchor-icon{

font-size:32px;

}


/* NAV */

nav{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
background:white;
padding:15px;
box-shadow:0 2px 10px rgba(0,0,0,0.05);

}

nav button{

border:none;
background:#eef2ff;
padding:10px 18px;
border-radius:8px;
cursor:pointer;
font-weight:600;
transition:0.2s;

}

nav button:hover{

background:var(--light-blue);
color:white;

}

nav button.active{

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

}


/* SECTIONS */

main{

max-width:1200px;
margin:auto;
padding:40px 20px;

}

section{

margin-bottom:80px;

}

.page{

display:none;

}

.page.active{

display:block;

}


/* HERO */

.hero{

text-align:center;
margin-bottom:50px;

}

.hero h2{

font-size:36px;
margin-bottom:15px;

}

.hero p{

max-width:700px;
margin:auto;
color:var(--gray);

}

.hero-btns{

margin-top:25px;
display:flex;
justify-content:center;
gap:15px;

}


/* BUTTONS */

button{

font-family:inherit;

}

.btn-primary{

background:var(--blue);
color:white;
border:none;
padding:12px 22px;
border-radius:8px;
cursor:pointer;
font-weight:600;
transition:0.2s;

}

.btn-primary:hover{

background:var(--light-blue);

}

.btn-secondary{

background:white;
border:2px solid var(--blue);
color:var(--blue);
padding:12px 22px;
border-radius:8px;
cursor:pointer;
font-weight:600;

}

.btn-secondary:hover{

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

}


/* STATS */

.stats-row{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:40px;

}

.stat-box{

background:white;
padding:25px;
border-radius:10px;
text-align:center;
box-shadow:0 4px 10px rgba(0,0,0,0.05);

}

.stat-num{

font-size:32px;
font-weight:700;
color:var(--blue);

}

.stat-label{

color:var(--gray);

}


/* TITLES */

.section-title{

font-size:32px;
text-align:center;
margin-bottom:10px;

}

.section-sub{

text-align:center;
color:var(--gray);

}

.divider{

width:80px;
height:4px;
background:var(--gold);
margin:15px auto 40px auto;
border-radius:2px;

}


/* CARDS */

.cards-grid{

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

}

.card{

background:white;
padding:25px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
transition:0.25s;

}

.card:hover{

transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.1);

}

.card-icon{

font-size:30px;
margin-bottom:10px;

}

.card h3{

margin-bottom:10px;

}

.badge{

display:inline-block;
margin-top:10px;
padding:4px 10px;
background:var(--blue);
color:white;
font-size:12px;
border-radius:5px;

}


/* QUIZ */

.quiz-wrapper{

max-width:500px;
margin:auto;
text-align:center;

}

.quiz-wrapper input{

width:100%;
padding:12px;
margin-bottom:15px;
border-radius:8px;
border:1px solid #ddd;

}

#quiz-container{

margin-top:20px;

}


/* ABOUT */

.about-text{

max-width:700px;
margin:auto;
text-align:center;
color:var(--gray);

}


/* CONTACT */

.contact-form{

max-width:500px;
margin:auto;
display:flex;
flex-direction:column;
gap:12px;

}

.contact-form input,
.contact-form textarea{

padding:12px;
border-radius:8px;
border:1px solid #ddd;
font-family:inherit;

}

.contact-form textarea{

min-height:120px;

}


/* TOAST */

.toast{

position:fixed;
bottom:30px;
right:30px;
background:var(--blue);
color:white;
padding:15px 20px;
border-radius:8px;
opacity:0;
pointer-events:none;
transition:0.3s;

}

.toast.show{

opacity:1;

}


/* RESPONSIVE */

@media(max-width:768px){

.hero h2{

font-size:28px;

}

.header-anchor h1{

font-size:30px;

}

.hero-btns{

flex-direction:column;

}

}