/*PRELOADER*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F1F6F9;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    /* Aggiungi questa riga per la transizione */
    transition: opacity 0.5s ease;
}

/* Questa classe viene aggiunta da JavaScript */
#preloader.hidden {
    opacity: 0;
    /* Facciamo sparire l'elemento anche dal flusso per non bloccare i click */
    pointer-events: none;
}

        /* --- LA CORREZIONE CHIAVE È QUI --- */
        .wrench, .nut-e {
            /* Imposta il perno di rotazione sul centro esatto del tuo bullone SVG */
            transform-origin: 12.5px 11px;
        }

        /* Applica le animazioni sincronizzate */
        .wrench {
            animation: real-wrench-action 7s infinite ease-in-out;
        }
        .nut-e {
            animation: real-nut-rotation 7s infinite ease-in-out;
        }

        /* Keyframes per l'animazione del BULLONE 'e' */
        @keyframes real-nut-rotation {
            /* Step 1: da 0° a 90° */
            0%, 8% { transform: rotate(0deg); }
            16% { transform: rotate(90deg); }
            16%, 24% { transform: rotate(90deg); }
            /* Step 2: da 90° a 180° */
            24%, 32% { transform: rotate(90deg); }
            40% { transform: rotate(180deg); }
            40%, 48% { transform: rotate(180deg); }
            /* Step 3: da 180° a 270° */
            48%, 56% { transform: rotate(180deg); }
            64% { transform: rotate(270deg); }
            64%, 72% { transform: rotate(270deg); }
            /* Step 4: da 270° a 360° */
            72%, 80% { transform: rotate(270deg); }
            88% { transform: rotate(360deg); }
            88%, 100% { transform: rotate(360deg); }
        }

        /* Keyframes per l'animazione della CHIAVE INGLESE */
        @keyframes real-wrench-action {
            /* Step 1 */
            0% { transform: rotate(0deg); }
            8% { transform: rotate(-15deg); }
            16% { transform: rotate(90deg); }
            24% { transform: rotate(90deg); }
            /* Step 2 */
            32% { transform: rotate(75deg); }
            40% { transform: rotate(180deg); }
            48% { transform: rotate(180deg); }
            /* Step 3 */
            56% { transform: rotate(165deg); }
            64% { transform: rotate(270deg); }
            72% { transform: rotate(270deg); }
            /* Step 4 */
            80% { transform: rotate(255deg); }
            88% { transform: rotate(360deg); }
            100% { transform: rotate(360deg); }
        }



/*PRELOADER LOGO*/

#preloader .logo-loader-svg {
  /* Imposta l'opacità iniziale (1.0 = 100%) */
  opacity: 1.0; 
  
  /* Applica l'animazione */
  animation: pulsa-opacita 0.7s ease-in-out infinite alternate;
}

/* Definisce i fotogrammi chiave dell'animazione */
@keyframes pulsa-opacita {
  0% {
    /* Opacità 100% (Alpha 100) */
    opacity: 1.0; 
  }
  100% {
    /* Opacità 30% (Alpha 30) */
    opacity: 0.3; 
  }
}



* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }

    body {
        background: #F1F6F9;
        background-image: url('../images/bg.svg');
        background-size: cover;
        overflow-x: hidden; /* Hide scrollbars */
    }


    @font-face {
      font-family: 'Brown';
      src: url('../_fonts/Brown-Regular.woff2') format('woff2'),
           url('../_fonts/Brown-Regular.woff') format('woff');

    font-family: 'Brown-Bold';
      src: url('../_fonts/Brown-Bold.woff2') format('woff2'),
           url('../_fonts/Brown-Bold.woff') format('woff');

        }


/*SMOOTH SCROLL*/
html.lenis, html.lenis body {

  height: auto;

}


.lenis.lenis-smooth {

  scroll-behavior: auto !important;

}


.lenis.lenis-smooth [data-lenis-prevent] {

  overscroll-behavior: contain;

}


