/*font-family: 'Archivo Narrow', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Work Sans', sans-serif;
*/
*{
	padding:0;
	margin:0;
	box-sizing:border-box;
}

html{
	overflow-x: hidden;
}

body{
	font-size: 10px;
	font-family: 'Work Sans', sans-serif;
	overflow-x: hidden;
}

:root {
	--heading:rgba(0 10 45);
	--para:#333;
	--para-tint:#e4e4e4;
	--white:#fff;
	--black:#212529;
	--helper:#8490ff;
	--helper-tint:#f3f4ff;
	--bg:rgb(249 249 255);
	--overlay:#3e64ff;
	--icon-bg:rgba(144, 172, 209, 0.2);
	--gradient:linear-gradient(0deg, rgb(132 144 255) 0%, rgb(98 189 252) 100%);
	--gradientSupport: -webkit-linear-gradient(0deg, rgb(132 144 155) 0%, rgb(98 189 252) 100%);
	--shadow: 0px 0px 20px 0px rgb(132 144 255 / 20%);
	--shadowSupport:0 20px 20px 0 rgb(132 144 255 / 30%);
	--header-bg:#aec7e7;
}

h1,h2,h3,h4{
	font-family: 'Poppins', sans-serif;	
}

h1 {
	color:var(--heading);
	font-size: 48;
	font-weight: 600;
}
h3 {
	font-size: 16px;
	font-weight: 400;
}
p {
	color: var(--para);
	line-height: 1.6;
	font-size: 16px;
	margin-bottom:20px;
	color:#333;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

/*=============================
	Header section Start
===========================*/

.header{
	padding: 0 50px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;	
}

.header .logo img{
    width: 88px;
}

.navbar-list{
	display: flex;
	column-gap: 40px;
}

.navbar-link:link,
.navbar-link:visited {
	display:inline-block;
	font-size: 16px;
	text-decoration: none;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--black);
	transition: color 0.3s linear;
}

.navbar-link:hover,
.navbar-link:active {
	color: var(--helper);
}

.mobile-navbar-btn{
	display: none;
}

.mobile-navbar-btn .mobile-navicon-close{
	display: none;
}

/*=============================
Reusable codes section Start
===========================*/

.section{
	padding: 50px 0;
}
.grid{
	display: grid;
	grid-gap: 50px; 
}
.grid-two-column{
	grid-template-columns: repeat(2, 1fr);
}

.grid-three-column{
	grid-template-columns: repeat(3, 1fr);
}

.grid-four-column{
	grid-template-columns: repeat(4, 1fr);
}



.container{
	max-width: 1140px;
	margin: 0 auto;
}

.btn{
	display: inline-block;
	background:var(--gradientSupport);
	padding: 16px 25px;
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--helper-tint);
	border: none;
	transition: all 0.3s ease; 
}
.btn:hover,
.btn:active{
	box-shadow: var(--shadowSupport);
}

.common-heading{
	font-size: 35px;
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 45px;
	position: relative;
}

.common-heading::before{
	content: '';
	position: absolute;
	bottom: -10px;
	left: 0;
	height: 2px;
	width: 140px;
	border-radius:10px;
	background: var(--helper);
}

.common-heading::after{
	content: '';
	position: absolute;
	bottom: -14px;
    left: -1px;
	height: 10px;
	width: 10px;
	border-radius: 100%;
	background: var(--helper);
	z-index: 1;
}

/*=============================
Hero section Start
===========================*/

/*.section-hero{
	background: var(--bg);
}
*/
.section-hero{
	padding: 100px 0 50px 0;
	max-width:1300px;
	margin:auto;
}
.section-hero-data{
	display: flex;
	flex-direction: column;
	justify-content: center;

}

.hero-top-data{
	text-transform: uppercase;
	font-weight: 500;
	font-size: 16px;
	color: var(--helper);
}

.hero-img{
	width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}
.hero-heading{
	font-weight: 700;
	font-size: 35px;
	color: var(--black);
	max-width: 600px;
	text-transform: uppercase;
}
.hero-para{
	margin-top: 15px;
	margin-bottom: 50px;
	max-width: 500px;
}
.section-hero-image{
	display: flex;
    justify-content: center;
    align-items: center;
}

/*=============================
	Bio-Data section Start
===========================*/

.bio-image{
	display: flex;
	justify-content: center;
	align-items: center;
}

