/*
Theme Name: My Custom Theme
Author: Your Name
Version: 1.0
*/
@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";

/* Buffalo — the script font for italic "statement" lines. Font files ship in assets/fonts;
   this @font-face actually registers them so .cursive-text (and the statement headings) render
   in Buffalo instead of falling back to a system cursive. */
@font-face {
    font-family: "Buffalo";
    src: url("assets/fonts/buffalo-regular-webfont.woff2") format("woff2"),
         url("assets/fonts/buffalo-regular-webfont.woff") format("woff"),
         url("assets/fonts/Buffalo-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.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(../mytheme/images/banner.jpg);
    /* Centre the crop on the car + walking paramedic (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: #fff;
}

/* Crisp diagonal navy wedge on the LEFT (matches the approved mockup). */
.bannerBox::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #2b3352;
    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(../mytheme/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: #fff;
    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: #2e3260;
    text-decoration: none;
    display: block;
    padding: 10px 24px;
    border-bottom: 1px solid #434548
}

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

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

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

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

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

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

.mobilemenu .bottomsection a.joinbutton {
    background: #d9d9d9;
    width: 206px;
    display: block;
    border-radius: 6px;
    font-size: 16px;
    color: #2e3260;
    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: #2e3260;
    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: #212529;
    font-weight: 600
}




.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: #d9d9d9;
    border: 1px solid #a4a5a7;
    border-radius: 8px;
    overflow: hidden
}

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



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



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



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

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



.questionsBox {
    width: 100%;
    background: #2e3260;
    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: #fff;
    font-weight: 800;
    padding: 0
}



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

.questionsBox .left .subtitle {
    font-size: 34px;
    color: #fff;
    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: #738fb1;
    text-decoration: none;
    background: #d9d9d9;
    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: #011532
}

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

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

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

.serviceBox h2 {
    font-size: 34px;
    color: #011532;
    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: #011532;
    font-weight: 600
}


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



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



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

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

.standBox h2 {
    font-size: 34px;
    color: #fff;
    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: #fff;
    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: #fff;
    font-weight: 600
}


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



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



.standBox .learnmore {
    background: #d9d9d9;
    color: #000;
    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: #212529
}

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

.footerCntr .footerBox .left {
    width: 400px;
    max-width: 100%
}



.footerCntr .footerBox .left h3 {
    padding: 15px 0;
    font-size: 20px;
    color: #fff;
    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: #fff;
    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: #fff;
    font-weight: 400;
    text-decoration: none
}

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

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

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

.footerCntr .copyright a:hover {
    color: #e0ff77
}

.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: #fff;
    text-decoration: none;
    font-size: 20px
}

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

body {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #011532
}

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



/*******************************************************************************************/
/********************************** HEADER SECTION CSS *************************************/
/*******************************************************************************************/
.headerCntr {
  background-color: #2e3260;
  padding: 10px 0;
}

.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: #fff;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: clamp(12px, 1.2vw, 16px);
  padding: 10px 5px;
  white-space: nowrap;
}

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

/* Dropdown item hover - full width highlight */
.main-navigation ul.main-menu li ul li a:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #e2ff64 !important;
  border-radius: 0 !important;
}

/* Dropdown */
.main-navigation ul.main-menu li ul {
  display: none;
  position: absolute;
  background-color: #2e3260;
  min-width: 220px;
  padding: 0;
  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: 8px 15px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0 !important;
}

.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 {
  display: none;
  position: absolute;
  background: #2e3260;
  padding: 0;
  min-width: 220px;
  z-index: 1000;
  overflow: hidden;
}

.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 {
  display: none;
  position: absolute;
  background: #2e3260;
  padding: 10px 0;
  min-width: 220px;
  z-index: 1000;
}

.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 #434548;
    margin: 8px;
  }

  .main-navigation ul.main-menu li ul {
    background-color: white;
    /* Inside the 250px drawer the dropdown flows in place instead of floating off to the side. */
    position: static;
    min-width: 0;
  }

  /* Touch has no hover: js/main.js toggles .submenu-open on tap. */
  .main-navigation ul.main-menu li:hover > ul {
    display: none;
  }

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

  .main-navigation ul.main-menu.active {
    overflow-y: auto;
  }
   /* 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: #2e3260;
  }

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

  .sidebar-footer {
    display: block;
    margin-top: 40px;
    background: #3b3b3b;
    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: #ddd;
    color: #111;
    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: #e0ff77;
  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: #000f2f;
  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: #0d1b44;
  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: #738FB1
}

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

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

.value p {
  font-weight: bold;
}

.history {
  background: #0d1b44;
  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: #e8e8e8;
  padding: 3rem 2rem;
  text-align: center;
}

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

.btn {
  display: inline-block;
  background: #e0ff77;
  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: 'Poppins', sans-serif;
  padding: 40px 150px;
  background-color: #fff;
}

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

.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: #f5f5f5;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
}

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

.contact-card {
  background: #fff;
  border: 1px solid #ddd;
  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: #0a1931;
}

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

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

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

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

/* FORM AREA */
.contact-form-area {
  background: #0a1931;
  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: #e0ff77;
  color: #000;
  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: #031735;
  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: #fff;
  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: Playfair;

}

.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: #031735;
}

.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: #00113d;
  margin-bottom: 1rem;
}

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

.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 #ccc;
  border-radius: 5px;
  background-color: #e6f0ff;
  font-size: 1rem;
}

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

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

