:root {
	--color-white: #fff;
	--color-light: #f4f4f4;
	--color-dark: #525252;
	--color-black: #141415;
	--color-primary: #028090;
	--color-primary-light: hsl(14, 184%, 5%, 39%);
	--color-success: #29f5a6;
	--color-warning: #ffce31;
	--color-default: #00bbf9;

	--transition: all 300ms ease;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: 0;
	border: 0;
	list-style: none;
	text-decoration: none;
}

::-webkit-scrollbar {
	width: 10px;
	background: var(--color-primary-light);
}
::-webkit-scrollbar-thumb {
	background: var(--color-primary);
}

html {
	font-size: 15px;
	scroll-behavior: smooth;
}

body {
	background: var(--color-white);
	font-family: 'Poppins', sans-serif;
	color: var(--color-dark);
	max-width: 100vw;
}

h1,
h2,
h3,
h4,
h5 {
	color: var(--color-black);
	line-height: 1.2;
}

h1 {
	font-size: 3.8rem;
}
h2 {
	font-size: 2.6rem;
}
h3 {
	font-size: 1.6rem;
}
h4 {
	font-size: 1.2rem;
}
h5 {
	font-size: 0.86rem;
}

p {
	line-height: 1.8;
}

.container {
	width: 80%;
	margin: 0 auto;
}

section {
	max-width: 100vw;
	padding: 10rem 0 7rem;
	overflow-x: hidden;
}
section h1 {
	text-align: center;
	display: block;
	margin-bottom: 5rem;
}

img {
	width: 310px;
	margin-left: -29px;
	margin-top: -29px;
}

.btn {
	padding: 1.4rem 3.4rem;
	font-size: 1.1rem;
	color: var(--color-black);
	background: var(--color-white);
	border-radius: 3px;
	display: inline-block;
	margin: 2rem 0;
	transition: var(--transition);
}
.btn:hover {
	box-shadow: 0 0.6rem 1rem var(--color-primary-light);
}

.btn-primary {
	background: var(--color-primary);
	color: var(--color-white);
}

nav {
	background: var(--color-white);
	width: 100%;
	height: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	z-index: 2;
	border-bottom: 1px solid var(--color-light);
}

nav.show-box-shadow {
	box-shadow: 0 0.6rem 1rem var(--color-primary-light);
	border: none;
}

nav .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

nav button {
	display: none;
}

nav h3 {
	color: var(--color-primary);
	position: relative;
}
nav h3:hover::before {
	width: 100%;
}

nav h3::before {
	color: black;
}

nav h3::before {
	content: attr(data-demo);
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: width 600ms;
}

footer h3 {
	color: var(--color-primary);
	position: relative;
}
footer h3:hover::before {
	width: 100%;
}

footer h3::before {
	color: black;
}

footer h3::before {
	content: attr(data-demo);
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: width 600ms;
}

nav .container ul {
	display: flex;
	height: 100%;
}

nav .container ul li a {
	height: 100%;
	width: 7rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-black);
	position: relative;
	transition: var(--transition);
}

nav .container ul li a:hover {
	color: var(--color-primary);
}

nav .container ul li a.active {
	background: var(--color-primary);
	color: var(--color-white);
}

section.landing {
	display: grid;
	place-items: center;
	position: relative;
	top: 5rem;
	padding-bottom: 14rem;
}

section.landing .container {
	display: grid;
	grid-template-columns: 5rem auto 26rem;
	gap: 2rem;
}

section.landing .socials {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin-top: 5rem;
}

section.landing .socials a {
	font-size: 1.1rem;
	background: var(--color-light);
	color: var(--color-dark);
	padding: 0.3rem;
	border-radius: 50%;
	height: 2rem;
	width: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--transition);
}

section.landing .socials a:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

section.landing .info h1 {
	text-align: left;
	margin: 0;
}

section.landing h3 {
	margin: 2.4rem 0 1rem;
}

section.landing .info p {
	width: 35rem;
}

section.landing .profile-area {
	display: flex;
	justify-content: center;
	align-items: center;
}

section.landing .profile-area .outer-circle {
	width: 26rem;
	height: 26rem;
	border: 1px solid var(--color-primary);
	border-radius: 50%;
	position: relative;
	animation: move 30s linear infinite;
}

@keyframes move {
	to {
		transform: rotate(360deg);
	}
}

