@font-face{
	font-family:poppin-regular;
	src:url(../font/Poppins/Poppins-Regular.ttf);
}

@font-face{
	font-family:poppins-medium;
	src:url(../font/poppins/Poppins-Medium.ttf);
}

@font-face{
	font-family: poppins-bold;
	src:url(../font/poppins/Poppins-Bold.ttf);
}

@font-face{
	font-family: acme ;
	src:url(../font/Acme/Acme-Regular.ttf);
}

@font-face{
	font-family: playfaire-regular ;
	src:url(../font/Playfair_Display/PlayfairDisplay-Regular.ttf);
}

@font-face{
	font-family: playfaire-semibold ;
	src:url(../font/Playfair_Display/PlayfairDisplay-SemiBold.ttf);
}



body, html{
	margin:0px;
	padding: 0px;
}

h2{
	font-weight: 500;
}

h1, h2, h3, h4, h5{
	margin:8px 0px;
}


:root {
  --primary: #b6392d;
  --title-clr: #b6392d;
  --hover-clr:#2B798D;
  --second: #23273C;
   --button-clr: #FB5B5B;
   --title-size:45px;
   --title-font:acme;
}

.middle{
	width: 90%;
	margin:auto;
}

.header-main{
	margin:10px auto;
	max-width: 1600px;
}

.header-area{
	display:flex;
	justify-content:space-between;
	align-items: center;
	


}

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

}

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


}

.header-area .cont-button{
	width:15%;
	margin-left: 50px;
	

}






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

 .menu i{
 	font-size: 20px;
    background-color: #0a0a0a21;
    padding: 10px;
    color: #000;
    display: none;
 }



 .menu ul {
	float: right;
	margin:0;
	padding: 0;

}

 .menu ul li{
	list-style: none;
	display: inline-block;


}

 .menu ul li a{
	padding: 10px 15px;
	text-decoration:none;
	font-family: poppin-regular;
	color:#000;
	padding:8px 15px;
	transition: .5s;
	position: relative;
	font-size: 16px;

}

.menu ul li a:hover{
	color:var(--primary);
	
}

.menu ul li .active{
	color:var(--primary);
	
}



.menu ul li a span{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	border-bottom: 2px solid var(--primary);
	border-radius:15px;
	transform: scale(0) translateY(50px);
	transition: .5s;
	opacity: 0;
	

}





.menu ul li a:hover span{
	transform: scale(1) translateY(0);
	opacity: 1;
}

.menu ul li .active span{
	transform: scale(1) translateY(0);
	opacity: 1;
}

.cont-button a{
	text-decoration: none;
	font-size:16px;
	font-family: poppin-regular;
	background-color:var(--primary);
	color:#fff;
	padding:8px 24px;
	text-transform: uppercase;
	border-radius: 25px;
	transition: .3s;
	

}

.cont-button a:hover{
	background-color: #2B798D;
}



/*.cont-button a:before{
	content: '';
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #2B798D;
	z-index: -2;
	border-radius: 25px;
	overflow: hidden;

}*/

/*.cont-button a:after{
	content: '';
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #ff3473;
	z-index: -1;
	border-radius: 25px;
	transition: transform 0.5s;
	transform-origin: right;
	transform: scaleX(0);
	overflow: hidden;

}
*/

/*.cont-button a:hover:after{
	background-color: #ff3473;
	transition: transform 0.5s;
	transform-origin: left;
	transform: scaleY(1);
	border-radius: 25px;
	
}
*/


/*sticky header design here*/

.sticky-header{

	background-color: rgba(0,0,0,.5);
	position:fixed;
	width:100%;
	top:0px;
	z-index: 2;
	margin: 0px;
	transition: .3s all ease-in-out;

}



.sticky-header .logo-area img{
	filter: brightness(0) invert(1);
	width: 165px;
}


.sticky-header .menu ul li a {
	color: #ffff;
}

.sticky-header .menu ul li .active {
	color: #7fecff;
}

.sticky-header  .menu ul li a span{
	border-bottom: 2px solid #7fecff;
}

.sticky-header .menu i{
	color: #fff;
}



/*header-area design end here*/

.hero-section{
	padding:80px 0px 100px 0px;
	margin:0px auto;
	background-image: linear-gradient(0deg, #00000087, #00000087), url(../image/hero-background.png);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
	max-width: 1600px;
	

}

.hero-section .middle{

	display:flex;
}

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

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

.hero-left h1{
	color: #7fecff;
	font-size:4.8rem;
	margin:10px 0px;
}


.hero-left h3{
	color: #fff;
	font-size:28px;
	margin:10px 0px;
	font-family: poppin-regular;
	font-weight: 400;
}

.hero-left .animation-text{
	display:flex;
	align-items: flex-end;
	
}

.hero-left .animation-text ul{
	list-style: none;
	height: 3.8rem;
	line-height: 2.8rem;
	overflow: hidden;
	margin:0px;
	padding: 0px;
	display:flex;
	flex-flow: column nowrap;
	align-items: flex-start;
}


.hero-left .animation-text ul li{
	animation: slide calc(4*3*2s) steps(4) infinite;
	
}

.hero-left .animation-text span{
	position: relative;
	white-space: nowrap;
	font-size: 40px;
	font-family: poppin-regular;
	border-right: 2px solid #7fecff;
	animation: cursor .8s step-end infinite,
				typing 3s steps(19) infinite alternate ;
	width: 100%;
	display: inline-block;
	overflow: hidden;
	color:#ff3473;
	margin-left: 5px;

}

@keyframes cursor {
	50%{
		border-color: transparent;
	}
}



@keyframes typing {
	0%, 10%{
		width: 0%
	}

	70%, 100%{
		width: 101%;
	}
}

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

	
}





