diff --git a/index.html b/index.html
index 1cc48f8c..2b5f1cc2 100644
--- a/index.html
+++ b/index.html
@@ -88,7 +88,7 @@
   position: sticky !important;
   align-items: center;
   justify-content: space-between;
-  margin-left: -47px; /* Increased negative margin to move content more to the left */
+  margin-left: -4.7rem; /* Increased negative margin to move content more to the left */
 }
 
 
@@ -97,20 +97,20 @@
     /* Position the toggle button to the right */
     .switch-container {
       position: absolute;
-      right: 100px; /* Adjust this value to move the button more to the right */
-      top: 15px; /* Adjust this value to move the button vertically */
+      right: 10rem; /* Adjust this value to move the button more to the right */
+      top: 1.5rem; /* Adjust this value to move the button vertically */
     }
 
     /* For responsiveness */
-    @media (max-width: 990px) {
+    @media (max-width: 99rem) {
       .switch-container {
-        right: 90px; /* Adjust this value for smaller screens */
+        right: 9rem; /* Adjust this value for smaller screens */
       }
     }
 
-    @media (max-width: 575px) {
+    @media (max-width: 57.5rem) {
       .switch-container {
-        right: 20px; /* Adjust this value for smaller screens */
+        right: 2rem; /* Adjust this value for smaller screens */
       }
     }
 
@@ -121,9 +121,9 @@
     justify-content: center;
     align-items: center;
     position: fixed;
-    margin-top: 120px;;
-    width: 40px;
-    height: 150px;
+    margin-top: 12rem;;
+    width: 4rem;
+    height: 15rem;
   
 }#quicklinks {
   display: flex;
@@ -138,7 +138,7 @@
 #quicklinks .foot-quick {
   display: flex;
   align-items: center;
-  margin-bottom: 10px; /* Adjust spacing between list items */
+  margin-bottom: 1rem; /* Adjust spacing between list items */
 }
 
 #quicklinks .foot-quick a {
@@ -149,7 +149,7 @@
 }
 
 #quicklinks .foot-quick a i {
-  margin-right: 5px; /* Adjust spacing between icon and text */
+  margin-right: 0.5rem; /* Adjust spacing between icon and text */
 }
 .dark-mode .fas{
   color:white;
@@ -159,9 +159,9 @@
 }
 .dark-mode .finput{
       color: white;
-      background-color: transparent; 
-      padding: 10px; 
-      border: 1px solid white;
+      background-color: transparent;
+      padding: 1rem;
+      border: 0.1rem solid white;
       
 }
 .dark-mode .finput::placeholder {
@@ -170,19 +170,19 @@
 .socialmediaicons a {
     display: inline;
     text-align: center;
-    padding: 5px;
+    padding: 0.5rem;
     transition: all 0.3s ease;
     color: rgb(0, 0, 0);
-    font-size: 20px;
+    font-size: 2rem;
   }
 
   .socialmediaicons .fa-instagram {
   display: inline-block;
-  width: 30px; 
-  height: 30px; 
+  width: 3rem; 
+  height: 3rem; 
   text-align: center;
-  line-height: 30px; 
-  border-radius: 10px;
+  line-height: 3rem; 
+  border-radius: 1rem;
   background: transparent;
   color: #000000;
   transition: background 0.3s, transform 0.3s; 
@@ -196,7 +196,7 @@
                                #a237b6 75%, 
                                #3e57bc 100%);
   background-clip: padding-box;
-  border-radius: 10px; 
+  border-radius: 1rem; 
   color: white; 
   transform: scale(1.1); 
   
@@ -223,19 +223,19 @@
 
   .instagram {
     
-    margin: 5px;
+    margin: 0.5rem;
     
   }
 
 
   .facebook {
     
-    margin: 5px;
+    margin: 0.5rem;
   }
   
   .youtube {
    
-    margin: 5px;
+    margin: 0.5rem;
   }
 
 
@@ -249,7 +249,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      margin-bottom: 50px;
+      margin-bottom: 5rem;
     }
     /* ########### */
 
@@ -269,11 +269,11 @@
 
     .flip-card {
       background-color: transparent;
-      width: 400px;
-      height: 370px;
-      /* margin: 2px; */
-      /* border: 1px solid #f1f1f1; */
-      perspective: 1000px;
+      width: 40rem;
+      height: 37rem;
+      /* margin: 0.2rem; */
+      /* border: 0.1rem solid #f1f1f1; */
+      perspective: 100rem;
       /* Remove this if you don't want the 3D effect */
     }
 
@@ -285,7 +285,7 @@
       text-align: center;
       transition: transform 0.7s;
       transform-style: preserve-3d;
-      padding: 10px;
+      padding: 1rem;
     }
 
     /* Do an horizontal flip when you move the mouse over the flip box container */
