/*
Theme Name: BWV Theme
Version: 1.6.16
Author: Filip @ Blue Wolf Vets
Template: twentytwentythree
*/

:root{ --primary:#A163F5; --secondary:#344966; --beige:#e3ebf6; --charcoal:#2B2B2B; --white:#FFFFFF; --whatsapp:#25D366; }*{box-sizing:border-box}body{margin:0;color:var(--charcoal);background:var(--white);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}.container{max-width:72rem;margin:0 auto;padding:0 1rem}.section{padding:4rem 0;border-top:1px solid rgba(0,0,0,.06)}.section:first-of-type{border-top:0 padding-top:5rem;}.split{display:flex;justify-content:space-between;align-items:center;gap:1rem}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}.card-like{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 12px 22px rgba(0,0,0,.05);padding:1rem}.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:16px;padding:12px 22px;transition:.25s}.btn-primary{color:#fff;background:var(--primary);color:var(--primary)}.btn-outline:hover{background:var(--primary);color:#fff}/* ===== Top Bar Contact & Social Links ===== */

/* All icons: same size, aligned perfectly */

/* Facebook icon spacing & hover effect */

.whatsapp-icon{display:inline-grid;place-items:center}.whatsapp-icon img{width:24px;height:24px;transition:transform .2s ease,filter .2s ease}.whatsapp-icon:hover img{transform:scale(1.12);filter:saturate(1.2) brightness(1.05)}.facebook-icon{display:inline-grid;place-items:center}.facebook-icon img{width:24px;height:24px;transition:transform .2s ease,filter .2s ease}.facebook-icon:hover img{transform:scale(1.12);filter:saturate(1.2) brightness(1.05)}h1{font-weight:800;font-size:clamp(1.9rem,4.5vw,2.4rem);line-height:1.35;margin:0}h2{font-weight:700;font-size:1.75rem;margin:0 0 1rem}h3{font-weight:600;margin:.25rem 0}h4{font-weight:400;font-size:1rem;margin:0 0 1rem}.lead{margin-top:1rem;max-width:48ch;color:#525252;font-size:1.1rem}.meta{margin-top:.75rem;color:#737373;font-size:.95rem;display:flex;gap:.5rem;align-items:center}.hero-visual{
  margin-top:0;aspect-ratio:4/3;background:#f3f4f6;border-radius:12px;display:grid;place-items:center;overflow:hidden}.hero-visual img{width:100%;height:100%;object-fit:cover}.form-grid{display:grid;gap:.75rem}.form-row{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}.input, select, textarea{width:100%;border:1px solid rgba(0,0,0,.2);border-radius:12px;padding:12px 14px;font-size:.95rem}.notice{border:1px solid #d1fae5;background:#ecfdf5;color:#065f46;padding:12px 14px;border-radius:12px;margin:0 0 1rem}.notice.error{border-color:#fecaca;background:#fef2f2;color:#991b1b}.footer-logo{
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}.card-like:has(.hero-visual){ padding: 0; }/* image touches card edges */
.hero-visual{ 
background:#fff;
position: relative;
  overflow: hidden; 
 }/* white rather than grey */
.hero-visual img{ 
  position: absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: contain;                                   /* show full logo, no crop */                                      /* breathing room */
  background:#fff;
  display:block;
  
}@media (max-width:900px){
  .split{flex-direction:column;align-items:flex-start}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .hero-visual { aspect-ratio: 16 / 10; }
}/* === Top Bar Icon Attention Animation === */
@keyframes icon-pulse{
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2); /* zoom in */
  }
  20% {
    transform: scale(1); /* back to normal */
  }
  100% {
    transform: scale(1);
  }
}/* Apply animation to all icons in top bar */

/* Optional: smooth zoom when hovered manually */

/* === Fix top bar icon spacing === */

/* Standardize all icons */

/* Remove unwanted margins from wrappers */

