/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =========================================================
   IECF Sponsor Contact Section - WPBakery + CF7
   Version: 1.0
========================================================= */

/* =========================================================
   00. INDEX
========================================================= */
/*
   01. Main Section Wrapper
   02. WPBakery Layout Fixes
   03. Left Content Area
      03.01 Contact Title
      03.02 Contact Subtitle
      03.03 Contact List
      03.04 Contact Icons
   04. CF7 Form Card
   05. CF7 Form Fields
      05.01 Field Groups
      05.02 Name Grid
      05.03 Inputs and Textarea
      05.04 Focus State
   06. Message Field and Submit Button
   07. Copy Checkbox
   08. CF7 Validation and Response Messages
   09. Responsive - Tablet
   10. Responsive - Mobile
*/


/* =========================================================
   01. MAIN SECTION WRAPPER
========================================================= */

.iecf-sponsor-contact-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0 !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(38, 123, 96, 0.18) 0%, rgba(38, 123, 96, 0.07) 28%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(115deg, rgba(221, 241, 233, 0.85) 0%, rgba(255, 255, 255, 0.98) 45%, #ffffff 100%) !important;
}


/* =========================================================
   02. WPBAKERY LAYOUT FIXES
========================================================= */

.iecf-sponsor-contact-section.vc_row,
.iecf-sponsor-contact-section .vc_row {
  position: relative;
  z-index: 1;
}

.iecf-sponsor-contact-section .wpb_column,
.iecf-sponsor-contact-section .vc_column-inner,
.iecf-sponsor-contact-section .wpb_wrapper {
  position: relative;
  z-index: 2;
}

.iecf-sponsor-contact-section .vc_column-inner {
  height: 100%;
}

.iecf-sponsor-contact-section .wpb_wrapper {
  width: 100%;
}


/* =========================================================
   03. LEFT CONTENT AREA
========================================================= */