.lenis.lenis-stopped {

  overflow: hidden;

}


.lenis.lenis-scrolling iframe {

  pointer-events: none;

}

/*ELEMENTS*/


/*COLORS*/

.red{color: #DC0927;}

.desktop{display: block;}
.mobile{display: none;}


        h1 {
          font-family: "Rufina", serif;
          font-weight: 400;
          font-style: normal;
          line-height: 75px;
        }

        h2.center-big{
            font-family: "Rufina", serif;
            color: #2c3e50;
            font-size: 72px;
            text-align: center;
            font-weight: 400;
            font-style: normal;
            margin: 40px 0;
        }


        .container {
            height: 100vh;
            position: relative;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: background-image 0.8s ease-in-out;
        }


        /*HEADER*/

        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(241, 246, 249, 0.8);
            backdrop-filter: blur(10px);
        }

        /*.header-home {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom:1px solid #F1F6F9;
        }*/

        .logo {
        }

        /*.nav {
            display: flex;
            gap: 40px;
        }

        .nav a {
            font-family: 'Brown';
            font-size: 16px;
            text-decoration: none;
            color: #2c3e50;
            transition: color 0.3s;
        }

        .nav a:hover {
            color: #2c3e50;
        }*/


/*MAIN MENU*/

.language-switcher{
    display: flex;
    justify-content: left;
    list-style: none;
    align-items: center;
    margin: 0 0 0 32px !important;
    padding: 0 !important;
}

.language-switcher a{

    font-family: 'Brown' !important;
    font-size: 16px !important;
    text-decoration: none;
    color: #011826;
    margin: 0 !important;
    padding: 0 15px !important;
    }

.burger-menu .language-switcher{display:none;}

.main-navigation {
}

.main-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu li {
    /* Il LI deve essere 'relative' per posizionare
       il suo sottomenu 'absolute' al suo interno */
    
}

.main-menu li a {
    font-family: 'Brown';
    font-size: 16px;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #011826;
    position: relative;
}

/* --- Animazione 1: Sottolineatura (INVARIATA) --- */
.main-menu li a::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: #011826;
    transition: width 0.3s ease-in-out;
}

.main-menu li a:hover::after {
    width: 100%;
}

.main-menu li:last-child a:hover::after {
    width: 0;
}

/* --- Animazione 2: Sottomenu "Noleggio" (MODIFICATA) --- */

.submenu-container::before {
    content:"";
    width: 1px; 
    height: 40px;
    display:block;
    position: absolute;
    top:-20px;
    left:40px;
    background:#000;
}

.submenu-container {
    background: rgba(241, 246, 249, 0.9);
    backdrop-filter: blur(10px);
    /*border-top: 1px solid #011826;*/

    
    /* Posizionato in modo assoluto SOTTO IL SUO GENITORE (il <li>) */
    position: absolute;
    top: 110%; /* Appare subito sotto il link "Noleggio" */
    
    /* Lo facciamo largo quanto tutta la pagina */
    left: 0;
    right: 0;
    /* Per centrarlo se la larghezza è fissa, o per farlo
       largo quanto la pagina usa 'left: 0' e 'width: 100vw'
       (ma 'left: 0' e 'right: 0' è spesso meglio) */
    /*width: 100vw; /* 100% della larghezza della finestra */
    width:200px;
    
    /* Allinea il menu con l'inizio della pagina */
    transform: translateX(calc((100vw - 100%) / -2));


    /* STATO NASCOSTO (pre-animazione) */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-5px); /* Leggermente spostato in basso */

    transition: all 0.3s ease-in-out;

    border:1px solid #011826;
}

/* MODIFICA CHIAVE:
  Quando passi il mouse su 'li.has-submenu',
  trova il '.submenu-container' CHE È SUO FIGLIO
  e mostralo.
*/

.has-submenu {
    position: relative;
}

.has-submenu:hover > .submenu-container {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Lo riporta in posizione */
}


