html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

html{
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #2b2933;
}

a:focus {
    outline: 2px solid #007bff;
    outline-offset: 4px;
}

.testata {
    /*background: linear-gradient(to right, #f8e810, #ffa02d);*/
    background: linear-gradient(to bottom, #fff200, #f2c912, #ffa02d);
    /*background: linear-gradient(to right, #4A90E2, #5AB9EA);*/
    /*position: fixed;*/ /* Fissa la testata in cima alla pagina */
    position: relative;
    top: 0;            /* Posiziona la testata in cima alla pagina */
    width: 100%;     /* Assicura che la testata occupi l'intera larghezza della pagina */
    max-width: 100%;
    height: auto;  /* Invece di una altezza fissa */
    min-height: 120px;  /* Altezza minima per accogliere il logo più grande */
    display: flex; /* Usa flexbox per allineare gli elementi */
    flex-wrap: wrap;
    /*align-items: flex-start;*/ /* Allinea gli elementi (logo, nome pagina) nella parte superiore della testata, lasciando spazio nella parte inferiore per la menubararea. */
    /*justify-content: space-between;*/
    justify-content: center;
    align-items: center;
    /*padding: 20px 20px 0 20px;*/
    padding: 10px 20px 0 20px; /* Spazio interno sui lati */
    /*padding: 10px 20px;*/  /* Ridotto il padding verticale */
    margin: 0;
    box-sizing: border-box;
    z-index: 1000;   /* Assicura che la testata sia sopra altri contenuti */
    box-shadow: 0px 3px 10px 3px black;
}

.menubararea {
    /*background-color: #444444;*/ /* TOGLIERE */
    color: white;
    padding: 5px;
    position: relative;
    right: 0px;
    bottom: 0px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    margin-right: 15px;
    width: 100%;
    justify-content: flex-end;

}

.menu ul {                  /* INIZIO STILE MENU' */
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 22px;

}

.menu ul li {
    float: left;
}

.menu ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    font-weight: bold;
}

.menu ul li a:hover {
/*background-color: #111;*/
color: #765AEE;
}

.menu ul li a:focus {
    outline: 2px solid #007bff;
    outline-offset: 4px;
}

/* Stile per il dropdown */
.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(253, 173, 39);
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    border-radius: 20px;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    white-space: nowrap;
}

.dropdown-content a:hover {
    color: #765AEE;
}

.dropdown:hover .dropdown-content {
    display: block;
    
}

.menu ul li:last-child {                  
    border: 2px solid #765AEE;
    /*border: 2px solid rgb(255, 166, 0);*/
    border-radius: 30px; 
    border-top-right-radius: 0px;
}         /* <--- BORDO ALL'ULTIMO ELEMENTO DELLA BARRA MENU' */

.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    margin-left: auto; /* Spinge il pulsante a destra */
}

/* FINE STILE MENU' */

.logo-pagname-container {
    display: flex;
    align-items: center;
    margin-right: auto;
    margin-left: 10px;
}

.logo-pagname-container, .menubararea {
    max-width: 100%;
}

.logo {
    /*width: 200px;*/  /* Larghezza fissa per schermi più grandi */
    width: 181px;   /* Larghezza fissa per schermi più grandi */
    height: auto; /* Altezza fissa per schermi più grandi */
    background-color: transparent;
    color: white;
    text-decoration: none;
    padding: 0px; /* Spazio interno */
    margin-right: 20px; /* Spazio tra logo e pagname */
    position: relative;
    z-index: 1;
}

.logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.pagname {
    background-color:yellow;
    color:black;
    padding: 10px; /* Spazio interno */

}

