/*=================dashSec=================*/
.dashSec {
  margin: 20px 0 80px 0;
}
.dashSec .dashRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.dashSec .dashSide {
  position: sticky;
  top: 60px;
  right: 0;
  width: 300px;
  background: white;
  border-radius: 16px;
  padding: 25px 20px 20px 20px;
}
.dashSec .dashSide .user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.dashSec .dashSide .user .imgBox {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--text-200);
}
.dashSec .dashSide .user img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.dashSec .dashSide .user h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-800);
}
.dashSec .dashSide .user p {
  font-size: 12.5px;
  color: var(--text-400);
}
.dashSec .dashSide .followRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.dashSec .dashSide .followRow li {
  font-size: 12.5px;
  color: var(--text-800);
}
.dashSec .dashSide .followRow span {
  color: var(--red-500);
}
.dashSec .dashSide .followRow i {
  background: var(--text-200);
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
}

.dashSec .dashMain {
  width: calc(100% - 330px);
}
.dashSec .dashDiv {
  background: white;
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  margin-bottom: 12px;
}
.dashSec .dashBxHed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dashSec .dashBxHed h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-800);
}
.dashSec .dashBxHed a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--red-500);
}
.dashSec .dashBxHed a span {
  font-size: 12.5px;
  font-weight: 600;
}
.dashSec .dashBxHed a i {
  font-size: 20px;
}
.dashSec .dashBxHed a:hover {
  color: var(--red-700);
}
.dashSec .dashBxHed .editBtn,
.dashSec .dashBxHed .addBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px;
  padding: 0 15px;
}
.dashSec .dashBxHed .addBtn {
  height: 42px;
  color: var(--red-500);
  border: 1px solid var(--red-500);
}
.dashSec .dashBxHed .editBtn {
  height: 30px;
  color: var(--blue-500);
  border: 1px solid var(--blue-500);
}
.dashSec .dashBxHed .editBtn span {
  font-weight: 500;
  font-size: 11.25px;
  line-height: 1;
}
.dashSec .dashBxHed .addBtn span {
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}
.dashSec .dashBxHed .editBtn i {
  font-size: 14px;
}
.dashSec .dashBxHed .addBtn i {
  font-size: 12px;
  font-weight: 700;
}
.dashSec .dashBxHed .addBtn:hover {
  background: var(--red-500);
  color: white;
}
.dashSec .dashBxHed .editBtn:hover {
  background: var(--blue-500);
  color: white;
}
.dashSec .walletRow {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dashSec .walletRow .balanceBox {
  width: 50%;
  min-height: 126px;
  border-radius: 16px;
  background: white;
  padding: 35px 40px;
}
.dashSec .walletRow .balanceBox .line {
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 62px;
  border-radius: 15px 0 0 15px;
}
.dashSec .walletRow .balanceBox .line.red {
  background: var(--red-500);
}
.dashSec .walletRow .balanceBox .line.blue {
  background: var(--blue-500);
}
.dashSec .walletRow .balanceBox .currency {
  width: 36px;
  height: 36px;
  top: 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.dashSec .walletRow .balanceBox .toman {
  background: var(--red-100);
  color: var(--red-500);
}
.dashSec .walletRow .balanceBox .euro {
  color: var(--blue-500);
  background: var(--blue-100);
}
.dashSec .walletRow .balanceBox .text p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.dashSec .walletRow .balanceBox .text strong {
  font-weight: 700;
  font-size: 25px;
  color: var(--text-800);
}
.dashSec .walletRow .balanceBox .text small {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-400);
}
.dashSec .walletRow .balanceBox .text div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.dashSec .walletBtns {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dashSec .walletBtns .btn {
  background: white;
  width: 25%;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 30px 10px;
  text-align: center;
  border: 1px solid white;
}
.dashSec .walletBtns div {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: white;
}
.dashSec .walletBtns div.red {
  background: linear-gradient(180deg, #ee0a1c 0%, #fb3849 100%);
}
.dashSec .walletBtns div.blue {
  background: linear-gradient(180deg, #576df9 0%, #7488fd 100%);
}
.dashSec .walletBtns div.green {
  background: linear-gradient(180deg, #15bc84 0%, #2cce94 100%);
}
.dashSec .walletBtns div.yellow {
  background: linear-gradient(180deg, #f6a410 0%, #fab920 100%);
}
.dashSec .walletBtns p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
  line-height: 1;
  margin-top: 5px;
}
.dashSec .walletBtns span {
  font-size: 12.5px;
  color: var(--text-400);
  display: block;
  line-height: 1;
}
.dashSec .walletBtns .btn:has(.red):hover {
  border-color: #ee0a1c;
}
.dashSec .walletBtns .btn:has(.blue):hover {
  border-color: #576df9;
}
.dashSec .walletBtns .btn:has(.green):hover {
  border-color: #15bc84;
}
.dashSec .walletBtns .btn:has(.yellow):hover {
  border-color: #f6a410;
}
.dashSec .dashMain .myDashRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dashSec .myDashRow .rightBx {
  width: calc(100% - 284px);
}
/* Empty last-offer state: stretch the right column so the last-offer box
   extends down to the "my projects" section, matching the left widgets. */
.dashSec .myDashRow .rightBx.isEmpty {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.dashSec .myDashRow .rightBx.isEmpty > * {
  flex: 0 0 auto;
  width: 100%;
}
.dashSec .myDashRow .rightBx.isEmpty > .lastOffrBx {
  flex: 1 0 auto;
}
/* Columns stack below 1200px — no stretching there. */
@media (max-width: 1199px) {
  .dashSec .myDashRow .rightBx.isEmpty {
    align-self: auto;
  }
}
.dashSec .lastOffrBx .offerBox {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--text-100);
  padding: 20px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px 20px;
}
.dashSec .offerBox .text h3 {
  font-size: 14px;
  color: var(--text-800);
  margin-bottom: 12px;
  line-height: 1.7;
}
.dashSec .offerBox .text ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}
.dashSec .offerBox .text li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.dashSec .offerBox .text li span {
  font-size: 14px;
  color: var(--text-400);
}
.dashSec .offerBox .text li i {
  font-size: 18px;
  color: var(--text-500);
}
.dashSec .dashStatus {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  line-height: 1;
  border-radius: 20px;
  height: 31px;
  padding: 0 17px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid;
}
.dashSec .dashStatus.blue {
  border-color: var(--blue-100);
  background: var(--blue-50);
  color: var(--blue-500);
}
.dashSec .dashStatus.green {
  color: #26c073;
  background: rgba(30, 176, 76, 0.15);
  border-color: rgba(30, 176, 76, 0.12);
}
.dashSec .dashStatus.red {
  background: var(--red-50);
  color: var(--red-400);
  border-color: var(--red-100);
}
.dashSec .offerBox .left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.dashKbabMnu {
  position: relative;
}
.dashKbabMnu .opnKbabMnu {
  font-size: 20px;
  color: black;
  cursor: pointer;
}
.dashKbabMnu .opnKbabMnu:hover {
  color: var(--red-500);
}
.dashKbabMnu .kbabMnuBx {
  border-radius: 16px;
  background: white;
  padding: 10px;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
  display: none;
  position: absolute;
  left: 0;
  top: 20px;
  z-index: 11;
  min-width: 204px;
}
/* Card kebab menus (service/portfolio cards) always open toward the card
   interior, following the page direction (RTL opens leftward from the
   inline-start corner, LTR opens rightward) */
.serviceCrd .serviceImg .servcCrdMnu .dashKbabMnu .kbabMnuBx {
  inset-inline-start: 0;
  inset-inline-end: auto;
  left: auto;
  right: auto;
}
/* Profile portfolio card kebab: the menu button is anchored to the top-left
   corner of the card in every language (.exprtCrdMnu), so the dropdown opens
   from it toward the card body and never leaves the card — the LTR-only
   right-anchor override would push it outside the overflow-hidden card. */
.profilSec .portfolioBx .exprtCrdMnu .dashKbabMnu .kbabMnuBx {
  left: 0;
  right: auto;
}
.dashKbabMnu .kbabMnuBx a,
.dashKbabMnu .kbabMnuBx button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  width: 100%;
  min-width: max-content;
  border: none;
  background: transparent;
  border-radius: 12px;
}
.dashKbabMnu .kbabMnuBx a {
  color: var(--text-800);
  margin-bottom: 5px;
}
.dashKbabMnu .kbabMnuBx button {
  color: var(--red-500);
  margin-top: 5px;
  border-top: 1px solid var(--text-50);
}
.dashKbabMnu .kbabMnuBx a span,
.dashKbabMnu .kbabMnuBx button span {
  font-size: 12.5px;
  font-weight: 500;
}
.dashKbabMnu .kbabMnuBx a i,
.dashKbabMnu .kbabMnuBx button i {
  font-size: 16px;
}
.dashKbabMnu .kbabMnuBx a:hover,
.dashKbabMnu .kbabMnuBx button:hover {
  background: #f7f7f7;
}
.dashSec .projectBx {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--text-100);
  padding: 20px;
  margin-bottom: 12px;
}
.dashSec .projectBx .prjctCrdHed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}
.dashSec .projectBx .prjctCrdHed .text h3 {
  margin-bottom: 0;
}
.dashSec .projectBx .prjctCrdBdy {
  margin: 20px 0 18px 0;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--text-50);
}
.dashSec .projectBx .prjctCrdBdy ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px 20px;
  flex-wrap: wrap;
}
.dashSec .projectBx .prjctCrdBdy li {
  width: 48%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.dashSec .projectBx .prjctCrdBdy i {
  font-size: 20px;
  color: var(--text-300);
}
.dashSec .projectBx .prjctCrdBdy span {
  font-size: 14px;
  color: var(--text-400);
}
.dashSec .projectBx .prjctCrdBdy p {
  font-size: 11.25px;
  color: var(--text-500);
}
.dashSec .projectBx .prjctCrdBdy strong {
  color: var(--text-800);
  font-weight: 500;
}
.dashSec .projectBx .prjctCrdFtr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px 25px;
}
.dashSec .prjctCrdFtr .employer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.dashSec .prjctCrdFtr .employer .imgBx {
  min-width: 35px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--text-100);
}
.dashSec .prjctCrdFtr .employer img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.dashSec .prjctCrdFtr .employer p {
  font-size: 12.5px;
  color: var(--text-500);
}
.dashSec .prjctCrdFtr .employer p span {
  color: var(--text-800);
  font-weight: 500;
}
.dashSec .projectBx .prjctCrdFtr a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  height: 38px;
  padding: 0 25px;
  border-radius: 16px;
  border: 1px solid var(--text-200);
  font-size: 14px;
  color: var(--text-800);
  line-height: 1;
}
.dashSec .projectBx .prjctCrdFtr a:hover {
  background: var(--red-500);
  border-color: var(--red-500);
  color: white;
}
.dashSec .meetinBox {
  margin-bottom: 12px;
}
.dashSec .myServices {
  margin: 50px 0;
}

.dashSec .myDashRow .leftBx {
  width: 272px;
}
.dashSec .myDashRow .completeInfo {
  text-align: center;
}
.dashSec .completeInfo .avatar {
  --progress: 0%;
  width: 84px;
  height: 84px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(
    var(--red-300) 0 var(--progress),
    var(--red-50) var(--progress) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px auto;
}
.dashSec .completeInfo .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid white;
  object-fit: cover;
}
.dashSec .completeInfo p {
  font-size: 12.5px;
  color: var(--text-400);
  margin: 15px auto;
}
.dashSec .completeInfo h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-800);
  margin: 14px auto 4px auto;
}
.dashSec .completeInfo .starRate {
  width: max-content;
  margin: 4px auto 18px auto;
}
.dashSec .completeInfo .starRate .star:before,
.dashSec .completeInfo .starRate .star,
.dashSec .completeInfo .starRate .star span {
  font-size: 16px;
}
.dashSec .leftBx .showProfil {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-800);
  min-height: 38px;
  border-radius: 16px;
  border: 1px solid var(--text-200);
}
.dashSec .leftBx .showProfil:hover {
  background: var(--red-50);
  border-color: var(--red-500);
  color: var(--red-500);
}
.dashSec .membership h2 {
  font-size: 14px;
  font-weight: 700;
}
.dashSec .membership.goldMember h2 {
  color: #ffb81f;
}
.dashSec .membership ul {
  margin: 25px 0;
}
.dashSec .membership li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dashSec .membership li span {
  font-size: 12.5px;
  color: var(--text-400);
}
.dashSec .membership li p {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-800);
}
.dashSec .membership li:last-child {
  margin-bottom: 0;
}
.dashSec .revenues ul li {
  margin-bottom: 5px;
}
.dashSec .revenues p,
.dashSec .revenues ul span {
  font-size: 12.5px;
  color: var(--text-400);
}
.dashSec .revenues p {
  margin: 12px 0 12px auto;
}
.dashSec .revenues ul li:last-child {
  margin-bottom: 0;
}
.dashSec .revenues ul strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--red-500);
  line-height: 1;
}

