@charset "utf-8";
/* CSS Document */



body {
	color: #5A7684;
	background: #C5D1EB;
}


.circle-image{
 width: 200px;
 height: 200px;
 border-radius: 50%;
 overflow: hidden;
}

.circle-image img {
 width: 100%;
 height: auto;
}

.main {
	min-height: 200px;
	display: flex;
	background-color: #92AFD7;
	border-radius: 20px 20px 20px 20px;
	margin: 20px;
}

.aside-left {
	min-width: 30%;
	min-height: 200px;
	padding-left: 10%;
	padding: 5%;
	box-sizing: border-box;
}

.aside-right {
	min-width: 50%;
	min-height: 200px;
	padding: 5%;
	box-sizing: border-box;
}

.info {
	min-height: 300px;
	display: flex;
	margin: 10px;
}


.aside-left1 {
	min-width: 50%;
	min-height: 200px;
	padding-left: 10%;
	padding: 5%;
	box-sizing: border-box;
}

.contact {
	width: 400px;
    height: 220px;
    border: 5px solid #92AFD7;
    border-radius: 25px;
	padding-left: 10px;
	margin-right: 10px;
}

.aside-right1 {
	min-width: 50%;
	min-height: 200px;
	padding: 5%;
	box-sizing: border-box;
}

.row {
	display:flex;
	gap: 3%;
	justify-content: center;
	align-content: center;
}

.column {
	min-width: 20%;
	min-height: 200px;
	padding: 4%;
	box-sizing: border-box;
}

@media (max-width : 992px ){
	.main {
		display: block; /* in normal view, the display of .main is flex. In smaller devices, we overide the display to become block*/
	}
	.contact {
		width: 100%; /* in normal view, the width of .aside-left is set to 60%. In smaller devices, we change the widht to 100%*/
		padding: 1%;
		margin: 10px auto;
	}
	.aside-left {
		width: 100%; /* in normal view, the width of .aside-left is set to 60%. In smaller devices, we change the widht to 100%*/
		padding: 1%;
		margin: 10px auto;
	}
	
	.aside-right {
		width: 100%; /* in normal view, the width of .aside-right is set to 60%. In smaller devices, we change the widht to 100%*/
		padding: 1%;
		margin: 10px auto;
		text-align: center;
	}
	
	.aside-left1 {
		width: 100%; /* in normal view, the width of .aside-left is set to 60%. In smaller devices, we change the widht to 100%*/
		padding: 1%;
		margin: 10px auto;
	}
	
	.aside-right1 {
		width: 100%; /* in normal view, the width of .aside-right is set to 60%. In smaller devices, we change the widht to 100%*/
		padding: 1%;
		margin: 10px auto;
		text-align: center;
	}
	
		.row {
		display: flex; /* in normal view, the display of .row is flex. In smaller devices, we overide the display to become block*/
	}
	

}