@import url("./main_font.css");

/*==================body=================*/
body {
  background: white;
  font-family: "IRANYekanXVF";
}
body:has(.notFoundSec),
body:has(.prjctsSec),
body:has(.planSec),
body:has(.faqSec),
body:has(.dashSec) {
  background: #f0f5fc;
}
.alignRight {
  text-align: right;
}
.alignLeft {
  text-align: left;
}

.ck.ck-editor {
  border-radius: 16px;
  border: 1px solid var(--text-200);
  font-size: 14px;
  color: var(--text-800);
}
.ck-editor__editable {
  min-height: 150px;
}
.ck.ck-sticky-panel__content,
.ck-rounded-corners .ck.ck-toolbar,
.ck.ck-editor .ck.ck-toolbar.ck-rounded-corners {
  border-radius: 16px 16px 0 0 !important;
}
.ck-editor .ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable,
.ck-editor .ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners {
  border-radius: 0 0 16px 16px;
}
.ck-content {
  direction: rtl;
  text-align: right;
}

/*------rating-stars------*/
.rating-stars {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 25px;
}
.rating-stars ul {
  display: flex;
  align-items: center;
  justify-content: center;
  direction: ltr;
  gap: 4px;
}
.rating-stars ul span {
  color: var(--text-100);
  font-size: 20px;
  cursor: pointer;
  display: block;
  width: 20px;
  height: auto;
}
.rating-stars .selected span {
  font-size: 20px;
  color: #ffb700;
}
.rating-stars .hoverStar span {
  color: #ffb700;
}

/*--------starRate--------*/
.starRate {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
}
.starRate .star {
  position: relative;
  line-height: 1;
  font-size: 12px;
}
.starRate .star span {
  font-size: 12px;
  color: var(--text-100);
}
.starRate .star:before {
  font-family: "icomoon" !important;
  content: "\ea80";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffb700;
  font-size: 12px;
  display: none;
}
.starRate .star.half:before {
  width: 50%;
  overflow: hidden;
  color: #ffb700;
  display: block;
}
.starRate .star.full:before {
  width: 100%;
  color: #ffb700;
  display: block;
}

/*--------pagination--------*/
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 50px auto 30px auto;
}
.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 35px;
  border: 1px solid var(--text-100);
  border-radius: 8px;
  background: white;
  font-weight: 500;
  color: var(--text-800);
}
.pagination a span {
  font-size: 14px;
}
.pagination a i {
  font-size: 16px;
}
.pagination a.disable {
  color: var(--text-500);
  cursor: unset;
}
.pagination a.active {
  background: var(--red-500);
  border-color: var(--red-500);
  color: white;
}
.pagination a:hover {
  border-color: var(--red-500);
}
.pagination a.disable:hover {
  border-color: var(--text-100);
}
.pagination a:first-child {
  margin-left: 18px;
}
.pagination a:last-child {
  margin-right: 18px;
}

/*--------tabBox--------*/
.tabBox .tabcontent {
  display: none;
}
.tabBox #tabOne {
  display: block;
}

/*--------dropSel--------*/
.dropSel {
  display: block;
  position: relative;
}
.hdrBtm .dropSel.sideDrop {
  display: none;
}
.dropSel .select {
  width: 67px;
  height: 46px;
  padding: 0 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  border-radius: 50px;
  background: white;
  border: 1px solid var(--text-100);
}
.dropSel .select .dropSelDiv {
  overflow: hidden;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.dropSel .select .dropSelDiv p {
  font-size: 14px;
  color: var(--text-800);
  font-weight: 500;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropSel .select .expndMrIcon {
  font-size: 10px;
  color: var(--text-800);
  cursor: pointer;
}
.dropSel.active .select .expndMrIcon {
  transform: rotate(180deg);
}
.dropSel .dropdown-mnu {
  width: 204px;
  position: absolute;
  top: 52px;
  max-height: 200px;
  overflow: auto;
  z-index: 9;
  border-radius: 16px;
  padding: 10px;
  background: white;
  display: none;
  filter: drop-shadow(2px 2px 20px rgba(0, 0, 0, 0.15));
}
.dropSel .dropdown-mnu::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: var(--blue-500);
  border-radius: 35px;
}
.dropSel .dropdown-mnu::-webkit-scrollbar-thumb {
  border-radius: 35px;
  background-color: var(--blue-100);
  --webkit-box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
}
.dropSel .dropdown-mnu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  background: white;
  margin-bottom: 5px;
}
.dropSel .dropdown-mnu li:last-child {
  margin-bottom: 0;
}
.dropSel .dropdown-mnu li div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.langDrop .dropdown-mnu li:first-child p,
.langDrop .dropdown-mnu li:last-child i {
  color: var(--text-800);
  font-weight: 500;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
}
.sideDrop .dropdown-mnu li p {
  color: var(--text-800);
  font-weight: 500;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
}
.dropSel .dropdown-mnu li img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.langDrop .dropdown-mnu li:last-child p {
  color: var(--text-500);
  font-size: 11.25px;
  font-weight: 500;
}
.dropSel .dropdown-mnu li:hover {
  background: #f7f7f7;
}

/*--------section-Title--------*/
.secTitle {
  text-align: center;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 40px auto;
}
.secTitle.txtRight {
  text-align: right;
  margin: 0 0 40px auto;
}
.secTitle h2 {
  font-size: 25px;
  font-weight: 700;
  color: var(--text-800);
  margin-bottom: 12px;
}
.secTitle p {
  font-size: 14px;
  color: var(--text-500);
}

/*==================header=================*/
header {
  background: white;
  padding: 12px 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.04));
  border-bottom: 1px solid var(--text-100);
  position: relative;
  z-index: 15;
}
header:has(.hdrRowFixd.fixed) {
  filter: none;
}
.hdrRowFixd {
  background: white;
  padding-bottom: 16px;
  width: 100%;
}
.hdrRowFixd.fixed {
  padding: 8px 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 16;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.04));

  background: white;
  width: 100%;
  box-shadow:
    0px 2px 8px 0px rgba(0, 0, 0, 0.02),
    0px 2px 15px 0px rgba(0, 0, 0, 0.04);
}
header .hdrTopRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .hdrTopRght {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;
}
header .hdrOpnMnu {
  font-size: 25px;
  color: var(--text-800);
  display: none;
  cursor: pointer;
}
header .closeSide {
  font-size: 24px;
  color: var(--text-500);
  display: none;
  cursor: pointer;
}
.hdrLogo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.hdrLogo img {
  width: 50px;
  height: auto;
}
.hdrLogo strong {
  font-weight: 700;
  font-size: 16.5px;
  color: var(--text-400);
  display: block;
}
.hdrLogo p {
  font-size: 11.75px;
  font-weight: 500;
  color: var(--red-500);
}
header .proAccLnk {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  width: max-content;
  height: 38px;
  padding: 0 16px;
  background: linear-gradient(to right, #920ae6, #5268f8);
  font-size: 12.5px;
  font-weight: 600;
  color: white;
  overflow: hidden;
}
header .proAccLnk:hover {
  background: linear-gradient(to left, #920ae6, #5268f8);
}
header .hdrSrchBx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--text-50);
  border: 1px solid var(--text-100);
  width: 386px;
  height: 46px;
  border-radius: 16px;
}
header .hdrSrchBx .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  gap: 4px;
  min-width: max-content;
  color: var(--text-500);
  line-height: 1;
}
header .hdrSrchBx .srchBtn {
  border-radius: 0 16px 16px 0;
  font-size: 18px;
}
header .hdrSrchBx input {
  font-size: 14px;
  color: var(--text-800);
  border: none;
  background: transparent;
}
header .hdrSrchBx .selLocBtn {
  border-radius: 16px 0 0 16px;
}
header .hdrSrchBx .selLocBtn span {
  font-size: 12.5px;
  line-height: 1;
  display: block;
}
header .hdrSrchBx .selLocBtn i {
  font-size: 14px;
}
header .hdrSrchBx .btn:hover {
  color: var(--text-700);
}
header .hdrSrchBx input:focus {
  background: transparent;
}
header .hdrSrchBx:has(input:focus) {
  border-color: var(--text-500);
}
header .hdrTopLft {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
header .hdrTopLft .hdrNotifs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 20px;
  line-height: 1;
}
header .hdrTopLft .hdrNotifs li {
  width: 18px;
}
header .hdrTopLft .hdrNotifs span {
  font-size: 17px;
  color: var(--text-600);
  cursor: pointer;
}
header .hdrTopLft .hdrNotifs .num {
  position: absolute;
  right: -15px;
  top: -13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red-500);
  border: 1px solid white;
  color: white;
  font-size: 11.25px;
  font-weight: 700;
  line-height: 1;
  min-width: 26px;
  height: 19px;
  padding: 0 2px;
  border-radius: 50px;
  direction: ltr;
}
header .hdrTopLft .hdrNotifs li:hover {
  color: var(--red-600);
}
header .hdrUsrBx .hdrLogLnk,
header .hdrUsrBx .hdrUsrLnk {
  width: max-content;
  height: 46px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 50px;
  background: white;
  border: 1px solid var(--text-100);
  text-decoration: none;
  color: inherit;
}
header .hdrUsrBx .hdrLogLnk:hover {
  border-color: var(--blue-500);
}
header .hdrUsrBx .hdrUsrLnk {
  padding: 0 10px 0 4px;
  width: 76px;
}
header .hdrUsrBx .hdrLogLnk .usrImgBx,
header .hdrUsrBx .hdrUsrLnk .usrImgBx {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--text-100);
}
header .hdrUsrBx .hdrLogLnk .usrImgBx img,
header .hdrUsrBx .hdrUsrLnk .usrImgBx img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
header .hdrUsrBx .hdrLogLnk i {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
header .hdrUsrBx .hdrUsrLnk span {
  font-size: 10px;
  color: var(--text-800);
}
header .hdrUsrBx.open .hdrUsrLnk span {
  transform: rotate(180deg);
}
header .hdrUsrBx .hdrUsrMnu {
  position: absolute;
  top: 52px;
  width: 300px;
  filter: drop-shadow(0 4px 25px rgba(0, 0, 0, 0.12));
  background: white;
  border-radius: 16px;
  padding: 20px;
  display: none;
  z-index: 21;
}
header .hdrUsrBx .hdrUsrMnu::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
header .hdrUsrMnu .hdrUsrName {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
header .hdrUsrMnu .hdrUsrName .imgBx {
  width: 50px;
  height: 50px;
  background: var(--text-100);
  border-radius: 50%;
}
header .hdrUsrMnu .hdrUsrName .imgBx img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
header .hdrUsrMnu .hdrUsrName .textBx p {
  color: var(--text-800);
  font-weight: 600;
  font-size: 16px;
}
header .hdrUsrMnu .hdrUsrName .textBx span {
  font-size: 12.5px;
  color: var(--text-400);
}
.jobTitlRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  border-radius: 16px;
  background: var(--text-50);
  padding: 3px;
  margin-bottom: 20px;
}
.jobTitlRow .jobTitle {
  width: 50%;
  height: 100%;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-400);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.jobTitlRow .jobTitle.active {
  color: var(--text-800);
  background: white;
  filter: drop-shadow(1px 1px 8px 2px rgba(0, 0, 0, 0.03));
}
header .usrMnuUl {
  height: 225px;
  overflow: auto;
}
header .usrMnuUl li,
.dashMnu li {
  height: 46px;
}
header .usrMnuUl li a,
header .usrMnuUl li button,
.dashMnu li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border-radius: 16px;
  border: none;
  background: white;
  padding: 0 12px;
}
header .usrMnuUl li a,
.dashMnu li a {
  color: var(--text-800);
}
header .usrMnuUl li a:hover,
.dashMnu li a:hover {
  color: var(--red-500);
}
header .usrMnuUl li a.active,
.dashMnu li a.active {
  background: var(--red-50);
  color: var(--red-500);
}
header .usrMnuUl li button {
  color: var(--red-500);
}
header .usrMnuUl li button:hover {
  color: var(--red-700);
}
header .usrMnuUl li i,
.dashMnu li i {
  font-size: 24px;
}
header .usrMnuUl li span,
.dashMnu li span {
  font-size: 14px;
}

