html {
  font-size: 16px;
}

@font-face {
    font-family: 'ABCGinto-M';
    src: local('ABCGinto'), url(font/ABCGinto-Medium-Trial.woff) format('woff');
}

@font-face {
    font-family: 'ABCGinto-R';
    src: local('ABCGinto'), url(font/ABCGinto-Regular-Trial.woff) format('woff');
}

@font-face {
    font-family: 'ABCGinto-T';
    src: local('ABCGinto'), url(font/ABCGinto-Thin-Trial.woff) format('woff');
}

@font-face {
  font-family: 'Mortina';
  src: local('Mortina'), url(font/Mortina-One-Regular.woff) format('woff');
}

/*HOMEPAGE*/
.homepage{
  background-color: #045EF0;
  margin-left: 8vw;
  margin-right: 8vw;
  margin-top: 6vw;
}


.menu-toggle {
  display: none;
}

.burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 35px; 
  height: 25px;
  cursor: pointer;
  position: relative;
  z-index: 1000;
  margin-right: 2vw;
}

.burger span {
  display: block;
  height: 3px; 
  background-color: #D3F674; 
  border-radius: 8px;
  transition: 0.1s ease-in-out;
}

#menu-toggle:checked + .burger span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

#menu-toggle:checked + .burger span:nth-child(2) {
  opacity: 0;
}

#menu-toggle:checked + .burger span:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  position: fixed;
  background-color: #045EF0;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; 
  padding: 10px 0;

}
.container-fluid img {
  width: 30vw;
  height: auto;
}

.navbar-collapse {
  background-color: #FDFFF4;
  position: absolute;
  top: 110%;
  right: 0;
  width: 150px;
  padding: 10px 15px;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease-in-out;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  z-index: 1100; 
}

#menu-toggle:checked ~ .navbar-collapse {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
}


.navbar-nav {
  text-align: right;
}

.navbar-nav .nav-item {
  padding: 5px 0;
}

.nav-item a {
  font-family: Mortina;
  text-decoration: none;
  color: #045EF0;
  font-size: 1.5rem;
  display: block;
  margin-right: 1vw;
}


.domanda-iniziale{
  font-family: Mortina;
  font-size:3.5rem;
  color: #ffffff;
  text-align: center;
  padding-top: 20vh;
  padding-bottom: 13vh;
}
.risposte {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap:40vw;
}

.risposte h3{
  font-family: Mortina;
  font-size:2.5rem;
  color: #ffffff;
  justify-content: center;
}
.respingente {
  display: inline-block;
  position: relative;
  transition: transform 0.1s linear;
  z-index: 1000;
}

#testo-iniziale {
  padding-top: 30vh;
}

#testo-iniziale h4 {
  font-family: Mortina;
  font-size:1.8rem;
  color: #ffffff;
}

#testo-iniziale p {
  font-family: ABCGinto-T;
  font-size:1.1rem;
  color: #ffffff;
  padding-top: 3vh;
}
.logo h1{
  font-family: Mortina;
  font-size:3.5rem;
  color:#D3F674;
  text-align: left;
  line-height: 95%;
  padding-top: 8vh;
}
.payoff h1{
  font-family: Mortina;
  font-size:3.5rem;
  color:#D3F674;
  text-align: right;
  line-height: 95%;
  padding-top: 6vh;
  padding-bottom: 10vh;
}

.bandiere-testo{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:5vh;
}

.bandiera-uno img{
width:80%;
height: auto;
margin-left: -8vw;
margin-right: -8vw;
}

.testo-finale1{
  font-family: Mortina;
  font-size: 3.5rem;
  color:#ffffff;
  margin-bottom: -9vh;
  text-align:center;
}
.testo-finale2{
  font-family: Mortina;
  font-size:8.1rem;
  color: #ffffff;
  margin-bottom: -5vh;
  margin-left: 21vw;

}
.testo-finale3{
  font-family: ABCGinto-T;
  font-size: 1.1rem;
  color:#ffffff;  
  margin-bottom: -15vh;
}
.bandiera-due img{
  width:80%;
  height: auto;
  margin-left: 25vw;
  padding-top: 10vh;
}

.coin{
  display: flex;
  flex-direction: row;
}
.disegno-coin img{
  width:80%;
  height:auto;
  margin-left: -12vw;
}

.titolo-link{
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 28vw;
  gap:-10vh;
  padding-top: 15vh;
}
.testo-coin1{
  font-family: Mortina;
  font-size:3.5rem;
  padding-top: 0.3vh;
  color: #ffffff;
}
.testo-coin2{
  font-family: Mortina;
  font-size:3.5rem;
  color: #ffffff;
}
.testo-coin3{
  font-family: Mortina;
  font-size:3.5rem;
  color: #ffffff;
}

.link-homepage {
  text-decoration: none;
}

.link-homepage h2 {
  color: #FDFFF4; 
  transition: color 0.3s ease-in-out;
}
.link-homepage h7 {
  color: #FDFFF4; 
  transition: color 0.3s ease-in-out;
}

.link-homepage:hover h2 {
  color: #D3F674; 
}
.link-homepage:hover h7 {
  color: #D3F674; 
}

.footer{
  position:relative;
  display: flex;
  flex-direction: column;
  padding-top:20vh;
}

.footer img{
  width:120%;
  height:auto;
  margin-left: -8vw;
  margin-right: -8vw;
  display: block;
}
.logotipo-footer{
  position: absolute;
  top: 15%;
  text-align: left;
  margin-left:8vw;
}
.logotipo-footer img{
  width:40%;
  height: auto;
}
.contattaci{
  position: absolute;
  top: 30%;
  color: white;
  font-size: 20px;
  text-align: left;
}

.contattaci h4{
  font-family: Mortina;
  font-size:1.8rem;
  color: #000000;
}
.contattaci-testo{
  font-family: ABCGinto-T;
  font-size:1.1rem;
  color: #000000;
}

.seguici{
  position: absolute;
  top: 45%;
  color: white;
  font-size: 20px;
  text-align: left;
}

.seguici h4{
  font-family: Mortina;
  font-size:1.8rem;
  color: #000000;
}
.icone {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap:26vw;
  margin-left: 8vw;
  margin-right: 8vw;
}
.icone img{
  width:50px; 
  height:auto;
}

.descrizione-corso{
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 60%;
  color: #000000;
  font-size: 20px;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-left: 5vw;
}

.descrizione-corso p{
  font-family: ABCGinto-M;
  font-size:1.1rem;
  line-height: 20px;
  color: #000000;
}

.contatti{
  font-family: Mortina;
  font-size:1.8rem;
  color: #000000;
}

