/* ============================================================
   MUMFAB MOBILE VISIBILITY FIX - FINAL
   ============================================================ */

@media (max-width: 767px) {

    /* ========================================================
       1. FOOTER - OPENED LINKS
       ======================================================== */

    html body #footer .footer-container .links .collapse,
    html body #footer .footer-container .links .collapse *,
    html body #footer .footer-container .links .collapse a,
    html body #footer .footer-container .links .collapse li a,
    html body #footer .footer-container .links .collapse p,
    html body #footer .footer-container .links .collapse span {
        color: #064E3B !important;
        background-color: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Footer opened area */
    html body #footer .footer-container .links .collapse {
        background-color: #FFFFFF !important;
    }


    /* ========================================================
       2. HEADER - DO NOT MAKE ALL HEADER LINKS GREEN
       ======================================================== */

    /* Mobile menu background */
    html body #header,
    html body #header .header-nav,
    html body #header .header-top,
    html body #mobile_top_menu_wrapper {
        background-color: #064E3B !important;
    }


    /* ========================================================
       3. MOBILE MENU TEXT - WHITE
       ======================================================== */

    html body #mobile_top_menu_wrapper a,
    html body #mobile_top_menu_wrapper li a,
    html body #mobile_top_menu_wrapper .top-menu a,
    html body #mobile_top_menu_wrapper .top-menu > li > a,
    html body #mobile_top_menu_wrapper .sub-menu a,
    html body #mobile_top_menu_wrapper .category a,
    html body #mobile_top_menu_wrapper span,
    html body #mobile_top_menu_wrapper .dropdown-item {
        color: #FFFFFF !important;
        background-color: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
    }


    /* ========================================================
       4. MOBILE MENU ITEM ROWS
       ======================================================== */

    html body #mobile_top_menu_wrapper li,
    html body #mobile_top_menu_wrapper .top-menu > li,
    html body #mobile_top_menu_wrapper .top-menu > li > a {
        color: #FFFFFF !important;
        opacity: 1 !important;
        visibility: visible !important;
    }


    /* ========================================================
       5. HEADER ICONS
       ======================================================== */

    html body #header .material-icons,
    html body #header .fa,
    html body #header .icon,
    html body #header svg {
        color: #FFFFFF !important;
        fill: #FFFFFF !important;
    }


    /* ========================================================
       6. CART
       ======================================================== */

    html body #header .blockcart,
    html body #header .blockcart a,
    html body #header .cart-preview,
    html body #header .cart-preview a {
        color: #FFFFFF !important;
    }

    html body #header .cart-products-count {
        color: #064E3B !important;
    }


    /* ========================================================
       7. MOBILE HEADER TOP LINKS
       ======================================================== */

    html body #header .header-nav a,
    html body #header .header-top a {
        color: #FFFFFF !important;
    }


    /* ========================================================
       8. LANGUAGE / CALL US
       ======================================================== */

    html body #header .language-selector,
    html body #header .language-selector a,
    html body #header .language-selector-label,
    html body #header .call-us,
    html body #header .call-us a {
        color: #FFFFFF !important;
    }


    /* ========================================================
       9. REMOVE OPACITY THAT CAN HIDE MENU TEXT
       ======================================================== */

    html body #header #mobile_top_menu_wrapper a,
    html body #header #mobile_top_menu_wrapper li,
    html body #header #mobile_top_menu_wrapper span {
        opacity: 1 !important;
        visibility: visible !important;
    }

}

/* ============================================================
   MUMFAB MOBILE FOOTER - FINAL VISIBILITY & BRAND FIX
   ============================================================ */

