:root{
  --brand:#009fbf;
  --brand-soft: rgba(0,159,191,0.12);
  --brand-bg:#f1fbfe;

  --dark:#2e2e2e;
  --gray:#666;
  --light:#f6f8f9;
  --white:#ffffff;

  --shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.07);
  --radius: 6px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:"Segoe UI", Arial, sans-serif;
}

body{
  color:var(--dark);
  line-height:1.6;
  background:var(--white);
}

a{ text-decoration:none; color:inherit; }

/* LAYOUT */
.container{
  width:90%;
  max-width:1100px;
  margin:auto;
}

.center{ text-align:center; }

.section{ padding:60px 0; }

.light-bg{ background:var(--light); }

.mt-30{ margin-top:30px; }

/* TYPOGRAPHY */
h1{ font-size:2.3rem; }
h2{
  margin-bottom:15px;
  color:var(--brand);
}
h3{ color:var(--brand); }

.lead{
  max-width:750px;
  margin:auto;
  color:var(--gray);
}

.muted{ color:var(--gray); }

/* HEADER / NAV */
.header{
  background:var(--white);
  border-bottom:1px solid #eee;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 0;
}

.logo{
  height:55px;
  max-width:220px;
  object-fit:contain;
}

nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  flex-wrap:wrap;
}

nav a{
  margin-left:0;
  color:var(--dark);
  font-weight:600;
  padding:8px 10px;
  border-radius:4px;
}

nav a:hover{
  color:var(--brand);
  background:rgba(0,159,191,0.08);
}

/* HERO */
.hero{
  background: linear-gradient(rgba(0,159,191,0.85), rgba(0,159,191,0.85)),
    url("../images/hero.jpg") center/cover no-repeat;
  color:var(--white);
  padding:90px 0;
}

.hero-content{ max-width:700px; }

.hero h1{
  font-size:3rem;
  margin-bottom:15px;
}

.hero p{
  font-size:1.1rem;
  margin-bottom:25px;
}

/* PAGE HERO */
.page-hero{
  padding:70px 0;
  background:var(--brand-bg);
  border-bottom:1px solid #e6f3f7;
}

.page-hero h1{
  font-size:2.3rem;
  color:var(--brand);
  margin-bottom:10px;
}

.page-hero p{
  max-width:800px;
  color:var(--gray);
  font-size:1.05rem;
}

/* BUTTONS */
.btn{
  display:inline-block;
  padding:12px 26px;
  border-radius:4px;
  font-weight:700;
  border:2px solid transparent;
  cursor:pointer;
}

.btn + .btn{ margin-left:10px; }

/* Primary: white button with brand text (works on hero + CTA) */
.btn.primary{
  background:var(--white);
  color:var(--brand);
}

.btn.primary:hover{
  background:#e6f6fa;
}

/* Secondary: brand outline button for white/light backgrounds */
.btn.secondary{
  background:transparent;
  border-color:var(--brand);
  color:var(--brand);
}

.btn.secondary:hover{
  background:rgba(0,159,191,0.08);
}

/* Secondary on hero: force white outline/text */
.hero .btn.secondary{
  border-color:var(--white);
  color:var(--white);
}

.hero .btn.secondary:hover{
  background:rgba(255,255,255,0.15);
}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:25px;
  margin-top:40px;
}

