/*======================================
Comparison
======================================*/

.comparison{

    padding:140px 0;

}

.comparison-table{

    margin-top:70px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    
    background:#081A15;

}

.comparison-header{

    display:grid;

    grid-template-columns:40% 30% 30%;

    background:linear-gradient(
180deg,
#10231C 0%,
#0B1A15 100%
);

}

.comparison-header div{

    padding:26px 32px;

    font-size:18px;

    font-weight:700;

    color:#fff;

}

.comparison-header div:nth-child(2),
.comparison-header div:nth-child(3){

    text-align:center;

}

.comparison-row{

    display:grid;

    grid-template-columns:40% 30% 30%;

    align-items:center;

    min-height:78px;

    border-top:1px solid rgba(255,255,255,.06);

    transition:.25s;

}

.comparison-row:hover{

    background:rgba(255,255,255,.025);

}

.comparison-row>div{

    padding:22px 32px;

}

.factor{

    font-weight:600;

    color:#fff;

}

.traditional{

    color:#BFCFC7;

    text-align:center;

}

.vendow{

    color:#58F0A6;

    text-align:center;

    font-weight:700;

}

/*======================================
Mobile
======================================*/

@media (max-width:768px){

    .comparison-wrapper{

        width:100%;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

    }

    .comparison-table{

        min-width:720px;

        margin-top:50px;

    }

}
/*======================================
Mobile VS Cards
======================================*/

.comparison-mobile{

    display:none;

}

@media (max-width:768px){

    .comparison-table{

        display:none;

    }

    .comparison-mobile{

        display:block;

        margin-top:50px;

    }

    .vs-card{

        background:#081A15;

        border:1px solid rgba(255,255,255,.08);

        border-radius:22px;

        padding:22px;

        margin-bottom:20px;

    }

    .vs-card h3{

        font-size:18px;

        margin:0 0 18px;

        color:#fff;

        font-weight:700;

    }

    .vs-grid{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    gap:14px;

}

    .vs-side{

        background:linear-gradient(
180deg,
#10231C 0%,
#0B1A15 100%
);

        border-radius:16px;

        padding:18px;

        text-align:center;

    }

    .vs-side span{

        display:block;

        color:#9CA8A2;

        font-size:13px;

        margin-bottom:10px;

        font-weight:600;

    }

    .vs-side strong{

        display:block;

        color:#fff;

        font-size:18px;

        font-weight:700;

        line-height:1.4;

    }

    .vendow-side{

        border:1px solid rgba(88,240,166,.3);

    }

    .vendow-side span{

        color:#58F0A6;

    }

    .vendow-side strong{

        color:#58F0A6;

    }

}
.vs-divider{

    display:flex;

    justify-content:center;

    align-items:center;

}

.vs-divider span{

    width:36px;

    height:36px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#132720;

    border:1px solid rgba(255,255,255,.08);

    color:#8EA79D;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.vs-card{

    transition:.25s;

}

.vs-card:hover{

    transform:translateY(-2px);

    border-color:rgba(88,240,166,.2);

}