header .hdrBtmRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .hdrMnu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;
}
header .hdrMnu .hdrMnuLnk {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--text-800);
}
header .hdrMnu .hdrMnuLnk i {
  font-size: 20px;
}
header .hdrMnu .hdrMnuLnk span {
  font-size: 14px;
  font-weight: 500;
}
header .hdrMnu .hdrMnuLnk:hover {
  color: var(--red-500);
}
header .hdrBtmRow .addBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: max-content;
  min-width: 120px;
  height: 38px;
  padding: 0 10px;
  background: var(--red-500);
  border-radius: 16px;
  color: white;
  border: none;
}
header .hdrBtmRow .addBtn i {
  font-size: 13px;
}
header .hdrBtmRow .addBtn span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
header .hdrBtmRow .addBtn:hover {
  background: var(--red-600);
}
header .hdrBtmRow .proAccLnk {
  display: none;
}

/*------hdrSideBx------*/
.hdrSideBx {
  position: fixed;
  left: -442px;
  top: 0;
  z-index: 10;
  background: white;
  width: 442px;
  height: 100vh;
  padding-top: 130px;
}
body:has(.hdrRowFixd.fixed) .hdrSideBx {
  padding-top: 66px;
}
.hdrSideBx.opened {
  left: 0;
  box-shadow: 4px 0 6px rgba(0, 0, 0, 0.08);
}
.hdrSideBx .hdrChatLst {
  height: 100%;
}
.tabHeader.sideTabHdr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--text-100);
}
.tabHeader.sideTabHdr li {
  flex: 1;
  width: 100%;
  list-style: none;
}
.tabHeader.sideTabHdr li a {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-500);
  text-align: center;
}
.tabHeader.sideTabHdr a span {
  font-size: 20px;
  line-height: 1;
}
.tabHeader.sideTabHdr a p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.tabHeader.sideTabHdr a.active {
  color: var(--red-500);
  border-bottom-color: var(--red-500);
}
.tabHeader.sideTabHdr a:hover {
  color: var(--red-700);
}
.chatSrch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--text-50);
  border: 1px solid var(--text-100);
  width: calc(100% - 40px);
  height: 46px;
  border-radius: 16px;
  margin: 20px;
}
.chatSrch .srchBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  gap: 4px;
  min-width: max-content;
  color: var(--text-500);
  line-height: 1;
  border-radius: 0 16px 16px 0;
  font-size: 18px;
}
.chatSrch .srchBtn:hover {
  color: var(--red-500);
}
.chatSrch input {
  font-size: 14px;
  color: var(--text-800);
  border: none;
  background: transparent;
  border-radius: 16px 0 0 16px;
}
.chatSrch input:focus {
  background: transparent;
}
.chatSrch:has(input:focus) {
  border-color: var(--blue-500);
}
.chatList {
  margin: 10px 0;
  padding: 0 5px;
  overflow: auto;
}
.chatList::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.hdrSideBx .chatList {
  height: calc(100vh - 300px);
}
body:has(.hdrRowFixd.fixed) .hdrSideBx .chatList {
  height: calc(100vh - 250px);
}
.chatList .chatItem {
  border-bottom: 1px solid var(--text-100);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  cursor: pointer;
}
.chatList .chatItem .itemRight {
  width: calc(100% - 65px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.chatList .chatItem .itemImg {
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #b3fbd1;
}
.chatList .chatItem .itemImg img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.chatList .chatItem .itemText {
  width: calc(100% - 64px);
}
.chatList .chatItem .itemText span,
.chatList .chatItem .itemText p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
}
.chatList .chatItem .itemText h2 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatList .chatItem .itemText p {
  color: var(--text-500);
  margin: 8px 0 5px 0;
}
.chatList .chatItem .itemText a {
  color: var(--text-800);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.chatList .chatItem .itemText span {
  width: calc(100% - 28px);
}
.chatList .chatItem .itemText i {
  font-size: 18px;
}
.chatList .chatItem .itemText a:hover {
  color: var(--blue-500);
}
.chatList .chatItem .itemDate {
  min-width: max-content;
}
.chatList .chatItem .itemDate p {
  font-size: 11.25px;
  color: var(--text-500);
  margin-top: 6px;
}
.chatList .chatItem .itemDate div {
  width: max-content;
  min-width: 20px;
  height: 20px;
  margin: 0 auto 6px auto;
  border-radius: 50%;
  background: var(--red-500);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
}
.chatList .chatItem:hover {
  border-color: var(--red-500);
}
.sidChatBx {
  height: 100%;
  position: relative;
  background: linear-gradient(
    to bottom,
    rgba(188, 204, 139, 0.5),
    rgba(149, 199, 147, 0.5),
    rgba(199, 212, 174, 0.5)
  );
}
.sidChatBx .sidChatTop {
  position: absolute;
  padding: 11px 16px;
  width: 100%;
  background: white;
  z-index: 2;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--text-100);
}
.sidChatBx .sidChatTop .right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.sidChatBx .sidChatTop .backLink {
  font-size: 20px;
  color: var(--text-300);
  background: transparent;
  padding: 0;
  line-height: 1;
}
.sidChatBx .sidChatTop .backLink:hover {
  color: var(--red-500);
}
.sidChatTop .user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.sidChatTop .user .imgBx,
.hdrSideBx .callsList .callUser .callUsrImg {
  width: 52px;
  height: 52px;
  background: #b3fbd1;
  border-radius: 50%;
}
.sidChatTop .user img,
.hdrSideBx .callsList .callUser img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.sidChatTop .user .name {
  max-width: 104px;
}
.sidChatTop .user h3,
.hdrSideBx .callsList .callUser h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-800);
  margin-bottom: 8px;
}
.sidChatTop .user h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidChatTop .user p {
  font-size: 12.5px;
  color: var(--text-400);
}
.sidChatTop .user p.online {
  color: var(--blue-500);
}
.sidChatBx .sidChatPg {
  position: relative;
  top: 75px;
  overflow: auto;
  height: calc(100% - 160px);
}
.sidChatBx .sidChatPg:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/Shape/noise.svg");
  background-size: 6px 6px;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.sidChatBx .sidChatPg .sidChatDiv {
  padding: 0 20px 20px 20px;
}
.sidChatPg .pinnedBx {
  position: sticky;
  left: 0;
  top: 0;
  padding: 0 20px;
  background: white;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.sidChatPg .pinnedBx .text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: var(--text-800);
  width: calc(100% - 38px);
}
.sidChatPg .pinnedBx i {
  font-size: 18px;
}
.sidChatPg .pinnedBx p {
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 28px);
}
.sidChatPg .pinnedBx a {
  display: block;
  font-size: 18px;
  color: var(--text-500);
  padding: 0;
  line-height: 1;
}
.sidChatPg .pinnedBx a:hover {
  color: var(--red-500);
}
.sidChatBx .sidChatPg .msgDate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  line-height: 1;
  margin: 15px auto;
  color: var(--text-500);
  font-size: 12.5px;
  padding: 0 12px;
  height: 27px;
  border-radius: 20px;
  background: var(--text-50);
}
.sidChatBx .sidChatPg .msgBox {
  padding: 14px;
  margin-bottom: 8px;
  width: max-content;
  max-width: 370px;
}
.sidChatBx .sidChatPg .sended {
  border-radius: 18px 5px 18px 18px;
  background: white;
  margin: 8px 0 8px auto;
}
.sidChatBx .sidChatPg .received {
  background: #effdde;
  border-radius: 18px 18px 18px 5px;
  margin: 8px auto 8px 0;
}
.sidChatBx .sidChatPg .msgBox p {
  font-size: 12.5px;
  color: var(--text-800);
  margin-bottom: 8px;
}
.sidChatBx .msgBox .msgBtmRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  color: var(--text-500);
  margin-top: 8px;
  line-height: 1;
}
.sidChatBx .msgBox .msgBtmRow .time {
  font-size: 11.25px;
  font-weight: 500;
}
.sidChatBx .msgBox .msgBtmRow i {
  font-size: 20px;
  display: none;
}
.sidChatBx .msgBox.sended .msgBtmRow i.icon-check {
  display: block;
  font-size: 14px;
  color: #49b23c;
}
.sidChatBx .msgBox.sended .msgBtmRow i.icon-seen {
  display: block;
  color: #49b23c;
}
.sidChatBx .msgBox.seened .msgBtmRow {
  color: #49b23c;
}
.sidChatBx .sidChatBtm {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 66px;
  z-index: 2;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 0 20px;
}
.sidChatBx .sidChatBtm input {
  width: 100%;
  height: 100%;
  border: none;
}
.sidChatBx .sidChatBtm .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--text-50);
  border: 1px solid var(--text-100);
  font-size: 18px;
  color: var(--text-300);
}
.sidChatBx .sidChatBtm .btn:hover {
  color: var(--red-500);
  border-color: var(--red-500);
  background: var(--red-50);
}
.sidChatBx .sidChatBtm .sendBtn {
  background: var(--red-500);
  color: white;
  font-size: 16px;
  display: none;
}
.sidChatBx .sidChatBtm .sendBtn:hover {
  background: var(--red-700);
}
.sidChatBx .sidChatBtm .microphone {
  display: flex;
}
.sidChatBx [x-cloak] {
  display: none !important;
}
.sidChatBx .sidChatBtm .ticket-composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  height: 100%;
}
.sidChatBx .sidChatBtm .ticket-voice-bar {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: white;
}
.sidChatBx .sidChatBtm .ticket-voice-cancel,
.sidChatBx .sidChatBtm .ticket-voice-send {
  flex-shrink: 0;
}
.sidChatBx .sidChatBtm .ticket-voice-send {
  background: var(--red-500);
  color: white;
  border-color: var(--red-500);
}
.sidChatBx .sidChatBtm .ticket-voice-send:hover:not(:disabled) {
  background: var(--red-700);
  border-color: var(--red-700);
  color: white;
}
.sidChatBx .sidChatBtm .ticket-voice-send:disabled,
.sidChatBx .sidChatBtm .ticket-voice-cancel:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.sidChatBx .sidChatBtm .ticket-voice-wave {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-700);
}
.sidChatBx .sidChatBtm .ticket-voice-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red-500);
  animation: ticketVoicePulse 1s ease-in-out infinite;
}
.sidChatBx .sidChatBtm .ticket-voice-timer {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.sidChatBx .sidChatBtm .ticket-voice-label {
  font-size: 12.5px;
  color: var(--text-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes ticketVoicePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.85);
  }
}
.sidChatBx .ticket-voice-msg audio {
  display: block;
  width: min(260px, 100%);
  height: 36px;
}
.sidChatBx .sidChatBtm .ticket-reply-above {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 100%;
  margin-bottom: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidChatBx .sidChatBtm .ticket-reply-errors {
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--red-50);
  color: var(--red-700);
  font-size: 12px;
  line-height: 1.4;
}
.sidChatBx .sidChatBtm .ticket-reply-errors span {
  display: block;
}
.sidChatBx .sidChatBtm .ticket-reply-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.sidChatBx .sidChatBtm .ticket-reply-files:not(:has(.ticket-reply-file-list)):not(.is-uploading) {
  display: none;
}
.sidChatBx .sidChatBtm .ticket-reply-upload-hint {
  display: none;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--text-100);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  color: var(--text-600);
  font-size: 12.5px;
  pointer-events: none;
}
.sidChatBx .sidChatBtm .ticket-reply-files.is-uploading .ticket-reply-upload-hint {
  display: flex;
}
.sidChatBx .sidChatBtm .ticket-reply-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 168px;
  overflow: auto;
  pointer-events: auto;
}
.sidChatBx .sidChatBtm .ticket-reply-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: white;
  border: 1px solid var(--text-100);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.sidChatBx .sidChatBtm .ticket-reply-file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.sidChatBx .sidChatBtm .ticket-reply-file-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--blue-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.sidChatBx .sidChatBtm .ticket-reply-file-meta {
  min-width: 0;
  flex: 1;
}
.sidChatBx .sidChatBtm .ticket-reply-file-meta p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidChatBx .sidChatBtm .ticket-reply-file-meta span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-500);
}
.sidChatBx .sidChatBtm .ticket-reply-file-remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: var(--text-50);
  color: var(--text-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.sidChatBx .sidChatBtm .ticket-reply-file-remove span {
  font-size: 16px;
}
.sidChatBx .sidChatBtm .ticket-reply-file-remove:hover {
  background: var(--red-50);
  color: var(--red-500);
}
.sidChatBx .sidChatBtm .attach .ticket-attach-count {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red-500);
  color: white;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.sidChatBx .sidChatBtm .ticket-emoji-wrap {
  position: relative;
  flex-shrink: 0;
}
.sidChatBx .sidChatBtm .ticket-emoji-wrap .emoji.is-open {
  color: var(--red-500);
  border-color: var(--red-500);
  background: var(--red-50);
}
.sidChatBx .sidChatBtm .ticket-emoji-picker {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 70vw);
  padding: 10px;
  border-radius: 16px;
  background: white;
  border: 1px solid var(--text-100);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  z-index: 6;
}
.sidChatBx .sidChatBtm .ticket-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  max-height: 188px;
  overflow: auto;
}
.sidChatBx .sidChatBtm .ticket-emoji-item {
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: 10px;
  background: transparent;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidChatBx .sidChatBtm .ticket-emoji-item:hover {
  background: var(--text-50);
}

.hdrSideBx .notifList {
  height: calc(100vh - 220px);
  overflow: auto;
}
body:has(.hdrRowFixd.fixed) .hdrSideBx .notifList {
  height: calc(100vh - 160px);
}
.hdrSideBx .notifList .notifItem {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 23px;
  border-bottom: 1px solid var(--text-50);
  padding: 24px;
}
.hdrSideBx .notifList .notifItem.unread {
  background: var(--red-50);
  border-color: var(--red-50);
  position: relative;
}
.hdrSideBx .notifList .notifItem.unread:before {
  position: absolute;
  content: "";
  left: 10px;
  top: 10px;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  background: var(--red-500);
}
.hdrSideBx .notifList .notifItem.unread .icon {
  color: var(--red-500);
}
.hdrSideBx .notifList .notifItem .icon {
  font-size: 26px;
  color: var(--text-300);
}
.hdrSideBx .notifList .notifItem h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-800);
  margin-bottom: 9px;
}
.hdrSideBx .notifList .notifItem .desc {
  font-size: 12.5px;
  color: var(--text-500);
  margin-bottom: 16px;
}
.hdrSideBx .notifList .notifItem .desc span {
  color: var(--red-500);
}
.hdrSideBx .notifList .notifItem .time,
.hdrSideBx .callsList .callTime {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  color: var(--text-500);
  line-height: 1;
}
.hdrSideBx .notifList .notifItem .time i,
.hdrSideBx .callsList .callTime i {
  font-size: 16px;
}
.hdrSideBx .notifList .notifItem .time span,
.hdrSideBx .callsList .callTime span {
  font-size: 11.25px;
}
.hdrSideBx .notifList .notifItem:hover {
  border-color: var(--red-500);
}
.hdrSideBx .callsList .callItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 23px;
  border-bottom: 1px solid var(--text-50);
  padding: 20px;
}
.hdrSideBx .callsList .callUser {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.hdrSideBx .callsList .status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.hdrSideBx .callsList .status.blue {
  color: var(--blue-500);
}
.hdrSideBx .callsList .status.red {
  color: var(--red-500);
}
.hdrSideBx .callsList .status span {
  font-size: 16px;
}
.hdrSideBx .callsList .status p {
  font-size: 12.5px;
}
.hdrSideBx .callsList .callBtns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.hdrSideBx .callsList .callBtns .btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-100);
  background: var(--text-50);
  border-radius: 14px;
  font-size: 18px;
  color: var(--text-300);
}
.hdrSideBx .callsList .callItem .btn:hover {
  color: var(--red-500);
  border-color: var(--red-500);
  background: var(--red-50);
}

