.elementor-kit-13{--e-global-color-primary:#004664;--e-global-color-secondary:#004664;--e-global-color-text:#3C3C3C;--e-global-color-accent:#004664;--e-global-color-74e5cd9:#FFFFFF;--e-global-color-bfc4d62:#F8F9F6;--e-global-color-647e80c:#00CD50;--e-global-color-cb4eaa9:#3CE664;--e-global-color-07894a8:#42851F;--e-global-color-03fd458:#285716;--e-global-color-b08342e:#EDF7E8;--e-global-color-6a44190:#F5FAF2;--e-global-color-2f98bb9:#090D0B;--e-global-color-3f56765:#0E1310;--e-global-color-c3d9f1f:#151B17;--e-global-color-dbb8252:#1E2721;--e-global-color-1418a18:#2B342E;--e-global-color-c793088:#748078;--e-global-color-7a903a9:#919B94;--e-global-color-faa0b3c:#F2F4F0;--e-global-color-30266db:#E9EDE8;--e-global-color-1202df5:#FFFFFFF2;--e-global-color-fc0746f:#FFFFFFE0;--e-global-color-3fd2965:#FFFFFFC2;--e-global-color-c6ce516:#FFFFFFA3;--e-global-color-4f5797d:#FFFFFF7A;--e-global-color-38d7e43:#FFFFFF3D;--e-global-color-8ec5fe8:#FFFFFF24;--e-global-color-20768d0:#FFFFFF14;--e-global-color-cb91d9b:#DFE5DF;--e-global-color-31febd8:#CBD3CC;--e-global-color-03f3a01:#FFFFFF24;--e-global-color-fc04226:#FFFFFF47;--e-global-color-eacd319:#65B8328C;--e-global-color-e36c6c5:#65B8323D;--e-global-color-d8dbfe5:#00303F;--e-global-color-771bfef:#FFFFFF00;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1.65lh;--e-global-typography-788f342-font-family:"Montserrat";--e-global-typography-788f342-font-size:clamp(2.75rem, 1.75rem + 2.5vw, 6rem);--e-global-typography-788f342-font-weight:700;--e-global-typography-788f342-line-height:1em;--e-global-typography-5b93c12-font-family:"Montserrat";--e-global-typography-5b93c12-font-size:clamp(2.25rem, 1.5rem + 1.8vw, 4.75rem);--e-global-typography-5b93c12-font-weight:700;--e-global-typography-5b93c12-line-height:1em;--e-global-typography-d4256ec-font-family:"Montserrat";--e-global-typography-d4256ec-font-size:clamp(1.875rem, 1.35rem + 1.2vw, 3.5rem);--e-global-typography-d4256ec-font-weight:700;--e-global-typography-d4256ec-line-height:1em;--e-global-typography-f3531fb-font-family:"Montserrat";--e-global-typography-f3531fb-font-size:clamp(1.5rem, 1.2rem + 0.8vw, 2.5rem);--e-global-typography-f3531fb-font-weight:700;--e-global-typography-f3531fb-line-height:1em;--e-global-typography-8fa3214-font-family:"Montserrat";--e-global-typography-8fa3214-font-size:clamp(1.25rem, 1.1rem + 0.45vw, 1.875rem);--e-global-typography-8fa3214-font-weight:700;--e-global-typography-8fa3214-line-height:1em;--e-global-typography-bfefd94-font-family:"Montserrat";--e-global-typography-bfefd94-font-size:clamp(1.125rem, 1.05rem + 0.25vw, 1.5rem);--e-global-typography-bfefd94-font-weight:700;--e-global-typography-bfefd94-line-height:1em;--e-global-typography-4f7ba47-font-family:"Montserrat";--e-global-typography-4f7ba47-font-size:1rem;--e-global-typography-4f7ba47-font-weight:700;--e-global-typography-ead9705-font-family:"Montserrat";--e-global-typography-ead9705-font-size:0.875rem;--e-global-typography-f9a8756-font-family:"Montserrat";--e-global-typography-f9a8756-font-size:0.875rem;--e-global-typography-f9a8756-font-weight:700;--e-global-typography-5b7c6e7-font-family:"Montserrat";--e-global-typography-5b7c6e7-font-size:1.125rem;--e-global-typography-ae1c595-font-family:"Montserrat";--e-global-typography-ae1c595-font-size:1.125rem;--e-global-typography-ae1c595-font-weight:700;}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1368px;}.e-con{--container-max-width:1368px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   ECOTEC BACKGROUNDS AND CARDS
   ========================================================= */


/* =========================================================
   1. DESIGN VARIABLES
   ========================================================= */

:root {
  /* Brand colours */
  --eco-green: #65b832;
  --eco-green-hover: #76ca3f;
  --eco-green-dark: #42851f;
  --eco-green-deep: #285716;
  --eco-green-soft: #edf7e8;
  --eco-green-pale: #f5faf2;

  /* Dark colours */
  --eco-black: #090d0b;
  --eco-near-black: #0e1310;
  --eco-charcoal: #151b17;
  --eco-charcoal-light: #1e2721;

  /* Light colours */
  --eco-white: #ffffff;
  --eco-off-white: #f8f9f6;
  --eco-soft-grey: #f2f4f0;

  /* Borders */
  --eco-border-light: #dfe5df;
  --eco-border-medium: #cbd3cc;
  --eco-border-dark: rgba(255, 255, 255, 0.14);
  --eco-border-green: rgba(101, 184, 50, 0.55);
  --eco-border-green-soft: rgba(101, 184, 50, 0.24);

  /* Shadows */
  --eco-shadow-small:
    0 1px 2px rgba(9, 13, 11, 0.04),
    0 8px 24px rgba(9, 13, 11, 0.06);

  --eco-shadow-medium:
    0 4px 8px rgba(9, 13, 11, 0.04),
    0 18px 48px rgba(9, 13, 11, 0.10);

  --eco-shadow-green:
    0 16px 42px rgba(66, 133, 31, 0.24);

  /* Radius */
  --eco-radius-card: 12px;

  /* Transitions */
  --eco-transition:
    320ms cubic-bezier(0.22, 1, 0.36, 1);

  --eco-transition-slow:
    600ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   2. GRADIENT BACKGROUNDS
   ========================================================= */

/* Dark hero background with green glows */
.eco-bg-hero-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(101, 184, 50, 0.25) 0%,
      rgba(101, 184, 50, 0.08) 24%,
      transparent 52%
    ),
    radial-gradient(
      circle at 88% 72%,
      rgba(101, 184, 50, 0.10) 0%,
      transparent 40%
    ),
    linear-gradient(
      125deg,
      var(--eco-black) 0%,
      var(--eco-charcoal) 50%,
      #101912 100%
    );
}


