/* =========================
   THEME
   ========================= */
   
:root{
  --navy:#0a1f44;
  --navy-900:#071634;
  --navy-700:#0e285f;
  --ink:#0f172a;
  --muted:#6b7280;
  --border:#dbe2ef;
  --white:#ffffff;
  --bg:#f7f9fc;
  --gold:#ffd700;
}

/* =========================
   BASE / TYPOGRAPHY
   ========================= */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

h1,h2,h3{margin:0 0 .5rem;}
h1{font-size:2rem;line-height:1.25;}
h2{font-size:1.6rem;line-height:1.3;}
p{margin:0 0 1rem;}
.mini{color:var(--muted);font-size:.95rem;}

.container{max-width:1100px;margin:0 auto;padding:0 20px;}

/* =========================
   HEADER / NAV
   ========================= */
.header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-900) 100%);
  color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 20px rgba(10,31,68,.15);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.logo {
  height: 36px;           /* adjust as needed */
  width: auto;            /* keeps proportions */
  display: block;
}

.brand img { height: 40px; display: block; }
  .menu { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
  .menu a { color: #fff; text-decoration: none; font-weight: 600; }
  .menu a:hover { text-decoration: underline; }

/* Links */
.links {
  display: flex;
  gap: 15px;
  align-items: center;
}

.pill {
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--white);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pill::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.pill:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}

.pill:hover::after,
.pill.is-active::after {
  transform: scaleX(1);
}

.pill.is-active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Burger button */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 2px;
  background: #fff;
  margin: 7px 0;
  transition: 0.2s;
}
/* =========================
   ABOUT: FOUNDER SECTION
   ========================= */
.founder-section {
  padding: 80px 0;
  background: #f7f9fc;
}

/* GRID LAYOUT */
.founder-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr;
  gap: 70px; /* more gap between image and text */
  align-items: center;
  max-width: 1100px;
  margin: auto;
}

/* LEFT SIDE */
.founder-photo-box {
  text-align: center;
}

.founder-photo {
  width: 100%;
  max-width: 460px; /* larger image */
  border-radius: 18px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.6); /* slight blend */
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12); /* soft professional shadow */
}

/* NAME + ROLE */
.founder-name {
  font-size: 2rem;
  font-weight: 800;
  margin-top: 20px;
  margin-bottom: 6px;
  color: #0a1f44;
}

.founder-title {
  color: #64748b;
  font-weight: 600;
  margin-bottom: 16px;
  font-size: 0.95rem;
}

/* SOCIAL ICONS */
.founder-socials {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.founder-socials a svg {
  width: 34px;
  height: 34px;
  fill: #0a1f44;
  transition: 0.25s ease;
}

.founder-socials a:hover svg {
  fill: #0d3ecf;
  transform: translateY(-3px);
}

/* RIGHT SIDE TEXT */
.founder-text h2 {
  font-size: 2.4rem;
  margin-bottom: 16px;
  color: #0a1f44;
}

.founder-text p {
  line-height: 1.75;
  margin-bottom: 16px;
  color: #0f172a;
  font-size: 1rem;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .founder-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .founder-text h2 {
    font-size: 2rem;
  }
}



/* =========================
   WHY CHOOSE US
   ========================= */
.why-choose{
  max-width:1100px; margin:50px auto; padding:0 20px;
  display:flex; flex-wrap:wrap; align-items:center; gap:40px;
}
/* Why Choose Us Image Card (blend into background) */
.why-img {
  background: #f7f9fc; /* exact same as page background */
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04); /* ultra soft shadow */
  display: flex;
  justify-content: center;
  align-items: center;
}

.why-img img {
  width: 100%;
  max-width: 380px;
  filter: drop-shadow(0px 4px 12px rgba(0,0,0,0.08)); /* blends illustration softly */
}

/* .why-img{flex:1 1 420px;}
.why-img img{width:100%; display:block; border-radius:12px; box-shadow:0 10px 28px rgba(10,31,68,.08);}
.why-list{flex:1 1 420px;} */
.why-list h2{color:#0b1a36; margin-bottom:16px;}
.why-list ul{list-style:none; padding:0; margin:0;}
.why-list li{margin-bottom:16px; font-weight:bold; color:#0b1a36;}
.why-list li span{display:block; font-weight:normal; color:#374151;}

/* =========================
   FOOTER
   ========================= */
.footer{
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center; padding:24px 20px; color:var(--gold);
}
.footer .container{max-width:900px;}
.footer p{margin:.25rem 0;}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 900px){
  .burger{display:block;}
.links {
    position: absolute;
    right: 20px;
    top: 64px;
    width: 220px;
    flex-direction: column;
    background: var(--navy);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 39px;
    display: none;
  }
  /* .links{
    position:absolute; right:20px; top:64px; width:220px;
    flex-direction:column; background:var(--navy);
    border:1px solid rgba(255,255,255,.15); border-radius:12px;
    padding:15px; display:none;
  } */
  .links.open{display:flex;}

  .about-overlay{padding:52px 20px;}
  .about-left h2{font-size:1.7rem;}
  .about-left p{font-size:1rem;}

  .why-choose{margin:36px auto; gap:24px;}
}

/* Larger screens – give the about intro more presence */
@media (min-width: 1024px){
  .about-container{
    grid-template-columns: 1.1fr;
  }
}

/* =========================
   ACCESSIBILITY FOCUS (general)
   ========================= */
a:focus-visible, button:focus-visible{
  outline:3px solid rgba(255,215,0,.35);
  outline-offset:2px;
}