/*
 Theme Name:   BotWithBars
 Template:     Entro
 Description:  BotWithBars
 Version:      1.4
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 */
 /* Brand token */
:root {
  --bwb-brand: #034141;
}
    .menu-wrap-off
{
display: none !important;    
}
.cky-consent-container:not(.pageLoaded), .wp-dark-mode-floating-switch:not(.pageLoaded), .cky-btn-revisit-wrapper:not(.pageLoaded)
{
 display: none;   
}
div:has(>.grecaptcha-badge)
{
    display: none;
}
header > div > div
{
    visibility: visible !IMPORTANT;
    opacity: 1 !IMPORTANT;
}
  .bwb-tools-banner{
    --bwb-primary:#013f40;
    margin: 40px 0;
    --bwb-text:#0f1f1f;
    --bwb-muted:rgba(15,31,31,.72);
    --bwb-border:rgba(1,63,64,.16);
    --bwb-shadow:0 18px 55px rgba(0,0,0,.08);
    width:100%;
    background:#faf6f6;
    border:1px solid var(--bwb-border);
    border-radius:18px;
    box-shadow:var(--bwb-shadow);
    overflow:hidden;
  }

  .bwb-tools-banner__inner{
    margin: 0 auto;
    padding: clamp(16px, 2.2vw, 26px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: clamp(14px, 2vw, 22px);
    position:relative;
  }

  /* subtle brand accent */
  .bwb-tools-banner__inner::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:6px;
    background: linear-gradient(180deg, var(--bwb-primary), rgba(1,63,64,.55));
  }

  .bwb-tools-banner__content{
    padding-left: 12px; /* keeps text off the accent bar */
    min-width: 0;
  }

  .bwb-tools-banner__p{
    margin:0;
    color:var(--bwb-text);
    font-size: clamp(0.98rem, 0.75vw + 0.92rem, 1.26rem);
    line-height: 1.65;
    letter-spacing: .1px;
  }

  .bwb-tools-banner__p + .bwb-tools-banner__p{
    margin-top: 10px;
  }

  .bwb-tools-banner__p--muted{
    color:var(--bwb-muted);
  }

  .bwb-tools-banner__actions{
    flex: 0 0 auto;
    display:flex;
    align-items:center;
  }
.easyel-content-container > div > .elementor-element, .easyel-content-container > div , footer, body
{
	background: #e3e3e3 !important;
}
 .lyricsAndDescriptionSection .descriptionSection
 {
     	background: #eaeaea !important;
 }
 .lyricsAndDescriptionSection .lyricsSection
 {
     	background: #ececec !important;
 }
  .bwb-tools-banner__btn{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 30px 9px;
    border-radius: 14px;
    background: var(--bwb-primary);
    color: #fbfbfb;
    text-decoration:none;
    font-weight: 800;
    letter-spacing: .2px;
    border: 1px solid rgba(1,63,64,.18);
    box-shadow: 0 12px 26px rgba(1,63,64,.18);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    white-space: nowrap;
  }

  .bwb-tools-banner__btn:hover{
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 14px 30px rgba(1,63,64,.22);
  }

  .bwb-tools-banner__btn:active{
    transform: translateY(0);
    filter: brightness(.98);
  }

  .bwb-tools-banner__btn:focus-visible{
    outline: 3px solid rgba(1,63,64,.25);
    outline-offset: 3px;
  }

  .bwb-tools-banner__arrow{
    font-size: 1.05em;
    transform: translateY(-.5px);
  }

  /* Responsive: stack and make the button full-width on small screens */
  @media (max-width: 720px){
    .bwb-tools-banner__inner{
      flex-direction: column;
      align-items: stretch;
    }
    .bwb-tools-banner__btn{
      width: 100%;
      justify-content: center;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .bwb-tools-banner__btn{ transition:none; }
    .bwb-tools-banner__btn:hover{ transform:none; }
  }

html.wp-dark-mode-active .bwb-listicle__wrap
{
  filter: invert(0.1);
  background: white;
}

html.wp-dark-mode-active .bwb-tools-banner
{
	  filter: invert(0.1);
}

html.wp-dark-mode-active .bwb-card:hover
{
	box-shadow: rgb(13 13 13) 0px 14px 34px;
    border-color: rgb(129 124 113);
}
.bwb-card
{
	background:#eeeeee !important;
}
html.wp-dark-mode-active .bwb-listicle__wrap .bwb-listicle__items
{
	  filter: invert(0.1);
		color:white !important;
	border-radius:20px;
  background: white;
}

html.wp-dark-mode-active #page .swai-popup .tag.is-selected {
  border: 2px solid #4b5563;      /* dark gray */
  background: #f3f4f6;
  box-shadow: 0px 0px 0px 3px white !important;
}
html.wp-dark-mode-active .recentBlogs .grid-item, 
html.wp-dark-mode-active .blogsGrid .grid-item, 
html.wp-dark-mode-active .homepageCards .eel-sticky-section, 
html.wp-dark-mode-active .homepageFAQs .eel-faq-item , 
html.wp-dark-mode-active .homepageForm .elementor-widget-metform,
html.wp-dark-mode-active .saih-panel,
html.wp-dark-mode-active  .bwb-support-section,
html.wp-dark-mode-active .bwb-tagline,
html.wp-dark-mode-active .saih-tab,
html.wp-dark-mode-active  .bwb-scroll-indicator__icon
{
	filter: invert(0.1);
}
.ee--blog-content-wrap
{
	width:100% !important;
}
html.wp-dark-mode-active #swai-stage1, html.wp-dark-mode-active #swai-stage2:not(:has(.swai-popup[style='display: block;'])),  html.wp-dark-mode-active #swai-stage2:not(:has(.swai-popup[style='display: block;'])) .swai-field
{
	filter: invert(0.1);
}

