@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Raleway Light"), local("Raleway-Light"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwIYqWqZPANqczVs.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Raleway"), local("Raleway-Regular"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.img-fluid {
  max-width: 100%;
}

body {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

.wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.wrapper header {
  background: #fff;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  padding: 10px 0;
}

.wrapper header:before {
  display: table;
  content: " ";
}

.wrapper header:after {
  display: table;
  content: " ";
}

.wrapper header .logo img {
  max-width: 250px;
}

.wrapper header .call-button a {
  font-size: 18px;
  font-weight: bold;
  color: #4f4f4f;
  -webkit-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
  text-decoration: none;
  float: right;
}

.wrapper .banner {
  position: relative;
  display: block;
}

.wrapper .banner .banner_holder {
  position: relative;
  width: 100%;
}

.wrapper .banner .banner_holder .banner_background {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.wrapper .banner .banner_holder .banner_background .car {
  position: absolute;
  display: block;
  width: 100%;
  bottom: -2rem;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform .6s ease-in-out;
  transition: -webkit-transform .6s ease-in-out;
  transition: transform .6s ease-in-out;
  transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
  z-index: 1;
}

.wrapper .banner .banner_holder .banner_bg {
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  text-align: center;
  margin: 0px;
  padding: 0px;
  background: url(../img/cityscape.png) repeat-x;
  width: 100%;
  min-height: 650px;
  position: absolute;
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
  -webkit-animation: awan-animasi 20s linear infinite;
          animation: awan-animasi 20s linear infinite;
  content: '';
  z-index: -2;
}

.wrapper .banner .banner_holder .banner_text {
  width: 100%;
  min-height: 650px;
  position: relative;
  z-index: 1;
  display: table;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder h1 {
  font-size: 45px;
  padding: 0 0 10px 0;
  margin: 0;
  color: #3a3a3a;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.2;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .seperator {
  font-size: 20px;
  padding: 0;
  margin: 10px 0;
  color: #6b6b6b;
  font-weight: bold;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder h2 {
  font-size: 21px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.3em;
  letter-spacing: 0px;
  padding: 0 0 30px 0;
  margin: 0;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .reviews-star .star-btn {
  margin-top: 20px;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .reviews-star .star-btn a {
  text-decoration: none;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .reviews-star .star-btn a i {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  background: #ffc000;
  text-align: center;
  color: #fff;
  margin: 0 0 3px 5px;
  -webkit-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .reviews-star small {
  font-size: 14px;
  color: #000;
  letter-spacing: 0.3px;
  font-weight: bold;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .banner-button a {
  display: inline-block;
  width: 240px;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  -webkit-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
  padding: 10px 15px;
  margin-right: 15px;
  margin-left: 15px;
  border-radius: 5px;
  text-decoration: none;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .banner-button a span {
  vertical-align: middle;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .banner-button a i {
  vertical-align: middle;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  font-size: 25px;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  margin-left: 15px;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .banner-button .btn_first {
  background-image: -webkit-gradient(linear, left top, right top, from(#00a4ee), color-stop(#00adf2), color-stop(#00b6f6), color-stop(#00bff9), to(#00c8fb));
  background-image: linear-gradient(to right, #00a4ee, #00adf2, #00b6f6, #00bff9, #00c8fb);
  -webkit-box-shadow: 0 0 0 0 rgba(0, 182, 246, 0.2), 0 3px 30px 0 rgba(0, 182, 246, 0.19);
          box-shadow: 0 0 0 0 rgba(0, 182, 246, 0.2), 0 3px 30px 0 rgba(0, 182, 246, 0.19);
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .banner-button .btn_first:hover {
  background-image: -webkit-gradient(linear, left top, right top, from(#0097da), color-stop(#009fdd), color-stop(#00a7e0), color-stop(#00aee2), to(#02b6e4));
  background-image: linear-gradient(to right, #0097da, #009fdd, #00a7e0, #00aee2, #02b6e4);
  color: #fff;
  text-decoration: none;
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .banner-button .btn_second {
  background-image: -webkit-gradient(linear, left top, right top, from(#00c684), color-stop(#00c68c), color-stop(#00c693), color-stop(#00c69a), to(#00c6a1));
  background-image: linear-gradient(to right, #00c684, #00c68c, #00c693, #00c69a, #00c6a1);
  -webkit-box-shadow: 0 0 0 0 rgba(0, 198, 148, 0.2), 0 3px 30px 0 rgba(0, 198, 148, 0.19);
          box-shadow: 0 0 0 0 rgba(0, 198, 148, 0.2), 0 3px 30px 0 rgba(0, 198, 148, 0.19);
}

.wrapper .banner .banner_holder .banner_text .banner_text_holder .banner-button .btn_second:hover {
  background: #3a9860;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#00b77b), color-stop(#00b47f), color-stop(#00b083), color-stop(#00ad86), to(#00a989));
  background-image: linear-gradient(to right, #00b77b, #00b47f, #00b083, #00ad86, #00a989);
}

.wrapper .section {
  position: relative;
  padding: 4rem 0;
}

.wrapper .section.section-1 .section-1-headline {
  text-align: center;
}

.wrapper .section.section-1 .section-1-headline h1 {
  font-size: 2.5rem;
  padding: 0 0 1.5rem 0;
  margin: 0;
  color: #151c24;
  font-weight: 300;
}

.wrapper .section.section-1 .section-1-headline p {
  font-size: 1.2rem;
  padding: 0 0 1.5rem 0;
  margin: 0;
  color: #6b6a6a;
  letter-spacing: 0.5px;
  font-weight: 400;
}

.wrapper .section.section-1 .step_info {
  text-align: center;
}

.wrapper .section.section-1 .step_info img {
  margin: 0 auto 30px auto;
  position: relative;
  display: inline-block;
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}

.wrapper .section.section-1 .step_info h3 {
  font-size: 1.1rem;
  padding: 0 0 20px 0;
  margin: 0;
  color: #151c24;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
}

.wrapper .section.section-1 .step_info p {
  font-size: 1rem;
  padding: 0 0 20px 0;
  margin: 0;
  color: #6b6a6a;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.wrapper .section.section-2 {
  background: #00b89b;
}

.wrapper .section.section-2 .compare {
  display: table;
  width: 100%;
  height: 100%;
}

.wrapper .section.section-2 .compare .compare-text {
  display: table-cell;
  vertical-align: middle;
}

.wrapper .section.section-2 .compare .compare-text h2 {
  font-size: 2.5rem;
  padding: 0 0 25px 0;
  margin: 0;
  color: #fff;
  font-weight: 300;
  line-height: 1.2;
}

.wrapper .section.section-2 .compare .compare-text p {
  font-size: 16px;
  padding: 0 0 20px 0;
  margin: 0;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

.wrapper .section.section-3 .section-3-section {
  display: table;
  width: 100%;
  height: 100%;
}

.wrapper .section.section-3 .section-3-section .section-3-para {
  display: table-cell;
  vertical-align: middle;
}

.wrapper .section.section-4 {
  background: #f3f3f3;
}

.wrapper .section.section-4 h2 {
  line-height: 1.2;
  font-size: 2.5rem;
  padding: 0 0 25px 0;
  margin: 0;
  color: #151c24;
  font-weight: 300;
}

.wrapper .section.section-4 p {
  font-size: 16px;
  padding: 0 0 20px 0;
  margin: 0;
  color: #6b6a6a;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

.wrapper .section.section-4 .switch_holder {
  display: table;
  width: 100%;
  height: 100%;
}

.wrapper .section.section-4 .switch_holder .switch_image {
  display: table-cell;
  vertical-align: middle;
}

.wrapper .section.section-5 h2 {
  line-height: 1.2;
  font-size: 2.5rem;
  padding: 0 0 25px 0;
  margin: 0;
  color: #151c24;
  font-weight: 300;
}

.wrapper .section.section-5 p {
  font-size: 16px;
  padding: 0 0 20px 0;
  margin: 0;
  color: #6b6a6a;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

.wrapper .section.section-5 .section-5-section {
  display: table;
  width: 100%;
  height: 100%;
}

.wrapper .section.section-5 .section-5-section .section-5-para {
  display: table-cell;
  vertical-align: middle;
}

.wrapper .section.section-6 {
  padding-bottom: 0px;
  background: url("../img/video-bg.jpg") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
}

.wrapper .section.section-6 h2 {
  font-size: 2.5rem;
  padding: 0 0 25px 0;
  margin: 0;
  color: #fff;
  font-weight: 300;
  line-height: 1.2;
}

.wrapper .section.section-6 p {
  font-size: 1.1rem;
  padding: 0 0 20px 0;
  margin: 0;
  color: #fff;
  letter-spacing: 0.5px;
}

.wrapper .section.section-7 .section-7-section {
  display: table;
  width: 100%;
  height: 100%;
}

.wrapper .section.section-7 .section-7-section .section-7-para {
  display: table-cell;
  vertical-align: middle;
}

.wrapper .section.section-7 .section-7-paragraph h2 {
  font-size: 2.5rem;
  padding: 0 0 25px 0;
  margin: 0;
  color: #151c24;
  line-height: 1.2;
  font-weight: 300;
}

.wrapper .section.section-7 .section-7-paragraph p {
  font-size: 16px;
  padding: 0 0 20px 0;
  margin: 0;
  color: #6b6a6a;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.wrapper .section.section-8 {
  background: #00b89b;
  text-align: center;
}

.wrapper .section.section-8 h2 {
  font-size: 2.5rem;
  padding: 0 0 25px 0;
  margin: 0;
  color: #fff;
  font-weight: 300;
  line-height: 1.2;
}

.wrapper .section.section-8 p {
  font-size: 16px;
  padding: 0 0 20px 0;
  margin: 0;
  color: #fff;
  letter-spacing: 0.5px;
  text-align: justify;
  line-height: 1.4;
  font-weight: 400;
}

.wrapper .section.section-8 .bottom-divider {
  width: 170px;
  height: 1px;
  background: #33c6ae;
  margin: 10px auto 40px auto;
  outline: 0;
  border: 0;
}

.wrapper .section.section-8 a {
  width: 180px;
  max-width: 100%;
  padding: 10px;
  border: 1px solid #00c4ff;
  background: #00c4ff;
  font-size: 16px;
  display: inline-block;
  color: #fff;
  margin: 0 0 0 -5px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}

.wrapper footer {
  border-top: 1px solid #dfe1e4;
  padding: 2rem 0;
}

.wrapper footer .copyright p {
  font-size: 12px;
  letter-spacing: 0.5px;
  font-weight: normal;
  line-height: 22px;
}

.wrapper footer .footer_copyright {
  font-size: 12px;
  letter-spacing: 0.5px;
  font-weight: normal;
  line-height: 22px;
  text-align: center;
}

@media (max-width: 991.99px) {
  .wrapper .section {
    text-align: center;
  }
}

@media (max-width: 416px) {
  .wrapper header .logo {
    text-align: center;
  }
  .wrapper .banner .banner_holder .banner_background .car img {
    max-width: 70% !important;
  }
  .wrapper .banner .banner_holder .banner_background .banner_bg {
    min-height: 300px !important;
    background: url(../img/cityscape-mobile.png) repeat-x !important;
    bottom: 0;
    top: auto;
  }
  .wrapper .banner .banner_holder .banner_text .banner_text_holder h1 {
    font-size: 28px;
  }
  .wrapper .banner .banner_holder .banner_text .banner_text_holder h2 {
    font-size: 18px;
  }
  .wrapper .section h1, .wrapper .section h2 {
    font-size: 25px !important;
    font-weight: bold !important;
  }
}

@-webkit-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

@keyframes awan-animasi {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
/*# sourceMappingURL=main.css.map */