/*
Theme Name: sjs
Version: 1.0
Description: A child theme of Divi
Author: sjs
Template: Divi
*/

@import url("../Divi/style.css");

.burger-icon{
	cursor: pointer;
}

.wrapper-menu {
	width: 25px;
	height: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	transition: transform 330ms ease-out;
}

.wrapper-menu.open {
	transform: rotate(-45deg);  
}

.line-menu {
	background-color: #FFC20E;
	border-radius: 5px;
	width: 100%;
	height: 3px;
}

.line-menu.half {
	width: 50%;
}

.line-menu.start {
	transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
	transform-origin: right;
}

.open .line-menu.start {
	transform: rotate(-90deg) translateX(3px);
}

.line-menu.end {
	align-self: flex-end;
	transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
	transform-origin: left;
}

.open .line-menu.end {
	transform: rotate(-90deg) translateX(-5px);
}

.open .line-menu.end:first-child{
	transform: rotate(90deg) translateX(-3px);
}

.mobile-menu-inner{
	padding: 30px;
	background-color: #000;
	text-align: right;
}
.mobile-menu-inner a h4:hover{
	color: #FFC20E;
}

.mobile-menu-inner a h4{
	transition: color 500ms ease;
}

.mobile-menu-inner a:not(:first-child){
	margin-top: 15px;
	display: block;
}
#mobile-menu{
	top: 0;
	left: 0;
	transform: translatey(98px);
}
#mobile-menu .et_pb_code_inner{
	max-height: 0;
	overflow-y: hidden;
	transition: max-height 500ms ease;
}
#mobile-menu.open .et_pb_code_inner{
	max-height: 300px;
}

#main-content p, #main-content h2, #main-content h3, #main-content h4{
	padding: 0;
}

body{
	overflow-x: hidden;
}

.process-spec{
	transform: translateY(87px);
}

.sub-heading{
	line-height: 1.2em;
}

#header-section > div{
	transform: skewX(-13.5deg);
}

.flex-box-footer{
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.flex-box-footer h4{
	letter-spacing: 2px;
	font-size: 14px;
}

#scroll-spy{
	transform: rotate(-90deg);
	color: #fff;
	font-family:'bebas Regular',Helvetica,Arial,Lucida,sans-serif;
	font-size: 12px;
}

.footer-img img{
	max-width: 200px;
	width: 100%;
}

#hire-section > .et_pb_row {
	background-image: url('https://www.splashjetting.co.za/wp-content/uploads/2023/04/words3.png');
	background-size: contain;
	background-position: top 13% center;
}

.custom-section-layout .custom-section-layout-col-1, #header-section .custom-section-layout-col-1, #footer-section .custom-section-layout-col-1{
	margin-right: 0 !important;
}

.custom-section-layout .custom-section-layout-col-2, #header-section .custom-section-layout-col-2, #footer-section .custom-section-layout-col-2{
	width: 79.125% !important;
}

.flex-box-process{
	display: flex;
	gap: 15px;
	position: relative;
	top: -45px;
	padding-left: 30px;
}

.process-row .heading-margin-bottom{
	margin-bottom: 50px;
}

.flex-box-process div{
	position: relative;
}

.flex-box-process div:after{
	color: #fff;
	font-size: 16px;
	position: absolute;
	bottom: -25px;
	left: 0;
}

.flex-box-process div:nth-child(1):after{
	content:"BEFORE";
}

.flex-box-process div:nth-child(2):after,.flex-box-process div:nth-child(3):after{
	content:"DURING";
}

.flex-box-process div:nth-child(4):after{
	content:"AFTER";
}

.process-col{
	transform: translatey(80px);
}

.process-col:nth-of-type(2){
	transform: translatey(160px);
}

.info-container h5{
	font-size: 56px;
	color: #c4910b;
	font-weight: bold;
	letter-spacing: 4px;
}

.white-box{
	border: 10px solid #fff;
	padding: 20px 65px 50px 20px;
	color: #fff;
	font-size: 18px;
	display: inline-block;
}

.bold{
	font-weight: bold;
}

.prefix-heading{
	font-family: 'bebas Regular',Helvetica,Arial,Lucida,sans-serif !important;
}

.custom-even-row-layout .et_pb_column:nth-child(1) {
	flex: 1;
}

.custom-even-row-layout .et_pb_column:nth-child(2) {
	flex: 3;
}

.custom-even-row-layout .et_pb_column:nth-child(3) {
	flex: 2;
}