/* PAGINA PROGETTO */
.progetto{
  background-color: #045EF0;
  margin-left: 8vw;
  margin-right: 8vw;
  margin-top: 6vw;
}

.titolo-progetto{
  font-family: Mortina;
  font-size:2.5rem;
  padding-top: 10vh;
  color: #ffffff;
}

.testo-obbiettivo {
  padding-top: 10vh;
}

.testo-obbiettivo h4 {
  font-family: Mortina;
  font-size:1.8rem;
  color: #ffffff;
}

.testo-obbiettivo p {
  font-family: ABCGinto-T;
  font-size:1.1rem;
  color: #ffffff;
  padding-top: 3vh;
}

.scroll-container {
  display: flex;
  overflow-x: auto;  
  white-space: nowrap; 
  gap: 6vw; 
  scroll-behavior: smooth; 
  -webkit-overflow-scrolling: touch;
  margin-left: -8vw;
  margin-right: -8vw;
  padding-left: 8vw;
  padding-right: 8vw;
  padding-top: 5vh;
  scrollbar-width: none;
}

.scroll-container img {
  width: 90%; 
  height: auto;
}
.scroll-container::-webkit-scrollbar {
  display: none;
}

.immagine-mezzo img{
  width: 120%;
  height: auto;
  margin-left: -8vw;
  margin: -8vw;
padding-top:8vh;
padding-bottom: 8vh;
}

.titolo-spiegazione {
  font-family: Mortina;
  font-size:2.5rem;
  color: #ffffff;
}

.spiegazione-progetto p{
  font-family: ABCGinto-T;
  font-size:1.1rem;
  color: #ffffff;
}

.titolo-manuale{
  font-family: Mortina;
  font-size:1.8rem;
  padding-top: 10vh;
  color: #ffffff;

}
.testo-manuale{
  font-family: ABCGinto-T;
  font-size:1.1rem;
  color: #ffffff;

}

.foto-campagna{
  display: flex;
  flex-direction: column;
  gap:4vh;
  padding-top:8vh;
}

.foto-campagna img{
  width:100%;
  height:auto;
  border-radius: 10px;
}

.titolo-gioco{
  font-family: Mortina;
  font-size:1.8rem;
  padding-top: 10vh;
  color: #ffffff;

}
.testo-gioco{
  font-family: ABCGinto-T;
  font-size:1.1rem;
  color: #ffffff;
}

.titolo-realtà{
  font-family: Mortina;
  font-size:1.8rem;
  padding-top: 10vh;
  color: #ffffff;

}
.testo-realtà{
  font-family: ABCGinto-T;
  font-size:1.1rem;
  color: #ffffff;
}

.testo-chisiamo {
  padding-top: 10vh;
}

.testo-chisiamo h4 {
  font-family: Mortina;
  font-size:1.8rem;
  color: #ffffff;
}

.testo-chisiamo p {
  font-family: ABCGinto-T;
  font-size:1.1rem;
  color: #ffffff;
  padding-top: 5vh;
}

.noialtre img{
  display: flex;
  flex-direction: row;
  height:auto;
  width:100%;
  padding-top: 5vh;
}

.testo-chisiamo h6{
  font-family: Mortina;
  font-size: 1.1rem;
  color:#ffffff;
  display: flex;
  justify-content: center;
  text-align: center;
  width:80vw;
} 


/*QUIZZONE*/

.quizzone{
  background-color: #FDFFF4;
  margin-left: 8vw;
  margin-right: 8vw;
  margin-top: 6vw;

}

.titolo-quizpage{
  font-family: Mortina;
  font-size:2.5rem;
  color: #000000;
  padding-bottom: 4vh;
  padding-top: 10vh;

}
.testo-quizzone{
  font-family: ABCGinto-T;
  font-size:1.1rem;
  color: #000000;

}

.quiz-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 3vh; 
}

.quiz-button {
  background-color: #045EF0; 
  font-family: Mortina;
  color: white;
  font-size: 1.2rem;
  border: none;
  border-radius: 8px; 
  padding: 10px 30px;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease-in-out;
}


.statistiche {
  padding-top:15vh;
}

.statistiche h4 {
  font-family: Mortina;
  font-size: 1.8rem;
  color: #000000;
}

.statistiche {
  text-align: left;
  margin-top: 20px;
}

.carousel {
  width: 108%; 
  margin-left: -5vw;  
  margin-right: -5vw;  
  padding-top: 5vh;
}

.carousel-inner {
  position: relative;
}

.carousel-item {
  padding: 0 20px; 
}

.personaggio img{
  width: 105%;
}

.contenuto {
  position: absolute;
  top: 51%; 
  left: 52%;
  transform: translate(-50%, -50%);
  width: 75%; 
  color: #ffffff;
}

.contenuto h2 {
  font-family:Mortina;
  font-size:3.5rem;
  text-align: center;
  color: #045EF0;
}

.contenuto h4 {
  font-family:Mortina;
  font-size:1.8rem;
  text-align: center;
  line-height: 30px;
  padding-top: 3vh;
  margin-left: 2vw;
  margin-right: 2vw;
}

.carousel-control-prev,
.carousel-control-next {
  width: 50%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
}
.freccia2{
  width: 40%;
  height: auto;
  padding-top: 85vh;
  margin-left: 15vw;
  margin-right: 15vw;
}


/*QUIZ PERSONAGGIO*/

.quiz-personaggio{
  background-color: #045EF0;
  margin-left: 8vw;
  margin-right: 8vw;
  margin-top: 6vw;
}
.titolo-quizzone{
  font-family: Mortina;
  font-size:2.5rem;
  color: #ffffff;
  padding-bottom: 4vh;
  padding-top: 10vh;

}
#quiz-container h3{
  font-family: Mortina;
  font-size:2.5rem;
  color: #ffffff;
  padding-bottom: 4vh;
}

.question{
  padding-top: 10vh;
  padding-bottom: 5vh;
}
.question h5{
  font-family: Mortina;
  font-size:1.4rem;
  padding-bottom: 3vh;
  color: #ffffff;

}
.question label{
  font-family: ABCGinto-T;
  font-size:1.1rem;
  color: #ffffff;
}

.button-container {
  display: flex;
  justify-content: center;
  width: 100%; 
  margin-top: 20px; 
}

#submit-btn {
  font-family: Mortina;
  font-size: 1.2rem;
  background-color: #ffffff;
  width: 280px;
  height: 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}

#result{
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top:10vh;
}