@@ -323,14 +323,14 @@
 
     /* Light mode styles */
     .light-mode .readmore-anim {
-      font-size: 18px;
+      font-size: 1.8rem;
       letter-spacing: 0;
       color: hsl(357, 37%, 62%);
     }
 
     .light-mode .readmore-anim:hover {
       color: red;
-      letter-spacing: 1px;
+      letter-spacing: 0.1em;
       transition: ease-in-out;
     }
     .cta1{
@@ -339,7 +339,7 @@
   align-items: center;
   justify-content: flex-start;
   margin: auto;
-  padding: 20px 24px;
+  padding: 2rem 2.4rem;
   color:  hsl(357, 37%, 62%);
   font-family: Avenir, sans-serif;
   text-decoration: none;
@@ -347,19 +347,19 @@
   &:before {
     content: "";
     position: absolute;
-    top: 27px;
+    top: 2.7rem;
     left: 0;
     display: block;
-    border-radius: 28px;
+    border-radius: 2.8rem;
     background: rgba(255, 171, 157, 0.5);
-    width: 56px;
-    height: 56px;
+    width: 5.6rem;
+    height: 5.6rem;
     transition: all 0.3s ease;
   }
   span {
     position: relative;
-    font-size: 8px;
-    line-height: 18px;
+    font-size: 0.8rem;
+    line-height: 1.8rem;
     font-weight: 900;
     letter-spacing: 0.25em;
     text-transform: uppercase;
@@ -368,14 +368,14 @@
   }
   svg {
     position: relative;
-    top: 27px;
-    margin-left: 5px;
+    top: 2.7rem;
+    margin-left: 0.5rem;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke: hsl(357, 37%, 62%);
     stroke-width: 2;
-    transform: translateX(-5px);
+    transform: translateX(-0.5rem);
     transition: all 0.3s ease;
   }
   &:hover {
@@ -398,7 +398,7 @@
   align-items: center;
   justify-content: flex-start;
   margin: auto;
-  padding: 20px 24px;
+  padding: 2rem 2.4rem;
   color:  hsl(357, 37%, 62%);
   font-family: Avenir, sans-serif;
   text-decoration: none;
@@ -409,16 +409,16 @@
     top: 0;
     left: 0;
     display: block;
-    border-radius: 28px;
+    border-radius: 2.8rem;
     background: rgba(255, 171, 157, 0.5);
-    width: 56px;
-    height: 56px;
+    width: 5.6rem;
+    height: 5.6rem;
     transition: all 0.3s ease;
   }
   span {
     position: relative;
-    font-size: 8px;
-    line-height: 18px;
+    font-size: 0.8rem;
+    line-height: 1.8rem;
     font-weight: 900;
     letter-spacing: 0.25em;
     text-transform: uppercase;
@@ -428,13 +428,13 @@
   svg {
     position: relative;
     top: 0;
-    margin-left: 5px;
+    margin-left: 0.5rem;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke: hsl(357, 37%, 62%);
     stroke-width: 2;
-    transform: translateX(-5px);
+    transform: translateX(-0.5rem);
     transition: all 0.3s ease;
   }
   &:hover {
@@ -456,7 +456,7 @@
 
     /* Dark Mode Styles */
     .dark-mode .readmore-anim {
-      font-size: 18px;
+      font-size: 1.8rem;
       letter-spacing: 0;
       color: hsl(357, 37%, 62%);
     }
@@ -467,18 +467,18 @@
 
     .dark-mode .readmore-anim:hover {
       color: red;
-      letter-spacing: 1px;
+      letter-spacing: 0.1rem;
       transition: ease-in-out;
     }
 
     .dark-mode .header.scrolled {
       background-color: #232222; /* Change to a darker color when scrolled */
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
+      box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
     }
 
     .dark-mode #dropdown-menu {
       background-color: #151111;;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
       color: white;
     }
     .dark-mode .dropdown-menu-item a{
@@ -487,22 +487,22 @@
 
     #cookie-consent {
   position: fixed;
-  bottom: 10px;
-  left: 10px;
+  bottom: 1rem;
+  left: 1rem;
   background-color: #f1f1f1;
-  padding: 20px;
+  padding: 2rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  width: 300px;
+  width: 30rem;
   height: fit-content;
   z-index: 10000;
-  border-radius: 10px;
-  margin-bottom: 5px;
-  margin: 20px;
-  border-right: 4px solid transparent;
-  border-bottom: 4px solid transparent;
+  border-radius: 1rem;
+  margin-bottom: 5rem;
+  margin: 2rem;
+  border-right: 0.4rem solid transparent;
+  border-bottom: 0.4rem solid transparent;
   transition: border-color 0.3s;
 }
 
@@ -518,12 +518,12 @@
 
 .accept-cookies,
 .reject-cookies {
-  width: 260px;  /* Decrease the button width */
-  height: 35px;  /* Decrease the button height */
+  width: 26rem;  /* Decrease the button width */
+  height: 3.5rem;  /* Decrease the button height */
   color: white;
   background-color: #A30F17;
   border: none;
-  border-radius: 5px;  /* Add rounded corners */
+  border-radius: 0.5rem;  /* Add rounded corners */
   cursor: pointer;
   transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s;  /* Smooth transition for effects */
 }
@@ -538,13 +538,13 @@
 }
 
 .reject-cookies {
-  margin-top: 10px;
+  margin-top: 1rem;
 }
 
 .accept-cookies:hover,
 .reject-cookies:hover {
   transform: scale(0.95);
-  box-shadow: 0 0 15px rgb(249, 212, 212);  /* Reduce the shadow size */
+  box-shadow: 0 0 1.5rem rgb(249, 212, 212);  /* Reduce the shadow size */
 }
 
 .accept-cookies:hover {
@@ -559,10 +559,10 @@
 
 #learn-more-link,
 #show-less-link {
-  color: #A30F17;  
+  color: #A30F17; 
   text-decoration: none;
   cursor: pointer;
-  font-size: 20px;
+  font-size: 2rem;
 }
 
 #learn-more-link:hover,
@@ -572,7 +572,7 @@
 
 #cookie-content {
   display: none;
-  margin-top: 10px;
+  margin-top: 1rem;
 }
 
 
