.elementor-365 .elementor-element.elementor-element-ef45c8d{--display:flex;--min-height:300px;--margin-top:-60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-365 .elementor-element.elementor-element-67eae55{--display:flex;}@media(max-width:767px){.elementor-365 .elementor-element.elementor-element-ef45c8d{--min-height:60px;--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for html, class: .elementor-element-4861ad4 *//* =========================================================
   MAUJUAL - BRAND GRID
   ========================================================= */

.mj-brand-section {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 25px 20px 35px;

    box-sizing: border-box;

    background: #fff;
}


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

.mj-brand-grid {
    width: 100%;

    display: grid;

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

    column-gap: 30px;
    row-gap: 68px;

    align-items: start;
}


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

.mj-brand-item {
    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%;

    text-decoration: none !important;

    color: #111 !important;

    cursor: pointer;

    transition: transform .2s ease;
}


/* =========================================================
   LOGO AREA
   ========================================================= */

.mj-brand-logo {
    width: 190px;
    height: 125px;

    display: flex;

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

    margin-bottom: 15px;

    box-sizing: border-box;
}


/* =========================================================
   LOGO
   ========================================================= */

.mj-brand-logo img {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 155px !important;
    max-height: 105px !important;

    object-fit: contain;

    margin: 0 !important;
    padding: 0 !important;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* =========================================================
   UKURAN LOGO KHUSUS
   ========================================================= */

.mj-brand-item:nth-child(1) .mj-brand-logo img {
    max-width: 105px !important;
    max-height: 105px !important;
}

.mj-brand-item:nth-child(2) .mj-brand-logo img {
    max-width: 155px !important;
}

.mj-brand-item:nth-child(3) .mj-brand-logo img {
    max-width: 150px !important;
}

.mj-brand-item:nth-child(4) .mj-brand-logo img {
    max-width: 100px !important;
    max-height: 105px !important;
}

.mj-brand-item:nth-child(5) .mj-brand-logo img {
    max-width: 130px !important;
}

.mj-brand-item:nth-child(6) .mj-brand-logo img {
    max-width: 180px !important;
}

.mj-brand-item:nth-child(7) .mj-brand-logo img {
    max-width: 145px !important;
}

.mj-brand-item:nth-child(8) .mj-brand-logo img {
    max-width: 160px !important;
}

.mj-brand-item:nth-child(9) .mj-brand-logo img {
    max-width: 155px !important;
}

.mj-brand-item:nth-child(10) .mj-brand-logo img {
    max-width: 155px !important;
}


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

.mj-brand-item:hover .mj-brand-logo img {
    transform: scale(1.06);

    opacity: .85;
}


/* =========================================================
   NAMA BRAND
   ========================================================= */

.mj-brand-name {
    display: flex;

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

    gap: 7px;

    width: 100%;

    color: #111 !important;

    font-family: inherit;

    font-size: 13px !important;

    line-height: 1.4 !important;

    font-weight: 400 !important;

    text-align: center;

    white-space: nowrap;
}


/* =========================================================
   PANAH
   ========================================================= */

.mj-brand-name span {
    display: inline-block;

    font-size: 18px;

    line-height: 1;

    color: #111;

    transition: transform .2s ease;
}


.mj-brand-item:hover .mj-brand-name span {
    transform: translateX(3px);
}


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

.mj-brand-item:hover .mj-brand-name {
    color: #3f8f3b !important;
}

.mj-brand-item:hover .mj-brand-name span {
    color: #3f8f3b;
}


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

@media (max-width: 900px) {

    .mj-brand-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .mj-brand-grid {
        grid-template-columns: repeat(4, 1fr);

        column-gap: 20px;
        row-gap: 50px;
    }

    .mj-brand-logo {
        width: 150px;
        height: 110px;
    }

    .mj-brand-logo img {
        max-width: 125px !important;
        max-height: 90px !important;
    }

    .mj-brand-name {
        font-size: 12px !important;
    }
}


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

@media (max-width: 600px) {

    .mj-brand-section {
        padding: 15px 10px 30px;
    }

    .mj-brand-grid {
        grid-template-columns: repeat(2, 1fr);

        column-gap: 12px;
        row-gap: 38px;
    }

    .mj-brand-logo {
        width: 145px;
        height: 105px;

        margin-bottom: 10px;
    }

    .mj-brand-logo img {
        max-width: 125px !important;
        max-height: 85px !important;
    }

    .mj-brand-name {
        font-size: 12px !important;

        white-space: normal;

        min-height: 34px;
    }

    .mj-brand-name span {
        font-size: 16px;
    }
}


/* =========================================================
   HP KECIL
   ========================================================= */

@media (max-width: 380px) {

    .mj-brand-grid {
        column-gap: 8px;
        row-gap: 30px;
    }

    .mj-brand-logo {
        width: 135px;
        height: 95px;
    }

    .mj-brand-logo img {
        max-width: 110px !important;
        max-height: 78px !important;
    }

    .mj-brand-name {
        font-size: 11px !important;
    }
}/* End custom CSS */