/*
Theme Name: forbiz NEW
Theme URI: https://forbiz.my
Description: Malaysia Business Directory
Author: Jaring Digital
Author URI: https://jaringdigital.com
Version: 1.0
License: GPL
License URI: http://www.gnu.org/copyleft/gpl.html
*/
@import "assets/dashboard.css";
@import "assets/frontend-directory.css";
@import "assets/woocommerce.css";
/* -------------------------------------------------- 
BASIC
-------------------------------------------------- */
html, body {border: 0; margin: 0; padding: 0; width: 100%; height: 100%; position: relative;} a img {border: 0}
html {scroll-behavior: smooth;}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {background: #fff; color: #000; padding: 0; margin: 0!important; font-size: 1rem; line-height: 1.4;}
img, object, embed {max-width: 100%; height: auto;} input:focus {outline: none;} *:focus {outline: none;} 
input, textarea, select, button {transition: .3s;}
::selection {background: #fff2a8;}
::-moz-selection {background: #fff2a8;}
.icon::before {display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased;}
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.8em center; background-size: 1em; padding-right: 2em; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; line-height: 1.4; color: #333;}
select:focus {outline: none; border-color: #009b5d;}
select::-ms-expand {display: none;}
select {cursor: pointer;box-shadow: 0 1px 2px rgba(0,0,0,0.05);}
select option:first-child {color: #d3d3d3;}
.select {position: relative; line-height: 3; display: flex; overflow: hidden;}
.select::after {content: '\f078'; font-family: 'Font Awesome 6 Pro'; font-weight: 500; color: #222; position: absolute; top: 3px; right: 10px; cursor: pointer; pointer-events: none; transition:.25s all ease;}
.select:hover::after {color: #23b499;}
::-webkit-scrollbar {width: 8px; height: 6px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background-color: #7f7f7f; border-radius: 30px; border: 1px solid #f1f1f1;}
::-webkit-scrollbar-thumb:hover {background-color: #555;}
/* --------------------------------------------------
LINK
-------------------------------------------------- */
a, input, #submit {-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
a {text-decoration: none; -webkit-tap-highlight-color:transparent !important;}
* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;}
/* -------------------------------------------------- 
TYPOGRAPHY
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {font-weight: 700; margin: 0; padding: 0; text-transform: none; letter-spacing: 0.1px;}
ul, li, ol {list-style: none; margin: 0; padding: 0;}
p {margin: 0;}
body, input, textarea, select, button {font-family: 'Inter', Helvetica Neue, Helvetica, Arial, sans-serif!important; font-optical-sizing: auto;}
button, select {cursor: pointer;}
button {border: none; padding: 0; box-shadow: 0; background: none;}
.mce-content-body p {font: 1rem 'Inter', Helvetica Neue, Helvetica, Arial, sans-serif!important; line-height: 1.4;}
/* -------------------------------------------------- 
LAYOUT CONTROL
-------------------------------------------------- */
.head-control, .control {margin: 0 auto; padding: 0 20px; position: relative;}
.head-control {max-width: 1600px;}
.control {max-width: 1400px;}
.sec {width: 100%; position: relative;}
.thumb img {width: 100%; height: auto;}
.js-offcanvas, .b-menu, .showme, .h-btm, .acc-hp, .hp-acc, .ob-box, .dd-hp, .btm-nav, .fancybox-caption-wrap {display: none;}
/* --------------------------------------------------
SWIPER
-------------------------------------------------- */
.swiper-wrapper {display: flex;}
.swiper-button-next, .swiper-button-prev {width: 38px!important; height: 38px!important; background: #fff; top: 47%; border-radius: 50%; display: block; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; transition: .3s;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 1rem!important; color: #222; padding-top: 2px; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.swiper-button-prev:after {margin-right: 2px;}
.swiper-button-next:after {margin-left: 2px;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {opacity: .2!important;}
/* --------------------------------------------------
ELEMENTOR FIX
-------------------------------------------------- */
.elementor-widget-text-editor p {margin-bottom: 15px;}
.elementor-widget-text-editor p strong {font-weight: 600;}
.elementor-widget-text-editor a {color: #101e8b; font-weight: 500;}
.elementor-widget-text-editor a:hover {text-decoration: underline;}
.elementor-widget-text-editor h3 {font-weight: normal;}
.elementor-widget-text-editor h3 strong {font-weight: 600;}
.elementor-widget-text-editor ul, .elementor-widget-text-editor ol {padding-left: 18px; margin-bottom: 20px;}
.elementor-widget-text-editor ul li {list-style: disc; margin-bottom: 10px;}
.elementor-widget-text-editor ol li {list-style: decimal;}
.elementor-widget:not(:last-child), .elementor-widget-text-editor p:last-child {margin-bottom: 0!important;}
.ldh-list ul {display: flex; flex-wrap: wrap; justify-content: center;}
.ldh-list li {font-size: .76rem; line-height: 1.2; font-weight: 300; background: #fff; color: #222; padding: 8px 12px; border: 1px solid #afc2d1; border-radius: 50px; margin: 5px; display: inline-block;}
.box-four .elementor-container, .box-two .elementor-container {flex-wrap: wrap; justify-content: center;}
.box-two .elementor-column {width: 50%!important;}
.box-four .elementor-column {width: 25%!important;}
.how-no {display: flex; justify-content: center!important;}
.how-no h5 {width: 90px; height: 90px; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50%; box-shadow: 0 0 0 8px rgba(0,0,0,0.03), 0 6px 18px rgba(0,0,0,0.02);}
.lp-btn {display: flex; justify-content: center;}
.lp-btn a {font-size: 1.05rem; line-height: 1.2; font-weight: 500; background: #0056D2; color: #fff; padding: 16px 0; width: 300px; border-radius: 50px; display: block; text-align: center; transition: .3s;}
.lp-btn a i {font-size: .9rem; margin-left: 1px; transition: .3s;}
.lp-btn a:hover {background: #1566da;}
.lp-btn a:hover i {margin-left: 6px;}
/* --------------------------------------------------
HEADER
-------------------------------------------------- */
.head.home {background: none; border: none; position: absolute; top: 0; z-index: 3;}
.head {height: 60px; background: #fff; border-bottom: 1px solid #e4e5e7; transition: all 0.3s ease; width: 100%;}
.h-box {display: flex; justify-content: space-between; align-items: center; position: relative;}
.l-head {display: flex; align-items: center; width: 100%;}
.logo-head {margin-top: -3px;}
.logo {background: url("images/logo.svg") no-repeat; width: 78px; height: 24px; display: block; text-indent: -9999px; background-size: contain;}
.r-head {position: relative; display: flex; align-items: center; justify-content: flex-end;}
.r-nav {margin-right: 20px;}
.r-nav ul {display: flex;}
.r-nav li a {font-size: 1rem; line-height: 1; color: #000; font-weight: 500; padding: 14px 12px; display: block;}
.r-nav li a:hover {color: #0478d1;}
.r-btn {display: flex; justify-content: flex-end; min-width: 220px;}
.r-btn a {padding: 10px 14px; font-size: .9rem; line-height: 1; font-weight: 600; border-radius: 3px; display: block; text-align: center;}
.r-btn a.login-btn {background: #fff; color: #0056d2; border: 1px solid #0056d2; margin-right: 8px;}
.r-btn a.reg-btn {background: #0056d2; color: #fff; border: 1px solid #0056d2;}
.hhp-top {display: none;}
.head.home .h-top .h-sc {display: none;}
.h-sc {min-width: 350px; margin-left: 20px;}
.h-sc form {position: relative; width: 100%;}
.h-sc input {font-size: .95rem; line-height: 1; color: #62646a; padding: 8px 10px; border: 1px solid #c5c6c9; border-radius: 4px; width: 100%;}
.h-sc input:focus {border-color: #222325;}
.h-sc input::placeholder {font-weight: 300;}
.h-sc .s-btn {top: 0; right: 0; position: absolute;}
.h-sc .s-btn button {width: 36px; height: 36px; padding-top: 2px; display: block;}
.h-sc .s-btn button svg {width: 14px; height: 14px; fill: #777777;}
.h-sc .s-btn button:hover svg {fill: #222325;}
/* --------------------------------------------------
NAV
-------------------------------------------------- */
.nav {margin-left: 20px;}
.nav ul.sub-nav {display: flex; align-items: center; z-index: 1004;}
.sub-nav > li {margin: 0 15px;}
.sub-nav > li > a {font-size: 1rem; line-height: 1.2; font-weight: 600; color: #222; display: block; padding: 20px 0; position: relative; transition: all 0.4s ease;}
.sub-nav > li:hover > a {color: #0056d2;}
/* SUB MENU */
.sub-nav > li > div {opacity: 0; visibility: hidden; position: absolute; display: block; width: 100%; top: 58px; left: 0; right: 0; overflow: hidden; background: #fff; z-index: 1005; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: all 0.3s ease 0.15s; -o-transition: all 0.3s ease 0.15s; transition: all 0.3s ease 0.15s; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.sub-nav > li:hover > div {opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; overflow: visible;}
.sub-nav > li.has-submenu > a::after {content: "\f078"; font-family: 'Font Awesome 6 Pro'; font-weight: 900; font-size: .7rem; vertical-align: .8px; margin-left: 5px;}
.sub-nav > li > div.sub-bz {margin: 0 auto;}
/** SUB BIZ **/
.sub-bz .sub-item {padding: 0;}
.nav .tabs {display: flex; width: 100%;}
.nav .tabs .row-one, .nav .tabs .row-two {height: 513px;}
.nav .tabs .row-one {min-width: 260px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #7f7f7f #f1f1f1;}
.nav .tabs .row-two {width: 100%; background: #f6f8f9; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #7f7f7f #fff;}
.nav .tabs .row-two::-webkit-scrollbar {height: 10px;}
.nav .tabs .row-two::-webkit-scrollbar-track {background: #f1f1f1;}
.nav .tabs .row-two::-webkit-scrollbar-thumb {background-color: #7f7f7f; border-radius: 30px; border: 1px solid #f1f1f1;}
.nav .tab-btn {width: 100%; padding: 12px 16px; cursor: pointer; background: #fff; font-size: .95rem; line-height: 1.2; font-weight: 600; color: #222; position: relative; transition: .3s;}
.nav .tab-btn::after {content: "\f054"; font-family: 'Font Awesome 6 Pro'; font-weight: 900; font-size: .7rem; top: 15px; right: 15px; position: absolute;}
.nav .tab-content {width: 100%; height: auto; padding: 10px; display: none;}
.nav .tab-content .box {display: flex; flex-wrap: wrap; margin: 0 -5px;}
.nav .tab-content .row {width: 25%; padding: 0 5px; margin-bottom: 10px;}
.nav .tab-content .nos, .tab-content .row a {padding: 10px 13px; font-size: .92rem; line-height: 1.3; color: #222; font-weight: 500; background: #fff; border: 1px solid rgba(0,0,0,.25); border-radius: 4px; transition: .3s; display: block; height: 100%;}
.nav .tab-content a:hover {border-color: rgba(0,0,0,.45)}
.nav .tab-content span {font-size: .75rem; color: #767676; font-weight: 400;}
.nav .tab-content .no-post {opacity: .5;}
.nav .tab-btn.active {background: #f6f8fa; color: #0056d2;}
.nav .tab-btn:hover {color: #0056d2;}
.nav .tab-content.active {display: block; background: #f6f8fa;}
/** SUB NAV **/
.sub-nav > li.sub-m {position: relative;}
.sub-nav > li > div.sub-e {width: 100%; width: 300px; left: -15px;}
.sub-e {padding: 15px 15px 5px;}
.sub-e .item {margin-bottom: 6px;}
.sub-e a {padding: 8px; display: flex; gap: 10px; border: 1px solid #ddd; border-radius: 4px;}
.sub-e a:hover {border-color: #b1b1b1; background: #fafafa;}
.sub-e a i {min-width: 30px; height: 30px; font-size: 1.6rem; color: #000; padding-top: 3px; text-align: center;}
.sub-e a i.fa-user-group {font-size: 1.35rem;}
.sub-e a i.fa-messages {font-size: 1.35rem;}
.sub-e a .info {width: 100%;}
.sub-e a h4 {font-size: .9rem; line-height: 1.1; font-weight: 600; color: #222; margin-bottom: 4px;}
.sub-e a p {font-size: .75rem; line-height: 1.2; color: rgba(0,0,0,.8);}
/* --------------------------------------------------  
HEAD ACCOUNT
-------------------------------------------------- */
.h-acc {display: flex; align-items: center; margin-left: 15px;}
.showhim:hover .showme {display: block; position: absolute; top: 50px; right: 0; width: 250px; border: 1px solid #ddd; background: #fff; border-radius: 4px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; z-index: 9999;}
.acc-tp {width: 140px; height: 30px; display: flex; justify-content: flex-end; align-items: center;}
.ac-pic {max-width: 30px; margin-right: 10px;}
.ac-pic img {border-radius: 50%; margin-bottom: -5px;}
.acc-tp h4 {font-size: .88rem; line-height: 1; font-weight: 500; color: #222;}
.acs-top {padding: 15px 20px 5px; margin-bottom: 5px;}
.acs-top img {width: 65px; height: auto; border-radius: 50%;}
.acs-top h4 {font-size: 1.05rem; line-height: 1.3; font-weight: 500; text-transform: capitalize;}
.acs-top .acs-email {font-size: .83rem; line-height: 1.2; font-weight: 300; color: rgba(0,0,0,.6); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin-top: 2px;}
.acs-top .d-plan {margin-top: 8px; font-size: .75rem; line-height: 1; font-weight: 600; text-transform: capitalize; padding: 5px 8px; border-radius: 4px; display: inline-block;}
.acs-top .premium {background: #fecf33; color: #222;}
.acs-top .premium::before {content: '\f521'; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: .63rem; vertical-align: .5px; color: #222;}
.acs-top .free {background: #d1e7dd; color: rgba(25, 135, 84);}
.acc-list ul {margin-bottom: 5px;}
.acc-list li a, .acc-list .disabled span {display: block; width: 100%; font-size: .93rem; line-height: 1.1; font-weight: 400; padding: 9px 20px; color: #222;}
.acc-list li a:hover {background: #f0f3f7;}
.acc-list li.sep {border-top: 1px solid #ddd; margin: 5px 0;}
.acc-list li.up-pre a {font-weight: 600;}
.acc-list li.up-pre a i {color: #fecf33;}
.acc-list .disabled span {color: rgba(0,0,0,.35); cursor: not-allowed;}
/* -------------------------------------------------- 
HP BROWSE BIZ INDUSTRY
-------------------------------------------------- */
.hp-inds {display: none;}
.pb-cat-count {font-size: .95rem; line-height: 1.1; margin-bottom: 30px;}
.pbc-row {margin-bottom: 15px;}
.pbc-row h3 {font-size: 1.15rem; line-height: 1.1; font-weight: 600; color: #222; margin-bottom: 12px;}
.pbc-row ul {display: flex; flex-wrap: wrap; margin: 0 -4px;}
.pbc-row li {width: 25%; padding: 0 4px; margin-bottom: 8px;}
.pbc-row li a, .pbc-row li.no-post span {font-size: .9rem; line-height: 1.1; font-weight: 500; color: #414141; padding: 10px 16px 10px; border: 1px solid rgb(189, 189, 189);; border-radius: 50px;  width: 100%; overflow: hidden; position: relative; display: flex; justify-content: space-between; align-items: center;}
.pbc-row li a .pbc-count {font-size: .75rem; font-weight: 300; color: #767676;}
.pbc-row li a:hover {border-color: #333;}
.pbc-row li.no-post span {color: #333; opacity: .5; cursor: default;}
.pbc-row li.no-post span .pbc-count {font-size: .85rem; font-weight: 300; color: #333;}
.pbc-row li.no-post span:hover {border-color: rgb(189, 189, 189);}
/* -------------------------------------------------- 
HOME
-------------------------------------------------- */
.hh-s {max-width: 800px; margin: 0 auto;}
.hh-s form {display: flex; position: relative;}
.hh-s .s-text {width: 100%;}
.hh-s input, .hh-s .s-btn button {height: 49px;}
.hh-s input {font-size: 1.15rem; line-height: 1; color: #222; padding: 12px 26px; background: #fff; height: 56px; border: 1px solid #cacbcd; border-radius: 60px; width: 100%;}
.hh-s input:focus {border-color: #222;}
.hh-s .s-btn {position: absolute; top: 3px; right: 3px;}
.hh-s .s-btn button {width: 50px; height: 50px; font-size: 1.15rem; color: rgba(0,0,0,.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .3s;}
.hh-s .s-btn button:hover {color: rgba(0,0,0,1.00);}
.hh-s input::placeholder {font-weight: 300;}
/** HOME BANNER **/
.mn-banner .swiper-pagination {display: none;}
.mn-banner a {background: #ddd; width: 100%; height: 100%; display: block; border-radius: 8px!important;}
.mn-banner img {width: 100%; height: auto; margin-bottom: -5px; border-radius: 8px!important;}
.m-banner .swiper-button-prev, .m-banner .swiper-button-next {opacity: 0; transition: .3s;}
.m-banner:hover .swiper-button-prev, .m-banner:hover .swiper-button-next {opacity: 1;}
.m-banner .swiper-button-prev {left: 5px;}
.m-banner .swiper-button-next {right: 5px;}
/** BLOG HOME **/
.b-list .box {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.b-list .thumb {margin-bottom: 15px;}
.b-list .thumb img {margin-bottom: -5px;}
.b-list a .post-topic {font-size: .7rem; line-height: 1.2; font-weight: 500; color: #0e6be6; text-transform: uppercase;}
.b-list a h4 {font-size: 1.15rem; line-height: 1.45; font-weight: 600; color: #000; text-transform: none; margin: 10px 0 6px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.b-list a:hover h4 {text-decoration: underline;}
.b-list .h-blog .row {margin-bottom: 10px;}
/* -------------------------------------------------- 
SWIPER FEAT BIZ HOME BUTTON
-------------------------------------------------- */
.home-biz {position: relative;}
.hb-btn {display: flex; justify-content: center; border-bottom: 2px solid #eff3f6;}
.hbp-btn {color: #333; font-size: 1.1rem; line-height: 1.2; font-weight: 600; cursor: pointer; padding: 25px 0; margin: 0 20px; display: inline-block; transition: .3s; position: relative;}
.hbp-btn.active {color: #0e6be6;}
.hbp-btn::after {content: ''; background: transparent; height: 4px; width: 60px; bottom: 0; left: 50%; position: absolute; transform: translate(-50%);}
.hbp-btn.active::after {background: #0e6be6;}
.hbp-btn:hover {color: #0e6be6;}
.hb-content {position: relative;}
.hb-swp {position: relative; padding: 20px 0;}
.hb-gradient {position: absolute; top: 0; bottom: 0; width: 5em; z-index: 5; pointer-events: none;}
.hb-gradient.left {left: 0; background: linear-gradient(to right, rgba(246,247,249,0.8), transparent);}
.hb-gradient.right {right: 0; background: linear-gradient(to left, rgba(246,247,249,0.8), transparent);}
.swiper.hb-inds {z-index: 1; padding-bottom: 2px;}
.hb-inds .swiper-slide {width: auto; touch-action: pan-y;}
.hbi-btn {position: relative;}
.hbi-btn .hbi-toggle {font-size: .9rem; line-height: 1.2; font-weight: 600; color: #333; background: #fff; padding: 10px 12px; border: 1px solid #ccc; display: inline-block; border-radius: 6px; position: relative; touch-action: pan-y; cursor: pointer; transition: .3s;}
.hbi-btn .hbi-toggle:hover {border-color: #333;}
.hbi-btn .hbi-toggle:after {content: "\f078"; font-family: 'Font Awesome 6 Pro'; font-weight: 900; font-size: .6rem; vertical-align: 1.5px; margin-left: 4px;}
.hbi-count {display: inline-block; margin-left: 10px; font-weight: bold;}
.hbi-btn .no-post {opacity: 0.5; pointer-events: none;}
.hbi-popup-overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 9999; overflow: auto;}
.hbi-popup-overlay.active {display: flex;}
.hbi-popup {background: #fff; max-width: 1100px; width: 90%; max-height: 400px; padding: 20px; border-radius: 6px; box-shadow: 0 0 15px rgba(0,0,0,0.3); position: relative; display: flex; flex-direction: column; overflow: hidden;}
.hbi-popup-title {font-size: 1.2rem; font-weight: bold; margin-bottom: 15px;}
.hbi-popup-content {overflow-y: auto; flex-grow: 1;}
.hbi-close {font-size: 1.2rem; line-height: 1; cursor: pointer; color: #333; top: 20px; right: 20px; position: absolute; background: transparent; border: none;}
.hbi-dropdown {display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;}
.hbi-dropdown li {width: 33.3333333333%;}
.hbi-dropdown li.no-post {opacity: 0.5; pointer-events: none;}
.hbi-dropdown li a, .hbi-dropdown li span {font-size: .98rem; line-height: 1.2; font-weight: 500; color: #222; padding: 8px 0; width: 100%; display: block;}
.hbi-dropdown li a:hover {color: #0e6be6;}
.hbi-count {margin-left: 8px; font-size: .75rem; font-weight: 300; color: #555;}
/* -------------------------------------------------- 
SWIPER FEAT BIZ HOME
-------------------------------------------------- */
.fh-biz .swiper-wrapper {display: flex; flex-direction: row!important; margin: 0!important;}
.fh-biz .swiper-slide {margin-top: 0!important; margin-bottom: 10px;}
.fh-biz a {border: 2px solid #ddd; background: #fff; display: block; height: 100%; border-radius: 8px; transition: .3s;}
.fh-biz a:hover {border-color: #0e6be6;}
.fh-biz a:hover .bd-profile {background: #0e6be6; color: #fff;}
.fh-biz .swp-last a {color: #0e6be6; font-size: 1.15rem; text-align: center; border-color: #0e6be6; display: flex; justify-content: center; align-items: center;}
.fh-biz .swp-last a i {font-size: 1.5rem; display: block; margin-top: 8px;}
.home-biz .h-more {margin-top: 10px;}
/* -------------------------------------------------- 
SWIPER JOB DEAL HOME
-------------------------------------------------- */
.h-job .op-job .jb-title h4 {font-size: .96rem;}
.h-job .op-job a:hover .jb-btn {background: #009b5d; color: #fff;}
.h-deal a .de-title h4 {font-size: .94rem; line-height: 1.4; font-weight: 600; color: #222; transition: .3s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.h-deal a:hover .de-title h4 {color: #cf2972;}
/** OTHER **/
.h-more {margin-top: 20px; position: relative;}
.h-job .h-more {margin-top: 10px;}
.h-deal .h-more {margin-top: 30px;}
.more-btn a {font-size: .92rem; line-height: 1.1em; font-weight: 600; background: #222; color: #fff; padding: 13px 0; width: 200px; display: block; text-align: center; border-radius: 5px;}
.more-btn a i {margin-left: 2px; font-size: .75rem; transition: .3s;}
.more-btn a:hover {background: #3c3c3c;}
.hb-post .no-post {margin-top: 20px; text-align: center; font-size: 1rem; line-height: 1.4;}
.hswp-nav .swiper-button-prev {left: inherit; right: 40px; bottom: 3px; top: inherit;}
.hswp-nav .swiper-button-next {right: 0; bottom: 0; bottom: 3px; top: inherit;}
.hswp-nav .swiper-button-next.swiper-button-disabled, .hswp-nav .swiper-button-prev.swiper-button-disabled {opacity: .3!important;}
.hswp-nav .swiper-button-prev, .hswp-nav .swiper-button-next {box-shadow: none;}
.hswp-nav .swiper-button-prev:hover, .hswp-nav .swiper-button-next:hover {background: #f3f3f3;}
.hswp-nav .swiper-button-prev:after {content: "\f060"; font-family: 'Font Awesome 6 Pro'; font-weight: 500; font-size: 1.3rem!important;}
.hswp-nav .swiper-button-next:after {content: "\f061"; font-family: 'Font Awesome 6 Pro'; font-weight: 500; font-size: 1.3rem!important;}
/* -------------------------------------------------- 
TESTIMONY
-------------------------------------------------- */
.ts-wrapper {position: relative;}
.ts-track {display: flex; width: max-content; animation: scroll-left 100s linear infinite;}
.track2 {animation: scroll-right 100s linear infinite; margin-top: 30px;}
.ts-loop {display: flex; flex-shrink: 0;}
.ts-item {flex: 0 0 auto; width: 500px; margin: 0 15px; padding: 30px; background: #fff; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex;
 flex-direction: column;}
.star {font-size: .9rem; color: #ffd75c; display: flex; gap: 5px;}
.ts-text {margin: 12px 0 15px; font-size: 1.05rem; line-height: 1.4; color: #252638; word-wrap: break-word; overflow-wrap: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.ts-meta {display: flex; align-items: center;}
.ts-img {width: 44px; height: 44px; background: url('images/user.webp') #ddd no-repeat; background-size: contain; margin-right: 15px; border-radius: 50%; overflow: hidden;}
.ts-img img {width: 100%; height: 100%; object-fit: cover;}
.ts-detail h4 {font-size: .96rem; line-height: 1.2; font-weight: 600;}
.ts-detail span {font-size: .82rem; color: #585858;}
.ts-gradient {position: absolute; top: 0; bottom: 0; width: 5em; z-index: 5; pointer-events: none;}
.ts-gradient.left {left: 0; background: linear-gradient(to right, rgba(255,255,255,0.8), transparent);}
.ts-gradient.right {right: 0; background: linear-gradient(to left, rgba(255,255,255,0.8), transparent);}
/* -------------------------------------------------- 
PAGE
-------------------------------------------------- */
.op-page {margin: 30px 0;}
.pages {padding: 30px 0 40px;}
.p-top {padding-top: 10px;}
.post-edit-link {position: fixed; left: 20px; bottom: 20px; font-size: .85rem; line-height: 1.1; font-weight: 500; padding: 6px 10px; color: #222; background: #fff; border: 1px solid #777; border-radius: 4px; display: inline-block; z-index: 999;}
.post-edit-link:hover {border-color: #333;}
.post-edit-link i {display: block; font-size: 1.2rem; margin-bottom: 3px;}
.p-title {margin-bottom: 20px;}
.p-title.pb-title {max-width: 900px;}
.p-title h1 {font-size: 1.6rem; line-height: 1.2; font-weight: 700; text-transform: capitalize; color: #222;}
.p-title h1 span {font-size: 1.2rem; font-weight: 400; color: #6e6a6a;}
.p-title p {font-size: .95rem; line-height: 1.4; color: #535459; margin-top: 6px;}
/* -------------------------------------------------- 
PAGE CONTACT
-------------------------------------------------- */
.ctc .row {margin-bottom: 25px;}
.ctc h4 {font-size: 1rem; line-height: 1.3; font-weight: 600; margin-bottom: 10px;}
.p-add {font-size: .985rem; line-height: 1.4;}
.p-add strong {font-weight: 500;}
.p-dir {margin-top: 5px; display: flex; align-items: center; gap: 10px;}
.p-dir img {width: auto; height: 30px!important;}
.p-ctc {display: flex; gap: 10px;}
.p-ctc li a {font-size: .985rem; line-height: 1.3; color: #000; padding: 20px; border: 1px solid #ccc; border-radius: 6px; display: inline-block;}
.p-ctc li a:hover {border-color: #909090;}
.p-ctc li a i {font-size: 1.4rem; line-height: 1.2; margin-bottom: 10px; display: block;}
.p-ctc li a .fa-phone {color: #0d82f8;}
.p-ctc li a .fa-whatsapp {color: #4cdb14;}
/* -------------------------------------------------- 
PAGE CONTENT
-------------------------------------------------- */
.o-page {margin-bottom: 40px;}
.o-page .control {max-width: 1040px;}
.page-content h2, .page-content h3, .page-content h4 {font-size: 1.1rem; line-height: 1.3; font-weight: 600; color: #222; margin-bottom: 15px; text-transform: none;}
.page-content h3, .page-content h4 {margin-top: 20px;}
.page-content p {margin-bottom: 10px;}
.page-content p, .page-content li {font-size: .96rem; line-height: 1.4; color: #222;}
.page-content strong {font-weight: 600;}
.page-content a {color: #195ce3; font-weight: 500;}
.page-content a:hover {text-decoration: underline;}
.page-content img {width: 100%; height: auto; margin-bottom: 15px;}
.page-content ul, .page-content ol {margin: 0 0 15px; padding-left: 30px;}
.page-content li {padding: 1px 0; margin-bottom: 2px;}
.page-content ul li {list-style: disc;}
.page-content ol li {list-style: decimal;}
/* -------------------------------------------------- 
SOCIAL MEDIA ICON
-------------------------------------------------- */
.socmed ul {display: flex; align-items: center; gap: 4px;}
.socmed li a {width: 40px; height: 40px; border-radius: 50%; display: block; padding-top: 11px; font-size: 1.15rem; line-height: 1; text-align: center; color: #fff;}
/* -------------------------------------------------- 
ADS CONTROL
-------------------------------------------------- */
.vds-main {margin: 20px auto; max-width: 1360px;}
.vsbm {margin-top: 20px;}
.vds-end {margin-bottom: 20px;}
/* -------------------------------------------------- 
PLACEHOLDER
-------------------------------------------------- */
.v-post {transition: height 0.3s ease;}
.v-post a {opacity: 0; transition: opacity 0.3s ease;}
.p-ph {background: #f6f6f6; border-radius: 8px;}
.h-deal .p-ph, .b-list .p-ph, .de-post .p-ph, .b-feat .p-ph, .b-trend .p-ph {background: #fff;}
.o-ph {background: #f8f8f8; margin-top: 10px; border-radius: 8px;}
.h-deal .ph-one, .de-post .ph-one, .b-list .ph-one {width: 100px; height: 12px;}
.h-deal .ph-two, .de-post .ph-two, .b-list .ph-two {width: 100%; height: 16px;}
.h-deal .ph-three, .de-post .ph-three, .b-list .ph-three {width: 60%; height: 16px;}
.h-deal .ph-four, .de-post .ph-four, .b-list .ph-four {width: 50%; height: 12px;}
.mn-banner .p-ph {height: 211px;}
.ft-biz .p-ph {height: 194px; background: #f8f8f8;}
.bz-post .p-ph {height: 336px;}
.bz-post.list-view .p-ph {height: 274px;}
.jb-post .p-ph {height: 244px;}
.p-state .p-ph {height: 280px; border-radius: 10px;}
.sw-deal .p-ph {height: 148px;}
.sw-job.jb-post .p-ph {height: 229px;}
.h-job .jb-post .p-ph {height: 221px;}
.h-deal .ph-img {height: 264px;}
.b-list .ph-img {height: 280px;}
.logo-ph .p-ph {height: 170px;}
.sw-gallery .p-ph {height: 181px;}
.de-post .ph-img {height: 330px;}
.ds-stats .p-ph {height: 94px;}
.ds-form .p-ph {height: 300px;}
.b-feat .ph-img {height: 335px;}
.b-feat .ph-one {width: 100px; height: 8px;}
.b-feat .ph-two {width: 90%; height: 16px;}
.b-feat .ph-three {width: 70%; height: 16px;}
.b-feat .ph-four {width: 100px; height: 8px;}
.bp .p-ph {display: flex; gap: 15px; background: none;}
.bp .ph-img {width: 35%; height: 87px; margin-top: 0;}
.bp .p-ph-info {width: 65%;}
.bp .ph-one {width: 90%; height: 8px;}
.bp .ph-two {width: 60%; height: 8px;}
.bp .ph-three {width: 30%; height: 5px;}
.blog-list .p-ph {display: flex; column-gap: 25px; background: none;}
.blog-list .ph-img {width: 45%; height: 269px; margin-top: 0;}
.blog-list .p-ph-info {width: 55%;}
.blog-list .ph-one {width: 100px; height: 8px;}
.blog-list .ph-two {width: 90%; height: 18px;}
.blog-list .ph-three {width: 70%; height: 18px;}
.blog-list .ph-four {width: 100px; height: 8px;}
.blog-list .ph-five {width: 100%; height: 8px; margin-top: 25px;}
.blog-list .ph-six {width: 80%; height: 8px;}
/* -------------------------------------------------- 
SIDE SINGLE
-------------------------------------------------- */
.bs-side {transition: all 0.3s ease;}
.sticky {position: fixed; top: 10px;}
.sticky-stop {position: absolute; top: auto; bottom: 0;} 
/* -------------------------------------------------- 
BLOG
-------------------------------------------------- */
.bt-term {margin-bottom: 20px;}
.bt-term .swiper-slide {width: auto;}
.bt-term a {font-size: .9rem; line-height: 1; font-weight: 600; color: #222; background: #fff; border: 1px solid #b3bdc0; padding: 10px 18px; border-radius: 30px; display: inline-block;}
.bt-term a:hover {background: #f7f7f7;}
.post-meta {font-size: .8rem; line-height: 1.2; color: rgba(0,0,0,.65);}
.post-meta span {font-size: .45rem; margin: 0 1px; vertical-align: 1.5px; color: rgba(0,0,0,.5);}
/* -------------------------------------------------- 
BLOG FEAT
-------------------------------------------------- */
.blog-top {margin-top: 20px; overflow: hidden; position: relative;}
.blog-top .control {max-width: 1500px;}
.blog-top .box {display: flex; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #ddd; width: 100%;}
.feat-blog {width: 40%; padding-right: 25px; position: relative;}
.b-popular {width: 60%; padding-left: 25px; border-left: 1px solid #ddd;}
.bt-title {margin-bottom: 15px;}
.bt-title h3 {font-size: 1.05rem; line-height: 1.2; font-weight: 700;}
.b-feat .thumb {margin-bottom: 15px;}
.b-feat img {width: 100%; height: auto; margin-bottom: -6px;}
.b-feat a .post-topic {font-size: .7rem; line-height: 1.2; font-weight: 500; text-transform: uppercase; color: #0e6be6; margin-bottom: 8px;}
.b-feat a h4 {font-size: 1.45rem; line-height: 1.35; font-weight: 600; color: #000; text-transform: none;}
.b-feat a:hover h4 {text-decoration: underline;}
.b-feat a .post-meta {font-size: .8rem; margin: 10px 0 12px;}
.b-feat p {font-size: .98rem; line-height: 1.45; color: #222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.feat-blog .swiper-button-prev, .feat-blog .swiper-button-next {width: 30px!important; height: 30px!important; top: 16px; background: none; box-shadow: none;}
.feat-blog .swiper-button-prev {right: 50px; left: inherit;}
.feat-blog .swiper-button-next {right: 20px;}
.feat-blog .swiper-button-prev::after {content: '\f060'; font-family: "Font Awesome 6 Pro"; font-weight: 500;}
.feat-blog .swiper-button-next::after {content: '\f061'; font-family: "Font Awesome 6 Pro"; font-weight: 500;}
.feat-blog .swiper-button-prev::after, .feat-blog .swiper-button-next::after {padding-top: 3px;}
.feat-blog .swiper-button-prev.b-prev.swiper-button-disabled {opacity: .3!important;}
.b-popular .bp {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.bp a {display: flex;}
.bp a .thumb {width: 35%;}
.bp a .thumb img {width: 100%; height: auto; margin-bottom: -5px;}
.bp a .info {width: 65%; padding-left: 15px;}
.bp a h4 {font-size: .92rem; line-height: 1.4; font-weight: 600; color: #000; text-transform: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom: 6px;}
.bp a:hover h4 {text-decoration: underline;}
.bp a .post-meta {font-size: .75rem;}
/* --------------------------------------------------
BLOG LIST
-------------------------------------------------- */
.b-page {width: 100%; position: relative; margin-bottom: 40px;}
.blog-list .box {display: flex; width: 100%; position: relative;}
.blog-list .ct-one {width: 100%;}
.blog-list .ct-two {margin-left: 40px;}
.bl-title {margin-bottom: 5px;}
.bl-title h3 {font-size: 1.3rem; line-height: 1.2; font-weight: 600;}
.blog-list .row {padding: 15px 0;}
.blog-list .row a {display: flex; column-gap: 25px;}
.blog-list .thumb {width: 45%;}
.blog-list .info {width: 55%;}
.blog-list .thumb img {margin-bottom: -5px;}
.blog-list a .post-topic {font-size: .7rem; line-height: 1.2; font-weight: 500; color: #0e6be6; text-transform: uppercase; margin-bottom: 10px;}
.blog-list a h4 {font-size: 1.45rem; line-height: 1.4; font-weight: 600; color: #000; text-transform: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;}
.blog-list a:hover h4 {text-decoration: underline;}
.blog-list a .post-meta {margin: 10px 0 15px;}
.blog-list a .excerpt p {font-size: .98rem; line-height: 1.4; color: #3a3a3a;}
.load-more-wrapper {margin-top: 30px; display: flex; justify-content: center;}
.load-more-btn {font-size: 1rem; line-height: 1.2; font-weight: 500; color: #222; border: 2px solid #222; padding: 10px 0; width: 200px; border-radius: 4px; cursor: pointer; display: block; transition: all 0.3s ease;}
.load-more-btn:hover {background: #222; color: #fff;}
.load-more-btn:disabled {background: #ccc; border-color: #ccc; cursor: not-allowed; transform: none;}
.blog-list .loading-spinner {color: #666; width: 30px; height: 30px; border: 2px solid #f3f3f3; border-top: 2px solid #0073aa;}
/* --------------------------------------------------
BLOG SINGLE
-------------------------------------------------- */
.sb {width: 100%; position: relative; margin-bottom: 30px;}
.sb .box, .sb-main {display: flex;}
.sb .ct-one {width: 100%;}
.sb .ct-two {margin-left: 60px;}
.sbt-top {padding: 0 5em 0 18em;}
.sb-title h1 {font-size: 2.2rem; line-height: 1.35; font-weight: 700;}
.s-meta {display: flex; align-items: center; justify-content: space-between; margin: 25px 0;}
.aut-img {max-width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 15px;}
.aut-meta {font-size: .875rem; line-height: 1.35; color: rgba(0,0,0,.6); width: 100%;}
.aut-meta a {color: #000; font-weight: 500;}
.aut-meta a:hover {text-decoration: underline;}
.aut-one {margin-bottom: 2px;}
.aut-two {font-size: .83rem;}
.aut-two span {font-size: .5rem; margin: 0 1px; vertical-align: 2px;}
.sb-thumb {position: relative;}
.sb-thumb img {width: 100%; height: auto; margin-bottom: -6px;}
.credit {font-size: .8rem; line-height: 1.2; font-weight: 300; color: rgba(255,255,255,.85); background: rgba(0,0,0,.3); padding: 8px 10px; position: absolute; bottom: 0; left: 0; display: inline-block;}
.credit a {font-weight: 400; color: #fff;}
.credit a:hover {text-decoration: underline;}
.sb-main {margin-top: 20px; gap: 40px;}
.sb-left {min-width: 250px; padding-top: 5px; transition: all 0.3s ease;}
.sbl-one {display: flex; flex-direction: column; gap: 22px;}
.sbl-one li {font-size: .78rem; line-height: 1.3; font-weight: 300; color: #3f3f3f;}
.sbl-one li strong {font-weight: 500; display: block; margin-bottom: 4px;}
.sbl-one li i {margin-right: 1px;}
.sbl-one li a {color: #222; font-weight: 500;}
.sbl-one li span {font-size: .5rem; margin: 0 1px; vertical-align: 2px;}
.l-aut {display: flex; align-items: center; gap: 8px;}
.l-aut .aut-img {max-width: 24px; height: 24px; margin: 0;}
.l-aut a {font-weight: 400; color: #000; text-transform: capitalize;}
.l-aut a:hover {text-decoration: underline;}
.sbl-two {margin-top: 20px;}
.sbl-two h4 {font-size: .74rem; line-height: 1.2; font-weight: 500; display: block; margin-bottom: 3px;}
.sbl-two ul {display: flex; flex-wrap: wrap; gap: 14px;}
.sbl-two li a {font-size: 1.1rem; color: #222;}
.sbl-two li a:hover {opacity: .6;}
.sb-more {margin-top: 30px; padding-top: 30px; border-top: 1px solid #ddd; position: relative;}
.sb-title h3 {font-size: 1.3rem; line-height: 1.2; font-weight: 700;}
.sb-more.blog-list .row:last-child {padding-bottom: 0;}
/* --------------------------------------------------
ENTRY CONTENT
-------------------------------------------------- */
.post-thumb {margin-bottom: 15px;}
.entry-content h2, .entry-content h3, .entry-content h4 {font-size: 1.25rem; line-height: 1.3; font-weight: 600; color: #222; margin-bottom: 15px; text-transform: capitalize;}
.entry-content h3, .entry-content h4 {margin-top: 30px;}
.entry-content p {margin-bottom: 15px;}
.entry-content p, .entry-content li {font-size: 1rem; line-height: 1.5; color: #222;}
.entry-content a {color: #154eb8; font-weight: 600;}
.entry-content a:hover {text-decoration: underline;}
.entry-content img {width: 100%; height: auto; margin-bottom: 15px;}
.entry-content ul, .entry-content ol {margin: 0 0 15px; padding-left: 30px;}
.entry-content li {padding: 1px 0; margin-bottom: 2px;}
.entry-content ul li {list-style: disc;}
.entry-content ol li {list-style: decimal;}
.entry-content .caption {color: #6f6f6f; font-size: .9rem; line-height: 1.3; margin-bottom: 25px; margin-top: -10px;}
.entry-content .sumber::before {content: '\f03e'; font-family: "Font Awesome 6 Pro"; font-weight: 900; margin: 0 3px 0 10px; vertical-align: -1.1px;}
.entry-content .sumber a {color: #0576F7;}
.entry-content .sumber a:hover {text-decoration: underline;}
.entry-content .quote {font-size: 1.2rem; line-height: 1.4; font-style: italic; font-weight: 500; margin: 20px; padding: 20px; border-left: 3px solid #34a853; position: relative; z-index: 2;}
.entry-content .quote::after {content: ''; background: url("images/quote.svg") no-repeat; background-size: contain; width: 130px; height: 130px; opacity: .05; position: absolute; right: 0; bottom: 0; z-index: 1;}
.entry-content .qname {display: block; font-weight: 300;}
.entry-content iframe {display: flex; margin: 0 auto;}
.galeri {display: flex; flex-wrap: wrap; margin: 0 -5px 10px;}
.galeri .item {width: 33.333333%; padding: 5px;}
.galeri .item a img {transition: .3s;}
.galeri .item a:hover img {opacity: .6;}
.wp-embedded-content {width: 100%!important;}
.twitter-tweet {margin: 0 auto 10px!important;}
.sharer {display: flex; flex-direction: column; align-items: center; margin-top: 30px;}
.sharer h4 {font-size: 1.1rem; line-height: 1.3; font-weight: 400; color: rgba(0,0,0,.86);}
.sharer .v-share {margin-top: 10px;}
.tag {margin-top: 15px;}
.tag span {font-size: .8rem; line-height: 1.3; margin: 5px 5px 0 0; color: #333; background: #f3f3f3; padding: 4px 12px; border-radius: 30px; display: inline-block;}
.tag span:last-child {margin-right: 0;}
/** END CONTENT **/
.end-content {margin: 20px 0 30px;}
.end-content .wrap {padding-top: 30px; border-top: 1px solid #ccc;}
.end-content .box {max-width: 900px; margin: 0 auto 20px;}
.end-content .ec-f {max-width: 640px; font-size: 1.7rem; line-height: 1.3; font-weight: 700; color: #222; text-align: center; margin: 0 auto 20px;}
.end-content .ec-f a {color: #ea0f38;}
.end-content .ec-f a:hover {text-decoration: underline;}
.subs-s {padding: 30px; background: #fff; border-radius: 10px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.subs-s h3 {font-size: 1.25rem; line-height: 1.2; text-transform: none;}
.subs-s h3 span {display: block;}
.subs-s p {font-size: .85rem; line-height: 1.3; color: #616161;}
.subs-s div.tnp-subscription {max-width: 100%!important;}
.subs-s form {display: flex; align-items: center;}
.subs-s .tnp-field label {display: none;}
.subs-s .tnp-field {width: 100%!important; float: none!important;}
.subs-s .tnp-field-email {margin: 0!important;}
.subs-s div.tnp-field-email input {font-size: 1rem!important; padding: 12px!important; background: #fff!important; border: 1px solid #a8a8a8!important; border-radius: 4px!important;}
.subs-s .tnp-field-email input:hover, .subs-s .tnp-field-email input:focus {border-color: #818080!important;}
.subs-s .tnp-field-button {width: 200px!important; margin-left: 6px; margin-bottom: 0!important;}
.subs-s .tnp-field-button input.tnp-submit {font-size: .9rem!important; font-weight: 500; padding: 14px 0; background: #ed264f!important; color: #fff!important; border-radius: 4px!important; cursor: pointer; margin: 0!important; width: 100%;}
.subs-s .tnp-field-button input.tnp-submit:hover {background: #ce1b40!important;}
.subs-s .trm {font-size: .75rem; line-height: 1.2; color: #616161;}
.subs-s .trm a {color: #195ce3; font-weight: 500;}
.subs-s .trm a:hover {text-decoration: underline;}
/* --------------------------------------------------
COMMENT AREA
-------------------------------------------------- */
.commentlist {margin: 20px 0 40px;}
.commentlist li {position: relative; border-bottom: 1px solid #e0e0e0; padding: 18px 0;}
.comment-wrapper {display: flex;}
.comment-edit-link {font-size: .65rem; line-height: 1.1; padding: 5px 8px; text-transform: uppercase; font-weight: 600; color: #222; border: 1px solid #ccc; border-radius: 3px; display: inline-block; position: absolute; right: 0;}
.cml-img {max-width: 46px; margin-right: 15px; position: relative;}
.cml-img img {width: 100%; height: auto; margin-bottom: -5px; border-radius: 50%;}
.cml-cnt {width: 100%;}
.cmt-meta {margin-bottom: 6px;}
.cmt-meta strong, .cmt-meta strong a {font-size: .94rem; line-height: 1.2; color: #222; font-weight: 600; text-transform: capitalize;}
.cmt-meta span {font-size: .76rem; line-height: 1.2; color: #5f6062; margin-left: 4px; display: inline-block;}
.cmt-meta strong a {color: #0e6be6;}
.cmt-meta strong a:hover {text-decoration: underline;}
.comment-wrp .rating-stars {margin-bottom: 6px; display: block;}
.comment-wrp .rating-stars i {font-size: .76rem;}
.comment-wrp {display: flex; flex-direction: column-reverse;}
.comment-wrp p {font-size: .96rem; line-height: 1.4; color: #313030; margin-bottom: 10px; word-wrap: break-word;}
.comment-wrp p:last-child {margin-bottom: 0;}
.commentlist .reply a {font-size: .8rem; font-weight: 600!important; color: #333;}
.commentlist .reply a:hover {color: #0968dc;}
.commentlist .reply a.comment-reply-link::before {content: "\f079"; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: .85rem; line-height: 1; margin-right: 5px; vertical-align: -1px;}
.reply-toggle {font-size: .8rem; line-height: 1.2; font-weight: 600; color: #065fd4; padding: 6px 10px; margin-left: 4px; border-radius: 20px; display: inline-block; cursor: pointer; transition: .3s;}
.reply-toggle:hover {background: #def1ff;}
.reply-toggle::before {content: "\f078"; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: .85rem; line-height: 1; margin-right: 5px; vertical-align: -.5px;}
.comment-children {margin-top: 5px; padding-left: 20px;}
.comment-children li {padding: 8px 0; border: none;}
.comment-children .cmt-meta {margin-bottom: 2px;}
.comment-children .cml-img {max-width: 40px;}
.comment-children .bypostauthor .cml-img img {border: 3px solid #0082fc;}
.comment-children .bypostauthor .cml-img::after {content: '\f00c'; font-family: "Font Awesome 6 Pro"; font-weight: 900; background: #0082fc; color: #fff; font-size: .4rem; width: 12px; height: 12px; bottom: 4px; right: 2px; padding-top: 2px; display: block; border-radius: 50%; text-align: center; position: absolute;}
.comment.highlighted {background-color: #ffffeb; transition: background-color 2s ease;}
/* --------------------------------------------------
COMMENT FORM
-------------------------------------------------- */
.comment-respond h3.comment-reply-title, .comment-title h3 {font-size: 1.3rem; line-height: 1.2; margin-bottom: 10px;}
.comment-respond h3.comment-reply-title small {display: block; margin-top: 10px;}
.comment-respond h3.comment-reply-title small a, .cancel-comment-reply a {color: #0478d1; font-weight: 600;}
.comment-respond h3.comment-reply-title small a:hover, .cancel-comment-reply a:hover {text-decoration: underline;}
.comment-title {margin-bottom: 20px;}
.comment-title h3 {margin-bottom: 10px;}
.commentlist #respond {padding: 20px 0;}
.commentlist .comment-title {margin-bottom: 10px;}
.cancel-comment-reply {margin-bottom: 10px;}
.cancel-comment-reply a {font-size: 1.1rem;}
.comment-form {width: 100%; display: block;}
.comment-notes, .comment-title p {font-size: .88rem;}
.comment-notes span, .comment-title span {color: #ff0000;}
.comment-respond .logged-in-as {font-size: .88rem; line-height: 1.3;}
.comment-respond .logged-in-as a {color: #0064e0; font-weight: 500;}
.comment-respond .logged-in-as a:hover {text-decoration: underline;}
.comment-respond .logged-in-as .required-field-message {display: block; margin-top: 10px;}
.comment-respond .logged-in-as .required {color: #ff0000;}
.comment-form p {margin-bottom: 12px;}
.cmt-box {display: flex; margin: 0 -8px 15px;}
.cmt-box .col {padding: 0 8px; width: 100%;}
.comment-form label {font-size: .96rem; line-height: 1.1; font-weight: 500; margin-bottom: 6px; display: block;}
.comment-form label span {color: #ff0000; font-weight: 500;}
.comment-form .cmt-label {display: flex; margin: 0 -10px;}
.comment-form .cmt-label p {width: 100%; padding: 0 10px;}
.comment-form input, .comment-form textarea {font-size: .98rem; line-height: 1; font-weight: 400; padding: 10px; border: 1px solid #a3a3a3; border-radius: 4px; width: 100%;}
.comment-form textarea {line-height: 1.4; height: 135px;}
.comment-form input:hover, .comment-form textarea:hover {border-color: #686868;}
.comment-form input:focus, .comment-form textarea:focus {border-color: #1961d9; z-index: 3;}
.comment-form-cookies-consent {display: flex; align-items: center; margin: -6px 0 20px!important;}
.comment-form-cookies-consent input {width: 12px; height: 12px; border: 1px solid #a3a3a3; padding: 0; margin: 0; cursor: pointer;}
.comment-form-cookies-consent label {font-size: .88rem!important; line-height: 1.2; font-weight: 400; color: #414141; margin: 0 0 0 5px; cursor: pointer;}
.comment-form .form-submit input, .cmt-submit input {background: #222; color: #fff; padding: 16px 0; font-size: 1.05rem; line-height: 1.2; font-weight: 600; display: block; width: 100%; text-align: center; cursor: pointer; border: none!important; border-radius: 4px;}
.comment-form .form-submit input:hover, .cmt-submit input:hover {background: #0478d1;}
.comment-form .form-submit input:focus, .cmt-submit input:focus {box-shadow: none;}
/* --------------------------------------------------
FOOTER
-------------------------------------------------- */
.footer {background: #fff; border-top: 1px solid #e4e5e7;}
.f-item {display: flex; width: 100%; position: relative; padding: 40px 0;}
.f-item .row-one {width: 60%; padding-right: 40px;}
.f-item .row-two {width: 40%; display: flex;}
.f-item .logo {margin-bottom: 10px;}
.ft-text h4 {font-size: 1rem; line-height: 1.4; font-weight: 600; margin-bottom: 6px;}
.ft-text p {font-size: .9rem; line-height: 1.35;}
.f-item .row-two .col {width: 50%; padding-left: 40px;}
.f-nav h3 {font-size: 1rem; line-height: 1; font-weight: 600; margin-bottom: 15px;}
.f-nav li {margin-bottom: 12px;}
.f-nav li:last-child {margin-bottom: 0;}
.f-nav li a {font-size: 1rem; line-height: 1.3; color: rgba(0,0,0,.8); display: block;}
.f-nav li a:hover {color: #0056d2;}
.f-nav li.f-abz a {margin-top: 10px; padding: 8px 18px; font-weight: 500; color: #222; border: 1px solid rgba(0,0,0,.8); border-radius: 4px; display: inline-block;}
.f-nav li.f-abz a:hover {border-color: #0056d2; color: #0056d2;}
.ft-sc {margin-top: 15px;}
.ft-sc ul {display: flex;}
.ft-sc li:first-child {margin-left: -6px;}
.ft-sc li a {width: 34px; height: 34px; font-size: 1.2rem; color: rgba(0,0,0,.8); background: none; padding-top: 4px; border-radius: 50%; display: block; text-align: center; transition: .3s;}
.ft-sc li a:hover {opacity: .6;}
.copyright {padding: 20px 0; border-top: 1px solid #ccc;}
.copyright .f-box {display: flex; flex-direction: column;}
.fcopy p {font-size: .85rem; line-height: 1.5; color: #000;}
.fcopy p a {font-size: .85rem; color: #000; font-weight: 500;}
.fcopy p a:hover {text-decoration: underline;}
.btm-link {margin-top: 6px;}
.btm-link a {font-size: .85rem; line-height: 1.2; color: #000;}
.btm-link a:hover {text-decoration: underline;}
.btm-link span {margin: 0 3px; font-size: .5rem; color: rgba(0,0,0,1.00); vertical-align: 2.5px;}
/* --------------------------------------------------
MENU MOBILE
-------------------------------------------------- */
.b-menu {margin-left: -7px; margin-right: 12px;}
.b-menu a {width: 34px; height: 34px; display: block; padding: 5px;}
.c-offcanvas--left button.js-offcanvas-close {top: 0; right: 0;}
.bb-start {padding: 10px 30px 20px 20px;}
.bb-start a {font-size: .95rem; line-height: 1; font-weight: 600; color: #333; padding: 8px 0; display: block;}
.bb-start a.btn-one {color: #222;}
.bb-start a.btn-two {color: #0e6be6; border: 1px solid #0e6be6; padding: 10px 14px; margin-top: 5px; border-radius: 4px; display: inline-block;}
.bb-dash a {color: #0e6be6; border: 1px solid #0e6be6; padding: 10px 14px; border-radius: 4px; display: inline-block;}
.bb-dash a i {font-size: .85rem; margin-right: 2px;}
.bb-nav {padding: 20px 20px 12px; border-top: 1px solid #ddd;}
.bb-title {margin-bottom: 12px;}
.bb-title h4 {font-size: .98rem; line-height: 1; font-weight: 600; color: #222;}
.bb-nav ul li a {font-size: 1.05rem; line-height: 1.2; color: #333; padding: 8px 0; display: block; width: 100%;}
button.js-offcanvas-close {padding: 8px!important; background: none; margin: 0; width: 32px; height: 32px; position: absolute; top: 0; right: 0;}
/* -------------------------------------------------- 
HP ACCOUNT RIGHT
-------------------------------------------------- */
.r-canv ul {margin-bottom: 5px;}
.r-canv li a, .r-canv .disabled span {display: block; width: 100%; font-size: .96rem; line-height: 1.1; font-weight: 400; padding: 10px 20px; color: #222;}
.r-canv li.up-pre a {font-weight: 600;}
.r-canv li.up-pre a i {color: #fecf33;}
.r-canv li.sep {border-top: 1px solid #ddd; margin: 5px 0;} 
.r-canv .disabled span {color: rgba(0,0,0,.35);}
/* -------------------------------------------------- 
BREADCRUMB
-------------------------------------------------- */
#breadcrumbs {margin-bottom: 15px;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
#breadcrumbs span, #breadcrumbs a {font-size: .78rem; color: #555;}
#breadcrumbs a {font-weight: 500; color: #555;}
#breadcrumbs a:hover {text-decoration: underline;}
#breadcrumbs i {font-size: .5rem; margin: 0 3px; color: #a1a1a1; vertical-align: .5px;}
/* --------------------------------------------------
PAGINATION
-------------------------------------------------- */
.WPpagi {margin: 10px 0;}
.wp-pagenavi {width: 100%; position: relative; gap: 5px; display: flex; justify-content: center; align-items: center;}
.wp-pagenavi span, .wp-pagenavi a {color: #74767e; font-size: 1rem; line-height: 1; font-weight: 500; width: 25px; height: 25px; margin: 0 2px!important; display: flex; align-items: center; justify-content: center; border: none!important; padding: 0!important;}
.wp-pagenavi span.extend {margin: 0!important;}
.wp-pagenavi a.first, .wp-pagenavi a.last {display: none;}
.wp-pagenavi a:hover {color: #222325;}
.wp-pagenavi span.current {color: #222325; font-weight: 600;}
.wp-pagenavi span.current::after {content: ''; width: 16px; border-bottom: 2px solid #222325; position: absolute; bottom: 0; display: block;} 
.wp-pagenavi .pages {display: none;}
.wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink {font-size: 1rem; width: 42px; height: 42px; border-radius: 50%;}
.wp-pagenavi a.nextpostslink:hover, .wp-pagenavi a.previouspostslink:hover {background: #f5f5f5;}
/* --------------------------------------------------
COMMENT RATING
-------------------------------------------------- */
#stars-rating-review {display: flex; justify-content: center; padding: 15px; border: 2px dashed #ddd; border-radius: 4px; margin: 20px 0 30px;}
#stars-rating-review .br-widget a.br-selected:after, #stars-rating-review .br-widget a.br-active:after {content: "\f005"; color: #faca15!important;}
#stars-rating-review .br-widget a:after, #stars-rating-review .br-widget a.br-selected:after, #stars-rating-review .br-widget a.br-active:after {font-size: 1.4rem;}
#stars-rating-review .br-widget {margin: 0; height: inherit!important; text-align: center;}
#stars-rating-review .br-widget::before {content: 'How would you rate this business?'; display: block; font-size: .95rem; line-height: 1.2; margin-bottom: 6px; text-align: center;}
#stars-rating-review .br-widget a {margin-right: 6px!important;}
.rating-stars i.rated:after {color: #faca15!important;}
.stars-avg-rating {font-size: inherit!important;}
.stars-avg-rating .avg {font-weight: 600;}
/* --------------------------------------------------
CF7
-------------------------------------------------- */
.cf-info {margin-bottom: 30px; font-size: .98rem; line-height: 1.4;}
.cf-info h4 {font-size: 1.1rem; line-height: 1.3; margin-bottom: 5px;}
.cf-info strong {font-weight: 600;}
.wpcf7-form br {display: none!important;}
.wpcf7-form .row {margin-bottom: 20px; position: relative;}
.wpcf7-form .row p {position: relative;}
.wpcf7-form .ff-note {font-size: .815rem; font-weight: 400; color: rgba(0,0,0,.65); margin-top: 6px; display: block;}
.wpcf7-form label {display: block; font-size: .93rem; line-height: 1.2; font-weight: 600; margin-bottom: 8px;}
.wpcf7-form label .required {color: #ff0000; font-weight: 700;}
.wpcf7-form .row input, .wpcf7-form .row textarea, .wpcf7-form select {width: 100%; padding: 12px 14px; font: .98rem 'Inter', sans-serif; line-height: 1.2; font-weight: 400; background: #fff; border: 2px solid #d4d8dc; border-radius: 5px; outline: none!important;}
.wpcf7-form .row textarea {line-height: 1.4!important; height: 180px;}
.wpcf7-form .row input.wpcf7-date {padding: 11px 12px;}
.wpcf7-form .row input:hover, .wpcf7-form .row textarea:hover {border-color: rgba(0,0,0,.4);}
.wpcf7-form .row input:focus, .wpcf7-form .row textarea:focus {border-color: #000;}
.wpcf7-form .button {position: relative; margin-top: 5px;}
.wpcf7-form .button input {background: #000; color: #fff; font-size: 1rem; line-height: 1.2; text-transform: capitalize; font-weight: 600; padding: 16px 0; text-align: center; width: 100%; display: block; border-radius: 4px; cursor: pointer; border: none;}
.wpcf7-form .button input:hover {background: #1d1d1d;}
.wpcf7-form .button input:focus {box-shadow: none;}
.wpcf7-form .row.selct {position: relative;}
.wpcf7-form .row.selct::after {content: "\f078"; font-family: "Font Awesome 6 Pro"; font-weight: 500; font-size: .85rem; position: absolute; right: 10px; top: 39px; pointer-events: none;}
.file-upload {margin-bottom: 20px;}
.file-label {display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #333;}
.file-upload input[type="file"],
.file-upload .wpcf7-file,
.file-upload .file-input {cursor: pointer !important;}
.file-upload .wpcf7-form-control-wrap {position: relative; display: block; min-height: 50px;}
.file-upload input[type="file"] {position: absolute; opacity: 0; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer !important; z-index: 10;}
.file-upload .wpcf7-form-control-wrap::before {content: ''; display: block; width: 100%; height: 50px; background: #f8f9fa; border: 2px dashed #dee2e6; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; position: relative;}
.file-upload .wpcf7-form-control-wrap::after {content: '📄 Upload SSM Copy (required)'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; color: #495057; pointer-events: none; z-index: 5; font-weight: 500; white-space: nowrap; transition: .3s;}
.file-upload .wpcf7-form-control-wrap:hover::after {color: #007bff;}
.file-upload .wpcf7-form-control-wrap.has-file::before {background: #d4edda; border-color: #28a745; border-style: solid;}
.file-upload .wpcf7-form-control-wrap.has-file::after {content: '✓ File selected'; color: #28a745;}
.file-upload .selected-filename {display: block; margin-top: 8px; font-size: 13px; color: #28a745; font-weight: 500;}
.ff-note {margin-top: 6px; font-size: 12px; color: #6c757d; font-style: italic;}
.file-upload input[type="file"]:focus + .wpcf7-form-control-wrap::before {outline: 2px solid #007bff; outline-offset: 2px;}
.wpcf7-checkbox {display: flex; gap: 20px;}
.wpcf7-list-item {margin: 0!important;}
.wpcf7-list-item label {font-weight: 400; cursor: pointer; display: flex; align-items: center; margin-bottom: 0;}
.wpcf7-list-item label input {width: 14px!important; height: 14px!important; padding: 0!important; margin: 0 6px 0 0!important; cursor: pointer;}
.wpcf7-form .row input[readonly] {background-color: #f5f5f5; color: #666; cursor: not-allowed; border-color: #ddd!important;}
.wpcf7-form .wpcf7-acceptance {margin-bottom: 10px; display: block;}
.wpcf7-form .wpcf7-acceptance label {font-size: .86rem!important; line-height: 1.3;}
.wpcf7-form .wpcf7-acceptance label input {width: 12px!important; height: 12px!important;}
.wpcf7 .wpcf7-submit:disabled, .wpcf7 .wpcf7-submit:disabled:hover {background: #ccc;}
.wpcf7-select::-ms-expand {display: none;}
.wpcf7-spinner {position: absolute!important; top: 12px; right: 0;}
input.wpcf7-not-valid {border-color: #e54b4d!important; background-color: #fcecec !important;}
.wpcf7-response-output {text-align: center; padding: 0 20px!important; margin: 15px 0 0!important;}
.wpcf7 form.sent .wpcf7-response-output {border: none; font-size: .9rem; line-height: 1.35; color: #46b450;}
.wpcf7 form.invalid .wpcf7-response-output {border: none; font-size: .9rem; line-height: 1.35; color: #ff0000;}
.wpcf7-not-valid-tip {display: none!important;}
.wpcf7 .cf-btm {margin-top: 10px; font-size: .86rem; line-height: 1.3; color: #444;}

.wpcf7 {
  position: relative;
}

.wpcf7.is-loading form {
  filter: blur(3px);
  pointer-events: none;
  opacity: 0.6;
}

/* Overlay */
.wpcf7-loading-overlay,
.wpcf7-error-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 8px;
  text-align: center;
  padding: 20px;
}

/* Spinner */
.cf7-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #ccc;
  border-top-color: #0a3ee8;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Success */
.cf7-success-message {padding: 30px; font-size: .95rem; line-height: 1.4; font-weight: 500; color: #00a63e; background: #f8faf9; border: 1px solid #cfead9; border-radius: 12px; text-align: center; }
.cf7-success-message .icon {font-size: 2.6rem; color: #2ecc71; margin-bottom: 10px;}

/** JOBS FORM **/
.wpcf7-form .row.f-salary input {padding-left: 38px;}
.wpcf7-form .row.f-salary .wpcf7-form-control-wrap::before {content: "RM"; font-size: .98rem; font-weight: 600; top: -1.4px; left: 12px; position: absolute;}
.file-resume input {padding: 0!important; border: none!important; outline: none!important; border-radius: 0;}
.p-form .box {display: flex; margin: 0 -10px;}
.p-form .box .row {width: 50%; padding: 0 10px; margin-bottom: 20px;}
.p-form .select {width: 100%; line-height: 1; display: block;}
.p-form .select::after {top: 34px!important;}
.p-form .box .select::after {right: 20px;}
/* --------------------------------------------------
POPUP MODAL
-------------------------------------------------- */
.moverlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); z-index: 999;}
.modal {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 8px; z-index: 9999;}
.closeModal {position: absolute; background: none;}
.closeModal img {width: 40px; height: 40px; padding: 12px; filter: invert(43%) sepia(9%) saturate(270%) hue-rotate(188deg) brightness(87%) contrast(89%); transition: .3s;}
.vsshare {width: 720px; padding: 4em 3em;}
.vsshare .closeModal {top: 5px; right: 5px; }
.vsshare h4, .vsshare p {text-align: center;}
.vsshare h4 {font-size: 1.4rem; line-height: 1.2; font-weight: 600; margin-bottom: 8px;}
.vsshare p {font-size: 1rem; line-height: 1.3; font-weight: 300; color: #7e8085;}
.v-share {margin: 30px 0 25px; display: flex; justify-content: center; gap: 25px;}
.v-share li {}
.v-share a {font-size: .85rem; line-height: 1.1; color: #62646a; text-align: center; display: flex; flex-direction: column; align-items: center;}
.v-share a:hover {opacity: .65;}
.v-share i {width: 54px; height: 54px; font-size: 1.6rem; line-height: 1; color: #fff; padding-top: 14px; text-align: center; margin-bottom: 12px; display: block; border-radius: 50%;}
.v-share a.vss-fb i {background: #4267b2;}
.v-share a.vss-thread i {background: #000;}
.v-share a.vss-twitter i {background: #000;}
.v-share a.vss-wsp i {background: #00a500;}
.v-share a.vss-in i {background: #007ebb;}
.v-share a.vss-tele i {background: #0088cc;}
.vss-copy {width: 100%; display: flex; flex-direction: column; justify-content: center;}
.vss-c {display: flex; width: 100%;}
.vss-copy input {width: 100%; padding: 12px; border: 1px solid #ccc; font-size: .94rem; line-height: 1; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.vss-copy button {min-width: 120px; font-size: .92rem; line-height: 1; font-weight: 600; padding: 12px; background: #222; color: #fff; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.vss-copy button:hover {background: #000;}
.vss-copy #copy-message {margin-top: 5px; font-size: .9rem; line-height: 1; color: #27b530; text-align: center;}
/** POPUP REPORT 2 **/
.report {width: 500px; background: #fff; padding: 30px 20px 20px; border-radius: 8px;}
.report .closeModal {top: 0; right: 0;}
.modal-item {overflow-y: auto;}
.md-title {max-width: 400px; margin: 0 auto 20px;}
.md-title h4 {font-size: 1.35rem; line-height: 1.4; font-weight: 700; text-align: center;}
.md-form .wpcf7-form .row {margin-bottom: 14px;}
.md-form .wpcf7-form .row input {padding: 10px;}
.md-form .wpcf7-form .row select {padding: 10px;}
.md-form .wpcf7-form .row.fr-msg {margin-bottom: 8px;}
.md-form .wpcf7-form .row.fr-msg textarea {height: 96px; font-size: .98rem;}
/* --------------------------------------------------
OFF CANVAS
-------------------------------------------------- */
.c-offcanvas{transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index: 9999!important;}.c-offcanvas-bg.c-offcanvas-bg--push,.c-offcanvas-bg.c-offcanvas-bg--reveal,.c-offcanvas-content-wrap,.c-offcanvas{transition:transform 300ms cubic-bezier(0.4,0,0.6,1)}.c-offcanvas.is-open{transform:translate3d(0,0,0);visibility:visible}.c-offcanvas-content-wrap{z-index:3}.c-offcanvas{position:fixed;min-height:100%;max-height:none;top:0;display:block;background:#fff;overflow-x:hidden;overflow-y:auto}.c-offcanvas--opening{transition-timing-function:cubic-bezier(0.4,0,0.6,1)}.c-offcanvas.is-closed{max-height:100%;overflow:hidden;visibility:hidden;box-shadow:none}.c-offcanvas--overlay{z-index:1080}.c-offcanvas--reveal{z-index:2}.c-offcanvas-bg{position:fixed;top:0;height:100%;width:100%;z-index:1079;left:-100%;background-color:transparent;transition:background-color 400ms cubic-bezier(0.23,1,0.32,1) 0}.c-offcanvas-bg.is-animating,.c-offcanvas-bg.is-open{left:0;background-color:rgba(0,0,0,0.68);visibility:visible}.c-offcanvas-bg.is-closed{visibility:hidden}.c-offcanvas-bg--closing.is-animating{background:transparent}.c-offcanvas--left{height:100%;width:250px;transform:translate3d(-250px,0,0)}.c-offcanvas--right{height:100%;width:220px;right:0;transform:translate3d(220px,0,0)}.c-offcanvas--top{left:0;right:0;top:0;height:12.5em;min-height:auto;width:100%;transform:translate3d(0,-12.5em,0)}.c-offcanvas--bottom{top:auto;left:0;right:0;bottom:0;height:100%;min-height:auto;width:100%;transform:translate3d(0,100%,0)}.c-offcanvas-content-wrap{z-index:3}.c-offcanvas-content-wrap--reveal.c-offcanvas-content-wrap--left.is-open{transform:translate3d(17em,0,0)}.c-offcanvas-content-wrap--reveal.c-offcanvas-content-wrap--right.is-open{transform:translate3d(-17em,0,0)}.c-offcanvas--reveal{z-index:0;transform:translate3d(0,0,0)}.c-offcanvas-bg.c-offcanvas-bg--reveal.c-offcanvas-bg--left.is-open{transform:translate3d(17em,0,0)}.c-offcanvas-bg.c-offcanvas-bg--reveal.c-offcanvas-bg--right.is-open{transform:translate3d(-17em,0,0)}.c-offcanvas--push{z-index:6}.c-offcanvas--push--opening{transition-timing-function:cubic-bezier(0,0,0.2,1)}.c-offcanvas-content-wrap{z-index:3}.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--left.is-open{transform:translate3d(17em,0,0)}.c-offcanvas-content-wrap--push.c-offcanvas-content-wrap--right.is-open{transform:translate3d(-17em,0,0)}.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--left.is-open{transform:translate3d(17em,0,0)}.c-offcanvas-bg.c-offcanvas-bg--push.c-offcanvas-bg--right.is-open{transform:translate3d(-17em,0,0)}
/* -------------------------------------------------- 
TOOLTIP
-------------------------------------------------- */
.tooltip {position: relative; display: inline-block; text-decoration: none; color: inherit;}
.tooltip::after {font-size: .76rem; padding: 6px 10px; background: #333; color: #fff; bottom: 130%; left: 50%; border-radius: 4px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; content: attr(title); position: absolute; transform: translateX(-50%); z-index: 10;}
.tooltip::before {content: ""; bottom: 74%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #333 transparent transparent transparent; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; position: absolute;}
.tooltip:hover::after, .tooltip:hover::before {opacity: 1; visibility: visible;}
/* -------------------------------------------------- 
404
-------------------------------------------------- */
.notfound {padding: 5em 0;}
.notfound h1 {font-size: 15rem; line-height: 1.1; font-weight: 700;}
.notfound p {font-size: 1.2rem; line-height: 1.2;}
/* --------------------------------------------------
ADD ON
-------------------------------------------------- */
.clearfix {clear: both;}
.video , .maps {overflow: hidden; padding-bottom: 50%; position: relative; height: 0;}
.video iframe, .video object, .video embed {position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%;}
.entry-content .video {margin-bottom: 20px;}
.maps {margin-bottom: 0;}
.fb {color: #4267b2;}
.twit {color: #55acee;}
.ig {color: #f24d58;}
.pin {color: #e60023;}
.utube {color: #ff0000;}
.whatsapp {color: #00a500;}
.tele {color: #0088cc;}
.fb-ico {background: #0080ff;}
.thread-ico {background: #000;}
.twit-ico {background: #000;}
.ig-ico {background: #d6249f; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);}
.pin-ico {background: #cc2127;}
.in-ico {background: #0077b5;}
.utube-ico {background: #ff0000;}
.tiktok-ico {background: #000;}
.whatsapp-ico {background: #00a500;}
.web-ico {background: #a67c52;}
.tele-ico {background: #0088cc;}
.messenger-ico {background: #007fff;}
.vim-ico {background: #19b2e5;}
.beh-ico {background: #1d63f8;}
.dis-ico {background: #5865f2;}
/* --------------------------------------------------
 FAQ
-------------------------------------------------- */
.faq-title {margin-bottom: 15px;}
.faq-title h3 {font-size: 1.2rem; line-height: 1.2; font-weight: 600;}
.faq-sec {margin-bottom: 30px;}
.faq-item {border: 1px solid #d5dce5; border-radius: 6px; margin-bottom: 10px; transition: .3s;}
.faq-item:hover {border-color: #ccc;}
.faq-item.active {border-color: #ccc; box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;}
.faq-q {padding: 16px 40px 16px 16px; position: relative; cursor: pointer;}
.faq-q h4 {font-weight: 600; display: inline;}
.faq-q i {position: absolute; right: 12px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease;}
.faq-item.active .faq-q i {transform: translateY(-50%) rotate(180deg);}
.faq-a {padding: 0 16px 16px;}
.faq-q h4, .faq-q p {font-size: .93rem; line-height: 1.4;}
.faq-a p {font-size: .98rem; line-height: 1.4; margin-bottom: 14px;}
.faq-a p em {font-size: .9rem;}
.faq-a p:last-child {margin-bottom: 0;}
.faq-a ul, .faq-a ol {padding-left: 20px; margin-bottom: 15px;}
.faq-a ul:last-child, .faq-a ol:last-child {margin-bottom: 0;}
.faq-a ul li, .faq-a ol li {font-size: .96rem; line-height: 1.4;}
.faq-a ul li {list-style: disc;}
.faq-a ol li {list-style: decimal;}
.faq-a a {color: #154eb8;}
.faq-a a:hover {text-decoration: underline;}
.faq-a p strong, .faq-a li strong {font-weight: 500;}
/* --------------------------------------------------
 HOME FAQ
-------------------------------------------------- */
.h-fq .faq-item {border: none; border-radius: 0;}
.h-fq .faq-item:hover {border-color: none;}
.h-fq .faq-item.active {border-color: none; box-shadow: none;}
.h-fq .faq-q {padding: 12px 40px 12px 0;}
.h-fq .faq-a {padding: 0;}
.h-fq .faq-q h4, .h-fq .faq-a p {font-size: .98rem; line-height: 1.4;}
/* --------------------------------------------------
 ANIMATION
-------------------------------------------------- */
.loading {position: relative; overflow: hidden;}
.loading::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: loading-shimmer 1.5s infinite;}
@keyframes loading-shimmer {
0% {transform: translateX(-100%);}
100% {transform: translateX(100%);}
}
@keyframes slideDown {
from {transform: translateY(-100%); opacity: 0;}
to {transform: translateY(0); opacity: 1;}
}
@keyframes spin {
0% {transform: translate(-50%, -50%) rotate(0deg);}
100% {transform: translate(-50%, -50%) rotate(360deg);}
}
@keyframes fadeIn {
from {opacity: 0; transform: translate(-50%, -55%);}
to {opacity: 1; transform: translate(-50%, -50%);}
}
@keyframes scroll-left {
0% { transform: translateX(0); } 100% { transform: translateX(-50%); }
}
@keyframes scroll-right {
0% { transform: translateX(-50%); } 100% { transform: translateX(0); }
}
/** FIREFOX FIX **/
.user-list {scrollbar-width: thin; scrollbar-color: #7f7f7f #f1f1f1;}