/*===============addTiktSec===============*/
.addTiktSec {
  margin: 50px 0;
}
.addTiktSec .addTiktDiv {
  width: 100%;
  max-width: 746px;
  margin: 0 auto;
  padding: 0 24px;
}
.addTiktSec .addTiktBtn {
  background: var(--red-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
  margin: 40px auto 20px 0;
  border-radius: 16px;
  height: 38px;
  padding: 0 20px;
}
.addTiktSec .addTiktBtn:hover {
  background: var(--red-700);
}
.addPrjctSec .frmStepBx .uploadMdlBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-direction: column;
  height: max-content;
  text-align: center;
  margin-bottom: 30px;
  border: 1px dashed var(--text-300);
  padding: 25px 16px;
  cursor: pointer;
  border-radius: 16px;
}
.addPrjctSec .frmStepBx .uploadMdlBtn i {
  font-size: 44px;
  color: var(--text-300);
}
.addPrjctSec .frmStepBx .uploadMdlBtn p {
  color: var(--text-400);
  font-size: 11.25px;
}
.addPrjctSec .frmStepBx .uploadMdlBtn p span {
  color: var(--blue-500);
}
.addTiktSec .uploadDiv {
  width: 100%;
}
.uploadDiv .uploadBox {
  width: 100%;
  height: max-content;
  border-radius: 16px;
}
.uploadDiv .uploadBox label,
.uploadDiv .uploadBox input {
  width: 100%;
  left: 0;
  top: 0;
  cursor: pointer;
  border-radius: 16px;
}
.uploadDiv .uploadBox label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-direction: column;
  height: max-content;
  text-align: center;
  margin: 0;
  border: 1px dashed var(--text-300);
  padding: 25px 16px;
}
.uploadDiv .uploadBox label .iconImg span {
  font-size: 44px;
  color: var(--text-300);
}
.uploadDiv .uploadBox label p {
  color: var(--text-400);
  font-size: 11.25px;
}
.uploadDiv .uploadBox label p span {
  color: var(--blue-500);
}
.uploadDiv .uploadBox input {
  z-index: 2;
  opacity: 0;
  height: 100%;
}
.uploadDiv .fileList {
  margin-top: 20px;
}
.uploadDiv .fileList .pip {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--text-100);
  height: max-content;
  border-radius: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 6px;
  direction: rtl;
}
.uploadPip {
  width: 100%;
  padding: 16px;
  height: max-content;
  border-radius: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  direction: rtl;
}
.uploadDiv .fileList .pip .fileInfo,
.uploadPip .fileInfo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: calc(100% - 158px);
}
.uploadDiv .fileList .pip img,
.uploadPip img {
  width: 35px;
  height: 51px;
  border-radius: 6px;
  object-fit: cover;
  object-position: center;
  background-color: var(--Gray-200);
}
.uploadDiv .fileList .pip .fileThumb,
.uploadPip .fileThumb {
  width: 35px;
  height: 36px;
  font-size: 35px;
  color: var(--blue-500);
}
.uploadDiv .fileList .pip .fileInfo .name,
.uploadPip .fileInfo .name {
  text-align: left;
  direction: ltr;
  font-size: 14px;
  width: calc(100% - 45px);
}
.uploadDiv .fileList .pip .fileInfo .name p,
.uploadPip .fileInfo .name p {
  color: var(--text-800);
  font-weight: 600;
  line-height: 2;
}
.uploadDiv .fileList .pip .fileInfo .name i,
.uploadPip .fileInfo .name i {
  color: var(--text-500);
  display: block;
}
.uploadDiv .fileList .pip .fileInfo .downloadProgress,
.uploadPip .fileInfo .downloadProgress {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 8px;
}
.uploadDiv .fileList .pip .progressBar,
.uploadPip .progressBar {
  width: 100%;
  height: 6px;
  border-radius: 20px;
  background: var(--blue-50);
  position: relative;
}
.uploadDiv .fileList .pip .progressFill,
.uploadPip .progressFill {
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--blue-500);
  border-radius: 20px;
}
.uploadDiv .fileList .pip .progressText,
.uploadPip .progressText {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-800);
}
.uploadDiv .fileList .actions,
.uploadPip .actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.uploadDiv .fileList .actions .removeBtn,
.uploadPip .actions .removeBtn {
  border: none;
  padding: 0;
  font-size: 24px;
  color: var(--text-300);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
}
.uploadDiv .fileList .actions .removeBtn:hover,
.uploadPip .actions .removeBtn:hover {
  color: var(--red-500);
}
.uploadDiv .fileList .actions .downloadBtn,
.uploadPip .actions .downloadBtn {
  height: 37px;
  border-radius: 12px;
  padding: 0 24px;
  color: var(--text-500);
  border: 1px solid var(--text-100);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.uploadDiv .fileList .actions .downloadBtn span,
.uploadPip .actions .downloadBtn span {
  font-weight: 500;
  font-size: 12.5px;
}
.uploadDiv .fileList .actions .downloadBtn i,
.uploadPip .actions .downloadBtn i {
  font-size: 17px;
}
.uploadDiv .fileList .actions .downloadBtn:hover,
.uploadPip .actions .downloadBtn:hover {
  border-color: var(--red-500);
  color: var(--red-500);
}

/*=================prjctsSec===============*/
.prjctsSec {
  margin: 25px 0;
}
.prjctsSec .projctTop {
  width: 100%;
  height: max-content;
  min-height: 310px;
  padding: 24px;
  position: relative;
  margin-bottom: 24px;
}
.prjctsSec .projctTop:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  z-index: 1;
  background: url(../img/bg-color.jpg) no-repeat;
  background-size: cover;
  opacity: 0.8;
}
.prjctsSec .projctTop .projctTopBx {
  position: relative;
  z-index: 2;
}
.prjctsSec .projctTop h1 {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-800);
}
.prjctsSec .projctTop .srchBox {
  margin: 35px auto 20px auto;
  width: 100%;
  max-width: 628px;
  height: 60px;
  border: 2px solid white;
  padding: 4px;
  background: transparent;
  border-radius: 50px;
}
.prjctsSec .projctTop .srchDiv {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border: 1.5px solid transparent;
  border-radius: 50px;
  padding: 4px;
}
.prjctsSec .projctTop .srchBox input {
  border: none;
  border-radius: 0 50px 50px 0;
  height: 100%;
  font-size: 14px;
  color: var(--text-800);
}
.prjctsSec .projctTop .srchBox button {
  background: var(--red-500);
  color: white;
  height: 100%;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 50px;
}
.prjctsSec .projctTop .srchBox button:hover {
  background: var(--red-700);
}
.prjctsSec .projctTop .popular {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: 8px;
  color: var(--text-800);
  margin: 20px auto;
}
.prjctsSec .projctTop .popular i {
  font-size: 20px;
}
.prjctsSec .projctTop .popular span {
  font-size: 14px;
  font-weight: 600;
}
.prjctsSec .projctTop ul {
  width: 100%;
  max-width: 874px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 auto;
}
.prjctsSec .projctTop li {
  min-width: max-content;
}
.prjctsSec .projctTop li a {
  height: 36px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text-50);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-600);
  border-radius: 50px;
}
.prjctsSec .projctTop li a:hover {
  background: var(--text-100);
}
.prjctsSec .prjctsRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.prjctsSec .prjctsRow .opnSidFltrs {
  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background: white;
  height: 50px;
  width: 100%;
  padding: 0 15px;
  color: var(--text-800);
  cursor: pointer;
  border-radius: 16px;
}
.prjctsSec .prjctsRow .opnSidFltrs:hover {
  color: var(--red-500);
}
.prjctsSec .filterBox {
  position: sticky;
  right: 0;
  top: 0;
  width: 300px;
  background: white;
  border-radius: 16px;
  padding: 24px 20px;
}
.prjctsSec .filterBox .closSidFltr {
  font-size: 24px;
  color: var(--text-500);
  height: 25px;
  margin: 0 auto 0 0;
  display: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
}
.prjctsSec .filterBox .closSidFltr:hover {
  color: var(--red-500);
}
.prjctsSec .filterBox .filterHed {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--text-100);
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: var(--text-800);
}
.prjctsSec .filterBox .filterHed i {
  font-size: 22px;
}
.prjctsSec .filterBox .filterHed span {
  font-size: 16px;
  font-weight: 600;
}
.prjctsSec .filterBody .filtrLabel {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-800);
  margin-bottom: 8px;
  padding-right: 5px;
}
.prjctsSec .filterBody .filtrSel {
  width: 100%;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--text-100);
  font-size: 14px;
  color: var(--text-800);
}
.prjctsSec .filterBody .filtrSel:focus {
  border-color: var(--blue-500);
}
.prjctsSec .filterBody .input-group {
  border-radius: 16px;
  height: 46px;
  border: 1px solid var(--text-100);
}
.prjctsSec .filterBody .input-group .input-group-text {
  border: none;
  background: var(--text-50);
  color: var(--text-500);
  font-size: 11.25px;
  min-width: 47px;
}
.prjctsSec .filterBody .input-group .form-control {
  border: none;
  font-size: 14px;
  color: var(--text-800);
}

.prjctsSec .filterBody .input-group:has(input:focus) {
  border-color: var(--blue-500);
}
.prjctsSec .filterBody .filtrBtns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
}
.prjctsSec .filterBody .filtrBtns .btn {
  font-size: 14px;
  font-weight: 500;
  height: 38px;
  width: 50%;
  border-radius: 16px;
}
.prjctsSec .filterBody .filtrBtns .saveBtn {
  background: var(--red-500);
  color: white;
}
.prjctsSec .filterBody .filtrBtns .saveBtn:hover {
  background: var(--red-700);
}
.prjctsSec .filterBody .filtrBtns .cancelBtn {
  color: var(--text-800);
  background: var(--text-50);
}
.prjctsSec .filterBody .filtrBtns .cancelBtn:hover {
  background: var(--text-200);
}
.prjctsSec .filtrdPrjcts {
  width: calc(100% - 330px);
}
.prjctsSec .projctList {
  background: white;
  border-radius: 16px;
  margin-bottom: 70px;
  padding: 24px;
}
.prjctsSec .appliedFltr {
  margin-bottom: 12px;
}
.prjctsSec .appliedFltr .hed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
}
.prjctsSec .appliedFltr .hed p {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-800);
}
.prjctsSec .appliedFltr .hed button {
  background: transparent;
  padding: 0;
  color: var(--red-500);
  font-weight: 500;
  font-size: 11.25px;
}
.prjctsSec .appliedFltr .hed button:hover {
  color: var(--red-700);
}
.apliedFltrUl {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}
.apliedFltrUl li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--blue-50);
  width: max-content;
  height: 35px;
  border: 1px solid var(--blue-100);
  border-radius: 16px;
  padding: 0 15px 0 10px;
}
.apliedFltrUl li p {
  color: var(--blue-500);
  font-weight: 500;
  font-size: 11.25px;
  line-height: 1;
}
.apliedFltrUl li button {
  line-height: 1;
  padding: 0;
  font-size: 13px;
  height: 15px;
  color: var(--blue-200);
  background: transparent;
}
.apliedFltrUl li button:hover {
  color: var(--blue-700);
}
.prjctsSec .projctList .listHed {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--text-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.prjctsSec .projctList .listHed .number {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-500);
}
.prjctsSec .projctList .listHed .number span {
  color: var(--text-800);
}
.prjctsSec .projctList .projctItem {
  display: block;
  margin-bottom: 32px;
  position: relative;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid white;
}
.prjctsSec .projctList .projctItem:last-child {
  margin-bottom: 0;
}
.prjctsSec .projctList .projctItem:hover {
  background: linear-gradient(
    to right,
    rgba(146, 10, 230, 0.06),
    rgba(82, 104, 248, 0.06)
  );
  border: 1px solid transparent;
}
.prjctsSec .projctList .projctItem:hover::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(to right, #920ae6, #5268f8);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: all 0.6s;
}
.prjctTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.prjctsSec .projctItem .prjctTitle .right {
  width: calc(100% - 180px);
}
.prjctsSec .projctItem .prjctTitle h2 {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-800);
  margin-bottom: 18px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prjctTitle .right ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 20px;
  flex-wrap: wrap;
}
.prjctTitle .right ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  line-height: 1;
}
.prjctTitle .right ul li i {
  font-size: 19px;
  color: var(--text-300);
}
.prjctTitle .right ul li span {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.prjctTitle .right ul li p {
  font-weight: 500;
  font-size: 11.25px;
  color: var(--text-500);
}
.prjctsSec .projctItem .prjctTitle .seeLink {
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 16px;
  padding: 0 20px;
  background: var(--red-50);
  color: var(--red-500);
}
.prjctsSec .projctItem .prjctTitle .seeLink span {
  font-size: 14px;
}
.prjctsSec .projctItem .prjctTitle .seeLink i {
  font-size: 15px;
}
.prjctsSec .projctItem:hover .prjctTitle .seeLink {
  background: white;
}
.prjctsSec .projctItem .text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-600);
  margin: 24px 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--text-50);
}
.catTags {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}
.catTags li {
  min-width: max-content;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  border-radius: 16px;
  padding: 0 20px;
  background: var(--text-50);
  border: 1px solid var(--text-100);
  text-align: center;
}
.prjctsSec .projctItem:hover .catTags li {
  background: white;
}
.catTags li span {
  color: var(--text-700);
  font-weight: 500;
  font-size: 11.25px;
  display: block;
}
.catTags li button {
  padding: 0;
  height: 19px;
  background: transparent;
  font-size: 15px;
  color: var(--text-600);
}
.catTags li button:hover {
  color: var(--blue-500);
}
.prjctsSec .catTags .special {
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(146, 10, 230, 0.15) 0%,
    rgba(82, 104, 248, 0.15) 100%
  );
  border: 1px solid transparent;
}
.prjctsSec .catTags .special::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, #920ae6, #5268f8);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: all 0.6s;
}
.prjctsSec .projctItem .catTags .special i {
  font-size: 20px;
}
.prjctsSec .projctItem .catTags .special i::before {
  color: #920ae6;
}
.prjctsSec .projctItem .catTags .special span {
  background: linear-gradient(90deg, #920ae6 0%, #5268f8 100%);
  background-clip: text;
  color: transparent;
}
.prjctsSec .projctItem .catTags .urgent {
  color: #ff5e16;
  background: rgba(255, 244, 239, 1);
  border: 1px solid rgba(255, 200, 175, 1);
}
.prjctsSec .projctItem .catTags .urgent i {
  font-size: 18px;
}
.prjctsSec .projctList .dropSel .select {
  width: 160px;
}
.prjctsSec .projctLis .dropSel .select .expndMrIcon {
  font-size: 16px;
  color: var(--text-300);
}

.prjctsSec .prjctInfo,
.prjctsSec .suggestions {
  background: white;
  border-radius: 16px;
  padding: 35px;
  margin-bottom: 25px;
}
.prjctsSec .prjctInfo .prjctTitle {
  margin-bottom: 50px;
}
.prjctsSec .prjctInfo .prjctTitle h2 {
  font-weight: 600;
  font-size: 18px;
  color: var(--text-800);
  margin-bottom: 24px;
  line-height: 1.7;
}
.prjctsSec .prjctInfo .prjctTitle .tags {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.prjctsSec .prjctInfo .prjctTitle .tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 38px;
  border-radius: 20px;
  padding: 0 16px;
}
.prjctsSec .prjctInfo .prjctTitle .tags li span {
  font-weight: 500;
  font-size: 11.25px;
}
.prjctsSec .prjctInfo .prjctTitle .tags li i {
  font-size: 18px;
}
.prjctsSec .prjctInfo .prjctTitle .activeTag {
  background: rgba(227, 245, 236, 1);
  color: rgba(53, 193, 123, 1);
}
.prjctsSec .prjctInfo .prjctTitle .urgentTag {
  color: rgba(255, 94, 22, 1);
  background: rgba(255, 237, 228, 1);
}
.prjctsSec .prjctInfo .prjctTitle .graphicsTag {
  background: var(--blue-50);
}
.prjctsSec .prjctInfo .prjctTitle .graphicsTag span,
.prjctsSec .prjctInfo .prjctTitle .graphicsTag i::before {
  color: var(--blue-500);
}

.prjctsSec .prjctInfo .read-more {
  margin: 0 auto 30px auto;
}
.read-more .readMorCntnt {
  overflow: hidden;
  max-height: 150px;
  transition: max-height 0.35s ease;
}
.read-more .desc {
  margin-bottom: 30px;
}
.read-more .desc h1,
.read-more .desc h2,
.read-more .desc h3,
.read-more .desc h4,
.read-more .desc h5,
.read-more .desc h6 {
  color: var(--text-800);
  margin-bottom: 10px;
  font-weight: 700;
}
.read-more .desc h1 {
  font-size: 18px;
}
.read-more .desc h2 {
  font-size: 17px;
}
.read-more .desc h3 {
  font-size: 16px;
}
.read-more .desc h4 {
  font-size: 15px;
}
.read-more .desc h5 {
  font-size: 14px;
}
.read-more .desc h6 {
  font-size: 13px;
}
.read-more .desc strong {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-800);
  margin-bottom: 10px;
  display: block;
}
.read-more .desc p {
  font-size: 14px;
  line-height: 2;
  color: var(--text-600);
}
.read-more .desc p strong {
  display: inline-block;
}
.read-more .desc p a {
  color: var(--blue-500);
}
.read-more .readMorBtn {
  color: var(--red-500);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 25px;
  background: transparent;
  border: none;
  padding: 0;
}
.read-more .readMorBtn span {
  font-weight: 500;
  font-size: 12.5px;
}
.read-more .readMorBtn i {
  font-size: 12px;
}
.read-more .readMorBtn.less i {
  transform: rotate(180deg);
}
.read-more .readMorBtn:hover {
  color: var(--red-700);
}
.prjctsSec .prjctInfo .files {
  margin: 20px 0 35px 0;
}
.prjctsSec .files .fileBox {
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 6px;
  border: 1px solid var(--text-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px 30px;
}
.prjctsSec .files .fileBox .dwnldBtn {
  color: var(--text-500);
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  padding: 0px 24px;
  border: 1px solid var(--text-100);
}
.prjctsSec .files .fileBox .dwnldBtn span {
  font-weight: 500;
  font-size: 12.5px;
}
.prjctsSec .files .fileBox .dwnldBtn i {
  font-size: 17px;
}
.prjctsSec .files .fileBox .dwnldBtn:hover {
  border-color: var(--red-500);
  color: var(--red-500);
}
.prjctsSec .files .fileBox .fileInfo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: calc(100% - 133px);
}
.prjctsSec .files .fileBox .imgFile {
  width: 35px;
  min-width: 35px;
  height: 51px;
  border-radius: 6px;
}
.prjctsSec .files .fileBox .imgFile img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
}
.prjctsSec .files .fileBox .zipFile {
  font-size: 35px;
  color: var(--blue-500);
}
.prjctsSec .files .fileBox .name {
  text-align: left;
  width: calc(100% - 47px);
  direction: ltr;
}
.prjctsSec .files .fileBox .name p {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-800);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prjctsSec .files .fileBox .name span {
  font-size: 14px;
  color: var(--text-500);
}
.prjctsSec .prjctInfo .skills {
  margin-top: 40x;
}
.prjctsSec .prjctInfo .skills strong {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-800);
  margin-bottom: 12px;
  display: block;
}
.prjctsSec .prjctInfo .prjctFoter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--text-50);
  padding-top: 32px;
  margin-top: 35px;
}
.prjctsSec .prjctInfo .prjctFoter .user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.prjctsSec .prjctInfo .prjctFoter .imgBx {
  border-radius: 50%;
  background: rgba(231, 232, 233, 1);
  width: 35px;
  height: 35px;
}
.prjctsSec .prjctInfo .prjctFoter .imgBx img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.prjctsSec .prjctInfo .prjctFoter .user p {
  color: rgba(135, 139, 142, 1);
  font-size: 12.5px;
}
.prjctsSec .prjctInfo .prjctFoter .user p a {
  color: var(--text-800);
  font-weight: 500;
  display: inline-block;
  margin-left: 5px;
}
.prjctsSec .prjctInfo .prjctFoter .user p a:hover {
  color: var(--blue-500);
}
.prjctsSec .prjctInfo .prjctFoter .left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.prjctsSec .prjctInfo .prjctFoter .sentMessag {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--red-500);
}
.prjctsSec .prjctInfo .prjctFoter .sentMessag i {
  font-size: 14px;
}
.prjctsSec .prjctInfo .prjctFoter .sentMessag span {
  font-weight: 500;
  font-size: 14px;
}
.prjctsSec .prjctInfo .prjctFoter .btn {
  font-weight: 500;
  font-size: 14px;
  width: max-content;
  height: 38px;
  border-radius: 16px;
  line-height: 1;
  padding: 0 30px;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
}
.prjctsSec .prjctInfo .prjctFoter .acceptBtn {
  color: white;
  background: var(--red-500);
}
.prjctsSec .prjctInfo .prjctFoter .rejectBtn {
  color: var(--text-800);
  border-color: var(--text-100);
}
.prjctsSec .prjctInfo .prjctFoter .sendReq {
  border: 1px solid var(--red-500);
  color: var(--red-500);
  background: white;
}
.prjctsSec .prjctInfo .prjctFoter .acceptBtn:hover {
  background: var(--red-700);
}
.prjctsSec .prjctInfo .prjctFoter .rejectBtn:hover {
  border-color: var(--red-500);
  color: var(--red-500);
}
.prjctsSec .prjctInfo .prjctFoter .sendReq:hover {
  background: var(--red-500);
  color: white;
}

