.hero{

    position:relative;

    width:100%;

    min-height:760px;

    overflow:hidden;

    background-image:url("../assets/hero/hero-bg.png");

    background-size:cover;

    background-position:center top;

    background-repeat:no-repeat;

}

.hero video{

    position:absolute;

    top:18px;

    left:50%;

    transform:translateX(-50%);

    width:100px;

    z-index:20;

}

.hero-map{

    width:100%;

    position:absolute;

    top:90px;

    left:0;

    opacity:.45;

}

.hero-car{

    width:75%;

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    top:300px;

    z-index:4;

}

.hero-title{

    position:absolute;

    width:100%;

    top:210px;

    left:0;

    text-align:center;

    z-index:5;

}

.hero-title h1{

    font-size:30px;

    font-weight:900;

    margin:0;

}

.hero-title h2{

    font-size:40px;

    color:#f4b400;

    margin-top:-12px;

}

.hero-title p{

    margin-top:18px;

    color:#d1d5db;

    font-size:20px;

    line-height:1.5;

}

.user-profile{

    position:absolute;

    top:18px;

    right:16px;

    width:78px;

    display:flex;

    flex-direction:column;

    align-items:center;

    z-index:1000;

}

.user-avatar{

    width:44px;

    height:44px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    color:#24A8FF;

    background:rgba(36,168,255,.10);

    border:1px solid rgba(36,168,255,.35);

    box-shadow:
        0 0 10px rgba(36,168,255,.35);

    transition:.3s;

}

.user-avatar img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.user-avatar{

    width:60px;
    height:60px;

    border-radius:50%;

    overflow:hidden;

    border:2px solid rgba(36,168,255,.45);

    background:linear-gradient(
        180deg,
        #18344F,
        #10253A
    );

    box-shadow:
        0 0 12px rgba(36,168,255,.45),
        inset 0 0 12px rgba(36,168,255,.18);

}

.user-info{

    margin-top:8px;

    text-align:center;

}

.user-name{

    color:#ffffff;

    font-size:11px;

    font-weight:700;

    margin-top:6px;

    text-align:center;

}

.user-login{

    color:#8FA8C7;

    font-size:9px;

    margin-top:2px;

    text-align:center;

}

.user-avatar{

    display:flex;
    justify-content:center;
    align-items:center;

    color:#24A8FF;

}

.user-avatar svg{

    width:22px;

    height:22px;

}

.user-profile{

    cursor:pointer;

    transition:.25s;

}

.user-profile:hover{

    transform:translateY(-2px);

}

.user-profile:active{

    transform:scale(.96);

}

.user-avatar{

    transition:.3s;

}

.user-profile:hover .user-avatar{

    box-shadow:

        0 0 18px rgba(36,168,255,.75),

        0 0 35px rgba(36,168,255,.35);

}