/* ------------------------- Osmo [https://osmo.supply/] ------------------------- */
/* ------------------------- Variables ------------------------------------------- */

:root {
  --color-light: var(--color-neutral-200);
  --color-dark: var(--color-neutral-800);
  --color-primary: #ff4c24;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #efeeec;
  --color-neutral-300: #e3e1de;
  --color-neutral-400: #cbc8c5;
  --color-neutral-500: #818180;
  --color-neutral-600: #2c2c2c;
  --color-neutral-700: #1f1f1f;
  --color-neutral-800: #131313;
  --color-neutral-900: #000000;
  --color-white: var(--color-neutral-100);
  --color-black: var(--color-neutral-900);
  --color-error: var(--color-primary);
  --color-success: #0ba954;
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
  --duration-default: 0.735s;
  --animation-default: var(--duration-default) var(--cubic-default);
  --gap: 2em;
  --section-padding: calc(3.5em + (var(--gap) * 2));
  --container-padding: 2em;
  --header-height: calc(1.5em + (var(--gap) * 2));
  --footer-height: calc(2.785em + (var(--gap) * 2));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --container-padding: 1.5em;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --container-padding: 1em;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {}
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16;
  /* body font-size in design - no px */
  --size-container-ideal: 1440;
  /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390;
    /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}


/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* Chrome, Safari, Opera */
body {
  -ms-overflow-style: none;
}

/* IE & Edge */
html {
  scrollbar-width: none;
}

/* Firefox */

/* ------------------------- Reset -------------------------------------------------- */

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: initial;
}