#result-text{
  font-family: Mortina;
  font-size: 1.8rem;
  color: #ffffff;
  padding-top:10vh; 
  margin-left: 6vw;
  margin-right: 8vw;
  line-height: 30px;
}

#result-text2 {
  font-family: ABCGinto-T; 
  font-size: 1.1rem; 
  color: #ffffff; 
  line-height: 25px;
}
#result-image{
  display: none;
  height:auto;
  width:100%;
}

#result-image [src]{
  display: block;
}


/*TEORIA*/
.teoria{
  background-color: #FDFFF4;
  margin-left: 8vw;
  margin-right: 8vw;
  margin-top: 6vw;
  
}

.titolo-teoria {
  font-family: Mortina;
  font-size:2.5rem;
  color: #000000;
  padding-top: 10vh;
  padding-bottom: 4vh;
}
.titolo-filtri {
  max-width: 600px;
  margin: auto;
}

h6 {
  font-family: Mortina;
  font-size:1.1rem;
  color: #000000;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.filter {
  display: inline-block;
  cursor: pointer;
  padding: 5px 12px;
  font-family: Mortina;
  font-size: 1.1rem;
  border-radius: 8px;
  color: #ffffff;
  transition: transform 0.2s ease-in-out, background-color 0.2s;
}

.filter.active {
  transform: scale(1.2);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0.8;
}

