#contact {
    margin: 50px 0;
    text-align: center;
}

#contact h2 {
    font-size: 1.5em;
    cursor: default;
    color: #333;
}

.step label {
    font-size: 3em;
    cursor:help;
    color: #333;
}

.step p {
    font-size: 2em;
    color: #5559;
}

.step select  {
    font-size: 1em;
    border: none;
    border-bottom: 2px solid #5559;
    background: transparent;
    padding: 5px;
    outline: none;
    background: linear-gradient(90deg, #ff992d, #ff25cc, #ff992d);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    animation: moveGradient 5s infinite ease-in-out alternate;
}

.step select:focus {
    border-bottom: 2px solid #3998f7;
    transition: 0.3s ease-in-out;
}

.step input {
    border: none;
    border-bottom: 2px solid #aaa;
    background: transparent;
    font-size: 1em;
    outline: none;
    color: #aaa;
    background-image: linear-gradient(90deg, #ff992d, #ff25cc, #ff992d);
    background-size: 300% 300%;
    background-clip: text;
    color: transparent;
    animation: moveGradient 5s infinite ease-in-out alternate;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step input::placeholder {
    color: #aaa;
    -webkit-text-fill-color: initial;
}

.setp input:-webkit-autofill {
    background-image: linear-gradient(90deg, #ff992d, #ff25cc, #ff992d);
    background-size: 300% 300%;
    background-clip: text;
    color: transparent;
    animation: moveGradient 5s infinite ease-in-out alternate;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step input:focus {
    border-bottom: 2px solid #3998f7;
    transition: 0.3s ease-in-out;
}

.step textarea {
    width: 40%;
    height: 150px;
    font-size: 1em;
    border: 2px solid #5555;
    background: transparent;
    color: #aaa;
    resize: none;
    padding: 10px;
    outline: none;
    background-image: linear-gradient(90deg, #ff992d, #ff25cc, #ff992d);
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: moveGradient 5s infinite ease-in-out alternate;
}

.step textarea::placeholder {
    color: #aaa;
    -webkit-text-fill-color: initial;
}

.step textarea:focus {
    border-color: #3998f7;
    transition: 0.3s ease-in-out;
}

.prevButton {
    background: #fff;
    color: #3998f7;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 10px;
    width: 15%;
}

.prevButton:hover {
    background: #f0f0f0;
}

.nextButton,
.submitButton {
    background: #3998f7;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 10px;
    width: 15%;
}

.nextButton:hover,
.submitButton:hover {
    background: #0e66be;
}

.progress-text {
    font-size: 0.9em;
    color: #aaa;
    text-align: center;
}

@media (max-width: 768px) {
    .step input,
    .step select {
        text-align: center;
    }

    .step textarea {
        width: 80%;
    }
    
    .nextButton,
    .prevButton,
    .submitButton {
        margin: 5px;
        width: 50%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {    
    .step textarea {
        width: 70%;
    }

    .nextButton,
    .prevButton,
    .submitButton {
        margin: 0px 10px;
        width: 25%;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .step textarea {
        width: 60%;
    }

    .nextButton,
    .prevButton,
    .submitButton {
        margin: 0px 10px;
        width: 20%;
    }
}

@media (min-width: 1281px) and (max-width: 1440px) {
    .nextButton,
    .prevButton,
    .submitButton {
        margin: 0px 10px;
        width: 20%;
    }
}

@media (min-width: 2560px) {
    
}