/* ======= MEDIA QUERIES ====*/
@media (max-width: 1650px) {
    .top-images img {
        max-width: 250px;
    }

    .info-qus-section {
        position: relative;
        z-index: 1;

    }


}

@media (max-width: 1500px) {
    .top-images img {
        max-width: 320px;
    }

    .bottom-images img {
        max-width: 400px;
    }

    .info-qus-section {
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 1366px) {
    .top-images img {
        max-width: 250px;
    }

    .bottom-images img {
        max-width: 350px;
    }
}

@media (max-width: 1280px) {


}

@media (max-width: 1150px) {
    .top-images img {
        max-width: 300px;
    }

    .bottom-images img {
        max-width: 300px;
    }
}

@media (max-width: 990px) {
    .qus h3 {
        font-size: 20px;
        line-height: 26px;
    }

    .bottom-images img {
        max-width: 330px;
    }

    .city-img {
        left: -60px;
    }

    .rocket-img {
        right: -100px;
    }

    .info-section {
        overflow-x: hidden;
    }

    .info-main {
        position: relative;
        z-index: 123;
    }

    .search-inner {
        z-index: 124;
    }

    .subscribe-info {
        width: 100%;
    }
}

@media (max-width: 767px) {

    .check-your-email-box {
        padding: 10px 15px;

    }

    .privacy-box {
        max-width: calc(100% - 10px);
    }

    .login-box-chat {
        padding: 10px 20px;
    }

    .login-button-box {
        width: 100%;
    }

    .claim-account-button-box {
        width: 100%;
        justify-content: start !important;
    }

    .login-box-chat .login-button-box {
        flex-direction: column;
        justify-content: start !important;
        gap: 8px;
    }

    .search-inner {
        padding: 0 0 28px 0;
    }

    #info-text-head {
        font-size: 0.7rem;
    }

    .input-box {
        width: calc(90vw + 2.25em) !important;
    }

    .sample-questions-header {
        width: 90vw;
    }

    .navbar-inner {
        max-width: none;
        width: 90vw;
        margin: 0 auto;
        justify-content: space-between;
    }

    #main-content {
        max-width: none;
        width: 90vw;
    }


    /*.navbar-brand-custom {*/
    /*    flex: 0 1 auto;*/
    /*}*/
    /*.search-inner textarea {*/
    /*    width: 90vw;*/
    /*}*/
    .ans-paragraph-typing {
        line-height: normal;
        white-space: normal;
    }

    .top-images img {
        max-width: 150px;
    }

    .qus, .ans-inner {
        flex-direction: row;
        gap: 0.5rem;
    }

    .answer-item {
        margin: 0;
    }

    .qus h3 {
        width: calc(100% - 0px);
    }

    .ans-box {
        width: calc(100% - 0px);
        flex-direction: column;
    }

    .user-img {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .link-list {
        margin-top: 20px;
    }

    .cloud-left {
        top: 15px;
        left: -40px;
    }

    .cloud-right {
        top: 15px;
        right: -40px;
    }

    .bottom-images img {
        max-width: 350px;
    }

    /*.top-images, .bottom-images {*/
    /*    display: none;*/
    /*}*/
    .footer-main-container {
        flex-direction: column;
    }

    .footer-absolute {
        position: relative;
        bottom: 0;
    }

    /*.info-main {*/
    /*    padding-bottom: 70px;*/
    /*}*/
    /*.modal-dialog {*/
    /*    margin: 0.7rem 1rem;*/
    /*}*/
    .subscribe-box, .login-box {
        padding: 25px 15px;
        max-width: 100%;
    }

    .login-box .form-btn {
        margin-bottom: 10px;
    }

    .login-main-container {
        height: auto;
        display: flex;
        justify-content: center;
    }

    /*.modal-dialog-scrollable .modal-content {*/
    /*    max-height: calc(100vh - 10rem);*/
    /*    overflow: hidden;*/
    /*}*/
    .sample-questions-container {
        max-height: calc(100vh - 35 * 11px);;
    }
}

/* We only want this to apply for phones, shouldn't affect iphones / other resolutions */
/* 450px is arbitrary and can / should be modified. */
@media (max-width: 450px) {
    .navbar-brand-custom {
        font-weight: 700;
        font-size: 24px;
    }
}

@media (max-width: 350px) {
    .search-inner {
        padding: 0 0 5px 0;
    }
}


/* This follows Bootstrap's containers widths */

@media (min-width: 576px) {
    .input-box {
        width: calc(510px + 2.25rem);
    }

    body.processing .navbar-inner {
        width: 510px;
        max-width: none;

    }

    body.processing #main-content {
        width: 510px;
        max-width: none;
    }


}

@media (min-width: 768px) {
    .input-box {
        width: calc(690px + 2.25rem);
    }

    body.processing .navbar-inner {
        width: 690px;
        max-width: none;

    }

    body.processing #main-content {
        width: 690px;
        max-width: none;
    }


}

@media (min-width: 992px) {
    .input-box {
        width: calc(930px + 2.25rem);
    }


    body.processing .navbar-inner {
        width: 930px;
        max-width: none;

    }

    body.processing #main-content {
        width: 930px;
        max-width: none;
    }


}

@media (min-width: 1200px) {


    .input-box {
        width: calc(1110px + 2.25rem);
    }

    body.processing .navbar-inner {
        width: 1110px;
        max-width: none;
    }

    body.processing #main-content {
        width: 1110px;
        max-width: none;
    }


}