/* style.css — global overrides and site styles (single file) */

/* Basic typographic reset */
:root {
  --brand-primary: #0d6efd; /* bootstrap primary by default */
  --brand-accent: #6c757d;
  --max-width: 1140px;
  --font-sans: "San", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

* { box-sizing: border-box; }
html,body { height:100%; }
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color: #222;
  background: #eaf7fb;
}

/* Header / Navbar */
.site-header .navbar-brand img {
  border-radius: 6px;
  object-fit: cover;
}

/* Hero (placeholder class) */
.section-hero {
  padding: 6rem 0;
}

/* Profile card */
.profile-photo {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(15,15,15,0.08);
}

/* Skills badges */
.skill-badge {
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.875rem;
  display:inline-block;
  margin: 0.15rem;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Project card */
/* Project card hero image */
.project-card { overflow: hidden; border-radius: 12px; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 10px 24px rgba(12,12,12,0.04); background: #fff; }
.project-thumb-img {
  display: block;
  width: 100%;
  height: 180px;             /* desktop card image height */
  object-fit: cover;
  object-position: center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Slightly taller hero on large screens */
@media(min-width: 1200px) {
  .project-thumb-img { height: 200px; }
}

/* Keep card content aligned */
.project-card .p-3 { padding: 1rem; }

/* Skill badge spacing */
.skill-badge { display:inline-block; padding:.18rem .5rem; border-radius:6px; background:rgba(0,0,0,0.04); font-size:.75rem; margin-right:.35rem; }

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(15,15,15,0.06);
}

/* Testimonials */
.testimonial {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), #f8f9fa);
  padding: 1.35rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.03);
}

/* Footer */
.site-footer {
  background: transparent;
  border-top: 1px solid rgba(0,0,0,0.04);
}

/* Utility: container constrained to max width */
.container-max {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
  .site-header .brand-text { display: none; } /* keep navbar compact on small */
  .profile-photo { width: 120px; height:120px; }
}
/* HERO-specific styles */
.section-hero { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.section-hero .display-5 { line-height: 1.05; }
.profile-card {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15,15,15,0.04);
}
.section-hero .lead { max-width: 56ch; }
@media (max-width: 991.98px) {
  .section-hero { padding-top: 3rem; padding-bottom: 3rem; }
  .section-hero .lead { max-width: none; }
}
/* ABOUT section */
#about { background: #fff; }
#about .card { border-radius: 12px; box-shadow: 0 6px 20px rgba(12,12,12,0.04); }
#about h2 { color: #111827; }
#about .small.text-muted { color: #6b7280; }
#about .border-start { border-left: 1px solid rgba(0,0,0,0.04); }
@media (max-width: 767.98px) {
  #about .border-start { border-left: none; border-top: 1px solid rgba(0,0,0,0.04); padding-top: 1rem; }
}
/* SKILLS & SERVICES */
#skills-services { color: #222; }
#skills-services .progress { background: rgba(0,0,0,0.05); border-radius: 999px; }
#skills-services .progress-bar { background: var(--brand-primary); border-radius: 999px; }

.service-card {
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 12px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(12,12,12,0.06);
}

/* ensure small text contrast and legibility */
#skills-services .small.text-muted { color: #6b7280; }

/* responsive spacing */
@media (max-width: 991.98px) {
  #skills-services { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}
/* FEATURED PROJECTS */
#featured-projects .project-thumb {
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: center;
  border-radius: 8px 8px 0 0;
}
#featured-projects .project-card { border-radius: 10px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); transition: transform .18s ease, box-shadow .18s ease; }
#featured-projects .project-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(12,12,12,0.06); }
#featured-projects .skill-badge { font-size: .75rem; padding:.25rem .5rem; margin-right:.35rem; margin-bottom:.25rem; }

/* Make the filters visually clear when active */
#projectFilters button.active {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
/* TESTIMONIALS & CLIENTS */
#testimonials-clients { color: #222; }
#testimonials-clients .testimonial {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.99), #fbfbfc);
  transition: transform .14s ease, box-shadow .14s ease;
}
#testimonials-clients .testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(12,12,12,0.05);
}
#testimonials-clients blockquote { margin: 0; font-style: normal; color: #111827; }
#testimonials-clients figcaption img { object-fit: cover; }
.clients-strip img { opacity: .95; filter: grayscale(0.05); }
@media (max-width: 575.98px) {
  #testimonials-clients .testimonial { padding: 1rem; }
}
/* ===== Contact page specific styles ===== */
#contact-page { padding: 3.5rem 0; }
#contact-page .card-form {
  background: #fff;
  border-radius: 12px;
  padding: 1.6rem;
  box-shadow: 0 12px 30px rgba(12,12,12,0.06);
  border: 1px solid rgba(0,0,0,0.03);
}
#contact-page .card-aside {
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid rgba(0,0,0,0.04);
  background: #fbfbfc;
}
#contact-page .form-label { font-weight: 600; font-size: .95rem; }
#contact-page .form-control {
  border-radius: 8px;
  height: 48px;
  padding: .625rem .75rem;
}
#contact-page textarea.form-control { min-height: 140px; height:auto; padding-top:.75rem; padding-bottom:.75rem; }

.btn-primary {
  border-radius: 10px;
  padding: .6rem 1.05rem;
}

/* form focus states */
.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 0.18rem rgba(13,110,253,0.12);
  border-color: var(--brand-primary);
}

/* invalid validation state (bootstrap already provides, this tightens visuals) */
.was-validated .form-control:invalid { box-shadow: none; border-color: #dc3545; }

/* success / alert area (inserted by JS) */
#contactAlert { display:none; margin-bottom:1rem; }

/* responsive tweaks */
@media (max-width: 991.98px) {
  #contact-page { padding: 2rem 0; }
  #contact-page .card-aside { margin-top: 1rem; }
}