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

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

body,html{
	overflow-x: hidden;
}

.breadcrumb__2024 a, .breadcrumb__2024{
	font-family: 'Bebas Neue', display;
	color: #1b1b1b;
	font-size: 16px;
	letter-spacing: 1px;
}

.pa-gallery-load-more img {
	object-fit: cover;
}

.et_builder_inner_content.et_pb_gutters3.has_et_pb_sticky {
	overflow: hidden !important;
}

.direct__contact{
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
}

#DirectContact2{
	color: #1b1b1b;
	transition: color 250ms ease;
	font-size: 24px;
	font-family: 'Bebas Neue';
}

#DirectContact2{
	display: none;
	width: 215px;
	text-align: center;
}

#DirectContact2.active{
	display: inline-block;
}

#DirectContact2:hover{
	color: #F9A61A;
}

#DirectContact.hidden{
	display: none;
}

.no__padding h2, .no__padding h3{
	padding-bottom: 0;
}

.main__navigation__row{
	display: flex;
	align-items: center;
}

.main__navigation__row img{
	transition: max-width 300ms ease;
	pointer-events: none;
}

.et_pb_sticky--top .main__navigation__row img{
	max-width: 80%;
}

.company__button__container > div:last-child .company__button:hover{
	color: #000;
	background-color: #F9A61A;
}

#menu-primary-navigation-right.et-menu>li:last-child a{
	color: #FFF !important;
}

.banner__slider{
	display: flex;
	align-items: center;
}

.banner__slider > div{
	width: 50%;
}

.banner__slider h2{
	font-size: 90px;
	color: #FFF;
	max-width: 500px;
	margin-bottom: 5px;
	padding-right: 50px;
}

.banner__slider .banner__description{
	max-width: 500px;
	color: rgba(255,255,255,0.75);
	margin-bottom: 50px;
}

.banner__description > p {
	padding-right: 50px;
}

.banner-row {
	display: flex !important;
	flex-wrap: wrap;
}

.banner-column {
	display: block !important;
}

.banner__button a{
	color: #1B1B1B;
	background-color: #F9A61A;
	font-family: 'Bebas Neue', display;
	font-size: 21px;
	padding: 10px 25px 8px;
	letter-spacing: 0.5px;
	border: 1px solid transparent;
	transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease;
}

.banner__button a:hover{
	background-color: #1b1b1b;
	color: #F9A61A;
	border-color: #F9A61A;
}

.banner__image{
	transform: translatex(-10%);
}

.image__grid{
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 10px;
}

.image__grid img{
	width :100%;
	height: 100%;
	object-fit: cover;
}

.category__row > div{
	display: flex;
	align-items: center;
	justify-content: center;
}

.category__row > div:hover h3{
	color: #F9A61A !important;
}

.category__row > div h3{
	transition: color 250ms ease;
}

.category__row > div:hover::after, .category__row > div:hover::before{
	opacity: 1;
	scale: 1;
}

.category__row > div::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 85%;
	height: 85%;
	background-color: #000;
	border: 4px solid #FFF;
	scale: 0;
	transform-origin: 0 0;
	transition: scale 500ms ease-in-out;
}

.category__row > div::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	opacity: 0;
	transition: opacity 500ms ease;
}

