diff --git a/assets/css/ContactUs.css b/assets/css/ContactUs.css
index fd398082..61a1c269 100644
--- a/assets/css/ContactUs.css
+++ b/assets/css/ContactUs.css
@@ -1,59 +1,71 @@
-.footer-widget-pb-100 {
-    background-color: rgb(0, 59, 117);
-}
+/* General background for footer and contact section */
+.footer-widget-pb-100, 
 .col-lg-3-col-md-5-col-sm-5 {
     background-color: rgb(0, 59, 117);
 }
-.contact-custom-margin-big {
-    background-color: rgb(0, 59, 117);
-    width: 300px;
-    margin: 20% 0 0 -7%;
-}
+
+/* Contact section styling */
 .contact {
-    width:1200px;
-    height: auto;
+    width: 100%;
+    max-width: 1200px;
     background-color: rgb(255, 255, 255);
     align-self: center;
-    margin: 13% 0 0 10%;
+    margin: 10% auto;
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 20px;
 }
+
+/* Contact information section */
 .contact .informations {
     background-color: rgb(250, 250, 250);
     box-shadow: 5px 5px 10px grey;
-    height: 450px;
-    width: 1000px;
-    margin: 5%;
+    width: 100%;
+    max-width: 1000px;
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
+    padding: 20px;
 }
+
+/* Find us section in contact */
 .informations .findus {
-    height: 500px;
-    width:350px;
+    width: 350px;
     background-color: rgb(18, 18, 95);
-    margin: -2.5% 0 0 5%;
     box-shadow: 5px 5px 10px grey;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding: 20px;
 }
-.findus p, .findus h3 {
+
+/* Text styling inside the 'find us' section */
+.findus p, 
+.findus h3 {
     color: white;
-    margin:  0 0 10%;
+    margin: 0 0 10px;
 }
+
+/* Form title */
 .form h3 {
     text-align: center;
-    margin: 5%;
+    margin: 5% 0;
 }
+
+/* Form styling */
 .informations form {
     display: flex;
     flex-direction: column;
-    margin: 5% 0 0 10%;
+    margin-left: 10%;
 }
-.informations form input {
-    width: 500px;
+
+/* Input field styling */
+.informations form input, 
+.informations form textarea {
+    width: 100%;
+    max-width: 500px;
     height: 40px;
     margin-bottom: 5%;
     font-size: 18px;
@@ -62,15 +74,13 @@
     border-radius: 5px;
     padding-left: 4%;
 }
+
+/* Textarea specific styling */
 .informations form textarea {
-    width: 500px;
     height: 100px;
-    font-size: 18px;
-    border: none;
-    border-bottom: 2px solid black;
-    border-radius: 5px;
-    padding-left: 4%;
 }
+
+/* Submit button styling */
 .form button {
     width: 100px;
     height: 40px;
@@ -81,3 +91,50 @@
     border: none;
     border-radius: 10px;
 }
+
+/* Media Query for Small Screens */
+@media (max-width: 768px) {
+    .contact {
+        margin: 10% 5%;
+        width: 90%;
+    }
+
+    .informations {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .informations form {
+        margin: 5% 0;
+    }
+
+    .informations form input, 
+    .informations form textarea {
+        width: 100%;
+    }
+
+    .form button {
+        margin: 3% 0 0 40%;
+    }
+}
+
+/* Media Query for Very Small Screens */
+@media (max-width: 450px) {
+    .contact {
+        margin: 15% 5%;
+    }
+
+    .informations .findus {
+        width: 100%;
+        margin: 10px 0;
+    }
+
+    .informations form {
+        margin-left: 0;
+    }
+
+    .form button {
+        width: 90%;
+        margin: 10px 0;
+    }
+}
diff --git a/assets/css/about(inlines).css b/assets/css/about(inlines).css
index 5cd8ac05..09dba260 100644
--- a/assets/css/about(inlines).css
+++ b/assets/css/about(inlines).css
@@ -1,12 +1,12 @@
 #progressBar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 0%;
-    height: 8px;
-    background-color: #f76b45;
-    z-index: 9999;
-  }
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0%;
+  height: 8px;
+  background-color: #f76b45;
+  z-index: 9999;
+}
 .circle {
 position: absolute;
 width: 25px;
@@ -29,7 +29,7 @@ z-index: 9999;
 
 @media (max-width: 720px) {
 .circle-container {
-  display: none;
+display: none;
 }
 }
 
@@ -70,17 +70,20 @@ transform: scaleX(1); /* Shrink to zero width */
 }
 
 .blog-content {
-  text-align: left;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 80%;
-  /* Adjust this value to increase or decrease the margins */
+text-align: left;
+margin-left: auto;
+margin-right: auto;
+max-width: 80%;
+/* Adjust this value to increase or decrease the margins */
 }
 
 @media (max-width:768px) {
-  .blog-content{
-    max-width: 100%;
-  }
+.blog-content{
+  max-width: 100%;
+}
+
+
+
+
 
-  
 }
\ No newline at end of file
diff --git a/assets/css/about.css b/assets/css/about.css
index 8d325e5a..4e3a2206 100644
--- a/assets/css/about.css
+++ b/assets/css/about.css
@@ -171,7 +171,80 @@
   visibility: hidden;
 }
 
