/* public/css/contact.css */

/* General Contact Page Styling */
.contact-main {
    padding-top: 4rem; /* Equivalent to py-16 */
    padding-bottom: 4rem; /* Equivalent to py-16 */
    background-color: #f9f9f9; /* Light background for the section */
}

.contact-main .container {
    max-width: 1200px; /* Equivalent to mx-auto */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* Equivalent to px-6 */
    padding-right: 1.5rem; /* Equivalent to px-6 */
}

@media (min-width: 768px) {
    .contact-main .container {
        padding-left: 4rem; /* Equivalent to md:px-16 */
        padding-right: 4rem; /* Equivalent to md:px-16 */
    }
}

@media (min-width: 1024px) {
    .contact-main .container {
        padding-left: 6rem; /* Equivalent to lg:px-24 */
        padding-right: 6rem; /* Equivalent to lg:px-24 */
    }
}

.contact-main .grid {
    display: grid;
    gap: 3rem; /* Equivalent to gap-12 */
    align-items: center;
}

@media (min-width: 768px) {
    .contact-main .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Equivalent to md:grid-cols-2 */
    }
}

.contact-text h1 {
    font-size: 2.25rem; /* Equivalent to text-4xl */
    font-weight: 700; /* Equivalent to font-bold */
    color: #1b2a49; /* Specific color */
    margin-bottom: 1.5rem; /* Equivalent to mb-6 */
}

.contact-text p {
    color: #4a5568; /* Equivalent to text-gray-700 */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
}

.contact-text p.font-medium {
    font-weight: 500; /* Equivalent to font-medium */
}

.contact-image {
    text-align: center;
}

.contact-image div {
    width: 100%; /* Equivalent to w-full */
    height: 18rem; /* Equivalent to h-72 */
    background-color: #edf2f7; /* Equivalent to bg-gray-100 */
    border-radius: 0.75rem; /* Equivalent to rounded-xl */
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .contact-image div {
        height: 20rem; /* Equivalent to md:h-80 */
    }
}

.contact-image span {
    color: #a0aec0; /* Equivalent to text-gray-400 */
}

.contact-main .text-center.mt-16 {
    margin-top: 4rem; /* Equivalent to mt-16 */
    margin-bottom: 2rem; /* Equivalent to mb-8 */
}

.contact-main .text-center.mt-16 p {
    color: #4a5568; /* Equivalent to text-gray-700 */
}

/* Form Styling */
.contact-form {
    max-width: 42rem; /* Equivalent to max-w-2xl */
    margin-left: auto;
    margin-right: auto;
    space-y-6: 1.5rem; /* Equivalent to space-y-6 */
}

.contact-form > div {
    margin-bottom: 1.5rem; /* For space-y-6 */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%; /* Equivalent to w-full */
    background-color: #edf2f7; /* Equivalent to bg-gray-100 */
    padding: 1rem; /* Equivalent to p-4 */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    border: 1px solid #e2e8f0; /* Equivalent to border border-gray-200 */
    outline: none;
    transition: all 0.2s ease-in-out;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #8cc63f; /* Focus ring color */
    box-shadow: 0 0 0 2px rgba(140, 198, 63, 0.5); /* Focus ring */
}

.contact-form textarea {
    min-height: 8rem; /* Equivalent to rows="5" (approx) */
    resize: vertical;
}

.contact-form button[type="submit"] {
    background-color: #8cc63f; /* Specific green color */
    color: white;
    padding: 0.75rem 2.5rem; /* Equivalent to px-10 py-3 */
    border-radius: 9999px; /* Equivalent to rounded-full */
    font-weight: 600; /* Equivalent to font-semibold */
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.contact-form button[type="submit"]:hover {
    background-color: #79b134; /* Darker green on hover */
}

/* Ensure consistency with welcome.css for general elements if needed */
/* For example, if welcome.css defines .container or .btn, ensure these are consistent */
/* Assuming custom.css and responsive.css handle global styles like body, html, etc. */