style: Enhance desktop layout and fix navigation

- Center featured section heading with proper spacing
- Adjust logo positioning with left margin
- Improve category list spacing
- Increase figcaption font size for better readability
- Fix navigation link hover states to prevent layout shift
- Ensure consistent spacing in featured images container

src/styles/index.css

@@ -1,13 +1,22 @@
+
+.perk-item,
+.testimonial,
+.featured-item {
+  display: none; /* Hide all by default */
+}
+
+.perk-item.visible,
+.testimonial.visible,
+.featured-item.active {
+  display: block; /* Show visible or active items */
+}
+
 #left-aside,
 #right-aside {
   flex: 1;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
 }
 
-#featured-container {
-  flex: 2;
-}
-
 #left-aside {
   display: flex;
   flex-direction: column;
@@ -41,11 +50,12 @@
   border: solid #014038;
   border-radius: 10px;
   padding: 5px 10px;
-  white-space: wrap;
-  max-height: 250px;
-  min-height: 250px;
+  white-space: normal;
+  max-height: 175px;
+  min-height: 175px;
+  max-width: 400px;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
-  text-align:
+  text-align: center;
 }
 
 #perks-heading {
@@ -57,10 +67,13 @@
 
 #featured-container {
   display: flex;
+  flex: 2;
   flex-direction: column;
+  align-items: center;
   text-align: center;
-  margin-right: 40px;
   margin-top: 10px;
+  margin-left: 50px;
+  margin-right: 50px;
 }
 
 #featured-container h2 {
@@ -82,8 +95,9 @@
   background-color: #96baa0;
   border: solid #f7f7f7;
   border-radius: 10px;
-  padding-left: 20px;
-  transform: translateX(30px);
+  margin-left: 30px;
+  width: fit-content;
+  padding: 0 20px;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
 }
   
@@ -91,20 +105,21 @@
   list-style-type: none;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  padding: 0;
 }
 
-#featured-image ul li {
-  align-content: space-between;
+#featured-images {
+  border: solid #96baa0;
+  border-radius: 10px;
 }
 
-#featured-images ul li a {
+
+#featured-images a {
   color: #014038;
   background-color: #f7f7f7;
   border-radius: 10px;
   padding: 5px 10px;
-}
-
-#featured-images a {
   display: block;
   text-align: center;
   font-size: 1.4rem;
@@ -115,10 +130,30 @@
   display: block;
   margin: 0 auto;
   margin-bottom: 10px;
-  margin-right: 45px;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
 }
 
+#featured-images {
+  overflow: hidden; /* Hide anything outside the container */
+  /*text-align: center; 
+  width: 100%; */
+  height: auto; /* Let the height adapt to content */
+}
+
+figcaption {
+  font-size: 1.2rem;
+}
+
+#featured-images img {
+  display: none; /* Hide all items initially */
+  max-width: 100%; /* Ensure images are responsive */
+  height: auto; /* Maintain aspect ratio */
+  background-color: #96baa0;
+  border: solid #014038;
+  border-radius: 5px;
+  padding: 5px;
+}
+
 #testimonials-feature{
   background-color: #96baa0;
   color: #014038;
@@ -126,7 +161,7 @@
   border-radius: 10px;
   padding: 5px 10px;
   margin-top: 10px;
-  white-space: wrap;
+  white-space: normal;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
 }
 
@@ -141,8 +176,10 @@
   border: solid #014038;
   border-radius: 5px;
   padding: 5px 10px;
-  white-space: wrap;
-  min-height: 250px;
+  white-space: normal;
+  max-height: 175px;
+  max-width: 400px;
+  min-height: 175px;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
   text-align: center;
 }
@@ -152,11 +189,9 @@
   flex-direction: column;
   align-items: center;
   background-color: #f0c06d;
-  width: 100%;
-  height: auto;
   padding: 5px 10px;
-  margin-left: 40px;
   margin-top: 10px;
+  margin-left: 20px;
   border: solid #f7f7f7;
   border-radius: 10px;
 }
@@ -169,6 +204,7 @@
   padding: 5px 10px;
   margin-top: 5px;
   text-align: center;
+  width: 90%;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
 }
 
@@ -188,6 +224,7 @@
   flex-direction: column;
   align-items: center;
   list-style-type: none;
+  gap: 5px;
 }
 
 .categories ul li {
@@ -195,7 +232,6 @@
   border-radius: 10px;
   background-color: #96baa0;
   margin-top: 20px;
-  margin-right: 35px;
   min-width: 100%;
   transition: background-color 0.3s ease, color 0.3s ease;
   box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
@@ -213,4 +249,11 @@
   background-color: #f7f7f7;
   color: #014038; 
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.categories ul li a:hover {
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: inherit;
 }