/* Reset */
body {background-image: url('img/immagine_sfon.jpg');}

body, html{ font-family: 'Intro', Arial, Helvetica, sans-serif; line-height: 1; font-size: 16px; box-sizing: border-box;margin: 0;padding: 0;}*,*:before,*:after{ box-sizing: border-box; }h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0 0 1rem 0;padding: 0;}ol,ul{padding-left: 20px;line-height: 1.5;}img{height: auto;}h1{font-size: 4rem;} h2{font-size: 3rem;} h3{font-size: 2rem;} h4{font-size: 1rem;} h5{font-size: 0.8rem;} h6{font-size: 0.6rem;}a{text-decoration:none}

:root {--background-body: #f9f8e6;}

*,*:before,*:after {box-sizing: border-box;}

h1,h2,h3,h4,h5,h6,p,ol,ul {margin: 0 0 1rem 0; padding: 0;}
ol,ul {padding-left: 20px; line-height: 1.5;}
img {height: auto;}
h1 {font-size: 4rem;}
h2 {font-size: 3rem;}
h3 {font-size: 2rem;}
h4 {font-size: 1rem;}
h5 {font-size: 0.8rem;}
h6 {font-size: 0.6rem;}
a {text-decoration: none;}
p {font-size: 20px; line-height: 1.4;}

.container{overflow: hidden;}
/* button */
.button {background: #5d6d8f; display: inline-block; padding: 15px 20px; color: #fff;}
.button:hover {background: #f1bc57;}

/*Prima pagina - header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10% 15px 10%;
}

.logo {
    max-width: 250px; /* Modifica la larghezza massima dell'immagine secondo le tue preferenze */
    max-height: 250px; /* Modifica l'altezza massima dell'immagine secondo le tue preferenze */
}

.menu {padding: 0;}
.menu ul {padding: 0; margin: 0;list-style: none;}
.menu li {display: inline-block;position: relative; /* Necessario per posizionare i sottomenu */}
.menu a {padding: 15px 20px; display: block; color: #6b6968; font-weight: bold; text-align: left;}

/* Cambia i link principali in inline-block */
.menu > ul > li {display: inline-block;}

/* Stile per i sottomenu */
.submenu {display: none;position: absolute;top: 100%;left: 0;min-width: 150px;background-color: #f9f8e6;z-index: 1000;list-style: none;padding: 0;margin: 0;}
.submenu li {display: block;}
.submenu li a {padding: 10px 15px;font-size: 0.9em; /* Riduce la dimensione del testo nei sottomenu */}


/* Mostra il sottomenu quando si passa sopra l'elemento principale */
.menu li:hover > .submenu {display: block;}


.hamburger {display: none;} 

.home-link {text-align: center;width: 100%;padding: 3% 10%;color: #6b6968;}


.pagina1 {
    margin: 0;
    padding: 0;
    background-color: #f1bc57;
}
.content {
    max-width: 750px;
    margin: 0 auto;
    padding: 50px;
    color: #646263;
    border-radius: 5%;
}

.main-carousel img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 5%;
    overflow: hidden;
}


/* hero */
.hero {margin: 0;padding: 0;display: flex;padding: 0 10%;}
.hero__text {width: 80%;padding: 0 0;color: #646263;}
.hero__img {width: 40%;}


/* Cover */
.cover {
    height: 60vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, rgba(7, 69, 47, 0.8) 0%, rgba(7, 69, 47, 0.8) 100%), url(4.jpg) no-repeat center center;
    background-size: cover;
}

.cover__text {
    text-align: left;
    max-width: 900px;
    color: #6b6968;
}


/*.container{
    border: 1px solid red;
    display: flex;
    justify-: space-between;
    align-items: center;
    background: #646263;
}*/
.item{
    background: #646263;
    padding: 10px;
}

/* Footer */
.footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 7% 20%;
    background-color: #646263;
}

.logoFooter {
    width: 100%; /* Riduci la larghezza dell'immagine al 25% */
    height: auto; /* Imposta l'altezza in base alla larghezza per mantenere le proporzioni originali */
}

.col-left {text-align: left;}
.col-center {text-align: center;}
.col-right {text-align: right;}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.social-icons-home {display: flex;justify-content: right;align-items: center;padding: 10px;}
.social-icons-home a {margin: 0 10px;display: flex;align-items: center;text-decoration: none;}
.social-icons-home a i {font-size: 1.5em;color: #333;}

.social-icons a {margin: 0 10px;}
.social-icons img {width: 80%;height: auto;margin-right: 0;}
.social-icons a i {font-size: 1.5em;color: #333;}

.flex{display: flex;justify-content: space-between;padding: 20px;}
.co1, .co2, .co3 {min-width: 100px;color: #999694;}

/* Aggiungi una riga sotto i tre element */
.text-align{text-align: center;color: #fff;}

/* utilities */
.img-res {
    height: auto; /* L'altezza sarà regolata automaticamente in base alla larghezza per mantenere le proporzioni */
    width: 100%; /* Larghezza al 100% del contenitore */
    border-radius: 20px;/* Bordi arrotondati */
}

.grid{display: flex;padding: 0 10%;flex-wrap: wrap;margin: 0;align-items: flex-start;}
.grid-orario{background-color: #f1bc57;}
.grid-antiorario{background-color:#f9f8e6;}

/* Il padding è lo spazio vuoto all'interno di un elemento HTML tra il contenuto di quell'elemento e il suo bordo. */
/* Quando si applica padding-top, si aggiunge uno spazio vuoto sopra al contenuto dell'elemento. */
.pt-1 {padding-top: 10px;}
.pt-2 {padding-top: 30px;}
.pt-3 {padding-top: 60px;}

/* Riempimento della classe */ 
.pb-1 {padding-bottom: 10px;}
.pb-2 {padding-bottom: 30px;}
.pb-3 {padding-bottom: 60px;}

/* Indica la misura in cui viene riempito, verticalmente ed orizzontalmente, un contenitare */ 
.col-25 {width: 25%;padding: 10% 20px;}
.col-30 {width: 30%;padding: 10% 20px;}
.col-33 {
    width: 33%; /* Imposta la larghezza per 3 colonne con un po' di margine */
    padding: 0 20px;
    box-sizing: border-box; /* Include padding nel calcolo della larghezza */
    text-align: center; /* Centra il testo all'interno della colonna */
}

.col-33 img {
    width: 100%;
    height: auto; /* Mantiene le proporzioni dell'immagine */
    border-radius: 10px; /* Bordo arrotondato */
}
.col-40 {width: 40%;padding: 10% 20px;}
.col-50 {width: 50%;padding: 10% 20px;}

.col-60 {width: 60%;padding: 10% 20px;}
.col-100 {width: 100%;padding: 10% 20px;}

/*Terza Pagina*/

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 10px solid #ccc;
    border-radius: 18px;
}

.videoModul{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.iframe{border: 50px solid #ccc; border-radius: 18px;}

.pagina2 {
    margin: 0;
    padding: 0;    
    padding: 0 0;
    background-color: #f9f8e6;
}

.vid{
    display: flex;
    padding: 50px 20%;
}

.contentVideo{
    width: 50%;
    padding: 5% 5%;
    color:#646263;
}
.TestVideo{
    flex: 1; /* La parte di testo occuperà lo spazio disponibile */
    margin-right: 20px; /* Spazio tra il testo e il video */
}


.iframe {
    border: 1px solid #ccc;
    border-radius: 8px;
}


/* Quarta Pagina */
.central {    
    display: flex;
    background-color: #f1bc57;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2% 5%x;
}

.sezione1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #646263;
    padding: 10px; 
}

.sezione2 {
    background: #646263;
    padding: 10px;
    display: flex;
    flex-direction: column; /* Ensure vertical layout for smaller screens */
    align-items: center;    /* Center items in the column */
    text-align: center;     /* Ensure text is centered */
}

.footer-text {
    color: #999694; /* Grigio chiaro */
}


.text_center{text-align: center;}

.card {
    display: block;
    width: 100%;
    position: relative;
}

.card__text {
    bottom: 0px;
    left: 10px;
    padding: 5px;
    color: #646263;
    text-align: center;
}

.color{
    background-color: #f1bc57;
}


.media {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centratura orizzontale */
}



.image-container {
    background-color: #333333;
    display: inline-block; /* Per mantenere le dimensioni del contenitore basate sull'immagine */
    width: 30px;
    height: 30px;
}

.image-container img {
    display: block; /* Rimuove eventuali spazi vuoti intorno all'immagine */
}

.linea-testo {
    font-size: 14px; /* Imposta la dimensione del carattere più piccola */
    margin-top: 0; /* Spazio tra il footer e la linea di testo */
    padding-top: 0; /* Spazio di riempimento sopra la linea di testo */
    text-align: center;
    background: #646263;
    color: #999694;
}

.contact{
    font-size: 12px;
    color: #fff;
    background: #646263;
    padding: 10px;
}

.whatsapp-button {
    display: none;
}

@media (max-width: 768px) {
    .whatsapp-button {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        background-color: #25D366; /* Colore di sfondo verde */
        border-radius: 50%; /* Bordo arrotondato per renderlo circolare */
    }
    .whatsapp-button img {
        width: 35px; /* Imposta la larghezza dell'icona WhatsApp */
        height: auto; /* Imposta l'altezza automaticamente per mantenere le proporzioni */
        display: block; /* Rimuove gli spazi vuoti sotto l'immagine */
        border-radius: 50%; /* Bordo arrotondato */
    }
}

    
@media (max-width: 768px) {
    .header {padding-left: 10%; padding-right: 10%;}
    .menu {background: #f9f8e6; position: absolute; top: 100px; right: 100%; width: 100%;transition: all 0.5s cubic-bezier(.215, .61, .355, 1); }
    .menu li {width: 100%;}
    .hero{flex-wrap: wrap;}


    .open .menu {right: 0;}

    .hamburger {display: block;height: 25px;width: 30px;position: absolute;top: 40px;right: 20px;}
    .hamburger span{display: block;top: 15px;position: absolute;width: 30px;height: 3px;background-color: #000;}
    
    .grid{display: flex;padding: 0 10%;flex-wrap: wrap;margin: 0;justify-content: space-between;}
    .grid-orario{background-color: #f1bc57;}
    .grid-antiorario{background-color:#f9f8e6;}

    .col-50 {width: 50%;padding: 10% 20px;}
    .col-100 {width: 100%;padding: 10% 20px;}

    .img-res {width: 90%;}

    .hamburger span {display: block; top: 0px; position: absolute; width: 30px; height: 3px; background: #000;}
    .hamburger span:nth-child(1) {margin-top: 6px;}
    .hamburger span:nth-child(2) {margin-top: -6px;}

    /* Nascondi le icone dei social network nell'header */
    .social-icons-home {display: none;}
}


@media (max-width: 1100px) {
    .header {padding-left: 10%; padding-right: 10%;}
    .menu {background: #f9f8e6; position: absolute; top: 100px; right: 100%; width: 100%;transition: all 0.5s cubic-bezier(.215, .61, .355, 1); }
    .menu li {width: 100%;}
    .hero{flex-wrap: wrap;}


    .open .menu {right: 0;}

    .hamburger {display: block;height: 25px;width: 30px;position: absolute;top: 40px;right: 20px;}
    .hamburger span{display: block;top: 15px;position: absolute;width: 30px;height: 3px;background-color: #000;}
    
    .grid{display: flex;padding: 0 10%;flex-wrap: wrap;margin: 0;justify-content: space-between;}
    .grid-orario{background-color: #f1bc57;}
    .grid-antiorario{background-color:#f9f8e6;}

    .col-50 {width: 50%;padding: 10% 20px;}
    .col-100 {width: 100%;padding: 10% 20px;}

    .img-res {width: 90%;}

    .hamburger span {display: block; top: 0px; position: absolute; width: 30px; height: 3px; background: #000;}
    .hamburger span:nth-child(1) {margin-top: 6px;}
    .hamburger span:nth-child(2) {margin-top: -6px;}

    /* Nascondi le icone dei social network nell'header */
    .social-icons-home {display: none;}
}



@media (max-width: 768px) {    
    
    .videoModul {
        width: 90%; /* Centratura orizzontale */
    }
    
}

@media (max-width: 768px) {
    .sezione1 {flex-direction: column;}
    .social-icons{justify-content: center;} /* Ensure social icons are centered on small screens */
    
   

    .reverse{flex-direction: column-reverse;}
}

@media (max-width: 1074px) {
    .sezione1 {flex-direction: column;}
    .social-icons{justify-content: center;} /* Ensure social icons are centered on small screens */
    
    .col-50{width: 100%;}

    .reverse{flex-direction: column-reverse;}
}

@media (max-width: 767px) {
    .sezione1 {flex-direction: column;}
    .social-icons{justify-content: center;} /* Ensure social icons are centered on small screens */

   
    .reverse{flex-direction: column-reverse;}
}

/* prova */

.central {    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #f1bc57;
    padding: 2% 5%;
}

/* Stile per il contenuto centrale */
.home-link {
    text-align: left;
    width: 100%;
    padding: 5% 0;
    color: #6b6968;
}

.homeLink {
    text-align: left;
    width: 100%;
    padding: 5% 0;
    color: #6b6968;
}

.homeLink img {
    width: 32px; /* Dimensioni dell'icona */
    height: 32px;
    margin: 10px; /* Aggiungi il margine di 10px */
}

/* Stile per le colonne */
.col-33 {
    width: 32%;
    margin-bottom: 20px;
}

.card {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s;
}

.card:hover {
    transform: scale(1.05);
}

.card img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Media query per schermi più piccoli */
@media (max-width: 768px) {
    .central {flex-direction: column;align-items: center;}
    .col-33 {width: 100%;} /* Rendiamo ogni colonna a piena larghezza */
    .home-link {padding: 10px;}
}