    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Poppins", Arial, sans-serif;
      background: #f6f8ff;
    }

    /* ================= SECTION ================= */

    .campus-section {
      width: 100%;
      padding: 70px 70px;
       background: url("../images/Rectangle\ 319\ \(5\).png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
    }

    .campus-wrapper {
      /* max-width: 1200px; */
      margin: 0 auto;
    }

    /* ================= TITLE ================= */

    .campus-title {
      font-size: 34px;
      font-weight: 700;
      color: #134c9b;
      margin-bottom: 12px;
    }

    .campus-title span {
      color: #d0272c;
    }

    .campus-desc {
      font-size: 16px;
      color: #134c9b;
      max-width: 780px;
      line-height: 1.7;
      margin-bottom: 40px;
    }

    /* ================= GRID ================= */

    .campus-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px 50px;
    }

    /* ================= CARD ================= */

    .campus-card {
      position: relative;
      background: #1d3f8b;
      color: #ffffff;
      padding: 11px 20px;
      border-radius: 10px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .campus-card h4 {
      font-size: 18px;
      margin-bottom: 6px;
    }

    .campus-card p {
      font-size: 14px;
      opacity: 0.95;
      line-height: 1.6;
    }

    /* ================= BADGE BASE ================= */

    .campus-badge {
      position: absolute;
      /* top: 50%; */
      transform: translateY(-50%);
      width: 60px;
      height: 60px;
      background: #e11d2e;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      border: 4px solid #ffffff;
    }

    /* ✅ LEFT COLUMN → BADGE ON LEFT */
    .campus-card:nth-child(odd) {
      padding-left: 70px;
    }

    .campus-card:nth-child(odd) .campus-badge {
      left: -18px;
    }

    /* ✅ RIGHT COLUMN → BADGE ON RIGHT */
    .campus-card:nth-child(even) {
      padding-right: 70px;
          text-align: end;
    }

    .campus-card:nth-child(even) .campus-badge {
      right: -18px;
    }

    /* ================= RESPONSIVE ================= */

    @media (max-width: 1024px) {
      .campus-section {
        padding: 60px 40px;
      }

      .campus-title {
        font-size: 30px;
      }
    }

    @media (max-width: 768px) {
      .campus-section {
        padding: 50px 24px;
      }

      .campus-grid {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      .campus-title {
        font-size: 26px;
      }

      .campus-desc {
        font-size: 15px;
      }

      /* ✅ On Mobile → All badges move to RIGHT for clean stacking */
      .campus-card {
        padding: 20px 60px 20px 20px;
      }

      .campus-card .campus-badge {
        right: -14px;
        left: auto;
        width: 38px;
        height: 38px;
        font-size: 12px;
      }
        .campus-card:nth-child(odd) {
      padding-left: 35px;
    }
    .campus-card:nth-child(even) {
      padding-right: 35px;
        
    }
    }

    @media (max-width: 480px) {
      .campus-title {
        font-size: 22px;
      }

      .campus-card h4 {
        font-size: 16px;
      }

      .campus-card p {
        font-size: 13px;
      }
    }