:root{
    --radius: 34px;           /* card curve */
    --accent: #00c9c7;        /* teal outline highlight */
    --text:  #2a2a2a;
  }

 .wrap{
    max-width: 1220px;
    margin-inline:auto;
  }

  .title{
    font-weight:800; letter-spacing:.2px;
    text-align:center; margin:0 0 1.25rem;
  }

  .grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 26px 26px;
    align-items:start;
  }

  /* ====== CATEGORY CARD ====== */
  .category{
    display:flex; flex-direction:column; align-items:center; gap:.9rem;
  }

  .card10{
    position:relative;
    width:100%;
     border-right: 5px solid #0cd1be;
    aspect-ratio: 4 / 5.2;           /* keeps the tall look */
    border-radius: calc(var(--radius) * 1.2);
    overflow:hidden;
    padding:18px 18px 12px;
    background: #fff;                 /* fallback while layer paints */
    isolation:isolate;
    box-shadow:
      0 10px 20px rgba(0,0,0,.04),
      0 2px 6px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .card10::before{
    /* colored diagonal panel (bottom layer) */
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(165deg, var(--bg1) 47%, var(--bg2) 0);
    z-index:-2;
  }
  .card10::after{
    /* accent outline that peeks on right/bottom */
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: 8px 10px 0 0 var(--accent);
    translate: 6px 8px;               /* offset outline */
    z-index:-3;
  }

  .card10:hover{
    transform: translateY(-4px);
    box-shadow:
      0 18px 28px rgba(0,0,0,.06),
      0 6px 10px rgba(0,0,0,.05);
  }



  .card1{
    position:relative;
    width:100%;
        margin-top: 20%;
    aspect-ratio: 4 / 5.2;           /* keeps the tall look */
    border-radius: 45%;
    overflow:hidden;
    padding:18px 18px 12px;
    background: #fff;                 /* fallback while layer paints */
    isolation:isolate;
    box-shadow:
      0 10px 20px rgba(0,0,0,.04),
      0 2px 6px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    border-right: 5px solid #0cd1be;
  }
  .card1::before{
    /* colored diagonal panel (bottom layer) */
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(165deg, var(--bg1) 47%, var(--bg2) 0);
    z-index:-2;
  }
  .card1::after{
    /* accent outline that peeks on right/bottom */
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: 8px 10px 0 0 var(--accent);
    translate: 6px 8px;               /* offset outline */
    z-index:-3;
  }

  .card1:hover{
    transform: translateY(-4px);
    box-shadow:
      0 18px 28px rgba(0,0,0,.06),
      0 6px 10px rgba(0,0,0,.05);
  }

  .card2{
    position:relative;
    width:100%;
    aspect-ratio: 4 / 5.2;           /* keeps the tall look */
  border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
      border-top-right-radius: 10%;
    border-bottom-right-radius: 10%;
    overflow:hidden;
    padding:18px 18px 12px;
    background: #fff;                 /* fallback while layer paints */
    isolation:isolate;
    box-shadow:
      0 10px 20px rgba(0,0,0,.04),
      0 2px 6px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    border-right: 5px solid #0cd1be;
  }
  .card2::before{
    /* colored diagonal panel (bottom layer) */
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(165deg, var(--bg1) 47%, var(--bg2) 0);
    z-index:-2;
  }
  .card2::after{
    /* accent outline that peeks on right/bottom */
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: 8px 10px 0 0 var(--accent);
    translate: 6px 8px;               /* offset outline */
    z-index:-3;
  }

  .card2:hover{
    transform: translateY(-4px);
    box-shadow:
      0 18px 28px rgba(0,0,0,.06),
      0 6px 10px rgba(0,0,0,.05);
  }


  .card3{
    position:relative;
    width:100%;
        margin-top: 20%;
    aspect-ratio: 4 / 5.2;           /* keeps the tall look */
  border-top-left-radius: 30%;
    border-bottom-left-radius: 10%;
      border-top-right-radius: 10%;
    border-bottom-right-radius: 30%;
    overflow:hidden;
    padding:18px 18px 12px;
    background: #fff;                 /* fallback while layer paints */
    isolation:isolate;
    box-shadow:
      0 10px 20px rgba(0,0,0,.04),
      0 2px 6px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    border-right: 5px solid #0cd1be;
  }
  .card3::before{
    /* colored diagonal panel (bottom layer) */
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(165deg, var(--bg1) 47%, var(--bg2) 0);
    z-index:-2;
  }
  .card3::after{
    /* accent outline that peeks on right/bottom */
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: 8px 10px 0 0 var(--accent);
    translate: 6px 8px;               /* offset outline */
    z-index:-3;
  }

  .card3:hover{
    transform: translateY(-4px);
    box-shadow:
      0 18px 28px rgba(0,0,0,.06),
      0 6px 10px rgba(0,0,0,.05);
  }

  
  .card4{
    position:relative;
    width:100%;
    aspect-ratio: 4 / 5.2;           /* keeps the tall look */
border-radius: 30%;
    overflow:hidden;
    padding:18px 18px 12px;
    background: #fff;                 /* fallback while layer paints */
    isolation:isolate;
    box-shadow:
      0 10px 20px rgba(0,0,0,.04),
      0 2px 6px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    border-right: 5px solid #0cd1be;
  }
  .card4::before{
    /* colored diagonal panel (bottom layer) */
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(165deg, var(--bg1) 47%, var(--bg2) 0);
    z-index:-2;
  }
  .card4::after{
    /* accent outline that peeks on right/bottom */
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: 8px 10px 0 0 var(--accent);
    translate: 6px 8px;               /* offset outline */
    z-index:-3;
  }

  .card4:hover{
    transform: translateY(-4px);
    box-shadow:
      0 18px 28px rgba(0,0,0,.06),
      0 6px 10px rgba(0,0,0,.05);
  }









   .card5{
    position:relative;
    width:100%;
    aspect-ratio: 4 / 5.2;           /* keeps the tall look */
    border-radius: calc(var(--radius) * 1.2);
    overflow:hidden;
    padding:18px 18px 12px;
    background: #fff;                 /* fallback while layer paints */
    isolation:isolate;
    box-shadow:
      0 10px 20px rgba(0,0,0,.04),
      0 2px 6px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    border-right: 5px solid #0cd1be;
  }
  .card5::before{
    /* colored diagonal panel (bottom layer) */
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(165deg, var(--bg1) 47%, var(--bg2) 0);
    z-index:-2;
  }
  .card5::after{
    /* accent outline that peeks on right/bottom */
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: 8px 10px 0 0 var(--accent);
    translate: 6px 8px;               /* offset outline */
    z-index:-3;
  }

  .card5:hover{
    transform: translateY(-4px);
    box-shadow:
      0 18px 28px rgba(0,0,0,.06),
      0 6px 10px rgba(0,0,0,.05);
  }



  .card6{
    position:relative;
    width:100%;
    
        margin-top: 20%;
    aspect-ratio: 4 / 5.2;           /* keeps the tall look */
    border-radius: 45%;
    overflow:hidden;
    padding:18px 18px 12px;
    background: #fff;                 /* fallback while layer paints */
    isolation:isolate;
    box-shadow:
      0 10px 20px rgba(0,0,0,.04),
      0 2px 6px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    border-right: 5px solid #0cd1be;
  }
  .card6::before{
    /* colored diagonal panel (bottom layer) */
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(165deg, var(--bg1) 47%, var(--bg2) 0);
    z-index:-2;
  }
  .card6::after{
    /* accent outline that peeks on right/bottom */
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: 8px 10px 0 0 var(--accent);
    translate: 6px 8px;               /* offset outline */
    z-index:-3;
  }

  .card6:hover{
    transform: translateY(-4px);
    box-shadow:
      0 18px 28px rgba(0,0,0,.06),
      0 6px 10px rgba(0,0,0,.05);
  }

  .card7{
    position:relative;
    width:100%;
    aspect-ratio: 4 / 5.2;           /* keeps the tall look */
  border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
      border-top-right-radius: 10%;
    border-bottom-right-radius: 10%;
    overflow:hidden;
    padding:18px 18px 12px;
    background: #fff;                 /* fallback while layer paints */
    isolation:isolate;
    box-shadow:
      0 10px 20px rgba(0,0,0,.04),
      0 2px 6px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    border-right: 5px solid #0cd1be;
  }
  .card7::before{
    /* colored diagonal panel (bottom layer) */
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(165deg, var(--bg1) 47%, var(--bg2) 0);
    z-index:-2;
  }
  .card7::after{
    /* accent outline that peeks on right/bottom */
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: 8px 10px 0 0 var(--accent);
    translate: 6px 8px;               /* offset outline */
    z-index:-3;
  }

  .card7:hover{
    transform: translateY(-4px);
    box-shadow:
      0 18px 28px rgba(0,0,0,.06),
      0 6px 10px rgba(0,0,0,.05);
  }


  .card8{
    position:relative;
    width:100%;
      margin-top: 20%;
    aspect-ratio: 4 / 5.2;           /* keeps the tall look */
  border-top-left-radius: 30%;
    border-bottom-left-radius: 10%;
      border-top-right-radius: 10%;
    border-bottom-right-radius: 30%;
    overflow:hidden;
    padding:18px 18px 12px;
    background: #fff;                 /* fallback while layer paints */
    isolation:isolate;
    box-shadow:
      0 10px 20px rgba(0,0,0,.04),
      0 2px 6px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    border-right: 5px solid #0cd1be;
  }
  .card8::before{
    /* colored diagonal panel (bottom layer) */
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(165deg, var(--bg1) 47%, var(--bg2) 0);
    z-index:-2;
  }
  .card8::after{
    /* accent outline that peeks on right/bottom */
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: 8px 10px 0 0 var(--accent);
    translate: 6px 8px;               /* offset outline */
    z-index:-3;
  }

  .card8:hover{
    transform: translateY(-4px);
    box-shadow:
      0 18px 28px rgba(0,0,0,.06),
      0 6px 10px rgba(0,0,0,.05);
  }

  
  .card9{
    position:relative;
    width:100%;
    aspect-ratio: 4 / 5.2;           /* keeps the tall look */
border-radius: 30%;
    overflow:hidden;
    padding:18px 18px 12px;
    background: #fff;                 /* fallback while layer paints */
    isolation:isolate;
    box-shadow:
      0 10px 20px rgba(0,0,0,.04),
      0 2px 6px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    border-right: 5px solid #0cd1be;
  }
  .card9::before{
    /* colored diagonal panel (bottom layer) */
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(165deg, var(--bg1) 47%, var(--bg2) 0);
    z-index:-2;
  }
  .card9::after{
    /* accent outline that peeks on right/bottom */
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: 8px 10px 0 0 var(--accent);
    translate: 6px 8px;               /* offset outline */
    z-index:-3;
  }

  .card9:hover{
    transform: translateY(-4px);
    box-shadow:
      0 18px 28px rgba(0,0,0,.06),
      0 6px 10px rgba(0,0,0,.05);
  }


  /* Top heading inside card */
  .badge{
    display:grid; place-items:center;
    text-align:center;
    padding: 4px 6px;
    font-weight:800;
    line-height:1.05;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#8b004b;      
                  /* default; overridden per variant */
    font-size: clamp(14px, 2.2vw, 24px);
  }
  
  .badge4{
    display:grid; place-items:center;
    text-align:center;
    padding: 4px 6px;
    font-weight:800;
    line-height:1.05;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#8b004b;      
                  /* default; overridden per variant */
    font-size: clamp(14px, 2.2vw, 24px);
  }
    .badge5{
    display:grid; place-items:center;
    text-align:center;
    padding: 4px 6px;
    font-weight:800;
    line-height:1.05;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#8b004b;                    /* default; overridden per variant */
    font-size: clamp(14px, 2.2vw, 24px);
  }  .badge6{
    display:grid; place-items:center;
    text-align:center;
    padding: 4px 6px;
    font-weight:800;
    line-height:1.05;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#8b004b;                    /* default; overridden per variant */
    font-size: clamp(14px, 2.2vw, 24px);
  }  .badge7{
    display:grid; place-items:center;
    text-align:center;
    padding: 4px 6px;
    font-weight:800;
    line-height:1.05;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#8b004b;                    /* default; overridden per variant */
    font-size: clamp(14px, 2.2vw, 24px);
  }  .badge8{
    display:grid; place-items:center;
    text-align:center;
    padding: 4px 6px;
    font-weight:800;
    line-height:1.05;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#8b004b;                    /* default; overridden per variant */
    font-size: clamp(14px, 2.2vw, 24px);
  }
    .badge9{
    display:grid; place-items:center;
    text-align:center;
    padding: 4px 6px;
    font-weight:800;
    line-height:1.05;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#8b004b;                    /* default; overridden per variant */
    font-size: clamp(14px, 2.2vw, 24px);
  }

  /* Fake “product boxes” row (replace with real <img> if you have assets) */
  .products{
    position:absolute;
    left:10px; right:10px; bottom:12px;
    display:flex; align-items:flex-end; justify-content:center; gap:10px;
  }
  .box{
    width: 24%;
    aspect-ratio: 3/4;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
    border: 2px solid rgba(255,255,255,.7);
    box-shadow: 0 6px 14px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.04);
  }

  /* Optional: use real images instead of .box
     .products img { width:auto; height:96px; object-fit:contain; } */

  /* Caption under the card */
  .caption{
    text-align:center;
    font-size: clamp(14px, 1.7vw, 22px);
    font-weight: 700;
  }

  /* ====== COLOR VARIANTS ====== */
  /* Traditional Fireworks */
  .v-traditional .card10 { --bg1:#ffd1dc; --bg2:#ff7aa2; }
  .v-traditional .badge { color:#b0004e; }

  /* Children Fancy Fireworks */
  .v-children .card1    { --bg1:#e8c7ea; --bg2:#8f7fa5; }
  .v-children .badge   { color:#6a2f91; }

  /* Unique Aerial Fireworks */
  .v-aerial .card2      { --bg1:#c5fbf4; --bg2:#53d0c0; }
  .v-aerial .badge     { color:#006a64; }

  /* Flower Pots */
  .v-flower .card3      { --bg1:#dad7ff; --bg2:#37106a; }
  .v-flower .badge     { color:#2b0b59; }

  /* Fountains */
  .v-fountains .card4   { --bg1:#fde6a8; --bg2:#f4a917; }
  .v-fountains .badge4  { color:#9a5b00; }



  .v-traditional .card5 { --bg1:#f7fa9b; --bg2:#646a10; }
  .v-traditional .badge5  { color:#4b590b; }

  /* Children Fancy Fireworks */
  .v-children .card6    { --bg1:#faed9b; --bg2:#e3b879; }
  .v-children .badge6   { color:#917c2f; }

  /* Unique Aerial Fireworks */
  .v-aerial .card7     { --bg1:#c5fbf4; --bg2:#8f7fa5; }
  .v-aerial .badge7     { color:#563664; }

  /* Flower Pots */
  .v-flower .card8      { --bg1:#dff7bd; --bg2:#93c23b; }
  .v-flower .badge8    { color:#0f7c03; }

  /* Fountains */
  .v-fountains .card9   { --bg1:#d2a8fd; --bg2:#874f9b; }
  .v-fountains .badge9  { color:#4f305f; }


  /* Small screens: tighten spacing */
  @media (max-width:520px){
   
    .grid{ gap:18px; }
  }

  
   @media (max-width:768px){
   .card4,.card9{
    margin-top: 50px;
height:300px;
width: 250px;
margin-left: 110%;
   }
   .badge4,.badge9{
   font-size: 30px;
   }
  }