/* style.css - HP like layout simplified for demo */
:root{
  --blue:#0086c7;
  --muted:#6c7b86;
  --white:#ffffff;
  --card-shadow: 0 8px 18px rgba(3,20,30,0.06);
}
body{font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;; color:#263645; background:#fff;}
.bg-blue{background:linear-gradient(90deg, #007cb3 0%, #0086c7 100%); border-bottom:1px solid rgba(0,0,0,0.06);}
.logo{color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
.steps .step{color:#000;display:flex;align-items:center;gap:8px;font-size:14px}
.steps .num{background:#1ea7e1;color:#fff;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.sep{color:#000;font-weight:700}
.icon-btn{width:48px;height:48px;border-radius:50%;border:none;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,0.07);cursor:pointer}
.icon-btn.active{background:var(--blue);color:#fff;box-shadow:none}

.title{color:var(--blue);font-weight:500;font-size:32px;margin-bottom:25px}
.instructions{color:#6b7784;margin-left:8px; line-height: 1.9; margin-bottom: 40px; font-size: 16px;}
.form-select{border-radius:6px}

.container{width: 1400px;}
.printer-issues-section{ max-width: 1400px; padding: auto;}
.small-card{width:200px;border-radius:12px;box-shadow:var(--card-shadow);border:none;padding: 20px 40px}
.small-card i{color:var(--blue)}
.small-card img{max-height: 70px; }
.card-label{font-size:13px;margin-top:10px;color:#4b5a66}

.carousel-img{height:320px;object-fit:cover;border-radius:6px; }
@media (max-width: 768px){ .carousel-img{height:220px} .small-card{width:48%} }

.quick-links{background:#f9fbfd;margin-top:20px;border-radius:8px; min-height: 250px;}
.quick-links .icon-muted{color:#cfe8f3}
.link-title{color:var(--blue);margin-top:12px;}

.sol-logo{height:60px;border-radius:8px;background:#f4fbfd;display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:700;margin-bottom:12px}

.models-list a{width:33%;display:inline-block;color:#1a73a8;text-decoration:none;margin-bottom:7px;font-size:16px; font-weight: 100;}
@media (max-width: 991px){ .models-list a{width:50%} }
@media (max-width: 576px){ .models-list a{width:100%} }


.sol-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
  max-width: 400px;
  background-color: #fafdff;

}

.sol-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.sol-img {
  height: 160px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.sol-card:hover .sol-img {
  transform: scale(1.08);
  filter: brightness(1.15);
}

.sol-card h6 {
  font-weight: 100;
  color: #333;
  margin-bottom: 10px;
}

.sol-card p.small {
  color: #555;
  font-size: 0.9rem;
  margin-bottom: 15px;
  line-height: 1.8;
}


.sol-card h4 {
  margin-bottom: 10px;
  font-weight: 100;
}

.sol-card p {
  flex-grow: 1;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.sol-card button {
  margin-top: auto;
  align-self: center;
  background-color: #004aad;
  color: white;
  padding: 10px 20px;
}


.solutions {
  background: #fff;
}

.solutions h4 {
  color: #000000; /* HP Blue */
  font-weight: 100;
}

.solutions .subtext {
  color: #555;
  font-size: 0.95rem;
}




/* hero section image slider */

.printer-setup-section {
  font-family: "HP Simplified", Arial, sans-serif;
}

.title {
  font-weight: 600;
  color: #004b87;
  margin-bottom: 1rem;
}

.instructions {
  list-style-type: disc;
  padding-left: 20px;
  color: #333;
}

.setup-btn {
  background-color: #007cb3;
  padding: 10px 20px;
  border: none;
}

.vertical-divider {
  width: 1px;
  background-color: #ccc;
  height: 100%;
  min-height: 350px;
  margin-right: 1px; /* gap before slider */
}

.horizontal-divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 10px;
}

.carousel-img {
  border-radius: 8px;
  max-height: 320px;
  object-fit: cover;
}

/* Carousel heading */
.carousel-heading {
  font-size: 1rem;
  color: #000000;

  text-align: left;
}

/* Navigation Icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none;
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.5rem;
  color: #ccc;
}

.carousel-control-prev-icon::after {
  content: "\f053"; /* Font Awesome left arrow */
}

.carousel-control-next-icon::after {
  content: "\f054"; /* Font Awesome right arrow */
}

/* Remove button backgrounds */
.carousel-control-prev,
.carousel-control-next {
  background: none !important;
  border: none !important;
  width: 10%;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .vertical-divider {
    display: none;
  }
  .left-content {
    text-align: center;
  }
  .setup-btn {
    width: 100%;
  }
  .carousel-heading {
    font-size: 0.95rem;
  }
}


/* hero section image slider ends */


/* Promo Section Styling */
.promo {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  margin-bottom: 30px;
}

.promo:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.promo-img {
  height: 150px;

  object-fit: cover;
}

/* Responsive Behavior */
@media (max-width: 768px) {
  .promo {
    flex-direction: column;
    text-align: center;
  }

  .promo-img {
    margin-bottom: 10px;
  }
}

/* smart-install page */

 /* ====== Top Section ====== */
    .printer-section {
      background: #fff;
      padding: 40px 0;
      border-bottom: 1px solid #eee;
    }

    .printer-box {
      display: flex;
      flex-wrap: wrap;
      background: #f8f9fa;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }

    /* vertical divider */
    .printer-box::after {
      content: "";
      position: absolute;
      top: 10%;
      bottom: 10%;
      left: 40%;
      width: 2px;
      background-color: #ccc;
    }

    .printer-left {
      flex: 1 1 30%;
      text-align: center;
      padding: 30px 60px;

    }

    .printer-left img {
      width: 100px;
      margin-bottom: 15px;
      border-radius: 15%;
      
    }

    .printer-left h5 {
      color: #004aad;
      font-weight: 600;
      margin-bottom: 30px;
    }

    .printer-left p{
        font-weight: 100;
    }

    .printer-left .btn-primary {
      background: #0073e6;
      border: none;
      border-radius: 10px;
      padding: 15px 30px;
      font-size: 16px;
      margin-bottom: 20px;
      font-weight: 600;
    }

    .printer-left .btn-primary:hover {
      background: #005bb5;
    }

    .printer-right {
      flex: 1 1 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      padding: 20px;
    }

    .printer-right img {
      width: 90%;
      height: auto;
      padding: 10px 40px;
     
    }

    /* ====== Info Section ====== */

    .info-section {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      margin-top: 40px;
      gap: 20px;
      padding: 20px 40px;
    }

    .info-text {
      flex: 1 1 55%;
    }

    .info-text p {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 100;
    }

    .info-text .note {
      color: #d32f2f;
      font-weight: 500;
      font-size: 16px;
    }

    .info-list {
      list-style: none;
      padding-left: 0;
      margin-top: 15px;
    }

    .info-list li {
      position: relative;
      padding-left: 25px;
      margin-bottom: 8px;
      font-size: 16px;
      line-height: 1.8;
      font-weight: 100;

    }

    .info-list li::before {
      content: "✔";
      position: absolute;
      left: 0;
      color: #0073e6;
      font-weight: bold;
    }

    .info-img {
      flex: 1 1 40%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .info-img img {
      width: 100%;
      max-width: 400px;
      border-radius: 8px;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* ====== Solutions Section ====== */
    .solutions-section {
  padding: 50px 0;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;       /* stacks heading + content vertically */
  justify-content: center;
  align-items: center;
  background: #fff;
}

.solutions-section .container {
  max-width: 1200px;
  width: 100%;
}

.solutions-section h5,
.solutions-section p {
  text-align: center;
}

.solutions-section .row {
  justify-content: center;      /* centers the solution cards in the row */
  gap: 30px;                    /* adds equal space between cards */
}

    .solutions-section h5 {
      color: #0073e6;
      font-weight: 500;
      margin-bottom: 10px;
      font-size: 2.5rem;
    }

    .solutions-section p {
      color: #555;
      font-size: 1.3rem;
      margin-bottom: 30px;
      font-weight: 100;
    }

    .solution-card {
      background: #fff;
      border: 1px solid #eee;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: all 0.3s ease;
      width: 500px;
      gap: 20px;
    }

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

    .solution-card img {
      width: 100%;
      height: 280px;
      object-fit: cover;
      border-radius: 20px;
      padding: 15px;
    }

    .solution-card-body {
      padding: 10px 20px;
    }

    .solution-card-body h6 {
      color: #333;
      font-size: 1.25rem;
      font-weight: 300;
      margin-bottom: 8px;
    }

    .solution-card-body p {
      font-size: 16px;
      color: #666;
      margin-bottom: 15px;
    }

    .solution-card-body .btn {
      background: #0073e6;
      border: none;
      font-size: 14px;
      padding: 10px 20px;
      border-radius: 5px;
      margin-bottom: 20px;
    }

    .solution-card-body .btn:hover {
      background: #005bb5;
    }

    @media (max-width: 768px) {
      .printer-box {
        flex-direction: column;
      }

      .printer-box::after {
        display: none;
      }

      .info-section {
        flex-direction: column;
      }

      .info-img {
        margin-top: 20px;
      }

      .solution-card {
        margin-bottom: 20px;
      }
    }

    /* troubleshoot section */

    .troubleshoot-section {
  padding: 40px ;
  background-color: #fff;
}

.troubleshoot-section .container {
  max-width: 1000px;
  margin: auto;
}

.troubleshoot-card {
  background: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  padding: 40px;
  margin-bottom: 20px;
}

.troubleshoot-card h6 {
  font-weight: 600;
  color: #333;
  font-size: 25px;
  margin-bottom: 10px;
}

.troubleshoot-card p {
  color: #333;
  font-size: 16px;
  margin-bottom: 14px;
  font-weight: 100;
}

.troubleshoot-card ol {
  padding-left: 18px;
  font-size: 16px;
  color: #333;
  font-weight: 100;
  line-height: 2.1rem;
}

.troubleshoot-card img {
  margin: 10px auto;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.troubleshoot-chatbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 40px 80px;
  margin: 20px 0;
}

.chat-btnn {
  background-color: #ffcc33;
  border: none;
  color: #333;
  font-size: 20px;
  font-weight: 600;
  padding: 15px 40px;
  min-width: 195px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease;
}

.chat-btn:hover {
  background-color: #e5b900;
}

.troubleshoot-chatbox p{
    font-style: 20px;
}

.troubleshoot-chatbox span {
  color: #007bc3;
   font-size: 40px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .troubleshoot-chatbox {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .troubleshoot-card {
    padding: 20px;
  }
}


/* installation page */

  .installation-container {
    max-width: 800px;
    margin: 100px auto;
    text-align: center;
    padding: 0 20px;
  }

   .installation h2 {
    font-size: 2rem;
    color: #1e73be;
    font-weight: 700;
  }

  /* Downloading Section */
  .progress-container {
    width: 100%;
    background: #e0e0e0;
    height: 12px;
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden;
  }

  .progress-bar {
    height: 12px;
    width: 0%;
    background: #0078d7;
    border-radius: 10px;
    transition: width 0.3s ease;
  }

  .progress-label {
    text-align: left;
    margin-bottom: 5px;
    font-size: 1rem;
  }

  .info-box {
    background: #fff;
    border-radius: 12px;
    padding: 30px 20px;
    margin-top: 40px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .info-box h3 {
    color: #0078d7;
    margin-bottom: 15px;
  }

  .popup {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #0078d7;
    color: #fff;
    padding: 15px 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 999;
  }

  .popup.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* Installation Section */
  .install-container {
    display: none;
    background: linear-gradient(180deg, #5cb6ff, #b4dcff);
    max-width: 800px;
    min-height: 300px;
    margin: 120px auto;
    border-radius: 20px;
    text-align: center;
    padding: 40px 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  }

  .install-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }

  .install-box img {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
  }

  .install-progress {
    width: 150px;
    height: 12px;
    border-radius: 10px;
    background: #e5e5e5;
    overflow: hidden;
    position: relative;
  }

  .install-progress::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 12px;
    width: 40%;
    background: linear-gradient(90deg, #0096ff);
    border-radius: 10px;
    animation: installMove 2s linear infinite;
  }

  @keyframes installMove {
    0% { left: -40%; }
    100% { left: 100%; }
  }

  .install-text {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 15px;
  }

  .bottom-text {
    color: #fff;
    margin-top: 40px;
    font-size: 1.3rem;
    font-weight: 600;
  }

  @media(max-width:600px){
    .install-box {
      flex-direction: column;
      gap: 20px;
    }
  }

  /* error page */

    .error-card {
    background: #fff;
    width: 90%;
    max-width: 700px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
  }

  .header {
    background: #f5f5f5;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header h3 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
  }

  .header p {
    margin: 0;
    font-size: 0.9rem;
    color: #777;
  }

  .content {
    padding: 40px 25px;
  }

  .content img {
    width: 130px;
    margin-bottom: 20px;
  }

  .content p {
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
    margin: 10px 0 30px 0;
  }

  .content h4 {
    font-weight: 600;
    font-size: 1.1rem;
    color: #111;
    margin-bottom: 20px;
  }

  .chat-btn {
    background: #0078d7;
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s ease;
  }

  .chat-btn i {
    font-size: 1rem;
  }

  .chat-btn:hover {
    background: #0062b3;
  }

  @media (max-width: 600px) {
    .content {
      padding: 25px 15px;
    }
    .content img {
      width: 100px;
    }
    .header h3 {
      font-size: 1rem;
    }
  }

  /* policy */