.iecf-contact-info {
  max-width: 560px;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ---------------------------------------------------------
   03.01 CONTACT TITLE
--------------------------------------------------------- */

.iecf-contact-title {
  margin: 0 0 58px;
  color: #050505 !important;
  font-size: clamp(2.1rem, 3.3vw, 3.9rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
}


/* ---------------------------------------------------------
   03.02 CONTACT SUBTITLE
--------------------------------------------------------- */

.iecf-contact-subtitle {
  display: none;
}


/* ---------------------------------------------------------
   03.03 CONTACT LIST
--------------------------------------------------------- */

.iecf-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.iecf-contact-list li {
  display: flex;
  align-items: center;
  gap: 22px;
  color: #111111;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.35;
}


/* ---------------------------------------------------------
   03.04 CONTACT ICONS
--------------------------------------------------------- */

.iecf-contact-icon {
  width: 52px;
  min-width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0b6f52;
}

.iecf-contact-icon svg {
  width: 38px;
  height: 38px;
  display: block;
  fill: #0b6f52;
  transition: fill 0.25s ease, transform 0.25s ease;
}

.iecf-contact-list li:hover .iecf-contact-icon svg {
  fill: #095c44;
  transform: scale(1.08);
}


/* =========================================================
   04. CF7 FORM CARD
========================================================= */

.iecf-sponsor-form-card {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  padding: 56px 48px 62px;
  background: rgba(255, 255, 255, 0.96);
  border: 16px solid transparent;
  border-radius: 44px;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(135deg, #8db13f 0%, #d8e7bc 43%, #f4f8ee 58%, #0d7659 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 28px 38px rgba(7, 112, 84, 0.22),
    0 10px 28px rgba(0, 0, 0, 0.08);
}

.iecf-sponsor-form-card .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}


/* =========================================================
   05. CF7 FORM FIELDS
========================================================= */

/* ---------------------------------------------------------
   05.01 FIELD GROUPS
--------------------------------------------------------- */

.iecf-form-group {
  margin-bottom: 30px;
}

.iecf-form-group label {
  display: block;
  margin-bottom: 14px;
  color: #1c1462;
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}


/* ---------------------------------------------------------
   05.02 NAME GRID
--------------------------------------------------------- */

.iecf-name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}


/* ---------------------------------------------------------
   05.03 INPUTS AND TEXTAREA
--------------------------------------------------------- */

.iecf-sponsor-form-card input[type="text"],
.iecf-sponsor-form-card input[type="email"],
.iecf-sponsor-form-card textarea {
  width: 100% !important;
  border: 2px solid #e7e7ec !important;
  outline: none !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: all 0.25s ease;
}

.iecf-sponsor-form-card input[type="text"],
.iecf-sponsor-form-card input[type="email"] {
  height: 58px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
}

.iecf-sponsor-form-card textarea {
  min-height: 128px !important;
  resize: vertical;
  padding: 20px 22px !important;
  border-radius: 12px !important;
}

.iecf-sponsor-form-card input::placeholder,
.iecf-sponsor-form-card textarea::placeholder {
  color: #9b9bad !important;
}


/* ---------------------------------------------------------
   05.04 FOCUS STATE
--------------------------------------------------------- */

.iecf-sponsor-form-card input:focus,
.iecf-sponsor-form-card textarea:focus {
  border-color: #0d7659 !important;
  box-shadow: 0 0 0 4px rgba(13, 118, 89, 0.11) !important;
}


/* =========================================================
   06. MESSAGE FIELD AND SUBMIT BUTTON
========================================================= */

.iecf-message-wrap {
  position: relative;
}

.iecf-send-btn,
.iecf-sponsor-form-card input[type="submit"].iecf-send-btn {
  position: absolute !important;
  right: 0;
  bottom: -40px;
  min-width: 150px;
  height: 58px;
  border: 0 !important;
  border-radius: 999px !important;
  background: #0b6f52 !important;
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  cursor: pointer;
  box-shadow: 0 9px 16px rgba(0, 0, 0, 0.24) !important;
  transition: all 0.25s ease;
  text-transform: none !important;
  line-height: 1 !important;
  padding: 0 32px !important;
}

.iecf-send-btn:hover,
.iecf-sponsor-form-card input[type="submit"].iecf-send-btn:hover {
  background: #095c44 !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.26) !important;
}


/* =========================================================
   07. COPY CHECKBOX
========================================================= */

.iecf-copy-row {
  margin-top: 18px;
  color: #9b9bad;
  font-size: 1rem;
  font-weight: 500;
}

.iecf-copy-row .wpcf7-list-item {
  margin: 0 !important;
}

.iecf-copy-row label {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.iecf-copy-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  border-radius: 6px !important;
  background: #0b7a5a !important;
  border: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  margin: 0 !important;
}

.iecf-copy-row input[type="checkbox"]::after {
  content: "✓";
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  position: absolute;
  top: 2px;
  left: 6px;
}

.iecf-copy-row input[type="checkbox"]:not(:checked) {
  background: #ffffff !important;
  border: 2px solid #d8d8df !important;
}

.iecf-copy-row input[type="checkbox"]:not(:checked)::after {
  display: none;
}

.iecf-copy-row .wpcf7-list-item-label {
  color: #9b9bad !important;
}


/* =========================================================
   08. CF7 VALIDATION AND RESPONSE MESSAGES
========================================================= */

.iecf-sponsor-form-card .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #b3261e;
}

.iecf-sponsor-form-card .wpcf7-response-output {
  margin: 22px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 0.95rem;
}


