img issue corrected

components/ServiceSectionS2/ServiceSectionS2.js

@@ -92,14 +92,17 @@ const ServiceSectionS2 = () => {
                                     href={`/services/[slug]`}
                                     as={`/services/${service.slug}`} // Dynamic slug
                                   >
-                                    {service.sTitle} {/* Service Title */}
+                                    {service.sTitle.length > 30
+                                      ? service.sTitle.substring(0, 30) + "..."
+                                      : service.sTitle
+                                    }
                                   </Link>
                                 </h2>
                                 <p
                                   dangerouslySetInnerHTML={{
                                     __html:
-                                      service.description.length > 100
-                                        ? service.description.substring(0, 100) + "..."
+                                      service.description.length > 80
+                                        ? service.description.substring(0, 80) + "..."
                                         : service.description,
                                   }}
                                 ></p>

components/our-mission/index.js

@@ -12,12 +12,12 @@ const OurMission = () => {
                         <div className="wpo-blog-content">
                             <div className="post format-standard-image">
                                 <div
-                                    className="entry-media"
-                                    style={{ width: "100%", height: "auto", overflow: "hidden" }}
-                                >
+                                    className="responsive-entry-media"                                >
                                     <img
                                         src="/images/our-mission/imgg.webp"
                                         alt=""
+                                        fill
+                                        style={{ objectFit: 'cover' }}
                                     />
                                 </div>
 

pages/blog/[slug].js

@@ -47,8 +47,7 @@ const BlogSingle = () => {
                         <div className="col col-lg-12 col-12">
                             <div className="wpo-blog-content">
                                 <div className={`post ${blogMeta.blClass}`}>
-                                    <div className="entry-media">
-                                        <div style={{ width: '100%', height: '400px', position: 'relative' }}>
+                                    <div className="responsive-entry-media">
                                         <Image
                                             src={blogMeta.blogSingleImg}
                                             alt={blogContent.title}
@@ -56,8 +55,6 @@ const BlogSingle = () => {
                                             style={{ objectFit: 'cover' }}
                                         />
                                     </div>
-                                    </div>
-
                                     {/* <div className="entry-meta">
                                         <ul>
                                             <li><i className="fi flaticon-calendar"></i> {blogMeta.create_at}</li>

pages/services/[slug].js

@@ -42,17 +42,14 @@ const ServiceDetailsPage = ({ service }) => {
               <div className="wpo-blog-content">
                 <div className="post format-standard-image">
                   {/* Banner Image */}
-                  <div className="entry-media">
-                    <div style={{ width: "100%", height: "650px", position: "relative" }}>
+                  <div className="responsive-entry-media2">
                     <Image
                       src={service.sImgS}
                       alt={service.sTitle}
                       fill
-                        style={{ objectFit: "cover" }}
-                        unoptimized
+                      style={{ objectFit: 'cover' }}
                     />
                   </div>
-                  </div>
 
                   <h2 className="mt-4">{service.sTitle}</h2>
 

styles/sass/layout/_header.scss

@@ -423,7 +423,7 @@
 		float: none;
 		position: relative;
 		z-index: 99;
-		text-align: center;
+		// text-align: center;
 	}
 
 	.wpo-site-header .navbar-right {
@@ -1328,6 +1328,13 @@
 		}
 	}
 
+	@media (max-width: 768px) {
+		.navbar-header .navbar-brand img {
+			max-width: 220px;
+			width: auto;
+			height: auto;
+		}
+	}
 
 	/*navbar collaps less then 992px*/
 	@include media-query (991px) {
@@ -1821,26 +1828,32 @@
 	overflow-x: auto;
 	overflow-y: scroll;
 }
+
 .responsivemenu .card-body {
 	background: linear-gradient(286.02deg, #080A14 38.02%, #10121E 61.92%, #282A34 74.32%, #404354 90.71%, #343643 99.65%);
 }
+
 .mobileMenu h2 {
 	padding-left: 20px;
 }
+
 .mobileMenu.show {
 	left: 0;
 }
+
 .showmenu {
 	position: relative;
 	top: 0;
 	z-index: 999;
 	cursor: pointer;
 }
+
 .responsivemenu {
 	list-style: none;
 	padding-left: 0;
 	padding-top: 10px;
 }
+
 .responsivemenu li a,
 .responsivemenu li p,
 .responsivemenu ul {
@@ -1853,23 +1866,28 @@
 	color: #fff;
 	cursor: pointer;
 }
+
 .responsivemenu li p {
 	position: relative;
 	margin-bottom: 0;
 }
+
 .responsivemenu ul.subMenu {
 	padding-top: 0;
 	padding-left: 15px;
 	padding-right: 0;
 }
+
 .responsivemenu ul.subMenu ul {
 	position: relative;
 	margin-bottom: 0;
 	padding-left: 0;
 }
+
 .responsivemenu ul {
 	list-style: none;
 }
+
 .responsivemenu ul p,
 .responsivemenu ul a {
 	color: #fff;
@@ -1886,6 +1904,7 @@
 .responsivemenu .card {
 	border: none
 }
+
 .responsivemenu .card-body {
 	padding-top: 0;
 }
@@ -1894,11 +1913,13 @@
 .responsivemenu li a {
 	position: relative;
 }
+
 .responsivemenu li i {
 	position: absolute;
 	right: 20px;
 	top: 17px;
 }
+
 .showmenu i {
 	font-size: 30px;
 	color: #fff;
@@ -1907,9 +1928,11 @@
 .mobileMenu {
 	display: none;
 }
+
 .showmenu {
 	display: none;
 }
+
 @media (max-width:992px) {
 	.showmenu {
 		display: block;
@@ -1924,6 +1947,7 @@
 		outline: none;
 		box-shadow: none;
 	}
+
 	.showmenu button span {
 		background-color: #fff;
 		width: 20px;
@@ -1932,16 +1956,48 @@
 		margin: 0 auto;
 		margin-bottom: 5px;
 	}
+
 	.mobileMenu {
 		display: block;
 	}
 }
 
+@media (max-width: 768px) {
+	.header-container {
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding: 0 15px;
+	}
+
+	.showmenu {
+		position: absolute;
+		right: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		display: block;
+		width: 40px;
+		height: 36px;
+		margin-right: 30px;
+		text-align: center;
+		line-height: 40px;
+		border-radius: 5px;
+	}
+
+	.showmenu button span {
+		width: 20px;
+		height: 2px;
+		margin: 0 auto 5px auto;
+		background-color: #fff;
+		display: block;
+	}
+}
 
 
 .middle-header-3 .showmenu {
 	top: 36px;
 }
+
 .middle-header2 .showmenu {
 	top: 26px;
 }
@@ -1956,7 +2012,9 @@
 		left: -260px;
 		width: 260px;
 	}
-    .responsivemenu li a, .responsivemenu li p {
+
+	.responsivemenu li a,
+	.responsivemenu li p {
 		font-size: 14px;
 		padding: 13px 25px;
 	}
@@ -1967,3 +2025,29 @@
 .responsivemenu a:not([href]):not([class]):hover {
 	color: #ddd;
 }
+.responsive-entry-media {
+    position: relative;
+    width: 100%;
+    aspect-ratio:28 / 9; 
+    overflow: hidden;
+}
+
+.responsive-entry-media img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.responsive-entry-media2 {
+    position: relative;
+    width: 100%;
+    aspect-ratio:3 / 2; 
+    overflow: hidden;
+}
+
+.responsive-entry-media2 img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+

styles/sass/page/_home-default.scss

@@ -1082,6 +1082,7 @@
             }
 
             .wpo-campaign-text-top {
+                min-height: 215px;
                 padding: 15px;
                 padding-top: 22px;
 

styles/sass/page/_home-style-4.scss

@@ -81,12 +81,16 @@
                     margin: -1px;
                     cursor: pointer;
 
-                    @media(max-width:1199px){
-                        padding: 12px;
+                    @media(max-width:1024px){
+                        padding: 10px 21px;
                         font-size: 18px;
                     }
-                    @media(max-width:767px){
-                        padding: 10px;
+                    @media(max-width:768px){
+                        padding: 5px 13px;
+                        font-size: 14px;
+                    }
+                    @media(max-width:500px){
+                        padding: 5px 2px;
                         font-size: 14px;
                     }