/* test */



.hidden {

    display: none !important;

    overflow: hidden;

    transition: max-height 0.5s ease-in-out;

  }

  

  .toggle-text {

    /* border: 1px solid red; */



    cursor: pointer;

    font-weight: lighter;

    font-size: 2rem;

    padding-left: 5%;

    padding-right: 5%;

    margin-top: 3rem;



    display: flex;

    align-items: center;

    justify-content: space-between;

    width: auto;

    text-align: left;

  }

  

  .toggle-text:hover {

    text-decoration: none;

    font-style: italic;

    color: darkgray;

  }



  .sezione-linea {

    border: none;

    height: 1px;

    background-color: rgb(0, 0, 0);

    width: 90%;

    margin: 0 auto;

}



    .arrow {

        transition: transform 0.3s ease-in-out; /* Animazione fluida */

        margin-left: 10px;

    }



    /* Quando la sezione è chiusa, la freccia punta in giù */

    .toggle-text .arrow {

        transform: rotate(0deg);

    }



    /* Quando la sezione è aperta, la freccia ruota in su */

    .toggle-text.active .arrow {

        transform: rotate(180deg);

    }



    /* fino a qui era la parte relativa al menu a tendina per il portfolio */



/* come editare le immagini dei progetti */



.bg-one {

    background: url('Astro_Thumbnail.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.bg-two {

    background: url('pff_animazione.gif');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.bg-three {

    background: url('mof_Website-template-copia.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.bg-four {

    background: url('elysium_thumb.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.bg-five {

    background: url('Encanto_thumb.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.bg-six {

    background: url('GD_GIF1.gif');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}

.bg-seven {

    background: url('Logofolio-thumbnail.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}

.bg-eight {

    background: url('Sottoterrathumbnail.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}

.bg-nine {

    background: url('palazzoricci_thumb.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}

.bg-ten {

    background: url('Anfora\ thumbnail.gif');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}

.bg-eleven {

    background: url('illustrazione_thumb.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}

.bg-twelve {

    background: url('Musicart-clues.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.bg-thirteen {

    background: url('VALENTINO.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.bg-fourteen {

    background: url('products_rode_thumb.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.bg-fifteen {

    background: url('products-applewatch1.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.bg-sixteen {

    background: url('scavolini.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.bg-seventeen {

    background: url('POSTER_nosferatu.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.bg-eighteen {

    background: url('To\ walk\ in\ someone.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



/* parte relativa alla sezione portfolio in sé: anteprime progetti, testi, ecc. */



.portfolio {

    /* border: 1px solid red; */

    display: flex;

    flex-direction: column;

    margin-bottom: 100px;

}



.thumbnail {

    /* border: 1px solid green; */

    display: flex;

    flex-direction: column;

    margin: 20px;

}



.thumbnail h3 {

    color: black;

    padding: 15px 0;

    font-size: 1.25rem;

}





.parent {

    /* border: 1px solid blue; */

    display: flex;

    flex-direction: column;



    height: 300px;

    overflow: hidden;

    position: relative;

    color: black;

    border-radius: 10px;

}



.parent h3 {

    padding: 10px 0px;

}



.child {

    height: 100%;

    width: 100%;

    transition: all 1.1s;

    overflow: hidden;

}



.parent:hover .child {

    transform: scale(1.1);

    border-radius: 10px;

}



/* hover sulle immagini per farle diventare blu */



.parent {

    position: relative;

    display: inline-block;

}



.child {

    transition: transform 0.3s ease-in-out;

}



.parent:hover .child {

    transform: scale(1.1);

    border-radius: 10px;

}



.parent::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #002fa700; /* Blu trasparente */

    transition: background-color 0.3s ease-in-out;

    border-radius: 10px;

}



.parent:hover::after {

    background-color: rgba(0, 0, 255, 0.3); /* Sovrapposizione blu */

}



/* hover sulle immagini per farle diventare blu */



 .otherimages {

    display: flex;

    justify-content: space-between;



}



.otherimages .imgplus {

    width: 49.8%;

}



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



    .toggle-text {

        font-size: 5rem;

      }



    .portfolio {

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: space-between;

        /* transform: translateY(-15vh); */

    }



    .parent {

        height: 400px;

    }



    .thumbnail {

        width: 29%;

    }

}