header correction updated

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.length > 80
-                                        ? service.description.substring(0, 100) + "..."
+                                        ? service.description.substring(0, 80) + "..."
                                         : service.description,
                                   }}
                                 ></p>

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;
 	}

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){
+                    @media(max-width:1024px){
-                        padding: 12px;
+                        padding: 10px 21px;
                         font-size: 18px;
                     }
-                    @media(max-width:767px){
+                    @media(max-width:768px){
-                        padding: 10px;
+                        padding: 5px 13px;
+                        font-size: 14px;
+                    }
+                    @media(max-width:500px){
+                        padding: 5px 2px;
                         font-size: 14px;
                     }