/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 25 2025 | 18:17:09 */
/* ============================
   3.1 Layout + cards
   ============================ */

/* Softer page background and card styling */
body {
  background-color: #F5FAF7;
}

/* Generic card pattern: blog posts, rotating tiles wrapper, etc. */
.inside-article,
.widget,
.rotating-tiles .rt-tile {
  border-radius: 18px;
  background-color: #FFFFFF;
  box-shadow: 0 18px 40px rgba(11, 33, 72, 0.08);
}

/* Blog index cards */
.blog .inside-article,
.archive .inside-article {
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

.blog .inside-article:hover,
.archive .inside-article:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(11, 33, 72, 0.14);
}

/* Blog card images – slightly rounded */
.blog .post-image img,
.archive .post-image img {
  border-radius: 18px 18px 0 0;
}

/* ============================
   3.2 Navigation polish
   ============================ */

.main-navigation .main-nav ul li a {
  color: #0B2148;
  padding: 0.75em 1.1em;
  position: relative;
  transition: color 0.18s ease-out;
}

/* Underline “slide in” effect */
.main-navigation .main-nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #A9D84A, #2E7D3E);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.2s ease-out;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: #2E7D3E;
}

.main-navigation .main-nav ul li:hover > a::after,
.main-navigation .main-nav ul li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* ============================
   3.3 Buttons – unified CTA style
   ============================ */

button,
input[type="submit"],
.wp-block-button__link,
a.button, a.uagb-modal-button-link,
.crmtopbuttons,
.crmbottombuttons {
  border-radius: 999px !important;
  background: #0B2148 !important;
  color: #FFFFFF !important;
  padding: 0.75em 1.6em;
  border: none;
  box-shadow: 0 14px 30px rgba(11, 33, 72, 0.23);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    background 0.18s ease-out,
    color 0.18s ease-out;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
a.button:hover, a.uagb-modal-button-link:hover,
.crmtopbuttons:hover,
.crmbottombuttons:hover {
  background: linear-gradient(135deg, #0B2148, #2E7D3E) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(11, 33, 72, 0.32);
}

/* Focus state for accessibility */
button:focus-visible,
input[type="submit"]:focus-visible,
.wp-block-button__link:focus-visible,
a.button:focus-visible,  a.uagb-modal-button-link:focus-visible {
  outline: 3px solid #A9D84A;
  outline-offset: 2px;
}

/* ============================
   3.4 Hero + headings
   ============================ */

/* Homepage hero welcome */
.home h1.welcomeheader {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5em;
  text-shadow: none; /* remove older heavy shadows */
}

/* Subheading under hero */
.home .welcome-subtitle {
  font-size: 1.15rem;
  max-width: 52rem;
  margin: 0 auto 2.5rem auto;
  color: #5D6470;
}

/* Optional soft glow effect */
.home h1.welcomeheader span.highlight {
  background: linear-gradient(90deg, #A9D84A, #2E7D3E);
  -webkit-background-clip: text;
  color: transparent;
}

/* ============================
   3.5 Rotating tiles refinement
   (keeps your current animation)
   ============================ */

.rotating-tiles .rt-tile-label {
  font-family: var(--blg-heading-font);
  letter-spacing: 0.02em;
}

.rotating-tiles .rt-tile {
  border-radius: 32px;
  overflow: hidden;
}

/* Give the back face a subtle border to separate it from white content */
.rotating-tiles .rt-tile-content {
  border-top: 1px solid #E0E5EC;
}

/* ============================
   3.6 Scroll reveal utility
   (tied to JS below)
   ============================ */

.blg-fade-in-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.blg-fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Example: apply to blog grid */
.home .latest-posts .inside-article {
  /* if you add the class via editor or JS, these will animate in */
}