.lottie-hero {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -10;
    width: 100%;
    filter: blur(60px);
    transform: scale(1.1);
    z-index: 10;
}

@media screen and (max-width: 991px) {
    .lottie-hero {
        filter: blur(45px);
    }
}

@media screen and (max-width: 767px) {
    .lottie-hero {
        filter: blur(35px);
    }
}

@media screen and (max-width: 479px) {
    .lottie-hero {
        filter: blur(25px);
        transform: scale(1);
    }
}

.app-hero {
    display: flex;
    justify-content: center;
    position: relative;
    z-index:11;
    align-items: flex-start;
    flex-direction: row;
}

.app-hero-a {
    transform: rotate(-11deg);
}

.app-hero-b {
    margin-left: -60px;
    margin-top: 90px;
    transform: rotate(11deg);
}

.image-app-hero {
    border-radius: 48px;
    box-shadow: rgba(17, 18, 19, .12) 0 50px 70px 0;
    max-height:740px;
}
.mare{
    position:relative;
}

@media screen and (max-width: 991px) {
    .lottie-hero {
        filter: blur(45px);
    }
    .app-screen-hero {
        padding-bottom: 90px;
        padding-top: 90px;
    }
    .image-app-hero {
        border-radius: 43px;
        max-width: 40vw;
    }
}

@media screen and (max-width: 767px) {
    .lottie-hero {
        filter: blur(35px);
    }
    .app-screen-hero {
        padding-bottom: 80px;
        padding-top: 80px;
    }
    .image-app-hero {
        border-radius: 5vw;
        max-width: 40vw;
    }
}

@media screen and (max-width: 479px) {
    .lottie-hero {
        filter: blur(25px);
        transform: scale(1);
    }
    .app-screen-hero {
        padding-bottom: 75px;
        padding-top: 75px;
    }
    .image-app-hero {
        border-radius: 6vw;
        max-width: 44vw;
    }
}
.image-app-hero {
    opacity: 1;
    will-change: transform;
    transform: translate3d(0px, -40px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
    transform-style: preserve-3d;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

.image-app-hero-a{
    animation: misca 4s ease-in-out infinite;
}
.image-app-hero-c{
    animation: misca 4s ease-in-out infinite;
}

.image-app-hero-b{
    animation: miscadoi 5s ease-in-out infinite;
}

@keyframes misca {
    0% {
    transform: translate3d(0px, -10px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
    }
    50% {
    transform: translate3d(0px, 10px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
    }
    100% {
    transform: translate3d(0px, -10px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
    }
}

@keyframes miscadoi {
    0% {
    transform: translate3d(0px, -10px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
    }
    50% {
    transform: translate3d(0px, 20px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
    }
    100% {
    transform: translate3d(0px, -10px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
    }
}
@media screen and (max-width: 767px) {
    .image-app-hero-a{
        animation: misca 6s ease-in-out infinite;
    }
    .image-app-hero-b{
        animation: misca 6s ease-in-out infinite;
    }

    .image-app-hero-b{
        animation: miscadoi 7s ease-in-out infinite;
    }
    @keyframes misca {
        0% {
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
        }
        50% {
        transform: translate3d(0px, 10px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
        }
        100% {
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
        }
    }
    
    @keyframes miscadoi {
        0% {
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
        }
        50% {
        transform: translate3d(0px, 15px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
        }
        100% {
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
        }
    }
}
#hero{
    padding-bottom: 100px;
}

.lottie-hero-tableta{
    width: 100%!important;
    left: 0%!important;
    right: 0%!important;
    height: 120%!important;
    top: -10%!important;
}

.ascunde-mare{
    display:none;
}

@media screen and (min-width: 1200px) {
    .image-app-hero-c{
        max-width: 80%;
    }
}

@media screen and (max-width: 1200px) {
    .lottie-hero-tableta {
        filter: blur(45px);
    }
    .image-app-hero-c{
        max-width: 80vw;
    }
}
@media screen and (max-width: 991px) {
    .lottie-hero-tableta{
        width: 100%!important;
        left: 0%!important;
        right: 0%!important;
        height: 110%!important;
        top: -5%!important;
    }
}

@media screen and (max-width: 500px) {
    .ascunde-mic{
        display:none;
    }
    .ascunde-mare{
        display:block;

    }
    .lottie-hero-tableta{
        transform: scale(1)!important;
    }
}

body {
    overflow-x: hidden!important;
}
@media screen and (max-width: 991px) {
    #navbar{
        padding: 17px 8px!important;
    }
    #navbar button.navbar-toggler{
        padding: 10px !important;
        border-radius: 50%!important;
        font-size: 21px !important;
    }
}