/*==================================================
Zhitu Network
Advantage.css
Version 2.0
==================================================*/

.advantage{
    position:relative;
    background:linear-gradient(180deg,#081a32 0%,#07142b 100%);
    overflow:hidden;
}

.advantage::before{
    content:"";
    position:absolute;
    left:-180px;
    top:80px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(22,119,255,.14),
        transparent 72%);
    filter:blur(20px);
    pointer-events:none;
}

.advantage::after{
    content:"";
    position:absolute;
    right:-220px;
    bottom:-180px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(107,92,255,.12),
        transparent 72%);
    filter:blur(30px);
    pointer-events:none;
}

.advantage-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.adv-card{
    position:relative;
    padding:40px 34px;
    border-radius:26px;
    overflow:hidden;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.03)
        );
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    transition:.35s;
}

.adv-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(22,119,255,.08),
            transparent 45%
        );
    opacity:0;
    transition:.35s;
}

.adv-card:hover{

    transform:translateY(-10px);

    border-color:rgba(22,119,255,.35);

    box-shadow:
        0 28px 70px rgba(0,0,0,.38);

}

.adv-card:hover::before{

    opacity:1;

}

.icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(22,119,255,.22),
            rgba(107,92,255,.22)
        );

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

}

.icon i{

    color:#8FC8FF;

    font-size:30px;

}

.adv-card h3{

    font-size:22px;

    color:#fff;

    margin-bottom:16px;

}

.adv-card p{

    color:#afc2e3;

    font-size:15px;

    line-height:1.9;

}

/*==============================
TABLET
==============================*/

@media(max-width:1200px){

    .advantage-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/*==============================
MOBILE
==============================*/

@media(max-width:768px){

    .advantage{

        padding:70px 0;

    }

    .advantage-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .adv-card{

        padding:30px 24px;

        border-radius:22px;

    }

    .icon{

        width:60px;

        height:60px;

        margin-bottom:22px;

    }

    .icon i{

        font-size:24px;

    }

    .adv-card h3{

        font-size:20px;

    }

    .adv-card p{

        font-size:14px;

        line-height:1.8;

    }

}