.dryer{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  background-image: radial-gradient(circle at bottom left, white, #d7da2e);
  width: 100%;
  height: 90vh;
  position: relative;
  overflow: hidden; /* Assicura che l'elemento non mostri parti extra */
}
.dryer:hover .gradiente-dryer{
  opacity: 1; /* Fa apparire il gradiente al passaggio del mouse */
}
.gradiente-dryer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: radial-gradient(circle at top right, #61bd58, white); */
    background-color: #d7da2e;
    transition: opacity 0.5s ease-in-out;
    opacity: 0; /* Nasconde il gradiente inizialmente */
}
#canvasD {
    width: 100%;
    height: 90vh;
  }
.leftDryer{
    width: 60%;
    display: flex;
    justify-content: flex-start;
    z-index: 1;
}
.textDryer {
    color:white; 
    font-size:20px; 
    text-align: right;
    transition: color 0.5s ease-in-out;
}
.dryer:hover .textDryer {
  color: #666666;
}
.imageDry { 
  position: relative; 
  margin-top: 100px; 
  filter: brightness(1);
  transition: filter 0.5s ease-in-out;
}
.dryer:hover .imageDry {
  filter: brightness(0.5);
}

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

    .dryer {
        height: 100vh;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
    }

    .leftDryer{
        width: 90%;
    }

}