.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-1312 .elementor-element.elementor-element-a75630e{--display:flex;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}/* Start custom CSS for html, class: .elementor-element-01a719c *//* =========================================================================
   CSS PERAPIAN - JAGUAR EPOXY LANDING PAGE
   Pasang di: Elementor > Site Settings > Advanced > Custom CSS (global)
   =========================================================================
   PENTING: Kalau kamu masih pakai CSS full-width breakout yang aku
   kasih sebelumnya (yang pakai "width: 100vw; margin-left: calc(-50vw..)")
   di kotak Custom CSS PER-SECTION, hapus dulu itu. Teknik itu berisiko
   menyebabkan overflow horizontal yang bisa memicu ruang kosong aneh di
   halaman. CSS di bawah ini pakai cara yang lebih aman untuk full-width.
   ========================================================================= */

:root {
  --color-primary: #C4181F;
  --color-primary-dark: #8F1017;
  --color-dark: #1C1F24;
  --color-light: #FFFFFF;
  --color-gray-bg: #F5F6F8;
  --color-border: #E5E7EB;
  --section-spacing: 80px;
}

/* ============ 1. FULL WIDTH YANG AMAN (tanpa 100vw) ============ */
/* Cara aman: pastikan Section di Elementor pakai opsi "Stretch Section"
   (Layout > Content Width > Full Width, lalu di tab Advanced aktifkan
   "Stretch Section" = Yes). CSS ini jadi pelengkap saja: */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 100% !important;
}
html, body {
  overflow-x: hidden !important;
  width: 100%;
}

/* ============ 2. JARAK ANTAR-SECTION KONSISTEN ============ */
.elementor-section {
  padding-top: var(--section-spacing) !important;
  padding-bottom: var(--section-spacing) !important;
}
/* Hero & CTA band boleh sedikit lebih besar */
.hero, .closing-cta, .final-cta {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

/* ============ 3. CARD "MENGAPA MEMILIH" - DIKASIH KOTAK & BAYANGAN ============ */
.why-us .feature,
.elementor-widget-wrap .feature {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary) !important;
  border-radius: 10px;
  padding: 24px 24px 24px 24px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.why-us .feature:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.why-us .feature h3 {
  color: var(--color-dark);
  margin-bottom: 10px !important;
}
.why-us .feature p {
  margin: 0;
}

/* Kasih jarak antar card lebih lega */
.why-us {
  gap: 24px !important;
}

/* ============ 4. GAMBAR PROYEK - RAPIKAN RASIO & SUDUT ============ */
.coverage img {
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  max-height: 520px;
  object-fit: cover;
  width: 100%;
}

/* ============ 5. FOOTER - RAPIKAN GRID KOLOM ============ */
footer, .elementor-location-footer {
  padding-top: 56px !important;
  padding-bottom: 32px !important;
}
footer .elementor-container,
.elementor-location-footer .elementor-container {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
footer h3, .elementor-location-footer h3,
footer h4, .elementor-location-footer h4 {
  color: #FFFFFF !important;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px !important;
}
footer a, .elementor-location-footer a {
  color: #B8BCC3 !important;
  font-size: 14px;
  line-height: 2;
  text-decoration: none;
}
footer a:hover, .elementor-location-footer a:hover {
  color: #FFFFFF !important;
}

/* ============ 6. FAQ - KASIH JARAK LEBIH LEGA ANTAR ITEM ============ */
.faq-item {
  padding: 24px 0 !important;
}
.faq-item h3 {
  color: var(--color-dark);
}

/* ============ 7. TOMBOL WHATSAPP FLOATING - JANGAN NUTUP KONTEN ============ */
.elementor-whatsapp-widget,
.whatsapp-float-button {
  z-index: 999 !important;
  bottom: 20px !important;
  right: 20px !important;
}

/* ============ 8. RESPONSIVE ============ */
@media (max-width: 768px) {
  :root { --section-spacing: 48px; }
  .why-us .feature { margin-bottom: 16px !important; }
  footer .elementor-container,
  .elementor-location-footer .elementor-container {
    flex-direction: column;
    gap: 28px;
  }
}/* End custom CSS */