Improve image display and layout across the about page for all devices

Update the 'about us' page styling to fix image overlay issues, adjust image sizes, and implement responsive layouts for improved appearance on all devices. Add lazy loading to images.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1cf11e65-6deb-45c8-b84b-15ffb586a42f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 52941381-a76f-408f-bea0-146e6f493c34
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/ef74882e-373e-40b4-93c7-cf128544a855/1cf11e65-6deb-45c8-b84b-15ffb586a42f/jjGOhXu
Replit-Helium-Checkpoint-Created: true

about.html

@@ -343,6 +343,7 @@
                 <div class="about-img-2">
                   <figure class="image-anime reveal">
                     <img
+                      loading="lazy"
                       src="images/saim.webp"
                       alt=""
                     />

css/bundle.css

@@ -10203,8 +10203,7 @@ header.main-header .header-sticky.active {
     box-shadow: 0 10px 30px rgba(217, 40, 0, 0.35);
 }
 
-/* About image layout is intentionally handled by custom.css only.
+/* About image layout overrides are handled below in the FOUNDERS SECTION block. */
-   The overlay (position:absolute) must be preserved at all screen sizes. */
 
 /* ---- Counter section enhanced ---- */
 .our-counter {
@@ -10828,3 +10827,144 @@ body {
     }
 }
 
+/* ============================================================
+   CRICKET IMAGE (first about section) — Fix portrait ratio
+   The 3/4 ratio on desktop made it excessively tall.
+   Use a landscape ratio that fits the column nicely.
+   ============================================================ */
+@media (min-width: 1200px) {
+    .page-about-us .about-img-1 img {
+        aspect-ratio: 4 / 3 !important;
+    }
+}
+
+.page-about-us .about-img-1 img {
+    max-height: 480px !important;
+    object-position: center 20% !important;
+}
+
+/* ============================================================
+   FOUNDERS SECTION — Responsive staggered side-by-side layout
+   Completely replaces the position:absolute overlay from
+   custom.css which broke on every device below desktop.
+   ============================================================ */
+
+/* Remove the padding-top reserved for the overlay */
+.pastors-message .about-image {
+    padding-top: 0 !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: flex-start !important;
+    gap: 14px !important;
+}
+
+/* Left image: taller, primary founder */
+.pastors-message .about-img-1 {
+    position: static !important;
+    width: 60% !important;
+    flex-shrink: 0 !important;
+}
+
+/* Right image: staggered down slightly for visual depth */
+.pastors-message .about-img-2 {
+    position: static !important;
+    top: auto !important;
+    right: auto !important;
+    width: 40% !important;
+    flex-shrink: 0 !important;
+    margin-top: 40px !important;
+}
+
+.pastors-message .about-img-1 figure,
+.pastors-message .about-img-2 figure {
+    display: block !important;
+    border-radius: 16px !important;
+    overflow: hidden !important;
+}
+
+.pastors-message .about-img-1 img {
+    width: 100% !important;
+    height: auto !important;
+    aspect-ratio: 3 / 4 !important;
+    object-fit: cover !important;
+    object-position: top center !important;
+    border-radius: 16px !important;
+    border: none !important;
+}
+
+.pastors-message .about-img-2 img {
+    width: 100% !important;
+    height: auto !important;
+    aspect-ratio: 3 / 4 !important;
+    object-fit: cover !important;
+    object-position: top center !important;
+    border-radius: 16px !important;
+    border: 5px solid white !important;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18) !important;
+}
+
+/* ---- Founders: tablet (≤ 991px) ---- */
+@media (max-width: 991px) {
+    .pastors-message .about-image {
+        max-width: 560px !important;
+        margin: 0 auto 35px !important;
+        gap: 10px !important;
+    }
+
+    .pastors-message .about-img-1 {
+        width: 57% !important;
+    }
+
+    .pastors-message .about-img-2 {
+        width: 43% !important;
+        margin-top: 28px !important;
+    }
+
+    .pastors-message .about-img-2 img {
+        border-width: 4px !important;
+    }
+}
+
+/* ---- Founders: mobile (≤ 767px) ---- */
+@media (max-width: 767px) {
+    .pastors-message .about-image {
+        max-width: 480px !important;
+        gap: 8px !important;
+    }
+
+    .pastors-message .about-img-2 {
+        margin-top: 20px !important;
+    }
+
+    .pastors-message .about-img-2 img {
+        border-width: 3px !important;
+    }
+}
+
+/* ---- Founders: small mobile (≤ 575px) — stack vertically ---- */
+@media (max-width: 575px) {
+    .pastors-message .about-image {
+        flex-direction: column !important;
+        max-width: 100% !important;
+        gap: 10px !important;
+        margin: 0 0 30px !important;
+    }
+
+    .pastors-message .about-img-1,
+    .pastors-message .about-img-2 {
+        width: 100% !important;
+        margin-top: 0 !important;
+    }
+
+    .pastors-message .about-img-1 img,
+    .pastors-message .about-img-2 img {
+        aspect-ratio: 4 / 3 !important;
+        max-height: 280px !important;
+        border-radius: 12px !important;
+    }
+
+    .pastors-message .about-img-2 img {
+        border-width: 3px !important;
+    }
+}
+

