/* ==================================================
   CYBERTZ HOME HEADER
   TOP BAR = FIXED
   RED MENU = CAN SCROLL AWAY
================================================== */


/* MAIN HEADER */

.cyb-home-header{

    position:relative !important;

    width:100%;

    background:#fff;

    z-index:9999;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}


/* ==================================================
   TOP BAR
   THIS NEVER MOVES
================================================== */

.cyb-home-top{

    position:fixed !important;

    top:0 !important;

    left:0 !important;

    right:0 !important;

    width:100% !important;

    height:74px !important;

    display:flex;

    align-items:center;

    gap:20px;

    padding:0 20px !important;

    margin:0 !important;

    background:#fff;

    box-sizing:border-box;

    z-index:100000;

    transform:none !important;

}


/* LOGO */

.cyb-home-top .cyb-logo{

    flex:0 0 90px;

}

.cyb-home-top .cyb-logo img{

    height:42px;

    width:auto;

    display:block;

}


/* SEARCH */

.cyb-home-top .cyb-header-search{

    flex:1;

}


/* CONTACT */

.cyb-home-top .cyb-header-contact{

    flex:0 0 220px;

}


/* QUOTE */

.cyb-home-top .cyb-header-quote{

    flex:0 0 auto;

    margin-left:20px;

}


/* ==================================================
   SPACE RESERVED FOR FIXED TOP BAR
================================================== */

.cyb-home-header{

    padding-top:74px !important;

    box-sizing:border-box;

}


/* ==================================================
   RED MENU
================================================== */

.cyb-home-bottom{

    position:relative;

    width:100%;

    height:58px;

    background:#d40018;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

    transition:

        height .35s ease,

        max-height .35s ease,

        opacity .35s ease;

}


/* ==================================================
   HIDE RED MENU ONLY
================================================== */

.cyb-home-bottom.hide-menu{

    height:0 !important;

    max-height:0 !important;

    opacity:0 !important;

    overflow:hidden !important;

    margin:0 !important;

    padding:0 !important;

}


/* ==================================================
   NEVER MODIFY TOP BAR ON SCROLL
================================================== */

.cyb-home-header.cyb-scroll .cyb-home-top,
.cyb-home-header.hide-bottom .cyb-home-top{

    position:fixed !important;

    top:32px !important;

    left:0 !important;

    width:100% !important;

    height:74px !important;

    transform:none !important;

    padding:0 20px !important;
}


/* KEEP LOGO SAME SIZE */

.cyb-home-header.cyb-scroll .cyb-home-top .cyb-logo img{

    height:42px !important;

}



/* =========================================
   FIXED HEADER - WORDPRESS ADMIN BAR
========================================= */

.cyb-home-top{
    top:32px !important;
}

/* Keep it below WordPress admin bar while logged in */
body.admin-bar .cyb-home-top{
    top:32px !important;
}

body.admin-bar .cyb-home-header{
    padding-top:74px !important;
}


.cyb-mobile-menu-toggle{
    display:none;
}


/* =========================================
   MOBILE HEADER
   DESKTOP IS NOT TOUCHED
========================================= */

@media (max-width: 768px){

    /* TOP HEADER */

    .cyb-home-top{

        height:74px !important;

        padding:0 12px !important;

        gap:10px !important;

    }


    /* LOGO */

    .cyb-home-top .cyb-logo{

        flex:0 0 52px !important;

    }

    .cyb-home-top .cyb-logo img{

        width:45px !important;

        height:auto !important;

    }


    /* SEARCH */

    .cyb-home-top .cyb-header-search{

        flex:1 !important;

        min-width:0 !important;

    }


    /* CONTACT — HIDE MOBILE */

    .cyb-home-top .cyb-header-contact{

        display:none !important;

    }


    /* REQUEST QUOTE — HIDE MOBILE */

    .cyb-home-top .cyb-header-quote{

        display:none !important;

    }


    /* =====================================
       HAMBURGER
    ===================================== */

    .cyb-mobile-menu-toggle{

        display:flex !important;

        flex:0 0 44px !important;

        width:44px !important;

        height:44px !important;

        padding:0 !important;

        margin:0 !important;

        border:1px solid #ddd !important;

        border-radius:8px !important;

        background:#fff !important;

        align-items:center !important;

        justify-content:center !important;

        flex-direction:column !important;

        gap:5px !important;

        cursor:pointer;

    }


    .cyb-mobile-menu-toggle span{

        width:23px !important;

        height:3px !important;

        background:#d40018 !important;

        border-radius:3px;

        display:block !important;

    }


   

}


