/*
 * Servcies Widget CSS
 * */

.riverrockpools-services-carousel-wrap{
/* 	overflow-x: clip; */
}

.riverrockpools-services-carousel {
	cursor: grab;
	opacity: 0;
	visibility: hidden;
}

.riverrockpools-services-carousel.slick-initialized{
	opacity: 1;
	visibility: visible;
}

.riverrockpools-services-carousel .slick-slide{
	margin: 0 15px;
}

.riverrockpools-services-carousel .slick-list{
	margin: 0 -15px;
}

.at-services-box{
	--box-padding: 30px;
	position: relative;
	background: linear-gradient(180deg, transparent calc(0% + 100px), #FFF 0%);
	overflow: hidden;
}

.at-services-box .services-image{
	padding: 0 var(--box-padding);
}

.at-services-box .services-image img{
	aspect-ratio: 1 / 0.7;
    object-fit: cover;
	clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0% 20%);
}

.at-services-box .services-header{
	padding: var(--box-padding);
}

.at-services-box .services-header .service-title h3{
	font-size: 24px;
}

.at-services-box .services-header .service-content{
	margin-top: 20px;
}

.at-services-box .services-content{
	position: relative;
	background-color: var(--e-global-color-primary);
	padding: calc(var(--box-padding) * 2) var(--box-padding) var(--box-padding);
}

.at-services-box .services-content:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-color: #FFF;
	mask-image: url("../images/top-wave-shape.svg");
	mask-position:  center bottom;
	mask-repeat: no-repeat;
	mask-size: cover;
	width: 100%;
	height: 35px;
	transform: rotate(180deg);
}

.at-services-box .services-content .service-desc{
	color: var(--white-color);
}

.at-services-box .services-content .service-desc ul{
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 20px;
}

.at-services-box .services-content .service-desc ul:last-child,
.at-services-box .services-content .service-desc ul li:last-child{
	margin-bottom: 0;
}

.at-services-box .services-content .service-desc ul li{
	position: relative;
	color: var(--white-color);
	padding-left: 25px;
	margin-bottom: 20px;
}

.at-services-box .services-content .service-desc ul li:before{
	content: '';
	position: absolute;
	top: 8px;
    left: 3px;
	background-color: var(--e-global-color-accent);
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
}

.at-services-box .services-footer{
	background-color: var(--e-global-color-primary);
	padding: 0 var(--box-padding) var(--box-padding);
}

.at-services-box .services-footer .service-btn{
	display: inline-block;
	padding-right: 20px;
}

.at-services-box .services-footer .service-btn a{
	position: relative;
	display: block;
	font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    text-transform: var(--e-global-typography-accent-text-transform);
    font-style: var(--e-global-typography-accent-font-style);
    line-height: var(--e-global-typography-accent-line-height);
	background-color: var(--e-global-color-accent);
	border: 1px solid var(--e-global-color-accent);
	color: var(--white-color);
	border-radius: 100px;
/* 	padding: 10px 40px 10px 20px; */
	padding: 13px 30px 13px 30px;
	transition: all 0.3s ease-in-out;
}

.at-services-box .services-footer .service-btn a:hover{
/* 	background-color: transparent;
	border-color: var(--white-color); */
	color: var(--e-global-color-accent);
}

.at-services-box .services-footer .service-btn a:after{
	background: var(--white-color);
}

.elementor-widget-button .elementor-button .elementor-button-content-wrapper:after{
	transform: rotate(4deg);
}

/* .at-services-box .services-footer .service-btn a:after{
	content: '\f054';
	position: absolute;
	top: 50%;
	right: 20px;
	left: auto;
	font-family: 'Font Awesome 5 Free';
	font-size: inherit;
	line-height: 1em;
	font-weight: 900;
	color: currentcolor;
	transform: translateY(-50%);
}
 */
.slick-arrow{
	--arrow-left-right: -100px;
	position: absolute;
	top: calc(50% - 25px);
	bottom: auto;
/* 	background-image: url("../images/left-arrow.svg"); */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 16px auto;
	border: none !important;
	padding: 0 !important;
	width: 50px;
	height: 50px;
	z-index: 10;
}

.riverrockpools-services-carousel{
	padding-top: 100px;
}

.riverrockpools-services-carousel .slick-arrow{
	--arrowtop-left-right: calc( 50% - 55px);
	top: 0;
}

.slick-arrow:hover,
.slick-arrow:focus{
	background-color: var( --e-global-color-primary ) !important;
}