.total {
    background-color: #2b2933;
    height: auto;
    padding: 60px 20px 0px 20px;
    overflow: auto;
    max-width: 100%; /* Usa una percentuale della larghezza della viewport */
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.intro {
    /*background-image: url('path/to/your/image.svg'); /* Percorso all'immagine SVG */
    /*background-size: cover; /* Adatta l'immagine per coprire l'intero div */
    /*background-position: center; /* Centra l'immagine */
    /*background-repeat: no-repeat; /* Evita la ripetizione dell'immagine */   /*CIO' FA USARE UN SVG COME SFONDO*/

    /*background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;*/ /*CIO' FA INVECE USARE UN'IMMAGINE COME SFONDO*/

    /*background-color: aqua;*/
    background-color:transparent;
    border: 2px solid #765AEE;
    border-radius: 30px;
    margin: 20px auto 55px auto;
    padding: 20px;
    max-width: 800px;
    display: grid;
    place-items: center;
    color: white;
    text-align: center;
}

.intro h1 {
    font-size: 48px;
    font-weight: bold;
}

.intro p.testointro{
    font-size: 22px;
    line-height: 1.5;        /* Interlinea all'interno del paragrafo */
    margin-top: 0px;
}

.intro a.linkAbout{
    display: inline-block;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #f1ae0e;
    border: none;
    border-radius: 20px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.2s;
    transition: background-color 0.2s;
}

.intro a.linkAbout:hover{
    background-color: #cb9413;
    box-shadow: 0px 3px 10px 3px black;
}

.intro a.linkAbout:focus{
    outline: 2px solid #007bff; /* Colore e spessore del contorno */
    outline-offset: 4px; /* Distanza del contorno rispetto all'elemento */
}

#bigmenuspace{
/*  background-color: brown; */
    display: flex;
    flex-wrap: wrap;
    /*height: 500px;*/ /* --> QUANDO AVRO' DECISO CHE IMMAGINI USARE PER I SINGOLI PULSANTI, FORSE POTRO' METTERE auto*/
    margin: 0 0 35px 0;  /* MARGINE SUL BIG MENU'*/
    justify-content: space-between; /* Distribuisce lo spazio in modo uniforme */
    gap: 25px;
}

#bigmenuspace > div {
    box-sizing: border-box;
    flex: 1 1 calc(33.333% - 25px); /* Larghezza fissa con spazio per i margini */
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    border-radius: 20px;
}

/*#bigmenuspace > div:not(:last-child) {
    margin-right: 20px;
}           */                    /* Aggiunge margine destro a tutti tranne l'ultimo */

.videoeditpush{
    /*background-color: chocolate;*/
    background-image: url(Montaggi/MadameCover_compressed.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    filter: brightness(50%);
    transition: filter 0.3s;
    border: 2px solid rgb(255, 166, 0);
    box-shadow: 0px 3px 10px 3px black;
}

.videoeditpush:hover{
    filter: brightness(100%);
    cursor: pointer;
}

.videoeditpush a.linkVideoEdit{
    font-size: 30px;
    color: rgb(255, 0, 0);
    font-weight: bold;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*filter: opacity(0%);
    transition: filter 0.3s;*/
}

/*.videoeditpush a.linkVideoEdit:hover {
    filter: opacity(100%);
}*/


.graphpush{
    /*background-color: crimson;*/
    background-image: url(Grafica/ROUND7_homepage.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    filter: brightness(50%);
    transition: filter 0.3s;
    border: 2px solid rgb(255, 166, 0);
    box-shadow: 0px 3px 10px 3px black;
}

.graphpush:hover{
    filter: brightness(100%);
    cursor: pointer;
}

.graphpush a.linkGraph{
    font-size: 30px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.paintspush{
    /*background-color: dodgerblue;*/
    background-image: url(Dipinti/pouring_mod_compressed.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    filter: brightness(50%);
    transition: filter 0.3s;
    border: 2px solid rgb(255, 166, 0);
    box-shadow: 0px 3px 10px 3px black;
}

.paintspush:hover{
    filter: brightness(100%);
    cursor: pointer;
}

.paintspush a.linkPaints{
    font-size: 30px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.graphpush a.linkGraph,
.paintspush a.linkPaints,
.videoeditpush a.linkVideoEdit {
    font-size: calc(16px + 1vw);
    padding: 10px;
}

.line{
    border: none;
    height: 5px;
    /*background: linear-gradient(to right, yellow, red);*/
    background: #765AEE;
    width: 60%;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

#contact{
    background-color:rgba(0, 100, 0, 0);
    margin: 0;
    padding: 10px 0 0 0;
    /*width: 50%;*/
    color: white;
    text-align: center;
}

#contact a {
    display: inline-block;
    margin: 0 5px;
    text-decoration: none;
    font-style: italic;
    color: white;
}

#contact img {
    width: 38px;
    height: 38px;
    transition: transform 0.2s;
}

#contact img:hover {
    transform: scale(1.1);
}

#contact h2{
    font-size: 35px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#contact p{
    font-size: 20px;
}

#contact > p:last-child {
    color: gray;
}

