/** 
 * Theme Name: Penguin
 * Author: Central States Marketing
 * Author URI: https://www.centralstatesmarketing.com/
 * Description: This site was built by Central States Marketing. For more information about the site or this custom WordPress theme, you can contact Central States Marketing at: info@csm.marketing or call us at: 309-693-2345.
 * Version: 1.0.4
 *
 * @package penguin
 * @charset "UTF-8"
 */

/**
 * Table of Contents
 * -----------------
 * 1. Global Settings
 * 2. Typography
 * 3. Utils
 * 4. Site Header
 * 5. Drawer
 * 6. Hero Section
 * 7. About Section
 * 8. Banner Section
 * 9. Our Founder
 * 10. Events Section
 * 11. Featured Section
 * 12. Footer Page
 * 13. Admin Buttons
 */


/* ======================== */
/* 1. Global Settings */
/* ======================== */
:root {

	--violet: #370075;
	--yellow: #FFBB12;
	--lightgray: #f1f1f1;
	--gray: #60606b;
	--lavender: #F4EFFA;
	--bg: #FFFFFF;
	--black: #000000;
  
	--shadow-color: rgba(0, 0, 0, 0.25);
	--shadow-color-hover: rgba(0, 0, 0, 0.4);
  
	--shadow: 0 0 10px var(--shadow-color);
	--shadow-hover: 0 0 10px var(--shadow-color-hover);
	--shadow-alt: 0 5px 10px var(--shadow-color); /* 5px is the vertical offset */
  
	  --gutter: 2rem;
  
	  --max-w-max: 115.2rem;
	  --max-w-content: 82rem;
	  --max-w-text: 50rem;
  
	  --border-radius: 1rem;
  
	  --ff-heading: 'ruddy', sans-serif;
	  --ff-body: 'open-sans', sans-serif;
  
	  --fs-xs: clamp(0.55rem, 0.20vw + 0.5rem, 0.8rem);
	  --fs-sm: clamp(0.7rem, 0.25vw + 0.6rem, 0.9rem);
	  --fs-base: clamp(0.85rem, 0.35vw + 0.7rem, 1.1rem);
	  --fs-md: clamp(1rem, 0.5vw + 0.85rem, 1.4rem);
	  --fs-lg: clamp(1.2rem, 0.8vw + 1rem, 1.75rem);
	  --fs-xl: clamp(1.5rem, 1.1vw + 1.2rem, 2rem);
	  --fs-2xl: clamp(1.75rem, 1.5vw + 1.4rem, 2.7rem);
	  --fs-3xl: clamp(2rem, 2vw + 1.5rem, 3.6rem);
  }
  
  /* === Reset === */
  *,
  *::before,
  *::after {
	  box-sizing: inherit;
  }
  
  html {
	  box-sizing: border-box;
	  line-height: 1.5;
	  -webkit-text-size-adjust: 100%;
	  scroll-behavior: smooth;
  }
  
  body {
	  margin: 0;
	  font-family: var(--ff-body);
	  font-size: var(--fs-base);
  }
  
  [id] {
	  scroll-margin-top: 220px;
  }
  
  .container {
	  max-width: var(--max-w-max);
	  margin: 0 auto;
	  padding: 4rem;
  }
  
  button,
  input,
  optgroup,
  select,
  textarea {
	  font-family: inherit;
	  font-size: 100%;
	  line-height: 1.15;
	  margin: 0;
  }
  
  b,
  strong {
	  font-weight: bolder;
  }
  
  embed,
  iframe,
  object,
  img {
	  display: block;
	  max-width: 100%;
  }
  
  @media (prefers-reduced-motion: reduce) {
	  html:focus-within {
		  scroll-behavior: auto;
	  }
  
	  *,
	  *::before,
	  *::after {
		  animation-duration: 0.01ms !important;
		  animation-iteration-count: 1 !important;
		  transition-duration: 0.01ms !important;
		  scroll-behavior: auto !important;
	  }
  }
  
  /* === Template Specific === */
  .post-edit-link {
	  color: var(--violet) !important;
	  position: fixed;
	  left: 1rem;
	  bottom: 1rem;
	  width: fit-content;
	  padding: 0.5em 1em;
	  border-radius: 0.5em;
	  margin: 1em;
	  text-decoration: none !important;
	  background-color: var(--yellow);
	  transition: 0.3s ease-in-out;
	  z-index: 2;
	  display: none;
  }
  
  /* ======================== */
  /* 2. Typography */
  /* ======================== */
  :where(h1, h2, h3, h4, h5, h6) {
	  font-family: var(--ff-heading);
	  line-height: 1;
  }
  
  h1 {
	  font-size: var(--fs-3xl);
	  font-weight: 700;
	  margin: 0 0 1.5rem 0;
	  letter-spacing: 2px;
	  line-height: 149%;
  }
  
  h2 {
	  font-size: var(--fs-2xl);
	  font-weight: 500;
	  margin: 0;
  }
  
  h3 {
	  font-size: var(--fs-xl);
	  font-weight: 400;
	  text-transform: uppercase;
	  margin: 0 0 1rem 0;
  }
  
  h4 {
	  font-size: var(--fs-lg);
	  font-weight: 600;
	  margin: 0 0 0.75rem 0;
	  font-family: var(--ff-body);
  }
  
  h5,
  h6 {
	  font-size: var(--fs-md);
	  margin: 0 0 0.5rem 0;
  }
  
  p {
	  font-size: var(--fs-base);
	  font-weight: 400;
	  line-height: 1.6;
	  margin: 0 0 1rem 0;
	  color: var(--gray);
	  font-family: var(--ff-body);
  }
  
  ul li {
	  font-weight: 500;
	  letter-spacing: 1px;
	  font-family: var(--ff-body);
  
  }
  
  a {
	  text-decoration: none;
	  transition: var(--transition);
	  font-size: var(--fs-base);
  }
  
  a:has(svg) {
	  display: flex;
  }
  
  /* ======================== */
  /* 3. Utils */
  /* ======================== */
  .sr-only {
	  position: absolute;
	  width: 1px;
	  height: 1px;
	  padding: 0;
	  margin: -1px;
	  overflow: hidden;
	  clip: rect(0, 0, 0, 0);
	  white-space: nowrap;
	  border: 0;
  }
  
  hr {
	  width: 100%;
	  border: none;
	  height: 1px;
  }
  
  .btn, .button {
	  color: var(--violet);
	  padding: 0.5rem 1.05rem;
	  border-radius: 10px;
	  font-weight: 700;
	  background-color: var(--bg);
	  display: inline-block;
	  align-self: flex-start;
	  letter-spacing: 1.05px;
	  min-width: 150px;
	  text-align: center;
	  cursor: pointer;
	  transition: 0.4s;
  }

  .btn-violet {
     background-color: var(--violet);
     color: var(--bg);
   }

  
  .btn-yellow, .button {
	  background-color: var(--yellow);
  }
  
  .btn-outlined {
	  border: 1px solid var(--bg);
	  background-color: transparent;
	  color: var(--bg);
  }
  
  /* Button Hover */
  .btn:hover, .button:hover {
	  transform: scale(1.05);
  }
  
  .btn-outlined:hover {
	  background-color: var(--bg);
	  color: var(--violet);
  }
  
  .wrapper-max {
	  max-width: var(--max-w-max);
	  margin-inline: auto;
  }
  
  .wrapper-content {
	  max-width: var(--max-w-content);
	  margin-inline: auto;
	  padding-inline: var(--gutter);
  }
  
  .wrapper-text {
	  max-width: var(--max-w-text);
	  margin-inline: auto;
  }
  
  
  /**************************************************
   * 4. === Site Header ===
   **************************************************/
  .site-header-wrapper {
	  position: sticky;
	  top: 0;
	  width: 100%;
	  z-index: 1003;
	  background-color: var(--violet);
	  box-shadow: var(--shadow);
  }
  
  .site-header {
	  position: relative;
	  z-index: 10001;
	  display: grid;
	  grid-template-columns: 1fr;
	  width: 100%;
  }
  
  .site-branding {
	  align-items: center;
	  max-width: var(--max-w-max);
	  display: flex;
	  justify-content: space-between;
	  padding: 1.5rem 3rem;
	  margin-inline: auto;
	  width: 100%;
  }
  
  .site-logo img {
	  max-width: 28rem;
	  width: 100%;
	  transition: max-width 0.3s ease;
	  object-fit: cover;
  }
  
  .buttons {
	  display: flex;
	  column-gap: 2rem;
  }
  
  @media (max-width: 1024px) {
	  .site-header {
		  padding: 1rem 3rem;
		  display: flex; 
		  justify-content: space-between;
		  align-items: center;
	  }
  
	  .site-branding {
		  flex-direction: column;
		  gap: 1rem;
		  padding: 0;
		  align-items: flex-start;
	  }
	  
	  .site-logo img {
		  max-width: 20rem;
	  }
  
	  .site-header .buttons {
		  gap: 1rem;
		  display: none;
	  }
  }
  
  @media (max-width: 768px) {
	  
	  .site-header {
		  padding: 1rem 2rem;
		  display: flex; 
		  justify-content: space-between;
		  align-items: center;
	  }
	  
	  .site-branding {
		  align-items: start;
	  }
	  
	  .site-logo img {
		  max-width: 16rem!important;
	  }
  
  }
  
  @media (max-width: 500px) {
	  .site-header {
		  padding: 1rem;
	  }
  }
  
  /* === Navigation === */
  #site-navigation {
	  margin: 0 auto;
	  width: 100%;
	  background: var(--bg);
  }
  
  #primary-menu {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding: 0;
	  margin: 0;
  }
  
  #primary-menu li {
	  list-style: none;
  }
  
  #primary-menu li a {
	  padding: 1.25rem 3rem;
	  display: inline-block;
	  text-decoration: none;
	  color: var(--violet);
	  font-weight: 700;
	  transition: 0.4s;
  
  }
  
  #primary-menu li a:hover {
	  color: var(--yellow);
  }
  
  #primary-menu li a.active {
	  color: var(--yellow) !important;
  }
  
  .menu-chevron {
	  display: inline-block;
	  margin-left: 8px;
	  transition: transform 0.3s ease;
  }
  
  .menu-item-has-children:hover .menu-chevron,
  .menu-item-has-children.open .menu-chevron {
	  transform: rotate(180deg);
	  color: var(--yellow);
	  /* Rotate when the submenu is open */
  }
  
  #menu-item-48 .sub-menu,
  #menu-item-322 .sub-menu {
	  max-width: min-content;
  }
  
	.no-scroll {
	  overflow: hidden;
  	}

  /* === Hamburger Menu === */
