From 2805c14e5658c00319c278679d3a4ff9545d65b3 Mon Sep 17 00:00:00 2001
From: dereklseitz <derekseitz@dsnet.works>
Date: Wed, 10 Sep 2025 12:52:53 -0500
Subject: [PATCH] refactor: Adjust HTML/CSS across content pages for a more
 cohesive UX

---
 src/_data/testimonials.js       |   2 +-
 src/_includes/base.njk          |  13 +-
 src/_includes/category-nav.njk  |   3 +-
 src/_includes/header.njk        |  77 +++++-----
 src/community.njk               |  10 +-
 src/credits.njk                 |  71 +++++----
 src/gallery.njk                 |  64 ++++----
 src/index.njk                   |  11 +-
 src/scripts/demo-modal.js       |  54 +++++++
 src/scripts/gallery-carousel.js |  16 +-
 src/scripts/script.js           |  69 +--------
 src/styles/about.css            |  18 +--
 src/styles/base.css             |  47 +++---
 src/styles/category-nav.css     |   8 +-
 src/styles/community.css        |  40 ++++-
 src/styles/credits.css          |  91 +++++++++++-
 src/styles/footer.css           |  15 +-
 src/styles/gallery.css          |  39 +++--
 src/styles/header.css           | 254 ++++++++------------------------
 src/styles/index.css            |  31 ++--
 src/styles/variables.css        |   6 +
 21 files changed, 485 insertions(+), 454 deletions(-)
 create mode 100644 src/scripts/demo-modal.js

