.elementor-314 .elementor-element.elementor-element-99baa02{--display:flex;--margin-top:-60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-314 .elementor-element.elementor-element-f593ca3{--e-image-carousel-slides-to-show:1;}.elementor-314 .elementor-element.elementor-element-f593ca3 .elementor-swiper-button.elementor-swiper-button-prev, .elementor-314 .elementor-element.elementor-element-f593ca3 .elementor-swiper-button.elementor-swiper-button-next{font-size:13px;color:#C4C4C4;}.elementor-314 .elementor-element.elementor-element-f593ca3 .elementor-swiper-button.elementor-swiper-button-prev svg, .elementor-314 .elementor-element.elementor-element-f593ca3 .elementor-swiper-button.elementor-swiper-button-next svg{fill:#C4C4C4;}.elementor-314 .elementor-element.elementor-element-f593ca3 .swiper-pagination-bullet{--swiper-pagination-bullet-horizontal-gap:3px;--swiper-pagination-bullet-vertical-gap:3px;width:5px;height:5px;background:#15973D;}.elementor-314 .elementor-element.elementor-element-1f825eb{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-314 .elementor-element.elementor-element-cbda95c .elementor-button{background-color:#15973D;}.elementor-314 .elementor-element.elementor-element-cbda95c.elementor-element{--align-self:center;}.elementor-314 .elementor-element.elementor-element-cbda95c .elementor-button-content-wrapper{flex-direction:row;}.elementor-314 .elementor-element.elementor-element-47b4306 .elementor-button{background-color:#15973D;}.elementor-314 .elementor-element.elementor-element-47b4306.elementor-element{--align-self:center;}.elementor-314 .elementor-element.elementor-element-47b4306 .elementor-button-content-wrapper{flex-direction:row;}.elementor-314 .elementor-element.elementor-element-e7f3582 .elementor-button{background-color:#15973D;}.elementor-314 .elementor-element.elementor-element-e7f3582.elementor-element{--align-self:center;}.elementor-314 .elementor-element.elementor-element-e7f3582 .elementor-button-content-wrapper{flex-direction:row;}.elementor-314 .elementor-element.elementor-element-4731e0c .elementor-button{background-color:#15973D;}.elementor-314 .elementor-element.elementor-element-4731e0c.elementor-element{--align-self:center;}.elementor-314 .elementor-element.elementor-element-4731e0c .elementor-button-content-wrapper{flex-direction:row;}.elementor-314 .elementor-element.elementor-element-753bcbc{--display:flex;}.elementor-314 .elementor-element.elementor-element-e0f4fdb{--display:flex;}.elementor-314 .elementor-element.elementor-element-ce3e2a1{--display:flex;}.elementor-314 .elementor-element.elementor-element-6f9c59c{--display:flex;}.elementor-314 .elementor-element.elementor-element-40ca0d6{--display:flex;}.elementor-314 .elementor-element.elementor-element-60a43fd{--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-314 .elementor-element.elementor-element-60a43fd .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-314 .elementor-element.elementor-element-60a43fd:after{content:"0.66";}.elementor-314 .elementor-element.elementor-element-60a43fd .elementor-post__thumbnail__link{width:100%;}.elementor-314 .elementor-element.elementor-element-60a43fd .elementor-post__meta-data span + span:before{content:"•";}.elementor-314 .elementor-element.elementor-element-60a43fd .elementor-post__card{border-radius:10px;}.elementor-314 .elementor-element.elementor-element-60a43fd .elementor-post__text{margin-top:20px;}.elementor-314 .elementor-element.elementor-element-60a43fd .elementor-post__badge{right:0;}.elementor-314 .elementor-element.elementor-element-60a43fd .elementor-post__card .elementor-post__badge{margin:20px;}.elementor-314 .elementor-element.elementor-element-60a43fd .elementor-post__title, .elementor-314 .elementor-element.elementor-element-60a43fd .elementor-post__title a{color:#457C2F;}.elementor-314 .elementor-element.elementor-element-60a43fd .elementor-post__read-more{color:#457C2F;}@media(max-width:1024px){.elementor-314 .elementor-element.elementor-element-1f825eb{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-314 .elementor-element.elementor-element-99baa02{--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-314 .elementor-element.elementor-element-1f825eb{--e-con-grid-template-columns:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-314 .elementor-element.elementor-element-cbda95c .elementor-button{font-size:12px;border-radius:5px 5px 5px 5px;}.elementor-314 .elementor-element.elementor-element-47b4306 .elementor-button{font-size:12px;border-radius:5px 5px 5px 5px;}.elementor-314 .elementor-element.elementor-element-e7f3582 .elementor-button{font-size:12px;border-radius:5px 5px 5px 5px;}.elementor-314 .elementor-element.elementor-element-4731e0c .elementor-button{font-size:12px;border-radius:5px 5px 5px 5px;}.elementor-314 .elementor-element.elementor-element-60a43fd .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-314 .elementor-element.elementor-element-60a43fd:after{content:"0.5";}.elementor-314 .elementor-element.elementor-element-60a43fd .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS for shortcode, class: .elementor-element-488aca3 *//* =========================================================
   MAUJUAL
   GADGET TERLARIS
   DESKTOP + MOBILE
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

.smbmb-best-seller,
.smbmb-best-seller *,
.smbmb-best-seller *::before,
.smbmb-best-seller *::after {
    box-sizing: border-box;
}


/* =========================================================
   CONTAINER UTAMA DESKTOP
   ========================================================= */

.smbmb-best-seller {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 32px;

    padding: 8px 0;

    margin: 0;

    overflow: hidden;
}


/* =========================================================
   INTRO DESKTOP
   ========================================================= */

.smbmb-best-seller-intro {

    flex: 0 0 400px;

    width: 400px;

    min-width: 400px;

    margin: 0;

    padding: 0;
}


/* =========================================================
   JUDUL
   ========================================================= */

.smbmb-best-seller-intro h2 {

    margin: 0 0 8px !important;

    padding: 0 !important;

    color: #111 !important;

    font-size: 25px !important;

    line-height: 1.2 !important;

    font-weight: 500 !important;
}


/* =========================================================
   DESKRIPSI
   ========================================================= */

.smbmb-best-seller-intro p {

    margin: 0 0 20px !important;

    padding: 0 !important;

    color: #31506b !important;

    font-size: 15px !important;

    line-height: 1.5 !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.smbmb-best-seller-button {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: 0 18px;

    border-radius: 25px;

    background: #4d963f !important;

    color: #fff !important;

    font-size: 13px !important;

    line-height: 1 !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    transition:
        background .2s ease,
        transform .2s ease;
}


.smbmb-best-seller-button:hover {

    background: #3f8132 !important;

    color: #fff !important;

    transform: translateY(-1px);
}


/* =========================================================
   PRODUCT WRAPPER
   ========================================================= */

.smbmb-best-seller-wrapper {

    position: relative;

    flex: 1;

    min-width: 0;

    overflow: hidden;

    margin: 0;

    padding: 0;
}


/* =========================================================
   PRODUCT SLIDER DESKTOP
   ========================================================= */

.smbmb-best-seller-slider {

    display: flex;

    align-items: flex-start;

    gap: 28px;

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    padding: 2px 45px 5px 0;

    margin: 0;

    scroll-behavior: smooth;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}


.smbmb-best-seller-slider::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   PRODUCT
   ========================================================= */

.smbmb-best-seller-item {

    position: relative;

    flex: 0 0 105px;

    width: 105px;

    min-width: 105px;

    margin: 0;

    padding: 0;

    overflow: visible;
}


/* =========================================================
   IMAGE WRAPPER
   ========================================================= */

.smbmb-best-seller-image-wrap {

    position: relative;

    width: 105px;

    height: 105px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 0 7px;

    padding: 0;
}


/* =========================================================
   IMAGE LINK
   ========================================================= */

.smbmb-best-seller-image {

    width: 88px;

    height: 88px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    padding: 0;

    text-decoration: none !important;
}


/* =========================================================
   IMAGE
   ========================================================= */

.smbmb-best-seller-image img {

    display: block !important;

    width: 88px !important;

    height: 88px !important;

    max-width: 88px !important;

    max-height: 88px !important;

    object-fit: contain !important;

    margin: 0 !important;

    padding: 0 !important;

    transition:
        transform .2s ease;
}


.smbmb-best-seller-image:hover img {

    transform: translateY(-3px);
}


/* =========================================================
   WISHLIST HEART
   ========================================================= */

.smbmb-best-seller-heart {

    position: absolute;

    right: -1px;

    bottom: 3px;

    width: 29px !important;

    height: 29px !important;

    min-width: 29px !important;

    max-width: 29px !important;

    min-height: 29px !important;

    max-height: 29px !important;

    padding: 0 !important;

    margin: 0 !important;

    border: none !important;

    border-radius: 50% !important;

    background: #e3efdf !important;

    color: #4d963f !important;

    display: flex !important;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: none !important;

    z-index: 5;

    transition:
        transform .2s ease,
        background .2s ease;
}


.smbmb-best-seller-heart span {

    display: block;

    font-size: 19px !important;

    line-height: 1 !important;

    transform: translateY(-1px);
}


.smbmb-best-seller-heart:hover {

    background: #d5e8d0 !important;

    transform: scale(1.05);
}


.smbmb-best-seller-heart.is-active {

    background: #4d963f !important;

    color: #fff !important;
}


/* =========================================================
   PRODUCT NAME
   ========================================================= */

.smbmb-best-seller-name {

    display: -webkit-box !important;

    width: 100%;

    min-height: 38px;

    overflow: hidden;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    color: #111 !important;

    font-size: 14px !important;

    line-height: 1.35 !important;

    font-weight: 400 !important;

    text-decoration: none !important;

    margin: 0 !important;

    padding: 0 !important;
}


.smbmb-best-seller-name:hover {

    color: #4d963f !important;
}


/* =========================================================
   PRICE
   ========================================================= */

.smbmb-best-seller-price {

    margin-top: 3px !important;

    padding: 0 !important;

    color: #4d963f !important;

    font-size: 14px !important;

    line-height: 1.35 !important;

    font-weight: 500 !important;

    white-space: nowrap;
}


/* =========================================================
   NEXT ARROW DESKTOP
   ========================================================= */

.smbmb-best-seller-next {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 43px;

    height: 70px;

    padding: 0 !important;

    margin: 0 !important;

    border: 0 !important;

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,0),
            rgba(255,255,255,.96) 45%,
            #fff 100%
        ) !important;

    color: #444 !important;

    display: flex !important;

    align-items: center;

    justify-content: flex-end;

    cursor: pointer;

    z-index: 10;
}


.smbmb-best-seller-next span {

    font-size: 31px !important;

    line-height: 1 !important;

    margin-right: 1px;
}


.smbmb-best-seller-next:hover {

    color: #111 !important;
}


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

@media (max-width: 1100px) {

    .smbmb-best-seller {

        gap: 25px;
    }


    .smbmb-best-seller-intro {

        flex: 0 0 280px;

        width: 280px;

        min-width: 280px;
    }


    .smbmb-best-seller-intro h2 {

        font-size: 23px !important;
    }


    .smbmb-best-seller-slider {

        gap: 22px;
    }
}


/* =========================================================
   =========================================================
   MOBILE
   SEPERTI SCREENSHOT USER
   =========================================================
   ========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       MAIN
       ===================================================== */

    .smbmb-best-seller {

        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        column-gap: 12px !important;

        row-gap: 0 !important;

        padding:
            18px
            4px
            10px !important;

        margin: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       INTRO
       ===================================================== */

    .smbmb-best-seller-intro {

        display: contents !important;

        width: auto !important;

        min-width: 0 !important;

        flex: none !important;
    }


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

    .smbmb-best-seller-intro h2 {

        grid-column: 1 / -1 !important;

        order: 1 !important;

        width: 100% !important;

        margin:
            0
            0
            5px !important;

        padding: 0 !important;

        color: #111 !important;

        font-size: 20px !important;

        line-height: 1.3 !important;

        font-weight: 500 !important;
    }


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

    .smbmb-best-seller-intro p {

        grid-column: 1 / -1 !important;

        order: 2 !important;

        width: 100% !important;

        margin:
            0
            0
            18px !important;

        padding: 0 !important;

        color: #31506b !important;

        font-size: 11px !important;

        line-height: 1.5 !important;
    }


    /* =====================================================
       WRAPPER
       ===================================================== */

    .smbmb-best-seller-wrapper {

        grid-column: 1 / -1 !important;

        order: 3 !important;

        width: 100% !important;

        min-width: 0 !important;

        overflow: visible !important;

        margin: 0 !important;

        padding: 0 !important;
    }


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

    .smbmb-best-seller-slider {

        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        column-gap: 12px !important;

        row-gap: 20px !important;

        width: 100% !important;

        overflow: visible !important;

        padding: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        scroll-behavior: auto !important;
    }


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

    .smbmb-best-seller-item {

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        flex: none !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       IMAGE AREA
       ===================================================== */

    .smbmb-best-seller-image-wrap {

        position: relative !important;

        width: 100% !important;

        height: 165px !important;

        margin:
            0
            0
            5px !important;

        padding: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       IMAGE LINK
       ===================================================== */

    .smbmb-best-seller-image {

        width: 155px !important;

        height: 155px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        margin: 0 auto !important;

        padding: 0 !important;
    }


    /* =====================================================
       PRODUCT IMAGE
       ===================================================== */

    .smbmb-best-seller-image img {

        width: 155px !important;

        height: 155px !important;

        max-width: 155px !important;

        max-height: 155px !important;

        object-fit: contain !important;

        display: block !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* =====================================================
       HEART
       ===================================================== */

    .smbmb-best-seller-heart {

        position: absolute !important;

        right: 13px !important;

        bottom: 2px !important;

        width: 29px !important;

        height: 29px !important;

        min-width: 29px !important;

        max-width: 29px !important;

        min-height: 29px !important;

        max-height: 29px !important;

        padding: 0 !important;

        margin: 0 !important;

        border: none !important;

        border-radius: 50% !important;

        background: #e3efdf !important;

        color: #4d963f !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        z-index: 5 !important;

        box-shadow: none !important;
    }


    .smbmb-best-seller-heart span {

        font-size: 18px !important;

        line-height: 1 !important;
    }


    /* =====================================================
       NAME
       ===================================================== */

    .smbmb-best-seller-name {

        display: -webkit-box !important;

        width: 100% !important;

        min-height: 18px !important;

        max-height: 36px !important;

        overflow: hidden !important;

        -webkit-line-clamp: 2 !important;

        -webkit-box-orient: vertical !important;

        color: #111 !important;

        font-size: 12px !important;

        line-height: 1.45 !important;

        font-weight: 400 !important;

        text-decoration: none !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* =====================================================
       PRICE
       ===================================================== */

    .smbmb-best-seller-price {

        width: 100% !important;

        margin:
            2px
            0
            0 !important;

        padding: 0 !important;

        color: #4d963f !important;

        font-size: 12px !important;

        line-height: 1.4 !important;

        font-weight: 500 !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       HILANGKAN PANAH DI MOBILE
       ===================================================== */

    .smbmb-best-seller-next {

        display: none !important;
    }


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

    .smbmb-best-seller-button {

        grid-column: 1 / -1 !important;

        order: 4 !important;

        justify-self: start !important;

        margin:
            22px
            0
            0 !important;

        min-height: 36px !important;

        padding:
            0
            14px !important;

        border-radius: 20px !important;

        background: #4d963f !important;

        color: #fff !important;

        font-size: 11px !important;

        line-height: 1 !important;

        font-weight: 600 !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        text-decoration: none !important;
    }

}


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

@media (max-width: 480px) {


    .smbmb-best-seller {

        column-gap: 10px !important;

        padding-left: 4px !important;

        padding-right: 4px !important;
    }


    .smbmb-best-seller-slider {

        column-gap: 10px !important;

        row-gap: 19px !important;
    }


    .smbmb-best-seller-image-wrap {

        height: 155px !important;
    }


    .smbmb-best-seller-image {

        width: 145px !important;

        height: 145px !important;
    }


    .smbmb-best-seller-image img {

        width: 145px !important;

        height: 145px !important;

        max-width: 145px !important;

        max-height: 145px !important;
    }


    .smbmb-best-seller-heart {

        right: 10px !important;

        bottom: 0 !important;
    }


    .smbmb-best-seller-name {

        font-size: 12px !important;
    }


    .smbmb-best-seller-price {

        font-size: 12px !important;
    }

}


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

@media (max-width: 360px) {


    .smbmb-best-seller-slider {

        column-gap: 8px !important;
    }


    .smbmb-best-seller-image-wrap {

        height: 140px !important;
    }


    .smbmb-best-seller-image {

        width: 130px !important;

        height: 130px !important;
    }


    .smbmb-best-seller-image img {

        width: 130px !important;

        height: 130px !important;

        max-width: 130px !important;

        max-height: 130px !important;
    }


    .smbmb-best-seller-heart {

        right: 7px !important;
    }

}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-85369e2 *//* ============================================================
   MAUJUAL
   MEREK UNGGULAN
   FULL RESPONSIVE
   ============================================================ */


/* ============================================================
   BOX SIZING
   ============================================================ */

.mj-brand-section,
.mj-brand-section *,
.mj-brand-section *::before,
.mj-brand-section *::after {
    box-sizing: border-box;
}


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

.mj-brand-section {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 30px 28px 26px;

    background: #f3f3f3;

    border-radius: 5px;

    overflow: hidden;
}


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

.mj-brand-title {

    width: 100%;

    margin: 0 0 28px !important;

    padding: 0 !important;

    text-align: center;

    color: #4d963f !important;

    font-size: 23px !important;

    line-height: 1.3 !important;

    font-weight: 500 !important;
}


/* ============================================================
   BRAND GRID DESKTOP
   ============================================================ */

.mj-brand-grid {

    display: grid;

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

    column-gap: 35px;

    row-gap: 42px;

    width: 100%;

    margin: 0;

    padding: 0;
}


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

.mj-brand-item {

    display: block;

    width: 100%;

    min-width: 0;

    color: #111 !important;

    text-decoration: none !important;

    text-align: center;

    transition:
        transform .2s ease;
}


.mj-brand-item:hover {

    color: #111 !important;

    text-decoration: none !important;

    transform: translateY(-2px);
}


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

.mj-brand-logo {

    width: 100%;

    height: 145px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 0 13px;

    padding: 0;
}


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

.mj-brand-logo img {

    display: block;

    width: auto;

    max-width: 155px;

    height: auto;

    max-height: 105px;

    object-fit: contain;

    margin: 0 auto;

    transition:
        transform .2s ease;
}


.mj-brand-item:hover
.mj-brand-logo img {

    transform: scale(1.03);
}


/* ============================================================
   APPLE
   ============================================================ */

.mj-brand-item:nth-child(1)
.mj-brand-logo img {

    max-height: 105px;
}


/* ============================================================
   XIAOMI
   ============================================================ */

.mj-brand-item:nth-child(4)
.mj-brand-logo img {

    max-height: 105px;
}


/* ============================================================
   HUAWEI
   ============================================================ */

.mj-brand-item:nth-child(5)
.mj-brand-logo img {

    max-height: 85px;
}


/* ============================================================
   BRAND NAME
   ============================================================ */

.mj-brand-name {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-height: 24px;

    color: #111 !important;

    font-size: 13px !important;

    line-height: 1.35 !important;

    font-weight: 400 !important;

    white-space: nowrap;
}


/* ============================================================
   ARROW
   ============================================================ */

.mj-brand-name b {

    display: inline-block;

    color: #111;

    font-size: 17px;

    line-height: 1;

    font-weight: 400;

    transform: translateY(-1px);

    transition:
        transform .2s ease;
}


.mj-brand-item:hover
.mj-brand-name b {

    transform:
        translate(3px, -1px);
}


/* ============================================================
   BUTTON WRAPPER
   ============================================================ */

.mj-brand-button-wrap {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 35px;
}


/* ============================================================
   BUTTON
   ============================================================ */

.mj-brand-button {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    min-height: 39px;

    padding:
        0
        18px;

    border-radius: 22px;

    background: #4d963f !important;

    color: #fff !important;

    font-size: 12px !important;

    line-height: 1 !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    transition:
        background .2s ease,
        transform .2s ease;
}


.mj-brand-button:hover {

    background: #3f8134 !important;

    color: #fff !important;

    text-decoration: none !important;

    transform: translateY(-1px);
}


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

@media (max-width: 900px) {


    .mj-brand-section {

        padding:
            27px
            20px
            25px;
    }


    .mj-brand-grid {

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

        column-gap: 25px;

        row-gap: 35px;
    }


    .mj-brand-logo {

        height: 125px;
    }


    .mj-brand-logo img {

        max-width: 140px;

        max-height: 90px;
    }

}


/* ============================================================
   MOBILE
   2 KOLOM
   ============================================================ */

@media (max-width: 767px) {


    /* ========================================================
       CONTAINER
       ======================================================== */

    .mj-brand-section {

        width: calc(100% - 12px) !important;

        max-width: none !important;

        margin:
            0
            6px !important;

        padding:
            25px
            12px
            25px !important;

        background: #f3f3f3 !important;

        border-radius: 4px !important;

        overflow: hidden !important;
    }


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

    .mj-brand-title {

        margin:
            0
            0
            24px !important;

        padding: 0 !important;

        text-align: center !important;

        font-size: 20px !important;

        line-height: 1.35 !important;

        font-weight: 500 !important;

        color: #4d963f !important;
    }


    /* ========================================================
       GRID 2 KOLOM
       ======================================================== */

    .mj-brand-grid {

        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        column-gap: 15px !important;

        row-gap: 44px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


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

    .mj-brand-item {

        width: 100% !important;

        min-width: 0 !important;

        display: block !important;

        text-align: center !important;

        transform: none !important;
    }


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

    .mj-brand-logo {

        width: 100% !important;

        height: 112px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        margin:
            0
            0
            12px !important;

        padding: 0 !important;
    }


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

    .mj-brand-logo img {

        display: block !important;

        width: auto !important;

        max-width: 150px !important;

        height: auto !important;

        max-height: 90px !important;

        object-fit: contain !important;

        margin: 0 auto !important;

        transform: none !important;
    }


    /* ========================================================
       APPLE
       ======================================================== */

    .mj-brand-item:nth-child(1)
    .mj-brand-logo img {

        max-width: 105px !important;

        max-height: 95px !important;
    }


    /* ========================================================
       SAMSUNG
       ======================================================== */

    .mj-brand-item:nth-child(2)
    .mj-brand-logo img {

        max-width: 155px !important;

        max-height: 65px !important;
    }


    /* ========================================================
       OPPO
       ======================================================== */

    .mj-brand-item:nth-child(3)
    .mj-brand-logo img {

        max-width: 145px !important;

        max-height: 65px !important;
    }


    /* ========================================================
       XIAOMI
       ======================================================== */

    .mj-brand-item:nth-child(4)
    .mj-brand-logo img {

        max-width: 100px !important;

        max-height: 95px !important;
    }


    /* ========================================================
       HUAWEI
       ======================================================== */

    .mj-brand-item:nth-child(5)
    .mj-brand-logo img {

        max-width: 125px !important;

        max-height: 85px !important;
    }


    /* ========================================================
       REALME
       ======================================================== */

    .mj-brand-item:nth-child(6)
    .mj-brand-logo img {

        max-width: 155px !important;

        max-height: 70px !important;
    }


    /* ========================================================
       BRAND NAME
       ======================================================== */

    .mj-brand-name {

        width: 100% !important;

        min-height: 22px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 4px !important;

        color: #111 !important;

        font-size: 11px !important;

        line-height: 1.35 !important;

        font-weight: 400 !important;

        white-space: nowrap !important;

        text-align: center !important;
    }


    /* ========================================================
       ARROW
       ======================================================== */

    .mj-brand-name b {

        font-size: 15px !important;

        line-height: 1 !important;

        font-weight: 400 !important;
    }


    /* ========================================================
       BUTTON
       ======================================================== */

    .mj-brand-button-wrap {

        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        margin:
            31px
            0
            0 !important;
    }


    .mj-brand-button {

        min-height: 36px !important;

        padding:
            0
            16px !important;

        border-radius: 20px !important;

        font-size: 11px !important;

        font-weight: 600 !important;
    }

}


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

@media (max-width: 380px) {


    .mj-brand-section {

        padding:
            23px
            9px
            23px !important;
    }


    .mj-brand-grid {

        column-gap: 10px !important;

        row-gap: 40px !important;
    }


    .mj-brand-logo {

        height: 105px !important;
    }


    .mj-brand-logo img {

        max-width: 135px !important;

        max-height: 82px !important;
    }


    /* APPLE */

    .mj-brand-item:nth-child(1)
    .mj-brand-logo img {

        max-width: 95px !important;
    }


    /* XIAOMI */

    .mj-brand-item:nth-child(4)
    .mj-brand-logo img {

        max-width: 90px !important;
    }


    .mj-brand-name {

        font-size: 10px !important;
    }

}/* End custom CSS */