/* =====================================================================
   Catalyst Chem India Private Limited — shared site styles
   Modern stack: Tailwind (CDN) + this small layer for bespoke components
   that utilities can't express (web font, keyframes, floating labels,
   scroll reveal, dropdown behaviour). Brand look is preserved 1:1.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');

:root {
  --brand-navy: #184a87;
  --brand-cyan: #3FB0D4;
  --ink: #4e4e4e;
}

html { scroll-behavior: smooth; }
body { font-family: 'Lato', system-ui, -apple-system, Segoe UI, sans-serif; color: var(--ink); }

/* ---- Accent underline bars (preserve the old .underline look) ---- */
.accent-bar  { height: 7px; width: 110px; background: var(--brand-cyan); }
.section-bar { height: 7px; width: 170px; background: var(--brand-navy); }

/* ---- Hero CTA: navy → cyan gradient pill (was .btn-slide.learn) ---- */
.hero-cta {
  display: inline-block;
  padding: .6rem 1.5rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 4px;
  background: linear-gradient(135deg, #184a87 0%, #3FB0D4 100%);
  transition: all .3s ease;
}
.hero-cta:hover { background: #fff; color: var(--brand-navy); border-color: #fff; }

/* ---- Category buttons (was .btn.cont) ---- */
.cat-btn {
  display: inline-block;
  background: var(--brand-navy);
  color: #fff;
  padding: .55rem 1rem;
  margin: .5rem .5rem 0 0;
  transition: background .3s ease;
}
.cat-btn:hover { background: var(--brand-cyan); color: #fff; }

/* ---- Hero staggered entrance (replaces WOW.js + animate.css) ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}
.anim-1 { animation: fadeInUp .5s ease .15s both; }
.anim-2 { animation: fadeInUp .5s ease .40s both; }
.anim-3 { animation: fadeInUp .5s ease .65s both; }

/* ---- Reveal on scroll (replaces WOW fadeInDown) ---- */
.reveal { opacity: 0; transform: translateY(-22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anim-1, .anim-2, .anim-3 { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Products dropdown (desktop hover + JS click on mobile) ---- */
.dropdown-panel { display: none; }
.dropdown-panel.open { display: block; }
@media (min-width: 768px) {
  .has-dropdown:hover .dropdown-panel { display: block; }
}

/* ---- Floating-label form (replaces MDBootstrap .md-form) ---- */
.float-field { position: relative; }
.float-field input,
.float-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ced4da;
  background: transparent;
  padding: .5rem 0;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease;
}
.float-field textarea { resize: none; min-height: 96px; }
.float-field label {
  position: absolute;
  left: 0;
  top: .55rem;
  color: #9a9a9a;
  font-weight: 300;
  pointer-events: none;
  transition: all .2s ease;
}
.float-field input:focus,
.float-field textarea:focus { border-bottom-color: var(--brand-navy); }
.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label,
.float-field textarea:focus + label,
.float-field textarea:not(:placeholder-shown) + label {
  top: -.75rem;
  font-size: .8rem;
  color: var(--brand-navy);
}