@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Poetsen+One&display=swap');

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

body {
  background-color: #111;
  font-family: "Signika Negative", sans-serif, Arial;
  overscroll-behavior: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: white;
  /* overflow-y: hidden !important; */
}


.scrollposition {
  color: white;
  position: fixed;
  z-index: 1000;

  /* width: 100%;
  overflow-x: 0.5;
  display: flex; */

}

  /* BG PUTIH */
#smooth-content {
    overflow: visible;
    width: 100%;
    /* set a height because the contents are position: absolute, thus natively there's no height */
    /* height: 14700px; */
    /* height: 100vh; */

    background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;

}



/* .slides-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
} */

.slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}





.pull {
    width: 100vw;
    height: 50px;
    color: white;
    padding: 10px;
    text-align: center;
    background-color: rgb(85, 55, 16);
    }
  

.pullskrin {
    width: 100vw;
    position: relative;
    
    }

.plang {
  color: white;
  background-color: rgb(211, 176, 0);
}


/* NAV-BAR */
.menu-warna {
  margin-right: 20px;
  background: transparent;
  color: #ffffff;
  border-style: none;
}

#tampil1, #tampil2, #tampil3, #tampil4 {
  padding-top: 50px;
}

/* ===== MASTER LAYOUT ===== */

.lembar {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 5;
  }
  
  .obj01 {
  left: 0px;
  top: 0px;
  background-color: rgb(224, 131, 250);
  }
  
  .obj02 {
  right: 0px;
  background-color: rgb(79, 161, 35);
  }
  
  .obj03 {
  right: 0px;
  bottom: 0px;
  background-color: rgb(159, 68, 54);
  }
  
  .obj04 {
  left: 50%;
  top: 50%;
  background-color: rgb(92, 122, 198);
  }
  
  .obj05 {
  bottom: 0px;
  background-color: rgb(230, 53, 148);
  }
  
  .konten1 .obj06 {
  width: 50px;
  height: 50px;
  left: 50%;
  bottom: 0px;
  /* bottom: 0; */
  position: absolute;
  background-color: rgb(230, 186, 53);
  }


  /* NAVIGATION BAR */
  .menu-navigasi {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: #1e3b8a;
    /* padding: 10px;
    top: 0; */
  }

  .warnafont-putih {
    color: white;
  }

  /* TYPOGRAFI */
  .narasi {
    width: 100%;
  
  }
  
  .narasi .extra {
    font-family: "DM Serif Display", serif;
    font-weight:bold;
    font-size:clamp(32px, 25vw, 15rem);
    line-height: 1.2;
    /* color: rgb(226, 226, 226); */
    }
  
  
  .narasi h1 {
    font-family: "DM Serif Display", serif;
    font-weight:bold;
    font-size:clamp(32px, 6vw, 6rem);
    line-height: 1; 
    /* color: rgb(226, 226, 226); */
    }
  
  
  .narasi h2 {
    font-family: "DM Serif Display", serif;
    font-weight:bold;
    font-size:clamp(32px, 10vw, 3rem);
    line-height: 1.2;
    letter-spacing:1px;
    /* color: rgb(226, 226, 226); */
    }
    
    
    .narasi h3 {
    font-family: "DM Serif Display", serif;
    font-weight:bold;
    font-size:clamp(16px, 5vw, 1.5rem);
    line-height: 1.2;
    letter-spacing:1px;
    /* color: rgb(226, 226, 226); */
    }



  .tulis h6, .tulis h5, .tulis h4, .tulis h3, .tulis h2, .tulis h1 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 500;
    line-height: 1.37;
    /* color: #5d596c; */
    color: #e6e6e6fc;
  }
  



/* ======================================================= */

  /* ============== Section1 ============== */
  .section1 {
    width: 100vw;
  }
  
  .konten1 {
    /* height: 550px; */
    position: relative;
  }
  
  .lembar {
    width: 50px;
    height: 50px;
    position: absolute;
    margin-top: 30px;
  }


  .masking-banner {
    top: 300px;
    position: absolute;
  }




  /* ============== Section2 ============== */
.section2 {
  width: 100%;
  /* position: relative; */
}

.konten2 {
  /* height: 1000px; */
  position: relative;
  background-color: #f8f7fa;
  z-index: 5;
  margin-top: -160px;

}

.lembar2 {
  width: 50px;
  height: 50px;
  position: absolute;
}


.sulur {
  /* margin-top: -200px; */
  position: absolute;
  width: 100vw;
  bottom: -20px;
  z-index: 2;
  /* background-color: aqua; */
}



 /* ============== Section3 ============== */
 .section3 {
  width: 100%;
}

.konten3 {
  /* height:1000px; */
  /* top: -200px; */
  z-index: 5;
  /* background-color: #89bab631; */
  position: relative;

}