/* Logo + title alignment */
footer .cols .split{
  display:flex;
  align-items:left;
  gap:8px;
}/* Nice, even line-height for lists */
footer .cols ul{
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .4rem;
}/* Responsive stack */
@media (max-width: 920px){
  footer .cols{ grid-template-columns:1fr 1fr !important; }
}@media (max-width: 640px){
  footer .cols{ grid-template-columns:1fr !important; }
}/* Make lists centered as well */
footer .cols ul{
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .4rem;
  justify-items: left; /* center list items horizontally */
}/* On mobile, also center all content */
@media (max-width: 640px){
  footer .cols > div {
    align-items: center;
    text-align: left;
  }
}/* === Footer: equal columns with left-aligned content === */
footer .cols{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  gap: 2rem;
  align-items: start;
}/* Left-align column content */
footer .cols > div{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* align content to the left */
  text-align: left; /* align text to the left */
}/* Lists inside footer */
footer .cols ul{
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .4rem;
  justify-items: start; /* make sure list items are aligned left */
}/* Logo and tagline alignment */
footer .cols .split{
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}/* Responsive stacking */
@media (max-width: 920px){
  footer .cols {
    grid-template-columns: 1fr 1fr; /* 2 columns on tablets */
  }
}@media (max-width: 640px){
  footer .cols {
    grid-template-columns: 1fr; /* stack columns on mobile */
    gap: 1.5rem;
  }
}/* === Make service cards clickable === */
.services .card-link{
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 18px;
}.services .card-link:hover{
  transform: translateY(-4px);
}.services .card-link .card-like{
  transition: box-shadow 0.2s ease;
}.services .card-link:hover .card-like{
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}/* Clickable cards */
.services .card-link{
  text-align: left;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0; /* card-like has padding already */
}.services .card-link:hover .card-like,
.services .card-link:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  transform: translateY(-4px);
}.services .card-like{ transition: box-shadow .2s ease, transform .2s ease; }/* Modal base */
.modal[aria-hidden="true"]{ display: none; }.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.5);
  display: grid;
  place-items: center;
  padding: 1rem;
}.modal__dialog{
  width: min(680px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0,0,0,.2);
  padding: 1.25rem 1.25rem 1.5rem;
  position: relative;
  animation: modalIn .18s ease-out;
}@keyframes modalIn{ from { transform: translateY(8px); opacity:.0 } to { transform:none; opacity:1 } }.modal__close{
  position: absolute;
  top: 8px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: none;
  background: #f3f4f6;
  font-size: 22px;
  line-height: 1.35;
  cursor: pointer;
}.modal__close:hover{ background: #e5e7eb; }.modal__dialog h3{ margin-top: .25rem; margin-bottom: .5rem; font-weight: 700; }.modal__dialog p{ color: #525252; }.modal__dialog ul{ margin: .5rem 0 0; padding-left: 1.1rem; }/* Clickable service cards – keep card padding/shape */
.services .card-like{
  transition: box-shadow .2s ease, transform .2s ease;
}.services .card-like:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  transform: translateY(-4px);
}/* Make the inner button fill the card but not change its padding */
.services .card-link{
  display:block;
  width:100%;
  height:100%;
  background:transparent;
  border:0;
  padding:0;                /* padding is provided by .card-like */
  text-align:left;
  cursor:pointer;
}/* Tidy headings spacing inside cards */
.services h3{ margin: 0 0 .5rem; }/* Pricing table nice stripes */
#pricing .card-like table tr:nth-child(even){ background:#fafafa; }#pricing .card-like table td{ border-bottom:1px solid rgba(0,0,0,.05); }#pricing .card-like table tr:last-child td{ border-bottom:0; }/* Clickable service cards (fix) */
.services .card-like{ transition: box-shadow .2s ease, transform .2s ease; }.services .card-like:hover{ box-shadow:0 8px 24px rgba(0,0,0,.12); transform:translateY(-4px); }.services .card-link{ display:block; width:100%; height:100%; background:transparent; border:0; padding:0; text-align:left; cursor:pointer; }.services h3{ margin:0 0 .5rem; }/* Modal styles (reuse from earlier if you already added them) */
.modal[aria-hidden="true"]{ display:none; }.modal{ position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.5); display:grid; place-items:center; padding:1rem; }.modal__dialog{ width:min(680px,100%); background:#fff; border-radius:16px; box-shadow:0 20px 48px rgba(0,0,0,.2); padding:1.25rem 1.25rem 1.5rem; position:relative; }.modal__close{ position:absolute; top:8px; right:10px; width:36px; height:36px; border-radius:999px; border:none; background:#f3f4f6; font-size:22px; cursor:pointer; }.modal__close:hover{ background:#e5e7eb; }/* Footer equal columns (if not already added) */
footer .cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; align-items:start; }footer .cols > div{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }footer .cols .split{ display:flex; align-items:center; gap:8px; }@media (max-width:920px){ footer .cols{ grid-template-columns:1fr 1fr; } }@media (max-width:640px){ footer .cols{ grid-template-columns:1fr; gap:1.5rem; } }/* Price list striping (if not already present) */
#pricing .card-like table tr:nth-child(even){ background:#fafafa; }/* Expand/collapse container */
.price-more{
  overflow: hidden;
  transition: max-height .35s ease;
  /* start collapsed; JS will control hidden attribute and max-height */
}.price-more.is-open{
  /* big enough to fit content; adjust if you add more rows */
  max-height: 1600px;
}#pricing .price-more{ transition: max-height .3s ease; }#pricing #price-toggle{ margin-top: 1rem; }#pricing .card-like ul li strong{ font-weight:600; }#pricing .card-like ul li{ display:flex; justify-content:space-between; gap:1rem; }@media (max-width: 700px){
  .section{padding:3rem 0}
  .section:first-of-type{padding-top:3rem}
}/* === Hero tidy + trust cues === */
.hero-title{font-weight:800; font-size:clamp(1.8rem,4.5vw,2.3rem); line-height:1.35; margin:0}.hero-lead{margin-top:1rem; max-width:56ch; color:#525252; font-size:1.1rem}.trust-row{margin-top:1rem; display:flex; gap:1rem; flex-wrap:wrap; color:#555; font-size:.95rem}.trust-pill{display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:.4rem .75rem}.trust-dot{width:8px; height:8px; border-radius:999px; background:#a163f5}.cta-wrap{margin-top:1.25rem; display:flex; gap:.5rem; flex-wrap:wrap}.btn-ghost{background:transparent; border:1px solid rgba(0,0,0,.15); color:#111}.btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(0,0,0,.06)}/* === /Hero tidy === */

/* === Services grid refresh === */
.services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; margin-top:2rem}.service-card{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:1.25rem; box-shadow:0 4px 12px rgba(0,0,0,.05); transition:transform .2s ease, box-shadow .2s ease}.service-card:hover{transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.08)}.service-icon{font-size:1.8rem; margin-bottom:.5rem}.service-card h3{margin:.25rem 0; font-size:1.2rem; font-weight:600}.service-card p{margin:0; font-size:.95rem; color:#555; line-height:1.35}/* === /Services grid === */

/* === Services Grid Refresh === */
.services-grid{display:grid; gap:1rem; grid-template-columns:repeat(3, 1fr)}.service-card{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:1rem; box-shadow:0 8px 18px rgba(0,0,0,.04)}.service-icon{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#eef2ff; margin-bottom:.6rem}.service-card h3{margin:.25rem 0 .35rem; font-size:1.05rem}.service-card p{margin:0; color:#555; font-size:.97rem}@media (max-width: 900px){
  .services-grid{grid-template-columns:repeat(2, 1fr)}
}@media (max-width: 560px){
  .services-grid{grid-template-columns:1fr}
}/* === /Services Grid Refresh === */

/* === Pricing Section Polish === */
.pricing-table{width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:.98rem}.pricing-table th, .pricing-table td{padding:.75rem 1rem; border-bottom:1px solid #e5e7eb; background:#fff; text-align:left}.pricing-table th{background:#fff; font-weight:600}.pricing-table td:first-child, .pricing-table th:first-child{position:-webkit-sticky; position:sticky; left:0; background:#fff; z-index:1}.pricing-note{font-size:.85rem; color:#555; margin-top:.5rem}.readmore-btn{background:none; border:0; color:#a163f5; cursor:pointer; font-weight:600; padding:0}.readmore-btn:focus-visible{outline:2px solid #a163f5; outline-offset:2px}/* === /Pricing Section Polish === */

/* === Pricing table purple borders === */
.pricing .table-wrap{
  overflow: auto;
  border: 1px solid #a163f5;
  border-radius: 12px;
}.pricing table{
  width: 100%;
  border-collapse: collapse;
  background:#fff;
}.pricing th,
.pricing td{
  border: 1px solid #a163f5;
  padding: .8rem 1rem;
  vertical-align: top;
  
}.pricing thead th{
  background: #f7f2fd;
  font-weight: 700;
  text-align: left;
  color: #111;
}.pricing .price{
  white-space: nowrap;
  font-weight: 700;
}.pricing small{
  color: #555;
}.pricing .notes{
  margin-top: .75rem;
  color: #555;
  font-size: .95rem;
}.pricing table td:nth-child(1),
.pricing table th:nth-child(1),
.pricing table td:nth-child(2),
.pricing table th:nth-child(2){
  text-align: center;
}/* Sticky first column on small screens */
@media (max-width: 800px){
  .pricing tbody th{position:-webkit-sticky; position:sticky; left:0; z-index:1; background:#fff}
}/* Read-more button */
.btn-readmore{background:#e7ecf8; color:#0b0f1a; border:1px solid #d8e1f5}.btn-readmore:hover,.btn-readmore:focus-visible{background:#dde6fb}/* === /Pricing table purple borders === */

.pricing .num{text-align:right}.nb{white-space:nowrap}.btn-call{
  border:1px solid #a163f5 !important;
  color:#a163f5 !important;
}.btn-call:hover,
.btn-call:focus-visible{
  background:#f5edff !important;
  border-color:#8a4de2 !important;
  color:#8a4de2 !important;
}/* 1) Use the same container everywhere */
:root{
  --container-max: 1200px;              /* whatever your page uses */
  --container-pad: clamp(16px, 2vw, 24px);
}.container{ 
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}/* 2) Make the header use the SAME container */
.site-header{ width: 100%; }/* not 100vw */
.site-header > .container{              /* wrap your nav inside this */
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}/* 3) If you had a calc based on vw, kill it */
.site-header[style*="100vw"],
.header-outer{ width: 100% !important; }.header-outer{ padding-inline: 0 !important; }/* rely on .container padding */

/* Optional: if nav itself had extra left padding */
.site-nav{ padding-left: 0; }/* === BWV: Pricing table collapse (wrapper clip, preserves table layout) === */
#pricing .price-clip{ position: relative; overflow: hidden; transition: max-height .35s ease; }#pricing .price-clip.is-collapsed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}/* === BWV: Pricing table collapse (4.5 rows, fade, no scrollbar) === */
#pricing .price-clip{
  position: relative;
  overflow: hidden;          /* hide overflow */
  transition: max-height .35s ease;
}#pricing .price-clip::-webkit-scrollbar{ display:none; }#pricing .price-clip{ -ms-overflow-style:none; scrollbar-width:none; }/* hide scrollbar FF */
#pricing .price-clip.is-collapsed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}/* Ensure Read more button sits on its own line under notes text */
#pricing .btn-readmore{
  display:block;
  margin:1rem 0 0 0;
}/* === BWV: Pricing polish (no scrollbar, button placement) === */
#pricing .table-wrap{ overflow: hidden !important; }#pricing .price-clip{ overflow: hidden !important; }#pricing .price-clip::-webkit-scrollbar{ display: none; }/* just in case some UA still renders it */
#pricing .btn-readmore{ display: inline-block; margin-top: .75rem; }/* === BWV: Beige backgrounds for key sections (full-width) === */
section#health-plans,
section#reviews,
section#contact,
section#faqs{
  background: #e3ebf6 !important;
}/* Ensure inner containers stay transparent */
section#pricing .container,
section#reviews .container,
section#areas .container,
section#faqs .container{
  background: transparent !important;
}/* === BWV: keep nav logo inside header without growing it === */
.site-header{ --logo-h: 54px; }/* mobile size */
@media (min-width: 900px){ .site-header { --logo-h: 32px; } }/* desktop */

