//* -----------------------------------

   RESET


----------------------------------- */


* {


  margin: 0;


  padding: 0;


  box-sizing: border-box;



}



body {


 
        font-size: 14px;
    

  font-family: system-ui, Arial, sans-serif;

  line-height: 1.6;


  color: #333;


  background: #fafafa;

}


/* -----------------------------------

   WRAPPER

----------------------------------- */

#wrapper {



       
 width: 100%;
        padding: 10px;
    

  max-width: 1200px;

  margin: 0 auto;


  padding: 20px;

}


/* -----------------------------------


   HEADER

----------------------------------- */


header {


  margin-bottom: 20px;


}




#logobox {


  height: 80px;

  background: url('img/logo1.jpg') left center / contain no-repeat;


}



#headimg {

  height: 200px;


  background: url('img/titolologo.jpg') center / cover no-repeat;

  border-radius: 8px;

  margin-top: 15px;


}


/* -----------------------------------

   NAV


----------------------------------- */

#topnavi ul {

  list-style: none;


  display: flex;


  flex-wrap: wrap;


  gap: 12px;


  background: #f4f4f4;

  padding: 12px 16px;


  border-radius: 6px;

  justify-content: center;



}



#topnavi a {

  text-decoration: none;


  color: #333;


  font-weight: 600;


  padding: 6px 10px;


  transition: color .2s ease;



}




#topnavi a:hover,

#topnavi a[aria-current="page"] {

  color: #7a8b00;



}


/* -----------------------------------


   HERO


----------------------------------- */


.hero {


  background-size: cover;


  background-position: center;


  padding: 120px 20px;


  text-align: center;


  color: #fff;

  border-radius: 10px;

  margin-bottom: 30px;


}


.hero h1 {







  font-size: clamp(28px, 4vw, 42px);







  margin-bottom: 10px;







}



.hero p {







  font-size: 18px;







  margin-bottom: 20px;







}


/* -----------------------------------


   BUTTON


----------------------------------- */



.btn {







  display: inline-block;







  padding: 12px 24px;







  background: #c1d000;







  color: #000;







  border-radius: 6px;







  font-weight: 600;







  margin: 8px;







  transition: background .2s ease;







}



.btn:hover {







  background: #d4e200;







}


/* -----------------------------------


   CONTENT


----------------------------------- */

#content {


  background: #fff;


  padding: 25px;

  border-radius: 10px;

  border: 1px solid #eaeaea;


  box-shadow: 0 2px 6px rgba(0,0,0,0.05);



}


/* -----------------------------------


   INTRO BOX


----------------------------------- */


#indexbox {

  background: #f7f7f7;


  padding: 20px;







  border-radius: 8px;







  margin-bottom: 30px;


}




/* -----------------------------------



   GRID


----------------------------------- */

.grid {







  display: grid;







  gap: 24px;







}




.grid-3 {







  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));



}


/* -----------------------------------



   CARD


----------------------------------- */


.card {


  background: #fff;

  border: 1px solid #eaeaea;

  padding: 20px;


  border-radius: 10px;

  transition: box-shadow .2s ease;


}


.card:hover {


  box-shadow: 0 4px 12px rgba(0,0,0,0.08);


}


/* -----------------------------------


   IMMAGINI


----------------------------------- */


.responsive {

  width: 100%;

  height: auto;


  border-radius: 8px;


}



/* -----------------------------------


   FOOTER


----------------------------------- */

footer { 


  margin-top: 40px;

  background: #333;

  color: #fff;


  text-align: center;

  padding: 25px 10px;


  border-radius: 8px;


}

/* -----------------------------------
max-width: 100%;
    height: auto;

   RESPONSIVE



----------------------------------- */

@media (max-width: 768px) {


  .hero {

    padding: 80px 20px;


  }


  #content {

    padding: 18px;


  }

}


.whatsapp-float {



  position: fixed;



  bottom: 20px;



  right: 20px;



  background-color: #25D366;



  color: #fff;



  font-size: 24px;



  padding: 15px;



  border-radius: 50%;



  text-align: center;



  z-index: 999;



  text-decoration: none;



  box-shadow: 0 4px 10px rgba(0,0,0,0.3);



}


.whatsapp-float:hover {



  background-color: #20b954;



}