/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Global Style */

body .e-con>.e-con-inner>.elementor-widget>.elementor-widget-container, 
body .e-con>.elementor-widget>.elementor-widget-container {
	height: auto;
}

body {
	overflow-x: hidden !important;
}

html,body {
	text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

body img,
body svg {
	image-rendering: -webkit-optimize-contrast !important;
}

/* remove the below if you don't want smooth scrolling */

html,
body {
  scroll-behavior: smooth;
}

p:last-child {
	margin-bottom: 0 !important;
}

:focus-visible {
    outline: none !important;
}

.page-id-80 .rch-header {
	background-color: #FFF !important;
}

.post-type-archive-product .rch-header {
	background-color: #FFF !important;
}

.rch-header.elementor-sticky--active.show {
    transition: all linear 300ms;
    box-shadow: 0px 1px 15px 0px rgb(8 15 52 / 6%);
    background-color: #0f1010 !important;
}


/*.single-post .rch-header.elementor-sticky--active.show,
.post-type-archive-product .rch-header.elementor-sticky--active.show,
.single-product .rch-header.elementor-sticky--active.show,
.page-id-68 .rch-header.elementor-sticky--active.show,
.page-id-80 .rch-header.elementor-sticky--active.show {
	transition: all linear 300ms;
    box-shadow: 0px 1px 15px 0px rgb(8 15 52 / 6%);
    background-color: #EEEFF2 !important;
}*/

.single-post .rch-header .rch-logo img,
.post-type-archive-product .rch-header .rch-logo img,
.single-product .rch-header .rch-logo img,
.page-id-68 .rch-header .rch-logo img,
.page-id-80 .rch-header .rch-logo img {
	filter: brightness(1) invert(0) !important;
}

.highlight {
	color: #262626 !important;
}

.highlight-white {
	color: #FFF !important;
}

#btn-submit {
    margin-top: 16px;
}

.rch-expander.elementor-element {
	flex: 1 !important;
}

/* Header */
.rch-header .rch-logo img, .single-post .rch-header .rch-logo img {
	filter: brightness(0) invert(1) !important;
}

.rch-header .elementor-icon svg path {
    fill: #FFF !important;
}

.rch-header .elementor-nav-menu--main .elementor-item {
	color: #FFF !important;
}

.elementor-nav-menu .sub-arrow svg path {
	fill: #FFF !important;
}

.blog .rch-header .rch-logo img,
.page-id-83 .rch-header .rch-logo img {
	filter: brightness(1) invert(0) !important;
}

.post-type-archive-product .rch-header.elementor-sticky--active.show .rch-logo img,
.single-product .rch-header.elementor-sticky--active.show .rch-logo img, 
.page-id-80 .rch-header.elementor-sticky--active.show .rch-logo img,
.page-id-68 .rch-header.elementor-sticky--active.show .rch-logo img,
.page-id-83 .rch-header.elementor-sticky--active.show .rch-logo img,
.blog .rch-header.elementor-sticky--active.show .rch-logo img {
	filter: brightness(0) invert(1) !important;
}

.post-type-archive-product .rch-header .elementor-icon svg path,
.single-product .rch-header .elementor-icon svg path,
.page-id-80 .rch-header .elementor-icon svg path,
.page-id-83 .rch-header .elementor-icon svg path,
.page-id-68 .rch-header .elementor-icon svg path,
.blog .rch-header .elementor-icon svg path,
body:not(.home) .elementor-nav-menu .sub-arrow svg path {
    fill: #0f1010 !important;
}

.post-type-archive-product .rch-header.elementor-sticky--active.show .elementor-icon svg path,
.single-product .rch-header.elementor-sticky--active.show .elementor-icon svg path,
.page-id-80 .rch-header.elementor-sticky--active.show .elementor-icon svg path,
.page-id-83 .rch-header.elementor-sticky--active.show .elementor-icon svg path,
.page-id-68 .rch-header.elementor-sticky--active.show .elementor-icon svg path,
.blog .rch-header.elementor-sticky--active.show .elementor-icon svg path,
.page-id-80 .rch-header.elementor-sticky--active.show .elementor-nav-menu .sub-arrow svg path,
.page-id-83 .rch-header.elementor-sticky--active.show .elementor-nav-menu .sub-arrow svg path,
.page-id-68 .rch-header.elementor-sticky--active.show .elementor-nav-menu .sub-arrow svg path,
.blog .rch-header.elementor-sticky--active.show .elementor-nav-menu .sub-arrow svg path {
    fill: #FFF !important;
}

.post-type-archive-product .rch-header .rch-menu-header .elementor-nav-menu--main .elementor-item,
.single-product .rch-header .rch-menu-header .elementor-nav-menu--main .elementor-item, 
.page-id-80 .rch-header .rch-menu-header .elementor-nav-menu--main .elementor-item,
.page-id-83 .rch-header .rch-menu-header .elementor-nav-menu--main .elementor-item,
.page-id-68 .rch-header .rch-menu-header .elementor-nav-menu--main .elementor-item,
.blog .rch-header .rch-menu-header .elementor-nav-menu--main .elementor-item  {
	color: #0f1010 !important;
}

