/* File: style.css
   Customize colors, fonts and layout. Keep all site-wide styles here.
   Replace color variables if you want a different palette.
*/
:root{
  --primary:#0b6ea6; /* blue */
  --accent:#0fb3a3;  /* teal */
  --muted:#6c7a89;
  --bg:#ffffff;
  --card-radius:14px;
  --shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
  --max-width:1100px;
}

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #222;
  background: var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Header/logo */
.logo{ width:48px; height:48px; object-fit:cover; border-radius:8px; }

/* Hero */
.hero{ background: linear-gradient(90deg, rgba(11,110,166,0.05), rgba(15,179,163,0.03)); }
.hero-portrait{ width:320px; max-width:90%; border-radius:16px; }

/* Cards */
.card{ border-radius: var(--card-radius); box-shadow: var(--shadow); }

/* Buttons */
.btn-primary{ background: var(--primary); border-color: var(--primary); }
.btn-primary:hover{ background: #095c83; border-color: #095c83; }

/* Service cards hover */
.service-card { transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(16,24,40,0.12); }

/* Testimonials */
.testimonial { border-left: 4px solid var(--accent); }

/* Footer */
footer{ background: transparent; }

/* Responsive tweaks */
@media (max-width: 768px){
  .hero{ text-align:center; }
}
.card-img-top {
  width: 100%;              /* take full card width */
  height: 220px;            /* fixed medium height */
  object-fit: cover;        /* crop image nicely without stretching */
  border-radius: 6px;       /* optional: rounded corners */
}

/* Accessibility: focus styles */
a:focus, button:focus, input:focus { outline: 3px solid rgba(11,110,166,0.15); outline-offset:2px; }