/* Custom CSS Variables */
    :root {
      --bg: #ffffff;
      --primary: #ff7a3c;
      --primary-dark: #e36024;
      --text: #241c24;
      --muted: #777777;
      --card-bg: #ffffff;
      --border: #f1d5be;
      --accent: #fbe1c7;
    }

body {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

a {
  color: var(--bg);
  text-decoration: none;
}

a:hover {
  color: var(--primary-dark);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "PT Sans", sans-serif;
}

    .coin-frame {
      width: 320px;
      max-width: 100%;
      height: 320px;
      border-radius: 28px;
      background: #f0f0f0;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .coin-inner-circle {
      width: 240px;
      height: 240px;
      border-radius: 50%;
      background: #fff;
      border: 10px solid #d6d6d6;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .zoom-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

    .zoom-icon {
      font-size: 18px;
      color: var(--primary-dark);
      cursor: pointer;
      user-select: none;
    }

    .zoom-bar input[type=range] {
      flex: 1;
    }

    .continue-btn {
      margin-top: 4px;
      padding: 10px 50px;
      border-radius: 999px;
      border: none;
      background: var(--primary);
      color: #fff;
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      box-shadow: 0 12px 24px rgba(255, 122, 60, 0.3);
    }

    /* Steps UI */
    .step-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 22px;
    }

  .step-number {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff3de;
  color: #eea802;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
  font-weight: bold;
    }

    .step-item.is-active .step-number {
      background: #eea802;
      color: #fff;
    }

    .step-item.is-done .step-number {
      background: var(--primary);
    }

    .step-title-text {
      font-weight: 700;
      font-size: 16px;
    }

    .step-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid var(--primary);
      position: relative;
    }




  .step-dot::after {
  content: "\f26c";      /* Unicode for the icon */
  font-family: "bootstrap-icons";
  font-weight: normal;
  font-style: normal;

  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;       /* optional, adjust icon size */
  color: #fff;           /* optional, icon color */
}


    .step-desc {
      font-size: 13px;
      color: var(--muted);
    }

    .step-item.is-active .step-title-text {
      color: var(--text);
    }

    /* Custom style for the off-canvas */
    .offcanvas-end {
      width: 300px;
    }

    .scan-row{
      padding-top: 35px;
    }

    
     .scan-row .center-part{
      text-align: center;
      padding: 0;
    }

     .scan-row .right-part{
      text-align: left;
    }

    .drop-card{
      width: 300px;
      height: 300px;
    }

    .page-title {
      font-size: 38px;
      padding-left: 20px;
      padding-right: 20px;
    }

    .page-subtitle{
      padding-left: 20px;
      padding-right: 20px;
    }

    .scan-row .steps, .scan-row .tips{
       padding-top: 40px;
    }

    .logo-icon{
      background-color: #000;
      border-radius: 10px;
      padding: 6px;
    }

    .logo span{
      font-weight: bold;
      font-size: 20px;
    }

.tips{
  font-size: 14px;
}

.tips .tip-item{
  margin-top: 7px;
  margin-bottom: 15px;
}

.tip-title::after {
   content: "\F468";
   font-family: "Bootstrap-icons";
   padding-inline-end: .5em;
   color: #eea802;
}

.dropzone{
  cursor: pointer;
}

.dropzone.border-dashed{
  border:2px dashed #cccccc;
}

.drop-helper{
  color:#bfbfbf;
  font-size: 14px;
}

.drop-sub{
  font-size: 14px;
  color:#bfbfbf;
}


header .btn {
  font-weight: bold;
  padding: 0px 10px;
  font-size: 13px;
  border-radius: 10px;
  height: 33px;
}


header .btn.btn-light-warning{
  background: #fff3de;
  color: #eea802;
}

 header .btn.btn-light-warning:hover{
  background: #fde1ab;
  color: #eea802;
}


header .btn.btn-menu{
  color: #e88302;
  font-size: 20px;
}

header .btn.btn-warning{
  background: #eea802;
  color: #fff;
}

header .btn.btn-warning:hover{
  background: #f5b114;
  color: #fff;
}




     /* Media query for resposive */
        @media (min-width: 768px) {

            .scan-row .left-part{
              text-align: right;
            } 

        }


         @media (max-width: 767px) {

            .scan-row .center-part {
              margin-top: 10px;
            }

            .scan-row .steps, .scan-row .tips{
             width: 300px;
             margin: 0 auto;
             padding-top: 0px;
            }

            .tip-title::after {
            content: "";
            display:none;
          }

          .tip-title::before {
            content: "\F468";
            font-family: "Bootstrap-icons";
            padding-inline-start: .5em;
            color: #eea802;
            margin-right: 8px;
          }

          .scan-row .left-part{
            margin-top: 10px !important;
          }

          .scan-row .right-part .steps {
           border-bottom: 1px solid #fbe1c7;
           padding-top: 20px;
          }

        }