/*
Theme Name: Odonnell Roofing
Theme URI: https://example.com/
Description: Child theme for Hello Elementor
Author: Ideafueled
Template: hello-elementor
Version: 1.0
*/


#custom-hover-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f4b321;
	color: #1f5d3a;
	padding: 17px 25px 17px 25px;
	font-weight: 700;
	overflow: hidden;
	transition: all 0.3s ease;
}

.fluentform .ff-el-group {
	margin-bottom: 8px !important;
}

.fluentform .ff-el-input--label {   
	margin-bottom: 2px !important;    
}

/* Right green sliding box */
#custom-hover-btn::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 50px;
	background: #1f5d3a;

	display: flex;
	align-items: center;
	justify-content: center;

	/* SVG as background */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'><path fill='%23FEBD2A' d='M4.3,0H0l4.3,6L0,12h4.3L10,6L4.3,0z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;

	transform: translateX(100%);
	transition: all 0.3s ease;
}


/* Hover effect */
#custom-hover-btn:hover::after {
	transform: translateX(0);
}

/* Expand button slightly on hover */
#custom-hover-btn:hover {
	padding-right: 55px;
	padding-left: 7px;
}


.hfe-menu-toggle i.fa {
	display: inline-block;
	width: 12px;
	height: 10px;
}

/* Replace icon with your SVG */
.hfe-menu-toggle i.fa::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'><path fill='%23155C3A' d='M12,4.3V0L6,4.3L0,0v4.3L6,10L12,4.3z'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-arrow {
	margin-left: 7px !important;
}





.review-slider {
	max-width: 900px;
	margin: auto;
	position: relative;
}



.review-inner {
	display: flex;
	align-items: center;
	gap: 25px;
}

/* Image */
.slick-vertical .slick-slide {
	display: flex !important;
	height: auto;
	border: 1px solid transparent;
}

.slick-vertical .slick-slide { 
	height: 260px !important;    
}

/* Text */
.review-text {
	font-size: .875rem;
	color: #000;
	line-height: 22px;
	margin-bottom: 15px;
}

/* Name */
.review-name {
	font-size: .875rem;
	font-weight: 700;
	color: #155c3a;
	margin: 0;
}