.flex__container{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.slider__module .et_parallax_bg {
	background-position: center;
	background-attachment: fixed !important;
}

.slider__module.et_pb_slider:hover .et-pb-arrow-prev{
	left: 0;
}

.slider__module.et_pb_slider:hover .et-pb-arrow-next{
	right: 0;
}


.slider__module .et-pb-arrow-prev{
	transform: scaleX(-1);
}

.slider__module .et-pb-arrow-prev:before, .slider__module .et-pb-arrow-next:before{
	content: url(https://ecccs.co.za/wp-content/uploads/2024/10/arrow.gif);
}

.contact__item{
	display: flex;
	align-items: center;
	gap: 20px;
}

.contant__container{
	display: grid;
	column-gap: 30px;
	row-gap: 70px;
}

.adjust__top img{
	margin-top: -5px;
}

.span__2{
	grid-column: 1/ span 2;
}

.contact__image{
	background-color: #000;
	border-radius: 50%;
	width: 70px;
	flex-shrink: 0;
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	align-self: flex-start;
}

.contact__image::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 75%;
	height: 75%;
	border: 2px solid #F9A61A;
	border-radius: 50%;
}

.contact__image img{
	filter: brightness(0) saturate(100%) invert(85%) sepia(45%) saturate(5834%) hue-rotate(349deg) brightness(107%) contrast(95%);
	max-width: 25px;
}

.contact__content{
	align-self: flex-end;
}

.contact__content h4{
	padding-bottom: 7px;
	font-size: 30px;
}

.contact__content a{
	color: #1b1b1b;
	font-family: 'Bebas Neue', display;
	font-size: 18px;
	letter-spacing: 1px;
	line-height: normal;
}

.contact__form .contact__row{
	display: flex;
	margin-bottom: 20px;
	gap: 20px;
}

.contact__form .contact__row p{
	width: 100%;
}

.contact__form .contact__row .contact__item input, .contact__form .contact__row .contact__item textarea, .contact__form .contact__row .contact__item{
	width: 100%;
	font-family: 'Bebas Neue', display;
	letter-spacing: 3px;
	font-size: 17px;
	color: #FFF;
	font-weight: 400;
} 

.contact__form .contact__row .contact__item input, .contact__form .contact__row .contact__item textarea{
	padding: 18px;
	background-color: #000;
}

.contact__form .contact__row .contact__item textarea{
	height: 150px;
	resize: vertical;
}

.contact__form .contact__row .contact__item input::placeholder, .contact__form .contact__row .contact__item textarea::placeholder{
	color: #FFF;
}

.contact__row:has(.contact__item--submit){
	justify-content: flex-end;
}

.contact__item--submit input{
	color: #1B1B1B;
	background-color: #F9A61A;
	font-family: 'Bebas Neue', display;
	font-size: 21px;
	padding: 10px 25px 8px;
	letter-spacing: 0.5px;
	border-color: #F9A61A;
	border-style: solid;
	transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease;
}

.contact__item--submit input:hover{
	color: #F9A61A;
	background-color: #000;
	border-color: #F9A61A;
}

.wpcf7-spinner{
	position: absolute;
}

#Whatsapp .et_pb_icon_wrap {
	aspect-ratio: 1/1;
	width: 40px;
}

.all-products{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.product-item{
	position: relative;
	text-align: center;
}

.product-item.hidden{
	display: none;
}

.product-item::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	background-color: rgba(255,255,255,0.5);
	opacity: 0;
	transition: opacity 250ms ease;
}

#all-products > p {
	margin: 0 50px;
}

@media ( hover : hover ){
	.product-item:hover::after{
		opacity: 1;
		backdrop-filter:blur(3px);
	}
	.product-item:hover .product__details{
		opacity: 1;
		bottom: 50px;
	}
}

.product__details{
	opacity: 1;
	bottom: 50px;
}

.product-item img{
	min-height: 450px;
	max-height: 450px;
	object-fit: cover;
}

.product__details{
	position: absolute;
	width: 100%;
	bottom: 25px;
	z-index: 5;
	padding: 0 30px;
	opacity: 0;
	transition: opacity 250ms ease, bottom 250ms ease;
}

.product__details a{
	color: #1b1b1b;
}

.product-categories{
	border-top: 2px solid #1b1b1b;
	border-bottom: 2px solid #1b1b1b;
	padding: 7px 0 1px;
	display: inline-block;
	margin-bottom: 20px;
}

.product-categories a{
	font-family: 'Bebas Neue', display;
	font-size: 26px;
	color: #1b1b1b;
	display: inline-block;
	pointer-events: none;
}

.product-title{
	font-size: 46px;
	padding-bottom: 0;
	margin: 15px 0 10px;
}

.product-title a{
	display: block;
}

.product__button a{
	color: #F9A61A;
	background-color: #000;
	min-width: 175px;
	text-align: center;
}

.product-button a{
	border: 2px solid #000;
	font-family: 'Bebas Neue', display;
	font-size: 22px;
	display: inline-block;
	padding: 5px 20px 2px;
	transition: color 250ms ease, background-color 250ms ease;
}

.product__button .company__button:hover{
	color: #000;
	background-color: #F9A61A;
}

.et-menu.et-menu.et-menu.et-menu.et-menu>li:last-child a{
	color: #FFF !important;
}

