@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Poppins:wght@400;700&display=swap");
:root {
  --white: rgba(255, 255, 255, 1);
  --white2: rgba(255, 255, 255, 0.95);
  --white3: rgba(255, 255, 255, 0.7);
  --white4: rgba(255, 255, 255, 0.5);
  --white5: rgba(255, 255, 255, 0.25);
  --white6: rgba(255, 255, 255, 0.05);
  --black: rgba(0, 0, 0, 1);
  --black2: rgba(0, 0, 0, 0.95);
  --black3: rgba(0, 0, 0, 0.7);
  --black4: rgba(0, 0, 0, 0.5);
  --black5: rgba(0, 0, 0, 0.25);
  --black6: rgba(0, 0, 0, 0.08);
  --shade1: rgb(252, 252, 252);
  --shade2: rgb(206, 206, 206);
  --shade3: rgb(182, 180, 180);
  --shade4: rgb(129, 129, 129);
  --latte1: rgba(166, 153, 132);
  --latte2: rgba(186, 160, 132);
  --latte3: rgba(216, 197, 174);
  --latte3: rgba(239, 232, 219);
  --latte4: rgb(249, 249, 249);
  --primary1: rgb(221, 182, 7);
  --primary2: rgba(224, 216, 108, 0.5);
  --primary3: rgb(61, 56, 28);
  --primary4:rgb(29, 26, 13);
}

html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

.link {
  text-decoration: none;
  color: var(--black);
}

body {
  font-family: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: scroll;
  background: linear-gradient(145deg, var(--shade1) 0%, var(--shade2) 100%);
  transition: background-color 0.8s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
  font-weight: lighter;
  text-decoration: none;
}

.btn {
  color: var(--primary1);
  border-radius: 4px;
  padding: 0.2rem;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--black);
  color: var(--white);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--white) inset !important; /* Change the background color */
}

::-webkit-scrollbar {
  width: 8px;
  height: 2px;
  border-radius: 2px;
}

::-webkit-scrollbar-track {
  background: var(--white2);
  padding: 5px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  height: 30%;
  background: var(--primary4);
  border-radius: 10px;
}

@keyframes pan-image {
  0% {
    background-size: 100%;
  }
  50% {
    background-size: 130%; /* Zoomed in further */
  }
  100% {
    background-size: 100%;
  }
}
@keyframes colorChange {
  0% {
    background-color: var(--white);
  }
  50% {
    background-color: var(--primary1);
  }
  100% {
    background-color: var(--white);
  }
}
@keyframes logoChange {
  0% {
    filter: invert(0);
  }
  50% {
    filter: invert(100);
  }
  100% {
    filter: invert(0);
  }
}
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes splash {
  0% {
    background-size: 110%;
  }
  50% {
    background-size: 120%;
  }
  100% {
    background-size: 110%;
  }
}
@keyframes bg_pan {
  0% {
    background: var(--shade2);
  }
  50% {
    background: var(--shade3);
  }
  100% {
    background: var(--shade2);
  }
}
@keyframes splash_zoom {
  0% {
    background-size: 100%;
  }
  50% {
    background-size: 115%; /* Zoomed in further */
  }
  100% {
    background-size: 100%;
  }
}
@keyframes color_drift {
  0% {
    background-position: 0 center; /* Start position */
  }
  50% {
    background-position: 100% center; /* Transition to the right */
  }
  100% {
    background-position: 0 center; /* Back to start position */
  }
}
.preloader_super {
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  z-index: 100;
}

.messagecont {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100vw;
  position: fixed;
  margin-top: 1.8rem;
  z-index: 1000;
  background-color: transparent;
}

.messages {
  background-color: var(--white);
  border-radius: 10px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  filter: drop-shadow(2px 2px 2px var(--black2));
  color: var(--black);
}

.messages.hide {
  display: none;
}

.messages li {
  color: var(--black);
  list-style: none;
}

.messageclose {
  cursor: pointer;
  padding-left: 0.5rem;
  transition: 0.3s;
}

.messageclose:hover {
  transform: scale(1.1);
}

.base_super {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap: 0.5rem;
}

@keyframes color_drift {
  0% {
    background-position: 0 center; /* Start position */
  }
  50% {
    background-position: 100% center; /* Transition to the right */
  }
  100% {
    background-position: 0 center; /* Back to start position */
  }
}
.credentials_super {
  width: 100vw;
  height: 100vh;
  overflow-x: scroll;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  transition: 0.2s;
  transform: translateZ(0);
}