.prjctsSec .suggestions .title {
  margin-bottom: 25px;
}
.prjctsSec .suggestions .title h2 {
  font-weight: 600;
  font-size: 18px;
  color: var(--text-800);
}
.prjctsSec .suggestions .suggestLst {
  margin-bottom: 40px;
}
.suggestLst .suggestCrd {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--text-100);
  margin-bottom: 12px;
}
.prjctsSec .suggestLst .suggestCrd {
  justify-content: flex-start;
}
.dashMain .suggestLst .suggestCrd {
  justify-content: space-between;
}
.suggestLst .suggestCrd:last-child {
  margin-bottom: 0;
}
.prjctsSec .suggestLst .suggestCrd:hover {
  border-color: var(--red-500);
}
.suggestLst .suggestCrd .cardRight {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.suggestLst .suggestCrd .userImgBx {
  min-width: 52px;
  width: 52px;
  height: 52px;
  background: rgba(179, 251, 209, 1);
  border-radius: 50%;
}
.suggestLst .suggestCrd .userImgBx img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.suggestLst .suggestCrd .text h3 {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
  margin-bottom: 10px;
}
.suggestLst .suggestCrd ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 30px;
  flex-wrap: wrap;
}
.suggestLst .suggestCrd ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: wrap;
  color: var(--text-500);
  line-height: 1;
}
.suggestLst .suggestCrd ul i {
  font-size: 18px;
}
.suggestLst .suggestCrd ul span {
  font-weight: 500;
  font-size: 11.25px;
  min-width: max-content;
}
.suggestLst .suggestCrd ul p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.suggestLst .suggestCrd ul small {
  font-weight: 500;
}
.suggestLst .suggestCrd .showLink {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-800);
  height: 38px;
  border-radius: 16px;
  padding: 0 15px;
  border: 1px solid var(--text-200);
  min-width: max-content;
  background: white;
}
.suggestLst .suggestCrd .showLink:hover {
  color: white;
  background: var(--red-500);
  border-color: var(--red-500);
}
.prjctsSec .suggestions .moreLink {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px auto 0 auto;
  font-size: 14px;
  text-align: center;
  width: max-content;
  height: 38px;
  border-radius: 16px;
  padding: 0 25px;
  border: 1px solid var(--red-500);
  color: var(--red-500);
}
.prjctsSec .suggestions .moreLink:hover {
  background: var(--red-500);
  color: white;
}

.prjctsSec .expertCard {
  margin-bottom: 32px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--text-100);
  display: block;
  cursor: pointer;
}
.prjctsSec .expertCard .exprtCrdHed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.expertCard .exprtCrdHed .userBox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.expertCard .exprtCrdHed .usrImg {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--text-50);
}
.expertCard .exprtCrdHed .usrImg img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.expertCard .exprtCrdHed .userBox .text h3 {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-800);
  margin-bottom: 10px;
}
.expertCard .exprtCrdHed .userBox .text div {
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  padding: 0 12px;
  background: var(--red-50);
  font-weight: 500;
  font-size: 11.25px;
  color: var(--red-500);
}
.expertCard .exprtCrdHed .creatBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-800);
  height: 43px;
  border-radius: 16px;
  border: 1px solid var(--text-200);
  padding: 0 20px;
  background: transparent;
}
.expertCard .exprtCrdHed .creatBtn span {
  font-size: 14px;
  line-height: 1;
}
.expertCard .exprtCrdHed .creatBtn i {
  font-size: 21px;
}
.expertCard .exprtCrdHed .creatBtn:hover {
  border-color: var(--blue-500);
  color: var(--blue-500);
}
.expertCard .exprtInfo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-bottom: 24px;
}
.expertCard .exprtInfo li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  line-height: 1;
}
.expertCard .exprtInfo li span {
  font-size: 16px;
}
.expertCard .exprtInfo li .starIcon {
  color: rgba(255, 183, 0, 1);
}
.expertCard .exprtInfo li .projectIcon {
  background-image: linear-gradient(90deg, #920ae6 0%, #5268f8 100%);
  background-clip: text;
  color: transparent;
}
.expertCard .exprtInfo li .comntIcon {
  color: var(--blue-500);
}
.expertCard .exprtInfo li p {
  font-weight: 500;
  font-size: 11.25px;
  color: var(--text-800);
  margin-top: 3px;
}
.expertCard .exprtInfo li i {
  font-size: 11.25px;
  color: var(--text-400);
  margin-top: 3px;
}
.expertCard .exprtDesc {
  margin: 24px 0;
}
.expertCard .exprtDesc p {
  max-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-600);
}
.expertCard .exprtSwper .swiper-slide,
.portfolioBx .exprtSwper .swiper-slide {
  width: max-content;
  border-radius: 16px;
}
.exprtSwprCrd {
  width: 217px;
  height: 162px;
  border-radius: 16px;
  padding: 1px;
  display: block;
  border: 1px solid var(--text-200);
  overflow: hidden;
}
.expertCard .exprtSwper .exprtSwprCrd,
.portfolioBx .exprtSwper .exprtSwprCrd {
  width: 217px;
  height: 162px;
}
.exprtSwprCrd img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  transition: all 0.6s;
  position: relative;
}
.exprtSwprCrd:hover {
  border-color: var(--blue-500);
}
.exprtSwper .swiper-button-next,
.exprtSwper .swiper-button-prev {
  width: 36px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.12);
}
.exprtSwper .swiper-button-next:after,
.exprtSwper .swiper-button-prev:after {
  font-size: 15px;
  color: var(--text-800);
}
.expertCard .exprtCrdFtr {
  border-top: 1px solid var(--text-50);
  padding-top: 24px;
  margin-top: 24px;
}
.prjctsSec .expertCard:hover {
  border-color: var(--blue-500);
}

/*================addPrjctSec===============*/
.addPrjctSec {
  margin: 0 0 70px 0;
}
.addPrjctSec .stepsRow {
  width: 100%;
  padding: 16px;
  background: white;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 50px;
}
.addPrjctSec .stepsRow .stepBox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  width: 78px;
}
.addPrjctSec .stepsRow .stepBox::after {
  position: absolute;
  content: "";
  top: 12px;
  height: 6px;
  width: 70px;
  border-radius: 20px;
  background: var(--blue-50);
}
.addPrjctSec .stepsRow .stepBox:last-child::after {
  display: none;
}
.addPrjctSec .stepsRow .number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-300);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.addPrjctSec .stepsRow .stepBox i {
  display: none;
  font-size: 12px;
}
.addPrjctSec .stepsRow .title {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--blue-300);
  text-align: center;
}
.addPrjctSec .stepsRow .stepBox.passed .number,
.addPrjctSec .stepsRow .stepBox.active .number {
  background: var(--blue-500);
  color: white;
}
.addPrjctSec .stepsRow .stepBox.passed .title,
.addPrjctSec .stepsRow .stepBox.active .title {
  color: var(--blue-500);
}
.addPrjctSec .stepsRow .stepBox.passed:after {
  background: var(--blue-500);
}
.addPrjctSec .stepsRow .stepBox.passed span {
  display: none;
}
.addPrjctSec .stepsRow .stepBox.passed i {
  display: block;
}

.addPrjctSec form.selPakFrm {
  width: 100%;
  max-width: 700px;
  margin: 10px auto;
}
.addPrjctSec form .frmStepBx {
  margin-bottom: 40px;
}
.addPrjctSec form .frmTtlRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 24px;
}
.addPrjctSec form .frmStepTtl h3 {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-800);
}
.addPrjctSec form .frmStepTtl p {
  font-size: 14px;
  color: var(--text-500);
}
.addPrjctSec form .selCatBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 46px;
  border-radius: 16px;
  padding: 0 16px;
  border: 1px solid var(--text-200);
  color: var(--text-400);
  font-size: 14px;
  background: white;
}
.addPrjctSec form .selCatBtn:hover {
  border-color: var(--blue-500);
}
.addPrjctSec form .frmTtlRow .tabHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 34px;
  border-radius: 16px;
  padding: 3px;
  background: var(--text-50);
}
.addMeetFrm {
  width: 100%;
  max-width: 746px;
  margin: 0 auto;
}
.addMeetFrm .sugstdSkill {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-800);
  margin-bottom: 8px;
}
.addPrjctSec form .tabHeader li {
  width: 50%;
  height: 100%;
}
.addPrjctSec form .tabHeader .tablinks {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-400);
  background: transparent;
  height: 100%;
  border-radius: 16px;
}
.addPrjctSec form .tabHeader .tablinks.active {
  background: white;
  color: var(--text-800);
  font-weight: 600;
}
.addPrjctSec form .tabHeader .tablinks:hover {
  color: var(--blue-500);
}
.addPrjctSec form .frmStepTtl span {
  color: var(--text-400);
  font-weight: 400;
}
.addPrjctSec .spcialPrjctTxt {
  width: 100%;
  max-width: 746px;
  border-radius: 16px;
  padding: 20px;
  background: #f7f7f7;
  margin: 60px auto 40px auto;
}
.addPrjctSec .spcialPrjctTxt .spcialPrjctRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.addPrjctSec .spcialPrjctRow .prjctImg {
  width: 103px;
  height: 65px;
  border-radius: 16px;
}
.addPrjctSec .spcialPrjctRow .prjctImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.addPrjctSec .spcialPrjctRow h3 {
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  color: var(--text-800);
  margin-bottom: 5px;
}
.addPrjctSec .spcialPrjctTxt strong {
  font-weight: 700;
  font-size: 18px;
  color: var(--text-800);
}
.addPrjctSec .spcialPrjctTxt p {
  font-size: 14px;
  color: var(--text-500);
  margin: 12px 0;
}
.addPrjctSec .spcialPrjctTxt .user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.addPrjctSec .spcialPrjctTxt .user .imgBx {
  width: 23px;
  height: 23px;
  border-radius: 50%;
}
.addPrjctSec .spcialPrjctTxt .user img {
  width: 23px;
  height: 23px;
  object-fit: cover;
  border-radius: 50%;
}
.addPrjctSec .spcialPrjctTxt .user span {
  font-size: 12.5px;
  color: var(--text-500);
}
.addMeetFrm .input-group {
  border-radius: 16px;
  border: 1px solid var(--text-200);
}
.addMeetFrm .input-group button {
  border-radius: 0 16px 16px 0;
  border: none;
  background: transparent;
}
.addMeetFrm .input-group button:hover {
  color: var(--blue-500);
}
.addMeetFrm .input-group input {
  border: none;
}
.addMeetFrm .addInptGrup input,
.addPrjctSec .frmStepBx .addInptGrup input {
  border-radius: 16px 0 0 16px;
}
.addMeetFrm .input-group:has(input:focus) {
  border-color: var(--blue-500);
}
.addMeetFrm .addSkilForm .skilListBox {
  position: absolute;
  top: 58px;
  width: 100%;
  max-width: 230px;
  max-height: 200px;
  border-radius: 16px;
  padding: 16px;
  background: white;
  border: 1px solid var(--text-200);
  z-index: 5;
  overflow: auto;
  display: none;
}
.addMeetFrm .addSkilForm .skilListBox li {
  color: var(--text-800);
  font-size: 14px;
  margin-bottom: 8px;
}
.addMeetFrm .inptGrupPric span {
  min-width: 51px;
  text-align: center;
  justify-content: center;
  color: var(--text-500);
  font-size: 11.25px;
  border: none;
  background: var(--text-50);
  padding: 0 7px;
}
.addMeetFrm .inptGrupPric .input-group-text select {
  padding: 0 0 0 15px;
  border: none;
  color: var(--text-500);
  text-align: right;
  font-size: 11.25px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23878B8E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-color: transparent;
  background-position: left center;
}
.addMeetFrm .filtrSel {
  width: 100%;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--text-100);
  font-size: 14px;
  color: var(--text-800);
}
.addMeetFrm .crtRadioBx {
  width: 100%;
  height: max-content;
  border-radius: 16px;
}
.addMeetFrm .crtRadioBx h4 {
  font-size: 14px;
  color: var(--text-800);
  margin-bottom: 10px;
}
.addMeetFrm .crtRadioBx .form-check {
  position: relative;
  padding: 0;
}
.addMeetFrm .crtRadioBx input {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  z-index: 2;
}
.addMeetFrm .crtRadioBx label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  position: relative;
  width: 100%;
  border-radius: 16px;
  padding: 16px 16px 16px 40px;
  border: 1px solid var(--text-200);
  font-size: 21px;
  color: white;
}
.addMeetFrm .crtRadioBx .iconBx {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 33px;
  border-radius: 8px;
  background: linear-gradient(180deg, #4969f7 0%, #738cf9 100%);
}
.addMeetFrm .crtRadioBx .textBx {
  padding-top: 5px;
}
.addMeetFrm .crtRadioBx .textBx p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
  line-height: 1;
}
.addMeetFrm .crtRadioBx .textBx span {
  font-size: 11.25px;
  color: var(--text-400);
}
.addMeetFrm .crtRadioBx input:checked ~ label {
  background: var(--blue-50);
  border-color: var(--blue-500);
}
.addMeetFrm .withdrawable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px;
}
.addMeetFrm .withdrawable span {
  font-size: 11.25px;
  color: var(--text-500);
}
.addMeetFrm .withdrawable p {
  font-weight: 500;
  font-size: 11.25px;
  color: var(--red-500);
}
.addMeetFrm .withdrawable p small {
  font-size: 9.5px;
}
.addPrjctSec .servcPricBx .number {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-50);
  width: 37px;
  min-width: 37px;
  height: 37px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--blue-500);
  margin-top: 7px;
}
.addPrjctSec .servcPricBx .deleteBtn {
  margin-top: 6px;
  background: transparent;
  width: 37px;
  min-width: 37px;
  height: 37px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--red-500);
}
.addPrjctSec .servcPricBx .deleteBtn i {
  font-size: 18px;
}
.addPrjctSec .servcPricBx .deleteBtn span {
  font-weight: 500;
  font-size: 14px;
  display: none;
}
.addPrjctSec .servcPricBx .deleteBtn:hover {
  color: var(--red-700);
}
.addPrjctSec .servcPricBx .addPayBtn {
  color: var(--red-500);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 15px;
}
.addPrjctSec .servcPricBx .addPayBtn span {
  font-weight: 500;
  font-size: 12.5px;
}
.addPrjctSec .servcPricBx .addPayBtn i {
  font-size: 16px;
}
.addPrjctSec .servcPricBx .addPayBtn:hover {
  color: var(--red-700);
}