/* Standard dark charcoal gradient */
.eco-bg-dark-gradient {
  background:
    linear-gradient(
      135deg,
      var(--eco-black) 0%,
      var(--eco-charcoal) 52%,
      var(--eco-charcoal-light) 100%
    );
}


/* Green-to-dark CTA gradient */
.eco-bg-green-dark-gradient {
  background:
    radial-gradient(
      circle at 82% 25%,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 32%
    ),
    linear-gradient(
      125deg,
      var(--eco-green-deep) 0%,
      var(--eco-green-dark) 42%,
      var(--eco-charcoal) 100%
    );
}


/* Bright green gradient */
.eco-bg-green-gradient {
  background:
    linear-gradient(
      135deg,
      var(--eco-green-dark) 0%,
      var(--eco-green) 52%,
      var(--eco-green-hover) 100%
    );
}


/* Soft white and pale-green gradient */
.eco-bg-light-gradient {
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(101, 184, 50, 0.12) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--eco-white) 0%,
      var(--eco-off-white) 52%,
      var(--eco-green-pale) 100%
    );
}


/* Pale green section gradient */
.eco-bg-green-soft-gradient {
  background:
    linear-gradient(
      135deg,
      var(--eco-green-pale) 0%,
      var(--eco-green-soft) 52%,
      var(--eco-white) 100%
    );
}


/* Standalone green radial glow */
.eco-bg-green-glow {
  background-image:
    radial-gradient(
      circle at 50% 0%,
      rgba(101, 184, 50, 0.22) 0%,
      rgba(101, 184, 50, 0.07) 30%,
      transparent 62%
    );
}


/* =========================================================
   3. TECHNICAL GRID BACKGROUNDS
   ========================================================= */

/* Dark engineering-style grid */
.eco-bg-grid-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--eco-charcoal);
}

.eco-bg-grid-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    );
  background-size: 52px 52px;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.9),
      transparent 92%
    );
  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.9),
      transparent 92%
    );
}


