Add Free E-Books section to index.html and new CSS file

assets/css/Available.css

@@ -117,4 +117,43 @@ h2.section-title {
 .btn-secondary:hover {
     background-color: var(--btn-bg-hover-color);
 
+}
+
+/* Span for underline effect */
+span {
+    display: block;
+}
+
+/* Class for the underline effect */
+.has-underline {
+    position: relative;
+    margin-block-end: 60px;
+    text-align: center; /* Center align the heading */
+}
+
+/* Span within the underline class */
+.span {
+    height: 2px;
+    background-color: #cc9999; /* Adjust to the desired color */
+    width: 200px;
+    margin: 30px auto 0 auto;
+}
+
+/* Before and after pseudo-elements */
+.has-before::before,
+.has-after::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+}
+
+/* Specific styling for the before pseudo-element */
+.has-before::before {
+    width: 18px;
+    height: 18px;
+    top: 30%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%) rotate(45deg);
+    background-color: #cc9999; /* Adjust to the desired color */
+    box-shadow: 7px -7px #cc9999; /* Adjust to the desired shadow color */
 }

index.html

@@ -137,10 +137,10 @@
 
               <ul class="dropdown-menu-list">
                 <li class="navbar-item">
-                  <a href="#E-books" class="navbar-link" data-nav-link>
-                    <i class="ri-customer-service-2-fill"></i> Free E-Books 
-                  </a>
-                </li>
+            <a href="#E-books" class="navbar-link" data-nav-link>
+              <i class="ri-customer-service-2-fill"></i> Free E-Books 
+            </a>
+          </li>
                 <li class="dropdown-menu-item">
                   <a href="#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i class="ri-medal-fill"></i> Literary Realms</a>
                 </li>