/* --- logo  --- */
/* Target the logo column */
.header-logo {
  display: flex;
  align-items: center;     /* vertical alignment: top | center | bottom */
  justify-content: flex-end; /* horizontal alignment: flex-start | center | flex-end */
  height: 100%;            /* optional - ensures vertical alignment applies */
}

/* Control the logo size (optional) */
.header-logo img {
  max-width: 280px;
  height: auto;
}

@media (max-width: 768px) {
  .header-logo {
    content: url("https://code4cooking.com/joomla/images/logos/horizontal-logo-est.png");
    justify-content: center;  /* center logo on mobile */
  }
  .header-logo img {
    max-width: 140px;         /* smaller logo size */
  }
}
/* --- // logo  --- */

/* --- button  --- */
.header-button {
  text-align: right; /* align only the button to the right */
  margin-top: 10px;  /* optional spacing */
  margin-bottom: 10px;  /* optional spacing */
}
/* --- // button  --- */

/* --- logo footer --- */
/* Target the logo column */
.footer-logo {
  display: flex;
  align-items: bottom;     /* vertical alignment: top | center | bottom */
  justify-content: flex-start; /* horizontal alignment: flex-start | center | flex-end */
  height: 100%;            /* optional - ensures vertical alignment applies */
}

/* Control the logo size (optional) */
.footer-logo img {
  max-width: auto;
  height: auto;
}

@media (max-width: 768px) {
  .footer-logo {
    content: url("https://code4cooking.com/joomla/images/logos/horizontal-logo-est.png");
    justify-content: center;  /* center logo on mobile */
  }
  .footer-logo img {
    max-width: 140px;         /* smaller logo size */
  }
}
/* --- // logo  --- */



/* --- topbar unified  --- */
  /* Top bar container */
  .batc-topbar {
    background: linear-gradient(90deg, #0f5132, #198754);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25); /* thin bottom border */
    color: #fff;
    font-weight: 600;
  }

  /* Info text */
  .batc-info {
    color: #fff;
    font-size: clamp(.85rem, .8rem + .25vw, 1rem);
    line-height: 1.5;
  }
  .batc-info .info-line {
    margin: 0;
    padding: .15rem 0;
    transition: color .3s ease, transform .2s ease;
  }
  .batc-info .info-line:hover,
  .batc-info .info-line:focus {
    color: #e8f5ee;
    transform: translateY(-1px);
  }

  /* Phone link */
  .batc-topbar .top-link {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: color .3s ease, transform .2s ease;
    font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  }
  .batc-topbar .top-link:hover,
  .batc-topbar .top-link:focus {
    color: #e8f5ee;
    text-decoration: underline;
    transform: translateY(-1px);
  }

  /* Shared circle style */
  .batc-topbar .icon,
  .batc-social .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    line-height: 1;
    transition: background .3s ease, color .3s ease, transform .2s ease;
    text-decoration: none;
    flex-shrink: 0;
  }
  .batc-topbar .icon svg { width: 1rem; height: 1rem; }

  /* Hover invert effect */
  .top-link:hover .icon,
  .top-link:focus .icon,
  .batc-social .social-icon:hover,
  .batc-social .social-icon:focus {
    background: #e8f5ee;
    color: #0f5132;
    transform: translateY(-1px);
  }

  /* Phone text no wrap */
  .phone-text { white-space: nowrap; }

  /* Social icon font size */
  .batc-social .social-icon i { font-size: 1rem; }

/* --- // topbar unified  --- */

/* --- topbar & header spcaing  --- */
/* 1) Set your sticky header heights (adjust if needed) */
:root{
  --header-offset-sm: 92px;   /* top bar + nav on phones */
  --header-offset-lg: 128px;  /* top bar + nav on desktop */
}

/* 2) Give anchors and the page natural scroll padding so they don't hide under the header */
html { scroll-padding-top: var(--header-offset-sm); }
@media (min-width: 992px){
  html { scroll-padding-top: var(--header-offset-lg); }
}

/* 3) Push the hero's content down from the top edge */
.svc-hero .bg{ padding-top: calc(var(--header-offset-sm) + 1.25rem); }
@media (min-width: 992px){
  .svc-hero .bg{ padding-top: calc(var(--header-offset-lg) + 1.75rem); }
}

/* 4) Optional: add a bit more general breathing room too */
.svc-hero .container{
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}
/* --- // topbar & header spcaing  --- */

