#body {
    font-family: Arial, Helvetica, sans-serif;
}
#div {
    font-family: Arial, Helvetica, sans-serif;
}

.navbar {
    width: 280px;
    height: auto;
    background-color: white;
    color: black;
    position: relative;
    top: 200px;
    left: 0;
    transform: translate(0, -0%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    z-index: 10;
    /
}

.nav-section {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    /* Aggiunge distanza tra i menu */
}

.nav-section a {
    display: flex;
    padding: 15px 30px;
    color: black;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.submenu {
    position: relative;
}

.nav-section a::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background-color: #fff;
    transform-origin: bottom right;
    transform: skew(-38deg);
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.clearfix {
    clear: both;
}

.submenu {
    display: none;
    list-style: none;
    /* Rimuove i puntini elenco */
    padding: 0;
    /* Rimuove il padding predefinito */
    margin: 0;
    /* Rimuove il margine predefinito */
    flex-direction: column;
    position: absolute;
    left: calc(100% + 20px);
    /* Sposta i sottomenu più a destra */
}

.submenu-container {
    flex-direction: column;
    position: relative;
    /* Cambia da absolute a relative */
    top: -40px;
    /* Sposta il sottomenu più in alto rispetto al menu principale */
    left: calc(100% + 20px);
    /* Sposta i sottomenu più a destra */
}

.nav-section.open .submenu {
    display: flex;
}

.submenu a {
    padding: 20px 90px;
    background-color: #f0f0f0;
    margin-bottom: 10px;
    /* Distanza tra le voci del sottomenu */
}

.submenu a:hover {
    background-color: #e0e0e0;
}

.submenu .submenu {
    top: 0;
    left: calc(100% + 10px);
    /* Sposta i sottomenu delle sottocategorie più a destra */
}

.progetti-section a {
    padding: 15px 25px;
    /* Aumenta il padding per rendere i sottomenu più lunghi */
    width: 200px;
    /* Imposta la larghezza del sottomenu */
    bottom: 218px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    background-color: rgb(85, 140, 249);
}

.progetti-submenu {
    position: relative;
    top: -64px;
    left: 270px;
    padding: 15px 25px;
    font-family: Arial, Helvetica, sans-serif;
}

.progetti-submenu a {
    padding: 15px 20px;
    position: relative;
    left: 20px;
}


/*  realizzazioni */

.progetti-titolo {
    position: relative;
    top: -74px;
    padding: 15px 330px;
    width: 210px;
    left: 315px;
    font-family: Arial, Helvetica, sans-serif;
}

.progetti-titolo a {
    bottom: -5px;
    left: -50px;
    padding: 15px 15px;
    width: 200px;
    font-family: Arial, Helvetica, sans-serif;
}


/* testi */

.progetti-titolo {
    bottom: -105px;
    padding: 15px 50px;
    width: 200px;
    left: 315px;
    font-family: Arial, Helvetica, sans-serif;
}

.progetti-titolo a {
    bottom: -5px;
    left: -50px;
    padding: 15px 10px;
    width: 200px;
    font-family: Arial, Helvetica, sans-serif;
}

.progetti-sectionn a {
    padding: 15px 50px;
    width: 200px;
    bottom: -10px;
    left: -45px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(157, 187, 247);
    padding: 15px 20px;
}


/* pagine presenti in progetti  */

.pagine {
    width: 800px;
    text-align: left;
    position: relative;
    top: 400px;
    margin-left: 20px;
}

.pagine2 {
    width: 800px;
    text-align: left;
    position: absolute;
    top: 2240px;
    margin-left: 20px;
}

.scritti-section a {
    padding: 15px 55px;
    width: 200px;
    /* Imposta la larghezza del sottomenu */
    bottom: 90px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
}

.scritti-submenu {
    bottom: 0px;
    padding: 15px 15px;
    /* Aumenta il padding per rendere i sottomenu più lunghi */
    font-family: Arial, Helvetica, sans-serif;
}


/*  realizzazioni */

.arte-titolo {
    bottom: -80px;
    left: 270px;
    padding: 12px 15px;
    /* Aumenta il padding per rendere i sottomenu più lunghi */
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 20px;
    margin-left: 20px;
}

.real {
    width: 250px;
}

.arte-sectionn a {
    padding: 15px 35px;
    /* Aumenta il padding per rendere i sottomenu più lunghi */
    width: 200px;
    /* Imposta la larghezza del sottomenu */
    bottom: 105px;
    left: -5px;
    font-family: Arial, Helvetica, sans-serif;
}

.testi-titolo {
    position: relative;
    bottom: -140px;
    padding: 15px 15px;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 20px;
    margin-left: 20px;
    white-space: nowrap;
    /* Impedisce al testo di andare a capo */
    text-align: left;
    left: 305px;
}

.testi-titolo a {
    position: relative;
}

.testi-section a {
    width: 200px;
    /* Imposta la larghezza del sottomenu */
    bottom: 90px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    font-size: 10px;
}

.filosofia-submenu {
    bottom: -30px;
    padding: 15px 15px;
    /* Aumenta il padding per rendere i sottomenu più lunghi */
    font-family: Arial, Helvetica, sans-serif;
}


/*  realizzazioni */

.filosofia-titolo {
    bottom: -1105px;
    left: 270px;
    padding: 12px 15px;
    /* Aumenta il padding per rendere i sottomenu più lunghi */
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 20px;
    margin-left: 20px;
}


/* testi terza parte del menu della pagina principale */

.testi-sectionn a {
    padding: 15px 50px;
    width: 200px;
    bottom: -10px;
    left: 5px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #bed0f2;
    padding: 15px 20px;
}

.disegnata-titolo {
    padding: 15px 20px;
    position: relative;
    top: 120px;
    left: 305px;
}

.disegnata-sectionn a {
    padding: 15px 50px;
    width: 200px;
    bottom: -80px;
    left: 5px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #e7effe;
    padding: 15px 0px;
}

.disegnata-titolo a {
    padding: 15px 20px;
}

.disegnata-titolo {
    bottom: -350px;
    padding: 12px 15px;
    /* Aumenta il padding per rendere i sottomenu più lunghi */
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 20px;
    margin-left: 20px;
    white-space: nowrap;
    /* Impedisce al testo di andare a capo */
    text-align: left;
}

.disegnata-section a {
    width: 200px;
    /* Imposta la larghezza del sottomenu */
    bottom: 90px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    font-size: 10px;
}
.gallery-wrapper {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    transform: translate(300px, -250px); /* spostato a destra e in alto */
}

.pagine {
    font-family: Arial, Helvetica, sans-serif;
}