#arrow-up {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    display: none; /* Nascondi la freccia di default */
    transition: opacity 0.3s; /* Aggiungi una transizione fluida */
}

#arrow-up a {
    display: block;
    text-align: center;
    line-height: 60px;

}

#arrow-up a:hover {
    transform: translateY(-3px);
}

#arrow-up img {
    width: auto;  /* Rimuove la larghezza fissa */
    height: auto; /* Rimuove l'altezza fissa */
    max-width: 60px;  /* Imposta una larghezza massima se necessario */
    max-height: 60px; /* Imposta un'altezza massima se necessario */
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    transition: box-shadow 0.2s ease-in-out;
    vertical-align: middle;
}

#arrow-up img:hover{
    box-shadow: 0px 0px 10px -1px black;
}

                    /*  IDEA MEDIA QUERIES PER SITO RESPONSIVE    */
@media screen and (max-width: 768px) {

    .testata, .total, .menu {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .testata {
        height: auto;
        flex-direction: column;
        align-items: center;
    }

    .logo-pagname-container{
        margin-right: 0;
    }

    .logo {
        /*width: 140px;*/  /* Dimensione ridotta per schermi più piccoli */
        width: 111px;    /*Dimensione ridotta per schermi più piccoli */
        height: auto;
    }
    
    .menubararea {
        width: 100%;
        margin: 10px 0;
        justify-content: center;
        display: flex;
    }


    .menubararea {
        position: static;
        margin-top: 10px;
        margin-left: auto;
        flex-direction: column;
        align-items: flex-end; /* Allinea gli elementi a destra */
        width: 100%;
        /*justify-content: flex-end;*/

    }

    .hamburger {
        display: block;
        margin-right: 5px; /* Aggiunge un po' di spazio a destra */
        margin-bottom: 5px;
        /*align-items: flex-end; */ /* Allinea gli elementi a destra */
        z-index: 1001; /* Assicura che il pulsante sia sopra il menu */
        margin-left: 0;
    }

    .menu {
        display: none;
        width: 100%;
        position: absolute;
        top: 100%; /* Posiziona il menu sotto la testata */
        left: 0;
        right: 0;
        background: linear-gradient(to right, #f8e810, #ffa02d);
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        z-index: 1000;
    }

    .menu.active {
        display: block;
    }

    .menu ul {
        flex-direction: column;
        align-items: center;
    }

    .menu ul li {
        width: 100%;
        text-align: center;
    }

    .dropdown-content {
        position: static;
        left:auto;
        display: none;/**/
        transform: none;
        width: 100%;
        min-width: auto;
        box-shadow: none;
        background-color: rgba(253, 173, 39, 0.9);
    }

    .dropdown.active .dropdown-content {
        display: block;
    }

    .dropdown > a::after {
        content: '▼';
        margin-left: 5px;
    }

    .total{
        /*margin-top: 80px;*/
        padding: 0px 15px 30px 15px;
    }

    .intro{
        padding: 15px;
    }

    #bigmenuspace {
        flex-direction: column;
        height: auto;
        margin: 0;
    }

    #bigmenuspace > div {
        flex: 1 1 100%;
        margin-right: 0;
        margin-bottom: 30px;
        min-height: 200px; /* Altezza minima per schermi piccoli */
    }

    #bigmenuspace > div:last-child {
        margin-bottom: 0;
    }

    .graphpush a.linkGraph,
    .paintspush a.linkPaints,
    .videoeditpush a.linkVideoEdit {
        font-size: calc(14px + 1vw);
    }

    .intro h1 {
        font-size: 36px;
    }

    .intro p.testointro {
        font-size: 16px;
    }

}

@media screen and (min-width: 769px) and (max-width: 1024px) {

    #bigmenuspace {
        flex-wrap: wrap;
        justify-content: space-around;
    }

    #bigmenuspace > div {
        flex: 0 1 calc(50% - 15px);
        margin-bottom: 30px;
        min-height: 300px;
    }

    #bigmenuspace > div:last-child {
        flex: 0 1 100%;
    }

}

