.container-fluid{
    max-width: 90%;
    margin: 0% auto;
    background-color: white;
}
@media (max-width: 768px) { /* Schermi piccoli */
    .container-fluid {
        max-width: 100%;
    }
}

body {
    background-color: black;
    user-select: none;
    position: relative;
}

/* 1800px massimo per le immagini grandi*/
img{
    width: 100%;
}

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

.top a{
    padding-right: 20px;
    font-size: 20px;
    margin-right: 30px;
}

a:hover{
    color:#1abc9c
}

.header a:hover{
    color:#1abc9c
}

.menu-btn {
  font-size: 24px;
  background: none;
  border: none;
  color: black;
  cursor: pointer;
}

.menu-btn:focus {
  outline: none;
}

.mobile-menu {
  display: flex;
  background-color: #d4d4d4;
  border-top: solid 2px black;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 15px;
}

.mobile-menu a {
  margin: 5px 0px;
}

.mobile-menu a:hover {
    color:#1abc9c
}

@media (min-width: 576px) {
    #mobile-menu {
        display: none !important; /* Nasconde il menu mobile quando la larghezza e > 576px */
    }
    #menu-toggle {
        display: none; /* Nasconde il pulsante del menu a panino */
    }
    .d-sm-flex {
        display: flex !important; /* Mostra il menu normale */
    }
}

.header{
    background-color: #d4d4d4;
    border-bottom: solid 2px black;
    padding: 10px;
    position: fixed;
    z-index: 10;
    width: 90%;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}
@media (max-width: 768px) { /* Schermi piccoli */
    .header {
    width: 100%;
    }
}
.header.hidden{
    transform: translateY(-100%);
}
.logo img{
    width: 100px;;
}

.header a {
    text-decoration: none;
    color: black;
}

/* INIZIO PAGINA*/
/*CITAZIONE 1*/
.citazione{
    text-align: center;
    margin: 100px auto 100px auto;
    border: solid 1px black;
    border-radius: 5px;
    padding: 20px;
}
.citazione1{
    text-align: center;
    margin: 180px auto 100px auto;
    border: solid 1px black;
    border-radius: 5px;
    padding: 20px;
}
.cit{
    margin-top: 0px;
    font-weight: 600;
    font-size: 18px;
}
.nome{
    margin-top: 0;
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 0px;
}


/*SEZIONE WHO*/
/*sezione uno*/
.sezioneuno{
    background-color: #f3f3f3;
    display: flex;
    padding: 100px 0;
}
.sezioneuno h4{
    font-size: 18px;
    font-weight: 700;
}
.sezioneuno h2 {
    font-size: 60px;
    font-weight: 800;
    margin-bottom: 20px;
}
.sezioneuno p{
    font-size: 20px;
    font-weight: 400;
    line-height: 22px;
}

/*SEZIONE WHERE*/

/*sezione swiper1*/
.swiper-container1{
    margin-top: 95px;
    padding-top: 5px;
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 95px;
    overflow: hidden;
}
.swiper-container1 h1{
    font-size: 80px;
    font-weight: 800;
}
@media (max-width: 1200px) { /* Schermi medi */
    .swiper-container1 h1 {
        font-size: 40px;
    }
}

@media (max-width: 768px) { /* Schermi piccoli */
    .swiper-container1 h1 {
        font-size: 30px;
    }
}

@media (max-width: 576px) { /* Schermi molto piccoli */
    .swiper-container1 h1 {
        font-size: 20px;
    }
}

@media (max-width: 320px) { /* Schermi ancora piu piccoli perche senno non sono contenta*/
    .swiper-container1 h1 {
        font-size: 18px;
        margin-top: -10px;
    }
}
.swiper-container1 h4{
    font-size: 18px;
    font-weight: 700;
}
.testo3{
    text-align: left;
    color: white;
    position: absolute;
    left: 0;
    top: 10%;
    z-index: 2;
    color: white;
}
@media (max-width: 576px) { /* Schermi molto piccoli */
    .testo3 {
top: 0%;    }
}
/*sezione due */
.sezionedue{
    margin-bottom: 60px;
}
.sezionedue h3{
    font-size: 30px;
    font-weight: 700;
}
.sezionedue p{
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
}

