@charset "utf-8";
/* CSS Document */
:root {
--blue: #27225A;
}


.grid-container-contact {
	display: grid;
	background-image:url('../images/map_bg.png');
	background-position: 25%, 75%;
	padding-top: 2em;
	
}

.contact-title {
	font-size: clamp(1.2em, 4vw, 2.5em);
	font-weight: bold;
	background-color: var(--blue);
 color: white;
	border-bottom-right-radius: 40px;
	padding: .2em .2em .2em .5em;
	
}

.contact-desc {
	background-color: rgba(255,255,255,0.82);
	margin: 3em 1em;
	padding: 2.2em;
	font-family: Roboto;
	font-weight: bold;
	border-radius: 10px;
}

.contact-desc-bottom {
	padding: 0 10px;
}
.map {
	display: grid;
	justify-content: center;

	
}

.border-map {
	border-radius: 18px;
	width: 98%;
	margin-bottom: 2em;
}

.mailto {
		font-family: Roboto;
		font-size: clamp(1rem, 2vw, 1.2rem);
		font-weight: bold;
	
	}
	
a.mailto {
		text-decoration: none;
		color: var(--blue);
	}
	
	a.mailto:visited {
		text-decoration: none;
		color: var(--blue);
	}
	
	a.mailto:hover {
		text-decoration: underline;
		color: var(--blue);	
	}
	.contact-desc-bottom {
		font-family: Roboto;
		font-weight: 400;
	}

.address{
	font-family: roboto; 
	margin-left: clamp(1em, 6vw, 4em);
	font-size: clamp(1rem, 2vw, 1.2rem);
}

.main_container {
  display: block;
  padding: 0px;
  margin-bottom: 0px;
}

@media screen and (min-width: 900px) {
	
	.grid-container-contact {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-areas: 
		"contact-desc map"
			"form form"
	}
	
	.contact-desc {
	margin: 2.5em 4em 0 4em;
	padding: .5em;
}
	
.border-map {
	border-radius: 18px;
	width: 400px;
	}
.map {
	display: grid;
	margin: 5em 2em 0em 2em;
}
	
	.form_holder {
	margin: 2.5em 4em 0 4em;
		background-image: url("../images/map_bg.png");		
		border-radius: 20px;
				
}
	.form {
		background-color: rgba(39,34,90,0.75);
		color: white;
		font-family: 'Playfair Display', serif;
		padding: 2em;
		border-radius: 20px;
	}
	
	
}