html,
body {
  -webkit-font-smoothing: antialiased;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

a {
  color: inherit;
}

/* Selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

/* ------- Osmo [https://osmo.supply/] ------- */
/* Osmo UI: https://slater.app/10324/23333.css */

body {
  background-color: var(--color-neutral-900);
  color: var(--color-light);
  font-size: var(--size-font);
  margin: 0;
  padding: 0;
}

.cloneable {
  padding: var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
}


.parallax__fade {
  --color-dark-rgb: 0, 0, 0;
  /* background: linear-gradient(to top, rgba(var(--color-dark-rgb), 1) 0%, rgba(var(--color-dark-rgb), 0.738) 19%, rgba(var(--color-dark-rgb), 0.541) 34%, rgba(var(--color-dark-rgb), 0.382) 47%, rgba(var(--color-dark-rgb), 0.278) 56.5%, rgba(var(--color-dark-rgb), 0.194) 65%, rgba(var(--color-dark-rgb), 0.126) 73%, rgba(var(--color-dark-rgb), 0.075) 80.2%, rgba(var(--color-dark-rgb), 0.042) 86.1%, rgba(var(--color-dark-rgb), 0.021) 91%, rgba(var(--color-dark-rgb), 0.008) 95.2%, rgba(var(--color-dark-rgb), 0.002) 98.2%, transparent 100%); */
  background-color: #000;
}

.osmo-icon-svg {
  width: 8em;
  position: relative;
}

.parallax__header {
  z-index: 2;
  padding: var(--section-padding) var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  display: flex;
  position: relative;
}

.parallax {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.parallax__content {
  padding: 20px 20px 0;
  min-height: 100svh;
  display: flex;
  position: relative;
  margin: auto;
  max-width: 900px;

}

.parallax__conten__firstt {
  padding-top: 200px;
}


.cover {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.parallax__visuals {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 120%;
  position: absolute;
  top: 0;
  left: 0;
}

.parallax__placeholder {
  z-index: 0;
  opacity: 0;
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.parallax__layers {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.cover-copy {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.parallax__fade {
  z-index: 30;
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 20%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.parallax__black-line-overflow {
  z-index: 20;
  background-color: var(--color-black);
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 0;
}

.parallax__title {
  pointer-events: auto;
  text-align: center;
  text-transform: none;
  margin-top: 0;
  margin-bottom: .1em;
  margin-right: .075em;
  font-family: PP Neue Corp Wide, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  position: relative;
  /* text-shadow: 0 0 12px black; */
  /* margin-top: -35px; */
  color: #000;
}

.parallax__radial-gradient {
  z-index: 10;
  background-image: radial-gradient(circle farthest-corner at 50% 50%, transparent, var(--color-black));
  opacity: .5;
  pointer-events: none;
  mix-blend-mode: multiply;
  position: fixed;
  inset: 0;
}

.parallax__layer-title {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.parallax__layer-img {
  pointer-events: none;
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 117.5%;
  position: absolute;
  top: -17.5%;
  left: 0;
}

.parallax__layer-img.is-third {
  top: -20%;
}



.p {
  text-transform: uppercase;
  letter-spacing: 0.5em;
  display: inline-block;
  border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0;
  padding: 1.5em 0em;
  width: 100%;
  margin: auto;
  max-width: 500px;
  text-align: center;
}

.p span {
  font: 700 4em/1 "Oswald", sans-serif;
  letter-spacing: 0;
  padding: 0.25em 0 0.325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  /* Clip Background Image */
  /* background: url(/themes/marketink_pro_landing/animated-text-fill.png) repeat-y; */
  -webkit-background-clip: text;
  background-clip: text;
  /* Animate Background Image */
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;
  /* Activate hardware acceleration for smoother animations */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

/* Animate Background Image */
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}



.bird {
  background-image: url(/themes/marketink_pro_landing/bird-cells-new.svg);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;
  -webkit-animation-name: fly-cycle;
  animation-name: fly-cycle;
  -webkit-animation-timing-function: steps(10);
  animation-timing-function: steps(10);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.bird--one {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.bird--two {
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-animation-delay: -0.75s;
  animation-delay: -0.75s;
}

.bird--three {
  -webkit-animation-duration: 1.25s;
  animation-duration: 1.25s;
  -webkit-animation-delay: -0.25s;
  animation-delay: -0.25s;
}

.bird--four {
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.bird-container {
  position: absolute;
  top: 10%;
  left: -10%;
  transform: scale(0) translateX(-10vw);
  will-change: transform;
  -webkit-animation-name: fly-right-one;
  animation-name: fly-right-one;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  z-index: 100;
}

.bird-container--one {
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  -webkit-animation-delay: 0;
  animation-delay: 0;
}

.bird-container--two {
  -webkit-animation-duration: 16s;
  animation-duration: 16s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.bird-container--three {
  -webkit-animation-duration: 14.6s;
  animation-duration: 14.6s;
  -webkit-animation-delay: 9.5s;
  animation-delay: 9.5s;
}

.bird-container--four {
  -webkit-animation-duration: 16s;
  animation-duration: 16s;
  -webkit-animation-delay: 10.25s;
  animation-delay: 10.25s;
}

@-webkit-keyframes fly-cycle {
  100% {
    background-position: -900px 0;
  }
}

@keyframes fly-cycle {
  100% {
    background-position: -900px 0;
  }
}

@-webkit-keyframes fly-right-one {
  0% {
    transform: scale(0.3) translateX(-10vw);
  }

  10% {
    transform: translateY(2vh) translateX(10vw) scale(0.4);
  }

  20% {
    transform: translateY(0vh) translateX(30vw) scale(0.5);
  }

  30% {
    transform: translateY(4vh) translateX(50vw) scale(0.6);
  }

  40% {
    transform: translateY(2vh) translateX(70vw) scale(0.6);
  }

  50% {
    transform: translateY(0vh) translateX(90vw) scale(0.6);
  }

  60% {
    transform: translateY(0vh) translateX(110vw) scale(0.6);
  }

  100% {
    transform: translateY(0vh) translateX(110vw) scale(0.6);
  }
}

@keyframes fly-right-one {
  0% {
    transform: scale(0.3) translateX(-10vw);
  }

  10% {
    transform: translateY(2vh) translateX(10vw) scale(0.4);
  }

  20% {
    transform: translateY(0vh) translateX(30vw) scale(0.5);
  }

  30% {
    transform: translateY(4vh) translateX(50vw) scale(0.6);
  }

  40% {
    transform: translateY(2vh) translateX(70vw) scale(0.6);
  }

  50% {
    transform: translateY(0vh) translateX(90vw) scale(0.6);
  }

  60% {
    transform: translateY(0vh) translateX(110vw) scale(0.6);
  }

  100% {
    transform: translateY(0vh) translateX(110vw) scale(0.6);
  }
}

@-webkit-keyframes fly-right-two {
  0% {
    transform: translateY(-2vh) translateX(-10vw) scale(0.5);
  }

  10% {
    transform: translateY(0vh) translateX(10vw) scale(0.4);
  }

  20% {
    transform: translateY(-4vh) translateX(30vw) scale(0.6);
  }

  30% {
    transform: translateY(1vh) translateX(50vw) scale(0.45);
  }

  40% {
    transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
  }

  50% {
    transform: translateY(0vh) translateX(90vw) scale(0.45);
  }

  51% {
    transform: translateY(0vh) translateX(110vw) scale(0.45);
  }

  100% {
    transform: translateY(0vh) translateX(110vw) scale(0.45);
  }
}

@keyframes fly-right-two {
  0% {
    transform: translateY(-2vh) translateX(-10vw) scale(0.5);
  }

  10% {
    transform: translateY(0vh) translateX(10vw) scale(0.4);
  }

  20% {
    transform: translateY(-4vh) translateX(30vw) scale(0.6);
  }

  30% {
    transform: translateY(1vh) translateX(50vw) scale(0.45);
  }

  40% {
    transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
  }

  50% {
    transform: translateY(0vh) translateX(90vw) scale(0.45);
  }

  51% {
    transform: translateY(0vh) translateX(110vw) scale(0.45);
  }

  100% {
    transform: translateY(0vh) translateX(110vw) scale(0.45);
  }
}


body,
html,
.parallax__header {}


























:root {
  --body-bg-color: #e5ecef;
  --theme-bg-color: #fafafb;
  --body-font: "Poppins", sans-serif;
  --body-color: #2f2f33;
  --active-color: #67a49f;
  --active-light-color: #ebf2f2;
  --header-bg-color: #fff;
  --search-border-color: #efefef;
  --border-color: #d8d8d8;
  --alert-bg-color: #e8f2ff;
  --subtitle-color: #83838e;
  --inactive-color: #f0f0f0;
  --placeholder-color: #9b9ba5;
  --time-button: #fc5757;
  --level-button: #5052d5;
  --button-color: #fff;
}



.dark-mode {
  --body-bg-color: #1d1d1d;
  --theme-bg-color: #13131a;
  --header-bg-color: #1c1c24;
  --alert-bg-color: #292932;
  --body-color: #fff;
  --inactive-color: #292932;
  --time-button: #fff;
  --level-button: #fff;
  --active-light-color: #263d63;
  --border-color: #26262f;
  --search-border-color: #26262f;
}



.dark-light svg {
  margin-right: 8px;
  width: 22px;
  cursor: pointer;
  fill: transparent;
  transition: 0.5s;
}

.dark-mode .dark-light svg {
  fill: #ffce45;
  stroke: #ffce45;
}

.dark-mode .job-card svg {
  box-shadow: none;
}

.dark-mode .search.item {
  color: var(--body-color);
  border-color: var(--body-color);
}

.dark-mode .search-location svg,
.dark-mode .search-job svg,
.dark-mode .search-salary svg {
  color: var(--body-color);
}

.dark-mode .detail-button {
  background-color: var(--inactive-color);
  color: var(--subtitle-color);
}

.job {
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--theme-bg-color);
}

.logo {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
}

.logo svg {
  width: 24px;
  margin-right: 12px;
}

.header {
  display: flex;
  align-items: center;
  transition: box-shadow 0.3s;
  flex-shrink: 0;
  padding: 0 40px;
  white-space: nowrap;
  background-color: var(--header-bg-color);
  height: 60px;
  width: 100%;
  font-size: 14px;
  justify-content: space-between;
}

.header-menu a {
  text-decoration: none;
  color: var(--body-color);
  font-weight: 500;
}

.header-menu a:hover {
  color: var(--active-color);
}

.header-menu a:not(:first-child) {
  margin-left: 30px;
}

.header-menu a.active {
  color: var(--active-color);
}

.user-settings {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.user-settings svg {
  width: 20px;
  color: #94949f;
}

.user-menu {
  position: relative;
  margin-right: 8px;
  padding-right: 8px;
  border-right: 2px solid #d6d6db;
}

.user-menu:before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--header-bg-color);
  right: 6px;
  top: -1px;
  background-color: var(--active-color);
}

.user-profile {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  margin-right: 10px;
}

.wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  scroll-behavior: smooth;
  padding: 30px 40px;
  overflow: auto;
}

.search-menu {
  height: 56px;
  white-space: nowrap;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  background-color: var(--header-bg-color);
  border-radius: 8px;
  width: 100%;
  padding-left: 20px;
}

.search-menu div:not(:last-of-type) {
  border-right: 1px solid var(--search-border-color);
}

.search-bar {
  height: 55px;
  width: 100%;
  position: relative;
}

.search-bar input {
  width: 100%;
  height: 100%;
  display: block;
  background-color: transparent;
  border: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%230162ff'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: 0 50%;
  padding: 0 25px 0 305px;
}

.search-location,
.search-job,
.search-salary {
  display: flex;
  align-items: center;
  width: 50%;
  font-size: 14px;
  font-weight: 500;
  padding: 0 25px;
  height: 100%;
}

.search-location input,
.search-job input,
.search-salary input {
  width: 100%;
  height: 100%;
  display: block;
  background-color: transparent;
  border: none;
}

.search-location svg,
.search-job svg,
.search-salary svg {
  margin-right: 8px;
  width: 18px;
  color: var(--active-color);
  flex-shrink: 0;
}

.search-button {
  background-color: var(--active-color);
  height: 55px;
  border: none;
  font-weight: 600;
  font-size: 14px;
  padding: 0 15px;
  border-radius: 0 8px 8px 0;
  color: var(--button-color);
  cursor: pointer;
  margin-left: auto;
}

.search.item {
  position: absolute;
  top: 10px;
  left: 25px;
  font-size: 13px;
  color: var(--active-color);
  border: 1px solid var(--search-border-color);
  padding: 8px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.search.item svg {
  width: 12px;
  margin-left: 5px;
}

.search.item:last-child {
  left: 185px;
}

.main-container {
  display: flex;
  flex-grow: 1;
  padding-top: 30px;
  width: 100%;
}

.error {
  font-size: 13px;
  font-weight: bold;
  color: red;
  margin-bottom: 15px;
}

.search-type {
  width: 100%;
  display: flex;
  height: 100%;
  flex-shrink: 0;
}


.col-sm-1 {
  width: calc(100% * (1/12));
}

.col-sm-2 {
  width: calc(100% * (2/12));
}

.col-sm-3 {
  width: calc(100% * (3/12));
}

.col-sm-4 {
  width: calc(100% * (4/12));
}

.col-sm-5 {
  width: calc(100% * (5/12));
}

.col-sm-6 {
  width: calc(100% * (6/12));
}

.col-sm-7 {
  width: calc(100% * (7/12));
}

.col-sm-8 {
  width: calc(100% * (8/12));
}

.col-sm-9 {
  width: calc(100% * (9/12));
}

.col-sm-10 {
  width: calc(100% * (10/12));
}

.col-sm-11 {
  width: calc(100% * (11/12));
}

.col-sm-12 {
  width: calc(100% * (12/12));
}





.search-type img {
  width: 100%;
  border-radius: 0 10px 10px 0;
}


.alert {
  /* background-color: var(--alert-bg-color); */
  background-color: #f3f3fd;
  padding: 24px 18px;
  border-radius: 10px 0 0 10px;
}

.section-title {
  text-align: center;
  font-size: 23px;
  font-weight: bold;
  border-bottom: 3px solid #ffffff60;
  padding-bottom: 15px;
  width: 150px;
  margin: auto;
  margin-bottom: 50px;
}

@media(max-width: 768px) {
  .search-type {
    flex-direction: column;
  }

  .col-sm-1 {
    width: 100%;
  }

  .col-sm-2 {
    width: 100%;
  }

  .col-sm-3 {
    width: 100%;
  }

  .col-sm-4 {
    width: 100%;
  }

  .col-sm-5 {
    width: 100%;
  }

  .col-sm-6 {
    width: 100%;
  }

  .col-sm-7 {
    width: 100%;
  }

  .col-sm-8 {
    width: 100%;
  }

  .col-sm-9 {
    width: 100%;
  }

  .col-sm-10 {
    width: 100%;
  }

  .col-sm-11 {
    width: 100%;
  }

  .col-sm-12 {
    width: 100%;
  }

  .search-type img {
    width: 100%;
    border-radius: 10px 10px 0 0;
    margin-bottom: -10px;
    height: 250px;
    object-fit: contain;
  }

  .alert {
    border-radius: 0 0 10px 10px;
  }


  .form-img-box {
    background: #f3f3fd;
    border-radius: 10px 10px 0 0;
  }


}

.header-links {
  position: absolute;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.header-links a {
  width: 120px;
  display: block;
  margin: 0 !important;
  text-align: center;
  outline: none;
  text-decoration: none;
  font-size: 11px;
}

.header-links .login {
  background: #67a49f;
}


.header-links .register {
  background: #000;
}


@media(min-width: 768px) {
  .search-type {
    border-radius: 10px;
    height: 100%;
    background: #f3f3fd;
  }

  .search-img img {}
}


.alert-title {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.alert-subtitle {
  font-size: 13px;
  color: var(--subtitle-color);
  line-height: 1.6em;
  margin-bottom: 20px;
}

.alert input {
  width: 100%;
  padding: 10px;
  display: block;
  border-radius: 6px;
  background-color: var(--header-bg-color);
  border: none;
  font-size: 13px;
  margin: 10px 0 15px;
}

.alert textarea {
  width: 100%;
  border-radius: 10px;
  border: 0;
  padding: 10px;
  margin: 10px 0 0;
}

.alert label {
  font-size: 15px;
  color: #000;
  font-weight: bold;
  padding: 0 5px;
}

.search-buttons {
  border: none;
  color: var(--button-color);
  background-color: var(--active-color);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
}

input:-internal-autofill-selected {
  background-color: #fff !important;
}

.job-wrapper {
  padding-top: 20px;
}

.job-time {
  padding-top: 20px;
}

.job-time-title {
  font-size: 14px;
  font-weight: 500;
}

.type-container {
  display: flex;
  align-items: center;
  color: var(--subtitle-color);
  font-size: 13px;
}

.type-container label {
  margin-left: 2px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.type-container+.type-container {
  margin-top: 10px;
}

.job-number {
  margin-left: auto;
  background-color: var(--inactive-color);
  color: var(--subtitle-color);
  font-size: 10px;
  font-weight: 500;
  padding: 5px;
  border-radius: 4px;
}

.job-style {
  display: none;
}

.job-style+label:before {
  content: "";
  margin-right: 10px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--subtitle-color);
  border-radius: 4px;
  cursor: pointer;
}

.job-style:checked+label:before {
  background-color: var(--active-color);
  border-color: var(--active-color);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e");
  background-position: 50%;
  background-size: 14px;
  background-repeat: no-repeat;
}

.job-style:checked+label+span {
  background-color: var(--active-light-color);
  color: var(--active-color);
}

.searched-jobs {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* padding-left: 40px; */
}

@-webkit-keyframes slideY {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
}

@keyframes slideY {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
}

.searched-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-animation: slideY 0.6s both;
  animation: slideY 0.6s both;
}

.searched-show {
  font-size: 19px;
  font-weight: 600;
}

.searched-sort {
  font-size: 14px;
  color: var(--subtitle-color);
}

.searched-sort .post-time {
  font-weight: 600;
  color: var(--subtitle-color);
}

.searched-sort .menu-icon {
  font-size: 9px;
  color: var(--placeholder-color);
  margin-left: 6px;
}

.job-cards {
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  -webkit-animation: slideY 0.6s both;
  animation: slideY 0.6s both;
}

@media screen and (max-width: 1212px) {
  .job-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 930px) {
  .job-cards {
    grid-template-columns: repeat(1, 1fr);
  }
}

.job-card {
  padding: 20px 16px;
  background-color: var(--header-bg-color);
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
  padding-bottom: 60px;
}

.job-card:hover {
  transform: scale(1.02);
}

.job-card svg {
  width: 46px;
  padding: 10px;
  border-radius: 8px;
}

.job-card-title {
  font-weight: 600;
  margin-top: 16px;
  font-size: 14px;
  color: #000;
}

.job-card-subtitle {
  color: var(--subtitle-color);
  font-size: 13px;
  margin-top: 14px;
  line-height: 1.6em;
}

.job-card-header {
  display: flex;
  align-items: flex-start;
}

.overview-card:hover {
  background: #2b2ecf;
  transition: none;
  transform: scale(1);
}

.overview-card:hover svg {
  box-shadow: none;
}

.overview-card:hover .job-overview-buttons .search-buttons.time-button,
.overview-card:hover .job-overview-buttons .search-buttons.level-button {
  background-color: #575ad8;
  color: #fff;
}

.overview-card:hover .job-card-title,
.overview-card:hover .job-stat {
  color: #fff;
}

.overview-card:hover .job-card-subtitle,
.overview-card:hover .job-day {
  color: #dedede;
}

.overview-card:hover .overview-wrapper .heart {
  color: #fff;
  border-color: #fff;
}

.overview-card:hover .overview-wrapper .heart:hover {
  fill: red;
  stroke: red;
  transform: scale(1.1);
}

.detail-button {
  background-color: var(--active-light-color);
  color: var(--active-color);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 4px;
}

.detail-button+.detail-button {
  margin-left: 4px;
}

.job-card-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
  position: absolute;
  bottom: 10px;
  width: calc(100% - 30px);
}

.card-buttons,
.card-buttons-msg {
  padding: 10px;
  width: 100%;
  font-size: 12px;
  cursor: pointer;
}

.card-buttons {
  margin-right: 12px;
}

[dir="rtl"] .card-buttons {
  margin-right: auto;
  margin-left: 12px;

}

.card-buttons-msg {
  background-color: var(--inactive-color);
  color: var(--subtitle-color);
}

.menu-dot {
  background-color: var(--placeholder-color);
  box-shadow: -6px 0 0 0 var(--placeholder-color), 6px 0 0 0 var(--placeholder-color);
  width: 4px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  margin-left: auto;
  margin-right: 8px;
}

[dir="rtl"] .menu-dot {
  margin-left: 8px;
  margin-right: auto;
}

.header-shadow {
  box-shadow: 0 4px 20px rgba(88, 99, 148, 0.17);
  z-index: 1;
}

@-webkit-keyframes slide {
  0% {
    opacity: 0;
    transform: translateX(300px);
  }
}

@keyframes slide {
  0% {
    opacity: 0;
    transform: translateX(300px);
  }
}

.job-overview {
  display: flex;
  flex-grow: 1;
  display: none;
  -webkit-animation: slide 0.6s both;
  animation: slide 0.6s both;
}

.job-overview-cards {
  display: flex;
  flex-direction: column;
  width: 330px;
  height: 100%;
  flex-shrink: 0;
}

.job-overview-card+.job-overview-card {
  margin-top: 20px;
}

.job-overview-buttons {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.job-overview-buttons .search-buttons {
  background-color: var(--inactive-color);
  font-size: 11px;
  padding: 6px 8px;
  margin-top: 0;
  font-weight: 500;
}

.job-overview-buttons .search-buttons.time-button {
  color: var(--time-button);
  margin-right: 8px;
}

.job-overview-buttons .search-buttons.level-button {
  color: var(--level-button);
}

.job-overview-buttons .job-stat {
  color: var(--active-color);
  font-size: 12px;
  font-weight: 500;
  margin-left: auto;
}

.job-overview-buttons .job-day {
  color: var(--subtitle-color);
  font-size: 12px;
  margin-left: 8px;
  font-weight: 500;
}

.job-overview .overview-wrapper {
  display: flex;
  align-items: center;
}

.job-overview .overview-wrapper svg:first-child {
  width: 42px;
  margin-right: 10px;
}

.job-overview .overview-wrapper .heart {
  background: none;
  box-shadow: none;
  width: 24px;
  padding: 4px;
  color: var(--subtitle-color);
  border: 1px solid var(--border-color);
  margin-left: auto;
  margin-bottom: auto;
}

.overview-detail .job-card-title,
.overview-detail .job-card-subtitle {
  margin-top: 4px;
}

.overview-detail .job-card-subtitle {
  font-size: 12px;
  font-weight: 500;
}

.job-explain {
  background-color: var(--header-bg-color);
  margin-left: 40px;
  border-radius: 0 0 8px 8px;
}

.job-bg {
  border-radius: 8px 8px 0 0;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 180px;
  transition: 0.3s;
  position: relative;
}

.job-logos {
  margin-top: -30px;
  position: relative;
  margin-bottom: -36px;
  padding: 0 20px;
}

.job-logos svg {
  width: 66px;
  padding: 12px;
  background-color: #fff;
  border-radius: 10px;
  border: 4px solid var(--header-bg-color);
}

.job-title-wrapper {
  display: flex;
  align-items: center;
}

.job-title-wrapper .job-card-title {
  font-size: 20px;
  margin-top: 0;
  font-weight: 600;
}

.job-action {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.job-action svg {
  width: 32px;
  border: 1px solid var(--border-color);
  color: var(--subtitle-color);
  border-radius: 8px;
  padding: 6px;
}

.job-action svg+svg {
  margin-left: 12px;
}

.job-explain-content {
  padding: 50px 25px 30px;
}

.job-subtitle-wrapper {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.job-subtitle-wrapper .posted {
  margin-left: auto;
}

.job-subtitle-wrapper .company-name {
  color: var(--active-color);
  font-weight: 600;
  font-size: 14px;
}

.job-subtitle-wrapper .comp-location,
.job-subtitle-wrapper .posted {
  color: var(--subtitle-color);
  font-size: 12px;
  font-weight: 500;
}

.job-subtitle-wrapper .comp-location {
  position: relative;
  margin-left: 10px;
}

.job-subtitle-wrapper .comp-location:before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--placeholder-color);
  top: 49%;
  left: -8px;
  position: absolute;
}

.job-subtitle-wrapper .app-number {
  color: var(--body-color);
  position: relative;
  margin-left: 12px;
}

.job-subtitle-wrapper .app-number:before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--placeholder-color);
  top: 50%;
  left: -7px;
  position: absolute;
}

.explain-bar {
  margin-top: 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  height: 66px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
}

.explain-title {
  color: var(--subtitle-color);
  font-size: 12px;
  line-height: 40px;
  white-space: nowrap;
}

.explain-subtitle {
  font-size: 13px;
  font-weight: 500;
  margin-top: -2px;
  white-space: nowrap;
}

.explain-contents {
  height: 66px;
}

.explain-contents+.explain-contents {
  border-left: 1px solid var(--border-color);
  padding-left: 16px;
}

.overview-text {
  margin-top: 30px;
}

.overview-text-header {
  font-weight: 600;
  margin-bottom: 25px;
}

.overview-text-subheader {
  font-size: 13px;
  line-height: 2em;
}

.overview-text-item {
  font-size: 13px;
  position: relative;
  display: flex;
}

.overview-text-item+.overview-text-item {
  margin-top: 20px;
}

.overview-text-item:before {
  content: "";
  border: 2px solid #61bcff;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  margin-right: 8px;
  flex-shrink: 0;
}

.detail-page .job-overview {
  display: flex;
}

.detail-page .job-cards,
.detail-page .searched-bar {
  display: none;
}

@media screen and (max-width: 1300px) {
  .detail-page .searched-jobs {
    padding-left: 0;
  }
}

@media screen and (max-width: 990px) {

  .explain-contents,
  .explain-bar {
    height: auto;
  }

  .explain-bar {
    flex-wrap: wrap;
    padding-bottom: 14px;
  }

  .explain-contents {
    width: 50%;
  }

  .explain-contents+.explain-contents {
    padding: 0;
    border: 0;
  }

  .explain-contents:nth-child(2)~.explain-contents {
    margin-top: 16px;
    border-top: 1px solid var(--border-color);
  }

  .job-subtitle-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .job-subtitle-wrapper .posted {
    margin-left: 0;
    margin-top: 6px;
  }
}

@media screen and (max-width: 930px) {

  .search-job,
  .search-salary {
    display: none;
  }

  .search-bar {
    width: auto;
  }
}

@media screen and (max-width: 760px) {
  .detail-page .job-overview-cards {
    display: none;
  }

  .user-name {
    display: none;
  }

  .user-profile {
    margin-right: 0;
  }

  .job-explain {
    margin-left: 0;
  }
}

@media screen and (max-width: 730px) {

  .searched-jobs {
    padding-left: 0;
  }

  .search-menu div:not(:last-of-type) {
    border: 0;
  }

  .job-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .search-location {
    display: none;
  }
}

@media screen and (max-width: 620px) {
  .job-cards {
    grid-template-columns: repeat(1, 1fr);
  }

  .header-menu a:not(:first-child) {
    margin-left: 10px;
  }
}

@media screen and (max-width: 590px) {
  .header-menu {
    display: none;
  }
}

@media screen and (max-width: 520px) {
  .search.item {
    display: none;
  }

  .search-bar {
    flex-grow: 1;
  }

  .search-bar input {
    padding: 0 0 0 30px;
  }

  .search-button {
    margin-left: 16px;
  }

  .searched-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .searched-sort {
    margin-top: 5px;
  }

  .main-container {
    padding-top: 20px;
  }
}

@media screen and (max-width: 380px) {
  .explain-contents {
    width: 100%;
    margin: 0;
  }

  .explain-contents:nth-child(2)~.explain-contents {
    margin: 0;
    border: 0;
  }

  .wrapper {
    padding: 20px;
  }

  .header {
    padding: 0 20px;
  }
}







@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}




.card {
  background: #191c29;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  margin: 0 15px;
  padding: 20px 0;
  align-items: center;
  min-height: 550px;
  max-width: 300px;
}


.cards {
  display: flex;
}

@media(max-width: 768px) {
  .card {
    margin: 40px 0 0
  }

  .cards {
    display: block;
  }
}

/*
.card:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}
*/

.card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  position: absolute;
  z-index: -1;
  top: -1%;
  left: -2%;
  animation: spin 2.5s linear infinite;
}

.card::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

.card.gold::before {
  background-image: linear-gradient(135deg, #F0FFF7, #BFF2D0 50%, #6EBF95 90%);
}

.card.gold::after {
  background-image: linear-gradient(135deg, #F0FFF7, #BFF2D0 50%, #6EBF95 90%);
}

.card.silver::before {
  background-image: linear-gradient(135deg, #E6FFF4, #9DD8B2 50%, #5FA382 90%);
}

.card.silver::after {
  background-image: linear-gradient(135deg, #E6FFF4, #9DD8B2 50%, #5FA382 90%);
}

.card.bronze::before {
  background-image: linear-gradient(135deg, #D1FFF0, #76C9A1 50%, #348764 90%);
}

.card.bronze::after {
  background-image: linear-gradient(135deg, #D1FFF0, #76C9A1 50%, #348764 90%);
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }

  100% {
    --rotate: 360deg;
  }
}

.card a {
  color: #212534;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  margin-top: 2rem;
}


.call-to-action-header {
  margin: auto;
  max-width: 480px;
  width: 90%;
  position: relative;
}

.call-to-action-header input {
  width: 100%;
  border: 1px solid #1b1b1b20;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  color: #000;
  outline: none;
  text-decoration: none;
  margin-top: 30px;
  height: 60px;
}

.call-to-action-header button {
  width: 80px;
  height: 45px;
  position: absolute;
  right: 8px;
  top: 38px;
  border-radius: 100px;
  background: #619f9a;
  color: #fff;
  border: 0;
  font-weight: bold;
  font-size: 12px;
}

[dir="rtl"] .call-to-action-header button {
  right: auto;
  left: 8px;
}


.w-full {
  width: 100%
}




.mouse-box {
  margin-top: 40px;
}


.mouse {
  background: #4e5559 linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);
  position: relative;
  width: 20px;
  height: 40px;
  border-radius: 100px;
  background-size: 100% 200%;
  margin: auto;
  -webkit-animation: colorSlide 10s linear infinite, nudgeMouse 10s ease-out infinite;
  animation: colorSlide 10s linear infinite, nudgeMouse 10s ease-out infinite;
}

.mouse:before,
.mouse:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.mouse:before {
  width: 20px;
  height: 40px;
  background-color: #222a30;
  border-radius: 100px;
}

.mouse:after {
  background-color: #ffffff;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  -webkit-animation: trackBallSlide 10s linear infinite;
  animation: trackBallSlide 10s linear infinite;
}

@-webkit-keyframes colorSlide {
  0% {
    background-position: 0% 100%;
  }

  20% {
    background-position: 0% 0%;
  }

  21% {
    background-color: #4e5559;
  }

  29.99% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }

  30% {
    background-color: #4e5559;
    background-position: 0% 100%;
  }

  50% {
    background-position: 0% 0%;
  }

  51% {
    background-color: #4e5559;
  }

  59% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }

  60% {
    background-color: #4e5559;
    background-position: 0% 100%;
  }

  80% {
    background-position: 0% 0%;
  }

  81% {
    background-color: #4e5559;
  }

  90%,
  100% {
    background-color: #ffffff;
  }
}

@keyframes colorSlide {
  0% {
    background-position: 0% 100%;
  }

  20% {
    background-position: 0% 0%;
  }

  21% {
    background-color: #4e5559;
  }

  29.99% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }

  30% {
    background-color: #4e5559;
    background-position: 0% 100%;
  }

  50% {
    background-position: 0% 0%;
  }

  51% {
    background-color: #4e5559;
  }

  59% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }

  60% {
    background-color: #4e5559;
    background-position: 0% 100%;
  }

  80% {
    background-position: 0% 0%;
  }

  81% {
    background-color: #4e5559;
  }

  90%,
  100% {
    background-color: #ffffff;
  }
}

@-webkit-keyframes trackBallSlide {
  0% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }

  6% {
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }

  14% {
    opacity: 0;
    transform: scale(0.4) translateY(40px);
  }

  15%,
  19% {
    opacity: 0;
    transform: scale(0.4) translateY(-20px);
  }

  28%,
  29.99% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }

  30% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }

  36% {
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }

  44% {
    opacity: 0;
    transform: scale(0.4) translateY(40px);
  }

  45%,
  49% {
    opacity: 0;
    transform: scale(0.4) translateY(-20px);
  }

  58%,
  59.99% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }

  60% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }

  66% {
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }

  74% {
    opacity: 0;
    transform: scale(0.4) translateY(40px);
  }

  75%,
  79% {
    opacity: 0;
    transform: scale(0.4) translateY(-20px);
  }

  88%,
  100% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }
}

@keyframes trackBallSlide {
  0% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }

  6% {
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }

  14% {
    opacity: 0;
    transform: scale(0.4) translateY(40px);
  }

  15%,
  19% {
    opacity: 0;
    transform: scale(0.4) translateY(-20px);
  }

  28%,
  29.99% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }

  30% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }

  36% {
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }

  44% {
    opacity: 0;
    transform: scale(0.4) translateY(40px);
  }

  45%,
  49% {
    opacity: 0;
    transform: scale(0.4) translateY(-20px);
  }

  58%,
  59.99% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }

  60% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }

  66% {
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }

  74% {
    opacity: 0;
    transform: scale(0.4) translateY(40px);
  }

  75%,
  79% {
    opacity: 0;
    transform: scale(0.4) translateY(-20px);
  }

  88%,
  100% {
    opacity: 1;
    transform: scale(1) translateY(-20px);
  }
}

