body {
    font-family: 'Brown', sans-serif;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.header {

            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom:1px solid #F1F6F9;
            background: transparent !important;
            backdrop-filter: none !important;
        }

.header .logo img {filter: brightness(0) invert(1);}

.header .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,
}


#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}

.claim{
    font-family: "Rufina", serif;
    color:#F1F6F9;
    font-weight: 400;
    font-style: normal;
    font-size: 72px;
    display:block;
    width:100%; 
    position: absolute;
    top:42%;
    left:0;
    text-align:center;
    z-index: 3;
}


/* Il livello scuro */
.overlay-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Colore nero con opacità 50% (0.5) */
    background-color: rgba(0, 0, 0, 0.5); 
    /* Z-index: sopra il video (0), ma sotto il claim (3) e l'header (100) */
    z-index: 1;
    /* Importante: permette ai click di "passare attraverso" se necessario, 
       anche se qui è solo sfondo */
    pointer-events: none; 
}

/* Assicurati che il claim sia sopra l'overlay */
.claim {
    z-index: 3; /* Era già 3 nel tuo codice, ma confermiamolo */
}



        /* Sfondi per ogni categoria */

        .bg-home {
            /*background-image: url('../images/img-1.jpg');*/
        }

        .bg-cantiere {
            background-image: url('../images/img-2.jpg');
        }

        .bg-ormeggio {
            background-image: url('../images/img-3.jpg');
        }

        .bg-refitting {
            background-image: url('../images/img-4.jpg');
        }

        .bg-noleggio {
            background-image: url('../images/img-5.jpg');
        }


        .bg-cantiere #myVideo, .bg-ormeggio #myVideo, .bg-refitting #myVideo, .bg-noleggio #myVideo{
            display:none;
        }


.menu-toggle:checked + .burger-icon .linea1 {
    /* ...ruota la prima linea di 45 gradi */
    background: #011826;
}

.menu-toggle:checked + .burger-icon .linea2 {
    /* ...ruota la seconda linea di -45 gradi */
    background: #011826;
}



/*TABS MENU*/

        .tabs-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: flex-end;
            z-index: 50;
        }

        .tab {
            flex: 1;
            background: none;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            /*overflow: hidden;*/
            
            display: flex;
            height: 270px;
            padding: 30px;
            border-right: 1px solid rgba(241, 246, 249, 1);
            border-left: 1px solid rgba(241, 246, 249, 1);
            border-top: 1px solid #F1F6F9;
            margin-left:-1px;
        }


        /*.tab {
            flex: 1;
            background: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            /*overflow: hidden;*/
            
            /*display: flex;
            height: 270px;
            padding: 30px;
            border-right: 1px solid rgba(0, 0, 0, 0.1);
        }/*

        /*.tab {
            float: left;
            width: 25%;
            background: rgba(255, 255, 255, 0.9);
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            padding: 30px;
            border-right: 1px solid rgba(0, 0, 0, 0.1);
        }*/

        .tab:first-child {
            border-left: none;
        }
        .tab:last-child {
            border-right: none;
        }





        .tab:hover {
            background: rgba(1, 24, 38, 1);
            backdrop-filter: blur(15px);
            height: 400px;
        }


        .tab-content {
            transition: all 0.5s ease;
            padding: 20px 40px;
        }

        .tab:hover .tab-content {
            transform: translateY(0px);
        }

        


        .tab-title {
            font-family: "Rufina", serif;
            font-weight: 400;
            font-size: 40px;
            letter-spacing: 1px;
            color: #F1F6F9;
            margin-bottom: 10px;
            line-height: 1.2;
        }

        /*.tab-title {
            font-family: "Rufina", serif;
            font-weight: 400;
            font-size: 40px;
            letter-spacing: 1px;
            color: #2c3e50;
            margin-bottom: 10px;
            line-height: 1.2;
        }*/

        .tab:hover .tab-title {
            /*color: #7f8c8d;*/
        }

        .tab-subtitle {
            font-family: 'Brown';
            font-weight: 300;
            font-size: 24px;
            line-height: 30px;
            width: 80%;
            color: #7f8c8d;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease 0.2s;
            margin-bottom: 20px;
        }

        .tab:hover .tab-subtitle {
            opacity: 1;
            transform: translateY(0);
        }

        .tab-description {
            font-size: 14px;
            color: #5d6d7e;
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease 0.3s;
            margin-bottom: 25px;
        }

        .tab:hover .tab-description {
            opacity: 1;
            transform: translateY(0);
        }

        .tab-cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 600;
            color: #2c3e50;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease 0.4s;
            text-decoration: none;
            float: right;
            margin-top:20px; 
        }

        .tab:hover .tab-cta {
            font-family: 'Brown';
            font-weight: 400;
            color: #F1F6F9;
            opacity: 1;
            transform: translateY(0);
        }

        .tab-cta::after {
            content: '';
            background-image: url('../images/Arrow-right.png') no-repeat;
            display: block;
            width: 49px;
            height: 10px;
            font-size: 16px;
            transition: transform 0.3s;
        }

        .tab-cta:hover::after {
            transform: translateX(5px);
        }


        .main-navigation {display: none;}

        /* Colori specifici per ogni tab 
        .tab:nth-child(1) {
            background: linear-gradient(135deg, rgba(44, 62, 80, 0.9), rgba(52, 73, 94, 0.9));
            color: white;
        }

        .tab:nth-child(1) .tab-title,
        .tab:nth-child(1) .tab-cta {
            color: white;
        }

        .tab:nth-child(2) .tab-title {
            color: #3498db;
        }

        .tab:nth-child(3) .tab-title {
            color: #e74c3c;
        }

        .tab:nth-child(4) .tab-title {
            color: #2c3e50;
        }*/