.addPrjctSec .selPayMethd .payCheck {
  position: relative;
  margin: 0 0 10px 0;
  padding: 0;
  width: 100%;
  height: max-content;
}
.addPrjctSec .selPayMethd .payChekLbl {
  position: relative;
  border-radius: 16px;
  background: white;
  width: 100%;
}
.addPrjctSec .selPayMethd .payChekInpt {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 16px;
  z-index: 2;
  float: none;
  margin: 0;
  padding: 0;
}
.addPrjctSec .selPayMethd .payLablBx {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}
.addPrjctSec .selPayMethd .payLablBx img {
  width: 24px;
  min-width: 24px;
  height: auto;
}
.addPrjctSec .selPayMethd .payLablBx span {
  font-size: 24px;
  color: var(--text-800);
}
.addPrjctSec .selPayMethd .payLablBx .text {
  margin-top: -4px;
}
.addPrjctSec .selPayMethd .payLablBx p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
  margin-bottom: 4px;
}
.addPrjctSec .selPayMethd .payLablBx i {
  font-size: 12.5px;
  color: var(--text-500);
}
.addPrjctSec .selPayMethd .payChekInpt:checked ~ .payChekLbl {
  background: var(--text-50);
}
.addPrjctSec .selPayMethd .payChekInpt:checked ~ .payChekLbl .payLablBx span {
  color: var(--blue-500);
}

.addPrjctSec .selPayMethd .walletOptions {
  padding: 20px 0;
  display: none;
}
.addPrjctSec .selPayMethd .curncyChkLbl {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: var(--text-800);
}
.addPrjctSec .selPayMethd .curncyChkRow {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}
.addPrjctSec .selPayMethd .curencyChk {
  position: relative;
  width: 50%;
  height: max-content;
  padding: 0;
  margin: 0;
}
.addPrjctSec .selPayMethd .curencyChk input,
.addPrjctSec .selPayMethd .curencyChk label {
  width: 100%;
  margin: 0;
  left: 0;
  top: 0;
  cursor: pointer;
}
.addPrjctSec .selPayMethd .curencyChk input {
  position: absolute;
  height: 100%;
  opacity: 0;
  z-index: 2;
}
.addPrjctSec .selPayMethd .curencyChk label {
  position: relative;
  height: max-content;
  background: white;
  border: 1px solid var(--text-50);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-radius: 12px;
  padding: 24px;
}
.addPrjctSec .selPayMethd .curencyChk label i {
  font-size: 24px;
  color: var(--text-800);
}
.addPrjctSec .selPayMethd .curencyChk label p {
  font-size: 12.5px;
  color: var(--text-400);
}
.addPrjctSec .selPayMethd .curencyChk label span {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-800);
}
.addPrjctSec .selPayMethd .curencyChk input:checked ~ label {
  background: var(--blue-50);
  border-color: var(--blue-500);
}
.addPrjctSec .packsList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.addPrjctSec .packsList .form-check {
  position: relative;
  margin: 0;
  padding: 0;
  width: 33%;
  height: max-content;
  border-radius: 16px;
}
.addPrjctSec .packsList input,
.addPrjctSec .packsList label {
  width: 100%;
  margin: 0;
  left: 0;
  top: 0;
  cursor: pointer;
  border-radius: 16px;
}
.addPrjctSec .packsList input {
  position: absolute;
  padding: 0;
  opacity: 0;
  z-index: 2;
  height: 100%;
}
.addPrjctSec .packsList label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  text-align: center;
  border: 1px solid var(--text-100);
  padding: 30px 12px;
}
.addPrjctSec .packsList label span {
  font-size: 40px;
  margin: 0 auto;
}
.addPrjctSec .packsList .free span {
  color: var(--red-500);
}
.addPrjctSec .packsList .urgent span {
  color: rgba(255, 94, 22, 1);
}
.addPrjctSec .packsList .special span:before {
  color: transparent;
  background-image: linear-gradient(90deg, #920ae6 0%, #5268f8 100%);
  background-clip: text;
}
.addPrjctSec .packsList label strong {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-800);
  display: block;
  margin: 5px auto;
}
.addPrjctSec .packsList label .publication {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  color: var(--blue-500);
  margin: 5px auto;
  width: max-content;
  max-width: 100%;
}
.addPrjctSec .packsList label .publication p {
  font-weight: 500;
  font-size: 11.25px;
  line-height: 1.7;
  margin-top: -4px;
}
.addPrjctSec .packsList label .publication i {
  font-size: 10px;
}
.addPrjctSec .packsList label .price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.addPrjctSec .packsList label .price p {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-800);
}
.addPrjctSec .packsList label .price small {
  font-size: 11.25px;
  color: var(--text-400);
  line-height: 1;
}
.addPrjctSec .packsList input:checked ~ .free {
  background: var(--red-50);
  border-color: var(--red-500);
}
.addPrjctSec .packsList input:checked ~ .special {
  background-image: linear-gradient(90deg, #920ae62c 0%, #5268f82c 100%);
  border-color: #920ae6;
}
.addPrjctSec .packsList input:checked ~ .urgent {
  background: rgba(246, 146, 18, 0.2);
  border-color: rgba(255, 94, 22, 1);
}
.addPrjctSec .btnsRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 40px auto 10px auto;
}
.addPrjctSec .btnsRow .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 38px;
  min-width: 140px;
  border-radius: 16px;
  padding: 0 10px;
}
.addPrjctSec .btnsRow .btn span {
  font-weight: 500;
  font-size: 14px;
}
.addPrjctSec .btnsRow .btn i {
  font-size: 14px;
}
.addPrjctSec .btnsRow .prevBtn {
  color: var(--text-800);
  background: var(--text-50);
}
.addPrjctSec .btnsRow .prevBtn:hover {
  background: var(--blue-500);
  color: white;
}
.addPrjctSec .btnsRow .nextBtn {
  background: var(--red-500);
  color: white;
}
.addPrjctSec .btnsRow .nextBtn:hover {
  background: var(--red-700);
}

/*================sucesfulSec===============*/
.sucesfulSec {
  margin: 60px 0 100px 0;
}
.sucesfulSec .sucesfulBox {
  margin: 10px auto;
  width: 100%;
  max-width: 453px;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--text-100);
}
.sucesfulSec .iconBx {
  margin: 0 auto;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sucesfulSec .iconBx:after {
  position: absolute;
  content: "";
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  opacity: 0.35;
  border-radius: 50%;
  filter: blur(40px);
}
.sucesfulSec .iconBx.green span {
  color: rgba(16, 185, 129, 1);
}
.sucesfulSec .iconBx.green:after {
  background: rgba(16, 185, 129, 1);
}
.sucesfulSec .iconBx.red div {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--red-500);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sucesfulSec .iconBx.red span {
  font-size: 28px;
  color: white;
}
.sucesfulSec .iconBx.red:after {
  background: var(--red-500);
}
.sucesfulSec .iconBx.yellow span {
  color: var(--help-100);
}
.sucesfulSec .iconBx.yellow:after {
  background: var(--help-100);
}
.sucesfulSec .iconBx span {
  position: relative;
  z-index: 2;
  font-size: 62px;
}
.sucesfulSec .sucesfulBox .title {
  text-align: center;
  margin: 20px auto;
}
.sucesfulSec .sucesfulBox .title p {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-800);
  line-height: 1.7;
}
.sucesfulSec .sucesfulBox .title span,
.sucesfulSec .transaction span,
.sucesfulSec ul.info span {
  font-size: 12.5px;
  color: var(--text-500);
}
.sucesfulSec .chkingTime {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-50);
  width: 100%;
  max-width: 280px;
  border-radius: 50px;
  gap: 8px;
  padding: 13px;
  color: var(--blue-500);
  margin: 20px auto;
}
.sucesfulSec .chkingTime span {
  font-size: 17px;
}
.sucesfulSec .chkingTime p {
  font-size: 12.5px;
}
.sucesfulSec .helpBox {
  margin: 30px 0;
  align-items: center;
}
.sucesfulSec .helpBox span {
  margin-top: 0;
}
.sucesfulSec .transaction {
  margin: 30px auto;
  text-align: center;
}
.sucesfulSec .transaction p {
  margin-top: 8px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-800);
  line-height: 1;
}
.sucesfulSec .transaction small {
  font-size: 11.25px;
  color: var(--text-500);
}
.sucesfulSec ul.info {
  margin: 30px auto;
  background: var(--text-50);
  width: 100%;
  border-radius: 20px;
  padding: 20px;
}
.sucesfulSec ul.info li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.sucesfulSec ul.info li:last-child {
  margin-bottom: 0;
}
.sucesfulSec ul.info p {
  font-size: 14px;
  color: var(--text-800);
}
.sucesfulSec .sucesfulBox .btn {
  width: 100%;
  max-width: 287px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 0 10px;
  margin: 10px auto;
  font-size: 14px;
  font-weight: 700;
}
.sucesfulSec .sucesfulBox .projctLink {
  background: var(--red-500);
  color: white;
}
.sucesfulSec .sucesfulBox .projctLink:hover {
  background: var(--red-700);
}
.sucesfulSec .sucesfulBox .backHomLnk {
  background: var(--text-50);
  color: var(--text-800);
  margin-bottom: 0px;
}
.sucesfulSec .sucesfulBox .backHomLnk:hover {
  background: var(--text-200);
}

