.heroo {
      display: flex;
      height: 500px;
      width: 100%;
      /*margin-top: 65px;*/
  }

  .heroo-left,
  .heroo-right {
      flex: 1;
      background-size: cover;
      background-position: center;
  }

  .heroo-left {
      background: url('../images/mbnr.jpg') center/cover no-repeat;
  }


  span.hp-brand-logo-new img {
      width: 70px;
  }


  .heroo-content {
      position: absolute;
      top: 35%;
      left: 30%;
      transform: translate(-50%, -50%);
      background: #020202bf;
      color: #fff;
      padding: 0px 40px 30px;
      max-width: 800px;
      text-align: left;
  }

    @media (max-width: 1600px) and (min-width: 1200px) {
      .heroo-content {
          top: 47%;
      }
  }

  @media screen and (max-width: 767px) {
      .heroo-content {
          position: relative;
          top: auto;
          left: auto;
          transform: none;
          margin: 0px auto;
          padding: 10px 20px 30px;
          background: #020202f2 !important;
      }
      .heroo{
        height: 700px !important;
      }
  }

  @media screen and (max-width: 767px) {
      .heroo-content p {
          font-size: 24px;
          margin-bottom: 0;
          color: #f1f1f1;
          line-height: 39px;
          margin: 0px 0px 15px;
      }
  }

  @media screen and (max-width: 767px) {
      .heroo-content h1 {
          font-size: 30px;
          margin: 0px 0 0px;
          line-height: 49px;
          margin-bottom: 0px;
      }
  }


  section.no-add-clas label {
      color: #fff;
  }


  .heroo-content h1 {
      font-size: 60px;
      font-weight: bold;
      margin: 10px 0 0px;
      line-height: 80px;
      margin-bottom: 20px;
  }

  .heroo-content p {
      font-size: 36px;
      margin-bottom: 0;
      color: #f1f1f1;
      line-height: 50px;
      margin: 0px 0px 30px;
  }

  .heroo .btn {
      display: inline-block;
      padding: 15px 40px;
      background: #fff;
      color: #000;
      font-weight: bold;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: 0.3s ease;
      font-size: 20px;
      margin: 0px 15px 0 0px;
  }

  .heroo .btn:hover {
      background: #fff;
      color: #000;
  }

  @media (max-width: 900px) {
      .heroo {
          flex-direction: column;
      }

      .heroo-content {
          position: relative;
          top: auto;
          left: auto;
          transform: none;
          margin: 0px auto;
          font-size: 15px;
      }

      .heroo-content h1 {
          font-size: 35px;
          line-height: 45px;
      }

      .heroo-content p {
          font-size: 25px !important;
      }
  }

  @media screen and (max-width: 767px) {
      .heroo .btn {
          width: 100%;
          margin-bottom: 10px;
      }
  }

  .container-sdgh {
      display: grid;
      grid-template-columns: 1fr 2fr;
      align-items: stretch;
      max-width: 1350px;
      margin: 40px auto;
  }

  /* Left side text */
  .container-sdgh .left-sd {
      padding: 10px;
      display: flex;
      flex-direction: column;
      background: #fff;
  }

  .container-sdgh .left-sd h1 {
      font-size: 50px;
      font-weight: bold;
      line-height: 1.2;
      margin-bottom: 10px;
  }

  .container-sdgh .left-sd p {
      font-size: 18px;
      color: #333;
      max-width: 400px;
      line-height: 30px;
  }


  section.prin-er-issuees {
      padding: 40px 0 30px;
  }

  section.prin-er-issuees h2 {
      text-align: center;
      font-size: 36px;
      margin-bottom: 40px;
      font-weight: 600;
  }

  /* GRID */
  .issues-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
  }

  /* CARD */
  .issue-card {
      background: #fff;
      border-radius: 10px;
      padding: 40px 20px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.25s ease;
  }

  .issue-card:hover {
      transform: translateY(-5px);
  }

  .issue-card img {
      width: 70px;
      height: 70px;
      margin-bottom: 15px;
  }

  .issue-card h3 {
      font-size: 16px;
      font-weight: 600;
      color: #222;
      line-height: 1.4;
  }

  /* ========================= */
  /* RESPONSIVE BREAKPOINTS */
  /* ========================= */

  /* Large Tablets / Small Laptops */
  @media (max-width: 1200px) {
      .issues-grid {
          grid-template-columns: repeat(3, 1fr);
      }
    
  }

  /* Tablets */
  @media (max-width: 991px) {
      section.prin-er-issuees h2 {
          font-size: 30px;
          margin-bottom: 30px;
      }

      .issues-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .issue-card {
          padding: 30px 15px;
      }
  }

  /* Mobile */
  @media (max-width: 576px) {
      section.prin-er-issuees {
          padding: 30px 0 20px;
      }

      section.prin-er-issuees h2 {
          font-size: 24px;
          margin-bottom: 25px;
      }

      .issues-grid {
          grid-template-columns: 1fr;
          gap: 16px;
      }

      .issue-card img {
          width: 60px;
          height: 60px;
      }

      .issue-card h3 {
          font-size: 15px;
      }
  }

  /* SECTION */
  .hp-collection {
      padding: 90px 20px;
      background: #fbfcfd;
      font-family: "Inter", sans-serif;
  }

  /* CONTAINER */
  .hp-container {
      max-width: 1200px;
      margin: auto;
      text-align: center;
  }

  /* TITLE */
  .hp-title {
      font-size: 42px;
      font-weight: 700;
      color: #0b1b3f;
      margin-bottom: 15px;
  }

  /* SUBTITLE */
  .hp-subtitle {
      max-width: 780px;
      margin: 0 auto 60px;
      font-size: 17px;
      line-height: 1.7;
      color: #5f6c85;
  }

  /* FEATURES GRID */
  .hp-features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 25px;
  }

  /* CARD */
  .hp-card {
      background: #ffffff;
      padding: 35px 28px;
      border-radius: 14px;
      border: 1px solid transparent;
      text-align: left;
      transition: all 0.35s ease;
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }

  /* ICON */
  .hp-icon {
      font-size: 28px;
      margin-bottom: 22px;
  }

  /* CARD TITLE */
  .hp-card h4 {
      font-size: 18px;
      font-weight: 600;
      color: #0b1b3f;
      margin-bottom: 10px;
  }

  /* CARD TEXT */
  .hp-card p {
      font-size: 15px;
      line-height: 1.6;
      color: #6b7280;
  }

  /* HOVER EFFECT (Same Feel as Image) */
  .hp-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
  }

  /* COLOR VARIANTS */
  .hp-card.blue {
      border-color: #dbe7ff;
  }

  .hp-card.blue .hp-icon {
      color: #2563eb;
  }

  .hp-card.purple {
      border-color: #eadcff;
  }

  .hp-card.purple .hp-icon {
      color: #7c3aed;
  }

  .hp-card.green {
      border-color: #d1fae5;
  }

  .hp-card.green .hp-icon {
      color: #16a34a;
  }

  .hp-card.orange {
      border-color: #ffe6cc;
  }

  .hp-card.orange .hp-icon {
      color: #f97316;
  }

  /* RESPONSIVE */
  @media (max-width: 992px) {
      .hp-features {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (max-width: 576px) {
      .hp-features {
          grid-template-columns: 1fr;
      }
  }

  .printer-guides {
      background: #f6f9ff;
      padding: 80px 20px;
      font-family: Inter, sans-serif;
  }


  /* === Responsive CSS === */

  /* Tablets */
  @media (max-width: 992px) {
      .pg-model-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .pg-os-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .printer-guides {
          padding: 60px 15px;
      }
  }

  /* Mobile */
  @media (max-width: 768px) {
      .pg-title {
          font-size: 28px;
      }

      .pg-subtitle {
          font-size: 16px;
      }

      .pg-model-grid {
          grid-template-columns: 1fr !important;
      }

      .pg-os-grid {
          grid-template-columns: 1fr !important;
      }

      .pg-model-card,
      .pg-os-card {
          padding: 20px;
      }

      .pg-os-box {
          padding: 30px 20px;
          margin: 40px 0;
      }
  }

  /* Extra Small Mobile */
  @media (max-width: 480px) {
      .pg-title {
          font-size: 24px;
      }

      .pg-subtitle {
          font-size: 14px;
      }

      .pg-model-card h4,
      .pg-os-card h4 {
          font-size: 15px;
      }

      .pg-model-card p {
          font-size: 13px;
      }

      .pg-model-card li,
      .pg-os-card li {
          font-size: 12px;
      }

      .pg-os-box {
          padding: 20px 15px;
      }
  }

  .pg-container {
      max-width: 1200px;
      margin: auto;
  }

  .pg-title {
      text-align: center;
      font-size: 36px;
      font-weight: 700;
      color: #0b1b3f;
  }

  .pg-subtitle {
      text-align: center;
      margin: 10px 0 50px;
      font-weight: 600;
      color: #3b82f6;
  }

  /* MODEL CARDS */
  .pg-model-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
  }

  .pg-model-card {
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  }

  .pg-model-card h4 {
      font-size: 16px;
      font-weight: 700;
  }

  .pg-model-card p {
      font-size: 14px;
      margin: 8px 0;
      color: #6b7280;
  }

  .pg-model-card ul {
      padding-left: 18px;
  }

  .pg-model-card li {
      font-size: 14px;
      margin-bottom: 6px;
  }

  /* COLOR BORDERS */
  .blue {
      border-top: 3px solid #3b82f6;
  }

  .purple {
      border-top: 3px solid #8b5cf6;
  }

  .green {
      border-top: 3px solid #22c55e;
  }

  .orange {
      border-top: 3px solid #fb923c;
  }

  /* OS BOX */
  .pg-os-box {
      background: #fff;
      padding: 40px;
      margin: 60px 0;
      border-radius: 16px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  }

  .pg-os-box h3 {
      text-align: center;
      margin-bottom: 35px;
      font-size: 22px;
  }

  .pg-os-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
  }

  .pg-os-card {
      padding: 30px;
      border-radius: 14px;
      color: #fff;
  }

  .windows {
      background: linear-gradient(135deg, #2563eb, #3b82f6);
  }

  .mac {
      background: linear-gradient(135deg, #1f2937, #4b5563);
  }

  .mobile {
      background: linear-gradient(135deg, #22c55e, #16a34a);
  }

  .pg-os-card h4 {
      margin: 15px 0;
  }

  .pg-os-card ul li {
      font-size: 14px;
      margin-bottom: 6px;
  }
/* === TIPS SECTION BASE === */
.pg-tips {
    background: #f0f5ff;
    padding: 40px;
    border-radius: 18px;
}

.pg-tips h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 22px;
}

.pg-tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.pg-tip-box {
    background: #fff;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

.pg-tip-box h4 {
    font-size: 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pg-tip-box ul li {
    margin-bottom: 8px;
    font-size: 14px;
}

.pg-expert {
    margin-top: 30px;
    background: #ffffff;
    padding: 18px;
    border-left: 4px solid #6366f1;
    border-radius: 10px;
    font-size: 14px;
}

/* === RESPONSIVE CSS === */

/* Tablets */
@media (max-width: 992px) {
    .pg-tips-grid {
        grid-template-columns: 1fr 1fr; /* still 2 per row, slightly smaller screens */
        gap: 20px;
    }
    .pg-tips {
        padding: 30px 20px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .pg-tips-grid {
        grid-template-columns: 1fr; /* 1 per row */
    }
    .pg-tip-box {
        padding: 20px;
    }
    .pg-tips h3 {
        font-size: 20px;
    }
    .pg-tip-box h4 {
        font-size: 15px;
    }
    .pg-tip-box ul li {
        font-size: 13px;
    }
    .pg-expert {
        font-size: 13px;
        padding: 15px;
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .pg-tips h3 {
        font-size: 18px;
    }
    .pg-tip-box h4 {
        font-size: 14px;
    }
    .pg-tip-box ul li {
        font-size: 12px;
    }
    .pg-tips {
        padding: 20px 15px;
    }
    .pg-expert {
        font-size: 12px;
        padding: 12px;
    }
}


  .hp-ink-cta {
      padding: 70px 20px;
      background: linear-gradient(90deg, #2f6cf3 0%, #00b3d6 100%);
      font-family: Inter, sans-serif;
  }

  .hp-ink-container {
      max-width: 1200px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 60px;
  }

  /* LEFT CONTENT */
  .hp-ink-content {
      max-width: 520px;
      color: #fff;
  }

  .hp-ink-content h2 {
      font-size: 32px;
      line-height: 1.35;
      font-weight: 700;
      margin-bottom: 18px;
  }

  .hp-ink-content p {
      font-size: 15px;
      line-height: 1.7;
      color: #eaf2ff;
      margin-bottom: 10px;
  }

  .hp-ink-note {
      display: block;
      font-size: 13px;
      color: #dbeafe;
      margin-bottom: 22px;
  }

  /* BUTTON */
  .hp-ink-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      color: #2563eb;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 18px;
      border-radius: 6px;
      text-decoration: none;
      transition: all 0.3s ease;
  }

  .hp-ink-btn span {
      font-size: 16px;
      transition: transform 0.3s ease;
  }

  .hp-ink-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }

  .hp-ink-btn:hover span {
      transform: translateX(4px);
  }

  /* RIGHT IMAGE CARD */
  .hp-ink-image {
      background: #ffffff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  }

  .hp-ink-image img {
      display: block;
      max-width: 280px;
      height: auto;
  }

  /* RESPONSIVE */
  @media (max-width: 992px) {
      .hp-ink-container {
          flex-direction: column;
          text-align: center;
      }

      .hp-ink-content {
          max-width: 100%;
      }
  }