.custom-even-row-layout .et_pb_column {
	margin-right: 20px; /* Adjust the space between custom columns as needed */
}

.custom-even-row-layout .et_pb_column:last-child {
	margin-right: 0;
}

.custom-subrow{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.main-banner-row-2.custom-subrow{
	align-items: flex-start;
}

.custom-subrow .main-heading{
	font-size: 112px;
	letter-spacing: 12px;
	line-height: 4.4rem;
}

.main-banner-col-1{
	flex: 1 1 60%;
}

.main-banner-col-2{
	flex: 1 1 40%;
}

.jethawk{
	padding-left:12%;
	padding-top:20px;
}

@media(max-width:1460px){
		.jethawk {
		padding-left: 6%;
		padding-top: 22px;
	}
}



.main-banner-row-1 .main-banner-col-2{
	text-align: right;
	line-height: 1.2em;
}

.main-banner-row-1 .main-banner-col-2:before{
	content: "";
	display: block;
	width: 30px;
	height: 5px;
	background-color: #bb8a0a;
	margin-left: auto;
	margin-bottom: 0.6rem;
}

.main-banner-row-1 .line-grey.main-banner-col-2:before{
	content: "";
	display: block;
	width: 30px;
	height: 5px;
	background-color: #58585a;
	margin-left: auto;
	margin-bottom: 0.6rem;
}

.main-banner-row-1 .line-dark.main-banner-col-2:before{
	content: "";
	display: block;
	width: 30px;
	height: 5px;
	background-color: #000;
	margin-left: auto;
	margin-bottom: 0.6rem;
}

.main-banner-row-1 .main-banner-col-2 span{
	color: #000;
	font-weight: bold;
}

.main-banner-row-2 .main-banner-col-1{
	display: flex;
	gap: 80px;
}

.main-banner-row-2 .main-banner-col-2 > div{
	max-width: 30px;
}

.main-banner-row-2 .main-banner-col-2 img{
	width: 100%;
}

.prefix-heading{
	font-size: 22px;
	letter-spacing: 4px;
	padding-bottom: 1.2rem;
	display: inline-block;
}

.main-heading .sub-heading{
	font-size: 72px;
}

.dark{
	color: #000;
}

a.dark, a.light p{
	display: block;
	transition: color 500ms ease;
}

a.dark:hover, a.light p:hover{
	color: #FFC20E;
}

.light{
	color: #fff;
}

.yellow{
	color: #FFC20E;
}

.default-body-text{
	font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
	line-height: 1.2em;
}

.custom-column{
	position: relative;
}

.custom-column:nth-child(2) > div{
	margin-left: auto;
}

.custom-column .info-subheading{
	font-size: 26px;
	color: #fff;
	letter-spacing: 0.15em;
	margin-bottom: 5px;
}

.custom-column .info-subheading  + p{
	color: #fff;
	font-size: 14px;
	line-height: 1.2em;
}

.custom-column:nth-child(1) > div:after{
	display: block;
	content: "";
	width: 100px;
	height: 3px;
	background-color: #000;
	margin-top: 25px;
}

.scroll-spy-current-number{
	color: #000;
	font-weight: bold;
}

.scroll-spy-nav{
	position: relative;
	display: flex;
}

.scroll-spy-nav div{
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #000;
	margin-right: 5px;
}

.scroll-spy-nav div:hover{
	opacity: 0.5;
}

.custom-grid-layout {
	display: grid;
	grid-template-columns: 1fr 5fr;
	grid-template-rows: repeat(2, auto);
	grid-gap: 10px;
	max-width: 350px;
}

.border-light{
	border: 2px solid #fff;
}

.border-dark{
	border: 2px solid #ddad18;
}

.col {
	display: flex;         
	align-items: center;     
	padding: 7px;
}

.col span{
	color: #000;
	font-weight: bold;
}

.col img{
	max-width: 25px;
	vertical-align: middle;
}

.col h4{
	font-size: 22px;
	letter-spacing: 3px;
	color: #fff;
	padding-top: 4px !important;
}

.small{
	justify-content: center;
}

.large.custom-hr{
	display: block;
	font-weight: bold;
}

.large.custom-hr p{
	color: #000;
}

.large.custom-hr p:not(:nth-child(1)):before{
	content: "";
	display: block;
	width: 30px;
	height: 5px;
	background-color: #bb8a0a;
	margin: 0.5rem 0;
}

.heading-margin-bottom{
	margin-bottom: 100px;
}

.info-subheading{
	color: #FFC20E;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 5px;
}

.yellow-line{
	margin: 25px 0;
	max-width: 60px;
	height: 5px;
	background-color: #FFC20E;
	border-color: #FFC20E;
	border-style: solid;
}

.grey-line{
	margin: 25px 0;
	max-width: 60px;
	height: 5px;
	background-color: #58585a;
	border-color: #58585a;
	border-style: solid;
}

.grey-line:before{
	margin: 10px 0;
	width: 30px;
	height: 5px;
	background-color: #231f20;
	content: "";
	display: inline-block;
}

.dark-line:before{
	margin: 10px 0;
	width: 30px;
	height: 5px;
	background-color: #231f20;
	content: "";
	display: inline-block;
}

.yellow-line + .info-subcontainer{
	margin-bottom: 100px;
}

.yellow-line + .info-subcontainer + div{
	line-height: 1.2em;
}

.info-subcontainer ul li{
	line-height: 1.4em;
}

.section-2-subimage{
	z-index: 10;
	position: relative;
	top: 40px;
}

.section-2-subimage img{
	max-width: 230px;
	width: 100%;
}

.section-square-image-overlap{
	display: flex;
	align-items: flex-end;
	position: relative;
	justify-content: space-between;
	z-index: 9;
	max-width: 230px;
	margin-left: auto;
}

.yellow-square{
	width: 100px;
	height: 100px;
	border: 9px solid #FFC20E;
	position: relative;
	left: -55px;
}

.no-line:before{
	display: none !important;
}

.yellow-line-before:before{
	content: "";
	display: block;
	width: 40px;
	height: 5px;
	background-color: #FFC20E;
	margin-left: auto;
	margin-bottom: 10px;
}

.yellow-line-before span{
	font-weight: normal !important;
}

.benefits-row{
	max-width: 1102px;
	margin-bottom: 100px;
}

#hire-row .et_pb_module.et_pb_code.et_pb_code_11.benefits-row{
	margin-bottom: 50px;
}

