@charset "UTF-8";
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  overflow-x: hidden;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #0d62da;
  transition: color 0.3s ease;
}

input, textarea, button, input {
  font-family: inherit;
}

@font-face {
  font-family: "Rokh";
  src: url("/font/RokhFaNum-Bold.eot");
  src: url("/font/RokhFaNum-Bold.eot?#iefix") format("embedded-opentype"), url("/font/RokhFaNum-Bold.woff2") format("woff2"), url("/font/RokhFaNum-Bold.woff") format("woff"), url("/font/RokhFaNum-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RokhMedium";
  src: url("/font/medium/RokhFaNum-Medium.eot");
  src: url("/font/medium/RokhFaNum-Medium.eot?#iefix") format("embedded-opentype"), url("/font/medium/RokhFaNum-Medium.woff2") format("woff2"), url("/font/medium/RokhFaNum-Medium.woff") format("woff"), url("/font/medium/RokhFaNum-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media only screen and (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media only screen and (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media only screen and (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media only screen and (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

.sticky {
  position: sticky;
  top: 0;
}

.flex {
  display: flex;
}

.rowّ {
  flex-direction: row;
}

.row-reverse {
  flex-direction: row-reverse;
}

.column {
  flex-direction: column;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.align-self-end {
  align-self: end;
}

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

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

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

.wrap {
  flex-wrap: wrap;
}

.pt-10 {
  padding-top: 1rem;
}

.pt-20 {
  padding-top: 2rem;
}

.pt-30 {
  padding-top: 3rem;
}

.pt-40 {
  padding-top: 4rem;
}

.pt-50 {
  padding-top: 5rem;
}

.pr-10 {
  padding-right: 1rem;
}

.pr-20 {
  padding-right: 2rem;
}

.pr-30 {
  padding-right: 3rem;
}

.pr-50 {
  padding-right: 5rem;
}

.pb-10 {
  padding-bottom: 1rem;
}

.pb-20 {
  padding-bottom: 2rem;
}

.pb-30 {
  padding-bottom: 3rem;
}

.pb-40 {
  padding-bottom: 4rem;
}

.pb-50 {
  padding-bottom: 5rem;
}

.mt-10 {
  margin-top: 1rem;
}

.mt-20 {
  margin-top: 2rem;
}

.mt-30 {
  margin-top: 3rem;
}

.mt-40 {
  margin-top: 4rem;
}

.mt-50 {
  margin-top: 5rem;
}

.mt-100 {
  margin-top: 10rem;
}

.mt-200 {
  margin-top: 20rem;
}

.p {
  padding: 1rem 1rem 1rem 1rem;
}

.mb-10 {
  margin-bottom: 1rem;
}

.mb-20 {
  margin-bottom: 2rem;
}

.mb-30 {
  margin-bottom: 3rem;
}

.mb-40 {
  margin-bottom: 4rem;
}

.mb-50 {
  margin-bottom: 5rem;
}

.mb-100 {
  margin-bottom: 10rem;
}

.mr-5 {
  margin-right: 0.5rem;
}

.mr-10 {
  margin-right: 1rem;
}

.mr-20 {
  margin-right: 2rem;
}

.mr-30 {
  margin-right: 3rem;
}

.ml-5 {
  margin-left: 0.5rem;
}

.m {
  margin: 1rem 1rem 1rem 1rem;
}

.mr-5 {
  margin-right: 0.5rem;
}

.mr-auto {
  margin-right: auto;
}

.w-30 {
  width: 30rem;
}

.w-35 {
  width: 3.5rem;
}

.w-100-precent {
  width: 100%;
}

.box-shodow {
  box-shadow: rgb(175, 174, 174) 0 0 0.6rem;
}

.h-auto {
  height: auto;
}

.text-success {
  color: rgb(13, 253, 81);
}

.text-danger {
  color: rgb(246, 11, 11);
}

.text-red {
  color: rgb(227, 24, 24);
  font-family: "Rokh";
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

.trash-icon {
  width: 2rem;
  color: rgb(244, 59, 59);
  cursor: pointer;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 60rem;
  background-color: #292929;
  border-bottom-left-radius: 28rem;
  border: none;
  overflow: hidden;
}
@media only screen and (max-width: 1048px) {
  .header {
    height: 55rem;
  }
}
@media only screen and (max-width: 988px) {
  .header {
    height: 50rem;
  }
}
@media only screen and (max-width: 834px) {
  .header {
    height: 45rem;
  }
}
@media only screen and (max-width: 776px) {
  .header {
    height: 60rem;
  }
}

.header-project {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 10rem;
  background-color: #ffffff;
  margin-bottom: 5rem;
}

.navbar {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar__box {
  width: 70%;
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 0.5rem 0.5rem 0 0;
}
@media only screen and (max-width: 776px) {
  .navbar__box {
    width: 50%;
  }
}
.navbar__menu {
  width: auto;
  display: flex;
  justify-content: start;
  align-items: center;
  height: auto;
}
@media only screen and (max-width: 776px) {
  .navbar__menu {
    display: none;
  }
}
.navbar__berger-menu {
  display: none;
  color: #ffffff;
  cursor: pointer;
  width: 6rem;
  margin-right: 1rem;
}
@media only screen and (max-width: 776px) {
  .navbar__berger-menu {
    display: flex;
  }
}
.navbar__berger-menu-project {
  display: none;
  color: #292929;
  cursor: pointer;
  width: 6rem;
  margin-right: 1rem;
}
@media only screen and (max-width: 776px) {
  .navbar__berger-menu-project {
    display: flex;
  }
}
.navbar__items {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-right: 6rem;
}
@media only screen and (max-width: 940px) {
  .navbar__items {
    margin-right: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media only screen and (max-width: 940px) and (max-width: 490px) {
  .navbar__items {
    margin-right: 1rem;
  }
}
.navbar__items li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11rem;
  height: auto;
  line-height: nowrap;
}
@media only screen and (max-width: 1000px) {
  .navbar__items li {
    width: 9rem;
  }
}
.navbar__items li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  width: 11rem;
  margin-left: 0.5rem;
  font-family: "Rokh";
  color: #ffffff;
  transition: color ease 0.3s;
}
@media only screen and (max-width: 1000px) {
  .navbar__items li a {
    width: 9rem;
    font-size: 1.3rem;
    margin-left: 0.1rem;
  }
}
@media only screen and (max-width: 490px) {
  .navbar__items li a {
    font-size: 1.2rem;
    width: 7rem;
  }
}
.navbar__items li a:hover {
  color: #8c68cd;
}
.navbar__items-project {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-right: 6rem;
}
@media only screen and (max-width: 940px) {
  .navbar__items-project {
    margin-right: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media only screen and (max-width: 940px) and (max-width: 490px) {
  .navbar__items-project {
    margin-right: 1rem;
  }
}
.navbar__items-project li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11rem;
  height: auto;
}
@media only screen and (max-width: 1000px) {
  .navbar__items-project li {
    width: 9rem;
  }
}
.navbar__items-project li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  width: 11rem;
  margin-left: 0.5rem;
  font-family: "Rokh";
  color: #292929;
  transition: color ease 0.3s;
}
@media only screen and (max-width: 1000px) {
  .navbar__items-project li a {
    width: 9rem;
    font-size: 1.3rem;
    margin-left: 0.1rem;
  }
}
@media only screen and (max-width: 490px) {
  .navbar__items-project li a {
    font-size: 1.2rem;
    width: 7rem;
  }
}
.navbar__items-project li a:hover {
  color: #8c68cd;
}
.navbar__item-svg {
  width: 2rem;
  margin-left: 0.5rem;
}
@media only screen and (max-width: 490px) {
  .navbar__item-svg {
    width: 1rem;
  }
}
.navbar__users {
  margin: 0.5rem 0.5rem 0 0.5rem;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 409px) {
  .navbar__users {
    margin-left: 1rem;
  }
}

.content {
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 776px) {
  .content {
    position: relative;
  }
}
.content__text, .content__img {
  width: 50%;
}
.content__text {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: column;
  height: auto;
}
@media only screen and (max-width: 776px) {
  .content__text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 5rem;
    z-index: 50;
  }
}
.content__text-items {
  height: 100%;
}
@media only screen and (max-width: 776px) {
  .content__text-items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.content__text-items h1 {
  font-size: 5rem;
  font-family: "Rokh";
  color: #ffffff;
  font-size: 4rem;
}
@media only screen and (max-width: 1200px) {
  .content__text-items h1 {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 980px) {
  .content__text-items h1 {
    font-size: 2.5rem;
  }
}
@media only screen and (max-width: 898px) {
  .content__text-items h1 {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 776px) {
  .content__text-items h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.content__text-items h2 {
  font-size: 3.5rem;
  font-family: "Rokh";
  font-weight: normal;
  color: #ffffff;
  margin-top: 2rem;
}
@media only screen and (max-width: 1200px) {
  .content__text-items h2 {
    font-size: 3.5rem;
  }
}
@media only screen and (max-width: 980px) {
  .content__text-items h2 {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 898px) {
  .content__text-items h2 {
    font-size: 2.5rem;
  }
}
@media only screen and (max-width: 776px) {
  .content__text-items h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.content__text-items p {
  font-family: "Rokh";
  color: #ffffff;
  margin-top: 4rem;
}
@media only screen and (max-width: 1268px) {
  .content__text-items p {
    width: 40rem;
  }
}
@media only screen and (max-width: 1068px) {
  .content__text-items p {
    width: 35rem;
  }
}
@media only screen and (max-width: 991px) {
  .content__text-items p {
    width: 30rem;
  }
}
@media only screen and (max-width: 776px) {
  .content__text-items p {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.content__img {
  display: flex;
  justify-content: end;
  align-items: center;
  height: auto;
  border-bottom-left-radius: 28rem;
}
@media only screen and (max-width: 776px) {
  .content__img {
    width: 100%;
  }
}
.content__img img {
  width: 60rem;
  height: 50rem;
  margin-left: 5rem;
  padding-top: 1rem;
}
@media only screen and (max-width: 1268px) {
  .content__img img {
    height: 45rem;
  }
}
@media only screen and (max-width: 1034px) {
  .content__img img {
    width: 55rem;
    height: 40rem;
  }
}
@media only screen and (max-width: 980px) {
  .content__img img {
    height: 35rem;
  }
}
@media only screen and (max-width: 898px) {
  .content__img img {
    height: 35rem;
  }
}
@media only screen and (max-width: 834px) {
  .content__img img {
    width: 50rem;
    height: 30rem;
  }
}
@media only screen and (max-width: 776px) {
  .content__img img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: 50rem;
    filter: blur(2.25px) brightness(0.5);
  }
}

.responsive-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: right;
  transition: transform cubic-bezier(0.21, -0.48, 0.73, 1.51) 0.4s;
  transform: scale(0);
}

.responsive-menu-project {
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: right;
  transition: transform cubic-bezier(0.21, -0.48, 0.73, 1.51) 0.4s;
  transform: scale(0);
}

@media only screen and (max-width: 776px) {
  .menu-active {
    transform: scale(1);
    transform-origin: right;
    transition: transform cubic-bezier(0.21, -0.48, 0.73, 1.51) 0.4s;
    backdrop-filter: blur(2.25px);
  }
}

.service {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.service__text, .service__icon {
  width: 100%;
  height: 17rem;
}
.service__text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 2rem;
}
.service__text h3 {
  font-family: "Rokh";
  font-weight: bold;
}
.service__text p {
  font-family: "Rokh";
  margin-top: 2.5rem;
  font-weight: bold;
  font-size: 1.1rem;
}
.service__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: auto;
}
@media only screen and (max-width: 776px) {
  .service__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.service__item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 20rem;
  margin: 0 1.5rem 0 1.5rem;
  height: 15rem;
}
@media only screen and (max-width: 996px) {
  .service__item {
    margin: 0 1rem 0 1rem;
  }
}
.service__item-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  height: 6rem;
}
.service__item-logo-ineer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 5rem 5rem;
  background-color: #e4dbf3;
}
@media only screen and (max-width: 776px) {
  .service__item-logo-ineer {
    width: 4rem;
    height: 4rem;
  }
}
.service__svg-code {
  color: #8c68cd;
}
@media only screen and (max-width: 776px) {
  .service__svg-code {
    width: 2.5rem;
  }
}
.service__item-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 1rem;
}
.service__item-text h5 {
  font-family: "Rokh";
  font-size: 1.5rem;
  font-weight: bold;
}
@media only screen and (max-width: 992px) {
  .service__item-text h5 {
    font-size: 1.1rem;
    font-weight: bold;
  }
}
.service__item-text p {
  font-family: "Rokh";
  font-size: 1rem;
  margin-top: 0.5rem;
  font-weight: bold;
}
@media only screen and (max-width: 992px) {
  .service__item-text p {
    font-size: 1.2rem;
  }
}

.cover-route {
  width: 100%;
  height: 60rem;
  background-color: #f0f1f4;
  margin-top: 5rem;
}
@media only screen and (max-width: 993px) {
  .cover-route {
    height: 120rem;
  }
}

.route {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60rem;
}
@media only screen and (max-width: 993px) {
  .route {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100rem;
    padding: 2rem 0 2rem 0;
  }
}
.route__video, .route__category {
  width: 50%;
  height: 50rem;
}
@media only screen and (max-width: 993px) {
  .route__video, .route__category {
    width: 100%;
  }
}
.route__video {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
}
@media only screen and (max-width: 993px) {
  .route__video {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 5rem;
    margin-bottom: 3rem;
    padding-top: 5rem;
  }
}
.route__category {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
}
@media only screen and (max-width: 1200px) {
  .route__category {
    margin-right: 2rem;
  }
}
@media only screen and (max-width: 993px) {
  .route__category {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    margin-top: 5rem;
  }
}
.route__text-item {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  height: auto;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 993px) {
  .route__text-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.route__text-item h3, .route__text-item p {
  font-family: "Rokh";
}
@media only screen and (max-width: 776px) {
  .route__text-item p {
    font-size: 1.2rem;
  }
}
.route__text-item h3 {
  margin-bottom: 2rem;
}
@media only screen and (max-width: 776px) {
  .route__text-item h3 {
    font-size: 1.5rem;
  }
}
.route__video-item {
  position: relative;
  height: 40rem;
  width: 50rem;
}
@media only screen and (max-width: 1200px) {
  .route__video-item {
    height: 40rem;
    width: 45rem;
  }
}
@media only screen and (max-width: 993px) {
  .route__video-item {
    height: 40rem;
    width: 65rem;
  }
}
@media only screen and (max-width: 680px) {
  .route__video-item {
    width: 100%;
  }
}
.route__video-item img {
  height: 40rem;
  width: 50rem;
  filter: brightness(42%);
  -webkit-filter: brightness(42%);
  -moz-filter: brightness(42%);
}
@media only screen and (max-width: 1200px) {
  .route__video-item img {
    height: 40rem;
    width: 45rem;
  }
}
@media only screen and (max-width: 993px) {
  .route__video-item img {
    height: 40rem;
    width: 65rem;
  }
}
@media only screen and (max-width: 680px) {
  .route__video-item img {
    width: 100%;
  }
}
.route__item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
}
@media only screen and (max-width: 1200px) {
  .route__item {
    display: flex;
    justify-content: end;
    align-items: end;
    flex-direction: row;
  }
}
.route__icon {
  margin-left: 4rem;
}
.route__icon-arrow {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 5rem 5rem;
  background-color: #8c68cd;
}
.route__icon-arrow svg {
  width: 2rem;
  height: 2rem;
  color: #ffffff;
}
.route__text h4, .route__text p {
  font-family: "Rokh";
}
@media only screen and (max-width: 776px) {
  .route__text p {
    font-size: 1.2rem;
  }
}
.route__text h4 {
  margin-bottom: 1.5rem;
}
@media only screen and (max-width: 776px) {
  .route__text h4 {
    font-size: 1.5rem;
  }
}
.route__arrow {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 20rem;
  width: 100%;
}
.route__svg-arrow-out {
  height: 1rem;
}

.video-play-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  z-index: 50;
  left: 45%;
  top: 45%;
  background-color: rgba(255, 255, 255, 0.5450980392);
  width: 6rem;
  height: 6rem;
  border-radius: 5rem 5rem;
  cursor: pointer;
}

.video-play-ineer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid #ffffff;
  border-radius: 5rem 5rem;
}

.video-play {
  width: 1.2rem;
  height: 1.2rem;
  color: #ffffff;
  stroke: 1.2rem;
}

.svg-body {
  stroke-width: 10px;
  width: 100px;
}

.cover-project {
  display: flex;
  justify-content: center;
  align-items: end;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100rem;
  background-color: #292929;
  overflow: hidden;
  margin-bottom: 10rem;
}
.cover-project::before {
  position: absolute;
  content: "";
  top: -15rem;
  left: -5rem;
  width: 37rem;
  height: 37rem;
  border-radius: 50% 50%;
  background-color: #322F38;
}

.project-text {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 8rem;
}
.project-text h3 {
  margin-bottom: 2rem;
}
.project-text h3, .project-text p {
  color: #ffffff;
  font-family: "Rokh";
}

.project {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  margin-top: 10rem;
}
.project__slider {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
}
.project__navigations, .project__navigations2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5rem;
}

.tabindex-color-with {
  border: 1px solid #ffffff;
}

.tabindex-color-black {
  border: 1px solid #555454;
}

.arrow-color {
  color: #ffffff;
}

.swiper-slide {
  width: none;
  flex-shrink: 1;
}

.swiper-pagination-bullet {
  opacity: 1;
  width: 0.7rem;
  height: 0.3rem;
  border-radius: 5rem 5rem;
  background-color: #e0dede;
  margin-left: 0.2rem;
}

.swiper-pagination-bullet-active {
  width: 2rem;
  height: 0.3rem;
  border-radius: 5rem 5rem;
  background-color: #8c68cd;
  transition: all 0.3s cubic-bezier(0.21, -0.48, 0.73, 1.51);
}

.freelancer__slider {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
}

.feadback {
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .feadback {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
  }
}
.feadback__text {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 70%;
  height: 70rem;
}
@media only screen and (max-width: 990px) {
  .feadback__text {
    width: 65%;
    margin-left: 3rem;
  }
}
@media only screen and (max-width: 768px) {
  .feadback__text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
  }
}
.feadback__title {
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 768px) {
  .feadback__title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.feadback__title h4 {
  margin-bottom: 3.5rem;
  font-family: "Rokh";
  font-size: 2rem;
}
@media only screen and (max-width: 560px) {
  .feadback__title h4 {
    font-size: 1.7rem;
  }
}
.feadback__title p {
  font-family: "Rokh";
  font-size: 1.5rem;
}
@media only screen and (max-width: 560px) {
  .feadback__title p {
    font-size: 1.3rem;
  }
}
.feadback__items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 5rem;
}
@media only screen and (max-width: 768px) {
  .feadback__items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.feadback__item {
  display: flex;
  justify-content: space-around;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: 19rem;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 768px) {
  .feadback__item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
  }
}
@media only screen and (max-width: 768px) {
  .feadback__item-icon {
    display: flex;
    justify-content: center center;
    align-items: column;
  }
}
.feadback__item-icon svg {
  color: #8c68cd;
}
.feadback__item-title {
  font-family: "Rokh";
  font-size: 1.5rem;
  font-weight: bold;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .feadback__item-title {
    text-align: center;
  }
}
@media only screen and (max-width: 560px) {
  .feadback__item-title {
    font-size: 1.3rem;
  }
}
.feadback__item-title span {
  font-family: "Rokh";
  font-weight: normal;
  color: #8c68cd;
  font-size: 1.6rem;
}
@media only screen and (max-width: 560px) {
  .feadback__item-title span {
    font-size: 1.4rem;
  }
}
.feadback__item-body {
  margin-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
  .feadback__item-body {
    text-align: center;
  }
}
.feadback__item-body p {
  font-family: "Rokh";
}
@media only screen and (max-width: 560px) {
  .feadback__item-body p {
    font-size: 1.1rem;
  }
}
.feadback__img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
}
@media only screen and (max-width: 990px) {
  .feadback__img {
    width: 35%;
  }
}
@media only screen and (max-width: 768px) {
  .feadback__img {
    width: 100%;
  }
}
.feadback__img img {
  width: 100%;
  height: 60rem;
}
@media only screen and (max-width: 768px) {
  .feadback__img img {
    height: 40rem;
  }
}

.feadback-user {
  width: 100%;
  margin-top: 10rem;
}

.cover-feadback-user {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60rem;
  background-color: #292929;
  overflow: hidden;
}
.cover-feadback-user::before {
  position: absolute;
  content: "";
  top: -15rem;
  right: -5rem;
  width: 37rem;
  height: 37rem;
  border-radius: 50% 50%;
  background-color: #322F38;
}

.user__slider {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.user__title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 5rem;
  width: 100%;
  margin-bottom: 7rem;
}
.user__title h4 {
  font-family: "Rokh";
  color: #ffffff;
  margin-bottom: 2rem;
}
.user__title p {
  font-family: "Rokh";
  color: #ffffff;
}

.project__navigations3 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}

.faq {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 8rem;
  margin-bottom: 8rem;
}
@media only screen and (max-width: 767px) {
  .faq {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.faq__text, .faq__question {
  width: 50%;
}
@media only screen and (max-width: 767px) {
  .faq__text, .faq__question {
    width: 100%;
  }
}
.faq__question {
  height: auto;
}
.faq__text {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  height: 30rem;
}
.faq__text h4 {
  font-family: "Rokh";
  font-size: 1.7rem;
}
.faq__text p {
  font-family: "Rokh";
  margin-top: 3rem;
  padding-left: 5rem;
}
.faq__item {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}
.faq__question-close {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
  border-radius: 0.5rem 0.5rem;
  background-color: #000000;
  cursor: pointer;
}
.faq__question-close p {
  color: #ffffff;
  font-family: "Rokh";
  margin-right: 1rem;
}
.faq__question-close svg {
  color: #ffffff;
  margin-left: 1rem;
  width: 2rem;
}
.faq__question-open {
  width: 100%;
  height: 12rem;
  background-color: #DEE1E6;
  border-radius: 1rem 1rem;
}
.faq__question-text {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 12rem;
  background-color: transparent;
}
.faq__question-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 3rem;
  background-color: transparent;
}
.faq__question-body p {
  margin-right: 1rem;
  font-family: "Rokh";
  cursor: pointer;
}
.faq__question-body svg {
  margin-left: 1rem;
  width: 2rem;
  transform: rotate(0.5turn);
}
.faq__answer {
  background-color: #E8ECEF;
  padding: 1rem 1rem 1rem 1rem;
  height: auto;
  width: 95%;
  border-radius: 0.5rem 0.5rem;
  white-space: wrap;
}
.faq__answer p {
  font-family: "Rokh";
}

input[name=acourding] {
  display: none;
}

.faq__question-open {
  height: 0;
  transition: all 0.3s cubic-bezier(0.21, -0.48, 0.73, 1.51);
  overflow: hidden;
}

.faq__question-close {
  height: 4rem;
  transition: all 0.3s cubic-bezier(0.21, -0.48, 0.73, 1.51);
}

input[name=acourding]:checked ~ .faq__question-close {
  height: 0;
  overflow: hidden;
}

input[name=acourding]:checked ~ .faq__question-open {
  height: 12rem;
}

.cover-banner {
  width: 100%;
  height: 40rem;
  background-color: #2c1a4c;
}

.main-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5rem;
  padding: 3rem 3rem;
  cursor: pointer;
  background: linear-gradient(265deg, rgb(140, 104, 205) 7%, rgb(250, 250, 250) 100%);
  color: white;
}
.main-banner p {
  font-family: "Rokh";
  font-size: 1.5rem;
}
.main-banner span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7rem;
  height: 3rem;
  background-color: #8c68cd;
  border-radius: 1rem 1rem;
  color: white;
  padding: 1rem 1rem;
  white-space: nowrap;
  font-family: "Rokh";
}

