#chi-siamo #hero{
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

#chi-siamo #hero::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(30, 40, 95, 0) 0%, rgba(30, 40, 95, 0.6) 46.88%);
}

#chi-siamo #line .story-card::before{
    content: '';
    height: 1px;
    width: 100%;
    background-color: var(--primary-green);
    position: absolute;
    top: 50%;
    display: block;
    /* transform: translateY(.9rem); */
}

#chi-siamo .storia{
    border-bottom: 1px solid var(--darkGrey);
}

#chi-siamo .storia .story-card{
    flex: 0 0 16%;
    opacity: 0;
    position: relative;
}

#chi-siamo .storia .story-card .bullet,
#chi-siamo .wrapper-mobile .bullet{
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid var(--black);
    height: 1.2rem;
    width: 1.2rem;
    padding: 3px;
}

#chi-siamo .storia .story-card .bullet::before,
#chi-siamo .wrapper-mobile .bullet::before{
    content: '';
    background-color: var(--primary-green);
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}

#chi-siamo .cta > a > i {
    transition: transform .3s ease-in;
}

#chi-siamo .cta > a:hover{
    color: white !important;
}

#chi-siamo .cta > a:hover > i{
    transform: translateY(15px);
}

.story-separator{
    height: 3rem;
    width: 1px;
    background-color: var(--darkGrey);
    margin: 0 auto;
}

.story-separator-circle{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: block;
    background-color: var(--darkGrey);
    transform: translateX(-35%);
}

.tecnologie-card{
    height: 500px;
    border-radius: 20px;
    border: 1px solid var(--primary-green);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: default;
    overflow: hidden;
}

.tecnologie-card:hover{
    background: var(--white) !important;
}

.tecnologie-card:hover::before{
    background: unset;
}

.tecnologie-card:hover .title{
    display: none;
}

.tecnologie-card:hover .discover-tecnology {
    display: none;
}

.tecnologie-card:hover .full-tecnologie-card{
    display: block !important;
    font-size: .8rem;
    animation: fade-in .8s ease-in-out forwards;
}

.fade-in{
    animation: fade-in .5s ease-in-out forwards;
}

@keyframes fade-in {
    0%{
        transform: scaleX(0);
        opacity: 0;
    }
    100%{
        transform: scaleX(1);
        opacity: 1;
    }
}

.fade-in-y{
    animation: fade-in .5s ease-in-out forwards;
}

@keyframes fade-in-y {
    0%{
        transform: scaleY(0.5);
        opacity: 0;
    }
    100%{
        transform: scaleY(1);
        opacity: 1;
    }
}

.custom-width{
    flex: 0 0 19%;
}

.tecnologie-card .title{
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tecnologie-card::before{
    content: '';
    border-radius: 20px;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(30, 40, 95, 0) 0%, var(--primary-blue) 100%);
}

.swiper-pagination-bullet{
    background-color: var(--turquoise) !important;
}

.swiper-pagination-bullet-active{
    background-color: var(--primary-blue) !important;
}

@media (max-width: 1200px){
    .tecnologie-card .title{
        bottom: unset;
        top: 10%;
    }

    .tecnologie-card .discover-tecnology{
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        font-size: .85rem;
    }

    .top-20{
        top: 20% !important;
    }

    .tecnologie-card{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

}

@media (max-width: 576px){
    .wrapper-mobile *{
        font-size: .8rem;
    }
    .wrapper-mobile .line-mobile{
        width: 1px;
        height: 0;
        transition: all .3s ease-in;
    }
    .wrapper-mobile .col-5{
        opacity: 0;
    }
}