.elementor-945 .elementor-element.elementor-element-cdd98ea:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-945 .elementor-element.elementor-element-cdd98ea > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#262A3E;}.elementor-945 .elementor-element.elementor-element-cdd98ea > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-945 .elementor-element.elementor-element-cdd98ea > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-945 .elementor-element.elementor-element-fd1685e > .elementor-widget-container{margin:10px 0px 10px 0px;padding:0px 0px 0px 0px;}.elementor-945 .elementor-element.elementor-element-fd1685e{text-align:center;}.elementor-945 .elementor-element.elementor-element-fd1685e img{width:180px;max-width:1000px;}.elementor-945 .elementor-element.elementor-element-3a4077c:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-945 .elementor-element.elementor-element-3a4077c > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#262A3E;}.elementor-945 .elementor-element.elementor-element-3a4077c > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-945 .elementor-element.elementor-element-3a4077c > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-945 .elementor-element.elementor-element-8ed7d6f{width:100%;max-width:100%;align-self:center;}.elementor-945 .elementor-element.elementor-element-8ed7d6f > .elementor-widget-container{background-color:#262A3E;margin:-10px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-menu-toggle{margin:0 auto;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-nav-menu .elementor-item{font-size:12px;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-nav-menu--main .elementor-item{color:#FFFFFF;fill:#FFFFFF;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#FFFFFF;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-framed .elementor-item:before,
					.elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-framed .elementor-item:after{border-color:#FFFFFF;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#D5A264;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:before,
					.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after{background-color:var( --e-global-color-primary );}.elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-framed .elementor-item.elementor-item-active:before,
					.elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-framed .elementor-item.elementor-item-active:after{border-color:var( --e-global-color-primary );}.elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-framed .elementor-item:before{border-width:1px;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 1px 1px;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:1px 1px 0 0;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:1px 0 0 1px;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 1px 1px 0;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-underline .elementor-item:after,
					 .elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-overline .elementor-item:before,
					 .elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-double-line .elementor-item:before,
					 .elementor-945 .elementor-element.elementor-element-8ed7d6f .e--pointer-double-line .elementor-item:after{height:1px;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-nav-menu--dropdown a.elementor-item-active{color:#FFFFFF;background-color:#262A3E;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-nav-menu--dropdown{border-style:solid;border-color:#EFEFEF;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-nav-menu--dropdown li:not(:last-child){border-style:solid;border-color:#EFEFEF;border-bottom-width:1px;}.elementor-945 .elementor-element.elementor-element-8ed7d6f div.elementor-menu-toggle{color:#FFFFFF;}.elementor-945 .elementor-element.elementor-element-8ed7d6f div.elementor-menu-toggle svg{fill:#FFFFFF;}.elementor-945 .elementor-element.elementor-element-deb166d:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-945 .elementor-element.elementor-element-deb166d > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EFEFEF;}.elementor-945 .elementor-element.elementor-element-deb166d > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-945 .elementor-element.elementor-element-deb166d > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:80px 0px 80px 0px;}.elementor-945 .elementor-element.elementor-element-deb166d > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-945 .elementor-element.elementor-element-bec32e4 > .elementor-widget-container{margin:0px 0px 30px 0px;padding:0px 0px 0px 0px;}.elementor-945 .elementor-element.elementor-element-bec32e4{font-family:"Outfit", Sans-serif;font-size:20px;font-weight:500;}.elementor-945 .elementor-element.elementor-element-97e8b5b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-945 .elementor-element.elementor-element-f49d901 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-945 .elementor-element.elementor-element-97e8b5b > .elementor-widget-container{margin:0px 150px 0px 150px;}}@media(max-width:767px){.elementor-945 .elementor-element.elementor-element-fd1685e > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-945 .elementor-element.elementor-element-fd1685e img{width:87px;}.elementor-945 .elementor-element.elementor-element-8ed7d6f > .elementor-widget-container{margin:0px 0px -10px 0px;padding:0px 0px 10px 0px;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-nav-menu--dropdown{border-width:0.1px 0.1px 0.1px 0.1px;}.elementor-945 .elementor-element.elementor-element-8ed7d6f{--nav-menu-icon-size:20px;}.elementor-945 .elementor-element.elementor-element-8ed7d6f .elementor-menu-toggle{border-width:0px;border-radius:0px;}.elementor-945 .elementor-element.elementor-element-97e8b5b > .elementor-widget-container{margin:0px 20px 0px 20px;}}/* Start custom CSS for column, class: .elementor-element-3a4077c */<style>

/* =========================================
   ORIGINAL MENU
========================================= */

.ja-main-menu{
    position:relative !important;
}


/* =========================================
   FLOATING MENU
========================================= */

.ja-floating-menu{
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    width:100%;
    min-height:72px;
    z-index:999999;

    background:#262a3e;

    opacity:0;
    visibility:hidden;
    transform:translateY(-100%);

    transition:
        transform .3s ease,
        opacity .3s ease,
        visibility .3s ease;

    /* CENTRE MENU VERTICALLY */

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

    padding-top:0 !important;
    padding-bottom:0 !important;
}


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

.ja-floating-menu::before{
    content:"";

    position:absolute;

    left:30px;

    /* Slight optical adjustment */
    top:calc(50% + 3px);
    transform:translateY(-50%);

    width:155px;
    height:48px;

    background-image:url("https://jewelafrica.com/wp-content/uploads/2026/08/JA-FAVICON.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:left center;

    z-index:9999999;

    pointer-events:none;
}


/* =========================================
   CENTRE ELEMENTOR MENU
========================================= */

.ja-floating-menu > *{
    margin-top:0 !important;
    margin-bottom:0 !important;
}

.ja-floating-menu nav,
.ja-floating-menu .elementor-nav-menu--main,
.ja-floating-menu .elementor-nav-menu,
.ja-floating-menu .elementor-widget-container{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin-top:0 !important;
    margin-bottom:0 !important;

    padding-top:0 !important;
    padding-bottom:0 !important;
}


/* MENU LIST */

.ja-floating-menu ul{
    display:flex !important;
    align-items:center !important;

    margin-top:0 !important;
    margin-bottom:0 !important;

    padding-top:0 !important;
    padding-bottom:0 !important;
}


/* =========================================
   SHOW FLOATING MENU
========================================= */

.ja-floating-menu.ja-floating-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}


/* =========================================
   MENU LINKS
========================================= */

.ja-floating-menu a{
    font-size:12px !important;
    font-weight:300;

    color:#ffffff !important;

    text-decoration:none !important;
    background:transparent !important;

    display:flex !important;
    align-items:center !important;

    line-height:1 !important;

    margin-top:0 !important;
    margin-bottom:0 !important;

    transition:color .25s ease !important;
}


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

.ja-floating-menu a:hover,
.ja-floating-menu a:focus{
    color:#d5a264 !important;
    background:transparent !important;
}


/* =========================================
   CURRENT PAGE
========================================= */

.ja-floating-menu .current-menu-item > a,
.ja-floating-menu .current_page_item > a,
.ja-floating-menu a.elementor-item-active{
    color:#d5a264 !important;
}


/* =========================================
   REMOVE ELEMENTOR HOVER BACKGROUNDS
========================================= */

.ja-floating-menu a:before,
.ja-floating-menu a:after{
    background:transparent !important;
}


/* =========================================
   WORDPRESS ADMIN BAR
========================================= */

body.admin-bar .ja-floating-menu{
    top:32px;
}


/* =========================================
   MOBILE - DISABLE FLOATING MENU COMPLETELY
========================================= */

@media(max-width:782px){

    .ja-floating-menu{
        display:none !important;
    }

}

</style>


<script>

document.addEventListener("DOMContentLoaded", function(){

    const originalMenu =
        document.querySelector(".ja-main-menu");

    if(!originalMenu){
        console.log("Jewel Africa menu not found.");
        return;
    }


    /* =====================================
       DO NOT CREATE FLOATING MENU ON MOBILE
    ====================================== */

    if(window.innerWidth <= 782){
        return;
    }


    /* =====================================
       CREATE FLOATING COPY
    ====================================== */

    const floatingMenu =
        originalMenu.cloneNode(true);

    floatingMenu.classList.remove(
        "ja-main-menu"
    );

    floatingMenu.classList.add(
        "ja-floating-menu"
    );

    document.body.appendChild(
        floatingMenu
    );


    /* =====================================
       COPY ORIGINAL FONT
    ====================================== */

    const originalLinks =
        originalMenu.querySelectorAll("a");

    const floatingLinks =
        floatingMenu.querySelectorAll("a");


    originalLinks.forEach(
        function(originalLink, index){

            const floatingLink =
                floatingLinks[index];

            if(!floatingLink){
                return;
            }

            const originalStyle =
                window.getComputedStyle(
                    originalLink
                );


            /* COPY TYPOGRAPHY */

            floatingLink.style.fontFamily =
                originalStyle.fontFamily;

            floatingLink.style.fontWeight =
                originalStyle.fontWeight;

            floatingLink.style.fontStyle =
                originalStyle.fontStyle;

            floatingLink.style.letterSpacing =
                originalStyle.letterSpacing;

            floatingLink.style.textTransform =
                originalStyle.textTransform;


            /* FORCE 12PX SIZE */

            floatingLink.style.fontSize =
                "12px";

        }
    );


    /* =====================================
       SHOW / HIDE FLOATING MENU
    ====================================== */

    function updateFloatingMenu(){

        const menuPosition =
            originalMenu.getBoundingClientRect();


        if(menuPosition.bottom <= 0){

            floatingMenu.classList.add(
                "ja-floating-visible"
            );

        }else{

            floatingMenu.classList.remove(
                "ja-floating-visible"
            );

        }

    }


    window.addEventListener(
        "scroll",
        updateFloatingMenu,
        { passive:true }
    );


    updateFloatingMenu();

});

</script>/* End custom CSS */