section.landing .profile-area .outer-circle span {
	display: block;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	position: absolute;
	background: var(--color-white);
	color: var(--color-primary);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 1rem var(--color-primary-light);
}

section.landing .profile-area .outer-circle span:nth-child(1) {
	left: calc(50% - 2rem);
	top: -2rem;
}
section.landing .profile-area .outer-circle span:nth-child(2) {
	right: -2rem;
	top: calc(50% - 2rem);
}

section.landing .profile-area .outer-circle span:nth-child(3) {
	top: calc(50% - 2rem);
	left: -2rem;
}

section.landing .profile-area .outer-circle span:nth-child(4) {
	left: calc(50% - 2rem);
	bottom: -2rem;
}

section.landing .profile-area .inner-circle {
	position: absolute;
	width: 18rem;
	height: 18rem;
	border-radius: 50%;
	overflow: hidden;
}
section.about {
	background: var(--color-light);
}

section.about .container {
	display: grid;
	grid-template-columns: 26rem auto;
	gap: 5rem;
}

section.about p {
	margin-bottom: 1rem;
}

section.about .container .read-more-content {
	display: none;
}
/* toogle read more content using JS */
section.about .container .read-more-content.show-content {
	display: block;
}

section.about .container .read-more {
	display: block;
	margin: 1rem 0 2rem;
	color: var(--color-primary);
	cursor: pointer;
}

section.about .container .read-more:hover {
	text-decoration: underline;
}

section.skills .container {
	width: 50%;
}

section.skills .skill {
	margin-bottom: 1rem;
}

section.skills .skill .head {
	background: var(--color-primary);
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--color-white);
	padding: 1.6rem;
	cursor: pointer;
}

section.skills .skill .head h4 {
	color: var(--color-white);
}

section.skills .skill .head .left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

section.skills .skill .items {
	display: none;
}
section.skills .container .skill .items.show-items {
	display: block;
}

section.skills .skill .item {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 1rem;
	padding: 1.6rem;
	background: var(--color-light);
	margin-bottom: 0.3rem;
	transition: var(--transition);
}
section.skills .container .skill .items.show-items {
	display: block;
}

section.skills .skill .item:hover {
	background: var(--color-white);
}

section.skills .skill .progress-area {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
}

section.skills .item .progress-bar {
	width: 100%;
	height: 1rem;
	overflow: hidden;
	/* color: var(--color-light); */
	/* background: var(--color-light); */
	transition: width 0.5s ease;
}
section.skills .item .progress-bar .progress {
	height: 100%;
	width: 100%;
	/* background: var(--color-primary); */
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translate3d(-100%, -50%, 0);
	}
	100% {
		opacity: 1;
		transform: none;
		background: var(--color-primary);
	}
}

.and {
	font-size: 2.2rem;
	color: var(--color-primary);
}

