.elementor-29 .elementor-element.elementor-element-8f8f949{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS *//* =========== Vermillion Hills — Enhanced CSS ============= */
/* Paste ke: Elementor Pro -> Page Settings -> Custom CSS (atau Appearance -> Additional CSS) */

/* Base container */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px;
  box-sizing: border-box;
}

/* Card style (consistent) */
.card {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 28px rgba(9,10,12,0.04);
  box-sizing: border-box;
}

/* Typography */
h1, h2, h3 { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin: .25rem 0 .6rem; color: #071017; line-height: 1.18; }
h1 { font-size: clamp(20px, 2.6vw, 28px); }
h2 { font-size: clamp(18px, 2.2vw, 22px); }
h3 { font-size: clamp(16px, 1.8vw, 18px); }
p, li, .muted { font-size: 14px; color: #5f6a6a; line-height:1.6; }

/* Buttons */
.btn {
  display: inline-block;
  background: #0f7a3b;
  color: #fff;
  padding: 11px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ transform: translateY(-3px); box-shadow: 0 8px 20px rgba(15,122,59,0.12); }
.btn.ghost {
  background: transparent;
  color: #0f7a3b;
  border: 2px solid #0f7a3b;
}

/* Hero layout (responsive safety) */
.hero { display: grid; grid-template-columns: 1fr 420px; gap: 20px; align-items:start; }
@media (max-width: 980px){ .hero { grid-template-columns: 1fr; } }

/* Image handling (cover + responsive) */
.card img, .gallery img, .wrap img { width:100%; height:auto; display:block; object-fit:cover; }
.gallery { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
@media (max-width:980px){ .gallery { grid-template-columns: repeat(2,1fr); } }

/* Gallery image fixed height but responsive crop */
.gallery img { height: 110px; object-fit:cover; border-radius:8px; }

/* Features grid */
.features { display:flex; gap:12px; flex-wrap:wrap; margin-top:14px }
.feat { background:#f8faf8; padding:10px; border-radius:10px; font-weight:700; color:#0f7a3b; }

/* Columns */
.columns { display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width:980px){ .columns { grid-template-columns: 1fr; } }

/* Floating WA button */
.floating-wa {
  position: fixed;
  right: 16px;
  bottom: 18px;
  background: linear-gradient(90deg,#16a34a,#0f7a3b);
  color: #fff;
  padding: 12px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(15,122,59,0.18);
  text-decoration: none;
  font-weight:800;
  z-index: 99999;
  display: inline-flex;
  align-items:center;
  gap:8px;
}
@media (min-width:1200px){ .floating-wa { bottom: 30px; } }

/* Countdown style */
.countdown { font-weight:800; color:#ef4444; font-size:15px; }

/* Form styling */
form#leadForm { display:block; margin-top:8px }
form#leadForm .input, form#leadForm select, form#leadForm textarea {
  width:100%; padding:10px; border-radius:8px; border:1px solid #e6e9ee; margin-bottom:8px; font-size:14px; box-sizing:border-box;
}
form#leadForm button[type="submit"] { padding: 11px 14px; border:0; border-radius:10px; cursor:pointer; }

/* FAQ details styling */
.faq details { background: #fff; padding: 10px 12px; border-radius:8px; margin-bottom:8px; border:1px solid #eef5ee; }
.faq summary { cursor: pointer; font-weight:700; font-size:15px; }
.faq details[open] { box-shadow: 0 6px 20px rgba(9,10,12,0.04); }

/* Card spacing utilities */
.vh-section { margin-top: 18px; }

/* Accessibility: focus outlines for keyboard users */
a:focus, button:focus, input:focus, select:focus { outline: 3px solid rgba(15,122,59,0.12); outline-offset: 2px; }

/* Small screens: tighten paddings */
@media (max-width:480px){
  .wrap { padding: 14px; }
  .btn { padding: 10px 12px; font-size:14px; }
  h1 { font-size:20px; }
  .hero aside img { height: 200px; }
}

/* Prevent layout shift: reserve image space */
img { max-width:100%; display:block; }
img[width][height] { -o-object-fit: cover; object-fit:cover; }

/* Micro-animations for CTAs (subtle) */
.btn { will-change: transform; transform-origin:center; }

/* Sticky header (optional) - enable if you want header fixed */
.vh-sticky-header {
  position: sticky; top: 0; z-index: 9998; backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(9,10,12,0.04);
}

/* Utility: hide elements on mobile when needed */
.hide-mobile { display: inline-block; }
@media (max-width:600px){ .hide-mobile { display:none !important; } }

/* Small SEO helper: visually-hidden for screen readers */
.visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* End of Vermillion Hills Enhanced CSS *//* End custom CSS */