/*-------------------------------------------------*/
/* 1. MOBILE VIEW RESPONSIVE
/*-------------------------------------------------*/



/*-------------------------------------------------------*/
/* When the browser is 1200px to all small screens,below css will be applied.
/*-------------------------------------------------------*/
@media screen and (max-width:1200px) {

    .abt-style-two .p-right img {
        top: -65px;
    }

    .team-member:before {
        opacity: 0;
    }

    .clint-img {
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .services-rhs li {
        padding: 15px;
    }

    .ser-inner h2 {
        display: block;
    }
}

/*-------------------------------------------------------*/
/* When the browser is 992 to all small screens,below css will be applied.
/*-------------------------------------------------------*/

@media screen and (max-width: 992px) {
    .tab-showcase{display: block;}
	.testimonial-img{margin: 0;}
	.contact-us{padding: 140px 0 0 0;}
	.case-img{margin: 15px 0;}
    .team-name {
        padding-top: 30px;
    }

    .team-img img {
        height: auto;
    }

    .con-det {
        padding: 40px 0 0 0;
    }

    .post-left {
        margin-top: 35px;
    }

    .post-right li {
        margin-bottom: 30px;
    }

    .our-team {
        padding-bottom: 30px;
    }

    .followers {
        margin-bottom: 30px;
    }

    .project-one-hover {
        width: 100%;
    }

    .project-one-hover b {
    }

    .project-one-hover a {
        font-size: 14px;
    }

    .case-img img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .work-showcase .container {
        /* max-width: 100%; */
        /* padding-left: 15px; */
        /* padding-right: 15px; */
    }

    .abt-style-two .p-right img {
        top: 0;
        padding-bottom: 50px;
    }

    .ser-inner {
        padding: 0;
    }

    .services {
        padding: 80px 0 80px 0;
    }

    .abt-img img {
        height: auto;
        margin-top: 90px;
    }

    .about-us .p-left {
        position: relative;
        order: 1;
    }

    .services-box-inner {
        margin-bottom: 30px;
    }

    .services-box {
        margin-top: 60px;
    }

    .auther-in-im {
        width: auto;
    }

    .showcase .act2 {
        transform: none;
        padding: 0;
    }

    .work-showcase {
        padding: 80px 0 0px 0;
        margin-bottom: -15px;
    }

    /*-------------------------*/
    .menu a:hover {
        color: #fff;
    }

    .top-cl-fun {
        padding: 0 25px;
    }

    .side-bar.act {
        width: 100%;
    }

    .nav .row {
        align-items: center;
    }

    .nav {
        background: #fff;
        padding: 35px 0;
    }

    .side-bar-right i {
        width: 35px;
        height: 35px;
        font-size: 15px;
    }

    .logo img {
        max-width: 128px;
    }

    .nav-inner .menu {
        position: fixed;
        left: -500px;
        top: 0;
        overflow-y: auto;
        height: 100vh;
        width: 300px;
        background: #16243d;
        padding: 31px 20px 20px 20px;
        z-index: 99;
        transition: all 0.5s ease;
    }

    .menu ul li:first-child {
        display: block;
    }

    .menu li {
        width: 100%;
        padding-bottom: 13px;
    }

    .menu a {
        color: #fff !important;
        width: 100%;
        border-bottom: 1px solid #908484;
        padding-bottom: 17px;
    }

    .menu img {
        width: 120px;
        filter: invert(1);
        margin-bottom: 24px;
    }

    .menu ul li:last-child {
        border: 0;
    }

    .nav-inner .side-bar-right {
        position: absolute;
        right: 15px;
    }

    .logo {
        position: absolute;
        transform: scale(0.8);
    }

    .menu-bar {
        display: block;
        position: absolute;
        left: 15px;
    }

    .menu ul {
        flex-direction: column;
        align-items: flex-start;
    }

    .menu span {
        position: absolute;
        right: 20px;
        top: 0;
        background: red;
        color: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        cursor: pointer;
    }

    .menu.menuact {
        left: 0;
    }
    /*-------------------------*/

    .work-showcase::before, .work-showcase::after {
        display: none;
    }

    .blog-det-inn h3 {
        padding: 15px 0 18px 0;
    }

    .blg-rhs {
        margin-top: 60px;
    }

    .blog-deatiles {
        padding: 90px 0;
    }

    .img-aera {
        margin-top: 50px;
    }

    .contact-map {
        margin-top: 50px;
    }

    .cpy-right-top .cpy {
        flex-direction: column;
        display: flex;
        align-items: center;
        margin: 10px 0;
    }

    .foo-deati {
        margin-top: 10px;
    }

    .team-member {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .ban-inn {
        display: block;
        text-align: center;
    }

    .banner .ban-lhs .comm-btn {
        justify-content: center;
        margin-top: 30px;
    }

    .ban-lhs h1 {
        padding: 0;
    }

    .ban-lhs p {
        border-left: 0;
        padding-right: 0;
        padding-bottom: 25px;
    }

    .banner {
        padding-bottom: 129px;
        padding-top: 150px;
    }

    .about-us .abt-text {
        padding: 50px 0 0 0;
    }

    .about-us {
        padding-bottom: 20px;
        margin-top: 0;
    }

    .about-us .abt-img {
        padding-right: 0;
    }

    .post-right {
        margin-top: 25px;
    }

    .small-img img {
        width: 100%;
    }
}

/*-------------------------------------------------------*/
/* When the browser is 768px to all small screens,below css will be applied.
/*-------------------------------------------------------*/

@media screen and (max-width:767px) {
	
    .commen-banner {
        padding: 164px 0 92px 22px;
    }

    .ban-lhs h1::before {
        display: none;
    }

    .ban-lhs h1, .ban-lhs b {
        font-size: 48px;
        line-height: 80px;
        display: inline-block;
    }

    .ban-lhs img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        margin-top: 21px;
    }

    .footer::before, .footer::after, .testimonial::before, .testimonial::after {
        display: none;
    }

    .tag-share {
        justify-content: flex-start;
        margin-top: 20px;
    }

    .tags-share {
        flex-direction: column;
    }

    .rating-inner ul li:last-child {
        border: 0;
    }

    .foo-deati a {
        padding-left: 0;
    }

    .foo-deati {
        margin-top: 30px;
    }

    .post-content {
        padding: 25px;
    }

    .rating-inner ul {
        flex-direction: column;
    }

    .rating-inner li {
        padding: 0;
        border: 0;
        padding: 15px 0 15px 0;
        border-bottom: 1px solid #eee;
    }

    .services-rhs li {
        width: 100%;
        padding-left: 0;
    }
}

/*-------------------------------------------------------*/
/* When the browser is 576px to all small screens,below css will be applied.
/*-------------------------------------------------------*/
@media screen and (max-width:576px) {
	
	.services-box{margin-bottom: 40px;}
	.about-us .abt-text{padding-top: 0;}
	
    .post-left img {
        height: 400px;
    }

    .services-rhs {
        margin-top: 30px;
    }

    .contact-following {
        display: none;
    }

    .ban-lhs h1::before {
        display: none;
    }

    .testimonial:before, .painting, .painting1, .tab::before, .tab::after {
        display: none;
    }

    .comm-heading {
        width: 100%;
    }

    .about-us {
        padding-top: 0;
        padding-bottom: 30px;
    }

    .our-team {
        padding-top: 80px;
    }

    .blog-post {
        padding-top: 0;
        padding-bottom: 50px;
    }

    .testimonial {
        text-align: center;
        padding-top: 80px;
    }

    .footer {
        padding-top: 100px;
        padding-bottom: 80px;
    }

    .inner-text h3 {
        font-size: 40px;
        line-height: 55px;
    }

    .inner-text span:after,
    .abt-img:after {
        display: none;
    }

    .post-right li {
        flex-direction: column;
    }

    .post-content-1 {
        padding: 20px 0 0 0;
    }
}

@media screen and (max-width:480px) {
    .fun-fact-inner li {
        width: 100%;
    }

    .ban-lhs img {
/* display: none; */
        margin-top: 10px;
        width: 30px;
        height: 30px;
    }

    .ban-lhs h1, .ban-lhs b {
        font-size: 40px;
        line-height: 52px;
    }

    .ban-lhs b {
        margin-right: 10px;
    }

    .showcase li {
        float: left;
        margin: 0 16px 16px 0;
    }

    .banner .ban-lhs .comm-btn {
        flex-direction: column;
    }

    .comm-btn .bg-none {
        margin-top: 25px;
    }

    .text-des:after {
        display: none;
    }

    .abt-text i {
        font-size: 23px;
        text-align: left;
    }
}