.login-box button {
  background-color: #00113d;
  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: #000a29;
}

/* 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: #f4f4f4;
}

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

.press-card {
  background: #fff;
  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: #2a50db;
  text-decoration: underline;
}

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

.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: #011532;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.pagination .current {
  background: #e0ff77;
  color: #011532;
}
/***********************************************************************************************************/
/************************** FAQ ****************************************************************************/
/***********************************************************************************************************/
.navbar {
  background: #001f3f;
  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: #e0ff77;
  padding: 5px 10px;
  border-radius: 4px;
  color: #001f3f;
}

.faq-section {
    margin: 10px 200px;
    padding: 40px 0px;
  background: white;
}
.faq-section h1 {
  text-align: center;
  margin-bottom: 20px;
}
.intro {
  font-style: italic;
  color: #555;
  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: #001f3f;
}

.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 #ccc;
  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: #001f3f;
  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:#e0ff77;
  color: #001f3f;
  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: #e9e9ec; /* 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: #1e1e2f;
  margin-bottom: 20px;
}

.faq-section p {
  font-size: 1rem;
  color: #333;
  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: #1e1e2f;
  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: #1e1e2f;
  margin-right: 10px;
  font-size: 1.1rem;
}

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

.faq-contents a:hover {
  color: #1e1e2f;
}

.faq-contents a:visited {
  color: #1e1e2f;
}

.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 #ccc;
  border-radius: 6px;
  padding: 15px;
  background: #f9f9f9;
}

.ask-section {
  background-color: #052251;
  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: #dcdcdc;
}

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

.join-btn {
  background-color: #e0ff77;
  color: #052251;
  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: #052251;
}

textarea {
  resize: vertical;
}

.submit-btn {
  background-color: #e0ff77;
  color: #052251;
  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: #031735;
    padding: 140px; 
}
.page-wrapper {
  display: flex;
  max-width: 1200px;
  padding: 40px 20px;
  gap: 30px;
}

.sidebar {
  width: 30%;
}

.member-box {
  background: #002049;
  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: #e0ff77;
  color: #031735;
  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: #031735;
  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: #002049 !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: #fff !important;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 10px;
}

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

.mom-archives ul li {
  border-bottom: 1px dotted #dee2e6;
  color: #fff !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: #fff !important;
  transition: color 0.15s;
}

.mom-archives ul li a:hover {
  color: #9e1b1b;
}

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

.mom-archives ul li a .mom-arc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9e1b1b;
  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: #6c757d;
  padding: 12px 4px 4px;
  border-bottom: none !important;
}

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

.content {
  width: 70%;
  background: white;
  color: #031735;
  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: #f5f5f5;
  border: 1px solid #ccc;
  text-align: center;
  width: 60px;
  border-radius: 4px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

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

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

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

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

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

@media (max-width:768px) {
  /* Member of the Month: the two columns stack. The main column used to be
     hidden outright below 768px, which took the current Member of the Month
     off the page entirely on phones. */
  .page-wrapper {
    flex-direction: column;
    padding: 24px 16px;
    gap: 24px;
  }

  .sidebar {
    width: 100%;
  }

  .content {
    display: block;
    width: 100%;
    padding: 20px;
  }

}

/**********************************************************************************************************/
/****************************************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: #7a92b1;
  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: #666;
  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 #4caf50;
  background: #e6ffe6;
  color: #2d662d;
  font-weight: 500;
}

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


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

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

.containerr {
  margin: 0px auto;
  padding: 40px;
  margin-top: 50px;
  margin-bottom: 60px;
  text-align: center;
  border-radius: 30px;
  background-color: #001b44; /* 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: #05234e;
  border-radius: 2rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 380px;
  height: 400px;
  /* max-height: 400px; */
  background-color: #00122b;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  
}

.team-card img {
  width: 200px;
  height: 220px;
  /* border: 5px solid #4f6edb; */
  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: #c0d3f5;
}

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


a {
  color: #2a50db; /* default link color */
  text-decoration: underline;
}

a:visited {
  color: #2a50db; /* color for visited (clicked) links */
}

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

a:active {
  color: #2a50db; /* 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;
  }

  .questionsBox .holder  {
    padding: 50px;
  }

  .footerCntr {
    padding: 60px 24px;
  }

  .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 #434548;
    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: #2e3260;
  }

  /* 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 #434548;
    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: #2e3260;
  }

  /* 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 #434548;
    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: #2e3260;
  }

  /* 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;
      max-width: 100%;
}

.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: #e0ff77 !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: #e0ff77;
  font-weight: bold;
}

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


line-height: 1.6;

}
.core-values .card, .stand-for .card, .practice .card {
  border: none;
  background: #f8f9fa;
  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: #0a2740;
  margin-bottom: 15px;
}
.grey-section {
  background: #e6e6e6;
  padding: 40px 20px;
  border-radius: 8px;
}

.custom-card {
  background: #fff;
  border: 1px solid #ddd;
  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: #e6f0fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px auto;
}
.icon-circle i {
  font-size: 38px;
  color: #0a2740;
}
.custom-card h5 {
  font-weight: 600;
  margin-bottom: 8px;
  color: #0a2740;
}
.custom-card p {
  font-size: 0.9rem;
  color: #555;
  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:#fff;
  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:#fff;
  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 #fff;
  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: #fff;
}

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

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

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

.header-content p {
    font-family: "Playfair Display", serif;
    font-weight: normal;
	font-size: 30px;
	margin-top: 10px;
	color: #fff; 
}

/* Top Section */
.top-section {
	background-color: #2e3260;
	color: #fff;
	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: #e0ff77;
	color: #000;
	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: #fff;
	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: "Montserrat", sans-serif;
    font-weight: 600;
	margin: 0;
}

