/* Reset e stili di base */



* {



  margin: 0;



  padding: 0;



  box-sizing: border-box;



  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;







}







html,



body {







  height: 100%;



  overflow-x: hidden;



  /* Prevent horizontal scrolling */



}







body {



  background-image: url('sfondocarta.jpg');



  /* Sostituisci con il percorso dell'immagine */



  background-size: cover;



  /* L'immagine copre tutto il div */



  background-position: center;



  /* L'immagine è centrata */



  background-repeat: no-repeat;



  /* L'immagine non si ripete */



  font-family: Arial, sans-serif;



  line-height: 1.6;



  color: #333;



  display: flex;



  flex-direction: column;



  padding-left: 5px;



  padding-right: 5px;



  min-height: 100vh;



  /* Ensure the body takes up the full viewport height */



}







/* Container */



#div1 {



  display: flex;



  justify-content: space-between;



  align-items: center;



  padding: 10px;



  width: 100%;



  position: fixed;



  flex-wrap: nowrap;



  top: 0;



  left: 0;



  z-index: 2;







}







.logo {



  align-items: left;



  width: 20%;



  opacity: 0.5;



}







.logo img {







  height: auto;



}







.button-container {



  list-style: none;



  display: flex;



  justify-content: flex-end;



  flex-grow: 1;



  margin-right: 20px;



  gap: 20px;



  background-color: hsla(213, 7%, 76%, 0.1);



  padding: 10px 20px;



  border-radius: 5px;



}







.button-container a {



  text-transform: uppercase;



  color: rgb(15, 15, 15);



  text-decoration: none;



  padding: 0px 20px;



  border-radius: 5px;



  font-size: 26px;



  text-align: center;



  display: inline-block;



}







#scrivi {



  background-color: rgb(0, 255, 30);



}







.button-container a:hover {



  background-color: gray;



  color: white;



}







#chi-siamo {



  font-size: 1.2rem;



  text-align: center;



  background-color: #f7f7f7;



  /* Set background to white */



  padding-left: 15px;



  padding-right: 15px;



}







/* Header e Navbar */



header {



  background: #fff;



  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);



  position: fixed;



  width: 100%;



  top: 0;



  z-index: 100;



  padding-left: -5px;



  margin-left: -5px;



  margin-right: 0;



}







.header-container {



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 15px 0;



}







.logo a {



  font-family: 'Lucida Grande", Verdana, sans-serif', cursive;



  text-decoration: none;



  font-size: 1.5rem;



  font-weight: bold;



  color: #333;



}







/* Navbar */



nav ul {



  display: flex;



  list-style: none;



}







nav ul li {



  margin-left: 20px;



}







nav ul li a {



  text-decoration: none;



  color: #333;



  transition: color 0.3s ease;



}







nav ul li a:hover {



  color: #007BFF;



}







/* Mobile Menu Toggle */



.menu-toggle {



  display: none;



  flex-direction: column;



  cursor: pointer;



}







.menu-toggle .bar {



  height: 3px;



  width: 25px;



  background: #333;



  margin: 5px 0;



}







/* Hide hamburger icon when menu is open */



.menu-toggle.active {



  display: none;



}







/* Hero Section */



.hero {



  background: url('hero-bg.jpg') no-repeat center center/cover;



  height: 100vh;



  display: flex;



  justify-content: center;



  align-items: center;



  color: #fff;



  text-align: center;



  padding-top: 70px;



  /* per compensare l'altezza del header */



}







.hero h1 {



  font-size: 3rem;



  margin-bottom: 20px;



  color: black;



}







.hero p {



  font-size: 1.2rem;



  margin-bottom: -70px;



  color: black;



}







.sotto {



  display: flex;



  justify-content: center;



  align-items: center;



  /* padding: 20px 0; */



}







.present video {



  justify-content: center;



  align-items: center;



  object-fit: cover;



  /* Il video si adatta e copre tutta l'area */



  width: 90%;



  height: 80%;



  border: none;



}







/* Make .present a positioning context for the audio button */



