Fixing overlapping

Signed-off-by: Rishi Raj <rishiraj438gt@gmail.com>

Author: rishiraj38

src/collections/events/2025/hacktoberfest-2025/index.mdx

@@ -19,30 +19,29 @@ import hacktoberfestOpenArms from "./hacktoberfest-layer5-open-arms.webp";
 import hacktoberfestTheme from "./hacktoberfest-meshery-theme.webp";
 
 <p>
-<Link to="/programs/hacktoberfest">Hacktoberfest</Link> is just around the corner, and it’s an exciting opportunity to get involved in Layer5 projects. You might be surprised to learn how even small contributions can make a meaningful impact on a project. As projects grow, issues can easily go unnoticed, and your efforts in resolving them can truly make a difference while also helping you grow as a contributor.
+<Link to="/programs/hacktoberfest">Hacktoberfest</Link> is just around the corner, and it's an exciting opportunity to get involved in Layer5 projects. You might be surprised to learn how even small contributions can make a meaningful impact on a project. As projects grow, issues can easily go unnoticed, and your efforts in resolving them can truly make a difference while also helping you grow as a contributor.
 </p>
 
 <p>As in years past, Layer5 has a number of different projects and a variety of technologies for participants to choose from. For Hacktoberfest 2025, our theme will center on Designing with Meshery. <Link to="/cloud-native-management/meshery">Meshery</Link> is an extensible, self-service platform for collaborative infrastructure management. Be sure to understand the <Link to="/blog/meshery/comparing-meshery-models-and-meshery-designs">difference between Meshery Models and Meshery Designs</Link>. The Meshery project is looking for contributors to extend these models to support new cloud native infrastructure and their features.</p>
 
-<img src={hacktoberfestOpenArms} style="width: 750px; margin-right: 20px; float: left;"/>
-
 <p>
 Prepare for Hacktoberfest and ready yourself for contributing to CNCF projects the easy way with Layer5 <Link to="/community/meshmates">MeshMates</Link> and Maintainers. Spend an hour with seasoned, open source maintainers and hack your way through. To get a head start, see our <Link to="/community/newcomers">Newcomers Resources</Link>. Get familiar with the Layer5 community through our <Link to="/community/handbook">Community Handbook</Link>.
 </p>
 
-<div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: '-230px' }}>
-  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' , marginBottom: '-20px' }}>
-    <h3 style={{ margin: '0', marginBottom: '10px', whiteSpace: 'nowrap' }}>Earn a Badge</h3>
-    <p style={{ margin: '0', width: '900px' }}>
+<img src={hacktoberfestOpenArms} style={{ width: '100%', maxWidth: '750px', height: 'auto', display: 'block', margin: '20px 0' }} />
+
+<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '30px', margin: '30px 0' }}>
+  <div style={{ flex: '1 1 300px', minWidth: '250px' }}>
+    <h3 style={{ marginTop: '0', marginBottom: '10px' }}>Earn a Badge</h3>
+    <p style={{ margin: '0' }}>
       Earn a Hacktoberfest Contributor badge by contributing to Layer5 projects during this Hacktoberfest.
     </p>
   </div>
-  <img src={hacktoberfestBadge} style={{ width: '250px', flexShrink: '0', marginLeft: '-60px' ,marginRight: '100px', marginTop: '-50px' }} />
+  <img src={hacktoberfestBadge} style={{ width: '200px', maxWidth: '100%', height: 'auto', flexShrink: '0' }} alt="Hacktoberfest Badge" />
 </div>
 
 <h3 style={{marginBottom: '10px'}}>Event Details</h3>
 
-
 <ul>
     <li><strong>DATE: </strong>October 3rd, 2025</li>
     <li><strong>TIME: </strong> 14:00 UTC (9AM CDT | 4PM CEST | 3PM WAT | 7:30PM IST)</li>
@@ -56,4 +55,4 @@ Prepare for Hacktoberfest and ready yourself for contributing to CNCF projects t
     <li><a href="https://github.com/issues?q=is%3Aopen%20is%3Aissue%20archived%3Afalse%20(org%3Alayer5io%20OR%20org%3Ameshery%20OR%20org%3Aservice-mesh-performance%20OR%20org%3Aservice-mesh-patterns%20OR%20org%3Alayer5labs%20OR%20org%3Ameshery-extensions)%20label%3Ahacktoberfest">Issues for Hacktoberfest</a></li>
 </ul>
 
-<img src={hacktoberfestTheme} style="width: fit-content;"/>
+<img src={hacktoberfestTheme} style="width: 100%; max-width: 100%; height: auto;"/>