.product-button a:hover{
	color: #FFF;
	background-color: #000;
}

.product-price{
	font-family: 'Bebas Neue', display;
	font-size: 46px;
	color: #1b1b1b;
	margin-bottom: 50px;
}

.product-price sup{
	bottom: 0.35em;
	font-size: 65%;
}

.ajax__loader{
	opacity: 0;
	width: 101%;
	height: 101%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	justify-content: center;
	background-color: #FFF;
	align-items: flex-start;
	padding-top: 50px;
	z-index: 100;
	pointer-events: none;
}

.ajax__loader.active{
	opacity: 1;
}

.ajax__loader img{
	width: 100%;
	max-width: 60px;
}

.company__button__container{
	display: flex;
	justify-content: center;
}

.company__button{
	color: #1B1B1B;
	background-color: #F9A61A;
	font-family: 'Bebas Neue', display;
	font-size: 30px;
	padding: 17px 25px 12px;
	display: inline-block;
	text-align: center;
	border: 1px solid transparent;
	transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease;
}

.company__button:hover{
	color: #F9A61A;
	background-color: #000;
	border-color: #F9A61A;
}

.search-box{
	position: relative;
	margin-bottom: 30px;
}

#search-input{
	width: 100%;
	background-color: rgba(0,0,0,0.105);
	color: #1b1b1b;
	font-weight: 700;
	border: none;
	padding: 12px;
	font-size: 14px;
}

#search-input::placeholder{
	color: #1b1b1b;
}

.search-box img{
	max-width: 22px;
	width: 100%;
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translatey(-50%);
}

.product-categories-list{
	position: relative;
}

.product-categories-list ul{
	list-style: none;
	padding: 0;
}

.product-categories-list a{
	color: #1b1b1b;
	font-size: 14px;
	font-weight: 700;
}

.product-categories-list a.active{
	color: #F9A61A;
}

.mobile__selected{
	padding: 10px 15px;
	font-family: 'Bebas Neue', display;
	font-size: 24px;
	color: #FFF;
	background-color: #1b1b1b;
	display: none;
	justify-content: space-between;
	align-items: center;
}


.mobile__selected img {
	width: 100%;
	max-width: 30px;
	filter: invert(1);
}

.product-categories-list ul li{
	padding-top: 12px;
	padding-bottom: 25px;
}

.product-categories-list ul li a:hover {
	color: #F9A61A;
	transition: color 250ms ease;
}

.product__header{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
}

.product__header .product-price{
	margin-bottom: 0;
}

.product__header h2, .product__header p{
	font-size: 74px;
}

.product-description{
	margin-top: 40px;
	margin-bottom: 70px;
	font-size: 20px;
	color: #1b1b1b;
}

.review-section{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-rating-stars .star-rating{
	float: none;
}

.woocommerce .star-rating{
	font-size: 1.5em;
}

.woocommerce .star-rating span::before{
	color: #1b1b1b;
}

.meta__header{
	display: flex;
	align-items: center;
}

.meta__tab{
	padding: 20px;
	cursor: pointer;
	transition: background-color 250ms ease;
}

.meta__tab:first-child{
	display: none !important;
}

.meta__tab.active{
	background-color: rgba(0,0,0,0.1);
}

.meta__tab span{
	font-family: 'Bebas Neue', display;
	font-size: 24px;
}

.meta__body{
	background-color: rgba(0,0,0,0.1);
	padding: 20px;
}

.meta__inner{
	background-color: #FFF;
	border-radius: 5px;
	padding: 30px;
}

.meta__item{
	display: none;
}

.meta__item.active{
	display: block;
}

#toggle-review-form{
	color: #FFF;
	background-color: #000;
	font-family: 'Bebas Neue', display;
	font-size: 24px;
	padding: 10px 25px 10px;
	border: none;
	display: inline-block;
	text-align: center;
}

.other-products{
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.et_pb_grid_item {
	width: 24.25% !important;
	margin-right: 1% !important;
	margin-bottom: 1% !important;
}

.hamburger-icon > span {
	background-color: white;
	height: 4px;
	width: 45px;
	display: block;
	margin: 5px 0;
}

.hamburger-icon > span:first-child {
	background-color: #F9A61A !important;
}

#MobileMenu .mobile_menu_bar::after{
	content: "";
	width: 26px;
	height: 4px;
	background-color: #F9A61A;
	position: absolute;
	top: 11px;
	pointer-events: none;
	left: 7px;
	border-radius: 100px;
}

