/*
general style colors
*/
:root {
  --primary-200: #1b5096;
  --primary-300: #95b5d5;
  --secondary-100: #c65a42;
  --text-field: #b3b3b3;
  --text-white: #fdfdfd;
  --secondary-200: #7a0e00;
  --secondary-300: #dd9c8e;
  --background-color: white;
  --text-color: black;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  animation: fadein 0.2s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.btnlink {
  text-decoration: none;
  display: inline-block;
}
/* 
for darkmode
*/
.dark-mode {
  background-color: black !important;
  color: white !important;
}
#usersetpage {
  background-color: var(--background-color);
  color: var(--text-color);
}
button {
  transition: 0.2s ease-in-out;
}
a button {
  transition: 0.2s ease-in-out;
}
/* button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
} */
/*
styling for the header
*/
/*.hif {
  position: absolute;
  top: 0;
  z-index: 10000;
}*/
.header-con {
  display: flex;
  width: 100%;
  height: 8.5rem;
  padding: 1.375rem 5rem 2.9527rem 5rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  justify-content: space-around;

  gap: 6.5rem;
}
.nav {
  display: flex;
  width: 45.8125rem;
  height: 4.1875rem;
  padding-right: 40px;
  align-items: center;
  gap: 1.875rem;
  flex-shrink: 0;
}