html.wp-dark-mode-active .swai-popup .inner, html.wp-dark-mode-active .swai-recs-btn
{
	background-color: white !important;
	filter: invert(0.75) !important;
}

html.wp-dark-mode-active .bwb-tagline, html.wp-dark-mode-active .bwb-image-caption, html.wp-dark-mode-active .bwb-donation-placeholder{
	background-color: white !important;
	filter: invert(0.8) !important;
}

html.wp-dark-mode-active .homepageCards svg.e-font-icon-svg, html.wp-dark-mode-active .eel--read-more svg 
{
    filter: invert(0.8) !important;
}

.homepageForm .e-con-inner
{
	border-radius:20px;
	padding: 40px 30px;
	background: #f6f4f0;
}
html.wp-dark-mode-active .homepageForm .e-con-inner
{
	filter: invert(0.07);
}
 html.wp-dark-mode-active .lyricsAndDescriptionSection .lyricsSection, html.wp-dark-mode-active .lyricsAndDescriptionSection .descriptionSection
{
		background-color: white !important;
	
	filter: invert(0.7);
}
html.wp-dark-mode-active .swai-lyrics-marker
{
			background-color: white !important;
			filter: invert(1);
}
.bwb-donation-placeholder p
{
	font-size:18px !important;
}
.saih-steps .saih-panel
{
	filter: invert(0.02);
}



html.wp-dark-mode-active footer li svg
{
		filter: invert(1);
}


html.wp-dark-mode-active .mf-btn-wraper , html.wp-dark-mode-active #donateBTN button, html.wp-dark-mode-active .swai-actions #swai-next, html.wp-dark-mode-active .saih-tab,  html.wp-dark-mode-active a:has(>.eel-button-text), html.wp-dark-mode-active #page .bwb-scroll-wrapper button, html.wp-dark-mode-active #page .swai-popup .swai-popup-more, html.wp-dark-mode-active #page .swai-btn.close, html.wp-dark-mode-active #swai-back, html.wp-dark-mode-active #swai-generate, html.wp-dark-mode-active #swai-refresh, html.wp-dark-mode-active #page .swai-addtag, html.wp-dark-mode-active #swai-busy .swai-busy-cancel
{
background-color:#013f40 !important;
}
html.wp-dark-mode-active:not([data-wp-dark-mode-preset="0"]) body a:not(.wp-dark-mode-ignore,.wp-dark-mode-ignore *,.button,.btn,.wp-element-button,.wp-block-button__link), html[data-wp-dark-mode-active]:not([data-wp-dark-mode-preset="0"]) body a:not(.wp-dark-mode-ignore,.wp-dark-mode-ignore *,.button,.btn,.wp-element-button,.wp-block-button__link), html[data-wp-dark-mode-loading]:not([data-wp-dark-mode-preset="0"]) body a:not(.wp-dark-mode-ignore,.wp-dark-mode-ignore *,.button,.btn,.wp-element-button,.wp-block-button__link)
{
color:white !important;
}
html.wp-dark-mode-active #swai-busy .swai-busy-cancel
{opacity: 1 !important;}
    html.wp-dark-mode-active #page .saih-tab[aria-selected="true"] {
      background: color-mix(in srgb, var(--saih-brand) 12%, #fbfbfb 88%);
      border-color: var(--saih-brand);
      box-shadow: 0 0 0 4px var(--saih-ring);
    }
