.jotform-container {
    max-width:70%;
    margin: 0 auto;
    padding: var(--header-top-padding);

    .form-title {
        font-size: var(--sub-title-font-size);
        font-weight: 600;
        font-family: var(--font-heading);
        color: var(--color-dark);
        margin-bottom: var(--header-bottom-padding);
        text-align: center;
    }

    .form-field {
        margin-bottom: 20px;
    }

    .form-label {
        font-family: var(--font-heading);
        color: var(--color-dark);

        &.required::after {
            content: " *";
            color: #e74c3c;
        }
    }

    .form-input,
    .form-textarea {
        width: 100%;
        padding: 12px;
        border: 2px solid var(--color-neutral);
        font-family: var(--font-body);
        transition: border-color 0.3s ease;
        background: white;

        &:focus {
            outline: none;
            border-color: var(--color-primary);
        }

        &:disabled {
            background-color: var(--color-neutral);
            color: var(--color-grey);
            cursor: not-allowed;
        }

        &.error {
            border-color: #e74c3c;
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
        }

        &::placeholder {
            color: var(--color-grey);
        }
    }

    .form-textarea {
        resize: vertical;
        min-height: 120px;
    }

    .submit-btn {
        width: 100%;
        padding: 14px;
        background-color: var(--color-primary);
        color: white;
        border: none;
        font-family: var(--font-heading);
        transition: background-color 0.3s ease;

        &:hover {
            background-color: #2570a8; /* Darker shade of your primary color */
        }

        &:active {
            transform: translateY(1px);
        }

        &:disabled {
            background-color: var(--color-grey);
            cursor: not-allowed;
            
            &:hover {
                background-color: var(--color-grey);
            }
        }
    }
}