/* =========================================================
   09. RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991px) {
  .iecf-sponsor-contact-section {
    padding: 70px 0 !important;
  }

  .iecf-contact-info {
    min-height: auto;
    text-align: center;
    margin: 0 auto 35px;
    align-items: center;
  }

  .iecf-contact-title {
    margin-bottom: 38px;
  }

  .iecf-contact-list {
    align-items: center;
    gap: 24px;
  }

  .iecf-contact-list li {
    justify-content: center;
    text-align: center;
    font-size: 1.05rem;
  }

  .iecf-sponsor-form-card {
    max-width: 100%;
    margin: 0 auto;
    padding: 42px 26px 54px;
    border-width: 12px;
    border-radius: 34px;
  }
}


/* =========================================================
   10. RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 575px) {
  .iecf-sponsor-contact-section {
    padding: 55px 0 !important;
  }

  .iecf-contact-title {
    font-size: 2.25rem;
  }

  .iecf-contact-list li {
    flex-direction: column;
    gap: 10px;
  }

  .iecf-contact-icon {
    width: 56px;
    min-width: 56px;
    height: 56px;
  }

  .iecf-contact-icon svg {
    width: 40px;
    height: 40px;
  }

  .iecf-name-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .iecf-sponsor-form-card {
    padding: 34px 20px 48px;
    border-width: 10px;
    border-radius: 30px;
  }

  .iecf-form-group label {
    font-size: 0.8rem;
    letter-spacing: 0.17em;
  }

  .iecf-send-btn,
  .iecf-sponsor-form-card input[type="submit"].iecf-send-btn {
    position: relative !important;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 18px;
  }

  .iecf-copy-row {
    margin-top: 18px;
  }
}


/* =========================================================
   EVENT ZONES - TOP ICON BUTTONS STYLE
   Version: 1.0
========================================================= */

/* =========================================================
   01. Force Event Zones Layout Vertical
========================================================= */

.zones__layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  width: 100% !important;
}


/* =========================================================
   02. Top Navigation Wrapper
========================================================= */

.zones__nav,
.zones__nav--top {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto 28px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  z-index: 10 !important;
}


/* =========================================================
   03. Icon Buttons Base Style
========================================================= */

.zones__btn {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(9, 102, 77, 0.10) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;

  box-shadow:
    0 15px 25px rgba(0, 0, 0, 0.10),
    0 5px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

  cursor: pointer !important;
  overflow: hidden !important;
  transform: translateY(0) !important;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease,
    border-color 0.28s ease !important;
}


/* =========================================================
   04. Button Light Reflection Effect
========================================================= */

.zones__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.18) 42%,
      rgba(255, 255, 255, 0) 100%
    );
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 0.28s ease;
}


/* =========================================================
   05. Icon Image Style
========================================================= */

.zones__btn img {
  position: relative !important;
  z-index: 2 !important;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: contain !important;
  display: block !important;
  transition:
    transform 0.28s ease,
    filter 0.28s ease,
    opacity 0.28s ease !important;
}


/* =========================================================
   06. Hover State
========================================================= */