.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.fother-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 50rem;
  background-color: #292929;
  margin-top: -2rem;
}
@media only screen and (max-width: 594px) {
  .fother-cover {
    height: 100rem;
  }
}

.fother {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: 35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2470588235);
}
@media only screen and (max-width: 594px) {
  .fother {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
  }
}
@media only screen and (max-width: 594px) {
  .fother {
    height: auto;
  }
}
.fother__about, .fother__menu, .fother__service, .fother__assess {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 30rem;
  height: auto;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 594px) {
  .fother__about, .fother__menu, .fother__service, .fother__assess {
    margin-bottom: 0;
  }
}
.fother__about-logo {
  font-family: "Rokh";
  font-size: 2.5rem;
  color: #ffffff;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .fother__about-logo {
    font-size: 2.1rem;
  }
}
.fother__about-logo span {
  color: #8c68cd;
}
.fother__about-body {
  font-family: "Rokh";
  font-size: 1.3rem;
  padding: 0 0 0 3rem;
  margin-top: 2rem;
  color: #ffffff;
}
@media only screen and (max-width: 768px) {
  .fother__about-body {
    font-size: 1rem;
  }
}
.fother__menu h4, .fother__service h4, .fother__assess h4 {
  font-family: "Rokh";
  font-size: 1.3rem;
  color: #ffffff;
  margin-bottom: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .fother__menu h4, .fother__service h4, .fother__assess h4 {
    font-size: 1rem;
  }
}
.fother__menu a, .fother__service a, .fother__assess a {
  font-family: "Rokh";
  font-size: 1.3rem;
  margin-top: 1rem;
  color: #ffffff;
}
@media only screen and (max-width: 768px) {
  .fother__menu a, .fother__service a, .fother__assess a {
    font-size: 1rem;
  }
}
.fother__enamad {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 30rem;
  height: auto;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 594px) {
  .fother__enamad {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
  }
}
.fother__enamad h4 {
  font-family: "Rokh";
  font-size: 1.3rem;
  color: #ffffff;
  margin-bottom: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .fother__enamad h4 {
    font-size: 1rem;
  }
}

