html, body {padding: 0px; margin: 0px; position: relative; min-height: 100%; overflow: auto; scroll-behavior: smooth;}
body {font-size: 14px; font-family: 'Poppins', sans-serif; line-height: 1.333; letter-spacing: 0.5px;}

/*button dabao banner start here*/

.button-dabao-section .button-dabao-wrappr {position: relative;}
.button-dabao-wrappr img.banner-bg {width: 100%; height: 100%; }
.button-dabao-wrappr img.mobile-banner {display: none;}
.button-dabao-wrappr img.tab-banner {display: none;}

.switch-button .button-img a .on {display: none;}
.button-press-count .button-img a .on {display: block;}
.button-press-count .button-img a .off {display: none;}
 
.button-dabao-wrappr a.btn-know-more {position: absolute; bottom: 62px;
    right: 0px; left: 0px; text-align: center; width: 130px;
    background: #fff; font-size: 14px; margin: 0px auto;}

.button-dabao-wrappr .down-arrow {position: absolute; bottom: 0px; right: 0px; left: 0px; text-align: center;}
.down-arrow .down-arrow-box {width: 100px; cursor: pointer; height: 50px; background: rgb(51 51 51 / 39%); line-height: 50px; border-radius: 50px 50px 0px 0px; border: 1px dashed #ffffff91; margin: 0px auto;}
.down-arrow-box a {display: block;}
.down-arrow .down-arrow-box img {width: 20px; -webkit-animation: down-bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); -o-animation: down-bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation: down-bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);}

@keyframes down-bounce {
50% {
    transform: translateY(-10px);
  }
}

@keyframes bounce {
50% {
    transform: translateX(-15px);
  }
}

@keyframes flow {
  0% {
      background-position: 0 50%;
  }
  50% {
      background-position: 100% 50%;;
  }
  100% {
      background-position: 0 50%;
  }
}

/*button dabao banner end here*/


/*main section start here*/

/*press button section start here*/

.switch-button {position: relative;}
.button-img {text-align: center; margin: 30px 0px 30px;}
.button-img img {width: 200px; margin: 0px auto; transition: 0.5s;}
.button-press-count.gredient-txt .press-button-anitmate {display: none;}
.press-button-anitmate {background: linear-gradient(90deg, #154697 0%, #3375DB 63.7%); transition: 0.5s; padding: 10px 15px; border-radius: 4px; width: 130px; font-size: 16px; color: #fff; position: absolute;
    top: 70px; right: 0px; left: 440px; margin: 0px auto; -webkit-animation: bounce 1000ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); -o-animation: bounce 1000ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation: bounce 1000ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); box-shadow: 0 2px 6px -1px rgba(0,0,0,.07),0 6px 18px -1px rgba(0,0,0,.04);}
.press-button-anitmate:after {content: ''; width: 0px; height: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 12px solid #164798; position: absolute;
    left: -12px; top: 13px;}


/*press button section end here*/

/*button count section start here*/