css/enhance.css

@@ -172,8 +172,7 @@ header.main-header .header-sticky.active {
     box-shadow: 0 10px 30px rgba(217, 40, 0, 0.35);
 }
 
-/* About image layout is intentionally handled by custom.css only.
+/* About image layout overrides are handled below in the FOUNDERS SECTION block. */
-   The overlay (position:absolute) must be preserved at all screen sizes. */
 
 /* ---- Counter section enhanced ---- */
 .our-counter {
@@ -796,3 +795,144 @@ body {
         margin-bottom: 24px !important;
     }
 }
+
+/* ============================================================
+   CRICKET IMAGE (first about section) — Fix portrait ratio
+   The 3/4 ratio on desktop made it excessively tall.
+   Use a landscape ratio that fits the column nicely.
+   ============================================================ */
+@media (min-width: 1200px) {
+    .page-about-us .about-img-1 img {
+        aspect-ratio: 4 / 3 !important;
+    }
+}
+
+.page-about-us .about-img-1 img {
+    max-height: 480px !important;
+    object-position: center 20% !important;
+}
+
+/* ============================================================
+   FOUNDERS SECTION — Responsive staggered side-by-side layout
+   Completely replaces the position:absolute overlay from
+   custom.css which broke on every device below desktop.
+   ============================================================ */
+
+/* Remove the padding-top reserved for the overlay */
+.pastors-message .about-image {
+    padding-top: 0 !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: flex-start !important;
+    gap: 14px !important;
+}
+
+/* Left image: taller, primary founder */
+.pastors-message .about-img-1 {
+    position: static !important;
+    width: 60% !important;
+    flex-shrink: 0 !important;
+}
+
+/* Right image: staggered down slightly for visual depth */
+.pastors-message .about-img-2 {
+    position: static !important;
+    top: auto !important;
+    right: auto !important;
+    width: 40% !important;
+    flex-shrink: 0 !important;
+    margin-top: 40px !important;
+}
+
+.pastors-message .about-img-1 figure,
+.pastors-message .about-img-2 figure {
+    display: block !important;
+    border-radius: 16px !important;
+    overflow: hidden !important;
+}
+
+.pastors-message .about-img-1 img {
+    width: 100% !important;
+    height: auto !important;
+    aspect-ratio: 3 / 4 !important;
+    object-fit: cover !important;
+    object-position: top center !important;
+    border-radius: 16px !important;
+    border: none !important;
+}
+
+.pastors-message .about-img-2 img {
+    width: 100% !important;
+    height: auto !important;
+    aspect-ratio: 3 / 4 !important;
+    object-fit: cover !important;
+    object-position: top center !important;
+    border-radius: 16px !important;
+    border: 5px solid white !important;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18) !important;
+}
+
+/* ---- Founders: tablet (≤ 991px) ---- */
+@media (max-width: 991px) {
+    .pastors-message .about-image {
+        max-width: 560px !important;
+        margin: 0 auto 35px !important;
+        gap: 10px !important;
+    }
+
+    .pastors-message .about-img-1 {
+        width: 57% !important;
+    }
+
+    .pastors-message .about-img-2 {
+        width: 43% !important;
+        margin-top: 28px !important;
+    }
+
+    .pastors-message .about-img-2 img {
+        border-width: 4px !important;
+    }
+}
+
+/* ---- Founders: mobile (≤ 767px) ---- */
+@media (max-width: 767px) {
+    .pastors-message .about-image {
+        max-width: 480px !important;
+        gap: 8px !important;
+    }
+
+    .pastors-message .about-img-2 {
+        margin-top: 20px !important;
+    }
+
+    .pastors-message .about-img-2 img {
+        border-width: 3px !important;
+    }
+}
+
+/* ---- Founders: small mobile (≤ 575px) — stack vertically ---- */
+@media (max-width: 575px) {
+    .pastors-message .about-image {
+        flex-direction: column !important;
+        max-width: 100% !important;
+        gap: 10px !important;
+        margin: 0 0 30px !important;
+    }
+
+    .pastors-message .about-img-1,
+    .pastors-message .about-img-2 {
+        width: 100% !important;
+        margin-top: 0 !important;
+    }
+
+    .pastors-message .about-img-1 img,
+    .pastors-message .about-img-2 img {
+        aspect-ratio: 4 / 3 !important;
+        max-height: 280px !important;
+        border-radius: 12px !important;
+    }
+
+    .pastors-message .about-img-2 img {
+        border-width: 3px !important;
+    }
+}