.licence {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 2rem;
  margin-top: 2rem;
}
.licence__app {
  width: auto;
  height: auto;
}
.licence svg {
  cursor: pointer;
}
.licence__body p {
  font-family: "Rokh";
  color: #ffffff;
}
@media only screen and (max-width: 594px) {
  .licence__body p {
    font-size: 1rem;
  }
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
}
.modal__project, .modal__project2 {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 75rem;
  height: 70rem;
  background-color: #ffffff;
  border-radius: 1.5rem 1.5rem;
  box-shadow: 0 0 0.5rem rgba(120, 120, 120, 0.688);
  overflow-y: scroll;
}
@media only screen and (max-width: 767px) {
  .modal__project, .modal__project2 {
    width: 70rem;
    height: 100%;
  }
}
@media only screen and (max-width: 710px) {
  .modal__project, .modal__project2 {
    width: 70rem;
  }
}
@media only screen and (max-width: 652px) {
  .modal__project, .modal__project2 {
    width: 60rem;
  }
}
@media only screen and (max-width: 611px) {
  .modal__project, .modal__project2 {
    width: 55rem;
  }
}
@media only screen and (max-width: 566px) {
  .modal__project, .modal__project2 {
    width: 100%;
  }
}
.modal__header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 95%;
  height: 3rem;
  margin-top: 4rem;
}
.modal__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
}
.modal__title h4 {
  font-family: "Rokh";
  font-size: 1.2rem;
}
.modal__title svg {
  width: 2.5rem;
  opacity: 0.3;
  cursor: pointer;
}
.modal__text {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  margin-top: 0.5rem;
}
.modal__text p {
  font-family: "Rokh";
  font-size: 1.1rem;
}
.modal__input-project {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 95%;
  margin-top: 2rem;
  height: auto;
}
.modal__content {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 95%;
  height: 4rem;
  margin-top: 2rem;
}
.modal__content h4 {
  font-family: "Rokh";
  font-size: 1.2rem;
}
.modal__content p {
  font-family: "Rokh";
  margin-top: 0.5rem;
  font-size: 1.1rem;
}
.modal__btn {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row-reverse;
  width: 95%;
  height: 4rem;
  margin-top: 1rem;
}

.modal-hidden {
  transform: scale(0);
  transition: all 0.4s ease;
  transform-origin: bottom;
}

.modal-active {
  transform: scale(1);
  transition: all 0.4s ease;
  transform-origin: bottom;
}

.darkmode {
  backdrop-filter: blur(2.25px);
}

.modal-video {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: transparent;
}

.modal-video-hidden {
  display: none;
}

.modal-content-video-active {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 60rem;
  height: 40rem;
  background-color: #ffffff;
  border-radius: 1rem 1rem;
  box-shadow: 0 0 0.5rem rgba(120, 120, 120, 0.688);
  transform: scale(1);
  transition: all 1s cubic-bezier(0.21, -0.48, 0.73, 1.51);
}
@media only screen and (max-width: 768px) {
  .modal-content-video-active {
    width: 70rem;
  }
}
@media only screen and (max-width: 710px) {
  .modal-content-video-active {
    width: 65rem;
  }
}
@media only screen and (max-width: 652px) {
  .modal-content-video-active {
    width: 60rem;
  }
}
@media only screen and (max-width: 611px) {
  .modal-content-video-active {
    width: 55rem;
  }
}
@media only screen and (max-width: 566px) {
  .modal-content-video-active {
    width: 50rem;
  }
}
@media only screen and (max-width: 504px) {
  .modal-content-video-active {
    width: 45rem;
  }
}
@media only screen and (max-width: 456px) {
  .modal-content-video-active {
    width: 40rem;
  }
}
@media only screen and (max-width: 403px) {
  .modal-content-video-active {
    width: 35rem;
  }
}
@media only screen and (max-width: 353px) {
  .modal-content-video-active {
    width: 30rem;
  }
}

.modal-content-video-hidden {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 60rem;
  height: 40rem;
  background-color: #ffffff;
  border-radius: 1rem 1rem;
  box-shadow: 0 0 0.5rem rgba(120, 120, 120, 0.688);
  transform: scale(0);
  transition: all 1s cubic-bezier(0.21, -0.48, 0.73, 1.51);
}
@media only screen and (max-width: 768px) {
  .modal-content-video-hidden {
    width: 70rem;
  }
}
@media only screen and (max-width: 710px) {
  .modal-content-video-hidden {
    width: 65rem;
  }
}
@media only screen and (max-width: 652px) {
  .modal-content-video-hidden {
    width: 60rem;
  }
}
@media only screen and (max-width: 611px) {
  .modal-content-video-hidden {
    width: 55rem;
  }
}
@media only screen and (max-width: 566px) {
  .modal-content-video-hidden {
    width: 50rem;
  }
}
@media only screen and (max-width: 504px) {
  .modal-content-video-hidden {
    width: 45rem;
  }
}
@media only screen and (max-width: 456px) {
  .modal-content-video-hidden {
    width: 40rem;
  }
}
@media only screen and (max-width: 403px) {
  .modal-content-video-hidden {
    width: 35rem;
  }
}
@media only screen and (max-width: 353px) {
  .modal-content-video-hidden {
    width: 30rem;
  }
}

.modal-header-video {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
  height: 3rem;
}
.modal-header-video svg {
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  width: 2.5rem;
  opacity: 0.5;
  cursor: pointer;
}

.modal-item-video {
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100%;
  height: 100%;
}
.modal-item-video video {
  width: 95%;
  height: 95%;
}
.modal-item-video video source {
  width: 100%;
  height: 100%;
}

.main-menu-mobile {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  position: fixed;
  width: 30%;
  height: 100%;
  top: 0;
  right: -60rem;
  z-index: 100;
  background-color: #ffffff;
  transition: all cubic-bezier(0.21, -0.48, 0.73, 1.51) 0.3s;
  box-shadow: rgb(174, 174, 174) 0 0 0.6rem;
}
@media only screen and (max-width: 804px) {
  .main-menu-mobile {
    width: 50%;
  }
}
.main-menu-mobile__logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 95%;
  height: 5rem;
}
.main-menu-mobile__logo span {
  font-family: "Rokh";
  font-size: 2.5rem;
}
.main-menu-mobile__logo span .main-menu-mobile-min {
  font-family: "Rokh";
  font-size: 2.5rem;
  font-weight: bold;
  color: #8c68cd;
}
.main-menu-mobile__logo svg {
  color: rgb(149, 148, 148);
  cursor: pointer;
}
.main-menu-mobile__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 95%;
  height: 10rem;
  border-radius: 0.5rem 0.5rem;
  border: 1px solid #8c68cd;
  margin-top: 2rem;
}
.main-menu-mobile__info svg {
  margin-left: 1rem;
  color: rgb(136, 136, 136);
  width: 3rem;
  height: 3rem;
}
.main-menu-mobile__info-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 70%;
  height: auto;
  border-radius: 5rem 5rem;
  overflow: hidden;
}
@media only screen and (max-width: 804px) {
  .main-menu-mobile__info-item {
    width: 80%;
  }
}
.main-menu-mobile__info-item img {
  width: 7rem;
  height: 7rem;
  margin-left: 2rem;
  border-radius: 5rem 5rem;
}
.main-menu-mobile__info-item h6 {
  font-family: "Rokh";
  font-size: 1.2rem;
  color: #000000;
}
@media only screen and (max-width: 804px) {
  .main-menu-mobile__info-item h6 {
    font-size: 1.1rem;
  }
}
.main-menu-mobile__menu {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
.main-menu-mobile__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 96%;
  height: 5rem;
  margin-top: 2rem;
  font-family: "Rokh";
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.21, -0.48, 0.73, 1.51);
  padding-right: 2rem;
}
.main-menu-mobile__item:hover {
  color: #8c68cd;
}
.main-menu-mobile__item svg {
  width: 1.5rem;
  height: 1.5rem;
}
.main-menu-mobile__item-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 96%;
  height: 5rem;
  margin-top: 2rem;
  font-family: "Rokh";
  font-size: 1.4rem;
  color: black;
  text-decoration: none;
}
.main-menu-mobile__item-item .menu-secend-item-svg {
  margin-left: 0.5rem;
  color: #8c68cd;
}
.main-menu-mobile__item-item .menu-secend-item-svg-last {
  transform: rotate(90deg);
}

.tab-menu-main-mobile-active {
  right: 0;
  transition: all cubic-bezier(0.21, -0.48, 0.73, 1.51) 0.3s;
  backdrop-filter: blur(10.25px);
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.137);
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 400;
}

.loaded {
  display: none;
}

.loader {
  width: 100px;
  height: 100px;
  margin: auto;
  position: relative;
  z-index: 500;
}

.loader:before {
  content: "";
  width: 100px;
  height: 5px;
  background: #000;
  opacity: 0.25;
  position: absolute;
  top: 120px;
  left: 0;
  border-radius: 50%;
  animation: shadow 0.5s linear infinite;
}

.loader:after {
  content: "";
  width: 100%;
  height: 100%;
  background: #8c68cd;
  animation: bxSpin 0.5s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
}

@keyframes bxSpin {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@keyframes shadow {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
.logo-main {
  font-family: "Rokh";
  font-size: 2.5rem;
  color: #ffffff;
  font-weight: bold;
}
@media only screen and (max-width: 1000px) {
  .logo-main {
    font-size: 2rem;
  }
}

.logo-main-project {
  font-family: "Rokh";
  font-size: 2.5rem;
  color: #292929;
  font-weight: bold;
}
@media only screen and (max-width: 1000px) {
  .logo-main-project {
    font-size: 2rem;
  }
}

.navbar-btn-add,
.navbar-btn-login,
.navbar-btn-add-project {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  border-radius: 0.5rem 0.5rem;
  white-space: nowrap;
  margin-left: 0.5rem;
  cursor: pointer;
  border: none;
}
@media only screen and (max-width: 1000px) {
  .navbar-btn-add,
  .navbar-btn-login,
  .navbar-btn-add-project {
    width: 9rem;
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 490px) {
  .navbar-btn-add,
  .navbar-btn-login,
  .navbar-btn-add-project {
    font-size: 1rem;
  }
}

.navbar-btn-add {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.1960784314);
  color: #ffffff;
  font-family: "Rokh";
  margin-left: 0.5rem;
  cursor: pointer;
  border: none;
}

.navbar-btn-add-project {
  border: 1px solid #292929;
  background-color: rgba(175, 175, 175, 0.4509803922);
  color: #292929;
  font-family: "Rokh";
  margin-left: 0.5rem;
  cursor: pointer;
}

.navbar-btn-login {
  background-color: #8c68cd;
  color: #ffffff;
  font-family: "Rokh";
  margin-right: 0.5rem;
  cursor: pointer;
  border: none;
}

.content-text-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12rem;
  height: auto;
  font-family: "Rokh";
  color: #ffffff;
  padding: 0.5rem 2rem 0.5rem 2rem;
  background-color: #8c68cd;
  border-radius: 0.5rem 0.5rem;
  margin-top: 5rem;
  cursor: pointer;
  border: none;
}

.faq-btn-more {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  color: #ffffff;
  font-family: "Rokh";
  background-color: #8c68cd;
  margin-top: 5rem;
  cursor: pointer;
  border: none;
}

.cunfirm-project {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  background-color: #8c68cd;
  color: #ffffff;
  font-family: "Rokh";
  cursor: pointer;
  border: none;
}

.cancel-project {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 3rem;
  border: 1px solid rgb(96, 95, 95);
  border-radius: 0.5rem 0.5rem;
  opacity: 0.5;
  margin-left: 0.5rem;
  color: #000000;
  font-family: "Rokh";
  cursor: pointer;
}

.btn-add-project-offer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  background-color: #8c68cd;
  font-family: "Rokh";
  margin-left: 2rem;
  color: #ffffff;
  cursor: pointer;
  border: none;
}
@media only screen and (max-width: 992px) {
  .btn-add-project-offer {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 776px) {
  .btn-add-project-offer {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 562px) {
  .btn-add-project-offer {
    font-size: 0.8rem;
    width: 12.5rem;
  }
}

.btn-follow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  background-color: rgba(181, 181, 181, 0.516);
  border: 1px solid black;
  font-family: "Rokh";
  margin-left: 2rem;
  color: #000000;
}
@media only screen and (max-width: 992px) {
  .btn-follow {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 776px) {
  .btn-follow {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 562px) {
  .btn-follow {
    font-size: 0.9rem;
  }
}

.send-form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  background-color: #8c68cd;
  font-family: "Rokh";
  margin-right: 2rem;
  color: #ffffff;
  cursor: pointer;
  border: none;
}

.profile-info-btn-add {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 0.5rem 0.5rem;
  border: #8c68cd solid 1px;
  color: #8c68cd;
  font-family: "Rokh";
  font-size: 1.3rem;
  cursor: pointer;
  border: none;
}
.profile-info-btn-add svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.5rem;
}

.add-token-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0.7rem 1.5rem 0.7rem 1.5rem;
  font-family: "Rokh";
  font-size: 1.3rem;
  background-color: #8c68cd;
  color: #ffffff;
  border-radius: 1rem 1rem;
  cursor: pointer;
  border: none;
}

