/**
 * Single Service Hero Block Front-end CSS
 */

/* Background Colors - Named Colors */
.ssh-bg-image-cont.bg-dark-blue {
	background-color: #0F293E;
}

.ssh-bg-image-cont.bg-dark-brown {
	background-color: #290B0B;
}

.ssh-bg-image-cont.bg-burgundy {
	background-color: #800020;
}

.ssh-bg-image-cont.bg-gold {
	background-color: #B8860B;
}

.ssh-bg-image-cont.bg-copper {
	background-color: #B87333;
}

.ssh-bg-image-cont.bg-periwinkle {
	background-color: #CCCCFF;
}

.ssh-bg-image-cont.bg-deep-blue {
	background-color: #00008B;
}

.ssh-bg-image-cont.bg-dark-red {
	background-color: #6B313E;
}

.ssh-bg-image-cont.bg-white {
	background-color: #FFFFFF;
}

.ssh-bg-image-cont.bg-black {
	background-color: #000000;
}

/* Text Colors */
.single-service-hero.text-white,
.single-service-hero.text-white h1,
.single-service-hero.text-white h2,
.single-service-hero.text-white h3,
.single-service-hero.text-white h4,
.single-service-hero.text-white h5,
.single-service-hero.text-white h6,
.single-service-hero.text-white p,
.single-service-hero.text-white .single-service-hero-title,
.single-service-hero.text-white .single-service-hero-description,
.single-service-hero.text-white .ssh-service-title,
.single-service-hero.text-white .service-description,
.single-service-hero.text-white .eyebrow {
	color: #FFFFFF;
}

.single-service-hero.text-black,
.single-service-hero.text-black h1,
.single-service-hero.text-black h2,
.single-service-hero.text-black h3,
.single-service-hero.text-black h4,
.single-service-hero.text-black h5,
.single-service-hero.text-black h6,
.single-service-hero.text-black p,
.single-service-hero.text-black .single-service-hero-title,
.single-service-hero.text-black .single-service-hero-description,
.single-service-hero.text-black .ssh-service-title,
.single-service-hero.text-black .service-description,
.single-service-hero.text-black .eyebrow {
	color: #000000;
}

.single-service-hero.text-dark-blue,
.single-service-hero.text-dark-blue h1,
.single-service-hero.text-dark-blue h2,
.single-service-hero.text-dark-blue h3,
.single-service-hero.text-dark-blue h4,
.single-service-hero.text-dark-blue h5,
.single-service-hero.text-dark-blue h6,
.single-service-hero.text-dark-blue p,
.single-service-hero.text-dark-blue .single-service-hero-title,
.single-service-hero.text-dark-blue .single-service-hero-description,
.single-service-hero.text-dark-blue .ssh-service-title,
.single-service-hero.text-dark-blue .service-description,
.single-service-hero.text-dark-blue .eyebrow {
	color: #0F293E;
}

/* Eyebrow Styles */
.single-service-hero .eyebrow {
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 6.72px;
	margin-bottom: 10px;
	display: block;
	font-family: 'DM Sans', sans-serif;
}

/* Eyebrow style variations */
.single-service-hero .eyebrow-style-default {
	font-weight: 400;
	text-transform: uppercase;
}

.single-service-hero .eyebrow-style-bold {
	font-weight: 700;
}

.single-service-hero .eyebrow-style-elegant {
	font-style: italic;
}

/* Title and Description Styles */
.single-service-hero .single-service-hero-title,
.single-service-hero .ssh-service-title {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 48px;
	line-height: 114%;
	margin-bottom: 24px;
	max-width: 396px;
	font-weight: 400;
}

.single-service-hero .service-description {
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 21px;
	margin-bottom: 53px;
	max-width: 434px;
}

/* Main block structure */
.single-service-hero {
	position: relative;
	display: flex;
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible; /* Allow for overlap */
	padding: 0 !important;
	margin: 0 !important;
}

