<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Real Infinite Concept</title>
  <style>
    /* Global Styles */
    

    body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: url("13ae1d9f-6970-4d17-a23b-dd5a29a3130a.jpg") no-repeat center center fixed;
  background-size: cover;  /* makes it responsive */
  min-height: 100vh;
  color: white;  /* keep text readable */
  text-align: center;
}

    
    
    
    
    
    
    
    
    
    
    
    /* Header */
    header {
      background: linear-gradient(270deg, orange, red, purple, blue, green, yellow, orange);
      background-size: 1400% 1400%;
      text-align: center;
      padding: 60px 20px;
      box-shadow: 0 4px 88px rgba(0,0,0,0.5);
      opacity: 0;
      animation: fadeBgIn 1.5s ease-in-out forwards, gradientShift 20s ease infinite;
    }

    header h1 {
      font-size: 5em;
      display: inline-block;
      white-space: nowrap;
    }

    header h1 span {
      opacity: 0;
      display: inline-block;
      animation: neonLetter 1.5s forwards, randomFlicker 6s infinite;
    }

    header p,
    header .subtext {
      opacity: 0;
      font-size: 2em;
      animation: fadeInDownBounce 2.2s ease-in-out forwards, rainbowGlow 8s linear infinite, randomFlicker 7s infinite;
    }

    header .subtext {
      font-size: 1.7em;
    }

    /* Neon animations */
    @keyframes neonLetter {
      0%   { opacity: 0; text-shadow: none; }
      20%  { opacity: 1; text-shadow: 0 0 10px orange, 0 0 20px orange; }
      30%  { opacity: 0.4; text-shadow: none; }
      40%  { opacity: 1; text-shadow: 0 0 20px orange, 0 0 40px orange; }
      100% { opacity: 1; text-shadow: 0 0 15px orange, 0 0 30px orange; }
    }

    @keyframes randomFlicker {
      0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
        text-shadow: 0 0 15px currentColor, 0 0 30px currentColor;
      }
      20%, 55% {
        opacity: 0.4;
        text-shadow: none;
      }
    }

    @keyframes fadeInDownBounce {
      0% { opacity: 0; transform: translateY(-50px); }
      70% { opacity: 1; transform: translateY(0); }
      85% { transform: translateY(-10px); }
      100% { transform: translateY(0); }
    }

    @keyframes rainbowGlow {
      0%   { text-shadow: 0 0 10px orange, 0 0 20px orange; }
      25%  { text-shadow: 0 0 15px yellow, 0 0 30px yellow; }
      50%  { text-shadow: 0 0 15px red, 0 0 30px red; }
      75%  { text-shadow: 0 0 15px blue, 0 0 30px blue; }
      100% { text-shadow: 0 0 10px purple, 0 0 20px purple; }
    }

    @keyframes fadeBgIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* Base Nav */
    nav {
      display: flex;
      justify-content: center;  /* Center horizontally */
      align-items: center;
      background: #222;
      padding: 15px;
      flex-wrap: wrap; /* Allow wrapping on small screens */
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 15px;
      font-weight: bold;
    }

    nav a:hover {
      color: yellow;
    }

    /* Dropdown Styling */
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background: #333;
      min-width: 150px;
      z-index: 1;
    }

    .dropdown-content a {
      display: block;
      padding: 10px;
      color: white;
    }

    .dropdown-content a:hover {
      background: #444;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    /* ✅ Mobile Responsive */
    @media (max-width: 768px) {
      nav {
        flex-direction: column;   /* Stack items vertically */
      }

      nav a, 
      .dropdown {
        margin: 10px 0;  /* Space between links */
      }

      .dropdown-content {
        position: static; /* Dropdown will open below */
        width: 100%;      /* Full width on mobile */
      }
    }
  </style>
</head>
<body>

  <!-- Header -->
  <header>
    <h1>
      <span style="animation-delay:0s,6s">R</span>
      <span style="animation-delay:0.2s,6.5s">e</span>
      <span style="animation-delay:0.4s,7s">a</span>
      <span style="animation-delay:0.6s,7.5s">l</span>
      &nbsp;
      <span style="animation-delay:1.2s,9s">i</span>
      <span style="animation-delay:1.4s,9.5s">n</span>
      <span style="animation-delay:1.6s,10s">f</span>
      <span style="animation-delay:1.8s,10.5s">i</span>
      <span style="animation-delay:2s,11s">n</span>
      <span style="animation-delay:2.2s,11.5s">i</span>
      <span style="animation-delay:2.4s,12s">t</span>
      <span style="animation-delay:2.6s,12.5s">e</span>
      &nbsp;
      <span style="animation-delay:3.6s,15s">c</span>
      <span style="animation-delay:3.8s,15.5s">o</span>
      <span style="animation-delay:4s,16s">n</span>
      <span style="animation-delay:4.2s,16.5s">c</span>
      <span style="animation-delay:4.4s,17s">e</span>
      <span style="animation-delay:4.6s,17.5s">p</span>
      <span style="animation-delay:4.8s,18s">t</span>
    </h1>
    <p style="animation-delay: 6s,12s;">"Your Consultancy Partner"</p>
    <p class="subtext" style="animation-delay: 6.5s,13s;">We Shape The Future</p>
  </header>

  <!-- Navigation -->
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <div class="dropdown">
      <a href="#">Services ▾</a>
      <div class="dropdown-content">
        <a href="leadership.html">Leadership</a>
        <a href="projects.html">Projects</a>
        <a href="announcement.html">Announcement</a>
      </div>
    </div>
    <a href="contact.html">Contact</a>
  </nav>

</body>
</html>
