*{
	margin: 0;
	padding: 0;
}

/*Declare the Colors*/
:root{
	--ourBackground-color: #013565;
	--ourText-color: #ffc300;

}


body{
	scroll-behavior: smooth;
	font-family: 'Mukta', sans-serif;
	color: var(--ourText-color);
	overflow-x: hidden;
	background-color: var(--ourBackground-color);
}


/*Mobile First Design*/

/*Navigation Style*/
/*Nav background color*/
nav.myNav{
	background-color: var(--ourBackground-color);
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-content: center;
	font-size: 0.65em;
	box-shadow: 3px 3px 35px black;
	position: fixed;
	z-index: 5;
}

nav.myNav div.logoAndLang{
	margin-left: 5%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

/*adjusting the logo*/
nav.myNav div img.navLogo{
	width: 8em;
	
}

/*The Langauges Styling*/
nav.myNav div.logoAndLang ul.langToChoose{
	list-style-type: none;
	margin-left: -1.3em;
}

nav.myNav div.logoAndLang ul.langToChoose li{
	margin-top: 0.2em;
}

nav.myNav div.logoAndLang ul.langToChoose a{
	color: white;
	width: 100%;
	padding: 0.25em;
}

nav.myNav div.logoAndLang ul.langToChoose li.LangChosen{
	padding-right: 3px;
	background-color: var(--ourText-color);
	font-size: 1em;
}

nav.myNav div.logoAndLang ul.langToChoose li.LangChosen a{
	display: inline-block;
	color:  var(--ourBackground-color);
	text-decoration: none;
}


/*The Menu List*/
nav.myNav ul.myMenuList{
	background-color: var(--ourBackground-color);
	width: 100%;
	list-style-type: none;
	text-transform: uppercase;
	padding: 0;
	position: absolute;
	transform: translate(0,-100%);
	z-index: 1;
	transition: transform 600ms;
	-webkit-transition: transform 600ms;
}

/*To toggle the menu*/
nav.myNav ul.myMenuList.openMenuList{

	transform: translate(0,7.5em);
	color: white;
}



nav.myNav ul.myMenuList a{
	display: inline-block;
	width: 100%;
	padding: 1em 1.7em;

	text-decoration: none;
	color: var(--ourText-color);


	transition: color 350ms, background-color 450ms;
	-webkit-transition:color 350ms, background-color 450ms;
}

nav.myNav ul.myMenuList a:hover{
	color: var(--ourBackground-color);
	background-color: var(--ourText-color);

}


/*Making the hambuger Menu*/
nav.myNav div.menuBurger{
	width:4.5em;
	height:5em; 
	margin-top: 2em;
	margin-right: 1em;
	position: relative;
	cursor: pointer;
}

nav.myNav div.menuBurger span{
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 5%;
	background-color: var(--ourText-color);
	transition: transform 700ms;
	-webkit-transition: transform 700ms, opacity 500ms;
}

nav.myNav div.menuBurger span:nth-child(2){
	margin-top: 1.5em;
}
nav.myNav div.menuBurger span:nth-child(3){
	margin-top: 3em;
}

/*to give the menu bars some animations */
nav.myNav div.menuBurger span:nth-child(1).change{
	transform: translate(0,1.5em) rotate(45deg);
}
nav.myNav div.menuBurger span:nth-child(3).change{
	transform: translate(0,-1.5em) rotate(-45deg);
}
nav.myNav div.menuBurger span:nth-child(2).change{
	transform: translate(1em,0);
	opacity: 0;
}

/*For the Home or Welcome Section #1 scetion*/

section.homeSection{
	background-color: var(--ourBackground-color);
	padding-top:7em;
	
}

section.homeSection div.introDescription{
	position: relative;
	padding-top: -1em;
}



section.homeSection p.meetUs{
	text-transform: uppercase;
}

.myWhite{
	color: white;
}

p.question{
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

/*Department Section*/

section.departmentSection{
	position: relative;
}

section.departmentSection div.topDiv{
	position: absolute;
	top: -5em;
	width: 100%;
}

section.departmentSection div.topDiv img.departmentTopBg{
	max-width: 100%;
}

section.departmentSection h1.departmentTitle{
	position: absolute;
	width: 100%;
	text-transform: uppercase;
	z-index: 2;
	top: 3em;
	text-align: center;

}

section.departmentSection div.departmentContent{
	padding-top: 5em;
	font-size: 1.75em;
}

section.departmentSection div.departmentContent div.cardDesign{
	z-index: 2;
	font-size: 1em;
	box-sizing: border-box;
	width: 65%;
	border: 0.23em solid white;
	border-radius: 1.5em;
	margin:  2em auto;
	padding: 2em 0em;
	cursor: pointer;
}

/*Services Section*/
section.servicesSection{
	position: relative;
}

section.servicesSection div.topImDiv{
	position: absolute;
	width: 100%;
	top: -1em;
	z-index: -1;
}

section.servicesSection div.topImDiv img.servicesTopBG{
	max-width: 100%;
}

section.servicesSection h1.servicesTitle{
	position: absolute;
	width: 100%;
	text-transform: uppercase;
	z-index: 2;
	top: 3em;
	text-align: center;
}

section.servicesSection div.servicesDescription{
	padding-top: 4.5em;
	font-size: 1.75em;
}

section.servicesSection div.servicesDescription div.mediaRow,
section.servicesSection div.servicesDescription div.smRow,
section.servicesSection div.servicesDescription div.tRow
{
		margin: 1em 0em;
}

section.servicesSection div.servicesDescription p.mediaDescription,
section.servicesSection div.servicesDescription p.smDescription,
section.servicesSection div.servicesDescription p.tDescription
{
	font-size: 0.65em;
}

/*Footer Section*/
footer.contactFooter{
	width: 100%;
	box-shadow: 0px -10px 35px 0px rgb(0, 0, 0,0.75);
}
 footer.contactFooter h1.contactUs{
 	padding-top: 1.5em;
 }

footer.contactFooter div.myMap{
	text-align: center;
}

 iframe.myMap{
 	width: 75%;
 	
 }

 p.myPhoneDetails,
 p.myLocationDetails,
 p.myMailDetails{
 	margin-top:2em;
 }

svg.myPhone,
svg.myLocation,
svg.myEnvelope{
	width: 2em ;
	margin: 0px 1.3em 0px 0px;
}
a.phoneNum,
a.myMail{
	color: var(--ourText-Color);
}
div.contactDecription{
	padding-top: 2em;
	width: 100%;
}

p.copyRightUlysses{
	color: white;
	padding-top: 1em;
}

p.copyRightUlysses a{
	list-style: none;
	color: var(--ourText-color);
}


/*for large Phone screen such as tablets and ipads*/
@media screen and (min-width: 768px) {
	nav.myNav{
		font-size:0.85em;
		position: fixed;
	}

	/*Adjusting the size of the first section (Home)*/
	section.homeSection div.introDescription{
		font-size: 1.15em;
	}
}

/*for Large screens laptops and bigger */
@media screen and (min-width: 960px) {

	nav.myNav{
		font-size: 1em;
		position: fixed;
		height: 7.5em;
	}
	nav.myNav div.menuBurger{
		display: none;
	}

	/*For the Menu List*/

	nav.myNav ul.myMenuList{
		background-color: rgb(0, 0, 0,0);
		transform: translate(0,0);
		z-index: 2;
		text-align: right;
		height: 100%;
	}
	nav.myNav ul.myMenuList.openMenuList{

		transform: translate(0,0);
	}

	nav.myNav ul.myMenuList li{
		height: 100%;
		display: inline-block;
		margin-right: -0.23em;
	}

	nav.myNav ul.myMenuList li a{
		height: 100%;
		padding: 2.35em 1.7em;
		font-size: 1.15em;
	}
	/*Langauge List*/
	/*The Langauges Styling*/
	nav.myNav div.logoAndLang ul.langToChoose{
		z-index: 4;
	}

	/*adjusting the logo*/
	nav.myNav div img.navLogo{
	width: 9em;
	}

	/*The Home section*/

	section.homeSection{
		padding-top: 9em;
	}


	section.homeSection div.introDescription{
		font-size: 1.25em;
	}

	p.question{
	margin-top: 1em;
	margin-bottom: 0.5em;
	}

	section.homeSection p.meetUs{
		padding-top: 0.3em;
	}

	/*adjusting the pciture */
	section.homeSection img.ulyssesPhoto{
		width: 100%;
	}

	/*Adjusting the Department Section*/
	/*The special Bg the transaction between the section and the other*/
	section.departmentSection div.topDiv{
		top: -5em;
	}
	section.departmentSection h1.departmentTitle{
		top: 4.5em;
	}
	section.departmentSection div.departmentContent{
		padding-top: 8.55em;
	}

	section.departmentSection div.departmentContent div.cardDesign{
		width: 100%;
		padding: 3em 0em;
		margin: 2em 1em;
	}

	/*Services Section*/
	section.servicesSection div.topImDiv{
		top: -5em;
	}

	section.servicesSection h1.servicesTitle{
		top: 4.5em;
	}

	section.servicesSection div.servicesDescription{
		padding-top: 11em;
	}


	section.servicesSection div.servicesDescription div.mediaRow,
	section.servicesSection div.servicesDescription div.smRow,
	section.servicesSection div.servicesDescription div.tRow{
		margin: 2em 0em;
	}

	section.servicesSection div.servicesDescription h1.mediaTitle,
	section.servicesSection div.servicesDescription h1.smTitle,
	section.servicesSection div.servicesDescription h1.trainingTitle{
		font-size: 1.6em;
		text-align: center;
	}
	section.servicesSection div.servicesDescription p.mediaDescription,
	section.servicesSection div.servicesDescription p.smDescription,
	section.servicesSection div.servicesDescription p.tDescription{

		font-size: 1em;
	}

	/*for the Footer*/
	footer.contactFooter div.myMap{
	border-right: 0.3em solid white;
	}
	p.myPhoneDetails,
	p.myLocationDetails,
	p.myMailDetails{
	 	margin-top:3em;
	 	font-size: 1.3em;
	}

	div.contactDecription{
		padding-top: 2.5em;
	}
}