/* =========================================================
   IMPORT FONT
   - Mengambil font Poppins dari Google Fonts
========================================================= */
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");


/* =========================================================
   GLOBAL STYLE
   - Style dasar seluruh website
========================================================= */

body {
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #677284;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  text-decoration: none;
}

i,
span,
a {
  display: inline-block;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}


/* =========================================================
   TYPOGRAPHY
   - Heading & Text
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #3A424E;
  margin: 0px;
}

h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #677284;
  margin: 0px;
}

ul,
ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}


/* =========================================================
   BACKGROUND UTILITIES
   - Background helper
========================================================= */

.bg_cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}


/* =========================================================
   BUTTON STYLE
   - Tombol utama website
========================================================= */

.main-btn {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  border: 0;
  padding: 0 25px;
  font-size: 16px;
  height: 55px;
  line-height: 55px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  transition: all 0.4s ease-out 0s;
  background-color: #3698EE;
}

.main-btn:hover {
  background-color: rgba(54, 152, 238, 0.8);
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}


/* =========================================================
   SECONDARY BUTTON
   - Tombol outline putih
========================================================= */

.main-btn.main-btn-2 {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  line-height: 53px;
}


/* =========================================================
   SECTION TITLE
   - Judul tiap section
========================================================= */

.section_title .title {
  font-size: 44px;
  font-weight: 700;
}

.section_title p {
  margin-top: 25px;
}


/* =========================================================
   PRELOADER
   - Loading animation sebelum website muncul
========================================================= */

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  height: 100%;
  width: 100%;
  background: #fff;
  z-index: 99999;
}

.preloader .loader {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}


/* =========================================================
   HEADER / NAVBAR
   - Navbar bagian atas
========================================================= */

.header_navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  transition: all 0.3s ease-out 0s;
}

.navbar {
  padding: 25px 0;
  border-radius: 5px;
  position: relative;
  transition: all 0.3s ease-out 0s;
}


/* =========================================================
   STICKY NAVBAR
   - Navbar saat discroll
========================================================= */

.sticky {
  position: fixed;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
}

.sticky .navbar {
  padding: 10px 0;
}


/* =========================================================
   NAVIGATION MENU
   - Menu navbar
========================================================= */

.navbar-nav .nav-item {
  margin-left: 20px;
  position: relative;
}

.navbar-nav .nav-item a {
  font-size: 16px;
  color: #fff;
  transition: all 0.3s ease-out 0s;
  padding: 4px 10px;
  position: relative;
}


/* =========================================================
   HERO SECTION
   - Landing utama website
========================================================= */

.header_hero {
  position: relative;
  z-index: 5;
  background-position: bottom center;
  padding-top: 70px;
  height: 800px;
}

.header_hero::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 850px;
  background-image: url(../images/header_shape.svg);
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================================
   HERO CONTENT
   - Text pada hero section
========================================================= */

.header_hero_content .header_title {
  font-size: 54px;
  font-weight: 700;
  color: #fff;
  margin-top: 20px;
}

.header_hero_content .header_title span {
  color: #3698EE;
}

.header_hero_content p {
  margin-top: 35px;
  color: #fff;
}


/* =========================================================
   HERO IMAGE
   - Gambar HP / mockup hero
========================================================= */

.header_image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}


/* =========================================================
   FEATURES SECTION
   - Card fitur utama
========================================================= */

.single_features {
  background-color: #fff;
  padding: 60px 25px;
  border-radius: 10px;
  transition: all 0.3s ease-out 0s;
  box-shadow: 0px 3px 35px 0px rgba(158, 158, 158, 0.1);
}

.single_features:hover {
  box-shadow: 0px 3px 35px 0px rgba(158, 158, 158, 0.2);
}

/* =========================
   ICON STYLE
========================= */
.single_features .features_icon i {
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;

  font-size: 40px;

  border-radius: 10px;

  color: #fff; /* warna icon putih */
}

/* =========================
   ICON COLOR
========================= */
.single_features.features_1 .features_icon i {
  background-color: #004aad;
}

.single_features.features_2 .features_icon i {
  background-color: #004aad;
}

.single_features.features_3 .features_icon i {
  background-color: #004aad;
}

/* =========================================================
   MORE FEATURES
   - Card fitur tambahan
========================================================= */

.more_feature_box {
  border: 1px solid #e8e8e8;
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  background: #fff;
  transition: 0.3s;
  height: 100%;
}

.more_feature_box:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.more_feature_box i {
  font-size: 30px;
  color: #2596be;
  margin-bottom: 15px;
  display: block;
}


/* =========================================================
   ABOUT SECTION
   - Tentang aplikasi
========================================================= */

.about_image {
  position: relative;
  padding-bottom: 30px;
}

.about_content .main-btn {
  margin-top: 40px;
  padding: 0 35px;
}


/* =========================================================
   PHONE MOCKUP
   - Tampilan HP custom
========================================================= */

.phone_mockup {
  width: 100%;
  max-width: 300px;
  height: auto;

  border: none;
  background: transparent;

  margin: auto;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
}