@-webkit-keyframes nudgeMouse {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(8px);
  }

  30% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(8px);
  }

  90% {
    transform: translateY(0);
  }
}

@keyframes nudgeMouse {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(8px);
  }

  30% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(8px);
  }

  90% {
    transform: translateY(0);
  }
}

@-webkit-keyframes nudgeText {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(2px);
  }

  30% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(2px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(2px);
  }

  90% {
    transform: translateY(0);
  }
}

@keyframes nudgeText {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(2px);
  }

  30% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(2px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(2px);
  }

  90% {
    transform: translateY(0);
  }
}

@-webkit-keyframes colorText {
  21% {
    color: #4e5559;
  }

  30% {
    color: #ffffff;
  }

  51% {
    color: #4e5559;
  }

  60% {
    color: #ffffff;
  }

  81% {
    color: #4e5559;
  }

  90% {
    color: #ffffff;
  }
}

@keyframes colorText {
  21% {
    color: #4e5559;
  }

  30% {
    color: #ffffff;
  }

  51% {
    color: #4e5559;
  }

  60% {
    color: #ffffff;
  }

  81% {
    color: #4e5559;
  }

  90% {
    color: #ffffff;
  }
}

.mouse-p {
  -webkit-animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
  animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
  font-size: 12px;
  font-weight: bold;
}

