hero images altered

components/HomeOne/HeroSlider.js

@@ -35,22 +35,25 @@ const HeroSlider = () => {
                     <div className="d-table">
                         <div className="d-table-cell">
                             <div className="container">
-                                <div className="slider-text">
+                                <div className="slider-text ">
                                     <div className="slider-shape">
-                                        <img src="/images/home-one/home-slider1.png" alt="Shape" />
+                                        <img src="/images/home-one/home-slider-1.png" alt="Shape" />
-                                    </div>
-
-                                    <h1>Exceptional Health Care for Pregnant Mothers & Newborn</h1>
-                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
-
-                                    <div className="common-btn">
-                                        <Link href="/appointment">
-                                            <a>Get Appointment</a>
-                                        </Link>
-                                        <Link href="/about">
-                                            <a className="cmn-btn-right">Learn More</a>
-                                        </Link>
                                     </div>
+                                    <div>
+                                          <h1>Exceptional Health Care for Pregnant Mothers & Newborn</h1>
+                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
+                                  
+                                         <div className="common-btn">
+                                                <Link href="/appointment">
+                                                    <a>Get Appointment</a>
+                                                </Link>
+                                                <Link href="/about">
+                                                    <a className="cmn-btn-right">Learn More</a>
+                                                </Link>
+                                            
+                                        </div>   
+                                   </div>
+                                  
                                 </div>
                             </div>
                         </div>
@@ -63,9 +66,10 @@ const HeroSlider = () => {
                             <div className="container">
                                 <div className="slider-text">
                                     <div className="slider-shape-two">
-                                        <img src="/images/home-one/home-slider2.png" alt="Shape" />
+                                        <img src="/images/home-one/home-slider-2.png" alt="Shape" />
                                     </div>
-                                    <h1>Caring Health is Important Than All</h1>
+                                    <div>
+                                        <h1>Caring Health is Important Than All</h1>
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
                                     
                                     <div className="common-btn">
@@ -76,6 +80,7 @@ const HeroSlider = () => {
                                             <a className="cmn-btn-right">Learn More</a>
                                         </Link>
                                     </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -88,9 +93,10 @@ const HeroSlider = () => {
                             <div className="container">
                                 <div className="slider-text">
                                     <div className="slider-shape-three">
-                                        <img src="/images/home-one/home-slider3.png" alt="Shape" />
+                                        <img src="/images/home-one/home-slider-3.png" alt="Shape" />
                                     </div>
-                                    <h1>We Offer Highly Treatments</h1>
+                                    <div>
+                                        <h1>We Offer Highly Treatments</h1>
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
                                     
                                     <div className="common-btn">
@@ -101,6 +107,7 @@ const HeroSlider = () => {
                                             <a className="cmn-btn-right">Learn More</a>
                                         </Link>
                                     </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -111,4 +118,5 @@ const HeroSlider = () => {
     )
 }
 
-export default HeroSlider;
+export default HeroSlider;
+

public/css/style.css

@@ -335,6 +335,7 @@ button:focus {
   height: 40px;
 }
 
+
 .nav-srh form .icon-search {
   position: absolute;
   top: 0;
@@ -419,8 +420,9 @@ button:focus {
 
 /*-- End Navbar --*/
 /*-- Home Slider --*/
+
 .slider-item-img {
-  background-image: url("/images/home-one/home-slider-bg.jpg");
+  background-image: url("/images/home-one/home-slider-bckgrd.png");
 }
 
 .slider-item {
@@ -432,24 +434,27 @@ button:focus {
 }
 
 .slider-item .slider-shape img {
-  position: absolute;
+  /* position: absolute; */
   top: -9px;
   right: -90px;
   max-width: 730px;
+  order: 1;
 }
 
 .slider-item .slider-shape-two img {
-  position: absolute;
+  /* position: absolute; */
   top: 20px;
   right: -60px;
-  max-width: 730px;
+  max-width: 730px; 
+  order: 1;
 }
 
 .slider-item .slider-shape-three img {
-  position: absolute;
+  /* position: absolute; */
   top: 60px;
   right: 0;
   max-width: 730px;
+  order: 1;
 }
 
 .slider-item::before {
@@ -467,6 +472,9 @@ button:focus {
   position: relative;
   margin-top: -160px;
   z-index: 5;
+  display: flex;
+  flex-direction: row;
+  gap: 150px;
 }
 
 .slider-item .slider-text h1 {
@@ -4939,4 +4947,4 @@ footer {
 .faq-content .accordion .accordion__panel p {
   color: #344c5d;
 }
-/*# sourceMappingURL=style.css.map */
+/*# sourceMappingURL=style.css.map */

public/css/style.scss

@@ -395,7 +395,7 @@ button {
 
 /*-- Home Slider --*/
 .slider-item-img {
-    background-image: url('/images/home-one/home-slider-bg.jpg');
+    background-image: url('/images/home-one/home-slider-bckgrd.png');
 }
 .slider-item {
     background-size: cover;