.bike-insurance-section {
  background-color: #f8faff;
  color: #222;
  padding: 4em 0;
}

.bike-insurance-section h2 {
  text-align: center;
  font-size: 1.6em;
  margin-bottom: 0.5em;
  color: #019444;
  font-weight: 700;
}

.bike-insurance-section p {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2em;
  color: #555;
}

.vehicle-insurance-cards,
.cover-grid,
.look-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  margin-bottom: 4em;
}

.card,
.cover-card,
.look-card {
  border-radius: 12px ;
  padding: 1.5em;
  max-width: 300px;
  text-align: center;
  transition: all 0.3s ease;
}

.card:hover,
.look-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);

}

.card img,
.cover-card img,
.look-card img {
  width:15em;
  height: 15em;
 
}

.card h3,
.cover-card h3,
.look-card h4 {
  margin-bottom: 0.5em;
  color: #019444;
}



.cover-card p,
.look-card p {
  color: #444;
  font-size: 0.95em;
}

.add-on-covers {
  background-color: rgba(123, 201, 63, 0.25); /* Light blue background */
  padding: 2em 2em;
  margin-bottom: 4em;
  
}
.cover-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  padding: 1.5em;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  flex: 1 1 200px;
  max-width: 250px;
}

.cover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* .cover-card img {
  height: 50px;
  margin-bottom: 1em;
} */
/* Responsive Design */
@media (max-width: 768px) {
  .card,
  .cover-card,
  .look-card {
    max-width: 100%;
  }

  .vehicle-insurance-cards,
  .cover-grid,
  .look-grid {
    flex-direction: column;
    align-items: center;
  }
}

.car-benefits {
  background-color: rgba(123, 201, 63, 0.25);
  padding: 4em 2em;
  text-align: center;
}

.car-factors {
  background-color: #ffffff;
  padding: 4em 2em;
  text-align: center;
}

.car-benefits h2,
.car-factors h2 {
  font-size: 1.6em;
  margin-bottom: 2em;
  color: #019444;
  font-weight: 700;
}

.benefit-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
}


 .benefit-item {
  display: flex;
  align-items: center; /* ✅ Align vertically centered */
  padding: 1.5em;
  max-width: 600px;
  width: 100%;
  gap: 1.5em;
}

.benefit-item img {
  width: 8em; /* You can tweak size as needed */
  height: 8em;
  flex-shrink: 0;
  object-fit: contain;
}

.benefit-item h3 {
  font-size: 1.1em;
  color: #019444;
  margin-bottom: 0.3em;
}

.benefit-item p {
  color: #333;
  font-size: 0.95em;
}

.benefit-item > div {
  flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .benefit-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .benefit-item img {
    margin-bottom: 1em;
  }

  .benefit-item > div {
    text-align: center;
  }
}


/* ✅ Common section styling */
.premium-calc-section {
  background-color: rgba(123, 201, 63, 0.25);
  padding: 3em 5%;
}
.idv-effect-section{
    background-color: #fff;
    padding: 3em 5%;
}

.premium-calc-section h2,
.idv-effect-section h2 {
  color: #019444;
  font-size: 1.6em;
  margin-bottom: 0.5em;
  text-align: center;
  font-weight: 700;
}

.sub-text {
  text-align: center;
  margin-bottom: 2em;
  font-size: 1em;
  color: #555;
}

.idv-effect-section p {
  max-width: 800px;
  margin: 0 auto 1em;
  font-size: 1em;
  color: #444;
  line-height: 1.6em;
  text-align: center;
}

.idv-effect-section h3 {
  text-align: center;
  margin: 2em auto 1em;
  color: #1a5730;
}

/* ✅ Table styling */
.green-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border: 1px solid #cce3d2;
}

.green-table th, .green-table td {
  border: 1px solid #cce3d2;
  padding: 1em;
  text-align: left;
  vertical-align: top;
  font-size: 1em;
}

.green-table th {
  background-color: #e8f5e9;
  color: #019444;
  width: 30%;
}

.green-table tr:nth-child(even) td {
  background-color: #eef5ee;
}