.filter[data-categoria="finanza"] { background-color: #dba6a6; }
.filter[data-categoria="lavoro"] { background-color: #c2a3ff; }
.filter[data-categoria="domestica"] { background-color: #1e5aff; }
.filter[data-categoria="emergenza"] { background-color: #d45530; }
.filter[data-categoria="tips"] { background-color: #d4f060; }

[data-categoria] {
  display: block; 
}

.argomenti{
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  padding-top:10vh;
  gap: 8vh;
}
.link-argomenti{
  text-decoration: none;
}

.titolo-argomento{
  font-family: Mortina;
  font-size:1.8rem;
  color: #000000;
  position: relative; 
  margin-top: -1vh; 
  line-height: 30px;
}

.assicurazione img{
  width:80%;
  height:auto;
}

.assistenza img{
  width:80%;
  height:auto;
}

.bollette img{
  width:80%;
  height:auto;
}

.cartedipagamento img{
  width:80%;
  height:auto;
}

.colloqui img{
  width:80%;
  height:auto;
}

.contocorrente img{
  width:80%;
  height:auto;
}

.contrattiretribuzione img{
  width:80%;
  height:auto;
}

.contrattitransizione img{
  width:80%;
  height:auto;
}

.contributi img{
  width:80%;
  height:auto;
}

.creditoprestito img{
  width:80%;
  height:auto;
}

.dichiarazione img{
  width:80%;
  height:auto;
}

.fattura img{
  width:80%;
  height:auto;
}

.gestionerisparmio img{
  width:80%;
  height:auto;
}

.incidenti img{
  width:80%;
  height:auto;
}

.isee img{
  width:80%;
  height:auto;
}

.guasti img{
  width:80%;
  height:auto;
}

.mutuo img{
  width:80%;
  height:auto;
}

.partitaiva img{
  width:80%;
  height:auto;
}

.pulizia img{
  width:80%;
  height:auto;
}

.spesa img{
  width:80%;
  height:auto;
}

.tributi img{
  width:80%;
  height:auto;
}

.asterisco{
  display: flex;
  justify-content: center;
  margin-top: -10px;
}

.asterisco img{
  width:10%;
  height:auto;
}


/* PAGINA DETTAGLIO TEORIA ASSICURAZIONE*/

.argomento-assicurazione{
  background-color: #FDFFF4;
  margin-left: 8vw;
  margin-right: 8vw;
  margin-top: 6vw;
}
.titolo-illu-assicurazione{
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  padding-top:2vh;
}
.titolo-illu-assicurazione img{
  width:75%;
  height:auto;
}
.titolo-assicurazione{
  font-family: Mortina;
  font-size:2.5rem;
  line-height:38px;
  padding-top: -3vh;
  position: relative;
}

.asterisco img{
  width:8%;
  height:auto;
  padding-top:2vh;
}

.intro-assicurazione{
  margin-right:6vw;
  margin-left:6vw;
  padding-top:5vh;
}

.intro-assicurazione p{
  font-family: ABCGinto-R;
  font-size: 1.1rem;
}

.spiegazione-assicurazione{
  padding-top:10vh;

}

.spiegazione-assicurazione h4{
  font-family: Mortina;
  font-size: 1.8rem;
}

.spiegazione-assicurazione p{
  font-family: ABCGinto-T;
  font-size: 1rem;
}

.opzioni-uno{
  margin-right:6vw;
  margin-left:6vw;
}

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

.parte-due-assicurazione h4{
  padding-top:10vh;
  font-family: Mortina;
  font-size: 1.8rem;
}
.parte-due-assicurazione p{
font-family: ABCGinto-T;
  font-size: 1rem;
}
.parte-due-assicurazione{
padding-top:5vh;
}

.opzioni-due{
  margin-right:6vw;
  margin-left:6vw;
}
.opzioni-due img{
  width:100%;
  height:auto;
}

.parte-tre-assicurazione h4{
  padding-top:5vh;
  font-family: Mortina;
  font-size: 1.8rem;
}
.parte-tre-assicurazione p{
  font-family: ABCGinto-T;
    font-size: 1rem;
  }
.parte-tre-assicurazione{
  padding-top:10vh;
  padding-bottom:10vh;
  }

.glossario{
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: #045EF0;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  width:80%;
  height:600px;
  border-radius: 20px;
  margin-left: 8vw;
}


.titolo-glossario{
  position: absolute;
  align-items: center;
    top: 10%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #ffffff; 
    text-align: left;
    width: 70%;
    font-family: Mortina;
    font-size:1.8rem;
}


.testo-glossario1{
  position: absolute;
  align-items: center;
  font-family: ABCGinto-T;
    font-size:1rem;
    color: #ffffff; 
    text-align: left;
    padding-top: 3vh;
    top: 30%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 70%;
}

.testo-glossario2{
  align-items: center;
  position: absolute;
  font-family: ABCGinto-T;
    font-size:1rem;
    color: #ffffff; 
    text-align: left;
    padding-top: 3vh;
    top: 55%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 70%;
}

.testo-glossario3{
  align-items: center;
  position: absolute;
  font-family: ABCGinto-T;
    font-size:1rem;
    color: #ffffff; 
    text-align: left;
    padding-top: 3vh;
    top: 80%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 70%;
}
.parolebold{
  font-family: ABCGinto-M;
    font-size:1rem;

}
.suggerimenti-assicurazione{
  padding-top:10vh;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  gap: 5vh;
}

.titolo-sugg-assicurazione{
  font-family: Mortina;
  font-size: 1.8rem;

}

/* PAGINA DETTAGLIO TEORIA CONTRATTI*/

.titolo-illu-contratti{
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  
}
.titolo-illu-contratti img{
  width:60%;
  height:auto;
}

.asterisco img{
  width:8%;
  height:auto;
  padding-top:2vh;
}
.titolo-contratti{
  font-family: Mortina;
  font-size:2.5rem;
  line-height:38px;
  padding-top: -3vh;
  position: relative;
}

.intro-contratti{
  margin-right:6vw;
  margin-left:6vw;
  padding-top:2vh;
}

.intro-contratti p{
  font-family: ABCGinto-R;
  font-size: 1.1rem;
}

.spiegazione-contratti{
  padding-top:10vh;

}

.spiegazione-contratti h4{
  font-family: Mortina;
  font-size: 1.8rem;
}

.spiegazione-contratti p{
  font-family: ABCGinto-T;
  font-size: 1rem;
}

.parte-uno-contratti img{
  width:100%;
  height:auto;
}

.parte-due-contratti{
  padding-top: 5vh;
  padding-bottom: 8vh;
}
.glossario-contratti{
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: #045EF0;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  width:80%;
  height:680px;
  border-radius: 20px;
  margin-left: 8vw;
}


.titolo-glossario-contratti{
  position: absolute;
  align-items: center;
    top: 8%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #ffffff; 
    text-align: left;
    width: 70%;
    font-family: Mortina;
    font-size:1.8rem;
}


.testo-glossario1-1{
  position: absolute;
  align-items: center;
  font-family: ABCGinto-T;
    font-size:1rem;
    color: #ffffff; 
    text-align: left;
    padding-top: 3vh;
    top: 32%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 70%;
}

.testo-glossario2-1{
  align-items: center;
  position: absolute;
  font-family: ABCGinto-T;
    font-size:1rem;
    color: #ffffff; 
    text-align: left;
    padding-top: 3vh;
    top: 62%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 70%;
}

.testo-glossario3-1{
  align-items: center;
  position: absolute;
  font-family: ABCGinto-T;
    font-size:1rem;
    color: #ffffff; 
    text-align: left;
    padding-top: 3vh;
    top: 85%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 70%;
}
.suggerimenti-contratti{
  padding-top:10vh;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  gap: 5vh;
}

.titolo-sugg-contratti{
  font-family: Mortina;
  font-size: 1.8rem;

}

/*PAGINA DETTAGLIO SPESA*/

.titolo-illu-spesa{
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  padding-top:2vh;
  
}
.titolo-illu-spesa img{
  width:80%;
  height:auto;
}

.asterisco img{
  width:8%;
  height:auto;
  padding-top:2vh;
}
.titolo-spesa{
  font-family: Mortina;
  font-size:2.5rem;
  padding-top: -3vh;
  position: relative;
}

.intro-spesa{
  margin-right:6vw;
  margin-left:6vw;
  padding-top:2vh;
}

.intro-spesa p{
  font-family: ABCGinto-R;
  font-size: 1.1rem;
}

.spiegazione-spesa{
  padding-top:10vh;

}

.spiegazione-spesa h4{
  font-family: Mortina;
  font-size: 1.8rem;
}

.spiegazione-spesa p{
  font-family: ABCGinto-T;
  font-size: 1rem;
}

.parte-uno-spesa img{
  width:100%;
  height:auto;
}

.parte-due-spesa{
  padding-top:5vh;
  padding-bottom: 8vh;
}

.glossario-spesa{
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: #045EF0;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  width:80%;
  height:600px;
  border-radius: 20px;
  margin-left: 8vw;
}


.titolo-glossario-spesa{
  position: absolute;
  align-items: center;
    top: 8%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #ffffff; 
    text-align: left;
    width: 70%;
    font-family: Mortina;
    font-size:1.8rem;
}


.testo-glossario1-2{
  position: absolute;
  align-items: center;
  font-family: ABCGinto-T;
    font-size:1rem;
    color: #ffffff; 
    text-align: left;
    padding-top: 3vh;
    top: 25%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 70%;
}

.testo-glossario2-2{
  align-items: center;
  position: absolute;
  font-family: ABCGinto-T;
    font-size:1rem;
    color: #ffffff; 
    text-align: left;
    padding-top: 3vh;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 70%;
}

.testo-glossario3-2{
  align-items: center;
  position: absolute;
  font-family: ABCGinto-T;
    font-size:1rem;
    color: #ffffff; 
    text-align: left;
    padding-top: 3vh;
    top: 76%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 70%;
}


.suggerimenti-spesa{
  padding-top:10vh;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  gap: 5vh;
}

.titolo-sugg-spesa{
  font-family: Mortina;
  font-size: 1.8rem;

}


/* SHOP PAGE*/
.shop{
  background-color: #045EF0;
  margin-left: 8vw;
  margin-right: 8vw;
  margin-top: 6vw;
}

.titolo-shop {
  font-family: Mortina;
  font-size:2.5rem;
  color: #FDFFF4;
  padding-top: 10vh;
  padding-bottom: 3vh;
}

.parte-iniziale-shop img{
width:100%;
height:auto;
border-radius: 10px;
}

.testo-inizio-shop{
  font-family: ABCGinto-T;
  font-size:1rem;
  color: #FDFFF4;
  padding-top:5vh;
}

.prezzo{
  font-family: Mortina;
  font-size: 3.5rem;
  color:#D3F674;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.quiz-button2 {
  background-color: #D3F674; 
  font-family: Mortina;
  color: #045EF0;
  font-size: 1.2rem;
  border: none;
  border-radius: 8px; 
  padding: 6px 20px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.immagine-mezzo2 img{
  padding-top:3vh;
  width:120%;
  height:auto;
  margin-left: -9vw;
  margin-right: -9vw;
}

.titolo-caratteristiche{
  font-family: Mortina;
  font-size:1.8rem;
  color: #FDFFF4;

}
.testo-caratteristiche{
  font-family: ABCGinto-T;
  font-size:1rem;
  color: #FDFFF4;
}

/* media query (text) */
@media (min-width: 376px) {}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
  

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  /*HOMEPAGE*/
.homepage{
  background-color: #045EF0;
  margin-left: 9vw;
  margin-right: 9vw;
  margin-top: 3vh;
}


.menu-toggle,
#menu-toggle {
  display: none; 
}

.burger {
  display: none;
}

.navbar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  position: fixed;
  background-color: #045EF0;
  width: 100%;
}

.container-fluid img {
  width: 10vw;
  height: 5vh;
  object-fit: contain;
  align-items: center;
}

.navbar-collapse {
  display: flex;
  justify-content: flex-end; 
  align-items: center;
  width: auto;
  position: static; 
  top: auto;
  background-color: transparent; 
  box-shadow: none; 
  opacity: 1;
  visibility: visible; 
  max-height: none; 
}

.navbar-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
  margin-left: 20vw;
  padding: 0;
}

.navbar-nav .nav-item {
  padding: 0 10px;
  align-items: center;
}

.nav-item a {
  font-family: Mortina;
  text-decoration: none;
  align-items: center;
  color: #D3F674;
  font-size: 1.6rem;
  display: block;
}

.domanda-iniziale{
  font-family: Mortina;
  font-size:9.3rem;
  color: #ffffff;
  text-align: center;
  line-height: 100%;
  padding-top: 12vh;
  padding-bottom: 10vh;
}
.risposte {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap:40vw;

}
.risposte h3{
  font-family: Mortina;
  font-size:4.6rem;
  color: #ffffff;
  justify-content: center;
}

#testo-iniziale {
  padding-top: 30vh;
  margin-left: 10vw;
  margin-right: 10vw;
}

#testo-iniziale h4 {
  font-family: Mortina;
  font-size:3.1rem;
  color: #ffffff;
}

#testo-iniziale p {
  font-family: ABCGinto-T;
  font-size:1.5rem;
  color: #ffffff;
  padding-top: 3vh;
}
.scritte-verdi{
  display: flex;
  flex-direction: row;

}
.logo h1{
  font-family: Mortina;
  font-size:4.6rem;
  color:#D3F674;
  text-align: left;
  line-height: 95%;
  padding-top: 13vh;
  padding-right: 5vw;
  margin-left: 2vw;
}
.payoff h1{
  font-family: Mortina;
  font-size:4.6rem;
  color:#D3F674;
  text-align: right;
  line-height: 95%;
  padding-top: 13vh;
  padding-bottom: 10vh;
  margin-left: 15vw;
  width: 75%;

}