.splash_super {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(45deg, var(--black) 0%, var(--primary1) 100%);
  animation: color_drift 10s linear infinite;
  background-position: 0vw center;
  background-size: 800%;
  position: relative;
  z-index: 1;
}

.splash_sub {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  background-position: center;
  animation: splash 15s linear infinite;
  margin: 0;
  width: 115%;
  height: 100%;
  z-index: 100;
  overflow: hidden;
  transition: 0.5s;
  background-color: black;
  /* Apply mask */
  -webkit-mask-image: url("/static/assets/splash/paint1.png");
          mask-image: url("/static/assets/splash/paint1.png");
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  mask-mode: alpha;
  cursor: pointer;
  z-index: 2;
  position: absolute;
  transform: translateZ(0);
}

@-moz-document url-prefix() {
  .splash_sub {
    animation: none !important;
  }
  .splash_sub.hover {
    mask-image: none;
    mask-size: none;
    width: 100%;
    background-image: url("/static/assets/splash/1.jpg");
  }
}
.splash_sub.hover {
  animation: splash_zoom 8s linear infinite;
  -webkit-mask-size: 600%;
          mask-size: 600%;
  width: 100%;
}

.splash_overlay {
  -webkit-backdrop-filter: blur(0);
          backdrop-filter: blur(0);
  background-color: transparent;
  width: 100%;
  height: 100%;
  position: relative;
  transition: 0.2s;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  gap: 1.5rem;
}

.splash_overlay:hover {
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  background-color: var(--black5);
  width: 100%;
  height: 100%;
  position: relative;
}

.credentials_logo {
  height: 8vw;
  filter: invert(100);
  transition: 0.2s;
  cursor: pointer;
}

.credentials_logo:hover {
  transform: scale(1.02);
}

.form_super {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.splash_line {
  height: 4rem;
  width: 1px;
  background-color: var(--white);
  border-radius: 2px;
}

.splash_cont {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white);
  gap: 1rem;
  height: 5rem;
}

.callout {
  font-weight: 100;
  letter-spacing: 0.1rem;
}

@media (max-width: 701px) {
  .splash_super {
    width: 100%;
    height: 80vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0;
  }
  .splash_sub {
    width: 100%;
    -webkit-mask-size: 120%;
            mask-size: 120%;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
  .splash_overlay {
    flex-direction: column;
    gap: 0.5rem;
  }
  .credentials_logo {
    height: 5rem;
    filter: invert(100);
    transition: 0.2s;
    cursor: pointer;
  }
  .splash_line {
    display: none;
  }
  .form_super {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1rem;
  }
}
.credentialform {
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.loginbox {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white2);
  border-radius: 1rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  transition: 0.2s;
  width: 60%;
}

.loginbox:hover {
  background-color: var(--white);
}

.loginbox_splitter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.loginbox_half {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white2);
  border-radius: 1rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  transition: 0.2s;
  width: 28.5%;
}

.loginbox_half:hover {
  background-color: var(--white);
}

.login-input {
  display: block;
  transition: 0.5s;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  outline: none;
  opacity: 75%;
  text-indent: 5px;
  border: none;
  font-size: medium;
  width: 100%;
  background-color: transparent;
}
.login-input select {
  padding: 0.4rem;
  border-radius: 7px;
  text-transform: capitalize;
}
.login-input select option {
  text-transform: capitalize;
}

.login-input:focus {
  opacity: 100%;
  outline: none;
  filter: none;
  background-color: var(--white);
}

.loginicon {
  height: 1.5rem;
  transition: 0.2s;
  cursor: pointer;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  opacity: 60%;
}
.loginicon img {
  height: 100%;
}

.loginicon:hover {
  transform: scale(1.05);
  opacity: 85%;
}

#password-toggle-checkbox {
  display: none;
}

.eye-icon {
  height: 1.2rem;
  padding-right: 0.8rem;
  cursor: pointer;
  transition: 0.2s;
  opacity: 70%;
}

.eye-icon:hover {
  transform: scale(1.05);
  opacity: 85%;
}

.eye_space {
  height: 1.2rem;
  padding-right: 0.8rem;
  cursor: pointer;
  transition: 0.2s;
  opacity: 0;
}