+@media (max-width: 768px) {
+  /* Title Adjustments */
+  .card h2 {
+      font-size: 1.25rem; /* Adjust size for readability on mobile */
+      margin-bottom: 15px; /* Reduced margin */
+      text-align: center; /* Center-align titles */
+  }
+
+  /* Flex Container Adjustments for row-card */
+  .row-card {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 15px; /* Add spacing between items */
+      justify-content: center; /* Center items on smaller screens */
+  }
+
+  /* Adjust column layout for smaller screens */
+  .col-md-4 {
+      flex: 1 1 100%; /* Ensure it takes full width on small screens */
+      max-width: 100%;
+      padding: 10px;
+  }
+
+  /* Full-width services */
+  .service {
+      width: 100%;
+      padding: 20px;
+      box-sizing: border-box; /* Include padding in width calculation */
+  }
+
+  /* Adjust shadow cards */
+  .shadow1, .shadow2 {
+      width: 100%;
+      left: 0;
+      box-sizing: border-box; /* Include padding and margin in width calculation */
+  }
+
+  /* Adjust the layout of good-card */
+  .good-card {
+      display: flex;
+      flex-direction: column; 
+      gap: 15px; /* Add gap between items */
+      margin-top: 20px; /* More space between sections */
+  }
+
+  /* Ensure white-card and color-card are full-width */
+  .white-card, .color-card {
+      width: 100%;
+      max-width: 100%;
+      padding: 20px;
+      box-sizing: border-box; /* Ensure padding doesn't affect width */
+  }
+
+  /* Make sure images are responsive */
+  .card-image {
+      width: 100%; /* Ensure images fit their container */
+      height: auto; /* Maintain aspect ratio */
+  }
+
+  /* Ensure button sizes are mobile-friendly */
+  .button {
+      width: 100%;
+      padding: 12px;
+      font-size: 1.1rem; /* Make buttons larger and easier to tap */
+      box-sizing: border-box;
+  }
+}
+
+
+.social-icons{
+
+
 .social-icons {
+
   text-align: left;
 }
 
@@ -524,4 +597,4 @@ body.dark-mode .about-section {
   .service p {
     font-size: 14px;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/css/blog.css b/assets/css/blog.css
index 5b91dfa5..95dc8529 100644
--- a/assets/css/blog.css
+++ b/assets/css/blog.css
@@ -1,152 +1,275 @@
-/* improvement */
+/* Global styles */
+:root {
+  --bg-color-dark: #333; /* Dark background color */
+  --text-color-dark: white; /* Text color for dark mode */
+  --primary-color: #f76b45; /* Primary button or accent color */
+  --border-color-light: #ccc;
+}
+
+html {
+  font-size: 100%;
+}
+
+@media (max-width: 768px) {
+  html {
+    font-size: 90%;
+  }
+}
+
+@media (max-width: 480px) {
+  html {
+    font-size: 85%;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 #progressBar {
   position: fixed;
   top: 0;
   left: 0;
   width: 0%;
   height: 8px;
-  background-color: #f76b45;
+  background-color: var(--primary-color);
   z-index: 9999;
+  transition: width 0.3s ease;
 }
+
 * {
-cursor: url('./assets/images/ads_click_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg'), auto;
+  cursor: url('./assets/images/ads_click_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg'), auto;
 }
 
-
+/* Circle styles */
 .circle {
-position: absolute;
-width: 25px;
-height: 25px;
-border-radius: 50%;
-pointer-events: none;
-background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 0.5));
-transition: transform 0.1s, left 0.1s, top 0.1s;
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  pointer-events: none;
+  background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 0.5));
+  transition: transform 0.1s ease, left 0.2s ease, top 0.2s ease;
 }
 
 .circle-container {
-position: fixed;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
-pointer-events: none;
-z-index: 9999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
 }
 
 @media (max-width: 720px) {
-.circle-container{
-  display: none;
-}
+  .circle-container {
+    display: none;
+  }
 }
 