.post-type-archive-product .rch-header.elementor-sticky--active.show .elementor-nav-menu--main .elementor-item,
.single-product .rch-header.elementor-sticky--active.show .elementor-nav-menu--main .elementor-item,
.page-id-80 .rch-header.elementor-sticky--active.show .elementor-nav-menu--main .elementor-item,
.page-id-83 .rch-header.elementor-sticky--active.show .elementor-nav-menu--main .elementor-item,
.page-id-68 .rch-header.elementor-sticky--active.show .elementor-nav-menu--main .elementor-item,
.blog .rch-header.elementor-sticky--active.show .elementor-nav-menu--main .elementor-item {
	color: #FFF !important;
}

/* Post */
.rch-post-content H2 {
    font-family: "Inter", Sans-serif;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 1.5rem;
}

.rch-post-content H3 {
    font-family: "Inter", Sans-serif;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 1.375rem;
}

.rch-post-content H4 {
    font-family: "Inter", Sans-serif;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 1.25rem;
}

.rch-post-content H5 {
    font-family: "Inter", Sans-serif;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 1.15rem;
}

.rch-post-content H5 {
    font-family: "Inter", Sans-serif;
    letter-spacing: 0;
    font-weight: 700;
    font-size: 1.05rem;
}

.rch-post-content ul {
    margin: 20px 0
}

.rch-post-content li {
    margin: 5px 0;
}

.rch-post-content figure.wp-block-gallery.has-nested-images {
	margin: 30px 0;
	gap: 16px;
}

/* Product */
.rch-gallery .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image {
	margin: 0 32px;
}

.rch-product-img img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.page-id-1013 .jet-cw-custom-field {
	font-family: var(--e-global-typography-ac222aa-font-family), Sans-serif;
    font-size: var(--e-global-typography-ac222aa-font-size);
    font-weight: var(--e-global-typography-ac222aa-font-weight);
    text-transform: var(--e-global-typography-ac222aa-text-transform);
    line-height: var(--e-global-typography-ac222aa-line-height);
    letter-spacing: var(--e-global-typography-ac222aa-letter-spacing);
}

.rch-filter-product-archive.elementor-widget-n-accordion .e-n-accordion-item {
        border-bottom: 1px solid rgb(216, 216, 219) !important;
        border-top: 1px solid #EEE;
        padding: 10px 0;
}

.rch-filter-product-archive.elementor-widget-n-accordion .e-n-accordion-item:first-child {
        border-bottom: 1px solid rgb(216, 216, 219);
        border-top: none;
        padding-top: 0;
}


#rch-button .elementor-button-icon svg {
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

#rch-button:hover .elementor-button-icon svg {
    transform: translateX(6px);
}

.jet-cw-custom-field {
    font-weight: 400;
    font-size: 24px !important;
    line-height: 1.5em;
    letter-spacing: 5%;
    color: #000000;
}

/* Timeline */
/* ===== Timeline horizontal (VT) =====
   Tempel di Elementor > Site Settings > Custom CSS.
   Semua aturan hanya berlaku untuk .vt-timeline, tidak mengubah bagian lain website. */

/* paksa widget HTML yang berisi timeline memakai lebar penuh */
.rch-timeline .elementor-widget-html:has(.vt-timeline),
.elementor-widget-html:has(.vt-timeline) > .elementor-widget-container{
  width:100% !important;
  max-width:100% !important;
  flex:1 1 100% !important;
  align-self:stretch !important;
}

.vt-timeline{
  --vt-bg:#eeeff3;
  --vt-ink:#111111;
  --vt-muted:#8a8a8f;
  --vt-year-size:40px;
  --vt-title-size:24px;
  --vt-desc-size:16px;
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(300px,31.46%));
  justify-content:start;
  width:100%;
  min-width:900px;
  height:426px;
  overflow:hidden;
  background:var(--vt-bg);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  box-sizing:border-box;
}
.vt-timeline *,
.vt-timeline *::before,
.vt-timeline *::after{box-sizing:border-box;}

