/* BODY */

body{
font-family: "Segoe UI", Arial, sans-serif;
margin:0;
background:#f6f4f1;
color:#333;
}


/* TITEL */

.contact-section h1{

text-align:center;

font-size:38px;

margin-top:60px;

color:#3b2418;

}


/* CONTAINER */

.contact-container{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

padding:60px 20px;

}


/* INFO BOX */

.contact-info{

background:white;

padding:35px;

border-radius:12px;

box-shadow:0 15px 35px rgba(0,0,0,0.1);

transition:0.3s;

}


/* HOVER */

.contact-info:hover{

transform:translateY(-6px);

box-shadow:0 25px 50px rgba(0,0,0,0.15);

}


/* ICONS */

.contact-info i{

color:#8b5e3c;

margin-right:8px;

font-size:18px;

}


/* FORMULAR */

.contact-form{

background:white;

padding:35px;

border-radius:12px;

box-shadow:0 15px 35px rgba(0,0,0,0.1);

transition:0.3s;

}

.contact-form:hover{

transform:translateY(-6px);

box-shadow:0 25px 50px rgba(0,0,0,0.15);

}


/* INPUT FELDER */

.contact-form input,
.contact-form textarea{

width:100%;

padding:14px;

margin-bottom:18px;

border-radius:8px;

border:1px solid #ccc;

font-size:15px;

transition:0.3s;

}


/* INPUT HOVER */

.contact-form input:focus,
.contact-form textarea:focus{

border-color:#8b5e3c;

outline:none;

box-shadow:0 0 8px rgba(139,94,60,0.2);

}


/* TEXTAREA */

.contact-form textarea{

height:130px;

resize:none;

}


/* BUTTON */

.contact-form button{

width:100%;

padding:14px;

background:#8b5e3c;

color:white;

font-size:16px;

border:none;

border-radius:8px;

cursor:pointer;

transition:0.3s;

}


/* BUTTON HOVER */

.contact-form button:hover{

background:#6e452c;

transform:scale(1.03);

}


/* MAP SECTION */

.map{

max-width:1100px;

margin:auto;

padding:60px 20px;

text-align:center;

}

.map h2{

margin-bottom:25px;

color:#3b2418;

}


/* GOOGLE MAP */

.map iframe{

border-radius:12px;

box-shadow:0 20px 40px rgba(0,0,0,0.15);

}


/* BACK BUTTON */

.back{

text-align:center;

margin:60px;

}

.back a{

text-decoration:none;

color:#3b2418;

font-weight:bold;

font-size:16px;

transition:0.3s;

}

.back a:hover{

color:#8b5e3c;

}


/* MOBILE */

@media(max-width:900px){

.contact-container{

grid-template-columns:1fr;

}

}