{"id":219,"date":"2026-10-03T13:03:21","date_gmt":"2026-10-03T13:03:21","guid":{"rendered":"https:\/\/cdtmaker.club\/?page_id=219"},"modified":"2026-10-29T22:34:34","modified_gmt":"2026-10-29T22:34:34","slug":"elementor-219","status":"publish","type":"page","link":"https:\/\/cdtmaker.club\/?page_id=219","title":{"rendered":"AboutUs"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"219\" class=\"elementor elementor-219\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0215f5d e-flex e-con-boxed e-con e-parent\" data-id=\"0215f5d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67637d7 elementor-widget elementor-widget-html\" data-id=\"67637d7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- MAKERS CLUB - ABOUT US HERO WITH ANIMATED CUSTOM MOUSE CURSOR -->\r\n<section id=\"mc-about-hero\">\r\n\r\n  <style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');\r\n\r\n    #mc-about-hero {\r\n      --navy: #06191D;\r\n      --teal: #00B8AA;\r\n      --gold: #F3D09A;\r\n      --white: #FFFFFF;\r\n      --light: #F5F7F8;\r\n      --charcoal: #222E33;\r\n\r\n      position: relative;\r\n      width: 100vw;\r\n      max-width: 100vw;\r\n      min-height: 100vh;\r\n      left: 50%;\r\n      margin-left: -50vw;\r\n      overflow: hidden;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      padding: 110px 7%;\r\n      background: var(--navy);\r\n      color: var(--white);\r\n      font-family: 'Inter', sans-serif;\r\n      isolation: isolate;\r\n    }\r\n\r\n    #mc-about-hero * {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    \/* Animated background grid *\/\r\n    #mc-about-hero .mc-grid {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: -3;\r\n      background-image:\r\n        linear-gradient(rgba(0,184,170,.09) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(0,184,170,.09) 1px, transparent 1px);\r\n      background-size: 65px 65px;\r\n      mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);\r\n      animation: mc-grid-move 18s linear infinite;\r\n    }\r\n\r\n    @keyframes mc-grid-move {\r\n      from { transform: translateY(0); }\r\n      to { transform: translateY(65px); }\r\n    }\r\n\r\n    \/* Ambient glowing shapes *\/\r\n    #mc-about-hero .mc-glow {\r\n      position: absolute;\r\n      border-radius: 50%;\r\n      filter: blur(2px);\r\n      pointer-events: none;\r\n      z-index: -2;\r\n    }\r\n\r\n    #mc-about-hero .mc-glow-one {\r\n      width: 420px;\r\n      height: 420px;\r\n      top: -140px;\r\n      right: -100px;\r\n      background: radial-gradient(circle, rgba(0,184,170,.20), transparent 70%);\r\n      animation: mc-float 9s ease-in-out infinite;\r\n    }\r\n\r\n    #mc-about-hero .mc-glow-two {\r\n      width: 380px;\r\n      height: 380px;\r\n      bottom: -150px;\r\n      left: -100px;\r\n      background: radial-gradient(circle, rgba(243,208,154,.13), transparent 70%);\r\n      animation: mc-float 11s ease-in-out infinite reverse;\r\n    }\r\n\r\n    @keyframes mc-float {\r\n      0%, 100% { transform: translate(0, 0); }\r\n      50% { transform: translate(25px, -30px); }\r\n    }\r\n\r\n    \/* Decorative orbit *\/\r\n    #mc-about-hero .mc-orbit {\r\n      position: absolute;\r\n      width: 390px;\r\n      height: 390px;\r\n      right: 8%;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      border: 1px solid rgba(0,184,170,.22);\r\n      border-radius: 50%;\r\n      z-index: -1;\r\n      animation: mc-spin 28s linear infinite;\r\n    }\r\n\r\n    #mc-about-hero .mc-orbit::before,\r\n    #mc-about-hero .mc-orbit::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      border: 1px solid rgba(243,208,154,.20);\r\n      border-radius: 50%;\r\n    }\r\n\r\n    #mc-about-hero .mc-orbit::before {\r\n      inset: 35px -35px;\r\n      transform: rotate(55deg);\r\n    }\r\n\r\n    #mc-about-hero .mc-orbit::after {\r\n      inset: 75px -75px;\r\n      transform: rotate(-45deg);\r\n    }\r\n\r\n    @keyframes mc-spin {\r\n      to { rotate: 360deg; }\r\n    }\r\n\r\n    #mc-about-hero .mc-orbit-dot {\r\n      position: absolute;\r\n      width: 12px;\r\n      height: 12px;\r\n      top: 42px;\r\n      left: 42px;\r\n      border-radius: 50%;\r\n      background: var(--gold);\r\n      box-shadow: 0 0 22px rgba(243,208,154,.8);\r\n    }\r\n\r\n    \/* Floating decorative circles *\/\r\n    #mc-about-hero .mc-particle {\r\n      position: absolute;\r\n      width: 7px;\r\n      height: 7px;\r\n      border-radius: 50%;\r\n      background: var(--teal);\r\n      opacity: .75;\r\n      box-shadow: 0 0 15px var(--teal);\r\n      animation: mc-particle-float 6s ease-in-out infinite;\r\n      pointer-events: none;\r\n    }\r\n\r\n    #mc-about-hero .mc-particle.p1 { top: 22%; left: 15%; }\r\n    #mc-about-hero .mc-particle.p2 { top: 72%; left: 27%; animation-delay: 1s; }\r\n    #mc-about-hero .mc-particle.p3 { top: 18%; right: 30%; animation-delay: 2s; }\r\n    #mc-about-hero .mc-particle.p4 { bottom: 20%; right: 15%; animation-delay: 3s; }\r\n\r\n    @keyframes mc-particle-float {\r\n      0%, 100% { transform: translateY(0); opacity: .4; }\r\n      50% { transform: translateY(-25px); opacity: 1; }\r\n    }\r\n\r\n    \/* Hero content *\/\r\n    #mc-about-hero .mc-hero-content {\r\n      width: 100%;\r\n      max-width: 1050px;\r\n      position: relative;\r\n      z-index: 2;\r\n      text-align: center;\r\n      margin: 0 auto;\r\n      animation: mc-hero-enter 1s ease both;\r\n    }\r\n\r\n    @keyframes mc-hero-enter {\r\n      from { opacity: 0; transform: translateY(35px); }\r\n      to { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    #mc-about-hero .mc-eyebrow {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      margin-bottom: 28px;\r\n      color: var(--gold);\r\n      font-size: 13px;\r\n      font-weight: 700;\r\n      letter-spacing: 3px;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    #mc-about-hero .mc-eyebrow::before,\r\n    #mc-about-hero .mc-eyebrow::after {\r\n      content: \"\";\r\n      width: 25px;\r\n      height: 1px;\r\n      background: var(--teal);\r\n    }\r\n\r\n    #mc-about-hero h1 {\r\n      max-width: 1000px;\r\n      margin: 0 auto 28px;\r\n      color: var(--white);\r\n      font-family: 'Space Grotesk', sans-serif;\r\n      font-size: clamp(48px, 7vw, 82px);\r\n      font-weight: 700;\r\n      line-height: 1.08;\r\n      letter-spacing: -3px;\r\n    }\r\n\r\n    #mc-about-hero h1 span {\r\n      color: var(--teal);\r\n      display: inline-block;\r\n    }\r\n\r\n    #mc-about-hero .mc-intro {\r\n      max-width: 720px;\r\n      margin: 0 auto 38px;\r\n      color: rgba(245,247,248,.78);\r\n      font-size: clamp(16px, 1.5vw, 19px);\r\n      line-height: 1.85;\r\n      font-weight: 400;\r\n    }\r\n\r\n    \/* Main button *\/\r\n    #mc-about-hero .mc-hero-button {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 13px;\r\n      min-height: 54px;\r\n      padding: 0 30px;\r\n      border-radius: 7px;\r\n      background: var(--teal);\r\n      color: var(--navy);\r\n      text-decoration: none;\r\n      font-size: 15px;\r\n      font-weight: 700;\r\n      transition: background .3s ease, transform .3s ease, box-shadow .3s ease;\r\n      box-shadow: 0 8px 30px rgba(0,184,170,.15);\r\n    }\r\n\r\n    #mc-about-hero .mc-hero-button:hover {\r\n      background: var(--gold);\r\n      color: var(--navy);\r\n      transform: translateY(-4px);\r\n      box-shadow: 0 12px 35px rgba(243,208,154,.2);\r\n    }\r\n\r\n    #mc-about-hero .mc-hero-button svg {\r\n      width: 18px;\r\n      height: 18px;\r\n      transition: transform .3s ease;\r\n    }\r\n\r\n    #mc-about-hero .mc-hero-button:hover svg {\r\n      transform: translateX(5px);\r\n    }\r\n\r\n    \/* CUSTOM ANIMATED MOUSE CURSOR *\/\r\n    #mc-about-hero .mc-cursor-dot,\r\n    #mc-about-hero .mc-cursor-ring {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      pointer-events: none;\r\n      border-radius: 50%;\r\n      opacity: 0;\r\n      z-index: 999999;\r\n      will-change: transform;\r\n    }\r\n\r\n    #mc-about-hero .mc-cursor-dot {\r\n      width: 8px;\r\n      height: 8px;\r\n      background: var(--teal);\r\n      box-shadow: 0 0 14px var(--teal), 0 0 25px rgba(0,184,170,.5);\r\n      transform: translate3d(-50%, -50%, 0);\r\n    }\r\n\r\n    #mc-about-hero .mc-cursor-ring {\r\n      width: 36px;\r\n      height: 36px;\r\n      border: 1px solid rgba(0,184,170,.85);\r\n      background: rgba(0,184,170,.04);\r\n      box-shadow: 0 0 15px rgba(0,184,170,.16);\r\n      transform: translate3d(-50%, -50%, 0);\r\n      transition:\r\n        width .25s ease,\r\n        height .25s ease,\r\n        background .25s ease,\r\n        border-color .25s ease,\r\n        box-shadow .25s ease,\r\n        opacity .2s ease;\r\n    }\r\n\r\n    #mc-about-hero .mc-cursor-dot.mc-cursor-visible,\r\n    #mc-about-hero .mc-cursor-ring.mc-cursor-visible {\r\n      opacity: 1;\r\n    }\r\n\r\n    #mc-about-hero .mc-cursor-ring.mc-cursor-hover {\r\n      width: 58px;\r\n      height: 58px;\r\n      border-color: var(--gold);\r\n      background: rgba(243,208,154,.10);\r\n      box-shadow: 0 0 25px rgba(243,208,154,.35);\r\n    }\r\n\r\n    \/* Hide standard mouse cursor only inside this hero *\/\r\n    @media (hover: hover) and (pointer: fine) {\r\n      #mc-about-hero,\r\n      #mc-about-hero * {\r\n        cursor: none !important;\r\n      }\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 768px) {\r\n      #mc-about-hero {\r\n        min-height: 85vh;\r\n        padding: 100px 7%;\r\n      }\r\n\r\n      #mc-about-hero h1 {\r\n        letter-spacing: -1.5px;\r\n        font-size: clamp(43px, 10vw, 64px);\r\n      }\r\n\r\n      #mc-about-hero .mc-intro {\r\n        font-size: 16px;\r\n      }\r\n\r\n      #mc-about-hero .mc-orbit {\r\n        width: 260px;\r\n        height: 260px;\r\n        right: -100px;\r\n        opacity: .55;\r\n      }\r\n\r\n      #mc-about-hero .mc-orbit::before {\r\n        inset: 25px -25px;\r\n      }\r\n\r\n      #mc-about-hero .mc-orbit::after {\r\n        inset: 50px -50px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      #mc-about-hero {\r\n        min-height: 78vh;\r\n        padding: 90px 6%;\r\n      }\r\n\r\n      #mc-about-hero .mc-eyebrow {\r\n        font-size: 11px;\r\n        letter-spacing: 2px;\r\n      }\r\n\r\n      #mc-about-hero h1 {\r\n        font-size: 44px;\r\n      }\r\n\r\n      #mc-about-hero .mc-hero-button {\r\n        width: 100%;\r\n        max-width: 280px;\r\n      }\r\n\r\n      #mc-about-hero .mc-orbit {\r\n        right: -150px;\r\n        opacity: .35;\r\n      }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      #mc-about-hero *,\r\n      #mc-about-hero *::before,\r\n      #mc-about-hero *::after {\r\n        animation-duration: .01ms !important;\r\n        animation-iteration-count: 1 !important;\r\n        transition-duration: .01ms !important;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- Animated background -->\r\n  <div class=\"mc-grid\"><\/div>\r\n  <div class=\"mc-glow mc-glow-one\"><\/div>\r\n  <div class=\"mc-glow mc-glow-two\"><\/div>\r\n\r\n  <div class=\"mc-orbit\">\r\n    <span class=\"mc-orbit-dot\"><\/span>\r\n  <\/div>\r\n\r\n  <span class=\"mc-particle p1\"><\/span>\r\n  <span class=\"mc-particle p2\"><\/span>\r\n  <span class=\"mc-particle p3\"><\/span>\r\n  <span class=\"mc-particle p4\"><\/span>\r\n\r\n  <!-- Hero content -->\r\n  <div class=\"mc-hero-content\">\r\n\r\n    <div class=\"mc-eyebrow\">ABOUT MAKERS CLUB<\/div>\r\n\r\n    <h1>\r\n      Where Ideas<br \/>\r\n      Become <span>Things.<\/span>\r\n    <\/h1>\r\n\r\n    <p class=\"mc-intro\">\r\n      Makers Club is a creative community where curiosity meets\r\n      innovation. We bring people together to explore ideas, learn\r\n      new skills and turn imagination into something real through\r\n      creativity, technology and hands-on making.\r\n    <\/p>\r\n\r\n    <a class=\"mc-hero-button\" href=\"#mc-community\">\r\n      Explore Our Community\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n        <path d=\"M5 12h14M13 5l7 7-7 7\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\/>\r\n      <\/svg>\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n  <!-- Custom cursor elements -->\r\n  <div class=\"mc-cursor-dot\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"mc-cursor-ring\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"mc-bottom-line\"><\/div>\r\n\r\n  <!-- Custom cursor animation script -->\r\n  <script>\r\n    (function () {\r\n      const hero = document.getElementById('mc-about-hero');\r\n      if (!hero || hero.dataset.cursorReady === 'true') return;\r\n\r\n      hero.dataset.cursorReady = 'true';\r\n\r\n      const dot = hero.querySelector('.mc-cursor-dot');\r\n      const ring = hero.querySelector('.mc-cursor-ring');\r\n\r\n      const desktopPointer = window.matchMedia(\r\n        '(hover: hover) and (pointer: fine)'\r\n      );\r\n\r\n      if (!desktopPointer.matches) {\r\n        dot.style.display = 'none';\r\n        ring.style.display = 'none';\r\n        return;\r\n      }\r\n\r\n      let mouseX = 0;\r\n      let mouseY = 0;\r\n      let ringX = 0;\r\n      let ringY = 0;\r\n      let animationFrame;\r\n\r\n      function moveCursor(event) {\r\n        mouseX = event.clientX;\r\n        mouseY = event.clientY;\r\n\r\n        dot.style.transform =\r\n          `translate3d(${mouseX}px, ${mouseY}px, 0) translate(-50%, -50%)`;\r\n\r\n        dot.classList.add('mc-cursor-visible');\r\n        ring.classList.add('mc-cursor-visible');\r\n\r\n        if (!animationFrame) {\r\n          animationFrame = requestAnimationFrame(animateRing);\r\n        }\r\n      }\r\n\r\n      function animateRing() {\r\n        ringX += (mouseX - ringX) * 0.17;\r\n        ringY += (mouseY - ringY) * 0.17;\r\n\r\n        ring.style.transform =\r\n          `translate3d(${ringX}px, ${ringY}px, 0) translate(-50%, -50%)`;\r\n\r\n        if (\r\n          Math.abs(mouseX - ringX) > 0.1 ||\r\n          Math.abs(mouseY - ringY) > 0.1\r\n        ) {\r\n          animationFrame = requestAnimationFrame(animateRing);\r\n        } else {\r\n          animationFrame = null;\r\n        }\r\n      }\r\n\r\n      hero.addEventListener('pointerenter', function(event) {\r\n        if (event.pointerType === 'mouse') {\r\n          mouseX = event.clientX;\r\n          mouseY = event.clientY;\r\n          ringX = mouseX;\r\n          ringY = mouseY;\r\n          moveCursor(event);\r\n        }\r\n      });\r\n\r\n      hero.addEventListener('pointermove', function(event) {\r\n        if (event.pointerType === 'mouse') {\r\n          moveCursor(event);\r\n        }\r\n      });\r\n\r\n      hero.addEventListener('pointerleave', function() {\r\n        dot.classList.remove('mc-cursor-visible');\r\n        ring.classList.remove('mc-cursor-visible');\r\n        ring.classList.remove('mc-cursor-hover');\r\n      });\r\n\r\n      hero.querySelectorAll(\r\n        'a, button, [role=\"button\"]'\r\n      ).forEach(function(element) {\r\n        element.addEventListener('pointerenter', function() {\r\n          ring.classList.add('mc-cursor-hover');\r\n        });\r\n\r\n        element.addEventListener('pointerleave', function() {\r\n          ring.classList.remove('mc-cursor-hover');\r\n        });\r\n      });\r\n\r\n    })();\r\n  <\/script>\r\n\r\n<\/section>\r\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-ee67e26 e-flex e-con-boxed e-con e-parent\" data-id=\"ee67e26\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be64569 elementor-widget elementor-widget-html\" data-id=\"be64569\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- ==================================================\r\n MAKERS CLUB - ABOUT US SECTION 02\r\n WHO WE ARE + THREE PHOTO INTERACTIVE GALLERY\r\n================================================== -->\r\n\r\n<section id=\"mc-who-we-are\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');\r\n\r\n#mc-who-we-are {\r\n  --navy: #06191D;\r\n  --teal: #00B8AA;\r\n  --gold: #F3D09A;\r\n  --white: #FFFFFF;\r\n  --light: #F5F7F8;\r\n  --charcoal: #222E33;\r\n\r\n  position: relative;\r\n  width: 100vw;\r\n  max-width: 100vw;\r\n  left: 50%;\r\n  margin-left: -50vw;\r\n  padding: 110px 7% 100px;\r\n  overflow: hidden;\r\n  background: var(--navy);\r\n  color: var(--white);\r\n  font-family: 'Inter', sans-serif;\r\n  isolation: isolate;\r\n}\r\n\r\n#mc-who-we-are * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* BACKGROUND DECORATION *\/\r\n#mc-who-we-are .mc-bg-glow {\r\n  position: absolute;\r\n  width: 400px;\r\n  height: 400px;\r\n  border-radius: 50%;\r\n  filter: blur(100px);\r\n  opacity: .12;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n}\r\n\r\n#mc-who-we-are .mc-bg-glow-one {\r\n  background: var(--teal);\r\n  top: 5%;\r\n  right: -200px;\r\n}\r\n\r\n#mc-who-we-are .mc-bg-glow-two {\r\n  background: var(--gold);\r\n  bottom: 0;\r\n  left: -220px;\r\n}\r\n\r\n\/* MAIN CONTENT *\/\r\n#mc-who-we-are .mc-who-container {\r\n  max-width: 1250px;\r\n  margin: 0 auto;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1.05fr;\r\n  align-items: center;\r\n  gap: 70px;\r\n}\r\n\r\n\/* TEXT CONTENT *\/\r\n#mc-who-we-are .mc-who-text {\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n#mc-who-we-are .mc-section-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  margin-bottom: 25px;\r\n  color: var(--gold);\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  letter-spacing: 2.5px;\r\n  text-transform: uppercase;\r\n}\r\n\r\n#mc-who-we-are .mc-section-label::before {\r\n  content: \"\";\r\n  width: 32px;\r\n  height: 2px;\r\n  background: var(--teal);\r\n}\r\n\r\n#mc-who-we-are h2 {\r\n  margin: 0 0 27px;\r\n  color: var(--white);\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  font-size: clamp(40px, 5vw, 62px);\r\n  font-weight: 700;\r\n  line-height: 1.12;\r\n  letter-spacing: -2px;\r\n}\r\n\r\n#mc-who-we-are h2 span {\r\n  color: var(--teal);\r\n}\r\n\r\n#mc-who-we-are .mc-who-intro {\r\n  margin: 0 0 20px;\r\n  color: rgba(245,247,248,.88);\r\n  font-size: 18px;\r\n  line-height: 1.85;\r\n}\r\n\r\n#mc-who-we-are .mc-who-description {\r\n  margin: 0 0 30px;\r\n  color: rgba(245,247,248,.68);\r\n  font-size: 16px;\r\n  line-height: 1.9;\r\n}\r\n\r\n\/* FEATURE POINTS *\/\r\n#mc-who-we-are .mc-who-points {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 18px 22px;\r\n  margin-top: 30px;\r\n}\r\n\r\n#mc-who-we-are .mc-who-point {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  color: var(--white);\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n}\r\n\r\n#mc-who-we-are .mc-point-icon {\r\n  width: 34px;\r\n  height: 34px;\r\n  flex: 0 0 34px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: 1px solid rgba(0,184,170,.5);\r\n  border-radius: 50%;\r\n  color: var(--teal);\r\n  font-size: 17px;\r\n  transition: .3s ease;\r\n}\r\n\r\n#mc-who-we-are .mc-who-point:hover .mc-point-icon {\r\n  background: var(--teal);\r\n  color: var(--navy);\r\n  transform: rotate(12deg);\r\n}\r\n\r\n\/* PHOTO GALLERY *\/\r\n#mc-who-we-are .mc-gallery-wrap {\r\n  position: relative;\r\n  min-width: 0;\r\n  width: 100%;\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-heading {\r\n  margin-bottom: 15px;\r\n  color: var(--gold);\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  letter-spacing: 2px;\r\n  text-transform: uppercase;\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-stage {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 430px;\r\n  perspective: 1200px;\r\n}\r\n\r\n\/* IMAGE CARDS *\/\r\n#mc-who-we-are .mc-gallery-card {\r\n  position: absolute;\r\n  width: 68%;\r\n  height: 340px;\r\n  top: 40px;\r\n  left: 16%;\r\n  overflow: hidden;\r\n  border: 2px solid rgba(0,184,170,.35);\r\n  border-radius: 13px;\r\n  background: var(--charcoal);\r\n  cursor: pointer;\r\n  box-shadow: 0 25px 65px rgba(0,0,0,.4);\r\n  transition:\r\n    transform .75s cubic-bezier(.2,.8,.2,1),\r\n    opacity .75s ease,\r\n    filter .75s ease,\r\n    box-shadow .75s ease,\r\n    border-color .75s ease;\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-card img {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  object-fit: cover;\r\n  transition: transform .9s ease;\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-card:hover img {\r\n  transform: scale(1.07);\r\n}\r\n\r\n\/* IMAGE CAPTION *\/\r\n#mc-who-we-are .mc-gallery-card::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(\r\n    to top,\r\n    rgba(6,25,29,.85),\r\n    transparent 60%\r\n  );\r\n  pointer-events: none;\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-caption {\r\n  position: absolute;\r\n  bottom: 23px;\r\n  left: 22px;\r\n  z-index: 2;\r\n  color: var(--white);\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n  letter-spacing: .3px;\r\n}\r\n\r\n\/* LEFT IMAGE *\/\r\n#mc-who-we-are .mc-gallery-card[data-position=\"left\"] {\r\n  transform: translateX(-43%) scale(.76) rotateY(12deg);\r\n  opacity: .75;\r\n  filter: brightness(.65);\r\n  z-index: 1;\r\n}\r\n\r\n\/* RIGHT IMAGE *\/\r\n#mc-who-we-are .mc-gallery-card[data-position=\"right\"] {\r\n  transform: translateX(43%) scale(.76) rotateY(-12deg);\r\n  opacity: .75;\r\n  filter: brightness(.65);\r\n  z-index: 2;\r\n}\r\n\r\n\/* FRONT IMAGE *\/\r\n#mc-who-we-are .mc-gallery-card[data-position=\"front\"] {\r\n  transform: translateX(0) scale(1);\r\n  opacity: 1;\r\n  filter: brightness(1);\r\n  z-index: 3;\r\n  border-color: var(--teal);\r\n  box-shadow: 0 25px 70px rgba(0,184,170,.2);\r\n}\r\n\r\n\/* GALLERY CONTROLS *\/\r\n#mc-who-we-are .mc-gallery-controls {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 22px;\r\n  margin-top: 0;\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-arrow {\r\n  width: 45px;\r\n  height: 45px;\r\n  border: 1px solid rgba(0,184,170,.6);\r\n  border-radius: 50%;\r\n  background: transparent;\r\n  color: var(--teal);\r\n  font-size: 23px;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition: .3s ease;\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-arrow:hover {\r\n  background: var(--teal);\r\n  color: var(--navy);\r\n  transform: scale(1.1);\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-indicators {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 9px;\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-indicators button {\r\n  width: 9px;\r\n  height: 9px;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 20px;\r\n  background: rgba(255,255,255,.35);\r\n  cursor: pointer;\r\n  transition: .35s ease;\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-indicators button.active {\r\n  width: 30px;\r\n  background: var(--teal);\r\n}\r\n\r\n\/* SCROLL REVEAL *\/\r\n#mc-who-we-are .mc-reveal {\r\n  opacity: 0;\r\n  transform: translateY(35px);\r\n  transition: opacity .9s ease, transform .9s ease;\r\n}\r\n\r\n#mc-who-we-are .mc-reveal.mc-visible {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-reveal {\r\n  opacity: 0;\r\n  transform: translateX(45px);\r\n  transition: opacity 1s ease, transform 1s ease;\r\n}\r\n\r\n#mc-who-we-are .mc-gallery-reveal.mc-visible {\r\n  opacity: 1;\r\n  transform: translateX(0);\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n@media(max-width: 950px) {\r\n  #mc-who-we-are {\r\n    padding: 90px 6%;\r\n  }\r\n\r\n  #mc-who-we-are .mc-who-container {\r\n    grid-template-columns: 1fr;\r\n    gap: 55px;\r\n  }\r\n\r\n  #mc-who-we-are .mc-gallery-stage {\r\n    max-width: 750px;\r\n    margin: 0 auto;\r\n  }\r\n}\r\n\r\n@media(max-width: 600px) {\r\n  #mc-who-we-are {\r\n    padding: 75px 6%;\r\n  }\r\n\r\n  #mc-who-we-are h2 {\r\n    font-size: 43px;\r\n    letter-spacing: -1px;\r\n  }\r\n\r\n  #mc-who-we-are .mc-who-intro {\r\n    font-size: 16px;\r\n  }\r\n\r\n  #mc-who-we-are .mc-who-points {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  #mc-who-we-are .mc-gallery-stage {\r\n    height: 340px;\r\n  }\r\n\r\n  #mc-who-we-are .mc-gallery-card {\r\n    width: 76%;\r\n    height: 260px;\r\n    left: 12%;\r\n    top: 35px;\r\n  }\r\n\r\n  #mc-who-we-are .mc-gallery-card[data-position=\"left\"] {\r\n    transform: translateX(-24%) scale(.76);\r\n  }\r\n\r\n  #mc-who-we-are .mc-gallery-card[data-position=\"right\"] {\r\n    transform: translateX(24%) scale(.76);\r\n  }\r\n\r\n  #mc-who-we-are .mc-gallery-caption {\r\n    left: 14px;\r\n    bottom: 17px;\r\n    font-size: 13px;\r\n  }\r\n}\r\n\r\n@media(max-width: 390px) {\r\n  #mc-who-we-are .mc-gallery-card {\r\n    width: 82%;\r\n    left: 9%;\r\n  }\r\n\r\n  #mc-who-we-are .mc-gallery-card[data-position=\"left\"] {\r\n    transform: translateX(-17%) scale(.76);\r\n  }\r\n\r\n  #mc-who-we-are .mc-gallery-card[data-position=\"right\"] {\r\n    transform: translateX(17%) scale(.76);\r\n  }\r\n}\r\n\r\n@media(prefers-reduced-motion: reduce) {\r\n  #mc-who-we-are .mc-reveal,\r\n  #mc-who-we-are .mc-gallery-reveal,\r\n  #mc-who-we-are .mc-gallery-card,\r\n  #mc-who-we-are .mc-gallery-card img {\r\n    transition: none;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<!-- Background glow -->\r\n<div class=\"mc-bg-glow mc-bg-glow-one\"><\/div>\r\n<div class=\"mc-bg-glow mc-bg-glow-two\"><\/div>\r\n\r\n<div class=\"mc-who-container\">\r\n\r\n  <!-- LEFT: WHO WE ARE -->\r\n  <div class=\"mc-who-text mc-reveal\">\r\n\r\n\r\n    <h2>\r\n      A place to<br>\r\n      <span>make things<\/span><br>\r\n      happen.\r\n    <\/h2>\r\n\r\n    <p class=\"mc-who-intro\">\r\n      Makers Club is a creative, collaborative community\r\n      where people come together to explore ideas, develop\r\n      skills and bring their imagination to life.\r\n    <\/p>\r\n\r\n    <p class=\"mc-who-description\">\r\n      We create opportunities for students and makers to\r\n      experiment with new technologies, take part in\r\n      practical workshops and work on exciting projects.\r\n      From digital design and 3D printing to creative\r\n      prototyping, our club encourages everyone to learn\r\n      by doing, share knowledge and turn ideas into reality.\r\n    <\/p>\r\n\r\n    <div class=\"mc-who-points\">\r\n\r\n      <div class=\"mc-who-point\">\r\n        <span class=\"mc-point-icon\">\u2726<\/span>\r\n        Creative exploration\r\n      <\/div>\r\n\r\n      <div class=\"mc-who-point\">\r\n        <span class=\"mc-point-icon\">\u2318<\/span>\r\n        Hands-on workshops\r\n      <\/div>\r\n\r\n      <div class=\"mc-who-point\">\r\n        <span class=\"mc-point-icon\">\u25c7<\/span>\r\n        Practical projects\r\n      <\/div>\r\n\r\n      <div class=\"mc-who-point\">\r\n        <span class=\"mc-point-icon\">\u2197<\/span>\r\n        Shared learning\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- RIGHT: THREE PHOTO GALLERY -->\r\n  <div class=\"mc-gallery-wrap mc-gallery-reveal\">\r\n\r\n    <div class=\"mc-gallery-heading\">\r\n      A glimpse inside Makers Club\r\n    <\/div>\r\n\r\n    <div class=\"mc-gallery-stage\">\r\n\r\n      <!-- PHOTO 1 -->\r\n      <div class=\"mc-gallery-card\"\r\n           data-position=\"front\"\r\n           tabindex=\"0\"\r\n           role=\"button\"\r\n           aria-label=\"Show creative workshops photograph\">\r\n\r\n        <img decoding=\"async\"\r\n          src=\"YOUR-IMAGE-URL-1\"\r\n          alt=\"Makers Club creative workshop\"\r\n          onerror=\"this.style.display='none';\"\r\n        >\r\n\r\n        <div class=\"mc-gallery-caption\">\r\n          Creative Workshops\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- PHOTO 2 -->\r\n      <div class=\"mc-gallery-card\"\r\n           data-position=\"right\"\r\n           tabindex=\"0\"\r\n           role=\"button\"\r\n           aria-label=\"Show collaborative making photograph\">\r\n\r\n        <img decoding=\"async\"\r\n          src=\"YOUR-IMAGE-URL-2\"\r\n          alt=\"Makers Club members collaborating\"\r\n          onerror=\"this.style.display='none';\"\r\n        >\r\n\r\n        <div class=\"mc-gallery-caption\">\r\n          Collaborative Making\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- PHOTO 3 -->\r\n      <div class=\"mc-gallery-card\"\r\n           data-position=\"left\"\r\n           tabindex=\"0\"\r\n           role=\"button\"\r\n           aria-label=\"Show creative projects photograph\">\r\n\r\n        <img decoding=\"async\"\r\n          src=\"YOUR-IMAGE-URL-3\"\r\n          alt=\"Makers Club members creating projects\"\r\n          onerror=\"this.style.display='none';\"\r\n        >\r\n\r\n        <div class=\"mc-gallery-caption\">\r\n          Ideas Into Reality\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- GALLERY NAVIGATION -->\r\n    <div class=\"mc-gallery-controls\">\r\n\r\n      <button class=\"mc-gallery-arrow mc-gallery-prev\"\r\n              type=\"button\"\r\n              aria-label=\"Previous photograph\">\r\n        \u2039\r\n      <\/button>\r\n\r\n      <div class=\"mc-gallery-indicators\">\r\n        <button class=\"active\" type=\"button\" aria-label=\"Show photograph one\"><\/button>\r\n        <button type=\"button\" aria-label=\"Show photograph two\"><\/button>\r\n        <button type=\"button\" aria-label=\"Show photograph three\"><\/button>\r\n      <\/div>\r\n\r\n      <button class=\"mc-gallery-arrow mc-gallery-next\"\r\n              type=\"button\"\r\n              aria-label=\"Next photograph\">\r\n        \u203a\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(function() {\r\n\r\n  const section = document.querySelector('#mc-who-we-are');\r\n  if (!section) return;\r\n\r\n  \/* Scroll reveal animation *\/\r\n  const revealElements = section.querySelectorAll(\r\n    '.mc-reveal, .mc-gallery-reveal'\r\n  );\r\n\r\n  if ('IntersectionObserver' in window) {\r\n\r\n    const observer = new IntersectionObserver((entries, obs) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('mc-visible');\r\n          obs.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.12\r\n    });\r\n\r\n    revealElements.forEach(element => observer.observe(element));\r\n\r\n  } else {\r\n    revealElements.forEach(element => {\r\n      element.classList.add('mc-visible');\r\n    });\r\n  }\r\n\r\n  \/* Interactive photo gallery *\/\r\n  const gallery = section.querySelector('.mc-gallery-wrap');\r\n  if (!gallery || gallery.dataset.initialised) return;\r\n  gallery.dataset.initialised = 'true';\r\n\r\n  const cards = [...gallery.querySelectorAll('.mc-gallery-card')];\r\n  const dots = [...gallery.querySelectorAll('.mc-gallery-indicators button')];\r\n\r\n  let active = 0;\r\n\r\n  function updateGallery() {\r\n\r\n    cards.forEach((card, index) => {\r\n\r\n      let position;\r\n\r\n      if (index === active) {\r\n        position = 'front';\r\n      } else if (index === (active + 1) % cards.length) {\r\n        position = 'right';\r\n      } else {\r\n        position = 'left';\r\n      }\r\n\r\n      card.dataset.position = position;\r\n      card.setAttribute(\r\n        'aria-pressed',\r\n        index === active ? 'true' : 'false'\r\n      );\r\n\r\n    });\r\n\r\n    dots.forEach((dot, index) => {\r\n      dot.classList.toggle('active', index === active);\r\n    });\r\n\r\n  }\r\n\r\n  function goTo(index) {\r\n    active = (index + cards.length) % cards.length;\r\n    updateGallery();\r\n  }\r\n\r\n  cards.forEach((card, index) => {\r\n\r\n    card.addEventListener('click', () => {\r\n      goTo(index);\r\n    });\r\n\r\n    card.addEventListener('keydown', event => {\r\n\r\n      if (event.key === 'Enter' || event.key === ' ') {\r\n        event.preventDefault();\r\n        goTo(index);\r\n      }\r\n\r\n    });\r\n\r\n  });\r\n\r\n  dots.forEach((dot, index) => {\r\n    dot.addEventListener('click', () => goTo(index));\r\n  });\r\n\r\n  gallery.querySelector('.mc-gallery-prev')\r\n    .addEventListener('click', () => goTo(active - 1));\r\n\r\n  gallery.querySelector('.mc-gallery-next')\r\n    .addEventListener('click', () => goTo(active + 1));\r\n\r\n  updateGallery();\r\n\r\n})();\r\n<\/script>\r\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-166219e e-flex e-con-boxed e-con e-parent\" data-id=\"166219e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e47afd7 elementor-widget elementor-widget-html\" data-id=\"e47afd7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- MAKERS CLUB - SECTION 03: ANIMATED MISSION & VISION -->\r\n<section id=\"mc-mission-vision\">\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');\r\n\r\n#mc-mission-vision {\r\n  --navy:#06191D;\r\n  --teal:#00B8AA;\r\n  --gold:#F3D09A;\r\n  --white:#FFFFFF;\r\n\r\n  position:relative;\r\n  left:50%;\r\n  margin-left:-50vw;\r\n  width:100vw;\r\n  padding:105px 6%;\r\n  overflow:hidden;\r\n  background:var(--navy);\r\n  color:var(--white);\r\n  font-family:'Inter',sans-serif;\r\n  box-sizing:border-box;\r\n  isolation:isolate;\r\n}\r\n\r\n#mc-mission-vision * {\r\n  box-sizing:border-box;\r\n}\r\n\r\n#mc-mission-vision .mv-container {\r\n  max-width:1240px;\r\n  margin:auto;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n\/* Background glow *\/\r\n\r\n#mc-mission-vision .mv-glow {\r\n  position:absolute;\r\n  width:380px;\r\n  height:380px;\r\n  border-radius:50%;\r\n  background:var(--teal);\r\n  filter:blur(145px);\r\n  opacity:.10;\r\n  pointer-events:none;\r\n  z-index:0;\r\n}\r\n\r\n#mc-mission-vision .mv-glow-one {\r\n  top:-180px;\r\n  right:-120px;\r\n}\r\n\r\n#mc-mission-vision .mv-glow-two {\r\n  bottom:-180px;\r\n  left:-130px;\r\n  background:var(--gold);\r\n  opacity:.07;\r\n}\r\n\r\n\/* Main heading *\/\r\n\r\n#mc-mission-vision .mv-heading {\r\n  max-width:760px;\r\n  margin:0 auto 65px;\r\n  text-align:center;\r\n}\r\n\r\n#mc-mission-vision .mv-eyebrow {\r\n  display:inline-block;\r\n  color:var(--teal);\r\n  font-size:13px;\r\n  font-weight:700;\r\n  letter-spacing:2.5px;\r\n  text-transform:uppercase;\r\n  margin-bottom:20px;\r\n}\r\n\r\n#mc-mission-vision .mv-heading h2 {\r\n  font-family:'Space Grotesk',sans-serif;\r\n  font-size:clamp(38px,5vw,58px);\r\n  line-height:1.1;\r\n  letter-spacing:-2px;\r\n  margin:0 0 20px;\r\n}\r\n\r\n#mc-mission-vision .mv-heading h2 span {\r\n  color:var(--gold);\r\n}\r\n\r\n#mc-mission-vision .mv-heading p {\r\n  color:#C2CDD0;\r\n  font-size:17px;\r\n  line-height:1.8;\r\n  margin:0;\r\n}\r\n\r\n\/* =================================\r\n   ANIMATED MISSION AND VISION BOXES\r\n================================= *\/\r\n\r\n#mc-mission-vision .mv-main-grid {\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:22px;\r\n  margin-bottom:75px;\r\n}\r\n\r\n#mc-mission-vision .mv-panel {\r\n  position:relative;\r\n  isolation:isolate;\r\n  padding:38px;\r\n  min-height:240px;\r\n  overflow:hidden;\r\n  border:1px solid rgba(0,184,170,.22);\r\n  border-radius:20px;\r\n\r\n  background:\r\n    linear-gradient(135deg,rgba(0,184,170,.09),transparent 55%),\r\n    #10272B;\r\n\r\n  transition:\r\n    transform .5s cubic-bezier(.2,.8,.2,1),\r\n    box-shadow .5s ease,\r\n    border-color .5s ease,\r\n    background .5s ease;\r\n}\r\n\r\n\/* Rotating teal and gold lighting *\/\r\n\r\n#mc-mission-vision .mv-panel:before {\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-60%;\r\n  z-index:-1;\r\n\r\n  background:conic-gradient(\r\n    from 0deg,\r\n    transparent 0deg,\r\n    rgba(0,184,170,0) 70deg,\r\n    rgba(0,184,170,.25) 110deg,\r\n    transparent 155deg,\r\n    transparent 250deg,\r\n    rgba(243,208,154,.18) 290deg,\r\n    transparent 330deg\r\n  );\r\n\r\n  opacity:.45;\r\n  animation:mv-panel-light 12s linear infinite;\r\n}\r\n\r\n\/* Inner background *\/\r\n\r\n#mc-mission-vision .mv-panel:after {\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:1px;\r\n  z-index:-1;\r\n  border-radius:19px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 90% 10%,\r\n      rgba(0,184,170,.13),\r\n      transparent 42%\r\n    ),\r\n    linear-gradient(145deg,#10272B,#0A2024);\r\n\r\n  pointer-events:none;\r\n}\r\n\r\n\/* Hover interaction *\/\r\n\r\n#mc-mission-vision .mv-panel:hover {\r\n  transform:translateY(-10px) scale(1.015);\r\n  border-color:var(--teal);\r\n\r\n  box-shadow:\r\n    0 18px 45px rgba(0,184,170,.14),\r\n    0 0 22px rgba(0,184,170,.09);\r\n}\r\n\r\n\/* Mission and Vision labels *\/\r\n\r\n#mc-mission-vision .mv-panel-label {\r\n  position:relative;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  padding:8px 13px;\r\n  border-radius:30px;\r\n\r\n  color:var(--teal);\r\n  background:rgba(0,184,170,.09);\r\n  border:1px solid rgba(0,184,170,.2);\r\n\r\n  font-size:12px;\r\n  font-weight:800;\r\n  letter-spacing:2px;\r\n  margin-bottom:20px;\r\n\r\n  transition:\r\n    background .4s ease,\r\n    letter-spacing .4s ease;\r\n}\r\n\r\n#mc-mission-vision .mv-panel-label:before {\r\n  content:\"\";\r\n  width:7px;\r\n  height:7px;\r\n  flex-shrink:0;\r\n  border-radius:50%;\r\n  background:var(--teal);\r\n  box-shadow:0 0 12px var(--teal);\r\n  animation:mv-label-pulse 2s ease-in-out infinite;\r\n}\r\n\r\n\/* Gold styling for Vision *\/\r\n\r\n#mc-mission-vision .mv-panel.vision .mv-panel-label {\r\n  color:var(--gold);\r\n  background:rgba(243,208,154,.08);\r\n  border-color:rgba(243,208,154,.22);\r\n}\r\n\r\n#mc-mission-vision .mv-panel.vision .mv-panel-label:before {\r\n  background:var(--gold);\r\n  box-shadow:0 0 12px var(--gold);\r\n}\r\n\r\n\/* Main headings *\/\r\n\r\n#mc-mission-vision .mv-panel h3 {\r\n  position:relative;\r\n  font-family:'Space Grotesk',sans-serif;\r\n  font-size:29px;\r\n  line-height:1.25;\r\n  margin:0 0 15px;\r\n\r\n  transition:\r\n    transform .45s ease,\r\n    color .45s ease;\r\n}\r\n\r\n#mc-mission-vision .mv-panel:hover h3 {\r\n  transform:translateX(5px);\r\n  color:var(--gold);\r\n}\r\n\r\n\/* Descriptions *\/\r\n\r\n#mc-mission-vision .mv-panel p {\r\n  position:relative;\r\n  color:#B8C5C8;\r\n  font-size:16px;\r\n  line-height:1.8;\r\n  margin:0;\r\n  transition:color .4s ease;\r\n}\r\n\r\n#mc-mission-vision .mv-panel:hover p {\r\n  color:#E0E8E9;\r\n}\r\n\r\n\/* Floating decorative orbit *\/\r\n\r\n#mc-mission-vision .mv-panel .mv-orbit {\r\n  position:absolute;\r\n  right:28px;\r\n  top:27px;\r\n  width:52px;\r\n  height:52px;\r\n  border:1px solid rgba(0,184,170,.3);\r\n  border-radius:50%;\r\n  pointer-events:none;\r\n  animation:mv-orbit-float 5s ease-in-out infinite;\r\n}\r\n\r\n#mc-mission-vision .mv-panel .mv-orbit:before,\r\n#mc-mission-vision .mv-panel .mv-orbit:after {\r\n  content:\"\";\r\n  position:absolute;\r\n  border:1px solid rgba(0,184,170,.25);\r\n  border-radius:50%;\r\n}\r\n\r\n#mc-mission-vision .mv-panel .mv-orbit:before {\r\n  inset:8px;\r\n}\r\n\r\n#mc-mission-vision .mv-panel .mv-orbit:after {\r\n  width:8px;\r\n  height:8px;\r\n  top:-4px;\r\n  left:20px;\r\n  background:var(--teal);\r\n  box-shadow:0 0 12px var(--teal);\r\n}\r\n\r\n\/* Gold orbit for Vision *\/\r\n\r\n#mc-mission-vision .mv-panel.vision .mv-orbit {\r\n  border-color:rgba(243,208,154,.35);\r\n}\r\n\r\n#mc-mission-vision .mv-panel.vision .mv-orbit:before {\r\n  border-color:rgba(243,208,154,.3);\r\n}\r\n\r\n#mc-mission-vision .mv-panel.vision .mv-orbit:after {\r\n  background:var(--gold);\r\n  box-shadow:0 0 12px var(--gold);\r\n}\r\n\r\n\/* Animation keyframes *\/\r\n\r\n@keyframes mv-panel-light {\r\n  to {\r\n    transform:rotate(360deg);\r\n  }\r\n}\r\n\r\n@keyframes mv-label-pulse {\r\n  0%,100% {\r\n    opacity:1;\r\n    transform:scale(1);\r\n  }\r\n  50% {\r\n    opacity:.55;\r\n    transform:scale(.75);\r\n  }\r\n}\r\n\r\n@keyframes mv-orbit-float {\r\n  0%,100% {\r\n    transform:translateY(0) rotate(0deg);\r\n  }\r\n  50% {\r\n    transform:translateY(-9px) rotate(12deg);\r\n  }\r\n}\r\n\r\n\/* =================================\r\n   FOUR VALUES BOXES\r\n================================= *\/\r\n\r\n#mc-mission-vision .mv-values-heading {\r\n  text-align:center;\r\n  margin-bottom:36px;\r\n}\r\n\r\n#mc-mission-vision .mv-values-heading h3 {\r\n  font-family:'Space Grotesk',sans-serif;\r\n  font-size:clamp(27px,3vw,36px);\r\n  margin:0;\r\n}\r\n\r\n#mc-mission-vision .mv-values-heading p {\r\n  color:#AEBFC2;\r\n  font-size:15px;\r\n  margin:12px 0 0;\r\n}\r\n\r\n#mc-mission-vision .mv-values {\r\n  display:grid;\r\n  grid-template-columns:repeat(4,minmax(0,1fr));\r\n  gap:18px;\r\n}\r\n\r\n#mc-mission-vision .mv-value-card {\r\n  position:relative;\r\n  min-height:225px;\r\n  padding:30px 24px;\r\n  overflow:hidden;\r\n  border-radius:15px;\r\n  border:1px solid rgba(255,255,255,.12);\r\n  background:#10272B;\r\n\r\n  opacity:0;\r\n  transform:translateY(32px);\r\n\r\n  transition:\r\n    opacity .75s ease,\r\n    transform .75s cubic-bezier(.2,.7,.2,1),\r\n    border-color .35s ease,\r\n    background .35s ease,\r\n    box-shadow .35s ease;\r\n}\r\n\r\n\/* Cards become visible on scroll *\/\r\n\r\n#mc-mission-vision .mv-value-card.mv-show {\r\n  opacity:1;\r\n  transform:translateY(0);\r\n}\r\n\r\n\/* Staggered reveal *\/\r\n\r\n#mc-mission-vision .mv-value-card:nth-child(2) {\r\n  transition-delay:.12s;\r\n}\r\n\r\n#mc-mission-vision .mv-value-card:nth-child(3) {\r\n  transition-delay:.24s;\r\n}\r\n\r\n#mc-mission-vision .mv-value-card:nth-child(4) {\r\n  transition-delay:.36s;\r\n}\r\n\r\n\/* Lower card hover effect *\/\r\n\r\n#mc-mission-vision .mv-value-card:hover {\r\n  transform:translateY(-9px);\r\n  border-color:var(--teal);\r\n  background:#123338;\r\n  box-shadow:0 15px 35px rgba(0,184,170,.12);\r\n}\r\n\r\n#mc-mission-vision .mv-value-card:after {\r\n  content:\"\";\r\n  position:absolute;\r\n  width:110px;\r\n  height:110px;\r\n  right:-65px;\r\n  bottom:-65px;\r\n  border:1px solid rgba(0,184,170,.2);\r\n  border-radius:50%;\r\n  transition:transform .5s ease;\r\n  pointer-events:none;\r\n}\r\n\r\n#mc-mission-vision .mv-value-card:hover:after {\r\n  transform:scale(1.6);\r\n}\r\n\r\n#mc-mission-vision .mv-value-number {\r\n  display:block;\r\n  font-family:'Space Grotesk',sans-serif;\r\n  font-size:34px;\r\n  font-weight:700;\r\n  color:rgba(0,184,170,.55);\r\n  margin-bottom:24px;\r\n  transition:color .3s ease;\r\n}\r\n\r\n#mc-mission-vision .mv-value-card:hover .mv-value-number {\r\n  color:var(--gold);\r\n}\r\n\r\n#mc-mission-vision .mv-value-card h4 {\r\n  position:relative;\r\n  z-index:1;\r\n  font-family:'Space Grotesk',sans-serif;\r\n  color:var(--white);\r\n  font-size:19px;\r\n  line-height:1.4;\r\n  margin:0 0 12px;\r\n}\r\n\r\n#mc-mission-vision .mv-value-card p {\r\n  position:relative;\r\n  z-index:1;\r\n  color:#AEBFC2;\r\n  font-size:14px;\r\n  line-height:1.7;\r\n  margin:0;\r\n}\r\n\r\n\/* Heading and panel scroll reveal *\/\r\n\r\n#mc-mission-vision .mv-reveal {\r\n  opacity:0;\r\n  transform:translateY(22px);\r\n  transition:opacity .8s ease,transform .8s ease;\r\n}\r\n\r\n#mc-mission-vision .mv-reveal.mv-show {\r\n  opacity:1;\r\n  transform:translateY(0);\r\n}\r\n\r\n\/* Responsive *\/\r\n\r\n@media(max-width:950px) {\r\n  #mc-mission-vision .mv-values {\r\n    grid-template-columns:repeat(2,minmax(0,1fr));\r\n  }\r\n}\r\n\r\n@media(max-width:650px) {\r\n  #mc-mission-vision {\r\n    padding:80px 6%;\r\n  }\r\n\r\n  #mc-mission-vision .mv-main-grid {\r\n    grid-template-columns:1fr;\r\n    gap:16px;\r\n    margin-bottom:55px;\r\n  }\r\n\r\n  #mc-mission-vision .mv-panel {\r\n    padding:30px 25px;\r\n    min-height:auto;\r\n  }\r\n\r\n  #mc-mission-vision .mv-panel .mv-orbit {\r\n    width:40px;\r\n    height:40px;\r\n    right:19px;\r\n    top:22px;\r\n  }\r\n\r\n  #mc-mission-vision .mv-values {\r\n    grid-template-columns:1fr;\r\n    gap:14px;\r\n  }\r\n\r\n  #mc-mission-vision .mv-value-card {\r\n    min-height:190px;\r\n    padding:27px 24px;\r\n  }\r\n\r\n  #mc-mission-vision .mv-heading h2 {\r\n    letter-spacing:-1px;\r\n  }\r\n}\r\n\r\n\/* Accessibility *\/\r\n\r\n@media(prefers-reduced-motion:reduce) {\r\n  #mc-mission-vision *,\r\n  #mc-mission-vision *:before,\r\n  #mc-mission-vision *:after {\r\n    transition:none!important;\r\n    animation:none!important;\r\n  }\r\n\r\n  #mc-mission-vision .mv-value-card,\r\n  #mc-mission-vision .mv-reveal {\r\n    opacity:1;\r\n    transform:none;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"mv-glow mv-glow-one\"><\/div>\r\n<div class=\"mv-glow mv-glow-two\"><\/div>\r\n\r\n<div class=\"mv-container\">\r\n\r\n  <!-- SECTION INTRODUCTION -->\r\n\r\n  <div class=\"mv-heading mv-reveal\">\r\n    <h2>Our Mission <span>&amp;<\/span> Vision<\/h2>\r\n    <p>\r\n      We believe everyone has the potential to create something meaningful.\r\n      Our mission is to bring people, ideas and technology together through\r\n      creativity, innovation and shared learning.\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <!-- ANIMATED MISSION AND VISION -->\r\n\r\n  <div class=\"mv-main-grid\">\r\n\r\n    <article class=\"mv-panel mv-reveal\">\r\n      <span class=\"mv-orbit\" aria-hidden=\"true\"><\/span>\r\n\r\n      <span class=\"mv-panel-label\">OUR MISSION<\/span>\r\n\r\n      <h3>Empowering ideas through making.<\/h3>\r\n\r\n      <p>\r\n        To encourage creativity, support innovation and give students the\r\n        opportunity to explore ideas through practical experiences,\r\n        collaboration and hands-on learning.\r\n      <\/p>\r\n    <\/article>\r\n\r\n    <article class=\"mv-panel vision mv-reveal\">\r\n      <span class=\"mv-orbit\" aria-hidden=\"true\"><\/span>\r\n\r\n      <span class=\"mv-panel-label\">OUR VISION<\/span>\r\n\r\n      <h3>A community where everyone can create.<\/h3>\r\n\r\n      <p>\r\n        To build a connected and collaborative community where students\r\n        and mentors share knowledge, inspire one another and turn\r\n        possibilities into real projects.\r\n      <\/p>\r\n    <\/article>\r\n\r\n  <\/div>\r\n\r\n  <!-- FOUR CORE VALUES -->\r\n\r\n  <div class=\"mv-values-heading mv-reveal\">\r\n    <h3>What We Stand For<\/h3>\r\n    <p>The principles that shape our Makers Club community.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"mv-values\">\r\n\r\n    <article class=\"mv-value-card\">\r\n      <span class=\"mv-value-number\">01<\/span>\r\n      <h4>Encourage Creativity<\/h4>\r\n      <p>\r\n        Give students the freedom to explore ideas, experiment and express\r\n        their creativity.\r\n      <\/p>\r\n    <\/article>\r\n\r\n    <article class=\"mv-value-card\">\r\n      <span class=\"mv-value-number\">02<\/span>\r\n      <h4>Support Innovation<\/h4>\r\n      <p>\r\n        Inspire new ways of thinking and help transform creative ideas\r\n        into practical solutions.\r\n      <\/p>\r\n    <\/article>\r\n\r\n    <article class=\"mv-value-card\">\r\n      <span class=\"mv-value-number\">03<\/span>\r\n      <h4>Connect Students &amp; Mentors<\/h4>\r\n      <p>\r\n        Bring students and mentors together to exchange knowledge,\r\n        guidance and experience.\r\n      <\/p>\r\n    <\/article>\r\n\r\n    <article class=\"mv-value-card\">\r\n      <span class=\"mv-value-number\">04<\/span>\r\n      <h4>Build a Collaborative Community<\/h4>\r\n      <p>\r\n        Create a welcoming space where people work together, share skills\r\n        and learn from one another.\r\n      <\/p>\r\n    <\/article>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const section = document.querySelector('#mc-mission-vision');\r\n  if(!section) return;\r\n\r\n  const revealElements = section.querySelectorAll('.mv-reveal');\r\n  const cards = section.querySelectorAll('.mv-value-card');\r\n\r\n  \/* Reveal elements when they enter the viewport *\/\r\n\r\n  if(!('IntersectionObserver' in window)) {\r\n    revealElements.forEach(element => element.classList.add('mv-show'));\r\n    cards.forEach(card => card.classList.add('mv-show'));\r\n    return;\r\n  }\r\n\r\n  const observer = new IntersectionObserver((entries, obs) => {\r\n    entries.forEach(entry => {\r\n      if(entry.isIntersecting) {\r\n        entry.target.classList.add('mv-show');\r\n        obs.unobserve(entry.target);\r\n      }\r\n    });\r\n  }, {\r\n    threshold:0.12,\r\n    rootMargin:'0px 0px -35px 0px'\r\n  });\r\n\r\n  revealElements.forEach(element => observer.observe(element));\r\n  cards.forEach(card => observer.observe(card));\r\n\r\n})();\r\n<\/script>\r\n<\/section>\r\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-3ab6fdd e-flex e-con-boxed e-con e-parent\" data-id=\"3ab6fdd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5031428 elementor-widget elementor-widget-html\" data-id=\"5031428\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- CDT MAKER CLUB - SECTION 04: WHAT MAKES US DIFFERENT -->\r\n<section id=\"mc-different\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');\r\n\r\n#mc-different {\r\n  --teal: #00B8AA;\r\n  --gold: #F3D09A;\r\n  --navy: #06191D;\r\n  --surface: #10272C;\r\n  --border: rgba(255,255,255,.12);\r\n  --white: #FFFFFF;\r\n  --muted: #B8C6C8;\r\n\r\n  width: 100vw;\r\n  position: relative;\r\n  left: 50%;\r\n  margin-left: -50vw;\r\n  padding: 110px 6%;\r\n  overflow: hidden;\r\n  background: var(--navy);\r\n  color: var(--white);\r\n  font-family: 'Inter', sans-serif;\r\n}\r\n\r\n#mc-different * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n#mc-different .md-wrap {\r\n  max-width: 1250px;\r\n  margin: 0 auto;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n#mc-different .md-heading {\r\n  max-width: 760px;\r\n  margin: 0 auto 65px;\r\n  text-align: center;\r\n}\r\n\r\n#mc-different .md-eyebrow {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  color: var(--gold);\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  letter-spacing: 2.5px;\r\n  text-transform: uppercase;\r\n  margin-bottom: 18px;\r\n}\r\n\r\n#mc-different .md-eyebrow:before,\r\n#mc-different .md-eyebrow:after {\r\n  content: \"\";\r\n  width: 25px;\r\n  height: 1px;\r\n  background: var(--teal);\r\n}\r\n\r\n#mc-different h2 {\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  font-size: clamp(36px, 5vw, 54px);\r\n  line-height: 1.12;\r\n  font-weight: 700;\r\n  margin: 0 0 20px;\r\n  color: var(--white);\r\n}\r\n\r\n#mc-different h2 span {\r\n  color: var(--teal);\r\n}\r\n\r\n#mc-different .md-intro {\r\n  max-width: 650px;\r\n  margin: 0 auto;\r\n  color: var(--muted);\r\n  font-size: 16px;\r\n  line-height: 1.85;\r\n}\r\n\r\n#mc-different .md-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, minmax(0, 1fr));\r\n  gap: 20px;\r\n}\r\n\r\n#mc-different .md-card {\r\n  min-height: 330px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  padding: 32px 25px;\r\n  border: 1px solid var(--border);\r\n  border-radius: 18px;\r\n  background: linear-gradient(145deg, #10272C, #0A2024);\r\n  transition: transform .4s ease, border-color .4s ease,\r\n              box-shadow .4s ease, background .4s ease;\r\n  isolation: isolate;\r\n}\r\n\r\n#mc-different .md-card:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 190px;\r\n  height: 190px;\r\n  border-radius: 50%;\r\n  top: -110px;\r\n  right: -100px;\r\n  background: var(--teal);\r\n  opacity: .08;\r\n  filter: blur(5px);\r\n  transition: transform .6s ease, opacity .5s ease;\r\n  z-index: -1;\r\n}\r\n\r\n#mc-different .md-card:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 3px;\r\n  left: 0;\r\n  bottom: 0;\r\n  background: linear-gradient(90deg, var(--teal), var(--gold));\r\n  transform: scaleX(0);\r\n  transform-origin: left;\r\n  transition: transform .45s ease;\r\n}\r\n\r\n#mc-different .md-card:hover {\r\n  transform: translateY(-12px);\r\n  border-color: rgba(0,184,170,.65);\r\n  box-shadow: 0 22px 55px rgba(0,0,0,.25),\r\n              0 0 25px rgba(0,184,170,.08);\r\n  background: linear-gradient(145deg, #15343A, #0B2429);\r\n}\r\n\r\n#mc-different .md-card:hover:before {\r\n  transform: scale(1.8);\r\n  opacity: .15;\r\n}\r\n\r\n#mc-different .md-card:hover:after {\r\n  transform: scaleX(1);\r\n}\r\n\r\n#mc-different .md-icon {\r\n  width: 64px;\r\n  height: 64px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 16px;\r\n  border: 1px solid rgba(0,184,170,.3);\r\n  background: rgba(0,184,170,.09);\r\n  color: var(--teal);\r\n  margin-bottom: 30px;\r\n  transition: transform .45s ease, background .4s ease,\r\n              color .4s ease, border-color .4s ease;\r\n}\r\n\r\n#mc-different .md-icon svg {\r\n  width: 30px;\r\n  height: 30px;\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.7;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n#mc-different .md-card:hover .md-icon {\r\n  transform: rotate(-8deg) scale(1.1);\r\n  background: var(--teal);\r\n  color: var(--navy);\r\n  border-color: var(--teal);\r\n}\r\n\r\n#mc-different .md-number {\r\n  position: absolute;\r\n  top: 34px;\r\n  right: 27px;\r\n  color: rgba(255,255,255,.18);\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  font-size: 14px;\r\n  font-weight: 700;\r\n  letter-spacing: 1px;\r\n}\r\n\r\n#mc-different h3 {\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  font-size: 21px;\r\n  line-height: 1.3;\r\n  font-weight: 700;\r\n  color: var(--white);\r\n  margin: 0 0 15px;\r\n  transition: color .35s ease;\r\n}\r\n\r\n#mc-different .md-card:hover h3 {\r\n  color: var(--gold);\r\n}\r\n\r\n#mc-different .md-description {\r\n  color: var(--muted);\r\n  font-size: 14px;\r\n  line-height: 1.8;\r\n  margin: 0 0 24px;\r\n}\r\n\r\n#mc-different .md-more {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 9px;\r\n  color: var(--teal);\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  letter-spacing: 1px;\r\n  text-transform: uppercase;\r\n  border: 0;\r\n  padding: 0;\r\n  background: transparent;\r\n  cursor: pointer;\r\n  font-family: inherit;\r\n}\r\n\r\n#mc-different .md-more span {\r\n  display: inline-block;\r\n  transition: transform .3s ease;\r\n}\r\n\r\n#mc-different .md-more:hover span {\r\n  transform: translateX(6px);\r\n}\r\n\r\n#mc-different .md-extra {\r\n  display: none;\r\n  color: var(--muted);\r\n  font-size: 13px;\r\n  line-height: 1.8;\r\n  margin-top: 16px;\r\n  padding-top: 15px;\r\n  border-top: 1px solid var(--border);\r\n}\r\n\r\n#mc-different .md-card.is-open .md-extra {\r\n  display: block;\r\n  animation: md-reveal .35s ease both;\r\n}\r\n\r\n#mc-different .md-card.is-open .md-more span {\r\n  transform: rotate(90deg);\r\n}\r\n\r\n@keyframes md-reveal {\r\n  from { opacity: 0; transform: translateY(8px); }\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* Decorative background *\/\r\n#mc-different .md-glow {\r\n  position: absolute;\r\n  width: 350px;\r\n  height: 350px;\r\n  border-radius: 50%;\r\n  background: var(--teal);\r\n  opacity: .055;\r\n  filter: blur(100px);\r\n  pointer-events: none;\r\n}\r\n\r\n#mc-different .md-glow-one {\r\n  top: 5%;\r\n  left: -180px;\r\n}\r\n\r\n#mc-different .md-glow-two {\r\n  right: -180px;\r\n  bottom: 0;\r\n  background: var(--gold);\r\n}\r\n\r\n\/* Scroll reveal *\/\r\n#mc-different .md-reveal {\r\n  opacity: 0;\r\n  transform: translateY(35px);\r\n  transition: opacity .7s ease, transform .7s ease;\r\n}\r\n\r\n#mc-different .md-reveal.md-visible {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n#mc-different .md-card:nth-child(2) {\r\n  transition-delay: .1s;\r\n}\r\n\r\n#mc-different .md-card:nth-child(3) {\r\n  transition-delay: .2s;\r\n}\r\n\r\n#mc-different .md-card:nth-child(4) {\r\n  transition-delay: .3s;\r\n}\r\n\r\n@media (max-width: 1000px) {\r\n  #mc-different .md-grid {\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  #mc-different {\r\n    padding: 80px 6%;\r\n  }\r\n\r\n  #mc-different .md-heading {\r\n    margin-bottom: 42px;\r\n  }\r\n\r\n  #mc-different .md-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 16px;\r\n  }\r\n\r\n  #mc-different .md-card {\r\n    min-height: 0;\r\n    padding: 28px 24px;\r\n  }\r\n\r\n  #mc-different h3 {\r\n    font-size: 20px;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  #mc-different *,\r\n  #mc-different *:before,\r\n  #mc-different *:after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n    scroll-behavior: auto !important;\r\n  }\r\n\r\n  #mc-different .md-reveal {\r\n    opacity: 1;\r\n    transform: none;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"md-glow md-glow-one\"><\/div>\r\n<div class=\"md-glow md-glow-two\"><\/div>\r\n\r\n<div class=\"md-wrap\">\r\n\r\n  <div class=\"md-heading md-reveal\">\r\n    <h2>What Makes Us <span>Different?<\/span><\/h2>\r\n    <p class=\"md-intro\">\r\n      More than a place to learn, Makers Club is a space to explore ideas,\r\n      work together, gain confidence and bring creativity to life.\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <div class=\"md-grid\">\r\n\r\n    <!-- CARD 1 -->\r\n    <article class=\"md-card md-reveal\">\r\n      <span class=\"md-number\">01<\/span>\r\n\r\n      <div class=\"md-icon\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path d=\"M9 18h6M10 22h4M8.5 14.5a7 7 0 1 1 7 0c-.8.6-1.2 1.4-1.3 2.5h-4.4c-.1-1.1-.5-1.9-1.3-2.5Z\"\/>\r\n          <path d=\"M12 2v2M4.9 4.9l1.4 1.4M2 12h2M20 12h2M17.7 6.3l1.4-1.4\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n\r\n      <h3>Creative Learning<\/h3>\r\n      <p class=\"md-description\">\r\n        Discover new skills through hands-on activities, creative challenges\r\n        and opportunities to experiment with ideas.\r\n      <\/p>\r\n\r\n      <button class=\"md-more\" type=\"button\" aria-expanded=\"false\">\r\n        Discover more <span>\u2192<\/span>\r\n      <\/button>\r\n\r\n      <div class=\"md-extra\">\r\n        Explore digital tools, practical techniques and new ways of thinking.\r\n        Learn through doing, making mistakes and improving your ideas.\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- CARD 2 -->\r\n    <article class=\"md-card md-reveal\">\r\n      <span class=\"md-number\">02<\/span>\r\n\r\n      <div class=\"md-icon\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <circle cx=\"9\" cy=\"8\" r=\"3\"\/>\r\n          <circle cx=\"17\" cy=\"9\" r=\"2.5\"\/>\r\n          <path d=\"M3.5 20v-1.5A5.5 5.5 0 0 1 9 13h1a5.5 5.5 0 0 1 5.5 5.5V20Z\"\/>\r\n          <path d=\"M16 14a4.5 4.5 0 0 1 4.5 4.5V20H18\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n\r\n      <h3>Project Collaboration<\/h3>\r\n      <p class=\"md-description\">\r\n        Bring different perspectives together, exchange ideas and create\r\n        meaningful projects as a team.\r\n      <\/p>\r\n\r\n      <button class=\"md-more\" type=\"button\" aria-expanded=\"false\">\r\n        Discover more <span>\u2192<\/span>\r\n      <\/button>\r\n\r\n      <div class=\"md-extra\">\r\n        Collaborate with other students, combine different skills and turn\r\n        shared concepts into practical outcomes.\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- CARD 3 -->\r\n    <article class=\"md-card md-reveal\">\r\n      <span class=\"md-number\">03<\/span>\r\n\r\n      <div class=\"md-icon\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path d=\"M12 3 14.5 8.5 20 11l-5.5 2.5L12 19l-2.5-5.5L4 11l5.5-2.5L12 3Z\"\/>\r\n          <path d=\"m19 15 1.2 2.8L23 19l-2.8 1.2L19 23l-1.2-2.8L15 19l2.8-1.2L19 15Z\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n\r\n      <h3>Mentor Support<\/h3>\r\n      <p class=\"md-description\">\r\n        Develop your confidence with guidance, helpful feedback and support\r\n        as you explore your creative potential.\r\n      <\/p>\r\n\r\n      <button class=\"md-more\" type=\"button\" aria-expanded=\"false\">\r\n        Discover more <span>\u2192<\/span>\r\n      <\/button>\r\n\r\n      <div class=\"md-extra\">\r\n        Learn from experienced people who can share knowledge, offer advice\r\n        and help you take your projects further.\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- CARD 4 -->\r\n    <article class=\"md-card md-reveal\">\r\n      <span class=\"md-number\">04<\/span>\r\n\r\n      <div class=\"md-icon\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\"\/>\r\n          <path d=\"M8 22h8M12 18v4M7 14l3-3 2 2 5-5\"\/>\r\n          <path d=\"m14 8 3 0 0 3\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n\r\n      <h3>Community Showcase<\/h3>\r\n      <p class=\"md-description\">\r\n        Share what you create, celebrate progress and inspire others through\r\n        your projects and achievements.\r\n      <\/p>\r\n\r\n      <button class=\"md-more\" type=\"button\" aria-expanded=\"false\">\r\n        Discover more <span>\u2192<\/span>\r\n      <\/button>\r\n\r\n      <div class=\"md-extra\">\r\n        Give your work visibility, exchange feedback and celebrate the\r\n        creativity and achievements of the Makers Club community.\r\n      <\/div>\r\n    <\/article>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  const section = document.querySelector('#mc-different');\r\n  if (!section) return;\r\n\r\n  \/\/ Interactive card descriptions\r\n  section.querySelectorAll('.md-more').forEach(button => {\r\n    button.addEventListener('click', () => {\r\n      const card = button.closest('.md-card');\r\n      const isOpen = card.classList.toggle('is-open');\r\n\r\n      button.setAttribute('aria-expanded', String(isOpen));\r\n      button.innerHTML = isOpen\r\n        ? 'Show less <span>\u2192<\/span>'\r\n        : 'Discover more <span>\u2192<\/span>';\r\n    });\r\n  });\r\n\r\n  \/\/ Scroll reveal animation\r\n  const revealItems = section.querySelectorAll('.md-reveal');\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    const observer = new IntersectionObserver(entries => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('md-visible');\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, { threshold: 0.12 });\r\n\r\n    revealItems.forEach(item => observer.observe(item));\r\n  } else {\r\n    revealItems.forEach(item => item.classList.add('md-visible'));\r\n  }\r\n})();\r\n<\/script>\r\n\r\n<\/section>\r\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-b5e6127 e-flex e-con-boxed e-con e-parent\" data-id=\"b5e6127\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ab50de elementor-widget elementor-widget-html\" data-id=\"1ab50de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- CDT MAKER CLUB - SECTION 05: STUNNING COVERFLOW COMMUNITY CAROUSEL -->\r\n\r\n<section id=\"mc-community\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');\r\n\r\n#mc-community {\r\n  --navy:#06191D;\r\n  --teal:#00B8AA;\r\n  --gold:#F3D09A;\r\n  --white:#FFFFFF;\r\n  --muted:#B6C4C6;\r\n\r\n  position:relative;\r\n  left:50%;\r\n  width:100vw;\r\n  margin-left:-50vw;\r\n  padding:100px 5% 85px;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  box-sizing:border-box;\r\n  background:\r\n    radial-gradient(ellipse at 10% 15%,rgba(0,184,170,.14),transparent 38%),\r\n    radial-gradient(ellipse at 90% 90%,rgba(243,208,154,.08),transparent 35%),\r\n    var(--navy);\r\n  color:var(--white);\r\n  font-family:'Inter',sans-serif;\r\n}\r\n\r\n#mc-community *,\r\n#mc-community *::before,\r\n#mc-community *::after {\r\n  box-sizing:border-box;\r\n}\r\n\r\n\/* BACKGROUND ORBITS *\/\r\n\r\n#mc-community .mc-orbit {\r\n  position:absolute;\r\n  width:390px;\r\n  height:390px;\r\n  border:1px solid rgba(0,184,170,.13);\r\n  border-radius:50%;\r\n  pointer-events:none;\r\n  z-index:-1;\r\n  animation:mcOrbit 28s linear infinite;\r\n}\r\n\r\n#mc-community .mc-orbit.one {\r\n  top:-240px;\r\n  right:-100px;\r\n}\r\n\r\n#mc-community .mc-orbit.two {\r\n  bottom:-270px;\r\n  left:-160px;\r\n  width:470px;\r\n  height:470px;\r\n  border-color:rgba(243,208,154,.13);\r\n  animation-direction:reverse;\r\n}\r\n\r\n@keyframes mcOrbit {\r\n  to {transform:rotate(360deg);}\r\n}\r\n\r\n\/* INTRO *\/\r\n\r\n#mc-community .mc-intro {\r\n  position:relative;\r\n  z-index:2;\r\n  max-width:850px;\r\n  margin:0 auto 55px;\r\n  text-align:center;\r\n  animation:mcFadeUp .9s ease both;\r\n}\r\n\r\n#mc-community .mc-kicker {\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  margin-bottom:22px;\r\n  color:var(--gold);\r\n  font-size:11px;\r\n  font-weight:700;\r\n  letter-spacing:3px;\r\n  text-transform:uppercase;\r\n}\r\n\r\n#mc-community .mc-kicker::before,\r\n#mc-community .mc-kicker::after {\r\n  content:\"\";\r\n  width:30px;\r\n  height:1px;\r\n  background:var(--teal);\r\n  box-shadow:0 0 10px var(--teal);\r\n}\r\n\r\n#mc-community .mc-intro h2 {\r\n  margin:0;\r\n  color:var(--white);\r\n  font-family:'Space Grotesk',sans-serif;\r\n  font-size:clamp(38px,5.5vw,68px);\r\n  line-height:1.08;\r\n  letter-spacing:-2.5px;\r\n  font-weight:700;\r\n}\r\n\r\n#mc-community .mc-intro h2 span {\r\n  display:block;\r\n  color:var(--teal);\r\n}\r\n\r\n#mc-community .mc-intro p {\r\n  max-width:620px;\r\n  margin:23px auto 0;\r\n  color:var(--muted);\r\n  font-size:15px;\r\n  line-height:1.9;\r\n}\r\n\r\n\/* CAROUSEL WRAPPER *\/\r\n\r\n#mc-community .mc-carousel-wrap {\r\n  position:relative;\r\n  z-index:2;\r\n  max-width:1250px;\r\n  margin:0 auto;\r\n}\r\n\r\n#mc-community .mc-carousel-label {\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  gap:15px;\r\n  max-width:1050px;\r\n  margin:0 auto 22px;\r\n  color:rgba(255,255,255,.55);\r\n  font-size:10px;\r\n  font-weight:700;\r\n  letter-spacing:2px;\r\n  text-transform:uppercase;\r\n}\r\n\r\n#mc-community .mc-carousel-label span:last-child {\r\n  color:var(--gold);\r\n}\r\n\r\n\/* COVERFLOW STAGE *\/\r\n\r\n#mc-community .mc-stage {\r\n  position:relative;\r\n  width:100%;\r\n  height:440px;\r\n  perspective:1200px;\r\n  touch-action:pan-y;\r\n}\r\n\r\n\/* ALL CARDS *\/\r\n\r\n#mc-community .mc-slide {\r\n  position:absolute;\r\n  top:15px;\r\n  left:50%;\r\n  width:34%;\r\n  height:350px;\r\n  overflow:hidden;\r\n  border:1px solid rgba(0,184,170,.28);\r\n  border-radius:9px;\r\n  background:#10282C;\r\n  box-shadow:0 20px 60px rgba(0,0,0,.32);\r\n  opacity:0;\r\n  visibility:hidden;\r\n  cursor:pointer;\r\n  transform:translateX(-50%) scale(.7);\r\n  transition:\r\n    transform .7s cubic-bezier(.2,.8,.2,1),\r\n    opacity .7s ease,\r\n    filter .7s ease,\r\n    box-shadow .7s ease;\r\n}\r\n\r\n\/* CENTRE CARD *\/\r\n\r\n#mc-community .mc-slide.active {\r\n  z-index:5;\r\n  opacity:1;\r\n  visibility:visible;\r\n  cursor:default;\r\n  transform:translateX(-50%) scale(1.08);\r\n  border-color:var(--teal);\r\n  box-shadow:\r\n    0 25px 75px rgba(0,0,0,.5),\r\n    0 0 28px rgba(0,184,170,.14);\r\n}\r\n\r\n\/* LEFT CARD *\/\r\n\r\n#mc-community .mc-slide.prev {\r\n  z-index:4;\r\n  opacity:.95;\r\n  visibility:visible;\r\n  transform:translateX(-145%) rotateY(0deg) scale(.88);\r\n  filter:brightness(.75);\r\n}\r\n\r\n\/* RIGHT CARD *\/\r\n\r\n#mc-community .mc-slide.next {\r\n  z-index:4;\r\n  opacity:.95;\r\n  visibility:visible;\r\n  transform:translateX(45%) rotateY(0deg) scale(.88);\r\n  filter:brightness(.75);\r\n}\r\n\r\n\/* FAR LEFT CARD *\/\r\n\r\n#mc-community .mc-slide.far-prev {\r\n  z-index:2;\r\n  opacity:.55;\r\n  visibility:visible;\r\n  transform:translateX(-235%) scale(.72);\r\n  filter:brightness(.45);\r\n}\r\n\r\n\/* FAR RIGHT CARD *\/\r\n\r\n#mc-community .mc-slide.far-next {\r\n  z-index:2;\r\n  opacity:.55;\r\n  visibility:visible;\r\n  transform:translateX(135%) scale(.72);\r\n  filter:brightness(.45);\r\n}\r\n\r\n\/* CARD IMAGES *\/\r\n\r\n#mc-community .mc-slide img {\r\n  position:absolute;\r\n  inset:0;\r\n  width:100%;\r\n  height:100%;\r\n  display:block;\r\n  object-fit:cover;\r\n  transition:transform 1s ease;\r\n}\r\n\r\n#mc-community .mc-slide.active:hover img {\r\n  transform:scale(1.045);\r\n}\r\n\r\n\/* IMAGE OVERLAY *\/\r\n\r\n#mc-community .mc-slide::after {\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  background:linear-gradient(\r\n    180deg,\r\n    rgba(0,0,0,.03) 15%,\r\n    rgba(0,0,0,.15) 40%,\r\n    rgba(0,0,0,.78) 100%\r\n  );\r\n  pointer-events:none;\r\n}\r\n\r\n\/* GLASS INFORMATION PANEL *\/\r\n\r\n#mc-community .mc-card-content {\r\n  position:absolute;\r\n  z-index:2;\r\n  left:8%;\r\n  right:8%;\r\n  bottom:12px;\r\n  padding:16px 13px;\r\n  border:1px solid rgba(255,255,255,.3);\r\n  border-radius:8px;\r\n  background:rgba(8,18,20,.84);\r\n  backdrop-filter:blur(9px);\r\n  -webkit-backdrop-filter:blur(9px);\r\n  transform:translateY(12px);\r\n  opacity:.8;\r\n  transition:transform .6s ease,opacity .6s ease;\r\n}\r\n\r\n#mc-community .mc-slide.active .mc-card-content {\r\n  transform:translateY(0);\r\n  opacity:1;\r\n}\r\n\r\n#mc-community .mc-card-number {\r\n  display:inline-block;\r\n  margin-bottom:10px;\r\n  color:var(--gold);\r\n  font-family:'Space Grotesk',sans-serif;\r\n  font-size:11px;\r\n  font-weight:700;\r\n  letter-spacing:2px;\r\n}\r\n\r\n#mc-community .mc-card-content h3 {\r\n  margin:0 0 8px;\r\n  color:var(--white);\r\n  font-family:'Space Grotesk',sans-serif;\r\n  font-size:21px;\r\n  font-weight:700;\r\n  line-height:1.2;\r\n}\r\n\r\n#mc-community .mc-card-content p {\r\n  max-width:510px;\r\n  margin:0;\r\n  color:rgba(255,255,255,.88);\r\n  font-size:10px;\r\n  line-height:1.55;\r\n}\r\n\r\n#mc-community .mc-card-extra {\r\n  display:none;\r\n  margin-top:10px;\r\n  color:#DCE5E5;\r\n  font-size:10px;\r\n  line-height:1.6;\r\n}\r\n\r\n#mc-community .mc-slide.active .mc-card-extra {\r\n  display:block;\r\n  animation:mcFadeUp .6s ease both;\r\n}\r\n\r\n#mc-community .mc-card-tag {\r\n  display:inline-block;\r\n  margin-top:10px;\r\n  padding:7px 10px;\r\n  border:1px solid rgba(0,184,170,.65);\r\n  border-radius:3px;\r\n  color:var(--teal);\r\n  font-size:8px;\r\n  font-weight:800;\r\n  letter-spacing:1.5px;\r\n  text-transform:uppercase;\r\n}\r\n\r\n\/* NAVIGATION *\/\r\n\r\n#mc-community .mc-controls {\r\n  display:flex;\r\n  justify-content:center;\r\n  align-items:center;\r\n  gap:22px;\r\n  margin-top:0;\r\n}\r\n\r\n#mc-community .mc-arrow {\r\n  display:flex;\r\n  justify-content:center;\r\n  align-items:center;\r\n  width:42px;\r\n  height:42px;\r\n  border:1px solid rgba(0,184,170,.65);\r\n  border-radius:50%;\r\n  background:transparent;\r\n  color:var(--teal);\r\n  font-size:22px;\r\n  cursor:pointer;\r\n  transition:all .3s ease;\r\n}\r\n\r\n#mc-community .mc-arrow:hover {\r\n  background:var(--teal);\r\n  color:var(--navy);\r\n  transform:scale(1.08);\r\n  box-shadow:0 0 22px rgba(0,184,170,.25);\r\n}\r\n\r\n#mc-community .mc-dots {\r\n  display:flex;\r\n  justify-content:center;\r\n  align-items:center;\r\n  gap:9px;\r\n}\r\n\r\n#mc-community .mc-dot {\r\n  width:7px;\r\n  height:7px;\r\n  padding:0;\r\n  border:0;\r\n  border-radius:20px;\r\n  background:rgba(255,255,255,.3);\r\n  cursor:pointer;\r\n  transition:all .35s ease;\r\n}\r\n\r\n#mc-community .mc-dot.active {\r\n  width:22px;\r\n  background:var(--teal);\r\n  box-shadow:0 0 12px rgba(0,184,170,.5);\r\n}\r\n\r\n#mc-community .mc-counter {\r\n  min-width:55px;\r\n  color:var(--gold);\r\n  font-family:'Space Grotesk',sans-serif;\r\n  font-size:12px;\r\n  font-weight:700;\r\n  letter-spacing:2px;\r\n  text-align:center;\r\n}\r\n\r\n\/* BOTTOM CTA *\/\r\n\r\n#mc-community .mc-bottom {\r\n  position:relative;\r\n  z-index:2;\r\n  max-width:1120px;\r\n  margin:65px auto 0;\r\n  padding-top:30px;\r\n  border-top:1px solid rgba(255,255,255,.17);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:25px;\r\n}\r\n\r\n#mc-community .mc-bottom small {\r\n  display:block;\r\n  margin-bottom:9px;\r\n  color:var(--gold);\r\n  font-size:10px;\r\n  font-weight:700;\r\n  letter-spacing:2.5px;\r\n  text-transform:uppercase;\r\n}\r\n\r\n#mc-community .mc-bottom h3 {\r\n  margin:0;\r\n  color:var(--white);\r\n  font-family:'Space Grotesk',sans-serif;\r\n  font-size:clamp(22px,3vw,32px);\r\n  font-weight:600;\r\n}\r\n\r\n#mc-community .mc-join {\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:15px;\r\n  min-height:52px;\r\n  padding:0 25px;\r\n  border:1px solid var(--teal);\r\n  border-radius:5px;\r\n  color:var(--navy);\r\n  background:var(--teal);\r\n  font-size:12px;\r\n  font-weight:800;\r\n  text-decoration:none;\r\n  transition:.35s ease;\r\n}\r\n\r\n#mc-community .mc-join:hover {\r\n  transform:translateY(-5px);\r\n  background:var(--gold);\r\n  border-color:var(--gold);\r\n  box-shadow:0 12px 30px rgba(0,184,170,.2);\r\n}\r\n\r\n#mc-community .mc-join span {\r\n  font-size:18px;\r\n  transition:transform .3s ease;\r\n}\r\n\r\n#mc-community .mc-join:hover span {\r\n  transform:translateX(6px);\r\n}\r\n\r\n\/* ENTRANCE ANIMATION *\/\r\n\r\n@keyframes mcFadeUp {\r\n  from {\r\n    opacity:0;\r\n    transform:translateY(22px);\r\n  }\r\n  to {\r\n    opacity:1;\r\n    transform:translateY(0);\r\n  }\r\n}\r\n\r\n\/* TABLET *\/\r\n\r\n@media(max-width:850px) {\r\n  #mc-community {\r\n    padding:80px 4% 70px;\r\n  }\r\n\r\n  #mc-community .mc-stage {\r\n    height:410px;\r\n  }\r\n\r\n  #mc-community .mc-slide {\r\n    width:43%;\r\n    height:330px;\r\n  }\r\n\r\n  #mc-community .mc-slide.active {\r\n    transform:translateX(-50%) scale(1.04);\r\n  }\r\n\r\n  #mc-community .mc-slide.prev {\r\n    transform:translateX(-125%) scale(.82);\r\n  }\r\n\r\n  #mc-community .mc-slide.next {\r\n    transform:translateX(25%) scale(.82);\r\n  }\r\n\r\n  #mc-community .mc-slide.far-prev {\r\n    transform:translateX(-205%) scale(.68);\r\n  }\r\n\r\n  #mc-community .mc-slide.far-next {\r\n    transform:translateX(105%) scale(.68);\r\n  }\r\n\r\n  #mc-community .mc-card-content {\r\n    left:6%;\r\n    right:6%;\r\n    padding:14px 11px;\r\n  }\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media(max-width:550px) {\r\n  #mc-community {\r\n    padding:70px 5% 65px;\r\n  }\r\n\r\n  #mc-community .mc-intro {\r\n    margin-bottom:40px;\r\n  }\r\n\r\n  #mc-community .mc-intro h2 {\r\n    font-size:39px;\r\n    letter-spacing:-1.5px;\r\n  }\r\n\r\n  #mc-community .mc-intro p {\r\n    font-size:13px;\r\n  }\r\n\r\n  #mc-community .mc-carousel-label {\r\n    font-size:8px;\r\n    letter-spacing:1px;\r\n  }\r\n\r\n  #mc-community .mc-stage {\r\n    height:390px;\r\n    perspective:900px;\r\n  }\r\n\r\n  #mc-community .mc-slide {\r\n    top:10px;\r\n    width:72%;\r\n    height:340px;\r\n  }\r\n\r\n  #mc-community .mc-slide.active {\r\n    transform:translateX(-50%) scale(1.02);\r\n  }\r\n\r\n  #mc-community .mc-slide.prev {\r\n    transform:translateX(-83%) scale(.78);\r\n    opacity:.65;\r\n  }\r\n\r\n  #mc-community .mc-slide.next {\r\n    transform:translateX(-17%) scale(.78);\r\n    opacity:.65;\r\n  }\r\n\r\n  #mc-community .mc-slide.far-prev {\r\n    opacity:0;\r\n    transform:translateX(-150%) scale(.6);\r\n  }\r\n\r\n  #mc-community .mc-slide.far-next {\r\n    opacity:0;\r\n    transform:translateX(50%) scale(.6);\r\n  }\r\n\r\n  #mc-community .mc-card-content {\r\n    left:5%;\r\n    right:5%;\r\n    bottom:10px;\r\n    padding:13px 10px;\r\n  }\r\n\r\n  #mc-community .mc-card-content h3 {\r\n    font-size:19px;\r\n  }\r\n\r\n  #mc-community .mc-card-content p {\r\n    font-size:10px;\r\n  }\r\n\r\n  #mc-community .mc-card-extra {\r\n    font-size:10px;\r\n  }\r\n\r\n  #mc-community .mc-card-tag {\r\n    font-size:7px;\r\n  }\r\n\r\n  #mc-community .mc-controls {\r\n    gap:12px;\r\n  }\r\n\r\n  #mc-community .mc-arrow {\r\n    width:36px;\r\n    height:36px;\r\n    font-size:19px;\r\n  }\r\n\r\n  #mc-community .mc-bottom {\r\n    align-items:flex-start;\r\n    flex-direction:column;\r\n    margin-top:55px;\r\n  }\r\n\r\n  #mc-community .mc-join {\r\n    width:100%;\r\n  }\r\n}\r\n\r\n\/* REDUCED MOTION *\/\r\n\r\n@media(prefers-reduced-motion:reduce) {\r\n  #mc-community *,\r\n  #mc-community *::before,\r\n  #mc-community *::after {\r\n    animation:none!important;\r\n    transition:none!important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<!-- BACKGROUND -->\r\n<div class=\"mc-orbit one\"><\/div>\r\n<div class=\"mc-orbit two\"><\/div>\r\n\r\n<!-- INTRO -->\r\n<div class=\"mc-intro\">\r\n  <div class=\"mc-kicker\">The People Behind The Ideas<\/div>\r\n\r\n  <h2>\r\n    Different Minds.\r\n    <span>One Creative Community.<\/span>\r\n  <\/h2>\r\n\r\n  <p>\r\n    Great ideas happen when different people come together.\r\n    Discover a community where everyone can learn, experiment,\r\n    share knowledge and create something meaningful.\r\n  <\/p>\r\n<\/div>\r\n\r\n<!-- COVERFLOW CAROUSEL -->\r\n<div class=\"mc-carousel-wrap\">\r\n\r\n  <div class=\"mc-carousel-label\">\r\n    <span>Find Your Place In The Community<\/span>\r\n    <span>Explore Five Ways To Get Involved<\/span>\r\n  <\/div>\r\n\r\n  <div class=\"mc-stage\" tabindex=\"0\" aria-label=\"Community groups carousel\">\r\n\r\n    <!-- 01 STUDENTS -->\r\n    <article class=\"mc-slide active\">\r\n      <img decoding=\"async\" src=\"YOUR-IMAGE-URL-1\"\r\n           alt=\"Students collaborating on creative projects\">\r\n\r\n      <div class=\"mc-card-content\">\r\n        <span class=\"mc-card-number\">01 \/ COMMUNITY<\/span>\r\n        <h3>Students<\/h3>\r\n        <p>\r\n          Take your learning beyond the classroom. Build skills,\r\n          explore technology and turn ideas into reality.\r\n        <\/p>\r\n        <div class=\"mc-card-extra\">\r\n          Meet other students, take part in practical workshops\r\n          and build projects that develop your creativity and confidence.\r\n        <\/div>\r\n        <span class=\"mc-card-tag\">Discover Your Potential<\/span>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- 02 PROFESSIONALS -->\r\n    <article class=\"mc-slide\">\r\n      <img decoding=\"async\" src=\"YOUR-IMAGE-URL-2\"\r\n           alt=\"Professionals exchanging knowledge and ideas\">\r\n\r\n      <div class=\"mc-card-content\">\r\n        <span class=\"mc-card-number\">02 \/ COMMUNITY<\/span>\r\n        <h3>Professionals<\/h3>\r\n        <p>\r\n          Bring your experience, exchange perspectives and\r\n          inspire the next generation of makers.\r\n        <\/p>\r\n        <div class=\"mc-card-extra\">\r\n          Share professional insights, support collaborative\r\n          projects and connect with emerging creative talent.\r\n        <\/div>\r\n        <span class=\"mc-card-tag\">Share Your Experience<\/span>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- 03 BEGINNERS -->\r\n    <article class=\"mc-slide\">\r\n      <img decoding=\"async\" src=\"YOUR-IMAGE-URL-3\"\r\n           alt=\"Beginner exploring digital making\">\r\n\r\n      <div class=\"mc-card-content\">\r\n        <span class=\"mc-card-number\">03 \/ COMMUNITY<\/span>\r\n        <h3>Beginners<\/h3>\r\n        <p>\r\n          Curious about making? Start from scratch and discover\r\n          what you can achieve with the right support.\r\n        <\/p>\r\n        <div class=\"mc-card-extra\">\r\n          No previous experience is required. Explore tools,\r\n          learn new techniques and develop your skills step by step.\r\n        <\/div>\r\n        <span class=\"mc-card-tag\">Start Something New<\/span>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- 04 HOBBYISTS -->\r\n    <article class=\"mc-slide\">\r\n      <img decoding=\"async\" src=\"YOUR-IMAGE-URL-4\"\r\n           alt=\"Creative hobbyist working on a personal project\">\r\n\r\n      <div class=\"mc-card-content\">\r\n        <span class=\"mc-card-number\">04 \/ COMMUNITY<\/span>\r\n        <h3>Hobbyists<\/h3>\r\n        <p>\r\n          Follow your curiosity, experiment with new ideas\r\n          and bring your personal projects to life.\r\n        <\/p>\r\n        <div class=\"mc-card-extra\">\r\n          Connect with people who share your interests,\r\n          exchange creative ideas and try new ways of making.\r\n        <\/div>\r\n        <span class=\"mc-card-tag\">Make It Your Own<\/span>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- 05 EDUCATORS -->\r\n    <article class=\"mc-slide\">\r\n      <img decoding=\"async\" src=\"YOUR-IMAGE-URL-5\"\r\n           alt=\"Educators supporting collaborative learning\">\r\n\r\n      <div class=\"mc-card-content\">\r\n        <span class=\"mc-card-number\">05 \/ COMMUNITY<\/span>\r\n        <h3>Educators<\/h3>\r\n        <p>\r\n          Encourage experimentation, share knowledge and\r\n          help learners discover the power of making.\r\n        <\/p>\r\n        <div class=\"mc-card-extra\">\r\n          Connect with creative learners, exchange teaching\r\n          approaches and encourage practical, collaborative learning.\r\n        <\/div>\r\n        <span class=\"mc-card-tag\">Inspire What's Possible<\/span>\r\n      <\/div>\r\n    <\/article>\r\n\r\n  <\/div>\r\n\r\n  <!-- NAVIGATION -->\r\n  <div class=\"mc-controls\">\r\n\r\n    <button class=\"mc-arrow mc-prev\"\r\n            type=\"button\"\r\n            aria-label=\"Previous community group\">\r\n      &#8592;\r\n    <\/button>\r\n\r\n    <div class=\"mc-dots\" aria-label=\"Choose community group\">\r\n      <button class=\"mc-dot active\" type=\"button\" aria-label=\"Show Students\"><\/button>\r\n      <button class=\"mc-dot\" type=\"button\" aria-label=\"Show Professionals\"><\/button>\r\n      <button class=\"mc-dot\" type=\"button\" aria-label=\"Show Beginners\"><\/button>\r\n      <button class=\"mc-dot\" type=\"button\" aria-label=\"Show Hobbyists\"><\/button>\r\n      <button class=\"mc-dot\" type=\"button\" aria-label=\"Show Educators\"><\/button>\r\n    <\/div>\r\n\r\n    <span class=\"mc-counter\" aria-live=\"polite\">01 \/ 05<\/span>\r\n\r\n    <button class=\"mc-arrow mc-next\"\r\n            type=\"button\"\r\n            aria-label=\"Next community group\">\r\n      &#8594;\r\n    <\/button>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- FINAL CTA -->\r\n<div class=\"mc-bottom\">\r\n  <div>\r\n    <small>Your Ideas Belong Here<\/small>\r\n    <h3>Come curious. Leave inspired.<\/h3>\r\n  <\/div>\r\n\r\n  <a class=\"mc-join\"\r\n     href=\"https:\/\/cdtmaker.club\/?page_id=347\">\r\n    Find out how to join\r\n    <span>\u2192<\/span>\r\n  <\/a>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  const section = document.querySelector('#mc-community');\r\n\r\n  if (!section || section.dataset.ready === 'true') return;\r\n  section.dataset.ready = 'true';\r\n\r\n  const slides = Array.from(section.querySelectorAll('.mc-slide'));\r\n  const dots = Array.from(section.querySelectorAll('.mc-dot'));\r\n  const previous = section.querySelector('.mc-prev');\r\n  const next = section.querySelector('.mc-next');\r\n  const counter = section.querySelector('.mc-counter');\r\n  const stage = section.querySelector('.mc-stage');\r\n\r\n  let current = 0;\r\n  let startX = 0;\r\n\r\n  function updateCarousel(index) {\r\n    current = (index + slides.length) % slides.length;\r\n\r\n    slides.forEach((slide, i) => {\r\n      slide.classList.remove(\r\n        'active',\r\n        'prev',\r\n        'next',\r\n        'far-prev',\r\n        'far-next'\r\n      );\r\n\r\n      const difference = (i - current + slides.length) % slides.length;\r\n\r\n      if (difference === 0) {\r\n        slide.classList.add('active');\r\n      } else if (difference === 1) {\r\n        slide.classList.add('next');\r\n      } else if (difference === slides.length - 1) {\r\n        slide.classList.add('prev');\r\n      } else if (difference === 2) {\r\n        slide.classList.add('far-next');\r\n      } else {\r\n        slide.classList.add('far-prev');\r\n      }\r\n\r\n      slide.setAttribute(\r\n        'aria-hidden',\r\n        i === current ? 'false' : 'true'\r\n      );\r\n\r\n      slide.tabIndex = i === current ? 0 : -1;\r\n    });\r\n\r\n    dots.forEach((dot, i) => {\r\n      dot.classList.toggle('active', i === current);\r\n      dot.setAttribute(\r\n        'aria-current',\r\n        i === current ? 'true' : 'false'\r\n      );\r\n    });\r\n\r\n    counter.textContent =\r\n      String(current + 1).padStart(2, '0') + ' \/ 05';\r\n  }\r\n\r\n  previous.addEventListener('click', function() {\r\n    updateCarousel(current - 1);\r\n  });\r\n\r\n  next.addEventListener('click', function() {\r\n    updateCarousel(current + 1);\r\n  });\r\n\r\n  dots.forEach((dot, i) => {\r\n    dot.addEventListener('click', function() {\r\n      updateCarousel(i);\r\n    });\r\n  });\r\n\r\n  slides.forEach((slide, i) => {\r\n    slide.addEventListener('click', function() {\r\n      if (i !== current) {\r\n        updateCarousel(i);\r\n      }\r\n    });\r\n  });\r\n\r\n  \/* TOUCH AND MOUSE SWIPE *\/\r\n\r\n  stage.addEventListener('pointerdown', function(event) {\r\n    startX = event.clientX;\r\n  });\r\n\r\n  stage.addEventListener('pointerup', function(event) {\r\n    const distance = event.clientX - startX;\r\n\r\n    if (Math.abs(distance) > 45) {\r\n      updateCarousel(current + (distance < 0 ? 1 : -1));\r\n    }\r\n  });\r\n\r\n  \/* KEYBOARD NAVIGATION *\/\r\n\r\n  stage.addEventListener('keydown', function(event) {\r\n    if (event.key === 'ArrowRight') {\r\n      event.preventDefault();\r\n      updateCarousel(current + 1);\r\n    }\r\n\r\n    if (event.key === 'ArrowLeft') {\r\n      event.preventDefault();\r\n      updateCarousel(current - 1);\r\n    }\r\n  });\r\n\r\n  updateCarousel(0);\r\n})();\r\n<\/script>\r\n\r\n<\/section>\r\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-7afc9dd e-flex e-con-boxed e-con e-parent\" data-id=\"7afc9dd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53d595c elementor-widget elementor-widget-html\" data-id=\"53d595c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- CDT MAKER CLUB - SECTION 06: ANIMATED FINAL CTA -->\r\n\r\n<section id=\"mc-final-cta\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');\r\n\r\n#mc-final-cta {\r\n  --navy: #06191D;\r\n  --teal: #00B8AA;\r\n  --gold: #F3D09A;\r\n  --white: #FFFFFF;\r\n\r\n  position: relative;\r\n  left: 50%;\r\n  width: 100vw;\r\n  margin-left: -50vw;\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  box-sizing: border-box;\r\n  padding: 110px 6%;\r\n  background: var(--navy);\r\n  color: var(--white);\r\n  font-family: 'Inter', sans-serif;\r\n}\r\n\r\n#mc-final-cta *,\r\n#mc-final-cta *::before,\r\n#mc-final-cta *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* BACKGROUND LIGHTING *\/\r\n\r\n#mc-final-cta .cta-glow {\r\n  position: absolute;\r\n  width: 500px;\r\n  height: 500px;\r\n  border-radius: 50%;\r\n  filter: blur(110px);\r\n  pointer-events: none;\r\n  z-index: -1;\r\n}\r\n\r\n#mc-final-cta .cta-glow-one {\r\n  top: -250px;\r\n  left: -150px;\r\n  background: rgba(0,184,170,.25);\r\n  animation: glowFloat 9s ease-in-out infinite alternate;\r\n}\r\n\r\n#mc-final-cta .cta-glow-two {\r\n  bottom: -300px;\r\n  right: -100px;\r\n  background: rgba(243,208,154,.18);\r\n  animation: glowFloat 11s ease-in-out infinite alternate-reverse;\r\n}\r\n\r\n@keyframes glowFloat {\r\n  from { transform: translate(0,0) scale(.9); }\r\n  to { transform: translate(90px,70px) scale(1.2); }\r\n}\r\n\r\n\/* ANIMATED CIRCLES *\/\r\n\r\n#mc-final-cta .cta-circle {\r\n  position: absolute;\r\n  width: 430px;\r\n  height: 430px;\r\n  border: 1px solid rgba(0,184,170,.2);\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  animation: ctaRotate 35s linear infinite;\r\n}\r\n\r\n#mc-final-cta .cta-circle::before,\r\n#mc-final-cta .cta-circle::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 9px;\r\n  height: 9px;\r\n  border-radius: 50%;\r\n  background: var(--teal);\r\n  box-shadow: 0 0 15px var(--teal), 0 0 30px var(--teal);\r\n}\r\n\r\n#mc-final-cta .cta-circle::before {\r\n  top: 45px;\r\n  left: 70px;\r\n}\r\n\r\n#mc-final-cta .cta-circle::after {\r\n  bottom: 55px;\r\n  right: 65px;\r\n  background: var(--gold);\r\n  box-shadow: 0 0 15px var(--gold);\r\n}\r\n\r\n#mc-final-cta .cta-circle-one {\r\n  top: -230px;\r\n  right: -100px;\r\n}\r\n\r\n#mc-final-cta .cta-circle-two {\r\n  bottom: -310px;\r\n  left: -170px;\r\n  width: 520px;\r\n  height: 520px;\r\n  border-color: rgba(243,208,154,.17);\r\n  animation-direction: reverse;\r\n}\r\n\r\n@keyframes ctaRotate {\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n\/* FLOATING PARTICLES *\/\r\n\r\n#mc-final-cta .cta-particle {\r\n  position: absolute;\r\n  width: 5px;\r\n  height: 5px;\r\n  border-radius: 50%;\r\n  background: var(--teal);\r\n  box-shadow: 0 0 12px var(--teal);\r\n  pointer-events: none;\r\n  animation: particleFloat 7s ease-in-out infinite;\r\n}\r\n\r\n#mc-final-cta .p1 { top: 20%; left: 15%; }\r\n#mc-final-cta .p2 { top: 65%; left: 10%; animation-delay: 2s; }\r\n#mc-final-cta .p3 { top: 30%; right: 13%; animation-delay: 1s; }\r\n#mc-final-cta .p4 { top: 78%; right: 18%; animation-delay: 3s; }\r\n#mc-final-cta .p5 { top: 48%; left: 6%; animation-delay: 4s; }\r\n\r\n@keyframes particleFloat {\r\n  0%,100% { transform: translateY(0); opacity: .25; }\r\n  50% { transform: translateY(-35px); opacity: 1; }\r\n}\r\n\r\n\/* MAIN PANEL *\/\r\n\r\n#mc-final-cta .cta-inner {\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 1080px;\r\n  margin: 0 auto;\r\n  padding: 65px 35px;\r\n  text-align: center;\r\n  border: 1px solid rgba(255,255,255,.16);\r\n  border-radius: 24px;\r\n  background: linear-gradient(\r\n    145deg,\r\n    rgba(255,255,255,.075),\r\n    rgba(255,255,255,.015)\r\n  );\r\n  backdrop-filter: blur(12px);\r\n  box-shadow:\r\n    0 30px 100px rgba(0,0,0,.3),\r\n    inset 0 1px 0 rgba(255,255,255,.08);\r\n  animation: panelReveal 1.2s ease both;\r\n}\r\n\r\n@keyframes panelReveal {\r\n  from { opacity: 0; transform: translateY(45px) scale(.97); }\r\n  to { opacity: 1; transform: translateY(0) scale(1); }\r\n}\r\n\r\n\/* ANIMATED LOGO *\/\r\n\r\n#mc-final-cta .cta-logo-wrap {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 190px;\r\n  height: 190px;\r\n  margin: 0 auto 30px;\r\n  border-radius: 50%;\r\n  animation: logoFloat 5s ease-in-out infinite;\r\n}\r\n\r\n#mc-final-cta .cta-logo-wrap::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -9px;\r\n  border-radius: 50%;\r\n  border: 2px solid transparent;\r\n  border-top-color: var(--teal);\r\n  border-right-color: var(--gold);\r\n  animation: logoSpin 7s linear infinite;\r\n}\r\n\r\n#mc-final-cta .cta-logo-wrap::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -17px;\r\n  border: 1px solid rgba(0,184,170,.25);\r\n  border-radius: 50%;\r\n  animation: logoPulse 3s ease-in-out infinite;\r\n}\r\n\r\n#mc-final-cta .cta-logo {\r\n  position: relative;\r\n  z-index: 2;\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  object-fit: cover;\r\n  border-radius: 50%;\r\n  border: 3px solid var(--teal);\r\n  box-shadow:\r\n    0 0 18px rgba(0,184,170,.5),\r\n    0 0 45px rgba(0,184,170,.2);\r\n  transition: .5s ease;\r\n}\r\n\r\n#mc-final-cta .cta-logo-wrap:hover .cta-logo {\r\n  transform: scale(1.06);\r\n  box-shadow:\r\n    0 0 25px rgba(0,184,170,.8),\r\n    0 0 65px rgba(0,184,170,.35);\r\n}\r\n\r\n@keyframes logoSpin {\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n@keyframes logoPulse {\r\n  0%,100% { transform: scale(.97); opacity: .35; }\r\n  50% { transform: scale(1.08); opacity: 1; }\r\n}\r\n\r\n@keyframes logoFloat {\r\n  0%,100% { transform: translateY(0); }\r\n  50% { transform: translateY(-9px); }\r\n}\r\n\r\n\/* LABEL *\/\r\n\r\n#mc-final-cta .cta-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  margin-bottom: 24px;\r\n  color: var(--gold);\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n  letter-spacing: 3px;\r\n  text-transform: uppercase;\r\n}\r\n\r\n#mc-final-cta .cta-label::before,\r\n#mc-final-cta .cta-label::after {\r\n  content: \"\";\r\n  width: 28px;\r\n  height: 1px;\r\n  background: var(--teal);\r\n  box-shadow: 0 0 10px var(--teal);\r\n}\r\n\r\n\/* ANIMATED LINE *\/\r\n\r\n#mc-final-cta .cta-line {\r\n  position: relative;\r\n  width: 65px;\r\n  height: 2px;\r\n  margin: 0 auto 26px;\r\n  background: var(--teal);\r\n  box-shadow: 0 0 15px var(--teal);\r\n  animation: lineExpand 3s ease-in-out infinite;\r\n}\r\n\r\n@keyframes lineExpand {\r\n  0%,100% { width: 45px; opacity: .5; }\r\n  50% { width: 115px; opacity: 1; }\r\n}\r\n\r\n\/* HEADING *\/\r\n\r\n#mc-final-cta h2 {\r\n  max-width: 850px;\r\n  margin: 0 auto;\r\n  color: var(--white);\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  font-size: clamp(42px, 6.5vw, 76px);\r\n  font-weight: 700;\r\n  line-height: 1.08;\r\n  letter-spacing: -3px;\r\n  animation: headingReveal 1.4s .2s both;\r\n}\r\n\r\n#mc-final-cta h2 span {\r\n  display: block;\r\n  color: var(--teal);\r\n  text-shadow: 0 0 30px rgba(0,184,170,.25);\r\n  animation: tealGlow 4s ease-in-out infinite;\r\n}\r\n\r\n@keyframes headingReveal {\r\n  from { opacity: 0; transform: translateY(25px); }\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n@keyframes tealGlow {\r\n  0%,100% { text-shadow: 0 0 10px rgba(0,184,170,.15); }\r\n  50% { text-shadow: 0 0 30px rgba(0,184,170,.5); }\r\n}\r\n\r\n\/* DESCRIPTION *\/\r\n\r\n#mc-final-cta .cta-description {\r\n  max-width: 610px;\r\n  margin: 25px auto 34px;\r\n  color: #B6C4C6;\r\n  font-size: 15px;\r\n  line-height: 1.9;\r\n  animation: headingReveal 1.5s .4s both;\r\n}\r\n\r\n\/* BUTTON *\/\r\n\r\n#mc-final-cta .cta-button {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 18px;\r\n  min-height: 57px;\r\n  padding: 0 30px;\r\n  border: 1px solid var(--teal);\r\n  border-radius: 6px;\r\n  background: var(--teal);\r\n  color: var(--navy);\r\n  font-size: 13px;\r\n  font-weight: 800;\r\n  text-decoration: none;\r\n  overflow: hidden;\r\n  transition: .4s ease;\r\n  animation: buttonReveal 1.5s .6s both;\r\n}\r\n\r\n#mc-final-cta .cta-button::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: -50%;\r\n  left: -100%;\r\n  width: 55%;\r\n  height: 200%;\r\n  background: rgba(255,255,255,.35);\r\n  transform: rotate(25deg);\r\n  transition: left .65s ease;\r\n}\r\n\r\n#mc-final-cta .cta-button:hover::before {\r\n  left: 150%;\r\n}\r\n\r\n#mc-final-cta .cta-button:hover {\r\n  border-color: var(--gold);\r\n  background: var(--gold);\r\n  transform: translateY(-6px);\r\n  box-shadow: 0 12px 35px rgba(0,184,170,.3);\r\n}\r\n\r\n#mc-final-cta .cta-button span {\r\n  position: relative;\r\n  font-size: 20px;\r\n  transition: transform .3s ease;\r\n}\r\n\r\n#mc-final-cta .cta-button:hover span {\r\n  transform: translateX(7px);\r\n}\r\n\r\n@keyframes buttonReveal {\r\n  from { opacity: 0; transform: translateY(20px); }\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* BOTTOM TEXT *\/\r\n\r\n#mc-final-cta .cta-bottom {\r\n  margin-top: 38px;\r\n  color: rgba(255,255,255,.5);\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n  letter-spacing: 2px;\r\n  text-transform: uppercase;\r\n  animation: headingReveal 1.5s .8s both;\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n\r\n@media(max-width: 600px) {\r\n  #mc-final-cta {\r\n    padding: 75px 5%;\r\n  }\r\n\r\n  #mc-final-cta .cta-inner {\r\n    padding: 55px 20px;\r\n  }\r\n\r\n  #mc-final-cta .cta-logo-wrap {\r\n    width: 145px;\r\n    height: 145px;\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  #mc-final-cta h2 {\r\n    font-size: clamp(38px, 10vw, 52px);\r\n    letter-spacing: -1.5px;\r\n  }\r\n\r\n  #mc-final-cta .cta-description {\r\n    font-size: 14px;\r\n  }\r\n\r\n  #mc-final-cta .cta-circle {\r\n    opacity: .5;\r\n  }\r\n\r\n  #mc-final-cta .cta-label {\r\n    font-size: 9px;\r\n    letter-spacing: 2px;\r\n  }\r\n}\r\n\r\n\/* ACCESSIBILITY *\/\r\n\r\n@media(prefers-reduced-motion: reduce) {\r\n  #mc-final-cta *,\r\n  #mc-final-cta *::before,\r\n  #mc-final-cta *::after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<!-- BACKGROUND EFFECTS -->\r\n\r\n<div class=\"cta-glow cta-glow-one\"><\/div>\r\n<div class=\"cta-glow cta-glow-two\"><\/div>\r\n\r\n<div class=\"cta-circle cta-circle-one\"><\/div>\r\n<div class=\"cta-circle cta-circle-two\"><\/div>\r\n\r\n<div class=\"cta-particle p1\"><\/div>\r\n<div class=\"cta-particle p2\"><\/div>\r\n<div class=\"cta-particle p3\"><\/div>\r\n<div class=\"cta-particle p4\"><\/div>\r\n<div class=\"cta-particle p5\"><\/div>\r\n\r\n<!-- MAIN CONTENT -->\r\n\r\n<div class=\"cta-inner\">\r\n\r\n  <!-- CDT MAKER CLUB LOGO -->\r\n  <div class=\"cta-logo-wrap\">\r\n    <img decoding=\"async\"\r\n      class=\"cta-logo\"\r\n      src=\"YOUR-CDT-LOGO-URL\"\r\n      alt=\"CDT Maker Club Logo\"\r\n    >\r\n  <\/div>\r\n\r\n  <div class=\"cta-label\">\r\n    Become Part of Something Creative\r\n  <\/div>\r\n\r\n  <div class=\"cta-line\"><\/div>\r\n\r\n  <h2>\r\n    Your Next Idea\r\n    <span>Starts Here.<\/span>\r\n  <\/h2>\r\n\r\n  <p class=\"cta-description\">\r\n    Have an idea, a passion for making or simply the curiosity\r\n    to try something new? Join a community where creativity\r\n    meets technology and possibilities become real projects.\r\n  <\/p>\r\n\r\n  <a class=\"cta-button\"\r\n     href=\"https:\/\/cdtmaker.club\/?page_id=347\">\r\n    Find Out How to Join\r\n    <span>\u2192<\/span>\r\n  <\/a>\r\n\r\n  <div class=\"cta-bottom\">\r\n    Imagine &nbsp;\u00b7&nbsp; Create &nbsp;\u00b7&nbsp; Collaborate &nbsp;\u00b7&nbsp; Innovate\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<\/section>\r\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-d6672ad e-flex e-con-boxed e-con e-parent\" data-id=\"d6672ad\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d9183b elementor-widget elementor-widget-html\" data-id=\"3d9183b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- CDT MAKER CLUB - SECTION 11: FOOTER -->\r\n\r\n<style>\r\n\/* ==============================\r\n   FOOTER - FULL WIDTH\r\n============================== *\/\r\n\r\n#mc-about-footer {\r\n  --mc-bg: #070D0B;\r\n  --mc-teal: #19D8C4;\r\n  --mc-orange: #F0A04C;\r\n  --mc-border: #343B40;\r\n  --mc-text: #F5F3F5;\r\n  --mc-muted: #AEB8BD;\r\n\r\n  width: 100vw;\r\n  max-width: none;\r\n  margin-left: calc(50% - 50vw);\r\n  margin-right: calc(50% - 50vw);\r\n  margin-top: 0;\r\n  margin-bottom: 0;\r\n  padding: 58px 0 20px;\r\n\r\n  background: var(--mc-bg) !important;\r\n  color: var(--mc-text);\r\n  font-family: Inter, Arial, sans-serif;\r\n  font-size: 16px;\r\n  line-height: 1.7;\r\n  border-top: 1px solid var(--mc-border);\r\n  overflow: hidden;\r\n}\r\n\r\n#mc-about-footer *,\r\n#mc-about-footer *::before,\r\n#mc-about-footer *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ==============================\r\n   INNER CONTAINER\r\n============================== *\/\r\n\r\n#mc-about-footer .mc-footer-wrap {\r\n  width: min(1160px, calc(100% - 48px));\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* ==============================\r\n   MAIN FOOTER GRID\r\n============================== *\/\r\n\r\n#mc-about-footer .mc-footer-main {\r\n  display: grid;\r\n  grid-template-columns: 1.5fr 0.8fr 0.9fr 1fr;\r\n  gap: 42px;\r\n  padding-bottom: 45px;\r\n}\r\n\r\n\/* ==============================\r\n   BRAND COLUMN\r\n============================== *\/\r\n\r\n#mc-about-footer .mc-footer-brand {\r\n  min-width: 0;\r\n  max-width: 300px;\r\n}\r\n\r\n#mc-about-footer .mc-footer-logo {\r\n  display: inline-flex;\r\n  flex-direction: column;\r\n  color: var(--mc-text);\r\n  font-family: \"Space Grotesk\", Inter, Arial, sans-serif;\r\n  font-size: 23px;\r\n  font-weight: 700;\r\n  line-height: 0.95;\r\n  letter-spacing: -0.8px;\r\n  text-decoration: none;\r\n}\r\n\r\n#mc-about-footer .mc-footer-logo:hover {\r\n  color: var(--mc-text);\r\n}\r\n\r\n#mc-about-footer .mc-footer-dot {\r\n  color: var(--mc-teal);\r\n}\r\n\r\n#mc-about-footer .mc-footer-description {\r\n  margin: 20px 0;\r\n  color: var(--mc-muted);\r\n  font-size: 13px;\r\n  line-height: 1.85;\r\n}\r\n\r\n\/* ==============================\r\n   GET INVOLVED BUTTON\r\n============================== *\/\r\n\r\n#mc-about-footer .mc-footer-cta {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 20px;\r\n  padding: 11px 14px;\r\n  border: 1px solid var(--mc-teal);\r\n  border-radius: 3px;\r\n  background: transparent;\r\n  color: var(--mc-teal);\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.2s ease,\r\n    color 0.2s ease;\r\n}\r\n\r\n#mc-about-footer .mc-footer-cta:hover {\r\n  background: var(--mc-teal);\r\n  color: var(--mc-bg);\r\n}\r\n\r\n\/* ==============================\r\n   FOOTER LINK COLUMNS\r\n============================== *\/\r\n\r\n#mc-about-footer .mc-footer-column {\r\n  min-width: 0;\r\n}\r\n\r\n#mc-about-footer .mc-footer-column h3 {\r\n  margin: 3px 0 19px;\r\n  color: var(--mc-text);\r\n  font-family: \"Space Grotesk\", Inter, Arial, sans-serif;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  line-height: 1.4;\r\n}\r\n\r\n#mc-about-footer .mc-footer-column ul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n#mc-about-footer .mc-footer-column li {\r\n  margin: 0 0 12px;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n#mc-about-footer .mc-footer-column li a,\r\n#mc-about-footer .mc-footer-contact-link {\r\n  color: var(--mc-muted);\r\n  font-size: 13px;\r\n  line-height: 1.7;\r\n  text-decoration: none;\r\n  transition: color 0.2s ease;\r\n}\r\n\r\n#mc-about-footer .mc-footer-column li a:hover,\r\n#mc-about-footer .mc-footer-contact-link:hover,\r\n#mc-about-footer .mc-footer-top:hover {\r\n  color: var(--mc-teal);\r\n}\r\n\r\n\/* ==============================\r\n   CONTACT COLUMN\r\n============================== *\/\r\n\r\n#mc-about-footer .mc-footer-contact p {\r\n  margin: 0 0 12px;\r\n  color: var(--mc-muted);\r\n  font-size: 13px;\r\n  line-height: 1.8;\r\n}\r\n\r\n#mc-about-footer .mc-footer-contact-link {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  color: var(--mc-teal);\r\n  font-weight: 600;\r\n}\r\n\r\n\/* ==============================\r\n   FOOTER BOTTOM\r\n============================== *\/\r\n\r\n#mc-about-footer .mc-footer-bottom {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 20px;\r\n  padding-top: 18px;\r\n  border-top: 1px solid var(--mc-border);\r\n}\r\n\r\n#mc-about-footer .mc-footer-bottom p {\r\n  margin: 0;\r\n  color: var(--mc-muted);\r\n  font-size: 11px;\r\n  line-height: 1.7;\r\n}\r\n\r\n#mc-about-footer .mc-footer-top {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 9px;\r\n  color: var(--mc-text);\r\n  font-size: 11px;\r\n  text-decoration: none;\r\n  transition: color 0.2s ease;\r\n}\r\n\r\n#mc-about-footer a:focus-visible {\r\n  outline: 2px solid var(--mc-orange);\r\n  outline-offset: 4px;\r\n}\r\n\r\n\/* ==============================\r\n   TABLET RESPONSIVE\r\n============================== *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n  #mc-about-footer .mc-footer-main {\r\n    grid-template-columns: 1.3fr 1fr 1fr;\r\n    gap: 32px;\r\n  }\r\n\r\n  #mc-about-footer .mc-footer-brand {\r\n    grid-column: 1 \/ -1;\r\n    max-width: 420px;\r\n  }\r\n}\r\n\r\n\/* ==============================\r\n   MOBILE RESPONSIVE\r\n============================== *\/\r\n\r\n@media (max-width: 560px) {\r\n\r\n  #mc-about-footer {\r\n    padding: 42px 0 18px;\r\n  }\r\n\r\n  #mc-about-footer .mc-footer-wrap {\r\n    width: calc(100% - 40px);\r\n  }\r\n\r\n  #mc-about-footer .mc-footer-main {\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 32px 20px;\r\n    padding-bottom: 30px;\r\n  }\r\n\r\n  #mc-about-footer .mc-footer-brand {\r\n    grid-column: 1 \/ -1;\r\n  }\r\n\r\n  #mc-about-footer .mc-footer-contact {\r\n    grid-column: 1 \/ -1;\r\n  }\r\n\r\n  #mc-about-footer .mc-footer-bottom {\r\n    align-items: flex-start;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  #mc-about-footer a {\r\n    transition: none;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<!-- ==============================\r\n     FOOTER HTML CONTENT\r\n============================== -->\r\n\r\n<footer class=\"mc-about-footer\" id=\"mc-about-footer\">\r\n\r\n  <div class=\"mc-footer-wrap\">\r\n\r\n    <!-- MAIN FOOTER CONTENT -->\r\n\r\n    <div class=\"mc-footer-main\">\r\n\r\n      <!-- BRAND COLUMN -->\r\n\r\n      <div class=\"mc-footer-brand\">\r\n\r\n        <a\r\n          href=\"https:\/\/cdtmaker.club\/\"\r\n          class=\"mc-footer-logo\"\r\n          aria-label=\"CDT Maker Club home\"\r\n        >\r\n          <span>MAKER<\/span>\r\n          <span>\r\n            CLUB<span class=\"mc-footer-dot\">.<\/span>\r\n          <\/span>\r\n        <\/a>\r\n\r\n        <p class=\"mc-footer-description\">\r\n          Bringing people, ideas and technology\r\n          together through creativity,\r\n          collaboration and hands-on making.\r\n        <\/p>\r\n\r\n        <a\r\n          href=\"https:\/\/cdtmaker.club\/?page_id=232\"\r\n          class=\"mc-footer-cta\"\r\n        >\r\n          Get involved\r\n          <span aria-hidden=\"true\">&#8599;<\/span>\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n      <!-- EXPLORE COLUMN -->\r\n\r\n      <nav class=\"mc-footer-column\" aria-label=\"Explore links\">\r\n\r\n        <h3>Explore<\/h3>\r\n\r\n        <ul>\r\n\r\n          <li>\r\n            <a href=\"https:\/\/cdtmaker.club\/\">\r\n              Home\r\n            <\/a>\r\n          <\/li>\r\n\r\n          <li>\r\n            <a href=\"https:\/\/cdtmaker.club\/?page_id=219\">\r\n              About Us\r\n            <\/a>\r\n          <\/li>\r\n\r\n          <li>\r\n            <a href=\"https:\/\/cdtmaker.club\/?page_id=136\">\r\n              Projects\r\n            <\/a>\r\n          <\/li>\r\n\r\n          <li>\r\n            <a href=\"https:\/\/cdtmaker.club\/?page_id=232\">\r\n              Get Involved\r\n            <\/a>\r\n          <\/li>\r\n\r\n        <\/ul>\r\n\r\n      <\/nav>\r\n\r\n      <!-- DISCOVER COLUMN -->\r\n\r\n      <nav class=\"mc-footer-column\" aria-label=\"Discover links\">\r\n\r\n        <h3>Discover<\/h3>\r\n\r\n        <ul>\r\n\r\n          <li>\r\n            <a href=\"\/archives\/\">\r\n              Project Archive\r\n            <\/a>\r\n          <\/li>\r\n\r\n          <li>\r\n            <a href=\"\/contact\/\">\r\n              Contact\r\n            <\/a>\r\n          <\/li>\r\n\r\n          <li>\r\n            <a href=\"\/privacy-policy\/\">\r\n              Privacy Policy\r\n            <\/a>\r\n          <\/li>\r\n\r\n        <\/ul>\r\n\r\n      <\/nav>\r\n\r\n      <!-- CONTACT COLUMN -->\r\n\r\n      <div class=\"mc-footer-column mc-footer-contact\">\r\n\r\n        <h3>Say hello<\/h3>\r\n\r\n        <p>\r\n          Have a question or an idea to share?\r\n        <\/p>\r\n\r\n        <a\r\n          href=\"\/contact\/\"\r\n          class=\"mc-footer-contact-link\"\r\n        >\r\n          Contact the team\r\n          <span aria-hidden=\"true\">&#8599;<\/span>\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- FOOTER BOTTOM -->\r\n\r\n    <div class=\"mc-footer-bottom\">\r\n\r\n      <p>\r\n        &copy;\r\n        <span id=\"mc-footer-year\">2026<\/span>\r\n        CDT Maker Club. All rights reserved.\r\n      <\/p>\r\n\r\n      <a href=\"#top\" class=\"mc-footer-top\">\r\n        Back to top\r\n        <span aria-hidden=\"true\">&#8593;<\/span>\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/footer>\r\n\r\n<!-- AUTOMATIC COPYRIGHT YEAR -->\r\n<script>\r\n(function () {\r\n  var year = document.getElementById(\"mc-footer-year\");\r\n\r\n  if (year) {\r\n    year.textContent = new Date().getFullYear();\r\n  }\r\n})();\r\n<\/script>\r\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>ABOUT MAKERS CLUB Where Ideas Become Things. Makers Club is a creative community where curiosity meets innovation. We bring people together to explore ideas, learn new skills and turn imagination into something real through creativity, technology and hands-on making. Explore Our Community A place to make things happen. Makers Club is a creative, collaborative community [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-219","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cdtmaker.club\/index.php?rest_route=\/wp\/v2\/pages\/219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cdtmaker.club\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cdtmaker.club\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cdtmaker.club\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/cdtmaker.club\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=219"}],"version-history":[{"count":134,"href":"https:\/\/cdtmaker.club\/index.php?rest_route=\/wp\/v2\/pages\/219\/revisions"}],"predecessor-version":[{"id":1319,"href":"https:\/\/cdtmaker.club\/index.php?rest_route=\/wp\/v2\/pages\/219\/revisions\/1319"}],"wp:attachment":[{"href":"https:\/\/cdtmaker.club\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}