.credential_link {
  text-decoration: none;
  color: var(--black);
}
.credential_link span {
  color: var(--primary1);
}

.gender_select {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 1001px) {
  .loginbox {
    width: 80%;
  }
  .loginbox_half {
    width: 38%;
  }
}
.login_button_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--primary1);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
  color: var(--primary3);
  transition: 0.2s;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid var(--primary1);
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0.1rem;
}
.login_button_1 h3 {
  text-transform: uppercase;
  color: var(--white);
}
.login_button_1 img {
  height: 1.5rem;
  filter: invert(100);
  transition: 0.2s;
}

.login_button_1:hover {
  transform: scale(1.05);
  background-color: var(--white);
  color: var(--primary3);
  border: 2px solid var(--white);
}
.login_button_1:hover img {
  height: 2rem;
  filter: invert(100);
}

.login_button_2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 12px;
  color: var(--primary3);
  transition: 0.2s;
  text-transform: uppercase;
  border: 1px solid var(--primary3);
  cursor: pointer;
  font-size: medium;
  text-decoration: none;
}
.login_button_2 h3 {
  text-transform: uppercase;
  color: var(--white);
}
.login_button_2 img {
  height: 1.5rem;
  filter: invert(100);
  transition: 0.2s;
}

.login_button_2:hover {
  transform: scale(1.05);
  background-color: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
}
.login_button_2:hover img {
  height: 2rem;
  filter: invert(100);
}

.menu_super {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  width: 100%;
  background: linear-gradient(145deg, var(--primary1) 0%, var(--primary4) 100%);
  gap: 0.5rem;
  background-size: cover;
}

.leftcont {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-left: 1.5rem;
  gap: 0.5rem;
}

.rightcont {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: right;
  padding-right: 1.5rem;
  gap: 0.8rem;
}

.menu_item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--black);
  padding: 0.5rem;
  border-radius: 8px;
  transform: 0.2s;
  border: 1px solid var(--white6);
  background-color: transparent;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--white);
}
.menu_item img {
  filter: invert(100);
}

.menu_item:hover {
  background-color: var(--black2);
  color: var(--white2);
}
.menu_item:hover img {
  filter: invert(100);
}

.logo_main {
  padding-left: 1rem;
  padding-right: 1rem;
  height: 20rem;
  cursor: pointer;
  transition: 0.2s;
}

.logo_main:hover {
  transform: scale(1.02);
}

.logo_mini {
  padding: 1rem;
  height: 3rem;
  cursor: pointer;
  transition: 0.2s;
}

.logo_mini:hover {
  transform: scale(1.02);
}

.back {
  height: 2rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  cursor: pointer;
  transition: 0.2s;
}

.back:hover {
  transform: scale(1.02);
}

.login_park {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.8rem;
  padding-top: 1rem;
}

.pointer {
  padding: 0.5rem;
  height: 1rem;
  transform: rotate(90deg);
}

.profile_dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
}

.accountbubblesubcont {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  filter: invert(0);
  border: 2px solid var(--white);
  background-color: var(--shade2);
}
.accountbubblesubcont img {
  height: 100%;
  filter: invert(0);
}

.accountbubblesubcont:hover {
  transform: scale(1.05);
}
.accountbubblesubcont:hover img {
  height: 100%;
}

.account_card {
  position: absolute;
  width: 15rem;
  margin-top: 15rem;
  display: none;
  flex-direction: column;
  border-radius: 8px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(3px 2px 2px var(--black5));
}
.account_card .account_card_overlay {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  background-color: var(--white);
  border: 1px solid var(--white4);
  padding: 0.8rem;
  z-index: 960;
  border-radius: 8px;
}

.account_card.active {
  display: flex;
}
.account_card.active .account_card_overlay {
  display: flex;
}

.account_card_sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-bottom: 0.5rem;
}

.account_card_sub2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--black);
}

.accountbubblesubcont2 {
  height: 4.5rem;
  width: 4.5rem;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  border: 1px solid var(--black);
  background-color: var(--shade2);
}
.accountbubblesubcont2 img {
  height: 100%;
}

.accountbubblesubcont2:hover {
  transform: scale(1.05);
}