/*-----------------------------------------------------------1280x720-----------------------------------------------------------*/

 @media (max-width: 1400px) {

    .tab{height: 230px;}

    .tab-content{padding:20px;}

    .tab:hover {height: 320px;}

    .tab-title{font-size:28px;}

    .tab-subtitle {width: 100%;}

    .claim {font-size: 55px; top:36%;}

    .tab-subtitle {font-size: 20px; line-height: 24px;}

    .tab-cta{float:none; margin-top:-10px;}

 }


        @media (max-width: 768px) {

            .tabs-container {
                flex-direction: column;
                height: 50vh;
            }

            .tab {
                height: 80px;
                padding: 20px;
            }

            .tab:hover {
                height: 200px;
            }

            .tab-title {
                font-size: 20px;
            }
        }}


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

@media (max-width: 1024px) {
    /* Claim centrale */
    .claim {
        font-size: 40px;
        line-height: 1.2;
        padding: 0 20px;
        top: 30%; /* Spostato un po' più in alto per fare spazio ai tab */
    }

    /* Tabs Container: cambia logica su mobile */
    .tabs-container {
        position: fixed; 
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto; /* Altezza automatica */
        flex-direction: column; /* Impila verticalmente */
        background: rgba(241, 246, 249, 0.95); /* Sfondo più solido per leggibilità */
        max-height: 50vh; /* Occupa max metà schermo */
        overflow-y: auto; /* Permetti scroll se i tab sono troppi */
    }

    /* Singolo Tab */
    .tab {
        width: 100%;
        height: auto; /* Altezza adattiva */
        min-height: 70px;
        border-right: none;
        border-bottom: 1px solid rgba(1, 24, 38, 0.1);
        padding: 15px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Rimuovi effetti hover complessi */
        background: transparent; 
    }

    /* Titolo Tab */
    .tab-title {
        font-size: 22px;
        margin-bottom: 0;
        color: #011826; /* Colore scuro per leggibilità su mobile */
    }

    /* Nascondi elementi secondari per pulizia, mostrali solo se necessario o "attivi" */
    .tab-subtitle {
        display: none; /* Nascondi sottotitolo per risparmiare spazio */
    }
    
    .tab-description {
        display: none;
    }

    /* CTA Button (Entra ->) */
    .tab-cta {
        float: none;
        margin-top: 5px;
        opacity: 1; /* Sempre visibile */
        transform: none;
        font-size: 12px;
        color: #011826;
    }
    
    .tab-cta img {
        height: 10px; /* Freccia più piccola */
    }

    /* Stato Hover/Active simulato su mobile per feedback visivo */
    .tab:active {
        background-color: rgba(1, 24, 38, 0.1);
    }
}

/* Ottimizzazione per schermi molto piccoli (iPhone SE, etc) */
@media (max-width: 480px) {
    .claim {
        font-size: 32px;
        top: 25%;
    }
    
    /* Riduce altezza tab per farne stare di più */
    .tab {
        padding: 12px 20px;
        min-height: 60px;
        border-top: 1px solid #ffffff;
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
    }
    
    .tab-title {
        font-size: 18px;
    }
}

/* Fix orientamento orizzontale mobile (Landscape) */
@media (max-width: 900px) and (orientation: landscape) {
    .tabs-container {
        display: none; /* Spesso in landscape il video copre tutto, meglio nascondere i tab o ridurli drasticamente */
    }
    /* Oppure: mostrali laterali */
    /*
    .tabs-container {
        width: 250px;
        right: 0; left: auto; top: 0; bottom: 0; height: 100vh; max-height: 100vh;
    }
    */
}