/**Stylesheet for Inksplat.*/
@font-face{
  font-family: roadrage;
  src: url('../Fonts/roadrage.woff') format('woff2'),
     url('../Fonts/roadrage.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: icomoon;
  src: url('../Fonts/icomoon.woff') format('woff2'),
     url('../Fonts/icomoon.ttf') format('truetype');
  font-display: swap;  
}


@font-face{
  font-family: railroad;
  src: url('../Fonts/railroad.woff2') format('woff2'),
     url('../Fonts/railroad.ttf') format('truetype');
  font-display: swap;  
}


@font-face{
  font-family: jost;
  src: url('../Fonts/jost.woff2') format('woff2'),
     url('../Fonts/jost.ttf') format('truetype');
  font-display: swap;  
}


:root {
  --primary: #2BBAD3; 
  --secondary: #25A0B5;
  --bright: #F7F7F7;
  --mid: #09282D;
  --secondarydark: #030D0F;
  --dark: #020708;
}

/**Page Intro*/
#page_intro{
	position: relative;
	box-sizing: border-box;
}

#page_intro_content p strong{
	font-size: 1.4em;
	line-height: 1.5em;
}

#page_intro_image{
	position: relative;
	left: 50%;
	width: 80%;
	max-width: 24em;
	transform: translateX(-50%);
}

#page_intro_image img, .why_us_icon img{
	width: 100%;
	height: auto;
}






/**Why Choose*/
#why_us{
	position: relative;
	padding-bottom: 3em;
	box-sizing: border-box;
}

#why_us_holder{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.why_us_box{
	position: relative;	
	padding: 1.5em 1.5em 1em 1.5em;
	line-height: 1.3em;
	margin: 0em .5em 1em .5em;
	background: #FBFCFB;
	transition: margin-top 2s;
	box-sizing: border-box;
}

.why_us_box:first-child{
	margin-top: 2em;
}

.why_us_box:nth-of-type(2){
	margin-top: 4em;
}

.why_us_box:nth-of-type(3){
	margin-top: 6em;
}

.why_us_box h3{
	font-family: railroad, sans-serif;
	font-size: 1.5em;
	color: var(--dark);
	text-align: center;
	margin: .7em 0em 0em 0em;
}	

.why_us_icon{
	position: relative;
	left: 50%;
	width: 4em;
	transform: translateX(-50%);
}

#custom_development_choose .why_us_hidden{
	display: none;
}




/**The Process*/
#the_process{
										display: none;
	position: relative;
	background: yellow;
	box-sizing: border-box;
}

.drawCircle{
	fill:none;
	stroke-miterlimit:10; 
	stroke-dasharray: 247;
	stroke-dashoffset:0
}


.process_item_left_holder{
	position: relative;
	height: 11em;
}

.process_item_left_circle{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8em;
	height: 8em;
	transform: translate(-50%, -50%);
}

.process_item_left_circle svg{
	width: 100%;
	height: auto;
}

.process_item_left_number{
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: roadrage, sans-serif;
	font-size: 6em;
	color: var(--primary);
	transform: translate(-50%, -50%);
}

 .process_item_right h3{
	font-family: railroad, sans-serif;
	font-size: 2em;
	color: var(--dark);
	text-align: center;
	text-transform: uppercase;
	margin: 0em 0em .5em 0em;
}	








/**Client Sliders*/
#client_block{
	position: relative;
	background: var(--secondarydark);
	padding: 1.5em 0em 3em 0em;
	animation: switch 12s infinite linear; 
	box-sizing: border-box;
}

.client_item{
	position: relative;
	width: 10em;
}

.client_item .img{
	display: block;
	width: 7em;
	padding: 0em 1.5em;
}

.client_item img{
	width: 100%;
	height: auto
}











/**Package Styles*/
#what_you_get{
	position: relative;
	padding-top: 1.5em;
	box-sizing: border-box;
}