/*------messageRow------*/
.messageRow {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  border-radius: 16px;
  background: white;
  height: 680px;
}
.messageRow .hdrChatLst {
  width: 384px;
  height: 100%;
  border-radius: 0 16px 16px 0;
  border-left: 1px solid var(--text-100);
}
.messageRow .hdrChatLst .tabBox {
  height: 100%;
}
.messageRow .hdrChatLst .tabcontent {
  height: calc(100% - 94px);
}
.messageRow .chatList {
  direction: ltr;
  height: calc(100% - 92px);
}
.messageRow .ticketList {
  height: calc(100% - 162px);
}
.messageRow .sidTiktBtn {
  background: var(--red-500);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  max-width: 247px;
  height: 38px;
  padding: 0 10px;
  margin: 30px auto 20px auto;
  border-radius: 16px;
  border: none;
}
.messageRow .sidTiktBtn i {
  font-size: 16px;
}
.messageRow .sidTiktBtn span {
  font-size: 14px;
  font-weight: 700;
}
.messageRow .sidTiktBtn:hover {
  background: var(--red-700);
}
.messageRow .sidChatBx .sidChatTop {
  border-radius: 16px 0 0 0;
}
.messageRow .sidChatTop .backLink {
  display: none;
  margin-bottom: 0;
}
.messageRow .sidChatTop .left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.messageRow .sidChatTop .left .closTiktBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-800);
  height: 39px;
  padding: 0 15px;
  border-radius: 16px;
  border: 1px solid var(--text-200);
  background: white;
}
.messageRow .sidChatTop .left .closTiktBtn:hover {
  border-color: var(--red-500);
  color: var(--red-500);
}
.messageRow .sidChatBx {
  width: calc(100% - 384px);
  border-radius: 16px 0 0 16px;
}
.messageRow .sidChatBx .sidChatBtm {
  border-radius: 0 0 0 16px;
}

