* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
@font-face {
  font-family: "Teko";
  src: url("../fonts/Teko/Teko-Medium.woff2") format("woff2"),
    url("../fonts/Teko/Teko-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/Titillium-Web/TitilliumWeb-Regular.woff2") format("woff2"),
    url("../fonts/Titillium-Web/TitilliumWeb-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
html {
  scroll-behavior: smooth;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
body {
  font-family: "Titillium Web";
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
a {
  list-style-type: none;
  text-decoration: none !important;
}

header .sticky {
  position: fixed;
  top: 0;
  opacity: 1;
  width: 100%;
  z-index: 999999;
  background: #fff !important;
  box-shadow: 0px -10px 16px 1px rgb(107 107 107) !important;
}
header .navbar {
  top: 0;
  opacity: 1;
  width: 100%;
  z-index: 999999;
  background: #fff !important;
}
header .navbar .nav-logo {
  width: auto;
  height: 85px;
  object-fit: cover;
}
header .logo-img img {
  width: 100%;
  height: 100%;
  max-width: 85px;
  margin-top: 115px;
}
.json-section .title {
  font-family: "Teko";
}
.json-section .content-title p {
  width: 75%;
}
.json-section ul.stepper li .circle {
  font-family: "Teko";
  display: inline-block;
  width: 5.75rem;
  height: 2.75rem;
  margin-right: 1.5rem;
  line-height: 2.75rem;
  margin-top: 21px;
  color: #003bc0;
  text-align: center;
  background: #85eef7;
  border-radius: 50%;
  font-weight: 600;
  font-size: 25px;
}
.json-section ul.stepper li .circle1 {
  font-family: "Teko";
  display: inline-block;
  width: 9.75rem;
  height: 2.75rem;
  margin-right: 1.5rem;
  line-height: 2.75rem;
  margin-top: 21px;
  color: #003bc0;
  text-align: center;
  background: #85eef7;
  border-radius: 50%;
  font-weight: 600;
  font-size: 25px;
}
.json-section ul.stepper li .circle2 {
  font-family: "Teko";
  display: inline-block;
  width: 12.75rem;
  height: 2.75rem;
  margin-right: 1.5rem;
  line-height: 2.75rem;
  margin-top: 21px;
  color: #003bc0;
  text-align: center;
  background: #85eef7;
  border-radius: 50%;
  font-weight: 600;
  font-size: 25px;
}
.stepper-vertical li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin: 0px -49px;
}
.stepper-vertical li:not(:last-child):after {
  content: "";
  position: absolute;
  top: 5.44rem;
  left: 2.9rem;
  width: 3px;
  height: 85%;
  background-color: #85eef7;
}
ul.stepper li {
  text-decoration: none;
  padding: 1.6rem;
}
.form-json .title {
  margin: 37px 0px -15px -117px;
}

.json-section .btn-primary {
  background-color: #003bc0;
}
.json-section .btn {
  padding: 0.2rem 0.75rem;
}

.json-section .json-form {
  margin-top: 100px !important;
  margin-left: 62px;
  padding: 60px;
  background-color: #fbfafa;
  border-radius: 21px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.07);
}
.json-section .custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: none !important;
  border-radius: 0.25rem;
}
.json-section .custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(calc(2.25rem + 2px) - 1px * 2);
  padding: 0px !important;
  line-height: 1.5;
  color: #495057;
  content: "" !important;
  border-left: none !important;
}
.json-section .label1 {
  color: #85eef7;
  font-weight: 600;
}
.preview-btn a {
  list-style-type: none;
  color: #003bc0 !important;
}

.json-section .preview-btn {
  position: absolute;
  top: 212px;
  left: 328px;
  text-decoration-line: underline;
  cursor: pointer;
}

.json-section .form-control {
  display: block;
  width: 100%;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: none !important;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}
.json-section .address-notice .form-control {
  width: 100%;
}
.json-section .btn .custom-file-label {
  background: #85eef7 !important;
}
.json-section .choose-btn .btn {
  background: #85eef7 !important;
  margin: 3px 12px;
  color: #003bc0;
  padding: 8px 22px 8px;
}
.json-section .choose-btn {
  margin: 0px 15px;
}

.json-section .download-btn .btn {
  margin: 18px 0px;
  background-color: #003bc0;
  color: #fff;
  padding: 10px 25px;
}
.json-section .json-form .form-img img {
  position: absolute;
  top: 47px;
  margin-left: -50px;
}

/* ============= footer ====================== */
.footer {
  width: 100%;
  background-color: rgb(61, 60, 60);
  color: #fff;
  height: auto;
  justify-content: center;
  align-items: center;
}
.footer .section-footer img {
  height: 65px;
  margin: 20px 0px;
}
.footer .section-footer .footer-icons i {
  color: #fff;
  font-size: 20px;
  padding: 20px;
}
.footer .section-footer .footer-icons i:hover {
  color: #85eef7;
}
.footer .footer-section .font-line:after {
  content: "";
  display: block;
  width: 58%;
  border-bottom: 2px solid rgb(228, 225, 225);
  margin: 25px 235px;
}
.footer ul li {
  color: #fff;
  display: inline !important;
  float: left;
  list-style-type: none;
  text-decoration: none;
  padding: 25px 0px 25px 55px;
}
.footer a {
  color: #fff;
  text-decoration: none !important;
}
.footer a:hover {
  color: #85c44d;
}
.json-section button.close {
  padding: 4px 12px 11px;
  background-color: transparent;
  border: 1px solid;
  border-radius: 100%;
  -webkit-appearance: none;
  position: absolute;
  right: -34px;
  background: black;
  top: -32px;
  color: #ffffff;
}
.json-section button.close:hover {
  color: #ffffff !important;
}
.json-section button.close:focus {
  outline: none !important;
}
small {
  color: red;
}

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .footer .footer-section .font-line:after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 2px solid rgb(228, 225, 225);
    margin: 25px 0px;
  }
  .json-section .json-form {
    margin-top: 100px !important;
    margin-left: 0px;
    padding: 55px 10px;
    background-color: #fbfafa;
    border-radius: 21px;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 7%);
  }
  .stepper-vertical li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: 0px -30px;
  }
  .json-section .preview-btn {
    position: absolute;
    top: 225px;
    left: 266px;
    text-decoration-line: underline;
    cursor: pointer;
  }
  .json-section .content-title p {
    width: 100%;
  }
  .json-section .btn {
    padding: 0px;
  }
  .json-section .btn .custom-file-label {
    background: #85eef7 !important;
    width: 50%;
    margin: -21px 86px;
  }
  .json-section .download-btn .btn {
    background-color: #003bc0;
    color: #fff;
    padding: 10px 25px;
    margin: 16px 85px;
  }
  .json-section .btn-download {
    padding: 8px;
  }
}