*
{
	padding: 0;
	margin: 0;
	box-sizing:border-box;
}

@keyframes MoveUpDown {
	0%, 100% {
		bottom: 0;
	  }
	  50% {
		bottom: 50px;
	  }
}

input button
{

}

@keyframes MoveUpDown1 {
	0%, 100% {
		bottom: 0;
		right: 0;

	  }
	  75%
	  {
		  right:20px;
	  }
	  50% {
		bottom:20px;

	  }
}
.humb
{
	display: none;
}
:root
{
	--light-color:#a1c4cf;
    --dark-color: #192830;
	--whitcolir:white;
	
}

/************* for dark mood *****************/
.dark
{
	--light-color:#192830;
    --dark-color: #91ACB5;
	--whitcolir:#192830;
	
}






body
{
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-family:"poppins", sans-serif;
	text-align: center;
	width: 100%;
	font-size:1.3rem;
	line-height:30pt;
	background-color: var(--whitcolir);
	

}


header a
{
	text-decoration: none;
}
header
{
	width: 100%;
   height:40em;
	
}


#logo img
{
	animation: MoveUpDown1 6s linear infinite;
	width: 3em;
	float: right;
    height: 4rem;
	position: relative;
    margin:2rem;

}


header ul
{
    list-style:none;
    height: 100%;
    display: flex;
    float:right; 
	margin: 1rem;
	margin-right: 5rem;
 
}

ul a
{
	font-size:0.9em;
	color:var(--whitcolir);
}
ul a:hover
{
	
	color:var(--light-color);
}

nav ul li 
{
	padding:1vw;


}



/*************   nav responsive    ************/

/* nav  */
#humb_icon
{
	margin: auto 0;
	display:none;
	cursor:pointer;
}

#humb_icon div
{
	width: 35px;
	height: 3px;
	background-color: white;
	margin: 6px 0;
	transition: 0.4s;

}
.open .bar1
{
	-webkit-transition:rotate(-45deg) translate(-6px,6px);
	transform: rotate(-45deg) translate(-6px,6px );
}

.open .bar2
{
	opacity:0;
}

.open .bar3
{
	-webkit-transition:rotate(45deg) translate(-6px,-8px);
	transform: rotate(45deg) translate(-6px,-8px );
}

.open .mobile
{

	
	padding-top:30px;
	padding-left:10px;
	height:auto;
    width:50%;
	display: flex;
	flex-direction: column;
	align-items:flex-start;
	justify-content:flex-start;
	background-color:rgb(0,0,0,0.5);
	border-radius: 2rem;
	

}

.mobile
{
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	height: calc(100vh-50px);
	width: 100%;

}
.mobile li
{

	margin-bottom: 10px;
}


#icon
{
	position: absolute;
	left: 0;
}

form{
	color: var(--light-color);
}	


.main
{

    display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: space-around;
	align-items:center;
	width: 100%;
	
   
}
.main button, button
{
	background-color:var(--light-color);
	 border: none;
	 color: var(--dark-color);
    padding: 12px 30px;
    text-align: center;
    text-decoration: none;
    font-size:20px;
	margin-top: 3em;
    border-radius: 1rem;
}

button:hover
{
	background-color:var(--light-color) ;
	 color: #192830;;
   
}

.main img
{
	position: relative;
	height:80%;
	width: 80%;
	animation: MoveUpDown 5s linear infinite;
	

}

.mainp
{
	
	color: aliceblue;	
	margin-left: auto;
	margin-top: 3em;
	
	

}

.main p
{
	font-size:1.2rem;
	margin:2vw;
	line-height:30pt;

}


h1{
	margin: 2em;
	text-align: center;
	color:var(--light-color);
	
}


.work,.about,.contact
{
	justify-content:space-around;
	align-items: center;
    flex-wrap: wrap;
	display: flex;
	width: 100%;

}

.about 
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: space-around;
	align-items:center;
	width: 100%; 
	column-gap: 2rem;

	
}

.about img
{
	margin-top:5rem;
	animation: MoveUpDown 3s linear infinite;
   position: relative;
	height: 100%;
	width: 100%;
}
.about article 
{
	animation: MoveUpDown 50s ;
	color: var(--dark-color);
	padding: 2rem;
}

.skills
{
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	color:#344f5e;
	text-align: center;
	
}

.skills img:hover
{
  border:#abbec4 2px solid;
  border-radius:5rem;
}

.skills img
{
	border:#ffffff 2px solid;
 
}

.work
{
	padding:5rem;

}

.work img
{
	width:25rem;
	text-align: center;


}

.skills img
{
	height: 20rem;
	width: 20rem;
}
.contact
{
 
  padding-top:6rem;
   display: grid;
   grid-template-columns: 1fr 1fr;

}   
.contact input
{
  display: block;
  margin: 1rem;
  padding: 1.2rem;
  border:none;
  width: 30rem;
  border-radius: 2rem;
 
}

.contact img
{
	height: 40vw;
	width: 40vw;
	position: relative;
	margin-top: 2rem;
	animation: MoveUpDown 3s linear infinite;

}
.submit
{
	background-color: var(--light-color);
	color:var(--dark-color);
	font-weight:bold;
	font-size: 1.2rem;
}
.qout
{
	width: 100%;
	background-image: url("assets/qout.png");
	background-attachment: fixed;
	background-size: cover;
	padding: 5vw;
}
.qout article
{
	background-color:rgba(145, 172, 181,.5);
	padding:5vw;
	border-radius: 3rem;
	
	

}









footer
{

	display: flex;
justify-content: space-around;
	font-size:1rem;
	background-color:#192830;
	color: var(--light-color);
	flex-wrap: wrap;
	height: auto;
	color: #eaf0f1;


}


footer ul
{
	
  
	display: flex;
   justify-content: space-between;
	list-style: none;
	text-decoration: none;


}

footer ul li a
{
	
	text-decoration: none;
	
	margin:1rem;
	
}
footer h1
{
	font-size: 1.5rem;
	margin: 1rem;
}


footer button
{
 margin:25px;
	 border: none;border-radius: 1rem;
    color:white;
    font-style: bold;
    padding: 12px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    background-color:var(--light-color);


}




.footer-item
{
	margin: 2rem;
}
.footer-item p
{
	margin: 2rem;
}
.last
{
	background-color:var(--dark-color);
	padding: 2rem;
}



	

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

	.main
	{
		display: block;
		top: 0;
	    height:50%;
		width: 100%;
		
		
	}
	.main img
	{
	   width:60%;
	   padding-left:5rem;
		
	}
	
	
   .mainp
   {
	    margin:0rem;
	   
   }
   .about,.contact
   {
	   
	   display: flex;
	   flex-wrap: wrap;
	   width: 100%;
	   
	   
   }
   #logo img
   {
	  width:40px;
	  height: 40px;
   }

	#icon
	{
		cursor: pointer;
	  position: fixed;
	  right: 1px;
	
	 
	
	}
	#icon img
	{
		cursor: pointer;
	  position: fixed;
	  right: 20px;
	
	 
	
	}
  header
  {
	  padding: 1rem;
  }


header nav
{
	display: none;
}

#humb_icon
{
	display: block;
	
}




}