/* Background color section */
.ssh-bg-image-cont {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%; /* Make it exactly 50% */
	height: 100%;
	z-index: 1;
	margin: 0;
	padding: 0;
}

.single-service-hero.image-left .ssh-bg-image-cont {
	right: 0;
	left: auto;
}

.single-service-hero.image-right .ssh-bg-image-cont {
	left: 0;
	right: auto;
}

/* Image container */
.ssh-image-container {
	position: relative;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	z-index: 2;
	padding-bottom: 96px !important;
}

@media (max-width: 1500px) {
	.single-service-hero .eyebrow {
		font-size: 16px !important;
	}

	.key-contacts-anchor {
		font-size: 16px !important;
	}
}

.single-service-hero.image-left .ssh-image-container {
	left: 0;
}

.single-service-hero.image-right .ssh-image-container {
	right: 0;
	left: auto;
}

/* Image styles */
.ssh-image {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.single-service-hero .ssh-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-height: 800px;
	object-position: top;
	margin: 0;
	padding: 0;
}

/* Container to ensure proper layout */
.single-service-hero .container {
	display: flex;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible;
}

.single-service-content-anchor{
	width: 50%;
	margin-left: auto;
}

/* Text content area */
.single-service-text-content {
	position: absolute;
	padding: 96px 32px 96px 215px;
	display: flex;
	flex-direction: column;
	height: 90%;
	align-self: end;
	z-index: 1;
	bottom: 0;
	left: 0;
	right: 0;
}

.single-service-hero.image-left .single-service-text-content {
	margin-left: auto;
	margin-right: 0;
}

.single-service-hero.image-right .single-service-text-content {
	margin-left: 0;
	margin-right: auto;
}

/* Service Content Styling */
.single-service-hero .service-content-wrapper {
	width: 100%;
}

/* Title styles for service */
.single-service-hero .ssh-service-title {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 48px;
	line-height: 114%;
	margin-bottom: 16px;
	font-weight: 400;
}

/* Trending Section */
.single-service-hero .trending-section {
	margin-top: 46px;
	font-family: 'DM Sans', sans-serif;
}

