<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Stream Placement Services Ltd</title>

  <!-- Icons & Fonts -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@600&display=swap" rel="stylesheet" />

  <style>
    :root{
      --primary:#27653d;
      --secondary:#0c6f99;
      --white:#ffffff;
      --gray:#f8f9fa;
      --accent:#30576e;
      --deep-blue:#073853;
      --dark-text:#222;
    }

    /* Global */
    html,body{height:100%;}
    body{
      font-family:'Roboto',sans-serif;
      background:#fff;              /* ✅ All sections on white */
      color:#222;
      margin:0;
    }
    .container{max-width:1140px;margin:auto;padding:0 20px;}

    /* Header (dark for contrast so menu text can be white) */
    header.site-header{
      background:var(--deep-blue);  /* ✅ Dark header */
      color:var(--white);
      position:sticky;top:0;z-index:1000;
      padding:15px 0;
      box-shadow:0 2px 10px rgba(0,0,0,0.08);
    }
    .header-flex{display:flex;align-items:center;justify-content:space-between;}
    .logo img{height:48px;width:auto;display:block;}

    nav ul{list-style-type:none;display:flex;gap:25px;margin:0;padding:0;}
    nav ul li a{
      color:#fff !important;        /* ✅ White menu text */
      text-decoration:none;
      font-weight:600;
      font-family:'Montserrat',sans-serif;
      font-size:1rem;
      padding:8px 12px;border-radius:6px;
      transition:background-color .3s,color .3s;
    }
    nav ul li a:hover,nav ul li a.active{
      background-color:var(--secondary);
      color:#fff;
    }
    #nav-toggle{
      display:none;font-size:2rem;background:none;border:none;
      color:#fff;                   /* ✅ White hamburger */
      cursor:pointer;
    }

    /* Header phone (icon only in this demo) */
    .header-phone .phone-icon{font-size:1.5em;color:#fff;}

    /* Hero (kept simple here; your real slides can sit on white page) */
    .hero{width:100%;background:#fff;}
    .hero-swiper{width:100%;height:100%;}
    .swiper-slide{
      background-position:center center;
      background-repeat:no-repeat;background-size:cover;
      display:flex;align-items:center;justify-content:center;
      min-height:70vh; /* nice height without forcing full viewport */
      padding:20px;color:#fff;text-align:center;
      position:relative;
    }
    .swiper-slide::before{ /* overlay for text readability */
      content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);
    }
    .hero-slide-content{
      position:relative;z-index:1;
      max-width:800px;padding:24px 20px;
    }
    .hero-slide-content h1{font-size:2.2rem;margin:0 0 14px;}
    .hero-slide-content p{font-size:1.1rem;margin:0 0 24px;}

    /* Sections (all white) */
    section.section{background:#fff;}
    .section h2,.section h3{
      color:var(--deep-blue);
      font-family:'Montserrat',sans-serif;
      text-align:center;
      margin:0 0 18px;
    }

    a{color:var(--secondary);transition:color .2s;}
    a:hover{color:var(--primary);}

    /* Buttons (fix: your previous CSS set white on white) */
    .btn{
      background:var(--secondary);  /* ✅ Visible button */
      color:#fff;
      font-family:'Montserrat',sans-serif;font-weight:700;
      padding:12px 28px;border:none;border-radius:30px;
      font-size:1rem;cursor:pointer;
      box-shadow:0 6px 15px rgba(12,111,153,0.16);
      transition:background .3s,color .3s; text-decoration:none; display:inline-block;
    }
    .btn:hover{background:var(--primary);color:#fff;}
    .btn-small{padding:8px 18px;font-size:.9rem;}

    /* Demo spacer section (can remove in your real page) */
    .demo-hero-spacer{
      height:100vh;display:flex;align-items:center;justify-content:center;background:#fff;
    }

    /* Mobile */
    @media (max-width:700px){
      .header-flex{flex-direction:column;align-items:flex-start;}
      #nav-toggle{display:block;position:absolute;right:20px;top:15px;}
      .nav-menu{
        flex-direction:column;gap:0;background:var(--deep-blue);
        position:absolute;top:78px;right:0;left:0;display:none;
        box-shadow:0 5px 10px rgba(0,0,0,0.1);padding:10px 0;
      }
      .nav-menu.active{display:flex;}
      .nav-menu a{color:#fff !important;padding:12px 20px;width:100%;text-align:left;}
      .nav-menu a:hover,.nav-menu a.active{background-color:var(--secondary);color:#fff;}
      .hero-slide-content h1{font-size:1.8rem;}
      .hero-slide-content p{font-size:1rem;}
    }
    .section {
      padding: 80px 0;
    }

    .section-divider {
      border: none;
      border-top: 1px solid #e0e0e0;
      margin: 0;
    }
    
    .bg-light {
      background-color: #f9f9f9; /* clean white-grey background */
    }
    
    .section-title {
      text-align: center;
      margin-bottom: 40px;
      font-size: 2rem;
      font-weight: 600;
      color: var(--primary-color);
    }
    
       /* Remove bullets from partner and program lists */
    ul.partner-list,
    ul.program-list {
      list-style: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    ul.partner-list li,
    ul.program-list li {
      list-style: none !important;
    }


  </style>
</head>
<body>

  <!-- Header -->
  <header class="site-header">
    <div class="container header-flex">
      <a href="#home" class="logo">
        <img src="https://placehold.co/150x40/E8EBF1/4A5568?text=Your+Logo" alt="Stream Placement Services Ltd Logo" />
      </a>
      <nav class="main-nav">
        <button id="nav-toggle" aria-label="Toggle navigation">&#9776;</button>
        <ul id="nav-menu" class="nav-menu">
          <li><a href="#home" class="active">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#programs">Programs</a></li>
          <li><a href="#resources">Resources</a></li>
          <li><a href="#blog">Blog</a></li>
          <li><a href="#consultation">Consultation</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <div class="header-phone">
        <i class="fas fa-phone-alt phone-icon" aria-hidden="true"></i>
      </div>
    </div>
  </header>

  <!-- Demo hero spacer (white background) -->
  <main>
    <section id="home" class="demo-hero-spacer section">
      <h1 style="font-size:2rem;color:#073853;margin:0;">
        All sections are white. Scroll to test the sticky header.
      </h1>
    </section>

    <!-- Example white sections -->
    <section id="about" class="section">
      <div class="container">
        <h2>About</h2>
        <p style="text-align:center;max-width:760px;margin:0 auto 24px;">
          Replace this with your actual About content. This section background is white.
        </p>
      </div>
    </section>

    <section id="services" class="section">
      <div class="container">
        <h2>Services</h2>
        <p style="text-align:center;max-width:760px;margin:0 auto 24px;">
          Replace with your Services. Background remains white for a consistent look.
        </p>
      </div>
    </section>

    <section id="programs" class="section">
      <div class="container">
        <h2>Programs</h2>
        <p style="text-align:center;max-width:760px;margin:0 auto 24px;">
          Replace with your Programs. Background is white.
        </p>
      </div>
    </section>

    <section id="resources" class="section">
      <div class="container">
        <h2>Resources</h2>
        <p style="text-align:center;max-width:760px;margin:0 auto 24px;">
          Replace with your Resources and FAQs.
        </p>
      </div>
    </section>

    <section id="blog" class="section">
      <div class="container">
        <h2>Blog</h2>
        <p style="text-align:center;max-width:760px;margin:0 auto 24px;">
          Replace with your Blog preview tiles.
        </p>
      </div>
    </section>

    <section id="consultation" class="section">
      <div class="container">
        <h2>Consultation</h2>
        <p style="text-align:center;max-width:760px;margin:0 auto 24px;">
          Add your consultation form here.
        </p>
        <p style="text-align:center;">
          <a href="#contact" class="btn">Get a Free Consultation</a>
        </p>
      </div>
    </section>

    <section id="contact" class="section">
      <div class="container">
        <h2>Contact</h2>
        <p style="text-align:center;max-width:760px;margin:0 auto 24px;">
          Add your address, email, phone, and map here.
        </p>
      </div>
    </section>
  </main>

  <script>
    // Mobile navigation toggle
    document.addEventListener('DOMContentLoaded', () => {
      const navToggle = document.getElementById('nav-toggle');
      const navMenu = document.getElementById('nav-menu');
      if (navToggle && navMenu) {
        navToggle.addEventListener('click', () => {
          navMenu.classList.toggle('active');
        });
        navMenu.querySelectorAll('a').forEach(link => {
          link.addEventListener('click', () => {
            navMenu.classList.remove('active');
          });
        });
      }
    });
  </script>
  
</body>
</html>