.zones__btn:hover {
  transform: translateY(-6px) !important;
  background: #ffffff !important;
  border-color: rgba(9, 102, 77, 0.20) !important;
  box-shadow:
    0 20px 34px rgba(0, 0, 0, 0.14),
    0 8px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.zones__btn:hover img {
  transform: scale(1.08) !important;
}


/* =========================================================
   07. Active Button State
========================================================= */

.zones__btn.is-active,
.zones__btn[aria-current="true"] {
  background: #0b6f52 !important;
  border-color: rgba(11, 111, 82, 0.95) !important;
  transform: translateY(-6px) !important;
  box-shadow:
    0 18px 28px rgba(11, 111, 82, 0.32),
    0 7px 14px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.zones__btn.is-active::before,
.zones__btn[aria-current="true"]::before {
  opacity: 0.22;
}

.zones__btn.is-active img,
.zones__btn[aria-current="true"] img {
  filter: brightness(0) invert(1) !important;
  transform: scale(1.05) !important;
}


/* =========================================================
   08. Main Box Alignment After Moving Buttons Top
========================================================= */

.zones__box {
  width: 100% !important;
  margin: 0 auto !important;
}


/* =========================================================
   09. Tablet Responsive
========================================================= */

@media (max-width: 991px) {
  .zones__nav,
  .zones__nav--top {
    max-width: 100% !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  .zones__btn {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    border-radius: 17px !important;
  }

  .zones__btn img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }
}


/* =========================================================
   10. Mobile Responsive
========================================================= */

@media (max-width: 575px) {
  .zones__nav,
  .zones__nav--top {
    gap: 12px !important;
    margin-bottom: 22px !important;
    overflow-x: auto !important;
    
    padding: 4px 18px 10px !important;
    scrollbar-width: none;
  }

  .zones__nav::-webkit-scrollbar,
  .zones__nav--top::-webkit-scrollbar {
    display: none;
  }

  .zones__btn {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 16px !important;
  }

  .zones__btn img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
}


/* =========================================================
   EVENT ZONES - FINAL BUTTON + TITLE OVERRIDES
========================================================= */

/* Title uppercase with line below */
.zones__title {
  position: relative !important;
  display: inline-block !important;
  margin: 0 auto 42px !important;
  padding-bottom: 16px !important;
  color: #0b6f52 !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

.zones__title::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 82px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #0b6f52 !important;
  transform: translateX(-50%) !important;
}

.zones__header {
  text-align: center !important;
}

/* Top nav - no shadow on wrapper */
.zones__nav,
.zones__nav--top {
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}

/* Button style - shadow only on buttons */
.zones__btn {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(11, 111, 82, 0.14) !important;
  background: rgba(255, 255, 255, 0.96) !important;

  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.12),
    0 5px 12px rgba(0, 0, 0, 0.06) !important;

  transform: translateY(0) !important;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease,
    border-color 0.28s ease !important;
}

/* Non-active icons green */
.zones__btn:not(.is-active) img,
.zones__btn:not([aria-current="true"]) img {
  filter: brightness(0) saturate(100%) invert(30%) sepia(58%) saturate(587%) hue-rotate(116deg) brightness(88%) contrast(92%) !important;
  opacity: 1 !important;
}

/* Hover for non-active buttons */
.zones__btn:not(.is-active):hover,
.zones__btn:not([aria-current="true"]):hover {
  background: #ffffff !important;
  border-color: rgba(11, 111, 82, 0.28) !important;
  transform: translateY(-6px) !important;

  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.16),
    0 7px 14px rgba(0, 0, 0, 0.08) !important;
}

.zones__btn:not(.is-active):hover img,
.zones__btn:not([aria-current="true"]):hover img {
  filter: brightness(0) saturate(100%) invert(30%) sepia(58%) saturate(587%) hue-rotate(116deg) brightness(88%) contrast(92%) !important;
  transform: scale(1.08) !important;
}

/* Active button */
.zones__btn.is-active,
.zones__btn[aria-current="true"] {
  background: #0b6f52 !important;
  border-color: #0b6f52 !important;
  transform: translateY(-6px) !important;

  box-shadow:
    0 18px 30px rgba(11, 111, 82, 0.36),
    0 8px 16px rgba(0, 0, 0, 0.14) !important;
}

/* Active icon white */
.zones__btn.is-active img,
.zones__btn[aria-current="true"] img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

/* Remove unwanted shadow from icon image itself */
.zones__btn img {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Mobile title spacing */
@media (max-width: 575px) {
  .zones__title {
    margin-bottom: 32px !important;
    padding-bottom: 14px !important;
    font-size: 1.8rem !important;
  }

  .zones__title::after {
    width: 64px !important;
    height: 3px !important;
  }
}



/* =========================================================
   GLOBAL UTILITY - UNDERLINE BELOW ANY DIV
========================================================= */

.iecf-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.iecf-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 82px;
  height: 4px;
  border-radius: 999px;
  background: #0b6f52;
  transform: translateX(-50%);
}



/* =========================================================
   IECF Divider Pattern - Final
========================================================= */

.scrolling-pattern-section,
.iecf-divider-row {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
}

/* Force WPBakery / theme wrappers to not add grey background */
.iecf-divider-row,
.iecf-divider-row .vc_row,
.iecf-divider-row .vc_column-inner,
.iecf-divider-row .wpb_wrapper {
  background: #ffffff !important;
}