@media (max-width: 767px) {

    /* ========================================================
       FOOTER MAIN BACKGROUND
       ======================================================== */

    html body #footer,
    html body #footer .footer-container {
        background-color: #064E3B !important;
    }


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

    html body #footer .block_newsletter,
    html body #footer .footer-newsletter,
    html body #footer .newsletter {
        background-color: #064E3B !important;
        color: #FFFFFF !important;
    }

    html body #footer .block_newsletter *,
    html body #footer .footer-newsletter *,
    html body #footer .newsletter * {
        color: #FFFFFF !important;
    }

    html body #footer .block_newsletter input,
    html body #footer .footer-newsletter input,
    html body #footer .newsletter input {
        color: #333333 !important;
        background-color: #FFFFFF !important;
    }

    html body #footer .block_newsletter button,
    html body #footer .footer-newsletter button,
    html body #footer .newsletter button {
        color: #FFFFFF !important;
        background-color: #064E3B !important;
    }


    /* ========================================================
       FOOTER ACCORDION HEADINGS
       ======================================================== */

    html body #footer .footer-container .links .h3,
    html body #footer .footer-container .links h3,
    html body #footer .footer-container .links .title,
    html body #footer .footer-container .links > h3,
    html body #footer .footer-container .links > h3 a {
        color: #FFFFFF !important;
        background-color: #064E3B !important;
    }


    /* ========================================================
       FOOTER ACCORDION ROW
       ======================================================== */

    html body #footer .footer-container .links {
        background-color: #064E3B !important;
        color: #FFFFFF !important;
    }


    /* ========================================================
       OPENED FOOTER CONTENT
       ======================================================== */

    html body #footer .footer-container .links .collapse {
        background-color: #FFFFFF !important;
        color: #064E3B !important;
    }

    html body #footer .footer-container .links .collapse *,
    html body #footer .footer-container .links .collapse a,
    html body #footer .footer-container .links .collapse li,
    html body #footer .footer-container .links .collapse li a,
    html body #footer .footer-container .links .collapse p,
    html body #footer .footer-container .links .collapse span {
        color: #064E3B !important;
        background-color: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
    }


    /* ========================================================
       FOOTER CLOSED SECTIONS
       ======================================================== */

    html body #footer .footer-container .links:not(.open) {
        background-color: #064E3B !important;
        color: #FFFFFF !important;
    }


    /* ========================================================
       FOOTER ARROWS
       ======================================================== */

    html body #footer .footer-container .links .navbar-toggler,
    html body #footer .footer-container .links .navbar-toggler i,
    html body #footer .footer-container .links .navbar-toggler::after {
        color: #FFFFFF !important;
    }


    /* ========================================================
       SOCIAL MEDIA / ACCOUNT / STORE INFORMATION
       ======================================================== */

    html body #footer .footer-container {
        color: #FFFFFF !important;
    }


    /* ========================================================
       COPYRIGHT
       ======================================================== */

    html body #footer .footer-bottom,
    html body #footer .footer-container .footer-bottom {
        background-color: #064E3B !important;
        color: #FFFFFF !important;
    }

    html body #footer .footer-bottom *,
    html body #footer .footer-container .footer-bottom * {
        color: #FFFFFF !important;
    }

}

/* ============================================================
   MUMFAB INVESTMENT LIMITED
   CUSTOM TEXT / INTRODUCTION SECTION
   ============================================================ */

#custom-text {
    background: #064E3B !important;
    color: #FFFFFF !important;

    border-top: 5px solid #C9A227 !important;
    border-bottom: 5px solid #C9A227 !important;

    padding: 65px 40px !important;
    margin: 50px auto !important;

    text-align: center !important;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}


/* ------------------------------------------------------------
   MAIN TITLE
   ------------------------------------------------------------ */

#custom-text h1,
#custom-text h2,
#custom-text h3 {
    color: #FFFFFF !important;

    font-weight: 700 !important;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    margin-bottom: 18px !important;
}


/* ------------------------------------------------------------
   SLOGAN
   ------------------------------------------------------------ */

#custom-text p strong,
#custom-text p b {
    color: #C9A227 !important;

    font-weight: 700 !important;
}


