Add files via upload

assets/css/style.css

@@ -89,7 +89,7 @@ p {
 
 body {
   background-color: #f7f7ff !important;
-  color: #6A6A6A; }
+  color: #444444; }
 
 .session-title {
   padding: 30px;
@@ -126,7 +126,7 @@ body {
 .page-nav {
   padding: 40px;
   text-align: center;
-  padding-top: 120px; }
+  padding-top: 90px; }
   .page-nav ul {
     float: none;
     margin: auto;
@@ -762,6 +762,73 @@ body {
   text-align: center;
 }
 
+/* ======================================= Books Home ==================================== */
+/* Book container */
+.book-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 0px;
+}
+
+/* Individual book */
+.book {
+  width: 240px;
+  height: 390px;
+  margin: 20px;
+  position: relative;
+  perspective: 1000px;
+  overflow: hidden;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Book image */
+.book img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s;
+}
+
+/* Flip card effect */
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg); /* Flips around the y-axis */
+}
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-card-back {
+  background-color: black;
+  color: white;
+  transform: rotateY(180deg); /* Initially hidden, flipped around the y-axis */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Title and description inside flip card */
+.flip-card-back h2, .flip-card-back p {
+  margin: 10px;
+  text-align: center;
+}
+
 
 /* ===================================== Header CSS ================================== */
 header {
@@ -1278,7 +1345,7 @@ ol {
   display: flex; /* Align items horizontally */
   flex-wrap: nowrap; /* Prevent wrapping */
   overflow-x: auto; /* Allow horizontal scrolling if necessary */
-  padding: 20px 0; /* Padding for spacing */
+  padding: 40px 0; /* Padding for spacing */
   gap: 20px; /* Space between boxes */
   justify-content: center; /* Center items horizontally */
 }
@@ -1331,19 +1398,6 @@ ol {
   margin-bottom: 15px;
 }
 
-#services-section .service-options a {
-  color: var(--text-color);
-  text-decoration: none;
-  transition: var(--transition);
-  display: block;
-  padding: 15px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  font-weight: 500;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-
 /*====================================Scroll Animation=============================*/
 
 /* Initially hide elements to animate */