@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,300;1,600&display=swap');





/*variable CSS*/

:root {

	--header-height:3rem;
	--font-semi:600;

	--first-color:#4070fa;

	--second-color:#0e2431;

    --body-font: 'Poppins', sans-serif;

    --body-font: 'Poppins', sans-serif;

    --big-font-size:2rem;

    --h2-font-size:1.25rem;

    --normal-font-size:0.938rem;

}

@media screen and (min-width:768px){

	:root {

	

    --body-font: 'Poppins', sans-serif;

    --big-font-size:3.5rem;

    --h2-font-size:2rem;

    --normal-font-size:1rem;

}

}



/***margins***/

:root {

	--mg-1:0.5rem;

	--mg-2:1rem;

	--mg-3:1.5rem;

	--mg-4:2rem;

    --mg-5:2.5rem;

    --mg-6:3rem;

}

/***Z-imdex***/

:root {

	--z-back:-10;

    --z-normal:1;

    --z-tooltip:10;

    --z-fixed:100;	

}

 /*********BASIC***/

*,::beforw,::after {

	box-sizing: border-box;

}

html{

	scroll-behavior: smooth;

}

body {

	margin: var(--header-height) 0 0 0;

	font-family: var(--body-font);

	font-size: var(--normal-font-size);

	color: var(--second-color);

}

h1,h2,p {

	margin: 0;

}

ul {

	margin: 0;

	padding: 0;

	list-style: none;

}

a {

	text-decoration: none;

}

img{

	max-width: 100%;

	height: auto;

	display: block;

}



/*****CLASSES ****/

 .section-title {

 	position: relative;

 	font-size: var(--h2-font-size);

 	color: var(--first-color);

 	margin-top: var(--mg-2);

 	margin-bottom: var(--mg-4);

 	text-align: center;

 }



 .section-title::after {

 	position: absolute;

 	content: "";

 	width: 64px;

 	height: 0.18rem;

 	left: 0;

 	right: 0;

 	margin: auto;

 	top: 2rem;

 	background-color: var(--first-color);

 }





 .section {

 	padding-top: 3rem;

 	padding-bottom:2rem;

 	 }

 .bd-grid {

 	 	max-width: 1024px;

 	 	display: grid;

 	 	grid-template-columns: 100%;

 	 	grid-column-gap: 2rem;

 	 	width: calc(100% - 2rem);

 	 	margin-left: var(--mg-2);

 	 	margin-right: var(--mg-2);

 	 }

.l-header {

	width: 100%;

	position: fixed;

	top: 0;

	left: 0;

	z-index: var(--z-fixed);

	background-color: #fff;

	box-shadow: 0 1px 4px rgba(146, 161, 176, .15);

}





.nav {

	height: var(--header-height);

	display: flex;

	justify-content: space-between;

	align-items: center;

	font-weight: var(--font-semi);

}



@media screen and (max-width:768px) {

	.nav_menu {

		position: fixed;

		top: var(--header-height);

		right: -100%;

		height: 100%;

		width: 80%;

		padding: 2rem;

		background-color: var(--second-color);

		transition: .5s;

	}

}

.nav_item {

		margin-bottom: var(--mg-4);

	}



	.nav_link {

		position: relative;

		color: white;

	}

	.nav_link:hover {

		position: relative;

	}

	.nav_link:hover::after {

		position: absolute;

		content: "";

		width: 100%;

		height: 0.18rem;

		left: 0;

		top: 2rem;

		background-color: var(--first-color);

	}



	.nav_logo {

		color: var(--second-color);

	}

	.nav_toggle {

        color:var(--second-color);

        font-size: 1.5rem;

        cursor: pointer;

	}



	.active::after {

		position: absolute;

		content: "";

		width: 100%;

		height: 0.18rem;

		left: 0;

		top: 2rem;

		background-color: var(--first-color);

	}







	.show {

		right: 0;

	}







	/************HOME SECTION*******/

	.home {

		height:calc(100vh - 3rem) ;

		row-gap: 1rem;

	}



	.home_data {

		align-self: center;

	}



	.home_title {

		font-size:var(--h2-font-size);

		margin-bottom: var(--mg-5);

		

	}

	.home_title-color{

		color: var(--first-color);

	}

    .button{

    	display: inline-block;

    	background-color: var(--first-color);

    	color: whitesmoke;

    	padding: .75rem 2.5rem;

    	font-weight: var(--font-semi);

    	border-radius: .5rem;



}

    .button:hover {

box-shadow: 0 10px 36px rgba(0, 0, 0, .15);

    	}

    

	.home_social {

		display: flex;

		flex-direction: column;

		opacity: 0;

	}



	.home_social-icon {

     width: max-content; 

     color: var(--second-color);

     font-size: 1.5rem;

     margin-bottom: var(--mg-2);

     transition: .5s;

	}





	.home_social-icon:hover {

		color: var(--first-color);

		transform: scale(1.18);

	}



	.home_img {

		position: absolute;

		right: 0;

		bottom:0;

        width: 295px;





    }



