{"id":46,"date":"2025-10-16T06:51:40","date_gmt":"2025-10-16T06:51:40","guid":{"rendered":"https:\/\/new.inx.net.za\/index.php\/home\/"},"modified":"2026-04-09T10:48:20","modified_gmt":"2026-04-09T10:48:20","slug":"home","status":"publish","type":"page","link":"https:\/\/new.inx.net.za\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"46\" class=\"elementor elementor-46\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8099fa6 e-con-full e-flex e-con e-parent\" data-id=\"8099fa6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16c6e2c elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"16c6e2c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- INX-ZA Hero Section for WordPress Elementor -->\n<!-- Paste this code into an Elementor HTML widget -->\n\n<style>\n  \/* Hero Section Styles *\/\n  .inx-hero-section {\n    position: relative;\n    height: 100vh;\n    min-height: 600px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: #0D1117;\n    overflow: hidden;\n  }\n\n  \/* Animated Arrows Container *\/\n  .inx-arrows-container {\n    position: absolute;\n    inset: 0;\n    overflow: hidden;\n  }\n\n  .inx-arrow-flow {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: 80px;\n    height: 80px;\n  }\n\n  \/* Arrow Animations *\/\n  @keyframes flowTop {\n    0% {\n      transform: translate(-50%, -50%) translateY(-45vh);\n      opacity: 0;\n    }\n    10% {\n      opacity: 1;\n    }\n    90% {\n      opacity: 1;\n    }\n    100% {\n      transform: translate(-50%, -50%) translateY(0);\n      opacity: 0;\n    }\n  }\n\n  @keyframes flowBottom {\n    0% {\n      transform: translate(-50%, -50%) translateY(45vh);\n      opacity: 0;\n    }\n    10% {\n      opacity: 1;\n    }\n    90% {\n      opacity: 1;\n    }\n    100% {\n      transform: translate(-50%, -50%) translateY(0);\n      opacity: 0;\n    }\n  }\n\n  @keyframes flowLeft {\n    0% {\n      transform: translate(-50%, -50%) translateX(-45vw);\n      opacity: 0;\n    }\n    10% {\n      opacity: 1;\n    }\n    90% {\n      opacity: 1;\n    }\n    100% {\n      transform: translate(-50%, -50%) translateX(0);\n      opacity: 0;\n    }\n  }\n\n  @keyframes flowRight {\n    0% {\n      transform: translate(-50%, -50%) translateX(45vw);\n      opacity: 0;\n    }\n    10% {\n      opacity: 1;\n    }\n    90% {\n      opacity: 1;\n    }\n    100% {\n      transform: translate(-50%, -50%) translateX(0);\n      opacity: 0;\n    }\n  }\n\n  .inx-arrow-top {\n    animation: flowTop 4s ease-in-out infinite;\n  }\n\n  .inx-arrow-bottom {\n    animation: flowBottom 4s ease-in-out infinite;\n  }\n\n  .inx-arrow-left {\n    animation: flowLeft 4s ease-in-out infinite;\n  }\n\n  .inx-arrow-right {\n    animation: flowRight 4s ease-in-out infinite;\n  }\n\n  \/* Gradient Overlay *\/\n  .inx-gradient-overlay {\n    position: absolute;\n    inset: 0;\n    opacity: 0.1;\n    background-image: radial-gradient(circle at 20% 50%, rgba(195, 17, 38, 0.2) 0%, transparent 50%),\n                     radial-gradient(circle at 80% 80%, rgba(0, 56, 168, 0.15) 0%, transparent 50%),\n                     radial-gradient(circle at 40% 20%, rgba(0, 122, 61, 0.12) 0%, transparent 50%);\n  }\n\n  \/* Content Container *\/\n  .inx-hero-content {\n    position: relative;\n    z-index: 10;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 24px 40px;\n    text-align: center;\n  }\n\n  \/* Typography *\/\n  .inx-hero-title {\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 1rem;\n    line-height: 1;\n  }\n\n  .inx-hero-badge {\n    display: inline-block;\n    padding: 6px 12px;\n    background-color: rgba(195, 17, 38, 0.1);\n    border: 1px solid rgba(195, 17, 38, 0.3);\n    border-radius: 8px;\n    margin-bottom: 1rem;\n  }\n\n  .inx-hero-badge p {\n    font-size: 0.875rem;\n    color: #C31126;\n    margin: 0;\n  }\n\n  .inx-hero-subtitle {\n    font-size: 1.25rem;\n    color: #D1D5DB;\n    margin-bottom: 0.5rem;\n    max-width: 48rem;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .inx-hero-description {\n    font-size: 1rem;\n    color: #9CA3AF;\n    margin-bottom: 1.5rem;\n    max-width: 42rem;\n    margin-left: auto;\n    margin-right: auto;\n    line-height: 1.625;\n  }\n\n  \/* Buttons Container *\/\n  .inx-cta-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    margin-bottom: 1.5rem;\n  }\n\n  .inx-btn-primary {\n    padding: 12px 24px;\n    background-color: #C31126;\n    color: white;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.3s;\n    text-decoration: none;\n  }\n\n  .inx-btn-primary:hover {\n    background-color: #A00E1E;\n  }\n\n  .inx-btn-secondary {\n    padding: 12px 24px;\n    background-color: transparent;\n    color: white;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border: 2px solid rgba(255, 255, 255, 0.2);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: all 0.3s;\n    text-decoration: none;\n    display: inline-block;\n  }\n\n  .inx-btn-secondary:hover {\n    border-color: rgba(255, 255, 255, 0.4);\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  \/* Badge Logo Float Animation *\/\n  @keyframes float {\n    0%, 100% {\n      transform: translateY(0px) rotate(0deg);\n    }\n    50% {\n      transform: translateY(-10px) rotate(2deg);\n    }\n  }\n\n  .inx-badge-logo {\n    animation: float 6s ease-in-out infinite;\n    width: 128px;\n    height: auto;\n    filter: drop-shadow(0 25px 25px rgb(0 0 0 \/ 0.15));\n    opacity: 0.9;\n    transition: opacity 0.3s;\n  }\n\n  .inx-badge-logo:hover {\n    opacity: 1;\n  }\n\n  \/* Stats Grid *\/\n  .inx-stats-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n    max-width: 80rem;\n    margin: 0 auto;\n  }\n\n  .inx-stat-card {\n    padding: 12px 16px;\n    background-color: rgba(255, 255, 255, 0.05);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 8px;\n    backdrop-filter: blur(12px);\n  }\n\n  .inx-stat-label {\n    font-size: 0.75rem;\n    color: #9CA3AF;\n    margin-bottom: 4px;\n  }\n\n  .inx-stat-value {\n    font-size: 1.125rem;\n    font-family: monospace;\n    font-weight: 700;\n    color: white;\n    margin: 0;\n  }\n\n  \/* Arrow Icon *\/\n  .inx-arrow-icon {\n    display: inline-block;\n    transition: transform 0.3s;\n  }\n\n  .inx-btn-primary:hover .inx-arrow-icon {\n    transform: translateX(4px);\n  }\n\n  \/* Responsive Design *\/\n  @media (min-width: 640px) {\n    .inx-hero-title {\n      font-size: 3rem;\n    }\n    \n    .inx-cta-container {\n      flex-direction: row;\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .inx-hero-title {\n      font-size: 3.75rem;\n    }\n    \n    .inx-hero-content {\n      padding-left: 48px;\n      padding-right: 48px;\n    }\n    \n    .inx-stats-grid {\n      grid-template-columns: repeat(4, 1fr);\n    }\n    \n    .inx-badge-logo {\n      width: 144px;\n    }\n  }\n\n  \/* Hide\/Show elements based on screen size *\/\n  .inx-mobile-only {\n    display: block;\n  }\n\n  .inx-desktop-only {\n    display: none;\n  }\n\n  @media (min-width: 640px) {\n    .inx-mobile-only {\n      display: none;\n    }\n    \n    .inx-desktop-only {\n      display: block;\n    }\n  }\n<\/style>\n\n<section class=\"inx-hero-section\">\n  <!-- Animated Arrows Background -->\n  <div class=\"inx-arrows-container\">\n    <!-- Top Arrow - Red -->\n    <div class=\"inx-arrow-flow inx-arrow-top\">\n      <svg width=\"80\" height=\"80\" viewBox=\"0 0 168.65 168.65\">\n        <polyline\n          fill=\"none\"\n          stroke=\"#C31126\"\n          stroke-width=\"3\"\n          stroke-miterlimit=\"10\"\n          points=\"127.99 0.35 84.33 44.02 40.66 0.35\"\n          style=\"opacity: 0.9;\"\n        \/>\n      <\/svg>\n    <\/div>\n    \n    <!-- Left Arrow - Green -->\n    <div class=\"inx-arrow-flow inx-arrow-left\">\n      <svg width=\"80\" height=\"80\" viewBox=\"0 0 168.65 168.65\">\n        <polyline\n          fill=\"none\"\n          stroke=\"#007A3D\"\n          stroke-width=\"3\"\n          stroke-miterlimit=\"10\"\n          points=\"0.35 40.66 44.02 84.33 0.35 127.99\"\n          style=\"opacity: 0.9;\"\n        \/>\n      <\/svg>\n    <\/div>\n    \n    <!-- Right Arrow - Yellow -->\n    <div class=\"inx-arrow-flow inx-arrow-right\">\n      <svg width=\"80\" height=\"80\" viewBox=\"0 0 168.65 168.65\">\n        <polyline\n          fill=\"none\"\n          stroke=\"#FFB300\"\n          stroke-width=\"3\"\n          stroke-miterlimit=\"10\"\n          points=\"168.3 127.99 124.63 84.33 168.3 40.66\"\n          style=\"opacity: 0.9;\"\n        \/>\n      <\/svg>\n    <\/div>\n    \n    <!-- Bottom Arrow - Blue -->\n    <div class=\"inx-arrow-flow inx-arrow-bottom\">\n      <svg width=\"80\" height=\"80\" viewBox=\"0 0 168.65 168.65\">\n        <polyline\n          fill=\"none\"\n          stroke=\"#0038A8\"\n          stroke-width=\"3\"\n          stroke-miterlimit=\"10\"\n          points=\"40.66 168.3 84.33 124.63 127.99 168.3\"\n          style=\"opacity: 0.9;\"\n        \/>\n      <\/svg>\n    <\/div>\n  <\/div>\n\n  <!-- Gradient Overlays -->\n  <div class=\"inx-gradient-overlay\"><\/div>\n\n  <!-- Content -->\n  <div class=\"inx-hero-content\">\n    <div>\n      <h1 class=\"inx-hero-title\">\n        South Africa's Neutral<br \/>Internet Exchange\n      <\/h1>\n      <div class=\"inx-hero-badge\">\n        <p>Est. 1996<\/p>\n      <\/div>\n    <\/div>\n\n    <p class=\"inx-hero-subtitle\">\n      100% Neutral. Community-Driven. Internet Exchange Platform\n    <\/p>\n\n    <p class=\"inx-hero-description\">\n      Faster. More affordable. More reliable internet starts here. Join the networks strengthening South Africa's internet infrastructure.\n    <\/p>\n\n    <!-- CTAs with Badge - Same Row -->\n    <div class=\"inx-cta-container\">\n      <a href=\"#join\" class=\"inx-btn-primary\">\n        Join Now\n        <span class=\"inx-arrow-icon\">\u2192<\/span>\n      <\/a>\n      <a href=\"#connect\" class=\"inx-btn-secondary\">\n        Connect to INX-ZA\n      <\/a>\n      <!-- Desktop Badge - Inline with Buttons -->\n      <div class=\"inx-desktop-only\">\n        <img decoding=\"async\" \n          src=\"https:\/\/new.inx.net.za\/wp-content\/uploads\/2026\/04\/sticker_cropped.png\" \n          alt=\"Peering for Better Internet\" \n          class=\"inx-badge-logo\"\n        \/>\n      <\/div>\n    <\/div>\n\n    <!-- Stats Pills -->\n    <div class=\"inx-stats-grid\">\n      <div class=\"inx-stat-card\">\n        <p class=\"inx-stat-label\">Operating Since<\/p>\n        <p class=\"inx-stat-value\">28+ Years<\/p>\n      <\/div>\n      <div class=\"inx-stat-card\">\n        <p class=\"inx-stat-label\">Exchange Locations<\/p>\n        <p class=\"inx-stat-value\">4 Cities<\/p>\n      <\/div>\n      <div class=\"inx-stat-card\">\n        <p class=\"inx-stat-label\">Ownership<\/p>\n        <p class=\"inx-stat-value\">100% Community<\/p>\n      <\/div>\n      <div class=\"inx-stat-card\">\n        <p class=\"inx-stat-label\">Status<\/p>\n        <p class=\"inx-stat-value\">Fully Neutral<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \nIMPORTANT NOTES FOR ELEMENTOR:\n1. Replace \"YOUR_BADGE_LOGO_URL_HERE\" with your actual badge logo image URL\n2. Update href=\"#join\" and href=\"#connect\" with your actual links\/anchor IDs\n3. In Elementor, add this code to an HTML widget\n4. Make sure the section this is in has no padding\/margin if you want full-screen\n5. You may need to adjust the font-family to match your WordPress theme\n-->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b483e4 e-con-full e-flex e-con e-parent\" data-id=\"1b483e4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3fa3e2c elementor-widget elementor-widget-html\" data-id=\"3fa3e2c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- INX-ZA ZANOG@iWeek2026 Event Section for WordPress Elementor -->\n<!-- Paste this code into an Elementor HTML widget -->\n\n<style>\n  \/* ZANOG Event Section Styles *\/\n  .inx-zanog-section {\n    padding: 96px 0;\n    background-color: #FFB300;\n    position: relative;\n    overflow: hidden;\n  }\n\n  \/* Background Pattern *\/\n  .inx-zanog-pattern {\n    position: absolute;\n    inset: 0;\n    opacity: 0.05;\n    background-image: radial-gradient(circle at 2px 2px, rgba(13, 17, 23, 0.3) 1px, transparent 0);\n    background-size: 40px 40px;\n    pointer-events: none;\n  }\n\n  .inx-zanog-container {\n    position: relative;\n    max-width: 1440px;\n    margin: 0 auto;\n    padding: 0 24px;\n    z-index: 1;\n  }\n\n  \/* Featured Event Card *\/\n  .inx-featured-event {\n    position: relative;\n    border-radius: 16px;\n    border: 2px solid rgba(195, 17, 38, 0.4);\n    overflow: hidden;\n  }\n\n  .inx-event-inner {\n    position: relative;\n    background-color: #0D1117;\n    border-radius: 16px;\n    overflow: hidden;\n  }\n\n  .inx-event-bg {\n    position: absolute;\n    inset: 0;\n    opacity: 0.3;\n  }\n\n  .inx-event-bg img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .inx-event-gradient {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(to right, #0D1117 0%, rgba(13, 17, 23, 0.9) 40%, transparent 70%);\n  }\n\n  .inx-event-content {\n    position: relative;\n    padding: 32px;\n  }\n\n  \/* Event Badge *\/\n  .inx-event-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background-color: rgba(195, 17, 38, 0.2);\n    border: 1px solid rgba(195, 17, 38, 0.4);\n    border-radius: 9999px;\n    margin-bottom: 24px;\n  }\n\n  .inx-badge-text-red {\n    font-size: 0.75rem;\n    font-weight: 700;\n    color: #C31126;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  .inx-badge-text-green {\n    font-size: 0.75rem;\n    font-weight: 700;\n    color: #007A3D;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  .inx-badge-divider {\n    color: #4B5563;\n  }\n\n  \/* Event Grid *\/\n  .inx-event-grid {\n    display: grid;\n    gap: 32px;\n  }\n\n  \/* Event Title *\/\n  .inx-event-title {\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 16px;\n    line-height: 1.1;\n  }\n\n  .inx-event-subtitle {\n    font-size: 1.25rem;\n    color: #D1D5DB;\n    margin-bottom: 24px;\n  }\n\n  \/* Event Details *\/\n  .inx-event-details {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-bottom: 32px;\n  }\n\n  .inx-event-detail {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .inx-event-detail-icon {\n    color: #C31126;\n    flex-shrink: 0;\n  }\n\n  .inx-event-detail-text {\n    color: #D1D5DB;\n  }\n\n  .inx-event-description {\n    color: #9CA3AF;\n    line-height: 1.625;\n    max-width: 42rem;\n    margin-bottom: 32px;\n  }\n\n  \/* Event CTAs *\/\n  .inx-event-ctas {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .inx-cta-primary {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 16px 32px;\n    background-color: #C31126;\n    color: white;\n    font-weight: 500;\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.3s;\n    text-decoration: none;\n  }\n\n  .inx-cta-primary:hover {\n    background-color: #A00E1E;\n  }\n\n  .inx-cta-primary:hover .inx-cta-arrow {\n    transform: translateX(4px);\n  }\n\n  .inx-cta-arrow {\n    transition: transform 0.3s;\n  }\n\n  .inx-cta-secondary {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 16px 32px;\n    background-color: transparent;\n    color: white;\n    font-weight: 500;\n    border: 2px solid rgba(255, 255, 255, 0.2);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.3s;\n    text-decoration: none;\n  }\n\n  .inx-cta-secondary:hover {\n    border-color: rgba(255, 255, 255, 0.4);\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  \/* Calendar Widget *\/\n  .inx-calendar-widget {\n    display: none;\n    width: 320px;\n    background-color: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(10px);\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    border-radius: 12px;\n    overflow: hidden;\n  }\n\n  .inx-calendar-header {\n    background-color: #C31126;\n    color: white;\n    text-align: center;\n    padding: 12px;\n    font-size: 1.125rem;\n    font-weight: 700;\n  }\n\n  .inx-calendar-body {\n    padding: 16px;\n  }\n\n  .inx-calendar-days {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: 4px;\n    margin-bottom: 8px;\n  }\n\n  .inx-calendar-day-header {\n    font-size: 0.75rem;\n    color: #9CA3AF;\n    text-align: center;\n    font-weight: 500;\n    padding: 4px 0;\n  }\n\n  .inx-calendar-dates {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: 4px;\n  }\n\n  .inx-calendar-date {\n    aspect-ratio: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.875rem;\n    border-radius: 6px;\n    transition: all 0.3s;\n  }\n\n  .inx-calendar-date-empty {\n    \/* Empty cell *\/\n  }\n\n  .inx-calendar-date-default {\n    color: #D1D5DB;\n  }\n\n  .inx-calendar-date-default:hover {\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .inx-calendar-date-event {\n    background-color: #C31126;\n    color: white;\n    font-weight: 700;\n    box-shadow: 0 0 0 2px rgba(195, 17, 38, 0.5);\n  }\n\n  .inx-calendar-legend {\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  .inx-legend-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.75rem;\n    color: #9CA3AF;\n  }\n\n  .inx-legend-color {\n    width: 12px;\n    height: 12px;\n    background-color: #C31126;\n    border-radius: 3px;\n  }\n\n  \/* Responsive Design *\/\n  @media (min-width: 768px) {\n    .inx-event-ctas {\n      flex-direction: row;\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .inx-zanog-container {\n      padding: 0 48px;\n    }\n\n    .inx-event-content {\n      padding: 48px;\n    }\n\n    .inx-event-grid {\n      grid-template-columns: 1fr auto;\n      align-items: start;\n    }\n\n    .inx-event-title {\n      font-size: 3.75rem;\n    }\n\n    .inx-calendar-widget {\n      display: block;\n    }\n  }\n<\/style>\n\n<section class=\"inx-zanog-section\">\n  <!-- Background Pattern -->\n  <div class=\"inx-zanog-pattern\"><\/div>\n\n  <div class=\"inx-zanog-container\">\n    <!-- ZANOG@iWeek2026 - Featured Event Card -->\n    <div class=\"inx-featured-event\">\n      <div class=\"inx-event-inner\">\n        <!-- Background Image -->\n        <div class=\"inx-event-bg\">\n          <img decoding=\"async\" src=\"https:\/\/new.inx.net.za\/wp-content\/uploads\/2026\/04\/projection.jpg\" alt=\"\">\n        <\/div>\n        <div class=\"inx-event-gradient\"><\/div>\n\n        <div class=\"inx-event-content\">\n          <!-- Badge -->\n          <div class=\"inx-event-badge\">\n            <span class=\"inx-badge-text-red\">Conference<\/span>\n            <span class=\"inx-badge-divider\">\u00b7<\/span>\n            <span class=\"inx-badge-text-green\">Featured Event<\/span>\n          <\/div>\n\n          <div class=\"inx-event-grid\">\n            <div>\n              <!-- Event Name -->\n              <h3 class=\"inx-event-title\">\n                ZANOG@iWeek2026\n              <\/h3>\n              <p class=\"inx-event-subtitle\">\n                South African Network Operators Group @ iWeek 2026\n              <\/p>\n\n              <!-- Key Details -->\n              <div class=\"inx-event-details\">\n                <div class=\"inx-event-detail\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-event-detail-icon\">\n                    <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n                    <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n                    <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/>\n                    <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/>\n                  <\/svg>\n                  <span class=\"inx-event-detail-text\">21\u201323 April 2026<\/span>\n                <\/div>\n                <div class=\"inx-event-detail\">\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-event-detail-icon\">\n                    <path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/>\n                    <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n                  <\/svg>\n                  <span class=\"inx-event-detail-text\">Irene Country Lodge, Irene, Pretoria (Gauteng)<\/span>\n                <\/div>\n              <\/div>\n\n              <!-- Description -->\n              <p class=\"inx-event-description\">\n                South Africa's premier network operators gathering. Technical presentations, peering forums, \n                and community networking. Co-organised by INX-ZA.\n              <\/p>\n\n              <!-- CTAs -->\n              <div class=\"inx-event-ctas\">\n                <a href=\"#register\" class=\"inx-cta-primary\">\n                  Register Now\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-cta-arrow\">\n                    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\n                    <polyline points=\"12 5 19 12 12 19\"\/>\n                  <\/svg>\n                <\/a>\n                <a href=\"#travel\" class=\"inx-cta-secondary\">\n                  Travel & Accommodation Info\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/>\n                    <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n                    <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/>\n                    <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n                  <\/svg>\n                <\/a>\n              <\/div>\n            <\/div>\n\n            <!-- Calendar Widget (Desktop Only) -->\n            <div class=\"inx-calendar-widget\">\n              <div class=\"inx-calendar-header\">\n                APRIL 2026\n              <\/div>\n              <div class=\"inx-calendar-body\">\n                <!-- Calendar Day Headers -->\n                <div class=\"inx-calendar-days\">\n                  <div class=\"inx-calendar-day-header\">Su<\/div>\n                  <div class=\"inx-calendar-day-header\">Mo<\/div>\n                  <div class=\"inx-calendar-day-header\">Tu<\/div>\n                  <div class=\"inx-calendar-day-header\">We<\/div>\n                  <div class=\"inx-calendar-day-header\">Th<\/div>\n                  <div class=\"inx-calendar-day-header\">Fr<\/div>\n                  <div class=\"inx-calendar-day-header\">Sa<\/div>\n                <\/div>\n                <!-- Calendar Dates -->\n                <div class=\"inx-calendar-dates\">\n                  <!-- Empty cells (April 2026 starts on Wednesday) -->\n                  <div class=\"inx-calendar-date inx-calendar-date-empty\"><\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-empty\"><\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-empty\"><\/div>\n                  <!-- Days 1-30 -->\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">1<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">2<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">3<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">4<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">5<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">6<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">7<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">8<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">9<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">10<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">11<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">12<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">13<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">14<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">15<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">16<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">17<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">18<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">19<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">20<\/div>\n                  <!-- Event Days (21-23) -->\n                  <div class=\"inx-calendar-date inx-calendar-date-event\">21<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-event\">22<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-event\">23<\/div>\n                  <!-- Rest of days -->\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">24<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">25<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">26<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">27<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">28<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">29<\/div>\n                  <div class=\"inx-calendar-date inx-calendar-date-default\">30<\/div>\n                <\/div>\n                <!-- Legend -->\n                <div class=\"inx-calendar-legend\">\n                  <div class=\"inx-legend-item\">\n                    <div class=\"inx-legend-color\"><\/div>\n                    <span>Event Days<\/span>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \nIMPORTANT NOTES FOR ELEMENTOR:\n1. This is the standalone ZANOG@iWeek2026 featured event section\n2. Yellow\/gold background (#FFB300) with subtle dot pattern overlay\n3. Featured event card includes:\n   - Conference background image (projection.jpg) with dark overlay\n   - Event badge (Conference \u00b7 Featured Event) in red\/green\n   - Title: ZANOG@iWeek2026\n   - Subtitle and key details (dates, location)\n   - Description text\n   - Two CTA buttons (Register Now, Travel & Accommodation Info)\n   - Calendar widget (desktop only) showing April 2026 with event days 21-23 highlighted\n4. Calendar widget only displays on desktop (1024px+)\n5. All icons embedded as inline SVG\n6. Fully responsive layout\n7. Update href=\"#register\" and href=\"#travel\" with your actual links\n8. Replace background image if needed\n9. All styling is inline - no external dependencies\n-->\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-af7808f e-con-full e-flex e-con e-parent\" data-id=\"af7808f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-546e8cc elementor-widget elementor-widget-html\" data-id=\"546e8cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- INX-ZA Community Events & Engagement Section for WordPress Elementor -->\n<!-- Paste this code into an Elementor HTML widget -->\n\n<style>\n  \/* Community Events Section Styles *\/\n  .inx-events-section {\n    padding: 96px 0;\n    background-color: #FFB300;\n    position: relative;\n    overflow: hidden;\n  }\n\n  \/* Background Pattern *\/\n  .inx-events-pattern {\n    position: absolute;\n    inset: 0;\n    opacity: 0.05;\n    background-image: radial-gradient(circle at 2px 2px, rgba(13, 17, 23, 0.3) 1px, transparent 0);\n    background-size: 40px 40px;\n    pointer-events: none;\n  }\n\n  .inx-events-container {\n    position: relative;\n    max-width: 1440px;\n    margin: 0 auto;\n    padding: 0 24px;\n    z-index: 1;\n  }\n\n  \/* Header *\/\n  .inx-events-header {\n    text-align: center;\n    margin-bottom: 64px;\n  }\n\n  .inx-events-title {\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: #0D1117;\n    margin-bottom: 1.5rem;\n    line-height: 1.2;\n  }\n\n  .inx-events-description {\n    font-size: 1.125rem;\n    color: rgba(13, 17, 23, 0.8);\n    max-width: 48rem;\n    margin: 0 auto;\n  }\n\n  \/* Conference Photos Grid *\/\n  .inx-photos-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .inx-photo-card {\n    position: relative;\n    overflow: hidden;\n    border-radius: 12px;\n    aspect-ratio: 4\/3;\n  }\n\n  .inx-photo-card img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.5s;\n  }\n\n  .inx-photo-card:hover img {\n    transform: scale(1.05);\n  }\n\n  .inx-photo-large {\n    grid-row: span 1;\n  }\n\n  .inx-photo-overlay {\n    position: absolute;\n    inset: 0;\n  }\n\n  .inx-photo-overlay-gradient-bottom {\n    background: linear-gradient(to top, #0D1117, transparent, transparent);\n  }\n\n  .inx-photo-overlay-gradient-corner {\n    background: linear-gradient(to bottom right, rgba(13, 17, 23, 0.8), transparent);\n  }\n\n  .inx-photo-content {\n    position: absolute;\n    padding: 24px;\n  }\n\n  .inx-photo-content-bottom {\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n\n  .inx-photo-content-center {\n    inset: 0;\n    display: flex;\n    align-items: center;\n  }\n\n  .inx-photo-title-large {\n    font-size: 1.5rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 8px;\n  }\n\n  .inx-photo-title-small {\n    font-size: 1.25rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 4px;\n  }\n\n  .inx-photo-text {\n    color: #D1D5DB;\n    font-size: 0.875rem;\n  }\n\n  \/* Responsive Design *\/\n  @media (min-width: 768px) {\n    .inx-photos-grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n    \n    .inx-photo-large {\n      grid-row: span 2;\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .inx-events-title {\n      font-size: 3rem;\n    }\n    \n    .inx-events-container {\n      padding: 0 48px;\n    }\n  }\n<\/style>\n\n<section class=\"inx-events-section\">\n  <!-- Background Pattern -->\n  <div class=\"inx-events-pattern\"><\/div>\n\n  <div class=\"inx-events-container\">\n    <!-- Header -->\n    <div class=\"inx-events-header\">\n      <h2 class=\"inx-events-title\">\n        Community Events & Engagement\n      <\/h2>\n      <p class=\"inx-events-description\">\n        Connect with Africa's internet infrastructure leaders through our annual gatherings, \n        technical workshops, and community forums.\n      <\/p>\n    <\/div>\n\n    <!-- Conference Photos Grid -->\n    <div class=\"inx-photos-grid\">\n      <!-- Large Featured Image -->\n      <div class=\"inx-photo-card inx-photo-large\">\n        <img decoding=\"async\" src=\"https:\/\/new.inx.net.za\/wp-content\/uploads\/2026\/04\/clap.jpg\" alt=\"Conference keynote\">\n        <div class=\"inx-photo-overlay inx-photo-overlay-gradient-bottom\"><\/div>\n        <div class=\"inx-photo-content inx-photo-content-bottom\">\n          <h3 class=\"inx-photo-title-large\">Industry Leadership<\/h3>\n          <p class=\"inx-photo-text\">Keynotes from Africa's top infrastructure experts<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Top Right -->\n      <div class=\"inx-photo-card\">\n        <img decoding=\"async\" src=\"https:\/\/new.inx.net.za\/wp-content\/uploads\/2026\/04\/raise_hand.jpg\" alt=\"Technical sessions\">\n        <div class=\"inx-photo-overlay inx-photo-overlay-gradient-corner\"><\/div>\n        <div class=\"inx-photo-content inx-photo-content-center\">\n          <div>\n            <h4 class=\"inx-photo-title-small\">Technical Workshops<\/h4>\n            <p class=\"inx-photo-text\">Hands-on network operations training<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Bottom Right -->\n      <div class=\"inx-photo-card\">\n        <img decoding=\"async\" src=\"https:\/\/new.inx.net.za\/wp-content\/uploads\/2026\/04\/team.jpg\" alt=\"Networking sessions\">\n        <div class=\"inx-photo-overlay inx-photo-overlay-gradient-corner\"><\/div>\n        <div class=\"inx-photo-content inx-photo-content-center\">\n          <div>\n            <h4 class=\"inx-photo-title-small\">Networking<\/h4>\n            <p class=\"inx-photo-text\">Build connections with peers<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \nIMPORTANT NOTES FOR ELEMENTOR:\n1. This is the standalone Community Events & Engagement section (without ZANOG event)\n2. Yellow\/gold background (#FFB300) with subtle dot pattern overlay\n3. Section header with title and description\n4. Conference photos grid with 3 images:\n   - 1 large featured image (spans 2 rows on desktop) with bottom gradient overlay\n   - 2 smaller images with corner gradient overlays and centered text\n5. Images zoom slightly on hover\n6. Fully responsive:\n   - Mobile: Single column, all images same size\n   - Tablet\/Desktop (768px+): 2 columns, large image spans 2 rows\n7. All conference photos use actual URLs from your WordPress media library\n8. All styling is inline - no external dependencies\n9. Ready to paste directly into Elementor HTML widget\n-->\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-27f3f29 e-con-full e-flex e-con e-parent\" data-id=\"27f3f29\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-011662d elementor-widget elementor-widget-html\" data-id=\"011662d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- INX-ZA Why INX Section for WordPress Elementor -->\n<!-- Paste this code into an Elementor HTML widget -->\n\n<style>\n  \/* Why INX Section Styles *\/\n  .inx-why-section {\n    padding: 96px 0;\n    background-color: #1C2128;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .inx-why-container {\n    max-width: 1440px;\n    margin: 0 auto;\n    padding: 0 24px;\n    position: relative;\n    z-index: 10;\n  }\n\n  \/* Header *\/\n  .inx-why-header {\n    text-align: center;\n    margin-bottom: 64px;\n  }\n\n  .inx-why-title {\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 1.5rem;\n    line-height: 1.2;\n  }\n\n  .inx-why-description {\n    font-size: 1.125rem;\n    color: #9CA3AF;\n    max-width: 48rem;\n    margin: 0 auto;\n    line-height: 1.625;\n  }\n\n  \/* Stats Callouts *\/\n  .inx-stats-callouts {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 24px;\n    margin-bottom: 64px;\n    max-width: 56rem;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .inx-stat-callout {\n    text-align: center;\n    padding: 24px 32px;\n    border-radius: 12px;\n    border: 2px solid;\n    background: linear-gradient(to bottom right, transparent, transparent);\n  }\n\n  .inx-stat-callout-red {\n    background: linear-gradient(to bottom right, rgba(195, 17, 38, 0.2), transparent);\n    border-color: rgba(195, 17, 38, 0.4);\n  }\n\n  .inx-stat-callout-blue {\n    background: linear-gradient(to bottom right, rgba(0, 56, 168, 0.2), transparent);\n    border-color: rgba(0, 56, 168, 0.4);\n  }\n\n  .inx-stat-callout-green {\n    background: linear-gradient(to bottom right, rgba(0, 122, 61, 0.2), transparent);\n    border-color: rgba(0, 122, 61, 0.4);\n  }\n\n  .inx-stat-number {\n    font-size: 3rem;\n    font-family: monospace;\n    font-weight: 700;\n    margin-bottom: 8px;\n  }\n\n  .inx-stat-number-red {\n    color: #C31126;\n  }\n\n  .inx-stat-number-blue {\n    color: #0038A8;\n  }\n\n  .inx-stat-number-green {\n    color: #007A3D;\n  }\n\n  .inx-stat-label {\n    font-size: 0.875rem;\n    color: #D1D5DB;\n  }\n\n  \/* Feature Cards Grid *\/\n  .inx-features-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n\n  .inx-feature-card {\n    padding: 32px;\n    border-radius: 12px;\n    border: 2px solid;\n    background: linear-gradient(to bottom right, transparent, transparent);\n    transition: all 0.3s;\n  }\n\n  .inx-feature-card:hover {\n    background-color: rgba(255, 255, 255, 0.07);\n  }\n\n  \/* Card Color Variants *\/\n  .inx-feature-card-red {\n    background: linear-gradient(to bottom right, rgba(195, 17, 38, 0.1), transparent);\n    border-color: rgba(195, 17, 38, 0.2);\n  }\n\n  .inx-feature-card-red:hover {\n    border-color: rgba(195, 17, 38, 0.5);\n  }\n\n  .inx-feature-card-blue {\n    background: linear-gradient(to bottom right, rgba(0, 56, 168, 0.1), transparent);\n    border-color: rgba(0, 56, 168, 0.2);\n  }\n\n  .inx-feature-card-blue:hover {\n    border-color: rgba(0, 56, 168, 0.5);\n  }\n\n  .inx-feature-card-green {\n    background: linear-gradient(to bottom right, rgba(0, 122, 61, 0.1), transparent);\n    border-color: rgba(0, 122, 61, 0.2);\n  }\n\n  .inx-feature-card-green:hover {\n    border-color: rgba(0, 122, 61, 0.5);\n  }\n\n  .inx-feature-card-yellow {\n    background: linear-gradient(to bottom right, rgba(255, 179, 0, 0.1), transparent);\n    border-color: rgba(255, 179, 0, 0.2);\n  }\n\n  .inx-feature-card-yellow:hover {\n    border-color: rgba(255, 179, 0, 0.5);\n  }\n\n  \/* Icon Box *\/\n  .inx-feature-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 16px;\n    transition: all 0.3s;\n  }\n\n  .inx-feature-icon-red {\n    background-color: rgba(195, 17, 38, 0.1);\n  }\n\n  .inx-feature-card:hover .inx-feature-icon-red {\n    background-color: rgba(195, 17, 38, 0.2);\n  }\n\n  .inx-feature-icon-blue {\n    background-color: rgba(0, 56, 168, 0.1);\n  }\n\n  .inx-feature-card:hover .inx-feature-icon-blue {\n    background-color: rgba(0, 56, 168, 0.2);\n  }\n\n  .inx-feature-icon-green {\n    background-color: rgba(0, 122, 61, 0.1);\n  }\n\n  .inx-feature-card:hover .inx-feature-icon-green {\n    background-color: rgba(0, 122, 61, 0.2);\n  }\n\n  .inx-feature-icon-yellow {\n    background-color: rgba(255, 179, 0, 0.1);\n  }\n\n  .inx-feature-card:hover .inx-feature-icon-yellow {\n    background-color: rgba(255, 179, 0, 0.2);\n  }\n\n  \/* Icon SVGs *\/\n  .inx-icon-red {\n    color: #C31126;\n  }\n\n  .inx-icon-blue {\n    color: #0038A8;\n  }\n\n  .inx-icon-green {\n    color: #007A3D;\n  }\n\n  .inx-icon-yellow {\n    color: #FFB300;\n  }\n\n  \/* Feature Card Text *\/\n  .inx-feature-title {\n    font-size: 1.125rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 8px;\n  }\n\n  .inx-feature-description {\n    font-size: 0.875rem;\n    color: #9CA3AF;\n    line-height: 1.625;\n    margin: 0;\n  }\n\n  \/* Responsive Design *\/\n  @media (min-width: 768px) {\n    .inx-stats-callouts {\n      grid-template-columns: repeat(3, 1fr);\n    }\n    \n    .inx-features-grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .inx-why-title {\n      font-size: 3rem;\n    }\n    \n    .inx-why-container {\n      padding: 0 48px;\n    }\n    \n    .inx-features-grid {\n      grid-template-columns: repeat(4, 1fr);\n    }\n  }\n<\/style>\n\n<section class=\"inx-why-section\">\n  <div class=\"inx-why-container\">\n    <!-- Header -->\n    <div class=\"inx-why-header\">\n      <h2 class=\"inx-why-title\">\n        South Africa's only fully neutral,<br \/>community-owned Internet Exchange\n      <\/h2>\n      <p class=\"inx-why-description\">\n        INX-ZA operates as a non-profit, member-driven organization with a single mission: \n        to provide neutral, open, and affordable interconnection infrastructure that benefits \n        the entire South African internet community.\n      <\/p>\n    <\/div>\n\n    <!-- Stats Callouts -->\n    <div class=\"inx-stats-callouts\">\n      <div class=\"inx-stat-callout inx-stat-callout-red\">\n        <div class=\"inx-stat-number inx-stat-number-red\">100%<\/div>\n        <div class=\"inx-stat-label\">Neutral<\/div>\n      <\/div>\n      <div class=\"inx-stat-callout inx-stat-callout-blue\">\n        <div class=\"inx-stat-number inx-stat-number-blue\">4<\/div>\n        <div class=\"inx-stat-label\">Exchanges<\/div>\n      <\/div>\n      <div class=\"inx-stat-callout inx-stat-callout-green\">\n        <div class=\"inx-stat-number inx-stat-number-green\">28+<\/div>\n        <div class=\"inx-stat-label\">Years<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Feature Cards -->\n    <div class=\"inx-features-grid\">\n      <!-- Card 1: 100% Neutral -->\n      <div class=\"inx-feature-card inx-feature-card-red\">\n        <div class=\"inx-feature-icon inx-feature-icon-red\">\n          <!-- Shield Icon -->\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-red\">\n            <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\n          <\/svg>\n        <\/div>\n        <h3 class=\"inx-feature-title\">100% Neutral<\/h3>\n        <p class=\"inx-feature-description\">\n          Independently governed, no commercial bias. All members have equal voice and voting rights.\n        <\/p>\n      <\/div>\n\n      <!-- Card 2: Proven Performance -->\n      <div class=\"inx-feature-card inx-feature-card-blue\">\n        <div class=\"inx-feature-icon inx-feature-icon-blue\">\n          <!-- Network Icon -->\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-blue\">\n            <rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"\/>\n            <rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"\/>\n            <rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"\/>\n            <path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\"\/>\n            <path d=\"M12 12V8\"\/>\n          <\/svg>\n        <\/div>\n        <h3 class=\"inx-feature-title\">Proven Performance<\/h3>\n        <p class=\"inx-feature-description\">\n          Industry-leading uptime, low latency, and resilient infrastructure across SA.\n        <\/p>\n      <\/div>\n\n      <!-- Card 3: Cost Reduction -->\n      <div class=\"inx-feature-card inx-feature-card-green\">\n        <div class=\"inx-feature-icon inx-feature-icon-green\">\n          <!-- Dollar Sign Icon -->\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-green\">\n            <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"\/>\n            <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/>\n          <\/svg>\n        <\/div>\n        <h3 class=\"inx-feature-title\">Cost Reduction<\/h3>\n        <p class=\"inx-feature-description\">\n          Reduce bandwidth costs by up to 60% through local peering vs international transit.\n        <\/p>\n      <\/div>\n\n      <!-- Card 4: Community Driven -->\n      <div class=\"inx-feature-card inx-feature-card-yellow\">\n        <div class=\"inx-feature-icon inx-feature-icon-yellow\">\n          <!-- Users Icon -->\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-yellow\">\n            <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/>\n            <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n            <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/>\n            <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n          <\/svg>\n        <\/div>\n        <h3 class=\"inx-feature-title\">Community Driven<\/h3>\n        <p class=\"inx-feature-description\">\n          Run by members, for members. Democratic governance since 1996.\n        <\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \nIMPORTANT NOTES FOR ELEMENTOR:\n1. This section works standalone - just paste into an HTML widget\n2. The icons use Lucide icon SVG paths for maximum compatibility\n3. Hover effects are built-in with CSS\n4. Fully responsive: 1 column (mobile) \u2192 2 columns (tablet) \u2192 4 columns (desktop)\n5. Stats callouts automatically arrange: 1 column (mobile) \u2192 3 columns (tablet+)\n6. All INX-ZA brand colors are hardcoded (#C31126, #0038A8, #007A3D, #FFB300)\n7. Background color is #1C2128 (can be changed on line 4)\n-->\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ff65152 e-con-full e-flex e-con e-parent\" data-id=\"ff65152\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b31b81 elementor-widget elementor-widget-html\" data-id=\"8b31b81\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- INX-ZA Exchanges Section for WordPress Elementor -->\n<!-- Paste this code into an Elementor HTML widget -->\n\n<style>\n  \/* Exchanges Section Styles *\/\n  .inx-exchanges-section {\n    padding: 96px 0;\n    background-color: #0A0C10;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .inx-exchanges-container {\n    max-width: 1440px;\n    margin: 0 auto;\n    padding: 0 24px;\n  }\n\n  \/* Header *\/\n  .inx-exchanges-header {\n    text-align: center;\n    margin-bottom: 64px;\n  }\n\n  .inx-exchanges-title {\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 1.5rem;\n    line-height: 1.2;\n  }\n\n  .inx-exchanges-description {\n    font-size: 1.125rem;\n    color: #9CA3AF;\n    max-width: 42rem;\n    margin: 0 auto;\n  }\n\n  \/* Exchange Cards Grid *\/\n  .inx-exchanges-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n\n  \/* Exchange Card *\/\n  .inx-exchange-card {\n    position: relative;\n    padding: 32px;\n    border: 2px solid rgba(255, 255, 255, 0.1);\n    border-radius: 12px;\n    overflow: hidden;\n    transition: all 0.3s;\n  }\n\n  \/* Card Color Variants *\/\n  .inx-exchange-card-red {\n    background: linear-gradient(to bottom right, rgba(195, 17, 38, 0.1), transparent);\n  }\n\n  .inx-exchange-card-red:hover {\n    border-color: rgba(195, 17, 38, 0.5);\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);\n  }\n\n  .inx-exchange-card-blue {\n    background: linear-gradient(to bottom right, rgba(0, 56, 168, 0.1), transparent);\n  }\n\n  .inx-exchange-card-blue:hover {\n    border-color: rgba(0, 56, 168, 0.5);\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);\n  }\n\n  .inx-exchange-card-green {\n    background: linear-gradient(to bottom right, rgba(0, 122, 61, 0.1), transparent);\n  }\n\n  .inx-exchange-card-green:hover {\n    border-color: rgba(0, 122, 61, 0.5);\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);\n  }\n\n  .inx-exchange-card-yellow {\n    background: linear-gradient(to bottom right, rgba(255, 179, 0, 0.1), transparent);\n  }\n\n  .inx-exchange-card-yellow:hover {\n    border-color: rgba(255, 179, 0, 0.5);\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);\n  }\n\n  \/* Hover Glow Effect *\/\n  .inx-card-glow {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), transparent);\n    opacity: 0;\n    transition: opacity 0.3s;\n    pointer-events: none;\n  }\n\n  .inx-exchange-card:hover .inx-card-glow {\n    opacity: 1;\n  }\n\n  \/* Card Content *\/\n  .inx-card-content {\n    position: relative;\n    z-index: 1;\n  }\n\n  \/* Exchange Code Badge *\/\n  .inx-exchange-badge {\n    display: inline-block;\n    padding: 6px 12px;\n    border-radius: 6px;\n    border: 1px solid;\n    margin-bottom: 16px;\n  }\n\n  .inx-badge-red {\n    background-color: rgba(195, 17, 38, 0.2);\n    border-color: rgba(195, 17, 38, 0.4);\n  }\n\n  .inx-badge-blue {\n    background-color: rgba(0, 56, 168, 0.2);\n    border-color: rgba(0, 56, 168, 0.4);\n  }\n\n  .inx-badge-green {\n    background-color: rgba(0, 122, 61, 0.2);\n    border-color: rgba(0, 122, 61, 0.4);\n  }\n\n  .inx-badge-yellow {\n    background-color: rgba(255, 179, 0, 0.2);\n    border-color: rgba(255, 179, 0, 0.4);\n  }\n\n  .inx-badge-code {\n    font-size: 0.875rem;\n    font-family: monospace;\n    font-weight: 700;\n  }\n\n  .inx-badge-code-red {\n    color: #C31126;\n  }\n\n  .inx-badge-code-blue {\n    color: #0038A8;\n  }\n\n  .inx-badge-code-green {\n    color: #007A3D;\n  }\n\n  .inx-badge-code-yellow {\n    color: #FFB300;\n  }\n\n  \/* City Name *\/\n  .inx-city-name {\n    font-size: 1.5rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 4px;\n  }\n\n  \/* Location *\/\n  .inx-location {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 24px;\n  }\n\n  .inx-location-text {\n    font-size: 0.875rem;\n    color: #9CA3AF;\n  }\n\n  \/* Stats Container *\/\n  .inx-stats-container {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .inx-stat-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .inx-stat-text {\n    font-size: 0.875rem;\n    color: #D1D5DB;\n  }\n\n  .inx-stat-value {\n    font-family: monospace;\n    font-weight: 700;\n    color: white;\n  }\n\n  \/* Icon Colors *\/\n  .inx-icon-gray {\n    color: #6B7280;\n  }\n\n  .inx-icon-red {\n    color: #C31126;\n  }\n\n  .inx-icon-yellow {\n    color: #FFB300;\n  }\n\n  \/* Responsive Design *\/\n  @media (min-width: 768px) {\n    .inx-exchanges-grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .inx-exchanges-title {\n      font-size: 3rem;\n    }\n    \n    .inx-exchanges-container {\n      padding: 0 48px;\n    }\n    \n    .inx-exchanges-grid {\n      grid-template-columns: repeat(4, 1fr);\n    }\n  }\n<\/style>\n\n<section class=\"inx-exchanges-section\">\n  <div class=\"inx-exchanges-container\">\n    <!-- Header -->\n    <div class=\"inx-exchanges-header\">\n      <h2 class=\"inx-exchanges-title\">\n        Eleven Data Centres - One Open Access IXP Fabric\n      <\/h2>\n      <p class=\"inx-exchanges-description\">\n        Exchange Points strategically placed at South Africa's major connectivity hubs, \n        collocated in carrier-neutral data centres.\n      <\/p>\n    <\/div>\n\n    <!-- Exchange Cards Grid -->\n    <div class=\"inx-exchanges-grid\">\n      <!-- Johannesburg -->\n      <div class=\"inx-exchange-card inx-exchange-card-red\">\n        <div class=\"inx-card-glow\"><\/div>\n        <div class=\"inx-card-content\">\n          <!-- Exchange Code Badge -->\n          <div class=\"inx-exchange-badge inx-badge-red\">\n            <span class=\"inx-badge-code inx-badge-code-red\">JNB<\/span>\n          <\/div>\n\n          <!-- City Name -->\n          <h3 class=\"inx-city-name\">Johannesburg<\/h3>\n          \n          <!-- Location -->\n          <div class=\"inx-location\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-gray\">\n              <path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/>\n              <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n            <\/svg>\n            <p class=\"inx-location-text\">Teraco (Bredell, Isando, Rosebank)<\/p>\n          <\/div>\n\n          <!-- Stats -->\n          <div class=\"inx-stats-container\">\n            <div class=\"inx-stat-row\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-red\">\n                <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/>\n                <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n                <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/>\n                <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n              <\/svg>\n              <span class=\"inx-stat-text\">\n                <span class=\"inx-stat-value\">150+<\/span> Members\n              <\/span>\n            <\/div>\n            <div class=\"inx-stat-row\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-yellow\">\n                <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/>\n              <\/svg>\n              <span class=\"inx-stat-text inx-stat-value\">400Gbps+ Ports<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Cape Town -->\n      <div class=\"inx-exchange-card inx-exchange-card-blue\">\n        <div class=\"inx-card-glow\"><\/div>\n        <div class=\"inx-card-content\">\n          <!-- Exchange Code Badge -->\n          <div class=\"inx-exchange-badge inx-badge-blue\">\n            <span class=\"inx-badge-code inx-badge-code-blue\">CPT<\/span>\n          <\/div>\n\n          <!-- City Name -->\n          <h3 class=\"inx-city-name\">Cape Town<\/h3>\n          \n          <!-- Location -->\n          <div class=\"inx-location\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-gray\">\n              <path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/>\n              <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n            <\/svg>\n            <p class=\"inx-location-text\">Teraco (Tokai, Diep River, Pinelands)<\/p>\n          <\/div>\n\n          <!-- Stats -->\n          <div class=\"inx-stats-container\">\n            <div class=\"inx-stat-row\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-red\">\n                <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/>\n                <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n                <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/>\n                <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n              <\/svg>\n              <span class=\"inx-stat-text\">\n                <span class=\"inx-stat-value\">80+<\/span> Members\n              <\/span>\n            <\/div>\n            <div class=\"inx-stat-row\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-yellow\">\n                <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/>\n              <\/svg>\n              <span class=\"inx-stat-text inx-stat-value\">200Gbps+ Ports<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Durban -->\n      <div class=\"inx-exchange-card inx-exchange-card-green\">\n        <div class=\"inx-card-glow\"><\/div>\n        <div class=\"inx-card-content\">\n          <!-- Exchange Code Badge -->\n          <div class=\"inx-exchange-badge inx-badge-green\">\n            <span class=\"inx-badge-code inx-badge-code-green\">DUR<\/span>\n          <\/div>\n\n          <!-- City Name -->\n          <h3 class=\"inx-city-name\">Durban<\/h3>\n          \n          <!-- Location -->\n          <div class=\"inx-location\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-gray\">\n              <path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/>\n              <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n            <\/svg>\n            <p class=\"inx-location-text\">Teraco (Durban North)<\/p>\n          <\/div>\n\n          <!-- Stats -->\n          <div class=\"inx-stats-container\">\n            <div class=\"inx-stat-row\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-red\">\n                <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/>\n                <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n                <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/>\n                <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n              <\/svg>\n              <span class=\"inx-stat-text\">\n                <span class=\"inx-stat-value\">40+<\/span> Members\n              <\/span>\n            <\/div>\n            <div class=\"inx-stat-row\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-yellow\">\n                <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/>\n              <\/svg>\n              <span class=\"inx-stat-text inx-stat-value\">100Gbps+ Ports<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Port Elizabeth -->\n      <div class=\"inx-exchange-card inx-exchange-card-yellow\">\n        <div class=\"inx-card-glow\"><\/div>\n        <div class=\"inx-card-content\">\n          <!-- Exchange Code Badge -->\n          <div class=\"inx-exchange-badge inx-badge-yellow\">\n            <span class=\"inx-badge-code inx-badge-code-yellow\">PLZ<\/span>\n          <\/div>\n\n          <!-- City Name -->\n          <h3 class=\"inx-city-name\">Port Elizabeth<\/h3>\n          \n          <!-- Location -->\n          <div class=\"inx-location\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-gray\">\n              <path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/>\n              <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n            <\/svg>\n            <p class=\"inx-location-text\">Teraco (Port Elizabeth)<\/p>\n          <\/div>\n\n          <!-- Stats -->\n          <div class=\"inx-stats-container\">\n            <div class=\"inx-stat-row\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-red\">\n                <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/>\n                <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n                <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/>\n                <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n              <\/svg>\n              <span class=\"inx-stat-text\">\n                <span class=\"inx-stat-value\">25+<\/span> Members\n              <\/span>\n            <\/div>\n            <div class=\"inx-stat-row\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-yellow\">\n                <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/>\n              <\/svg>\n              <span class=\"inx-stat-text inx-stat-value\">50Gbps+ Ports<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \nIMPORTANT NOTES FOR ELEMENTOR:\n1. This section works standalone - just paste into an HTML widget\n2. Four exchange locations with color-coded cards (JNB=Red, CPT=Blue, DUR=Green, PLZ=Yellow)\n3. Each card shows: Exchange code, city name, location, members, and capacity\n4. Hover effects with glow and border color transitions\n5. Fully responsive: 1 column (mobile) \u2192 2 columns (tablet) \u2192 4 columns (desktop)\n6. All icons embedded as SVG (MapPin, Users, Zap\/Lightning)\n7. Background color is #0A0C10 (slightly darker than previous section)\n8. All INX-ZA brand colors included\n-->\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c2858a8 e-con-full e-flex e-con e-parent\" data-id=\"c2858a8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-acedda7 elementor-widget elementor-widget-html\" data-id=\"acedda7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- INX-ZA Connect Steps Section for WordPress Elementor -->\n<!-- Paste this code into an Elementor HTML widget -->\n\n<style>\n  \/* Connect Steps Section Styles *\/\n  .inx-connect-section {\n    padding: 96px 0;\n    background-color: #161B22;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .inx-connect-container {\n    max-width: 1440px;\n    margin: 0 auto;\n    padding: 0 24px;\n  }\n\n  \/* Header *\/\n  .inx-connect-header {\n    text-align: center;\n    margin-bottom: 64px;\n  }\n\n  .inx-connect-title {\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 1.5rem;\n    line-height: 1.2;\n  }\n\n  \/* Steps Grid *\/\n  .inx-steps-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 32px;\n    margin-bottom: 48px;\n  }\n\n  \/* Step Card *\/\n  .inx-step-card {\n    position: relative;\n    padding: 32px;\n    background-color: rgba(255, 255, 255, 0.05);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 12px;\n    transition: all 0.3s;\n  }\n\n  .inx-step-card:hover {\n    border-color: rgba(195, 17, 38, 0.3);\n  }\n\n  \/* Step Number *\/\n  .inx-step-number {\n    font-size: 3.75rem;\n    font-family: monospace;\n    font-weight: 700;\n    color: rgba(195, 17, 38, 0.2);\n    margin-bottom: 16px;\n    line-height: 1;\n  }\n\n  \/* Icon Box *\/\n  .inx-step-icon {\n    width: 56px;\n    height: 56px;\n    background-color: rgba(195, 17, 38, 0.1);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 24px;\n  }\n\n  .inx-icon-red {\n    color: #C31126;\n  }\n\n  \/* Step Content *\/\n  .inx-step-title {\n    font-size: 1.5rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 12px;\n  }\n\n  .inx-step-description {\n    font-size: 1rem;\n    color: #9CA3AF;\n    margin-bottom: 16px;\n    line-height: 1.625;\n  }\n\n  \/* Details Tags *\/\n  .inx-details-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .inx-detail-tag {\n    padding: 6px 12px;\n    border-radius: 6px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    border: 1px solid;\n  }\n\n  .inx-detail-tag-default {\n    background-color: rgba(255, 255, 255, 0.05);\n    color: #D1D5DB;\n    border-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .inx-detail-tag-popular {\n    background-color: rgba(255, 179, 0, 0.2);\n    color: #FFB300;\n    border-color: rgba(255, 179, 0, 0.4);\n  }\n\n  \/* CTA Button *\/\n  .inx-cta-container {\n    text-align: center;\n  }\n\n  .inx-cta-button {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 16px 32px;\n    background-color: #C31126;\n    color: white;\n    font-weight: 500;\n    border: none;\n    cursor: pointer;\n    transition: all 0.3s;\n    font-size: 1rem;\n  }\n\n  .inx-cta-button:hover {\n    background-color: #A00E1E;\n  }\n\n  .inx-cta-icon {\n    transition: transform 0.3s;\n  }\n\n  .inx-cta-button:hover .inx-cta-icon {\n    transform: translateX(4px);\n  }\n\n  \/* Responsive Design *\/\n  @media (min-width: 1024px) {\n    .inx-connect-title {\n      font-size: 3rem;\n    }\n    \n    .inx-connect-container {\n      padding: 0 48px;\n    }\n    \n    .inx-steps-grid {\n      grid-template-columns: repeat(3, 1fr);\n    }\n  }\n<\/style>\n\n<section class=\"inx-connect-section\">\n  <div class=\"inx-connect-container\">\n    <!-- Header -->\n    <div class=\"inx-connect-header\">\n      <h2 class=\"inx-connect-title\">\n        Connect in 3 Steps\n      <\/h2>\n    <\/div>\n\n    <!-- Steps Grid -->\n    <div class=\"inx-steps-grid\">\n      <!-- Step 1: Submit a Request -->\n      <div class=\"inx-step-card\">\n        <!-- Step Number -->\n        <div class=\"inx-step-number\">01<\/div>\n        \n        <!-- Icon -->\n        <div class=\"inx-step-icon\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-red\">\n            <path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/>\n            <polyline points=\"14 2 14 8 20 8\"\/>\n            <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n            <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n            <line x1=\"10\" y1=\"9\" x2=\"8\" y2=\"9\"\/>\n          <\/svg>\n        <\/div>\n\n        <!-- Content -->\n        <h3 class=\"inx-step-title\">Submit a Request<\/h3>\n        <p class=\"inx-step-description\">Fill out the form to request a connection<\/p>\n\n        <!-- Details -->\n        <div class=\"inx-details-container\">\n          <span class=\"inx-detail-tag inx-detail-tag-default\">JINX<\/span>\n          <span class=\"inx-detail-tag inx-detail-tag-default\">CINX<\/span>\n          <span class=\"inx-detail-tag inx-detail-tag-default\">DINX<\/span>\n          <span class=\"inx-detail-tag inx-detail-tag-default\">NMBINX<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- Step 2: Receive Confirmation -->\n      <div class=\"inx-step-card\">\n        <!-- Step Number -->\n        <div class=\"inx-step-number\">02<\/div>\n        \n        <!-- Icon -->\n        <div class=\"inx-step-icon\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-red\">\n            <rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/>\n            <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/>\n          <\/svg>\n        <\/div>\n\n        <!-- Content -->\n        <h3 class=\"inx-step-title\">Receive Confirmation<\/h3>\n        <p class=\"inx-step-description\">We will send you a confirmation email with next steps<\/p>\n\n        <!-- Details -->\n        <div class=\"inx-details-container\">\n          <span class=\"inx-detail-tag inx-detail-tag-default\">1G<\/span>\n          <span class=\"inx-detail-tag inx-detail-tag-popular\">10G (Most Popular)<\/span>\n          <span class=\"inx-detail-tag inx-detail-tag-default\">100G<\/span>\n        <\/div>\n      <\/div>\n\n      <!-- Step 3: Start Peering -->\n      <div class=\"inx-step-card\">\n        <!-- Step Number -->\n        <div class=\"inx-step-number\">03<\/div>\n        \n        <!-- Icon -->\n        <div class=\"inx-step-icon\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-icon-red\">\n            <rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"\/>\n            <rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"\/>\n            <rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"\/>\n            <path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\"\/>\n            <path d=\"M12 12V8\"\/>\n          <\/svg>\n        <\/div>\n\n        <!-- Content -->\n        <h3 class=\"inx-step-title\">Start Peering<\/h3>\n        <p class=\"inx-step-description\">Connect with 200+ networks across all INX-ZA exchanges<\/p>\n\n        <!-- Details -->\n        <div class=\"inx-details-container\">\n          <span class=\"inx-detail-tag inx-detail-tag-default\">ISPs<\/span>\n          <span class=\"inx-detail-tag inx-detail-tag-default\">CDNs<\/span>\n          <span class=\"inx-detail-tag inx-detail-tag-default\">Carriers<\/span>\n          <span class=\"inx-detail-tag inx-detail-tag-default\">Enterprises<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- CTA Button -->\n    <div class=\"inx-cta-container\">\n      <button class=\"inx-cta-button\">\n        Connect to INX-ZA\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"inx-cta-icon\">\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\n          <polyline points=\"12 5 19 12 12 19\"\/>\n        <\/svg>\n      <\/button>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \nIMPORTANT NOTES FOR ELEMENTOR:\n1. This section works standalone - just paste into an HTML widget\n2. Three step cards with sequential numbering (01, 02, 03)\n3. Each card includes: Large step number, icon, title, description, and detail tags\n4. Step 2 highlights \"10G (Most Popular)\" with yellow\/gold accent\n5. CTA button at the bottom with arrow icon and hover effect\n6. Fully responsive: 1 column (mobile) \u2192 3 columns (desktop)\n7. All icons embedded as SVG (FileText, Mail, Network)\n8. Background color is #161B22\n9. Red accent color (#C31126) used throughout\n10. You can replace the button action by adding onclick=\"yourFunction()\" or href if converting to an anchor tag\n-->\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ea98c5a e-con-full e-flex e-con e-parent\" data-id=\"ea98c5a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb6337b elementor-widget elementor-widget-html\" data-id=\"eb6337b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- INX-ZA Growing Peering Community Section for WordPress Elementor -->\n<!-- Paste this code into an Elementor HTML widget -->\n\n<style>\n  \/* Peering Community Section Styles *\/\n  .inx-community-section {\n    padding: 96px 0;\n    background-color: #0A0C10;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .inx-community-container {\n    max-width: 1440px;\n    margin: 0 auto;\n    padding: 0 24px;\n  }\n\n  \/* Header *\/\n  .inx-community-header {\n    text-align: center;\n    margin-bottom: 64px;\n  }\n\n  .inx-community-title {\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 1.5rem;\n    line-height: 1.2;\n  }\n\n  .inx-community-description {\n    font-size: 1.125rem;\n    color: #9CA3AF;\n    max-width: 42rem;\n    margin: 0 auto;\n    line-height: 1.625;\n  }\n\n  \/* Category Tags *\/\n  .inx-category-tags {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    margin-bottom: 48px;\n  }\n\n  .inx-category-tag {\n    padding: 8px 16px;\n    border-radius: 8px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    border: 1px solid;\n  }\n\n  .inx-tag-isp {\n    background-color: rgba(59, 130, 246, 0.1);\n    color: #60A5FA;\n    border-color: rgba(59, 130, 246, 0.3);\n  }\n\n  .inx-tag-nren {\n    background-color: rgba(168, 85, 247, 0.1);\n    color: #C084FC;\n    border-color: rgba(168, 85, 247, 0.3);\n  }\n\n  .inx-tag-carrier {\n    background-color: rgba(34, 197, 94, 0.1);\n    color: #4ADE80;\n    border-color: rgba(34, 197, 94, 0.3);\n  }\n\n  .inx-tag-enterprise {\n    background-color: rgba(249, 115, 22, 0.1);\n    color: #FB923C;\n    border-color: rgba(249, 115, 22, 0.3);\n  }\n\n  .inx-tag-cdn {\n    background-color: rgba(6, 182, 212, 0.1);\n    color: #22D3EE;\n    border-color: rgba(6, 182, 212, 0.3);\n  }\n\n  .inx-tag-gov {\n    background-color: rgba(236, 72, 153, 0.1);\n    color: #F472B6;\n    border-color: rgba(236, 72, 153, 0.3);\n  }\n\n  .inx-tag-dc {\n    background-color: rgba(234, 179, 8, 0.1);\n    color: #FACC15;\n    border-color: rgba(234, 179, 8, 0.3);\n  }\n\n  \/* Member Logo Grid *\/\n  .inx-member-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 24px;\n    margin-bottom: 48px;\n  }\n\n  .inx-member-card {\n    height: 96px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    background-color: rgba(255, 255, 255, 0.05);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 8px;\n    transition: all 0.3s;\n    cursor: pointer;\n  }\n\n  .inx-member-card:hover {\n    border-color: rgba(195, 17, 38, 0.3);\n    background-color: rgba(255, 255, 255, 0.07);\n  }\n\n  .inx-member-content {\n    text-align: center;\n  }\n\n  .inx-member-name {\n    font-size: 0.875rem;\n    font-weight: 700;\n    color: #9CA3AF;\n    margin-bottom: 4px;\n    transition: color 0.3s;\n  }\n\n  .inx-member-card:hover .inx-member-name {\n    color: white;\n  }\n\n  .inx-member-category {\n    font-size: 0.75rem;\n    color: #6B7280;\n  }\n\n  \/* Footer CTA *\/\n  .inx-community-footer {\n    text-align: center;\n  }\n\n  .inx-community-footer-text {\n    color: #9CA3AF;\n    margin-bottom: 24px;\n  }\n\n  .inx-community-footer-number {\n    color: white;\n    font-family: monospace;\n    font-weight: 700;\n  }\n\n  .inx-btn-member {\n    padding: 16px 32px;\n    background-color: #C31126;\n    color: white;\n    font-weight: 500;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n    transition: background-color 0.3s;\n    text-decoration: none;\n    display: inline-block;\n  }\n\n  .inx-btn-member:hover {\n    background-color: #A00E1E;\n  }\n\n  \/* Responsive Design *\/\n  @media (min-width: 640px) {\n    .inx-member-grid {\n      grid-template-columns: repeat(3, 1fr);\n    }\n  }\n\n  @media (min-width: 768px) {\n    .inx-member-grid {\n      grid-template-columns: repeat(4, 1fr);\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .inx-community-title {\n      font-size: 3rem;\n    }\n    \n    .inx-community-container {\n      padding: 0 48px;\n    }\n\n    .inx-member-grid {\n      grid-template-columns: repeat(8, 1fr);\n    }\n  }\n<\/style>\n\n<section class=\"inx-community-section\">\n  <div class=\"inx-community-container\">\n    <!-- Header -->\n    <div class=\"inx-community-header\">\n      <h2 class=\"inx-community-title\">\n        A Growing Peering Community\n      <\/h2>\n      <p class=\"inx-community-description\">\n        Join South Africa's leading ISPs, carriers, CDNs, enterprises, and content networks \n        in building a stronger, more resilient internet infrastructure.\n      <\/p>\n    <\/div>\n\n    <!-- Category Tags -->\n    <div class=\"inx-category-tags\">\n      <span class=\"inx-category-tag inx-tag-isp\">ISP<\/span>\n      <span class=\"inx-category-tag inx-tag-nren\">NREN<\/span>\n      <span class=\"inx-category-tag inx-tag-carrier\">Carrier<\/span>\n      <span class=\"inx-category-tag inx-tag-enterprise\">Enterprise<\/span>\n      <span class=\"inx-category-tag inx-tag-cdn\">CDN<\/span>\n      <span class=\"inx-category-tag inx-tag-gov\">Gov<\/span>\n      <span class=\"inx-category-tag inx-tag-dc\">DC<\/span>\n    <\/div>\n\n    <!-- Member Logo Grid -->\n    <div class=\"inx-member-grid\">\n      <!-- Member 1 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">Afrihost<\/div>\n          <div class=\"inx-member-category\">ISP<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 2 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">TENET<\/div>\n          <div class=\"inx-member-category\">NREN<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 3 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">Rain<\/div>\n          <div class=\"inx-member-category\">ISP<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 4 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">Dimension Data<\/div>\n          <div class=\"inx-member-category\">Enterprise<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 5 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">Akamai<\/div>\n          <div class=\"inx-member-category\">CDN<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 6 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">Cloudflare<\/div>\n          <div class=\"inx-member-category\">CDN<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 7 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">MTN<\/div>\n          <div class=\"inx-member-category\">Carrier<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 8 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">Vodacom<\/div>\n          <div class=\"inx-member-category\">Carrier<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 9 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">Liquid Telecom<\/div>\n          <div class=\"inx-member-category\">Carrier<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 10 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">SITA<\/div>\n          <div class=\"inx-member-category\">Gov<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 11 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">Teraco<\/div>\n          <div class=\"inx-member-category\">DC<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 12 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">NTT<\/div>\n          <div class=\"inx-member-category\">Carrier<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 13 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">IS Internet<\/div>\n          <div class=\"inx-member-category\">ISP<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 14 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">Herotel<\/div>\n          <div class=\"inx-member-category\">ISP<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 15 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">SEACOM<\/div>\n          <div class=\"inx-member-category\">Carrier<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Member 16 -->\n      <div class=\"inx-member-card\">\n        <div class=\"inx-member-content\">\n          <div class=\"inx-member-name\">Fastly<\/div>\n          <div class=\"inx-member-category\">CDN<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Footer CTA -->\n    <div class=\"inx-community-footer\">\n      <p class=\"inx-community-footer-text\">\n        Join <span class=\"inx-community-footer-number\">200+<\/span> networks already peering through INX-ZA\n      <\/p>\n      <a href=\"#join\" class=\"inx-btn-member\">Become a Member<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \nIMPORTANT NOTES FOR ELEMENTOR:\n1. This is the \"A Growing Peering Community\" section\n2. Dark background (#0A0C10)\n3. Section includes:\n   - Header with title and description\n   - 7 colored category tags (ISP, NREN, Carrier, Enterprise, CDN, Gov, DC)\n   - 16 member cards in a responsive grid (2\u21923\u21924\u21928 columns)\n   - Each card shows member name and category\n   - Hover effects: border color change and text color change\n   - Footer with \"200+ networks\" stat and \"Become a Member\" CTA button\n4. Fully responsive grid layout\n5. All styling is inline - no external dependencies\n6. Update href=\"#join\" on the CTA button with your actual link\n7. Replace text member names with actual logo images when available\n-->\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6fe7cba e-con-full e-flex e-con e-parent\" data-id=\"6fe7cba\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf44332 elementor-widget elementor-widget-html\" data-id=\"bf44332\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- INX-ZA Governance Section for WordPress Elementor -->\n<!-- Paste this code into an Elementor HTML widget -->\n\n<style>\n  \/* Governance Section Styles *\/\n  .inx-governance-section {\n    padding: 96px 0;\n    background-color: #161B22;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .inx-governance-container {\n    max-width: 1440px;\n    margin: 0 auto;\n    padding: 0 24px;\n  }\n\n  \/* Header *\/\n  .inx-governance-header {\n    text-align: center;\n    margin-bottom: 64px;\n  }\n\n  .inx-governance-title {\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 1.5rem;\n    line-height: 1.2;\n  }\n\n  .inx-governance-description {\n    font-size: 1.125rem;\n    color: #9CA3AF;\n    max-width: 42rem;\n    margin: 0 auto;\n    line-height: 1.625;\n  }\n\n  \/* Flow Diagram *\/\n  .inx-flow-container {\n    max-width: 56rem;\n    margin: 0 auto 64px;\n  }\n\n  .inx-flow {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n\n  .inx-flow-box {\n    text-align: center;\n  }\n\n  .inx-flow-card {\n    display: inline-block;\n    padding: 24px;\n    background-color: rgba(255, 255, 255, 0.05);\n    border: 2px solid rgba(255, 255, 255, 0.2);\n    border-radius: 12px;\n  }\n\n  .inx-flow-card-highlight {\n    background: linear-gradient(135deg, rgba(195, 17, 38, 0.1) 0%, transparent 100%);\n    border: 2px solid rgba(195, 17, 38, 0.3);\n  }\n\n  .inx-flow-icon {\n    width: 32px;\n    height: 32px;\n    margin: 0 auto 12px;\n  }\n\n  .inx-flow-icon-blue {\n    color: #0038A8;\n  }\n\n  .inx-flow-icon-green {\n    color: #007A3D;\n  }\n\n  .inx-flow-icon-red {\n    color: #C31126;\n  }\n\n  .inx-flow-title {\n    font-size: 1.25rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 4px;\n  }\n\n  .inx-flow-subtitle {\n    font-size: 0.875rem;\n    color: #9CA3AF;\n  }\n\n  .inx-flow-arrow {\n    display: flex;\n    justify-content: center;\n  }\n\n  .inx-flow-arrow-line {\n    width: 1px;\n    height: 48px;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);\n  }\n\n  \/* Committees Grid *\/\n  .inx-committees-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n\n  .inx-committee-card {\n    padding: 24px;\n    background-color: rgba(255, 255, 255, 0.05);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 12px;\n    text-align: center;\n  }\n\n  .inx-committee-title {\n    color: white;\n    font-weight: 700;\n    margin-bottom: 8px;\n  }\n\n  .inx-committee-subtitle {\n    font-size: 0.75rem;\n    color: #9CA3AF;\n  }\n\n  \/* Value Props *\/\n  .inx-value-props {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 24px;\n    margin-bottom: 48px;\n  }\n\n  .inx-value-card {\n    padding: 32px;\n    background-color: rgba(255, 255, 255, 0.05);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 12px;\n    text-align: center;\n  }\n\n  .inx-value-icon-wrapper {\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 16px;\n  }\n\n  .inx-value-icon-blue {\n    background-color: rgba(0, 56, 168, 0.1);\n  }\n\n  .inx-value-icon-green {\n    background-color: rgba(0, 122, 61, 0.1);\n  }\n\n  .inx-value-icon-red {\n    background-color: rgba(195, 17, 38, 0.1);\n  }\n\n  .inx-value-icon {\n    width: 24px;\n    height: 24px;\n  }\n\n  .inx-value-title {\n    font-size: 1.25rem;\n    font-weight: 700;\n    color: white;\n    margin-bottom: 8px;\n  }\n\n  .inx-value-description {\n    font-size: 0.875rem;\n    color: #9CA3AF;\n  }\n\n  \/* CTA *\/\n  .inx-governance-cta {\n    text-align: center;\n  }\n\n  .inx-btn-outline {\n    padding: 16px 32px;\n    border: 2px solid rgba(255, 255, 255, 0.2);\n    color: white;\n    font-weight: 500;\n    background-color: transparent;\n    border-radius: 4px;\n    cursor: pointer;\n    transition: all 0.3s;\n    text-decoration: none;\n    display: inline-block;\n  }\n\n  .inx-btn-outline:hover {\n    border-color: rgba(255, 255, 255, 0.4);\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  \/* Icons using Unicode characters *\/\n  .inx-icon-users::before {\n    content: \"\ud83d\udc65\";\n    font-size: 32px;\n  }\n\n  .inx-icon-vote::before {\n    content: \"\ud83d\uddf3\ufe0f\";\n    font-size: 32px;\n  }\n\n  .inx-icon-shield::before {\n    content: \"\ud83d\udee1\ufe0f\";\n    font-size: 32px;\n  }\n\n  .inx-icon-check::before {\n    content: \"\u2713\";\n    font-size: 24px;\n  }\n\n  \/* Responsive Design *\/\n  @media (min-width: 768px) {\n    .inx-committees-grid {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    .inx-value-props {\n      grid-template-columns: repeat(3, 1fr);\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .inx-governance-title {\n      font-size: 3rem;\n    }\n    \n    .inx-governance-container {\n      padding: 0 48px;\n    }\n  }\n<\/style>\n\n<section class=\"inx-governance-section\">\n  <div class=\"inx-governance-container\">\n    <!-- Header -->\n    <div class=\"inx-governance-header\">\n      <h2 class=\"inx-governance-title\">\n        Built by the Community,<br \/>for the Community\n      <\/h2>\n      <p class=\"inx-governance-description\">\n        INX-ZA operates under a democratic governance model where every member has a voice \n        in shaping the future of South Africa's internet exchange infrastructure.\n      <\/p>\n    <\/div>\n\n    <!-- Governance Flow Diagram -->\n    <div class=\"inx-flow-container\">\n      <div class=\"inx-flow\">\n        <!-- Member Networks -->\n        <div class=\"inx-flow-box\">\n          <div class=\"inx-flow-card\">\n            <div class=\"inx-flow-icon inx-icon-users\"><\/div>\n            <h3 class=\"inx-flow-title\">Member Networks<\/h3>\n            <p class=\"inx-flow-subtitle\">200+ Active Members<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Arrow -->\n        <div class=\"inx-flow-arrow\">\n          <div class=\"inx-flow-arrow-line\"><\/div>\n        <\/div>\n\n        <!-- Annual General Meeting -->\n        <div class=\"inx-flow-box\">\n          <div class=\"inx-flow-card\">\n            <div class=\"inx-flow-icon inx-icon-vote\"><\/div>\n            <h3 class=\"inx-flow-title\">Annual General Meeting<\/h3>\n            <p class=\"inx-flow-subtitle\">Democratic Voting Process<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Arrow -->\n        <div class=\"inx-flow-arrow\">\n          <div class=\"inx-flow-arrow-line\"><\/div>\n        <\/div>\n\n        <!-- Managing Committee -->\n        <div class=\"inx-flow-box\">\n          <div class=\"inx-flow-card inx-flow-card-highlight\">\n            <div class=\"inx-flow-icon inx-icon-shield\"><\/div>\n            <h3 class=\"inx-flow-title\">Managing Committee<\/h3>\n            <p class=\"inx-flow-subtitle\">7 Elected Members \u00b7 2-Year Terms<\/p>\n          <\/div>\n        <\/div>\n\n        <!-- Arrow -->\n        <div class=\"inx-flow-arrow\">\n          <div class=\"inx-flow-arrow-line\"><\/div>\n        <\/div>\n\n        <!-- Committees -->\n        <div class=\"inx-committees-grid\">\n          <div class=\"inx-committee-card\">\n            <h4 class=\"inx-committee-title\">Operations & NOC<\/h4>\n            <p class=\"inx-committee-subtitle\">Technical Infrastructure<\/p>\n          <\/div>\n          <div class=\"inx-committee-card\">\n            <h4 class=\"inx-committee-title\">Policy & Governance<\/h4>\n            <p class=\"inx-committee-subtitle\">Rules & Standards<\/p>\n          <\/div>\n          <div class=\"inx-committee-card\">\n            <h4 class=\"inx-committee-title\">Finance & Audit<\/h4>\n            <p class=\"inx-committee-subtitle\">Fiscal Oversight<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Value Props -->\n    <div class=\"inx-value-props\">\n      <!-- Democratic Governance -->\n      <div class=\"inx-value-card\">\n        <div class=\"inx-value-icon-wrapper inx-value-icon-blue\">\n          <div class=\"inx-value-icon inx-icon-vote\"><\/div>\n        <\/div>\n        <h3 class=\"inx-value-title\">Democratic Governance<\/h3>\n        <p class=\"inx-value-description\">Every member gets a vote in key decisions<\/p>\n      <\/div>\n\n      <!-- Open Accountability -->\n      <div class=\"inx-value-card\">\n        <div class=\"inx-value-icon-wrapper inx-value-icon-green\">\n          <div class=\"inx-value-icon inx-icon-check\"><\/div>\n        <\/div>\n        <h3 class=\"inx-value-title\">Open Accountability<\/h3>\n        <p class=\"inx-value-description\">Transparent policies and financial reporting<\/p>\n      <\/div>\n\n      <!-- Community Mandate -->\n      <div class=\"inx-value-card\">\n        <div class=\"inx-value-icon-wrapper inx-value-icon-red\">\n          <div class=\"inx-value-icon inx-icon-users\"><\/div>\n        <\/div>\n        <h3 class=\"inx-value-title\">Community Mandate<\/h3>\n        <p class=\"inx-value-description\">Serving members, not shareholders<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- CTA -->\n    <div class=\"inx-governance-cta\">\n      <a href=\"#governance\" class=\"inx-btn-outline\">Get Involved in Governance<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \nIMPORTANT NOTES FOR ELEMENTOR:\n1. This is the \"Built by the Community, for the Community\" section\n2. Medium-dark background (#161B22)\n3. Section includes:\n   - Header with title and description\n   - Vertical governance flow diagram showing:\n     * Member Networks (200+ members)\n     * Annual General Meeting\n     * Managing Committee (7 elected, 2-year terms) - highlighted with red gradient\n     * Three sub-committees: Operations & NOC, Policy & Governance, Finance & Audit\n   - Connecting arrows between each level\n   - 3 value proposition cards: Democratic Governance, Open Accountability, Community Mandate\n   - CTA button: \"Get Involved in Governance\"\n4. Icons use Unicode emoji characters (works everywhere, no external dependencies)\n5. Fully responsive layout\n6. All styling is inline - no external dependencies\n7. Update href=\"#governance\" on the CTA button with your actual link\n8. You can replace Unicode emoji icons with actual SVG icons or icon fonts if preferred\n-->\n\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>South Africa&#8217;s NeutralInternet Exchange Est. 1996 100% Neutral. Community-Driven. Internet Exchange Platform Faster. More affordable. More reliable internet starts here. Join the networks strengthening South Africa&#8217;s internet infrastructure. Join Now \u2192 Connect to INX-ZA Operating Since 28+ Years Exchange Locations 4 Cities Ownership 100% Community Status Fully Neutral Conference \u00b7 Featured Event ZANOG@iWeek2026 South African [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":51,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-46","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/new.inx.net.za\/index.php\/wp-json\/wp\/v2\/pages\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new.inx.net.za\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/new.inx.net.za\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/new.inx.net.za\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/new.inx.net.za\/index.php\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":58,"href":"https:\/\/new.inx.net.za\/index.php\/wp-json\/wp\/v2\/pages\/46\/revisions"}],"predecessor-version":[{"id":144,"href":"https:\/\/new.inx.net.za\/index.php\/wp-json\/wp\/v2\/pages\/46\/revisions\/144"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/new.inx.net.za\/index.php\/wp-json\/wp\/v2\/media\/51"}],"wp:attachment":[{"href":"https:\/\/new.inx.net.za\/index.php\/wp-json\/wp\/v2\/media?parent=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}