.js_icon:hover {
	color: #ffd300;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}

.active-directory-icon:hover {
	color: #ff006e;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}

.ccna-icon:hover {
	color: #fb8500;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}

.react_icon:hover,
.docker-icon:hover {
	color: #61dbfb;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}


.node_icon:hover {
	color: #66cc33;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}

.cyber_icon:hover {
	color: #f8f9fb;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}

.css_icon:hover,
.mongo_icon:hover {
	color: #dd2d4a;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}
.html_icon:hover,
.network_icon:hover {
	color: #3a86ff;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}
.python_icon:hover {
	color: #fec89a;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}
.linux_icon:hover {
	color: #8338ec;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}
.data_icon:hover {
	color: #2f4858;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}

.network_icon .git_icon {
	border-radius: 50%;
}
.git_icon:hover {
	overflow: hidden;
	border-radius: 50%;
	background-color: black;
	color: white;
	transform: scale(1.2);
	transition: transform var(--transitionTime);
}

.active-directory-icon,
.ccna-icon,
.react_icon,
.node_icon,
.cyber_icon,
.css_icon,
.html_icon,
.python_icon,
.network_icon,
.mongo_icon,
.linux_icon,
.data_icon,
.aws_icon,
.docker-icon {
	color: #028090;
}

section.services {
	background: var(--color-light);
}

section.services .container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	perspective: 1000px;
}

section.services .container .service {
	background: var(--color-white);
	padding: 3rem 2rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	cursor: default;
	transition: 1.5s ease-in-out;
}

section.services .container .service:hover {
	box-shadow: 0 3rem 3rem var(--color-primary-light);
	transform: rotateX(30deg) rotateY(0deg) rotateZ(0deg);
}

section.services .container .service span {
	background: var(--color-default);
	width: 4rem;
	height: 4rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--color-white);
}

section.services .container .service:nth-child(2) span {
	background: var(--color-warning);
}

section.services .container .service:nth-child(3) span {
	background: var(--color-success);
}

section.recent-work h1 {
	text-align: center;
	margin: 3rem 0 1rem;
	width: 100%;
	padding-bottom: 30px;
}

section.recent-work .projects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
}

section.recent-work .projects .project {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

section.recent-work .projects .project .action {
	display: flex;
	gap: 2rem;
}

section.recent-work .projects .project .action a {
	color: var(--color-primary);
}

section.recent-work .projects .project .action a:hover {
	text-decoration: underline;
}

section.testimonials {
	background: var(--color-light);
}

section.testimonials .container {
	width: 44rem;
}

section.testimonials .carousel {
	display: flex;
	align-items: center;
}

section.testimonials .testimonial {
	background: var(--color-white);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: 0.9rem;
	margin-bottom: 2rem;
	cursor: pointer;
}

section.testimonials .testimonial .head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

section.testimonials .testimonial .head .profile-area {
	gap: 1rem;
	flex-direction: column;
}

section.testimonials .testimonial .head .profile-area .avatar {
	width: 6rem;
	height: 6rem;
}

section.testimonials .testimonial .head .stars {
	color: var(--color-primary);
}

section.testimonials .testimonial .head .stars span {
	font-size: 1.2rem;
}

section.contact {
	background: url('./img/background-image.jpg') no-repeat center center/cover;
	padding: 0;
	max-width: 100vw;
}
section.contact .overlay {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	padding: 10rem 0 7rem;
}
section.contact .container {
	width: 40%;
}
section.contact .container h1 {
	margin: 0;
	color: var(--color-white);
}
section.contact .container p {
	text-align: center;
	color: var(--color-white);
	opacity: 0.8;
	margin-top: 0.5rem;
}

section.contact form {
	margin-top: 3rem;
}

section.contact form textarea {
	height: 10rem;
}

section.contact form input,
section.contact form textarea {
	display: block;
	width: 100%;
	margin: 0.5rem 0;
	padding: 1.6rem;
	border: 1px solid var(--color-white);
	background: transparent;
	color: var(--color-white);
	transition: var(--transition);
}
section.contact form input:focus,
section.contact form textarea:focus {
	background: var(--color-white);
	color: var(--color-black);
}
section.contact form input::placeholder,
section.contact form textarea::placeholder {
	color: var(--color-white);
}

section.contact form .btn {
	width: 14rem;
	border: none;
	background: var(--color-white);
	color: var(--color-black);
	margin: 2rem auto 0;
}

section.contact form .btn:hover {
	background: var(--color-primary);
	cursor: pointer;
	color: var(--color-white);
}

footer {
	padding-top: 5rem;
}

footer .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

footer .container ul {
	display: flex;
	gap: 3rem;
}
footer .container ul a {
	color: var(--color-dark);
	transition: var(--transition);
}

footer .container ul a:hover {
	color: var(--color-primary);
}

footer .container .socials {
	display: flex;
	gap: 2rem;
}

footer .container .socials a {
	font-size: 1.1rem;
	background: var(--color-light);
	color: var(--color-dark);
	padding: 0.3rem;
	border-radius: 50%;
	height: 2rem;
	width: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--transition);
}
footer .container .socials a:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

footer .copyright {
	background: var(--color-primary);
	color: var(--color-white);
	text-align: center;
	margin-top: 5rem;
	padding: 2rem 0;
	font-size: 0.8rem;
}

.img_1 {
	width: 384px;
	margin-left: 0px;
	margin-top: 5px;
}

.img_2 {
	width: 111px;
	margin-left: 0px;
	margin-top: 5px;
}

.scale-up-center {
	transition: transform 0.2s linear;
}
.scale-up-center:hover {
	transform: scale(1.2);
}

.avatar_image {
	width: 111px;
	margin-left: 1px;
	margin-top: -23px;
	border-radius: 50%;
}

#about_image > img {
	margin-top: 30px;
	aspect-ratio: 1600/1479;
}

#myProgress {
	width: 100%;
	background-color: #ddd;
}

#myBar {
	width: 1%;
	height: 30px;
	background-color: #04aa6d;
}

@media screen and (max-width: 600px) {
	h1 {
		font-size: 2.2rem;
	}
	h2 {
		font-size: 1.6rem;
	}
	h3 {
		font-size: 1.2rem;
	}
	h4 {
		font-size: 1rem;
	}
	h5 {
		font-size: 0.68rem;
	}

	section.landing .container .profile-area img {
		width: 189px;
		margin-left: -33px;
		margin-top: -29px;
	}

	.container {
		width: 94%;
	}

	nav {
		box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1);
	}

	nav h3 {
		margin-left: 1rem;
	}
	nav .container {
		width: 100%;
	}
	nav .container ul {
		position: fixed;
		top: 0;
		flex-direction: column;
		z-index: 3;
		width: 16rem;
		height: 100vh;
		background: var(--color-white);
		box-shadow: 1rem 0 2rem var(--color-primary-light);
		display: none;
	}
	nav ul li {
		height: 4.6rem;
		width: 100%;
	}
	nav .container ul li a {
		width: 100%;
		justify-content: start;
		padding-left: 2rem;
	}
	nav .container ul li a:hover {
		padding-left: 3rem;
	}
	nav button {
		display: inline-block;
		cursor: pointer;
		background: transparent;
		color: var(--color-black);
		margin-right: 1rem;
	}
	nav button#close-btn {
		display: none;
	}

	section.landing {
		margin-top: -4rem;
		padding-bottom: 7rem;
		max-width: 100vw;
		overflow-x: hidden;
	}
	section.landing .container {
		grid-template-columns: 1fr;
		grid-template-rows: 30% 50%;
		text-align: center;
		row-gap: 6rem;
	}
	section.landing .container .socials {
		display: none;
	}
	section.landing .container .info {
		width: 90%;
		margin: 0 auto;
	}
	section.landing .container .info h1 {
		text-align: center;
	}
	section.landing .container .info p {
		margin: 0 auto;
		width: 92%;
	}
	section.landing .container .profile-area {
		grid-row: 1;
		width: 94%;
		margin: 0 auto;
	}
	section.landing .container .outer-circle {
		width: 16rem;
		height: 16rem;
	}
	section.landing .container .inner-circle {
		width: 10rem;
		height: 10rem;
	}
	section.landing .container .outer-circle span {
		width: 3rem;
		height: 3rem;
	}
	section.landing .profile-area .outer-circle span:nth-child(1) {
		left: calc(50% - 1.5rem);
		top: -1.5rem;
	}
	section.landing .profile-area .outer-circle span:nth-child(2) {
		right: -1.5rem;
		top: calc(50% - 1.5rem);
	}

	section.landing .profile-area .outer-circle span:nth-child(3) {
		top: calc(50% - 1.5rem);
		left: -1.5rem;
	}

	section.landing .profile-area .outer-circle span:nth-child(4) {
		left: calc(50% - 1.5rem);
		bottom: -1.5rem;
	}

	section.about .container {
		grid-template-columns: 1fr;
		gap: 1rem;
		text-align: center;
	}

	section.skills .container {
		width: 94%;
	}

	section.services .container {
		grid-template-columns: 1fr;
	}

	section.recent-work .container .projects {
		grid-template-columns: 1fr;
	}
	section.recent-work .container h1 {
		width: 95vw;
		margin: 0.4rem 0 3rem;
	}

	section.testimonials .container {
		grid-template-columns: 1fr;
		width: 94vw;
	}
	section.testimonials .container .testimonial .head .stars span {
		font-size: 0.8rem;
	}

	section.contact .container {
		width: 94vw;
	}
	section.contact .container p {
		width: 80vw;
		margin: 0.5rem auto 0;
	}

	footer .container {
		flex-direction: column;
		gap: 3rem;
	}
	footer .container ul {
		flex-direction: column;
		text-align: center;
		gap: 1.4rem;
	}

	.thubmnail img {
		margin-left: 25px;
	}
	#about_image {
		padding-left: 25px;
		margin-bottom: 0.5rem;
	}
}