/* 
 Theme Name:     Construction Pro Divi Child Theme
 Author:         Mark Hendriksen
 Author URI:     https://markhendriksen.com
 Template:       Divi
 Version:        1.0
 Description:    A Divi Child Theme 
*/

/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */

/* #### SERVICES BOX #### */

.services-row .et_pb_blurb:hover:before {
	opacity: 0.8;
	background-color: #F4BD17 !important;
}

/* #### COLLAPSING MOBILE MENU #### */

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	color: #000000;
	/* Icon color */
	font-size: 20px;
	/* Icon size */
}

.et_mobile_menu .menu-item-has-children>a {
	font-weight: 700 !important;
	/* Font weight for parent mobile menu item */
}

/* #### DROPDOWN MENU #### */

.cp-custom-menu .nav li li a {
	border-bottom: 1px solid #e9e9e9;
	/* Line between menu items */
}

.cp-custom-menu .et-menu li li a {
	font-size: 14px;
	/* Font size dropdown menu */
}

/* #### MENU #### */

@media screen and (min-width: 981px) and (max-width: 1100px) {
	.cp-custom-menu .et_pb_menu_inner_container>.et_pb_menu__logo-wrap {
		width: 40% !important;
	}
}

@media screen and (min-width: 1101px) and (max-width: 1150px) {
	.cp-custom-menu .et_pb_menu_inner_container>.et_pb_menu__logo-wrap {
		width: 50% !important;
	}
}

@media screen and (min-width: 981px) {
	.button-one-line .et_pb_button_module_wrapper {
		display: inline-block;
	}
}

.menu-cta-button {
	white-space: nowrap;
}