/* Track */
.pattern-track {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #ffffff !important;

  /* This creates real opacity fade on the left and right sides */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 1) 14%,
    rgba(0, 0, 0, 1) 86%,
    rgba(0, 0, 0, 0.2) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 1) 14%,
    rgba(0, 0, 0, 1) 86%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

/* Extra white fade layer to remove harsh edges */
.scrolling-pattern-section::before,
.scrolling-pattern-section::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  width: 12% !important;
  height: 100% !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.scrolling-pattern-section::before {
  left: 0 !important;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.25) 55%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

.scrolling-pattern-section::after {
  right: 0 !important;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.25) 55%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

/* Scrolling content */
.pattern-content {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  animation: iecfPatternScroll 28s linear infinite !important;
  background: transparent !important;
}

.pattern-content img {
  display: block !important;
  width: auto !important;
  height: 110px !important;
  max-width: none !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Animation */
@keyframes iecfPatternScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-33.333%);
  }
}

/* Pause on hover */
.scrolling-pattern-section:hover .pattern-content {
  animation-play-state: paused !important;
}

/* Mobile */
@media (max-width: 767px) {
  .pattern-content img {
    height: 80px !important;
  }

  .scrolling-pattern-section::before,
  .scrolling-pattern-section::after {
    width: 18% !important;
  }

  .pattern-track {
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 1) 20%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0.2) 100%
    );
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 1) 20%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0.2) 100%
    );
  }
}


/* =========================================================
   IECF GLOBAL UTILITY - RADIAL GLOW SYSTEM
   Color: #0f7155
   Version: 1.0
========================================================= */

/* =========================================================
   00. INDEX
========================================================= */
/*
   01. Base Glow Class
   02. Position Options
   03. Size Options
   04. Strength / Opacity Options
   05. Blur Options
   06. Layer / Z-Index Options
   07. Overflow Options
   08. Responsive Adjustments
*/


/* =========================================================
   01. BASE GLOW CLASS
========================================================= */

.iecf-glow {
  position: relative;
  overflow: show;
  isolation: isolate;

  /* Default position */
  --iecf-glow-x: 50%;
  --iecf-glow-y: 50%;

  /* Default size */
  --iecf-glow-size: 620px;

  /* Default color: #0f7155 */
  --iecf-glow-rgb: 15, 113, 85;

  /* Default opacity levels */
  --iecf-glow-opacity-main: 0.20;
  --iecf-glow-opacity-mid: 0.14;
  --iecf-glow-opacity-soft: 0.08;

  /* Default blur */
  --iecf-glow-blur: 18px;

  /* Default layer */
  --iecf-glow-z: 0;
}

.iecf-glow::before {
  content: "";
  position: absolute;
  left: var(--iecf-glow-x);
  top: var(--iecf-glow-y);
  width: var(--iecf-glow-size);
  height: var(--iecf-glow-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--iecf-glow-z);

  background: radial-gradient(
    circle,
    rgba(var(--iecf-glow-rgb), var(--iecf-glow-opacity-main)) 0%,
    rgba(var(--iecf-glow-rgb), var(--iecf-glow-opacity-mid)) 28%,
    rgba(var(--iecf-glow-rgb), var(--iecf-glow-opacity-soft)) 48%,
    rgba(var(--iecf-glow-rgb), 0) 72%
  );

  filter: blur(var(--iecf-glow-blur));
}

/* Keeps section content above the default glow */
.iecf-glow > * {
  position: relative;
  z-index: 2;
}


/* =========================================================
   02. POSITION OPTIONS
========================================================= */

.glow-center {
  --iecf-glow-x: 50%;
  --iecf-glow-y: 50%;
}

.glow-top-center {
  --iecf-glow-x: 50%;
  --iecf-glow-y: 0%;
}

.glow-bottom-center {
  --iecf-glow-x: 50%;
  --iecf-glow-y: 50%;
}

.glow-left-center {
  --iecf-glow-x: 0%;
  --iecf-glow-y: 50%;
}

.glow-right-center {
  --iecf-glow-x: 100%;
  --iecf-glow-y: 50%;
}