/* Light engineering-style grid */
.eco-bg-grid-light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--eco-off-white);
}

.eco-bg-grid-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(
      rgba(17, 23, 19, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(17, 23, 19, 0.055) 1px,
      transparent 1px
    );
  background-size: 52px 52px;
}


/* =========================================================
   4. IMAGE OVERLAYS
   ========================================================= */

/* Dark left-to-right overlay */
.eco-overlay-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.eco-overlay-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(9, 13, 11, 0.94) 0%,
      rgba(9, 13, 11, 0.75) 48%,
      rgba(9, 13, 11, 0.22) 100%
    );
}


/* Green and charcoal image overlay */
.eco-overlay-green-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.eco-overlay-green-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      rgba(40, 87, 22, 0.94) 0%,
      rgba(21, 27, 23, 0.88) 54%,
      rgba(9, 13, 11, 0.42) 100%
    );
}


/* =========================================================
   5. SOLID BACKGROUNDS
   ========================================================= */

.eco-bg-white {
  background-color: var(--eco-white);
}

.eco-bg-off-white {
  background-color: var(--eco-off-white);
}

.eco-bg-soft-grey {
  background-color: var(--eco-soft-grey);
}

.eco-bg-green-soft {
  background-color: var(--eco-green-soft);
}

.eco-bg-green {
  background-color: var(--eco-green);
}

.eco-bg-green-dark {
  background-color: var(--eco-green-dark);
}

.eco-bg-charcoal {
  background-color: var(--eco-charcoal);
}

.eco-bg-near-black {
  background-color: var(--eco-near-black);
}

.eco-bg-black {
  background-color: var(--eco-black);
}


/* =========================================================
   6. BASE CARD
   ========================================================= */

/*
 * Apply this class to every card, then add one card colour
 * class and any required hover-effect classes.
 */
.eco-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--eco-radius-card);
  transition:
    transform var(--eco-transition),
    border-color var(--eco-transition),
    box-shadow var(--eco-transition),
    background-color var(--eco-transition);
}


/* =========================================================
   7. CARD COLOUR STYLES
   ========================================================= */

/* Standard white card */
.eco-card-light {
  background-color: var(--eco-white);
  border: 1px solid var(--eco-border-light);
  box-shadow: var(--eco-shadow-small);
}

.eco-card-light:hover,
.eco-card-light:focus-within {
  border-color: var(--eco-border-green);
  box-shadow: var(--eco-shadow-medium);
}


/* Soft off-white card */
.eco-card-soft {
  background-color: var(--eco-off-white);
  border: 1px solid var(--eco-border-light);
}

.eco-card-soft:hover,
.eco-card-soft:focus-within {
  background-color: var(--eco-white);
  border-color: var(--eco-border-green);
  box-shadow: var(--eco-shadow-small);
}


/* Dark gradient card */
.eco-card-dark {
  background:
    linear-gradient(
      145deg,
      var(--eco-charcoal-light) 0%,
      var(--eco-charcoal) 55%,
      var(--eco-near-black) 100%
    );
  border: 1px solid var(--eco-border-dark);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.18);
}

.eco-card-dark:hover,
.eco-card-dark:focus-within {
  border-color: var(--eco-border-green);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(101, 184, 50, 0.08);
}


/* Solid green feature card */
.eco-card-green {
  background:
    linear-gradient(
      145deg,
      var(--eco-green-hover) 0%,
      var(--eco-green) 48%,
      var(--eco-green-dark) 100%
    );
  border: 1px solid rgba(40, 87, 22, 0.3);
  box-shadow: var(--eco-shadow-green);
}

.eco-card-green:hover,
.eco-card-green:focus-within {
  box-shadow:
    0 22px 58px rgba(66, 133, 31, 0.32);
}


/* Glass card for dark sections */
.eco-card-glass {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.055) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.20);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.eco-card-glass:hover,
.eco-card-glass:focus-within {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.075) 100%
    );
  border-color: rgba(101, 184, 50, 0.65);
}


/* =========================================================
   8. CARD MOVEMENT
   ========================================================= */

/* Larger hover lift */
.eco-card-lift:hover,
.eco-card-lift:focus-within {
  transform: translateY(-8px);
}


/* Smaller hover lift */
.eco-card-lift-small:hover,
.eco-card-lift-small:focus-within {
  transform: translateY(-4px);
}