.bio-image img{
	width: 80%;
	box-shadow: -20px -20px 0 0 var(--helper);
	display: inline-block;
}

.bio-data-status{
	display: flex;
	flex-direction: column;
	gap:16px;
	padding: 40px 0 58px;
}

.bio-progress-bar{
	width: 90%;
	height: 5px;
	background: var(--para-tint);
	border-radius: 15px;
	box-shadow: var(--shadow);
	position: relative;
}

.bio-progress-bar::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: inherit;
	width: 80%;
	background: var(--gradientSupport);
	border-radius: 15px;
}

.bio-progress-2::before{
	width: 99%;
}

.bio-progress-3::before{
	width: 90%;
}

.bio-progress-4::before{
	width: 85%;
}

.bio-progress-5::before{
	width: 70%;
}

.bio-progress-bar span{
	position: absolute;
	top:16px;
	left:0;
	height: 20px;
	width: 40px;
	background: var(--helper);
	color: var(--white);
	display: flex;
    justify-content: center;
    align-items: center;
}

.bio-progress-bar span::before{
	content: '';
	position: absolute;
	top:-16px;
	height:0;
	width: 0;
	border: 8px solid var(--helper);
	border-color: transparent;
	border-bottom-color: var(--helper);	
}

.bio-progress-bar span{
	left:76%;
}

.bio-progress-2 span{
	left:95%;
}

.bio-progress-3 span{
	left:86%;
}

.bio-progress-4 span{
	left:81%;
}

.bio-progress-5 span{
	left:66%;
}

.bio-stat h3{
	padding-bottom: 8px;
	font-size: 14px;
}

/*=============================
	work(Portfolio) section Start
===========================*/


.section-poefolio{
	background: var(--bg);
	transition:all 0.7s linear;
}

.section-poefolio p{
	max-width: 600px;
}

.p-btns{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:32px;
	margin: 64px 0;
}

.portfolio-images{
	gap:32px;
}

.portfolio-images img{
	width: 100%;
	border-radius: 7px;
	overflow: hidden;
	position: relative;
	display: block;
}

.img-overlay{
	position: relative;
	overflow: hidden;
}

.img-overlay .overlay{
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width: 100%;
	background: var(--gradientSupport);
	opacity: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translateY(100%);
	transition: all 0.3s linear;
}

.img-overlay:hover .overlay{
	transform: translateY(0);
	opacity: 0.8;
	cursor: pointer;
}

.img-overlay .common-heading{
	color: var(--white);
	text-decoration: none;
	margin: 0;
}

.p-btn-active{
	transform: translateY(-10px);
}

.p-image-not-active{
	display:none;
}

/*=============================
	Our Counter section Start
===========================*/

.section-work-data{
	background: var(--gradientSupport);
	text-align:center;
	transition: all 0.7s linear;
	color: var(--white);
}
.counter-number{
	color: var(--white);
	font-size: 35px;
}
.section-work-data p{
	color: var(--white);
	text-transform: capitalize;	
}


/*=============================
	Our Service section Start
===========================*/

.section-services{
	transition: all 0.7s linear;
}

.section-services p{
	max-width: 600px;
}

.section-services .grid{
	margin-top: 100px;
	row-gap:100px;
}

.service-box{
	text-align: center;
	box-shadow: var(--shadow);
	border-radius: 5px;
	padding: 50px 25px;
	transition: all 0.2s linear;
}

.service-box:hover,
.service-box:active{
	transform: translateY(-20px);
}

.service-icon{
	font-size: 35px;
	background: var(--icon-bg);
	padding: 15px;
	border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;
	position: relative;
	color: var(--heading);
	animation: water-wave 3s linear infinite;
	
}
.service-icon img{
	height: 38px;
}
.service-icon::after{
	content: '';
	height: 90%;
	width:90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 44% 56% 57% 43% / 30% 41% 59% 70%;
	background-color: transparent;
	border:1px solid var(--black);
	animation: water-wave 3s linear infinite;  
}

@keyframes water-wave{
	0%{
		border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;
	}
	50%{
		border-radius: 30% 97% 15% 85% / 72% 0% 100% 28%;	
	}
	100%{
		border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;
	}
} 

.service-box h3{
	text-transform: capitalize;
	margin: 30px 0 10px;
}


/*=============================
	Testomonial section Start
===========================*/

.slider{
	margin-top: 100px;
}