.swai-busy-cancel
{
	display:none;
}
.saih-card h4
{
font-size:20px !important;
margin-bottom:20px !important;
}
.cky-revisit-bottom-left {
    left: 15px !important;
    bottom: 15px ! IMPORTANT;
}
.wp-dark-mode-floating-switch
{
    left: 100px !important;
    bottom: 33px !important;
    zoom: 0.8;  
	z-index: 999999;
}
.maxWidth
{
    width:100%;
}
.givewp-donation-form-modal__overlay
{
height:100% !important;
}

.givewp-donation-form-modal__overlay
{
    z-index: 9999999999999;
}
.bwb-support-section {
      --bwb-primary: #004040;
      --bwb-primary-soft: #e0f0f0;
      --bwb-bg: #f5faf9;
      --bwb-text-main: #0c1414;
      --bwb-text-muted: #4e5a5a;
      --bwb-border: #c2d6d6;
      --bwb-radius-lg: 18px;
      --bwb-radius-md: 12px;
      --bwb-shadow-soft: 0 18px 45px rgba(0, 64, 64, 0.16);
      position: relative;
      margin: 0rem auto;
      padding: clamp(2.25rem, 3.5vw, 3rem);
      background: radial-gradient(circle at top left, #fbfbfb 0, #f5faf9 40%, #edf7f5 100%);
      border-radius: var(--bwb-radius-lg);
      box-shadow: var(--bwb-shadow-soft);
      color: var(--bwb-text-main);
      font-family: inherit;
      overflow: hidden;
    }

    .bwb-support-section::before {
      content: "";
      position: absolute;
      inset: -40%;
      background: radial-gradient(circle at top right, rgba(0, 64, 64, 0.06), transparent 60%);
      opacity: 1;
      pointer-events: none;
    }

    .bwb-support-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .bwb-tagline {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--bwb-primary);
      background: rgba(0, 64, 64, 0.06);
      border-radius: 999px;
      padding: 0.35rem 0.9rem;
      width: fit-content;
    }

    .bwb-tagline-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--bwb-primary);
      box-shadow: 0 0 0 4px rgba(0, 64, 64, 0.2);
    }

    .bwb-support-title {
      font-size: clamp(1.9rem, 3vw, 2.4rem);
      line-height: 1.15;
      margin: 0.75rem 0 0.6rem;
      color: var(--bwb-primary);
    }

    .bwb-support-lead {
      font-size: 1.1rem;
      line-height: 1.6;
      color: var(--bwb-text-main);
      margin: 0 0 0.8rem;
    }

    .bwb-support-lead em {
      font-style: normal;
      font-weight: 600;
      color: var(--bwb-primary);
    }

    .bwb-support-bullets {
      margin: 0.5rem 0 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      font-size: 1.1rem;
      color: var(--bwb-text-main);
    }

    .bwb-support-bullets li {
      display: flex;
      align-items: flex-start;
      gap: 0.55rem;
    }

    .bwb-support-bullets-icon {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--bwb-primary-soft);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      color: var(--bwb-primary);
      margin-top: 2px;
    }

    .bwb-cta-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 0.75rem 1.5rem;
      margin-top: 1.1rem;
    }

    .bwb-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      border-radius: 999px;
      background: var(--bwb-primary);
      border: none;
      color: #fbfbfb;
      font-size: 0.94rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(0, 64, 64, 0.35);
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
      text-decoration: none;
    }

    .bwb-btn:hover,
    .bwb-btn:focus-visible {
      background: #006666;
      transform: translateY(-1px);
      box-shadow: 0 14px 32px rgba(0, 64, 64, 0.4);
      outline: none;
    }

    .bwb-btn:active {
      transform: translateY(0);
      box-shadow: 0 6px 16px rgba(0, 64, 64, 0.35);
    }

    .bwb-btn-icon {
      font-size: 1rem;
      transform: translateY(1px);
    }

    .bwb-cta-note {
      font-size: 1.1rem;
      color: var(--bwb-text-muted);
      text-align: center;
    }

    .bwb-section-subtitle {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--bwb-primary);
      margin: 0.3rem 0 0.5rem;
    }

    .bwb-paragraph {
      font-size: 1.2rem;
      line-height: 1.6;
      color: var(--bwb-text-main);
      margin: 0.2rem 0 0.5rem;
    }

    .bwb-list {
      list-style: none;
      padding: 0;
      margin: 0.3rem 0 0.5rem;
      font-size: 1.1rem;
      color: var(--bwb-text-main);
      line-height: 2rem;
    }

    .bwb-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.4rem;
      margin-bottom: 0.25rem;
    }

    .bwb-list-icon {
      flex: 0 0 auto;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid rgba(0, 64, 64, 0.25);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      color: var(--bwb-primary);
      margin-top: 7px;
    }

    /* Image blocks – single column */
    .bwb-image-block {
      border-radius: var(--bwb-radius-md);
      overflow: hidden;
      border: 1px solid rgba(0, 64, 64, 0.12);
      background: #000;
      box-shadow: 0 14px 30px rgba(0, 64, 64, 0.18);
    }

    .bwb-image-block + .bwb-image-block {
      margin-top: 1rem;
    }

    .bwb-image-block img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
      transform: scale(1.02);
      transition: transform 0.4s ease-out;
    }

    .bwb-support-section:hover .bwb-image-block img {
      transform: scale(1.06);
    }

    .bwb-image-caption {
      padding: 0.7rem 0.9rem 0.8rem;
      background: rgba(255, 255, 255, 0.96);
      font-size: 1.2rem;
      color: var(--bwb-text-muted);
    }

    .bwb-image-caption strong {
      color: var(--bwb-primary);
    }

    /* Form area */
    .bwb-support-form {
      margin-top: 1.5rem;
      padding-top: 1.6rem;
      border-top: 1px solid rgba(0, 64, 64, 0.16);
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }

    .bwb-support-form h2 {
      margin: 0;
      font-size: 1.5rem;
      color: var(--bwb-primary);
    }

    .bwb-donation-placeholder {
      margin-top: 0.8rem;
      padding: 1.1rem 1rem;
      border-radius: var(--bwb-radius-md);
      border: 1px dashed var(--bwb-border);
      background: rgba(255, 255, 255, 0.9);
      font-size: 0.9rem;
      color: var(--bwb-text-muted);
      text-align: center;
    }

    .bwb-form-note {
      font-size: 0.86rem;
      color: var(--bwb-text-muted);
      margin-top: 0.4rem;
    }

    /* Legal section */
    .bwb-legal-block {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      line-height: 1.6;
      color: var(--bwb-text-muted);
    }

    .bwb-legal-heading {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--bwb-primary);
      margin-bottom: 0.3rem;
    }

    .bwb-legal-small {
      font-size: 0.8rem;
      color: var(--bwb-text-muted);
      margin-top: 0.6rem;
    }

    .bwb-legal-small a {
      color: var(--bwb-primary);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }

    .bwb-legal-small a:hover {
      text-decoration-thickness: 2px;
    }
