/*=== responsive for mobile===*/


@media (max-width: 767px) {
	
    /*=== Heading style====*/	
        
    h1{
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 0;
        color: #222;
    }
    
    
    h2 {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 0;
        color: #222;
    }
    
    h3 {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 0;
        color: #222;
    }
    
    h3 {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 0;
        color: #222;
    }
    
    h4 {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 0;
        color: #222;
    }
    
    h5 {
        font-size: 18px;
        font-weight: 300;
        margin-bottom: 0;
        color: #222;
    }
    
    h6 {
        font-size: 16px;
        font-weight: 100;
        margin-bottom: 0;
        color: #222;
    }

    .logo{
        text-align: center;
    }

    #header .navbar {
        padding: 7px;
        justify-content: end;
    }

    #header  .navbar-light .navbar-toggler-icon {
        width: 24px;
        height: 17px;
        background-image: none;
        position: relative;
        border-bottom: 1px solid rgb(255, 255, 255);
        transition: all 300ms linear;
        top: 0px;
        right: 0px;
    }

    #header  .navbar-light .navbar-toggler-icon:after, .navbar-light .navbar-toggler-icon:before {
        width: 24px;
        position: absolute;
        height: 1px;
        background-color: rgb(255, 255, 255);
        top: 0;
        left: 0;
        content: '';
        z-index: 2;
        transition: all 300ms linear;
    }

    #header .navbar-light .navbar-toggler-icon:after {
        top: 8px;
    }

    #header .nav-link{
        font-size: 16px;
        padding: 6px 20px !important;
    }

    #header .nav-item{
        padding-left: 0px !important;
    }

    .logo .navbar-brand{
        margin-right: 0px;
    }

    .top-free-estimate {
        padding-top: 1px;
    }

    .top-free-estimate p {
        font-family: 'Ek Mukta';
        font-size: 16px;
        line-height: 20px;
    }

    .top-call-section {
        display: flex;
        padding-top: 2px;
        padding-left: 0%;
        justify-content: center;
    }

    .blog-list-main{
        -webkit-order: 1;
        order: 1;
        width: 100%;
    }

    .blog-left-post{
        -webkit-order: 1;
        order: 2;
        width: 100%;
    }

    .blog-right-archive{
        -webkit-order: 1;
        order: 3;
        width: 100%;
    }

    .top-serach-icon{
        display: none;
    }

    .blog-listing-heading{
        font-size: 16px;
    }

    .blog-post-content h2 a{
        font-size: 24px;
    }

    .footer-copyright-text{
        text-align: center;
    }

    .footer-social {
        position: relative;
        width: 100%;
        margin-top: 4px;
        padding-top: 0px;
        text-align: center;
    }

    .row{
        margin-left: 0px;
        margin-right: 0px;
    }

    .blog-detail-heading{
        font-size: 22px;
    }

    .heading-liked-section{
        font-size: 18px;
    }
    	
    
    }
    
    /*-- ======= Top Bar css ======= */
    
    @media only screen and (min-width: 768px) and (max-width: 1000px)  {
    
        #header .nav-link {
            font-size: 12px;
            padding: 12px 10px !important;
            font-weight: 500;
        }

        .blog-right-archive {
            width: 100%;
        }

        .blog-left-post {
            width: 40%;
        }

        .blog-list-main {
            width: 60%;
        }

        .search-text-field {
            width: 64%;
        }

        .blog-post-content h2 a{
            font-size: 22px;
            display: inline-block;
            line-height: 28px;
        }

        .blog-item-row .blog-post-content h2 a {
            font-size: 22px;
            display: inline-block;
            line-height: 28px;
        }

        .social-icon-list li a {
            font-size: 18px;
        }

        .row{
            margin-left: 0px;
            margin-right: 0px;
        }

        .custom-container {
            max-width: 750px;
        }

        .blog-detail-heading {
            font-size: 22px;
        }

        .heading-liked-section{
            font-size: 20px;
        }

        .liked-blogs .blog-post-content h2 a{
            font-size: 13px;
            line-height: 20px;
        }

        .liked-blogs .post-date{
            font-size: 12px;
        }
}

 @media only screen and (min-width: 1001px) and (max-width: 1152px)  {
		
	
    #header .nav-link{
        font-size: 16px;
        padding: 12px 12px !important;
    }

    .social-icon-list li a {
         font-size: 14px;
    }

    .blog-post-content h2 a {
        font-size: 26px;
        font-weight: 500;
        display: inline-block;
    }

    .custom-container {
        max-width: 990px;
    }

    .search-text-field {
        width: 60%;
    }

    .blog-item-row .blog-post-content h2 a {
        font-size: 20px;
        display: inline-block;
    }

    .blog-detail-heading{
        font-size: 30px;
    }

    .heading-liked-section{
        font-size: 22px;
    }

    .liked-blogs .blog-post-content h2 a{
        font-size: 14px;
    }
    
    
    }
    
    
    @media only screen and (min-width: 1200px) and (max-width: 1280px)  {

        .custom-container {
            max-width: 1100px;
        }
        .search-text-field {
            width: 60%;
        }

        .blog-post-content h2 a{
            font-size: 26px;
        }
        .blog-item-row .blog-post-content h2 a {
            font-size: 20px;
            display: inline-block;
        }

        .blog-detail-heading{
            font-size: 34px;
        }
    }
    
    
    
    @media only screen and (min-width: 1281px) and (max-width: 1399px)  {
        .custom-container {
            max-width: 1200px;
        }
        .search-text-field{
            margin-right: 8px;
        }
        
    }
    
    @media only screen and (min-width: 1400px) and (max-width: 1440px)  {

        .custom-container {
            max-width: 1300px;
        }

        .search-text-field{
            margin-right: 8px;
        }
      }

      @media only screen and (min-width: 1441px) and (max-width: 1599px)  {

        .custom-container {
            max-width: 1300px;
        }
      }

    @media only screen and (min-width: 1600px) and (max-width: 1680px)  {
      
    }