#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 250px 0 150px;
    min-height: 450px;
    overflow: hidden;
    background-color: var(--color-purple);
    color: #fff;
    position: relative;
}

#hero h1 {
    color: #fff
}
#hero p{
    max-width: 483px;
    /* color: var(--color-purple-other) */
}
@media screen and (min-width:992px) and (max-width: 1441px) {
  #hero h1 {
    margin-left: 30px;
  }
}