/*######################################### navbar starts ##############################*/
/* hamburger menu */

@media(max-width: 950px){
	.nav-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	.search{
		padding: 10px;
		width: 250px;
		height: 50px;
		margin: auto;
	}

	.fa-search{
	 	position: absolute;
	 	right: 10px;
	 	top: 14px;
	 }

	 #hero{
	 	padding: 0;
	 }

	 #hero .container{
        flex-direction: column;
/*         padding :1rem; */
        gap: 2rem;
    }

    #hero h1{
    	text-align: center;
    	font-size: 30px;
    }

    .hi-text{
    	font-size:60px;
    }

    .name-text{
    	font-size: 3rem;
    }

}
@media(max-width: 875px){
	.hamburger{
		display: block;
	}

	.hamburger.active .bar:nth-child(2){
		opacity: 0;
	}

	.hamburger.active .bar:nth-child(1){
		transform: translateY(8px) rotate(45deg);
	}

	.hamburger.active .bar:nth-child(3){
		transform: translateY(-8px) rotate(-45deg);
	}

	.nav-menu{
		position: fixed;
		right: -100%;
		top:100px;
		display: flex;
		gap: 0;
		flex-direction: column;
		background-color: var(--primary-color);
		width: 100%;
		height: 60vh;
		text-align: center;
		transition: 0.3s;
		z-index: 98;
	}

	.nav-item{
		margin: 16px 0;
		display: inline-block;
	}

	.nav-menu.active{
		right: 0;
	}

	.search{
		padding: 18px;
		width: 300px;
		height: 20px;
		margin: auto;
		margin-bottom: 1rem;
/* 		background-color: red; */
		position: relative;
	}

	 #input{
/* 	 	background-color: green; */
	 	margin: auto;
	 	width: 85%;
	 	position: absolute;
	 	left: 10px;
	 	top: 10px;
	 }

	 .fa-search{
	 	position: absolute;
	 	right: 10px;
	 	top: 8px;
	 }

	 #hero .container{
        flex-direction: column;
    }

    #hero .container .hero-image{
	 	filter: blur(8px);
	 }
}

/*######################################### navbar ends  ##############################*/

@media(max-width: 680px){

	.skills-container{
		flex-direction: column;
		gap: 3rem;
	}

	.skill-data{
		display: inline-block;
		width: 100px;
	}

	#skills-section{
		height: 136vh;
/* 		margin-bottom: 300px; */
		z-index: 1;
	}

}

/*########################################## contact section ########################### */

@media (max-width: 991px)
{
	.contactUs{
		padding: 20px;
	}

	.box{
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:auto;
		grid-template-areas: "form"
				     "info"
				     "map";
	}

	.formBox .row50{
		display: flex;
		gap: 0;
		flex-direction: column;
	}

	.inputBox{
		width: 100%;
	}

	.contact{
		padding: 30px;
	}

	.map{
		min-height: 300px;
		padding: 0;
	}
}