.brands-section {

    opacity: 0;
    transform: translateY(80px);

    transition: 1s ease;

    text-align: center;

}

.brands-section.active {

    opacity: 1;
    transform: translateY(0);

}

.brands-grid {

    display: grid;

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

    gap: 80px;

    margin-top: 100px;

    justify-items: center;

}

/* =========================
   BRAND ITEM
========================= */

.brand-item img,
.brand-item svg {

    display: block;

    width: 100%;
    max-width: 180px;

    height: auto;
    max-height: 90px;

    margin: 0 auto;

    object-fit: contain;

    opacity: 0.45;

    filter: grayscale(100%);

    transition:
            transform 0.5s ease,
            opacity 0.5s ease,
            filter 0.5s ease;

}

.brand-item {

    position: relative;

    width: 100%;
    height: 140px;

    overflow: hidden;

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

    cursor: pointer;

}

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

.brand-item:hover img,
.brand-item:hover svg {

    opacity: 1;

    filter: grayscale(0%);

    transform: translateY(-6px);

}

/* ============================

Special SVG Attributes

============================== */

.halder-logo-path-icon,.halder-logo-path-name {
    fill-rule: evenodd;
    clip-rule: evenodd;
}

/*  WERA LOGO       */

.wera-header-logo-variant {
    grid-column: 1/-1;
    grid-row: 1/-1;
    display: block;
    height: calc(var(--header-height) - 1.25rem);
    width: auto;
    margin: .75rem 0 .5rem
}

#Vector 2 {
    fill: 00A784;
}

#Vector_3, #Vector_4, #Vector_5, #Vector_6, #Vector_7, #Vector_8, #Vector_9, #Vector_10, #Vector_11, #Vector_12, #Vector_13, #Vector_14, #Vector_15, #Vector_16, #Vector_17, #Vector_18  {
    fill: #000000;
}

#Clip path group {
    color:#ee0000;
}