/*
Theme Name: UnionCRM Theme
Theme URI: https://unioncrm.test
Author: UnionCRM
Description: Front-end theme for UnionCRM — public site plus the member portal.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: union-crm
*/

/* ═══════════════════════════════════════════════════════════════════════════
   UnionCRM design tokens — Emerald
   ───────────────────────────────────────────────────────────────────────────
   Not an invented palette: bin/retheme-navy.py measured it off the hero artwork.
   That image is one blue family (hue 201-213) with its mass at #1f4231 and mid-tones
   at #178050, and its glow averages hue 200 / saturation 88% / lightness 68%. So the
   brand blue is the hero's own blue and the accent is the hero's own glow. New work should use
   these variables; a future rebrand then only has to change this block.

   Note: the HTML email templates in the plugin cannot use custom properties —
   mail clients do not support them — so their colours stay literal.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* brand — emerald */
    --uc-primary-900: #06251a;
    --uc-primary-800: #0a3826;
    --uc-primary-700: #0f4c33;
    --uc-primary-600: #146741;
    --uc-primary:     #178050;
    --uc-primary-400: #1e9e5a;
    --uc-primary-300: #3ecf8e;
    --uc-primary-200: #7fe0b3;
    --uc-primary-100: #b8efd4;
    --uc-primary-050: #e8f9f0;

    /* accent — the mint end of the ramp.
       --uc-accent-glow reads only on dark surfaces, so it is for highlights, hairlines
       and the light end of gradients. Buttons use --uc-accent. */
    --uc-accent-glow:  #3ecf8e;
    --uc-accent:       #1e9e5a;
    --uc-accent-dark:  #157a48;
    --uc-accent-light: #a9ecca;
    --uc-accent-050:   #e6faf0;

    /* text and structure — cool neutrals, not warm */
    --uc-ink:         #0c1a14;
    --uc-ink-soft:    #17281f;
    --uc-ink-muted:   #26382d;
    --uc-muted:       #4d6357;
    --uc-muted-light: #4d6357;
    --uc-line:        #d3e3d9;
    --uc-line-soft:   #e9f4ee;
    --uc-surface:     #f4faf7;
    --uc-surface-alt: #e9f4ee;
    --uc-white:       #ffffff;

    /* status */
    --uc-success: #1e9e5a; --uc-success-bg: #e3f5ea; --uc-success-text: #14603a;
    --uc-warn:    #d97706; --uc-warn-bg:    #fdf1dc; --uc-warn-text:    #7a4e06;
    --uc-danger:  #dc2626; --uc-danger-bg:  #fce8e8; --uc-danger-text:  #7a2020;
    --uc-info:    #178050; --uc-info-bg:    #e8f9f0; --uc-info-text:    #0f4c33;

    /* type */
    --uc-font-display: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;
    --uc-font-text:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --uc-radius:    10px;
    --uc-radius-sm: 6px;
    --uc-shadow:    0 1px 2px rgba(12, 26, 20, .06), 0 8px 24px rgba(12, 26, 20, .10);
}

/* Base typography. Sora carries the headings, Inter everything else; the
   tabular figures matter on every invoice, receipt and dues table. */