.hero-left h2{
	font-size: 40px;
	margin:10px 0px;
	color:#fff;
	font-family: poppin-regular;
}

.hero-left p{
	color:#fff;
	font-size: 16px;
	font-family: poppin-regular;

}


.hero-left a{
	text-decoration: none;
	font-size:16px;
	font-family: poppins;
	color:#fff;
	padding:13px 22px;
	text-transform: uppercase;
	border-radius: 5px;
	margin-top: 10px;
	display:inline-block;
	position:relative;
	
}

.hero-left a:before{
	content: '';
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #ff3473;
	z-index: -1;
	border-radius: 5px;


	
	

}

.hero-left  a:after{
	content: '';
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #2B798D;
	z-index: -1;
	transition: transform 0.5s;
	transform-origin: right;
	transform: scaleX(0);
	border-radius: 5px;
	

}


.hero-left a:hover:after{
	background-color: #2B798D;
	transition: transform 0.5s;
	transform-origin: left;
	transform: scaleY(1);

	
	
}



/*hero section wave design*/

.hero-section .wave {
	position: absolute;
	bottom:0;
	left: 0;
	width: 100%;
	height: 80px;
	background-size: 1000px 100px;

}

.hero-section .wave1{
	animation: animate 30s linear infinite;
	z-index: 1000;
	opacity: 1;
	animation-delay: 0s;
	bottom:0;

}

.hero-section .wave2{
	animation: animate2 15s linear infinite;
	z-index: 999;
	opacity: .5;
	animation-delay: -5s;
	bottom:10px;

}


.hero-section .wave3{
	animation: animate3 30s linear infinite;
	z-index: 998;
	opacity: .2;
	animation-delay: 0s;
	bottom:15px;

}



/*@keyframes animate{
	0%{
		background-position-x:0;
	}

	100%{
		background-position-x:1000px;
	}
}*/

@keyframes animate2{
	0%{
		background-position-x:0;
	}
	50%{
		background-position-x:500px;
	}

	100%{
		background-position-x:1000px;
	}
}


@keyframes animate3{
	0%{
		background-position-x:0;
	}

	50%{
		background-position-x:500px;
	}


	100%{
		background-position-x:1000px;
	}
}

/*about section design start from here*/

.about-me{
	margin:50px auto;
	max-width: 1600px;
}

.about-me .about-top h2{
	text-align: center;
	font-size: var(--title-size);
	color:var( --title-clr);
	font-family:var(--title-font);
	margin:5px 0px;




}

.about-me h5{
	font-size:18px;
	text-align: center;
	font-family: poppin-regular;
	font-weight: 400;
	margin:5px 0px;
}

.about-me .about-top hr{
	width:150px;
	border: 1px solid var(--primary);

}

.about-me .about-button{
	margin-top:80px;
	display: flex;
	align-items: center;
}


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




.about-me .about-left h2{
	font-size: 31px;
	color: #002d5b;
}

.about-me .about-left p{
	font-family: poppin-regular;
	font-weight: 400;
	text-align: justify;
	line-height: 1.8rem
	
}


.about-me .about-left a{
	text-decoration: none;
	font-size:16px;
	font-family: poppins;
	color:#fff;
	padding:10px 22px;
	text-transform: uppercase;
	border-radius: 5px;
	margin-top:30px;
	display:inline-block;
	position: relative;
}




						/*button hover effect design*/

.btn-hover-effect:before{
	content: '';
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color:var(--primary);
	z-index: -1;
	border-radius: 5px;


	
	

}

.btn-hover-effect:after{
	content: '';
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #2B798D;
	z-index: -1;
	transition: transform 0.5s;
	transform-origin: right;
	transform: scaleX(0);
	border-radius: 5px;
	

}


.btn-hover-effect:hover:after{
	background-color: #2B798D;
	transition: transform 0.5s;
	transform-origin: left;
	transform: scaleY(1);

	
	
}


									/*button hover effect design end*/



.about-me .about-right{
	width: 40%;
	overflow: hidden;
	margin-left: 50px;
}

.about-me .about-right img{
	width:90%;
	margin-left: 50px;
	border-radius: 20px;
	
}

/*
about section design end here*/

/*guarantee area start from here*/

