/* ------------------------------- HOME --------------------------- */
/* ------------------------------- HOME --------------------------- */
/* ------------------------------- HOME --------------------------- */


 @media (max-width: 992px) { 
  
  .jasa .col-lg-5 h1 {
   margin-top: 15vh;
  }
  
    .bg-landing img {
  transform: translateX(300px);
}

}
/* Large devices (tablets, less than 768px) */
 @media (max-width: 768px) { 
   /* iPad */
  /* --------------- Navbar --------------- */
  .navbar-toggler-icon {
    background-image: url("../img/menu.svg") !important;
    width: 25px;
  }

  .navbar .navbar-brand img {
    margin-left: 10px;
    width: 100px;
  }
  
  .navbar {
    margin-top: 2rem;
  }

  /* --------------- Content 1 --------------- */

  .page-1-text h1 {
    text-align: center;
    max-width: 100%;
  }

  .page-1-text .sub-text {
  font-size: 2rem;
}

  .page-1-hero img {
    z-index: -1;
  }

  .page-1.container {
    text-align: center;
  }
  
  .bg-landing img {
  transform: translateX(400px);
}

  /* --------------- Content 2 --------------- */

  
  #p2 {
    margin-top: 20vh;
  }

  .page-2 {
    margin-top: 15vh;
  }

  /* ------------------- Content 3 ------------------- */

  .apa-saja .col-sm-5 button {
    margin-right: 0;
  }

  /* ---------------- Content 4 ---------------- */

  .page-2 .bg2 .jasa-img {
    height: 40vh;
  }
  
  .page-2 .bg2 .jasa {
    margin-top: 10vh;
  }

  .jasa .img-jasa img {
    width: 100%;
    margin-top: 5vh;
  }

  .jasa .col-lg-5 .carousel-inner {
    padding: 2rem 2rem;
	height: auto;
  }
  
  /* --------------- Content 5 --------------- */

  .cara-kerja {
    margin-top: -5vh;
    margin-bottom: 10vh;
  }

  .cara-kerja .col-sm-6 img {
    max-width: 100%;
    margin-top: 15vh;
  }

  .cara-kerja .col-sm-5 button {
    margin-right: 0;
  }

  /* --------------------- Content 6  --------------------- */
  
  .kontak form > button {
    margin: 0;
    margin-top: 5rem;
  }
}

/* Small devices (landscape phones, less than 747px) */
@media (max-width: 747px) {
   
  .bg img {
    visibility: hidden;
  }
  
  .bg-landing img {
    position: initial; 
	height: 250px;
	top: auto;
    right: auto;
    z-index: -1;
	transform: none;
  }
  
  .page-1-hero {
    visibility: hidden;
  }

  /* Content 3 */

  .apa-saja .col-sm-3 h2 {
    margin-left: 0rem;
    position: relative;
  }

  /* Content 4 */

  .page-2 .bg2 .jasa-img {
    height: 80vh;
    margin-top: 0vh;
  }

  .page-2 .bg2 .jasa {
    margin-top: 10vh;
  }
}