body {
    font-family: var(--uc-font-text);
    color: var(--uc-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.stand-header, .section-title, .hero-content h1 {
    font-family: var(--uc-font-display);
    letter-spacing: -.015em;
}

table, .amount, .money, td, th, input[type="number"] {
    font-variant-numeric: tabular-nums;
}


/* The old theme registered a script face here for the italic "statement" lines.
   That font is gone with the rebrand — those lines now use Sora italic, which the
   variable face in assets/css/fonts.css already covers, so no @font-face is needed. */

.bannerBox {
    position: relative;
    width: 100%;
    /* Responsive hero, bounded: scales with the viewport on small/medium screens but is capped
       in px so it never dominates the page on large monitors or when zoomed out. */
    min-height: clamp(360px, 40vw, 620px);
    background-image: url(../unioncrm-theme/images/banner.jpg);
    /* Centre the crop on the car + walking field technician (they sit ~33–84% down the photo). */
    background-position: center 58%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #ffffff;
}

/* Crisp diagonal navy wedge on the LEFT (matches the approved mockup). */
.bannerBox::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #0a3826;
    opacity: .75;
    clip-path: polygon(0 0, 36% 0, 48% 100%, 0 100%);
    z-index: 1;
    /* Grey wedge slides in from the left together with the text. */
    animation: bannerSlideInLeft 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bannerContent {
    position: relative;
    z-index: 2;
    max-width: 40%;
    padding: 30px 6%;
    text-transform: uppercase;
    /* Slide in from the left on every page load / refresh (in sync with the grey wedge). */
    animation: bannerSlideInLeft 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bannerSlideInLeft {
    from {
        transform: translateX(-100vw);
    }
    to {
        transform: translateX(0);
    }
}

.bannerContent .eyebrow {
    margin: 0;
    font-size: clamp(12px, 1.35vw, 18px);
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.35;
}

.bannerContent h1 {
    margin: 6px 0 12px;
    font-size: clamp(32px, 4.8vw, 64px);
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.02;  
}

.bannerContent .tagline {
    margin: 0;
    font-size: clamp(12px, 1.15vw, 16px);
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.4;
}

/* Tablet / mid (also triggers on browser zoom-in): give the text more room, widen the shade. */
@media(max-width: 1100px) {
    .bannerBox::before {
        clip-path: polygon(0 0, 48% 0, 62% 100%, 0 100%);
    }
    .bannerContent {
        max-width: 58%;
    }
}

/* Phone: full dark overlay, full-width text. */
@media(max-width: 767px) {
    .bannerBox {
        min-height: clamp(300px, 60vw, 380px);
        background-image: url(../unioncrm-theme/images/banner-sm.jpg);
    }
    .bannerBox::before {
        clip-path: none;
        opacity: .82;
    }
    .bannerContent {
        max-width: 100%;
        padding: 24px 7%;
    }
}

.clearfix {
    clear: both
}

.clickhumbericon {
    display: none
}

@media(max-width: 767px) {
    .clickhumbericon {
        display: block
    }
}

.closemenu img {
    width: 45px;
    float: right
}

.mobilemenu {
    width: 300px;
    position: fixed;
    right: -200%;
    top: 0px;
    background: #ffffff;
    height: 100vh;
    transition: all .5s
}

.mobilemenu.openMenu {
    right: 0px
}

.mobilemenu .holder {
    padding-bottom: 200px;
    height: 100%;
    overflow-y: auto
}

.mobilemenu .menu {
    list-style: none
}

.mobilemenu .menu li a {
    font-size: 16px;
    color: #178050;
    text-decoration: none;
    display: block;
    padding: 10px 24px;
    border-bottom: 1px solid #26382d
}

.mobilemenu .menu li a.question-collapse {
    background: url(../unioncrm-theme/images/icons/pluse.svg) 98% center no-repeat
}

.mobilemenu .menu li a.question-collapse.active {
    background: url(../unioncrm-theme/images/icons/minus.svg) 98% center no-repeat
}

.mobilemenu .menu li ul {
    padding: 10px;
    list-style: none;
    display: none;
    border-bottom: 1px solid #26382d
}

.mobilemenu .menu li ul li a {
    border-bottom: 0;
    padding: 4px 40px;
    font-size: 14px
}

.mobilemenu .bottomsection {
    background: #26382d;
    padding: 20px;
    position: absolute;
    bottom: 0px;
    width: 100%
}

.mobilemenu .bottomsection p {
    padding: 30px 0 10px 0;
    color: #ffffff;
    font-size: 16px
}

.mobilemenu .bottomsection a.joinbutton {
    background: #e9f4ee;
    width: 206px;
    display: block;
    border-radius: 6px;
    font-size: 16px;
    color: #167c4d;
    text-decoration: none;
    text-align: center;
    padding: 5px
}

.newsBox {
    width: 100%;
    overflow: hidden;
    padding: 0px 160px 100px 160px;
}

.newsBox .title {
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media(max-width: 767px) {
    .newsBox .title {
        padding: 25px 10px
    }
}

.newsBox .title h2 {
    font-size: 34px;
    line-height: 32px;
    color: #178050;
    font-weight: 800;
    padding: 0;
    text-align: center
}


@media(max-width: 767px) {
    .newsBox .title h2 {
        font-size: 22px
    }
}

.newsBox .title .subtitle {
    font-size: 20px;
    color: #1e2c25;
    font-weight: 600
}



.newsBox .title .viewall {
    color: #1e2c25;
    text-decoration: none;
    font-weight: 600;
    font-size: xx-large;
}

.newsBox .holder {
    margin-right: -40px;
    display: flex;
    flex-flow: wrap
}



@media(max-width: 767px) {
    .newsBox .holder {
        margin-right: 0px
    }
}

.newsBox .block {
    width: 385px;
    margin-right: 40px
}



@media(max-width: 767px) {
    .newsBox .block {
        width: 316px;
        margin: 0px 40px 20px 30px
    }
}

.newsBox .block .inner {
    background: #e9f4ee;
    border: 1px solid #9faca6;
    border-radius: 8px;
    overflow: hidden
}

.newsBox .block .inner .detail {
    padding: 30px
}



.newsBox .block .inner .date {
    font-size: 14px;
    color: #3f5c4d
}



.newsBox .block .inner p {
    font-size: 16px;
    color: #26382d
}



.newsBox .block img {
    width: 100%;
    max-height: 208px;
}

.newsBox .block h3 {
    padding-top: 20px;
    font-size: 24px;
    color: #178050;
    font-weight: 600;
    text-align: center
}



.questionsBox {
    width: 100%;
    background: #178050;
    padding: 70px 0;
    margin-bottom: 100px
}

@media(max-width: 767px) {
    .questionsBox {
        padding: 40px 0
    }
}

.questionsBox .holder {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    padding: 0 250px
}



.questionsBox .left {
    width: 50%
}

@media(max-width: 767px) {
    .questionsBox .left {
        width: 100%;
        padding-bottom: 30px
    }
}

.questionsBox .left h2 {
    font-size: 34px;
    line-height: 32px;
    color: #ffffff;
    font-weight: 800;
    padding: 0
}



@media(max-width: 767px) {
    .questionsBox .left h2 {
        font-size: 22px
    }
}

.questionsBox .left .subtitle {
    font-size: 34px;
    color: #ffffff;
    font-weight: 100;
    font-style: italic
}



@media(max-width: 767px) {
    .questionsBox .left .subtitle {
        font-size: 22px
    }
}

.questionsBox .right {
    width: 50%
}

@media(max-width: 767px) {
    .questionsBox .right {
        width: 100%
    }
}

.questionsBox .right ul {
    list-style: none
}

.questionsBox .right ul li {
    display: block;
    padding-bottom: 20px
}

.questionsBox .right ul li a {
    position: relative;
    font-size: 20px;
    color: #3f5c4d;
    text-decoration: none;
    background: #e9f4ee;
    border-radius: 10px;
    display: block;
    padding: 10px 40px 10px 20px
}

@media(max-width: 767px) {
    .questionsBox .right ul li a {
        font-size: 16px
    }
}

.questionsBox .right ul li a .arrow {
    position: absolute;
    right: 15px;
    top: 10px;
    color: #06251a
}

.questionsBox .right ul li a:hover {
    color: #06251a
}

.serviceBox {
    width: 100%;
    overflow: hidden;
    padding-top: 30px
}

@media(max-width: 767px) {
    .serviceBox {
        padding-top: 0
    }
}

.serviceBox h2 {
    font-size: 34px;
    color: #06251a;
    font-weight: 900;
    padding: 40px 0;
    text-align: center
}


@media(max-width: 767px) {
    .serviceBox h2 {
        font-size: 22px
    }
}

.serviceBox .holder {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 100px;
}



@media(max-width: 767px) {
    .serviceBox .holder {
        margin-right: 0
    }
}

.serviceBox .holder .block {
    width: calc(50% - 100px);
    margin-right: 100px;
    padding-left: 94px;
    padding-bottom: 30px;
    position: relative
}



@media(max-width: 767px) {
    .serviceBox .holder .block {
        width: 100%;
        padding: 0;
        margin-right: 0;
        margin-bottom: 20px;
        text-align: center
    }
}

.serviceBox .holder .block h3 {
    padding-bottom: 10px;
    font-size: 24px;
    color: #06251a;
    font-weight: 600
}


.serviceBox .holder .block p {
    font-size: 16px;
    color: #3f5c4d;
    font-weight: 400
}



.serviceBox .holder .block .icon {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 70px;
    background-color: #e9f4ee;
}



@media(max-width: 767px) {
    .serviceBox .holder .block .icon {
        position: static;
        margin: auto;
    }
}

.standBox {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    text-align: center;
    background: #1e2c25
}

.standBox h2 {
    font-size: 34px;
    color: #ffffff;
    font-weight: 800;
    padding: 0 0 40px 0;
    text-align: center
}



@media(max-width: 767px) {
    .standBox h2 {
        font-size: 22px
    }
}

.standBox p {
    padding: 0 210px;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    line-height: 30px
}



.standBox .holder {
    display: flex;
    flex-wrap: wrap;
    margin-right: -70px;
    padding: 40px 150px 10px 150px
}



@media(max-width: 767px) {
    .standBox .holder {
        margin: 0
    }
}

.standBox .holder .block {
    width: calc(33.3% - 70px);
    margin-right: 70px;
    text-align: center;
    padding-bottom: 20px;
    position: relative
}



@media(max-width: 767px) {
    .standBox .holder .block {
        width: 100%;
        margin: 0 0 20px 0
    }
}

.standBox .holder .block h3 {
    padding-top: 20px;
    font-size: 24px;
    color: #ffffff;
    font-weight: 600
}


.standBox .holder .block .icons {
    font-size: 50px;
    border: 4px solid #ffffff;
    border-radius: 100px;
    display: inline-block;
    width: 60px;
    height: 60px;
    font-weight: 600;
    color: #ffffff;
    line-height: 56px
}



.standBox .holder .block .icons.star {
    font-size: 30px
}



.standBox .learnmore {
    background: #e9f4ee;
    color: #0c1a14;
    font-size: 18px;
    display: inline-block;
    padding: 5px 35px;
    text-decoration: none
}

@media(max-width: 767px) {
    .standBox .learnmore {
        display: none
    }
}

@media(max-width: 767px) {
    .standBox .learnmore1 {
        display: none
    }
}

.footerCntr {
    padding: 90px 160px;
    width: 100%;
    background: #1e2c25
}

.footerCntr .footerBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 40px
}

.footerCntr .footerBox .left {
    width: 400px
}



.footerCntr .footerBox .left h3 {
    padding: 15px 0;
    font-size: 20px;
    color: #ffffff;
    font-weight: 600
}

@media(max-width: 767px) {
    .footerCntr .footerBox .left h3 {
        padding-top: 30px
    }

    .footerCntr .footerBox .right {
        display: none
    }
}

.footerCntr .footerBox .left p {
    font-size: 13px;
    color: #ffffff;
    font-weight: 300
}

.footerCntr .footerBox .right {
    width: calc(100% - 400px);
    padding-left: 70px
}

.footerCntr .footerBox .holder {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap
}

.footerCntr .footerBox .holder .column {
    width: 33.3%
}

.footerCntr .footerBox .holder ul {
    list-style: none
}

.footerCntr .footerBox .holder ul li {
    display: block;
    padding: 6px 0
}

.footerCntr .footerBox .holder ul li a {
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
    text-decoration: none
}

.footerCntr .footerBox .holder ul li a:hover {
    color: #157a48
}

.footerCntr .copyright {
    text-align: center;
    color: #ffffff;
    border-top: 1px solid #91a098;
    padding: 40px 0 0 0
}

.footerCntr .copyright a {
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
    text-decoration: none
}

.footerCntr .copyright a:hover {
    color: #157a48
}

.socialmedia {
    display: block;
    padding-top: 20px;
    width: 100%
}

@media(max-width: 767px) {
    .socialmedia {
        display: block
    }
}

.socialmedia ul {
    list-style: none;
    display: flex
}

.socialmedia ul li {
    padding: 0 20px 0 0
}

.socialmedia ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 20px
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    color: #06251a
}

.container {
    width: 100%;
    margin: 0px auto
}



/*******************************************************************************************/
/********************************** HEADER SECTION CSS *************************************/
/*******************************************************************************************/
.headerCntr {
  /* A flat bar in the brand colour disappears into a hero of the same family. The
     gradient runs from the darkest step to the 800, which keeps the bar readable as
     its own surface, and the mint hairline draws the edge against the artwork. */
  background: linear-gradient(180deg, var(--uc-primary-900, #06251a) 0%, var(--uc-primary-800, #0a3826) 100%);
  border-bottom: 1px solid rgba(62, 207, 142, .30);
  box-shadow: 0 1px 14px rgba(6, 37, 26, .38);
  padding: 10px 0;
  position: relative;
  z-index: 5;
}

.headerCntr .container {
  /* max-width: 1200px; */
  margin: 0 auto;
  padding: 0 20px;
}

.headerCntr .holder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.headerCntr .logo {
    max-height: 90px;
    height: auto;
    width: auto;
    max-width: 220px;
}

.main-navigation ul.main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(10px, 2vw, 30px);
  flex-wrap: wrap;
  align-items: center;
}

.main-navigation ul.main-menu li {
  position: relative;
}

.main-navigation ul.main-menu li a {
  color: #ffffff;
  text-decoration: none;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(12px, 1.2vw, 16px);
  padding: 10px 5px;
  white-space: nowrap;
}

.main-navigation ul.main-menu li a:hover {
  color: #cadbd1;
}

/* Dropdown item hover - full width highlight */
.main-navigation ul.main-menu li ul li a:hover {
  background-color: var(--uc-primary-050, #e8f9f0);
  color: var(--uc-accent-dark, #157a48) !important;
  border-radius: 7px !important;
}

/* Dropdown */
.main-navigation ul.main-menu li ul {
  /* A light card under a dark header. The panel used to be the brand green with white
     text: 4.95:1 at rest, and 1.34:1 on hover, where a dark-green label landed on a
     lightened green background and all but vanished. Ink on white is 17.9:1. */
  display: none;
  position: absolute;
  background-color: #ffffff;
  border: 1px solid var(--uc-line, #d3e3d9);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(6, 37, 26, .18);
  min-width: 230px;
  padding: 6px;
  top: 100%;
  left: 0;
  z-index: 1000;
  overflow: hidden;
}

.main-navigation ul.main-menu li:hover > ul {
  display: block;
}

.main-navigation ul.main-menu li ul li {
  position: relative;
}

.main-navigation ul.main-menu li ul li a {
  display: block;
  padding: 9px 14px;
  width: 100%;
  box-sizing: border-box;
  color: var(--uc-ink, #0c1a14) !important;
  font-weight: 500;
  border-radius: 7px !important;
  transition: background-color .15s ease, color .15s ease;
}

.main-navigation ul.main-menu li ul li ul {
  top: 0;
  left: 100%;
}

.main-navigation ul.main-menu li ul li:hover > ul {
  display: block;
}

/* Add arrow to parent menu items with children */
.main-navigation ul.main-menu li.menu-item-has-children > a::after {
  content: " ▼"; /* or use \25BC for down arrow, or your icon font */
  font-size: 12px;
  margin-left: 5px;
  vertical-align: middle;
}

/* Remove bullets from all menu levels */
.main-navigation ul,
.main-navigation ul ul,
.main-navigation ul ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.clickHamburgerIcon {
  display: none;
}

.closeMobileMenu {
  display: none;
  position: fixed;
  top: 15px;
  right: 25px;
  background: transparent;
  color: black;
  font-size: 30px;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.closeMobileMenu.active {
  display: block;
}

/* HIDE Members menu + submenus when NOT a member role */
.logged-out .main-navigation li.members-only,
body:not(.members-only) .main-navigation li.members-only {
  display: none !important;
}

/* HIDE Non-member menu items when NOT a non-member role or logged out */
.logged-out .main-navigation li.non-member-role,
body:not(.non-member-role) .main-navigation li.non-member-role {
  display: none !important;
}

/* HIDE Login menu when logged in */
.logged-in .main-navigation li.login-only {
  display: none !important;
}

/* Remove ▼ arrow for Members when hidden */
.logged-out .main-navigation li.members-only > a::after,
body:not(.members-only) .main-navigation li.members-only > a::after {
  content: none !important;
}

/* Remove ▼ arrow for Non-member items when hidden */
.logged-out .main-navigation li.non-member-role > a::after,
body:not(.non-member-role) .main-navigation li.non-member-role > a::after {
  content: none !important;
}

/* Show Members + submenus when user has member role */
.members-only .main-navigation li.members-only {
  display: block !important;
}

/* Show Non-member items when user has non-member role */
.non-member-role .main-navigation li.non-member-role {
  display: block !important;
}

/* Ensure submenus of Members show correctly when hovered */
.members-only .main-navigation li.members-only ul {
  /* Visibility and placement only — the card itself comes from the base
     dropdown rule, so every menu stays identical. The nudge that used to sit here
     was compensating for the pill being an inline-block; with the pill gone the
     link fills its li exactly like About Us, so the base offset is enough. */
  display: none;
  position: absolute;
  top: 100%;
  z-index: 1000;
}

.members-only .main-navigation li.members-only ul li a {
  color: var(--uc-ink, #0c1a14) !important;
  border-radius: 7px !important;
}
.members-only .main-navigation li.members-only ul li a:hover {
  background-color: var(--uc-primary-050, #e8f9f0);
  color: var(--uc-accent-dark, #157a48) !important;
}

.members-only .main-navigation li.members-only:hover > ul {
  display: block;
}

.members-only .main-navigation li.members-only ul li {
  position: relative;
}

.members-only .main-navigation li.members-only ul li ul {
  top: 0;
  left: 100%;
}

.members-only .main-navigation li.members-only ul li:hover > ul {
  display: block;
}

/* Ensure submenus of Non-member items show correctly when hovered */
.non-member-role .main-navigation li.non-member-role ul {
  /* Visibility and placement only — the card itself comes from the base
     dropdown rule, so every menu stays identical. */
  display: none;
  position: absolute;
  top: 100%;
  z-index: 1000;
}

.non-member-role .main-navigation li.non-member-role ul li a {
  color: var(--uc-ink, #0c1a14) !important;
  border-radius: 7px !important;
}
.non-member-role .main-navigation li.non-member-role ul li a:hover {
  background-color: var(--uc-primary-050, #e8f9f0);
  color: var(--uc-accent-dark, #157a48) !important;
}

.non-member-role .main-navigation li.non-member-role:hover > ul {
  display: block;
}

.non-member-role .main-navigation li.non-member-role ul li {
  position: relative;
}

.non-member-role .main-navigation li.non-member-role ul li ul {
  top: 0;
  left: 100%;
}

.non-member-role .main-navigation li.non-member-role ul li:hover > ul {
  display: block;
}

/*************** Responsive ******************/

@media (max-width: 768px) {

    .clickHamburgerIcon {
    display: block;
    cursor: pointer;
    margin-right: -150px;
  }

  .members-only .main-navigation li.members-only ul {
    background: white;
  }

  /* Stack logo + hamburger */
  .headerCntr .holder {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* Hide the main menu by default on mobile */
  .main-navigation ul.main-menu {
    display: none;
    flex-direction: column;
    background-color: white;
    position: fixed; /* make it a sidebar */
    top: 0;
    right: -250px;  /* hide off-screen */
    width: 250px;
    height: 100%;
    padding-top: 60px;  /* space for logo/hamburger */
    transition: right 0.3s ease;
    z-index: 1000;
  }

   /* When active: slide in */
   .main-navigation ul.main-menu.active {
    right: 0;
    display: flex;
   }
   .main-navigation ul.main-menu li {
    position: relative;
    border-bottom: 1px solid #26382d;
    margin: 8px;
  }

  .main-navigation ul.main-menu li ul {
    background-color: white;
  }
   /* Style links inside mobile nav */
    .main-navigation ul.main-menu li a {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #178050;
  }

  /* Remove gap between items on mobile */
  .main-navigation ul.main-menu {
    gap: 0;
  }

  .sidebar-footer {
    display: block;
    margin-top: 40px;
    background: #373f3b;
    color: white;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
  }

  .social-icons a {
    display: block;
    color: white;
    font-size: 18px;
    margin: 0 8px;
    text-decoration: none;
  }

  .cta-join {
    display: block;
    margin-top: 10px;
  }

  .join-btn {
    display: block;
    margin-top: 8px;
    padding: 6px 16px;
    border: none;
    background: #e9f4ee;
    color: #0c1a14;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
  }


}

  .sidebar-footer {
    display: none;
  }

  .social-icons{
    display: none;
  }

  .cta-join {
    display: none;
  }

  .join-btn {
    display: none;
  }


/*****************************************************************************************/
/*************************ABOUT US CSS****************************************************/
/****************************************************************************************/
.btn-signin {
  background: #1e9e5a;
  border: none;
  padding: 0.5rem 1rem;
  font-weight: bold;
  cursor: pointer;
}

.abt-hero {
  position: relative;
  text-align: center;
}

.base-image {
  width: 100%;
  height: auto;
}

.overlay-image {
  position: absolute;
  top: 386px;
  left: 350px;
  width: 788.33px;
  height: auto;
  opacity: 0.8;
}

.hero-text {
  position: absolute !important;
  bottom: 20px !important;
  left: 30px !important;
  color: white !important;
  text-align: left !important;
}

.about {
  padding: 3rem 2rem;
  background: white;
  text-align: center;
}

.about h2 {
  color: #101f18;
  font-size: 2rem;
}

.info {
  display: flex;
  flex-wrap: wrap;
  padding: 2rem;
  gap: 2rem;
  background: white;
}

.values-history {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
}

.values, .history {
  flex: 1;
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
}

.values ul {
  list-style: none;
  padding: 0;
}

.values li {
  margin-bottom: 1rem;
  font-weight: bold;
}

.card {
  background: white;
  padding: 1rem;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  border-color: black;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.card img {
  width: 50px;
  margin-bottom: 0.5rem;
}

.core-values {
  flex: 1;
  min-width: 250px;
}

.core-values h3 {
  text-align: center;
  color: #1b3629;
  size: 36px !important;
}

#abUs {
  margin-left: 140px;
  width: 451px;
  height: 180px;
  top: 1175px;
  left: 85px;
  size: 20px;
  /* line-height: 100%; */
  /* font-weight: 400; */
  text-align: center;
  color: #3f5c4d
}

.value {
  text-align: center;
  margin: 1rem 0;
}

.value img {
  width: 60px;
  height: 60px;
}

.value p {
  font-weight: bold;
}

.history {
  background: #1b3629;
  color: white;
  padding: 2rem;
  border-radius: 10px;
  width: 640px;
  /* height: 885px; */
  top: 1170px;
  left: 595px;
  border-radius: 30px;
}

.history h3 {
    height: 52px;
    color: white;
    font-weight: bold;
    font-size: large;
    margin-left: 218px;
}

.history p {
    font-size: large;
}

.community {
  background: #e4ece8;
  padding: 3rem 2rem;
  text-align: center;
}

.cta {
  padding: 20rem;
  text-align: center;
  background: white;
  background-image: url(/wp-content/themes/unioncrm-theme/images/join.png);
}

.btn {
  display: inline-block;
  background: #1e9e5a;
  color: black;
  padding: 0.7rem 1.5rem;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 1rem;
}
/*****************************************Responsive ******************************************************/
/* Tablet adjustments (≤ 1024px) */
@media (max-width: 1024px) {

  .overlay-image {
    top: 140px;
    left: 150px;
    width: 80%;
  }

  .history {
    width: 100%;
    margin: 0 auto;
  }

  .history h3 {
    width: auto;
    margin-left: 0;
    text-align: center;
  }

  .values-history {
    flex-direction: column;
    align-items: center;
  }

  .cards {
    justify-content: center;
  }

  .cta {
    background-size: cover;
    background-position: center;
  }
}


/* Mobile adjustments (≤ 768px) */
@media (max-width: 768px) {

  .overlay-image {
    top: 75px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
  }

  .hero-text {
    bottom: 10px !important;
    left: 10px !important;
    font-size: 14px;
  }

  .info,
  .values-history {
    flex-direction: column;
    padding: 1rem;
  }

  .values,
  .history,
  .core-values {
    width: 100%;
    padding: 1rem;
  }

  .card {
    width: 90%;
    max-width: 300px;
  }

  .cards {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  #abUs {
    width: 100%;
    height: auto;
    font-size: 16px;
    left: 0;
    top: auto;
  }

  .history {
    padding: 1rem;
  }

  .history h3 {
    font-size: 1.2rem;
    width: 100%;
    margin-left: 0;
  }

  .cta {
    padding: 1rem;
    background-size: cover;
    background-position: center;
  }

  .btn,
  .btn-signin {
    padding: 0.5rem 1rem;
    font-size: 14px;
  }
}

/******************************************************************************************************/
/*****************************************Contact US **************************************************/
/*******************************************************************************************************/
.contact-page {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding: 40px 150px;
  background-color: #ffffff;
}

.section-heading {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #0a3826;
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 50px;
}

.contact-top-boxes .contact-item {
  flex: 1 1 250px;
  max-width: 300px;
  background: #e9f4ee;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
}

.contact-item i {
  font-size: 24px;
  color: #0a3826;
  margin-bottom: 10px;
}

.contact-card {
  background: #ffffff;
  border: 1px solid #d3e3d9;
  padding: 15px;
  text-align: center;
  border-radius: 10px;
  flex: 1 1 220px;
}

.contact-card h4 {
  font-size: 16px;
  margin-bottom: 5px;
}

.contact-card a {
  font-weight: bold;
  color: #0a3826;
}

.exec-heading {
  font-size: 24px;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
  color: #0a3826;
}

.exec-board {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.exec-card {
  background-color: #0a3826;
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.exec-card a {
  color: #157a48;
  font-weight: 500;
}

/* FORM AREA */
.contact-form-area {
  background: #0a3826;
  padding: 60px 155px;
  color: white;
}

.form-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
}

.form-left {
  flex: 1 1 400px;
}

.form-left h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.form-left form input,
.form-left form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 6px;
  border: none;
}

.form-left form button {
  background: #1e9e5a;
  color: #0c1a14;
  padding: 12px 25px;
  border: none;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
}

.form-right {
  flex: 1 1 300px;
  text-align: center;
}

.form-right img {
  max-width: 100%;
  border-radius: 10px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .form-wrapper {
    flex-direction: column;
  }

  .contact-row {
    flex-direction: column;
  }
}

/******************************************************************************************************/
/*****************************************EXECUTIVE ***************************************************/
/*****************************************************************************************************/

.hero {
  background-color: #06251a;
  color: white;
  padding: 80px 20px 40px;
  text-align: center;
  margin-bottom: 50px;
}

.hero h1 {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  max-width: 1100px;
  margin-inline: auto;
  line-height: 1.3;
  word-break: break-word;
  text-wrap: balance;
}

.hero p {
  color: #ffffff;
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  margin-inline: auto;
  /* line-height: 1.3; */
  word-break: break-word;
  text-wrap: balance;
  font-family: Sora;

}

.content-card {
  background: white;
  margin: 0px auto 80px;
  padding: 40px;
  border-radius: 30px;
  max-width: 750px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  color: #06251a;
}

.content-card h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.content-card p {
    font-size: 18px;
    line-height: 32px;
  margin-inline: auto;
  /* line-height: 1.3; */
  word-break: break-word;
  text-wrap: balance;
}

.content-card ol {
  padding-left: 20px;
  margin-top: 10px;
}

.content-card li {
  margin-bottom: 15px;
  line-height: 1.6;
  font-size: 15px;
}

/**************************************************************************************************/
/******************************************* MEMBER LOGIN *****************************************/
/*************************************************************************************************/

.login-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}

.login-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('images/login-bg.png') no-repeat center center;
  background-size: cover;
  filter: blur(3px);
  z-index: -1;
}


.non-member-login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('images/login-bg.png') no-repeat center center;
  background-size: cover;
}

.login-inner {
  display: flex;
  flex: 0 1 500px;
  flex-direction: column;
  align-items: center;
}

.logo-wrapper {
  margin-bottom: -5px;
  z-index: 2;
}

.logo {
  width: 300px;
  height: auto;
}

.login-box {
  background: rgba(255, 255, 255, 0.95);
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.login-box h2 {
  font-weight: 600;
  color: #0a3826;
  margin-bottom: 1rem;
}

.login-box label {
  display: block;
  text-align: left;
  margin: 0.5rem 0 0.2rem;
  font-weight: 500;
  color: #0a3826;
}

.login-box input[type="email"],
.login-box input[type="text"],
.login-box input[type="password"] {
  width: 100%;
  padding: 0.6rem;
  margin-bottom: 1rem;
  border: 1px solid #cadbd1;
  border-radius: 5px;
  background-color: #eef7f2;
  font-size: 1rem;
}

.login-box a {
  display: block;
  font-size: 0.9rem;
  color: #3f5c4d;
  margin-bottom: 1.5rem;
  text-decoration: none;
}

.login-box a:hover {
  text-decoration: underline;
}

.login-box button {
  background-color: #0a3826;
  color: white;
  padding: 0.6rem 2rem;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.login-box button:hover {
  background-color: #0e1b14;
}

/* Hide .members-only child elements by default and show only when body has members-only class */
body:not(.members-only) .members-only {
  display: none !important;
}

body.members-only .members-only {
  display: block !important;
}

/* Hide .non-member-role child elements by default and show only when body has non-member-role class */
body:not(.non-member-role) .non-member-role {
  display: none !important;
}

body.non-member-role .non-member-role {
  display: block !important;
}


/************************************************************************************************/
/********************************************** PRESS RELEASE **********************************/
/***********************************************************************************************/
.press-section {
  padding: 2rem;
  background: #e9f4ee;
}

.section-title {
  font-size: 48px;
  color: #06251a;
  margin-bottom: 4px;
  text-align: center;
}

.press-card {
  background: #ffffff;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.press-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.press-subtitle {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  color: #3f5c4d;
  text-decoration: underline;
}

.press-date {
  font-size: 0.9rem;
  color: #4d6357;
}

.press-description {
  font-size: 1rem;
}

.pagination {
  text-align: center;
  margin-top: 1rem;
}

.pagination a {
  display: inline-block;
  padding: 0.5rem;
  margin: 0 0.25rem;
  background: #06251a;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
}

.pagination .current {
  background: #1e9e5a;
  color: #06251a;
}
/***********************************************************************************************************/
/************************** FAQ ****************************************************************************/
/***********************************************************************************************************/
.navbar {
  background: #0a3826;
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar .logo {
  font-weight: bold;
}
.navbar ul {
  display: flex;
  list-style: none;
  gap: 20px;
}
.navbar a, .signin {
  color: white;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}
.signin {
  background: #19844b;
  padding: 5px 10px;
  border-radius: 4px;
  color: #ffffff;
}

.faq-section {
    margin: 10px 200px;
    padding: 40px 0px;
  background: white;
}
.faq-section h1 {
  text-align: center;
  margin-bottom: 20px;
}
.intro {
  font-style: italic;
  color: #26382d;
  margin-bottom: 30px;
}
.contents h2 {
  margin-bottom: 10px;
}
.contents ul {
  list-style: none;
  padding-left: 20px;
}
.contents li {
  margin-bottom: 8px;
}
.contents a {
  text-decoration: none;
  color: #0a3826;
}

.faq-category {
  margin-top: 40px;
  align-items: center;
}
.faq-category h2 {
  font-size: 1.4rem;
  margin-bottom: 20px;
  text-align: center;
}
details {
  margin-bottom: 10px;
  border: 1px solid #cadbd1;
  padding: 10px;
  /* padding-left: 400px; */
  border-radius: 6px;
  background: #f9f9f9;
  width: 100%;
}
summary {
  cursor: pointer;
  font-weight: bold;
  font-size: large;
}
details[open] summary {
  margin-bottom: 10px;
}

.form-section {
  margin-top: 50px;
  background: #0a3826;
  color: white;
  padding: 30px;
  border-radius: 8px;
}
.form-section h2 {
  margin-bottom: 20px;
}
.form-section form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.form-section input,
.form-section select,
.form-section textarea {
  padding: 10px;
  border-radius: 4px;
  border: none;
}
.form-section button {
  background:#19844b;
  color: #ffffff;
  border: none;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .navbar ul {
    flex-direction: column;
    gap: 10px;
  }
}


.faq-header {
  background-color: #e9eceb; /* Light gray background */
  padding: 60px 20px;
  text-align: center;
}

.faq-header-inner {
  max-width: 800px;
  margin: 0 auto;
}

.faq-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #0c1a14;
  margin-bottom: 20px;
}

.faq-section p {
  font-size: 1rem;
  color: #17281f;
  line-height: 1.6;
}

.faq-contents {
  padding: 40px 20px;
  /* max-width: 800px; */
  margin: 0 auto;
}

.faq-contents h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0c1a14;
  margin-bottom: 20px;
}

.faq-contents ul {
  list-style: none;
  padding-left: 0;
}

.faq-contents li {
  margin-bottom: 12px;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.faq-contents .arrow {
  color: #0c1a14;
  margin-right: 10px;
  font-size: 1.1rem;
}

.faq-contents a {
  text-decoration: none;
  color: #0c1a14;
  transition: color 0.3s;
}

.faq-contents a:hover {
  color: #0c1a14;
}

.faq-contents a:visited {
  color: #0c1a14;
}

.faq-center-wrapper {
  max-width: 800px;
  margin: 0 auto; /* horizontally center */
  padding: 0 20px; /* small side padding for mobile */
}

.faq-center-wrapper details {
  width: 100%; /* take full width of wrapper */
  margin-bottom: 15px;
  border: 1px solid #cadbd1;
  border-radius: 6px;
  padding: 15px;
  background: #f9f9f9;
}

.ask-section {
  background-color: #1c3a2b;
  color: white;
  padding: 60px 20px;
}

.ask-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.ask-left, .ask-right {
  flex: 1;
  min-width: 280px;
}

.ask-left h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.ask-left p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #e9f4ee;
}

.not-member {
  margin-top: 30px;
  margin-bottom: 10px;
  font-style: italic;
}

.join-btn {
  background-color: #19844b;
  color: #ffffff;
  font-weight: bold;
  padding: 10px 30px;
  font-size: 1.1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.ask-right form {
  display: flex;
  flex-direction: column;
}

.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.full-width {
  width: 100%;
}

label {
  font-weight: bold;
  margin-bottom: 8px;
}

input, select, textarea {
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  background-color: white;
  color: #1c3a2b;
}

textarea {
  resize: vertical;
}

.submit-btn {
  background-color: #19844b;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 12px 40px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }

  .ask-left, .ask-right {
    width: 100%;
  }

  .submit-btn {
    width: 100%;
    text-align: center;
  }
}

/******************************************************************************************************/
/****************************************** MEMBER OF THE MONTH ***************************************/
/******************************************************************************************************/
.momBg {
    background-color: #06251a;
    padding: 140px; 
}
.page-wrapper {
  display: flex;
  max-width: 1200px;
  padding: 40px 20px;
  gap: 30px;
}

.sidebar {
  width: 30%;
}

.member-box {
  background: #183125;
  padding: 25px;
  border-radius: 20px;
  margin-bottom: 30px;
}

.member-box h3 {
  font-size: 50px;
  margin-bottom: 15px;
  color: white;
}

.member-box p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 14px;
  color: white;
   margin-inline: auto;
  /* line-height: 1.3; */
  word-break: break-word;
  text-wrap: balance;
}

.nominate-btn {
  background-color: #1e9e5a;
  color: #06251a;
  font-weight: bold;
  padding: 16px 34px; /* Increased padding */
  font-size: 1.2rem;   /* Increased font size */
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.archives {
  background: white;
  color: #06251a;
  border-radius: 20px;
  padding: 20px;
}

.archives h4 {
  margin-top: 0;
}

.archives ul {
  list-style-type: disc;
  padding-left: 20px;
}

/* ── MoM Archives sidebar (new) ── */
.mom-archives {
  background: #183125 !important;
  border-radius: 16px;
  padding: 20px 22px;
  margin-top: 24px;
}

.mom-archives h4 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff !important;
  border-bottom: 2px solid #e9f4ee;
  padding-bottom: 10px;
}

.mom-archives ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mom-archives ul li {
  border-bottom: 1px dotted #d3e3d9;
  color: #ffffff !important;
}

.mom-archives ul li:last-child {
  border-bottom: none;
}

.mom-archives ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  text-decoration: none;
  font-size: 0.92rem;
  color: #ffffff !important;
  transition: color 0.15s;
}

.mom-archives ul li a:hover {
  color: #8f2a2a;
}

.mom-archives ul li a.active {
  font-weight: 700;
  color: #8f2a2a;
}

.mom-archives ul li a .mom-arc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8f2a2a;
  flex-shrink: 0;
  opacity: 0;
}

.mom-archives ul li a.active .mom-arc-dot,
.mom-archives ul li a:hover .mom-arc-dot {
  opacity: 1;
}

.mom-arc-year {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4d6357;
  padding: 12px 4px 4px;
  border-bottom: none !important;
}

.mom-arc-year:first-child {
  padding-top: 0;
}

.content {
  width: 70%;
  background: white;
  color: #06251a;
  border-radius: 20px;
  padding: 30px;
}

.post-card img.member-img {
  width: 100%;
  max-width: 800px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.post-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 30px 0 10px;
}

.date-box {
  background-color: #e9f4ee;
  border: 1px solid #cadbd1;
  text-align: center;
  width: 60px;
  border-radius: 4px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.date-box .day {
  display: block;
  background-color: white;
  color: #06251a;
  font-size: 1.2rem;
  padding: 6px;
  font-weight: bold;
}

.date-box .month {
  display: block;
  background-color: #8f2a2a;
  color: white;
  padding: 4px 0;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.post-title h2 {
  margin: 0;
  font-size: 1.8rem;
  color: #06251a;
}

.date-line {
  margin: 5px 0 0;
  font-size: 0.95rem;
  color: #4d6357;
}

.post-content {
  color: #06251a;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-top: 15px;
  margin-bottom: 20px;
}

@media (max-width:768px) {
  .sidebar {
    width: 100%;
  }

  .content {
    display: none;
  }
  
}

/**********************************************************************************************************/
/****************************************SINGLE POST ******************************************************/
/***********************************************************************************************************/


.single-post-section {
  padding: 3rem 1rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.single-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.single-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: white;
  text-align: left;
}

.single-date {
  font-size: 1rem;
  color: #3f5c4d;
  margin-bottom: 1.5rem;
  text-align: left;
}

.single-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: white;
  text-align: left;
  margin-top: 1rem;
}

.single-categories {
  font-size: 0.9rem;
  color: #4d6357;
  margin-top: 2rem;
  text-align: left;
}

@media (max-width: 768px) {
  .single-post-section {
    padding: 2rem 1rem;
  }

  .single-title {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1.8rem;
  }
  .cell-hide{
    display: none;
  }

  .momBg {
    padding: 0px; 
}
}

@media (max-width: 1024px) {
  .cell-hide{
    display: none;
  }
}


.wpcf7-response-output {
  margin-top: 15px;
  padding: 10px;
  border: 1px solid #4caf7e;
  background: #ecf9f2;
  color: #2d664a;
  font-weight: 500;
}

.wpcf7-not-valid-tip {
  color: #c63c3c;
}


/****************************************TEAM ******************************/

.main-team {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #0e1d16;
  color: white;
}

.containerr {
  margin: 0px auto;
  padding: 40px;
  margin-top: 50px;
  margin-bottom: 60px;
  text-align: center;
  border-radius: 30px;
  background-color: #162e22; /* Inside container background */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 3rem;
  margin-top: 100px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  justify-items: center;
  margin-bottom: 50px;
}

.team-card {
  background-color: #1b382a;
  border-radius: 2rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 380px;
  height: 400px;
  /* max-height: 400px; */
  background-color: #0e1d16;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  
}

.team-card img {
  width: 200px;
  height: 220px;
  /* border: 5px solid #71b995; */
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

.team-card h2 {
  font-size: 1.2rem;
  margin: 0.5rem 0 0.2rem;
}

.team-card p {
  font-size: 0.95rem;
  color: #41705a;
}

/*************RESPONSIVE *************************************
/* Base styles are kept as-is from your original code */


a {
  color: #3f5c4d; /* default link color */
  text-decoration: underline;
}

a:visited {
  color: #3f5c4d; /* color for visited (clicked) links */
}

a:hover {
  color: #178050; /* color when mouse hovers */
}

a:active {
  color: #3f5c4d; /* color when actively clicking */
}



/* Extra small devices (phones) */
@media (max-width: 575.98px) { 
  .containerr {
    width: 100%;
    padding: 20px 10px;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .title {
    font-size: 2rem;
    margin-top: 40px;
    margin-bottom: 1.5rem;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .team-card img {
    width: 140px;
    height: 160px;
  }

  .team-card h2 {
    font-size: 1rem;
  }

  .team-card p {
    font-size: 0.85rem;
  }

  .serviceBox .holder {
    padding: 25px 50px;
  }

  .standBox h2 {
    padding: 0px 50px;
  }

  .standBox p {
    padding: 20px 70px;
  }

  .standBox .holder {
    padding: 50px;
  }

  .newsBox {
    padding: 0px;
  }

  .newsBox .title .viewall {
    font-size: 25px;
  }

  .questionsBox .holder  {
    padding: 50px;
  }

  .footerCntr {
    padding: 90px 70px;
  }

  .clickHamburgerIcon {
    display: block;
    cursor: pointer;
    margin-right: -20px;
  }

  /* Stack logo + hamburger */
  .headerCntr .holder {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* Hide the main menu by default on mobile */
  .main-navigation ul.main-menu {
    display: none;
    flex-direction: column;
    background-color: white;
    position: fixed; /* make it a sidebar */
    top: 0;
    right: -250px;  /* hide off-screen */
    width: 250px;
    height: 100%;
    padding-top: 60px;  /* space for logo/hamburger */
    transition: right 0.3s ease;
    z-index: 1000;
  }

   /* When active: slide in */
   .main-navigation ul.main-menu.active {
    right: 0;
    display: flex;
   }
   .main-navigation ul.main-menu li {
    position: relative;
    border-bottom: 1px solid #26382d;
    margin: 8px;
  }

  .main-navigation ul.main-menu li ul {
    background-color: white;
  }
   /* Style links inside mobile nav */
    .main-navigation ul.main-menu li a {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #178050;
  }

  /* Remove gap between items on mobile */
  .main-navigation ul.main-menu {
    gap: 0;
  }

  .contact-top-boxes .contact-item {
    flex: 1 1 ;
  }

  .contact-card {
    flex: 1 1;
  }

}


/* Small devices (phones landscape) */
@media (min-width: 576px) and (max-width: 767.98px) {
.containerr {
    width: 70%;
    padding: 25px 15px;
    margin-top: 30px;
    margin-bottom: 40px;
  }

  .title {
    font-size: 2.5rem;
    margin-top: 60px;
  }

  .team-grid {
    gap: 1.5rem;
  }

  .team-card img {
    width: 160px;
    height: 180px;
  }

  .team-card h2 {
    font-size: 1.1rem;
  }

  .team-card p {
    font-size: 0.9rem;
  }

  .clickHamburgerIcon {
    display: block;
    cursor: pointer;
    margin-right: -100px;
  }

  /* Stack logo + hamburger */
  .headerCntr .holder {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* Hide the main menu by default on mobile */
  .main-navigation ul.main-menu {
    display: none;
    flex-direction: column;
    background-color: white;
    position: fixed; /* make it a sidebar */
    top: 0;
    right: -250px;  /* hide off-screen */
    width: 250px;
    height: 100%;
    padding-top: 60px;  /* space for logo/hamburger */
    transition: right 0.3s ease;
    z-index: 1000;
  }

   /* When active: slide in */
   .main-navigation ul.main-menu.active {
    right: 0;
    display: flex;
   }
   .main-navigation ul.main-menu li {
    position: relative;
    border-bottom: 1px solid #26382d;
    margin: 8px;
  }

  .main-navigation ul.main-menu li ul {
    background-color: white;
  }
   /* Style links inside mobile nav */
    .main-navigation ul.main-menu li a {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #178050;
  }

  /* Remove gap between items on mobile */
  .main-navigation ul.main-menu {
    gap: 0;
  }

  .contact-top-boxes .contact-item {
    flex: 1 1 150px;
  }

  .contact-card {
    flex: 1 1 110px;
  }

  
  .member-box h3 {
    font-size: 20px;
  }
  
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) { 

    .newsBox .block {
        margin-right: 20px;
        width: calc(33.3% - 20px)
    }

    .newsBox .holder {
        margin-right: -20px
    }

    .newsBox .title .subtitle {
        font-size: 18px
    }

    .newsBox .title {
        padding: 50px
    }

    .newsBox .title h2 {
        font-size: 24px
    }

    .newsBox .title {
        padding: 35px
    }

    .bannerContent {
        max-width: 58%
    }

    .serviceBox h2 {
        font-size: 24px;
        padding: 20px 0
    }

    .questionsBox .left .subtitle {
        font-size: 24px
    }

    .questionsBox .left h2 {
        font-size: 24px
    }

    .questionsBox .holder {
        padding: 0 50px
    }

    .newsBox .block h3 {
        font-size: 20px
    }

    .newsBox .block .inner p {
        font-size: 14px
    }

    .newsBox .block .inner .date {
        font-size: 12px
    }

    .newsBox .block .inner .detail {
        padding: 20px
    }

    .serviceBox .holder {
        padding: 25px;
    }

    .serviceBox .holder .block {
        width: calc(50% - 50px);
        margin-right: 50px;
        padding-left: 75px;
    }

    .serviceBox .holder .block h3 {
        font-size: 20px;
        padding-bottom: 5px;
    }

    .serviceBox .holder .block p {
        font-size: 15px;
    }

    .serviceBox .holder .block .icon {
        width: 60px;
    }

    /* standBox styles */
    .standBox h2 {
        font-size: 24px;
    }

    .standBox p {
        padding: 0;
        font-size: 14px;
    }

    .standBox .holder {
        margin-right: -25px;
    }

    .standBox .holder .block {
        width: calc(33.3% - 25px);
        margin-right: 25px;
    }

    .standBox .holder .block h3 {
        font-size: 16px;
    }

    .standBox .holder .block .icons {
        width: 50px;
        height: 50px;
        font-size: 43px;
        line-height: 46px;
    }

    .standBox .holder .block .icons.star {
        font-size: 26px;
        line-height: 41px;
    }

    /* footer styles */
    .footerCntr {
        padding: 40px;
    }

    .footerCntr .footerBox .left,
    .footerCntr .footerBox .right {
        width: 100%;
    }

    .footerCntr .footerBox .right {
        padding: 0;
    }

    /* container */
    .container {
        width: 100%;
        padding: 0 30px;
    }

  .clickHamburgerIcon {
    display: block;
    cursor: pointer;
    margin-right: -425px;
  }

  /* Stack logo + hamburger */
  .headerCntr .holder {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* Hide the main menu by default on mobile */
  .main-navigation ul.main-menu {
    display: none;
    flex-direction: column;
    background-color: white;
    position: fixed; /* make it a sidebar */
    top: 0;
    right: -250px;  /* hide off-screen */
    width: 250px;
    height: 100%;
    padding-top: 60px;  /* space for logo/hamburger */
    transition: right 0.3s ease;
    z-index: 1000;
  }

   /* When active: slide in */
   .main-navigation ul.main-menu.active {
    right: 0;
    display: flex;
   }
   .main-navigation ul.main-menu li {
    position: relative;
    border-bottom: 1px solid #26382d;
    margin: 8px;
  }

  .main-navigation ul.main-menu li ul {
    background-color: white;
  }
   /* Style links inside mobile nav */
    .main-navigation ul.main-menu li a {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #178050;
  }

  /* Remove gap between items on mobile */
  .main-navigation ul.main-menu {
    gap: 0;
  }

  .newsBox {
        padding: 0px 100px 100px 100px;
  }

  .containerr {
    width: 60%;
    padding: 25px 32px;
    margin-top: 30px;
    margin-bottom: 40px;
  }

  .member-box h3 {
    font-size: 30px;
  }

  .momBg{
    padding: 140px 100px;
  }

}

@media (min-width: 992px) and (max-width: 1199.98px) { 
   .containerr {
    width: 100%;
    padding: 30px 20px;
    margin-top: 40px;
    margin-bottom: 50px;
  }

  .title {
    font-size: 3rem;
    margin-top: 80px;
    margin-bottom: 2rem;
  }

  .team-card {
    width: 80%;
    height: auto;
    padding: 1.2rem;
  }

  .team-card img {
    width: 180px;
    height: 200px;
  }

  .serviceBox .holder {
    padding: 25px 150px;
  }

  .questionsBox .holder {
    padding: 0px 150px;
  }

  .member-box h3 {
    font-size: 40px;
  }
}

.footer-img {
      width: 280px;
}

.community-description {
  padding: 20px 120px;
}

.press-list a {
  text-decoration: none;
  color: inherit;
}

.press-date,
.press-description {
  text-decoration: none;
}

.press-list a:hover {
  text-decoration: none;
}

/* Highlight the active top-level or sub-menu item */
.main-menu .current-menu-item > a,
.main-menu .current_page_item > a {
  color: #157a48 !important;    /* Change to your desired active text color */
  font-weight: bold;        /* Optional */
}

/* Highlight parent menu if a child is active (useful for dropdowns) */
.main-menu .current-menu-ancestor > a,
.main-menu .current_page_ancestor > a {
  color: #157a48;
  font-weight: bold;
}

/******************************************************************************************************/
.section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}
.dark-section {
  background-color: #183225;
  color: #ffffff;
  padding: 40px 20px;
  border-radius: 8px;
}
.dark-section ul li , .dark-section p , .greenheading{
color: #157a48;
font-size: 1.1rem;


line-height: 1.6;

}
.core-values .card, .stand-for .card, .practice .card {
  border: none;
  background: #f4faf7;
  padding: 20px;
  text-align: center;
  border-radius: 12px;
  transition: all 0.3s ease;
  height: 100%;
}
.core-values .card:hover, .stand-for .card:hover, .practice .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.core-values i, .stand-for i, .practice i {
  font-size: 2rem;
  color: #183225;
  margin-bottom: 15px;
}
.grey-section {
  background: #e9f4ee;
  padding: 40px 20px;
  border-radius: 8px;
}

.custom-card {
  background: #ffffff;
  border: 1px solid #d3e3d9;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}
.custom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.icon-circle {
  width: 100px;
  height: 100px;
  background: #ebf5f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px auto;
}
.icon-circle i {
  font-size: 38px;
  color: #183225;
}
.custom-card h5 {
  font-weight: 600;
  margin-bottom: 8px;
  color: #183225;
}
.custom-card p {
  font-size: 0.9rem;
  color: #26382d;
  margin: 0;
}

/* Timeline wrapper */
.timeline{
  position:relative;
}
/* vertical line */
.timeline::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:4px;
  background:var(--line);
}

/* Item */
.tl-item{
  position:relative;
  margin:3rem 0;
}

/* Numbered node */
.tl-node{
  position:absolute;
  left:50%;
  top:2rem;
  transform:translate(-50%, -50%);
  width:44px; height:44px;
  border-radius:50%;
  background:#ffffff;
  border:4px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--accent); z-index:2;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Card look */
.tl-card{
  background:#ffffff;
  border:0;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  border-radius:14px;
  overflow:hidden;
}
.tl-img{
  aspect-ratio: 1 / 1;                /* perfect circle crop */
  width:420px; max-width:100%;
  border-radius:50%;
  object-fit:cover;
  border:8px solid #ffffff;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.tl-heading{
  text-transform:none;
  font-weight:700;
  margin-bottom:.25rem;
}
.tl-sub{
  color:var(--accent-2);
  font-weight:600;
  margin-bottom:.4rem;
}
.tl-year{
  font-weight:700;
  color:var(--accent);
}

/* layout: left/right on lg+, stacked on md- */
@media (min-width: 992px){
  .tl-col-left{ padding-right:3rem; }
  .tl-col-right{ padding-left:3rem;  }
  .tl-item:nth-child(odd) .tl-col-left{ order:2; }
  .tl-item:nth-child(odd) .tl-col-right{ order:1; }
  .tl-item:nth-child(odd) .tl-col-left{ text-align:left; }
}

@media (max-width: 991.98px){
  .timeline::before{ left:24px; transform:none; }  /* line moves left on mobile */
  .tl-node{ left:24px; transform:translate(-50%,-50%); }
  .tl-col-left, .tl-col-right{ padding-left:3.5rem; }
}

/* Header Section */
.header-section {
	position: relative;
	height: 250px;
	background: url('img/14.jpg') center center/cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}

.header-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(10, 56, 38, 0.55);
	/* navy-blue overlay */
}

.header-content {
	position: relative;
	z-index: 2;
}

.header-content h1 {
	font-size: 48px;
	 font-family: "Sora", "Inter", system-ui, sans-serif;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 2px;
    font-weight: 900;
}

.header-content p {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-weight: normal;
	font-size: 30px;
	margin-top: 10px;
	color: #ffffff; 
}

/* Top Section */
.top-section {
	background-color: #178050;
	color: #ffffff;
	padding: 50px 0px 100px 0px;
}

.top-box {
	background: white;
	border-radius: 40px;
	position: relative;
	transition: all 0.3s ease;
	cursor: pointer;
	border: 5px solid white;
    
}

.top-box img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 40px;
}

.top-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.top-box .overlay-text1 {
	position: absolute;
	bottom: -10px;
	left: -15px;
	background: #1e9e5a;
	color: #0c1a14;
	font-weight: bold;
	padding: 15px 25px;
	border-radius: 20px;
	font-size: 16px;
	width: 110%;
  text-align: center;
}

.overlay-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
}


.core-values-wrapper {
	margin-top: -130px;
	padding: 50px 0px 20px 0px;
}

/* Core Values Text Box */
.core-header {
	background-color: #ffffff;
	border-radius: 30px 30px 0px 0px;
	padding: 30px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	margin-top: 20px;
}

.core-header h1 {
	font-size: 3rem;
  font-family: "Sora", "Inter", system-ui, sans-serif;
    font-weight: 600;
	margin: 0;
}

.core-content {
	background-color: #ffffff;
	border-radius: 0px 0px 30px 30px;
	padding: 30px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 15px;
}

.core-content h5 {
	font-weight: 700;
	margin-top: 20px;
}

.core-content ul li {
	margin-bottom: 8px;
	font-weight: 500;
}

.core-content ul li strong {
	color: #0c1a14;
}

/* Bold the inline lead-in labels (Collective Power, Advocacy, Representation, Change-Making, …).
   The container is font-weight:300, so a plain <strong> only computes to ~400 (not visibly bold);
   force a real bold here. */
.core-content p strong {
	font-weight: 700;
}

@media (max-width: 768px) {
	.top-box img {
		height: 150px;
	}

	.core-values {
		padding: 40px 20px;
	}
}

.stand-for-section {
	background-color: #ffffff;
	border-radius: 20px;
	padding: 0px 50px;
	margin: 0px auto;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 15px;
}

.stand-header {
	background-color: #7ee1b0;
	/* light lime-green shade */
	display: inline-block;
	padding: 8px 25px;
	border-radius: 30px;
	font-weight: 800;
	font-size: 1.2rem;
	margin-bottom: 25px;
	color: #1f3f2f;
	display: block;
  width:40%;
}

.stand-for-content ul {
	list-style-type: disc;
	padding-left: 20px;
}

.stand-for-content li {
	margin-bottom: 10px;
	line-height: 1.6;
	color: #181c1a;
}

.stand-for-content li strong {
	color: #0c1a14;
}

.stand-for-images img {
	width: 100%;
	border-radius: 15px;
	margin-bottom: 15px;
}

@media (max-width: 768px) {
	.stand-for-section {
		padding: 25px;
	}
}

.values-section {
	background-color: #27503c;
	color: white;
	padding: 60px 150px;
	text-align: left;
}

.values-section h2 {
	font-family: "Sora", "Inter", system-ui, sans-serif;
	font-size: 36px;
	font-weight: normal;
	margin-bottom: 50px;
}

.values-section p {
	color: #ffffff;
	font-size: 15px;
	line-height: 1.6;
	margin: 0 auto 25px auto;
}

.values-section b {
	color: #ffffff;
}

.union-section {
	background-color: #ffffff;
	padding: 60px 80px;
	border-radius: 12px;
	max-width: 900px;
	margin: 40px auto;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.union-section h2 {
	font-size: 48px;
	font-weight: 900;
	color: #0c1a14;
	margin-bottom: 30px;
	text-align: left;
}

.union-section p {
	font-size: 16px;
	color: #0c1a14;
	line-height: 1.7;
	margin-bottom: 20px;
}

.union-section b {
	font-weight: 700;
}

.union-section .highlight-text {
	font-family: 'Georgia', serif;
	font-size: 22px;
	color: #4d6357;
	text-align: center;
	margin-top: 50px;
	font-style: italic;
}

.support-section {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	padding: 80px 40px;
	background-color: #2e5c45;
}

.support-card {
	background-color: #ffffff;
	border-radius: 15px;
	padding: 40px;
	width: 420px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.support-card h3 {
	background-color: #7ee1b0;
	display: inline-block;
	padding: 10px 25px;
	border-radius: 50px;
	font-size: 20px;
	color: #191d1b;
	font-weight: 700;
	margin-bottom: 25px;
}

.support-card p,
.support-card ul {
	font-size: 15px;
	color: #0c1a14;
	line-height: 1.6;
}

.support-card ul {
	padding-left: 20px;
	margin: 15px 0;
}

.support-card ul li {
	margin-bottom: 8px;
}

.get-involved {
	position: relative;
}

.get-involved::after {
	content: "Get Involved!";
	position: absolute;
	right: 20px;
	top: 18px;
	font-family: "Sora", "Inter", system-ui, sans-serif;
	font-size: 32px;
	color: #2e5c45;
}

.blueback {
	padding: 50px 0px;
	background: #178050
}


.steps-section {
	background: #274e3b;
	color: white;
	padding: 60px 20px;
	text-align: center;
}

.steps-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 15px;
}

.step-box {
	flex: 1 1 220px;
	background: white;
	color: #ffffff;
	padding: 30px 20px;
	clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
	min-width: 240px;
	transition: transform 0.3s;
}

.step-box:hover {
	transform: translateY(-5px);
}

.step1 {
	background: #33694e;
}

.step2 {
	background: #3f5c4d;
}

.step3 {
	background: #178050;
}

.step4 {
	background: #14603a;
}

.icon {
	font-size: 40px;
	margin-bottom: 10px;
}

h3 {
	font-weight: 700;
	margin-bottom: 10px;
}

p {
	font-size: 15px;
	line-height: 1.6;

}

/* Timeline */
.timeline {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: white;
	height: 4px;
	margin: 40px auto 10px;
	width: 85%;
	position: relative;
	border-radius: 2px;
}

.dot {
	width: 20px;
	height: 20px;
	background: #3f5c4d;
	border-radius: 50%;
	position: relative;
	top: -8px;
}

/* Step labels */
.steps-labels {
	display: flex;
	justify-content: space-around;
	color: #3f5c4d;
	font-weight: 700;
	font-size: 22px;
	margin-top: 10px;
}

.steps-labels p:nth-child(3) {
	color: #178050;
}

.steps-labels p:nth-child(4) {
	color: #14603a;
}

/* Responsive */
@media (max-width: 900px) {
	.steps-container {
		flex-direction: column;
		align-items: center;
	}

	.timeline,
	.steps-labels {
		flex-direction: column;
		align-items: center;
	}

	.dot {
		margin: 10px 0;
	}

}

.connect-btn {
	background-color: #178050;
	/* dark navy */
	color: #ffffff;
	font-weight: 700;
	font-size: 20px;
	border: none;
	border-radius: 50px;
	padding: 12px 25px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
   font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
}

.arrow-circle {
	background-color: #70dda7;
	/* lime green */
	color: #115d3a;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	transition: transform 0.3s ease;
}

.connect-btn:hover {
	background-color: #244a37;
}

.connect-btn:hover .arrow-circle {
	transform: translateX(4px) rotate(20deg);
}

.faq-section {
	width: 60%;
	margin: 50px auto;
	font-family: 'Arial', sans-serif;
}

@media (max-width: 768px) {
	.faq-section {
		width: 100%;
		margin: 50px auto;
		font-family: 'Arial', sans-serif;
	}
}

.faq-section h2 {
	color: #a22f2f;
	font-size: 40px;
	text-align: right;
	margin-bottom: 35px;
  font-family: "Sora", "Inter", system-ui, sans-serif;
  font-weight: 900;
  
}

.faq-section h2 span {
	font-size: 18px;
	margin-left: 8px;
}

.faq-item {
	background: #f9fcfb;
	border-radius: 10px;
	margin-bottom: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	overflow: hidden;
   font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
}

.faq-question {
	width: 100%;
	background: none;
	border: none;
	outline: none;
	text-align: left;
	padding: 15px 20px;
	font-size: 20px;
	color: #178050;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.faq-question:hover {
	background-color: #f0f7f3;
}

.plus {
	font-size: 22px;
	color: #5f6f66;
	transition: transform 0.3s;
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
	background-color: white;
	padding: 0 20px;
}

.faq-answer p {
	margin: 15px 0;
	font-size: 14px;
	color: #3f4944;
	line-height: 1.6;
   font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
}

.faq-item.active .faq-answer {
	max-height: 350px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 20px;
}

.faq-item.active .plus {
	transform: rotate(45deg);
	color: #a22f2f;
}

body {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	margin: 0;
	background-color: #e9f4ee;
	color: #17281f;
}


.contact-section {
	padding: 60px 5%;
}

.contact-container {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	align-items: flex-start;
	justify-content: space-between;
}

.contact-info {
	flex: 1 1 45%;
}

.contact-info h2 {
	font-size: 32px;
	font-weight: 800;
	color: #178050;
	margin-bottom: 15px;
}

.contact-info p {
	font-size: 15px;
	color: #17281f;
	line-height: 1.6;
	margin-bottom: 25px;
}

.contact-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.arrow {
	color: #178050;
	font-size: 20px;
	margin-top: 2px;
}

.contact-item a {
	color: #178050;
	font-weight: bold;
	text-decoration: none;
}

.contact-item a:hover {
	text-decoration: underline;
}

.contact-item p {
	margin: 0;
	font-size: 14px;
	color: #3f4944;
}

.contact-form {
	background-color: #178050;
	color: white;
	border-radius: 25px;
	padding: 40px;
	flex: 1 1 40%;
}

.contact-form h3 {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 25px;
}

.contact-form label {
	display: block;
	font-size: 13px;
	margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	border: none;
	border-radius: 20px;
	padding: 12px 15px;
	margin-bottom: 20px;
	font-size: 14px;
}

.contact-form textarea {
	resize: none;
}

.contact-form button {
	background-color: #70dda7;
	color: #115d3a;
	border: none;
	padding: 10px 25px;
	border-radius: 25px;
	font-weight: 600;
	cursor: pointer;
	transition: 0.3s ease;
}

.contact-form button:hover {
	background-color: #55d796;
}

/* Responsive */
@media (max-width: 900px) {
	.contact-container {
		flex-direction: column;
	}

	.contact-form {
		width: 100%;
	}
}

.contact-info {
	display: flex;
	justify-content: center;
	gap: 60px;
	padding: 10px 0px 40px 0px !important ;
	border-radius: 8px;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.info-box {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	color: #244a37;
}

.icon {
	background-color: #31634a;
	color: white;
	padding: 12px;
	border-radius: 8px;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

.info-text h4 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
}

.info-text p {
	margin: 0;
	font-size: 14px;
	color: #26382d;
	line-height: 1.4;
}


.latest-news {
	background-color: #e9f4ee;
	text-align: left;
	padding: 60px 0;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.latest-news h2 {
	color: #178050;
	font-size: 24px;
	font-weight: 700;
	margin-left: 80px;
	margin-bottom: 30px;
}

.news-container {
	display: flex;
	justify-content: center;
	gap: 160px !important;
	flex-wrap: wrap;
}

.news-card {
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.news-card:hover {
	transform: translateY(-8px);
}

/* Whole news/press card is clickable (wraps the same permalink as "Read more"). Keep it looking
   like a card, not a text link, and add a subtle affordance on hover/focus. */
a.news-card--clickable,
a.news-card--clickable:hover,
a.news-card--clickable:focus {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
a.news-card--clickable:hover {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
a.news-card--clickable:focus-visible {
	outline: 3px solid #29523e;
	outline-offset: 3px;
}

.news-card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	padding: 14px !important;
	margin: 0 !important;
	border-radius: 22px !important;
	display: block;
}

.news-content {
	padding: 20px;
}

.news-content h3 {
	font-size: 18px;
	font-weight: 600;
	color: #0c1a14;
	margin-bottom: 5px;
}

.news-content p {
	font-size: 14px;
	color: #26382d;
	margin-bottom: 15px;
}

.news-content a {
	text-decoration: none;
	color: #178050;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.news-content a i {
	font-size: 14px;
	transition: transform 0.3s;
}

.news-content a:hover i {
	transform: translateX(4px);
}

/* --- Directory page css Important Section --- */
/* --- Important Section --- */
.important-section {
	margin-top: 30px;
	position: relative;
}

.important-title {
	font-weight: 800;
	font-size: 1.4rem;
	color: #0c1a14;
	margin-bottom: 15px;
}

/* Full width blue strip (pati) */
.purple-bar {
	background: #146741;
	height: 60px;
	border-radius: 0;
	position: relative;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* Carousel content on top of bar */
.important-carousel {
	position: relative;
	width: 100%;
}

.important-carousel .carousel-inner {
	z-index: 2;
	position: relative;
	padding: 0 60px;
	overflow: hidden;
	min-height: 400px;
}

/* CRITICAL FIX: Only show active carousel item */
.important-carousel .carousel-item {
	display: none !important;
}

.important-carousel .carousel-item.active {
	display: block !important;
}

/* White boxes centered over blue bar */
.important-box {
	position: relative;
	background: #ffffff;
	border-radius: 12px;
	text-align: center;
	padding: 40px 15px 20px;
	/* space for icon overlap */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	overflow: visible;
	margin-top: 25px;
	/* centers box vertically on blue bar */
}

/* Circle half inside, half outside, aligned with blue bar */
.important-box .icon {
	background: #146741;
	color: #7de9b3;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	/* half in, half out */
	z-index: 2;
}

/* Label styling */
.important-box .label {
	color: #8e2929;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.5px;
}

.important-box:hover {
	transform: translateY(-3px);
}

/* Yellow icon circle centered over box */
.important-box {
	position: relative;
	background: #ffffff;
	border-radius: 10px;
	text-align: center;
	padding: 55px 15px 20px;
	/* top padding for icon overlap */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	overflow: visible;
	/* important: allows icon to stick out */
}

.important-box .icon {
	background: #146741;
	/* blue background */
	color: #7de9b3;
	/* yellow text */
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	font-weight: bold;
	position: absolute;
	top: 10;
	left: 50%;
	transform: translate(-50%, -50%);
	/* half inside, half outside */
	z-index: 2;
}


.important-box .label {
	color: #8e2929;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.5px;
	margin-top: 15px;
}

/* Arrows inside blue bar */
.carousel-control-prev,
.carousel-control-next {
	width: 50px;
	height: 50px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 1 !important;
	z-index: 999 !important;
	background: none;
	border: none;
}

.carousel-control-prev i,
.carousel-control-next i {
	color: #178050;
	font-size: 58px;
}

.carousel-control-prev:hover i,
.carousel-control-next:hover i {
	color: #157a48;
}

.carousel-item {
	padding-top: 20px;
}

/* --- MODIFIED: IMPORTANT CAROUSEL ARROW STYLES (Vertical Centering) --- */
.important-carousel .carousel-control-prev,
.important-carousel .carousel-control-next {
	/* Take full height of the parent (.purple-bar) for perfect vertical centering */
	height: 100%;
	width: 45px;
	top: 45;
	opacity: 0.9;
	background: transparent;
	/* Clear background by default */
	transition: background 0.3s, opacity 0.3s;
	border-radius: 0;
	margin: 0;
}

.important-carousel .carousel-control-prev:hover,
.important-carousel .carousel-control-next:hover {
	background: rgba(0, 0, 0, 0.15);
	/* Subtle dark background on hover */
	opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	filter: invert(1) brightness(200%);
	width: 2rem;
	height: 2rem;
	background-size: 100% 100%;
}

/* ---------------------------------------------------------------------- */

/* --- All Files Section (General) --- */
.section-title {
	font-weight: 800;
	font-size: 2rem;
	color: #0c1a14;
	margin: 25px 0 10px;
}

.files-section {
	background: #ffffff;
	border-radius: 15px;
	padding: 25px;
	position: relative;
	overflow: hidden;
}

.files-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

/* Left side (Minutes + dropdown) */
.header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	/* space between heading and dropdown */
}

/* Heading style */
.files-header h4 {
	font-weight: 700;
	font-size: 1.4rem;
	margin: 0;
	text-decoration: underline;
	color: #0c1a14;
}

/* Dropdown wrapper */
.dropdown-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* Dropdown select */
.type-dropdown {
	background: #f1f5f3;
	border: none;
	border-radius: 20px;
	padding: 6px 35px 6px 14px;
	/* space for text + arrow */
	font-size: 0.9rem;
	color: #4d6357;
	outline: none;
	cursor: pointer;
	appearance: none;
}

/* Custom arrow icon */
.dropdown-arrow {
	position: absolute;
	right: 12px;
	font-size: 0.8rem;
	color: #4d6357;
	pointer-events: none;
}

/* Optional: hover/focus styling */
.type-dropdown:hover {
	background: #e5ede9;
}


.arrow-btn {
	background: transparent;
	border: none;
	color: #4d6357;
	font-size: 1.4rem;
	cursor: pointer;
	transition: color 0.3s;
}

.arrow-btn:hover {
	color: #146741;
}

/* Swiper Navigation Customization to match Bootstrap control style */
.swiper-button-prev,
.swiper-button-next {
	position: static;
	margin: 0;
	width: 35px;
	height: 35px;
	font-size: 1.4rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #4d6357;
	transition: color 0.3s;
}

.swiper-button-prev::after,
.swiper-button-next::after {
	content: "";
	/* Remove default Swiper arrows */
}

/* File Card Styling - UPDATED: Left aligned text */
.file-card {
	text-align: left;
	padding: 10px 10px;
}

.file-card .img-placeholder {
	background:
		linear-gradient(rgba(20, 103, 65, 0.6), rgba(20, 103, 65, 0.6)),
		url('./img/1.png') center center/cover no-repeat;
	height: 60px;
	border-radius: 3px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #3f5c4d;
	font-size: 1.8rem;
}


.file-card h6 {
	font-weight: 700;
	color: #0c1a14;
	font-size: 1rem;
	margin-bottom: 5px;
	line-height: 1.2;
}

.file-card p {
	font-size: 0.85rem;
	color: #4d6357;
	margin: 0;
}

/* UPDATED: More button aligned to right */
.more-btn-container {
	display: flex;
	justify-content: flex-end;
	margin-top: 15px;
}

.more-btn {
	background: #1e9e5a;
	border: none;
	color: #0c1a14;
	font-weight: 600;
	border-radius: 25px;
	padding: 5px 25px;
}

@media (max-width: 767px) {
	.header-right {
		gap: 6px;
	}

	.arrow-btn {
		font-size: 1.2rem;
	}
}


.search-area {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 40px 0;
	background: transparent;
}

.search-box {
	background: #ffffff;
	border-radius: 15px;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	margin-right: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-box i {
	color: #1d3a2c;
	font-size: 16px;
	margin-right: 10px;
}

.search-box input {
	border: none;
	outline: none;
	font-size: 16px;
	color: #17281f;
	flex: 1;
}

.dropdown-box {
	background: white;
	border-radius: 15px;
	padding: 8px 20px;
	margin-right: 10px;
	display: flex;

	flex-direction: column;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dropdown-box label {
	font-size: 13px;
	font-weight: 600;
	color: #178050;
	margin-bottom: 2px;
}

.dropdown-box select {
	border: none;
	background: none;
	font-size: 14px;
	font-weight: 700;
	color: #822626;
	outline: none;
	cursor: pointer;
	appearance: none;
}

.dropdown-box select::-ms-expand {
	display: none;
}

.directory {
	background: white
}

.directory-table {
	width: 100%;
	border: none;
}

.directory-table th {
	background-color: #178050;
	color: #ffffff;
	padding: 20px;
	text-align: center;
	font-size: 15px;
	border: 2px solid white
}

.directory-table td {
	padding: 10px;
	background-color: #ffffff;
	border: 1px solid #cadbd1;
	margin: 10px;
	font-size: 14px;
	text-align: center;

}

.red-title {
	color: #822626
}

.representatives h3 {
	color: #178050;
	font-weight: 700;
	margin-bottom: 15px;
}

.see-more {
	text-align: center;
	margin: 30px 0;
}

.see-more button {
	background: #81e1b1;
	border: none;
	border-radius: 50px;
	padding: 10px 25px;
	font-size: 15px;
	color: #12623d;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s;
}

.see-more button:hover {
	background: #69dca3;
}

.see-more i {
	margin-left: 6px;
}

/* ---------- Header ---------- */
.calendar-header {
	width: 100%;
	min-height: 250px;
	background-image: url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1920&q=80');
	background-size: cover;
	background-position: center;
	position: relative;
	color: #ffffff;
	text-align: center;
	padding: 50px 20px;
}

.calendar-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 103, 65, 0.7);
}

.calendar-header-content {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	text-align: left;
}

.calendar-header h2 {
	font-weight: 800;
	font-size: 2.2rem;
	margin-bottom: 10px;
	text-align: left;
}

.month-nav {
	display: flex;

	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.month-nav button {
	background: none;
	border: none;
	color: #ffffff;
	font-size: 1.6rem;
	cursor: pointer;
	font-weight: bold;
	transition: color 0.3s;
}

.month-nav button:hover {
	color: #e9f4ee;
}

#monthAndYear {
	font-size: 1.25rem;
	font-weight: 600;
}

/* ---------- Legend Buttons ---------- */
.legend {
	display: flex;
	/* justify-content: center; */
	flex-wrap: wrap;
	gap: 10px;
}

.legend span {
	display: inline-block;
	padding: 5px 15px;
	border-radius: 5px;
	color: #0c1a14;
	font-size: 0.9rem;
	font-weight: 500;
}

.legend .member {
	background: #9ae5c0;
}

.legend .board {
	background: #b4dac7;
}

.legend .conference {
	background: #c5e3d4;
}

.legend .event {
	background: #97e7bf;
}

.legend .holiday {
	background: #df9292;
}

.legend .other {
	background: #cfded6;
}

/* ---------- Calendar Container ---------- */
.calendar-container {
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	padding: 0;
	max-width: 100%;
	margin: -40px auto 50px;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

/* ---------- Calendar Table ---------- */
.calendar {
	width: 100%;
	border-collapse: collapse;
	/* Fixed layout = every column is exactly 1/7th wide regardless of content,
	   so a long event name can never widen a column or change the box size —
	   it just ellipsizes inside the cell. */
	table-layout: fixed;
}

.calendar th {
	background: #146741;
	color: white;
	text-align: center;
	padding: 10px;
	font-weight: 500;
	letter-spacing: 0.5px;
}

.calendar td {
	width: 14.2%;
	min-height: 175px;
	height: auto;
	vertical-align: top;
	text-align: left;
	border: 1px solid #d3e3d9;
	position: relative;
	padding: 5px;
	background: #ffffff;
}

.calendar td .cal-day-num {
	font-weight: 600;
	margin-bottom: 4px;
}

.calendar td .calendar-events-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 140px;
	overflow-y: auto;
	min-width: 0;
}

.calendar td .event {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 4px 5px;
	border-radius: 4px;
	font-size: 0.75rem;
	line-height: 1.4;
	color: #0c1a14;
	text-align: center;
	cursor: help;
	/* Keep every event on a single line with an ellipsis so long names never
	   widen the column or grow the cell — blocks stay uniform. */
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.calendar-header h2 {
		font-size: 1.6rem;
	}

	.month-nav button {
		font-size: 1.2rem;
	}

	#monthAndYear {
		font-size: 1rem;
	}

	.legend span {
		font-size: 0.8rem;
		padding: 4px 10px;
	}

	.calendar td {
		min-height: 70px;
		height: auto;
		font-size: 0.8rem;
	}

	.calendar td .calendar-events-wrap {
		max-height: 80px;
	}
}

.blog-box {
	position: relative;
	background: #ffffff;
	border-radius: 10px;
	text-align: center;
	padding: 15px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	overflow: visible;
	height: 100%;
}

.blog-box img {
	width: 100%;
	border-radius: 10px;
	height: 200px;
	object-fit: cover;
}

/* Article content — images should render at their natural size, not stretched */
.blog-box.article-content {
	text-align: unset;
}
.blog-box.article-content img {
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: unset;
}

/* WordPress standard image alignment classes — must match TinyMCE output */
.aligncenter, img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft, img.alignleft {
	display: inline;
	float: left;
	margin-right: 1em;
	margin-bottom: 0.5em;
}
.alignright, img.alignright {
	display: inline;
	float: right;
	margin-left: 1em;
	margin-bottom: 0.5em;
}
.alignnone, img.alignnone {
	display: inline;
}

.blog-box h6 {
	margin-top: 10px;
	font-weight: bold;
	text-align: left;
	min-height: 50px;
}

/* Swiper arrow styling */
.latest-news-swiper .swiper-button-prev,
.latest-news-swiper .swiper-button-next {
	width: 50px;
	height: 50px;
	background: transparent;
}

.latest-news-swiper .swiper-button-prev:after,
.latest-news-swiper .swiper-button-next:after {
	content: '' !important;
	display: none !important;
}

.latest-news-swiper .swiper-button-prev i,
.latest-news-swiper .swiper-button-next i {
	color: #178050;
	font-size: 48px;
}

.latest-news-swiper .swiper-button-prev:hover i,
.latest-news-swiper .swiper-button-next:hover i {
	color: #157a48 !important;
}

.blog-section {
	 position: relative;
  background-color: #178050; /* dark blue background */
  color: white;
  text-align: center;
  padding-top: 12rem !important;
  padding-bottom: 1rem;
  margin-top: -60px; /* pulls section upward to overlap */
  z-index: 1; /* ensures it's on top of other elements */
	align-items: flex-end; 
		
}

.blog-section h1 {
	font-family: "Sora", "Inter", system-ui, sans-serif;
	font-size: 50px;
	 
	margin-bottom: 50px;
}


/* time line css  */
  .timeline1 {
            position: relative;
            margin: 40px auto;
            padding: 40px 0;
            max-width: 900px;
        }

        /* Vertical center line */
        .timeline1:before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 20px;
            background: #ffffff;
            margin-left: -3px;
        }

        .timeline-event {
            position: relative;
            margin-bottom: 50px;
        }

        .timeline-event-left,
        .timeline-event-right {
            width: 50%;
            padding: 0 25px;
            box-sizing: border-box;
        }

        .timeline-event-right {
            float: right;
            text-align: left;
        }

        .timeline-event-left {
            float: left;
            text-align: right;
        }

        .timeline-event:after {
            content: "";
            display: block;
            clear: both;
        }

        /* Card box */
        .timeline-event .card {
            background: #ffffff;
            color: #0c1a14;
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        /* Label inside content box */
        .timeline-label {
            background: #68dba2;
            color: #335544;
            font-weight: 700;
            border-radius: 8px;
            padding: 5px 15px;
            margin-bottom: 12px;
            display: inline-block;
        }

        /* Date badges */
        .timeline-date {
            position: relative;
            
            color: #ffffff;
           font-weight:bold;
            font-size: 2.4em;
            margin-bottom: 0px !important;
            display: inline-block;
             
        }
        .timeline-event-left .timeline-date::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -3%;
            margin-right: -16px;
            /* adjust spacing from the vertical line */
            transform: translateY(-50%);
            border-width: 20px;
            border-style: solid;
            border-color: transparent #ffffff transparent transparent;
        }

        /* RIGHT SIDE — arrow points left, from line toward date */
        .timeline-event-right .timeline-date::after {
            content: "";
            position: absolute;
            top: 50%;
            left: -3%;
            margin-left: -16px;
            /* adjust spacing from the vertical line */
            transform: translateY(-50%);
            border-width: 20px;
            border-style: solid;
            border-color: transparent transparent transparent #ffffff;
        }

        /* Centered event box */
        .timeline-event-center {
            text-align: center;
            clear: both;
            margin-bottom: 60px;
            position: relative;
        }

        .timeline-event-center-content {
            display: inline-block;
            text-align: left;
            width: 75%;
            max-width: 800px;
        }

        .timeline-event-center .timeline-label {
            display: block;
            text-align:center;
			font-weight:bold
        }

        .timeline-event-center .card {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .timeline1:before {
                left: 20px;
            }

            .timeline-event-left,
            .timeline-event-right {
                float: none;
                width: 100%;
                text-align: left;
                padding-left: 50px;
            }

            .timeline-event-center-content {
                width: 100%;
                padding-left: 50px;
                padding-right: 15px;
            }

            /* Adjust arrow direction on mobile (always point right) */
            .timeline-date::after {
                left: -10px !important;
                right: auto !important;
                border-color: transparent #68dba2 transparent transparent !important;
            }
        }
        .timeline-cursive{
          font-family: "Sora", "Inter", system-ui, sans-serif;
          font-size: 30px;
          font-weight: normal;
         
        text-align:center
          }
          .timeline1 .timeline-event:last-child::after {
            content: none;
          }
          .timeline1:before {
            bottom: auto;
            height: calc(100% - 150px); /* Adjust if needed */
          }
        

/*Mobile Css */
@media (max-width: 767px) {
	.container {
		padding:20px !important;
	}
	.values-section {
		background-color: #27503c;
		color: white;
		padding: 60px 20px;  
		text-align: left;
	}

	.header-section {
       height:auto !important;
	}
	.info-box {
		margin-top: 15px;
	}
	.blueback {
		padding: 50px 20px;
		background: #178050;
	}
  .top-section{padding-bottom:0px}
  .content-card{margin:10px}
}
		.accordion-button1{
			background: transparent !important;
			border: none !important;
			box-shadow: none !important;
			padding: 25px 0;
			color: var(--category-red) !important;
			font-weight: 700;
			font-size: 18px;
			justify-content: flex-end;
			}

    .carousel-control-next, .carousel-control-prev{
         top: 100px !important;
    }
    
    /* CRITICAL: Fix carousel to show only one slide at a time */
    #importantCarousel .carousel-item {
        display: none !important;
        position: absolute;
        width: 100%;
    }
    
    #importantCarousel .carousel-item.active {
        display: block !important;
        position: relative;
    }
    
    #importantCarousel .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    
    #importantCarousel .carousel-control-prev,
    #importantCarousel .carousel-control-next {
        z-index: 15 !important;
        cursor: pointer !important;
        opacity: 1 !important;
    }
    
    #importantCarousel .carousel-control-prev:hover,
    #importantCarousel .carousel-control-next:hover {
        opacity: 0.8 !important;
    }
    
    .blog-box a{
      color: #18221d !important;
     font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;    }
    .blog-box h6{
      color: #18221d !important;
     font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;    }

.stand-for-section p{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 300;
    font-size: 15px;
}
.stand-for-section h1{
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-weight: 900;
 }
 .contact p{ font-weight: normal !important}
 
.page-id-29 .top-box {
	background: white;
	border-radius: 40px;
	position: relative;
	transition: all 0.3s ease;
	cursor: pointer;
	border: 5px solid white;
      height: 310px;
}
.cursive-text{font-family: var(--uc-font-display) !important; font-style: italic; font-weight: 300; letter-spacing: -.01em}
.display-text{font-family: var(--uc-font-display) !important}
.display-text{font-family: "Sora", "Inter", system-ui, sans-serif !important; font-weight:600}
.hanken-grotesk-text{font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important}
.no-bold{font-weight:normal !important}

/* Accordion heading arrow */
.accordion-button1 h2 span {
  display: inline-block;
  transition: transform 0.3s ease;
  color: #972c2c;
  font-size: 18px;
}

/* OPEN STATE (Bootstrap adds .collapsed when closed) */
.accordion-button1:not(.collapsed) h2 span {
  transform: rotate(180deg); /* ▼ becomes ▲ */
}
  

/* Section level accordion */
.faq {
  display: none;
}

.faq.open {
  display: block;
}

/* Heading clickable */
.faq-section h2 {
  cursor: pointer;
  
  justify-content: space-between;
  align-items: center;
}

/* Rotate red arrow */
.faq-section h2 span {
  transition: transform 0.3s ease;
}

.faq-section h2.active span {
  transform: rotate(180deg);
}

.process-bg {
  position: relative;
  padding: 70px 30px 35px;
  border-radius: 8px;
  background: transparent;
}



/* HALF BACKGROUND */
.process-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: #2f5e47;
  border-radius: 8px 8px 0 0;
  z-index: -1;
}

/* SLIDER NAVIGATION ICONS */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background: var(--dark-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.slider-nav:hover {
  background: #0c1a14;
  transform: translateY(-50%) scale(1.1);
}

.nav-prev {
  left: -15px;
}

.nav-next {
  right: -15px;
}

.slider-nav i {
  font-size: 16px;
}

.process-row {
  display: flex;
  width: 100%;
  padding-top: 60px;
}

/* ANIMATIONS */
@keyframes slideIn {
  0% {
      opacity: 0;
      transform: translateX(-30px);
  }

  100% {
      opacity: 1;
      transform: translateX(0);
  }
}

/* STEP ITEM */
.step-item {
  flex: 1;
  position: relative;
  margin-left: -15px;
  padding: 0 8px;
  display: flex;
  justify-content: center;
  opacity: 0;
  animation: slideIn 0.6s ease-out forwards;
}

.step-item:nth-child(1) {
  z-index: 4;
  animation-delay: 0.1s;
}

.step-item:nth-child(2) {
  z-index: 3;
  animation-delay: 0.3s;
}

.step-item:nth-child(3) {
  z-index: 2;
  animation-delay: 0.5s;
}

.step-item:nth-child(4) {
  z-index: 1;
  animation-delay: 0.7s;
}

 /* CARD */
 .step-card {
  position: relative;
  width: 100%;
  min-height: 190px;
  padding: 50px 25px 25px 45px;
  text-align: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
}

.step-item:nth-child(1) .step-card::before {
  background: var(--c1);
}

.step-item:nth-child(2) .step-card::before {
  background: var(--c2);
}

.step-item:nth-child(3) .step-card::before {
  background: var(--c3);
}

.step-item:nth-child(4) .step-card::before {
  background: var(--c4);
}

/* ICON BOX */
.icon-box {
  width: 78px;
  height: 78px;
  position: absolute;
  top: -39px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 10;
}

.step-item:nth-child(1) .icon-box {
  background: var(--c1);
}

.step-item:nth-child(2) .icon-box {
  background: var(--c2);
}

.step-item:nth-child(3) .icon-box {
  background: var(--c3);
}

.step-item:nth-child(4) .icon-box {
  background: var(--c4);
}

.icon-inner {
  width: 64px;
  height: 64px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.icon-inner i {
  font-size: 28px;
}

.step-item:nth-child(1) i {
  color: var(--c1);
}

.step-item:nth-child(2) i {
  color: var(--c2);
}

.step-item:nth-child(3) i {
  color: var(--c3);
}

.step-item:nth-child(4) i {
  color: var(--c4);
}

.title1 {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.desc {
  font-size: 12px;
  line-height: 1.5;
  opacity: .95;
}

/* TIMELINE - FULL WIDTH LINE */
.timeline-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  padding: 0 90px;
  /* Space for labels, but line will ignore this */
  width: 100%;
}

.line-bg {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #a4b0aa;
  z-index: 0;
}

.time-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  text-align: center;
}

.dot1 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: var(--c1);
  margin-bottom: 6px;
}

.time-step:nth-child(2) .dot1 {
  background: var(--c2);
}

.time-step:nth-child(3) .dot1 {
  background: var(--c3);
}

.time-step:nth-child(4) .dot1 {
  background: var(--c4);
}

.time-label {
  font-weight: 700;
  font-size: 16px;
  color: #2f5e47;
}

/* MOBILE */
@media (max-width: 900px) {
  .slider-nav {
      display: none;
  }

  /* Hide icons on mobile for vertical flow */
  .process-row {
      flex-direction: column;
      padding-top: 0;
      gap: 35px;
  }

  .step-item {
      margin-left: 0;
      padding: 0;
      width: 100%;
  }

  .step-card {
      min-height: auto;
      padding: 45px 20px 30px;
  }

  .step-card::before {
      clip-path: none;
      border-radius: 12px;
  }

  .icon-box {
      top: -35px;
      left: 50%;
      transform: translateX(-50%);
  }

  .timeline-row {
      display: none;
  }
}

.wp-login-logo {
  display: none;
}

.wp-login-log-in {
  display: none;
}

/* Fix: remove WordPress admin bar white space for non-admin logged-in users */
html.wp-theme-mytheme { margin-top: 0 !important; }
html { margin-top: 0 !important; }


/* Latest News Swiper - No partial slides */
.latest-news-swiper-wrapper {
	position: relative;
	padding: 0 60px;
	margin-bottom: -160px;
	z-index: 999;
}

/* Swiper slide equal height */
.latest-news-swiper .swiper-wrapper {
	align-items: stretch;
}

.latest-news-swiper .swiper-slide {
	height: auto;
	display: flex;
	flex-direction: column;
}

/* meta sits on blue footer */
.news-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 4px 0;
}

.news-card-meta .news-date {
	color: #ffffff;
	font-size: 12px;
}

.news-card-meta .read-more-btn {
	color: #157a48 !important;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
}

.news-card-meta .read-more-btn:hover {
	text-decoration: underline;
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
	.latest-news-swiper-wrapper {
		padding: 0 45px;
		margin-bottom: -100px;
	}

	.news-card {
		height: auto;
    width: auto;
	}

	.news-card-image-wrapper {
		height: 170px;
	}

	.news-card-body {
		padding: 14px;
	}

	.news-card-body h6 {
		font-size: 14px;
		min-height: unset;
	}

	.news-excerpt {
		font-size: 12px;
		min-height: unset;
	}

	.news-card-meta {
		padding: 10px 2px 0;
	}

	.news-card-meta .news-date {
		font-size: 11px;
	}

	.news-card-meta .read-more-btn {
		font-size: 11px;
	}

	.latest-news-prev i,
	.latest-news-next i {
		font-size: 28px;
	}

	.latest-news-prev,
	.latest-news-next {
		width: 30px;
		height: 30px;
	}
}

.latest-news-swiper {
	overflow: hidden !important;
}

.latest-news-swiper .swiper-button-prev,
.latest-news-swiper .swiper-button-next {
	display: none;
}

.latest-news-prev,
.latest-news-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	cursor: pointer;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.latest-news-prev {
	left: 0;
}

.latest-news-next {
	right: 0;
}

.latest-news-prev i,
.latest-news-next i {
	color: #178050;
	font-size: 48px;
}

.latest-news-prev:hover i,
.latest-news-next:hover i {
	color: #157a48;
}

/* News Card Styling */
.news-card {
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
	height: 100%;
	min-height: 380px;
	display: flex;
	flex-direction: column;
}

.news-card:hover {
	transform: translateY(-5px);
}

.news-card-image-wrapper {
	width: 100%;
	height: 200px;
	overflow: hidden;
	flex-shrink: 0;
}

.news-card-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.news-card-body {
	padding: 20px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.news-card-body h6 {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #146741;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 44px;
}

.news-excerpt {
	color: #496959;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 15px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 63px;
}

.news-date {
	color: #4d6357;
	font-size: 18px !important;
	/* margin-bottom: 15px; */
	margin-top: auto;
}

.read-more-btn {
	color: #178050 !important;
  font-size: 18px !important;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.3s ease;
}

.read-more-btn:hover {
	color: #157a48 !important;
}

/* Update legend colors to match the design */
.legend .member {
	background: #19844b;
	color: #ffffff;
}

.legend a.member {
	text-decoration: none;
	display: inline-block;
	padding: 5px 15px;
	border-radius: 5px;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.legend a.member:hover {
	opacity: 0.85;
	text-decoration: none;
	color: #146741;
}

.legend .board {
	background: #b4dac7;
	color: #146741;
}

.legend .conference {
	background: #c5e3d4;
	color: #146741;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.news-card-image-wrapper {
		height: 150px;
	}
	
	.news-card-body {
		padding: 15px;
	}
}

.latest-news-swiper {
	padding: 10px 0 !important;
	overflow: hidden !important;
}

/* ===== Filter Bar ===== */
.filter-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 0;
	flex-wrap: wrap;
}

.filter-search {
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 10px;
	padding: 0 16px;
	flex: 1;
	min-width: 200px;
	height: 52px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.filter-search i { 
	color: #4d6357; 
	margin-right: 10px; 
	font-size: 15px;
}

.filter-search input {
	border: none;
	outline: none;
	width: 100%;
	font-size: 14px;
	background: transparent;
	height: 100%;
	color: #17281f;
}

.filter-search input::placeholder {
	color: #5f6f66;
}

.filter-dropdown { 
	display: flex; 
	flex-direction: column; 
	gap: 2px;
	background: #ffffff;
	border-radius: 10px;
	padding: 6px 16px 6px 16px;
	min-width: 140px;
	height: 52px;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	position: relative;
}

.filter-dropdown label { 
	font-size: 14px; 
	/* color: #dc2626;  */
	font-weight: 600; 
	margin: 0; 
	line-height: 1.2;
}

.filter-dropdown select {
	border: none;
	padding: 0;
	font-size: 12px;
	background: transparent;
	outline: none;
	color: #dc2626;
	font-weight: 500;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0px center;
	padding-right: 18px;
}

.filter-btn {
	height: 52px;
	padding: 0 28px;
	background: #178050;
	color: #ffffff;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
}

.filter-btn:hover { background: #1e3c2d; }

.filter-clear-btn {
	height: 52px;
	padding: 0 20px;
	background: #dc2626;
	color: #ffffff;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.filter-clear-btn:hover { background: #be3737; color: #ffffff; }

@media (max-width: 767px) {
	.filter-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.filter-search,
	.filter-dropdown,
	.filter-btn,
	.filter-clear-btn {
		width: 100%;
	}

	.filter-btn,
	.filter-clear-btn {
		justify-content: center;
		text-align: center;
	}
}

/* The members menu has no styling of its own any more. The top-level link takes the
   same white-on-header treatment and hover as every other item, and the dropdown
   inherits the base card — so there is nothing here to drift out of step. */


/* ── Gradients ───────────────────────────────────────────────────────────────
   Used where a surface is large enough that a flat fill looks inert: the hero
   wedge, primary buttons, the CRM sidebar. Everything else stays flat — gradients
   on small controls just read as noise. */

/* Primary actions: a short ramp, plus a brighter one on hover so the button has
   somewhere to go. */
.btn-primary,
button[type="submit"]:not(.btn-danger):not(.btn-secondary),
.loginBtn,
input[type="submit"] {
    background-image: linear-gradient(180deg, var(--uc-accent, #1e9e5a) 0%, var(--uc-accent-dark, #157a48) 100%);
    border-color: var(--uc-accent-dark, #157a48);
    transition: background-image .18s ease, box-shadow .18s ease, transform .06s ease;
}
.btn-primary:hover,
button[type="submit"]:not(.btn-danger):not(.btn-secondary):hover,
.loginBtn:hover,
input[type="submit"]:hover {
    background-image: linear-gradient(180deg, var(--uc-primary-300, #3ecf8e) 0%, var(--uc-accent, #1e9e5a) 100%);
    box-shadow: 0 6px 18px rgba(30, 158, 90, .28);
}
.btn-primary:active,
button[type="submit"]:active { transform: translateY(1px); }

/* The hero wedge: a diagonal that fades instead of a solid block, so the artwork
   underneath still reads on the right-hand side. */
.bannerBox::before {
    background: linear-gradient(100deg,
        var(--uc-primary-900, #06251a) 0%,
        rgba(10, 56, 38, .92) 55%,
        rgba(10, 56, 38, .55) 100%) !important;
    opacity: .88 !important;
}

/* Section headings get a short mint rule rather than a full-width border. */
.serviceBox h2::after,
.section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--uc-accent, #1e9e5a), var(--uc-primary-300, #3ecf8e));
}