/*================profilSec===============*/
.profilSec.dashSec {
  margin-top: 0;
}
.dashSec .proflSecTop {
  background: white;
  padding-top: 15px;
}
.dashSec .proflSecTop .topBxLinks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.dashSec .proflSecTop .topBxLinks .btn {
  color: var(--text-800);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-200);
  height: 42px;
  padding: 0 25px;
  border-radius: 16px;
}
.dashSec .proflSecTop .topBxLinks .btn i {
  font-size: 20px;
}
.dashSec .proflSecTop .topBxLinks .btn span {
  font-weight: 500;
  font-size: 14px;
}
.dashSec .proflSecTop .topBxLinks .btn:hover {
  background: var(--blue-500);
  color: white;
  border-color: var(--blue-500);
}
.dashSec .proflSecTop .topBox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  margin-top: -30px;
  margin-bottom: 20px;
}
.proflSecTop .topBox .userImg {
  width: 66px;
  min-width: 66px;
  height: 66px;
  border-radius: 50%;
}
.proflSecTop .topBox .userImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.proflSecTop .topBox .userImg span {
  width: 10px;
  height: 10px;
  position: absolute;
  left: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 1.5px solid white;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
}
.proflSecTop .topBox .userImg .green {
  background: rgba(38, 192, 115, 1);
}
.proflSecTop .topBox .editImgBtn {
  right: -3px;
  bottom: 0;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.proflSecTop .topBox .editUsrImg {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.proflSecTop .topBox .editUsrImg label,
.proflSecTop .topBox .editUsrImg input {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: pointer;
}
.proflSecTop .topBox .editUsrImg label {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.15);
  color: var(--blue-500);
  font-size: 16px;
  margin-bottom: 0;
}
.proflSecTop .topBox .editUsrImg input {
  z-index: 2;
  opacity: 0;
}
.proflSecTop .topBox .editUsrImg:hover label {
  background: var(--blue-500);
  color: white;
}

.proflSecTop .topBox .name {
  margin-bottom: 7px;
}
.proflSecTop .topBox .name h1 {
  font-weight: 700;
  font-size: 18px;
  color: var(--text-800);
  margin-bottom: 4px;
}
.proflSecTop .topBox .name p {
  font-size: 14px;
  color: var(--text-500);
}
.proflSecTop .topBox .info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.proflSecTop .topBox .info ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}
.proflSecTop .topBox .info li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.proflSecTop .topBox .info li span {
  font-size: 14px;
}
.proflSecTop .topBox .info li .blue {
  color: var(--blue-500);
}
.proflSecTop .topBox .info li .yellow {
  color: rgba(255, 183, 0, 1);
}
.proflSecTop .topBox .info li p {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-800);
}
.proflSecTop .topBox .info li i {
  font-size: 12.5px;
  color: var(--text-500);
}
.proflSecTop .topBox .info .status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 12px;
  border-radius: 50px;
}
.proflSecTop .topBox .info .status p {
  font-weight: 600;
  font-size: 12.5px;
  line-height: 0;
}
.proflSecTop .topBox .info .status span {
  border: 1px solid white;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.proflSecTop .topBox .info .offline {
  background: var(--red-50);
}
.proflSecTop .topBox .info .online {
  background: rgba(227, 255, 241, 1);
}
.proflSecTop .topBox .info .offline p {
  color: var(--red-500);
}
.proflSecTop .topBox .info .online p {
  color: rgba(38, 192, 115, 1);
}
.proflSecTop .topBox .info .offline span {
  background: var(--red-500);
}
.proflSecTop .topBox .info .online span {
  background: rgba(38, 192, 115, 1);
}

.proflSecTop .workCard {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.proflSecTop .workCard .right {
  min-width: 60%;
}
.proflSecTop .workInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 20px 0;
}
.proflSecTop .workInfo .workUser {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.proflSecTop .workInfo .wrkUsrImg {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--text-100);
}
.proflSecTop .workInfo .wrkUsrImg img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.proflSecTop .workInfo .workUser p {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-800);
}
.proflSecTop .workInfo .workUser span {
  font-size: 12.5px;
  color: var(--text-400);
}
.proflSecTop .workInfo .btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border: 1px solid var(--text-200);
  height: 38px;
  padding: 0 12px;
  border-radius: 16px;
}
.proflSecTop .workInfo .btn i {
  color: var(--text-600);
  font-size: 18px;
}
.proflSecTop .workInfo .btn span {
  font-size: 14px;
  color: var(--text-800);
}
.proflSecTop .workInfo .btn:hover {
  border-color: var(--red-500);
  color: var(--red-500);
}
.dashSec .proflSecRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 30px 0 50px 0;
  position: relative;
}
.profilSec .spyTabBox .spyTabHed {
  position: sticky;
  top: 66px;
  width: 100%;
  height: 52px;
  background: white;
  z-index: 10;
  filter: drop-shadow(0px 5px 2px #2c2c2c0e);
}
.spyTabBox .spyTabHed .spyTabMnu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}
.spyTabBox .spyTabHed .spyTabLnk {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-bottom: 1px solid white;
  min-width: max-content;
  height: 52px;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-600);
}
.spyTabBox .spyTabLnk.active {
  color: var(--red-500);
  border-color: var(--red-500);
}
.profilSec.dashSec .dashBxHed h1 {
  font-size: 20px;
}
.dashSec .proflSecRow .proflMain {
  width: calc(100% - 440px);
}
.dashSec .proflSecRow .proflMain.proflMain1 {
  width: calc(100% - 400px);
}
.profilSec .servicesBx .swiper .swiper-pagination {
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
  bottom: 130px;
  background: white;
  border-radius: 35px;
  height: 26px;
  padding: 0 18px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-500);
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.profilSec .servicesBx .swiper .swiper-pagination-current {
  color: var(--text-800);
}
.profilSec .servicesBx .swiper-button-next,
.profilSec .servicesBx .swiper-button-prev {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.12);
}
.profilSec .servicesBx .swiper-button-next:after,
.profilSec .servicesBx .swiper-button-prev:after {
  font-size: 15px;
  color: var(--text-800);
}
.profilSec .servicesBx .swiper-slide {
  width: 100%;
}
.profilSec .servicesBx .servicCrd {
  width: 100%;
}
.profilSec .servicCrd .cardImg {
  width: 100%;
  height: 450px;
  border-radius: 16px;
  margin-bottom: 35px;
  position: relative;
}
.profilSec .servicCrd .cardImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.profilSec .servicCrd .cardImg .cardImgCvr {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
}
.profilSec .servicCrd .cardImgCvr a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-800);
  padding: 020px;
  height: 44px;
  border-radius: 35px;
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.12);
  background: white;
}
.profilSec .servicCrd .cardImgCvr a:hover {
  background: var(--blue-500);
  color: white;
}
.profilSec .servicCrd .cardText h2 {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
  margin-bottom: 10px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profilSec .servicCrd .cardText ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.profilSec .servicCrd .cardText p {
  font-size: 14px;
  color: var(--text-600);
}
.profilSec .servicCrd .cardText hr {
  width: 1px;
  height: 12px;
  background: var(--text-200);
}
.profilSec .requestsBx .reqCard {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--text-100);
  margin-bottom: 8px;
}
.profilSec .requestsBx .reqCard:last-child {
  margin-bottom: 0;
}
.profilSec .requestsBx .reqCard h3 {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
}
.profilSec .requestsBx .reqCard .reqText p {
  font-size: 12.5px;
  color: var(--text-500);
  margin-bottom: 10px;
}
.profilSec .requestsBx .reqCard .reqText strong {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-800);
}
.profilSec .requestsBx .reqCard .reqText .time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--text-500);
}
.profilSec .requestsBx .reqCard .reqText span {
  font-size: 12.5px;
}
.profilSec .requestsBx .reqCard .reqText i {
  font-size: 18px;
}
.profilSec .requestsBx .reqCard .reqLeftBtns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.profilSec .requestsBx .reqCard .reqLeftBtns .btn {
  padding: 0 12px;
  font-weight: 500;
  font-size: 12.5px;
  min-width: 94px;
  height: 34px;
  border-radius: 16px;
  padding: 0 15px;
}
.profilSec .requestsBx .reqCard .confirmBtn {
  background: var(--red-500);
  color: white;
}
.profilSec .requestsBx .reqCard .confirmBtn:hover {
  background: var(--red-700);
}
.profilSec .requestsBx .reqCard .cancelBtn {
  color: var(--text-800);
  background: white;
  border: 1px solid var(--text-100);
}
.profilSec .requestsBx .reqCard .cancelBtn:hover {
  background: var(--text-200);
}
.profilSec .requestsBx .reqCard .reqStatus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  min-height: 31px;
  border-radius: 16px;
  font-weight: 500;
  font-size: 11px;
}
.profilSec .requestsBx .reqStatus span {
  font-weight: 500;
  font-size: 11px;
}
.profilSec .requestsBx .reqStatus i {
  font-size: 14px;
}
.profilSec .requestsBx .reqStatus.red {
  color: var(--red-500);
}
.profilSec .requestsBx .reqStatus.blue {
  color: var(--blue-500);
}
.profilSec .requestsBx .reqStatus.green {
  padding: 5px 20px;
  background: #1eb04c26;
  border: 1px solid #1eb04c1f;
  color: #26c073;
}
.profilSec .workFiles .wrkFilsHed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px 20px;
}
.profilSec .wrkFilsHed .tabHeader {
  width: 100%;
  max-width: 280px;
  margin-bottom: 0;
}
.profilSec .wrkFilsHed .serchBox {
  width: 100%;
  max-width: 270px;
  height: 38px;
  border-radius: 16px;
  border: 1px solid var(--text-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profilSec .wrkFilsHed .serchBox input {
  border: 0;
}
.profilSec .wrkFilsHed .serchBox:has(input:focus) {
  border-color: var(--blue-500);
}
.profilSec .wrkFilsHed .serchBox button {
  border-radius: 16px 0 0 16px;
  font-size: 16px;
  padding: 4px 15px 0 15px;
  height: 100%;
}
.profilSec .wrkFilsHed .serchBox button:hover {
  color: var(--blue-500);
}
.profilSec .workFiles .wrkFileLst {
  margin-top: 25px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.profilSec .workFiles .wrkFileCrd {
  width: 49%;
  padding: 16px;
  border: 1px solid var(--text-100);
  height: max-content;
  border-radius: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.profilSec .workFiles .wrkFileCrd .downloadBtn {
  height: 37px;
  border-radius: 12px;
  padding: 0 20px;
  font-size: 17px;
  color: var(--text-500);
  border: 1px solid var(--text-100);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.profilSec .workFiles .wrkFileCrd .downloadBtn:hover {
  border-color: var(--red-500);
  color: var(--red-500);
}
.profilSec .workFiles .wrkFileCrd .fileInfo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 80px);
}
.profilSec .workFiles .wrkFileCrd .fileInfo .name {
  text-align: left;
  direction: ltr;
  font-size: 14px;
}
.profilSec .workFiles .wrkFileCrd .fileInfo .name p {
  color: var(--text-800);
  font-weight: 600;
  line-height: 2;
}
.profilSec .workFiles .wrkFileCrd .fileInfo .name i {
  color: var(--text-500);
  display: block;
}
.profilSec .workFiles .wrkFileCrd .fileThumb {
  width: 35px;
  height: 36px;
  font-size: 35px;
  color: var(--blue-500);
}
.profilSec .workFiles .wrkFileCrd img {
  width: 35px;
  height: 51px;
  border-radius: 6px;
  object-fit: cover;
  object-position: center;
  background-color: var(--Gray-200);
}
.profilSec .portfolioBx .exprtSwprCrd {
  position: relative;
}
.profilSec .portfolioBx .exCardCovr {
  position: absolute;
  left: 0;
  bottom: -120px;
  width: 100%;
  height: 104px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
  padding: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.profilSec .portfolioBx .exCardCovr h2 {
  font-weight: 600;
  font-size: 14px;
  color: white;
  line-height: 1.3;
  height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profilSec .portfolioBx .exprtCrdMnu {
  position: absolute;
  left: 8px;
  top: -38px;
  transition: all 0.6s;
}
.profilSec .portfolioBx .exprtCrdMnu .opnKbabMnu {
  background: white;
  box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.15);
  padding: 7px;
  border-radius: 50%;
  font-size: 16px;
}
.profilSec .exprtCrdMnu .dashKbabMnu .kbabMnuBx {
  min-width: max-content;
  padding-top: 5px;
  padding-bottom: 5px;
}
.profilSec .exprtCrdMnu .dashKbabMnu .kbabMnuBx a {
  height: 32px;
}
.profilSec .portfolioBx .exprtSwprCrd:hover .exCardCovr {
  bottom: 0;
}
.profilSec .portfolioBx .exprtSwprCrd:hover .exprtCrdMnu {
  top: 10px;
}
.profilSec .projectsBx .prjctsLst,
.profilSec .projectsBx .servicesLst {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.profilSec .projectsBx .prjctsLst {
  gap: 10px;
}
.profilSec .projectsBx .servicesLst {
  gap: 18px;
}
.profilSec .projectsBx .servicesLst .serviceCrd {
  width: 310px;
}
.profilSec .waltCrdList {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.profilSec .waltCrdList .walltCard {
  background: white;
  width: 32.3%;
  border-radius: 16px;
  padding: 24px 32px;
}
.profilSec .walltCard .cardHed {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 30px;
}
.profilSec .walltCard .bankName h2 {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-800);
  margin-bottom: 8px;
}
.profilSec .walltCard .bankName p {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-500);
}
.profilSec .walltCard .buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.profilSec .walltCard .buttons .btn {
  background: transparent;
  padding: 0;
  font-size: 18px;
}
.profilSec .walltCard .buttons .star {
  color: var(--text-400);
}
.profilSec .walltCard .buttons .star .icon-star-fruit1 {
  color: #f6a410;
}
.profilSec .walltCard .buttons .star:hover {
  color: var(--text-600);
}
.profilSec .walltCard .buttons .edit {
  color: var(--blue-500);
}
.profilSec .walltCard .buttons .edit:hover {
  color: var(--blue-700);
}
.profilSec .walltCard .buttons .remove {
  color: var(--red-500);
}
.profilSec .walltCard .buttons .remove:hover {
  color: var(--red-700);
}
.profilSec .walltCard .cardNumber {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  font-weight: 500;
  font-size: 24px;
  color: var(--text-800);
  margin-bottom: 13px;
}
.profilSec .walltCard .cardFoter {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profilSec .walltCard .cardFoter span {
  font-weight: 500;
  font-size: 11.25px;
  color: var(--text-500);
}
.profilSec .walltCard .cardFoter p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.profilSec .projectsBx .prjctCard {
  width: 49%;
  border: 1px solid var(--text-200);
  border-radius: 25px;
  padding: 24px;
}
.profilSec .projectsBx .prjctCard h2 {
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-800);
}
.workCard h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-800);
}
.profilSec .projectsBx .prjctCard ul,
.workCard ul {
  display: flex;
  align-items: center;
}
.profilSec .projectsBx .prjctCard ul {
  justify-content: flex-start;
  border-top: 1px solid var(--text-50);
  padding-top: 15px;
  margin-top: 15px;
}
.profilSec .tabBox .prjctsLst .prjctCard ul {
  gap: 20px 30%;
}
.profilSec .spyTabBox .projectsBx .prjctCard ul {
  gap: 20px 30px;
}
.workCard ul {
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.profilSec .projectsBx .prjctCard li,
.workCard ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.profilSec .projectsBx .prjctCard li i,
.workCard li i {
  font-size: 20px;
  color: var(--text-300);
}
.profilSec .projectsBx .prjctCard li span,
.workCard li span {
  font-weight: 500;
  font-size: 11.25px;
  color: var(--text-400);
}
.profilSec .projectsBx .prjctCard li p,
.workCard li p {
  font-size: 12.5px;
  color: var(--text-800);
}
.profilSec .projectsBx .prjctCard li small,
.workCard li small {
  font-size: 11px;
  color: var(--text-500);
}

.profilSec .projectsBx.projectsPg {
  margin-top: 40px;
}
.backLink {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 35px;
  color: var(--red-500);
}
.backLink span {
  font-weight: 600;
  font-size: 12.5px;
}
.backLink i {
  font-size: 21px;
}
.backLink:hover {
  color: var(--red-700);
}
.profilSec .projectsBx.projectsPg .prjctCard {
  background: white;
  border: none;
}

.profilSec .aboutMeBx .myEducation {
  list-style: disc;
}
.profilSec .aboutMeBx .myEducation li {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 2;
  color: var(--text-600);
}
.profilSec .workHistry .workBx {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 15px;
}
.profilSec .workHistry .iconBox {
  min-width: 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-500);
  font-size: 24px;
}
.profilSec .workHistry .workBx h3 {
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  color: var(--text-800);
}
.profilSec .workHistry .workBx strong {
  font-weight: 500;
  font-size: 12.5px;
  line-height: 2;
  color: var(--text-500);
}
.profilSec .workHistry .workBx p {
  font-size: 12.5px;
  line-height: 2;
  color: var(--text-500);
}
.profilSec .workHistry .workBx .workInfo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 30px;
}
.profilSec .workHistry .workBx .workInfo .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-800);
  padding: 0 18px;
  height: 33px;
  border-radius: 12px;
  border: 1px solid var(--text-200);
}
.profilSec .workHistry .workBx .workInfo .btn span {
  font-weight: 500;
  font-size: 11.25px;
}
.profilSec .workHistry .workBx .workInfo .btn i {
  font-size: 18px;
}
.profilSec .workHistry .workBx .workInfo .btn:hover {
  background: var(--text-800);
  color: white;
}
.profilSec .commentsBx {
  margin: 36px 0;
}
.profilSec .commentsBx .cmntBox {
  background: white;
  margin-bottom: 20px;
}
.dashSec .proflSecRow .proflSide {
  width: 420px;
}
.dashSec .proflSecRow .proflSide.proflSide1 {
  width: 380px;
}
.dashSec .proflSide .proflSidBx {
  width: 100%;
  border-radius: 16px;
  padding: 24px;
  background: white;
  margin-bottom: 15px;
}
.dashSec .proflSide .timeLine .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.dashSec .proflSide .timeLine .title h2 {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-800);
}
.dashSec .proflSide .dateTimeBx li {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 15px;
}
.dashSec .proflSide .dateTimeBx li .right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.dashSec .proflSide .dateTimeBx .right i {
  font-size: 20px;
  color: var(--text-300);
}
.dashSec .proflSide .dateTimeBx .right p {
  font-size: 12.5px;
  color: var(--text-400);
}
.dashSec .proflSide .dateTimeBx .right strong {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.dashSec .proflSide .dateTimeBx .right small {
  font-size: 11px;
  color: var(--text-400);
}

.dashSec .proflSide .dateTimeBx button {
  padding: 0;
  background: transparent;
  color: var(--red-500);
  font-size: 15px;
}
.dashSec .proflSide .dateTimeBx button:hover {
  color: var(--red-700);
}
.dashSec .proflSide .timeLine .employer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 5px;
  padding: 12px 0;
  border-top: 1px solid var(--text-50);
  border-bottom: 1px solid var(--text-50);
}
.dashSec .proflSide .timeLine .employer .imgBox {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--text-100);
}
.dashSec .proflSide .timeLine .employer img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.dashSec .proflSide .timeLine .employer p {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-800);
}
.dashSec .proflSide .timeLine .employer span {
  font-size: 12.5px;
  color: var(--text-500);
}
.dashSec .proflSide .timeLine .completionBtn {
  font-size: 14px;
  color: var(--text-800);
  width: 100%;
  height: 38px;
  border-radius: 16px;
  border: 1px solid var(--text-200);
  padding: 10px;
  margin-top: 30px;
  line-height: 1;
}
.dashSec .proflSide .timeLine .completionBtn:hover {
  color: var(--blue-500);
  border-color: var(--blue-500);
}
/* Completion button states: once the viewer has confirmed the end but the
   counterpart has not, the button turns into a red "waiting" badge; once both
   sides have confirmed it turns green. Both disabled states keep the same
   rounded shape as the active button. */