/* garis putus-putus horizontal */
.vt-timeline::before{
  content:"";
  position:absolute;
  left:0;right:0;top:201px;height:2px;
  background:repeating-linear-gradient(90deg,#8e8e93 0,#8e8e93 10px,transparent 10px,transparent 17px);
}

.vt-timeline .vt-item{
  position:relative;
  height:426px;
  min-width:300px;
  margin:0;padding:0;
}

.vt-timeline .vt-item .vt-year{
  position:absolute;top:56px;left:84.1%;
  transform:translateX(-50%);
  margin:0 !important;
  padding:0 0 0 .12em !important;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size:var(--vt-year-size) !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  line-height:1 !important;
  text-transform:none !important;
  color:var(--vt-ink) !important;
  white-space:nowrap !important;
  width:auto !important;
  font-weight: 700 !important;
}
.vt-timeline .vt-item .vt-dot{
  position:absolute;top:129px;left:84.1%;
  width:12px;height:12px;border-radius:50%;
  background:var(--vt-ink);
  transform:translateX(-50%);
}
.vt-timeline .vt-item .vt-stem{
  position:absolute;top:135px;left:84.1%;
  width:2px;height:110px;
  background:var(--vt-ink);
  transform:translateX(-50%);
  transform-origin:top center;
}
.vt-timeline .vt-item .vt-icon{
  position:absolute;top:243px;left:84.1%;
  width:63px;height:63px;border-radius:50%;
  background:var(--vt-ink);
  transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;
}
.vt-timeline .vt-item .vt-icon svg{
  width:30px;height:30px;
  stroke:#fff;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.vt-timeline .vt-item .vt-text{
  position:absolute;top:230px;left:19.35%;
  width:270px !important;
  min-width:270px !important;
  max-width:none !important;
}
.vt-timeline .vt-item .vt-text h3{
  margin:0 0 14px !important;
  padding:0 !important;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size:var(--vt-title-size) !important;
  font-weight:700 !important;
  line-height:31px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--vt-ink) !important;
}
.vt-timeline .vt-item .vt-text p{
  margin:0 !important;
  padding:0 !important;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size:var(--vt-desc-size) !important;
  font-weight:300 !important;
  line-height:1.5em !important;
  letter-spacing:0 !important;
  color:var(--vt-muted) !important;
}

/* ===== Animasi: muncul satu per satu (dipicu class .vt-play dari script di widget HTML) ===== */
.vt-timeline .vt-year,
.vt-timeline .vt-dot,
.vt-timeline .vt-stem,
.vt-timeline .vt-icon,
.vt-timeline .vt-text{opacity:0;}

.vt-timeline.vt-play::before{animation:vtLine 4.6s linear both;}
.vt-timeline.vt-play .vt-year{animation:vtDown .6s ease-out both;animation-delay:calc(var(--i)*1.5s);}
.vt-timeline.vt-play .vt-dot{animation:vtPop .35s ease-out both;animation-delay:calc(var(--i)*1.5s + .45s);}
.vt-timeline.vt-play .vt-stem{animation:vtGrow .5s ease-out both;animation-delay:calc(var(--i)*1.5s + .7s);}
.vt-timeline.vt-play .vt-icon{animation:vtPop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i)*1.5s + 1.2s);}
.vt-timeline.vt-play .vt-text{animation:vtUp .6s ease-out both;animation-delay:calc(var(--i)*1.5s + 1.35s);}

@keyframes vtLine{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
@keyframes vtDown{from{opacity:0;translate:0 -24px;}to{opacity:1;translate:0 0;}}
@keyframes vtPop{from{opacity:0;scale:.2;}to{opacity:1;scale:1;}}
@keyframes vtGrow{from{opacity:1;scale:1 0;}to{opacity:1;scale:1 1;}}
@keyframes vtUp{from{opacity:0;translate:0 16px;}to{opacity:1;translate:0 0;}}

@media (prefers-reduced-motion:reduce){
  .vt-timeline .vt-year,
  .vt-timeline .vt-dot,
  .vt-timeline .vt-stem,
  .vt-timeline .vt-icon,
  .vt-timeline .vt-text{opacity:1 !important;animation:none !important;}
  .vt-timeline::before{animation:none !important;}
}

/* ===== Tablet ===== */
@media (max-width:1024px){
  .vt-timeline{
    --vt-year-size:30px;
    --vt-title-size:21=0px;
    --vt-desc-size:15px;
    min-width:0;
    grid-template-columns:repeat(3,1fr);
  }
  .vt-timeline .vt-item{min-width:0;}
  .vt-timeline .vt-item .vt-icon{width:52px;height:52px;}
  .vt-timeline .vt-item .vt-icon svg{width:24px;height:24px;}
  .vt-timeline .vt-item .vt-text{left:8%;width:62% !important;min-width:0 !important;}
  .vt-timeline .vt-item .vt-text h3{line-height:26px !important;}
  .vt-timeline .vt-item .vt-text p{line-height:24px !important;}
	.jet-cw-custom-field {
		font-size: 20px !important;
	}
}

@media (min-width:1024px){
  .year{font-size:32px;}
  .text h3{font-size:22px;line-height:26px;}
  .text p{font-size:16px;line-height:24px;}
  .icon{width:52px;height:52px;}
  .icon svg{width:22px;height:24px;}
  .text{left:8%;width:62%;}
	.jet-cw-custom-field {
		font-size: 20px !important;
	}
}

@media screen and (max-width: 767px) {
	.rch-gallery .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image {
		margin: 0;
	}
	.vt-text h3 {
		font-size: 18px;
	}
	
	.jet-cw-custom-field {
		font-size: 18px !important;
	}
}