.et_pb_image_1_tb_header {
	left: 0 !important;
	transform: translate(0, -50%) !important;
}

.et_mobile_menu {
	right: 0;
	left: auto;
	width: 50%;
	border-top: 0;
}

#review-form{
	margin-top: 30px;
}

#review-form h3{
	font-size: 30px
}

#review-form input:not([type="submit"]),#review-form textarea, #review-form select{
	padding: 14px;
	width: 100%;
	font-family: 'Bebas Neue', display;
	letter-spacing: 1px;
	font-size: 14px;
	color: #1b1b1b;
	font-weight: 400;
}

#review-form input::placeholder, #review-form textarea::placeholder{
	color: #1b1b1b;
}

#review-form input[type="submit"]{
	color: #FFF;
	background-color: #000;
	font-family: 'Bebas Neue', display;
	font-size: 24px;
	padding: 10px 25px 10px;
	border: none;
	display: inline-block;
	text-align: center;
}

.wpcf7-response-output {
	border: none !important;
}

#BannerSection {
	display: flex;
}

@media (max-width: 991px){
	#RefRow#RefRow {
		margin-top: 0 !important;
	}
	.banner__image{
		transform: translatex(0);
		max-width: 350px;
	}
	#RefRow .banner__column > .banner__image {
		margin: 0 auto;
	}
	.category__row > div{
		min-height: 300px;
	}
	.flex__container{
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 10px;
	}
	.banner__slider{
		flex-wrap: wrap;
		gap: 60px;
	}
	.banner__slider h2{
		font-size: 45px;
		max-width: 100%;
	}
	#RefRow .banner__column > h2 {
		text-align: center;
	}
	.banner__slider > div{
		width: 100%;
	}
	#RefRow .banner__description {
		margin: 0 auto;
	}
	#RefRow .banner__description > p {
		padding-right: 0;
		text-align: center;
	}
	.other-products .product-item::after{
		display: none !important;
	}
	#review-form{
		text-align: center;
	}
	.product__header h2, .product__header p{
		font-size: 48px;
	}
	.other-products{
		grid-template-columns: 1fr 1fr;
		gap: 15px;
	}
	.review-section{
		flex-direction: column;
		gap: 30px;
	}
	.other-products .product-item img {
		min-height: 200px;
		max-height: 200px;
		object-fit: cover;
	}
	.other-products .product__details{
		display: none;
	}
	.product-description{
		margin-top: 0;
	}
	.mobile__selected{
		display: flex;
		margin-bottom: 20px;
	}
	.product-item:hover .product__details{
		opacity: 1;
		bottom: 0 !important;
	}
	.product-item:hover::after{
		opacity: 0 !important;
	}
	.company__button__container{
		margin-top: 70px;
		flex-direction: column;
		align-items: center;
	}
	.company__button__container > div:last-child{
		margin-left: 0;
	}
	#project-list{
		margin-top: 0;
	}
	.cat__list, #project-list{
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		z-index: 10;
		background-color: #FFF;
		display: none;
	}
	.cat__list.active, #project-list.active{
		display: block;
		padding: 15px 0;
	}
	.project-categories-list .mobile__selected{
		margin-inline: 0;
	}
	.project-categories-list #project-list{
		padding: 30px 0 5px;
	}
	.product-categories-list ul{
		padding-bottom: 12px;
	}
	.all-products{
		grid-template-columns: 1fr;
	}
	.product-item {
		text-align: left;
	}
	.product-item img {
		min-height: 300px;
		max-height: 310px;
		object-fit: cover;
	}
	.product__details{
		position: relative;
		bottom: 0;
		opacity: 1;
/* 		padding: 60px 50px 10px; */
		padding-bottom: 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 30px;
	}
	.product-title{
		font-size: 52px;
	}
	.product-price{
		margin-bottom: 0;
		font-size: 52px;
	}
	.product-price sup{
		bottom: .45em;
	}
	.product-title-categories {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.product-categories{
		margin-bottom: 30px;
		padding: 4px 0 1px;
		display: none;
	}
	.product-categories a{
		font-size: 28px;
	}
	.company__title{
		display: none;
	}
	.company__container{
		max-height: none;
	}
	.product-button a{
		font-size: 26px;
		background-color: #000;
		color: #FFF;
		padding: 20px 20px 16px;
	}
	#MobileMenu .et_pb_menu__logo{
		max-width: 160px;
	}
	.contact__image{
		background-color: #000;
		border-radius: 50%;
		width: 50px;
		flex-shrink: 0;
		aspect-ratio: 1/1;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		align-self: flex-start;
	}

	.contact__content h4{
		padding-bottom: 7px;
		font-size: 24px;
	}

	.contact__content a{
		color: #1b1b1b;
		font-family: 'Bebas Neue', display;
		font-size: 16px;
		letter-spacing: 1px;
		line-height: normal;
	}

	.contact__form .contact__row{
		flex-wrap: wrap;
	}
	.contact__form{
		margin-top: 30px;
	}
	.contant__container{
		row-gap: 35px;
	}
	.main__navigation__row img {
		max-width: 150px !important;
	}
}

