@charset "UTF-8";
/* CONF */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700;900&display=swap");
:root {
  --bg-gray-container: #E3E8F1;
  --bg-container: #006648;
  --lg-otp-color: #4A4A4A;
  --bg-otp-white: #fff;
  --bs-font-sans-serif: "Source Sans Pro", sans-serif;
}

.is-header.navbar-light .navbar-nav .nav-link {
  color: var(--lg-otp-color);
}

.navbar-light {
  background: rgb(2, 109, 64);
}

.click-otpay {
  color: var(--lg-otp-color);
}
.click-otpay p, .click-otpay h1, .click-otpay h2, .click-otpay h3, .click-otpay h4 {
  color: var(--lg-otp-color);
}
.click-otpay .bg-plant {
  background: linear-gradient(to bottom, rgb(2, 109, 64) 0%, rgb(126, 191, 56) 100%);
}
.click-otpay .client-image {
  background: url(../image/pic_mob.png) no-repeat center bottom;
  padding-bottom: 0;
}
.click-otpay .bg-grad2 {
  background: linear-gradient(135deg, rgb(0, 162, 65) 0%, rgb(0, 102, 72) 100%);
}
.click-otpay .bg-grad3 {
  background: var(--bg-container);
}
.click-otpay .bg-22 {
  background: var(--bg-container);
  background-repeat: no-repeat;
  background-position: 85% 4%;
}
.click-otpay .img-fluid {
  z-index: 1;
}

.footer .ss svg {
  fill: currentColor;
}

.box-result-form {
  background-color: var(--white);
  padding: 20px;
  border-radius: 15px;
}

.close_form_window {
  line-height: 20px;
  width: 20px;
  border-radius: 100%;
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
  content: "✕";
  font-size: 22px;
  color: var(--bs-otp-dark);
}

#accordionCustomScroll {
  /* width */
  /* Track */
  /* Handle */
}
#accordionCustomScroll::-webkit-scrollbar {
  width: 34px;
  background: #c0c0c0;
}
#accordionCustomScroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0);
  /* border-right: solid 1px #f0f; */
  /* background: #ffac00; */
  box-shadow: inset 0 0 0 16px rgb(255, 255, 255);
}
#accordionCustomScroll::-webkit-scrollbar-thumb {
  background: no-repeat url("data:image/svg+xml,%3Csvg width='34' height='33' viewBox='0 0 34 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16.8215' cy='16.5' r='16.5' fill='%2352AE30'/%3E%3C/svg%3E%0A");
}

.grid.grid-rule-custom {
  grid-template-columns: 236px 100%;
  grid-template-rows: 187px;
}

.text-shadow {
  text-shadow: 1px 1px 0 #000;
}

.offcanvas-body .nav-link > strong {
  color: var(--lg-otp-color);
}

.add-box {
  background: linear-gradient(135deg, rgb(0, 162, 65) 0%, rgb(0, 102, 72) 100%);
  padding: 40px 60px 0;
  border-radius: 20px 20px 0 0;
}

@media (min-width: 960px) {
  .add-box {
    background: transparent;
    padding: inherit;
  }
  .navbar-light {
    background: linear-gradient(to right, rgb(1, 108, 64) 25%, rgb(59, 147, 60) 50%, rgb(129, 193, 55) 100%);
  }
  .click-otpay .bg-plant {
    background: linear-gradient(to right, rgb(1, 108, 64) 25%, rgb(59, 147, 60) 50%, rgb(129, 193, 55) 100%);
  }
  .click-otpay .client-image {
    max-width: 1440px;
    background: url(../image/pic.png) no-repeat right top;
    padding-bottom: 180px;
    background-position: 90% 20%;
  }
  .click-otpay .bg-22 {
    background: url(../image/22.png) no-repeat, var(--bg-container);
    background-position: 85% top;
  }
  .offcanvas-body .nav-link > strong {
    color: inherit;
  }
  .adaptive-text {
    color: initial;
  }
}
.bg-otp-spher:before {
  content: "";
  display: block;
  width: 350px;
  height: 345px;
  background: url(../image/spher.png) no-repeat;
  background-position: left top;
  position: absolute;
  transform: translate(-162px, -186px);
}

