WWWWWW

Current Directory: /home/u588966950/domains/vtsinfotech.online/public_html/swanayurbed/addmybin
Viewing File: /home/u588966950/domains/vtsinfotech.online/public_html/swanayurbed/addmybin/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AdMyBinn – Clean Streets, Stronger Communities</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<style>
  :root {
    --green: #2D6A4F;
    --lime: #74C69D;
    --dark: #0d1a14;
    --off: #f4f1eb;
    --accent: #F4A261;
    --text: #1a2e22;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'DM Sans', sans-serif; background: var(--dark); color: var(--off); overflow-x: hidden; }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; width: 100%; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 6vw;
    background: rgba(13,26,20,0.85); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(116,198,157,0.12);
  }
  nav .logo {
    display: flex; align-items: center;
    text-decoration: none; line-height: 0;
  }
  nav .logo img {
    height: 42px;
    width: auto;
    display: block;
  }
  nav ul { list-style: none; display: flex; gap: 32px; }
  nav ul a { color: rgba(244,241,235,0.75); text-decoration: none; font-size: .88rem; font-weight: 500; letter-spacing: .5px; transition: color .2s; }
  nav ul a:hover { color: var(--lime); }
  .nav-cta {
    background: var(--lime); color: var(--dark); padding: 9px 22px;
    border-radius: 4px; font-weight: 600; font-size: .85rem;
    text-decoration: none; transition: background .2s;
  }
  .nav-cta:hover { background: var(--accent); }

  /* ── HERO ── */
  .hero {
    min-height: 100vh; display: flex; align-items: center;
    position: relative; overflow: hidden;
    padding: 120px 6vw 80px;
  }
  .hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg, #0d1a14 0%, #1a3a28 60%, #0d1a14 100%);
  }
  .hero-video-slot {
    position: absolute; inset: 0; z-index: 1;
    overflow: hidden;
  }
  .hero-video-slot .hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  .hero-video-slot::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: rgba(13,26,20,0.55);
  }
  .hero-content { position: relative; z-index: 2; max-width: 680px; }
  .hero-tag {
    display: inline-block; background: rgba(116,198,157,0.15);
    border: 1px solid rgba(116,198,157,0.3); color: var(--lime);
    font-size: .75rem; letter-spacing: 2px; text-transform: uppercase;
    padding: 6px 14px; border-radius: 20px; margin-bottom: 28px;
  }
  .hero h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.5rem, 8vw, 7rem);
    line-height: .95; letter-spacing: 2px;
    margin-bottom: 24px;
  }
  .hero h1 em { color: var(--lime); font-style: normal; }
  .hero p {
    font-size: 1.05rem; line-height: 1.7; font-weight: 300;
    color: rgba(244,241,235,0.8); max-width: 500px; margin-bottom: 40px;
  }
  .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
  .btn-primary {
    background: var(--lime); color: var(--dark); padding: 14px 32px;
    border-radius: 4px; font-weight: 600; font-size: .95rem;
    text-decoration: none; transition: background .2s, transform .2s;
  }
  .btn-primary:hover { background: var(--accent); transform: translateY(-2px); }
  .btn-outline {
    border: 1.5px solid rgba(244,241,235,0.35); color: var(--off);
    padding: 14px 32px; border-radius: 4px; font-weight: 500;
    font-size: .95rem; text-decoration: none; transition: border-color .2s, color .2s;
  }
  .btn-outline:hover { border-color: var(--lime); color: var(--lime); }

  /* ── STATS BAR ── */
  .stats {
    background: #fff;
    display: flex; justify-content: space-around; flex-wrap: wrap;
    padding: 44px 6vw; gap: 36px;
    border-top: 1px solid rgba(13,26,20,0.06);
    border-bottom: 1px solid rgba(13,26,20,0.06);
  }
  .stat { text-align: center; min-width: 140px; }
  .stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    color: #2d7d46;
    letter-spacing: 1px;
    line-height: 1;
  }
  .stat-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0d0d0d;
    margin-top: 10px;
  }

  /* ── ABOUT ── */
  .about {
    padding: 100px 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--off); color: var(--text);
  }
  .about-inner {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 560px);
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
    width: max-content;
    max-width: 100%;
  }
  .about-img {
    border-radius: 8px; overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border: 1px solid rgba(45,106,79,0.18);
    box-shadow: 0 12px 40px rgba(13,26,20,0.08);
    background: #d0e8db;
  }
  .about-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(420px, 72vh);
    object-fit: contain;
    object-position: center;
  }
  .about-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .about-text .section-tag { color: var(--green); font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }
  .about-text h2 { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; line-height: 1; margin-bottom: 20px; color: var(--dark); }
  .about-text p { font-size: .95rem; line-height: 1.8; color: #3a5240; margin-bottom: 16px; }
  .about-text a { color: var(--green); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--green); }

  /* ── HOW IT WORKS ── */
  .how {
    padding: 100px 6vw;
    background: var(--dark);
  }
  .section-head { text-align: center; margin-bottom: 60px; }
  .section-head .tag { color: var(--lime); font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
  .section-head h2 { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: var(--off); }
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
  .step {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(116,198,157,0.12);
    border-radius: 8px; padding: 36px 28px; transition: border-color .25s, transform .25s;
  }
  .step:hover { border-color: rgba(116,198,157,0.4); transform: translateY(-4px); }
  .step-num { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: rgba(116,198,157,0.2); line-height: 1; margin-bottom: 12px; }
  .step h3 { font-size: 1rem; font-weight: 600; color: var(--lime); margin-bottom: 10px; }
  .step p { font-size: .88rem; line-height: 1.7; color: rgba(244,241,235,0.65); }

  /* ── SERVICES ── */
  .services {
    padding: 100px 6vw;
    background: #0a1510;
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
    justify-content: center;
    gap: 28px;
    margin-top: 60px;
  }
  .service-card {
    border-radius: 8px; overflow: hidden;
    border: 1px solid rgba(116,198,157,0.1);
    transition: transform .25s;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: rgba(0,0,0,0.2);
  }
  .service-card:hover { transform: translateY(-6px); }
  .service-img {
    min-height: 260px;
    padding: 32px 28px;
    background: #1a3a28;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .service-img img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: min(280px, 42vw);
    object-fit: contain;
  }
  .service-body { padding: 0 24px 28px; }
  .service-body h3 { font-size: 1.05rem; font-weight: 600; color: var(--off); margin-bottom: 8px; }
  .service-body p { font-size: .85rem; line-height: 1.7; color: rgba(244,241,235,0.55); }

  /* ── IMPACT VIDEO ── */
  .impact {
    padding: 100px 6vw;
    background: var(--green);
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  }
  .impact-video {
    position: relative; border-radius: 8px; overflow: hidden;
    --impact-vmax: min(85vh, 620px);
    width: min(100%, 340px, calc(var(--impact-vmax) * 9 / 16));
    aspect-ratio: 9 / 16;
    max-height: var(--impact-vmax);
    margin-inline: auto;
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.12);
  }
  .impact-video .impact-video-el {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
  }
  .impact-text h2 { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; line-height: 1; margin-bottom: 20px; }
  .impact-text p { font-size: .95rem; line-height: 1.8; color: rgba(244,241,235,0.85); margin-bottom: 14px; }
  .impact-text .highlight { color: var(--accent); font-weight: 600; }

  /* ── PARTNERS ── */
  .partners {
    padding: 80px 6vw;
    background: var(--off); color: var(--text); text-align: center;
  }
  /* ── MEDIA COVERAGE ── */
  .media-coverage {
    padding: 100px 6vw;
    background: var(--off); color: var(--text);
  }
  .media-coverage .section-head { margin-bottom: 48px; }
  .media-coverage .section-head .tag { color: var(--green); }
  .media-coverage .section-head h2 { color: var(--dark); }
  .media-coverage .section-head p {
    font-size: .95rem; color: #3a5240; max-width: 560px; margin: 16px auto 0;
    line-height: 1.65;
  }
  .media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    justify-content: center;
    gap: 20px;
  }
  .media-grid figure {
    margin: 0; border-radius: 8px; overflow: hidden;
    border: 1px solid rgba(45,106,79,0.12);
    background: #fff;
    box-shadow: 0 8px 24px rgba(13,26,20,0.06);
    transition: transform .25s, box-shadow .25s;
  }
  .media-grid figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(13,26,20,0.1);
  }
  .media-grid img {
    width: 100%; height: 220px; object-fit: cover;
    display: block;
  }

  /* ── OUR PRESENCE ── */
  .our-presence {
    padding: 100px 6vw;
    background: #0a1510;
  }
  .our-presence .section-head .tag { color: var(--lime); }
  .our-presence .section-head h2 { color: var(--off); }
  .our-presence .section-head p {
    font-size: .95rem; color: rgba(244,241,235,0.55); max-width: 560px; margin: 16px auto 0;
    line-height: 1.65;
  }
  .presence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
    justify-content: center;
    gap: 24px;
    margin-top: 48px;
  }
  .presence-item {
    text-align: center;
  }
  .presence-card {
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(116,198,157,0.12);
    padding: 20px 16px;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    transition: border-color .25s, transform .25s;
  }
  .presence-card:hover {
    border-color: rgba(116,198,157,0.35);
    transform: translateY(-3px);
  }
  .presence-card img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
  }
  .presence-item figcaption {
    font-size: .72rem;
    letter-spacing: .5px;
    color: rgba(244,241,235,0.55);
    line-height: 1.35;
  }

  /* ── OUR REACH (Eastern India) ── */
  .reach {
    padding: 100px 6vw;
    background: var(--off);
    color: var(--text);
  }
  .reach-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    max-width: 1180px;
    margin-inline: auto;
  }
  .reach-img {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(45,106,79,0.15);
    box-shadow: 0 16px 48px rgba(13,26,20,0.1);
    background: #fff;
  }
  .reach-img img {
    display: block;
    width: 100%;
    height: auto;
  }
  .reach-text .tag {
    color: var(--green);
    font-size: .75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 16px;
  }
  .reach-text h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.4rem);
    line-height: 1.05;
    color: var(--dark);
    margin-bottom: 20px;
  }
  .reach-text p {
    font-size: .95rem;
    line-height: 1.85;
    color: #3a5240;
    margin-bottom: 16px;
  }
  .reach-text p:last-of-type { margin-bottom: 0; }

  .partners h3 { font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; color: #6a9e82; margin-bottom: 40px; font-weight: 600; }
  .partner-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    max-width: 1200px;
    margin-inline: auto;
  }
  .partner-logo {
    flex: 0 0 auto;
    width: 148px;
    background: #fff;
    border: 1px solid rgba(45,106,79,0.12);
    border-radius: 8px;
    padding: 12px 10px;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(13,26,20,0.05);
  }
  .partner-logo img {
    max-width: 100%;
    max-height: 76px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
  }

  /* ── CTA ── */
  .cta-section {
    padding: 100px 6vw; text-align: center;
    background: var(--dark);
  }
  .cta-section h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 20px; }
  .cta-section h2 em { color: var(--lime); font-style: normal; }
  .cta-section p { font-size: 1rem; color: rgba(244,241,235,0.65); max-width: 500px; margin: 0 auto 40px; line-height: 1.7; }
  .cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

  /* ── FOOTER ── */
  footer {
    background: #070f0a; padding: 50px 6vw 30px;
    border-top: 1px solid rgba(116,198,157,0.1);
  }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
  .footer-brand .logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
    margin-bottom: 14px;
  }
  .footer-brand .logo img {
    height: 44px;
    width: auto;
    display: block;
  }
  .footer-brand p { font-size: .85rem; line-height: 1.7; color: rgba(244,241,235,0.45); }
  .footer-col h4 { font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lime); margin-bottom: 16px; font-weight: 600; }
  .footer-col ul { list-style: none; }
  .footer-col ul li { margin-bottom: 10px; }
  .footer-col ul a { font-size: .85rem; color: rgba(244,241,235,0.5); text-decoration: none; transition: color .2s; }
  .footer-col ul a:hover { color: var(--off); }
  .footer-bottom { border-top: 1px solid rgba(116,198,157,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
  .footer-bottom p { font-size: .78rem; color: rgba(244,241,235,0.3); }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    nav ul { display: none; }
    .about-inner {
      grid-template-columns: 1fr;
      gap: 48px;
      width: 100%;
      justify-items: center;
      text-align: center;
    }
    .about-img {
      max-width: min(100%, 420px);
    }
    .about-img img {
      height: auto;
      width: 100%;
      max-width: 100%;
    }
    .impact { grid-template-columns: 1fr; gap: 40px; }
    .reach-inner { grid-template-columns: 1fr; gap: 40px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
  }

  /* fade-in on scroll */
  .fade-up { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
  .fade-up.visible { opacity: 1; transform: translateY(0); }
</style>
</head>
<body>

<!-- NAV -->
<nav>
  <a href="#home" class="logo" aria-label="AdMyBinn home"><img src="assets/admybin-scaled.png" alt="AdMyBinn" width="200" height="60" loading="eager"/></a>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#how">How It Works</a></li>
    <li><a href="#work">Our Work</a></li>
    <li><a href="#impact">Impact</a></li>
    <li><a href="#media">Media</a></li>
    <li><a href="#presence">Presence</a></li>
    <li><a href="#reach">Our Reach</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <a href="#contact" class="nav-cta">Join the Movement</a>
</nav>

<!-- HERO -->
<section class="hero" id="home">
  <div class="hero-bg"></div>
  <div class="hero-video-slot">
    <video class="hero-video" autoplay muted loop playsinline>
      <source src="assets/AD-MY-BIN_Banner.mp4" type="video/mp4"/>
    </video>
  </div>
  <div class="hero-content fade-up">
    <div class="hero-tag">Clean India · For Every Neighbourhood</div>
    <h1>Streets That Stay <em>Clean</em>,<br>Communities That <em>Thrive</em></h1>
    <p>AdMyBinn brings maintained public dustbins closer to where people actually live and walk — so cleaner streets, safer footpaths, and dignity in shared spaces become the norm, not the exception. Where we install paired units, <strong>wet waste and dry waste stay separate</strong> — a small street-level habit that cuts mixed rubbish, helps recyclers and composters downstream, and is gentler on landfills, air, and water over time.</p>
    <div class="hero-btns">
      <a href="#work" class="btn-primary">See What We Do</a>
      <a href="#how" class="btn-outline">How It Unfolds</a>
    </div>
  </div>
</section>

<!-- STATS -->
<div class="stats">
  <div class="stat fade-up"><div class="stat-num">2,200+</div><div class="stat-label">Bins</div></div>
  <div class="stat fade-up"><div class="stat-num">100+</div><div class="stat-label">Allies & Supporters</div></div>
  <div class="stat fade-up"><div class="stat-num">1M Ton +</div><div class="stat-label">Garbage Collected</div></div>
  <div class="stat fade-up"><div class="stat-num">100%</div><div class="stat-label">QR Verified Cleaning</div></div>
</div>

<!-- ABOUT -->
<section class="about" id="about">
  <div class="about-inner">
    <div class="about-img fade-up">
      <img src="assets/admybinn_1710924400_3327797523550903462_27948254292.jpg" alt="AdMyBinn public dustbin on the street" loading="lazy"/>
    </div>
    <div class="about-text fade-up">
      <div class="section-tag">Our Story</div>
      <h2>Born From Clean India Mission</h2>
      <p>In 2014, the Clean India Mission inspired communities to sweep their streets — but litter kept coming back because there still weren’t enough places to dispose of waste with dignity. Joy and Ankit saw that gap and started AdMyBinn.</p>
      <p>Today we install, manage, and maintain public dustbins at regular intervals along streets — so families, students, and workers always have a bin within reach. Keeping <strong>wet and dry streams apart</strong> nudges better sorting before waste ever leaves the neighbourhood: less contamination, more material that can be recovered, and a lighter footprint on the environment we share. Each one is QR-tagged: after every cleaning run our team scans, photographs, and logs the visit — open, traceable care for the neighbourhoods we serve.</p>
      <a href="#how">Learn how it works →</a>
    </div>
  </div>
</section>

<!-- HOW IT WORKS -->
<section class="how" id="how">
  <div class="section-head fade-up">
    <div class="tag">The Journey</div>
    <h2>Four Steps to a Kinder, Cleaner City</h2>
  </div>
  <div class="steps">
    <div class="step fade-up">
      <div class="step-num">01</div>
      <h3>Bins Where People Need Them</h3>
      <p>Public dustbins are placed every 50–100 metres along busy stretches — so throwing waste in the right place is easy, not a chore. Layouts use <strong>separate bins for wet and dry waste</strong> where it fits the site, so what gets collected is already a step closer to safer processing and a cleaner city overall.</p>
    </div>
    <div class="step fade-up">
      <div class="step-num">02</div>
      <h3>CSR &amp; Social Messaging</h3>
      <p>Organizations that believe in the same mission can support bins and share CSR or awareness messaging on panels — turning everyday walks into gentle reminders about health, hygiene, and caring for our streets.</p>
    </div>
    <div class="step fade-up">
      <div class="step-num">03</div>
      <h3>Regular Clearance</h3>
      <p>Our ground team empties and cleans every bin on a schedule — because a bin only helps if it is never overflowing or forgotten.</p>
    </div>
    <div class="step fade-up">
      <div class="step-num">04</div>
      <h3>QR Verification</h3>
      <p>Each bin has a unique QR code. After cleaning, a photo is uploaded with date, time & GPS — fully transparent.</p>
    </div>
  </div>
</section>

<!-- SERVICES -->
<section class="services" id="work">
  <div class="section-head fade-up">
    <div class="tag">Where It Shows Up</div>
    <h2>Good Vibes You Can Actually Point To</h2>
  </div>
  <div class="services-grid">
    <div class="service-card fade-up">
      <div class="service-img">
        <img src="assets/binn-1.png" alt="AdMyBinn smart dustbin in a neighbourhood" loading="lazy"/>
      </div>
      <div class="service-body">
        <h3>Cleaner, Kinder Streets</h3>
        <p>More reachable bins mean less litter on footpaths, fewer blocked drains, and public spaces that feel safer for children, elders, and daily commuters — small wins that add up block by block. Clear separation for wet and dry waste along those same stretches helps keep plastics and paper drier, organics out of the wrong pile, and everyday environmental impact a notch lower.</p>
      </div>
    </div>
    <div class="service-card fade-up">
      <div class="service-img">
        <img src="assets/recycle.png" alt="Recycling and environmental responsibility" loading="lazy"/>
      </div>
      <div class="service-body">
        <h3>CSR Partnerships</h3>
        <p>Forward-thinking organizations channel CSR into bin networks and social messaging — funding real infrastructure citizens touch every day, with outcomes you can see, count, and verify on the ground.</p>
      </div>
    </div>
    <div class="service-card fade-up">
      <div class="service-img">
        <img src="assets/vehicle.png" alt="Waste collection and civic operations" loading="lazy"/>
      </div>
      <div class="service-body">
        <h3>Civic Collaboration</h3>
        <p>We work alongside municipalities and local bodies to plug gaps in public waste access — turning under-served stretches into stretches people are proud to walk through.</p>
      </div>
    </div>
  </div>
</section>

<!-- IMPACT VIDEO -->
<section class="impact" id="impact">
  <div class="impact-video fade-up">
    <video class="impact-video-el" autoplay muted loop playsinline preload="metadata" aria-label="AdMyBinn impact on the ground">
      <source src="assets/WhatsApp-Video-2022-11-23-at-12.18.17-PM-1.mp4" type="video/mp4"/>
    </video>
  </div>
  <div class="impact-text fade-up">
    <h2>Visible Change. Verified Care.</h2>
    <p>Every AdMyBinn installation is tracked from day one. Our QR-verification flow means each cleaning visit is photographed and logged with time and location — so residents, supporters, and civic partners share the same honest picture of what’s happening on the street.</p>
    <p>Neighbourhoods that work with us often see a <span class="highlight">real drop in visible litter</span> within weeks — because bins stop being missing pieces in the puzzle.</p>
    <a href="#contact" class="btn-primary" style="display:inline-block; margin-top:12px;">Connect With Us →</a>
  </div>
</section>

<!-- MEDIA COVERAGE -->
<section class="media-coverage" id="media">
  <div class="section-head fade-up">
    <div class="tag">Press &amp; Recognition</div>
    <h2>Media Coverage</h2>
    <p>Highlights from coverage of our work for cleaner streets and communities.</p>
  </div>
  <div class="media-grid">
    <figure class="fade-up"><img src="assets/media/Untitled-design.png" alt="AdMyBinn media coverage clipping" loading="lazy" width="400" height="220"/></figure>
    <figure class="fade-up"><img src="assets/media/Untitled-design-1.png" alt="AdMyBinn media coverage clipping" loading="lazy" width="400" height="220"/></figure>
    <figure class="fade-up"><img src="assets/media/Untitled-design-2-150x150.png" alt="AdMyBinn media coverage clipping" loading="lazy" width="150" height="150"/></figure>
    <figure class="fade-up"><img src="assets/media/Untitled-design-3-150x150.png" alt="AdMyBinn media coverage clipping" loading="lazy" width="150" height="150"/></figure>
    <figure class="fade-up"><img src="assets/media/Untitled-design-4.png" alt="AdMyBinn media coverage clipping" loading="lazy" width="400" height="220"/></figure>
    <figure class="fade-up"><img src="assets/media/Untitled-design-5-150x150.png" alt="AdMyBinn media coverage clipping" loading="lazy" width="150" height="150"/></figure>
  </div>
</section>

<!-- OUR PRESENCE -->
<section class="our-presence" id="presence">
  <div class="section-head fade-up">
    <div class="tag">On the Ground</div>
    <h2>Our Presence</h2>
    <p>Cities and civic bodies where AdMyBinn is working alongside communities.</p>
  </div>
  <div class="presence-grid">
    <figure class="presence-item fade-up">
      <div class="presence-card"><img src="assets/presence/bidhanagar-300x300.jpg" alt="Bidhanagar" loading="lazy" width="300" height="300"/></div>
      <figcaption>Bidhanagar</figcaption>
    </figure>
    <figure class="presence-item fade-up">
      <div class="presence-card"><img src="assets/presence/Durgapur-Municipal-Corporation-300x300.png" alt="Durgapur Municipal Corporation" loading="lazy" width="300" height="300"/></div>
      <figcaption>Durgapur Municipal Corporation</figcaption>
    </figure>
    <figure class="presence-item fade-up">
      <div class="presence-card"><img src="assets/presence/JUSCO-300x300.png" alt="JUSCO" loading="lazy" width="300" height="300"/></div>
      <figcaption>JUSCO</figcaption>
    </figure>
    <figure class="presence-item fade-up">
      <div class="presence-card"><img src="assets/presence/Kolkata-Municipality-300x300.png" alt="Kolkata Municipality" loading="lazy" width="300" height="300"/></div>
      <figcaption>Kolkata Municipality</figcaption>
    </figure>
    <figure class="presence-item fade-up">
      <div class="presence-card"><img src="assets/presence/North-Dum-Dum-Municipality-1-300x300.png" alt="North Dum Dum Municipality" loading="lazy" width="300" height="300"/></div>
      <figcaption>North Dum Dum Municipality</figcaption>
    </figure>
    <figure class="presence-item fade-up">
      <div class="presence-card"><img src="assets/presence/Puri-Municipality-300x300.png" alt="Puri Municipality" loading="lazy" width="300" height="300"/></div>
      <figcaption>Puri Municipality</figcaption>
    </figure>
    <figure class="presence-item fade-up">
      <div class="presence-card"><img src="assets/presence/Siliguri-Municipal-Corporation-300x300.png" alt="Siliguri Municipal Corporation" loading="lazy" width="300" height="300"/></div>
      <figcaption>Siliguri Municipal Corporation</figcaption>
    </figure>
    <figure class="presence-item fade-up">
      <div class="presence-card"><img src="assets/presence/South-Dum-Dum-Municipality-300x300.png" alt="South Dum Dum Municipality" loading="lazy" width="300" height="300"/></div>
      <figcaption>South Dum Dum Municipality</figcaption>
    </figure>
  </div>
</section>

<!-- OUR REACH -->
<section class="reach" id="reach">
  <div class="reach-inner">
    <div class="reach-img fade-up">
      <img src="assets/East_India-scaled.png" alt="Map of AdMyBinn footprint across Eastern India" loading="lazy" width="800" height="600"/>
    </div>
    <div class="reach-text fade-up">
      <div class="tag">Where We Operate</div>
      <h2>Serving You Across Eastern India — Anytime, Anywhere</h2>
      <p><strong>AdMyBinn</strong> extends its footprint across Eastern India, delivering impactful visibility and sustainable waste-management support in key cities and towns. Wherever we are on the map, the aim is the same: bins people actually use, streets that stay cared for, and partners who can stand behind verifiable work on the ground.</p>
      <p>From major metros like <strong>Kolkata</strong> and <strong>Howrah</strong> to growing urban hubs such as <strong>Durgapur</strong>, <strong>Asansol</strong>, <strong>Vrindavan</strong>, and <strong>Benaras</strong>, we connect organizations with diverse audiences through a network of eco-minded bins and high-visibility street panels — so your message reaches the right people while day-to-day waste stays off footpaths and communities stay cleaner and smarter.</p>
      <p>We’ve also brought maintained bins into <strong>Kolkata Metro</strong> and <strong>major train stations</strong> — corridors with crushing footfall where litter piled up because <strong>almost no one had put down serious, serviced disposal before</strong>. Those were gaps others hadn’t really grasped; we stepped in so commuters finally had a bin that works, not just a stretch of platform with nowhere honest to throw waste.</p>
    </div>
  </div>
</section>

<!-- PARTNERS -->
<section class="partners">
  <h3>Friends of the Mission</h3>
  <div class="partner-logos">
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-6.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-7.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-8.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-9.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-10.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-11.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-12.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-13.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-14.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-15.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-16.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-17.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-18.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-19.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-20.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-21.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-22.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-23.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-24.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-25.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-26.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-27.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-28.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-29.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-30.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-31.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-32.png" alt="Partner logo" loading="lazy"/></div>
    <div class="partner-logo fade-up"><img src="assets/clients/Untitled-design-33.png" alt="Partner logo" loading="lazy"/></div>
  </div>
</section>

<!-- CTA -->
<section class="cta-section" id="contact">
  <h2>Be Part of a <em>Cleaner Tomorrow</em></h2>
  <p>If you’re from a civic body, a CSR programme, or simply want your city to feel more cared for — we’d love to hear from you. Every conversation starts with the street, not a spreadsheet.</p>
  <div class="cta-btns">
    <a href="mailto:hello@admybinn.com" class="btn-primary">Say Hello</a>
    <a href="#work" class="btn-outline">Explore Our Work</a>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <div class="footer-grid">
    <div class="footer-brand">
      <a href="#home" class="logo" aria-label="AdMyBinn home"><img src="assets/admybin-scaled.png" alt="AdMyBinn" width="200" height="60" loading="lazy"/></a>
      <p>A people-first bin network — building cleaner, more walkable streets one responsible disposal point at a time.</p>
    </div>
    <div class="footer-col">
      <h4>Company</h4>
      <ul>
        <li><a href="#about">About Us</a></li>
        <li><a href="#impact">Impact</a></li>
        <li><a href="#reach">Our Reach</a></li>
        <li><a href="#media">Media</a></li>
        <li><a href="#">Careers</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Focus Areas</h4>
      <ul>
        <li><a href="#work">Street Cleanliness</a></li>
        <li><a href="#work">CSR Collaborations</a></li>
        <li><a href="#work">Civic Partnerships</a></li>
        <li><a href="#how">Bin Care &amp; Upkeep</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Contact</h4>
      <ul>
        <li><a href="mailto:hello@admybinn.com">hello@admybinn.com</a></li>
        <li><a href="#">LinkedIn</a></li>
        <li><a href="#">Instagram</a></li>
        <li><a href="#">WhatsApp</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <p>© 2026 AdMyBinn. All rights reserved.</p>
    <p>Made with 💚 for a cleaner India.</p>
  </div>
</footer>

<script>
  // Fade-up on scroll
  const observer = new IntersectionObserver(entries => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); } });
  }, { threshold: 0.12 });
  document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));

  // About: match photo max-height to text column (desktop only)
  (function syncAboutImageHeight() {
    const text = document.querySelector('.about-text');
    const img = document.querySelector('.about-img img');
    if (!text || !img) return;
    const apply = () => {
      if (window.matchMedia('(max-width: 768px)').matches) {
        img.style.maxHeight = '';
        return;
      }
      img.style.maxHeight = text.offsetHeight + 'px';
    };
    apply();
    window.addEventListener('resize', apply);
    if (typeof ResizeObserver !== 'undefined') new ResizeObserver(apply).observe(text);
  })();
</script>
</body>
</html>
F1l3 Manager