.hamburger-wrapper {
  cursor: pointer;
  display: none;
  position: relative;
  z-index: 11000;
  background-color: var(--yellow);
  padding: 1rem;
  border-radius: var(--border-radius);
  transition: background-color 0.3s ease;
}

.hamburger {
  position: relative;
  width: 2rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  padding: 1rem;
  cursor: pointer;

  /* Hamburger Lines */
  .hamburger-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--violet);
    border-radius: 2px;
    transform: translateY(-50%);
    transition: all 0.3s ease;

    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--violet);
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    &::before {
      top: -8px;
    }

    &::after {
      top: 8px;
    }
  }

  &.on .hamburger-line {
    background-color: transparent;

    &::before {
      transform: rotate(45deg) translate(5px, 5px);
    }

    &::after {
      transform: rotate(-45deg) translate(6px, -6px);
    }
  }
}

@media (max-width: 768px) {
  .hamburger-icon {
    max-width: 2rem;
  }

  .hamburger-wrapper {
    display: block !important;
  }
}
  
  /* Submenu Container */
  .menu-item-has-children ul {
	  position: absolute;
	  display: block;
	  width: auto;
	  padding: 0;
	  overflow: hidden;
	  max-height: 0;
	  opacity: 0;
	  visibility: hidden;
	  transform: translateY(-10px);
	  transition: 
		  opacity 0.3s ease, 
		  transform 0.3s ease, 
		  max-height 0.3s ease;
  
	  background-color: var(--bg);
	  box-shadow: var(--shadow-alt);
	  border-top: 3px solid var(--violet);
	  border-bottom-left-radius: var(--border-radius);
	  border-bottom-right-radius: var(--border-radius);
  }
  
  /* Reveal submenu on hover */
  .menu-item-has-children:hover > ul {
	  opacity: 1;
	  visibility: visible;
	  transform: translateY(0);
	  max-height: 500px; /* submenu height */
  }
  
  /* Submenu Items */
  .menu-item-has-children ul li {
	  width: 100%;
	  border-top: 1px solid var(--lavender);
  }
  
  /* Submenu Links */
  .menu-item-has-children ul li a {
	  display: block;
	  width: 100%;
	  padding: 1rem;
	  color: var(--violet);
	  transition: color 0.3s ease;
  }
  
  /* Hover effect for submenu links */
  .menu-item-has-children ul li a:hover {
	  color: var(--yellow);
  }
  
  .main-navigation .menu-item:has(.sub-menu):hover .sub-menu {
	  display: flex;
	  flex-direction: column;
  }
  
  @media (max-width: 1024px) { 
	  
	  .site-header #site-navigation {
		  display: none;
	  }
	  
	  ul.sub-menu {
		  display: none;
	  }
	  
	  .hamburger-wrapper {
		  display: block;
	  }
	  
	  .site-header .buttons {
		  display: none;
	  }
	  
	  .menu-chevron {
		  display: none;
	  }
  }
  
  @media (max-width: 768px) {
	  
	  .site-logo img {
		  max-width: 16rem!important;
	  }
  }
  
