#prlistbox{
    background: #000;
    padding: 4vw 4vw 0vw;
    
}
    .prh1 {
     font-family: library-3;
    margin: 0;
    font-size: 2vw;
    text-align: center;
    background:#00796B;
    border-radius: 8px;
    width:78%;
    color:white;
    padding:1vw;
    margin:0vw auto;
    }

    .brand-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 20px;
      max-width: 1000px;
      margin: auto;
      padding:2vw 5vw 5vw 5vw;
    }

    a.brand-card {
      background-color: #000;
      border-radius: 12px;
      text-decoration: none;
      color: #ffffff;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    
    a.brand-card1 {
      background-color: #de22dc;
      border-radius: 12px;
      text-decoration: none;
      color: #ffffff;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    a.brand-card2 {
      background-color: ffc600;
      border-radius: 12px;
      text-decoration: none;
      color: #ffffff;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    a.brand-card3 {
      background-color: #000b5a;
      border-radius: 12px;
      text-decoration: none;
      color: #ffffff;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    a.brand-card4 {
      background-color: #006811;
      border-radius: 12px;
      text-decoration: none;
      color: #ffffff;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    a.brand-card5 {
      background-color: #c40000;
      border-radius: 12px;
      text-decoration: none;
      color: #ffffff;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: transform 0.2s, box-shadow 0.2s;
    } 
    a.brand-card6 {
      background-color: #504f50;
      border-radius: 12px;
      text-decoration: none;
      color: #ffffff;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: transform 0.2s, box-shadow 0.2s;
    }     

    a.brand-card1:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }

    a.brand-card2:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }

    a.brand-card3:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }    

    a.brand-card4:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }
    a.brand-card5:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    } 
    a.brand-card6:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }     
    .brand-logo {
      width: 70px;
      height: 70px;
      object-fit: contain;
      margin-bottom: 10px;
    }

    .brand-name {
      font-weight: 600;
      font-size: 1rem;
    }
 

    @media (max-width: 480px) {
    #prlistbox{
    background: #000;
    padding:3vw 4vw 5vw 4vw;
    }
      .prh1 {
        font-size: 1.2rem;
        padding:3vw;
        background:#00796B;
        width:90%;
        color:white;
        margin:3vw auto;
      }
    .brand-list {
    grid-template-columns: 1fr;
      padding:4vw 5vw 5vw 5vw;}

      .brand-card {
        padding: 15px;
      }

      .brand-logo {
        width: 60px;
        height: 60px;
      }

      .brand-name {
        font-size: 0.95rem;
      }
    }