.benefits-row h2{
	margin-bottom: 0;
}

.hire-row{
	align-items: flex-start;
}

.hire-row .main-banner-col-1{
	flex: 1 1 40%;
}

.hire-row .main-banner-col-2{
	flex: 1 1 60%;
	margin-left: 20%;
}

.grey-square{
	border: 10px solid #58585a;
	padding: 40px 60px;
	text-align: center;
}

.grey-square h4{
	font-size: 22px;
	letter-spacing: 4px;
}

.grey-square p{
	font-size: 12px;
	font-weight: normal;
}

.grey-square .grey-flex{
	display: flex;
}

.grey-square > h4{
	margin-bottom: 20px;
}

.grey-square .grey-flex > div{
	flex: 1 1 50%;
}

.grey-square .grey-flex h4{
	margin-bottom: 10px;
}

.grey-square .grey-flex > div:first-child{
	text-align: right;
	padding-right: 20px;
	border-right: 2px solid #fff;
}

.grey-square .grey-flex > div:last-child{
	text-align: left;
	padding-left: 20px;
}

.mb-0{
	margin-bottom: 0;
}

.custom-row{
	display: flex;
	justify-content: space-between;
}

.contact-row .main-banner-col-1{
	width: fit-content;
	flex: initial;
}

.custom-col > .img-col{
	max-width: 30px;
	margin-left: auto;
}

.custom-col img{
	width: 100%;
}

.custom-col p{
	line-height: 1.2em;
}

.custom-col .info-subcontainer{
	margin-bottom: 20px;
}

.custom-col:nth-child(2) .info-subcontainer{
	text-align: right;
}

@media(max-width: 1460px){
	.custom-section-layout .custom-section-layout-col-1, #header-section .custom-section-layout-col-1, #footer-section .custom-section-layout-col-1{
		width: 15.875%;
	}
	.custom-section-layout .custom-section-layout-col-2, #header-section .custom-section-layout-col-2, #footer-section .custom-section-layout-col-2{
		width: 84.125% !important;
	}
	#header-section{
		background-position: bottom right calc(-1vw);
	}
	#main-section{
		background-size: 69% auto;
	}
}

