From 61ecaabb6fe688487af310449e98d32b86ad8906 Mon Sep 17 00:00:00 2001
From: Mallik-vinukonda <158685334+Mallik-vinukonda@users.noreply.github.com>
Date: Sat, 9 Nov 2024 17:40:42 +0530
Subject: [PATCH] done

---
 assets/css/ContactUs.css   | 113 +++++++++++++---
 assets/css/blog.css        | 268 +++++++++++++++++++++++--------------
 assets/css/card.css        | 231 +++++++++++++++++---------------
 assets/css/market-time.css |  39 +++++-
 assets/css/trends.css      | 153 ++++++++++++++-------
 5 files changed, 525 insertions(+), 279 deletions(-)

diff --git a/assets/css/ContactUs.css b/assets/css/ContactUs.css
index fd398082..eb4851bd 100644
--- a/assets/css/ContactUs.css
+++ b/assets/css/ContactUs.css
@@ -1,36 +1,44 @@
 .footer-widget-pb-100 {
     background-color: rgb(0, 59, 117);
 }
+
 .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 {
-    width:1200px;
+    width: 100%;
+    max-width: 1200px;
     height: auto;
     background-color: rgb(255, 255, 255);
     align-self: center;
-    margin: 13% 0 0 10%;
+    margin: 13% auto;
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 0 5%;
 }
+
 .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;
+    margin: 5% 0;
     display: flex;
     flex-direction: row;
+    padding: 20px;
 }
+
 .informations .findus {
-    height: 500px;
-    width:350px;
+    width: 100%;
+    max-width: 350px;
     background-color: rgb(18, 18, 95);
     margin: -2.5% 0 0 5%;
     box-shadow: 5px 5px 10px grey;
@@ -38,46 +46,113 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding: 20px;
 }
+
 .findus p, .findus h3 {
     color: white;
-    margin:  0 0 10%;
+    margin: 0 0 10%;
 }
+
 .form h3 {
     text-align: center;
     margin: 5%;
 }
+
 .informations form {
     display: flex;
     flex-direction: column;
     margin: 5% 0 0 10%;
 }
-.informations form input {
-    width: 500px;
-    height: 40px;
-    margin-bottom: 5%;
+
+.informations form input, .informations form textarea {
+    width: 100%;
+    max-width: 500px;
     font-size: 18px;
     border: none;
     border-bottom: 2px solid black;
     border-radius: 5px;
     padding-left: 4%;
+    margin-bottom: 5%;
 }
+
 .informations form textarea {
-    width: 500px;
     height: 100px;
-    font-size: 18px;
-    border: none;
-    border-bottom: 2px solid black;
-    border-radius: 5px;
-    padding-left: 4%;
 }
+
 .form button {
     width: 100px;
     height: 40px;
     align-self: center;
-    margin: 3% 0 0 45%;
+    margin: 3% auto;
     background-color: rgb(19, 19, 89);
     color: white;
     border: none;
     border-radius: 10px;
 }
+
+/* Responsive Styles */
+@media (max-width: 1024px) {
+    .contact {
+        margin: 10% auto;
+        padding: 0 3%;
+    }
+
+    .informations {
+        flex-direction: column;
+        align-items: center;
+        padding: 15px;
+    }
+
+    .informations .findus {
+        margin: 5% auto;
+    }
+
+    .informations form {
+        margin: 5% 0;
+        align-items: center;
+    }
+}
+
+@media (max-width: 768px) {
+    .informations form input, .informations form textarea {
+        max-width: 100%;
+    }
+
+    .contact-custom-margin-big {
+        margin: 10% auto;
+        width: 250px;
+    }
+
+    .form button {
+        width: 80px;
+    }
+}
+
+@media (max-width: 480px) {
+    .contact {
+        margin: 8% auto;
+        padding: 0 2%;
+    }
+
+    .informations .findus {
+        width: 90%;
+        max-width: 300px;
+        padding: 15px;
+        margin: 5% 0;
+    }
+
+    .findus p, .findus h3 {
+        margin: 5%;
+        font-size: 14px;
+    }
+
+    .informations form input, .informations form textarea {
+        font-size: 16px;
+        padding-left: 3%;
+    }
+
+    .form button {
+        width: 70px;
+    }
+}
diff --git a/assets/css/blog.css b/assets/css/blog.css
index 5b91dfa5..909e65ba 100644
--- a/assets/css/blog.css
+++ b/assets/css/blog.css
@@ -1,4 +1,5 @@
-/* improvement */
+/* General Responsiveness for Various Components */
+
 #progressBar {
   position: fixed;
   top: 0;
@@ -8,145 +9,214 @@
   background-color: #f76b45;
   z-index: 9999;
 }
+
 * {
-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 Effect */
 .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, left 0.1s, top 0.1s;
 }
 
 .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;
+  }
 }
 
+/* Unique 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;
+  max-width: 90%;
+  width: 300px;
+  background-color: #a4d8ff;
+  color: #131722;
+  padding: 11px;
+  border-radius: 5px;
+  text-align: center;
+  z-index: 1000;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
+/* Border Animation */
 .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;