.single-post .ps-navigation
{
        max-width: 1300px;
        margin: auto;
        padding: 30px !important;
}

/* Wrapper so you can center it easily inside any section */
.bwb-scroll-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(3.5rem, 4vw, 2.5rem);
}

/* Button */
.bwb-scroll-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(3, 65, 65, 0.25);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bwb-brand);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

/* Circular icon container */
.bwb-scroll-indicator__icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 1px solid rgba(3, 65, 65, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 0%, #fbfbfb, #e5f4f3);
}

/* Chevron arrow */
.bwb-scroll-indicator__chevron {
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--bwb-brand);
  border-bottom: 2px solid var(--bwb-brand);
  transform: rotate(45deg);
  animation: bwb-scroll-bounce 1.5s infinite;
}

/* Button hover/focus */
.bwb-scroll-indicator:hover {
  transform: translateY(2px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.15);
  background: #fbfbfb;
  border-color: rgba(3, 65, 65, 0.4);
}

.bwb-scroll-indicator:focus-visible {
  outline: 2px solid var(--bwb-brand);
  outline-offset: 3px;
}

/* Text */
.bwb-scroll-indicator__text {
  white-space: nowrap;
  opacity: 0.85;
}

/* Slight responsive tweak for mobile */
@media (max-width: 600px) {
	.homepageForm .e-con-inner
{
	padding: 20px 15px;
	background: #f6f4f0;
}
	/* Main content paragraphs */
.lyricsAndDescriptionSection .lyricsSection p:not(:first-child),
.lyricsAndDescriptionSection .descriptionSection p:not(:first-child) {
  margin-top: 0.1rem;
  font-size: 18px !important;
  line-height: 32px;
}

	.single-post .ps-navigation ul
	{
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding: 50px 0px !important;
	}
	.single .ps-navigation .prev, .single .ps-navigation .next
	{
		width:100% !important;
	}
  .bwb-scroll-indicator {
    padding: 0.45rem 0.9rem;
    gap: 0.45rem;
    font-size: 0.7rem;
  }

  .bwb-scroll-indicator__icon {
    width: 1.9rem;
    height: 1.9rem;
  }
}