.lembar3 {
  width: 50px;
  height: 50px;
  position: absolute;
}

.ukur {
  height: 300px;

}


.paket h1 {
  /* color: #1E3B8A;  */
  color: #e6ba35;

}

.paket p {
  color: #eaeaea;
}



 /* ============== Section4 ============== */
 .section4 {
  width: 100%;
}

.konten4 {
  /* height:700px; */
  /* background-color: #1E3B8A; */
  position: relative;
}

.kecil {
  background-color: #1E3B8A;
  position: relative;
}

.ikon-prod {
  padding: 50px;
  /* background-color: rgb(17, 149, 149); */
  margin-top: -60px;
  /* border-radius: 0.375rem; */
  background-color: red;
}

.pilihkami {
  color: #e3be00;
}

.pilihkami .narasi h2 {
  color: #e3be00;

  }


  .juko {
    color: white;
  }

  /* ======================= */


  .kardi-body {
    flex: 1 1 auto;
    padding: var(1.5rem) var(1.5rem);
    color: #030303
  }



 /* ============== Section5 ============== */
 .section5 {
  width: 100%;
}

.konten5 {
  /* height: 600px; */
  /* display: flex;
  color: black;
	background: url("../images/mekkah.png");
	background-size: cover;
	background-position: center; */
  position: relative;
}


/* ======= */
.transisi,
.kontent {
  position: relative;
  width: 100%;
  z-index: 1;
}


.kontent {
  overflow-x: hidden;
}

.kontent .lembaran {
  width: 100%;
  height: 100vh;
}

