.pc-assemb * {font-family: inherit;}
.pc-assemb .container {width: 100%; margin: 0 auto;}
.pc-assemb .row {display: flex; gap: 0 20px;}
.pc-assemb ul {list-style: none; padding: 0;}
.pc-assemb h3 {font-size: 30px; padding: 20px 0 10px 0; margin: 0;}
.pc-assemb {width: 100%; max-width: 100%; min-width: 100%;}

.select-hardware {padding: 10px 0;}
.select-hardware .heading {text-align: center;}
.select-hardware .heading h2 {font-weight: bold; font-size: 45px;margin: 0; padding: 30px 0;}
.select-hardware .small-des {color: #000; font-size: 18px; text-align: center; padding: 20px 0;}
.selection-box {cursor: pointer;}
.pc-assemb .row.selection-box {width: 90%; margin: 0 auto;}
.pc-assemb .row .box {flex-basis: 32%; display: flex; flex-direction: column; align-items: center;justify-content: start; box-shadow: 0px 0px 12px 2px #d0d0d078; padding: 30px 20px;}
.pc-assemb .selection-box li {font-size: 16px;}
.pc-assemb .selection-box .box .icon {text-align: center;}
.pc-assemb .selection-box .box img {width: 80%;}

/* .box1 .cpu-list-wrap {width: 70%; text-align: center;} */

.cpu-list {display: flex; flex-direction: column; align-items: center;}
.box1 .cpu-list li {padding: 10px 10px; margin: 10px 0; border: 1px solid #00afef; width: max-content; min-width: 100%; text-align: center;}
.box2 .cpu-list .ram-list-wrap {width: 70%;}
.pc-assemb .two-in-row {display: flex; flex-wrap: wrap; justify-content: left; gap: 10px 14px;}
.pc-assemb .two-in-row li { flex-basis: calc(50% - 7px); box-sizing: border-box; text-align: center; padding: 10px 10px;  border: 1px solid #00afef;}
.unavailable {color: #bfbfbf; border-color: #bfbfbf !important;}

.select-hardware .selected {background: #00afef; color: #fff; border-color: #00afef !important;
  }

.loader-img {position: fixed;top: 0;left: 0; width: 100%;    height: 100vh; /* background-color: rgba(255, 255, 255, 0.8);  */  z-index: 9999; display: none;  }

  .loader-img img {position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 15%;
}

/* SUPPORT SECTION */

.support-sec {padding: 20px 0 20px 0;}
.support-sec .support-table table.enhanced {display: none;}
.support-sec .sec-heading {text-align: center;}
.support-sec .sec-heading h3 {font-size: 45px; font-weight: bold; margin: 0; padding: 10px 0 30px 0;}
.support-content {cursor: pointer;}
.support-sec .support-content .row {width: 90%; margin: 0 auto; justify-content: center; box-shadow: 0px 0px 8px 4px #c8c8c854;
    padding: 20px 20px;}
.support-sec .support-content .row .col1 {flex-basis: 40%;}
.support-sec .support-content .row .col2 {flex-basis: 60%;}

.support-table table  {border-collapse: collapse; width: 100%; border: 1px solid #0000002e;}
.support-table table td {border-right: 1px solid #0000002e; padding: 10px; color: #000; font-size: 16px;}
.support-table table .enable {width: 20px;}

.support-sec .support-type li {text-align: center; padding: 10px; border: 1px solid #00afef; margin: 10px 0; color: #000; font-size: 16px;}
.support-table table tr:nth-child(even) {background:#e8e8e8;}

.support-sec .support-type li.active {background: #00afef; color: #fff; }
.support-sec .button-next {text-align: center; padding: 20px 0;}
.support-sec .button-next button {border: 1px solid #00afef; border-radius: 6px; background: transparent; color: #00afef; padding: 16px 40px; font-size: 16px; font-weight: bold; transition: all 0.3s;}
.support-sec .button-next button:hover {background:#00afef; color: #000; border: 1px solid #000;}
.support-sec .button-next button:focus {outline-width: 0 !important;}
.support-sec .msg-wrap p {text-align: center; color: #6f1f1f;}

/* REVIEW SECTION */
.review {display: none;}
.review .heading {text-align: center;}
.review .heading h2 {font-size: 45px; font-weight: bold;}
.review .row {width: 100%; margin: 0 auto; gap: 0 40px; box-shadow: 0px 0px 8px 4px #c8c8c854; padding: 20px; box-sizing: border-box;}
.review .row .left-col {flex-basis: 50%; overflow: hidden;}
.review .row .right-col {flex-basis: 50%; overflow: hidden;}
.review .back-btn {width: 100%; margin: 0 auto;} 
.review .back-btn span {padding: 10px 20px; box-shadow: 0 0 4px 0px #b1afaf; overflow: hidden;
  display: inline-block; cursor: pointer; font-size: 16px; transition: all 0.3s;}
  .review .back-btn span:hover {box-shadow: 0 0 4px 0px #848181;}
.review table td,.review table th {padding: 10px 10px; font-size: 14px; border-left: 1px solid #0000002e;}
.review table {border-collapse: collapse; border: 1px solid #0000002e;}
.review table tr:nth-child(2n) {background: #e8e8e8;}
.review table select {border: 1px solid #0000002e; padding: 4px 6px; border-radius: 4px;}
.review .sub-options {margin: 19px 0 10px 0;}
.review .right-col .plan-type {display: flex;gap: 0 10px; justify-content: center; padding: 10px 0;}
.review .right-col .plan-type li {padding: 10px 10px;color: #fff; border: 1px solid #000; color: #000; min-width: 100px; text-align: center; font-size: 16px;}
.review .right-col .plan-type li.active { background-color: #00afef; color: #fff;border-color: #00afef;}
.review .plan-prices .price {display: none;}
.review .plan-prices .price.active-price {display: block;}
.review .plan-prices .price h4 {font-size: 24px; margin: 20px 0;}
.review .plan-prices {text-align: center;}
.review .left-col table th:last-child,.review .left-col table td:last-child {min-width: 100px; text-align: center;}
.review .price-box {cursor: pointer;}
.pc-assemb .review .right-col-inner > .heading h3 {padding: 20px 0 20px 0;}
.review .error-msg {display:none; text-align: center; color: #6f1f1f;}
.review .success-msg {display:none; color: #0e5b77; text-align: center; font-size: 14px; padding: 10px 0; margin: 0;}
.order-form {width: 80%; margin: 0 auto;}
.order-form #user-email, .order-form #user-store {display: block; width: 100%; padding: 8px 10px; box-sizing: border-box; border: 1px solid #5555554f; margin: 10px 0;font-size: 14px;}
.order-form #user-email:focus, .order-form #user-store:focus {outline-width: 0;}
.order-form #send-order {display: block; width: 100%;  margin: 20px 0 0 0;  background: #00afef;  border: none;  color: #fff;  padding: 10px 10px;  font-size: 14px;}


@media only screen and (max-width: 1700px) {
  .review .row .left-col {flex-basis: 70%;}
  /* .review .row .right-col */
}

@media only screen and (max-width: 1480px) {
  .pc-assemb .row.selection-box {width: 100%;}
  .pc-assemb .row .box {padding: 30px 10px;}

  .support-sec .support-content .row {width: 100%;}

  .review .row {width: 100%;}
  .review .back-btn {width: 100%;}
  .review .row {gap: 0 5px;}

  .review .right-col .plan-type li {padding: 10px 4px;}
}

@media only screen and (max-width: 1280px) {
  .pc-assemb .container {width: 90%;}
  .review table td, .review table th {padding: 8px 3px;}
}

@media only screen and (max-width: 1024px) {
  .pc-assemb .container {width: 100% !important;}
  .pc-assemb .row.selection-box {gap: 0 8px;} 
  .select-hardware .heading h2 {font-size: 34px;}
  .support-sec .sec-heading h3 {font-size: 34px;}
  .review .heading h2 {font-size: 34px;}

  .support-sec .button-next button {font-size: 14px; padding: 12px 30px;}

  .review .row {flex-direction: column;}
  .review table {width: 100%;}
  .order-form {width: 60%; margin: 0 auto;}
}

@media only screen and (max-width: 768px) {
  /* .pc-assemb .two-in-row {gap: 10px 5px;} */
  .pc-assemb .row.selection-box {gap: 10px 8px; flex-direction: column;}

  .support-table table td {font-size: 14px;}
  .support-sec .support-type li {font-size: 14px;}
  .support-sec .support-content .row .col1 {flex-basis: 30%;}
  .support-sec .support-content .row .col2 {flex-basis: 70%;}
}

@media only screen and (max-width: 580px) {
  .review table td, .review table th {font-size: 12px;}
  .review .left-col table th:last-child, .review .left-col table td:last-child {min-width: 80px;}
  .review .row .left-col {overflow: scroll;}
  .review .right-col .plan-type {gap: 0 5px;}
}

@media only screen and (max-width: 480px) {
  .select-hardware .heading h2 {font-size: 28px;}
  .support-sec .sec-heading h3 {font-size: 28px;}
  .review .heading h2 {font-size: 28px;}

  .support-sec .support-content .row {gap: 0 10px;}
  .support-table table td {padding: 6px;}

  .review .right-col .plan-type li {min-width: unset; padding: 6px 8px; font-size: 14px;}
  .review .plan-prices .price h4 {font-size: 20px;}
  .order-form {width: 80%;}
}