:root{
  --brand:#5C3BFE;
  --blue:#0B63E5;
  --green:#32C971;
  --ink:#0f172a;
  --text:#1f2937;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --container:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#fff}
.container{width:92%;max-width:var(--container);margin-inline:auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 rgba(2,8,23,.06)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0;position:relative}
.logo img{height:42px}

.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:#334155;text-decoration:none;font-weight:700;padding:6px 2px}
.nav-links a.active{color:var(--brand);border-bottom:3px solid var(--brand)}

.btn{appearance:none;border:0;padding:10px 16px;border-radius:999px;font-weight:800;cursor:pointer}
.login-btn{background:var(--green);color:#fff;box-shadow:var(--shadow)}
.login-btn.full{width:100%}

/* Hamburger (hidden on desktop) */
.hamburger{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer}
.hamburger span{width:22px;height:2px;background:#111;border-radius:2px}

/* Mobile dropdown menu */
.mobile-menu{display:none;flex-direction:column;gap:14px;background:#fff;padding:16px;position:absolute;top:64px;right:0;width:220px;box-shadow:0 10px 30px rgba(15,23,42,.15);border-radius:12px}
.mobile-menu a{color:#334155;text-decoration:none;font-weight:600}
.mobile-menu.show{display:flex}

@media (max-width:860px){
  .nav-links{display:none}           /* hide desktop links */
  .login-btn{display:none}           /* hide desktop button */
  .hamburger{display:flex}           /* show burger */
}

/* Hero */
.hero{background:linear-gradient(180deg,#f7f9ff,#fff 40%);padding:54px 0}
.hero-content{display:grid;grid-template-columns:1.05fr 0.95fr;gap:28px;align-items:center}
.hero-text h1{margin:0 0 12px;font-size:48px;line-height:1.1;color:#4f66d8;text-transform:uppercase;letter-spacing:.02em}
.hero-text p{margin:0;color:#111;font-weight:700;letter-spacing:.12em}

/* Hero image: full width + transparent PNG */
.hero-image{width:100%}
.hero-image img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain; /* keeps full illustration visible */
}

/* Responsive hero */
@media (max-width:980px){
  .hero-content{grid-template-columns:1fr;text-align:center}
  .hero-text h1{font-size:32px}
  .hero-text p{letter-spacing:.08em}
}

/* demo padding for test sections */
.pad{height:40vh;background:#f8fafc;border-top:1px solid #eef2ff}


/* Feature strip */
.feature-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  margin:0;                 /* edge-to-edge like your shot */
}

.feature-tile{
  padding:64px 28px;
  text-align:center;
}

.feature-tile h3{
  font-size:48px;           /* big titles */
  line-height:1.05;
  letter-spacing:.04em;
  margin:0 0 24px;
  font-weight:800;
}

.feature-tile p{
  max-width:880px;          /* keeps lines readable on wide screens */
  margin:0 auto;
  font-size:22px;
  line-height:1.7;
}

/* Colors to match */
.tile-aqua{
  background:#17e7bf;       /* teal/aqua like the design */
  color:#111;
}

.tile-blue{
  background:#0b63e5;       /* strong blue center */
  color:#fff;
}

/* Responsive stacking */
@media (max-width: 992px){
  .feature-strip{ grid-template-columns:1fr; }
  .feature-tile{ padding:48px 22px; }
  .feature-tile h3{ font-size:36px; }
  .feature-tile p{ font-size:18px; }
}


/* About section */
.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  padding:90px 0;
}

.about-image img{
  width:100%;
  max-width:480px;
  display:block;
  margin:auto;
}

.about-text .section-label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#2563eb;         /* bright blue label */
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:18px;
}

.about-text h2{
  font-size:34px;
  font-weight:700;
  line-height:1.3;
  margin:0 0 20px;
  color:#111;
}

.about-text p{
  font-size:18px;
  line-height:1.7;
  margin:0 0 32px;
  color:#444;
}

/* Button */
.btn-outline{
  display:inline-block;
  padding:12px 28px;
  border:2px solid #2563eb;
  color:#2563eb;
  font-weight:600;
  text-decoration:none;
  border-radius:6px;
  transition:.3s ease;
}
.btn-outline:hover{
  background:#2563eb;
  color:#fff;
}

/* Responsive */
@media(max-width: 960px){
  .about{
    grid-template-columns:1fr;
    text-align:center;
  }
  .about-image img{
    max-width:360px;
  }
}

/* About section */
.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  padding:90px 0;
}

.about-image img{
  width:100%;
  max-width:480px;
  display:block;
  margin:auto;
}

.about-text .section-label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#2563eb;         /* bright blue label */
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:18px;
}

.about-text h2{
  font-size:34px;
  font-weight:700;
  line-height:1.3;
  margin:0 0 20px;
  color:#111;
}

.about-text p{
  font-size:18px;
  line-height:1.7;
  margin:0 0 32px;
  color:#444;
}

/* Button */
.btn-outline{
  display:inline-block;
  padding:12px 28px;
  border:2px solid #2563eb;
  color:#2563eb;
  font-weight:600;
  text-decoration:none;
  border-radius:6px;
  transition:.3s ease;
}
.btn-outline:hover{
  background:#2563eb;
  color:#fff;
}

/* Responsive */
@media(max-width: 960px){
  .about{
    grid-template-columns:1fr;
    text-align:center;
  }
  .about-image img{
    max-width:360px;
  }
}

/* About section */
.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  padding:90px 0;
}

.about-image img{
  width:100%;
  max-width:480px;
  display:block;
  margin:auto;
}

.about-text .section-label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#2563eb;         /* bright blue label */
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:18px;
}

.about-text h2{
  font-size:34px;
  font-weight:700;
  line-height:1.3;
  margin:0 0 20px;
  color:#111;
}

.about-text p{
  font-size:18px;
  line-height:1.7;
  margin:0 0 32px;
  color:#444;
}

/* Button */
.btn-outline{
  display:inline-block;
  padding:12px 28px;
  border:2px solid #2563eb;
  color:#2563eb;
  font-weight:600;
  text-decoration:none;
  border-radius:6px;
  transition:.3s ease;
}
.btn-outline:hover{
  background:#2563eb;
  color:#fff;
}

/* Responsive */
@media(max-width: 960px){
  .about{
    grid-template-columns:1fr;
    text-align:center;
  }
  .about-image img{
    max-width:360px;
  }
}

/* About section */
.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  padding:90px 0;
}

.about-image img{
  width:100%;
  max-width:480px;
  display:block;
  margin:auto;
}

.about-text .section-label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#2563eb;         /* bright blue label */
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:18px;
}

