@media screen and (max-width: 576px) {
    .fgrid{
        width: 100%;
        grid-template-columns: 1fr ;
        padding: 10px;
        
    }
    .card-container{
        display: grid;
        padding: 0 10px 0 10px;
        grid-template-columns: 1fr;
    }
    .card{
        width: 100%;
        height: auto;
        margin: auto;
        padding: 15px;
        grid-template-columns: 1fr;
    }
    .cardcostcontainer{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
    .cardbtn{
        width: 100%;
    }
    .productcard{
        width: 95%;
        margin: auto;
        padding: 15px;
        display: grid;
        border: none;
        grid-template-columns: 1fr;

    }
    .productcostcard1, .productcostcard2 {
        
        border-left: none;
    }
    .blogwelcome{
        width: 100%;
    }
    
    .bloglistcard{
        width: 100%;
        height: auto;
        display: grid;
        
        grid-template-columns: 1fr;
    }
    .bloglistimg{
        display: none;
        width: 0px;
    }
    .submenu{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    .submenuhr{
        display: none;
    }
    .province{
        padding: 10px 0px;
        background-color: #f8f9fa;
        border: none;
    }
    .productcostaffiliate1{
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
        border-left: none; 
    }
    .productcostaffiliate2{
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
        border-left: none;
    }
    .blogcontainer{
        width: 95%;
        
    }
    .blogtitle{
        text-align: left;
    }
        

}

@media screen and (min-width: 576px) {
    .fgrid{
        width: 100%;
        grid-template-columns: 1fr;
        padding: 10px;
        
    }
    .card-container{
        display: grid;
        padding: 0 10px 0 10px;
        grid-template-columns: 1fr;
    }
    .card{
        width: 100%;
        height: auto;
        margin: auto;
        padding: 15px;
        grid-template-columns: 2fr 1fr;
    }
    .cardbtn{
        width: 100%;
    }
    .productcostcard1, .productcostcard2 {
        border-left: none;
    }
   
    .productcard{
        width: 95%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr;

    }
    
    
    
    .bloglistcard{
        width: 100%;
        height: auto;
        display: grid;
        
        grid-template-columns: 1fr;
    }
    .bloglistimg{
        display: none;
        width: 0px;
    }
    .submenu{
        text-align: center;
        font-size: large;
        margin-top: 20px;
    }
    .submenuhr{
        display: none;
    }
    .province{
        padding: 10px 0px;
        background-color: #f8f9fa;
        border: none;
    }
    
    
    .blogcontainer{
        width: 95%;
        
    }
    .blogtitle{
        text-align: left;
    }
}



@media screen and (min-width: 768px) {
    .fgrid{
        width: 100%;
        margin: auto;
        color: rgb(204, 205, 204);
        grid-template-columns: 1fr 1fr;
        
    }
    .card-container{
        display: grid;
        padding: 0 10px 0 10px;
        grid-template-columns: 1fr;
    }
    .cardmain{
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
    .card{
        width: 100%;
        height: auto;
        margin: auto;
        padding: 15px;
        grid-template-columns: 2fr 1fr;
    }
    .cardcostcontainer{
        grid-template-rows: 1fr 1fr;
        
    }
    .cardbtn{
        width: 100%;
    }
    .blogbanner{
        width: 100%;
    }
    .bloglistcard{
        width: 100%;
        height: auto;
        display: grid;
        
        grid-template-columns: 1fr;
    }
    .bloglistimg{
        display: none;
        width: 0px;
    }
    .productcard{
        width: 95%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr;

    }
    .productcostcard1, .productcostcard2 {
        border-left: none;
    }
    
}

@media screen and (min-width: 992px) {
    .fgrid{
        width: 100%;
        margin: auto;
        color: rgb(204, 205, 204);
        grid-template-columns: 1fr 1fr 1fr 1fr;
        
    }
    .card-container{
        display: grid;
        padding: 0 10px 0 10px;
        grid-template-columns: 1fr 1fr;
    }
    
    .card{
        width: 95%;
        height: auto;
        margin: auto;
        padding: 15px;
        grid-template-columns: 2fr 1fr;
    }
    .cardcostcontainer{
        grid-template-rows: 1fr 1fr;
        
    }
    .cardbtn{
        width: 100%;
    }
    select:focus > option:checked { 
        background-color: #979797;
        color: white;
    }
    .contactform{
        width: 70%;
        margin: auto;
    }
    .blogbanner{
        width: 100%;
        margin: auto;
    }
    .bloglistcard{
        width: 90%;
        display: grid;
        grid-template-columns: 1fr 4fr;
    }
    .bloglistimg{
        display: initial;
        width: 150px;
    }
    .productcard{
        width: 95%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0fr;
    }
    .productcostcard1, .productcostcard2 {
        border-left: 1px solid rgb(222,222,222);
    }
    
}

@media screen and (min-width: 1200px) {
    .fgrid{
        width: 100%;
        margin: auto;
        color: rgb(204, 205, 204);
        grid-template-columns: 1fr 1fr 1fr 1fr;
        
    }
    .card-container{
        margin: auto;
        width: 90%;
        display: grid;
        padding: 0 10px 0 10px;
        grid-template-columns: 1fr 1fr;
    }
    
    .card{
        width: 95%;
        height: auto;
        margin: auto;
        padding: 15px;
        grid-template-columns: 2fr 1fr;
    }
    .cardcostcontainer{
        grid-template-rows: 1fr 1fr;
        
    }
    .cardbtn{
        width: 100%;
    }
    .blogbanner{
        width: 1000px;
        margin: auto;
    }
    .bloglistimg{
        width: 200px;
    }
    .productcard{
        width: 90%;
        margin: auto;
        padding: 15px;
        display: grid;
        border: none;
        grid-template-columns: 2fr 1fr;
        box-shadow: rgba(222, 222, 222, 0.851) 3px 3px 4px,rgba(222, 222, 222, 0.851) -3px -3px 4px ;
        overflow-wrap: break-word;
    }
}