@import
	url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap')
	;

:root {
	--green: #00FF00;
	--black: #000;
	--white: #fff;
	--light-bg: rgb(238, 238, 238);
	--border-bold: .5rem solid var(--black);
	--border-light: .2rem solid var(--black);
}

* {
	font-family: 'Rubik', sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	border: none;
	text-decoration: none;
	color: var(--black);
}

*::selection {
	background-color: var(--black);
	color: var(--green);
}

*::-webkit-scrollbar {
	height: .5rem;
	width: 1rem;
}

*::-webkit-scrollbar-track {
	background-color: transparent;
}

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

html {
	font-size: 62.5%;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	overflow: hidden;
	transition: .2s linear !important;
}

body.active {
	padding-left: 35rem;
}

section {
	padding: 3rem 2rem;
	margin: 0 auto;
	max-width: 1200px;
	text-align: center;
}

.heading {
	margin-bottom: 3rem;
	text-align: center;
}

.heading span {
	text-transform: uppercase;
	font-size: 3.2rem;
	border-bottom: var(--border-bold);
}

.message {
	position: sticky;
	top: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	background-color: var(--);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem;
	font-size: 2rem;
}

.message i {
	cursor: pointer;
}

.btn {
	display: inline-block;
	margin-top: 1rem;
	cursor: pointer;
	padding: 0.5rem 1rem;
	border: var(--border-light);
	font-size: 2rem;
	background: none;
	margin: right 10px;
}
.bbtn-download:hover {
	background-color: var(--black);
	color: var(--white);
}
.button-cont{
  text-align: center;
  align-items:center;
}
.bbtn-download {
	margin-top: 1rem;
	cursor: pointer;
	padding: 0.5rem 2rem;
	border: var(--border-light);
	font-size: 2rem;
	background: none;
	background-color: var(--green);
}
.bbtn:hover {
	background-color: var(--black);
	color: var(--white);
}
.bbtn {
	margin-top: 1rem;
	cursor: pointer;
	padding: 0.5rem 2rem;
	border: var(--border-light);
	font-size: 2rem;
	background: none;
	background-color: var(--green);
	margin-right: 10px;
	text-align: center;
}

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

.header {
	position: fixed;
	top: 0;
	left: -35rem;
	height: 100vh;
	background-color: var(--white);
	border-right: var(--border-bold);
	width: 35rem;
	padding: 3rem 2rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-flow: column;
	transition: .2s linear !important;
	text-align: center;
	z-index: 1000;
}

.header .logo {
	text-transform: none;
	border-bottom: var(--border-bold);
	font-weight: bolder;
	font-size: 3.5rem;
}

.header .navbar {
	width: 100%;
	height: min-content;
}

.header .navbar a {
	display: block;
	font-size: 2.5rem;
	padding: 1.5rem;
	margin: .5rem;
}

.header .navbar a.active, .header .navbar a:hover {
	background-color: var(--green);
}

.header .follow a {
	font-size: 3rem;
	margin: 0 1rem;
	cursor: pointer;
	transition: .6s linear !important;
}

.header .follow a:hover {
	transform: rotate(360deg);
}

.foot a {
	font-size: 3rem;
	margin: 0 1rem;
	cursor: pointer;
	transition: .6s linear !important;
}

.foot {
	text-align: center;
}

.foot a:hover {
	transform: rotate(360deg);
}

#menu-btn {
	position: absolute;
	top: 0;
	right: -5.5rem;
	height: 4.5rem;
	line-height: 4.5rem;
	width: 5rem;
	font-size: 2.5rem;
	cursor: pointer;
	background-color: var(--green);
	color: var(--white);
}

.header.active {
	left: 0;
}

.home {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
	min-height: 100vh;
}

.home .image {
	flex: 1 1 40rem;
}

.home .image img {
	height: 65rem;
	padding: 2rem;
	border: var(--border-bold);
}

.home .content {
	flex: 1 1 40rem;
}

.home .content .h3name {
	text-transform: none;
	font-size: 20px;
	margin-bottom: .2rem;
}

.home .content span {
	display: inline-block;
	padding: 0.5rem 1rem;
	background-color: var(--green);
	font-size: 23px;
	margin: 1rem 0;
}

.home .content p {
	font-size: 1.7rem;
	line-height: 2;
	padding: 1rem 0;
}