.profile_link {
  text-decoration: none;
  text-transform: capitalize;
  color: var(--black);
  background-color: var(--white);
  padding: 0.5rem;
  border-radius: 8px;
  transition: 0.2s;
  cursor: pointer;
  border: 1px solid var(--shade2);
}

.profile_link:hover {
  background-color: var(--shade2);
}

.hero_button_4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--primary1);
  padding-left: 0.7rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-right: 0.7rem;
  border-radius: 8px;
  color: var(--white);
  transition: 0.2s;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--primary1);
}
.hero_button_4 h5 {
  text-transform: uppercase;
  color: var(--white);
}
.hero_button_4 img {
  height: 1.2rem;
  filter: invert(100);
  transition: 0.2s;
}

.hero_button_4:hover {
  background-color: var(--black);
  border: 1px solid var(--black);
}

.hero_button_5 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--white);
  padding-left: 0.7rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-right: 0.7rem;
  border-radius: 8px;
  color: var(--black);
  transition: 0.2s;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--shade2);
}
.hero_button_5 h5 {
  text-transform: uppercase;
  color: var(--black);
}
.hero_button_5 img {
  height: 1.2rem;
  filter: invert(0);
  transition: 0.2s;
}

.hero_button_5:hover {
  background-color: var(--black);
  color: var(--white);
  border: 1px solid var(--white);
}
.hero_button_5:hover h5 {
  color: var(--white);
}
.hero_button_5:hover img {
  filter: invert(100);
}

.dashboard_super {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  width: 60%;
}

.dash_link {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--white);
  border-radius: 8px;
  color: var(--black);
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.2s;
  width: 14rem;
  height: 12rem;
}
.dash_link img {
  height: 4rem;
}

.dash_link:hover {
  background-color: var(--primary1);
  color: var(--white);
}
.dash_link:hover img {
  filter: invert(100);
}

@media (max-width: 1001px) {
  .dashboard_super {
    width: 100%;
  }
  .dash_link {
    width: 10rem;
    height: 8rem;
  }
  .dash_link img {
    height: 3rem;
  }
}
.workspace {
  margin: 0;
  padding: 0;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  padding-top: 1rem;
  padding-bottom: 2rem;
  gap: 0.5rem;
  background-color: transparent;
}

.filterform {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.search-input1 {
  display: flex;
  transition: 0.5s;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  outline: none;
  opacity: 75%;
  text-indent: 5px;
  border: 1px solid var(--shade2);
  border-radius: 8px;
  font-size: medium;
  background-color: var(--white);
  background-image: none !important;
  -webkit-appearance: normal;
     -moz-appearance: normal;
          appearance: normal;
  text-transform: capitalize;
}
.search-input1 option {
  text-transform: capitalize;
}

.search-input1:focus {
  opacity: 100%;
  outline: none;
  background-color: var(--white) !important;
  background-image: none !important;
}

.textarea {
  border-radius: 8px;
  font-family: "Maven Pro", sans-serif;
  background-color: var(--white3);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2rem;
  resize: vertical;
  border: none;
  outline: none;
}

.filteritem {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.select {
  padding: 0.4rem;
  border-radius: 7px;
  text-transform: capitalize;
  color: var(--black);
  border: none;
}
.select option {
  text-transform: capitalize;
}

.itemsubform {
  display: flex;
  flex-wrap: wrap;
}

.button1 {
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  color: var(--black);
  border-radius: 5px;
  border: 1px solid var(--shade3);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  transition: 0.2s;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: 0.2s;
}

.button1 img {
  height: 1.5rem;
  filter: invert(0);
}

.button1:hover {
  color: var(--black);
  background: var(--white);
  border: 2px solid var(--white);
  filter: invert(100) drop-shadow(3px 3px 3px var(--black4));
}

.button2 {
  text-transform: uppercase;
  text-decoration: none;
  background: var(--primary1);
  color: var(--white);
  border-radius: 5px;
  border: 1px solid var(--primary1);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  transition: 0.2s;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: 0.2s;
}

.button2_image {
  height: 1rem;
  filter: invert(100);
}

.button2:hover {
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--black);
  transform: scale(1.05);
}

.noitemscont {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pagination {
  width: 100vw;
  background-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}

.paginationbutton {
  background-color: var(--primary1);
  padding: 0.4rem;
  border-radius: 4px;
  color: var(--white);
  cursor: pointer;
  text-decoration: none;
}

.footer_super {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}

.footer_sub {
  display: flex;
  gap: 0.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
  border-radius: 8px;
  padding: 0.2rem;
}
.footer_sub img {
  height: 1.5rem;
}

.footer_logo img {
  height: 8rem;
}

.footer_sub:hover {
  background-color: var(--black6);
}

.log-list {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

table {
  border-collapse: collapse;
  width: 95vw;
  background-color: var(--black6);
}

th, td {
  border: 1px solid var(--black2);
  background-color: var(--white);
  cursor: pointer;
}

th, td {
  padding: 8px;
  margin: 4px;
  text-align: left;
}

.grid-container {
  display: flex;
  width: 95%;
  flex-direction: column;
  gap: 0.5rem;
}

.itemlist2 {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}

.itemlist2:hover {
  background-color: var(--white);
  filter: drop-shadow(3px 3px 3px var(--black4));
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  background-color: var(--black2);
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  color: var(--white);
  grid-gap: 0.5rem;
}

.itemsub {
  width: 15%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  word-break: break-all;
}

.itemsub2 {
  width: 15%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  word-break: break-all;
}

.itemsub3 {
  width: 30%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  word-break: break-all;
}
.itemsub3 form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.line3 {
  background-color: var(--black2);
  height: 1rem;
  width: 1px;
}

.line4 {
  background-color: var(--white);
  height: 1rem;
  width: 1px;
}

.spacer {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: transparent;
}

.submisioncont {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem;
}

.checklistcont {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 8px;
  gap: 0.5rem;
  width: 93%;
  border: 1px solid var(--black4);
}

.checklistsub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  gap: 0.5rem;
  background-color: var(--black6);
  border-radius: 8px;
  transition: 0.2s;
}
.checklistsub input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--primary1);
  border-radius: 50%;
  outline: none;
  transition: border-color 0.3s;
  cursor: pointer;
  transition: 0.2s;
  cursor: pointer;
}
.checklistsub input:hover[type=checkbox] {
  transform: scale(1.2);
}
.checklistsub input[type=checkbox]:checked {
  border-color: var(--primary1);
  background-color: var(--primary1);
}