.desk-chat-btn-offer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0.7rem 1.5rem 0.7rem 1.5rem;
  font-family: "Rokh";
  font-size: 1.3rem;
  background-color: #8c68cd;
  color: #ffffff;
  border-radius: 0.5rem 0.5rem;
  margin-left: 2rem;
  cursor: pointer;
  border: none;
}

.btn-by {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 4rem 0.5rem 4rem;
  background-color: #8c68cd;
  color: #ffffff;
  border-radius: 0.5rem 0.5rem;
  font-family: "Rokh";
  font-size: 1.2rem;
  cursor: pointer;
  border: none;
}

.btn-note-found-back {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 4rem;
  color: white;
  background-color: #8c68cd;
  border-radius: 0.5rem 0.5rem;
  font-family: "Rokh";
  font-size: 1.2rem;
  cursor: pointer;
  border: none;
  margin-right: 3rem;
}

.btn-notefound-home {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 4rem;
  border: 1px solid #8c68cd;
  font-family: "Rokh";
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 0.5rem 0.5rem;
  color: #8c68cd;
}

.btn-add-tiket {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 2rem;
  border: none;
  border-radius: 0.5rem 0.5rem;
  background-color: #8c68cd;
  color: white;
  cursor: pointer;
  font-family: "Rokh";
}

.tiket-message-sene {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 2rem;
  border: none;
  border-radius: 0.5rem 0.5rem;
  background-color: #8c68cd;
  color: white;
  cursor: pointer;
  font-family: "Rokh";
}

.cart-item {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  width: 35rem;
  height: 20rem;
  background-color: #ffffff;
  border-radius: 2rem 2rem;
  cursor: pointer;
  margin-top: 1rem;
  margin-left: 1.5rem;
}
@media only screen and (max-width: 999px) {
  .cart-item {
    width: 30rem;
    height: 17rem;
  }
}
@media only screen and (max-width: 768px) {
  .cart-item {
    width: 27rem;
    height: 17rem;
  }
}

.cart-item-all-page {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  width: 30rem;
  height: 20rem;
  background-color: #ffffff;
  border-radius: 2rem 2rem;
  cursor: pointer;
  margin-top: 1rem;
  margin-left: 1.5rem;
}
@media only screen and (max-width: 767px) {
  .cart-item-all-page {
    width: 100%;
  }
}

.cart-item-icon,
.cart-item-text {
  height: 85%;
}

.cart-item-out {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 5rem 5rem;
  border: 1px solid #e4dbf3;
}

.cart-item-cicle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 5rem 5rem;
  background-color: #e4dbf3;
}
.cart-item-cicle svg {
  width: 2rem;
  color: #8c68cd;
}

.cart-item-freelancer-cicle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 5rem 5rem;
  overflow: hidden;
  border: none;
}
.cart-item-freelancer-cicle img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 5rem 5rem;
  overflow: hidden;
}

.cart-item-text {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
  width: 85%;
  padding-right: 1.5rem;
}

.cart-item-piker {
  display: flex;
  justify-content: start;
  align-items: center;
}

.cart-item-time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-family: "Rokh";
  font-size: 1.2rem;
  color: #000000;
}
.cart-item-time svg {
  width: 1.1rem;
  margin-left: 0.5rem;
}

.cart-item-freelancer-time {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Rokh";
  font-size: 1.3rem;
  color: #000000;
}
.cart-item-freelancer-time svg {
  width: 1.7rem;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
}

.cart-item-quality {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-family: "Rokh";
  font-size: 1.1rem;
  margin-right: 0.7rem;
  color: #cb5169;
}
.cart-item-quality svg {
  width: 1.1rem;
  margin-left: 0.5rem;
}

.cart-item-title {
  display: flex;
  justify-content: start;
  align-items: center;
}
.cart-item-title h4 {
  font-family: "Rokh";
  font-size: 1.3rem;
  color: #000000;
}
@media only screen and (max-width: 768px) {
  .cart-item-title h4 {
    font-size: 1.2rem;
  }
}

.cart-item-freelancer-title {
  display: flex;
  justify-content: start;
  align-items: center;
}
.cart-item-freelancer-title h4 {
  font-family: "Rokh";
  font-size: 1.3rem;
  color: #000000;
}
@media only screen and (max-width: 768px) {
  .cart-item-freelancer-title h4 {
    font-size: 1.2rem;
  }
}
.cart-item-freelancer-title span {
  font-size: 1.2rem;
  font-weight: normal;
  color: #000000;
}

.cart-item-body {
  display: flex;
  justify-content: start;
  align-items: center;
}
.cart-item-body p {
  font-family: "Rokh";
  font-size: 1.1rem;
  color: #000000;
}
@media only screen and (max-width: 768px) {
  .cart-item-body p {
    font-size: 1.1rem;
  }
}

.cart-item-price {
  display: flex;
  justify-content: start;
  align-items: center;
}
.cart-item-price .price-item {
  margin-right: 0.5rem;
  font-family: "Rokh";
  font-size: 1.5rem;
  color: #000000;
}
@media only screen and (max-width: 768px) {
  .cart-item-price .price-item {
    font-size: 1.3rem;
  }
}
.cart-item-price .price-color {
  color: #8c68cd;
}
.cart-item-price .svg-color {
  color: #8c68cd;
  width: 2rem;
}

.cart-item-freelancer-price {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Rokh";
  font-size: 1.2rem;
}
.cart-item-freelancer-price svg {
  width: 1.7rem;
  color: #8c68cd;
  margin-left: 0.5rem;
}
.cart-item-freelancer-price span {
  color: #000000;
  font-family: "Rokh";
  font-size: 1.2rem;
}

.cart-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 2rem;
}
.cart-title h4 {
  font-family: "Rokh";
  color: #ffffff;
}

.cart-title-similar {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
  margin-bottom: 2rem;
}
.cart-title-similar h4 {
  font-family: "Rokh";
  color: #ffffff;
}

.cart-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: auto;
}

.cart-button-similar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
}

.cart-btn-more {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 12rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  font-family: "Rokh";
  font-size: 1.2rem;
}
.cart-btn-more svg {
  width: 1.7rem;
}

.cart-direction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  margin-right: 2rem;
}

.cart-arrow-ritht,
.cart-arrow-left,
.cart-arrow-ritht2,
.cart-arrow-left2,
.cart-arrow-ritht3,
.cart-arrow-left3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  cursor: pointer;
}
.cart-arrow-ritht .svg-first-color,
.cart-arrow-left .svg-first-color,
.cart-arrow-ritht2 .svg-first-color,
.cart-arrow-left2 .svg-first-color,
.cart-arrow-ritht3 .svg-first-color,
.cart-arrow-left3 .svg-first-color {
  width: 1.7rem;
  color: #555454;
}

.cart-arrow-ritht,
.cart-arrow-ritht2,
.cart-arrow-ritht3 {
  margin-left: 1rem;
}

.cart-user-item {
  display: flex;
  justify-content: space-evenly;
  align-items: start;
  flex-direction: column-reverse;
  width: 35rem;
  height: 20rem;
  background-color: #ffffff;
  border-radius: 2rem 2rem;
  cursor: grab;
}
@media only screen and (max-width: 999px) {
  .cart-user-item {
    width: 30rem;
    height: 17rem;
  }
}
@media only screen and (max-width: 768px) {
  .cart-user-item {
    width: 27rem;
    height: 17rem;
  }
}

.cart-user-title {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
  margin-bottom: 2rem;
}

.cart-item-user-icon {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 5rem;
  width: 100%;
  margin-right: 2rem;
  font-family: "Rokh";
}

.cart-item-user-text {
  height: 10rem;
  margin-right: 2rem;
}

.cart-item-user-title {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 1.5rem;
}
.cart-item-user-title h4 {
  font-family: "Rokh";
  font-size: 1.3rem;
}
@media only screen and (max-width: 768px) {
  .cart-item-user-title h4 {
    font-size: 1.2rem;
  }
}

.cart-item-user-body {
  display: flex;
  justify-content: start;
  align-items: center;
}
.cart-item-user-body p {
  font-family: "Rokh";
  font-size: 1.2rem;
}
@media only screen and (max-width: 768px) {
  .cart-item-user-body p {
    font-size: 1.1rem;
  }
}

.cart-item-user-cicle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 5rem 5rem;
  overflow: hidden;
}
.cart-item-user-cicle img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 5rem 5rem;
  overflow: hidden;
}

.cart-item-user-out {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 5rem 5rem;
  border: 1px solid #e4dbf3;
  margin-left: 1rem;
}

.input-control {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: auto;
  margin-top: 1.2rem;
}
@media only screen and (max-width: 456px) {
  .input-control {
    width: 4100%;
  }
}

.input-control-price {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: auto;
  margin-top: 1.2rem;
}
@media only screen and (max-width: 456px) {
  .input-control-price {
    width: 4100%;
  }
}
.input-control-price span {
  position: absolute;
  top: 2rem;
  left: 3rem;
  font-family: "Rokh";
}

.input-control-max {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 1.2rem;
}

.input-control-max-cunfirm {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 1.2rem;
}

.input-control-cunfirm {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 1.2rem;
}

.input-group-min {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 1.2rem;
}

.input-control-min {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  height: 4rem;
  margin-top: 1.2rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

input[type=text],
input[type=number],
select,
textarea {
  position: relative;
  width: 95%;
  height: 3rem;
  border: 1px solid rgba(123, 122, 122, 0.338);
  border-radius: 0.5rem 0.5rem;
  padding-right: 0.5rem;
  font-family: "Rokh";
}
input[type=text]:focus,
input[type=number]:focus,
select:focus,
textarea:focus {
  outline: 2px solid #8c68cd;
}

input[id=mobile] {
  width: 95%;
  height: 4.5rem;
  border: 1px solid rgba(123, 122, 122, 0.338);
  border-radius: 0.5rem 0.5rem;
  padding-right: 0.5rem;
}
input[id=mobile]:focus {
  outline: 2px solid #8c68cd;
}

input[name=offer] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}
input[name=offer]:focus {
  outline: none;
}

input[id=mobile_code] {
  width: 15%;
  height: 4.5rem;
  border: 1px solid rgba(123, 122, 122, 0.338);
  border-radius: 0.5rem 0.5rem;
  padding-right: 0.5rem;
  margin: 0 0.3rem 0 0.3rem 0;
  padding: 0 0 0 3rem;
  font-size: 2.5rem;
}
input[id=mobile_code]:focus {
  outline: 2px solid #8c68cd;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  font-family: "Rokh";
  font-size: 1.1rem;
}

input::placeholder,
select,
textarea::placeholder {
  font-family: "Rokh";
  font-size: 1.1rem;
}

textarea::-moz-placeholder {
  padding-top: 0.5rem;
}

textarea::placeholder {
  padding-top: 0.5rem;
}