@media(max-width: 1350px){
	.custom-section-layout .custom-section-layout-col-1, #header-section .custom-section-layout-col-1, #footer-section .custom-section-layout-col-1{
		width: 15.875%;
	}
	.custom-section-layout .custom-section-layout-col-2, #header-section .custom-section-layout-col-2, #footer-section .custom-section-layout-col-2{
		width: 84.125% !important;
	}
	#header-section{
		background-position: bottom right calc(-2vw + 10px);
	}
}

/* Mobile styles (for screens up to 1250px wide) */
@media (max-width: 1300px) {
	.custom-even-row-layout{
		flex-wrap: wrap;
	}
	.custom-even-row-layout .et_pb_column {
		width: 100% !important;
		margin-right: 0 !important;
		flex: 1 1 100% !important;
	}
	.mobile-hide{
		display: none;
	}
	.custom-subrow .main-heading{
		font-size: 80px;
		letter-spacing: 6px;
	}
	.main-heading .sub-heading{
		font-size: 50px;
	}
	.main-banner-row-1 .main-banner-col-2{
		text-align: left;
	}
	.custom-subrow{
		flex-wrap: wrap;
	}
	.custom-subrow > *{
		width: 100%;
		flex: 1 1 100%;
	}
	.main-banner-row-1 .main-banner-col-2:before{
		margin-right: auto;
		margin-left: 0;
	}
	.custom-column:nth-child(2) > div{
		margin-left: 0;
		margin-right: auto;
		margin-top: 7.47%;
	}
	.undo-padding{
		padding-top: 100px !important;
	}
}

@media(max-width:1200px){
	.custom-section-layout{
		min-height: 1px !important;
	}
	.custom-row-layout{
		flex-wrap: wrap;
		min-height: 1px !important;
	}
	.custom-row-layout > div{
		width: 100% !important;
		min-height: 1px !important;
		margin-right: 0 !important;
		padding: 50px !important;
	}
	.custom-section-layout .custom-section-layout-col-1,#header-section .et_pb_column_inner_1{
		display: none;
	}
	.custom-section-layout .custom-section-layout-col-2, #header-section .custom-section-layout-col-2{
		width: 100% !important;
	}
	#header-section .et_pb_column_inner_0{
		width: 100% !important;
		margin: 0 !important;
		padding: 30px 0px;
		background-color: #000;
	}
	.custom-grid-layout{
		max-width: none;
	}
	#header-section{
		background-image: none !important;
		transform: skewX(0);
		padding: 0 50px;
		position: fixed !important;
		background-color: #000 !important;
	}
	#header-section > div{
		transform: skewX(0);
	}
	#header-section .et_pb_image{
		margin-bottom: 0 !important;
	}
	#main-section .undo-margin{
		margin-top: 0 !important;
	}
	#main-section .custom-row-layout > div:first-child{
		padding-top: 134px !important;
	}
}

@media(max-width: 980px){
	.process-spec{
		transform: translatey(0);
	}
	.main-banner-row-1 .line-grey.main-banner-col-2:before{
		content: "";
		display: block;
		width: 30px;
		height: 5px;
		background-color: #58585a;
		margin-left: 0;
		margin-right: auto;
		margin-bottom: 0.6rem;
	}

	.main-banner-row-1 .line-dark.main-banner-col-2:before{
		content: "";
		display: block;
		width: 30px;
		height: 5px;
		background-color: #000;
		margin-left: 0;
		margin-right: auto;
		margin-bottom: 0.6rem;
	}
	.et_pb_icon_0{
		margin-right: 0 !important;
	}
	.section-square-image-overlap{
		margin-left: 0;
		text-align: right;
	}
	.yellow-square {
		width: 90px;
		height: 90px;
		left: -40px;
	}
	.unique-section .et_pb_row_inner.et_pb_equal_columns{
		padding: 50px !important;
	}
	.unique-section .et_pb_row_inner.et_pb_row_inner_3.et_pb_equal_columns{
		background-size: contain;
	}
	.benefits-row{
		margin-bottom: 50px;
	}
	.hire-row .main-banner-col-1,.hire-row .main-banner-col-2{
		flex: 1 1 100%;
		width: 100%;
	}
	.hire-row .main-banner-col-2{
		margin-left: 0;
		margin-top: 80px;
	}
	#footer-section{
		background-color: #FFC20E !important;
		background-image: none !important;
		position: relative !important;
		min-height: 1px !important;
	}
	#footer-section .custom-section-layout-col-2{
		width: 100% !important;
	}
	#footer-section .custom-section-layout-col-2 .et_pb_row_inner.et_pb_equal_columns > div{
		width: 100% !important;
	}
	#footer-section .custom-section-layout-col-2 .et_pb_row_inner.et_pb_equal_columns > div:last-child{
		display: none !important;
	}
	#footer-section .main-banner-row-1{
		justify-content: center !important;
	}
	.contact-row .main-banner-col-1{
		width: 100%;
	}
	#footer-section .contact-row{
		text-align: center;
	}
	#footer-section .flex-box-footer{
		justify-content: center;
	}
	.burger-icon{
		display: block;
	}
}

