/*
Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how to render a web page. You may delete these comments and get started with your customizations.

By default, your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. Just write here what you want to change, you don't need to copy all your theme's stylesheet content.
*/


/* checkout buttons: */
.checkoutbtn{ /*color:;*/ /*background-color:;*/ /*border-color:;*/ }
.checkoutbtn:hover{ /*color:;*/ /*background-color:;*/ /*border-color:;*/ }

/* background will NOT affect height */
.headerModeD{
  position: relative;
  height: 200px;                 /* lock the slot height */
  background: url("/pictures/mold_3.png") center/cover no-repeat;
  overflow: hidden;              /* hide overflow if inner content is taller */
  color:#fff;
}
/* place content on top without changing height */
.headerModeD > .container,
.headerModeD > .inner{
  position: absolute; inset: 0;
/*   display:flex; align-items:center;  center vertically */
}


/* fixed banners: */
#fixedpanelleft{  }
#fixedpanelright{  }
#fixedpanelbottom{  }


/*:root body */





body{
  --color-primary: #004a80;   /* links, highlights */
  --color-accent:  #f56e29;      /* CTAs, buttons */
  --color-bg:      #ffffff;
  --color-surface: #fff4ec;   /* soft orange-50 tint for feature cards */
  --color-text:    #0f172a;
  --color-muted:   #475569;
  --color-border:  #e5e7eb;

  --card-bg:       #ffffff;
  --card-border:   var(--color-border);
  --card-shadow:   0 8px 24px rgba(2,8,23,.08);

  /* Typography */
  --font-h1: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Radii & spacing */
  --radius: .75rem;

}



