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: 100%;
  height: auto;
  max-height: 80px;
  margin: 10px 15px;
  object-fit: contain;
}

/* 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;
  }


}

/* Mobile screens */
@media (max-width: 575px) {
  .logo-container {
    flex-wrap: wrap;
  }
  
  .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;
  }
}