FAQ Section made properly#404fixed

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "liveServer.settings.port": 5501
+  "liveServer.settings.port": 5502
 }

FAQs.css

@@ -1,169 +1,144 @@
-@font-face {
-    font-family: 'WorkSans-Bold';
-    src: url('assets/fonts/static/WorkSans-Bold.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'WorkSans-Regular';
-    src: url('assets/fonts/static/WorkSans-Regular.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'WorkSans-SemiBold';
-    src: url('assets/fonts/static/WorkSans-SemiBold.ttf') format('truetype');
-}
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300&display=swap');
 
 body {
-    background-image: url("assets/images/background-pattern-desktop.svg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-color: rgb(223, 238, 247);
+    font-family: 'Rajdhani', sans-serif;
+    background-color: #0b0e17;
+    color: #e5e5e5;
     margin: 0;
-    font-family: 'WorkSans-Regular';
+    padding: 0;
+    line-height: 1.6;
+    overflow-x: hidden;
 }
 
-/* FAQ Container */
-.faqcontainer {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: white;
-    border-radius: 10px;
-    padding: 20px;
-    max-width: 600px;
-    min-height: 300px;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-    z-index: 1;
+header {
+    background: #0b0e17;
+    color: #0ff0fc;
+    text-align: center;
+    padding: 1px 0;
+    box-shadow: 0 4px 8px rgba(0, 255, 255, 0.1);
+    position: relative;
+    z-index: 10;
+
 }
 
 h1 {
-    font-family: 'WorkSans-Bold';
-    display: flex;
-    align-items: center;
-    font-size: 32px;
-    margin-bottom: 20px;
-}
-
-h1 img {
-    margin-right: 15px;
+    font-family: 'Orbitron', sans-serif;
+    font-size: 1.5em;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    /* margin-bottom: 1px; */
+
 }
 
-.question {
-    font-family: 'WorkSans-SemiBold';
-    padding: 10px 0;
-    border-bottom: 1px solid rgb(243, 218, 171);
-    transition: background-color 0.3s, transform 1s;
+main {
+    padding: 40px;
+    max-width: 900px;
+    margin: auto;
+    position: relative;
+    background: #0e1126;
+    border-radius: 10px;
+    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.1);
 }
 
-.question details summary {
-    list-style: none;
+h2 {
+    color: #0ff0fc;
+    font-family: 'Orbitron', sans-serif;
+    font-size: 1.8em;
+    margin-bottom: 10px;
+    padding-bottom: 5px;
+    border-bottom: 2px solid #0ff0fc;
+    position: relative;
     cursor: pointer;
-    padding: 7px;
-    transition: color 0.3s;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.question summary:hover {
-    color: #555353;
+h2::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -2px;
+    height: 3px;
+    width: 30px;
+    background: #f72585;
 }
 
 .arrow {
-    transition: transform 0.3s;
+    font-size: 1.5em;
+    transition: transform 0.3s ease;
 }
 
-details[open] summary .arrow {
+.rotate {
     transform: rotate(180deg);
 }
 
-.question p {
-    font-family: 'WorkSans-Regular';
-    font-size: 17px;
-    color: #767676;
-    margin-left: 20px;
+.faq-section {
+    margin: 30px 0;
 }
 
-.bottom-background {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-}
-.faq-btn {
-    /* height: 20px;
-    width: 40px;
-    font-family: 'WorkSans-Bold';
-    font-size: 18px;
-    padding: 10px 20px;
-    background-color: #ff9900;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s, transform 0.3s;
-    text-transform: uppercase;
-    opacity: 3; */
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background-color: transparent;
-    border: none;
-    font-size: 24px;
-    color: white;
-    cursor: pointer;
-    outline: none;
-    margin-top: 200%;
+.faq-section p {
+    font-size: 1.2em;
+    color: #d3d3d3;
+    display: none; /* Hidden initially */
 }
 
-.faq-btn:hover {
-    background-color: #e68a00;
-    transform: scale(1.05);
+ul {
+    padding-left: 20px;
+    display: none; /* Hidden initially */
 }
 
-.faq-btn:active {
-    background-color: #cc7a00;
-    transform: scale(1);
+ul li {
+    margin: 10px 0;
 }
 
-a {
-    text-decoration: none; 
-}
-.FAQs {
-    position: absolute; /* or fixed if you want it to stay on screen while scrolling */
-    top: 20px; /* Adjust as needed */
-    left: 20px; /* Adjust as needed */
-    z-index: 1000; /* Ensure it's on top of other content */
+ul li::before {
+    content: "»";
+    color: #0ff0fc;
+    margin-right: 10px;
 }
 
-.faq-btn {
-    font-family: 'WorkSans-Bold';
-    font-size: 18px;
-    padding: 10px 20px;
-    background-color: #ff9900;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s, transform 0.3s;
-    text-transform: uppercase;
+footer {
+    background: #0b0e17;
+    color: #999;
+    text-align: center;
+    padding: 15px 0;
+    position: relative;
+    bottom: 0;
+    width: 100%;
+    margin-top: 50px;
 }
 
-.faq-btn:hover {
-    background-color: #e68a00;
-    transform: scale(1.05);
+footer p {
+    margin: 0;
 }
 
-.faq-btn:active {
-    background-color: #cc7a00;
-    transform: scale(1);
+/* Futuristic Hover Effects */
+h2:hover {
+    color: #f72585;
+    transition: color 0.3s ease;
 }
 
-a {
-    text-decoration: none; /* Remove underline from link */
+h2:hover::before {
+    background: #0ff0fc;
+    width: 50px;
+    transition: all 0.3s ease;
 }
 
+main::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    background: linear-gradient(45deg, #0ff0fc, #f72585, #7209b7);
+    filter: blur(20px);
+    z-index: -1;
+}
 
+/* Interactive elements */
+.faq-section p:hover, ul li:hover {
+    color: #f72585;
+    transition: color 0.3s ease;
+}