/* CSS Document */

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */

@media only screen and (max-width: 2560px) {}

/* Large Devices, Wide Screens */

@media only screen and (max-width: 1920px) {}

/* Large Devices, Wide Screens */

@media only screen and (max-width: 1536px) {

    .btn-outline-primary,
    .btn-primary {
        height: 10vh;
    }

    .icon1 {
        width: 14%;
    }

    .btn-outline-primary svg {
        width: 4vh;
    }

    .woman-img {
        top: 9px;
    }

    .assistans-box {
        width: 270px;
        top: 38%;
        right: 2%;
    }

    .btn-outline-primary,
    .btn-primary {
        width: 34vh;
        height: 8vh;
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* Large Devices, Wide Screens */

@media only screen and (max-width: 1440px) {}



@media only screen and (max-width: 1366px) {
    .btn-primary::after {
        display: none;
    }

    .btn-outline-primary,
    .btn-primary {
        width: 28vh;
        height: 7vh;
        padding-left: 10px;
        padding-right: 10px;
        display: flex;
        justify-content: center;
    }
}


/* Large Devices, Wide Screens */

@media only screen and (max-width: 1280px) {

    .btn-outline-primary,
    .btn-primary {
        width: 30vh;
    }

    .last-chat {
        margin-top: 290px;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (max-width: 1199px) {}

/* Large Devices, Wide Screens */

@media only screen and (max-width: 1024px) {
    .logo-sl {
        width: 20%;
    }

    .woman-img {
        margin-left: 0px;
        width: 82%;
        top: auto;
        bottom: 130px;
    }

    .chat-conversation {
        position: absolute;
        margin-left: -45%;
        margin-top: 11%;
    }

    .ayobowan {
        margin-top: 50px;
    }

    .logo {
        width: 13%;
    }

    .btn-outline-primary,
    .btn-primary {
        width: 18vh;
        height: 4vh;
    }

    .btn-outline-primary svg {
        width: 3vh;
    }

    .intro-sec {
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        text-align: center;
    }

    .sqr-img {
        top: auto;
        bottom: 320px;
        right: 290px;
    }

    .assistans-box {
        width: 270px;
        top: 58%;
        right: 8%;
    }

    .app-download {
        display: flex;
        position: absolute;
        right: 20px;
        top: 40px;
        z-index: 999999999999;
        width: 55%;
        justify-content: flex-end;

    }

    .app-download a {
        display: flex;
        justify-content: center;
    }

    .logo-apple {
        width: 95%;
    }

    .logo-google {
        width: 95%;
    }
}


@media only screen and (max-width: 830px) {
    .chat-conversation {
        position: absolute;
        margin-left: -27%;
        margin-top: 6%;
    }
}

/* Medium Devices, Desktops */

@media only screen and (max-width: 991px) {

    .chat-right {
        margin-top: 100px;
    }

    .last-chat {
        margin-top: 250px;
        margin-left: -100px;
        z-index: 99;
    }

    .btn-outline-primary,
    .btn-primary {
        width: auto;
        height: 5vh;
    }

    footer {
        position: absolute;
        width: 100%;
        background-color: #fff;
        bottom: 0;
        margin-left: 0;
        text-align: center;
        margin: auto;
        display: block;
        z-index: 99999999999999999;
        padding: 10px;
    }

    footer.mt-5 {
        margin-top: 0em !important;
    }

    footer.mb-3 {
        margin-bottom: 0 !important;
    }

    .logo1 {
        width: 22%;
    }

    .logo2 {
        width: 15%;
    }

    footer div {
        justify-content: center;
    }

    .eclipse3 {
        top: 54%;
        right: 30%;
    }
}

/* Extra Small Devices, Phones */

@media only screen and (max-width: 768px) {

    .hero {
        background: none !important;
    }

    .woman-img {
        margin-left: 83px;
        width: 39%;
        top: auto;
        bottom: -17px;
    }

    .chat-bubble {
        max-width: 210px;
    }

    .assistans-box {
        width: 260px;
        top: 53%;
        right: 8%;
    }

    .logo {
        width: 17%;
        z-index: 9999;
    }

    footer {
        padding: 15px;
    }


    .logo1 {
        width: 22%;
    }

    .logo2 {
        width: 15%;
    }

    .send-box {
        width: 100%;
        margin-top: 120px;
    }
}

/* Extra Small Devices, Phones */

@media only screen and (max-width: 767px) {
    .app-download {
        display: flex;
        position: absolute;
        right: 20px;
        top: 40px;
        z-index: 999999999999;
        width: 55%;

    }

    .logo-sl {
        width: 50%;
    }

    .sara {
        display: none;
    }

    .eclipse3,
    .eclipse2,
    .eclipse1,
    .bg-img {
        display: none;
    }

    .hero {
        padding: 2rem 1rem;
    }

    .logo {
        width: 27%;
    }

    .assistans-box {
        display: none;
        ;
    }

    .sqr-img {
        top: auto;
        bottom: 70px;
        right: 0px;
        width: 90%;
    }

    .woman-img {
        margin-left: 160px;
        width: 100%;
        top: auto;
        bottom: -13px;
        right: 0;
    }

    .chat-conversation {
        margin-top: 2%;
        margin-left: 5%;
    }

    .chat-bubble {
        max-width: 250px;
    }

    .chat-right {
        margin-top: 90px;
    }

    .last-chat {
        margin-top: 230px;
        margin-left: 0px;
        z-index: 99;
    }

    body {
        overflow-y: scroll;
    }
}

/* Extra Small Devices, Phones */

@media only screen and (max-width: 575px) {}

/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
    .logo1 {
        width: 29%;
    }

    .logo2 {
        width: 20%;
    }

}

/* Custom, iPhone Retina */

@media only screen and (max-width: 390px) {
    .chat-conversation {
        margin-left: 0;
        margin-top: 0;
        display: none !important;
    }

    .sqr-img {
        top: auto;
        bottom: 20px;
        right: 0px;
        width: 90%;
    }

    .woman-img {
        margin-left: 40px;
        width: 78%;
    }

    .mobile-footer {
        display: block;
        font-size: 12px;
        text-align: center;
        z-index: 999;
    }

    footer {
        display: none;
    }

    .hero {
        padding: 2rem 32px 1rem 2rem;
    }

    .btn-outline-primary,
    .btn-primary {
        width: auto;
        height: 7vh;
    }

    .logo1 {
        width: 40%;
    }

    .logo2 {
        width: 29%;
    }
}

@media only screen and (max-width: 375px) {
    .sqr-img {
        bottom: -110px;
    }
}

/* Custom, iPhone Retina */

@media only screen and (max-width: 360px) {}

@media only screen and (max-width: 320px) {}