/*sezione tre */

.titolettoparagrafo1{
    font-size: 28px;
    font-weight: 600;
    margin-top: 0px;
    margin-bottom: 0px;
}
.testino1{
    font-size: 20px;
    font-weight: 400;
    margin-top: 20px;
}
.sezionetre img{
    margin-top: 40px;
}
/*SEZIONE WHEN*/
/* sezione quattro*/
.sezionequattro{
    background-color: #f3f3f3;
    padding: 100px 0;
}
.sezionequattro h4{
    font-size: 18px;
    font-weight: 700;
}
.sezionequattro p{
    font-size: 18px;
    font-weight: 400;
}

/*SEZIONEHOW*/
/*sezione cinque*/

.sezionecinque{
    text-align: center;
    margin-top: 50px;
    padding-top: 50px;
    margin-bottom: 50px;
}
.sezionecinque h4{
    font-size: 18px;
    font-weight: 700;
}
.sezionecinque h2{
    font-size: 60px;
    font-weight: 800;
    margin-top: 0px;
    margin-bottom: 0px;
}
.sezionecinque p{
    font-size: 20px;
    font-weight: 400;
}

/*sezione swiper*/
.swiper-container2{
    margin-bottom: 70px;
    overflow: hidden;
}
.titoloscuola{
    font-size: 18px;
    font-weight: 300;
}
.swiper-container2 h2{
    font-size: 80px;
    font-weight: 800;
}
@media (max-width: 1200px) { /* Schermi medi */
    .swiper-container2 h2 {
        font-size: 40px;
    }
}

@media (max-width: 768px) { /* Schermi piccoli */
    .swiper-container2 h2 {
        font-size: 30px;
    }
}

@media (max-width: 576px) { /* Schermi molto piccoli */
    .swiper-container2 h2 {
        font-size: 20px;
    }
}
.swiper-container2 h6{
    font-size: 18px;
    font-weight: 300;
}
@media (max-width: 576px) { /* Schermi molto piccoli */
    .swiper-container2 h6 {
        font-size: 16px;
        margin-top: 10%;
    }
}
@media (max-width: 320px) { /* Schermi ancora piu piccoli perche senno non sono contenta*/
    .swiper-container2 h2 {
        font-size: 18px;
        margin-top: -24px;
    }
}
/*sezione 6*/
.sezionesei{
    margin-bottom: 80px;
}
.sezionesei p{
    font-size: 20px;
}
@media (max-width: 576px) { /* Schermi molto piccoli */
    .sezionesei p {
        font-size: 18px;
    }
}
.fotouno{
    margin-top: 30px;

}
.fotodue{
    margin-top: 30px;
}

/*sezione sette*/
.sezionesette{
    background-color: #f3f3f3;
    display: flex;
    text-align: center;
    padding-top: 100px;
}

.sezionesette h6{
    margin-top: 0px;

}
.sezionesette h2{
    font-size: 60px;
    font-weight: 800;
    margin-top: 0px;
    padding-bottom: 30px;
}

/*swiper tre*/
.swipertre{
    margin-bottom: 0px
}
.mySwiper{
    z-index: 1;
    background-color: #f3f3f3;

}

/*sezione otto*/
.sezioneotto{
    text-align: center;
    align-items: center;
    margin-bottom: 100px;
    background-color: #f3f3f3;
}
.bottone{
    background-color: black;
    color: white;
    font-size: 20px;
    border: solid 3px;
    border-color: black;
    width: 200px;
    padding: 10px 10px;
    margin: 40px auto 100px auto;
    text-align: center;
    list-style: none;
    user-select: none;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
}