/*  Extra small devices (portrait phones, less than 576px) */
@media (max-width: 576px) { 

  /* --------------- Content 1 --------------- */
  .page-1-text h1 {
   font-size: 2rem;
   margin-top: 1rem;
  }

  .page-1.container {
    padding: 3rem;
  }

  .page-1-hero img {
    visibility: visible;
    width: 80%;
    left: 0;
    margin-bottom: 2rem;
  }

  /*.btn1 {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
  }*/

  /* --------------------- Content 2 --------------------- */

  #p2 {
    margin-top: 10vh;
  }

  .page-2 {
    margin-top: 30vh;
  }

  .page-2 .page-2-text h1 {
    font-size: 25px;
    margin-top: -10vh;
  }

  .row .col-sm-2 h1 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .row .col-sm-2 p {
    font-size: 1.5rem;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 5rem;
  }

  /* ------------------- Content 3 ------------------- */

  .apa-saja {
    margin-top: 5vh;
  }

  .apa-saja .col-sm-5 h1 {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 2rem;
    text-align: center !important;
  }

  .apa-saja .col-sm-5 p {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    text-align: justify !important;
    margin-bottom: 2rem;
  }

  .apa-saja .col-sm-5 button {
    left: 0;
  }

  .apa-saja .col-sm-3 {
    text-align: center;
    margin-top: 10vh;
  }

  .apa-saja .col-sm-3 h2 {
    font-size: 2rem;
  }

  .apa-saja .col-sm-3 p {
    font-size: 1.5rem;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 5rem;
  }

  .apa-saja .jasa2 {
    margin-top: -0.5rem;
  }

  /* -------------------- Content 4 -------------------- */

  .jasa .row .img-jasa {
    margin-top: 0vh;
  }
  
  .jasa {
    margin-top: 0;
    margin-bottom: 5vh;
  }
  .jasa .col-lg-5 .carousel .carousel-control-prev {
  display: none;
  }

  .jasa .col-lg-5 .carousel .carousel-control-next {
    display: none;
  }

  /* ---------------- Content 5 ---------------- */

  .cara-kerja {
    text-align: center;
    margin-top: 0;
  }
  
  .cara-kerja h1 {
	margin-top: 15vh;
  }
  
  
  .cara-kerja .row .col-sm-6 img {
    margin-top: 15vh;
    width: 80%;
  }

  .cara-kerja p {
    text-align: justify;
    width: 90%;
    margin: 0 auto;
  }

  .cara-kerja .first {
    order: 2;
    margin-top: -10vh;
  }

  .cara-kerja .col-sm-5 button {
    left: -12.5%;
  }

  /* ------------------------- Content 6 -------------------------*/

  .kontak p {
    width: 100%;
  }

  .kontak-icon {
    margin-top: 50px;
  }
  
  /* ----------------- Tentang ------------------ */
  .page-4 .col-sm-6 h1 {
    text-align: center;
    margin-bottom: 3rem;
  }

  .page-4 .col-sm-6 p {
    text-align: justify;
    width: 95%;
    margin: 0 auto;
  }

  .page-4 .col-sm-5 {
    margin-top: 1rem;
  }

  .page-4 .col-sm-5 .tentang-kontak {
    margin-top: 0px;
    width: 95%;
    margin: 0 auto;
  }

  .semi-footer p {
    margin: 10px;
  }
}

/*  Extra small devices (portrait phones, less than 385px) */
@media (max-width: 385px) {

  /* --------------- Content 1 --------------- */
  .page-1-text h1 {
   font-size: 1.8rem;
   margin-bottom: 1rem;
  }

  /* ------------------- Content 3 ------------------- */
  

  .page-2 .bg2 .row .apa-saja .col-sm-3 h2 {
    margin-bottom: 1rem;
  }

  /* ------------------------- Content 6 -------------------------*/

  .kontak p {
    width: 100%;
  }

  .kontak form {
    width: 90%;
  }

  .kontak-icon {
    margin-top: 2.5rem;
  }
}

/*  Extra small devices (portrait phones, less than 320px) */
@media (max-width: 320px){
   /* --------------- Content 1 --------------- */
  .page-1-text h1 {
   font-size: 1.6rem;
   margin-bottom: 1rem;
  }

  .page-1 .col-sm-5 img {
    width: 80%;
    left: 5%;
  }

  /* ------------------- Content 3 ------------------- */
  
  .apa-saja h1 {
    font-size: 1.6rem;
  }

  .apa-saja p {
    font-size: 1.2rem;
  }

  .apa-saja h2 {
    font-size: 1.5rem;
  }

  /* ------------------------- Content 5 -------------------------*/

  .cara-kerja .col-sm-5 h1 {
    font-size: 1.8rem;
  }

  /* ------------------------- SemiFooter ------------------------- */

  .semi-footer p {
    font-size: 0.8rem;
  }

}

/* ------------------------------- LAYANAN --------------------------- */
/* ------------------------------- LAYANAN --------------------------- */
/* ------------------------------- LAYANAN --------------------------- */

/* Large devices (tablets, less than 768px) */
@media (max-width: 768px) {
  #p2-2 {
    margin-top: 10vh;
  }

  .layanan .content1 {
    margin-top: 5rem;
  }
}

