/* =====================================
   WHY CHOOSE VWORKER
===================================== */

.why-vworker {
  min-height: 650px;

  padding: 100px 8%;

  position: relative;

  background-image: url("images/why-background.jpg");

  background-size: cover;

  background-position: center;

  overflow: hidden;
}

.why-bg-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(5, 15, 35, 0.92),
    rgba(15, 60, 120, 0.65)
  );
}

.why-wrapper {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 70px;

  align-items: center;
}

/* LEFT */

.why-content h2 {
  font-size: 48px;

  line-height: 1.2;

  color: white;

  margin: 20px 0;
}

.why-content p {
  color: #dbeafe;

  font-size: 18px;

  line-height: 1.7;

  max-width: 560px;
}

.why-points {
  margin-top: 30px;
}

.why-points div {
  color: white;

  margin-bottom: 15px;

  font-size: 16px;
}

.why-points span {
  display: inline-flex;

  justify-content: center;

  align-items: center;

  width: 25px;

  height: 25px;

  margin-right: 10px;

  border-radius: 50%;

  background: #2563eb;
}

.why-btn {
  display: inline-block;

  margin-top: 25px;

  padding: 14px 32px;

  border-radius: 30px;

  background: #2563eb;

  color: white;

  text-decoration: none;

  transition: 0.3s;
}

.why-btn:hover {
  transform: translateY(-3px);
}

/* RIGHT GLASS CARDS */

.why-cards {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 25px;
}

.why-card {
  padding: 35px 25px;

  text-align: center;

  border-radius: 25px;

  background: rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(15px);

  border: 1px solid rgba(255, 255, 255, 0.25);
}

.why-card h3 {
  color: white;

  font-size: 45px;

  margin: 0;
}

.why-card p {
  color: #dbeafe;

  margin-top: 10px;
}

@media (max-width: 900px) {
  .why-wrapper {
    grid-template-columns: 1fr;
  }

  .why-content h2 {
    font-size: 35px;
  }

  .why-cards {
    grid-template-columns: 1fr;
  }
}