/* Container */

.bloom-services-section {
    position: relative;
    box-sizing: border-box;
	margin: 100px auto;
}

.bloom-services-section .bloom-services-container {
	display: flex;
	gap: 30px;
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	align-items: flex-start;
	box-sizing: border-box;
	overflow: visible;
	padding: 0 16px;
	justify-content: space-between;
}

/* LEFT: fixed width + sticky */
.bloom-services-section .bloom-services-left {
    flex: 0 0 548px;           /* exact 548px */
    width: 548px;
    max-width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 140px;                /* change if you want different sticky offset */
    height: fit-content;
    padding-bottom: 20px;
}

/* RIGHT: fixed width */
.bloom-services-section .bloom-services-right {
    flex: 0 0 581px;           /* exact 581px */
    width: 581px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* Inner list fix (if some JS set a max-height) */
.bloom-services-section .bloom-services-list {
    max-height: none !important;
    overflow: visible !important;
}

/* Responsive: switch to fluid layout below 1200px */
@media (max-width: 1200px) {
    .bloom-services-section .bloom-services-container {
        padding: 0 20px;
        gap: 28px;
    }

    .bloom-services-section .bloom-services-left,
    .bloom-services-section .bloom-services-right {
        flex: 0 0 auto;
        width: 100%;
        position: static;       /* disable sticky to avoid layout issues on narrower viewports */
    }
}

/* Mobile: stacked layout below 768px */
@media (max-width: 768px) {
    .bloom-services-section .bloom-services-container {
        flex-direction: column;
        gap: 25px;
        padding: 0 16px;
    }

    .bloom-services-section .bloom-services-left,
    .bloom-services-section .bloom-services-right {
        width: 100%;
        flex: 0 0 auto;
        position: static;       /* ensure normal flow on mobile */
    }
}



/* Permanent fix for sticky: allow .mainblock to not block sticky behaviour */
.mainblock {
  overflow: visible !important;
  transform: none !important;
  -webkit-overflow-scrolling: auto !important;
}

/* Ensure bloom sticky rules */
.bloom-services-section,
.bloom-services-container {
  position: relative !important;
  overflow: visible !important;
}

.bloom-services-left {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 140px !important; /* change to match header height if needed */
  align-self: start !important;
  z-index: 80 !important;
  will-change: transform !important;
}

.bloom-services-list {
  max-height: none !important;
  overflow: visible !important;
}

/* Responsive: disable sticky on narrow screens */
@media (max-width: 1024px) {
  .bloom-services-container { flex-direction: column; gap: 20px; }
  .bloom-services-left { position: static !important; top: auto !important; will-change: auto !important; }
}


.bloom-service-title::before {
	content: "";
	width:auto;
	height: 100%;
	position: absolute;
}


/* Smooth transition */
.bloom-service-item .bloom-service-icon,
.bloom-service-item-chevron {
    transition: transform 0.3s ease;
}

/* On hover — image moves 10px right */
.bloom-service-item:hover .bloom-service-icon {
    transform: translateX(10px);
}

/* On hover — arrow moves 10px left */
.bloom-service-item:hover .bloom-service-item-chevron {
    transform: translateX(-10px);
}



/* Optional: prevent parent from clipping sticky (if you have overflow set elsewhere) */
.bloom-services-section,
.bloom-services-section .bloom-services-container,
.bloom-services-section .bloom-services-right {
    overflow: visible;
}


.bloom-services-intro {
	color: #4B5563;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0%;
	margin-bottom: 70px;
}

.bloom-services-cta-button {
	background-color: #FA4616;
	color: #fff;
	padding: 12px 35px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0%;
	line-height: 28px;
}

.bloom-services-cta-title {
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 0%;
	vertical-align: middle;
	margin-bottom: 5px;
}
.bloom-services-cta-sub {
	font-weight: 400;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0%;
	margin-bottom: 20px;
}

.bloom-services-cta-inner {
	background-color: #E7F1FF;
	border-radius: 8px;
	width: 525px;
	height: 285px;
}

.bloom-services-cta {
	background-position: bottom right !important;
	width: 100%;
	height: 100%;
	padding: 24px;
	background-size: contain !important;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-size: 41% 83% !important;
}

.bloom-services-cta-icon {
	width: 58px;
	height: auto;
	margin-bottom: 15px;
}
.bloom-service-title {
	font-size: 28px !important;
	line-height: 28px;
	letter-spacing: 0%;
}


.bloom-service-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 38px;
	border-bottom: 1px solid #D3D3D3;
	padding-bottom: 20px;
}
.bloom-service-item-body {
	max-width: 100%;
	width: 441px;
	display: flex;
	flex-direction: column;
}
.bloom-service-item-chevron {
	color: #1F2937;
	width: fit-content;
	height: fit-content;
	font-size: 37px;
	line-height: 0.5;
}

@media (max-width: 768px) {
	.bloom-service-title h2 {
		font-size: 22px;
	}

	.bloom-service-desc p {
		font-size: 18px !important;
	}
	.bloom-service-item {
		gap: 25px;
	}


}

@media (max-width: 500px) {

	.bloom-service-item-left img {
		width: 20px;
		height: 30px;
	}

	.bloom-service-item-body {
		width: 350px;
	}

	.bloom-service-item {
		gap: 25px;
	}

}