/* Small devices (landscape phones, less than 767px) */
@media (max-width: 747px) {

}

/*  Extra small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {

  .layanan .content1 {
    padding: 0 2rem;
    text-align: justify;
  }

  .layanan .content1 .col-md-6 h1 {
    margin-bottom: 2rem;
  }

  .layanan .content1 .row .col-sm-4 img {
    margin-top: 10vh;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .layanan .content1 .row .col-sm-6 p {
    text-align: justify;
  }

  .layanan .content1 .row .col-sm-6 button {
    left: 0;
    margin-top: 5vh;
  }

  /* -------------------------------Page 2 Layanan --------------------------- */

  #p2-2 {
  margin-top: 20vh;
  }

  .list-icon .col-sm-3 {
    width: 85%;
    margin: 0 auto;
  }

  .layanan .content2 .list-icon .col-lg-3 h2 {
    font-size: 2rem;
  }
}

/*  Extra small devices (portrait phones, less than 385px) */
@media (max-width: 385px) {
}

/*  Extra small devices (portrait phones, less than 320px) */
@media (max-width: 320px) {

}

/* ------------------------------- WORK --------------------------- */
/* ------------------------------- WORK --------------------------- */
/* ------------------------------- WORK --------------------------- */

/* Large devices (tablets, less than 768px) */
@media (max-width: 768px) {

  .work {
    /*margin-top: 10vh;*/
  }

  .work .content1 h1 {
    margin-bottom: 0;
	/*margin-top: 15vh;*/
  }

  .work .content1 .col-sm-4 img {
    width: 100%;
    margin-top: 0;
  }
  
  .work .content2-text h1 {
    margin-top: 15vh;
  }
  
  .work .content2 .next-to-top {
	display: none;
  }
}

/* Small devices (landscape phones, less than 767px) */
@media (max-width: 747px) {

  .work .content1 .col-sm-4 img {
    width: 100%;
    margin-top: 10vh;
  }

  .work .content1 .col-sm-6 h1 {
    margin-bottom: 1rem;
  }

  .work .content1 .col-sm-6 p {
    text-align: justify;
  }

  .work .content2 .content2-bg {
    height: 235vh;
  }
}

/*  Extra small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
  .work .content1 .col-sm-4 img {
    width: 90%;
    margin-top: 0vh;
    margin-bottom: 5vh;
  }

  .work .content1 .col-sm-6 img {
    width: 100%;
  }

  .work .content1 .col-sm-6 button {
    left: 0;
  }
}

/*  Extra small devices (portrait phones, less than 385px) */
@media (max-width: 385px) {
}

/*  Extra small devices (portrait phones, less than 320px) */
@media (max-width: 320px) {
}

/* ------------------------------- Secure --------------------------- */
/* ------------------------------- Secure --------------------------- */
/* ------------------------------- Secure --------------------------- */

/* Large devices (tablets, less than 768px) */
@media (max-width: 768px) {

  /* Content 1 */

  .secure button {
    width: 50%;
  }

  .secure h1 {
    font-size: 1.8rem;
  }

  .secure h2 {
    font-size: 1.6rem;
  }

  .secure {
    margin-top: 10vh;
  }

  .secure .content1 img {
    width: 100%;
    margin-top: 0;
  }

  /* Content 2 */

  .bg-secure {
    padding-top: 0vh;
    padding-bottom: 0vh;
  }

  .secure .content2 {
    margin-top: 0vh;
  }

  .secure .content2 .content2-icon .col-sm-1 img {
    width: 5rem;
  }

  .secure .content2 .content2-icon .col-sm-4 h2 {
    margin-top: 0;
  }

  /* Content 3 */

  #p4-3 {
    margin-top: 0vh;
  }

  .secure .content3 img {
    width: 100%;
    margin-top: 7.5vh;
  }

  .secure .content3 p {
    text-align: justify;
  }

  /* Content 4 */

  #p4-4 {
    margin-top: 20vh;
  }

  #content4-bg {
    padding-top: 0;
    padding-bottom: 0;
  }

  .secure .content4 img {
    width: 120%;
    margin-top: 5vh;
  }

  .secure .content4 p {
    text-align: justify;
  }

  .secure .content4 .col-sm-6 {
    margin-top: 0vh;
  }

  /* Content 5 */

  .secure .content5 {
    margin-top: -20vh;
  }

  .secure .content5 img {
    width: 100%;
    margin-top: 7.5vh;
  }

  .secure .content5 p {
    text-align: justify;
  }

  /* Content 6 */

  #content6-bg {
    padding-bottom: 0;
    padding-top: 0;
  }

  .secure .content6 .col-sm-6 {
    margin-top: 0vh;
  }

  .secure .content6 img {
    width: 100%;
    margin-top: -10vh;
  }

  .secure .content6 p {
    text-align: justify;
  }
}