/* =========================================
   MOBILE MENU ICON
========================================= */

.cyb-mobile-menu-toggle{
    display:none;
}


@media (max-width:768px){

    .cyb-mobile-menu-toggle{

        display:flex !important;

        flex:0 0 44px !important;

        width:44px !important;
        height:44px !important;

        margin:0 !important;
        padding:8px !important;

        border:1px solid #ddd !important;

        border-radius:8px !important;

        background:#fff !important;

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

        flex-direction:column !important;

        gap:5px !important;

        box-sizing:border-box !important;

        position:relative !important;

        z-index:100000 !important;
    }


    .cyb-mobile-menu-toggle span{

        display:block !important;

        width:24px !important;

        height:3px !important;

        min-height:3px !important;

        background:#d40018 !important;

        border-radius:3px !important;

        opacity:1 !important;

        visibility:visible !important;

    }

}


/* =========================================
   MOBILE MENU BUTTON
   HIDDEN ON DESKTOP
========================================= */

.cyb-mobile-menu-toggle{
    display:none !important;
}


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

@media (max-width:768px){

    .cyb-mobile-menu-toggle{

        display:flex !important;

        width:44px !important;
        height:44px !important;

        flex:0 0 44px !important;

        margin:0 !important;
        padding:8px !important;

        background:#fff !important;

        border:1px solid #ddd !important;
        border-radius:8px !important;

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

        flex-direction:column !important;

        gap:5px !important;

        box-sizing:border-box !important;
    }

    .cyb-mobile-menu-toggle span{

        display:block !important;

        width:24px !important;
        height:3px !important;

        background:#d40018 !important;

        border-radius:3px !important;
    }

}


/* =========================================
   MOBILE MENU - FINAL
========================================= */

@media (max-width:768px){

    /* Red bar yenyewe haitumiki kama navigation bar */
    .cyb-home-bottom{

        display:block !important;

        position:relative !important;

        height:0 !important;

        min-height:0 !important;

        margin:0 !important;

        padding:0 !important;

        background:transparent !important;

        overflow:visible !important;

    }


    .cyb-home-bottom > .cyb-container{

        width:100% !important;

        height:0 !important;

        padding:0 !important;

        margin:0 !important;

    }


    /* MENU PANEL */

    .cyb-mobile-menu-panel{

        display:none !important;

        position:fixed !important;

        top:74px !important;

        left:0 !important;

        width:100% !important;

        background:#d40018 !important;

        z-index:99998 !important;

        padding:10px 18px 15px !important;

        box-sizing:border-box !important;

        box-shadow:0 8px 20px rgba(0,0,0,.18);

    }


    /* OPEN */

    .cyb-mobile-menu-panel.mobile-open{

        display:block !important;

    }


    /* MENU */

    .cyb-mobile-menu-panel .cyb-menu{

        display:flex !important;

        flex-direction:column !important;

        width:100% !important;

        margin:0 !important;

        padding:0 !important;

        gap:0 !important;

        list-style:none !important;

    }


    .cyb-mobile-menu-panel .cyb-menu > li{

        width:100% !important;

        margin:0 !important;

        padding:0 !important;

    }


    .cyb-mobile-menu-panel .cyb-menu > li > a{

        display:block !important;

        width:100% !important;

        padding:14px 5px !important;

        color:#fff !important;

        text-decoration:none !important;

        font-size:16px !important;

        box-sizing:border-box !important;

    }


    /* HAMBURGER */

    .cyb-mobile-menu-toggle{

        display:flex !important;

        position:relative !important;

        z-index:100000 !important;

        cursor:pointer !important;

    }

}


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