.phone_notch {
  width: 120px;
  height: 28px;
  background: #1f2d3d;

  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;

  position: absolute;
  top: -1px;
  left: 50%;

  transform: translateX(-50%);
}

.phone_screen {
  width: 100%;
  height: auto;
}


/* =========================================================
   HOW IT WORKS
   - Step penggunaan aplikasi
========================================================= */

.how_item {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  align-items: flex-start;
}

.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #004aad;
  font-size: 20px;
  flex-shrink: 0;
}

.icon.blue { background: #3b82f6; }
.icon.purple { background: #8b5cf6; }
.icon.pink { background: #ec4899; }
.icon.orange { background: #f97316; }


/* =========================================================
   PREMIUM SECTION
   - Box premium / upgrade
========================================================= */

.premium_box {
  background: linear-gradient(135deg, #004AAD, #2F6EDB);
  border-radius: 20px;
  padding: 60px 40px;
  color: white;
}

.premium_box h3,
.premium_box h5 {
  color: white;
}

.premium_box p {
  color: rgba(255,255,255,0.85);
}

.premium_box i {
  font-size: 40px;
  margin-bottom: 10px;
  display: block;
  color: white;
}


/* =========================================================
   TESTIMONIAL
   - Carousel testimonial
========================================================= */

#testimonials {
  padding-bottom: 200px;
}

.carousel-fade .carousel-item {
  transition: opacity 1s ease-in-out;
}


/* =========================================================
   FOOTER
   - Footer bawah website
========================================================= */

.footer_area_simple {
  background-color: #004AAD;
  padding: 60px 0;
  position: relative;
  width: 100%;
  border: none;
}

.footer_area_simple::before,
.footer_area_simple::after {
  display: none !important;
}

.text-white {
  color: #ffffff !important;
}


/* =========================================================
   BACK TO TOP BUTTON
   - Tombol kembali ke atas
========================================================= */

.back-to-top {
  font-size: 20px;
  color: #fff;

  position: fixed;
  right: 20px;
  bottom: 20px;

  width: 45px;
  height: 45px;
  line-height: 45px;

  border-radius: 5px;
  background-color: #3698EE;

  text-align: center;
  z-index: 99;

  transition: all 0.3s ease-out 0s;
  display: none;
}

.back-to-top:hover {
  color: #fff;
  background-color: #3698EE;
}


/* =========================================================
   RESPONSIVE
   - Tampilan mobile
========================================================= */

@media (max-width: 767px) {

  .main-btn {
    padding: 0 15px;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
  }

  .header_hero {
    height: auto;
  }

  .header_hero_content {
    padding-top: 50px;
  }

  .header_hero_content .header_title {
    font-size: 30px;
  }

  .header_image {
    position: relative;
    width: 100%;
    margin-top: 50px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
/* =========================================================
   HERO FIX
   - Perbaikan hero section
========================================================= */

.shape {
  position: absolute;
}

.shape.shape-1 {
  top: 0;
  left: 0;
}

.shape.shape-2 {
  bottom: -200px;
  left: calc((100% - 1700px) / 2);
}

.shape.shape-3 {
  top: 0;
  right: 0;
}

/* HERO IMAGE */

.header_image .image {
  position: relative;
  padding-bottom: 40px;
}

.header_image .image .dots {
  position: absolute;
  right: 10%;
  bottom: 0px;
  z-index: -1;

  animation: dots 6s ease-out infinite;
}

.header_hero_image img {
  width: 100%;
}

/* DOTS ANIMATION */

@keyframes dots {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0);
  }
}

/* TABLET */

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

  .header_hero {
    height: auto;
  }

  .header_image {
    position: relative;
    width: 720px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 50px;
  }

  .header_hero_content {
    padding-top: 50px;
  }

  .header_hero_content .header_title {
    font-size: 40px;
  }
}

/* MOBILE */

@media (max-width: 767px) {

  .header_hero {
    height: auto;
  }

  .header_image {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 50px;
  }

  .header_hero_content {
    padding-top: 50px;
  }

  .header_hero_content .header_title {
    font-size: 30px;
  }

  .header_image .image .dots {
    width: 100px;
  }
}
/* =========================================================
   NAVBAR BRAND / LOGO
   - Logo berubah warna saat scroll
========================================================= */

.navbar-brand {
  padding: 0;
}

/* TEXT LOGO */

.navbar-brand,
.navbar-brand span,
.logo-text {
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  transition: 0.3s;
}

/* SAAT NAVBAR SCROLL */

.sticky .navbar-brand,
.sticky .navbar-brand span,
.sticky .logo-text,

#navbar.scrolled .navbar-brand,
#navbar.scrolled .navbar-brand span,
#navbar.scrolled .logo-text {
  color: #004aad ;
}

/* Default navbar transparan */
.page-scroll {
  color: white !important;
  transition: 0.3s;
}

/* Setelah discroll */
#navbar.scrolled .page-scroll {
  color: #004aad !important;
}