textarea {
  height: 8rem;
  width: 100%;
  resize: none;
}

label {
  font-family: "Rokh";
  font-size: 1.2rem;
}
@media only screen and (max-width: 439px) {
  label {
    font-size: 1rem;
  }
}

input[type=file] {
  display: none;
  width: 100%;
  height: 8rem;
  border-radius: 1rem 1rem;
  background-color: #e4dbf3;
}

.file-input {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 8rem;
  border-radius: 1rem 1rem;
  background-color: rgba(232, 227, 233, 0.6666666667);
  box-shadow: rgb(160, 160, 160) 0 0 0.5rem;
  cursor: pointer;
}
.file-input svg {
  margin-right: 1rem;
  width: 2rem;
  color: #8c68cd;
}

label[for=file] {
  cursor: pointer;
  color: #8c68cd;
}

.detail-title-group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 10rem;
  margin-bottom: 5rem;
}

.detail-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 4rem;
}
.detail-title h4 {
  font-family: "Rokh";
  font-size: 2rem;
}

.detail-title-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 5rem;
}
.detail-title-info img {
  width: 23rem;
  height: 4rem;
}
.detail-title-info p {
  position: absolute;
  font-family: "Rokh";
  color: #ffffff;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 5rem;
}
.pagination__items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
.pagination__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 5rem 5rem;
  color: black;
  font-family: "Rokh";
  margin: 0 0.4rem 0 0.4rem;
  font-size: 1.7rem;
}

.active-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5rem 5rem;
  width: 4.5rem;
  height: 4.5rem;
  color: white;
  background-color: #8c68cd;
  box-shadow: 0 0 0.8rem #8c68cd;
}

.offer {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  box-shadow: rgb(160, 159, 159) 0 0 0.5rem;
  margin-bottom: 10rem;
  border-radius: 1rem 1rem;
  padding-bottom: 2rem;
}
.offer__header {
  display: flex;
  justify-content: center;
  align-items: start;
  height: 85%;
  width: 10rem;
}
.offer__header-icone {
  width: auto;
  height: auto;
  margin-top: 1rem;
}
.offer__header-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 5rem 5rem;
  border: #e4dbf3 0.1rem solid;
}
.offer__header-circle-ineer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 5rem 5rem;
  background-color: #e4dbf3;
}
.offer__svg-code {
  position: relative;
  z-index: 50;
  color: #8c68cd;
}
.offer__content {
  display: flex;
  justify-content: start;
  align-items: space-between;
  flex-direction: column;
  height: auto;
  width: 100%;
}
.offer__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 535px) {
  .offer__title {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
  }
}
.offer__title-text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 80%;
  height: 5rem;
}
@media only screen and (max-width: 535px) {
  .offer__title-text {
    width: 100%;
  }
}
.offer__btn {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 20rem;
  height: auto;
}
@media only screen and (max-width: 535px) {
  .offer__btn {
    display: flex;
    justify-content: center;
    align-items: end;
    flex-direction: column;
    margin-top: 1rem;
    width: 100%;
  }
}
.offer__title-piker {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
}
.offer__title-time {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Rokh";
  margin-left: 1rem;
  font-size: 1.2rem;
}
.offer__title-time svg {
  width: 1.5rem;
  margin-left: 0.5rem;
}
.offer__title-location {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Rokh";
  font-size: 1.2rem;
}
.offer__title-location svg {
  width: 1.5rem;
  margin-left: 0.5rem;
}
.offer__title-title {
  font-family: "Rokh";
  font-weight: normal;
}
.offer__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
  margin-bottom: 2rem;
}
.offer__price, .offer__share {
  width: 50%;
  height: auto;
}
.offer__price {
  display: flex;
  justify-content: start;
  align-items: center;
}
.offer__price svg {
  width: 2rem;
  color: #8c68cd;
}
.offer__price .price-item {
  margin-left: 0.5rem;
  font-size: 1.3rem;
  font-family: "RokhMedium";
}
.offer__price .price-color {
  color: #8c68cd;
}
.offer__share {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-left: 1rem;
}
@media only screen and (max-width: 767px) {
  .offer__share {
    display: none;
  }
}
.offer__share-mobile {
  display: none;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .offer__share-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
}
.offer .share-btn svg {
  transform: rotate(90deg);
  cursor: pointer;
}
.offer__share-mobile-open {
  box-shadow: #000000 0 0 0.3rem;
  position: absolute;
  left: 4.5rem;
  width: auto;
  height: 4rem;
  border-radius: 1rem 1rem;
  padding-right: 1rem;
  display: none;
}
.offer input[id=offer-btn-id] {
  display: none;
}
.offer input[id=offer-btn-id]:checked ~ .offer__share-mobile-open {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.offer__share-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  border: 1px solid black;
  margin-left: 1.2rem;
  cursor: pointer;
  color: black;
  fill: black;
}
.offer__share-item svg {
  width: 1.5rem;
}
.offer__body {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}
.offer__body p {
  font-family: "Rokh";
  line-height: 3.5rem;
  font-size: 1.1rem;
}
@media only screen and (max-width: 767px) {
  .offer__body p {
    padding-left: 1rem;
  }
}
.offer_tags {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 993px) {
  .offer_tags {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.offer_tags a {
  padding: 0.3rem 1rem 0.3rem 1rem;
  margin: 0 0.5rem 0 0.5rem;
  background-color: #e4dbf3;
  border: 1px solid #8c68cd;
  border-radius: 2rem 2rem;
  color: #000000;
  font-family: "Rokh";
  font-size: 1rem;
}
@media only screen and (max-width: 767px) {
  .offer_tags a {
    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
  }
}

.project-similar {
  width: 100%;
  overflow: hidden;
  padding: 0.5rem 0 0.5rem 0;
}

.project-similar-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  margin-top: 10rem;
  margin-bottom: 5rem;
}

.shodow-black {
  box-shadow: rgb(210, 210, 210) 0 0 0.6rem;
}

.modal-offer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  backdrop-filter: blur(2.25px);
  z-index: 100;
}

.modal-offer-box {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 50%;
  height: 60rem;
  background-color: #ffffff;
  box-shadow: rgb(180, 179, 179) 0 0 0.6rem;
  border-radius: 1.5rem 1.5rem;
  overflow-y: scroll;
}
@media only screen and (max-width: 1113px) {
  .modal-offer-box {
    width: 60%;
    height: 100%;
  }
}
@media only screen and (max-width: 929px) {
  .modal-offer-box {
    width: 65%;
    height: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .modal-offer-box {
    width: 70%;
    height: 100%;
  }
}
@media only screen and (max-width: 741px) {
  .modal-offer-box {
    width: 80%;
  }
}
@media only screen and (max-width: 699px) {
  .modal-offer-box {
    width: 90%;
  }
}
@media only screen and (max-width: 566px) {
  .modal-offer-box {
    width: 100%;
  }
}

.access-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #8c68cd;
}

.accsee-price-count {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 4rem;
  height: 2rem;
  white-space: nowrap;
  font-size: 1.2rem;
  font-family: "Rokh";
}
.accsee-price-count span {
  margin-left: 0.3rem;
}

.access-price-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  white-space: nowrap;
  left: 13rem;
  font-size: 0.8rem;
  font-family: "Rokh";
  color: #000000;
  padding-left: 5rem;
}
@media only screen and (max-width: 559px) {
  .access-price-item {
    padding-left: 3rem;
  }
}
@media only screen and (max-width: 484px) {
  .access-price-item {
    padding-left: 1rem;
  }
}

.profile-info-btn {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 95%;
  height: 5rem;
}

.modal-offer-project-active {
  transform: scale(1);
  transition: cubic-bezier(0.21, -0.48, 0.73, 1.51) all 0.3s;
}

.modal-offer-project-hidden {
  transform: scale(0);
  transition: cubic-bezier(0.21, -0.48, 0.73, 1.51) all 0.3s;
}

.dashboard {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  border-radius: 1rem 1rem;
  box-shadow: rgb(180, 179, 179) 0 0 0.6rem;
  margin-bottom: 5rem;
}
.dashboard__icon {
  display: flex;
  justify-content: center;
  align-items: start;
  height: 100%;
  width: 10%;
}
@media only screen and (max-width: 776px) {
  .dashboard__icon {
    width: 15%;
  }
}
.dashboard__content {
  display: flex;
  justify-content: end;
  align-items: start;
  flex-direction: column;
  width: 90%;
  height: 100%;
}
@media only screen and (max-width: 776px) {
  .dashboard__content {
    width: 75%;
  }
}
.dashboard__icon-circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8rem;
  height: 8rem;
  border-radius: 5rem 5rem;
  border: 1px solid #e4dbf3;
  margin-top: 1rem;
  cursor: pointer;
}
@media only screen and (max-width: 992px) {
  .dashboard__icon-circle {
    width: 6rem;
    height: 6rem;
  }
}
.dashboard__icon-circle img {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 5rem 5rem;
}
@media only screen and (max-width: 992px) {
  .dashboard__icon-circle img {
    width: 5.5rem;
    height: 5.5rem;
  }
}
.dashboard__icon-circle svg {
  width: 2rem;
  height: 2rem;
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  background-color: white;
  border-radius: 5rem 5rem;
  color: #8c68cd;
}
.dashboard__header {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.dashboard__location {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.dashboard__location-location, .dashboard__star {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 5rem;
  height: 4rem;
  font-family: "Rokh";
  font-size: 1.3rem;
}
@media only screen and (max-width: 776px) {
  .dashboard__location-location, .dashboard__star {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 562px) {
  .dashboard__location-location, .dashboard__star {
    font-size: 1rem;
  }
}
.dashboard__location-location svg, .dashboard__star svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.5rem;
}
.dashboard__star svg {
  margin-bottom: 0.2rem;
}
.dashboard__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  font-family: "Rokh";
  margin-top: 2rem;
}
.dashboard__title h4 span {
  font-size: 1.2rem;
  font-weight: normal;
}
.dashboard__title-text, .dashboard__btn {
  width: 50%;
  height: auto;
}
.dashboard__btn {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row-reverse;
  font-family: "Rokh";
}
.dashboard__network {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}
.dashboard__follow, .dashboard__social {
  width: 50%;
  height: auto;
}
.dashboard__follow {
  display: flex;
  justify-content: start;
  align-items: center;
}
.dashboard__social {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-left: 1.5rem;
}
.dashboard__social a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem 0.5rem;
  border: 1px solid #000000;
  margin-left: 1rem;
}
.dashboard__social a svg {
  width: 2rem;
  color: #000000;
}
.dashboard__following, .dashboard__followed {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 4rem;
  font-family: "Rokh";
  font-size: 1.3rem;
}
@media only screen and (max-width: 776px) {
  .dashboard__following, .dashboard__followed {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 562px) {
  .dashboard__following, .dashboard__followed {
    font-size: 0.8rem;
  }
}
.dashboard__following svg, .dashboard__followed svg {
  width: 2rem;
}
@media only screen and (max-width: 776px) {
  .dashboard__following svg, .dashboard__followed svg {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 562px) {
  .dashboard__following svg, .dashboard__followed svg {
    font-size: 1rem;
  }
}
.dashboard__bio {
  width: 100%;
  height: auto;
  padding-left: 1.5rem;
  font-family: "Rokh";
  margin-bottom: 3rem;
  font-size: 1.2rem;
}
.dashboard__tab {
  display: flex;
  justify-self: end;
  align-self: end;
  width: 100%;
  height: 4rem;
  margin-top: 5rem;
}
.dashboard__tags {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}
.dashboard__tags a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem 1.5rem 0.3rem 1.5rem;
  margin-left: 1rem;
  border-radius: 1.5rem 1.5rem;
  background-color: #e4dbf3;
  color: #000000;
  border: 1px solid #000000;
  font-family: "Rokh";
  font-size: 1.1rem;
  margin-top: 0.5rem;
}
.dashboard__items {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 4rem;
}
.dashboard__item {
  width: auto;
  height: auto;
  padding: 1.5rem 1rem 1rem 1rem;
  font-family: "Rokh";
  cursor: pointer;
  font-size: 1.2rem;
  color: #000000;
}
@media only screen and (max-width: 470px) {
  .dashboard__item {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 470px) {
  .dashboard__item {
    font-size: 1rem;
  }
}

.number-follow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12rem;
  height: 4rem;
  font-family: "Rokh";
  margin-left: 0.5rem;
  font-size: 1.2rem;
}
.number-follow svg {
  width: 2rem;
  margin-left: 0.5rem;
}
.number-follow span {
  margin-left: 0.5rem;
}

.profile-views {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  border-radius: 1rem 1rem;
  box-shadow: rgb(180, 179, 179) 0 0 0.6rem;
  margin-bottom: 10rem;
}

.profile-view-title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 8rem;
}
.profile-view-title h4 {
  font-family: "Rokh";
  margin-right: 1rem;
  font-size: 1.3rem;
}
.profile-view-title p {
  font-family: "Rokh";
  margin-right: 1rem;
  margin-top: 1rem;
  color: #000000;
  font-size: 1.2rem;
}