.logo-mark{
  height: var(--logo-h);      /* fixes visual height */
  width: auto;                /* keep aspect ratio */
  display: block;             /* no baseline gap */
  max-height: 100%;           /* extra safety */
}/* ensure header keeps its intended height and alignment */
.site-header .container{ align-items: center; }/* === BWV: Smaller Swiper nav buttons in Reviews section === */
#reviews .swiper-button-next,
#reviews .swiper-button-prev{
  width: 28px;   /* reduce from default 44px */
  height: 28px;
  background-size: 60% 60%; /* shrink the arrow icon inside */
}/* Center arrows vertically after resizing */
#reviews .swiper-button-next::after,
#reviews .swiper-button-prev::after{
  font-size: 14px; /* arrow size inside */
}/* === BWV: Equal-sized review cards, centered content === */
#reviews .swiper-slide{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical center */
  align-items: center;       /* horizontal center */
  text-align: center;
  height: 100%;              /* let Swiper control overall height */
  min-height: 260px;         /* give consistent card size (tweak as needed) */
  box-sizing: border-box;
}#reviews .swiper-slide p{
  margin: 0 auto 1rem;       /* center the text block */
  max-width: 90%;            /* prevent text stretching too wide */
}#reviews .swiper-slide h4{
  margin: 0;
}/* === Center align Health Plans table === */
#health-plans table th,
#health-plans table td{
  text-align: center;
  vertical-align: middle;
}/* === Highlight Savings column === */
#health-plans td.savings{
  color: #4a257d;          /* dark green text */
  font-weight: 600;        /* bold */
  background: #5dbfbc;     /* pastel green background */
}/* Custom highlight for specific table cells */
#health-plans td.highlight-cell{
  background: #fff;   /* pastel background */
 
}#health-plans td.highlight-cell-pink{
  background: #f7f2fd;   /* pastel background */
 
}/* === Center align + stack FAQ section === */
#faqs{
  text-align: left;
}#faqs .container{
  display: flex;
  flex-direction: column;
  align-items: left;
  max-width: 800px;   /* keeps text narrow for readability */
  margin: 0 auto;     /* centres the container */
}#faqs h2, 
#faqs h3, 
#faqs p{
  text-align: center;
}/* Add spacing between FAQ items */
#faqs .faq-item{
  margin-bottom: 1rem;  /* space between questions */
}.hero-title{
  line-height: 1.2; /* adjust if needed */
}.hero-title .nb{
  display: inline-block;
  text-indent: 11.2ch; /* aligns "your" under "v" */
}

