.hero {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 40px 12%;
  }


  .hero-image {flex:0 0 40%; display:flex; justify-content:center;}
  .hero-image img {width:100%; max-width:450px; border-radius:20px;  }
  .hero-content {flex:0 0 55%;}
  .hero-content h1 {font-size:48px; font-weight:700; margin-bottom:15px; line-height:1.2;}
  .hero-content p {font-size:16px; color:#444; margin-bottom:25px; max-width:500px;}
  .btn {display:inline-block ; padding:12px 28px !important; border-radius:30px !important; background:#f47c32; color:#fff; font-weight:bold; font-size:18px; text-decoration:none; box-shadow:0 4px 10px rgba(254,123,49,0.3); transition:0.3s;}
  .btn:hover {background:#000; transform:scale(1.05);}

  /* Specs Section */
  .specs {padding:25px 8%;}
  .specs-container {display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:25px; max-width:1100px; margin:auto;}
  .spec-card {background:#fff; border-radius:16px; padding:25px 20px; box-shadow:0 6px 18px rgba(0,0,0,0.06); border-top:6px solid #1c83c7; transition:0.3s;}
  .spec-card:hover {transform:translateY(-6px);}
  .spec-title {font-size:22px; font-weight:bold; color:#f47c32; margin-bottom:15px; text-align:center;}
  table {width:100%; border-collapse:collapse;}
  th, td {padding:8px 6px; font-size:14px; border-bottom:1px solid #f3e3d6; text-align:left;}
  th {width:40%; font-weight:600; color:#111;}
  td {color:#444;}

  /* Responsive */
  @media(max-width:900px){
    .hero{flex-direction:column;padding:40px 20px;text-align:center;}
    .hero-image{flex:0 0 100%;margin-bottom:20px;}
    .hero-content{flex:0 0 100%;}
    .hero-content h1{font-size:34px;}
    .hero-image img{max-width:280px;margin:0 auto;}
    .hero-content p {font-size:13px; color:#444; margin-bottom:25px; max-width:500px;}
  }
  .btn:hover {
  background: #000; /* or your desired hover color */
  color: #fff;      /* ensures text stays white */
  transform: scale(1.05);
}
.spec-bold table tr th td{
       width: 40%;
    font-weight: 600;
    color: #111;
}
.hero-explore{
    display:flex;
    gap:10px;
    justify-content:center;
    align-item:center;
}