.profile-items {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
.profile-right,
.profile-left {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 50%;
  height: 6rem;
}
@media only screen and (max-width: 544px) {
  .profile-right,
  .profile-left {
    width: 100%;
  }
}

.profile-value,
.profile-key {
  font-family: "Rokh";
  font-size: 1.2rem;
}

.profile-key {
  margin-left: 1rem;
  margin-right: 2rem;
}

.profile-rnge {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.range-title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 6rem;
}
.range-title h4, .range-title p {
  font-family: "Rokh";
  margin-right: 1rem;
  font-size: 1.2rem;
}
.range-title p {
  margin-top: 1rem;
  font-size: 1.2rem;
}

.range-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 6rem;
  margin-top: 5rem;
  margin-bottom: 5rem;
}
@media only screen and (max-width: 767px) {
  .range-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: auto;
  }
}

.range {
  display: none;
}

.range-status {
  width: 30rem;
  height: 2rem;
  background-color: #ffffff;
  border-radius: 1rem 1rem;
  box-shadow: rgb(164, 163, 163) 0 0 0.8rem;
}
@media only screen and (max-width: 767px) {
  .range-status {
    width: 30rem;
  }
}

.range-status-role {
  height: 2rem;
  background-color: #8c68cd;
  border-radius: 1rem 1rem;
}

.range-w-20 {
  width: 20rem;
}

.range-w-40 {
  width: 40rem;
}

.range-w-60 {
  width: 60rem;
}

.range-view {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7rem;
  height: 7rem;
  border-radius: 50% 50%;
  margin-left: 2rem;
}
@media only screen and (max-width: 767px) {
  .range-view {
    margin-bottom: 2rem;
  }
}

.box-shodow-red {
  box-shadow: rgb(254, 171, 171) 0 0 0.8rem;
}

.box-shodow-yellow {
  box-shadow: rgb(220, 236, 140) 0 0 0.8rem;
}

.box-shodow-green {
  box-shadow: rgb(134, 249, 147) 0 0 0.8rem;
}

.range-red {
  color: rgb(235, 131, 131);
}

.range-yellow {
  color: rgb(200, 224, 119);
}

.range-green {
  color: rgb(146, 246, 133);
}

.menu-tab-active {
  border-bottom: 5px solid #8c68cd;
  background: linear-gradient(0deg, rgb(228, 219, 243) 67%, rgb(255, 255, 255) 100%);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  transition: all 0.3s cubic-bezier(0.21, -0.48, 0.73, 1.51);
  padding-bottom: 0.5rem;
  color: #ffffff;
}

.profile-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-bottom: 10rem;
  border-radius: 1rem 1rem;
  box-shadow: rgb(180, 179, 179) 0 0 0.6rem;
}

.profile-info-title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 5rem;
  margin-top: 2rem;
}
.profile-info-title h4 {
  font-family: "Rokh";
  margin-right: 1rem;
  font-size: 1.3rem;
}
.profile-info-title p {
  font-family: "Rokh";
  margin-right: 1rem;
  margin-top: 1rem;
  font-size: 1.2rem;
}

.profile-info-form {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 97%;
  height: auto;
  margin-bottom: 3rem;
}

.portfolio-carts {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin-bottom: 10rem;
}
@media only screen and (max-width: 1200px) {
  .portfolio-carts {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.portfolio-cart {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 30rem;
  height: 30rem;
  box-shadow: rgb(180, 179, 179) 0 0 0.6rem;
  border-radius: 1rem 1rem;
  margin: 1rem 1.5rem 0 0;
  overflow: hidden;
}
.portfolio-cart img {
  width: 25rem;
  height: 23rem;
  margin-top: 0.5rem;
  border-radius: 1rem 1rem;
  overflow: hidden;
}

.portfolio-title, .portflio-link {
  font-size: 1.3rem;
}

.portfolio-cart-add {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 30rem;
  height: 30rem;
  box-shadow: rgb(180, 179, 179) 0 0 0.6rem;
  border-radius: 1rem 1rem;
  margin: 1rem 1.5rem 0 0;
}
.portfolio-cart-add svg {
  width: 10rem;
  height: 10rem;
  color: #8c68cd;
  cursor: pointer;
}

.portfolio-title, .portflio-link {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 85%;
  height: auto;
  margin-top: 1rem;
  font-family: "Rokh";
}

.plan-detaill {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  width: 40rem;
  height: 15rem;
  border-radius: 1.5rem 1.5rem;
  box-shadow: rgb(180, 179, 179) 0 0 0.6rem;
  margin-bottom: 10rem;
  margin-left: 2rem;
}
@media only screen and (max-width: 767px) {
  .plan-detaill {
    width: 100%;
  }
}

.plan-icon {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 20%;
  height: 100%;
}

.plan-icon-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 5rem;
  height: 5rem;
  border-radius: 50% 50%;
  border: 1px solid #e4dbf3;
  margin-top: 1rem;
}

.plan-icon-circle-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50% 50%;
  background-color: #e4dbf3;
}
.plan-icon-circle-inner svg {
  color: #8c68cd;
}

.plan-text {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 80%;
  height: 100%;
}

.plan-date-time {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 4rem;
}

.plan-time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 12rem;
  height: auto;
  font-family: "Rokh";
  font-size: 0.9rem;
}
.plan-time svg {
  width: 1.5rem;
  margin-left: 0.5rem;
}

.plan-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
}
.plan-title h4 {
  font-family: "Rokh";
  font-size: 1.2rem;
}
.plan-title h4 span {
  font-weight: normal;
}
.plan-title h5 {
  font-family: "Rokh";
  margin-left: 1rem;
  font-size: 1.1rem;
}

.plan-duration {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
}
.plan-duration span {
  margin-left: 1rem;
  font-family: "Rokh";
  font-size: 1.2rem;
}
.plan-duration a {
  margin-right: auto;
  margin-left: 1rem;
  color: #8c68cd;
  font-family: "Rokh";
  font-size: 1.2rem;
}

.add-token {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 40rem;
  height: 15rem;
  border-radius: 1.5rem 1.5rem;
  box-shadow: rgb(180, 179, 179) 0 0 0.6rem;
  margin-bottom: 10rem;
}
@media only screen and (max-width: 767px) {
  .add-token {
    width: 100%;
  }
}

.add-token-box {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.add-token-content {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  width: 90%;
  height: auto;
}
.add-token-content span {
  font-family: "Rokh";
  font-size: 2rem;
}

.right-add-token-btn,
.left-add-token-btn {
  width: 5rem;
  height: 5rem;
  color: #8c68cd;
  cursor: pointer;
}

.add-token-bottom {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  width: 90%;
  height: auto;
}

.search-box {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 90%;
  min-height: 40rem;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .search-box {
    padding-bottom: 6rem;
  }
}
.search-box__title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 5rem;
  font-family: "Rokh";
  color: #ffffff;
}
@media only screen and (max-width: 768px) {
  .search-box__title {
    margin-bottom: 4rem;
  }
}
.search-box__title p {
  margin-top: 1.5rem;
  font-weight: normal;
  font-size: 1.2rem;
}
.search-box__item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 40%;
  height: 4rem;
  margin-top: 2rem;
}
@media only screen and (max-width: 992px) {
  .search-box__item {
    width: 60%;
  }
}
@media only screen and (max-width: 440px) {
  .search-box__item {
    width: 70%;
  }
}
.search-box__item svg {
  position: absolute;
  right: 2rem;
  width: 2rem;
  height: 2rem;
  color: #ffffff;
  z-index: 50;
  transform: rotate(70deg);
}
.search-box__item input {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem 0.5rem;
  background-color: rgba(255, 255, 255, 0.207);
  border: 1px solid #ffffff;
  caret-color: #ffffff;
}
.search-box__item input::-moz-placeholder {
  color: #ffffff;
  z-index: 50;
  font-family: "Rokh";
  padding-right: 5rem;
}
.search-box__item input::placeholder {
  color: #ffffff;
  z-index: 50;
  font-family: "Rokh";
  padding-right: 5rem;
}
@media only screen and (max-width: 992px) {
  .search-box__item input::-moz-placeholder {
    font-size: 1.1rem;
  }
  .search-box__item input::placeholder {
    font-size: 1.1rem;
  }
}
.search-box__tags {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
.search-box__tags a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem 0.5rem 1rem;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.207);
  border-radius: 2rem 2rem;
  margin: 2rem 0.5rem 0 0.5rem;
  border: 1px solid #ffffff;
  font-family: "Rokh";
  font-size: 1rem;
  font-weight: normal;
}

.all-project-content {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 5rem;
  margin-bottom: 5rem;
}
@media only screen and (max-width: 992px) {
  .all-project-content {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column-reverse;
  }
}

.filter-body {
  width: 20%;
  height: auto;
  margin-left: 2rem;
}
@media only screen and (max-width: 992px) {
  .filter-body {
    width: 30%;
    margin-top: 10rem;
  }
}
@media only screen and (max-width: 767px) {
  .filter-body {
    width: 40%;
    margin-top: 10rem;
  }
}
@media only screen and (max-width: 445px) {
  .filter-body {
    width: 50%;
    margin-top: 10rem;
  }
}

.filter {
  width: 100%;
  height: auto;
  border-radius: 1rem 1rem;
  box-shadow: rgb(180, 179, 179) 0 0 0.6rem;
}
.filter__box {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-left: 1.5rem;
  margin-top: 2rem;
}
.filter__title-item {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: auto;
  font-family: "Rokh";
  margin-top: 2.5rem;
  margin-right: 1.5rem;
}
.filter__title-item svg {
  width: 2rem;
  height: 2rem;
  color: #8c68cd;
}
.filter__items {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}

.filter-title {
  font-family: "Rokh";
}

.filter-item {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  margin-top: 2rem;
  font-family: "Rokh";
  margin-top: 2rem;
  margin-right: 1.5rem;
  color: #000000;
  font-size: 1.2rem;
}

.filter-menu-active {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: auto;
  height: auto;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  background-color: #8c68cd;
  border-radius: 2rem 2rem;
  color: #ffffff;
}

.all-project {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 80%;
  height: auto;
}
@media only screen and (max-width: 992px) {
  .all-project {
    width: 100%;
  }
}

