body {
  font-family: "Roboto";
  background-color: #fff;
  height: 200vh;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.3);
}

.site-navbar {
  position: relative;
  z-index: 1000;
}

.navbar-bg {
  width: 100%;
  position: fixed;
  background: rgba(12, 76, 112, 0.85);
  box-shadow: 0px 45px 13px 0px rgba(0, 0, 0, 0), 0px 29px 12px 0px rgba(0, 0, 0, 0.01), 0px 16px 10px 0px rgba(0, 0, 0, 0.05), 0px 7px 7px 0px rgba(0, 0, 0, 0.09),
    0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.site-navbar .site-navigation .site-menu>li>a {
  padding: 10px 0px;
  color: #fff;
  font-size: 16px;
  text-decoration: none !important;
  font-family: "Poppins";
  font-weight: 400;
}

.site-navbar .site-navigation .site-menu>li>a>span {
  padding: 5px 20px;
  display: inline-block;
  border-bottom: 2px solid transparent;
}

.site-navbar .site-navigation .site-menu>li>a:hover>span {
  text-decoration: none;
  color: #fff;
  border-bottom: 2px solid #fff;
  border-radius: 0;
  display: inline-block;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-logo {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: contain;
}

.hamburger {
  padding: 0;
  display: inline-block;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  margin: 0;
  outline: none;
  width: 30px;
  height: 24px;
}

.hamburger-box {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
  width: 100%;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 100%;
  height: 3px;
  background-color: #2699fb;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

/* Hamburger Animation */
.hamburger.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.hamburger.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Mobile Menu Styles */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100vh;
  z-index: 1002;
  transition: right 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-image: url("../images/pattern.png");
  background-color: #fff;
  padding: 20px;
  overflow-y: auto;
  pointer-events: auto;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu .site-menu {
  flex-direction: column;
  gap: 20px;
  text-align: left;
  padding: 20px 0;
  margin: 0;
}

.mobile-menu .site-menu li {
  list-style: none;
}

.mobile-menu .site-menu li a {
  display: block;
  padding: 10px 0;
  color: #787878;
  text-decoration: none;
  font-size: 16px;
}

.mobile-menu .site-menu li a span {
  padding: 5px 0;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.mobile-menu .site-menu li a:hover span {
  color: #2699fb;
  border-bottom: 2px solid #2699fb;
}

/* Overlay untuk mobile menu */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

.mobile-menu-overlay.active {
  display: block;
  pointer-events: auto;
}

.page-title {
  font-family: "Roboto";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.content-title {
  font-family: "Roboto";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.content-description {
  color: #161616;
  font-size: 14px;
  font-weight: 400;
  text-align: justify;
}

.testimonial-slide,
.about-slide,
.recruitment-slide {
  padding: 10px 10px;
  /* text-align: center; */
}

.card-box {
  display: flex;
}

.card-name {
  align-self: center;
}

.img-testi {
  width: 71px;
  height: auto;
}

.rating i {
  color: #ffd700;
}

.about-slide img {
  max-height: 200px;
  border-radius: 12px;
  display: block;
  margin: 0 auto 12px;
  box-shadow: 13px 0px 4px 0px rgba(0, 0, 0, 0), 9px 0px 3px 0px rgba(0, 0, 0, 0.01), 5px 0px 3px 0px rgba(0, 0, 0, 0.05), 2px 0px 2px 0px rgba(0, 0, 0, 0.09),
    1px 0px 1px 0px rgba(0, 0, 0, 0.1);
}

.recruitment-slide img {
  width: 300px;
}

.slick-dots {
  bottom: auto;
}

.slick-dots li button:before {
  background-color: black;
  height: 10px;
  content: "";
}

.slick-dots li {
  margin: auto;
}

.map-iframe {
  width: 100%;
  height: 350px;
  border-radius: 12px;
  box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1), 4px 0px 4px 0px rgba(0, 0, 0, 0.1), 0px -4px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.contact-us {
  font-size: 16px;
  line-height: 1.5;
}

.contact-us i {
  margin-right: 10px;
  font-size: 24px;
}

.contact-us p {
  margin: 0;
}

.divider {
  border: none;
  height: 1px;
  background-color: #0c4c70;
  margin: 20px 0;
}

.footer {
  background: #0c4c70;
  box-shadow: 0px -56px 16px 0px rgba(0, 0, 0, 0), 0px -36px 14px 0px rgba(0, 0, 0, 0.01), 0px -20px 12px 0px rgba(0, 0, 0, 0.05), 0px -9px 9px 0px rgba(0, 0, 0, 0.09),
    0px -2px 5px 0px rgba(0, 0, 0, 0.1);
}

.footer-label {
  text-align: center;
  padding-top: 26px;
  padding-bottom: 26px;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

.footer.label strong {
  font-weight: 800;
}

.bg-content {
  background-image: url("../images/bgcontent.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-testimonial {
  background-image: url("../images/bgtestimonial.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-recruitment {
  background-image: url("../images/bgrecruitment.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-home {
  background-image: url("../images/bghome.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#tokutei-ginou .icon {
  color: #0c4c70;
  text-align: center;
  font-size: 10rem;
}

#tokutei-ginou .list-group-item {
  display: flex;
  align-items: center;
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 11px;
}

#tokutei-ginou .list-group-item:nth-child(even) {
  background-color: #ececec;
}

#tokutei-ginou .list-group-item:nth-child(odd) {
  background-color: #f8f8f8;
}

#tokutei-ginou .number {
  font-size: 30px;
  font-weight: 400;
  color: #b3b3b3;
  margin-right: 20px;
}

#departure .axis-title {
  color: #161616;
  font-size: 14px;
  font-weight: 700;
  padding-top: 15px;
}

#home img {
  height: 105px;
}

#home .title {
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-style: italic;
  font-weight: 600;
}

#home .subtitle {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
}

#home .btn-begin {
  border-radius: 25px;
  border: 2px solid #fff;
  background: #0c4c70;
  box-shadow: 0px 9px 3px 0px rgba(0, 0, 0, 0), 0px 6px 2px 0px rgba(0, 0, 0, 0.01), 0px 3px 2px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.09),
    0px 0px 1px 0px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

#about-us .box {
  display: flex;
  align-items: center;
  border-radius: 50px;
  border: 2px solid var(--White, #fff);
  box-shadow: 35px 38px 15px 0px rgba(0, 0, 0, 0), 22px 25px 13px 0px rgba(0, 0, 0, 0.01), 13px 14px 11px 0px rgba(0, 0, 0, 0.05), 6px 6px 8px 0px rgba(0, 0, 0, 0.09),
    1px 2px 5px 0px rgba(0, 0, 0, 0.1);
  background-color: #0c4c70;
}

#about-us .boxlabel {
  padding: 0;
  margin: 0;
  align-items: center;
  font-size: 12px;
  color: #fff;
}

#about-us .boxlabel strong {
  font-weight: 800;
}

