/* =======================
  Common Media Css Starts
======================= */

@media (min-width: 992px) {
    .banner-left {
        min-height: 100vh !important;
        max-height: 100% !important;
    }

    .banner .col-lg-4 {
        position: fixed;
    }

    .home .banner .col-lg-4 {
        position: relative;
    }

}

@media (max-width: 991px) {

    .contact .banner::before,
    .contact .banner .banner-right::after {
        display: none;
    }

    .container-fluid {
        max-width: 100%;
        padding: 0;
    }

    .features .banner-left-bottom {
        position: relative;
    }

    .features .banner-left-bottom-list {
        position: absolute;
        width: 100%;
        background: rgba(0, 0, 0, 0.651);
        padding: 5px 0px;
        visibility: hidden;
        opacity: 0;
        transition: all linear .2s;
        -webkit-transition: all linear .2s;
        -moz-transition: all linear .2s;
        -ms-transition: all linear .2s;
        -o-transition: all linear .2s;
    }

    .features .banner-left-bottom-list.small-feature-list {
        visibility: visible;
        opacity: 1;
    }


    .features .banner-left-bottom-list ul li a {
        display: block;
        padding: 6px 10px;
        margin: 5px 5px;
        border-radius: 5px;
        transition: all linear .2s;
        -webkit-transition: all linear .2s;
        -moz-transition: all linear .2s;
        -ms-transition: all linear .2s;
        -o-transition: all linear .2s;
    }

    .features .banner-left-bottom-list ul li a:hover {
        background: #604C85;
    }

    .features .banner-left-bottom-list ul li a.active {
        background: #604C85;
        color: #fff;
    }

    .home .banner-right {
        background: #4ccfd3;

    }

    .home .banner .banner-left {
        padding-bottom: 50px;
    }

    .home .banner-left-bottom p {
        padding-right: 0;
    }

    .features .banner-right {
        padding-left: 30px !important;
        padding-right: 30px !important;
        padding-bottom: 60px !important;
    }
}

/* ====================
  Common Media Css Ends
=================== */

/* ==========================
   Extra Small Device Starts
=========================== */

@media only screen and (max-width: 575px) {
    /*=====================
    Contact Page Starts
  ==================*/

    .contact .banner .banner-left .banner-left-top {
        padding-bottom: 50px;
    }

    .contact .banner .banner-left .banner-left-top a img {
        max-width: 200px;
    }

    .contact .banner .banner-right {
        padding-top: 60px;
    }

    /*=====================
        Contact Page Ends
      ==================*/

    /*=====================
        Demo Page Starts
      ==================*/

    .demo .banner-left-bottom-heading {
        padding-bottom: 30px;
    }

    /*=====================
        Demo Page Ends
      ==================*/

    /*=====================
        Feature Page Starts
      ==================*/
    .features .banner-right .banner-right-heading-text h1 {
        font-size: 36px;
    }

    /*=====================
        Feature Page Ends
      ==================*/
}

/* ==========================
   Extra Small Device Ends
=========================== */

/* =====================
    Small Device Starts
==================== */

@media only screen and (min-width: 576px) and (max-width: 767px) {
    /*=====================
    Contact Page Starts
  ==================*/

    .contact .banner .banner-left .banner-left-top {
        padding-bottom: 50px;
    }

    .contact .banner .banner-left .banner-left-top a img {
        max-width: 320px;
    }

    .contact .banner .banner-right {
        padding-top: 60px;
    }

    /*=====================
        Contact Page Ends
      ==================*/

    /*=====================
        Demo Page Starts
      ==================*/

    .demo .banner-left-bottom-heading {
        padding-bottom: 30px;
    }

    /*=====================
        Demo Page Ends
      ==================*/
    /*=====================
        Feature Page Starts
      ==================*/
    .features .banner-right .banner-right-heading-text h1 {
        font-size: 60px;
    }

    /*=====================
        Feature Page Ends
      ==================*/
}

/* ====================
    Small Device Ends
=================== */

/* =====================
    Medium Device Starts
==================== */

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

    /*=====================
    Contact Page Starts
  ==================*/

    .contact .banner .banner-left .banner-left-top {
        padding-bottom: 50px;
    }

    .contact .banner .banner-left .banner-left-top a img {
        max-width: 320px;
    }

    .contact .banner .banner-right {
        padding-top: 60px;
    }

    /*=====================
        Contact Page Ends
      ==================*/

    /*=====================
        Demo Page Starts
      ==================*/

    .demo .banner-left-bottom-heading {
        padding-bottom: 30px;
    }

    /*=====================
        Demo Page Ends
      ==================*/

    /*=====================
        Feature Page Starts
      ==================*/
    .features .banner-right .banner-right-heading-text h1 {
        font-size: 60px;
    }

    /*=====================
        Feature Page Ends
      ==================*/
}


/* ====================
    Medium Device Ends
=================== */

/* =====================
    Large Device Starts
==================== */

@media (min-width: 992px) and (max-width: 1199px) {
    .home .banner-left-bottom h1 {
        font-size: 32px;
        line-height: 42px;
    }

    .demo .banner-left-bottom-heading h3 {
        font-size: 22px;
    }

    .features .banner-right .banner-right-heading-text h1 {
        font-size: 60px;
    }
}

/* ====================
    Large Device Ends
=================== */

/* ==========================
    Extra Large Device Starts
========================= */


@media (min-width: 1200px) and (max-width:1399px) {}

@media (min-width: 1400px) {
    .banner {
        /* height: 100vh; */
    }

}

/* =========================
    Extra Large Device Ends
========================= */