From 4803784f4632238d1e1d8a36d61fd7e8f196a54a Mon Sep 17 00:00:00 2001
From: Mohammad Alawieh <76197279+MidoAlawieh@users.noreply.github.com>
Date: Tue, 20 Feb 2024 18:30:15 +0200
Subject: [PATCH] Add files via upload

---
 CSS/Pages/auth.css          | 129 +++++++++++---
 CSS/Pages/contact-us.css    |  52 ++++++
 CSS/Pages/home.css          | 104 ++++++++---
 CSS/Pages/staff-app.css     | 146 ++++++++++++++++
 CSS/Pages/staff-members.css | 339 ++++++++++++++++++++++++++++++++----
 CSS/Pages/store.css         |   1 +
 6 files changed, 688 insertions(+), 83 deletions(-)
 create mode 100644 CSS/Pages/contact-us.css

diff --git a/CSS/Pages/auth.css b/CSS/Pages/auth.css
index b95dcd4..40e0cde 100644
--- a/CSS/Pages/auth.css
+++ b/CSS/Pages/auth.css
@@ -2,18 +2,62 @@
 
 
 form {
-    width: 350px;
-    background-color: var(--overlay);
+    /* width: 350px;
     border-radius: 8px;
-    padding: 10px 0;
+    background-color: var(--overlay); */
+    /* border: 1px solid red; */
+    /* position: relative; */
+}
+
+.card {
+    height: fit-content;
+    width: 100%;
+    position: relative;
+    transition: transform .6s linear;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+}
+
+.back {
+    transform: rotateY(180deg);
+    position: absolute;
+    top: 0;
+}
+
+.front,
+.back {
+    height: 100%;
+    width: 100%;
+    backface-visibility: hidden !important;
 }