.about .biography .image {
	flex: 1 1 40rem;
	width: 100px;
	height: auto;
	margin-right: 5px;
}

.about .biography .image img {
	height: 65rem;
	padding: 2rem;
	border: var(--border-bold);
}

.about .biography {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	min-height: 100vh;
}

.about .biography p {
	margin: 2rem auto;
	max-width: 70rem;
	line-height: 2;
	font-size: 1.8rem;
}

.about .biography .bio {
	margin: 1rem 0;
}

.about .biography .bio h3 {
	padding: 1rem 2rem;
	display: inline-block;
	margin: 1rem;
	background-color: var(--light-bg);
	border: var(--border-light);
	word-break: break-all;
	font-size: 2.5rem;
	font-weight: normal;
	text-transform: none;
}

.about .biography .bio h3 span {
	font-weight: lighter;
}

.about .skills {
	margin: 3rem 0;
}

.about .skills .progress {
	margin-top: 1rem;
}

.about .skills .progress {
	margin: 1rem auto;
	max-width: 70rem;
	border: var(--border-bold);
	padding: 1rem;
}

.about .skills .progress h3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 2rem;
	padding: 1rem 2rem;
	background-color: var(--green);
}

.about .edu-exp .row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.about .edu-exp .row .box-container {
	flex: 1 1 40rem;
}

.about .edu-exp .row .box-container .title {
	padding: 1.5rem;
	font-size: 3rem;
	background-color: var(--green);
}

.about .edu-exp .row .box-container .box {
	text-align: left;
	margin: 1.5rem 0;
	background-color: var(--light-bg);
	padding: 2rem;
}

.about .edu-exp .row .box-container .box span {
	font-size: 1.5rem;
}

.about .edu-exp .row .box-container .box h3 {
	font-size: 2.5rem;
	font-weight: normal;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.about .edu-exp .row .box-container .box p {
	line-height: 1.5;
	font-size: 1.7rem;
	line-height: 2;
}

.services .box-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 1.5rem;
	align-items: flex-start;
}

.services .box-container .box {
	padding: 3rem 2rem;
	border: var(--border-light);
}

.services .box-container .box i {
	font-size: 4rem;
	margin-bottom: 2rem;
}

.services .box-container .box h3 {
	margin: 1rem 0;
	font-size: 2rem;
	padding: 1.5rem;
	background-color: var(--green);
	font-weight: normal;
}

.services .box-container .box p {
	line-height: 2;
	font-size: 1.7rem;
}

.services .box-container .box:hover {
	background-color: var(--black);
}

.services .box-container .box:hover i {
	color: var(--white);
}

.services .box-container .box:hover p {
	color: var(--white);
}

.projects .box-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 1.5rem;
	align-items: flex-start;
}

.projects .box-container .box {
	padding: 3rem 2rem;
	border: var(--border-light);
}

.projects .box-container .box img {
	height: 30rem;
	width: 100%;
	object-fit: contain;
}

.projects .box-container .box h3 {
	margin: 1rem 0;
	font-size: 2rem;
	padding: 1.5rem;
	font-weight: normal;
	background-color: var(--green);
}

.projects
 
.box-container
 
.box
 
span
{
font-size
:
1.7rem;
}
.projects
 
.box-container
 
.box
:hover
{
background-color
:
var(
--green
);
}
.projects
 
.box-container
 
.box
:hover
 
i
{
color
:
var(
--white
);
}
.projects
 
.box-container
 
.box
:hover
 
p
{
color
:
var(
--white
);
}
.contact
 
form
{
max-width
:
70rem;
margin
:
0
auto;
}
.contact
 
form
 
.box
{
width
:
100%;
padding
:
1.4rem;
font-size
:
2rem;
text-transform
:
none;
border
:
var(
--border-light
);
margin
:
1rem
0;
}
.contact
 
form
 
textarea
{
height
:
20rem;
resize
:
none;
}
.contact
 
form
 
.flex
{
display
:
flex;
flex-wrap
:
wrap;
justify-content
:
space-between;
}
.p_skills
{
font-size
:
20px;
margin
:
auto;
}
.contact
 
form
 
.flex
 
.box
{
width
:
49%;
}
.contact
 
.box-container
{
display
:
grid;
grid-template-columns
:
repeat(
auto-fit
,
minmax(
30rem
,
1fr
)
);
gap
:
1.5rem;
align-items
:
flex-start;
margin-top
:
3rem;
}
.contact
 