.checklistsub:hover {
  transform: scale(1.02);
  background-color: var(--white);
  border: 1px solid var(--black);
}

.menatwork {
  padding: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background-color: var(--white);
  gap: 0.5rem;
}
.menatwork p {
  margin: 0;
  padding: 0;
}
.menatwork img {
  height: 2rem;
}

.pad {
  background-color: var(--white);
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  width: 70%;
  gap: 0.5rem;
}

.bulk_sub {
  display: flex;
  background-color: var(--white);
  padding: 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}
.bulk_sub form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.bulk_sub:hover {
  filter: drop-shadow(3px 4px 4px var(--black5));
}
.bulk_sub:hover form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.custom-file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.clean_icon {
  height: 5rem;
}

.float_items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.8rem;
}

.splash_options {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.option1 {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  background-color: var(--white);
  border-radius: 8px;
  width: 60%;
}
.option1 form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.logo_main {
  height: 2.5rem;
  filter: invert(100);
  cursor: pointer;
}

.button3 {
  text-transform: uppercase;
  text-decoration: none;
  background: var(--primary1);
  color: var(--white);
  border-radius: 5px;
  border: 1px solid var(--primary1);
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  transition: 0.2s;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: 0.2s;
}
.button3 img {
  filter: invert(100);
  height: 2rem;
}

.button3:hover {
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--black);
  transform: scale(1.05);
}

.option_cont {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.settings_super {
  display: flex;
  width: 100vw;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap: 0.5rem;
}

.setting_card {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 4px;
  background-color: var(--white);
}
.setting_card img {
  width: 8rem;
  border-radius: 8px;
  cursor: pointer;
}
.setting_card span {
  color: var(--primary1);
  background-color: var(--primary1);
  padding: 0.5rem;
  color: var(--white);
  border-radius: 6px;
  text-transform: capitalize;
  cursor: pointer;
}
.setting_card .video {
  border-radius: 4px;
  overflow: hidden;
}

@media (max-width: 1001px) {
  .setting_card {
    width: 90vw;
  }
}
.setting-input {
  display: block;
  transition: 0.5s;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  outline: none;
  opacity: 75%;
  text-indent: 5px;
  border: 1px solid var(--black4);
  font-size: medium;
  border-radius: 6px;
  width: 50%;
  background-color: transparent;
}
.setting-input select {
  padding: 0.4rem;
  border-radius: 7px;
  text-transform: capitalize;
}
.setting-input select option {
  text-transform: capitalize;
}

.setting-input:focus {
  opacity: 100%;
  outline: none;
  filter: none;
  background-color: var(--white);
}

.setting-textarea {
  border-radius: 8px;
  font-family: "Maven Pro", sans-serif;
  border: 1px solid var(--black4);
  font-size: medium;
  border-radius: 6px;
  background-color: var(--white3);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 2rem;
  resize: vertical;
  outline: none;
}

.profilesuper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100vw;
  gap: 0.5rem;
  transition: 0.2s;
}

