/* ==========================================================
   PREMIUM MOBILE MENU
   PART 1
   ========================================================== */

:root{

    --nt-primary:#F26522;
    --nt-secondary:#D8A228;
    --nt-white:#ffffff;
    --nt-bg:#f7f8fb;
    --nt-text:#000;
    --nt-light:#64748b;
    --nt-border:#e7eaf1;
    --nt-radius:18px;
    --nt-shadow:0 10px 35px rgba(0,0,0,.08);
    --nt-transition:.35s cubic-bezier(.4,0,.2,1);

}

/* ==========================================================
BODY
========================================================== */

body.nt-menu-open{

    overflow:hidden;
    touch-action:none;

}

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

.nt-mobile-header{

    position:sticky;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:#fff;
    border-bottom:1px solid var(--nt-border);

}

.nt-mobile-header-inner{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;

}

.nt-mobile-logo{

    display:flex;
    align-items:center;

}

.nt-mobile-logo img{

    /* height:42px; */
    width:auto;
    display:block;

}

/* ==========================================================
HEADER ACTIONS
========================================================== */

.nt-mobile-actions{

    display:flex;
    align-items:center;
    gap:8px;

}

.nt-mobile-actions button,
.nt-mobile-actions a{

    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--nt-border);

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

    transition:var(--nt-transition);

    text-decoration:none;

}

.nt-mobile-actions button:hover,
.nt-mobile-actions a:hover{

    background:var(--nt-primary);
    border-color:var(--nt-primary);

}

.nt-mobile-actions img{

    width:20px;
    height:20px;
    object-fit:contain;

}

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

.nt-mobile-toggle{

    position:relative;
    width:44px;
    height:44px;
    border:none;
    background:#fff;
    cursor:pointer;

}

.nt-mobile-toggle span{

    position:absolute;
    left:11px;
    width:22px;
    height:2px;
    background:var(--nt-primary);
    transition:.30s;

}

.nt-mobile-toggle span:nth-child(1){

    top:14px;

}

.nt-mobile-toggle span:nth-child(2){

    top:21px;

}

.nt-mobile-toggle span:nth-child(3){

    top:28px;

}

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

.nt-search-area{

    display:none;
    padding:16px;
    background:#fff;
    border-bottom:1px solid var(--nt-border);

}

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

.nt-menu-overlay{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transition:.30s;
    z-index:9998;

}

.nt-menu-overlay.active{

    opacity:1;
    visibility:visible;

}

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

.nt-mobile-menu{

    position:fixed;
    top:0;
    right:0;
    width:100%;
    max-width:420px;
    height:-webkit-fill-available;

    background:#fff;

    transform:translateX(100%);

    transition:.45s cubic-bezier(.4,0,.2,1);

    z-index:9999;

    overflow:hidden;

    box-shadow:-10px 0 40px rgba(0,0,0,.12);

}

.nt-mobile-menu.open{

    transform:translateX(0);

}

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

.nt-menu-logo{

    padding:24px 20px 18px;

    text-align:center;

    border-bottom:1px solid var(--nt-border);

    position:relative;
    z-index:4;
    background-color: #f5f7fb;

}

.nt-menu-logo img{

    /* width:180px; */
    max-width:100%;
    height:auto;

}

/* ==========================================================
CLOSE
========================================================== */

.nt-close-menu{

    position:absolute;

    top:18px;

    right:18px;

    width:40px;

    height:40px;

    border: 1px solid var(--nt-border);

    background:none;

    border-radius:50%;

    cursor:pointer;

    transition:var(--nt-transition);

    z-index:5;

}

.nt-close-menu:hover{

    background:var(--nt-primary);

    color:#fff;

}

/* ==========================================================
PANELS
========================================================== */

.nt-panel{

    position:absolute;

    inset:0;

    background:#fff;

    overflow-y:auto;

    transform:translateX(100%);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    padding:105px 20px 35px;

    top:50px;
	
	height: 80vh;
}

.nt-panel.active{

    transform:translateX(0);

    opacity:1;

    visibility:visible;

}

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

.nt-panel::-webkit-scrollbar{

    width:6px;

}

.nt-panel::-webkit-scrollbar-thumb{

    background:#d6dae3;

    border-radius:20px;

}

.nt-panel::-webkit-scrollbar-track{

    background:transparent;

}

/* ==========================================================
   PREMIUM MOBILE MENU
   PART 2
   Main Grid + Cards + Applications
========================================================== */

/* ==========================================================
PANEL HEADER
========================================================== */

