*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html, body{
  width: 100%;
  overflow-x: hidden;
}

body{
  scroll-behavior: smooth;
  font-family: 'Roboto Slab', sans-serif;
}

/* Hero Section */
.hero{
  background: url('assets/blue.jpg') right / cover no-repeat;
  display: flex;
  align-items: flex-start;     /* fixed */
  justify-content: flex-start; /* fixed */
  position: relative;
  min-height: 75vh;
  font-family: 'Condensed Sans-Serif', Impact, sans-serif;
  color: #384840;
  text-shadow: 0 0 6px rgba(225, 14, 14, 0.6); /* fixed */
}

/* inline list */
ul.inline-list{
  padding: 0;
  list-style: none;
  text-align: center;
}

ul.inline-list li{
  display: inline-block;
  margin: 0 15px;
  font-size: 14px;
  padding-left: 0; /* prevent global li padding issue */
}

ul.inline-list li:not(:last-child):after{
  content: " \2022";
  margin-left: 15px;
  color: #888;
}

.package-icon{
  width: 70px;
  height: 70px;
  fill: #007bff;
}

.nav-container{
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  flex-wrap: wrap; /* helps on mobile */
}

.icon-container{
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: larger;
}

.header1{
  font-family: 'Condensed Sans-Serif', Impact, sans-serif;
  color: #fff;
}

.lead{ color: #fff; }

.btn{ font-family: 'Roboto', sans-serif; }

.header2{
  font-size: 50px; /* fixed */
}

.fw-light{
  font-family: Roboto, sans-serif;
}

.navbar{ color: white !important; }
.nav-link{ color: white !important; }

.header-content{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px; /* helps on mobile */
  flex-wrap: wrap; /* helps on mobile */
}

/* Navbar */
.navbar-brand{
  font-family: Calibri, serif;
  font-size: clamp(18px, 5vw, 32px); /* responsive */
  font-weight: 700;
  color: #080202;
  background-color: #fff;
  white-space: nowrap;
}

/* IMPORTANT: remove global UL/LI layout breakers */
ul{
  display: block;              /* fixed */
  text-align: left;
  list-style-position: inside;
}

li{
  padding-left: 0;             /* fixed */
}

/* Clients Section (FIXED) */
.clients{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* fixed */
  gap: 16px;
  align-items: center;
  justify-items: center;
  width: 100%;
}

.clients img{
  width: 100%;
  max-width: 220px;
  height: auto;                /* fixed */
  object-fit: contain;
  display: block;
}

/* Sambutan direktur */
.sambutandirektur{
  font-family: 'Roboto Slab', sans-serif;
  color: #333;
}

/* visi dan misi */
.visimisi{
  font-family: 'Roboto Slab', sans-serif;
  line-height: 1.6;
  color: #333;
}

.services, .contact, .footer{
  font-family: 'Roboto Slab', sans-serif;
}

.navMenu{
  font-family: 'Roboto Slab', sans-serif;
  color: #8d09d9;
}

.mission{
  text-align: left; /* fixed */
}

.nav-item{
  font-family: Calibri, serif;
  font-weight: bold;
  font-size: clamp(16px, 4.5vw, 22px); /* responsive */
  color: #f4f9fe;
}

.contact-grid{
  display: inline-block;
  text-align: left;
}

.contact-item{
  display: grid;
  grid-template-columns: 30px 140px 15px 1fr;
  align-items: center;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.contact-item i{
  color: #0033cc;
  font-size: 1.2rem;
}

.contact-item strong{ font-weight: 600; }

.separator{ text-align: center; }

@media (max-width: 576px){
  .contact-item{
    grid-template-columns: 30px 100px 15px 1fr;
    font-size: 0.9rem;
  }
}

/* Logo container */
.logo-container{
  background-color: #1f232b;
  color: #fff;
  border: none;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; /* mobile friendly */
}

.logo-container span,
.logo-container h1{
  color: #fff;
}

/* Safety: prevent any element from forcing width */
img, svg, video{
  max-width: 100%;
  height: auto;
}

@media (min-width: 992px){
  #NavMain .navbar-nav .nav-link{
    font-size: 1.35rem;
    font-weight: 700;
    padding: 12px 18px;
  }
  #NavMain .navbar-nav{ gap: 36px; }
}

/* Smooth Transition for Sections */
.reveal-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Improves mobile performance */
}

.reveal-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fix for smooth scrolling behavior */
:target {
    scroll-margin-top: 90px; /* Matches your navbar height */
}

/* Hover effect for back-to-top */
#btn-back-to-top {
    transition: all 0.3s ease;
    opacity: 0;
}
#btn-back-to-top:hover {
    transform: scale(1.1);
    background-color: #00008b;
}

.hero-title{
      font-size: clamp(40px, 10vw, 110px);
      line-height: 1;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .hero-subtitle{
      font-size: clamp(16px, 4.5vw, 28px);
    }
    .hero-desc{
      font-size: clamp(14px, 3.8vw, 20px);
    }

    /* Navbar brand responsive */
    .brand-text{
      font-size: clamp(14px, 4.2vw, 24px);
      white-space: normal;
      line-height: 1.1;
    }
    @media (max-width: 576px){
      .brand-logo{ height: 56px !important; }
      .navbar{ padding-top: 12px !important; padding-bottom: 12px !important; }
    }