/* =========================================================
   9. EXTENDING GREEN CARD LINES
   ========================================================= */

/* Green line along the bottom */
.eco-card-line::after {
  content: "";
  position: absolute;
  left: 1.75rem;
  bottom: 0;
  z-index: 3;
  width: 44px;
  height: 3px;
  pointer-events: none;
  background-color: var(--eco-green);
  transition:
    width var(--eco-transition-slow),
    background-color var(--eco-transition);
}

.eco-card-line:hover::after,
.eco-card-line:focus-within::after {
  width: calc(100% - 3.5rem);
  background-color: var(--eco-green-hover);
}


/* Green line along the top */
.eco-card-line-top::after {
  content: "";
  position: absolute;
  left: 1.75rem;
  top: 0;
  z-index: 3;
  width: 44px;
  height: 3px;
  pointer-events: none;
  background-color: var(--eco-green);
  transition:
    width var(--eco-transition-slow),
    background-color var(--eco-transition);
}

.eco-card-line-top:hover::after,
.eco-card-line-top:focus-within::after {
  width: calc(100% - 3.5rem);
  background-color: var(--eco-green-hover);
}


/* =========================================================
   10. ADDITIONAL CARD HOVER EFFECTS
   ========================================================= */

/* Full green border on hover */
.eco-card-border-hover:hover,
.eco-card-border-hover:focus-within {
  border-color: var(--eco-green);
  box-shadow:
    0 0 0 1px rgba(101, 184, 50, 0.12),
    var(--eco-shadow-medium);
}


/* Soft green glow revealed inside the card */
.eco-card-green-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      circle at 0% 100%,
      rgba(101, 184, 50, 0.18) 0%,
      transparent 54%
    );
  transition: opacity var(--eco-transition);
}

.eco-card-green-wash:hover::before,
.eco-card-green-wash:focus-within::before {
  opacity: 1;
}


/* =========================================================
   11. IMAGE CARD EFFECTS
   ========================================================= */

/* Controlled image zoom */
.eco-card-image .elementor-widget-image,
.eco-card-image .elementor-image,
.eco-card-image figure,
.eco-card-image .wp-caption {
  overflow: hidden;
}

.eco-card-image img {
  width: 100%;
  transition:
    transform var(--eco-transition-slow),
    filter var(--eco-transition-slow);
}

.eco-card-image:hover img,
.eco-card-image:focus-within img {
  transform: scale(1.045);
}


/* Darken image slightly on hover */
.eco-card-image-darken:hover img,
.eco-card-image-darken:focus-within img {
  filter: brightness(0.84) saturate(1.08);
}


/* Dark image overlay */
.eco-card-image-overlay {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.eco-card-image-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(9, 13, 11, 0.90) 0%,
      rgba(9, 13, 11, 0.28) 55%,
      rgba(9, 13, 11, 0.04) 100%
    );
  transition: background var(--eco-transition);
}

.eco-card-image-overlay:hover::before,
.eco-card-image-overlay:focus-within::before {
  background:
    linear-gradient(
      to top,
      rgba(9, 13, 11, 0.94) 0%,
      rgba(40, 87, 22, 0.42) 58%,
      rgba(9, 13, 11, 0.08) 100%
    );
}


/* =========================================================
   12. RESPONSIVE ADJUSTMENTS
   ========================================================= */

@media (max-width: 767px) {
  .eco-card-line::after,
  .eco-card-line-top::after {
    left: 1.25rem;
    width: 36px;
  }

  .eco-card-line:hover::after,
  .eco-card-line:focus-within::after,
  .eco-card-line-top:hover::after,
  .eco-card-line-top:focus-within::after {
    width: calc(100% - 2.5rem);
  }

  .eco-card-lift:hover,
  .eco-card-lift:focus-within,
  .eco-card-lift-small:hover,
  .eco-card-lift-small:focus-within {
    transform: translateY(-3px);
  }

  .eco-bg-grid-dark::before,
  .eco-bg-grid-light::before {
    background-size: 36px 36px;
  }
}


/* =========================================================
   13. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .eco-card,
  .eco-card::before,
  .eco-card::after,
  .eco-card img {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .eco-card:hover,
  .eco-card:focus-within,
  .eco-card:hover img,
  .eco-card:focus-within img {
    transform: none;
  }
}/* End custom CSS */