/*==================topBnrSec=================*/
.topBnrSec {
  width: 100%;
  height: 498px;
  overflow: hidden;
}
.topBnrSec .topBnrImg {
  width: 100%;
  height: 468px;
}
.topBnrSec .topBnrImg .bnrImg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}
.topBnrSec .topBnrImg .shape {
  position: absolute;
  left: 0;
  bottom: -44px;
  z-index: 3;
  width: 100%;
  height: auto;
}
.topBnrSec .topBnrImg .coverBx {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(10, 14, 40, 0.15) 0%,
    rgba(10, 14, 40, 0.55) 41%,
    #0a0e28 100%
  );
}
.topBnrSec .content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: max-content;
  z-index: 4;
  padding-top: 70px;
}
.topBnrSec .content .title {
  color: white;
  width: 100%;
  max-width: 507px;
  margin-bottom: 50px;
}
.topBnrSec .content .title h1 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
}
.topBnrSec .content .title h1 span {
  color: var(--red-500);
}
.topBnrSec .content .title p {
  font-size: 14px;
}
.topBnrSec .content .srchBx {
  width: 100%;
  max-width: 524px;
  height: 59px;
  background: white;
  border: 1px solid var(--text-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  border-radius: 50px;
}
.topBnrSec .srchBx .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  min-width: max-content;
  padding: 0 16px;
}
.topBnrSec .srchBx .selLocBtn {
  height: 42px;
  color: var(--text-500);
}
.topBnrSec .srchBx .selLocBtn i {
  font-size: 14px;
}
.topBnrSec .srchBx .selLocBtn span {
  font-size: 14px;
}
.topBnrSec .srchBx .selLocBtn:hover {
  color: var(--red-500);
}
.topBnrSec .srchBx input {
  border: none;
  font-size: 14px;
  color: var(--text-800);
}
.topBnrSec .srchBx .srchBtn {
  height: 100%;
  background: var(--red-500);
  color: white;
  border-radius: 50px;
}
.topBnrSec .srchBx .srchBtn i {
  font-size: 17px;
}
.topBnrSec .srchBx .srchBtn span {
  font-size: 14px;
  font-weight: 600;
}
.topBnrSec .srchBx .srchBtn:hover {
  background: var(--red-700);
}

/*===============jobCatSec===============*/
.jobCatSec {
  margin: 60px 0 70px 0;
}
.jobCatSec .jobCatLst {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.jobCatSec .jobCatLst a {
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  border: 1px solid var(--text-100);
  border-radius: 16px;
}
.jobCatSec .jobCatLst a span {
  font-size: 36px;
}
.jobCatSec .jobCatLst a strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-800);
}
.jobCatSec .jobCatLst a p {
  font-size: 11.25px;
  font-weight: 500;
  color: var(--text-400);
}
.jobCatSec .jobCatLst a:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

.catLstTwo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.catLstTwo ul {
  width: 33%;
}
.catLstTwo li {
  margin-bottom: 40px;
}
.catLstTwo li .title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}
.catLstTwo li span {
  font-size: 36px;
}
.catLstTwo li strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-800);
}
.catLstTwo li p {
  font-size: 11.25px;
  font-weight: 500;
  color: var(--text-400);
}
.catLstTwo li a:not(.title) {
  font-size: 14px;
  color: var(--text-600);
  display: block;
  margin-bottom: 20px;
}
.catLstTwo li a:not(.title):hover {
  color: var(--blue-500);
}
.catLstTwo li a.title:hover strong {
  color: var(--blue-500);
}

/*==================whySec===============*/
.whySec {
  margin: 70px 0 60px 0;
}
.whySec .whySecRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.whySec .whySecRow .whySecLst {
  padding-top: 20px;
}
.whySec .whySecLst ul {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 32px 90px;
  flex-wrap: wrap;
}
.whySec .whySecLst ul li {
  width: 360px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}
.whySec .whySecLst li span {
  font-size: 24px;
  color: var(--text-300);
}
.whySec .whySecLst li h3 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-800);
  margin-bottom: 5px;
}
.whySec .whySecLst li p {
  font-size: 12.5px;
  color: var(--text-500);
}
.whySec .whySecRow .whySecImg {
  width: 377px;
  min-width: 377px;
  height: 489px;
  border-radius: 16px;
}
.whySec .whySecRow .whySecImg:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 16px;
  top: -20px;
  right: -20px;
  background: var(--text-50);
}
.whySec .whySecImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 2;
}

/*==================coperatSec=================*/
.coperatSec {
  margin: 50px 0;
}
.coperatSec .coperatRow {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
}
.coperatSec .coperatBx {
  width: 50%;
  border-radius: 16px;
  border: 1px solid var(--text-100);
  padding: 42px 60px;
}
.coperatSec .coperatTtl {
  text-align: center;
  margin: 0 auto 38px auto;
  width: max-content;
}
.coperatSec .coperatTtl .iconBx {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px dashed var(--blue-300);
  padding: 8px;
  margin: 0 auto;
}
.coperatSec .coperatTtl .iconBx div {
  width: 100%;
  height: 100%;
  background: var(--blue-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}
.coperatSec .coperatTtl h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-800);
  margin-top: 15px;
}
.coperatSec .coperatUl li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
  margin-bottom: 32px;
}
.coperatSec .coperatUl li:last-child {
  margin-bottom: 0;
}
.coperatSec .coperatUl li:before {
  position: absolute;
  content: "";
  top: 50px;
  width: 1px;
  height: 55%;
  border-left: 2px dashed var(--blue-300);
}
.coperatSec .coperatUl li:last-child::before {
  display: none;
}
.coperatSec .coperatUl .num {
  width: 43px;
  min-width: 43px;
  height: 43px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--blue-500);
  background: var(--blue-50);
  z-index: 2;
}
.coperatSec .coperatUl .text h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-800);
  margin-bottom: 6px;
}
.coperatSec .coperatUl .text p {
  font-size: 14px;
  color: var(--text-500);
}

/*==================expertSec=================*/
.expertSec {
  margin: 50px 0;
}
.hasSwprBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.hasSwprBtn .swiperBtns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: 44px;
}
.hasSwprBtn .swiper-button-next,
.hasSwprBtn .swiper-button-prev {
  position: static;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--text-100);
  margin: 0;
}
.hasSwprBtn .swiper-button-next:after,
.hasSwprBtn .swiper-button-prev::after {
  font-size: 15px;
  color: var(--text-800);
}
.hasSwprBtn .swiper-button-next:hover,
.hasSwprBtn .swiper-button-prev:hover {
  border-color: var(--blue-600);
}
.expertSwpr .swiper-slide {
  width: max-content;
  padding: 1px 10px 15px 10px;
}
.expertSwpr .swiper-slide a {
  width: 200px;
  border: 1px solid var(--text-100);
  border-radius: 16px;
  background: white;
  display: block;
  padding: 30px 18px;
}
.expertSwpr a .exprtImg {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #ffd2f3;
  margin: 0 auto;
}
.expertSwpr a .exprtImg img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.expertSwpr a h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-800);
  margin: 20px auto;
  text-align: center;
}
.expertSwpr a .exprtJob {
  background: var(--red-50);
  color: var(--red-500);
  border-radius: 50px;
  height: 25px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 0 12px;
  margin: 0 auto;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
.expertSwpr a ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 35px;
}
.expertSwpr a li,
.blgCard .blgCrdFtr li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.expertSwpr a li i,
.blgCard .blgCrdFtr li i {
  font-size: 11.5px;
  color: var(--text-400);
}
.expertSwpr a li p,
.blgCard .blgCrdFtr li p {
  font-size: 11.5px;
  color: var(--text-800);
}
.expertSwpr a li span,
.blgCard .blgCrdFtr li span {
  font-size: 16px;
  margin-top: -4px;
}
.expertSwpr a .score span,
.blgCard .blgCrdFtr .score span {
  color: #ffb700;
}
.expertSwpr a .project span {
  background-image: linear-gradient(to right, #920ae6, #5268f8);
  background-clip: text;
  color: transparent;
}
.expertSwpr .swiper-slide a:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

/*==================startNowSec=================*/
.startNowSec {
  margin: 60px auto;
}
.startNowSec .startNowBx {
  background: var(--red-500);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.startNowSec .pattern {
  left: 0;
  top: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  opacity: 26%;
  object-fit: cover;
}
.startNowSec .content {
  z-index: 2;
  padding: 60px 20px 70px 20px;
}
.startNowSec .content h2 {
  font-size: 25px;
  font-weight: 700;
  color: white;
  text-align: center;
}
.startNowSec .content .links {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
.startNowSec .content .links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 69px;
  background: white;
  border: 1px solid white;
  border-radius: 50px;
  padding: 8px 22px 8px 8px;
}
.startNowSec .links a span {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-800);
  min-width: max-content;
}
.startNowSec .links a div {
  width: 53px;
  min-width: 53px;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red-500);
  border: 1px solid var(--red-500);
  color: white;
  font-size: 21px;
}
.startNowSec .content .links a:hover {
  border-color: var(--red-700);
}
.startNowSec .content .links a:hover div {
  background: white;
  border-color: var(--red-500);
  color: var(--red-500);
}

