/*
Theme Name: TheGem Child
Template: thegem
Version: 2.3
*/

@import url("../thegem/style.css");


/* ====================================
   MOBILE CUSTOM HEADER
==================================== */

.mobile-custom-header{
    display:none;
}


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

@media(max-width:991px){

    /* HIDE ORIGINAL MOBILE HEADER */

    #site-header-wrapper{
        display:none !important;
    }

    /* SHOW CUSTOM MOBILE HEADER */

    body .mobile-custom-header{
        display:block !important;
        background:#198f19;
        position:relative;
        z-index:999999;
    }

    /* TOPBAR */

    .mobile-topbar{
        padding:8px 10px;
        text-align:center;
        border-bottom:1px solid rgba(255,255,255,0.15);
    }

    /* PHONE */

    .mobile-phone a{
        color:#fff;
        text-decoration:none;
        font-size:16px;
        font-weight:700;
    }

    .mobile-phone i{
        margin-right:5px;
    }

    /* SOCIAL */

    .mobile-social{
        margin-top:8px;
        display:flex;
        justify-content:center;
        align-items:center;
        gap:12px;
    }

    .mobile-social a{
        color:#fff;
        font-size:16px;
        text-decoration:none;
    }

    /* BOTTOM HEADER */

    .mobile-bottom-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:8px 12px;
    }

    /* LOGO */

    .mobile-logo img{
        max-height:42px !important;
        width:auto !important;
        display:block;
    }

    /* MENU BUTTON */

    .mobile-menu-button{
        width:48px;
        height:48px;
        background:#0d6efd;
        color:#fff;
        border-radius:8px;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:24px;
        font-weight:bold;
        cursor:pointer;
    }

}


/* ====================================
   DESKTOP KEEP ORIGINAL HEADER
==================================== */

@media(min-width:992px){

    .mobile-custom-header{
        display:none !important;
    }

}


/* ====================================
   DESKTOP TOP BAR RESTORE
==================================== */

@media(min-width:992px){

    .top-area,
    #top-area,
    .gem-top-area{
        background:#00111f !important;
        color:#ffffff !important;
    }

    .top-area a,
    #top-area a,
    .gem-top-area a{
        color:#ffffff !important;
    }

    .top-area .gem-button,
    #top-area .gem-button{
        background:#3bb7e8 !important;
        color:#ffffff !important;
        border-radius:4px !important;
    }

}
/* REMOVE TOP BLUE BORDER */

html,
body,
#page{
    border-top:none !important;
    box-shadow:none !important;
}

.top-area,
#top-area,
.site-header{
    border-top:none !important;
}

/* ====================================
   CUSTOM MOBILE MENU DRAWER
==================================== */

@media(max-width:991px){

    .custom-mobile-menu-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,0.55);
        z-index:999998;
        opacity:0;
        visibility:hidden;
        transition:0.3s;
    }

    .custom-mobile-menu-overlay.active{
        opacity:1;
        visibility:visible;
    }

   .custom-mobile-menu{
    position:fixed;
    top:0;
    left:0;
    width:310px;
    height:100vh;
    background:#ffffff;
    z-index:999999;
    overflow-y:auto;

    transform:translateX(-100%);
    transition:transform 0.08s ease-out;

    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.custom-mobile-menu.active{
    transform:translate3d(0,0,0);
}

    .custom-mobile-menu-logo{
        padding:25px 20px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border-bottom:1px solid #eee;
    }

    .custom-mobile-menu-logo img{
        max-width:190px;
        height:auto;
    }

    #mobileMenuClose{
        width:42px;
        height:42px;
        border:none;
        background:#0d6efd;
        color:#fff;
        font-size:28px;
        border-radius:8px;
        line-height:1;
    }

    .custom-mobile-menu-list{
        list-style:none;
        margin:0;
        padding:20px;
    }

    .custom-mobile-menu-list li{
        border-bottom:1px solid #eee;
        position:relative;
    }

    .custom-mobile-menu-list li a{
        display:block;
        padding:14px 5px;
        color:#222;
        font-size:20px;
        text-decoration:none;
        font-weight:800;
    }

    .custom-mobile-menu-list li a:before{
        content:"›";
        margin-right:8px;
        font-size:22px;
        vertical-align:-1px;
    }

    .custom-mobile-menu-list .sub-menu{
        list-style:none;
        padding-left:18px;
        margin:0;
    }

}

/* ====================================
   MOBILE ACCORDION MENU
==================================== */

@media(max-width:991px){

    /* REMOVE DEFAULT ARROW */

    .custom-mobile-menu-list li a:before{
        display:none !important;
    }

    /* SUB MENU HIDE */

    .custom-mobile-menu-list .sub-menu{
        display:none;
        padding-left:15px;
        margin-top:5px;
    }

    /* SHOW SUBMENU */

    .custom-mobile-menu-list li.active > .sub-menu{
        display:block;
    }

    /* PLUS BUTTON */

    .custom-mobile-menu-list li.menu-item-has-children{
        position:relative;
    }

    .custom-mobile-menu-list li.menu-item-has-children > a{
        padding-right:50px;
    }

    .submenu-toggle{
        position:absolute;
        right:0;
        top:8px;
        width:36px;
        height:36px;
        border:none;
        background:#f3f3f3;
        border-radius:50%;
        font-size:22px;
        line-height:1;
        color:#222;
    }

    .custom-mobile-menu-list .sub-menu li a{
        font-size:15px;
        color:#000;
        padding:12px 0;
    }

}
@media(max-width:991px){

    .custom-mobile-menu-list ul,
    .custom-mobile-menu-list .sub-menu,
    .custom-mobile-menu-list .children{
        display:none !important;
    }

    .custom-mobile-menu-list li.active > ul,
    .custom-mobile-menu-list li.active > .sub-menu,
    .custom-mobile-menu-list li.active > .children{
        display:block !important;
    }

    .custom-mobile-menu-list li a:before,
    .custom-mobile-menu-list li a:after{
        display:none !important;
        content:none !important;
    }

    .custom-mobile-menu-list li.menu-item-has-children > .submenu-toggle{
        display:flex !important;
        align-items:center;
        justify-content:center;
    }
}