.box-container
 
.box
{
padding
:
3rem
2rem;
border
:
var(
--border-light
);
}
.contact
 
.box-container
 
.box
 
i
{
font-size
:
3rem;
height
:
7rem;
width
:
7rem;
line-height
:
7rem;
color
:
var(
--white
);
background-color
:
var(
--black
);
margin-bottom
:
.5rem;
}
.contact
 
.box-container
 
.box
 
h3
{
margin
:
1.5rem
0;
font-size
:
2.5rem;
}
.contact
 
.box-container
 
.box
 
p
{
font-size
:
2rem;
text-transform
:
none;
}
.credit {
	text-align: center;
	background-color: var(--black);
	padding: 3rem;
	font-size: 2rem;
	color: var(--white);
}

.bbtn-youtube
{
display
:
inline-block;
margin-top
:
1rem;
cursor
:
pointer;
padding
:
0.5rem
1rem;
border
:
var(
--border-light
);
font-size
:
2rem;
background
:
red;
background-color
:
var(
--green
);
margin
:
right
10px;
}
.bbtn-youtube
:hover
{
background-color
:
var(
--green
);
color
:
red;
}
.credit
 
span
{
color
:
var(
--green
);
}
/* media queries  */
@media ( max-width :991px) {
	html {
		font-size: 55%;
	}
	body.active {
		padding-left: 0;
	}
}

@media ( max-width :450px) {
	html {
		font-size: 50%;
	}
	.header.active {
		padding-top: 7rem;
	}
	#menu-btn.fa-times {
		right: 0;
	}
	.home .image img {
		height: auto;
		width: 100%;
	}
	.heading span {
		font-size: 2.8rem;
	}
	.about .biography .bio h3 {
		font-size: 2rem;
	}
	.contact form .flex .box {
		width: 100%;
	}
}

.projects .box-container .box span {
	font-size: 1.7rem;
}

.projects .box-container .box:hover {
	background-color: var(--green);
}

.projects .box-container .box:hover i {
	color: var(--white);
}

.projects .box-container .box:hover p {
	color: var(--white);
}

.contact form {
	max-width: 70rem;
	margin: 0 auto;
}

.contact form .box {
	width: 100%;
	padding: 1.4rem;
	font-size: 2rem;
	text-transform: none;
	border: var(--border-light);
	margin: 1rem 0;
}

.contact form textarea {
	height: 20rem;
	resize: none;
}

.contact form .flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.p_skills {
	font-size: 20px;
	margin: auto;
}

.contact form .flex .box {
	width: 49%;
}

.contact .box-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 1.5rem;
	align-items: flex-start;
	margin-top: 3rem;
}

.contact .box-container .box {
	padding: 3rem 2rem;
	border: var(--border-light);
}

.contact .box-container .box i {
	font-size: 3rem;
	height: 7rem;
	width: 7rem;
	line-height: 7rem;
	color: var(--white);
	background-color: var(--black);
	margin-bottom: .5rem;
}

.contact .box-container .box h3 {
	margin: 1.5rem 0;
	font-size: 2.5rem;
}

.contact .box-container .box p {
	font-size: 2rem;
	text-transform: none;
}

.credit
{
text-align
:
center;
background-color
:
var(
--black
);
padding
:
3rem;
font-size
:
2rem;
color
:
var(
--white
);
}
.bbtn-youtube {
	display: inline-block;
	margin-top: 1rem;
	cursor: pointer;
	padding: 0.5rem 1rem;
	border: var(--border-light);
	font-size: 2rem;
	background: red;
	background-color: var(--green);
	margin: right 10px;
}

.bbtn-youtube:hover {
	background-color: var(--green);
	color: red;
}

.credit span {
	color: var(--green);
}
/* media queries  */
@media
(
max-width
:991px)
{
html
{
font-size
:
55%;
}
body
.active
{
padding-left
:
0;
}
}
@media
(
max-width
:450px)
{
html
{
font-size
:
50%;
}
.header
.active
{
padding-top
:
7rem;
}
#menu-btn
.fa-times
{
right
:
0;
}
.home
 
.image
 
img
{
height
:
auto;
width
:
100%;
}
.heading
 
span
{
font-size
:
2.8rem;
}
.about
 
.biography
 
.bio
 
h3
{
font-size
:
2rem;
}
.contact
 
form
 
.flex
 
.box
{
width
:
100%;
}
}