@media (max-width:768px){

    /* RED NAV BAR */

    .cyb-home-bottom{

        display:block !important;

        height:auto !important;

        min-height:0 !important;

        background:#d40018 !important;

        overflow:visible !important;

        position:relative !important;

    }


    /* CONTAINER */

    .cyb-home-bottom > .cyb-container{

        width:100% !important;

        max-width:none !important;

        padding:0 !important;

        margin:0 !important;

    }


    /* =====================================
       MENU CLOSED
    ===================================== */

    .cyb-home-menu{

        display:none !important;

        width:100% !important;

        margin:0 !important;

        padding:10px 18px !important;

        list-style:none !important;

        box-sizing:border-box !important;

        background:#d40018 !important;

    }


    /* =====================================
       MENU OPEN
    ===================================== */

    .cyb-home-menu.mobile-menu-open{

        display:flex !important;

        flex-direction:column !important;

    }


    /* MENU ITEMS */

    .cyb-home-menu > li{

        width:100% !important;

        margin:0 !important;

        padding:0 !important;

    }


    .cyb-home-menu > li > a{

        display:block !important;

        width:100% !important;

        padding:14px 5px !important;

        color:#fff !important;

        text-decoration:none !important;

        font-size:16px !important;

        box-sizing:border-box !important;

    }


    /* =====================================
       HAMBURGER
    ===================================== */

    .cyb-mobile-menu-toggle{

        display:flex !important;

        width:44px !important;

        height:44px !important;

        flex:0 0 44px !important;

        align-items:center !important;

        justify-content:center !important;

        flex-direction:column !important;

        gap:5px !important;

        padding:8px !important;

        margin:0 !important;

        background:#fff !important;

        border:1px solid #ddd !important;

        border-radius:8px !important;

        cursor:pointer !important;

        z-index:100000 !important;

    }


    .cyb-mobile-menu-toggle span{

        display:block !important;

        width:24px !important;

        height:3px !important;

        background:#d40018 !important;

        border-radius:3px !important;

    }


    /* =====================================
       DROPDOWNS
    ===================================== */

    .cyb-home-menu .sub-menu{

        position:static !important;

        display:none;

        width:100% !important;

        margin:0 !important;

        padding:0 0 5px 15px !important;

        background:#b80016 !important;

        box-shadow:none !important;

    }

}


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

.cyb-mobile-overlay,
.cyb-mobile-drawer{
    display:none;
}


@media (max-width:768px){

    /* HAMBURGER */

    .cyb-mobile-menu-toggle{
        display:flex !important;
        width:44px !important;
        height:44px !important;
        flex:0 0 44px !important;

        align-items:center !important;
        justify-content:center !important;
        flex-direction:column !important;

        gap:5px !important;

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

        background:#fff !important;

        border:1px solid #ddd !important;
        border-radius:8px !important;

        cursor:pointer;
    }


    .cyb-mobile-menu-toggle span{
        display:block !important;

        width:24px !important;
        height:3px !important;

        background:#d40018 !important;

        border-radius:3px;
    }


    /* ==========================================
       DARK OVERLAY
    ========================================== */

    .cyb-mobile-overlay{

        display:block;

        position:fixed;

        inset:0;

        background:rgba(0,0,0,.48);

        opacity:0;

        visibility:hidden;

        transition:.3s ease;

        z-index:100000;

    }


    /* ==========================================
       WHITE DRAWER
    ========================================== */

    .cyb-mobile-drawer{

        display:block;

        position:fixed;

        top:0;

        right:0;

        width:88%;

        max-width:420px;

        height:100vh;

        background:#fff;

        z-index:100001;

        transform:translateX(100%);

        transition:transform .3s ease;

        overflow-y:auto;

        box-shadow:-8px 0 30px rgba(0,0,0,.15);

    }


    /* OPEN */

    body.cyb-menu-open .cyb-mobile-overlay{

        opacity:1;

        visibility:visible;

    }


    body.cyb-menu-open .cyb-mobile-drawer{

        transform:translateX(0);

    }


    /* ==========================================
       DRAWER HEADER
    ========================================== */

    .cyb-mobile-drawer-header{

        height:75px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        padding:0 25px;

        border-bottom:1px solid #eee;

        box-sizing:border-box;

    }


    .cyb-mobile-drawer-header strong{

        font-size:22px;

        color:#222;

    }


    .cyb-mobile-close{

        width:42px;

        height:42px;

        border:0;

        background:transparent;

        font-size:38px;

        line-height:1;

        color:#222;

        cursor:pointer;

    }


    /* ==========================================
       NAVIGATION
    ========================================== */

    .cyb-mobile-navigation{

        padding:10px 0 30px;

    }


    .cyb-mobile-navigation .cyb-home-menu{

        display:block !important;

        margin:0 !important;

        padding:0 !important;

        list-style:none !important;

    }


    .cyb-mobile-navigation .cyb-home-menu > li{

        display:block !important;

        width:100% !important;

        margin:0 !important;

        padding:0 !important;

    }


    .cyb-mobile-navigation .cyb-home-menu > li > a{

        display:flex !important;

        align-items:center !important;

        justify-content:space-between !important;

        width:100% !important;

        min-height:68px;

        padding:0 28px !important;

        box-sizing:border-box;

        color:#222 !important;

        background:#fff !important;

        text-decoration:none !important;

        font-size:18px !important;

        font-weight:600;

        border-bottom:1px solid #f1f1f1;

    }


    /* ==========================================
       SUB MENU
    ========================================== */

    .cyb-mobile-navigation .sub-menu{

        display:none;

        position:static !important;

        width:100% !important;

        margin:0 !important;

        padding:0 !important;

        background:#f8f8f8 !important;

        box-shadow:none !important;

        list-style:none !important;

    }


    .cyb-mobile-navigation li.mobile-submenu-open > .sub-menu{

        display:block;

    }


    .cyb-mobile-navigation .sub-menu li a{

        display:block;

        padding:15px 28px 15px 45px;

        color:#333;

        text-decoration:none;

        font-size:16px;

        border-bottom:1px solid #eee;

    }


    /* ARROW */

    .cyb-mobile-dropdown-toggle span{

        font-size:22px;

        transition:.25s;

    }


    .cyb-mobile-navigation
    li.mobile-submenu-open
    .cyb-mobile-dropdown-toggle span{

        transform:rotate(180deg);

    }


    /* DESKTOP RED MENU IS NOT SHOWN ON MOBILE */

    .cyb-home-bottom{

        display:none !important;

    }

}


