book buttons added to services

TODO

@@ -1,2 +1,3 @@
 address missing star unicode on all browser
-address disappearing content when inner service dropdown is closed
+thicken book button border
+instead of classes for service sizes, use JS to go over service cards and round them up to standardize similar length cards? idk. otherwise will need to pass class in with JSON

services.html

@@ -60,15 +60,16 @@
       }
       #downArrow {
         transform: rotate(-45deg);
-        height: 20px;
+        height: 30px;
-        width: 20px;
+        width: 30px;
-        border-left: solid 2px var(--gold);
-        border-bottom: solid 2px var(--gold);
-      }
-      #downArrow:hover {
         border-left: solid 3px var(--gold);
         border-bottom: solid 3px var(--gold);
       }
+      #downArrow:hover {
+        /** border-left: solid 3px var(--gold);
+        border-bottom: solid 3px var(--gold);*/
+        transform: rotate(-45deg) scaleX(110%) scaleY(110%);
+      }
 
       #categoryContainer {
         width: 90%;
@@ -99,11 +100,49 @@
       .service {
         display: flex;
         flex-direction: column;
+        align-items: center;
 
         height: 100%;
 
         width: 40rem;
       }
+      /** "BOOK NOW" buttons */
+      .service button {
+        height: 5rem;
+        min-width: 100%;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        background-color: var(--black);
+        color: var(--gold);
+
+        border: 1px solid var(--dark-gold);
+        border-radius: 5rem;
+
+        padding: 2rem 1rem;
+        margin: 2rem 0;
+
+        font-size: 1.5rem;
+        font-weight: bold;
+        text-decoration: none;
+        transition: 0.3s ease;
+      }
+      .service button:hover {
+        cursor: pointer;
+        box-shadow: 0px 0px 10px var(--gold);
+        font-size: 1.75rem;
+      }
+      .service button:active {
+        background-color: var(--gold);
+      }
+      /** booking link */
+      .service a {
+        display: block;
+        width: 50%;
+        text-decoration: none;
+      }
 
       .card {
         padding: 3rem;
@@ -571,19 +610,22 @@
             target.insertAdjacentHTML(
             "beforeend",
             `
-            <a class="service" href=${service.url} target="_blank">
+              <div class="service">
-              <div class="card">
+                <div class="card">
-                <div class="card-head">
+                  <div class="card-head">
-                  <h2>${service.title}</h2>
+                    <h2>${service.title}</h2>
-                  <p>${service.subtitle}</p>
+                    <p>${service.subtitle}</p>
-                </div>
+                  </div>
-                <div class="card-body">
+                  <div class="card-body">
-                  ${leftSide  ? leftSide : ""}
+                    ${leftSide  ? leftSide : ""}
-                  ${rightSide ? rightSide : ""}
+                    ${rightSide ? rightSide : ""}
+                  </div>
                 </div>
+                <a href=${service.url} target="_blank" class="book-link">
+                <button>BOOK</button>
+                </a>
               </div>
-            </a>
+            `);
-          `);
           }
         }
       }