a[href^="tel"] {
  color: var(--light) ;          /* ganti sesuai warna website */
  text-decoration: none;
}

#footer {
    background-color: #000 !important;
  }

.bg-color-after-secondary
{
    background-color: #000 !important;
  }
/* Skin Colors - Inverse */

:root {
	--primary-inverse: #5F3C8A;
    --tertiary: #d7b6ff;
    --tertiary-100: #5F3C8A;
    
}

.hover-box:hover {
    /* Change the background color */
    background-color: #5F3C8A !important; /* Dark Blue */
    
   
    cursor: pointer; /* Optional: Change cursor to a pointer */
  
}

.custom-circle-1 {

  background-color: #0aa499 !important;

}


.gradient-text {

            
            /* 1. Tentukan gradasi sebagai latar belakang */
            background-image: linear-gradient(
                90deg, /* Sudut gradasi: 90 derajat untuk dari kiri ke kanan */
                #d7b6ff, /* Warna 1 */
                #0aa499  /* Warna 2 */
            );

            /* 2. Klip latar belakang agar hanya mengisi area teks */
            -webkit-background-clip: text;
            background-clip: text;

            /* 3. Buat warna isi teks menjadi transparan agar latar belakang gradasi terlihat */
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
            
            /* (Opsional) tambahkan shadow sedikit untuk efek 3D atau menonjolkan teks */
            /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
        }


/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(180%) contrast(140.1%); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }


.approach-img {
  position: relative;
  display: block;
  background-image: url("../img/vid.gif") !important;
  background-repeat: no-repeat;
  border-radius: 50%;
  min-width: 355px;
  min-height: 360px;
  max-width: 355px;
  max-height: 360px;
  margin: auto;
  width: 100%;
}

.approach-img .custom-circle-2 {
  display: block;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../img/vid.gif") !important;
  background-position: center;
  background-size: 500px;
}

/* Responsive Logo Container Styles */
.logo-container img {
  max-width: 97%;
  height: auto;
  max-height: 80px;
  margin: 10px 15px;
  object-fit: contain;
}

 .txt-legal {
    min-width: 260px;
  }

/* Tablet and smaller screens */
@media (max-width: 991px) {
  .logo-container img {
    max-height: 60px;
    margin: 8px 12px;
  }
  .col-address{
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 10px;
  }
  
  .lang-switcher{
    display: none !important;;
  }

}

/* Mobile screens */
@media (max-width: 575px) {
  .logo-container {
    flex-wrap: wrap;
  }

	  .txt-legal {
    min-width: 208px;
  }
	
  .logo-container img {
    max-height: 50px;
    margin: 8px 10px;
    width: auto;
  }
  
  /* Footer links responsive on mobile */
  .footer-nav #footerNav {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .custom-footer-copywriting {
    justify-content: center !important;
    text-align: center !important;
  }

  .col-address{
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 10px;
  }
}


.our-services .service-card:hover:before {
		width: 100% !important;
		background-color: white !important;
}

@media (max-width: 767px) {
  #footer .footer-nav nav {
    text-align: left;
  }
}

/* Language Switcher Styles */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.lang-btn {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.1);
}

.lang-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.lang-btn.active {
    background: #0aa499;
    color: #fff;
    font-weight: 700;
}

.lang-separator {
    color: #fff;
    opacity: 0.5;
}

/* Desktop Language Switcher Styles */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.lang-switcher .lang-btn {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.1);
}

.lang-switcher .lang-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.lang-switcher .lang-btn.active {
    background: #0aa499;
    color: #fff;
    font-weight: 700;
}

/* Mobile Language Switcher Styles */
.lang-switcher-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.lang-switcher-mobile .lang-btn {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.1);
}

.lang-switcher-mobile .lang-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.lang-switcher-mobile .lang-btn.active {
    background: #0aa499;
    color: #fff;
    font-weight: 700;
}

.lang-switcher-mobile .lang-separator {
    color: #fff;
    opacity: 0.5;
}

/* Hide desktop lang-switcher on mobile */
@media (max-width: 991px) {
    .header-column-lang-switcher {
        display: none;
    }
}

/* Hide mobile lang-switcher on desktop */
@media (min-width: 992px) {
    .lang-switcher-mobile {
        display: none;
    }
}


/* === DROPDOWN CONTAINER === */
.lang-dropdown .dropdown-menu {
    background-color: #2b2b2b !important; /* abu-abu gelap */
    border: none !important;
    padding: 6px 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* === ITEM DEFAULT === */
.lang-dropdown .dropdown-item {
    background-color: transparent !important;
    color: #cfcfcf !important;
    padding: 10px 18px;
    font-weight: 500;
}

/* === ITEM HOVER (SEPERTI HOME) === */
.lang-dropdown .dropdown-item:hover,
.lang-dropdown .dropdown-item:focus {
    background-color: #0aa499 !important; /* HIJAU HOME */
    color: #ffffff !important;
}

/* === FLAG ALIGN === */
.lang-dropdown .dropdown-item img {
    margin-right: 8px;
}


/* ===============================
   FORCE REMOVE WHITE BUTTON
   LANG DROPDOWN (FINAL FIX)
================================ */

/* Target SEMUA kemungkinan toggle */
.lang-dropdown .dropdown-toggle,
.lang-dropdown .btn,
.lang-dropdown .btn-light,
.lang-dropdown .btn-secondary,
.lang-dropdown.show .dropdown-toggle,
.lang-dropdown.show .btn {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #cfcfcf !important;
}

/* Hover seperti HOME */
.lang-dropdown .dropdown-toggle:hover,
.lang-dropdown .btn:hover {
    background-color: rgba(10, 164, 153, 0.15) !important;
    color: #0aa499 !important;
}

/* Saat dropdown terbuka */
.lang-dropdown.show .dropdown-toggle,
.lang-dropdown.show .btn {
    background-color: transparent !important;
    color: #cfcfcf !important;
}

/* Fokus & aktif */
.lang-dropdown .dropdown-toggle:focus,
.lang-dropdown .dropdown-toggle:active,
.lang-dropdown .btn:focus,
.lang-dropdown .btn:active {
    background-color: transparent !important;
    box-shadow: none !important;
    color: #cfcfcf !important;
}

/* KILL Bootstrap btn-light putih */
.btn-light,
.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    background-color: transparent !important;
    border-color: transparent !important;
}
/* =====================================
   HARD RESET ICON DI LANGUAGE SWITCHER
   ===================================== */