/* front page top box left of elfsight */
.bg-top-box {
background: linear-gradient(90deg, #271f14 0%, #755a40 100%);
}
/* --- // END front page top box left of elfsight --- */

/* Mobile-only sticky header */
@media (max-width: 991.98px) {
  .batc-sticky-header,
  .t4-header {            /* keep .t4-header as a fallback if you can't add a custom class */
    position: sticky;
    top: 0;
    z-index: 1030;        /* above nav/dropdowns */
    background: #fff;     /* ensure solid background over content */
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }

  /* Avoid Bootstrap/Navbars trying to be fixed and fighting sticky */
  .t4-mainnav .navbar {
    position: static !important;
  }

  /* Make sure dropdowns appear above everything */
  .t4-mainnav .dropdown-menu {
    z-index: 1040;
  }
}
/* // END Mobile-only sticky header */

/* Optional: if you see overlap with Joomla admin bar while logged in, nudge down */
@media (max-width: 991.98px) {
  body.view-site .batc-sticky-header,
  body.view-site .t4-header {
    top: 32px; /* comment this out if not needed */
  }
}

/* Mainnav button */
/* Change on hover */
.button .btn-success:hover {
  background-color: #145c32; /* darker green or your custom color */
  border-color: #145c32;
  color: #fff;
}
/* // end Mainnav button */

/* Hero section */
/* More generous padding inside the hero */
.svc-hero .bg {
  /* top/bottom breathing room */
  padding-block: clamp(2rem, 6vw, 5rem);
}

/* Stronger left/right padding than Bootstrap's default on small screens */
.svc-hero .container {
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}

@media (min-width: 768px){
  .svc-hero .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1200px){
  .svc-hero .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.city-hero{position:relative; overflow:hidden; border-radius:.75rem}
.city-hero .bg-cover{background-size:cover;background-position:center;background-repeat:no-repeat;min-height:380px}
.badge-strip .icon{font-size:1.25rem; line-height:1; width:2.25rem; height:2.25rem; display:inline-flex; align-items:center; justify-content:center; border-radius:0.35rem;}
.service-card{transition:transform .15s ease, box-shadow .15s ease}
.service-card:hover{transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(0,0,0,.08)}
ul.checks{list-style:none;padding-left:0;margin:0}
ul.checks li{padding-left:1.75rem; position:relative; margin:.35rem 0}
ul.checks li:before{content:"✓"; position:absolute; left:0; top:0; width:1.25rem; height:1.25rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700}
.cta-band{background:linear-gradient(90deg,#0f5132,#198754)}
.text-shadow{text-shadow:0 2px 12px rgba(0,0,0,.4)}
/* -- // Hero section */


/* Dark scrim over the hero image for consistent contrast */
.svc-hero .bg{
  position: relative;
  /* extra breathing room you already added is fine to keep */
}
.svc-hero .bg::before{
  content:"";
  position:absolute; inset:0;
  /* gradient + slight darkening; adjust .45 to taste */
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35));
  pointer-events:none;
}

/* A soft panel directly behind the copy for maximum legibility */
.svc-hero .hero-copy{
  position: relative;                 /* above the scrim */
  z-index: 1;
  background: rgba(0,0,0,.35);        /* subtle dark glass */
  backdrop-filter: blur(2px);         /* gentle blur so busy photos don't show through text */
  -webkit-backdrop-filter: blur(2px);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.18);
}

/* Stronger, cleaner text rendering */
.svc-hero .hero-copy h1{
  color:#fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
  font-weight: 800;
  line-height: 1.05;
  /* responsive size without overflowing small screens */
  font-size: clamp(1.9rem, 2.2rem + 1.5vw, 3.25rem);
  letter-spacing: .2px;
}
.svc-hero .hero-copy .lead{
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
  font-size: clamp(1rem, .95rem + .4vw, 1.25rem);
}

/* Buttons: a touch brighter by default, clear hover */
.svc-hero .hero-copy .btn.btn-success{
  box-shadow: 0 .5rem 1rem rgba(16,123,74,.28);
}
.svc-hero .hero-copy .btn.btn-success:hover{
  transform: translateY(-2px);
}
.svc-hero .hero-copy .btn.btn-outline-light{
  border-width:2px;
  color:#fff; border-color:rgba(255,255,255,.9);
}
.svc-hero .hero-copy .btn.btn-outline-light:hover{
  background:#fff; color:#0f5132;
  box-shadow: 0 .5rem 1rem rgba(255,255,255,.25);
}

/* Comfortable edges on phones + safe-area support */
.svc-hero .container{
  position: relative; z-index: 1;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}

/* Space between the hero top and your sticky header (tune if needed) */
:root{
  --header-offset: 110px;             /* change to your exact combined header height */
}
html{ scroll-padding-top: var(--header-offset); }
.svc-hero .bg{ padding-top: calc(var(--header-offset) + 1rem); }

/* Reduce the panel on large screens so it feels lighter */
@media (min-width: 992px){
  .svc-hero .hero-copy{
    background: rgba(0,0,0,.28);
    padding: 1.25rem 1.5rem;
  }
}
/* --- END Hero section --- */


/* TRUST STRIP — larger icons + better spacing */
.badge-strip .icon{
  /* bigger circle */
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;

  /* bigger glyph */
  font-size: 1.9rem;     /* works for emoji, BI, FA text glyphs */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* optional: add a touch more space between icon and text */
.badge-strip .d-flex.gap-2 { gap: .85rem !important; }

/* scale up a bit more on larger screens */
@media (min-width: 768px){
  .badge-strip .icon{
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2.1rem;
  }
}
@media (min-width: 1200px){
  .badge-strip .icon{
    width: 3.75rem;
    height: 3.75rem;
    font-size: 2.25rem;
  }
}

/* If your icon is an SVG or <i> inside .icon, scale that too */
.badge-strip .icon svg,
.badge-strip .icon i {
  width: 1.9em;
  height: 1.9em;
}

.badge-strip .icon { box-shadow: 0 .35rem .9rem rgba(0,0,0,.06); }

/* Make all TRUST STRIP boxes the same height */
.badge-strip .row { align-items: stretch; }           /* stretch columns */
.badge-strip .col { display: flex; }                  /* allow inner box to fill */
.badge-strip .col > .d-flex {
  flex: 1 1 auto;                                     /* fill the column */
  min-height: 108px;                                  /* set a consistent box height */
}

/* Adjust per breakpoint if you want a bit taller on larger screens */
@media (min-width: 768px){
  .badge-strip .col > .d-flex { min-height: 118px; }
}
@media (min-width: 1200px){
  .badge-strip .col > .d-flex { min-height: 128px; }
}

/*--- //  TRUST STRIP — larger icons + better spacing */



/* button gradients */
.btn-primary-gradient:hover{
background: linear-gradient(90deg, #fe8259 0%, #b3522e 100%);
}
/* --- // END button gradients */

/* --- this is for white & Orange Buttons [Primary] --- */
/* Ensure primary buttons are primary bg + white text (with hover/active states) */
.btn-primary{
  color:#fff !important;
  border-width:2px;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus{
  color:#fff !important;
  /* fallback hover if your primary is #0f5132 */
  background-color:#0c3f26 !important;
  border-color:#0c3f26 !important;
}
/* Optional active state */
.btn-primary:active,
.btn-primary.active{
  color:#fff !important;
  background-color:#0a351f !important;
  border-color:#0a351f !important;
}
/* --- // this is for white & Orange Buttons [Primary] --- */

/* --- this is for white & Green Buttons  --- */
.cus-btn {
      border: 2px solid white;
      background-color: #0d4c1d;
      transition: background-color 0.3s ease;
      color: white;
      padding: 14px 28px;
      font-size: 16px;
      cursor: pointer;
    }
     
    .cus-default {
      border-color: #ffffff;
      color: #1d1d1d;
    }
    
    .cus-default:hover {
    background-color: #146b2a; /* lighter green hover */
	  text-decoration: none;
	  color: #1d1d1d;
    }

/* --- // END white & Green Buttons --- */

/* --- CTA Buttons  --- */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* space between buttons */
}

.cta-buttons a {
  flex: 1; /* allows equal widths if multiple */
  text-align: center;
}

@media (max-width: 576px) {
  .cta-buttons {
    flex-direction: column; /* stack on small screens */
    align-items: stretch;
  }
  .cta-buttons a {
    width: 100%; /* full-width button */
  }
}
/* --- // CTA Buttons  --- */



/* ---  Elf Sight Cards front Page --- */
.bg-custom-green {
  background-color: #0d4c1d !important;
  color: #fff; /* optional: ensures text is readable */
}
/* --- // END Elf Sight Cards front Page --- */

/* --- Below the Elf Sight Cards front Page --- */
.lic-white { color: #ffffff; }
.card-body .cus-btn {
  display: inline-block; /* ensures margin works properly */
  margin-top: 1rem;      /* adjust spacing (1rem ≈ 16px) */
}

/* --- // END Below the Elf Sight Cards front Page --- */


/* --- footer logo  --- */
.footer-logo-img {
  max-width: 200px;  /* adjust as needed */
  height: auto;      /* keeps aspect ratio */
  width: auto;       /* lets it shrink properly */
  display: block;    /* removes inline spacing issues */
}
/* --- // footer logo  --- */


  /* --- about us article  --- */
 .about-hero{position:relative;border-radius:.75rem;overflow:hidden}
  .about-hero .bg{min-height:420px;background-size:cover;background-position:center}
  .fact{border-radius:.75rem}
  .value-card{transition:transform .15s ease, box-shadow .15s ease}
  .value-card:hover{transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(0,0,0,.08)}
  .timeline:before{content:"";position:absolute;left:1rem;top:0;bottom:0;width:2px;background:rgba(0,0,0,.08)}
  .timeline .t-item{position:relative;padding-left:2.5rem}
  .timeline .t-item:before{content:"";position:absolute;left:.9rem;top:.4rem;width:.65rem;height:.65rem;border-radius:50%;background:#198754}

/* Add padding inside CTA sections */
.cta-section, 
#acm-hero-111, 
.acm-hero.style-1 {
  padding-left: 2rem;   /* space on left */
  padding-right: 2rem;  /* space on right */
}

/* Optional: Add vertical breathing room */
.cta-section .hero-content {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

  /* CTA Section Centering */
#acm-hero-111 .hero-content {
  display: flex;
  flex-direction: column;     /* stack heading and button */
  justify-content: center;    /* vertical centering */
  align-items: center;        /* horizontal centering */
  text-align: center;
  min-height: 250px;          /* base height */
  padding: 2rem;              /* space from edges */
}

/* Space between heading and button */
#acm-hero-111 .hero-btn {
  margin-top: 1.5rem;
}

/* Tablet screens and up */
@media (min-width: 768px) {
  #acm-hero-111 .hero-content {
    min-height: 350px;
    padding: 3rem;
  }
}

/* Large desktop screens */
@media (min-width: 1200px) {
  #acm-hero-111 .hero-content {
    min-height: 450px;
    padding: 4rem 6rem;
  }
}

  /* --- // about us article  --- */

/* From Page-wide tweaks */
.get-a-quote-page .trust-pill{
  background:#0d4c1d10;
  border:1px solid #0d4c1d33;
  color:#0d4c1d;
  padding:.4rem .75rem;
  border-radius: 0.35rem;
  font-weight:600;
}

/* Make the form truly edge-to-edge and breathe nicely */
.get-a-quote-page .form-section .form-wrap{
  max-width: 1280px;      /* keep the fields readable on ultrawide */
  margin: 0 auto;         /* center the form block */
  width: 100%;
}

/* Remove container padding inside full-width sections */
.get-a-quote-page .container-fluid.px-0, 
.get-a-quote-page .container-fluid .row.g-0{
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

/* Optional: make inputs comfy if your form uses Bootstrap */
.get-a-quote-page .form-wrap .form-control{
  padding:.9rem 1rem;
  border-radius:.6rem;
}
.get-a-quote-page .form-wrap .btn{
  padding:.8rem 1.25rem;
  border-radius:.6rem;
}
/*-- //  From Page-wide tweaks */



/* Accordian active color change is here */
/* Scope to this one accordion */
#faq .accordion-button:not(.collapsed) {
  background-color: #0d4c1d;  /* open state bg */
  color: #fff;                /* open state text */
  box-shadow: none;
}

/* Optional: closed state text color */
#faq .accordion-button {
  color: #0d4c1d;
}

/* Focus ring to match your green */
#faq .accordion-button:focus {
  border-color: #0d4c1d;
  box-shadow: 0 0 0 .25rem rgba(13, 76, 29, .25);
}

/* Make the chevron white when open */
#faq .accordion-button:not(.collapsed)::after {
  filter: invert(1) brightness(100%);
}

/* Accordian active color change is here */


/* template over-rides */
/* section over-rides */
#main-top-1,
#main-bottom-1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* template over-rides */



  /* Forms Page*/

/* Footer Nav List for Resouces Module */
.batc-navlist .list-group-item { border: 0; padding: .5rem 0; background: transparent; }
.batc-navlist .nav-link { color: #212529; font-weight: 500; }
.batc-navlist .nav-link:hover { text-decoration: none; color: #fe8259; }
.batc-navlist .nav-link.active,
.batc-navlist .nav-link[aria-current="page"] {
  color: #fe8259;
  position: relative;
}
.batc-navlist .nav-link.active::before,
.batc-navlist .nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 24px; border-radius: 2px;
  background: linear-gradient(90deg,#0f5132,#198754);
}
/* Footer Nav List for Resouces Module */