.bandiere-testo{
  display: flex;
  padding-top: 10vh;
}

.bandiera-uno img{
width:30%;
height: auto;
position:absolute;
margin-left: -10vw;
margin-right: -10vw;
}

.testo-finale1{
  font-family: Mortina;
  font-size: 5rem;
  color:#ffffff;
  padding-top: 2vh;
  margin-bottom: -9vh;
  text-align:center; 
}

.testo-finale2{
  font-family: Mortina;
  font-size:9.3rem;
  color: #ffffff;
  text-align:center;
  margin-left: 33vw;
  
}

.testo-finale3{
  font-family: ABCGinto-T;
  font-size: 1.5rem;
  color:#ffffff;  
  padding-top: 5vh;
  margin-left: 10vw;
  margin-right: 10vw;
}

.bandiera-due img{
  width:30%;
  height: auto;
  margin-left: 66.5vw;
  margin-top: -70vh;
}

.coin{
  display: flex;
  flex-direction: row;
}


.disegno-coin img{
  width:100%;
  height:auto;
  margin-left: -9vw;
}

.titolo-link{
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 32vw;
  gap:2vh;
  padding-top: 50vh;
}
.testo-coin1{
  font-family: Mortina;
  font-size:4.6rem;
  padding-top: 0.3vh;
  color: #ffffff;
}
.testo-coin2{
  font-family: Mortina;
  font-size:4.6rem;
  color: #ffffff;
}
.testo-coin3{
  font-family: Mortina;
  font-size:4.6rem;
  color: #ffffff;
}

.footer{
  position: relative;
  display: flex;
  flex-direction: row;
  width: 124%;
  padding-top: 10vh;
  overflow: hidden;
  margin-left: -10vw;
  margin-right: -10vw;
}

.footer img{
  width: 124%;
  height: 600px; 
  object-fit: cover;
  object-position: top; 
  display: block;

}

.logotipo-footer{
  position: absolute;
  top:45%;
  left:5%;
  text-align: left;
  margin-left:8vw;
}
.logotipo-footer img{
  width:15%;
  height: auto;
}
.contattaci{
  position: absolute;
  top: 50%;
  left:40%;
  color: white;
  font-size: 20px;
  text-align: left;

}

.contattaci h4{
  font-family: Mortina;
  font-size:1.8rem;
  color: #000000;
}
.contattaci-testo{
  font-family: ABCGinto-T;
  font-size:1.1rem;
  color: #000000;
  width:30%;
}

.seguici{
  position: absolute;
  top: 50%;
  left: 77%;
  color: white;
  font-size: 20px;
  text-align: left;
}

.seguici h4{
  font-family: Mortina;
  font-size:1.8rem;
  color: #000000;
}
.icone {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap:10vw;
  margin-left: 8vw;
  margin-right: 8vw;
}
.icone img{
  width:50px; 
  height:auto;
}

.descrizione-corso{
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 94%;
  color: #000000;
  text-align: left;
  align-items: left;
  margin-left: 5vw;
}

.descrizione-corso p{
  font-family: ABCGinto-M;
  font-size:1rem;
  line-height: 20px;
  color: #000000;
}

.nomi{
  padding-right: 2vw;
}

.isia{
  padding-right: 2vw;
}

.anno{
  padding-right: 2vw;
}

.corso{
  padding-right: 2vw;
}

.prof{
  padding-right: 2vw;
}


/* PAGINA PROGETTO */
.progetto{
  background-color: #045EF0;
  margin-left: 9vw;
  margin-right: 9vw;
  margin-top: 3vh;
}

.titolo-progetto{
  font-family: Mortina;
  font-size: 4.6rem;
  padding-top: 12vh;
  color: #ffffff;
  margin-left: 10vw;
  margin-right: 10vw;
}

.testo-obbiettivo {
  padding-top: 6vh;
  margin-left: 10vw;
  margin-right: 10vw;
}

.testo-obbiettivo h4 {
  font-family: Mortina;
  font-size:3.1rem;
  color: #ffffff;
}

.testo-obbiettivo p {
  font-family: ABCGinto-T;
  font-size:1.5rem;
  color: #ffffff;
  padding-top: 1vh;
  padding-bottom: 10vh;
}

.scroll-container {
  display: flex;
  overflow-x: auto;  
  white-space: nowrap; 
  gap: 6vw; 
  scroll-behavior: smooth; 
  -webkit-overflow-scrolling: touch;
  margin-left: -9vw;
  margin-right: -9vw;
  padding-left: 10vw;
  padding-right: 10vw;
}

