/* === RESET BASE === */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* === FONT E COLORI PRINCIPALI === */

body {

    font-family: "Poppins", sans-serif;

    /*  background: linear-gradient(to bottom right, #0f0f17, #1a1a25);*/

    color: #e0e0e0;

    display: block;

    flex-direction: row;

}



/* === MENU HAMBURGER === */

    .menu-toggle {

    display: none;

    position: fixed;

    top: 15px;

    left: 15px;

    background: #6c63ff;

    color: white;

    border: none;

    font-size: 1.5rem;

    padding: 8px 12px;

    border-radius: 8px;

    z-index: 1100;

    cursor: pointer;

    box-shadow: 0 2px 10px rgba(0,0,0,0.5);

    transition: background 0.3s ease, transform 0.2s ease;

}



    .menu-toggle:hover {

        background: #4f46e5;

        transform: scale(1.05);

    }



/* === SIDEBAR === */

.sidebar {

    width: 200px;

    background: #14141f;

    border-right: 1px solid #2b2b3a;

    height: 100vh;

    position: fixed;

    left: 0;

    top: 0;

    padding: 30px 20px;

    transition: transform 0.3s ease;

    z-index: 40;

    box-shadow: 4px 0 15px rgba(0,0,0,0.4);

}



    .sidebar h2 {

        margin-bottom: 20px;

        font-size: 1.4rem;

        color: #6c63ff;

    }



    .sidebar ul {

        list-style: none;

    }



        .sidebar ul li {

            margin: 14px 0;

        }



            .sidebar ul li a,

            .dropdown-btn {

                color: #ccc;

                text-decoration: none;

                font-size: 1rem;

                cursor: pointer;

                background: none;

                border: none;

                padding: 0;

                font-weight: 500;

                transition: color 0.2s ease, transform 0.2s ease;

            }



                .sidebar ul li a:hover,

                .dropdown-btn:hover {

                    color: #6c63ff;

                    transform: translateX(4px);

                }



.dropdown-btn1 {

    color: #ccc;

    text-decoration: none;

    font-size: 1rem;

    cursor: pointer;

    background: none;

    border: none;

    padding: 0;

    font-weight: 500;

    transition: color 0.2s ease, transform 0.2s ease;

}



    .sidebar ul li a:hover,

    .dropdown-btn1:hover {

        color: #6c63ff;

        transform: translateX(4px);

    }



/* === DROPDOWN === */



.dropdown-content,

.dropdown-content1 {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;

    margin-left: 15px;

}



    .dropdown-content li,

    .dropdown-content1 li {

        margin: 8px 0;

    }



    /* apertura */

    .dropdown-content.open,

    .dropdown-content1.open {

        max-height: 500px;

    }





/*Logo*/

.hero-name {

    display: inline-flex;

    align-items: center;

    gap: 8px; /* spazio tra testo e logo */

}



.logo-inline {

    height: 24px; /* dimensione piccola del logo */

    width: auto;

    vertical-align: middle;

    filter: drop-shadow(0 0 3px rgba(255,255,255,0.3));

    transition: transform 0.3s ease;

}



    .logo-inline:hover {

        transform: scale(1.1);

    }



/* Responsive */

@media (max-width: 600px) {

    .logo-inline {

        height: 18px;

    }

}

/* === CONTENUTO PRINCIPALE === */

.content {

    margin-left: 200px;

    padding: 40px;

    flex: 1;

    transition: margin-left 0.3s ease;

}



section {

    margin-bottom: 70px;

    background: #1f1f2e;

    padding: 25px;

    border-radius: 12px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.5);

    transition: transform 0.3s ease;

    position: relative;

    overflow: visible !important; /* ✅ non taglia contenuti figli */

    height: auto; /* ✅ evita che il contenuto venga "schiacciato" */

    min-height: fit-content;

    width: 100%;

    max-width: 1000px;

    margin: 0 auto 70px;

}

section#contatti{

    text-align:left;

}

    section#anaglifi {

        position: relative;

        z-index: 50;

        overflow: visible !important;

    }



    section:hover {

        transform: translateY(-4px);

    }



h1, h2{

    color: #6c63ff;

    margin-bottom: 15px;

}

h3 {

    color: #8c84ff;

    margin-bottom: 10px;

    letter-spacing: 0.5px;

}

