:root {
    --contact-form-primary-bg-color: #d24538;
    --contact-form-secondary-bg-color: #c34033;
    --contact-form-secondary-color: var(--secondary-color);
    --contact-form-secondary-color-dark: var(--secondary-color-dark);
    --contact-form-padding-horizontal: 2vw;
    --contact-form-padding-vertical: 1vw;
    --contact-form-border-radius: 2.5vw;
    --contact-form-input-padding: 0.75vw;
    --contact-form-font-family: var(--font-family);
}


#contact-form {
    border-radius: var(--contact-form-border-radius);
    background: var(--contact-form-primary-bg-color);
}

/* Header Styling */
#contact-form > div:first-child {
    border-top-left-radius: var(--contact-form-border-radius);
    border-top-right-radius: var(--contact-form-border-radius);
    background-color: var(--contact-form-secondary-bg-color);
    padding: var(--contact-form-padding-vertical) var(--contact-form-padding-horizontal);
    margin-bottom: 0.5vw;
}

#contact-form h1 {
    color: var(--contact-form-secondary-color);
    font-size: 2.25vw;
    margin: 0;
}

#contact-form h2 {
    color: var(--contact-form-secondary-color-dark);
    font-size: 1.5vw;
    margin: 0;
}

#contact-form h3 {
    color: var(--contact-form-secondary-color-dark);
    font-size: 1vw;
}

/* Form Fields Container */
#contact-form .input-section {
    display: flex;
    justify-content: space-between;
    gap: 2.5%;
}

#contact-form .input-section div {
    flex: 1;
}

/* Input Field Styling */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
    width: 100%;
    padding: var(--contact-form-input-padding);
    border-radius: 0.5vw;
    border: none;
    background-color: var(--contact-form-secondary-bg-color);
    color: var(--contact-form-secondary-color-dark);
    opacity: 0.5;
    font-size: 1vw;
}

#contact-form input[type="text"]::placeholder ,
#contact-form input[type="email"]::placeholder ,
#contact-form textarea::placeholder {
    color: var(--contact-form-secondary-color-dark);
}

#contact-form input[type="text"]:focus ,
#contact-form input[type="email"]:focus ,
#contact-form textarea:focus {
    outline: none;
}

/* Label Styling */
#contact-form h2 {
    margin-bottom: 0.5vw;
}

/* Textarea Styling */
#contact-form textarea {
    height: 15vh;
    resize: vertical; /* Allows resizing only vertically */
    padding: var(--contact-form-input-padding);
    margin-bottom: 0;
}

/* Textarea Styling */
#contact-form button {
    width: -webkit-fill-available;
    margin-top: 1.5vw;
    padding: 0.5vw;
    background-color: var(--contact-form-secondary-color-dark);
    border: none;
    border-radius: 0.5vw;
    color: var(--contact-form-secondary-bg-color);
    font-family: var(--contact-form-font-family);
    font-size: 1.5vw;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transform: translateY(1vw);
    transition: transform 1s ease, opacity 1s ease, display 1s ease;
    display: none;
    opacity: 0;
}

#contact-form .contact-form-message-container {
    margin-top: 1.5vw;
}

#contact-form .contact-form-input-form {
    padding: 1.5vw 3vw;
}

/* Hover Animation */
#contact-form button.show:active {
    transform: scale(0.95);
    opacity: 0.5;
}

/* Click Animation */
#contact-form button.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}


@media (max-width: 768px) or (orientation: portrait) {
    #contact-form h1 {
        font-size: 6vw;
    }

    #contact-form h2 {
        margin-bottom: 1vw;
        font-size: 4.5vw;
    }

    #contact-form h3 {
        font-size: 3vw;
        opacity: 0.75;
    }

    #contact-form .input-section {
        flex-direction: column;
        gap: 5vw;
    }

    #contact-form input[type="text"], 
    #contact-form input[type="email"], 
    #contact-form textarea {
        font-size: 3.5vw;
        border-radius: 1.5vw;
    }

    #contact-form .contact-form-message-container {
        margin-top: 5vw;
    }

    #contact-form .contact-form-input-form {
        padding: 3vw 4vw;
    }

    #contact-form button.show {
        font-size: 5vw;
        border-radius: 1.5vw;
    }
}