.hero-section-padding{
    padding: 86px 32px;
}

.img-mobile-hero-section{ /* img mobile */
  margin: 32px 0 48px 0;
}

.hero-form-container{
  width: 100%;
  position: relative;
  
  form{
    padding: 56px 32px;
    background-color: rgba(255,255,255,0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 2px solid rgba(0,0,0,0.1);
    max-width: 400px;
    margin: -50% auto 0 auto;
    
    input, textarea{
      width: 100%;
      background-color: rgba(0,0,0,0.1);
      border: 1px solid rgba(0,0,0,0.1);
      border-radius: 12px;
      padding: 8px 16px;
      font-size: 14px;
      margin-bottom: 12px; 
    }

    ul{
      display: none;
    }

    input[type='submit']{
      background-color: var(--color-red);
      border-radius:99px;
      color: white;
      width: max-content;
      padding: 8px 24px;
      margin-top: 12px;
      transition: all 0.2s ease-out;
      cursor: pointer;

      &:hover{
        transform: scale(1.1);
      }
    }
  }
}

@media screen and (max-width:989px) {
.hero-form-container{
  form{
    position: static;
    margin: 0 auto;
  }
}