/* =========================================
   MOBILE DRAWER - FINAL STYLE
========================================= */

@media (max-width:768px){

    /* REMOVE RED MOBILE NAV */

    .cyb-home-bottom{
        display:none !important;
    }


    /* OVERLAY */

    .cyb-mobile-overlay{
        background:rgba(0,0,0,.45) !important;
    }


    /* WHITE DRAWER */

    .cyb-mobile-drawer{

        background:#fff !important;

        width:88% !important;

        max-width:420px !important;

        color:#222;

    }


    /* DRAWER HEADER */

    .cyb-mobile-drawer-header{

        height:82px !important;

        padding:0 24px !important;

        background:#fff !important;

        border-bottom:1px solid #eee !important;

    }


    .cyb-mobile-drawer-header strong{

        color:#222 !important;

        font-size:22px !important;

    }


    /* CLOSE BUTTON */

    .cyb-mobile-close{

        width:42px !important;

        height:42px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        border:1px solid #d40018 !important;

        border-radius:4px !important;

        background:#fff !important;

        color:#d40018 !important;

        font-size:25px !important;

    }


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

    .cyb-mobile-navigation{

        padding:0 !important;

        background:#fff !important;

    }


    .cyb-mobile-navigation .cyb-home-menu{

        display:block !important;

        margin:0 !important;

        padding:0 !important;

        background:#fff !important;

    }


    .cyb-mobile-navigation .cyb-home-menu > li{

        background:#fff !important;

        border-bottom:1px solid #eeeeee !important;

    }


    /* MENU LINKS */

    .cyb-mobile-navigation .cyb-home-menu > li > a{

        display:flex !important;

        align-items:center !important;

        justify-content:space-between !important;

        min-height:72px !important;

        padding:0 28px !important;

        background:#fff !important;

        color:#222 !important;

        font-size:18px !important;

        font-weight:600 !important;

        text-decoration:none !important;

        transition:background .2s ease;

    }


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

    .cyb-mobile-navigation .cyb-home-menu > li > a:hover{

        background:#f5f5f5 !important;

        color:#222 !important;

    }


    /* ACTIVE */

    .cyb-mobile-navigation .cyb-home-menu > li > a:active{

        background:#f0f0f0 !important;

        color:#222 !important;

    }


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

    .cyb-mobile-dropdown-toggle span{

        display:block !important;

        width:9px !important;

        height:9px !important;

        border-right:2px solid #222 !important;

        border-bottom:2px solid #222 !important;

        font-size:0 !important;

        transform:rotate(45deg);

        transition:transform .25s ease;

        margin-right:5px;

    }


    /* ARROW WHEN OPEN */

    .cyb-mobile-navigation
    li.mobile-submenu-open
    .cyb-mobile-dropdown-toggle span{

        transform:rotate(225deg) !important;

    }


    /* =====================================
       SUB MENU
    ===================================== */

    .cyb-mobile-navigation .sub-menu{

        display:none !important;

        position:static !important;

        width:100% !important;

        padding:0 !important;

        margin:0 !important;

        background:#fafafa !important;

        box-shadow:none !important;

    }


    .cyb-mobile-navigation
    li.mobile-submenu-open
    > .sub-menu{

        display:block !important;

    }


    .cyb-mobile-navigation .sub-menu li{

        border-top:1px solid #eeeeee !important;

        background:#fafafa !important;

    }


    .cyb-mobile-navigation .sub-menu li a{

        display:block !important;

        padding:16px 28px 16px 45px !important;

        background:#fafafa !important;

        color:#333 !important;

        font-size:16px !important;

        text-decoration:none !important;

    }


    .cyb-mobile-navigation .sub-menu li a:hover{

        background:#f0f0f0 !important;

        color:#222 !important;

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

    /* SUB MENU DEFAULT CLOSED */

    .cyb-mobile-navigation .sub-menu{
        display:none !important;
        position:static !important;
    }


    /* STAY OPEN AFTER CLICK */

    .cyb-mobile-navigation
    li.mobile-submenu-open
    > .sub-menu{

        display:block !important;

        visibility:visible !important;

        opacity:1 !important;

        height:auto !important;

        overflow:visible !important;

    }


    /* DON'T CLOSE WHEN MOUSE LEAVES */

    .cyb-mobile-navigation
    li.mobile-submenu-open:hover
    > .sub-menu{

        display:block !important;

    }

}


/* =========================================
   MOBILE HEADER - TRONIC STYLE
========================================= */

@media (max-width:768px){

    /* HEADER */

    .cyb-home-header{

        width:100% !important;

        position:sticky !important;

        top:0 !important;

        z-index:99999 !important;

        background:#fff !important;

    }


    /* TOP AREA */

    .cyb-home-header .cyb-container{

        width:100% !important;

        max-width:none !important;

        padding:0 !important;

        margin:0 !important;

    }


    .cyb-home-top{

        display:grid !important;

        grid-template-columns:50px 1fr 50px !important;

        grid-template-rows:72px auto !important;

        align-items:center !important;

        width:100% !important;

        height:auto !important;

        min-height:130px !important;

        padding:8px 14px 12px !important;

        margin:0 !important;

        gap:0 !important;

        box-sizing:border-box !important;

        background:#fff !important;

    }


    /* =====================================
       MENU ICON — LEFT
    ===================================== */

    .cyb-mobile-menu-toggle{

        grid-column:1 !important;

        grid-row:1 !important;

        justify-self:start !important;

        align-self:center !important;

        display:flex !important;

        width:42px !important;

        height:42px !important;

        flex:0 0 42px !important;

        padding:0 !important;

        margin:0 !important;

        background:#fff !important;

        border:1px solid #ddd !important;

        border-radius:7px !important;

        align-items:center !important;

        justify-content:center !important;

        flex-direction:column !important;

        gap:5px !important;

        z-index:100000 !important;

    }


    .cyb-mobile-menu-toggle span{

        display:block !important;

        width:23px !important;

        height:3px !important;

        background:#d40018 !important;

        border-radius:3px !important;

    }


    /* =====================================
       LOGO — CENTER
    ===================================== */

    .cyb-logo{

        grid-column:2 !important;

        grid-row:1 !important;

        justify-self:center !important;

        align-self:center !important;

        width:auto !important;

        flex:none !important;

        margin:0 !important;

        padding:0 !important;

    }


    .cyb-logo img{

        width:auto !important;

        height:48px !important;

        max-width:70px !important;

        object-fit:contain !important;

        display:block !important;

    }


    /* =====================================
       SEARCH — FULL WIDTH SECOND ROW
    ===================================== */

    .cyb-header-search{

        grid-column:1 / 4 !important;

        grid-row:2 !important;

        width:100% !important;

        min-width:0 !important;

        margin:0 !important;

        padding:0 !important;

        flex:none !important;

    }


    .cyb-search-form{

        width:100% !important;

        margin:0 !important;

    }


    .cyb-search-wrapper{

        width:100% !important;

        height:58px !important;

        margin:0 !important;

        border-radius:7px !important;

        box-sizing:border-box !important;

    }


    .cyb-search-input{

        min-width:0 !important;

        width:100% !important;

        height:56px !important;

        font-size:16px !important;

    }


    .cyb-search-button{

        height:56px !important;

        padding:0 22px !important;

        flex:0 0 auto !important;

    }


    /* =====================================
       CONTACT — HIDE MOBILE
    ===================================== */

    .cyb-header-contact{

        display:none !important;

    }


    /* =====================================
       REQUEST QUOTE — HIDE MOBILE
    ===================================== */

    .cyb-header-quote{

        display:none !important;

    }


    /* =====================================
       DESKTOP RED NAV — HIDE MOBILE
    ===================================== */

    .cyb-home-bottom{

        display:none !important;

    }

}