#bottom-section{
  background: url('../images/attivita-notarili.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#bottom-section::before{
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-color: var(--lightblue);
  opacity: .9;
}

.bottom-activity {
  position: relative;
  overflow: hidden;
  padding-bottom: 1.5rem;
}

.custom-activity .bottom-activity::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--blue);
  transition: transform 0.5s ease-in-out;
  transform: scaleX(1);
  transform-origin: left;
}

.custom-activity .bottom-activity::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--blue);
  transition: transform 0.5s ease-in-out;
  transform: scaleX(0);
  transform-origin: right;
}

.custom-activity:hover .bottom-activity::before {
  transform-origin: right;
  transform: scaleX(0);
  transition-delay: 0.3s;
}

.custom-activity:hover .bottom-activity::after{
  transform-origin: left;
  transform: scaleX(1);
  transition-delay: 0.6s;
}

#activity .custom-activity #arrow-activity{
  transform: rotate(45deg);
  transition: transform .3s ease-in;
}

#activity .custom-activity:hover .bottom-activity p{
  text-decoration: underline;
}

#activity .custom-activity:hover #arrow-activity{
  transform: rotate(-45deg);
}

@media (min-width: 1200px) {
  .custom-activity{
    height: 330px;
  }
}