<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI ML Operations, LLC</title>
  <script async defer src="http://10.0.0.230:31107/tracker.js" data-website-id="cm7w80pyy020oddswy2evl957"></script>
  <!-- Materialize CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <link rel="icon" type="image/xicon" href="{% static 'public/img/logo.png' %}">
  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Custom CSS -->
  <style>
    .hero-section {
      background: {% block path %}url({% static 'public/img/bg1.png' %}) {% endblock %};
      height: 60vh;
      display: flex;
      background-repeat:no-repeat;
      background-position: center center;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .hero {
      
      height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* Video styling */
    .hero video {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 60vh;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translate(-50%, -50%);
      z-index: -1; /* Place the video behind the content */
      opacity: 0.7; /* Adjust opacity to darken the video */
    }

    /* Overlay to darken the video */
    .hero::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* Adjust the opacity here */
      z-index: -1; /* Place the overlay behind the content */
    }

    /* Hero content styling */
    .hero-content {
      z-index: 1; /* Ensure content is above the video and overlay */
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .hero-section h1 {
      font-size: 4rem;
      font-weight: bold;
    }
    .hero-section p { 
      font-weight: bold;
    }
    .section {
      padding: 4rem 0;
    }
    feature-icon {
      font-size: 3rem;
      color: #26a69a;
    }
    .pricing-card {
      text-align: center;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .screenshot-img {
        width: 100%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    }
    .footer {
      padding: 2rem 0;
      background-color: #333;
      color: white;
      text-align: center;
    }
    body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    main {
      flex: 1 0 auto;
    }
  </style>
</head>
<body>

  <!-- Navigation Bar -->
  <ul id="servicesDropdown" class="dropdown-content"> 
    <li ><a href="{% url 'ai_education' %}">AI Education</a></li>
    <li ><a href="{% url 'ai_sensor' %}">AI Sensor</a></li>
    <li ><a href="{% url 'bot' %}">Bot Creation</a></li>
    <li ><a href="{% url 'chat' %}">Chat</a></li>
    <li ><a href="{% url 'computers' %}">Computer Builds</a></li>
    <li ><a href="{% url 'file_hosting' %}">File Hosting</a></li>
    <li ><a href="{% url 'ml_model' %}">ML Models</a></li>
    <li ><a href="{% url 'web_design' %}">Website Design</a></li>
    

   </ul>
  <nav class="blue-grey darken-3">
    <div class="nav-wrapper container">
        <a href="{% url 'public_index' %}" class="brand-logo">AI ML Operations, LLC</a>
      <a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <!-- <li class="active"><a href="{% url 'public_index' %}">Home</a></li> -->
        <li><a class="dropdown-trigger" href="#!" data-target="servicesDropdown">Services<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="{% url 'contact' %}">Contact</a></li>
      </ul>
    </div>
  </nav>

  <!-- Mobile Navigation -->
  <ul class="sidenav" id="mobile-nav">
    <li class="active"><a >Services</a></li>
    <hr />
    <li ><a href="{% url 'ai_education' %}">AI Education</a></li>
    <li ><a href="{% url 'ai_sensor' %}">AI Sensor</a></li>
    <li ><a href="{% url 'bot' %}">Bot Creation</a></li>
    <li ><a href="{% url 'chat' %}">Chat</a></li>
    <li ><a href="{% url 'computers' %}">Computer Builds</a></li>
    <li ><a href="{% url 'file_hosting' %}">File Hosting</a></li>
    <li ><a href="{% url 'ml_model' %}">ML Models</a></li>
    <li ><a href="{% url 'web_design' %}">Website Design</a></li>
    <hr/>

    <li ><a href="{% url 'contact' %}">Contact</a></li>
    
    </ul>
  </ul>

  <main>
    {% block content %}
    {% endblock %}
  
  </main>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <p>&copy; 2023 - <script>document.write( new Date().getFullYear() );</script> AI ML Operations, LLC. All rights reserved.</p>
    </div>
  </footer>

  <!-- Materialize JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <!-- <script>
    // Initialize Materialize components
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems);
    });
  </script>
  <script>
    $(".dropdown-trigger").dropdown();
  </script> -->
  <script>
    $(".dropdown-trigger").dropdown();
  </script>
  <script>
    // Initialize Materialize components
    M.AutoInit();
  </script>
</body>
</html>