.hero_banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--white);
    & > .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        z-index: 2;
        flex-wrap: wrap;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        &.left {
            align-items: flex-start;
            text-align: left;
        }

        &.center {
            align-items: center;
            text-align: center;
        }

        &.right {
            align-items: flex-end;
            text-align: right;
        }

        @media (max-width: 991px) {
            align-items: center !important;
            text-align: center !important;
        }

        & .hero_banner_inner {
            max-width: 600px;
            position: relative;
            z-index: 1;
            top:-10%;
            left:2%;
            @media (max-width: 991px) {
                align-items: center;
                max-width: 100%;
                top:-10%;
                left:2%;
            }

            .main_content_area {
                display: flex;
                flex-direction: column;
                align-items: inherit;
                gap: clamp(16px, 3vw, 24px);
                padding: 3rem;
                border-radius: 15px;    
                background: linear-gradient(90deg, #1E1E1E 0%, #3E3E3E 100%);
                & h1 {
                    color: var(--white);
                    margin: 0;    
                }
    
                & .text_area {
                    & p {                        
                        line-height: 1.6;
                        color: inherit;
                        margin: 0;
                        font-size: 18px;                      
                    }
                }
                @media (max-width: 991px) {
                    & .text_area {
                        & p {                            
                            font-size: 14px;                          
                        }
                    }
                }
    
                & .btn_wrapper {
                    margin-top: clamp(24px, 4vw, 40px);
                    display: flex;
                    gap: 1rem;
                    margin: 0;
                    @media (max-width: 991px) {
                        flex-direction: column;
                        align-items: center;
                    }
                    & .btn_primary {
                        display: inline-flex;
                        align-items: center;
                        gap: 18px;
                        min-width: 223px;
                        &.btn_primary--transparent {
                            color: var(--white);
                            border-color: var(--white);
                            &:hover {
                                color: var(--black);
                                background: var(--white);
                            }
                        }
                    }
                }
            }

            & .hero_banner_badges {
                display: flex;
                justify-content: space-between;
                gap: 1rem;
                margin-top: 2.5rem;
            }

            & .hero_banner_badge {
                display: inline-flex;
                align-items: center;
                gap: 0.8rem;
                padding: 0.6rem 1.2rem;
                background: #fff;
                color: var(--black);
                border-radius: 7px;
                font-weight: bold;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
            }

            & .hero_banner_badge_icon {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E43D2F'/%3E%3Cpath d='M6 10.2L8.2 12.4L14 6.6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                flex: 0 0 auto;
            }

            & .hero_banner_badge_text {
                font-size: 14px;
                font-weight: bold;
            }
            
        }
    }
    & .hero_banner_image_desktop {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        position: absolute;
        inset: 0;
        z-index: 0;
    }
}

.hero_banner.has_google_reviews {
    margin-bottom: clamp(32px, 5vw, 56px);
}

.hero_banner .hero_banner_google_reviews {
    position: absolute;
    right: 0;
    bottom: -34px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.8vw, 20px);
    padding: clamp(8px, 1.6vw, 15px) clamp(16px, 2.2vw, 28px);
    background: #f4f4f4;
    border-radius: 20px 0 0 20px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
    min-width: min(92vw, 430px);
}

.hero_banner .hero_banner_google_reviews_logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38.62px;
    height: 38.62px;
}

.hero_banner .hero_banner_google_reviews_logo svg {
    display: block;
    width: clamp(40px, 4vw, 56px);
    height: auto;
}

.hero_banner .hero_banner_google_reviews_copy {
    display: flex;
    flex-direction: column;
    color: #1E1E1E;
}

.hero_banner .hero_banner_google_reviews_copy .hero_banner_google_reviews_rating {
    font-size: 18px;
    font-weight: 700;
}

.hero_banner .hero_banner_google_reviews_copy .hero_banner_google_reviews_count {
    font-size: 12px;
    font-weight: 400;
}

.hero_banner .hero_banner_google_reviews_rating {
    font-size: 18px;
    line-height: 1.1;
    font-weight: 700;
}

.hero_banner .hero_banner_google_reviews_count {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.hero_banner .hero_banner_google_reviews_people {
    display: flex;
    align-items: center;
    width: 127.57px;
    height: 100%;
}

.hero_banner .hero_banner_google_reviews_person {
    width: clamp(36px, 3.2vw, 56px);
    height: clamp(36px, 3.2vw, 56px);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero_banner .hero_banner_google_reviews_person + .hero_banner_google_reviews_person {
    margin-left: -10px;
}

.hero_banner .hero_banner_google_reviews_person.person_1 {
    background-image: radial-gradient(circle at 50% 28%, #ffd4b4 15%, #eab08b 31%, transparent 33%), linear-gradient(165deg, #5f6d7e, #9aa8b8);
}

.hero_banner .hero_banner_google_reviews_person.person_2 {
    background-image: radial-gradient(circle at 50% 27%, #ffe0c8 14%, #ebbb9e 30%, transparent 32%), linear-gradient(165deg, #414142, #8f8f8f);
}

.hero_banner .hero_banner_google_reviews_person.person_3 {
    background-image: radial-gradient(circle at 50% 26%, #ffdbca 15%, #eeb79d 30%, transparent 32%), linear-gradient(165deg, #f3aa63, #d0855a);
}

@media (max-width: 1024px) {
    .hero_banner > .container {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .hero_banner > img {
        bottom: unset;
        top: 0;
        height: 100%!important;
	}
}
@media (max-width: 991px) {
    .hero_banner.has_google_reviews {
        margin-bottom: 0;
    }

    .hero_banner .hero_banner_google_reviews {
        position: static;
        margin: 14px auto 0;
        width: min(100%, 420px);
        min-width: 0;
    }

    .hero_banner .hero_banner_google_reviews_rating {
        font-size: clamp(22px, 5.4vw, 32px);
    }

    .hero_banner .hero_banner_google_reviews_count {
        font-size: clamp(14px, 3.6vw, 18px);
    }
}
@media (max-width: 767px) {
    .hero_banner > .container {
        max-width: 365px;
    }
    .hero_banner {
        min-height: 469px;
    }
    .hero_banner_badges {
        justify-content: center;
    }
    .hero_banner_badge_text {
        font-size: 9px !important;
    }
    #section-hero_banner-1{
        .btn_primary {
            span {
                font-size: 14px!important;
            }
        }
        .btn_primary--transparent {
            span {
                font-size: 14px!important;
            }
        }
    }
}