@media(max-width: 600px){
	#section-3 .et_pb_row_inner_3{
		min-height: 1px;
	}
	#section-3 .prefix-heading{
		padding-bottom: 0.2rem;
	}
	#main-section .main-heading{
		line-height: 3.4rem;
		margin-bottom: 25px;
	}
	.heading-margin-bottom{
		margin-bottom: 25px;
	}
	.unique-section .et_pb_row_inner.et_pb_equal_columns,.custom-row-layout > div{
		padding: 50px 25px !important;
	}
	.yellow-square{
		visibility: hidden;
	}
	.white-box{
		padding: 20px 40px;
	}
	.flex-box-process {
		justify-content: space-between;
		gap: 35px;
		top: 0px;
		padding-left: 0px;
		flex-wrap: wrap;
		margin-top: 50px;
	}
	.benefits-row-first .main-banner-col-2:nth-child(2){
		margin-top: 75px;
	}
	#main-section .custom-row-layout > div:first-child {
		padding-top: 115px !important;
	}
	.sub-heading{
		line-height: 1;
	}
	.process-section .custom-section-layout-col-2 > div:first-child{
		padding-top: 20px !important;
	}
	.grey-square .grey-flex {
		text-align: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 20px;
	}
	.grey-square .grey-flex > div {
		flex: 1 1 100%;
		text-align: center !important;
		padding: 0 !important;
		border: none !important;
	}
	.grey-square{
		padding: 30px !important; 
	}
	#hire-section{
		background-image: none !important;
	}
	#section-4 .et_pb_code_8{
		padding-bottom: 0;
	}
	#hire-section .et_pb_column .et_pb_module{
		margin-bottom: 0;
	}
	.hire-row .main-banner-col-2{
		margin-top: 50px;
	}
	#hire-section .et_pb_row_inner{
		min-height: 1px;
	}
	#hire-section .et_pb_code_11{
		padding-bottom: 0px;
	}
	#main-section{
		margin-bottom: 0;
	}
	#main-section .main-banner-row-2 .main-banner-col-1{
		flex-wrap: wrap;
		gap: 25px;
	}
	#header-section{
		padding: 0;
	}
	#header-section .main-logo{
		padding-left: 25px;
	}
	#header-section .main-logo + .et_pb_code{
		padding-right: 25px;
		margin-bottom: 15px !important; 
	}
	#header-section .burger-icon{
		padding-right: 25px;
		margin-bottom: 0 !important;
	}
	.custom-grid-layout .large:nth-child(4){
		grid-column: 1 / span 3;
	}
	.yellow-line + .info-subcontainer{
		margin-bottom: 50px;
	}
	#header-section .et_pb_column_inner_0{
		padding: 25px 0;
	}
	#header-section{
		max-height: 105px;
	}
	#main-section .custom-row-layout > div:first-child{
		padding-top: 160px !important;
	}
	#footer-section, #footer-section .et_pb_row_inner_7 {
		padding: 0 !important;
	}
	.custom-row{
		flex-wrap: wrap;
	}
}

@media (max-width:425px){
	.flex-box-process{
	    margin-left: auto;
		width: 160px;
		margin-right: auto;
	}
}

@media(max-width: 380px){
	.custom-row > div{
		width: 100%;
		text-align: left !important;
	}
	.custom-row .info-subcontainer{
		text-align: left !important;
	}
	.custom-col > .img-col{
		margin-left: 0;
		margin-right: auto;
	}
}

@media (max-width:340px){
		.unique-section .et_pb_row_inner.et_pb_equal_columns,.custom-row-layout > div {
		padding: 50px 2px !important;
	}

	
}

/*ipad pro cheap fix*/
@media screen and (min-width:1024px) and (max-width:1024px) and (min-height:1366px) and (max-height:1366px){
		.hire-row .main-banner-col-2 {
		flex: 1 1 60%;
		margin-left: unset !important;
	}
}