.hero {
    background: radial-gradient(circle at top, #163d7a, #08111f);
}
h1 {
    font-size: 3.5rem;
    font-weight: 800;
}
.mockup {

}
.top {
    height: 50px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 24px 24px 0 0;
}
.cardx {
    margin: 20px;
    height: 110px;

}
.small {
    width: 60%;
    background: #00c2a8;
}
.swiper-button-next,
.swiper-button-prev {
    color: #fff;
}
.swiper-pagination-bullet-active {
    background: #fff;
}







.heroSwiper{
    overflow:hidden;
    padding: 0px 50px;
}

.heroSwiper .swiper-slide{
    opacity:0 !important;
    transition:opacity .6s ease;
    pointer-events:none;
}

.heroSwiper .swiper-slide-active{
    opacity:1 !important;
    pointer-events:auto;
}