/* ==========================================================================
   satishkatiyar.com — site-specific styles
   Loaded AFTER css/main.css. See FIXPLAN.md Phase 5.
   ========================================================================== */

/* The nav is fixed-top (~68px tall), so an in-page anchor jump (menu click,
   URL hash, back/forward) lands the target section right under it, hiding
   the heading. scroll-padding-top reserves that space for every anchor
   scroll, not just clicks handled by JS. */
html { scroll-padding-top: 84px; }

/* --- brand ------------------------------------------------------------- */
.brandfont {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #190e6d;
}
.navbar-brand h1 { display: inline; margin: 0; }

/* --- about / hero ------------------------------------------------------ */
.about-pic {
  border-radius: 4px;
  border: 2px solid #eaeaea;
  margin: 20px 0;
  transition: all 0.3s ease-in-out;
}
#carousel-area { background: #ffffff; padding: 70px 10px 0px 10px; }
#carousel-area .carousel-indicators { bottom: 0px; }
#carousel-area .carousel-indicators li { background-color: #d8dbf4; margin-bottom: 10px; }
#carousel-area .carousel-indicators .active { background-color: #190e6d; }

.about-text {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  background: #ffffff;
  border-radius: 4px;
  text-align: center;
  position: relative;
  margin: 5px 0px;
  transition: all 0.4s ease-in-out;
}
.about-text:hover { background: transparent; box-shadow: 0px 10px 50px 0px rgba(84, 110, 122, 0.35); }
.about-text h3 { font-size: 28px; font-weight: 800; color: #190e6d; }
.about-text h4 { font-size: 18px; font-weight: 500; }

#large-about-box { font-size: 14px; font-weight: 400; padding: 0px 10px; }
#topcontactsec { margin: 5px; padding: 5px; font-size: 16px; font-weight: 700; color: #190e6d; }
#topcontactsec a { font-size: 16px; font-weight: 700; color: #190e6d; }
#topcontactsec img { width: 32px; height: auto; }
#topemsec img { width: 32px; height: auto; }

/* --- sections ---------------------------------------------------------- */
.section { padding: 20px 0px 0px 0px; }
.section-header .section-title { text-transform: none; color: #190e6d; }
.services-item { padding: 15px 15px; margin: 10px 5px; }
.sk-icon { width: 60px; height: 60px; color: #f07070; border-style: solid; }

/* --- experience timeline ----------------------------------------------- */
.exp-text {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  background: #ffffff;
  border-radius: 4px;
  text-align: center;
  position: relative;
  transition: all 0.4s ease-in-out;
}
.exp-time    { font-size: 14px; font-weight: 500; color: #2e256e; margin: 0; }
.exp-company { font-size: 18px; font-weight: 700; color: #190e6d; margin: 5px 0 0; }
.exp-title   { font-size: 14px; font-weight: 500; color: #190e6d; margin: 5px 0 0; }
.exp-desc    { font-size: 12px; font-weight: 300; color: #190e6d; margin: 10px 0 0; }

/* --- consulting -------------------------------------------------------- */
#consulting ul li { list-style: disc; text-align: left; margin-left: 25px; }

/* --- contact ----------------------------------------------------------- */
#cont-div { display: block; }
#cont-col { max-width: 100%; text-align: center; }

/* --- footer ------------------------------------------------------------ */
.footercol { padding: 5px; }
.footercol a { font-size: 16px; font-weight: 700; color: #190e6d; }
.footercol img { width: 32px; height: auto; }
.footerrow { background-color: #f8f8f9; border-width: 4px; border-radius: 5px; }

/* --- misc -------------------------------------------------------------- */
.collapse.show { background: #fff; }
#pageContentStartDiv { margin-top: 25px; }

/* --- call-to-action band backgrounds (moved out of main.css, P5-T2) ----- */
.cta {
  background-image: url(../img/bg/datacenter.jpg);
  background-position-x: 50% !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  text-align: center;
  opacity: 1.0;
  position: relative;
}
/* Dark scrim so the white "Contact" ghost button/text stays readable no
   matter which part of the photo sits behind it. */
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.cta > .container { position: relative; z-index: 1; }
/* jquery.stellar.min.js (removed — see FIXPLAN.md) threw on every scroll
   under jQuery 3's stricter .offset(); background-attachment: fixed gives
   the same parallax effect with no JS. Doesn't animate on iOS Safari, which
   silently falls back to a normal static background there. */
@media (prefers-reduced-motion: reduce) {
  .cta { background-attachment: scroll; }
}
#cta1 {
  background-image: url(../img/bg/datacenter.jpg);
  background-image: image-set(url(../img/bg/datacenter.webp) type("image/webp"), url(../img/bg/datacenter.jpg) type("image/jpeg"));
}
#cta2 {
  background-image: url(../img/bg/aigpu.jpg);
  background-image: image-set(url(../img/bg/aigpu.webp) type("image/webp"), url(../img/bg/aigpu.jpg) type("image/jpeg"));
}
#cta3 {
  background-image: url(../img/bg/numbers.jpg);
  background-image: image-set(url(../img/bg/numbers.webp) type("image/webp"), url(../img/bg/numbers.jpg) type("image/jpeg"));
}
#cta4 {
  background-image: url(../img/bg/containers.jpg);
  background-image: image-set(url(../img/bg/containers.webp) type("image/webp"), url(../img/bg/containers.jpg) type("image/jpeg"));
}

/* --- readability: body copy in cards reads left-aligned (FIXPLAN P7-T1) - */
.services-item p,
.services-item ul { text-align: left; }

/* --- even out expertise card heights (FIXPLAN P7-T1) -------------------- */
#expertise .row { align-items: stretch; }
#expertise .col-lg-4 { display: flex; }
#expertise .services-item { display: flex; flex-direction: column; width: 100%; }

/* --- keyboard focus indicators (FIXPLAN P4-T2) ------------------------- */
/* Negative outline-offset draws the ring inside the element's own box
   instead of outside it. Several ancestor containers (.contact-block,
   .section) use overflow:hidden, which clipped an outward-facing outline
   on form fields near the container's edge. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #190e6d !important;
  outline-offset: -3px !important;
  border-radius: 2px;
}