/**************************************************
   * 5. === Drawer ===*
**************************************************/
.drawer {
  padding-block-start: 136px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: var(--bg);
  backdrop-filter: blur(20px);
  z-index: 1001;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
}

.drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.drawer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 2rem 3rem;
  height: 100dvh;
}

/* Acts as a spacer to space out drawer evenly*/
.drawer-wrapper::before {
  content: "";
  flex: 0; /* acts like a flexible spacer */
}

.drawer #site-navigation {
  width: 100%;
}

.drawer #site-navigation ul li a {
  color: var(--black);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  padding: 1rem;
}

.drawer #primary-menu li a::after {
  display: none;
}

.drawer .menu-main-menu-container {
  height: 100%;
}

.drawer .menu {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer .menu-item {
  width: 100%;
  border-bottom: 1px solid #0000000d;
}

.drawer .menu-item a {
  display: block;
  font-size: var(--fs-3xl);
  padding-block: 1rem;
  font-weight: 400;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer .menu-item a.active {
  font-weight: 700;
}

.drawer #site-navigation {
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Stack container */
.drawer-stack {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* All panels share the same slot */
.drawer-panel {
  width: 100%;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.drawer-panel.is-active {
  transform: translateX(0);
  display: flex;
  flex-direction: column;
}

.drawer-panel.is-right {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
}

.drawer-panel.is-left {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  display: flex;
  flex-direction: column;
}

/* Hide native sub-menus — JS builds panels instead */
.drawer .sub-menu {
  display: none !important;
}

/* Chevron button on parent items */
.drawer-chevron {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  color: var(--black);
  margin-left: auto;
}

.drawer-chevron svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.drawer .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Sub-panel */
.drawer-subpanel {
  min-width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* Back button */
.drawer-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--red);
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #0000001a;
  width: 100%;
}

.drawer-back svg {
  width: 16px;
  height: 16px;
}

.drawer-subpanel a {
  display: block;
  font-size: var(--fs-lg);
  padding: 1rem;
  font-weight: 400;
  color: var(--black);
  border-bottom: 1px solid #0000000d;
}

.drawer-subpanel-parent {
  color: var(--red) !important;
}

.drawer .buttons {
  margin-inline: auto;
}

.drawer-socials {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.drawer-socials a img {
  transition: 0.25s ease-in-out;
  cursor: pointer;
  max-width: 2rem;
  filter: invert(1);
  opacity: 0.6;
}

.drawer-credits {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.drawer-credits p, .drawer-credits a {
  margin-bottom: 0;
  font-size: var(--fs-xs);
  color: var(--gray);
}

.drawer-details {
  padding-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
  /* border-top: 0.5px solid #0000001a; */
}

.drawer-socials {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

@media (max-width: 1024px) {
  .drawer {
    padding-block-start: 140px;
  }

  .drawer-wrapper {
    padding: var(--gutter);
  }
}

@media (max-width: 768px) {
  .drawer-wrapper {
    padding: var(--gutter);
  }

  .drawer-socials {
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  .drawer {
    padding-block-start: 100px;
  }
	
  .drawer .buttons {
    flex-direction: row;
    gap: 1rem;
  }
}

@media (max-width: 500px) {
  .drawer-wrapper {
    padding: 1rem;
  }

  .drawer .menu-item a {
    font-size: clamp(1.5rem, 7vw, 2.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .drawer-subpanel a {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }
}
  
  /****************************/
  /** == ** Front Page ** == **/
  /***************************/
  
  /****************************/
  /** 6. == ** Hero Section ** == **/
  /***************************/
/*   .hero-wrapper {
	  display: flex;
	  align-items: center;
	  min-height: 70vh;
	  background: var(--bg);
	  background-size: cover;
	  background-position: center;
	  position: relative;
	  max-width: none;
  }
  
  .hero-wrapper::before {
	  z-index: 0;
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: 100%;
	  background: linear-gradient(to right, var(--violet) 35%, transparent 65%);
  }
  
  .hero-content {
	  margin-inline: auto;
	  width: 100%;
	  max-width: var(--max-w-max);	
	  position: relative;
	  z-index: 1;
  }
  
  .hero-title {
	  font-weight: 700;
	  margin-bottom: 1rem;
	  color: var(--bg);
	  max-width: 45rem;
	  opacity: 0;
		animation: fadeUp 1s ease-out forwards;
  }
  
  .hero-title span {
	  color: var(--yellow);
  }
  
  @media (max-width: 1800px) {
	  .hero-wrapper {
		  min-height: 70vh;
	  }
  }
  
  @media (max-width: 1024px) {
	  .hero-wrapper {
		  min-height: 70vh;
	  }
  }
  
  @media (max-width: 768px) {
	  .hero-wrapper {
		  padding: 2rem;
		  min-height: 60vh;
	  }
  }
  
  @media (max-width: 500px) {
	  .hero-wrapper {
		  min-height: 50vh;
	  }
  } */

.hero-wrapper {
    display: flex;
    align-items: center;
    min-height: 70vh;
    background: var(--bg);
    position: relative;
    overflow: hidden;
    max-width: none;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-wrapper::before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, var(--violet) 18%, transparent 52%);
}

.hero-content {
    margin-inline: auto;
    width: 100%;
    max-width: var(--max-w-max);
    position: relative;
    z-index: 2;
}

.hero-title {
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--bg);
    max-width: 45rem;
    opacity: 0;
    animation: fadeUp 1s ease-out forwards;
}

.hero-title span {
    color: var(--yellow);
}
@media screen and (min-width: 2000px) {
    .hero-wrapper {
        min-height: 50rem;
    }
}

@media (max-width: 1800px) {
    .hero-wrapper {
        min-height: 42rem;
    }
}

@media (max-width: 1024px) {
    .hero-wrapper {
        min-height: 30rem;
    }
}

@media (max-width: 768px) {
    .hero-wrapper {
        padding: 2rem;
        min-height: 60vh;
    }

    .hero-wrapper::before {
        background: linear-gradient(to right, rgba(86, 43, 129, 0.8) 45%, rgba(86, 43, 129, 0.35) 100%);
    }
}

@media (max-width: 600px) {
    .hero-wrapper {
        min-height: 35rem;
    }
}

  
  /****************************/
  /* 7. ** About Us **  */
  /***************************/
  
  .about-wrapper {
	  padding: 5rem;
	  position: relative;
	  min-height: 30rem;
	  background-color: var(--bg);
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  align-items: center;
	  column-gap: 4rem
  }
  
  .stacked-images {
	  position: relative;
  }
  
  .stacked-images img {
	  object-fit: cover;
	  width: 100%;
	  border-radius: var(--border-radius);
  }
  
  .about-title {
	  color: var(--violet);
  }
  
  .about-title span {
	  font-weight: 700;
  }
  
  .about-content {
	  animation: fadeUp 1s ease-out forwards;
		animation-delay: 0.3s; /* Optional: delay for effect */
	  display: flex;
	  flex-direction: column;
	  row-gap: 2rem;
  }
  .about-content p {
	  margin-bottom: 0;
  }
  
  .about-quote {
	  display: flex;
	  flex-direction: row;
	  gap: 1rem;
	  align-items: center;
	  padding: 2rem;
	  background: var(--violet);
	  border-radius: var(--border-radius);
  }
  
  .about-quote svg {
	  max-width: 2.5rem;
	  fill: rgba(255,255,255,0.5);
  }
  
  .about-quote p {
	  color: var(--bg);
  }
  
  @media (max-width: 1024px) {
	  .about-wrapper {
		  column-gap: 2rem;
		  padding: 3rem;
	  }
  }
  
  @media (max-width: 768px) {
	  .about-wrapper {
		  grid-template-columns: 1fr;
		  row-gap: 2rem;
		  padding: 2rem;
		  text-align: center;
	  }
  
	  .about-content {
		  align-items: center;
		  row-gap: 1.5rem;
	  }
  
	  .about-content a {
		  margin-inline: auto;
	  }
	  
	  .about-quote {
		  flex-direction: column;
	  }
  
	  .stacked-images img {
		  max-width: 25rem;
		  margin-inline: auto;
	  }
  
  }
  
  /****************************/
  /* 8. == ** Banner ** == **/
  /***************************/
  .banner {
	  position: relative;
	  background-color: var(--violet);
  }
  
  .banner-wrapper {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
  }
  
  .banner-card {
	  display: flex;
	  flex-direction: column;
	  gap: 1rem;
	  padding: 0rem clamp(1rem, 5vw, 5rem);
	  align-items: center;
	  animation: fadeUp 1s ease-out forwards;
		animation-delay: 0.3s; /* Optional: delay for effect */
  }
  
  .banner-card h4 {
	  font-weight: 600;
	  margin-bottom: 0rem;
  }
  
  .banner-card.chapter {
	  border-right: 1px solid var(--yellow);
  }
  
  .banner-card.volunteer {
	  border-left: 1px solid var(--yellow);
  }
  
  .banner-card img {
	  aspect-ratio: 1/1;
	  max-width: 8rem;
	  margin: 0 auto;
  }
  
  .banner-card h4,
  .banner-card p {
	  color: white;
	  text-align: center;
  }
  
  .banner-card a {
	  margin: 0 auto;
  }
  
  
  @media (max-width: 768px) {
	  .banner-wrapper {
		  grid-template-columns: repeat(1, 1fr);
		  row-gap: 0rem;
		  padding: 2rem;
	  }
  
	  .banner-card {
		  padding: 2rem;
		  border: none;
	  }
  
	  .banner-card img {
		  max-width: 6rem;
	  }
  
	  .banner-card.chapter {
		  border-right: none;
	  }
  
	  .banner-card.volunteer {
		  border-left: none;
	  }
  
	  .banner-card:not(:first-child) {
		  border-top: 1px solid var(--yellow);
	  }
  }
  
  /****************************/
  /* 9. ** Our Founder **  */
  /***************************/
  .founder {
	background-color: var(--bg);
  }

  .founder-wrapper {
	  padding: 5rem;
	  position: relative;
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  align-items: center;
	  column-gap: 4rem;
  }
  
  .founder-image img {
	  object-fit: cover;
	  object-position: top;
	  aspect-ratio: 3/2;
	  width: 100%;
	  border-radius: var(--border-radius);
  }
  
  .founder-content {
	  display: flex;
	  flex-direction: column;
	  row-gap: 2rem;
	  animation: fadeUp 1s ease-out forwards;
		animation-delay: 0.3s; /* Optional: delay for effect */
  }
  
  .founder-title {
	  color: var(--violet);
	  font-weight: 400;
  }
  
  .founder-title span {
	  font-weight: 700;
  }
  
  @media (max-width: 1024px) {
	  .founder-wrapper {
		  column-gap: 2rem;
		  padding: 3rem;
	  }
  }
  
  @media (max-width: 768px) {
	  .founder-wrapper {
		  grid-template-columns: repeat(1, 1fr);
		  row-gap: 2rem;
		  padding: 2rem;
		  text-align: center;
	  }
  
	  .founder-content {
		  align-items: center;
		  /* center content in single column */
		  row-gap: 1.5rem;
	  }
  
	  .founder-content a {
		  margin-inline: auto;
	  }
  
	  .founder-image img {
		  margin-inline: auto;
		  aspect-ratio: 3/2;
		  object-fit: cover;
		  object-position: top;
	  }
  
  }
  
  
  /****************************/
  /* ** 10. Events Section ** */
  /***************************/
  .upcoming-events-wrapper {
	  padding: 5rem;
	  position: relative;
	  background-color: var(--bg);
  }
  
  .upcoming-header {
	  display: flex;
	  align-items: center;
	  column-gap: 2rem;
	  margin-bottom: 2rem;
  }
  
  .upcoming-header hr {
	  background-color: var(--lavender);
  }
  
  .upcoming-title {
	  color: var(--violet);
	  font-weight: 400;
	  min-width: max-content;
  }
  
  .upcoming-title span {
	  font-weight: 700;
  }
  
  .upcoming-events {
	  display: grid;
	  grid-template-columns: 1fr 1fr 0.6fr;
	  gap: 1rem;
  }
  
  .upcoming-event {
	  background-color: var(--violet);
	  padding: 2rem;
	  border-radius: var(--border-radius);
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  gap: 1rem;
	  transition: 0.4s;
	  border: 3px solid var(--violet);
	  cursor: pointer;
	  animation: fadeUp 1s ease-out forwards;
		animation-delay: 0.3s; /* Optional: delay for effect */
  }
	.upcoming-event:not(.view-events) {
		align-items: start;
	}
  
  .upcoming-event:hover {
	  border: 3px solid var(--yellow);
  }
  
  .view-events {
	  background-color: var(--bg);
	  border: 3px solid var(--violet);
	  height: 100%;
  }
  
  .view-events:hover {
	border-color: var(--yellow);
  }
  
  .view-events .next-events h4, 
  .view-events .next-events p {
	  color: var(--violet) !important;
  }
  
  .view-events .next-events hr {
	  background-color: var(--violet);
  }
  
  .upcoming-event:hover img {
	  transform: scale(1.05);
  }
  
  .upcoming-event h3, .upcoming-event p {
	  color: var(--yellow);
	  margin-bottom: 0.5rem;
	  font-family: var(--ff-body);
  }
  
  .upcoming-event p {
	  font-size: var(--fs-xs);
	  text-transform: uppercase;
  }
  
  .upcoming-event h4 {
	  color: var(--bg);
  }
  
  span.venue {
	  font-size: var(--fs-base);
  }
  
  .upcoming-event img {
	  aspect-ratio: 1/1;
	  max-width: 3rem;
	  transition: 0.4s;
  }
  
  .next-events .header {
	  display: flex;
	  gap: 1rem;
	  justify-content: flex-start;
	  align-items: center;
  }
  
  .next-events p {
	  min-width: max-content;
  }
  
  .next-events hr {
	  background-color: var(--yellow);
	  max-width: 3rem;
	  margin: 0 0 0.5rem 0;
  }
  
  @media (max-width: 1024px) {
	  .upcoming-events {
		  grid-template-columns: repeat(1, 1fr);
	  }
  }
  
  @media (max-width: 768px) {
  
	  .upcoming-events-wrapper {
		  padding: 2rem;
		  /* reduce padding for small screens */
	  }
  
	  .upcoming-event {
		  padding: 1rem;
	  }
  
	  .upcoming-event img {
		  max-width: 2.5rem;
	  }
  }
  
  @media (max-width: 500px) {
	  
	  .upcoming-events-wrapper {
		  padding: 1rem;
		  /* reduce padding for small screens */
	  }
  
  }
  
  /****************************/
  /* 11. Featured Video Section */
  /***************************/
  .featured-video {
	  position: relative;
  }
  
  .featured-video::before {
	  z-index: 0;
	  content: "";
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  height: 50%;
	  width: 100%;
	  background: var(--lavender);
  }
  
  .video-header {
	  display: flex;
	  justify-content: center;
	  column-gap: 2rem;
	  margin-bottom: 3rem;
	  align-items: center;
  }
  
  .video-header p {
	  margin-bottom: 0;
  }
  
  .video-title {
	  border-right: 1px solid var(--lavender);
	  padding-right: 2rem;
	  color: var(--violet);
	  font-weight: 400;
  }
  
  .video-title span {
	  font-weight: 700;
  }
  
  .featured-video iframe {
	  border-radius: var(--border-radius);
	  width: 100%;
	  max-width: var(--max-w-content);
	  margin: 0 auto;
	  aspect-ratio: 2/1;
	  object-fit: cover;
	  position: relative;
	  z-index: 1;
  }
  
  @media (max-width: 768px) {
  
	  .featured-video-wrapper {
		  padding: 2rem;
	  }
	  
  }
  
  @media (max-width: 500px) {
  
	  .video-header {
		  flex-direction: column;
		  text-align: center
	  }
	  
	  .video-title {
		  border-right: none;
		  border-bottom: 1px solid var(--lavender);
		  padding-right: 0;
		  padding-bottom: 1rem;
		  margin-bottom: 1rem;
	  }
	  
  }
  
  
  /****************************/
  /** 12. Footer  **/
  /***************************/
  .site-footer-wrapper {
	  background-color: var(--violet);
	  padding-left: 5rem;
	  padding-top: 5rem;
	  padding-right: 5rem;
	  padding-bottom: 1rem;
  }
  
  .site-footer {
	  display: flex;
	  flex-direction: column;
	  row-gap: 1rem;
	  max-width: var(--max-w-max);
	  margin-inline: auto;
	  width: 100%;
  }
  
  .footer-branding {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
  }
  
  .footer-socials {
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  gap: 1rem;
	  max-width: 5rem;
  }
  
  .site-footer #site-navigation {
	  background-color: var(--violet);
  }
  
  .site-footer #primary-menu li a {
	  color: var(--bg);
	  font-size: var(--fs-sm);
  }
  
  .footer-credits p {
	  text-align: center;
	  color: var(--lavender)!important;
  }
  
  .footer-credits a {
	  color: var(---lavender);
  }
  
  .site-footer #site-navigation .menu-item-has-children ul {
	  display: none;
  }
  
  .site-footer .menu-chevron {
	  display: none;
  }
  
  @media (max-width: 900px) {
	  .site-footer #primary-menu {
		  flex-direction: column;
	  }
  }
  
  @media (max-width: 768px) {
	  .site-footer-wrapper {
		  padding-left: 2rem;
		  padding-right: 2rem;
		  padding-top: 3rem;
	  }
  
	  .footer-branding {
		  flex-direction: column;
		  row-gap: 1rem;
		  justify-content: center;
	  }
	  
	  .site-footer #primary-menu li a {
	  font-size: var(--fs-base);
  }
  
	  .site-footer {
		  row-gap: 2rem;
	  }
  
  /* 	.site-footer #site-navigation {
		  margin-top: 2rem;
	  } */
  }
  
  /****************************/
  /** 13. Admin Buttons  **/
  /***************************/
  
  .admin-slideout-container {
  position: fixed;
  bottom: 1.11rem;
  left: 0;
  z-index: 9998;
  width: 13.89rem;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  .admin-slideout-container.is-open {
  transform: translateX(0);
  }
  .admin-slideout-toggle {
  position: absolute;
  top: 0;
  left: 100%;
  width: 1.39rem;
  height: 1.67rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0.44rem 0.44rem 0;
  cursor: pointer;
  box-shadow: 0.11rem 0 0.28rem oklch(14.5% 0 0 / 10%);
  transition: background-color 0.3s ease;
  background-color: var(--yellow);
  color: oklch(14.5% 0 0);
  }
  .admin-slideout-toggle:hover {
  background-color: oklch(85.2% 0.199 91.936);
  }
  .admin-slideout-container.is-open .admin-slideout-toggle {
  background-color: var(--violet);
  color: var(--yellow);
  }
  .admin-slideout-icon {
  font-size: 1rem;
  font-weight: bold;
  }
  .admin-button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.33rem;
  padding: 0.67rem;
  background-color: var(--violet);
  border-radius: 0 0 0.56rem 0;
  box-shadow: 0 0 0.56rem oklch(14.5% 0 0 / 20%);
  }
  .admin-button-grid a {
  text-decoration: none!important;
  }
  .admin-button {
  padding: 0.44rem 0.67rem;
  text-decoration: none;
  border-radius: 0.28rem;
  font-size: 0.72rem;
  font-family: sans-serif;
  transition: all 0.3s ease;
  border-width: 0.11rem;
  border-style: solid;
  text-align: center;
  }
  .admin-button-dashboard {
  grid-column: 1 / -1;
  background-color: var(--yellow);
  }
  .admin-button-edit-page {
  background-color: var(--yellow);
  }
  .admin-button-edit-theme {
  background-color: var(--yellow);
  }
  
  /* === Inside Pages === */
  
  .inner-container {
	  max-width: var(--max-w-content);
	  margin: 0 auto;
	  padding: 4rem;
	  width: 100%;
  }
  
  .entry-header {
	  display: none;
  }
  
  .content ul li {
	  color: var(--gray);
  }
  
  .content a {
	  color: var(--violet);
	  text-decoration: underline;
	  font-weight: 600;
  }
  
  .image-right img {
	   position: absolute;
	  top: -4rem;
	  right: -4rem;
	  z-index: -1;
	  max-width: 50rem !important;
	  width: 100%;
  }
  
  .image-left img {
	  position: absolute;
	  top: -4rem;
	  left: -4rem;
	  object-fit: cover;
	  transform: scaleX(-1);
	  z-index: -1;
	  max-width: 50rem !important;
	  width: 100%;
  }
  
  .current-chapters p {
	  margin-bottom: 0.3rem !important;
  }
  
  /*  Kadence */
  .wp-block-embed iframe {
	  height: 100% !important;
	  width: 100% !important;
	  aspect-ratio: 16/9;
	  border-radius: var(--border-radius);
  }
  
  .kt-blocks-accordion-header {
	  border-radius: var(--border-radius) !important;
  }
  
  .kt-accordion-panel-inner {
	  margin-top: 1rem;
  }
  
  /*  Kadence End */
  @media (max-width: 768px) {
	  .inner-container {
			  padding: 3rem;
	  }
	  
	  .image-left img {
		  top: -3rem;
		  left: -3rem;
	  }
	  
	   .image-right img {
		  top: -3rem;
		  right: -3rem;
	  }
  }
  
  @media (max-width: 500px) {
	  .inner-container {
			  padding: 2rem;
	  }
	  
	  .image-left img {
		  top: -2rem;
		  left: -2rem;
	  }
	  
	   .image-right img {
		  top: -2rem;
		  right: -2rem;
	  }
  }
  
  /*  === Map SVG === */
  .mapsvg-wrap .mapsvg {
	  border-radius: var(--border-radius);
  }
  
  .mapsvg-controller-container {
	  border-radius: var(--border-radius); 
	  overflow: hidden !important;
  }
  
  #mapsvg-map-4 .mapsvg-sidebar-left {
	  box-shadow: none !important;
	  overflow: hidden;
	  border-radius: var(--border-radius);
  }
  
  .mapsvg-directory-item {
	  padding: 12px !important;
	  border-bottom: 1px solid var(--lavender);
  }
  
  .mapsvg-map-container .mapsvg-controller-view-content {
	  padding: var(--gutter) !important;
  }
  
  .mapsvg-popover-close {
	  top: 1rem !important;
	  right: 1rem !important;
  }
  
  /* === Events === */
  .tribe-events-c-events-bar {
	  border-radius: var(--border-radius);
	  overflow: hidden;
	  border: 1px solid var(--violet);
  }
  
  /* === 404 Error Page === */
  .upcoming-events-wrapper {
	  position: relative;
	  background-color: var(--bg);
  }
  
  .error-page {
	  text-align: center;
  }
  
  /* === Keyframes === */
  /* Fade Up */
  @keyframes fadeUp {
	0% {
	  opacity: 0;
	  transform: translateY(20px);
	}
	100% {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  /* === Live Fixes === */
  
  /* === Testimonials ===  */
  .testimonial {
	  margin: 0 0 2rem 0;
		  background: var(--bg);
	  padding: 2rem;
	  border-radius: var(--border-radius);
	  color: var(--violet);
	  border: 1px solid rgba(55, 0, 117, 0.15);
  }
  
  .testimonial-name {
	  font-weight: bold;
  }
  
  .testimonial-heading {
	  display: none;
  }
  
  .testimonial-content p {
	  color: var(--violet);
  }
  
  /* === Gravity Forms === */
  .gf-form-title {
	  font-weight: bold;
	  margin-bottom: 2rem;
	  color: var(--violet);
  }
  
  .gform-body input, .gform-body textarea {
	  border: none;
	  padding: 1rem !important;
	  border-radius: 1rem;
	  background: var(--bg);
	  border: 1px solid rgba(55, 0, 117, 0.15);
  }
  
  .gform-body input:focus-visible, .gform-body textarea:focus-visible {
	  outline: 1px solid rgba(55, 0, 117, 0.15);
  }
  
  .button {
	  border: none;
  }
  
  .gfield_label {
	  color: var(--violet);
  }
  
  .gfield_required {
	  color: var(--yellow) !important;
  }