/* css untuk tampilan mobile, dekstip, laptop, dan lain-lain */
@media (max-width: 1000px) {

  /*Sembunyikan Mobile*/
  .hidden {
    visibility: hidden;
    display: none;
    margin-bottom: 0px;
    margin-top: 0px;
    height: 0px;
  }
  
}
  /*Sembunyikan Dekstop*/
@media (min-width: 1001px) {
  .hidden-dekstop {
    visibility: hidden;
    margin-bottom: 0px;
    margin-top: 0px;
    height: 0px;
    display: none;
  }

}



/*Tampilan Mobile*/
@media (min-width: 320px) {
  .carousel-item {
    height: 500px;
  }

  .logo {
    height: 50px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:170px; 
      width: 100%; 
      margin-bottom: 30px;
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:250px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 50px;
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:250px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 50px;
  }

  .g-recaptcha > div {
    width: 100% !important;
    }

  .g-recaptcha iframe {
    width: 100% ;
    }

}


/*Tampilan Mobile*/
@media (min-width: 320px) {
  .carousel-item {
    height: 500px;
  }

  .logo {
    height: 50px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:190px; 
      width: 100%; 
      margin-bottom: 30px;
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:250px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 50px;
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:250px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 50px;
  }

  .g-recaptcha > div {
    width: 100% !important;
    }

  .g-recaptcha iframe {
    width: 100% ;
    }

}



/*Tampilan Mobile*/
@media (min-width: 375px) {
  .carousel-item {
    height: 500px;
  }

  .logo {
    height: 60px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:200px; 
      width: 100%; 
      margin-bottom: 30px;
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:250px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 50px;
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:250px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 50px;
  }

  .g-recaptcha > div {
    width: 100% !important;
    }

  .g-recaptcha iframe {
    width: 100% ;
    }

}


/*Tampilan Mobile*/
@media (min-width: 414px) {
  .carousel-item {
    height: 500px;
  }

  .logo {
    height: 60px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:230px; 
      width: 100%; 
      margin-bottom: 30px;
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:300px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 50px;
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:300px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 50px;
  }

  .g-recaptcha > div {
    width: 100%  ;
    }

  .g-recaptcha iframe {
    width: 100% ;
    }

}

/*Tampilan Mobile*/
@media (min-width: 568px) {
  .carousel-item {
    height: 500px;
  }

  .logo {
    height: 60px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:310px; 
      width: 100%; 
      margin-bottom: 30px;
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:350px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 50px;
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:350px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 50px;
  }

  .g-recaptcha > div {
    width: 100%  ;
    }

  .g-recaptcha iframe {
    width: 100% ;
    }

}


/*Tampilan Mobile*/
@media (min-width: 667px) {
  .carousel-item {
    height: 500px;
  }

  .logo {
    height: 60px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height: 310px;
      width: 100%; 
      margin-bottom: 30px;
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:500px; 
      width: 100%;
      max-width: 1000px;
      margin-top: 50px; 
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:500px; 
      width: 100%;
      max-width: 1000px;
      margin-top: 50px; 
  }

  .g-recaptcha > div {
    width: 100%  ;
    }

  .g-recaptcha iframe {
    width: 100%  ;
    }

}



/*Tampilan Mobile*/
@media (min-width: 768px) {
  .carousel-item {
    height: 500px;
  }

  .logo {
    height: 80px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:420px; 
      width: 100%; 
      margin-bottom: 30px;
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:600px; 
      width: 100%;
      max-width: 1000px;
      margin-top: 50px; 
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:600px; 
      width: 100%;
      max-width: 1000px;
      margin-top: 50px; 
  }

  .g-recaptcha > div {
    width: 100%  ;
    }

  .g-recaptcha iframe {
    width: 100%  ;
    }

}


/*Tampilan tablet vertikal*/
@media (min-width: 1001px) {
  .carousel-item {
    height: 500px;
  }

  .logo {
    height: 80px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:380px; 
      width: 100%; 
      margin-bottom: 30px;
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:450px; 
      width: 100%;
      max-width: 1000px;
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:450px; 
      width: 100%;
      max-width: 1000px;
  }

  .g-recaptcha > div {
    width: auto  ;
    }

  .g-recaptcha iframe {
    width: auto  ;
    }

}

/*Tampilan tablet horizontal dan laptop kecil*/
@media (min-width: 1024px) {
  .carousel-item {
    height: 500px;
  }

  .logo {
    height: 80px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:380px; 
      width: 100%; 
      margin-top:90px;
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:450px; 
      width: 100%;
      max-width: 1000px;
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:450px; 
      width: 100%;
      max-width: 1000px;
  }

  .g-recaptcha > div {
    width: auto  ;
    }

  .g-recaptcha iframe {
    width: auto  ;
    }
  
}

