/*Add your customer CSS for the landing page/frontend here*/

/* ===== CONTACT PAGE ===== */
.contact .page-wrapper {
  padding-top: 100px !important;
}

/* Header */
.contact .contact-details h3 {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #2b2350 !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

/* Form wrapper */
.contact #contact-us-form {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 40px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
}

/* Left column */
.contact .contact-details {
  padding: 40px 36px !important;
  background: #f7f8fe;
  height: 100%;
}

/* Right column form */
.contact .contact-form {
  padding: 40px 36px !important;
}

/* Form labels */
.contact .contact-form label.control-label {
  font-weight: 600 !important;
  color: #374151 !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
}

/* Form inputs */
.contact .contact-form .form-control {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: #2b2350 !important;
  background: #fafbff !important;
  transition: border-color 0.2s !important;
}
.contact .contact-form .form-control:focus {
  border-color: #6772e5 !important;
  box-shadow: 0 0 0 3px rgba(103,114,229,0.1) !important;
  background: #fff !important;
  outline: none !important;
}

/* Submit button */
.contact .contact-form .site_btn {
  background: #6772e5 !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 32px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.1s !important;
}
.contact .contact-form .site_btn:hover {
  background: #5a63d0 !important;
  transform: translateY(-1px) !important;
}

/* Form group spacing */
.contact .contact-form .form-group {
  margin-bottom: 20px !important;
}

/* ===== CTA SECTIONS — FORCE WHITE TEXT =====
   Theme CSS overrides inline color on h1/h2/h3/p inside gradient/dark CTA blocks.
   Target: any div that explicitly sets color:#fff or color:white (all CTA containers).
   Exclude <a> tags so button text colors remain intentional.
   ================================================= */

/* Old pages: color:#fff on container */
div[style*="color:#fff"] h1,
div[style*="color:#fff"] h2,
div[style*="color:#fff"] h3,
div[style*="color:#fff"] p {
  color: #fff !important;
}

/* Old pages: color:white on container */
div[style*="color:white"] h1,
div[style*="color:white"] h2,
div[style*="color:white"] h3,
div[style*="color:white"] p {
  color: #fff !important;
}

/* New product pages: already use color:white !important inline,
   but also catch any span labels inside dark hero sections */
div[style*="color:white"] span,
div[style*="color:#fff"] span {
  color: inherit;
}

/* ===== END CTA FIX ===== */

/* Mobile */
@media (max-width: 767px) {
  .contact #contact-us-form .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .contact .contact-details {
    padding: 28px 20px !important;
  }
  .contact .contact-form {
    padding: 28px 20px !important;
  }
  .contact .contact-details h3 {
    font-size: 1.5rem !important;
  }
}

/* ===== RESPONSIVE: HALAMAN CUSTOM (MOBILE) =====
   Berlaku untuk semua halaman /page/* dengan inline HTML.
   ================================================= */

@media (max-width: 600px) {

  /* 1. Hero H1 — kurangi font size */
  div[style*="background:linear-gradient"] h1 {
    font-size: 1.65rem !important;
    line-height: 1.3 !important;
  }

  /* 2. Hero — kurangi padding atas/bawah */
  div[style*="border-radius:24px"][style*="background:linear-gradient"] {
    padding-top: 36px !important;
    padding-bottom: 32px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 3. CTA buttons — stack vertikal di mobile */
  a[style*="display:inline-block"][style*="border-radius:10px"],
  a[style*="display:inline-block"][style*="border-radius:12px"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    min-width: 200px !important;
    box-sizing: border-box !important;
  }

  /* 4. Flex row stats di hero — wrap ke kolom */
  div[style*="display:flex"][style*="justify-content:center"][style*="gap:16px"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* 5. Internal links "Baca Juga" — 1 kolom */
  div[style*="minmax(190px,1fr)"],
  div[style*="minmax(200px,1fr)"] {
    grid-template-columns: 1fr !important;
  }

}

@media (max-width: 400px) {
  /* Extra small screens */
  div[style*="background:linear-gradient"] h1 {
    font-size: 1.4rem !important;
  }
  div[style*="max-width:1000px"],
  div[style*="max-width:960px"],
  div[style*="max-width:900px"],
  div[style*="max-width:860px"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ===== END RESPONSIVE ===== */