@import url('http://fonts.googleapis.com/css?family=Roboto:400,100,300,500');

:root {
	
	--background: rgba(10, 10, 10, 0.726);
	--background1: rgba(10, 10, 10, 0.527);
	--background2: rgba(10, 10, 10, 0.227);
	
}

/*  --background: rgba(214, 128, 0, 0.5); */

*, *::before, *::after {
	box-sizing: border-box;
}

body {

	margin: 0;
	padding: 0;
	background: #f9f9f9 ;
	font-weight: 400;
	font-family: 'Work Sans', sans-serif;
}

.wrapper{

	padding-top: 1rem;

}

.pushDown{

	background-image: url(img./offshore.jpg);
	height: 80px;
	width: auto;
margin-bottom: 0rem;
overflow: hidden;
background-size: cover;
}

.clients{

	font-family: Arial, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #f4f4f9;
	margin: 0;
}


.negative{

	padding-top: 0rem;
	height: auto;
	width: auto;
margin-bottom: 0rem;
overflow: hidden;
}

.negative-inner{
padding: .2rem 2rem;

background: var(--background1);

}







header {
	
    background: var(--background);
    grid-area: header;
	width: 100%;
    position: fixed;
	z-index: 999;
	align-items: center;
	vertical-align: middle;
	flex-wrap: wrap;

}
.writeups{

padding: 0rem 3rem 0rem 3rem;


}

.features-item h1{

	color: rgb(20, 19, 19);

	
	}


	

.writeups-inner{

	display: grid;
	grid-template-columns: .5fr 2fr .5fr ;
	grid-gap: 2em;
	padding-bottom: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    
}

	.writeups-item{
		padding-top: 2rem;
			font-family: sans-serif;
			align-items: center;

	   
		}
		.writeups-item h1{

			color: rgb(14, 13, 13);
			font-family: sans-serif;
			
		}
	

.writeups-inner h1{

	color: rgb(8, 8, 8);
	
	
}


.writeups-inner p{
	text-align: justify;
	color: rgb(0, 0, 0);
}

.features{
	background-color: #dbd2d200;
	
	padding: 0rem 3rem;
	}

	
.features-inner{
	
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	grid-gap: 2em;

	}
	
	

	.features-inner p{
		text-align: justify;
		color: rgb(17, 17, 17);
	}
	.features-inner h5{
		font-size: medium;
		color: rgb(194, 68, 30);
	
	}


.features-inner h6{
	font-size-adjust: inherit;
	color: rgba(10, 10, 10, 0.918);



}


	.company{
		color: #881905;
		font-weight: bold;
	}
	.companyn
	{
		color: rgb(22, 101, 175);
	}
	/* ====================FOOTER  ============================================================*/



	.footer{
		background-color: #242020c5;
		margin-top: 2rem;
		padding: 1rem 5rem;
	
		}
		
	.footer-inner{
	
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		grid-gap: 2em;

	}
	.footer-inner a{
		
		color: rgb(160, 156, 156);
		font-size: smaller;
	}
	
		
		.footer-inner p{
			text-align: justify;
			color: rgb(160, 156, 156);
			font-size: small;
		}

	
	.footer-inner h6{
	
		color: rgb(235, 228, 228);
		color: rgb(160, 156, 156);
	}
	
	.footer-inner h6:hover {
	
		color: rgb(248, 213, 174);
		text-decoration: underline;
	
		
	}
	.footer-inner p:hover {
	
		color: rgb(245, 182, 131);
		font-size: 1rem;
		
	}
		.footer-copywrite {
			display: grid;
		 background: rgba(10, 10, 10, 0.856);
		 align-content: center;
			padding-top: 1rem;
		}
		.footer-copywrite p {
			color: rgb(160, 156, 156);
			text-align: center;
			font-size: x-small;
		}
		.footer-copywrite p:hover {
			color: rgb(247, 244, 244);
			
			font-size: small;
		}


	.footer-copywrite h6 {
		color: rgba(253, 250, 250, 0.938);
		text-align: center;
		
	}


.privacy{

	background-color: rgba(248, 248, 247, 0.438);
	padding: 1rem;
}

.privacy p{
	font-size: 0.8rem;

}



.logo {
	
	margin: 0.5rem;
	vertical-align: middle;

}

nav  {
	
	text-align: right;
	top: 100%;
	position: absolute;
	padding-right: 3rem;
	vertical-align: middle;
	background: var(--background);
	width: 100%;
	transform: scale(1, 0);
	transform-origin: top;
	transition: transform 150ms ease-in-out;

}


.nav-toggle {

	display: none;
}

.nav-toggle-label {

	position: absolute;
	top: 0;
	right:0 ;
	margin-right: 1em;
	height: 100%;
	display: flex;
	align-items: center;
	
	
}

/* background: rgb(7, 128, 209); for toggle */

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: rgb(7, 128, 209);
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}



.nav-toggle-label span::before,
.nav-toggle-label span::after {
 content: '';
 position: absolute;
}

.nav-toggle-label span::before {

	bottom: 7px;
}

.nav-toggle-label span::after {
	top: 7px;
}



nav ul {
	margin: 0;
	padding: 0;
	list-style: none;


}

nav li {
	margin-bottom: 1em;
	margin-left: .3em;
}

nav a {
	color: rgb(243, 232, 232);
	text-decoration: none;
	font-size: .5rem;
	text-transform: uppercase;
	opacity: 1;
	transition: opacity 150ms ease-in-out ;
}
/*   font size change for Button */

.fontsize{
	font-size: .8rem;
	color: rgb(16, 117, 175);
	vertical-align: middle;
	font-weight: bold;

}
	.fontsizeS{
		font-size: .5rem;
		color: rgb(250, 253, 250);
		font-weight: bold;
		font-family: sans-serif;
		
	}
	.fontsizeB{
		font-size: 1rem;
		color: rgb(253, 251, 250);
		font-weight: bold;
		font-family: sans-serif;
		padding: .4rem	;
		
	}


	

/*   font size change for Button */
nav li {
	margin-bottom: 1em;
	margin-left: 1em;
}

nav a:hover {
	color: rgb(20, 118, 209);
}


.nav-toggle:checked  ~ nav{
	transform: scale(1, 1);
	transition: transform 250ms ease-in-out 250ms;
}


@media screen and (min-width: 760px) {
	.nav-toggle-label {
		display: none;
	}
	header {
		 display: grid;
		 grid-template-columns: 1fr auto minmax(600px, 1fr);
	}
	.logo {
		grid-column: 1 / 1;
		margin: 0.5em;
		vertical-align: middle;
	
	}


nav {
	all: unset;
	grid-column: 3 / 4;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	padding-right: 0.5rem;
}

nav ul{

	display: flex;
}

nav li {
margin-left: .3em;
margin-bottom: 0;

}
nav a {

	opacity: 1;
}

nav a::before {
content: '';
display: block;
height: 3px;
background: rgb(54, 17, 2);
position: relative;
top: -1em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;

}
nav a:hover::before {
	transform: scale(1, 1);
	
}


}
/* contact Form */


form {
	max-width: 550px;
	padding: 1rem;
	margin: 0 auto;
	background-color: #9ac5f71e;
	margin-bottom: 2rem;
  }
  
  input, textarea {
	width: 100%;
	padding: .5rem;
	border: 1px solid rgb(56, 156, 238);
  }
  input[type=submit] {
	padding: .5rem;
	border-radius: 5px;
	background-color: transparent;
	cursor: pointer;
  }
  
  label, small {
	font-size: small;
  }