.item{
	padding: 0 20px;
}

.client-msg{
	padding: 45px 53px;
	background: var(--white);
	border-radius: 10px;
	box-shadow: var(--shadow);
	text-align: left;
	position: relative;
}

.client-msg::before{
	content: '';
    position: absolute;
    bottom: -74px;
    left: 41%;
    border: 37px solid var(--helper-tint);
    border-color: transparent;
    border-bottom-color: var(--helper-tint);
    transform: rotate(180deg);
    z-index: -1;
}
.client-msg p{
	font-size: 14px;
	max-width: 450px;
}

.item img{
	max-width:80px;
	border-radius: 50%;
	border: 3px solid var(--helper-tint); 
}
.Swiper-client-data{
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
}

.comma-icon{
	position: relative;
}

.comma-icon::before{
	content: '\f10d';
    position: absolute;
    top: -47px;
    left: -42px;
    height: 50px;
    width: 50px;
    color: var(--helper-tint);
    font-size: 37px;
    font-family: 'FontAwesome';
}

.comma-icon::after{
	content: '\f10e';
    position: absolute;
    bottom: -40px;
    right: -51px;
    height: 50px;
    width: 50px;
    color: var(--helper-tint);
    font-size: 37px;
    font-family: 'FontAwesome';
}

.slick-dots{
	text-align: center;
}
.slick-dots li{
	display: inline-block;
	margin: 20px 3px 0;
}
.slick-dots li button{
	border: none;
    border-radius: 50%;
    position: relative;
    width: 8px;
    height: 8px;
    display: inline-block;
    text-indent: -99999px;
    overflow: hidden;
    background: rgb(0 0 0 / 0.2);
}

.slick-dots li button::before{
	content:'';
	position: absolute;
	top:0;
	right:0;
	height: 100%;
	width: 100%; 
}

.slick-dots li button:hover::before{
	/*background: rgb(5 5 247 / 0.8);*/
	background: var(--gradient);
}


/*=============================
	Freelacing section Start
===========================*/

.section-freelancing{
	background: url('../img/background-img.jpg') no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	text-align: center;
	position: relative;
}

.section-freelancing .overlay{
	position: absolute;
	top:0;
	left:0;
	height: 100%;
	width: 100%;
	background: var(--overlay);
	opacity: 0.5;

}

.section-freelancing .container{
	position: relative;
}

.section-freelancing h2{
	font-size: 40px;
	font-weight: 600;
	
}

.section-freelancing h2,
.section-freelancing p{
	color: var(--white);
	margin-bottom:20px; 
}

.section-freelancing span{
	color: #a0f669;
}

/*=============================
	Contact section Start
===========================*/

.section-contact-main{
	max-width:700px;
	margin: 0 auto; 
	margin-top: 90px;
	padding: 0 15px;
}

.section-contact-main .grid{
	gap:30px;
}
.section-contact-main form{
	display: flex;
	flex-direction: column;
	gap:32px;
}

.section-contact-main input, .section-contact-main textarea{
	padding: 15px 8px;
	border: 1px solid #c9c9c9;
	border-radius: 5px;
	font-family: 'Work Sans';
	width: 100%; 
}

.section-contact-main input, .section-contact-main textarea:focus{
	outline: none;
}

.section-contact-main input[type="submit"]{
	max-width: 30%;
	border:none;
}

/*=============================
	Footer section Start
===========================*/

.section-footer{
	background: var(--heading);
	transition: all 0.7s linear;
/*	position: relative;
*/}

.section-footer h3{
	color: var(--white);
	margin-bottom: 30px;
}

.f-about p{
	color: #adadad;
}

.f-link ul, .f-services ul, .f-address address{
	display: flex;
	flex-direction: column;
	gap:20px;
}

.f-link ul, .f-services ul{
	font-size: 16px;
}

.f-link li,
.f-link a, 	 	
.f-services li,
.f-services a{
	color: #adadad;
	text-transform: capitalize;
}

.f-address a, p{
	color: #333;
	font-style:normal;
}

.f-social a i{
	color: var(--white);
	background: var(--icon-bg);
	padding: 14px 18px;
	animation: water-wave 3s linear infinite;
}

.f-social ul{
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 10px;
	font-size: 30px;
	color: #adadad;
}

.f-social{
	margin: 40px 0 30px;
}

.f-credits p{
	color: #adadad;
	text-align: center;
}

