body {
    font-family:'inter', Arial, Helvetica, sans-serif; 
    display:flex; 
    flex-direction: column; 
    min-height:100vh;
    margin-bottom: 100px;
}

.content{
    display:flex; 
    justify-content:space-between; 
    gap:20px; 
}

.image-container,
.form-container {
    height: auto;
}

/* Style the image section */
.coverImage {
    object-fit: cover; 
    width: 100%; 
    height:100%; 
}

/* Form Styling */
h1, h2, h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1rem;
}

/* Style the form labels and inputs */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 90%;
    border: solid 1px black;
    padding: 40px;
    margin: 0 auto; 
}

label {
    font-size: 1rem;
    font-weight: bold;
}

/* Style the input fields */
input[type=text],input[type=email],input[type=tel] , select, textarea{
    width:100%;
    padding: 10px;
    font-size: 1rem;
    background-color: #f1f1f1;
    border: none; 
    border-radius: 5px;
    resize:vertical; 
}

#message{
    height:10rem;
}

/* Style the button */
button {
    display:flex;
    justify-content: center;
    font-family:'inter', Arial, Helvetica, sans-serif; 
    width:60%;
    padding: 10px;
    font-size: .7rem;
    background-color: black;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

.error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
}

/* Media Query for Mobile Devices */
@media screen and (max-width: 767px) {
    body {
        margin-bottom: 50px; 
    }

    .content {
        flex-direction: column; /* Stack content vertically only mobile */
    }

    .image-container,
    .form-container {
        width: 100%;
    }

    .coverImage {
        height: auto; 
    }

    form {
        padding: 20px;
    }

    label {
        font-size: 0.9rem; 
    }

    input[type="text"], select, textarea {
        padding: 12px;
        font-size: 0.9rem;
    }

    button {
        width: 80%; 
        font-size: 1rem;
    }
}

/* Media Query for Tablets*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .content {
        flex-direction: row; /* keep content horizontal */
    }

    .image-container,
    .form-container {
        width: 50%; 
    }

    form {
        padding: 30px; 
    }

    button {
        width: 70%; 
    }
}


/* Media Query for Desktop */
@media screen and (min-width: 1025px) {
    .content {
        flex-direction: row; /* keep content horizontal */
    }

    .image-container,
    .form-container {
        width: 50%; 
    }
    
    button {
        width: 40%; 
    }
}