.kontent .lembaran.pagebaru {
  background-image: url(../images/mekkah01.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.kontent .lembaran.pagebaru1 {
  height: 60px;
  position: relative;
}


.image-kontainerku {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  perspective: 500px;
  overflow: hidden;
}

.image-kontainerku .gbr-gerak {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}



 /* ============== Section6 ============== */
 .section6 {
  width: 100%;
}

.konten6 {
  /* height: 900px; */
  position: relative;
}



.accor-haji {
  padding-top: 50px;
  /* padding-bottom: 100px; */
}



   /* ============== Section7a ============== */
 .section7a {
  width: 100%;
}

.konten7a {
  /* height: 700px; */
  background-color: #f5c149;
  position: relative;
  /* padding-top: 300px; */
}

.lembar7a {
  width: 50px;
  height: 50px;
  position: absolute;
}

.narasi .h1 {
  color: #1E3B8A;
}



   /* ============== Section7 ============== */
   .section7 {
    width: 100%;
  }
  
  .konten7 {
    /* height: 100px; */
    position: relative;
    display: flex;
    top: 50px;
    margin-top: 100px;
    margin-bottom: 200px;
  }
  

  .big-judul {
    justify-content: center;
    position: relative;
    background-color: aqua;
  }


  /* .crouselswipe-dua {
    height: 300px;
  } */



  .swiper-wrapper2{
    width: 300px;
    height: 300px;
    margin-bottom: 1.5em;
  }



 /* ============== Section8 ============== */
 .section8 {
  width: 100%;
}

.konten8 {
  height: 600px;
  display: flex;
  color: black;
	background: url("../images/arch01.png");
	background-size: cover;
	background-position: center;
  position: relative;
  padding-bottom: 100px;
}

.lembar8 {
  width: 50px;
  height: 50px;
  position: absolute;
}


 /* ============== Section9 ============== */
 .section9 {
  width: 100%;
}

.konten9 {
  /* height: 700px; */
  /* background-color: #89bab631; */
  position: relative;
  padding-top: 100px;
  padding-bottom: 200px;
}

.lembar9 {
  width: 50px;
  height: 50px;
  position: absolute;
}


 /* ============== Section10 ============== */
 .section10 {
  width: 100%;
}

.konten10 {
  /* height: 700px; */
  background-color: #1E3B8A;
  position: relative;
}

.lembar10 {
  width: 50px;
  height: 50px;
  position: absolute;
}

.gbr-promo {
  height: 450px;
  display: flex;
  color: black;
	background: url("../images/duduk.png");
	background-size: cover;
	background-position: center;
  position: relative;
}


/* TYPOGRAFI */
.tlisan-terang {
  width: 100%;

}

.tlisan-terang .extra {
  font-family: "DM Serif Display", serif;
  font-weight:bold;
  font-size:clamp(32px, 25vw, 15rem);
  line-height: 1.2;
  /* color: rgb(226, 226, 226); */
  }


.tlisan-terang h1 {
  font-family: "DM Serif Display", serif;
  font-weight:bold;
  font-size:clamp(32px, 6vw, 6rem);
  line-height: 1; 
  color: #e3be00;
  }


.tlisan-terang h2 {
  font-family: "DM Serif Display", serif;
  font-weight:bold;
  font-size:clamp(32px, 10vw, 3rem);
  line-height: 1.2;
  letter-spacing:1px;
  color: rgb(211, 176, 0);
  }
  
  
  .tlisan-terang h3 {
  font-family: "DM Serif Display", serif;
  font-weight:bold;
  font-size:clamp(16px, 5vw, 1.5rem);
  line-height: 1.2;
  letter-spacing:1px;
  color: rgb(235, 235, 235);
  }

  .tlisan-terang p {
    color: rgb(228, 228, 228);
    }




/* TYPOGRAFI */
.tlisan-gelap {
  width: 100%;

}

.tlisan-gelap .extra {
  font-family: "DM Serif Display", serif;
  font-weight:bold;
  font-size:clamp(32px, 25vw, 15rem);
  line-height: 1.2;
  /* color: rgb(226, 226, 226); */
  }


.tlisan-gelap h1 {
  font-family: "DM Serif Display", serif;
  font-weight:bold;
  font-size:clamp(32px, 6vw, 6rem);
  line-height: 1; 
  color: #e3be00;
  }


.tlisan-gelap h2 {
  font-family: "DM Serif Display", serif;
  font-weight:bold;
  font-size:clamp(32px, 10vw, 3rem);
  line-height: 1.2;
  letter-spacing:1px;
  color: rgb(211, 176, 0);
  }
  
  
  .tlisan-gelap h3 {
  font-family: "DM Serif Display", serif;
  font-weight:bold;
  font-size:clamp(16px, 5vw, 1.5rem);
  line-height: 1.2;
  letter-spacing:1px;
  color: rgb(38, 38, 38);
  }

  .tlisan-gelap p {
    color: rgb(38, 38, 38);
    }



 /* ============== Section11 ============== */
 .section11 {
  width: 100%;
}

.konten11 {
  /* height: 700px; */
  /* background-color: #89bab631; */
  position: relative;
  padding-bottom: 100px;
  padding-top: 100px;
  
}

.lembar11 {
  width: 50px;
  height: 50px;
  position: absolute;
}

.kard11 {
  background-color: #e3be00;

}

.galleryku {
  padding-bottom: 50px;
}


/* ---- */
.sentuh {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.375rem;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #1E3B8A;
  opacity: 70%;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  border-radius: 0.375rem;
}

.sentuh:hover .overlay {
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}


.kard2 {
  background-color: #e3be00;
}


.vid-ukur {
  width: 100%;
  height: 245px;
}

 /* ============== Section12 ============== */
 .section12 {
  width: 100%;
}

.konten12 {
  /* height: 700px; */
  background-color: #f5c149;
  position: relative;
}

.lembar12 {
  width: 50px;
  height: 50px;
  position: absolute;
}


 /* ============== Section13 ============== */
 .section13 {
  width: 100%;
}

.konten13 {
  height: 250px;
  background-color: #1E3B8A;
  position: relative;
}

.lembar13 {
  width: 50px;
  height: 50px;
  position: absolute;
}


 /* ============== Section14 ============== */
 .section14 {
  width: 100%;
}

.konten14 {
  height: 700px;
  background-color: #89bab631;
  position: relative;
}

.lembar14 {
  width: 50px;
  height: 50px;
  position: absolute;
}


 /* ============== Section15 ============== */
 .section15 {
  width: 100%;
}

.konten15 {
  height: 700px;
  background-color: #89bab631;
  position: relative;
}

.lembar15 {
  width: 50px;
  height: 50px;
  position: absolute;
}





/* ================ RESPONSIVE ===================== */
/* ===== Mobile === */
@media only screen and (max-device-width: 480px) {
  /* styles for mobile browsers smaller than 480px; (iPhone) */
  /* For mobile: */
  /* #smooth-content { height: 140000px; } */


  .sulur { bottom: -55px; }

  /* section 1 */
  .lembar {text-align: center; margin-top: 150px; margin-left: 75px; z-index: 10; }


  /* section 2 */
  .konten2 {
    margin-top: 50px;
  }

  .bannerku {
    margin-top: 45px;
  }
  /* .carousel-inner {
     padding-top: 100px;
  } */

  .jeda {
    padding-left: 20px;
  }



}


/* ===== Laptop === */
@media only screen and (max-device-width: 1399px) {

  /* #smooth-content { height: 12000px; } */

}




/* ===== Dekstop === */
@media only screen and (min-width: 960px) {
	/* styles for browsers larger than 960px; */

}





/* 
@media only screen and (min-width: 576px) {
untuk screen 576 x 768
}

@media only screen and (min-width: 768px) {
  untuk screen 576 x 768

}

@media only screen and (min-width: 992px) {
  untuk screen 1024 x 768 

}

@media only screen and (min-width: 1200px) {
  untuk screen 1320 X

}

@media only screen and (min-width: 1400px) {
untuk screen 1920 x 1080 
} */