diff --git a/src/_data/testimonials.js b/src/_data/testimonials.js
index d571ac1..170f317 100644
--- a/src/_data/testimonials.js
+++ b/src/_data/testimonials.js
@@ -21,7 +21,7 @@ const TESTIMONIALS = [
     {
         "id": "T02",
         "clientName": "Morris F.",
-        "testimonial": "Thanks to the Gardening 101 Workshop with Bethany and Bloom Valley Nursery's amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!",
+        "testimonial": "Thanks to BVN's Workshops and amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!",
         "dateObtained": "2024-12-03"
     },
     {
diff --git a/src/_includes/base.njk b/src/_includes/base.njk
index 0ab48fc..01b6bcd 100644
--- a/src/_includes/base.njk
+++ b/src/_includes/base.njk
@@ -9,7 +9,12 @@
         {% endif %}
 
         <title>{{title}}</title>
-
+        
+        <link rel="stylesheet" href="/styles/variables.css">
+        <link rel="stylesheet" href="/styles/base.css">
+        <link rel="stylesheet" href="/styles/header.css">
+        <link rel="stylesheet" href="/styles/footer.css">
+        <link rel="stylesheet" href="/styles/modals.css">
         {% if stylesheet %}
             {% for style in stylesheet %}
                 <link rel="stylesheet" href="{{ style }}">
@@ -19,7 +24,6 @@
         {% if hCAPTCHA %}
             <script src="{{ hCAPTCHA }}" async defer></script>
         {% endif %}
-
         {% if fontAwesome %}
             <script src="{{ fontAwesome }}" crossorigin="anonymous"></script>
         {% endif %}
@@ -30,7 +34,7 @@
 
         {% include "header.njk" %}
 
-        <main>
+        <main class="main-content-container">
 
             {{ content | safe }}
 
@@ -40,11 +44,14 @@
 
         {% include "modals.njk" %}
 
+        <script src="/scripts/demo-modal.js"></script>
         {% if pageScripts %}
             {% for script in pageScripts %}
                 <script src="{{ script }}"></script>
             {% endfor %}
         {% endif %}
+        <script src="/scripts/cart.js"></script>
+        <script src="/scripts/newsletter.js">
 
     </body>
 </html>
\ No newline at end of file
diff --git a/src/_includes/category-nav.njk b/src/_includes/category-nav.njk
index cca81df..486b3e0 100644
--- a/src/_includes/category-nav.njk
+++ b/src/_includes/category-nav.njk
@@ -1,7 +1,8 @@
 <div id="right-side">
     <nav id="category-nav">
         <div id="category-nav-container">
-            <h2>Shop by Category</h2>
+            <h2>Categories</h2>
+            <hr>
             <div class="categories">
                 <ul>
                     <li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
diff --git a/src/_includes/header.njk b/src/_includes/header.njk
index cfa9c61..13d8932 100644
--- a/src/_includes/header.njk
+++ b/src/_includes/header.njk
@@ -1,44 +1,37 @@
 <header role="banner">
-    <div class="header-container">
-        <div class="header-left">
-            <div class="logo">
-                <img
-                    src="/images/Client1_LogoPalette2_F0C06D.png"
-                    alt="Bloom Valley Nursery Logo">
-            </div>
-        </div>
-        
-        <div class="header-center">
-            <div class="business-name-container">
-                <p class="business-name">Bloom Valley Nursery</p>
-            </div>
-            <div class="nav-container">
-                <nav role="navigation" aria-label="Main Navigation">
-                    <ul>
-                        <li>
-                            <a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a>
-                        </li>
-                        <li>
-                            <a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a>
-                        </li>
-                        <li>
-                            <a href="/about/" {% if currentPage == 'about'%}class="current-page" aria-current="page"{% endif %}>About Us</a>
-                        </li>
-                        <li>
-                            <a href="/community/" {% if currentPage == 'community' %}class="current-page community-link" aria-current="page"{% endif %}>Community Events</a>
-                        </li>
-                    </ul>
-                </nav>
-            </div>
-        </div>
-        
-        <div class="header-right">
-            <button id="menu-toggle" class="menu-toggle" aria-label="Open navigation menu" aria-expanded="false">
-                <i class="fa-solid fa-bars fa-2xl"></i>
-            </button>
-            <button id="shopping-cart" aria-label="Shopping Cart">
-                <i class="fa-solid fa-cart-shopping fa-2xl"></i>
-            </button>
-        </div>
-    </div>
+	<div class="header-container">	
+		<div class="logo-name-cart">
+			<div class="logo-box">
+				<img class="logo" src="/images/Client1_LogoPalette2_F0C06D.png"
+							alt="Bloom Valley Nursery Logo">
+			</div>
+			<div class="name-box">
+				<p class="business-name">Bloom Valley Nursery</p>
+			</div>
+			<div class="cart-box">
+				<button id="shopping-cart" aria-label="Shopping Cart">
+					<i class="fa-solid fa-cart-shopping fa-2xl"></i>
+				</button>
+			</div>
+		</div>
+		
+		<div class="nav-container">
+			<nav role="navigation" aria-label="Main Navigation">
+				<ul>
+					<li>
+						<a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a>
+					</li>
+					<li>
+						<a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a>
+					</li>
+					<li>
+						<a href="/about/" {% if currentPage == 'about'%}class="current-page" aria-current="page"{% endif %}>About Us</a>
+					</li>
+					<li>
+						<a href="/community/" {% if currentPage == 'community' %}class="current-page community-link" aria-current="page"{% endif %}>Community Events</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
 </header>
\ No newline at end of file
diff --git a/src/community.njk b/src/community.njk
index 55c9d8a..a13c5f3 100644
--- a/src/community.njk
+++ b/src/community.njk
@@ -4,18 +4,11 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
 seoIndexing: false
 title: "Community Events - Bloom Valley Nursery Demo"
 stylesheet: 
-    - "/styles/variables.css"
-    - "/styles/base.css"
-    - "/styles/header.css"
     - "/styles/community.css"
-    - "/styles/footer.css"
-    - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "community"
 pageScripts:
     - "/scripts/events-carousel.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 <div class="community">
 <h1>Mark Your Calendars!</h1>
@@ -24,6 +17,7 @@ pageScripts:
       
     <div class="upcoming-events">
       <h2>Upcoming Events</h2>
+      <p class="notice">Check out the Upcoming Events at Bloom Valley Nursery and around the community!<br> Our BVN Workshops are for all ages and free of charge. We ask that you use our <a class="com-link" href="../about/#feedback" target="_blank" rel="noopener noreferrer">contact form here</a> to sign up for BVN Workshops in advance. Reservations are not required, though, and we will make space for all who attend.</p>
       <div id="events-navigation">
         <ul class="event-categories">
           <li class="workshops-btn enav"><a href="/community/?category=workshop#" class="cat-btn">Workshops</a></li>
@@ -70,7 +64,7 @@ pageScripts:
   <div class="add-events">
     <p>
       For more details, to add events to this page, or to leave feedback,
-      <a
+      <a class="com-link"
         href="/about/#feedback"
         aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries."
         >click here</a
diff --git a/src/credits.njk b/src/credits.njk
index d221f8d..9664ef7 100644
--- a/src/credits.njk
+++ b/src/credits.njk
@@ -4,47 +4,54 @@ metaDesc: "Credit & attribution for the contributors of this demo eCommerce webs
 seoIndexing: true
 title: "Credits & Attribution - Bloom Valley Nursery Demo"
 stylesheet: 
-    - "/styles/variables.css"
-    - "/styles/base.css"
-    - "/styles/header.css"
     - "/styles/credits.css"
-    - "/styles/footer.css"
-    - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 isLandingPage: false
 pageScripts:
     - "/scripts/tooltips.js"
-    - "/scripts/script.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 
 <div class="credits-container">
-    <div class="intro">
-        <h1>Credits & Attributions</h1>
-        <p>A heartfelt <strong>Thank You</strong> is extended to these creators and the platforms that host their work. Their royalty-free contributions to the public helped make this demo possible.</p> 
-        <p id="tip-desc" class="visually-hidden">Preview shows a small version of the linked image.</p>
+    <div class="content">
+        <div class="intro">
+            <h1 class="cred-attr">Credits & Attributions</h1>
+            <p class="thanks">A heartfelt <strong class="strong-thanks">Thank You</strong> is extended to these creators and the platforms that host their work.<br> Their royalty-free contributions to the public helped make this demo possible.</p> 
+            <p id="tip-desc" class="visually-hidden">Preview shows a small version of the linked image.</p>
 
-    <div>
-        <ul class="credits-list">
-        {% for credit in credits.CREDITS %}
-            <li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}">
-                <div class="thumb">
-                    <img class="thumb-inline"
-                        src="../images/_s-thumbs/{{ credit.category }}/{{ credit.fileName }}"
-                        alt="Attributed image for {{ credit.fileName }}"
-                        width="40" height="24"
-                        loading="lazy" decoding="async">
-                </div>
+        <div class="video-box">
+            <h2 class="videos">Video Content</h2>
+            <ul class="videos-credits-list">
+                <li class="credit" data-tooltip="https://video.pictory.ai/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP">
+                    <div class="meta">
+                        <p>
+                            <a href="https://video.pictory.ai/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP">The Story of Bloom Valley</a> was created by <a class="creator" href="https://dlseitz.dev" target="_blank" rel="noopener noreferrer">Derek L. Seitz</a> with <a class="source" href="https://pictory.ai/" target="_blank" rel="noopener noreferrer">Pictory.AI</a> under the <a class="license" href="https://pictory.ai/terms-of-service#:~:text=(c).%20Third%2DParty,new%20Pictoried%20Content." target="_blank" rel="noopener noreferrer">Pictory.AI Terms of Service</a>.
+                        </p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div class="images-box">
+            <h2 class="images">Image Content</h2>
+            <ul class="images-credits-list">
+            {% for credit in credits.CREDITS %}
+                <li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}">
+                    <div class="thumb">
+                        <img class="thumb-inline"
+                            src="../images/_s-thumbs/{{ credit.category }}/{{ credit.fileName }}"
+                            alt="Attributed image for {{ credit.fileName }}"
+                            width="40" height="24"
+                            loading="lazy" decoding="async">
+                    </div>
 