/* MOBILE MENU ACTIVE COLOR */

@media(max-width:991px){

    .custom-mobile-menu-list .current-menu-item > a,
    .custom-mobile-menu-list .current_page_item > a,
    .custom-mobile-menu-list li.active > a{
        color:red !important;
        font-weight:700 !important;
    }

}

/* KEEP ACTIVE SUBMENU OPEN */

@media(max-width:991px){

    .custom-mobile-menu-list .current-menu-ancestor > .sub-menu,
    .custom-mobile-menu-list .current-menu-parent > .sub-menu,
    .custom-mobile-menu-list .current_page_parent > .sub-menu,
    .custom-mobile-menu-list .current_page_ancestor > .sub-menu{
        display:block !important;
    }

    .custom-mobile-menu-list .current-menu-ancestor > a,
    .custom-mobile-menu-list .current-menu-parent > a,
    .custom-mobile-menu-list .current_page_parent > a,
    .custom-mobile-menu-list .current_page_ancestor > a{
        color:red !important;
        font-weight:700 !important;
    }

}

@media(max-width:991px){

    .custom-mobile-menu-list li.active > .sub-menu{
        display:block !important;
    }

    .custom-mobile-menu-list li.active.closed > .sub-menu{
        display:none !important;
    }

}

/* FORCE CLOSE SUBMENU WHEN MINUS CLICKED */

@media(max-width:991px){

    .custom-mobile-menu-list li.closed > .sub-menu,
    .custom-mobile-menu-list li.closed > ul,
    .custom-mobile-menu-list li.closed > .children{
        display:none !important;
    }

}

/* REMOVE TOP WHITE SPACE */

html,
body{
    margin-top:0 !important;
    padding-top:0 !important;
}

@media(max-width:991px){

    body{
        margin-top:0 !important;
        padding-top:0 !important;
    }

    .mobile-custom-header{
        margin-top:0 !important;
    }

    #page{
        margin-top:0 !important;
        padding-top:0 !important;
    }

}

/* MOBILE TOP SOCIAL ONLY YOUTUBE */

@media(max-width:991px){

    .mobile-social a{
        display:none !important;
    }

    .mobile-social a:last-child{
        display:flex !important;
        justify-content:center;
        align-items:center;
        color:#ff0000 !important;
        font-size:26px !important;
        margin:0 auto;
    }

    .mobile-social{
        justify-content:center !important;
        gap:0 !important;
        margin-top:12px !important;
    }

}

/* YOUTUBE ICON RED BOX + BLACK PLAY */

@media(max-width:991px){

    .mobile-social a:last-child{
        position:relative;
        width:30px;
        height:20px;
        background:#ff0000 !important;
        border-radius:5px;
        color:transparent !important;
        font-size:0 !important;
    }

    .mobile-social a:last-child i{
        display:none !important;
    }

    .mobile-social a:last-child::after{
        content:"";
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-38%, -50%);
        width:0;
        height:0;
        border-top:5px solid transparent !important;
        border-bottom:5px solid transparent !important;
        border-left:8px solid #fff !important;
    }

}

/* ONLY CLICKED PAGE ACTIVE, NOT PARENT MENUS */

@media(min-width:992px){

    #primary-menu li.current-menu-ancestor > a,
    #primary-menu li.current-menu-parent > a{
        color:#1f2340 !important;
        border-color:transparent !important;
    }

    #primary-menu li.current-menu-item > a{
        color:#e91e3a !important;
        border-color:#1f2340 !important;
    }

}

@media(max-width:991px){

    .custom-mobile-menu-list li.current-menu-ancestor > a,
    .custom-mobile-menu-list li.current-menu-parent > a{
        color:#222 !important;
        font-weight:500 !important;
    }

    .custom-mobile-menu-list li.active > a,
    .custom-mobile-menu-list li.current-menu-item > a{
        color:red !important;
        font-weight:700 !important;
    }

}

/* FOOTER GAP FIX */

#colophon{
    margin-top:0 !important;
    padding-top:0 !important;
}

#colophon .footer-width-fixer{
    margin-top:0 !important;
    padding-top:0 !important;
}

#main{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

/* REMOVE FOOTER BOTTOM GAP */

#colophon,
#colophon .footer-width-fixer,
#colophon .elementor,
#colophon .elementor-section,
#colophon .e-con,
#colophon .e-parent{
    margin-bottom:1 !important;
    padding-bottom:1 !important;
}

#colophon p:last-child{
    margin-bottom:1 !important;
}

/* MOBILE MENU PARENT ACTIVE COLOR WHEN SUBMENU OPEN */

@media(max-width:991px){

    .custom-mobile-menu-list li.menu-item-has-children.active > a{
        color:red !important;
        font-weight:700 !important;
    }

    .custom-mobile-menu-list li.menu-item-has-children.active > .submenu-toggle{
        background:red !important;
        color:#fff !important;
    }

}