/* Stile dei box interni (INVARIATO) */
.submenu-grid {
    /*display: flex;
    justify-content: center;
    gap: 20px;
    padding: 25px;
    max-width: 1200px; /* Adatta questo alla larghezza del tuo sito */
    margin: 0 auto; /* Centra il grid all'interno del contenitore */
}

.submenu-item {
    text-decoration: none;
    color: #011826;
    text-align: center;
    transition: transform 0.2s ease;
    border-bottom:1px solid #011826;
    transition: background 0.3s ease-in-out;
}

.submenu-item:hover {
    /*transform: scale(1.05);*/
    background-color: rgba(1, 24, 38, 0.1);
}

.submenu-item:hover::after {
    width: 0% !important;
}

.submenu-item:last-child {border:none;}

.submenu-item img {
    display: none;
    width: 135px;
    height: 98px;
    object-fit: cover;
    margin-bottom: 10px;
}

.submenu-item h3 {
    font-family: 'Brown';
    font-size: 13px;
    margin: 0 0 10px 0;
    font-weight: 500;
}





/*BURGER MENU*/
.menu-toggle {
    display: none;
}

/* Quando la checkbox è selezionata (cioè, il menu è aperto)... */
.menu-toggle:checked ~ .burger-menu {
    /* ...sposta il menu in vista */
    transform: translateX(0);
}

.menu-toggle:checked + .burger-icon .linea1 {
    /* ...ruota la prima linea di 45 gradi */
    transform: translateY(5px) translateX(-20px) rotate(45deg);
}

.menu-toggle:checked + .burger-icon .linea2 {
    /* ...ruota la seconda linea di -45 gradi */
    transform: translateY(-5px) rotate(-45deg);
}




/* ---------------------------------------------------- */
/* 2. STILE DELL'ICONA BURGER
/* ---------------------------------------------------- */

.burger-icon {
    position: fixed; /* Rimane fisso durante lo scorrimento */
    top: 43px;
    right: 55px;
    width: 42px;
    height: 20px;
    cursor: pointer;
    z-index: 1001; /* Deve stare sopra a tutto */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}


.linea {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    border-radius: 2px;
    /* Animazione fluida per la trasformazione in "X" */
    transition: transform 0.3s ease-in-out;
}

.header-home .linea {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #F1F6F9;
    border-radius: 2px;
    /* Animazione fluida per la trasformazione in "X" */
    transition: transform 0.3s ease-in-out;
    transition: background 0.3s ease-in-out,
}

.burger-icon .linea1 {
    margin-left:20px;
}




/* ---------------------------------------------------- */
/* 3. STILE DEL MENU DI NAVIGAZIONE
/* ---------------------------------------------------- */

.burger-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 415px; /* Occupa il 25% della larghezza della finestra (viewport width) */
    height: 100vh; /* Alto quanto la finestra (viewport height) */
    background-color: #F1F6F9;
    background-image: url('../images/bg.svg');
    background-repeat: no-repeat;
    background-position: center -120px;
    box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.15); /* Ombra per dare profondità */
    padding-top: 80px; /* Spazio per non sovrapporsi all'icona "X" */
    z-index: 1000; /* Sta sotto l'icona ma sopra al contenuto */
    
    /* Stato iniziale: nascosto fuori dallo schermo a destra */
    transform: translateX(100%);
    
    /* Animazione fluida per l'apertura e chiusura */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Stile per la lista e i link del menu */
.burger-menu ul {
    list-style: none;
    padding: 40px 0px 0px 16px;
    margin: 0;
}

.burger-menu a {
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    color: #011826;
    display: block;
    padding: 15px 25px;
    color: #333;
    text-decoration: none;
    font-size: 32px;
    transition: background-color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
}

.burger-menu a:hover {
    padding-left: 30px; /* Effetto al passaggio del mouse */
}