/* === Compatibility & Responsiveness Layer (non-invasive) === */
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}

/* Media is fluid by default */
img,svg,video,canvas,iframe{max-width:100%;height:auto}

/* Improve touch behaviour on mobile */
:where(button,[role="button"]){touch-action:manipulation}
a,button{-webkit-tap-highlight-color:rgba(0,0,0,0)}

/* Provide safe full-bleed helpers if used */
.w-100vw,.full-bleed{width:min(100vw,100%)}

/* Add sticky fallback for older WebKit */
.sticky{position:-webkit-sticky;position:sticky}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;
    transition-duration:0.01ms!important;scroll-behavior:auto!important}
}

.signup-btn {
  height: 180px;
  width: auto;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.signup-btn:hover {
  transform: scale(1.05);
}
#health-plans th,
#health-plans td {
  padding: 8px 5px; /* reduced from typical 15–20px */
  text-align: center;
  vertical-align: middle;
}
/* ===== Health Plans Section Button (clean version) ===== */
#health-plans .table-button {
  text-align: center;
  margin-top: 1rem;
}

#health-plans .table-button a {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}

#health-plans .table-button a:hover {
  transform: scale(1.05);
}

#health-plans .table-button img.signup-btn {
  max-width: 230px;
  height: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  #health-plans .table-button img.signup-btn {
    max-width: 160px;
  }
}

/* COOKIE BAR */

.cookie-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #344966;
    color: #fff;
    padding: 8px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
    z-index: 9999;
}

.cookie-bar.hidden {
    display: none;
}

.cookie-content {
    max-width: 800px;
    text-align: center;
}

.cookie-buttons {
    margin-top: 5px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.cookie-btn {
    padding: 8px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.cookie-btn.accept {
    background: #fff;
    color: #344966;
}

.cookie-btn.decline {
    background: #333;
    color: #fff;
}

.cookie-btn.settings {
    background: #6a2fc9;
    color: #fff;
}