.section-footer a{
	cursor: pointer;
}
.section-footer a:hover,
.section-footer a:active{
	color: var(--white)
}


/*=============================
	Scroll Top section Start
===========================*/


.scroll-style{
	position: fixed;
    bottom: 50px;
    right: 50px;
    height: 50px;
    width: 50px;
    /*background: var(--helper);
    padding: 15px 15px;
    text-align: center;
    animation: water-wave 3s linear infinite;*/
    z-index: 100; 
}

.scroll-top{
	font-size: 20px;
	background: var(--helper);
	padding: 20px 20px;
	color: var(--heading);
	animation: water-wave 3s linear infinite;
	cursor:pointer;
}
	/*======================
		Change CSS
	======================*/
.service-box ul li, h3{
	text-align: left;

}
.service-box h3{
	    font-size: 20px;
}
.service-box ul li{
	font-size: 16px;
	padding-bottom: 8px;
	padding-left: 20px;
	color:#333;
	position: relative;
}
.service-box ul li:last-child{
	padding-bottom: 0;
}
.service-box ul li::before{
	content:'';
	position: absolute;
	top:6px;
	left:0;
	height: 8px;
	width: 8px;
	border-radius: 50%;
	background: #adadad;

}
.footer-text{
	display: flex;
	justify-content: center;
}
.f-address .text-color{
	color: #fff;
}
.ft-logo img{
	width: 100px;
	display:inline-block;
	margin-bottom: 20px;
	text-align: center;
}
.bg-color{
	background: var(--bg);
}
.f-address{
	text-align: center;
}
.active-header{
	padding: 0 50px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    position: fixed;
    top: 0;
    width: 100%;
    transition: 0.5s ease-in-out;
    box-shadow: 0 0px 30px rgb(0 0 0 / 20%);
    z-index: 9999;
}
.section-testimonials .grid{
	grid-gap: 30px;
}
.grid-five-column{
	grid-template-columns: repeat(5, 1fr);
}
.section-testimonials .service-box{
	padding: 15px;
	position: relative;
    height: 200px;
}
.section-testimonials .service-box img{
	width: 80%;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.section-testimonials .service-box:hover{
	transform: translateY(0);
}

.section-hero .slider{
	margin-top:0;
}
.section-hero .slider .items img{
	width:100%;
	object-fit: cover;
	height:360px;
}

.f-address a{color:#fff}

.contact-section {
    display: flex;
    flex-wrap: wrap;
}
.span-col-1, .span-col-2{width:50%}
.span-col-2 input, .span-col-2 textarea{width: 100%;padding:0 10px;height: 40px;border:1px solid #ccc;border-radius:5px;font-size:16px;}
.span-col-2 div{padding-bottom: 20px}
.span-col-2 textarea{height:100px;padding:10px}
.span-col-2 input[type="submit"]{width:200px;cursor: pointer}
.copy{font-size:14px;color:#fff;text-align: center}
.span-col-1 p a{color:#333}
.f-address p{margin-bottom:0}
/*.scroll-top::before{
	content: '\f062';
    position: absolute;
    top: -7px;
    left: -6px;
    height: 100%;
    width: 100% color:var(--white);
    font-size: 16px;

}*/

/*=============================
	Media Query section start
===============================*/

@media (max-width: 1200px){
	.container{
		padding: 0 30px;
    	max-width: 1050px;
	}

	.grid {
	    display: grid;
	    grid-gap: 15px;
	}
}


@media (max-width: 980px){
	.section-testimonials .grid-five-column{
		grid-template-columns: repeat(3, 1fr);
	} 
	p{
		font-size: 14px;	
	}
	.header{
		
		padding: 0 15px;
	}
	.header-padding{
		padding: 0 15px;
	}

	.mobile-navbar-btn{
		display: block;
		z-index: 9999;
		border:1px solid var(--black);
		color: var(--black);
	}

	.mobile-navicon{
		font-size: 20px;
		color: var(--black);
		padding: 5px 10px;
	}

	.header .logo{
		width: 40%;
	}
	.navbar{
		width: 87%;
		height: 100vh;
		position: absolute;
		top:0;
		right:0;
		background: var(--gradient);
		display: flex;
		justify-content: center;
		align-items: center;
		transform: translateX(100%);
		transition: all 0.5s linear;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		z-index: 9999;
	}

	.navbar-list{
		flex-direction: column;
		gap:20px;
		align-items: center;
		color: var(--white);
	}

	.navbar-list .navbar-link{
		font-size: 20px;
		/*color: 212529;*/
		color: var(--white);
	}

	.active .navbar{ 
		transform: translateX(0);
		opacity:1;
		visibility:visible;
		pointer-events: auto;
	}

	.active .mobile-navbar-btn .mobile-navicon-close{
		display: block;
	}

	.active .mobile-navbar-btn .mobile-navicon{
		display: none;
	}

	.mobile-navbar-btn .mobile-navicon-close{
		font-size: 30px;
		color: var(--black);
		padding: 5px 10px; 
	}



	/*======================
		Section Hero
	======================*/

	.hero-heading {
    	font-size: 28px;
	}

	.hero-top-data {
    	font-size: 13px;
	}

	.hero-para {
	    font-size: 14px;
	}
	
/*===========================
		Bio-Data Section start
=============================*/
	.section-services .grid-three-column {
    	grid-template-columns: repeat(2, 1fr);
	}
	.section-services .grid{
		grid-gap: 50px;
	} 

/*===========================
		footer Section start
=============================*/
	
	.section-footer .grid-four-column{
		grid-template-columns: repeat(4, 1fr);
		gap:50px;
	}

	/*===========================
		service Section start
=============================*/
	
	.portfolio-images{
    	gap:30px;
	}

	.portfolio-images img {
    	height: 100%;
	}
}

@media (max-width: 890px){

	/*======================
		Section Hero
	======================*/

	.section-hero .grid-two-column{
		grid-template-columns: 1fr;
	} 

	.section-hero .section-hero-data{
		align-items: center;
	}
	.section-hero-data .hero-para{
		text-align: center;
	}

	.section-hero .grid {
    	grid-gap: 50px;
	}

	/*======================
		Bio-data Section
	======================*/

	.section-biodata .grid-two-column{
		grid-template-columns: 1fr;
	}

	.section-biodata .bio-image{
		grid-row: 2;
		margin-top: 60px;
		
	}

	.bio-image img {
		width: 50%;
	}

	/*======================
		portfolio Section
	======================*/

	.section-poefolio .grid-three-column{
		grid-template-columns:1fr 1fr;
	} 

	/*.section-poefolio .grid{
		gap:30px;
	}*/

/*	.portfolio-images img{
		width: 100%;
	}*/

/*	.img-overlay .overlay{
		width:95%;
	}*/

	/*======================
		Work Section
	======================*/

	.section-work-data .grid-four-column{
		grid-template-columns: repeat(4, 1fr);
	}

	.section-work-data .grid{
		gap:47px;
	}

	/*======================

		Contact Section
	======================*/

/*	.section-contact .grid-two-column{
		grid-template-columns: 1fr;
	}
	.section-contact .section-contact-main{
		max-width: 600px;
	}*/

/*===========================
		footer Section start
=============================*/
	
	.section-footer .grid-four-column{
		grid-template-columns: repeat(2, 1fr);
		gap:50px;
	}

	/*======================
		Freelancing Section
	======================*/

	.section-freelancing{
		background-size: cover;
	}

}

@media (max-width: 720px){


	/*======================
		Section Header
	======================*/

/*	.navbar{
		width: 88%;
	}*/

	/*======================
		Contact Section
	======================*/

	.section-contact .grid-two-column{
		grid-template-columns: 1fr;
	}
	.section-contact .section-contact-main{
		max-width: 600px;
	}

	.section-contact-main {
    	margin-top: 50px;
	}

	/*======================
		Freelancing Section
	======================*/

/*	.section-freelancing{
		background-size: cover;
	}*/

	/*======================
		Freelancing Section
	======================*/

	.section{
		padding: 50px 0;
	}

	/*======================
		Work Section
	======================*/

/*	.section-work-data .grid-four-column{
		grid-template-columns: repeat(4, 1fr);
	}*/

	.counter-number{
		font-size: 30px;
	}

	.section-work-data .grid{
		gap:35px;
	}

	/*======================
		portfolio Section
	======================*/

	.section-poefolio .grid-three-column{
		grid-template-columns:1fr;
	} 

	.portfolio-images img{
		margin-bottom: 20px;
	}

	/*======================
		Service Section
	======================*/
	.section-services .grid {
    	margin-top: 50px;
	}

	/*======================
		Slider Section
	======================*/

	.slider {
    	margin-top: 60px;
	}

	/*======================
		Footer Section
	======================*/

	.section-footer .grid{
		gap:50px;
	}
	.span-col-1, .span-col-2{
		width: 100%;
	}
	
}

@media (max-width: 560px){

/*<========================
		Slider (Clients) Section
	====================== */
	.section-testimonials .grid-five-column{
		grid-template-columns: repeat(2, 1fr);
	}



	/*======================
		Contact Section
	======================*/

	.section-contact .grid-two-column{
		grid-template-columns: 1fr;
	}
	.section-contact .section-contact-main{
		max-width: 480px;
	}

	/*======================
		Work Section
	======================*/

	.section-work-data .grid-four-column{
		grid-template-columns: 1fr 1fr;
	}

	.counter-number{
		font-size: 30px;
	}

	.section-work-data .grid{
		gap:15px;
	}

	/*======================
		Footer Section
	======================*/

	.section-footer .f-about,
	.section-footer .f-address{
		grid-column: 1/-1;
	}

	.section-footer .grid{
		gap:30px;
	}

}

@media (max-width: 490px){

/*<========================
		Slider (Clients) Section
	====================== */
	.section-testimonials .grid-five-column{
		grid-template-columns: repeat(1, 1fr);
	}

	
	/*======================
		Contact Section
	======================*/

	.section-contact .grid-two-column{
		grid-template-columns: 1fr;
	}
	.section-contact .section-contact-main{
		max-width: 400px;
	}
	.section-contact-main input[type="submit"] {
    	max-width: 40%;
	}

	/*======================
		Services Section
	======================*/

	.section-services .grid-three-column{
		grid-template-columns: 1fr;
		gap:60px;
	}

	.section-services .grid{
		gap:60px;
	}


	/*======================
		Reusable Section
	======================*/

	.common-heading{
		font-size: 35px;
	}

}

@media (max-width: 460px){

	/*======================
		Section Header
	======================*/

/*	.navbar{
		width: 82%;
	}*/


	/*======================
		Contact Section
	======================*/

	.section-contact .grid-two-column{
		grid-template-columns: 1fr;
	}
	.section-contact .section-contact-main{
		max-width: 400px;
	}

	.section-contact-main input[type="submit"] {
    	max-width: 40%;
	}

	/*======================
		Porfolio Section
	======================*/

	.p-btns {
    	gap: 20px;
	}

	/*======================
		Services Section
	======================*/

	.section-services .grid-three-column{
		grid-template-columns: 1fr;
		gap:60px;
	}

	.section-services .grid{
		gap:60px;
	}	
	/*======================
		Reusable Section
	======================*/

	.counter-number{
		font-size: 28px;
	}

	/*======================
		Footer Section
	======================*/

	.section-footer .grid-four-column{
		grid-template-columns: 1fr;
		
	}

	.section-footer .grid{
		gap:45px;
	}

	/*======================
		Hero Section
	======================*/
	
	.hero-heading{
		font-size:23px;
	    font-weight: 700; 
	}

	/*======================
		Reusable Section
	======================*/

	.common-heading{
		font-size: 23px;
	}

	/*======================
		Freelancing Section
	======================*/

	.section-freelancing h2 {
    	font-size: 35px;
	}
}

@media (max-width: 415px){

	/*======================
		Section Header
	======================*/

/*	.navbar{
		width: 80%;
	}*/

	/*======================
		Hero Section
	======================*/

	.hero-heading{
		font-size: 20px;		
	}

	/*======================
		Porfolio Section
	======================*/

	.section-poefolio .btn {
    	padding: 16px 18px;
	}

	/*======================
		Freelancing Section
	======================*/

	.section-freelancing h2 {
    	font-size: 32px;
	}

	/*======================
		Freelancing Section
	======================*/

	.section-contact .section-contact-main {
	    max-width: 375px;
	}

	/*======================
		Porfolio Section
	======================*/

	.section-poefolio .p-btn {
    	padding: 16px 14px;
	}
}

@media (max-width: 390px){
	
	/*======================
		Section Header
	======================*/

	.navbar{
		width: 78%;
	}

	/*======================
		Hero Section
	======================*/

	.hero-heading {
    	font-size: 18px;
	}
	.common-heading{
		font-size: 18px;
	}
}