/*
Theme Name: Custom Theme
Theme URI: https://jaringdigital.com
Description: Custom WordPress Theme
Author: Jaring Digital
Author URI: https://jaringdigital.com
Version: 1.0
License: GPL
License URI: http://www.gnu.org/copyleft/gpl.html
*/

/* -------------------------------------------------- 
BASIC STYLES
-------------------------------------------------- */
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: #444; 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;}
input::placeholder {color: #adadad; opacity: 1;}
.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.4em center; background-size: 18px; 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 {background: url('images/chev-down.svg') no-repeat; background-size: 10px; width: 10px; height: 10px; color: #222; position: absolute; top: 37%; right: 10px; cursor: pointer; pointer-events: none; transition:.25s all ease; content: '';}
.select:hover::after {color: #23b499;}
.required {color: #ff0000;}
::-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, textarea, button, button:hover, a i, a:hover i,.thumb a img, .thumb a:hover img, a:hover .thumb img, a .thumb img, .close img, .close img:hover, a .thumb::before, a:hover .thumb::before, .b-menu a, .b-menu a:hover {text-decoration: none; -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 {-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; color: #222; letter-spacing: -.02em; margin: 0; padding: 0;}
ul, li, ol {list-style: none; margin: 0; padding: 0;}
p {margin: 0;}
li, p, input, textarea, select, button {letter-spacing: -.02em;}
body, input, textarea, select, button {font-family: 'Inter', Helvetica Neue, Helvetica, Arial, "sans-serif"!important;}
button, select {cursor: pointer;}
button {border: none; padding: 0; box-shadow: 0; background: none;}
/* --------------------------------------------------
LAYOUT CONTROL
-------------------------------------------------- */
.control {max-width: 1300px; margin: 0 auto; position: relative; padding: 0 20px;}
.sec {width: 100%; position: relative;}
.thumb img {width: 100%; height: auto; margin-bottom: -5px;}
.js-offcanvas, .b-menu, .fancybox-caption-wrap {display: none;}
/* --------------------------------------------------
ELEMENTOR FIX
-------------------------------------------------- */
.elementor-widget-text-editor p {margin-bottom: 15px!important;}
.elementor-widget-text-editor p strong {font-weight: 600;}
.elementor-widget-text-editor a {color: #2836e5; 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;}
.text-one a {color: #fff;}
.text-two a {color: #000; font-weight: 400;}
.text-one a:hover, .text-two a:hover {text-decoration: none;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 3px!important;}
.elementor-counter .elementor-counter-number-suffix {font-size: 2.4rem; line-height: 1.5; margin-left: 2px;}
.i-btn a i {font-size: .55rem;}
.i-btn .elementor-button-icon .e-font-icon-svg {height: .7em!important;}
.swiper-button-prev, .swiper-button-next {width: 44px!important; height: 44px!important; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50%; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.swiper-button-prev:after, .swiper-button-next:after {font-size: 1.2rem!important; color: #000;}
.swiper-button-prev:after {margin-right: 2px;}
.swiper-button-next:after {margin-left: 2px;}
/* -------------------------------------------------- 
BREADCRUMB
-------------------------------------------------- */
#breadcrumbs span, #breadcrumbs a {font-size: .8rem; color: #fff;}
#breadcrumbs a {font-weight: 600; color: #fff;}
#breadcrumbs a:hover {text-decoration: underline;}
#breadcrumbs i {font-size: .5rem; margin: 0 5px; color: #a1a1a1; vertical-align: .5px;}
/* --------------------------------------------------
HEADER
-------------------------------------------------- */
.head {padding: 15px 0; background: #fff; border-bottom: 1px solid #ddd; width: 100%; position: relative; z-index: 3;}
.h-box {display: flex; justify-content: space-between; align-items: center;}
.l-head {display: flex; align-items: center; gap: 40px;}
.r-head {display: flex; align-items: center; gap: 20px;}
.logo-head img {height: auto; margin-bottom: -6px;}
/* --------------------------------------------------
FOOTER
-------------------------------------------------- */
.footer {padding: 30px 0; background: #000; position: relative; width: 100%;}
.copy p {font-size: .9rem; line-height: 1.3; color: #fff;}
.f-note {margin-top: 10px; max-width: 84%;}
.f-note p {font-size: .785rem; line-height: 1.35; color: #d4d4d5;}
/* --------------------------------------------------
NAVIGATION
-------------------------------------------------- */
#cssmenu {display: block; padding: 0; margin: 0;}
#cssmenu > ul {padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; gap: 28px;}
#cssmenu > ul > li {padding: 0; margin: 0; display: block; position: relative; list-style: none;}
#cssmenu > ul > li > a {padding: 10px 0; font-size: 1.1rem; line-height: 1.2; font-weight: 500; text-decoration: none; display: block; position: relative; transition: .3s ease-in-out;}
#cssmenu > ul > li.has-sub > a {display: flex; gap: 4px;}
#cssmenu > ul > li.has-sub > a:after {margin-top: 5px; -webkit-mask: url('images/chev-down.svg') no-repeat center; mask: url('images/chev-down.svg') no-repeat center; -webkit-mask-size: contain; mask-size: contain; width: 11px; height: 11px; position: relative; transition: .3s ease-in-out; content: '';}
#cssmenu .submenu-wrap {width: 230px; padding: 5px 0; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; opacity: 0; visibility: hidden; position: absolute; top: 90%; left: -16px; z-index: 99; transition: all .25s ease-in-out;}
#cssmenu li.has-sub:hover > .submenu-wrap {opacity: 1; visibility: visible; top: calc(100%);}
#cssmenu .submenu-wrap ul {display: flex; flex-direction: column; margin: 0; list-style: none;}
#cssmenu .submenu-wrap ul li {width: 100%; padding: 0; margin: 0; display: block; position: relative;}
#cssmenu .submenu-wrap ul li a {padding: 8px 15px; margin: 0; font-size: 1rem; line-height: 1.2; font-weight: 500; text-transform: capitalize; text-decoration: none; display: block; position: relative; transition: all .2s ease-in-out;}
#cssmenu > ul > li > a {color: #2F3D38;}
#cssmenu > ul > li.has-sub > a:after {background-color: #000;}
#cssmenu > ul > li > a:hover, #cssmenu > ul > li.has-sub:hover > a {color: #3845ee;}
#cssmenu > ul > li.has-sub > a:hover:after {background-color: #000;}
#cssmenu .submenu-wrap ul li a {color: #000;}
#cssmenu .submenu-wrap ul li a:hover {color: #0a54d7;}
/* --------------------------------------------------
PAGE
-------------------------------------------------- */
.page-main {padding: 30px 0 60px;}
.p-title {margin-bottom: 30px;}
.p-title h1, .p-title h2 {font-size: 3.4rem; line-height: 1.1; text-transform: capitalize;}
.post-edit-link {position: fixed; left: 20px; bottom: 20px; font-size: .75rem; font-weight: 500; color: #fff; background: #36980a; text-transform: uppercase; width: 50px; height: 50px; border-radius: 50%; display: block; padding-top: 17px; text-align: center; z-index: 999;}
.page-content h2, .page-content h3, .page-content h4 {margin: 25px 0 10px;}
.page-content h2:first-child {margin-top: 0;}
.page-content h2 {font-size: 1.3rem; line-height: 1.4; text-transform: uppercase; text-decoration: underline;}
.page-content h3 {font-size: 1.12rem; line-height: 1.4;}
.page-content h4 {font-size: 1.1rem; line-height: 1.4;}
.page-content p {margin-bottom: 10px; word-wrap: break-word;}
.page-content p, .page-content ul li, .page-content ol li {font-size: 1rem; line-height: 1.35; color: #222;}
.page-content a {color: #0A54D7; font-weight: 600;}
.page-content a:hover {text-decoration: underline;}
.page-content ul, .page-content ol {margin: 0 0 15px; padding-left: 30px;}
.page-content ol li {list-style: decimal;}
.page-content ul li {list-style: disc;}
.page-content ul li, .page-content ol li {padding: 1px 0; word-wrap: break-word; margin-bottom: 2px;}
.o-page .box {display: grid; grid-template-columns: 250px 1fr; gap: 40px;}
.o-page .control {}
.st-title {margin: 12px 0 12px;}
.st-title h3 {font-size: 1.1rem; line-height: 1.2;}
.st-nav ul {display: flex; flex-direction: column; gap: 6px;}
.st-nav ul li a {font-size: 1rem; line-height: 1.3; color: #333;}
.st-nav ul li a:hover {color: #0A54D7;}
.page-sep {margin: 40px 0; width: 100%; height: 1px; background: #ccc; display: block;}
/* -------------------------------------------------- 
BLOG LIST
-------------------------------------------------- */
.post-meta ul {display: flex; align-items: center; gap: 10px;}
.post-meta ul li {font-size: .85rem; line-height: 1.2; color: #777777;}
.post-meta ul li a {color: #777777;}
.post-meta ul li a:hover {color: #333;}
.post-meta ul li::before {content: ''; height: 10px; border: 1px solid #e5e5e5; margin-right: 10px; display: inline-block;}
.post-meta ul li:first-child::before {display: none;}
.post-meta span {font-size: .5rem;}
.b-list a .thumb {border: 1px solid rgba(100, 100, 100, .15); border-radius: 8px; overflow: hidden;}
.b-list .info {margin-top: 20px;}
.b-list a h3 {font-size: 1.6rem; line-height: 1.4; font-weight: 600; text-transform: none; color: #333; transition: .3s;}
.b-list a:hover h3 {color: #0A54D7}
.b-list a .excerpt {margin: 10px 0 25px;}
.b-list a .excerpt p {color: #333; font-size: 1.05rem; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;.post-meta ul}
.b-list a .btn {font-size: .95rem; line-height: 1.2; color: #3845ee; font-weight: 600; margin-top: 12px; display: flex; align-items: center;}
.b-list a .btn svg {width: 12px; height: 12px;}
.more-btn {margin-top: 30px;}
.more-btn a {padding: 12px 30px; font-size: .95rem; line-height: 1; font-weight: 500; color: #000; border: 1px solid #666; display: inline-block; border-radius: 4px;}
.more-btn a span {display: flex; align-items: center; gap: 4px;}
.more-btn a svg {width: 10px; height: 10px;}
.more-btn a:hover {border-color: #000;}
.b-list .swiper-button-next, .b-list .swiper-button-prev {width: 38px!important; height: 38px!important; background: #fff; top: -38px; display: block; box-shadow: none; border-radius: 0; transition: .3s;}
.b-list .swiper-button-prev {right: 40px; left: inherit;}
.b-list .swiper-button-next {right: 0;}
.b-list .swiper-button-next:after, .b-list .swiper-button-prev:after {color: #222; padding-top: 1px; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.b-list .swiper-button-prev:after {content: ''; background: url('images/arrow-left.svg') no-repeat center; background-size: 22px;}
.b-list .swiper-button-next:after {content: ''; background: url('images/arrow-right.svg') no-repeat center; background-size: 22px;}
.b-list .swiper-button-next.swiper-button-disabled, .b-list .swiper-button-prev.swiper-button-disabled {opacity: .3!important;}
.b-list .bs-box {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 35px; grid-row-gap: 60px;}
/* -------------------------------------------------- 
BLOG SINGLE
-------------------------------------------------- */
.bs .bs-box {display: grid; grid-template-columns: 1fr 300px; gap: 40px;}
.sb-top {margin-bottom: 40px;}
.sb-top h1 {font-size: 2.75rem; line-height: 1.35; font-weight: 600; text-transform: none;}
.sb-top .post-meta {margin: 10px 0 0;}
.sb-top .post-meta ul {justify-content: flex-start;}
.sb-top .post-meta ul li {font-size: .9rem;}
/* -------------------------------------------------- 
ENTRY CONTENT
-------------------------------------------------- */
.sb-thumb {margin-bottom: 15px;}
.sb-thumb img {width: 100%; height: auto; border: 1px solid rgba(100, 100, 100, .15);}
.entry-content h2, .entry-content h3 {font-size: 1.6rem; line-height: 1.3;}
.entry-content h4 {font-size: 1.5rem; line-height: 1.3;}
.entry-content h2, .entry-content h3, .entry-content h4 {font-weight: 600; margin: 30px 0 15px; text-transform: capitalize;}
.entry-content p {margin-bottom: 12px;}
.entry-content p, .entry-content ul li, .entry-content ol li {font-size: 1.08rem; line-height: 1.5; color: #333;}
.entry-content p strong {font-weight: 600;}
.entry-content a {color: #0A54D7; font-weight: 600;}
.entry-content a:hover {text-decoration: underline;}
.entry-content img, .page-content img {width: 100%; height: auto; margin-bottom: 15px;}
.entry-content ul, .entry-content ol {margin: 0 0 12px; padding-left: 30px;}
.entry-content ul li, .entry-content ol li {padding: 1px 0; margin-bottom: 2px;}
.entry-content ul li {list-style: disc;}
.entry-content ol li {list-style: decimal;}
.entry-content iframe {display: flex; margin: 0 auto;}
.entry-content .video {margin-bottom: 15px;}
.b-update {font-size: 1.65rem; line-height: 1.4; font-weight: 500; color: #333; border-top: 1px solid #666; padding: 30px 0; margin-top: 30px;}
.galeri {display: flex; flex-wrap: wrap;}
.galeri .item {width: 33.3333333333%; padding: 5px;}
.galeri .item a img {margin-bottom: -5px;}
.galeri .item a:hover img {opacity: .7;}
.wp-embedded-content {width: 100%!important;}
.twitter-tweet {margin: 0 auto 10px!important;}
.tag {margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 5px;}
.tag span {font-size: .815rem; line-height: 1.3; font-weight: 300; color: #000; background: #f8f8f8; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px; display: inline-block; transition: .3s;}
.sharer {margin: 30px 0;}
.sharer h4 {margin-bottom: 10px; font-size: .95rem; line-height: 1.2; font-weight: 300; color: #000; z-index: 3;}
.sharer ul {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px;}
.sharer li a {font-size: .75rem; line-height: 1.1; color: #000; font-weight: 300; text-transform: uppercase; text-align: center; border-radius: 50%; display: block;}
.sharer li a svg {width: 30px; height: 30px;}
.sharer li a span {display: block; margin-top: 8px;}
.sharer li a:hover, .sharer li a:hover span {color: #0A54D7;}
/* -------------------------------------------------- 
COMMENT AREA
-------------------------------------------------- */
.comment-area {width: 100%; padding-top: 30px;}
.comment-title h3 {font-size: 1.6rem; line-height: 1; font-weight: 600; text-transform: none; margin-bottom: 10px;}
.comment-title h3 i {margin-right: 4px; font-size: 1.1rem;}
.comment-title p {font-size: .95rem; line-height: 1.4; color: #444;}
.comment-title p em {color: #ff0000;}
.no-cmt {margin: 40px 0;}
.no-cmt p {font-size: 1.1rem; line-height: 1.3; font-weight: 300; color: #444;}
.commentlist {margin-bottom: 30px;}
.commentlist li:first-child {border-top: none;}
.commentlist li {border-top: 1px solid #ddd; padding: 20px 0 20px; position: relative; display: block;}
.author-gravatar {position: absolute; width: 50px; height: 50px;}
.author-gravatar img {border-radius: 50%;}
.comment-right {padding-left: 65px;}
.comment-meta {display: flex; align-items: center; gap: 5px; font-size: .8rem; line-height: 1.1; color: #797d86; position: relative;}
.komenName, .komenName a {font-size: .93rem; line-height: 1.1; font-weight: 600; text-transform: capitalize;}
.komenName a {color: #0A54D7;}
.komenName a:hover {color: #0b4fc8;}
.comment-content {margin: 8px 0 0;}
.comment-wrp p {font-size: .96rem; line-height: 1.4; color: #000; margin-bottom: 10px; word-wrap: break-word;}
.comment-wrp p:last-child {margin-bottom: 0;}
.commentlist li ul.children {margin-bottom: -20px;}
.commentlist li ul.children li.depth-2 {padding-left: 60px;}
.commentlist .reply {margin-top: 5px;}
.commentlist .reply a {font-size: .8rem; font-weight: 600; color: #000; margin-right: 10px;}
.commentlist .reply a:hover {color: #0A54D7;}
.commentlist li ul.children .comment-respond {margin-bottom: 25px;}
/* -------------------------------------------------- 
COMMENT FORM
-------------------------------------------------- */
.comment-respond {margin-top: 50px; padding-top: 40px; border-top: 1px solid #666;}
.logged-in-as {font-size: .95rem; line-height: 1.2; margin-bottom: 12px;}
.logged-in-as strong {font-weight: 500; color: #0A54D7; text-transform: capitalize;}
.logged-in-as a {color: #fff;}
.logged-in-as a:hover {text-decoration: underline;}
.cmt-form .col {position: relative; margin-bottom: 25px;}
.cmtform-one {display: flex; gap: 20px;}
.cmtform-one .col {width: 50%;}
#commentform label {display: block; width: 100%; font-size: 1rem; line-height: 1.2; font-weight: 500; color: #000; margin-bottom: 8px;}
#commentform label span {color: #ff0000;}
#commentform input, #commentform textarea {font-size: 1.1rem; line-height: 1.2; padding: 10px; background: #fff; color: #000; border: 2px solid #ccc; border-radius: 4px; width: 100%;}
#commentform input:hover, #commentform textarea:hover {border-color: #7a7a7a;}
#commentform input:focus, #commentform textarea:focus {border-color: #0A54D7;}
#commentform textarea {line-height: 1.4; height: 150px; width: 100%; font-family: 'Inter', sans-serif;}
.btn-submit {margin-top: 10px;}
.btn-submit input#submit {background: #0A54D7; color: #fff; font-size: .98rem; line-height: 1.1; font-weight: 600; padding: 16px 0; border: none; cursor: pointer; text-align: center; width: 100%; border-radius: 4px; transition: all 0.2s ease-in-out; display: block;}
.btn-submit input:hover#submit {background: #094bc1;}
.cancel-comment-reply {margin: 20px 0 20px;}
.cancel-comment-reply a {font-size: 1.2rem; color: #0A54D7; font-weight: 500;}
.comment-extra {font-size: 12px!important;}
/* -------------------------------------------------- 
SINGLE MORE POST
-------------------------------------------------- */
.b-title h2 {font-size: 1.8rem; line-height: 1.2; font-weight: 600;}
.sb-more {margin-top: 60px; padding-top: 60px; border-top: 1px solid #666;}
.sb-more.b-list .row {padding: 25px 0; border-bottom: 1px solid #ddd;}
.sb-more.b-list .row:last-child {border-bottom: 0;}
.sb-more a {display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 30px;}
.sb-more.b-list .info {margin-top: 0;}
.sb-more.b-list a h3 {text-align: left; font-size: 1.6rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.sb-more.b-list a .excerpt {margin: 10px 0 15px;}
.sb-more.b-list a .excerpt p {-webkit-line-clamp: 2; text-align: left;}
.sb-more.b-list .post-meta ul {justify-content: flex-start;}
/* -------------------------------------------------- 
SIDEBAR
-------------------------------------------------- */
.wp-block-search__label {display: none;}
.sidebar h3, h2.wp-block-heading {font-size: 1.3rem; line-height: 1.2; font-weight: 600;}
.c-side li a {display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid #ddd; position: relative;}
.c-side .info {padding-right: 15px; width: 100%;}
.c-side li a h4 {font-size: 1.05rem; line-height: 1.35; color: #000; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; transition: .3s;}
.c-side li a:hover h4 {color: #0A54D7;}
.c-side li a .post-meta {font-size: .78rem; line-height: 1.1; color: #666; display: flex; align-items: center; margin-top: 10px;}
.c-side a .thumb {max-width: 110px; height: 110px; overflow: hidden;}
.c-side a .thumb img {min-width: 200px; margin-left: -40%; transition: 1.3s;}
.wp-block-search {margin: 30px 0 20px;}
.wp-block-search__input {padding: 10px; border-radius: 4px;}
.wp-block-search__button {padding: 8px 16px; display: flex; justify-content: center; align-items: center; border-radius: 4px; margin-left: 5px;}
.wp-block-search__button:hover {background: #151618;}
h2.wp-block-heading {margin-bottom: 10px;}
ul.wp-block-archives {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}
ul.wp-block-archives li a {font-size: .95rem; line-height: 1.2; color: #000;}
ul.wp-block-archives li a:hover {color: #0A54D7;}
/* -------------------------------------------------- 
PAGINATION
-------------------------------------------------- */
.WPpagi {width: 100%; position: relative; margin: 30px 0 0; display: flex; justify-content: center; align-items: center;}
.WPpagi span, .WPpagi a {font-size: 1rem; line-height: 1; font-weight: 300; color: #000; border: none!important; border-radius: 50%; width: 1.5em; height: 2em; display: flex; align-items: center; justify-content: center; margin: 0!important; padding: 0!important;}
.WPpagi a:hover {color: #666;}
.WPpagi span.current {color: #0A54D7; font-weight: 600!important;}
.WPpagi .prev, .WPpagi .next {content: '';}
.WPpagi .prev {background: url('images/chev-left.svg') no-repeat center; background-size: 12px;}
.WPpagi .next {background: url('images/chev-right.svg') no-repeat center; background-size: 12px;}
/* -------------------------------------------------- 
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, .maps iframe {left: 0; top: 0; height: 100%; width: 100%; position: absolute;}
.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: #4267b2;}
.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;}
/* --------------------------------------------------
MENU MOBILE
-------------------------------------------------- */
.b-menu {margin-right: -5px;}
.b-menu button {width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; padding: 3px;}
.b-menu img {width: 28px; height: 28px; display: block;}
.offcanvas-close {width: 32px; height: 32px; padding: 9px; margin: 0; display: flex; justify-content: center; align-items: center; top: 10px; right: 5px; position: absolute;}
.canv {padding: 20px;}
.bb-logo {margin-bottom: 20px; max-width: 130px;}
.bb-nav {margin-bottom: 25px;}
#navhp ul {display: flex; flex-direction: column; gap: 5px;}
#navhp li a {font-size: 1.1rem; line-height: 1.2; font-weight: 500; color: #000; padding: 5.5px 0; display: block; width: 100%;}
.bb-socmed ul {display: flex; flex-wrap: wrap; gap: 3px;}
.bb-socmed li a {color: #000; width: 36px; height: 36px; border: 1px solid #000; display: flex; justify-content: center; align-items: center; border-radius: 50%;}
.bb-socmed li a svg {width: 18px; height: 18px; fill: currentColor; color: #000;}
/* --------------------------------------------------
OFF CANVAS
-------------------------------------------------- */
.offcanvas {position: fixed; top: 0; width: 280px; max-width: 85vw; height: 100vh; background: #fff; z-index: 9999; transition: transform .35s ease; overflow-y: auto;}
.offcanvas-left {left: 0; transform: translateX(-100%);}
.offcanvas-left.active {transform: translateX(0);}
.offcanvas-right {width: 400px; right: 0; transform: translateX(100%);}
.offcanvas-right.active {transform: translateX(0);}
.offcanvas-right .offcanvas-close {top: 8px; z-index: 9;}
.offcanvas-top {top: 0; left: 0; width: 100%; max-height: 90vh; transform: translateY(-100%);}
.offcanvas-bottom {bottom: 0; left: 0; width: 100%; max-height: 90vh; border-radius: 20px 20px 0 0; transform: translateY(100%);}
.offcanvas-bottom.active {transform: translateY(0);}
.offcanvas-overlay {position: fixed; inset: 0; background: rgba(0,0,0,.7); opacity: 0; visibility: hidden; transition: .3s ease; z-index: 9998;}
.offcanvas-overlay.active {opacity: 1; visibility: visible;}
/* --------------------------------------------------
CF7
-------------------------------------------------- */
.wpcf7 br {display: none!important;}
.wpcf7 .box {display: flex; gap: 20px;}
.wpcf7 .col {margin-bottom: 20px; position: relative;}
.wpcf7 .box .col {width: 100%;}
.wpcf7 label {display: block; font-size: .95rem; line-height: 1; font-weight: 500; margin-bottom: 8px;}
.wpcf7 label span {color: #ff0000; font-weight: 700;}
.wpcf7 .col input, .wpcf7 .col textarea, .wpcf7 select {width: 100%; padding: 12px; font-size: 1.08rem; line-height: 1.2; font-weight: 400; background: #fff; border: 1px solid #a8a8a8; border-radius: 4px;}
.wpcf7 .col textarea {height: 180px; line-height: 1.5;}
.wpcf7 .col input:hover, .wpcf7 .col textarea:hover, .wpcf7 select:hover {border-color: #787878;}
.wpcf7 .col input:focus, .wpcf7 .col textarea:focus {border-color: #008ebc;}
.wpcf7 .col.select {display: block;}
.wpcf7 .col.select::after {font-size: .9rem; top: 20px; height: 22px;}
.wpcf7 select {line-height: 1.1; cursor: pointer; position: relative; display: block;}
.wpcf7 select option:first-child {display: none;}
.wpcf7 select option {color: #000;}
.wpcf7 .col.address textarea {height: 80px;}
.wpcf7 .wpcf7-radio {margin-top: 12px; display: block;}
.wpcf7 .wpcf7-checkbox {margin-top: 12px; display: flex; flex-wrap: wrap;}
.wpcf7 .wpcf7-list-item {margin: 0; padding-right: 20px;}
.wpcf7 .wpcf7-list-item input {width: 16px; height: 16px; margin: 0 4px 0 0; padding: inherit; vertical-align: -2.5px;}
.wpcf7 .wpcf7-list-item input:focus {border: none; outline: none;}
.wpcf7 .wpcf7-list-item label {text-transform: none; font-size: .95rem; line-height: 1.2;}
.wpcf7 .wpcf7-list-item label, .wpcf7 .wpcf7-list-item input {cursor: pointer;}
.wpcf7 .wpcf7-list-item .wpcf7-list-item-label {color: #000; font-weight: 400;}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {width: 100%;}
.wpcf7 .wpcf7-acceptance label {font-size: .9rem; line-height: 1.2;}
.wpcf7 .button {position: relative; margin-top: 10px;}
.wpcf7 .button input {background: #1ab64f; color: #fff; font-size: 1.1rem; line-height: 1.2; font-weight: 500; padding: 14px 0; text-align: center; width: 100%; display: block; border-radius: 4px; cursor: pointer; border: none;}
.wpcf7 .button input:hover {background: #16a446;}
.wpcf7 .button input:focus {box-shadow: none;}
.wpcf7-not-valid {border: 1px solid #ff0000!important;}
.wpcf7-response-output {padding: 0!important; margin: 15px 0 0!important; text-align: center;}
.wpcf7 form.sent .wpcf7-response-output {border: none; font-size: .9rem; line-height: 1.2; color: #46b450;}
.wpcf7 form.invalid .wpcf7-response-output {border: none; font-size: .8rem; line-height: 1.2; color: #ff0000;}
.wpcf7-not-valid-tip {display: none!important;}
.wpcf7 .wpcf7-checkbox.wpcf7-not-valid {border: none!important;}
.wpcf7 .wpcf7-checkbox.wpcf7-not-valid .wpcf7-list-item .wpcf7-list-item-label {color: #ff0000;}
/** CF7 Loding **/
#cf7-overlay {display: none; position: fixed; inset: 0; background: rgba(255, 255, 255, .85); backdrop-filter: blur(2px); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; opacity: 0; transition: opacity .3s ease;}
#cf7-overlay.active {display: flex; opacity: 1;}
.cf7-spinner {width: 48px; height: 48px; border: 4px solid #e0e0e0; border-top-color: #00C332; border-radius: 50%; animation: cf7-spin .8s linear infinite;}
.cf7-success {text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;}
.cf7-checkmark {width: 64px; height: 64px;}
.cf7-checkmark svg {width: 100%; height: 100%;}
.cf7-checkmark circle {stroke: #00C332; stroke-width: 2; stroke-dasharray: 166; stroke-dashoffset: 166; animation: cf7-circle .5s ease forwards;}
.cf7-checkmark path {stroke: #00C332; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: cf7-check .4s .5s ease forwards;}
.cf7-success p {font-size: 1.1rem; font-weight: 600; color: #222; margin: 0;}
.cf7-success span {font-size: .85rem; color: #666;}
@keyframes cf7-spin {
 to {transform: rotate(360deg);}
}
@keyframes cf7-circle {
 to {stroke-dashoffset: 0;}
}
@keyframes cf7-check {
 to {stroke-dashoffset: 0;}
}