/*Custom CSS Here*/



/* slick slider captions */


.image-gallery .slick-arrow {
  	height: 21px !important;
    width: 45px !important;
    border: none !important;
    text-indent: -9999px !important;
    border-radius: 0 !important;
    padding: 0 !important;
    bottom: -82px;
    top: auto !important;
    left: calc(50% + 160px);
    transform: translateX(-50%);
    z-index: 2 !important;
    transition: 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(https://dev.netsearch.com.au/climabatts/wp-content/uploads/2026/04/arrow-right-blue.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}

.image-gallery .slick-arrow.slick-prev {
	background-image: url(https://dev.netsearch.com.au/climabatts/wp-content/uploads/2026/04/arrow-left-blue.svg) !important;
	left: auto;
	right: calc(50% + 112px);
}

.image-gallery .slick-arrow:hover {
	opacity: 0.7;
}

.caption .caption-holder {
    transition: 1s ease;
    transform: translateY(100px);
    opacity: 0;
    visibility: hidden;
}

.elementor-element-edit-mode.caption .caption-holder,
.caption.animate .caption-holder {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.caption-holder {
    margin: 0 -150px;
    width: auto;
}

.caption-holder.elementor-element-edit-mode {
    margin: 0;
}

/* process line animation */
.section-process:after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 12.4%;
    width: 0;
    height: 1px;
    background: #FF661F;
    transition: width 2s ease;
}

/* active state */
.section-process.active:after {
    width: 75.2%; /* 100% minus left+right (12.4% + 12.4%) */
}


.step-box:after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    height: 12px;
    width: 12px;
    border-radius: 100px;
    background: #FF661F;
    transition: transform 0.7s ease;
}

/* visible state */
.step-box.active:after {
    transform: translateX(-50%) scale(1);
}

@media (max-width: 1024px) {
	.image-gallery .slick-arrow {
		bottom: -64px;
	}
}

@media (max-width: 767px) {
	.step-box:after {
		top: 0;
		left: -22px;
		top: 50%;
		bottom: auto;
	}
	
	.step-box:nth-child(1):after {
		top: 0;
	}
	
	.step-box:last-child:after {
		top: auto;
		bottom: 0;
	}
	
	.section-process:after {
		top: 13px;
		width: 1px !important;
		height: auto;
		bottom: 13px;
		left: 12px;
	}
}