.header-box {

  margin: auto;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);

}

.text-center {
  text-align: center;
}






.d-flex {
  display: flex;
}


.parallax__conten__last {
  position: relative;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  margin-top: 40px;
  min-height: auto;
  padding-bottom: 90px;
}

.logo-par {
  position: absolute;
  left: 50%;
  transform: translate(calc(-60% + 0px), calc(100% + 0px));
  width: 80px;
}

.par-logo-man {
  position: absolute;
  bottom: 16%;
  width: 100vw;
  height: auto;
  top: auto;
  max-height: 300px;
}

.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}

.card div {
  color: #fff;
  text-align: right;
  padding: 0 15px;
  text-align: center;
}

.card .title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.card .subtitle {
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  margin-top: 9px;
}

.card .desc {
  font-size: 12px;
  font-weight: 200;
  margin: 0;
  margin-top: 9px;
}

.card .price {
  text-align: center;
  margin: 15px 0 17px;
  font-size: 15px;
  color: #c2dbd8;
}

.card ul {
  margin-top: 30px;
  font-size: 12px;
  font-weight: bold;
  padding: 0 15px;
  margin-bottom: 0;
  list-style: none;
}

.card li {
  margin-bottom: 10px;
}

@media(min-width: 768px) {

  .card_first {
    transform: rotate(10deg);
    position: relative;
    left: -65px;
    top: 20px;
  }

  .card_first,
  .card_last {
    transition: all 0.5s
  }

  .card_first:hover,
  .card_first:focus {
    transform: rotate(0);
    left: 0px;
    top: 0px;
  }

  .card_last:hover,
  .card_last:focus {
    transform: rotate(0);
    top: 0px;
    right: 0
  }

  .card_last {
    transform: rotate(-11deg);
    position: relative;
    right: -65px;
    top: 20px;
  }

}