/* ------------------------------------------------------------
   NORMAL DESCRIPTION TEXT
   ------------------------------------------------------------ */

#custom-text p {
    color: #FFFFFF !important;

    line-height: 1.8 !important;

    font-size: 17px;

    max-width: 850px;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ------------------------------------------------------------
   EXPLORE OUR SERVICES BUTTON
   ------------------------------------------------------------ */

#custom-text a {
    display: inline-block !important;

    background: #C9A227 !important;

    color: #064E3B !important;

    border: 2px solid #C9A227 !important;

    padding: 13px 28px !important;

    margin-top: 20px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    transition: all 0.3s ease;
}


/* ------------------------------------------------------------
   BUTTON HOVER
   ------------------------------------------------------------ */

#custom-text a:hover {
    background: #FFFFFF !important;

    color: #064E3B !important;

    border-color: #FFFFFF !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    #custom-text {
        padding: 45px 25px !important;

        margin: 35px 15px !important;

        border-top-width: 4px !important;
        border-bottom-width: 4px !important;
    }

    #custom-text h1,
    #custom-text h2,
    #custom-text h3 {
        font-size: 28px !important;

        line-height: 1.25 !important;

        letter-spacing: 1px;
    }

    #custom-text p {
        font-size: 16px !important;

        line-height: 1.7 !important;
    }

    #custom-text a {
        padding: 12px 22px !important;

        font-size: 14px !important;
    }
}

/* ============================================================
   MUMFAB MOBILE MENU DROPDOWN VISIBILITY FIX
   Home > Dropdown / Sub-menu
   Background: White
   Text: Deep Green
   ============================================================ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       MOBILE MENU DROPDOWN BACKGROUND
       -------------------------------------------------------- */

    html body #mobile_top_menu_wrapper .top-menu .sub-menu,
    html body #mobile_top_menu_wrapper .top-menu .popover,
    html body #mobile_top_menu_wrapper .top-menu ul.sub-menu,
    html body #mobile_top_menu_wrapper .top-menu .sub-menu ul {
        background-color: #FFFFFF !important;
        color: #064E3B !important;
    }


    /* --------------------------------------------------------
       DROPDOWN LINKS
       -------------------------------------------------------- */

    html body #mobile_top_menu_wrapper .top-menu .sub-menu a,
    html body #mobile_top_menu_wrapper .top-menu .sub-menu li a,
    html body #mobile_top_menu_wrapper .top-menu .popover a,
    html body #mobile_top_menu_wrapper .top-menu .popover li a {
        color: #064E3B !important;
        background-color: #FFFFFF !important;
    }


    /* --------------------------------------------------------
       DROPDOWN LINK HOVER / ACTIVE
       -------------------------------------------------------- */

    html body #mobile_top_menu_wrapper .top-menu .sub-menu a:hover,
    html body #mobile_top_menu_wrapper .top-menu .sub-menu li a:hover,
    html body #mobile_top_menu_wrapper .top-menu .popover a:hover,
    html body #mobile_top_menu_wrapper .top-menu .popover li a:hover {
        color: #FFFFFF !important;
        background-color: #064E3B !important;
    }


    /* --------------------------------------------------------
       DROPDOWN LIST ITEMS
       -------------------------------------------------------- */

    html body #mobile_top_menu_wrapper .top-menu .sub-menu li,
    html body #mobile_top_menu_wrapper .top-menu .popover li {
        background-color: #FFFFFF !important;
        color: #064E3B !important;
    }


    /* --------------------------------------------------------
       SUB-MENU TEXT / SPANS
       -------------------------------------------------------- */

    html body #mobile_top_menu_wrapper .top-menu .sub-menu span,
    html body #mobile_top_menu_wrapper .top-menu .sub-menu p,
    html body #mobile_top_menu_wrapper .top-menu .popover span,
    html body #mobile_top_menu_wrapper .top-menu .popover p {
        color: #064E3B !important;
        background-color: transparent !important;
    }
}