.guarantee-area{
	margin:70px auto;
	background-image: linear-gradient(0deg, #000000ba, #000000ba), url(../image/grrantee-bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	padding:80px 0px;
	max-width: 1600px;

}

.guarantee-left h2{
	text-align: left;
    font-size: var(--title-size);
    color: #FFC576;
    font-family: var(--title-font);
    margin: 15px 0px;

}

.guarantee-left hr{
	width: 120px;
    border: 1px solid #FFC576;
    text-align: left;
    display: inline-block;
}


.guarantee-left p{
	font-size: 16px;
    font-family: poppin-regular;
    color:#fff;


}

.guarantee-area .middle{
	display:flex;
	column-gap: 30px;

}

.guarantee-left{
	flex-basis: 50%;
	margin-right: 30px;
}


.guarantee-right{
	flex-basis: 50%;
	
}

.guarantee-right .content{
	display: flex;
	column-gap: 20px;
}


.guarantee-right .content:nth-child(2){
	margin-top:30px;
}


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

.guarantee-right .content-text h3{
	 font-size: 30px;
	 font-family: poppin-regular;
	 color:#FFA5A5;
	 margin:0px;
}

.guarantee-right .content-text p{
	 font-size: 16px;
	 font-family: poppin-regular;
	 margin:0px;
	 color:#fff;
}




/*service area design start from here*/
.service-area {

	margin:70px auto 0px auto;
	max-width: 1600px;
}

.service-area-top {
	margin: 0px 130px 80px 130px;
	
}

.home-page-service-top{
	display:flex;
	align-items: center;
	flex-wrap: wrap;
}

.service-ara-top-left{
	flex:3;
}

.service-ara-top-right{
	flex:1;
}

.service-area-top h2{
	text-align: left;
	font-size:var(--title-size);
	color:var(--title-clr);
	font-family: var(--title-font);
	margin:10px 0px;
}

.service-area-top hr{
	width:200px;
	border: 1px solid var(--primary);
	text-align: left;
	display: inline-block;
}

.service-area-top p{
	font-size:16px;
	text-align: left;
	font-family: poppin-regular;
	font-weight: 400;
}


.service-ara-top-right a {
    text-decoration: none;
    font-size: 16px;
    font-family: poppins;
    color: #fff;
    padding: 10px 22px;
    text-transform: uppercase;
    border-radius: 5px;
    margin: 30px auto;
    display: block;
    width: 100px;
    text-align: center;
    position: relative;

}

.service-ara-top-right a:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    z-index: -1;
    border-radius: 5px;
}

.service-ara-top-right a:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #2B798D;
    z-index: -1;
    transition: transform 0.5s;
    transform-origin: right;
    transform: scaleX(0);
    border-radius: 5px;
}

.service-ara-top-right a:hover:after {
    background-color: #2B798D;
    transition: transform 0.5s;
    transform-origin: left;
    transform: scaleY(1);
}


.service-part img{
	width: 80px;
	filter: brightness(100%) contrast(200%) saturate(88%) blur(0px) hue-rotate(98deg);
}



.service-area .middle{
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
	row-gap: 50px;
	justify-content:space-around;
}

.service-part{
	box-shadow: 0px 5px 40px -8px rgba(86, 104, 146, 0.33);
	flex-basis: 25%;
	border-radius: 33% 0% 33% 0%;
	padding:40px 40px;
	min-width: 280px;
}


.service-part h2{
	
		font-size:26px;
		color:#2C3E50;
		font-family: poppins-medium;
		margin:0px 0px;
		line-height: 1.8rem;

}



.service-part p{
		margin:5px 0px;
		font-size:15px;
		font-family: poppin-regular;

}

	.service-hide-btn a{
		text-decoration: none;
	    font-size: 16px;
	    font-family: poppins;
	    color: #fff;
	    padding: 10px 22px;
	    text-transform: uppercase;
	    border-radius: 5px;
	    margin: 30px auto;
	    display: none;
	    width: 100px;
	    text-align: center;
	    background-color: var(--primary);
  
}

/*service area design end here*/

/*portfolio desing start from here*/

.portfolio-area{
	margin:80px auto 0px auto;
	max-width: 1600px;
	padding: 0px 20px;
}


.portfolio-title h2{
	text-align: center;
    font-size: var(--title-size);
    color: var(--title-clr);
    font-family: var(--title-font);
    margin: 10px 0px;
}

.portfolio-title hr{
	width: 155px;
    border: 1px solid var(--primary);
}

.portfolio {
	position: relative;
	margin-top:50px;
}

.portfolio .owl-nav{
	position:absolute;
	top:41%;
	width: 100%;
	font-size: 28px;
	color:#fff;
}



.portfolio .owl-nav i{
	background-color: rgba(0, 0, 0, 0.5);
	width:20px;
	height: 20px;
	padding: 8px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}


.portfolio .owl-nav .owl-prev{
	position:absolute;
	left: 0px;
	padding:10px;

}

  .owl-theme .owl-nav [class*=owl-]:hover {
    background: rgba(0, 0, 0, 0) !important;
    
}

.portfolio .owl-nav .owl-next{
	position:absolute;
	right: 0px;
}

.portfolio .item .hvr-drkimg{
	border-radius: 5px 5px 0px 0px;
	height: 280px;
	transition:  .5s;

}

.portfolio .item{
	position: relative;

}

.portfolio .item .selv-btn-hp{
	position: absolute; 
    top:42%;
    left: 38%;
    padding: 10px 40px;
    border-radius: 20px; 
	background: rgb(0 0 0 / 47%);
 	border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity .5s ease, transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;

   
}

 .portfolio .item:hover {

 }

 .portfolio .item:hover .hvr-drkimg{
	
	filter: brightness(0.5);
	
}

.portfolio .item:hover .selv-btn-hp{
	opacity: 1;
	
}





.portfolio .item a:nth-child(3){
	text-decoration: none;
	text-align: center;
	font-family: poppin-regular;
	display: block;
	

}


.portfolio .item h3{

	background-color: #00324B;
	margin: 0px;
	padding: 12px 0px;
	border-radius: 0px 0px 5px 5px;
	color: #fff;
	font-size: 16px;

}

.portfolio .item h3:hover{
	color:#FFC576;
}