.card_midd {
  z-index: 1;
}

body .footer {
  z-index: 1;
  --footer-background: #f3f3fd;
  display: grid;
  position: relative;
  grid-area: footer;
  margin-top: 120px;
}

body .footer .bubbles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1rem;
  background: var(--footer-background);
  filter: url("#blob");
}

body .footer .bubbles .bubble {
  position: absolute;
  left: var(--position, 50%);
  background: var(--footer-background);
  border-radius: 100%;
  -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
  animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
  transform: translate(-50%, 100%);
}

body .footer .content {
  z-index: 2;
  padding: 25px 10px 20px;
  background: var(--footer-background);
  font-size: 11px;
  text-align: center;
  min-height: 170px;
  align-items: center;
  display: flex;
  justify-content: space-around;
}

body .footer .content a,
body .footer .content p {
  color: #000;
  text-decoration: none;
}

body .footer .content b {
  color: #000;
  border-left: 1px solid #00000080;
  padding-left: 10px;
  margin-left: 0 !important;
}

body .footer .content p {
  margin: 0;
  font-size: 0.75rem;
}

body .footer .content>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body .footer .content>div>div {
  margin: 0.25rem 0;
}

body .footer .content>div>div>* {
  margin: 0 10px;
}

body .footer .content>div .image {
  align-self: center;
  width: 4rem;
  height: 4rem;
  margin: 0.25rem 0;
  background-size: cover;
  background-position: center;
}

