@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  scroll-behavior: smooth; }

body {
  font-family: 'Open Sans', sans-serif;
  overflow: hidden; }

#english, #indonesia {
  display: none; }

ul li {
  list-style: none; }

p {
  font-size: 14px;
  color: #666;
  line-height: 1.5; }

a {
  text-decoration: none;
  color: #416f8c;
  transition: 0.25s; }
  a:hover {
    cursor: pointer;
    color: #b7d9ef; }

h, h2, h3, h4 {
  color: #416f8c;
  margin-bottom: 20px; }
  h2 {
    margin: 20px;
    font-size: 50px; }
  h3 {
    font-size: 30px; }
  h4 {
    font-size: 20px; }

.row, .row-center {
  display: flex;
  flex-direction: row;
  justify-content: center; }
  .row-center {
    align-items: center; }

.col-1 {
  flex: 1; }

.col-2 {
  flex: 2; }

.col-3 {
  flex: 3; }

.col-4 {
  flex: 4; }

.col-5 {
  flex: 5; }

.col-6 {
  flex: 6; }

.col-7 {
  flex: 7; }

.col-8 {
  flex: 8; }

.col-9 {
  flex: 9; }

table.center {
  margin: auto; }

table tr {
  line-height: 1.5;
  font-size: 14px; }
  table tr td {
    vertical-align: top;
    padding: 2px 5px; }
    table tr td.pr-5 {
      padding-right: 50px; }

.alert {
  border-radius: 10px;
  box-shadow: 4px 5px 15px -5px rgba(0, 0, 0, 0.32);
  padding: 1rem;
  margin: 20px 0;
  width: 300px; }
  .alert-info {
    display: inline-block;
    width: 100%; }
  .alert.error {
    border: 1px solid #e8b0b4;
    background-color: #ffd9db;
    color: #963e46; }
  .alert.warning {
    border: 1px solid #f0d7b4;
    background-color: #fff0d1;
    color: #d1a03b; }

.true {
  color: #3e873b; }

.false {
  color: #963e46; }

.hero-container, #about, #about-ind, #do, #do-ind, #values, #values-ind, #projects, #projects-ind, #dialog, #values .card, #values-ind .card, #footer .company, #verify-pdf .verify-container {
  display: flex;
  justify-content: center;
  align-items: center; }

.hero-container, #about, #about-ind, #do, #do-ind, #values, #values-ind, #projects, #projects-ind, #dialog {
  height: 100vh;
  width: 100vw; }

#contact .contact-container form button, #contact-ind .contact-container form button, #verify-pdf .contact-container form button, #verify-pdf .verify-container .input-file, #dialog .dialog-content .toggle-pdf {
  background-color: #416f8c;
  border: solid 1px #416f8c;
  color: #fff;
  border-radius: 8px;
  padding: 10px;
  transition: 0.2s; }

#contact .contact-container form button:hover, #contact-ind .contact-container form button:hover, #verify-pdf .contact-container form button:hover, #verify-pdf .verify-container .input-file:hover, #dialog .dialog-content .toggle-pdf:hover {
  cursor: pointer;
  background-color: #b7d9ef;
  border: solid 1px #b7d9ef; }

/* Navtop */
.navtop {
  background-color: rgba(255, 255, 255, 0.5);
  position: fixed;
  top: 0;
  width: 100vw;
  height: 65px;
  padding: 1.5rem 3rem;
  padding-left: 0;
  z-index: 10; }
  .navtop .menu {
    display: flex;
    margin-left: 15vw;
    float: left; }
    .navtop .menu li {
      margin: 0 1vw;
      color: #416f8c; }
      .navtop .menu li:first-child {
        margin-left: 0; }
  .navtop .lang-option {
    float: right;
    padding: 0 7vw; }

/* Hero */
.hero-container .text-container {
  width: 60vw;
  padding: 0 15vw;
  text-align: justify;
  margin-top: -50px; }
  .hero-container .text-container .title {
    display: flex;
    margin-bottom: 20px; }
    .hero-container .text-container .title .logo {
      width: 100px;
      max-height: 108px; }
    .hero-container .text-container .title h2 {
      margin: 20px; }
  .hero-container .text-container p {
    max-width: 700px;
    letter-spacing: 2px;
    line-height: 1.7; }

.hero-container .image-container {
  width: 40vw; }
  .hero-container .image-container .hero-image {
    width: 25vw; }

/* About Section*/
#about, #about-ind {
  transition: 0.5s; }
  #about .image-container, #about-ind .image-container {
    margin-right: 100px; }
    #about .image-container .image, #about-ind .image-container .image {
      width: 15vw; }
  #about .text-container, #about-ind .text-container {
    max-width: 600px;
    padding: 0;
    text-align: justify; }
    #about .text-container p:last-child, #about-ind .text-container p:last-child {
      text-align: center; }
    #about .text-container hr, #about-ind .text-container hr {
      border: solid 1px #b7d9ef;
      max-width: 400px;
      margin: 0 auto; }
    #about .text-container .certification, #about-ind .text-container .certification {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px; }
      #about .text-container .certification img, #about-ind .text-container .certification img {
        margin: 5px 30px; }
        #about .text-container .certification img.small, #about-ind .text-container .certification img.small {
          width: 100px; }
        #about .text-container .certification img.medium, #about-ind .text-container .certification img.medium {
          width: 150px; }
      #about .text-container .certification span, #about-ind .text-container .certification span {
        display: inline-block;
        color: #416f8c;
        letter-spacing: 3px;
        font-size: 13px; }

