@media screen and (min-width: 1366px) and (orientation: landscape) {
    .details-section {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .thankyou-section .heading-bx h1 {
        margin-top: 30px;
    }

    .popup-message-sec {
        display: none !important
    }
}

@media screen and (min-width: 767px) and (orientation: portrait) {
    .details-section {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

@media screen and (max-width: 1366px) and (orientation: landscape) {
    .popup-message-sec {
        display: none !important
    }

    .thankyou-section .heading-bx h1 {
        font-size: 2.2rem;
    }

    .thankyou-section .heading-bx p,
    .qr-card p {
        font-size: 1rem;
    }


    .common-btn {
        cursor: auto !important;
    }

    /*////////////////////  details section style  ///////////////// */

    .details-section .heading-bx p {
        font-size: 24px;
        margin: 10px 0px;
    }

    .details-section .user-details-form {
        margin-top: 50px;
    }

    .details-section .user-details-form .input-bx .input-from {
        line-height: 45px;
        font-size: 16px;
    }

    input[type="date"] {
        height: 49px !important;
    }

    /*////////////////////  thankyou section style  ///////////////// */

    .thankyou-section .thankyou-section-bx {
        width: 50%;
    }


    /*////////////////////  mosaic section style  ///////////////// */
    .mosaic-wall-section .mosaic-wall-image-content-bx .operations {
        width: 928px;
        height: 30px;
    }

    .mosaic-wall-section .mosaic-wall-image-content-bx .operations .operations-bx .btn-wall-effect {
        margin: 0px 5px;
        width: 25px;
        height: 25px;
        padding: 5px;
    }

    .mosaic-search-text-bx {
        margin: 30px auto;
    }

    .mosaic-search-text-bx p {
        font-size: 24px;
    }

    .mosaic-wall-section .search-bx {
        width: 50vw;
    }

    .mosaic-wall-section .search-bx .search-btn {
        width: 45px;
        height: 45px;
    }

    .picture-capture-sec .camera {
        height: 320px;
        width: 320px;
    }

    /* /// model style /////////////// */
    .modal-window .content-bx .head-content {
        margin-bottom: 15px;
    }

    .modal-window .content-bx .head-content .model-logo-bx {
        width: 45px;
        height: 45px;
    }

    .modal-window .content-bx .head-content .text-bx h2 {
        font-size: 1.2rem;
    }

    .modal-window .content-bx .left-arrow,
    .modal-window .content-bx .right-arrow {
        height: 35px;
        width: 35px;
    }

    .modal-window .content-bx .left-arrow {
        left: -17.5px;
    }

    .modal-window .content-bx .right-arrow {
        right: -17.5px;
    }

}


@media screen and (max-width: 1024px) and (orientation: portrait) {
    .thankyou-section .heading-bx h1 {
        font-size: 2.5rem;
    }

    .thankyou-section .heading-bx p,
    .qr-card p {
        font-size: 1.2rem;
    }

    .common-btn {
        cursor: auto !important;
    }

    .mosaic-wall-section .mosaic-wall-image-content-bx .mosaic-wall {
        width: 60vw;
        height: 60vw;
    }

    .mosaic-wall-section .mosaic-wall-image-content-bx .mosaic-wall .wall-logo {
        width: 70%;
    }

    .modal-window .content-bx .user-image-bx {
        margin-bottom: 20px;
    }

    .click-your-picture {
        width: 150px;
        margin-top: 15px;
    }

    /*////////////////////  details section style  ///////////////// */

    .details-section .details-section-bx {
        width: 55%;
    }

    .details-section .heading-bx p {
        font-size: 14px;
        margin: 10px 0px;
    }

    .details-section .user-details-form {
        margin-top: 20px;
        width: 100%;
    }

    .details-section .user-details-form .input-bx .input-from {
        font-size: 1.2rem !important;
    }

    input[type="date"] {
        height: 52px !important;
    }



    /*////////////////////  thankyou section style  ///////////////// */

    .thankyou-section .thankyou-section-bx {
        width: 80%;
    }


    /*///////////////////  mosaic section style start //////////////*/
    .mosaic-wall-section .search-bx {
        width: 40vw;
    }

    .mosaic-wall-section .search-bx .input-search {
        font-size: 1rem;
    }

    .mosaic-wall-section .search-bx .input-search::placeholder {
        font-size: 0.8rem;
    }

    .mosaic-wall-section .search-bx .search-btn {
        right: 8px;
        width: 30px;
        height: 30px;
        cursor: auto;
    }

    .mosaic-search-text-bx {
        margin: 30px 0px;
    }

    .mosaic-search-text-bx p {
        font-size: 14px;
    }


    /*///////////////////  picture capture section style start //////////////*/
    .picture-capture-sec .camera {
        height: 480px;
        width: 480px;
    }

    .mosaic-wall-section .mosaic-wall-image-content-bx .operations {
        width: 346.6px;
        height: 25px;
    }

    .mosaic-wall-section .mosaic-wall-image-content-bx .operations .operations-bx .btn-wall-effect {
        margin: 0px 5px;
        width: 20px;
        height: 20px;
        padding: 3px;
    }

    .modal-window>div {
        width: 80vw;
    }

    .modal-window .content-bx .head-content {
        margin-bottom: 10px;
    }

    .modal-window .content-bx .head-content .model-logo-bx {
        width: 40px;
        height: 40px;
    }

    .modal-window .content-bx .head-content .text-bx h2 {
        font-size: 1.2rem;
    }

    .modal-window .content-bx .left-arrow,
    .modal-window .content-bx .right-arrow {
        cursor: auto;
        height: 30px;
        width: 30px;
    }

    .modal-window .content-bx .left-arrow {
        left: -15px;
    }

    .modal-window .content-bx .right-arrow {
        right: -15px;
    }

    .total-users p {
        font-size: 1.2rem;
    }

    .common-btn {
        font-size: 1.2rem;
    }

    .notes-txt,
    .error-message p {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 520px) and (orientation: portrait) {

    .thankyou-section .heading-bx h1 {
        font-size: 1.7rem;
    }

    .thankyou-section .heading-bx p,
    .qr-card p {
        font-size: 0.8rem;
    }

    .details-section .heading-bx h1 {
        font-size: 1.5rem;
    }

    .consent-box p,
    .consent-box ul li {
        font-size: 0.7rem;
    }

    /*///////////////////  picture capture section style start //////////////*/
    .picture-capture-sec .camera {
        height: 280px;
        width: 280px;
    }

    .total-users p {
        font-size: 0.8rem;
    }

    .notes-txt {
        font-size: 0.55rem;
    }


    .details-section .user-details-form .input-bx .input-from {
        font-size: 1.1rem !important;
        line-height: 2.5;
    }

    input[type="date"] {
        height: 35px !important;
    }

    .details-section .details-section-bx {
        width: 90%;
    }

    .modal-window .content-bx .head-content .text-bx h2 {
        font-size: 0.85rem;
    }

    .mosaic-wall-section .search-bx .input-search {
        line-height: 2.5;
        padding: 0 10px;
        font-size: 0.8em;
    }

    .mosaic-wall-section .search-bx .input-search::placeholder {
        font-size: 0.55rem;
    }

    .mosaic-wall-section .search-bx .search-btn {
        right: 5px;
        width: 20px;
        height: 20px;
    }

    .error-message p {
        font-size: 0.6rem;
    }

    .modal-window>div {
        padding: 1rem;
    }

    .common-btn {
        font-size: 1rem;
    }

    .mosaic-wall-section .search-bx {
        width: 60vw;
    }
}

@media screen and (max-width: 1180px) and (orientation: landscape) {
    .mosaic-wall-section .search-bx {
        width: 50vw;
    }
}