linked on the pop-up to Terms of Service and Privacy Policy now works

PrivacyPolicy/PrivacyPolicy.css

@@ -1,61 +1,137 @@
-/* Background container for the privacy policy page */
 .background-container {
-    min-height: 100vh;
-    background-image: linear-gradient(135deg, #d22d72 10%, #e45d27 100%,#e4c827 30%);
-    background-size: cover;
-    background-position: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
+  min-height: 100vh;
+  background-image: linear-gradient(135deg, #d22d72 10%, #e45d27 100%, #e4c827 30%);
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  box-sizing: border-box;
+}
+
+.policy-container {
+  padding: 40px;
+  max-width: 800px;
+  width: 100%;
+  margin: auto;
+  background-color: rgba(64, 47, 47, 0.85);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  color: white;
+}
+
+.policy-container:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
+}
+
+h1 {
+  font-family: 'Montserrat', Arial, sans-serif;
+  font-size: 2.2rem;
+  color: #ff6f61;
+  text-align: center;
+  margin-bottom: 25px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+h2 {
+  font-family: 'Future2', Arial, sans-serif;
+  font-size: 1.6rem;
+  color: #ff6f61;
+  margin-top: 30px;
+  margin-bottom: 15px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+p {
+  font-family: Arial, sans-serif;
+  font-size: 1.125rem;
+  font-weight: 300;
+  line-height: 1.8;
+  color: #ffffff;
+  margin-bottom: 20px;
+  letter-spacing: 0.5px;
+}
+
+.center-text {
+  text-align: center;
+  font-family: Arial, sans-serif;
+  font-size: 1.125rem;
+  margin: 25px 0;
+  letter-spacing: 0.5px;
+}
+
+.button {
+  display: inline-block;
+  padding: 12px 24px;
+  margin-top: 20px;
+  font-size: 1rem;
+  color: white;
+  background-color: #ff6f61;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.button:hover {
+  background-color: #e45d27;
+  transform: translateY(-3px);
+}
+
+@media (max-width: 768px) {
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.4rem;
   }
-
-  /* Policy container styles */
+
   .policy-container {
-    padding: 32px; /* Equivalent to theme.spacing(4) */
-    max-width: 800px;
-    margin: auto;
-    background-color: rgba(64, 47, 47, 0.8);
-    backdrop-filter: blur(10px);
-    border-radius: 8px; /* Adjust as needed */
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    color: white;
+    padding: 32px;
   }
-
-  .policy-container:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.8rem;
   }
-
-/* Typography */
-h1 {
-    font-family: 'Montserrat', Arial, sans-serif; 
-    font-size: 2.5rem; /* Larger and more prominent heading */
-    color: #ff6f61;
-    text-align: center;
-    margin-bottom: 20px;
-  }
-
+
   h2 {
-    font-family: 'Future2', Arial, sans-serif;
-    font-size: 1.75rem; /* Slightly smaller than h1 */
-    color: #ff6f61;
-    margin-top: 30px;
-    margin-bottom: 10px;
+    font-size: 1.3rem;
+  }
+
+  .policy-container {
+    padding: 25px;
+    border-radius: 12px;
   }
-  
+
   p {
-    font-family: Arial, sans-serif; /* Clean and easy to read */
-    font-size: 1.125rem; /* Slightly larger for readability */
-    font-weight: 300; /* Light font-weight for modern look */
-    line-height: 1.6; /* Increase line spacing for readability */
-    color: #ffffff;
-    margin-bottom: 15px;
+    font-size: 1rem;
+    line-height: 1.7;
   }
-  .center-text {
-    text-align: center;
-    font-family: Arial, sans-serif; /* Optional: Choose your preferred font */
-    font-size: 1.125rem; /* Adjust size if needed */
-    margin: 20px 0; /* Adds space above and below the text */
-  }  
+}
+
+body {
+  scrollbar-width: thin;
+  scrollbar-color: #ff6f61 #2d2d2d;
+}
+
+body::-webkit-scrollbar {
+  width: 10px;
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: #ff6f61;
+  border-radius: 10px;
+}
+
+body::-webkit-scrollbar-track {
+  background: #2d2d2d;
+}

index.html

@@ -123,7 +123,7 @@ <h2 class="h2">Sign up for exclusive offers & updates</h2>
                         <button type="submit" class="signup-btn1">Get 30% Off Now</button>
                     </form>
                     <a href="#" class="no-thanks close1-btn">No thanks</a>
-                    <p class="terms">By signing up, you agree to our <a href="terms.html">Terms of Service</a> and <a
+                    <p class="terms">By signing up, you agree to our <a href="PrivacyPolicy/PrivacyPolicy.html">Terms of Service</a> and <a
                             href="PrivacyPolicy/PrivacyPolicy.html">Privacy Policy</a>.</p>
                 </div>
             </div>