/*@import url('https://fonts.googleapis.com/css2?family=Tilt+Prism&family=Zeyada&display=swap');*/

*{
	margin:0px;padding:0px;
	box-sizing:border-box;
	font-family: 'Zeyada', cursive;
}

:root{
	--heading:rgb(0 10 45);
	--para:#777;
	--overlay:#3e64ff;
	--icon-bg:rgba(144,172,209,0.2);
	--para-tint:#e4e4e4;
	--white:#fff;
	--black:#212529;
	--helper:#8490aa;
	--helper-tint:#f3f4ff;
	--bg:rgb(249 249 255);
	--gradient:linear-gradient(0deg,rgb(132 144 255)0%,rgb(98 189 252)100%);
	--gradientsupport:-webkit-linear-gradient(0deg, rgb(132 144 255) 0%, rgb(98 189 252) 100%);
	--shadow:0px 0px 2px 0px rgb(132 144 255/20%);
	--shadowsupport:0px 20px 20px 0px rgb(132 144 255/30%);

}



html{
	font-size:70%;
}

h1,h2,h3,h4{
	font-family: 'Tilt Prism';
}

h1{
	font-size:3rem;
	color:var(--heading);
	}

p{
	font-size:1.7rem;
	color:var(--para);
}

a{
	text-decoration:none;
}

li{
	list-style-type:none;
}

/*===================
   HEADER SECTION
================== */


.header{
	padding:3.2rem;
	height:8rem;
	background-color:var(--bg);
	width:100%;
	position:fixed;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:space-between;

	
}


.logo{
	margin-top:-2rem;
	text-shadow:7px 7px 7px dodgerblue;
	letter-spacing:1.5rem;
}

.logo:hover{
	text-shadow:7px 7px 7px pink;
}

.navbar-list{
	display:flex;
	gap:3.0rem;
}

.navbar-link:link,.navbar-link:visited{
	font-size:1.5rem;
	display:inline-block;
	transition:color 0.3s linear;
	color:var(--black);
}
	
.navbar-link:hover,
.navbar-link:active{
	color:var(--helper);
}

.nav-bar-icon{
	display:none;
	/*border:var(--black);*/

}

.mobile-nav-icon[name="close-outline"]{
	display: none;
}

/*===============
Reusable code
============*/



.section{
	padding:7rem 0;
}

.container{
	max-width:100rem;
	margin:0 auto;
	
}

.grid{
	display:grid;
	gap:1rem;
}

.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);
}

.btn{
	background:var(--gradientsupport);
	color:var(--helper-tint);
	border:none;
	display:inline-block;
	text-transform:uppercase;
	font-size:1.8rem;
	cursor:pointer;
	transition:all 0.3s ease;
}

.btn:hover,.btn:active{
        box-shadow:var(--shadowsupport);
}

.common-heading{
	font-size:2.8rem;
	margin-bottom:6rem;
	text-transform:capitalize;
	position:relative;
}

.common-heading::before{
	content:"";
	position:absolute;
	top:110%;
	left:0;
	width:1.5rem;
	height:1.5rem;
	border-radius:50%;
	background:var(--helper);
}

.common-heading::after{
	content:"";
	position:absolute;
	top:120%;
	left:1.5rem;
	min-width:20rem;
	height:0.3rem;
	background:var(--helper);
}




/*===================
   hero section code
====================*/

.hero-main{
	background-color:var(--bg);
}

.section-hero-data{
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.hero-top{
	text-transform:uppercase;
	font-size:2.8rem;
}

.para{
	margin-top:1.5rem;
	margin-bottom:2.2rem;
	max-width:60rem;
	color:var(--helper);

}

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

/*===================
   bio section code
====================*/

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

.bio-image img{
	box-shadow:-2rem -2rem 0 0 var(--helper);
	max-width:80%;
	
}

.bio-data-stats{
	display:flex;
	padding:4.4rem 0;
	flex-direction:column;
	gap:3rem;
}

.bio-stats h3{
	margin-bottom:1rem;
}

.progress-bar{
	height:0.5rem;
	width:90%;
	background:var(--para-tint);
	border-radius:10rem;
	position:relative;
	box-shadow:var(--shadow);
}


.progress-bar::before{
	content:"";
	height:inherit;
	width:80%;
	background:var(--gradientsupport);
	position:absolute;
	top:0;
	left:0;
	border-radius:10rem;
}


.progress-bar2::before{
	
	width:90%;
	
}

.progress-bar span{
	position:absolute;
	top:1.8rem;
	width:2rem;
	height:1.5rem;
	background:var(--helper);
	color:var(--white);
	display:flex;
	justify-content:center;
	align-items:center;
	border:none;
	outline:0;

}

.progress-bar span{
	left:78%;
}

.progress-bar2 span{
	left:88%;
}

.progress-bar span::after{
	content:"";
	height:0;
	width:0;
	position:absolute;
	border:0.8rem solid var(--helper);
	border-color:transparent transparent var(--helper) transparent;
	top:-1.5rem
	
}


/*===================
   port folio section code
====================*/


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

.section-portfolio p{
	max-width:40rem;
}

.p-btns{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:3.2rem;
	margin:6.2rem 0;
	
}

.portfolio-images{
	gap:3.2rem;
	
}

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

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

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

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

.image-overlay .common-heading{
	margin:0;
	color:var(--white);
	
}

/*.p-btn:hover{
	transform:translateY(-1rem);
}*/
	
.p-btn-active{
	transform:translateY(-1rem);
}

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


/*===================
   work data section code
====================*/

.section-work-data{
	background:var(--gradientsupport);
	text-align:center;
	transition:all 0.7s linear;
	color:var(--white);
}

.counter-numbers{
	font-size:4.2rem;
	
}

.section-work-data p{
	color:var(--white);
	text-transform:capitalize;
}

/*===================
   our services section code
====================*/


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

.section-services p{
	max-width:100rem;
}

.section-services .grid{
	margin-top:5rem;
	row-gap:5rem;
}

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

.service-box:hover, .service-box:active{
	transform: translateY(-3rem);
}

.service-icon{
	width:8rem;
	height:8rem;
	background-color:var(--icon-bg);
	display:inline-block;
	border-radius:56% 44% 70% 30%/30% 54% 46% 70%;
	padding:1.4rem 1.8rem;
	position:relative;
	color: var(--heading);
	animation:water-wave 3s linear infinite;
}

.service-icon::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:90%;
	height:90%;
	border-radius:56% 44% 70% 30%/30% 54% 46% 70%;
	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:3% 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-top:3rem;
	margin-bottom:1rem;
}
/*===================
   our testimonial swiper section code
====================*/