@-webkit-keyframes bubble-size {

  0%,
  75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }

  100% {
    width: 0rem;
    height: 0rem;
  }
}

@keyframes bubble-size {

  0%,
  75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }

  100% {
    width: 0rem;
    height: 0rem;
  }
}

@-webkit-keyframes bubble-move {
  0% {
    bottom: -4rem;
  }

  100% {
    bottom: var(--distance, 10rem);
  }
}

@keyframes bubble-move {
  0% {
    bottom: -4rem;
  }

  100% {
    bottom: var(--distance, 10rem);
  }
}





.prompt input {
  width: 100%;
  padding: 10px 20px;
  border: 1px solid #1b1b1b20;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: bold;
}


.prompt {
  position: absolute;
  padding: 15px 20px;
  background: #ffffffd6;
  backdrop-filter: blur(3px);

  box-shadow: 0px 4px 16px 0px hsla(0, 0%, 0%, 0.125);
  border-radius: 5px;
  font-weight: 300;
  max-width: 300px;
  text-align: center;
  z-index: 10000;
  color: #000;
  width: 95%;
  top: 50px;
  border: 1px solid #1b1b1b20;
  right: 10px;
}

[dir="rtl"] .prompt {
  left: 10px;
  right: auto;
}

.prompt p {
  margin: 10px 0 15px;
  font-size: 13px;
}