.all-project__items {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 992px) {
  .all-project__items {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.login-logo-min {
  color: #8c68cd;
  font-weight: bold;
}

.login-modal, .cunfirm-modal, .login-modal2, .cunfirm-modal2 {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  bottom: 0;
  transform: scale(0);
  transform-origin: bottom;
  transition: all cubic-bezier(0.21, -0.48, 0.73, 1.51) 0.3s;
  background-color: transparent;
}
@media only screen and (max-width: 767px) {
  .login-modal, .cunfirm-modal, .login-modal2, .cunfirm-modal2 {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
  }
}
.login-modal__box, .cunfirm-modal__box, .login-modal2__box, .cunfirm-modal2__box {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 35%;
  height: 45rem;
  margin-top: 10rem;
  background-color: #ffffff;
  border-radius: 1rem 1rem;
  box-shadow: rgb(195, 195, 195) 0 0 0.6rem;
}
@media only screen and (max-width: 1244px) {
  .login-modal__box, .cunfirm-modal__box, .login-modal2__box, .cunfirm-modal2__box {
    width: 40%;
  }
}
@media only screen and (max-width: 1110px) {
  .login-modal__box, .cunfirm-modal__box, .login-modal2__box, .cunfirm-modal2__box {
    width: 45%;
  }
}
@media only screen and (max-width: 923px) {
  .login-modal__box, .cunfirm-modal__box, .login-modal2__box, .cunfirm-modal2__box {
    width: 50%;
  }
}
@media only screen and (max-width: 767px) {
  .login-modal__box, .cunfirm-modal__box, .login-modal2__box, .cunfirm-modal2__box {
    width: 100%;
    height: 100%;
    margin-top: 0;
  }
}
.login-modal__close, .cunfirm-modal__close, .login-modal2__close, .cunfirm-modal2__close {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  width: 92%;
  height: 5rem;
}
.login-modal__close svg, .cunfirm-modal__close svg, .login-modal2__close svg, .cunfirm-modal2__close svg {
  width: 2.5rem;
  opacity: 0.5;
  cursor: pointer;
}
.login-modal__logo, .cunfirm-modal__logo, .login-modal2__logo, .cunfirm-modal2__logo {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: column;
  width: 95%;
  height: 6rem;
}
.login-modal__item, .cunfirm-modal__item, .login-modal2__item, .cunfirm-modal2__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 95%;
}
.login-modal__logo-text, .cunfirm-modal__logo-text, .login-modal2__logo-text, .cunfirm-modal2__logo-text {
  width: 100%;
  height: auto;
}
.login-modal__logo-text p, .cunfirm-modal__logo-text p, .login-modal2__logo-text p, .cunfirm-modal2__logo-text p {
  font-family: "Rokh";
  font-size: 1.3rem;
}
.login-modal__logo-item span, .cunfirm-modal__logo-item span, .login-modal2__logo-item span, .cunfirm-modal2__logo-item span {
  font-family: "Rokh";
  font-size: 1.5rem;
}
.login-modal__logo-item span .login-logo-min, .cunfirm-modal__logo-item span .login-logo-min, .login-modal2__logo-item span .login-logo-min, .cunfirm-modal2__logo-item span .login-logo-min {
  font-weight: bold;
  font-size: 1.6rem;
}
.login-modal__title, .cunfirm-modal__title, .login-modal2__title, .cunfirm-modal2__title {
  width: 100%;
  height: auto;
}
.login-modal__title h4, .cunfirm-modal__title h4, .login-modal2__title h4, .cunfirm-modal2__title h4 {
  font-family: "Rokh";
  font-size: 1.3rem;
}
.login-modal__form, .cunfirm-modal__form, .login-modal2__form, .cunfirm-modal2__form {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 95%;
  height: auto;
  margin-top: 10rem;
}
.login-modal__btn, .cunfirm-modal__btn, .login-modal2__btn, .cunfirm-modal2__btn {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 95%;
  height: auto;
  margin-top: 1.5rem;
}
.login-modal__button, .cunfirm-modal__button, .login-modal2__button, .cunfirm-modal2__button {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row-reverse;
  width: 95%;
  height: auto;
  margin-top: 5rem;
}
.login-modal__control-checkbox, .cunfirm-modal__control-checkbox, .login-modal2__control-checkbox, .cunfirm-modal2__control-checkbox {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
}

.modal-login-active {
  transform: scale(1);
  transform-origin: bottom;
  transition: all cubic-bezier(0.21, -0.48, 0.73, 1.51) 0.3s;
}

input[id=chekh-remebber], input[id=chekh-remebber-cunfirm] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgb(127, 127, 127);
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50% 50%;
  margin-left: 0.5rem;
  transition: all cubic-bezier(0.21, -0.48, 0.73, 1.51) 0.2s;
}
input[id=chekh-remebber]:checked, input[id=chekh-remebber-cunfirm]:checked {
  background-color: #8c68cd;
  border: none;
}

.desk {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
.desk__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 8rem;
  background-color: #292929;
}
.desk__chat-user-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  margin-right: 3rem;
}
.desk__chat-user-img img {
  width: 7rem;
  height: 7rem;
  margin-left: 2rem;
  border-radius: 50% 50%;
}
.desk__chat-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
}
.desk__chat-text p {
  font-family: "Rokh";
  font-size: 1.4rem;
  white-space: nowrap;
  color: #ffffff;
}
.desk__chat-time {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  font-family: "Rokh";
  color: #ffffff;
  font-size: 1rem;
}
.desk__chat-time svg {
  width: 1.5rem;
  margin-left: 0.5rem;
  font-size: 1.2rem;
}
.desk__chat-back {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: auto;
  height: auto;
  margin-left: 3rem;
}
.desk__chat-back svg {
  color: #ffffff;
  width: 4rem;
  cursor: pointer;
}
.desk__chat-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
}
.desk__chat, .desk__messages {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .desk__chat, .desk__messages {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .desk__chat {
    display: none;
  }
}
.desk__chat-mobile, .desk__messages-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.desk__chat-header {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 5rem;
  background-color: #e4dbf3;
}
.desk__chat-header h4 {
  font-family: "Rokh";
  margin-right: 2rem;
}
.desk__chat-body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 56rem;
  background-color: #e4dbf3;
}
@media only screen and (max-width: 767px) {
  .desk__chat-body {
    height: 70rem;
  }
}
.desk__chat-body-ineer {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 95%;
  height: 95%;
  box-shadow: inset rgb(155, 154, 154) 0 0 0.6rem;
  background-color: #E8ECEF;
  border-radius: 0.5rem 0.5rem;
  overflow-y: scroll;
  padding-bottom: 10rem;
}
.desk__chat-send {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row-reverse;
  width: 50%;
  height: 5rem;
  background-color: #e4dbf3;
}
@media only screen and (max-width: 767px) {
  .desk__chat-send {
    width: 100%;
  }
}
.desk__chat-send-mobile {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row-reverse;
  width: 100%;
  height: 5rem;
  background-color: #e4dbf3;
}
.desk__message-send {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 90%;
  height: 5rem;
}
.desk__message-send input {
  width: 100%;
  height: 80%;
  border: none;
}
.desk__message-send input:focus {
  outline: none;
}
.desk__message-send svg {
  transform: rotate(-135deg);
  color: #8c68cd;
  transition: all 0.3s cubic-bezier(0.21, -0.48, 0.73, 1.51);
}
.desk__message-send svg:hover {
  cursor: pointer;
}
.desk__chat-share {
  width: 5%;
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  height: auto;
}
.desk__chat-share svg {
  margin-right: 1.5rem;
  cursor: pointer;
}
.desk__chat-send-item {
  background-color: transparent;
  border: none;
}
.desk__chat-offer {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  width: 90%;
  height: auto;
  padding: 1.5rem 0 1.5rem 0;
  border-radius: 1rem 1rem;
  box-shadow: rgb(198, 197, 197) 0 0 0.6rem;
  margin-top: 2rem;
  background-color: #ffffff;
  margin-bottom: 1rem;
}
.desk__chat-offer-icon {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 20%;
  height: 100%;
}
.desk__chat-offer-icon-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50% 50%;
  border: 1px solid #e4dbf3;
  margin: 0.5rem 0.5rem 0 1rem;
}
.desk__chat-offer-icon-inner img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50% 50%;
}
.desk__chat-offer-text {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 80%;
  height: 100%;
}
.desk__chat-offer-text-header {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: 5rem;
}
.desk__chat-offer-text-header h4 {
  font-family: "Rokh";
  font-size: 1.3rem;
}
.desk__chat-offer-text-price {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: 5rem;
  margin-top: 1rem;
}
.desk__chat-offer-text-price h5 {
  font-family: "Rokh";
  font-size: 1.1rem;
}
.desk__chat-offer-text-price h6 {
  margin-left: 2rem;
  font-size: 1.1rem;
}
.desk__chat-offer-text-content {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  font-family: "Rokh";
  font-size: 1.2rem;
  padding-left: 2rem;
}
.desk__chat-offer-text-btn {
  display: flex;
  justify-content: center;
  align-items: end;
  flex-direction: column;
  width: 100%;
  height: 5rem;
}
.desk__chat-messages {
  width: 100%;
  height: auto;
}
.desk__chat-request, .desk__chat-response {
  width: 100%;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.desk__chat-request {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}
.desk__chat-response {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}
.desk__chat-request-item, .desk__chat-response-item {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  border-radius: 1rem 1rem;
  box-shadow: rgb(179, 178, 178) 0 0 0.6rem;
  width: 50%;
  padding: 1rem 1 1rem 1;
  background-color: #ffffff;
}
@media only screen and (max-width: 767px) {
  .desk__chat-request-item, .desk__chat-response-item {
    width: 70%;
  }
}
.desk__chat-request-item {
  margin-left: 2rem;
}
.desk__chat-response-item {
  margin-right: 2rem;
}
.desk__chat-request-icon, .desk__chat-response-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 20%;
  height: 100%;
  margin-top: 0.5rem;
}
.desk__chat-request-icon {
  margin-left: 0.5rem;
}
.desk__chat-response-icon {
  margin-right: 0.5rem;
}
.desk__chat-request-icon-ineer, .desk__chat-response-icon-ineer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 5rem;
  height: 5rem;
  border-radius: 50% 50%;
  border: 1px solid #e4dbf3;
}
.desk__chat-request-icon-ineer img, .desk__chat-response-icon-ineer img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50% 50%;
}
.desk__chat-request-text, .desk__chat-response-text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100;
  height: 100%;
  padding: 2rem 1rem 2rem 1rem;
}
.desk__chat-request-text p, .desk__chat-response-text p {
  font-family: "Rokh";
  font-size: 1.2rem;
}
.desk__chat-request-text svg, .desk__chat-response-text svg {
  width: 2rem;
  height: 2rem;
  margin-top: 2rem;
  margin-bottom: 0;
}
.desk__chat-files {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.desk__chat-file-request, .desk__chat-file-response {
  width: 100%;
  height: auto;
}
.desk__chat-file-request {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
}
.desk__chat-file-response {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
}
.desk__chat-file-request-item, .desk__chat-file-response-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  border-radius: 0.5rem 0.5rem;
  background-color: #ffffff;
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin-bottom: 2rem;
  font-family: "Rokh";
  font-size: 1.3rem;
  cursor: pointer;
}
.desk__chat-file-request-item svg, .desk__chat-file-response-item svg {
  color: #8c68cd;
}
.desk__chat-file-request-item svg, .desk__chat-file-response-item svg {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
}
.desk__chat-file-request-item {
  margin-left: 2rem;
}
.desk__chat-file-response-item {
  margin-right: 2rem;
}
.desk__chat-images {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.desk__chat-image-request, .desk__chat-image-response {
  position: relative;
  width: 100%;
  height: auto;
}
.desk__chat-image-request svg, .desk__chat-image-response svg {
  position: absolute;
  bottom: 2rem;
  width: 2rem;
  height: 2rem;
}
.desk__chat-image-request {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
}
.desk__chat-image-response {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
}
.desk__chat-image-request-item, .desk__chat-image-response-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: auto;
  height: auto;
  border-radius: 0.5rem 0.5rem;
  background-color: #ffffff;
  padding: 1rem 1rem 1rem 1rem;
  margin-bottom: 2rem;
  font-family: "Rokh";
  font-size: 1.3rem;
  cursor: pointer;
}
.desk__chat-image-request-item img, .desk__chat-image-response-item img {
  width: 20rem;
  height: 20rem;
}
.desk__chat-image-request-item {
  margin-left: 2rem;
}
.desk__chat-image-response-item {
  margin-right: 2rem;
}
.desk__message-header {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 5rem;
  background-color: #E8ECEF;
}
.desk__message-header-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.desk__message-items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 56rem;
  background-color: #E8ECEF;
}
@media only screen and (max-width: 767px) {
  .desk__message-items {
    height: 70rem;
  }
}
.desk__message-items-inner {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  width: 96%;
  height: 100%;
  box-shadow: inset rgb(155, 154, 154) 0 0 0.5rem;
  overflow-y: scroll;
}
.desk__message-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 95%;
  height: 7rem;
  background-color: #ffffff;
  border-radius: 0.5rem 0.5rem;
  margin-top: 1rem;
  box-shadow: rgb(155, 154, 154) 0 0 0.5rem;
  cursor: pointer;
  color: black;
}
.desk__message-item-mobile {
  display: none;
  width: 100%;
  height: 7rem;
  background-color: #ffffff;
  border-radius: 0.5rem 0.5rem;
  margin-top: 1rem;
  box-shadow: rgb(155, 154, 154) 0 0 0.5rem;
  cursor: pointer;
  color: black;
}
@media only screen and (max-width: 767px) {
  .desk__message-item-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
}
.desk__message-icon {
  display: flex;
  justify-content: start;
  align-items: end;
  flex-direction: column;
  width: 10%;
  height: auto;
}
.desk__message-icon-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 6rem;
  height: 6rem;
  border-radius: 50% 50%;
  border: 1px solid #e4dbf3;
  margin-left: 2rem;
}
@media only screen and (max-width: 510px) {
  .desk__message-icon-inner {
    margin-left: 1rem;
  }
}
@media only screen and (max-width: 443px) {
  .desk__message-icon-inner {
    margin-left: 0.5rem;
  }
}
.desk__message-icon-inner img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50% 50%;
}
.desk__message-text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: row;
  width: 75%;
  height: auto;
}
.desk__message-title {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}
.desk__message-title p {
  font-family: "Rokh";
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
.desk__message-title h4 {
  font-family: "Rokh";
  font-size: 1.3rem;
}
.desk__message-time {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  white-space: nowrap;
  font-family: "Rokh";
  font-size: 1.1rem;
}
.desk__message-time svg {
  width: 1.5rem;
  margin-left: 0.5rem;
}
.desk__message-bag {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50% 50%;
  background-color: #8c68cd;
  color: white;
  font-family: "Rokh";
  margin-right: 1rem;
}

.message-tab {
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
  margin: 0 0.5rem 0 0.5rem;
  font-family: "Rokh";
  font-size: 1.3rem;
  color: #000000;
}

.message-active-tab {
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin: 0 0.5rem 0 0.5rem;
  font-family: "Rokh";
  font-size: 1.2rem;
  color: #ffffff;
  background-color: #8c68cd;
  border-radius: 1rem 1rem;
}

.desk-chat-items {
  position: relative;
  width: auto;
  height: auto;
  z-index: 100;
}

.desk-chat-tab svg {
  transform: rotate(90deg);
}

.desk-chat-list {
  display: none;
  position: absolute;
  width: auto;
  height: auto;
  padding: 1rem 1rem;
  background-color: white;
  box-shadow: rgb(176, 176, 176) 0 0 0.6rem;
  border-radius: 0.3rem 0.3rem;
  left: 0.2rem;
}
.desk-chat-list a {
  padding: 1rem 0 1rem 0;
  white-space: nowrap;
  color: black;
  font-family: "Rokh";
  transition: 0.3s all cubic-bezier(0.21, -0.48, 0.73, 1.51);
}
.desk-chat-list a:hover {
  margin-right: 0.3rem;
}

input[id=desk-chat-items] {
  display: none;
}

input[id=desk-chat-items]:checked ~ .desk-chat-list {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}

.check-blue-color {
  color: rgb(56, 56, 183);
}

.pledge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}
.pledge__payment-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 10rem;
  cursor: pointer;
  margin-right: 1.5rem;
}
.pledge__payment-item img {
  width: 8rem;
  height: 8rem;
}

