.section-hero {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    overflow: hidden;
    padding-bottom: 50px;
    padding-top: 30px!important
}

.hero-shadow-1 {
    background: #0533E64D;
    width: 49%;
    height: 76%;
    position: absolute;
    filter: blur(120px);
    right: 5%;
    top: 0;
    z-index: -1;
    transform: rotate(14deg);
    animation: move-sh-1 6s alternate ease infinite
}

.hero-shadow-2 {
    background: #58F7A333;
    width: 37%;
    height: 37%;
    position: absolute;
    filter: blur(200px);
    left: 10%;
    bottom: 0;
    z-index: -1;
    box-shadow: 0 29px 50px 50px #B7B7B7CF;
    animation: move-sh-2 4s alternate ease infinite
}

.hero-shadow-3 {
    background: #69E7DC66;
    width: 36%;
    height: 42%;
    position: absolute;
    filter: blur(120px);
    left: 44%;
    bottom: 20%;
    z-index: -1;
    box-shadow: 10px 10px 50px 60px #69E7DC66;
    animation: move-sh-3 8s alternate ease infinite
}

.hero-shadow-4 {
    background: #E7E7E796;
    width: 57%;
    height: 34%;
    position: absolute;
    filter: blur(120px);
    left: 0;
    bottom: 0;
    z-index: -1
}

.hero-content {
    max-width: 100%
}

.section-hero-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 132px;
    overflow: hidden
}

.section-hero-wrap::after {
    content: '';
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 13%;
    z-index: -1
}

.hero-media-wrap {
    height: 100%;
    min-height: 400px;
    position: relative;
    order: -1;
    max-width: 500px;
    width: 100%;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    overflow: hidden /* prevent Safari from clipping SVG drop-shadows */
}

.hero-media {
    width: 110%;
    overflow: hideen /* prevent Safari from clipping SVG drop-shadows */
}

.bg-svg {
    position: absolute;
    top: 19%;
    right: -11%;
    z-index: -1;
    left: 0;
    max-width: 85%
}

.svg-1 {
    position: absolute;
    top: 20.5%;
    max-width: 69%;
    left: 8%;
    z-index: 0
}