.dashSec .proflSide .timeLine .completionBtn.is-awaiting,
.dashSec .proflSide .timeLine .completionBtn.is-completed {
  cursor: default;
}
.dashSec .proflSide .timeLine .completionBtn.is-awaiting {
  color: var(--red-500);
  background: var(--red-50);
  border-color: var(--red-100);
}
.dashSec .proflSide .timeLine .completionBtn.is-awaiting:hover {
  color: var(--red-500);
  border-color: var(--red-100);
}
.dashSec .proflSide .timeLine .completionBtn.is-completed {
  color: #26c073;
  background: rgba(30, 176, 76, 0.15);
  border-color: rgba(30, 176, 76, 0.12);
}
.dashSec .proflSide .timeLine .completionBtn.is-completed:hover {
  color: #26c073;
  border-color: rgba(30, 176, 76, 0.12);
}
.dashSec .proflSide .timLinePrgrs {
  margin-top: 30px;
}
.dashSec .proflSide .timLinePrgrs .progressTxt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
}
.dashSec .proflSide .timLinePrgrs .progressTxt {
  font-size: 12.5px;
  color: var(--text-500);
}
.dashSec .proflSide .timLinePrgrs .progressTxt strong {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-800);
}
.dashSec .proflSide .timeLine .progressLine {
  width: 100%;
  height: 6px;
  border-radius: 20px;
  background: var(--blue-50);
}
.dashSec .proflSide .timeLine .progressLine span {
  position: absolute;
  top: 0;
  border-radius: 20px;
  width: 25%;
  height: 100%;
  background: var(--red-500);
}
.dashSec .proflSide .disptRsltion h4 {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-800);
  margin-bottom: 12px;
}
.dashSec .proflSide .disptRsltion p {
  font-size: 12.5px;
  color: var(--text-500);
}
.dashSec .proflSide .disptRsltion button {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--text-200);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--text-800);
  border-radius: 16px;
  background: transparent;
  margin-top: 12px;
}
.dashSec .proflSide .disptRsltion button span {
  font-size: 14px;
}
.dashSec .proflSide .disptRsltion button i {
  font-size: 20px;
}
.dashSec .proflSide .disptRsltion button:hover {
  border-color: var(--blue-500);
  color: var(--blue-500);
}
.dashSec .proflSide .sideContact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.dashSec .proflSide .sideContact .sidCntctBx {
  width: 50%;
  flex: 48%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 42px;
  border-radius: 16px;
  padding: 0 16px;
  border: 1px solid var(--text-200);
}
.dashSec .proflSide .sideContact .sidCntctBx:last-child {
  width: 100%;
}
.dashSec .proflSide .sideContact .sidCntctBx div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  color: var(--text-800);
}
.dashSec .proflSide .sideContact .sidCntctBx span {
  font-size: 20px;
}
.dashSec .proflSide .sideContact .sidCntctBx p {
  font-weight: 500;
  font-size: 12.5px;
}
.dashSec .proflSide .sideContact .sidCntctBx i {
  font-size: 14px;
  color: var(--text-400);
}
.dashSec .proflSide .sideContact .sidCntctBx:hover {
  border-color: var(--blue-500);
}
.dashSec .proflSide .sidCntctBx .btn {
  color: var(--blue-500);
  background: transparent;
  font-size: 17px;
  padding: 0;
  line-height: 1;
}
.dashSec .proflSide .sidCntctBx .btn:hover {
  color: var(--red-500);
}
.dashSec .proflSide .succesPrjct {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--text-100);
  padding: 16px 20px;
}
.dashSec .proflSide .succesPrjct li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
}
.dashSec .proflSide .succesPrjct li:last-child {
  margin-bottom: 0;
}
.dashSec .proflSide .succesPrjct h3 {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.dashSec .proflSide .succesPrjct p {
  font-size: 12.5px;
  color: var(--text-800);
}
.dashSec .proflSide .succesPrjct div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.dashSec .proflSide .succesPrjct i {
  font-size: 12.5px;
  color: var(--text-500);
}
.dashSec .proflSide .succesPrjct strong {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-800);
}
.dashSec .proflSide .succesPrjct span {
  font-size: 13px;
  color: rgba(255, 183, 0, 1);
}
.dashSec .proflSide .prjctTime {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}
.dashSec .proflSide .prjctTime li {
  width: 50%;
  border-radius: 16px;
  border: 1px solid var(--text-100);
  padding: 16px 20px;
}
.dashSec .proflSide .prjctTime span {
  font-size: 14px;
  color: var(--text-400);
  display: block;
  margin-bottom: 13px;
}
.dashSec .proflSide .prjctTime p {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-800);
}
.dashSec .proflSide .prjctTime small {
  font-size: 12.5px;
  color: var(--text-500);
}
.dashSec .proflSide .prjctBudget {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--text-100);
  padding: 16px 20px;
  margin-top: 22px;
}
.dashSec .proflSide .prjctBudget li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}
.dashSec .proflSide .prjctBudget li:last-child {
  margin-bottom: 0;
}
.dashSec .proflSide .prjctBudget h3 {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.dashSec .proflSide .prjctBudget span {
  font-size: 12.5px;
  color: var(--text-500);
}
.dashSec .proflSide .prjctBudget div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.dashSec .proflSide .prjctBudget p {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-800);
}
.dashSec .proflSide .prjctBudget small {
  font-size: 12.5px;
  color: var(--text-500);
}
.dashSec .proflSide .meetCalendr .day {
  height: 60px;
  padding: 8px 10px;
}
.dashSec .proflSide .meetCalendr .minCircle {
  display: none;
}
.dashSec .proflSide .meetCalendr .calndrWeeks {
  margin-bottom: 0;
}

/*================meetCalendr===============*/
.meetCalendr {
  width: 100%;
  margin: auto;
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 5px 20px #0001;
}
.meetCalendr .calendrHder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.meetCalendr .calendrHder .monthRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 228px;
  height: 36px;
  padding: 3px;
  border-radius: 16px;
  background: var(--text-50);
  text-align: center;
}
.meetCalendr .calendrHder h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-800);
}
.meetCalendr .calendrHder .calendrTitl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-800);
}
.meetCalendr .calendrHder button {
  font-size: 14px;
  color: var(--text-300);
  border: none;
  background: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.meetCalendr .calendrHder button:hover {
  color: var(--red-500);
}
.meetCalendr .calndrWeeks {
  border-radius: 14px;
  border: 1px solid var(--red-50);
  padding: 12px;
  width: 100%;
  margin-bottom: 20px;
}
.meetCalendr .week,
.meetCalendr .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.meetCalendr .week {
  margin-bottom: 16px;
}
.meetCalendr .week div {
  text-align: center;
  color: var(--text-300);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}
.meetCalendr .day {
  height: 80px;
  background: #fff;
  border: 1px solid var(--text-100);
  border-radius: 18px;
  padding: 14px;
  position: relative;
  cursor: pointer;
  transition: 0.25s;
  overflow: hidden;
}
.meetCalendr .day:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border-color: var(--blue-500);
}
.meetCalendr .day.empty {
  background: #fafafa;
}
.meetCalendr .num {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--text-800);
}
.meetCalendr .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  position: absolute;
  bottom: 11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-50);
  border: 1px solid var(--text-100);
  height: 23px;
  padding: 0 8px;
  font-size: 11.25px;
  font-weight: 600;
  text-align: center;
  color: var(--text-500);
  line-height: 1;
}
.meetCalendr .line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px;
  background: var(--text-100);
  border-radius: 0 0 18px 18px;
}
.meetCalendr .minCircle {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-200);
}
.meetCalendr .has-event .minCircle,
.meetCalendr .has-event .line {
  background: #10b981;
}
.meetCalendr .has-event::after {
  position: absolute;
  content: "";
  left: 8px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #10b981;
  filter: blur(20px);
}
.meetCalendr .day.holiday {
  cursor: default;
}
.meetCalendr .day.holiday .num {
  opacity: 25%;
}
.meetCalendr .g-date {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  color: #999;
}
.meetCalendr .calendrBtns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.meetCalendr .calendrBtns .togleCalndr,
.meetCalendr .calendrBtns .wrkSchedule {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--red-500);
}
.meetCalendr .calendrBtns .togleCalndr span,
.meetCalendr .calendrBtns .wrkSchedule span {
  font-size: 12.5px;
  font-weight: 500;
}
.meetCalendr .calendrBtns .togleCalndr i,
.meetCalendr .calendrBtns .wrkSchedule i {
  font-size: 18px;
}
.meetCalendr .calendrBtns .togleCalndr {
  justify-content: flex-start;
  border: none;
  padding: 0;
}
.meetCalendr .calendrBtns .wrkSchedule {
  justify-content: center;
  height: 38px;
  padding: 0 20px;
  background: var(--red-50);
  border-radius: 16px;
}
.meetCalendr .calendrBtns .wrkSchedule:hover,
.meetCalendr .calendrBtns .togleCalndr:hover {
  color: var(--red-700);
}

.reviewModal .offrInfoRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 25px;
}
.reviewModal .offrInfoRow li {
  width: 50%;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid var(--text-100);
}
.reviewModal .offrInfoRow span {
  font-size: 14px;
  color: var(--text-400);
}
.reviewModal .offrInfoRow p {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-800);
}
.reviewModal .offrInfoRow p small {
  font-size: 11.25px;
  color: var(--text-500);
}
.reviewModal .reviwMdlPay {
  margin-bottom: 25px;
}
.reviewModal .reviwMdlPay h4,
.reviewModal .reviwMdlTxt h4 {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
  margin-bottom: 12px;
}
.reviewModal .reviwMdlTxt p {
  font-size: 14px;
  line-height: 2;
  color: var(--text-600);
}
.reviewModal .reviwMdlPay .payStep {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid var(--text-100);
  margin-bottom: 8px;
}
.reviewModal .payStep .number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue-50);
  font-weight: 700;
  font-size: 14px;
  color: var(--blue-500);
}
.reviewModal .payStep .text h3 {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.reviewModal .payStep .text p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.reviewModal .payStep .text small {
  font-size: 12.5px;
  color: var(--text-500);
}
.reviewModal .expertRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid var(--text-100);
}
.reviewModal .expertRow .userImg {
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 50%;
}
.reviewModal .expertRow .userImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.reviewModal .expertRow .name {
  margin-bottom: 7px;
}
.reviewModal .expertRow .name h1 {
  font-weight: 700;
  font-size: 18px;
  color: var(--text-800);
  margin-bottom: 4px;
}
.reviewModal .expertRow .info {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.reviewModal .expertRow .info ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.reviewModal .expertRow .info li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.reviewModal .expertRow .info li span {
  font-size: 14px;
}
.reviewModal .expertRow .info li .blue {
  color: var(--blue-500);
}
.reviewModal .expertRow .info li .yellow {
  color: rgba(255, 183, 0, 1);
}
.reviewModal .expertRow .info li p {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-800);
}
.reviewModal .expertRow .info li i {
  font-size: 12.5px;
  color: var(--text-500);
}
.consultMdl .modal-content {
  padding: 0 25px;
  border-radius: 16px;
}
.meetingMdl .modal-content {
  padding: 20px;
  border-radius: 16px;
}
.meetingMdl .modal-header {
  padding: 0 0 15px 0;
  border-color: var(--text-100);
}
.meetingMdl .modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-800);
}
.meetingMdl .modal-header span {
  font-size: 22px;
  color: var(--text-800);
}
.meetingMdl .modal-header .btn-close {
  padding: 0;
  color: var(--text-300);
}
.meetingMdl .emptyList {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-300);
  max-width: 160px;
  min-height: 147px;
  text-align: center;
  margin: 0 auto;
}
.meetingMdl .emptyList span {
  font-size: 30px;
}
.meetingMdl .emptyList p {
  font-size: 12.5px;
  font-weight: 500;
}
.meetingMdl .emptyList p.emptyListHint {
  color: var(--red-500);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  margin-top: 4px;
}
.meetingMdl .meetMdlFtr .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 38px;
  border-radius: 16px;
}
.meetingMdl .mdlAddBtn {
  background: var(--blue-500);
  color: white;
  border: none;
}
.meetingMdl .meetMdlFtr .btn span {
  font-size: 12.5px;
  font-weight: 600;
}
.meetingMdl .meetMdlFtr .btn i {
  font-size: 20px;
}
.meetingMdl .mdlAddBtn:hover {
  background: var(--blue-700);
}
/* A day without a schedule record cannot get a meeting: the button only
   looks disabled but stays clickable so it can explain why via flasher. */
.meetingMdl .mdlAddBtn.is-disabled {
  background: var(--text-200);
  color: var(--text-600);
  cursor: not-allowed;
}
.meetingMdl .mdlAddBtn.is-disabled:hover {
  background: var(--text-200);
  color: var(--text-600);
}
.meetingMdl .mdlMnagBtn {
  border: 1px solid var(--text-200);
  color: var(--text-800);
}
.meetingMdl .mdlMnagBtn:hover {
  border-color: var(--blue-500);
  color: var(--blue-500);
}
.meetingMdl .mdlEvntLst .mdlEevent {
  width: 100%;
  margin-bottom: 6px;
  height: 36px;
  border-radius: 12px;
  background: #f7f7f7;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 30px;
}
.meetingMdl .mdlEevent .text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  color: var(--blue-500);
  font-size: 14px;
  font-weight: 600;
}
.meetingMdl .mdlEevent .eventActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.meetingMdl .eventActions .btn {
  color: var(--text-400);
  font-size: 16px;
  padding: 0;
  line-height: 1;
}
.meetingMdl .eventActions .btn:hover {
  color: var(--blue-500);
}
.meetingMdl .modal-footer {
  padding: 20px 0 0 0;
  flex-wrap: nowrap;
  gap: 5px;
  border: none;
}
.meetingMdl .modal-footer .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  width: 50%;
  height: 38px;
  border-radius: 16px;
  border: 1px solid;
  font-size: 12.5px;
  font-weight: 500;
}
.meetingMdl .modal-footer .cancelBtn,
.meetingMdl .modal-footer .saveBtn {
  border: none;
  height: 46px;
}
.meetingMdl .modal-footer .cancelBtn {
  background: var(--text-50);
  color: var(--text-800);
  font-weight: 500;
}
.meetingMdl .modal-footer .cancelBtn:hover {
  background: var(--text-200);
}
.meetingMdl .modal-footer .saveBtn {
  background: var(--red-500);
  font-weight: 700;
  color: white;
}
.meetingMdl .modal-footer .saveBtn:hover {
  background: var(--red-700);
}
.meetingMdl .modal-footer .editBtn {
  border-color: var(--blue-500);
  color: var(--blue-500);
}
.meetingMdl .modal-footer .deleteBtn {
  border-color: var(--red-500);
  color: var(--red-500);
}
.meetingMdl .modal-footer .btn i {
  font-size: 16px;
}
.meetingMdl .modal-footer .btn span {
  font-size: 12.5px;
  font-weight: 500;
}
.meetingMdl .modal-footer .editBtn:hover {
  background: var(--blue-500);
  color: white;
}
.meetingMdl .modal-footer .deleteBtn:hover {
  background: var(--red-500);
  color: white;
}
.meetingMdl .meetInfo {
  border-radius: 12px;
  padding: 10px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}