.burger-menu .dati{
    font-family: 'Brown', sans-serif;
    font-size: 14px;
    color: #011826;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.2px;
    position: absolute;
    bottom:0;
    display: block;
    padding: 40px 40px 8px 40px;}

.burger-menu .dati .social-icon{
    display: block;
    margin: : 16px 0 0 0;
}

.burger-menu .dati a, .burger-menu .dati a:hover {
    font-size: 18px;
    padding-left: 0; /* Effetto al passaggio del mouse */
}






        .burger-menu-space {
            display: flex;
            flex-direction: column;
            cursor: pointer;
        }

        .hamburger span.one {
            width: 42px;
            height: 2px;
            background: #011826;
            margin: 3px 0;
            transition: 0.3s;
            margin-left: 20px;
        }

        .hamburger span.two {
            width: 42px;
            height: 2px;
            background: #011826;
            margin: 3px 0;
            transition: 0.3s;
        }

        .assist-btn {
            position: fixed;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            writing-mode: vertical-rl;
            background: #011826;
            color: white;
            padding: 32px 16px;
            border: none;
            border-radius: 10px 0 0 10px;
            cursor: pointer;
            font-size: 14px;
            letter-spacing: 2px;
            z-index: 200;
            transition: padding ease-out 0.2s;
        }

        .assist-btn:hover {
            padding-right: 26px;
            transition: padding ease-out 0.2s;

        }


/* Impostazioni di base per l'header (solo per esempio, per far funzionare il posizionamento) */


/* Il contenitore che raggruppa scritta e linea */
.scroll-container {
  position: absolute;
  bottom: 40px; /* Distanza dal bordo inferiore dell'header */
  left: 50%; /* Lo posiziona esattamente al centro in orizzontale */
  transform: translateX(-50%); /* Bilancia la centratura */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* Distanza tra la parola "scroll" e la linea */
  z-index: 10; /* Assicura che sia sempre in primo piano */
}

/* Stile per la scritta "Scroll" */
.scroll-text {
  font-family: sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffff; /* Colore del testo */
  opacity: 0.8;
}

/* Il "binario" invisibile o semi-trasparente della linea */
.scroll-line {
  position: relative;
  width: 1px; /* Spessore della linea */
  height: 60px; /* Lunghezza totale dell'area della linea */
  background-color: rgba(255, 255, 255, 0.2); /* Sfondo in semitrasparenza */
  overflow: hidden;
}

/* La linea vera e propria che si anima */
.scroll-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Colore della linea in movimento */
  animation: scroll-anim 2s infinite cubic-bezier(0.77, 0, 0.175, 1);
}

/* I keyframes (le istruzioni) per l'animazione fluida */
@keyframes scroll-anim {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  50.1% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}




/*ELEMENTS*/

/*Box Image-Left - Text-Right*/
.box-il-tr{display: flex; align-items: stretch; flex-direction: row; gap: 48px; align-items: center; width:100%; margin: 160px auto;}
.box-il-tr .box-img, .box-il-tr .box-content{ flex: 1;}
.box-il-tr .box-img{/*min-height:400px;*/ width: 100%; height: 61vh; background-size: contain; background-position: center left !important; background-repeat: no-repeat;}


.box-il-tr .box-content{padding: 0 48px;}


.box-il-tr .box-content h2{
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 72px;
    color: #011826;
    margin: 0px 0px 32px 0px;
}

.box-il-tr .box-content h3{
    font-family: 'Brown';
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0px 0px 16px 0px;
}

.box-il-tr .box-content h4{
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    font-size:40px;
    color: #3C6374;
    margin: 0px 0px 16px 0px;
}

.box-il-tr .box-content p, .box-il-tr .box-content .box-text ul li{
    font-family: 'Brown';
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #495B65;
    line-height: 32px;
    letter-spacing: 0.5px;
}


