{"id":3637,"date":"2026-06-12T11:36:54","date_gmt":"2026-06-12T11:36:54","guid":{"rendered":"https:\/\/xgems.store\/bee\/?st-import=d0ff8aac267098373fb2c5a5cac3855e"},"modified":"2026-06-13T10:56:30","modified_gmt":"2026-06-13T10:56:30","slug":"home","status":"publish","type":"page","link":"https:\/\/xgems.store\/bee\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3637\" class=\"elementor elementor-3637\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d4b9b29 e-flex e-con-boxed e-con e-parent\" data-id=\"d4b9b29\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ffff5af elementor-widget elementor-widget-html\" data-id=\"ffff5af\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\r\n  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n  \u2551  HOME SECTION \u2014 Elementor HTML Widget               \u2551\r\n  \u2551  Drop into: Elementor > Add Widget > HTML           \u2551\r\n  \u2551                                                      \u2551\r\n  \u2551  TO EDIT:                                            \u2551\r\n  \u2551  - Video URL: find VIDEO_URL below                  \u2551\r\n  \u2551  - Button 1 text\/link: BTN1 block                   \u2551\r\n  \u2551  - Button 2 text\/link: BTN2 block                   \u2551\r\n  \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n-->\r\n\r\n<style>\r\n.xg-home-wrap{position:relative;width:100%;overflow:hidden;background:#000;display:flex;align-items:flex-end;justify-content:center;min-height:100svh}\r\n\r\n\/* video fills the section *\/\r\n.xg-home-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}\r\n\r\n\/* subtle dark vignette at bottom so buttons read clearly *\/\r\n.xg-home-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,0.72) 100%);z-index:1;pointer-events:none}\r\n\r\n\/* content sits above video *\/\r\n.xg-home-content{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;padding:0 20px 52px;box-sizing:border-box;gap:14px}\r\n\r\n\/* marquee ticker *\/\r\n.xg-home-ticker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:4px;text-align:center;font-family:inherit}\r\n\r\n\/* buttons *\/\r\n.xg-home-btn{display:block;width:100%;max-width:340px;padding:14px 0;border:1.5px solid rgba(255,255,255,0.55);border-radius:40px;background:transparent;color:#fff;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;font-family:inherit;text-decoration:none}\r\n.xg-home-btn:hover{border-color:#fff;background:rgba(255,255,255,0.08);color:#fff;text-decoration:none}\r\n.xg-home-btn:visited{color:#fff}\r\n\r\n\/* mute toggle *\/\r\n.xg-mute-btn{position:absolute;top:18px;right:18px;z-index:3;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.25);border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:16px;transition:background .2s}\r\n.xg-mute-btn:hover{background:rgba(0,0,0,0.65)}\r\n\r\n@media(max-width:480px){\r\n  .xg-home-content{padding-bottom:40px}\r\n  .xg-home-btn{font-size:12px;padding:13px 0}\r\n}\r\n<\/style>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@2.44.0\/tabler-icons.min.css\">\r\n\r\n<div class=\"xg-home-wrap\" id=\"xgHomeWrap\">\r\n\r\n  <!-- \u2500\u2500 VIDEO \u2500\u2500 change src to update \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <video\r\n    class=\"xg-home-video\"\r\n    id=\"xgHomeVid\"\r\n    src=\"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/Proper-BEE.mp4\"\r\n    autoplay\r\n    loop\r\n    playsinline\r\n    muted\r\n  ><\/video>\r\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n\r\n  <div class=\"xg-home-overlay\"><\/div>\r\n\r\n  <!-- mute \/ unmute toggle -->\r\n  <button class=\"xg-mute-btn\" id=\"xgMuteBtn\" aria-label=\"Toggle sound\">\r\n    <i class=\"ti ti-volume-off\" id=\"xgMuteIcon\" aria-hidden=\"true\"><\/i>\r\n  <\/button>\r\n\r\n  <div class=\"xg-home-content\">\r\n\r\n    <!-- ticker line above buttons \u2014 edit text here -->\r\n    <div class=\"xg-home-ticker\">G.O.H tickets now available<\/div>\r\n\r\n    <!-- \u2500\u2500 BUTTON 1 \u2014 edit href and label \u2500\u2500 -->\r\n    <a class=\"xg-home-btn\" href=\"#events\" id=\"xgBtn1\">Upcoming Events<\/a>\r\n\r\n    <!-- \u2500\u2500 BUTTON 2 \u2014 edit href and label \u2500\u2500 -->\r\n    <a class=\"xg-home-btn\" href=\"#switch\" id=\"xgBtn2\">Plan Your Event<\/a>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  var vid  = document.getElementById(\"xgHomeVid\");\r\n  var btn  = document.getElementById(\"xgMuteBtn\");\r\n  var icon = document.getElementById(\"xgMuteIcon\");\r\n  var muted = true; \/* starts muted so autoplay works on all browsers *\/\r\n\r\n  function syncIcon(){\r\n    icon.className = muted ? \"ti ti-volume-off\" : \"ti ti-volume\";\r\n    btn.setAttribute(\"aria-label\", muted ? \"Unmute video\" : \"Mute video\");\r\n  }\r\n\r\n  btn.addEventListener(\"click\", function(){\r\n    muted = !muted;\r\n    vid.muted = muted;\r\n    if(!muted){\r\n      vid.play().catch(function(){\r\n        \/* autoplay policy blocked unmuted play \u2014 re-mute silently *\/\r\n        muted = true; vid.muted = true;\r\n      });\r\n    }\r\n    syncIcon();\r\n  });\r\n\r\n  syncIcon();\r\n\r\n  \/* make section fill viewport height even inside Elementor sections *\/\r\n  function setHeight(){\r\n    document.getElementById(\"xgHomeWrap\").style.minHeight = window.innerHeight + \"px\";\r\n  }\r\n  setHeight();\r\n  window.addEventListener(\"resize\", setHeight);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d437de6 e-flex e-con-boxed e-con e-parent\" data-id=\"d437de6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa22281 elementor-widget elementor-widget-html\" data-id=\"aa22281\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- CENTERED INVADING IMAGE WITH WHITE FRAME -->\r\n<section class=\"invade-wrap\" aria-label=\"About image invade section\">\r\n  <div class=\"invade-sticky\">\r\n    <div class=\"invade-visual\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"invade-vignette\" aria-hidden=\"true\"><\/div>\r\n  <\/div>\r\n<\/section>\r\n<style>\r\n  .invade-wrap{\r\n    position: relative;\r\n    height: 190vh;\r\n    width: 100%;\r\n    background: transparent;\r\n    overflow: clip;\r\n  }\r\n  .invade-sticky{\r\n    position: sticky;\r\n    top: 0;\r\n    height: 100vh;\r\n    width: 100%;\r\n  }\r\n  \/* BIGGER + CENTERED + WHITE BORDER *\/\r\n  .invade-visual{\r\n    position: fixed;\r\n    width: 85vw;\r\n    height: 85vh;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%) scale(1.15);\r\n    background-image: url(\"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/BEE-about-7.jpeg\");\r\n    background-size: contain;\r\n    background-position: center;\r\n    background-repeat: no-repeat;\r\n    opacity: 0;\r\n    filter: blur(10px);\r\n    border-radius: 20px;\r\n    \/* CLEAN WHITE FRAME *\/\r\n    border: 10px solid #ffffff;\r\n    box-shadow:\r\n      0 25px 80px rgba(0,0,0,.45),\r\n      0 0 40px rgba(255,255,255,.25);\r\n    z-index: 25;\r\n    pointer-events: none;\r\n    will-change: opacity, transform, filter;\r\n  }\r\n\r\n  \/* RESPONSIVE: PHONE *\/\r\n  @media (max-width: 600px){\r\n    .invade-visual{\r\n      width: 95vw;\r\n      height: 70vh;\r\n      border-radius: 12px;\r\n      border-width: 6px;\r\n    }\r\n  }\r\n\r\n  \/* RESPONSIVE: TABLET *\/\r\n  @media (min-width: 601px) and (max-width: 1024px){\r\n    .invade-visual{\r\n      width: 90vw;\r\n      height: 80vh;\r\n      border-radius: 16px;\r\n      border-width: 8px;\r\n    }\r\n  }\r\n\r\n  .invade-vignette{\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 15;\r\n    pointer-events: none;\r\n    opacity: 0;\r\n    transition: opacity 220ms ease;\r\n    background: radial-gradient(circle at center, rgba(0,0,0,0) 50%, rgba(0,0,0,.25) 100%);\r\n  }\r\n  .invade-wrap.is-active .invade-vignette{\r\n    opacity: 1;\r\n  }\r\n  @media (prefers-reduced-motion: reduce){\r\n    .invade-visual{\r\n      transform: translate(-50%, -50%) !important;\r\n      filter: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n<script>\r\n(function(){\r\n  const wrap = document.querySelector('.invade-wrap');\r\n  const visual = document.querySelector('.invade-visual');\r\n  if(!wrap || !visual) return;\r\n  let ticking = false;\r\n  function clamp(n, min, max){ return Math.max(min, Math.min(max, n)); }\r\n  function update(){\r\n    ticking = false;\r\n    const rect = wrap.getBoundingClientRect();\r\n    const vh = window.innerHeight || document.documentElement.clientHeight;\r\n    const total = rect.height + vh;\r\n    const progressed = (vh - rect.top) \/ total;\r\n    const p = clamp(progressed, 0, 1);\r\n    const active = rect.top < vh && rect.bottom > 0;\r\n    wrap.classList.toggle('is-active', active);\r\n    const fadeInEnd = 0.30;\r\n    const holdEnd   = 0.70;\r\n    let opacity = 0;\r\n    if (p <= fadeInEnd){\r\n      opacity = p \/ fadeInEnd;\r\n    } else if (p <= holdEnd){\r\n      opacity = 1;\r\n    } else {\r\n      opacity = 1 - ((p - holdEnd) \/ (1 - holdEnd));\r\n    }\r\n    opacity = clamp(opacity, 0, 1);\r\n    const invade = clamp(p \/ fadeInEnd, 0, 1);\r\n    const exit = clamp((p - holdEnd) \/ (1 - holdEnd), 0, 1);\r\n    const scaleIn = 1.15 - (0.15 * invade);\r\n    const scaleOut = 1.00 + (0.05 * exit);\r\n    const scale = (p <= holdEnd) ? scaleIn : scaleOut;\r\n    const blur = (p <= fadeInEnd)\r\n      ? (10 - (10 * invade))\r\n      : (0 + (6 * exit));\r\n    if(!active){\r\n      visual.style.opacity = \"0\";\r\n      visual.style.transform = \"translate(-50%, -50%) scale(1.15)\";\r\n      visual.style.filter = \"blur(10px)\";\r\n      return;\r\n    }\r\n    visual.style.opacity = String(opacity);\r\n    visual.style.transform = \"translate(-50%, -50%) scale(\" + scale.toFixed(4) + \")\";\r\n    visual.style.filter = \"blur(\" + blur.toFixed(2) + \"px)\";\r\n  }\r\n  function requestTick(){\r\n    if(!ticking){\r\n      ticking = true;\r\n      window.requestAnimationFrame(update);\r\n    }\r\n  }\r\n  window.addEventListener('scroll', requestTick, { passive: true });\r\n  window.addEventListener('resize', requestTick);\r\n  requestTick();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b4cb02e elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"b4cb02e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d52eee elementor-widget elementor-widget-html\" data-id=\"3d52eee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\r\n  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n  \u2551  EVENTS SECTION \u2014 Elementor HTML Widget             \u2551\r\n  \u2551  Drop into: Elementor > Add Widget > HTML           \u2551\r\n  \u2551                                                      \u2551\r\n  \u2551  TO EDIT EVENTS: find the EVENTS DATA block below   \u2551\r\n  \u2551  Each event has: name, logo, date, dateLabel,       \u2551\r\n  \u2551  venue, time, description, notice                   \u2551\r\n  \u2551  Set date: null for TBA dates                       \u2551\r\n  \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n-->\r\n\r\n<style>\r\n.xg-ev-wrap{font-family:inherit;padding:48px 0;overflow:hidden;background:transparent}\r\n.xg-ev-track-outer{overflow:hidden;position:relative}\r\n.xg-ev-track{display:flex;gap:24px;transition:transform .4s cubic-bezier(.4,0,.2,1);will-change:transform;padding:8px 4px 20px}\r\n.xg-ev-card{min-width:280px;max-width:280px;background:#111;border:1.5px solid rgba(255,255,255,0.18);border-radius:20px;display:flex;flex-direction:column;align-items:center;padding:30px 22px 22px;box-sizing:border-box;flex-shrink:0}\r\n.xg-ev-logo{width:92px;height:92px;object-fit:contain;border-radius:14px;margin-bottom:18px;background:#1a1a1a}\r\n.xg-ev-name{color:#fff;font-size:17px;font-weight:700;text-align:center;margin:0 0 8px;letter-spacing:.01em}\r\n.xg-ev-date{color:rgba(255,255,255,0.5);font-size:13px;text-align:center;margin:0 0 16px}\r\n.xg-ev-days{font-size:12px;color:rgba(255,255,255,0.7);font-weight:500;margin-bottom:20px;text-align:center;letter-spacing:.04em;text-transform:uppercase}\r\n.xg-ev-days span{font-size:26px;font-weight:800;color:#fff;display:block;line-height:1.1;letter-spacing:-.01em}\r\n.xg-ev-btn{background:transparent;border:1.5px solid rgba(255,255,255,0.45);color:#fff;border-radius:30px;padding:10px 0;font-size:12px;letter-spacing:.1em;cursor:pointer;transition:border-color .2s,background .2s;width:100%;text-transform:uppercase;font-family:inherit}\r\n.xg-ev-btn:hover{border-color:#fff;background:rgba(255,255,255,0.07)}\r\n.xg-ev-nav{display:flex;justify-content:center;gap:14px;margin-top:28px}\r\n.xg-ev-nav button{background:transparent;border:1.5px solid rgba(128,128,128,0.3);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:inherit;transition:border-color .2s;font-family:inherit}\r\n.xg-ev-nav button:hover{border-color:rgba(128,128,128,0.7)}\r\n.xg-ev-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}\r\n.xg-ev-dot{width:7px;height:7px;border-radius:50%;background:rgba(128,128,128,0.25);transition:background .2s;cursor:pointer}\r\n.xg-ev-dot.xg-active{background:rgba(128,128,128,0.7)}\r\n\r\n\/* Modal *\/\r\n.xg-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.72);z-index:99999;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}\r\n.xg-modal-bg.xg-open{display:flex}\r\n.xg-modal{background:#0f0f0f;border:1.5px solid rgba(255,255,255,0.18);border-radius:22px;max-width:420px;width:100%;padding:34px 28px 28px;position:relative;color:#fff;box-sizing:border-box;max-height:90vh;overflow-y:auto}\r\n.xg-modal h3{margin:0 0 4px;font-size:22px;font-weight:800;color:#fff}\r\n.xg-modal-logo{width:68px;height:68px;object-fit:contain;border-radius:12px;margin-bottom:14px;background:#1a1a1a;display:block}\r\n.xg-modal-close{position:absolute;top:18px;right:20px;background:none;border:none;color:rgba(255,255,255,0.4);font-size:24px;cursor:pointer;line-height:1;padding:0;font-family:inherit}\r\n.xg-modal-close:hover{color:#fff}\r\n.xg-modal-row{display:flex;gap:10px;align-items:flex-start;margin:12px 0}\r\n.xg-modal-label{font-size:10px;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:.09em;margin-bottom:2px}\r\n.xg-modal-val{color:#fff;font-size:14px;font-weight:500}\r\n.xg-modal-icon{font-size:17px;color:rgba(255,255,255,0.35);margin-top:2px;flex-shrink:0}\r\n.xg-modal-desc{margin-top:16px;font-size:13px;color:rgba(255,255,255,0.6);line-height:1.65;border-top:1px solid rgba(255,255,255,0.08);padding-top:16px}\r\n.xg-modal-notice{font-size:11px;color:rgba(255,255,255,0.28);margin-top:10px;font-style:italic;line-height:1.5}\r\n.xg-book-btn{display:block;width:100%;margin-top:22px;background:#fff;color:#111;border:none;border-radius:30px;padding:13px 0;font-size:13px;font-weight:800;letter-spacing:.08em;cursor:pointer;text-align:center;text-transform:uppercase;transition:opacity .2s;font-family:inherit}\r\n.xg-book-btn:hover{opacity:.85}\r\n\r\n@media(max-width:600px){\r\n  .xg-ev-card{min-width:240px;max-width:240px}\r\n  .xg-modal{padding:26px 18px 22px}\r\n}\r\n<\/style>\r\n\r\n<!-- Tabler Icons (outline) -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@2.44.0\/tabler-icons.min.css\">\r\n\r\n<div class=\"xg-ev-wrap\">\r\n  <div class=\"xg-ev-track-outer\" id=\"xgOuter\">\r\n    <div class=\"xg-ev-track\" id=\"xgTrack\"><\/div>\r\n  <\/div>\r\n  <div class=\"xg-ev-nav\">\r\n    <button onclick=\"xgMove(-1)\" aria-label=\"Previous event\">&#8592;<\/button>\r\n    <button onclick=\"xgMove(1)\" aria-label=\"Next event\">&#8594;<\/button>\r\n  <\/div>\r\n  <div class=\"xg-ev-dots\" id=\"xgDots\"><\/div>\r\n<\/div>\r\n\r\n<!-- Modal -->\r\n<div class=\"xg-modal-bg\" id=\"xgModal\" onclick=\"xgCloseModal(event)\">\r\n  <div class=\"xg-modal\" id=\"xgModalInner\">\r\n    <button class=\"xg-modal-close\" onclick=\"document.getElementById('xgModal').classList.remove('xg-open')\" aria-label=\"Close\">&times;<\/button>\r\n    <img decoding=\"async\" class=\"xg-modal-logo\" id=\"xgMLogo\" src=\"\" alt=\"\">\r\n    <h3 id=\"xgMName\"><\/h3>\r\n    <div id=\"xgMFields\"><\/div>\r\n    <div class=\"xg-modal-desc\" id=\"xgMDesc\"><\/div>\r\n    <div class=\"xg-modal-notice\" id=\"xgMNotice\"><\/div>\r\n    <button class=\"xg-book-btn\" id=\"xgMBook\">Book Ticket<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   EVENTS DATA \u2014 edit this section to update events\r\n   date: new Date(YEAR, MONTH-1, DAY)  \u2014 month is 0-indexed\r\n   date: null  \u2014 shows TBA\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nvar EVENTS = [\r\n  {\r\n    name:        \"Garden of House\",\r\n    logo:        \"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/IMG_3380.png\",\r\n    date:        new Date(2026, 7, 9),   \/\/ 09 August 2026\r\n    dateLabel:   \"09 August 2026\",\r\n    venue:       \"Trade Fair\",\r\n    time:        \"9 AM \u2013 00:00\",\r\n    description: \"Re-entry: once you exit, you cannot return. Cooler box limit: 1 bottle. Stanley cups must come empty.\",\r\n    notice:      \"By attending this event you acknowledge that photos and videos may be taken.\"\r\n  },\r\n  {\r\n    name:        \"Under The Sun\",\r\n    logo:        \"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/IMG_3382.png\",\r\n    date:        new Date(2026, 7, 29),  \/\/ 29 August 2026\r\n    dateLabel:   \"29 August 2026\",\r\n    venue:       \"TBA\",\r\n    time:        \"TBA\",\r\n    description: \"TBA\",\r\n    notice:      \"\"\r\n  },\r\n  {\r\n    name:        \"Private School\",\r\n    logo:        \"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/IMG_3383.png\",\r\n    date:        null,\r\n    dateLabel:   \"TBA\",\r\n    venue:       \"TBA\",\r\n    time:        \"TBA\",\r\n    description: \"TBA\",\r\n    notice:      \"\"\r\n  },\r\n  {\r\n    name:        \"Warrina Land\",\r\n    logo:        \"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/IMG_3381.png\",\r\n    date:        null,\r\n    dateLabel:   \"December (TBA)\",\r\n    venue:       \"TBA\",\r\n    time:        \"TBA\",\r\n    description: \"TBA\",\r\n    notice:      \"\"\r\n  }\r\n];\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* Sort: soonest date first, then TBA events at end *\/\r\nEVENTS.sort(function(a,b){\r\n  if(a.date && b.date) return a.date - b.date;\r\n  if(a.date) return -1;\r\n  if(b.date) return 1;\r\n  return 0;\r\n});\r\n\r\nvar current = 0;\r\n\r\nfunction daysLeft(d){\r\n  if(!d) return null;\r\n  var now = new Date(); now.setHours(0,0,0,0);\r\n  return Math.ceil((d - now) \/ 86400000);\r\n}\r\n\r\nfunction buildCards(){\r\n  var track = document.getElementById(\"xgTrack\");\r\n  var dots  = document.getElementById(\"xgDots\");\r\n  track.innerHTML = \"\"; dots.innerHTML = \"\";\r\n\r\n  EVENTS.forEach(function(ev, i){\r\n    var days = daysLeft(ev.date);\r\n    var daysHtml;\r\n    if(days === null){\r\n      daysHtml = '<div class=\"xg-ev-days\"><span>TBA<\/span>date to be announced<\/div>';\r\n    } else if(days < 0){\r\n      daysHtml = '<div class=\"xg-ev-days\"><span style=\"color:rgba(255,255,255,0.3)\">Passed<\/span><\/div>';\r\n    } else {\r\n      daysHtml = '<div class=\"xg-ev-days\"><span>' + days + '<\/span>days to go<\/div>';\r\n    }\r\n\r\n    var card = document.createElement(\"div\");\r\n    card.className = \"xg-ev-card\";\r\n    card.innerHTML =\r\n      '<img decoding=\"async\" class=\"xg-ev-logo\" src=\"' + ev.logo + '\" alt=\"' + ev.name + ' logo\" onerror=\"this.style.display=\\'none\\'\">' +\r\n      '<div class=\"xg-ev-name\">' + ev.name + '<\/div>' +\r\n      '<div class=\"xg-ev-date\">' + ev.dateLabel + '<\/div>' +\r\n      daysHtml +\r\n      '<button class=\"xg-ev-btn\" onclick=\"xgOpenModal(' + i + ')\">Details<\/button>';\r\n    track.appendChild(card);\r\n\r\n    var dot = document.createElement(\"div\");\r\n    dot.className = \"xg-ev-dot\" + (i === 0 ? \" xg-active\" : \"\");\r\n    dot.setAttribute(\"onclick\",\"xgGoTo(\" + i + \")\");\r\n    dots.appendChild(dot);\r\n  });\r\n\r\n  updateTrack();\r\n}\r\n\r\nfunction cardWidth(){\r\n  var card = document.querySelector(\".xg-ev-card\");\r\n  return card ? card.offsetWidth + 24 : 304;\r\n}\r\n\r\nfunction updateTrack(){\r\n  var track  = document.getElementById(\"xgTrack\");\r\n  var outer  = document.getElementById(\"xgOuter\");\r\n  var cw     = cardWidth();\r\n  var ow     = outer.offsetWidth;\r\n  var offset = Math.max(0, (ow \/ 2) - (cw \/ 2)) - current * cw;\r\n  track.style.transform = \"translateX(\" + offset + \"px)\";\r\n  document.querySelectorAll(\".xg-ev-dot\").forEach(function(d, i){\r\n    d.classList.toggle(\"xg-active\", i === current);\r\n  });\r\n}\r\n\r\nwindow.xgGoTo = function(i){\r\n  current = Math.max(0, Math.min(i, EVENTS.length - 1));\r\n  updateTrack();\r\n};\r\n\r\nwindow.xgMove = function(dir){ xgGoTo(current + dir); };\r\n\r\nwindow.xgOpenModal = function(i){\r\n  var ev = EVENTS[i];\r\n  document.getElementById(\"xgMLogo\").src = ev.logo;\r\n  document.getElementById(\"xgMLogo\").alt = ev.name;\r\n  document.getElementById(\"xgMName\").textContent = ev.name;\r\n\r\n  var fields = [\r\n    { icon:\"ti-calendar\", label:\"Date\",  val: ev.dateLabel },\r\n    { icon:\"ti-clock\",    label:\"Time\",  val: ev.time      },\r\n    { icon:\"ti-map-pin\",  label:\"Venue\", val: ev.venue     }\r\n  ];\r\n  document.getElementById(\"xgMFields\").innerHTML = fields.map(function(f){\r\n    return '<div class=\"xg-modal-row\">' +\r\n      '<i class=\"ti ' + f.icon + ' xg-modal-icon\" aria-hidden=\"true\"><\/i>' +\r\n      '<div><div class=\"xg-modal-label\">' + f.label + '<\/div>' +\r\n      '<div class=\"xg-modal-val\">' + f.val + '<\/div><\/div>' +\r\n      '<\/div>';\r\n  }).join(\"\");\r\n\r\n  var desc = ev.description === \"TBA\" ? \"Details to be announced.\" : ev.description;\r\n  document.getElementById(\"xgMDesc\").textContent = desc;\r\n  document.getElementById(\"xgMNotice\").textContent = ev.notice;\r\n  document.getElementById(\"xgMBook\").onclick = function(){\r\n    alert(\"Ticket booking coming soon!\");\r\n  };\r\n  document.getElementById(\"xgModal\").classList.add(\"xg-open\");\r\n};\r\n\r\nwindow.xgCloseModal = function(e){\r\n  if(e.target === document.getElementById(\"xgModal\"))\r\n    document.getElementById(\"xgModal\").classList.remove(\"xg-open\");\r\n};\r\n\r\nbuildCards();\r\nwindow.addEventListener(\"resize\", updateTrack);\r\n\r\n\/* Touch\/swipe support *\/\r\nvar swipeStart = 0;\r\ndocument.getElementById(\"xgTrack\").addEventListener(\"touchstart\", function(e){\r\n  swipeStart = e.touches[0].clientX;\r\n}, { passive: true });\r\ndocument.getElementById(\"xgTrack\").addEventListener(\"touchend\", function(e){\r\n  var dx = e.changedTouches[0].clientX - swipeStart;\r\n  if(Math.abs(dx) > 40) xgMove(dx < 0 ? 1 : -1);\r\n}, { passive: true });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c8446fe e-flex e-con-boxed e-con e-parent\" data-id=\"c8446fe\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70b69a0 elementor-widget elementor-widget-html\" data-id=\"70b69a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Events Widget<\/title>\r\n<style>\r\n\/* ============================================================\r\n   SCOPED PREFIX: xge__ \u2014 all styles isolated from WordPress\/Elementor\r\n   ============================================================ *\/\r\n\r\n*, *::before, *::after { box-sizing: border-box; }\r\n\r\n.xge__section {\r\n  width: 100%;\r\n  background: transparent;\r\n  padding: 40px 0 50px;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n\/* \u2500\u2500 Section heading \u2500\u2500 *\/\r\n.xge__heading {\r\n  text-align: center;\r\n  margin: 0 0 36px;\r\n}\r\n.xge__heading h2 {\r\n  font-size: clamp(22px, 4vw, 36px);\r\n  font-weight: 700;\r\n  letter-spacing: 0.12em;\r\n  text-transform: uppercase;\r\n  color: #ffffff;\r\n  margin: 0 0 8px;\r\n}\r\n.xge__heading p {\r\n  font-size: 13px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: rgba(255,255,255,0.45);\r\n  margin: 0;\r\n}\r\n\r\n\/* \u2500\u2500 Slider viewport \u2014 ONLY this clips; never shifts \u2500\u2500 *\/\r\n.xge__viewport {\r\n  width: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n\/* \u2500\u2500 Track \u2014 slides via transform only \u2500\u2500 *\/\r\n.xge__track {\r\n  display: flex;\r\n  align-items: stretch;\r\n  transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n  will-change: transform;\r\n}\r\n\r\n\/* \u2500\u2500 Card shell \u2500\u2500 *\/\r\n.xge__card {\r\n  flex: 0 0 var(--xge-card-w, 320px);\r\n  width: var(--xge-card-w, 320px);\r\n  margin: 0 var(--xge-gap, 16px);\r\n  background: #0a0a0a;\r\n  border-radius: 20px;\r\n  border: 1px solid rgba(255,255,255,0.18);\r\n  box-shadow:\r\n    0 0 0 0px rgba(255,255,255,0),\r\n    0 8px 32px rgba(0,0,0,0.55);\r\n  padding: 28px 24px 26px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0;\r\n  cursor: pointer;\r\n  transition:\r\n    border-color 0.45s ease,\r\n    box-shadow   0.45s ease,\r\n    transform    0.45s ease,\r\n    opacity      0.45s ease;\r\n  opacity: 0.45;\r\n  transform: scale(0.93);\r\n  position: relative;\r\n}\r\n\r\n.xge__card.xge--active {\r\n  border-color: rgba(255,255,255,0.65);\r\n  box-shadow:\r\n    0 0 18px  4px rgba(255,255,255,0.12),\r\n    0 0 42px 10px rgba(255,255,255,0.07),\r\n    0 12px 48px rgba(0,0,0,0.7);\r\n  opacity: 1;\r\n  transform: scale(1);\r\n}\r\n\r\n\/* \u2500\u2500 Card logo \u2500\u2500 *\/\r\n.xge__card-logo {\r\n  width: 100%;\r\n  height: 170px;\r\n  border-radius: 12px;\r\n  overflow: hidden;\r\n  background: #111;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-bottom: 22px;\r\n  flex-shrink: 0;\r\n}\r\n.xge__card-logo img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  display: block;\r\n}\r\n.xge__card-logo-fallback {\r\n  font-size: 11px;\r\n  letter-spacing: 0.1em;\r\n  color: rgba(255,255,255,0.25);\r\n  text-transform: uppercase;\r\n}\r\n\r\n\/* \u2500\u2500 Card text \u2500\u2500 *\/\r\n.xge__card-name {\r\n  font-size: 18px;\r\n  font-weight: 700;\r\n  color: #ffffff;\r\n  text-align: center;\r\n  letter-spacing: 0.04em;\r\n  margin: 0 0 6px;\r\n  line-height: 1.25;\r\n}\r\n.xge__card-date {\r\n  font-size: 12px;\r\n  color: rgba(255,255,255,0.45);\r\n  letter-spacing: 0.1em;\r\n  text-transform: uppercase;\r\n  margin: 0 0 20px;\r\n  text-align: center;\r\n}\r\n\r\n\/* \u2500\u2500 Countdown block \u2500\u2500 *\/\r\n.xge__countdown {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  margin-bottom: 24px;\r\n}\r\n.xge__countdown-number {\r\n  font-size: clamp(44px, 10vw, 60px);\r\n  font-weight: 800;\r\n  color: #ffffff;\r\n  line-height: 1;\r\n  letter-spacing: -0.02em;\r\n}\r\n.xge__countdown-label {\r\n  font-size: 11px;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: rgba(255,255,255,0.4);\r\n  margin-top: 5px;\r\n}\r\n\r\n\/* \u2500\u2500 Spacer pushes button to bottom \u2500\u2500 *\/\r\n.xge__card-spacer { flex: 1; }\r\n\r\n\/* \u2500\u2500 Ghost button \u2500\u2500 *\/\r\n.xge__btn-details {\r\n  width: 100%;\r\n  padding: 11px 0;\r\n  border: 1px solid rgba(255,255,255,0.55);\r\n  border-radius: 8px;\r\n  background: transparent;\r\n  color: #ffffff;\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  cursor: pointer;\r\n  transition: background 0.25s, border-color 0.25s;\r\n  font-family: inherit;\r\n}\r\n.xge__btn-details:hover {\r\n  background: rgba(255,255,255,0.08);\r\n  border-color: rgba(255,255,255,0.9);\r\n}\r\n\r\n\/* \u2500\u2500 Navigation \u2500\u2500 *\/\r\n.xge__nav {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 18px;\r\n  margin-top: 32px;\r\n}\r\n.xge__arrow {\r\n  width: 44px;\r\n  height: 44px;\r\n  border-radius: 50%;\r\n  border: 1px solid rgba(255,255,255,0.3);\r\n  background: transparent;\r\n  color: rgba(255,255,255,0.75);\r\n  font-size: 18px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  transition: border-color 0.2s, color 0.2s, background 0.2s;\r\n  line-height: 1;\r\n  flex-shrink: 0;\r\n}\r\n.xge__arrow:hover {\r\n  border-color: rgba(255,255,255,0.8);\r\n  color: #ffffff;\r\n  background: rgba(255,255,255,0.06);\r\n}\r\n.xge__arrow:disabled {\r\n  opacity: 0.25;\r\n  cursor: default;\r\n}\r\n.xge__dots {\r\n  display: flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n}\r\n.xge__dot {\r\n  width: 7px;\r\n  height: 7px;\r\n  border-radius: 50%;\r\n  background: rgba(255,255,255,0.25);\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: background 0.3s, transform 0.3s;\r\n  padding: 0;\r\n}\r\n.xge__dot.xge--active {\r\n  background: #ffffff;\r\n  transform: scale(1.3);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   MODAL\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.xge__modal-overlay {\r\n  display: none;\r\n  position: fixed;\r\n  inset: 0;\r\n  background: rgba(0,0,0,0.88);\r\n  z-index: 99999;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 16px;\r\n  backdrop-filter: blur(6px);\r\n  -webkit-backdrop-filter: blur(6px);\r\n}\r\n.xge__modal-overlay.xge--open {\r\n  display: flex;\r\n}\r\n\r\n.xge__modal {\r\n  background: #0d0d0d;\r\n  border: 1px solid rgba(255,255,255,0.2);\r\n  border-radius: 20px;\r\n  width: 100%;\r\n  max-width: 440px;\r\n  max-height: 90vh;\r\n  overflow-y: auto;\r\n  padding: 32px 28px 28px;\r\n  position: relative;\r\n  box-shadow:\r\n    0 0 24px 4px rgba(255,255,255,0.06),\r\n    0 24px 64px rgba(0,0,0,0.8);\r\n  scrollbar-width: thin;\r\n  scrollbar-color: rgba(255,255,255,0.15) transparent;\r\n}\r\n.xge__modal::-webkit-scrollbar { width: 4px; }\r\n.xge__modal::-webkit-scrollbar-track { background: transparent; }\r\n.xge__modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }\r\n\r\n.xge__modal-close {\r\n  position: absolute;\r\n  top: 16px;\r\n  right: 18px;\r\n  background: none;\r\n  border: none;\r\n  color: rgba(255,255,255,0.5);\r\n  font-size: 22px;\r\n  cursor: pointer;\r\n  line-height: 1;\r\n  padding: 4px;\r\n  transition: color 0.2s;\r\n}\r\n.xge__modal-close:hover { color: #ffffff; }\r\n\r\n.xge__modal-logo {\r\n  width: 100%;\r\n  height: 200px;\r\n  border-radius: 12px;\r\n  overflow: hidden;\r\n  background: #111;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-bottom: 22px;\r\n}\r\n.xge__modal-logo img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n.xge__modal-title {\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n  color: #ffffff;\r\n  margin: 0 0 20px;\r\n  letter-spacing: 0.03em;\r\n}\r\n\r\n.xge__modal-rows {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n  margin-bottom: 22px;\r\n}\r\n.xge__modal-row {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 12px;\r\n}\r\n.xge__modal-icon {\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 8px;\r\n  background: rgba(255,255,255,0.06);\r\n  border: 1px solid rgba(255,255,255,0.1);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  font-size: 14px;\r\n}\r\n.xge__modal-row-content {}\r\n.xge__modal-row-label {\r\n  font-size: 10px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: rgba(255,255,255,0.35);\r\n  margin-bottom: 2px;\r\n}\r\n.xge__modal-row-value {\r\n  font-size: 14px;\r\n  color: rgba(255,255,255,0.85);\r\n  font-weight: 500;\r\n}\r\n\r\n.xge__modal-divider {\r\n  border: none;\r\n  border-top: 1px solid rgba(255,255,255,0.08);\r\n  margin: 18px 0;\r\n}\r\n\r\n.xge__modal-desc-label {\r\n  font-size: 10px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: rgba(255,255,255,0.35);\r\n  margin-bottom: 10px;\r\n}\r\n.xge__modal-desc {\r\n  font-size: 14px;\r\n  color: rgba(255,255,255,0.7);\r\n  line-height: 1.7;\r\n  margin: 0 0 18px;\r\n}\r\n.xge__modal-notice {\r\n  font-size: 11px;\r\n  font-style: italic;\r\n  color: rgba(255,255,255,0.3);\r\n  line-height: 1.6;\r\n  margin-bottom: 26px;\r\n}\r\n\r\n.xge__btn-book {\r\n  width: 100%;\r\n  padding: 15px 0;\r\n  border-radius: 10px;\r\n  background: #ffffff;\r\n  border: none;\r\n  color: #000000;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  cursor: pointer;\r\n  transition: opacity 0.2s;\r\n  font-family: inherit;\r\n}\r\n.xge__btn-book:hover { opacity: 0.88; }\r\n\r\n\/* \u2500\u2500 Responsive tweaks \u2500\u2500 *\/\r\n@media (max-width: 600px) {\r\n  .xge__section { padding: 28px 0 40px; }\r\n  .xge__modal { padding: 24px 20px 22px; }\r\n  .xge__modal-logo { height: 160px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body style=\"background:#1a1a1a;\">\r\n\r\n<section class=\"xge__section\" id=\"xgeEventsSection\">\r\n\r\n  <div class=\"xge__heading\">\r\n    <h2>Upcoming Events<\/h2>\r\n    <p>Select an event to view details<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"xge__viewport\" id=\"xgeViewport\">\r\n    <div class=\"xge__track\" id=\"xgeTrack\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"xge__nav\">\r\n    <button class=\"xge__arrow\" id=\"xgePrev\" aria-label=\"Previous\">&#8592;<\/button>\r\n    <div class=\"xge__dots\" id=\"xgeDots\"><\/div>\r\n    <button class=\"xge__arrow\" id=\"xgeNext\" aria-label=\"Next\">&#8594;<\/button>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<div class=\"xge__modal-overlay\" id=\"xgeModal\" role=\"dialog\" aria-modal=\"true\">\r\n  <div class=\"xge__modal\">\r\n    <button class=\"xge__modal-close\" id=\"xgeModalClose\" aria-label=\"Close\">&#215;<\/button>\r\n    <div class=\"xge__modal-logo\"><img decoding=\"async\" id=\"xgeModalImg\" src=\"\" alt=\"\"><\/div>\r\n    <h3 class=\"xge__modal-title\" id=\"xgeModalTitle\"><\/h3>\r\n    <div class=\"xge__modal-rows\" id=\"xgeModalRows\"><\/div>\r\n    <hr class=\"xge__modal-divider\">\r\n    <div class=\"xge__modal-desc-label\">About<\/div>\r\n    <p class=\"xge__modal-desc\" id=\"xgeModalDesc\"><\/p>\r\n    <p class=\"xge__modal-notice\">By attending this event you acknowledge that photos and videos may be taken.<\/p>\r\n    <button class=\"xge__btn-book\" id=\"xgeBookBtn\">Book Ticket<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ============================================================\r\n   EVENTS DATA \u2014 edit this block to update events\r\n   ============================================================ *\/\r\nconst XGE_EVENTS = [\r\n  {\r\n    name: \"Garden of House\",\r\n    logo: \"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/IMG_3380.png\",\r\n    date: \"2026-08-09\",\r\n    dateTBA: false,\r\n    dateDisplay: \"09 August 2026\",\r\n    time: \"9 AM \u2013 00:00\",\r\n    venue: \"Trade Fair\",\r\n    description: \"Re-entry not permitted once you exit. Cooler box limit: 1 bottle. Stanley cups must arrive empty.\",\r\n    bookUrl: \"#\"\r\n  },\r\n  {\r\n    name: \"Under The Sun\",\r\n    logo: \"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/IMG_3382.png\",\r\n    date: \"2026-08-29\",\r\n    dateTBA: false,\r\n    dateDisplay: \"29 August 2026\",\r\n    time: \"TBA\",\r\n    venue: \"TBA\",\r\n    description: \"TBA\",\r\n    bookUrl: \"#\"\r\n  },\r\n  {\r\n    name: \"Private School\",\r\n    logo: \"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/IMG_3383.png\",\r\n    date: null,\r\n    dateTBA: true,\r\n    dateDisplay: \"TBA\",\r\n    time: \"TBA\",\r\n    venue: \"TBA\",\r\n    description: \"TBA\",\r\n    bookUrl: \"#\"\r\n  },\r\n  {\r\n    name: \"Warrina Land\",\r\n    logo: \"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/IMG_3381.png\",\r\n    date: null,\r\n    dateTBA: true,\r\n    dateDisplay: \"December (TBA)\",\r\n    time: \"TBA\",\r\n    venue: \"TBA\",\r\n    description: \"TBA\",\r\n    bookUrl: \"#\"\r\n  }\r\n];\r\n\/* ============================================================\r\n   END OF EVENTS DATA\r\n   ============================================================ *\/\r\n\r\n(function () {\r\n  \"use strict\";\r\n\r\n  function sortEvents(events) {\r\n    return [...events].sort((a, b) => {\r\n      const aDate = (!a.dateTBA && a.date) ? new Date(a.date) : null;\r\n      const bDate = (!b.dateTBA && b.date) ? new Date(b.date) : null;\r\n      if (aDate && bDate) return aDate - bDate;\r\n      if (aDate && !bDate) return -1;\r\n      if (!aDate && bDate) return 1;\r\n      return 0;\r\n    });\r\n  }\r\n\r\n  function daysRemaining(dateStr, isTBA) {\r\n    if (isTBA || !dateStr) return null;\r\n    const today = new Date();\r\n    today.setHours(0, 0, 0, 0);\r\n    const event = new Date(dateStr);\r\n    event.setHours(0, 0, 0, 0);\r\n    return Math.ceil((event - today) \/ 86400000);\r\n  }\r\n\r\n  function countdownHTML(days) {\r\n    if (days === null) {\r\n      return `<div class=\"xge__countdown\">\r\n        <span class=\"xge__countdown-number\" style=\"font-size:clamp(28px,6vw,40px);letter-spacing:0.1em;\">TBA<\/span>\r\n        <span class=\"xge__countdown-label\">date to be announced<\/span>\r\n      <\/div>`;\r\n    }\r\n    if (days < 0) {\r\n      return `<div class=\"xge__countdown\">\r\n        <span class=\"xge__countdown-number\" style=\"font-size:clamp(24px,5vw,34px);letter-spacing:0.04em;\">PAST<\/span>\r\n        <span class=\"xge__countdown-label\">event has ended<\/span>\r\n      <\/div>`;\r\n    }\r\n    if (days === 0) {\r\n      return `<div class=\"xge__countdown\">\r\n        <span class=\"xge__countdown-number\" style=\"font-size:clamp(24px,5vw,34px);\">TODAY<\/span>\r\n        <span class=\"xge__countdown-label\">happening now<\/span>\r\n      <\/div>`;\r\n    }\r\n    return `<div class=\"xge__countdown\">\r\n      <span class=\"xge__countdown-number\">${days}<\/span>\r\n      <span class=\"xge__countdown-label\">days to go<\/span>\r\n    <\/div>`;\r\n  }\r\n\r\n  const events = sortEvents(XGE_EVENTS);\r\n  let current = 0;\r\n  let cardW = 320, gap = 16;\r\n\r\n  const track    = document.getElementById(\"xgeTrack\");\r\n  const viewport = document.getElementById(\"xgeViewport\");\r\n  const dotsEl   = document.getElementById(\"xgeDots\");\r\n  const prevBtn  = document.getElementById(\"xgePrev\");\r\n  const nextBtn  = document.getElementById(\"xgeNext\");\r\n\r\n  function buildCards() {\r\n    track.innerHTML = \"\";\r\n    dotsEl.innerHTML = \"\";\r\n\r\n    events.forEach((ev, i) => {\r\n      const days = daysRemaining(ev.date, ev.dateTBA);\r\n      const card = document.createElement(\"div\");\r\n      card.className = \"xge__card\" + (i === current ? \" xge--active\" : \"\");\r\n      card.dataset.index = i;\r\n      card.innerHTML = `\r\n        <div class=\"xge__card-logo\">\r\n          <img decoding=\"async\" src=\"${ev.logo}\" alt=\"${ev.name}\" loading=\"lazy\"\r\n               onerror=\"this.style.display='none';this.nextElementSibling.style.display='flex'\">\r\n          <span class=\"xge__card-logo-fallback\" style=\"display:none;\">${ev.name}<\/span>\r\n        <\/div>\r\n        <div class=\"xge__card-name\">${ev.name}<\/div>\r\n        <div class=\"xge__card-date\">${ev.dateDisplay}<\/div>\r\n        ${countdownHTML(days)}\r\n        <div class=\"xge__card-spacer\"><\/div>\r\n        <button class=\"xge__btn-details\" data-index=\"${i}\">Details<\/button>\r\n      `;\r\n      track.appendChild(card);\r\n\r\n      const dot = document.createElement(\"button\");\r\n      dot.className = \"xge__dot\" + (i === current ? \" xge--active\" : \"\");\r\n      dot.setAttribute(\"aria-label\", `Go to ${ev.name}`);\r\n      dot.dataset.index = i;\r\n      dotsEl.appendChild(dot);\r\n    });\r\n\r\n    dotsEl.querySelectorAll(\".xge__dot\").forEach(d => {\r\n      d.addEventListener(\"click\", () => goTo(+d.dataset.index));\r\n    });\r\n    track.querySelectorAll(\".xge__btn-details\").forEach(b => {\r\n      b.addEventListener(\"click\", e => { e.stopPropagation(); openModal(+b.dataset.index); });\r\n    });\r\n    track.querySelectorAll(\".xge__card\").forEach(c => {\r\n      c.addEventListener(\"click\", () => { const idx = +c.dataset.index; if (idx !== current) goTo(idx); });\r\n    });\r\n  }\r\n\r\n  function calcSizes() {\r\n    const vw = viewport.offsetWidth;\r\n    if (vw <= 400)      { cardW = Math.min(vw - 48, 300); gap = 14; }\r\n    else if (vw <= 700) { cardW = Math.min(vw - 80, 320); gap = 16; }\r\n    else                { cardW = 340; gap = 20; }\r\n    document.documentElement.style.setProperty(\"--xge-card-w\", cardW + \"px\");\r\n    document.documentElement.style.setProperty(\"--xge-gap\",    gap   + \"px\");\r\n  }\r\n\r\n  function positionTrack() {\r\n    const vw       = viewport.offsetWidth;\r\n    const fullCard = cardW + gap * 2;\r\n    const offset   = (vw \/ 2) - (current * fullCard + fullCard \/ 2);\r\n    track.style.transform = `translateX(${offset}px)`;\r\n  }\r\n\r\n  function updateActive() {\r\n    track.querySelectorAll(\".xge__card\").forEach((c, i) => c.classList.toggle(\"xge--active\", i === current));\r\n    dotsEl.querySelectorAll(\".xge__dot\").forEach((d, i) => d.classList.toggle(\"xge--active\", i === current));\r\n    prevBtn.disabled = (current === 0);\r\n    nextBtn.disabled = (current === events.length - 1);\r\n  }\r\n\r\n  function goTo(idx) {\r\n    if (idx < 0 || idx >= events.length) return;\r\n    current = idx;\r\n    updateActive();\r\n    positionTrack();\r\n  }\r\n\r\n  prevBtn.addEventListener(\"click\", () => goTo(current - 1));\r\n  nextBtn.addEventListener(\"click\", () => goTo(current + 1));\r\n\r\n  let touchStartX = 0, touchStartY = 0, isSwiping = false;\r\n  viewport.addEventListener(\"touchstart\", e => {\r\n    touchStartX = e.touches[0].clientX;\r\n    touchStartY = e.touches[0].clientY;\r\n    isSwiping = false;\r\n  }, { passive: true });\r\n  viewport.addEventListener(\"touchmove\", e => {\r\n    const dx = e.touches[0].clientX - touchStartX;\r\n    const dy = e.touches[0].clientY - touchStartY;\r\n    if (!isSwiping && Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 8) isSwiping = true;\r\n  }, { passive: true });\r\n  viewport.addEventListener(\"touchend\", e => {\r\n    if (!isSwiping) return;\r\n    const dx = e.changedTouches[0].clientX - touchStartX;\r\n    if (Math.abs(dx) > 40) dx < 0 ? goTo(current + 1) : goTo(current - 1);\r\n    isSwiping = false;\r\n  }, { passive: true });\r\n\r\n  let resizeTimer;\r\n  window.addEventListener(\"resize\", () => {\r\n    clearTimeout(resizeTimer);\r\n    resizeTimer = setTimeout(() => { calcSizes(); positionTrack(); }, 80);\r\n  });\r\n\r\n  function init() {\r\n    calcSizes();\r\n    buildCards();\r\n    positionTrack();\r\n    updateActive();\r\n  }\r\n  init();\r\n\r\n  \/* \u2500\u2500 Modal \u2500\u2500 *\/\r\n  const modal      = document.getElementById(\"xgeModal\");\r\n  const closeBtn   = document.getElementById(\"xgeModalClose\");\r\n  const modalImg   = document.getElementById(\"xgeModalImg\");\r\n  const modalTitle = document.getElementById(\"xgeModalTitle\");\r\n  const modalRows  = document.getElementById(\"xgeModalRows\");\r\n  const modalDesc  = document.getElementById(\"xgeModalDesc\");\r\n  const bookBtn    = document.getElementById(\"xgeBookBtn\");\r\n\r\n  function openModal(idx) {\r\n    const ev = events[idx];\r\n    modalImg.src = ev.logo;\r\n    modalImg.alt = ev.name;\r\n    modalTitle.textContent = ev.name;\r\n    modalDesc.textContent = ev.description === \"TBA\" ? \"Details coming soon.\" : ev.description;\r\n    modalRows.innerHTML = [\r\n      { icon: \"\ud83d\udcc5\", label: \"Date\",  value: ev.dateDisplay },\r\n      { icon: \"\ud83d\udd50\", label: \"Time\",  value: ev.time  === \"TBA\" ? \"To be announced\" : ev.time  },\r\n      { icon: \"\ud83d\udccd\", label: \"Venue\", value: ev.venue === \"TBA\" ? \"To be announced\" : ev.venue },\r\n    ].map(r => `\r\n      <div class=\"xge__modal-row\">\r\n        <div class=\"xge__modal-icon\">${r.icon}<\/div>\r\n        <div class=\"xge__modal-row-content\">\r\n          <div class=\"xge__modal-row-label\">${r.label}<\/div>\r\n          <div class=\"xge__modal-row-value\">${r.value}<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    `).join(\"\");\r\n    bookBtn.onclick = () => { if (ev.bookUrl && ev.bookUrl !== \"#\") window.open(ev.bookUrl, \"_blank\"); };\r\n    modal.classList.add(\"xge--open\");\r\n    document.body.style.overflow = \"hidden\";\r\n  }\r\n\r\n  function closeModal() {\r\n    modal.classList.remove(\"xge--open\");\r\n    document.body.style.overflow = \"\";\r\n  }\r\n\r\n  closeBtn.addEventListener(\"click\", closeModal);\r\n  modal.addEventListener(\"click\", e => { if (e.target === modal) closeModal(); });\r\n  document.addEventListener(\"keydown\", e => { if (e.key === \"Escape\") closeModal(); });\r\n\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e630b8a e-flex e-con-boxed e-con e-parent\" data-id=\"e630b8a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-18e100a elementor-widget elementor-widget-heading\" data-id=\"18e100a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Services<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb69d58 elementor-widget elementor-widget-html\" data-id=\"eb69d58\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>BEE Services<\/title>\r\n  <style>\r\n\r\n    \/* =============================================\r\n       SERVICES SECTION \u2014 BEE\r\n       Easy to edit:\r\n       - Change image URLs in the <img decoding=\"async\" src=\"...\"> tags\r\n       - Change button link in the <a href=\"...\"> tags\r\n       - Adjust --card-width to resize cards\r\n       - Adjust --gap to change spacing\r\n    ============================================= *\/\r\n\r\n    :root {\r\n      --card-width: 280px;        \/* Width of each service card *\/\r\n      --card-radius: 18px;        \/* Corner roundness *\/\r\n      --gap: 20px;                \/* Space between cards *\/\r\n      --btn-radius: 50px;         \/* Button corner roundness *\/\r\n    }\r\n\r\n    * {\r\n      margin: 0;\r\n      padding: 0;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    body {\r\n      background: transparent;   \/* Inherits WordPress black *\/\r\n      font-family: 'Segoe UI', sans-serif;\r\n    }\r\n\r\n    \/* --- Scroll Track --- *\/\r\n    .bee-services {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      padding: 10px 0 24px;\r\n      background: transparent;\r\n    }\r\n\r\n    \/* --- Scrollable Row --- *\/\r\n    .bee-track {\r\n      display: flex;\r\n      gap: var(--gap);\r\n      overflow-x: auto;\r\n      scroll-snap-type: x mandatory;\r\n      -webkit-overflow-scrolling: touch;\r\n      padding: 10px 24px 16px;\r\n      scrollbar-width: none;        \/* Hide scrollbar Firefox *\/\r\n    }\r\n    .bee-track::-webkit-scrollbar {\r\n      display: none;                \/* Hide scrollbar Chrome\/Safari *\/\r\n    }\r\n\r\n    \/* --- Each Service Card --- *\/\r\n    .bee-card {\r\n      flex: 0 0 var(--card-width);\r\n      scroll-snap-align: start;\r\n      border-radius: var(--card-radius);\r\n      overflow: hidden;\r\n      position: relative;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      background: transparent;\r\n\r\n      \/* Subtle lift on hover *\/\r\n      transition: transform 0.35s ease;\r\n    }\r\n    .bee-card:hover {\r\n      transform: translateY(-5px);\r\n    }\r\n\r\n    \/* --- Service Image --- *\/\r\n    .bee-card img {\r\n      width: 100%;\r\n      aspect-ratio: 3 \/ 4;       \/* Portrait format \u2014 matches originals *\/\r\n      object-fit: cover;\r\n      border-radius: var(--card-radius);\r\n      display: block;\r\n\r\n      \/* Very subtle dark frame *\/\r\n      box-shadow: 0 8px 32px rgba(0,0,0,0.55);\r\n    }\r\n\r\n    \/* --- Inquire Button --- *\/\r\n    .bee-btn {\r\n      display: inline-block;\r\n      margin-top: 16px;\r\n      padding: 10px 28px;\r\n      border: 1.5px solid rgba(255,255,255,0.75);\r\n      border-radius: var(--btn-radius);\r\n      background: transparent;\r\n      color: #ffffff;\r\n      font-size: 12px;\r\n      font-weight: 600;\r\n      letter-spacing: 1.5px;\r\n      text-transform: uppercase;\r\n      text-decoration: none;\r\n      cursor: pointer;\r\n\r\n      transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;\r\n    }\r\n    .bee-btn:hover {\r\n      background: #ffffff;\r\n      color: #000000;\r\n      border-color: #ffffff;\r\n    }\r\n\r\n    \/* =============================================\r\n       SCROLL DOTS INDICATOR\r\n    ============================================= *\/\r\n    .bee-dots {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 7px;\r\n      margin-top: 16px;\r\n    }\r\n    .bee-dot {\r\n      width: 6px;\r\n      height: 6px;\r\n      border-radius: 50%;\r\n      background: rgba(255,255,255,0.25);\r\n      border: none;\r\n      padding: 0;\r\n      cursor: pointer;\r\n      transition: background 0.3s, transform 0.3s;\r\n    }\r\n    .bee-dot.active {\r\n      background: #ffffff;\r\n      transform: scale(1.4);\r\n    }\r\n\r\n    \/* =============================================\r\n       RESPONSIVE BREAKPOINTS\r\n       - Mobile: 1 card visible\r\n       - Tablet: 2 cards visible\r\n       - Desktop: 3\u20134 cards visible (auto scroll)\r\n    ============================================= *\/\r\n\r\n    \/* Mobile \u2014 show ~1.2 cards so user knows to scroll *\/\r\n    @media (max-width: 480px) {\r\n      :root {\r\n        --card-width: calc(85vw);\r\n      }\r\n      .bee-track {\r\n        padding: 10px 16px 16px;\r\n      }\r\n    }\r\n\r\n    \/* Tablet *\/\r\n    @media (min-width: 481px) and (max-width: 900px) {\r\n      :root {\r\n        --card-width: calc(44vw);\r\n      }\r\n    }\r\n\r\n    \/* Desktop \u2014 cards sit naturally in row *\/\r\n    @media (min-width: 901px) {\r\n      :root {\r\n        --card-width: 260px;\r\n      }\r\n      .bee-track {\r\n        justify-content: center;    \/* Center the row on large screens *\/\r\n        flex-wrap: nowrap;\r\n        overflow-x: visible;        \/* No scroll needed, all visible *\/\r\n      }\r\n      .bee-services {\r\n        overflow: visible;\r\n      }\r\n    }\r\n\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <section class=\"bee-services\" id=\"bee-services\">\r\n\r\n    <!-- ============================================\r\n         SCROLLABLE CARDS ROW\r\n         To add a new card: copy one <div class=\"bee-card\">...<\/div> block\r\n         To change image: edit src=\"...\"\r\n         To change button link: edit href=\"...\"\r\n    ============================================= -->\r\n    <div class=\"bee-track\" id=\"beeTrack\">\r\n\r\n      <!-- \u2500\u2500 SERVICE 1 \u2500\u2500 -->\r\n      <div class=\"bee-card\">\r\n        <img decoding=\"async\"\r\n          src=\"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/wedding-19.jpg\"\r\n          alt=\"Concert & Music Show Management\"\r\n          loading=\"lazy\"\r\n        \/>\r\n        <a class=\"bee-btn\" href=\"#\">Inquire More<\/a>\r\n        <!--  \u2191 Replace # with your actual inquiry link or page URL -->\r\n      <\/div>\r\n\r\n      <!-- \u2500\u2500 SERVICE 2 \u2500\u2500 -->\r\n      <div class=\"bee-card\">\r\n        <img decoding=\"async\"\r\n          src=\"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/wedding-17.jpg\"\r\n          alt=\"Birthday & Private Parties\"\r\n          loading=\"lazy\"\r\n        \/>\r\n        <a class=\"bee-btn\" href=\"#\">Inquire More<\/a>\r\n      <\/div>\r\n\r\n      <!-- \u2500\u2500 SERVICE 3 \u2500\u2500 -->\r\n      <div class=\"bee-card\">\r\n        <img decoding=\"async\"\r\n          src=\"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/wedding-5.jpeg\"\r\n          alt=\"Fundraisers & Charity Events\"\r\n          loading=\"lazy\"\r\n        \/>\r\n        <a class=\"bee-btn\" href=\"#\">Inquire More<\/a>\r\n      <\/div>\r\n\r\n      <!-- \u2500\u2500 SERVICE 4 \u2500\u2500 -->\r\n      <div class=\"bee-card\">\r\n        <img decoding=\"async\"\r\n          src=\"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/wedding-4.jpeg\"\r\n          alt=\"Service 4\"\r\n          loading=\"lazy\"\r\n        \/>\r\n        <a class=\"bee-btn\" href=\"#\">Inquire More<\/a>\r\n      <\/div>\r\n\r\n    <\/div><!-- \/bee-track -->\r\n\r\n    <!-- Dot indicators (auto-generated by JS) -->\r\n    <div class=\"bee-dots\" id=\"beeDots\"><\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <script>\r\n    \/\/ =============================================\r\n    \/\/ AUTO SCROLL \u2014 cards slide slowly on their own\r\n    \/\/ on desktop. Stops when user hovers\/touches.\r\n    \/\/ =============================================\r\n\r\n    const track  = document.getElementById('beeTrack');\r\n    const cards  = track.querySelectorAll('.bee-card');\r\n    const dotsEl = document.getElementById('beeDots');\r\n\r\n    \/\/ --- Build dots ---\r\n    cards.forEach((_, i) => {\r\n      const d = document.createElement('button');\r\n      d.className = 'bee-dot' + (i === 0 ? ' active' : '');\r\n      d.setAttribute('aria-label', 'Go to service ' + (i + 1));\r\n      d.addEventListener('click', () => {\r\n        cards[i].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });\r\n      });\r\n      dotsEl.appendChild(d);\r\n    });\r\n\r\n    const dots = dotsEl.querySelectorAll('.bee-dot');\r\n\r\n    \/\/ --- Update active dot on scroll ---\r\n    let scrollTimer;\r\n    track.addEventListener('scroll', () => {\r\n      clearTimeout(scrollTimer);\r\n      scrollTimer = setTimeout(() => {\r\n        const trackLeft = track.getBoundingClientRect().left;\r\n        let closest = 0, minDist = Infinity;\r\n        cards.forEach((card, i) => {\r\n          const dist = Math.abs(card.getBoundingClientRect().left - trackLeft);\r\n          if (dist < minDist) { minDist = dist; closest = i; }\r\n        });\r\n        dots.forEach((d, i) => d.classList.toggle('active', i === closest));\r\n      }, 80);\r\n    });\r\n\r\n    \/\/ --- Auto-scroll (desktop only) ---\r\n    let autoPlay;\r\n    let currentCard = 0;\r\n\r\n    function startAuto() {\r\n      autoPlay = setInterval(() => {\r\n        currentCard = (currentCard + 1) % cards.length;\r\n        cards[currentCard].scrollIntoView({\r\n          behavior: 'smooth',\r\n          block: 'nearest',\r\n          inline: 'start'\r\n        });\r\n      }, 3200); \/\/ \u2190 Change this number (ms) to adjust auto-scroll speed\r\n    }\r\n\r\n    function stopAuto() {\r\n      clearInterval(autoPlay);\r\n    }\r\n\r\n    \/\/ Only auto-scroll on smaller screens (where overflow scroll is visible)\r\n    if (window.innerWidth < 901) {\r\n      startAuto();\r\n      track.addEventListener('mouseenter', stopAuto);\r\n      track.addEventListener('touchstart',  stopAuto, { passive: true });\r\n      track.addEventListener('mouseleave',  startAuto);\r\n    }\r\n  <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4303874 e-flex e-con-boxed e-con e-parent\" data-id=\"4303874\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-382c98e elementor-widget elementor-widget-html\" data-id=\"382c98e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<style>\r\n.social-wrap{\r\n    display:flex;\r\n    justify-content:center;\r\n    align-items:center;\r\n    gap:14px;\r\n    flex-wrap:wrap;\r\n    width:100%;\r\n}\r\n\r\n.social-link{\r\n    width:52px;\r\n    height:52px;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    border:1px solid rgba(255,255,255,.4);\r\n    border-radius:50%;\r\n    color:#fff;\r\n    text-decoration:none;\r\n    transition:all .3s ease;\r\n    font-size:20px;\r\n}\r\n\r\n.social-link:hover{\r\n    transform:translateY(-3px);\r\n    border-color:#fff;\r\n}\r\n\r\n@media(max-width:768px){\r\n    .social-wrap{\r\n        gap:10px;\r\n    }\r\n\r\n    .social-link{\r\n        width:48px;\r\n        height:48px;\r\n        font-size:18px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"social-wrap\">\r\n\r\n    <a href=\"#\" class=\"social-link\" target=\"_blank\" aria-label=\"Instagram\">\r\n        <i class=\"fab fa-instagram\"><\/i>\r\n    <\/a>\r\n\r\n    <a href=\"#\" class=\"social-link\" target=\"_blank\" aria-label=\"WhatsApp\">\r\n        <i class=\"fab fa-whatsapp\"><\/i>\r\n    <\/a>\r\n\r\n    <a href=\"#\" class=\"social-link\" target=\"_blank\" aria-label=\"Facebook\">\r\n        <i class=\"fab fa-facebook-f\"><\/i>\r\n    <\/a>\r\n\r\n    <a href=\"#\" class=\"social-link\" target=\"_blank\" aria-label=\"Snapchat\">\r\n        <i class=\"fab fa-snapchat\"><\/i>\r\n    <\/a>\r\n\r\n    <a href=\"#\" class=\"social-link\" target=\"_blank\" aria-label=\"YouTube\">\r\n        <i class=\"fab fa-youtube\"><\/i>\r\n    <\/a>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1e14a51 e-flex e-con-boxed e-con e-parent\" data-id=\"1e14a51\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a68eb1 elementor-widget elementor-widget-html\" data-id=\"3a68eb1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>BEE Booking<\/title>\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@300;400;600&family=Montserrat:wght@300;400;500;600&display=swap');\r\n\r\n  * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n  .bee-wrapper {\r\n    font-family: 'Montserrat', sans-serif;\r\n    background: #0a0a0a;\r\n    color: #e8e0d0;\r\n    min-height: 100vh;\r\n    padding: 0;\r\n    overflow-x: hidden;\r\n  }\r\n\r\n  .bee-hero {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 60px 20px 40px;\r\n    position: relative;\r\n    background: #0a0a0a;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .bee-hero::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 500px;\r\n    height: 500px;\r\n    background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%);\r\n    animation: pulseGlow 4s ease-in-out infinite;\r\n    pointer-events: none;\r\n  }\r\n\r\n  @keyframes pulseGlow {\r\n    0%, 100% { opacity: 0.4; transform: translate(-50%,-50%) scale(1); }\r\n    50% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }\r\n  }\r\n\r\n  .bee-logo-wrap {\r\n    position: relative;\r\n    animation: logoEntry 1.4s cubic-bezier(0.16,1,0.3,1) both;\r\n  }\r\n\r\n  @keyframes logoEntry {\r\n    0% { opacity: 0; transform: scale(0.7) translateY(30px); filter: blur(12px); }\r\n    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }\r\n  }\r\n\r\n  .bee-logo-wrap img {\r\n    width: 200px;\r\n    height: 200px;\r\n    object-fit: contain;\r\n    filter: drop-shadow(0 0 30px rgba(212,175,55,0.35)) drop-shadow(0 0 60px rgba(212,175,55,0.15));\r\n    animation: logoFloat 6s ease-in-out infinite 1.4s;\r\n    background: #000000;\r\n    border-radius: 12px;\r\n    padding: 10px;\r\n  }\r\n\r\n  @keyframes logoFloat {\r\n    0%, 100% { transform: translateY(0px); filter: drop-shadow(0 0 30px rgba(212,175,55,0.35)) drop-shadow(0 0 60px rgba(212,175,55,0.15)); }\r\n    50% { transform: translateY(-10px); filter: drop-shadow(0 0 50px rgba(212,175,55,0.55)) drop-shadow(0 0 90px rgba(212,175,55,0.25)); }\r\n  }\r\n\r\n  .bee-logo-shimmer {\r\n    position: absolute;\r\n    top: 0; left: -100%;\r\n    width: 60%;\r\n    height: 100%;\r\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);\r\n    animation: shimmer 3s ease-in-out infinite 2s;\r\n    pointer-events: none;\r\n    border-radius: 12px;\r\n  }\r\n\r\n  @keyframes shimmer {\r\n    0% { left: -100%; }\r\n    50%, 100% { left: 150%; }\r\n  }\r\n\r\n  .bee-tagline {\r\n    margin-top: 28px;\r\n    text-align: center;\r\n    animation: fadeUp 1s ease both 0.8s;\r\n  }\r\n\r\n  @keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  .bee-tagline h1 {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: clamp(1.8rem, 5vw, 3rem);\r\n    font-weight: 300;\r\n    letter-spacing: 0.3em;\r\n    color: #f0eeea;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .bee-tagline .gold-line {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 14px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .bee-tagline .gold-line span {\r\n    font-size: 0.65rem;\r\n    letter-spacing: 0.45em;\r\n    color: #d4af37;\r\n    text-transform: uppercase;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .bee-tagline .gold-line::before,\r\n  .bee-tagline .gold-line::after {\r\n    content: '';\r\n    width: 50px;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, #d4af37);\r\n  }\r\n  .bee-tagline .gold-line::after {\r\n    background: linear-gradient(90deg, #d4af37, transparent);\r\n  }\r\n\r\n  .bee-divider {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 16px;\r\n    padding: 20px 40px;\r\n    animation: fadeUp 1s ease both 1s;\r\n  }\r\n  .bee-divider::before, .bee-divider::after {\r\n    content: '';\r\n    flex: 1;\r\n    max-width: 200px;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4));\r\n  }\r\n  .bee-divider::after {\r\n    background: linear-gradient(90deg, rgba(212,175,55,0.4), transparent);\r\n  }\r\n  .bee-divider .diamond {\r\n    width: 8px; height: 8px;\r\n    background: #d4af37;\r\n    transform: rotate(45deg);\r\n  }\r\n\r\n  .bee-form-section {\r\n    max-width: 780px;\r\n    margin: 0 auto;\r\n    padding: 0 24px 60px;\r\n    animation: fadeUp 1s ease both 1.1s;\r\n  }\r\n\r\n  .bee-form-header {\r\n    text-align: center;\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  .bee-form-header h2 {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: clamp(1.4rem, 3vw, 2rem);\r\n    font-weight: 300;\r\n    letter-spacing: 0.2em;\r\n    color: #f0eeea;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .bee-form-header p {\r\n    margin-top: 10px;\r\n    font-size: 0.75rem;\r\n    letter-spacing: 0.12em;\r\n    color: rgba(232,224,208,0.55);\r\n    line-height: 1.8;\r\n  }\r\n\r\n  .bee-form {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 20px;\r\n  }\r\n\r\n  .bee-field {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n    position: relative;\r\n  }\r\n\r\n  .bee-field.full { grid-column: 1 \/ -1; }\r\n\r\n  .bee-field label {\r\n    font-size: 0.65rem;\r\n    letter-spacing: 0.3em;\r\n    text-transform: uppercase;\r\n    color: #d4af37;\r\n    font-weight: 600;\r\n  }\r\n\r\n  .bee-field input,\r\n  .bee-field select,\r\n  .bee-field textarea {\r\n    background: rgba(255,255,255,0.03);\r\n    border: 1px solid rgba(212,175,55,0.2);\r\n    border-radius: 4px;\r\n    color: #e8e0d0;\r\n    font-family: 'Montserrat', sans-serif;\r\n    font-size: 0.82rem;\r\n    padding: 14px 16px;\r\n    transition: all 0.3s ease;\r\n    outline: none;\r\n    width: 100%;\r\n    -webkit-appearance: none;\r\n  }\r\n\r\n  .bee-field select {\r\n    cursor: pointer;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4af37' stroke-width='1.5' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\r\n    background-repeat: no-repeat;\r\n    background-position: right 16px center;\r\n    padding-right: 42px;\r\n  }\r\n\r\n  .bee-field select option {\r\n    background: #1a1a1a;\r\n    color: #e8e0d0;\r\n  }\r\n\r\n  .bee-field input::placeholder,\r\n  .bee-field textarea::placeholder {\r\n    color: rgba(232,224,208,0.3);\r\n    font-size: 0.78rem;\r\n  }\r\n\r\n  .bee-field input:focus,\r\n  .bee-field select:focus,\r\n  .bee-field textarea:focus {\r\n    border-color: rgba(212,175,55,0.7);\r\n    background: rgba(212,175,55,0.04);\r\n    box-shadow: 0 0 0 3px rgba(212,175,55,0.07);\r\n  }\r\n\r\n  .bee-field textarea {\r\n    resize: vertical;\r\n    min-height: 110px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .bee-services-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\r\n    gap: 10px;\r\n    margin-top: 4px;\r\n  }\r\n\r\n  .bee-check-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 12px 14px;\r\n    border: 1px solid rgba(212,175,55,0.15);\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    transition: all 0.25s ease;\r\n    background: rgba(255,255,255,0.02);\r\n  }\r\n\r\n  .bee-check-item:hover {\r\n    border-color: rgba(212,175,55,0.45);\r\n    background: rgba(212,175,55,0.04);\r\n  }\r\n\r\n  .bee-check-item input[type=\"checkbox\"] {\r\n    width: 16px; height: 16px;\r\n    accent-color: #d4af37;\r\n    cursor: pointer;\r\n    flex-shrink: 0;\r\n    margin: 0; padding: 0;\r\n    border: none;\r\n    background: transparent;\r\n  }\r\n\r\n  .bee-check-item span {\r\n    font-size: 0.72rem;\r\n    letter-spacing: 0.08em;\r\n    color: rgba(232,224,208,0.75);\r\n  }\r\n\r\n  .bee-slider-wrap {\r\n    position: relative;\r\n  }\r\n\r\n  .budget-display {\r\n    position: absolute;\r\n    right: 0; top: -28px;\r\n    font-size: 0.72rem;\r\n    color: #d4af37;\r\n    letter-spacing: 0.1em;\r\n    font-weight: 600;\r\n  }\r\n\r\n  input[type=\"range\"] {\r\n    -webkit-appearance: none;\r\n    width: 100%;\r\n    height: 3px;\r\n    background: linear-gradient(90deg, #d4af37 var(--pct, 30%), rgba(212,175,55,0.2) var(--pct, 30%));\r\n    border-radius: 2px;\r\n    outline: none;\r\n    cursor: pointer;\r\n    border: none;\r\n    padding: 0;\r\n  }\r\n\r\n  input[type=\"range\"]::-webkit-slider-thumb {\r\n    -webkit-appearance: none;\r\n    width: 18px; height: 18px;\r\n    background: #d4af37;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    box-shadow: 0 0 10px rgba(212,175,55,0.5);\r\n    transition: transform 0.2s;\r\n  }\r\n\r\n  input[type=\"range\"]::-webkit-slider-thumb:hover {\r\n    transform: scale(1.25);\r\n  }\r\n\r\n  .bee-submit-wrap {\r\n    grid-column: 1 \/ -1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 14px;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .bee-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    padding: 17px 50px;\r\n    background: transparent;\r\n    border: 1px solid #d4af37;\r\n    color: #d4af37;\r\n    font-family: 'Montserrat', sans-serif;\r\n    font-size: 0.7rem;\r\n    letter-spacing: 0.35em;\r\n    text-transform: uppercase;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: all 0.35s ease;\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-radius: 2px;\r\n  }\r\n\r\n  .bee-btn::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: -100%;\r\n    width: 100%; height: 100%;\r\n    background: #d4af37;\r\n    transition: left 0.35s ease;\r\n    z-index: 0;\r\n  }\r\n\r\n  .bee-btn:hover::before { left: 0; }\r\n  .bee-btn:hover { color: #0a0a0a; }\r\n\r\n  .bee-btn span, .bee-btn svg {\r\n    position: relative; z-index: 1;\r\n  }\r\n\r\n  .bee-success {\r\n    display: none;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 20px;\r\n    padding: 60px 20px;\r\n    text-align: center;\r\n    animation: fadeUp 0.7s ease both;\r\n  }\r\n\r\n  .bee-success.show { display: flex; }\r\n\r\n  .bee-success-icon {\r\n    width: 72px; height: 72px;\r\n    border-radius: 50%;\r\n    border: 2px solid #d4af37;\r\n    display: flex; align-items: center; justify-content: center;\r\n    animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;\r\n  }\r\n\r\n  @keyframes popIn {\r\n    from { transform: scale(0); opacity: 0; }\r\n    to { transform: scale(1); opacity: 1; }\r\n  }\r\n\r\n  .bee-success-icon svg { width: 32px; height: 32px; stroke: #d4af37; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }\r\n\r\n  .bee-success h3 {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 1.8rem;\r\n    font-weight: 300;\r\n    letter-spacing: 0.2em;\r\n    color: #f0eeea;\r\n  }\r\n\r\n  .bee-success p {\r\n    font-size: 0.78rem;\r\n    letter-spacing: 0.1em;\r\n    color: rgba(232,224,208,0.55);\r\n    max-width: 380px;\r\n    line-height: 1.9;\r\n  }\r\n\r\n  .bee-footer-info {\r\n    border-top: 1px solid rgba(212,175,55,0.1);\r\n    padding: 30px 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 40px;\r\n    flex-wrap: wrap;\r\n    animation: fadeUp 1s ease both 1.3s;\r\n  }\r\n\r\n  .bee-contact-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .bee-contact-item svg {\r\n    width: 16px; height: 16px;\r\n    stroke: #d4af37; fill: none;\r\n    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .bee-contact-item span {\r\n    font-size: 0.68rem;\r\n    letter-spacing: 0.1em;\r\n    color: rgba(232,224,208,0.5);\r\n  }\r\n\r\n  .sending-dots { display: none; gap: 5px; align-items: center; }\r\n  .sending-dots.show { display: flex; }\r\n  .sending-dots span {\r\n    width: 5px; height: 5px;\r\n    background: currentColor;\r\n    border-radius: 50%;\r\n    animation: dotBounce 0.6s ease-in-out infinite;\r\n  }\r\n  .sending-dots span:nth-child(2) { animation-delay: 0.1s; }\r\n  .sending-dots span:nth-child(3) { animation-delay: 0.2s; }\r\n  @keyframes dotBounce {\r\n    0%, 100% { transform: translateY(0); }\r\n    50% { transform: translateY(-4px); }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .bee-form { grid-template-columns: 1fr; }\r\n    .bee-field.full { grid-column: 1; }\r\n    .bee-footer-info { gap: 20px; flex-direction: column; align-items: center; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"bee-wrapper\">\r\n\r\n  <div class=\"bee-hero\">\r\n    <div class=\"bee-logo-wrap\">\r\n      <img decoding=\"async\" src=\"https:\/\/xgems.store\/bee\/wp-content\/uploads\/2026\/06\/BEE-about.png\" alt=\"BEE \u2014 Bulawayo Exclusive Events\">\r\n      <div class=\"bee-logo-shimmer\"><\/div>\r\n    <\/div>\r\n    <div class=\"bee-tagline\">\r\n      <h1>Bulawayo Exclusive Events<\/h1>\r\n      <div class=\"gold-line\"><span>Book Your Exclusive Event<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"bee-divider\"><div class=\"diamond\"><\/div><\/div>\r\n\r\n  <div class=\"bee-form-section\">\r\n    <div class=\"bee-form-header\">\r\n      <h2>Event Booking Enquiry<\/h2>\r\n      <p>Fill in the details below and we'll reach out to confirm your booking.<br>All events \u2014 weddings, concerts, private parties & more.<\/p>\r\n    <\/div>\r\n\r\n    <form class=\"bee-form\" id=\"beeForm\" novalidate>\r\n\r\n      <div class=\"bee-field\">\r\n        <label>Full Name *<\/label>\r\n        <input type=\"text\" id=\"bee_name\" placeholder=\"Your full name\" required>\r\n      <\/div>\r\n\r\n      <div class=\"bee-field\">\r\n        <label>Phone *<\/label>\r\n        <input type=\"tel\" id=\"bee_phone\" placeholder=\"+263 7XX XXX XXX\" required>\r\n      <\/div>\r\n\r\n      <div class=\"bee-field\">\r\n        <label>Email Address<\/label>\r\n        <input type=\"email\" id=\"bee_email\" placeholder=\"your@email.com\">\r\n      <\/div>\r\n\r\n      <div class=\"bee-field\">\r\n        <label>Event Type *<\/label>\r\n        <select id=\"bee_event_type\" required>\r\n          <option value=\"\" disabled selected>Select event type<\/option>\r\n          <optgroup label=\"Social Events\">\r\n            <option>Wedding<\/option>\r\n            <option>Anniversary<\/option>\r\n            <option>Birthday Party<\/option>\r\n            <option>Private Party<\/option>\r\n            <option>Religious Celebration<\/option>\r\n            <option>Cultural Event<\/option>\r\n          <\/optgroup>\r\n          <optgroup label=\"Public Events\">\r\n            <option>Concert \/ Music Show<\/option>\r\n            <option>Festival<\/option>\r\n            <option>Sports Event<\/option>\r\n            <option>Exhibition<\/option>\r\n            <option>Local Gig<\/option>\r\n          <\/optgroup>\r\n          <optgroup label=\"Non-Profit\">\r\n            <option>Fundraiser<\/option>\r\n            <option>Charity Event<\/option>\r\n            <option>Awareness Campaign<\/option>\r\n            <option>Community Gathering<\/option>\r\n          <\/optgroup>\r\n          <option>Other<\/option>\r\n        <\/select>\r\n      <\/div>\r\n\r\n      <div class=\"bee-field\">\r\n        <label>Event Date *<\/label>\r\n        <input type=\"date\" id=\"bee_date\" required>\r\n      <\/div>\r\n\r\n      <div class=\"bee-field\">\r\n        <label>Expected Guests<\/label>\r\n        <select id=\"bee_guests\">\r\n          <option value=\"\" disabled selected>Approximate guests<\/option>\r\n          <option>Under 50<\/option>\r\n          <option>50 \u2013 100<\/option>\r\n          <option>100 \u2013 250<\/option>\r\n          <option>250 \u2013 500<\/option>\r\n          <option>500 \u2013 1,000<\/option>\r\n          <option>1,000+<\/option>\r\n        <\/select>\r\n      <\/div>\r\n\r\n      <div class=\"bee-field\">\r\n        <label>Preferred Venue \/ Location<\/label>\r\n        <input type=\"text\" id=\"bee_venue\" placeholder=\"City, venue name or TBD\">\r\n      <\/div>\r\n\r\n      <div class=\"bee-field full\">\r\n        <label>Services Required<\/label>\r\n        <div class=\"bee-services-grid\">\r\n          <label class=\"bee-check-item\"><input type=\"checkbox\" value=\"Event Planning & Conceptualization\"><span>Event Planning<\/span><\/label>\r\n          <label class=\"bee-check-item\"><input type=\"checkbox\" value=\"Venue Selection\"><span>Venue Selection<\/span><\/label>\r\n          <label class=\"bee-check-item\"><input type=\"checkbox\" value=\"Catering & Beverages\"><span>Catering & Beverages<\/span><\/label>\r\n          <label class=\"bee-check-item\"><input type=\"checkbox\" value=\"Audiovisual & Lighting\"><span>Audiovisual & Lighting<\/span><\/label>\r\n          <label class=\"bee-check-item\"><input type=\"checkbox\" value=\"Staging & D\u00e9cor\"><span>Staging & D\u00e9cor<\/span><\/label>\r\n          <label class=\"bee-check-item\"><input type=\"checkbox\" value=\"Event Marketing & Promotion\"><span>Marketing & Promotion<\/span><\/label>\r\n          <label class=\"bee-check-item\"><input type=\"checkbox\" value=\"Transportation & Logistics\"><span>Transportation<\/span><\/label>\r\n          <label class=\"bee-check-item\"><input type=\"checkbox\" value=\"On-Site Event Management\"><span>On-Site Management<\/span><\/label>\r\n          <label class=\"bee-check-item\"><input type=\"checkbox\" value=\"Photography & Videography\"><span>Photography \/ Video<\/span><\/label>\r\n          <label class=\"bee-check-item\"><input type=\"checkbox\" value=\"Full Event Package\"><span>Full Event Package<\/span><\/label>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"bee-field full\">\r\n        <label>Estimated Budget (USD)<\/label>\r\n        <div class=\"bee-slider-wrap\" style=\"margin-top:28px;\">\r\n          <span class=\"budget-display\" id=\"budgetDisplay\">$1,500<\/span>\r\n          <input type=\"range\" id=\"bee_budget\" min=\"200\" max=\"50000\" step=\"100\" value=\"1500\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"bee-field full\">\r\n        <label>Event Vision & Special Requirements<\/label>\r\n        <textarea id=\"bee_message\" placeholder=\"Describe your event vision, theme, special requests, or anything we should know to make your event unforgettable\u2026\"><\/textarea>\r\n      <\/div>\r\n\r\n      <div class=\"bee-field\">\r\n        <label>Booking Urgency<\/label>\r\n        <select id=\"bee_urgency\">\r\n          <option value=\"\" disabled selected>Timeline<\/option>\r\n          <option>ASAP \/ Urgent<\/option>\r\n          <option>Within 1 month<\/option>\r\n          <option>1 \u2013 3 months<\/option>\r\n          <option>3 \u2013 6 months<\/option>\r\n          <option>6+ months<\/option>\r\n          <option>Just Enquiring<\/option>\r\n        <\/select>\r\n      <\/div>\r\n\r\n      <div class=\"bee-submit-wrap\">\r\n        <button type=\"submit\" class=\"bee-btn\" id=\"beeSubmitBtn\">\r\n          <span id=\"btnText\">Send<\/span>\r\n          <div class=\"sending-dots\" id=\"sendingDots\">\r\n            <span><\/span><span><\/span><span><\/span>\r\n          <\/div>\r\n        <\/button>\r\n      <\/div>\r\n\r\n    <\/form>\r\n\r\n    <div class=\"bee-success\" id=\"beeSuccess\">\r\n      <div class=\"bee-success-icon\">\r\n        <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\r\n      <\/div>\r\n      <h3>Enquiry Sent!<\/h3>\r\n      <p>Your booking enquiry has been sent. We'll be in touch to confirm your exclusive event.<\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"bee-footer-info\">\r\n    <div class=\"bee-contact-item\">\r\n      <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.67A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z\"><\/path><\/svg>\r\n      <span>+263 772 764 749<\/span>\r\n    <\/div>\r\n    <div class=\"bee-contact-item\">\r\n      <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg>\r\n      <span>bulawayoexclusive@gmail.com<\/span>\r\n    <\/div>\r\n    <div class=\"bee-contact-item\">\r\n      <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\r\n      <span>Mon \u2013 Sat, 08:00 \u2013 18:00<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  const slider = document.getElementById('bee_budget');\r\n  const display = document.getElementById('budgetDisplay');\r\n\r\n  function updateSlider() {\r\n    const val = parseInt(slider.value);\r\n    const min = parseInt(slider.min);\r\n    const max = parseInt(slider.max);\r\n    const pct = ((val - min) \/ (max - min) * 100).toFixed(1);\r\n    slider.style.setProperty('--pct', pct + '%');\r\n    display.textContent = '$' + val.toLocaleString();\r\n  }\r\n\r\n  slider.addEventListener('input', updateSlider);\r\n  updateSlider();\r\n\r\n  document.getElementById('beeForm').addEventListener('submit', function(e) {\r\n    e.preventDefault();\r\n\r\n    const name      = document.getElementById('bee_name').value.trim();\r\n    const phone     = document.getElementById('bee_phone').value.trim();\r\n    const email     = document.getElementById('bee_email').value.trim();\r\n    const eventType = document.getElementById('bee_event_type').value;\r\n    const date      = document.getElementById('bee_date').value;\r\n    const guests    = document.getElementById('bee_guests').value;\r\n    const venue     = document.getElementById('bee_venue').value.trim();\r\n    const budget    = document.getElementById('bee_budget').value;\r\n    const message   = document.getElementById('bee_message').value.trim();\r\n    const urgency   = document.getElementById('bee_urgency').value;\r\n\r\n    if (!name || !phone || !eventType || !date) {\r\n      alert('Please fill in all required fields (Name, Phone, Event Type, Date).');\r\n      return;\r\n    }\r\n\r\n    const checked = [...document.querySelectorAll('.bee-services-grid input[type=\"checkbox\"]:checked')];\r\n    const services = checked.length ? checked.map(c => c.value).join(', ') : 'Not specified';\r\n\r\n    const dateObj = new Date(date + 'T00:00:00');\r\n    const niceDate = dateObj.toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });\r\n\r\n    const subject = 'BEE Event Booking Enquiry \u2014 ' + name;\r\n\r\n    const body = [\r\n      'NEW EVENT BOOKING \u2014 BEE',\r\n      '-----------------------------',\r\n      'Name: ' + name,\r\n      'Phone: ' + phone,\r\n      email ? 'Email: ' + email : null,\r\n      'Event Type: ' + eventType,\r\n      'Date: ' + niceDate,\r\n      guests ? 'Guests: ' + guests : null,\r\n      venue ? 'Venue: ' + venue : null,\r\n      'Budget: $' + parseInt(budget).toLocaleString() + ' USD',\r\n      'Services: ' + services,\r\n      urgency ? 'Urgency: ' + urgency : null,\r\n      message ? '\\nVision & Notes:\\n' + message : null,\r\n      '-----------------------------',\r\n      'Sent via BEE Booking Form'\r\n    ].filter(Boolean).join('\\n');\r\n\r\n    const btn = document.getElementById('beeSubmitBtn');\r\n    const btnText = document.getElementById('btnText');\r\n    const dots = document.getElementById('sendingDots');\r\n\r\n    btn.disabled = true;\r\n    btnText.style.display = 'none';\r\n    dots.classList.add('show');\r\n\r\n    setTimeout(() => {\r\n      window.location.href = 'mailto:miketest@gmail.com?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);\r\n\r\n      dots.classList.remove('show');\r\n      document.getElementById('beeForm').style.display = 'none';\r\n      document.getElementById('beeSuccess').classList.add('show');\r\n    }, 1200);\r\n  });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>G.O.H tickets now available Upcoming Events Plan Your Event &#8592; &#8594; &times; Book Ticket Events Widget Upcoming Events Select an event to view details &#8592; &#8594; &#215; About By attending this event you acknowledge that photos and videos may be taken. Book Ticket Our Services BEE Services Inquire More Inquire More Inquire More Inquire More [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"disabled","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3637","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xgems.store\/bee\/wp-json\/wp\/v2\/pages\/3637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xgems.store\/bee\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xgems.store\/bee\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xgems.store\/bee\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xgems.store\/bee\/wp-json\/wp\/v2\/comments?post=3637"}],"version-history":[{"count":40,"href":"https:\/\/xgems.store\/bee\/wp-json\/wp\/v2\/pages\/3637\/revisions"}],"predecessor-version":[{"id":3716,"href":"https:\/\/xgems.store\/bee\/wp-json\/wp\/v2\/pages\/3637\/revisions\/3716"}],"wp:attachment":[{"href":"https:\/\/xgems.store\/bee\/wp-json\/wp\/v2\/media?parent=3637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}