/* remove outer glow/shadow from coursePreview */
.Live_Projects_Preview
 {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: linear-gradient(135deg, #000000, #020304, #07090b); /* keep background if you want */
}


.Live_Projects_Preview {
  width: 100%;               /* take full width of parent */
  max-width: 100%;           /* remove 800px restriction */
  margin: 20px 0;            /* top/bottom spacing only */
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, #000000, #020304, #07090b);
  color: #e2e8f0;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
  line-height: 1.6;
  box-shadow: 0 10px 40px rgba(204, 202, 202, 0.6);

  /*background: #e8fc84;*/
}
 


 .Live_Projects_Preview h2 {
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0 20px 0;
  color: #f8fafc;
  font-weight: 800;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;

}

/* 🔹 Gradient underline with glow */
.Live_Projects_Preview h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px; /* distance from text */
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #0ea5e9, #38bdf8, transparent);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.8); /* glowing effect */
}


.container {
      max-width: 900px;
      margin: auto;
      display: flex;
      flex-direction: column;
      gap: 25px;
    }

    .card {
      background: linear-gradient(135deg, #1e293b, #0f172a);
      border-radius: 20px;
      padding: 25px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .card-header h2 {
      font-size: 1.5rem;
      margin: 0;
      font-weight: 800;
      color: #38bdf8;
    }

    .tag {
      background: linear-gradient(135deg, #8d8888, #8d8888);
      padding: 6px 14px;
      border-radius: 12px;
      font-size: 0.9rem;
      font-weight: 700;
      color: #fff;
      box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
    }

    .card p {
      font-size: 1rem;
      line-height: 1.6;
      margin: 10px 0;
      color: #cbd5e1;
    }

    .card p b {
      color: #facc15;
    }

    .btn-wrapper {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }

    .viewProject-btn {
      display: inline-block;
      padding: 12px 26px;
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: #fff;
      border-radius: 12px;
      text-decoration: none;
      font-size: 1rem;
      font-weight: 700;
      transition: all 0.3s ease;
      box-shadow: 0 6px 15px rgba(59, 130, 246, 0.5);
    }

    .viewProject-btn:hover {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.6);
    }

    /* -------------------------
   Responsive breakpoints
   ------------------------- */

/* Large desktops: 3 columns if enough space */
@media (min-width: 1200px) {
  .Live_Projects_Preview .container {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* Laptops / Tablets: 2 columns (keeps readable) */
@media (max-width: 1024px) {
  .Live_Projects_Preview {
    padding: 24px;
  }
  .Live_Projects_Preview .container {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* Medium tablets and large phones (≤ 768px): single column (stacked), increase spacing */
@media (max-width: 768px) {
  .Live_Projects_Preview {
    padding: 20px;
    margin: 16px 0;
  }
  .Live_Projects_Preview > h2 { font-size: 1.6rem; }
  .Live_Projects_Preview .container {
    grid-template-columns: 1fr;   /* single column */
    gap: 18px;
  }
  .Live_Projects_Preview .card {
    padding: 16px;
  }
  .Live_Projects_Preview .btn-wrapper { justify-content: center; }
  .Live_Projects_Preview .viewProject-btn { width: 100%; text-align: center; padding: 12px; }
}

/* Small phones (≤ 480px): reduce text, increase tap size */
@media (max-width: 480px) {
  .Live_Projects_Preview { padding: 16px; border-radius: 12px; }
  .Live_Projects_Preview > h2 { font-size: 1.45rem; }
  .Live_Projects_Preview .card-header h3 { font-size: 1.05rem; }
  .Live_Projects_Preview .card p { font-size: .96rem; }
  .Live_Projects_Preview .tag { padding: 6px 10px; font-size: .85rem; }
  .Live_Projects_Preview .viewProject-btn { padding: 12px; font-size: 1rem; }
}

/* Very small phones (≤ 420px) */
@media (max-width: 420px) {
  .Live_Projects_Preview { padding: 14px; }
  .Live_Projects_Preview > h2 { font-size: 1.35rem; }
  .Live_Projects_Preview .card { padding: 14px; border-radius: 12px; }
  .Live_Projects_Preview .card p { font-size: .94rem; }
}

/* Extra tiny screens (≤ 360px and ≤ 320px) */
@media (max-width: 360px) {
  .Live_Projects_Preview > h2 { font-size: 1.28rem; }
  .Live_Projects_Preview .card p { font-size: .92rem; }
}
@media (max-width: 320px) {
  .Live_Projects_Preview > h2 { font-size: 1.18rem; }
  .Live_Projects_Preview .card p { font-size: .9rem; line-height:1.35; }
  .Live_Projects_Preview .viewProject-btn  { font-size: .98rem; padding: 11px; }
}

/* ensure container inside homepage_split-left is full-width (prevents inner margins) */
.homepage_split-left .Live_Projects_Preview,
.homepage_split-right .Live_Projects_Preview {
  width: 100%;
  box-sizing: border-box;
}