.form {
    width: 80vw;
    background-color: var(--white);
    border-radius: 4.8vmin;
    box-shadow: 0 2vmin 6vmin var(--shadow);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 3vmin 8vmin rgba(0, 0, 0, 0.3);
}

.form__container {
    padding: 10vmin 14vmin;
}

.form__title {
    text-align: center;
    margin-bottom: 6vmin;
    position: relative;
}

.form__title-text {
    color: var(--green);
    font-size: 5.6vmin;
}

.form__inputs {
    display: flex;
    flex-direction: column;
    gap: 4vmin; 
    margin: 8vmin;
}

.form__input {
    padding: 3vmin; 
    border: 0.2vmin solid #e0e0e0; 
    border-radius: 2.4vmin;
    font-size: 3.2vmin;
    background-color: var(--light-gray);
}

.form__input:focus {
    outline: none;
    border-color: var(--eco3);
    box-shadow: 0 0 0 0.6vmin rgba(152, 196, 50, 0.2);
    background-color: var(--white);
}

.form__input::placeholder {
    color: #9e9e9e;
}

.form__message {
    resize: vertical;
    min-height: 18vmin;
    max-height: 180vmin;
    font-family: inherit;
}

.form__buttons {
    text-align: center;
}

.form__submit {
    background: var(--eco3);
    color: #000;
    border: none;
    padding: 3vmin 8vmin; 
    border-radius: 10vmin; 
    font-size: 3.2vmin;
    cursor: pointer;
    transition: 0.4s ease-in-out;
    box-shadow: 0 0.8vmin 3vmin rgba(85, 127, 8, 0.3); 
}

.form__submit:hover {
    background: var(--eco5);
    color: var(--eco3);
    box-shadow: 0 1.2vmin 4vmin rgba(127, 74, 44, 0.6); 
}

.form__submit:active {
    transform: translateY(0);
    box-shadow: 0 0.4vmin 2vmin rgba(85, 127, 8, 0.3);
}

.form__input, .form__submit {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.form__input:nth-child(1) { animation-delay: 0.1s; }
.form__input:nth-child(2) { animation-delay: 0.2s; }
.form__input:nth-child(3) { animation-delay: 0.3s; }
.form__submit { animation-delay: 0.4s; }

@media (max-width: 120vmin) { 
    .form__container {
        padding: 6vmin 4vmin; 
    }
    
    .form__title-text {
        font-size: 4vmin;
    }
    
    .form__input {
        padding: 2.4vmin; 
    }
}

@media (max-width: 768px) {
    .form {
        border-radius: 3vmin;
    }
    
    .form__container {
        padding: 6vmin 3vmin;
    }
    
    .form__inputs {
        margin: 4vmin;
        gap: 3vmin;
    }
    
    .form__input {
        padding: 2vmin;
        font-size: 2.8vmin;
        border-radius: 2vmin;
    }
    
    .form__submit {
        padding: 2.5vmin 6vmin;
        font-size: 2.8vmin;
    }
}