/*****ABOUT SECTION*****/





.about_container {

row-gap: 2rem;

text-align: justify;

}

.about_subtitle {

margin-bottom: var(--mg-2);

}

.about_img {

	justify-self: center;

}

.about_img img {

width: 200px;

border-radius: .5rem;

}



/*******SKILS SECTION*/

.skills_container {

	row-gap: 2rem;

	text-align: center;

}

.skills_subtitle {

	margin-bottom: var(--mg-2);

}

.skills_content{

	margin-bottom: var(--mg-4);

}

.skills_data {

	display: flex;

	justify-content: space-between;

	align-items: center;

	position: relative;

	font-weight: var(--font-semi);

	padding: .5rem 1rem;

	margin-bottom: var(--mg-4);

	border-radius: .5rem;

	box-shadow: 0 4px 25px rgba(14, 36, 49, .15);

}

.skills_icon{

    font-size: 2rem;

    margin-right: var(--mg-2);

    color: var(--first-color);

}

.skills_names {

   display: flex;

   align-items: center;

}

.skills_bar {

	position: absolute;

	left: 0;

	bottom: 0;

	height: .25rem;

	border-radius: .5rem;

	z-index: var(--z-back);

	background-color: var(--first-color);



}









.skill_html {

	width: 95%;

}



.skill_css {

	width: 85%;

}



.skill_js {

	width: 65%;

}



.skill_bstr {

	width: 50%;

}



/*****************PROJECTS**********/

.work_container {

	row-gap: 2rem;

}





.work_img {

	box-shadow: 0 4px 25px rgba(14, 26, 49, .15);

	border-radius: .5rem;

	overflow: hidden;



}



.work_img img {

	transition: 1s;

	cursor: pointer;

}

.work_img .work_abt {

	padding: 10px;

}

.work_img img:hover {

	transform: scale(1.02);

}







/********CONTACT ******/

.contact_input {

	width: 90%;

	font-size: var(--normal-font-size);

	font-weight: var(--font-semi);

	padding: 1rem;

	border-radius: .5rem;

	border: 2px solid var(--second-color);

	outline: none;

	margin-bottom: var(--mg-4);

}



.contact_button {

	display: block;

	border: none;

	outline: none;

	font-size: var(--normal-font-size);

	cursor: pointer;

	margin-left: auto;

}





/*****FOOTER****/



.footer{

	background-color: var(--second-color);

	color: white;

	text-align: center;

	padding: 2rem 0;

}



.footer_title {

	font-size: 2rem;

	margin-bottom: var(--mg-4);opacity: .5;

}

.footer_social {

margin-bottom: var(--mg-4);

}



.footer_icon {

	font-size: 1.5rem;

	margin: 0 var(--mg-2);

	color: white;

	transition: .5s;

}

.footer_icon:hover {

		color: var(--first-color);

		transform: scale(1.1);

	}











@media screen and (min-width:768px) {

	body {

		margin: 0;

	}

	.section {

		padding-top: 4rem;

		padding-bottom: 3rem;

	}

	.section-title {

		margin-bottom: var(--mg-6);

	}

	.section-title:after {

		width: 80px;

		top: 3rem;

	}

	.nav {

		height: calc(var(--header-height) + 1rem);

	}

	.nav_list {

		display: flex;

		padding-top: 0;

	}

	.nav_item {

		margin-left: var(--mg-6);

		margin-bottom: 0;

	}

	.nav_link {

		color: var(--second-color);

	}

	.nav_toggle {

		display: none;

	}

    

    .home {

    	height: 100vh;

    }

    .home_data {

    	align-self: flex-end;

    }

    .home_img {

    	width: 457px;

    	bottom: 15%;

    }



    .about_container {

    	grid-template-columns: repeat(2, 1fr);

    	align-items: center;

    	text-align: initial;

    }

    .about_img img {

        width: 300px;

    }

    .work_container {

    	grid-template-columns: repeat(3, 1fr);

    	grid-template-rows: repeat(2, 1fr);

    	column-gap: 2rem;

    }



    .contact_form {

    	width: 360px;

    }

    .contact_container {

    	justify-items: center;

    }

}



@media screen and (min-width:1024px){

	.bd-grid {

		margin-left: auto;

		margin-right: auto;

	}

	.home_img {

		right: 10%;

	}

}