-                <div class="meta" >
-                    <p>
-                        Photo by <a class="creator" href="{{ credit.creatorUrl }}" target="_blank"
-                            rel="noopener noreferrer">{{ credit.creator }}</a> at <a class="source" href="{{ credit.sourceUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.host }}</a> under the <a class="license" href="{{ credit.licenseUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.license }}</a>                        .
-                    </p>
-                </div>
-            </li>
-            {% endfor %}
-        </ul>
+                    <div class="meta">
+                        <p>
+                            Photo by <a class="creator" href="{{ credit.creatorUrl }}" target="_blank"
+                                rel="noopener noreferrer">{{ credit.creator }}</a> at <a class="source" href="{{ credit.sourceUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.host }}</a> under the <a class="license" href="{{ credit.licenseUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.license }}</a>                        .
+                        </p>
+                    </div>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/gallery.njk b/src/gallery.njk
index 9558f97..b2a3db3 100644
--- a/src/gallery.njk
+++ b/src/gallery.njk
@@ -4,49 +4,43 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
 seoIndexing: false
 title: "Gallery - Bloom Valley Nursery Demo"
 stylesheet: 
-  - "/styles/variables.css"
-  - "/styles/base.css"
-  - "/styles/header.css"
   - "/styles/gallery.css"
   - "/styles/category-nav.css"
-  - "/styles/footer.css"
-  - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "gallery"
 pageScripts:
     - "/scripts/gallery-carousel.js"
-    - "/scripts/script.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 
 <div id="gallery-top">
-  <section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
-    <h2>Products by Category</h2>
-    <div id="product-category-card">
-      <button
-        id="scroll-left"
-        aria-label="Scroll products left"
-        aria-controls="product-carousel"
-        class="fa-solid fa-chevron-left"
-      >
-      </button>
-      <div id="product-carousel">
-        <div id="product-list"><!--Product Cards will be dynamically inserted here--></div>
+  <div class="left-side">
+    <section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
+      <h2>Products by Category</h2>
+      <div id="product-category-card">
+        <button
+          id="scroll-left"
+          aria-label="Scroll products left"
+          aria-controls="product-carousel"
+          class="fa-solid fa-chevron-left"
+        >
+        </button>
+        <div id="product-carousel">
+          <div id="product-list"><!--Product Cards will be dynamically inserted here--></div>
+        </div>
+        <button
+          id="scroll-right"
+          aria-label="Scroll products right"
+          aria-controls="product-carousel"
+          class="fa-solid fa-chevron-right"
+        >
+        </button>
       </div>
-      <button
-        id="scroll-right"
-        aria-label="Scroll products right"
-        aria-controls="product-carousel"
-        class="fa-solid fa-chevron-right"
-      >
-      </button>
-    </div>
-    <div id="gallery-bottom">
-      <button id="cart-details">View Shopping Cart</button>
-    </div>
-  </section>
-
-  {% include "category-nav.njk" %}
-
+      <div id="gallery-bottom">
+        <button id="cart-details">View Shopping Cart</button>
+      </div>
+    </section>
+  </div>
+  <div class="right-side">
+    {% include "category-nav.njk" %}
+  </div>
 </div>
diff --git a/src/index.njk b/src/index.njk
index b62959a..875426d 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -4,19 +4,12 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
 seoIndexing: false
 title: "Landing - Bloom Valley Nursery Demo"
 stylesheet: 
-    - "/styles/variables.css"
-    - "/styles/base.css"
-    - "/styles/header.css"
     - "/styles/index.css"
     - "/styles/category-nav.css"
-    - "/styles/footer.css"
-    - "/styles/modal.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "index"
 pageScripts:
     - "/scripts/script.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 
 <!-- Main Content Section -->
@@ -40,7 +33,7 @@ pageScripts:
 			<h2 id="testimonials-heading">What Others Say</h2>
 			{% for item in testimonials.TESTIMONIALS %}
 				<div id="{{ id }}" class="testimonial-item">
-					<h3 class="client-name">{{ item.clientName }} said<h3>
+					<h3 class="client-name">{{ item.clientName }} said</h3>
 					<p class="client-quote">"{{ item.testimonial }}"</p>
 				</div>
 			{% endfor %}
@@ -58,7 +51,7 @@ pageScripts:
 								<a href="/gallery/">
 					<h3 class="product-name">{{ item.productName }}</h3>
 									<figure>
-										<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item">
+										<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" width="480" height="320" class="featured-item">
 										<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
 									</figure>
 									<p class="price">${{ item.price }}</p>