/* Do Section*/
#do, #do-ind {
  flex-direction: column; }
  #do h3, #do-ind h3 {
    text-align: center;
    margin-bottom: 40px; }
  #do .card, #do-ind .card {
    width: 290px;
    text-align: center;
    margin: 2vh 4vw; }
    #do .card .title, #do-ind .card .title {
      font-size: 1.3vw;
      margin-bottom: 10px; }
    #do .card .icon, #do-ind .card .icon {
      width: 3vw;
      margin-bottom: 20px;
      transition: 0.3s; }
      #do .card .icon.larger, #do-ind .card .icon.larger {
        width: 4vw; }
    #do .card:hover .icon, #do-ind .card:hover .icon {
      transform: scale(1.3); }
    #do .card h4, #do-ind .card h4 {
      color: #666;
      font-size: 22px;
      font-weight: 400; }
    #do .card p, #do-ind .card p {
      margin-top: 10px;
      color: #ababab; }

/* Values Section*/
#values, #values-ind {
  flex-direction: column; }
  #values .card, #values-ind .card {
    flex-direction: column;
    width: 11vw;
    height: 20vw;
    border-radius: 10px;
    box-shadow: 4px 5px 15px -5px rgba(0, 0, 0, 0.32);
    margin: 12vh 2vw;
    text-align: center;
    transition: 0.5s; }
    #values .card i, #values-ind .card i {
      font-size: 3vw;
      color: #416f8c; }
    #values .card span, #values-ind .card span {
      display: block;
      font-size: 1.5vw;
      color: #ababab; }
      #values .card span strong, #values-ind .card span strong {
        font-size: 2vw;
        color: #416f8c; }
    #values .card:hover, #values-ind .card:hover {
      transform: scale(1.2); }
  #values h3, #values-ind h3 {
    font-size: 2.3vw;
    text-align: center; }

#values-ind .card span:last-child {
  font-size: 1vw;
  line-height: 1.5;
  letter-spacing: 1px; }

/* Projects Section */
#projects, #projects-ind {
  flex-direction: column; }
  #projects .card, #projects-ind .card {
    width: calc(100vw/5);
    margin-top: 10px;
    height: 67vh;
    border: solid 1px #f2f2f2; }
    #projects .card img, #projects-ind .card img {
      width: 19.9vw;
      margin-bottom: 6vh; }
    #projects .card .text, #projects-ind .card .text {
      text-align: center;
      margin: 0 20px; }
      #projects .card .text h4, #projects-ind .card .text h4 {
        font-size: 22px; }
      #projects .card .text p, #projects-ind .card .text p {
        margin: 10px 0; }