.header-con img {
  width: 8.9375rem;
  height: 4.1723rem;
  flex-shrink: 0;
}
.nav-links a {
  color: var(--Text-Field, #b3b3b3);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */

  text-decoration: none;
  text-transform: capitalize;
}
.nav-links a:active {
  color: var(--primary-200);
}
.help-center {
  /* display: flex;*/
  /* gap: 8px; */
  color: var(--Text-Field, #b3b3b3);
  font-family: Poppins;
  font-weight: 400;
  font-style: normal;
  align-items: center;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  cursor: pointer;
}
.hellp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.help-center p {
  text-transform: capitalize;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  /* font-size: 15px; */
  color: white;
  text-align: left;
}
.dropdown-content a li {
  display: flex;
  width: 13.3125rem;
  padding: 0.625rem;
  align-items: center;
  gap: 0.625rem;
}

.dropdown-content ul {
  background: #fff;
  /* Fade */
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
}
.dropdown-content ul a {
  text-decoration: none;
  color: #000;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.dropdown-content li {
  margin: 5px 0;
  text-align: center;
  list-style-type: none;
}
.help-center .dropdown-content {
  transition: 0.5s ease-in;
}
.help-center:hover .dropdown-content {
  display: block;
  transition: 0.4s ease-in-out;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
.search {
  display: flex;
  width: 27.6875rem;
  height: 3.5rem;
  justify-content: center;
  align-items: center;
  gap: 5.375rem;
  flex-shrink: 0;
}
.search-box {
  width: 18.8125rem;
  height: 2.75rem;
  padding: 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;

  display: flex;

  flex-shrink: 0;
  border-radius: 15px;
  border: 1px solid var(--primary-300, #95b5df);
  background: var(--Text-White, #fdfdfd);
}
.search-box input {
  border: none;
  border: none;
  background-color: transparent;
  outline: none;
}
.search-box input::placeholder {
  width: 12.125rem;

  color: var(--Text-Field, #b3b3b3);
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem; /* 150% */
}
.mobmenu {
  display: none;
}
/*
styling for the footer
*/
footer {
  background-color: var(--primary-200);
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0;
}
.footer-sub {
  display: flex;
  width: 90rem;
  padding: 5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}
footer img {
  width: 12.5rem;
  height: 5.83544rem;
  flex-shrink: 0;
}
/* .sub-icon1 svg {
  width: 12.5rem;
  height: 5.8354rem;
  flex-shrink: 0;
} */
.sub-icon1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 0 0;
}
.sub-icon1 p {
  width: 19.375rem;
  color: var(--Text-White, #fdfdfd);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.sub-icon {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
}
.sub-icon2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 0 0;
}
.sub-icon2 h2 {
  color: var(--Text-White, #fdfdfd);
  font-family: Inter;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.25rem; /* 128.571% */
  text-transform: capitalize;
  font-family: Inter;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "slnt" 0;
}
.sub-icon2 a {
  color: var(--Text-White, #fdfdfd);

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
  text-decoration: none;
  text-transform: capitalize;
}
.subs-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  align-self: stretch;
}
.subs-foot h3 {
  color: var(--Text-White, #fdfdfd);

  /* H3 */
  font-family: Inter;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.25rem; /* 128.571% */
}
.foot-input {
  display: flex;
  width: 34.1875rem;
  align-items: center;
  gap: 1rem;
}
.foot-email {
  display: flex;
  padding: 16px 0;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
}
.input {
  border-radius: 10px;
  border: 1px solid var(--Text-Field, #b3b3b3);
  padding: 1rem;
}
.input input {
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
}
.input input::placeholder {
  color: var(--Text-White, #fdfdfd);

  /* CTA.5 */
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  text-transform: capitalize;
}
.subs-footer h3 {
  color: var(--Text-White, #fdfdfd);

  /* H3 */
  font-family: Inter;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px; /* 128.571% */
}
.foot-email button {
  display: flex;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  color: white;
  background-color: var(--secondary-100);

  /* Button 
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.02);*/
  border: 1px solid var(--secondary-100);
  color: white;

  /* small button */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
  text-transform: capitalize;
}
.foot-email button:hover {
  background-color: var(--secondary-200);
  color: white;
  border: 1px solid var(--secondary-200);
}
.foot-email button:active {
  background-color: var(--secondary-100, #c65a42);
  color: white;
  border: 1px solid var(--secondary-100);
}
.foot-last {
  display: flex;
  width: 100%;
  height: 5rem;
  padding: 2.5rem 5rem;
  justify-content: space-between;
  align-items: center;
}
.foot-last p {
  color: var(--Text-Blur, #e0e0e0);
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem; /* 150% */
}
.social-svg a {
  width: 2rem;
  height: 2rem;
}
.social-svg {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

/*
styling for the user landing page
*/
.landing-main {
  width: 100%;
}

.slider-main {
  /* width: 81.25rem; */
  width: 100%;
  height: 43.1875rem;
  margin: 0 auto 1.25rem auto;
  position: relative;
  overflow: hidden;
  display: flex;
  z-index: 5;
}
.slisli {
  width: 100%;
  height: 100%;
  display: flex;
}
.slide {
  flex: 0 0 100%;
  /* width: 500px; */
  width: 100%;
  animation: slide 9s infinite;
  /* opacity: 0; */
  transition: opacity 0.5s;
}

#userslider-con {
  width: 100%;
  height: 100%;
  /* position: absolute;
  opacity: 0; */
}
.userslider {
  display: flex;
  /* width: 81.25rem; */
  width: 100%;
  height: 43.1875rem;
  /* padding-left: 0.375rem; */
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  margin: 0 auto 1.25rem auto;
  position: relative;
  /* overflow: hidden; */
}

.userslider img {
  /* width: 45.375rem; */
  height: 43.1875rem;

  flex-shrink: 0;
  object-fit: contain;
}
.slider-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  width: 36rem;
}
.slider-text h1 {
  height: 8.125rem;
  align-self: stretch;
  color: var(--primary-200, #1b5096);
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.slider-text p {
  width: 37.4375rem;
  color: #263238;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.slider-text button {
  display: flex;
  padding: 1rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  background: var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.02);
  color: white;
  border: none;
  color: var(--Text-White, #fdfdfd);

  /* CTA */
  font-family: Poppins;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 140% */
}
.slider-text button:hover {
  background-color: #7a0e00;
}
.slider-text button:active {
  background-color: #c65a42;
}
.userslider img {
  object-fit: cover;
}
.circ {
  width: 45.0625rem;
  height: 45.9375rem;
  flex-shrink: 0;
  border-radius: 45.9375rem;
  background: rgba(140, 109, 62, 0.6);
  position: absolute;
  z-index: -5;
  right: -18.75rem;
}
/* #userslisec-con {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
} */
#userslisec {
  display: flex;
  width: 81.25rem;
  height: 43.1875rem;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  position: relative;
}
#userslisec img {
  width: 43.25rem;
  height: 64.92688rem;
  flex-shrink: 0;
  object-fit: cover;
}
#userslisec svg {
  width: 46.1875rem;
  height: 43.0625rem;
  flex-shrink: 0;
  fill: var(--primary-200, #1b5096);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -5;
}
.slider-text2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  width: 35.75rem;
  margin-bottom: 9.31rem;
}
.slider-text2 h1 {
  /* height: 8.125rem; */
  align-self: stretch;
  color: var(--primary-200, #1b5096);
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
  width: 36.75rem;
  white-space: wrap;
}
.slider-text2 p {
  width: 37.4375rem;
  color: #263238;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  width: 23rem;
  white-space: wrap;
}
.slider-text2 button {
  display: flex;
  padding: 1rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  background: var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.02);
  color: white;
  border: none;
  color: var(--Text-White, #fdfdfd);

  /* CTA */
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 140% */
}
.slider-text2 button:hover {
  background-color: #7a0e00;
}
.slider-text2 button:active {
  background-color: #c65a42;
}
/* #build-con {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
} */
#build-main {
  display: flex;
  width: 81.25rem;
  height: 43.1875rem;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  position: relative;
}
.circ2 {
  width: 69.9375rem;
  height: 77.5rem;
  flex-shrink: 0;
  border-radius: 77.5rem;
  background: #4e83c9;
  position: absolute;
  left: -20%;
  z-index: -5;
}
#build-main img {
  width: 50.1875rem;
  height: 50.5rem;
  flex-shrink: 0;
  object-fit: contain;
}
.slider-text3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  width: 27.1875rem;
  margin-bottom: 9.31rem;
}
.slider-text3 h1 {
  /* height: 8.125rem; */
  align-self: stretch;
  color: var(--primary-200, #1b5096);
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
  width: 21.8125rem;
  white-space: wrap;
}
.slider-text3 p {
  width: 21.8125rem;
  color: #263238;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  width: 23rem;
  white-space: wrap;
}
.slider-text3 button {
  display: flex;
  padding: 1rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  background: var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.02);
  color: white;
  border: none;
  color: var(--Text-White, #fdfdfd);

  /* CTA */
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 140% */
}
.slider-text3 button:hover {
  background-color: #7a0e00;
}
.slider-text3 button:active {
  background-color: #c65a42;
}

.stats {
  display: flex;
  width: 100%;
  padding: 2.5rem 5rem;
  justify-content: space-between;
  align-items: center;
  background: var(--primary-200, #1b5096);
}
.stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stats > div p {
  display: flex;
  width: 14.6875rem;
  height: 2.25rem;
  flex-direction: column;
  justify-content: center;
  color: var(--Text-White, #fdfdfd);
  text-align: center;

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.stats > div h2 {
  width: 10.1875rem;
  height: 4.9375;
  color: var(--Text-White, #fdfdfd);
  text-align: center;

  /* H1 */
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.works {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
}
.works-main {
  display: flex;
  width: 79.3125rem;
  padding: 5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  background: var(--Text-White, #fdfdfd);
}
.main-first {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}
.main-first h2 {
  width: 55.56rem;
  color: var(--primary-200, #1b5096);
  text-align: center;

  /* H1 */
  font-family: Inter;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 56px; /* 116.667% */
}
.main-first p {
  width: 55.5625rem;
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.main-sec {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  align-self: stretch;
}
.main-sec > div {
  display: flex;
  padding: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
  border-radius: 8px;
  background: var(--Text-White, #fdfdfd);
}
.con-back {
  width: 6.25rem;
  height: 6.25rem;
  fill: #ecc8c0;
  z-index: -1000;
}
.icon-main {
  width: 4rem;
  height: 4rem;
  position: absolute;
  left: 18px;
  top: 18px;
}
.svg-hold {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}
.svg-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
}
.svg-text h3 {
  align-self: stretch;
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* H2 */
  font-family: Inter;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 44px; /* 122.222% */
  text-transform: capitalize;
}
.svg-text p {
  align-self: stretch;
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B1 */
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.ex {
  display: flex;
  width: 80rem;
  padding: 5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  background: var(--Text-White, #fdfdfd);
  z-index: -5;
}
.ex-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  align-self: stretch;
}
.ex-first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.ex-first h3 {
  width: 55.5625rem;
  color: var(--primary-200, #1b5096);
  text-align: center;

  /* H1 */
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.ex-first p {
  width: 55.5625rem;
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}
.ex-sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  align-self: stretch;
}
.ex-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  flex: 1 0 0;
}
.ex-text h4 {
  color: var(--primary-200, #1b5096);

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.ex-filled > div {
  display: flex;
  padding: 1rem 0rem 1rem 1rem;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}
.ex-filled {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  align-self: stretch;
}
.ex-filled p {
  color: var(--Text-Active, #00171f);

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
  /* width: 33.8125rem; */
  height: 2rem;
}
.ex-filled > div {
  display: flex;
  padding: 1.10888rem 5.66925rem 0.89113rem 1rem;
  align-items: center;
  align-self: stretch;
  /* background: rgba(189, 161, 118, 0.30); */
}
.ex-graphics img {
  width: 25.64081rem;
  height: 30.36169rem;
  flex-shrink: 0;
  object-fit: cover;
}
/*.big-e {
  
  width: 29.288rem;
  height: 33.125rem;
  flex-shrink: 0;
  border-radius: 33.125rem;
  border: .125rem solid var(--primary-200, #1b5096);
}*/
.ex-graphics {
  position: relative;
}
.ex-graphics svg {
  position: absolute;
  z-index: -2;
}
.browse {
  display: flex;
  width: 100%;
  padding: 5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  background: var(--primary-300, #95b5df);
}
.browse-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.browse-head h3 {
  color: var(--Text-Active, #00171f);

  /* H1 */
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.browse-head p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.browse-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  align-self: stretch;
}
.browse-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  flex: 1 0 0;
}
.browse-flex > div {
  display: flex;
  /* width: 38.75rem; */
  width: 100%;
  padding: 2.5rem;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.5rem;
  background: var(--Text-White, #fdfdfd);
  cursor: pointer;
}
.browse-flex p {
  color: var(--Text-Active, #00171f);

  /* H2 */
  font-family: Inter;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
}
.browse-flex svg {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
}
.talent {
  display: flex;
  width: 79.3125rem;
  padding: 5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  background: var(--Text-White, #fdfdfd);
}
.tal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  flex: 1 0 0;
}
.talent-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.talent-text h3 {
  color: var(--primary-200, #1b5096);
  text-align: center;

  /* H1 */
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.talent-text p {
  width: 44.5625rem;
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.talentsub {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  align-self: stretch;
}
.tals {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  align-self: stretch;
}
.sub-tal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  align-self: stretch;
}
.sub-tal > div {
  display: flex;
  padding: 2.5rem;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  flex: 1 0 0;
  border-radius: 0.625rem;
  background: var(--Text-White, #fdfdfd);

  /* Sleek */
  box-shadow: 0.25rem 0.25rem 0.125rem 0rem rgba(0, 0, 0, 0.05);
}
.sub-tal img {
  width: 25rem;
  height: 18.75rem;
  border-radius: 1.25rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat;
  object-fit: cover;
}
.paras p {
  align-self: stretch;
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* H3 */
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.25rem; /* 128.571% */

  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "slnt" 0;
}
.paras p:nth-child(4) {
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B1 */
  font-size: 1rem !important;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.paras p:nth-child(3) {
  font-weight: 700;
}
.paras {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
}
.feedback {
  display: flex;
  width: 100%;
  padding: 5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  background: var(--primary-300, #95b5df);
}
.feedsub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  align-self: stretch;
}
.feed-head h3 {
  color: var(--Text-Active, #00171f);

  /* H1 */
  font-family: "Inter", sans-serif;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.feedbody {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  align-self: stretch;
  overflow: hidden;
}
.feed-box {
  /*display: flex;
  height: 22.625rem;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;*/
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  overflow: hidden;
  width: 100%;
}

@keyframes news-crawl-animation {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.feed-box.fex {
  animation: news-crawl-animation 10s linear infinite;
  animation-fill-mode: forwards;
}

@keyframes news-crawl-animation2 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.feed-box.dex {
  animation-fill-mode: forwards;
  animation: news-crawl-animation2 10s linear infinite;
}
.feed-box1 {
  display: flex;
  width: 36.375rem;
  height: 20.5rem;
  padding: 2.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 0.625rem;
  background: var(--White, #fff);
  overflow: hidden;
}
.feed-box1 svg {
  width: 1rem;
  height: 1rem;
  fill: var(--primary-200, #1b5096);
}
.feed-box1 h3 {
  color: var(--Text-Active, #00171f);

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
  align-self: stretch;
}
.feedp {
  color: var(--Text-Active, #00171f);

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.profile-mini {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.profile-mini div p:nth-child(1) {
  color: var(--primary-200, #1b5096);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.profile-mini div p:nth-child(2) {
  color: var(--Text-Active, #00171f);

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.profile-mini img {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  border-radius: 5rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat, #d9d9d9;
  object-fit: cover;
}
.question {
  display: flex;
  padding: 5rem 0rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  width: 100%;
  align-self: stretch;
  background: var(--Text-White, #fdfdfd);
}
.queshead {
  display: flex;
  width: 59.9375rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.queshead h2 {
  color: var(--primary-200, #1b5096);

  /* H1 */
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.queshead p {
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  width: 41.25rem;
}
.quests {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
}
.quests svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.quests p {
  color: var(--Text-Active, #00171f);

  /* b0.5 */
  font-family: Poppins;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 133.333% */
}
.questions {
  display: flex;
  justify-content: flex-start;
  width: 59.9375rem;
  padding: 2.5rem;
  align-items: center;
  gap: 1.5rem;
  width: 85%;
  margin: auto;
  border-radius: 0.5rem;
  border-bottom: 0.0625rem solid var(--Grey, #dcdcdc);

  /* Fade */
  box-shadow: 0.125rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
}

/*
styling for about us page
*/
.landing-about {
  width: 100%;
}
.about-head {
  display: inline-flex;
  height: 44.375rem;
  /*padding: 13.5625rem 15.9375rem 15.875rem 15.9375rem;*/
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /*background: url(https://s3-alpha-sig.figma.com/img/0aed/a905/87dbd03ed42495632e77d7307504f914?Expires=1709510400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=hCmuIeXP5wFnxv1ia3I2LaJtCqb7R47HVrCMjCOajf4-nedrqJ0MqevQK7quBCzY9Gy3eHD5h2UfuwFG3okrpzFDxTyI5GiKpKk9x8yQStIIpswmmLa90mOTU4JIR5FddevOzl-lAGraSzo6WXLM66w1Y8hNYdgCzls-znuwHN~H0ZfAsg4Wplt~LoHatxb8DqYqauKAtPBIFPosn7g3U5RGrrh8Bbv-xXBI74OCGY20hPzQib5cAEehupd0UMD15UWlKm7kPvIvFX-zIKTEpyUgufr51n4IRyNiWA961LiAciHARpdnxG9U-JbRrfZZ1nnMBa8m1DRCDrBn3hJOpA__),
    lightgray 50% / cover no-repeat;
  background-size: cover;*/
  width: 100%;
  background-color: black;
  position: relative;
}
.about-head img {
  width: 100%;
  height: 100%;
  opacity: 0.3;
}
.head-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.1875rem;
  position: absolute;
}
.head-text h2 {
  color: var(--primary-200, #1b5096);
  text-align: center;
  font-family: Inter;
  font-size: 3.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2.75rem; /* 88% */
}
.head-text p {
  width: 58.125rem;
  color: var(--Text-White, #fdfdfd);
  text-align: center;

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}
.mission {
  display: inline-flex;
  padding: 5rem;
  align-items: center;
  gap: 2.5rem;
  background: var(--primary-200, #1b5096);
  width: 100%;
  margin-top: 2.5rem;
  justify-content: space-between;
}
.mission-text {
  display: flex;
  height: 26.0625rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.875rem;
}
.mission-text h2 {
  color: white;

  /* H1 */
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.mission-text p {
  width: 29.375rem;
  flex: 1 0 0;
  color: white;

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}
.mission img {
  width: 44.9375rem;
  height: 26.8125rem;
  object-fit: cover;
}
.choose {
  display: flex;
  width: 100%;
  padding: 5rem;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  background: var(--Text-White, #fdfdfd);
  margin-top: 3.125rem;
}
.choose h2 {
  width: 48.5625rem;
  height: 3.625rem;
  color: var(--primary-200, #1b5096);

  /* H1 */
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.choose h2:nth-child(2) {
  align-self: stretch;
  color: var(--Text-Active, #00171f);
  width: 100%;
  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  line-height: 2rem; /* 133.333% */
}
.choose-main {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  gap: 4rem;
  align-self: stretch;
}
.choose-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 0 0;
}

.choose-sub {
  display: flex;
  padding: 0.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  align-self: stretch;
}
.choose-sub > div {
  display: flex;
  /* align-items: center; */
  gap: 0.875rem;
  align-self: stretch;
}
.choose-sub svg {
  width: 2rem;
  height: 2rem;
}
.choose-sub p {
  color: var(--Text-Active, #00171f);

  /* B1 medium */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem; /* 150% */
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
}
.choose-main img {
  /* width: 32.6563rem;
  height: 41.875rem; */
  width: 28.875rem;
  height: 40.5rem;
  object-fit: cover;
}
.team {
  display: flex;
  width: 100%;
  padding: 5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  background: var(--primary-300, #95b5df);
}
.team h2 {
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* H1 */
  font-family: "Inter";
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.team-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 2.5rem;
  grid-row-gap: 1.25rem;
  grid-column-gap: 1.25rem;

  border-radius: 0.625rem;
}
.team-boxes {
  display: flex;
  padding: 2.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex: 1 0 0;
  border-radius: 0.625rem;
  background: var(--Text-White, #fdfdfd);
}
.team-boxes img {
  width: 17.625rem;
  height: 17.625rem;
  border-radius: 17.625rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat, #fff;
  object-fit: cover;
}
.team-boxes > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}
.team-boxes h3 {
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* H3 */
  font-family: Inter;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.25rem; /* 128.571% */
}
.team-boxes p {
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.platform {
  display: flex;
  width: 100%;
  height: 22.4375rem;
  padding: 3rem 5rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  flex-shrink: 0;
  background: var(--Text-White, #fdfdfd);

  /* Sleek */
  box-shadow: 0.25rem 0.25rem 0.125rem 0rem rgba(0, 0, 0, 0.05);
}
.platform h2 {
  color: var(--primary-200, #1b5096);

  /* H1 */
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.platform p {
  width: 34.6875rem;
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.platform button {
  display: flex;
  padding: 1rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  background: var(--secondary-100, #c65a42);
  border: none;
  color: white;
  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);

  /* CTA */
  font-family: Poppins;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
  text-transform: capitalize;
}
.platform button:hover {
  background-color: var(--secondary-200);
}
.platform button:active {
  background-color: var(--secondary-100);
}
/*
styling for the workpage
*/
.make {
  display: flex;
  padding: 0 5.75rem;
  align-items: center;
  position: relative;
  margin: auto;
  width: 100%;
}
.make-first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  /* position: absolute; */
}
.make-first > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.make-first h3 {
  color: var(--primary-200, #1b5096);

  /* H1 */
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.make-first p {
  color: var(--primary-200, #1b5096);

  /* H2 */
  font-family: Inter;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
}

.make-first button {
  color: var(--Text-White, #fdfdfd);

  /* CTA */
  font-family: "Poppins";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
  display: flex;
  padding: 1rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  background: var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  border: none;
}
.make-first button:hover {
  background-color: var(--secondary-200);
}
.make-first button:active {
  background-color: var(--secondary-100);
}
.make img {
  width: 31.994rem;
  height: 48.1405rem;
  flex-shrink: 0;
  object-fit: contain;
  z-index: 5;
}
.oppo-main {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: 1.875rem;
}

.lines > div {
  background-color: var(--primary-200);
}
/* .line-1 {
  width: 2.962rem;
  height: 37.7014rem;
  transform: rotate(44.755deg);
  flex-shrink: 0;
  border-radius: 3.1536rem;
  background: var(--primary-200, #1b5096);
  position: absolute;
  right: 28.125rem;
  top: -3.125rem;
}
.line-2 {
  width: 2.962rem;
  height: 37.7014rem;
  transform: rotate(44.755deg);
  flex-shrink: 0;
  border-radius: 3.1536rem;
  background: var(--primary-200, #1b5096);
  position: absolute;
  right: 31.25rem;
  top: 5rem;
}
.line-3 {
  width: 2.962rem;
  height: 30.9746rem;
  transform: rotate(44.755deg);
  flex-shrink: 0;
  border-radius: 3.1536rem;
  background: var(--primary-200, #1b5096);
  position: absolute;
  right: 18.75rem;
  top: 3.75rem;
}
.line-4 {
  width: 2.962rem;
  height: 32.1861rem;
  transform: rotate(44.755deg);
  flex-shrink: 0;
  border-radius: 3.1536rem;
  background: var(--primary-200, #1b5096);
  position: absolute;
  right: 25rem;
  top: 16.25rem;
} */
.oppo-main > h2 {
  color: #000;

  /* H2 */
  font-family: Inter;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
  text-align: center;
}
.trans {
  display: flex;
  padding: 5rem 3rem;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}
.trans-pic {
  display: flex;
  width: 32.25rem;
  align-items: flex-start;
  align-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.trans-pic img {
  width: 15.625rem;
  height: 12.5rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat, #d9d9d9;
  object-fit: cover;
}
.trans-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.trant h2 {
  width: 35.5rem;
  color: #000;

  /* H1 */
  font-family: "Inter";
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.trant p {
  width: 35.5rem;
  color: #000;

  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.trant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.trans-ser {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.trans-ser1 {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.trans-ser1 > div {
  display: flex;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
}
.trans-ser1 p {
  color: #000;

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}
.trans-text button {
  color: var(--secondary-100);

  /* small button */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
  display: flex;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  color: white;
  background-color: var(--secondary-100);
  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  border: 0.0625rem solid var(--secondary-100);
}
.trans-text button:active {
  background: var(--secondary-100, #c65a42);
  color: white;
}
.trans-text button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.safe {
  display: flex;
  padding: 5rem 3rem;
  align-items: center;
  gap: 2.5rem;
}
.safe-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
.safe-te {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.safe-te h2 {
  width: 35.5rem;
  color: #000;

  /* H1 */
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.safe-te p {
  width: 35.5rem;
  color: #000;

  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.safe-fl {
  display: flex;
  width: 43.1875rem;
  align-items: flex-start;
  gap: 1.5rem;
}
.safe-fl > div {
  display: flex;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex: 1 0 0;
}
.safe-fl p {
  color: #000;

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}
.safe-text button {
  color: var(--Text-White, #fdfdfd);

  /* small button */
  font-family: Poppins;
  background-color: var(--secondary-100);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */

  display: flex;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  border: 0.0625rem solid var(--secondary-100);
}
.safe-text button:active {
  background: var(--secondary-100, #c65a42);
  color: white;
}
.safe-text button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.safe-pic {
  display: flex;
  width: 32.25rem;
  align-items: flex-start;
  align-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.safe-pic img {
  width: 15.625rem;
  height: 12.5rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat, #d9d9d9;
  object-fit: cover;
}

/*
styling for the user terms
*/
.terms-main {
  width: 100%;
  height: 58.125rem;
  flex-shrink: 0;
  background: var(--Text-White, #fdfdfd);
}
.terms-sub {
  display: flex;
  width: 90%;
  margin: auto;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.875rem;
}
.terms-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.terms-text h3 {
  color: var(--Text-Field, #b3b3b3);
  font-family: "Inter";
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2.25rem; /* 128.571% */
}
.tt-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.tt-sub h2 {
  color: var(--primary-200, #1b5096);
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
  text-transform: capitalize;
}
.tt-sub p {
  color: var(--Text-Field, #b3b3b3);

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.t-terms {
  width: 85%;
  margin: auto;
  height: 31.25rem;
  color: var(--Text-Active, #00171f);
  text-align: justify;
  font-family: "Inter";
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2.25rem; /* 128.571% */
  overflow-y: scroll;
}
.t-terms::-webkit-scrollbar-thumb {
  border-radius: 1.5rem;
  background: var(--secondary-100, #c65a42);
  width: 0.75rem;
  height: 0.625rem;
  flex-shrink: 0;
}
.t-terms::-webkit-scrollbar {
  width: 0.75rem;
}
.t-terms::-webkit-scrollbar-track {
  border-radius: 1.5rem;
  background: var(--primary-100, #4e83c9);
}
.t-terms h3 {
  color: var(--Text-Active, #00171f);
  text-align: justify;
  font-family: "Inter";
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2.25rem; /* 128.571% */
}
.t-terms p {
  color: var(--Text-Active, #00171f);
  font-family: "Poppins";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
  margin-bottom: 1.25rem;
}
.read {
  display: inline-flex;
  align-items: center;
  gap: 16rem;
}
.check {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.check input {
  width: 1.25rem;
  height: 1.25rem;
}
.check p {
  color: var(--Text-Active, #00171f);
  font-family: "Poppins";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem; /* 120% */
}
.read {
  width: 85%;
  margin: auto;
}
.readbtn {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
/* #myButton {
  opacity: 0.5;
  cursor: not-allowed;
}
.enabled {
  opacity: 1;
  cursor: pointer;
} */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.readbtn button {
  display: flex;
  height: 3.5rem;
  padding: 1rem 2rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.25rem;
  background: var(--secondary-100, #c65a42);
  border: none;
  color: white;
  color: var(--Text-White, #fdfdfd);

  /* CTA */
  font-family: Poppins;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
}
.readbtn button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.readbtn button:active {
  background: var(--secondary-100, #c65a42);
}
/*
styling for the decor page
*/
.decor {
  width: 90%;
  margin: auto;
  display: flex;
}
.aside {
  display: inline-flex;
  height: 106.5625rem;
  padding: 2rem;
  flex-direction: column;
  align-items: center;
  gap: 11.25rem;
  flex-shrink: 0;
  border-right: 0.0625rem solid var(--Text-Field, #b3b3b3);
  background: #fff;

  /* Fade */
  box-shadow: 0.125rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  bottom: 0;
}
.categ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  align-self: stretch;
}
.aside-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  align-self: stretch;
}
.aside-main h2 {
  color: var(--Text-Active, #00171f);
  font-family: Inter;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.25rem; /* 128.571% */
}
.asidebtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  align-self: stretch;
}
.asidebtn button {
  display: flex;
  padding: 1rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Grey, #dcdcdc);
  border: none;
  background-color: transparent;
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.asidebtn button:hover {
  color: white;
  background-color: var(--secondary-300);
}
.asidebtn button:active {
  background-color: var(--secondary-100);
}
.asidedrop {
  display: flex;
  justify-content: space-evenly;
  padding: 1rem 1.5rem;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Grey, #dcdcdc);
}
.aside1 {
  width: 1.375rem;
  height: 1.375rem;
}
.asidedrop p {
  width: 6rem;
  flex-shrink: 0;
  align-self: stretch;
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.aside2 {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.prev-con {
  display: flex;
  width: 90%;
  margin: auto;
  padding: 1.5rem 2.5rem;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  background: var(--Text-White, #fdfdfd);
}
.prev-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}
.prev-head h1 {
  color: #000;

  /* H2 */
  font-family: Inter;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
}
.prev-head button {
  display: flex;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1.25rem;
  border: 0.0625rem solid var(--secondary-100, #c65a42);
  background-color: transparent;

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  color: var(--secondary-100, #c65a42);

  /* small button */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
}
.prev-head button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.prev-head button:active {
  background-color: var(--secondary-100);
  color: white;
}
.prev-hire {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.hire-box {
  display: flex;
  width: 24.1875rem;
  padding: 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--primary-300, #95b5df);
  background: #fff;
}
.hire-prof {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 0 0;
}
.hire-prof img {
  width: 5rem;
  height: 5rem;
  border-radius: 5rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat;
}
.hire-prof h3 {
  color: #000;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  align-self: stretch;
}
.hire-prof p {
  color: #000;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
  align-self: stretch;
}
.hire-brief {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
.hire-brief h2 {
  align-self: stretch;

  color: #000;

  /* H3 */
  font-family: "Inter";
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.25rem; /* 128.571% */
}
.hire-brief p {
  color: #000;

  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  align-self: stretch;
}
.hire-stars {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  align-self: stretch;
}
.hstars {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 0 0;
}
.hstars svg {
  width: 1.5rem;
  height: 1.5rem;
}
.hire-stars button {
  display: flex;
  width: 6.875rem;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);

  border: 0.0625rem solid var(--secondary-100);
  background-color: transparent;
  color: var(--secondary-100, #c65a42);

  /* small button */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
}
.hire-stars button:active {
  background: var(--secondary-100, #c65a42);
  color: white;
}
.hire-stars button:hover {
  background-color: var(--secondary-200);
  color: white;
}
#home-d {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  width: 90%;
  margin: 3.125rem auto 0 auto;
}
#home-d h2 {
  color: #000;

  /* H2 */
  font-family: "Inter";
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
}
#homed1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  width: 90%;
  margin: 3.125rem auto 0 auto;
}
#homed1 h2 {
  color: #000;

  /* H2 */
  font-family: "Inter";
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
}
#homed2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  width: 90%;
  margin: 3.125rem auto 0 auto;
}
#homed2 h2 {
  color: #000;

  /* H2 */
  font-family: "Inter";
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
}
#homed3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  width: 90%;
  margin: 3.125rem auto 0 auto;
}
#homed3 h2 {
  color: #000;

  /* H2 */
  font-family: "Inter";
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
}
#homed4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  width: 90%;
  margin: 3.125rem auto 0 auto;
}
#homed4 h2 {
  color: #000;

  /* H2 */
  font-family: "Inter";
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
}
#homed5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  width: 90%;
  margin: 3.125rem auto 0 auto;
}
#homed5 h2 {
  color: #000;

  /* H2 */
  font-family: "Inter";
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
}
#homed6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  width: 90%;
  margin: 3.125rem auto 0 auto;
}
#homed6 h2 {
  color: #000;

  /* H2 */
  font-family: "Inter";
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.75rem; /* 122.222% */
}
.d-skills {
  display: flex;
  padding: 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  flex: 1 0 0;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--primary-100, #4e83c9);
}
.skill-t {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  align-self: stretch;
}
.skill-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  row-gap: 1.25rem;
  column-gap: 1.25rem;
}
.skill-t h3 {
  color: #000;

  /* H3 */
  font-family: "Inter";
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.25rem; /* 128.571% */
}
.skill-st {
  display: flex;
  width: 9.0625rem;
  align-items: center;
  gap: 0.25rem;
}
.skill-st svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.mini-pic {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mini-pics {
  display: flex;
  align-items: flex-start;
  gap: -1.1875rem;
}
.mini-pics img {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 3.125rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.4);
  background: url(<path-to-image>), lightgray 50% / cover no-repeat;
  position: relative;
}
.mini-pics h4 {
  color: #000;

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}

/*
styling for the hire page
*/
.hire-search {
  display: flex;
  width: 80%;
  padding: 1.5rem 5rem;
  align-items: center;
  gap: 1rem;
  border-radius: 1.25rem;
  border: 0.0625rem solid var(--Text-Field, #b3b3b3);
  background: #fff;

  /* Fade */
  box-shadow: 0.125rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
  justify-content: center;
  margin: auto;
}
.hire-search svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.hire-search::placeholder {
  color: var(--Text-Field, #b3b3b3);

  /* B0 */
  font-family: "Poppins";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.hire-search input {
  width: 70%;
  border: none;
}
.hire-nav {
  display: inline-flex;
  padding: 1rem 0rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 5.125rem 0 0 10%;
}
.hire-nav p {
  color: #000;

  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.hire-nav p:nth-child(5) {
  color: var(--primary-200, #1b5096);

  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.hire-nav svg {
  width: 1.5rem;
  height: 1.5rem;
}
.best-main {
  margin: 2.5rem 0 0 10%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  width: 80%;
}
.best-b {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.best-t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.best-t h2 {
  color: #000;

  /* H0.5 */
  font-family: "Inter";
  font-size: 4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 5rem; /* 125% */
}
.best-t p {
  color: #000;

  /* H4 */
  font-family: "Inter";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}
.best-pic {
  width: 12.21rem;
  height: 11.58rem;
  flex-shrink: 0;
  position: relative;
}
.pentagon {
  width: 13.5rem;
  height: 13.5rem;
  flex-shrink: 0;
}

.barb-no {
  display: flex;
  align-items: center;
  gap: 34rem;
  align-self: stretch;
  margin: 5.5rem auto 0 auto;

  width: 100%;
  justify-content: space-between;
}
.barb-no > p {
  color: var(--Text-Field, #b3b3b3);

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.barb-no > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.barb-no > div p {
  color: #000;

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.barb-no svg {
  width: 1.5rem;
  height: 1.5rem;
}
.hire-profile {
  margin: auto;

  width: 90%;
  padding: 5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-gap: 2.5rem;
  display: grid;
  grid-template-columns: auto auto auto;
}

.prof-hire {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1 0 0;
  border: 0.0625rem solid var(--primary-100, #4e83c9);
  position: relative;
}
.prof-pics {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
}
.prof-pics img {
  height: 6.25rem;
  flex: 1 0 0;
  width: 7.0625rem;
  object-fit: cover;
}
.hire-hire {
  display: flex;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  background: var(--Text-White, #fdfdfd);
}
.hire-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}
.sub-hiret {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  align-self: stretch;
}
.sub-hiret > div h2 {
  color: #000;
  text-align: center;

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
  text-align: center;
  width: 100%;
}
.sub-hiret > div {
  justify-content: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.sub-hiret > div p {
  color: #000;
  text-align: center;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.sub-hiret > p {
  color: #000;
  text-align: center;

  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.hire-loc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
}
.hire1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 0 0;
  width: 6.0625rem;
}
.hire1 p {
  color: #000;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.hire2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex: 1 0 0;
}
.hire2 p {
  color: #000;

  /* B2 */
  font-family: "Inter";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.hire3 {
  display: flex;
  height: 1.5rem;
  padding: 0rem 0rem 0.125rem 0.4375rem;
  align-items: center;
  flex: 1 0 0;
}
.hire3 p {
  color: #3ebe29;
  text-align: center;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.hire4 p {
  color: #de4848;
  text-align: center;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.hire5 p {
  color: var(--Grey, #dcdcdc);
  text-align: center;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
  width: 4.375rem;
}
.svg1 {
  width: 1rem;
  height: 1rem;
}
.svg2 {
  width: 1.5rem;
  height: 1.5rem;
}
.hibtn {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
.hibtn button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.hibtn button:active {
  background-color: var(--secondary-100);
  color: white;
}
.hibtn button {
  color: var(--secondary-100, #c65a42);

  /* small button */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
  display: flex;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--secondary-100, #c65a42);
  color: white;
  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  background-color: var(--secondary-100);
}
.hire-rel {
  position: absolute;
  width: 4.375rem;
  height: 4.375rem;
  left: 9.375rem;
  top: 3.1076rem;
}
.hire-rel img {
  width: 4.375rem;
  height: 4.375rem;

  border-radius: 4.375rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat, #d9d9d9;
}

/*
styling for the faq page
*/
.faq-head {
  display: flex;
  padding: 0rem 2.5rem;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: auto;
  position: relative;
  overflow: hidden;
}
.faq-text {
  display: flex;
  width: 41.625rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
}
.faq-text-t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
.faq-text-t h1 {
  color: var(--Text-Active, #00171f);

  /* H0.5 */
  font-family: Inter;
  font-size: 4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 5rem; /* 125% */
}
.faq-text-t span {
  color: var(--primary-100, #4e83c9);
}
.faq-text-t p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.faq-text button {
  color: var(--Text-White, #fdfdfd);

  /* CTA */
  font-family: "Poppins";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
  display: flex;
  padding: 1rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.3125rem;
  background: var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  border: none;
}
.faq-text button:hover {
  background-color: var(--secondary-200);
}
.faq-text button:active {
  background-color: var(--secondary-100);
}
.faq-head img {
  width: 35.375rem;
  height: 40.8125rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    url(<path-to-image>), lightgray 50% / cover no-repeat;
}

.faq-star {
  position: absolute;
  right: 41%;
  bottom: -1.25rem;
}
.faq-check {
  position: absolute;
  left: 0.0625rem;
  top: 1.125rem;
}
.faq-questions {
  display: flex;
  padding: 5rem 0rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  align-self: stretch;
  margin: 5rem auto;
  width: 85%;
}
.faq-ques {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.faq-ques h2 {
  color: var(--primary-200, #1b5096);

  /* H1 */
  font-family: "Inter";
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem; /* 116.667% */
}
.faq-ques p {
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  width: 41.25rem;
}
.faq-q {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
}
.faq-q > div {
  display: flex;
  width: 100%;
  padding: 2.5rem;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  border-radius: 0.5rem;
  border-bottom: 0.0625rem solid var(--Grey, #dcdcdc);

  /* Fade */
  box-shadow: 0.125rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
}
.faq-q p {
  color: var(--Text-Active, #00171f);

  /* b0.5 */
  font-family: Poppins;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 133.333% */
}

/*
styling for the worker profile; user's view
*/
.workerprofile-main {
  background: var(--Text-White, #fdfdfd);
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
}
.worker-body {
  display: inline-flex;
  padding: 0rem 4.5rem;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin: auto;
  height: auto;
  width: 76.87rem;
}
.worker-rating {
  display: flex;
  padding: 0rem 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.worker-d {
  display: flex;
  padding: 1.5rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  border-radius: 1.5rem;
  background: var(--primary-200, #1b5096);
}
.work-dt {
  display: flex;
  align-items: flex-start;
  gap: 2.625rem;
}
.work-dt img {
  width: 7.875rem;
  height: 7.875rem;
  flex-shrink: 0;
  border-radius: 31.25rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat,
    url(<path-to-image>), lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat;
}
.dt-main {
  display: flex;
  width: 34rem;
  height: 7.875rem;
  align-items: center;
  gap: 1.25rem;
}
.dt-main1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.875rem;
}
.dt-main1 h2 {
  width: 15.0625rem;
  color: #fff;
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2rem; /* 200% */
}
.dt-main1 p {
  color: #fff;
  font-family: "Inter";
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 200% */
}
.dt-main2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.625rem;
  flex: 1 0 0;
}
.dt-main21 p {
  width: 13.75rem;
  color: #fff;
  font-family: "Inter";
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem; /* 200% */
}
.dt-main21 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.dt-main21 i {
  color: white;
  width: 0.75rem;
  height: 0.7514rem;
}
.work-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6875rem;
}
.work-btn > div {
  display: flex;
  height: 3rem;
  padding: 0.5rem 2rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  background: #fff;
}
.work-btn p {
  color: var(--primary-200, #1b5096);
  font-family: Poppins;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem; /* 140% */
}
.work-ra {
  display: flex;
  height: 15.375rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}
.work-r {
  display: flex;
  width: 17.375rem;
  height: 15.375rem;
  padding: 2rem 3rem;
  align-items: flex-start;
  gap: 0.25rem;
  flex-shrink: 0;
  border-radius: 1.5rem;
  background: var(--Grey, #dcdcdc);
}
.work68 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  position: absolute;
  left: 4.3125rem;
  top: 1.9375rem;
}
.work67 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.work63 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 2.375rem;
  top: 3.125rem;
}
.work63 h2 {
  color: #1b5096;
  font-family: "Inter";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.375rem; /* 110% */
}
.work63 p {
  color: #000;
  font-family: "Inter";
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 220% */
}
.work64 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}
.work66 {
  display: flex;
  align-items: flex-start;
  gap: 0.125rem;
}
.work66 svg {
  width: 1.5rem;
  height: 1.5rem;
}
.frame76 {
  display: flex;
  padding: 1.5rem 0.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  width: auto;
  border-radius: 1.5rem;
  background: var(--Grey, #dcdcdc);
}
.frame76 h2 {
  color: var(--Text-Active, #00171f);
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2rem; /* 200% */
}
.frame74 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
}
.frame74 p {
  color: var(--Text-Active, #00171f);
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 171.429% */
}
.frame77 {
  display: flex;
  align-items: center;
  gap: 9.0625rem;
  align-self: stretch;
}
.frame77 p {
  color: var(--Text-Active, #00171f);
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2rem; /* 200% */
}
.frame84 {
  display: flex;
  align-items: center;
  gap: 4.9375rem;
  align-self: stretch;
}
.frame80 {
  display: flex;
  align-items: center;
  gap: 2.6875rem;
}
.frame79 {
  width: 16.5625rem;
  height: 2.6875rem;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Text-Active, #00171f);
  opacity: 0.8;
  background: var(--Text-White, #fdfdfd);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/*.frame79 > div:not(:last-child) {
  border-right: .0625rem solid black;
}*/
.frame79 > div:nth-child(3) {
  border-right: 0.0625rem solid black;
}
.frame79 > div {
  padding: 0.6875rem 1rem;
  width: 25%;
  height: 100%;
  font-family: "Inter";

  font-size: 0.875rem;
}
.frame79 > div:nth-child(2) {
  background-color: var(--secondary-100);
  color: white;
}
.frame78 {
  width: 16.5625rem;
  height: 2.6875rem;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Text-Active, #00171f);
  opacity: 0.8;
  background: var(--Text-White, #fdfdfd);

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.frame7 > div:not(:last-child) {
  border-right: 0.0625rem solid black;
}
.frame78 > div {
  padding: 0.6875rem 0.625rem;
  width: 25%;
  height: 100%;
  font-family: "Inter";

  font-size: 0.875rem;
  display: flex;
}
.frame78 > div:nth-child(1) {
  border-right: 0.0625rem solid black;
}
.frame78 > div:nth-child(3) {
  background-color: var(--secondary-100);
  color: white;
}

.frame-re {
  display: flex;
  align-items: center;
  gap: 2.4375rem;
}
.frame-re p {
  color: var(--secondary-100, #c65a42);
  font-family: "Inter";
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.375rem; /* 183.333% */
  text-decoration-line: underline;
}
.paid {
  display: flex;
  align-items: center;
  gap: 40rem;
  align-self: stretch;
}
.meth {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.meth p {
  color: var(--primary-100, #4e83c9);
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.375rem; /* 183.333% */
}
.meth > div {
  display: flex;
  align-items: center;
  gap: 1.6875rem;
}
.meth-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
}
.meth-btn button {
  display: flex;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  background-color: transparent;
  color: var(--secondary-100, #c65a42);

  /* small button */
  font-family: Poppins;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
  white-space: nowrap;
}
.meth-btn button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.meth-btn button:active {
  background-color: var(--secondary-100);
  color: white;
}
.prev-rev {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
.prev-rev h2 {
  color: var(--Text-Active, #00171f);
  font-family: "Inter";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2rem; /* 133.333% */
}
.prev-rev > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.prev-rev > div img {
  display: flex;
  width: 15rem;
  height: 12.875rem;
  align-items: flex-start;
  border-radius: 1.5rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat;
}
.cus-reviews {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
.cus-reviews h2 {
  color: var(--Text-Active, #00171f);
  font-family: "Inter";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2rem; /* 133.333% */
}
.reviews-it {
  display: flex;
  width: 66rem;
  padding: 1rem 2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  border-radius: 0.75rem;
  border: 0.0313rem solid rgba(0, 0, 0, 0.3);
  background: #fff;
  box-shadow: 0rem 0.25rem 0.625rem 0rem rgba(0, 0, 0, 0.1);
}

.rect {
  display: flex;
  gap: 0.625rem;
}
.rect > div {
  width: 2.9375rem;
  height: 0.25rem;
  border-radius: 1.5rem;
}
.rect > div:nth-child(1) {
  background: var(--secondary-100, #c65a42);
}
.rect > div:nth-child(2) {
  background: var(--primary-100, #4e83c9);
}
.review-prof {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.875rem;
}
.review-prof img {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 31.25rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat,
    url(<path-to-image>), lightgray 50% / cover no-repeat;
}
.review-prof h3 {
  color: var(--Text-Active, #00171f);

  /* H4 */
  font-family: "Inter";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}
.review-prof p {
  color: var(--Text-Active, #00171f);
  font-family: "Poppins";
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 0.75rem; /* 100% */
}
.star-rev {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.stars {
  display: flex;
  width: 9.0625rem;
  justify-content: space-evenly;
  align-items: center;
}
.star-revt {
  display: flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.star-revt p {
  color: #000;

  /* H5 */
  font-family: "Inter";
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem; /* 150% */
}
.star-revt svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.ad1 {
  display: inline-flex;
  padding: 0.25rem 1.125rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  background: #ca7461;
  position: absolute;
  top: 59.4375rem;
  left: 2.8125rem;
}
.ad1 p {
  color: #000;
  font-family: "Inter";
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem; /* 200% */
}

.ad3 {
  /* display: inline-flex; */
  padding: 0.25rem 1.125rem;
  /* justify-content: center;
  align-items: center; */
  gap: 0.25rem;
  border-radius: 0.25rem;
  background: #ca7461;
  position: absolute;
  top: 59.4375rem;
  right: 2.8125rem;
  width: 6.3rem;
}
.ad3 p {
  color: #000;
  font-family: "Inter";
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem; /* 200% */
}

/*
styling for the user personal profile
*/
.userpersona-main {
  background: var(--Text-White, #fdfdfd);
}
.userpersona-sub {
  display: inline-flex;
  padding: 1rem 3.6875rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.625rem;
  width: 100%;
}
.persona-well {
  display: flex;
  height: 20.125rem;
  padding: 0rem 0.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}
.persona-well h1 {
  color: var(--Text-Active, #00171f);
  font-family: Inter;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2.75rem; /* 122.222% */
}
.well-s {
  display: flex;
  padding: 0rem 0.5rem;
  align-items: center;
  gap: 4.25rem;
}
.well-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.well-btn button {
  display: flex;
  padding: 1rem 2rem;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 0.625rem;
  width: 10.94rem;
  border: none;
}
.well-btn button {
  color: var(--secondary-100, #c65a42);

  /* small button */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Grey, #dcdcdc);
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.well-btn button:hover {
  background-color: var(--secondary-300);
  color: white;
  border: 0.0625rem solid var(--secondary-300);
}
.well-btn button:active {
  background-color: var(--secondary-100);
}
.well-btn svg {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
}
.well-btn p {
  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}

.worker-pers {
  display: flex;
  padding: 1rem 3.5rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1.5rem;
  border-radius: 1.5rem;
  background: var(--primary-200, #1b5096);
}
.workpers-dt {
  display: flex;
  justify-content: space-between;
  gap: 2.625rem;
  position: relative;
}
.seticon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.workpers-dt img {
  width: 7.875rem;
  height: 7.875rem;
  flex-shrink: 0;
  border-radius: 31.25rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat,
    url(<path-to-image>), lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat;
}

.workpers-btn p {
  color: var(--Text-Blur, #e0e0e0);
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 200% */
}
.his-his {
  display: flex;
  padding: 2rem 0rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.his-h {
  display: flex;
  padding: 0rem 0.75rem;
  align-items: center;
  gap: 53.8125rem;
  align-self: stretch;
}
.his-h button {
  display: flex;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1.25rem;
  border: 0.0625rem solid var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  color: var(--secondary-100, #c65a42);

  /* small button */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
}
.his-h button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.his-h button {
  background-color: var(--secondary-100);
  color: white;
}
.his-his h1 {
  color: var(--Text-Active, #00171f);
  font-family: Inter;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2.75rem; /* 122.222% */
}
.his-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  margin: auto;
  width: 100%;
  grid-column-gap: 3.5rem;
  grid-row-gap: 4rem;
}
.his-grid1 {
  display: flex;
  width: 24.1875rem;
  padding: 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--primary-300, #95b5df);
  background: #fff;
}
.his-prof {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 0 0;
}
.his-prof > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1 0 0;
}
.his-prof h3 {
  align-self: stretch;
  color: #000;

  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.his-prof p {
  align-self: stretch;
  color: #000;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.his-prof img {
  width: 5rem;
  height: 5rem;
  border-radius: 5rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat;
}
.his-brief {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
.his-brief h2 {
  align-self: stretch;
  color: #000;

  /* H3 */
  font-family: "Inter";
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.25rem; /* 128.571% */
}
.his-brief p {
  color: #000;

  /* B1 */
  font-family: "Poppins";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  align-self: stretch;
}
.his-btn {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  align-self: stretch;
}
.his-st {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 0 0;
}
.his-st svg {
  width: 1.5rem;
  height: 1.5rem;
}
.his-btn button {
  display: flex;
  width: 6.875rem;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--secondary-100, #c65a42);
  background-color: var(--secondary-100);
  color: white;

  /* small button */
  font-family: Poppins;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
}
.his-btn button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.his-btn button:active {
  background-color: var(--secondary-100);
  color: white;
}
.ad2 {
  display: inline-flex;
  padding: 0.25rem 1.125rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  background: #ca7461;
  position: absolute;
  top: 62.5rem;
  left: 2.8125rem;
}
.ad2 p {
  color: #000;
  font-family: "Inter";
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem; /* 200% */
}
/*
styling for the skilled worker profile view
*/
.worker-body2 {
  display: inline-flex;
  padding: 0rem 5rem;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  gap: 3.0625rem;

  height: auto;
  width: 100%;
}
.frame7666 {
  display: flex;
  padding: 1.5rem 0.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  border-radius: 1.5rem;
  background: var(--Grey, #dcdcdc);
}
.newh2 {
  display: flex !important;
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2rem; /* 200% */
}
.skilled-main {
  display: flex;
  padding: 0 3.125rem;
}
.work633 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 2.375rem;
  top: 3.125rem;
}
.work633 h2 {
  color: #1b5096;
  font-family: "Inter";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.375rem; /* 110% */
}
.work633 p {
  color: #000;
  font-family: "Inter";
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 220% */
}
#overlaymain {
  position: relative;
}
#overlay {
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9 !important;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

#closebox {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  position: fixed;
  right: 0.3125rem;
  top: 25%;
  z-index: 12;
}
#closebox:hover {
  background-color: red;

  border-radius: 50%;
}
/* .workerprofile-main {
  z-index: -5;
} */

/* 
styling for the user password page
*/
#passmain {
  width: 100%;
  height: 64rem;
  background: transparent;
  display: flex;
}
#passmain2 {
  width: 100%;
  height: 64rem;
  background-color: transparent;
  display: flex;
}
.pass-tog {
  background: var(--Text-Active, #00171f);
}
.pass-aside {
  display: inline-flex;
  height: 64rem;
  padding: 2.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  flex-shrink: 0;
  border-right: 0.0625rem solid var(--Text-Blur, #e0e0e0);
  /* background: var(--Text-White, #fdfdfd); */
  background-color: transparent;
  /* Sleek */
  box-shadow: 0.25rem 0.25rem 0.125rem 0rem rgba(0, 0, 0, 0.05);
}
.sett-arr {
  display: flex;
  width: 15.6875rem;
  align-items: center;
  gap: 1rem;
  border-radius: 1.25rem;
}
.sett-arr:hover {
  background-color: var(--secondary-300);
}
.sett-arr svg {
  width: 1.5rem;
  height: 1.5rem;
  /* transform: rotate(-90deg); */
  flex-shrink: 0;
}
.sett-arr p {
  color: var(--Text-Active, #00171f);

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
  flex: 1 0 0;
}
.frame179 {
  display: flex;
  height: 48.5625rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 3rem;
  flex-shrink: 0;
  align-self: stretch;
}
.frame178 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  align-self: stretch;
}
.frame159 {
  display: flex;
  width: 15.6875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.frame159 p {
  color: var(--Text-Active, #00171f);

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.frame175 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
.frame175 button {
  display: flex;
  padding: 1rem 2rem;
  /* flex-direction: column; */
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Grey, #dcdcdc);
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame175 svg {
  width: 1.375rem;
  height: 1.375rem;
}
.pass-aside button:hover {
  background-color: var(--secondary-300);
  color: white;
}
.pass-aside button:active {
  background-color: var(--secondary-100);
  color: white;
}
.frame176 {
  display: flex;
  justify-content: space-between;
  height: 1.5rem;
  align-items: center;
  gap: 1.5rem;
}
.frame176 p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame176 svg {
  width: 1rem;
  height: 1rem;
}
.dbtn {
  display: flex;
  width: 15.6875rem;
  padding: 1rem 1.5rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background: var(--Text-White, #fdfdfd);
  /* border: none; */
}

.frame176b {
  display: flex;
  justify-content: space-between;
  height: 1.5rem;
  align-items: center;
  gap: 4.0625rem;
}
.frame176b p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame176b svg {
  width: 1rem;
  height: 1rem;
}
.frame160 {
  display: flex;
  width: 15.6875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.frame160 p {
  color: var(--Text-Active, #00171f);

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
#drop2 {
  display: flex;
  padding: 1rem 2rem;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Grey, #dcdcdc);
}
#drop2 svg {
  width: 1.1458rem;
  height: 1.1458rem;
  flex-shrink: 0;
}
#drop2:active svg:nth-child(2) {
  transform: rotate(180deg);
}
#drop21 {
  display: flex;
  padding: 1rem 2rem;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Grey, #dcdcdc);
}
#drop21 svg {
  width: 1.1458rem;
  height: 1.1458rem;
  flex-shrink: 0;
}
#drop21:active svg:nth-child(2) {
  transform: rotate(180deg);
}
.frame177 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  align-self: stretch;
}
.frame177 button {
  display: flex;
  width: 15.6875rem;
  padding: 1rem 2rem;
  /* flex-direction: column; */
  /* justify-content: center; */
  align-items: flex-start;
  color: var(--Text-Active, #00171f);
  border: none;
  border-radius: 0.625rem;
  background: var(--Text-White, #fdfdfd);

  align-items: center;
  gap: 1rem;
  align-self: stretch;
  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  border: none;
}

.frame177 button svg {
  width: 1.375rem;
  height: 1.375rem;
}
#frame201 {
  display: flex;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
  margin: 0rem 17.3125rem 12.5625rem 10.375rem;
}
.frame194 {
  display: flex;
  width: 32.6875rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  background: #fff;
}
.frame194 h2 {
  color: var(--Text-Active, #00171f);

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
  align-self: stretch;
}
.frame188 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  align-self: stretch;
}
.frame188 p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame188 input {
  border: 0.0625rem solid var(--Grey, #dcdcdc);
  background: var(--Text-White, #fdfdfd);

  height: 2.375rem;
  padding: 0.5rem 1rem;
  width: 32.6875rem;
  outline: none;
}
.forgp {
  color: var(--secondary-100, #c65a42) !important;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
  text-decoration: none;
}
.frame197 {
  display: flex;
  width: 5.625rem;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1rem;
  background: var(--secondary-100, #c65a42);
  color: #fff;
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem; /* 150% */
}
/* 
user settings
*/

.frame200c {
  display: flex;
  width: 68.8125rem;
  padding: 1.5rem 5rem;
  align-items: center;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.frame200c p {
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.frame200cbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.frame200cbtn button {
  display: flex;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  color: var(--secondary-100, #c65a42);

  /* small button */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
  background-color: transparent;
}
.frame200cbtn button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.frame200cbtn button:active {
  background-color: var(--secondary-100);
  color: white;
}
.frame195c {
  display: flex;
  width: 59.6875rem;
  padding: 2.5rem;
  justify-content: center;
  align-items: center;
  gap: 3.5rem;
}
.frame194c {
  display: flex;
  width: 29.375rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  flex-shrink: 0;
  background: #fff;
}
.frame194c h2 {
  color: var(--Text-Active, #00171f);

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
  align-self: stretch;
}
.frame188bc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}
.frame188bc {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame188bc > div input {
  border: 0.0625rem solid var(--Grey, #dcdcdc);
  background: var(--Text-White, #fdfdfd);
  height: 2.375rem;
  padding: 0.5rem 1rem;
  width: 28.5rem;
  outline: none;
}
.frame187ac {
  display: flex;
  width: 28.5rem;
  flex-direction: column;
  align-items: flex-start;
}
.frame187ac textarea {
  resize: none;
  width: 28.5rem;
  height: 12.5rem;
  padding: 1rem;
  border: 0.0625rem solid var(--Grey, #dcdcdc);
  background: var(--Text-White, #fdfdfd);
  outline: none;
}
.frame193ac {
  display: flex;
  padding: 1rem 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.25rem;
  align-self: stretch;
  background: #fff;
}
.frame192ac {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  align-self: stretch;
}
.frame192ac p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame190c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
}
.frame1919c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}
.frame1919c img {
  width: 5rem;
  height: 5rem;
  border-radius: 5rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat, #fff;
  object-fit: cover;
}
.frame1919c p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame191ac {
  display: flex;
  padding: 1.625rem 0.625rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.625rem;
  border-radius: 1rem;
  border: 0.125rem dashed var(--Text-Blur, #e0e0e0);

  /* Fade */
  box-shadow: 0.125rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
}
.frame191ac svg {
  width: 1.5rem;
  height: 1.5rem;
}
.frame191ac p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
input[type="file"] {
  display: none;
}
label {
  cursor: pointer;
}
label p:hover {
  color: var(--secondary-100);
}
/* 
user notifications
*/

.frame202a {
  display: flex;
  width: 69.3125rem;
  padding: 1.5rem 5rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
#usernotist h2 {
  width: 29.375rem;
  color: var(--Text-Active, #00171f);

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}
#usernotist p {
  color: #000;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame204a {
  display: flex;
  width: 58.625rem;
  padding: 1.5rem 2rem;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  margin: 9.3125rem 0 0 3.375rem;

  /* Sleek */
  box-shadow: 0.25rem 0.25rem 0.125rem 0rem rgba(0, 0, 0, 0.05);
}
.emails-notis1 {
  display: flex;
  padding: 1rem 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}
.frame203a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.frame203a p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.emails-notis1 > p {
  color: #000;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
  align-self: stretch;
}
.frame204b {
  display: flex;
  width: 58.625rem;
  padding: 1.5rem 2rem;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  margin: 3.125rem 0 0 3.375rem;

  /* Sleek */
  box-shadow: 0.25rem 0.25rem 0.125rem 0rem rgba(0, 0, 0, 0.05);
}
/* Style the toggle button */
#toggle {
  position: relative;
  display: inline-block;
  width: 3.75rem;
  height: 2.125rem;
}

/* Hide the default checkbox */
#toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style the slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 2.125rem;
}

/* Style the slider thumb */
.slider:before {
  position: absolute;
  content: "";
  height: 1.625rem;
  width: 1.625rem;
  left: 0.25rem;
  bottom: 0.25rem;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* When checked, change background color of slider */
#toggle input:checked + .slider {
  /* background-color: #2196f3; */
  background-color: var(--primary-300);
}

/* When checked, move slider thumb to right */
#toggle input:checked + .slider:before {
  transform: translateX(1.625rem);
}

/* styling for second toggle button */
#toggle2 {
  position: relative;
  display: inline-block;
  width: 3.75rem;
  height: 2.125rem;
}

/* Hide the default checkbox */
#toggle2 input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style the slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 2.125rem;
}

/* Style the slider thumb */
.slider:before {
  position: absolute;
  content: "";
  height: 1.625rem;
  width: 1.625rem;
  left: 0.25rem;
  bottom: 0.25rem;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* When checked, change background color of slider */
#toggle2 input:checked + .slider {
  /* background-color: #2196f3; */
  background-color: var(--primary-300);
}

/* When checked, move slider thumb to right */
#toggle2 input:checked + .slider:before {
  transform: translateX(1.625rem);
}

/* 
styling for worker settings page
*/

.hidden {
  display: none;
}
.hiddentoo {
  display: none;
}
.parent {
  display: none !important;
  z-index: -10;
}
#chatjob {
  width: 100%;
  display: flex;
  justify-content: center;
  position: sticky;
  top: -10%;
  margin-top: 0.625rem;
}
#paymain {
  display: flex;
  justify-content: center;
  position: sticky;
  /* top: -10%; */
  padding: 1.875rem 0;
}
#paysumcon {
  display: flex;
  justify-content: center;
  position: sticky;
  /* top: -10%; */
  padding: 1.875rem 0;
}
#closebo {
  width: 2.5rem;
  height: 3.75rem;
  position: absolute;
  right: 20%;
  top: 10%;
  border-radius: 50%;
}
#closebo:hover {
  background-color: red;
}
#budexit {
  width: 2.5rem;
  height: 3.75rem;
  position: absolute;
  right: 15%;
  top: 7%;
  border-radius: 50%;
}
#budexit:hover {
  background-color: red;
}
#chatexit {
  width: 3.75rem !important;
  height: 4.0625rem !important;
  position: absolute;
  right: 7%;
  top: 15%;
  border-radius: 50%;
  z-index: 15;
  padding: 0.625rem 0.9375rem;
}
#chatexit:hover {
  background-color: red;
}
#chatexit svg {
  /* width: 100%;
  height: 100%; */
  fill: none;
}
#flutt {
  display: flex;
  justify-content: center;
  /* position: sticky;
  bottom: -10%; */
  margin-top: 1.25rem;
  z-index: 12;
}
#loadpop {
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 15;
  margin-top: 1.25rem;
  width: 100%;
}
#succespop {
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 15;
  margin-top: 1.25rem;
  width: 100%;
}
#succan {
  /* margin: 0 0 0 100%; */
  position: absolute;
  top: 0;
  right: 25%;
  border-radius: 50%;
}
#succan:hover {
  background-color: red;
}
#paysumexit {
  /* margin: 0 0 0 100%; */
  position: absolute;
  top: 3%;
  right: 25%;
  border-radius: 50%;
}

#paysumexit:hover {
  background-color: red;
}
#chatjobboexit {
  /* margin: 0 0 0 100%; */
  position: absolute;
  /* top: 1%; */
  right: 8%;
  border-radius: 50%;
}

#chatjobboexit:hover {
  background-color: red;
}
#errcan {
  /* margin: 0 0 0 100%; */
  position: absolute;
  top: 0;
  right: 25%;
  border-radius: 50%;
}
#errcan:hover {
  background-color: red;
}
#erropop {
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 15;
  margin-top: 1.25rem;
  width: 100%;
}

#frame201b {
  display: flex;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
  margin: 0rem 17.3125rem 12.5625rem 10.375rem;
}
.frame194b {
  display: flex;
  width: 32.6875rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  background: #fff;
}
.frame194b h2 {
  color: var(--Text-Active, #00171f);

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
  align-self: stretch;
}
.frame188b {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  align-self: stretch;
}
.frame188b p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame188b input {
  border: 0.0625rem solid var(--Grey, #dcdcdc);
  background: var(--Text-White, #fdfdfd);

  height: 2.375rem;
  padding: 0.5rem 1rem;
  width: 32.6875rem;
  outline: none;
}
.forgpb {
  color: var(--secondary-100, #c65a42) !important;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
  text-decoration: none;
  display: inline-block;
}
.frame197b {
  display: flex;
  width: 5.625rem;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1rem;
  background: var(--secondary-100, #c65a42);
  color: #fff;
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5rem; /* 150% */
}
#darkmain {
  display: none;
  width: 100%;
}
#darkmaintwo {
  display: none;
  width: 100%;
}
#darkmode {
  display: flex;
  padding: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 0.5rem;
  background: var(--Text-White, #fdfdfd);
}
#darkmode p {
  color: var(--Text-Active, #00171f);

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
/*  */

.frame200 {
  display: flex;
  width: 68.8125rem;
  padding: 1.5rem 5rem;
  align-items: center;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.frame200 p {
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.frame200btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.frame200btn button {
  display: flex;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  color: var(--secondary-100, #c65a42);

  /* small button */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
  background-color: transparent;
}
.frame200btn button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.frame200btn button:active {
  background-color: var(--secondary-100);
  color: white;
}
.frame195 {
  display: flex;
  width: 59.6875rem;
  padding: 2.5rem;
  justify-content: center;
  align-items: center;
  gap: 3.5rem;
}
.frame194 {
  display: flex;
  width: 29.375rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  flex-shrink: 0;
  background: #fff;
}
.frame194 h2 {
  color: var(--Text-Active, #00171f);

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
  align-self: stretch;
}
.frame188b {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}
.frame188b {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame188b > div input {
  border: 0.0625rem solid var(--Grey, #dcdcdc);
  background: var(--Text-White, #fdfdfd);
  height: 2.375rem;
  padding: 0.5rem 1rem;
  width: 28.5rem;
  outline: none;
}
.frame187a {
  display: flex;
  width: 28.5rem;
  flex-direction: column;
  align-items: flex-start;
}
.frame187a textarea {
  resize: none;
  width: 28.5rem;
  height: 12.5rem;
  padding: 1rem;
  border: 0.0625rem solid var(--Grey, #dcdcdc);
  background: var(--Text-White, #fdfdfd);
  outline: none;
}
.frame193a {
  display: flex;
  padding: 1rem 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.25rem;
  align-self: stretch;
  background: #fff;
}
.frame192a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  align-self: stretch;
}
.frame192a p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame190 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
}
.frame1919 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}
.frame1919 img {
  width: 5rem;
  height: 5rem;
  border-radius: 5rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat, #fff;
  object-fit: cover;
}
.frame1919 p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame191a {
  display: flex;
  padding: 1.625rem 0.625rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.625rem;
  border-radius: 1rem;
  border: 0.125rem dashed var(--Text-Blur, #e0e0e0);

  /* Fade */
  box-shadow: 0.125rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
}
.frame191a svg {
  width: 1.5rem;
  height: 1.5rem;
}
.frame191a p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}

/* 
stylings for worker notifications
*/

.frame202ab {
  display: flex;
  width: 69.3125rem;
  padding: 1.5rem 5rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
#usernotisa h2 {
  width: 29.375rem;
  color: var(--Text-Active, #00171f);

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}
#usernotisa p {
  color: #000;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame204ab {
  display: flex;
  width: 58.625rem;
  padding: 1.5rem 2rem;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  margin: 9.3125rem 0 0 3.375rem;

  /* Sleek */
  box-shadow: 0.25rem 0.25rem 0.125rem 0rem rgba(0, 0, 0, 0.05);
}
.emails-notis12 {
  display: flex;
  padding: 1rem 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}
.frame203ab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.frame203ab p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.emails-notis12 > p {
  color: #000;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
  align-self: stretch;
}
.frame204ba {
  display: flex;
  width: 58.625rem;
  padding: 1.5rem 2rem;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  margin: 3.125rem 0 0 3.375rem;

  /* Sleek */
  box-shadow: 0.25rem 0.25rem 0.125rem 0rem rgba(0, 0, 0, 0.05);
}
/* Style the toggle button */
.toggle {
  position: relative;
  display: inline-block;
  width: 3.75rem;
  height: 2.125rem;
}

/* Hide the default checkbox */
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style the slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 2.125rem;
}

/* Style the slider thumb */
.slider:before {
  position: absolute;
  content: "";
  height: 1.625rem;
  width: 1.625rem;
  left: 0.25rem;
  bottom: 0.25rem;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* When checked, change background color of slider */
.toggle input:checked + .slider {
  /* background-color: #2196f3; */
  background-color: var(--primary-300);
}

/* When checked, move slider thumb to right */
.toggle input:checked + .slider:before {
  transform: translateX(1.625rem);
}
/* 
styling for the pop ups
*/
/* 
styling for payment summary
*/
.payment-sum {
  display: inline-flex;
  padding-bottom: 1.9848rem;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  border-radius: 1.5rem;
  background: var(--Text-Blur, #e0e0e0);
  height: auto;
}
.frame86 {
  display: flex;
  padding: 0rem 1.6875rem;
  align-items: center;
  gap: 27.9375rem;
  background: var(--Text-White, #fdfdfd);
}
.frame86 img {
  width: 8.9375rem;
  height: 4.1723rem;
  /* background: url(<path-to-image>), lightgray 50% / cover no-repeat; */
}
.frame86 svg {
  width: 1.5rem;
  height: 1.5rem;
}
.job-sum {
  display: flex;
  padding: 1.5rem 0rem;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  border-radius: 0.625rem;
  background: var(--Text-White, #fdfdfd);
}
.job-prof {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15.0625rem;
  align-self: stretch;
}
.job-prof img {
  width: 7.875rem;
  height: 7.875rem;
  flex-shrink: 0;
  border-radius: 31.25rem;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat,
    url(<path-to-image>), lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat, url(<path-to-image>),
    lightgray 50% / cover no-repeat;
}
.work-job-sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.work-job-sum p {
  color: var(--primary-100, #4e83c9);
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.frame89 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.frame89 p:nth-child(1) {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame89 p:nth-child(2) {
  color: var(--secondary-100, #c65a42);
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
}
.blu-line {
  width: 39.3131rem;
  height: 0.0625rem;
  background: #4e83c9;
}
.job-sum {
  color: var(--primary-100, #4e83c9);
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.price-a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
}
.price-a > div {
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 20.125rem; */
}
.price-a > div:nth-child(1) {
  gap: 20.125rem;
}
.price-a > div:nth-child(2) {
  gap: 21.875rem;
}
.price-a > div:nth-child(3) {
  gap: 21.4375rem;
}
.price-a > div:nth-child(4) {
  gap: 22.1875rem;
}
.price-a > div:nth-child(5) {
  gap: 27rem;
}
.price-a > div p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.total-sum {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24.125rem;
  align-self: stretch;
}
.total-sum p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.comp11 {
  display: flex;
  /* height: 28.75rem; */
  height: auto;
  padding: 2.25rem 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 1.25rem;
  background: var(--Text-White, #fdfdfd);
}
.comp11sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
}
.comp11sub h2 {
  color: var(--primary-100, #4e83c9);
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.paycomp {
  display: flex;
  width: 36.25rem;
  /* height: 11.75rem; */
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: 0.125rem solid var(--Text-Blur, #e0e0e0);
  background: var(--Text-White, #fdfdfd);
  padding: 0.625rem 0;
  border-radius: 0.625rem;
}
.paycomp input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
}
.paycomp p {
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.paycomp > div {
  /* border-radius: .625rem .625rem 0rem 0rem;
border: .125rem solid var(--Text-Blur, #E0E0E0);
background: var(--Text-White, #FDFDFD); */
  height: 4.0625rem;
}
.paycomp > div:nth-child(1) {
  display: flex;
  padding: 0rem 1.1875rem;
  align-items: center;
  gap: 15.4375rem;
  border-radius: 0.625rem 0.625rem 0rem 0rem;
  border-bottom: 0.125rem solid var(--Text-Blur, #e0e0e0);
  /* background: var(--Text-White, #fdfdfd); */
}
.paycomp > div:nth-child(2) {
  display: flex;
  /* width: 36.25rem; */
  width: 100%;
  padding: 1.0625rem 1.1875rem;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
  /* border-right: .125rem solid var(--Text-Blur, #e0e0e0); */
  border-bottom: 0.125rem solid var(--Text-Blur, #e0e0e0);
  /* border-left: .125rem solid var(--Text-Blur, #e0e0e0);
  background: var(--Text-White, #fdfdfd); */
}
.paycomp > div:nth-child(3) {
  display: flex;
  width: 36.25rem;
  padding: 1.0625rem 1.1875rem;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0rem 0rem 0.625rem 0.625rem;
  /* border-right: .125rem solid var(--Text-Blur, #e0e0e0);
  border-bottom: .125rem solid var(--Text-Blur, #e0e0e0);
  border-left: .125rem solid var(--Text-Blur, #e0e0e0); */
  /* background: var(--Text-White, #fdfdfd); */
}
.frame94 {
  display: flex;
  align-items: center;
  gap: 1.875rem;
}
.frame94 svg:nth-child(1) {
  width: 3.5rem;
  height: 1.0625rem;
}
.frame94 svg:nth-child(2) {
  width: 2.5rem;
  height: 1.9375rem;
}
.frame95 {
  display: flex;
  height: 4.0625rem;
  align-items: center;
  gap: 0.75rem;
}
.frame95 img {
  width: 8.3125rem;
  height: 5.3125rem;
}
.frame96 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.main96 {
  display: flex;
  padding: 1.0625rem 1.1875rem 3.375rem 1.1875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
}
.hide96 {
  display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 1.375rem;
  grid-column-gap: 1.375rem;
  display: none;
}
.hide96 > div {
  gap: 0.5rem;
}
.hide96 p {
  color: var(--Text-Field, #b3b3b3);
  /* text-align: center; */

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.hide96 input {
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Text-Field, #b3b3b3);
  background: var(--Text-White, #fdfdfd);
  height: 2.5rem;
  width: 16.25rem;
  padding: 0 5%;
  outline: none;
}
.frame97b {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}
.frame97 {
  display: flex;
  /* align-items: flex-start;
  justify-self: flex-start; */
  gap: 0.75rem;
}
.comp11sub button {
  display: flex;
  padding: 1rem 7.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1.75rem;
  border: 0.0625rem solid var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  color: var(--secondary-100, #c65a42);

  /* small button */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
  background-color: transparent;
}
.comp11sub button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.comp11sub button:active {
  background-color: var(--secondary-100);
}
.frame97-hid {
  display: flex;
  align-items: flex-start;
  gap: 1.375rem;
  display: none;
}
.frame97-hid p {
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.main97 {
  display: flex;
  padding: 1.0625rem 1.1875rem 3rem 1.1875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.875rem;
  height: 10rem;
  justify-content: flex-start;
}
.frame97-hid {
  display: non;
}
.frame97-hid > div:nth-child(1) {
  display: flex;
  align-items: flex-start;
  gap: 5.4375rem;
}
.frame97-hid > div:nth-child(2) {
  display: flex;
  align-items: flex-start;
  gap: 1.8125rem;
}
.frame97-hid > div {
  padding: 0.5625rem 0.9375rem;
  white-space: nowrap;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Text-Field, #b3b3b3);
  background: var(--Text-White, #fdfdfd);
}
.paycomp > div {
  height: auto;
}
.paycomp {
  height: auto;
}

/* 
styling for the flutter gateway
*/
.flutter-gateway {
  display: inline-flex;
  padding: 0rem 3.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 1.5rem;
  background: var(--Text-White, #fdfdfd);
}
.flutter-sub {
  display: flex;
  flex-direction: row-reverse;
  width: 71.5625rem;
  padding: 0rem 0.5625rem;
  justify-content: center;
  align-items: center;
  gap: 6.25rem;
}
.flutter1 {
  display: flex;
  padding: 0.5625rem 0.1875rem 3.4375rem 0rem;
  flex-direction: column;
  align-items: center;
  gap: 2.875rem;
  background: var(--Text-White, #fdfdfd);
  box-shadow: 0rem 0rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.flutt-h {
  display: flex;
  align-items: flex-end;
  gap: 8.375rem;
}
.flutt-h img {
  width: 6.0625rem;
  height: 3.875rem;
}
.flutt-h > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5625rem;
}
.flutt-h > div p:nth-child(1) {
  color: #191725;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem;
}
.flutt-h > div p:nth-child(2) {
  color: rgba(25, 23, 37, 0.5);
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 150% */
}
.flutt-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 90%;
  margin: auto;
}
.flutt-mid p {
  color: rgba(25, 23, 37, 0.6);
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 150% */
}
.flutt-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.card-num {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: 100%;
  margin: auto;
  padding: 0 2%;
}
.card-num p {
  color: rgba(25, 23, 37, 0.5);
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 150% */
}
.card-num > div {
  display: flex;
  align-items: flex-end;
  gap: 7.5rem;
}
.card-num > div svg {
  width: 0.75rem;
  height: 0.75rem;
}
.card-num > div > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-num > div > div svg {
  width: 1.5rem;
  height: 1.5rem;
}
.card-num > div > div input::placeholder {
  color: rgba(25, 23, 37, 0.5);
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 112.5% */
}
.card-num > div > div input {
  height: 1.25rem;
  width: 12.5rem;
  border: none;
  outline: none;
  padding: 0 5%;
  overflow: visible;
  background-color: transparent;
}
.line16 {
  width: 23.8125rem;
  height: 0.0625rem;
  background: #dcdcdc;
  margin: auto;
}
.valid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8.9375rem;
  width: 100%;
  padding: 0 2%;
}
.validity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.875rem;
}
.validity > p {
  color: rgba(25, 23, 37, 0.5);
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 150% */
}
.validity > div p {
  color: rgba(25, 23, 37, 0.5);
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 112.5% */
}
.validity > div svg {
  width: 1.5rem;
  height: 1.5rem;
}
.ccv-num {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.25rem;
  white-space: nowrap;
}
.ccv-num1 {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.ccv-num1 p:nth-child(1) {
  color: rgba(25, 23, 37, 0.5);
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 112.5% */
}
.ccv-num1 p:nth-child(2) {
  color: rgba(25, 23, 37, 0.5);
  font-family: Inter;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.125rem; /* 180% */
}
.back-num {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.back-num p {
  color: rgba(25, 23, 37, 0.5);
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 112.5% */
}
.back-num svg {
  width: 1.5rem;
  height: 1.5rem;
}
NaNpxb {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0 2%;
}
NaNpxb p {
  color: rgba(25, 23, 37, 0.5);
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.125rem; /* 150% */
}
NaNpxb input {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.3125rem;
  border: 0.125rem solid #ff8f28;
  background: #fff;
}
.flutt-body button {
  display: flex;
  padding: 0.625rem 9rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.3125rem;
  background: #ff8f28;
  color: #191725;
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.125rem; /* 150% */
  border: none;
  white-space: nowrap;
}
.sec-flutt {
  display: flex;
  padding: 0.375rem 1.0625rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 0.3125rem;
  border: 0.0625rem solid var(--Grey, #dcdcdc);
  background: #fff;
}
.sec-flutt svg {
  width: 0.75rem;
  height: 0.75rem;
}
.sec-flutt p {
  color: #68360f;
  font-family: Inter;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.125rem; /* 225% */
}
.sec-flutt > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.frame-ash {
  width: 32.3125rem;
  height: 64rem;
  flex-shrink: 0;
  background: var(--Grey, #dcdcdc);
}

.frame-ash > svg {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  /* margin: 2.5rem 0 2.5rem 28.125rem; */
  margin: 2.5rem 28.125rem 2.5rem 0;
  border-radius: 50%;
}
.frame-ash > svg:hover {
  background-color: red;
}
.frame-ash-sub {
  display: flex;
  flex-direction: column;
  width: 70%;
}
.frame-ash-sub p {
  color: #191725;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  line-height: 1.125rem; /* 112.5% */
}
.pay-ops {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6875rem;
}
.pay-ops > div:not(:last-child):hover {
  background-color: white;
}
.pay-ops > div:active {
  background: rgba(255, 188, 49, 0.3);
  color: #ffbc31;
}
.pay-ops > div:active .pay-ops > div p {
  color: #ffbc31;
}
.pay-ops > div:nth-child(1) {
  display: flex;
  padding: 1rem 9.375rem 1rem 3rem;
  align-items: center;
  gap: 0.625rem;
  color: #191725;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 112.5% */
}
.pay-ops > div:nth-child(2) {
  display: flex;
  padding: 1rem 9.5rem 1rem 3rem;
  align-items: center;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid #dcdbdc;
  color: #191725;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 112.5% */
}
.pay-ops > div:nth-child(3) {
  color: #191725;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 112.5% */
  display: flex;
  padding: 1rem 9.4375rem 1rem 3rem;
  align-items: center;
  gap: 0.625rem;
}
.pay-ops > div:nth-child(4) {
  display: flex;
  padding: 1rem 3.875rem 1rem 3rem;
  align-items: center;
  gap: 0.625rem;
  color: #191725;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 112.5% */
}
.pay-ops > div:nth-child(5) {
  display: flex;
  padding: 1rem 7.3125rem 1rem 3rem;
  align-items: center;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid #dcdbdc;
  color: #191725;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 112.5% */
}
.pay-ops > div:nth-child(6) {
  color: #191725;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem; /* 112.5% */
  display: flex;
  padding: 1rem 9.5rem 1rem 3rem;
  align-items: center;
  gap: 0.625rem;
}
.pay-ops > div:nth-child(7) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.1875rem;
  color: #191725;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.125rem; /* 112.5% */
  padding-left: 3rem;
}
/* 
styling for the loading popup
*/
.loading-popup {
  display: flex;
  height: 31.75rem;
  padding: 7.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;
  border-radius: 1.5rem;
  background: var(--primary-300, #95b5df);
  width: 29.5rem;
}
.charm-div {
  display: flex;
  width: 4.5rem;
  padding: 0.3125rem 0.5rem 0.6875rem 0.5rem;
  justify-content: center;
  align-items: center;
}

.charm-div {
  animation: rotate 2s linear infinite;
}
@keyframes charm-div {
  from {
    transform: rotate(0deg); /* Starting position */
  }
  to {
    transform: rotate(360deg); /* Ending position */
  }
}
.charm-div svg {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
}
.loading-popup h2 {
  color: var(--Text-White, #fdfdfd);
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.75rem; /* 91.667% */
}
.line14 {
  width: 7rem;
  height: 0.0625rem;
  background: var(--secondary-100, #fff);
}
.loading-popup p {
  color: var(--Text-White, #fdfdfd);
  text-align: center;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1rem; /* 114.286% */
}
.success-popup {
  display: flex;
  width: 29.5rem;
  height: 31.25rem;
  padding: 7.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;
  border-radius: 1.5rem;
  background: var(--primary-200, #1b5096);
}
.success-popup svg {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
}
.success-popup h2 {
  color: #fff;
  font-family: Inter;
  font-size: 3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.75rem; /* 91.667% */
}
.line12 {
  width: 7rem;
  height: 0.0625rem;
  background: var(--primary-200, #fff);
  margin: auto;
}
.success-popup p {
  color: #fff;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1rem; /* 114.286% */
}
.error-popup {
  display: flex;
  width: 29.5rem;
  height: 31.25rem;
  padding: 7.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;
  border-radius: 1.5rem;
  background: var(--secondary-100, #c65a42);
}
.error-popup svg {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  opacity: 0.72;
}
.error-popup p {
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1rem; /* 114.286% */
}
.payment-confirm {
  width: 39.3125rem;
  height: 52rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
  background: var(--Text-White, #fdfdfd);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
.payment-confirm svg {
  width: 5.4375rem;
  height: 5.375rem;
  flex-shrink: 0;
  margin: 2.0625rem 16.9375rem 1.875rem 16.9375rem;
}
.receipt-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.receipt-text h2 {
  color: var(--primary-100, #4e83c9);
  font-family: Poppins;
  font-size: 3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 66.667% */
}
.receipt-text p {
  color: var(--Text-Active, #00171f);

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.line8 {
  width: 39.3131rem;
  height: 0.0625rem;
  background: #95b5df;
}
.payment-confirm > p {
  color: var(--primary-100, #4e83c9);
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
  text-decoration: underline;
}
.receipt-price {
  display: flex;
  width: 39.3131rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.receipt-price > div:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20rem;
}
.receipt-price > div:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20.5625rem;
}
.receipt-price > div:nth-child(3) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 21.6875rem;
}
.receipt-price > div:nth-child(4) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 21.375rem;
}
.receipt-price > div:nth-child(5) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20.0625rem;
}
.receipt-price > div:nth-child(6) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 26.875rem;
}
.receipt-price > div:nth-child(7) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18.25rem;
}
.receipt-price > div:nth-child(8) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16.75rem;
}
.receipt-price > div:nth-child(9) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16rem;
}
.receipt-price > div p {
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.payment-confirm button {
  display: inline-flex;
  padding: 1rem 8.3125rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1.75rem;
  border: 0.0625rem solid var(--secondary-100, #c65a42);
  width: 21.875rem;
  margin: auto;
  background-color: transparent;
  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  color: var(--secondary-100, #c65a42);

  /* small button */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
}
.payment-confirm button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.payment-confirm button:active {
  background-color: var(--secondary-100);
  color: white;
}

#budding {
  display: inline-flex;
  align-items: center;
  gap: 1.3125rem;
  margin: auto;
  padding: 0 25%;
  position: fixed;
}
.budding {
  display: inline-flex;
  align-items: center;
  gap: 1.3125rem;
  margin: auto;
  padding: 0 25%;
}
.budding-first {
  margin: auto;
  display: flex;
  width: 27.5rem;
  padding: 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  border-radius: 0.75rem;
  border: 0.0313rem solid rgba(0, 0, 0, 0.3);
  background: #fff;
  box-shadow: 0rem 0.25rem 0.625rem 0rem rgba(0, 0, 0, 0.1);
}
.rect-bud {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.rect-bud > div:nth-child(1) {
  width: 2.9375rem;
  height: 0.25rem;
  border-radius: 1.5rem;
  background: var(--Text-Active, #00171f);
}
.rect-bud > div:nth-child(2) {
  border-radius: 1.5rem;
  background: var(--secondary-100, #c65a42);
  width: 2.9375rem;
  height: 0.25rem;
}
.bud-text {
  display: flex;
  width: 24.5rem;
  justify-content: space-between;
  align-items: center;
}
.bud-text p:nth-child(1) {
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.bud-text p:nth-child(3) {
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 0.75rem; /* 100% */
}
.bud-text svg {
  width: 9.6875rem;
  height: 0.25rem;
  flex-shrink: 0;
}
.budding-first textarea {
  width: 24.5rem;
  height: 4rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 0.0313rem solid var(--Text-Field, #b3b3b3);
  resize: none;
  outline: none;
}
.budding-first textarea::placeholder {
  color: var(--Text-Field, #b3b3b3);
  font-family: Poppins;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.budding-first button {
  display: flex;
  width: 12rem;
  height: 3.5rem;
  padding: 1rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.625rem;
  background: var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  color: var(--Text-White, #fdfdfd);

  /* CTA */
  font-family: Poppins;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
  border: none;
}
.budding-first button:hover {
  background-color: var(--secondary-200);
}
.budding-first button:active {
  background-color: var(--secondary-100);
}
.work-rat {
  display: flex;
  height: 30.0625rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
}
.frame1239 {
  display: flex;
  width: 27.5rem;
  padding: 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  border-radius: 0.75rem;
  border: 0.0313rem solid rgba(0, 0, 0, 0.3);
  background: #fff;
  box-shadow: 0rem 0.25rem 0.625rem 0rem rgba(0, 0, 0, 0.1);
}
.frame1237 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.frame1237 p {
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.frame1236 {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.frame1234 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}
.frame1234 p {
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 0.75rem; /* 100% */
}
.frame1234 svg {
  width: 1rem;
  height: 1rem;
}
.frame1235 {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
}
.frame1235 > div {
  display: flex;
  width: 2.5rem;
  padding: 0.5rem 0.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--Text-Active, #00171f);
}
.frame1235 > div p {
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.rect-bud2 > div:nth-child(1) {
  width: 2.9375rem;
  height: 0.25rem;
  border-radius: 1.5rem;

  background: var(--secondary-100, #c65a42);
}
.rect-bud2 > div:nth-child(2) {
  border-radius: 1.5rem;
  background: var(--Text-Active, #00171f);
  width: 2.9375rem;
  height: 0.25rem;
}
.rect-bud2 {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.frame1240 {
  display: flex;
  width: 27.5rem;
  padding: 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  border-radius: 0.75rem;
  border: 0.0313rem solid rgba(0, 0, 0, 0.3);
  background: #fff;
  box-shadow: 0rem 0.25rem 0.625rem 0rem rgba(0, 0, 0, 0.1);
}
.bud-text2 {
  display: flex;
  width: 24.5rem;
  justify-content: space-between;
  align-items: flex-start;
}
.bud-text2 p:nth-child(1) {
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.bud-text2 p:nth-child(2) {
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 0.75rem; /* 100% */
}
.frame1240 textarea {
  width: 24.5rem;
  height: 4rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 0.0313rem solid var(--Text-Field, #b3b3b3);
  resize: none;
  outline: none;
}
.frame1240 textarea::placeholder {
  color: var(--Text-Field, #b3b3b3);
  font-family: Poppins;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.frame1240 button {
  display: flex;
  width: 12rem;
  height: 3.5rem;
  padding: 1rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.625rem;
  background: var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  color: var(--Text-White, #fdfdfd);

  /* CTA */
  font-family: Poppins;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
  border: none;
}
.frame1240 button:hover {
  background-color: var(--secondary-200);
}
.frame1240 button:active {
  background-color: var(--secondary-100);
}
#frame201h {
  display: flex;
  justify-content: center;
  padding: 1.25rem 0;
  position: fixed;
  width: 100%;
}
.revi {
  cursor: context-menu;
}
#frame201 {
  display: flex;
  width: 41.625rem;
  padding: 2.5rem 4.3125rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  border-radius: 1.5rem;
  background: var(--Text-White, #fdfdfd);
}
.frame201 {
  display: flex;
  width: 41.625rem;
  padding: 2.5rem 4.3125rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  border-radius: 1.5rem;
  background: var(--Text-White, #fdfdfd);

  /* position: absolute;
left: 24.1875rem;
top: .75rem; */
}
.frame194a {
  display: flex;
  width: 32.6875rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  background: #fff;
}
.frame194a p {
  color: var(--Text-Active, #00171f);
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2rem; /* 133.333% */
  align-self: stretch;
}
.frame188f {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
.frame188f > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
}
.frame188f p {
  align-self: stretch;
  color: var(--Text-Active, #00171f);

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.frame188f input {
  height: 2.375rem;
  padding: 0.5rem 1rem;
  border: 0.0625rem solid var(--Grey, #dcdcdc);
  background: var(--Text-White, #fdfdfd);
  outline: none;
  width: 32.6875rem;
}

.frame201 button {
  display: flex;
  width: 12rem;
  height: 3.5rem;
  padding: 1rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.625rem;
  background: var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  color: var(--Text-White, #fdfdfd);

  /* CTA */
  font-family: Poppins;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
  border: none;
}
.frame201 button:hover {
  background-color: var(--secondary-200);
}
.frame201 button:active {
  background-color: var(--secondary-100);
}
/* 
chat with a worker
*/
#msghid {
  width: 100%;
  display: flex;
  justify-content: center;
  position: sticky;
  top: -10%;
}
.frame1284 {
  display: inline-flex;
  padding: 0rem 5rem;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
.frame1107 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;
}

.frame1107 h1 {
  width: 35.5rem;
  color: var(--Text-White, #fdfdfd);

  /* H0.5 */
  font-family: Inter;
  font-size: 4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 5rem; /* 125% */
}
.frame1107 button {
  display: flex;
  width: 14.875rem;
  height: 3.5rem;
  padding: 1rem 2rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 2.5rem;
  background: var(--secondary-100, #c65a42);
  color: var(--Text-White, #fdfdfd);

  /* CTA */
  font-family: Poppins;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
  border: none;
}

.frame1107 button:hover {
  background-color: var(--secondary-200);
}
.frame1107 button:active {
  background-color: var(--secondary-100);
}
.frame1121 {
  width: 29.8125rem;
  height: auto;
  border-radius: 0.75rem;
  border: 0.0625rem solid var(--Text-Active, #00171f);
  background: var(--Text-White, #fdfdfd);
}
.frame1126 {
  display: flex;
  width: 100%;
  padding: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  background: #ddd;
  border-radius: 0.75rem 0.75rem 0 0;
}
.frame1124aa {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.frame1124aa p {
  color: #000;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 0.75rem; /* 75% */
}
.frame1122 {
  display: flex;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  border-radius: 3rem;
  background: #0fe16d;
}
.frame1125 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.1875rem 0.0625rem;
}
.frame1125 > svg:nth-child(1) {
  width: 0.9167rem;
  height: 0.6667rem;
}
.frame1125 > svg:nth-child(2) {
  width: 0.7491rem;
  height: 0.7491rem;
  flex-shrink: 0;
}
.frame22 {
  display: flex;
  width: 100%;
  padding: 0.375rem 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border: 0.0625rem solid #d2d2d2;
  background: rgba(217, 217, 217, 0.7);
  border-radius: 0 0 0.75rem 0.75rem;
}
.frame220 {
  display: flex;
  padding: 0.125rem 0rem;
  justify-content: center;
  align-items: center;
  gap: 9.125rem;
  align-self: stretch;
  width: 90%;
  margin: auto;
}
.send-ico {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.send-ico > svg:nth-child(1) {
  width: 1.5rem;
  height: 1.5rem;
}
.send-ico > svg:nth-child(2) {
  width: 1.3689rem;
  height: 1.5rem;
}
.send-ico > svg:nth-child(3) {
  width: 1.5001rem;
  height: 1.5rem;
}
.frame220 input {
  display: flex;
  padding: 0.5rem 0.1875rem;
  justify-content: center;
  align-items: center;
  gap: 0.8125rem;
  border-radius: 0.25rem;
  border: 0.0313rem solid rgba(27, 80, 150, 0.8);
  outline: none;
}
.frame220 input::placeholder {
  color: rgba(55, 63, 66, 0.14);
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.chatbox {
  height: 43.125rem;
}
/* .frame1284 {
  background-color: var(--primary-300);
} */
/* 
chat with jobbo
*/
.speak button {
  display: flex;
  padding: 1rem 2rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 2.5rem;
  background: var(--secondary-100, #c65a42);
  color: var(--Text-White, #fdfdfd);

  /* CTA */
  font-family: Poppins;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
  width: 19.4375rem;
}
.speak button:hover {
  background-color: var(--secondary-200);
}
.speak button:active {
  background-color: var(--secondary-100);
}

/* 
styling for the components
*/
.comp11 {
  display: flex;
  /* height: 28.75rem; */
  height: auto;
  padding: 2.25rem 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 1.25rem;
  background: var(--Text-White, #fdfdfd);
}
.comp11sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
}
.comp11sub h2 {
  color: var(--primary-100, #4e83c9);
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.paycomp {
  display: flex;
  width: 36.25rem;
  /* height: 11.75rem; */
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: 0.125rem solid var(--Text-Blur, #e0e0e0);
  background: var(--Text-White, #fdfdfd);
  padding: 0;
  border-radius: 0.625rem;
}
.paycomp input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
}
.paycomp p {
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B1 */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
}
.paycomp > div {
  /* border-radius: .625rem .625rem 0rem 0rem;
border: .125rem solid var(--Text-Blur, #E0E0E0);
background: var(--Text-White, #FDFDFD); */
  height: 4.0625rem;
}
.paycomp > div:nth-child(1) {
  display: flex;
  padding: 0rem 1.1875rem;
  align-items: center;
  gap: 15.4375rem;
  border-radius: 0.625rem 0.625rem 0rem 0rem;
  border-bottom: 0.125rem solid var(--Text-Blur, #e0e0e0);
  /* background: var(--Text-White, #fdfdfd); */
}
.paycomp > div:nth-child(2) {
  display: flex;
  /* width: 36.25rem; */
  width: 100%;
  padding: 1.0625rem 1.1875rem;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
  /* border-right: .125rem solid var(--Text-Blur, #e0e0e0); */
  border-bottom: 0.125rem solid var(--Text-Blur, #e0e0e0);
  /* border-left: .125rem solid var(--Text-Blur, #e0e0e0);
  background: var(--Text-White, #fdfdfd); */
}
.paycomp > div:nth-child(3) {
  display: flex;
  width: 36.25rem;
  padding: 1.0625rem 1.1875rem;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0rem 0rem 0.625rem 0.625rem;
  /* border-right: .125rem solid var(--Text-Blur, #e0e0e0);
  border-bottom: .125rem solid var(--Text-Blur, #e0e0e0);
  border-left: .125rem solid var(--Text-Blur, #e0e0e0); */
  /* background: var(--Text-White, #fdfdfd); */
}
.frame94 {
  display: flex;
  align-items: center;
  gap: 1.875rem;
}
.frame94 svg:nth-child(1) {
  width: 3.5rem;
  height: 1.0625rem;
}
.frame94 svg:nth-child(2) {
  width: 2.5rem;
  height: 1.9375rem;
}
.frame95 {
  display: flex;
  height: 4.0625rem;
  align-items: center;
  gap: 0.75rem;
}
.frame95 img {
  width: 8.3125rem;
  height: 5.3125rem;
}

.frame96 {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  white-space: nowrap;
  width: 70%;
  height: auto;
}
#main96 {
  display: flex;
  padding: 1.0625rem 1.1875rem 1.0625rem 1.1875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
}
#hide9696 {
  display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 1.375rem;
  grid-column-gap: 1.375rem;
  /* display: none; */
}
.hide96 > div {
  gap: 0.5rem;
}
.hide96 p {
  color: var(--Text-Field, #b3b3b3);
  /* text-align: center; */

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
#hide9696 input {
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Text-Field, #b3b3b3);
  background: var(--Text-White, #fdfdfd);
  height: 2.5rem;
  width: 16.25rem;
  padding: 0 5%;
  outline: none;
}
.frame97b {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}
.frame97 {
  display: flex;
  /* align-items: flex-start;
  justify-self: flex-start; */
  gap: 0.75rem;
}
.comp11sub button {
  display: flex;
  padding: 1rem 7.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1.75rem;
  border: 0.0625rem solid var(--secondary-100, #c65a42);

  /* Button */
  box-shadow: 0.0625rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.02);
  color: var(--secondary-100, #c65a42);

  /* small button */
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 150% */
  background-color: transparent;
}
.comp11sub button:hover {
  background-color: var(--secondary-200);
  color: white;
}
.comp11sub button:active {
  background-color: var(--secondary-100);
}
#frame9797hid {
  display: flex;
  align-items: flex-start;
  gap: 1.375rem;
  /* display: none; */
}
#frame9797hid p {
  color: var(--Text-Active, #00171f);
  text-align: center;

  /* B2 */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
#main97 {
  display: flex;
  padding: 1.0625rem 1.1875rem 1.0625rem 1.1875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.875rem;
  height: auto;
  justify-content: flex-start;
}

#frame9797hid > div:nth-child(1) {
  display: flex;
  align-items: flex-start;
  gap: 5.4375rem;
}
#frame9797hid > div:nth-child(2) {
  display: flex;
  align-items: flex-start;
  gap: 1.8125rem;
}
#frame9797hid > div {
  padding: 0.5625rem 0.9375rem;
  white-space: nowrap;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Text-Field, #b3b3b3);
  background: var(--Text-White, #fdfdfd);
}
.paycomp > div {
  height: auto;
}
.paycomp {
  height: auto;
}
/* 
styling for the worker dashboard page
*/
.workerdash {
  display: flex;
}
.worker-aside {
  display: inline-flex;
  /* height: 64rem; */
  padding: 2.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  flex-shrink: 0;
  border-right: 1px solid var(--Text-Blur, #e0e0e0);
  background: var(--Text-White, #fdfdfd);
  width: 20rem;
  /* Sleek */
  box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.05);
}
.worker-aside img {
  width: 6.25rem;
  height: 2.91769rem;
  flex-shrink: 0;
}
.worker-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
}
.worker-btn button {
  display: flex;
  padding: 1rem 1.5rem;
  /* flex-direction: column; */
  justify-content: left;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  border-radius: 0.25rem;
  border: 1px solid var(--Grey, #dcdcdc);
  color: black;
  font-family: Poppins;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  width: 15rem;
  white-space: nowrap;
}
.worker-btn button:hover {
  background-color: var(--secondary-300);
  color: white;
}
.worker-btn button:active {
  background-color: var(--secondary-100);
  color: white;
}
.worker-btn button svg {
  width: 1.375rem;
  height: 1.375rem;
}
.dash-head {
  display: flex;
  width: 66.375rem;
  height: 3.5rem;
  padding: 1.5rem 5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  flex-shrink: 0;
}
.dash-head p {
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.dash-body {
  display: flex;
  width: 65rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.dash-prof {
  display: flex;
  width: 61.875rem;
  padding: 1.5rem 2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--Text-White, #fdfdfd);
}
.dash-prof > h2 {
  color: #000;

  /* B0 */
  font-family: Poppins;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 133.333% */
}
.worker-d2 {
  display: flex;
  padding: 1.5rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  width: 57rem;
  border-radius: 1.5rem;
  background: var(--primary-200, #1b5096);
}
.pend-work {
  display: flex;
  width: 58.625rem;
  padding: 1.5rem 2rem;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  background: var(--Text-White, #fdfdfd);
}
.pend {
  display: flex;
  padding: 1.25rem 0.875rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex: 1 0 0;
  border-radius: 0.625rem;
  border: 1.5px solid var(--primary-300, #95b5df);
  box-shadow: 0px 4px 4px 0px rgba(26, 36, 77, 0.25);
}
.pend h4 {
  color: var(--Text-Active, #00171f);
  font-family: Montserrat;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.pend-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pend-mini p:nth-child(1) {
  color: var(--Text-Active, #00171f);

  /* B2 */
  font-family: Poppins;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem; /* 157.143% */
}
.pend-mini p:nth-child(3) {
  color: var(--Text-Active, #00171f);
  font-family: Montserrat;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.progress-bar {
  width: 12rem;
  padding-right: 9.90625rem;
  border-radius: 0.3125rem;
  opacity: 0.5;
  background: #f0f0f0;
}

.progress-bar-fill {
  width: 3.6rem;
  height: 1.1875rem;
  flex-shrink: 0;
  background: var(--secondary-200, #7a0e00);
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
.progress-bar-fill2 {
  width: 4.2rem;
  height: 1.1875rem;
  flex-shrink: 0;
  background: var(--secondary-200, #7a0e00);
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
.rece {
  display: flex;
  width: 63rem;
  margin: auto;
  padding: 1.5rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--Text-White, #fdfdfd);
}
.rece-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.rece-main1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.rece-main1 p:nth-child(1) {
  color: var(--Text-Active, #00171f);
  font-family: Montserrat;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.rece-main1 p:nth-child(2) {
  color: var(--secondary-100, #c65a42);
  font-family: Montserrat;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.trans-hold {
  display: flex;
  width: 52.0625rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.trans-hold h3 {
  display: flex;
  width: 22.875rem;
  padding: 0.625rem;
  align-items: flex-start;
  gap: 0.625rem;
  color: var(--Text-Active, #00171f);
  font-family: Montserrat;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.trans-main {
  display: flex;
  padding: 1rem 0rem 0rem 0.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  border-radius: 0.5rem;
}
.msg1 {
  display: flex;
  padding: 1rem 0.5rem;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 0.5rem;
}
.f147 {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 0 0;
}
.f147 svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.f147 > div p:nth-child(1) {
  color: #1a1a1a;
  font-family: Montserrat;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.f147 > div p:nth-child(2) {
  color: #514f4f;
  font-family: Montserrat;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.f146 {
  display: flex;
  padding: 0.625rem;
  justify-content: center;
  align-items: center;
}
.f146 p {
  color: #16b861;
  font-family: Montserrat;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.frame195b {
  display: flex;
  width: 59.6875rem;
  padding: 0 0 0 5.5rem;
  justify-content: center;
  align-items: center;
  gap: 3.5rem;
}
.mean {
  text-align: left;
  width: 100%;
}
.click {
  color: var(--Text-Active, #00171f);
  font-family: Poppins;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 1.5rem; /* 120% */
}
.msgs {
  display: flex;
  width: 60.125rem;
  margin: 3rem auto;
  padding: 2.5rem 5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--Text-White, #fdfdfd);
}
.msgs1 {
  display: flex;
  padding: 2.5rem;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  align-self: stretch;
  border-radius: 0.5rem;
  border-bottom: 1px solid var(--Grey, #dcdcdc);

  /* Fade */
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
}
.msgs1 p {
  color: var(--Text-Active, #00171f);

  /* b0.5 */
  font-family: Poppins;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 133.333% */
}
.msgs1 svg {
  width: 1.5rem;
  height: 1.5rem;
}
.transact {
  margin: 0 0 0 5.5rem;
}
.sett-arr2 {
  display: flex;
  width: 15.6875rem;
  align-items: center;
  gap: 1rem;
  border-radius: 1.25rem;
}
.sett-arr:hover {
  background-color: var(--secondary-300);
}
.sett-arr2 svg {
  width: 1.5rem;
  height: 1.5rem;
  /* transform: rotate(-90deg); */
  flex-shrink: 0;
}
.sett-arr2 p {
  color: var(--Text-Active, #00171f);

  /* H4 */
  font-family: Inter;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
  flex: 1 0 0;
}
.visible {
  display: block;
}