@@ -586,10 +586,10 @@
     .header {
   position: fixed;
   width: 100%;
-  top: 10px; /* Assuming you meant 10px for the top */
+  top: 1rem; /* Assuming you meant 1rem for the top */
   z-index: 1000;
   transition: top 0.3s, transform 0.3s ease;
-  margin-left: 10px; /* Add a negative margin to shift left */
+  margin-left: 1rem; /* Add a negative margin to shift left */
 }
 
 .navbar-link{
@@ -602,14 +602,14 @@
 
 /* Hide the navbar */
 .header.hidden {
-  top: -93px; /* Adjust according to your header height */
+  top: -9.3rem; /* Adjust according to your header height */
 }
 
 /* Navbar styling when scrolled */
 .header.scrolled {
   position: sticky !important;
   background-color: #efefef; /* Change to a darker color when scrolled */
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
+  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
 }
 * {
   margin: 0;
@@ -618,7 +618,7 @@
 }
 
 
-@media only screen and (max-width:1063px){
+@media only screen and (max-width:106.3rem){
     .nav{
         flex-direction: row;
     }
@@ -626,7 +626,7 @@
         flex-direction: column;
         height: 53.8rem;
         transition: 0.2s all ease-out;
-        padding-top: 5px;
+        padding-top: 0.5rem;
     }
     .navbar-item{
         margin : 0
@@ -636,14 +636,14 @@
         display: block;
     }
     .nav-h{
-        height: 78px;
+        height: 7.8rem;
         width: 100vw;
     }
     .vis-h{
         opacity: 0;
     }
     .switch-container {
-      right: 70px !important;
+      right: 7rem !important;
     }
 }
 @media only screen and (max-width:990px){
@@ -654,12 +654,12 @@
     top: 0;
   }
   .logo img{
-    top: -9px;
-    left: 50px;
+    top: -0.9rem;
+    left: 5rem;
   }
 }
 .navbar-item {
-  margin-top: 10px; /* Increase the top margin of each item */
+  margin-top: 1rem; /* Increase the top margin of each item */
   
 }
 .card-sty {
@@ -671,13 +671,13 @@
 
 .donate-button {
     display: inline-block;
-    padding: 9px 18px;
-    font-size: 16px;
+    padding: 0.9rem 1.8rem;
+    font-size: 1.6rem;
     color: #fff;
     background-color: #b00404; /* Red color */
     text-decoration: none;
-    border-radius: 5px;
-    border: 2px solid #a60606; /* Same red color for border */
+    border-radius: 0.5rem;
+    border: 0.2rem solid #a60606; /* Same red color for border */
 }
 
 .donate-button:hover {
@@ -688,26 +688,26 @@
     text-align: center;
 }
 .donate-books-section p{
-  padding: 10px;
+  padding: 1rem;
   text-align: justify;
 }
 .donate-books-section img {
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
+    border-top-left-radius: 2.5rem;
+    border-top-right-radius: 2.5rem;
 }
 
 .container {
     display: flex;
     justify-content: center;
-    gap: 20px; /* Adjust the gap between cards as needed */
+    gap: 2rem; /* Adjust the gap between cards as needed */
     flex-wrap: wrap; /* Allows cards to wrap onto the next line if the screen is too narrow */
-    padding: 0 15px; /* Optional padding for responsiveness */
+    padding: 0 1.5rem; /* Optional padding for responsiveness */
 }
 
 .card {
-    flex: 1 1 200px; /* Allows cards to grow and shrink, with a minimum width of 200px */
-    max-width: 300px; /* Optional max width for cards */
-    margin: 10px; /* Optional margin around each card */
+    flex: 1 1 20rem; /* Allows cards to grow and shrink, with a minimum width of 200px */
+    max-width: 30rem; /* Optional max width for cards */
+    margin: 1rem; /* Optional margin around each card */
 }
 
 .card img {
@@ -717,35 +717,35 @@
 
 
 .chapter-card {
-  height: 450px; /* Adjust margin as needed */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for depth effect */
+  height: 45rem; /* Adjust margin as needed */
+  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.1); /* Add shadow for depth effect */
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .chapter-card:hover {
   transform: scale(1.02px);
-  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.4) ;/* Scale up slightly on hover */
+  box-shadow: 0.4rem 0.4rem 0.3rem rgba(0, 0, 0, 0.4) ;/* Scale up slightly on hover */
 }
 
 #connectReaderBtn{
-  border-radius: 10px;
+  border-radius: 1rem;
 }
 
 .footer-icons{
-  margin-top: 20px;
+  margin-top: 2rem;
   display: flex;
-  font-size: 24px;
+  font-size: 2rem;
 }
 
 
 .footer-icons .icon i {
-  font-size: 24px;
+  font-size: 2rem;
   /* Set the default font size for icons */
   transition: all 0.15s ease;
   /* Add transition for smooth animation */
 }
 
