@media (max-width: 576px) {
    body {
        font-size: 14px;
    }

    .navbar ul li:not(:first-child) {
        display: none;
    }

    .navbar .menu-icon {
        display: block;
        padding: 0vw 1vw;
        font-size: 24px;
        border-radius: 1.4vw;
        transition: all 0.3s ease-in-out;
    }

    .navbar .navbar-dropdown{
        position: fixed;
        top: 65px;
        right: 20px;
        width: 40vw;
        height: 30vh;
        background-color: white;
        visibility: hidden;
        border: 1px solid rgb(252, 135, 135);
        border-radius: 15px;
        display: block;
        transition: all 0.1s ease-in-out;
    }

    html.dark .navbar .navbar-dropdown{
       background-color: #111827;
    }

    .navbar .navbar-dropdown ul{
        display: flex;
        flex-direction: column;
    }

    .navbar .navbar-dropdown ul li{
        display: flex;
        justify-content: left;
        align-items: center;
        padding: 0 8px;
        border-bottom: 1px solid rgb(213, 213, 213);
        color: #783636;
        width: 40vw;
        height: 30px;
    }

    html.dark .navbar .navbar-dropdown ul li{
        color: #f9cfcf;
        border-bottom: 1px solid #364c7c;
    }

    html.dark .navbar .menu-icon {
        filter: invert(1);
    }

    .navbar .menu-icon:active {
        background-color: #e8e8e8;
        border-radius: 1.4vw;
        transform: scale(0.85);
    }

    .themeChanger {
        top: 3.6vw !important;
        right: 17vw !important;
        padding: 10px !important;
        height: 10vw !important;
        width: 10vw !important;
    }

    .themeChanger:active {
        background-color: #edebebcb;
        transform: scale(0.85);
    }

    .themeChanger img {
        height: 6vw !important;
        width: 6vw !important;
    }

    .welcomeCard {
        height: 60vh !important;
    }

    .welcomeCard h1:nth-child(2) {
        text-align: center;
        font-size: 20px;
    }

    .welcomeCard h1:nth-child(3) {
        text-align: center;
        font-size: 20px;
    }

    .infoBox {
        flex-wrap: wrap;
    }

    .infoBox ul {
        display: flex;
        flex-wrap: wrap;

    }

    .infoBox ul li {
        height: 30vh;
        width: 41vw;
    }

    .infoBox ul li p {
        position: absolute;
        bottom: 50px;
        font-size: 12px;
        color: #553a3a;
    }

    .infoBox ul li h3 {
        font-size: 14px;
    }

    .genImg {
        border-radius: 20px;
    }

    .working h3 {
        font-size: 16px;
    }

    .working p {
        margin-top: 6px;
        width: 100%;
        font-size: 13px;
    }

    .faq {
        margin-top: 40px;
    }

    .faq ol li {
        width: 90%;
        height: 48px;
    }

    .faq h3 {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .faq ol li .q {
        font-size: 14px;
        gap: 12px;
        top: 6px;
    }

    .faq ol li .ans {
        font-size: 11px;
        padding-top: 38px;
        padding-right: 20px;
        padding-left: 23px;
        padding-bottom: 5px;
    }

    .footerObj {
        width: 100%;
        height: 350px;
        margin-top: 70px;
        display: flex;
        justify-content: center;
        background-color: #fdf3f3;
        border-top: 1px solid;
        border-image: linear-gradient(90deg, #ff6a00, #ff0066) 1;
    }

    footer {
        display: flex;
        flex-direction: column;
        gap: 25px;
        justify-content: center;
        align-items: center;
    }

    .logo {
        font-size: 20px;
        display: flex;
        width: 40%;
        padding: 5px;
    }

    .footerAbout,
    .footerContact {
        text-align: center;
    }

    footer ul h4 {
        font-size: 18px;
    }

    footer ul li {
        font-size: 16px;
    }

    .searchNowBtn,
    .backToTop {
        right: 12px;
    }

    .searching .head1 h3 {
        font-size: 15px;
    }

    .searching .head1 h4 {
        font-size: 13px;
    }

    .searching .byPincode p {
        font-size: 14px;
    }

    .searching .byPincode input {
        width: 88%;
        padding: 12px;
        font-size: 15px;
    }

    .byPincode .submitPin {
        width: 88%;
    }

    .byPincode .submitPin p {
        font-size: 15px;
    }

    .byPincode .popularPin p {
        font-size: 15px;
    }

    .byPincode .popularPin {
        width: 90%;
    }

    .byPincode .popularPin ul {
        display: flex;
        flex-wrap: wrap;
    }

    .searching .byArea p {
        font-size: 14px;
    }

    .searching .byArea input {
        width: 88%;
        padding: 12px;
        font-size: 15px;
    }

    .byArea .submitArea {
        width: 88%;
    }

    .byArea .submitArea p {
        font-size: 15px;
    }

    .byArea .popularArea p {
        font-size: 15px;
    }

    .byArea .popularArea {
        width: 90%;
    }

    .byArea .popularArea ul {
        display: flex;
        flex-wrap: wrap;
    }

    .loadingIcon img {
        border-radius: 14px;
        width: 50px;
        height: 50px;
    }

    .afterSearching .resultItem::-webkit-scrollbar {
        width: 5px;
    }

    .afterSearching .resultItem::-webkit-scrollbar-track {
        background: #ffd8d8;
        height: 100%;
        margin-bottom: 160px;
    }

    .afterSearching .result {
        padding: 10px;
    }

    .result .backSvg {
        height: 18px;
        width: 18px;
    }

    .afterSearching .result h3{
        font-size: 14px;
    }

    .result h4,
    #targetplace,
    #targetpin {
        font-weight: 400;
        font-size: 11px;
    }

    .result h4{
        padding-top: 3px;
    }

    .afterSearching .resultItem h4 {
        font-size: 12px;
    }

    .afterSearching .resultItem .resultContainer {
        height: 51vh;
        width: 90vw;
        padding: 5vw;
        padding-top: 4vw;
        margin-bottom: 20px;
    }

    .afterSearching .resultItem .resultContainer:last-child {
        margin-bottom: 195px;
    }

    .afterSearching .resultItem .resultContainer h5 {
        font-size: 13px;
        padding-bottom: 6px;
    }

    .resultItem .resultContainer .properties {
        gap: 8px;
        font-size: 10px;
        margin: 3px 0px;
    }

    .resultItem .resultContainer .officeDetail ul {
        list-style-type: none;
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .resultItem .resultContainer .officeDetail {
        padding-top: 15px;
    }
    
    .resultItem .resultContainer .officeDetail ul li {
        width: 80vw;
        height: 40px;
    }

    .resultItem .resultContainer .officeDetail ul li .nameValue h4 {
        font-size: 13px;
    }


}