.profilesub {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  gap: 0.5rem;
}

.profileimagesupercont {
  display: flex;
  align-items: flex-end;
}

@media (max-width: 1001px) {
  .profilesub {
    width: 90%;
  }
}
.profileimagecont {
  width: 12rem;
  height: 12rem;
  background-color: var(--black4);
  border-radius: 8%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profileimagecont img {
  width: 100%;
  transition: 0.2s;
  cursor: pointer;
}
.profileimagecont img:hover {
  transform: scale(1.05);
}

.profileediticon {
  height: 2rem;
  padding: 0.3rem;
  border-radius: 12px;
  background-color: var(--white);
  transition: 0.2s;
  cursor: pointer;
  margin-left: -3rem;
  position: relative;
}

.profileediticon:hover {
  filter: invert(100);
}

.profiletext {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.detail_input {
  display: flex;
  transition: 0.5s;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  outline: none;
  opacity: 75%;
  text-indent: 5px;
  border: 1px solid var(--shade2);
  border-radius: 8px;
  font-size: medium;
  background-color: var(--white);
  background-image: none !important;
  -webkit-appearance: normal;
     -moz-appearance: normal;
          appearance: normal;
}
.detail_input option {
  text-transform: capitalize;
}

.detail_input:focus {
  opacity: 100%;
  outline: none;
  background-color: var(--white) !important;
  background-image: none !important;
}

.detail_input2 {
  display: flex;
  transition: 0.5s;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  outline: none;
  opacity: 75%;
  text-indent: 5px;
  border: 1px solid var(--shade2);
  border-radius: 8px;
  font-size: medium;
  background-color: var(--white);
  background-image: none !important;
  -webkit-appearance: normal;
     -moz-appearance: normal;
          appearance: normal;
}
.detail_input2 option {
  text-transform: capitalize;
}

.detail_input2:focus {
  opacity: 100%;
  outline: none;
  background-color: var(--white) !important;
  background-image: none !important;
}

.detail_textarea {
  border-radius: 8px;
  font-family: "Maven Pro", sans-serif;
  background-color: var(--white3);
  border: 1px solid var(--black4);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  resize: vertical;
  outline: none;
}

.spread {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.check_container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  gap: 0.5rem;
  border-radius: 8px;
  background-color: var(--black6);
  cursor: pointer;
}

.hero_super {
  background: linear-gradient(-180deg, var(--black) 15%, var(--black) 100%);
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hero_image {
  height: 100vh;
  width: 100vw;
  opacity: 60%;
  animation: splash 20s infinite;
  background-origin: center;
  background-position: center;
  z-index: 90;
  position: relative;
  transition: 0.2s;
  overflow-y: hidden;
  overflow-x: hidden;
  display: grid;
  grid-auto-flow: column;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scroll-snap-stop: always;
}

@supports (animation-timeline: view()) {
  .hero_super {
    transform-origin: bottom;
    animation: hero_cont_animate linear forwards;
    animation-timeline: view();
    animation-range: exit;
  }
}
@keyframes hero_cont_animate {
  0% {
    opacity: 1;
  }
  100% {
    scale: 2;
    opacity: 1;
  }
}
@keyframes hero_cont_animate_shrink {
  0% {
    opacity: 1;
  }
  50% {
    scale: 0.6;
    opacity: 1;
  }
  100% {
    scale: 0.6;
    opacity: 1;
  }
}
.herosubcont1, .herosubcont2, .herosubcont3, .herosubcont4 {
  scroll-snap-align: start;
  width: 100vw;
  height: 100vh;
  animation: splash 10s infinite;
  background-origin: center;
  background-position: center;
}

@media (max-width: 1000px) {
  .herosubcont1, .herosubcont2, .herosubcont3, .herosubcont4 {
    background-size: cover;
    animation: none;
  }
}
.hero_logo {
  height: 7rem;
  transition: 0.2s;
  cursor: pointer;
}

.hero_logo:hover {
  transform: scale(1.1);
}

.hero_control {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.dot_fence {
  cursor: pointer;
  transition: 0.2s;
}
.dot_fence .dot {
  width: 5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.2s;
}
.dot_fence .dot img {
  width: 110%;
  transition: 0.2s;
}

.dot_fence:hover .dot {
  transform: scale(1.05);
}
.dot_fence:hover .dot img {
  transform: scale(1.1);
}

.hero_info {
  height: 100vh;
  width: 100vw;
  margin-top: -100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  color: var(--white);
  z-index: 100;
  position: relative;
  transform-origin: bottom;
}

.hero_headline {
  width: 50%;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  text-transform: uppercase;
  font-weight: lighter;
  letter-spacing: 0.15rem;
}

.hero_text {
  width: 40%;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding-bottom: 0.5rem;
}
.hero_text .mobile_subtitle {
  display: none;
}
.hero_text .desktop_subtitle {
  display: block;
}

.name_tag {
  background: linear-gradient(145deg, var(--primary1) 0%, var(--primary1) 100%);
  padding: 0.8rem;
  border-radius: 12px;
  padding: 0.5rem;
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
  letter-spacing: 0.1rem;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.name_tag img {
  filter: invert(100);
  height: 1.5rem;
  transition: 0.5s;
}
.name_tag img:hover {
  transform: rotate(360deg);
}
.name_tag h4 {
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
}

.name_tag:hover {
  transform: scale(1.01);
}

@supports (animation-timeline: view()) {
  .hero_info {
    transform-origin: bottom;
    animation: hero_cont_animate_shrink linear forwards;
    animation-timeline: view();
    animation-range: exit;
  }
}
@media (max-width: 1001px) {
  .hero_image {
    background-size: cover;
    animation: none;
  }
  .hero_headline {
    width: 90%;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
  }
  .hero_text {
    width: 90%;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
  }
  .hero_text .mobile_subtitle {
    display: block;
  }
  .hero_text .desktop_subtitle {
    display: none;
  }
  .dot {
    width: 4.5rem;
    height: 3.5rem;
  }
}
.hero_new {
  width: 80vw;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.hero_new h1 {
  text-transform: uppercase;
  font-weight: bolder;
  font-size: 5rem;
  filter: drop-shadow(2px 2px 0px var(--white3));
}
.hero_new h1 span {
  color: var(--primary1);
}

.hero_new2 {
  width: 80vw;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap: 0.5rem;
  margin-bottom: 5rem;
}

.hero_new_logo {
  height: 9rem;
  filter: invert(100);
}

@media (max-width: 1001px) {
  .hero_new {
    width: 80vw;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .hero_new h1 {
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 3rem;
    filter: drop-shadow(2px 2px 0px var(--white3));
  }
  .hero_new h1 span {
    color: var(--primary1);
  }
  .hero_new2 {
    width: 80vw;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 0.5rem;
    margin-bottom: 0;
  }
  .hero_new_logo {
    height: 6rem;
    filter: invert(100);
  }
  .logo_main {
    display: none;
  }
}
.hero_button_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--primary1);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
  color: var(--primary3);
  transition: 0.2s;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid var(--primary1);
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0.1rem;
}
.hero_button_1 h3 {
  text-transform: uppercase;
  color: var(--white);
}

.hero_button_1:hover {
  transform: scale(1.05);
  background-color: var(--white);
  color: var(--primary3);
  border: 2px solid var(--white);
}

.hero_button_2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 12px;
  color: var(--white);
  transition: 0.2s;
  text-transform: uppercase;
  border: 1px solid var(--white);
  cursor: pointer;
  font-size: medium;
  text-decoration: none;
}
.hero_button_2 h3 {
  text-transform: uppercase;
  color: var(--white);
}

.hero_button_2:hover {
  transform: scale(1.05);
  background-color: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
}

.caution_super {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  width: 100%;
  text-align: center;
  gap: 0.5rem;
}

.vertical {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.form_white {
  background-color: var(--white4);
  padding: 0.8rem;
  border-radius: 8px;
}

.payment_card {
  background-color: var(--white);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 20rem;
  border-radius: 8px;
}

.payment_card_header {
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--black6);
}

.payment_card_details {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  gap: 0.4rem;
}

.gallery_super {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 2rem;
  padding-bottom: 2rem;
  width: 100vw;
  gap: 1rem;
}

.gallery_super2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 1rem;
  padding-bottom: 1rem;
  width: 100vw;
  border-bottom: 1px solid var(--black5);
  border-top: 1px solid var(--black5);
  gap: 1rem;
}

.gallery_control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1rem;
}

.gallery_filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  border: 2px solid var(--black4);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  border-radius: 15px;
  transition: 0.2s;
  text-transform: capitalize;
  cursor: pointer;
  color: var(--black);
  gap: 0.4rem;
}
.gallery_filter img {
  height: 1rem;
  transition: 0.2s;
  filter: invert(0);
}

.gallery_filter:hover {
  transform: scale(1.05);
  background-color: var(--black);
  border: 2px solid var(--white);
  border-radius: 15px;
  transition: 0.2s;
  text-transform: capitalize;
  color: var(--white);
}
.gallery_filter:hover img {
  filter: invert(100);
}

.gallery_card {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: bg_pan 3s linear infinite;
  width: 20rem;
  height: 20rem;
  cursor: pointer;
  transition: 0.2s;
}
.gallery_card video {
  height: 110%;
}
.gallery_card .gallery_image {
  height: 110%;
  transition: 0.2s;
}
.gallery_card .image_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  background-color: var(--black3);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  width: 20rem;
  margin-top: 25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--white);
  transition: 0.2s;
  gap: 0.3rem;
  opacity: 0%;
}