.package_flexbox{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.package_item{
	position: relative;
	padding: 1.5em;
	width: 33.3%;
	max-width: 24em;

	width: 30em;
	max-width: 30em;
}

.package_item_inner{
	position: relative;
	color: var(--bright);
	background: var(--mid);
	border-radius: 1em;
	border: 1px solid #CCC;
	box-shadow: 0 0 10px #CCC;
	overflow: hidden;
}

.package_item_header{
	width: 100%;
	background: var(--primary);
}

.package_item_header h2{
	font-family: railroad, sans-serif;
	font-size: 2em;
	color: var(--dark);
	text-align: center;
	padding-top: .7em;
	margin: 0em;
	z-index: 2;
}

.package_item_header_bottom{
	position: relative;
	width: 100%;
    height: 3em;
    margin-top: -1px;
    background: var(--primary);
    clip-path: polygon(100% 0, 50% 100%, 0 0);
}

.package_item_content{
	position: relative;
	padding: 1em 1.5em;
	text-align: center;
}

.package_item_content ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.package_item_content li{
	font-size: 1.1em;
	margin: 1em 0em;
}

.package_item_content li:before {
    content: "✔";
    color: var(--primary);
    padding-right: .5em;
}

.package_price{
	display: none;
}

.package_price h4{
	font-family: roadrage, sans-serif;
	font-size: 4em;
	text-align: center;
	margin: 0em;
}

.package_banner{
	display: none;
	position: absolute;
	top: 2.3em;
	right: -9em;
	width: 100%;
	transform: rotate(40deg);
	background-color: var(--bright);
	font-size: 1.2em;
	color: var(--dark);
	text-align: center;
	text-transform: uppercase;
}


/**Package Marquee*/
#package_scrollers{
	position: absolute;
	top: 50%;
	left: 0em;
	transform: translateY(-25%);
}

.package_text_scroller{
	position: relative;
	display: flex;
    white-space: nowrap;
    width: 100%;
    height: 10em;
    overflow: hidden;
}

.package_scroller_text{
	position: relative;
	top: -.2em;
	font-family: railroad, sans-serif;
	font-size: 7em;
    font-weight: 700;
    padding: 0 0.25em;  
    margin: 0;
	color: rgba(0,0,0,0);
	-webkit-text-stroke: 2px var(--primary);
    animation: marquees 7s infinite linear; 
}


#package_scroller_holder_2 .package_scroller_text{
	color: var(--primary);
	-webkit-text-stroke: none;
}

@supports (-webkit-touch-callout: none) {
 
 	#package_scroller_holder_2 .package_scroller_text{
 		color: var(--primary)
		-webkit-text-stroke: none;
 	}
}





#package_scroller_1 .package_scroller_text, #package_scroller_3 .package_scroller_text{
    animation: marquees 7s infinite linear; 

}

#package_scroller_2 .package_scroller_text{
    animation: marquees 17s infinite linear reverse; 
}

@keyframes marquees {
	from {
      transform: translateX(0);
    }
	to {
      transform: translateX(-100%);
    }
}


/**Choose Correct Package To Display*/
.packages{
	position: relative;
	display: none;
}

#bespoke_packages #bespoke_package{
	display: block;
}

#development_packages #development_package{
	display: block;
}

#ecommerce_packages #ecommerce_package{
	display: block;
}

#wordpress_packages #wordpress_package{
	display: block;
}

#maintenance_packages #maintenance_package{
	display: block;
}




/**Testimonials (Service Page)*/
#testimonial_block{
	position: relative;
	padding: 1.5em 0em .5em 0em;
	box-sizing: border-box;
}


/**FAQ's*/
#faqs{
	position: relative;
	padding: 0em 0em 5em 0em;
	box-sizing: border-box;
}

.faq{
	display: none;
	position: relative;
	margin: 1em 0em 0em 0em;
	border-bottom: 1px solid #CCC;
}

.faq_question{
	position: relative;
	padding: .5em 0em 1em 0em;
	box-sizing: border-box;
}

