/* Form Css — migrated from Custom CSS/JS #1875. */
/* Base styling untuk semua input dan select yang diberi kelas oleh JS */ .shadcn-input { display: flex; height: 40px; width: 100%; border-radius: 0.375rem; /* 6px */ border: 1px solid var(--input); background-color: var(--background); padding: 0.5rem 0.75rem; /* 8px 12px */ font-size: 0.875rem; /* 14px */ line-height: 1.25rem; color: var(--foreground); transition: all 0.2s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .shadcn-input::placeholder { color: #64748b; } /* Styling saat input/select di-focus */ .shadcn-input:focus, .shadcn-input:focus-visible { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring); } /* --- Styling Khusus untuk Select Box --- */ /* Wrapper untuk select agar bisa menaruh ikon panah */ .shadcn-select-wrapper { position: relative; width: 100%; } .shadcn-select-wrapper .shadcn-input { padding-right: 2.5rem; /* Beri ruang untuk ikon panah */ cursor: pointer; } /* Ikon panah (chevron) */ .shadcn-select-chevron { position: absolute; top: 50%; right: 0.75rem; /* 12px */ transform: translateY(-50%); height: 1.25rem; /* 20px */ width: 1.25rem; /* 20px */ pointer-events: none; /* Agar klik tetap membuka select box */ display: flex; align-items: center; justify-content: center; color: #475569; } /* --- Styling Khusus untuk Search Box --- */ .shadcn-search-wrapper { position: relative; width: 100%; } .shadcn-search-wrapper .shadcn-input { padding-left: 2.5rem; /* Beri ruang untuk ikon search */ } .shadcn-search-icon { position: absolute; top: 50%; left: 0.75rem; transform: translateY(-50%); height: 1.25rem; width: 1.25rem; pointer-events: none; display: flex; align-items: center; justify-content: center; color: #475569; } /* --- Styling untuk Tombol --- */ /* Menargetkan tombol submit Contact Form 7 dan tombol umum */ .wpcf7-form input[type="submit"], button.shadcn-button { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; height: 40px; padding: 0.5rem 1rem; background-color: var(--primary); color: var(--primary-foreground); border: none; cursor: pointer; transition: opacity 0.2s ease-in-out; } .wpcf7-form input[type="submit"]:hover, button.shadcn-button:hover { opacity: 0.9; } .hero-box-container { height: 80vh; min-height: 500px; } .hero-box-container .hero-box-slider.swiper, .hero-box-container .swiper-wrapper, .hero-box-container .swiper-slide { height: 100%; }

/* Stacked.css — migrated from Custom CSS/JS #1533. */
/* Atur Section utama agar elemen sticky berfungsi dengan baik */
  #stacked-cards-container {
    overflow: visible !important;
  }

  /* Beri jarak antar kartu */
  #stacked-cards-container .elementor-inner-section {
    margin-bottom: 20vh; /* Jarak antar kartu, bisa disesuaikan */
  }

  /* Pengaturan dasar untuk setiap kartu */
  .sticky-card {
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* Jarak awal dari atas layar */
    will-change: transform, opacity; /* Optimasi performa animasi */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Animasi mulus */
  }

  /* Atur urutan tumpukan (z-index) untuk setiap kartu */
  #stacked-cards-container .elementor-inner-section:nth-of-type(1) .sticky-card { z-index: 1; }
  #stacked-cards-container .elementor-inner-section:nth-of-type(2) .sticky-card { z-index: 2; }
  #stacked-cards-container .elementor-inner-section:nth-of-type(3) .sticky-card { z-index: 3; }
  #stacked-cards-container .elementor-inner-section:nth-of-type(4) .sticky-card { z-index: 4; }
  /* Tambahkan jika kartunya lebih dari 4 */

/* Contact Form — migrated from Custom CSS/JS #1386. */
/* Styling umum untuk form */
.wpcf7-form {
    color: #333;
}

/* Menghapus tag <p> bawaan CF7 */
.wpcf7-form p {
    margin: 0;
}

/* Styling untuk label */
.wpcf7-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #4A5568; /* Warna abu-abu gelap */
}

/* Styling untuk semua input, select, dan textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #E2E8F0; /* Border abu-abu muda */
    border-radius: 8px; /* Sudut membulat */
    margin-bottom: 20px;
    box-sizing: border-box; /* Penting untuk padding */
    font-size: 16px;
    background-color: #FFFFFF;
}

.wpcf7-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234A5568%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: .65em auto;
}

.wpcf7-form textarea {
    height: 150px;
    resize: vertical;
}

/* Styling untuk placeholder */
.wpcf7-form ::placeholder {
    color: #A0AEC0; /* Warna abu-abu lebih muda */
    opacity: 1;
}

/* Layout untuk baris dengan dua kolom */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Jarak antar kolom */
}

.form-half {
    flex: 1;
    min-width: calc(50% - 10px);
}

/* Styling untuk checkbox */
.wpcf7-form .wpcf7-acceptance {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    margin-right: 10px;
    width: auto;
}

.wpcf7-form .wpcf7-list-item-label {
    font-weight: normal;
    font-size: 14px;
}


/* Styling untuk tombol submit */
.wpcf7-form .wpcf7-submit {
    background-color: #4A634D !important; /* Warna hijau tua */
    color: white !important;
    padding: 15px 30px;
    border: none;
    border-radius: 9999px; /* Membuat sangat bulat */
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.wpcf7-form .wpcf7-submit:hover {
    background-color: #3B503E; /* Warna hijau lebih gelap saat hover */
}

/* Responsif untuk layar kecil */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    .form-half {
        min-width: 100%;
    }
}

.wpcf7-not-valid-tip {
  display: none !important;
}

.wpcf7-not-valid {
    border-color: red !important;
}

.wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 1em 1em;
    border: 2px solid #00a0d2;
    border-width: 1px;
    text-align: center;
    border-radius: 10px;
    font-weight: 600;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    color: #3A6742;
    background: #EAF1EB;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ff0000;
    color: #ae0505;
    background: #fbefef;
}

/* Custom Theme — migrated from Custom CSS/JS #59. */
.bg-blur {
    backdrop-filter: blur(10px);
}

.hfe-nav-menu__layout-horizontal {
    width: fit-content !important;
}

.main-nav {
/*     content: ""; */
/*     width: 100%; */
/*     height: 83px; */
/*     background: color(display-p3 1.000 1.000 1.000 / 0.05); */
    background: color(display-p3 000 000 000 / 0.20);
    backdrop-filter: blur(6px);
    border-radius: 83px;
}


@media (max-width: 1024px) {
    .main-nav {
        border-radius: 0;
    }
}

.main-nav.scrolled {
/* 	background: rgba(49, 133, 79, 0.6); */
/* 	background: color(display-p3 0.286 0.514 0.329 / 0.6); */
}

.main-nav.scrolled .hfe-site-logo-img {
    filter: invert(1);
}

.main-nav.scrolled  a.hfe-menu-item {
    color: #000 !important;
}

.main-nav.scrolled .elementor-button-link {
    background-color: var( --e-global-color-primary) !important;
    color: #FFF !important;
}

.main-nav.scrolled .popup-menu-trigger {
    color: #000 !important;
}

.sticky-section {
    position: sticky;
    top: 50px;
}

.icon-list .elementor-icon-list-icon {
    background-color: hsl(130.67deg 19.84% 63.55% / 16%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    align-content: center;
    border-radius: 24px;
    justify-items: center;
}

.icon-list .elementor-icon-list-icon svg {
     width: 14px;
    height: 14px;
    display: block !important;
    margin: auto !important;
    position: relative;
    left: 4px;
}

.current-menu-item > a {
    font-weight: bold !important;
}

.counter {
  transition: all 0.3s ease-in-out;
}


.torn-bg-1 {
  -webkit-mask-image: url('/wp-content/uploads/2025/07/card-green.png');
  mask-image: url('/wp-content/uploads/2025/07/card-green.png');

  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.torn-bg-2 {
-webkit-mask-image: url('/wp-content/uploads/2025/07/card-2.png');
  mask-image: url('/wp-content/uploads/2025/07/card-2.png');

  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.torn-bg-3 {
-webkit-mask-image: url('/wp-content/uploads/2025/07/card-3.png');
  mask-image: url('/wp-content/uploads/2025/07/card-3.png');

  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


@media screen and (min-width: 767px) {
    .elementor-20 .elementor-element.elementor-element-317e8e0 .sub-menu a.hfe-sub-menu-item {
        color: #333;
        padding: 12px 15px;
        border-radius: 8px;
        margin-bottom: 4px;
    }

    .elementor-20 .elementor-element.elementor-element-317e8e0 .sub-menu {
        background-color: #ffffff;
        border-radius: 15px;
        overflow: hidden;
        border: 5px solid white;
    }

    .hfe-nav-menu .sub-menu li.menu-item .hfe-sub-menu-item-active {
        background: #EAF1EB;
        color: var(--e-global-color-primary) !important;
    }

    .hfe-nav-menu .sub-menu li.menu-item:hover {
        background: #EAF1EB;
        border-radius: 8px;
    }

    .elementor-20 .elementor-element.elementor-element-317e8e0 .sub-menu li.menu-item:not(:last-child) {
        border-bottom: 0;
    }
}

.xpro-elementor-content p {
    margin-bottom: 20px;
}

.xpro-elementor-content ol {
    font-size: 18px;
    list-style: decimal;
    padding-left: 20px;
}

.xpro-elementor-content ul {
    font-size: 18px;
    padding-left: 20px;
    list-style: disc;
}

.xpro-elementor-content ol li,
.xpro-elementor-content ul li{
    margin-bottom: 20px;
}


.xpro-elementor-content h2 {
    font-size: 32px;
}

.xpro-elementor-content h3 {
    font-size: 24px;
}

.xpro-elementor-content h4 {
    font-size: 20px;
}


.xpro-elementor-content h3,
.xpro-elementor-content h4,
.xpro-elementor-content h2 {
        font-family: "Lilita One", Sans-serif;
        margin-bottom: 20px;
        text-transform: uppercase;
}

.xpro-elementor-content hr,
.elementor-divider{
    background: url(/wp-content/uploads/2025/08/Divider.png);
    padding: 20px 0;
    background-repeat: repeat-x;
    border: 0;
}

.elementor-divider .elementor-divider-separator {
    visibility: hidden;
}

.wp-block-quote-is-layout-flow {
    border-left: 0;
    background-image: url(/wp-content/uploads/2025/08/blockquote.png);
    background-repeat: repeat-y;
    background-position: left top;
    padding-left: 2rem;
}


.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    width: 100%;
}

.wp-block-columns {
    background: #EAF1EB;
    border-radius: 20px;
    margin: 30px 0;
    padding: 32px;
}

.tagging-green {
    background: #EAF1EB;
    color: #3A6742;
    font-weight: bold;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 4px;
}

.tagging-white {
    background: #FFF;
    color: #3A6742 !important;
    font-weight: bold;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 4px;
}


span.hfe-post-info__terms-list {
    background: #EAF1EB;
    padding: 8px 12px;
    border-radius: 8px;
}

.elementor-20 .elementor-element.elementor-element-1a7926a > .elementor-widget-container {
    background-size: 100% 100%;
}

.home .elementor-shortcode select.wpml-lang-dropdown, .wpml-elementor-ls {
    display: none;
}