.scroll-container img {
  width: 35%; 
  height: auto;
}

.immagine-mezzo img{
  width: 122%;
  height: auto;
  margin-left: -9vw;
  margin: -9vw;
  padding-top:15vh;
  padding-bottom: 15vh;
}

.spiegazione-progetto{
  padding-top: 6vh;
  margin-left: 10vw;
  margin-right: 10vw;
}

.titolo-spiegazione {
  font-family: Mortina;
  font-size:3.1rem;
  color: #ffffff;
}

.spiegazione-progetto p{
  font-family: ABCGinto-T;
  font-size:1.5rem;
  color: #ffffff;
  padding-top:2vh;
}

.manuale{
  padding-top: 6vh;
  margin-left: 10vw;
  margin-right: 10vw;
}
.titolo-manuale{
  font-family: Mortina;
  font-size:3.1rem;
  padding-top: 10vh;
  color: #ffffff;

}
.testo-manuale{
  font-family: ABCGinto-T;
  font-size:1.5rem;
  color: #ffffff;
}

.gioco{
  padding-top: 5vh;
  margin-left: 10vw;
  margin-right: 10vw;
}

.titolo-gioco{
  font-family: Mortina;
  font-size:3.1rem;
  color: #ffffff;

}
.testo-gioco{
  font-family: ABCGinto-T;
  font-size:1.5rem;
  color: #ffffff;
}

.realtàaumentata{
  padding-top: 6vh;
  margin-left: 10vw;
  margin-right: 10vw;
}

.titolo-realtà{
  font-family: Mortina;
  font-size:3.1rem;
  padding-top: 10vh;
  color: #ffffff;

}
.testo-realtà{
  font-family: ABCGinto-T;
  font-size:1.5rem;
  color: #ffffff;
}

.foto-campagna{
  display: flex;
  flex-direction: column;
  gap:4vh;
  padding-top: 10vh;
  margin-left: 10vw;
  margin-right: 10vw;
}

.foto-campagna img{
  width:100%;
  height:auto;
  border-radius: 10px;
}

.testo-chisiamo {
  padding-top: 10vh;
    margin-left: 10vw;
    margin-right: 10vw;
  
}

.testo-chisiamo h4 {
  font-family: Mortina;
  font-size:3.1rem;
  color: #ffffff;
}

.testo-chisiamo p {
  font-family: ABCGinto-T;
  font-size:1.5rem;
  color: #ffffff;
  padding-top: 5vh;
}

.noialtre{
  display:flex;
  align-items: center;
  justify-content: center;
  margin-left: -10vw;
    margin-right: -10vw;

}
.noialtre img{
  display: flex;
  flex-direction: column;
  height:auto;
  width:80%;
  padding-top: 5vh;
}

.testo-chisiamo h6{
  font-family: Mortina;
  font-size: 1.8rem;
  color:#ffffff;
  text-align:left;
  align-items: center;

} 


/*QUIZZONE*/

.quizzone{
  background-color: #FDFFF4;
  margin-left: 9vw;
  margin-right: 9vw;
  margin-top: 3vh;

}

.titolo-quizpage{
  font-family: Mortina;
  font-size:4.6rem;
  color: #000000;
  padding-bottom: 4vh;
  padding-top: 12vh;
  margin-left: 10vw;
  margin-right: 10vw;

}
.testo-quizzone{
  font-family: ABCGinto-T;
  font-size:1.5rem;
  color: #000000;
  margin-left: 10vw;
  margin-right: 10vw;

}

.quiz-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 3vh; 
}

.quiz-button {
  background-color: #045EF0; 
  font-family: Mortina;
  color: white;
  font-size: 1.8rem;
  border: none;
  border-radius: 8px; 
  padding: 10px 30px;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease-in-out;
}


.statistiche {
  padding-top:15vh;
  text-align: left;
  margin-top: 20px;

}

.statistiche h4 {
  font-family: Mortina;
  font-size: 3.1rem;
  color: #000000;
  margin-left: 10vw;
  margin-right: 10vw;
}

.carousel {
  width: 108%; 
  margin-left: -5vw;  
  margin-right: -5vw;  
  padding-top: 5vh;
}

.carousel-inner {
  position: relative;
}

.carousel-item {
  padding: 0 20px; 
}

.personaggio img{
  width: 105%;
}

.contenuto {
  position: absolute;
  top: 51%; 
  left: 52%;
  transform: translate(-50%, -50%);
  width: 75%; 
  color: #ffffff;
}

.contenuto h2 {
  font-family:Mortina;
  font-size:3.5rem;
  text-align: center;
  color: #045EF0;
}

.contenuto h4 {
  font-family:Mortina;
  font-size:1.8rem;
  text-align: center;
  line-height: 30px;
  padding-top: 3vh;
  margin-left: 2vw;
  margin-right: 2vw;
}

.carousel-control-prev,
.carousel-control-next {
  width: 50%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1); }
.freccia2{
  width: 40%;
  height: auto;
  padding-top: 85vh;
  margin-left: 15vw;
  margin-right: 15vw;
}

/*QUIZ PERSOANGGIO*/

.quiz-personaggio{
  background-color: #045EF0;
  margin-left: 9vw;
  margin-right: 9vw;
  margin-top: 3vh;
}
.titolo-quizzone{
  font-family: Mortina;
  font-size:4.6rem;
  color: #ffffff;
  padding-bottom: 4vh;
  padding-top: 12vh;
  margin-left: 10vw;
  margin-right: 10vw;

}
#quiz-container h3{
  font-family: Mortina;
  font-size:2.5rem;
  color: #ffffff;
}

.question{
  padding-top: 10vh;
  margin-left: 10vw;
  margin-right: 10vw;
}
.question h5{
  font-family: Mortina;
  font-size:1.8rem;
  color: #ffffff;

}
.question label{
  font-family: ABCGinto-T;
  font-size:1.5rem;
  color: #ffffff;
}

.button-container {
  display: flex;
  justify-content: center; 
  width: 100%; 
  padding-top: 10vh;
}

#submit-btn {
  font-family: Mortina;
  font-size: 1.8rem;
  background-color: #ffffff;
  width: 430px;
  height: 50px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}

#result{
  display: flex;
  flex-direction: row;
  text-align: left;
  padding-top:10vh;
}

#result-texts{
  display: flex;
  flex-direction: column;
  width: 80%;
  margin-left: 10vw;
  margin-right: 10vw;

}
#result-text{
  display: flex;
  font-family: Mortina;
  font-size: 3.1rem;
  color: #ffffff;
  padding-top:5vh; 
  line-height: 60px;
  margin-left:10vw;
}

