/* Features Section */
.features {
    display: flex;
    justify-content: space-around;
    padding: 60px 20px;
    background-color: #f4f4f4;
  }
  
.features {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 40px 20px;
    background-color: #ffffff00;
  }
  
.features .card {
    flex: 1;
    margin: 20px;
    max-width: 300px;  /* Adjust this to control the card width */
  }

/* General card styling */
.cards {
    padding: 60px 20px;
    background-color: #f4f4f4;
  }
  
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  /* Adjusts number of columns based on screen size */
    gap: 20px;  /* Space between the cards */
  }
  
.card {
    background-color: #fff;
    border: 2px solid #878686;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
  }
  
.card img {
    width: 100px;
    margin-bottom: 20px;
  }
  
.card h2 {
    font-size: 24px;
    margin-bottom: 5px;
  }
  
.card p {
    font-size: 16px;
    color: #666;
  }
  
.card:hover {
    transform: scale(1.05);  /* Slight zoom on hover */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  /* Adds shadow on hover */
  }
  
 /* NT Radiance Image ONLY */ 
#ntradianceimg {
    width: 80%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 40px;
    margin-top: 20px;
  }

 /* tcgplayer box image ONLY */ 
#tcgplayerimg {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 40px;
  }

 /* Ninetails box image ONLY */
#ninetailslogoimg {
    width: 60%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-bottom: 20px;
  }

 /* Snorlax box image ONLY */
#snorlaximg {
    width: 60%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-bottom: 20px;
    border-radius: 5px;
  }

#snorlaxcard {
  padding-top: 40px;
}

/* Store image ONLY */
  #storeimage {
    width: 60%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-bottom: 20px;
  }

  #storeButton {
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  #storeButton:hover {
    transform: scale(1.05);  /* Slight zoom on hover */
  }

  #storeButton p {
    font-size: 16px;
    color: #666;
  }

 /* Box around the cards */ 
#section2 {
    background-color: rgb(203, 223, 255);
    border: 2px solid #878686;
    border-radius: 10px;
  }