@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merge+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=K2D&display=swap');

.contact{
    display: flex;
    align-items: center; 
    padding: 140px 100px 200px 120px;
    gap: 200px;
}

.text-container-contact {
    flex: 1; 
    text-align: left;
    max-width: 500px;
}

.image-container-contact {
    flex: 1; 
    display: flex;
    justify-content: center; 
    align-items: center; 
}

.image-container-contact img {
    width: 100%; 
    max-width: 400px;
    height: auto;
}

.text-container-contact h2{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 32px;
    font-weight: 400;
    margin: 0;
}

.text-container-contact h3{
    font-family: 'Cinzel', serif;
    font-size: 36px;
    margin: 15px 0;
}

.text-container-contact p{
    margin: 20px 0;
}

/* ---------------------------------------------formulier-------------------------------------- */
.offerte{
    background-color: var(--background-beige);
    padding: 60px;
    align-items: center;
    display: flex;
    text-align: center;
}

.form-container h3{
    padding: 0 auto;
}

.form-container {
    background: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
    margin: auto;
}

.form-row, .form-row-l {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.form-row input, 
.form-row select {
    width: 48%;
    padding-top: 10px;    
    padding-bottom: 10px;
    border: 1px solid #ccc;
}
.form-group{
    width: 96%;
}
/* Tekstvelden */
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    resize: vertical;
    height: 100px;
    margin-bottom: 20px;
}

/* Verzenden knop */
button {
    width: 25%;
    padding: 12px;
    color: var(--main-colour);
    background-color: white;
    border: 1px solid var(--main-colour);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background-color: var(--main-colour);
    color: white;
}

h9{
    font-family: 'Merge-One', sans-serif;
    font-size: 12px;
}

.algemene-voorwaarden{
    text-align: left;
}

.form-row-l {
    padding-top: 10px;    
    padding-bottom: 10px;
}

.algemene-voorwaarden a{
    font-weight: bolder;
}