/* ==========================================================================
   0. FROM PREVIOUS SITE
   ========================================================================== */

h5, .h5 {
  font-size: 24px;
  color: #F7931D;
}

/* ==========================================================================
   1. GLOBAL SYSTEM VARIABLES & FONTS
   ========================================================================== */
:root {
  --cassiopeia-color-primary: #0F2537;    /* Deep Corporate Navy */
  --cassiopeia-color-hover: #0076A3;      /* Vibrant Trade Blue */
  --cassiopeia-color-link: #0076A3;
  --body-bg: #FFFFFF;
  --light-bg: #F4F7F9;
  --card-border-radius: 8px;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333333;
}

/* ==========================================================================
   2. SOLID WHITE TOPBAR HEADER & FLEX ALIGNMENT
   ========================================================================== */
/* Force Solid White Layer backgrounds */
.topbar,
.topbar-wrapper,
.container-topbar,
header.header,
.grid-child.container-topbar,
.container-topbar .navbar,
.container-topbar .navbar-collapse {
  background-color: #FFFFFF !important;
  background-image: none !important; /* Strips out native default gradients */
}

/* Topbar wrapper definitions */
.topbar, .top-a {
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 12px rgba(15, 37, 55, 0.03) !important;
  padding: 12px 0;
  display: block;
}

/* Flexbox alignments: Base container structure */
.container-topbar, .top-a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-topbar .mod-menu {
  width: auto; /* Shrinks container to fit content tight */
  display: flex !important;
  align-items: center;
  margin: 0;
}

nav.top-a li {
  padding: .25em 10px !important;
}

/* ==========================================================================
   3. LOGO LINK EMBED & COMPACT SPACING
   ========================================================================== */
/* Moves text menu items tightly next to the logo on desktop */
.container-topbar .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  margin-left: 40px; 
}

.container-topbar .navbar-nav .nav-item:first-child {
  margin-right: 0; 
  margin-left: 0;
}

/* Constraint limits on image logo menu item link scaling */
.container-topbar .navbar-nav .nav-logo-img,
.container-topbar .navbar-nav img {
  max-height: 48px;
  width: auto;
  display: block;
}

/* Strip underline highlight actions specifically from your logo link */
.container-topbar .navbar-nav .nav-item:first-child .nav-link::after {
  display: none !important;
}

/* ==========================================================================
   4. STRONG NAVY LINKS & TRADE BLUE HOVERS
   ========================================================================== */
/* Spacing configuration between consecutive text links */
.container-topbar .navbar-nav .nav-item:not(:first-child) {
  margin-left: 20px; /* Tight desktop spacing between links */
  margin-right: 0;
}

/* Strict font weights and color parameters */
.topbar a,
.container-topbar a,
.container-topbar .navbar-nav .nav-link,
.container-topbar .mod-menu .nav-item .nav-link {
  color: #0B1D2B !important;      /* Deep Ultra-Dark Navy */
  font-weight: 800 !important;   /* Extra Bold / Strong Text */
  font-size: 1.05rem !important;  
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 0 !important;
  text-decoration: none;
  display: inline-block;
  opacity: 1 !important;
}

/* Interactive focus and Active selection definitions */
.topbar a:hover,
.container-topbar a:hover,
.container-topbar .navbar-nav .nav-link:hover,
.container-topbar .navbar-nav .nav-link.active,
.container-topbar .navbar-nav .nav-item.active .nav-link {
  color: #0076A3 !important;      /* Vibrant Trade Blue */
}

/* Underline border decorative hover lines */
.container-topbar .navbar-nav .nav-item:not(:first-child) .nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #0076A3;
  transition: width 0.2s ease;
  margin-top: 4px;
}

.container-topbar .navbar-nav .nav-item:not(:first-child) .nav-link:hover::after,
.container-topbar .navbar-nav .nav-item:not(:first-child) .nav-link.active::after,
.container-topbar .navbar-nav .nav-item:not(:first-child).active .nav-link::after {
  width: 100%;
}

/* Mobile Responsiveness Overrides for Main Menu Header */
@media (max-width: 991.98px) {
  .container-topbar {
    flex-wrap: wrap !important;
    padding: 10px 1rem !important;
  }
  .container-topbar .mod-menu,
  .container-topbar .navbar-collapse {
    width: 100% !important;
    flex-basis: 100% !important;
  }
  .container-topbar .navbar-nav {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    padding-top: 15px;
    padding-bottom: 10px;
    gap: 12px;
  }
  .container-topbar .navbar-nav .nav-item:not(:first-child) {
    margin-left: 0 !important;
    width: 100%;
  }
  .container-topbar .navbar-nav .nav-item:not(:first-child) .nav-link {
    width: 100%;
    padding: 10px 0 !important;
    border-bottom: 1px solid #E2E8F0;
  }
  .container-topbar .navbar-nav .nav-item:not(:first-child) .nav-link::after {
    display: none !important;
  }
}

/* ==========================================================================
   9. BREAKOUT AND STABLE TRADE GRADIENT HERO BACKGROUND
   ========================================================================== */
