.shop{
    background-color: $color-white;

    .banner{
        padding-top: 100px;
        padding-bottom: 200px;
    
    
        .banner_head{
            color: $color-black;
            text-align: center;
            font-size: calc(3.6vw + 1rem);
            margin: auto;
            font-family: $font-offer;
        }
    }



    .product{
       
        padding: 0 50px;
.way{
    color: $color-black;
    text-decoration: none;
}
        .img_details{
padding-top: 20px;
            text-align: center;
            h4{
                padding-top: 20px;
                font-weight: normal;
            }
        }
       .main {
       
    text-align: center;
         margin: auto;
         h2{
             text-align: center;
             font-size: 60px;
            
             color:$color-black;
             text-transform: uppercase;
             padding-bottom: 30px;
             @media screen and(max-width:768px){
               font-size: 30px;
                  }
         }
         .categories{
           display: flex;
           justify-content: center;
           @media screen and(max-width:768px){
           display: block;
                  }
         }
         }
         h1 {
           font-size: 50px;
           word-break: break-all;
         }
         .row {
           margin: 10px -16px;
         }
         /* Add padding BETWEEN each column */
         .row,
         .row > .column {
           padding: 8px;
         }
         /* Create three equal columns that floats next to each other */
         .column {
           float: left;
           width: 33.33%;
           display: none; /* Hide all elements by default */
         }
         /* Clear floats after rows */ 
         .row:after {
           content: "";
           display: table;
           clear: both;
         }
         /* Content */
         .content {
          padding: 20px 0;
        
        
         
         }
         /* The "show" class is added to the filtered elements */
         .show {
           display: block;
         }
         /* Style the buttons */
         .btn {
           border: none;
           outline: none;
           padding: 12px 16px;
           background-color: white;
           cursor: pointer;
           color:$color-black;
           
         }
         .btn:hover {
           color: grey;
         }
         .btn.active {
           color:grey;
         }
       }
     
       #hh{
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }

}