/*Box Image-Right - Text-Left*/
.box-ir-tl{display: flex; flex-direction: row; gap: 48px; align-items: center; width:100%; margin: 160px auto;}
.box-ir-tl .box-img, .box-ir-tl .box-content{ flex: 1;}
.box-ir-tl .box-img{/*min-height:400px;*/    width: 100%; height: 61vh; background-size: contain; background-position: center right !important; background-repeat: no-repeat;}

.box-ir-tl .box-content{padding: 0 48px;}

.box-ir-tl .box-content h2{
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 72px;
    color: #011826;
    margin: 0px 0px 32px 0px;
}

.box-ir-tl .box-content h3{
    font-family: 'Brown';
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0px 0px 16px 0px;
}

.box-ir-tl .box-content h4{
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    font-size:40px;
    color: #3C6374;
    margin: 0px 0px 16px 0px;
}

.box-ir-tl .box-content p{
    font-family: 'Brown';
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #495B65;
    line-height: 32px;
    letter-spacing: 0.5px;
}

.box-ir-tl .box-content p.t2c{
    column-count: 2;
    column-gap: 24px;
}



/*Box 2 Image-Left - Text-Center*/
.box-2img-ct{display: flex; align-items: stretch; flex-direction: row; gap: 40px; align-items: center; width:70%; margin: 160px auto;}
.box-2img-ct .box-img, .box-2img-ct .box-content{ /*flex: auto auto auto;*/}
.box-2img-ct .box-content .box-text{}
.bbox-2img-ct .box-img{}


.box-2img-ct .box-content h2{
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 72px;
    color: #011826;
    margin: 0px 0px 32px 0px;
}

.box-2img-ct .box-content h3{
    font-family: 'Brown';
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0px 0px 16px 0px;
}

.box-2img-ct .box-content h4{
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    font-size:40px;
    color: #3C6374;
    margin: 0px 0px 16px 0px;
}

.box-2img-ct .box-content p{
    font-family: 'Brown';
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #495B65;
    line-height: 32px;
    letter-spacing: 0.5px;
}


/*Box Text-Center*/
.box-tc{display: flex; align-items: stretch; flex-direction: row; gap: 56px; width:40%; margin: 160px auto;}
.box-tc .box-img, .box-tc .box-content{ flex: 1;}

.box-tc .box-content h2{
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 72px;
    color: #011826;
    margin: 0px 0px 32px 0px;
}

.box-tc .box-content h3{
    font-family: 'Brown';
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0px 0px 16px 0px;
}

.box-tc .box-content h4{
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    font-size:40px;
    color: #3C6374;
    margin: 0px 0px 16px 0px;
}

.box-tc .box-content p{
    font-family: 'Brown';
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #495B65;
    line-height: 32px;
    letter-spacing: 0.5px;
}



/*Full Image*/
.full-image{text-align:center; display: block; width: 100%; margin:160px auto;}
.full-image img{width: 100%; height: auto;}

/*Video*/
.box-video{text-align:center; display: block; width: 60%; margin:160px auto;}
.box-video h2{}
.box-video .content img{width: 100%; height: auto;}

.video-container {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin:160px auto;
            cursor: pointer;
        }

        video {
            width: 100%;
            height: auto;
            display: block;
        }

        .control-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .control-button:hover {
            background-color: rgba(255, 255, 255, 1);
            transform: translate(-50%, -50%) scale(1.1);
        }

        /* Icona Play */
        .control-button.play::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 25px solid #011826;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            margin-left: 5px;
        }

        /* Icona Pause */
        .control-button.pause::before,
        .control-button.pause::after {
            content: '';
            width: 8px;
            height: 30px;
            background-color: #011826;
            position: absolute;
        }

        .control-button.pause::before {
            left: 28px;
        }

        .control-button.pause::after {
            right: 28px;
        }

        .control-button.hidden {
            opacity: 0;
            pointer-events: none;
        }


/*Hero Image-Left - Text-Righ*/

.hero-il-tr{display: flex; align-items: stretch; flex-direction: row; gap: 56px; width:100%; margin: 100px auto;}
.hero-il-tr .box-img, .hero-il-tr .box-content{ flex: 1;}
.hero-il-tr .box-img{min-height:600px; background-size: cover; background-repeat: no-repeat;}