#result-text2 {
  display: flex;
  font-family: ABCGinto-T; 
  font-size: 1.5rem; 
  color: #ffffff; 
  line-height: 25px;
  width:60%;
  margin-left:10vw;
}
#result-image{
  display: none;
  height:auto;
  width:30%;
  margin-right: 11vw;
}


#result-image [src]{
  display: block;
}

/*TEORIA*/
.teoria{
  background-color: #FDFFF4;
  margin-left: 9vw;
  margin-right: 9vw;
  margin-top: 3vh;
  
}

.titolo-teoria {
  font-family: Mortina;
  font-size:4.6rem;
  color: #000000;
  padding-top: 12vh;
  padding-bottom: 4vh;
  margin-left: 12vw;
  margin-right: 12vw;
}
.titolo-filtri {
  max-width: 700px;
  margin: auto;
}

h6 {
  font-family: Mortina;
  font-size:1.8rem;
  color: #000000;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.filter {
  display: inline-block;
  cursor: pointer;
  padding: 5px 12px;
  font-family: Mortina;
  font-size: 1.1rem;
  border-radius: 8px;
  color: #ffffff;
  transition: transform 0.2s ease-in-out, background-color 0.2s;
}

.filter.active {
  transform: scale(1.2);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0.8;
}

.filter[data-categoria="finanza"] { background-color: #dba6a6; }
.filter[data-categoria="lavoro"] { background-color: #c2a3ff; }
.filter[data-categoria="domestica"] { background-color: #1e5aff; }
.filter[data-categoria="emergenza"] { background-color: #d45530; }
.filter[data-categoria="tips"] { background-color: #d4f060; }

[data-categoria] {
  display: block; 
}

.argomenti{
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 2vw;
  margin-right:-9vw;
  text-align: center;
  padding-top:10vh;
  gap: 0vw;
}
.link-argomenti{
  text-decoration: none;
  width:30%;
}

.titolo-argomento{
  font-family: Mortina;
  font-size:2.5rem;
  color: #000000;
  position: relative; 
  margin-top: -1vh; 
  line-height: 35px;
}

.assicurazione{
  width:95%;
  height: auto;
}
.assicurazione img{
  width:95%;
  height: auto;
}
.assistenza{
  width:30%;
  height: auto;
}

.assistenza img{
  width:80%;
  height: auto;
}
.bollette{
  width:30%;
  height:auto;
}

.bollette img{
  width:80%;
  height:auto;
}

.cartedipagamento{
  width:30%;
  height:auto;
}

.cartedipagamento img{
  width:80%;
  height:auto;
}

.colloqui{
  width:30%;
  height:auto;
}

.colloqui img{
  width:80%;
  height:auto;
}

.contocorrente{
  width:30%;
  height:auto;
}

.contocorrente img{
  width:80%;
  height:auto;
}

.contrattiretribuzione{
  width:100%;
  height:auto;
}

.contrattiretribuzione img{
  width:80%;
  height:auto;
}
.contrattitransizione{
  width:30%;
  height:auto;
}
.contrattitransizione img{
  width:80%;
  height:auto;
}

.contributi{
  width:30%;
  height:auto;
}
.contributi img{
  width:80%;
  height:auto;
}

.creditoprestito{
  width:30%;
  height:auto;
}
.creditoprestito img{
  width:80%;
  height:auto;
}

.dichiarazione{
  width:30%;
  height:auto;
}
.dichiarazione img{
  width:80%;
  height:auto;
}

.fattura{
  width:30%;
  height:auto;
}
.fattura img{
  width:80%;
  height:auto;
}
.gestionerisparmio{
  width:30%;
  height:auto;
}
.gestionerisparmio img{
  width:80%;
  height:auto;
}

.incidenti{
  width:30%;
  height:auto;
}
.incidenti img{
  width:80%;
  height:auto;
}
.isee{
  width:30%;
  height:auto;
}
.isee img{
  width:80%;
  height:auto;
}

.guasti{
  width:30%;
  height:auto;
}
.guasti img{
  width:80%;
  height:auto;
}

.mutuo{
  width:30%;
  height:auto;
}
.mutuo img{
  width:80%;
  height:auto;
}

.partitaiva{
  width:30%;
  height:auto;
}
.partitaiva img{
  width:80%;
  height:auto;
}

.pulizia{
  width:30%;
  height:auto;
}
.pulizia img{
  width:80%;
  height:auto;
}

.spesa{
  width:100%;
  height:auto;
}
.spesa img{
  width:80%;
  height:auto;
}

.tributi{
  width:30%;
  height:auto;
}
.tributi img{
  width:80%;
  height:auto;
}

.asterisco{
  display: flex;
  justify-content: center;
  margin-top: 1px;
}

.asterisco{
  width:100%;
  height:auto;
}



/* PAGINA DETTAGLIO TEORIA ASSICURAZIONE*/

.argomento-assicurazione{
  background-color: #FDFFF4;
  margin-left: 9vw;
  margin-right: 9vw;
  margin-top: 3vh;
}
.titolo-illu-assicurazione{
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  align-items:center;
  padding-top:0vh;
}
.titolo-illu-assicurazione img{
  width:65%;
  height:auto;
}

.titolo-assicurazione{
  font-family: Mortina;
  font-size:4.6rem;
  line-height:70px;
  position: relative;
}

.asterisco img{
  width:5%;
  height:auto;
  padding-top:2vh;
}

.intro-assicurazione{
  margin-right:20vw;
  margin-left:20vw;
  padding-top:5vh;
}

.intro-assicurazione p{
  font-family: ABCGinto-R;
  font-size: 1.5rem;
}

.spiegazione-assicurazione{
  padding-top:10vh;
  margin-right:12vw;
  margin-left:12vw;

}

.spiegazione-assicurazione h4{
  font-family: Mortina;
  font-size: 3.1rem;
}

.spiegazione-assicurazione p{
  font-family: ABCGinto-T;
  font-size: 1.2rem;
}

.opzioni-uno{
  display: flex;
  flex-direction: row;
  gap:2vw;
}

.opzioni-uno.uno{
  display: flex;
  flex-direction: row;
}
.opzioni-uno img{
  width:100%;
  height:auto;
}

.parte-due-assicurazione{
padding-top:5vh;
margin-right:12vw;
margin-left:12vw;
}

.parte-due-assicurazione p{
  font-family: ABCGinto-T;
  font-size: 1.2rem;
  }

  .parte-due-assicurazione h4{
    font-family: Mortina;
      font-size: 3.1rem;
    }

.opzioni-due{
  display: flex;
  flex-direction: row;
  margin-right:6vw;
  margin-left:6vw;
  gap:2vw;
}
.opzioni-due img{
  width:100%;
  height:auto;
}
.parte-tre-assicurazione p{
font-family: ABCGinto-T;
  font-size: 1.2rem;
}
.parte-tre-assicurazione h4{
  font-family: Mortina;
    font-size: 3.1rem;
  }

.parte-tre-assicurazione{
  padding-top:5vh;
  margin-right:12vw;
  margin-left:12vw;
  padding-bottom: 6vh;
  }

.parolebold{
  font-family: ABCGinto-M;
    font-size:1.2rem;
    line-height: 17px;

}
.suggerimenti-assicurazione {
  text-align: center;
  padding-top: 1vh;
  background-color: #FDFFF4; 
}

.titolo-sugg-assicurazione {
  font-family: Mortina;
  font-size: 3.1rem;
  margin-bottom: 3vh;
  text-transform: uppercase; 
}

.suggerimenti {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3vw;
  flex-wrap: nowrap;
  margin: 0 auto;
  width: 60vw;
}

.suggerimenti > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  width: 18vw;
  
}

.suggerimenti img {
  width: 100%; 
  max-width: 180px; 
  height: auto;
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.2)); 
}

.titolo-argomento {
  font-family: Mortina;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 28px;
  color: black;
}


/* PAGINA DETTAGLIO TEORIA CONTRATTI*/

.titolo-illu-contratti{
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding-top:0vh;
  
}
.titolo-illu-contratti img{
  width:63%;
  height:auto;
  text-align: center;
  justify-content: center;
  align-items: center;

}

.asterisco img{
  width:5%;
  height:auto;
  padding-top:2vh;
}
.titolo-contratti{
  font-family: Mortina;
  font-size:4.6rem;
  line-height:70px;
  padding-top: -3vh;
  position: relative;
}

.intro-contratti{
  margin-right:20vw;
  margin-left:20vw;
  padding-top:2vh;
}

.intro-contratti p{
  font-family: ABCGinto-R;
  font-size: 1.5rem;
}

.spiegazione-contratti{
  padding-top:10vh;
  margin-right:12vw;
  margin-left:12vw;

}

.spiegazione-contratti h4{
  font-family: Mortina;
  font-size: 3.1rem;
}

.spiegazione-contratti p{
  font-family: ABCGinto-T;
  font-size: 1.2rem;
}

.parte-uno-contratti img{
  width:100%;
  height:auto;
  
}

.parte-due-contratti{
  padding-top:10vh;
  padding-bottom: 15vh;

}

.titolo-glossario-contratti{
  position: absolute;
}

.suggerimenti-contratti {
  text-align: center;
  padding-top: 1vh;
  background-color: #FDFFF4; 
}

.titolo-sugg-contratti {
  font-family: Mortina;
  font-size: 3.1rem;
  margin-bottom: 3vh;
  margin-left: 12vw;
  text-transform: uppercase; 
}

/*PAGINA DETTAGLIO SPESA*/

.titolo-illu-spesa{
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding-top:2vh;
  
}
.titolo-illu-spesa img{
  width:66%;
  height:auto;
}

.asterisco img{
  width:5%;
  height:auto;
  padding-top:2vh;
}
.titolo-spesa{
  font-family: Mortina;
  font-size:4.6rem;
  padding-top: -3vh;
  position: relative;
}

.intro-spesa{
  margin-right:20vw;
  margin-left:20vw;
  padding-top:2vh;
}

.intro-spesa p{
  font-family: ABCGinto-R;
  font-size: 1.5rem;
}

.spiegazione-spesa{
  padding-top:10vh;
  margin-right:12vw;
  margin-left:12vw;
}

.spiegazione-spesa h4{
  font-family: Mortina;
  font-size: 3.1rem;
}

.spiegazione-spesa p{
  font-family: ABCGinto-T;
  font-size: 1.5rem;
}

.parte-uno-spesa img{
  width:100%;
  height:auto;
}
.parte-uno-spesa p{
  font-family: ABCGinto-T;
  font-size: 1.2rem;
}

.parte-due-spesa{
  padding-top:3vh;
}
.parte-due-spesa p{
  font-family: ABCGinto-T;
  font-size: 1.2rem;
}

.suggerimenti-spesa {
  text-align: center;
  padding-top: 1vh;
  background-color: #FDFFF4; 

.titolo-sugg-spesa {
  font-family: Mortina;
  font-size: 3.1rem;
  margin-bottom: 3vh;
  margin-left: 12vw;
  text-transform: uppercase; 
}

/* SHOP PAGE*/

.shop{
  background-color: #045EF0;
  margin-left: 9vw;
  margin-right: 9vw;
  margin-top: 3vh;
}

.titolo-shop {
  font-family: Mortina;
  font-size:4.6rem;
  color: #FDFFF4;
  padding-top: 10vh;
  padding-bottom: 3vh;
  margin-left: 12vw;
  margin-right: 12vw;
}
.parte-iniziale-shop{
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.parte-iniziale-shop img{
width:50%;
height:auto;
border-radius: 10px;
}

.testo-inizio-shop{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-top: 0;
  padding-left:10vw;
  align-items: flex-start;
}
.testo-inizio-shop p{
  width:90%;
  font-family: ABCGinto-T;
  font-size:1.5rem;
  color: #FDFFF4;
}

.prezzo{
  font-family: Mortina;
  font-size: 4.6rem;
  color:#D3F674;
  align-items: center;
  padding-top: 13vh;
  
}

.quiz-button2 {
  background-color: #D3F674; 
  font-family: Mortina;
  color: #045EF0;
  font-size: 1.8rem;
  border: none;
  border-radius: 15px; 
  padding: 8px 30px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  text-align: center;
  margin-top: 10vh;
}

.immagine-mezzo2 img{
  padding-top:10vh;
  width:120%;
  height:auto;
  margin-left: -9vw;
  margin-right: -9vw;
}

.titolo-caratteristiche{
  font-family: Mortina;
  font-size:3.1rem;
  color: #FDFFF4;
  margin-left: 12vw;
  margin-right: 12vw;


}
.testo-caratteristiche{
  font-family: ABCGinto-T;
  font-size:1.5rem;
  color: #FDFFF4;
  margin-left: 12vw;
  margin-right: 12vw;
  padding-top: 5vh;
}

}



/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

  .suggerimenti-assicurazione{
    padding-top:10vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    gap: 2vw;
    margin-right:12vw;
    margin-left:12vw;
  }
}
}