@media  screen and (max-width: 1024px){
    .no-mob {
        display: none !important;
    }

    .no-desk {
        display: flex !important;
    }

    .content-dashboard {
        min-height: unset;
    }

    main {
        width: 100%;
    }

    .navbar {
        margin: 0;
        height: 11.90%;
    }

    .nav-desktop-top {
        position: relative;
        width: 100%;
        box-shadow: 0px 4px 59.4px 0px rgba(0, 0, 0, 0.12);
        z-index: 2;
        border-radius: 0;
        justify-content: flex-start;
    }

    .my-account-nav {
        width: 50%;
        height: 50%;
        margin-left: 2.33%;
    }

    .my-account-nav > img {
        width: calc(44 / 430* 100vw);
        height: calc(44 / 430* 100vw);
    }

    .my-account-nav > div {
        flex-direction: column-reverse;
        width: 75%;
    }

    .my-account-nav > div > h4 {
        font-size: clamp(12px, 4.426vw, 28px);
    }

    .my-account-nav > div > h5{
        font-size: clamp(10px, 2.66vw, 20px);
    }

    .theme-btn {
        width: 12%;
        position: absolute;
        right: 20%;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .notification-btn {
        width: 5.5%;
        margin-right: 10%;
    }

    .notification-btn > .number {
        width: calc(15 / 430* 100vw);
        height: calc(14 / 430* 100vw);
        border-radius: 50%;
    }

    .number > span {
        font-size: clamp(7px, 2.023vw, 18px);
    }

    .menu-view-btn {
        width: 5%;
    }

    .square-mode-menu {
        left: unset;
        right: 5%;
        top: 20%;
        width: 30%;
        height: 12%;
        padding: 3%;
    }

    .square-icon,
    .view-icon {
        width: 10%;
    }

    .arrow-icon {
        width: 4%;
        height: auto;
    }

    .square-mode p,
    .view-columns p {
        font-size: clamp(7px, 1.9vw, 225px);
        margin: 0 10%;
    }

    /* nav */

    /* modal */

    .modal-request-refinement {
        width: 85%;
    }

    .rr-inputs {
        width: 85%;
        height: auto;
        margin: 10% 0;
    }

    .rr-input > input {
        width: calc(12 / 430* 100vw);
        height: calc(12 / 430* 100vw);
    }

    .rr-input > h3 {
        font-size: clamp(12px, 2.5vw, 30px);
    }

    .modal-request-refinement > h4 {
        width: 85%;
        font-size: clamp(12px, 2.5vw, 30px);
    }

    .modal-request-refinement > textarea {
        width: 85%;
        font-size: clamp(12px, 2.5vw, 30px);
    }

    .modal-request-refinement > button {
        font-size: clamp(12px, 2.5vw, 30px);
    }

    .mc-clinical-content {
        width: 86.51%;
        height: 79.72%;
        padding-top: 5%;
        gap: 3%;
    }

    .mc-clinical-content > svg {
        width: 8%;
    }

    .mc-clinical-content > img {
        width: 200px; 
        height: 200px;   
    }

    .mmc-name > div > h3 {
        font-size: clamp(12px, 3vw, 32px);
        gap: 10px;
    }

    .mmc-name > div > h4 {
        font-size: clamp(11px, 2.8vw, 26px);
    }

    .mcc-clinical-condition {
        height: 22.34%;
        gap: 13%;
    }

    .mcc-clinical-condition > h3 {
        font-size: clamp(10px, 3.5vw, 34px);
    }

    .mcc-clinical-condition > div > h3 {
        font-size: clamp(10px, 3vw, 32px);
    }

    .mcc-clinical-condition > div > h4 {
        font-size: clamp(11px, 2.8vw, 26px);
    }

    .mcc-clinical-condition > div > p {
        font-size: clamp(11px, 2.8vw, 26px);
    }

    .aprov-modal {
        position: absolute;
        top: -120%;
        left: unset;
        bottom: unset;
        right: 3%;
        height: 100%;
        width: 47%;
        margin: auto;
        z-index: 5;
    }

    .case-is-ready {
        width: calc(130 / 430* 100vw);
        height: calc( 19 / 430 * 100vw);
    }
    
    .check-img-cont {
        width: calc(19 / 430* 100vw);
        height: calc(19 / 430* 100vw);
    }
    
    .check-img-cont > img {
        width: calc(15 / 430* 100vw);
        height: calc(15 / 430* 100vw);
    }
    
    .case-is-ready > h3 {
        font-size: calc(9 / 430* 100vw);
    }

    .casee-in-progress {
        width: calc(130 / 430* 100vw);
        height: calc( 19 / 430 * 100vw);
    }
    
    .cp-group-img {
        width: calc(19 / 430* 100vw);
        height: calc(19 / 430* 100vw);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .cp-group-img > div {
        width: calc(13 / 430* 100vw);
        height: calc(13 / 430* 100vw);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
    }
    
    .cp-group-img > div > img {
        object-fit: contain;
        width: 70%;
        height: 70%;
        background-color: transparent;
    }
    
    .casee-in-progress > h3 {
        font-size: calc(9 / 430* 100vw);
    }

    .evaluating-case {
        width: calc(130 / 430* 100vw);
        height: calc( 19 / 430 * 100vw);
    }
    
    .ec-group-imgs {
        width: calc(19 / 430* 100vw);
        height: calc(19 / 430* 100vw);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .ec-group-imgs > div {
        width: calc(13 / 430* 100vw);
        height: calc(13 / 430* 100vw);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
    }
    
    .ec-group-imgs > div > img {
        object-fit: contain;
        width: 70%;
        height: 70%;
        background-color: transparent;
    }
    
    .evaluating-case > h3 {
        font-size: calc(9 / 430* 100vw);
    }

    .refinement-requested {
        width: calc(130 / 430* 100vw);
        height: calc( 19 / 430 * 100vw);
    }
    
    .rq-group-imgs {
        width: calc(19 / 430* 100vw);
        height: calc(19 / 430* 100vw);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .rq-group-imgs > div {
        width: calc(13 / 430* 100vw);
        height: calc(13 / 430* 100vw);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
    }
    
    .refinement-requested > h3 {
        font-size: calc(9 / 430* 100vw);
        top: calc( 4 / 430 * 100vw);
        left: calc(28 / 430* 100vw);
    }

    .mcc-content {
        width: 86.28%;
        height: 63.55%;
    }

    .mcc-close {
        width: 6%;
        height: auto;
    }

    .mcc-img {
        width: 40%;
        height: auto;
    }

    .mcc-content > h3 {
        width: 70%;
        font-size: clamp(10px, 3.02vw, 28px);
    }

    .mcc-input-email {
        width: 70%;
        height: 11%;
    }

    .mcc-input-email > input {
        font-size: clamp(10px, 3.02vw, 28px);
    }

    .mcc-input-email > input::placeholder { 
        font-size: clamp(10px, 3.02vw, 28px);
    }

    .mcc-input-password {
        width: 70%;
        height: 11%;
        font-size: clamp(10px, 3.02vw, 28px);
    }

    .mcc-input-password > input {
        font-size: clamp(10px, 3.02vw, 28px);
    }

    .mcc-input-password > input::placeholder { 
        font-size: clamp(10px, 3.02vw, 28px);
    }

    .mcc-content > p {
        width: 68%;
        text-align: center;
        font-size: clamp(9px, 2.3vw, 25px);
    }

    .mcc-content > button {
        width: 70%;
        font-size: clamp(10px, 3.02vw, 28px);
    }

    /* modal client chat slider img */

    .cc-delete {
        padding: 3%;
    }

    .cc-close {
        width: 8%;
    }

    .cc-close svg {
        width: 80%;
        height: auto;
    }

    .client-chat-open-img-edit-tools {
        gap: 13%;
        width: 39%;
    }

    .client-chat-open-img-edit-tools > span {
        width: 100%;
    }

    .client-chat-open-img-edit-tools  svg {
        width: 60%;
        height: auto;
        cursor: pointer;
    }

    .swiper {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }

    .comment-modal {
        top: 8%;
        right: 3%;
        width: 75%;
        height: auto;
        padding: 3%;
        height: 20%;
        max-height: 65%;
    }

    .comment-modal > textarea {
        width: 100%;
        height: 85%;
        font-size: clamp(12px, 4vw, 25px);
    }

    .comment-modal > textarea::placeholder {
        font-size: clamp(12px, 4vw, 25px);
    }

    .comment-modal > div {
        height: 10%;
    }

    .comment-modal > div > button {
        font-size: clamp(11px, 4vw, 28px);
    }

    .swiper-slide > img {
        width: 65%;
        height: auto;
    }

    .swiper-button-next {
        top: unset;
        left: unset;
        bottom: 15%;
        right: 42%;
        width: 5%;
        margin: 0;
    } 

    .swiper-button-prev {
        top: unset;
        bottom: 15%;
        left: 42%;
        width: 5%;
        margin: 0;
    }

    /* modal client chat slider img end */

    .swiper-slide > canvas {
        width: 65% !important;
        height: auto !important;
    }
    /*  modal client chat slider img end */

    /* general notes */
    .general-notes {
        position: fixed;
        z-index: 200;
        height: 100vh;
        width: 100%;
        top: 0;
        left: 0;
        margin: 0;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .back-to-chat {
        width: 85%;
    }

    .back-to-chat svg {
        width: 2.5%;
    }

    .back-to-chat h2 {
        font-size: clamp(12px, 2.5vw, 30px);
    }

    .gn-inputs {
        width: 85%;
        height: auto;
        margin: 10% 0;
    }

    .gn-input > input {
        width: calc(12 / 430* 100vw);
        height: calc(12 / 430* 100vw);
    }

    .gn-input > h3 {
        font-size: clamp(12px, 2.5vw, 30px);
    }

    .general-notes > h4 {
        width: 85%;
        font-size: clamp(12px, 2.5vw, 30px);
    }

    .general-notes > textarea {
        width: 85%;
        font-size: clamp(12px, 2.5vw, 30px);
    }

    .general-notes > p {
        width: 85%;
        font-size: clamp(12px, 2.5vw, 30px);
    }
    /* general notes */

    /* modal */

    /* chat */

    .profile-chat-back {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10%;
        margin-left: 5%;
    }

    .profile-chat-back > svg {
        width: calc(10 / 430* 100vw);
        height: auto;
    }

    .profile-chat-back > h3 {
        color: var(--eighteenth-color-theme);
        font-family: Gordita;
        font-size: calc(14 / 430* 100vw);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .profile-chat-mob {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 3%;
        width: 70%;
        justify-content: center;
        cursor: pointer;
    }

    .profile-chat-mob > h3 {
        color: var(--third-color-theme);
        font-family: "Gordita-Regular", Helvetica;
        font-size: clamp(12px, 4vw, 30px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .cc-profile-img-cont {
        width: 90%;
    }

    .cc-profile-img {
        margin: 0;
        width: 80px;
        height: 80px;
    }

    .cc-profile-img > div {
        width: 28px;
        height: 28px;
    }

    .cc-profile-img > div > img {
        width: 16px;
        height: 16px;
    }

    .chat {
        height: 88.1%;
    }

    .cc-chat {
        width: 100%;
        border-radius: 0;
        height: 100%;
    }

    .cc-chat-content {
        justify-content: unset;
    }

    .modal-prev-video {
        border-radius: 0;
    }

    .cancel-preview {
        width: 6%;
    }

    .img-preview {
        width: 85%;
        height: 40%;
    }

    .chat-container {
        width: 100%;
        height: 100%;
        padding-bottom: 35%;
        max-height: unset;
    }

    .chat-container::-webkit-scrollbar {
        display: none;
    }

    .chat-content {
        width: 100%;
    }

    .cc-profile-cont {
        display: none;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 3;
        overflow-y: auto;
        padding: 15% 0 30% 0;
        border-radius: 0;
        justify-content: unset;
    }

    .cc-profile-icons {
        gap: 25px;
    }

    .cc-profile-icons > div {
        width: 55px;
        height: auto;
    }

    .cc-profile-img-caseteam {
        margin: 0;
        width: 200px;
        height: 200px;
    }

    .cc-profile-img-caseteam > div {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .cc-profile-img-caseteam > div > img {
        width: 25px;
        height: 25px;
    }

    .name-and-company {
        width: 90%;
    }

    .name-and-company > h3 {
        text-align: start;
        font-size: clamp(12px, 4vw, 35px);
        margin: 4% 0;
    }

    .cc-profile-cont::-webkit-scrollbar {
        display: none;
    }

    .cc-profile-btn-back-mob {
        position: absolute;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        left: 2%;
        top: 2%;
    }
    
    .cc-profile-btn-back-mob > svg {
        width: calc(10 / 430* 100vw);
        height: auto;
    }
    
    .cc-profile-btn-back-mob > h3 {
        color: var(--eighteenth-color-theme);
        font-family: Gordita;
        font-size: calc(14 / 430* 100vw);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .cc-profile-info {
        width: 90%;
    }

    .name-and-company > h4 {
        text-align: start;
        font-size: clamp(12px, 3.5vw, 35px);
        margin: 4% 0;
    }

    .cc-profile-line1 {
        width: 100%;
        margin: 30px 0;
    }

    .cc-info2-content > h4 {
        font-size: clamp(8px, 3.04vw, 25px);
    }

    .cc-info2-content > span {
        font-size: clamp(9px, 3.34vw, 26px);
    }

    .cc-info2 {
        gap: 20px;
    }

    .cc-info2-content {
        gap: 15px;
    }

    .cc-profile-line2 {
        width: 100%;
        margin: 30px 0;
    }

    .cc-profile-btns {
        width: 96.26%;
        margin: 5% 0;
        gap: 30px;
    }

    .btn-clinical-condition,
    .btn-activate-case ,
    .btn-case-approved,
    .btn-request-refinement {
        width: 100%;
        height: 90px;
        font-size: clamp(12px, 4.67vw, 35px);
    }

    .cc-profile-cont > h4 {
        font-family: "Gordita-Medium", Helvetica;
        font-size: calc(24 / 430* 100vw);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        color: var(--sixth-color-theme);
        width: 90%;
    }

    .team-up {
        margin: 6% 0 0 0;
        width: 90%;
    }

    .team-up > svg {
        width: 5%;
        height: auto;
    }

    .team-up > p {
        color: #94ACE8;
        font-family: Gordita;
        font-size: calc(15.824 / 430* 100vw);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .team-profile {
        width: 90%;
        gap: 25px;
    }

    .team-profile1 > img {
        width: calc(36 / 430* 100vw);
        height: calc(36 / 430* 100vw);
    }

    .team-profile1 > h3 {
        color: var(--eleventh-color-theme);
        font-family: Gordita;
        font-size: calc(16.064 / 430* 100vw);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .team-profile2 > img {
        width: calc(36 / 430* 100vw);
        height: calc(36 / 430* 100vw);
    }

    .team-profile2 > h3 {
        color: var(--eleventh-color-theme);
        font-family: Gordita;
        font-size: calc(16.064 / 430* 100vw);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .assets-chat-mob-cont {
        width: auto;
        height: auto;
        gap: calc( 5.83 / 430 * 100vw);
        display: flex;
        flex-direction: column;
    }
    
    .assets-chat-mob-cont > h3 {
        color: var(--third-color-theme);
        font-family: Gordita;
        font-size: calc(16.033 / 430 * 100vw);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
    
    .assets-chat-mob {
        width: calc(390 / 430 * 100vw);
        height: auto;
        gap: 15px;
    }
    
    .assets-chat-mob > img {
        width: calc(125.442 / 430 * 100vw);
        height: calc( 90.075 / 430 * 100vw);
    }
    
    .lastest-comments-cont > h3 {
        font-size: clamp(12px, 4vw, 30px);
    }

    .message-date > h3 {
        font-size: clamp(10px, 3.26vw, 26px);
    }

    .cg-date {
        font-size: clamp(8px, 2.79vw, 23px);
    }

    .cg-content {
        width: 85%;
    }

    .cg-content > img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }

    .cg-text-name {
        gap: 3%;
    }

    .cg-text-name > h3 {
        font-size: clamp(11px, 3.2vw, 28px);
    }

    .cg-text-name > h4 {
        font-size: clamp(8px, 2.5vw, 20px);
    }

    .cg-text-name > svg {
        width: 5%;
    }

    .cg-text-content {
        display: flex;
        width: 100%;
        gap: 20px;
        flex-direction: column;
    }

    .cg-text-content > div > p {
        font-size: clamp(10px, 2.8vw, 25px);
        width: 100%;
    }

    .cg-text-container {
        width: 100%;
    }

    .cg-text-content > img {
        width: 70%;
        height: auto;
    }

    .cg-text-content > div > a {
        width: 30%;
        height: 40px;
        font-size: clamp(8px, 2.5vw, 20px);
    }

    .cg-content-ans {
        width: 85%;
    }

    .cg-content-ans > img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }

    .cg-text-content-ans > img {
        width: 70%;
        height: auto;
    }

    .cg-text-name-ans > h3 {
        font-size: clamp(11px, 3.2vw, 28px);
    }

    .cg-text-name-ans > h4 {
        font-size: clamp(8px, 2.5vw, 20px);
    }

    .cg-text-name-ans {
        gap: 3%;
    }

    .cg-text-content-ans {
        width: 100%;
    }

    .cg-text-content-ans > div > p {
        width: 100%;
        font-size: clamp(10px, 2.8vw, 25px);
    }

    .cc-chat-group {
        width: 100%;
        margin: calc(20 / 1080* 100vh) 0 0 calc(34 / 1920* 100vw);
    }

    .cc-chat-group-answer {
        width: 100%;
    }

    .cg-line {
        width: 99%;
    }

    .input-text-chat {
        position: fixed;
        bottom: 0;
        width: 100%;
        max-height: 15%;
        height: auto;
        overflow-y: auto;
        background-color: var(--secundary-color);
    }

    .input-text-chat > textarea {
        display: flex;
        justify-content: center;
        padding: 4% 18% 0 3%;
        font-size: clamp(10px, 3.256vw, 25px);
        height: calc(50 / 1080 * 100vh);
        min-height: 8%;
    }

    .input-text-chat > textarea::placeholder {
        font-size: clamp(10px, 3.256vw, 25px);
    }
}

@media  screen and (max-width: 768px) {
    /* modal */
    .mc-clinical-content > img {
        width: 90px;
        height: 90px;
    }

    .mcc-clinical-condition {
        gap: 8px;
    }

    .aprov-modal {
        top: -90%;
        height: 70%;
    }
    /* modal */

    .cc-profile-icons {
        gap: 15px;
    }

    .cc-profile-icons > div {
        width: 30px;
    }

    .cc-profile-img-caseteam {
        width: 120px;
        height: 120px;
    }

    .cc-profile-img-caseteam > div {
        width: 30px;
        height: 30px;
    }

    .cc-profile-img-caseteam > div > img {
        width: 15px;
        height: 15px;
    }

    .btn-clinical-condition, 
    .btn-activate-case, 
    .btn-case-approved, 
    .btn-request-refinement {
        height: 70px;
    }

    .cc-profile-img {
        width: 50px;
        height: 50px;
    }

    .cc-profile-img > div {
        width: 18px;
        height: 18px;
    }

    .cc-profile-img > div > img {
        width: 12px;
        height: 12px;
    }

    .cg-content > img {
        width: 50px;
        height: 50px;
    }

    .cg-content-ans > img {
        width: 50px;
        height: 50px;
    }

    .cg-text-content > div > a {
        height: 30px;
    }

    .upload-img-icon {
        width: 18%;
    }

    .send-messag-icon {
        width: 20%;
    }

}

@media  screen and (max-width: 480px){ 

    /* modal */
    .mc-clinical-content {
        justify-content: center;
        padding: 5% 0;
        height: auto;
        gap: 15px;
    }

    .mc-clinical-content > img {
        width: 60px;
        height: 60px;
    }

    .mmc-name {
        gap: 10px;
    }
    .mcc-bill {
        gap: 10px;
    }

    .mcc-clinical-condition {
        gap: 8px;
    }

    .aprov-modal {
        top: -85%;
        height: 60%;
    }

    .mcc-img {
        margin-bottom: 5%;
    }

    .mcc-input-email {
        margin-bottom: 5%;
    }

    .client-chat-open-img-edit-tools svg {
        width: 150%;
        height: auto;
        cursor: pointer;
        padding: 5%;
    }

    /* modal */

    .cc-profile-icons {
        gap: 15px;
    }

    .cc-profile-icons > div {
        width: 25px;
    }

    .cc-profile-img-caseteam {
        width: 100px;
        height: 100px;
    }

    .cc-profile-img-caseteam > div {
        width: 25px;
        height: 25px;
    }

    .cc-profile-img-caseteam > div > img {
        width: 12px;
        height: 12px;
    }

    .btn-clinical-condition, 
    .btn-activate-case, 
    .btn-case-approved, 
    .btn-request-refinement {
        height: 55px;
    }

    .cc-profile-img {
        width: 40px;
        height: 40px;
    }

    .cc-profile-img > div {
        width: 15px;
        height: 15px;
    }

    .cc-profile-img > div > img {
        width: 10px;
        height: 10px;
    }

    .cg-content > img {
        width: 40px;
        height: 40px;
    }

    .cg-content-ans > img {
        width: 40px;
        height: 40px;
    }

    .cg-text-content > div > a {
        height: 25px;
    }

    .upload-img-icon {
        width: 18%;
    }

    .send-messag-icon {
        width: 20%;
    }

}