<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CDC Firm | Cloud & DevOps Consulting Services</title>
    <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="CDC Firm" />
    <meta name="apple-mobile-web-app-title" content="CDC Firm" />
    <meta name="msapplication-TileColor" content="#007BFF" />
    <meta name="theme-color" 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>
      /* 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 Firm <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('about') }}">About</a></li>
            <li><a href="{{ url_for('assessment') }}">Assessment</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> -->

        <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>
            <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>
      <div style="text-align: center; padding-top: 20px">
        <p style="font-weight: bold; font-size: 1.2rem">Contact</p>
        <p>240-298-1823</p>
        <p>
          <a href="mailto:info@clouddevopsconsulting.com" style="color: white">
            info@clouddevopsconsulting.com
          </a>
        </p>

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

      <p style="text-align: center">
        &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>

    <!-- ✅ 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>
  </body>
</html>
<!-- ✅ Tidio Live Chat Widget -->