/*==================homeBlgSec=================*/
.homeBlgSec {
  margin: 50px 0;
}
.homBlgSwpr .swiper-slide {
  width: max-content;
  padding: 1px 10px 15px 10px;
  height: auto;
  display: flex;
}
.homBlgSwpr .swiper-wrapper {
  align-items: stretch;
}
.homBlgSwpr .swiper-slide .blgCard {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.homBlgSwpr .blgCard .blgCrdFtr {
  margin-top: auto;
}
.blgCard {
  width: 310px;
  padding: 12px;
  border: 1px solid var(--text-100);
  background: white;
  border-radius: 16px;
  display: block;
}
.blgCard .blgCrdImg {
  width: 100%;
  height: 159px;
  border-radius: 12px;
  background: var(--text-50);
}
.blgCard .blgCrdImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.blgCard .blgCrdTxt {
  margin-bottom: 12px;
  padding: 12px;
}
.blgCard .blgCrdTxt h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-800);
  margin-bottom: 10px;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blgCard .blgCrdTxt p {
  font-size: 12.5px;
  color: var(--text-500);
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blgCard .blgCrdFtr {
  border-top: 1px solid var(--text-50);
  padding: 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.blgCard .blgCrdFtr .project span {
  color: var(--blue-500);
}
.blgCard:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

/*==================helpSec=================*/
.helpSec {
  margin: 50px 0;
}
.helpSec .helpSecBx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  padding: 40px;
  border: 1px solid var(--text-100);
  border-radius: 16px;
}
.helpSec .helpVideo {
  width: 514px;
  height: 287px;
}
.helpSec .helpVideo .iframeBox,
.helpSec .helpVideo .video-js {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}
.helpSec .helpVideo .h_iframe-aparat_embed_frame .ratio {
  display: block;
  width: 100%;
  height: auto;
}
.helpSec .helpVideo .h_iframe-aparat_embed_frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
.helpSec .helpVideo .vjs-poster,
.helpSec .helpVideo .video-js .vjs-tech {
  border-radius: 16px;
}
.helpSec .helpVideo .video-js .vjs-big-play-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
}
.helpSec .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  color: var(--red-500);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.helpSec .helpVideo .vjs-has-started .vjs-control-bar {
  border-radius: 0 0 16px 16px;
}
.helpSec .helpVideo:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: var(--blue-50);
}
.helpSec .helpVideo.rightVid:after {
  top: 20px;
  left: -20px;
}
.helpSec .helpVideo.leftVid:after {
  right: -20px;
  top: -20px;
}
.helpSec .helpText .tagBox {
  font-size: 11.25px;
  color: var(--blue-500);
  font-weight: 500;
  height: 29px;
  padding: 0 16px;
  border-radius: 50px;
  background: var(--blue-50);
  width: max-content;
  display: flex;
  align-items: center;
  line-height: 1;
}
.helpSec .helpText {
  max-width: 595px;
}
.helpSec .helpText h2 {
  margin: 18px 0 25px auto;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-800);
}
.helpSec .helpText ul {
  margin-top: 20px;
}
.helpSec .helpText li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 11px;
}
.helpSec .helpText li:last-child {
  margin-bottom: 0;
}
.helpSec .helpText li span {
  color: var(--blue-500);
  font-size: 18px;
}
.helpSec .helpText p,
.helpSec .helpText li i {
  font-size: 14px;
  color: var(--text-500);
}
.helpSec .helpText .showVidBtn {
  background: var(--red-500);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  width: max-content;
  padding: 0 18px;
  min-width: 168px;
  height: 42px;
  border-radius: 16px;
}
.helpSec .helpText .showVidBtn i {
  font-size: 14px;
  font-weight: 600;
}
.helpSec .helpText .showVidBtn span {
  font-size: 16px;
}
.helpSec .helpText .showVidBtn:hover {
  background: var(--red-700);
}

/*==================loginSec=================*/
.loginSec {
  padding: 60px 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background: #f0f5fc;
}
.loginSec .loginBox {
  background: white;
  width: 100%;
  max-width: 421px;
  border-radius: 16px;
  box-shadow: 2px 4px 35px rgba(0, 0, 0, 0.04);
  padding: 32px;
  margin: 0 auto 24px auto;
}
.loginSec .loginLogo {
  display: block;
  width: 60px;
  height: auto;
  margin: 0 auto 16px auto;
}
.loginSec .loginLogo img {
  width: 100%;
  height: auto;
}
.loginSec .pgTitle {
  margin-bottom: 30px;
  text-align: center;
}
.loginSec .pgTitle h1 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--text-800);
}
.loginSec .pgTitle p {
  font-size: 14px;
  color: var(--text-500);
}
.logTabHdr {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  width: 100%;
  height: 46px;
  background: var(--text-50);
  border-radius: 16px;
  padding: 3px;
}
.logTabHdr li {
  width: 50%;
  height: 100%;
}
.loginBox .logTabHdr li {
  width: 50%;
}
.myProjcts .logTabHdr li {
  width: 33.33%;
}
.myFavorits .logTabHdr,
.projectsPg .logTabHdr {
  background: white;
}
.myFavorits .logTabHdr a.active,
.projectsPg .logTabHdr a.active {
  background: var(--blue-50);
}
.myFavorits .logTabHdr a.active i,
.projectsPg .logTabHdr a.active i {
  color: var(--blue-500);
}
.logTabHdr a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 14px;
}
.logTabHdr a span {
  font-size: 24px;
}
.logTabHdr a span::before {
  color: var(--text-400);
}
.logTabHdr a p {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-400);
}
.logTabHdr a i {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-400);
}
.logTabHdr a.active {
  background: white;
}
.logTabHdr a.active span::before {
  color: var(--blue-500);
}
.logTabHdr a.active p {
  color: var(--blue-500);
  font-weight: 600;
}
.logTabHdr a.active i {
  color: var(--text-800);
}
.loginBox .logFrm {
  direction: ltr;
}
.auth-error-msg {
  display: block;
  margin-top: 6px;
  padding: 0 4px;
}
.jobForm .logInptBx label {
  font-size: 14px;
  color: var(--text-800);
  width: 100%;
  padding-right: 4px;
}
.jobForm .logInptBx .input-group {
  border: 1px solid var(--text-200);
  border-radius: 16px;
  width: 100%;
  height: 46px;
}
.jobForm .logInptBx textarea {
  border: 1px solid var(--text-200);
  background: transparent;
  font-size: 14px;
  color: var(--text-800);
  border-radius: 16px;
}
.jobForm .logInptBx textarea:focus {
  border: 1px solid var(--blue-500);
}
.jobForm .logInptBx input {
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text-800);
  border-radius: 16px 0 0 16px;
  padding-right: 0;
}
.jobForm .logInptBx input:focus {
  border: none;
  background: transparent;
}
.jobForm .logInptBx .input-group-text {
  color: var(--text-400);
  font-size: 24px;
  border: none;
  border-radius: 0 16px 16px 0;
  background: transparent;
}
.jobForm .logInptBx .toggle-password {
  cursor: pointer;
}
.jobForm .logInptBx .input-group:has(input:focus) {
  border-color: var(--blue-500);
}
.wrkCmntFrm .jobForm h4,
.emplyrOpnion h4 {
  margin-bottom: 32px;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-800);
}
.emplyrOpnion .emptyCmnt {
  width: 100%;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.emplyrOpnion .emptyCmnt div {
  width: 100%;
  max-width: 222px;
  margin: 0 auto;
  color: var(--text-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
.emplyrOpnion .emptyCmnt p {
  font-weight: 500;
  font-size: 12.5px;
}
.emplyrOpnion .emptyCmnt span {
  font-size: 30px;
}
.wrkCmntFrm .jobForm h5 {
  color: var(--text-800);
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 12px;
}
.wrkCmntFrm .disablFrm {
  opacity: 0.5;
  cursor: not-allowed;
}
.wrkCmntFrm .disablFrm .rating-stars .hoverStar span,
.wrkCmntFrm .disablFrm .rating-stars .selected span {
  color: var(--text-100);
  cursor: not-allowed;
}
.wrkCmntFrm .unfinished {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-radius: 16px;
  padding: 20px;
  background: var(--blue-50);
  margin: 32px 0;
}
.wrkCmntFrm .unfinished .iconBx {
  width: 35px;
  min-width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--blue-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 17px;
}
.wrkCmntFrm .unfinished .text {
  color: var(--blue-500);
}
.wrkCmntFrm .unfinished p {
  font-weight: 500;
  font-size: 12.5px;
}
.wrkCmntFrm .unfinished span {
  font-size: 11.25px;
  display: block;
}
.logFrm .phoneNum {
  font-size: 14px;
  color: var(--text-500);
  margin: 30px auto 12px auto;
  text-align: center;
}
.logFrm .phoneNum span {
  color: var(--text-800);
}
.logFrm .verifyCod {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}
.logFrm .verifyCod input {
  width: 58px;
  height: 58px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid var(--text-200);
  background: white;
  color: var(--text-800);
  font-weight: 700;
  font-size: 20px;
}
.logFrm .verifyCod input:focus {
  border-color: var(--blue-500);
}
.logFrm .forgetPass {
  margin: 12px 0 30px auto;
  font-size: 12.5px;
  color: var(--text-800);
}
.logFrm .forgetPass a {
  color: var(--red-500);
}
.logFrm .forgetPass a:hover {
  color: var(--red-700);
}
.logFrm .editPhone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--red-500);
}
.logFrm .editPhone i {
  font-size: 18px;
}
.logFrm .editPhone span {
  font-size: 12.5px;
}
.logFrm .editPhone:hover {
  color: var(--red-700);
}
.loginSec .logFrm .loginBtn {
  width: 100%;
  height: 46px;
  background: var(--red-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
  border-radius: 16px;
  border: 1px solid var(--text-200);
  margin: 30px auto;
}
.loginSec .logFrm .loginBtn:hover {
  background: var(--red-700);
}
.loginSec .loginBox .orRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  margin: 30px auto 12px auto;
}
.loginSec .loginBox .orRow span {
  width: 50%;
  height: 1px;
  background: var(--text-50);
}
.loginSec .loginBox .orRow p {
  font-size: 14px;
  color: var(--text-800);
  min-width: max-content;
}
.loginSec .loginBox .googleBtn {
  width: 100%;
  height: 46px;
  border: 1px solid var(--text-200);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-800);
  margin: 12px auto 30px auto;
}
.loginSec .loginBox .googleBtn span {
  font-size: 20px;
}
.loginSec .loginBox .googleBtn p {
  font-size: 14px;
}
.loginSec .loginBox .googleBtn:hover {
  border-color: var(--red-500);
  color: var(--red-500);
}
.loginSec .loginBox .noAccount {
  font-size: 14px;
  color: var(--text-800);
  text-align: center;
  margin: 10px auto;
}
.loginSec .loginBox .noAccount a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--red-500);
  line-height: 1;
}
.loginSec .loginBox .noAccount a span {
  font-weight: 500;
}
.loginSec .loginBox .noAccount a i {
  font-size: 20px;
}
.loginSec .loginBox .noAccount a:hover {
  color: var(--red-700);
}
.loginSec .methodChk {
  position: relative;
  padding-left: 0;
  margin-bottom: 6px;
  cursor: pointer;
}
.loginSec .methodChk input {
  position: absolute;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 2px solid var(--text-100);
  z-index: 2;
}
.loginSec .methodChk label {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid var(--text-100);
  cursor: pointer;
}
.loginSec .methodChk span {
  font-size: 24px;
}
.loginSec .methodChk span::before {
  color: var(--text-400);
}
.loginSec .methodChk p {
  font-size: 12.5px;
  color: var(--text-800);
  margin-bottom: 9px;
}
.loginSec .methodChk i {
  font-size: 12.5px;
  color: var(--text-400);
  display: block;
}
.loginSec .methodChk input:checked {
  background-color: var(--blue-500);
  border-color: var(--blue-500);
}
.loginSec .methodChk input:checked ~ label {
  border-color: var(--blue-500);
  background: var(--blue-50);
}
.loginSec .methodChk input:checked ~ label span::before {
  color: var(--blue-500);
}
.loginSec .emailBox {
  padding: 25px 20px;
  border-radius: 16px;
  margin: 30px auto;
  border: 1px solid var(--text-100);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.loginSec .emailBox .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 50px;
  min-width: 50px;
  height: 50px;
  background: var(--text-50);
  font-size: 22px;
  color: var(--blue-500);
}
.loginSec .emailBox .text {
  width: calc(100% - 62px);
}
.loginSec .emailBox .text p,
.loginSec .emailBox .text i {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
}
.loginSec .emailBox .text p {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-800);
}
.loginSec .emailBox .text i {
  font-size: 12.5px;
  color: var(--text-400);
}
.loginSec .emailBox .status {
  top: 5px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  z-index: 2;
  color: #2bca5d;
  background: #e0ffea;
  border-radius: 16px;
  padding: 0 16px;
  height: 23px;
}
.loginSec .emailBox .status i {
  font-size: 14px;
}
.loginSec .emailBox .status span {
  font-size: 9.5px;
  font-weight: 500;
}
.loginSec .signUpHelp {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background: var(--help-50);
  padding: 20px;
  border-radius: 16px;
  margin: 30px auto;
}
.loginSec .signUpHelp span {
  font-size: 24px;
  color: var(--help-100);
}
.loginSec .signUpHelp p {
  font-size: 12.5px;
  color: var(--help-200);
}