h4 {

    color: #ff7a9a;

    margin-bottom: 7px;

    letter-spacing:0.3px;

}



    p {

        line-height: 1.6;

        color: #ddd;

        margin-bottom: 5px;

    }

a {

   color: #6c63ff;

}

a:hover {

    color: #ff6584;

}



/* === SLIDESHOW FOTO === */

.slideshow {

    position: relative;

    width: 100%;

    max-width: 600px;

    margin: 30px auto;

    overflow: hidden;

    border: 2px solid #333;

    border-radius: 10px;

    background: #111;

}



    /* Ogni slide */

    .slideshow .slide {

        position: relative;

        width: 100%;

        text-align: center;

        color: white;

        display: none;

    }



        .slideshow .slide.active {

            display: block;

        }



    /* Immagini ridimensionate e proporzionate */

    .slideshow img {

        display: block;

        width: 100%;

        max-height: 500px; /* 👉 Limita l’altezza massima */

        height: auto; /* Mantiene le proporzioni originali */

        object-fit: contain; /* Mostra tutto il contenuto, senza tagliare */

        border-radius: 8px;

    }



    /* Testi e didascalie */

    .slideshow h6,

    .slideshow .caption {

        color: white;

        text-shadow: 0 2px 5px rgba(0,0,0,0.6);

    }

.slideshow,

iframe {

    border-radius: 10px;

    max-width: 100%;

}



.caption {

    margin-top: 10px;

    font-size: 0.9rem;

}



/* --- Responsive: riduci altezza su mobile --- */

@media (max-width: 600px) {

    .slideshow {

        max-width: 100%;

        width:100%;

    }



        .slideshow img {

            max-height: 60vh; /* 🔥 molto più naturale */

            width: 100%;

            object-fit: contain;

        }

}





/* === ABOUT === */

.contenitore-about {

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    max-width: 1000px;

    margin: 2rem auto;

    padding: 0 1rem;

}



.abox-text {

    flex: 1 1 0;

    min-width: 0;

    text-align: left;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

}



/* === LOGO ABOUT === */

#about {

    position: relative;

    overflow: hidden; /* evita che il logo esca dalla section */

}



.logo-about {

    position: absolute;

    bottom: 10px;

    right: 15px; /* puoi cambiare in left: 15px se vuoi a sinistra dello schermo */

    width: 70px; /* dimensione regolabile */

    height: auto;

    opacity: 0.7;

    transition: opacity 0.3s ease, transform 0.3s ease;

}



    .logo-about:hover {

        opacity: 1;

        transform: scale(1.05);

    }



/* === IMMAGINI ABOUT === */

.abox-image {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;

}



    .abox-image img {

        max-height: 250px; /* dimensione più gestibile */

        width: auto;

        object-fit: contain;

        border-radius: 25%;

        border: 2px solid rgba(108, 99, 255, 0.4);

        box-shadow: 0 0 15px rgba(108, 99, 255, 0.2), 0 0 30px rgba(255, 101, 132, 0.1);

        transition: transform 0.3s ease, box-shadow 0.3s ease;

    }



        .abox-image img:hover {

            transform: scale(1.04);

            box-shadow: 0 0 20px rgba(157, 140, 255, 0.4), 0 0 40px rgba(255, 101, 132, 0.2);

        }



        .abox-image img:last-child {

            max-height: 200px; /* la seconda è un po’ più piccola */

            border-radius: 50%;

        }



/* === RESPONSIVE === */

@media (max-width: 768px) {

    body {

        display: block;

    }



    .sidebar {

        transform: translateX(-100%);

    }



        .sidebar.active {

            transform: translateX(0);

        }



    .content {

        margin-left: 0;

        padding: 20px;

    }



    .menu-toggle {

        display: block;

    }



    .contenitore-about {

        flex-direction: column;

        text-align: center;

        padding: 0 10px; /* evita overflow laterale */

    }



    .abox-text {

        text-align: left; /* più leggibile su mobile */

    }



    .abox-image {

        flex-direction: column;

        gap: 0.5rem;

    }



        .abox-image img {

            max-height: 150px;

        }



    .logo-about {

        width: 60px;

        bottom: 8px;

        right: 10px;

        opacity: 0.6;

    }

}









    /*SLIDESHOW*/



    .slideshow {

        max-width: 100%;

        margin: 20px auto;

    }

}



