/* ======= 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;
    }

    .sample-question-box {
        width: 90vw;
        margin-top: 5px;
    }

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

    .input-box {
        width: calc(90vw + 2.25em) !important;
        position: relative;
        /*left: 5vw;*/
    }

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

    .navbar-inner {
        width: 90vw;
    }

    /*.search-inner textarea {*/
    /*    width: 90vw;*/
    /*}*/
    .info-qus-section {
        padding-left: calc(5vw - 5px);
    }


    .ans-paragraph-typing {
        line-height: normal;
        white-space: normal;
    }

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

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

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

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

    .user-img {
        flex-shrink: 0;
        margin-right: 7px;
        margin-bottom: 15px;
    }

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

    .navbar-left-menu {
        top: 1.7rem;
    }

    .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;*/
    /*}*/
}

/* 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;
        justify-content: start;
        margin-left: 10px;
    }
}


/* This follows Bootstrap's containers widths */

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

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

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

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