.review-meta {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Arrows */
.review-prev, .review-next {
	position: absolute;
	right: 30px;
	top: 50% !important;
	transform: translateY(-50%);
	background: #1f7a4c;
	color: #fff;
	border: none;
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 1;
}
.review-next {
	top: 135px !important;
}

.review-prev {
	bottom: 135px !important;
	top: unset !important;
}

.review-slider {
	box-shadow: rgba(149,157,165,.2) 0px 8px 24px;
}

.review-next {
	top: 55%;
}

.review-inner {
	display: grid;
	grid-template-columns: 125px 1fr;
	align-items: center;
	gap: 25px;
	height: 260px;
	background: #e6e6e6;
	padding: 50px 20px;
}

.review-rating svg {
	width: 125px;
	height: 30px;
	margin-bottom: -5px;
}

.review-meta p.review-name {
	position: relative;
}

.review-meta p.review-name:after {
	content: '';
	position: absolute;
	width: .5px;
	height: 24px;
	background: #155c3a;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 8px;
}

button.review-prev.slick-arrow {
	background: transparent;
}
button.review-next.slick-arrow {
	background: transparent;
}
button.review-prev.slick-arrow {
	width: 30px;
	height: 30px;
}
button.review-next.slick-arrow {
	width: 30px;
	height: 30px;
}
.review-content {
	padding-right: 104px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.review-rating svg path {
	fill: #154c3a;
}
.review-img img {
	width: 125px;
	height: 125px;
	border-radius: 50%;
	padding: 10px;
	background: linear-gradient(90.06deg, #155c3a 5.77%, #20a95c 96.83%);
	object-fit: cover;
}

.picture-bg {
	position: relative;
}

.picture-bg:after {
	content: '';
	position: absolute;
	background: linear-gradient(0deg, rgb(16, 16, 16) 2%, rgba(35, 35, 35, 0.28) 80%, rgba(35, 35, 35, 0) 100%);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 1;
}

.service_card .picture-bg img {
	transform: translateY(0px);
	transition: all ease-in-out .3s;
}

.service_card:hover .picture-bg img {
	transform: translateY(-20px);    
}

.service_card .picture-bg:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 0px;
	background: #155c3a;
	z-index: 1;
	bottom: 0;
	transition: all ease .3s;
}

.service_card:hover .picture-bg:before {   
	height: 70px;    
}

.check-box {
	position: absolute;
	bottom: -71px !important;
	z-index: 2;
	transition: all ease .3s;
}

.service_card:hover .check-box {   
	bottom: 0px !important;  
}

.service_card:hover .picture-bg:after {
	opacity: 0;
}

#button_green a#custom-hover-btn {
	background: #1f5d3a;
	color: #fff;
}

figure.swiper-slide-inner img {
	width: 150px !important;
	height: 60px;
	object-fit: contain;
}
.a_underline a {
	text-decoration: underline;
}

.image_height_control>div {
	position: relative !important;
}

.image_height_control>div img {
	position: absolute;
	left: 0;
	height: 600px !important;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}

.box-shadows {
	filter: drop-shadow(0px -1px 2px rgba(0, 0, 0, 0.125));
}

.image_height_control-2>div img {
	position: absolute;
	left: 0;
	height: 640px !important;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}

.overlay-green {
	position: relative;
}

.overlay-green:before {
	content: '';
	position: absolute;
	background: linear-gradient(0deg, rgb(16, 16, 16) 2%, rgba(35, 35, 35, 0.28) 80%, rgba(35, 35, 35, 0) 100%);
	width: 100%;
	height: 100%;
}

.hover_text span.elementor-heading-title {
	color:#fff;
}

.hover_text:hover span.elementor-heading-title {
	color: #f4b321 !important;
}

.elementor-widget-n-accordion .e-n-accordion-item[open]>.e-n-accordion-item-title .e-n-accordion-item-title-icon span>svg path {
	fill: var(--n-accordion-icon-active-color);
}

/* Closed tab (default) */
.e-n-accordion-item {
	border-left: 5px solid #fff !important;
	border-bottom: 5px solid #fff !important;
	box-shadow: 0px 4px 4px rgba(0,0,0,.25) !important;
}

/* Active (opened) accordion item */
.e-n-accordion-item[open] {
	border-left: 5px solid #ffbe29 !important;   /* change color */
	border-bottom: 5px solid #ffbe29 !important; /* change color */
	box-shadows:0px 4px 4px rgba(0,0,0,.25);
}

/* Optional: add smooth transition */
.e-n-accordion-item {
	transition: all 0.3s ease;
}






.custom-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.blog-card {
	background: #fff;
}

.blog-img img {
	width: 100%;
	height: 268px;
	object-fit: cover;
}

.blog-meta {
	font-size: 12px;
	color: #155c3a;
	margin: 15px 0 10px;
}

h3.blog-title {
	font-size: 24px !important;
	line-height: 29px !important;
}

.blog-title a {
	text-decoration: none;
	color: #000;
}

.blog-excerpt {
	font-size: 14px;
	color: #000;
	margin-bottom: 15px;
	line-height: 24px;
}

.read-more {
	font-size: 14px;
	color: #155c3a;
	text-decoration: none;
	font-weight: 600;
}

.read-more:hover {
	text-decoration: none;
}

/* Target accordion arrow icons */
.arrow-icon svg {
	width: 8px;
	height: auto; /* keeps proper proportion */
}

.read-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.arrow-icon svg {
	width: 8px;
	height: auto;
	transition: transform 0.3s ease;
}

/* Hover effect */
.read-more:hover .arrow-icon svg {
	transform: translateX(5px);
}

.read-more:hover a {
	text-decoration: none;
}

button.review-next.slick-arrow svg path {
	fill: #21a95c !important;
}

.shape_on_top {
	clip-path: polygon(30% 0%, 57% 25%, 100% 25%, 100% 100%, 0 100%, 0% 25%);
}

.home header#masthead {
    position: sticky;
    top: 0;
}

/* .btn_style_01 #custom-hover-btn::after {   
    background: #20A95C !important; 
} */

/* .btn_style_01 #custom-hover-btn::after {   
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'><path fill='%23155C3A' d='M4.3,0H0l4.3,6L0,12h4.3L10,6L4.3,0z'/></svg>") !important; 
} */



/* .btn_style_01 #custom-hover-btn::after {  
    background: #20a95c;   
} */




@media only screen and (max-width:1024px){
	.text_left a {
		text-align: left !important;
	}
	.image_height_control>div img {	
		height: 685px !important;		
	}
	.custom-blog-grid {  
		gap: 24px;
	}
}


@media only screen and (max-width:880px){
	.image_height_control>div img {
		height: 318px !important;
	}
	.image_height_control-2>div img {
		position: unset;	
		transform: unset;	
	}
	.custom-blog-grid {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 48px !important;
	}
	.shape_on_top {
		clip-path: polygon(30% 0%, 57% 17%, 100% 17%, 100% 100%, 0 100%, 0% 16%);
	}
	.image_height_control>div img {
		position: unset;
		transform: unset; 
	}
}


@media only screen and (max-width:580px){	
	.d_flex .elementor-image-box-wrapper {
    display: flex;
}
	.review-inner {   
		grid-template-columns: 1fr;   
	}
	.review-inner {   
		height: 420px !important;   
	}
	.slick-vertical .slick-slide {
		height: 420px !important;
	}
	.review-content {
		padding-right: 15px;  
	}
	.review-img {
		display: flex;
		justify-content: center;
	}
	.review-inner {
		padding: 50px 30px;
	}
	.review-next {
		top: 170px !important;
	}
	.review-prev {
    bottom: 260px !important;
    top: unset !important;
}
	.review-content {
    font-size: 14px;
}
	p.review-name {
    width: fit-content;
}
	.mob-flex .elementor-image-box-wrapper {
    display: grid;
    grid-template-columns: 27px 1fr;
    text-align: left;
    gap: 10px;
}
}