Test

_sass/_base.scss

@@ -2,52 +2,54 @@
 
 // Body
 body {
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    font-size: 16px;
-    line-height: 1.6;
-    color: #333;
-    background-color: #fff;
+  font-family: $fontFamily; // Using variable from _variables.scss
+  font-size: $baseFontSize; // Using variable from _variables.scss
+  line-height: 1.5;
+  color: $textColor; // Using variable from _variables.scss
+  background-color: $backgroundColor; // Using variable from _variables.scss
+}
+
+// Links
+a {
+  color: $linkColor; // Updated to use $linkColor from _variables.scss
+  text-decoration: none;
+
+  &:hover {
+    color: $linkHoverColor; // Updated to use $linkHoverColor from _variables.scss
+    text-decoration: underline;
   }
-
-  // Headings
-  h1, h2, h3, h4, h5, h6 {
-    color: #333;
-    margin-top: 1.5rem;
-    margin-bottom: 1rem;
-  }
-
-  h1 { font-size: 2.5rem; }
-  h2 { font-size: 2rem; }
-  h3 { font-size: 1.75rem; }
-  h4 { font-size: 1.5rem; }
-  h5 { font-size: 1.25rem; }
-  h6 { font-size: 1rem; }
-
-  // Paragraphs
-  p {
-    margin-top: 0;
-    margin-bottom: 1rem;
-  }
-
-  // Links
-  a {
-    color: #007bff;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  // Lists
-  ul, ol {
-    padding-left: 2rem;
-    margin-top: 0;
-    margin-bottom: 1rem;
-  }
-
-  li {
-    margin-bottom: 0.5rem;
-  }
-
-  // Additional base styles as needed...
+}
+
+// Headings
+h1, h2, h3, h4, h5, h6 {
+  color: $darkColor; // Using variable from _variables.scss
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  font-family: $headingFontFamily; // Using variable from _variables.scss
+}
+
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.75rem; }
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.25rem; }
+h6 { font-size: 1rem; }
+
+// Paragraphs
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+// Lists
+ul, ol {
+  padding-left: 2rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+}
+
+// Additional base styles as needed...

_sass/_footer.scss

@@ -1,33 +1,64 @@
 // _footer.scss
 
 .footer {
-    background-color: $footerBgColor; // Variable from _variables.scss
-    color: $footerTextColor;
-    padding: 2rem 0;
-
-    .footer-links {
-      a {
-        color: $footerLinkColor;
-        &:hover {
-          color: darken($footerLinkColor, 15%);
-        }
+  background-color: $footerBgColor; // Variable from _variables.scss
+  color: $footerTextColor;
+  padding: 2rem;
+  font-size: 0.9rem;
+
+  .footer-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+
+      @media (max-width: $breakpoint-md) {
+          flex-direction: column;
+          align-items: flex-start;
       }
+  }
+
+  .footer-links {
+      list-style: none;
+      padding: 0;
 
-      // List styles, if footer links are in list format
       li {
-        margin-bottom: 0.5rem;
+          margin-bottom: 0.5rem;
+
+          a {
+              color: $footerLinkColor;
+              text-decoration: none;
+
+              &:hover {
+                  color: darken($footerLinkColor, 10%);
+                  text-decoration: underline;
+              }
+          }
       }
-    }
+  }
+
+  .social-links {
+      display: flex;
+      align-items: center;
 
-    // Additional styling for other footer elements
-    .social-links {
       i {
-        color: #fff;
-        margin-right: 10px;
+          color: $footerTextColor;
+          margin-right: 15px;
+          font-size: 1.2rem;
+
+          &:hover {
+              color: $primaryColor; // From _variables.scss
+          }
+      }
+  }
+
+  .footer-credits {
+      margin-top: 1rem;
+      text-align: center;
+      width: 100%;
 
-        &:hover {
-          color: $primaryColor; // From _variables.scss
-        }
+      p {
+          margin-bottom: 0;
       }
-    }
   }
+}

_sass/_header.scss

@@ -1,19 +1,42 @@
 // _header.scss
 
 .header {
-    background-color: $headerBgColor; // Variable from _variables.scss
-    padding: 1rem 0;
+  background-color: $headerBgColor; // Variable from _variables.scss
+  padding: 1rem 0;
+  border-bottom: 1px solid $lightGray; // Adds a bottom border to the header
 
-    .branding {
+  .branding {
       a {
-        color: $headerTextColor;
-        font-size: 1.5rem;
-        font-weight: bold;
-        text-decoration: none;
+          color: $headerTextColor;
+          font-size: 1.5rem;
+          font-weight: bold;
+          text-decoration: none;
+
+          &:hover {
+              color: darken($headerTextColor, 10%);
+          }
       }
-    }
+  }
+
+  .navigation {
+      display: flex;
+      justify-content: flex-end; // Aligns navigation items to the right
+      list-style: none; // Removes list styling
+      margin: 0; // Removes default margin
 
-    .navigation {
-      // Navigation styles...
-    }
+      li {
+          margin-left: 20px; // Spacing between navigation items
+
+          a {
+              color: $textColor;
+              text-decoration: none;
+              font-weight: normal;
+
+              &:hover {
+                  color: $primaryColor;
+                  text-decoration: underline;
+              }
+          }
+      }
   }
+}

_sass/_mixins.scss

@@ -1,7 +1,5 @@
 // _mixins.scss
 
-// _mixins.scss
-
 // Mixin for Flexbox Centering
 @mixin flex-center {
   display: flex;
@@ -30,17 +28,38 @@
   }
 }
 
+// Mixin for Box Shadow
 @mixin box-shadow($shadow) {
     -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
     box-shadow: $shadow;
   }
 
-  @mixin transition($property, $duration, $timing-function) {
-    -webkit-transition: $property $duration $timing-function;
-    -moz-transition: $property $duration $timing-function;
-    -o-transition: $property $duration $timing-function;
-    transition: $property $duration $timing-function;
-  }
+// Mixin for CSS Transitions
+@mixin transition($property, $duration, $timing-function) {
+  -webkit-transition: $property $duration $timing-function;
+  -moz-transition: $property $duration $timing-function;
+  -o-transition: $property $duration $timing-function;
+  transition: $property $duration $timing-function;
+}
+
+// Mixin for Border Radius
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+// Mixin for Text Truncate
+@mixin text-truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+// Mixin for Background Gradient
+@mixin background-gradient($startColor, $endColor) {
+  background: linear-gradient(to right, $startColor, $endColor);
+}
 
-  // More mixins as needed...
+// More mixins as needed...

_sass/_responsive.scss

@@ -0,0 +1,33 @@
+// _responsive.scss
+
+// Small devices (landscape phones, less than 768px)
+@media (max-width: $breakpoint-sm) {
+    .navbar {
+      // Custom styles for mobile nav
+    }
+
+    .hero-section {
+      padding: 2rem 1rem;
+    }
+  }
+
+  // Medium devices (tablets, 768px and up)
+  @media (min-width: $breakpoint-md) {
+    .sidebar {
+      // Styles for sidebar on tablet
+    }
+  }
+
+  // Large devices (desktops, 992px and up)
+  @media (min-width: $breakpoint-lg) {
+    .gallery-item {
+      // Styles for gallery items on desktop
+    }
+  }
+
+  // Extra large devices (large desktops, 1200px and up)
+  @media (min-width: $breakpoint-xl) {
+    .container {
+      max-width: 1140px;
+    }
+  }