.loginSec .acceptRules {
  color: var(--text-500);
  font-size: 14px;
  width: max-content;
  max-width: 421px;
  margin: 25px auto;
}
.loginSec .acceptRules a {
  color: var(--text-600);
  font-weight: 500;
  text-decoration: underline;
}
.loginSec .acceptRules a:hover {
  color: var(--blue-500);
}

/*==================planSec=================*/
.planSec {
  margin-bottom: 70px;
}
.planSec .planSecTop {
  top: 0;
  left: 0;
  width: 100%;
}
.planSec .planSecBg {
  width: 100%;
  height: 433px;
  background: linear-gradient(to bottom, #920ae6, #5268f8);
}
.planSec .planSecTop .pattern,
.planSec .planSecTop .curvy {
  position: absolute;
  left: 0;
  width: 100%;
}
.planSec .planSecTop .pattern {
  top: 0;
  height: 100%;
  background: url("../img/Shape/Pattern.svg");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.6;
  z-index: 1;
}
.planSec .planSecTop .curvy {
  height: auto;
  bottom: -10px;
  z-index: 2;
}
.planSec .planLstBx {
  z-index: 4;
  padding: 50px 0;
}
.planSec .planLstBx .planSecTtl {
  margin: 0 auto 50px auto;
  max-width: 472px;
  text-align: center;
  color: white;
  z-index: 3;
}
.planSec .planLstBx .planSecTtl h1 {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 10px;
}
.planSec .planLstBx .planSecTtl p {
  font-size: 14px;
}
.planSec .planLstBx .tabHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px auto 55px auto;
  width: max-content;
  height: 56px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 3px;
}
.planSec .tabHeader li {
  width: max-content;
  height: 100%;
}
.planSec .tabHeader a {
  width: max-content;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 50px;
}
.planSec .tabHeader a p {
  font-size: 14px;
  font-weight: 700;
  color: white;
}
.planSec .tabHeader a div {
  background: #ffeb95;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 15px;
  color: var(--help-200);
  font-size: 11.25px;
  font-weight: 600;
}
.planSec .tabHeader a.active p {
  color: transparent;
  background-image: linear-gradient(to right, #920ae6, #5268f8);
  background-clip: text;
}
.planSec .tabHeader a.active {
  background: white;
}
.planSec .planList {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.planSec .planList .planCard {
  display: block;
  width: 25%;
  background: white;
  border: 1px solid white;
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: -2px 4px 50px rgba(0, 0, 0, 0.12);
}
.planSec .planList .planCard.popular {
  border-color: var(--red-500);
}
.planCard .popularTag {
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  background: var(--red-500);
  font-weight: 700;
  font-size: 12.5px;
  color: white;
  border-radius: 50px;
  height: 30px;
  padding: 0 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.planTitle {
  margin-bottom: 32px;
  text-align: center;
}
.planTitle .icon {
  margin: 0 auto 20px auto;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
}
.planTitle .icon.gray {
  background: linear-gradient(140deg, #666e7c, #505866);
}
.planTitle .icon.gold {
  background: linear-gradient(140deg, #f29a0a, #dd7c06);
}
.planTitle .icon.silver {
  background: linear-gradient(140deg, #8e9eb3, #68788f);
}
.planTitle .icon.bronze {
  background: linear-gradient(140deg, #c77931, #a7592e);
}
.planCard .planTitle h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-800);
  margin-bottom: 8px;
}
.planCard .planTitle p {
  font-size: 12.5px;
  color: var(--text-500);
}
.planCard .planPrice {
  text-align: center;
  margin: 32px auto 30px auto;
}
.planCard .planPrice strong {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-800);
}
.planCard .planPrice span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-600);
}
.planCard .planPrice p {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-500);
}
.planCard .features li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  margin-bottom: 16px;
}
.planCard .features li:last-child {
  margin-bottom: 0;
}
.planCard .features li span {
  font-size: 12px;
  color: var(--blue-500);
}
.planCard .features li p {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-700);
  margin-top: -3px;
}
.planCard .features .disable span::before {
  color: var(--text-700);
  content: "\ea1b";
}
.planCard .features .disable {
  opacity: 50%;
}
.planSec .planList .planCard:hover {
  transform: translateY(-12px);
}
.planCard .selButton {
  width: 100%;
  height: 53px;
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  background: white;
  border: 1px solid var(--text-200);
  border-radius: 16px;
  position: relative;
}
.planCard .selButton span {
  color: var(--text-800);
  position: relative;
  z-index: 3;
}
.planCard .selButton:hover {
  background: linear-gradient(
    to right,
    rgba(146, 10, 230, 0.08),
    rgba(82, 104, 248, 0.08)
  );
  border: 1px solid transparent;
}
.planCard .selButton: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;
}
.planCard .selButton:hover span {
  background-image: linear-gradient(to right, #920ae6, #5268f8);
  background-clip: text;
  color: transparent;
}

/*================compareSec===============*/
.compareSec {
  margin: 50px auto;
}
.compareTbl {
  border-radius: 16px;
  background: white;
  border: 1px solid var(--text-100);
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.03);
}
.compareTbl thead tr {
  border-radius: 16px 16px 0 0;
  background: linear-gradient(to right, #faf4fe, #f8f7fe);
}
.compareTbl th,
.compareTbl td {
  background: transparent;
  vertical-align: middle;
}
.compareTbl th {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-800);
  border: navajowhite;
}
.compareTbl.walletTbl th {
  padding: 12px 30px;
  min-width: max-content;
}
.compareSec .compareTbl th {
  padding: 30px;
}
.compareTbl td {
  border-bottom: 1px solid var(--text-50);
  padding: 18px 30px;
}
.compareSec .compareTbl .text {
  font-size: 14px;
  color: var(--text-800);
  min-width: 150px;
}
.compareSec .compareTbl .numbr,
.compareSec .compareTbl td p {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-800);
}
.compareSec .compareTbl td span {
  font-size: 14px;
}
.compareSec .compareTbl td .icon-check {
  color: var(--blue-500);
}
.compareSec .compareTbl td .icon-close {
  color: var(--red-500);
}