diff --git a/src/scripts/demo-modal.js b/src/scripts/demo-modal.js
new file mode 100644
index 0000000..61ca601
--- /dev/null
+++ b/src/scripts/demo-modal.js
@@ -0,0 +1,54 @@
+document.addEventListener("DOMContentLoaded", () => {
+    // ================== DEMO NOTICE MODAL ==================
+    if (!sessionStorage.getItem("demoNoticeAcknowledged")) {
+        let modal = document.createElement("div");
+        modal.id = "demoModal";
+        modal.style.position = "fixed";
+        modal.style.left = "0";
+        modal.style.top = "0";
+        modal.style.width = "100%";
+        modal.style.height = "100%";
+        modal.style.background = "rgba(0, 0, 0, 0.7)";
+        modal.style.display = "flex";
+        modal.style.alignItems = "center";
+        modal.style.justifyContent = "center";
+        modal.style.zIndex = "1000";
+
+        let modalContent = document.createElement("div");
+        modalContent.style.background = "white";
+        modalContent.style.padding = "20px";
+        modalContent.style.borderRadius = "10px";
+        modalContent.style.textAlign = "center";
+        modalContent.style.width = "80%";
+        modalContent.style.maxWidth = "400px";
+
+        let heading = document.createElement("h2");
+        heading.innerText = "Demo Notice";
+
+        let message = document.createElement("p");
+        message.innerText =
+            "This site is for demonstration purposes only and is not a real e-commerce store. No purchases can be made.";
+
+        let closeButton = document.createElement("button");
+        closeButton.innerText = "I Understand";
+        closeButton.style.padding = "10px 20px";
+        closeButton.style.marginTop = "15px";
+        closeButton.style.border = "none";
+        closeButton.style.background = "#007bff";
+        closeButton.style.color = "white";
+        closeButton.style.fontSize = "16px";
+        closeButton.style.cursor = "pointer";
+        closeButton.style.borderRadius = "5px";
+
+        closeButton.addEventListener("click", function () {
+            modal.style.display = "none";
+            sessionStorage.setItem("demoNoticeAcknowledged", "true");
+        });
+
+        modalContent.appendChild(heading);
+        modalContent.appendChild(message);
+        modalContent.appendChild(closeButton);
+        modal.appendChild(modalContent);
+        document.body.appendChild(modal);
+    }
+});
\ No newline at end of file
diff --git a/src/scripts/gallery-carousel.js b/src/scripts/gallery-carousel.js
index 4bdbeb9..a55651c 100644
--- a/src/scripts/gallery-carousel.js
+++ b/src/scripts/gallery-carousel.js
@@ -71,6 +71,20 @@ const updateProductList = (category) => {
   const productList = document.getElementById("product-list");
   if (!productList) return console.error("Element with ID 'product-list' not found.");
 
+  // Remove active class from all buttons
+  document.querySelectorAll(".categories ul li").forEach(li => {
+    li.classList.remove('active');
+  });
+
+  // Add active class to the button for the current category
+  document.querySelectorAll(".cat-btn").forEach(button => {
+    const url = new URL(button.href);
+    const btnCategory = url.searchParams.get('category');
+    if (btnCategory === category) {
+      button.parentElement.classList.add('active');
+    }
+  });
+
   selectedProducts = allProducts.filter(product => product.category === category);
   currentIndex = 0;
 
@@ -129,4 +143,4 @@ document.addEventListener('DOMContentLoaded', () => {
       updateProductList(defaultCategory);
     })
     .catch(err => console.error('Problem fetching products:', err));
-});
+});
\ No newline at end of file
diff --git a/src/scripts/script.js b/src/scripts/script.js
index de2883b..26079bf 100644
--- a/src/scripts/script.js
+++ b/src/scripts/script.js
@@ -1,58 +1,6 @@
 document.addEventListener("DOMContentLoaded", () => {
-    // ================== DEMO NOTICE MODAL ==================
-    if (!sessionStorage.getItem("demoNoticeAcknowledged")) {
-        let modal = document.createElement("div");
-        modal.id = "demoModal";
-        modal.style.position = "fixed";
-        modal.style.left = "0";
-        modal.style.top = "0";
-        modal.style.width = "100%";
-        modal.style.height = "100%";
-        modal.style.background = "rgba(0, 0, 0, 0.7)";
-        modal.style.display = "flex";
-        modal.style.alignItems = "center";
-        modal.style.justifyContent = "center";
-        modal.style.zIndex = "1000";
 
-        let modalContent = document.createElement("div");
-        modalContent.style.background = "white";
-        modalContent.style.padding = "20px";
-        modalContent.style.borderRadius = "10px";
-        modalContent.style.textAlign = "center";
-        modalContent.style.width = "80%";
-        modalContent.style.maxWidth = "400px";
-
-        let heading = document.createElement("h2");
-        heading.innerText = "Demo Notice";
-
-        let message = document.createElement("p");
-        message.innerText =
-            "This site is for demonstration purposes only and is not a real e-commerce store. No purchases can be made.";
-
-        let closeButton = document.createElement("button");
-        closeButton.innerText = "I Understand";
-        closeButton.style.padding = "10px 20px";
-        closeButton.style.marginTop = "15px";
-        closeButton.style.border = "none";
-        closeButton.style.background = "#007bff";
-        closeButton.style.color = "white";
-        closeButton.style.fontSize = "16px";
-        closeButton.style.cursor = "pointer";
-        closeButton.style.borderRadius = "5px";
-
-        closeButton.addEventListener("click", function () {
-            modal.style.display = "none";
-            sessionStorage.setItem("demoNoticeAcknowledged", "true");
-        });
-
-        modalContent.appendChild(heading);
-        modalContent.appendChild(message);
-        modalContent.appendChild(closeButton);
-        modal.appendChild(modalContent);
-        document.body.appendChild(modal);
-    }
-
-    // ================== SHOPPER PROMO CAROUSEL ==================
+    // ================== PROMOS CAROUSEL ==================
     const promo = document.querySelectorAll(".promo-item");
     let currentIndexPromo = 0;
 
@@ -71,7 +19,7 @@ document.addEventListener("DOMContentLoaded", () => {
     showNextPromo();
     setInterval(showNextPromo, 2250);
 
-    // ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
+    // ================== TESTIMONIALS CAROUSEL ==================
     const testimonials = document.querySelectorAll(".testimonial-item");
     let currentIndexTestimonials = 0;
 
@@ -91,19 +39,6 @@ document.addEventListener("DOMContentLoaded", () => {
     setInterval(showNextTestimonial, 3500);
 
     // ================== FEATURED ITEMS CAROUSEL ==================
-    /*const featuredItems = document.querySelectorAll("#featured-images .featured-item");
-    let currentIndex = 0;
-
-    function showNextItem() {
-        featuredItems[currentIndex].classList.remove("active");
-        currentIndex = (currentIndex + 1) % featuredItems.length;
-        featuredItems[currentIndex].classList.add("active");
-    }
-
-    featuredItems[currentIndex].classList.add("active");
-    setInterval(showNextItem, 3000);*/
-
-    // ================== UPDATED FEATURED ITEMS CAROUSEL ==================
     const featuredItems = document.querySelectorAll(".featured-card");
     let currentIndexFeatured = 0;
 
diff --git a/src/styles/about.css b/src/styles/about.css
index d2e012d..fd4add7 100644
--- a/src/styles/about.css
+++ b/src/styles/about.css
@@ -72,8 +72,10 @@ h2#bvn-story {
   justify-content: center;
   align-items: center;
   background-color: var(--color-destin-sand);
-  border: solid 2px var(--color-mid-green);
+  border: solid 3px var(--color-mid-green);
   border-radius: 15px;
+    box-shadow: var(--shadow-medium);
+
 
 }
 
@@ -86,14 +88,6 @@ h2#bvn-story {
   padding: 0 50px;
 }
 
-#bottom {
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-  width: 100%
-
-}
-
 #bottom {
   display: flex;
   flex-direction: row;
@@ -107,7 +101,6 @@ h2#bvn-story {
   padding: 20px;
   margin: 30px auto;
   box-shadow: var(--shadow-medium);
-
 }
 
 #business-info {
@@ -155,7 +148,10 @@ strong {
 }
 
 #feedback h2 {
-  margin: auto;
+  margin-top: 5px;
+  margin-bottom: 20px;
+  margin-left: auto;
+  margin-right: auto;
   text-align: center;
   background-color: var(--color-mid-green);
   border: solid 2px var(--color-destin-sand);
diff --git a/src/styles/base.css b/src/styles/base.css
index 4581a02..25b5262 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,4 +1,13 @@
 /* Global Styles */
+/* Override Font Awesome font-face globally to prevent CLS */
+@font-face {
+  font-family: "Font Awesome 6 Brands";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://ka-f.fontawesome.com/releases/v7.0.1/webfonts/free-fa-brands-400.woff2") format("woff2");
+}
+
 html {
   font-size: 17px; /* Base font size for scaling */
   scroll-behavior: smooth; 
@@ -9,7 +18,7 @@ body {
   flex-direction: column;
   align-items: center;
   font-family: 'Calibri', sans-serif;
-  font-size: 1rem; /* Default font size based on 16px */
+  font-size: 1rem; /* Default font size based on 17px */
   line-height: 1.5;
   margin: 0;
   padding: 0;
@@ -17,56 +26,53 @@ body {
 }
 
 body h1 {
-  text-shadow: 0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-right top shadow */
-  -0.5px -0.5px .5px var(--color-destin-sand), /* Top-left top shadow */
-  -0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-left top shadow */
-  0.5px -0.5px .5px var(--color-destin-sand); /* Top-right top shadow */
+  text-shadow: var(--text-outline-light);
 }
 
-/* Title Large (Arial Bold 30px) */
+/* Title Large (Arial Bold ~32px) */
 h1 {
   font-family: 'Arial', sans-serif;
   font-weight: bold;
-  font-size: 1.875rem; /* 30px for title */
+  font-size: 1.875rem;
 }
 
-/* Title (Arial Bold 25px) */
+/* Title (Arial Bold ~27px) */
 h2 {
   font-family: 'Arial', sans-serif;
   font-weight: bold;
   font-size: 1.5625rem;
 }
 
-/* Subtitle (Comfortaa Normal 15px) */
+/* Subtitle (Comfortaa Normal ~16px) */
 h3 {
   font-family: 'Comfortaa', sans-serif;
-  font-size: .9375rem ; /* 15px for subtitle */
+  font-size: .9375rem ;
 }
 
-/* Body Large (Calibri Normal 20px) */
+/* Body Large (Calibri Normal ~21px) */
 p.body-large {
   font-family: 'Calibri', sans-serif;
-  font-size: 1.25rem; /* 20px for body large */
+  font-size: 1.25rem;
 }
 
-/* Body Strong (Calibri Bold 16px) */
+/* Body Strong (Calibri Bold 17px) */
 strong {
   font-family: 'Calibri', sans-serif;
   font-weight: bold;
-  font-size: 1rem; /* 16px for body strong */
+  font-size: 1rem;
 }
 
-/* Body (Calibri Normal 16px) */
+/* Body (Calibri Normal 17px) */
 p.body {
   font-family: 'Calibri', sans-serif;
-  font-size: 1rem; /* 16px for regular body text */
+  font-size: 1rem;
 }
 
-/* Captions (Arial Bold 11px) */
+/* Captions (Arial Bold ~12px) */
 figcaption {
   font-family: 'Arial', sans-serif;
   font-weight: bold;
-  font-size: .6875rem; /* 11px for captions */
+  font-size: .6875rem;
 }
 
 @media (max-width: 780px) {
@@ -75,10 +81,11 @@ figcaption {
   }
 }
 
-main {
+.main-content-container {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
+  max-width: 1440px;
   padding: 20px;
 }
\ No newline at end of file
diff --git a/src/styles/category-nav.css b/src/styles/category-nav.css
index db639b7..ba32733 100644
--- a/src/styles/category-nav.css
+++ b/src/styles/category-nav.css
@@ -13,7 +13,7 @@
     padding: 5px 10px;
     margin-top: 10px;
     box-shadow: var(--shadow-strong);
-    max-width: 325px;
+    max-width: 225px;
     border: solid var(--color-destin-sand);
     border-radius: 10px;
 }
@@ -78,4 +78,10 @@
     border: none;
     box-shadow: none;
     color: inherit;
+}
+
+.categories ul li.active {
+    background-color: var(--color-destin-sand);
+    color: var(--color-dark-green);
+    box-shadow: var(--shadow-medium);
 }
\ No newline at end of file
diff --git a/src/styles/community.css b/src/styles/community.css
index 4d0d5d6..8046c0e 100644
--- a/src/styles/community.css
+++ b/src/styles/community.css
@@ -15,17 +15,47 @@ h1 {
   border: solid var(--color-mid-green);
   border-radius: 15px;
   color: var(--color-dark-green);
-  text-decoration: underline;
   text-shadow: var(--text-outline-heading);
   padding: 5px 100px;
   box-shadow: var(--shadow-subtle); 
 }
 
+.notice, .com-link {
+  font-size: 1.3rem;
+  color: var(--color-dark-green);
+}
+
+.com-link {
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.com-link:hover {
+  color: var(--color-soft-golden);
+}
+
 #calendar-events-container {
+  display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 20px;
+  text-align: center;
+  justify-content: center;
   border: none;
+  background-color: var(--color-soft-golden);
+  border: solid 3px var(--color-destin-sand);
+  border-radius: 15px;
+  padding: 10px;
+    box-shadow: var(--shadow-medium);
+}
+
+.events {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 10px;
 }
 
 .upcoming-events {
@@ -196,7 +226,7 @@ li.enav {
   border: solid var(--color-destin-sand);
   border-radius: 10px;
   margin-top: 20px;
-  margin-botom: 0;
+  margin-bottom: 0;
   margin-left: auto;
   margin-right: auto;
   width: fit-content;
@@ -210,7 +240,7 @@ li.enav {
   align-items: center;
   text-align: center;
   background-color: var(--color-pale-green);
-  border: solid var(--color-dark-green);
+  border: solid var(--color-destin-sand);
   border-radius: 15px;
   padding: 0px 20px 10px 20px;
   width: 95%;
@@ -228,6 +258,8 @@ li.enav {
   border: solid 0.5px var(--color-dark-green);
   border-radius: 10px;
   padding: 2px 20px;
+  box-shadow: var(--shadow-subtle);
+
 }
 
 .event-card h3.workshop {
diff --git a/src/styles/credits.css b/src/styles/credits.css
index 82a2c15..0b379bf 100644
--- a/src/styles/credits.css
+++ b/src/styles/credits.css
@@ -1,6 +1,80 @@
 /* CSS Style Rules for "Credits & Attributions" */
 .credits-container {
     display: flex;
+    font-size: 1.2rem;
+    background-color: var(--color-soft-golden);
+    border: solid 3px var(--color-destin-sand);
+    border-radius: 15px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 30px;
+    padding: 10px;
+    width: auto;
+}
+
+.credits-container a {
+    text-decoration: none;
+    color: var(--color-dark-green);
+    font-weight: 600;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+
+    background-color: var(--color-pale-green);
+    border: solid 3px var(--color-destin-sand);
+    border-radius: 15px;
+    margin: 20px;
+    padding: 20px;
+    gap: 20px;
+
+}
+
+.cred-attr {
+    font-size: 2.25rem;
+    background-color: var(--color-mid-green);
+    color: var(--color-destin-sand);
+    border: solid var(--color-destin-sand);
+    border-radius: 15px;
+    padding: 0 100px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: fit-content;
+    text-align: center;
+    text-shadow: var(--text-outline-heading);
+    box-shadow: var(--shadow-medium);
+    align-self: center;
+}
+
+.video-box, .images-box {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-destin-sand);
+    border: solid 3px var(--color-mid-green);
+    border-radius: 15px;
+}
+
+.video-box {
+    margin-bottom: 30px;
+}
+
+.videos, .images {
+    font-size: 1.85rem;
+    background-color: var(--color-light-teal);
+    color: var(--color-dark-green);
+    border: solid var(--color-destin-sand);
+    border-radius: 15px;
+    padding: 0 50px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    width: fit-content;
+    text-align: center;
+    text-shadow: var(--text-outline-light);
+    box-shadow: var(--shadow-medium);
+    align-self: center;
 }
 
 .intro {
@@ -10,13 +84,22 @@
     text-align: center;
 }
 
+.thanks {
+    font-size: 1.3rem;
+}
+
+.strong-thanks {
+    font-size: 1.5rem;
+}
+
 #tip-desc {
     display: none;
 }
 
-.credits-list {
+.videos-credits-list,
+.images-credits-list {
     list-style: none;
-    margin: 0;
+    margin: 0 30px;
     padding: 0;
 }
 
@@ -25,6 +108,7 @@
     align-items: flex-start;
     gap: 0.5rem;             /* spacing between thumb and text */
     margin-bottom: 1rem;
+    margin: auto;
 }
 
 .thumb {
@@ -64,4 +148,5 @@
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0,0,0,0.15);
     z-index: 9999;
-}
\ No newline at end of file
+}
+
diff --git a/src/styles/footer.css b/src/styles/footer.css
index f726b8a..0a52288 100644
--- a/src/styles/footer.css
+++ b/src/styles/footer.css
@@ -5,6 +5,7 @@
 }
 #footer-nav {
     padding: 0;
+    margin-top: 10px;
 }
 
 nav ul, #footer-nav ul {
@@ -19,7 +20,6 @@ nav ul, #footer-nav ul {
     position: relative;
     list-style-type: none;
     flex-direction: row;
-    margin-top: 20px;
     background-color: var(--color-destin-sand);
     border-radius: 5px;
     width: fit-content; 
@@ -145,4 +145,17 @@ footer div label {
 #copyright {
     text-align: center;
     margin-bottom: 20px;
+    font-size: 1.1rem;
+    color: var(--color-dark-green);
+}
+
+#copyright a {
+    color: var(--color-dark-green);
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-decoration: one;
+}
+
+#copyright a:hover {
+    color: var(--color-destin-white);
 }
