/*title responsive*/

@media all and (max-width: 500px){

	:root {

		  --title-size:34px;

	}

}

@media only screen and (max-width: 768px){
    html,
    body{
    width:100%;
    overflow-x:hidden;
    }
}



/*header design*/

@media all and (max-width: 1000px){

	.middle{
		width: 95%;
	}

}


@media all and (max-width:910px){
	
	.header-area .logo-area img {
    width: 155px;.

	}

	 .menu ul li a{
	
	font-size: 15px;

	}


}


@media all and (max-width: 865px){

	header{
		position: relative;
		
	}

	.header-area .menu {
		display:flex;
		justify-content: center;
	}

	.header-area .menu i {
		display:block;
	}

	.menu ul {
    float: none;
    position: absolute;
	top:120%;
	left: 0px;
	background-color: #000000c4;
	width: 100%;
	z-index: 2;
	display: none;
    
    }

    .sticky-header .menu ul{
    	top: 100%;
    }


	.menu ul li {    
    display: block;
    margin:18px 0px;
	
	}

	.menu ul li a{
		color:#fff
	}

	.menu ul li a:hover {
    color: #fff;
}


	.menu ul li .active{
	color:#7FECFF;
	
}

.menu ul li a span{
	
	border-bottom: 2px solid #7FECFF;
	
	

}


.hero-section{
	
	background-image: linear-gradient(0deg, #00000087, #00000087), url(../image/hero-background-tab.png);
	
	

}




	

}


@media all and (max-width: 817px){

	.header-area .logo-area{
	width:40%;
	

}

	.header-area .menu{
	width:20%;


}

.header-area .cont-button{
	width:40%;
	margin-left: 0px;
	display:flex;
	justify-content: end;
	

}

}


@media all and (max-width: 400px){

	    .header-area .cont-button {
	    	display: none;
	    }

	    .header-area .logo-area img {
        		width: 135px;
   	 }
}

/*header responsive ene here*/


@media all and (max-width: 1065px){
	.hero-section .hero-left {
    width: 75%;
	}

	.hero-left h1 {
		font-size: 4rem;
	}

.hero-left .animation-text ul li{
	margin-top:5px;
}

	.hero-left h2, .hero-left .animation-text span {
    font-size: 35px;
	}


	@keyframes slide {
	100%{
		transform:translateY(-425%);
	}

	
}



	.hero-left p {
   
    	margin-right: 55px;

		}
}


@media all and (max-width: 829px){

	.hero-section .hero-left {
    width: 100%;
	}

	.hero-section .hero-right {
    width: 0%;
}

		.hero-left h1 {
		font-size: 3.5rem;
	}


	.hero-left h2, .hero-left .animation-text span {
    font-size: 31px;
	}

	.hero-left p {
   
    	margin-right: 200px;

		}

}


@media all and (max-width: 721px){

			.hero-left h1 {
		font-size: 3rem;
	}

	.hero-left .animation-text ul{

	height: 3rem;
	line-height: 1.9rem;

}

@keyframes slide {
	100%{
		transform:translateY(-500%);
	}


}

	.hero-left .animation-text ul li{
	margin-top:9px;
}



	.hero-left h2, .hero-left .animation-text span {
    font-size: 26px;
	}

	.hero-left p {
   
    	margin-right: 80px;

		}

}


@media all and (max-width: 688px){
	.hero-section{
			padding: 40px 0px 100px 0px;
	}

}





@media all and (max-width: 560px){

		.hero-section{
	
	background-image: linear-gradient(0deg, #00000087, #00000087), url(../image/hero-background-560px.png);
	
	

}


}




@media all and (max-width: 547px){

		.hero-left p {
   
    	margin-right: 0px;

		}

		.hero-section {
    padding: 40px 0px 115px 0px;

	}

}


@media all and (max-width: 438px){

	.hero-left h2, .hero-left .animation-text span {
    	font-size: 23px;
    	letter-spacing: -1px;


	}


	.hero-left .animation-text ul li{
	margin-top:10px;
}

@keyframes slide {
	100%{
		transform:translateY(-500%);
	}


}





}

@media all and (max-width: 425px){

		.hero-section {
        background-position: 70% 50%;

	}

		
}


@media all and (max-width: 420px){

			.hero-left h1 {
		font-size: 2.6rem;
		}
	


		
}



/*about section responsive*/

@media all and (max-width: 1306px){
	.about-me .about-right{
	
	margin-left: 20px;
		}

		.about-me .about-right img{
			
			margin-left: 20px;
			
	
		}


}


@media all and (max-width: 970px){
		
		.about-me .about-button{
			margin-top:40px;
			display: flex;
			align-items: center;
		}

		.about-me .about-left h2 {
			font-size: 23px;

				}


				.about-me .about-left a {

					margin-top:15px;

				}



}


@media all and (max-width: 782px){

		.about-me .about-left p {
   
    		line-height: 1.5rem;
    		font-size: 15px;
    	}
}




@media all and (max-width: 700px){

		.about-me .about-button {
       flex-direction: column-reverse;
        row-gap: 50px;
        padding:0px 10px;
			}

				.about-me .about-left {
					width: 100%;
				}

				.about-me .about-right{
					width: 100%;
				} 


				.about-me h5 {
    			font-size: 17px;

		}


		.about-me .about-right{
	
			margin-left: 0px;
			display: flex;
			justify-content: center;

		}

		.about-me .about-right img{
			
			margin-left: 0px;
			
	
		}


		.about-me {
			margin: 0px auto;
		}


		
}


@media all and (max-width: 500px){

		.about-me .about-top h2 {
			margin:0px;
		}

		    .about-me h5 {
		    	margin:0px;
		    }

}


/*gurantee section responsive start from here*/

@media all and (max-width: 980px){

	.guarantee-area .middle {
	    column-gap: 15px;
	}

	.guarantee-left {
   
    	margin-right: 10px;
	}

	.guarantee-right .content-img img {
    width: 100px;
	}

}

@media all and (max-width: 810px){

	.guarantee-area .middle {
    
	    flex-direction: column;
	    row-gap: 30px;
	}


	.guarantee-area{
		padding: 50px 0px
	}

}


@media all and (max-width: 500px){
	.guarantee-area{
		margin:34px auto;
	}


	.guarantee-left h2 {
		margin: 0px;
	}

}


@media all and (max-width: 450px){

	.guarantee-right .content-img img {
        width: 70px;
     }

     .guarantee-right .content-text h3 {
     		font-size: 24PX;
     }

}



@media all and (max-width: 390px){

	.guarantee-right .content-text h3{
    	font-size: 26px;

	}
		
}


/*service area responsive start*/


@media all and (max-width: 950px){

	.service-area-top {
    	margin: 0px 20px 50px 20px;
	}
		
}



@media all and (max-width: 480px){

	.service-area-top {
    	margin: 0px 10px 50px 10px;
	}
		
}

@media all and (max-width: 679px){

	.service-area-top h2 {
		font-size: 40px;
	}

}

@media all and (max-width: 466px){

	.service-area-top h2 {
		font-size: 34px;
	}


}




@media all and (max-width: 1100px){

	.service-part {
    	flex-basis: 32%;
	}
		
}


@media all and (max-width: 865px){

	.service-part {
    	flex-basis: 35%;
    	padding: 30px 30px;
	}

	.service-part img {
		width: 65px

	}

	.service-part h2 {
		font-size: 22px;
	}
		
}


@media all and (max-width: 747px){

	.service-part {
    	width: 340px;
    	padding: 25px 25px;
    	border-radius: 25% 0% 25% 0%;
	}




.service-area .middle {
    flex-direction: column;
    align-content: center;
	}


	.service-ara-top-right {
    	display: none;
	}

	.service-hide-btn a{
		
		display: block;
	}

		
}

@media all and (max-width: 500px){

	.service-area {
		margin:34px auto;
	}

	    .service-area-top {
        margin: 0px 20px 40px 20px;

     }


     .service-ara-svp{
     	margin: 60px auto 0px auto;
     }

}


@media all and (max-width: 430px){

	.service-part {
    	width: 78%;
    	margin:0px 20px;
    	
	}


	.service-part img {
    	width: 60px;

	}

	.service-part h2 {
    font-size: 23px;

	}

	.service-area .middle {
		row-gap: 28px;
	}
		





}

/*portfolio area responsive start from here*/


@media all and (max-width: 589px){
	.portfolio-area {
   	 	margin: 60px 10px 0px 10px;
   	 	padding: 0px 0px;
	}

}


@media all and (max-width: 500px){
	.portfolio {
   	 	margin-top: 30px;
   	 	
		}

}

/*responsible area start form here*/

@media all and (max-width: 1073px){
		.responsible-area h2 {
			font-size: 40px;
		}
}


@media all and (max-width: 930px){
		.responsible-area .middle {
    			column-gap: 20px;
   			}

   		.responsible-area .responsible-cont {
    		width: 70%;
		}

		.responsible-area .responsible-btn {
			width: 30%
		}

		.responsible-area a {
			 width: 80%;
		}
}


@media all and (max-width: 816px){
		
		.responsible-area .middle {
   
    	flex-direction: column;
    	row-gap: 20px;
	}


	.responsible-area .responsible-cont {
    		width: 100%;
		}

		.responsible-area .responsible-btn {
			width: 100%
		}
   		

   		.responsible-area a {
			 margin: auto;
			 display: block;
			 width: 70%;
		}
}


@media all and (max-width: 500px){
	      .responsible-area h2 {
            font-size: 35px;
        }
}


/*testimonial responsive start from here*/

@media all and (max-width:1035px){

	.testi-middle{
	
		margin:0px 25px;
	}

}


@media all and (max-width:460px){

	.testi-middle{
	
		margin:0px 15px;
	}

	.testimonial-area {
	   
	    
	    padding: 30px 0px;
	}

}


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

	.skills-area {
    	margin: 30px auto 0px auto;
	}


	.skil-title {
    	margin-bottom: 20px;
	}



}

/*skills area responsive*/



/*footer area responsive*/




@media all and (max-width: 838px){
	.footer-area .middle .link {
	  	
	    margin-left: 10px;
	}

	.footer-area {
    	margin: 155px auto 0px auto;
	}

	.footer-area .middle .get-in-touch {
    	flex-basis: 50%;
	}
}



@media all and (max-width:768px){
	.footer-area {
    	margin: 100px auto 0px auto;
	}


}


@media all and (max-width:738px){

	.footer-area .middle .get-in-touch {
    	flex-basis: 40%;
	}


}


@media all and (max-width:690px){

	.footer-area .middle {
   
	    flex-direction: column;
	    row-gap: 20px;
	}

	.footer-area .logo img {
    	width: 165px;
	}

	.footer-area {
    
    	padding: 20px 0px;
	}

	.footer-area .wave {
    
	    top: -71px;
	    height: 74px;
	    background-size: 700px 75px;

	}


	.footer-area .link ul li {

		display:inline-block;
		margin-right: 5px;
	}


	    .footer-area .middle .link {
        margin-left: 0px;
    }


}


@media all and (max-width:460px){

	    .footer-area .logo img {
        width: 135px;
    }

    .footer-area .middle h3 {
    	font-size: 18px;
    }

     .footer-area .middle {
       
        row-gap: 10px;
    }


    .to-top a {
    	font-size: 22px;
    	padding: 8px 8px;
    }

}


								




						/*about page responsive design start from here*/



@media all and (max-width:540px){

	.about-here-area {
		padding:25px 0px;
	}

	.about-here-area h3 {
		font-size: 35px;
	}


	.scroll-box-2 {

			height:65px;

	}

	.scroll-box-2 img {
    		width: 20px;
    	}

    	.scroll-box-2 span {

    		font-size: 25px;
    		margin:0px 12px;
    	}


    .scroll-box-1 {
    
	    height: 140px;
	    clip-path: polygon(0 64%, 100% 0, 100% 52%, 0 100%);
	}

	.scroll-box-2 {
		    margin: -100px auto 0px auto;
	}
}


@media all and (max-width:700px){
	
	.about-me-aboutpg{

		margin:50px auto 0px auto;
	}

}


@media all and (max-width:620px){

		.what-ido-section h2 {
			font-size: 28px;
		}


	.what-ido-section .middle {
		flex-direction:column;
	}


	.my-approach-content p {

		margin-top: -5px;
	}

	.what-ido-section {
    
    margin: 30px auto 30px auto;
	}

}



@media all and (max-width:800px){

	.vision-mission-wraper {
		flex-direction: column;
		row-gap: 30px;
	}

}


@media all and (max-width:550px){

		.vision-mission-wraper i {
			height: 24px;
			width:24px;
			font-size: 26px;

		}

		.vision-mission-wraper h4 {
				font-size: 28px;

		}

		.vision-mission-area h2{
			font-size: 38px;
		}
}


/*counter box responsive design*/

@media all and (max-width:530px){

	.counter-box h3.counter {
		font-size: 3rem;
	}

}


@media all and (max-width:479px){

	

.counter-box {
    
    
    height: 90px;
	}

	.counter-section .container {
		row-gap: 35px;
	}


	.counter-box:not(:last-child)::after {
	    content: '';
	    position: absolute;
	    left: 0;
	    top: 100%;
	    transform: translateX(50%);
	    width: 50%;
	    height: 1px;
	    background-color: rgba(255, 255, 255, 1);
	}

}


/*education section responsive start from here*/

@media all and (max-width:782px){



		.education-area .education-top h2 {

				font-size: 36px;

		}

		.education-area .education-top h3 {

			font-size: 25px;
		}

}



@media all and (max-width:1218px){
	.education-area {
		padding: 80px 50px;
	}

}


@media all and (max-width:1116px){
	
	.education-left h2, .work-right h2 {
		font-size: 32px;
	}


	.education-left i, .work-right i{
		padding: 10px;
    	font-size: 28px;
	}

	.step-title h3 {
    	font-size: 24px;
	}

}

@media all and (max-width:1041px){


	.step-year h5 {
		padding: 12px 20px;
		min-width: 100px;
	}

	.education-left {
		padding: 20px;
	}

	.work-right {
		padding:20px;
	}
}

@media all and (max-width:956px){

	.education-left h2, .work-right h2 {
        font-size: 28px;
        letter-spacing: .5px;
    }

}


@media all and (max-width:884px){

	 .education-area {
        padding: 80px 50px;
    }

    .education-body {
    	column-gap: 30px;
    	flex-direction: column;
    	row-gap: 30px;
    	align-items:center;
    }

    .education-left {
    	width: 100%
    }

    .work-right {

    		width: 100%;

    }

}


@media all and (max-width:400px){
	.step-year h5 {
        padding: 12px 15px;
        min-width: 84px;
        font-size: 16px;
    }

    .education-left i, .work-right i {
    	margin-right: 10px;
    }

    .education-left h2, .work-right h2 {
       font-size: 25px;

    }


    .work-right h2 {
       
       letter-spacing: -1px;

    }

      .education-area {
        padding: 50px 35px;
    }
}


/*FAQ section responsive design start from here*/


@media all and (max-width:430px){

	.faq-title {
		font-size: 34px;
	}

	.faq-question-btn{
		font-size: 1.1rem;
	}

 
}


								/*Service page responsive start from here*/



@media all and (max-width:1144px){
	.client-belive-wrapper{
		flex-direction: column;
		row-gap: 30px;

	}


	.belive-image-side {
		width:100%;
	}

	.belive-right-content {
		width:100%;
	}
}


@media all and (max-width:631px){

	.belive-image-side img{

		width: 100%;
	}

	.belive-right-content .belive-part{
		flex-basis: 100%;
		border-radius: 20px !important;
	}

	.belive-right-content {
		row-gap: 20px;
	}



}

@media all and (max-width:500px){

	.why-client-belive-area {
	 	margin: 50px auto 0px auto;
	}
}


								
						/*portfolio page responsive design start from here*/



@media all and (max-width:1269px){
	.portfolio-wapper .portfolio-part{

		    width: 45%;
	}

}




@media all and (max-width:660px){
	.portfolio-main-sec .portfolio-wapper{
			gap:20px;
		}

	.portfolio-wapper .portfolio-part{
		width: 48%;
	}
}


@media all and (max-width:673px){
	

	.portfolio-wapper .portfolio-part{
		width: 100%;
	}
}



						/*contact page responsive design start from here*/


@media all and (max-width:860px){

	.contact-section .middle{
		gap: 25px;
	}


}


@media all and (max-width:833px){

	.form-group-row {
		flex-wrap: wrap;
	}


}


@media all and (max-width:752px){

	.contact-section .middle{
		flex-direction:column;
	}

	.contact-section {   
    	margin: 50px auto 0px auto;
	}
}


@media all and (max-width:400px){
		.contact-section {   
    	margin: 30px auto 0px auto;
	}


	.submit-row .submit-btn{
		padding: 9px 25px;
	}
}