@media screen and (min-width: 981px) {
	.header-top-bar-column {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.header-top-bar-column {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-menu-column {
		display: flex;
		align-items: center;
	}
}

@media screen and (min-width: 480px) and (max-width: 980px) {
	.header-top-bar-column {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-menu-column {
		display: block;
	}
}

.home-about-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media screen and (min-width: 981px) and (max-width: 1400px) {

	.custom-row-width,
	.custom-special-row-width .et_pb_row {
		width: 95%;
		max-width: 95%;
	}
}

.services-row .et_pb_blurb:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgb(255 179 25 / 0%);
	top: 0px;
	left: 0px;
	transition: all 0.2s ease !important;
}

/* ########## DROPDOWN MENNU ########### */

.cp-custom-menu.et_pb_menu .et-menu-nav>ul ul {
	padding: 0px 0 !important;
	border-radius: 8px;
}

.cp-custom-menu .nav li li {
	padding: 0 0px !important;
}

.cp-custom-menu .nav li ul {
	width: 240px;
}

.cp-custom-menu .et-menu li li a {
	width: 240px !important;
	padding: 6px 20px;
	margin-top: 2px;
}

.cp-custom-menu .nav li li:last-child a {
	border-bottom: 1px solid rgba(255, 255, 255, 0) !important;
}

.cp-custom-menu .nav li li ul {
	top: -4px !important;
}

/* #### Collaping Mobile Menu #### */

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	border-radius: 50%;
	padding: 3px;
}

ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after {
	content: '\32';
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon {
	text-align: center;
	opacity: 1;
}


/* NEW CUSTOM CSS */
.my-custom-col:hover>.my-custom-num {
	opacity: 1;
}

.product-blurb .et_pb_blurb_content {
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: end;
	height: 100%;
}

.product-blurb .et_pb_module_header {
	padding-bottom: 0px !important;
}

.product-blurb .et_pb_blurb_container {
	background: white;
	padding: 10px !important;
	border-radius: 7px;
	width: 100%;
	transition: all 0.3s ease-in-out;
}

.product-blurb:hover .et_pb_blurb_container {
	background: #000000;
}

.process-steps ul {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
}

.process-steps ul li {
	position: relative;
	padding-left: 90px;
	padding-bottom: 75px;
}

.process-steps ul li:last-child {
	padding-bottom: 0px;
}

.process-steps ul li p {
	border-bottom: 1px solid #ececec;
	padding-bottom: 10px !important;
}

.process-steps ul li::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	width: 56px;
	height: 56px;
	line-height: 56px;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid #F4BD17;
	color: #1f1f1f;
	z-index: 2;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.process-steps ul li::after {
	content: "";
	position: absolute;
	left: 30px;
	top: 42px;
	width: 2px;
	height: calc(100% - 42px);
	background: linear-gradient(to bottom, #fadf9c, #f7c851);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.08s linear, background 0.08s ease;
	opacity: 1;
}

.process-steps ul li.is-filling::after {
	transform: scaleY(var(--fill, 0));
}

.process-steps ul li:last-child::after {
	display: none;
}

.process-steps ul li.step-1-active::after {
	background: linear-gradient(to bottom, #fbe7b5, #f7c851);
}

.process-steps ul li.step-2-active::before {
	background: #f7c851;
	border-color: #f7c851;
}

.process-steps ul li.step-2-active::after {
	background: linear-gradient(to bottom, #f7c851, #F4BD17);
}

.process-steps ul li.step-3-active::before {
	background: #F4BD17;
	border-color: #F4BD17;
}

.process-steps h6 {
	font-size: 24px !important;
}

.expertise-blurb, 
.expertise-blurb .et_pb_blurb_content {
    position: relative;
    overflow: visible !important;
}

.expertise-blurb .et_pb_main_blurb_image {
	position: absolute;
	top: -50px;
	right: -50px;
	margin-bottom: 0 !important;
	z-index: 10;
	transition: all 0.3s ease-in-out;
}

.expertise-blurb:hover .et_pb_main_blurb_image {
	transform: translateY(-6px) rotateY(360deg);
}

/* ----- Contact Form  ----- */
form.wpcf7-form {
	width: 100%;
	float: left;
	background-color: #fff;
	padding: 20px;
	border-radius: 12px;
}

form.wpcf7-form .custom-row {
	width: 100%;
	float: left;
	display: flex;
	gap: 10px;
}

form.wpcf7-form .custom-row.margin-top-20 {
	margin-top: 20px;
}

form.wpcf7-form .custom-col-12 {
	width: 100%;
	float: left;
	margin-bottom: 15px;
}

form.wpcf7-form .custom-col-6 {
	width: 50%;
	float: left;
	margin-bottom: 15px;
}

form.wpcf7-form .flex-direction-column {
	flex-direction: column;
}

form.wpcf7-form .blue-bg {
	background: #fbe7b5;
	padding: 20px;
	border-radius: 4px;
	margin-bottom: 20px;
}

form.wpcf7-form .blue-bg label {
	color: #fff !important;
	font-weight: 500;
	font-size: 22px;
}

form.wpcf7-form .custom-col-12 h4 {
	font-weight: 600;
	font-size: 26px;
	padding: 0;
	margin-top: 20px;
}

form.wpcf7-form .custom-col-12 .require-text {
	font-size: 22px;
	color: red !important;
}

form.wpcf7-form .blue-bg h6 {
	color: #fff !important;
	font-weight: 500;
	font-size: 20px;
	padding: 0;
}

form.wpcf7-form label {
	font-weight: 500;
	font-size: 18px;
}

form.wpcf7-form input[type="radio"] {
	width: 25px;
	height: 25px;
	margin-right: 10px;
}

form.wpcf7-form .checkbox-col .wpcf7-list-item {
	margin-left: 0px;
	margin-right: 20px;
}

form.wpcf7-form .checkbox-col .wpcf7-list-item label {
	display: flex;
	align-items: center;
	margin-top: 10px;
}

form.wpcf7-form input,
form.wpcf7-form select {
	height: 50px;
	width: 100%;
}

form.wpcf7-form textarea {
	height: 100px;
	width: 100%;
	padding-top: 10px;
}

form.wpcf7-form input,
form.wpcf7-form textarea,
form.wpcf7-form select {
	background: #fff;
	border-radius: 20px;
	border: 1px solid #e0e0e0;
	padding-left: 20px;
	transition: all ease 0.6s;
	-moz-transition: all ease 0.6s;
	-webkit-transition: all ease 0.6s;
	-o-transition: all ease 0.6s;
}

form.wpcf7-form input::-webkit-input-placeholder,
form.wpcf7-form textarea::-webkit-input-placeholder {
	color: #3f3f3f;
}

form.wpcf7-form input::-moz-placeholder,
form.wpcf7-form textarea::-moz-placeholder {
	color: #3f3f3f;
	opacity: 1;
}

form.wpcf7-form input:-ms-input-placeholder,
form.wpcf7-form textarea:-ms-input-placeholder {
	color: #3f3f3f;
}

form.wpcf7-form input::placeholder,
form.wpcf7-form textarea::placeholder {
	color: #3f3f3f;
	opacity: 1;
	transition: all 0.3s ease-in-out;
}

form.wpcf7-form input:focus,
form.wpcf7-form textarea:focus {
	border: 1px solid #1f1f1f;
}

form.wpcf7-form input:focus::placeholder {
	color: #1f1f1f;
}

form.wpcf7-form .field-required {
	color: #ff0000;
}

form.wpcf7-form .wpcf7-submit {
	width: auto;
	color: #1f1f1f;
	border: 1px solid #F4BD17;
	border-radius: 30px;
	letter-spacing: 0px;
	font-size: 15px;
	background-color: #F4BD17;
	padding: 10px 20px;
	transition: all 300ms ease-in-out 0ms;
	cursor: pointer;
}

form.wpcf7-form .wpcf7-submit:hover {
	color: #F4BD17;
	background-color: transparent;
	border: 1px solid #F4BD17;
	transform: translateY(-2px);
}

.wpcf7 form.sent .wpcf7-response-output {
	display: inline-block;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	float: left;
}

.bulk-blurb ul {
	list-style: none;
	padding: 0;
}

.bulk-blurb ul li {
	position: relative;
	padding-left: 25px;
	margin-bottom: 4px;
}

.bulk-blurb ul li::before {
	content: "▣";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: bold;
}

.bulk-blurb img {
	transition: all 0.3s ease-in-out;
}

.bulk-blurb:hover img {
	transform: scale(1.05);
}

.footer-menu .et-menu {
	flex-direction: column;
}

.d-flex {
	display: flex;
	justify-content: center;
	align-items: center;
}

.align-end {
	display: flex;
	align-items: end;
}

.cvbm-breadcrumb {
	font-size: 15px;
	color: #ffffff;
}

.cvbm-breadcrumb a {
	color: #ffffff;
	text-decoration: none;
	transition: color 0.3s ease;
}

.cvbm-breadcrumb a:hover {
	color: #f4bd17;
}

.cvbm-breadcrumb .breadcrumb-separator {
	margin: 0px 6px;
}

.cvbm-breadcrumb .breadcrumb-current {
	color: #f4bd17;
	font-weight: 500;
}

.bark-products-list ul,
.colored-products-list ul,
.compost-products-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	columns: 3;
}

.bark-products-list ul li,
.colored-products-list ul li,
.compost-products-list ul li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 6px;
}

.bark-products-list ul li::before,
.colored-products-list ul li::before,
.compost-products-list ul li::before {
	content: "";
	background: url("./images/checklist_square.png") no-repeat center center;
	width: 20px;
	height: 20px;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 0;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.popup-trigger {
	cursor: pointer;
}

.product-grid .product-blurb .et_pb_main_blurb_image {
	display: none;
}

#productPopup {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999999;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s ease;
}

#productPopup.active {
	opacity: 1;
	visibility: visible;
}


.popup-inner {
	position: relative;
	max-width: 460px;
	width: 90%;
	display: flex;
	justify-content: center;
}

#popup-img {
	width: 100%;
	height: auto;
}

#popup-title {
	background: #fff;
	color: #000;
	padding: 12px 20px;
	margin-bottom: 15px;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	position: absolute;
	bottom: 0;
	border-radius: 8px;
}

