h2,h3,p,s,div,button {
    font-family: Text,Arial,sans-serif;
    margin: 10px;
  }
  #ptag {
    font-size: 15px;
    font-family: Brandon Text,Arial,sans-serif;
    margin-left: 10px;
    margin-top: -5px;    
    white-space: nowrap; 
  width: 95%; 
  overflow: hidden;
  text-overflow: ellipsis;
  }

  #h2tag {
    font-size: 16px;
    font-family: Brandon Text,Arial,sans-serif;
    font-weight: 600;
  }

  #h3tag {
    font-size: 16px;
    font-family: Brandon Text,Arial,sans-serif;
    margin-top: -5px;
    color: rgb(243, 155, 47);
  }

  #prtag {
    font-size: 16px;
    font-family: Brandon Text,Arial,sans-serif;
    margin-bottom: 5px;
    font-weight: 600;
    margin-top: 5px;

  }

  #oprtag {
    font-size: 16px;
    font-family: Brandon Text,Arial,sans-serif;
    margin-top: 0px;
    color: red;

  }

  #b1 {
    margin-right: 40px;
    border: none;
    background-color: orange;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    margin-left: 10px;
    margin-bottom: 10px;
  }
  #see {
    border: none;
    background-color: orange;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;

  }
  p {
    color: #393939;
  }
    .product {
        width: 80%;
        display: grid;
        grid-template-columns: repeat(3, 325px);
        grid-template-rows: auto;
        gap: 30px;
        
    }

    #img1 {
        width: 100%;
        height: 400px;
        border-radius: 10px;
        
    } 

    #filter {
        font-size: 15px;                             
        border: none;
        border-top: 2px solid gainsboro;
        border-bottom: 2px solid gainsboro;
        padding: 10px ;
        width: 200px; 
                

    }
    #filBrand {
       font-size: 15px; 
        display: block;
        margin-bottom: 10px;            
        border: none;            
        border-bottom: 2px solid gainsboro;
        padding: 10px;
        width: 200px;


    }

    option {
        border-radius: 10px;
    }

    s+div {
      margin-bottom: 10px;
    }

    #card {
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      
    }
    #box {
      width: 95%;
      display: flex;
      margin: auto;
      justify-content: space-between;
      
    }
    #select {
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-content: center;
      position: sticky;
      top: 0;
      width: 150px;
      margin-left: 0%;
    }


    @media only screen and (max-width: 800px) {

      .product {
        width: 80%;
        display: grid;
        grid-template-columns: repeat(2, 325px);
        grid-template-rows: auto;
        gap: 30px;
        
    }

    
    #filter {
      font-size: 15px;                             
      border: none;
      border-top: 2px solid gainsboro;
      border-bottom: 2px solid gainsboro;
      padding: 10px ;
      width: 200px; 
              

  }
  #filBrand {
     font-size: 15px; 
      display: block;
      margin-bottom: 10px;            
      border: none;            
      border-bottom: 2px solid gainsboro;
      padding: 10px;
      width: 200px;


  }
  
    } 

    @media only screen and (max-width: 400px) {

      #select {
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        height: 80px;
        display: flex;
        flex-direction: column;
        align-content: center;
        position: sticky;
        top: 0;
        width: 150px;
        margin: auto;
        
      }
  


      #box {
        width: 95%;
        flex-direction: column;
        margin: auto;
        
      }

      .product {
        width: 80%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 30px;
        margin: auto;
        
    }

    
    #filter {
      font-size: 15px;                             
      border: none;
      border-top: 2px solid gainsboro;
      border-bottom: 2px solid gainsboro;
      padding: 10px ;
      width: 200px; 
              

  }
  #filBrand {
     font-size: 15px; 
      display: block;
      margin-bottom: 10px;            
      border: none;            
      border-bottom: 2px solid gainsboro;
      padding: 10px;
      width: 200px;


  }
  
    }