/*-------------------------------------------------------*/
/* When the browser is 768px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 768px) {
    .navbar-custom {
        background-color: transparent;
        padding: 25px 0;
        -webkit-transition: padding 0.3s;
        -moz-transition: padding 0.3s;
        transition: padding 0.3s;
        border: none;
    }
    .navbar-custom .navbar-brand {
        font-size: 2em;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }
    .navbar-custom .navbar-nav > .active > a {} .why-left {
        padding-right: 90px;
    }
    .why-right {
        padding-left: 90px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is 768px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 768px) {
    .navbar-custom.affix {
        background-color: #fff;
        padding: 10px 0;
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.29);
        width: 100%;
        z-index: 999999999999;
        top: 0px;
        border-radius: 0px;
        transition: all 0.5s ease;
    }
    .navbar-custom.affix .navbar-brand {
        font-size: 1.5em;
    }
    .box-last {
        padding-bottom: 0px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is 768px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 768px) {
    .navbar-custom {
        background-color: #fff;
        padding: 12px 0;
        -webkit-transition: bac;
        -moz-transition: padding 0.3s;
        transition: padding 0.3s;
        border: none;
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.29);
    }
    .navbar-custom .navbar-brand {
        font-size: 2em;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }
    .navbar-custom .navbar-nav > .active > a {} .carousel-caption {
        right: 20%;
        left: 8%;
        padding-bottom: 5%;
        top: 10%;
        width: 60%;
    }
}
/*-------------------------------------------------------*/
/* When the browser is 768px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 768px) {
    header .intro-text {
        padding-top: 200px;
        padding-bottom: 50px;
    }
    header .intro-text .intro-lead-in {
        font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-style: italic;
        font-size: 40px;
        line-height: 40px;
        margin-bottom: 25px;
    }
    header .intro-text .intro-heading {
        font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 75px;
        line-height: 75px;
        margin-bottom: 50px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is 768px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 768px) {
    section {
        padding: 100px 0;
    }
    .padd_left {
        padding-left: 0px !important;
    }
    .box-last {
        padding-bottom: 0px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 767px wide,below css will be applied.
/*-------------------------------------------------------*/