.present {



  position: relative;



}







/* Audio toggle button (muted / unmuted) */



.audio-toggle {



  position: absolute;



  right: 12px;



  bottom: 12px;



  background: rgba(0, 0, 0, 0.5);



  color: #fff;



  border: none;



  padding: 8px 10px;



  border-radius: 6px;



  cursor: pointer;



  font-size: 18px;



  line-height: 1;



  display: inline-flex;



  align-items: center;



  justify-content: center;



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



  z-index: 5;



}







.audio-toggle:focus {



  outline: 2px solid #fff;



  outline-offset: 2px;



  background: #007BFF;



  color: #fff;



  padding: 10px 20px;



  text-decoration: none;



  border-radius: 5px;



  transition: background 0.3s ease;



}







.btn {



  display: inline-block;



  background: #007BFF;



  color: #fff;



  padding: 10px 20px;



  text-decoration: none;



  border-radius: 5px;



  transition: background 0.3s ease;



}







.btn:hover {



  background: #0056b3;



}







/* Sezioni generali */



section {



  padding: 80px 0;



}







/* Services Section */



.services .service-items {



  display: flex;



  gap: 20px;



  flex-wrap: wrap;



  padding-left: 15px;



  padding-right: 15px;



}







.service-item {



  flex: 1;



  font-size: 1.1rem;



  min-width: 250px;



  background: #f7f7f7;



  padding: 20px;



  border-radius: 5px;



  text-align: center;



}







.service-item img {



  width: 90px;







  border-radius: 50%;



  margin-bottom: 10px;



}







.services h2 {



  text-align: center;



}







/* Contact Form */



/* form {



    margin: 0;



    padding: 10px;



}



fieldset {



    border: none;



    margin: 0;



    padding: 0;



}



legend {



    display: none;



    margin: 0;



    padding: 0;



}



label {



    margin: 0;



    padding: 0 0 0 3px;



    color: #aaa;



}



label.checkbox {



    color: #333;



}



input[type="text"],



input[type="email"],



input[type="tel"],



input[type="password"],



textarea,



select {



    width: 100%;



    padding: 5px 10px;



    margin: 3px 0 4px 0;



    display: inline-block;



    border: none;



    border-bottom: 1px solid #ccc;



    box-sizing: border-box;



    outline: none;



    font-size: 1.1em;



    background-color: #efefef;



}



textarea {



    min-height: 150px;



}



input[type="text"]:focus,



input[type="email"]:focus,



input[type="tel"]:focus,



input[type="password"]:focus,



textarea:focus,



select:focus {



    border: none;



    color: rgb(247, 142, 31);



    background-color: #f5cf82;



    border-bottom: 1px solid  rgb(247, 142, 31);



}







button {



    background-color: rgb(38, 229, 38);



    border: 1px solid rgb(40, 174, 40);



    border-radius: 5px;



    color: #e1dcdc;



    width: 50%;



    padding: 5px;



    font-size: 1.2em;



    margin-left: 50%;



}



button:hover {



    background-color: rgb(40, 174, 40) ;



}



.errore {



    color: red;



} */







.contact-form {



  display: flex;



  flex-direction: column;



  gap: 15px;



  padding-left: 15px;



  padding-right: 15px;



}







.contact-form input,



.contact-form textarea {







  padding: 10px;



  border: 1px solid #ccc;



  border-radius: 5px;



}







.contact-form button {



  align-self: center;



  /* Center-align the button */



}







/* Center-align the "Contattaci" heading */



.contact h2 {



  text-align: center;



}







/* Footer */



footer {



  background-color: #007BFF;



  text-decoration: #333;



  color: #fff;



  text-align: center;



  padding: 20px 0;



  margin-left: -5px;



  margin-right: -5px;



  margin-top: auto;



  display: flex;



  flex-direction: column;



  /* Push the footer to the bottom */



}







footer a {



  color: #fff;



  text-decoration: none;



}







footer a:hover {



  text-decoration: underline;



  color: #000;



}







