@font-face {
     font-family: Montserrat;
     src: url(fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
 }

 @font-face {
     font-family: FrederickatheGreat-Regular;
     src: url(fonts/FrederickatheGreat-Regular.ttf);
 }


 * {
     margin: 0;
     /* Rimuove il margine predefinito del browser */
     padding: 0;
     font-family: Montserrat;
     box-sizing: border-box;

 }

 /* HEADER */

 .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* allinea gli elementi al centro (verticalmente) */
     padding: 30px 40px;
     /*  padding intorno all'header */
     color: black;
     /* colore del testo */
     height: 150px;
 }

 .logo1 {
     display: block;
 }

 .logo2 {
     display: none;
 }

 /*  lista del menu */
 .menu ul {
     list-style: none;
     /* togli i punti elenco */
     display: flex;
     /* layout flexbox per disporre gli elementi (senza le voci di menu se ne vanno a centro) */

 }

 /* elementi della lista del menu */
 .menu ul li {
     margin-left: 20px;
     /* margine a sinistra di ogni elemento, per separare le voci di menu */
     padding: 35px;
 }

 /* link nel menu */
 .menu ul li a {
     color: black;
     /*colore del testo */
     text-decoration: none;
     /* toglie la sottolineatura */
     font-size: 18px;
     /* dimensione del font */
 }

 a {
     color: black;
     /*colore del testo */
     text-decoration: none;
     /* toglie la sottolineatura */
     font-size: 18px;
     /* dimensione del font */
 }

 /*  colore al passaggio del mouse sui collegamenti */
 .menu ul li a:hover {
     color: #d7d1d1;
     /* il link diventar rosso*/
 }
 .menu li a.active {
    border-bottom: 2px solid rgb(18, 16, 16);
}


 /* icona hamburger del menu */
 .menu-icon {
     display: none;
     /* nasconde l'icona (di default) */
     font-size: 28px;
     /* dimensione del font */
     cursor: pointer;
     /* cursore al passaggio del mouse diventa manina */
 }

 header {
     background-image: url('img/sfondo.jpg');
     /* Immagine di sfondo */
     background-size: cover;
     /* Dimensione dell'immagine */
     background-position: center;
     /* Posizione dell'immagine */
     width: 100%;
     /* Larghezza completa */
     height: 640px;
     /* Altezza */
 }

 .header2 {
     display: flex;
     justify-content: space-around;
 }

 .headersx {
     width: 60%;
     /* Larghezza completa */
     height: 350px;
     /* Altezza */
 }

 .headerdx {
     width: 40%;
     /* Larghezza completa */
     height: 350px;
     /* Altezza */
 }

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

 h1,
 h2,
 h3,
 p {
     margin-top: 20px;
 }

 h1 {
     font-size: 50px;
     font-family: FrederickatheGreat-Regular;
     font-weight: 400;
 }

 h2 {
     font-size: 20px;
     font-family: FrederickatheGreat-Regular;
     font-weight: 400;
 }

 h3 {
     font-size: 50px;
     font-family: FrederickatheGreat-Regular;
     font-weight: 400;
 }

 header p {
     font-size: 25px;
 }

 .questolunedì {
     display: flex;
     justify-content: space-around;
     width: 50%;
     margin: 0 auto;
     padding-top: 20px;
 }

 .pulsante {
     width: 200px;
     border: 2px solid #0f0e0f;
     color: black;
     padding: 10px 30px;
     text-align: center;
     text-decoration: none;
     border-radius: 20px;
     margin: 40px auto;
 }

 .spaghetti {
     position: absolute;
     left: -80px;
 }

 .basilico {
     position: absolute;
     top: 200px;
     left: 40px;
 }

 .basilico1 {
     position: absolute;
     top: 430px;
     right: 100px;
 }

 .farfalla {
     position: absolute;
     top: 120px;
     right: 650px;
 }

 .pomodoro {
     position: absolute;
     top: 570px;
     right: 500px;
 }

 .testocentrato {
     text-align: center;
     width: 50%;
     margin: 0 auto;
     padding: 30px 30px 50px;
 }

 .testocentrato h2 {
     font-size: 50px;
 }

 .card {
     display: flex;
     justify-content: space-around;
     text-align: center;
     margin-bottom: 30px;
     position: relative;
     flex-wrap: wrap;
 }

 .content-card {
     width: 300px;
     padding: 30px;
     margin-bottom: 20px;
 }

 .content-card img {
     border-radius: 100%;
     box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.5);
 }

 .sfondo-card {
     width: 100%;
     height: 150px;
     background-color: #e8e6a9;
     position: absolute;
     z-index: -1;
     top: 70px;
 }

 .contenitore-box {
     display: flex;
     justify-content: space-around;
     color: white;
     flex-wrap: wrap;
     margin-bottom: 30px;
 }

 .contenitore-dx,
 .contenitore-sx {
     width: 680px;
     height: 500px;
 }

 .contenitore-dx {
     background-image: url('img/piatto1.jpg');
     background-size: cover;
     background-position: center;
     padding: 40px;
     margin-bottom: 40px;
 }

 .contenitore-dx h4,
 .contenitore-sx h4 {
     font-size: 25px;
 }

 .contenitore-dx p,
 .contenitore-sx p {
     width: 300px;
     font-size: 35px;
 }




 .contenitore-sx-sopra {
     background-image: url('img/piatto2.jpg');
     /* Immagine di sfondo */
     background-size: cover;
     /* Dimensione dell'immagine */
     background-position: center;
     /* Posizione dell'immagine */

     height: 230px;
     margin-bottom: 40px;
     padding: 40px;

 }

 .contenitore-sx-sotto {
     background-image: url('img/piatto3.jpg');
     /* Immagine di sfondo */
     background-size: cover;
     /* Dimensione dell'immagine */
     background-position: center;
     /* Posizione dell'immagine */

     height: 230px;
     padding: 40px;

 }

 .container {
    text-align: center;
    margin-bottom: 40px;
}

 .contattiflex {
    display: flex;
    justify-content: space-around;  
    flex-wrap: wrap;
    padding: 30px;
   
    
 }

 footer {
     background-image: url('img/BG-footer.jpg');
     /* Immagine di sfondo */
     background-size: cover;
     /* Dimensione dell'immagine */
     background-position: center;
     /* Posizione dell'immagine */
     background-repeat: no-repeat;
     padding: 60px;
     width: 100%;
     height: 500px;
     color: white;


 }

 .content-footer {
     display: flex;
     justify-content: space-between;
     gap: 10%;


 }

 .footerino {
     width: 50%;
     padding-top: 50px;

 }


 .allinea {

     display: inline-block;
     padding-left: 10px;


 }

 .end {
     text-align: end;
     padding-right: 100px;


 }

 .end img {
     margin: 0px 5px;
 }

 .footer2 {
     display: none;
 }