.core-content {
	background-color: #fff;
	border-radius: 0px 0px 30px 30px;
	padding: 30px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  font-family: "Poppins", 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: #000;
}

/* 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: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 15px;
}

.stand-header {
	background-color: #d6f56a;
	/* light lime-green shade */
	display: inline-block;
	padding: 8px 25px;
	border-radius: 30px;
	font-weight: 800;
	font-size: 1.2rem;
	margin-bottom: 25px;
	color: #1e1e40;
	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: #1a1a1a;
}

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

.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: #1e2759;
	color: white;
	padding: 60px 150px;
	text-align: left;
}

.values-section h2 {
	font-family: "Buffalo", 'Brush Script MT', cursive;
	font-size: 36px;
	font-weight: normal;
	margin-bottom: 50px;
}

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

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

.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: #000;
	margin-bottom: 30px;
	text-align: left;
}

.union-section p {
	font-size: 16px;
	color: #000;
	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: #666;
	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: #1f266b;
}

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

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

.support-card p,
.support-card ul {
	font-size: 15px;
	color: #222;
	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: "Buffalo", 'Brush Script MT', cursive;
	font-size: 32px;
	color: #1f266b;
}

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


.steps-section {
	background: #1b275a;
	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: #fff;
	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: #0b3d91;
}

.step2 {
	background: #1f7bbf;
}

.step3 {
	background: #25c3cd;
}

.step4 {
	background: #2bb673;
}

.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: #1f7bbf;
	border-radius: 50%;
	position: relative;
	top: -8px;
}

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

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

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

/* 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: #292e63;
	/* dark navy */
	color: #fff;
	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: "Poppins", sans-serif;
  font-weight: 300;
}

.arrow-circle {
	background-color: #d7f954;
	/* lime green */
	color: #292e63;
	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: #1e2250;
}

.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: #b3261e;
	font-size: 40px;
	text-align: right;
	margin-bottom: 35px;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  
}

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

.faq-item {
	background: #f9f8fd;
	border-radius: 10px;
	margin-bottom: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	overflow: hidden;
   font-family: "Poppins", 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: #2e3260;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

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

.plus {
	font-size: 22px;
	color: #a3a3a3;
	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: #444;
	line-height: 1.6;
   font-family: "Poppins", 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: #b3261e;
}

body {
	font-family: 'Poppins', sans-serif;
	margin: 0;
	background-color: #e6e6e6;
	color: #333;
}


.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: #292e63;
	margin-bottom: 15px;
}

.contact-info p {
	font-size: 15px;
	color: #333;
	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: #292e63;
	font-size: 20px;
	margin-top: 2px;
}

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

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

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

.contact-form {
	background-color: #292e63;
	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: #d7f954;
	color: #292e63;
	border: none;
	padding: 10px 25px;
	border-radius: 25px;
	font-weight: 600;
	cursor: pointer;
	transition: 0.3s ease;
}

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

/* 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: 'Poppins', sans-serif;
}

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

.icon {
	background-color: #2e3366;
	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: #555;
	line-height: 1.4;
}


.latest-news {
	background-color: #f4f4f4;
	text-align: left;
	padding: 60px 0;
	font-family: 'Poppins', sans-serif;
}

.latest-news h2 {
	color: #2c2f68;
	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: #fff;
	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 #1f2d5c;
	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: #222;
	margin-bottom: 5px;
}

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

.news-content a {
	text-decoration: none;
	color: #2c2f68;
	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: #111;
	margin-bottom: 15px;
}

/* Full width blue strip (pati) */
.purple-bar {
	background: #25306f;
	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: #fff;
	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: #25306f;
	color: #e2ff64;
	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: #b70000;
	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: #fff;
	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: #25306f;
	/* blue background */
	color: #e2ff64;
	/* 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: #b70000;
	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: #2e3260;
	font-size: 58px;
}

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

.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: #111;
	margin: 25px 0 10px;
}

.files-section {
	background: #fff;
	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: #111;
}

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

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

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

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


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

.arrow-btn:hover {
	color: #25306f;
}

/* 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: #777;
	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(39, 48, 111, 0.6), rgba(39, 48, 111, 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: #a0a6d0;
	font-size: 1.8rem;
}


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

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

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

.more-btn {
	background: #e2ff64;
	border: none;
	color: #111;
	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: #fff;
	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: #1d1f3a;
	font-size: 16px;
	margin-right: 10px;
}

.search-box input {
	border: none;
	outline: none;
	font-size: 16px;
	color: #333;
	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: #2c2f68;
	margin-bottom: 2px;
}

.dropdown-box select {
	border: none;
	background: none;
	font-size: 14px;
	font-weight: 700;
	color: #a80000;
	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: #2c2f68;
	color: #fff;
	padding: 20px;
	text-align: center;
	font-size: 15px;
	border: 2px solid white
}

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

}

.red-title {
	color: #a80000
}

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

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

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

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

.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: #fff;
	text-align: center;
	padding: 50px 20px;
}

.calendar-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(37, 48, 111, 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: #fff;
	font-size: 1.6rem;
	cursor: pointer;
	font-weight: bold;
	transition: color 0.3s;
}

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

#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: #000;
	font-size: 0.9rem;
	font-weight: 500;
}

.legend .member {
	background: #b9e59a;
}

.legend .board {
	background: #a5b9e9;
}

.legend .conference {
	background: #b3d5f5;
}

.legend .event {
	background: #f5e589;
}

.legend .holiday {
	background: #f6a37b;
}

.legend .other {
	background: #d0d5dd;
}

/* ---------- Calendar Container ---------- */
.calendar-container {
	background: #fff;
	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: #25306f;
	color: white;
	text-align: center;
	padding: 10px;
	font-weight: 500;
	letter-spacing: 0.5px;
	/* The weekday header used to get its column separators from Bootstrap's
	   .table-bordered; that class is gone (it was also wiping the body's
	   horizontal borders), so draw them here instead. */
	border: 1px solid #0f1010;
}

.calendar td {
	width: 14.2%;
	min-height: 175px;
	height: auto;
	vertical-align: top;
	text-align: left;
	/* Navy-tinted grey so the grid reads clearly against the white cells --
	   #ddd was washing out on brighter screens. */
	border: 1px solid #b0b8c6;
	position: relative;
	padding: 5px;
	background: #fff;
}

.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: #000;
	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: #fff;
	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 is height:100%, which stretches the article to the column — and the
	   column also holds the title line above it, so the card grew a blank strip at
	   the bottom. An article is only as tall as its own content. */
	height: auto;
}
.blog-box.article-content img {
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: unset;
}
/* No trailing margin under the last line of an article (e.g. the signature) */
.blog-box.article-content > *:last-child {
	margin-bottom: 0;
}