.maps,



.contact-info {



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 10px;



}







/* Media Queries per il responsive */



@media (max-width: 768px) {



  nav {



    display: none;



  }







  .menu-toggle {



    display: flex;



  }







  .header-container {



    justify-content: space-between;



  }







  .services .service-items {



    flex-direction: column;



    align-items: center;



  }







  nav.div1 .aperto {



    position: fixed;



    top: 18px;



    left: 20px;



    width: 26px;



    height: 26px;



    cursor: pointer;



    z-index: 10;



  }







  nav.div1 .chiuso {



    display: none;



    position: fixed;



    top: 18px;



    left: 20px;



    width: 26px;



    height: 26px;



    cursor: pointer;



    z-index: 1;



  }







  nav.div1 .aperto>span,



  nav.div1 .aperto>span::before,



  nav.div1 .aperto>span::after {



    position: absolute;



    width: 20px;



    height: 2px;



    background-color: #ffffff;



  }







  nav.div1 .aperto>span::before {



    content: '';



    top: -8px;



  }







  nav.div1 .aperto>span::after {



    content: '';



    top: 8px;



  }







  nav.div1 .chiuso>span,



  nav.div1 .chiuso>span::before,



  nav.div1 .chiuso>span::after {



    position: absolute;



    width: 20px;



    height: 2px;



    background-color: #ffffff;



  }







  nav.div1 .chiuso>span::before {



    content: '';



    top: -8px;



  }







  nav.div1 .chiuso>span::after {



    content: '';



    top: 8px;



  }







  nav.div1 .button-container {



    display: block;



    position: fixed;



    top: 0;



    left: -100%;



    width: 90%;



    height: 100%;



    padding: 80px 0;



    transition-duration: 0.2ms;



  }







  nav.div1 .voci {



    display: block;



    padding: 12px 24px;



    color: #ffffff;



    font-size: 1.5rem;



    font-weight: 600;



    transition-duration: .2s;



  }







  nav.div1:target .aperto {



    display: none;



  }







  nav.div1:target .chiuso {



    display: block;



  }







  nav.div1:target .chiuso>span {



    transform: rotate(45deg);



  }







  nav.div1:target .chiuso>span::before {



    top: 0;



    transform: rotate(0deg);



  }







  nav.div1:target .chiuso>span::after {



    top: 0;



    transform: rotate(90deg);



  }







  nav.div1:target .button-container {



    left: 0 !important;



  }







  .hero h1 {



    font-size: 1.7rem;



  }







  .hero p {



    font-size: 1.1rem;



  }



}











/* Sezione presentazione video: centra il video e lo rende responsivo */



.sotto {



  display: flex;



  justify-content: center;



  align-items: center;



  padding: 20px 0;



}







.present {



  width: 100%;



  display: flex;



  justify-content: center;



  align-items: center;



}







.present video {



  width: 100%;



  max-width: 900px;



  /* dimensione massima su schermi grandi */



  height: auto;



  display: block;



  border-radius: 6px;



}







/* Video control bar (overlay a scomparsa) */



.video-controls {



  position: absolute;



  left: 12px;



  right: 12px;



  bottom: 12px;



  display: flex;



  gap: 10px;



  align-items: center;



  padding: 8px 10px;



  background: linear-gradient(180deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.55));



  border-radius: 8px;



  transform: translateY(120%);



  opacity: 0;



  transition: transform 220ms ease, opacity 220ms ease;



  z-index: 6;



}







.present:hover .video-controls,



.present.controls-visible .video-controls {



  transform: translateY(0);



  opacity: 1;



}







.vc-btn {



  width: 10%;



  background: rgba(0, 0, 0, 0.5);



  color: #fff;



  border: none;



  padding: 6px 8px;



  border-radius: 6px;



  cursor: pointer;



  font-size: 16px;



}







.vc-right {



  display: flex;



  align-items: center;



  gap: 8px;



}







