.wraper {
  z-index: 1001;
}

#nav-icon1 {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 50px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span,
#nav-icon3 span,
#nav-icon4 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 50%;
  background: #F4F4F4;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 10px;
}

#nav-icon1 span:nth-child(2) {
  width: 20px;
  /* Decrease width */
  top: 20px;
  left: 13%;
  /* Adjust left position */

}

#nav-icon1 span:nth-child(3) {
  top: 30px;
}

#nav-icon1.open span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon1.open span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#mobile-menu {
  position: fixed;
  top: 0;
  width: 250px;
  height: 100%;
  background-color: #1B1D21;
  transition: right 2.5s ease;
}
.before-mobile-menu::before {
  content: ""; 
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  background-color:  rgba(16, 16, 16, 0.83);; 
  z-index: -1; 
}
#mobile-menu.open {
  right: 0;
}

.custom {
  transform: translate(30%, -80%);
}

.line {
  width: 1px;
  height: 16px;
  background: linear-gradient(90deg, rgba(95, 95, 95, 0.00) 0%, #5F5F5F 36.5%, #5F5F5F 68%, rgba(95, 95, 95, 0.00) 100%);
}

.bg-dark-blue {
  background-color: #1B1D21;
  border-radius: 43px;
}

.homesvg {
  position: absolute;
  top: -85px;
  right: -20px;
}

.small_text {
  color: var(--Secondary, #F3B86A);
  font-family: "Work Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  /* 157.143% */
}

.big_text {
  color: var(--Text-2, #C1C1C1);
  font-family: "Lexend Tera";
  font-size: 47px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
}

.small2 {
  color: var(--Text-2, #C1C1C1);
  font-family: "Work Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  /* 137.5% */
}

.service h1 {
  color: var(--Primary-Red, #921616);
  text-align: center;
  font-family: "Lexend Tera";
  font-size: 32px;
  font-style: normal;
  font-weight: 1000;
  line-height: normal;
  text-transform: uppercase;
}

.servicem h1 {
  color: var(--Primary-Red, #921616);
  text-align: center;
  font-family: "Lexend Tera";
  font-size: 25px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
}

.form h1 {
  text-align: center;
  font-family: "Lexend Tera";
  font-size: 2vw;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
}

.formm h1 {
  color: var(--Text-1, #D2D2D2);
  text-align: center;
  font-family: "Lexend Tera";
  font-size: 25px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
}

.kontak {
  width: 70%;
  height: 95vh;
  border-radius: 8px;
  background-image:
  linear-gradient(95deg, rgba(20, 4, 4, 0.9) 0.55%, rgba(0, 0, 0, 0.7) 98.92%),
    url('../images/texture.jpeg');
  background-color: lightgray;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;

}

.kontakm {
  height: 280vw;
  border-radius: 8px;
  border: 1px solid var(--Outline, #414751);
  background-image: linear-gradient(178deg, #251010 -11.68%, rgba(26, 26, 26, 0.00) 77.54%), url('../images/texturem.png');
  background-color: lightgray;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

footer {
  display: flex;
  width: 100%;
  height: 82px;
  background: var(--Container, #1B1D21);
}

.pt {
  padding-top: 6rem;
}

.dekor2 {
  top: 419%;
  position: absolute;
  left: -12%;
}

.dekor {
  z-index: -1;
  right: -10%;
  padding-top: 18.5rem;
  fill: linear-gradient(235deg, #727272 -16.13%, rgba(114, 114, 114, 0.00) 69.8%);
}

#services {
  height: 120vh;
}

#about {
  height: 140vh;
}

.ellipse1 {
  left: -10%;
  top: 210%;
}

.ellipse2 {
  width: 50%;
  top: 430%;
  left: 55%;
}

.ellipse3 {
  top: 50%;
  right: -10%;
}

.ellipse4 {
  width: 74%;
  height: 31%;
  top: -28%;
  left: -1%;
  transform: rotate(360deg);
}

.consul {
  margin-top: 3rem;
  padding: 2% 2%;
  color: #f0f0f0;
  font-weight: normal;
  font-family: 'Work Sans', sans-serif;
  border-radius: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #718096;
  width: 26%;
  transition: 0.5s ease;
}

.consul:hover {
  background-color: #921616;
}

.h-screeen {
  height: 85vh;
}

body {
  overflow-x: hidden;
}

.item {
  opacity: 0;
  transition: opacity 2.5s ease;
}

.visible {
  opacity: 1;
}

.form-input {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 2px solid #ccc;
  transition: border-color 0.3s ease;
}

.form-input:hover {
  border-color: #0A619F;
}

.form-input:focus {
  border-color: #0A619F;
}

.wa {
  position: absolute;
  top: 80%;
  right: 10%;
}

.wa:hover .bg-whatappblk {
  opacity: 0;
}

.wa:hover .bg-whatappclr {
  opacity: 1;
}

.wam:hover .bg-whatappblk {
  opacity: 0;
}

.wam:hover .bg-whatappclr {
  opacity: 1;
}

.bg-whatappblk,
.bg-whatappclr {
  background-image: url('/images/wablack.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  transition: opacity 0.5s ease;
}

.bg-whatappblk {
  opacity: 1;
}

.bg-whatappclr {
  opacity: 0;
}

.small_textm {
  color: var(--Secondary, #F3B86A);
  font-family: "Work Sans";
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  /* 157.143% */
}

.big_textm {
  color: var(--Text-2, #C1C1C1);
  font-family: "Lexend Tera";
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
}

.small2m {
  color: var(--Text-2, #C1C1C1);
  font-family: "Work Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  /* 137.5% */
}

.chekm {
  top: 17.3rem;
}

.my-slide {
  display: none;
}

.fade {
  animation-name: slideInOut;
  animation-duration: 6s;
  /* Total duration including pause */
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  opacity: 0;
  /* Start with opacity 0 */
}

@keyframes slideInOut {

  0%,
  20% {
    transform: translateX(100%);
    opacity: 0;
  }

  25%,
  45% {
    transform: translateX(0%);
    opacity: 1;
  }

  50%,
  70% {
    transform: translateX(0%);
    opacity: 1;
  }

  75%,
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.fade2 {
  animation-name: slideInOut2;
  animation-duration: 5.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  opacity: 0;
  /* Mulai dengan opasitas 0 */
}

@keyframes slideInOut2 {

  0%,
  8.333% {
    /* Start moving immediately, reach the midpoint quickly */
    transform: translateX(100%);
    opacity: 0;
    /* Opacity 0 saat animasi dimulai */
  }

  16.666% {
    /* End of initial movement, start of pause */
    transform: translateX(0%);
    opacity: 1;
    /* Opacity 1 saat slide mulai terlihat */
  }

  50% {
    /* Pause */
    transform: translateX(0%);
    opacity: 1;
    /* Tetap pada opasitas 1 selama berhenti */
  }

  66.666% {
    /* Resume movement */
    transform: translateX(0%);
    opacity: 1;
    /* Tetap pada opasitas 1 saat animasi berlanjut */
  }

  83.333%,
  100% {
    /* Move to the left */
    transform: translateX(-100%);
    opacity: 0;
    /* Tetap pada opasitas 1 saat animasi selesai */
  }
}

.custom-indicator {
  /* Add your custom styles here */
  margin-bottom: -3rem; /* Example: Adjust bottom margin */
}

/* Custom styling for individual carousel indicators */
.custom-indicator .new {
  /* Add your custom styles here */
  width:  0.5rem; /* Example: Set width */
  height: 0.5rem; /* Example: Set height */
  background-color: #2A2A2A; /* Example: Set background color */
  border: none; /* Example: Remove border */
  border-radius: 100%; /* Example: Make it round */
  cursor: pointer; /* Example: Add cursor pointer */
  margin-right: 5px; /* Example: Add margin */
}

/* Custom styling for active carousel indicator */
.custom-indicator .new.active {
  /* Add your custom styles here */
  background-color: #fff; /* Example: Set active background color */
}

.swipe{
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
}
.swipe .my-slide2{
  scroll-snap-align: start;

}

.my-slide3 {
  display: none;
}

.dot {
  transition: background-color 1.2s ease;
}

@media screen and (min-width: 100px) and (min-height: 800px) {

  .visi {
    height: 44vh;
    padding-top: 6rem;
  }

  .testi {
    height: 75vh;
  }
  .wam {
    position: absolute;
    top: 90%;
    right: 10%;
  }
}

@media screen and (min-width: 100px) and (max-height: 799px) {

  .visi {
    height: 80vh;
    padding-top: 8rem;
  }

  .testi {
    height: 110vh;
  }
  .wam {
    position: absolute;
    top: 87%;
    right: 8%;
  }
}
.bank1{
  width: 20%;
  height: auto;
  padding: 0.5rem;
}

.jarak{
  margin-bottom: 2.5vw;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}