/* 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: #2e3260;
	font-size: 48px;
}

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

.blog-section {
	 position: relative;
  background-color: #2e3260; /* 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: "Buffalo", 'Brush Script MT', cursive;
	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: #fff;
            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: #fff;
            color: #222;
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

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

        /* Date badges */
        .timeline-date {
            position: relative;
            
            color: #fff;
           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 #c2f350 transparent transparent !important;
            }
        }
        .timeline-cursive{
          font-family: "Buffalo", 'Brush Script MT', cursive;
          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: #1e2759;
		color: white;
		padding: 60px 20px;  
		text-align: left;
	}

	.header-section {
       height:auto !important;
	}
	.info-box {
		margin-top: 15px;
	}
	.blueback {
		padding: 50px 20px;
		background: #2e3260;
	}
  .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: #1a1d20 !important;
     font-family: "Poppins", sans-serif;    }
    .blog-box h6{
      color: #1a1d20 !important;
     font-family: "Poppins", sans-serif;    }

.stand-for-section p{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 15px;
}
.stand-for-section h1{
    font-family: "Montserrat", 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: "Buffalo" !important}
.playfair-text{font-family: "playfair" !important}
.montserrat-text{font-family: "Montserrat", sans-serif !important; font-weight:600}
.hanken-grotesk-text{font-family: "Poppins", 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: #a32020;
  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: #2e345f;
  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: #fff;
  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: #000;
  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: #fff;
  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: #fff;
  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: #aaa;
  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 #fff;
  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: #2e345f;
}

/* 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: #fff;
	font-size: 12px;
}

.news-card-meta .read-more-btn {
	color: #c8f000 !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: #2e3260;
	font-size: 48px;
}

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

/* News Card Styling */
.news-card {
	background: #fff;
	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: #2d3748;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 44px;
}

.news-excerpt {
	color: #4a5568;
	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: #718096;
	font-size: 18px !important;
	/* margin-bottom: 15px; */
	margin-top: auto;
}

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

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

/* Update legend colors to match the design */
.legend .member {
	background: #e2ff64;
	color: #2d3748;
}

.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: #2d3748;
}

.legend .board {
	background: #a5b9e9;
	color: #2d3748;
}

.legend .conference {
	background: #b3d5f5;
	color: #2d3748;
}

/* 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: #fff;
	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: #999; 
	margin-right: 10px; 
	font-size: 15px;
}

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

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

.filter-dropdown { 
	display: flex; 
	flex-direction: column; 
	gap: 2px;
	background: #fff;
	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: #e53e3e;  */
	font-weight: 600; 
	margin: 0; 
	line-height: 1.2;
}

.filter-dropdown select {
	border: none;
	padding: 0;
	font-size: 12px;
	background: transparent;
	outline: none;
	color: #e53e3e;
	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: #2e3260;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
}

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

.filter-clear-btn {
	height: 52px;
	padding: 0 20px;
	background: #e53e3e;
	color: #fff;
	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: #c53030; color: #fff; }

@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;
	}
}

/* ===== Members Button - Yellow Box ===== */
.main-navigation ul.main-menu li.members-only > a {
	background-color: #e2ff64 !important;
	color: #2e3260 !important;
	padding: 6px 14px !important;
	border-radius: 4px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	display: inline-block !important;
	line-height: 1.4 !important;
}

.main-navigation ul.main-menu li.members-only > a:hover {
	background-color: #d4f050 !important;
	color: #2e3260 !important;
}