#about-us .name-label {
  color: #000;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  margin: unset;
  padding: unset;
  margin-top: 15px;
}

#about-us .position-label {
  color: #0c4c70;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin: unset;
  padding: unset;
}

#testimonial .card {
  min-height: 170px;
  border-radius: 12px;
  background: #0c4c70c2;
}

#testimonial .card-body {
  display: flex;
  flex-direction: column;
}

#testimonial .card-title {
  color: #fff;
  text-align: justify;
  font-size: 14px;
  font-weight: 700;
  margin: unset;
}

#testimonial .card-text {
  color: #fff;
  text-align: justify;
  font-size: 14px;
  font-weight: 400;
  height: 100px;
}

#testimonial hr {
  height: 1px;
  background-color: #dee2e6;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.whatsapp-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: white;
  font-size: 22px;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.whatsapp-icon:hover {
  background-color: #128c7e;
  text-decoration: none;
}

.modal {
  z-index: 2000;
}

.warning-info .modal-content {
  background-color: transparent;
  border: none;
}

.warning-info .close-icon {
  position: absolute;
  top: 35px;
  right: 10px;
  z-index: 1;
  font-size: 22px;
  border: none;
  outline: none;
  box-shadow: none;
}

.warning-info .close-icon:active,
.warning-info .close-icon:hover,
.warning-info .close-icon:focus,
.warning-info .close-icon:focus-within,
.warning-info .close-icon:focus-visible {
  border: none;
  outline: none;
  box-shadow: none;
}