.nt-panel-header{

    margin-bottom:30px;

}

.nt-panel-header h3{

    margin:0;
    font-size:26px;
    font-weight:700;
    color:var(--nt-text);

}

.nt-panel-header p{

    margin:8px 0 0;
    font-size:14px;
    color:var(--nt-light);

}

/* ==========================================================
BACK BUTTON
========================================================== */

.nt-back{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:25px;

    cursor:pointer;

    color:var(--nt-primary);

    font-weight:600;

    font-size:15px;

    transition:var(--nt-transition);

}

.nt-back:hover{

    color:var(--nt-secondary);

}

.nt-back i{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f5f7fb;

    transition:var(--nt-transition);

}

.nt-back:hover i{

    background:var(--nt-primary);

    color:#fff;

}

/* ==========================================================
MAIN GRID
========================================================== */

.nt-menu-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:10px;

}

/* ==========================================================
MAIN CARD
========================================================== */

.nt-menu-card{

    /* position:relative; */

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:22px 14px;

    background:#fff;

    border:1px solid var(--nt-border);

    border-radius:20px;

    min-height:150px;

    text-decoration:none;

    cursor:pointer;

    transition:var(--nt-transition);

    overflow:hidden;

}

.nt-menu-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--nt-shadow);

    border-color:rgba(13,59,102,.15);

}

/* ==========================================================
CARD ICON
========================================================== */

.nt-card-icon{

    width:68px;

    height:68px;

    border-radius:50%;

    background:#f5f7fb;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    transition:var(--nt-transition);

}

.nt-card-icon i{

    font-size:28px;

    color:var(--nt-primary);

    transition:var(--nt-transition);

}

.nt-menu-card:hover .nt-card-icon{

    background:var(--nt-primary);

}

.nt-menu-card:hover .nt-card-icon i{

    color:#fff;

}

/* ==========================================================
VISUALIZER ICON
========================================================== */

.nt-visualizer-icon{

    background:#fff;

    border:1px solid var(--nt-border);

}

.nt-visualizer-icon img{

    width:46px;

    height:46px;

    object-fit:contain;

}

/* ==========================================================
CARD TITLE
========================================================== */

.nt-card-title{

    font-size:15px;

    font-weight:600;

    color:var(--nt-text);

    line-height:1.45;

}

.nt-menu-card:hover .nt-card-title{

    color:var(--nt-primary);

}

/* ==========================================================
SECTION TITLE
========================================================== */

.nt-panel-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:30px 0 18px;

    font-size:17px;

    font-weight:700;

    color:var(--nt-primary);

}

.nt-panel-title:after{

    content:"";

    flex:1;

    height:1px;

    background:#eceff4;

    margin-left:15px;

}

/* ==========================================================
APPLICATION GRID
========================================================== */

.nt-application-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}

/* ==========================================================
APPLICATION CARD
========================================================== */

.nt-app-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:#fff;

    border:1px solid var(--nt-border);

    border-radius:18px;

    padding:18px 12px;

    min-height:120px;

    transition:var(--nt-transition);

    cursor:pointer;

}

.nt-app-card:hover{

    border-color:var(--nt-primary);

    box-shadow:0 12px 24px rgba(0,0,0,.08);

    transform:translateY(-4px);

}

/* ==========================================================
APPLICATION ICON
========================================================== */

.nt-app-icon{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#f5f7fb;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:14px;

    transition:var(--nt-transition);

}

.nt-app-icon i{

    font-size:22px;

    color:var(--nt-primary);

    transition:var(--nt-transition);

}

.nt-app-card:hover .nt-app-icon{

    background:var(--nt-primary);

}

.nt-app-card:hover .nt-app-icon i{

    color:#fff;

}

/* ==========================================================
APPLICATION TEXT
========================================================== */

.nt-app-card span{

    display:block;

    font-size:14px;

    font-weight:600;

    color:var(--nt-text);

    line-height:1.5;

}

.nt-app-card a{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:inherit;

    width:100%;

    height:100%;

}

/* ==========================================================
END PART 2
========================================================== */


/* ==========================================================
   PREMIUM MOBILE MENU
   PART 3
   Category List + Link List + More Panel
========================================================== */

/* ==========================================================
CATEGORY LIST
========================================================== */

.nt-category-list{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:10px;

}

/* ==========================================================
CATEGORY ITEM
========================================================== */

.nt-category-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

    background:#fff;

    border:1px solid var(--nt-border);

    border-radius:18px;

    cursor:pointer;

    transition:var(--nt-transition);

    position:relative;

    overflow:hidden;

}

