merging branches (#4)

* Home button not translating

* realized the zindex was incorrect therefore causing the transform property to not work on home__button

* adding swiper JS

* swiper js installed everything working well :)

* Parallax added successfully

assets/css/styles.css

@@ -218,6 +218,68 @@ transition: transform .4s;
 transform:translateX(.5rem);
 }
 
+
+.home__social{
+  position: absolute;
+  z-index: var(--z-tooltip);
+  left: 1.5rem;
+  bottom:4rem;
+  display: grid;
+  row-gap: 1.5rem;
+}
+
+.home__social-link{
+  color: var(--white-color);
+  font-size: 1.5rem;
+}
+
+/* Swiper class */
+  .swiper{
+    height: 100vh;
+  }
+
+.swiper-pagination{
+  width: initial;
+  height: max-content;
+  top: 6rem;
+  left: initial;
+  right: 4rem;
+  font-size: var(--big-font-size);
+  font-weight: var(--font-semi-bold);
+  display: flex;
+  column-gap: .25rem;
+  align-items: center;
+}
+
+.swiper-pagination-total{
+  font-size: var(--normal-font-size);
+
+}
+.swiper-button-prev::after,
+.swiper-button-next::after{
+  content: '';
+}
+.swiper-button-prev,
+.swiper-button-next{
+  font-size: 2rem;
+  color: var(--white-color);
+  width: initial;
+  height: initial;
+  position: initial;
+  outline: none;
+}
+
+.swiper-navigation{
+  position: absolute;
+  z-index: var(--z-tooltip);
+  height: max-content;
+  bottom: 4rem;
+  right: 1.5rem;
+  display: flex;
+  column-gap: 2.5rem;
+}
+
+
 .home__social{
   position: absolute;
   z-index: var(--z-tooltip);