@media (max-width: 950px) {
     .menu {
         display: none;
        
     }

     .menu ul {
         flex-direction: column;
         align-items: center;
         height: 100px;
     }

     .menu ul li {
         padding: 5px;
     }

     .menu-icon {
         display: block;
     }

     h1 {
         font-size: 40px;
         font-family: FrederickatheGreat-Regular;
         font-weight: 400;
     }

     h2 {
         font-size: 20px;
         font-family: FrederickatheGreat-Regular;
         font-weight: 400;
     }

     h3 {
         font-size: 25px;
         font-family: FrederickatheGreat-Regular;
         font-weight: 400;
     }

     .headerdx {
         display: none;
     }

     header p {
         font-size: 20px;
     }

     .questolunedì {
         display: flex;
         justify-content: space-around;
         width: 300px;
         margin: 0 auto;
         padding-top: 20px;
     }

     .basilico {
         position: absolute;
         top: 200px;
         left: 20px;
     }

     .farfalla {
         display: none;
     }

     .basilico1 {
         display: none;
     }

     .pomodoro {
         position: absolute;
         top: 480px;
         right: 50px;
     }

     .testocentrato {
         text-align: center;
         width: 70%;
         margin: 0 auto;
         padding: 30px 30px 50px;
     }

     .testocentrato h2 {
         font-size: 35px;
     }

     .sfondo-card {
       display: none;
    }

    .sfondo-card2
    {         
     background-color: #e8e6a9;
     width: 350px;
     border-radius: 2%;
    }

     .contenitore-dx p,
     .contenitore-sx p {
         width: 300px;
         font-size: 30px;
     }

    .contattiflex article iframe {
        display: none;
     }

     .footer2 {
         display: block;
         height: 250px;
     }

     footer {
         display: none;
     }

 }

 @media (max-width: 420px) {
     .logo2 {
         display: block;
     }

     .logo1 {
         display: none;
     }

     .menu ul li a {
         color: black;
         text-decoration: none;
         font-size: 15px;
     }
   
     h1 {
         font-size: 30px;
         font-family: FrederickatheGreat-Regular;
         font-weight: 400;
     }

     h2 {
         font-size: 15px;
         font-family: FrederickatheGreat-Regular;
         font-weight: 400;
     }

     h3 {
         font-size: 15px;
         font-family: FrederickatheGreat-Regular;
         font-weight: 400;
     }

     .questolunedì {
         display: flex;
         justify-content: space-around;
         width: 200px;
         margin: 0 auto;
         padding-top: 20px;
     }

     .basilico {
         position: absolute;
         top: 200px;
         left: 5px;
         width: 15px;
     }

     .pomodoro {
         width: 10px;
         position: absolute;
         top: 340px;
         right: 50px;
     }

     .questolunedì {
         display: block;
         margin: 0 auto;
     }

     .contenitore-dx p,
     .contenitore-sx p {
         width: 250px;
         font-size: 25px;
     }

     .footer2 p {
         font-size: 12px;
     }

     .footer2 p img {
         display: none;
     }
 }