:root {
    --primary-bg-color: #f3ecea;       /* rgb(227,218,214) */
    --secondary-bg-color: #CBBFB2;     /* rgb(203,191,178) */
    --primary-text-color: #79797C;     /* rgb(121,121,124) */
    --secondary-text-color: #93959C;   /* rgb(147,149,156) */
    --link-color: #984150;             /* rgb(152,65,80) */
    --nav-bg-color: #AC978A;           /* rgb(172,151,138) */
    --map-overlay-color: rgba(142,141,106,0.31); /* rgba(142,141,106,255) dengan transparansi */
  }
  
  body {
    overflow-x: hidden;
    background-color: var(--primary-bg-color);
  color: var(--primary-text-color);
  }
  
  p {
    /* max-width: 30em; */
    margin: 0 auto;
    padding: 0.66em 1em;
    line-height: 1.75em;
    color: var(--secondary-text-color);
   
  }
  
  /* .stickify {
    padding: 50px 0;
  } */
  
  #container {
    width: 100vw;
    position: relative;
    background: var(--map-overlay-color);

  }
  
  
  .sticky {
    z-index: -1;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* kontainer 3 */
  #container3 {
    width: 100vw;
    position: relative;
    /* background: var(--map-overlay-color); */
  }
  .sticky3 {
    z-index: -1;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Tambahkan properti untuk div peta */
  .map-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  #one {
    width: 100%;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-position 1.5s,  background-size 1.5s, transform 1.5s;
  }
  
  #three {
    width: 100%;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('https://mapandmaps.com/42298-thickbox_default/ambon-amboine-molukas-old-engraving-voc-east-india-company-indonesia-bellin-1754.jpg');
    transition: background-position 1.5s,  background-size 1.5s, transform 1.5s;
  }
  
  
  .step {
    height: 100vh;
  }

  #one.step-1 {
    background-image: none; /* Hapus background image */
  }
 
  .step p {
    background-color: white;
    max-width: 30em;
  }
  

/* heading kontener */
.heading-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Sesuaikan dengan tinggi gambar Anda */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-color);
    background-image: url('https://assets-a1.kompasiana.com/items/album/2021/12/11/benteng-kalamata-61b461f962a70416420880d2.jpg'); /* Ganti URL gambar */
    z-index: 6;
    margin-bottom: 0px;
  }
  
  .heading-text {
    background-color: rgba(255, 255, 255, 0.8); /* Latar belakang putih transparan */
    padding: 20px;
    border-radius: 10px;
    color: var(--primary-text-color);
    
  }
  
  .heading-text h1 {
    font-family: var(--font-quote);
    color: var(--primary-text-color);
    font-size: 4em; /* Sesuaikan dengan kebutuhan */
    margin: 10px 0;
    line-height: 1.3;
  }
  
  .heading-text p {
    font-family: var(--font-secondary);
    color: var(--secondary-text-color);
    font-size: 1.2em; /* Sesuaikan dengan kebutuhan */
    margin: 10px 0;
    max-width: 50em;

  }
  
  .heading-text .paragraph {
    font-family: var(--font-primary);
    font-size: 1em; /* Sesuaikan dengan kebutuhan */
    margin: 10px 0;
  }

  /* konten container */
  .content-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 400;

}

.content-container p {
  text-align: justify;
  line-height: 1.6;
  margin-bottom: 1em;
}

.content-container h1 {
  font-family: var(--font-quote);
  color: var(--link-color); /* Darker color for the title */
  text-align: center;
  font-size: 50px;

}