\ No newline at end of file
diff --git a/src/styles/gallery.css b/src/styles/gallery.css
index 3ab1203..f874a82 100644
--- a/src/styles/gallery.css
+++ b/src/styles/gallery.css
@@ -8,15 +8,23 @@
 #gallery-top {
   display: flex;
   flex-direction: row;
+  align-items: top;
+  gap: 10px;
+  margin-bottom: 50px;
+}
+
+.left-side {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  width: 95vw;
-  gap: 20px;
 }
 
 #product-carousel-feature {
-  align-items: center;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 #product-carousel-feature h2 {
@@ -29,7 +37,6 @@
   border: solid var(--color-destin-sand);
   border-radius: 10px;
   padding-left: 20px;
-  transform: translateX(30px);
   box-shadow: var(--shadow-medium);
 }
 
@@ -38,27 +45,26 @@
   flex-direction: row;
   align-items: center;
   text-align: center;
-  width: 65vw;
+  width: 60vw;
 }
 
 #product-carousel {
   display: flex;
   flex-direction: row; /* Flexbox layout for horizontal row */
-  gap: 20px; /* Space between product cards */
+  gap: 10px; /* Space between product cards */
   overflow-x: hidden; /* Changed from 'auto' to 'hidden' */
   scroll-behavior: smooth; /* Smooth scrolling for buttons */
   padding: 10px; /* Optional padding inside the carousel */
   white-space: nowrap; /* Prevent wrapping to a new row */