@media screen and (min-width: 1025px) {

    #bigmenuspace > div {
        flex: 0 1 calc(33.333% - 30px);
        width: calc(33.333% - 30px);
        max-width: calc(33.333% - 30px);
    }

}

@media screen and (min-width: 769px) {
    .menu {
        display: block !important;
    }

    .testata {
        flex-wrap: nowrap;
    }

    .menubararea {
        position: absolute;
        bottom: 0;
        right: 20px;
    }

    .menu ul {
        display: flex;
    }

}

/* -------------------------------  PAGINA DIPINTI ----------------------------- */

.logopaintings {
    /*width: 200px;*/  /* Larghezza fissa per schermi più grandi */
    width: 468px;   /* Larghezza fissa per schermi più grandi */
    height: auto; /* Altezza fissa per schermi più grandi */
    background-color: transparent;
    color: white;
    text-decoration: none;
    padding: 0px; /* Spazio interno */
    margin-right: 20px; /* Spazio tra logo e pagname */
    position: relative;
    z-index: 1;
}

.logopaintings a {
    display: block;
    width: 100%;
    height: 100%;
}

.logopaintings img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}


.galleriaIntro {
    background-color: transparent;
    border: 2px solid #765AEE;
    border-radius: 30px;
    margin: 20px auto 55px auto;
    padding: 20px;
    max-width: 800px;
    display: grid;
    place-items: center;
    color: white;
    text-align: center;
}

.galleriaIntro h1 {
    font-size: 48px;
    font-weight: bold;
}

.galleriaIntro p.testoGalleriaIntro {
    font-size: 20px;
    text-align: justify;
    line-height: 1.5;
    margin-top: 0px;
}

.galleria {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px 0;
}

.galleriaItem {
    position: relative;
    padding-top: 110%; /* Crea un contenitore quadrato */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    cursor: pointer;
}

.galleriaItem img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Copre l'intero spazio */
    object-position: center; /* Centra l'immagine */
    transition: transform 0.3s ease;
}

.galleriaItem:hover img {
    transform: scale(1.05);
}

.galleriaDescrizione {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding: 10px;
    margin: 0;
    font-size: 14px;
    text-align: center;
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
  }

  .lightbox-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  .lightbox-content {
    /*margin: auto;
    display: block;*/
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .caption {
    color: #fff;
    margin-top: 20px;
    text-align: center;
    max-width: 90%;
  }
  
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(0,0,0,0.8);
  }
  
  .prev{
    left: 0;
  }

  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }


@media screen and (max-width: 768px) {

    .logopaintings {
        /*width: 140px;*/  /* Dimensione ridotta per schermi più piccoli */
        width: 287px;    /*Dimensione ridotta per schermi più piccoli */
        height: auto;
    }

    .galleriaIntro h1 {
        font-size: 36px;
    }

    .galleriaIntro p.testoGalleriaIntro {
        font-size: 16px;
    }

    .galleria {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .lightbox {
      display: none !important;
    }

    .galleriaDescrizione{
        display: none;
    }

  }

/* ----------------------- PAGINA VIDEO EDITING -------------------------*/

.logovideo {
    /*width: 200px;*/  /* Larghezza fissa per schermi più grandi */
    width: 439px;   /* Larghezza fissa per schermi più grandi */
    height: auto; /* Altezza fissa per schermi più grandi */
    background-color: transparent;
    color: white;
    text-decoration: none;
    padding: 0px; /* Spazio interno */
    margin-right: 20px; /* Spazio tra logo e pagname */
    position: relative;
    z-index: 1;
}

.logovideo a {
    display: block;
    width: 100%;
    height: 100%;
}

.logovideo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.intestazioneVideoEdit {
    background-color: transparent;
    border: 2px solid #765AEE;
    border-radius: 30px;
    margin: 20px auto 55px auto;
    padding: 20px;
    max-width: 500px;
    display: grid;
    place-items: center;
    color: white;
    text-align: center;
}

.intestazioneVideoEdit h1 {
    font-size: 48px;
    font-weight: bold;
    margin: 0;
}

.videogallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px 0;
}

.videoItem {
    background-color: #333;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videoWrapper img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videoWrapper iframe[src*="facebook.com"] {
    border-radius: 0;
}

.videoDescription {
    color: white;
    padding: 10px;
    margin: 0;
    font-size: 14px;
}