.single-service-hero .trending-title {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 2.66px;
	font-weight: 400;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.key-contacts-anchor{
	color: #D48D57;
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -0.48px;
}

.single-service-hero .trending-heading {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 24px;
	line-height: 1.4;
	margin-bottom: 20px;
	font-weight: 500;
}

/* Ensure all buttons in multi-button scenario have the arrow style */
.ssh-read-more::after {
	content: "";
	display: inline-block;
	width: 29px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='16' viewBox='0 0 29 16' fill='none'%3E%3Cpath d='M28.7071 8.70711C29.0976 8.31659 29.0976 7.68342 28.7071 7.2929L22.3431 0.928934C21.9526 0.53841 21.3195 0.53841 20.9289 0.928934C20.5384 1.31946 20.5384 1.95262 20.9289 2.34315L26.5858 8L20.9289 13.6569C20.5384 14.0474 20.5384 14.6805 20.9289 15.0711C21.3195 15.4616 21.9526 15.4616 22.3431 15.0711L28.7071 8.70711ZM-8.74228e-08 9L28 9L28 7L8.74228e-08 7L-8.74228e-08 9Z' fill='%23AA622C'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 10px;
	transition: transform 0.3s ease;
}

/* Hover effect for arrow buttons */
.trending-section:hover .ssh-read-more::after {
	transform: translateX(5px);
}

.ssh-read-more {
	display: flex;
	align-items: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #FFFFFF;
	text-decoration: none;
	margin-top: auto;
}

.ssh-read-more:hover .arrow-icon {
	transform: translateX(3px);
}


.single-service-hero .trending-link {
	margin-bottom: 46px;
}

.single-service-hero .trending-link a {
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 22px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ssh-image-container{
	margin-bottom: 96px;
}

.ssh-mobile-icon{
	display: none;
}

/* SVG Divider Styles */
.single-service-hero .ssh-divider {
	width: 100%; /* Make SVG width 100% of its container */
	max-width: 100%; /* Ensure it doesn't overflow */
	height: 2px; /* Fixed height */
	display: block; /* Ensures proper block layout */
	margin: 46px 0; /* Maintain vertical margins */
}

.ssh-divider-mobile {
	display: none; /* Hidden by default */
}

/* Tablet styles */
@media (max-width: 1024px) {
	/* Adjust padding for content area */
	.single-service-text-content {
		padding: 60px 24px 60px 80px;
	}

	/* Reduce max-width of text elements for better readability */
	.single-service-hero .ssh-service-title {
		max-width: 260px;
	}

	/* Reduce some spacing */
	.single-service-hero .trending-section {
		margin-top: 32px;
	}
}

/* Mobile styles */
@media (max-width: 768px) {

	.single-service-hero .service-description {
		margin-bottom: 0;
	}

	.key-contacts-anchor{
		display: none;
	}

	.trending-link{
		margin-bottom: 0;
	}

	.single-service-hero .trending-section{
		margin-top: 0;
		margin-bottom: 57px;
	}
	/* Stack layout for mobile */
	.single-service-hero {
		flex-direction: column;
		min-height: auto;
		padding: 0 !important;
	}

	.ssh-mobile-icon{
		display: flex;
		gap: 46px;
	}

	.ssh-divider{
		display: none !important;
	}

	.ssh-divider-mobile {
		display: block !important; /* Changed from flex to block */
		width: 100% !important;
		height: 2px !important;
		margin: 46px 0 !important;
		max-width: 100% !important; /* Ensure it doesn't exceed container */
		overflow: visible !important; /* Allow gradient to render properly */
	}

	/* Make sure the path inside stretches */
	.ssh-divider-mobile path {
		vector-effect: non-scaling-stroke;
		stroke-width: 1px;
	}

	.ssh-image-container{
		margin-bottom: 0;
	}

	.single-service-hero .container {
		flex-direction: column;
		padding: 0;
		min-height: auto !important;
	}

	/* Stack image on top */
	.ssh-image-container {
		position: relative !important;
		width: 100% !important;
		height: 500px !important; /* Mobile image height */
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		z-index: 1 !important;
		padding-bottom: 0 !important; /* Remove bottom padding */
	}

	/* Reset image styles for mobile */
	.single-service-hero .ssh-image img {
		width: 100% !important;
		height: 100% !important;
	}

	/* Text content takes full width below image */
	.single-service-text-content {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 32px 24px 60px 24px!important;
		bottom: auto !important;
	}

	/* Background color section takes full width */
	.ssh-bg-image-cont {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
	}

	/* Reset single-service-content-anchor width */
	.single-service-content-anchor {
		width: 100%;
		margin-left: 0;
	}

	/* Reduce title size on mobile */
	.single-service-hero .ssh-service-title {
		font-size: 34px !important;
		max-width: 100% !important;
	}

	/* Adjust orange SVG positioning */
	.single-service-hero .service-content-wrapper .absolute {
		display:none;
	}

	/* Add spacing between social icons */
	.single-service-hero .service-content-wrapper svg {
		margin-right: 8px;
	}

	/* Service mobile styles */
	.single-service-hero .service-content-wrapper {
		max-width: 100%;
	}

	/* Adjust divider styling */
	.single-service-hero .my-\[46px\] {
		margin: 32px 0 !important;
	}
}

/* Small mobile screens */
@media (max-width: 480px) {
	.ssh-image-container {
		height: 432px !important; /* Smaller height for very small screens */
	}

	/* Further reduce spacing */
	.single-service-text-content {
		padding: 24px 16px !important;
	}
}

/* Control SVG in different viewports */
@media (max-width: 768px) {
	.single-service-hero .ssh-divider {
		margin: 32px 0; /* Slightly reduced margins on mobile */
	}
}

.ssh-main-block{
	min-height: 563px;
}

@media (max-width: 1523px) {
	.ssh-main-block{
		min-height: 1000px;
	}

	.single-service-text-content{
		padding-left: 115px;
	}
}