/*!
Theme Name: Eltech
Author: Mirai Kreativa Team
Author URI: http://miraikreativa.com
Description: Eltech mainsite theme.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
Text Domain: eltechai
Tags: flexbox, material you, flaticon uicons, blog, custom-menu, featured-images, threaded-comments
*/

@import url('assets/css/font.css');
@import url('assets/css/root.css');

/* REPLACEMENT WAJIB */
.btn>span:not([class]){padding-bottom:2px}
.tooltip-text{border-bottom:2px solid transparent}
.formatting ul li::before{top:9px}
.formatting ul.check li::before{top:0}
.formatting ul.icons li .material-symbol,.formatting ul.icons li .fab{top:0}
.formatting.lh2{line-height:2}
.formatting.lh2 ul li::before{top:12px}
.formatting.lh2 ul.check li::before{top:3px}
.formatting.lh2 ul.icons li .material-symbol,.formatting.lh2 ul.icons li .fab{top:3px}
[class*='form-opt-'] .mark{top:0}
/* REPLACEMENT TAMBAHAN */
.navbar li.current-menu-item a{color:var(--primary);border:1px solid var(--g3x);padding:0 20px}
.navbar li.current-menu-item a:hover{border-color:var(--primary)}
.text-lh-1{line-height:1!important}
.container{max-width:1280px}
.formatting{line-height:1.6}
[dropdown=content] nav .current-language-menu-item a{font-variation-settings:'FILL'1;font-weight:var(--font-semibold);color:var(--primary)!important}
[dropdown=content] nav .current-language-menu-item a::after{opacity:1}
/* TEMPLATE */
body{border-bottom:24px solid var(--primary)}
p{line-height:1.6}
.text-monospace{font-family:var(--font-2)}
li.widget{list-style:none}
.wp-block-lazyblock-footer-button{display:flex;gap:12px}
.pagination .btn{padding:0 12px;min-width:48px;text-align:center;font-size:16px;border-radius:48px}
.turbo-progress-bar{background-color:var(--primary)!important}
/* FOOTER */
.el-div{position:relative;opacity:.25;margin-top:60px;margin-bottom:60px}
.el-div img{display:block;height:37px;margin:auto;padding:0 6px;background-color:var(--bg);border-radius:8px}
.el-div::before{content:' ';display:block;position:absolute;z-index:-1;top:19px;left:0;right:0;border-top:1px solid var(--primary)}
.footer-contact .container:not(.el-div){box-shadow:var(--shadow);overflow:hidden;margin-top:auto;padding:60px;background-color:var(--primary);border-radius:24px}
.footer-contact .container:not(.el-div)>*{position:relative;z-index:2}
.footer-contact .container:not(.el-div)::before{content:' ';display:block;position:absolute;z-index:0;top:0;bottom:0;left:0;right:0;opacity:.075;background-image:url(assets/img/placeholder/bgpattern.png);background-repeat:no-repeat;background-position:center;background-size:cover}
.footer-contact .container:not(.el-div)::after{content:' ';display:block;position:absolute;z-index:1;bottom:-24px;right:24px;opacity:.15;width:600px;height:280px;background-image:url(assets/img/logo/wordmark_white.png);background-repeat:no-repeat;background-size:contain}
.footer-wrap{padding-top:60px;margin-top:auto}
.footer-widget{display:flex;flex-wrap:wrap;margin-top:24px;padding:60px 0;border-top:2px solid var(--g2x);border-bottom:2px solid var(--g2x);font-size:16px}
.footer-widget .widget:not(:last-child){min-width:160px}
.footer-widget .widget:last-child{width:33%;margin-left:auto}
.footer-widget h5{margin-bottom:24px;color:var(--primary)}
.footer-widget ul{line-height:1.6}
.footer-widget ul li:nth-of-type(n+2){margin-top:12px}
.footer-copy{padding:24px 0 26px}
/* BLOG */
.feed .card{width:calc(33.3333333% - 32px);padding:0;background-color:transparent;border:unset}
.feed .card h4{line-height:1.4}
.feed .card p+p a{position:relative;font-size:16px}
.feed .card p+p a::before{transform-origin:left;pointer-events:none;content:' ';display:block;position:absolute;bottom:-6px;left:0;right:4px;transform:scaleX(0);height:2px;transition:transform .35s var(--cubic);border-bottom:2px solid var(--primary)}
.feed .card p+p a:hover::before{transform:scaleX(1)}
.feed .card p+p a:hover::before{transform-origin:left}
.feed .card p+p a:not(:hover)::before{transform-origin:right;transform:scaleX(0)}
.feed-thumbnail{position:relative;margin-bottom:24px}
.feed-thumbnail .img-thumb{border-radius:24px}
.feed-thumbnail .btn{backdrop-filter:blur(3px);position:absolute;bottom:3px;left:3px;height:44px;padding-right:20px;padding-left:20px;background-color:rgba(255 255 255 / .85)!important;border-radius:2px 12px 2px 20px;font-weight:var(--font-semibold);text-transform:uppercase}
.blog-banner{position:relative}
.blog-banner .img-cover{overflow:hidden;height:600px;border:1px solid var(--bg);border-radius:24px}
.blog-banner::before{content:' ';display:block;position:absolute;top:-1px;bottom:40%;left:0;right:0;background-color:var(--primary)}
.blog-post .wrapper{gap:60px}
.blog-post .wrapper-left h1{line-height:1.5}
.blog-post .wrapper-right{max-width:360px}
.blog-post .wrapper-right .card{width:100%}
.blog-post .wrapper-right .card .img-thumb{height:200px}
.blog-featured{position:relative;margin-bottom:60px}
.blog-featured::before{content:' ';display:block;position:absolute;top:-1px;left:0;right:0;height:calc(300px - 120px);background-color:var(--primary)}
.blog-featured .feed .card{width:calc(50% - 30px)}
.blog-featured .feed .card .img-thumb{height:300px;border:1px solid var(--bg)}
.blog-featured .feed .card .btn{bottom:5px;left:5px}
.blog-list{padding:60px 0;background-color:var(--g0x)}
.blog-list.tsp{background-color:transparent;padding-bottom:0}
.tagcat{background-color:var(--primary25);color:var(--txt);font-family:var(--font-2);padding:2px 8px}
/* PAGE */
.breadcrumb-control .breadcrumb{padding:24px 0 25px}
.breadcrumb-control.bg{background-color:var(--primary);color:var(--bg)}
.breadcrumb-control.bg .breadcrumb>li+li:before{margin-top:0;color:var(--g4x)}
.breadcrumb-control.bg .breadcrumb>li:not(.active) a{color:var(--bg)}
/* HERO */
.hero{display:flex;flex-direction:column;gap:24px;position:relative;margin-bottom:60px}
.hero .container{overflow:hidden;width:100%;padding:72px;border:1px solid var(--g3x);border-radius:24px}
.hero .container>*{position:relative;z-index:2}
.hero .container::before{content:' ';display:block;position:absolute;z-index:1;top:0;bottom:0;left:0;right:0;background:linear-gradient(60deg,var(--g0x) 15%,transparent 100%)}
.hero .container h1{margin-top:-12px;font-size:6em;font-family:var(--font-2);line-height:1.2}
.hero .container h1 strong{display:block;color:var(--primary)!important}
.hero .container img{object-fit:cover;object-position:center;position:absolute;z-index:0;top:0;bottom:0;left:0;right:0;opacity:.75;width:100%;height:100%}
.hero .container .flex .btn:last-child{border-bottom:2px solid;border-radius:0}
.hero .sale{height:unset;margin:0 auto;padding:8px;padding-right:18px;padding-left:10px;background-color:var(--g0x);border-radius:48px}
.hero .sale span:first-child{flex:unset;padding:0 12px;padding-bottom:1px;background-color:var(--primary);border-radius:48px;font-weight:var(--font-semibold);line-height:28px;color:var(--bg)}
.hero.bg{gap:60px;margin-top:-96px;padding-top:calc(36px + 96px);padding-bottom:84px;background-color:var(--primary)}
.hero.bg .container{position:unset;padding:0 60px;border:0;color:var(--bg)}
.hero.bg .container::before{left:50%;transform:translateX(-50%);width:100%;max-width:1600px;background:linear-gradient(90deg,var(--primary) 20%,transparent 50%,var(--primary) 95%)}
.hero.bg .container h1{margin-top:-22px}
.hero.bg .container h1 strong{color:#ffabab!important}
.hero.bg .container .flex .btn:last-child:hover{border-color:#ffabab;color:#ffabab!important}
.hero.bg .container img{top:50%;left:50%;opacity:.4;transform:translate(-50%,-50%);max-width:1280px;margin-left:120px}
.hero.bg .container .btn-primary{background-color:var(--white35);border:1px solid transparent}
.hero.bg .container .btn-primary:hover{border-color:var(--bg)}
.hero.bg .container .btn-tsp{color:var(--bg)!important}
.hero.bg .sale{backdrop-filter:blur(3px);box-shadow:var(--shadow);z-index:2;background-color:var(--white35);border-color:var(--white45);color:var(--bg)!important}
.hero.bg .sale:hover{border-color:var(--bg)}
.navbar-controller.bg+.navbar a{color:var(--bg)}
.navbar-controller.bg+.navbar .navbar-logo{filter:contrast(0) brightness(100)}
/* CLIENT */
.client{margin-bottom:60px}
.client-list{height:60px}
.client-list li img{filter:grayscale(1);max-width:160px;max-height:60px;margin:auto;transition:.15s ease}
.client-list li span{margin:0 30px}
.client-list li span:hover img{filter:grayscale(0)}
.client-list::before{content:' ';display:block;position:absolute;z-index:1;top:0;bottom:0;left:0;width:80px;background:linear-gradient(to right,var(--bg) 25%,transparent 100%)}
.client-list::after{content:' ';display:block;position:absolute;z-index:1;top:0;bottom:0;right:0;width:80px;background:linear-gradient(to left,var(--bg) 25%,transparent 100%)}
/* FEATURED */
.featured{margin-bottom:60px}
.promo-slider ul li a{overflow:hidden;border-radius:24px;display:block}
.promo-slider ul li a[href='#']{pointer-events:none}
.promo-slider .tns-nav{display:flex;gap:8px;z-index:1;margin-top:12px;padding:0 24px}
.promo-slider .tns-nav>*:first-child{margin-left:auto}
.promo-slider .tns-nav>*{opacity:.6;width:10px;height:10px;transition:.15s ease;background-color:var(--g4x);border:2px solid var(--g4x);border-radius:24px}
.promo-slider .tns-nav>*.tns-nav-active{opacity:1;width:24px;background-color:transparent;border-color:var(--primary)}
/* VISI MISI */
.visimisi .cardset{gap:60px;margin-top:60px}
.visimisi .cardset .card{width:calc(33.33333333333333% - 40px);padding:unset;background-color:unset;border:unset}
.visimisi .cardset .card.wide{width:50%}
.visimisi .cardset .card .material-symbol{font-variation-settings:'FILL'1;margin-bottom:12px;font-size:5em;color:var(--primary)}
.visimisi .cardset .card p{margin-top:8px;font-size:16px;color:var(--g5x)}
/* COMPANY PROFILE */
.compfile{padding-top:calc(60px + 48px);padding-bottom:calc(60px + 72px)}
.compfile .container{display:flex;padding:60px;background-color:var(--g0x);border:1px solid var(--g3x);border-radius:24px}
.compfile .container img{width:360px;margin-top:calc(-60px + -48px);margin-bottom:calc(-60px + -72px)}
.compfile .container div{width:45%;margin:auto}
/* SOLUTIONS */
.solutions{padding-bottom:60px}
.solutions .wrapper-right{flex:unset;margin-left:auto}
.solutions .wrapper-right hr:first-of-type{display:none}
.solutions .wrapper-right .accordion{max-width:360px}
.solutions .wrapper-right .accordion .material-symbol{background-color:var(--g3x);border-radius:50%;color:var(--txt)}
.solutions .wrapper-right .accordion .btn{height:unset;padding:36px;background-color:var(--g0x);border-radius:16px}
.solutions .wrapper-right .accordion .btn img{max-width:160px;height:auto;max-height:48px;transition:filter .15s ease}
.solutions .wrapper-right .accordion [accordion=content]{padding:0;color:var(--bg)}
.solutions .wrapper-right .accordion section{transition:.25s ease;border-radius:16px}
.solutions .wrapper-right .accordion section:has(.expand){background-color:var(--primary)}
.solutions .wrapper-right .accordion section:has(.expand) .btn{background-color:transparent;border-color:transparent}
.solutions .wrapper-right .accordion section:has(.expand) .btn img{filter:contrast(0) brightness(100)}
.solutions .wrapper-right .accordion section:has(.expand) .material-symbol{background-color:var(--bg);color:var(--primary)}
.solutions .wrapper-right .accordion section:nth-child(n+2){margin-top:24px}
/* INSTAGRAM */
.insuta{padding:60px 0;background-color:var(--g0x)}
.insuta .right{display:flex;flex-wrap:wrap;gap:24px;width:40%;margin-bottom:auto;margin-left:auto}
.insuta .right>*{margin:auto 0}
.insuta .right .img-ava{width:120px;height:120px}
.insuta .wide .cardset .card{position:relative}
.insuta .wide .cardset .card img:nth-child(2){position:absolute;left:0;right:0}
/* TEAM */
.ourteam{margin-top:60px;padding:60px 0;background-color:var(--g0x)}
.ourteam .cardset .card{width:calc(33.33333333333% - 32px);padding:0;background-color:transparent;border:unset}
.ourteam .cardset .card b{font-size:16px}
.ourteam .cardset .card small{margin-top:6px;margin-bottom:auto;font-size:14px;color:var(--g5x)}
.ourteam .cardset .card hr{margin:12px 0}
.ourteam .img-ava{width:120px}
.ourteam .img-ava img{border-radius:20px}
/* QUICK LINKS */
.quicklinks .the-links .btn{gap:0;height:60px;padding:0 24px}
.quicklinks .the-links .btn span:not([class]){padding:0 12px}
.quicklinks strong{color:var(--primary)}
/* CONTACT PAGE */
.contact-page{padding:60px 0;background-color:var(--primary)}
.contact-page .card{padding:48px;background-color:var(--white25);border:0;border-radius:24px!important;color:var(--bg)}
.contact-page .card .material-symbol{font-size:5em}
.contact-page .card h4{margin:24px 0}
/* RANDOM */
.navbar,.hero,.client,.featured,.visimisi,.compfile,.solutions,.insuta,.footer-contact,.footer-wrap,.breadcrumb-control,.blog-banner,.blog-post,.slider,.footer-copyname,.quicklinks,.blog-featured,.page,.blog-list,.contact-page,.page-banner,.ourteam{padding-left:24px;padding-right:24px}
.navbar nav.left{display:none}
[pop-id=mainmenu] nav.center ul{flex-direction:column;gap:0!important}
[pop-id=mainmenu] nav.center ul li a{display:flex;height:44px;padding:0 16px;border-radius:8px}
[pop-id=mainmenu] nav.center ul li a:hover{background-color:var(--g2x)}
[pop-id=mainmenu] nav.center ul li a span{margin:auto 0}

.wp-block-separator{border-top:1px solid var(--g3x);}

@media (max-width:1360px) {
    .container{max-width:900px}
    .hero .container{padding:36px 24px!important}
    .hero.bg .container{padding:0!important}
    .hero .container h1{font-size:4em}
    .hero.bg .container h1{margin:unset}
    .featured .cardset{gap:24px!important}
    .featured .cardset .card{border-radius:16px!important}
    .hero.bg .container img{margin-left:unset}
    .compfile{padding-bottom:60px;text-align:center}
    .compfile .container{flex-direction:column;padding-bottom:24px;padding-left:24px;padding-right:24px}
    .compfile .container img{margin-left:auto;margin-right:auto;margin-bottom:0;width:240px}
    .compfile .container div{width:unset;max-width:480px;margin:auto;padding-top:24px}
    .solutions .wrapper-left{text-align:center;margin:0 auto}
    .solutions .wrapper-right{flex:unset;width:100%;margin-left:unset;gap:24px!important}
    .solutions .wrapper-right .accordion{max-width:calc(50% - 24px - 1px)}
    .insuta>.flex{flex-direction:column}
    .insuta .right{margin-left:unset;margin-top:24px;width:unset}
    .insuta .cardset{gap:24px!important}
    .insuta .cardset .card{width:calc(33.33333% - 16px);flex:unset!important}
    .insuta .cardset .card:last-child{display:none}
    .footer-widget{row-gap:36px}
    .footer-widget .widget:not(:last-child){min-width:160px}
    .footer-widget .widget:last-child{margin-left:unset;width:unset;max-width:420px}
    .footer-widget h5{margin-bottom:24px;color:var(--primary)}
    .footer-widget ul{line-height:1.6}
    .footer-widget ul li:nth-of-type(n+2){margin-top:12px}
    .footer-copy{padding:24px 0 26px}
    .blog-post .wrapper-right{max-width:280px}
    .ourteam .cardset .card{width:calc(50% - 24px)}
}

@media (max-width:900px) {
    .navbar nav.left{display:block}
    .navbar nav.center{display:none}
    .navbar nav.right span b{display:none}
    .navbar>.container,.navbar>.fluid{gap:24px}
    .compfile{padding-bottom:36px}
    .el-div{margin-top:36px;margin-bottom:36px}
    .footer-wrap{padding-top:36px}
    .footer-widget{padding:36px 0}
    .hero.bg{gap:36px;padding-bottom:36px}
    .visimisi .cardset{gap:36px;margin-top:36px}
    .solutions{padding-bottom:36px}
    .insuta{padding-top:36px;padding-bottom:36px}
    .blog-post{margin-top:36px!important}
    .blog-post .wrapper{gap:36px}
    .blog-banner .img-cover{height:unset}
    .blog-featured .feed{gap:24px!important}
    .blog-featured .feed .card{width:calc(50% - 12px)}
    .blog-featured .feed .card .img-thumb{height:unset}
    .blog-featured::before{height:20%}
    .feed{gap:24px!important}
    .contact-page .cardset{gap:24px!important;max-width:440px;margin:0 auto}
    .contact-page .cardset .card{width:100%;flex:unset!important}
    .ourteam .cardset{gap:36px!important}
    .ourteam .cardset .card{width:calc(50% - 18px)}
}
@media (max-width:720px) {
    .featured .cardset .card{width:calc(50% - 12px)!important;flex:unset!important}
    .featured .cardset .card:last-child{display:none}
    .visimisi .cardset{gap:24px!important}
    .visimisi .cardset .card{width:calc(50% - 12px)!important}
    .insuta .cardset .card{width:calc(50% - 12px)}
    .insuta .cardset .card:last-child{display:initial}
    .solutions .wrapper-right hr{display:none}
    .solutions .wrapper-right .accordion{max-width:100%}
    .blog-post .wrapper-right{max-width:unset}
    .the-links{flex-direction:column}
    .the-links>*{flex:unset!important}
    .feed .card{width:calc(50% - 12px)}
    .ourteam .cardset{gap:24px!important}
    .ourteam .cardset .card{width:100%}
    .formatting{font-size:16px!important}
    h1{font-size:28px}
    h2{font-size:24px}
    h3{font-size:20px}
    h4{font-size:18px}
    h5{font-size:16px}
}

@media (max-width:576px) {
    .footer-contact .container:not(.el-div){padding:36px}
    .blog-featured .feed .card{width:100%}
    .blog-featured .feed .card:last-child{display:none}
    .feed .card{width:100%}
}

@media (max-width:480px) {
    .featured .cardset .card{width:100%!important;flex:unset!important}
    .featured .cardset .card:last-child{display:unset}
    .visimisi .cardset .card,.insuta .cardset .card{width:100%!important}
}