/* Members Submenu - Yellow background */
.main-navigation ul.main-menu li.members-only ul {
	background-color: #e2ff64 !important;
	border: none !important;
	min-width: 160px !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.main-navigation ul.main-menu li.members-only ul li a {
	color: #2e3260 !important;
	font-weight: 600 !important;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 8px 15px !important;
	border-radius: 0 !important;
}

.main-navigation ul.main-menu li.members-only ul li a:hover,
.main-navigation ul.main-menu li.members-only ul li.current-menu-item > a {
	background-color: #2e3260 !important;
	color: #e2ff64 !important;
	border-radius: 0 !important;
}
/* ==========================================================================
   Home page (index.php) — layout fixes
   These come last on purpose: the sections below are also styled in four
   duplicated media-query blocks earlier in this file, and appending here is
   the only reliable way to win without editing all four copies.
   ========================================================================== */

/* --- News & Press Releases cards ---
   The cards are wrapped in <a class="press-link">, which had no styling at
   all, so every card rendered as blue underlined link text. The anchor is
   also the flex item, so it needs the card's width rules, not .block. */
.newsBox .holder {
	gap: 40px;
	margin-right: 0;
}

a.press-link {
	flex: 0 1 385px;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
}

a.press-link:hover .block h3 {
	color: #738fb1;
}

.newsBox .block {
	width: 100%;
	margin: 0;
}

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

.newsBox .block .inner p {
	margin: 6px 0 0;
}

@media (max-width: 991.98px) {
	/* The 160px side padding left ~280px of content at 600px wide; the
	   .container inside already provides the gutter. */
	.newsBox {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 767.98px) {
	/* Title and subtitle stack and centre (they used to sit in a
	   space-between row next to the removed "View All" link). */
	.newsBox .title {
		display: block;
		text-align: center;
		padding: 25px 10px;
	}

	.newsBox .title .subtitle {
		margin-top: 6px;
	}

	.newsBox .block h3 {
		font-size: 20px;
		padding-top: 12px;
	}
}

/* --- "Who is Local 727 for?" cards --- */
@media (max-width: 767.98px) {
	.serviceBox .holder {
		padding: 25px 16px;
		gap: 8px;
	}

	.serviceBox .holder .block {
		margin-bottom: 8px;
	}

	.serviceBox .holder .block .icon {
		margin-bottom: 14px;
	}

	.serviceBox .holder .block h3 {
		padding-bottom: 6px;
	}
}

/* --- "You're There for Everyone" cards ---
   Three flex items with no min width were squeezed to ~103px at 768px. */
@media (max-width: 991.98px) {
	.standBox .holder {
		padding: 30px 16px 10px;
		margin-right: 0;
		gap: 24px;
		justify-content: center;
	}

	.standBox .holder .block {
		width: auto;
		flex: 1 1 180px;
		max-width: 300px;
		margin: 0;
	}
}

@media (max-width: 575.98px) {
	.standBox .holder .block {
		flex-basis: 100%;
		max-width: none;
	}

	.standBox .holder .block h3 {
		padding-top: 12px;
	}
}

/* --- "Got Questions?" --- */
@media (max-width: 767.98px) {
	.questionsBox .holder {
		padding: 0 20px;
	}
}

/* --- "You're There for Everyone" heading and intro ---
   The <576 band left only ~210px of text width on a 390px phone. */
@media (max-width: 767.98px) {
	.standBox h2 {
		padding: 0 16px 24px;
	}

	.standBox p {
		padding: 0 16px 20px;
	}
}

/* --- "Got Questions?" list ---
   The browser's default 40px list indent pushed the buttons out of line
   with the heading. */
.questionsBox .right ul {
	padding-left: 0;
	margin-bottom: 0;
}

@media (max-width: 767.98px) {
	.questionsBox {
		/* 100px of empty page above the footer on a phone. */
		margin-bottom: 40px;
	}

	.questionsBox .right ul li {
		padding-bottom: 14px;
	}
}

/* ==========================================================================
   About Us page (about-us2.php)
   ========================================================================== */

/* The three image tiles are wrapped in <a>, which was unstyled, so
   "OUR VALUES +", "WHAT WE STAND FOR +" and "WHAT WE DO +" rendered as blue
   underlined links on every screen size. The label sits on the white tile,
   so it needs the dark colour explicitly (inherit would make it white). */
.top-section a,
.top-section a:hover {
	text-decoration: none;
}

.top-box .overlay-text {
	color: #1e1e40;
	padding: 10px 4px 4px;
	font-size: 15px;
	text-align: center;
}


/* The lime heading pill is fixed at 40% of its column, so on a phone the text
   wrapped onto four lines. Desktop keeps the 40% pill it was designed with. */
@media (max-width: 991.98px) {
	.stand-header {
		display: inline-block;
		width: auto;
		max-width: 100%;
	}
}

@media (max-width: 991.98px) {
	/* The Core Values card is pulled up by -130px to overlap the blue section
	   above it. Once the layout stacks, there is nothing to overlap and the
	   card covered the intro paragraph instead. */
	.core-values-wrapper {
		margin-top: 0;
		padding-top: 20px;
	}

	.top-section {
		padding-bottom: 40px;
	}

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

	.support-section {
		padding: 40px 20px;
		gap: 24px;
	}
}

@media (max-width: 767.98px) {
	.core-header,
	.core-content,
	.stand-for-section {
		padding: 20px;
	}

	.core-header h1 {
		font-size: 2rem;
	}

	.stand-for-section .row > [class*="col-"] {
		padding-left: 0;
		padding-right: 0;
	}

	.stand-for-images {
		margin-top: 16px;
	}
}

/* ==========================================================================
   Page hero + Who We Represent (whoWeRepresent.php)
   ========================================================================== */

/* The hero heading (48px) and subtitle (30px) are desktop sizes. On a 375px
   phone the subtitle alone ran to six lines and filled the first screen.
   Shared by About Us, History, Team, Who We Represent and the FAQ pages. */
@media (max-width: 767.98px) {
	.header-content h1 {
		/* The 28px floor was still too wide for one-word titles such as
		   "ORGANIZATIONAL" on a 320px screen. */
		font-size: clamp(20px, 8vw, 48px);
		line-height: 1.15;
		overflow-wrap: break-word;
	}

	.header-content p {
		font-size: clamp(17px, 4.6vw, 30px);
		line-height: 1.3;
	}
}

/* The cursive closing lines sat 16px under the bullet list and left 110px of
   empty colour below themselves. */
@media (max-width: 991.98px) {
	.values-section .cursive-text {
		margin-top: 28px;
		margin-bottom: 10px;
		font-size: clamp(26px, 6.5vw, 36px);
		line-height: 1.35;
	}

	.values-section {
		padding-bottom: 30px;
	}
}

/* The badge logo carries an inline width:80%, which is fine beside the text
   column but becomes a full-width block once the columns stack. */
@media (max-width: 991.98px) {
	.page-template-whoWeRepresent-php .top-section .col-lg-3 img {
		width: auto !important;
		max-width: 220px;
		display: block;
		margin: 0 auto 24px;
	}
}

@media (max-width: 767.98px) {
	/* 36px cursive with a hard <br> in the markup broke "skilled," onto its
	   own line on a phone. */
	.page-template-whoWeRepresent-php section.container.text-center h3 {
		font-size: clamp(22px, 5.6vw, 36px);
		line-height: 1.4;
	}

	.page-template-whoWeRepresent-php section.container.text-center h3 br {
		display: none;
	}
}

/* The four image tiles sit in a plain .row (no Bootstrap g-* gutter class),
   so once the columns stack below 768px the cards touched with no gap.
   Above 768px the row's horizontal gutter already gives them 24px. */
@media (max-width: 767.98px) {
	.page-template-whoWeRepresent-php .top-section .row > [class*="col-"] + [class*="col-"] {
		margin-top: 24px;
	}
}

/* Footer links were 19px tall, which is too small to tap reliably (this
   includes iPad landscape at 1024px). */
@media (max-width: 1199.98px) {
	.footerCntr .holder ul li a,
	.footerCntr .copyright a {
		display: inline-block;
		padding: 6px 0;
	}
}

/* ==========================================================================
   Our Journey / History timeline (history.php) — phone layout
   Desktop keeps its two-sided timeline; below 768px every entry sits to the
   right of the line, so the line, the arrow and the text need to line up in
   one column. Previously the 40px arrow was drawn at the text's left edge
   and covered the first letter of each date.
   ========================================================================== */
@media (max-width: 768px) {
	.timeline1 {
		margin: 24px auto;
		padding: 16px 0;
	}

	.timeline1:before {
		left: 16px;
		width: 6px;
		margin-left: 0;
	}

	.timeline-event {
		margin-bottom: 32px;
	}

	.timeline-event-left,
	.timeline-event-right,
	.timeline-event-center-content {
		padding-left: 56px;
		padding-right: 0;
	}

	.timeline-date {
		font-size: 1.9em;
		line-height: 1.2;
	}

	/* Small arrow in the gutter between the line and the text, never on it. */
	.timeline-date::after {
		left: -28px !important;
		right: auto !important;
		margin: 0 !important;
		border-width: 10px !important;
		border-color: transparent transparent transparent #c2f350 !important;
	}

	/* A bare `.card { width:90%; max-width:300px }` in the 768px block above
	   shrank the timeline cards to 300px on tablets. */
	.timeline-event .card,
	.timeline-event-center .card {
		width: 100%;
		max-width: none;
	}
}

/* The closing cursive line is broken with hard <br>s for the desktop width,
   which left single words stranded on a phone. */
@media (max-width: 768px) {
	.timeline-cursive {
		font-size: 24px;
		line-height: 1.4;
		padding: 0 16px;
	}

	.timeline-cursive br {
		display: none;
	}
}

/* The blue band between the hero and "OUR JOURNEY" is an empty section that
   exists only so the Core Values card can overlap it on desktop. With the
   card in normal flow on phones it was 130px of empty colour. */
@media (max-width: 991.98px) {
	.page-template-history-php .header-section + .top-section,
	.page-template-history-php .header-section + .top-section > .container {
		padding: 0 !important;
	}
}

/* ==========================================================================
   Meet the Team (team.php) — phone layout
   Each card is a fixed-height white box holding the photo; the name pill
   hangs over its bottom edge and the role text sits *below* the box, on the
   page background. The row's vertical gutter therefore has to clear the
   role text, which the second row's g-4 (24px) did not.
   ========================================================================== */
@media (max-width: 767.98px) {
	.page-template-team-php .row.g-4,
	.page-template-team-php .row.g-5 {
		/* g-5's 48px horizontal gutter pulls the row 24px wider than the
		   container's 20px padding, which pushed the page 4px sideways. */
		--bs-gutter-x: 1.5rem;
		/* Clears the pill overhang plus the role text under each card. */
		--bs-gutter-y: 3rem;
	}
}

@media (max-width: 991.98px) {
	/* The last row's role text overflows its card, so it was landing 5px
	   above the footer at 768px. */
	.page-template-team-php .top-section {
		padding-bottom: 72px;
	}
}

/* ==========================================================================
   FAQ pages (faq.php, member-faq.php) — phone layout
   ========================================================================== */
@media (max-width: 768px) {
	/* The category headings are 40px and right-aligned because on desktop
	   they sit in their own right-hand column. Stacked on a phone they
	   dominated the page and the caret drifted away from the words. */
	.faq-section h2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		font-size: 22px;
		text-align: left;
		margin-bottom: 16px;
		padding: 10px 0;
		border-bottom: 1px solid #e6e6e6;
	}

	.faq-section h2 span {
		font-size: 14px;
		margin-left: 0;
	}

	.faq-section {
		margin: 24px auto;
	}

	/* An open answer is capped at 350px with its own scrollbar. Text wraps
	   far more on a phone, so 4 of the 15 answers turned into a small inner
	   scroll box that looked cut off mid-sentence. */
	.faq-item.active .faq-answer {
		max-height: 2000px;
		overflow: visible;
	}
}

/* ==========================================================================
   Organisational Structure (organisational-structure.php) — phone layout
   ========================================================================== */
@media (max-width: 767.98px) {
	/* chart.png is a 1556px-wide diagram with baked-in labels. Inside the
	   padded card it rendered at 295px, where the labels are unreadable, so
	   the card gives it more room and it opens full size when tapped. */
	.page-template-organisational-structure-php .core-header {
		padding: 12px;
	}

	.chart-zoom {
		display: block;
	}

	.chart-zoom::after {
		content: "Tap the chart to open it full size";
		display: block;
		margin-top: 6px;
		font-size: 13px;
		font-style: italic;
		color: #5a5a5a;
	}

	/* The step descriptions were 12px. */
	.page-template-organisational-structure-php .steps-section .desc {
		font-size: 14px;
		line-height: 1.5;
	}
}

/* Member of the Month: the archive year labels are 12.5px, which is small on
   a phone. */
@media (max-width: 768px) {
	.mom-arc-year {
		font-size: 13.5px;
	}
}

/* ==========================================================================
   Contact page — phone layout
   ========================================================================== */
@media (max-width: 767.98px) {
	/* The Location and Phone boxes sit side by side with a 60px gap, which
	   left each about 137px on a phone: the address wrapped one word per
	   line and the phone number broke across four lines. */
	.contact-info {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.info-box {
		width: 100%;
	}

	/* The email links were 20px tall, which is a small tap target. */
	.contact-item a {
		display: inline-block;
		padding: 3px 0;
	}
}

/* News, Press Releases and single posts: the cursive closing line ran edge
   to edge on a phone. */
@media (max-width: 767.98px) {
	.blog-section h1 {
		padding-left: 16px;
		padding-right: 16px;
		font-size: 26px;
		line-height: 1.4;
	}
}

/* ==========================================================================
   Directory and Perks tables
   Five and six columns cannot fit a phone, so the tables used to stretch the
   whole page sideways (578px and 749px wide at 375px). Each table now sits
   in its own scroll box: the table keeps its shape and the reader swipes it
   sideways, while the page itself stays put. On desktop the tables are wider
   than the min-width below, so nothing changes there.
   ========================================================================== */
.table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table-scroll .directory-table {
	min-width: 600px;
}

.page-template-perks-php .table-scroll .directory-table {
	min-width: 760px;
}

/* ==========================================================================
   Mobile navigation drawer
   The drawer inherited the desktop header's pieces: a white panel, centred
   inline links each with their own underline, 12px text, and the lime
   "Members" button that is meant to stand out against the navy header bar
   but was unreadable here. Below 768px the drawer now matches the site's
   navy header with plain white rows. Desktop navigation is untouched.
   ========================================================================== */
/* The hamburger is shown up to 991.98px, so the drawer styling covers the
   same range. */
@media (max-width: 991.98px) {
	.main-navigation ul.main-menu {
		width: min(82vw, 300px);
		right: calc(-1 * min(82vw, 300px));
		background-color: #2e3260;
		padding-top: 72px;
		align-items: stretch;
		/* Without this the column wraps into a second column once the menu is
		   taller than the screen, throwing items outside the drawer. */
		flex-wrap: nowrap;
		overflow-y: auto;
		box-shadow: -6px 0 24px rgba(0, 0, 0, 0.25);
	}

	.main-navigation ul.main-menu.active {
		right: 0;
	}

	.main-navigation ul.main-menu li {
		margin: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		text-align: left;
	}

	.main-navigation ul.main-menu > li:last-child {
		border-bottom: none;
	}

	.main-navigation ul.main-menu li a {
		display: block;
		padding: 14px 22px;
		font-size: 15px;
		line-height: 1.35;
		color: #fff;
		border-bottom: none;
		white-space: normal;
	}

	/* The lime pill belongs to the desktop header bar, not to a navy drawer. */
	.main-navigation ul.main-menu li.members-only > a,
	.main-navigation ul.main-menu li.members-only > a:hover {
		background-color: transparent !important;
		color: #fff !important;
		padding: 14px 22px !important;
		border-radius: 0 !important;
		font-weight: 600 !important;
		display: block !important;
		white-space: normal !important;
	}

	/* Submenus sit inside the drawer, indented and slightly recessed. */
	.main-navigation ul.main-menu li ul,
	.main-navigation ul.main-menu li.members-only ul {
		/* Static, so an open submenu pushes the rows below it down instead of
		   floating over them. */
		position: static !important;
		background-color: rgba(0, 0, 0, 0.18) !important;
		width: 100% !important;
		min-width: 0 !important;
		border: none !important;
	}

	.main-navigation ul.main-menu li ul li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.main-navigation ul.main-menu li ul li:last-child {
		border-bottom: none;
	}

	.main-navigation ul.main-menu li ul li a,
	.main-navigation ul.main-menu li.members-only ul li a {
		padding: 12px 22px 12px 38px !important;
		font-size: 14px !important;
		color: rgba(255, 255, 255, 0.88) !important;
		font-weight: 400 !important;
		background: none !important;
	}

	.main-navigation ul.main-menu li ul li a:hover,
	.main-navigation ul.main-menu li ul li.current-menu-item > a,
	.main-navigation ul.main-menu li.members-only ul li a:hover,
	.main-navigation ul.main-menu li.members-only ul li.current-menu-item > a {
		background-color: rgba(255, 255, 255, 0.08) !important;
		color: #e2ff64 !important;
	}

	/* Parent rows get a caret on the right instead of relying on hover. */
	.main-navigation ul.main-menu li.menu-item-has-children > a::after {
		content: "\25BE";
		float: right;
		font-size: 12px;
		line-height: 1.6;
		transition: transform 0.2s ease;
	}

	.main-navigation ul.main-menu li.menu-item-has-children.submenu-open > a::after {
		transform: rotate(180deg);
		display: inline-block;
	}

	.closeMobileMenu {
		color: #fff;
		/* The menu scrolls underneath this button, so it needs its own
		   background to stay readable over a row. */
		background: #2e3260;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: none;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	.closeMobileMenu.active {
		display: flex;
	}
}

/* Clicking a parent item opens its submenu (js/main.js adds .submenu-open).
   On desktop hovering still opens it; this makes the click work as well, and
   is what stops "Members" from navigating to the dashboard. */
.main-navigation ul.main-menu li.submenu-open > ul {
	display: block;
}

/* ==========================================================================
   Card sections on phones — one consistent measure
   Cards sat at different widths per page (335px on Who We Represent, 295px on
   Organisational Structure) because some sections add their own padding on top
   of the .container gutter. And inside the cards the Bootstrap row's -12px
   gutter pulled the text back out, so it nearly touched the card edge.
   ========================================================================== */
@media (max-width: 767.98px) {
	.blueback {
		padding-left: 0;
		padding-right: 0;
	}

	.stand-for-section {
		padding: 20px;
	}

	.stand-for-section .row {
		margin-left: 0;
		margin-right: 0;
	}

	.stand-for-section .row > [class*="col-"] {
		padding-left: 0;
		padding-right: 0;
	}

	/* Organisational Structure sets its body text to 20px, which is a desktop
	   size; on a phone it read much larger than the same cards elsewhere. */
	.stand-for-section p,
	.stand-for-content p,
	.stand-for-content li {
		font-size: 15px;
		line-height: 1.6;
	}
}

/* ==========================================================================
   Mobile header: keep the hamburger on the right edge at every width
   Four duplicated copies of the nav block pulled the icon left with negative
   margins (-20px, -100px, -150px, -425px), so its distance from the right
   edge swung between 20px and 153px depending on the screen.
   ========================================================================== */
@media (max-width: 991.98px) {
	/* Bootstrap's container is a fixed width at these breakpoints, which
	   centred the header and left the icon far from the edge on tablets. */
	.headerCntr .container {
		max-width: 100%;
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

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

	.clickHamburgerIcon {
		margin-right: 0 !important;
		margin-left: auto;
		order: 99;
		flex: 0 0 auto;
	}

	.headerCntr .holder > a:first-child {
		flex: 0 1 auto;
		min-width: 0;
	}
}

/* Native selects and filter controls render ~18px tall on the public filter
   bars (Perks, Press, News, Documents), which is too small to tap. */
@media (max-width: 991.98px) {
	select,
	input[type="date"],
	input[type="search"],
	input[type="text"] {
		min-height: 40px;
	}
}

/* On the FAQ pages the white card is the .container itself, so it ran edge to
   edge and looked cut off. Everywhere else the card sits inside the container
   with a 20px gutter; this gives the FAQ card the same gutter. */
@media (max-width: 767.98px) {
	.container.stand-for-section {
		width: auto;
		margin-left: 20px;
		margin-right: 20px;
	}
}

/* The filter dropdowns are a fixed 52px tall with the label stacked above the
   select. Once the select grew to a tappable 40px the pair no longer fitted,
   so the label sat on the box's top edge against the value. */
@media (max-width: 991.98px) {
	.filter-dropdown {
		height: auto;
		min-height: 52px;
		padding: 8px 16px;
		gap: 4px;
	}

	.filter-dropdown select {
		min-height: 30px;
	}
}

/* The footer is the one block with no override between 576px and 767px, where a
   flat 160px of side padding leaves too little room for the text. Every other
   width keeps the padding it had before. */
@media (min-width: 576px) and (max-width: 767.98px) {
	.footerCntr {
		padding: 90px clamp(20px, 12.5vw, 160px);
	}
}