.slick-arrow i{
	color: #FFF;
}

.slick-arrow.prev-arrow{
	left: var(--arrow-left-right);
}

.riverrockpools-services-carousel .slick-arrow.prev-arrow{
	left: var(--arrowtop-left-right)
}

.slick-arrow.prev-arrow i{
	transform: rotate(180deg);
}

.slick-arrow.next-arrow{
	right: var(--arrow-left-right);
/* 	background-image: url("../images/right-arrow.svg"); */
}

.riverrockpools-services-carousel .slick-arrow.next-arrow{
	right: var(--arrowtop-left-right)
}

@media only screen and (max-width: 1490px){
	
	.slick-arrow{
		--arrow-left-right: -60px;
	}
}


@media only screen and (max-width: 1410px){
	
	.slick-container{
		padding-bottom: 100px;
	}
	
	.riverrockpools-services-carousel{
		padding-bottom: 0;
	}
	
	.slick-arrow{
		--arrow-left-right: calc(50% - 60px);
		top: auto;
		bottom: 0;
	}
}



@media only screen and (max-width: 1024px){
	
	.slick-container{
		padding-bottom: 80px;
	}
	
	.riverrockpools-services-carousel{
		padding-top: 80px;
		padding-bottom: 0;
	}
	
	.at-services-box{
		--box-padding: 20px;
	}
	
	.at-services-box .services-header .service-title h3{
		font-size: 22px;
	}
	
	.at-services-box .services-header .service-content{
		margin-top: 15px;
	}
	
	.at-services-box .services-content:before{
		background-position: center bottom -1px;
		background-size: contain;
		background-size: 100% auto;
		height: 29px;
	}
	
	.at-services-box .services-footer{
		padding: 0 var(--box-padding) calc(var(--box-padding) + 10px) 45px;
	}
	
	.at-services-box .services-content .service-desc ul li:before{
		width: 8px;
		height: 8px;
	}
}

@media only screen and (max-width: 767px){
	
	.slick-container{
		padding-bottom: 60px;
	}
	
	.riverrockpools-services-carousel{
		padding-top: 60px;
		padding-bottom: 0;
	}
	
	.at-services-box .services-header .service-content{
		margin-top: 10px;
	}
	
	.at-services-box .services-footer .service-btn{
		padding-right: 15px;
	}
	
	.at-services-box .services-footer .service-btn:after{
		font-size: 12px;
		transform: translateY(-35%);
	}
	
	.slick-arrow{
		--arrow-left-right: calc(50% - 45px);
		background-size: 15px auto;
		width: 40px;
    	height: 40px;
	}
	
	.riverrockpools-services-carousel .slick-arrow{
		--arrowtop-left-right: calc(50% - 45px);
	}
	
}


/*
 * Completed Projects CSS
 * */

.riverrockpools-projects {
	cursor: grab;
}

.at-projects-box{
	display: flex;
	flex-wrap: wrap;
}

.at-projects-box .projects-img-wrap{
	width: 60%;
}

.at-projects-box .projects-img-wrap .projects-image,
.at-projects-box .projects-img-wrap .projects-image figure{
	height: 100%;
}

.at-projects-box .projects-img-wrap .projects-image{
	position: relative;
}

.at-projects-box .projects-img-wrap .projects-image:before{
	content: '';
	position: absolute;
	top: 0;
	left: auto;
	right: -1px;
	bottom: 0;
	background-color: var(--e-global-color-primary);
	mask-image: url("../images/projects-img-shape.svg");
	mask-position: center right;
	mask-repeat: no-repeat;
	mask-size: auto 100%;
	width: 160px;
	height: 100%;
}

.at-projects-box .projects-img-wrap .projects-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.5;
	object-fit: cover;
}

.at-projects-box .project-content{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	width: 40%;
	background-color: var(--e-global-color-primary);
	padding: 80px 60px;
}

.at-projects-box .project-content > *{
	color: var(--white-color);
}

.at-projects-box .project-content .projects-title,
.at-projects-box .project-content .projects-desc{
	margin-bottom: 40px;
}

.at-projects-box .project-content .projects-title h3{
	font-size: 36px;
	line-height: 1.3em;
	color: var(--white-color);
}

.at-projects-box .project-content .projects-desc ul{
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 1.5em;
}

.at-projects-box .project-content .projects-desc ul:last-child,
.at-projects-box .project-content .projects-desc ul li:last-child{
	margin-bottom: 0;
}

