@media (max-width: 1399px) {
  .notFoundSec {
    margin: 60px 0;
  }
  .whySec .whySecRow .whySecLst {
    padding-top: 0;
  }
  .helpSec .helpText {
    max-width: unset;
  }
}
@media (min-width: 768px) and (max-width: 1399px) {
  .profilSec .walltCard .cardNumber {
    gap: 30px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .dashMain .suggestLst .suggestCrd {
    padding: 14px 12px;
  }
  .suggestLst .suggestCrd .showLink {
    font-size: 12px;
    height: 32px;
    padding: 0 12px;
  }
  .profilSec .waltCrdList .walltCard {
    width: 32.1%;
  }
  .serviceMdl .servicSwipr .bigSwiper .swiper-slide {
    height: 430px;
  }
  .profilSec .projectsBx .servicesLst .serviceCrd {
    width: 271px;
  }
  .profilSec .projectsBx .servicesLst {
    gap: 10px;
  }
  .profilSec .projectsBx .prjctCard {
    padding: 14px;
  }
  .profilSec .servicCrd .cardImg {
    height: 400px;
  }
  .favoritList {
    gap: 15px;
  }
  .favoritList .serviceCrd {
    width: 252px;
  }
  .favoritList .exprtSwprCrd {
    width: 252px;
    height: 180px;
  }
  .messageRow .hdrChatLst {
    width: 325px;
  }
  .messageRow .sidChatBx {
    width: calc(100% - 325px);
  }
  .myDashRow .meetCalendr .day {
    height: 65px;
    padding: 8px;
    border-radius: 14px;
  }
  .myDashRow .meetCalendr .badge {
    font-size: 10px;
    height: 20px;
    padding: 0 4px;
  }
  .lastBlgLst {
    gap: 18px 15px;
  }
  .lastBlgLst .blgCard {
    width: 265px;
  }
  .topBlgSec .topPost .topPostTxt {
    font-size: 16px;
  }
  .helpSec .helpText {
    width: 42%;
  }
  .coperatSec .coperatBx {
    padding: 40px;
  }
  .topBnrSec .topBnrImg .shape {
    bottom: -36px;
  }
  .whySec .whySecLst ul {
    gap: 30px;
  }
  .whySec .whySecLst ul li {
    gap: 15px;
    width: 340px;
  }
  .whySec .whySecRow .whySecImg {
    width: 310px;
    min-width: 310px;
    height: 422px;
  }
}

@media (max-width: 1199px) {
  .serviceMdl .modalFootr {
    position: static;
    transform: unset;
  }
  .serviceMdl .srvicMdlRow .mainInfo.mainInfo2 {
    padding-bottom: 0;
  }
  .serviceMdl .srvicMdlRow,
  .dashSec .proflSecRow {
    flex-direction: column;
  }
  .sidChatBx .sidChatPg .msgBox {
    max-width: 100%;
  }
  .messageRow .chatList .chatItem .itemText div {
    display: none;
  }
  .messageRow .chatList .chatItem {
    padding: 10px;
  }
  .dashSec .dashMain .myDashRow {
    flex-direction: column;
  }
  .serviceMdl .srvicMdlRow .mainInfo,
  .serviceMdl .srvicMdlRow .modalSide,
  .dashSec .proflSecRow .proflMain,
  .dashSec .proflSecRow .proflMain.proflMain1,
  .dashSec .proflSecRow .proflSide,
  .dashSec .proflSecRow .proflSide.proflSide1,
  .dashSec .myDashRow .leftBx,
  .dashSec .myDashRow .rightBx {
    width: 100%;
  }
  .blgSecBx .cmntBxHdr .user {
    gap: 12px;
  }
  .compareSec .compareTbl th {
    padding: 30px 15px;
  }
  .compareSec .compareTbl td {
    padding: 20px 15px;
  }
  .compareTbl.walletTbl td,
  .compareTbl.walletTbl th {
    padding: 12px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .dashSec .dashDiv {
    padding: 18px;
  }
  .logTabHdr a i {
    font-size: 13px;
  }
  .dashSec .walletBtns .btn {
    padding: 22px 10px;
  }
  .dashSec .proflSide .sideContact {
    flex-wrap: nowrap;
  }
  .dashSec .proflSide .sideContact .sidCntctBx {
    width: 33%;
  }
  .messageRow .hdrChatLst {
    width: 255px;
  }
  .messageRow .sidChatBx {
    width: calc(100% - 255px);
  }
  .topBlgSec .topPost .topPostTxt {
    font-size: 15px;
  }
  .topBnrSec .topBnrImg .shape {
    bottom: -22px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .profilSec .walltCard .cardHed {
    margin-bottom: 22px;
  }
  .profilSec .waltCrdList .walltCard {
    width: 32.9%;
    padding: 20px;
  }
  .profilSec .walltCard .cardNumber {
    font-size: 20px;
  }
  .serviceMdl .servicSwipr .bigSwiper .swiper-slide {
    height: 440px;
  }
  .profilSec .projectsBx .servicesLst .serviceCrd {
    width: 300px;
  }
  .favoritList .serviceCrd {
    width: 294px;
  }
  .favoritList .exprtSwprCrd {
    width: 294px;
    height: 180px;
  }
  .prjctsSec .expertCard {
    padding: 5px;
  }
  .prjctsSec .projctList .projctItem {
    padding: 15px;
  }
  .lastBlgLst .blgCard {
    width: 300px;
  }
  .topBlgSec .rightPost {
    width: 45%;
  }
  .topBlgSec .topBlgLft {
    width: 55%;
  }
  .planSec .planList {
    gap: 10px;
  }
  .planCard .planPrice {
    margin-top: 16px;
  }
  .planCard .planTitle .icon,
  .planCard .planTitle {
    margin-bottom: 16px;
  }
  .planCard .features li {
    margin-bottom: 12px;
  }
  .planSec .planList .planCard {
    padding: 32px 12px 12px 12px;
  }
  .helpSec .helpText {
    width: 46%;
  }
  .helpSec .helpVideo {
    width: 400px;
  }
  .coperatSec .coperatBx {
    padding: 30px;
  }
  .whySec .whySecRow .whySecImg:after {
    top: -15px;
    right: -15px;
  }
  .whySec .whySecRow .whySecImg {
    width: 280px;
    min-width: 280px;
    height: 390px;
  }
  .whySec .whySecLst ul {
    gap: 25px 20px;
  }
  .whySec .whySecLst ul li {
    width: 48%;
    gap: 8px;
  }
  .topBnrSec .topBnrImg {
    height: 428px;
  }
  .topBnrSec {
    height: 458px;
  }
  header .hdrTopRght {
    gap: 30px;
  }
  header .hdrSrchBx {
    width: 300px;
  }
  header .proAccLnk {
    font-size: 12px;
    padding: 0 12px;
  }
}
@media (max-width: 991px) {
  .profilSec .projectsBx .prjctCard ul {
    justify-content: space-between;
  }
  .profilSec .tabBox .prjctsLst .prjctCard ul,
  .profilSec .spyTabBox .projectsBx .prjctCard ul {
    gap: 20px;
  }
  .startNowSec .content .links a {
    width: max-content;
  }
  .profilSec .spyTabBox .spyTabHed {
    top: 62px;
  }
  .prjctsSec .filterBox .closSidFltr {
    display: block;
  }
  .prjctsSec .prjctsRow .opnSidFltrs {
    display: flex;
  }
  .prjctsSec .prjctsRow {
    flex-direction: column;
  }
  .prjctsSec .filtrdPrjcts {
    width: 100%;
  }
  .prjctsSec .filterBox {
    position: fixed;
    width: 280px;
    top: 0;
    right: -280px;
    z-index: 25;
    border-radius: 0;
    height: 100vh;
    overflow: auto;
  }
  .prjctsSec .filterBox.opened {
    right: 0;
  }
  .dashSec .dashSide {
    display: none;
  }
  .dashSec .dashMain {
    width: 100%;
  }
  .lastBlgSec .lastBlgLst {
    gap: 15px 10px;
  }
  .blgCard .blgCrdFtr {
    padding: 15px 8px 3px 8px;
  }
  .lastBlgLst .blgCard {
    padding: 10px;
  }
  .topBlgSec .rightPost,
  .topBlgSec .topBlgLft {
    width: 100%;
  }
  .planSec .planList {
    flex-wrap: wrap;
  }
  .helpSec .helpSecBx {
    flex-direction: column-reverse;
  }
  .topBlgSec .topBlgRow,
  .helpSec .helpSecBx2 {
    flex-direction: column;
  }
  .startNowSec .content .links a {
    height: 62px;
    padding: 5px 15px 5px 5px;
  }
  .startNowSec .links a div {
    width: 50px;
    min-width: 50px;
  }
  .coperatSec .coperatRow {
    flex-direction: column;
    align-items: flex-start;
  }
  .coperatSec .coperatBx {
    width: 100%;
  }
  .footerRow {
    flex-wrap: wrap;
  }
  .footerRow .ftrRight {
    width: 100%;
    max-width: unset;
    margin-bottom: 20px;
  }
  .whySec .whySecRow .whySecImg {
    display: none;
  }
  .whySec .whySecLst ul {
    gap: 30px 18px;
  }
  .hdrBtm .dropSel.sideDrop {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    width: 100%;
  }
  .hdrBtm .sideDrop .select .dropSelDiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }
  .hdrBtm .dropSel .select {
    width: 100%;
    justify-content: space-between;
  }
  .hdrBtm .dropSel .dropdown-mnu {
    top: unset;
    bottom: 48px;
  }
  .hdrRowFixd {
    padding-bottom: 0;
  }
  header .hdrBtm {
    border-top: 1px solid var(--text-100);
    position: fixed;
    right: 0;
    top: 69px;
    background: white;
    height: calc(100vh - 70px);
    overflow: auto;
    width: 100%;
    display: none;
    z-index: 20;
  }
  header .hdrBtmRow {
    height: calc(100vh - 72px);
    width: 270px;
    display: block;
    position: relative;
    min-height: max-content;
    padding: 25px 0 80px 0;
  }
  header .hdrMnu {
    display: block;
    margin-bottom: 30px;
  }
  header .hdrMnu .hdrMnuLnk {
    height: 40px;
  }
  header .hdrBtmRow .addBtn {
    width: 100%;
    margin-bottom: 10px;
  }
  header .hdrBtmRow .proAccLnk {
    display: flex;
    width: 100%;
  }
  header .hdrOpnMnu {
    display: block;
  }
  .hdrTopRow .dropSel.langDrop,
  header .hdrSrchBx,
  header .hdrTopRght .proAccLnk {
    display: none;
  }
  header .hdrTopRght {
    gap: 14px;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .planSec .planList {
    gap: 20px 15px;
  }
  .planSec .planList .planCard {
    width: 48%;
  }
  .helpSec .helpVideo {
    width: 100%;
    height: 250px;
  }
  .whySec .whySecLst ul li {
    width: 48%;
    gap: 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .profilSec .waltCrdList .walltCard {
    width: 48.5%;
    padding: 20px;
  }
  .profilSec .walltCard .cardNumber {
    font-size: 22px;
  }
  #prtflioLstMdl .modal-dialog {
    max-width: 738px;
  }
  .serviceMdl .servicSwipr .bigSwiper .swiper-slide {
    height: 380px;
  }
  .profilSec .projectsBx .servicesLst {
    gap: 10px;
  }
  .profilSec .projectsBx .servicesLst .serviceCrd {
    width: 225px;
  }
  .profilSec .projectsBx .prjctCard {
    padding: 15px;
  }
  .favoritList {
    gap: 10px;
  }
  .favoritList .serviceCrd {
    width: 225px;
  }
  .favoritList .exprtSwprCrd {
    width: 225px;
    height: 160px;
  }
  .hdrSideBx {
    padding-top: 71px;
  }
  body:has(.hdrRowFixd.fixed) .hdrSideBx {
    padding-top: 62px;
  }
  .hdrSideBx .chatList {
    height: calc(100vh - 243px);
  }
  .hdrSideBx .notifList {
    height: calc(100vh - 158px);
  }
  body:has(.hdrRowFixd.fixed) .hdrSideBx .chatList {
    height: calc(100vh - 235px);
  }
  body:has(.hdrRowFixd.fixed) .hdrSideBx .notifList {
    height: calc(100vh - 150px);
  }
  .blgCard .blgCrdImg {
    height: 110px;
  }
  .lastBlgLst .blgCard {
    width: 225px;
  }
  .startNowSec .content .links {
    gap: 20px;
  }
  .topBnrSec .topBnrImg {
    height: 400px;
  }
  .topBnrSec {
    height: 430px;
  }
  header .hdrTopRght .hdrLogo img {
    width: 45px;
  }
  header .hdrTopRght .hdrLogo strong {
    font-size: 15px;
  }
  header .hdrTopRght .hdrLogo p {
    font-size: 10.5px;
  }
}
@media (max-width: 767px) {
  header .hdrUsrBx .hdrLogLnk {
    height: 40px;
  }
  header .hdrUsrBx .hdrLogLnk .usrImgBx {
    width: 30px;
    min-width: 30px;
    height: 30px;
  }
  header .hdrUsrBx .hdrLogLnk i {
    font-size: 12px;
  }
  .addPrjctSec .selPayMethd .curencyChk label p {
    font-size: 11px;
  }
  .suggestLst .suggestCrd .showLink {
    font-size: 11px;
    height: 32px;
    padding: 0 10px;
  }
  .profilSec .requestsBx .reqCard {
    padding: 12px 10px;
  }
  .profilSec .workFiles .wrkFileCrd,
  .profilSec .waltCrdList .walltCard {
    width: 100%;
  }
  .dashSec .walletBtns {
    flex-wrap: wrap;
  }
  .compareTbl th {
    font-size: 13px;
  }
  .compareTbl.walletTbl .status,
  .compareTbl.walletTbl .trackingCde,
  .compareTbl.walletTbl .title p {
    font-size: 12px;
  }
  .serviceMdl .modalFootr {
    padding: 12px 0 0 0;
    position: static;
    transform: unset;
  }
  .serviceMdl .modalFootr .box {
    flex-direction: column;
    justify-content: center;
    padding: 15px;
  }
  #prtflioLstMdl .modal-dialog {
    max-width: unset;
  }
  .serviceMdl .srvicMdlRow .mainInfo.mainInfo2 {
    padding-bottom: 10px;
  }
  .addPrjctSec .servcPricBx .deleteBtn {
    justify-content: flex-start;
    margin-top: 0;
  }
  .addPrjctSec .servcPricBx .deleteBtn i {
    font-size: 16px;
  }
  .addPrjctSec .servcPricBx .deleteBtn span {
    display: block;
  }
  .addPrjctSec .stepsRow .stepBox {
    gap: 8px;
  }
  .addPrjctSec .stepsRow {
    align-items: flex-start;
  }
  .serviceMdl .mainInfo .mainInfoTxt p {
    font-size: 13px;
  }
  .serviceMdl .mainInfo .mainInfoTxt li span {
    font-size: 14px;
  }
  .profilSec .projectsBx .servicesLst {
    gap: 10px;
  }
  .dashSec .proflSide .meetCalendr .day {
    height: 50px;
  }
  .proflSecTop .topBox .info {
    flex-wrap: wrap;
    gap: 15px;
  }
  .proflSecTop .topBox .info ul {
    gap: 14px;
  }
  .dashSec .proflSecTop .topBox {
    margin-top: 15px;
  }
  .spyTabBox .spyTabHed .spyTabMnu {
    overflow: auto;
    background: white;
    height: max-content;
  }
  .spyTabBox .spyTabHed .spyTabLnk {
    height: 52px;
  }
  .profilSec .projectsBx .prjctCard {
    width: 100%;
  }
  .prjctsSec .expertCard {
    border: 1px solid var(--text-100);
    padding: 38px 12px 12px 12px;
    position: relative;
  }
  .expertCard .exprtCrdHed .creatBtn {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 16px 0 5px 0;
    padding: 0 8px;
    gap: 5px;
    height: 38px;
  }
  .expertCard .exprtCrdHed .creatBtn span {
    font-size: 12px;
  }
  .expertCard .exprtCrdHed .creatBtn i {
    font-size: 18px;
  }
  .addPrjctSec form .frmTtlRow {
    flex-wrap: wrap;
  }
  .addPrjctSec .btnsRow .btn {
    min-width: max-content;
    gap: 5px;
  }
  .addPrjctSec .btnsRow .btn i,
  .addPrjctSec .btnsRow .btn span {
    font-size: 12px;
  }
  .prjctsSec .suggestions .title {
    margin-bottom: 15px;
  }
  .prjctsSec .suggestions .title h2 {
    font-size: 16px;
  }
  .prjctsSec .suggestLst ul li {
    gap: 3px;
  }
  .prjctsSec .suggestLst ul i {
    font-size: 15px;
  }
  .prjctsSec .suggestLst a {
    padding: 12px 10px;
  }
  .prjctsSec .suggestLst ul span {
    font-size: 11px;
  }
  .prjctsSec .suggestLst ul p {
    font-size: 13px;
  }
  .prjctsSec .suggestLst ul small {
    font-size: 9px;
  }
  .prjctsSec .prjctInfo,
  .prjctsSec .suggestions {
    padding: 15px;
  }
  .prjctsSec .prjctInfo .prjctTitle h2 {
    text-align: center;
  }
  .prjctsSec .prjctInfo .prjctFoter {
    flex-wrap: wrap;
  }
  .prjctsSec .prjctInfo .prjctTitle {
    flex-direction: column;
  }
  .prjctInfo .prjctTitle .right ul {
    justify-content: center;
  }
  .prjctsSec .projctItem .prjctTitle h2 {
    font-size: 15px;
  }
  .prjctsSec .projctItem .prjctTitle .seeLink {
    position: absolute;
    left: -11px;
    top: -11px;
    border-radius: 16px 0 5px 0;
    height: 38px;
    padding: 0 15px;
  }
  .prjctsSec .projctItem .prjctTitle .seeLink span {
    font-size: 12px;
  }
  .prjctsSec .projctItem .text {
    margin: 18px 0;
    font-size: 13px;
    padding-bottom: 15px;
  }
  .prjctsSec .projctItem .prjctTitle .seeLink span {
    font-size: 13px;
  }
  .prjctsSec .projctItem .prjctTitle {
    position: relative;
    padding-top: 30px;
  }
  .prjctsSec .projctItem .prjctTitle .right {
    width: 100%;
  }
  .prjctsSec .projctList .projctItem {
    padding: 12px;
    border: 1px solid var(--text-100);
  }
  .prjctsSec .projctList {
    padding: 15px;
  }
  .prjctsSec .projctList .dropSel .select {
    height: 40px;
    width: 135px;
  }
  .dropSel .select .dropSelDiv p {
    font-size: 12px;
  }
  .addTiktSec .addTiktDiv {
    padding: 0;
  }
  .messageRow .hdrChatLst {
    width: 100%;
    border-radius: 16px;
  }
  .messageRow .sidChatBx {
    width: 100%;
    display: none;
    border-radius: 16px;
  }
  .messageRow .sidChatBx .sidChatBtm {
    border-radius: 0 0 16px 16px;
  }
  .messageRow .sidChatTop .backLink {
    display: block;
  }
  .myProjcts .logTabHdr,
  .projectsPg .logTabHdr {
    overflow: auto;
    padding-bottom: 10px;
    background: transparent;
    gap: 30px;
    justify-content: flex-start;
  }
  .myProjcts .logTabHdr li,
  .projectsPg .logTabHdr li {
    width: max-content;
  }
  .myProjcts .logTabHdr a,
  .projectsPg .logTabHdr a {
    min-width: max-content;
  }
  .logTabHdr a i {
    font-size: 12px;
  }
  .dashSec .projectBx .prjctCrdBdy li {
    width: max-content;
    min-width: 47%;
  }
  .meetingMdl .workTimeList li {
    gap: 11px;
  }
  .dashSec .dashKbabMnu .kbabMnuBx {
    min-width: max-content;
  }
  .dashSec .dashKbabMnu .kbabMnuBx a {
    height: 32px;
  }
  .dashSec .lastOffrBx .offerBox {
    border-radius: 12px;
    padding: 15px 10px 12px 25px;
  }
  .dashSec .dashDiv {
    padding: 15px;
  }
  .dashSec .offerBox .text li i,
  .dashSec .dashBxHed h2 {
    font-size: 15px;
  }
  .dashSec .dashBxHed a span {
    font-size: 11px;
  }
  .dashSec .dashBxHed a i {
    font-size: 16px;
  }
  .serviceSwpr .swiper-slide a {
    width: 270px;
  }
  .dashSec .offerBox .text h3,
  .dashSec .offerBox .text li span,
  .serviceSwpr .serviceBdy p {
    font-size: 13px;
  }
  .blgSecBx .blgCntnt h1 {
    font-size: 18px;
  }
  .blgSecBx .blgCntnt ul li,
  .blgSecBx .blgCntnt p,
  .topBlgSec .topPost .topPostTxt {
    font-size: 14px;
  }
  .blgSecBx .blgCntnt h3 {
    font-size: 15px;
  }
  .blgSecBx .blgCntnt h2 {
    font-size: 16px;
  }
  .blgSecBx .cmntFrm h2 {
    font-size: 20px;
    margin-bottom: 30px;
  }
  .topBlgSec .topBlgLft {
    display: none;
  }
  .faqAcordion .accordion-item .accordion-button {
    font-size: 14px;
  }
  .faqAcordion .accordion-body .text {
    font-size: 13px;
  }
  .planSec .planList .planCard {
    padding: 30px 15px 15px 15px;
  }
  .planCard .planTitle .icon,
  .planCard .planTitle {
    margin-bottom: 15px;
  }
  .planCard .planPrice {
    margin: 15px auto 18px auto;
  }
  .planCard .features li {
    margin-bottom: 12px;
  }
  .planCard .planPrice strong {
    font-size: 24px;
  }
  .startNowSec .links a span {
    font-size: 12.5px;
  }
  .startNowSec .content .links {
    gap: 20px 15px;
  }
  .startNowSec {
    position: relative;
    background: var(--red-500);
  }
  .startNowSec .startNowBx {
    position: static;
  }
  .hasSwprBtn .swiperBtns {
    display: none;
  }
  .coperatSec .coperatTtl h2 {
    font-size: 16px;
  }
  .coperatSec .coperatUl .text h3 {
    font-size: 14px;
  }
  .coperatSec .coperatUl .text p {
    font-size: 12.5px;
  }
  .whySec .whySecLst li p {
    font-size: 11.5px;
  }
  .jobCatSec {
    margin: 20px 0;
  }
  .secTitle h2 {
    font-size: 20px;
  }
  .jobCatSec .jobCatLst {
    gap: 8px;
    padding-bottom: 10px;
    width: 100%;
    overflow: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .jobCatSec .jobCatLst::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  .jobCatSec .jobCatLst a {
    width: 140px;
    min-width: 140px;
    height: 140px;
  }
  .locModal .modal-content {
    padding: 8px 15px;
  }
  .shoghlMdl .modal-title,
  .categoryMdl .modal-title h5 {
    font-size: 16px;
  }
  .topBnrSec .srchBx .srchBtn span {
    font-size: 12.5px;
  }
  .topBnrSec {
    height: 342px;
  }
  .topBnrSec .topBnrImg {
    height: 312px;
  }
  .topBnrSec .topBnrImg .shape {
    bottom: -5px;
  }
  .topBnrSec .srchBx .btn {
    padding: 0 10px;
  }
  .topBnrSec .content .srchBx {
    max-width: 366px;
  }
  .topBnrSec .content .title {
    max-width: 312px;
  }
  .topBnrSec .content .title h1 {
    font-size: 20px;
  }
  header .hdrBtm {
    top: 62px;
  }
  header {
    padding: 10px 0;
  }
  header .hdrTopRght {
    justify-content: space-between;
    width: 55%;
  }
  header .hdrTopRght .hdrLogo img {
    width: 40px;
  }
  .topBnrSec .content .title p,
  header .hdrTopLft .hdrNotifs,
  header .hdrTopRght .hdrLogo div {
    display: none;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .dashMain .suggestLst .suggestCrd {
    padding: 12px 10px;
  }
  .dashSec .walletRow .balanceBox {
    padding: 35px 20px 30px 30px;
  }
  .addPrjctSec .stepsRow {
    gap: 6px;
  }
  .addPrjctSec .stepsRow .stepBox {
    width: 68px;
  }
  .addPrjctSec .stepsRow .stepBox::after {
    width: 50%;
  }
  .addPrjctSec .stepsRow .title {
    font-size: 11px;
  }
  .topBlgSec .rightPost {
    height: 285px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .dashSec .walletBtns .btn {
    width: 48.8%;
  }
  .serviceMdl .servicSwipr .bigSwiper .swiper-slide {
    height: 350px;
  }
  .profilSec .projectsBx .servicesLst .serviceCrd {
    width: 49%;
  }
  .profilSec .servicCrd .cardImg {
    height: 360px;
  }
  .favoritList {
    gap: 12px;
  }
  .favoritList .serviceCrd {
    width: 252px;
  }
  .favoritList .exprtSwprCrd {
    width: 252px;
    height: 180px;
  }
  .addPrjctSec .selPayMethd .curencyChk label {
    padding: 12px;
  }
  .addPrjctSec .packsList label {
    padding: 12px;
  }
  .blgCard .blgCrdImg {
    height: 128px;
  }
  .lastBlgLst .blgCard {
    width: 49%;
  }
  .coperatSec .coperatBx {
    padding: 30px;
  }
}
@media (max-width: 575px) {
  .wrkCmntFrm .unfinished {
    padding: 12px;
  }
  .reqAcordion .accordion-body .safeBox .amount {
    padding-right: 30px;
  }
  .reqAcordion .accordion-body .reqRow,
  .reqAcordion .accordion-button,
  .reqAcordion .accordion-body {
    padding: 12px 10px;
  }
  .reqAcordion .accordion-body .safeBox {
    padding: 24px 10px 12px 22px;
  }
  .profilSec .workFiles .wrkFilsHed {
    flex-direction: column-reverse;
  }
  #addFileMdl .modal-dialog,
  #prtflioLstMdl .modal-dialog,
  #dayManagerModal .modal-dialog,
  #scheduleMdl .modal-dialog,
  .reserveMdl .modal-dialog,
  #showCmntMdl .modal-dialog,
  .locModal .modal-dialog {
    max-width: unset;
  }
  .serviceMdl .mainInfo .mainInfoTxt h1 {
    font-size: 22px;
  }
  .serviceMdl .mainInfo .mainInfoTxt h2 {
    font-size: 20px;
  }
  .serviceMdl .mainInfo .mainInfoTxt h3 {
    font-size: 18px;
  }
  .serviceMdl .mainInfo .mainInfoTxt h4 {
    font-size: 17px;
  }
  .serviceMdl .mainInfo .mainInfoTxt h5 {
    font-size: 16px;
  }
  .serviceMdl .mainInfo .mainInfoTxt strong,
  .serviceMdl .mainInfo .mainInfoTxt h6 {
    font-size: 15px;
  }
  .serviceMdl .mainInfo .title {
    flex-direction: column;
    align-items: flex-start;
  }
  .serviceMdl .meetCalendr .day {
    height: 38px;
  }
  .serviceMdl .modalSide .mdlSideBx {
    padding: 12px;
  }
  .serviceMdl .placeOrder ul {
    padding: 8px 10px;
  }
  .serviceMdl .modal-dialog {
    max-width: unset;
  }
  .serviceMdl .modalHdr {
    flex-direction: column;
    padding: 15px;
    align-items: flex-start;
  }
  .serviceMdl .modalHdr .MdlHdrLeft {
    width: 100%;
    position: relative;
    justify-content: space-between;
  }
  .serviceMdl .modalHdr .MdlHdrLeft button {
    position: absolute;
    left: 4px;
    top: -55px;
  }
  .serviceMdl .srvicMdlRow {
    padding: 15px;
  }
  .profilSec .servicCrd .cardImg {
    height: 280px;
  }
  .favoritList {
    gap: 12px 10px;
  }
  .addPrjctSec .selPayMethd .curncyChkRow,
  .addPrjctSec .packsList {
    flex-wrap: wrap;
  }
  .addPrjctSec .selPayMethd .curencyChk,
  .addPrjctSec .packsList .form-check {
    width: 100%;
  }
  .addPrjctSec .selPayMethd .curencyChk label {
    padding: 12px;
  }
  .prjctsSec .projctTop {
    padding: 24px 12px;
  }
  .sidChatBx .sidChatTop {
    padding: 11px 8px 11px 12px;
  }
  .messageRow .sidChatTop .left {
    padding-left: 10px;
  }
  .messageRow .sidChatTop .left .closTiktBtn {
    font-size: 11px;
    padding: 0 6px;
    height: 28px;
    min-width: max-content;
  }
  .dashSec .projectBx .prjctCrdFtr a {
    font-size: 13px;
    height: 32px;
    width: max-content;
    padding: 0 15px;
  }
  .dashSec .prjctCrdFtr .employer p {
    font-size: 11.5px;
  }
  .dashSec .projectBx .prjctCrdHed {
    padding-left: 20px;
  }
  .dashSec .projectBx .prjctCrdBdy {
    margin: 12px 0;
    padding-bottom: 15px;
  }
  .dashSec .projectBx {
    padding: 10px 10px 15px 10px;
  }
  .loginSec .tabHeader a p {
    font-size: 11px;
  }
  .loginSec .tabHeader a span {
    font-size: 20px;
  }
  .meetingMdl .mdlEevent .text {
    font-size: 12px;
  }
  .meetingMdl .mdlTimeRow .deleteBtn,
  .meetingMdl .mdlTimeRow .addBtn {
    height: 46px;
    border-radius: 16px;
    border: 1px solid;
  }
  .meetingMdl .mdlTimeRow .deleteBtn {
    border-color: var(--red-500);
  }
  .meetingMdl .mdlTimeRow .deleteBtn:hover {
    color: var(--red-700);
    border-color: var(--red-700);
  }
  .meetingMdl .mdlTimeRow .addBtn {
    border-color: var(--blue-500);
  }
  .meetingMdl .mdlTimeRow .addBtn:hover {
    color: var(--blue-700);
    border-color: var(--blue-700);
  }
  .meetingMdl .helpBox {
    padding: 15px 10px 15px 12px;
  }
  .meetingMdl .holidayChek input {
    top: 25px;
  }
  .meetingMdl .mdlTimeRow .timeRow {
    flex-direction: column-reverse;
  }
  .dashSec .dashKbabMnu {
    position: absolute;
    top: 10px;
  }
  .dashSec .workCard .dashKbabMnu {
    position: relative;
  }
  .dashSec .lastOffrBx .offerBox {
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .meetCalendr .calendrBtns .togleCalndr,
  .meetCalendr .calendrBtns .wrkSchedule {
    gap: 5px;
  }
  .meetCalendr .calendrBtns .togleCalndr span,
  .meetCalendr .calendrBtns .wrkSchedule span {
    font-size: 11.5px;
  }
  .meetCalendr .calendrBtns .togleCalndr i,
  .meetCalendr .calendrBtns .wrkSchedule i {
    font-size: 16px;
  }
  .meetCalendr .calendrBtns .wrkSchedule {
    padding: 0 10px;
    height: 32px;
  }
  .meetCalendr .calendrHder {
    flex-direction: column;
    gap: 12px;
  }
  .meetCalendr {
    padding: 15px 10px;
  }
  .meetCalendr .calndrWeeks {
    padding: 0;
    border: none;
  }
  .meetCalendr .line {
    height: 4px;
  }
  .meetCalendr .badge {
    height: max-content;
    padding: 3px 6px 2px 6px;
    bottom: 6px;
  }
  .blgSecBx .blgCntnt .date p {
    font-size: 11px;
  }
  .blgSecBx .blgCntnt ol {
    gap: 20px;
  }
  header .hdrUsrBx.open .hdrUsrLnk span::before {
    content: "\ea1b";
  }
  .planSec .planList .planCard {
    width: 100%;
  }
  .helpSec .helpText p,
  .helpSec .helpText li i {
    font-size: 12px;
  }
  .helpSec .helpText h2 {
    font-size: 16px;
    margin: 15px 0 20px auto;
  }
  .helpSec .helpSecBx {
    padding: 0;
    border: none;
  }
  .helpSec .helpVideo {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
  .startNowSec .content {
    padding: 50px 20px;
  }
  .startNowSec .content .links {
    flex-direction: column;
  }
  .coperatSec .coperatUl li:before {
    display: none;
  }
  .coperatSec .coperatBx {
    padding: 0;
    border: none;
  }
  .footerBtm .copyright {
    flex-wrap: wrap;
  }
  .footerRow {
    border-bottom: none;
    padding-bottom: 5px;
  }
  .footerRow .foterMnu:last-child {
    width: 100%;
  }
  footer {
    position: relative;
  }
  .whySec .whySecLst ul li {
    width: 100%;
    gap: 15px;
  }
  header .hdrUsrBx .hdrUsrMnu {
    position: fixed;
    width: 100vw;
    top: 66px;
    border-radius: 0;
    border-top: 1px solid var(--text-100);
    height: calc(100vh - 67px);
    overflow: auto;
  }
}
@media (min-width: 400px) and (max-width: 575px) {
  .dashSec .walletBtns .btn {
    width: 48.4%;
  }
  .favoritList .serviceCrd {
    width: 48.6%;
  }
  .favoritList .exprtSwprCrd {
    width: 48.6%;
    height: 170px;
  }
  .footerBtm .ftrNamad {
    position: absolute;
    bottom: 62px;
    left: 10px;
  }
}
@media (min-width: 481px) and (max-width: 575px) {
  .serviceMdl .servicSwipr .bigSwiper .swiper-slide {
    height: 280px;
  }
  .profilSec .projectsBx .servicesLst .serviceCrd {
    width: 48.8%;
  }
  .meetingMdl .selMeetTime .cheksRow .form-check {
    width: 48%;
  }
  .meetCalendr .day {
    height: 65px;
    border-radius: 12px;
    padding: 6px;
  }

  .lastBlgLst .blgCard {
    width: 48.9%;
  }
}
@media (max-width: 480px) {
  .logFrm .verifyCod input {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .meetingMdl .mdlFormNav {
    gap: 5px;
  }
  .meetingMdl .mdlFormNav .meetingDate {
    font-size: 10px;
  }
  .reviewModal .offrInfoRow {
    flex-direction: column;
  }
  .reviewModal .offrInfoRow li {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px 20px;
    padding: 14px 10px;
  }
  .reviewModal .offrInfoRow span {
    font-size: 12px;
  }
  .dashSec .projectBx .prjctCrdHed {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashMain .suggestLst .suggestCrd {
    padding: 25px 10px 12px 10px;
    position: relative;
  }
  .suggestLst .suggestCrd .showLink {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 16px 0 5px 0;
  }
  .profilSec .requestsBx .reqCard,
  .reqAcordion .accordion-body .safeBox {
    flex-direction: column;
    align-items: flex-start;
  }
  .proflSecTop .workInfo .btn span {
    font-size: 13px;
  }
  .proflSecTop .workInfo .btn i {
    font-size: 16px;
  }
  .proflSecTop .workInfo {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashSec .dashBxHed .addBtn {
    height: 38px;
    padding: 0 8px;
  }
  .profilSec.dashSec .dashBxHed h1 {
    font-size: 18px;
  }
  .profilSec .waltCrdList .walltCard {
    padding: 20px;
  }
  .dashSec .walletRow {
    flex-direction: column;
  }
  .dashSec .walletRow .balanceBox {
    width: 100%;
  }
  .uploadDiv .fileList .pip,
  .uploadPip {
    flex-direction: column-reverse;
    align-items: flex-end;
  }
  .uploadDiv .fileList .pip .fileInfo,
  .uploadPip .fileInfo {
    width: 100%;
  }
  .addPrjctSec .stepsRow .number {
    font-size: 12px;
    width: 25px;
    height: 25px;
  }
  .addPrjctSec .stepsRow .stepBox::after {
    top: 10px;
    width: 31px;
  }
  .serviceMdl .servicSwipr .bigSwiper .swiper-slide {
    height: 240px;
  }
  .dashSec .dashBxHed .addBtn {
    padding: 0 10px;
  }
  .dashSec .dashBxHed .addBtn span {
    font-size: 12px;
  }
  .profilSec .projectsBx .servicesLst .serviceCrd {
    width: 100%;
  }
  .meetingMdl .meetingPrice {
    padding: 12px;
    gap: 18px;
  }
  .meetingMdl .selMeetTime .cheksRow .form-check {
    width: 100%;
  }
  .addMeetFrm .frmDateRow {
    flex-wrap: wrap;
  }
  .addMeetFrm .frmDateRow .dateInptBx {
    width: 100%;
  }
  .addMeetFrm .frmDateRow .form-switch {
    padding-top: 0;
  }
  .dashSec .proflSide .sideContact .sidCntctBx {
    width: 100%;
    flex: 100%;
  }
  .profilSec .workHistry .workBx .workInfo {
    flex-direction: column;
  }
  .profilSec .projectsBx .prjctCard ul {
    gap: 15px;
    flex-wrap: wrap;
  }
  .profilSec .projectsBx .prjctCard li {
    gap: 5px;
  }
  .profilSec .aboutMeBx .myEducation li,
  .profilSec .projectsBx .prjctCard li p {
    font-size: 12px;
  }
  .profilSec .projectsBx .prjctCard li small {
    font-size: 10px;
  }
  .dashSec .proflSecTop .topBox {
    align-items: flex-start;
    gap: 15px;
  }
  .dashSec .proflSide .proflSidBx {
    padding: 12px;
  }
  .profilSec .projectsBx .prjctCard {
    padding: 12px;
    border-radius: 16px;
  }
  .proposeMdl .modal-content {
    padding: 15px 12px;
  }
  .sucesfulSec .sucesfulBox {
    padding: 32px 15px;
  }
  .sucesfulSec ul.info {
    padding: 15px;
  }
  .sucesfulSec ul.info span {
    font-size: 11px;
  }
  .sucesfulSec ul.info p {
    font-size: 12px;
  }
  .addPrjctSec .stepsRow {
    gap: 20px;
  }
  .addPrjctSec .stepsRow.stepsRow2 {
    gap: 15px;
  }
  .addPrjctSec .stepsRow .title {
    font-size: 10px;
  }
  .addPrjctSec .stepsRow .stepBox {
    width: 54px;
  }
  .prjctsSec .files .fileBox {
    padding: 12px 8px;
  }
  .prjctsSec .files .fileBox .fileInfo {
    width: calc(100% - 110px);
  }
  .prjctsSec .files .fileBox .dwnldBtn {
    padding: 0 12px;
  }
  .prjctsSec .prjctInfo .desc p {
    font-size: 13px;
  }
  .prjctsSec .prjctInfo .prjctFoter {
    justify-content: center;
  }
  .meetCalendr .day {
    height: 50px;
    border-radius: 9px;
    padding: 4px;
  }
  .meetCalendr .minCircle {
    width: 6px;
    height: 6px;
  }
  .meetCalendr .num {
    font-size: 12px;
  }
  .pagination {
    gap: 5px;
  }
  .pagination a:first-child {
    margin-left: 1px;
  }
  .pagination a:last-child {
    margin-right: 1px;
  }
  .lastBlgLst .blgCard {
    width: 100%;
  }
  .blgCard .blgCrdImg {
    height: auto;
  }
  .homBlgSwpr .blgCard .blgCrdImg {
    height: 110px;
  }
  .topBlgSec .topPost img,
  .topBlgSec .rightPost {
    height: auto;
  }
}
@media (max-width: 399px) {
  .profilSec .walltCard .cardNumber {
    gap: 20px;
    font-size: 22px;
  }
  .profilSec .walltCard .cardHed {
    margin-bottom: 18px;
  }
  .profilSec .walltCard .cardNumber {
    margin-bottom: 10px;
  }
  .dashSec .walletBtns .btn {
    width: 47.9%;
  }
  .favoritList .serviceCrd {
    width: 100%;
  }
  .favoritList .exprtSwprCrd {
    width: 100%;
    height: 170px;
  }
  .sidChatBx .sidChatTop .right {
    gap: 5px;
  }
  .sidChatTop .user {
    gap: 5px;
  }
  .sidChatTop .user .imgBx {
    width: 45px;
    height: 45px;
  }
  .sidChatTop .user h3,
  .hdrSideBx .callsList .callUser h3 {
    font-size: 13px;
  }
  .loginSec .emailBox {
    padding: 25px 12px;
  }
  .loginSec .loginBox {
    padding: 30px 15px;
  }
  .loginSec .methodChk label {
    padding: 16px 16px 16px 40px;
  }
  .loginSec .methodChk input {
    left: 10px;
  }
  .homBlgSwpr .swiper-slide {
    padding: 1px 6px 15px 6px;
  }
  .homBlgSwpr .swiper-slide .blgCard {
    width: 255px;
  }
  .footerBtm {
    align-items: flex-start;
    flex-direction: column-reverse;
    padding-top: 0;
  }
}

/* Portfolio/service card kebab menu: keep it inside the card and viewport on mobile */
@media (max-width: 767px) {
  .profilSec .projectsBx .servicesLst .serviceCrd .dashKbabMnu .kbabMnuBx {
    inset-inline-start: 0;
    inset-inline-end: auto;
    left: auto;
    right: auto;
    width: max-content;
    max-width: calc(100vw - 48px);
  }
  .profilSec .portfolioBx .exprtCrdMnu .dashKbabMnu .kbabMnuBx {
    left: 0;
    right: auto;
    width: max-content;
    max-width: calc(100vw - 48px);
  }
}