@media screen and (max-width: 768px) {
    html {
        font-size: x-small;
    }

    .back-btn {
        border-radius: 20svh;
        transition: 0.2s;
        padding-block: 0.5svh;
        margin-block: 1dvh;
        margin-left: 1dvw;
        padding-inline: 2dvw;
    }

    #success-msg, #error-msg {
        position: fixed;
        left: 3vw;
        bottom: 3svh;
        width: max-content;
        max-width: 60dvw;
        height: fit-content;
        z-index: 11;
        padding-inline: 4dvw;
        padding-block: 1.5svh;
        display: block;
        border-radius: 9dvw;
        font-size: large;
    }

    #success-msg {
        background-color: #dff2bf;
        color: #270;
    }

    #error-msg {
        background-color: #ffbaba;
        color: #D8000C;
    }

    #off-canvas-menu-icon {
        font-size: x-large;
        cursor: pointer;
        display: inline;
        color: rgba(81, 81, 81,1);
    }

    header {
        min-height: fit-content;
        height: 4rem;
        max-height: 4rem;
        /*padding-block: 3rem;*/
    }

    .promotion {
        top: 7rem;
        max-width: 100%;
    }

    .header-link-icon {
        width: 5dvw;
        height: 5dvw;
    }

    .header-desktop-links {
        display: none;
    }

    .logo {
        height: 3.5rem;
        z-index: 51;
        position: absolute;
        top: 0;
        left: 25dvw;
    }

    .text-on-blur {
        max-width: 80dvw;
        color: #36174d;
        text-align: center;
        margin-inline: auto;
        padding-top: 10rem;
        font-weight: 100;
        font-size: 3rem;
        display: block;
        text-wrap: normal;
        height: fit-content;
        top: 10dvw;
    }

    #full-screen-blur {
        max-width: 100%;
        min-height: 100svh;
        height: 100svh;
        max-height: 100svh;
        background: linear-gradient(0deg, rgb(248, 250, 252),rgb(248, 250, 252), rgba(255,16,216, 0.4));
        background-image: url("../storage/images/static-images/female-bg.jpg");
        background-image: url("../storage/images/static-images/mobile-landing-blur-bg.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        will-change: background-position;
        background-position: center;
    }

    #jump-to-ads-btn {
        max-width: fit-content;
        max-height: fit-content;
        padding: 1.5rem 2rem;
        background-color: rgba(255, 16, 216, 0.5);
        backdrop-filter: blur(1px);
        color: white;
        font-weight: normal;
        font-size: large;
        border-radius: 10dvw;
        border: 1px solid rgb(255, 16, 216);
        position: absolute;
        bottom: 17svh;
        right: 0;
        left: 0;
        margin-inline: auto;
        transition: 0.3s;
    }

    .blob {
        display: none;
    }

    #filter-form {
        margin-bottom: 20px;
        width: 90dvw;
        margin-inline: auto;
        border-radius: 1.5dvw;
        padding: 1vw;
        background-color: rgb(255, 255, 255);
        box-shadow: 0 0 0.1vw #808080;
        text-align: center;
        font-size: small;
    }

    .filter-inputs {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
        padding: 2dvw;
    }

    .filter-reset {
        margin: 0;
    }

    .filter-save {
        margin-block: 0.4rem;
    }

    #filter-form-buttons {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: flex-end;
        align-content: flex-end;
    }

    .filter-input-container {
        border: 1px solid rgb(222, 222, 222);
        border-radius: 1.5dvw;
        background-color: rgba(244, 244, 244, 0.5);

        width: 100%;
        padding: 2dvw;
        margin-bottom: 1svh;
    }

    #detailed-filter-form {
        display: none;
        border-top: 1px solid rgb(211, 211, 211);
        margin-top: 3svh;
        padding: 2dvw;
        justify-content: space-around;
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 4svh;
        height: fit-content;
    }

    #detailed-filter-form .filter-input-container {
        margin-bottom: 1vh;
        width: 100%;
        min-height: fit-content;
        height: fit-content;
    }

    #detailed-filter-form-right-column, #detailed-filter-form-left-column {
        width: 100%;
    }

    .saved-filter-btn {
        margin-top: 2dvh;
    }

    .info-icon {
        width: 4dvw;
        height: 4dvw;
        display: inline-block;
    }

    .info-bubble-i {
        display: block;
        margin-inline: auto;
    }

    #saved-filter-buttons-container {
        display: flex;
        width: 65dvw;
        flex-wrap: wrap;
    }

    .advertisements-wrapper {
        margin-inline: auto;
        width: 98dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background-color: rgb(255, 255, 255);
        border-radius: 1.5dvw;
        box-shadow: 0 0 0.1vw grey;
        padding-block: 5vh;
        padding-bottom: 15dvh;
        margin-bottom: 20vh;
        height: max-content;
    }

    .advertisement-link {
        text-decoration: none;
        color: #000;
        width: 90dvw;
        height: 45rem;
        display: block;
        margin-top: 3rem;
    }

    .advertisement-container {
        background-color: #f8f8f8;
        width: 100%;
        height: 45rem;
        max-height: fit-content;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 1.5dvw;
        box-shadow: 0 0 0.3rem grey;
        /*border: 1px solid darkgrey;*/
    }

    .advertisement-image-container {
        width: 90dvw;
        height: 25rem;
        overflow: hidden;
        display: inline-block;
        position: relative;
        border-top-left-radius: 1.5dvw;
        border-top-right-radius: 1.5dvw;
    }

    .advertisement-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .advertisement-title-city-wrapper {
        width: 82dvw;
        display: flex;
        max-width: 82dvw;
        flex-direction: column;
        justify-content: flex-start;
        margin-inline: 4dvw;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .advertisement-title {
        width: 90%;
        max-width: 90%;
    }

    .ad-owner-img-container {
        width: 9vw;
        height: 9vw;
        border-radius: 7vw;
        margin-right: 1.5vw;
    }

    .advertisement-price-fav-wrapper {
        width: 82dvw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-inline: 4dvw;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .advertisement-price {
        font-size: large;
        margin-top: 0;

    }

    .advertisement-gender {
        margin: 0;
    }

    .advertisement-city-date-container {
        font-size: medium;
        margin-inline: 7dvw;
        margin-bottom: 1rem;
    }

    .advertisement-date {
        font-size: x-small;
    }

    .advertisement-size-owner-wrapper-mobile {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        margin-right: 8dvw;
    }

    .advertisement-owner {
        font-size: small;
        color: grey;
    }

    #owner-image-index {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .male-dot {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        background-color: #44aaee;
        border-radius: 2dvw;
    }

    .female-dot {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        background-color: rgb(255, 16, 216);
        border-radius: 2dvw;
    }

    .header-login-btn {
        margin-right: 0.5rem;
        font-size: small;
        padding-inline: 5dvw;
    }

    #popular-cities-container {
        flex-wrap: wrap;
        padding-top: 4rem;
        width: 85dvw;
    }

    #popular-city {
        width: 10rem;
        height: 10rem;
    }

    .popular-city-name {
        margin: 1dvh 0 2svh 0;
    }

    .mobile-no-show {
        display: none;
    }

    #customer-service-button {
        width: 4rem;
        height: 4rem;
        border-radius: 4rem;
        bottom: 2rem;
        left: 2rem;
        display: none;
    }

    #customer-service-button:hover {
        box-shadow: 0 0 0.6dvw #969696;
    }

    #customer-service-button img {
        width: 2.5rem;
        height: 2.5rem;
    }

    #landing-text-mobile {
        display: block;
        font-weight: 100;
        font-family: Roboto, serif;
        top: 11rem;
    }

    #landing-text-desktop {
        display: none;
    }

    footer {
        /*background-image: url("../storage/images/static-images/landing-simple-gradient-mobile.svg");*/
        background: linear-gradient(180deg, rgb(249, 249, 249), rgba(255,16,216,0.1), rgba(136,30,255,0.1));
        overflow-x: hidden;
    }

    .footer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .footer-fastLinks, .footer-logo, .footer-connection {
        margin-top: 5lvh
    }

    .footer-icon {
        width: 5vw;
    }

    .socials-icon {
        width: 7dvw;
        height: 7dvw;
    }

    .highlighted:hover {
        box-shadow: 0 0 1.4rem rgba(255, 16, 216, 0.6);
    }

    #support-us-container {
        padding-inline: 2rem;
        width: fit-content;
        height: fit-content;
        margin-bottom: 2svh;
    }

    .aim-container {
        width: 70dvw;
    }
    .aim-text {
        width: 70dvw;
    }

    .landing-promotion-question-container {
        width: 90%;
        margin: 3rem auto 3rem auto;
    }

    .landing-promotion-question-container h2 {
        display: inline;
    }

    #facts-row {
        display: flex;
        flex-direction: row;
        margin-inline: auto;
        width: 90%;
        justify-content: center;
        flex-wrap: wrap;
    }
    #facts-row div {
        margin-block: 1.5rem;
    }

    #facts-row div:nth-child(2) {
        border: none;
    }

    #quick-facts-desc {
        width: 80%;
        margin-inline: auto;
        margin-bottom: 5rem;
        text-align: justify;
    }

    #quick-facts-desc h6 {
        text-align: center;
    }

    .join-btn {
        margin-inline: auto;
    }

    #its-free-banner {
        position: absolute;
        bottom: -3rem;
        left: 0;
        rotate: -20deg;
        max-width: 10rem;
    }

    #follow-us-arrow {
        right: -1rem;
    }

    .privacy-terms-notification * {
        font-size: medium;
        width: 80dvw;
        bottom: 0;
    }

    #mobile-upload-ad {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        height: fit-content;
        width: fit-content;
        padding: 2rem;
        border-radius: 5rem;
        background: linear-gradient(34deg, rgba(255, 19, 219,1), rgba(136, 30, 255, 1));
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: x-large;
        box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.4);
        z-index: 98;
        text-decoration: none;
    }

    #to-top-btn {
        bottom: 9rem;
        right: 1.5rem;
        padding: 2rem;
        box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.2);
    }
}