/* CONTACT HEADER */

.contactHeader{

height:300px;

background:url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

}

.contactOverlay{

background:rgba(0,0,0,0.75);

width:100%;

height:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

color:white;

}

.contactOverlay h1{

font-size:40px;

font-family:Montserrat;

margin:0;

}

.contactOverlay p{

color:#ddd;
font-family:Montserrat;
margin-top:10px;

}


/* CONTACT SECTION */

.contactSection{

padding:70px 10%;

background:#f7f7f7;

}

.contactContainer{

display:flex;

gap:50px;

}

.contactInfo{

width:45%;

}

.contactForm{

width:55%;

background:white;

padding:30px;

border:1px solid #eee;

}

.contactForm input,
.contactForm textarea{

width:100%;

padding:12px;

margin:10px 0;

border:1px solid #ddd;

font-family:Open Sans;

}

.contactForm textarea{

height:120px;

resize:none;

}

.contactForm button{

background:black;

color:white;

border:none;

padding:12px;

cursor:pointer;

transition:.3s;

}

.contactForm button:hover{

background:#C8A96A;

}


/* MAP */

.mapSection iframe{

width:100%;

height:300px;

border:0;

}


/* MOBILE */

@media(max-width:900px){

.contactContainer{

flex-direction:column;

}

.contactInfo,
.contactForm{

width:100%;

}

.contactHeader{

height:220px;

}

.contactOverlay h1{

font-size:28px;

}

}


/* POPUP */

.popup{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.7);

display:none;

align-items:center;

justify-content:center;

z-index:2000;

}

/* CONTENT */

.popupContent{

background:white;

padding:35px;

width:400px;

border-radius:8px;

position:relative;

animation:popup .3s;

}

@keyframes popup{

from{transform:scale(.8);}

to{transform:scale(1);}

}

.popupContent h2{

margin-top:0;

font-family:Montserrat;

}

/* CLOSE */

.closeBtn{

position:absolute;

right:15px;

top:10px;

font-size:20px;

cursor:pointer;

}

/* FORM */

.popupContent input,
.popupContent select,
.popupContent textarea{

width:100%;

padding:10px;

margin:8px 0;

border:1px solid #ddd;

font-family:Open Sans;

}

.popupContent textarea{

height:90px;

resize:none;

}

.bookBtn{

width:100%;

background:black;

color:white;

border:none;

padding:12px;

cursor:pointer;

margin-top:10px;

transition:.3s;

}

.bookBtn:hover{

background:#C8A96A;

}

/* MOBILE */

@media(max-width:500px){

.popupContent{

width:90%;

}

}
/* GLOBAL CONTACT RESPONSIVE */

/* TABLET */
@media (max-width:992px){

.contactContainer{
flex-direction:column;
gap:30px;
}

.contactInfo,
.contactForm{
width:100%;
}

.contactHeader{
height:240px;
}

.contactOverlay h1{
font-size:32px;
}

.contactOverlay p{
font-size:14px;
}

}

/* MOBILE */

@media (max-width:600px){

.contactSection{
padding:50px 20px;
text-align:center;
}

.contactHeader{
height:200px;
}

.contactOverlay h1{
font-size:26px;
}

.contactOverlay{
align-items:flex-start;
padding-left:40px;
}

.contactOverlay h1,
.contactOverlay p{
text-align:left;
}
.contactForm{
padding:20px;
}

.contactForm input,
.contactForm textarea{
padding:10px;
font-size:14px;
}

.contactForm button{
width:100%;
padding:12px;
}

.mapSection iframe{
height:220px;
}

}

/* SMALL MOBILE */

@media (max-width:480px){

.contactOverlay h1{
font-size:22px;
}

.contactOverlay{
align-items:flex-start;
padding-left:10%;
}

.contactOverlay h1,
.contactOverlay p{
text-align:left;
}

.contactForm{
padding:15px;
}

.mapSection iframe{
height:200px;
}

}

/* EXTRA SMALL */

@media (max-width:360px){

.contactOverlay h1{
font-size:20px;
}

.contactForm input,
.contactForm textarea{
font-size:13px;
}

}