:root {
	/* nav */
	--nav: #f9f0f0;
	--navtextcolor: rgb(255, 255, 255);
	--bgcolor1: #c6ee11;
	--bgcolor2: #c6ee11;
	--bgcolor3: #c6ee11;
	--bgcolor4: #c6ee11;
	--bgcolor5: #c6ee11;
	--secondary-text: #caa169;
	--secondary-color: #caa169;
	--primary-color: #021832;
	--global-color-8: #34DBE4;



	/* background */
	/* --bgcolor6: #343b7d; */
	--bgcolor7: #c5ca44, #97c84e;
	--bgcolor8: rgba(140, 244, 5, 0.938);

	/* name */
	--navtextcolor: white;
	--bgcolor9: #551a93, #e6587e, #f1a080;
	--bgcolor5: #e67e22;
	--bgcolor10: #241e97;
	/* timeline */
	--color: #000000;
	--color1: #77a1ea;
	--bgcolor: #f26d6d;
	--border: #000000;
	/* progress   */
	--color: #cdcaca;
	--bgcolor: #f7631f;
	--color2: #49adf0;
}

* {
	/* border: 2px solid red; */
}

/* nav  */
@media screen and (min-width: 320px) {
	@import url(https://fonts.googleapis.com/css?family=Open+Sans);





	nav {
		width: 100%;
		/* padding-top: -100px; */
		/* height:100px; */
		background-image: -webkit-gradient(linear, left bottom, right top, from(#792cab), color-stop(80%, #242698));
		background-image: -o-linear-gradient(left bottom, #792cab 0%, #242698 80%);
		background-image: linear-gradient(to right top, #792cab 0%, #242698 80%);
		/* max-width: 960px; */
		-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(248, 9, 9, 0.827)), color-stop(25%, #ffffff), color-stop(75%, #ffffff), to(rgba(255, 255, 255, 0)));
		-webkit-mask-image: linear-gradient(90deg, rgba(248, 9, 9, 0.827) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
		mask-image: -webkit-gradient(linear, left top, right top, from(rgba(248, 9, 9, 0.827)), color-stop(25%, #ffffff), color-stop(75%, #ffffff), to(rgba(255, 255, 255, 0)));
		mask-image: linear-gradient(90deg, rgba(248, 9, 9, 0.827) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);


	}

	nav ul {
		/* margin-left: 250px; */
		/* text-align: center; */
		background: -webkit-gradient(linear, left top, right top, from(rgba(142, 7, 128, 0.423)), color-stop(25%, rgba(134, 7, 113, 0.358)), color-stop(75%, rgba(131, 5, 118, 0.467)), to(rgba(127, 5, 98, 0.423)));
		background: -o-linear-gradient(left, rgba(142, 7, 128, 0.423) 0%, rgba(134, 7, 113, 0.358) 25%, rgba(131, 5, 118, 0.467) 75%, rgba(127, 5, 98, 0.423) 100%);
		background: linear-gradient(90deg, rgba(142, 7, 128, 0.423) 0%, rgba(134, 7, 113, 0.358) 25%, rgba(131, 5, 118, 0.467) 75%, rgba(127, 5, 98, 0.423) 100%);
		-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(250, 5, 5, 0.6);
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(250, 5, 5, 0.6);
		border-radius: 5px;
	}



	nav ul li a {
		/* margin-left: 20px; */
		padding: 10px;
		font-family: "Open Sans";
		text-transform: uppercase;
		color: rgb(246, 247, 249);
		font-size: 18px;
		text-decoration: none;
		display: block;
	}

	nav ul li a:hover {
		-webkit-box-shadow: 0 0 10px rgba(228, 3, 179, 0.847), inset 0 0 1px rgba(255, 255, 255, 0.6);
		box-shadow: 0 0 10px rgba(228, 3, 179, 0.847), inset 0 0 1px rgba(255, 255, 255, 0.6);
		background: rgba(76, 5, 241, 0.166);
		color: rgb(10, 239, 224);
	}

	.sticky {
		padding: 5, ;
	}


	body {


		background-image: url(../IMAGES/bck.png);
		background-attachment: fixed;


		/* rgb(149, 20, 145), #FEFF86 100%, #e73904, #bb5c0a, #a404e8, #1106d6 */
		background-size: 400% 400%;
		-webkit-animation: gradient 10s ease infinite;
		animation: gradient 10s ease infinite;
		height: 600vh;
		overflow-x: hidden;

	}

	@-webkit-keyframes gradient {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 90% 60%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 90% 60%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	h1 h2 h3 h4 h5 h6 {
		font-family: 'Playfair Display', serif;
	}


	span {
		color: #2BD6B4;
	}



	/* background */

	@import url('https://fonts.googleapis.com/css?family=Exo:400,700');


	.navbar {

		position: relative;
		z-index: 999;
	}

	.context {
		width: 100%;
		position: absolute;
		top: 50vh;
	}

	.context h1 {
		text-align: center;
		color: var(--navtextcolor);
		font-size: 50px;
		font-family: 'Playfair Display', serif;
	}

	::-webkit-scrollbar {
		width: .375rem;
	}

	::-webkit-scrollbar-track {
		background: var(--secondary-color);
	}

	::-webkit-scrollbar-thumb {
		background: var(--primary-color);
	}

	.area {
		background: var(--bgcolor6);
		/* background: -webkit-linear-gradient(to left, #ffffff1a );   */
		background-image: url(./IMAGES/2825704.gif);
		opacity: 0.7;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.circles {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.circles li {
		position: relative;
		display: block;
		list-style: none;
		width: 20px;
		height: 20px;
		background: var(--bgcolor8);
		-webkit-animation: animates 25s linear infinite;
		animation: animates 25s linear infinite;
		bottom: -150px;
	}

	.circles li:nth-child(1) {
		left: 25%;
		width: 80px;
		height: 100px;
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
	}


	.circles li:nth-child(2) {
		left: 10%;
		width: 20px;
		height: 20px;
		-webkit-animation-delay: 2s;
		animation-delay: 2s;
		-webkit-animation-duration: 12s;
		animation-duration: 12s;
	}

	.circles li:nth-child(3) {
		left: 70%;
		width: 20px;
		height: 20px;
		-webkit-animation-delay: 4s;
		animation-delay: 4s;
	}

	.circles li:nth-child(4) {
		left: 40%;
		width: 60px;
		height: 60px;
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
		-webkit-animation-duration: 18s;
		animation-duration: 18s;
	}

	.circles li:nth-child(5) {
		left: 65%;
		width: 20px;
		height: 20px;
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
	}

	.circles li:nth-child(6) {
		left: 75%;
		width: 110px;
		height: 110px;
		-webkit-animation-delay: 3s;
		animation-delay: 3s;
	}

	.circles li:nth-child(7) {
		left: 35%;
		width: 150px;
		height: 150px;
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
	}

	.circles li:nth-child(8) {
		left: 50%;
		width: 25px;
		height: 25px;
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
		-webkit-animation-duration: 45s;
		animation-duration: 45s;
	}

	.circles li:nth-child(9) {
		left: 20%;
		width: 15px;
		height: 15px;
		-webkit-animation-delay: 2s;
		animation-delay: 2s;
		-webkit-animation-duration: 35s;
		animation-duration: 35s;
	}

	.circles li:nth-child(10) {
		left: 85%;
		width: 150px;
		height: 150px;
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
		-webkit-animation-duration: 11s;
		animation-duration: 11s;
	}

	@-webkit-keyframes animates {

		0% {
			-webkit-transform: translateY(0) rotate(0deg);
			transform: translateY(0) rotate(0deg);
			opacity: 1;
			border-radius: 0;
		}

		100% {
			-webkit-transform: translateY(-1000px);
			transform: translateY(-1000px);
			opacity: 0;
			border-radius: 50%;
		}
	}

	@keyframes animates {

		0% {
			-webkit-transform: translateY(0) rotate(0deg);
			transform: translateY(0) rotate(0deg);
			opacity: 1;
			border-radius: 0;
		}

		100% {
			-webkit-transform: translateY(-1000px);
			transform: translateY(-1000px);
			opacity: 0;
			border-radius: 50%;
		}
	}

	/* name: ; */

	.container {
		width: 100%;
		text-align: center;
		margin-top: 100px;
	}

	.container h1:nth-child(1) {
		color: var(--nav);
		font-family: 'Fira Code', monospace;
		font-weight: 800;
		font-size: 20px;
		/* margin: 0 0 0 35%; */
		margin-top: 150px;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		width: 190px;
		margin-left: -10px;
		-webkit-animation: type 2s steps(40, end) forwards;
		animation: type 2s steps(40, end) forwards;
	}

	.container h1:nth-child(2) {
		opacity: 0;
		font-family: "Work Sans", sans-serif;
		margin: 0 auto auto auto;
		background: -webkit-gradient(linear, left bottom, left top, from(var(--bgcolor9)));
		background: -o-linear-gradient(bottom, var(--bgcolor9));
		background: linear-gradient(to top, var(--bgcolor9));
		font-weight: 800;
		font-size: 50px;
		width: 300px;
		margin-top: 30px;
		margin-left: -10px;
		text-align: left;
		background-size: cover;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		overflow: hidden;
		-webkit-animation: shring-animation 2.2s steps(40, end) 2s forwards, blink .3s step-end infinite alternate;
		animation: shring-animation 2.2s steps(40, end) 2s forwards, blink .3s step-end infinite alternate;
	}

	@-webkit-keyframes shring-animation {
		0% {
			background-position: 0 0;
			opacity: 0;
			width: 0;
		}

		1% {
			background-position: 0 0;
			opacity: 1;
			border-right: 1px solid;
		}

		50% {
			background-position: 150px 0;
			opacity: 1;
			border-right: 1px solid var(--bgcolor5);
		}

		100% {
			background-position: 400px 0;
			opacity: 1;
			border-right: 1px solid var(--bgcolor5);
		}
	}

	@keyframes shring-animation {
		0% {
			background-position: 0 0;
			opacity: 0;
			width: 0;
		}

		1% {
			background-position: 0 0;
			opacity: 1;
			border-right: 1px solid;
		}

		50% {
			background-position: 150px 0;
			opacity: 1;
			border-right: 1px solid var(--bgcolor5);
		}

		100% {
			background-position: 400px 0;
			opacity: 1;
			border-right: 1px solid var(--bgcolor5);
		}
	}

	@-webkit-keyframes type {
		0% {
			width: 0;
		}

		1%,
		99% {
			border-right: 1px solid var(--bgcolor5);
		}

		100% {
			border-right: none;
		}
	}

	@keyframes type {
		0% {
			width: 0;
		}

		1%,
		99% {
			border-right: 1px solid var(--bgcolor5);
		}

		100% {
			border-right: none;
		}
	}

	@-webkit-keyframes blink {
		50% {
			border-color: transparent;
		}
	}

	@keyframes blink {
		50% {
			border-color: transparent;
		}
	}

	.wrapper {
		margin-top: 30px;
		display: -ms-grid;
		display: grid;
		text-align: left;
	}

	.typing-demo {
		width: 100%;
		-webkit-animation: typing 10s steps(20), blink .10s step-end infinite alternate;
		animation: typing 10s steps(20), blink .10s step-end infinite alternate;
		white-space: nowrap;
		overflow: hidden;
		border-right: 3px solid;
		font-family: Georgia, 'Times New Roman', Times, serif;
		font-size: 20px;
		text-align: center;
		color: var(--bgcolor3);
	}

	@-webkit-keyframes typing {
		from {
			width: 0
		}
	}

	@keyframes typing {
		from {
			width: 0
		}
	}

	@keyframes blink {
		50% {
			border-color: transparent
		}
	}

	@import url(https://fonts.googleapis.com/css?family=BenchNine:700);

	.snip1535 {
		background-color: var(--bgcolor10);
		border: none;
		color: var(--navtextcolor);
		display: inline-block;
		font-family: 'BenchNine', Arial, sans-serif;
		font-size: 1em;
		font-size: 22px;
		line-height: 1em;
		margin: 15px 20px;
		margin-top: 50px;
		outline: none;
		padding: 12px 20px 10px;
		position: relative;
		text-transform: uppercase;
		font-weight: 700;
		z-index: 99;
	}

	.snip1535:before,
	.snip1535:after {
		border-color: transparent;
		-webkit-transition: all 0.25s;
		-o-transition: all 0.25s;
		transition: all 0.25s;
		border-style: solid;
		border-width: 0;
		content: "";
		height: 24px;
		position: absolute;
		width: 24px;
		z-index: 99;
	}

	.snip1535:before {
		border-color: var(--navtextcolor);
		border-right-width: 2px;
		border-top-width: 2px;
		right: -5px;
		top: -5px;
	}

	.snip1535:after {
		border-bottom-width: 2px;
		border-color: var(--navtextcolor);
		border-left-width: 2px;
		bottom: -5px;
		left: -5px;
	}

	.snip1535:hover,
	.snip1535.hover {
		background-color: lightgreen;
	}

	.snip1535:hover:before,
	.snip1535.hover:before,
	.snip1535:hover:after,
	.snip1535.hover:after {
		height: 100%;
		width: 100%;
	}

	/* about */

	.two1 {
		color: #f1f0f0;
		font-size: 30px;
		font-family: 'Roboto Slab', serif;
		font-family: 'Vast Shadow', serif;

	}

	.two4 {
		color: white;
		font-family: 'Slabo 27px', serif;
		margin-left: 30px;
		font-size: 20px;
		padding: 20px;

	}

	.two3 {
		color: white;
		text-align: left;
		font-family: 'Slabo 27px', serif;
		font-size: 20px;
		font-weight: 700;
		margin-left: 30px;
		padding: 20px;
	}

	/* timeline */

	.timeline {
		padding: 10px;
		font-size: large;
		color: var(--navtextcolor);
	}

	.timeline:after {

		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -10px;
		height: 100%;
		display: block;
	}

	.timeline-row {
		padding-left: 50%;
		position: relative;
		margin-bottom: 30px;
	}

	.timeline-row .timeline-time {
		position: absolute;
		right: 50%;
		top: 31px;
		text-align: right;
		margin-right: 20px;
		color: var(--color);
		font-size: 1.5rem;
	}

	.timeline-row .timeline-time small {
		display: block;
		color: var(--color1);
	}

	.timeline-row .timeline-content {
		position: relative;
		padding: 20px 30px;
		border-radius: 10px;
	}

	.timeline-row .timeline-content:after {
		content: "";
		position: absolute;
		top: 20px;
		height: 3px;
		width: 40px;
	}

	.timeline-row .timeline-content:before {
		content: "";
		position: absolute;
		top: 20px;
		right: -50px;
		width: 20px;
		height: 20px;
		border-radius: 100px;
		z-index: 100;
		background: var(--bgcolor);
		border: 2px dashed var(border);
	}

	.timeline-row .timeline-content h4 {
		margin: 0 0 20px 0;
		overflow: hidden;
		white-space: nowrap;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		line-height: 150%;
	}

	.timeline-row .timeline-content p {
		margin-bottom: 30px;
		line-height: 150%;
	}

	.timeline-row .timeline-content i {
		font-size: 2rem;
		color: var(--color);
		line-height: 100%;
		padding: 10px;
		border: 2px solid var(--color);
		border-radius: 100px;
		margin-bottom: 10px;
		display: inline-block;
	}

	.timeline-row .timeline-content .thumbs {
		margin-bottom: 20px;
	}

	.timeline-row .timeline-content .thumbs img {
		margin-bottom: 10px;
	}

	.timeline-row:nth-child(even) .timeline-content {
		background-color: var(--bgcolor);
		background-image: -o-linear-gradient(top, #fc6d4c, #ff5000);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#fc6d4c), to(#ff5000));
		background-image: linear-gradient(top, #fc6d4c, #ff5000);
		margin-left: 40px;
		text-align: left;
	}

	.timeline-row:nth-child(even) .timeline-content:after {
		left: -39px;
		border-right: 18px solid var(--bgcolor);
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}

	.timeline-row:nth-child(even) .timeline-content:before {
		left: -50px;
		right: initial;
	}

	.timeline-row:nth-child(odd) {
		padding-left: 0;
		padding-right: 50%;
	}

	.timeline-row:nth-child(odd) .timeline-time {
		right: auto;
		left: 50%;
		text-align: left;
		margin-right: 0;
		margin-left: 20px;
	}

	.timeline-row:nth-child(odd) .timeline-content {
		background-color: var(--color2);
		background-image: -o-linear-gradient(top, #1379bb, #5a99ee);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#1379bb), to(#5a99ee));
		background-image: linear-gradient(top, #1379bb, #5a99ee);
		margin-right: 40px;
		margin-left: 0;
		text-align: right;
	}

	.timeline-row:nth-child(odd) .timeline-content:after {
		right: -39px;
		border-left: 18px solid var(--color2);
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}

	@media (max-width: 767px) {
		.timeline {
			padding: 15px 10px;
		}

		.timeline:after {
			left: 28px;
		}

		.timeline .timeline-row {
			padding-left: 0;
			margin-bottom: 16px;
		}

		.timeline .timeline-row .timeline-time {
			position: relative;
			right: auto;
			top: 0;
			text-align: left;
			margin: 0 0 6px 56px;
		}

		.timeline .timeline-row .timeline-time strong {
			display: inline-block;
			margin-right: 10px;
		}

		.timeline .timeline-row .timeline-icon {
			top: 52px;
			left: -2px;
			margin-left: 0;
		}

		.timeline .timeline-row .timeline-content {
			padding: 15px;
			margin-left: 56px;
			-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			position: relative;
		}

		.timeline .timeline-row .timeline-content:after {
			right: auto;
			left: -39px;
			top: 32px;
		}

		.timeline .timeline-row:nth-child(odd) {
			padding-right: 0;
		}

		.timeline .timeline-row:nth-child(odd) .timeline-time {
			position: relative;
			right: auto;
			left: auto;
			top: 0;
			text-align: left;
			margin: 0 0 6px 56px;
		}

		.timeline .timeline-row:nth-child(odd) .timeline-content {
			margin-right: 0;
			margin-left: 55px;
		}

		.timeline .timeline-row:nth-child(odd) .timeline-content:after {
			right: auto;
			left: -39px;
			top: 32px;
			border-right: 18px solid var(--color2);
			border-left: inherit;
		}

		.timeline.animated .timeline-row:nth-child(odd) .timeline-content {
			left: 20px;
		}

		.timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {
			left: 0;
		}


	}

	/* @import url('https://fonts.googleapis.com/css?family=Corben:700'); */


	/* progress */
	.arif9 {
		margin-left: 20px;

	}

	.arif7 {
		margin-left: 40px;
		font-size: 30px;
	}

	.rainbow {
		width: 70px;
		/* margin-left: 100px; */
		-webkit-box-shadow: 10px 10px 50px rgb(74, 21, 82);
		box-shadow: 10px 10px 50px rgb(74, 21, 82);
	}




	.arif1 {

		width: 20%;
		margin-top: -225px;
		margin-left: px;
	}

	@-webkit-keyframes animate {
		0% {
			--percentage: 0;
		}

		100% {
			--percentage: var(--value);
		}
	}

	@keyframes animate {
		0% {
			--percentage: 0;
		}

		100% {
			--percentage: var(--value);
		}
	}

	@property --percentage {
		syntax: '<number>';
		inherits: true;
		initial-value: 0;
	}

	[role="progressbar"] {
		--percentage: var(--value);
		--primary: rgb(25, 219, 206);
		--secondary: rgb(50, 58, 59);
		--size: 200px;
		-webkit-animation: animate 5s 0.5s forwards;
		animation: animate 5s 0.5s forwards;
		width: var(--size);
		aspect-ratio: 1;
		border-radius: 100%;
		position: relative;
		overflow: hidden;
		display: -ms-grid;
		display: grid;
		place-items: center;
	}

	#a1 {
		--value: 90;
	}

	#a2 {
		--value: 85;
	}

	#a3 {
		--value: 87;
	}

	[role="progressbar"]::before {
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
		-webkit-mask: radial-gradient(rgb(204, 7, 7) 55%, transparent 0);
		mask: radial-gradient(rgb(204, 7, 7) 55%, transparent 0);
		mask-mode: alpha;
		-webkit-mask: radial-gradient(#0000 55%, #000 0);
		-webkit-mask-mode: alpha;
	}

	/* project */



	@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
	@import url(https://fonts.googleapis.com/css?family=Fauna+One);

	.snip1482 {
		font-family: 'Fauna One', Arial, sans-serif;
		position: relative;
		/* margin: 10px 20px; */
		min-width: 230px;
		max-width: 295px;
		min-height: 220px;
		width: 100%;
		color: #ffffff;
		text-align: right;
		line-height: 1.4em;
		background-color: #1a1a1a;
		font-size: 16px;
	}

	.snip1482 * {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all 0.35s ease;
		-o-transition: all 0.35s ease;
		transition: all 0.35s ease;
	}

	.snip1482 img {
		position: absolute;
		right: 0%;
		top: 50%;
		opacity: 1;
		width: 100%;
		-webkit-transform: translate(0%, -50%);
		-ms-transform: translate(0%, -50%);
		transform: translate(0%, -50%);
	}

	.snip1482 figcaption {
		position: absolute;
		width: 50%;
		top: 50%;
		left: 0;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		padding: 20px 0 20px 20px;
	}

	.snip1482 h2,
	.snip1482 p {
		margin: 0;
		width: 100%;
		-webkit-transform: translateX(20px);
		-ms-transform: translateX(20px);
		transform: translateX(20px);
		opacity: 0;
	}

	.snip1482 h2 {
		font-family: 'Playfair Display', Arial, sans-serif;
		text-transform: uppercase;
		margin-bottom: 5px;
	}

	.snip1482 p {
		font-size: 0.8em;
	}

	.snip1482 a {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}

	.snip1482:hover img,
	.snip1482.hover img {
		width: 55%;
	}

	.snip1482:hover figcaption h2,
	.snip1482.hover figcaption h2,
	.snip1482:hover figcaption p,
	.snip1482.hover figcaption p {
		-webkit-transform: translateX(0px);
		-ms-transform: translateX(0px);
		transform: translateX(0px);
		opacity: 1;
	}

	.arif2 {
		margin-left: -50px;
	}

	/* footer */

	.contactlogo {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: absolute;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.contactlogo li a {
		width: 70px;
		height: 70px;
		background-color: #fff;
		text-align: center;
		line-height: 55px;
		font-size: 35px;
		margin: 0 10px;
		display: block;
		border-radius: 50%;
		position: relative;
		overflow: hidden;
		border: 1px solid #fff;
		z-index: 1;
	}

	#arif10 {
		margin-top: -70px;
	}

	.contactlogo li a img {
		position: relative;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
		z-index: 3;

	}

	.contactlogo li a:hover img {
		color: #fff;
		-webkit-transform: rotateY(360deg);
		transform: rotateY(360deg);
	}

	.contactlogo li a:before {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 100%;
		background: #f00;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
		z-index: 2;
	}

	.contactlogo li a:hover:before {
		top: 0;
	}

	.contactlogo li:nth-child(1) a:before {
		background: #36d60e;
	}

	.contactlogo li:nth-child(2) a:before {
		background: #003cff;
	}

	.contactlogo li:nth-child(3) a:before {
		background: #0077b5;
	}

	.contactlogo li:nth-child(4) a:before {
		background: #dd4b39;

	}

	/* Start footer  */
	#footer {
		background: -webkit-gradient(linear, left top, left bottom, from(#ffffff00), color-stop(#45FFCA), to(#0f81ec));
		background: -o-linear-gradient(top, #ffffff00, #D67BFF, #45FFCA);
		background: linear-gradient(to bottom, #ffffff00, #D67BFF, #45FFCA);
		border-radius: 20px;
	}

	.btn-1 {
		background: none;
		text-align: center;
		display: inline-block;
		padding: 8px 20px;
		border: 1px solid #0e1902;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.btn-1:before {
		content: "";
		position: absolute;
		height: 150px;
		width: 50px;
		background: #013220;
		left: -55px;
		top: -40px;
		-webkit-transform: rotate(37deg);
		-ms-transform: rotate(37deg);
		transform: rotate(37deg);
		-webkit-transition: all .3s;
		-o-transition: all .3s;
		transition: all .3s;
		opacity: 0.3;
	}

	.btn-1:hover:before {
		left: 95%;
	}

	.btn-2 {
		text-align: center;
		display: inline-block;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.btn-2:before {
		content: "";
		position: absolute;
		width: 0;
		background: #0e1902;
		left: 35%;
		height: 1px;
		bottom: 0;
		-webkit-transition: all .3s;
		-o-transition: all .3s;
		transition: all .3s;
		opacity: 0.7;
	}

	.btn-2:hover:before {
		width: 100%;
		left: 0;
	}
}

@media only screen and (min-width:768px) {
	nav ul li {
		display: inline-block;
	}
}

/* social media icons styling */
.social-icons {
	font-size: 36px;
	cursor: pointer;
}

.fa-facebook:hover {

	color: #1877F2;
}

.fa-instagram:hover {
	color: #E4405F;

}

.fa-twitter:hover {
	color: #1DA1F2;
}

.fa-linkedin:hover {
	color: lightskyblue;
}

.fa-twitch:hover {
	color: #2BD6B4;
}

.fab {
	color: #000000;
}

/* footer styling */
#footer {
	background-color: #808080;
	text-align: center;
}

/* certifiacte*/






.stretch {
	border: 4px solid transparent;
	padding: 10px;
	-o-border-image: url(https://c.pxhere.com/images/c4/56/a9d6dfc04d5ad4b03669dcc2523c-1617980.jpg!d) 50;
	border-image: url(https://c.pxhere.com/images/c4/56/a9d6dfc04d5ad4b03669dcc2523c-1617980.jpg!d) 50;
	margin: 5px;
}

#certs img {
	position: relative;
	width: 200px;
	height: auto;
	border-radius: 7px;
	cursor: pointer;
	text-align: center;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#certs img:hover {
	-webkit-transform: scale(1.25);
	-ms-transform: scale(1.25);
	transform: scale(1.25);
	z-index: 1000;
	-webkit-box-shadow: 0px 0px 5px #c31432;
	box-shadow: 0px 0px 5px #c31432;
}


@media (min-width: 768px) {
	#certs img {
		width: auto;
		height: 250px;
	}

	#certs img:hover {
		-webkit-transform: scale(1.75);
		-ms-transform: scale(1.75);
		transform: scale(1.75);
	}
}