/*
Theme Name: Ninja
Author: Locus-T
Author URI: http://www.locus-t.com.my/
Description: Ninja theme is awesome. That's all you need to know.
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: grid-layout, footer-widgets, education, entertainment, food-and-drink, news, photography, portfolio, e-commerce
*/

/* Global
----------------------------------------------- */
body { font-family: 'Open Sans', sans-serif; line-height: 1.6; font-size: 16px; /*max-width: 1920px;*/ margin: 0 auto; color: #191919; }
a { color: inherit; text-decoration: none; cursor: pointer; transition: all 0.3s; }
a i { pointer-events: none; }
a:hover, a:focus { color: #DADADA; text-decoration: none; }
:focus {outline: none !important;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-top: 0; }
h1, .h1 { font-size: 2.4em; }
h2, .h2 { font-size: 2em; }
h3, .h3 { font-size: 1.6em; }
h4, .h4 { font-size: 1.4em; }
h5, .h5 { font-size: 1.2em; }
h6, .h6 { font-size: 1em; }
img { height: auto; max-width: 100%; image-rendering: -webkit-optimize-contrast;}
button, input, select, textarea { font-size: 100%; margin: 0;
    vertical-align: baseline; /* Improves appearance and consistency in all browsers */
    *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
input[type="checkbox"], input[type="radio"] { padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
label.screen-reader-text { display: none; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], textarea, select {
    color: #666; border: 1px solid #E8E8E8; border-radius: 3px; padding: 5px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
    color: #111;
}
iframe { width: 100%; max-width: 100%; }
textarea { overflow: auto; vertical-align: top; width: 100%; }
.wpcf7-form input:not([type="submit"]):not([type="reset"]), .wpcf7-form textarea, .wpcf7-form select { width: 100%; margin-bottom: 10px; }
/*Adjust spinner position for contact form 7*/
div.wpcf7 .ajax-loader, div.wpcf7 .wpcf7-spinner{ position: absolute; }

/* Alignment
----------------------------------------------- */
.alignleft { display: inline; float: left; }
.alignright { display: inline; float: right; }
.aligncenter { clear: both; display: block; margin: 0 auto; }

/* Search - Search form & Search Page
----------------------------------------------- */
.search-form { border: none; background: #fff; padding-left: 10px; margin-bottom: 15px; width: 275px; float: right; }
.search-submit { background: #fff url('images/search.jpg') center no-repeat; color: transparent; border: none; padding: 5px 16px; margin: 5px; }
.header-middle .search-field { background: none; border: none; }

.search-results-list article { box-shadow: none; padding: 35px 35px 10px; margin: 35px 0; background-color: #f9f9f9; border-radius: 15px; }
.search-results-list article .page-header { border-bottom: 0; margin: 0; padding-bottom: 0; }
.search-results-list article .entry-title{ margin-bottom: 30px; }
.search-results-list article .entry-title a{ color: #000; font-size: 36px; font-weight: 700; line-height: 1.2em; }
.search-no-results .site-main{ padding: 50px 0; }
.search-no-results .search-form{ width: 100%; display: flex;}
.search-no-results .search-form label{ margin: 0; }
.search-no-results .search-form input[type="search"]{ padding: 10px 5px; }
.search-no-results .search-form .search-submit, .search-no-results .search-form .search-submit:hover{ background-color: transparent; box-shadow: none; padding: 10px 18px; margin: 0;}


/* Pagination
----------------------------------------------- */
.pagination>li>a, .pagination>li>span{ color: #000; background-color: #ffffff; border: 1px solid #000; padding: 10px 15px; }
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover{ background-color: #000; color: #fff; }

/* Background Colours
----------------------------------------------- */
.bg-light-grey { background-color: #E1E1E1; }
.bg-dark-grey { background-color: #191919; color: #fff; }
.bg-black { background-color: #000; color: #fff; }
.bg-white { background-color: #fff; }

.bg-dark-grey a, .bg-black a { color: inherit; }

/* Full-width 50-50 content
----------------------------------------------- */
.nfluid-wrapper { position: relative; }
.nxposition { position: initial; }

/* Full-width Layout
----------------------------------------------- */
.container-fluid, .container-fluid > .row > [class*='col-'], .container-fluid.main-content-area, .container-fluid.main-content-area > .row > .main-content-inner { 
	padding-left: 0; padding-right: 0; 
}
.container-fluid > .row { margin: 0; }
.container-fluid.main-content-area > .row { margin: auto; }

/* Archive Sidebar
----------------------------------------------- */
.sidebar { margin-bottom: 15px; }
.sidebar aside { background-color: #f3f3f3; padding-bottom: 15px; }
.widget_archive select { width: calc(100% - 10px * 2); margin: 10px auto 0; display: block; outline: 0!important; }
.widget_archive h3 { background-color: #000; color: #fff; padding: 5px 15px; text-transform: uppercase; font-size: 24px; }

/* Archive Post Listing
----------------------------------------------- */
.post-listing { padding: 0; list-style-type: none; }
.post-listing li { overflow: hidden; margin: 0 0 20px; border: 5px solid #f3f3f3; padding: 15px; }
.post-listing .featured-img { float: left; margin-right: 10px; }

/* Buttons
----------------------------------------------- */
.btn.btn-default { background-color: #0c4ea0; border-color: #0c4ea0; color: #fff; font-size: 16px; padding: 5px 20px; 
	margin-top: 15px; transition: all 0.3s ease 0s;
}
.btn.btn-default:hover { color: #0c4ea0; border-color: currentColor; background-color: transparent; }

/* Spacing
----------------------------------------------- */
.np15 { padding: 15px; }
.np30 { padding: 30px; }
.np45 { padding: 45px; }

.nm15 { margin: 15px; }
.nm30 { margin: 30px; }
.nm45 { margin: 45px; }

.nvp15 { padding-top: 15px; padding-bottom: 15px; }
.nvp30 { padding-top: 30px; padding-bottom: 30px; }
.nvp45 { padding-top: 45px; padding-bottom: 45px; }

.nvm15 { margin-top: 15px; margin-bottom: 15px; }
.nvm30 { margin-top: 30px; margin-bottom: 30px }
.nvm45 { margin-top: 45px; margin-bottom: 45px }

.nhp15 { padding-left: 15px; padding-right: 15px; }
.nhp30 { padding-left: 30px; padding-right: 30px; }
.nhp45 { padding-left: 45px; padding-right: 45px; }

.nhm15 { margin-left: 15px; margin-right: 15px; }
.nhm30 { margin-left: 30px; margin-right: 30px; }
.nhm45 { margin-left: 45px; margin-right: 45px; }

.nxp { padding: 0; }
.nxvp { padding-top: 0; padding-bottom: 0; }
.nxhp { padding-left: 0; padding-right: 0; }

.nxm { margin: 0; }
.nxvm { margin-top: 0; margin-bottom: 0; }
.nxhm { margin-left: 0; margin-right: 0; }

/* Flex
----------------------------------------------- */
.nflex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; }
.nflex-center { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.nflex-bottom { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; }
.nflex-top { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; }

/* Float items when flex it */
.nmla { margin-left: auto; }
.nmra { margin-right: auto; }

/* List
----------------------------------------------- */
ul, li { margin-bottom: 10px; }
ul ul, ol ol, ul ol, ol ul { padding-left: 20px; }

.ninline-col-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
.ninline-col-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
.ninline-col-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
.ninline-col-1 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
[class*='ninline-col'] { -webkit-column-gap: 40px; column-gap: 40px; }
[class*='ninline-col'] li { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; -moz-page-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; }

ul.menu { list-style: none; padding-left: 0; margin-bottom: 0; }

/* Header
----------------------------------------------- */
.header-middle > .container { padding-top: 15px; padding-bottom: 15px; }

/* Header Navigation
----------------------------------------------- */
.navbar-collapse { clear: both; float: right; padding-left: 0; padding-right: 0; }
#menu-primary li { display: block; position: relative; margin-bottom: 0; }
#menu-primary ul.sub-menu { display: none; z-index: 999; text-align: left; }
#menu-primary li:last-child { margin-right: 0; }
#menu-primary li a { padding: 10px 20px; display: block; }
#menu-primary li a:hover { color: #000; }
.dropdown-menu { padding: 0!important; border: 0!important; border-radius: 0; }
ul.sub-menu { position: absolute; top: 40px; left: 0; padding: 0 5px; background: #000; }
#menu-primary ul.sub-menu li a { padding: 5px; }
#menu-primary ul.sub-menu li a:hover { color: #fff; }
ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; }
ul.nav li.dropdown:hover > ul.dropdown-menu ul.dropdown-menu { margin-left: 160px; margin-top: -40px; }

/* Thank You Page
----------------------------------------------- */
.ninja-tq-icon { font-size: 40px; color: #fff; margin-bottom: 30px; background-color: #ee1b24; padding: 30px; border-radius: 50%; border: 5px solid #fff; box-shadow: 7px 7px 24px 0px rgba(50, 50, 50, 0.41); }

/* Coming Soon Page
----------------------------------------------- */
.ninja-comingsoon-icon { font-size: 40px; color: #fff; margin-bottom: 30px; background-color: #ee1b24; padding: 30px; border-radius: 50%; border: 5px solid #fff; box-shadow: 7px 7px 24px 0px rgba(50, 50, 50, 0.41); }
.ninja-thank-you > .row { height: 100vh; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.page-template-page-thankyou [data-elementor-type="header"], .page-template-page-thankyou [data-elementor-type="footer"], .page-template-page-thankyou header {display:none;}
.page-template-page-thankyou .site-main {overflow:hidden;}
.countdown { position: relative; margin: auto; height: 40px; width: 40px; text-align: center; }
.countdown-number { color: #000; display: inline-block; line-height: 38px; }
.ninja-thank-you svg { position: absolute; top: 0; right: 0; width: 40px; height: 40px; transform: rotateY(-180deg) rotateZ(-90deg); -webkit-transform: rotateY(-180deg) rotateZ(-90deg); }
.ninja-thank-you svg circle { stroke-dasharray: 113px; stroke-dashoffset: 0px; stroke-linecap: round; stroke-width: 2px; stroke: black; fill: none; animation: countdown 10s linear forwards; -webkit-animation: countdown 10s linear forwards; }
@-webkit-keyframes countdown {
    from { stroke-dashoffset: 0px; }
    to { stroke-dashoffset: 113px; }
}
@keyframes countdown {
    from { stroke-dashoffset: 0px; }
    to { stroke-dashoffset: 113px; }
}

/* Misc
----------------------------------------------- */
p:empty { display: none; }
a.waze-app, a.whatsapp { display: none; }
.nboxes .ncaption { margin-bottom: 15px; }
.nboxes img { width: 100%; }
.page-featured-banner h1 { text-align: center; }
.fullpage-header { position: absolute; z-index: 1; color: #fff; }
#wc_category_accordion-2 .widgettitle { margin-bottom: 0; }
figure.thumbnail { max-width: 100%; }

/* Fixed button float right*/
.nbtnfr { -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); position: fixed; transform-origin: right bottom; top: 20%; }

/* Footer
----------------------------------------------- */
#footer { background: #191919; padding-top: 15px; color: #fff; }
#footer .footer-inner { padding-top: 25px; padding-bottom: 25px; padding-left: 30px; padding-right: 30px; }
#footer .widgettitle { font-size: 14px; }
#footer .widgettitle:after { content: ""; background-color: #fff; width: 20px; height: 3px; display: block; margin-top: 15px; }
#footer ul { padding-left: 0; }
#colophon { background: #fff; color: initial; }
#copyright { text-align: center; padding: 10px 15px; }

/* Floating Widget
----------------------------------------------- */
#floating-widget { position: fixed; right: 0; top: 38%; z-index: 999; }

/* Scroll To Top
----------------------------------------------- */
#scrollToTopBtn{background-color:rgb(0 0 0 / 70%);border:none;color:white;cursor:pointer;font-size:18px;line-height:48px;width:48px;position:fixed;bottom:25px;right:20px;z-index:100;opacity:0;transform:translateY(100px);transition:all 0.5s ease;}
#scrollToTopBtn:hover {background-color: #000;}
#scrollToTopBtn.showBtn{opacity:1;transform:translateY(0);}

/* Social Menu
----------------------------------------------- */
.social-icons ul { margin-bottom: 0; }
.social-icons ul, .social-icons li { border: 0!important; list-style: none; padding-left: 0; }
.social-icons li { border: none; display: inline-block; margin: 0; }
.social-icons li a span { display: none; }
.social-icons li a { font-size: 18px; line-height: 37px; list-style: none; display: inline-block; text-align: center; height: 35px; width: 35px; margin-right: 5px; margin-bottom: 5px;
    border-radius: 50%; background-color: #fff; color: #000; transition: background-color 0.5s;
}
.social-icons li a[href*="facebook.com"] i:before { content: "\f09a"; }
.social-icons li a[href*="twitter.com"] i:before { content: "\f099"; }
.social-icons li a[href*="skype"] i:before { content: "\f17e"; }
.social-icons li a[href*="youtube.com"] i:before { content: "\f167"; }
.social-icons li a[href*="instagram.com"] i:before { content: "\f16d"; }
.social-icons li a[href*="flickr.com"] i:before { content: "\f16e"; }
.social-icons li a[href*="tumblr.com"] i:before { content: "\f173"; }
.social-icons li a[href*="pinterest.com"] i:before { content: "\f0d2"; }
.social-icons li a[href*="plus.google.com"] i:before { content: "\f0d5"; }
.social-icons li a[href*="linkedin.com"] i:before { content: "\f0e1"; }
.social-icons li a:hover { color: #fff!important; }
.social-icons li a[href*="facebook.com"]:hover { background-color: #4265b9; }
.social-icons li a[href*="twitter.com"]:hover { background-color: #55ACEE; }
.social-icons li a[href*="skype"]:hover { background-color: #0bbff2; }
.social-icons li a[href*="youtube.com"]:hover { background-color: #df3333; }
.social-icons li a[href*="instagram.com"]:hover { background-color: #F95B60; }
.social-icons li a[href*="flickr.com"]:hover { background-color: #ff0084; }
.social-icons li a[href*="tumblr.com"]:hover { background-color: #35506b; }
.social-icons li a[href*="pinterest.com"]:hover { background-color: #c31e26; }
.social-icons li a[href*="plus.google.com"]:hover { background-color: #d62408; }
.social-icons li a[href*="linkedin.com"]:hover { background-color: #005987; }

/* Elementor 
----------------------------------------------- */
/* Loop More Than Auto Drop Column */
.looprow .elementor-row {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.fflex{display:flex;} .fflex-center{justify-content:center;} .fflex-middle{align-items:center;}
/*Set image inside column to full width and full height*/
.ncol-object-cover .elementor-widget-image, .ncol-object-cover .elementor-widget-image > div, .ncol-object-cover .elementor-widget-image > div > div{ height: 100%; }
.ncol-object-cover .elementor-widget-image img{ object-fit: cover; width: 100%; height: 100%; }

/* Responsive
----------------------------------------------- */
@media (min-width: 1200px) {
    .lg-center { text-align: center; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .md-center { text-align: center; }
}
@media (min-width: 992px) {
    /* Full-width 50-50 content */
    .nimg-wrapper { position: initial; }
    .nimg-container-right, .nimg-container-left { position: absolute; bottom: 0; top: 0; }
    .nimg-container-right { left: 50%; right: 0; }
    .nimg-container-left { left: 0; right: 50%; }
    .nimg-container-right img, .nimg-container-left img { object-fit: cover; width: 100%; height: 100%; }
    .nfluid-wrapper .row.nflex > [class*='col-'] { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%; max-width: 50%; }
    .nfluid-wrapper .nflex-reverse { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: row-reverse!important; flex-direction: row-reverse!important; }
}
@media (max-width: 1024px) { /*Elementor breakpoint*/
    
}
@media (max-width: 991px) {
    .navbar-collapse.collapse { display: none !important; }
    .sidebar, .content-with-sidebar { float: none; width: 100%; }
    .search-form { display: none; }
    .nflex { display: block; }
    #logo img { width: auto; }
    a.waze-app, a.whatsapp { display: inline-block; }
    a.waze { display: none; }
    .nfloating-box-list .nbox { transform: none!important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .sm-center { text-align: center; }
}
@media (max-width: 767px) {
    .xs-center { text-align: center; }
    .nimg-wrapper img { margin-bottom: 15px; } 
    .np45 { padding: 30px; }
	.elementor-element.elementor-products-grid ul.products{display:flex !important; flex-wrap:wrap;}   
}
@media (max-width: 480px) {
    #floating-widget { top: initial; bottom: 150px; width: auto; text-align: center; }
}