.gallery_card:hover {
  transform: scale(1.03);
}
.gallery_card:hover .gallery_image {
  height: 120%;
}
.gallery_card:hover .image_info {
  margin-top: 15rem;
  opacity: 100%;
}

.info_sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.info_sub img {
  height: 1.2rem;
  filter: invert(100);
}
.info_sub h4 {
  font-weight: lighter;
}

.gallery_card.active {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: bg_pan 3s linear infinite;
  width: 50rem;
  height: 40rem;
  cursor: pointer;
  transition: 0.2s;
}
.gallery_card.active video {
  height: 110%;
}
.gallery_card.active .gallery_image {
  height: 110%;
  transition: 0.2s;
}
.gallery_card.active .image_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  background-color: var(--black3);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  width: 60rem;
  margin-top: 60rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--white);
  transition: 0.2s;
  gap: 0.3rem;
  opacity: 0%;
}

.gallery_card:hover {
  transform: scale(1.03);
}
.gallery_card:hover .gallery_image {
  height: 120%;
}
.gallery_card:hover .image_info {
  margin-top: 14rem;
  opacity: 100%;
}

.gallery_card.active:hover {
  transform: scale(1.03);
}
.gallery_card.active:hover .gallery_image {
  height: 120%;
}
.gallery_card.active:hover .image_info {
  margin-top: 34rem;
  opacity: 100%;
}

@media (max-width: 1000px) {
  .gallery_card {
    width: 45vw;
  }
  .gallery_card .image_info {
    width: 45vw;
  }
  .gallery_card.active {
    width: 90vw;
  }
}
.sister_link {
  text-decoration: none;
  display: flex;
  gap: 0.5rem;
  background-color: var(--primary1);
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 8px;
  transition: 0.2s;
  color: var(--white);
  margin-top: 0.5rem;
}
.sister_link img {
  height: 1.5rem;
  filter: invert(100);
}

.sister_link:hover {
  background-color: var(--black);
  transform: scale(1.02);
}

.client_card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: var(--white);
  padding: 0.5rem;
  cursor: pointer;
  transition: 0.2s;
  width: 15rem;
}
.client_card img {
  width: 100%;
  border-radius: 4px;
}

.client_card:hover {
  transform: scale(1.05);
  filter: drop-shadow(2px 3px 4px var(--black6));
}

.client_sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.client_sub img {
  height: 1.5rem;
  width: auto;
}

@media (max-width: 1000px) {
  .client_card {
    width: 10rem;
  }
}/*# sourceMappingURL=dashboard.css.map */