.about-text h2{
  font-size:34px;
  font-weight:700;
  line-height:1.3;
  margin:0 0 20px;
  color:#111;
}

.about-text p{
  font-size:18px;
  line-height:1.7;
  margin:0 0 32px;
  color:#444;
}

/* Button */
.btn-outline{
  display:inline-block;
  padding:12px 28px;
  border:2px solid #2563eb;
  color:#2563eb;
  font-weight:600;
  text-decoration:none;
  border-radius:6px;
  transition:.3s ease;
}
.btn-outline:hover{
  background:#2563eb;
  color:#fff;
}

/* Responsive */
@media(max-width: 960px){
  .about{
    grid-template-columns:1fr;
    text-align:center;
  }
  .about-image img{
    max-width:360px;
  }
}


/* Stats Section */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #0b63e5;   /* solid blue background */
  color: #fff;
  text-align: center;
  padding: 60px 20px;
  gap: 20px;
}

.stat h2 {
  font-size: 42px;
  margin: 0 0 10px;
  font-weight: 700;
}

.stat p {
  font-size: 18px;
  margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
  .stats {
    grid-template-columns: 2fr 2fr;
    row-gap: 40px;
  }
}

@media (max-width: 600px) {
  .stats {
    grid-template-columns: 1fr;
  }
}


/* Testimonials Section */
.testimonials {
  padding: 90px 20px;
  text-align: center;
}