.meetingMdl .meetInfo .infoIcon {
  border-radius: 12px;
  background: white;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-400);
}
.meetingMdl .meetInfo .infoText span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-400);
}
.meetingMdl .meetInfo .infoText p {
  font-size: 14px;
  color: var(--text-800);
}
.meetingMdl .modal-body {
  margin: 10px 0;
  padding: 5px 5px;
  max-height: 65vh;
  overflow: auto;
}
.meetingMdl .mdlFormNav {
  background: var(--text-50);
  border-radius: 16px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.meetingMdl .mdlFormNav .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  font-size: 14px;
  color: var(--text-300);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.03);
}
.meetingMdl .mdlFormNav .btn:hover {
  color: var(--red-500);
}
.meetingMdl .mdlFormNav .meetingDate {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-800);
}
.addMeetFrm label {
  color: var(--text-800);
  width: 100%;
}
.addMeetFrm .form-label span {
  font-size: 12.5px;
  color: var(--text-400);
}
.addMeetFrm label .frmEditBtn {
  position: absolute;
  top: 0;
  padding: 0;
  font-size: 18px;
  color: var(--blue-500);
  background: transparent;
}
.addMeetFrm label .frmEditBtn:hover {
  color: var(--red-500);
}
.addMeetFrm .meetFrmInpt {
  border-radius: 16px;
  border: 1px solid var(--text-200);
  font-size: 14px;
  color: var(--text-800);
}
.addMeetFrm input.form-control {
  height: 50px;
}
.addMeetFrm input:disabled {
  background: rgba(247, 247, 247, 1);
  color: var(--text-400);
}
.addMeetFrm .meetFrmInpt:focus {
  border-color: var(--blue-500);
}
.addMeetFrm .priceInput {
  border: 1px solid var(--text-200);
  border-radius: 16px;
  height: 46px;
}
.addMeetFrm .selTimeBox {
  margin-bottom: 15px;
}
.addMeetFrm .selTimeBox h3 {
  font-size: 14px;
  color: var(--text-800);
  margin-bottom: 16px;
}
.addMeetFrm .selTimeBox .form-check {
  position: relative;
  padding: 0;
  margin: 0;
  margin-bottom: 8px;
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.addMeetFrm .selTimeBox input {
  position: absolute;
  top: 14px;
  width: 16px;
  height: 16px;
}
.addMeetFrm .selTimeBox label {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  border: 1px solid var(--text-200);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.addMeetFrm .selTimeBox label p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.addMeetFrm .selTimeBox label div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.addMeetFrm .selTimeBox label span {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.addMeetFrm .selTimeBox label small {
  font-weight: 500;
  font-size: 9.5px;
  color: var(--text-300);
}
.addMeetFrm .selTimeBox input:checked ~ label {
  background: var(--blue-50);
  border-color: var(--blue-500);
}
.addMeetFrm .selSkillTtl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
  padding: 0 2px 0 8px;
}
.addMeetFrm .selSkillTtl label {
  margin-bottom: 0;
  font-size: 14px;
  color: var(--text-800);
}
.addMeetFrm .selSkillTtl p {
  font-weight: 500;
  font-size: 11.25px;
  color: var(--blue-500);
  min-width: max-content;
}
.addMeetFrm .addInptGrup .skilInput {
  border-radius: 16px 0 0 16px;
}
.addMeetFrm .frmDateRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.addMeetFrm .frmDateRow .dateInptBx {
  width: 38%;
}
.addMeetFrm .frmDateRow .form-switch {
  padding-top: 30px;
}
.meetingMdl .priceInput input,
.meetingMdl .priceInput select {
  height: 100%;
  border: none;
  border-radius: 16px;
}
.meetingMdl .priceInput input {
  font-size: 14px;
  color: var(--text-800);
}

.meetingMdl .priceInput select {
  max-width: 78px;
  background-color: var(--text-50);
  color: var(--text-500);
  font-size: 11.25px;
  border-right: 1px solid var(--text-100);
}
.addMeetFrm .frmSelect {
  border-radius: 16px;
  height: 46px;
  border: 1px solid var(--text-200);
  color: var(--text-800);
  font-size: 14px;
}
.meetingMdl .accordion {
  padding: 5px 0;
  /* max-height: 150px;
  overflow: auto; */
}
.reqAcordion .accordion-item,
.meetAcrdion .accordion-item {
  border: 1px solid var(--text-100);
  border-radius: 16px;
  margin-bottom: 12px;
}
.reqAcordion .accordion-item {
  background: #f7f7f7;
  border: 1px solid var(--text-50);
}
.meetAcrdion .accordion-button {
  border-radius: 16px;
  padding: 0;
}
.reqAcordion .accordion-button {
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background: transparent;
}
.reqAcordion .accordion-button .iconBx {
  font-size: 24px;
  color: var(--blue-500);
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reqAcordion .accordion-button .textBx p {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-800);
}
.reqAcordion .accordion-button .textBx span {
  font-size: 12.5px;
  color: var(--text-500);
}
.reqAcordion .accordion-button::after {
  width: 16px;
  height: 16px;
  background-size: 16px;
}
.reqAcordion .accordion-button:focus {
  box-shadow: none;
  border: none;
  outline: none;
}
.reqAcordion .accordion-item .accordion-button.collapsed,
.meetAcrdion .accordion-item .accordion-button.collapsed {
  border-radius: 16px;
}
.meetAcrdion .accordion-button:not(.collapsed) {
  background: white;
  box-shadow: none;
  border-radius: 16px;
}
.reqAcordion .accordion-button:not(.collapsed) {
  box-shadow: none;
  border-radius: 16px;
  background: transparent;
}

.reqAcordion .accordion-body .editReq {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--red-500);
  margin-top: 25px;
}
.reqAcordion .accordion-body .editReq i {
  font-size: 16px;
}
.reqAcordion .accordion-body .editReq span {
  font-weight: 500;
  font-size: 12.5px;
}
.reqAcordion .accordion-body .editReq:hover {
  color: var(--red-700);
}
.reqAcordion .accordion-body .reqRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 18px;
  background: white;
  margin-bottom: 8px;
}
.reqAcordion .accordion-body .reqRow .name p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.reqAcordion .accordion-body .reqRow .name span {
  font-size: 12.5px;
  color: var(--text-500);
}
.reqAcordion .accordion-body .reqRow .price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.reqAcordion .accordion-body .reqRow .price span {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.reqAcordion .accordion-body .reqRow .price small {
  font-size: 12.5px;
  color: var(--text-500);
}
.reqAcordion .accordion-body .reqRow .checkmark {
  font-size: 24px;
  color: var(--blue-500);
}
.reqAcordion .accordion-body .safeBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  gap: 5px 10px;
  border-radius: 18px;
  background: white;
  margin-bottom: 8px;
  position: relative;
}
.reqAcordion .accordion-body .safeBox .left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}
.reqAcordion .accordion-body .safeBox .amount {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
  min-width: max-content;
}
.reqAcordion .accordion-body .safeBox .amount small {
  color: var(--text-500);
  font-size: 12.5px;
}
.reqAcordion .accordion-body .safeBox label p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.reqAcordion .accordion-body .safeBox label span {
  font-size: 12.5px;
  color: var(--text-400);
}
.reqAcordion .accordion-body .buttonsRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 20px;
}
.reqAcordion .accordion-body .buttonsRow .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 0 20px;
  font-weight: 500;
  font-size: 14px;
  height: 38px;
  border: none;
}
.reqAcordion .accordion-body .buttonsRow .freeBtn {
  background: var(--red-500);
  color: white;
}
.reqAcordion .accordion-body .buttonsRow .freeBtn:hover {
  background: var(--red-700);
}
.reqAcordion .accordion-body .buttonsRow .cancelBtn {
  background: white;
  color: var(--text-800);
}
.reqAcordion .accordion-body .buttonsRow .cancelBtn:hover {
  border-color: var(--text-500);
}
.reqAcordion .accordion-body .buttonsRow .btn:disabled {
  background: transparent;
  color: var(--text-400);
}
.reqAcordion .accordion-body .form-check-input:checked {
  background-color: var(--red-500);
  border-color: var(--red-500);
}
.meetAcrdion .accordion-button::after {
  display: none;
}
.meetAcrdion .form-check {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.meetAcrdion .form-check input {
  position: absolute;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  float: none;
}
.meetAcrdion .form-check label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  gap: 10px;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.uplodAcrdion .accordion-body {
  padding: 20px;
}
.uplodAcrdion .accordion-body h1 {
  font-weight: 900;
  color: var(--text-800);
  line-height: 2;
  font-size: 24px;
}
.uplodAcrdion .accordion-body h2,
.uplodAcrdion .accordion-body h3,
.uplodAcrdion .accordion-body h4,
.uplodAcrdion .accordion-body h5,
.uplodAcrdion .accordion-body h6 {
  font-weight: 700;
  color: var(--text-800);
  line-height: 2;
}

.uplodAcrdion .accordion-body h2 {
  font-size: 22px;
}
.uplodAcrdion .accordion-body h3 {
  font-size: 20px;
}
.uplodAcrdion .accordion-body h4 {
  font-size: 18px;
}
.uplodAcrdion .accordion-body h5 {
  font-size: 17px;
}
.uplodAcrdion .accordion-body strong,
.uplodAcrdion .accordion-body h6 {
  font-size: 16px;
}
.uplodAcrdion .accordion-body a {
  font-size: 16px;
  line-height: 2;
  color: var(--blue-500);
}
.uplodAcrdion .accordion-body li,
.uplodAcrdion .accordion-body p {
  font-size: 16px;
  line-height: 2;
  color: var(--text-800);
}
.uplodAcrdion .accordion-body ul {
  list-style: disc;
}

.frmStepBx .inPersonBox,
.frmStepBx .consultAcrdion {
  display: none;
}

.addPrjctSec .accordion label .iconBx {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue-50);
  font-size: 22px;
  color: var(--blue-500);
}
.addPrjctSec .accordion label .textBx p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.addPrjctSec .accordion label .textBx span {
  font-size: 11.25px;
  color: var(--text-500);
}
.meetingMdl .accordion .form-check label span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-300);
}
.meetingMdl .accordion .form-check label p {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-800);
  line-height: 1;
}
.meetingMdl .accordion .form-check input:checked ~ label span {
  background: var(--blue-500);
}
.meetAcrdion .accordion-body {
  padding: 20px 12px;
}
.meetAcrdion .addTimeBtn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  color: var(--red-500);
}
.meetAcrdion .addTimeBtn i {
  font-size: 16px;
}
.meetAcrdion .addTimeBtn span {
  font-size: 12.5px;
  font-weight: 500;
}
.meetAcrdion .addTimeBtn:hover {
  color: var(--red-700);
}
#addFileMdl .modal-dialog {
  max-width: 517px;
}
#dayManagerModal .modal-dialog,
#scheduleMdl .modal-dialog,
.reserveMdl .modal-dialog,
#showCmntMdl .modal-dialog {
  max-width: 612px;
}
.smallModal .modal-dialog {
  max-width: 432px;
}
#skillsMdl .modal-dialog {
  max-width: 748px;
}
#showCmntMdl .cmntBox .cmntBxFtr {
  justify-content: center;
}
.helpBox {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  background: var(--help-50);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
}
.helpBox span {
  font-size: 24px;
  color: var(--help-100);
  margin-top: 12px;
}
.helpBox ul li {
  position: relative;
  margin-bottom: 5px;
}
.helpBox ul li:before {
  position: absolute;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--help-200);
}
.helpBox p {
  font-size: 12.5px;
  color: var(--help-200);
}
.addMeetFrm .holidayChek,
.meetingMdl .holidayChek {
  border-radius: 16px;
  background: var(--text-50);
  margin: 24px 0 32px 0;
  padding: 0;
  position: relative;
  cursor: pointer;
}
.addMeetFrm .holidayChek label,
.meetingMdl .holidayChek label {
  width: 100%;
  cursor: pointer;
}
.addMeetFrm .holidayChek label p,
.meetingMdl .holidayChek label p {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-800);
}
.addMeetFrm .holidayChek label span,
.meetingMdl .holidayChek label span {
  font-size: 12.5px;
  color: var(--text-600);
}
.addMeetFrm .holidayChek input,
.meetingMdl .holidayChek input {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
}
.meetingMdl .mdlTimeRow h6,
.meetingMdl .workTimeList h6 {
  font-size: 14px;
  color: var(--text-800);
  margin-bottom: 10px;
}
.meetingMdl .mdlTimeRow .input-group-text {
  border-radius: 16px;
}
.meetingMdl .mdlTimeRow .addWorkTime {
  background: var(--blue-500);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 46px;
  border-radius: 16px;
}
.meetingMdl .mdlTimeRow .addWorkTime i {
  font-size: 20px;
}
.meetingMdl .mdlTimeRow .addWorkTime span {
  font-size: 12.5px;
  font-weight: 600;
}
.meetingMdl .mdlTimeRow .addWorkTime:hover {
  background-color: var(--blue-700);
}
.meetingMdl .mdlTimeRow .input-group {
  height: 46px;
  border: 1px solid var(--text-200);
  border-radius: 16px;
}
.meetingMdl .mdlTimeRow .input-group * {
  border: none;
  background: transparent;
}
.meetingMdl .mdlTimeRow input {
  text-align: center;
  color: var(--text-800);
  font-size: 14px;
}
.meetingMdl .mdlTimeRow .deleteBtn,
.meetingMdl .mdlTimeRow .addBtn {
  font-size: 20px;
  padding: 0 5px;
  line-height: 1;
  height: 100%;
}
.meetingMdl .mdlTimeRow .addBtn {
  color: var(--blue-500);
}
.meetingMdl .mdlTimeRow .deleteBtn {
  color: var(--red-500);
}
.meetingMdl .mdlTimeRow .addBtn:hover {
  color: var(--blue-700);
}
.meetingMdl .mdlTimeRow .deleteBtn:hover {
  color: var(--red-700);
}

.meetingMdl .quickBtns {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 32px 0;
}
.meetingMdl .quickBtns .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 15px;
  height: 36px;
  border-radius: 16px;
  background: var(--text-50);
  border: 1px solid var(--text-100);
  color: var(--text-700);
  line-height: 1;
}
.meetingMdl .quickBtns .btn i {
  font-size: 16px;
}
.meetingMdl .quickBtns .btn p {
  font-size: 11.25px;
  font-weight: 500;
}
.meetingMdl .quickBtns .btn span {
  color: var(--text-400);
}
.meetingMdl .quickBtns .btn:hover {
  border-color: var(--red-500);
}
.meetingMdl .workTimeList ul {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.meetingMdl .workTimeList li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-radius: 12px;
  background: #f7f7f7;
  height: 36px;
  padding: 0 10px;
}
.meetingMdl .workTimeList p {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-500);
}
.meetingMdl .workTimeList button {
  font-size: 18px;
  color: var(--red-500);
  padding: 0;
  line-height: 1;
}
.meetingMdl .workTimeList button:hover {
  color: var(--red-700);
}