/* Contact */
#contact, #contact-ind, #verify-pdf {
  width: 100vw;
  height: 100vh;
  overflow: auto; }
  #contact .contact-container, #contact-ind .contact-container, #verify-pdf .contact-container {
    padding-top: 15vh;
    text-align: center; }
    #contact .contact-container .subtitle, #contact-ind .contact-container .subtitle, #verify-pdf .contact-container .subtitle {
      display: flex;
      justify-content: center; }
      #contact .contact-container .subtitle hr, #contact-ind .contact-container .subtitle hr, #verify-pdf .contact-container .subtitle hr {
        width: 2vw;
        border: solid 1px #83afce;
        background-color: #83afce;
        margin: 8px 10px; }
      #contact .contact-container .subtitle span, #contact-ind .contact-container .subtitle span, #verify-pdf .contact-container .subtitle span {
        font-size: 12px;
        color: #416f8c; }
    #contact .contact-container form, #contact-ind .contact-container form, #verify-pdf .contact-container form {
      margin: auto;
      width: 40vw; }
      #contact .contact-container form input, #contact .contact-container form textarea, #contact-ind .contact-container form input, #contact-ind .contact-container form textarea, #verify-pdf .contact-container form input, #verify-pdf .contact-container form textarea {
        width: 100%;
        border-radius: 8px;
        border: solid 1px #416f8c;
        margin: 2vh;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
        transition: 0.2s; }
        #contact .contact-container form input:focus, #contact .contact-container form input:hover, #contact .contact-container form textarea:focus, #contact .contact-container form textarea:hover, #contact-ind .contact-container form input:focus, #contact-ind .contact-container form input:hover, #contact-ind .contact-container form textarea:focus, #contact-ind .contact-container form textarea:hover, #verify-pdf .contact-container form input:focus, #verify-pdf .contact-container form input:hover, #verify-pdf .contact-container form textarea:focus, #verify-pdf .contact-container form textarea:hover {
          outline: none;
          border: solid 1px #b7d9ef; }
      #contact .contact-container form textarea, #contact-ind .contact-container form textarea, #verify-pdf .contact-container form textarea {
        height: 100px; }
      #contact .contact-container form button, #contact-ind .contact-container form button, #verify-pdf .contact-container form button {
        width: 100%;
        margin: 2vh;
        font-family: 'Open Sans', sans-serif; }

#footer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin-top: 10vh;
  padding: 3rem;
  background-color: #e6e6e6;
  color: #666;
  padding: 3rem 1rem; }
  #footer .company {
    width: 25vw;
    margin: 0 3vw; }
    #footer .company img {
      width: 100px;
      height: calc(108/100*width);
      margin-right: 20px; }
    #footer .company .info span {
      display: inline-block;
      width: 100%;
      font-size: 13px; }
  #footer .menu {
    margin: 0 4vw;
    font-size: 13px; }
    #footer .menu-title {
      letter-spacing: 3px; }
    #footer .menu ul li {
      margin: 5px 0; }

#captcha,
#captcha-ind {
  margin: 0 2vh; }

#pdf-view {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll; }
  #pdf-view .navtop {
    position: relative; }
  #pdf-view .file-container {
    display: flex; }
    #pdf-view .file-container iframe {
      width: 70vw;
      height: 100vh; }
    #pdf-view .file-container .side-menu {
      width: 30vw;
      padding: 2rem; }
      #pdf-view .file-container .side-menu h4 {
        text-align: center; }
      #pdf-view .file-container .side-menu a {
        display: inline-block;
        width: 100%;
        min-height: 60px;
        border-radius: 10px;
        box-shadow: 6px 5px 6px -5px rgba(0, 0, 0, 0.32);
        margin: 10px 0;
        padding: 20px;
        color: #666; }
        #pdf-view .file-container .side-menu a:hover {
          transform: scale(1.1); }
  #pdf-view #footer {
    margin-top: 0; }