.portfolio-area .see-more a{
	text-decoration: none;
    font-size: 16px;
    font-family: poppins;
   	color: #fff;
    padding: 10px 22px;
    text-transform: uppercase;
    border-radius: 5px;
    margin: 30px auto;
    display: block;
    width: 100px;
    text-align: center;
    position: relative;
    
}

	

/* portfolio design end here */



/*responsible section design start from here*/

.responsible-area{
	margin:80px auto 0px auto;
	background-color:#FCF1F1;
	padding:30px 0px;
	z-index: 1;
	max-width: 1600px;
}

.responsible-area .middle{
	display: flex;
	align-items:center;
	column-gap: 50px;
}

.responsible-area  .responsible-cont{
	width:65%;


}

.responsible-area  .responsible-btn{
	width:35%;
	overflow: hidden;
	
	
}

.responsible-area h2{
	text-align: left;
    font-size: 45px;
    color: var(--title-clr);
    font-family: var(--title-font);
    margin: 10px 0px;
}

.responsible-area p{
	font-family: poppin-regular;
}


.responsible-area a {
    text-decoration: none;
    font-size: 16px;
    font-family: poppin-regular;
   	color: #fff;
    padding: 12px 22px;
    text-transform: uppercase;
    border-radius: 5px;
 	display: inline-block;
 	letter-spacing:2px;
 	width:85%;
 	text-align: center;
 	position: relative;
 	z-index: 2;

}

.responsible-area a:before{
	content: '';
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color:var(--primary);
	z-index: -1;
	border-radius: 5px;


	
	

}

.responsible-area a:after{
	content: '';
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #2B798D;
	z-index: -1;
	transition: transform 0.5s;
	transform-origin: right;
	transform: scaleX(0);
	border-radius: 5px;
	

}


.responsible-area a:hover:after{
	background-color: #2B798D;
	transition: transform 0.5s;
	transform-origin: left;
	transform: scaleY(1);

	
	
}


/*responsible-area design end here*/

.testimonial-area{
	margin:70px auto 0px auto;
	background-color: #23273C;
	padding:50px 0px;
	max-width: 1600px;

}

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

.testimonial-area .testimonial-title h4{
	color:#FFC576;
	font-family: poppin-regular;
	font-size: 16px;
	letter-spacing:1.8px;
	margin:10px 0px;
}


.testimonial-area .testimonial-title h2{
	font-size: 38px;
    color: #fff;
    font-family: var(--title-font);
    margin: 10px 0px;

}


.testimonial-area .testimonial{
	margin-top:50px;
} 

