html {
		scroll-behavior: smooth;
	}
	*{
		font-family: Tahoma, sans-serif;
		box-sizing: border-box;
	}

	body {
		margin: 0px;
		background-color: #f7f7f7;
	}

	/* Header backgroud Images*/
	.head {
		width: 100%;
		height: 400px;
		position: relative;
		background-image: url("../img/gboadvisory.jpeg");
		background-size: cover;
	}

	.head-about {
		width: 100%;
		height: 400px;
		position: relative;
		background-image: url("../img/gboaudit.jpeg");
		background-size: cover;
	}
	.head-clients {
		width: 100%;
		height: 400px;
		position: relative;
		background-image: url("../img/clients.PNG");
		background-size: cover;
	}
	.head-service {
		width: 100%;
		height: 400px;
		position: relative;
		background-image: url("../img/gbo-tax.jpeg");
		background-size: cover;
	}

	/* Header Background and  Blue/grey Color */
	.back-color {
		width: 100%;
		height: 400px;
		position: absolute;
		top: 52.4px;
	}

	.bg-blu {
		background-color: #02254f;
	}
	.bg-grey {
		background-color: #f1f1f1;
	}
	.bg-orange {
		background-color: orange;
	}

	/* Text Decoration */

	.txt-color {
		color: #02254f;
	}
	.txt-align {
		text-align: center;
	}
	.txt-color2 {
		color: #fff;
	}

	.text-align-left {
		text-align: left;
	}

	.par {
		line-height: 1.5;
		font-size: 16px;
		color: #222;
		text-align: justify;
	}
	.h1 {
		font-size: 1.5em;;
		font-weight: bold;
	}

	.h2 {
		font-size: 2.5em;
		font-weight: bold;
		color: #02254f;
	}
	.h3 {
		color: orange;
	}

	.font-footer {
		font-size: 12px;
	}

	.content-size {
		font-size: 16px;
	}

	.txt-overlay {
	  	position: absolute;
	  	color: #ccc;
	  	font-size: 15px;
	  	top: 50%;
	  	left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		text-align: center;
	}

	/* Overlay text */
	.overlay-box {
		position: relative;
		width: 100%;
	}

	.overlay {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background-color: #202020;
	  border-radius: 10px;
	  overflow: hidden;
	  width: 100%;
	  height: 10%;
	  opacity: 0.4;
	  transition: .5s ease;
	}
	.box-container {
		background-color: blueviolet;
		padding: 0 100px;
	}


	.img-clients {
		width: 100%;
		display: block;
		height: auto;
	}

	.pic {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 10px;
	}
	.pic:hover {

	}
	.overlay:hover {
		height: 80%;
		opacity: 0.9;
		cursor: pointer;
	}
	.o-txt {
		display: none;
		width: 100%;
	}
	.overlay:hover .o-txt {
		display: block;
	}


	.o-txt2 {
		display: none;
	}

	.breadcrum {
		width: 100%;
		padding: 10px 30px;
	}
	#active {
		background-color: #02254F;
		color: #fff;
	}

	#logo {
		width: 80px;
		height: auto;
		padding: 5px;
	}
	#logo2 {
		width: 103px;
		height: auto;
		padding: 5px;
	}
	.btn {
		padding: 10px 20px;
		border: 0px;
		color: white;
		font-weight: bold;
		position: absolute;
		bottom: 10%;
		left: 5%;
	}

	.btn2 {
		color: #ffffff;
		border: 0px;
		border-radius: 5px;
		padding: 10px;
		cursor: pointer;
	}
	.btn2:hover {
		color: #02254f;
		background-color: #ccc;
	}
	.btn2:hover .txt-color2 {
		color: #02254f;
	}
	.responsive {
		text-align: center;
		margin: auto;
	}

	.card-mission {
		width: 100%;
		padding: 30px;
	}

	.card-mission-left {
		float: left;
		width: 60%;
	}

	.card-mission-left p {
		width: 90%;
	}
	.card-mission-right {
		float: left;
		width: 40%;
	}
	.card-clients {
		float: left;
		width: 40%;
		padding: 20px;
	}

	.container {
		width: 70%;
		margin: 0 auto;
		box-shadow: 0px 20px 5px #ccc;
		background-color: white;
	}
	.container-contact {
		width: 70%;
		margin: 0 auto;
		box-shadow: 0px 20px 1px #ccc;
		background-color: white;
	}
	.container-c {
		width: 95%;
		margin: auto;
	}


	.position {
		position: relative;
	}


	.head_content {
		width: 40%;

	}
	.box {
		width: 50%;
		height: auto;
		color: white;
		padding: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 100, .3);
		background-color: rgba(2, 37, 79, 0.6);
		position: absolute;
		bottom: 20%;
		left: 5%;
		transition: .8s ease;
	}

	.box:hover {
		background-color: #02254f;
		opacity: .8;
		transition: .8s ease;
	}
	.btn:hover {
		cursor: pointer;
		background-color: #ccc;
		color: #02254f;
		transition: .4s ease;
	}

	.clearfix:after {
		content: "";
		clear: both;
		display: table;
	}

	.img {
		width: 100%;
		height: auto;
	}

	/* navigation bar */
	.nav-bar {
		width: 70%;
		margin: auto;
		background-color: white;
	}

	.nav {
		float: right;
	}

	.nav li {
		display: inline-block;


	}

	.nav li a {
		text-decoration: none;
		text-align: center;
		color: #02254f;
		padding: 26px 26px;
		border: 0px;
		margin: 0;
	}


	.nav li a:hover {
		cursor: pointer;
		background-color: #ccc4;
		color: #02254f;
	}

	/* Dropdown Menu */
	.drp-down {
		position: relative;
		display: none;
		float: right;
		background-color: #f1f1f1;
		color: #02254f;
		z-index: 1;
	}

	.drp {
		background-color: white;
		border: 0px;
		font-size: 38px;
		font-weight: bold;
		color: #02254f;
		cursor: pointer;
	}

	.drp-down-lst {
		position: absolute;
		display: none;
		background-color: #f1f1f1;
		text-align: center;
		right: 0px;

	}
	.drp-down:hover .drp-down-lst {
		display: flex;
		flex-direction: column;
	}

	.drp-down-lst a:hover {
		background-color: #ddd;
	}

	.drp-down-lst a {
		text-decoration: none;
		text-align: center;
		padding:20px 100px;
		width: 500px;
		display: block;
		color: #02254f;
	}


	/* content css */
	.abt-content {	
		padding: 0px 5px;
	}
	.contact-content {	
		padding: 30px 30px;
	}

	.footer {
		clear: both;
		margin: auto;
		width: 100%;
		padding: 40px 20px;
		color: white;
	}

	.footer-icon {
		width: 10px;
		height: auto;
		margin-right: 20px;
	}

	.footer-img {
		width: 150px;
	}

	.footer-logo {
		width: 50%;
		float: left;
	}

	.footer-contact {
		width: 50%;
		float: left;
		text-align: right;
		padding: 0px 30px;
	}

	.contact-icon {
		width: 20px;
		margin-right: 10px;
	}
	.contact-icon2 {
		width: 15px;
		margin-right: 10px;
	}
	.contact-icon3 {
		width: 30px;

	}
	.footer-icon {
		width: 30px;
	}

	.footer_row {
		float: left;
		margin-left: 30px;
		font-size: 14px;
	}

	.link {
		text-decoration: none;
		cursor: pointer;
		display: inline-block;
		padding: 0px;
	}

	.link:hover {
		text-decoration: underline;
		display: inline-block;
		padding: 0px;
	}

	.footer-list {
		list-style-type: none;
	}

	.copy {
		clear: both;
		display: block;
		font-size: 12px;
		padding: 30px 20px;
	}

	.footer-description {
		padding: 30px;
	}

	.footer-description2 {
		float: right;
	}
	.tax {
		background-color: #02254f;
		padding: 20px;
		color: #ffff;
		margin: 20px auto;

	}


	.card-serve-right {
		float: right;
		width: 33.333%;
		padding: 5% 0;
	}

	.team-img2 {
		background-image: url("../img/clients1.png");
		background-size: cover;
		background-color: #f1f1f1;
		color: white;
		border-radius: 10px;
		padding: 10px;
	}

	.team-img {
		background-image: url("../img/team-img.jpg");
		background-size: cover;
		background-color: #f1f1f1;
		color: white;
		border-radius: 10px;
		padding: 10px;
	}
	.team-img-overlay {
		padding: 10px;
		line-height: 1.5;
		border-radius: 10px;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.mapouter{
		position:relative;
		text-align:right;
		width:100%;
		height:400px;
	}
	.gmap_canvas {
		overflow:hidden;
		background:none!important;
		width:100%;
		height:400px;
	}
	.gmap_iframe {
		height:400px!important;
	}

	.flex-container {
		display: flex;
		flex-direction: row;
	}
	.card {
		margin: 5px;
		padding: 20px 30px;
		border-radius: 10px;
		width: 100%;
		background-color: #f7f7f7;
	}

	.card-img {
		margin: auto;
		border-radius: 10px;
		width: 100%;
		background-color: #ccc;
	}

	.card-header {
		font-size: 2.0em;
		font-weight: bold;
	}

	.card-text {
		font-size: 1.0em;
		line-height: 1.5;
	}

	.card-mission {
		display: flex;
		flex-direction: row;
		background-image: url("../img/team-img.jpg");
	}


	.flx-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background-color: #f1f1f1;
	}
	.flx-box-1 {
		flex: 70%;
		padding: 30px;
	}
	.flx-box-2 {
		flex: 30%;
		padding: 10px;
	}
	.flx-box-3 {
		flex: 33.333%;
		padding: 30px;
	}
	.flx-content {
		width: 100%;
		padding: 10px;
		border-radius: 10px;
	}
	.flx-test {
		display: flex;
		flex-direction: row;
	}
	.test-card {
		flex: 15%;
		flex-direction: column;
		padding: 10px;
	}
	.test-card2 {
		flex: 85%;
		flex-direction: column;
		padding: 10px;
	}



	/* Responsive CSS*/
	@media only screen and (max-width: 1170px){
		.overlay:hover {
			height: 100%;
			opacity: 0.9;
			cursor: pointer;
		}
	}

	@media only screen and (max-width: 1050px){
		.container {
			width: 100%;
			margin: auto;
		}
		.container-contact {
			width: 95%;
			margin: 0 auto;
		}
			.container {
			width: 95%;
			margin: 0 auto;
		}
	}


	@media only screen and (max-width: 960px){
		.container {
			width: 100%;
			margin: auto;
		}
			.nav-bar {
				width: 100%;
				margin: auto;
				background-color: white;
			}

		.gallery_txt {
			font-size: 14px;

		}
		.card-mission-left p {
				width: 100%;
		}
		.responsive {
			  float: left;
			  width: 33%;
			  padding: 0px;
		}

		.gallery {
			margin: auto;
			float: left;
			border: none;
			width: 100%;
			padding: 0px;
		}
		.clearfix:after {
			content: "";
			clear: both;
			display: table;
		}
		.footer-description2 {
			float: none;
			padding-top: 20px;
		}

		.footer-tag {
			text-align: center;
		}
		.footer-logo {
			width: 50%;
			float: none;
			margin: auto;
		}
		.footer-contact {
			width: 100%;
			float: none;
			text-align: center;
		}
		.footer_row {
			float: none;
			margin-left: 0px;
			font-size: 14px;
		}

	}

	@media only screen and (max-width: 760px){
		.container {
			width: 100%;
			margin: auto;	
		}

		.flx-box {
			flex-direction: column;
		}

		.flex-container {
			display: flex;
			flex-direction: column;
			background-color: violet;
		}

		.nav-bar {
			width: 100%;
			margin: auto;
			background-color: white;
		}
		.gallery_txt {
			font-size: 24px;

		}
		.responsive {
			width: 90%;
			margin: 6px 0;
		}
		.gallery {
			margin: auto;
			border: none;
			width: 95%;
		}

		.card-mission-left {
			float: none;
			width: 100%;
		}
		.card-mission-right {
			float: none;
			width: 100%;
			padding: 30px;
		}
		.footer-contact {
			width: 100%;
			float: none;
			text-align: center;
		}
		.footer-logo {
			width: 100%;
			float: none;
			margin: auto;
		}
		.card-serve-right {
			float: none;
			width: 6	0%;
			margin: 0 auto;

		}
			.flx-box-2 {
			width: 50%;
			margin: auto;
		}
			.hr {
			display: none;
		}

	}


	@media only screen and (max-width: 580px){
		.responsive {
			width: 100%;
		}
		.card-mission {
			flex-direction: column;
		}
		.hr {
			display: none;
		}
		.nav {
			display: none;
		}
		.drp-down{
			display: block;
		}
		.copy {
			clear: both;
			display: block;
			font-size: 12px;
			
		}
		.container {
			width: 100%;
			margin: auto;
			box-shadow: 0px 1px 10px #ccc;
			background-color: white;
		}
		.o-txt2 {
			display: block;
		}
		.overlay {
			display: none;
		}
		.flx-box-2 {
			width: 80%;
			margin: auto;
		}
	}