Made homepage responsive

css/style.css

@@ -1116,3 +1116,27 @@ body,
 .port-flex {
     display: flex;
 }
+
+@media (max-width: 1200px) {
+    h2 {
+        font-size: 2rem;
+    }
+    .text-container {
+        max-width: 70%;
+    }
+    .text-container p {
+        font-size: 1.8rem;
+        text-align: start;
+    }
+    .home_hero_image img {
+        max-width: 50%;
+        height: auto;
+        margin: 1rem;
+        border-radius: 1rem;
+    }
+    .container-about {
+        justify-content: center;
+        width: 100%;
+        flex-wrap: wrap;
+    }
+}

index.html

@@ -106,7 +106,7 @@ <h2 style="color: #000000; margin-top: 15rem; margin-bottom: 5rem;">Welcome to B
       <h2>Our Mission</h2>
       <p style="border-top: 1px solid #d2d2d2 !important; padding-top: 1rem">Our mission is to curate a comprehensive biomedical image library, serving as a globally accessible resource for researchers, educators, healthcare professionals, and students, fostering collaboration, innovation, and advancement in biomedical sciences. Grounded in values of accuracy, diversity, inclusivity, and ethical use, we aim to provide high-quality images while promoting education and upholding ethical standards. Through partnerships and continuous innovation, we strive to maintain a sustainable platform that supports the dissemination of knowledge, facilitates scientific discovery, and enhances patient care, ultimately realizing our vision of becoming the leading destination for biomedical images worldwide.</p>
     </div>
-    <div class="text-container">
+    <div class="text-container home_hero_image">
       <img src="img/home_hero.jpg" style="max-width: 90%; margin: 2rem; border-radius: 50px;">
     </div>