@charset "UTF-8";
/* CSS Document */
body {
	margin: 0px;
	padding: 0px;
	background: rgb(29,0,44);
	background: -moz-radial-gradient(circle, rgba(29,0,44,1) 0%, rgba(29,0,44,1) 0%, rgba(98,0,149,0.2049194677871149) 0%, rgba(12,0,18,1) 100%);
	background: -webkit-radial-gradient(circle, rgba(29,0,44,1) 0%, rgba(29,0,44,1) 0%, rgba(98,0,149,0.2049194677871149) 0%, rgba(12,0,18,1) 100%);
	background: radial-gradient(circle, rgba(29,0,44,1) 0%, rgba(29,0,44,1) 0%, rgb(97, 0, 149) 0%, rgba(12,0,18,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1d002c",endColorstr="#0c0012",GradientType=1);
	text-align: center;
}

a:hover {
	background-color: transparent;
	border-bottom-right-radius: 30px;
	border-top-left-radius: 30px;
	transform: scale(1.1);
	/*box-shadow: 0px 10px 20px -5px #000000;*/
}
.mainHoverLine {
	height: 3px;
	background-color: #1D002C;
	width: 0px;
	text-align: center;
	margin: auto;
	border-radius: 5px;
	transition: ease-in-out .3s;
}
a:hover .mainHoverLine {
	width: 90%;
}

/*navigation icon styling*/
.navIcons {
    width: 35px;
    margin-bottom: 5px;
    border-radius: 80px;
    vertical-align: middle;
    transition: ease-in-out .5s;
    background-color: #1D002C;
}
a:hover .navIcons {
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
}

/*home*/
a:hover #homeIcon {
    background-color: orangered;
}
a:hover #homeHover {
    background-color: orangered;
}
#homeLabel:hover {
	color: #DD8365;
}


/*blog*/

a:hover #blogIcon {
	background-color: #FF0017;
}
a:hover #blogHover {
	background-color: #FF0017;
}
#blogLabel:hover {
	color: #FF0017;
}



/*visit us*/
a:hover #visitUsIcon {
    background-color: #0070CC;
}
#visitUsLabel:hover {
	color: #85C8FF;
}


/*contact us*/
a:hover #contactUs {
    background-color:#FF4F52;
}
a:hover #contactUsHover {
    background-color: #FF4F52;
}
#contactUsLink:hover {
	color: #FF7D7F;
}


/*media*/
a:hover #media {
    background-color: #6300E3;
}
a:hover #mediaHover {
    background-color: #6300E3;
}
#mediaLink:hover {
	color: #B175FF;
}



/*about us*/
a:hover #aboutUs {
    background-color: #80FF6E;
}
a:hover #aboutUsHover {
    background-color: #80FF6E;
}
#aboutUsLink:hover {
	color: #AEFFA3;
}



/*offering*/
a:hover #offering {
    background-color: #FF51D0;
}
a:hover #offeringHover {
    background-color: #FF51D0;
}
#offeringsLink:hover {
	color: #FF81DD;
}

/*dynamic styling for smaller devices*/

nav {
	width: 300px;
	height: 100vh;
	overflow: hidden;
	background-color: #ffffff;
	position: absolute;
	right: 0px;
	position:absolute;
	margin-top: 10px;
	width: 100%;
	padding-top: 20px;
	list-style: none;
	text-align: center;
	}


a {
	display: block;
	text-align: left;
	margin-left: 30px;
}




	a {
		display: flex;
		width: 175px;
		align-items: center;
		gap: 10px;
		margin: auto;
		color: #1D002C;
		text-decoration: none;
		transition: ease-in-out .2s;
		transform: scale(.9);
		overflow: hidden;
	}

	.navigationIcons {
		width: 50px;
		height: 50px;
}
	#navOpen {
		display: block;
		float: right;
		top: 0px;
		margin-right: 25px;
		font-size:30px;
		cursor:pointer;
		color: #FFFFFF;
		border-radius: 5px;
		border: none;
		z-index: 102;
		transition: ease-in-out .5s;
		background-color: rgba(255,255,255,0.40);
	}

	#navOpen a {
		margin: 0px;
	}

	#closebtn {
		position: fixed;
		text-decoration: none;
		color: #FFFFFF;
		top: 5px;
		right: -245px;
		font-size: 60px;
		transition: ease-in-out .5s;
		z-index: 105;
	}

	#topRibbonLogo {
		display: none;
	}
	#topribbonTittle {
		display: none;
	}

@media (max-width: 600px) {
	
	#topRibbonLogo {
	display: block;
	float: left;
	position:absolute;
	left: 5px;
	top: 10px;
	width: 55px;
	height: 40px;
	vertical-align:middle;
	transition: ease-in-out .5s;
	animation: scale 1s 5;
	}

	@keyframes scale {
	from {transform :scale(.7);}
	to {transform: scale(1);}
	}
	

	#topRibbonLogo:hover {
		transform: scale(1.1);
	}

	#topRibbonTittle {
		display: block;
	margin-top: 15px;
	color: #FFFFFF;
	}
		
	}