.hero_warpper {
    position      : relative;
    display       : flex;
    flex-direction: row;
    padding       : 80px 102px 80px 102px;
    width         : calc(100% - 204px);
    min-height    : 320px;
    background    : linear-gradient(90deg, #000000, #440080);
    overflow      : hidden;
    transition    : ease 0.3s
}

.hero_left_holder {
    position       : relative;
    display        : flex;
    justify-content: center;
    flex-direction : column;
    width          : 60%;
    z-index        : 1;
}

.hero_right_holder {
    position      : relative;
    display       : flex;
    flex-direction: column;
    width         : 40%;
}

.hero_logo {
    position  : relative;
    width     : 264px;
    height    : 46px;
    background: url(/src/logo_white.svg) center/contain no-repeat;
    transition: ease 0.3s;
}

.hero_slogen {
    position      : relative;
    font-size     : 22px;
    color         : white;
    margin-top    : 20px;
    font-weight   : bold;
    letter-spacing: 1px;
}

.hero_free_text {
    position  : relative;
    font-size : 13px;
    color     : #FFFFFFcc;
    margin-top: 12px;
}

.hero_side_image {
    position  : absolute;
    bottom    : calc(-130px);
    right     : calc(-102px);
    width     : 792px;
    height    : 374px;
    background: url(/src/hero/side.png) bottom/cover no-repeat;
    animation : an_side_img 8s 0s infinite alternate;
}

.hero_buttons_holder {
    position      : relative;
    display       : flex;
    width         : 100%;
    flex-direction: row;
    align-items   : center;
    margin-top    : 30px;
    font-size     : 16px;
}

.hero_analyze_bt {
    position     : relative;
    padding      : 10px 40px 10px 40px;
    color        : white;
    background   : #4081FF linear-gradient(120deg, #4081FF, transparent);
    border-radius: 10px;
    transition   : ease 0.3s;
    border       : none;
    box-sizing   : content-box;
}

.hero_analyze_bt:active {
    background-color: #c770ff;
}

.hero_sample_bt {
    position     : relative;
    padding      : 10px 20px 10px 20px;
    color        : white;
    background   : transparent;
    border-radius: 10px;
    transition   : ease 0.3s;
    border       : 2px solid white;
    opacity      : 0.6;
    box-sizing   : content-box;
}

.hero_space {
    position: relative;
    width   : 10px;
    height  : 10px;
}

.hero_sample_bt:active {
    opacity: 1;
}

@media (pointer:coarse) {
    .hero_warpper {
        padding: 80px 60px 80px 60px;
        width  : calc(100% - 120px);
    }
}

@media (max-width:1023px) and (min-width:0),
(max-width:1023px) and (min-device-width:0) {
    .hero_warpper {
        padding: 80px 60px 80px 60px;
        width  : calc(100% - 120px);
    }
}

@media (max-width:950px) and (min-width:0),
(max-width:950px) and (min-device-width:0) {
    .hero_left_holder {
        width          : 100%;
        justify-content: flex-start;
        align-items    : center;
        text-align     : center;
    }

    .hero_right_holder {
        width : 100%;
        height: 140px;
    }

    .hero_warpper {
        background    : linear-gradient(180deg, #000000, #440080);
        flex-direction: column;
        padding       : 50px 20px 80px 20px;
        width         : calc(100% - 40px);
    }

    .hero_buttons_holder {
        justify-content: center;
        margin-bottom  : 10px;
    }

    .hero_side_image {
        background-position: bottom center;
        bottom             : calc(-260px);
        right              : calc(-102px);
    }
}

@media (max-width:500px) and (min-width:0),
(max-width:500px) and (min-device-width:0) {
    .hero_slogen {
        font-size: 17px;
    }

    .hero_analyze_bt {
        font-size: 13px;
        padding  : 10px 30px 10px 30px;
    }

    .hero_sample_bt {
        font-size: 13px;
    }

    .hero_free_text {
        font-size: 12px;
    }

    .hero_logo {
        width : 210px;
        height: 37px;
    }

    /* .hero_left_holder {
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }
    .hero_right_holder {
        width: 100%;
        height: 140px;
    }
    .hero_warpper {
        background: linear-gradient(180deg, #000000, #440080);
        flex-direction: column;
        padding: 80px 20px 80px 20px;
        width: calc(100% - 40px);
    }
    .hero_buttons_holder {
        justify-content: center;
    }
    .hero_side_image {
        background-position: bottom center;
        bottom: calc(-260px);
        right: calc(-102px);
    } */
}

@media(hover:hover) and (pointer:fine) {
    .hero_analyze_bt:hover {
        background-color: #c770ff;
    }

    .hero_sample_bt:hover {
        opacity: 1;
    }
}