.prompt__buttons {
  display: flex;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

.prompt__button {
  line-height: 40px;
  width: 100%;
  display: block;
  height: 40px;
  background: #1d1934;
  color: #fff;
  border: 0;
  font-weight: 600;
  border-radius: 0.5rem;
  font-family: inherit;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  display: block;
}

.prompt__button--fullscreen {
  background: #fff;
  color: #1d1934;

  border: 1px solid #1b1b1b20;
}

@media only screen and (max-width: 480px) {
  .prompt__buttons {
    grid-template-columns: 1fr;
  }
}

.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e550;
}

.accordion .accordion-item button[aria-expanded=true] {
  border-bottom: 1px solid #549b95;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #7288a2;
  font-size: 15px;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #549b95;
  font-weight: bold;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #549b95;
  border: 1px solid #549b95;
  font-weight: bold;
}

.accordion button .accordion-title {
  padding: 0em 1.7em 0em 0;
  display: block;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 6px;
  width: 8px;
  height: 2px;
  background: currentColor;
}

.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded=true] {
  color: #549b95;
  font-weight: bold;
}

.accordion button[aria-expanded=true] .icon::after {
  width: 0;
}

.accordion button[aria-expanded=true]+.accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}

.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}

.accordion .accordion-content p {
  font-size: 13px;
  font-weight: 300;
  margin: 20px 0;
}

[dir="rtl"] .accordion button {
  text-align: right;
}

[dir="rtl"] .accordion button .icon {
  left: 0;
  right: auto;
}


[dir="rtl"] .accordion button .accordion-title {
  padding: 0em 0 0em 1.7em;
}


.parallax__content__box {
  padding: 60px 20px 0;
}


.content_title {
  font-size: 16px;
  font-weight: bold;
}

.faq-box {
  border: 1px solid #f3f3fd6b;
  border-radius: 10px;
  padding: 0 20px;
}


.assets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* فاصله بین آیتم‌ها */
}

.assets .asset {
  width: 100%;
  display: block;
  font-size: 14px;
  text-decoration: none;
  outline: none;
  flex: 1 1 calc(20% - 10px);
  padding: 0 10px 10px;
}


.assets .asset img {
  height: 150px;
  object-fit: cover;
  width: 100%;
  border-radius: 10px;
}


@media(max-width: 768px) {
  .assets .asset {
    flex: 1 1 calc(50% - 10px);
  }

  .assets .asset img {
    height: 120px;
  }

}

.assets .asset p {
  font-weight: bold;
  margin: 5px 0;
  text-align: center;
}