.hero-container {
    position: relative;
    background: #1a517a;
    background: linear-gradient(150deg, #1a517a 0%, #5c1a7a 70%);
    height: 710px;
}

    .hero-container .hero-devices {
        position: relative;
        display: flex;
        justify-content: space-between;
        text-align: start !important;
    }

    .hero-container .connecting-arrows {
        position: relative;
        display: flex;
        margin-top: 80px;
    }

        .hero-container .connecting-arrows img {
            min-width: 0;
            max-width: 100%;
            max-height: 60px;
            flex-shrink: 50;
            filter: drop-shadow(16px 20px 10px rgba(0, 0, 0, 0.4));
        }

            .hero-container .connecting-arrows img:first-child,
            .hero-container .connecting-arrows img:last-child {
                flex-shrink: 1;
            }

    .hero-container .phone-container {
        flex-shrink: 0;
        position: relative;
        width: 370px;
        height: 370px;
        transform-style: preserve-3d;
        transition: all 0.2s ease;
        margin-right: 40px;
    }

        .hero-container .phone-container .phone {
            position: absolute;
            width: 405px;
            transform: translate3d(0, 0, 140px);
        }

        .hero-container .phone-container .phone-icons {
            position: absolute;
            width: 405px;
            transform: translate3d(0, 0, 80px);
        }

    .hero-container .laptop {
        flex-shrink: 0;
        position: relative;
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        transition: all 0.2s ease;
        margin-left: 40px;
    }

        .hero-container .laptop .monitor {
            position: absolute;
            height: 150px;
            width: 300px;
            background: #ffffff;
            left: 0px;
            top: 20px;
            border-radius: 10px 10px 4px 4px;
            -webkit-transform: perspective(1000px) rotateX(15deg) translate3d(0, 0, -98px);
            -moz-transform: perspective(1000px) rotateX(15deg) translate3d(0, 0, -98px);
            transform: perspective(1000px) rotateX(15deg) translate3d(0, 0, -98px);
            transform-style: preserve-3d;
            -webkit-animation: open-laptop-monitor 2s;
            -moz-animation: open-laptop-monitor 2s;
            animation: open-laptop-monitor 2s;
            box-shadow: 10px 10px 60px rgba(0,0,0,0.3);
        }

            .hero-container .laptop .monitor:before {
                background-color: #262626;
                background-image: -webkit-linear-gradient( hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.25) );
                content: "";
                height: 100%;
                width: 100%;
                left: -1px;
                top: 0;
                border-radius: 10px 10px 4px 4px;
                position: absolute;
                -webkit-transform: translateZ(-6px);
                -moz-transform: translateZ(-6px);
                transform: translateZ(-6px);
            }

            .hero-container .laptop .monitor .monitor-body {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border: 2px solid black;
                border-top: 6px solid black;
                border-bottom: 12px solid black;
                border-radius: 10px 10px 4px 4px;
                background: #262626;
                -webkit-animation: start-monitor 1s 0.5s forwards;
                -o-animation: start-monitor 1s 0.5s forwards;
                animation: start-monitor 1s 0.5s forwards;
                display: flex;
                justify-content: center;
                align-items: center;
            }

        .hero-container .laptop .bottom_part {
            position: absolute;
            height: 150px;
            background: #262626;
            border-radius: 4px 4px 5px 5px;
            left: 0px;
            right: 0px;
            bottom: 19px;
            -webkit-transform: perspective(1000px) rotateX(72deg);
            -moz-transform: perspective(1000px) rotateX(72deg);
            transform: perspective(1000px) rotateX(72deg);
            transform-style: preserve-3d;
            -webkit-animation: open-laptop-bottom-part 2s;
            animation: open-laptop-bottom-part 2s;
            box-shadow: 0 0 30px rgba(0,0,0,0.3);
        }

            .hero-container .laptop .bottom_part:after {
                background-color: #161616;
                bottom: 0;
                content: "";
                top: 0pz;
                left: 146px;
                position: absolute;
                -webkit-transform: rotateY(90deg) rotateX(90deg) translate3d(2.5px, 0, -149px);
                -moz-transform: rotateY(90deg) rotateX(90deg) translate3d(2.5px, 0, -149px);
                transform: rotateY(90deg) rotateX(90deg) translate3d(2.5px, 0, -149px);
                transform-style: preserve-3d;
                border-radius: 0 3px 3px 0;
                width: 5px;
                height: 296px;
                z-index: -10;
            }

            .hero-container .laptop .bottom_part:before {
                background-color: #161616;
                content: "";
                height: 100%;
                width: 100%;
                left: 0;
                top: 0;
                border-radius: 4px 4px 5px 5px;
                position: absolute;
                -webkit-transform: translateZ(-4px);
                -moz-transform: translateZ(-4px);
                transform: translateZ(-4px);
            }

        .hero-container .laptop .keyboard {
            padding: 7px;
            padding-bottom: 3px;
            background: #4d4d4d;
            margin-top: 5px;
            margin-left: 5px;
            margin-right: 5px;
        }

            .hero-container .laptop .keyboard img {
                width: 100%;
            }

        .hero-container .laptop .touchpad {
            background: #4d4d4d;
            width: 45px;
            padding: 10px;
            height: 10px;
            margin-top: 5px;
        }

        .hero-container .laptop .monitor .monitor-body .screen-content {
            opacity: 0;
            overflow: hidden;
            max-width: 200px;
            -webkit-animation: show-screen-content 1s 1.8s forwards;
            -o-animation: show-screen-content 1s 1.8s forwards;
            animation: show-screen-content 1s 1.8s forwards;
        }