#verify-pdf .verify-container {
  flex-direction: column;
  margin-top: 33vh; }
  #verify-pdf .verify-container .input-file {
    display: inline-block;
    height: 60px;
    width: 400px;
    padding: 15px;
    text-align: center;
    font-size: 18px; }
  #verify-pdf .verify-container input[type="file"] {
    display: none; }
  #verify-pdf .verify-container #is-pdf {
    display: none;
    width: 400px; }

#verify-pdf #footer {
  position: absolute;
  bottom: 0; }

#dialog {
  display: none;
  padding: 20px 0;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  transition: 0.25s; }
  #dialog .dialog-content {
    position: relative;
    overflow: auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 2rem 3rem;
    width: 900px;
    height: 100%; }
    #dialog .dialog-content .alert {
      width: 100%; }
    #dialog .dialog-content .card {
      border-radius: 10px;
      box-shadow: 4px 5px 15px -5px rgba(0, 0, 0, 0.32);
      padding: 1rem;
      margin: 20px 0; }
      #dialog .dialog-content .card .card-info, #dialog .dialog-content .card .card-info-title {
        display: inline-block;
        font-size: 14px;
        margin: 10px 0; }
        #dialog .dialog-content .card .card-info-title {
          margin-right: 15px; }
    #dialog .dialog-content .toggle-pdf {
      position: relative;
      top: 0;
      height: 40px;
      width: 150px;
      margin: 10px 0; }
    #dialog .dialog-content .close-button {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 20px;
      background-color: #fff;
      color: #ababab;
      border: none;
      transition: 0.2s; }
      #dialog .dialog-content .close-button:hover {
        cursor: pointer;
        opacity: 0.7; }
    #dialog .dialog-content .certificate-info {
      display: inline-block;
      width: 100%;
      font-size: 14px;
      line-height: 2; }
    #dialog .dialog-content .file-viewer {
      position: relative;
      width: 100%;
      height: 700px;
      margin: 20px 0; }
    #dialog .dialog-content .row, #dialog .dialog-content .row-center {
      margin: 10px 0; }

@media (max-width: 1200px) {
  h3 {
    font-size: 25px; }
  .hero-container .text-container .title h2 {
    font-size: 35px; }
  .hero-container .text-container p {
    font-size: 12px; }
  #about .image-container, #about-ind .image-container {
    margin-left: 0;
    margin-right: 50px; }
    #about .image-container .image, #about-ind .image-container .image {
      width: 200px; }
  #do .card, #do-ind .card {
    margin: 10px 20px; }
    #do .card .title, #do-ind .card .title {
      font-size: 16px; } }

@media (max-width: 1000px) {
  body {
    overflow: auto; }
  .hero.container, #about, #do, #values, #projects, #contact,
  #about-ind, #do-ind, #values-ind, #projects-ind, #contact-ind {
    height: auto; }
  .navtop {
    padding-right: 0; }
    .navtop .lang-option {
      padding-right: 20px; }
  .hero-container .text-container .title .logo {
    max-width: 55px;
    max-height: 54px; }
  .hero-container .text-container .title h2 {
    margin: 0;
    margin-left: 10px;
    font-size: 35px; }
  .hero-container .text-container p {
    font-size: 12px; }
  .hero-container .image-container .hero-image {
    width: 250px; }
  #about, #about-ind {
    padding: 3rem 5rem; }
    #about .image-container .image, #about-ind .image-container .image {
      width: 20vw; }
    #about .text-container p,
    #about-ind .text-container p {
      font-size: 12px; }
  #do, #do-ind {
    padding: 4rem; }
    #do .card, #do-ind .card {
      width: 25vw; }
      #do .card .icon, #do-ind .card .icon {
        width: 30px; }
        #do .card .icon.larger, #do-ind .card .icon.larger {
          width: 50px; }
  #values h3, #values-ind h3 {
    font-size: 35px; }
  #projects .row-center, #projects-ind .row-center {
    display: block; }
  #projects .card, #projects-ind .card {
    width: 100%;
    display: flex;
    margin: 0;
    height: auto; }
    #projects .card img, #projects-ind .card img {
      width: 50vw;
      margin: 0; }
    #projects .card .text, #projects-ind .card .text {
      padding-top: 6vh;
      width: 50%; }
  #footer .company img {
    width: 80px; }
  #pdf-view .navtop {
    display: none; }
  #pdf-view #footer {
    display: none; }
  #pdf-view .file-container iframe {
    width: 100vw; }
  #pdf-view .file-container .side-menu {
    display: none; }
  #dialog .dialog-content {
    width: 80%; }
    #dialog .dialog-content .row, #dialog .dialog-content .row-center {
      display: block; }
    #dialog .dialog-content table.center {
      margin: 0; } }

