<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>joinworldtech | Cloud & DevOps Consulting – JWT Firm</title>
    <meta
      name="description"
      content="JoinWorldTech is a Cloud & DevOps consulting firm helping businesses streamline deployments, secure cloud infrastructure, and accelerate innovation through automation."
    />

    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="{{ url_for('static', filename='images/apple-touch-icon.png') }}"
    />

    <link
      rel="icon"
      href="{{ url_for('static', filename='images/favicon.svg') }}"
      type="image/svg+xml"
    />
    <link
      rel="manifest"
      href="{{ url_for('static', filename='manifest.json') }}"
    />
    <meta name="theme-color" content="#007BFF" />
    <meta name="application-name" content="JWT Firm" />
    <meta name="apple-mobile-web-app-title" content="JWT Firm" />
    <meta name="msapplication-TileColor" content="#007BFF" />

    <!-- ✅ Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-papA0nJbcZrMeEWv3z3CTrRHRQ7Xq0Yf0n9NN07grIWq2VStfHh3ZlS0yo/EswdyRcdcf3aD/dOwDjdu1mGZDg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/main.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/index.css') }}"
    />
    <!-- ✅ AOS Animation Styles -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />

    <!-- ✅ Load services.css only on /services route -->
    {% if request.endpoint == 'services' %}
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/services.css') }}"
    />
    {% endif %}

    <!-- ✅ Load contact-form.css only on /contact_form route -->
    {% if request.endpoint == 'contact_form' %}
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/contact-form.css') }}"
    />
    {% endif %}

    <!-- ✅ Load about.css only on /about route -->
    {% if request.endpoint == 'about' %}
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/about.css') }}"
    />
    {% endif %}

    <style>
      /* Wrapper holding both images horizontally */
      .moving-images-row {
        display: flex;
        justify-content: center;
        gap: 30px;
        padding: 40px 20px;
        background: #f9f9f9;
        overflow-x: auto;
      }

      /* Individual image wrapper */
      .moving-image-box {
        position: relative;
        width: 400px; /* Width of each image */
        height: 200px;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        flex: 0 0 auto;
      }

      /* Floating animation effect */
      .moving-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: floatImage 4s ease-in-out infinite; /* 👈 reduced from 8s to 4s */
      }

      @keyframes floatImage {
        0% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-10px);
        }
        100% {
          transform: translateY(0px);
        }
      }

      /* Staggered float animation delays */
      .moving-image-box:nth-child(1) .moving-image {
        animation-delay: 0s;
      }

      .moving-image-box:nth-child(2) .moving-image {
        animation-delay: 2s;
      }

      .moving-image-box:nth-child(3) .moving-image {
        animation-delay: 4s;
      }

      .moving-image-box:nth-child(4) .moving-image {
        animation-delay: 6s;
      }

      @keyframes zoomInOut {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.05);
        }
        100% {
          transform: scale(1);
        }
      }
    </style>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "JoinWorldTech",
        "url": "https://joinworldtech.com",
        "logo": "https://joinworldtech.com/static/images/favicon.svg",
        "founder": {
          "@type": "Person",
          "name": "Betrand Mutagha",
          "jobTitle": "Founder & CEO",
          "sameAs": ["https://www.linkedin.com/in/betrand-mutagha/"]
        },
        "contactPoint": {
          "@type": "ContactPoint",
          "telephone": "+1-240-298-1823",
          "contactType": "Customer Service",
          "areaServed": "US",
          "availableLanguage": "English"
        },
        "sameAs": [
          "https://www.linkedin.com/company/joinworldtech",
          "https://www.instagram.com/joinworldtech",
          "https://www.facebook.com/joinworldtech"
        ]
      }
    </script>

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "Betrand Mutagha",
        "jobTitle": "Founder & CEO",
        "worksFor": {
          "@type": "Organization",
          "name": "JoinWorldTech",
          "url": "https://joinworldtech.com"
        },
        "url": "https://joinworldtech.com/about",
        "sameAs": ["https://www.linkedin.com/in/betrand-mutagha/"]
      }
    </script>
  </head>

  <body>
    <header>
      <div class="header-container">
        <a href="{{ url_for('home') }}" style="text-decoration: none">
          <!-- add here ||| -->
          <div
            class="logo"
            style="display: flex; align-items: center; gap: 15px"
          >
            <span style="font-weight: bold"
              >JWT Cloud & DevOps Consulting.</span
            >
            <div class="itc-bars">
              <div class="bar bar1"></div>
              <div class="bar bar2"></div>
              <div class="bar bar3"></div>
            </div>
          </div>

          <!-- add here -->
        </a>

        <nav aria-label="Main Navigation">
          <ul>
            <li>
              <a href="{{ url_for('home') }}"
                ><i class="fas fa-home"></i> Home</a
              >
            </li>
            <li>
              <a href="{{ url_for('about') }}"
                ><i class="fas fa-info-circle"></i> About</a
              >
            </li>
            <li>
              <a href="{{ url_for('assessment') }}"
                ><i class="fas fa-tasks"></i> Assessment</a
              >
            </li>
            <li>
              <a href="{{ url_for('services') }}"
                ><i class="fas fa-cloud"></i> Services</a
              >
            </li>
            <li>
              <a href="{{ url_for('contact_form') }}"
                ><i class="fas fa-envelope"></i> Contact Form</a
              >
            </li>

            {% if current_user.is_authenticated %}
            <li>
              <a href="{{ url_for('private_videos') }}"
                ><i class="fas fa-lock"></i> Videos</a
              >
            </li>
            <li>
              <a href="{{ url_for('logout') }}"
                ><i class="fas fa-sign-out-alt"></i> Logout</a
              >
            </li>
            {% else %}
            <li>
              <a href="{{ url_for('register') }}"
                ><i class="fas fa-user-plus"></i> Register</a
              >
            </li>
            <li>
              <a href="{{ url_for('login') }}"
                ><i class="fas fa-sign-in-alt"></i> Login</a
              >
            </li>
            <!-- ✅ add cognito login -->

            {% if current_user.is_authenticated %}
            <!-- ✅ Local Flask/MongoDB User Logged In -->
            <li>
              <a href="{{ url_for('private_videos') }}">
                <i class="fas fa-lock"></i> Videos
              </a>
            </li>
            <li>
              <a href="{{ url_for('logout') }}">
                <i class="fas fa-sign-out-alt"></i> Logout
              </a>
            </li>
            <!-- ✅ Cognito User Logged In -->

            <!-- ✅ end cognito login -->

            <li
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <a
                href="https://wa.me/12402981823?text=Hi%2C%20I%20need%20some%20help"
                target="_blank"
                rel="noopener noreferrer"
                style="
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  background-color: #25d366;
                  border-radius: 50%;
                  width: 38px;
                  height: 38px;
                  padding: 6px;
                  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
                "
              >
                <img
                  src="{{ url_for('static', filename='images/whatsapp-navbar.png') }}"
                  alt="WhatsApp"
                  title="Chat with us on WhatsApp"
                  style="width: 22px; height: 22px"
                />
              </a>
            </li>

            {% endif %}
          </ul>
        </nav>
      </div>
    </header>

    <!-- ✅ Flash Messages -->
    {% with messages = get_flashed_messages() %} {% if messages %}
    <div class="flashes" style="text-align: center; margin-top: 20px">
      {% for message in messages %}
      <div
        style="
          background-color: #d4edda;
          color: #155724;
          padding: 15px;
          margin: 10px auto;
          width: 80%;
          border-radius: 5px;
          border: 1px solid #c3e6cb;
          font-size: 16px;
          font-weight: 500;
        "
      >
        {{ message }}
      </div>
      {% endfor %}
    </div>
    {% endif %} {% endwith %}
    <!-- ✅ Flash Messages -->

    {% block main %}{% endblock main %}
    <!--    footer             -->
    <footer
      style="
        background-color: #007c91;
        color: white;
        padding: 40px 20px 30px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      "
    >
      <div style="text-align: center; max-width: 600px; margin: 0 auto">
        <p style="font-size: 1.5rem; font-weight: 600; margin-bottom: 10px">
          📞 Contact
        </p>

        <!-- 📱 Clickable Phone -->
        <p style="font-size: 1.1rem; margin: 5px 0">
          <a
            href="tel:+12402981823"
            style="color: #ffffffcc; text-decoration: none"
          >
            +1 (240) 298-1823
          </a>
        </p>

        <!-- ✉️ Clickable Email -->
        <p style="font-size: 1.1rem; margin: 5px 0">
          <a
            href="mailto:info@joinworldtech.com"
            style="color: #ffffffcc; text-decoration: none"
          >
            info@joinworldtech.com
          </a>
        </p>

        <!-- Social Media Icons -->
        <div style="margin-top: 20px">
          <a
            href="https://www.linkedin.com"
            target="_blank"
            style="margin: 0 12px"
          >
            <img
              src="{{ url_for('static', filename='images/linkedin.png') }}"
              alt="LinkedIn"
              style="height: 32px; vertical-align: middle"
            />
          </a>
          <a
            href="https://www.instagram.com"
            target="_blank"
            style="margin: 0 12px"
          >
            <img
              src="{{ url_for('static', filename='images/instagram.png') }}"
              alt="Instagram"
              style="height: 32px; vertical-align: middle"
            />
          </a>
          <a
            href="https://wa.me/12402981823?text=Hi%2C%20I%20need%20some%20help"
            target="_blank"
            style="margin: 0 12px"
          >
            <img
              src="{{ url_for('static', filename='images/whatsapp-navbar.png') }}"
              alt="WhatsApp"
              style="height: 32px; vertical-align: middle"
            />
          </a>
          <a
            href="https://www.facebook.com"
            target="_blank"
            style="margin: 0 12px"
          >
            <img
              src="{{ url_for('static', filename='images/facebook.png') }}"
              alt="Facebook"
              style="height: 32px; vertical-align: middle"
            />
          </a>
        </div>
      </div>

      <p
        style="
          text-align: center;
          font-size: 0.9rem;
          color: #ffffffaa;
          margin-top: 30px;
        "
      >
        &copy; 2025 Cloud & DevOps Consulting. All rights reserved.
      </p>
    </footer>

    <!--    footer             -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>

    <!-- ✅ Load typing.js only on homepage -->
    {% if request.endpoint == 'home' %}
    <script src="{{ url_for('static', filename='js/typing.js') }}"></script>
    <script src="{{ url_for('static', filename='js/counter.js') }}"></script>
    {% endif %}

    <!-- ✅ AOS Animation Script -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
      AOS.init({
        duration: 800,
        once: true,
      });
    </script>

    <!-- ✅ Tidio Live Chat Widget -->
    <script
      src="//code.tidio.co/nm9da68kwarxu4poexeqqsiblocw7heq.js"
      async
    ></script>

    <!-- ✅ Cookie Consent Banner -->
    <div
      id="cookieConsent"
      style="
        display: none;
        position: fixed;
        bottom: 0;
        background: #f1f1f1;
        width: 100%;
        padding: 15px;
        text-align: center;
        z-index: 1000;
      "
    >
      <span>
        We use cookies to improve your experience.
        <a href="/cookie-policy" target="_blank">Learn more</a>
      </span>
      <button onclick="acceptCookies()" style="margin-left: 10px">
        Accept All Cookies
      </button>
    </div>

    <script>
      function acceptCookies() {
        localStorage.setItem("cookiesAccepted", "true");
        document.getElementById("cookieConsent").style.display = "none";
      }

      window.onload = function () {
        if (!localStorage.getItem("cookiesAccepted")) {
          document.getElementById("cookieConsent").style.display = "block";
        }
      };
    </script>
  </body>
</html>
