Add mobile styling

resources/assets/sass/components/_box.scss

@@ -39,6 +39,7 @@
 .tabs {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   &.fit_content {
     width: fit-content;
   }

resources/assets/sass/components/_contact_box.scss

@@ -2,6 +2,8 @@
 
 .contact_box {
   position: relative;
+  padding: 15px 23px 15px 15px;
+
   .logo-whatsapp {
     position: absolute;
     right: 0;
@@ -29,4 +31,9 @@
   .read_more {
     @include read_more_link;
   }
-}
+}
+@media (max-width: 768px) and (min-width: 423px) {
+  .contact_box  p {
+    width: CALC(100% - 81px);
+  }
+}

resources/assets/sass/components/_footer.scss

@@ -10,6 +10,9 @@
 
   .footer_menu {
     background-image: linear-gradient(to right, #0102b0, #4090e3);
+    @media (max-width: 768px) {
+      padding: 60px 30px 30px 30px;
+    }
 
     .row {
       @include container;

resources/assets/sass/components/_header.scss

@@ -1,10 +1,37 @@
 .header {
   height: 110px;
+  .logo {
+    float: left;
+    margin-top: 18px;
+    img {
+      height: 75px;
+    }
+  }
+  .advertisement {
+    float: right;
+    width: 728px;
+    height: 90px;
+  }
 }
-.header .logo {
-  float: left;
-  margin-top: 18px;
+
+@media (max-width: 1170px) {
+  .header {
+    padding: 0 20px;
+  }
 }
-.header .logo img {
-  height: 75px;
+@media (max-width: 980px) {
+  .header {
+    height: 212px;
+    .logo {
+      float: none;
+    }
+    .advertisement {
+      float: none;
+    }
+  }
+}
+@media (max-width: 768px) {
+  .header_container {
+    display: none;
+  }
 }

resources/assets/sass/components/_main_news.scss

@@ -2,6 +2,28 @@
 @use "../abstracts/variables" as *;
 
 .blog_grid {
+  @media (max-width: 768px) {
+    overflow-x: auto;
+    overflow-y: hidden;
+    &::-webkit-scrollbar {
+      height: 8px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      border-radius: 100vw;
+      background: #eee;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background: linear-gradient(to right, #10229c, #64a9f2);
+    }
+    .grid_view {
+      width: 300%;
+    }
+  }
   .row, .row > * {
     padding: 0;
     margin: 0;
@@ -12,6 +34,9 @@
   .post {
     position: relative;
     height: 100%;
+    @media (max-width: 768px) {
+      height: 50%;
+    }
 
     img {
       width: 100%;
@@ -64,6 +89,12 @@
         font-size: 16px;
         line-height: 1.17;
       }
+      @media (max-width: 768px) {
+        h2 a, h5 a {
+          font-size: 16px;
+          line-height: 1.17;
+        }
+      }
       .post_date {
         @include post_date;
         color: $news-banner-text-color;

resources/assets/sass/components/_menu.scss

@@ -2,9 +2,11 @@
 @use "../abstracts/mixin" as *;
 
 .menu_container {
-  height: 75px;
-  margin-bottom: 20px;
-  background-image: linear-gradient(to right, #0102b0, #4090e3);
+  @media (min-width: 767px) {
+    height: 75px;
+    margin-bottom: 20px;
+    background-image: linear-gradient(to right, #0102b0, #4090e3);
+  }
 
   nav {
     display: flex;
@@ -97,11 +99,11 @@
     }
   }
 }
-.top_menu_container {
+.top_menu_container, .menu_mobile_container {
   height: 50px;
   @include container;
 
-  ul {
+  ul.right_menu {
     float: right;
     @include reset-list;
 
@@ -145,7 +147,7 @@
 
         .search_input {
           border: 1px solid #efefef;
-          border-radius: 5px;
+          border-radius: 3px;
           background-color: #fff;
           height: 29px;
           font-family: Montserrat, serif;
@@ -164,8 +166,60 @@
     }
   }
 }
+.menu_mobile_container {
+  height: 30px;
+  padding: 12px 0;
+  .mobile_menu_button a {
+    display: block;
+    width: 20px;
+    height: 21px;
+    padding: 4px 10px 4px 11px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    background-color: #10229c;
+    margin-right: 12px;
+    i {
+      color: white;
+      font-size: 19px;
+    }
+  }
+  .logo_mobile {
+    height: 100%;
+    img {
+      height: 100%;
+    }
+  }
+  .right_menu_container {
+    background-color: #10229c;
+    margin-left: 12px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    flex-grow: 1;
+    ul.right_menu {
+      li {
+        padding: 5px 19px;
+        margin: 0;
 
-.menu-submenu {
+        .search_form {
+          height: 25px;
+          .search_input {
+            height: 18px;
+            width: 80px;
+          }
+          .search_submit {
+            margin: 0 6px;
+          }
+        }
+
+        .search_button {
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+.menu-submenu, .mobile_menu_container {
   position: absolute;
 
   > a {
@@ -222,6 +276,7 @@
         top: 15px;
         -webkit-transform: rotate(270deg);
         transform: rotate(270deg);
+        transition: 0.6s ease;
       }
       &.opened:after {
         -webkit-transform: rotate(0deg);
@@ -230,3 +285,100 @@
     }
   }
 }
+
+.mobile_menu_container {
+  display: none;
+  position: fixed;
+  z-index: 15;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  nav {
+    background: white;
+    width: fit-content;
+    height: 100vh;
+    padding: 20px;
+    min-width: 70vw;
+    max-width: 100vw;
+    overflow: hidden;
+
+    ul, li, li a {
+      width: 100%;
+    }
+    ul > li > ul > li {
+      padding-left: 20px;
+      width: CALC(100% - 20px);
+    }
+
+    .submenu {
+      display: none;
+    }
+
+    li.has_submenu {
+      position: relative;
+      &:after {
+        -webkit-font-smoothing: antialiased;
+        display: var(--fa-display, inline-block);
+        font-style: normal;
+        font-variant: normal;
+        line-height: 1;
+        text-rendering: auto;
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        content: "\f0d7";
+        position: absolute;
+        right: 0;
+        top: 15px;
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+      }
+      &.opened:after {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+    }
+  }
+}
+.logo_close_button {
+  display: flex;
+  height: 42px;
+  margin-bottom: 37px;
+  .logo {
+    flex-grow: 1;
+    height: 42px;
+    a {
+      height: 100%;
+      padding: 0;
+      border-bottom: none;
+      img {
+        height: 100%;
+      }
+    }
+  }
+  .mobile_close_menu_button {
+    height: 30px;
+    width: 22.5px;
+    padding: 4px;
+    a {
+      font-size: 30px;
+      color: #1d2bb2;
+      padding: 0;
+      border-bottom: none;
+    }
+  }
+}
+.mobile_menu_container nav li.has_submenu {
+  &:after {
+    content: "\f054";
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    transition: 0.6s ease;
+  }
+
+  &.opened:after {
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+}

resources/assets/sass/components/_page.scss

@@ -3,8 +3,11 @@
 .page_container {
   @include container;
   background-color: #fff;
-  width: CALC(100% - 270px);
-  padding: 32px 135px;
+  padding: 20px;
+  @media (min-width: 768px) {
+    width: CALC(100% - 270px);
+    padding: 32px 135px;
+  }
 }
 .page_body {
   font-family: Nunito, serif;

resources/assets/sass/components/_sidebar.scss

@@ -1,3 +1,8 @@
 .sidebar .box {
   width: CALC(100% - 38px);
 }
+@media (max-width: 768px) {
+  .sidebar {
+    width: 100%;
+  }
+}