<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>clouddevopsconsulting</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/main.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/index.css') }}"
    />
    <style>
      /* CSS for Moving Image */
      .moving-image-container {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 300px; /* Adjust height as needed */
        margin: 20px 0;
      }

      .moving-image {
        position: absolute;
        width: 1400px; /* Adjust the size as needed */
        height: auto;
        animation: moveImage 30s linear infinite;
      }

      @keyframes moveImage {
        0% {
          left: -150px; /* Start off-screen (left) */
        }
        50% {
          left: 50%; /* Move to the center */
          transform: translateX(-50%);
        }
        100% {
          left: 100%; /* Move off-screen (right) */
        }
      }
    </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"
    />
  </head>
  <body>
    <header>
      <div class="header-container">
        <a href="{{ url_for('home') }}" style="text-decoration: none">
          <div class="logo">
            CDC <small>Cloud DevOps Consulting Company ❤️ </small>
          </div>
        </a>

        <nav aria-label="Main Navigation">
          <ul>
            <li><a href="{{ url_for('home') }}">Home</a></li>
            <li><a href="{{ url_for('services') }}">Services</a></li>
            <li><a href="{{ url_for('contact_form') }}">Contact Form</a></li>
            {% if current_user.is_authenticated %}
            <li><a href="{{ url_for('private_videos') }}">Videos</a></li>
            <li><a href="{{ url_for('logout') }}">Logout</a></li>
            {% else %}

            <li><a href="{{ url_for('register') }}">Register</a></li>
            <li><a href="{{ url_for('login') }}">Login</a></li>
            {% endif %}
          </ul>
        </nav>
      </div>
    </header>

    {% block main %}{% endblock main %}

    <footer>
      <div class="contact-info">
        <p>
          Phone: 240 298 1823 📞🔵 answer | Email 📩 :
          <a href="info@clouddevopsconsulting.com"
            >info@clouddevopsconsulting.com</a
          >

          <a
            href="https://wa.me/12402981823?text=Hi%2C%20I%20need%20some%20help"
            target="_blank"
          >
            Chat with us on WhatsApp
          </a>
        </p>
      </div>
      <p>&copy; 2025 Cloud & DevOps Consulting. All rights reserved.</p>
    </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>
  </body>
</html>
