@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}
.bg-body-native {
  background-color: transparent;
}
.native_logo_yip {
  background-color: transparent !important;
}
.active_native {
  color: rgb(216, 143, 9) !important;
}
.hover_native {
  transition: 0.2s;
  color: white;
}
.hover_native:hover {
  transition: 0.2s;
  color: rgb(216, 143, 9);
}
.bg-jumbo {
  background: linear-gradient(
      141deg,
      rgba(34, 34, 34, 0.881) 0%,
      rgba(35, 35, 35, 0.518) 100%
    ),
    url(../img/backgorund\ header.jpeg);
  height: 700px;
  margin-top: -125px;
  background-size: cover;
  background-attachment: fixed;
  padding: 5px;
}

.bg-jumbo_2 {
  background: linear-gradient(
      141deg,
      rgba(34, 34, 34, 0.881) 0%,
      rgba(35, 35, 35, 0.518) 100%
    ),
    url(../img/backgorund\ header.jpeg);
  height: 300px;
  margin-top: -125px;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  padding: 5px;
}
.logo_yip_navbar {
  width: 100px;
  transition: 0.3s;
}

/* navbar sticky */
.navbar {
  transition: 0.3s;
}
.navbar.sticky {
  background-color: rgb(49, 48, 48);
  opacity: 80%;
  transition: 0.3s;
  padding: 0 10px;
}

.navbar.sticky .logo_yip_navbar {
  width: 50px !important;
}

.navbar.sticky .hover_native {
  color: #cccbcb !important;
  transition: 0.2s;
}
.navbar.sticky .hover_native:hover {
  color: rgb(216, 143, 9) !important;
  transition: 0.2s;
}