.glow-top-left {
  --iecf-glow-x: 0%;
  --iecf-glow-y: 0%;
}

.glow-top-right {
  --iecf-glow-x: 100%;
  --iecf-glow-y: 0%;
}

.glow-bottom-left {
  --iecf-glow-x: 0%;
  --iecf-glow-y: 100%;
}

.glow-bottom-right {
  --iecf-glow-x: 100%;
  --iecf-glow-y: 100%;
}


/* =========================================================
   03. SIZE OPTIONS
========================================================= */

.glow-xs {
  --iecf-glow-size: 260px;
}

.glow-sm {
  --iecf-glow-size: 420px;
}

.glow-md {
  --iecf-glow-size: 620px;
}

.glow-lg {
  --iecf-glow-size: 900px;
}

.glow-xl {
  --iecf-glow-size: 1200px;
}

.glow-xxl {
  --iecf-glow-size: 1500px;
}


/* =========================================================
   04. STRENGTH / OPACITY OPTIONS
========================================================= */

.glow-very-soft {
  --iecf-glow-opacity-main: 0.08;
  --iecf-glow-opacity-mid: 0.055;
  --iecf-glow-opacity-soft: 0.03;
}

.glow-soft {
  --iecf-glow-opacity-main: 0.12;
  --iecf-glow-opacity-mid: 0.08;
  --iecf-glow-opacity-soft: 0.045;
}

.glow-normal {
  --iecf-glow-opacity-main: 0.20;
  --iecf-glow-opacity-mid: 0.14;
  --iecf-glow-opacity-soft: 0.08;
}

.glow-strong {
  --iecf-glow-opacity-main: 0.32;
  --iecf-glow-opacity-mid: 0.22;
  --iecf-glow-opacity-soft: 0.12;
}

.glow-extra-strong {
  --iecf-glow-opacity-main: 0.45;
  --iecf-glow-opacity-mid: 0.30;
  --iecf-glow-opacity-soft: 0.16;
}


/* =========================================================
   05. BLUR OPTIONS
========================================================= */

.glow-blur-none {
  --iecf-glow-blur: 0;
}

.glow-blur-sm {
  --iecf-glow-blur: 10px;
}

.glow-blur-md {
  --iecf-glow-blur: 18px;
}

.glow-blur-lg {
  --iecf-glow-blur: 32px;
}

.glow-blur-xl {
  --iecf-glow-blur: 48px;
}


/* =========================================================
   06. LAYER / Z-INDEX OPTIONS
========================================================= */

/* Default: behind content but above section background */
.glow-layer-behind {
  --iecf-glow-z: 0;
}

/* Between background and content */
.glow-layer-middle {
  --iecf-glow-z: 1;
}

/* Above content inside the same section */
.glow-layer-above {
  --iecf-glow-z: 5;
}

/* On top of everything inside the same section */
.glow-layer-top {
  --iecf-glow-z: 20;
}

/* Makes the whole section higher than nearby sections */
.glow-section-top {
  z-index: 20;
}

/* Very high section level */
.glow-section-highest {
  z-index: 999;
}


/* =========================================================
   07. OVERFLOW OPTIONS
========================================================= */

/* Default clips the glow inside the section */
.glow-clip {
  overflow: hidden;
}

/* Allows glow to extend outside the section */
.glow-visible {
  overflow: visible;
}


/* =========================================================
   08. RESPONSIVE ADJUSTMENTS
========================================================= */

@media (max-width: 991px) {
  .glow-lg {
    --iecf-glow-size: 760px;
  }

  .glow-xl {
    --iecf-glow-size: 950px;
  }

  .glow-xxl {
    --iecf-glow-size: 1150px;
  }
}

@media (max-width: 575px) {
  .glow-sm {
    --iecf-glow-size: 340px;
  }

  .glow-md {
    --iecf-glow-size: 460px;
  }

  .glow-lg {
    --iecf-glow-size: 620px;
  }

  .glow-xl {
    --iecf-glow-size: 760px;
  }

  .glow-xxl {
    --iecf-glow-size: 900px;
  }
}