@-webkit-keyframes open-laptop-monitor {
    0% {
        -webkit--transform: perspective(1000px) rotateX(-60deg) translate3d(0, 0, -70px);
        transform: perspective(1000px) rotateX(-60deg) translate3d(0, 0, -70px);
        top: 115px;
    }

    100% {
        -webkit-transform: perspective(1000px) rotateX(15deg) translate3d(0, 0, -98px);
        transform: perspective(1000px) rotateX(15deg) translate3d(0, 0, -98px);
    }
}

@-moz-keyframes open-laptop-monitor {
    0% {
        -moz-transform: perspective(1000px) rotateX(-60deg) translate3d(0, 0, -70px);
        transform: perspective(1000px) rotateX(-60deg) translate3d(0, 0, -70px);
        top: 115px;
    }

    100% {
        -moz-transform: perspective(1000px) rotateX(15deg) translate3d(0, 0, -98px);
        transform: perspective(1000px) rotateX(15deg) translate3d(0, 0, -98px);
    }
}

@keyframes open-laptop-monitor {
    0% {
        -webkit-transform: perspective(1000px) rotateX(-60deg) translate3d(0, 0, -70px);
        -moz-transform: perspective(1000px) rotateX(-60deg) translate3d(0, 0, -70px);
        transform: perspective(1000px) rotateX(-60deg) translate3d(0, 0, -70px);
        top: 115px;
    }

    100% {
        -webkit-transform: perspective(1000px) rotateX(15deg) translate3d(0, 0, -98px);
        -moz-transform: perspective(1000px) rotateX(15deg) translate3d(0, 0, -98px);
        transform: perspective(1000px) rotateX(15deg) translate3d(0, 0, -98px);
    }
}

@-webkit-keyframes open-laptop-bottom-part {
    0% {
        -webkit-transform: perspective(1000px) rotateX(89deg);
        transform: perspective(1000px) rotateX(89deg);
        left: 0px;
        right: 0px;
        bottom: 90px;
    }

    90% {
        bottom: 19px;
    }

    100% {
        -webkit-transform: perspective(1000px) rotateX(72deg);
        transform: perspective(1000px) rotateX(72deg);
        left: 0px;
        right: 0px;
    }
}

@-moz-keyframes open-laptop-bottom-part {
    0% {
        -moz-transform: perspective(1000px) rotateX(89deg);
        transform: perspective(1000px) rotateX(89deg);
        left: 0px;
        right: 0px;
        bottom: 90px;
    }

    90% {
        bottom: 19px;
    }

    100% {
        -moz-transform: perspective(1000px) rotateX(72deg);
        transform: perspective(1000px) rotateX(72deg);
        left: 0px;
        right: 0px;
    }
}