@media screen and (max-width: 768px) {

    .logovideo {
        /*width: 140px;*/  /* Dimensione ridotta per schermi più piccoli */
        width: 269px;    /*Dimensione ridotta per schermi più piccoli */
        height: auto;
    }

    .intestazioneVideoEdit h1 {
        font-size: 36px;
    }

    .videogallery {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .videogallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1025px) {
    .videogallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------------------------- PAGINA GRAFICA --------------------*/

.logographics {
    /*width: 200px;*/  /* Larghezza fissa per schermi più grandi */
    width: 570px;   /* Larghezza fissa per schermi più grandi */
    height: auto; /* Altezza fissa per schermi più grandi */
    background-color: transparent;
    color: white;
    text-decoration: none;
    padding: 0px; /* Spazio interno */
    margin-right: 20px; /* Spazio tra logo e pagname */
    position: relative;
    z-index: 1;
}

.logographics a {
    display: block;
    width: 100%;
    height: 100%;
}

.logographics img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.graficaIntro {
    background-color: transparent;
    border: 2px solid #765AEE;
    border-radius: 30px;
    margin: 20px auto 55px auto;
    padding: 20px;
    max-width: 500px;
    display: grid;
    place-items: center;
    color: white;
    text-align: center;
}

.graficaIntro h1 {
    font-size: 48px;
    font-weight: bold;
    margin: 0;
}

.graficaGalleria {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px 0;
}

.graficaItem {
    position: relative;
    padding-top: 110%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    cursor: pointer;
}

.graficaItem img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.graficaItem:hover img {
    transform: scale(1.05);
}

.graficaDescrizione {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding: 10px;
    margin: 0;
    font-size: 14px;
    text-align: center;
}

/* Stili per il lightbox della grafica */
.graficaLightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
}

.graficaLightbox-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 60px; /* Aggiunge spazio per i pulsanti prev/next */
    box-sizing: border-box;
}

.graficaLightbox-content {
    margin: auto;
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.graficaClose {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.graficaPrev, .graficaNext {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 16px;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    z-index: 1001; /* Assicura che i pulsanti siano sopra l'immagine */
}

.graficaPrev {
    left: 10px;
}

.graficaNext {
    right: 10px;
    border-radius: 3px 0 0 3px;
}

.graficaPrev:hover, .graficaNext:hover {
    background-color: rgba(0,0,0,0.8);
}

.graficaCaption {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    padding: 10px;
    background-color: rgba(0,0,0,0.7);
}

/* Media queries per responsività */
@media screen and (max-width: 768px) {

    .logographics {
        /*width: 140px;*/  /* Dimensione ridotta per schermi più piccoli */
        width: 350px;    /*Dimensione ridotta per schermi più piccoli */
        height: auto;
    }


    .graficaIntro h1 {
        font-size: 36px;
    }

    .graficaGalleria {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .graficaLightbox {
        display: none !important;
    }

    .graficaDescrizione{
        display: none;
    }

}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .graficaGalleria {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----------------------- PAGINA ABOUT VSG -------------------------*/

.about-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
    max-width: 100%;
    width: 100%;
}

.about-item {
    border: 2px solid #765AEE;
    border-radius: 30px;
    padding: 20px;
    color: white;
    width: 100%;
    box-sizing: border-box;
}

.about-item.profile h2 {
    font-size: 30px;
    text-align: left;
}

.about-item h2 {
    font-size: 30px;
    margin-top: 0;  /* Rimuove il margine superiore */
    text-align: center;
}

.about-item p {
    font-size: 20px;
    }

.profile-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 60px;
}

.profile-text {
    flex: 1;
    padding-right: 20px;
}

.profile-text p {
    font-size: 20px;
    text-align: justify;
    }

.profile-image {
    margin-right: 40px;
    flex-shrink: 0; /* Impedisce all'immagine di restringersi */
}

.profile-image img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
}

.timeline {
    width: 100%;
    overflow-x: auto;
    /*padding: 40px 0;*/
  }

.timeline h2 {
    font-size: 30px;
    text-align: center;
}
  
.timeline-container {
    display: flex;
    position: relative;
    width: max-content;
    padding: 60px 0;
  }
  
  .timeline-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #765AEE;
    transform: translateY(-50%);
  }
  
  .timeline-item {
    position: relative;
    padding: 0 40px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .timeline-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #765AEE;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  
  .timeline-content {
    /*background: #3a3744;*/
    background: red;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    width: 245px;
  }
  
  .timeline-content.top {
    margin-bottom: 50px;
    order: 1;
  }
  
  .timeline-content.bottom {
    margin-top: 50px;
    order: 2;
  }
  
  .timeline-content::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    transform: translateX(-50%);
  }
  
  .timeline-content.top::before {
    bottom: -10px;
    /*border-top: 10px solid #3a3744;*/
    border-top: 10px solid red;
  }
  
  .timeline-content.bottom::before {
    top: -10px;
    /*border-bottom: 10px solid #3a3744;*/
    border-bottom: 10px solid red;
  }
  
  .timeline-content h3 {
    margin: 0 0 10px;
    color: #ffcc00;
    font-size: 20px;
  }
  
  .timeline-content p {
    margin: 0;
    font-size: 18px;
    color: #fff;
  }