.full-width-breakout {
  grid-column: 1 / -1 !important;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.trade-hero-section {
  position: relative;
  background: linear-gradient(135deg, #0076A3 0%, #0A1C2A 100%) !important;
  padding: 110px 20px !important;
  color: #FFFFFF !important;
  text-align: center;
  border-bottom: 5px solid #0F2537;
  overflow: hidden;
}

.trade-hero-container {
  max-width: 850px;
  margin: 0 auto;
  position: relative !important;
  z-index: 5 !important;
}

.trade-hero-badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 1.5rem;
}

.trade-hero-title {
  color: #FFFFFF !important;
  font-size: 2.3rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px;
  margin-bottom: 1.5rem;
}

.trade-hero-text {
  color: #F0F7FA !important; 
  font-size: 1.25rem !important;
  line-height: 1.6 !important;
  margin-bottom: 2.5rem;
  font-weight: 400;
}

/* Option 2 Override: Inline links inside hero paragraph render orange */
.trade-hero-text a {
  color: #FF9E46 !important;
  font-weight: 700;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.trade-hero-text a:hover {
  color: #FFFFFF !important;
}

.trade-hero-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.trade-btn-white {
  background-color: #FFFFFF !important;
  color: #0076A3 !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  font-size: 1.05rem !important;
  border: 2px solid #FFFFFF !important;
  border-radius: var(--card-border-radius, 8px);
  transition: all 0.25s ease-in-out !important;
  text-decoration: none;
  display: inline-block;
}

.trade-btn-white:hover {
  background-color: #0F2537 !important;
  border-color: #0F2537 !important;
  color: #FFFFFF !important;
}

.trade-btn-outline-white {
  background-color: transparent !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  font-size: 1.05rem !important;
  border: 2px solid #FFFFFF !important;
  border-radius: var(--card-border-radius, 8px);
  transition: all 0.25s ease-in-out !important;
  text-decoration: none;
  display: inline-block;
}

.trade-btn-outline-white:hover {
  background-color: #FFFFFF !important;
  color: #0076A3 !important;
}

/* ==========================================================================
   14. SITE-GRID OVERRIDES: FLUID FULL-WIDTH TOP-B GRID FIX
   ========================================================================== */

/* Force the top-b layout wrapper container to scale cleanly without breaking screen boundaries */
.site-grid .grid-child.top-b,
.top-b,
#top-b-row {
  grid-column: 1 / -1 !important;    /* Breaks completely out of Cassiopeia side column constraints */
  width: 100% !important;            /* FIXED: Uses fluid percentages instead of unstable raw 100vw viewport units */
  max-width: 100% !important;        
  position: relative !important;
  left: 0 !important;                /* Resets the position centering springs to clear horizontal scrolling bugs */
  right: 0 !important;
  margin-left: 0 !important;     
  margin-right: 0 !important;
  padding: 0 !important;             /* Destroys rogue white margin blocks above and below */
}

/* Ensure the custom service grid gray background flows correctly inside the grid track */
.full-width-services-wrapper {
  background-color: #F4F7F9 !important; /* Continuous fluid trade grey background fill */
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-top: 60px !important;       /* Clean breathing padding space inside your services layout */
  padding-bottom: 60px !important;
  padding-left: 1.5rem !important;    /* Fluid side cushion so cards never touch edge walls on mobile devices */
  padding-right: 1.5rem !important;
}

.services-grid-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  box-sizing: border-box;
}

.services-header-block {
  text-align: center;
  margin-bottom: 50px;
}

.services-subtitle {
  display: block;
  color: #0076A3;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.services-main-title {
  color: #0F2537 !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  margin: 0 0 15px 0 !important;
}

.services-title-divider {
  width: 60px;
  height: 4px;
  background-color: #FF7A00;
  margin: 0 auto;
  border-radius: 2px;
}

/* Updated grid layout rule matrix to distribute 5 cards evenly across the row width */
.services-card-matrix {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.service-feature-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 35px 25px;
  text-align: left;
  box-shadow: 0 4px 6px rgba(15, 37, 55, 0.03) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  display: flex;
  flex-direction: column;
}

.service-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(15, 37, 55, 0.08) !important;
  border-color: #0076A3 !important;
}

.service-card-badge-wrap {
  width: 60px;
  height: 60px;
  background-color: #EBF4F8 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: background-color 0.25s ease, transform 0.25s ease !important;
}

.service-feature-card:hover .service-card-badge-wrap {
  background-color: #FFE6CC !important;
  transform: scale(1.05);
}

.service-card-icon {
  font-size: 1.8rem !important;
  line-height: 1 !important;
  margin-bottom: 0 !important;
}

.service-feature-card h3 {
  color: #0F2537 !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  margin: 0 0 12px 0 !important;
}

.service-feature-card p {
  color: #555555 !important;
  font-size: 0.95rem !important;
  line-height: 1.6;
  margin: 0 0 25px 0 !important;
  flex-grow: 1;
}

.service-card-link {
  color: #0076A3 !important;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.service-card-link:hover {
  color: #FF7A00 !important;
  text-decoration: underline;
}

.service-card-link::after { 
  content: " →"; 
  font-weight: 800; 
  transition: transform 0.2s ease; 
}

.service-card-link:hover::after { 
  transform: translateX(4px); 
}

@media (max-width: 1199.98px) { 
  .services-card-matrix { grid-template-columns: repeat(2, 1fr); } 
}

@media (max-width: 767.98px) {
  .services-card-matrix { grid-template-columns: 1fr; }
  .services-main-title { font-size: 1.9rem !important; }
}

/* =========================================================
   RESPONSIVE SERVICE CARDS
   ========================================================= */