@keyframes open-laptop-bottom-part {
    0% {
        -webkit-transform: perspective(1000px) rotateX(89deg);
        -moz-transform: perspective(1000px) rotateX(89deg);
        transform: perspective(1000px) rotateX(89deg);
        left: 0px;
        right: 0px;
        bottom: 70px;
    }

    90% {
        bottom: 19px;
    }

    100% {
        -webkit--transform: perspective(1000px) rotateX(72deg);
        -moz-transform: perspective(1000px) rotateX(72deg);
        transform: perspective(1000px) rotateX(72deg);
        left: 0px;
        right: 0px;
    }
}

@-webkit-keyframes start-monitor {
    0% {
        background: #262626;
    }

    100% {
        background: #ffffff;
    }
}

@-moz-keyframes start-monitor {
    0% {
        background: #262626;
    }

    100% {
        background: #ffffff;
    }
}

@keyframes start-monitor {
    0% {
        background: #262626;
    }

    100% {
        background: #ffffff;
    }
}

@-webkit-keyframes show-screen-content {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes show-screen-content {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes show-screen-content {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.zi-1 {
    z-index: 1;
}

.user-drag-none, .user-drag-none * {
    pointer-events: none;
    -webkit-user-drag: none !important;
    user-drag: none !important
}

.features-bg {
    background: #191919;
    background: radial-gradient(at 80% 100%, hsla(241,0%,9%,1) 0px, transparent 50%), radial-gradient(at 1% 1%, hsla(212,47%,33%,1) 0px, transparent 50%);
}

.packages-bg {
    background: #1a517a;
    background: linear-gradient(150deg, #1a517a 0%, #3080bb 70%);
}

.support-bg {
    background: #1a517a;
    background: linear-gradient(150deg, #1a517a 0%, #5c1a7a 40%, #5c070d 70%, #483102 100%);
}

#features {
    padding-bottom: 40px;
}

#features-slider-container {
    margin: 0 auto;
    width: 1360px;
}

.features-headings,
.features-arrows {
    list-style-type: none;
    padding: 0;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    transition: all 0.15s linear;
}

    .features-headings *,
    .features-arrows * {
        transition: all 0.15s linear;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    .features-headings li,
    .features-arrows li {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .features-headings li.active {
            font-weight: 900;
            margin-top: -5px;
            zoom: 1.4;
        }

        .features-headings li:hover:not(.active) {
            color: #3080bb;
            cursor: pointer;
        }

.features-arrows {
    display: none;
    justify-content: space-evenly;
}

    .features-arrows li:hover:first-child,
    .features-arrows li:hover:last-child {
        font-weight: 900;
        cursor: pointer;
    }


.features-headings li {
    font-size: 13px;
    letter-spacing: 0.43px;
}

#features-slider {
    border-radius: 18px;
    overflow: hidden;
}

    #features-slider .owl-stage {
        display: flex;
    }

        #features-slider .owl-stage .owl-item {
        }

    #features-slider .item {
        width: 1360px;
        display: flex;
        flex: 1 0 auto;
        height: 100%;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        border-radius: 18px;
        overflow: hidden;
        color: white;
    }

        #features-slider .item.reversed {
            flex-direction: row-reverse;
        }

        #features-slider .item img {
            width: 40%;
        }

        #features-slider .item .feature-detail {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px;
            text-align: center;
        }

            #features-slider .item .feature-detail .feature-heading {
                font-size: 35px;
                font-weight: 700;
                letter-spacing: 0.43px;
                margin: 5px 0 12px;
            }

            #features-slider .item .feature-detail .lead {
                font-size: 20px;
            }

        #features-slider .item.purple {
            background: hsla(315,98%,19%,1);
            background-image: radial-gradient(at 1% 98%, hsla(254,47%,27%,1) 0px, transparent 50%), radial-gradient(at 100% 63%, hsla(337,99%,42%,1) 0px, transparent 50%), radial-gradient(at 1% 2%, hsla(288,97%,18%,1) 0px, transparent 50%);
        }

        #features-slider .item.blueredyellow {
            background: hsla(246,33%,26%,1);
            background-image: radial-gradient(at 86% 3%, hsla(348,91%,61%,1) 0px, transparent 50%), radial-gradient(at 0% 99%, hsla(246,33%,26%,1) 0px, transparent 50%), radial-gradient(at 0% 1%, hsla(201,97%,53%,1) 0px, transparent 50%), radial-gradient(at 91% 98%, hsla(48,100%,48%,1) 0px, transparent 50%), radial-gradient(at 88% 55%, hsla(12,60%,47%,1) 0px, transparent 50%);
        }

        #features-slider .item.blueyellow {
            background: hsla(246,33%,26%,1);
            background-image: radial-gradient(at 23% 1%, hsla(201,97%,53%,1) 0px, transparent 50%), radial-gradient(at 100% 1%, hsla(48,100%,48%,1) 0px, transparent 50%), radial-gradient(at 14% 99%, hsla(324,45%,24%,1) 0px, transparent 50%), radial-gradient(at 80% 99%, hsla(201,97%,53%,1) 0px, transparent 50%);
        }

        #features-slider .item.purpleblue {
            background: #AC32E4;
            background: linear-gradient(-225deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);
        }

        #features-slider .item.blue {
            background: #1a517a;
            background: linear-gradient(150deg, #1a517a 0%, #3080bb 70%);
        }

        #features-slider .item.blueorange {
            background: #1a517a;
            background: linear-gradient(120deg, #3080bb 10%, hsla(368,80%,41%,1) 60%, #1a517a 100%);
        }

        #features-slider .item.orangeyellow {
            background: hsla(381,77%,50%,1);
            background-image: radial-gradient(at 23% 1%, hsla(381,77%,50%,1) 0px, transparent 70%), radial-gradient(at 100% 1%, hsla(348,100%,40%,1) 0px, transparent 50%), radial-gradient(at 14% 99%, hsla(55,65%,48%,1) 200px, transparent 50%);
        }