+/* Popup Message */
 .unique-popup-message {
-position: fixed; /* Change to fixed positioning */
-top: 30px; /* Adjust this value to be below the navbar */
-right: 2px; /* Adjust this value for the desired distance from the right edge */
-width: 300px; /* Adjust width as needed */
-transform: translateX(0); /* Center the popup horizontally */
-background-color: #a4d8ff;
-color: #131722;
-padding: 11px;
-border-radius: 5px;
-text-align: center;
-z-index: 1000;
-box-sizing: border-box;
-overflow: hidden; /* Hide the expanding border animation */
-position: relative;
+  position: fixed;
+  top: 30px;
+  right: 2px;
+  width: 300px;
+  transform: translateX(0);
+  background-color: #a4d8ff;
+  color: #131722;
+  padding: 11px;
+  border-radius: 5px;
+  text-align: center;
+  z-index: 1000;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+
 }
 
 .border-animation {
-position: absolute;
-bottom: 0;
-left: 0;
-height: 7px; /* Same height as the border */
-background-color: rgb(17, 9, 230);
-width: 100%;
-transform-origin: right; /* Start shrinking from the right */
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 7px;
+  background-color: rgb(17, 9, 230);
+  width: 100%;
+  transform-origin: right;
 }
 
 @keyframes borderAnimation {
-from {
-transform: scaleX(0); /* Full width initially */
-}
-to {
-transform: scaleX(1); /* Shrink to zero width */
-}
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
 }