.bottone:active {
    transform: scale(0.95);
}
.btn-primary{
    color: white;
    background-color: black;
    all: unset;
    cursor: pointer;
}
.btn-primary:hover{
    color: #1abc9c;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    z-index: 1000;
    overflow-y: auto; /* Abilita lo scroll verticale */
}
.overlay h1{
    color: white;
    font-size: 30px;
}
/* Blocca lo scroll del sito */
.no-scroll {
    overflow: hidden;
    height: 100%; /* Garantisce che non ci siano movimenti verticali */
}
/* Galleria */
.gallery {
    position: absolute;
    display: flex;
    max-width: 1300px;
    height: auto;
    margin: 5% auto;
    flex-wrap: wrap;
}
@media (max-width: 768px) { /* Schermi molto piccoli */
    .gallery {
        margin: 15% auto;
    }
}
.gallery img {
    position: relative;
    border-radius: 8px;
    transition: transform 0.2s;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 20px;
    cursor: pointer;
    border: solid white 1px;
}
@media (max-width: 768px) { /* Schermi molto piccoli */
    .gallery img {
        margin-top: 20px;
    }
}
.immagin{
    position: relative;
    overflow: hidden;
}
.gallery img:hover {
    border-left: #1abc9c solid 2px;
    border-right: #1abc9c solid 2px;

}

/* Pulsante per chiudere */
.close-btn {
    position: absolute;
    top: 20px;
    margin-bottom: 20px;
    right: 20px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}

.overlay2 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay2 img {
    max-height: 90vh;
    max-width: 70%;
    object-fit: contain;
}

