.small-titles {
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0;
	font-size: var(--do-intro-small-size, 16px);
	position: relative;
	display: inline-block;
	white-space: inherit !important;
}
/* Scoped one level deeper (.intro-cont) so it beats the shared global
   `.small-titles` rule in global-frontend.css regardless of load order. */
.intro-cont .small-titles {
	background: var(--do-intro-small-bg, var(--wp--preset--gradient--primary-gradient));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: var(--do-intro-small-fill, transparent);
	color: var(--do-intro-small-color, inherit);
}
.small-titles::after {
    content: ' ';
    display: block;
    border-top: 7px solid var(--wp--preset--color--primary);
    width: 100%;
    position: absolute;
    bottom: 5px;
    opacity: 0.3;
}
.wp-block-heading.intro-title {
	font-size: var(--do-intro-title-size, 30px);
	font-weight: var(--do-intro-title-weight, 700);
	margin-top: 10px;
	line-height: var(--do-intro-title-lh, 44px);
    color: var(--do-intro-title-color, var(--wp--preset--color--text-color));
	margin-bottom: 0px;
}
.intro-cont {
	overflow: hidden;
}
.intro-cont > .intro-handler {
	overflow: hidden;
}
.intro-handler > .intro-cols-wrapper {
    box-shadow: var(--do-intro-shadow, 0px 0px 15px 0 #bfbfbf);
    border-radius: var(--do-intro-radius, 15px);
    overflow: hidden;
    margin: var(--do-intro-margin-top, 60px) auto var(--do-intro-margin-bottom, 60px);
    gap: 0;
    display: flex;
    align-items: stretch;
}
.intro-handler > .intro-cols-wrapper.image-left {
    flex-direction: row-reverse;
}

.intro-handler > .intro-cols-wrapper > .intro-cols > p {
    font-size: var(--do-intro-para-size, 18px);
    line-height: var(--do-intro-para-lh, 36px);
    color: var(--do-intro-para-color, inherit);
    margin-top: 30px;
}

.intro-handler > a.theme-btn {
    max-width: 350px;
}

.intro-handler > .intro-cols-wrapper > .intro-cols:first-child {
    width: var(--do-intro-text-width, 55%);
    padding: var(--do-intro-pad-v, 20px) var(--do-intro-pad-h, 40px);
    background: var(--do-intro-content-bg, linear-gradient(#ffffff, #ffffff) padding-box, var(--wp--preset--gradient--primary-gradient));
    border-left: var(--do-intro-accent-width, 10px) solid transparent;
    display: flex;
    flex-direction: column;
}

.intro-handler > .intro-cols-wrapper > .intro-cols:last-child {
    width: var(--do-intro-image-width, 45%);
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack children vertically */
}

/* Add these new rules for the image column */
.intro-handler > .intro-cols-wrapper > .intro-cols:last-child .wp-block-image {
    width: 100%;
    height: 100%;
    margin: 0; /* Drop the default wp-block-image bottom margin */
    flex: 1; /* Make image block fill remaining space */
}

.intro-handler > .intro-cols-wrapper > .intro-cols:last-child .wp-block-image img {
    width: 100%;
    height: 100%;
    /* Always fill the stretched column height. `min-height` wins over
       `max-height` when they conflict, so a text column taller than the cap
       no longer leaves a white gap below the image. */
    min-height: 100%;
    object-fit: var(--do-intro-image-fit, cover);
    object-position: center;
    display: block;
    border-radius: var(--do-intro-image-radius, 0px);
    max-height: var(--do-intro-image-maxh, 500px);
}
.wp-block-heading.intro-title.medium-title {
    max-width: 500px;
}
span.inline-tagline {
	color: var(--do-intro-tagline-color, var(--wp--preset--color--text-color));
	font-size: var(--do-intro-tagline-size, 20px);
	font-weight: 600;
	position: relative;
	top: 2px;
	width: auto;
	display: block;
	float: left;
	box-sizing: border-box;
	line-height: 58px;
}
.features-boxes {
    overflow: hidden;
    width: 100%;
    margin-top: var(--do-intro-features-mt, 40px);
}
.features-boxes > .feature-box {
	width: 100%;
	line-height: 26px;
	font-size: var(--do-intro-feature-size, 17px);
	color: var(--do-intro-feature-text-color, inherit);
	border-radius: 6px;
	display: flex;
	margin-bottom: var(--do-intro-feature-gap, 25px);
	align-items: center;
}
.features-boxes > .feature-box > span {
    margin-right: 10px;
    margin-top: 4px;
    font-size: 18px;
}
.features-boxes > .feature-box > span.dashicons {
	color: var(--do-intro-feature-icon-color, var(--wp--preset--color--primary));
}
.features-boxes > .feature-box > .desc {
    line-height: 34px;
}
.intro-cont .theme-btn {
	margin-top: 0px;
	max-width: 350px;
}
@media (min-width: 1200px) and (max-width: 1360px) {

}

@media (min-width: 800px) and (max-width: 1370px) and (orientation: landscape) {
	span.inline-tagline {
		font-size: 17px !important;
		margin-right: 0px !important;
		margin-bottom: 20px !important;
		display: block;
	}
	.intro-handler > .intro-cols-wrapper > .intro-cols:last-child .wp-block-image img {
        max-height: inherit;
    }
}
@media (min-width: 800px) and (max-width: 1370px) and (orientation: portrait) {
	span.inline-tagline {
		font-size: 17px !important;
		margin-right: 0px !important;
		margin-bottom: 20px !important;
		display: block;
	}
	.intro-handler > .intro-cols-wrapper > .intro-cols:last-child .wp-block-image img {
        max-height: inherit;
    }
}

@media (max-width: 767px) {
	.intro-cont {
		margin: 0px auto !important;
	}
	.wp-block-heading.intro-title {
		font-size: 21px;
		line-height: normal;
	}
	.small-titles {
		font-size: 17px;
	}
	.intro-handler > .intro-cols-wrapper,
	.intro-handler > .intro-cols-wrapper.image-left {
		margin: 40px auto 60px;
		display: block;
		flex-direction: unset;
	}
	.intro-handler > .intro-cols-wrapper > .intro-cols:first-child {
		padding: 0px 25px;
		border-left: 0px solid transparent;
	}
	.intro-handler > .intro-cols-wrapper > .intro-cols:last-child {
		padding: 0;
	}
	span.inline-tagline {
		font-size: 18px;
		top: 2px;
		display: block;
		margin-bottom: 20px;
	}
	.intro-handler > .intro-cols-wrapper > .intro-cols:first-child {
		width: 100%;
		display: block;
		flex-direction: unset;
	}
	.intro-handler > .intro-cols-wrapper > .intro-cols:last-child {
		width: 100%;
		display: block;
		flex-direction: unset;
	}

}