.hero-il-tr .box-content h1{
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 72px;
    color: #011826;
    margin: 72px 0px 72px 0px;
}


.hero-il-tr .box-content{
    font-family: 'Brown';
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #495B65;
    line-height: 32px;
    letter-spacing: 0.2px;
}

.hero-il-tr .box-content .box-optionals{
    width: 80%;
}

.hero-il-tr a.btn-book{
    background-color: #011826;
    font-family: 'Brown';
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;
    text-decoration: none;
    color: white;
    border: none;
    display: block;
    width: 270px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 40px 0 0 0;
    padding: 24px 48px;
}

.hero-il-tr .box-content ul{
    list-style-type: none;
}

.hero-il-tr .box-content .text-1c {
  padding:40px 0;
  width: 70%;
}

.hero-il-tr .box-content .text-2c {
  column-count: 2;
  column-gap: 24px;
  padding:40px 0;
  width: 80%;
}


/*FORM*/

.bottom-form{
    padding: 40px;
    width: 100%;
    max-width: 950px;
    margin: 24px auto 80px auto;
}

.form-container {

}

.form-container h2{
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 64px;
    line-height: 1.1em;
    margin-bottom: 40px;
    }

/* --- Gruppi di Input e Input --- */
.input-group, .privacy-group {
    position: relative;
    margin-bottom: 24px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
    font-family: 'Brown';
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    width: 100%;
    border: none;
    border-bottom: 1px solid #7f8c8d;
    background-color: transparent;
    padding: 20px 0;
    color: #2C3E50;
    outline: none;
    transition: border-bottom-color 0.3s ease;
    margin-bottom: 8px;
}

textarea {
    resize: vertical;
}

/* --- Placeholder --- */
input::placeholder,
textarea::placeholder {
    color: #7f8c8d;
    opacity: 1;
}

/* --- Comportamento al Focus e in caso di Errore --- */
input:focus,
textarea:focus {
    border-bottom-color: #2C3E50;
}

input.invalid {
    border-bottom-color: #DC0927; /* Bordo rosso se l'input non è valido */
}

/* --- Etichette di Errore (gestite da JS) --- */
.error-label {
    font-family: 'Brown';
    font-size: 14px;
    font-weight: 400;
    color: #DC0927;
    position: absolute;
    left: 0;
    bottom: -20px;
    opacity: 0; /* Nascosto di default */
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Classe aggiunta da JS per mostrare l'errore con animazione */
.error-label.visible {
    opacity: 1;
    transform: translateY(0);
}


.form-footer{
    display: flex;
    align-items: stretch;
}

/* --- Gruppo Privacy --- */
.privacy-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.privacy-group input[type="checkbox"] {
    margin-right: 10px;
}
.privacy-group label {
    font-family: 'Brown';
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #34495e;
}
.privacy-group a {
    color: #34495e;
    text-decoration: underline;
}
.privacy-error {
    width: 100%;
    margin-top: 5px;
    position: static;
    transform: none; /* Sovrascrive l'animazione base */
}
input[type="checkbox"].invalid + label {
    color: #c0392b; /* Evidenzia anche il testo della label */
}

/* --- Bottone di Invio --- */
button[type="submit"] {
    background-color: #011826;
    font-family: 'Brown';
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 15px 30px;
}

button[type="submit"]:hover {
    background-color: #34495e;
    }

/* --- Messaggi di Stato (Successo/Errore) --- */
.status-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    animation: fadeInDown 0.5s ease forwards;
}

.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.andress-content{display: flex; align-items: stretch; flex-direction: row; gap: 24px; width:100%; margin: 40px auto;}
.andress-content .adress{ flex: 1; min-height: 285px;}
.andress-content .adress h4{
    font-family: "Rufina", serif;
    font-weight: 400;
    font-style: normal;
    color: #011826;
    font-size: 40px;
    line-height: 1em;
    margin: 0px 0px 16px 0px;
}
.andress-content .adress p{
    font-family: 'Brown';
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #495B65;
    line-height: 24px;
    letter-spacing: 0.5px;
}