.svg-2 {
    position: absolute;
    left: 74%;
    top: 25%;
    max-width: 16%;
    -webkit-filter: drop-shadow(0 4px 10px #00000040);
    filter: drop-shadow(0 4px 10px #00000040)
}

.svg-3 {
    position: absolute;
    left: 30%;
    top: 28%;
    max-width: 27%;
    -webkit-filter: drop-shadow(0 4px 10px #00000040);
    filter: drop-shadow(0 4px 10px #00000040)
}

.svg-4 {
    position: absolute;
    left: 54%;
    top: 38%;
    max-width: 18%;
    z-index: 2;
    -webkit-filter: drop-shadow(0 4px 10px #00000040);
    filter: drop-shadow(0 4px 10px #00000040)
}

.svg-5 {
    position: absolute;
    left: 26%;
    top: 48%;
    -webkit-filter: drop-shadow(0 4px 10px #00000040);
    filter: drop-shadow(0 4px 10px #00000040);
    max-width: 30%;
    z-index: 2
}

.svg-6 {
    position: absolute;
    left: 29%;
    max-width: 13%;
    top: 18%;
    /* -webkit-filter: drop-shadow(0 4px 10px #00000040); */
    /* filter: drop-shadow(0 4px 10px #00000040) */
}

.hero-circles {
    position: absolute;
    top: 15%;
    right: 0;
    z-index: -2;
    left: 4%;
    width: 93%;
    max-width: 700px
}

.hero-media .icon-star {
    color: var(--primary);
    position: absolute
}

.icon-star.shine-1 {
    font-size: 45px;
    top: 13%;
    left: 70%
}

.icon-star.shine-2 {
    font-size: 15px;
    top: 18%;
    left: 44%
}

.icon-star.shine-3 {
    font-size: 25px;
    top: 22%;
    left: 62%
}

.icon-star.shine-4 {
    font-size: 23px;
    top: 36%;
    left: 20%
}

.icon-star.shine-5 {
    font-size: 15px;
    top: 41%;
    left: 34%
}

.icon-star.shine-6 {
    font-size: 23px;
    top: 58%;
    left: 0
}

.icon-star.shine-7 {
    font-size: 25px;
    top: 20%;
    left: 3%
}

.rate-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px
}

.profile-img {
    border: 3px solid #FFF;
    width: 53px;
    border-radius: 100%;
    overflow: hidden;
    display: inline-flex;
    background: #fff;
    height: 53px
}

.rate-images {
    display: flex
}

.rate-images .profile-img:not(:first-child) {
    margin-left: -20px
}

.profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.rate-num {
    font-size: 16px;
    color: #021250;
    line-height: 28px;
    font-variation-settings: "wght" 400,"wdth" 100
}

.rate-vale {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.rate-star {
    display: flex;
    gap: 4px
}

.rate-star i {
    width: 24px;
    height: 24px;
    border-radius: 2.5px;
    background: #219653;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 1
}

.hero-content .title {
    font-size: 36px;
    line-height: 50px;
    text-transform: capitalize;
    color: var(--color_main)
}

.hero-content .subtitle {
    font-size: 27px;
    line-height: 65px;
    text-transform: capitalize;
    color: var(--color_main);
    white-space: nowrap;
    height: 65px;
    overflow: hidden;
    margin-bottom: 10px
}

.star-button.link {
    height: 48px
}

.sliding-wrapper {
    transition: transform 0.5s ease-in-out;
    display: inline-flex;
    flex-direction: column;
    margin-left: 8px
}

.sliding-text {
    display: block;
    margin: 0;
    color: var(--primary);
    position: relative;
    width: fit-content
}

.sliding-text:before,.sliding-text:after {
    content: "\e912";
    font-family: "icomoon";
    position: absolute;
    color: var(--primary);
    opacity: 0;
    transition: 0.5s cubic-bezier(.55,.09,.68,.53);
    transform: scale(.5)
}

.sliding-text:before {
    font-size: 22px;
    top: -31px;
    right: -3px
}

.sliding-text:after {
    font-size: 37px;
    top: -18px;
    right: -35px
}

.sliding-text.active:before,.sliding-text.active:after {
    animation: fade-star 0.5s ease-in 1 forwards 0.5s
}

.sliding-text.active:after {
    animation-delay: 0.8s
}

.hero-content .content {
    max-width: 100%;
    font-size: 16px;
    color: var(--color_text);
    margin: 10px 0
}

.hero-btns {
    display: flex;
    gap: 12px;
    margin: 28px 0 30px
}

.slide-content .title {
    color: var(--white);
    font-family: var(--bold_font);
    font-size: 23px;
    line-height: normal;
    opacity: 0
}

.slide-content .subtitle {
    color: var(--white);
    font-size: 18px;
    line-height: 28px;
    opacity: 0;
    font-family: var(--bold_font);
    margin-bottom: 8px
}

.slide-content .subtitle img {
    max-width: 35px;
    margin-left: 8px
}

.subtitle i {
    font-size: 19px;
    margin-left: 8px;
    vertical-align: -5px
}

.slide-content .content {
    color: var(--white);
    font-size: 14px;
    line-height: 28px;
    margin-top: 8px;
    opacity: 0
}

.slide-content .link {
    margin-top: 20px;
    opacity: 0
}

.buttons-wrap {
    display: flex;
    align-items: center;
    gap: 8px
}

.buttons-wrap .button {
    min-width: unset;
    font-size: 14px;
    padding: 5px 10px
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .title {
    animation: fadeInLeft 1.5s ease-out 0.5s forwards
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .subtitle {
    animation: fadeInLeft 1.5s ease-out 0.7s forwards
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .content {
    animation: fadeInLeft 1.5s ease-out 0.9s forwards
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .link {
    animation: fadeInLeft 1.5s ease-out 1.1s forwards
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .slider-video {
    animation: fadeInLeft 1.5s ease-out 1.3s forwards,getFull 1.5s ease-out 2s forwards
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .title {
    animation: fadeInRight 1.5s ease-out 0.5s forwards
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .subtitle {
    animation: fadeInRight 1.5s ease-out 0.7s forwards
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .content {
    animation: fadeInRight 1.5s ease-out 0.9s forwards
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .link {
    animation: fadeInRight 1.5s ease-out 1.1s forwards
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .slider-video {
    animation: fadeInRight 1.5s ease-out 1.3s forwards,getFull 1.5s ease-out 2s forwards
}

.slider-navigation {
    position: absolute;
    bottom: 20px
}

.slider-inner {
    position: relative
}

.brands-title {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 14px;
    color: #000A30
}

.brands-title .title {
    font-variation-settings: "wght" 600,"wdth" 100;
    color: #000A30;
    position: relative;
    margin-right: 5px;
    transition: 0.4s ease
}

.brands-title .title:before {
    content: "\e912";
    font-family: icomoon;
    font-size: 22px;
    position: absolute;
    left: 0;
    top: 15px;
    height: 0;
    opacity: 0;
    transform: scale(.2);
    transition: opacity 0.2s ease,transform 0.5s ease-out
}

.brands-title .title.active {
    color: var(--primary)
}

.brands-title .title.active:before {
    transform: translate(-20px,-40px) scale(1);
    opacity: 1
}

.brands-title strong {
    font-variation-settings: "wght" 600,"wdth" 100
}

.hero-brands.sw {
    max-width: 80%;
    margin: -50px auto 0
}

.hero-brands.sw .swiper-brands {
    border: none
}

.short-content {
    display: flex;
    align-items: first baseline;
    gap: 7px;
    font-size: 14px
}

.hero-content .short-content::before {
    content: '';
    min-width: 9px;
    height: 9px;
    background: var(--primary);
    display: inline-block;
    border-radius: 3px
}

.short-content i {
    color: var(--primary);
    font-size: 20px;
    margin: 0 1px 0 3px
}

@media screen and (min-width: 576px) {
    .hero-media-wrap {
        min-height:551px;
        max-width: 700px;
        top: -51px
    }

    .hero-circles {
        top: 6%;
        width: 85%
    }
}

@media screen and (min-width: 768px) {
    .rate-box {
        gap:21px;
        margin-bottom: 40px
    }

    .hero-content .title {
        font-size: 50px;
        line-height: 75px
    }

    .hero-content .subtitle {
        font-size: 44px;
        height: 80px;
        margin-bottom: 16px
    }

    .hero-content .content {
        font-size: 16px;
        margin: 16px 0 32px
    }
}

@media screen and (min-width: 992px) {
    .hero-content {
        max-width:58%
    }

    .section-hero {
        position: relative;
        margin-bottom: 0;
        padding-bottom: 170px;
        padding-top: 226px!important
    }

    .hero-content .content {
        max-width: 84%
    }

    .section-hero-wrap::after {
        content: none
    }

    .hero-media-wrap {
        position: absolute;
        right: 0;
        left: unset;
        top: 0;
        width: 43%;
        overflow: hidden;
        max-width: 850px
    }

    .section-hero-wrap {
        padding-top: 0
    }

    .hero-circles {
        top: 15%;
        width: 93%
    }
}

@media screen and (min-width: 1200px) {
    .hero-content {
        max-width:56%
    }

    .hero-content .title {
        font-size: 58px
    }

    .hero-content .subtitle {
        font-size: 48px;
        line-height: 80px;
        height: 80px;
        margin-bottom: 16px
    }

    .hero-btns {
        gap: 18px;
        margin: 32px 0 20px
    }

    .hero-media-wrap {
        width: 46%
    }
}

@media screen and (min-width: 1400px) {
    .hero-content {
        max-width:45%
    }

    .hero-media-wrap {
        width: 54%
    }
}

@media screen and (min-width: 1700px) {
    .hero-media-wrap {
        max-width:940px
    }

    .bg-svg {
        right: -5%
    }
}

@media screen and (min-width: 2000px) {
    .hero-media-wrap {
        left:50%;
        width: 54%;
        max-width: 1000px
    }

    .bg-svg {
        right: 0
    }
}

@media screen and (max-width: 1399.99px) {
    .hero-content {
        max-width:56%
    }
}

@media screen and (max-width: 1119.99px) {
    .hero-content {
        max-width:58%
    }

    .hero-content .title {
        font-size: 50px;
        line-height: 75px
    }

    .hero-content .subtitle {
        font-size: 44px
    }

    .svg-5 {
        top: 42%
    }
}

@media screen and (max-width: 991.99px) {
    .section-hero-wrap {
        position:relative;
        display: flex;
        flex-direction: column;
        padding-top: 132px;
        overflow: visible
    }

    .section-hero-wrap::after {
        content: '';
        background: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 13%;
        z-index: -1
    }

    .section-hero {
        position: unset;
        margin-bottom: 0;
        padding-bottom: 50px;
        padding-top: 30px!important
    }

    .hero-media-wrap {
        order: unset;
        margin-bottom: 40px
    }

    .bg-svg {
        right: 0
    }

    .svg-1 {
        max-width: 83%
    }

    .svg-5 {
        top: 66%
    }

    .hero-content {
        max-width: 100%
    }

    .hero-content .content {
        max-width: 100%
    }

    .hero-shadow-1 {
        width: 100%;
        height: 43%;
        right: 0;
        top: 0;
        transform: none;
        animation: none
    }

    .hero-shadow-2 {
        width: 80%;
        height: 25%;
        left: 5%;
        bottom: 19%;
        animation: none
    }

    .hero-shadow-3 {
        width: 68%;
        height: 17%;
        left: 7%;
        bottom: 43%;
        animation: none
    }

    .hero-shadow-4 {
        display: none
    }
}

@media screen and (max-width: 767.99px) {
    .hero-media-wrap {
        animation:none
    }

    .rate-box {
        gap: 14px;
        margin-bottom: 16px
    }

    .hero-content .title {
        font-size: 36px;
        line-height: 50px
    }

    .hero-content .subtitle {
        font-size: 27px;
        line-height: 65px;
        height: 65px;
        margin-bottom: 10px
    }

    .sliding-text:before {
        font-size: 17px
    }

    .sliding-text:after {
        font-size: 32px
    }

    .sliding-text.active:before {
        top: -21px;
        right: 5px
    }

    .sliding-text.active:after {
        top: -12px;
        right: -25px
    }

    .hero-content .content {
        font-size: 16px;
        margin: 10px 0
    }

    .hero-brands.sw {
        max-width: 100%
    }
}

@media screen and (max-width: 575.99px) {
    .hero-media-wrap {
        flex:1 0 48%
    }

    .short-content {
        font-size: 13px
    }

    .short-content i {
        font-size: 15px
    }

    .svg-1 {
        top: 11.5%;
        max-width: 100%;
        right: 8%;
        max-width: 84%
    }

    .svg-2 {
        left: 64%;
        top: 21%;
        max-width: 32%;
        right: 4%
    }

    .svg-3 {
        left: 26%;
        top: 24%;
        max-width: 36%
    }

    .svg-4 {
        left: 52%;
        top: 42%;
        max-width: 26%
    }

    .svg-5 {
        left: 22%;
        top: 55%;
        max-width: 37%
    }

    .svg-6 {
        left: 31%;
        max-width: 19%;
        top: 7%
    }

    .bg-svg {
        top: 8%;
        right: 0;
        max-width: 100%
    }

    .hero-circles {
        top: 0;
        right: 4%;
        left: 4%;
        max-width: 100%
    }

    .brands-title .title {
        color: var(--primary)
    }

    .brands-title .title:before {
        transform: translate(-20px,-38px) scale(1);
        opacity: 1
    }

    .brands-title {
        margin: 30px auto 0;
        max-width: 80%;
        text-align: center
    }

    .brands-title p {
        display: inline-block
    }
}

@media screen and (max-width: 370px) {
    .brands-title {
        max-width:100%;
        text-align: center
    }

    .slider-video {
        width: calc(100% - 145px);
        height: 48px
    }
}

@media screen and (min-width: 992px) and (max-height:850px) {
    .section-hero {
        padding-top:190px!important
    }
}

@media screen and (min-width: 992px) and (max-height:790px) {
    .section-hero {
        padding-top:160px!important
    }
}

@media screen and (min-width: 992px) and (max-height:730px) {
    .section-hero {
        padding-top:140px!important
    }
}