@charset "UTF-8";
/* CSS Document */



#subBanner {
  padding: 10vh 0;
  background: url('thumbnaillarge/Sub-Logo_Design.png') no-repeat 100% 0% / contain;
}

#section1{
  padding-top: 0;
}


.logo-steps .feature-wrap{
	grid-template-columns: repeat(4, 1fr);
	gap: calc( var(--gap) / 2);
}
.feature-wrap .feature:nth-child(n+4){
	transform: translatex(0);
}


.logo-wrap {
	margin-top: 4rem;
}

.logo-wrap .client-logo{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 2em;
}

.logo-wrap img{
	width: 100%;
	max-width: 300px;
	height: auto;
}

.logo-steps .feature{
	padding: 1em 3em 2em;
}

.logo-steps .steps-tagline{
	display: block;
	font-size: 40px;
	font-weight: 700;
	line-height: 1em;
	color: white;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: 1em 1em;
	width: 100%;
	max-width: 1200px;
	margin: auto;
	text-align: center;
}

.logo-steps .card-heading{
	margin: 0;
	padding: 0;
	font-size: 50px;
	margin-top: .5em;
	line-height: .8em;
}

.logo-steps .card-sub-heading{
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	margin: .8em 0;
}

.logo-steps .feature.cyan .card-sub-heading{color: var(--cyan);}
.logo-steps .feature.purple .card-sub-heading{color: var(--purple);}
.logo-steps .feature.orange .card-sub-heading{color: var(--orange);}
.logo-steps .feature.maroon .card-sub-heading{color: var(--maroon);}


.logo-steps .feature.cyan .card-icon{fill: var(--cyan);}
.logo-steps .feature.purple .card-icon{fill: var(--purple);}
.logo-steps .feature.orange .card-icon{fill: var(--orange);}
.logo-steps .feature.maroon .card-icon{fill: var(--maroon);}


.image-gfx:before{
	width: 520px;
	height: 520px;
	bottom: 3%;
	left: calc(50% - 290px);
}

.rounded-image{
	position: relative;
	width: 100%;
	max-width: 500px;
	max-height: 600px;
	border-radius: 5em;
	overflow: hidden;
	transform: rotate(25deg);
}


.rounded-image img{
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: bottom center;
	transform: rotate(-25deg);
}

@media (max-width: 1400px){
	.logo-steps .steps-tagline{
		font-size: 30px;
	}
  .logo-steps .feature-wrap{
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 700px){
	#subBanner{
		padding: 8vh 0 6vh;
	}
	.sub-btn-wrap{
		padding-top: 0;
	}
	 .logo-steps .feature-wrap{
		grid-template-columns: 1fr;
	}
	.logo-wrap.grid-3-3-3-3{
		grid-template-columns: 1fr 1fr;
		gap: 1em;
	}
	.logo-wrap .client-logo{
		padding: 1em;
	}
	.logo-steps .card-heading{
		font-size: 40px;
		margin-top: .2em;;
	}
	.logo-steps .card-sub-heading{
		margin: .4em 0;
	}
	.logo-steps .feature{
		padding: 1em 1em 2em;
	}
	.logo-steps .feature .card-text{
		line-height: 26px;
	}
}