@media screen and (max-width: 730px) {
    :root {
        --uniFontColor: rgb(0, 0, 0);
        --navLinkFontClr: rgb(0, 0, 0);
        --navLinkHoverBG: rgb(212, 212, 212);
        --contentCardsBG: #ab4cff;
        --wlcmBoxShado: rgba(90, 29, 116, 0.21);
        --miniHeadingFSize: 1.3rem;
        --wlcmttxtfontsize: 1.4rem;
        --navLinkFontSze: 0.9rem;
        --socialCrdWid: 3rem;
        --queInWid: 25rem;
        --buyStpImgWid: 12rem;
        --ImpThngImgWid: 9rem;
        --WIInivrexImgWid: 7rem;
        --ofrClckImgWid: 2rem;
        --navBrnTxtImgWid: 8rem;
        --byStpContFntSize: 4rem;
        --navBrnblbImgWid: 3rem;
    }

    .projectCards {
        width: 14rem;
    }
}

@media screen and (max-width: 624px) {
    .buyStepCards {
        width: 95%;
    }

    /* Change Offer Padding  */
    #saleContent {
        margin-top: 0.5rem;
    }

    #Offerscrn {
        padding: 0.5rem;
    }

    #FloatingWALink {
        width: 3.5rem;
        height: 3.5rem;
    }
    /* Finish */

}

@media (min-width: 500px) and (max-width: 590px) {
    :root {
        --uniFontColor: rgb(0, 0, 0);
        --navLinkFontClr: rgb(0, 0, 0);
        --navLinkHoverBG: rgb(212, 212, 212);
        --contentCardsBG: #ab4cff;
        --wlcmBoxShado: rgba(90, 29, 116, 0.21);
        --miniHeadingFSize: 1.3rem;
        --wlcmttxtfontsize: 1.4rem;
        --navLinkFontSze: 0.9rem;
        --socialCrdWid: 3rem;
        --queInWid: 25rem;
        --buyStpImgWid: 10rem;
        --ImpThngImgWid: 9rem;
        --WIInivrexImgWid: 7rem;
        --ofrClckImgWid: 2rem;
        --navBrnTxtImgWid: 8rem;
        --byStpContFntSize: 3.3rem;
        --navBrnblbImgWid: 3rem;
    }

    .projectCards {
        width: 12rem;
    }
}

@media screen and (max-width: 578px) {
    nav>ul {
        display: none;
    }

    nav>div {
        display: none;
    }

    #NavMoreLnkBtn {
        display: flex;
    }

    #wlcmScreen {
        flex-direction: column-reverse;
        padding: 0rem 0;
    }

    #wlcmScreen>div:nth-child(1) {
        width: 80%;
        margin-top: 1rem;
    }

    #wlcmScreen>div:nth-child(2) {
        width: 15rem;
        margin-top: 0;
    }

    .buyStepCards {
        width: 95%;
    }

    /* Change Offer Padding  */
    #saleContent {
        margin-top: 0.3rem;
    }

    #Offerscrn {
        padding: 0.3rem;
    }

    /* Finish */
    .projectCards {
        width: 11.5rem;
    }
}

@media screen and (max-width: 500px) {
    :root {
        --uniFontColor: rgb(0, 0, 0);
        --navLinkFontClr: rgb(0, 0, 0);
        --navLinkHoverBG: rgb(212, 212, 212);
        --contentCardsBG: #ab4cff;
        --wlcmBoxShado: rgba(90, 29, 116, 0.21);
        --miniHeadingFSize: 1.2rem;
        --wlcmttxtfontsize: 1.4rem;
        --navLinkFontSze: 0.8rem;
        --socialCrdWid: 2.2rem;
        --queInWid: 100%;
        --buyStpImgWid: 10rem;
        --ImpThngImgWid: 10rem;
        --WIInivrexImgWid: 7rem;
        --ofrClckImgWid: 1.3rem;
        --navBrnTxtImgWid: 6rem;
        --byStpContFntSize: 3.3rem;
        --navBrnblbImgWid: 3rem;
    }

    .servicingCards {
        flex-direction: column;
    }

    .servicingCards:nth-child(2) {
        flex-direction: column-reverse;
    }

    .servicingCards>p {
        width: 90%;
        margin-top: 1rem;
    }

    .projectCards {
        width: 80%;
    }

    #NavMoreLnkBtn {
        width: 2.5rem;
        height: 2.3rem;
    }

    #NavMoreLnkBtn>span {
        height: 3px;
    }

    .socialCards {
        margin: auto 0.4rem;
        padding: 0.2rem;
    }

    .socialCards:hover {
        background: unset;
    }

    .buyStepCards {
        flex-direction: column;
    }

    .buyStepCards>div>p:nth-child(2) {
        width: 90%;
    }

    .buyStepCards>div>div {
        margin-bottom: 0.5rem;
    }

    #smallProjects>div:nth-child(1) {
        margin: 0;
    }

    #askque>div>form {
        padding: 0;
        margin: auto;
    }

    #askque>div>form {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .servCards {
        width: 80%;
    }

    .servCards>div {
        width: 70%;
    }

    .servCards>p {
        margin-top: 0.3rem;
    }
}

@media screen and (max-width: 400px) {
    #wlcmScreen>div:nth-child(2) {
        width: 12rem;
        margin-top: 0;
    }

    .projectCards {
        width: 100%;
    }
}

@media screen and (max-width: 310px) {
    #wlcmScreen>div:nth-child(2) {
        width: 10rem;
        margin-top: 0;
    }

    :root {
        --uniFontColor: rgb(0, 0, 0);
        --navLinkFontClr: rgb(0, 0, 0);
        --navLinkHoverBG: rgb(212, 212, 212);
        --contentCardsBG: #ab4cff;
        --wlcmBoxShado: rgba(90, 29, 116, 0.21);
        --miniHeadingFSize: 1rem;
        --wlcmttxtfontsize: 1.2rem;
        --navLinkFontSze: 0.8rem;
        --socialCrdWid: 2.2rem;
        --queInWid: 100%;
        --buyStpImgWid: 8rem;
        --ImpThngImgWid: 10rem;
        --WIInivrexImgWid: 6rem;
        --ofrClckImgWid: 1.3rem;
        --navBrnTxtImgWid: 6rem;
        --byStpContFntSize: 2.8rem;
        --navBrnblbImgWid: 3rem;
    }
}

@media screen and (max-width: 272px) {
    body {
        width: 272px;
    }

    footer {
        font-size: 0.75rem;
    }

    :root {
        --uniFontColor: rgb(0, 0, 0);
        --navLinkFontClr: rgb(0, 0, 0);
        --navLinkHoverBG: rgb(212, 212, 212);
        --contentCardsBG: #ab4cff;
        --wlcmBoxShado: rgba(90, 29, 116, 0.21);
        --miniHeadingFSize: 1rem;
        --wlcmttxtfontsize: 1.2rem;
        --navLinkFontSze: 0.8rem;
        --socialCrdWid: 2.3rem;
        --queInWid: 100%;
        --buyStpImgWid: 8rem;
        --ImpThngImgWid: 10rem;
        --WIInivrexImgWid: 6rem;
        --ofrClckImgWid: 1.3rem;
        --navBrnTxtImgWid: 6rem;
        --byStpContFntSize: 2.8rem;
        --navBrnblbImgWid: 3rem;
    }

    #sociallik>div {
        flex-wrap: wrap;
    }

    .socialCards {
        width: auto;
        padding: 0.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 5rem;
    }
}