@media(max-width: 1560px){
	.contant__container{
		row-gap: 50px;
	}
	.contact__item{
		grid-column: 1 / span 2;
	}
	.category__row > div h3{
		font-size: 26px !important;
		letter-spacing: 3px;
	}
}

@media(max-width: 1440px){
	.product-item img{
		min-height: 400px;
		max-height: 400px;
	}
	.product-title{
		font-size: 36px;
	}
	.product-categories a{
		font-size: 20px;
	}
/* 	#RefRow {
		margin-top: 280px !important;
	} */
}

@media (max-width:650px) {
	.contant__container {
		display: flex;
		flex-direction: column;
	}
	.product__details {
		flex-wrap: wrap;
	}
	.product-title {
		text-align: center;
	}
	.product-title-categories {
		order: 1;
	}
	.product-price {
		order: 2;
	}
	.product-button {
		order: 3;
		flex-basis: 100%;
	}
}

@media (max-width:600px) {
	.product-price {
		font-size: 42px;
	}
	.product-title {
		font-size: 26px;
	}
	.product-button a {
		font-size: 16px;
		padding: 10px 20px 6px;
	}
}

@media (max-width:768px) {
	.et_pb_grid_item {
		width: 50% !important;
		margin-right: 0 !important;
		margin-bottom: 0 !important;
	}
	.cat__list.active{
		display: block;
		padding: 15px 50px;
	}
	#project-list.active{
		display: block;
		padding: 30px 0 5px;
	}
	.product-item {
		padding: 0 30px;
	}
}

@media (max-width:450px) {
	.product-price {
		font-size: 30px;
	}
	.product__details {
		flex-direction: column;
		gap: 10px;
	}
}


@media (max-width:768px) {
	.computed__row {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.images__column {
		order: -1;
	}
	.search-box, .mobile__selected{
		margin-inline: 50px;
	}
	.category__row > div {
		width: 50% !important;
		min-height: 170px;
	}
	.category__row > div h3 {
		font-size: 20px !important;
	}
}
/* @media all and (max-width:980px) and (min-width: 767px) {
.pa-gallery-load-more .et_pb_gallery_item:nth-child(3n) {
margin-right: 0 !important;
}
} */
@media all and (max-width:980px) {
	.et_pb_column .et_pb_grid_item.last_in_row {
		margin-right: 0 !important;
	}
	.et_pb_sticky--top .main__navigation__row img{
		max-width: 100px !important;
	}
	.banner__slider {
		margin-top: 40px;
		margin-bottom: 40px;
	}
}
@media all and (min-width:981px) {
	.pa-gallery-load-more .et_pb_gallery_item:nth-child(4n) {
		margin-right: 0 !important;
	}
}
@media all and (max-width: 768px) {
	.et_pb_column .et_pb_grid_item {
		padding-bottom: 7px !important;
		padding-right: 3.5px !important;
	}
	.et_pb_column .et_pb_grid_item:nth-child(even) {
		padding-right: 0 !important;
		padding-left: 3.5px !important;
	}
}

@media(max-width: 1650px){
	#PaddingRow{
		padding-left: 0 !important;
	}
}