/* === ANIMAZIONI === */

@keyframes fadeIn {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}



@keyframes fadeOut {

    from {

        opacity: 1;

    }



    to {

        opacity: 0;

    }

}



/* === CAPTION === */

.caption {

    margin-top: 12px;

    font-size: 1rem;

    color: #ccc;

    background: rgba(200, 200, 200, 0.25);

    padding: 8px 12px;

    border-radius: 6px;

    text-shadow: 0 0 6px rgba(0,0,0,0.6);

    display: inline-block;

    z-index: 5;

    opacity: 0;

    transform: translateY(10px);

    transition: all 0.4s ease;

}



.slide.active .caption {

    opacity: 1;

    transform: translateY(0);

}

/* === SEZIONE ANAGLIFI - INTEGRATA NEL TEMA PRINCIPALE === */



section#anaglifi {

    position: relative;

    background: #1f1f2e;

    padding: 30px;

    border-radius: 12px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.5);

    overflow: visible;

    max-width: 1000px;

    margin: 0 auto 70px;

    z-index: 10; /* sopra background ma sotto elementi interattivi */

}



/* === CONTENITORE SLIDER === */

.anag-slider-container {

    position: relative;

    width: 100%;

    max-width: 900px;

    margin: 30px auto;

    border-radius: 10px;

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

    aspect-ratio: 16/9;

    min-height: 300px;

    overflow: hidden;

    z-index: 20;

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

}



/* === SLIDES === */

.anag-slider, .anag-slide {

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.anag-slider {

    position: relative;

}



.anag-slide {

    display: none;

    text-align: center;

    position: relative;

    animation: fadeOut 0.5s ease;

}



    .anag-slide.active {

        display: block;

        animation: fadeIn 0.6s ease;

    }



    .anag-slide img {

        display: block;

        width: 100%;

        height: auto;

        max-height: 40vh;

        object-fit: contain;

        position: relative;

        z-index: 2;

        pointer-events: none;

    }



/* === OVERLAY COLORI (per effetto doppia immagine) === */

.anag-color-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    border-radius: 10px;

    background: transparent;

    opacity: 0;

    transition: opacity 0.4s ease, background 0.4s ease;

    z-index: 3;

}



    .anag-color-overlay.red {

        background-color: rgba(255, 0, 0, 0.79);

        opacity: 1;

    }



    .anag-color-overlay.blue {

        background-color: rgba(0, 255, 255, 0.65);

        opacity: 1;

    }



    .anag-color-overlay.red.blue {

        background: linear-gradient( rgba(255, 0, 0, 0.2), rgba(0, 255, 255, 0.15) );

        opacity: 1;

    }



/* === FRECCE DI NAVIGAZIONE === */

button.anag-prev,

button.anag-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255,255,255,0.2);

    color: #fff;

    font-size: 1.8rem;

    cursor: pointer;

    padding: 6px 12px;

    border-radius: 50%;

    z-index: 5;

    transition: all 0.3s;

    backdrop-filter: blur(4px);

}



    button.anag-prev:hover,

    button.anag-next:hover {

        background: rgba(255, 0, 0, 0.25);

        border-color: rgba(0, 255, 255, 0.35);

        transform: translateY(-50%) scale(1.1);

    }



button.anag-prev {

    left: 10px;

}



button.anag-next {

    right: 10px;

}



/* === CAPTION === */

.anag-caption {

    margin-top: 12px;

    font-size: 1rem;

    color: #ccc;

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

    padding: 8px 12px;

    border-radius: 6px;

    text-shadow: 0 0 6px rgba(0,0,0,0.6);

    display: inline-block;

    z-index: 5;

}



/* === BOTTONI FILTRO === */

.anag-btn-container {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-top: 15px;

    flex-wrap: wrap;

    z-index: 6;

}



.anag-filter-btn,

.anag-cfilter-btn {

    padding: 8px 14px;

    border: none;

    border-radius: 6px;

    font-weight: 600;

    color: #fff;

    background: #ff0000;

    box-shadow: 0 0 12px rgba(255, 0, 0, 0.4);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    font-size: 0.9rem;

    transition: transform 0.3s ease, background 0.3s ease;

    cursor: pointer;

}



.anag-cfilter-btn {

    background: #00ffff;

    box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);

}



    .anag-filter-btn:hover,

    .anag-cfilter-btn:hover {

        background: transparent;

        box-shadow: none;

        border: 1px solid currentColor;

        transform: scale(1.1);

    }