@media (max-width:1399px) {
    #features-slider-container {
        width: 1182px;
    }

    #features-slider .item {
        width: 1182px;
    }
}

@media (max-width:1199px) {
    #features-slider-container {
        width: calc(100vw - 18px);
    }

    #features-slider {
        border-radius: unset;
    }

        #features-slider .item {
            width: calc(100vw - 18px);
            border-radius: unset;
        }
}

@media (max-width:991px) {
    .hero-container .phone-container {
        margin-right: 0;
    }

    .hero-container .laptop {
        margin-left: 0;
    }
}

@media (max-width:767px) {
    .hero-container {
        height: unset;
    }

        .hero-container .hero-devices {
            height: 38vw;
        }

        .hero-container .phone-container {
            width: 38vw;
            height: 100%;
        }

            .hero-container .phone-container .phone {
                width: 100%;
            }

            .hero-container .phone-container .phone-icons {
                width: 100%;
            }

        .hero-container .laptop {
            height: 19vw;
            width: 38vw;
        }

            .hero-container .laptop .monitor {
                height: 19vw;
                width: 38vw;
                border-radius: 10px;
            }

                .hero-container .laptop .monitor:before {
                    content: unset;
                }

                .hero-container .laptop .monitor .monitor-body {
                    border-width: 1vw;
                    border-radius: 10px;
                }

            .hero-container .laptop .bottom_part {
                display: none;
            }

    .features-headings {
        display: none;
    }

    .features-arrows {
        display: flex;
    }

    #features-slider .item,
    #features-slider .item.reversed {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }

        #features-slider .item img,
        #features-slider .item.reversed img {
            width: 90%;
        }

        #features-slider .item .feature-detail .lead,
        #features-slider .item.reversed .feature-detail .lead {
            font-size: 18px;
            line-height: 21px;
        }
}

@media (max-width:575px) {
}