/*************************************************************************
 * Your custom CSS file
 *************************************************************************/

.custom-dropdown {
  width: 240px;
}

.custom-textbox {
  width: 240px;
}

#dialog-1,
#dialog-2,
#dialog-3,
#dialog-4,
#share-dialog {
  display: none;
}

#share-url {
  width: 100%;
  -webkit-touch-callout: default !important;
  -webkit-user-select: text !important;
  -khtml-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

#share-url-copy-prompt {
  display: none;
  color: #007bff;
}

/* scroll top */
.scrollTop {
  position: fixed;
  bottom: -6rem;
  right: 2rem;
  padding: 10px 15px;
  background-color: #333333;
  opacity: 0.25;
  color: #fff;
  cursor: pointer;
  transition: all 0.5s ease 0s;
  z-index: 9999;
}
.scrollTop:hover {
  box-sizing: border-box;
  background-color: #333333;
  color: #fff;
  opacity: 0.5;
}

/* === Fix posisi hover hero1 === */
/* judul */
.hero1 .container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mask-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mask-wrapper .hover-area {
  pointer-events: auto;
}

.label {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* Hero-1 Section */
.hero-1 {
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-image: url("../img/sunsetbw-bg.jpg"); */
  background-image: url("../img/risk.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  position: relative;
}

.hero-1 .mask-container {
  position: absolute;
  height: 600px;
  inset: 0;
  /* -webkit-mask-image: url("../img/sunset-bg2.png"); */
  -webkit-mask-image: url("../img/riskmask.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: right;
}

.hero-1 .content {
  padding: 1.4rem 7%;
  max-width: 70rem;
  text-align: left;
  position: fixed;
  top: 100px;
}

.hero-1 .judul {
  position: fixed;
  /* top: 10rem; */
  /* left: 2rem; */
  width: 93%;
  /* padding: 10px 15px; */
  /* background-color: #333333;
  opacity: 0.5; */
  color: #fff;
  text-shadow: 2px 2px 4px #333333;

  transition: all 0.5s ease 0s;
  z-index: 1;
  text-align: right;
}

.hero-1 .content h1 {
  font-size: 7em;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5);
  line-height: 1;
}

.hero-1 .content h1 span {
  color: var(--primary);
  text-shadow: 2px 2px 4px #ffffff;
}

.hero-1 .content1 {
  padding: 1.4rem 7%;
  max-width: 70rem;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
}

.hero-1 .content1 .cta {
  bottom: 0px;
  display: inline-block;
  padding: 1rem 1rem;
  font-size: 1.2rem;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.5rem;
  cursor: pointer;
}
.hero-1 .content1 a:hover {
  color: var(--bg2);
}