(F) Layout changes

Clinics.Frontend/src/app/components/shared/template/footer/footer.component.css

@@ -11,6 +11,7 @@
     border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
     font-size: 14px;
     position: relative;
+    background-color: #f7ffff;
 }
 
 .footer .footer-top {

Clinics.Frontend/src/app/components/shared/template/footer/footer.component.html

 <div class="custom-child">
-    <footer id="footer" class="footer light-background">
+    <footer id="footer" class="footer">
         <div class="container footer-top">
             <div class="row gy-4 justify-content-center">
                 <div class="col-lg-4 col-md-6 footer-about mx-auto">

Clinics.Frontend/src/app/components/shared/template/header/header.component.css

@@ -62,7 +62,7 @@
     color: var(--default-color);
     transition: all 0.5s;
     z-index: 997;
-    background-color: var(--background-color);
+    background-color: #f7ffff;
 }
 
 /* .header .topbar {

Clinics.Frontend/src/app/components/shared/template/layout/layout.component.css

@@ -50,7 +50,7 @@ app-footer {
 ::ng-deep .section {
     color: var(--default-color);
     background-color: var(--background-color);
-    padding: 60px 0;
+    padding: 30px 0;
     scroll-margin-top: 72px;
     overflow: clip;
 }
@@ -62,7 +62,7 @@ app-footer {
 
 ::ng-deep .section-title h2 {
     font-size: 32px;
-    font-weight: 500;
+    font-weight: 700;
     margin-bottom: 20px;
     padding-bottom: 20px;
     position: relative;
@@ -98,4 +98,16 @@ app-footer {
     margin-bottom: 0;
 }
 
-/* #endregion */
\ No newline at end of file
+::ng-deep .custom-title {
+    width: fit-content;
+    padding-bottom: 0.3em;
+    border-bottom: 2px solid var(--accent-color);
+    color: var(--heading-color);
+    margin: auto;
+}
+
+::ng-deep .custom-title h2 {
+    font-weight: 700;
+}
+
+/* #endregion */

Clinics.Frontend/src/app/components/shared/template/layout/layout.component.html

@@ -3,6 +3,6 @@
 
     <router-outlet></router-outlet>
     
-    <app-footer style="background-color: var(--background-color);"></app-footer>
+    <app-footer></app-footer>
 </div>
 

Clinics.Frontend/src/styles/templateConstants.css

@@ -7,8 +7,8 @@
 
 /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
 :root {
-    --background-color: #f7ffff;
-    /* --background-color: #ffffff; */
+    /* --background-color: #f7ffff; */
+    --background-color: #ffffff;
     /* Background color for the entire website, including individual sections */
     --default-color: #444444;
     /* Default color used for the majority of the text content across the entire website */