.visitor-form-section {
    background: #EEAECA;
    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px; /* py-10 px-5 */
}

.visitor-container {
    width: 80%;
    /* max-width: 448px; max-w-md -> 448px */
    background-color: #ffffff;
    border-radius: 24px; /* rounded-3xl -> 24px */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    padding: 32px 40px; /* p-8 sm:p-10 */
    transition: all 0.3s ease-in-out; /* transform transition-all duration-300 */
    border: 1px solid transparent;
}

.form-title {
    font-size: 36px; /* text-4xl */
    line-height: 1; /* text-4xl */
    font-weight: 800; /* font-extrabold */
    text-align: center;
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 24px; /* mb-6 */
    background-image: linear-gradient(to right, #8b5cf6, #ec4899); /* from-purple-600 to-pink-500 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* fallback for browsers that don't support -webkit-text-fill-color */
}

@media (min-width: 640px) { /* sm breakpoint */
    .form-title {
        font-size: 48px; /* sm:text-5xl */
    }
}

.form-subtitle {
    text-align: center;
    color: #4b5563; /* text-gray-600 */
    margin-bottom: 32px; /* mb-8 */
    font-size: 18px; /* text-lg */
}

.form-group {
    margin-bottom: 24px; /* space-y-6 equivalent for individual div */
}

.form-group:last-of-type {
    margin-bottom: 0; /* Remove bottom margin for the last group if needed, or adjust form's overall spacing */
}


.form-label {
    display: block;
    color: #374151; /* text-gray-700 */
    font-size: 16px; /* text-base */
    font-weight: 600; /* font-semibold */
    margin-bottom: 8px; /* mb-2 */
}

.form-input,
.form-textarea,
.form-select {
    width: 95%;
    padding: 12px 20px; /* px-5 py-3 */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    border-radius: 12px; /* rounded-xl */
    transition: all 0.2s ease-in-out; /* transition-all duration-200 */
    color: #1f2937; /* text-gray-800 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    font-size: 16px; /* text-base */
    outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #9ca3af; /* placeholder-gray-400 */
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #6366f1; /* focus:border-indigo-500 */
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* focus:ring-indigo-500 + existing shadow */
}

.form-textarea {
    resize: vertical; /* resize-y */
    min-height: 100px; /* Adjust as needed, similar to rows="4" */
}

.submit-button {
    margin-top: 50px;
    width: 95%;
    background-image: linear-gradient(to right, #a78bfa, #f472b6); /* bg-gradient-to-r from-purple-500 to-pink-500 */
    color: #ffffff;
    font-weight: 700; /* font-bold */
    padding: 12px 24px; /* py-3 px-6 */
    border-radius: 12px; /* rounded-xl */
    font-size: 18px; /* text-lg */
    letter-spacing: 0.05em; /* tracking-wide */
    transition: all 0.3s ease-in-out; /* transition-all duration-300 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    border: none;
    cursor: pointer;
}

.submit-button:hover {
    background-image: linear-gradient(to right, #8b5cf6, #ec4899);
}

.submit-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.75), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* focus:ring-4 focus:ring-purple-300 focus:ring-opacity-75 */
}