.warning-card {
  background-color: #fff8e1;
  border-left: 5px solid #ffc107;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.warning-header {
  font-size: 1.5rem;
  font-weight: bold;
  color: #d9534f;
}

.warning-icon {
  font-size: 2rem;
  color: #ffc107;
}

.warning-text {
  font-size: 1rem;
  color: #555;
}

.warning-number {
  font-weight: bold;
  color: #007bff;
}

.consul-button {
  cursor: pointer;
  background-color: white;
  border: 2px solid #0c4c70;
  border-radius: 50px;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0px;
  width: 305px;
}

.consul-button i {
  color: #25d366;
  font-size: 20px;
}

.consul-button .row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.consul-button h6 {
  margin: 0px;
  font-size: 14px;
  font-weight: bold;
  color: #0c4c70;
}

.consul-button p {
  margin: 0px;
  font-size: 12px;
  color: #0c4c70;
  cursor: pointer;
}

.contact-desc {
  font-size: 16px;
  font-weight: bold;
}

.contact-label {
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  text-align: center;
}

.wabutton {
  cursor: pointer;
  padding: 10px 60px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border: 2px solid #ffff;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0c4c70;
  box-shadow: 0px 9px 3px 0px rgba(0, 0, 0, 0), 0px 6px 2px 0px rgba(0, 0, 0, 0.01), 0px 3px 2px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.09),
    0px 0px 1px 0px rgba(0, 0, 0, 0.1);
}

.wabutton i {
  color: #fff;
}

.wabutton p {
  color: #fff;
  align-items: center;
  justify-content: center;
  margin: 0px;
}

.box-table {
  margin: 0 auto;
  width: 60%;
  border-radius: 50px;
  border: 2px solid #0c4c70;
  background: #fff;
  box-shadow: 21px 21px 8px 0px rgba(0, 0, 0, 0), 13px 13px 8px 0px rgba(0, 0, 0, 0.01), 8px 8px 6px 0px rgba(0, 0, 0, 0.05), 3px 3px 5px 0px rgba(0, 0, 0, 0.09),
    1px 1px 3px 0px rgba(0, 0, 0, 0.1);
}

.box-table p {
  padding: 6px 40px;
  margin: 0px;
  font-size: 14px;
  font-style: italic;
  text-align: center;
  color: #0c4c70;
}

.language-select {
  position: relative;
  display: inline-block;
  margin-right: 15px;
}

.selected-language {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 25px 5px 10px;
  position: relative;
  min-width: 40px;
  justify-content: center;
}

.selected-language::after {
  content: "▼";
  font-size: 12px;
  position: absolute;
  right: 5px;
  color: #ffffff;
}

.selected-flag {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 4px;
  border: 0.7px solid #000000;
}

.language-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: solid #ffffff;
  border-radius: 6px;
  box-shadow: -2px 0px 3px 0px rgba(0, 0, 0, 0.1), 2px 0px 3px 0px rgba(0, 0, 0, 0.1), 0px 2px 3px 0px rgba(0, 0, 0, 0.1), 0px -2px 3px 0px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 185px;
  margin-top: 5px;
}

.language-options.show {
  display: block;
}

.language-option-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.language-option-item:hover {
  background-color: #f5f5f5;
}

.language-option-item img {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 3px;
  border: 0.7px solid #000000;
  margin-right: 10px;
}

.language-option-item span {
  font-size: 16px;
  color: #333;
}