From e2db670149ae311750b7590a267a56772e8314f1 Mon Sep 17 00:00:00 2001
From: RohanL08 <lalchandanirohan8@gmail.com>
Date: Sat, 11 Oct 2025 18:23:15 +0530
Subject: [PATCH] fixed text overlapping issue on homepage

---
 .vscode/settings.json |   4 +-
 index.html            |  82 +++++++++++-----------
 style.css             | 153 +++++++++++++++++++++++++++++++-----------
 3 files changed, 158 insertions(+), 81 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index c76d7df..dd0d9a7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,5 @@
 {
-  "liveServer.settings.port": 5503
+  "liveServer.settings.port": 5503,
+  "github.copilot.chat.agent.thinkingTool": false,
+  "github.copilot.chat.scopeSelection": false
 }
diff --git a/index.html b/index.html
index 729e28d..a552f9e 100644
--- a/index.html
+++ b/index.html
@@ -288,51 +288,37 @@
     <!-- home section starts -->
 
     <section class="home" id="home">
-
-        <div class="content">
-            <h3>Your Health, Our Priority</h3>
-            <span>Personalized Care for Every Patient</span>
-            <p>We believe in a patient-centered approach, offering a wide range of medical services tailored to meet
-                your unique health needs.</p>
-            <a href="#" class="btn btn-outline-dark d-grid px-8 py-7 ">EXPLORE</a>
-        </div>
-
-        <div style="height: 100vh; filter: brightness(0.7);">
-
-            <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel"
-                style="height: 100%;">
-                <div class="carousel-indicators">
-                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
-                        class="active" aria-current="true" aria-label="Slide 1"></button>
-                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
-                        aria-label="Slide 2"></button>
-                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
-                        aria-label="Slide 3"></button>
+        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
+            <div class="carousel-indicators">
+                <button type="button" data-bs-target="#carouselExampleFade" data-bs-slide-to="0"
+                    class="active" aria-current="true" aria-label="Slide 1"></button>
+                <button type="button" data-bs-target="#carouselExampleFade" data-bs-slide-to="1"
+                    aria-label="Slide 2"></button>
+                <button type="button" data-bs-target="#carouselExampleFade" data-bs-slide-to="2"
+                    aria-label="Slide 3"></button>
+            </div>
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <img src="./img/HD-wallpaper-medical-hospital.png" class="d-block w-100" alt="...">
                 </div>
-                <div class="carousel-inner" style="height: 100%;">
-                    <div class="carousel-item active">
-                        <img src="./img/HD-wallpaper-medical-hospital.png" class="d-block w-100" alt="...">
-                    </div>
-                    <div class="carousel-item">
-                        <img src="./img/medicine-healthcare-people-conce.png" class="d-block w-100" alt="...">
-                    </div>
-                    <div class="carousel-item">
-                        <img src="./img/surgery-1822458_640.png" class="d-block w-100" alt="...">
-                    </div>
+                <div class="carousel-item">
+                    <img src="./img/medicine-healthcare-people-conce.png" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                    <img src="./img/surgery-1822458_640.png" class="d-block w-100" alt="...">
                 </div>
-                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade"
-                    data-bs-slide="prev">
-                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                    <span class="visually-hidden">Previous</span>
-                </button>
-                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade"
-                    data-bs-slide="next">
-                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                    <span class="visually-hidden">Next</span>
-                </button>
             </div>
+            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade"
+                data-bs-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Previous</span>
+            </button>
+            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade"
+                data-bs-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Next</span>
+            </button>
         </div>
-
     </section>
 
 
@@ -477,6 +463,20 @@ <h4><a href="pediatrics.html">Pediatrician</a></h4>
     </section>
     <!-- End Services Section -->
 
+    <!-- Hero Content Section -->
+    <section class="hero-content-section py-5">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-lg-8 text-center">
+                    <h3 class="hero-title">Your Health, Our Priority</h3>
+                    <span class="hero-subtitle">Personalized Care for Every Patient</span>
+                    <p class="hero-description">We believe in a patient-centered approach, offering a wide range of medical services tailored to meet your unique health needs.</p>
+                    <a href="#" class="btn btn-primary btn-lg">EXPLORE</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- <div class="bg-boz py-3">
             <div class="container">
                 <div class="row">
