/* Basic Reset & Body Styles */

body {

    margin: 0;

    font-family: Arial, sans-serif; /* Or your preferred font */

    line-height: 1.6;

    color: #333;

    box-sizing: border-box;

}
 
/* Main Container for the whole section */

.contact-section-wrapper {

    display: flex;

    min-height: 100vh; /* Occupy full viewport height */

    overflow: hidden; /* Prevent content overflow */

}
 
/* Image Side Container */

.contact-image-container {

    flex: 1; /* Takes up equal space as the form container initially */

    background-image: url('../img/contact_img.webp'); /* Placeholder image URL */

    background-size: cover;

    background-position: center;
   
    min-height: 400px;
   

}
 
/* Form Side Container */

.contact-form-container {

    flex: 1; /* Takes up equal space as the image container initially */

    padding: 40px;

    display: flex;

    flex-direction: column;

    justify-content: center; /* Center content vertically */

    box-sizing: border-box; /* Include padding in element's total width and height */

    background-color: #fff;

}
 
.contact-title {

    font-size: 3em;

    margin-bottom: 20px;

    color: #000;

}
 
.spacer {

    height: 20px; /* Adjust as needed */

}
 
.contact-description {

    font-size: 1.1em;

    margin-bottom: 30px;

    line-height: 1.8;

}
 
/* Form Styles */

.contact-form {

    width: 100%;

    max-width: 600px; /* Limit form width */

}
 
.form-fields-wrapper {

    display: flex;

    flex-wrap: wrap; /* Allow fields to wrap on smaller screens */

    gap: 20px; /* Space between form fields */

}
 
.form-field-group {

    flex-grow: 1; /* Allow fields to grow */

    display: flex;

    flex-direction: column;

}
 
.form-field-group.half-width {

    flex-basis: calc(50% - 10px); /* Two fields per row, accounting for gap */

}
 
.form-field-group.full-width {

    flex-basis: 100%; /* Full width for single fields */

}
 
.form-input {

    padding: 12px 15px;

    border: 1px solid #ddd;

    border-radius: 5px;

    font-size: 1em;

    width: 100%; /* Ensure input takes full width of its container */

    box-sizing: border-box; /* Include padding and border in width */
    font-family: inherit;

}
 
.form-input::placeholder {

    color: #aaa;

}
 
.form-input:focus {

    outline: none;

    border-color: #f75d5f; /* Highlight on focus */

}
 
.textarea-field {

    resize: vertical; /* Allow vertical resizing for text area */

    min-height: 120px;

}
 
.submit-button {

    background-color: #f75d5f; /* Red color from the image */

    color: white;

    padding: 15px 30px;

    border: none;

    border-radius: 50px;

    font-size: 1.1em;

    cursor: pointer;

    transition: background-color 0.3s ease;

    max-width: 200px;

    /* display: block;  */

}
 
.submit-button:hover {

    background-color: white;
    border: #f75d5f 2px solid; 
    color: #f75d5f;

}
 
.screen-reader-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0,0,0,0);

    border: 0;

}
 
/* Responsive Design */

@media (max-width: 992px) {

    .contact-section-wrapper {

        flex-direction: column; /* Stack image and form vertically on smaller screens */

    }
 
    .contact-image-container {

        min-height: 300px; /* Adjust height for tablet */

        flex: none; /* Remove flex grow */

        width: 100%;

    }
 
    .contact-form-container {

        padding: 30px;

        flex: none; /* Remove flex grow */

        width: 100%;

        align-items: center; /* Center form content horizontally */

        text-align: center; /* Center text */

    }
 
    .contact-title {

        font-size: 2.5em;

    }
 
    .contact-description {

        font-size: 1em;

    }
 
    .contact-form {

        max-width: 100%; /* Allow form to take more width on tablets */

    }
 
    .form-fields-wrapper {

        justify-content: center; /* Center fields in form */

    }
 
    .submit-button {

        width: 80%; /* Make button wider on tablets */

        margin: 0 auto; /* Center the button */

    }

}
 
@media (max-width: 768px) {

    .contact-form-container {

        padding: 20px;

    }
 
    .contact-title {

        font-size: 2em;

    }
 
    .form-field-group.half-width {

        flex-basis: 100%; /* Stack fields vertically on mobile */

    }
 
    .submit-button {

        width: 100%; /* Full width button on mobile */

    }

}
 
@media (max-width: 480px) {

    .contact-image-container {

        /* min-height: 200px;  */
        margin-top: 100px;

    }
 
    .contact-form-container {

        padding: 15px;

    }

    .contact-title {

        font-size: 1.8em;

    }
 
    .contact-description {

        font-size: 0.9em;

    }

}