.compareTbl.walletTbl .title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.compareTbl.walletTbl .title .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 8px;
}
.compareTbl.walletTbl .icon.blue {
  background: var(--blue-50);
}
.compareTbl.walletTbl .icon.red {
  background: var(--red-50);
}
.compareTbl.walletTbl .title p {
  font-size: 14px;
  color: var(--text-800);
  margin-bottom: 8px;
  min-width: 125px;
}
.compareTbl.walletTbl .title .date {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  color: var(--text-500);
}
.compareTbl.walletTbl .title .date span {
  font-weight: 500;
  font-size: 12.5px;
  margin-top: 2px;
}
.compareTbl.walletTbl .title .date i {
  font-size: 16px;
}
.compareTbl.walletTbl .trackingCde {
  font-size: 14px;
  color: var(--text-800);
  min-width: max-content;
  direction: ltr;
}
.compareTbl.walletTbl .status {
  min-width: 84px;
  height: 28px;
  border-radius: 50px;
  border: 1px solid;
  padding: 6px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12.5px;
}
.compareTbl.walletTbl .status.red {
  background: var(--red-50);
  border-color: var(--red-100);
  color: var(--red-400);
}
.compareTbl.walletTbl .status.green {
  background: #1eb04c26;
  border-color: #1eb04c1f;
  color: #26c073;
}
.compareTbl.walletTbl .status.yellow {
  background: var(--help-50);
  border-color: var(--help-100);
  color: var(--help-100);
}
.compareTbl.walletTbl .amount {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.compareTbl.walletTbl .amount p {
  font-weight: 700;
  font-size: 14px;
  direction: ltr;
}
.compareTbl.walletTbl .amount.blue p {
  color: var(--blue-500);
}
.compareTbl.walletTbl .amount.red p {
  color: var(--red-500);
}
.compareTbl.walletTbl .amount small {
  font-weight: 500;
  font-size: 11.25px;
  color: var(--text-400);
}

/*=================faqSec=================*/
.faqSec {
  margin: 60px 0;
}
.faqSec .faqAcordion {
  margin: 20px auto;
  width: 100%;
  max-width: 860px;
}
.faqAcordion .accordion-item {
  margin-bottom: 8px;
  border: 1px solid var(--text-100);
  border-radius: 16px;
}
.faqAcordion .accordion-item .accordion-button {
  border-radius: 16px 16px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-800);
  padding: 20px 24px;
  text-align: right;
  line-height: 1.7;
}
.faqAcordion .accordion-flush .accordion-item .accordion-button.collapsed {
  border-radius: 16px;
}
.faqAcordion .accordion-button:focus {
  box-shadow: none;
  background: transparent;
  color: unset;
}
.faqAcordion .accordion-button::after {
  width: 15px;
  height: 15px;
  background-size: 15px 15px;
}
.faqAcordion .accordion-body {
  padding: 0 24px 24px 24px;
}
.faqAcordion .accordion-body .text {
  font-size: 14px;
  color: var(--text-500);
  line-height: 1.7;
}

/*==================aboutSec=================*/
.aboutSec {
  margin: 70px 0;
}
.aboutSec .aboutBox {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.aboutSec .aboutBox h1 {
  font-size: 25px;
  font-weight: 700;
  color: var(--text-800);
  margin-bottom: 32px;
}
.aboutSec .aboutBox h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-800);
  margin-bottom: 15px;
}
.aboutSec .aboutBox h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-800);
  margin-bottom: 12px;
}
.aboutSec .aboutBox p {
  font-size: 16px;
  color: var(--text-800);
  margin-bottom: 24px;
}

/*=================topBlgSec=================*/
.topBlgSec {
  margin: 25px 0 50px 0;
}
.topBlgSec .topBlgRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: 20px;
}
.topBlgSec .topPost {
  border-radius: 14px;
  overflow: hidden;
}
.topBlgSec .topPost .topPostTxt {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  border-radius: 14px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
  padding: 18px 20px;
  font-size: 18px;
  font-weight: 700;
  color: white;
  line-height: 1.6;
  z-index: 2;
}
.topBlgSec .topPost img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
.topBlgSec .rightPost {
  width: 50%;
  height: 359px;
}
.topBlgSec .topBlgLft {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  width: 50%;
}
.topBlgSec .topBlgLft .leftPost {
  width: 49%;
  height: 174px;
}
.topBlgSec .topPost:hover img {
  transform: scale(1.1);
}

/*=================lastBlgSec=================*/
.lastBlgSec {
  margin: 50px 0;
}
.lastBlgSec .lastBlgLst {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 28px 18px;
  margin: 30px auto 50px auto;
}

/*=================blogSec=================*/
.blogSec {
  margin: 25px 0;
}
.blogSec .blgSecBx {
  width: 100%;
  max-width: 860px;
  margin: 0 auto 50px auto;
}
.blgSecBx .blgCntnt img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.blgSecBx .blgCntnt h1,
.blgSecBx .blgCntnt h2,
.blgSecBx .blgCntnt h3,
.blgSecBx .blgCntnt h4,
.blgSecBx .blgCntnt h5,
.blgSecBx .blgCntnt h6 {
  color: var(--text-800);
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 12px;
}
.blgSecBx .blgCntnt h1 {
  font-size: 20px;
  margin-bottom: 15px;
  line-height: 1.7;
}
.blgSecBx .blgCntnt h2 {
  font-size: 18px;
}
.blgSecBx .blgCntnt h3 {
  font-size: 16px;
  font-weight: 600;
}
.blgSecBx .blgCntnt h4,
.blgSecBx .blgCntnt h5,
.blgSecBx .blgCntnt h6 {
  font-size: 16px;
}
.blgSecBx .blgCntnt strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-800);
  margin-bottom: 12px;
}
.blgSecBx .blgCntnt ul {
  margin-bottom: 25px;
}
.blgSecBx .blgCntnt ul li,
.blgSecBx .blgCntnt p {
  font-size: 16px;
  color: var(--text-800);
  margin-bottom: 32px;
  line-height: 2;
}
.blgSecBx .blgCntnt ul li {
  margin-bottom: 10px;
}
.blgSecBx .blgCntnt p span,
.blgSecBx .blgCntnt p a {
  color: var(--red-500);
  display: inline-block;
}
.blgSecBx .blgCntnt .shareRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 35px 0;
}
.blgSecBx .blgCntnt .shareRow i {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-500);
}
.blgSecBx .blgCntnt .shareRow a {
  display: inline-block;
  color: var(--text-300);
  margin-right: 8px;
  line-height: 1;
}
.blgSecBx .blgCntnt .shareRow a:hover {
  color: var(--red-500);
}
.blgSecBx .blgCntnt .shareRow a .icon-link-04-2 {
  font-size: 19px;
}
.blgSecBx .blgCntnt .shareRow a .icon-telegram-1 {
  font-size: 20px;
}
.blgSecBx .blgCntnt .shareRow a .icon-linkedin-fill {
  font-size: 22px;
}
.blgSecBx .blgCntnt .shareRow a .icon-instagram-fill {
  font-size: 22px;
}
.blgSecBx .blgCntnt .date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 32px 0;
}
.blgSecBx .blgCntnt .date p {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-500);
  margin-bottom: 0;
}
.blgSecBx .blgCntnt ol {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 33px;
  margin-bottom: 0;
  padding: 0;
}
.blgSecBx .blgCntnt ol li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.blgSecBx .blgCntnt ol li:first-child span {
  color: var(--blue-500);
}
.blgSecBx .blgCntnt ol li:last-child span {
  color: #ffb700;
}
.blgSecBx .blgCntnt ol span {
  font-size: 16px;
  margin-top: -4px;
}
.blgSecBx .blgCntnt .date ol p {
  font-size: 11.5px;
  color: var(--text-800);
  margin-bottom: 0;
}
.blgSecBx .blgCntnt ol i {
  font-size: 11.5px;
  color: var(--text-400);
}
.blgSecBx .cmntFrm {
  margin-bottom: 40px;
}
.blgSecBx .cmntFrm h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-800);
  margin-bottom: 40px;
}
.blgSecBx .cmntFrm h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-800);
  margin-bottom: 12px;
}
.blgSecBx .cmntFrm .rating-stars {
  margin-bottom: 25px;
}
.jobForm .addCmntBtn {
  width: max-content;
  min-width: 140px;
  height: 38px;
  padding: 0 15px;
  border-radius: 20px;
  background: var(--red-500);
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: white;
}
.jobForm .addCmntBtn:hover {
  background: var(--red-700);
}
.cmntBox {
  border: 1px solid var(--text-100);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.cmntBox .cmntBxHdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}