.video-seek {



  -webkit-appearance: none;



  appearance: none;



  height: 6px;



  background: rgba(255, 255, 255, 0.2);



  border-radius: 6px;



  flex: 1 1 auto;



}







.video-seek::-webkit-slider-thumb {



  -webkit-appearance: none;



  width: 14px;



  height: 14px;



  border-radius: 50%;



  background: #fff;



  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);



  cursor: pointer;



}







.video-time {



  color: #fff;



  font-size: 13px;



  white-space: nowrap;



}







/* Make sure the present container stays relative (positioning context) */



.present {



  position: relative;



}







@media (max-width: 480px) {



  .hero h1 {



    font-size: 1.5rem;



  }







  .hero p {



    font-size: 1rem;



  }







  #chi-siamo {



    font-size: 0.8rem;



    justify-content: left;



  }







  .navbar-left .brand-name {



    display: inline;



    font-size: 1rem;



    /* Riduci la dimensione del font */



  }







  /* Ridurre la dimensione del logo */



  .logo a {



    font-size: 1.1rem;



    /* Logo più piccolo */



  }







  /* Ridurre la dimensione del font dei link del menu */



  nav ul li a {



    font-size: 0.8rem;



    /* Imposta la dimensione più piccola */



  }







  /* Ridurre lo spazio tra i link del menu */



  nav ul li {



    margin-left: 10px;



    /* Ridurre il margine tra gli elementi */



  }







  /* Rendere la navbar più compatta */



  header {



    padding: 5px 0;



    /* Ridurre il padding del header */



  }







  /* Ridurre la larghezza e altezza delle barre del menu toggle */



  .menu-toggle .bar {



    width: 20px;



    /* Riduci la larghezza delle barre */



    height: 2px;



    /* Riduci l'altezza delle barre */



  }







  /* Ridurre il padding interno della navbar */



  nav ul {



    padding: 0;



  }







  /* Ridurre il margine tra gli elementi della navbar */



  nav ul li {



    margin-left: 5px;



    /* Ridurre il margine tra gli elementi */



  }







  /* Navbar per il menù mobile */



  nav#div1 {



    display: none;



    position: fixed;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background-color: rgba(0, 0, 0, 0.8);



    z-index: 10;



    padding: 80px 20px;



    transition: left 0.5s ease;



  }







  nav#div1 .nav-list {



    list-style: none;



    text-align: center;



  }







  nav#div1 .nav-list li {



    margin: 20px 0;



  }







  nav#div1 .nav-list li a {



    text-decoration: none;



    color: #fff;



    font-size: 1.5rem;



    font-weight: 600;



  }







  nav#div1 .nav-list li a:hover {



    color: #007BFF;



  }







  nav#div1:target {



    display: block;



    left: 0;



  }







  nav#div1 .menu-toggle {



    display: none;



  }







  nav#div1 .aperto {



    display: none;



  }







  nav#div1 .chiuso {



    display: block;



    position: fixed;



    top: 18px;



    left: 20px;



    width: 26px;



    height: 26px;



    cursor: pointer;



    z-index: 10;



  }







  nav#div1 .chiuso>span,



  nav#div1 .chiuso>span::before,



  nav#div1 .chiuso>span::after {



    position: absolute;



    width: 20px;



    height: 2px;



    background-color: #ffffff;



  }







  nav#div1 .chiuso>span::before {



    content: '';



    top: -8px;



  }







  nav#div1 .chiuso>span::after {



    content: '';



    top: 8px;



  }







  nav#div1:target .chiuso>span {



    transform: rotate(45deg);



  }







  nav#div1:target .chiuso>span::before {



    top: 0;



    transform: rotate(0deg);



  }







  nav#div1:target .chiuso>span::after {



    top: 0;



    transform: rotate(90deg);



  }







  nav#div1:target .button-container {



    left: 0 !important;



  }







}







/* Navbar */



.navbar {



  display: flex;



  justify-content: space-between;



  align-items: center;



  padding: 10px 20px;



  background: #fff;



  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);



  position: fixed;



  width: 100%;



  top: 0;



  z-index: 100;



}