@media (max-width: 800px) {
  #about .image-container, #about-ind .image-container {
    display: none; }
  #contact .contact-container, #contact-ind .contact-container {
    padding-top: 5rem;
    text-align: center; }
    #contact .contact-container form, #contact-ind .contact-container form {
      padding: 0 2rem;
      width: 100vw; }
      #contact .contact-container form input, #contact .contact-container form textarea, #contact .contact-container form button, #contact-ind .contact-container form input, #contact-ind .contact-container form textarea, #contact-ind .contact-container form button {
        margin: 2vh 0; }
  #footer .company {
    display: block;
    text-align: center; }
  #captcha,
  #captcha-ind {
    margin: 0; } }

@media (max-width: 600px) {
  .navtop .menu {
    display: none; }
  .navtop .lang-option {
    font-size: 12px; }
  .hero-container .image-container {
    display: none; }
  .hero-container .text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    flex-direction: column;
    padding: 0 3rem; }
    .hero-container .text-container p {
      text-align: left; }
  #about h3,
  #about-ind h3 {
    text-align: center; }
  #about .text-container p,
  #about-ind .text-container p {
    font-size: 14px; }
  #about .text-container .icon-container i,
  #about-ind .text-container .icon-container i {
    margin-top: 30px; }
  #about .text-container .row, #about .text-container .row-center,
  #about-ind .text-container .row,
  #about-ind .text-container .row-center {
    flex-direction: column; }
  #do, #do-ind {
    padding: 3rem; }
    #do .row-center,
    #do-ind .row-center {
      display: block; }
    #do .card, #do-ind .card {
      width: 100%;
      margin: 3vh 0; }
  #values, #values-ind {
    padding: 2rem 0; }
    #values h3, #values-ind h3 {
      font-size: 30px; }
    #values .row-center,
    #values-ind .row-center {
      display: block;
      width: 90%; }
    #values .card, #values-ind .card {
      width: 100%;
      height: 80px;
      margin: 30px 0;
      padding: 1rem;
      flex-direction: row; }
      #values .card i, #values-ind .card i {
        font-size: 30px;
        margin: 7px;
        float: left; }
      #values .card span, #values-ind .card span {
        font-size: 25px; }
        #values .card span strong, #values-ind .card span strong {
          font-size: 30px; }
  #values-ind .card span:last-child {
    display: none; }
  #projects .card, #projects-ind .card {
    display: block; }
    #projects .card img, #projects-ind .card img {
      display: none; }
    #projects .card .text, #projects-ind .card .text {
      width: 100%;
      margin: 1rem auto;
      padding: 0 3rem; }
      #projects .card .text h4, #projects-ind .card .text h4 {
        font-size: 18px; }
  #contact .contact-container, #contact-ind .contact-container {
    padding-top: 5vh; }
  #footer {
    height: auto;
    text-align: center;
    padding: 1rem; }
    #footer .row, #footer .row-center {
      display: block; }
    #footer .company, #footer .menu {
      width: 100%;
      margin: 20px 0; }
    #footer .company {
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc; }
  #verify-pdf .verify-container .input-file {
    width: 200px;
    font-size: 14px;
    height: 40px;
    padding: 8px; }
  #verify-pdf .verify-container #is-pdf {
    font-size: 13px;
    width: 200px; }
  #verify-pdf #footer {
    position: relative; }
  #dialog .dialog-content {
    width: 90%;
    padding: 1rem; } }

@media (max-height: 655px) {
  #verify-pdf #footer {
    position: relative; } }

@media (max-height: 550px) {
  body {
    overflow: auto; } }