/* ===========================================================================
   Layout fixes on top of the legacy stylesheets.
   The original CSS uses fixed-width grids/elements that overflow on smaller
   viewports. These rules make the site responsive, centered and free of
   horizontal scrolling without changing the visual design.
   =========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

/* Never let media force the page wider than the screen */
img, iframe, video, table { max-width: 100%; }

/* Center the main content column */
.container { margin-left: auto !important; margin-right: auto !important; }

/* --- Package card grids: were fixed 4 x 300px = 1200px --- */
#package_info,
.feature_package .package,
.f_package .package {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 20px !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 20px !important;
}

.pk_info {
  width: auto !important;
  max-width: 100%;
  overflow: hidden;
  /* Legacy padding is `10px 0 5px 25px` (25px left, 0 right), which shoved
     the image and text to the right. Make it symmetric so content centers. */
  padding: 14px 16px 18px !important;
}
/* Legacy CSS gives the card image `margin: 0 20px`, which pushed a
   width:100% image past the card edge. Remove the side margin so it fits. */
.pk_info img {
  /* Source photos are square (1080x1080) with the Salaam Haji logo baked
     into the top. Any landscape crop either cuts the subject or slices the
     logo — so show the whole square image in a square frame (no crop). */
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 12px !important;
}

/* Contact page: two maps side by side, wrap on small screens */
.location { flex-wrap: wrap; justify-content: center; }
.location iframe { width: 100% !important; max-width: 460px; height: 280px; }

/* Home "customized" split sections: wrap image + text */
.home_content .cust { flex-wrap: wrap; }
.home_content .cust > div { min-width: 280px; flex: 1 1 320px; }
.home_content .cust img { width: 100%; height: auto; }

/* Package detail hero collage: constrain */
.hero_gallery .row { flex-wrap: wrap; }
.hero_gallery img { max-width: 100%; height: auto; }

/* Constrain any stray wide sections */
.main, #main, .home_content, .blog_page, .quotation_wrapper {
  max-width: 100%;
  overflow-x: hidden;
}