.overlay2 .navigation {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.overlay2 .prev, .overlay2 .next {
    cursor: pointer;
    font-size: 2rem;
    color: white;
    padding: 10px;
    user-select: none;
}

.overlay2 .prev:hover, .overlay2 .next:hover {
    color: #1abc9c;
}

.close-btn2 {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
}



/*sezione nove*/
.sezionenove{
    margin-bottom: 60px;
}
.sezionenove h2{
    font-size: 60px;
    font-weight: 800;
}
@media (max-width: 576px) { /* Schermi molto piccoli */
    .sezionenove h2 {
        font-size: 50px;
        margin-bottom: 50px;
    }
}
.sezionenove p{
    font-size: 18px;
    font-weight: 400;
    margin-top: -30px;
}
.immaginii{
    display: flex;
    justify-content: space-between;
}
.sezionenove img{
    width: 32%;
}

/*sezione dieci*/
.sezionedieci{
    margin-bottom: 100px;
}
.sezionedieci img{
    margin-top: 40px;
}

/*sezione undici*/
.sezioneundici{
    margin-bottom: 60px;
}
.sezioneundici h2{
    font-size: 60px;
    font-weight: 800;
}
@media (max-width: 576px) { /* Schermi molto piccoli */
    .sezioneundici h2 {
        font-size: 50px;
        margin-bottom: 50px;
    }
}
.sezioneundici p{
    font-size: 18px;
    font-weight: 400;
    margin-top: -30px;
}

/*sezione dodici*/
.sezionedodici img{
    margin-top: 40px;
}

/*sezione tredici*/
.sezionetredici{
    text-align: center;
    align-items: center;
    margin-top: 100px;
}
.sezionetredici h2{
    font-size: 60px;
    font-weight: 800;
}
@media (max-width: 576px) { /* Schermi molto piccoli */
    .sezionetredici h2 {
        font-size: 50px;
        margin-bottom: 50px;
    }
}
.sezionetredici p{
    margin-top: -30px;
    font-size: 18px;
}
@media (max-width: 576px) { /* Schermi molto piccoli */
    .sezionetredici p {
        font-size: 16px;
        margin-bottom: 0px;
    }
}

/*sezionequattordici*/
.sezionequattordici{
    margin-top: 70px;
    margin-bottom: 60px;
    
}
.sezionequattordici img{
    width: 32%;
}
.sezionela{
    display: flex;
    justify-content: space-between;
}

/*sezione quindici*/
.sezionequindici{
    margin-bottom: 100px;
}
.sezionequindici img{
    margin-top: 40px;
}

/*sezione sedici*/
.sezionesedici{
    padding-top: 80px;
    text-align: center;
    background-color: #f3f3f3;
}
.sezionesedici h2{
    font-size: 60px;
    font-weight: 800;
}
@media (max-width: 576px) { /* Schermi molto piccoli */
    .sezionesedici h2 {
        font-size: 48px;
        margin-bottom: 50px;
    }
}

/*sezione diciassette*/
.sezionediciassette{
    padding-bottom: 70px;
    background-color: #f3f3f3;
}
.sezionediciassette img{
    margin-top: 40px;
}
/*sezione diciotto*/
.sezionediciotto{
    padding-bottom: 100px;
    background-color: #f3f3f3;
}
.sezionediciotto img{
    margin-top: 40px;
}

/*sezione diciannove*/
.sezionediciannove{
    text-align: center;
    padding-top: 100px;
    margin-top: 60px;
}
.sezionediciannove h4{
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
}
.sezionediciannove h2{
    font-size: 70px;
    margin-top: 50px;
}
@media (max-width: 576px) { /* Schermi molto piccoli */
    .sezionediciannove h2 {
        font-size: 50px;
    }
}

/*sezione venti*/
.sezioneventi{
    margin-bottom: 50px;
}
.immaginiii{
    display: flex;
    justify-content: space-between;
}
.sezioneventi img {
    width: 24%;
}
.sezioneventi p{
    font-size: 20px;
}

/*sezione ventuo*/
.linea{
    align-items: center;
    height: 200px;
    width: 2px;
    background-color: #000000;
    margin-left: 50%;
    margin-bottom: 50px;
}

/*sezione ventidue*/
.sezioneventidue{
    margin-top: 0;
    text-align: center;
    font-size: 50px;
    margin-bottom: 70px;
}
.sezioneventidue h2{
    text-align: center;
    font-size: 80px;
}
@media (max-width: 576px) { /* Schermi molto piccoli */
    .sezioneventidue h2 {
        font-size: 50px;
    }
}

/*footer*/
.bottom{
    background-color: #d4d4d4;
    border-top: solid 2px ;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    padding: 5% 10% 3% 10%;
    align-items: flex-end;
    font-size: 20px;
}
@media (max-width: 768px) { /* Schermi molto piccoli */
    .bottom {
        font-size: 16px;
        padding: 5% 0;
    }
}
.biscotti{
    display: flex;
    justify-content: center;
}
.biscotti img{
    width: 16%;
}
@media (max-width: 768px) { /* Schermi molto piccoli */
    .biscotti {
        display: none;
    }
}
.elenco{
    font-size: 20px;
    text-align: right;
    line-height: 30px;
    border-right: #000000 solid 2px;
    padding-right: 30px;
}
@media (max-width: 768px) { /* Schermi molto piccoli */
    .elenco {
        font-size: 16px;
        padding-right: 10px;
        line-height: 20px;
    }
}
.contatti{
    border-left: #000000 solid 2px;
    padding-left: 30px;
}
@media (max-width: 768px) { /* Schermi molto piccoli */
    .contatti {
        font-size: 16px;
        padding-left: 10px;
        line-height: 20px;
        margin-top: 0;
    }
}
.contact img{
    width: 120%;
    margin-left: -10px;
    margin-bottom: 10px;
}
@media (max-width: 768px) { /* Schermi molto piccoli */
    .contact img{
        width: 1000%;;
        margin-bottom: 0px;
        margin-left: 10px;
    }
}
/*cose che non ricordo dove devo mettere*/