.faq_answer{
	padding-bottom: 1em;
	line-height: 1.3em;
}

.faq_answer p{
	padding-left: .5em;
}

.faq_answer ul{
	list-style: disc;
}

.faq_question h4{
	font-family: railroad, sans-serif;
	font-size: 1.4em;
	color: #000;
	width: 100%;
	width: calc(100% - 4em);
	margin: 0em;
}

.faq_icon{
	position: absolute;
	top: -.13em;
	right: .2em;
	font-family: bebas, sans-serif;
	font-size: 3.5em;
	color: #2BBAD3;
}

.faq_question:hover{
	cursor: pointer;
	opacity: .7;
}

.faq_answer{
	display: none;
}

#bespoke_faq .bespoke_faq{
	display: block;
}

#development_faq .webdev_faq{
	display: block;
}

#ecommerce_faq .ecom_faq{
	display: block;
}





/**Case Study Styles*/
#case_study_holder{
	display: flex;
	flex-wrap: wrap;
	justify-content: justify;
}

#case_study_left{
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

#case_study_image{
	position: relative;
	width: 100%;
}

#case_study_image img, #project_homepage_image img{
	width: 100%;
	height: auto;
}

#case_study_right{
	position: relative;
	padding-top: 1.5em;
	width: 100%;
	box-sizing: border-box;
}

#about_project, #challenge, #solution{
	position: relative;
	padding: 1.5em 0em;
	box-sizing: border-box;
}

#about_project h2{
	font-family: roadrage, sans-serif;
	font-size: 2em;
	text-transform: uppercase;
	margin: 0;
	text-align: center;
}

#challenge h2, #solution h2{
	font-family: bebas, sans-serif;
	font-size: 1.9em;
	text-transform: uppercase;
	margin: 0;
	text-align: center;
}

#project_homepage_image{
	position: relative;
	left: 50%;
	width: 80%;
	max-width: 56em;
	transform: translateX(-50%);
	box-shadow: 0 0 10px #CCC;
	margin-bottom: 5em;
}

#view_project{
	position: fixed;
	right: 2em;
	bottom: 2em;
	width: 10em;
	padding: 1em 0em;
	box-sizing: border-box;
	box-shadow: 0 0 10px #545454;
	transition: opacity 1s;
	z-index: 2;
}

#view_project:hover{
	opacity: .9;
}

#view_project a{
	display: block;
	font-family: railroad, sans-serif;
	font-size: 1.3em;
	color: #FFF;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}



/**2026 Services*/
#service_intro{
	position: relative;
	padding: 2em 0em;
	box-sizing: border-box;
}

#service_intro p{
	font-size: 1.3em;
	line-height: 1.7em;
	text-align: center;
}

.service_flex{
	position: relative;
	padding: 1em 0em;
	box-sizing: border-box;
}

.service_flex_image{
	position: relative;
	box-sizing: border-box;
}

.service_sh{
	font-size: 1.2em;	
	color: var(--primary);
	text-transform: uppercase;
	line-height: 1.05em;
	margin-bottom: 2em;
}

.service_flex_content h3{
	font-family: railroad, sans-serif;
	font-size: 2.2em;
	line-height: 1.2em;
	margin: 0em 0em .5em 0em;
}

.service_flex_content .sub_header{
	line-height: 1.5em !important;
}

.service_flex_content .mini_header{
	display: block;
	padding-bottom: .4em !important;

}

.service_flex_content .sub_header .large_header{
}

.service_flex_content p{
	font-size: 1.05em;
	line-height: 1.5em;
}

#inline_cta{
	position: relative;
	padding: 4em 0em;
	box-sizing: border-box;
}

#inline_cta h2{
	font-family: railroad, sans-serif;
	font-size: 2.7em;
	line-height: 1.1em;
	text-align: center;
	margin: 0em 0em .5em 0em;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}


.service_flex_image{
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	background: var(--mid);
	margin: 1em 0em;
}