@media (max-width: 768px) {
    .navbar-custom .navbar-collapse {
        border-color: rgba(231, 231, 231, 0.94);
        background: #fff;
        width: 100%;
    }
    .home-form form ul li:first-child {
        width: 49%;
    }
    .home-form form ul li:last-child {
        width: 49%;
    }
    .navbar-custom .nav li a {
        border-bottom: 1px solid #f3f3f3;
    }
    .navbar-custom .nav li a:hover {
        color: #0E0E0E !important;
        background: #d1e4ea;
    }
    #filters li span {
        display: block;
        padding: 5px 10px;
        text-decoration: none;
        color: #797979;
        letter-spacing: 0px;
        font-size: 13px;
    }
    section {
        padding: 50px 0;
    }
    .sec-title h2 {
        text-align: center;
        font-size: 42px;
    }
    .sec-title h2 span:before {
        margin-top: -10px;
    }
    .text-right {
        text-align: left;
    }
    .content-left span {
        float: left;
        margin-right: 25px;
        margin-left: 0px;
    }
    .navbar-custom {
        background-color: #FFFFFF;
        border-color: transparent;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.21);
        width: 100%;
        z-index: 99;
        top: 0px;
    }
    .navbar-nav {
        width: 100%;
    }
    header .intro-text {
        padding-bottom: 20px;
    }
    a.arr {
        margin-top: 30px;
    }
    .demo-vid {
        width: 90%;
    }
    .demo-vid p {
        font-size: 16px;
    }
    .footer-call h3 {
        font-size: 24px;
    }
    .box-last-right {
        padding-bottom: 0px;
    }
    .padd_o {
        padding-right: 0px;
        padding-left: 0px;
    }
    .services-offer {
        text-align: center;
    }
    #filters {
        margin: 0 auto;
        padding: 0px 0px 10px 0px;
        display: table;
    }
    .footer-desc {
        text-align: center;
    }
    .footer-part {
        text-align: center;
    }
    .footer-part-social ul {
        margin: 0 auto;
        display: inline-block;
    }
    .footer-help h3 {
        font-size: 24px;
        text-align: center;
    }
    .about-ti-1 {
        display: inline-block;
        margin-top: 8px;
    }
    .about-ti-2 {
        display: inline-block;
        margin-top: 8px;
    }
    .counter-1 {
        padding-bottom: 35px !important;
    }
    .counter-1-2 {
        padding-bottom: 50px !important;
    }
    .counter-all {
        padding: 50px 0 0px 0;
    }
    footer {
        padding: 50px 0 40px 0;
        text-align: center;
    }
    .new2-head {
        text-align: center;
    }
    .carousel-caption {
        padding-top: 7%;
    }
    .n-about-3 a {
        padding: 50% 0% 10% 0%;
    }
    .foot-social ul {
        padding: 0px;
        margin: 0 auto;
        display: table;
    }
    .slider-cap h1 {
        font-size: 36px;
    }
    #filters li {
        margin-top: 0px;
    }
    footer h4 {
        margin-top: 40px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 991px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (max-width: 992px) {
    .price-mob {
        margin-bottom: 25px;
    }
    .navbar-nav {
        float: inherit;
        margin: 0 auto;
        display: table;
    }
    .navbar-custom .navbar-nav > .active > a {
        border-radius: 0 !important;
        color: #0E0E0E;
        background: #d1e4ea;
    }
    .navbar-header {
        float: left;
        width: 100%;
    }
    .navbar-brand > img {
        /* display: block; */
        
        display: table;
        margin: 0 auto;
        margin-top: -15px;
        margin-bottom: -15px;
    }
    .navbar-brand {
        float: initial;
        /* display: table; */
        /* margin: 0 auto; */
    }
    .sec-title h2 {
        text-align: center;
    }
    .services-offer-1 {
        margin-bottom: 34px;
    }
    .h-quote:before {
        width: 100%;
    }
    .help-arrow {
        display: none;
    }
    .help-line {
        padding-bottom: 30px;
    }
    .footer-img {
        display: none;
    }
    .footer-help h4 span {
        font-size: 28px;
    }
    .carousel-inner > .item > img {
        display: none;
    }
    .footer-part-form ul li input {
        width: 100%;
    }
    .footer-part-form ul li textarea {
        width: 100%;
    }
    .hide-title-icon {
        display: none;
    }
    .sa-home-spec {} .n-why-left {
        display: none;
    }
    .n-foot:before {
        width: 100%;
    }
    .n-foot-1 p,
    li,
    h4 {
        color: #9ba6b1;
    }
    .n-foot-1 ul li span {
        color: #ebeef1;
    }
    .n-foot-2 h4 {
        color: #ebeef1;
        padding-top: 25px;
    }
    .n-foot-2 ul li a {
        color: #c4cfd2;
        border: 1px solid #52606d;
    }
    .n-foot-3,
    .n-foot-1 {
        padding-left: 0px;
        padding-right: 0px;
    }
    .n-foot-1 h4 {
        color: #ebeef1;
    }
    .copy-rights1 {} .form-horizontal .control-label {
        color: #fff;
    }
    .cus-app p span {
        font-size: 16px;
        position: inherit;
        margin-bottom: 15px;
    }
    .cus-app p {
        text-align: center;
        margin-bottom: 0px;
    }
    .cus-app p a {
        display: inline-block;
        float: inherit;
        margin-top: 15px;
        /* margin-left: 15px; */
        
        text-align: center;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 991px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (max-width: 992px) {
    .why-img {
        display: none;
    }
    .n-about-right {
        padding-top: 40px;
    }
    .counter-1 {
        padding-bottom: 60px;
    }
    .sa-home h2 {
        margin-top: 0px;
    }
    .sa-home-list ul {
        margin-bottom: 0px;
    }
    .sa-home-list ul li:last-child {
        padding-bottom: 0px;
    }
    .sa-home-list ul li:last-child p {
        margin-bottom: 0px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is 991px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 992px) {
    .n-about-left {
        padding-left: 0px;
    }
    .n-about-right {
        padding-right: 0px;
    }
    .n-why-left {
        padding-left: 0px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 767px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (max-width: 768px) {
    .demo-vid ul li {
        display: block;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 767px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (max-width: 768px) {
    #portfoliolist .portfolio {
        width: 48%;
        margin: 1%;
    }
    #ads {
        display: none;
    }
    #contact-1 {
        padding: 50px 0px 50px 0px;
    }
    .n-about-right a {
        text-align: center;
    }
    .navbar-brand > img {
        display: block;
        display: table;
        margin: 20px;
        margin-top: -10px;
        margin-bottom: -15px;
    }
    .n-about-left h4 {
        font-size: 20px;
    }
    .carousel-control {
        display: none;
    }
    .carousel-caption {
        left: 4%;
        width: 90%;
    }
    .n21-blog {
        width: 100%;
    }
    .n22-blog {
        width: 100%;
        text-align: center;
    }
    .n21-blog img {
        padding: 0px;
        padding-bottom: 25px;
    }
    .counter-1 {
        text-align: center;
    }
    .quote-title h2 {
        font-size: 30px;
    }
    .quote-title h2 span {
        font-size: 30px;
    }
    .help-line span {
        font-size: 32px;
    }
    .price-mob {
        margin-bottom: 35px;
    }
    .price-mob-last {
        margin-bottom: 10px;
    }
    .blog-author {
        margin: 0 auto;
        display: inline-block;
    }
    .blog-auth-img {
        float: initial;
        padding-bottom: 15px;
        padding-top: 0px;
    }
    .footer-call h2 {
        font-size: 26px;
        padding-bottom: 0px;
    }
    .sec-title h2 {
        font-size: 32px;
    }
    .n-about-left {
        text-align: center;
    }
    .sec-title {
        width: 90%;
    }
    .space-bottom {
        padding-bottom: 20px;
    }
    .new-con img {
        padding-top: 35px;
    }
    .carousel-indicators {
        bottom: 0px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 767px and 992px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .sec-title h2 {
        font-size: 52px;
    }
    .counter {
        font-size: 56px;
    }
    header .intro-text .intro-heading {
        font-size: 48px;
    }
    .carousel-caption {
        width: 65%;
    }
    .slider-cap h3 {
        padding-top: 20px;
    }
    .n21-blog {
        /* width: 30%; */
        /* float: left; */
    }
    .n22-blog {
        /* width: 70%; */
        /* float: left; */
    }
    .overlay-contact {
        right: 0%;
        width: 50%;
        margin-top: -560px;
    }
    .map-head p {
        font-size: 18px;
    }
    .map-head h2 {
        font-size: 32px;
    }
    .footer-ser-re {
        font-size: 12px !important;
    }
    .footer-part-form ul li {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .n-about-all {
        border: 3px solid #fff;
    }
    #filters li span {
        padding: 5px 8px;
        font-size: 14px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 480px and 767px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (min-width: 480px) and (max-width: 768px) {
    #ads {
        display: none;
    }
    .counter {
        font-size: 52px;
    }
    .n-about-left h2 {
        font-size: 36px;
    }
    header .intro-text .intro-heading {
        font-size: 42px;
    }
    .slider-cap h3 {
        font-size: 34px;
    }
    .quote-title h2 {
        font-size: 36px;
    }
    .quote-title h2 span {
        font-size: 36px;
    }
    .footer-help h4 {
        font-size: 30px;
    }
    .footer-help h4 span {
        font-size: 30px;
        display: block;
        padding-top: 15px;
        padding-left: 0px;
    }
    .footer-call h3 span {
        font-size: 30px;
    }
    .map-head p {
        font-size: 16px;
    }
    .map-head h2 {
        font-size: 26px;
    }
    .footer-ser-re {
        font-size: 12px !important;
    }
    .footer-part-form ul li {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .overlay-contact {
        width: 100%;
    }
    .overlay-contact {
        margin-top: -545px;
    }
    .footer-part-form ul li {
        margin-bottom: 0px;
    }
    .footer-part-form ul li textarea {
        height: 55px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 481px wide,below css will be applied.
/*-------------------------------------------------------*/

@media (max-width: 480px) {
    .navbar-brand > img {
        width: 50%;
        margin-top: -5px;
    }
    .navbar-brand {
        width: 75%;
    }
    .sec-title h2 {
        font-size: 32px;
    }
    .counter {
        font-size: 42px;
    }
    .n-about-left h2 {
        font-size: 32px;
    }
    header .intro-text .intro-heading {
        font-size: 32px;
    }
    .slider-cap h3 {
        font-size: 24px;
    }
    .slider-cap h5 {
        font-size: 14px;
    }
    .slider-cap p {
        font-size: 13.5px;
        line-height: 24px;
    }
    .counter-1 {
        text-align: center;
    }
    .footer-help h4 {
        font-size: 24px;
    }
    .footer-help h4 span {
        font-size: 24px;
        display: block;
        padding-top: 15px;
        padding-left: 0px;
    }
    .footer-call h3 span {
        font-size: 24px;
    }
    .price-head h4 {
        font-size: 22px;
    }
    .price-head h5 {
        font-size: 50px;
    }
    .text-title {
        font-size: 10px;
    }
    .about-ti-2 {
        margin-top: 5px;
    }
    .map-head p {
        font-size: 14px;
    }
    .map-head h2 {
        font-size: 22px;
    }
    .footer-ser-re {
        font-size: 12px !important;
    }
    .footer-part-form ul li {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .overlay-contact {
        width: 100%;
    }
    .footer-part-form ul li {
        margin-bottom: 0px;
    }
    .footer-part-form ul li textarea {
        height: 55px;
    }
    .contact-map iframe {
        height: 800px;
    }
    #filters li span {
        padding: 5px 5px;
        font-size: 12px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 1200px wide,below css will be applied.
/*-------------------------------------------------------*/

@media (max-width: 1200px) {
    .n-head {
        display: none;
    }
    .foot-logo img {
        width: 100%;
    }
}