diff --git a/style.css b/style.css
index 0744735..2655fcd 100644
--- a/style.css
+++ b/style.css
@@ -347,49 +347,43 @@ header .navbar a{
 }
 
 .home{
-    /* display: flex; */
-    /* align-items: center; */
-    min-height: 100vh;
-    /* background: url(img/bg-home.png)no-repeat; */
-    /* background-size: cover; */
-    /* background-position: center; */
+    position: relative;
+    height: 100vh;
     padding: 0;
+    margin: 0;
+    overflow: hidden;
 }
 
-.home .content{
-    max-width: 50rem;
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 10%;
+.home .carousel {
+    height: 100%;
 }
 
-.home .content h3{
-    font-size: 5rem;
-    color: #ffffff;
-    font-weight: bold;
-    /*text-shadow: 0 0 4px #ffffff;*/
+.home .carousel-inner {
+    height: 100vh;
 }
 
-.home .content span{
-    font-size: 4.4rem;
-    outline: #000;
-    
-    color: red;
-    padding: 1rem 0;
-    line-height: 1.5;
+.home .carousel-item {
+    height: 100vh;
 }
 
-.home .content p{
-    font-size: 1.5rem;
-    color: #ffffff;
-    padding: 1rem 0;
-    line-height: 1.5;
-    /*text-decoration: underline;*/
-    text-decoration-style: solid;
+.home .carousel-item img {
+    height: 100vh;
+    width: 100%;
+    object-fit: cover;
+    filter: brightness(0.7);
+}
+
+.home .carousel-indicators {
+    bottom: 20px;
+    z-index: 15;
 }
 
+.home .carousel-control-prev,
+.home .carousel-control-next {
+    z-index: 15;
+}
+
+
 /*--------------------------------------------------------------
 # About Us
 --------------------------------------------------------------*/
@@ -672,6 +666,57 @@ body.night .mb-0{
 
 
 
+/*--------------------------------------------------------------
+# Hero Content Section
+--------------------------------------------------------------*/
+.hero-content-section {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    padding: 80px 0;
+}
+
+.hero-title {
+    font-size: 3.5rem;
+    color: #2c4964;
+    font-weight: bold;
+    margin-bottom: 1rem;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.hero-subtitle {
+    font-size: 2.5rem;
+    color: #ff6b6b;
+    display: block;
+    margin-bottom: 1.5rem;
+    font-weight: 600;
+}
+
+.hero-description {
+    font-size: 1.3rem;
+    color: #666;
+    line-height: 1.6;
+    margin-bottom: 2rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.hero-content-section .btn {
+    background: linear-gradient(135deg, #2c4964, #4385a9);
+    border: none;
+    padding: 15px 40px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    border-radius: 50px;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(44, 73, 100, 0.3);
+}
+
+.hero-content-section .btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(44, 73, 100, 0.4);
+    background: linear-gradient(135deg, #1f354a, #2c4964);
+}
+
 /*--------------------------------------------------------------
 # Services
 --------------------------------------------------------------*/
@@ -854,13 +899,26 @@ textarea {
 }
 
 @media (max-width:768px){
-    .home .content h3{
-        font-size: 5rem;
+    .hero-content-section {
+        padding: 60px 0;
     }
-
-    .home .content span{
+    
+    .hero-title {
         font-size: 2.5rem;
     }
+    
+    .hero-subtitle {
+        font-size: 2rem;
+    }
+    
+    .hero-description {
+        font-size: 1.1rem;
+    }
+    
+    .hero-content-section .btn {
+        padding: 12px 30px;
+        font-size: 1.1rem;
+    }
 
     .icons-container .icons h3{
         font-size: 2rem;
@@ -869,11 +927,29 @@ textarea {
     .icons-container .icons span{
         font-size: 1.7rem;
     }
-     
-
 }
 
 @media (max-width:450px){
+    .hero-content-section {
+        padding: 40px 0;
+    }
+    
+    .hero-title {
+        font-size: 2rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.5rem;
+    }
+    
+    .hero-description {
+        font-size: 1rem;
+    }
+    
+    .hero-content-section .btn {
+        padding: 10px 25px;
+        font-size: 1rem;
+    }
 
     html{
         font-size: 50%;
@@ -882,7 +958,6 @@ textarea {
     .heading{
         font-size: 3rem;
     }
-    
 }
 form{
     position: relative;