.section-testimonial{
	margin-top:-4rem;
}



    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }


  
    .swiper-slide {
      	width: 80%;
	display:block;
	
    }

    .swiper-slide:nth-child(2n) {
      width: 60%;
    }

    .swiper-slide:nth-child(3n) {
      width: 40%;
    }

.swiper-client-msg{
	padding:1rem 2.5rem;
	background:var(--white);
	border-radius:1rem;
	text-align:left;
	box-shadow:var(--shadow);
	position:relative;

}


.swiper-client-msg::before{
	content:"";
	position:absolute;
	bottom:-10.5rem;
	left:36%;
	border:5rem solid var(--white);
	border-color:transparent;
	border-top-color:var(--helper-tint);
	
}


.swiper-client-msg p::before{
	content:"\f10d";
	position:absolute;
	top:0;
	left:1rem;
	font-size:5rem;
	color:#ced3ff;
	font-family:"Font Awesome 6 Free";
	font-weight:700;	
}

.swiper-client-msg p::after{
	content:"\f10e";
	position:absolute;
	bottom:0;
	right:5rem;
	font-size:3rem;
	color:#ced3ff;
	font-family:"Font Awesome 6 Free";
	font-weight:700;	
}

.swiper-slide img{
	margin-top:3rem;
	max-width:10rem;
	height:10rem;
		border-radius:50%;
	border:0.5rem solid var(--helper-tint);
	
	
}

.swiper-slide .client-data-details {
	margin-top:3rem;
			
}

.swiper-client-data{
	gap:-9.2rem;
}

/*===================
   FreeLancing section code
====================*/
.section-freelancing{
	background-image:url('../folio/5.jpg');
	background-repeat:no-repeat;
	background-size:100%;
	background-attachment:fixed;
	position:relative;
	transition:all 0.7s linear;
	text-align:center;
}

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

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

.section-freelancing h2{
	font-size:5.4rem;
}

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

.section-freelancing h2,.section-freelancing p{
	color:var(--white);
	margin:1.8rem;
}



/*===================
   Contact section code
====================*/

.section-contact-main{
	max-width:70rem;
	margin:0 auto;
	margin-top:9rem;
	transition:all 0.3s linear;
}

.section-contact-main form{
	display:flex;
	flex-direction:column;
	gap:3.2rem;
}



.section-contact-main .grid{
	gap:3.2rem;
}


.section-contact-main input,
.section-contact-main textarea{
	padding:1.5rem 2rem;
	border:0.1rem solid #c9c9c9;
	border-radius:5px;
	font-size:1.6rem;
	width:100%;
}

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

/*===================
   footer section code
====================*/

.footer{
	background-color:var(--heading);
	transition:all 0.7s linear;
}

.footer h3{
	color:var(--white);
	margin:3rem 0;
}

.footer p{
	color:#adadad;
	
}

.f-links ul,.f-services ul, .f-address address{
	display:flex;
	flex-direction:column;
	gap:1.8rem;
	justify-content:center;
	color:#adadad;
}

.f-links li, .f-links a,.f-services li, .f-services a{
	font-size:1.0rem;
	color:#adadad;
}

.f-links span, .f-services span{
	margin-right:1rem;
}

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

.f-social-icons{
	padding:5rem 0;
	text-align:center;
	color:#adadad;
}

.f-social-icons .icons{
	width:4rem;
	height:4rem;
	background-color:var(--icon-bg);
	display:inline-block;
	padding:1.4rem 1.8rem;
	position:relative;
	color:var(--white);
	animation:water-wave 3s linear infinite;
}

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

/*--------------
Scroll-section
---------------*/

.scrollTop-style{
	position:fixed;
	right:2%;
	bottom:5%;
	z-index:1;
}

.scroll-top{
	width:4rem;
	height:4rem;
	background:var(--helper);
	display:inline-block;
	padding:1.4rem 1.8rem;
	color:var(--heading);
	transition:all 0.7s linear;
	cursor:pointer;
	}

	/* media queries*/

	@media (max-width:980px){
		.header{
			position: relative;
		}
	

		.nav-bar-icon{
			display: block;
			border: 3px solid var(--black);
			z-index: 9999;
		}

		
		.mobile-nav-icon{
			width: 5rem;
			height: 5rem;
		}

		.navbar-list{
			width: 100%;
			height: 100vw;
			position: absolute;
			top: 0;
			left: 0;
		}
	}