/*
 * 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: url("../images/top-wave-shape.svg") no-repeat center bottom #FFF;
	background-size: cover;
	width: 100%;
	height: 35px;
}

.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) 55px;
}

.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;
	transition: all 0.3s ease-in-out;
}

.at-services-box .services-footer .service-btn a:hover{
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-accent);
}

.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: 0;
	bottom: 0;
	background: url("../images/projects-img-shape.svg") no-repeat center right -1px;
	background-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;
	 display: -webkit-box;
	  -webkit-line-clamp: 5;
	  -webkit-box-orient: vertical;  
	  overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(100px);
	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;
}

/* ------------------------------------------------------------
   .fp-services-btn — dark button with PERMANENT WHITE BORDER
   --------------------------------------------------------------
   The wrapping <div class="fp-services-btn elementor-widget-button
   btn-dark-border"> picks up the theme's reusable `.btn-dark-border`
   variant from style.css, which handles bg, border, text colour,
   the meet-in-the-middle wipe, and glyph colouring.

   Size overrides below match the widget's original compact
   button footprint (the theme defaults are larger and crowd the
   description text on mobile + tablet layouts).
   ------------------------------------------------------------ */
.fp-services-btn.elementor-widget-button .elementor-button,
.fp-services-btn .elementor-button{
	padding: 8px 22px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
}

.fp-services-btn.elementor-widget-button .elementor-button .elementor-button-text,
.fp-services-btn .elementor-button .elementor-button-text{
	font-size: 14px !important;
	line-height: 1.4 !important;
}

/* Decorative wave glyphs — anchored to the BUTTON's corners (not
   the text wrapper's). The theme's standard glyphs anchor to
   .elementor-button-content-wrapper, but because that wrapper is
   inline and only spans the text width, the glyphs drift away
   from the pill corners on shorter labels. Anchoring on the
   button element itself keeps them pinned to the pill corners
   regardless of text length. `currentcolor` ensures they re-tint
   to accent on hover along with the button text.

   Selector MUST include `.elementor-widget-button:not(.no-bg):not(.mt-btn--none)`
   to match/exceed the theme's `::after { content: none !important; }`
   legacy-circle-suppression rule (style.css ~line 2686) — otherwise
   our ::after glyph gets killed. */
.fp-services-btn.elementor-widget-button:not(.no-bg):not(.mt-btn--none) .elementor-button::before,
.fp-services-btn.elementor-widget-button:not(.no-bg):not(.mt-btn--none) .elementor-button::after,
.fp-services-btn.elementor-widget-button:not(.no-bg):not(.mt-btn--none) .elementor-button:hover::after,
.fp-services-btn.elementor-widget-button:not(.no-bg):not(.mt-btn--none) .elementor-button:focus::after{
	content: '' !important;
	display: block !important;
	position: absolute !important;
	background-color: currentcolor !important;
	background-image: none !important;
	width: 12px !important;
	height: 12px !important;
	z-index: 3 !important;
	pointer-events: none !important;
}

/* Top-left glyph — tucks into the pill's top-left corner.
   `transform: scale(0.6)` shrinks the 12×12 glyph visually to ~7×7
   while keeping the clip-path's absolute pixel coords intact (the
   path goes up to 12, so shrinking via width/height would crop it
   — scale preserves the full curve shape).
   `transform-origin: top left` pins the shrunk glyph to the
   top/left anchor point. */
.fp-services-btn.elementor-widget-button:not(.no-bg):not(.mt-btn--none) .elementor-button::before{
	top: 6px !important;
	left: 10px !important;
	right: auto !important;
	bottom: auto !important;
	transform: scale(0.6) !important;
	transform-origin: top left !important;
	clip-path: path('M11.9993 0.397217C10.117 1.01336 8.1162 1.98043 6.24708 3.40893C3.70714 5.35011 1.42768 8.13095 0.0195312 12H1.62389C2.9433 8.66829 4.95862 6.28157 7.15792 4.60072C8.73022 3.39907 10.4046 2.55246 11.9993 1.98253V0.397217Z') !important;
}

/* Bottom-right glyph — tucks into the pill's bottom-right corner.
   Pinned to bottom/right via transform-origin so it shrinks
   toward the corner rather than drifting away from it. */
.fp-services-btn.elementor-widget-button:not(.no-bg):not(.mt-btn--none) .elementor-button::after,
.fp-services-btn.elementor-widget-button:not(.no-bg):not(.mt-btn--none) .elementor-button:hover::after,
.fp-services-btn.elementor-widget-button:not(.no-bg):not(.mt-btn--none) .elementor-button:focus::after{
	top: auto !important;
	left: auto !important;
	right: 10px !important;
	bottom: 6px !important;
	transform: scale(0.6) !important;
	transform-origin: bottom right !important;
	clip-path: path('M0.0192518 12C1.90157 11.3839 3.90235 10.4168 5.77148 8.98829C8.31141 7.04711 10.5909 4.26626 11.999 0.397168H10.3947C9.07525 3.72893 7.05994 6.11565 4.86063 7.7965C3.28834 8.99815 1.61399 9.84475 0.0192518 10.4147V12Z') !important;
}

/* Content-wrapper sits above the background-wipe layer. */
.fp-services-btn.elementor-widget-button .elementor-button .elementor-button-content-wrapper,
.fp-services-btn .elementor-button .elementor-button-content-wrapper{
	position: relative !important;
	z-index: 2 !important;
}

/* Suppress the theme's content-wrapper glyphs for this widget only —
   we use the button-level glyphs above instead, which track the
   pill corners (not the text width). */
.fp-services-btn.elementor-widget-button:not(.no-bg):not(.mt-btn--none) .elementor-button .elementor-button-content-wrapper::before,
.fp-services-btn.elementor-widget-button:not(.no-bg):not(.mt-btn--none) .elementor-button .elementor-button-content-wrapper::after{
	content: none !important;
	display: none !important;
}

/* IMPORTANT: `overflow: hidden` on the button is REQUIRED for the
   glyph trick — the glyphs are intentionally positioned past the
   pill's edges (negative top/left/right/bottom) and the overflow
   clip trims them so only the curve-tip at each corner is visible
   INSIDE the pill. Leaving overflow visible lets the whole 12×12
   glyph shape render outside the border, which is wrong.
   Restating here with higher specificity than any leftover rule. */
.fp-services-btn.elementor-widget-button:not(.no-bg):not(.mt-btn--none) .elementor-button,
.fp-services-btn .elementor-button{
	overflow: hidden !important;
}

.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);
    }
	
	/* Mobile: tighter horizontal padding on the pill on small screens.
	   !important needed to beat the base compact rule above. */
	.fp-services-btn.elementor-widget-button .elementor-button,
	.fp-services-btn .elementor-button{
		padding: 8px 16px !important;
	}
	
}

/*
 * 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 42.52%, var(--e-global-color-primary) 100%);
}

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

.pool-maintenance-project-box .fibreglass-pool-services-content-box:has(.fp-services-btn) .fp-services-title{
	transform: translateY(25px);
}

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

.pool-maintenance-project-box.fibreglass-pool-services-box:has(.fp-services-btn):hover .fp-services-title{
	transform: translateY(-100px);
}

.pool-maintenance-project-box.fibreglass-pool-services-box .fp-services-desc{
	-webkit-line-clamp: 3;
	transform: translateY(70px);
}

.pool-maintenance-project-box.fibreglass-pool-services-box:hover .fp-services-desc{
	transform: translateY(0px);
}

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

.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);
	}
}