.main-hero {
	position: relative;
	display: flex;
	flex-direction: column;
    justify-content: flex-start;
	min-height: 6.5rem;
	overflow: hidden;

}
@media screen and (max-width: 768px) and (orientation: portrait) {
	.main-hero {
		min-height: auto;

}
	}
.main-hero .desktop-background-image-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		pointer-events: none;
	}
@media screen and (max-width: 768px) and (orientation: portrait) {
	.main-hero .desktop-background-image-wrap {
			display: none;
	}
		}
:is(.main-hero .desktop-background-image-wrap) .background-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
			pointer-events: none;
		}
.main-hero .mobile-img {
		display: none;
		position: relative;
	}
@media screen and (max-width: 768px) and (orientation: portrait) {
	.main-hero .mobile-img {
			display: block;
	}
		}
.main-hero .container{
		margin-top: 0;
		margin-bottom: 0;
	}
.main-hero .content-wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0.32rem;
		padding-top: 0.95rem;
		padding-bottom: 0.4rem;

	}
@media screen and (max-width: 768px) and (orientation: portrait) {
	.main-hero .content-wrap {
			padding-top: 0.4rem;
			gap: 0.4rem;

	}
		}
:is(.main-hero .content-wrap) .title-wrap{
			position: relative;
			display: block;
			background-color: var(--orange);
			padding-top: 0.52rem;
			padding-bottom: 0.52rem;
			min-width: 2.44rem;
			border-top-right-radius: 1.36rem;
			border-bottom-right-radius: 1.36rem;
			hyphens: initial;
		}
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(.main-hero .content-wrap) .title-wrap{
				padding-top: 0.4rem;
				padding-bottom: 0.4rem;
				padding-right: 0.45rem;
		}
				.pr-15:is(:is(.main-hero .content-wrap) .title-wrap){
					padding-right: 0.15rem!important;
				}
				.pr-25:is(:is(.main-hero .content-wrap) .title-wrap){
					padding-right: 0.25rem!important;
				}
				.pr-35:is(:is(.main-hero .content-wrap) .title-wrap){
					padding-right: 0.35rem!important;
				}
				.pr-45:is(:is(.main-hero .content-wrap) .title-wrap){
					padding-right: 0.45rem!important;
				}
				.pr-55:is(:is(.main-hero .content-wrap) .title-wrap){
					padding-right: 0.55rem!important;
				}
			}
.pr-60:is(:is(.main-hero .content-wrap) .title-wrap){
				padding-right: 0.6rem;
			}
.pr-80:is(:is(.main-hero .content-wrap) .title-wrap){
				padding-right: 0.8rem;
			}
.pr-100:is(:is(.main-hero .content-wrap) .title-wrap){
				padding-right: 1rem;
			}
.pr-120:is(:is(.main-hero .content-wrap) .title-wrap){
				padding-right: 1.2rem;
			}
.pr-140:is(:is(.main-hero .content-wrap) .title-wrap){
				padding-right: 1.4rem;
			}
:is(:is(.main-hero .content-wrap) .title-wrap)::before{
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				background-color: var(--orange);
				position: absolute;
				top: 0;
				right: 99%;
				z-index: -1;
			}
:is(:is(.main-hero .content-wrap) .title-wrap) .title{
				position: relative;
				color: var(--blue);
				z-index: 1;
			}
:is(:is(:is(.main-hero .content-wrap) .title-wrap) .title) span{
					color: white;
				}
:is(.main-hero .content-wrap) .text-btn-wrap{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			gap: 0.24rem;
			max-width: 5.22rem;
		}
:is(:is(.main-hero .content-wrap) .text-btn-wrap) .text{
				color: var(--dark-grey);
			}
@media screen and (max-width: 768px) and (orientation: portrait) {
					:is(:is(:is(.main-hero .content-wrap) .text-btn-wrap) .text) br {
						display: none;
					}
				}