.andress-content .btn-map{
    font-family: Brown;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;
    color: rgb(1, 24, 38);
    cursor: pointer;
    display: block;
    width: 200px;
    border:1px solid rgb(1, 24, 38);
    border-radius: 5px;
    margin-top: 20px;
    position: absolute;
    bottom: 0;
    left:0;
    padding: 8px;
}


.privacy-policy{
        font-family: Brown;
        color: rgb(73, 91, 101);
        line-height: 32px;
        letter-spacing: 0.2px;
        width: 80%; margin: 160px auto;
    }

.privacy-policy hr{margin: 20px 0;}


footer{background:#011826; text-align:center; display: block; margin: 80px 0 0 0; padding: 40px;}

footer .footer-logo{margin: 20px 0 56px 0;}

footer h4{font-family: 'Brown';
    font-size: 20px;
    font-weight: 400;
    text-decoration: none;
    color: #F1F6F9;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 0.5px;
    margin: 0 0 24px 0;
    }



footer p{font-family: 'Brown';
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #F1F6F9;
    line-height: 24px;
    letter-spacing: 0.5px;
    margin: 32px 0 16px 0;
}



        @media (max-width: 768px) {
            .nav {
                display: none;
            }
            
            .hamburger {
                display: flex;
            }

        }





/* --- AGGIUNGI O SOSTITUISCI ALLA FINE DI STYLE.CSS --- */

/* Tablet e Mobile Styles */
@media (max-width: 1024px) {
    /* Ridimensionamento testi generali */
    h1, .hero-il-tr .box-content h1 { font-size: 50px; line-height: 1.2; margin: 30px 0; }
    h2, h2.center-big, .box-il-tr .box-content h2, .box-ir-tl .box-content h2, .box-tc .box-content h2 { font-size: 42px; margin-bottom: 20px; }
    h4, .box-il-tr .box-content h4, .box-ir-tl .box-content h4 { font-size: 28px; }

    /* Layout Box Immagine/Testo: da orizzontale a verticale */
    .box-il-tr, .box-ir-tl, .box-tc, .hero-il-tr {
        flex-direction: column;
        width: 90%; /* Più largo su mobile */
        margin: 40px auto; /* Margini ridotti */
        gap: 30px;
    }
    
    /* Box con 2 immagini */
    .box-2img-ct {
        width: 90%;
        flex-direction: column;
        margin: 80px auto;
    }

    /* Ordine inverso per box destra-sinistra su mobile per avere sempre IMG sopra e TESTO sotto */
    .box-ir-tl { flex-direction: column-reverse; }

    /* Altezze minime immagini */
    .box-il-tr .box-img, .box-ir-tl .box-img, .hero-il-tr .box-img, .hero-il-tr .box-img video {
        min-height: 265px; /* Ridotto da 600px */
        width: 100%;
    }


    /* Gestione colonne testo */
    .box-ir-tl .box-content p.t2c, 
    .hero-il-tr .box-content .text-2c {
        column-count: 1; /* Una sola colonna su mobile */
        width: 100%;
    }

    /* Form */
    .bottom-form { padding: 20px; width: 90%; margin-bottom: 40px; }
    .form-container h2 { font-size: 36px; }
    .form-footer { flex-direction: column; gap: 20px; }
    button[type="submit"] { width: 100%; }

    /* Video Container */
    .box-video { width: 90%; margin: 80px auto; }
}

/* Mobile Specific (Smartphone) */
@media (max-width: 768px) {

    .desktop{display: none;}
    .mobile{display: block;}
    
    /* Header e Logo */
    /*.header-home { padding: 15px 20px; }*/
    .logo img { width:95px !important; } /* Ridimensiona logo */

    /* Burger Icon Positioning */
    .burger-icon { top: 32px; right: 20px; margin-right:20px;}

    /* Burger Menu a tutto schermo */
    .burger-menu {
        width: 100vw; /* 100% della larghezza viewport */
    }
    .burger-menu a { font-size: 24px; padding: 10px 20px; }
    .burger-menu .dati { padding: 35px; position: relative; } /* Non absolute su mobile piccoli */


    /* Assist Button Positioning */
    .assist-btn {
        padding: 15px 10px;
        font-size: 12px;
        right: 0;
        border-radius: 5px 0 0 5px;
    }
    .assist-btn img { width: 20px; }

    /* Footer */
    .andress-content { flex-direction: column; }
    .andress-content .adress h4 { font-size: 32px; }
    .andress-content .btn-map{position: relative;}



    /* --- Contenitore del Menu --- */
        .mobile-menu-container {
            width: 300px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            overflow: hidden; /* Importante per i bordi arrotondati */
        }

        .mobile-menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* --- Stile dei Link Principali --- */
        .mobile-menu-link, 
        .mobile-menu-label {

            cursor: pointer;
            position: relative; /* Per posizionare la freccia */

            font-family: "Rufina", serif;
            font-weight: 400;
            font-style: normal;
            color: #011826;
            display: block;
            padding: 20px;
            color: #333;
            text-decoration: none;
            font-size: 24px;
            transition: background-color 0.2s ease-in-out, padding-left 0.2s ease-in-out;


        }

        .mobile-menu-link:hover, 
        .mobile-menu-label:hover {

        }

        /* Rimuoviamo il bordo dall'ultimo elemento */
        .mobile-menu-list > li:last-child .mobile-menu-link {
            border-bottom: none;
        }

        /* --- LOGICA DEL CHECKBOX HACK --- */
        
        /* 1. Nascondiamo la checkbox visivamente ma la teniamo nel DOM */
        #toggle-mobile-submenu {
            display: none; 
        }

        /* 2. La freccina (opzionale ma consigliata) */
        .mobile-menu-label::after {
            content: '+';
            font-size: 24px;
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            transition: transform 0.4s ease; /* Animazione rotazione */
        }

        /* Rotazione freccia quando la checkbox è attiva */
        #toggle-mobile-submenu:checked + .mobile-menu-label::after {
            content: '-';
            transform: translateY(-50%) rotate(180deg);
        }

        /* 3. Il Wrapper del Sottomenu (per l'animazione Grid) */
        .mobile-submenu-wrapper {
            display: grid;
            grid-template-rows: 0fr; /* Altezza iniziale 0 */
            transition: grid-template-rows 0.4s ease-out; /* La magia dello smooth */
            margin-top:5px;
        }

        /* Stato APERTO: quando la checkbox è checkata */
        #toggle-mobile-submenu:checked ~ .mobile-submenu-wrapper {
            grid-template-rows: 1fr; /* Espande allo spazio necessario */
        }

        /* 4. Il contenuto interno del sottomenu */
        .mobile-submenu-inner {
            overflow: hidden; /* Nasconde il contenuto mentre si chiude */
        }

        /* Stile dei link del sottomenu */
        .mobile-submenu-link {
            font-family: 'Brown' !important;
            font-size: 16px !important;
            display: block !important;
            padding: 10px 15px 10px 48px !important;
            text-decoration: none !important;
            color: #011826 !important;
            position: relative !important;

        }

        .mobile-submenu-link:hover {

        }
        
        .mobile-submenu-link:last-child {
            margin-bottom: 20px;
            
        }


        .box-il-tr .box-img {
            background-size: cover;
            background-position: center -50px !important;
        }


        h2.center-big{padding: 0 20px;}

        .hero-il-tr .box-content .box-optionals {width: 100%;}

        .hero-il-tr a.btn-book {width: 100%;}

        .box-ir-tl .box-content {padding: 0 20px;}


}