@media only screen and (min-width:300px) and (max-width:600px) {

    .btn {
        padding: 7px 7px;       
        font-size: 12px;
    }
    #author:before ,#author2::before{
background-color: #fff;

    }
    .preview-box {
        width: 95%;
        max-width: 100% !important;
    }
    .mx-10 {
        max-width: 7em;
    }
    .hero-img.hm img
    {
        max-width: 64%;
    }
    .align-just-sm
    {
        text-align: justify!important ;
    }
    .section {
        padding: 0px 0!important ;
    }
}

@media only screen and (min-width:750px) and (max-width:1200px) {

    #author:before ,#author2::before{
        background-color: #fff;
        
            }
            .preview-box {
                width: 95%;
                max-width: 100% !important;
            }
            #tns1 > .tns-item {

                width:calc(40%) !important;
            }


}