/*tampilan laptop dan dekstop*/
@media (min-width: 1280px) {
  .carousel-item {
    height: 400px;
  }

  .logo {
    height: 80px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:450px; 
      width: 100%; 
      max-width: 900px;
      margin-top:90px;
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:600px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 150px;
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:600px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 150px;
  }

  .g-recaptcha > div {
    width: auto  ;
    }

  .g-recaptcha iframe {
    width: auto  ;
    }
}

/*tampilan laptop dan dekstop*/
@media (min-width: 1440px) {
  .carousel-item {
    height: 400px;
  }

  .logo {
    height: 80px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:500px; 
      width: 100%; 
      max-width: 800px;
      margin-top:90px;
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:600px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 150px;
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:600px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 150px;
  }
  
  .g-recaptcha > div {
    width: auto  ;
    }

  .g-recaptcha iframe {
    width: auto  ;
    }

}

/*tampilan laptop dan dekstop*/
@media (min-width: 2560px) {
  .carousel-item {
    height: 400px;
  }

  .logo {
    height: 80px;
}

  .bg-gambar1 {
    background-image: url(/img/animasi-22c.gif) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:600px; 
      width: 100%;
      max-width: 1000px;
      margin-top: 90px; 
  }

  .bg-gambar2 {
    background-image: url(/img/solution3.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:600px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 150px;
  }

  .bg-gambar3 {
    background-image: url(/img/solution4.png) !important; 
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; 
      display: block; 
      height:600px; 
      width: 100%;
      max-width: 1000px;
      margin-bottom: 150px;
  }
  
  
  .g-recaptcha > div {
    width: auto  ;
    }

  .g-recaptcha iframe {
    width: auto ;
    }

}
/* SELESAI css untuk tampilan mobile, dekstip, laptop, dan lain-lain */



/* smooth */
/* html {
  scroll-behavior: smooth;
} */
/* SELESAI smooth */

/* untuk font */
@font-face {
  font-family: Gotham-book;
  src: url(../font/HomepageBaukasten-Book.ttf);
}

@font-face {
  font-family: Gotham-bold;
  src: url(../font/HomepageBaukasten-Bold.ttf);
}
/* SELESAI font */


h1, h2, h3, h4, h5, h6 {
  font-family: Gotham-bold !important;
}

p {
  text-align: justify;
  font-family: Gotham-book !important;
}

a {
  font-family: Gotham-book !important;
}


.Gotham-bold {
  font-family: Gotham-bold !important;
}

.Gotham-book {
  font-family: Gotham-book !important;
}

.putih a {
  color: #ffc107 !important;
  text-decoration: underline !important;
}

.putih a:hover {
  color: #f8f9fa !important;
  text-decoration: none !important;
}



.backgroundBiruTua {
  background-color: #001743 ;
}

.backgroundNavbar {
  background-image: url(/img/background.jpg) !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

.bg-navbar {
  background-image: url(/img/background.jpg) !important; 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; 
  display: block;
}

.bg-navbar2{
  background-image: url(/img/background.jpg) !important; 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; 
  display: block;
}


.bg-who {
  background-image: url(/img/bacground-who2.jpg) !important; 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; 
  display: block;
}

.bg-who2 {
background-image: url(/img/bacground-who3.jpg) !important; 
background-size: cover;
background-repeat: no-repeat;
background-position: center; 
display: block;
}

.bg-solution {
background-image: url(/img/bgSolution2.jpg) !important; 
background-size: cover; 
background-repeat: no-repeat; 
background-position: center;
}

.bg-service {
background-image: url(/img/background-putih.jpg) !important; 
background-size: cover;
background-repeat: no-repeat;
background-position: center; 
display: block;
}

.bg-partner {
background-image: url(/img/background2.jpg) !important; 
background-size: cover;
background-repeat: no-repeat;
background-position: center; 
display: block;
}


.bg-social {
background-image: url(/img/background-putih2.jpg) !important; 
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.bg-contac {
background-image: url(/img/background2.jpg) !important; 
background-size: cover;
background-repeat: no-repeat;
background-position: center; 
display: block;
}



.btn-outline-warning {
  border-radius: 50px !important;
} 

.btn-info {
  border-radius: 50px;
  
}

.btn-outline-danger {
  border-radius: 50px;

}

.mobile a img{ 
text-align: center;
max-width: 100% !important;
height: auto !important;
}


#contact a {
  color: #f8f9fa !important;
}

#contact a:hover {
  color: #c7c7c7 !important;
}


.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}