fix(policy): Prevent overlay from blocking content on small screens

Signed-off-by: Shivam Kumar <sk744826744@gmail.com>

Author: GitWizzz

src/components/legal-navigation/toc.style.js

@@ -105,7 +105,7 @@ const TOCWrapper = styled.div`
     color: ${(props) => props.theme.secondaryColor};
   }
 
-  @media only screen and (max-width: 750px){
+  @media only screen and (max-width: 1300px){
    position: initial;
    margin-right: 3rem;
    width: auto;

src/sections/Company/Legal/terms.style.js

@@ -9,26 +9,29 @@ const TermsWrapper = styled.section`
     max-width: 900px;
     margin: 0 auto;
     padding-left: 2px;
-    margin-top: -20rem; 
+    margin-top: -20rem;
+    @media (max-width: 1300px) {
+      margin-top: 0;
+    }
   }
   .page-header-section {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      background: rgb(71,126,150);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background: rgb(71,126,150);
       background: linear-gradient(250deg, rgba(71,126,150,1) 0%, rgba(0,179,159,1) 35%, rgba(60,73,79,1) 100%);
-      padding: 3rem 0;
+    padding: 3rem 0;
+    h1 {
+      color: white;
+    }
+    @media (max-width: 680px) {
+      padding: 2rem 0;
       h1 {
-          color: white;
-      }
-      @media (max-width: 680px) {
-       padding: 2rem 0;
-          h1 {
-              font-size: 1.75rem;
-          }
+        font-size: 1.75rem;
       }
     }
+  }
 
   .conduct_heading {
     text-align: left;