/* ===================================================
   BOOTSTRAP UTILITY SUPPORT (CLIENT SAFE)
   =================================================== */

/* ---------- GLOBAL SAFETY ---------- */
html, body {
  overflow-x: hidden;
}

/* ---------- CONTAINER FIX ----------
   Avoid conflict with old margin hacks
----------------------------------- */
.container {
  padding-left: 16px;
  padding-right: 16px;
}

/* ---------- SECTION SPACING ----------
   Use with: class="section"
----------------------------------- */
.section {
  padding: 80px 0;
}

@media (max-width: 768px) {
  .section {
    padding: 60px 0;
  }
}

/* ---------- LEGACY MARGIN OVERRIDES (MOBILE ONLY)
   Keeps desktop EXACTLY same
----------------------------------- */
@media (max-width: 768px) {

  .safari-sectionp,
  .vison-section,
  .map-section,
  .safari-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------- IMAGE SAFETY ----------
   Prevent tall / broken crops
----------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

/* ---------- SAFARI / VISION IMAGE FIX ---------- */
@media (max-width: 768px) {
  .safari-image img,
  .vision-image img {
    height: auto;
    border-radius: 12px;
  }
}

/* ---------- TEXT WIDTH CONTROL ----------
   Keeps text readable on large screens
----------------------------------- */
.text-narrow {
  max-width: 720px;
}

/* ---------- HERO SAFETY ----------
   (Does NOT change visuals)
----------------------------------- */
.hero,
.vison-section {
  position: relative;
}

/* ---------- FOOTER SAFETY ----------
   Bootstrap-friendly
----------------------------------- */
.site-footer ul {
  padding-left: 0;
  list-style: none;
}

.site-footer p,
.site-footer li {
  margin-bottom: 6px;
}

/* ---------- UTILITY HELPERS ----------
   Optional but useful
----------------------------------- */
.mt-section {
  margin-top: 80px;
}

.mb-section {
  margin-bottom: 80px;
}

@media (max-width: 768px) {
  .mt-section,
  .mb-section {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}