input[type=radio] {
  display: none;
}

input[id=payment]:checked ~ label[for=payment],
input[id=payment2]:checked ~ label[for=payment2],
input[id=payment3]:checked ~ label[for=payment3],
input[id=payment4]:checked ~ label[for=payment4] {
  border: 3px solid #8c68cd;
  border-radius: 1rem 1rem;
}

.plan-title2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 5rem;
}
.plan-title2 h4 {
  font-family: "Rokh";
  font-size: 1.4rem;
}
.plan-title2 p {
  font-family: "Rokh";
  font-size: 1.2rem;
}

.plan {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 10rem;
  margin-bottom: 10rem;
}
.plan__tabBar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.plan__tabBar-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  border-radius: 1rem 1rem;
  padding: 1rem 1.5rem 1rem 1.5rem;
  border: 1px solid #000000;
  margin-right: 1.5rem;
  background-color: #ffffff;
  font-family: "Rokh";
  font-size: 1.1rem;
  cursor: pointer;
}
.plan__items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin-top: 6rem;
}
@media only screen and (max-width: 1199px) {
  .plan__items {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 767px) {
  .plan__items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.plan__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 30rem;
  height: auto;
  box-shadow: rgb(170, 170, 170) 0 0 0.6rem;
  border-radius: 1rem 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-right: 2rem;
  margin-top: 2rem;
}
.plan__header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}
.plan__header p {
  font-family: "Rokh";
  font-size: 1.1rem;
  margin-top: 2rem;
  padding: 0 2rem 0 2rem;
}
.plan__title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 50%;
  height: auto;
}
.plan__title h4 {
  font-family: "Rokh";
  font-size: 1.3rem;
  margin-top: 0.5rem;
}
.plan__title span {
  margin-right: auto;
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-bottom-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background-color: #8c68cd;
  font-family: "Rokh";
  font-size: 1.1rem;
  color: #ffffff;
}
.plan__token {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 90%;
  height: auto;
  margin-top: 2rem;
  border-bottom: 1px solid #8c68cd;
  border-top: 1px solid #8c68cd;
  padding: 1rem 0 1rem 0;
}
.plan__message-count {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 90%;
  height: auto;
  margin-top: 0.5rem;
  border-bottom: 1px solid #8c68cd;
  padding: 1rem 0 1rem 0;
}
.plan__token-title, .plan__message-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.plan__token-title h4, .plan__message-title h4 {
  font-family: "Rokh";
  font-size: 1.1rem;
}
.plan__box-token, .plan__box-message {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}
.plan__box-token svg, .plan__box-message svg {
  color: #8c68cd;
  cursor: pointer;
}
.plan__box-token span, .plan__box-message span {
  font-family: "Rokh";
  font-size: 1.3rem;
}
.plan__list-items {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}
.plan__list-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  font-family: "Rokh";
  font-size: 1.1rem;
}
.plan__list-item svg {
  width: 1.5rem;
  margin-right: 1rem;
  margin-left: 1rem;
  color: #8c68cd;
}
.plan__btn-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 95%;
  height: auto;
}
.plan__btn-price span {
  margin-right: 2rem;
  font-family: "Rokh";
  font-size: 1.5rem;
  color: #8c68cd;
}

.tab-bar-active {
  border: 1px solid #8c68cd;
  background-color: rgba(139, 104, 205, 0.337254902);
}

.table {
  width: 100%;
  height: auto;
  margin-bottom: 10rem;
}
@media only screen and (max-width: 767px) {
  .table {
    overflow-x: scroll;
  }
}
.table table {
  width: 100%;
  height: auto;
}
.table table head {
  width: 100%;
  height: auto;
}
.table table body {
  width: 100%;
  height: auto;
}

.table-header {
  text-align: center;
  border-bottom: 1px solid rgb(190, 189, 189);
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  font-family: "Rokh";
  font-size: 1.2rem;
}

.table-body {
  text-align: center;
  border-bottom: 1px solid rgb(190, 189, 189);
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  font-family: "Rokh";
  font-size: 1.3rem;
}

.profile-info-form-rating {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 1rem 1rem;
}
.profile-info-form-rating .profile-info-form-inputs {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: auto;
}
.profile-info-form-rating .profile-info-form-inputs input {
  margin-bottom: 2rem;
}
.profile-info-form-rating .profile-info-form-inputs textarea {
  margin-bottom: 2rem;
  width: 95%;
  resize: none;
  height: 20rem;
}

.profile-info-form-rate {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin-bottom: 2rem;
}
.profile-info-form-rate label {
  margin: 0 0.5rem;
  font-size: 2.5rem;
  color: #a9a9a9;
  cursor: pointer;
}

.profile-info-form-rate input:checked ~ label {
  color: #8c68cd;
}

.profile-info-form-rate input:checked ~ label {
  transform: scale(1.1);
}

.note-found {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 90%;
  padding: 5rem 5rem;
  overflow: none;
}
@media only screen and (max-width: 767px) {
  .note-found {
    height: 60rem;
  }
}
.note-found img {
  width: 70%;
  height: 60%;
}
@media only screen and (max-width: 767px) {
  .note-found img {
    width: 100%;
  }
}

.note-found-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}
.note-found-text p {
  font-family: "Rokh";
  font-size: 1.5rem;
}

.note-found-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}

.tiket-view {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-bottom: 5rem;
}

.eye-svg {
  cursor: pointer;
}

.tiket-message {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 3rem;
  margin-bottom: 6rem;
}

.tiket-message-items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.tiket-message-response {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 2rem 2rem;
}

.tiket-message-request {
  display: flex;
  justify-content: center;
  align-items: end;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 2rem 2rem;
}

.tiket-message-response-item {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;
  width: 50%;
  height: auto;
  min-height: 20rem;
  border-radius: 1.5rem 1.5rem;
  background-color: rgba(202, 239, 202, 0.83);
  padding: 1rem 1rem;
}
.tiket-message-response-item .tiket-message-response-title p {
  font-family: "Rokh";
  color: black;
  font-size: 1.2rem;
  font-weight: normal;
}
.tiket-message-response-item .tiket-message-response-text {
  margin-right: 2rem;
}
.tiket-message-response-item .tiket-message-response-text p {
  font-family: "Rokh";
  color: black;
  font-size: 1.2rem;
  font-weight: normal;
}

.tiket-message-request-item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row-reverse;
  width: 50%;
  height: auto;
  min-height: 20rem;
  border-radius: 1.5rem 1.5rem;
  background-color: rgba(167, 165, 165, 0.547);
  padding: 1rem 1rem;
}
.tiket-message-request-item .tiket-message-request-title p {
  font-family: "Rokh";
  color: black;
  font-size: 1.2rem;
  font-weight: normal;
}
.tiket-message-request-item .tiket-message-request-text p {
  font-family: "Rokh";
  color: black;
  font-size: 1.2rem;
  font-weight: normal;
}

.tiket-message-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-bottom: 5rem;
}
.tiket-message-form textarea {
  margin-top: 3rem;
}

.tiket-message-btn {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 3rem;
}

.tiket-message-response-file {
  display: flex;
  justify-content: start;
  align-items: end;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.tiket-message-response-file img {
  width: 4rem;
  height: 4rem;
  margin: 0.5rem 0.5rem;
}

.tiket-message-request-file {
  display: flex;
  justify-content: end;
  align-items: end;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.tiket-message-request-file img {
  width: 4rem;
  height: 4rem;
  margin: 0.5rem 0.5rem;
}

.about-us-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 50rem;
  background: linear-gradient(180deg, rgb(250, 245, 254) 0%, rgb(250, 245, 255) 7%);
  margin-top: -5rem;
}
@media only screen and (max-width: 767px) {
  .about-us-cover {
    height: auto;
    padding: 3rem 0;
    margin-top: 0;
  }
}

.about-us-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .about-us-header {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    height: auto;
    padding: 3rem 0;
    margin-bottom: 4rem;
  }
}

.about-us-info-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .about-us-info-img {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .about-us-img {
    display: none;
  }
}

.about-us-text {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: auto;
  padding-left: 4rem;
}
@media only screen and (max-width: 767px) {
  .about-us-text {
    width: 100%;
    margin-top: 3rem;
  }
}
.about-us-text h1 {
  color: white;
  font-family: "Rokh";
}
.about-us-text p {
  color: white;
  font-family: "Rokh";
  margin-top: 5rem;
}

.about-us-tags {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin-top: 4rem;
}
.about-us-tags a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
  padding: 0.5rem 1rem;
  border: white 1px solid;
  background-color: rgba(144, 144, 144, 0.4823529412);
  color: white;
  border-radius: 1.5rem 1.5rem;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  font-family: "Rokh";
  font-size: 1.2rem;
  white-space: nowrap;
}

.about-us-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 5rem;
}
.about-us-title h3 {
  font-family: "Rokh";
  color: black;
}
.about-us-title p {
  font-family: "Rokh";
  color: black;
}

.about-us-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-bottom: 5rem;
  margin-top: 4rem;
}
@media only screen and (max-width: 767px) {
  .about-us-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin-top: 3rem;
  }
}

.about-us-info-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .about-us-info-img {
    width: 100%;
    margin-top: 3rem;
  }
}

.about-us-info-text {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .about-us-info-text {
    width: 100%;
    margin-top: 3rem;
  }
}
.about-us-info-text h4 {
  font-family: "Rokh";
  color: black;
}
.about-us-info-text p {
  font-family: "Rokh";
  color: black;
  margin-top: 4rem;
}

.contact-us {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 100%;
  height: auto;
  margin-bottom: 5rem;
  margin-top: 5rem;
}

.contact-us-address {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: auto;
}

.contact-us-map {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  width: 50%;
  height: auto;
  border-radius: 1rem 1rem;
}
.contact-us-map iframe {
  width: 100%;
  height: 22rem;
  border-radius: 1.5rem 1.5rem;
}

.contact-us-items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.contact-us-item {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  width: 90%;
  height: 6rem;
  border-radius: 1rem 1rem;
  box-shadow: rgba(156, 155, 155, 0.61) 0 0 0.8rem;
  margin-top: 1rem;
  padding: 1rem 1rem;
}

.contact-us-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  background-color: #e4dbf3;
  border-radius: 50% 50%;
}

.contact-us-svg {
  color: #8c68cd;
}

.contact-us-text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  margin-right: 0.5rem;
}
.contact-us-text h3 {
  font-family: "Rokh";
  color: black;
}
.contact-us-text p {
  font-family: "Rokh";
  color: black;
}