-  transform: translateX(4vw);
-  min-height: 600px;
+  min-height: 550px;
   align-items: center;
 }
 
 .product-card {
   display: flex;
   flex-direction: column;
-  width: 300px;
-  min-width: 300px;
+  width: 250px;
+  min-width: 250px;
   max-height: 350px;
   flex: 0 0 auto; /* Prevent resizing of cards */
   border: 1px solid var(--color-dark-green);
@@ -67,6 +73,7 @@
   margin-left: 20px;
   align-items: center;
   text-align: center;
+  white-space: normal;
   background-color: var(--color-destin-sand);
   box-shadow: var(--shadow-subtle);
   transition: all 0.5s ease-in-out; /* Added for smooth transitions */
@@ -93,10 +100,9 @@
   align-items: center;
 }
 
-/* New style for the centered card */
 .product-card.is-centered {
   width: 340px;
-  transform: scale(1.4);
+  transform: scale(1.2);
   box-shadow: var(--shadow-strong);
   background-color: var(--color-destin-sand);
   white-space: normal;
@@ -105,12 +111,11 @@
 #scroll-left, #scroll-right {
   cursor: pointer;
   background-color: var(--color-dark-green);
-  color: white;
+  color: var(--color-destin-sand);
   border: none;
   padding: 10px;
   border-radius: 50%;
   font-size: 1.5rem;
-  transform: translateX(4.5vw);
 }
 
 @media (max-width: 768px) {
@@ -163,4 +168,8 @@
   color: var(--color-destin-sand); 
   box-shadow: var(--shadow-medium);
 }