.cmntBox .cmntBxHdr .user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.cmntBox .cmntBxHdr .imgBox {
  width: 48px;
  height: 48px;
  background: var(--text-200);
  border-radius: 50%;
}
.cmntBox .cmntBxHdr .imgBox img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.cmntBox .cmntBxHdr .name h3 {
  color: var(--text-800);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
.cmntBox .cmntBxHdr .date {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-400);
}
.cmntBox .cmntBxBdy p {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-800);
}
.cmntBox .cmntBxBdy a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--red-500);
  margin-top: 20px;
}
.cmntBox .cmntBxBdy a span {
  font-size: 12.5px;
  font-weight: 600;
}
.cmntBox .cmntBxBdy a i {
  font-size: 20px;
}
.cmntBox .cmntBxBdy a:hover {
  color: var(--red-700);
}
.cmntBox .cmntBxHide {
  border-top: 1px solid var(--text-100);
  padding-top: 16px;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--text-500);
}
.cmntBox .commentTruncated {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmntBox .cmntBxFtr {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  border: 1px solid var(--text-100);
  border-radius: 16px;
  padding: 12px;
  color: var(--blue-500);
  margin-top: 20px;
}
.cmntBox .cmntBxFtr p {
  font-weight: 500;
  font-size: 12.5px;
  margin-top: 2px;
}
.cmntBox .cmntBxFtr span {
  font-size: 20px;
}
.cmntBox .cmntBxFtr:hover {
  color: var(--blue-600);
}

/*================notFoundSec===============*/
.notFoundSec {
  margin: 80px 0;
}
.notFoundSec .notFoundBx {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  max-width: 385px;
}
.notFoundSec img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 14px;
}
.notFoundSec h1 {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-800);
  margin-bottom: 12px;
}
.notFoundSec p {
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--text-500);
}
.notFoundSec a {
  color: var(--red-500);
  font-size: 14px;
  font-weight: 700;
  display: block;
}
.notFoundSec a:hover {
  color: var(--red-700);
}

/*===============serviceSwpr==============*/
.serviceSwpr .swiper-slide {
  width: max-content;
  padding: 0 3px 15px 3px;
}
.serviceCrd {
  background: white;
  border-radius: 16px;
  padding: 4px;
  width: 318px;
  display: block;
}
.serviceSwpr .swiper-slide .serviceCrd {
  width: 318px;
}
.serviceCrd .serviceImg {
  width: 100%;
  height: 127px;
  border-radius: 14px 14px 2px 2px;
}
.serviceCrd .serviceImg img {
  width: 100%;
  height: 100%;
  border-radius: 14px 14px 2px 2px;
  object-fit: cover;
}
.serviceCrd .serviceImg .servcCrdMnu {
  position: absolute;
  inset-inline-start: 6px;
  top: -38px;
  transition: all 0.6s;
}
.serviceCrd .serviceImg .servcCrdMnu .opnKbabMnu {
  background: white;
  box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.15);
  padding: 7px;
  border-radius: 50%;
  font-size: 16px;
}
.profilSec .projectsBx .servicesLst .serviceCrd {
  overflow: hidden;
}
.profilSec .projectsBx .servicesLst .serviceCrd:hover .serviceImg .servcCrdMnu {
  top: 12px;
}
.serviceCrd .serviceBdy {
  padding: 18px 8px;
}
.serviceCrd .serviceBdy h2 {
  width: 100%;
  height: 37px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-800);
  margin-bottom: 18px;
}
.serviceCrd .serviceBdy p {
  font-size: 14px;
  color: var(--text-500);
  overflow: hidden;
  text-overflow: ellipsis;
}
.serviceCrd:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

.favoritList {
  display: flex;
  align-items: start;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.favoritList .serviceCrd,
.favoritList .exprtSwprCrd {
  width: 310px;
}
.favoritList .exprtSwprCrd {
  border: 4px solid white;
  height: 207px;
}

/*==================modals=================*/
.locModal .modal-dialog {
  max-width: 420px;
}
.proposeMdl .modal-dialog {
  max-width: 612px;
}
.proposeMdl .modal-content,
.locModal .modal-content {
  border-radius: 16px;
  padding: 10px 28px;
}
.locModal .mdlReqNotif {
  margin: 15px 0 32px 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-800);
}
.categoryMdl .modal-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}
.shoghlMdl .modal-header {
  padding: 1rem 0px;
  margin-bottom: 10px;
}
.shoghlMdl .modal-title,
.categoryMdl .modal-title h5 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-800);
}
.shoghlMdl .modal-header .btn-close {
  font-size: 15px;
}
.shoghlMdl .modal-header div button {
  display: flex;
  font-size: 22px;
  color: var(--text-300);
  padding: 0;
}
.shoghlMdl .modal-header div button:hover {
  color: var(--text-800);
}
.shoghlMdl .modal-body {
  padding: 1rem 0;
}
.shoghlMdl .modal-footer {
  flex-wrap: nowrap;
  border-top: none;
  padding: 0.2rem 0 1rem 0;
}
.shoghlMdl .modal-footer .btn {
  height: 46px;
  width: 50%;
  border-radius: 16px;
  border: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.shoghlMdl .modal-footer .cancelBtn {
  background: var(--text-50);
  color: var(--text-800);
  font-weight: 500;
}
.shoghlMdl .modal-footer .cancelBtn:hover {
  background: var(--text-200);
}
.shoghlMdl .modal-footer .saveBtn {
  background: var(--red-500);
  font-weight: 700;
  color: white;
}
.shoghlMdl .modal-footer .saveBtn:hover {
  background: var(--red-700);
}
.shoghlMdl .selCountry .selInput {
  width: 100%;
  background: var(--text-50);
  border: 1px solid var(--text-50);
  border-radius: 16px;
  height: 53px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-800);
  padding: 0 12px;
}
.shoghlMdl .selCountry .selInput:focus {
  border-color: var(--text-400);
}
.shoghlMdl .countryLst {
  max-height: 230px;
  overflow: auto;
  padding: 0 8px;
}
.shoghlMdl .countryLst::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.shoghlMdl .countryLst li {
  border-bottom: 1px solid var(--text-100);
}
.shoghlMdl .countryLst li:last-child {
  border-bottom: none;
}
.shoghlMdl .countryLst li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding-left: 3px;
}
.shoghlMdl .countryLst li a div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.shoghlMdl .countryLst li img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.shoghlMdl .countryLst li p {
  font-size: 16px;
  color: var(--text-800);
}
.shoghlMdl .countryLst li i {
  font-size: 24px;
}
.shoghlMdl .countryLst li span {
  font-size: 14px;
  color: var(--text-400);
  transition: all 0.6s;
}
.shoghlMdl .countryLst li a:hover span {
  color: var(--red-500);
}
.shoghlMdl .selCountry .selctdCity {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  overflow: auto;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.shoghlMdl .selCountry .selctdCity::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.shoghlMdl .selctdCity li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 20px;
  min-width: max-content;
  height: 35px;
  border: 1px solid var(--blue-100);
  background: var(--blue-50);
  border-radius: 16px;
}
.shoghlMdl .selctdCity li span {
  font-size: 11.25px;
  font-weight: 500;
  color: var(--blue-500);
  line-height: 1;
}
.shoghlMdl .selctdCity li button {
  padding: 0;
  color: var(--blue-200);
  font-size: 14px;
  display: flex;
  align-items: center;
}
.shoghlMdl .selCountry .cityList {
  width: 100%;
  max-height: 300px;
  overflow: auto;
}
.shoghlMdl .cityList::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.shoghlMdl .cityList li {
  border-bottom: 1px solid var(--text-100);
}
.shoghlMdl .cityList li:last-child {
  border-bottom: none;
}
.shoghlMdl .cityList .form-check {
  height: 60px;
  display: flex;
  align-items: center;
  width: 100%;
}
.shoghlMdl .cityList label {
  font-size: 16px;
  color: var(--text-800);
  width: 100%;
}
.shoghlMdl .cityList input {
  border-color: var(--text-300);
  width: 22px;
  height: 22px;
}
.shoghlMdl .cityList input:checked {
  background-color: var(--blue-500);
  border-color: var(--blue-500);
}
.shoghlMdl .cityList li:first-child input {
  background-color: var(--blue-500);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.shoghlMdl .cityList li:first-child input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.shoghlMdl .chngPlanTxt {
  font-size: 14px;
  color: var(--text-800);
}
.shoghlMdl .chngPlanTxt strong {
  font-weight: 700;
}
.shoghlMdl .countryLst .flagFallback {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-500);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shoghlMdl .cityList .checkAll {
  background-color: var(--blue-500);
  border-color: var(--blue-500);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.shoghlMdl .cityList .checkAll:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.shoghlMdl #locModal2Country {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-400);
}

/*==================footer=================*/
footer {
  border-top: 1px solid var(--text-100);
  padding-top: 40px;
}
.footerRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--text-100);
}
.footerRow .ftrRight {
  max-width: 361px;
}
.footerRow .ftrTxt {
  margin: 10px 0 15px 0;
}
.footerRow .ftrTxt p {
  font-size: 14px;
  color: var(--text-500);
}
.footerRow .ftrSocial {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.footerRow .ftrSocial a {
  font-size: 24px;
  color: var(--text-300);
  display: block;
}
.footerRow .ftrSocial a:hover {
  color: var(--red-500);
}
.footerRow .foterMnu .title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-800);
  margin-bottom: 25px;
}
.footerRow .foterMnu li {
  margin-bottom: 20px;
}
.footerRow .foterMnu a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.footerRow .foterMnu a i {
  font-size: 16px;
  color: var(--text-300);
}
.footerRow .foterMnu a span {
  font-size: 12.5px;
  color: var(--text-500);
}
.footerRow .foterMnu a p {
  font-size: 12.5px;
  color: var(--text-800);
}
.footerRow .foterMnu a:hover span {
  color: var(--blue-600);
}
.footerBtm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 12px 0;
}
.footerBtm .copyright {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.footerBtm .copyright p {
  font-size: 12.5px;
  color: var(--text-500);
}
.footerBtm .copyright a {
  color: var(--red-500);
}
.footerBtm .copyright a:hover {
  color: var(--red-600);
}
.footerBtm .ftrNamad {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.footerBtm .ftrNamad a {
  width: 63px;
  height: auto;
  display: flex;
  align-items: center;
}
.footerBtm .ftrNamad img {
  width: 100%;
  height: auto;
}
.footerBtm .ftrNamad a:hover img {
  transform: scale(1.09);
}