.navbar-left {



  display: flex;



  align-items: center;



}







.navbar-left .logo {



  margin-right: 10px;



}







.navbar-left .brand-name {



  font-family: 'Lucida Grande', Verdana, sans-serif;



  font-size: 1.2rem;



  /* Adjusted font size */



  font-weight: bold;



  color: #333;



  text-decoration: none;



  white-space: nowrap;



  /* Prevent text wrapping */



}







.navbar-right {



  display: flex;



  list-style: none;



  gap: 20px;



}







.navbar-right li a {



  text-decoration: none;



  color: #333;



  font-size: 1rem;



  transition: color 0.3s ease;



}







.navbar-right li a:hover {



  color: #007BFF;



}







/* Show hamburger menu under 800px */



@media (max-width: 800px) {



  .menu-toggle {

    display: flex !important;

  }



  .menu-toggle .bar {

    transition: all 0.3s ease;

  }



  /* Animazione hamburger a X */

  .menu-toggle.active .bar:nth-child(1) {

    transform: translateY(11px) rotate(45deg);

  }



  .menu-toggle.active .bar:nth-child(2) {

    opacity: 0;

  }



  .menu-toggle.active .bar:nth-child(3) {

    transform: translateY(-11px) rotate(-45deg);

  }



  .navbar-right {

    display: none;

    list-style: none;

    flex-direction: column;

    position: absolute;

    top: 70px;

    left: 0;

    right: 0;

    background: #fff;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    padding: 15px 0;

    gap: 0;

    z-index: 99;

  }



  /* Mostra il menu quando è active */

  .navbar-right.active {

    display: flex !important;

  }



  .navbar-right li {

    margin: 0;

  }



  .navbar-right li a {

    display: block;

    padding: 12px 20px;

    text-align: left;

    border-bottom: 1px solid #eee;

    transition: color 0.3s ease;

  }



  .navbar-right li:last-child a {

    border-bottom: none;

  }



  .navbar-right li a:hover {

    background-color: #f0f0f0;

    color: #007BFF;

  }



  .hero {

    padding-top: 70px;

  }



}







/* Responsive adjustment for smaller screens */



@media (max-width: 480px) {



  .navbar-left .brand-name {



    font-size: 1rem;



    /* Reduced font size for smaller screens */



  }



}



/* --- AGGIUSTAMENTO GRAFICO CONTROLLI VIDEO REPSONSIVE --- */

.present {

  position: relative !important;

  overflow: hidden;

}



.video-controls {

  position: absolute !important;

  left: 12px !important;

  right: 12px !important;

  bottom: 12px !important;

  display: flex !important;

  gap: 10px !important;

  align-items: center !important;

  padding: 8px 10px !important;

  background: rgba(0, 0, 0, 0.65) !important;

  border-radius: 8px !important;

  transform: translateY(120%) !important;

  opacity: 0 !important;

  transition: transform 220ms ease, opacity 220ms ease !important;

  z-index: 10 !important;

}



/* Mostra i controlli quando il mouse è sopra o quando attivato da JS */

.present:hover .video-controls,

.present.controls-visible .video-controls {

  transform: translateY(0) !important;

  opacity: 1 !important;

}



.vc-btn {

  background: transparent !important;

  color: #fff !important;

  border: none !important;

  cursor: pointer !important;

  font-size: 18px !important;

  padding: 5px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-width: 30px !important;

}



.video-seek {

  flex: 1 1 auto !important;

  accent-color: #007BFF !important; /* Colore blu coordinato al tuo sito */

  cursor: pointer !important;

}



.video-time {

  color: #fff !important;

  font-size: 13px !important;

  font-family: sans-serif !important;

  white-space: nowrap !important;

}



/* Adattamento per schermi piccoli (Telefoni) */

@media (max-width: 600px) {

  .video-controls {

    padding: 6px 8px !important;

    gap: 6px !important;

  }

  .vc-btn { font-size: 14px !important; }

  .video-time { font-size: 11px !important; }

}