.testimonials .section-label {
  font-size: 14px;
  font-weight: 700;
  color: #2563eb; /* blue */
  text-transform: uppercase;
  letter-spacing: .12em;
  display: block;
  margin-bottom: 16px;
}

.testimonials h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 48px;
  color: #111;
}

.testimonial-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.testimonial-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 30px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: transform .3s ease, box-shadow .3s ease;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}

.testimonial-card p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 22px;
  color: #444;
}

.testimonial-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #111;
}

.testimonial-card span {
  font-size: 14px;
  color: #666;
}

/* Responsive */
@media (max-width: 992px) {
  .testimonial-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .testimonial-list {
    grid-template-columns: 1fr;
  }
}


.footer {
  background: #fff;
  border-top: 2px solid #14b8a6; /* green top border */
  padding: 50px 20px 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 30px;
}

.footer-about img {
  height: 42px;
  margin-bottom: 15px;
}

.footer-about p {
  margin-bottom: 20px;
  line-height: 1.6;
  max-width: 320px;
}

.social-links a {
  display: inline-block;
  margin-right: 8px;
  font-size: 16px;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  text-align: center;
  line-height: 34px;
  transition: opacity 0.3s;
}
.social-links a:hover {
  opacity: 0.8;
}
.social-links a:nth-child(1) { background: #3b5998; } /* FB */
.social-links a:nth-child(2) { background: #1da1f2; } /* Twitter */
.social-links a:nth-child(3) { background: #111; }    /* Instagram */
.social-links a:nth-child(4) { background: #0077b5; } /* LinkedIn */
.social-links a:nth-child(5) { background: #ff0000; } /* YouTube */

.footer-links h4,
.footer-office h4 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #14b8a6;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links ul li {
  margin-bottom: 8px;
}
.footer-links ul li a {
  text-decoration: none;
  color: #333;
  transition: color 0.3s;
}
.footer-links ul li a:hover {
  color: #2563eb;
}

.footer-office p {
  line-height: 1.6;
  max-width: 280px;
}

.footer-bottom {
  text-align: center;
  font-size: 14px;
  color: #555;
  border-top: 1px solid #e5e7eb;
  padding-top: 15px;
}
.footer-bottom span {
  color: red;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .footer-about p,
  .footer-office p {
    max-width: 100%;
  }
}

/* about */
.about-header {
  background: linear-gradient(180deg, #dffffa, #c6fff7); /* soft aqua gradient */
  padding: 60px 20px;
  text-align: center;
}

.about-header h2 {
  font-size: 36px;
  font-weight: 700;
  color: #000; /* black text */
  margin: 0;
}

.about-section {
  padding: 80px 20px;
  background: #fff;
}

.about-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  gap: 40px;
}

.about-text {
  flex: 1;
  min-width: 300px;
}

.about-text h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #111;
}

.about-text p {
  font-size: 16px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 16px;
}

.about-image {
  flex: 1;
  text-align: center;
}

.about-image img {
  max-width: 100%;
  height: auto;
}

/* Responsive */
@media (max-width: 992px) {
  .about-content {
    flex-direction: column;
    text-align: center;
  }
  .about-text h2 {
    font-size: 28px;
  }
}

/* Mission Vision Goals Section */
.mission-vision-goals {
  background: #fff;
  padding: 80px 20px;
  text-align: center;
}

.mission-vision-goals .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: auto;
}

.mission-vision-goals .card {
  padding: 20px;
}

.mission-vision-goals .icon {
  font-size: 48px; /* Replace with real icons if you want */
  margin-bottom: 20px;
  color: #0b63e5; /* blue */
}

.mission-vision-goals h3 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #0b63e5;
}

.mission-vision-goals p {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 992px) {
  .mission-vision-goals .container {
    grid-template-columns: 1fr;
  }
}
/* Director Section */
.director {
  padding: 80px 20px;
  background: #fff;
}

.director .section-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
  font-weight: bold;
}

.director-content {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1100px;
  margin: auto;
  flex-wrap: wrap;
}