-canvas, header {
+
+.card-flipped {
+    transform: rotateY(180deg);
+}
+
+.back {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+
+.back,
+.front {
+    border-radius: 8px;
+    background-color: var(--overlay);
+}
+
+
+
+canvas,
+header {
     position: absolute !important;
     z-index: 0 !important;
     width: 100vw !important;
     height: 100vh !important;
 }
-.back {
+
+.back-button {
     position: absolute;
     z-index: 1;
     top: 30px;
@@ -21,20 +65,23 @@ canvas, header {
     font-size: 18px;
     transition: color .3s ease;
 }
-.back:hover a {
+
+.back-button:hover a {
     color: var(--text);
 }
+
 body {
     width: 100vw;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-image:   url('https://wallpapercave.com/wp/wp7930319.png');
+    background-image: url('https://wallpapercave.com/wp/wp7930319.png');
     background-size: cover;
     background-position: center;
     background-repeat: repeat;
 }
+
 .color {
     position: absolute;
     width: 100vw;
@@ -44,12 +91,14 @@ body {
     z-index: -1;
     background: linear-gradient(to top, var(--background), var(--primary-overlay));
 }
+
 .input-wrapper {
     position: relative;
     display: flex;
     flex-direction: column;
     padding: 20px;
 }
+
 .text-inp {
     background-color: transparent;
     border: 0;
@@ -58,6 +107,7 @@ body {
     position: relative;
     color: white;
 }
+
 .text-inp-lbl {
     font-size: 12px;
     color: var(--text-light);
@@ -67,6 +117,7 @@ body {
     padding-left: 5px;
     transition: .3s ease-in-out;
 }
+
 .line {
     position: absolute;
     content: "";
@@ -77,35 +128,43 @@ body {
     height: 1px;
     background-color: var(--text-light);
 }
+
 .text-inp:focus {
     outline: 0;
     border-color: var(--primary);
 }
-.text-inp:focus + .text-inp-lbl, .text-inp:not(:placeholder-shown) + .text-inp-lbl {
+
+.text-inp:focus+.text-inp-lbl,
+.text-inp:not(:placeholder-shown)+.text-inp-lbl {
     top: 15px;
     font-size: 14px;
     padding-left: 0;
     color: var(--text);
 }
 
-.text-inp:focus ~ .line {
+.text-inp:focus~.line {
     height: 3px;
     background-color: var(--primary);
     box-shadow: 0px 0px 5px 1px var(--primary-overlay);
 }
+
 .button {
     margin-bottom: 5px;
 }
+
 .submit {
     display: flex;
     justify-content: center;
 }
+
 .check-wrapper {
     padding: 20px;
 }
+
 input[type=checkbox] {
     display: none;
 }
+
 .checkmark {
     display: inline-block;
     width: 20px;
@@ -115,12 +174,14 @@ input[type=checkbox] {
     position: relative;
     transition: background-color .15s ease, box-shadow .15s ease;
 }
+
 .check-wrapper {
-    display: flex; 
+    display: flex;
     align-items: center;
     gap: 5px;
 }
-input[type=checkbox] ~ .checkmark::before {
+
+input[type=checkbox]~.checkmark::before {
     position: absolute;
     content: "";
     left: 50%;
@@ -136,43 +197,65 @@ input[type=checkbox] ~ .checkmark::before {
     transition: opacity .1s ease;
     z-index: 2;
 }
-input[type=checkbox]:checked ~ .checkmark::before {
+
+input[type=checkbox]:checked~.checkmark::before {
     opacity: 1;
 }
-input[type=checkbox]:checked ~ .checkmark {
+
+input[type=checkbox]:checked~.checkmark {
     background-color: var(--primary);
     box-shadow: 0px 0px 10px 1px var(--primary);
 }
+
 .check-wrapper label {
     color: var(--text);
     position: relative;
 }
+
 .check-wrapper label a {
     color: var(--primary);
     font-weight: bold;
 }
+
 .switch-link {
-    display: block; /* This makes it a block element, taking up the full width of its container */
-    margin-top: 10px; /* Adjust the margin to control the spacing between the "Submit" button and the link */
-    color: var(--primary-overlay); /* Text color */
-    text-align: center; /* Center the text horizontally */
-    text-decoration: none; /* Remove the underline by default for links */
-    font-weight: bold; /* Make the text bold or adjust font weight as desired */
-    font-size: 14px; /* Adjust the font size as desired */
+    display: block;
+    /* This makes it a block element, taking up the full width of its container */
+    margin-top: 10px;
+    /* Adjust the margin to control the spacing between the "Submit" button and the link */
+    color: var(--primary-overlay);
+    /* Text color */
+    text-align: center;
+    /* Center the text horizontally */
+    text-decoration: none;
+    /* Remove the underline by default for links */
+    font-weight: bold;
+    /* Make the text bold or adjust font weight as desired */
+    font-size: 14px;
+    /* Adjust the font size as desired */
+    cursor: pointer;
 }
 
 .switch-link:hover {
-    color: var(--primary); /* Change color on hover */
+    color: var(--primary);
+    /* Change color on hover */
 }
-.checkmark, .check-wrapper label {
+
+.checkmark,
+.check-wrapper label {
     cursor: pointer;
 }
 
+
+
+
 @media (max-width: 500px) {
     form {
         width: 80%;
     }
+
     .check-wrapper label {
         font-size: 14px
-    };
+    }
+
+    ;
 }
\ No newline at end of file
diff --git a/CSS/Pages/contact-us.css b/CSS/Pages/contact-us.css
new file mode 100644
index 0000000..a15c241
--- /dev/null
+++ b/CSS/Pages/contact-us.css
@@ -0,0 +1,52 @@
+main {
+    padding: 0px var(--side-padding);
+}
+input, textarea {
+    background: var(--background-light);
+    border: none;
+    padding: 20px 25px;
+    font-size: 17px;
+    color: var(--text-light);
+    outline: none;
+    border-radius: 5px;
+    transition: 0.2s;
+}
+input:focus, textarea:focus {
+    border: 1px solid var(--primary);
+    outline: 0;
+    background-color: var(--overlay);
+    box-shadow: 0px 0px 5px 1px var(--primary);
+}
+.contact-input {
+    display: flex;
+    flex-direction: column;
+}
+.inputs > * {
+    width: 100%;
+}
+label {
+    color: var(--text-light);
+    padding: 12px;
+}
+label span {
+    color: var(--primary);
+}
+.pinfo {
+    display: flex;
+    gap: 30px;
+}
+.pinfo > * {
+    width: calc(50% - 15px);
+}
+.button {
+    margin: auto;
+    max-width: 80%;
+    width: 600px !important;
+}
+.button p {
+    color: var(--text);
+    padding: 12px;
+}
+.button:hover p {
+    color: var(--primary);
+}
diff --git a/CSS/Pages/home.css b/CSS/Pages/home.css
index 5748c3b..12d5919 100644
--- a/CSS/Pages/home.css
+++ b/CSS/Pages/home.css
@@ -26,6 +26,9 @@
 .hero-logo img {
     width: 100%;
 }
+.hero-logo, .hero-text {
+    opacity: 0;
+}
 .hero-text h2 {
     font-size: 40px;
     color: var(--text-light);
@@ -50,6 +53,9 @@
     padding: 0px var(--side-padding);
 
 }
+.hero-text .button {
+    margin-bottom: 12px;
+}
 .section-content {
     display: flex;
     align-items: center;
@@ -84,7 +90,7 @@
     bottom: 1px;
     top: 0;
     box-shadow: 0px 0px 5px 2px var(--primary-light);
-    /* animation: content-line 5s ease infinite alternate; */
+    animation: content-line 3s ease-in-out infinite alternate;
 }
 
 .section-text p {
@@ -129,37 +135,83 @@
 .section-video {
     width: 80%;
     margin: 50px auto;
+}
+.section-video video {
+    width: 100%;
+    box-shadow: 0px 0px 20px 0px var(--primary-overlay);
+}
+.why-img {
+    width: 100vw;
     position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.why-img img {
+    width: 50%;
+}
+body {
+    background-color: red;
 }
-.section-video::before {
-    width: calc(100% + 20px);
-    height: calc(100% + 20px);
-    left: -10px;
-    top: -10px;
-    position: absolute;
-    content: "";
-    background-image: linear-gradient(-45deg, var(--primary), var(--secondary));
 
-    z-index: 0;
+.faq .content {
+    background-color: var(--background-light);
+    border-radius: 16px;
+    padding: 20px;
+    /* width: 80%; */
+    margin: auto;
+}
+.faq .section-title h3 {
+    margin: auto;
+}
+.faq-item {
+    padding: 22px;
     border-radius: 12px;
+    border: 1px solid var(--text-light);
+    margin: 40px 0;
+    cursor: pointer;
+}
+.faq .content:hover {
+    box-shadow: 0px 0px 5px 1px var(--primary);
+    background-color: var(--overlay);
+    border: 0;
+}
+.faq-title {
+    color: var(--primary);
+    font-size: 18px;
+    margin-bottom: 5px;
+    position: relative;
 }
-.section-video::after {
-    width: calc(100% + 20px);
-    height: calc(100% + 20px);
-    left: -10px;
-    top: -10px;
+.faq-desc {
+    color: var(--text-light);
+    line-height: 150%;
+    height: 0px;
+    overflow: hidden;
+    transition: height .3s ease;
+}
+
+.faq-title::before {
     position: absolute;
     content: "";
-    background-image: linear-gradient(-45deg, var(--primary), var(--secondary));
-    z-index: -1;
-    border-radius: 12px;
-    filter: blur(20px);
+    width: 0;
+    height: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-25%);
+    transform-origin: top center;
+    border: 10px solid transparent;
+    border-top: 10px solid var(--text-light);
+    transition: transform .3s ease, border-top-color .3s ease;
 }
-.section-video video {
-    width: 100%;
-    box-shadow: 0px 0px 20px 0px var(--primary-overlay);
-    position: relative;
+.faq-open .faq-title::before {
+    transform: rotate(180deg);
+    border-top-color: var(--primary);
 }
+.hero-container {
+    max-width: unset !important;
+}
+
+
+
 
 @keyframes content-line {
     to {
@@ -180,6 +232,12 @@
         margin-top: 50px;
     }
 }
+@media (min-width: 1273px) {
+    .hero-logo {
+        margin-left: auto;
+        margin-right: 0 !important;
+    }
+}
 @media (max-width: 1272px) {
     main {
         /* margin-top: 500px; */
diff --git a/CSS/Pages/staff-app.css b/CSS/Pages/staff-app.css
index 07d6da0..20b9888 100644
--- a/CSS/Pages/staff-app.css
+++ b/CSS/Pages/staff-app.css
@@ -115,4 +115,150 @@ input:focus {
 .button:hover p {
     color: var(--primary);
 
+}
+
+.hidden-input {
+    display: none;
+}
+
+.dev-chosen .dev-input {
+    display: block;
+}
+@import "../variables.css";
+
+
+
+.invalid-inp{
+    position: relative;
+}
+.invalid-inp .position {
+    margin-top: 84px !important;
+}
+.invalid-inp input {
+    margin-top: 70px !important;
+}
+.invalid-inp::before {
+    position: absolute;
+    content: attr(error-message);
+    width: fit-content;
+    padding: 10px 20px;
+    color: #FF3333   ;
+    top: 30px;
+    /* border: 1px solid #FF3333 ; */
+    border-radius: 8px;
+    /* background-color: #FF333380  ; */
+}
+.position , input, .position .options * {
+    background: var(--background-light);
+    border: none;
+    padding: 20px 25px;
+    font-size: 17px;
+    color: var(--text-light);
+    outline: none;
+    border-radius: 5px;
+    transition: 0.2s;
+}
+.position .options * {
+    background-color: var(--background-lighter);
+}
+.selected {
+    background-color: var(--primary) !important;
+}
+.position {
+    cursor: pointer;
+    margin-bottom: 12px;
+
+}
+.position p {
+    display: flex;
+    justify-content: space-between;
+}
+.options {
+    height: 0;
+    overflow: hidden;
+    transition: height .3s ease;
+}
+.options.open {
+    /* height: auto; */
+    margin-top: 15px;
+    border-radius: 10px;
+}
+.options.open * {
+    border-radius: 0;
+}
+.options.open *:hover {
+    background-color: var(--primary);
+}
+.position-dropdown {
+    padding-top: 12px;
+}
+.position {
+    margin-top: 12px;
+}
+
+main {
+    padding: 0px var(--side-padding);
+}
+.staff-input {
+    display: flex;
+    flex-direction: column;
+}
+/* input {
+    background-color: var(--background-light);
+    color: var(--text-light);
+    border: 0;
+    padding: 20px 25px;
+    border-radius: 8px;
+    font-size: 16px;
+    margin-bottom: 12px;
+} */
+label {
+    color: var(--text-light);
+    padding: 12px;
+}
+label span {
+    color: var(--primary);
+}
+input:focus {
+    border: 1px solid var(--primary);
+    outline: 0;
+    background-color: var(--overlay);
+    box-shadow: 0px 0px 5px 1px var(--primary);
+}
+.button {
+    margin-left: auto;
+    margin-right: auto;
+    width: 200px !important;
+}
+.button p {
+    color: var(--text);
+    padding: 12px; 
+}
+.button:hover {
+    border: 1px solid var(--primary);
+    background-color: transparent;
+}
+.button:hover p {
+    color: var(--primary);
+
+}
+
+.hidden-input {
+    display: none;
+}
+
+.dev-chosen .dev-input {
+    display: flex;
+}
+.builder-chosen .builder-input {
+    display: flex;
+}
+.content-chosen .content-input {
+    display: flex;
+}
+.creator-chosen .creator-input {
+    display: flex;
+}
+.youtuber-chosen .youtuber-input {
+    display: flex;
 }
\ No newline at end of file
diff --git a/CSS/Pages/staff-members.css b/CSS/Pages/staff-members.css
index 7eed8cc..56289b4 100644
--- a/CSS/Pages/staff-members.css
+++ b/CSS/Pages/staff-members.css
@@ -1,62 +1,327 @@
 @import '../variables.css';
-@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Rubik:wght@400&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Rubik:wght@300;400;500;600&display=swap');
 
+.hero .hero-logo {
+    width: 60%;
+    margin: auto;
+}
+.hero-logo img {
+    width: 100%;
+}
+main .section-title {
+    font-family: 'Jesefin Sans' !important;
+}
 main {
-    padding: 10px var(--side-padding);
+    margin-top: 100px;
+    padding: 0 var(--side-padding);
 }
-.members {
+.staff-content {
+    display: flex;
+    gap: 25px;
+}
+.side-one {
+    width: 25%
+}
+.staff-categories, .recent-customers {
     width: 100%;
+    border-radius: 12px;
     background-color: var(--background-light);
+    padding: 22px;
+    height: fit-content;
+}
+
+.staff-categories:hover {
+    background-color: var(--overlay);
+    border: 1px solid var(--primary);
+}
+.staff-categories:hover .title {
+    color: var(--primary);
+}
+.staff-categories ul {
+    display: flex;
+    flex-direction: column;
+}
+.staff-categories ul li {
+    position: relative;
+    display: block;
+    padding: 20px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    color: var(--text-light);
+    cursor: pointer;
+}
+.staff-categories ul li::before {
+    position: absolute;
+    content: "";
+    height: 0px;
+    opacity: 1;
+    transition: height .3s ease;
+}
+.staff-categories ul li:hover::before {
+    position: absolute;
+    content: "";
+    width: 5px;
+    height: 80%;
     border-radius: 8px;
-    padding: 10px 20px
+    background-color: var(--primary-light);
+    top: 50%;
+    left: -10px;
+    transform: translateY(-50%);
+    opacity: 1;
 }
-.members h2 {
-    font-size: 30px;
-    margin-bottom: 12px;
+.staff-categories .active-nav {
+    position: relative;
+}
+.staff-categories .active-nav::before {
+    position: absolute;
+    content: "";
+    width: 5px;
+    height: 80%;
+    border-radius: 8px;
+    background-color: var(--primary);
+    top: 50%;
+    left: -10px;
+    transform: translateY(-50%);
+    box-shadow: 0px 0px 10px 1px var(--primary-light);
+}
+.staff-categories ul li:hover {
+    color: var(--accent);
 }
-.members .container {
+.staff-categories .title, .side-one .title {
+    color: var(--text-light);
+    font-size: 20px;
+    margin-bottom: 22px;
+}
+.staff-lists li {
+    font-size: 18px;
+}
+.customer-heads {
     display: flex;
-    /* justify-content: space-btween; */
-    gap: 40px;
     flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
 }
-.members > * {
-    margin: 25px 0;
+.head {
+    position: relative;
+    width: fit-content;
 }
-.member {
-    min-width: 300px;
-    width: 30%;
-    height: 100px;
-    background-color: var(--background-lighter);
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    overflow: hidden;
-    padding: 0 20px;
+.head::before {
+    position: absolute;
+    content: attr(username);
+    left: 50%;
+    color: var(--primary);
+    padding: 12px;
+    background-color: var(--background);
     border-radius: 6px;
+    opacity: 0;
+    transform: translate(-50%, -50px);
+    pointer-events: none;
+    transition: opacity .3s ease;
 }
-.member-name h2 {
-    font-size: 22px;
+.head:hover::before {
+    pointer-events: all;
+    opacity: 1;
 }
-.member-img {
-    width: 75px;
-    transform: translateY(30%);
+.mobile-staff .title {
+    position: relative;
+    margin-left: 30px;
+    cursor: pointer;
+}
+.mobile-staff {
+    display: none;
+}
+.mobile-staff .title::before {
+    position: absolute;
+    content: "";
+    width: 0;
+    height: 0;
+    border: 10px solid transparent;
+    border-top: 10px solid var(--text-light);
+    bottom: 50%;
+    left: -0px;
+    transform: translateY(75%);
+    transition: transform .3s ease, border-top-color .3s ease;
+}
+.mobile-staff .staff-open::before {
+    transform: rotate(180deg);
+    border-top-color: var(--primary);
+}
+.staff-info {
+    width: 75%;
+    background-color: var(--background-light);
+    color: var(--text-light);
+    padding: 22px;
+    border-radius: 12px;
+}
+.staff-info > .title {
+    font-size: 32px;
+    margin-bottom: 22px;
+}
+.staff-info p {
+    margin-bottom: 20px;
+    line-height: 150%;
+}
+.staff-info .content .title {
+    font-size: 25px;
+    margin-bottom: 12px;
+}
+.intro-title,
+.help-title,
+.refund-title {
+    color: transparent;
+    background-image: linear-gradient(to right, var(--accent), var(--primary));
+    -webkit-background-clip: text; /* For Safari */
+    background-clip: text;
+}
+.help-title {
+    background-image: linear-gradient(to right, #50f000, #00ff5f);
+    -webkit-background-clip: text;
+    background-clip: text;
+}
+.refund-title {
+    background-image: linear-gradient(to right, #f05000, #ff005f);
+    -webkit-background-clip: text;
+    background-clip: text;
+}
+.staffs {
+    z-index: 0;
+    width: 80%;
+    background-color: var(--background-light);
+    border-radius: 12px;
 }
-.member-img img {
+.staff-roles {
     width: 100%;
+    color: var(--text-light);
+    padding: 22px;
 }
-.owners h2 {
-    color: #bf0133;
+.hidden {
+    display: none;
 }
-.admins h2 {
-    color: #01bfa6;
+/* Add a CSS class for fading */
+.fade {
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+}
+
+/* Add a CSS class for showing */
+.show {
+    opacity: 1;
+}
+
+.staff-roles .content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 20px;
+}
+.staff-roles .title {
+    color: var(--primary);
+    font-size: 28px;
+    text-align: center;
+    margin-bottom: 25px;
+}
+.staff-member {
+    width: 25%;
+    border: 1px solid var(--primary);
+    aspect-ratio: 10 / 7;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 12px;
+    background-color: var(--overlay);
+    position: relative;
+}
+.staff-member:hover {
+    box-shadow: 0px 0px 20px 1px var(--primary);
+    background-color: var(--primary-overlay);
 
 }
 
-@media (max-width: 879px) {
-    .member {
+.staff-member:hover::before {
+    position: absolute;
+    content: attr(staff-name);
+    top: -59px;
+    background-color: var(--background);
+    padding: 10px;
+    color: var(--primary);
+    border-radius: 8px;
+}
+.staff-member:hover::after {
+    position: absolute;
+    content: "";
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+    border-top: 15px solid var(--background);
+    border-bottom: 0px;
+    top: -20px;
+}
+.staff-member img {
+    width: 50%
+}
+
+
+@media (max-width: 1515px) {
+    .staff-roles .content {
+        justify-content: space-evenly;
+        gap: 18px;
+    }
+}
+@media (max-width: 1272px) {
+    .hero .hero-logo {
+        width: 80%
+    }
+}
+@media (max-width: 1092px) {
+    .staff-roles .content {
+        flex-direction: row;
+    }
+}
+@media (max-width: 992px) {
+    main {
+        margin-top: 150px;
+    }
+    .mobile-staff {
+        display: block;
+        padding-bottom: 0;
+    }
+    .staff-categories:not(.mobile-staff) {
+        display: none;
+    }
+    .mobile-staff .staff-categories {
+        display: block; /* Add this line */
+    }
+    .staff-content {
+        flex-direction: column;
+    }
+    .staff-member {
+        width: 80%;
+    }
+    .staff-content > * {
         width: 100%;
-        gap: 40px;
     }
-}
\ No newline at end of file
+    .mobile-staff {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    .mobile-staff ul {
+        height: 0;
+        transition: all .6s ease;
+        overflow: hidden;
+        padding-left: 25px;
+    }
+    .mobile-staff .title {
+        padding-left: 30px;
+    }
+    .mobile-staff li::before {
+        left: 0px !important;
+    }
+}
+
+@media (max-width: 760px) {
+    .staff-roles .content {
+        flex-direction: column;
+        align-items: center;
+    }
+
+}
diff --git a/CSS/Pages/store.css b/CSS/Pages/store.css
index dc187a0..a960a77 100644
--- a/CSS/Pages/store.css
+++ b/CSS/Pages/store.css
@@ -354,6 +354,7 @@ main {
     background-color: var(--overlay);
     width: 100%;
     height: 100%;
+    z-index: 2
 }
 .item::after {
     width: 95%;