.woocommerce_image{
	background: #873EFF;
}

.wordpress_image{
	background: #21759B;
}

.service_image{
	margin: 1.5em;
}

.service_image img{
	display: block;
	width: 100%;
	height: auto;
}



/**Media Queries*/
@media only screen and (min-width: 36.875em){
		

	/**Services Pages Styles.*/
	#page_intro_image{
		left: auto;
		width: 24em;
		transform: none;
		float: right;
		margin-top: -3em;
		shape-outside: polygon(29.45% 96.15%, 88.3% 98.4%, 205px 11px, 41px -1px, 6px 101px, -2.85% 54.8%, 5.2% 72.45%);
	}


	/**The Process Style*/
	.process_item_right p{
		text-align: left;
	}


	/**FAQ's*/
	#faqs{
		position: relative;
		padding: 1em 0em 5em 0em;
		box-sizing: border-box;
	}


	/**2026 Services*/
	#service_intro p{
		font-size: 1.4em;
	}

	#inline_cta h2{
		font-size: 3.2em;
	}
}


@media only screen and (min-width: 41em){

	/**Why Choose*/
	.why_us_box{
		width: calc(33.3% - 1em);
		margin: 0em .5em 0em .5em;
	}

}


@media only screen and (min-width: 41em){

	/**2026 Services*/
	#inline_cta h2{
		font-size: 4.3em;
		max-width: 30em;
	}

}


@media only screen and (min-width: 54em){

	/**The Process.*/
	.process_item_left_holder{
		top: 50%;
		transform: translateY(-50%);
	}

	.process_item{
		display: flex;
		flex-wrap: wrap;
		margin: 1.5em 0em;
	}

	.process_item_left{
		width: 20em;
	}

	.process_item_right{
		width: calc(100% - 20em);
	}

	 .process_item_right h3{
		font-size: 2em;
		text-align: left;
	}	


	/**Case Study Pages*/
	#about_project h2, #challenge h2, #solution h2{
		text-align: left;
	}


	#case_study_left{
		width: 24em;
	}

	#case_study_right{
		padding-top: 0em;
		padding-left: 3em;
		width: 49%;
		width: calc(100% - 24em);
	}

	#case_study_image{
		position: sticky;
		top: 5em;
		margin-top: 1.5em;
	}




	/**2026 Styles*/
	.service_flex{
		display: grid;
		grid-template-columns: 60% 1fr;
		gap: 2em;
		align-items: center;
		padding: 2em 0em;
	}

	.service_flex:nth-child(even){
		grid-template-columns: 1fr 60%;
	}

	.service_flex:nth-child(even) .service_flex_content {
	  	grid-column: 2;
  		grid-row: 1;
	}

	.service_flex:nth-child(odd) .service_flex_image {
 		margin-right: -3em;
	}

	.service_flex:nth-child(even) .service_flex_image {
	  	grid-column: 1;
  		grid-row: 1;
  		margin-left: -3em;
	}

	.service_flex_image{
		margin: 0;
	}



}


@media only screen and (min-width: 64em){

	/**Case Study Pages*/
	#case_study_left{
		width: 30em;
	}

	#case_study_right{
		padding-left: 5em;
		width: calc(100% - 30em);
	}

	/**2026 Services*/
	#service_intro p{
		font-size: 1.6em;
	}

	.service_sh{
		font-size: 1.4em;	
		margin-bottom: 1em;
	}

	.service_flex_content h3{
		font-size: 2.7em;
	}


}


@media only screen and (min-width: 70em){

	/**Why Choose*/
	.why_us_box{
		width: calc(33.3% - 2em);
		margin: 0em 1em 0em 1em;
	}

	/**2026 Services*/
	#inline_cta h2{
		font-size: 5.5em;
	}

	/**2026 Styles*/
	.service_flex{
		grid-template-columns: 50% 1fr;
	}

	.service_flex:nth-child(even){
		grid-template-columns: 1fr 50%;
	}



}