:root{
  --bg: #FFFFFF;
  --muted-bg: #F8F9FA; /* hero subtle background */
  --text: #0b0b0b;
  --muted: #6b7280;
  --accent: #eb3535; /* blue accent */
  --card-shadow: 0 8px 20px rgba(16,24,40,0.06);
  --radius: 14px;
  --container: 1180px;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--bg));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

header{
  width: 100%;
}

.wrap { max-width:var(--container); margin:0 auto; padding:0px 24px; }

/* Hero */
.hero-bout{
  background:var(--muted-bg);
  border-radius:18px;
  padding:0px 48px;
  display:flex;
  gap:40px;
  align-items:center;
  margin:0px 0 36px;
  padding-bottom: 54px;
}
.hero-left{ flex:1; min-width:320px; }
.hero-bout h1{
  margin:0 0 18px;
  font-size:48px;
  line-height:1.03;
  font-weight:800;
}
.hero-bout p{ margin:0 0 22px; color:var(--muted); max-width:62ch; font-size:18px; }
.btn-primary{
  display:inline-block;
  background:linear-gradient(180deg,var(--accent),#eb3535);
  color:white;
  padding:14px 22px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(20,121,255,0.18);
}

.hero-right{
  width:420px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--card-shadow);
  background:white;
  min-height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-right img{ width:100%; height:22em; object-fit:cover; display:block; }

/* Two-column content */
.two-col{ display:grid; grid-template-columns: 1fr 420px; gap:40px; align-items:start; margin-bottom:42px; }
.story h2{ margin:0 0 14px; font-size:28px;}
.story p{ color:var(--muted); font-size:16px; margin:0; }
.story .main{ margin-top:16px; color:var(--muted) }

.rounded-img{
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--card-shadow);
}
.rounded-img img{ width:100%; height:100%; object-fit:cover; display:block; }

#what-title{
  font-size:24px; margin:0 0 14px;
}
/* Service cards */
.services{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:18px;
  margin:32px 0 40px;
}
.service-card{
  background:white;
  border-radius:12px;
  padding:20px;
  box-shadow:var(--card-shadow);
  display:flex;
  gap:14px;
  align-items:center;
  border:1px solid rgba(20,24,30,0.04);
}
.service-icon{
  width:56px;height:56px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(20,121,255,0.12), rgba(20,121,255,0.06));
  color:var(--accent); font-size:22px;
}
.service-card h3{ margin:0; font-size:16px; }
.service-card p{ margin:6px 0 0; color:var(--muted); font-size:14px; }

/* Facilities & gallery */
.facilities{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:36px;
  align-items:start;
  margin-bottom:40px;
}

.facilities h3{
  font-size:24px; margin:0 0 10px;
}
.facilities h4{
  margin:0 0 12px;
}
.facilities p{
  color:var(--muted); margin:0 0 12px;
}
.button-cek{
  margin-top:18px;
}
.gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
}
.gallery .item{ border-radius:12px; overflow:hidden; box-shadow:var(--card-shadow); background:#f6f6f6; }
.gallery img{ width:100%; height:180px; object-fit:cover; display:block; }

/* Why choose */
.why{
  display:flex;
  gap:28px;
  align-items:flex-start;
  margin:26px 0 48px;
  flex-wrap:wrap;
  padding-left: 0px;
  padding-right: 0px;
}
.why .fact{
  min-width:220px;
  display:flex;
  gap:12px;
  align-items:center;
}
.why .fact .ico{
  width:46px;height:46px;border-radius:10px;background:linear-gradient(180deg, rgba(20,121,255,0.12), rgba(20,121,255,0.06)); color:var(--accent); display:flex;align-items:center;justify-content:center; font-size:18px;
}
.fact h4{ margin:0; font-size:16px; }
.fact p{ margin:4px 0 0; color:var(--muted); font-size:14px; }


/* Responsive */
@media (max-width:980px){
  .two-col, .facilities{ grid-template-columns: 1fr; }
  .hero-bout{ flex-direction:column; align-items:flex-start; }
  .hero-right{ width:100%; min-height:250px; }
  .services{ grid-template-columns: 1fr; }
  .gallery img{ height:140px; }
}

#story-title{
  font-weight: bold;
}
#what-title{
  font-weight: bold;
}
#facilities-title{
 font-weight: bold; 
}
#why-title{
  font-size:24px; margin:0 0 16px;font-weight: bold;
}