.director-image img {
  width: 300px;
  border-radius: 8px;
  object-fit: cover;
}

.director-info {
  flex: 1;
}

.director-info h3 {
  font-size: 26px;
  color: #0b63e5; /* Blue highlight */
  margin-bottom: 8px;
}

.director-info h4 {
  font-size: 18px;
  margin-bottom: 16px;
  color: #444;
}

.director-info p {
  margin-bottom: 14px;
  line-height: 1.7;
  color: #333;
}

/* Responsive */
@media (max-width: 992px) {
  .director-content {
    flex-direction: column;
    text-align: center;
  }

  .director-image img {
    margin: auto;
  }
}

/* Services Intro Section */
.services-intro {
  padding: 80px 20px;
  background: #fff;
}

.services-intro-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.services-intro-image img {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
}

.services-intro-text {
  flex: 1;
  min-width: 300px;
  text-align: left;
}

.services-intro-text h2 {
  font-size: 42px;
  font-weight: 700;
  color: #111a3d; /* Dark navy */
  margin-bottom: 15px;
}

.services-intro-text p {
  font-size: 18px;
  color: #334155; /* Neutral gray-blue */
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 992px) {
  .services-intro-content {
    flex-direction: column;
    text-align: center;
  }

  .services-intro-text {
    text-align: center;
  }

  .services-intro-image img {
    margin: 0 auto;
  }
}
/* Services Grid */
.services-grid {
  padding: 80px 20px;
  background: #fff;
}

.services-grid .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}

.service-item img {
  max-width: 260px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}

.service-item h3 {
  font-size: 22px;
  font-weight: 600;
  color: #111;
  margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
  .services-grid .container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .services-grid .container {
    grid-template-columns: 1fr;
  }
}


/* ---------- Page hero (Contact) ---------- */
.page-hero {
  padding: 54px 0 28px;
  background: linear-gradient(180deg, #f7f9ff, #fff 60%);
  text-align: center;
}
.page-hero .narrow { max-width: 820px; }
.page-hero h1 { margin: 0 0 6px; font-size: 44px; font-weight: 800; color:#111a3d; }
.page-hero p { margin: 0; color:#475569; }

/* ---------- Contact layout ---------- */
.contact-wrap { padding: 36px 0 64px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
}
.contact-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 8px 28px rgba(2,8,23,.04);
}
.contact-card h2 {
  margin: 0 0 14px;
  font-size: 22px;
  color:#0f172a;
}

/* Form */
.contact-form { display: grid; grid-template-columns: 1fr; gap: 14px; }
.contact-form .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.contact-form label span { display:block; font-size:13px; color:#64748b; margin-bottom:6px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  color:#111827;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  background:#fff;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #5C3BFE;
  box-shadow: 0 0 0 3px rgba(92,59,254,.12);
}
.contact-form .submit-btn { background:#5C3BFE; color:#fff; }
.form-note { margin-top:8px; font-size:14px; color:#0f766e; }

/* Right column info */
.contact-info .info-row {
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 0; border-bottom:1px dashed #e5e7eb;
}
.contact-info .info-row:last-child { border-bottom:0; }
.contact-info i { width:28px; height:28px; line-height:28px; text-align:center; color:#2563eb; font-size:18px; }
.contact-social { margin-top:10px; display:flex; gap:10px; }
.contact-social a {
  width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;background:#2563eb;text-decoration:none;
}
.contact-social a:nth-child(2){ background:#1da1f2; }
.contact-social a:nth-child(3){ background:#111; }
.contact-social a:nth-child(4){ background:#0077b5; }
.contact-social a:nth-child(5){ background:#ff0000; }

/* Map */
.map-wrap { padding: 10px 0 60px; }
.map-embed { border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(15,23,42,.08); }
.map-embed iframe { width:100%; height:380px; border:0; }

/* Responsive */
@media (max-width: 980px){
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form .grid-2 { grid-template-columns: 1fr; }
  .page-hero h1{ font-size: 32px; }
}