/* =========================================================
   HOME PAGE - "Our Clients" + "Our Project Flow" spacing
   ---------------------------------------------------------
   Loaded last on index.html so it overrides style.css and the
   overlapping breakpoint rules in responsive.css without
   editing them.
   ========================================================= */


/* "Our Clients" spacing lives in clients-spacing.css (shared with About Us). */


/* ---------------------------------------------------------
   OUR PROJECT FLOW
   --------------------------------------------------------- */

/* Intro copy sits above the decorative outline shape */
.project-area.style-three .section-title,
.project-area.style-three .project-bs {
	position: relative;
	z-index: 1;
}

.project-area.style-three .project-bg-shape1,
.project-area.style-three .project-bg-shape2 {
	pointer-events: none;
}

/* "OUR PROJECT FLOW" label. On this light-grey section the pill was
   transparent with a white border (nearly invisible) and its orange
   dash hung off the left edge. Give it a solid white pill and seat the
   dash inside it. */
.project-area.style-three h5.section-sub-title {
	background-color: #fff;
	border: 1px solid rgba(255, 60, 0, 0.18);
	box-shadow: 0 2px 10px rgba(5, 10, 30, 0.05);
	margin-left: 0;
	padding: 6px 26px 6px 60px;
	white-space: nowrap;
}

.project-area.style-three h5.section-sub-title::before {
	left: 20px;
	top: 50%;
	height: 6px;
	transform: translateY(-50%);
}

/* Decorative line art (top right). It was pinned 0-240px from the top of
   the section, which is exactly where the intro paragraph sits, so the
   lines cut through the text. Keep the art, but start it below the
   paragraph, next to the step cards. */
.project-area.style-three .project-bg-shape1 {
	z-index: -1;
}

@media (min-width: 992px) {
	.project-area.style-three .project-bg-shape2 {
		top: 350px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.project-area.style-three .project-bg-shape2 {
		top: 410px;
	}
}

/* Tighter gap between the title block and the four steps */
.project-area.style-three .section-title.text-left {
	margin-bottom: 50px;
}

/* Equal-height step cards (desktop 4-up and tablet 2-up). The
   connector arrows are background images anchored to the card's
   top / bottom edge, so they stay aligned when the cards share
   one height. */
@media (min-width: 768px) {
	.project-area.style-three .project-bs > [class*="col-"] {
		display: flex;
	}

	.project-area.style-three .project-bs .project-single-box {
		width: 100%;
		margin-bottom: 30px;
	}
}

/* Card text. The titles inherited a 55px line-height, so any title
   that wrapped to two lines (common on 1200-1500px laptops where the
   cards are ~220px wide) had a huge gap between its lines. */
.project-area.style-three .project-title {
	line-height: 1.3;
	margin-bottom: 14px;
	font-size: clamp(17px, 1.35vw, 20px);
	text-wrap: balance;
}

.project-area.style-three .project-des {
	text-wrap: pretty;
}

/* Desktop: the section was 120px tall of empty space above the title. */
@media (min-width: 992px) {
	.project-area.style-three {
		padding-top: 90px;
		padding-bottom: 60px;
	}
}

/* Laptop widths: cards are narrow, so slightly tighter body text */
@media (min-width: 992px) and (max-width: 1499px) {
	.project-area.style-three .project-des {
		font-size: 15px;
		line-height: 26px;
	}
}

/* Tablet + mobile: the connectors are hidden and the cards stack,
   so the big desktop gaps just read as empty space. */
@media (max-width: 991px) {
	.project-area.style-three {
		padding: 60px 0 40px;
	}

	.project-area.style-three .section-title.text-left {
		margin-bottom: 20px;
	}

	/* the title and the paragraph are separate columns: no extra
	   gap between them once they stack */
	.project-area.style-three .row.align-items-center > [class*="col-"]:first-child .section-title.text-left {
		margin-bottom: 8px;
	}

	.project-area.style-three .project-single-box {
		margin-bottom: 20px;
		padding: 32px 18px 30px;
	}

	.project-area.style-three .project-title {
		margin-top: 12px;
		font-size: 20px;
	}
}

@media (max-width: 575px) {
	.project-area.style-three {
		padding: 44px 0 24px;
	}

	.project-area.style-three p.section-des {
		font-size: 15px;
		line-height: 26px;
	}

	.project-area.style-three .project-des {
		font-size: 15px;
		line-height: 26px;
	}
}