/**
 * Elementor defaults: make built-in widgets match the design before any styling in the editor.
 *
 * Specificity is kept at two classes: it beats Elementor's own one-class defaults
 * (.elementor-button, .elementor-heading-title) and loses to anything set in the editor
 * (Elementor prints those with four classes). Loaded only on Elementor pages and in the editor.
 *
 * How to use the variants: select a Button widget → Advanced → CSS Classes → type the class.
 *
 * @package saidul-islam
 */

/* ==========================================================================
   Headings (Elementor sets line-height: 1 on every heading)
   ========================================================================== */

.elementor-widget-heading h1.elementor-heading-title {
	line-height: 1.04;
}

.elementor-widget-heading h2.elementor-heading-title {
	line-height: 1.14;
}

.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading p.elementor-heading-title {
	line-height: 1.2;
}

.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title {
	line-height: 1.25;
}

/* Text editor: space between paragraphs (the theme resets p margins to 0). */
.elementor-widget-text-editor p + p,
.elementor-widget-text-editor p + ul,
.elementor-widget-text-editor ul + p {
	margin-top: 1em;
}

/* ==========================================================================
   Buttons: default = design primary (dark pill). Variants via CSS classes.
   ========================================================================== */

.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	border: 0;
	border-radius: var(--sdl-radius-pill, 99px);
	background-color: var(--sdl-ink, #10140f);
	color: var(--sdl-bg, #fafbf9);
	fill: currentColor;
	font-family: var(--sdl-font-body, "Manrope", sans-serif);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible {
	background-color: var(--sdl-green, #41b655);
	color: var(--sdl-on-green, #052b10);
}

/* Outline: transparent with a thin dark border ("View Work", "See Examples"). */
.sdl-btn-outline .elementor-button {
	border: 1px solid var(--sdl-line-strong, rgba(16, 20, 15, 0.22));
	background-color: transparent;
	color: var(--sdl-ink, #10140f);
}

.sdl-btn-outline .elementor-button:hover,
.sdl-btn-outline .elementor-button:focus-visible {
	border-color: var(--sdl-green, #41b655);
	background-color: transparent;
	color: var(--sdl-green-text, #2a7c38);
}

/* White: white pill with a thin border ("Email directly", "Learn More"). */
.sdl-btn-white .elementor-button {
	border: 1px solid rgba(16, 20, 15, 0.18);
	background-color: var(--sdl-white, #fff);
	color: var(--sdl-ink, #10140f);
}

.sdl-btn-white .elementor-button:hover,
.sdl-btn-white .elementor-button:focus-visible {
	border-color: var(--sdl-green, #41b655);
	background-color: var(--sdl-white, #fff);
	color: var(--sdl-green-text, #2a7c38);
}

/* Green: brand green ("Discuss a partnership", "Send a Message"). */
.sdl-btn-green .elementor-button {
	background-color: var(--sdl-green, #41b655);
	color: var(--sdl-on-green, #052b10);
}

.sdl-btn-green .elementor-button:hover,
.sdl-btn-green .elementor-button:focus-visible {
	background-color: var(--sdl-green-hover, #37a149);
	color: var(--sdl-on-green, #052b10);
}

/* Link: text with a green underline ("Ask about a task", "All services"). */
.sdl-btn-link .elementor-button {
	padding: 0 0 3px;
	border-bottom: 1.5px solid var(--sdl-green, #41b655);
	border-radius: 0;
	background-color: transparent;
	color: var(--sdl-ink, #10140f);
	font-size: 14.5px;
}

.sdl-btn-link .elementor-button:hover,
.sdl-btn-link .elementor-button:focus-visible {
	background-color: transparent;
	color: var(--sdl-green-text, #2a7c38);
}

/* Sizes: default is 16px / 16×28 (hero buttons). */
.sdl-btn-md .elementor-button {
	padding: 14px 24px;
	font-size: 15px;
}

.sdl-btn-sm .elementor-button {
	padding: 12px 22px;
	font-size: 14.5px;
}

.sdl-btn-link.sdl-btn-md .elementor-button,
.sdl-btn-link.sdl-btn-sm .elementor-button {
	padding: 0 0 3px;
}

/* Button icons: size to the text; sdl-btn-ne turns a right arrow into the design's ↗. */
.elementor-widget-button .elementor-button-content-wrapper {
	align-items: center;
	gap: 10px;
}

.elementor-widget-button .elementor-button-icon svg {
	width: 0.8em;
	height: 0.8em;
	fill: currentColor;
}

.sdl-btn-ne .elementor-button-icon svg,
.sdl-btn-ne .elementor-button-icon i {
	transform: rotate(-45deg);
}

/* ==========================================================================
   Headings: balanced line breaks (design uses text-wrap: balance on headings)
   ========================================================================== */

.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title {
	text-wrap: balance;
}

.elementor-widget-text-editor p {
	text-wrap: pretty;
}

/* ==========================================================================
   Layout utilities (Advanced → CSS Classes). Elementor Free has no per-element
   custom CSS, sticky, multi-stop gradients or pseudo-elements, so these cover the gaps.
   ========================================================================== */

/* First section slides under the transparent sticky header (add header height to its top padding). */
.elementor .e-con.sdl-under-header {
	--margin-top: calc(-1 * var(--sdl-header-h, 86px));
}

/* Hero: soft green (top right) and blue (bottom left) glows. */
.elementor .e-con.sdl-hero-glow::before {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at calc(106% - min(380px, 39vw)) calc(-10% + min(380px, 39vw)), rgba(65, 182, 85, 0.28) 0, rgba(65, 182, 85, 0) min(236px, 24vw)),
		radial-gradient(circle at calc(-10% + min(310px, 35vw)) calc(120% - min(310px, 35vw)), rgba(36, 144, 242, 0.13) 0, rgba(36, 144, 242, 0) min(202px, 23vw));
	content: "";
	pointer-events: none;
}

.elementor .e-con.sdl-hero-glow > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Section corner glows (green top right, blue bottom left). */
.elementor .e-con.sdl-bg-glow {
	background-image:
		radial-gradient(circle at 100% 0%, rgba(65, 182, 85, 0.22) 0, rgba(65, 182, 85, 0.08) 22vw, rgba(65, 182, 85, 0) 42vw),
		radial-gradient(circle at 0% 100%, rgba(36, 144, 242, 0.18) 0, rgba(36, 144, 242, 0.06) 22vw, rgba(36, 144, 242, 0) 42vw);
	background-repeat: no-repeat;
}

/* "Trusted by" band: four-stop green to blue gradient with tinted top/bottom lines. */
.elementor .e-con.sdl-trust {
	border-top: 1px solid rgba(65, 182, 85, 0.18);
	border-bottom: 1px solid rgba(36, 144, 242, 0.16);
	background: linear-gradient(100deg, #e6f6ea 0%, #f4faf4 30%, #f1f7fe 62%, #e3effc 100%);
}

/* Sticky column / stacked sticky cards (only where they fit in the window). */
@media (min-width: 768px) and (min-height: 700px) {

	.elementor .e-con.sdl-sticky {
		position: sticky;
		top: var(--sdl-sticky-top, 118px);
		align-self: flex-start;
	}

	.elementor .e-con.sdl-stack > .e-con,
	.elementor .e-con.sdl-stack > .e-con-inner > .e-con {
		position: sticky;
	}

	.elementor .e-con.sdl-stack > .e-con:nth-child(1),
	.elementor .e-con.sdl-stack > .e-con-inner > .e-con:nth-child(1) {
		top: 104px;
	}

	.elementor .e-con.sdl-stack > .e-con:nth-child(2),
	.elementor .e-con.sdl-stack > .e-con-inner > .e-con:nth-child(2) {
		top: 122px;
	}

	.elementor .e-con.sdl-stack > .e-con:nth-child(3),
	.elementor .e-con.sdl-stack > .e-con-inner > .e-con:nth-child(3) {
		top: 140px;
	}

	.elementor .e-con.sdl-stack > .e-con:nth-child(4),
	.elementor .e-con.sdl-stack > .e-con-inner > .e-con:nth-child(4) {
		top: 158px;
	}

	.elementor .e-con.sdl-stack > .e-con:nth-child(n+5),
	.elementor .e-con.sdl-stack > .e-con-inner > .e-con:nth-child(n+5) {
		top: 176px;
	}
}

/* Agency banner: on phones the text covers the photo, so use an even dark overlay for contrast. */
@media (max-width: 767px) {

	.elementor .e-con.sdl-agency::before {
		background-image: none !important;
		background-color: rgba(4, 8, 5, 0.84) !important;
		opacity: 1 !important;
	}
}

/* ==========================================================================
   Pill labels (Heading widget + class)
   ========================================================================== */

.sdl-pill-soft .elementor-heading-title,
.sdl-pill-white .elementor-heading-title,
.sdl-pill-outline .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border-radius: 99px;
	line-height: 1.4;
}

/* Soft green pill with dot ("Available for new projects" in the hero). */
.sdl-pill-soft .elementor-heading-title {
	padding: 8px 16px;
	border: 1px solid rgba(65, 182, 85, 0.28);
	background: rgba(65, 182, 85, 0.1);
	color: var(--sdl-green-deep, #1f6b2c);
	font-family: var(--sdl-font-body, "Manrope", sans-serif);
	font-size: 14px;
	font-weight: 600;
}

.sdl-pill-soft .elementor-heading-title::before,
.sdl-pill-white .elementor-heading-title::before {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sdl-green, #41b655);
	content: "";
}

/* White pill, mono caps, dot ("About Me", "Process", CTA badge). */
.sdl-pill-white .elementor-heading-title {
	padding: 8px 15px;
	border: 1px solid rgba(16, 20, 15, 0.1);
	background: var(--sdl-white, #fff);
	color: var(--sdl-green-text, #2a7c38);
	font-family: var(--sdl-font-mono, "JetBrains Mono", monospace);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sdl-pill-white .elementor-heading-title::before {
	width: 7px;
	height: 7px;
}

/* Outline pill, mono caps ("The problems we solve"). */
.sdl-pill-outline .elementor-heading-title {
	padding: 8px 18px;
	border: 1px solid rgba(16, 20, 15, 0.16);
	color: var(--sdl-text, #4e574f);
	font-family: var(--sdl-font-mono, "JetBrains Mono", monospace);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* "V/S" badge centred over the top edge of the comparison cards. */
.elementor-element.sdl-vs-badge {
	position: absolute;
	z-index: 2;
	top: -18px;
	left: 50%;
	width: auto;
	transform: translateX(-50%);
}

.sdl-vs-badge .elementor-heading-title {
	padding: 9px 16px;
	border-radius: 99px;
	background: var(--sdl-ink, #10140f);
	color: var(--sdl-bg, #fafbf9);
	font-family: var(--sdl-font-mono, "JetBrains Mono", monospace);
	font-size: 12px;
	letter-spacing: 0.1em;
	line-height: 1.3;
}

/* ==========================================================================
   Logo marquee (Image Carousel + class): continuous scroll, grey logos, faded edges
   ========================================================================== */

.sdl-logo-marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.sdl-logo-marquee .swiper-wrapper {
	transition-timing-function: linear !important;
}

.sdl-logo-marquee .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
}

.sdl-logo-marquee .swiper-slide .swiper-slide-image {
	width: auto;
	max-width: 100%;
	height: 34px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.35s ease, opacity 0.35s ease;
}

.sdl-logo-marquee .swiper-slide:hover .swiper-slide-image {
	filter: none;
	opacity: 1;
}

/* Light logos baked on a dark tile: show at tile height, never faded. */
.sdl-logo-marquee .swiper-slide .swiper-slide-image[src*="chip-dark"] {
	height: 64px;
	filter: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

	.sdl-logo-marquee .swiper-wrapper {
		transform: none !important;
	}
}

/* ==========================================================================
   Service rows (linked container + class): hover tint, pill "Learn More"
   ========================================================================== */

.sdl-pill-btn .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 20px;
	border: 1px solid rgba(16, 20, 15, 0.16);
	border-radius: 99px;
	background: var(--sdl-white, #fff);
	color: var(--sdl-ink, #10140f);
	font-family: var(--sdl-font-body, "Manrope", sans-serif);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sdl-svc-row:hover .sdl-pill-btn .elementor-heading-title,
.sdl-svc-row:focus-visible .sdl-pill-btn .elementor-heading-title {
	border-color: var(--sdl-ink, #10140f);
	background: var(--sdl-ink, #10140f);
	color: var(--sdl-bg, #fafbf9);
}

a.e-con.sdl-svc-row,
a.e-con.sdl-svc-row:hover {
	color: var(--sdl-ink, #10140f);
}

/* ==========================================================================
   Lists (Text Editor + class)
   ========================================================================== */

/* Small jobs: grid of lined items. */
.sdl-task-list ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	column-gap: clamp(20px, 2.6vw, 36px);
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sdl-line, rgba(16, 20, 15, 0.12));
	list-style: none;
}

.sdl-task-list li {
	padding: 14px 0;
	border-bottom: 1px solid rgba(16, 20, 15, 0.09);
	color: var(--sdl-ink, #10140f);
	font-size: 15px;
	line-height: 1.6;
}

/* Dash list (About cards). Colour variants: sdl-dash-blue, sdl-dash-dark. */
.sdl-dash-list {
	--sdl-dash: var(--sdl-green, #41b655);
}

.sdl-dash-list.sdl-dash-blue {
	--sdl-dash: var(--sdl-blue, #2490f2);
}

.sdl-dash-list.sdl-dash-dark {
	--sdl-dash: var(--sdl-green-text, #2a7c38);
}

.sdl-dash-list ul {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sdl-dash-list li {
	position: relative;
	padding-left: 26px;
	color: var(--sdl-text, #4e574f);
	font-size: 15px;
	line-height: 1.5;
}

.sdl-dash-list li::before {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--sdl-dash);
	content: "\2014";
}

.sdl-dash-list strong {
	color: var(--sdl-ink, #10140f);
	font-weight: 600;
}

/* ==========================================================================
   Testimonial cards (container + class): quote fills the card, name at the bottom
   ========================================================================== */

.elementor .e-con.sdl-testimonial-card > .elementor-widget-testimonial,
.elementor .e-con.sdl-testimonial-card > .e-con-inner > .elementor-widget-testimonial {
	flex-grow: 1;
}

.sdl-testimonial-card .elementor-testimonial-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-align: start;
}

.sdl-testimonial-card .elementor-testimonial-content {
	margin-bottom: 22px;
}

.sdl-testimonial-card .elementor-testimonial-meta {
	margin-top: auto;
}

/* ==========================================================================
   Check-mark grid (Icon List + class): two-column list on wide cards, one on phones
   ========================================================================== */

/* Take the full column width even when the column aligns its items to the start. */
.elementor-element.sdl-check-grid {
	align-self: stretch;
}

.sdl-check-grid .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 12px 24px;
}

.sdl-check-grid .elementor-icon-list-items .elementor-icon-list-item {
	align-items: flex-start;
	margin: 0;
	padding: 0;
}

.sdl-check-grid .elementor-icon-list-item .elementor-icon-list-icon {
	margin-top: 3px;
}

/* ==========================================================================
   Image aspect ratios (Image widget + class)
   ========================================================================== */

.elementor-widget-image.sdl-ar-3-2 img,
.elementor-widget-image.sdl-ar-16-11 img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.elementor-widget-image.sdl-ar-3-2 img {
	aspect-ratio: 3 / 2;
}

.elementor-widget-image.sdl-ar-16-11 img {
	aspect-ratio: 16 / 11;
}

.elementor-widget-image.sdl-ar-4-5 img,
.elementor-widget-image.sdl-ar-16-10 img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.elementor-widget-image.sdl-ar-4-5 img {
	aspect-ratio: 4 / 5;
}

.elementor-widget-image.sdl-ar-16-10 img {
	aspect-ratio: 16 / 10;
}

/* Focus point of cropped photos (keeps faces in frame). */
.elementor-widget-image.sdl-obj-face img {
	object-position: 50% 18%;
}

.elementor-widget-image.sdl-obj-top-right img {
	object-position: 80% 0%;
}

/* ==========================================================================
   Process steps (grid container "sdl-steps" > step containers)
   ========================================================================== */

/* Round dashed frame around the step icon; lifts on hover. */
.elementor .e-con.sdl-step-circle {
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.elementor .e-con.sdl-step-circle:hover {
	border-color: transparent;
	box-shadow: 0 22px 50px rgba(42, 124, 56, 0.16);
}

/* Step number badge in the top-left corner of the frame. */
.elementor-element.sdl-step-num {
	position: absolute;
	top: -4px;
	left: -10px;
	width: auto;
}

.sdl-step-num .elementor-heading-title {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--sdl-white, #fff);
	box-shadow: 0 4px 12px rgba(16, 20, 15, 0.1);
	color: var(--sdl-ink, #10140f);
	font-family: var(--sdl-font-mono, "JetBrains Mono", monospace);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
}

/* Dashed curved connectors between steps on wide screens (alternating down / up). */
@media (min-width: 1150px) {

	.elementor .e-con.sdl-steps > .e-con:not(:last-child)::after,
	.elementor .e-con.sdl-steps > .e-con-inner > .e-con:not(:last-child)::after {
		position: absolute;
		top: 50px;
		left: calc(50% + 78px);
		width: calc(100% - 156px);
		height: 34px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 34' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 34, 70 34, 98 8' fill='none' stroke='%2310140F' stroke-width='1.6' stroke-dasharray='6 6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
		content: "";
		pointer-events: none;
	}

	.elementor .e-con.sdl-steps > .e-con:nth-child(even):not(:last-child)::after,
	.elementor .e-con.sdl-steps > .e-con-inner > .e-con:nth-child(even):not(:last-child)::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 34' preserveAspectRatio='none'%3E%3Cpath d='M2 26 C 30 0, 70 0, 98 26' fill='none' stroke='%2310140F' stroke-width='1.6' stroke-dasharray='6 6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	}
}

/* Long unbroken values (email addresses) wrap instead of overflowing: add "sdl-break" to a Heading or Text widget */
.elementor-widget.sdl-break,
.elementor-widget.sdl-break .elementor-heading-title {
	min-width: 0;
	overflow-wrap: anywhere;
}