.bg-otp-elips_4 {
  position: absolute;
  transform: translate(-32%, -48%);
  z-index: 0 !important;
}

.for-video-link {
  position: relative;
}
.for-video-link:hover .for-video-btn {
  transform: translate(-50%, -50%) scale(1.5);
}

.for-video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: transform 0.2s ease-out;
}

.navbar-light .bg-light {
  background-color: transparent !important;
  border: 0;
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.lh-my {
  line-height: 20px;
}

.like-wrapper {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  top: -3px;
}

.step-content > ol {
  counter-reset: mhln-counter;
  padding-left: 0;
}
.step-content > ol > li {
  list-style: none;
  padding: 0 0 39px 71px;
  position: relative;
}
.step-content > ol > li:last-child:after {
  content: none;
}
.step-content > ol > li:before {
  background-color: var(--bs-primary);
  border-radius: 50%;
  color: var(--bs-otp-light);
  content: counter(mhln-counter, decimal);
  counter-increment: mhln-counter;
  display: block;
  font-family: Source Sans Pro, Arial, Helvetica, Verdana, Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 600;
  height: 48px;
  left: 0;
  line-height: 2.6;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 48px;
  z-index: 2;
}
.step-content > ol > li:after {
  border-left: 3px solid var(--bs-otp-primary);
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  height: 100%;
  width: 0;
  z-index: 1;
  transform: translate(24px, 47px);
}
.step-content > ol > li > h4 {
  color: var(--bs-body-color);
  margin: 0 0 16px;
  padding-top: 10px;
  font-weight: 700;
}
.step-content--vertical .g-md-8, .step-content--vertical .gy-md-8 {
  --bs-gutter-y: 0 !important;
  --bs-gutter-x: 0 !important;
}
.step-content--vertical .m-md-auto {
  margin: initial !important;
}
.step-content--vertical .col-lg-8 {
  width: auto;
}
.step-content--vertical > ol {
  counter-reset: mhln-counter;
  padding-left: 0;
}
.step-content--vertical > ol > li {
  list-style: none;
  padding: 0 0 0 71px;
  position: relative;
  display: grid;
  grid-template-rows: 0 1fr;
}
.step-content--vertical > ol > li:last-child:after {
  content: none;
}
.step-content--vertical > ol > li:first-child:before {
  height: 60px;
  padding-bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='60' viewBox='0 0 48 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.5 44.5L24 46.5L11.5 44.5L16.2991 47.6299C20.4794 50.3561 23 55.0093 23 60V60L25 60V60C25 55.0093 27.5206 50.3561 31.7009 47.6298L36.5 44.5Z' fill='%2352AE30'/%3E%3Crect y='48' width='48' height='48' rx='24' transform='rotate(-90 0 48)' fill='%2352AE30'/%3E%3C/svg%3E%0A");
}
.step-content--vertical > ol > li:last-child:before {
  height: 60px;
  padding-top: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='49' height='60' viewBox='0 0 49 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.5212 15.5L24.0212 13.5L11.5212 15.5L16.3204 12.3701C20.5007 9.64386 23.0213 4.99073 23.0213 -9.41786e-07V-9.41786e-07L25.0213 -1.00536e-06V-1.00536e-06C25.0213 4.99073 27.5419 9.64387 31.7222 12.3702L36.5212 15.5Z' fill='%2352AE30'/%3E%3Crect x='0.0212402' y='60' width='48' height='48' rx='24' transform='rotate(-90 0.0212402 60)' fill='%2352AE30'/%3E%3C/svg%3E%0A");
}
.step-content--vertical > ol > li:before {
  background-image: url("data:image/svg+xml,%3Csvg width='49' height='72' viewBox='0 0 49 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.5212 56.5L24.0212 58.5L11.5212 56.5L16.3204 59.6299C20.5007 62.3561 23.0213 67.0093 23.0213 72L25.0213 72C25.0213 67.0093 27.5419 62.3561 31.7222 59.6298L36.5212 56.5Z' fill='%2352AE30'/%3E%3Cpath d='M36.5212 15.5L24.0212 13.5L11.5212 15.5L16.3204 12.3701C20.5007 9.64386 23.0213 4.99073 23.0213 -9.41786e-07L25.0213 -1.00536e-06C25.0213 4.99074 27.5419 9.64387 31.7222 12.3702L36.5212 15.5Z' fill='%2352AE30'/%3E%3Crect x='0.0212402' y='60' width='48' height='48' rx='24' transform='rotate(-90 0.0212402 60)' fill='%2352AE30'/%3E%3C/svg%3E%0A");
  color: var(--bs-otp-light);
  content: counter(mhln-counter, decimal);
  counter-increment: mhln-counter;
  display: inline-flex;
  font-family: Source Sans Pro, Arial, Helvetica, Verdana, Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 600;
  height: 73px;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 49px;
  z-index: 2;
  margin-left: -70px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.step-content--vertical > ol > li:after {
  border-left: 3px solid var(--bs-otp-primary);
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  height: 100%;
  width: 0;
  z-index: 1;
  transform: translate(24px, 47px);
}
.step-content--vertical > ol .step-text h4 {
  color: var(--bs-body-color);
  margin: 0 0 16px;
  padding-top: 10px;
  font-weight: 700;
}

@media (min-width: 720px) {
  .step-content > ol {
    counter-reset: mhln-counter;
    padding-left: 0;
    display: flex;
  }
  .step-content > ol > li {
    list-style: none;
    margin: 0;
    position: relative;
  }
  .step-content > ol > li:last-child:after {
    content: none;
  }
  .step-content > ol > li:before {
    background-color: transparent;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='73' height='48' fill='none'%3E%3Cpath fill='%2352AE30' d='M57 11.5 59 24l-2 12.5 3.1-4.8C63 27.5 67.5 25 72.5 25v-2c-5 0-9.6-2.5-12.4-6.7L57 11.5ZM16 11.5 14 24l2 12.5-3.1-4.8A14.8 14.8 0 0 0 .5 25v-2c5 0 9.6-2.5 12.4-6.7l3.1-4.8Z'/%3E%3Crect width='48' height='48' x='60.5' y='48' fill='%2352AE30' rx='24' transform='rotate(-180 60.5 48)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--bs-otp-light);
    content: counter(mhln-counter, decimal);
    counter-increment: mhln-counter;
    display: block;
    font-family: Source Sans Pro, Arial, Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 18px;
    font-weight: 600;
    height: auto;
    line-height: 2.6;
    padding: 0;
    text-align: center;
    width: 69px;
    z-index: 2;
    margin: 0 auto;
    position: relative;
  }
  .step-content > ol > li:first-child:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='73' height='48' fill='none'%3E%3Cpath fill='%2352AE30' d='m56.7 11.5 2 12.5-2 12.5 3.1-4.8c2.7-4.2 7.4-6.7 12.4-6.7v-2c-5 0-9.7-2.5-12.4-6.7l-3.1-4.8Z'/%3E%3Crect width='48' height='48' x='60.2' y='48' fill='%2352AE30' rx='24' transform='rotate(-180 60.2 48)'/%3E%3C/svg%3E");
  }
  .step-content > ol > li:last-child:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='73' height='48' fill='none'%3E%3Cg fill='%2352AE30' clip-path='url(%23a)'%3E%3Cpath d='m15.7 11.5-2 12.5 2 12.5-3.2-4.8A14.8 14.8 0 0 0 .2 25v-2c5 0 9.6-2.5 12.3-6.7l3.2-4.8Z'/%3E%3Crect width='46' height='46' x='59.2' y='47' stroke='%2352AE30' stroke-width='2' rx='23' transform='rotate(-180 59.2 47)'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M.2 0h72v48H.2z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  }
  .step-content > ol > li:after {
    border: none;
    border-top: 3px solid var(--bs-primary);
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    z-index: 1;
    transform: translate(22px, 22px);
  }
  .step-content > ol > li > h4 {
    color: var(--bs-body-color);
    margin: 0 0 16px;
    padding-top: 10px;
    font-size: 20px;
    font-weight: 700;
  }
  .step-content > ol > li > p {
    font-size: 18px;
  }
}

/*# sourceMappingURL=click-otpay.css.map */