@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;1,300&display=swap');

  .c {
      width: 100%;
     height: 400px;
     background-color: white
  } 
  .swiper{
      width: 100%;
      height: 400px;
  }
  .swiper-slide img{
    width: 100%;
    height: 400px;
  }
  .swiper .swiper-button-prev, .swiper .swiper-button-next{
      color: rgb(145, 145, 133);
      border-radius: 50%;
      padding: 10px;
      background-color:rgb(247, 239, 239)
  }
  

*{
    font-family: Lato;
}


   #input {
     padding-top: 1%;
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: 230px;
    width: 80%;
    margin: auto;

   }
   #input >  div  {
    
     border-radius: 20px;
     height: 250px;
     overflow: hidden
    
   }
   #input >  div :first-child {
     height: 200px;
     width: 100%;
     border-radius: 20px;
     overflow: hidden; 
      transition: transform .2s ease; 
   }
   
   #input  >  div :hover img {
    transition: transform .3s ease; 
       transform: scale(1.5);
       
   }

#container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
     gap: 20px; 
    margin-top: 50px;
    width: 83%;
    margin: auto;
    
    }
    .main{
        width: 92%;
    height: 350px;
    justify-content: space-evenly;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 10px 2px 8px 0px;
    margin-top: 20px;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    }
    .image{
        width: 100%;
        height: 200px;
        margin-bottom: 5%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    h4{
        margin-left: 5px;
        margin-top: -2px;
        white-space: wrap; 
        width: 300px; 
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    h4:hover{
        overflow: visible;
    }

    .des{
        margin-left: 5px;
        margin-top: -6px;
        font-size: 13px;
        white-space: nowrap; 
        width: 300px; 
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
     .hold{
        display: flex;
        justify-content: space-between;
    } 
    .wgt{
        margin-left: 5px;
        margin-top: -28px;
        display: flex;
        color: rgb(56, 55, 55);
         }

  
    h6{
        font-size: 13px;

    }
    .wgt  :nth-child(1){
        margin-left: 1px;

    }
    .wgt  :nth-child(2){
       margin-left: 5px;

    }

    .wgt  :nth-child(3){
        margin-left: 1px;
 
     }
     .wgt  :nth-child(4){
        margin-left: 10px;
 
     }
     .wgt  :nth-child(5){
        margin-left: 5px;
 
     }

     .pri{
        margin-left: 5px;
        margin-top: -40px;
        display: flex;
        color: rgb(56, 55, 55);
    }
    .pri :nth-child(1){
        color: red;
        font-size: 15px;
    }
    .pri :nth-child(2){
       margin-top: 25px;
       margin-left: 5px;
       
    }
    .pri :nth-child(3){
        margin-top: 25px;
    }
    .pri :nth-child(4){
        margin-top: 23px;
        margin-left: 10px;
    }
    .addcartbtn{
        margin-left: 150px;
        margin-bottom: 2px;
        width: 100px;
        height: 40px;
        border-radius: 5px;
        border: 0px;
        background-color:crimson ;
        color: white;
        cursor: pointer;
        font-weight: bolder;
        font-size: 16px;
    }

   #bonelessCuts {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    margin-top: 50px;
    width: 82%;
    margin: auto;
    
    }

    #blog {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        /* gap: 20px; */
        margin-top: 50px;
        /* margin-left: 10px; */
        width: 82%;
        margin: auto;
        /* border: 1px solid green; */
        
        }
        #b_main{
            width: 88%;
            height: 350px;
            justify-content: space-evenly;
            border-radius: 10px;
            box-shadow: rgba(99, 99, 99, 0.2) 10px 2px 8px 0px;
            margin-top: 20px;
        }
        #b_name{
            margin-left: 5px;
            margin-top: -2px;
            white-space: wrap; 
            width: 300px; 
            font-size: 15px;
            
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .b_image{
            width: 353px;
            height: 200px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
       
   

        .categories{
            text-align: center;  
            color : #3e4d60; 
            margin-top: -15px; 
            cursor: pointer;
        }

        .catImg{
            cursor: pointer;
        }