:root {
	--cnvs-themecolor: #00BED7;
	width: 100%;
	overflow-x: hidden;
}
/*Homepage testimonials Section*/
.stack-cards {
	position: relative;
	display: block;
  }
  
  .stack-cards-item {
	  background: #19202B;
	  border-radius: 0.25rem;
	  box-shadow: -5px 0 16px 8px rgba(0, 0, 0, 0.2);
	  text-align: left;
	  margin-bottom: 10px;
  }
  
  @media (min-width: 992px) {
  
	  .content-wrap {
		  overflow:visible;
	  }
  
	  .stack-cards {
		  position: relative;
		  display: block;
	  }
  
	  .sticky-title {
		  position: sticky;
		  top: 8rem;
	  }
  
	  .stack-cards > .stack-cards-item + .stack-cards-item {
		  margin-top: 40vh;
	  }
  
	  .stack-cards-item {
		  --cnvs-stack-card-offset: 1.5em;
		  max-width: 53rem;
		  position: sticky;
		  top: 20rem;
		  margin-bottom: 0px;
	  }
  
	  .stack-cards-item:nth-of-type(0) {
		  transform: translateY(calc((0 - 1) * var(--cnvs-stack-card-offset))) scale(0.85);
	  }
	  .stack-cards-item:nth-of-type(1) {
		  transform: translateY(calc((1 - 1) * var(--cnvs-stack-card-offset))) scale(0.88);
	  }
	  .stack-cards-item:nth-of-type(2) {
		  transform: translateY(calc((2 - 1) * var(--cnvs-stack-card-offset))) scale(0.91);
	  }
	  .stack-cards-item:nth-of-type(3) {
		  transform: translateY(calc((3 - 1) * var(--cnvs-stack-card-offset))) scale(0.94);
	  }
	  .stack-cards-item:nth-of-type(4) {
		  transform: translateY(calc((4 - 1) * var(--cnvs-stack-card-offset))) scale(0.97);
	  }
	  .stack-cards-item:nth-of-type(5) {
		  transform: translateY(calc((5 - 1) * var(--cnvs-stack-card-offset))) scale(1);
	  }
  }
/*Testimonials Section Ends*/
#skill-section {
	background: url(../images/skill_bg1.png);
	background-position: right center;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
}
/*Image 1 on skill background*/
.skill-img {
	position: absolute;
	top:78px;
	left: 585px;
	z-index: 2;
}
@media only screen and (min-width:1200px) and (max-width:1400px) {
	.skill-img {
		position: absolute;
		top:79px;
		left: 415px;
		z-index: 2;
	}
}
@media only screen and (min-width:992px) and (max-width:1200px) {
	.skill-img {
		position: absolute;
		top:120px;
		left: 255px;
		z-index: -1;
	}
}
@media only screen and (min-width: 768px) and (max-width:992px) {
	.skill-img {
		position: absolute;
		top:120px;
		left: 5px;
		z-index: -1;
	}
}
@media only screen and (max-width: 768px) {
	.skill-img {
		width: 30%;
		position: absolute;
		top: -44px;
		left: 7px;
		z-index: -2;
	}
}
/*responsiveness of skill background end*/

/*Image 2 on skill background*/
.skill-img1 {
	position: absolute;
	top:124px;
	right: 65px;
	z-index: 2;
}
@media only screen and (min-width:1200px) and (max-width:1400px) {
	.skill-img1 {
		position: absolute;
		top:125px;
		right: 65px;
		z-index: 2;
	}
}
@media only screen and (min-width:992px) and (max-width:1200px) {
	.skill-img1 {
		position: absolute;
		top:165px;
		right: 65px;
		z-index: -1;
	}
}
@media only screen and (min-width: 768px) and (max-width:992px) {
	.skill-img1 {
		position: absolute;
		top:165px;
		right: 62px;
		z-index: -1;
	}
}
@media only screen and (max-width: 767px) {
	.skill-img1 {
		width: 35%;
		position: absolute;
		top:-11px;
		right: 65px;
		z-index: -2;
	}
}
/*responsiveness of skill background end*/

/*CTA Section button*/
.cta-btn {
	background-color: transparent;
	color: #000;
	outline: 0;
	border: 1px solid var(--cnvs-themecolor);
	border-radius: 9px;
}
.cta-btn:hover {
	background-color: var(--cnvs-themecolor);
	color: #fff;
	border-radius: 9px;
}
#featured li {
	margin-bottom:1.2em;
	list-style: none;
}
/*Website Development Hero Section*/
#web_hero {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top bottom;
	opacity: 0.9;
}
/*Graphic Design Hero Section*/
#graphic_hero {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top bottom;
}
/*Digital Marketing Hero section*/
#digital_hero {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top bottom;
}
/*app Design Hero Section*/
#app_hero {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top bottom;
}
/*Product Hero Section*/
#product_hero {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top bottom;
}
/*About Us Hero Section*/
#abt {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

@media only screen and (max-width: 567px) {
    #wrapper {
        overflow-x:hidden;
    }
    .mobile-footer {
        display:grid !important;
        gap: 25px !important;
    }
    .cnvs-hamburger {
        margin: 0 47vw;
    }
}