/* ==========================================================
   ZENTIOHUB
   TRUST-BAR.CSS
   Version: 1.1
   Reconciled with index.html
   ========================================================== */


/* ==========================================================
   TRUST BAR
========================================================== */

.trust-bar {

    background: var(--color-primary);

    color: #ffffff;

    padding-block: var(--space-5);

}


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

.trust-bar__grid {

    display: grid;

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

    gap: var(--space-5);

    align-items: center;

}


/* ==========================================================
   TRUST ITEM
========================================================== */

.trust-bar__item {

    display: flex;

    align-items: center;

    gap: .75rem;

    min-width: 0;

}


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

.trust-bar__icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border-radius: 50%;

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

    font-size: 1.25rem;

    flex-shrink: 0;

    transition: background var(--transition-normal);

}


/* ==========================================================
   ITEM HOVER
========================================================== */

.trust-bar__item:hover .trust-bar__icon {

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

}


/* ==========================================================
   TITLE
========================================================== */

.trust-bar__title {

    margin: 0;

    font-size: var(--font-size-md);

    font-weight: var(--font-weight-semibold);

    color: #ffffff;

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.trust-bar__item p {

    margin: .25rem 0 0;

    font-size: var(--font-size-sm);

    line-height: 1.5;

    color: rgba(255,255,255,.85);

}


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

@media (max-width: 992px) {

    .trust-bar__grid {

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

    }

}


@media (max-width: 768px) {

    .trust-bar__grid {

        grid-template-columns: 1fr;

    }

    .trust-bar__item {

        justify-content: flex-start;

    }

}