/* Respect GS1 guideline: fluid type, root 100% */
html { font-size: 100%; }

/* Colors from guideline */
:root{
  --gs1-blue: #0A3E82;
  --gs1-blue-dark:#062B5A;
  --gs1-navy:#002C6C;
  --gs1-cta:#F36F21;
  --gs1-cta-dark:#d85f1b;
  --line:#e3e7ec;
  --line-soft:#edf1f5;
}

/* Meta + header + nav (SG look) */
.sg-meta a{ color:#5f6b7a; text-decoration:none; }
.sg-meta a:hover{ color:#2c3e50; text-decoration:underline; }

.sg-header{ background:#fff; }
.sg-brand h5{ font-family:"GS1 Display","GS1 Sans",Verdana,Arial,sans-serif; font-weight:700; color:#23395b; }
.sg-brand small{ color:#6b7785; }

.sg-nav{
  background:#fff;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.sg-nav .nav-link{
  color:var(--gs1-blue) !important; font-weight:700; padding:.85rem 1rem;
}
.sg-nav .nav-link:hover{ color:var(--gs1-blue-dark)!important; }

/* Hero – crisp images + subtle overlay (no image opacity) */
.hero{ position:relative; background:var(--gs1-navy); color:#fff; overflow:hidden; }
.hero .slide{ position:relative; min-height:28rem; }
.hero .slide-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; /* no opacity here */
}
.hero .overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,44,108,.55), rgba(0,44,108,.55));
  pointer-events:none;
}
.hero .carousel-indicators [data-bs-target]{ width:10px; height:10px; border-radius:50%; }
.hero .carousel-control-prev, .hero .carousel-control-next{
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.35); top:50%; transform:translateY(-50%);
}
.hero .carousel-control-prev:hover, .hero .carousel-control-next:hover{
  background:rgba(255,255,255,.55);
}

/* CTA buttons aligned with guideline palette */
.btn-gs1-primary{ background:var(--gs1-blue); color:#fff; border-radius:.5rem; }
.btn-gs1-primary:hover{ background:var(--gs1-blue-dark); color:#fff; }
.btn-gs1-orange{ background:var(--gs1-cta); color:#fff; border-radius:.5rem; }
.btn-gs1-orange:hover{ background:var(--gs1-cta-dark); color:#fff; }

/* Services cards */
.services-section{ background:#f8f9fb; }
.service-item{
  background:#fff; border-left:4px solid var(--gs1-blue);
  border-radius:.5rem; padding:1.375rem; margin-bottom:1.125rem;
}

/* Footer (transparent like SG) */
footer{ background:transparent; padding:3rem 0 0; }
.ft-title{ color:var(--gs1-blue); font-weight:700; margin-bottom:.75rem; }
.ft-link{ display:block; color:var(--gs1-blue); text-decoration:none; margin:.35rem 0; }
.ft-link:hover{ color:var(--gs1-blue-dark); text-decoration:underline; }
.ft-join{ background:#fff; border:1px solid var(--line); border-radius:.5rem; padding:1rem 1.25rem; }
.ft-join .btn{ background:var(--gs1-cta); color:#fff; }
.ft-join .btn:hover{ background:var(--gs1-cta-dark); }
.ft-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid var(--gs1-blue);
  border-radius:50%; color:var(--gs1-blue); margin-right:.5rem; text-decoration:none;
}
.ft-social a:hover{ background:var(--gs1-blue); color:#fff; }
.ft-legal{ border-top:1px solid var(--line); margin-top:1.75rem; padding:.75rem 0; }
.ft-legal a{ color:var(--gs1-blue); text-decoration:none; }
.ft-legal a:hover{ color:var(--gs1-blue-dark); text-decoration:underline; }

/* Helpers */
.icon-xl{ font-size:4.5rem; color:var(--gs1-blue); }
.section-title{ color:var(--gs1-blue); text-align:center; margin-bottom:2rem; }


/* Remove hero dimming */
.hero .overlay{
  background: none !important;   /* no gradient */
  display: none !important;      /* overlay off */
}
.hero .slide-img{
  opacity: 1 !important;         /* ensure full strength */
  filter: none !important;       /* no accidental filters */
}

/* Remove the hairline between meta strip and header */
.sg-meta { border-bottom: 0 !important; }

/* Safety: kill any guideline/Bootstrap hairlines under header/nav */
.sg-header, .sg-nav, header, nav {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* WHY GS1 MALAYSIA SECTION */
.gs1-why {
  position: relative;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 360px;
  padding: 3rem 0;
}
.gs1-why-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.gs1-why-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 22, 58, 0.72);
}
.gs1-why .container {
  position: relative;
  z-index: 2;
}
.why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "GS1 Sans", Verdana, sans-serif;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 400;
  max-width: 900px;
}
.why-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.why-list i {
  color: #5b9cff;
  font-size: 1.35rem;
  margin-right: 0.85rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.why-list span {
  flex: 1;
  white-space: normal;
}
.why-list strong {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* SERVICES SECTION */
.services-section {
  background: #f8f9fb;
}
.svc-imgcard {
  display: block;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 14px rgba(10, 31, 68, 0.08);
  transition: all 0.2s ease;
  height: 100%;
}
.svc-imgcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(10, 31, 68, 0.15);
}
.svc-imgcard img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.svc-titlebar {
  margin: 0;
  padding: 1rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: #0a3e82;
}

/* SUCCESS CASES SECTION */
.success-cases-section {
  background: #fff;
}
.success-tabs {
  border-bottom: 2px solid var(--line);
  margin-bottom: 2rem;
}
.success-tabs .nav-link {
  color: #5f6b7a;
  font-weight: 600;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1.5rem;
  transition: all 0.2s ease;
  background: transparent;
}
.success-tabs .nav-link:hover {
  color: var(--gs1-blue);
  border-bottom-color: var(--line-soft);
}
.success-tabs .nav-link.active {
  color: var(--gs1-cta);
  border-bottom-color: var(--gs1-cta);
  background: transparent;
}
.case-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(10, 31, 68, 0.08);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(10, 31, 68, 0.15);
}
.case-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.case-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.case-content h5 {
  color: var(--gs1-blue);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.case-content p {
  color: #5f6b7a;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.more-link {
  color: var(--gs1-cta);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}
.more-link:hover {
  color: var(--gs1-cta-dark);
  gap: 0.75rem;
}
.more-link i {
  transition: transform 0.2s ease;
}
.more-link:hover i {
  transform: translateX(3px);
}

/* Responsive adjustments for Success Cases */
@media (max-width: 991px) {
  .success-tabs .nav-link {
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
  }
  .case-img {
    height: 180px;
  }
  .case-content {
    padding: 1.25rem;
  }
  .case-content h5 {
    font-size: 1rem;
  }
}

@media (max-width: 767px) {
  .success-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .success-tabs .nav-link {
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }
  .case-card {
    margin-bottom: 1rem;
  }
}