.elementor-12250 .elementor-element.elementor-element-8c3c2c7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:0px;--margin-bottom:80px;--margin-left:0px;--margin-right:0px;}.elementor-12250 .elementor-element.elementor-element-d0a7da0{--display:flex;}.elementor-12250 .elementor-element.elementor-element-7fdcc65{--display:flex;}.elementor-12250 .elementor-element.elementor-element-3d794d1{--display:flex;}.elementor-12250 .elementor-element.elementor-element-a18407a{--display:flex;}@media(max-width:1024px){.elementor-12250 .elementor-element.elementor-element-8c3c2c7{--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:60px;--margin-left:0px;--margin-right:0px;}}@media(max-width:768px){.elementor-12250 .elementor-element.elementor-element-8c3c2c7{--margin-top:0px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;}}@media(min-width:769px){.elementor-12250 .elementor-element.elementor-element-d0a7da0{--width:50%;}.elementor-12250 .elementor-element.elementor-element-7fdcc65{--width:50%;}}@media(max-width:1024px) and (min-width:769px){.elementor-12250 .elementor-element.elementor-element-d0a7da0{--width:100%;}.elementor-12250 .elementor-element.elementor-element-7fdcc65{--width:100%;}}/* Start custom CSS for wd_text_block, class: .elementor-element-2bf6a8e */<style>
/* --- Grid Boxes --- */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.spec-box {
  background: #f9fbff;
  padding: 18px;
  text-align: center;
  border-radius: 12px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  color: #333;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.spec-box:hover {
  background: #eef4ff;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

.spec-box small {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}

/* --- Popup --- */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
}

.modal-content {
  background: #fff;
  margin: 5% auto;
  padding: 20px;
  width: 85%;
  max-width: 800px;
  max-height: 80%;
  overflow-y: auto;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  position: relative;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {opacity: 0; transform: scale(0.95);}
  to {opacity: 1; transform: scale(1);}
}

.close {
  position: absolute;
  right: 15px;
  top: 12px;
  font-size: 24px;
  font-weight: bold;
  color: #444;
  cursor: pointer;
}

.close:hover {
  color: #000;
}

/* --- Table --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 14px;
  font-family: "Segoe UI", Arial, sans-serif;
}

table th {
  background: #0073e6;
  color: #fff;
  padding: 10px;
  text-align: left;
}

table td {
  border: 1px solid #ddd;
  padding: 10px;
  color: #333;
}

table tr:nth-child(even) {
  background: #f9f9f9;
}

/* --- Mobile Responsive --- */
@media (max-width: 600px) {
  .specs-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .spec-box {
    padding: 15px;
    font-size: 14px;
  }
  .spec-box small {
    font-size: 12px;
  }
  .modal-content {
    width: 95%;
    margin: 10% auto;
    padding: 15px;
    max-height: 85%;
  }
  table th, table td {
    font-size: 13px;
    padding: 8px;
  }
}
</style>

<!-- --- 6 Block Layout --- -->
<div class="specs-grid">
  <div class="spec-box">Connection<small>Bluetooth, USB-C</small></div>
  <div class="spec-box">Works with<small>iPhone, iPads</small></div>
  <div class="spec-box">Headphone Style<small>On-Ear</small></div>
  <div class="spec-box">Wireless<small>Bluetooth</small></div>
  <div class="spec-box">Battery Life<small>55 hours</small></div>
  <div class="spec-box">Mic Tech<small>MEMS Technology</small></div>
</div>

<!-- --- Button --- -->
<p style="text-align:center;">
  <a href="javascript:void(0)" onclick="openModal()" 
     style="background:#0073e6; color:#fff; padding:10px 18px; border-radius:6px; text-decoration:none; font-family:Segoe UI;">
     View Full Specifications
  </a>
</p>

<!-- --- Popup Modal --- -->
<div id="specModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <h2 style="margin-top:0; font-family:Segoe UI; color:#0073e6;">Specifications</h2>

    <table>
      <tr><th>Title</th><th>Details</th></tr>
      <tr><td>Color</td><td>Black</td></tr>
      <tr><td>Brand</td><td>JLab</td></tr>
      <tr><td>Weight</td><td>11.4 oz</td></tr>
      <tr><td>Model</td><td>HBGOWORKRBLK4</td></tr>
    </table>
  </div>
</div>

<script>
function openModal() {
  document.getElementById("specModal").style.display = "block";
}
function closeModal() {
  document.getElementById("specModal").style.display = "none";
}
</script>/* End custom CSS */