/* === INDICATORI (DOTS) === */

.anag-slider-indicators {

    text-align: center;

    margin-top: 18px;

}



.anag-dot {

    height: 10px;

    width: 10px;

    margin: 0 5px;

    background-color: rgba(255,255,255,0.3);

    border-radius: 50%;

    display: inline-block;

    cursor: pointer;

    transition: all 0.3s ease;

}



    .anag-dot.active {

        background-color: #00ffff;

        box-shadow: 0 0 6px #00ffff;

    }



/* === COUNTER === */

.anag-counter {

    position: absolute;

    bottom: 8px;

    right: 10px;

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

    color: #fff;

    padding: 5px 10px;

    border-radius: 10px;

    font-size: 14px;

    z-index: 8;

}



/* === ANIMAZIONI === */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: scale(0.98);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes fadeOut {

    from {

        opacity: 1;

        transform: scale(1);

    }



    to {

        opacity: 0;

        transform: scale(0.98);

    }

}



/* === RESPONSIVE === */

@media (max-width: 768px) {



    .anag-slider-container {

        position: relative;

        width:100%;

        max-width: 900px;

        aspect-ratio: auto; /* 🔥 IMPORTANTISSIMO */

        min-height: auto;

        padding: 0;

        margin: auto; /* centra */

       

    }



    .anag-slide img {

        max-height: 65vh; /* 🔥 più grande e leggibile */

        width: 100%;

        object-fit: contain;

    }



    /* BOTTONI PIÙ GRANDI */

    button.anag-prev,

    button.anag-next {

        font-size: 2rem;

        padding: 10px 14px;

        background: rgba(0,0,0,0.5); /* più visibili */

    }



    /* BOTTONI FILTRO */

    .anag-filter-btn,

    .anag-cfilter-btn {

        font-size: 0.9rem;

        padding: 8px 12px;

    }



    /* COUNTER più leggibile */

    .anag-counter {

        font-size: 16px;

        padding: 6px 12px;

    }

}



@media (max-width: 480px) {

    .anag-slide h2 {

        font-size: 1rem;

    }



    .anag-slide h4, .anag-slide h6 {

        font-size: 0.8rem;

    }



    .anag-slider-indicators {

        margin-top: 10px;

    }

}

html, body {

    scroll-behavior: auto !important;

}

footer {

    background-color: #1c1b29;

    color: #d1d1e0;

    text-align: center;

    padding: 2rem 1rem;

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);

    margin-top: 3rem;

}



footer {

    background-color: #1c1b29;

    color: #d1d1e0;

    text-align: center;

    padding: 1rem 0.5rem; /* ridotto da 2rem */

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);

    margin-top: 2rem; /* leggermente meno spazio sopra */

}



/* Contenitore ristretto */

.footer-content {

    max-width: 700px;

    margin: 0 auto;

}



    .footer-content h3 a {

        color: #6c63ff;

        text-decoration: none;

        font-weight: 600;

        font-size: 1.2rem;

    }



        .footer-content h3 a:hover {

            color: #9d8cff;

        }



    .footer-content p {

        margin: 0.3rem 0 0.8rem; /* ridotto lo spazio verticale */

        font-size: 0.85rem;

        color: #b8b8c7;

    }



.footer-social {

    margin-bottom: 0.8rem; /* ridotto da 1.5rem */

}



    .footer-social a {

        color: #ff6584;

        text-decoration: none;

        margin: 0 0.7rem; /* più compatto */

        font-weight: 500;

        font-size: 0.9rem;

        transition: color 0.3s ease;

    }



        .footer-social a:hover {

            color: #9d8cff;

        }



.footer-links a {

    color: #ff6584;

    text-decoration: none;

    margin: 0 0.7rem;

    font-weight: 500;

    font-size: 0.9rem;

    transition: color 0.3s ease;

}



    .footer-links a:hover {

        color: #6c63ff;

    }



/* Mobile responsive */

@media (max-width: 600px) {

    .footer-social a,

    .footer-links a {

        display: block;

        margin: 0.3rem 0;

    }



    .footer-content {

        max-width: 90%;

    }

}



body {

    background-image: url("img/bg.jpg");

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    background-repeat: no-repeat;

}