.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.color-swatch {
    width: 30px;
    height: 30px;
    display: inline-block; /* Or block, depending on your layout */
    border-radius: 50%; /* Makes it circular */
  }

  #map {
    height: 550px;
    width: 100%;
  }

.footer-bg {
  background-color:#B4864D;
}

.justify-content {
  justify-content: center !important;
}

.hero-accent-wrapper {
  position: relative;
  padding-left: 25px; /* jarak teks dari garis */
}

.hero-accent-wrapper::before {
  content: "";
  position: absolute;
  left: 20%;
  top: -50px;
  width: 100px;
  height: 120%;
  background-color: #f8501d; /* warna aksen */
}

/* --- Accent Styling --- */
.accent-top-left,
.accent-bottom-right {
  position: absolute;
  width: 200px; /* sesuaikan ukuran */
  pointer-events: none;
}

/* Posisi kiri atas gambar Dinamica */
.team-details__thumb {
  position: relative;
}
.accent-top-left {
  top: -40px;
}

/* Posisi kanan bawah deskripsi Dinamica */
.team-details__content111 {
  position: relative;
  z-index: 1; /* pastikan teks tetap di atas */
}

.team-details__content111 p,
.team-details__content111 h5 {
  position: relative;
  z-index: 2; /* teks di atas aksen */
}

.accent-bottom-right {
  bottom: -40px;
  right: -60px;
}
.team-details__thumb img.w-100 {
  position: relative;
  z-index: 2; /* mesin di atas */
}

.accent-top-left {
  z-index: 1; /* di bawah mesin, tapi masih di atas background section */
}

.accent-bottom-right {
  position: absolute;
  bottom: -40px;   /* sesuaikan posisi vertikal */
  right: -60px;    /* sesuaikan posisi horizontal */
  width: 200px;    /* ukuran aksen */
  z-index: 1;      /* di belakang teks tapi di atas background */
  pointer-events: none;
}

.accent-artboard2 {
  position: absolute;
  top: -40px;
  left: 30%;
  width: 50px;
  z-index: 2;
  pointer-events: none;
}

/* Orange accent bar under Technical Features */
.technical-feature-artboard {
  position: absolute;
  top: 50px;
  left: 0;
  width: 600px;
  height: 50px;
  background-color: #f5511e; /* warna oranye */
  z-index: 1;      /* di belakang teks tapi di atas background */
  pointer-events: none;
}

/* Responsive layout for mobile view */
@media (max-width: 768px) {
  .technical-feature-artboard {
    width: 90%;      /* artboard lebih pendek agar sesuai layar kecil */
    height: 30px;    /* sedikit lebih tipis */
    top: 25px;       /* jarak dari atas lebih kecil */
  }

  .quanto__header h3.title {
    position: relative;
    letter-spacing: 1px;
    z-index: 2;       /* tetap di depan artboard */
  }
}

/* Orange background block behind contact text */
.quanto-contact__content {
  position: relative;
}


.contact-orange-block::before {
  content: "";
  position: absolute;
  left: 20%;
  top: -50px;
  width: 80px;
  height: 120%;
  background-color: #f8501d; /* warna aksen */
}

.quanto-contact__content .title {
  position: relative;
  z-index: 2; /* pastikan teks di depan blok */
}

/* Responsive layout for mobile view */
@media (max-width: 768px) {
  .contact-orange-block {
    top: -20px;
    left: 5%;
    width: 90%;
  }

  
}