/* Large desktop: 5 cards */
.services-card-matrix {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

/* Tablets / smaller laptops: 3 cards */
@media (max-width: 1199px) {
  .services-card-matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Smaller tablets: 2 cards */
@media (max-width: 900px) {
  .services-card-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phones: 1 card */
@media (max-width: 600px) {
  .services-card-matrix {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .full-width-services-wrapper {
    padding: 40px 16px !important;
  }

  .services-header-block {
    margin-bottom: 35px;
  }

  .services-main-title {
    font-size: 1.9rem !important;
    line-height: 1.2;
  }

  .service-feature-card {
    padding: 25px 20px;
  }
}

/* ==========================================================================
   11. HOME PAGE LATEST NEWS (TOTAL BLOCK DECOUPLING EXCLUSION)
   ========================================================================== */
/* Recolor the global component container framework */
.trade-home-grid,
.trade-home-grid main,
.trade-home-grid #content,
.trade-home-grid .com-content-featured {
  background-color: #F4F7F9 !important; /* Soft grey backdrop canvas */
  background: #F4F7F9 !important;
}

/* DESTROY THE EMBEDDED BLANK ROGUE WHITE MULTI-COLUMN PARENT HOUSING BOX */
.trade-home-grid .com-content-featured__items,
.trade-home-grid .columns-3,
.trade-home-grid .masonry-3,
.trade-home-grid [class*="columns-"],
.trade-home-grid [class*="masonry-"] {
  background-color: transparent !important; 
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important; 
  flex-direction: row !important;
  /* flex-wrap removed completely to allow side-by-side alignment */
  justify-content: center !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  
  /* INDENTATION HOOKS: Spreads horizontal clearance buffers from device walls */
  padding-left: 2.5rem !important;  /* 40px Left Indent Space */
  padding-right: 2.5rem !important; /* 40px Right Indent Space */
  padding-top: 60px !important;     /* Vertical distance gap underneath top-b row */
/*  padding-bottom: 80px !important;  Safe tracking spacing above footer */
  gap: 50px 35px !important;        /* 50px Height distance between card rows, 35px sides channel */
}

/* COMPLETELY BLIND AND HIDE EXTENSION COMPONENT EMPTY BLANK VIEWS HEADERS */
.trade-home-grid .com-content-featured > .page-header,
.trade-home-grid main > .page-header,
.trade-home-grid .view-featured .page-header:first-child {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Turn individual article cards into clean detached solid white boxes */
.trade-home-grid .com-content-featured__items > article,
.trade-home-grid .com-content-featured__items > div,
.trade-home-grid .columns-3 > div,
.trade-home-grid .com-content-featured__item {
  background-color: #FFFFFF !important; /* White color drops exclusively INSIDE the tiles */
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(15, 37, 55, 0.03) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  
  /* Desktop standard sizes boundaries for stable 3-column rows distribution */
  flex: 1 1 calc(33.333% - 35px) !important;
  min-width: 290px !important;
  max-width: 380px !important;
  margin: 0 !important; /* Separation space is handled cleanly via flex gap settings */
  
  /* UPDATED: Adds 25px of elegant breathing room to the left and right inside the white box */
  padding: 0 25px 25px 25px !important; 
}

/* Recreates premium tile hovering tracking effects from plumber.com.au */
.trade-home-grid .com-content-featured__items > article:hover,
.trade-home-grid .com-content-featured__items > div:hover,
.trade-home-grid .columns-3 > div:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 32px rgba(15, 37, 55, 0.08) !important;
  border-color: #0076A3 !important; /* Highlighting active edges trade blue */
}

/* Uniform trimming bounds for intro graphic images */
.trade-home-grid .com-content-featured__items .item-image {
  margin: 0 !important;
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
}

.trade-home-grid .com-content-featured__items .item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* COMFORTABLE PADDING FOR INTERNAL PARAGRAPH LAYOUT TEXT SEGMENTS */
.trade-home-grid .com-content-featured__items article > h2,
.trade-home-grid .com-content-featured__items article > .page-header,
.trade-home-grid .com-content-featured__items article > .com-content-featured__item-introtext,
.trade-home-grid .com-content-featured__items article > .readmore,
.trade-home-grid .columns-3 > div > h2,
.trade-home-grid .columns-3 > div > [itemprop="articleBody"],
.trade-home-grid .columns-3 > div > .readmore {
  padding-left: 30px !important;  /* Generous 30px whitespace cushion away from left card border */
  padding-right: 30px !important; /* Generous 30px whitespace cushion away from right card border */
}

/* Title formatting controls within cards */
.trade-home-grid .com-content-featured__items h2,
.trade-home-grid .columns-3 h2 {
  padding-top: 30px !important;
  margin-top: 0 !important;
  margin-bottom: 15px !important;
}

.trade-home-grid .com-content-featured__items h2 a,
.trade-home-grid .columns-3 h2 a {
  color: #0F2537 !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

.trade-home-grid .com-content-featured__items h2 a:hover {
  color: #0076A3 !important;
}

/* Justified formatting for article excerpt texts */
.trade-home-grid .com-content-featured__items .com-content-featured__item-introtext,
.trade-home-grid .com-content-featured__items [itemprop="articleBody"] {
  color: #4A5568 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin-top: 15px !important;
  margin-bottom: 25px !important;
  text-align: justify !important; /* Restores the justified alignment property requested */
  flex-grow: 1 !important;
}

/* Card action button tracking definitions */
/* Card action button tracking definitions */
.trade-home-grid .com-content-featured__items .readmore {
  padding-bottom: 20px !important;
  margin-top: auto !important;
}

.trade-home-grid .com-content-featured__items .readmore .btn {
  background-color: transparent !important;
  color: #0076A3 !important;
  border: 2px solid #0076A3 !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  padding: 8px 22px !important;
  font-size: 0.9rem !important;
  text-transform: uppercase;
  transition: all 0.2s ease !important;
  display: inline-block;
}

.trade-home-grid .com-content-featured__items .readmore .btn:hover {
  background-color: #0076A3 !important;
  color: #FFFFFF !important;
}

/* Strips native template metadata tag clutter */
.trade-home-grid .com-content-featured__items .article-info,
.trade-home-grid .com-content-featured__items .article-info-terms {
  display: none !important;
}

/* Mobile adjustments for article columns scaling */
@media (max-width: 1024px) {
  .trade-home-grid .com-content-featured__items { padding: 40px 1.5rem !important; }
}

@media (max-width: 767.98px) {
  .trade-home-grid .com-content-featured__items { flex-direction: column !important; align-items: center !important; }
  .trade-home-grid .com-content-featured__items > article { max-width: 100% !important; width: 100% !important; }
}

/* ==========================================================================
   12. THE DEFINITIVE SINGLE FOOTER SYSTEM (CONSOLIDATED UNIFICATION FIXED)
   ========================================================================== */
/* Force Cassiopeia's base footer row block into the solid charcoal canvas */
footer,
.footer,
.footer-wrapper,
.site-grid .grid-child.footer {
  background-color: #27282a !important; /* Authentic Charcoal Black Base Tone */
  background-image: none !important;    
  color: #FFFFFF !important;
  box-shadow: none !important;
  border: none !important;
  grid-column: 1 / -1 !important;       /* Forces section edge-to-edge browser wide */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 60px 0 30px 0 !important;    
}

/* Clear any template cards overlays crashing footer styles background */
.footer .card,
.footer .card-body,
.footer .mod-custom,
.footer .mod-menu,
.footer [class*="mod-"] {
  background: transparent !important;   /* Wipes out rogue container background tracking cards */
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.custom-unified-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Desktop horizontal columns configurations side-by-side */
.footer-columns-wrapper {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 60px;
}

/* Enforces your left and right content elements to split rows 50/50 */
.footer-col-item {
  flex: 1 1 50% !important;
  text-align: left !important;
}

/* Bottom Row Copyright Bar (Guaranteed to stay on its own line beneath columns) */
.footer-copyright-row {
  width: 100% !important;
  margin-top: 50px !important;
  padding-top: 30px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important; 
  text-align: center !important; 
}

/* Typography styles inside unified footer */
.custom-unified-footer h3 {
  color: #FFFFFF !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 25px !important;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}

.custom-unified-footer p,
.custom-unified-footer li {
  color: #D1D5DB !important;           
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

.footer-links-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-links-list li {
  margin-bottom: 12px !important;
}

.custom-unified-footer a {
  color: #D1D5DB !important;           
  text-decoration: none !important;
  font-weight: 600;
  transition: color 0.2s ease !important;
  display: inline-block;
}

.custom-unified-footer a:hover {
  color: #FF7A00 !important; /* Safety Orange Highlight */
}

.footer-facebook-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.footer-facebook-container {
    text-align: center;
    transition: transform 0.3s ease;
}

/* Container box styling */
.fb-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;                  /* Size of the small dot */
  height: 40px;                 /* Size of the small dot */
  border-radius: 50%;           /* Makes the box a perfect circle */
  background-color: #ffffff;    /* Default white dot background */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* SVG icon styling and mask trick */
.fb-icon {
  width: 16px;                  /* Scale the 'f' size inside the dot */
  height: 24px;
  background-color: currentcolor; /* Uses the color property inherited from the parent or hover state */
  
  /* Mask uses the exact SVG path data to punch a transparent hole */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M80 299.3V240H12V170.1H80V121.5C80 53.7 121.3 16 181.9 16c29 0 54 2.1 61.3 3.1v71.1h-42c-32.9 0-39.3 15.6-39.3 38.6V170.1h78.7L230.2 240h-68.3v256H80Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M80 299.3V240H12V170.1H80V121.5C80 53.7 121.3 16 181.9 16c29 0 54 2.1 61.3 3.1v71.1h-42c-32.9 0-39.3 15.6-39.3 38.6V170.1h78.7L230.2 240h-68.3v256H80Z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Hover effects */
.fb-logo-box:hover {
  background-color: #1877f2;    /* Changes dot to Facebook blue */
}

/* When the circle is hovered, change the icon mask color layer to white */
.fb-logo-box:hover .fb-icon {
  background-color: #ffffff !important; /* Forces the 'f' shape to turn white */
  transition: background-color 0.3s ease; /* Makes the color swap smooth */
}

/* ==========================================================================
   12b. CLEAN RESPONSIVE MEDIA BREAKPOINTS FOR PORTABLE DEVICES
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Restores the wrap function ONLY on mobile viewports so columns can split up */
  .footer-columns-wrapper {
    flex-direction: column !important; 
    flex-wrap: wrap !important; /* FIXED: Crucial rule to allow mobile vertical stacking */
    gap: 35px !important;
  }

  /* Forces both the left and right custom content blocks to span 100% width */
  .footer-col-item {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }
}


/* ==========================================================================
   15. SINGLE ARTICLE VIEWS (CPD COMPLIANCE PAGE STYLING)
   ========================================================================== */

/* 1. Base Article Wrapper Layout Spacing cushions */
.item-page,
.com-content-article {
  max-width: 960px !important; /* Locks down single reading columns so long text lines don't stretch */
  margin: 60px auto !important; /* Centers block cleanly on page view */
  padding: 0 1.5rem !important;
}

/* 2. Main Article Heading Elements */
.com-content-article itemprop[name="headline"],
.com-content-article h1 {
  color: #0F2537 !important; /* Deep Corporate Navy headings */
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-bottom: 2rem !important;
  letter-spacing: -0.5px;
}

/* 3. Base Paragraph Text Elements Typography */
.com-content-article p,
.com-content-article [itemprop="articleBody"] p {
  color: #333333 !important;
  font-size: 1.1rem !important;
  line-height: 1.75 !important;
  margin-bottom: 1.5rem !important;
  text-align: left !important; /* Natural reading alignment instead of justified on inner detail lines */
}

/* 4. Custom Styling for the Primary CPD Toolbox Info Block Callout Box */
.com-content-article p:has(a[href*="cpdtoolbox"]), 
.com-content-article .cpd-toolbox-callout {
  background-color: #F4F7F9 !important; /* Soft grey background container */
  border-left: 5px solid #0076A3 !important; /* Vibrant Trade Blue accent indicator bar */
  padding: 30px !important;
  border-radius: 0 8px 8px 0;
  margin: 2.5rem 0 !important;
  box-shadow: 0 4px 10px rgba(15, 37, 55, 0.02);
}

/* Style links inside your alert block text panels */
.com-content-article a {
  color: #0076A3 !important;
  font-weight: 700;
  text-decoration: underline !important;
  transition: color 0.2s ease;
}

/* Flips to your Option 2 safety orange on hover elements */
.com-content-article a:hover {
  color: #FF7A00 !important; 
}

/* 5. Clean up / Automatically hide messy raw placeholder content words if they display */
.com-content-article p:contains("CPD FullCol"),
.com-content-article p:contains("MPTfooter"),
.com-content-article :contains("CPD resized") {
  color: #A0AEC0 !important;
  font-style: italic;
  font-size: 0.9rem;
}

/* ==========================================================================
   16. ARTICLE ACTION ASSETS (CPD TOOLBOX CALL-TO-ACTION BUTTONS)
   ========================================================================== */

/* Target-lock any text anchor link inside your pages pointing to the CPD Toolbox */
.com-content-article a[href*="cpdtoolbox"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Primary background uses your Option 2 Vibrant Safety Orange for maximum visibility */
  background-color: #FF7A00 !important;
  color: #FFFFFF !important;
  border: 2px solid #FF7A00 !important;
  
  padding: 14px 32px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important; /* Strips the default underline */
  border-radius: var(--card-border-radius, 8px) !important;
  box-shadow: 0 4px 14px rgba(255, 122, 0, 0.2) !important;
  
  margin: 15px 0 !important;
  transition: all 0.25s ease-in-out !important;
  cursor: pointer !important;
}

/* Add a clean micro-icon arrow inside the button purely via stylesheet logic */
.com-content-article a[href*="cpdtoolbox"]::after {
  content: " ➔" !important;
  font-weight: 800 !important;
  margin-left: 8px !important;
  transition: transform 0.2s ease !important;
}

/* Interactive focus hover animations: changes smoothly to your deep corporate navy */
.com-content-article a[href*="cpdtoolbox"]:hover {
  background-color: #0F2537 !important;
  border-color: #0F2537 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(15, 37, 55, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* Micro-icon slide reaction on hover */
.com-content-article a[href*="cpdtoolbox"]:hover::after {
  transform: translateX(4px) !important;
}

/* Dynamic handling inside the soft-grey callout box container */
.com-content-article p:has(a[href*="cpdtoolbox"]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* Prevents button from stretching awkwardly full-width */
}

/* ==========================================================================
   17. APPRENTICESHIPS & TRAINING LAYOUT STYLING (MPA TASMANIA)
   ========================================================================== */

/* 1. Styled Bullet Lists: Swaps boring generic dots for clean, custom elements */
.com-content-article ul,
.item-page ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 2rem !important;
}

.com-content-article ul li,
.item-page ul li {
  position: relative !important;
  padding-left: 30px !important;
  margin-bottom: 12px !important;
  color: #4A5568 !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}

/* Injects a sharp, trade-blue custom marker dot before each benefit asset item */
.com-content-article ul li::before,
.item-page ul li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  color: #0076A3 !important; /* Vibrant Trade Blue Check */
  font-weight: 900 !important;
  font-size: 1.1rem !important;
}

/* 2. Career Pathways Timelines: Turns Option blocks into elegant trade panels */
.com-content-article strong:contains("Option"),
.com-content-article p strong:has(+ em),
.com-content-article h3:contains("Option") {
  display: block !important;
  background-color: #EBF4F8 !important; /* Soft trade blue banner strip */
  color: #0F2537 !important;            /* Deep Corporate Navy text */
  padding: 12px 20px !important;
  border-left: 5px solid #0076A3 !important;
  border-radius: 0 6px 6px 0;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* 3. Frequently Asked Questions Block Layout Panels */
.com-content-article strong:contains("?"),
.com-content-article p:has(strong:contains("?")) {
  display: block !important;
  color: #0F2537 !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: -0.3px;
}

/* Formats the paragraph answers directly underneath the FAQ query headings */
.com-content-article strong:contains("?") + p,
.com-content-article p:has(strong:contains("?")) + p {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 20px 25px !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 4px 6px rgba(15, 37, 55, 0.02) !important;
}

/* 4. Action Command Link Button Override for TasTAFE Directory Targets */
.com-content-article a[href*="tastafe"] {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #0076A3 !important; /* Primary Trade Blue Action button */
  color: #FFFFFF !important;
  border: 2px solid #0076A3 !important;
  padding: 12px 28px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  margin: 15px 0 !important;
  transition: all 0.2s ease-in-out !important;
}

.com-content-article a[href*="tastafe"]:hover {
  background-color: #0F2537 !important; /* Flips cleanly to deep navy on mouseover */
  border-color: #0F2537 !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   18. GLOBAL FOOTER LOGO MODULE OVERRIDES (RESTORE & FORMAT)
   ========================================================================== */

/* 1. Ensure the global images display perfectly without text bleeding */
.com-content-article img[alt*="MPTfooter"],
.item-page img[alt*="MPTfooter"],
img[alt*="roofers"] {
  display: inline-block !important;
  visibility: visible !important;
  height: auto !important;
  max-height: 55px; /* Restricts the logo heights for a clean appearance */
  width: auto;
  margin: 15px 10px !important;
  transition: transform 0.2s ease;
}

/* 2. Style the separate global Contact Details section header if it renders here */
.com-content-article h3:contains("Contact Details"),
h3:contains("Contact Details") {
  color: #0F2537 !important; /* Deep Corporate Navy heading */
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  margin-top: 3rem !important;
  margin-bottom: 1.25rem !important;
}

/* 3. Re-allow any text inside this global block area to render naturally */
.com-content-article p:contains("MPTfooter") {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  color: #333333 !important;
}

/* ==========================================================================
   19. MEMBERS AREA LOGIN INTERFACE OVERRIDES (SPLIT-SCREEN BUILD)
   ========================================================================== */

/* 1. Reconfigure Base Card into a Responsive Multi-Column Split Panel Workspace */
.login,
#login-form,
.com-users-login {
  max-width: 900px !important; /* Expanded layout card container width to accommodate the new image panel */
  margin: 60px auto !important; /* Centers card nicely on screen view */
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--card-border-radius, 8px) !important;
  padding: 0 !important; /* Clears padding so graphic fits flush against internal margins */
  box-shadow: 0 10px 30px rgba(15, 37, 55, 0.06) !important;
  display: flex !important; /* Triggers side-by-side positioning layout grid elements */
  flex-direction: row !important;
  overflow: hidden !important;
}

/* 2. Injects a Professional Trade Graphic Panel on the Left via Stylesheet Only */
.com-users-login::before,
#login-form::before {
  content: "" !important;
  flex: 1 1 50% !important; /* Takes up exactly half the width of the login container card */
  min-height: 480px;
  
  /* Blends your trade theme blue-to-navy gradient directly over a high-quality plumbing background asset image */
  background-image: 
    linear-gradient(135deg, rgba(0, 118, 163, 0.9) 0%, rgba(15, 37, 55, 0.95) 100%),
    url('https://unsplash.com');
    
  background-size: cover !important;
  background-position: center !important;
  display: block !important;
}

/* 3. Forces Form Content Fields to Package Smoothly on the Right Side Column */
.com-users-login form,
#login-form > fieldset,
.com-users-login > div:not(.page-header) {
  flex: 1 1 50% !important; /* Takes up the remaining half of the width container */
  padding: 50px 40px !important; /* Restores generous breathing room cushioning around inputs inside card walls */
  box-sizing: border-box !important;
}

/* Adjust title layout presentation inside the split screen structure */
.com-users-login h1,
.login h1 {
  color: #0F2537 !important; /* Deep Corporate Navy headings */
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  margin-bottom: 2rem !important;
  text-align: left !important;
}

/* 4. Text Input Fields Formatting (Username & Password) */
.com-users-login .form-control,
#login-form input[type="text"],
#login-form input[type="password"] {
  width: 100% !important;
  background-color: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  font-size: 1rem !important;
  color: #0F2537 !important;
  transition: all 0.2s ease-in-out !important;
  margin-bottom: 1.25rem !important;
}

/* Smooth input field focus state transitions matching your theme color definitions */
.com-users-login .form-control:focus,
#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus {
  background-color: #FFFFFF !important;
  border-color: #0076A3 !important; /* Active Vibrant Trade Blue frame line */
  box-shadow: 0 0 0 4px rgba(0, 118, 163, 0.12) !important;
  outline: none !important;
}

/* Text Input Label Formatting styling profiles */
.com-users-login label,
#login-form label {
  color: #0F2537 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin-bottom: 6px !important;
  display: block;
}

/* 5. Checkbox Option Alignments Layout (Remember Me) */
.com-users-login .form-check,
#login-form .control-group:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 1.5rem !important;
  padding-left: 0 !important;
}

.com-users-login input[type="checkbox"],
#login-form input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

/* 6. Log In Main Interactive Action Button Trigger */
.com-users-login button[type="submit"],
#login-form button.btn-primary,
#login-form .btn-primary {
  width: 100% !important; /* Spans full right column width for clean action impact */
  background-color: #0076A3 !important; /* Vibrant Trade Blue */
  border: 2px solid #0076A3 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  margin-top: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 118, 163, 0.15) !important;
}

.com-users-login button[type="submit"]:hover,
#login-form button.btn-primary:hover {
  background-color: #0F2537 !important; /* Shifts smoothly to your deep navy on mouseover */
  border-color: #0F2537 !important;
  box-shadow: 0 6px 16px rgba(15, 37, 55, 0.2) !important;
}

/* 7. Account Recovery Help Text Links Layout Area (Forgot Pass/User options) */
.com-users-login ul,
#login-form + ul,
.com-users-login-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 2rem 0 0 0 !important;
  border-top: 1px solid #E2E8F0 !important;
  padding-top: 1.5rem !important;
  display: flex !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px;
}

.com-users-login ul li,
.com-users-login-links li { padding: 0 !important; margin: 0 !important; }
.com-users-login ul li::before,
.com-users-login-links li::before { display: none !important; }

.com-users-login ul a,
.com-users-login-links a {
  color: #0076A3 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

/* Links flip to your Option 2 safety orange color on hover elements */
.com-users-login ul a:hover,
.com-users-login-links a:hover {
  color: #FF7A00 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   19b. LOGIN MOBILE COMPACT COLLAPSE RESPONSIVENESS OVERRIDES
   ========================================================================== */
@media (max-width: 850px) {
  /* Safely drop the side-by-side alignment grid structural constraints on small portable viewports */
  .login, #login-form, .com-users-login {
    flex-direction: column !important;
    max-width: 480px !important;
    margin: 40px auto !important;
  }
  
  /* Completely hides the left-side graphic image panel on mobile screens to save screen height spacing */
  .com-users-login::before,
  #login-form::before {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }
  
  .com-users-login form,
  #login-form > fieldset,
  .com-users-login > div:not(.page-header) {
    flex: 1 1 100% !important;
    padding: 30px 25px !important; /* Balanced internal text buffers on smaller phone panels */
  }
  
  .com-users-login h1, .login h1 {
    text-align: center !important; /* Re-centers heading titles text on phone displays */
  }
}

/* ==========================================================================
   20. DIRECTORY SEARCH & LOOKUP VIEWS (FIND A MASTER PLUMBER)
   ========================================================================== */

/* 1. Global Workspace Constrained Container Wrapper */
.com-finder,
.com-tags,
.com-content-category-items,
.view-category .com-content-category {
  max-width: 1240px !important;
  margin: 40px auto !important;
  padding: 0 2.5rem !important; /* Matches your home article side gutters */
}

/* 2. Style the Primary Directory Search Filter & Input Fields Block */
#searchForm,
.finder-search,
.com-finder__search-form {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--card-border-radius, 8px) !important;
  padding: 30px !important;
  box-shadow: 0 4px 12px rgba(15, 37, 55, 0.02) !important;
  margin-bottom: 40px !important;
  display: flex !important;
  gap: 15px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Style search input text bars */
#searchForm input[type="text"],
.com-finder__search-query,
.finder-search .form-control {
  flex: 1 1 300px !important;
  background-color: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  font-size: 1rem !important;
  color: #0F2537 !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
}

#searchForm input[type="text"]:focus,
.com-finder__search-query:focus {
  background-color: #FFFFFF !important;
  border-color: #0076A3 !important; /* Trade Blue focus rim */
  box-shadow: 0 0 0 4px rgba(0, 118, 163, 0.12) !important;
  outline: none !important;
}

/* Search Actions Filter Buttons */
#searchForm button,
.com-finder__search-btn,
.finder-search button {
  background-color: #0076A3 !important; /* Vibrant Trade Blue Button */
  border: 2px solid #0076A3 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 28px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#searchForm button:hover,
.com-finder__search-btn:hover {
  background-color: #0F2537 !important; /* Flips smoothly to deep corporate navy */
  border-color: #0F2537 !important;
}

/* 3. Rebuild Search Result Outputs as Clean Detached Directory Cards */
.com-finder__results li,
.com-content-category-items table tbody tr,
.cat-items-row {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 30px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 10px rgba(15, 37, 55, 0.03) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
}

/* Recreates the plumber.com.au practitioner profile card tilt tracking effect */
.com-finder__results li:hover,
.cat-items-row:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(15, 37, 55, 0.07) !important;
  border-color: #0076A3 !important;
}

/* 4. Directory Business Title Typography */
.com-finder__results h3,
.cat-items-row .page-header h2,
.com-finder__results li a.result-title {
  color: #0F2537 !important; /* Deep Corporate Navy titles */
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3 !important;
  display: inline-block !important;
}

.com-finder__results li a.result-title:hover {
  color: #0076A3 !important;
}

/* 5. Directory Search Text Descriptions and Meta Details */
.com-finder__results .result-description,
.cat-items-row p {
  color: #4A5568 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin: 10px 0 0 0 !important;
}

/* Styled URL or Address Badges matching option 2 palette values */
.com-finder__results .result-url,
.com-finder__results .search-meta {
  color: #0076A3 !important; /* Vibrant Trade Blue text */
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  margin-top: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 6. Mobile view responsive handling overrides */
@media (max-width: 767.98px) {
  .com-finder, .com-tags, .com-content-category-items {
    padding: 0 1rem !important;
  }
  #searchForm, .finder-search {
    padding: 20px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #searchForm input[type="text"], .com-finder__search-query {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  #searchForm button, .com-finder__search-btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   21. MARIADB DYNAMIC DUAL-ROW AUTO-SCROLLING LOGO MARQUEE (FINETUNED)
   ========================================================================== */

/* 1. Force the layout container block to break out edge-to-edge browser wide */
.site-grid .grid-child.top-c,
.top-c,
#top-c-row,
.font-recolor-grey {
  grid-column: 1 / -1 !important;    
  width: 100% !important;            
  max-width: 100% !important;        
  position: relative !important;
  left: 0 !important;                
  right: 0 !important;
  margin-left: 0 !important;     
  margin-right: 0 !important;
  padding: 0 !important;             
  border: none !important;
  box-shadow: none !important;
  background-color: #F4F7F9 !important; /* Continuous grey background across screen width */
}

/* Container holding the header text and layout workspace layout boundaries */
.full-width-breakout.font-recolor-grey {
  background-color: #F4F7F9 !important; 
  padding-top: 60px !important;       
  padding-bottom: 60px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* Hides the off-screen logos as they scroll */
}

.logo-marquee-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Base horizontal track bounds */
.logo-scrolling-belt {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;       
  justify-content: flex-start !important;
  align-items: center !important;     
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important; /* Hides standard horizontal scrollbars for a premium feel */
  padding: 25px 0 !important;
}

/* 2. Target the core inner parent row container to animate the scrolling movement */
.logo-scrolling-belt .marquee-track-slider {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important; /* FORCES side-by-side row tracking */
  width: max-content !important; /* Allows the row to stretch wide without squeezing the columns */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  
  /* FIXED SPEED: Increased from 30s to 60s to cut the scroll speed exactly in half */
  animation: tradeLogoMarquee 60s linear infinite !important; 
}

/* Forces any hidden container divs inside the slider to line up horizontally */
.logo-scrolling-belt .marquee-track-slider div:not(.logo-scroll-item) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Pause the scrolling animation immediately when a user hovers their mouse over a logo */
.logo-scrolling-belt:hover .marquee-track-slider,
.logo-scrolling-belt:hover .marquee-track-slider div {
  animation-play-state: paused !important;
}

/* 3. Style your individual logo boxes back to prominent, natural tile sizes */
.logo-scrolling-belt .logo-scroll-item {
  flex: 0 0 210px !important;         /* Balanced width spacing card tiles layout */
  width: 210px !important;            
  
  /* FIXED: Height expanded from 85px to 100px to give tall/square logos more breathing room */
  height: 100px !important;            
  
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #FFFFFF !important; 
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 15px !important;             
  margin-right: 45px !important;      /* Injects a generous 45px separation space between logos */
  box-shadow: 0 4px 10px rgba(15, 37, 55, 0.02) !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

/* Recreates premium plumber.com.au elevation hover shift tracking action */
.logo-scrolling-belt .logo-scroll-item:hover {
  transform: translateY(-4px) !important;
  border-color: #0076A3 !important;   /* Highlights active edges Trade Blue on focus */
  box-shadow: 0 12px 24px rgba(15, 37, 55, 0.06) !important;
}

/* Target-lock image assets inside your view div wrappers to align cleanly */
.logo-scrolling-belt .logo-scroll-item img,
.logo-scrolling-belt .logo-scroll-item div img,
.logo-scrolling-belt .logo-scroll-item a img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  
  /* FIXED: Constrained maximum height to 65px to completely stop top/bottom cropping layout bugs */
  max-height: 65px !important;        
  
  object-fit: contain !important;     /* Keeps logo proportions clean without distortion */
  display: block !important;
  margin: 0 auto !important;
}

/* Clear stray formatting issues from generic native inner block strings */
.logo-scrolling-belt .logo-scroll-item div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   21b. MATHEMATICAL TRANSLATION KEYFRAMES FOR CONTINUOUS TIMELOOP
   ========================================================================== */
@keyframes tradeLogoMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); 
  }
}


/* ==========================================================================
   22. PROTECTED MEMBER PORTAL ENVIRONMENT OVERRIDES (V.LUTANAHALL.COM)
   ========================================================================== */

/* 1. HIGH-CONTRAST ORANGE HEADER & CUSTOM NAVIGATION BAR */
.member-portal .topbar,
.member-portal .topbar-wrapper,
.member-portal .container-topbar,
.member-portal header.header,
.member-portal .grid-child.container-topbar {
  /* High-visibility industrial trades safety orange background */
  background-color: #FF7A00 !important; 
  background-image: none !important;
  border-bottom: 3px solid #0F2537 !important; /* Deep corporate navy bottom accent line */
  box-shadow: 0 4px 12px rgba(255, 122, 0, 0.15) !important;
}

/* Force member menu navigation links to turn deep navy for maximum contrast on orange */
.member-portal .container-topbar a,
.member-portal .container-topbar .navbar-nav .nav-link,
.member-portal .container-topbar .mod-menu .nav-item .nav-link {
  color: #0F2537 !important; /* Deep Corporate Navy text */
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  text-transform: uppercase;
}

/* Hover and active configurations inside the orange header link arrays */
.member-portal .container-topbar .navbar-nav .nav-link:hover,
.member-portal .container-topbar .navbar-nav .nav-link.active {
  color: #FFFFFF !important; /* Flips cleanly to crisp white on mouseover */
}

.member-portal .container-topbar .navbar-nav .nav-item:not(:first-child) .nav-link::after {
  background: #FFFFFF !important; /* Active underline tracking highlights switch to white */
}

/* 2. MAXIMISED SCREEN-WIDE WORKSPACE READING INTERFACE */
.member-portal main,
.member-portal #content,
.member-portal .site-grid,
.member-portal .com-content-article,
.member-portal .item-page {
  background-color: #FFFFFF !important; /* Pure clinical crisp white canvas background */
  color: #000000 !important;             /* Pure solid absolute black text for flawless legibility */
  max-width: 100% !important;            /* Breaks layout out of standard restricted width margins */
  width: 100% !important;
  padding: 10px 4% !important;           /* Fluid side margins to stretch text comfortably across monitors */
}

/* Enhanced accessible typography structure inside member reading nodes */
.member-portal .com-content-article p,
.member-portal .item-page p,
.member-portal .com-content-article li,
.member-portal .item-page li {
  color: #000000 !important;
  font-size: 1.25rem !important;         /* Expanded, larger font scaling optimized for quick scanning */
  line-height: 1.85 !important;          /* Generous line-height to make parsing reference sheets comfortable */
  text-align: left !important;
  max-width: 1400px;                     /* Caps absolute line length to prevent visual fatigue on ultra-wide monitors */
}

.member-portal h1, .member-portal h2, .member-portal h3 {
  color: #0F2537 !important;             /* Section headings use clear deep navy */
  font-weight: 800 !important;
  margin-bottom: 1.5rem !important;
}
.member-portal h1 { font-size: 2.8rem !important; }
.member-portal h2 { font-size: 2.2rem !important; }

/* 3. SOLID ORANGE INTEGRATED FOOTER CONSOLE WITH CONTACT FILTERS */
.member-portal footer,
.member-portal .footer,
.member-portal .footer-wrapper,
.member-portal .site-grid .grid-child.footer {
  background-color: #FF7A00 !important;  /* Safety Orange structural block wrapper canvas */
  background-image: none !important;
  color: #0F2537 !important;
  border-top: 4px solid #0F2537 !important; /* Deep corporate navy structural boundary line */
  box-shadow: 0 -4px 20px rgba(255, 122, 0, 0.1) !important;
}

/* Format footer column title layout text tags in the orange portal console */
.member-portal .custom-unified-footer h3 {
  color: #0F2537 !important;
  border-bottom: 2px solid rgba(15, 37, 55, 0.15);
}

/* Global paragraph text and list colors adjustments inside the orange footer */
.member-portal .custom-unified-footer p,
.member-portal .custom-unified-footer li {
  color: #0F2537 !important;
  font-weight: 600 !important;
}

.member-portal .custom-unified-footer a {
  color: #0F2537 !important;
  text-decoration: underline !important;
}
.member-portal .custom-unified-footer a:hover {
  color: #FFFFFF !important;             /* Member links flip cleanly to white on hover */
}

/* 4. ACCESSIBLE FORM CONTROL OVERRIDES FOR PORTAL ENQUIRIES */
.member-portal .form-control,
.member-portal input[type="text"],
.member-portal input[type="email"],
.member-portal textarea {
  background-color: #FFFFFF !important;
  border: 2px solid #0F2537 !important; /* High contrast, heavy dark frame lines */
  color: #000000 !important;
  font-size: 1.1rem !important;
  padding: 12px !important;
  border-radius: 6px !important;
}
.member-portal .form-control:focus {
  border-color: #0076A3 !important;
  box-shadow: 0 0 0 4px rgba(0, 118, 163, 0.2) !important;
}

/* Member section submit form button interaction changes */
.member-portal button[type="submit"],
.member-portal .btn-primary {
  background-color: #0F2537 !important; /* Solid Navy high-contrast button block */
  border: 2px solid #0F2537 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}
.member-portal button[type="submit"]:hover {
  background-color: #FFFFFF !important;
  color: #0F2537 !important;            /* Inverts clean white/navy styles on focus click */
}

/* ==========================================================================
   23. DYNAMIC DOWNLOAD BADGES FOR SITE DOCUMENTS (PDF LIBRARY ASSETS)
   ========================================================================== */
/* Automatically target-locks any anchor text pointing to a PDF file on your storage layers */
.member-portal a[href*=".pdf"],
.com-content-article a[href*=".pdf"] {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #FFF5EC !important;  /* Soft, friendly orange cream back tint */
  color: #E65C00 !important;             /* High contrast dark warning text color asset */
  border: 2px solid #FF7A00 !important;  /* Safety orange border wrapper frame */
  padding: 12px 24px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  margin: 10px 0 !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 4px 6px rgba(230, 92, 0, 0.04) !important;
}

/* Injects a clear document icon glyph symbol natively before the document link title strings */
.member-portal a[href*=".pdf"]::before,
.com-content-article a[href*=".pdf"]::before {
  content: "📄 PDF - " !important;
  font-weight: 800 !important;
  margin-right: 6px !important;
}

/* Hover physics transitions: flips to solid trade orange when member interacts */
.member-portal a[href*=".pdf"]:hover,
.com-content-article a[href*=".pdf"]:hover {
  background-color: #FF7A00 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 14px rgba(255, 122, 0, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   24. MEMBER PORTAL FOOTER: TWO-COLUMN FORM LAYOUT RULES
   ========================================================================== */

/* 1. Form layout grouping elements arrangement */
.portal-member-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  width: 100% !important;
  margin-top: 10px;
}

/* Horizontal input splitting row layout for Name and Member ID fields */
.form-group-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px !important;
  width: 100% !important;
}

.form-field-block {
  flex: 1 1 100% !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

/* 2. Direct Field Text Label Properties Overrides for High Visibility */
.member-portal .portal-member-form label {
  color: #0F2537 !important; /* Bold Navy Labels */
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
}

/* 3. Style text inputs inside the orange footer to render crisp white */
.member-portal .portal-member-form input[type="text"],
.member-portal .portal-member-form input[type="email"],
.member-portal .portal-member-form textarea {
  background-color: #FFFFFF !important; /* Pure white fields for extreme reading contrast */
  border: 2px solid #0F2537 !important;   /* Solid Navy tracking frame lines */
  color: #000000 !important;               /* Sharp black input typing text */
  font-size: 0.95rem !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease-in-out !important;
}

/* Focused active parameter glows */
.member-portal .portal-member-form input:focus,
.member-portal .portal-member-form textarea:focus {
  border-color: #0076A3 !important; /* Trade Blue highlights focus rim */
  box-shadow: 0 0 0 4px rgba(0, 118, 163, 0.15) !important;
  outline: none !important;
  background-color: #FFFFFF !important;
}

/* 4. Priority Form Action Submit Button Formatting */
.member-portal .portal-form-submit-btn {
  background-color: #0F2537 !important; /* Heavy Solid Deep Navy Button */
  border: 2px solid #0F2537 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.25s ease-in-out !important;
  box-shadow: 0 4px 10px rgba(15, 37, 55, 0.1) !important;
}

.member-portal .portal-form-submit-btn:hover {
  background-color: #FFFFFF !important; /* Inverts smoothly to white on hover focus */
  color: #0F2537 !important;
  box-shadow: 0 6px 16px rgba(15, 37, 55, 0.15) !important;
}

/* ==========================================================================
   24b. MOBILE VIEW LAYOUT COLLAPSED RESPONSIVENESS OVERRIDES
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Collapses the split Name/ID items into normal vertical blocks on phones */
  .form-group-row {
    flex-direction: column !important;
    gap: 15px !important;
  }
}