Header responsive updated

components/layout/header/Header2.js

@@ -22,7 +22,7 @@ export default function Header2({
             <ul className="info-list clearfix">
               <li>
                 <img src="/assets/images/icons/call.png" alt="Phone" style={{ marginRight: "8px" }} />
-                {/* <Link href="tel:647-722-3434">647-722-3434</Link> */}
+                <Link href="tel:647-722-3434">647-722-3434</Link>
               </li>
               <li>
                 <img src="/assets/images/icons/mail.png" alt="Mail" style={{ marginRight: "8px" }} />

public/assets/css/module-css/page-title.css

@@ -114,7 +114,7 @@
 @media only screen and (max-width: 767px){
 
   .page-title{
-    padding: 80px 0px;
+    padding: 190px 0px;
   }
 
   .page-title h1{

public/assets/css/style.css

@@ -1021,33 +1021,25 @@
   background: transparent !important;
   box-shadow: none !important;
   border: none !important;
-  position: absolute; /* Keep header floating over content */
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 999;
 }
 
-/* Menu, logo, and links visible on hero */
 .header-style-two .header-top a,
 .header-style-two .header-top .logo {
-  color: #fff !important;
+  color: #bc0000 !important;
 }
 
-/* Padding for alignment without background interference */
 .header-style-two .header-top .top-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-left: 100px;
   padding-right: 100px;
-  position: relative; /* Needed for flex children alignment */
-}
-
-/* Optional: ensure header elements stay visible on scroll */
-.header-style-two.fixed-header {
-  position: fixed;
-  background: rgba(0, 0, 0, 0.2); /* Slight transparency if needed on scroll */
+  position: relative; 
 }
 
 
@@ -1058,7 +1050,7 @@
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 15px;
-   overflow-x: auto;
+   /* overflow-x: auto; */
  }
 
  .header-top .top-inner .info-list {
@@ -1213,7 +1205,7 @@
    }
 
    .header-top .top-inner {
-     flex-direction: column;
+     flex-direction: row;
      align-items: center;
      text-align: center;
      gap: 8px;
@@ -1265,6 +1257,13 @@
    width: 100%;
  }
 
+ /* .main-header .header-lower .outer-container {
+   position: absolute;
+   left: 0px;
+   top: 0px;
+   width: 100%;
+ } */
+
   .main-header .header-lower .outer-container {
    position: absolute;
    left: 0px;
@@ -1467,7 +1466,7 @@
    font-family: var(--soleil);
    letter-spacing: 0.8px;
    opacity: 1;
-   color: #fff;
+   color: #bc0000;
    z-index: 1;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
@@ -1478,7 +1477,7 @@
 
  .new-menu .new-nav>li>a{
 
-  color: #101A30 !important;
+  color: #bc0000 !important;
 
  }
 
@@ -1495,7 +1494,7 @@
 
  .main-menu .navigation>li.current>a,
  .main-menu .navigation>li:hover>a {
-   color: #fff;
+   color: #bc0000;
  }
 
  .main-menu .navigation>li>a:before {
@@ -1721,7 +1720,7 @@
    font-size: 40px;
    line-height: 50px;
    cursor: pointer;
-   background: #ffffff;
+   /* background: #ffffff; */
    display: none;
  }
 
@@ -1768,7 +1767,7 @@
  .sticky-header .main-menu .navigation>li>a {
    padding-top: 27px;
    padding-bottom: 27px;
-   color: #101A30;
+   color: #bc0000;
  }
 
  .sticky-header .main-menu .navigation>li>a:before {
@@ -2794,8 +2793,8 @@
    margin-left: 6px;
    width: 6px;
    height: 6px;
-   border-left: 2px solid #fff;
-   border-bottom: 2px solid #fff;
+   border-left: 2px solid #bc0000;
+   border-bottom: 2px solid #bc0000;
    transform: rotate(-45deg);
    vertical-align: middle;
  }
@@ -3467,12 +3466,33 @@
  }
 
  @media (max-width: 1024px) and (min-width: 769px) {
+
+  .header-style-two .header-top .top-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+  position: relative; /* Needed for flex children alignment */
+}
+
+  
    .info-block-one {
      padding: 30px 7px !important;
    }
  }
 
  @media (max-width: 768px) {
+
+  .header-style-two .header-top .top-inner {
+  display: flex;
+  justify-content: space-between;
+  justify-content: center;
+  align-items: center;
+  padding-left: 100px;
+  padding-right: 100px;
+  position: relative; /* Needed for flex children alignment */
+}
    .blog-details-content .news-block-one .inner-box .lower-content h2 {
      font-size: 38px !important;
      line-height: 36px;