.level3-hero-container { padding: 100px 0; }
.level3-hero-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.9; border-radius: 10px; box-shadow: 0 0 22px rgba(0, 0, 0, 0.3); }
.level3-hero-content-head {padding: 24px 27px;width: fit-content; color: var(--sof-white); max-width: 100%;}
.level3-hero-content-head.theme-white {color: var(--sof-black);}
.l3h-head-outer {width: calc(100% + 60px);}
.level3-hero-content h1 { font-size: 75px; margin-bottom: 8px; text-transform: uppercase; }
.level3-hero-content h1 span{text-transform: none;font-size: 20px;color: #fff;margin-left: 15px;letter-spacing: 0;font-family: var(--sof-primary-font);}
.level3-hero-content .theme-white  h1 span{color: var(--sof-black);}
.level3-hero-content-body { margin-top: 104px; margin-left: 14.3%; line-height: 1.444; max-width: 560px; }
.level3-hero-content { width: 60%; display: block; position: relative; }
.level3-hero-image { position: relative; width: 40%; }
.level3-hero-image-inner { position: absolute; height: 100%; width: 70%; left: 50%; transform: translateX(-50%); bottom: 0; }
.level3-hero-image-inner>img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }

.lv3-hero-lg .level3-hero-content { width: 70%; }
.lv3-hero-lg .level3-hero-image { width: 30%; }
.lv3-hero-lg .level3-hero-image-inner { width: 100%; }
/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {
	.level3-hero-container { padding: 80px 0; }
	.level3-hero-content h1 { font-size: 65px; }
	.l3h-head-outer {width: 100%;}
}

/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
	.level3-hero-container { padding: 60px 0; }
	.level3-hero-content h1 { font-size: 55px; margin-bottom: 20px; }
}

/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:767.98px) {
	.level3-hero-container { padding: 50px 0; }

	.level3-hero-content h1 span{display: block; margin: 0; margin-top: 5px;}
	.level3-hero-image { display: none; }
	.level3-hero-content ,.lv3-hero-lg .level3-hero-content { width: 100%; }
	.level3-hero-content-body { margin: 45px 0 0 0; max-width: 100%; }
	.level3-hero-has-image .level3-hero-content-body { padding-right: 140px; position: relative; }
	.level3-hero-image-mob { position: absolute; top: 0; right: 15px; transform: translateX(50%); width: 228px; height: 100%; max-height: 228px; }
	.level3-hero-image-mob>img { width: 100%; height: 100%; object-position: bottom; object-fit: contain; }

	.level3-hero-image-mob-top{width: 100%;margin: -15px auto 30px;height: 340px;}
	
}

/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width:575.98px) {
	.level3-hero-content-head{width: 100%;}
 }

/* ======================================================
! Extra small devices (portrait phones, less than 370px)
====================================================== */
@media (max-width:369.98px) { }