diff --git a/assets/css/style.css b/assets/css/style.css
index 2ffd7581..4b7487d7 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,12 +1,11 @@
 body {
   user-select: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
- background-attachment: fixed;
- background-size: cover;
-   color: var(--sonic-silver);
-   user-select: none;
-  }
-
+  background-attachment: fixed;
+  background-size: cover;
+  color: var(--sonic-silver);
+  user-select: none;
+}
 
 .container {
   padding: 0px;
@@ -52,7 +51,7 @@ body {
   height: 750px;
   gap: 2rem;
 }
-.dark-mode .container1{
+.dark-mode .container1 {
   background-color: #151111;
 }
 
@@ -504,12 +503,12 @@ body {
   background-color: var(--old-rose_30);
   box-shadow: 7px -7px var(--old-rose_30);
 }
-.dark-mode .has-underline .has-before::before{
-  background-color: #FAADA1;
-  box-shadow: 7px -7px #c8897fce;
+.dark-mode .has-underline .has-before::before {
+  background-color: hsl(358, 30%, 35%);
+  box-shadow: 7px -7px hsla(358, 30%, 35%, 0.511);
 }
-.dark-mode .has-underline .span{
-  background-color: #FAADA1;
+.dark-mode .has-underline .span {
+  background-color: hsl(358, 30%, 35%);
 }
 .btn {
   padding: 12px 30px;
@@ -571,7 +570,7 @@ body {
   z-index: 4;
   transition: var(--transition-2);
 }
-.dark-mode .header{
+.dark-mode .header {
   background-color: #151111;
 }
 .header.active {
@@ -951,8 +950,8 @@ body {
   border-radius: var(--radius-10);
   z-index: -1;
 }
-.dark-mode .hero-banner::before{
-  background-color: #FAADA1;
+.dark-mode .hero-banner::before {
+  background-color: #faada1;
 }
 .play-btn {
   display: flex;
@@ -1041,21 +1040,21 @@ body {
   text-align: center;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
 }
-.dark-mode .benefits-card span{
+.dark-mode .benefits-card span {
   color: hsl(0, 0%, 100%);
 }
-.dark-mode .benefits-card{
+.dark-mode .benefits-card {
   background-color: #ffb6b911;
   color: white;
 }
-.dark-mode .benefits-card:is(:hover, :focus-within){
-  background-color:#ffb6b948;
+.dark-mode .benefits-card:is(:hover, :focus-within) {
+  background-color: #ffb6b948;
 }
-.dark-mode .benefits-card::after{
-  background-color: #B17678;
+.dark-mode .benefits-card::after {
+  background-color: #b17678;
 }
-.dark-mode .benefits-card::before{
-  background-color: #aF7171;
+.dark-mode .benefits-card::before {
+  background-color: #af7171;
 }
 
 .benefits-card .card-text {
@@ -1104,13 +1103,12 @@ body {
   transform: translateY(-10px);
   background-color: #ffb6b9; /* Change to desired hover color */
 }
-.dark-mode.benefits-card:hover{
+.dark-mode.benefits-card:hover {
   background-color: #da8f92af;
   color: white;
 }
-.dark-mode.benefits-card .card-title{
-  margin-block:20px 15px;
-
+.dark-mode.benefits-card .card-title {
+  margin-block: 20px 15px;
 }
 
 .benefits-card:hover,
@@ -1158,10 +1156,10 @@ body {
 .dark-mode .benefits-card .card-icon {
   background-color: #2a1f1f;
 }
-.dark-mode .benefits-card .card-text{
+.dark-mode .benefits-card .card-text {
   color: white;
 }
-.dark-mode .benefits-card .card-title{
+.dark-mode .benefits-card .card-title {
   color: white;
 }
 .benefits-card .btn-link {
@@ -1221,7 +1219,7 @@ body.dark-mode .chapter-card::before {
 body.dark-mode .chapter-card:hover {
   box-shadow: 3px 3px #e36e5c;
 }
-.dark-mode .chapter-card .card-title{
+.dark-mode .chapter-card .card-title {
   color: #8e4949 !important;
 }
 
@@ -1325,8 +1323,7 @@ body.dark-mode .chapter-card:hover {
   #PRICING
 \*-----------------------------------*/
 
-
-#pricing .container{
+#pricing .container {
   margin-top: 20px;
   margin-bottom: 20px;
   width: 97%;
@@ -1345,25 +1342,24 @@ body.dark-mode .chapter-card:hover {
   height: 100%;
   margin-top: 100px;
 }
-.dark-mode .pricing-card{
+.dark-mode .pricing-card {
   background-color: #151111;
 }
-.dark-mode .pricing-card .card-title{
+.dark-mode .pricing-card .card-title {
   color: white;
 }
-.dark-mode .pricing-card .price{
+.dark-mode .pricing-card .price {
   color: #ba6161;
 }
 .pricing-card:is(:hover, :focus-within),
 .pricing-card.bundle {
-  box-shadow:  5px 5px var(--chinese-violet);
+  box-shadow: 5px 5px var(--chinese-violet);
 }
 .dark-mode .pricing-card:is(:hover, :focus-within),
 .dark-mode .pricing-card.bundle {
-  box-shadow:5px 5px #8e4949 ;
+  box-shadow: 5px 5px #8e4949;
 }
 
-
 .pricing-card:is(:hover, :focus-within) {
   transform: translateY(-10px);
 }
@@ -1394,11 +1390,11 @@ body.dark-mode .chapter-card:hover {
   align-self: center;
   margin-top: auto;
 }
-.dark-mode .pricing-card .btn{
+.dark-mode .pricing-card .btn {
   background-color: #8e4949 !important;
   border: none !important;
 }
-.dark-mode .pricing-card .btn:hover{
+.dark-mode .pricing-card .btn:hover {
   color: white;
   transform: scale(1.1);
 }
@@ -1458,7 +1454,6 @@ body.dark-mode .chapter-card:hover {
   padding: 15px;
 }
 
-
 .achievement-card .abs-img {
   position: absolute;
   top: 0;
@@ -1625,7 +1620,7 @@ body.dark-mode .chapter-card:hover {
   align-items: center;
   z-index: 101;
 }
-.dark-mode #rate-us.wrapper{
+.dark-mode #rate-us.wrapper {
   background-color: #151111;
 }
 .rate-us-modal-open {
@@ -1978,7 +1973,7 @@ footer {
 }
 
 .foot-quick a::after {
-  content: '';
+  content: "";
   position: absolute;
   width: 0;
   height: 2px;
@@ -2537,7 +2532,6 @@ footer {
   }
 }
 
-
 @media (max-width: 990px) {
   .switch-container {
     /* right: -20px; */
@@ -2885,10 +2879,11 @@ footer {
 /* Faq Section */
 .faq-section {
   padding: 20px;
-
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
+  margin: auto;
 }
 
 .faq {
@@ -2898,9 +2893,22 @@ footer {
   font-family: var(--ff-philosopher);
 }
 
+.faq-container {
+  background-color: hsl(0deg 100% 80.49%);
+  margin-bottom: 2rem;
+  border-radius: 4px;
+  box-shadow: 1px 1px 5px #efecea;
+  padding: 4px 16px;
+  line-height: 4rem;
+  cursor: pointer;
+  width: 60%;
+  overflow: hidden;
+  opacity: 0;
+}
+
 .icon {
   margin-right: 16px;
-  transition: transform 0.15s ease-in-out;
+  transition: transform 0.3s ease-in-out; /* Slower transition for icon rotation */
 }
 
 .icon.active {
@@ -2912,12 +2920,56 @@ footer {
   line-height: 28px;
   max-height: 0;
   overflow: hidden;
-  transition: max-height 0.5s ease-in-out;
+  border-radius: 5px;
+  transition: max-height 0.5s ease-in-out; /* Slower transition for answers */
+}
+
+.question {
+  color: var(--sonic-silver);
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  justify-content: space-between;
+}
+
+.faq-container:hover {
+  background-color: var(--old-rose_30);
+}
+
+.faq-container.visible {
+  opacity: 1;
+  transition: opacity 1s ease-in-out; /* Slower transition for opacity */
+}
+
+@keyframes slideIn {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.faq-container:nth-child(even) .question {
+  animation: slideInFromRight 1s ease-in-out; /* Slower slide-in animation */
+}
+
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
 body.dark-mode {
   /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg%3E%3Cpath fill='%232f2f2f' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%233a3a3a' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23454545' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23505050' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%235b5b5b' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23666666' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23707070' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%237b7b7b' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23858585' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23909090' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); */
-  background-image: url('/assets/images/darkmode_bg.png');
+  background-image: url("/assets/images/darkmode_bg.png");
 }
 
 .dark-mode {
@@ -2966,29 +3018,6 @@ body.dark-mode {
   max-height: fit-content;
 } */
 
-.question {
-  color: var(--sonic-silver);
-  display: flex;
-  align-items: center;
-  font-weight: bold;
-  justify-content: space-between;
-}
-
-.faq-container {
-  background-color: hsl(0deg 100% 80.49%);
-  margin-bottom: 2rem;
-  border-radius: 4px;
-  box-shadow: 1px 1px 5px #efecea;
-  padding: 4px 16px;
-  line-height: 4rem;
-  cursor: pointer;
-  width: 60%;
-}
-
-.faq-container:hover {
-  background-color: var(--old-rose_30);
-}
-
 /* Dark Mode Switch */
 .dark-mode .switch-container {
   right: 14px;
@@ -3038,7 +3067,7 @@ body.dark-mode .navbar-link.active {
 
 body.dark-mode .navbar-link::after {
   content: "";
-  background:#ca7373;
+  background: #ca7373;
   box-shadow: 0 0 10px #fcb0b480;
 }
 
@@ -3139,7 +3168,6 @@ footer {
 .circle1:hover {
   /* background-color: white; */
   fill: #1e1c1c;
-  
 }
 
 #back-to-top:hover {
@@ -3319,8 +3347,8 @@ footer {
 #genre .chapter-card {
   background-color: var(--seashell);
 }
-.dark-mode #genre .chapter-card{
-  background-color:#151111;
+.dark-mode #genre .chapter-card {
+  background-color: #151111;
 }
 #genre .chapter-card p {
   color: black;
@@ -3623,8 +3651,8 @@ body.dark-mode .h1,
 body.dark-mode .h2,
 body.dark-mode .h3 {
   color: #ffffff;
-  /* margin: 0 10px; */
- /* margin-top: 100px;*/
+  margin: 0 10px;
+  /* margin-top: 100px;*/
 }
 
 .container00.dark-mode,
@@ -3676,18 +3704,17 @@ body.dark-mode .h3 {
 }
 
 .card-title::after {
-  content: '';
+  content: "";
   position: absolute;
   width: 0;
   height: 2px;
   bottom: -3px; /* Position the underline just below the text */
   left: 0;
-  background: #FF9B9B;
+  background: #ff9b9b;
   transition: width 0.4s ease;
-
 }
-.dark-mode .card-title::after{
-  background-color: white ;
+.dark-mode .card-title::after {
+  background-color: white;
 }
 
 .card-title:hover::after {
@@ -3695,7 +3722,6 @@ body.dark-mode .h3 {
   left: 0;
 }
 
-
 /* Media Queries for Recommended Books section */
 
 @media only screen and (max-width: 574px) {
@@ -3899,7 +3925,7 @@ body.dark-mode .h3 {
   margin-top: 2.5rem;
 }
 
-#sendMessageBtn:hover{
+#sendMessageBtn:hover {
   border-radius: 50%;
 }
 
@@ -3915,25 +3941,25 @@ body.dark-mode .h3 {
 .contact_head {
   text-align: center;
   font-size: 3vh;
-  color: #2E4756;
+  color: #2e4756;
   position: relative;
   display: inline-block;
   cursor: pointer;
 }
 
 .contact_head::after {
-  content: '';
+  content: "";
   position: absolute;
   width: 0;
   height: 2px;
   display: block;
   margin-top: 5px;
   right: 0;
-  background: #FF9B9B;
+  background: #ff9b9b;
   transition: width 0.4s ease, right 0.4s ease;
 }
 
-.dark-mode .contact-card{
+.dark-mode .contact-card {
   background-color: #151111 !important;
 }
 .contact_head:hover::after {
@@ -3941,7 +3967,6 @@ body.dark-mode .h3 {
   right: 0;
 }
 
-
 /* Adding media queries for benifits */
 
 /* @media screen and(min-width: ) {
@@ -4019,7 +4044,7 @@ body.dark-mode .h3 {
   gap: 15px; /* Increase gap between elements */
   padding: 20px;
   border-radius: 8px;
- /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Example box shadow */
+  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Example box shadow */
 }
 
 .form-fields {
@@ -4168,6 +4193,7 @@ body.dark-mode .h3 {
 .icons .icon:hover .fab.fa-linkedin {
   color: #0077b5;
 }
-.form-label:hover,.currency-label:hover{
+.form-label:hover,
+.currency-label:hover {
   color: #fd4;
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index f90c2e3b..1a4789aa 100644
--- a/index.html
+++ b/index.html
@@ -2347,6 +2347,36 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
       </div>
     </div>
   </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+  const faqContainers = document.querySelectorAll('.faq-container');
+
+  const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1
+  };
+
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach((entry, index) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('visible');
+        entry.target.style.animation = `slideIn 1s ease-in-out ${index * 0.3}s forwards`; // Adjusted for slower animation
+        if (index % 2 === 1) {
+          entry.target.querySelector('.question').style.animation = `slideInFromRight 1s ease-in-out ${index * 0.3}s forwards`; // Adjusted for slower animation
+        }
+        observer.unobserve(entry.target);
+      }
+    });
+  }, observerOptions);
+
+  faqContainers.forEach(faq => {
+    observer.observe(faq);
+  });
+});
+
+  </script>
   <br /><br />
   <div style="
     background-color: #ffb2a8 ;