<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description"
    content="Miss EcoLegacy pageant celebrating environmental responsibility, leadership, and community impact." />
  <meta name="keywords" content="Miss EcoLegacy, pageant, sustainability, environment, leadership, community" />
  <meta name="robots" content="index, follow" />
  <meta property="og:site_name" content="Miss EcoLegacy" />
  <meta property="og:title" content="Miss EcoLegacy - Home" />
  <meta property="og:description"
    content="Miss EcoLegacy pageant celebrating environmental responsibility, leadership, and community impact." />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="images/logo.webp" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Miss EcoLegacy - Home" />
  <meta name="twitter:description"
    content="Miss EcoLegacy pageant celebrating environmental responsibility, leadership, and community impact." />
  <meta name="twitter:image" content="images/logo.webp" />
  <title>Miss EcoLegacy - Home</title>

  <link rel="icon" type="image/webp" href="images/logo.webp" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Cinzel:wght@400;500;600;700&display=swap"
    rel="stylesheet">

  <link rel="stylesheet" href="index.css?v=6" />
  <link rel="stylesheet" href="common-frontend.css?v=6" />
  <link rel="stylesheet" href="mobile-fixes.css" />
</head>

<body>

  <!-- HEADER -->
  <header class="header">
    <a href="/" class="logo-link">
      <img src="images/logo.webp" alt="Miss EcoLegacy Logo" class="header-logo" loading="lazy" fetchpriority="high" />
    </a>
    <nav class="nav-menu">
      <a href="/" class="active">Home</a>
      <a href="/#queens">Queens</a>
      <a href="mission.html">Mission</a>
      <a href="about.html">About</a>
      <a href="apply.html">Apply</a>
      <a href="events.html">Events</a>
      <a href="news.html">News</a>
      <a href="Sponsors.html">Sponsors</a>
      <a href="contact.html">Contact</a>
    </nav>
    <!--  Mobile Hamburger Button -->
    <button class="mobile-menu-toggle" aria-label="Toggle menu">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </header>
  <!-- Mobile Menu Overlay -->
  <div class="mobile-nav-overlay">
    <div class="mobile-nav-drawer">
      <div class="mobile-nav-header">
        <a href="index.html" class="logo-link">
          <img src="images/logo.webp" alt="Miss EcoLegacy" class="mobile-nav-logo" loading="lazy">
        </a>
        <button class="mobile-nav-close" aria-label="Close menu">&#x2715;</button>
      </div>
      <nav class="mobile-nav-menu">
        <a href="/" class="active">Home</a>
        <a href="/#queens">Queens</a>
        <a href="mission.html">Mission</a>
        <a href="about.html">About</a>
        <a href="apply.html">Apply</a>
        <a href="events.html">Events</a>
        <a href="news.html">News</a>
        <a href="Sponsors.html">Sponsors</a>
        <a href="contact.html">Contact</a>
      </nav>
      <div class="mobile-nav-footer">
        <div class="mobile-nav-socials">
          <a href="#" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
            <img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/instagram.svg" alt="Instagram" loading="lazy">
          </a>
          <a href="#" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
            <img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/facebook.svg" alt="Facebook" loading="lazy">
          </a>
          <a href="#" target="_blank" rel="noopener noreferrer" aria-label="X">
            <img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/x.svg" alt="X" loading="lazy">
          </a>
          <a href="#" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
            <img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/tiktok.svg" alt="TikTok" loading="lazy">
          </a>
        </div>
        <p class="mobile-nav-contact"><span data-contact="email">missecolegacy@gmail.com</span> &nbsp;|&nbsp; <span data-contact="phone">+233 55 822 8907</span></p>
      </div>
    </div>
  </div>

  <!-- HERO -->
  <section id="home" class="hero">
    <div class="hero-bg"></div>
    <div class="hero-pattern"></div>

    <div class="hero-content">
      <h1 class="hero-title">MISS ECOLEGACY</h1>
      <p class="hero-subtitle">Where Beauty Meets Environmental Responsibility</p>
      <a href="apply.html" class="cta-primary">Apply Now</a>
    </div>

    <div class="scroll-indicator">
      <span>Scroll</span>
      <div class="scroll-arrow">↓</div>
    </div>
  </section>

  <!-- QUEENS -->
  <section id="queens" class="panel queens">
    <div class="panel-content" data-animate>
      <h2 class="section-title">Our Queens</h2>

      <div class="queens-carousel">
        <div class="queens-track">

          <!-- Queen Akua Card 1 -->
          <div class="queen-card" data-name="Queen Akua" data-title="EcoLegacy Ambassador" data-image="images/akua.webp"
            data-mission="missions/akua.html"
            data-bio="Championing climate education and youth environmental leadership.">
            <img src="images/akua.webp" alt="Queen Akua" loading="lazy" fetchpriority="high">
            <h3 class="queen-name">Queen Akua</h3>
            <p class="queen-title">EcoLegacy Ambassador</p>
            <a href="missions/akua.html" class="queen-card-link">View Profile</a>
          </div>

          <!-- Queen Zainab Card 1 -->
          <div class="queen-card" data-name="Queen Zainab" data-title="Sustainability Advocate"
            data-image="images/zainab.webp" data-mission="missions/zainab.html"
            data-bio="Focused on waste reduction, recycling, and community cleanups.">
            <img src="images/zainab.webp" alt="Queen Zainab" loading="lazy" fetchpriority="high">
            <h3 class="queen-name">Queen Zainab</h3>
            <p class="queen-title">Sustainability Advocate</p>
            <a href="missions/zainab.html" class="queen-card-link">View Profile</a>
          </div>

          <!-- Queen Akua Card 2 (Duplicate for seamless scroll) -->
          <div class="queen-card" data-name="Queen Akua" data-title="EcoLegacy Ambassador" data-image="images/akua.webp"
            data-mission="missions/akua.html"
            data-bio="Championing climate education and youth environmental leadership.">
            <img src="images/akua.webp" alt="Queen Akua" loading="lazy" fetchpriority="high">
            <h3 class="queen-name">Queen Akua</h3>
            <p class="queen-title">EcoLegacy Ambassador</p>
            <a href="missions/akua.html" class="queen-card-link">View Profile</a>
          </div>

          <!-- Queen Zainab Card 2 (Duplicate for seamless scroll) -->
          <div class="queen-card" data-name="Queen Zainab" data-title="Sustainability Advocate"
            data-image="images/zainab.webp" data-mission="missions/zainab.html"
            data-bio="Focused on waste reduction, recycling, and community cleanups.">
            <img src="images/zainab.webp" alt="Queen Zainab" loading="lazy" fetchpriority="high">
            <h3 class="queen-name">Queen Zainab</h3>
            <p class="queen-title">Sustainability Advocate</p>
            <a href="missions/zainab.html" class="queen-card-link">View Profile</a>
          </div>

        </div>
      </div>
    </div>
  </section>

  <!-- MISSION -->
  <section id="mission" class="panel mission">
    <div class="mission-pattern"></div>
    <div class="panel-content" data-animate>
      <h2 class="section-title">Our Mission</h2>
      <p class="mission-text">
        Empowering Change, Inspiring Hope: Our mission is to raise awareness and action on climate change through beauty
        pageantry. We celebrate elegance, intelligence, and environmental stewardship.
      </p>

      <div class="mission-stats">
        <div class="stat-item" data-animate>
          <div class="stat-number">100+</div>
          <div class="stat-label">Queens</div>
        </div>
        <div class="stat-item" data-animate>
          <div class="stat-number">50+</div>
          <div class="stat-label">Countries</div>
        </div>
        <div class="stat-item" data-animate>
          <div class="stat-number">1M+</div>
          <div class="stat-label">Trees Planted</div>
        </div>
      </div>
    </div>
  </section>

  <!-- SDG 13 SECTION -->
  <section id="sdg" class="panel sdg-section">
    <div class="panel-content" data-animate>
      <h2 class="section-title">Aligned with Global Goals</h2>

      <div class="sdg-container">
        <!-- Visual Column -->
        <div class="sdg-graphics" data-animate>
          <svg id="sdgWheel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" class="sdg-wheel">
            <g class="sdg-seg" data-num="1" data-label="No Poverty" data-color="#E5243B"
              style="transform-origin:250px 250px">
              <path d="M 250.0 162.0 L 250.0 10.0 A 240 240 0 0 1 336.7 26.2 L 281.8 167.9 A 88 88 0 0 0 250.0 162.0 Z"
                fill="#E5243B" stroke="white" stroke-width="2" /><text x="280.1" y="88.8" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(10.6,280.1,88.8)">1</text>
            </g>
            <g class="sdg-seg" data-num="2" data-label="Zero Hunger" data-color="#DDA63A"
              style="transform-origin:250px 250px">
              <path d="M 281.8 167.9 L 336.7 26.2 A 240 240 0 0 1 411.7 72.6 L 309.3 185.0 A 88 88 0 0 0 281.8 167.9 Z"
                fill="#DDA63A" stroke="white" stroke-width="2" /><text x="336.3" y="110.6" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(31.8,336.3,110.6)">2</text>
            </g>
            <g class="sdg-seg" data-num="3" data-label="Good Health and Well-being" data-color="#4C9F38"
              style="transform-origin:250px 250px">
              <path d="M 309.3 185.0 L 411.7 72.6 A 240 240 0 0 1 464.8 143.0 L 328.8 210.8 A 88 88 0 0 0 309.3 185.0 Z"
                fill="#4C9F38" stroke="white" stroke-width="2" /><text x="380.9" y="151.2" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(52.9,380.9,151.2)">3</text>
            </g>
            <g class="sdg-seg" data-num="4" data-label="Quality Education" data-color="#C5192D"
              style="transform-origin:250px 250px">
              <path
                d="M 328.8 210.8 L 464.8 143.0 A 240 240 0 0 1 489.0 227.9 L 337.6 241.9 A 88 88 0 0 0 328.8 210.8 Z"
                fill="#C5192D" stroke="white" stroke-width="2" /><text x="407.7" y="205.1" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(74.1,407.7,205.1)">4</text>
            </g>
            <g class="sdg-seg" data-num="5" data-label="Gender Equality" data-color="#FF3A21"
              style="transform-origin:250px 250px">
              <path
                d="M 337.6 241.9 L 489.0 227.9 A 240 240 0 0 1 480.8 315.7 L 334.6 274.1 A 88 88 0 0 0 337.6 241.9 Z"
                fill="#FF3A21" stroke="white" stroke-width="2" /><text x="413.3" y="265.1" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(95.3,413.3,265.1)">5</text>
            </g>
            <g class="sdg-seg" data-num="6" data-label="Clean Water and Sanitation" data-color="#26BDE2"
              style="transform-origin:250px 250px">
              <path
                d="M 334.6 274.1 L 480.8 315.7 A 240 240 0 0 1 441.5 394.6 L 320.2 303.0 A 88 88 0 0 0 334.6 274.1 Z"
                fill="#26BDE2" stroke="white" stroke-width="2" /><text x="396.8" y="323.1" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(116.5,396.8,323.1)">6</text>
            </g>
            <g class="sdg-seg" data-num="7" data-label="Affordable and Clean Energy" data-color="#FCC30B"
              style="transform-origin:250px 250px">
              <path
                d="M 320.2 303.0 L 441.5 394.6 A 240 240 0 0 1 376.3 454.1 L 296.3 324.8 A 88 88 0 0 0 320.2 303.0 Z"
                fill="#FCC30B" stroke="white" stroke-width="2" /><text x="360.5" y="371.2" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(137.6,360.5,371.2)">7</text>
            </g>
            <g class="sdg-seg" data-num="8" data-label="Decent Work and Economic Growth" data-color="#A21942"
              style="transform-origin:250px 250px">
              <path
                d="M 296.3 324.8 L 376.3 454.1 A 240 240 0 0 1 294.1 485.9 L 266.2 336.5 A 88 88 0 0 0 296.3 324.8 Z"
                fill="#A21942" stroke="white" stroke-width="2" /><text x="309.2" y="402.9" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(158.8,309.2,402.9)">8</text>
            </g>
            <g class="sdg-seg" data-num="9" data-label="Industry Innovation and Infrastructure" data-color="#FD6925"
              style="transform-origin:250px 250px">
              <path
                d="M 266.2 336.5 L 294.1 485.9 A 240 240 0 0 1 205.9 485.9 L 233.8 336.5 A 88 88 0 0 0 266.2 336.5 Z"
                fill="#FD6925" stroke="white" stroke-width="2" /><text x="250.0" y="414.0" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(180.0,250.0,414.0)">9</text>
            </g>
            <g class="sdg-seg" data-num="10" data-label="Reduced Inequalities" data-color="#DD1367"
              style="transform-origin:250px 250px">
              <path
                d="M 233.8 336.5 L 205.9 485.9 A 240 240 0 0 1 123.7 454.1 L 203.7 324.8 A 88 88 0 0 0 233.8 336.5 Z"
                fill="#DD1367" stroke="white" stroke-width="2" /><text x="190.8" y="402.9" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(201.2,190.8,402.9)">10</text>
            </g>
            <g class="sdg-seg" data-num="11" data-label="Sustainable Cities and Communities" data-color="#FD9D24"
              style="transform-origin:250px 250px">
              <path d="M 203.7 324.8 L 123.7 454.1 A 240 240 0 0 1 58.5 394.6 L 179.8 303.0 A 88 88 0 0 0 203.7 324.8 Z"
                fill="#FD9D24" stroke="white" stroke-width="2" /><text x="139.5" y="371.2" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(222.4,139.5,371.2)">11</text>
            </g>
            <g class="sdg-seg" data-num="12" data-label="Responsible Consumption" data-color="#BF8B2E"
              style="transform-origin:250px 250px">
              <path d="M 179.8 303.0 L 58.5 394.6 A 240 240 0 0 1 19.2 315.7 L 165.4 274.1 A 88 88 0 0 0 179.8 303.0 Z"
                fill="#BF8B2E" stroke="white" stroke-width="2" /><text x="103.2" y="323.1" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(243.5,103.2,323.1)">12</text>
            </g>
            <g class="sdg-seg" data-num="13" data-label="Climate Action" data-color="#3F7E44"
              style="transform-origin:250px 250px">
              <path d="M 165.4 274.1 L 19.2 315.7 A 240 240 0 0 1 11.0 227.9 L 162.4 241.9 A 88 88 0 0 0 165.4 274.1 Z"
                fill="#3F7E44" stroke="white" stroke-width="2" /><text x="86.7" y="265.1" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(264.7,86.7,265.1)">13</text>
            </g>
            <g class="sdg-seg" data-num="14" data-label="Life Below Water" data-color="#0A97D9"
              style="transform-origin:250px 250px">
              <path d="M 162.4 241.9 L 11.0 227.9 A 240 240 0 0 1 35.2 143.0 L 171.2 210.8 A 88 88 0 0 0 162.4 241.9 Z"
                fill="#0A97D9" stroke="white" stroke-width="2" /><text x="92.3" y="205.1" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(285.9,92.3,205.1)">14</text>
            </g>
            <g class="sdg-seg" data-num="15" data-label="Life on Land" data-color="#56C02B"
              style="transform-origin:250px 250px">
              <path d="M 171.2 210.8 L 35.2 143.0 A 240 240 0 0 1 88.3 72.6 L 190.7 185.0 A 88 88 0 0 0 171.2 210.8 Z"
                fill="#56C02B" stroke="white" stroke-width="2" /><text x="119.1" y="151.2" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(307.1,119.1,151.2)">15</text>
            </g>
            <g class="sdg-seg" data-num="16" data-label="Peace Justice and Strong Institutions" data-color="#00689D"
              style="transform-origin:250px 250px">
              <path d="M 190.7 185.0 L 88.3 72.6 A 240 240 0 0 1 163.3 26.2 L 218.2 167.9 A 88 88 0 0 0 190.7 185.0 Z"
                fill="#00689D" stroke="white" stroke-width="2" /><text x="163.7" y="110.6" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(328.2,163.7,110.6)">16</text>
            </g>
            <g class="sdg-seg" data-num="17" data-label="Partnerships for the Goals" data-color="#19486A"
              style="transform-origin:250px 250px">
              <path d="M 218.2 167.9 L 163.3 26.2 A 240 240 0 0 1 250.0 10.0 L 250.0 162.0 A 88 88 0 0 0 218.2 167.9 Z"
                fill="#19486A" stroke="white" stroke-width="2" /><text x="219.9" y="88.8" text-anchor="middle"
                dominant-baseline="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="13" fill="white"
                transform="rotate(349.4,219.9,88.8)">17</text>
            </g>
            <circle cx="250" cy="250" r="85" fill="white" stroke="#ddd" stroke-width="1" />
            <g id="sdgDef">
              <rect x="188" y="208" width="124" height="84" rx="10" fill="#3F7E44" /><text x="250" y="236"
                text-anchor="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="20"
                fill="white">13</text><text x="250" y="255" text-anchor="middle" font-family="Arial,sans-serif"
                font-weight="bold" font-size="9" fill="white">CLIMATE ACTION</text>
            </g>
            <g id="sdgHov" opacity="0">
              <circle id="sdgHovBg" cx="250" cy="250" r="85" fill="#3F7E44" /><text id="sdgHovN" x="250" y="234"
                text-anchor="middle" font-family="Arial,sans-serif" font-weight="bold" font-size="36"
                fill="white">13</text><text id="sdgHovL1" x="250" y="265" text-anchor="middle"
                font-family="Arial,sans-serif" font-size="10" fill="white"> </text><text id="sdgHovL2" x="250" y="279"
                text-anchor="middle" font-family="Arial,sans-serif" font-size="10" fill="white"> </text>
            </g>
            <style>
              .sdg-seg {
                cursor: pointer;
                transition: transform .22s, filter .22s
              }

              .sdg-seg:hover {
                transform: scale(1.07);
                filter: brightness(1.18)
              }

              #sdgHov,
              #sdgDef {
                transition: opacity .25s;
                pointer-events: none
              }
            </style>
            <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>(function () { var s = document.querySelectorAll(".sdg-seg"), h = document.getElementById("sdgHov"), d = document.getElementById("sdgDef"), b = document.getElementById("sdgHovBg"), n = document.getElementById("sdgHovN"), l1 = document.getElementById("sdgHovL1"), l2 = document.getElementById("sdgHovL2"); s.forEach(function (e) { e.addEventListener("mouseenter", function () { var w = e.dataset.label.toUpperCase().split(" "), m = Math.ceil(w.length / 2); l1.textContent = w.slice(0, m).join(" "); l2.textContent = w.slice(m).join(" "); n.textContent = e.dataset.num; b.setAttribute("fill", e.dataset.color); h.style.opacity = "1"; d.style.opacity = "0" }); e.addEventListener("mouseleave", function () { h.style.opacity = "0"; d.style.opacity = "1" }) }) })();</script>
          </svg>
        </div>

        <!-- Text Column -->
        <div class="sdg-text">
          <h3 class="sdg-subtitle">Championing SDG 13: Climate Action</h3>
          <p>
            At Miss EcoLegacy, beauty isn't just skin deep—it's a global responsibility. We proudly align our
            environmental leadership initiatives with the United Nations Sustainable Development Goal 13:
            <strong>Climate Action</strong>.
          </p>
          <p>
            Our queens are trained ambassadors who take urgent, on-the-ground action to combat climate change. Through
            community cleanups, widespread climate education, youth empowerment, and advocacy for sustainable practices,
            we are dedicated to preserving our planet for future generations.
          </p>
          <a href="https://sdgs.un.org/goals/goal13" target="_blank" rel="noopener noreferrer"
            class="cta-secondary">Learn about UN SDG Goal 13: Climate Action</a>
        </div>
      </div>
    </div>
  </section>

  <!-- ABOUT -->
  <section id="about" class="panel about">
    <div class="panel-content" data-animate>
      <h2 class="section-title">About The Pageant</h2>

      <div class="about-grid">
        <div class="about-card" data-animate>
          <img src="images/crown.webp" alt="Crown representing elegance and grace" class="card-icon" width="400" height="400" loading="lazy">
          <h3>Elegance & Grace</h3>
          <p>Beauty with purpose and leadership.</p>
        </div>

        <div class="about-card" data-animate>
          <img src="images/earth.webp" alt="Earth globe representing environmental impact" class="card-icon" width="400" height="400" loading="lazy">
          <h3>Environmental Impact</h3>
          <p>Driving sustainable global initiatives.</p>
        </div>

        <div class="about-card" data-animate>
          <img src="images/heart.webp" alt="Heart representing a sustainable future" class="card-icon" width="400" height="400" loading="lazy">
          <h3>Sustainable Future</h3>
          <p>Creating eco-conscious leaders.</p>
        </div>
      </div>
    </div>
  </section>

  <!--CTA -->
  <section class="panel cta-section">
    <div class="cta-pattern"></div>
    <div class="panel-content" data-animate>
      <h2 class="section-title cta-title">Become an EcoLegacy Queen</h2>
      <p class="cta-subtitle">Apply today and be part of something extraordinary.</p>
      <a href="apply.html" class="cta-button">Apply Now</a>
    </div>
  </section>

  <!--FOOTER -->
  <footer class="footer">
    <div class="footer-pattern"></div>
    <div class="footer-inner">
      <div class="footer-socials">
        <a href="https://www.instagram.com/missecolegacy?igsh=NXB1dGo3Mng5dDR0" target="_blank"
          rel="noopener noreferrer" aria-label="Instagram" title="Follow us on Instagram">
          <img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/instagram.svg" alt="Instagram" width="24"
            height="24">
        </a>
        <a href="https://www.facebook.com/share/1FhLDtHBGP/?mibextid=wwXIfr" target="_blank" rel="noopener noreferrer"
          aria-label="Facebook" title="Follow us on Facebook">
          <img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/facebook.svg" alt="Facebook" width="24"
            height="24">
        </a>
        <a href="https://x.com" target="_blank" rel="noopener noreferrer" aria-label="X" title="Follow us on X">
          <img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/x.svg" alt="X" width="24" height="24">
        </a>
        <a href="https://www.tiktok.com/@miss.ecolegacy.gh" target="_blank" rel="noopener noreferrer"
          aria-label="TikTok" title="Follow us on TikTok">
          <img src="https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/tiktok.svg" alt="TikTok" width="24" height="24">
        </a>
      </div>
      <div class="footer-links">
        <a href="contact.html">Contact</a>
        <a href="legal.html#documentation">Documentation</a>
        <a href="legal.html#privacy">Privacy Policy</a>
        <a href="legal.html#terms">Terms & Conditions</a>
      </div>
    </div>
    <p class="footer-copy">© 2026 Miss EcoLegacy. All rights reserved.</p>
  </footer>

  <!-- QUEEN MODAL -->
  <div class="queen-modal" id="queenModal">
    <div class="modal-content">
      <span class="modal-close">&times;</span>

      <!-- Banner: green pattern only, no photo duplicate -->
      <div class="modal-banner">
        <img id="modalImage" class="modal-avatar" alt="">
      </div>

      <!-- Body: centered info -->
      <div class="modal-body">
        <span id="modalTitle"></span>
        <h3 id="modalName"></h3>
        <hr class="modal-divider">
        <p id="modalBio"></p>
        <a id="modalMission" href="#" class="modal-btn">View Full Profile</a>
      </div>
    </div>
  </div>

  <script src="common-frontend.js?v=6"></script>
  <script src="queen-manager.js?v=6"></script>
  <script src="index.js?v=6"></script>
</body>
</html>