+  color: rgb(139, 249, 12);
+  transform: scale(1.3) translateY(-5px);
+  background-color: #0048ff;
+  box-shadow: 0 0 25px #03133c;
 }
 
-
+/* Or Sign-in-with Separator */
 .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%;
+  width: 35%;
+  border-top: 1px solid #ccc;
 }
 
 .or-sign-in-with::before {
-content: "";
-position: absolute;
-top: 50%;
-left: 0; 
-width: 35%; 
-border-top: 1px solid #ccc;
-transform: translateX(-2%); 
+  left: 0;
+  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;
+  transform: translateX(2%);
 }
+
+/* Form and Check Elements */
 .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;
+  background-color: #0890ff;
+  margin: 5%;
+  padding: 2rem;
+  border-radius: 8px;
+  box-sizing: border-box;
 }
+
 h2 {
-/* display: flex; */
-/* align-items: center; */
-justify-content: center;
-margin-top: 30px;
-/* margin: 40px; */
-}
\ No newline at end of file
+  text-align: center;
+  margin-top: 30px;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1024px) {
+  .form {
+    margin: 10%;
+    padding: 1.5rem;
+  }
+
+  .unique-popup-message {
+    right: 5px;
+    max-width: 85%;
+  }
+
+  .social-icons a {
+    width: 1.8rem;
+    height: 1.8rem;
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .form {
+    margin: 15%;
+    padding: 1.2rem;
+  }
+
+  .unique-popup-message {
+    max-width: 80%;
+    padding: 8px;
+  }
+
+  .or-sign-in-with {
+    font-size: 13px;
+  }
+
+  .social-icons a {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 0.9rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .form {
+    margin: 5%;
+    padding: 1rem;
+  }
+
+  .unique-popup-message {
+    top: 20px;
+    right: 2px;
+    max-width: 90%;
+  }
+
+  .or-sign-in-with {
+    font-size: 12px;
+  }
+
+  .social-icons a {
+    width: 1.3rem;
+    height: 1.3rem;
+    font-size: 0.8rem;
+  }
+}
diff --git a/assets/css/card.css b/assets/css/card.css
index 9f3d55aa..6b1c48c5 100644
--- a/assets/css/card.css
+++ b/assets/css/card.css
@@ -1,126 +1,135 @@
 .card2 {
-    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: 0.5s ease-in-out;
+  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: 0.5s ease-in-out;
+}
+
+.card2:hover {
+  cursor: pointer;
+  transform: scale(1.05);
+}
+
+.img {
+  width: 50px;
+  height: 50px;
+  margin-left: 10px;
+  border-radius: 10px;
+  background: linear-gradient(#d7cfcf, #9198e5);
+  transition: background 0.5s ease-in-out;
+}
+
+.card2:hover > .img {
+  background: linear-gradient(#9198e5, #712020);
+}
+
+.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;
+}
+
+.span {
+  font-size: 10px;
+}
+
+.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;
+}
+
+/* Responsive Adjustments for Smaller Screens */
+@media (max-width: 768px) {
+  .card2 {
+      max-width: 280px;
+      height: 65px;
+      border-radius: 16px;
+      margin: 8px;
   }
-  
-  .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: 45px;
+      height: 45px;
+      margin-left: 8px;
+      border-radius: 8px;
+  }
+
+  .textBox {
+      width: calc(100% - 70px);
+      margin-left: 8px;
+  }
+
+  .h1 {
+      font-size: 11px;
   }
-  
-  .card:hover > .img {
-    transition: 0.5s ease-in-out;
-    background: linear-gradient(#9198e5, #712020);
+
+  .p {
+      font-size: 11px;
+  }
+}
+
+/* Extra Small Screens */
+@media (max-width: 450px) {
+  .card2 {
+      max-width: 100%;
+      height: 60px;
+      border-radius: 12px;
+      margin: 10px 0;
+      backdrop-filter: blur(5px);
   }
-  
+
+  .img {
+      width: 40px;
+      height: 40px;
+      margin-left: 6px;
+      border-radius: 6px;
+  }
+
   .textBox {
-    width: calc(100% - 90px);
-    margin-left: 10px;
-    color: white;
-    font-family: 'Poppins' sans-serif;
+      width: calc(100% - 60px);
+      margin-left: 8px;
   }
-  
+
   .textContent {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+      flex-direction: column;
+      align-items: flex-start;
   }
-  
+
   .span {
-    font-size: 10px;
+      font-size: 8px;
   }
-  
+
   .h1 {
-    font-size: 12px;
-    font-weight: bold;
+      font-size: 10px;
   }
-  
+
   .p {
-    font-size: 12px;
-    font-weight: lighter;
-  }
-  
-  .feature{
-   margin: 50px;
-   display: flex;
-   flex-direction: column;
-   justify-content: center;
+      font-size: 9px;
   }
-  @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/market-time.css b/assets/css/market-time.css
index 04f08d25..336699d0 100644
--- a/assets/css/market-time.css
+++ b/assets/css/market-time.css
@@ -81,16 +81,13 @@
   margin-top: 10px;
 }
 
-
 /* Responsive design for market status feature */
-@media (min-width: 1024px) and (min-width: 768px) {
+@media (max-width: 1024px) {
   .market-status-section-unique {
     padding-left: 50px;
     padding-right: 50px;
   }
-}
 
-@media (max-width: 768px) {
   .market-status-heading-unique {
     font-size: 1.8rem;
   }
@@ -114,7 +111,7 @@
   }
 }
 
-@media (max-width: 480px) {
+@media (max-width: 768px) {
   .market-status-heading-unique {
     font-size: 1.5rem;
   }
@@ -135,4 +132,36 @@
   .market-card-info-unique {
     font-size: 0.8rem;
   }
+
+  .market-scroll-container-unique {
+    padding: 5px;
+  }
+}
+
+@media (max-width: 480px) {
+  .market-status-heading-unique {
+    font-size: 1.3rem;
+  }
+
+  .market-card-unique {
+    padding: 8px;
+  }
+
+  .market-status-tag-unique {
+    font-size: 0.6rem;
+    padding: 2px 6px;
+  }
+
+  .market-card-title-unique {
+    font-size: 0.8rem;
+  }
+
+  .market-card-info-unique {
+    font-size: 0.7rem;
+  }
+
+  .market-scroll-container-unique {
+    max-height: 350px;
+    padding: 5px;
+  }
 }
diff --git a/assets/css/trends.css b/assets/css/trends.css
index 3ba98e7a..29ab8f75 100644
--- a/assets/css/trends.css
+++ b/assets/css/trends.css
@@ -1,20 +1,9 @@
 
-
-:root {
-  /* --bg-color-dark:white;  */
-  /* --text-color-dark: black;  */
-}
-
-
 body {
-  background-color:  white;
+  background-color: white;
 }
 
-.navbar-light {
-  width: 100%; 
-}
-
-.navbar-dark {
+.navbar-light, .navbar-dark {
   width: 100%; 
 }
 
@@ -34,7 +23,6 @@ body {
   padding: 0px;
 }
 
-
 .market-status-heading-unique {
   margin: 20px;
 }
@@ -88,7 +76,7 @@ body {
   background-color: rgb(4, 0, 128);
   width: 100%;
   transform-origin: right;
-  animation: borderAnimation 1s forwards; /* Apply animation */
+  animation: borderAnimation 1s forwards;
 }
 
 @keyframes borderAnimation {
@@ -99,45 +87,43 @@ body {
       transform: scaleX(1);
   }
 }
-body.dark-mode .market-status-section-unique{
+
+body.dark-mode .market-status-section-unique {
   background-color: var(--bg-color-dark);
   color: var(--text-color-dark);
 }
 
-body.dark-mode .market-status-heading-unique{
+body.dark-mode .market-status-heading-unique {
   color: white;
 }
-body.dark-mode .market-card-unique{
+
+body.dark-mode .market-card-unique {
   background-color: rgb(42, 36, 36);
   color: var(--text-color-dark);
 }
-body.dark-mode .market-card-unique h3{ 
+
+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{
+}
+
+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);
-} 
-.container{
+}
+
+.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 +140,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,23 +158,22 @@ 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;
+}
+
+.or-sign-in-with::before {
+  left: 12px;
   transform: translateX(-5%);
 }
 
 .or-sign-in-with::after {
-  content: "";
-  position: absolute;
-  top: 50%;
   right: 12px;
-  width: 33%;
-  border-top: 1px solid #ccc;
   transform: translateX(5%);
 }
 
@@ -236,3 +220,82 @@ body.dark-mode .footer-area{
   box-shadow: 0px 4px 15px rgba(187, 15, 15, 0.2);
   border: 2px solid rgb(166, 153, 153);
 }
+
+/* Media Queries for Improved Responsiveness */
+@media (max-width: 1024px) {
+  .navbar-light, .navbar-dark {
+    width: 100%;
+  }
+
+  .social-icons a {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .unique-popup-message {
+    width: 250px;
+  }
+
+  .home-link {
+    padding: 8px;
+  }
+
+  .or-sign-in-with {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .circle-container {
+    display: none;
+  }
+
+  .market-status-heading-unique {
+    font-size: 1.5rem;
+  }
+
+  .market-card-unique {
+    padding: 15px;
+    width: 100%;
+  }
+
+  .social-icons a {
+    width: 1.8rem;
+    height: 1.8rem;
+  }
+
+  .unique-popup-message {
+    width: 220px;
+    font-size: 14px;
+  }
+
+  .home-link {
+    padding: 8px;
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 480px) {
+  .market-status-heading-unique {
+    font-size: 1.2rem;
+  }
+
+  .market-card-unique {
+    padding: 10px;
+    width: 100%;
+  }
+
+  .social-icons a {
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+
+  .home-link {
+    padding: 6px;
+    font-size: 12px;
+  }
+
+  .tradingview-widget-container {
+    border-width: 1px;
+  }
+}