/*─────────────────────────────────────────────────
  1) Layout Helpers: Sticky footer & full-height
─────────────────────────────────────────────────*/
html, body {
    height: 100%;
    margin: 0;
  }
  body {
    display: flex;
    flex-direction: column;
  }
  main {
    flex: 1 0 auto;  /* grow to fill, push footer down */
  }
  footer {
    flex-shrink: 0;  /* don’t let footer grow */
  }
  
  /*─────────────────────────────────────────────────
    2) Brand Color Variables
  ─────────────────────────────────────────────────*/
  :root {
    --wd-blue:        #002D62;
    --wd-mid-grey:    #333333;
    --wd-light-grey:  #F4F4F4;
    --wd-gold:        #FFD700;
    --resin-purple:   #800080;
  }
  
  /*─────────────────────────────────────────────────
    3) Reset AOS / animation libs from recoloring text
  ─────────────────────────────────────────────────*/
  [data-aos],
  .animated,
  [class*="animate__"] {
    color: inherit !important;
    background: none !important;
  }
  
  /*─────────────────────────────────────────────────
    4) Navbar & Logo
  ─────────────────────────────────────────────────*/
  .navbar {
    background-color: var(--wd-blue) !important;  /* your brand blue */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .navbar-brand img {
    height: 60px !important;
    width: auto;
  }
  .navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    color: #fff !important;
    transition: color 0.3s;
  }
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active {
    color: var(--wd-gold) !important;
  }
  
  /*─────────────────────────────────────────────────
    5) Buttons
  ─────────────────────────────────────────────────*/
  .btn-gold {
    background-color: var(--wd-gold);
    border: 1px solid var(--wd-gold);
    color: var(--wd-blue);
  }
  .btn-gold:hover,
  .btn-gold:focus {
    background-color: #e6c200;
    border-color: #e6c200;
    color: var(--wd-blue);
  }
  
  /*─────────────────────────────────────────────────
    6) Hero & Page-Hero
  ─────────────────────────────────────────────────*/
  .page-hero,
  .hero {
    position: relative;
    color: #fff;
  }
  .page-hero::before,
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
  }
  .page-hero .container,
  .hero .container {
    position: relative;
    z-index: 1;
  }
  /* Specific override for ResinWorks NFC page */
  body.resinworks .hero {
    background-color: var(--resin-purple) !important;
  }
  
  /*─────────────────────────────────────────────────
    7) Uniform Section Spacing (tighten it up!)
  ─────────────────────────────────────────────────*/
  section {
    padding-top: 2rem;    /* was 3rem */
    padding-bottom: 2rem; /* was 3rem */
  }
  h1, h2, h3, h4 {
    margin-bottom: 0.5rem; /* tighten under headings */
  }
  p {
    margin-bottom: 1rem;   /* tighten under paragraphs */
  }
  
  /*─────────────────────────────────────────────────
    8) Featured, About & Products sections
  ─────────────────────────────────────────────────*/
  #featured {
    background-color: var(--wd-light-grey);
  }
  .about-brief {
    background-color: #fff;
  }
  #products-overview .card {
    max-width: 280px;
    margin: 0 auto;
  }
  #products-overview .card-img-top {
    max-height: 180px;
    object-fit: contain;
  }
  
  /*─────────────────────────────────────────────────
    9) Card “lift” effect
  ─────────────────────────────────────────────────*/
  .card {
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  }
  
  /*─────────────────────────────────────────────────
   10) Footer
  ─────────────────────────────────────────────────*/
  footer {
    background-color: var(--wd-blue);
    color: #fff;
    text-align: center;
  }
 /* Only on ResinWorks NFC™ page (body.resinworks) */
body.resinworks .navbar-brand img {
  background-color: #fff;                /* white circle */
  border-radius: 50%;                    /* make it round */
  padding: 6px;                          /* space around logo */
  box-shadow: 0 1px 4px rgba(0,0,0,0.1); /* subtle lift */
}