-
+{
 .footer-icons .icon:hover {
   transform: scale(1.5);
   /* Scale the icon on hover */
@@ -802,13 +802,13 @@
 
 .icons {
   display: flex;
-  gap: 10px; 
+  gap: 1rem;
   align-items: center;
   justify-content: center; 
 }
 
 .icon i {
-  font-size: 24px; 
+  font-size: 2.4rem; 
     color: #000; 
 
   cursor: pointer;
@@ -822,10 +822,10 @@
 /* Styling for the email input */
 .finput {
     width: 100%;
-    padding: 10px;
+    padding: 1rem;
     font-size: 1rem;
-    border: 2px solid #ccc; 
-    border-radius: 5px; 
+    border: 0.2rem solid #ccc; 
+    border-radius: 0.5rem; 
     outline: none; 
     transition: border-color 0.3s ease; 
 }
@@ -842,11 +842,11 @@
 
 
 .subscribe {
-    padding: 10px 20px;
+    padding: 1rem 2rem;
     background-color: #3498db;
     color: white;
     border: none;
-    border-radius: 5px;
+    border-radius: 0.5rem;
     font-size: 1rem;
     cursor: pointer;
     transition: background-color 0.3s ease;
@@ -859,10 +859,10 @@
 /* Styling for the email input */
 .finput {
   width: 100%;
-  padding: 10px;
+  padding: 1rem;
   font-size: 1rem;
-  border: 2px solid #000000;
-  border-radius: 5px; 
+  border: 2rem solid #000000;
+  border-radius: 0.5rem; 
   outline: none; 
   transition: border-color 0.3s ease; 
 }
@@ -879,11 +879,11 @@
 
 /* Styling the subscribe button */
 .subscribe {
-  padding: 10px 20px;
+  padding: 1rem 2rem;
   background-color: #3498db;
   color: white;
   border: none;
-  border-radius: 5px;
+  border-radius: 5rem;
   font-size: 1rem;
   cursor: pointer;
   transition: background-color 0.3s ease;
@@ -896,7 +896,7 @@
 
 
   </style>
- <script type="text/javascript">
+<script type="text/javascript">
   emailjs.init("Your_User_ID"); // Replace with your actual EmailJS User ID
 
   // Function to validate email address
@@ -959,23 +959,23 @@
     }
 #translateButton {
     position: fixed;
-    top: -150px;
-    right: 44px;
+    top: -15rem;
+    right: 4.4rem;
     z-index: 1000;
-    width: 53px;  
-    height: 53px;
+    width: 5.3rem;  
+    height: 5.3rem;
     border-radius: 50%; 
     border: none; 
     background:linear-gradient(hwb(357 6% 36%),#d26d6d); 
     color: white; 
     text-align: center; 
     display: inline-block; 
-    font-size: 16px; 
+    font-size: 1.6rem; 
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 9px;
+    font-size: 0.9rem;
     line-height: 1;
     text-align: center;
     white-space: nowrap;
@@ -1004,11 +1004,11 @@
 /* Popup content */
 .popup-content {
   background:linear-gradient(hwb(357 6% 36%),#d26d6d);
-    margin-top: 600px;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 300px;
-    border-radius: 10px;
+    margin-top: 60rem;
+    padding: 2rem;
+    border: 1rem solid #888;
+    width: 30rem;
+    border-radius: 10rem;
     position: relative;
     margin-left: 75vw;
     /* margin-right: 0px; */
@@ -1018,7 +1018,7 @@
 .close {
     color: #073725;
     float: right;
-    font-size: 28px;
+    font-size: 2.8rem;
     font-weight: bold;
     cursor: pointer;
 }
@@ -1036,7 +1036,7 @@
 
 
 body {
-    top: 0px !important;
+    top: 0rem !important;
 }
 
 /* Hide the "Powered by Google" branding */
@@ -1045,7 +1045,7 @@
 }
 
 .goog-te-gadget {
-    height: 28px !important;
+    height: 2.8rem !important;
     overflow: hidden;
 }
 
@@ -1062,11 +1062,11 @@
 /* Custom styles for the Google Translate dropdown */
 #google_translate_element select {
     background: #ffffff; 
-    border: 1px solid #ccc; 
+    border: 0.1rem solid #ccc; 
     color: #d26d6d; 
-    padding: 5px; 
-    font-size: 14px; 
-    border-radius: 5px; 
+    padding: 0.5rem; 
+    font-size: 1.4rem; 
+    border-radius: 0.5rem; 
     
 }
 
@@ -1089,7 +1089,7 @@
   margin-right: 3rem;
 }
 .mobile-container-styles{
-  margin-left: 50px;
+  margin-left: 5rem;
 }
 .nav{
   justify-content: space-around;
@@ -1153,18 +1153,18 @@
   <div class="socialmediaicons" style="z-index: 99;" >
 
     
-      <a class="active instagram" href="https://www.instagram.com/" class="" style="font-size: 25px;" ><i class="fa-brands fa-instagram"></i>
+      <a class="active instagram" href="https://www.instagram.com/" class="" style="font-size: 2.5rem;" ><i class="fa-brands fa-instagram"></i>
      </a>
-     <a class="active" href="https://www.facebook.com/" class="facebook" style="font-size: 25px;" ><i class="fa-brands fa-facebook"></i>
+     <a class="active" href="https://www.facebook.com/" class="facebook" style="font-size: 2.5rem;" ><i class="fa-brands fa-facebook"></i>
      </a>
-     <a class="active" href="https://www.youtube.com/" class="youtube" style="font-size: 25px;" ><i class="fa-brands fa-youtube"></i>
+     <a class="active" href="https://www.youtube.com/" class="youtube" style="font-size: 2.5rem;" ><i class="fa-brands fa-youtube"></i>
      </a>
      
     
 </div>
 
   <div id="cookie-consent">
-    <button class="close-btn" id="closeBtn" style="padding: 5px; height: 40px; width: 40px; border-radius: 100%; font-size: 30px;" >&times;</button>
+    <button class="close-btn" id="closeBtn" style="padding: 0.5rem; height: 4rem; width: 4rem; border-radius: 100%; font-size: 3rem;" >&times;</button>
     <p>
         We use cookies to improve your experience. By using our website, you consent to all cookies in accordance with our Cookie Policy.
         <a href="#" id="learn-more-link">Learn More</a>
@@ -1256,7 +1256,7 @@
 
         <ul class="navbar-list nav">
           <a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
-            <img src="./assets/images/final.png" class="logopic" style=" width: 150px; margin:0px 0px 0px 18px;">
+            <img src="./assets/images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px 1.8rem;">
           </a>
           <li class="navbar-item">
             <a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
@@ -1310,7 +1310,7 @@
 
               <ul class="dropdown-menu-list">
                 <li>
-                  <a href="chat.html" class="navbar-link" style="font-family: sans-serif; margin-bottom: 5px;">
+                  <a href="chat.html" class="navbar-link" style="font-family: sans-serif; margin-bottom: 0.5rem;">
                     Community chat
                 </a>
                 </li>
@@ -1548,7 +1548,7 @@ <h1>Logout Account</h1>
 
   window.addEventListener("scroll", onScroll);
 </script>
-      <div class="switch-container" style="top: 15px;">
+      <div class="switch-container" style="top: 1.5rem;">
         <input type="checkbox" id="switch" class="switch-checkbox">
         <label for="switch" class="switch-label">
           <div class="switch-button">
@@ -1633,7 +1633,7 @@ <h2>Play Now</h2>
         <div class="container">
           <div class="flex">
             <div class="benefits-content">
-              <h2 class="h2 section-title" style="text-align: center; margin-top: 79px; padding-top: 20px">Unleash the Magic of Book Swapping!</h2>
+              <h2 class="h2 section-title" style="text-align: center; margin-top: 7.9rem; padding-top: 2rem">Unleash the Magic of Book Swapping!</h2>
               <p class="section-text" style="text-align: center;">"SwapReads.com - Where Every Book is a Portal to a New
                 Adventure!"</p>
             </div>
@@ -1657,8 +1657,8 @@ <h3 class="h3 card-title"   >Diverse Literary Adventures</h3>
                 </a> -->
               
                 <a href="diverseLiteracy.html" class="cta1 style-9">
-                  <span style="position: relative; top: 27px;">Read More</span>
-                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                  <span style="position: relative; top: 2.7rem;">Read More</span>
+                  <svg width="1.3rem" height="1rem" viewBox="0 0 13 10">
                     <path d="M1,5 L11,5"></path>
                     <polyline points="8 1 12 5 8 9"></polyline>
                   </svg>
@@ -1689,7 +1689,7 @@ <h3 class="h3 card-title"   >Cost-Efficient Reading</h3>
                 </a> -->
                 <a href="costefficient.html" class="cta style-9">
                   <span>Read More</span>
-                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                  <svg width="1.3rem" height="1rem" viewBox="0 0 13 10">
                     <path d="M1,5 L11,5"></path>
                     <polyline points="8 1 12 5 8 9"></polyline>
                   </svg>
@@ -1719,7 +1719,7 @@ <h3 class="h3 card-title"  >Connect with Like-Minded Readers</h3>
                 </a> -->
                 <a href="#" class="cta style-9">
                   <span>Read More</span>
-                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                  <svg width="1.3rem" height="1rem" viewBox="0 0 13 10">
                     <path d="M1,5 L11,5"></path>
                     <polyline points="8 1 12 5 8 9"></polyline>
                   </svg>
@@ -1749,7 +1749,7 @@ <h3 class="h3 card-title"  >Revitalize Your Bookshelf</h3>
                 </a> -->
                 <a href="#" class="cta style-9">
                   <span>Read More</span>
-                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                  <svg width="1.3rem" height="1rem" viewBox="0 0 13 10">
                     <path d="M1,5 L11,5"></path>
                     <polyline points="8 1 12 5 8 9"></polyline>
                   </svg>
@@ -1779,7 +1779,7 @@ <h3 class="h3 card-title"  >Environmental Impact</h3>
                 </a> -->
                 <a href="environmental-impact.html" class="cta style-9">
                   <span>Read More</span>
-                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                  <svg width="1.3rem" height="1rem" viewBox="0 0 13 10">
                     <path d="M1,5 L11,5"></path>
                     <polyline points="8 1 12 5 8 9"></polyline>
                   </svg>
@@ -1808,7 +1808,7 @@ <h3 class="h3 card-title"  >Personalized Reading Experience</h3>
 
                 <a href="#" class="cta style-9">
                   <span>Read More</span>
-                  <svg width="13px" height="10px" viewBox="0 0 13 10">
+                  <svg width="1.3rem" height="1rem" viewBox="0 0 13 10">
                     <path d="M1,5 L11,5"></path>
                     <polyline points="8 1 12 5 8 9"></polyline>
                   </svg>
@@ -1828,7 +1828,7 @@ <h3 class="h3 card-title"  >Personalized Reading Experience</h3>
       <section class="section chapters" id="chapters">
         <div class="litrealms_conatiner">
           <p class="section-subtitle">Literary Realms</p>
-          <h1 class="h1 section-title has-underline" id="section-title2" style="padding-bottom: 20px;">
+          <h1 class="h1 section-title has-underline" id="section-title2" style="padding-bottom: 2rem;">
             Literary Realms we've covered
             <span class="span has-before"></span>
           </h1>
@@ -2162,7 +2162,7 @@ <h3 class="lithead">09. &nbsp;Inspiring Biographies</h3>
         <div class="container">
 
           
-          <!-- <div class="pricingContainer" style="margin-top : -30px" > -->
+          <!-- <div class="pricingContainer" style="margin-top : -3rem" > -->
             <p class="section-subtitle">Pricing</p>
             
             <h2 class="h2 section-title has-underline" ">
@@ -2254,7 +2254,7 @@ <h2 class="h2 section-title has-underline" id="section-title1">
                 <p class="card-subtitle">01</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Classic Literature</h3>
-                  <span style='font-size:50px;filter: grayscale(100%);'>&#128395;</span>
+                  <span style='font: size 5rem;filter: grayscale(100%);'>&#128395;</span>
                 </div>
                 
 
@@ -2273,7 +2273,7 @@ <h3 class="h3 card-title">Classic Literature</h3>
                 <p class="card-subtitle">02</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Romance</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#10084;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#10084;</span>
                   </div>
 
                 <p class="card-text">
@@ -2291,7 +2291,7 @@ <h3 class="h3 card-title">Romance</h3>
                 <p class="card-subtitle">03</p>
                 <div class="iconrow">
                 <h3 class="h3 card-title">Suspense Thriller</h3>
-                  <span style='font-size:50px;filter: grayscale(100%);'>&#128269;</span>
+                  <span style='font-size:5rem;filter: grayscale(100%);'>&#128269;</span>
                 </div>
 
 
@@ -2310,7 +2310,7 @@ <h3 class="h3 card-title">Suspense Thriller</h3>
                 <p class="card-subtitle">04</p>
                 <div class="iconrow">
                 <h3 class="h3 card-title">Science Fiction</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#128640;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#128640;</span>
                   </div>
 
 
@@ -2329,7 +2329,7 @@ <h3 class="h3 card-title">Science Fiction</h3>
                 <p class="card-subtitle">05</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Fantasy</h3>
-                  <span style='font-size:50px;filter: grayscale(100%);'>&#x1F52E;</span>
+                  <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F52E;</span>
                 </div>
 
                 <p class="card-text">
@@ -2347,7 +2347,7 @@ <h3 class="h3 card-title">Fantasy</h3>
                 <p class="card-subtitle">06</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Horror</h3>
-                  <span style='font-size:50px;filter: grayscale(100%);'>&#x1F578;</span>
+                  <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F578;</span>
                 </div>
 
                 <p class="card-text">
@@ -2365,7 +2365,7 @@ <h3 class="h3 card-title">Horror</h3>
                 <p class="card-subtitle">07</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Biography</h3>
-                  <span style='font-size:50px;filter: grayscale(100%);'>&#x1F464;</span>
+                  <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F464;</span>
                 </div>
 
                 <p class="card-text">
@@ -2383,7 +2383,7 @@ <h3 class="h3 card-title">Biography</h3>
                 <p class="card-subtitle">08</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Self Help</h3>
-                  <span style='font-size:50px;filter: grayscale(100%);'>&#x1F9E0;</span>
+                  <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F9E0;</span>
                 </div>
 
                 <p class="card-text">
@@ -2400,7 +2400,7 @@ <h3 class="h3 card-title">Self Help</h3>
               <p class="card-subtitle">09</p>
               <div class="iconrow">
                 <h3 class="h3 card-title">Historical Fiction</h3>
-                <span style='font-size:50px;filter: grayscale(100%);'>&#x1F3DB;</span>
+                <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F3DB;</span>
               </div>
 
               <p class="card-text">
@@ -2418,7 +2418,7 @@ <h3 class="h3 card-title">Historical Fiction</h3>
                 <p class="card-subtitle">10</p>
                 <div class="iconrow">
                 <h3 class="h3 card-title">Poetry</h3>
-                  <span style='font-size:50px;filter: grayscale(100%);'>&#x270D;</span>
+                  <span style='font-size:5rem;filter: grayscale(100%);'>&#x270D;</span>
                 </div>
 
 
@@ -2438,7 +2438,7 @@ <h3 class="h3 card-title">Poetry</h3>
                 <p class="card-subtitle">11</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Philosophy</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F4DC;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F4DC;</span>
                   </div>
 
 
@@ -2457,7 +2457,7 @@ <h3 class="h3 card-title">Philosophy</h3>
                 <p class="card-subtitle">12</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Adventure</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F526;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F526;</span>
                   </div>
 
 
@@ -2477,7 +2477,7 @@ <h3 class="h3 card-title">Adventure</h3>
                 <p class="card-subtitle">13</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Non-Fiction</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F4D6;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F4D6;</span>
                   </div>
 
                 <p class="card-text">
@@ -2493,7 +2493,7 @@ <h3 class="h3 card-title">Non-Fiction</h3>
                 <p class="card-subtitle">14</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Comedy</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F939;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F939;</span>
                   </div>
 
                 <p class="card-text">
@@ -2509,7 +2509,7 @@ <h3 class="h3 card-title">Comedy</h3>
                 <p class="card-subtitle">15</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Detective Fiction</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F5DD;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F5DD;</span>
                   </div>
 
 
@@ -2524,7 +2524,7 @@ <h3 class="h3 card-title">Detective Fiction</h3>
                 <p class="card-subtitle">16</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Fairy Tales</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F9DA;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F9DA;</span>
                   </div>
                
                 <p class="card-text">
@@ -2537,7 +2537,7 @@ <h3 class="h3 card-title">Fairy Tales</h3>
                 <p class="card-subtitle">17</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Mythology</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'> &#x1F31F;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'> &#x1F31F;</span>
                   </div>
                 
                 <p class="card-text">
@@ -2550,7 +2550,7 @@ <h3 class="h3 card-title">Mythology</h3>
                 <p class="card-subtitle">18</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Noir</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F312;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F312;</span>
                   </div>
                 
                 <p class="card-text">
@@ -2563,7 +2563,7 @@ <h3 class="h3 card-title">Noir</h3>
                 <p class="card-subtitle">19</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">True Crime</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F575; </span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F575; </span>
                   </div>
                 
                 <p class="card-text">
@@ -2580,7 +2580,7 @@ <h3 class="h3 card-title">True Crime</h3>
                 <p class="card-subtitle">20</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Dystopian</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#128740;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#128740;</span>
                   </div>
                 
             
@@ -2597,7 +2597,7 @@ <h3 class="h3 card-title">Dystopian</h3>
                 <p class="card-subtitle">21</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Magical Realism</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#129668;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#129668;</span>
                   </div>
 
                 <p class="card-text">
@@ -2614,7 +2614,7 @@ <h3 class="h3 card-title">Magical Realism</h3>
                 <p class="card-subtitle">22</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Cyberpunk</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F310;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F310;</span>
                   </div>
             
                
@@ -2632,7 +2632,7 @@ <h3 class="h3 card-title">Cyberpunk</h3>
                 <p class="card-subtitle">23</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Utopian</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F3DD;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F3DD;</span>
                   </div>
             
                 <p class="card-text">
@@ -2648,7 +2648,7 @@ <h3 class="h3 card-title">Utopian</h3>
                 <p class="card-subtitle">24</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Experimental Fiction</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F4DA;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F4DA;</span>
                   </div>
                 
             
@@ -2664,7 +2664,7 @@ <h3 class="h3 card-title">Experimental Fiction</h3>
                 <p class="card-subtitle">25</p>
                 <div class="iconrow">
                   <h3 class="h3 card-title">Satire</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x1F3AD;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x1F3AD;</span>
                   </div>
                
                 <p class="card-text">
@@ -2680,7 +2680,7 @@ <h3 class="h3 card-title">Satire</h3>
                 <p class="card-subtitle">26</p>
                 <div class="iconrow">                   
                 <h3 class="h3 card-title">Psychological Thriller</h3>
-                    <span style='font-size:50px;filter: grayscale(100%);'>&#x23F3;</span>
+                    <span style='font-size:5rem;filter: grayscale(100%);'>&#x23F3;</span>
                   </div>
 
             
@@ -2846,32 +2846,32 @@ <h2 class="h2 section-title has-underline" style="margin-bottom: 0px;">
   <h1 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">Donate Books</h1>
   <br>
   <div class="container">
-    <div class="card" style=" margin: 15px; border-bottom: 5px solid #A30F17; border-radius: 10px; transition: transform 0.3s ease; padding-bottom: 10px; height: auto; ">
-          <img src="./lib.jpg" alt="Library Image" style="display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0;">
+    <div class="card" style=" margin: 1.5rem; border-bottom: 0.5rem solid #A30F17; border-radius: 1rem; transition: transform 0.3s ease; padding-bottom: 1rem; height: auto; ">
+          <img src="./lib.jpg" alt="Library Image" style="display: block; width: 100%; height: auto; border-radius: 1rem 1rem 0 0;">
           <div class="card-body">
               <h3 class="card-sty" style="text-align: center;">Library</h3>
               <p class="card-text" style="font-style: italic;">Donate your books to local libraries and help foster a love for reading in your community.</p>
-              <div class="button-container" style="text-align: center; margin-top: 10px; margin-bottom: 10px; ">
+              <div class="button-container" style="text-align: center; margin-top: 1rem; margin-bottom: 1rem; ">
                   <a href="./assets/html/donate.html" class="donate-button">Donate to Libraries</a>
               </div>
           </div>
       </div>
-      <div class="card" style=" margin: 15px; border-bottom: 5px solid #A30F17; border-radius: 10px; transition: transform 0.3s ease; height: auto;">
-          <img src="./sc.jpg" alt="School Image" style="display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0;">
+      <div class="card" style=" margin: 1.5rem; border-bottom: 0.5rem solid #A30F17; border-radius: 1rem; transition: transform 0.3s ease; height: auto;">
+          <img src="./sc.jpg" alt="School Image" style="display: block; width: 100%; height: auto; border-radius: 1rem 1rem 0 0;">
           <div class="card-body">
               <h3 class="card-sty" style="text-align: center;">Schools</h3>
               <p class="card-text" style="font-style: italic;">Support children's education by donating books to nearby schools for students of all ages.</p>
-              <div class="button-container" style="text-align: center; margin-top: 10px;">
+              <div class="button-container" style="text-align: center; margin-top: 1rem;">
                   <a href="./assets/html/school.html" class="donate-button">Donate to Schools</a>
               </div>
           </div>
       </div>
-      <div class="card" style=" margin: 15px; border-bottom: 5px solid #A30F17; border-radius: 10px; transition: transform 0.3s ease; height: auto;">
-          <img src="./n.jpg" alt="Organization Image" style="display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0;">
+      <div class="card" style=" margin: 1.5rem; border-bottom: 0.5rem solid #A30F17; border-radius: 1rem; transition: transform 0.3s ease; height: auto;">
+          <img src="./n.jpg" alt="Organization Image" style="display: block; width: 100%; height: auto; border-radius: 1rem 1rem 0 0;">
           <div class="card-body">
               <h3 class="card-sty" style="text-align: center;">Organizations</h3>
               <p class="card-text" style="font-style: italic;">Help NGOs and other organizations by donating books to support their educational programs.</p>
-              <div class="button-container" style="text-align: center; margin-top: 10px;">
+              <div class="button-container" style="text-align: center; margin-top: 1rem;">
                   <a href="./assets/html/ngo.html" class="donate-button">Donate to Organizations</a>
               </div>
           </div>
@@ -2939,7 +2939,7 @@ <h3>Rate Us</h3>
             toastMessage.textContent = "Feedback submitted successfully :)";
             toastMessage.style.backgroundColor = "green"; // Green color for success
             toastMessage.style.color = "white";
-            toastMessage.style.borderRadius = "5px";
+            toastMessage.style.borderRadius = "0.5rem";
             toastMessage.style.position = "fixed";
                       toastMessage.style.display = "block";
 
@@ -2959,7 +2959,7 @@ <h3>Rate Us</h3>
             toastMessage.textContent = "Select Emoji and give Feedback :(";
             toastMessage.style.backgroundColor = "red"; // Red color for failure
             toastMessage.style.color = "white";
-            toastMessage.style.borderRadius = "5px";
+            toastMessage.style.borderRadius = "0.5rem";
             toastMessage.style.position = "fixed";
             
             toastMessage.style.display = "block";
@@ -3044,7 +3044,7 @@ <h3 style="text-align: center; color: #A30F17;">Get in touch</h3>
               <ul>
                 <li>
                   <p class="card-title address-title">
-                    <lord-icon class="invert-col" src="https://cdn.lordicon.com/iikoxwld.json" trigger="hover" colors="primary:#000000" style="width:25px;height:25px"></lord-icon>
+                    <lord-icon class="invert-col" src="https://cdn.lordicon.com/iikoxwld.json" trigger="hover" colors="primary:#000000" style="width:20.5rem;height:20.5rem"></lord-icon>
                     Address:
                   </p>
                   <address class="address">
@@ -3054,14 +3054,14 @@ <h3 style="text-align: center; color: #A30F17;">Get in touch</h3>
                 </li>
                 <li>
                   <p class="card-title phone-title">
-                    <lord-icon class="invert-col" src="https://cdn.lordicon.com/srsgifqc.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
+                    <lord-icon class="invert-col" src="https://cdn.lordicon.com/srsgifqc.json" trigger="hover" style="width:2rem;height:2rem;"></lord-icon>
                     Phone:
                   </p>
                   <a href="tel:9124421980" class="card-link">+91 9124421980</a>
                 </li>
                 <li>
                   <p class="card-title email-title">
-                    <lord-icon class="invert-col" src="https://cdn.lordicon.com/xtzvywzp.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
+                    <lord-icon class="invert-col" src="https://cdn.lordicon.com/xtzvywzp.json" trigger="hover" style="width:2rem;height:2rem;"></lord-icon>
                     Email:
                   </p>
                   <a href="mailto:support@swapreads.com" class="card-link">support@swapreads.com</a>
@@ -3074,7 +3074,7 @@ <h3 style="text-align: center; color: #A30F17;">Get in touch</h3>
       <div class="map-container">
         <iframe
           src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3686.5834653201455!2d88.40974607348684!3d22.482281936278092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0273c5411d60d7%3A0x5d6e57763593194b!2sSouthern%20Cleve%20Housing%2C%2012%2C%20Bhagat%20Singh%20Nagar%2C%20Nayabad%2C%20Kolkata%2C%20West%20Bengal%20700150!5e0!3m2!1sen!2sin!4v1716043813992!5m2!1sen!2sin"
-          style="border:0; margin-bottom:30px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
+          style="border:0; margin: bottom 0.3em;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
         </iframe>
       </div>
     </div>
@@ -3111,7 +3111,7 @@ <h3 style="text-align: center; color: #A30F17;">Get in touch</h3>
 
   <!-- --Testimonials -->
 
-  <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
+  <h2 class="h2 section-title has-underline" style="margin-top: 10.5rem;">
     Testimonials
     <span class="span has-before"></span>
   </h2>
@@ -3134,7 +3134,7 @@ <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
                 <div class="card-image">
                   <img src="./assets/images/testimonials-4.jpg" alt="" class="card-img">
                 </div>
-                <h2 style="font-size: 20px;">Sonal K</h2>
+                <h2 style="font-size: 2rem;">Sonal K</h2>
                 <div class="bio">"I'm an avid reader who loves getting lost in the pages of a good book, always seeking new stories and perspectives."</div>
                 <div class="rows-icons">
                   <i class="fa-brands fa-linkedin-in"></i>
@@ -3172,7 +3172,7 @@ <h2 style="font-size: 20px;">Sonal K</h2>
                 <div class="card-image">
                   <img src="./assets/images/testimonials-2.jpg" alt="" class="card-img">
                 </div>
-                <h2 style="font-size: 20px;">Prem Sampath</h2>
+                <h2 style="font-size: 2rem;">Prem Sampath</h2>
                 <div class="bio">"I'm passionate about reading, exploring new worlds & ideas through books, whether it's fiction or non-fiction."</div>
                 <div class="rows-icons">
                   <i class="fa-brands fa-linkedin-in"></i>
@@ -3209,7 +3209,7 @@ <h2 style="font-size: 20px;">Prem Sampath</h2>
                 <div class="card-image">
                   <img src="./assets/images/testimonials-3.jpg" alt="" class="card-img">
                 </div>
-                <h2 style="font-size: 20px;">Aron Loes</h2>
+                <h2 style="font-size: 2rem;">Aron Loes</h2>
                 <div class="bio">"Books are my escape; I relish the adventure of exploring new worlds and perspectives with every page I turn."</div>
                 <div class="rows-icons">
                   <i class="fa-brands fa-linkedin-in"></i>
@@ -3248,7 +3248,7 @@ <h2 style="font-size: 20px;">Aron Loes</h2>
                 <div class="card-image">
                   <img src="./assets/images/testimonials-1.jpg" alt="" class="card-img">
                 </div>
-                <h2 style="font-size: 20px;">B.Sharmila</h2>
+                <h2 style="font-size: 2rem;">B.Sharmila</h2>
                 <div class="bio">"I’m a book lover who enjoys immersing myself in different genres, always on the lookout for the next great story or thought-provoking read."</div>
                 <div class="rows-icons">
                   <i class="fa-brands fa-linkedin-in"></i>
@@ -3286,7 +3286,7 @@ <h2 style="font-size: 20px;">B.Sharmila</h2>
                 <div class="card-image">
                   <img src="./assets/images/testimonials-5.jpg" alt="" class="card-img">
                 </div>
-                <h2 style="font-size: 20px;">Jane Doe</h2>
+                <h2 style="font-size: 2rem;">Jane Doe</h2>
                 <div class="bio">"Reading is my passion—I’m always seeking out the next compelling book to fuel my love for storytelling and knowledge."</div>
                 <div class="rows-icons">
                   <i class="fa-brands fa-linkedin-in"></i>
@@ -3325,7 +3325,7 @@ <h2 style="font-size: 20px;">Jane Doe</h2>
                 <div class="card-image">
                   <img src="./assets/images/testimonials-6.jpg" alt="" class="card-img">
                 </div>
-                <h2 style="font-size: 20px;">Maya Verma</h2>
+                <h2 style="font-size: 2rem;">Maya Verma</h2>
                 <div class="bio">"I thrive on the thrill of reading, embracing every opportunity to delve into captivating narratives and diverse viewpoints."</div>
                 <div class="rows-icons">
                   <i class="fa-brands fa-linkedin-in"></i>
@@ -3537,15 +3537,15 @@ <h2 style="margin-left: 2rem; margin-top: 2.75rem;">Quick Links</h2>
         <style>
           .social-icons input[type="email"] 
           {
-              border: 2px solid #ccc; /* Gray border */
-              border-radius: 4px; /* Rounded corners */
-              padding: 10px; /* Inner padding */
-              font-size: 16px; /* Font size */
+              border: 0.2rem solid #ccc; /* Gray border */
+              border-radius: 0.4rem; /* Rounded corners */
+              padding: 1rem; /* Inner padding */
+              font-size: 1.6rem; /* Font size */
           }
           #confirmationMessage
           {
-            margin-left: 50px;
-            font-size: 23px;
+            margin-left: 5rem;
+            font-size: 2.3rem;
             color: green;
 
           }
@@ -3556,7 +3556,7 @@ <h2 style="margin-left: 2rem; margin-top: 2.75rem;">Quick Links</h2>
             {
                 margin-left: 0;
                 text-align: center;
-                font-size: 18px;
+                font-size: 1.8rem;
             }
         }
         </style>
@@ -3564,12 +3564,12 @@ <h2 style="margin-left: 2rem; margin-top: 2.75rem;">Quick Links</h2>
           #confirmationmessage {
     position: fixed;
     top: 42rem;
-    right: 10px;
+    right: 1rem;
     background-color: green;
     color: white;
-    padding: 10px;
-    border-radius: 5px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
     z-index: 1000;
     display: none;
 }
@@ -3605,10 +3605,10 @@ <h2 style="margin-left: 2rem; margin-top: 2.75rem;">Quick Links</h2>
   background-color: #A30F17;
   color: white; 
   border: none; 
-  padding: 10px 20px; 
-  font-size: 16px; 
+  padding: 1rem 2rem; 
+  font-size: 1.6rem; 
   font-family: Arial, sans-serif;
-  border-radius: 5px; 
+  border-radius: 0.5rem; 
   cursor: pointer; 
   transition: background-color 0.3s, transform 0.2s;
 }