<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chicago Parcel Service | Courier &amp; Logistics Across Hyderabad</title>
<meta name="description" content="Chicago Parcel Service handles reliable courier, freight and parcel delivery across Hyderabad — branches in Tolichowki, Santosh Nagar, Dabeerpura and Vijayanagar Colony.">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">

<style>
:root{
  --paper:#FFFFFF;
  --paper-dim:#F5F5F2;
  --ink:#14273F;
  --ink-soft:#3A4A5E;
  --green:#1F7A4D;
  --green-dark:#165C3A;
  --red:#B23A2E;
  --muted:#6E6355;
  --line:#D8CFB8;
  --teal:#0E7C86;
  --amber:#C4841E;
  --violet:#6B4FA0;
  --coral:#C2492E;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'IBM Plex Sans',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:15px;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.mono{font-family:'IBM Plex Mono',monospace;}
h1,h2,h3,.display{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  color:var(--ink);
  line-height:0.95;
  letter-spacing:.01em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ===== Rainbow stripe ===== */
.stripe{height:6px; background:linear-gradient(90deg, var(--green) 0 20%, var(--teal) 20% 40%, var(--amber) 40% 60%, var(--coral) 60% 80%, var(--violet) 80% 100%);}

/* ===== Top strip ===== */
.topstrip{
  background:var(--ink); color:#C9D2DC; font-size:12.5px;
  padding:7px 0;
}
.topstrip .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.topstrip a{color:#C9D2DC;}
.topstrip a:hover{color:#fff;}

/* ===== Nav ===== */
.nav{
  background:var(--paper); border-bottom:2px solid var(--ink);position:sticky; top:0; z-index:50;
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.brandmark{display:flex; align-items:center; gap:12px;}
.brandmark img{height:80px;}
.brandmark .code{font-size:11px; letter-spacing:.12em; color:var(--muted);}
.nav-links{display:flex; gap:28px; list-style:none; flex-wrap:wrap;}
.nav-links a{font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink);}
.nav-links a:hover{color:var(--green);}
.btn{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; padding:11px 22px; border:2px solid var(--ink);
  transition:all .15s ease;
}
.btn-solid{background:var(--green); color:#fff; border-color:var(--green);}
.btn-solid:hover{background:var(--green-dark); border-color:var(--green-dark); color:#fff;}
.btn-line{background:var(--ink); color:var(--paper);}
/*.btn-line:hover{background:var(--ink); color:var(--paper);}*/
.btn-coral{background:var(--coral); color:#fff; border-color:var(--coral);}
.btn-coral:hover{background:#9c3a24; border-color:#9c3a24; color:#fff;}
.btn-line-light{background:transparent; color:var(--paper); border-color:var(--paper);}
.btn-line-light:hover{background:var(--paper); color:var(--ink);}

/* ===== Hero ===== */
.hero{
    position: relative;
    padding: 200px 0 30px;
    background: url("assets/img/hero-bg.jpg") center center/cover no-repeat;
    overflow: hidden;
    z-index: 1;
}

.hero::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.40); /* Adjust opacity (0.0 - 1.0) */
    z-index: -1;
}

.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:#fff; margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:#fff;}
.hero h1{font-size:4rem; margin-bottom:22px;color: #fff;}
.hero p.lead{font-size:1.05rem; color: #fff; max-width:480px; margin-bottom:30px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* waybill card - signature element */
.waybill{
  background:#fff; border:2px solid var(--ink); position:relative; padding:26px 24px 22px;
}
.waybill::before{
  content:""; position:absolute; top:-10px; left:0; right:0; height:20px;
  background-image:radial-gradient(circle, var(--paper) 5px, transparent 5.5px);
  background-size:22px 20px; background-position:0 0; background-repeat:repeat-x;
}
.waybill-top{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px dashed var(--line); padding-bottom:16px; margin-bottom:16px;}
.waybill-label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase;}
.waybill-id{font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; color:var(--ink); margin-top:3px;}
.stamp{
  width:64px; height:64px; border:2.5px solid var(--red); border-radius:50%; color:var(--red);
  display:flex; align-items:center; justify-content:center; text-align:center; transform:rotate(-12deg);
  font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700; letter-spacing:.05em; line-height:1.25;
  text-transform:uppercase;
}
.waybill-row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px;}
.waybill-row:last-of-type{border-bottom:none;}
.waybill-row .k{color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;}
.waybill-row .v{font-weight:600; text-align:right;}
.barcode{
  margin-top:18px; height:36px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 12px, transparent 12px 15px);
}
.barcode-num{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.3em; text-align:center; color:var(--muted); margin-top:6px;}

/* ===== Manifest strip ===== */
.manifest-strip{background:var(--ink); color:var(--paper); padding:20px 0; margin-top:0;}
.manifest-strip .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px;}
.mfield{font-family:'IBM Plex Mono',monospace; font-size:12px; padding:12px 18px; border-radius:2px;}
.mfield .k{color:rgba(255,255,255,.75); letter-spacing:.1em; text-transform:uppercase; font-size:10.5px; margin-bottom:4px;}
.mfield .v{font-size:15px; font-weight:600; color:#fff;}

/* ===== Sections ===== */
section{padding:76px 0;}
.wash-green{background:#EAF4EE;}
.wash-teal{background:#E7F3F4;}
.wash-amber{background:#FBF1E2;}
.wash-violet{background:#F1EDF7;}
.section-head{margin-bottom:44px; max-width:640px;}
.section-head h2{font-size:2.6rem; margin-top:6px;}

/* About - asymmetric */
.about-grid{display:grid; grid-template-columns:.75fr 1.25fr; gap:56px; align-items:start;}
.about-photo{position:relative; border:1px solid var(--ink);}
.about-photo img{filter:saturate(.92) contrast(1.03);}
.about-photo .corner-stamp{
  position:absolute; bottom:-16px; right:-16px; width:78px; height:78px; border-radius:50%;
  background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.03em; line-height:1.3; transform:rotate(8deg); border:2px solid var(--paper);
}
.about-copy p{color:var(--ink-soft); margin-bottom:16px; font-size:.98rem;}
.pull{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted); border-left:3px solid var(--green);
  padding-left:16px; margin-top:24px; line-height:1.7;
}

/* Why choose - line items, not cards */
.line-items{border-top:2px solid var(--ink);}
.line-item{
  display:grid; grid-template-columns:70px 1fr 1.6fr; gap:24px; align-items:start;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.line-item .code{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700; padding:5px 9px;
  color:#fff; text-align:center; height:fit-content; letter-spacing:.03em;
}
.line-item h3{font-size:1.5rem; letter-spacing:0;}
.line-item p{color:var(--ink-soft); font-size:.95rem; padding-top:2px;}

/* Process - route line */
.route{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:20px;}
.route::before{
  content:""; position:absolute; top:26px; left:8%; right:8%; height:2px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 18px);
  z-index:0;
}
.route-stop{position:relative; text-align:center; z-index:1;}
.route-num{
  width:54px; height:54px; border-radius:50%; background:var(--paper); border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:16px;
}
.route-stop h4{font-family:'Big Shoulders Display',sans-serif; text-transform:uppercase; font-size:1.2rem; font-weight:700; margin-bottom:6px;}
.route-stop p{color:var(--ink-soft); font-size:.9rem; max-width:220px; margin:0 auto;}

/* Testimonials - postcard style */
.postcards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.postcard{background:#fff; border:1px solid var(--ink); padding:22px; position:relative;}
/*.postcard:nth-child(2){transform:rotate(-0.6deg);}*/
/*.postcard:nth-child(1){transform:rotate(0.5deg);}*/
/*.postcard:nth-child(3){transform:rotate(-0.3deg);}*/
.postcard .pmark{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border:1.5px solid var(--muted);
  color:var(--muted); border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.postcard p{font-size:.9rem; color:var(--ink-soft); margin-bottom:16px;}
.postcard .who{font-family:'IBM Plex Mono',monospace; font-size:12px; border-top:1px dashed var(--line); padding-top:12px;}
.postcard .who b{display:block; color:var(--ink); font-size:13px;}

/* Branches - manifest table */
.branch-table{border-top:2px solid var(--ink);}
.branch-row{
  display:grid; grid-template-columns:90px 1fr auto; gap:20px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.branch-row .bcode{
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; color:#fff; background:var(--ink);
  padding:6px 10px; text-align:center;
}
.branch-row .bname{font-weight:700; font-size:1.05rem; margin-bottom:2px;}
.branch-row .baddr{color:var(--muted); font-size:.86rem;}
.branch-row .bpin{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--green-dark); white-space:nowrap;}

/* CTA */
.cta{background:var(--green); color:#fff; padding:52px 0;}
.cta .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.cta h2{color:#fff; font-size:2.2rem;}

/* Footer */
footer{background:var(--ink); color:#C9D2DC; padding:56px 0 0;}
.footer-grid{display:grid; grid-template-columns: .25fr .25fr .25fr 1fr; padding-bottom:40px;}
footer h6{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:14px;}
footer ul{list-style:none;}
footer li{margin-bottom:9px; font-size:.88rem;}
footer a:hover{color:#fff;}
.footer-bar{border-top:1px solid #2B3D52; padding:18px 0; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#7C8CA0;}
.footer-bar .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

.nav-toggle{display:none; background:none; border:1px solid var(--ink); width:44px; height:40px; align-items:center; justify-content:center; cursor:pointer;}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.2s;
}
.nav-toggle span::before{position:absolute; top:-6px;}
.nav-toggle span::after{position:absolute; top:6px;}

@media (max-width: 900px){
  .branch-row{
      grid-template-columns: 1fr;
}
  .hero-grid, .about-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .postcards{grid-template-columns:1fr;}
  .route{grid-template-columns:1fr; gap:36px;}
  .route::before{display:none;}
  .hero h1{font-size:2.6rem;}
  .line-item{grid-template-columns:50px 1fr; }
  .line-item p{grid-column:1/-1;}
  .nav-toggle{display:flex;}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; gap:0; border-bottom:2px solid var(--ink); padding:6px 0;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 28px; width:100%;}
  .nav .wrap{position:relative; flex-wrap:nowrap;}
  .nav-cta{display:none;}
}

/* ==========================================================================
   BREADCRUMB WITH BACKGROUND BLOCKS
   ========================================================================== */
.breadcrumb-nav.bg-overlay {
  position: relative;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  padding: 120px 0; /* Expanded padding for structural canvas depth */
  border-bottom: 2px solid var(--ink);
}

/* Linear tint layer to ensure crisp readability over the photograph */
.breadcrumb-nav.bg-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(20, 39, 63, 0.50) 0%, rgba(20, 39, 63, 0.50) 100%);
  z-index: 1;
}

/* Elevate layout container above structural tint filter */
.breadcrumb-nav.bg-overlay .wrap {
  position: relative;
  z-index: 2;
}

.breadcrumb-list {
  font-family: 'Big Shoulders Display', sans-serif;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

/* High-contrast inverted typography targets */
.breadcrumb-item a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
  color: var(--amber); /* Snaps cleanly to the signature core accent */
}

/* Separation slash custom coloring */
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: normal;
}

.breadcrumb-item.active {
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Desktop */
.nav-cta{
    display:inline-flex;
}

.mobile-track{
    display:none;
}

/* Mobile */
@media (max-width:991px){

    .nav-cta{
        display:none;
    }

    .mobile-track{
        display:block;
        margin-top:15px;
    }

    .mobile-track .btn{
        display:block;
        width:100%;
        text-align:center;
        padding:12px 20px;
    }
}
</style>
</head>
<body>
<div class="stripe"></div>

<!-- ===== Top strip ===== -->
<div class="topstrip">
  <div class="wrap">
    <div style="display:flex; gap:24px; flex-wrap:wrap;">
      <a href="mailto:chicagoinfo@gmail.com">chicagoinfo@gmail.com</a>
      <a href="tel:9063937275">+91 90639 37275</a>
    </div>
    <div>2-2-647/201/9
Central excise colony
Bagh amberpet 
Hyderabad 500013</div>
  </div>
</div>

<!-- ===== Nav ===== -->
<nav class="nav">
  <div class="wrap">
    <a class="brandmark" href="index.php">
      <img src="assets/img/logo1.png"
     alt="Chicago Parcel Service"
     style="width:280px; height:80px; object-fit:contain;">
      <!--<span class="code mono">HYD &middot; 04 BRANCHES</span>-->
    </a>
    <ul class="nav-links" id="navLinks">
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php">About Us</a></li>
    <li><a href="services.php">Services</a></li>
    <li><a href="network.php">Network</a></li>
    <li><a href="rates.php">Rates</a></li>
    <li><a href="pickup.php">Pickup Request</a></li>
    <li><a href="contact.php">Contact Us</a></li>

    <!-- Mobile Only -->
    <li class="mobile-track">
        <a href="tracking.php" class="btn btn-coral">Track Shipment</a>
    </li>
</ul>

<!-- Desktop Only -->
<a href="tracking.php" class="btn btn-coral nav-cta">Track Shipment</a>

    <button class="nav-toggle" id="navToggle" aria-label="Toggle menu" aria-expanded="false"><span></span></button>
  </div>
</nav>
<script>
document.getElementById('navToggle').addEventListener('click', function(){
  var links = document.getElementById('navLinks');
  var open = links.classList.toggle('open');
  this.setAttribute('aria-expanded', open);
});
</script>