/* akhir navbar sticky */
.native-spacing-header {
  padding: 10px;
  margin-top: 325px;
  justify-content: center;
  text-align: center;
  color: white;
}
.btn-native-one {
  border: 1px solid rgb(53, 119, 233);
  transition: 0.3s;
  border-radius: 25px 25px;
  color: white;
  padding: 15px;
}
.btn-native-one:hover {
  background-color: rgb(53, 119, 233);
  transition: 0.3s;
}
.sampul_section_one {
  justify-content: center;
  text-align: center;
  margin-top: 100px;
}
.text_one {
  font-weight: 600;
}
.text_two-content_two {
  text-align: start;
  margin: auto;
  width: 530px;
  font-size: 47px;
  font-weight: 600;
  margin-left: 200px;
}
.text_tree-content_two {
  width: 450px;
  font-weight: 400;
  margin-left: 200px;
  margin-top: 25px;
  font-size: 20px;
}
.sampul_content_text_one {
  margin-top: 100px;
  letter-spacing: 1.5;
}
.sampul_content_image {
  margin-top: 50px;
}
.image_native-content_image {
  width: 400px;
  margin-bottom: 10px;
}
.btn-native {
  background-color: rgb(53, 119, 233);
  border-radius: 25px 25px;
  color: white;
  padding: 15px;
  box-shadow: rgba(107, 153, 244, 0.782) 0px 2px 8px 0px;
  transition: 0.2s;
  width: 150px;
}
.btn-native:hover {
  background-color: rgb(50, 50, 49);
  border-radius: 25px 25px;
  color: white;
  transition: 0.2s;
}
.cover-btn-native {
  justify-content: center;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 100px;
}
.section_two {
  background-color: rgb(53, 119, 233);
  padding: 0.1px;
}
.sampul_section_two {
  justify-content: center;
  text-align: center;
  color: white;
  margin-top: 50px;
  margin-bottom: 120px;
}
.image_native-section2 {
  width: 60px;
}
.span-image-section-two {
  color: white;
  font-size: 19px;
}
.sampul_content2-section3_col3 {
  justify-content: end;
  margin-bottom: 150px;
}
.text-one_section3-col3 {
  text-align: start;
  font-size: 47px;
  color: white;
}
.text-two_section3-col3 {
  text-align: start;
  font-weight: 24px;
  color: white;
}
.section_tree {
  margin-top: 100px;
  margin-bottom: 80px;
}
.image-section3-col3 {
  width: 500px;
  z-index: auto;
  box-shadow: rgba(69, 118, 225, 0.64) 0px 7px 29px 0px;
}
.cover-content-text-section3 {
  justify-content: end;
  text-align: end;
  margin-top: 150px;
}
.text-one_section3 {
  font-size: 47px;
  color: rgb(53, 119, 233);
  font-weight: 600;
  width: 500px;
  margin-left: 20px;
  padding: 15px;
}
.text-two_section3 {
  margin-left: 100px;
  color: rgb(101, 102, 102);
}
.cover-btn-sec3 {
  justify-content: end;
  margin-top: 40px;
  text-align: end;
}
.btn-native2 {
  border: 2px solid rgb(48, 48, 48);
  border-radius: 25px 25px;
  color: black;
  transition: 0.2s;
  padding: 10px;
}
.btn-native2:hover {
  background-color: rgb(48, 48, 48);
  border-radius: 25px 25px;
  color: white;
  transition: 0.2s;
}
.section_four {
  background-color: rgb(246, 245, 245);
  padding: 0.1px;
}
.cover_section_four {
  margin-top: 150px;
  margin-left: 250px;
  margin-bottom: 50px;
}
.text-one_section-four {
  font-weight: 600;
}
.text-two_section-four {
  font-weight: 400;
  margin-top: 25px;
}
.sampul-client {
  margin-top: 50px;
  margin-bottom: 100px;
}
.text-66 {
  color: rgb(53, 119, 233);
  font-size: 100px;
  border-right: 2px solid rgb(219, 217, 217);
  margin-top: -35px;
}
.span-client {
  margin-top: -10px;
}
.text-second {
  color: black;
  font-size: 67px;
  border-right: 2px solid rgb(219, 217, 217);
}
.sec-five {
  background-color: rgb(246, 245, 245);
  padding: 0.1px;
}
.cover-section-five {
  margin-top: 150px;
  justify-content: center;
  text-align: center;
  margin-bottom: 50px;
}
.cover-image_sec5 {
  justify-content: start;
  text-align: start;
  margin-left: 30px;
}
.image-sec5-native {
  background-position: center;
  background-size: cover;
  width: 80px;
  border-radius: 50%;
  margin-bottom: -35px;
}
.cover-card-caption-image {
  padding: 25px;
  background-color: white;
  margin-bottom: 50px;
  justify-content: start;
  text-align: start;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.caption_card {
  color: rgb(142, 142, 142);
  font-weight: 300;
}
.sampul-say_client {
  margin-top: 80px;
  margin-bottom: 150px;
}
.image-native-sponsor {
  width: 150px;
}
.sampul-sponsor {
  margin-bottom: 120px;
}
.sec-six {
  background-color: rgb(53, 119, 233);
  padding: 0.1px;
}
.sampul-section-six {
  margin-top: 150px;
  justify-content: center;
  text-align: center;
}
.text-one_section6 {
  color: white;
  font-size: 38px;
}
.text-two_section6 {
  margin: auto;
  width: 360px;
  color: white;
  line-height: 1.5;
}
.btn-native-sec6 {
  background-color: white;
  color: rgb(53, 119, 233);
  border-radius: 25px 25px;
  padding: 15px;
  font-weight: 600;
}
.btn-native-sec6:hover {
  background-color: rgb(66, 65, 65);
  color: white;
  border-radius: 25px 25px;
  padding: 15px;
  font-weight: 600;
}
.btn-section-six {
  justify-content: center;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 100px;
}
.section-footer {
  background-color: #222222;
  padding: 0.1px;
}
.cover-content-footer {
  justify-content: start;
  text-align: start;
}
.cover_section-footer {
  margin-top: 150px;
  justify-content: start;
  margin-bottom: 100px;
}
.text-content-footer {
  color: white;
}
.caption-content-footer {
  justify-content: start;
  text-align: start;
  margin-top: 25px;
  margin-bottom: 80px;
}
.tentang-kami {
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.caption-tentang-kami {
  color: white;
  font-weight: 300;
}
.embed-native {
  width: 200px;
  border-radius: 10px;
  border: 2px solid rgb(53, 119, 233);
}
.span-a-footer {
  color: white;
  transition: 0.2s;
}
.span-a-footer:hover {
  color: white;
  transition: 0.2s;
  text-decoration: none;
}
.cover-content-footer-image {
  text-align: center;
  justify-content: center;
}
/* about */
.cover_section_about_img {
  justify-content: center;
  text-align: center;
  border-radius: 5px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.img-about-1 {
  box-shadow: rgba(105, 175, 244, 0.2) 0px 8px 24px;
  width: 900px;
}
.cover_caption-sec1-about {
  margin-top: 70px;
  justify-content: center;
  text-align: center;
  margin-bottom: 60px;
}
.judul-sec1-about {
  font-size: 38px;
  font-weight: 600;
  width: 700px;
  margin: auto;
  text-align: start;
  margin-bottom: 30px;
}
.caption-sec1-about {
  width: 700px;
  margin: auto;
  text-align: start;
  margin-bottom: 30px;
  color: #757373;
  font-weight: 400;
  line-height: 1.4;
}
.img-native_man_working {
  width: 300px !important;
}
.man-working {
  margin-bottom: 100px;
}
.cover_man_working {
  justify-content: start;
  text-align: start;
  margin-top: 20px;
}
.name_man {
  color: black;
  font-weight: 500;
  font-size: 21px;
}
.posisi_man {
  color: #8e8d8d;
  font-weight: 400;
}
.section_two_about {
  background-color: #f9f9f9;
  padding: 0.1px;
}
.sampul_section_two_about {
  margin-top: 100px;
  margin-bottom: 80px;
}
.native-image-all {
  width: 460px;
}
.cover-image-all-about {
  margin-bottom: 50px;
}
.last-caption-img {
  margin-top: 80px;
  margin-bottom: 80px;
}
.sampul-sec_one-project {
  padding: 5px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.judul_sec-one-project {
  width: 400px;
  font-size: 42px;
  font-weight: 600;
  margin-left: 80px;
  line-height: 1.3;
}
.judul2_sec-one-project {
  width: 500px;
  font-size: 42px;
  font-weight: 400;
  margin-left: 80px;
  line-height: 1.3;
}
.caption_sec-one-project {
  margin-top: 30px;
  margin-left: 80px;
  width: 400px;
  font-weight: 300;
  line-height: 1, 4;
}
.native_image_project1,
.native_image_project2,
.native_image_project3,
.native_image_project4,
.native_image_project5,
.native_image_project6,
.native_image_project7 {
  width: 380px;
  height: 500px;
}
.native_image_project8,
.native_image_project9,
.native_image_project10 {
  width: 370px;
  height: 500px;
}
.sampul_section_project {
  margin-bottom: 50px;
}
.sampul_name_image_project {
  margin-top: 10px;
  padding: 10px;
  text-align: start;
  justify-content: start;
}
.name_text_project {
  font-size: 26px;
}
.name_tipe_project {
  font-size: 18px;
}
.cover_sponsor_project {
  margin-top: 80px;
}

/* Porject */
.section_one_services {
  padding: 0.1px;
}
.cover_image_one_project {
  justify-content: center;
  text-align: center;
  margin-bottom: 20px;
}
.native_image_projectone {
  margin-top: 30px;
  width: 800px;
  box-shadow: rgba(100, 101, 102, 0.56) 0px 7px 29px 0px;
}
.section_two_project {
  padding: 0.1px;
}
.judul_section_two_project {
  padding: 10px;
  margin-left: 200px;
  font-size: 42px;
  font-weight: 600;
}
.sampul_section_two_project {
  margin-top: 80px;
  margin-bottom: 100px;
}
.caption_section_two_project {
  padding: 10px;
  width: 700px;
  margin-left: 200px;
  font-weight: 300;
}
.angka_list {
  padding: 15px;
  background-color: rgb(53, 119, 233);
  border-radius: 50%;
  font-size: 32px;
  color: white;
}
.caption_text {
  font-weight: 600;
}
.list_opsi_project_one {
  margin-top: 150px;
  margin-bottom: 100px;
}
.section_tree_services {
  padding: 0.1px;
  background-color: #f9f9f9;
}
.sampul_section_tree_services {
  margin-top: 150px;
  margin-bottom: 100px;
}
.judul_section_tree {
  font-size: 42px;
  font-weight: 600;
  width: 400px;
  padding: 5px;
  margin-left: 300px;
  line-height: 1.6;
}
.caption_section_tree {
  padding: 5px;
  font-weight: 300;
  width: 700px;
  margin-left: 300px;
  line-height: 1.5;
}
.cover_sponsor_services {
  margin-top: 100px;
}
.contact_lokasi {
  margin-top: 50px;
  justify-content: center;
  text-align: center;
  padding: 5px;
}
.embed_native_contact {
  width: 1200px;
  height: 400px;
  border-radius: 5px;
  box-shadow: 1px 3px 4px rgb(53, 119, 233);
}
.sampul_judul_contact_sampul_lokasi {
  margin-top: 150px;
}
.Judul_contact_sampul {
  font-size: 42px;
  font-weight: 600;
  margin-right: 510px;
  margin-bottom: 30px;
}
.caption_contact {
  width: 700px;
  justify-content: start;
  text-align: start;
  margin-left: 250px;
  line-height: 1.5;
  font-weight: 400;
}
.cover_opsi_contact_lokasi {
  padding: 25px;
  height: 200px;
  background-color: white;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: 0.3s;
}
.cover_opsi_contact_lokasi:hover {
  transition: 0.3s;
  transform: translateY(-5%);
}
.size_icon {
  font-size: 32px;
  color: black;
  margin-bottom: 15px;
}
.judul_alamat {
  color: black;
  font-size: 21px;
}
.caption_judul_alamat {
  color: black;
  font-weight: 400;
}
.btn-native-kirim {
  background-color: rgb(53, 119, 233);
  border-radius: 25px 25px;
  padding: 15px;
  transition: 0.2s;
  color: white;
  width: 100px;
}
.btn-native-kirim:hover {
  background-color: rgb(78, 137, 240);
  color: white;
  transition: 0.2s;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
.sampul_form_contact {
  justify-content: center;
  text-align: start;
  width: 800px;
  margin: auto;
  margin-bottom: 50px;
}
.native_css {
  border: none;
  border-bottom: 1px solid black;
  border-radius: 0px;
}
.native_css:focus {
  border: none;
  border-bottom: 1px solid black;
  background-color: #ebe8e8c8;
  box-shadow: none;
}
.navbar_dekstop {
  display: block;
}
.navbar_mobile {
  display: none;
}
.embed-native-footer {
  width: 220px;
}
.img-native_man_working

/* table_services */
.table {
  border-radius: 10px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  margin: auto;
  text-align: start;
  padding: 10px;
}
.color_head_native {
  background-color: rgb(32, 86, 180) !important;
  color: white !important;
}
.btn-native-services {
  background-color: #222222;
  color: white;
  border-radius: 25px 25px;
  transition: 0.2s;
  padding: 15px;
}
.btn-native-services:hover {
  background-color: #3a3a3a;
  color: white;
  border-radius: 25px 25px;
  transition: 0.2s;
}
.cover_table_services {
  width: 650px;
  background-color: white;
}
.color_content_native_services {
  background-color: rgba(55, 117, 224, 0.792) !important;
  color: white !important;
  cursor: crosshair;
}
.cover_table_experiences {
  padding: 20px;
  width: 1200px;
  margin: auto;
  margin-bottom: 30px;
}
.text_project_judul {
  font-size: 32px;
  font-weight: 600;
}
.span_judul_services {
  font-size: 21px;
  font-weight: 500;
}
.cover_judul_services_project {
  justify-content: center;
  text-align: center;
  margin-top: 90px;
  margin-bottom: 40px;
}
.desktop_version_services {
  display: block;
}
.mobile_version_services {
  display: none;
}
.cover_man_working {
  justify-content: center;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .navbar_mobile {
    display: block;
  }
  .navbar_dekstop {
    display: none;
  }
  .logo_yip_navbar_mobile {
    width: 50px;
  }
  .navbar-toggler {
    box-shadow: none !important;
    border: none;
  }
  .bg_native_mobile {
    background-color: #222222a9;
  }
  .text_two-content_two {
    margin-left: 0px;
    font-size: 27px;
    width: 300px;
    padding: 10px;
    line-height: 1.3;
  }
  .text_tree-content_two {
    margin-left: 0px;
    width: 280px;
    padding: 10px;
    line-height: 1.3;
  }
  .text-one_section3 {
    margin-left: 0px;
    font-size: 27px;
    width: 300px;
    justify-content: start;
    text-align: start;
    padding: 10px;
    line-height: 1.4;
  }
  .text-two_section3 {
    margin-left: 0px;
    width: 280px;
    justify-content: start;
    text-align: start;
    padding: 10px;
    line-height: 1.5;
  }
  .cover-btn-sec3 {
    justify-content: start;
    text-align: start;
    margin-bottom: 100px;
  }
  .cover-content-text-section3 {
    margin-top: 10px;
  }
  .image-section3-col3 {
    width: 330px;
  }
  .image_native-content_image {
    width: 330px;
    margin-bottom: 30px;
    box-shadow: rgba(102, 132, 243, 0.574) 0px 3px 5px;
  }
  .text-one_section3-col3 {
    font-size: 27px;
    width: 300px;
    margin-top: 50px;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 10px;
  }
  .text-two_section3-col3 {
    width: 300px;
    line-height: 1.5;
    padding: 10px;
  }
  .sampul_section_two {
    margin-bottom: 70px;
  }
  .text_one-section_two {
    font-size: 31px;
  }
  .image_native {
    width: 200px;
  }
  .row2_content2 {
    margin-bottom: 30px;
  }
  .cover_section_four {
    margin-left: 0px;
    padding: 20px;
  }
  .span-client {
    margin-bottom: 50px;
  }
  .text-one_sec-five {
    font-size: 28px;
  }
  .cover-img-sponsor {
    margin-bottom: 30px;
  }
  .text-one_section6 {
    padding: 10px;
    font-size: 36px;
  }
  .cover-content-footer {
    padding: 10px;
  }
  .caption-content-footer {
    padding: 10px;
  }
  .cover-content-footer {
    margin-bottom: 40px;
  }
  .embed-native {
    width: 340px;
  }
  .bg-jumbo {
    background: linear-gradient(
        141deg,
        rgba(34, 34, 34, 0.881) 0%,
        rgba(35, 35, 35, 0.518) 100%
      ),
      url(../img/backgorund\ header.jpeg);
    height: 700px;
    margin-top: -125px;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    padding: 5px;
  }
  .offcanvas-header,
  .offcanvas-body {
    background-color: #36363682;
  }

  /* about */
  .caption-sec1-about {
    width: 300px;
    line-height: 1.5;
  }
  .judul-sec1-about {
    font-size: 24px;
    text-align: center;
    width: 300px;
  }
  .native-image-all {
    width: 330px;
    margin-bottom: 30px;
  }
  .img-about-1 {
    width: 300px;
  }
  .cover_man_working {
    padding: 15px;
  }

  /* project */
  .judul_sec-one-project {
    margin-left: 0px;
    padding: 10px;
    font-size: 32px;
    width: 325px;
  }
  .judul2_sec-one-project {
    margin-left: 0px;
    padding: 10px;
    font-size: 28px;
    width: 330px;
    margin-top: -25px;
  }
  .caption_sec-one-project {
    margin-left: 0px;
    padding: 10px;
    font-size: 19px;
    line-height: 1.5;
    width: 335px;
  }
  .bg-jumbo_2 {
    background: linear-gradient(
        141deg,
        rgba(34, 34, 34, 0.881) 0%,
        rgba(35, 35, 35, 0.518) 100%
      ),
      url(../img/backgorund\ header.jpeg);
    height: 300px;
    margin-top: -125px;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    padding: 5px;
  }
  .native_image_project1,
  .native_image_project2,
  .native_image_project3,
  .native_image_project4,
  .native_image_project5,
  .native_image_project6,
  .native_image_project7 {
    width: 330px;
  }
  .name_text_project {
    padding: 15px;
  }
  .name_tipe_project {
    padding: 15px;
    margin-top: -30px;
  }

  /* services */
  .native_image_projectone {
    width: 330px;
  }
  .judul_section_two_project,
  .caption_section_two_project,
  .judul_section_tree,
  .caption_section_tree {
    margin-left: 0px;
  }
  .caption_section_two_project {
    width: 330px;
    padding: 20px;
    line-height: 1.4;
  }
  .caption_section_tree {
    width: 300px;
  }
  .judul_section_two_project {
    font-size: 32px;
    padding: 20px;
  }
  .angka_list {
    margin-bottom: 30px;
    font-size: 34px;
  }
  .caption_text {
    margin-top: 20px;
  }
  .judul_section_tree {
    padding: 20px;
    width: 300px;
  }
  .caption_section_tree {
    padding: 20px;
    line-height: 1.4;
  }

  /* contact */
  .embed_native_contact {
    width: 330px;
  }
  .caption_contact {
    margin-left: 0px;
    width: 330px;
    padding: 15px;
    line-height: 1.5;
  }
  .native_css {
    width: 300px;
  }
  .sampul_form_contact {
    width: 300px;
  }
  .sampul_judul_contact_sampul_lokasi {
    width: 300px;
  }
  .Judul_contact_sampul {
    width: 300px;
    padding: 5px;
  }
  .cover_opsi_contact_lokasi {
    margin-bottom: 30px;
  }
  .img-native_man_working {
    width: 330px;
  }
  .embed-native-footer {
    width: 300px;
  }
  .native_image_project8,
  .native_image_project9,
  .native_image_project10 {
    width: 340px;
  }
  .cover_table_services {
    width: 340px;
    justify-content: center;
  }
  .cover_table_experiences {
    width: auto;
  }
  .mobile_version_services {
    display: block;
    width: 1000px;
  }
  .desktop_version_services {
    display: none;
  }
}