.testimonial .testi-top{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.testimonial .testi-top .img-left{
	display:flex;
	align-items:center;
}

.testimonial .testi-top .img-left .client-name{
	margin-left:18px;

}

.testimonial .testi-top .img-left .client-name h3{
	margin:5px 0px;
	font-family: poppin-regular;
	font-size:16px;
	color:#fff;
}


.testimonial .testi-top .img-left .client-name h4{
	margin:5px 0px;
	font-family: poppin-regular;
	font-size:16px;
	color:#FFC576;
	font-weight: 400;
}




.testimonial .img-left .client-img img{
	width:60px;
	height: 60px;
	border-radius: 50%;
}

.testimonial .item {
	border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #FFC576;
    padding: 30px;
    margin:0px 10px;
    border-radius:5px;

}

.testimonial .review{
	margin-top:20px;
	
}

.testimonial .review i{
	
	color:#FFC576;
	font-size: 12px;
}




.testimonial .item p{
	color:#fff;
	font-family: poppin-regular;
	font-size:16px;
	font-weight: 400;
}


.testimonial .owl-nav i{
	color:#fff;
	font-size: 30px;
	height: 18px;
	width: 18px;
	padding: 8px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.testimonial .owl-nav i:hover{
	background-color:#FFC576;
	color:#23273C;
	transiton:1s;
}

/*Testimonial design end here
*/

/*skills area design start from here*/

.skills-area{
	margin:80px auto 0px auto;
	max-width: 1600px;
}

.skil-title h2{
	 text-align: center;
    font-size: var(--title-size);
    color: var(--title-clr);
    font-family: var(--title-font);
    margin:10px 0px;
}


.skil-title hr{
	width: 155px;
  border: 1px solid var(--primary);
}

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

   
        

       
        .skills-section {
           
            display: grid; /* Use grid for a two-column layout */
            grid-template-columns: 1fr 1fr; /* Two equal columns */
            gap: 30px; /* Gap between grid items */
        }

        

       
        .skill-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px; 
            color: #495057; 
            font-family: poppin-regular;
        }

       
        .progress-bar-and-text-wrapper {
            display: flex;
            align-items: center; 
            gap: 10px; 
        }

       
        .progress-container {
            flex-grow: 1; /* Allows the container to take up available space */
            height: 14px; /* Reduced height for a sleeker look, similar to screenshot */
            background-color: #e9ecef;
            border-radius: 0.25rem;
            overflow: hidden;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        }

     
        .progress-bar {
            height: 100%;
            width: 0%; 
            border-radius: 0.25rem;
            
            color: #ffffff; 
            font-weight: bold;
            font-size: 0.9em;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
            transition: width 1.5s ease-out; /* Slower transition for initial load animation */

            /* Striped background */
            background-image: linear-gradient(
                -45deg,
                rgba(255, 255, 255, 0.15) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.15) 50%,
                rgba(255, 255, 255, 0.15) 75%,
                transparent 75%,
                transparent
            );
            background-size: 40px 40px;
            background-color: #007bff; /* Default color: Bootstrap primary blue */

            /* Animation for the stripes */
            animation: animate-stripes 2s linear infinite;
        }

        /* Keyframes for stripe animation */
        @keyframes animate-stripes {
            from {
                background-position: 40px 0;
            }
            to {
                background-position: 0 0;
            }
        }

       
        .progress-text {
            font-size: 16px; 
            font-weight: 600;
            color: #343a40; 
            min-width: 40px; 
            text-align: right;
            font-family: poppin-regular; 
        }

        
        .progress-bar.wp-cust { background-color: #626F47; } /* Orange-red for HTML */
        .progress-bar.wp-dev { background-color: #8e24aa; } /* Deep Purple for PHP */
        .progress-bar.webflow { background-color: #27548A; } /* Amber for JS */
        .progress-bar.html { background-color: #0288d1; } /* Light Blue for CSS */
        .progress-bar.css { background-color: #932F67; } /* Blue for React */
        .progress-bar.javascript { background-color: #d32f2f; } /* Dark Red for Web Design */
        .progress-bar.jquery { background-color: #388e3c; } /* Dark Green for Web Development */
        .progress-bar.php { background-color: #00838f; } /* Cyan for Photoshop */
        .progress-bar.mysql { background-color: #5d4037; } /* Brown for Graphic Design */
        .progress-bar.seo { background-color: #1B3C53; } 
        .progress-bar.photoshop { background-color: #03A6A1; } 
        .progress-bar.graphic-design { background-color: #511D43; } 

        /* Media queries for responsiveness */
        @media (max-width: 768px) {
            .skills-section {
                width: 95%;
                padding: 20px;
                grid-template-columns: 1fr; /* Single column on smaller screens */
                gap: 25px;
            }
        }

        @media (max-width: 480px) {
            .skill-name {
                font-size: 1em;
            }
            .progress-container {
                height: 12px; 
            }
            .progress-bar {
                font-size: 0.8em;
            }
            .progress-text {
                font-size: 0.85em;
            }
        }
 

/*Progress bar design end here*/

/*footer design start from here*/

.footer-area {
	margin:200px auto 0px auto;
	background-color: #2c3e50 ;
	padding: 50px 0px;
	position: relative;
	max-width: 1600px;
}

.footer-area .middle{
	display:flex;
}

.footer-area .middle .logo{
	flex-basis: 45%;

}

.footer-area .middle .link{
	flex-basis: 20%;
	margin-left: 110px;

}

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

}

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

.footer-area .logo p{
	font-size: 15px;
	font-family: poppin-regular;
	color:#d3d3d3;

}

.footer-area .logo i{
	color:#fff;
	font-size: 20px;
	background-color: #0000004a;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	padding: 10px;
	


}

.footer-area .middle h3{
	font-size:20px;
	font-family: poppin-regular;
	color:#fff;

}

.footer-area .link ul{
	margin: 0px;
	padding: 0px;
}

.footer-area .link ul li{
	 list-style: none;
	 margin:5px 0px;
}

.footer-area .link ul li a{
	text-decoration: none;
	font-family: poppin-regular;
	font-size: 15px;
	color:#d3d3d3;
	display: block;
	
}


.footer-area .get-in-touch ul{
	margin: 0px;
	padding: 0px;
}

.footer-area .get-in-touch ul li{
	 list-style: none;
	 margin:15px 0px;
	 font-family: poppin-regular;
	 font-size: 15px;
	 color:#000;
	 color:#d3d3d3;

}




 .copyright{
	background-color: #212e3c;
	padding:8px 0px;

}

.copyright p{
	color:#fff;
	text-align: center;
	font-size:12px;
	font-family: poppin-regular;
	margin:0px;	

}


/*footer wave design */



.footer-area .wave {
	position: absolute;
	top:-90px;
	left: 0;
	width: 100%;
	height: 100px;
	background-size: 1000px 100px;

}

.footer-area .wave1{
	animation: f-animate 30s linear infinite;
	z-index: 1000;
	opacity: 1;
	animation-delay: 0s;
	bottom:0;

}

.footer-area .wave2{
	animation: f-animate2 15s linear infinite;
	z-index: 999;
	opacity: .5;
	animation-delay: -5s;
	bottom:10px;

}


.footer-area .wave3{
	animation: f-animate3 30s linear infinite;
	z-index: 998;
	opacity: .4;
	animation-delay: 0s;
	bottom:15px;

}



/*@keyframes f-animate{
	0%{
		background-position-x:0;
	}

	100%{
		background-position-x:1000px;
	}
}*/

@keyframes f-animate2 {
	0%{
		background-position-x:0;
	}
	50%{
		background-position-x:500px;
	}

	100%{
		background-position-x:1000px;
	}
}


@keyframes f-animate3{
	0%{
		background-position-x:0;
	}

	50%{
		background-position-x:500px;
	}


	100%{
		background-position-x:1000px;
	}
}


.to-top{
	position: fixed;
	right:20px;
	bottom:50px;
	z-index: 1500;
	
}

.to-top a{

	font-size:28px;
	background-color: rgba(0,0,0,.4);
	display: inline-block;
	text-align: center;
	padding: 8px 12px;
	color:#fff;
	border-radius: 10px 10px 0px 0px;

}



										/*Home page design ene here*/

										/*about page design start from here*/



.about-here-area{
	max-width: 1600px;
	margin:auto;
	padding:50px 0px;
	
}	


.about-here-area h3{
	text-align: center;
	font-family: poppin-regular;
	font-size: 40px;
	margin:8px 0px;
}


.about-here-area p{
	
	text-align: center;
	margin: 0px;
	font-size: 16px;
	font-family: poppin-regular;
}



.about-here-area a{

	text-decoration: none;
	color:#000;

	



}



/*scroll text section design start*/

.scroll-box-1{
	max-width: 1600px;
	margin: 0px auto 0px auto;
	background-color: #B8382C;
	height: 150px;
	clip-path: polygon(0 52%, 100% 0, 100% 60%, 0 100%);
	z-index: 1;

}

.scroll-box-2{
	max-width: 1600px;
	background-color: #2C3E50;
	height: 80px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	z-index: 2;
	margin:-111px auto 0px auto;
	overflow: hidden;
	white-space: nowrap;

}

.scroll-box-2 .scrool-text{
	margin-top:19px;
	display:flex;
	justify-content: space-between;
	animation: scrool-text 15s linear infinite ;

}


.scroll-box-2 span{
	
	color:#fff;
	font-size:30px;
	margin:0px 18px;
	
	
	
	
}

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


@keyframes scrool-text{

	0%{
		transform: :translateX(0%);
	}

	100%{
		transform: translateX(-50%);
	}
}

/*scrool text design end here*/

/*what i do section design start from here*/

.what-ido-section{
	max-width: 1600px;
	margin:50px auto 50px auto;

}

.what-ido-section .middle{
	display: flex;
	column-gap: 30px;
}

.what-ido-content{
	flex:2;
}

.my-approach-content{
	flex:2;
}

.what-ido-section h2{
	font-size: 32px;
	font-family: poppins-medium;
}

.what-ido-section ul{
	margin: 0px;
	padding: 0px;
}

.what-ido-section ul li{
	list-style: none;
	font-family: poppin-regular;
	margin:8px 0px;
	font-size: 15px;
}

.what-ido-section ul li i{
	margin-right: 10px;
	color: #b6392d;
}

.my-approach-content p{
	font-family: poppin-regular;
	font-size: 15px;
}



/*vision mission sectoion start from here*/

.vision-mission-area{
	max-width: 1600px;
	margin:0px auto 0px auto;
	background-color: #00324b1c;
	padding: 50px 0px;
}

.vision-mission-area h2 {
    text-align: center;
    font-size: 42px;
    color: var(--title-clr);
    font-family: var(--title-font);
    margin: 5px 0px;
}

.vision-mission-area h3 {
    font-size: 20px;
    text-align: center;
    font-family: poppin-regular;
    font-weight: 400;
    margin: 5px 0px;
}

.vision-mission-area hr {
    width: 150px;
    border: 1px solid var(--primary);
}

.vision-mission-wraper{
	display: flex;
	column-gap: 50px;
	margin-top:50px;
}

.vision-content, .mission-content{
	box-shadow: 0px 5px 40px -8px rgba(86, 104, 146, 0.33);
	padding:20px;
	border-radius: 20px;
}

.vision-mission-wraper h4{
	font-family: poppin-regular;
	font-size: 32px;
}


.vision-mission-wraper i{
	margin-right: 20px;
    height: 35px;
    width: 35px;
    background-color: #B6392D;
    padding: 15px;
    font-size: 30px;
    border-radius: 50%;
    color: #fff;
}


.vision-mission-wraper p{
	font-family: poppin-regular;
	font-size: 16px;
}



/*counter section design start from here*/

.counter-section {
  background-color: #00324B; 
  color: white;
  padding: 30px 0px;
  max-width: 1600px;
  margin:0px auto;
}


.counter-section .container {
  display: flex;
  justify-content: space-around;
  text-align: center;
  flex-wrap: wrap; /* Allows items to wrap on smaller screens */
}


.counter-box {
  flex: 1;
  padding: 20px;
  min-width: 180px; /* Ensures boxes don't get too small */
  position: relative;

}

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

.counter-box h3.counter {
  font-size: 3.5em;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  font-family: poppin-regular;
}



.counter-box p {
  font-size: 1.2em;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 10px;
  font-family: poppin-regular;
}


/*education work area start form here*/

.education-area{
	max-width: 1400px;
	margin: 0px auto 0px auto;
	padding: 80px 100px;
	background-color: #f6f6f6;
}

.education-area .education-top h3{
	text-align: center;
	font-size: 28px;
	font-family: poppin-regular;
}

.education-area .education-top h2{
	text-align: center;
	font-size: 45px;
	font-family: acme;
}

.education-area .education-top h2 span{
	color:var(--title-clr);
}

.education-body {
	display:flex;
	justify-content: space-around;
	margin-top:50px;
	column-gap: 50px;
}

.education-left{
	width: 50%;
	background-color: #fff;
	padding:30px;
	border-radius: 30px;
	border-left: 5px solid #b6392d;
}

.work-right{
	width: 50%;
	background-color: #fff;
	padding:30px;
	border-radius: 30px;
	border-left: 5px solid #b6392d;
}

.education-left hr, .work-right hr{
	margin-bottom: 50px;
	margin-top:20px;
	border:1px solid #e5dfdf;
}

.edu-step{
	display: flex;
	align-items: center;
	justify-content:space-between;
	margin-top: 15px;

}

.education-left h2,  .work-right h2{
	font-size: 38px;
	font-family: poppins-medium;
	letter-spacing: 1px;

}


.education-left i, .work-right i{
	margin-right: 20px;
	height: 35px;
	width:35px;
	background-color: #B6392D;
	padding: 15px;
	font-size: 30px;
	border-radius: 50%;
	color:#fff;
}


.education-left i:hover, .work-right i:hover{

	background-color: #00324B;
}

.step-title h3{

	font-size:28px ;

}

.step-title h4{

	font-size: 18px;
	color:#5c5c5c;
	font-family: poppin-regular;
	font-weight: 400;

}

.step-year h5{
	font-size: 18px;
	font-family: poppin-regular;
	font-weight: 400;
	background-color: #000;
	color: #fff;
	padding: 12px 40px;
	border-radius: 30px;
}


/*FAQ design start from here*/

.faq-section-area {
  
  max-width: 1600px;
  margin: 50px auto 0px auto;
  
}

.faq-header {
  text-align: center;
  margin-bottom: 40px;
}

.faq-subtitle {
  color: var(--primary);
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 5px;
}

.faq-title {
  font-size: 45px;
  font-weight: bold;
  font-family: var(--title-font);
  font-weight: 500;
}


.faq-title .highlight {
  color: var(--primary);
  font-style: italic;
  
}


.faq-content-wrapper {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.faq-list-container {
  flex: 2;
  min-width: 300px;
}


/* FAQ Item Styling */
.faq-item {
  border-radius: 10px;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}


.faq-question-btn {
  width: 100%;
  text-align: left;
  padding: 20px 25px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #000;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}


.toggle-icon {
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.3s ease;
}


.faq-item.active .faq-question-btn {
  background-color: var(--primary);
  color: #fff;
  border-radius: 10px 10px 0 0;
}

.faq-item.active .toggle-icon {
  transform: rotate(45deg); /* Rotates the + to a - */
}

.faq-answer-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}


.faq-item.active .faq-answer-container {
  max-height: 200px; 
}


.faq-answer {
  padding: 20px 25px;
  font-size: .9rem;
  line-height: 1.6;
  color: #666;
  background-color: var(--primary);
  color: #fff;
  border-radius: 0 0 10px 10px;
  font-family: poppin-regular;
}


/* Contact Card Styling */
.contact-card-container {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-card {
  background-color: #fff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background-size: cover;
  text-align: center;
}

.contact-card i{
	font-size: 50px;
	color:var(--primary);
}

.contact-card-header h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 5px;
  font-family: poppin-regular;
}

.contact-card-header p {
  font-size: 0.9rem;
  color: #666;
  font-family: poppin-regular;
}

.about-contact-btn {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 20px;
  transition: background-color 0.3s ease;
  font-family: poppin-regular;
}

.about-contact-btn:hover {
  background-color: #2B798D;
}

.contact-card-footer {
  background-color: #00324B;
  color: white;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
}


.contact-card-footer .footer-title {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.contact-card-footer .footer-availability {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 5px 0;
}

.contact-card-footer .footer-phone {
  font-size: 1rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .faq-content-wrapper {
    flex-direction: column;
  }
}





										/*About page design end here*/

										/*Service page design start from here*/


/*why client-belive-area design start from here*/

.why-client-belive-area{
	max-width: 1600px;
	margin:80px auto 0px auto;

}

.why-client-belive-area .client-belive-top h2{
	text-align: center;
    font-size: var(--title-size);
    color: var(--title-clr);
    font-family: var(--title-font);
    margin: 10px 0px;
}

.why-client-belive-area .client-belive-top span{
	color:#00324B;
}

.why-client-belive-area .client-belive-top hr{

	width: 200px;
    border: 1px solid var(--primary);
}

.client-belive-wrapper{
	margin-top: 50px;
	display: flex;
	column-gap:30px;
	align-items: center;

}

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

.belive-right-content{
	width: 60%;
	display: flex;
	flex-wrap: wrap;
	align-content: center;


}

.belive-right-content .belive-part{
	
	flex-basis: 44%;
	padding: 18px;

}

.belive-right-content .belive-part:nth-child(1){
	background-color: #00324bdb;
	border-radius: 32px 0px 0px 0px;
}

.belive-right-content .belive-part:nth-child(2){
	background-color: #00324B;
	border-radius: 0px 32px 0px 0px;
}

.belive-right-content .belive-part:nth-child(3){
	background-color: #00324B;
	border-radius: 0px 0px 0px 32px;
}

.belive-right-content .belive-part:nth-child(4){
	background-color: #00324bdb;
	border-radius: 0px 0px 32px 0px;
}


.belive-right-content .belive-part i{
	
	margin-right: 20px;
    height: 30px;
    width: 30px;
    background-color: #B6392D;
    padding: 15px;
    font-size: 30px;
    border-radius: 50%;
    color: #fff;

}

.belive-right-content .belive-part h3{
	
	font-size: 20px;
	color:#fff;
	font-weight: 600;

}

.belive-right-content .belive-part p{
	font-family: poppin-regular;
	font-size: 15px;
	margin-top:0px;
	color: #fff;
	line-height: 1.3rem;
	font-weight: 400;
}






.belive-image-side img{
	width: 95%;
	border-radius: 20px;
}


										/*Service page design end from here*/

										/*Portfolio page design start from here*/



.portfolio-main-sec{
	max-width: 1600px;
	margin: 80px auto 0px auto;
}


.portfolio-main-sec .controls{
	margin:50px 0px;
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	row-gap: 10px;
}

.portfolio-main-sec .controls button{

	padding: 12px 16px;
	background-color: #00324B;
	color:#fff;
	font-family: poppin-regular;
	font-size: 16px;
	margin:0px 5px;
	border-radius: 5px;
	border:none;

}

.mixitup-control-active{
	background-color: #b6392d !important;
}

.portfolio-main-sec .controls button:hover{
	background-color: #b6392d;

}

.portfolio-main-sec .portfolio-wapper{
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	justify-content:center;
}

.portfolio-wapper .portfolio-part{
	width: 31%;
	background-color: #23273C;
	border-radius: 15px;
	overflow: hidden;
	transition: all 700ms ease;
	min-width: 300px;
	transition: transform 0.5s ease;
}

.portfolio-part .title-content{
	padding:8px 10px;
	position: relative;
	overflow: hidden;
	height: 76px;
	
}

.portfolio-part .title-content a:not(:last-child){
	text-decoration: none; 

}

.portfolio-part .title-content h4{
	font-size: 20px;
	font-family: playfaire-regular;
	color:#FFC576;
	letter-spacing: 1.5px;
	
}

.portfolio-part .title-content h4:hover{
	color: #fff;
}


.portfolio-part .title-content p{
	font-size: 15px;
	font-family: poppin-regular;
	color:#fff;
	
}

.portfolio-part .title-content a{
	
	color:#FFC576;
	transition: .5s;
}

.portfolio-part .title-content a:hover{
	color:#fff;
}


.portfolio-part .title-content .see-live-btn {
	
	
	position: absolute;
	right: -72px;
    width: 188px;
    height: 188px;
    background: rgba(255, 255, 255, .07);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    bottom: -96px;
    
    
}

.portfolio-part .title-content .see-live-btn a {
	text-decoration: none;
	font-size: 15px;
	font-family: poppin-regular;
	position: absolute;
	top: 40px;
	left: 25px;
}


.portfolio-wapper .portfolio-part:hover.portfolio-part .title-content .see-live-btn{
	background-color: var(--primary);
	    transition: 700ms;
}

.portfolio-wapper .portfolio-part:hover.portfolio-part .title-content .see-live-btn a {
	color:#fff;
}



.portfolio-wapper .portfolio-part img{
	width: 100%;
	border-radius: 15px 15px 0px 0px;
	height: 250px;
	transition: transform 0.3s ease;
}

.portfolio-wapper .portfolio-part:hover {
    
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
    transform: scale(1.1); 
}



								/*Contact page design start from here*/




.contact-section {
  
   max-width: 1600px;
   margin:80px auto 0px auto;
}


.contact-section .middle {
    display: flex;
    gap: 50px;
}

/* --- Left Column: Contact Info --- */
.contact-info-column {
    flex: 1;
    min-width: 300px;
}

.contact-info-column .subtitle {
    color: var(--primary);
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: playfaire-regular;
}

.contact-info-column .title {
    font-family: var(--title-font);
    font-size: 2.5rem;
    color:#000 ;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 400;
}


.contact-info-column  .highlight-text {
    color: var(--primary);
}


.contact-info-column  .description {
    color: #000;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 40px;
    font-family: poppin-regular;
}


.contact-info-column .contact-details ul {
	margin:0px;
	padding: 0px;
}



.contact-info-column .contact-details ul li{
	list-style: none;
	margin:15px 0px;
	font-family: poppin-regular;

}

.contact-info-column .contact-details ul li a{
	color: #000;
	
}


.contact-info-column .contact-details ul li i{
	color: #fff;
    font-size: 20px;
    background-color: var(--primary);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    padding: 10px;
    margin-right: 10px;
}


/* --- Right Column: Contact Form --- */
.contact-form-column {
    flex: 2;
}


.contact-form {
    display: flex;
    flex-direction: column;
}

.form-group-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}


.form-field {
    flex: 1; 
    display: flex;
    flex-direction: column;
}


.form-field.full-width {
    flex: none;
    width: 100%;
}

.contact-form-column label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #222;
    margin-bottom: 5px;
    font-family: poppins-medium;
}


.contact-form-column input, .contact-form-column select, .contact-form-column textarea{
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f8f8f8;
    font-size: 1rem;
    color: #222;
    box-sizing: border-box;
    transition: border-color 0.3s;
}


.contact-form-column input:focus, .contact-form-column select:focus, .contact-form-column textarea:focus {
    border-color: #FFC576;
    outline: none;
    background-color: #fff;
}


.contact-form-column textarea {
    resize: vertical;
}

.contact-form-column .submit-row {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.submit-row .submit-btn {
   
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: poppin-regular;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform:uppercase;
    position: relative;
    z-index: 1;
}

.submit-row .submit-btn:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    z-index: -1;
    border-radius: 5px;
}


.submit-row .submit-btn:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #2B798D;
    z-index: -1;
    transition: transform 0.5s;
    transform-origin: right;
    transform: scaleX(0);
    border-radius: 5px;
}


.submit-row .submit-btn:hover:after{
	background-color: #2B798D;
	transition: transform 0.5s;
	transform-origin: left;
	transform: scaleY(1);

	
	
}