/* ==========================================
   FEATURES.CSS
   ========================================== */

.features-bar {

    padding:40px 0 48px;

    background: #0d0d0d;

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);

}

.features-grid{

    display:grid;

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

    gap:24px;

}

.feature-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:12px;

    border-radius:18px;

    transition:.35s;

}

.feature-card:hover{

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

    transform:translateY(-6px);

}

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

.feature-card__icon{

    width:52px;
    height:52px;

    display:flex;

    justify-content:center;
    align-items:center;

    margin-bottom:22px;

    border-radius:50%;

    border:1px solid rgba(214,166,79,.25);

    background:rgba(214,166,79,.05);

    transition:.35s;

}

.feature-card__icon svg{

    width:28px;
    height:28px;

    stroke:var(--color-primary);

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;

    fill:none;

    transition:.35s;

}

.feature-card:hover .feature-card__icon{

    background:rgba(214,166,79,.12);

    border-color:var(--color-primary);

}

.feature-card:hover svg{

    transform:scale(1.15);

}

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

.feature-card h3{

    font-family:var(--font-heading);

    font-size:1rem;

    font-weight:600;

    line-height:1.25;

    color:var(--color-white);

}