/* Hero */
.hero {
    height: 701px;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 90px;
    margin-top: 74px;
}


/* Hero background */

.hero-background {
    height: 100%;
    position: absolute;

    z-index: 1;
}

.small-light-circle,  .big-light-circle {
    position: absolute;
    z-index: 0;
}

.small-light-circle {
    width: 35.5%;
    height: 50%;
    border-radius: 50%;
    filter: blur(54.5px);
}

.small-light-circle.first {
    top: 15%;
    left: 7%;
}

.small-light-circle.second {
    bottom: 25%;
    right: 2%;
}

.small-light-circle.third {
    bottom: 14%;
    right: 20%;
}

/** Hero content **/

.hero--content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-demo-img-desk {
    position: relative;
    left: 5%;
    top: 0;
    margin-top: auto;
    z-index: 2;
    width: 37.45%;
    height: 562.367px;
}

.hero-demo-img-mob {
    display: block ;
    max-width: 490px;
    margin-top: 27px;
}

.hero--info {
    bottom: 10px;
    width: 624px;
    position: relative;
    z-index: 2;
}

.hero-heading, .hero-text{
    color: #fff;
}

.hero-heading {
    font-weight: 700;
}

.hero-text {
    font-weight: 500;
    margin-top: 25px;
    margin-bottom: 40px;
}


.hero-highlight {
    position: relative;
}

.hero-highlight-background {
    top: -1.5%;

    left: -3%;
    position: absolute;
    width: 106.5%;
    height: 116%;

    background-image: url('/static/core/img/ui/hero-highlight.webp');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
}


.hero-tg-icon {
    position: absolute;
    z-index: 2;
    height: 135px;
    top: -49px;
    right: 52px;
    max-width: 135px;
    width: 100%;
    height: auto;
}

/*  Btn leave request   */

.hero-cost-calculator-show-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
}

.hero-min-price {
    background: #fff;
    border-radius: 100px;

    display: inline;
    padding: 4px 14px;

    position: absolute;
    rotate: -4deg;
    bottom: -16px;

    color: #FF7000;
    font-weight: 500;

    box-shadow: 0px 3px 8px 0px rgba(255, 255, 255, 0.3);
}