.meetingMdl .selMeetTime strong {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 8px;
  display: block;
  color: var(--text-800);
}
.meetingMdl .selMeetTime .cheksRow {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.meetingMdl .selMeetTime .form-check {
  position: relative;
  padding: 0;
  margin: 0;
  margin-bottom: 8px;
  width: 175px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.meetingMdl .selMeetTime input {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 16px;
  height: 16px;
}
.meetingMdl .selMeetTime label {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  padding: 16px 42px 16px 16px;
  border: 1px solid var(--text-200);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.meetingMdl .selMeetTime .cheksRow input:checked ~ label {
  background: var(--blue-50);
  border-color: var(--blue-500);
}
.meetingMdl .meetingPrice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  background: var(--text-50);
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
}
.meetingMdl .meetingPrice div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.meetingMdl .meetingPrice span,
.meetingMdl .meetingPrice small {
  font-size: 12.5px;
  color: var(--text-500);
}
.meetingMdl .meetingPrice p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}

.addMeetFrm .consultChek {
  margin-bottom: 24px;
}
.addPrjctSec .onlinConsult {
  margin-bottom: 24px;
}
.addPrjctSec .onlinConsult div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.addPrjctSec .onlinConsult i {
  font-size: 24px;
  color: var(--blue-500);
}
.addPrjctSec .onlinConsult p {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-800);
}
.addPrjctSec .onlinConsult span {
  font-size: 12.5px;
  color: var(--text-500);
}
.addPrjctSec .addMeetFrm .consultChek {
  border: 1px solid var(--text-100);
  border-radius: 16px;
  position: relative;
  padding: 0;
}
.addMeetFrm .consultChek input {
  position: absolute;
  top: 14px;
}
.addMeetFrm .consultChek label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.addPrjctSec .addMeetFrm .consultChek label {
  position: relative;
  width: 100%;
  height: 100%;
}
.addMeetFrm .consultChek .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue-50);
  color: var(--blue-500);
  font-size: 22px;
}
.addMeetFrm .consultChek p {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.addMeetFrm .consultChek span {
  font-size: 11.25px;
  color: var(--text-500);
}
.consultFrm .row .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding: 0;
  margin-top: 45px;
}
.consultFrm .row .removeBtn {
  color: var(--red-500);
}
.consultFrm .row .addBtn {
  color: var(--blue-500);
}
.consultFrm .addMeetBtn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--red-500);
  margin-top: 15px;
  padding: 0;
}
.consultFrm .addMeetBtn i {
  font-size: 16px;
}
.consultFrm .addMeetBtn span {
  font-weight: 500;
  font-size: 12.5px;
}
.consultFrm .addMeetBtn:hover {
  color: var(--red-700);
}

.currencyTab .tabHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border-radius: 16px;
  padding: 3px;
  background: var(--text-50);
  margin-bottom: 24px;
}
.currencyTab .tabHeader li {
  width: 50%;
  height: 100%;
}
.currencyTab .tabHeader .tablinks {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-400);
  background: transparent;
  height: 100%;
  border-radius: 16px;
}
.currencyTab .tabHeader .tablinks.active {
  background: white;
  color: var(--text-800);
  font-weight: 600;
}
.currencyTab .tabHeader .tablinks:hover {
  color: var(--blue-500);
}

.proposeMdl .offersNum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-radius: 16px;
  padding: 16px 20px;
  background: var(--text-50);
  margin: 32px 0 5px 0;
}
.proposeMdl .offersNum span {
  font-size: 11.25px;
  color: var(--text-500);
}
.proposeMdl .offersNum div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.proposeMdl .offersNum p {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--blue-500);
}
.proposeMdl .offersNum small {
  font-size: 9.5px;
  color: var(--text-500);
}

.proposeMdl .proposInfo {
  width: 100%;
  border-radius: 16px;
  padding: 16px 20px;
  background: var(--text-50);
  margin: 12px 0 30px 0;
}
.proposeMdl .proposInfo li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.proposeMdl .proposInfo li:last-child {
  border-top: 1px solid var(--text-100);
  padding-top: 12px;
  margin-top: 12px;
}
.proposeMdl .proposInfo .title {
  color: var(--text-800);
  font-size: 11.25px;
}
.proposeMdl .proposInfo .big .title {
  font-weight: 500;
  font-size: 12.5px;
}
.proposeMdl .proposInfo .total .title {
  color: var(--text-500);
}
.proposeMdl .proposInfo .price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.proposeMdl .proposInfo .price small {
  color: var(--text-500);
}
.proposeMdl .proposInfo .big .price small {
  font-size: 11.25px;
}
.proposeMdl .proposInfo .price i {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-800);
}
.proposeMdl .proposInfo .big .price i {
  font-size: 14px;
}
.proposeMdl .proposInfo .progressBar {
  width: 100%;
  height: 6px;
  border-radius: 15px;
  background: white;
  margin-top: 5px;
}
.proposeMdl .proposInfo .progressFill {
  height: 100%;
  width: 25%;
  top: 0;
  border-radius: 15px;
  background: var(--blue-500);
}
.proposeMdl .securPayBx {
  margin: 32px 0 12px 0;
}
.proposeMdl .securPayBx .payRowHed {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 20px;
  color: var(--text-800);
  display: block;
}
.proposeMdl .securPayBx .addPayRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  color: var(--red-500);
  padding: 0;
  background: transparent;
}
.proposeMdl .securPayBx .addPayRow span {
  font-weight: 500;
  font-size: 12.5px;
}
.proposeMdl .securPayBx .addPayRow i {
  font-size: 16px;
}
.proposeMdl .securPayBx .addPayRow:hover {
  color: var(--red-700);
}
.proposeMdl .securPayBx .payRow .numbr {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-50);
  color: var(--blue-500);
  font-size: 14px;
  font-weight: 700;
  margin-top: 6px;
}
.proposeMdl .securPayBx .payRow .removPayBtn {
  color: var(--red-500);
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: transparent;
}
.proposeMdl .securPayBx .payRow .removPayBtn:hover {
  color: var(--red-700);
}

.serviceMdl .modal-dialog {
  max-width: 85%;
}
#prtflioLstMdl .modal-dialog {
  max-width: 940px;
}
.serviceMdl .modal-content {
  position: relative;
  border-radius: 16px;
}
.serviceMdl .modalHdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  margin-bottom: 10px;
  padding: 25px 30px;
  position: sticky;
  top: 0;
  left: 0;
  background: white;
  border-radius: 16px 16px 0 0;
  z-index: 2;
}
.serviceMdl .modalHdr .userBx {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.serviceMdl .modalHdr .userBx .imgBx {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.serviceMdl .modalHdr .userBx img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.serviceMdl .modalHdr .userBx h2 {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 3px;
  color: var(--text-800);
}
.serviceMdl .modalHdr .userBx p {
  font-size: 12.5px;
  color: var(--text-500);
}
.serviceMdl .modalHdr .MdlHdrLeft {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}
.serviceMdl .modalHdr .hdrNavigtion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.serviceMdl .modalHdr .hdrNavigtion a,
.serviceMdl .modalHdr .hdrNavigtion div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--text-200);
  height: 35px;
  border-radius: 8px;
  line-height: 1;
}
.serviceMdl .modalHdr .hdrNavigtion a {
  font-size: 16px;
  color: var(--text-800);
  width: 35px;
  padding-bottom: 2px;
}
.serviceMdl .modalHdr .hdrNavigtion a.disable {
  color: var(--text-600);
}
.serviceMdl .modalHdr .hdrNavigtion a:hover {
  border-color: var(--red-500);
  color: var(--red-500);
}
.serviceMdl .modalHdr .hdrNavigtion div {
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-600);
  padding: 0 20px;
}
.serviceMdl .modalHdr .hdrNavigtion div span {
  color: var(--text-800);
}
.serviceMdl .modalHdr .MdlHdrLeft button {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 24px;
  height: 25px;
  color: var(--text-300);
}
.serviceMdl .modalHdr .MdlHdrLeft button:hover {
  color: var(--red-500);
}
.serviceMdl .modalFootr {
  padding: 20px 0;
  background: white;
  width: 100%;
  max-width: 938px;
  border-radius: 0 0 16px 16px;
  position: fixed;
  bottom: 0;
}
.serviceMdl .modalFootr .box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 800px;
  border-radius: 16px;
  padding: 24px;
  background: var(--blue-50);
  margin: 15px auto;
}
.serviceMdl .modalFootr p {
  font-weight: 500;
  font-size: 12.5px;
  color: black;
}
.serviceMdl .modalFootr button {
  color: var(--blue-500);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.serviceMdl .modalFootr button span {
  font-weight: 700;
  font-size: 14px;
}
.serviceMdl .modalFootr button i {
  font-size: 16px;
}
.serviceMdl .modalFootr button:hover {
  color: var(--blue-700);
}
.serviceMdl .srvicMdlRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 30px;
  border-radius: 0 0 16px 16px;
}
.serviceMdl .srvicMdlRow .mainInfo {
  width: calc(100% - 440px);
}
.serviceMdl .srvicMdlRow .mainInfo.mainInfo2 {
  width: 100%;
  padding-bottom: 110px;
}
.serviceMdl .mainInfo .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 25px;
}
.serviceMdl .mainInfo .name h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 2;
  color: var(--text-800);
}
.serviceMdl .mainInfo .name p {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-500);
}
.serviceMdl .mainInfo .title ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.serviceMdl .mainInfo .title li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid var(--text-200);
  font-size: 18px;
  color: var(--text-800);
}
.serviceMdl .mainInfo .title li a:hover {
  border-color: var(--red-500);
  color: var(--red-500);
}
.serviceMdl .mainInfo .mainInfoTxt img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  margin: 12px 0;
}
.serviceMdl .mainInfo .mainInfoTxt p {
  font-size: 16px;
  color: var(--text-800);
  margin-bottom: 24px;
  line-height: 2;
}
.serviceMdl .mainInfo .mainInfoTxt strong,
.serviceMdl .mainInfo .mainInfoTxt h2,
.serviceMdl .mainInfo .mainInfoTxt h3,
.serviceMdl .mainInfo .mainInfoTxt h4,
.serviceMdl .mainInfo .mainInfoTxt h5,
.serviceMdl .mainInfo .mainInfoTxt h6 {
  color: var(--text-800);
  font-weight: 700;
  line-height: 2;
}
.serviceMdl .mainInfo .mainInfoTxt strong {
  font-size: 16px;
  margin-bottom: 8px;
}
.serviceMdl .mainInfo .mainInfoTxt h1 {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-800);
  line-height: 2;
}
.serviceMdl .mainInfo .mainInfoTxt h2 {
  font-size: 22px;
}
.serviceMdl .mainInfo .mainInfoTxt h3 {
  font-size: 20px;
}
.serviceMdl .mainInfo .mainInfoTxt h4 {
  font-size: 18px;
}
.serviceMdl .mainInfo .mainInfoTxt h5 {
  font-size: 17px;
}
.serviceMdl .mainInfo .mainInfoTxt h6 {
  font-size: 16px;
}
.serviceMdl .mainInfo .mainInfoTxt ul {
  margin-bottom: 24px;
}
.serviceMdl .mainInfo .mainInfoTxt li {
  margin-bottom: 12px;
}
.serviceMdl .mainInfo .mainInfoTxt li:last-child {
  margin-bottom: 0;
}
.serviceMdl .mainInfo .mainInfoTxt li span {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-800);
  display: block;
  margin-bottom: 10px;
}
.serviceMdl .mainInfo .mainInfoTxt li p {
  margin-bottom: 0;
}
.serviceMdl .mainInfo .servicSwipr {
  margin-bottom: 30px;
}
.serviceMdl .servicSwipr .bigSwiper {
  margin-bottom: 30px;
}
.serviceMdl .servicSwipr .bigSwiper .swiper-slide {
  border-radius: 16px;
  width: 100%;
  height: 508px;
}
.serviceMdl .servicSwipr .thumbSwiper .swiper-slide {
  width: 92px;
  height: 62px;
  border-radius: 10px;
  border: 1px solid var(--text-100);
}
.serviceMdl .servicSwipr .thumbSwiper .swiper-slide-thumb-active {
  border-color: var(--red-500);
}
.serviceMdl .servicSwipr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.serviceMdl .srvicMdlRow .modalSide {
  width: 420px;
}
.serviceMdl .modalSide .mdlSideBx {
  background: #f5f5f5;
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
}
.serviceMdl .placeOrder .priceBox {
  margin-bottom: 20px;
}
.serviceMdl .placeOrder .priceBox div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.serviceMdl .placeOrder .priceBox p {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-800);
}
.serviceMdl .placeOrder .priceBox small,
.serviceMdl .placeOrder .priceBox span {
  font-size: 11.25px;
  color: var(--text-500);
}
.serviceMdl .placeOrder .priceBox span {
  display: block;
}
.serviceMdl .placeOrder ul {
  width: 100%;
  border-radius: 16px;
  padding: 10px 20px;
  background: white;
  margin-bottom: 24px;
}
.serviceMdl .placeOrder ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
.serviceMdl .placeOrder ul .liRight {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.serviceMdl .placeOrder ul .number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--text-50);
}
.serviceMdl .placeOrder ul strong {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-800);
}
.serviceMdl .placeOrder ul .liLeft {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.serviceMdl .placeOrder ul p {
  font-weight: 500;
  font-size: 11.25px;
  color: var(--text-800);
}
.serviceMdl .placeOrder ul small {
  font-size: 9.5px;
  color: var(--text-500);
}
.serviceMdl .placeOrder .orderBtn {
  height: 38px;
  border-radius: 16px;
  padding: 0 20px;
  background: var(--red-500);
  color: white;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  margin: 32px 0 0 auto;
}
.serviceMdl .placeOrder .orderBtn:hover {
  background: var(--red-700);
}
.serviceMdl .placeOrder .orderTime {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.serviceMdl .placeOrder .orderTime span {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-800);
}
.serviceMdl .placeOrder .orderTime p {
  font-size: 11.25px;
  color: var(--text-500);
}
.serviceMdl .sideLinks li {
  width: 100%;
  margin-bottom: 8px;
}
.serviceMdl .sideLinks li:last-child {
  margin-bottom: 0;
}
.serviceMdl .sideLinks li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 42px;
  border-radius: 16px;
  padding: 10px 16px;
  gap: 4px;
  background: white;
}
.serviceMdl .sideLinks li div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  color: var(--text-800);
}
.serviceMdl .sideLinks li p {
  font-weight: 500;
  font-size: 12.5px;
}
.serviceMdl .sideLinks li span {
  font-size: 20px;
}
.serviceMdl .sideLinks li i {
  font-size: 14px;
  color: var(--text-400);
}

.serviceMdl .meetCalendr {
  background: #f5f5f5;
  box-shadow: none;
}
.serviceMdl .meetCalendr .badge,
.serviceMdl .meetCalendr .minCircle {
  display: none;
}
.serviceMdl .meetCalendr .day {
  height: 58px;
  padding: 8px;
}
.serviceMdl .meetCalendr .calndrWeeks {
  padding: 0;
}

/* Inline error toast — fallback shown when the PHPFlasher runtime is missing
   (face-to-face add/edit meeting save failures must never be silent). */
.f2fErrorToast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 360px;
  padding: 14px 16px;
  background: #b91c1c;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-size: 13.5px;
  line-height: 1.6;
}
.f2fErrorMsg {
  flex: 1;
}
.f2fErrorClose {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.f2fErrorClose:hover {
  background: rgba(255, 255, 255, 0.35);
}