*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

.container {
	margin: 0 auto;
	overflow: visible;
}


.navbar{
	background-color: #14284D;
	padding: 0px
}
.navbar .flex{
	height: 100%;
}
.navbar ul{
	display: flex ;
	width: 100%;
	list-style-type: none;
}
.navbar li{
	padding: 30px;
	text-align: center;
}
.navbar li:last-child{
	margin-left: auto;
}
.navbar a{
	color: white;
	text-decoration: none;
	}
.navbar a:hover{
	color: white;
	text-decoration: underline;
}
.headline{
	font-family: Century Gothic;
	font-size: 50px;
	font-weight: bold;
	color: #14284D;
}
.text{
  font-family: Century Gothic;
  font-size: 25px;
  font-weight: bold;
  color: #14284D;
}
.text2{
  font-family: Century Gothic;
  font-size: 25px;
  font-weight: bold;
  color:#f07f24;
  margin-top: 10px;
}
.text3{
  font-family: Century Gothic;
  font-size: 15px;
  line-height:170%
}
.text4{
  font-family: Century Gothic;
  font-size: 15px;
  font-style: italic;
  color: white;
}
.text5{
  font-family: Century Gothic;
  font-size: 15px;
  color: white;
}

.showcase{
	padding:30px 60px;
}

.grid {
	overflow: visible;
	display: grid;
	grid-template-columns: 70% 30%;

}

.flex {
	display: flex;
	justify-content: space-around;
}

.infos {
margin-top: 30px	
}

.info{
	padding: 30px;
	text-align: center;
	border: 2px solid #f07f24 ;
	border-radius: 10px
}

.margin{
	margin-right:30px
}


.social{
	padding: 30px;
	margin: 0px 30px;

}

.social i{
	padding: 20px;
	clip-path: circle();
}

.grid-2{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}
.grid-3{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.card{
	
	padding: 0px 30px 30px 30px;
	border: 2px solid #f07f24 ;
	border-radius:  10px;
	text-align: center;
	
}
.circle{
	background-color: white;
	border:3px solid #f07f24 ;
    height:90px;
    position: relative;
    top: -10%;
	left: 43.5%;
    border-radius:50%;
    width:90px
}


footer{
	background-color: #14284D;
	padding: 20px 30px;
	margin-top: 20px
}
a.foo{
	color: white;
	text-decoration: none;
}

a.foo:hover{
	text-decoration: underline;
}

a.tt{
	color: #14284D;
	text-decoration: none
}
a.tt:hover{
	color: #14284D;
	text-decoration: underline;
}

.profiles{
	text-align: center;
}
.icon1{
	color:white; 
	padding-left: 10px
}

a.text5{
  color: white;
  text-decoration: none;
}
a.text5:hover{
  color: white;
  text-decoration: underline;
}
.footul{
	list-style-type: none; 
	float:right; 
	text-align:center;
}
.img1{
	width:90% ;
	border-radius: 50%; 
	margin-top:30px ;
	display: none;
	margin-left: auto;
	margin-right: auto
}


/*Tablets and under*/
@media(max-width:1100px){
	.grid{
	grid-template-columns: 100% 0%
	}
	.grid-2{
		grid-template-columns: 1fr;
	}
	.grid-3{
		flex-direction: column;
	}
	.showcase{
		height: auto;
	}
	.img1{
		display:block;
	}
	.infos .flex{
		flex-direction: column;
	}
	.margin{
		margin: 0px;
		margin-bottom: 30px;
	}
	.info {
	 width: 100%;
	}
	.navbar ul{
		flex-wrap: wrap;
		justify-content:flex-start;
		margin: 30px
	}
	.navbar li{
		padding: 0px 15px 
	}
	.navbar li:last-child{
	 margin: 0px
}
	.headline{ font-size: 40px
	}
	.text{ font-size:20px
	}
	.x{
		margin-top: 30px
	}
}


	
@media(max-width:920px){
	.circle{
    position: relative;
	left: 39%;}
@media(max-width:868px){
	.circle{
    position: relative;
	left: 43%;}
}

@media (max-width: 650px){
	.circle{
    position: relative;
	left: 40%;}
}
/*Mobile Devices*/
@media (max-width: 500px){
	.navbar ul{
		flex-direction: column;
	}
	
	.circle{
    position: relative;
	left: 37%;
	}
	
	
}