/* Subtle bounce animation */
@keyframes bwb-scroll-bounce {
  0%,
  100% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(5px) rotate(45deg);
  }
}

  .headerSocials div > span
 {
    opacity: 0.6;
    
 }
  .headerSocials div > span:hover
 {
    opacity: 0.9; 
 }
.cky-revisit-bottom-left
{
 left:25px !important;
 bottom: 18px !IMPORTANT;
}
footer .eel-site-logo-added a
{
        display: flex;
    justify-content: center;
}
.donate-button
{
    background-color: unset !important;
    padding:10px 50px;
}
header.eel-sticky-header-on.eel-up-scroll, header.eel-sticky-header-on.eel--fixed-top-sticky, header.eel-sticky-header-on.eel-up-scroll .eel-nav-menu__layout-horizontal .eel-nav-menu .sub-menu:not(.easyel--elementor-template-mega-menu)
{
	background-color:var(--e-global-color-primary) !important;
}
.elementor-element-6f894f8
{
	padding:0;
}
.elementor-2211 .elementor-element.elementor-element-22ea238 img
{
	min-width:250px;
}
.elementor-2211 .elementor-element.elementor-element-22ea238
{
	padding:0 !important;
}
header.eel-sticky-header-on.eel-up-scroll .e-con-inner
{
	padding:5px !important;
}
 #saih-how-title
  {
      color:white !important;
  }
  .saih-hero
  {
      margin-top:60px;
      background: #013f40 !important;
  }
  .saih-steps
  {
      DISPLAY: FLEX ! IMPORTANT;
    FLEX-DIRECTION: column;
  }
    /* ========== SCOPE EVERYTHING UNDER .saih-how ========== */
    .saih-how {
      /* Brand + design tokens (scoped) */
      --saih-brand: #013f40;
      --saih-ink: #0b1324;
      --saih-ink-dim: #4b5563;
      --saih-bg: #f6fbfa;
      --saih-card: #fbfbfb;
      --saih-ring: #c7e7e1;
      --saih-ok: #10b981;
      --saih-warn: #f59e0b;
      --saih-danger: #ef4444;

      --saih-pad: clamp(16px, 3vw, 28px);
         max-width: var(--content-width);
      margin: 0 auto 48px;
      padding: 0 5px;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--saih-ink);
    }

    /* -------- Hero / header -------- */
    .saih-hero {
      margin-top: 60px;
      position: relative;
      padding: 32px var(--saih-pad);
      border-radius: 18px;
      background:
        radial-gradient(1200px 1200px at 110% -10%, #86efe8 0%, transparent 60%),
        radial-gradient(800px 800px at -10% 110%, #b8f4ea 0%, transparent 60%),
        linear-gradient(160deg,
          color-mix(in srgb, var(--saih-brand) 98%, #000 0%) 0%,
          color-mix(in srgb, var(--saih-brand) 80%, #fbfbfb 20%) 100%);
      color: #eaffff;
      overflow: hidden;
      box-shadow: 0 20px 45px rgba(1,63,64,.25);
      isolation: isolate;
    }
    .saih-hero h2#saih-how-title { color: #fbfbfb; margin: 0 0 4px; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .2px; }
    .saih-hero p { margin: 6px 0 0; color: color-mix(in srgb, #fbfbfb 85%, #eaffff 15%); font-size: clamp(14px, 1.4vw, 16px); }

    /* Decorative bubbles */
    .saih-hero::after {
      content: "";
      position: absolute; inset: -40% -10% auto auto;
      width: 55vmax; height: 55vmax; border-radius: 50%;
      background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
      pointer-events: none; mix-blend-mode: overlay;
      transform: translate3d(0,0,0);
    }

    /* -------- Stepper tabs + progress -------- */
    .saih-tabs {
      display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 8px; position: relative;
    }
    .saih-tab {
      appearance: none; border: 1px solid color-mix(in srgb, var(--saih-brand) 30%, #fbfbfb 70%);
      background: #fbfbfb; color: var(--saih-ink); padding: 9px 12px; border-radius: 999px;
      font-weight: 700; font-size: 14px; cursor: pointer;
      transition: transform .12s ease, border-color .2s, box-shadow .2s, background .2s;
    }
    .saih-tab[aria-selected="true"] {
      background: color-mix(in srgb, var(--saih-brand) 12%, #fbfbfb 88%);
      border-color: var(--saih-brand);
      box-shadow: 0 0 0 4px var(--saih-ring);
    }
    .saih-tab:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--saih-ring); }

    .saih-progress {
      width: 100%; height: 4px; background: #eaf7f4; border-radius: 999px; overflow: hidden; margin-top: 6px;
    }
    .saih-progress > i {
      display: block; height: 100%; width: 33.33%;
      background: linear-gradient(90deg, color-mix(in srgb, var(--saih-brand) 25%, #fbfbfb 75%), var(--saih-brand));
      transform: translateX(0%); transition: transform .35s ease;
    }

    /* -------- Layout -------- */
    .saih-steps { margin-top: 18px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
    @media (max-width: 900px) { 
        .elementor-2364 .elementor-element.elementor-element-09a37cd
        {
            --width: 65%;
        }
        .elementor-2364 .elementor-element.elementor-element-7a63e00
        {
            --width: 35%;
        }
        header .elementor-social-icon:last-child
        {
            font-size:20px;
        }
      .headerSocials div > span
 {
    opacity: 0.8;
    
 }
      .headerSocials div > span{
      max-width:60px;
      }
    
    .saih-steps { grid-template-columns: 1fr; } }

    /* -------- Panels (left) -------- */
    .saih-panel {
      background: var(--saih-card); border: 1px solid #e6ebef; border-radius: 14px;
      padding: 16px; box-shadow: 0 10px 24px rgba(1,63,64,.06);
    }
    .saih-panel h3 { margin: 0 0 6px; font-size: 18px; }
    .saih-muted { color: var(--saih-ink-dim); font-size: 14px; margin-top: -2px; }

    .saih-list { margin: 12px 0 8px; padding: 0; list-style: none; }
    .saih-list li { position: relative; padding-left: 20px; margin: 10px 0; line-height: 1.5; }
    .saih-list li::before {
      content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%;
      background: var(--saih-brand);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--saih-brand) 20%, #fbfbfb 80%);
    }

    /* -------- Side (right) -------- */
    .saih-side {
      background: #0f1e1f; color: #e8f5f5; border-radius: 16px; border: 1px solid #1a3434;
      padding: 16px; box-shadow: 0 16px 35px rgba(1,63,64,.35); position: sticky; top: 24px;
    }
    @media (max-width: 900px) { .saih-side { position: static; } }
    .saih-side h4 { margin: 0 0 10px; font-size: 15px; color: #d9ffff; }
    .saih-cheat { list-style: none; margin: 0; padding: 0; }
    .saih-cheat li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; margin: 10px 0; }
    .saih-dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fbfbfb 0 15%, #8ff1f1 16% 55%, transparent 56%),
                  radial-gradient(circle at 60% 60%, #23cabf 0 45%, #139188 46% 100%); }

    /* -------- Micro demos (scoped) -------- */
    .saih-demo { margin-top: 10px; background: #f5faf9; border: 1px dashed #c2ddd9; border-radius: 12px; padding: 10px; }
    .saih-row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
    @media (max-width: 640px) { .saih-row { grid-template-columns: 1fr; } }

    /* Demo: theme + trending pills */
    .saih-theme { display: grid; gap: 6px; }
    .saih-input {
      padding: 10px 12px; border: 1px solid #cfe3e2; border-radius: 10px; background: #fbfbfb;
      box-shadow: 0 1px 0 rgba(1,63,64,.05) inset; font-size: 14px;
    }
    .saih-pills { display: flex; flex-wrap: wrap; gap: 6px; }
    .saih-pill {
      position: relative; overflow: hidden;
      padding: 6px 10px; border-radius: 999px; border: 1px solid #d5efee; background: #f0fbfb; color: var(--saih-brand);
      font-size: 12px; cursor: pointer; user-select: none; transition: transform .12s ease, background .2s;
    }
    .saih-pill:active { transform: scale(.98); }
    .saih-pill::after { /* ripple */
      content: ""; position: absolute; inset: 0; translate: -50% -50%; width: 0; height: 0; border-radius: 50%;
      background: color-mix(in srgb, var(--saih-brand) 10%, #fbfbfb 90%); opacity: .65; pointer-events: none;
      transition: width .4s ease, height .4s ease, opacity .4s ease;
    }
    .saih-pill.is-rippling::after { width: 220%; height: 220%; opacity: 0; }

    /* Demo: genres (cap 3) */
    .saih-genres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
    @media (max-width: 880px) { .saih-genres { grid-template-columns: repeat(3, 1fr); } }
    .saih-genre {
      border: 1px solid #cfe3e2; background: #fbfbfb; border-radius: 10px; padding: 8px 10px; font-size: 12px; cursor: pointer;
      transition: background .2s, border-color .2s, transform .12s ease; position: relative;
    }
    .saih-genre.active { background: color-mix(in srgb, var(--saih-brand) 10%, #fbfbfb 90%); border-color: var(--saih-brand); }
    .saih-genre.active::after { content: "☓"; position: absolute; right: 8px; top: 6px; font-size: 12px; color: var(--saih-brand); }
    .saih-genre.locked { opacity: .45; cursor: not-allowed; }

    /* Demo: tag chips + explore */
    .saih-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; min-height: 34px; }
    .saih-tag {
      display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px;
      border: 1px solid #cfe3e2; border-radius: 999px; background: #fbfbfb; font-size: 12px;
    }
    .saih-tag .mv, .saih-tag .del {
      border: 0; background: none; cursor: pointer; padding: 0 2px; font-size: 14px; color: var(--saih-brand);
    }
    .saih-sm { display: inline-flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
    .saih-btn {
      appearance: none; border: 1px solid var(--saih-brand); background: var(--saih-brand); color: #eaffff;
      padding: 8px 12px; border-radius: 10px; font-weight: 800; font-size: 13px; letter-spacing: .2px;
      cursor: pointer; transition: transform .12s ease, filter .2s, box-shadow .2s; box-shadow: 0 10px 18px rgba(1,63,64,.18);
    }
    .saih-btn.ghost {
      background: transparent; color: var(--saih-brand); border-color: color-mix(in srgb, var(--saih-brand) 50%, #fbfbfb 50%);
    }
    .saih-btn:active { transform: translateY(1px); }

    /* Modal */
    .saih-modal[hidden] { display: none !important; }
    .saih-modal {
      position: fixed; inset: 0; background: rgba(1,29,30,.55);
      display: grid; place-items: center; z-index: 9999;
    }
    .saih-modal .saih-card {
      width: min(640px, 92vw); background: #fbfbfb; border-radius: 14px; padding: 14px;
      border: 1px solid #dbe9e9; box-shadow: 0 30px 60px rgba(1,63,64,.35);
    }
    .saih-modal .saih-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .saih-sug {
      border: 1px solid #d9eeee; background: #f7ffff; color: var(--saih-brand);
      padding: 6px 10px; border-radius: 999px; cursor: pointer; font-size: 12px;
    }

    /* Demo: output */
    .saih-output {
      border: 1px solid #dbe9e9; background: #f8fdfc; border-radius: 12px; padding: 10px; margin-top: 10px;
      max-height: 280px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
      opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease;
    }
    .saih-output.is-visible { opacity: 1; transform: translateY(0); }
    .saih-output h5 { margin: 8px 0 4px; font-size: 13px; color: var(--saih-brand); }
    .saih-kbd { font-size: 11px; border: 1px solid #a7c8c6; padding: 2px 6px; border-radius: 6px; background: #eef7f6; }

    @media (prefers-reduced-motion: reduce) {
      .saih-tab, .saih-progress > i, .saih-pill::after, .saih-output { transition: none !important; }
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* === LYRICS + DESCRIPTION WRAPPER === */
.lyricsAndDescriptionSection {
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Cards */
.lyricsAndDescriptionSection .lyricsSection,
.lyricsAndDescriptionSection .descriptionSection {
  flex: 1  0;
  min-width: 0;
  background: #fbfbfb;
  border-radius: 18px;
  border: 1px solid rgba(1, 63, 64, 0.14);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  padding: 24px 26px 26px;
  font-family: inherit;                 /* use your site font */
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: #0e1a1a;
  position: relative;
  overflow: hidden;
}

/* subtle teal accent bar at the top of each card */
.lyricsAndDescriptionSection .lyricsSection::before,
.lyricsAndDescriptionSection .descriptionSection::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 4px;
  background: linear-gradient(90deg, #013f40, #019c9f);
}

/* push content down below accent bar */
.lyricsAndDescriptionSection .lyricsSection > *:first-child,
.lyricsAndDescriptionSection .descriptionSection > *:first-child {
  margin-top: 8px;
}

/* Headings "Lyrics" / "Description" */
.lyricsAndDescriptionSection .lyricsSection p:first-child,
.lyricsAndDescriptionSection .descriptionSection p:first-child {
  font-size: 22px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #013f40;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.6rem;
}

/* Main content paragraphs */
.lyricsAndDescriptionSection .lyricsSection p:not(:first-child),
.lyricsAndDescriptionSection .descriptionSection p:not(:first-child) {
  margin-top: 0.1rem;
  font-size: 20px;
  line-height: 36px;
}

/* Ensure <br> spacing feels like proper lines */
.lyricsAndDescriptionSection .lyricsSection br,
.lyricsAndDescriptionSection .descriptionSection br {
  line-height: 1.7;
}
.swai-lyrics-marker:hover
{
	text-decoration:underline;
}
/* Meta lines in lyrics: [Intro ...], [Verse 1 ...] etc. (JS will add this class) */
.swai-lyrics-marker {
  display: block;
  margin-top: 30px;
  margin-bottom: 0.25rem;
  padding: 8px 18px;
  border-radius: 15px;
  background: rgba(1, 63, 64, 0.08);
  color: #013f40;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Let the line after a marker breathe a bit */
.swai-lyrics-marker + br {
  line-height: 1;
}
.swai-desc-heading:hover
{text-decoration: underline;}
/* Description section headings: “– Performance & delivery:”, etc. (JS adds this) */
.swai-desc-heading {
  display: block;
  margin-top: 30px;
  transition: 0.3s;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 1.18rem;
  width: fit-content;
  border-radius: 10px;
  padding: 5px 20px;
  line-height: 1.5;
  color: white !important;
  background: #013f40;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Avoid double blank line right after the heading */
.swai-desc-heading + br {
  display: none;
}

/* Slightly larger text overall inside description for readability */
.lyricsAndDescriptionSection .descriptionSection {
  font-size: 0.97rem;
  line-height: 1.75;
}

/* Inline code-ish or technical words in description (not required, but nice) */
.lyricsAndDescriptionSection .descriptionSection em,
.lyricsAndDescriptionSection .descriptionSection code {
  font-family: inherit;
  font-style: italic;
  letter-spacing: 0.02em;
}
.recentBlogs .ee--blog-title,
.myOwnBlog .ee--blog-title {
  display: -webkit-box;
  -webkit-line-clamp: 4;      /* number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Desktop / laptop: side-by-side columns */
@media (min-width: 768px) {

	.recentBlogs .eel--blog-excerpt, .myOwnBlog .eel--blog-excerpt 
	{
		min-height: 4.5em;
	}
.recentBlogs h6, .myOwnBlog h6
	{
		height: 3.5em;
	}
.recentBlogs img, .myOwnBlog img
{
    min-height: 270px !important;
    width: auto;
}

.recentBlogs .ee--blog-title,
.myOwnBlog .ee--blog-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

	.lyricsAndDescriptionSection > div
	{
		flex-direction: row !important;
		        align-items: flex-start !important;
	}
  .lyricsAndDescriptionSection {
    flex-direction: row;
    align-items: flex-start;
  }

  .lyricsAndDescriptionSection .lyricsSection,
  .lyricsAndDescriptionSection .descriptionSection {
    max-width: 50%;
  }
}
.recentBlogs
{
    width:100% !important;
}
/* Mobile: stack, lyrics first, description second (DOM order already good) */
@media (max-width: 767px) {
	.eel-post-grid-wrap .grid-item-inner
	{
		width: 100%;
		    gap: 0px !important;
	}
		
	.eel-post-grid-wrap .grid-item-inner .eel--blog-img
	{
	}
  .lyricsAndDescriptionSection {
    flex-direction: column;
  }

  .lyricsAndDescriptionSection .lyricsSection,
  .lyricsAndDescriptionSection .descriptionSection {
    max-width: 100%;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
    padding: 18px 18px 20px;
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0 10px;
    border: 3px solid #00000057;
    background: #00000000;
  }
}

.givewp-donation-form-link, .givewp-donation-form-modal__open
{
	background-color: #013f40 !important;
	border: 2px solid #fbfbfb !important;
	color:white !Important;
	width:100% !important;
}
.givewp-donation-form-link:hover, .givewp-donation-form-modal__open:hover
{
	color: #013f40 !important;
		border: 2px solid #013f40 !important;
	background-color:white !important;
}