/* NUOVA TIMELINE DI PROVA */
.timeline-svg-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

.timeline-svg {
    min-width: 1000px; /* Assicura che l'immagine mantenga la sua larghezza minima */
    height: auto;
    display: block; /* Rimuove lo spazio extra sotto l'immagine */
    margin-bottom: 30px;
}

/* Stile per la barra di scorrimento */
.timeline-svg-container::-webkit-scrollbar {
    height: 12px;
}

.timeline-svg-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.timeline-svg-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.timeline-svg-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* FINE NUOVA TIMELINE DI PROVA */

  .competence-item {
    margin: 0 40px;
  }

  .lista-competenze {
    /*border: 2px solid #765AEE;*/
    /*border-radius: 15px;*/
    /*padding: 20px;*/
    color: white;
    margin: 0 40px;
  }
  
  .lista-competenze h2 {
    font-size: 30px;
    margin-bottom: 15px;
    margin-top: 0;
    text-align: left;
  }
  
  .lista-competenze ul {
    list-style-type: none;
    padding-left: 0;
  }
  
  .lista-competenze > ul > li {
    margin-bottom: 10px;
  }
  
  .lista-competenze summary {
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    color: #ffcc00;
  }
  
  .lista-competenze details > ul {
    padding-left: 20px;
    margin-top: 10px;
  }
  
  .lista-competenze details > ul > li {
    margin-bottom: 5px;
    font-size: 20px;
  }

.loghi-software {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
  
.logo-row {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding-top: 20px;
}
  
.logo-row img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.servizi-disponibili {
    margin: 0 40px;
}

.servizi-disponibili h2 {
    font-size: 30px;
    margin-bottom: 15px;
    margin-top: 0;
    text-align: left;
}

.servizi-disponibili ul {
    list-style-type: none;
    padding-left: 0;
}

.servizi-disponibili > ul > li {
    margin-bottom: 10px;
}

.servizi-disponibili .servizi-title {
    font-weight: bold;
    font-size: 20px;
    color: #ffcc00;
}

.servizi-disponibili ul ul {
    padding-left: 20px;
    margin-top: 10px;
}

.servizi-disponibili ul ul li {
    margin-bottom: 5px;
    font-size: 20px;
}


.interests {
    margin-top: 40px;
    padding-bottom: 30px;
    text-align: center;
    color: white;
}

.interests h2{
    font-size: 30px;
}

.interests-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px 0px;
    margin-top: 40px;
}

.interest-item {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}

/*.interest-item img {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.2s;
}*/

.interest-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.interest-item img:hover {
    transform: scale(1.1);
}

@media screen and (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .profile-content {
        flex-direction: column;
        align-items: center; /* Centra gli elementi in colonna su schermi piccoli */
    }

    .profile-image {
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    .profile-text {
        padding-right: 0;
        padding-bottom: 20px;
        text-align: center; /* Centra il testo su schermi piccoli */
    }

    .logo-row {
        flex-wrap: wrap;
        padding-top: 0;
      }

    .logo-row img{
        width: 60px;
        height: 60px;
    }

}
    @media screen and (max-width: 768px) {
    .servizi-disponibili2-wrapper {
        justify-content: center;
    }
        
    .servizi-disponibili2 {
        max-width: 100%;
    }

    .interests-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .interests-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}