-.social-icons{
 
-text-align: left;
+/* Social Icons */
+.social-icons {
+  text-align: left;
 }
 
 .social-icons a {
-display: inline-flex;
-justify-content: center;
-align-items: center;
-width: 2.1rem;
-height: 2.1rem;
-background-color: transparent;
-border: 0.2rem solid #0890ff;
-font-size: 1.1rem;
-border-radius: 50%;
-margin: 1rem 0.5rem 0.5rem 0;
-transition: 0.3s ease;
-color: #55ff00;
-text-align: left;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.1rem;
+  height: 2.1rem;
+  background-color: transparent;
+  border: 0.2rem solid #0890ff;
+  font-size: 1.1rem;
+  border-radius: 50%;
+  margin: 1rem 0.5rem 0.5rem 0;
+  transition: 0.3s ease;
+  color: #55ff00;
 }
 
-.social-icons a:hover {
-color: rgb(139, 249, 12);
-transform: scale(1.3) translateY(-5px);
-background-color: #0048ff;
-box-shadow: 0 0 25px #03133c;
+.social-icons a:hover,
+.social-icons a:focus {
+  color: rgb(139, 249, 12);
+  transform: scale(1.3) translateY(-5px);
+  background-color: #0048ff;
+  box-shadow: 0 0 25px #03133c;
+  outline: none;
 }
 
+.social-icons a:focus {
+  outline: 2px solid #55ff00;
+  outline-offset: 3px;
+}
 
+/* Sign-in with styles */
 .or-sign-in-with {
-margin: 20px 0;
-font-size: 14px;
-font-weight: bold;
-color: #666;
-text-align: center;
-position: relative;
+  margin: 20px 0;
+  font-size: 14px;
+  font-weight: bold;
+  color: #666;
+  text-align: center;
+  position: relative;
+}
+
+.or-sign-in-with::before,
+.or-sign-in-with::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  border-top: 1px solid var(--border-color-light);
 }
 
 .or-sign-in-with::before {
-content: "";
-position: absolute;
-top: 50%;
-left: 0; 
-width: 35%; 
-border-top: 1px solid #ccc;
-transform: translateX(-2%); 
+  left: 0;
+  width: 35%;
+  transform: translateX(-2%);
 }
 
 .or-sign-in-with::after {
-content: "";
-position: absolute;
-top: 50%;
-right: 0; 
-width: 35%; 
-border-top: 1px solid #ccc;
-transform: translateX(2%);
+  right: 0;
+  width: 35%;
+  transform: translateX(2%);
 }
+
+/* Form Styles */
 .form-check {
-display: flex;
-align-items: center;
+  display: flex;
+  align-items: center;
 }
+
 .form-check a {
-margin-left: auto; 
+  margin-left: auto;
 }
+
 .form {
-height: 500px;
-background-color: #0890ff;
-margin: 100px;
+  height: 500px;
+  background-color: #0890ff;
+  margin: 100px;
 }
+
 h2 {
+ display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30px;
+  margin: 40px;
+}
+
+/* Dark Mode Styles */
+body.dark-mode {
+  background-color: var(--bg-color-dark);
+  color: var(--text-color-dark);
+}
+
+body.dark-mode .unique-popup-message,
+body.dark-mode .social-icons a {
+  background-color: #555;
+  color: #f0f0f0;
+  border-color: #777;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .unique-popup-message {
+    width: 80%;
+    right: 10px;
+  }
+
+  .social-icons {
+    text-align: center;
+  }
+
+  .social-icons a {
+    width: 3rem;
+    height: 3rem;
+    font-size: 1.2rem;
+    margin: 0.5rem;
+  }
+
+  .form {
+    height: auto;
+    margin: 20px;
+    padding: 20px;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    margin: 10px 0;
+  }
+
+  .circle {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  h2 {
+    font-size: 1.2rem;
+    margin: 10px 0;
+  }
+
+  .unique-popup-message {
+    font-size: 14px;
+  }
+
+  .form {
+    margin: 10px;
+  }
+
+  .social-icons a {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1rem;
+    margin: 0.3rem;
+  }
+}
 /* display: flex; */
 /* align-items: center; */
 justify-content: center;
 margin-top: 30px;
 /* margin: 40px; */
-}
\ No newline at end of file
+}
diff --git a/assets/css/card.css b/assets/css/card.css
index 9f3d55aa..b2f966f2 100644
--- a/assets/css/card.css
+++ b/assets/css/card.css
@@ -1,126 +1,119 @@
+/* Card Styling */
 .card2 {
-    margin: 10px;
-    width: 100%;
-    max-width: 310px;
+  margin: 10px;
+  width: 100%;
+  max-width: 310px;
+  height: 70px;
+  background: #353535;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  backdrop-filter: blur(10px);
+  transition: transform 0.5s ease-in-out, background-color 0.5s ease;
+}
+
+.card2:hover {
+  cursor: pointer;
+  transform: scale(1.05);
+}
+
+/* Image Styling */
+.img {
+  width: 50px;
+  height: 50px;
+  margin-left: 10px;
+  border-radius: 10px;
+  background: linear-gradient(#d7cfcf, #9198e5);
+  transition: background 0.5s ease;
+}
+
+.card2:hover > .img {
+  background: linear-gradient(#9198e5, #712020);
+}
+
+/* TextBox Styling */
+.textBox {
+  width: calc(100% - 90px);
+  margin-left: 10px;
+  color: white;
+  font-family: 'Poppins', sans-serif;
+}
+
+.textContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Text Styling */
+.span {
+  font-size: 10px;
+}
+
+.h1 {
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.p {
+  font-size: 12px;
+  font-weight: lighter;
+}
+
+/* Feature Section */
+.feature {
+  margin: 50px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* Responsive Styling for Small Screens */
+@media (max-width: 450px) {
+  .card2 {
+    max-width: 290px;
     height: 70px;
-    background: #353535;
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    backdrop-filter: blur(10px);
-    transition: 0.5s ease-in-out;
+    border-radius: 12px;
+    backdrop-filter: blur(5px);
+    transition: transform 0.3s ease-in-out, background-color 0.3s ease;
+    margin: 10px auto;
   }
-  
+
   .card2:hover {
-    cursor: pointer;
     transform: scale(1.05);
   }
-  
+
   .img {
-    width: 50px;
-    height: 50px;
-    margin-left: 10px;
-    border-radius: 10px;
-    background: linear-gradient(#d7cfcf, #9198e5);
+    width: 40px;
+    height: 40px;
+    margin-left: 8px;
+    border-radius: 8px;
   }
-  
-  .card:hover > .img {
-    transition: 0.5s ease-in-out;
+
+  .card2:hover > .img {
     background: linear-gradient(#9198e5, #712020);
   }
-  
+
   .textBox {
-    width: calc(100% - 90px);
+    width: calc(100% - 60px);
     margin-left: 10px;
-    color: white;
-    font-family: 'Poppins' sans-serif;
+    font-size: 12px;
   }
-  
+
   .textContent {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    width: 100%;
   }
-  
+
   .span {
-    font-size: 10px;
+    font-size: 8px;
   }
-  
+
   .h1 {
     font-size: 12px;
-    font-weight: bold;
   }
-  
+
   .p {
-    font-size: 12px;
-    font-weight: lighter;
-  }
-  
-  .feature{
-   margin: 50px;
-   display: flex;
-   flex-direction: column;
-   justify-content: center;
+    font-size: 10px;
   }
-  @media (max-width : 450px){
-    .card2 {
-        width: 100%;
-        max-width: 290px;
-        height: 70px;
-        background: #353535;
-        border-radius: 12px;
-        display: flex;
-        align-items: center;
-        justify-content: left;
-        backdrop-filter: blur(5px);
-        transition: 0.5s ease-in-out;
-        margin-bottom: 20px;
-        margin: 10px;
-      }
-      
-      .card2:hover {
-        cursor: pointer;
-        transform: scale(1.05);
-      }
-      
-      .img {
-        width: 40px;
-        height: 40px;
-        margin-left: 8px;
-        border-radius: 8px;
-        background: linear-gradient(#d7cfcf, #9198e5);
-      }
-      
-      .card2:hover > .img {
-        background: linear-gradient(#9198e5, #712020);
-      }
-      
-      .textBox {
-        width: calc(100% - 60px);
-        margin-left: 10px;
-        color: white;
-        font-family: 'Poppins', sans-serif;
-      }
-      
-      .textContent {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      
-      .span {
-        font-size: 8px;
-      }
-      
-      .h1 {
-        font-size: 12px;
-        font-weight: bold;
-      }
-      
-      .p {
-        font-size: 10px;
-        font-weight: lighter;
-      }
-      
-  }
\ No newline at end of file
+}
diff --git a/assets/css/contributors.css b/assets/css/contributors.css
index cf1bb9eb..74fae9d1 100644
--- a/assets/css/contributors.css
+++ b/assets/css/contributors.css
@@ -373,6 +373,10 @@ header nav ul li a:hover {
   border-radius: 0.75rem;
 }
 
+@media (max-width: 720px) {
+  /* Hide .circle-container */
+  .circle-container {
+
 @media (max-width: 900px) {
   header {
     display: flex;
diff --git a/assets/css/creditCard.css b/assets/css/creditCard.css
index 6b72872f..3c0f77cd 100644
--- a/assets/css/creditCard.css
+++ b/assets/css/creditCard.css
@@ -31,7 +31,7 @@ body {
 
 .cc-header h1 {
     margin: 0;
-    font-size: 28px;
+    font-size: 2rem;
 }
 
 .cc-main {
@@ -58,7 +58,7 @@ body {
 }
 
 .cc-filters h2 {
-    font-size: 20px;
+    font-size: 1.5rem;
     margin-bottom: 20px;
     color: var(--primary-color);
     width: 100%;
@@ -86,7 +86,7 @@ body {
     padding: 8px;
     border: 1px solid #ccc;
     border-radius: 4px;
-    font-size: 14px;
+    font-size: 1rem;
 }
 
 .cc-list {
@@ -116,7 +116,7 @@ body {
 }
 
 .cc-card-header h3 {
-    font-size: 20px;
+    font-size: 1.25rem;
     margin: 0 0 10px 0;
 }
 
@@ -179,7 +179,7 @@ body {
 }
 
 .comparison-card h3 {
-    font-size: 20px;
+    font-size: 1.25rem;
     margin-top: 0;
     color: var(--primary-color);
 }
@@ -206,3 +206,30 @@ body {
         flex-direction: column;
     }
 }
+
+@media (max-width: 480px) {
+    .cc-header h1 {
+        font-size: 1.5rem;
+    }
+
+    .cc-card-header h3 {
+        font-size: 1.125rem;
+    }
+
+    .cc-card-body p,
+    .cc-card-body ul {
+        font-size: 0.875rem;
+    }
+
+    .cc-card .compare-btn {
+        padding: 6px 12px;
+    }
+
+    .cc-list {
+        grid-template-columns: 1fr;
+    }
+
+    .cc-main {
+        padding: 10px;
+    }
+}
diff --git a/assets/css/login.css b/assets/css/login.css
index ceac0c46..d2c59ac1 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -1,36 +1,46 @@
+/* Password container styling */
 .password-container {
   position: relative;
-  width: 100%; /* Set the width of the container */
-  box-sizing: border-box; /* Include padding and border in the element's total width and height */
+  width: 100%; /* Full width for flexibility */
+  box-sizing: border-box; /* Include padding and border in total dimensions */
 }
 
 .password-container input {
-  width: 100%; /* Ensure the input takes the full width of the container */
-  padding-right: 40px; /* Add right padding to make space for the icon */
-  box-sizing: border-box; /* Include padding and border in the input's total width */
+  width: 100%; /* Input takes full width */
+  padding-right: 45px; /* Space for icon */
+  padding-left: 10px; /* Optional padding for consistency */
+  box-sizing: border-box;
+  border: 1px solid #ccc; /* Light border for clarity */
+  border-radius: 5px;
+  height: 40px;
 }
 
+/* Toggle password visibility icon */
 .password-container .toggle-password {
   position: absolute;
-  top: 50%; /* Position it in the center vertically */
-  right: 100px; /* Adjust this value to position the icon from the right */
-  transform: translateY(-50%); /* Center the icon vertically */
-  cursor: pointer; /* Change cursor to pointer on hover */
-  color: #555; /* Set the color of the icon */
-  font-size: 16px; /* Adjust the font size as needed */
-  z-index: 1; /* Ensure it appears above other elements */
+  top: 50%; /* Center vertically */
+  right: 10px; /* Adjust icon's horizontal position */
+  transform: translateY(-50%); /* Center icon within input field */
+  cursor: pointer;
+  color: #555; /* Icon color */
+  font-size: 18px; /* Icon size */
+  z-index: 1; /* Ensure icon appears on top */
 }
 
-
+/* Table styling */
 table {
-  width: 100%;
+  width: 100%; /* Full width */
+  border-collapse: collapse; /* Removes spacing between table cells */
 }
 
 table tr td {
-  padding: 10px 0;
+  padding: 10px 0; /* Spacing for cells */
+  border-bottom: 1px solid #ddd; /* Light border for row separation */
 }
 
+/* Error message styling */
 .error {
-  color: rgb(247, 2, 2);
-  font-size: 0.9em;
+  color: rgb(247, 2, 2); /* Red for error */
+  font-size: 0.9em; /* Slightly smaller font */
+  padding-top: 5px; /* Space above error message */
 }
diff --git a/assets/css/market-time.css b/assets/css/market-time.css
index 04f08d25..486ae244 100644
--- a/assets/css/market-time.css
+++ b/assets/css/market-time.css
@@ -43,8 +43,15 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added transition for interactivity */
 }
 
+.market-card-unique:hover {
+  transform: scale(1.05); /* Slight scale on hover */
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
+}
+
+/* Market status tags */
 .market-status-tag-unique {
   padding: 5px 15px;
   border-radius: 20px;
@@ -63,6 +70,7 @@
   background-color: #4caf50;
 }
 
+/* Card title and information */
 .market-card-title-unique {
   font-size: 1.2rem;
   color: #333;
@@ -81,7 +89,6 @@
   margin-top: 10px;
 }
 
-
 /* Responsive design for market status feature */
 @media (min-width: 1024px) and (min-width: 768px) {
   .market-status-section-unique {
diff --git a/assets/css/popup.css b/assets/css/popup.css
index 755a7881..041576c9 100644
--- a/assets/css/popup.css
+++ b/assets/css/popup.css
@@ -1,3 +1,4 @@
+/* Modal Styling */
 .modal {
   display: none; /* Hidden by default */
   position: fixed;
@@ -46,6 +47,18 @@
     width: 95%; /* Slightly wider on very small screens */
     padding: 15px;
   }
+
+  /* Adjust button size and layout for smaller screens */
+  .main-btn {
+    width: 100%;
+    padding: 12px;
+    font-size: 16px;
+  }
+  
+  /* Adjust header button for hero section on small screens */
+  .header-hero .main-btn {
+    width: 80%; /* Increase button size for smaller screens */
+  }
 }
 
 /* Additional styles for form elements */
@@ -58,21 +71,32 @@
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 4px;
+  font-size: 16px;
 }
 
 .main-btn {
   width: 100%;
-  background: linear-gradient(to right,#fe8464 0%, #fe6e9a 50%, #fe8464 100%);
+  background: linear-gradient(to right, #fe8464 0%, #fe6e9a 50%, #fe8464 100%);
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
-}
-
-.header-hero .main-btn{
-  width: 60%;
+  padding: 12px;
+  font-size: 18px;
 }
 
 .main-btn:hover {
   background-color: #0056b3;
 }
+
+/* Further responsiveness for very small screens */
+@media (max-width: 375px) {
+  .modal-content {
+    margin: 5% auto;
+    padding: 10px;
+  }
+
+  .main-btn {
+    font-size: 14px; /* Adjust font size for very small screens */
+  }
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index a4531862..1d82b2cb 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -330,7 +330,6 @@ p {
 
 .join {
   background: -webkit-linear-gradient(rgb(51, 200, 193), rgb(17, 155, 210));
-  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
@@ -340,25 +339,11 @@ p {
   line-height: 42px;
 }
 
-@media (max-width: 767px) {
-  .section-title .title {
-    font-size: 20px;
-  }
-}
-
-@media only screen and (min-width: 576px) and (max-width: 767px) {
-  .section-title .title {
-    font-size: 30px;
-  }
-}
-
-@media screen and (max-width: 375px) {
-  .container {
-    overflow-x: hidden;
-  }
-  .page-container {
-    overflow-x: auto;
-  }
+/* Default Title Styling */
+.section-title .title {
+  font-size: 32px;
+  padding-top: 10px;
+  color: black;
 }
 
 .section-title .title span {
@@ -366,6 +351,7 @@ p {
   display: contents;
 }
 
+/* Subtitle Styling */
 .section-title .sub-title {
   font-size: 18px;
   font-weight: 400;
@@ -373,33 +359,36 @@ p {
   text-transform: uppercase;
 }
 
+/* Media Queries */
 @media (max-width: 767px) {
+  .section-title .title {
+    font-size: 24px; /* Default for max-width 767px */
+  }
+  
   .section-title .sub-title {
     font-size: 16px;
   }
 }
 
-.section-title .title {
-  font-size: 32px;
-  padding-top: 10px;
-  color: black;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
+@media only screen and (min-width: 576px) and (max-width: 767px) {
   .section-title .title {
-    font-size: 30px;
+    font-size: 30px; /* Adjust title size for screen sizes between 576px and 767px */
   }
 }
 
-@media (max-width: 767px) {
-  .section-title .title {
-    font-size: 24px;
+@media (max-width: 375px) {
+  .container {
+    overflow-x: hidden;
+  }
+  .page-container {
+    overflow-x: auto;
   }
 }
 
-.section-title .title span {
-  font-weight: 400;
-  display: contents;
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .section-title .title {
+    font-size: 30px; /* Adjust title size for screen sizes between 992px and 1199px */
+  }
 }
 
 .slick-slide {
@@ -2151,7 +2140,7 @@ p {
   height: 4.2em; 
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+ 
   -webkit-box-orient: vertical;
   margin-bottom: 15px;
   transition: 0.25s ease;
diff --git a/assets/css/trends.css b/assets/css/trends.css
index 3ba98e7a..802315d6 100644
--- a/assets/css/trends.css
+++ b/assets/css/trends.css
@@ -1,43 +1,41 @@
-
-
 :root {
-  /* --bg-color-dark:white;  */
-  /* --text-color-dark: black;  */
+  --bg-color-dark: #333; /* Dark background color */
+  --text-color-dark: white; /* Text color for dark mode */
+  --primary-color: #f76b45; /* Primary button or accent color */
+  --border-color-light: #ccc;
 }
 
-
 body {
-  background-color:  white;
+  background-color: white;
+  color: #333; /* Default text color */
+  font-family: Arial, sans-serif;
 }
 
-.navbar-light {
-  width: 100%; 
-}
-
-.navbar-dark {
-  width: 100%; 
+.navbar-light, .navbar-dark {
+  width: 100%;
 }
 
+/* Progress Bar */
 #progressBar {
   position: fixed;
   top: 0;
   left: 0;
   width: 0%;
   height: 8px;
-  background-color: #f76b45;
+  background-color: var(--primary-color);
   z-index: 9999;
 }
 
 * {
   cursor: url('/assets/images/ads_click_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg'), auto;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
 
-
 .market-status-heading-unique {
   margin: 20px;
 }
+
 .circle {
   position: absolute;
   width: 25px;
@@ -60,7 +58,7 @@ body {
 
 @media (max-width: 720px) {
   .circle-container {
-      display: none;
+    display: none;
   }
 }
 
@@ -69,15 +67,12 @@ body {
   top: 30px;
   right: 2px;
   width: 300px;
-  transform: translateX(0);
   background-color: #96c1e3;
   color: #131722;
   padding: 11px;
   border-radius: 5px;
   text-align: center;
   z-index: 1000;
-  box-sizing: border-box;
-  overflow: hidden;
 }
 
 .border-animation {
@@ -88,56 +83,53 @@ body {
   background-color: rgb(4, 0, 128);
   width: 100%;
   transform-origin: right;
-  animation: borderAnimation 1s forwards; /* Apply animation */
+  animation: borderAnimation 1s forwards;
 }
 
 @keyframes borderAnimation {
   from {
-      transform: scaleX(0);
+    transform: scaleX(0);
   }
   to {
-      transform: scaleX(1);
+    transform: scaleX(1);
   }
 }
-body.dark-mode .market-status-section-unique{
+
+/* Dark Mode Styles */
+body.dark-mode {
   background-color: var(--bg-color-dark);
   color: var(--text-color-dark);
 }
 
-body.dark-mode .market-status-heading-unique{
-  color: white;
-}
-body.dark-mode .market-card-unique{
-  background-color: rgb(42, 36, 36);
+body.dark-mode .market-status-section-unique,
+body.dark-mode .market-card-unique,
+body.dark-mode .finlogix-container,
+body.dark-mode .container-main,
+body.dark-mode .footer-area {
+  background-color: var(--bg-color-dark);
   color: var(--text-color-dark);
 }
-body.dark-mode .market-card-unique h3{ 
+
+body.dark-mode .market-status-heading-unique {
+  color: white;
+}
+
+body.dark-mode .market-card-unique h3 {
   color: rgb(199, 192, 192);
-} 
-body.dark-mode .finlogix-container{
-  background-color: var(--bg-color-dark);
-  color: var(--text-color-dark);
-}  
-body.dark-mode .container-main{
-  background-color: var(--bg-color-dark);
-  color: var(--text-color-dark);
-} 
-body.dark-mode .footer-area{
-  background-color: var(--bg-color-dark);
-  color: var(--text-color-dark);
-} 
-.container{
+}
+
+/* Container and Button Styles */
+.container {
   height: 100%;
   width: 100%;
-
 }
-.btn-text{
-
-  margin-left:  35px;
-  color:  white;
 
+.btn-text {
+  margin-left: 35px;
+  color: white;
 }
-.social-icons{
+
+.social-icons {
   text-align: left;
 }
 
@@ -154,7 +146,6 @@ body.dark-mode .footer-area{
   margin: 1rem 0.5rem 0.5rem 0;
   transition: 0.3s ease;
   color: #55ff00;
-  text-align: left;
 }
 
 .social-icons a:hover {
@@ -173,24 +164,21 @@ body.dark-mode .footer-area{
   position: relative;
 }
 
-.or-sign-in-with::before {
+.or-sign-in-with::before, .or-sign-in-with::after {
   content: "";
   position: absolute;
   top: 50%;
-  left: 12px;
   width: 33%;
-  border-top: 1px solid #ccc;
-  transform: translateX(-5%);
+  border-top: 1px solid var(--border-color-light);
+  transform: translateY(-50%);
+}
+
+.or-sign-in-with::before {
+  left: 12px;
 }
 
 .or-sign-in-with::after {
-  content: "";
-  position: absolute;
-  top: 50%;
   right: 12px;
-  width: 33%;
-  border-top: 1px solid #ccc;
-  transform: translateX(5%);
 }
 
 .form-check {
@@ -226,6 +214,7 @@ body.dark-mode .footer-area{
   stroke-width: 2;
 }
 
+/* Trading Widget Hover Effects */
 .tradingview-widget-container {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border: 2px solid rgb(224, 221, 221);
@@ -236,3 +225,22 @@ body.dark-mode .footer-area{
   box-shadow: 0px 4px 15px rgba(187, 15, 15, 0.2);
   border: 2px solid rgb(166, 153, 153);
 }
+
+/* Responsiveness for small screens */
+@media (max-width: 768px) {
+  .social-icons a {
+    width: 1.8rem;
+    height: 1.8rem;
+  }
+
+  .unique-popup-message {
+    width: 250px;
+    font-size: 14px;
+    padding: 8px;
+  }
+
+  .home-link {
+    font-size: 14px;
+    padding: 8px;
+  }
+}
diff --git a/blog.html b/blog.html
index 9b8a483a..0ba5dbe9 100644
--- a/blog.html
+++ b/blog.html
@@ -679,6 +679,13 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
       transform: scaleX(1);
     }
 
+ #blog-pic {
+
+      transform: translateY(10%);
+      width: 100px;
+      z-index: 1;
+      padding: 10px;
+
     .card-container {
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -855,6 +862,40 @@ <h1 id="title" style="font-size: 2.0rem; margin-top: 60px; margin-left: 5px;">Bl
 
     // Function to display blog posts
     function displayBlogs(blogs) {
+.single-blog {
+        background: linear-gradient(45deg, #e0a2fb, #0cbefa);
+        border: 5px solid white;
+      }
+    
+        /* Basic styles for the blog layout */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            padding: 0;
+        }
+        #search-input {
+            margin-bottom: 20px;
+            padding: 10px;
+            width: 100%;
+            max-width: 400px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        #filtered-blogs {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        .card {
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        .card-image {
+            width: 100%;
+            height: auto;
 
       const filteredBlogsContainer = document.getElementById('filtered-blogs');
       filteredBlogsContainer.innerHTML = ''; // Clear previous content