﻿@media (max-width: 991px) {
    .mobile-sec .sec-bottom .mobile-mockup .image img {
        height: 500px;
    }

    .mobile-sec .sec-bottom .mobile-mockup .image::before {
        height: 360px;
    }

    .mobile-sec .sec-bottom .mobile-mockup::after,
    .mobile-sec .sec-bottom .mobile-mockup .image::after {
        display: none;
    }

    .mobile-sec .sec-bottom .mobileFeat-item {
        margin-left: 0;
        margin-right: 0;
        width: 49%;
    }

        .mobile-sec .sec-bottom .mobileFeat-item:hover::before,
        .mobile-sec .sec-bottom .mobileFeat-item::before {
            display: none;
        }

    .mobile-sec .sec-bottom .mobile-mockup .image {
        margin-top: 20px;
    }

    .mobile-sec .sec-bottom .mobileFeat-item .icon img {
        height: 20px;
    }

    .mobile-sec .sec-bottom .mobileFeat-item .icon {
        height: 50px;
        width: 50px;
        line-height: 50px
    }

    .mobile-sec .sec-bottom .mobileFeat-item .title h3 {
        font-size: 14px;
    }

    .mobile-sec .sec-bottom .mobileFeat-item {
        margin-bottom: 30px !important;
        justify-content: center !important
    }
}

@media (min-width:768px) and (max-width:991px) {
    .fas {
        font-size: 2rem;
    }

    /*.card .card-title {
        font-size: 1.1rem !important;
    }

    .card .card-body {
        font-size: 0.9rem;
    }*/

    .contactCards .card .image {
        width: 50px;
        position: absolute;
    }

        .contactCards .card .image img {
            display: flex;
        }

    .contactCards .card .card-title a {
        font-size: 0.9rem !important;
    }

    .mobile-sec .sec-bottom .mobile-mockup::after {
        display: none;
    }

    .mobile-sec .sec-top h2 {
        font-size: 30px;
    }
}

@media (max-width:991px) {
    .heroBg {
        margin-top: 20px;
    }

    .pricing .card .card-text ul i, .pricing .card .card-text ul span {
        font-size: 0.9rem !important;
    }

    .pricing .card .card-title h1 {
        font-size: 1.9rem;
    }

    .testimonials .owl-theme .owl-dots .owl-dot {
        width: 16px;
        height: 16px;
    }
    /*a side navbar*/
    .navbar-collapse {
        height: 100vh;
        width: 200px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: -200px;
        right: auto;
        background-color: #fff;
        overflow-x: hidden;
        padding-top: 0 20px;
        transition: all 0.5s ease-in-out;
    }

        .navbar-collapse ul {
            text-align: left !important;
            padding-left: 10px;
        }

        .navbar-collapse .fa-times {
            font-weight: bold;
            font-size: 1.1rem;
        }

        .navbar-collapse .navbar-nav .customBtn, .navbar-collapse .navbar-nav .altBtn {
            width: 100%;
        }

    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
        color: #694dfd !important;
        border-bottom: 2px solid #694dfd;
        cursor: pointer;
    }

    .custoumBorder {
        border-top: 1px solid #ddd;
        padding-top: 12px;
        margin-top: 12px;
    }
}

@media (max-width:375px) {
    .demo div {
        padding: 20px !important;
    }

    .demo .altBtn {
        margin-bottom: 10px;
    }

    .pricing .card {
        padding: 10px;
    }
}

@media (max-width:767px) {
    .testimonials .cardSpcial p {
        font-size: 1rem;
    }

    .contactForm .formText h1 {
        font-size: 1.7rem;
    }

    .contactForm form button {
        padding: 10px 18px 12px;
    }

    .demo p {
        font-size: 1.1rem;
    }

    .demo .altBtn {
        font-size: 0.9rem;
    }

    .heroBg {
        overflow: hidden;
    }

        .heroBg h1 {
            font-size: 1.5rem;
        }

        .heroBg .heroImg .rotate-ar {
            position: relative;
            top: 40px;
        }

        .heroBg .animated-shapes {
            display: none;
        }

        .heroBg .heroImg .heroImgCustom {
            display: none;
        }

    .about h1 {
        font-size: 1.5rem;
    }

    .feat h2, .modules .cardSpcial h3, .analysis h2, .blog h1, .testimonials .cardSpcial h3 {
        font-size: 1.5rem;
    }

    .feat .customBtn, .modules .customBtn, .analysis .customBtn, .about .customBtn {
        font-size: 1rem;
        padding: 5px !important;
    }

    .feat .animated-shapes .shape-circle {
        left: auto;
        right: 20px;
        top: -25px;
    }

    .feat .animated-shapes .shape-rotation {
        left: 75%;
        top: 20%;
    }

    .feat .animated-shapes .shape-float-bob-y, .modules .animated-shapes .shape-float-bob-y {
        right: 10px;
        bottom: -70px;
    }

    .feat .card .card-body {
        padding: 1.25rem 4px 0 4px !important;
    }

    .feat .card .card-title, .feat p {
        font-size: 0.8rem;
    }

    .feat .card a {
        font-size: 10px;
    }

        .feat .card a span {
            width: 20px;
            height: 1px;
            right: -14px;
            bottom: 12px;
        }

        .feat .card a:hover span {
            transform: translate(7px);
        }

    .analysis h4, .foot h4, .blog .card .card-title {
        font-size: 1.2rem;
    }

    .fa-check-circle:before {
        font-size: 1rem;
    }

    .home.heroBg {
        height: auto;
    }

    .blog .card .card-body span {
        font-size: 14px;
    }

    .modFirst h2 {
        font-size: 2rem
    }

    .foot .footInfo .marginTop {
        margin-top: 15px;
    }
}

@media (min-width:768px) {
    .demo p {
        font-size: 2rem;
    }

    .demo .altBtn {
        font-size: 1.25rem;
    }
}

@media (max-width:1023px) {
    .left {
        display: none !important;
    }

    .right {
        text-align: center;
    }

        .right h1 {
            font-size: 1.5rem;
        }

        .right .customBtn {
            width: 150px !important;
        }

        .right form ::placeholder, .right form .form-control, .right .customBtn, .right h6 {
            font-size: 0.9rem;
        }
}

@media (max-width: 576px) {
    .modules .col-6 {
        padding: 0 !important;
    }

    .modules .cardSpcial h6, .modules .card .card-body p, .modules .cardPrimary .card-title {
        font-size: 0.8rem;
    }

    .modules .cardSpcial h3 {
        font-size: 1rem !important;
    }

    .modules .customBtn {
        font-size: 0.9rem !important;
    }

    .modules .cardPrimary {
        padding: 1.5rem 0 0 0 !important;
    }

        .modules .cardPrimary i {
            font-size: 1.8rem;
        }

    .foot .footInfo .textCentered {
        justify-content: flex-end !important;
    }
}