.popup-close {
	position: absolute;
	top: -35px;
	right: 0;
	color: #fff;
	font-size: 30px;
	cursor: pointer;
}

/* Calculator wrapper */

/* Label text */
.material-calculator label,
.material-calculator strong {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	color: #1f1f1f;
}

/* Input wrapper */
.material-calculator input {
	width: 100%;
	height: 48px;
	border-radius: 10px;
	border: none;
	padding: 0 90px 0 16px;
	font-size: 16px;
	outline: none;
	background: #fff;
}

/* Field container */
.material-calculator .field {
	position: relative;
	margin-bottom: 18px;
}

/* Unit badge on right */
.material-calculator .unit {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 80px;
	background: #f1f1f1;
	border-radius: 0 10px 10px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
}

/* Result box */
.material-calculator .mc-result {
	margin-top: 8px;
}

.material-calculator .mc-result .result-box {
	position: relative;
	height: 48px;
	display: flex;
	align-items: center;
	padding-left: 16px;
	font-size: 16px;
	font-weight: 600;

	/* Glass effect */
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Result unit */
.material-calculator .mc-result .result-unit {
	position: absolute;
	right: 0;
	height: 100%;
	width: 120px;
	background: #f1f1f1;
	border-radius: 0 10px 10px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
}


@media (max-width: 991px) {
	.align-end {
		flex-direction: column;
		align-items: start;
	}

	.d-flex {
		flex-direction: column;
	}

	.footer-menu .et_pb_menu__menu {
		display: block !important;
	}

	.footer-menu .et_mobile_nav_menu {
		display: none !important;
	}

	.footer-menu .et_pb_menu__wrap {
		justify-content: flex-start !important;
	}

	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bark-products-list ul,
	.colored-products-list ul,
	.compost-products-list ul {
		columns: 2;
	}
}

@media (max-width: 575px) {
	form.wpcf7-form .custom-row {
		flex-direction: column;
		gap: 0px;
	}

	form.wpcf7-form .custom-col-6 {
		width: 100%;
	}

	form.wpcf7-form {
		padding: 0px;
	}

	.bark-products-list ul,
	.colored-products-list ul,
	.compost-products-list ul {
		columns: 1;
	}

	.product-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}