/* Small devices (landscape phones, less than 767px) */
@media (max-width: 747px) {

}

/*  Extra small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {

  /* Content 1 */

  .secure {
    margin-top: 10vh;
  }

  .secure .content1 img {
    width: 80%;
    margin-bottom: 2rem;
  }

  .secure .content1 button {
    width: 50%;
  }

  .secure .content1 p {
    text-align: justify;
    margin-bottom: 1rem;
  }

  /* Content 2 */

  .secure .content2 .content2-icon {
    padding-top: 10vh;
    padding-bottom: 10vh;
  }

  .secure .content2 .content2-icon .col-sm-1 img {
    width: 5rem;
    margin-left: 5%;
  }

  .secure .content2 .content2-icon .col-sm-4 h2 {
    margin-left: 20%;
    margin-right: 5%;
    margin-bottom: 10%;
  }

  .secure .content2 .content2-icon .col-sm-4 p {
    margin-top: 1rem;
    font-size: 1.4rem;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
  }

  .break {
    margin-top: 0px;
  }

  /* Content 3 */

  #first {
    order: 2;
  }

  #second {
    order: 1;
  }

  .secure .content3 {
    padding-top: 10vh;
  }

  .secure .content3 img {
    width: 80%;
  }

  .secure .content3 p {
    width: 90%;
    margin: 0 auto;
    text-align: justify;
  }

  /* Content 4 */

  #content4-bg {
    padding-top: 0vh;
    padding-bottom: 0vh;
  }

  .secure .content4 img {
    width: 90%;
    margin-bottom: 3rem;
  }

  .secure .content4 p {
    width: 90%;
    margin: 0 auto;
    text-align: justify;
  }

  /* Content 5 */

  .secure .content5 img {
    width: 90%;
    margin-top: 10vh;
    margin-bottom: 15vh;
  }

  .secure .content5 p {
    width: 90%;
    margin: 0 auto;
    text-align: justify;
  }

  /* Content 6 */

  #content6-bg {
    padding-bottom: 0vh;
    padding-top: 0vh;
  }

  .secure .content6 {
    padding-top: 10vh;
    padding-bottom: 10vh;
  }

  .secure .content6 img {
    width: 90%;
    margin-bottom: 50px;
  }

  .secure .content6 p {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
  }
}

/*  Extra small devices (portrait phones, less than 385px) */
@media (max-width: 385px) {

  /* Content 2 */

  .secure .content2 .content2-icon .col-sm-4 h2 {
    margin-left: 25%;
  }
}

/*  Extra small devices (portrait phones, less than 320px) */
@media (max-width: 320px) {

}

/* --------------------------------- EXTRA! --------------------------------- */

@media (max-width: 576px) {

  .secure .content2-1 .content2-1-icon .col-sm-3 {
    margin-bottom: 20vh !important;
    width: 80% !important;
  }

  .secure .content2-1 .content2-1-icon .col-sm-3 img {
    margin-top: -7.5vh;
  }

  /* ---------------------------------- WA ---------------------------------- */

.i-kontak img {
  position: fixed;
  bottom: 3rem;
  right: 1rem;
  cursor: pointer;
  width: 45%;
  z-index: 2;
  transition: 0.3s;
}

.i-kontak img:hover {
  width: 50%;
}
}