@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
	padding: 0;
	margin: 0;
	font-family: "Roboto", "sans-serif";
}

.nav	{
	height: 10vh;
	background: purple;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.navImg	{
	height: 2em;
	width: 2em;
}



.nav a{
	height: 75%;
	padding: 0 1em;
	display: flex;
	align-items: center;
	text-decoration: none;
	color: white;
}

.nav a:hover {
	background-color: white;
	color: purple;
	border-radius: 1em;

}

#logo{
	height: 2em;
	width: 2em;
	margin-right: auto;
	margin-left: 1em;
}

.nav svg {  
	fill: white;
}

#menuSvg {
	fill: white;
	stroke: white;
}

.dropdown-btn svg{ /*rotate the dropdown-arrow icon*/
	transition: 200ms ease;
}

.rotate svg:last-child {
	rotate: -180deg;
}


#sidebarActive { /*hide the bar*/
	display: none;	
}

.openSideBarButton, .closeSideBarButton{ /*this will hide the check box*/
	display: none;
}

.nav ul {
	list-style: none;
}

.nav li {
	list-style: none;
}

.links-container { /* this will affect the vertical and horizontal menu display*/
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.links-container li {
	position: relative;
}


.dropdown-btn {
	display: flex;
	align-items: center;
	text-decoration: none;
	padding-top: 0.5em; 
	padding-bottom: 0.5em;
	padding-left: 0.5em; 
	margin-right: 1.2em;
}

.dropdown-btn:hover{
	background-color: white;
	border-radius: 1em;
	
	> #world-icon {
		fill: purple;
	}

	> #dropdown-icon {
		fill: purple;
	}
}
.sub-menu {
	position: absolute;
	opacity: 0;
	transition: opacity 300ms ease-in-out;
	background-color: purple;
	box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
	border-radius: 1em;

	right: 0;
	margin-top: 0.5em;
	margin-right: 1em;
	width: 5em;
	padding: 1em;

	> li a{
		padding: 1em;

	}
}
.sub-menu.show {
	opacity: 1;
	right: 0;
	margin-top: 0.5em;
	margin-right: 1em;
	width: 5em;
	padding: 1em;

	> li a{
		padding: 1em;

	}
}



/*-----------BANNER---------------------*/
#banner {
	margin-left: 1em;
	margin-right: 1em;
	padding-bottom: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;	
	width: 50%;
	height: 87%;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;	
}

#banner img {
	height: 20em; 
	width: 20em;
	border-radius: 50%;
	margin: 1em;
}

#info	{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 1em;
	padding-top: 1em;

	
}

#info	p {
	padding: 0.3em;
	text-align: left;


#myUrls {
display: flex;	
flex-direction: row;
argin-top: 1em;
margin-bottom: 1em;
}	

}
/*--------------------SERVICES---------------------------------------*/


#titleService {
	height: 3em;
	margin: 1em;
	background: purple;
	color: 	white;
	text-align: 	center;	
	align-content: 	center;	
	border-radius: 	0.5em;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;	
}

.services div {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 1em;
}

.services div div {
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;	
	border-radius: 	0.5em;
	max-width: 25em;
}


#serviBoxes  {
	flex-direction: column;
	align-items: center;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
}

#servimg {
	height: 10em; 
	width: 10em;
	border-radius: 50%;
	margin: 1em;
}
/*-----------CLIENTS---------------------------*/


#titleClients {
	height: 3em;
	margin: 1em;
	background: purple;
	color: 	white;
	text-align: 	center;	
	align-content: 	center;	
	border-radius: 	0.5em;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;	
}

#clients div {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 1em;

}


#clients div div{
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;	
	border-radius: 	0.5em;
	max-width: 25em;
}

#clienBox {
	flex-direction: column;
	align-items: center;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
}

/*---------CONTACT-----------------------------*/

#titleContact {
	height: 3em;
	margin: 1em;
	background: purple;
	color: 	white;
	text-align: 	center;	
	align-content: 	center;	
	border-radius: 	0.5em;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;	
}

#contact {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 1em;
	margin-right: 1em;
}

#contact img {
	width: 50%;
}


#contBox {
	height: 84%;
	width: 50%;
	display: flex;	
	flex-direction: column;		
	justify-content: center;
	padding-top: 1em;
	padding-bottom: 1em;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;	


}

#contBox img{
	width: 9em; 	
	height:9em;	

}
#mail {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-bottom:1em; 	
	justify-content: center;
	container-type: inline-size;
}

#phone {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	container-type: inline-size;
}

#contBox p {
  width: 50%;
  font-weight: bold;
  font-size: 2em;
  margin-left: 	1em;
  font-size: 5cqi;	
}

#contBox a {
  width: 50%;
  font-weight: bold;
  font-size: 2em;
  margin-left: 	1em;
  text-decoration:none;
  color: black;
  font-size: 5cqi;	

}
/*------------------------------------------*/
@media(max-width:780px) { /*Side-bar properties*/
	.links-container{
		/*display: none;	When the screen-width is inferior to 780px the side bar will appear hided*/

		flex-direction: column;
		align-items: flex-start;
		padding-left: 1em;
		position: fixed;
		top: 0;
		right: -100%;
		z-index: 10;
		width: 70%;

		background: purple;
		box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
		transition: 0.75s ease-out;
	}
	.nav a {
		box-sizing: border-box;
		height: auto;
		width: 75%;
		padding: 1em 1em;
		justify-content: flex-start;
	}
	.openSideBarButton, .closeSideBarButton{  /* the x menu buttom and the x buttom*/
		display: block;
		padding: 1em;
	}
	#sidebarActive:checked ~ .links-container{
		right: 0;
	}
	#sidebarActive:checked ~ #overlay{
		background: rgba(0, 0, 0, 0.25);
		transition: background 0.6s; /*this creates a transitions that makes the darker background smoothly*/
		height: 100%; /*100% of the entire screen*/
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
	}
	#logo{
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	}

	.links-container li {
		width: 75%;
	}		

	.dropdown-btn {
	margin-right: 0em;
	}

	.sub-menu {
		position: relative;
		box-shadow: none;

	}
	.sub-menu.show {
	box-shadow: none;
	position: relative;
	width: 100%;

	}
}
@media(max-width:780px) { /*Side-bar properties*/
	#contact {
		flex-direction: column;
		justify-content: center;
		align-items: center;	
	}

	#contBox {
		width: 100%;
		padding-top: 1em;
		padding-bottom: 1em;
	}

	#mail {
		container-type: inline-size;
	}


	#contBox a {
		font-size: 5cqi;	
	}

	#phone{
		container-type: inline-size;
	}

	#contBox p {
		font-size: 5cqi;
	}

	#banner {
		flex-direction: column;
	}
	#banner div	{
		width: auto;
	}
	#contBox img{
		width: 25%;
		height: 25%;
	}

}