/* ==========================================================
   IJMSDH MOBILE MENU FIX v1.0
   Author : ChatGPT
   Only Mobile Devices
==========================================================*/

@media only screen and (max-width:992px){

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

label[for="menuOnTop"]{
    position:fixed;
    top:18px;
    left:15px;
    width:42px;
    height:42px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#0056b3;
    color:#fff;
    border-radius:6px;
    cursor:pointer;
    z-index:999999;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
}

label[for="menuOnTop"] i{
    font-size:22px;
}

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

body::after{

    content:"";

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99990;

}

#menuOnTop:checked ~ body::after{

    opacity:1;

    visibility:visible;

}

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

#primaryMenuWrp{

    position:fixed !important;

    top:0 !important;

    left:-320px !important;

    width:300px !important;

    height:100vh !important;

    background:#ffffff !important;

    overflow-y:auto !important;

    overflow-x:hidden !important;

    transition:.35s ease !important;

    z-index:999991 !important;

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

}

/* OPEN */

#menuOnTop:checked ~ #headerNavigationContainer #primaryMenuWrp{

    left:0 !important;

}

/* =====================================
   SCROLLBAR
=====================================*/

#primaryMenuWrp::-webkit-scrollbar{

    width:6px;

}

#primaryMenuWrp::-webkit-scrollbar-thumb{

    background:#c5c5c5;

    border-radius:20px;

}

#primaryMenuWrp::-webkit-scrollbar-track{

    background:#f4f4f4;

}

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

#primaryMenuWrp .navbar-brand{

    width:100%;

    display:block;

    padding:18px;

    text-align:center;

}

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

#primaryMenuWrp ul{

    margin:0;

    padding:0;

    list-style:none;

}

#primaryMenuWrp li{

    width:100%;

    display:block;

}

#primaryMenuWrp li a{

    display:block;

    padding:13px 18px;

    font-size:15px;

    color:#222;

    text-decoration:none;

    border-bottom:1px solid #ececec;

    transition:.25s;

}

#primaryMenuWrp li a:hover{

    background:#f6f8fb;

    color:#0056b3;

}

}
/* ==========================================================
   PART 02 : DROPDOWN / SUB MENU
==========================================================*/

@media only screen and (max-width:992px){

/* ===============================
   Bootstrap Dropdown Reset
================================*/

#primaryMenuWrp .dropdown{
    position:relative !important;
    width:100%;
}

#primaryMenuWrp .dropdown-menu{
    position:static !important;
    display:none !important;
    float:none !important;
    width:100% !important;
    min-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-left:3px solid #0056b3 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#f8fbff !important;
    transform:none !important;
    inset:auto !important;
}

/* ===============================
   Show Active Dropdown
================================*/

#primaryMenuWrp .dropdown.show > .dropdown-menu,
#primaryMenuWrp .dropdown-menu.show{
    display:block !important;
}

/* ===============================
   Sub Menu Links
================================*/

#primaryMenuWrp .dropdown-menu li{
    width:100%;
}

#primaryMenuWrp .dropdown-menu li a{
    padding:11px 18px 11px 38px !important;
    font-size:14px;
    color:#444;
    background:#f8fbff;
    border-bottom:1px solid #e9eef5;
    transition:.25s;
}

#primaryMenuWrp .dropdown-menu li a:hover{
    background:#edf5ff;
    color:#0056b3;
}

/* ===============================
   Dropdown Toggle
================================*/

#primaryMenuWrp .dropdown-toggle{
    position:relative;
    padding-right:45px !important;
}

/* Hide Bootstrap Arrow */

#primaryMenuWrp .dropdown-toggle::after{
    display:none !important;
}

/* Custom Arrow */

#primaryMenuWrp .dropdown-toggle::before{

    content:"▼";

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    font-size:11px;

    color:#666;

    transition:.30s;

}

/* Rotate Arrow */

#primaryMenuWrp .dropdown.show>.dropdown-toggle::before{

    transform:translateY(-50%) rotate(180deg);

    color:#0056b3;

}

/* ===============================
   Nested Dropdown
================================*/

#primaryMenuWrp .dropdown-menu .dropdown-menu{

    margin-left:15px !important;

    border-left:2px solid #d9e8ff !important;

}

/* ===============================
   Active Menu
================================*/

#primaryMenuWrp li.current a,
#primaryMenuWrp li.active a{

    background:#eef5ff !important;

    color:#0056b3 !important;

    font-weight:600;

}

/* ===============================
   Smooth Animation
================================*/

#primaryMenuWrp .dropdown-menu{

    animation:submenuFade .25s ease;

}

@keyframes submenuFade{

    from{

        opacity:0;

        transform:translateY(-6px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

}
/* ==========================================================
   PART 03 : FINAL RESPONSIVE & POLISH
   IJMSDH Mobile Menu v1.0
==========================================================*/

@media only screen and (max-width:992px){

/* =====================================
   HEADER FIX
=====================================*/

.mainhead{
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    padding:10px 15px !important;
}

.site-name-h2_h3{
    width:100%;
    text-align:center;
}

.site-name-h2_h3 h3{
    font-size:16px !important;
    line-height:24px;
    padding:0 50px;
    margin:10px 0;
    word-break:break-word;
}

/* =====================================
   SEARCH BAR
=====================================*/

.search-inline{
    width:100%;
    padding:10px 15px;
}

.search-inline input{
    width:100%;
    border-radius:6px;
}

.search-inline button{
    width:100%;
    margin-top:8px;
    border-radius:6px;
}

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

#primaryMenuWrp ul{
    padding-bottom:30px;
}

#primaryMenuWrp li:last-child{
    margin-bottom:20px;
}

/* =====================================
   TOUCH FRIENDLY
=====================================*/

#primaryMenuWrp li a{

    min-height:48px;

    display:flex;

    align-items:center;

}

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

.pkp_site_name img,
.site-logo img{

    max-width:180px;

    height:auto;

}

/* =====================================
   REMOVE HORIZONTAL SCROLL
=====================================*/

html,
body{

    overflow-x:hidden;

}

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

@media (orientation:landscape){

#primaryMenuWrp{

    width:320px !important;

}

}

/* =====================================
   SMALL DEVICES
=====================================*/

@media (max-width:480px){

#primaryMenuWrp{

    width:280px !important;

}

.site-name-h2_h3 h3{

    font-size:15px !important;

}

label[for="menuOnTop"]{

    width:40px;

    height:40px;

}

}

/* =====================================
   TABLETS
=====================================*/

@media (min-width:768px) and (max-width:992px){

#primaryMenuWrp{

    width:340px !important;

}

}

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

#primaryMenuWrp li.current > a,
#primaryMenuWrp li.active > a{

    background:#eef5ff;

    border-left:4px solid #0056b3;

    color:#0056b3;

}

/* =====================================
   SMOOTH SCROLL
=====================================*/

#primaryMenuWrp{

    scroll-behavior:smooth;

}

/* =====================================
   PERFORMANCE
=====================================*/

#primaryMenuWrp,
#primaryMenuWrp *{

    box-sizing:border-box;

}

/* =====================================
   REMOVE BOOTSTRAP CONFLICTS
=====================================*/

.navbar-collapse{

    overflow:visible !important;

}

.dropdown-menu{

    z-index:999999 !important;

}

}

/* ==========================================================
   END OF IJMSDH MOBILE FIX
   Version 1.0
==========================================================*/