.card{
  background:var(--white);
  padding:25px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

.card h3{
  color:var(--brand);
  margin-bottom:10px;
}

/* CTA */
.cta{
  background:var(--brand);
  color:var(--white);
  padding:70px 0;
}

.cta h2{ color:var(--white); }

/* FOOTER */
.footer{
  background:#111;
  color:#ccc;
  padding:30px 0;
  font-size:0.9rem;
}

.footer-content p{ margin-bottom:8px; }

.footer .small{
  font-size:0.8rem;
  color:#888;
}

/* CERTIFICATE VERIFICATION */
.verify-form{ margin-top:30px; }

.verify-input{
  width:100%;
  max-width:420px;
  padding:14px;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:1rem;
}

.verify-box{
  max-width:600px;
  margin:40px auto;
  padding:30px;
  border-radius:var(--radius);
  text-align:left;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.verify-box.valid{
  border-left:6px solid var(--brand);
  background:var(--brand-bg);
}

.verify-box.invalid{
  border-left:6px solid #999;
  background:#f7f7f7;
}

.verify-box h3{
  margin-bottom:15px;
  color:var(--brand);
}

.verify-box.invalid h3{ color:#555; }

.verify-box p{ margin-bottom:8px; }

/* ABOUT PAGE */
.two-col{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:30px;
  align-items:start;
}

.lead.left{
  margin:0 0 12px 0;
  max-width:720px;
  color:var(--gray);
}

.highlight-box,
.vision-box,
.mission-box{
  background:var(--white);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-sm);
  border-left:6px solid var(--brand);
}

.clean-list{
  margin-top:10px;
  padding-left:18px;
  color:var(--dark);
}

.clean-list li{ margin-bottom:10px; }

.partner-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:22px;
}

.partner-list span{
  border:1px solid #d6eef5;
  background:#fff;
  padding:10px 14px;
  border-radius:999px;
  color:var(--dark);
  font-weight:700;
}

/* PROGRAMS PAGE */
.program-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:22px;
  margin-top:25px;
}

.program-tile{
  display:block;
  background:#fff;
  padding:26px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border-left:6px solid var(--brand);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}

.program-tile:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.program-tile h3{ margin-bottom:10px; }
.program-tile p{ color:var(--gray); margin-bottom:12px; }
.program-link{ font-weight:800; color:var(--dark); }

/* PROGRAM DETAIL PAGES */
.program-intro{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:22px;
  margin-bottom:25px;
}

.program-note p{ color:var(--gray); margin-top:10px; }

.program-side{
  background:#fff;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow-sm);
  border-left:6px solid var(--brand);
}

.table-wrap{ overflow-x:auto; margin-top:14px; }

.data-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.data-table th{
  text-align:left;
  background:var(--brand-soft);
  color:var(--dark);
  padding:14px;
  font-weight:800;
}

.data-table td{
  padding:14px;
  border-top:1px solid #eee;
  color:var(--dark);
}

.info-strip{
  margin-top:18px;
  padding:16px 18px;
  border-left:6px solid var(--brand);
  background:var(--brand-bg);
  border-radius:var(--radius);
  color:var(--dark);
}

.info-strip p{ margin-bottom:6px; }
.info-strip p:last-child{ margin-bottom:0; }

.page-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

.list-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:18px;
  margin-top:14px;
}

.mini-card{
  background:#fff;
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border-left:6px solid var(--brand);
}

.mini-card h3{ margin-bottom:8px; }
.mini-card p{ color:var(--gray); }

/* QUOTATION + CONTACT PAGES */
.form-wrap{
  max-width:900px;
  margin:0 auto;
}

.quote-form{
  background:#fff;
  padding:26px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border-left:6px solid var(--brand);
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}

.form-grid .full{ grid-column:1 / -1; }

label{
  display:block;
  font-weight:800;
  margin-bottom:6px;
  color:var(--dark);
}

input, select, textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:1rem;
}

textarea{ resize:vertical; }

.small-note{
  margin-top:14px;
  color:var(--gray);
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}

.contact-card{
  background:#fff;
  padding:26px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border-left:6px solid var(--brand);
}

.contact-item{ margin-top:14px; }

.contact-item .label{
  display:block;
  font-weight:800;
  color:var(--dark);
  margin-bottom:4px;
}

.contact-item .value{ color:var(--gray); }

.contact-note{
  margin-top:18px;
  padding:14px 16px;
  background:var(--brand-bg);
  border-radius:var(--radius);
  border-left:6px solid var(--brand);
  color:var(--dark);
}

/* RESPONSIVE */
@media (max-width: 860px){
  .two-col{ grid-template-columns:1fr; }
  .program-intro{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width: 768px){
  .nav{
    flex-direction:column;
    align-items:center;
  }
  nav{
    justify-content:center;
    gap:10px;
  }
  .hero h1{ font-size:2.2rem; }
}