/*=================================
        ArenaOS
        TRUST.CSS
=================================*/


/*=================================
        SECTION
=================================*/

.trust{

    position:relative;

    padding:120px 0;

}


/*=================================
        GRID
=================================*/

.trust-grid{

    display:grid;

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

    gap:28px;

    margin-top:80px;

}


/*=================================
        CARD
=================================*/

.trust-card{

    position:relative;

    padding:40px 34px;

    border-radius:28px;

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

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

    backdrop-filter:blur(20px);

    transition:var(--transition);

    overflow:hidden;

}

.trust-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        180deg,

        rgba(25,19,184,.12),

        transparent

    );

    opacity:0;

    transition:var(--transition);

}

.trust-card:hover{

    transform:translateY(-10px);

    border-color:rgba(25,19,184,.35);

    box-shadow:0 30px 80px rgba(25,19,184,.18);

}

.trust-card:hover::before{

    opacity:1;

}


/*=================================
        ICON
=================================*/

.trust-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:20px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    font-size:1.8rem;

    box-shadow:var(--shadow-primary);

}


/*=================================
        TEXT
=================================*/

.trust-card h3{

    margin-bottom:18px;

    font-size:1.4rem;

}

.trust-card p{

    color:var(--text-muted);

    line-height:1.8;

}


/*=================================
        RESPONSIVE
=================================*/

@media(max-width:1100px){

    .trust-grid{

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

    }

}

@media(max-width:768px){

    .trust{

        padding:90px 0;

    }

    .trust-grid{

        grid-template-columns:1fr;

        margin-top:60px;

    }

}