/* 1. MATIKAN SEMUA pseudo-element (SUMBER CENTANG) */
.lang-dropdown *::before,
.lang-dropdown *::after {
    content: none !important;
    background: none !important;
}

/* 2. MATIKAN SEMUA ICON FONT / SVG KECUALI FLAG */
.lang-dropdown i,
.lang-dropdown svg {
    display: none !important;
}

/* 3. AKTIFKAN KEMBALI CARET BOOTSTRAP (PANAH ▼) */
.lang-dropdown .dropdown-toggle::after {
    content: "" !important;
    display: inline-block !important;
    margin-left: .5em;
    vertical-align: .255em;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
}

/* =====================================================
   MOBILE LANGUAGE SWITCHER – JFX STYLE (ONLY LANGUAGE)
   ===================================================== */
@media (max-width: 991px) {

  /* Title "Language" */
  .lang-jfx-title {
    padding: 12px 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .6;
    pointer-events: none;
  }


  /* Flag icon */
  .lang-flag {
    width: 18px;
    height: auto;
    flex-shrink: 0;
  }

}

/* =====================================
   JFX MOBILE LANGUAGE STYLE
   ===================================== */
@media (max-width: 991px) {

  .lang-jfx-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
  }

  .lang-flag {
    width: 18px;
    margin-right: 8px;
  }

}

/* =====================================
   JFX STYLE – FLAG + CODE (MOBILE)
   ===================================== */
@media (max-width: 991px) {

  .lang-jfx-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .lang-flag-main {
    width: 18px;
    height: auto;
    flex-shrink: 0;
  }

}
/* =====================================
   FORCE FONT DROPDOWN LANGUAGE
   SAMA DENGAN HOME & CONTACT US
   ===================================== */
.lang-dropdown .dropdown-item {
    font-family: "Poppins", sans-serif !important;
    font-weight: 600 !important;   /* sama dengan nav-link */
    font-size: 14px !important;    /* custom-text-3 */
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;
}

/* ==================================================
   FORCE DROPDOWN LANGUAGE IKUT STYLE NAV-LINK
   ================================================== */
.header-nav .lang-dropdown .dropdown-menu .dropdown-item {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

/* =====================================
   FIX FONT LANGUAGE (ID / EN)
   SAMA DENGAN HOME & CONTACT
   ===================================== */
.lang-jfx-item {
    font-family: "Poppins", sans-serif !important;
    font-weight: 600 !important;      /* sama dengan nav-link */
    font-size: 14px !important;       /* custom-text-3 */
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}


@media (max-width: 991px) {

  .nav-lang-divider {
    padding: 12px 20px;
    font-size: 12px;
    text-transform: uppercase;
    opacity: .6;
    pointer-events: none;
  }

  .lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
  }

  .lang-item img {
    width: 18px;
  }

  .lang-item.active,
  .lang-item:hover {
    background: #0aa499;
    color: #fff;
  }
}

@media (max-width: 991px) {

  .nav-lang-accordion .lang-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .lang-arrow {
    transition: transform .25s ease;
  }

  .nav-lang-accordion.open .lang-arrow {
    transform: rotate(180deg);
  }

  .lang-submenu {
    display: none;
    padding-left: 15px;
  }

  .nav-lang-accordion.open .lang-submenu {
    display: block;
  }

  .lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 15px;
  }

  .lang-item.active,
  .lang-item:hover {
    background-color: #0aa499;
    color: #fff !important;
  }
}

@media (max-width: 991px) {

  /* Text utama Language */
  .nav-lang-accordion .lang-toggle {
    color: #ffffff !important;
  }

  /* Arrow */
  .nav-lang-accordion .lang-arrow {
    color: #ffffff !important;
  }

  /* Item bahasa */
  .lang-submenu .lang-item {
    color: #ffffff !important;
  }

  /* Hover & Active */
  .lang-submenu .lang-item:hover,
  .lang-submenu .lang-item.active {
    background-color: #0aa499;
    color: #ffffff !important;
  }

  /* Pastikan img + text sejajar */
  .lang-item img,
  .lang-toggle img {
    display: inline-block;
  }
}

/* FIX dropdown bahasa terpotong di mobile */
@media (max-width: 991px) {

  #header .header-nav-main {
    overflow: visible !important;
  }

  #header .header-body {
    overflow: visible !important;
  }

  #header .header-container {
    overflow: visible !important;
  }

}

/* Mobile - Besarkan gambar logo dan center */
@media (max-width: 768px) {
  .owl-carousel.logo-slider {
    text-align: center;
  }

  .owl-carousel.logo-slider .item {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .owl-carousel.logo-slider .item img {
    max-height: 120px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto;
  }

  /* JFX logo - besarkan lebih besar */
  .owl-carousel.logo-slider .item:nth-child(2) img {
    max-height: 180px !important;
  }
}