@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

.font-playfair { font-family: 'Playfair Display', serif; }
.font-script { font-family: 'Great Vibes', cursive; font-weight: 400; letter-spacing: 1px; }
.builder-page img { max-width: 100%; }

/* Marquee (services, programs, contact) */
@keyframes marquee-reverse {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.animate-marquee-reverse { animation: marquee-reverse 20s linear infinite; }

/* Card hovers */
.card-hover { transition: transform .3s ease; }
.card-hover:hover { transform: translateY(-8px) scale(1.02); }
.card-hover-animate { position: relative; overflow: hidden; }
.card-hover-animate::before {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background-color: #c3a980; top: 80%; left: 20%;
  transform: translate(-50%, -50%) scale(0); transition: transform .6s ease-in-out; z-index: 0;
}
.card-hover-animate:hover::before { transform: translate(-50%, -50%) scale(8); }
.card-hover-animate .card-content { position: relative; z-index: 10; }

/* Parallelogram button (home) */
.parallelogram-button {
  display: inline-flex; align-items: center; transform: skew(35deg);
  padding: 6px 20px; position: relative; cursor: pointer; border: 2px solid;
  border-top-left-radius: 15px; border-bottom-right-radius: 15px;
  border-top-right-radius: 3px; border-bottom-left-radius: 3px;
  background-color: transparent; transition: background-color .3s ease, box-shadow .3s ease;
}
.parallelogram-button span {
  transform: skew(-35deg); display: inline-block; font-weight: bold;
  font-family: sans-serif; z-index: 1; white-space: nowrap;
}
.circle-icon {
  position: absolute; right: 40px; height: 40px; width: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transform: skew(-35deg); transition: transform .3s ease;
}
.parallelogram-button:hover .circle-icon { transform: skew(-35deg) translateX(5px); }
.parallelogram-button:hover .circle-icon svg { transform: scale(1.1); }
/* Tabs (CSS only, no JS) */
.bb-tabs > input { display: none; }
.bb-tabs .bb-tab-labels { display: flex; flex-wrap: wrap; border-bottom: 2px solid #000; }
.bb-tabs label { padding: 10px 22px; cursor: pointer; font-weight: 600; color: #000; border-radius: 8px 8px 0 0; }
.bb-tabs .bb-panel { display: none; padding: 20px 4px; color: #374151; }
.bb-tabs > input:nth-of-type(1):checked ~ .bb-tab-labels label:nth-of-type(1),
.bb-tabs > input:nth-of-type(2):checked ~ .bb-tab-labels label:nth-of-type(2),
.bb-tabs > input:nth-of-type(3):checked ~ .bb-tab-labels label:nth-of-type(3),
.bb-tabs > input:nth-of-type(4):checked ~ .bb-tab-labels label:nth-of-type(4) { background: #000; color: #fff; }
.bb-tabs > input:nth-of-type(1):checked ~ .bb-panels .bb-panel:nth-of-type(1),
.bb-tabs > input:nth-of-type(2):checked ~ .bb-panels .bb-panel:nth-of-type(2),
.bb-tabs > input:nth-of-type(3):checked ~ .bb-panels .bb-panel:nth-of-type(3),
.bb-tabs > input:nth-of-type(4):checked ~ .bb-panels .bb-panel:nth-of-type(4) { display: block; }
.upbox { display: none; position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 10000; background: #111; color: #fff; padding: 12px 16px; border-radius: 10px; width: 320px; max-width: 90vw; box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: 13px; }
.upbox.open { display: block; }
.upbar { height: 8px; background: #333; border-radius: 6px; margin-top: 8px; overflow: hidden; }
.upfill { height: 100%; width: 0; background: #caa874; transition: width .15s; }
/* Accordion / toggle arrow */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: '+'; float: right; font-weight: 700; }
details[open] > summary::after { content: '–'; }

/* Menu anchor: invisible on the site, visible in the editor */
.builder-anchor { height: 0; scroll-margin-top: 90px; }
.gjs-dashed .builder-anchor { height: 28px; background: #faf3e3; border: 1px dashed #caa874; }
.gjs-dashed .builder-anchor::before { content: '⚓ Anchor (set its ID in the right panel)'; font-size: 11px; padding: 0 8px; color: #8a6d3b; }