:root{
  /* Colors inferred from your logo gradient */
  --grad-start: #0FA8A1;  /* teal (left) */
  --grad-end:   #2976A4;  /* blue (right) */

  /* Light theme flip */
  --bg:   #ffffff;
  --text: #111111;
  --muted:#444444;
  --card:#f6f7f9;
}

/* Global reset/typography */
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 2rem;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg,var(--grad-start),var(--grad-end)) 1;
  background:#fff;
  position:sticky; top:0; z-index:10;
}

.brand{display:flex; align-items:center; gap:1rem}
.logo{
  height:60px;        /* control ONE dimension so it never distorts */
  width:auto;
  display:block;
  object-fit:contain;
}
.brand-text p{color:var(--muted); margin-top:0.2rem}

/* Optional nav */
.nav a{
  color:var(--text);
  text-decoration:none;
  margin-left:1rem;
  font-weight:600;
}
.nav a:hover{
  background: linear-gradient(90deg,var(--grad-start),var(--grad-end));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Sections */
section{
  max-width: 980px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
h2{margin-bottom:1rem}
h3{margin-bottom:0.5rem}

/* Gradient text utility for headings */
.grad-text{
  background: linear-gradient(90deg,var(--grad-start),var(--grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- NEW: About (text + image side-by-side) ---------- */
.about-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;             /* allows stacking on narrow screens */
}
.about-text{ flex:1 1 50%; min-width:280px; }
.about-image{ flex:1 1 50%; min-width:280px; text-align:center; }
.about-img{
  max-width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* Services grid */
.services{
  display:grid;
  gap:1.5rem;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.service{
  background:var(--card);
  border:1px solid #e5e7eb;
  border-left:6px solid transparent;
  border-image: linear-gradient(180deg,var(--grad-start),var(--grad-end)) 1;
  padding:1.25rem 1.25rem 1.25rem 1rem;
  border-radius:10px;
}
.service p{color:#333}

/* Gradient rule separator */
.rule{
  height:4px;
  border:0;
  background: linear-gradient(90deg,var(--grad-start),var(--grad-end));
  margin: 0 auto;
  max-width:980px;
}

/* Contact */
.contact{text-align:center}
.contact a{
  color:var(--text);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid transparent;
  border-image: linear-gradient(90deg,var(--grad-start),var(--grad-end)) 1;
}
.contact a:hover{
  background: linear-gradient(90deg,var(--grad-start),var(--grad-end));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Footer */
footer{
  text-align:center;
  padding:1rem;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg,var(--grad-start),var(--grad-end)) 1;
  color:#555;
  background:#fff;
}

/* Hero (if you still use it elsewhere) */
.hero { text-align: center; margin: 2rem auto; }
.hero-img {
  max-width: 700px; width: 90%; height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 800px){
  .services{grid-template-columns:1fr}
  .logo{height:52px}
  .brand{flex-direction:column; align-items:flex-start}
  /* Stack About content on small screens */
  .about-flex{flex-direction:column}
  .about-image{text-align:center}
}