@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;100&display=swap');

body { font-family: 'Poppins', sans-serif; font-size: 15px; }
p { line-height: 20px; font-size: 15px; }
a { line-height: normal; letter-spacing: normal;  color: #000; }


#header {  color: #fff; font-weight: 100; font-size: 15px; }
.bg-header { background: rgb(85,156,224);
background: linear-gradient(0deg, rgba(85,156,224,1) 0%, rgba(45,80,139,1) 100%); }
#header .yellow { color: #ffcb4d; font-weight: 300;   }
#header h2 { font-size: 30px;  font-weight: 300; margin: 50px 10px;  }
#logo {  background: #fff;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 20px 30px; width: 200px; border-radius: 0px 0px 20px 20px; text-align: center; margin: 0px auto; }

.row { }
#content { }

/* Common style for pseudo-elements */
section { position: relative; }
section::before,section::after { position: absolute; content: ''; pointer-events: none; overflow: hidden; }
.carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; }
.carousel-fade .carousel-inner .active { opacity: 1; }
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; }
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1; }
.carousel-fade .carousel-control { z-index: 2; }
.tp-caption { font-family: 'Montserrat', sans-serif; letter-spacing:2px; }
.tp-caption.large_white_bold { color: #ffffff; font-size: 50px; line-height:70px;  font-weight: 200; }
.tp-caption.large_white_orange { color: #ffda0c; font-weight: 50; }
.tp-caption.large_white_light { color: #ffffff; font-size: 65px; font-weight: 400; font-weight: 300; }
.btn { -webkit-border-radius: 3em; -moz-border-radius: 3em; -ms-border-radius: 3em; -o-border-radius: 3em; border-radius: 3em; padding: 5px 25px; }
.btn.btn-primary {  -webkit-border-radius: 3em; -moz-border-radius: 3em; -ms-border-radius: 3em; -o-border-radius: 3em; border-radius: 3em;  padding: 5px 25px; background: #3ab86d; color: #fff; }

.btn.btn-default { border: none; background: #ffffff; }
.btn.btn-lg { padding: 10px 25px; }
.btn:hover { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

.scrollpoint { opacity: 0; }
.scrollpoint.active { opacity: 1 \0; }
.hanging-phone { position: absolute; right: 0; z-index: 0; bottom: -70px; }
.section-heading { margin: 10px 0 ; text-align: center;  }
.section-heading h1 { display: inline-block; font-size: 30px; font-weight: 300; margin-bottom: 0; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; }
.section-heading h2 { display: inline-block; font-size: 30px; font-weight: 300; margin-bottom: 0; color:#405e89; }
.section-heading p { font-size: 17px; color: #000; font-weight: 300; -webkit-transition: opacity ease-in-out 500ms;-moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; font-weight: 400; }
.section-heading2 p { font-size: 25px; color: #999999; font-weight: 300; }
.section-heading span { font-size: 25px; color:#FFF; font-weight: 300; }
.section-heading h5 { font-size: 25px; color:#FFF; font-weight:400; text-align:center; }
.section-heading h6 { font-size: 25px; color:#FFF; font-weight: 300; text-align:center; }
.section-heading .divider:after { content: ""; position: relative; height: 4px; width: 60px; display: block; text-align: center;
 margin: 13px auto; -webkit-border-radius: 5em; -moz-border-radius: 5em; -ms-border-radius: 5em; -o-border-radius: 5em;  border-radius: 5em; }
.section-heading.inverse h1,
.section-heading.inverse p { color: #ffffff; }
.section-heading.inverse .divider:after { background: #ffffff; }


/*LANGKAH DAFTAR */
section#features .media i.fa { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; padding: 20px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; width: 2.6em; text-align: center; }
section#features .media .media-heading { padding-top: 10px; font-weight: 300; }
section#features .media .media-body { padding-top: 15px;  }
section#features .media.feature { margin: 15px; }
section#features .media.feature:first-child { margin-top: 0; }
section#features img {  }
section#features .pull-left { margin: 20px 10px 0px 10px; }

section#features { background: #f6f6f6; }
section#features header h1:after { background: #50cb86; }
section#features .media i.fa { border: 2px solid #50cb86; color: #50cb86; }
section#features .media:hover i.fa { color: #ffffff; background: #50cb86; }
section#features .media:hover h3 { color: #50cb86; }
section#features .media.active i.fa { color: #ffffff; background: #50cb86; }
section#features .media.active .media-heading { color: #50cb86; }

/*THEME*/
section#theme { min-height: 450px; overflow: hidden; background:#e0edf7; color:#405e89; }

/* HARGA  */
section#getApp {  }
section#getApp .bg { margin-top:50px; }


/* FOOTER */
footer { text-align: center; margin: 20px 0px; }
footer .footer2 { font-size: 13px; line-height: 20px; }

footer .social a { background:#000; }
footer .social a i { color: #fff; font-size: 16px; }
footer a > img { width: 100px; }
footer .social { display: block; }
footer .social a {  padding: 10px 15px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; display: inline-block; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out;  -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;  }
footer .social a i { width: 1em;  }

.box-content { margin: 20px 0px; padding: 20px;  text-align: center; display: grid; background-color: #fafafa; border-radius: 20px; border: 2px solid #dedede;  }
.content1 {  }
.content1 h3 { color: #000;  }
.content2 { padding: 0px 20px; }
.content3 { padding: 10px 0px; border-radius: 0 0 20px 20px; position: relative; }
.content3 h3 { color: #e85046; }