.nt-category-item:hover{

    border-color:var(--nt-primary);

    box-shadow:var(--nt-shadow);

    transform:translateY(-3px);

}

.nt-category-item span{

    font-size:15px;

    font-weight:600;

    color:var(--nt-text);

}

.nt-category-item i{

    color:var(--nt-primary);

    transition:var(--nt-transition);

}

.nt-category-item:hover i{

    transform:translateX(6px);

}

/* ==========================================================
LINK LIST
========================================================== */

.nt-link-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

/* ==========================================================
LINK ITEM
========================================================== */

.nt-link-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

    border-radius:18px;

    border:1px solid var(--nt-border);

    background:#fff;

    text-decoration:none;

    cursor:pointer;

    transition:var(--nt-transition);

}

.nt-link-item:hover{

    background:#fff;

    border-color:var(--nt-primary);

    box-shadow:var(--nt-shadow);

    transform:translateY(-2px);

}

.nt-link-item span{

    font-size:15px;

    font-weight:600;

    color:var(--nt-text);

}

.nt-link-item i{

    color:var(--nt-primary);

    transition:var(--nt-transition);

}

.nt-link-item:hover i{

    transform:translateX(6px);

}

/* ==========================================================
MORE PANEL LIST
========================================================== */

#more .nt-link-item{

    min-height:62px;

}

#more .nt-link-item span{

    font-size:15px;

}

/* ==========================================================
CATEGORY RIPPLE
========================================================== */

.nt-category-item:before,
.nt-link-item:before,
.nt-menu-card:before,
.nt-app-card:before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.65s;

}

.nt-category-item:hover:before,
.nt-link-item:hover:before,
.nt-menu-card:hover:before,
.nt-app-card:hover:before{

    left:100%;

}

/* ==========================================================
ACTIVE PANEL TITLE
========================================================== */

.nt-panel.active .nt-panel-header h3{

    animation:fadeDown .35s ease;

}

.nt-panel.active .nt-panel-header p{

    animation:fadeDown .45s ease;

}

/* ==========================================================
ITEM ANIMATION
========================================================== */

.nt-link-item,
.nt-category-item,
.nt-app-card,
.nt-menu-card{

    animation:fadeUp .35s ease;

}

/* ==========================================================
KEYFRAMES
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
PANEL SLIDE
========================================================== */

.nt-panel{

    will-change:transform;

}

.nt-panel.active{

    animation:slidePanel .35s ease;

}

@keyframes slidePanel{

    from{

        transform:translateX(30px);

        opacity:0;

    }

    to{

        transform:translateX(0);

        opacity:1;

    }

}

/* ==========================================================
FOCUS
========================================================== */

.nt-link-item:focus,
.nt-category-item:focus,
.nt-menu-card:focus,
.nt-app-card:focus{

    outline:none;

    border-color:var(--nt-secondary);

    box-shadow:0 0 0 3px rgba(216,162,40,.15);

}


.nt-bottom{position:absolute;left:0;bottom:0;width:100%;display:grid;grid-template-columns:1fr 1fr;background:#f5f7fb;}
.nt-bottom a{height:60px;display:flex;align-items:center;justify-content:center;color:#000;text-decoration:none;border-right:1px solid rgba(0,0,0,.15);font-weight:600!important;}
.nt-bottom a:last-child{border-right:0}
.nt-bottom i{margin-right:10px;color:#F26522;font-size: 20px;}

/* ==========================================================
END PART 3
========================================================== */


.nt-tile-table{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    background:#fff;
}

.nt-table-item{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:78px;
    padding:12px 18px;

    text-align:center;
    text-decoration:none;

    color:#666;
    font-size:16px;
    font-weight:400;
    line-height:1.4;

    border-bottom:1px solid #d8dde6;

    transition:.25s;
}

/* Center divider only */
.nt-table-item:nth-child(even){
    border-right:1px solid #d8dde6;
}

/* Full width heading */
.nt-table-heading{
    grid-column:1/-1;
    justify-content:flex-start;

    padding-left:22px;

    font-size:16px;
    color:#666;

    border-left:none !important;
}

/* Hover */
.nt-table-item:hover{
    color:#f26522;
    background:#fafafa;
}

@media(max-width:576px){

    .nt-table-item{
        min-height:68px;
        font-size:15px;
        padding:10px;
    }

    .nt-table-heading{
        font-size:17px;
        padding-left:16px;
    }

}