.at-projects-box .project-content .projects-desc ul li{
	position: relative;
	padding-left: 30px;
	margin-bottom: 20px;
}

.at-projects-box .project-content .projects-desc ul li:before{
	content: '';
	position: absolute;
	top: 4.5px;
    left: 2px;
	background: url("../images/list-chcek-icon.svg") no-repeat center left;
	background-size: contain;
	width: 16px;
	height: 16px;
}

.at-projects-box .project-content .project-list{
	background: url("../images/wave-shape-icon.svg") no-repeat top left;
	background-size: 50px auto;
	padding-top: 40px;
	width: 80%;
}

.at-projects-box .project-content .project-list ul{
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.at-projects-box .project-content .project-list ul li{
	width: calc(33.33% - 20px);
	flex-direction: column;
	gap: 10px;
	display: flex;
	flex-wrap: wrap;
}

.at-projects-box .project-content .project-list ul li label{
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: 26px;
    font-weight: var(--e-global-typography-primary-font-weight);
    text-transform: var(--e-global-typography-primary-text-transform);
    font-style: var(--e-global-typography-primary-font-style);
    line-height: var(--e-global-typography-primary-line-height);
}


.at-projects-box .project-content .project-list ul li span{
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    text-transform: var(--e-global-typography-text-text-transform);
    font-style: var(--e-global-typography-text-font-style);
    line-height: var(--e-global-typography-text-line-height);
}

.riverrockpools-projects-wrap .slick-arrow{
	top: -122px;
}

.riverrockpools-projects-wrap .slick-arrow.prev-arrow{
	left: auto;
	right: calc(((100vw - 1320px) / 2) + 70px);
}

.riverrockpools-projects-wrap .slick-arrow.next-arrow{
	right: calc(((100vw - 1320px) / 2) + 10px);
}


@media only screen and (max-width: 1024px){
	
	.riverrockpools-projects.slick-container{
		padding-bottom: 0 !important;
	}
	
	.at-projects-box .projects-img-wrap,
	.at-projects-box .project-content{
		width: 100%;
	}
	
	.at-projects-box .projects-img-wrap .projects-image:before{
		display: none;
	}
	
	.at-projects-box .projects-img-wrap .projects-image img{
		aspect-ratio: 1 / 0.66;
	}
	
	.at-projects-box .project-content{
		padding: 40px;
	}
	
	.at-projects-box .project-content .projects-title,
	.at-projects-box .project-content .projects-desc{
		margin-bottom: 30px;
	}
	
	.at-projects-box .project-content .projects-title h3{
		font-size: 32px;
	}
	
	.at-projects-box .project-content .project-list{
		padding-top: 30px;
	}
	
	.at-projects-box .project-content .project-list ul li label{
		font-size: 24px;
	}
	
	.riverrockpools-projects-wrap .slick-arrow{
		top: -81px;
	}
	
	.riverrockpools-projects-wrap .slick-arrow.prev-arrow{
		right: 80px;
	}
	
	.riverrockpools-projects-wrap .slick-arrow.next-arrow{
		right: 20px;
	}
	
}

@media only screen and (max-width: 767px){
	
	
	.at-projects-box .project-content{
		padding: 30px;
	}
	
	.at-projects-box .project-content .projects-title,
	.at-projects-box .project-content .projects-desc{
		margin-bottom: 25px;
	}
	
	.at-projects-box .project-content .projects-title h3{
		font-size: 28px;
	}
	
	.at-projects-box .project-content .projects-desc ul li {
		padding-left: 25px;
		margin-bottom: 10px;
	}
	
	.at-projects-box .project-content .projects-desc ul li:before{
		top: 7.5px;
		width: 14px;
    	height: 14px;
	}
	
	.at-projects-box .project-content .project-list{
		padding-top: 25px;
		width: 100%;
	}
	
	.at-projects-box .project-content .project-list ul{
		gap: 20px;
	}
	
	.at-projects-box .project-content .project-list ul li{
		width: calc(50% - 10px);
	}
	
	.at-projects-box .project-content .project-list ul li label{
		font-size: 22px;
	}
	
	.riverrockpools-projects-wrap .slick-arrow{
		top: -71px;
	}
	
	.riverrockpools-projects-wrap .slick-arrow.prev-arrow{
		right: 70px;
	}
	
	.riverrockpools-projects-wrap .slick-arrow.next-arrow{
		right: 20px;
	}
	
}

/*
 * Fibreglass Pool Services Widget CSS
 * */

.fibreglass-pool-services-carousel-wrap{
	overflow-x: clip;
}

.fibreglass-pool-services-carousel {
	cursor: grab;
}

.fibreglass-pool-services-carousel .slick-slide{
	margin: 0 5px;
}

.fibreglass-pool-services-carousel .slick-list{
	margin: 0 -5px;
}

.fibreglass-pool-services-box{
	position: relative;
	display: flex;
    align-items: flex-end;
    padding: 30px;
	min-height: 570px;
	overflow: hidden;
}

.fibreglass-pool-services-box:before{
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(from var(--e-global-color-primary) r g b / 60%);
	width: 100%;
	height: 100%;
	transition: all 0.3s ease-in-out;
}

.fibreglass-pool-services-box:hover:before{
	background-color: rgb(from var(--e-global-color-secondary) r g b / 60%);
}

.fibreglass-pool-services-content-box{
	position: relative;
	width: 100%;
	z-index: 1;
}

.fibreglass-pool-services-content-box .fp-services-title{
	transform: translateY(0px);
	transition: all 0.6s ease-in-out;	
}

.fibreglass-pool-services-box:hover .fp-services-title{
	transform: translateY(-90px);
}

.fibreglass-pool-services-box:hover:has(.fp-services-btn) .fp-services-title{
/* 	transform: translateY(-110px); */
}

.fibreglass-pool-services-content-box .fp-services-title h3{
	font-size: 26px;
	color: #FFF;
}

.fibreglass-pool-services-content-box .fp-services-desc{
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	bottom: 0;
	color: #FFF;	 
	opacity: 0;
	visibility: hidden;
	transform: translateY(100%);
	transition: all 0.6s ease-in-out;
}

.fibreglass-pool-services-box:hover .fp-services-desc{
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.fibreglass-pool-services-box:hover:has(.fp-services-btn) .fp-services-desc{
	transform: translateY(-60px);
}

.fibreglass-pool-services-content-box .fp-services-btn{
	position: relative;
	margin-top: 20px;
	line-height: 0;
	z-index: 1;
}

.fibreglass-pool-services-content-box .fp-services-btn .elementor-button{
	border: none;
	padding: 0;
}

.fibreglass-pool-services-content-box .fp-services-btn .elementor-button .elementor-button-content-wrapper{
	padding: 10px 25px;
}

.fibreglass-pool-services-content-box .fp-services-btn .elementor-button:after{
	background: var(--white-color);
}

.fibreglass-pool-services-content-box .fp-services-btn .elementor-button:hover{
	color: var(--e-global-color-accent);
}

.fibreglass-pool-services-content-box .fp-services-btn .elementor-button .elementor-button-content-wrapper:before{
	top: 5px;
    left: 7px;
}

.fibreglass-pool-services-content-box .fp-services-btn .elementor-button .elementor-button-content-wrapper:after{
	right: 5px;
    bottom: 3px;
}

.fibreglass-pool-services-carousel .slick-arrow{
	background-color: #FFF;
	color: var(--e-global-color-accent);
}

.fibreglass-pool-services-carousel .slick-arrow i{
	color: var(--e-global-color-accent);
}

.fibreglass-pool-services-carousel .slick-arrow:hover i,
.fibreglass-pool-services-carousel .slick-arrow:focus i{
	color: #FFF;
}

.fibreglass-pool-services-carousel .slick-arrow{
	opacity: 0;
	visibility: hidden;
}


@media only screen and (max-width: 1580px){
	
	.fibreglass-pool-services-box:hover .fp-services-title {
		transform: translateY(-130px);
	}
	
}

@media only screen and (max-width: 1500px){}

@media only screen and (max-width: 1410px){
	
	.fibreglass-pool-services-carousel.slick-container{
		padding-bottom: 0;
	}

}

@media only screen and (max-width: 1024px){
	
	.fibreglass-pool-services-carousel.slick-container {
        padding-bottom: 80px;
    }
	
	.fibreglass-pool-services-box{
		padding: 20px;
		min-height: 450px;
	}
	
	.fibreglass-pool-services-content-box .fp-services-title h3{
		font-size: 22px;
	}
	
	.fibreglass-pool-services-content-box .fp-services-title h3 br{
		display: none;
	}
	
	.fibreglass-pool-services-box:hover .fp-services-title {
        transform: translateY(-110px);
    }
	
	.fibreglass-pool-services-carousel .slick-arrow{
		opacity: 1;
    	visibility: visible;
	}
}

@media only screen and (max-width: 767px){
	
	.fibreglass-pool-services-carousel.slick-container {
        padding-bottom: 60px;
    }
	
	.fibreglass-pool-services-box{
		min-height: 400px;
	}

	.fibreglass-pool-services-box:hover .fp-services-title {
        transform: translateY(-130px);
    }
	
	.fibreglass-pool-services-content-box .fp-services-btn .elementor-button .elementor-button-content-wrapper{
		padding: 10px 15px;
	}
	
}

/*
 * Fibreglass Pool Project Widget CSS
 * */

.fibreglass-pool-projects-carousel-wrap{
/* 	overflow-x: clip; */
}

.fibreglass-pool-projects-carousel{
	cursor: grab;
}

.fibreglass-pool-projects-carousel .slick-slide{
	margin: 0 15px;
}

.fibreglass-pool-projects-carousel .slick-list{
	margin: 0 -15px;
}

.projects-box{
	padding-top: 20px;
}

.projects-header{
	background-color: #FFF;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.20);
	transition: all 0.3s ease-in-out;
}

.projects-box:hover .projects-header{
	background-color: var(--e-global-color-secondary);
}

.projects-header .projects-image img{
	width: 100%;
	aspect-ratio: 1 / 1.03;
    object-fit: cover;
}

.projects-header .projects-title{
	padding: 30px;
}

.projects-header .projects-title h3{
	font-size: 26px;
	transition: all 0.3s ease-in-out;
}

.projects-box:hover .projects-header .projects-title h3{
	color: #FFF;
}

.projects-box .projects-content{
	padding: 30px;
}

.projects-box .projects-content .projects-btn a{
	position: relative;
	font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: 600;
    text-transform: var(--e-global-typography-accent-text-transform);
    font-style: var(--e-global-typography-accent-font-style);
    line-height: var(--e-global-typography-accent-line-height);
	color: var(--e-global-color-primary);
	padding-right: 25px;
	transition: all 0.3s ease-in-out;
}

.projects-box .projects-content .projects-btn a:hover{
	color: var(--e-global-color-accent);
}

.projects-box .projects-content .projects-btn a:before{
	content: '\f061';
	position: absolute;
	top: 50%;
	left: auto;
	right: 0;
	font-family: 'Font Awesome 5 Free';
	font-size: 14px;
    font-weight: 900;
	transform: translateY(-46%);
    line-height: 1em;
}

@media only screen and (max-width: 1024px){
	
	
	.projects-header .projects-image img{
		aspect-ratio: 1 / 0.8;
	}
	
	.projects-header .projects-title,
	.projects-box .projects-content{
		padding: 20px;
	}
	
	.projects-header .projects-title h3{
		font-size: 24px;
	}
	
}


/*
 * Current Project Widget CSS
 * */

.pool-current-projects-carousel-wrap{
/* 	overflow-x: clip; */
}

.pool-current-projects-carousel{
	cursor: grab;
}

.pool-current-projects-carousel .slick-slide{
	margin: 0 15px;
}

.pool-current-projects-carousel .slick-list{
	margin: 0 -15px;
}

.current-projects-box{}

.current-projects-header .current-projects-image img{
	width: 100%;
	aspect-ratio: 1 / 0.82;
    object-fit: cover;
}

.current-projects-header .projects-location{
	position: relative;
	background-color: var(--e-global-color-secondary);
	color: var(--white-color);
	padding: 13px 20px;
	margin: -25px 30px 0;
	z-index: 1;
}

.current-projects-header .projects-location:before{
	content: '';
	position: absolute;
	top: 15px;
	left: 20px;
	background-color: currentcolor;
    mask-image: url("../images/location-icon.svg");
	mask-repeat: no-repeat;
	mask-position: center center;
    mask-size: contain;
	width: 20px;
	height: 20px;
}

.current-projects-header .projects-location p{
	text-indent: 30px;
}

.current-projects-content{
	padding: 30px;
}

.current-projects-content .projects-title{
	margin-bottom: 20px;
}

.current-projects-content .projects-title h3{
	font-size: 26px;
}

.current-projects-content .projects-btn{
	margin-top: 15px;
}

.current-projects-content .projects-btn a{
	position: relative;
	font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: 600;
    text-transform: var(--e-global-typography-accent-text-transform);
    font-style: var(--e-global-typography-accent-font-style);
    line-height: var(--e-global-typography-accent-line-height);
	color: var(--e-global-color-primary);
	padding-right: 25px;
	transition: all 0.3s ease-in-out;
}

.current-projects-content .projects-btn a:hover{
	color: var(--e-global-color-accent);
}

.current-projects-content .projects-btn a:before{
	content: '\f061';
	position: absolute;
	top: 50%;
	left: auto;
	right: 0;
	font-family: 'Font Awesome 5 Free';
	font-size: 14px;
    font-weight: 900;
	transform: translateY(-46%);
    line-height: 1em;
}

@media only screen and (max-width: 1024px){
	
	.current-projects-header .current-projects-image img{
		aspect-ratio: 1 / 0.8;
	}
	
	.current-projects-header .projects-location{
		margin: -25px 20px 0;
	}
	
	.current-projects-content{
		padding: 20px;
	}
	
	.current-projects-content .projects-title{
		margin-bottom: 20px;
	}
	
	.current-projects-content .projects-btn {
		margin-top: 20px;
	}
}


/*
 * Pool Maintenance Proejct Carousel Widget Css
 * */

.pool-maintenance-carousel-wrap{
/* 	overflow-x: clip; */
}

.pool-maintenance-carousel {
	cursor: grab;
}

.pool-maintenance-carousel .slick-slide{
	margin: 0 15px;
}

.pool-maintenance-carousel .slick-list{
	margin: 0 -15px;
}

.fibreglass-pool-services-box.pool-maintenance-project-box{
	padding: 30px;
	min-height: 400px;
}

.fibreglass-pool-services-box.pool-maintenance-project-box:before{
	background: linear-gradient(180deg, transparent 15%, var(--e-global-color-primary) 100%);
    background-size: 130% 200%;
    background-position: top;
    transition: background-position 0.8s ease-in-out;
}

.fibreglass-pool-services-box.pool-maintenance-project-box:hover:before{
	background-position: bottom;
}

.pool-maintenance-project-box .fibreglass-pool-services-content-box .fp-services-title{
	transform: translateY(0);
}

.pool-maintenance-project-box .fibreglass-pool-services-content-box .fp-services-btn{
	margin-top: 0;
}

.pool-maintenance-project-box .fp-services-btn{
	opacity: 0;
	visibility: hidden;
	transform: translateY(70px);
	transition: all 0.6s ease-in-out;
}

.pool-maintenance-project-box:hover .fp-services-btn{
	transform: translateY(0px);
	opacity: 1;
	visibility: visible;
}

.pool-maintenance-project-box .fp-services-btn a{
	position: relative;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: 600;
    text-transform: var(--e-global-typography-accent-text-transform);
    font-style: var(--e-global-typography-accent-font-style);
    line-height: var(--e-global-typography-accent-line-height);
    color: var(--white-color);
    padding-right: 25px;
    transition: all 0.3s ease-in-out;
}

.pool-maintenance-project-box .fp-services-btn a:hover{
	color: var(--e-global-color-accent);
}

.pool-maintenance-project-box .fp-services-btn a:before {
    content: '\f061';
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;
    font-family: 'Font Awesome 5 Free';
    font-size: 14px;
    font-weight: 900;
    transform: translateY(-46%);
    line-height: 1em;
}

@media only screen and (max-width: 1024px){
	
	.fibreglass-pool-services-box.pool-maintenance-project-box:before{
		background: linear-gradient(180deg, transparent 32.52%, var(--e-global-color-primary) 100%);
	}
	
	.pool-maintenance-project-box.fibreglass-pool-services-box:hover .fp-services-title{
		transform: translateY(-65px);
	}
	
	.pool-maintenance-project-box.fibreglass-pool-services-box:has(.fp-services-btn):hover .fp-services-title{
		transform: translateY(-80px);
	}
}

@media only screen and (max-width: 767px){
	
	.fibreglass-pool-services-box.pool-maintenance-project-box{
		padding: 20px;
    	min-height: 350px;
	}
	
	.pool-maintenance-project-box.fibreglass-pool-services-box .fp-services-desc{
		font-size: inherit;
	}
	
	.pool-maintenance-project-box.fibreglass-pool-services-box:hover .fp-services-title{
		transform: translateY(-55px);
	}
	
	.pool-maintenance-project-box.fibreglass-pool-services-box:has(.fp-services-btn):hover .fp-services-title{
        transform: translateY(-70px);
    }
	
	.pool-maintenance-project-box.fibreglass-pool-services-box:has(.fp-services-btn):hover .fp-services-desc{
		transform: translateY(-30px);
	}
}