body {
  padding-top: 80px;
  font-family: 'Quicksand', sans-serif;
}


/* HERO */
.hero-section {
  background:
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
    background: url('img/Menara Cakrawala.jpg') center / cover no-repeat fixed;	
  color: #fff;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* NAVBAR */
.navbar {
  padding: 20px 0;
  background-color: rgba(227,242,253,.7) !important;
  transition: all .3s ease;
}
.navbar.shrink {
  padding: 10px 0;
  background-color: #e3f2fd !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.navbar-brand {
  font-size: 1.5rem;
  transition: .3s;
}
.navbar.shrink .navbar-brand {
  font-size: 1.2rem;
}
	
/* NAV LINK WIPE EFFECT - FINAL */
.navbar .nav-link {
  position: relative;
  color: #000;               /* HITAM saat normal */
  overflow: hidden;
  z-index: 1;
  transition: color .3s ease;
}

/* background wipe */
/*.navbar .nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0d6efd;
  //border-radius: 20px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: -1;
}

.navbar .nav-link:hover::before {
  transform: scaleX(1);
}*/

/* hover ONLY */
.navbar .nav-link:hover {
  color: #fff;               /* PUTIH saat hover */
}

.navbar .nav-link:hover::before {
  transform: scaleX(1);
}

.navbar .nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(13, 110, 253, 0.1) 0%, #0d6efd 100%);
  width: 0%;                        /* mulai dari 0 */
  transition: width .35s ease;
  z-index: -1;
}

.navbar .nav-link:hover::before {
  width: 100%;                      /* melebar sampai penuh */
  transform: none;                  /* hapus transform sebelumnya */
}
	

/* LOGO LIGHT EFFECT */
.light-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 30px;
}

.light-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  position: relative;

  /* PNG border glow */
  filter:
    drop-shadow(0 0 12px rgba(255,200,120,.6))
    drop-shadow(0 0 24px rgba(255,140,60,.4));
}

.light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: background .08s linear;
}
.pointer{
  cursor: pointer;
}

/* SERVICE CARD ANIMATION
.animate-card {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: all .8s ease-out;
}
.animate-card.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}*/

/* Semua <a> selain nav-link 
a:not(.nav-link) {
    font-weight: normal;         
    transition: font-weight 0.3s ease; 
}
a:not(.nav-link):hover {
    font-weight: bold;           
}*/

.btn, .form-control{
	border-radius: 20px;
}

/* SERVICE CARD ANIMATION */
.animate-card {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: all .8s ease-out;
}

.animate-card.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Blue light glow on specific card hover */
#webDevCard:hover, #konTICard:hover {
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.6),
              0 0 60px rgba(59, 130, 246, 0.4),
              0 0 90px rgba(59, 130, 246, 0.2) !important;
  transform: translateY(-5px);
  transition: all 0.4s ease-out;
}
#mobDevCard:hover, #training:hover {
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.6),
              0 0 60px rgba(34, 197, 94, 0.4),
              0 0 90px rgba(34, 197, 94, 0.2) !important;
  transform: translateY(-5px);
  transition: all 0.4s ease-out;
}
#snDevCard:hover, #distributor:hover {
  box-shadow: 0 0 30px rgba(234, 179, 8, 0.6),
              0 0 60px rgba(234, 179, 8, 0.4),
              0 0 90px rgba(234, 179, 8, 0.2) !important;
  transform: translateY(-5px);
  transition: all 0.4s ease-out;
}
/* All <a> except nav-link */
a:not(.nav-link) {
  font-weight: normal;
  text-decoration: none;
  transition: font-weight 0.3s ease;
}

a:not(.nav-link):hover {
  text-decoration: none;
}

#web, #sn {
  background-color: #f8f9fa;
}

#mobile, #g-kasio {
  background-color: #e9ecef;
}