.main-hero {
	position: relative;
	display: flex;
	flex-direction: column;
    justify-content: flex-start;
	min-height: unset;
	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: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0.32rem;
		padding-top: 0.6rem;
		padding-bottom: 0;
	}
@media screen and (max-width: 768px) and (orientation: portrait) {
	.main-hero .content-wrap {
			padding-top: 0.4rem;
			gap: 0.4rem;
            flex-direction: column;
	}
		}
:is(.main-hero .content-wrap) .title-wrap{
			position: relative;
			display: block;
			background-color: var(--orange);
			padding-top: 0.52rem;
			padding-bottom: 0.52rem;
			border-top-right-radius: 1.36rem;
			border-bottom-right-radius: 1.36rem;
			flex-shrink: 0;
			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!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-gray);
			}
@media screen and (max-width: 768px) and (orientation: portrait) {
					:is(:is(:is(.main-hero .content-wrap) .text-btn-wrap) .text) br {
						display: none;
					}
				}
:is(.main-hero .content-wrap) .text-and-card{
            display: flex;
            padding-top: .63rem;
            flex-direction: column;
            align-items: flex-end;
            gap: .32rem;
        }
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(.main-hero .content-wrap) .text-and-card{
                align-items: flex-start;
                gap: .8rem;
        }
            }
:is(:is(.main-hero .content-wrap) .text-and-card) .text{
                color: var(--dark-grey);
            }
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(:is(.main-hero .content-wrap) .text-and-card) .text{
                    max-width: 2.98rem;
            }
                }
:is(:is(.main-hero .content-wrap) .text-and-card) .side-card{
                width: 4.13rem;
                background-color: var(--white);
                border-top-left-radius: calc(1.37rem / 2);
                border-top-right-radius: calc(1.37rem / 2);
                overflow: hidden;
            }
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(:is(.main-hero .content-wrap) .text-and-card) .side-card{
                    width: 100%;
            }
                }
:is(:is(:is(.main-hero .content-wrap) .text-and-card) .side-card) .card-header{
                    display: flex;
                    gap: 0;
                    background-color: var(--blue);
                    color: var(--white);
                    border-bottom-left-radius: calc(1.37rem / 2);
                    border-bottom-right-radius: calc(1.37rem / 2);
                    overflow: hidden;
                }
:is(:is(:is(:is(.main-hero .content-wrap) .text-and-card) .side-card) .card-header) .card-image{
                        width: 1.37rem;
                        height: 1.37rem;
                        position: relative;
                    }
:is(:is(:is(:is(:is(.main-hero .content-wrap) .text-and-card) .side-card) .card-header) .card-image) img{
                            width: calc(100% + 2px);
                            height: calc(100% + 2px);
                            object-fit: cover;
                            object-position: center;
                            position: absolute;
                            border-radius: 50%;
                            top: -1px;
                            left: -1px;
                        }
:is(:is(:is(:is(.main-hero .content-wrap) .text-and-card) .side-card) .card-header) .header-info{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        padding: .24rem;
                    }
:is(:is(:is(:is(:is(.main-hero .content-wrap) .text-and-card) .side-card) .card-header) .header-info) .label{
                            color: var(--orange);
                        }
:is(:is(:is(.main-hero .content-wrap) .text-and-card) .side-card) .card-content{
                    padding: .24rem;
                    padding-top: .36rem;
                }
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(:is(:is(.main-hero .content-wrap) .text-and-card) .side-card) .card-content{
                        padding-left: 0;
                        padding-right: 0;
                        padding-top: .4rem;
                }
                    }
:is(:is(:is(:is(.main-hero .content-wrap) .text-and-card) .side-card) .card-content) .text{
                        margin-top: .32rem;
                    }
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(:is(:is(:is(.main-hero .content-wrap) .text-and-card) .side-card) .card-content) .text{
                            max-width: 100%;
                    }
                        }
:is(:is(:is(:is(.main-hero .content-wrap) .text-and-card) .side-card) .card-content) .button-wrap{
                        margin-top: .24rem;
                    }
:is(:is(:is(:is(:is(.main-hero .content-wrap) .text-and-card) .side-card) .card-content) .button-wrap) .btn{
                            width: fit-content;
                        }