@font-face {
  font-family:'Alice' ;
  src: url(font/Alice.ttf) format(truetype);
}

@font-face {
  font-family:'amster' ;
  src: url(font/amster.ttf) format(truetype);
}

@font-face {
  font-family:'Bodonibold' ;
  src: url(font/BodoniFLF-Bold.ttf) format(truetype);
}

@font-face {
  font-family:'bodoniroman' ;
  src: url(font/BodoniFLF-Roman.ttf) format(truetype);
}

@font-face {
  font-family:'PL' ;
  src: url(font/Pl.ttf) format(truetype);
}

@font-face {
  font-family: 'Didot';
  src: url('font/Didot.otf') format('opentype');
}


@font-face {
  font-family:'DidotDisplayLP' ;
  src: url(font/DidotDisplay.ttf) format(truetype);
}

@font-face {
  font-family:'Poppinsbold' ;
  src: url(font/Poppins-Bold.ttf) format(truetype);
}
@font-face {
  font-family:'PoppinsSemiBold' ;
  src: url(font/Poppins-SemiBold.ttf) format(truetype);
}
@font-face{
  font-family:'Zing';
  src:url(font/Zing.ttf) format(truetype);

}




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



.hero {
  width: 100vw;
height: 500px;

background: url('mg/bb.png') center center / 50% no-repeat;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows:repeat(5, 1fr);
  align-content: end; /* tutto in basso */
}



.hero h1{
font-family:Didot;
font-size:110px;
font-weight:300;
letter-spacing:8px;
}

.hero span{
color:#bd1212;
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 70px;
}

.intro h1 {
  font-family: Didot;
  font-weight: 100;
  font-size: 120px;
  letter-spacing: 7px;
  margin: 0;
}

.mini{
font-family:Poppinsbold;
letter-spacing:4px;
font-size:14px;
color:#bd1212;
margin-bottom:15px;
}

.intro h1{
font-family:Didot;
font-size:65px;
font-weight:300;
margin-bottom:25px;
}

.desc{
font-family:Didot;
font-size:24px;
max-width:850px;
margin:auto;
line-height:1.6;
}

.timeline{
padding:0 10% 120px;
max-width:1100px;
margin:auto;
}

.step{
display:grid;
grid-template-columns:120px 1fr;
gap:40px;
margin-bottom:70px;
}

.num{
font-family:Zing;
font-size:58px;
color:#bd1212;
}

.txt h3{
font-family:Didot;
font-size:32px;
margin-bottom:15px;
}

.txt p{
font-family:Didot;
font-size:22px;
line-height:1.7;
}

.faq-section{
padding:120px 8%;
background:#fafafa;
}

.faq-title{
text-align:center;
font-family:Didot;
font-size:70px;
font-weight:300;
margin-bottom:70px;
}

.faq-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}

.faq-box{
padding:35px;
background:white;
border:1px solid #eee;
min-height:220px;
}

.faq-box h3{
font-family:Didot;
font-size:28px;
margin-bottom:15px;
color:#bd1212;
}

.faq-box p{
font-family:Didot;
font-size:20px;
line-height:1.6;
}

.cta{
padding:120px 20px;
text-align:center;
}

.cta a{
font-family:Zing;
font-size:34px;
text-decoration:none;
color:black;
letter-spacing:4px;
}

.footer{
background:#bd1212;
width: 100%;
display: flex;
justify-content: center;
gap: 40px;
margin: 60px 0 -60px;
padding: 50px;

}

.footer a{
color:white;
text-decoration:none;
font-family:Zing;
font-size:22px;

}




@media (max-width:600px){

/* HERO */
.hero{
width:100%;
height:300px;
background: url('mg/bb.png') center center / 80% no-repeat;
}

.hero h1{
font-size:52px;
letter-spacing:3px;
text-align:center;
padding:0 10px;
}

/* INTRO */
.intro{
margin:40px 20px;
}

.mini{
font-size:11px;
letter-spacing:2px;
margin-bottom:10px;
}

.intro h1{
font-size:38px;
letter-spacing:2px;
margin-bottom:18px;
}

.desc{
font-size:16px;
line-height:1.5;
max-width:100%;
}

/* TIMELINE */
.timeline{
padding:0 20px 70px;
}

.step{
grid-template-columns:45px 1fr;
gap:14px;
margin-bottom:45px;
}

.num{
font-size:28px;
}

.txt h3{
font-size:20px;
margin-bottom:10px;
}

.txt p{
font-size:15px;
line-height:1.5;
}

/* FAQ */
.faq-section{
padding:70px 20px;
}

.faq-title{
font-size:34px;
margin-bottom:35px;
}

.faq-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}

.faq-box{
padding:18px;
min-height:auto;
}

.faq-box h3{
font-size:18px;
margin-bottom:10px;
}

.faq-box p{
font-size:14px;
line-height:1.5;
}

/* CTA */
.cta{
padding:70px 20px;
}

.cta a{
font-size:24px;
letter-spacing:2px;
}

/* FOOTER */
.footer{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
margin:40px 0 0;
padding:30px 20px;
}

.footer a{
font-size:18px;
text-align:center;
}

}