/*
Theme Name: SERVIS AIRCOND
Theme URI: 
Description: Ready Made Landing Page Custom WordPress Theme by RekaIdea.com
Author: RekaIdea Digital
Author URI: https://rekaidea.com
Version: 1.2
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: #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;}
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.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 {background: url('images/chev-down.svg') no-repeat; background-size: 12px; width: 12px; height: 12px; 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, 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; text-transform: capitalize; 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: 1280px; 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: #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;}
.text-one a, .text-two a {color: #000;}
.text-two a {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;}
.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;}
/* --------------------------------------------------
HEADER
-------------------------------------------------- */
.head {padding: 15px 0; top: 0; left: 0; width: 100%; position: absolute; 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;}
.h-wsp a {background: #12b84a; color: #fff; padding: 12px 0; font-size: .9rem; line-height: 1.2; font-weight: 600; border-radius: 6px; display: flex; justify-content: center; align-items: center; gap: 5px; width: 200px; text-align: center;}
.h-wsp a i {font-size: 1.2rem;}
.gtranslate_wrapper a {font-size: .9rem; color: #000;}
.gtranslate_wrapper a::before {content: '|'; font-size: .5rem; color: rgba(0,0,0,.5); margin: 0 5px 0 1px; vertical-align: 2px;}
.gtranslate_wrapper a:first-child::before {display: none;}
.gtranslate_wrapper a.gt-current-lang {color: #0a54d7; font-weight: 600!important;}
/* --------------------------------------------------
NAVIGATION
-------------------------------------------------- */
#cssmenu {display: block; padding: 0; margin: 0;}
#cssmenu > ul {padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; gap: 30px;}
#cssmenu > ul > li {padding: 0; margin: 0; display: block; position: relative; list-style: none;}
#cssmenu > ul > li > a {padding: 16px 0; font-size: 1rem; line-height: 1.2; font-weight: 600; text-decoration: none; display: block; position: relative; transition: .3s ease-in-out;}
#cssmenu > ul > li.has-sub > a {display: flex; align-items: center; gap: 6px;}
#cssmenu > ul > li.has-sub > a:after {-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: 14px; height: 14px; position: relative; transition: .3s ease-in-out; content: '';}
#cssmenu .submenu-wrap {width: 300px; 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: #000;}
#cssmenu > ul > li.has-sub > a:after {background-color: #fff;}
#cssmenu > ul > li > a:hover, #cssmenu > ul > li.has-sub:hover > a {color: #0a54d7;}
#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;}
/* -------------------------------------------------- 
BREADCRUMB
-------------------------------------------------- */
#breadcrumbs {margin-bottom: 30px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
#breadcrumbs span {display: flex; align-items: center; gap: 6px;}
#breadcrumbs span, #breadcrumbs a {font-size: .7rem; color: #333; text-transform: uppercase;}
#breadcrumbs a {font-weight: 500; color: #333;}
#breadcrumbs a:hover {color: #000;}
#breadcrumbs i {font-size: .5rem; color: #a1a1a1;}
/* --------------------------------------------------
HOME ELEMENTOR
-------------------------------------------------- */
.hero-title h1 span {color: #FC5C06; display: block;}
.hero-cta {display: flex; gap: 15px;}
.hero-cta a {font-size: 1rem; line-height: 1.1; font-weight: 600; padding: 14px 25px; width: 280px; border-radius: 6px; display: flex; justify-content: center; align-items: center; gap: 5px;}
.hero-cta a svg {width: 16px; height: 16px;}
.h-title span {color: #FC5C06;}
.title-card span {display: block;}
.box-four .elementor-container {flex-wrap: wrap; justify-content: center;}
.box-four .elementor-column {width: 25%!important;}
.wsp-btn {display: flex; justify-content: center;}
.wsp-btn a {padding: 14px 0; font-size: 1rem; line-height: 1.2; font-weight: 600; width: 240px; border-radius: 6px; display: flex; justify-content: center; align-items: center; gap: 5px;}
.wsp-btn a svg {width: 16px; height: 16px;}
.hero-cta a, .wsp-btn a, .cta-action a, .cta-chat a, .cta-btn button {background: #12b84a; color: #fff;}
.hero-cta a:hover, .wsp-btn a:hover, .cta-action a:hover {background: #12ac46;}
.list-ba ul {padding: 0; margin: 0;}
.list-ba li {padding-left: 26px; margin: 0!important; position: relative; list-style: none!important;}
.list-ba li::before {content:''; position: absolute; left: 0;}
.list-ba.before li::before {filter: invert(11%) sepia(76%) saturate(7469%) hue-rotate(348deg) brightness(77%) contrast(113%); background: url('images/cross.svg') no-repeat center; background-size: 18px; width: 18px; height: 18px; top: 5px;}
.list-ba.after li::before {filter: invert(49%) sepia(70%) saturate(2974%) hue-rotate(109deg) brightness(93%) contrast(91%); background: url('images/check.svg') no-repeat center; background-size: 20px; width: 20px; height: 20px; top: 4px;}
.box-two .elementor-container {flex-wrap: wrap;}
.box-two .elementor-column {width: 50%!important;}
.galeri-habuk {display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;}
.galeri-habuk img {margin-bottom: -6px;}
.label-line ul {display: flex; flex-wrap: wrap; margin: 0; padding: 0; column-gap: 15px; row-gap: 5px;}
.label-line li {margin: 0!important; list-style: none!important;}
.quo-box {box-shadow: 6px 6px 0 0 #FC5C06;}
.quo-box .elementor-widget-wrap::before {content: ''; background-image: url('images/quote.png'); background-size: 100px; width: 100px; height: 100px; top: 10px; left: -35px;  position: absolute; transform: scaleX(-1); z-index: 1;}
.quo-box .elementor-element {z-index: 2;}
.area ul {display: flex; flex-wrap: wrap; margin: 0 -8px; padding: 0;}
.area li {padding: 8px 10px; width: 33.3333333%; display: flex; align-items: center; gap: 6px; list-style: none!important; margin: 0!important; transition: .3s;}
.area li::before {content: ''; background: url('images/area.svg') no-repeat center; background-size: 16px; width: 16px; height: 16px; filter: invert(47%) sepia(95%) saturate(1262%) hue-rotate(53deg) brightness(102%) contrast(101%);}
.client {max-width: 1000px; margin: 0 auto;}
.client .box {display: flex; flex-wrap: wrap; justify-content: center;}
.client .item {padding: 10px; width: 12.5%;}
.client .item img {background: #fff; padding: 6px; border-radius: 6px; margin-bottom: -6px;}
.gallerys a, .gallery .item a {position: relative; display: block; overflow: hidden; border-radius: 10px;}
.img-placeholder {position: absolute; inset: 0; z-index: 1; background: #e5e7eb; overflow: hidden;}
.img-placeholder::before {content: ""; position: absolute; top: 0; left: -150%; width: 150%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: skeleton-loading 1.2s infinite;}
.lazy-image {width: 100%; height: auto; display: block; opacity: 0; transition: opacity .4s ease; position: relative; z-index: 2;}
.lazy-image.loaded {opacity: 1;}
.lazy-image.loaded + .img-placeholder,
.lazy-image.loaded ~ .img-placeholder {opacity: 0; visibility: hidden;}
.image-loaded .img-placeholder {opacity: 0; visibility: hidden; transition: .4s;}
.gallerys, .gallerys .swiper-slide .sk-thumb {height: 343px;}
.gallerys .swiper-slide .sk-thumb, .gallery .sk-thumb {border-radius: 8px;}
.gallerys a {aspect-ratio: 3 / 4;}
.gallerys a img {width: 100%; height: 100%; object-fit: cover; border-radius: 8px;}
.gallerys .swiper-slide a {display: block; position: relative; aspect-ratio: 5/6; overflow: hidden;}
.gallerys .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.gallerys .swiper-button-prev, .gallerys .swiper-button-next {width: 36px!important; height: 36px!important; background: #fff; border-radius: 50%; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.gallerys .swiper-button-prev:after, .gallerys .swiper-button-next:after {margin: 0; content: '';}
.gallerys .swiper-button-prev:after {background: url('images/chev-left.svg') no-repeat center; background-size: 20px; width: 20px; height: 20px;}
.gallerys .swiper-button-next:after {background: url('images/chev-right.svg') no-repeat center; background-size: 20px; width: 20px; height: 20px;}
.gallery {max-width: 1260px; margin: 0 auto;}
.gallery .box {display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -5px;}
.gallery .row {width: 25%; padding: 5px;}
.gallery .row a {position: relative;}
.gallery .row a img {margin-bottom: -6px; border-radius: 8px; transition: .3s; position: relative;}
.gallery .btn-more {display: none; text-align: center; margin-top: 10px;}
.gallery .btn-more button {font-size: .9rem; line-height: 1.1; font-weight: 500; padding: 12px 28px; color: #000; border: 1px solid #444; border-radius: 4px;}
.gallery .btn-more button:hover {border-color: #000;}
.gallery-loading {display: none; text-align: center; margin-top: 20px;}
.gallery-spinner {width: 28px; height: 28px; border: 3px solid rgba(0,0,0,.1); border-top-color: #0A54D7; border-radius: 50%; margin: 0 auto; animation: spin .8s linear infinite;}
.gallery .row.gallery-fade-in {animation: galleryFadeUp .6s ease forwards;}
/** CTA BOTTOM **/
.mobile-text {display: none;}
.cts-one {background: url('images/bg-cta.webp') #002671 left center no-repeat; background-size: cover; bottom: 0; left: 0; position: fixed; width: 100%; z-index: 99;}
.cts-one .box {display: grid; grid-template-columns: 200px 1fr; align-items: center;}
.cta-two {padding: 15px 0; display: grid; grid-template-columns: 1fr 365px; align-items: center; gap: 40px;}
.cta-two h3 {font-size: 1.4rem; line-height: 1.2; font-weight: 600; color: #fff; margin-bottom: 8px;}
.cta-two p {font-size: .96rem; line-height: 1.4; color: #fff;}
.cta-action {display: flex; justify-content: center;}
.cta-action a {padding: 12px 0; font-size: 1rem; line-height: 1.2; font-weight: 600; border-radius: 6px; display: flex; justify-content: center; align-items: center; gap: 5px; width: 100%; text-align: center;}
.cta-action a svg {width: 16px; height: 16px;}
.cta-features {margin-top: 10px; display: flex; justify-content: center; gap: 8px;}
.cta-features span {font-size: .75rem; line-height: 1.2; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 3px;}
.cta-features span svg {width: 16px; height: 16px; color: #0cad42;}
/** CTA TWO **/
.cts-two {position: fixed; bottom: 15px; right: 15px; z-index: 99;}
.cta-box {width: 270px; max-height: 215px; margin-bottom: 8px; transform-origin: bottom right; transition: opacity .3s ease, transform .3s ease, visibility .3s ease, max-height .3s ease, margin-bottom .3s ease; opacity: 1; transform: scale(1); visibility: visible; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.15);}
.cta-box.cta-hide {opacity: 0; transform: scale(1) translateY(10px); visibility: hidden; pointer-events: none; max-height: 0; margin-bottom: 0;}
.cta-head {background: #008069; padding: 8px 16px 12px; border-top-left-radius: 10px; border-top-right-radius: 10px; position: relative;}
.ctah-meta {display: flex; align-items: center; gap: 12px;}
.ctah-img {min-width: 40px; max-width: 40px; height: 40px; position: relative;}
.ctah-info {width: 100%; color: #fff;}
.ctah-img img {width: 40px; height: 40px; border-radius: 50%; margin-bottom: -12px;}
.cta-head strong {font-size: .86rem; line-height: 1.2; font-weight: 600;}
.cta-head p {font-size: .7rem; line-height: 1.1; font-weight: 300;}
.cta-head .close-btn {position: absolute; top: 2px; right: 2px;}
.cta-head .close-btn button {padding: 8px; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; filter: invert(91%) sepia(15%) saturate(390%) hue-rotate(116deg) brightness(91%) contrast(83%);}
.cta-chat {padding: 16px; background: url('images/wsp-bg.webp') #fff no-repeat center center; background-size: cover;}
.cta-c {padding-left: 10px;}
.cta-text {background: #fff; padding: 15px; border-top-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; position: relative; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.cta-text::before {content: ''; position: absolute; top: 0; left: -12px; width: 0; height: 0; border-right: 12px solid #fff; border-bottom: 12px solid transparent;}
.cta-text p {font-size: .9rem; line-height: 1.4; color: #222;}
.cta-chat a {font-size: .9rem; line-height: 1.1; font-weight: 500; padding: 13px 0; margin: 20px auto 0; width: 220px; text-align: center; display: block; border-radius: 50px;}
.cta-chat a svg {width: 16px; height: 16px; vertical-align: -2.5px; margin-right: 2px;}
.cta-btn {margin-top: 8px; display: flex; justify-content: flex-end; position: relative;}
.cta-btn button {width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.15); transition: transform .2s ease; animation-name: pulse; animation-duration: 1.5s; animation-timing-function: ease-out; animation-iteration-count: infinite;}
.cta-btn button svg {width: 26px; height: 26px;}
@keyframes pulse {
0% {box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);}
80% {box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);}
}
/* --------------------------------------------------
FAQS
-------------------------------------------------- */
.faq {display: flex; flex-direction: column; gap: 15px; counter-reset: faq-counter;}
.faq-title {margin-bottom: 20px; text-align: center;}
.faq-title h3 {font-size: 1.8rem; line-height: 1.2; margin-bottom: 10px;}
.faq-title p {font-size: 1rem; line-height: 1.4; color: rgba(0,0,0,.75);}
.faq-main {display: flex; flex-direction: column; gap: 10px;}
.faq-item {padding: 10px; background: #fff; border: 2px solid transparent; border-radius: 8px; transition: .3s; position: relative; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; cursor: pointer;}
.faq-number::before {color: #0a54d7; font-size: 1.1rem; line-height: 1; font-weight: 700; counter-increment:faq-counter; content:counter(faq-counter, decimal-leading-zero);}
.faq-q {padding: 8px; position: relative; display: flex; align-items: center; gap: 10px; cursor: inherit;}
.faq-q h3 {font-weight: 600; text-transform: none; display: flex; align-items: center; gap: 10px; flex: 1; margin: 0;}
.faq-q svg {width: 16px; height: 16px; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); transition: transform .3s ease;}
.faq-item.active .faq-q svg {transform: translateY(-50%) rotate(180deg); color: #0a54d7;}
.faq-a {max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.4,0,.2,1);}
.faq-inner {padding: 0 8px 8px;}
.faq-q h3, .faq-a p, .faq-a li {font-size: .98rem; line-height: 1.4;}
.faq-a p {margin-bottom: 14px;}
.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 {list-style: disc;}
.faq-a ol li {list-style: decimal;}
.faq-a a {color: #0a54d7; font-weight: 600;}
.faq-a a:hover {text-decoration: underline;}
.faq-item:hover {border-color: #333;}
.faq-item.active {border-color: #0a54d7;}
/* --------------------------------------------------
AIRCOND 2
-------------------------------------------------- */
.head.ac2 {background: #00316a; padding: 12px 0;}
.head.ac2 .gtranslate_wrapper a {color: #fff;}
.head.ac2 .gtranslate_wrapper a::before {color: rgba(255,255,255,.5);}
.head.ac2 .gtranslate_wrapper a.gt-current-lang {color: #f7fa09;}
.head.ac2 .b-menu img {filter: invert(96%) sepia(100%) saturate(18%) hue-rotate(266deg) brightness(105%) contrast(107%);}
.head.ac2 #cssmenu > ul > li > a {color: #fff;}
.head.ac2 #cssmenu > ul > li > a:hover, .head.ac2 #cssmenu > ul > li.has-sub:hover > a {color: #76b0f8;}
.head.ac2 #cssmenu > ul > li.has-sub > a:hover:after {background-color: #76b0f8;}
.hero-title.ac2 h1 span, .h-title.ac2 span {color: #dd1f18;}
.ac2 .faq-number::before {color: #dd1f18;}
.cta-center .hero-cta {justify-content: center;}
/* --------------------------------------------------
AIRCOND 3
-------------------------------------------------- */
.head.ac3 {padding: 8px 0; position: relative;}
.text-one.ac3 a, .text-two.ac3 a {color: #fff;}
.text-two a {font-weight: 400;}
/* --------------------------------------------------
FOOTER
-------------------------------------------------- */
.foot-one {padding: 40px 0 20px;}
.foot-one .control {max-width: 1000px;}
.foot-one .box {display: flex; justify-content: center; flex-direction: column; gap: 20px; text-align: center;}
.f-info p {margin: 10px auto 0; max-width: 800px;}
.f-info p {font-size: .95rem; line-height: 1.35;}
.f-add {font-size: 1rem; line-height: 1.35;}
.f-add h4 {font-weight: 600;}
.f-add h4 span {font-size: .85rem; font-weight: 400; display: block;}
.f-dir {margin-top: 5px; display: flex; justify-content: center; gap: 5px;}
.f-dir img {width: auto; height: 32px;}
.f-socmed ul {display: flex; flex-wrap: wrap;justify-content: center; gap: 8px;}
.f-socmed li a {width: 40px; height: 40px; font-size: 1.2rem; line-height: 1; color: #000; border: 1px solid #000; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.f-socmed li svg {width: 20px; height: 20px; display: block; fill: currentColor;}
.f-socmed li a:hover {color: #0a54d7; border-color: #0a54d7;}
.f-work {font-size: .95rem; line-height: 1.4;}
.f-work h4 {font-size: .88rem; line-height: 1.2; text-transform: uppercase; margin-bottom: 5px;}
/** FOOTER 2 **/
.foot-two {padding: 60px 0 40px;}
.foot-two .box {display: flex; gap: 60px;}
.foot-two .f-one {width: 44%;}
.foot-two .f-two {width: 28%;}
.foot-two .f-three {width: 28%;}
.foot-two h3 {font-size: 1rem; line-height: 1.2; margin-bottom: 12px;}
.foot-two .f-one p {margin-top: 10px;}
.f-add, .f-info p {font-size: .95rem; line-height: 1.35;}
.foot-two .f-socmed {margin-top: 10px;}
.foot-two .f-socmed ul {justify-content: flex-start; gap: 4px;}
.foot-two .f-socmed li a {width: 36px; height: 36px;}
.foot-two .f-socmed li svg {width: 18px; height: 18px;}
.foot-two .f-dir {justify-content: flex-start;}
.foot-two .f-three {font-size: .95rem; line-height: 1.45;}
/** FOOTER BOTTOM **/
.f-btm {padding-bottom: 125px;}
.f-btm .box {padding-top: 20px; border-top: 1px solid #ddd;}
.copy p {font-size: .9rem; line-height: 1.4; text-align: center;}
.wdsgn a {font-size: .75rem; line-height: 1; font-weight: 500; text-transform: uppercase; color: #000;}
.end-link {margin-top: 10px;}
.end-link a {font-size: .86rem; line-height: 1.1; color: #000;}
.end-link a:hover {color: #0a54d7;}
.end-link span {font-size: .6rem; margin: 0 2px; color: rgba(0,0,0,.4);}
.foot-text {margin: 15px auto 0; max-width: 1000px;}
.foot-text p {font-size: .755rem; line-height: 1.3; text-align: justify;}
.foot-text p strong {font-weight: 600;}
/* -------------------------------------------------- 
PAGE
-------------------------------------------------- */
.fx-page {padding-top: 100px ;}
.fx-content {padding-bottom: 40px; border-bottom: 1px solid #ddd; position: relative;}
.back {margin-bottom: 30px;}
.back button {font-size: .72rem; line-height: 1; color: #000; font-weight: 400; padding: 6px 8px; border: 1px solid rgba(0,0,0,.5); text-transform: uppercase; border-radius: 3px; display: flex; align-items: center; gap: 1px;}
.back button:hover {border-color: #000;}
.bl-top {margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #ddd;}
.bl-sub {display: flex; align-items: center; gap: 5px; margin-bottom: 10px;}
.bl-sub svg {margin-top: -.5px;}
.bl-sub h4 {font-size: .75rem; line-height: 1.1; font-weight: 300; text-transform: uppercase; color: #000;}
.bl-title h3 {font-size: 2.4rem; line-height: 1.3; font-weight: 700;}
.bl-title p {font-size: .96rem; line-height: 1.4; color: #282828; margin-top: 8px; max-width: 900px;}
.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;}
.p-title {margin-bottom: 30px;}
.p-title h1 {font-size: 2rem; line-height: 1.3; font-weight: 700; color: #000; text-transform: capitalize;}
.page-content h2, .page-content h3, .page-content h4 {font-size: 1.2rem; line-height: 1.3; font-weight: 600; margin: 20px 0 15px; text-transform: capitalize;}
.page-content h2 {text-transform: uppercase; font-size: 1.1rem; font-weight: 700; text-decoration: underline;}
.page-content p {margin-bottom: 15px; word-wrap: break-word;}
.page-content p, .page-content ul li, .page-content ol li {font-size: .98rem; line-height: 1.5;}
.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;}
/* -------------------------------------------------- 
PLACEHOLDER
-------------------------------------------------- */
@keyframes skeletonShimmer {
 0%   {background-position: -600px 0;}
 100% {background-position: 600px 0;}
}
.sk-thumb {position: absolute; inset: 0; background: linear-gradient(90deg, #f4f4f4 25%, #e8e8e8 50%, #f4f4f4 75%); background-size: 600px 100%; animation: skeletonShimmer 2s infinite linear; z-index: 1;}
.v-thumb {position: relative;}
.v-thumb img {width: 100%; height: auto; margin-bottom: -5px; position: relative; z-index: 2; opacity: 0; transition: opacity .3s ease;}
.v-thumb img.loaded {opacity: 1;}
.sk-info {}
.sk-title {margin-top: 16px;}
.sk-flex {display: flex; flex-direction: column; gap: 12px;}
.sk-line {height: 12px; border-radius: 6px; background: linear-gradient(90deg, #f4f4f4 25%, #e8e8e8 50%, #f4f4f4 75%); background-size: 600px 100%; animation: skeletonShimmer 2s infinite linear;}
.sk-short  {width: 40%; margin: 18px 0 20px;}
.sk-long   {width: 100%;}
.sk-title .sk-long {width: 90%;}
.sk-medium {width: 65%;}
.b-list .sk-thumb {border-radius: 8px;}
.c-side .sk-title {margin-top: 0;}
/* -------------------------------------------------- 
BLOG LIST
-------------------------------------------------- */
.post-meta {font-size: .8rem; line-height: 1.2; font-weight: 300; color: #303030;}
.post-meta span {font-size: .5rem; margin: 0 1px; vertical-align: 1px;}
.b-list a .v-thumb img {border-radius: 8px;}
.b-list .info {margin-top: 12px;}
.b-list a h3 {font-size: 1.2rem; line-height: 1.4; font-weight: 600; color: #000; transition: .3s;}
.b-list a:hover h3 {color: #0A54D7}
.b-list .post-meta {margin: 8px 0;}
.b-list a .excerpt p {color: #333; font-size: .96rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.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); gap: 35px;}
/* -------------------------------------------------- 
BLOG SINGLE
-------------------------------------------------- */
.bs .bs-box {display: grid; grid-template-columns: 1fr 300px; gap: 60px;}
.sb-top {margin-bottom: 20px;}
.sb-top h1 {font-size: 2rem; line-height: 1.4; font-weight: 600;}
.sb-top .post-meta {margin: 0 0 12px;}
.sb-top .post-meta a {font-weight: 500; color: #303030;}
.sb-top .post-meta a:hover {color: #000;}
/* -------------------------------------------------- 
ENTRY CONTENT
-------------------------------------------------- */
.sb-thumb {margin-bottom: 15px;}
.sb-thumb img {width: 100%; height: auto;}
.entry-content h2, .entry-content h3, .entry-content h4 {font-weight: 600; margin: 20px 0 15px; text-transform: capitalize;}
.entry-content h2, .entry-content h3 {font-size: 1.4rem; line-height: 1.3;}
.entry-content h4 {font-size: 1.3rem; line-height: 1.3;}
.entry-content p {margin-bottom: 15px;}
.entry-content p, .entry-content ul li, .entry-content ol li {font-size: 1rem; line-height: 1.5;}
.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 1.5em; 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;}
.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.3rem; line-height: 1; font-weight: 600; margin-bottom: 10px;}
.comment-title h3 i {margin-right: 4px; font-size: 1.1rem;}
.comment-title p {font-size: .85rem; 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 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: 15px; padding-top: 30px; border-top: 1px solid #ddd;}
.logged-in-as {font-size: .85rem; 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: 40px;}
.cmtform-one .col {width: 50%; }
#commentform label {display: block; width: 100%; font-size: .95rem; line-height: 1.2; font-weight: 500; color: #000; margin-bottom: 6px;}
#commentform label span {color: #ff0000;}
#commentform input, #commentform textarea {font-size: .95rem; line-height: 1.2; padding: 0 0 10px; background: transparent; color: #000; border: none; border-bottom: 1px solid #ccc; 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: 100px; 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.5rem; line-height: 1; font-weight: 700;}
.sb-more {margin-top: 40px;}
.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: 25px;}
.sb-more.b-list .info {margin-top: 0;}
.sb-more.b-list a h3 {font-size: 1.35rem; line-height: 1.4; font-weight: 600;}
/* -------------------------------------------------- 
SIDEBAR
-------------------------------------------------- */
.wp-block-search__label {display: none;}
.sidebar h3, h2.wp-block-heading {font-size: 1.3rem; line-height: 1.2;}
.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: 1rem; 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: .75rem; 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;}
/* -------------------------------------------------- 
SEARCH PAGE
-------------------------------------------------- */
.search-title {margin-bottom: 30px;}
.search-title h1 {font-size: 1.4rem; line-height: 1.2; color: #000; font-weight: 600;}
/* -------------------------------------------------- 
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
-------------------------------------------------- */
.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-ico {background: #4267b2;}
.threads-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;}
.be-ico {background: #053eff;}
.utube-ico {background: #ff0000;}
.tiktok-ico {background: #000;}
/* --------------------------------------------------
CF7
-------------------------------------------------- */
.wpcf7 br {display: none!important;}
.wpcf7 .box {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.wpcf7 .col {margin-bottom: 20px; position: relative;}
.wpcf7 .col.radio {margin-bottom: 24px;}
.wpcf7 .col p {position: relative;}
.wpcf7 label {display: block; font-size: .9rem; line-height: 1.2; color: #fff; font-weight: 600; margin-bottom: 8px;}
.wpcf7 label .required {color: #ff0000; font-weight: 300;}
.wpcf7 .col input, .wpcf7 .col textarea, .wpcf7 select {width: 100%; padding: 12px 14px; font: .96rem 'Inter', sans-serif; line-height: 1.1; font-weight: 400; background: #fff; border: 1px solid #ccc; border-radius: 6px; outline: none!important;}
.wpcf7 .col input:hover, .wpcf7 .col textarea:hover, .wpcf7 select:hover {border-color: #828282;}
.wpcf7 .col input:focus, .wpcf7 .col textarea:focus, .wpcf7 select:focus {box-shadow: 0 0 0 2px #C7E63A; border-color: transparent;}
.wpcf7 .col textarea {line-height: 1.4!important; height: 100px;}
.wpcf7 .button {position: relative; margin-top: 5px;}
.wpcf7 .button input {background: #C7E63A; color: #061B44; font-size: 1rem; line-height: 1.1; text-transform: uppercase; font-weight: 600; padding: 14px 40px; text-align: center; display: block; border-radius: 20px; cursor: pointer; border: none;}
.wpcf7 .button input:hover {background: #bad833;}
.wpcf7 .button input:focus {box-shadow: none;}
.wpcf7 .col.selct {position: relative;}
.wpcf7 .col.selct::after {background: url('images/chev-down.svg') no-repeat; background-size: 12px; width: 12px; height: 12px; top: 12px; right: 10px; position: absolute; pointer-events: none; display: block;}
.wpcf7-checkbox {display: flex; gap: 20px;}
.wpcf7-radio {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-list-item label span {color: #000; font-weight: 400;}
.wpcf7 .f-note {font-size: .84rem; line-height: 1.3; color: #5b5b5b; margin-top: 10px; text-align: center;}
.wpcf7-select::-ms-expand {display: none;}
.wpcf7-spinner {position: absolute!important; top: 12px; right: 0;}
input.wpcf7-not-valid {box-shadow: 0 0 0 2px hsla(0, 100%, 50%);}
.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;}
/** 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;}
}
/* --------------------------------------------------
MENU MOBILE
-------------------------------------------------- */
.b-menu {margin-right: -5px;}
.b-menu a {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: 8px; 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 {right: 0; transform: translateX(100%);}
.offcanvas-right.active {transform: translateX(0);}
.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;}