.press-button-section {transition: 0.5s;}
.button-press-count {text-align: center; display: block; align-items: baseline; justify-content: center;}
.button-press-count .count {font-size: 74px; font-weight: 700; color: #1c60ca; line-height: 65px;}

.button-press-count .count-txt {font-size: 22px; margin-left: 10px; text-transform: uppercase; line-height: normal; font-weight: 600; color: #3476DC;}         

/*button count section end here*/

/*congrate section start here*/

.congrate-section-wrappr .congrat-txt {margin-left: 20px;}
.congrate-section {text-align: center;}
.congrate-section .congrate-section-wrappr {padding: 12px 10px;
    background: #f4f8ff;
    border: 1.5px dashed #aeceff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    width: 420px;
    text-align: left;
    justify-content: center;
    margin: 0px auto;}
.thumb-icon img {width: 50px;}
.congrate-section-wrappr h2 {margin: 5px 0px; font-size: 22px; color: #00A912;}
.congrate-section-wrappr p {margin: 0px; color: #424959; font-weight: 600; font-size: 15px;}
.congrate-section-wrappr p span {text-transform: uppercase;}
.congrate-section a {display: block; color: #1689FC; margin-top: 20px; font-size: 20px; text-decoration: underline;}

/*congrate section end here*/

/*ermsofuse-section start here*/

.termsofuse-section {margin: 50px 0px 20px;}
.termsofuse-section .termsofuse-section-wrappr {display: flex; align-items: center; justify-content: center;}
.termsofuse-section-wrappr a {display: block; margin-right: 50px; color: #154697;}

/*ermsofuse-section end here*/


/*details form section start here*/

.button-press-count {margin-bottom: 30px;}

.detail-form-section {margin-top: 20px;}
.detail-form-section .detail-form-wrappr {border: 1px solid #14499B; border-radius: 6px;}
.detail-form-wrappr .form-header {background: #14499B; text-align: center; border-radius: 6px 6px 0px 0px;}
.form-header h4 {font-size: 16px; color: #fff; margin: 0px; padding: 12px;}

.form-body {padding: 30px 15px;}
.form-field label {color: #465367;}
.form-field label span.mandatory {color: #FD3C20;}
.form-field label span {color: #939DAD;}
.form-field input {background: #FBFBFB; border: 1px solid #EAEAEA; box-shadow: none !important; height: 46px;}
.form-field input::placeholder {font-size: 13px; color: #A6ACB6;}

.form-field-button {margin-top: 30px;}
.form-field-button .get-certificate {background: linear-gradient(90deg, #14499B -3.54%, #327BF2 100%); background-color: #14499B; box-shadow: 1px 1px 7px rgba(20, 73, 155, 0.18); border-radius: 6px; color: #fff;
height: 46px; transition: 0.5s; transform: scale(1);}
.form-field-button .get-certificate:active {background: linear-gradient(90deg, #14499B -3.54%, #327BF2 100%) !important; transition: 0.5s; transform: scale(0.92); background-image: none;}

.press-button-section {padding-top: 0px; margin-top: 0px ;}
.detail-form-section {padding-top: 0px; margin-top:20px;}

/*details form section end here*/


/*main section end here*/


/*certificate section start here*/

.certificate-section {background-image: url('../img/confetti.svg');}
.certificate-section .certificate-wrappr {text-align: center;}
.certificate-wrappr .certificate-img {position: relative; padding: 50px 0px 20px;}
.certificate-img h2 {position: absolute; top: 28%; font-size: 46px; left: 0; right: 0px; text-align: center; transform: translate(0%, -50%); color: #044E92;}

.share-button {display: flex; align-items: center; margin-bottom: 20px; justify-content: space-between;}
.download a {display: block; width: 40px; margin: 0px auto; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; background: #E3ECFF;}
.share a {margin-right: 10px;}
.share-button p {color: #0038AB;}

.mobile-certificate {display: none;}
.desktop-cetificate {max-width: 75%;}
/*certificate section end here*/


@media only screen and (max-width: 991px){

.button-dabao-wrappr img.mobile-banner {display: none;}
.button-dabao-wrappr img.tab-banner {display: block;}
.button-dabao-wrappr img.desktop-banner {display: none;}    

.certificate-img h2 {font-size: 32px;}

.desktop-cetificate {width: 100%};

}

@media (min-width: 576px) and (max-width: 767px){

.press-button-anitmate {top: 100px; left: 410px; width: 160px; font-size: 14px;}    
.button-img img {width: 160px;} 

.mobile-certificate {display: none;}
.certificate-img h2{font-size: 26px;} 
.certificate-section {background-size: cover;}
.button-press-count .count-txt {font-size: 24px;}
.form-field {margin-bottom: 15px;}

.button-dabao-wrappr a.btn-know-more {position: absolute; bottom: 60px;
    right: 0px; left: 0px; text-align: center; width: 130px;
    background: #fff; font-size: 14px; margin: 0px auto;}
.desktop-cetificate {width: 100%};
}

@media (max-width: 576px){
.button-press-count.gredient-txt .press-button-anitmate {display: none;}
.press-button-anitmate {background: linear-gradient(90deg, #154697 0%, #3375DB 63.7%); transition: 0.5s; padding: 10px 0px; border-radius: 4px; width: 95px; font-size: 13px; color: #fff; position: absolute;
    top: 65px; right: 0px; left: 250px; margin: 0px auto; -webkit-animation: bounce 1000ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); -o-animation: bounce 1000ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation: bounce 1000ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); box-shadow: 0 2px 6px -1px rgba(0,0,0,.07),0 6px 18px -1px rgba(0,0,0,.04);}   
.button-img img {width: 140px;} 
.button-press-count .count {font-size: 54px; margin-bottom: 5px; line-height: 44px;}
.button-press-count .count-txt {font-size: 22px;}
..button-press-count {margin-bottom: 30px;}
.congrate-section .congrate-section-wrappr {padding: 12px 10px; width: 90%; margin: 0px auto;}

.button-press-count {margin-bottom: 20px;}

.button-img {margin-bottom: 20px;}

.certificate-img h2 {font-size: 22px; color: #044E92; top: 32%; transform: translate(0%, -32%);}
.mobile-certificate {display: block; width: 100%;}
.desktop-cetificate {display: none;}
.certificate-section {background-size: cover;}

.button-dabao-section {position: fixed; top: 0px; z-index: 9; left: 0px; width: 100%;}
.press-button-section {padding-top: 1px;}
.detail-form-section {padding-top: 20px;}

.share-button {display: block;}
.share-button p {margin: 0px;} 
.download a {margin: 0px;}
.share-button .download {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.share-button .share {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.share-button .invite {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.form-field {margin-bottom: 15px;}
.down-arrow .down-arrow-box {width: 80px; height: 40px; line-height: 40px;}
.down-arrow .down-arrow-box img {width: 16px;}

.button-dabao-wrappr a.btn-know-more { position: absolute;
    bottom: 43px;
    right: 0px;
    left: 0px;
    text-align: center;
    width: 80px;
    background: #fff;
    font-size: 12px;
    color: #1264a6;
    margin: 0px auto;
    padding: 2px 5px;}

@keyframes bounce {
50% {
    transform: translateY(-10px);
  }
}


.termsofuse-section {position: fixed;
    bottom: 0px;
    margin: 0px;
    background: #fff;
    width: 100%;
    text-align: center;
    padding: 10px;}

}

body {padding-bottom: 60px;}

@media only screen and (max-width: 480px){

.button-dabao-wrappr img.mobile-banner {display: block;}
.button-dabao-wrappr img.tab-banner {display: none;}
.button-dabao-wrappr img.desktop-banner {display: none;}

.certificate-img h2 {font-size: 22px; color: #044E92; top: 32%; transform: translate(0%, -32%);}

}