-/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */
\ No newline at end of file
+
+.right-side {
+  margin-left: 48px;
+  margin-top: 52px;
+}
\ No newline at end of file
diff --git a/src/styles/header.css b/src/styles/header.css
index 07df3f6..48fb998 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -1,79 +1,70 @@
 /* |--↓-↓-↓ Start Header ↓-↓-↓--| */
 header {
-  padding: 20px;
+  padding-top: 20px;
   background-color: var(--color-light-teal);
-  border-bottom: 3px solid var(--color-mid-green);
   width: 100%;
 }
 
 .header-container {
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
-  align-items: flex-start;
-  max-width: 1400px;
+  align-items: center;
+  max-width: 1440px;
   margin: 0 auto;
   position: relative;
   width: 100%;
-  gap: 20px; /* Adds space between columns */
+  gap: 20px;
 }
 
-/* Left column - Logo */
-.header-left {
-  flex: 0 0 150px; /* Fixed width for logo */
-  position: relative;
-  z-index: 1;
-}
-
-/* Center column - Business name and navigation */
-.header-center {
-  flex: 1;
-  min-width: 0; /* Prevents flex item from overflowing */
-  max-width: 800px;
-  margin: 0;
+.logo-name-cart {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
+  gap: 30px;
 }
 
-/* Right column - Shopping cart */
-.header-right {
-  flex: 0 0 150px; /* Fixed width for shopping cart */
+.logo-box {
   display: flex;
-  justify-content: flex-end;
-  position: relative;
-  z-index: 1;
+  justify-content: flex-start;
 }
 
-/* Logo styles */
-header .logo {
-  width: 100%;
-  max-width: 180px;
-  height: auto;
-}
-
-header .logo img {
+img.logo {
   display: block;
-  width: 100%;
-  height: auto;
-  margin-left: 50px;
+  width: 180px;
+  height: 180px;
   filter: drop-shadow(0 0 2px var(--color-soft-golden)) drop-shadow(0 0 0px var(--color-dark-green));
 }
 
-/* Business name and navigation container */
-.business-name-container {
-  width: 100%;
+.name-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 700px;
+}
+
+.business-name {
+  font-family: 'Georgia', serif;
+  display: block;
+  font-size: 4rem;
+  color: var(--color-dark-green);
+  margin: 10px 0;
   text-align: center;
-  margin-bottom: 15px;
+  text-shadow: var(--text-outline-business);
 }
 
-.nav-container {
-  width: 100%;
+.cart-box {
+  display: flex;
+  justify-content: flex-end;
+  z-index: 1;
+  align-self: flex-end;
 }
 
-/* Shopping cart button */
 #shopping-cart {
-  position: static;
+  position: block;
   padding: 15px;
+  margin-left: 75px;
   border-radius: 10px;
   background-color: var(--color-destin-sand);
   color: var(--color-dark-green);
@@ -82,149 +73,8 @@ header .logo img {
   transition: all 0.3s ease;
   box-shadow: var(--shadow-strong);
   border: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.business-name {
-  font-family: 'Georgia', serif;
-  display: block;
-  font-size: 3.6rem;
-  color: var(--color-dark-green); /* Dark green for the title */
-  margin: 10px 0;
-  text-align: center;
-  text-shadow: var(--text-outline-business);
-}
-
-header p.tagline {
-  font-family: 'Arial', sans-serif;
-  font-size: 1.4rem;
-  color: var(--color-mid-green); /* Pale green for the tagline */
-  margin: 0;
-  text-align: center;
-}
-
-.menu-toggle {
-  display: none;
-}
-
-@media (max-width: 780px) {
-  /* --- Main Header Container --- */
-  header {
-    flex-direction: column;
-    padding: 10px;
-  }
-
-  .header-main {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-
-  .logo-and-title {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-  /* --- Logo --- */
-  header .logo {
-    position: static;
-    width: 100px; /* Smaller logo for compact header */
-  }
-
-  header .logo img {
-    width: 100%;
-  }
-
-  /* --- Business Name --- */
-  .business-name {
-    font-size: 1.8rem; /* Smaller name for mobile */
-    margin: 0;
-  }
-
-  /* --- Header Icons --- */
-  .header-icons {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-  #shopping-cart {
-    position: static;
-    padding: 0;
-    background: none;
-    box-shadow: none;
-    font-size: 1.5rem;
-  }
-
-  .menu-toggle {
-    display: block;
-    background: none;
-    border: none;
-    color: var(--color-dark-green);
-    cursor: pointer;
-  }
-  
-  /* --- Compact Navigation Menu --- */
-  nav {
-    display: none;
-    width: 100%;
-    margin-top: 10px;
-    background-color: var(--color-destin-sand);
-    border-radius: 5px;
-    box-shadow: var(--shadow-subtle);
-  }
-
-  nav.is-open {
-    display: block;
-  }
-
-  nav ul {
-    flex-direction: column;
-    padding: 5px 0; /* Reduced vertical padding */
-  }
-
-  nav ul li a {
-    padding: 10px 0; /* Reduced padding for each link */
-    font-size: 1rem;  /* Smaller font size for links */
-    text-align: center;
-    border: none;
-  }
-
-  nav ul li a.current-page {
-    background: none;
-    text-decoration: underline;
-  }
-}
-
-nav {
-  margin-top: 20px;
-  background-color: var(--color-destin-sand);
-  padding: 10px 20px;
-  border-radius: 5px;
-  width: 100%;
-  box-shadow: var(--shadow-subtle);
-}
-
-#shopping-cart {
-  position: absolute;
-  top: 100px;
-  right: 100px;
-  padding: 20px;
-  border-radius: 10px;
-  background-color: var(--color-destin-sand);
-  color: var(--color-dark-green); 
-  cursor: pointer;
-  z-index: 5;
-  transition: background-color 0.3s ease, color 0.3s ease;
-  box-shadow: var(--shadow-strong);
-  border: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  width: 60px;
+  height: 55px;
 }
 
 #shopping-cart:hover {
@@ -234,16 +84,38 @@ nav {
   box-shadow: var(--shadow-medium);
 }
 
+
+.nav-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+    border-bottom: solid var(--color-dark-green);
+
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  background-color: var(--color-destin-sand);
+  padding: 2px 50px;
+  border-radius: 5px;
+  width: 100%;
+  box-shadow: var(--shadow-subtle);
+}
+
 nav ul {
   display: flex;
+  flex-direction: row;
   justify-content: center;
   list-style: none;
   padding: 0;
   margin: 0;
-}
-
-nav ul {
   gap: 40px;
+  
 }
 
 nav ul li {
@@ -264,7 +136,7 @@ nav ul li {
 }
 
 .community-link {
-  font-size: 0.9em;
+  font-size: 1.2rem;
 }
 
 nav ul li a {
diff --git a/src/styles/index.css b/src/styles/index.css
index d883fa5..bd97658 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -2,8 +2,8 @@
 .main-content-container {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  gap: 50px;
+  align-items: flex-start;
+  gap: 35px;
 }
 
 .promo-item,
@@ -15,14 +15,21 @@
 .promo-item.visible,
 .testimonial-item.visible,
 .featured-item.active {
-  display: block; /* Show visible or active items */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center; /* Show visible or active items */
+}
+
+.testimonial-item:active {
+  
 }
 
 #left-side,
 #category-nav {
   flex: 1;
   box-shadow: var(--shadow-strong);
-  max-width: 325px;
+  max-width: 300px;
 }
 
 #left-side {
@@ -60,8 +67,8 @@
   border-radius: 10px;
   padding: 5px 10px;
   white-space: normal;
-  max-height: 200px;
-  min-height: 200px;
+  max-height: 250px;
+  min-height: 250px;
   max-width: 350px;
   box-shadow: var(--shadow-strong);
   text-align: center;
@@ -93,19 +100,23 @@
 }
 
 .testimonial-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   background-color: var(--color-destin-sand);
   color: var(--color-dark-green);
   border: solid var(--color-dark-green);
   border-radius: 5px;
   padding: 5px 10px;
   white-space: normal;
-  max-height: 200px;
+  max-height: 275px;
   max-width: 350px;
-  min-height: 200px;
+  min-height: 275px;
   box-shadow: var(--shadow-strong);
   text-align: center;
 }
 
+
 /* FEATURED ITEMS */
 #featured-container {
   display: flex;
@@ -125,7 +136,7 @@
   color: var(--color-destin-sand);
   background-color: var(--color-mid-green);
   border: solid var(--color-destin-sand);
-  border-radius: 10px;
+  border-radius: 15px;
   width: fit-content;
   padding: 0 50px;
   margin: 0px;
@@ -170,6 +181,8 @@
   margin: 0 auto;
   margin-bottom: 10px;
   box-shadow: var(--shadow-strong);
+  width: 480px;
+  height: 320px;
 }
 
 #featured-list {
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 55335aa..1ebe9d8 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -25,6 +25,12 @@
     -0.5px 0.5px 1px var(--color-destin-sand),
     0.5px -0.5px 1px var(--color-destin-sand);
 
+    --text-outline-light:
+    0.5px 0.5px .5px var(--color-destin-sand),
+    -0.5px -0.5px .5px var(--color-destin-sand),
+    -0.5px 0.5px .5px var(--color-destin-sand),
+    0.5px -0.5px .5px var(--color-destin-sand);
+
     /* Layered Text Shadow */
     --text-shadow-layered:
     0.5px 0.5px 1px var(--color-dark-green),