/* end mold  */
/* new Base */
html, body {
  background: var(--color-bg, #ffffff);
  color: var(--color-text, #0f172a);
  font-family: var(--font-body, Arial, sans-serif !important);
}
a { color: var(--color-primary, #004a80); }
hr, .divider { border-color: #e5e7eb; }

h1, h3, .display-4 {
  font-family: var(--font-h1, Arial, sans-serif);
  font-weight:700; letter-spacing:.01em;
  color: var(--color-text, #0f172a);
}
/* Default on white hero */
#xxhero .display-4{ color: var(--color-text, #0f172a); }

/* Optional accent on one word/underline */
#xxhero .display-4 strong{ color: var(--color-primary, #004a80); }   /* brand blue */


/* Buttons */
.btn-cta {
  background: var(--color-accent, #f56e29);
  color:#111; border:0; border-radius: var(--radius, .75rem);
}
.btn-cta:hover { filter:brightness(1.05); }
.btn-outline-light { border-radius: var(--radius, .75rem); }

/* Bands & sections */
.cta-band {
  background: var(--color-primary, #004a80);
  color:#fff; padding: 2rem 0;
}
.section-dark { /* use as a light grey stripe on white theme */
  background: var(--color-surface, #f8fafc);
  color: var(--color-text, #0f172a);
}
.section-pad { padding: 3rem 0; }
.text-muted-2 { color: var(--color-muted, #475569); }

/* Cards: convert former dark cards to light, outlined/elevated */
.card-dark{
  background:#ffffff;
  color: var(--color-text, #0f172a);
  border:1px solid #e5e7eb;
  border-radius: var(--radius, .75rem);
  box-shadow: 0 8px 24px rgba(2,8,23,.08);
}

/* Service cards */
.service-card{
  background:#ffffff;
  color: var(--color-text, #0f172a);
  border:1px solid #e5e7eb;
  border-radius:var(--radius, .75rem);
  overflow:hidden; transition:transform .2s,box-shadow .2s;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(2,8,23,.12); }
.service-media{ position:relative; height:160px; overflow:hidden; }
.service-media img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.98; transition:transform .3s ease; }
.service-card:hover .service-media img{ transform:scale(1.04); }
.service-badge{
  position:absolute; left:12px; bottom:12px;
  background: var(--color-accent, #f56e29); color:#111;
  border-radius:999px; padding:.35rem .55rem; font-size:.9rem; line-height:1;
}
.text-muted-2{ color: var(--color-muted, #475569) !important; }

/* Service imagery */
.service-hero-img{
  width:100%; height:340px; object-fit:cover;
  border-radius:var(--radius, .75rem); box-shadow:0 10px 30px rgba(2,8,23,.12);
}
.service-gallery img{
  width:100%; height:220px; object-fit:cover;
  border-radius:var(--radius, .75rem);
}

/* About page polish (light theme) */
.about-hero-img{
  width:100%; height:360px; object-fit:cover;
  border-radius:var(--radius, .75rem); box-shadow:0 10px 30px rgba(2,8,23,.12);
}
.icon-circle{
  width:40px; height:40px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center;
  background: rgba(245,110,41,.15); /* accent tint */
  color: var(--color-accent, #f56e29);
}
.badge-soft{
  background: rgba(0,74,128,.08); /* blue tint */
  color: var(--color-primary, #004a80);
  border:1px solid rgba(2,8,23,.06);
  border-radius:999px; padding:.35rem .6rem; font-size:.85rem;
}
.stat-card, .profile-card{
  background:#ffffff; color: var(--color-text, #0f172a);
  border:1px solid #e5e7eb; border-radius:var(--radius, .75rem);
  padding:1.25rem;
}
.stat-card h3{ font-family:var(--font-h1, Arial, sans-serif); margin:0; font-weight:700; }
.profile-avatar{ width:84px; height:84px; border-radius:999px; object-fit:cover; border:2px solid rgba(2,8,23,.06); }
.list-check li{ margin-bottom:.5rem; }
.list-check i{ color: var(--color-accent, #f56e29); }

/* Remove broken rule; if needed define .hero-bg properly */
/* .hero-bg { background: ... } */

/* Brand block */
.brand-name{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700; line-height:1; color: var(--color-text, #0f172a); font-size:20px;
}
.brand-tagline{
  font-family:'inter',sans-serif; font-weight:bold !important; text-transform:uppercase; letter-spacing:.06em;
  color: var(--color-accent, #f56e29); line-height:1.1;
  font-size:clamp(13px, 1.1vw + .35rem, 17px);
}




@media (max-width:575.98px){ 
.brand-tagline{font-size:13.5px;}

/* fixed/clamped height so bg doesn't change layout */
.headerModeR{
  position:relative;
  height:clamp(280px, 25vh, 420px);
  overflow:hidden;
  /* controls */
  --bg-url: url("/pictures/mold_3R.png");
 /* --overlay: rgba(0,0,0,.45);    <— change opacity here */
}

/* background image */
.headerModeR::before{
  content:"";
  position:absolute; inset:0;
  background: var(--bg-url) center/cover no-repeat;
  z-index:0;
}

/* overlay for opacity control */
.headerModeR::after{
  content:"";
  position:absolute; inset:0;
  background: var(--overlay);   /* dim or tint */
  z-index:1;
}

/* your content stays crisp above */
.headerModeR > *{ position:relative; z-index:2; color:#fff; }







}

@media (min-width:768px)    { .brand-tagline{font-size:14.5px;} }
@media (min-width:992px)    { .brand-tagline{font-size:16px;} }
@media (min-width:1200px)   { .brand-tagline{font-size:17px;} }

/* Secondary CTA style */
.btn-cta2 a{
  background: var(--color-accent, #f56e29);
  color: var(--color-primary, #004a80);
  border:0; border-radius:999px;
  padding:.45rem .65rem; font-family:'Manrope',sans-serif; font-weight:600;
}
.btn-cta2 a:hover{ color:#0f172a; filter:brightness(1.08); }

/* Brand hero band */
.bg-brand {
  background: var(--color-primary, #004a80) !important;
  color:#fff;
}
.bg-brand .lead { color: rgba(255,255,255,.88); } /* softer lead */

#hero .display-4 { color:#fff; }
#hero .badge-soft {color:#f56e29;}


/******   card new ****/
.hero-overlay .display-4{ color:#fff; }
.hero-overlay{
  position:relative;
  background:#0f1113; /* fallback */
}
.hero-overlay::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,74,128,.82), rgba(0,0,0,.55));
  pointer-events:none;
}
.hero-overlay > .container{ position:relative; z-index:1; }




.footerv2Widget .footer-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;       /* pick a size that fits widest icon */
  flex-shrink: 0;    /* don’t let it collapse */
}

.footerv2Widget .footer-icon i {
  font-size: 14px;   /* keep icons same size */
  line-height: 1;
}