<?php include'header.php'?>

<!-- ===== SYSTEM BREADCRUMB WITH BACKGROUND ===== -->
<nav class="breadcrumb-nav bg-overlay" style="background-image: url('assets/img/breadcrumb.png');">
  <div class="wrap">
    <ol class="breadcrumb-list">
      <li class="breadcrumb-item">
        <a href="#">Contact Us</a>
      </li>
    </ol>
  </div>
</nav>

<!-- ===== Contact Us Page Content ===== -->
<section id="contact-page" style="padding: 60px 0;">
  <div class="wrap">
    <div class="section-head">
      <div class="eyebrow">Contact Hub</div>
      <h2>Get In Touch With Our<br>Logistics Officers</h2>
    </div>

    <!-- Responsive Grid Class Added -->
    <div class="contact-grid">
      
      <!-- Form Terminal Interface -->
      <div style="border: 1px solid var(--ink); padding: 32px; background: var(--paper);">
        <h3 style="font-family:'Big Shoulders Display'; font-size:1.8rem; text-transform:uppercase; margin-bottom:16px;">Request a Quote</h3>
        <form action="#" method="POST" onsubmit="event.preventDefault();">
          <!-- Full Name -->
          <div class="form-group">
            <label>Full Name</label>
            <input type="text" name="name" required>
          </div>

          <!-- Email -->
          <div class="form-group">
            <label>Email</label>
            <input type="email" name="email" required>
          </div>

          <!-- Mobile -->
          <div class="form-group">
            <label>Mobile</label>
            <input type="tel" name="mobile" required>
          </div>

          <!-- Subject -->
          <div class="form-group">
            <label>Subject</label>
            <input type="text" name="subject" required>
          </div>

          <!-- Message -->
          <div class="form-group last">
            <label>Message</label>
            <textarea name="message" required></textarea>
          </div>

          <!-- Submit Button -->
          <button type="submit" class="btn btn-solid btn-submit">Submit</button>
        </form>
      </div>

      <!-- Quick Coordinates Sidebar -->
      <div>
        <h3 style="font-family:'Big Shoulders Display'; font-size:1.8rem; text-transform:uppercase; margin-bottom:16px;">Headquarters</h3>
        <p style="margin-bottom: 24px;">For urgent operational route redirects or bulk manifest bookings, connect directly with our central coordination desk located at the main hub.</p>
        
        <div style="border-top: 2px solid var(--ink); padding: 16px 0;">
          <div class="mono" style="font-size:11px; color:var(--muted); text-transform:uppercase;">Email</div>
          <div style="font-weight:600; font-size:16px; margin-top:2px;"><a href="mailto:chicagoinfo@gmail.com">chicagoinfo@gmail.com</a></div>
        </div>

        <div style="border-top: 1px solid var(--line); padding: 16px 0;">
          <div class="mono" style="font-size:11px; color:var(--muted); text-transform:uppercase;">Mobile</div>
          <div style="font-weight:600; font-size:16px; margin-top:2px;"><a href="tel:9063937275">+91 90639 37275</a></div>
        </div>

        <div style="border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; margin-bottom:24px;">
          <div class="mono" style="font-size:11px; color:var(--muted); text-transform:uppercase;">Address</div>
          <div style="font-size:14px; margin-top:2px; color:var(--ink-soft);">2-2-647/201/9
Central excise colony
Bagh amberpet 
Hyderabad 500013</div>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ===== Branches - manifest grid (animated) ===== -->
<section id="branches">
  <div class="wrap">
    <div class="section-head">
      <div class="eyebrow">Our Network</div>
      <h2>Branches Across<br>Hyderabad</h2>
    </div>
    <div class="branch-grid col-3">

      <div class="branch-card branch-card--rose" style="--delay:0s">
        <div class="bcard-glow"></div>
        <div class="bcard-top">
          <div class="bcode">M&middot;00</div>
          <div class="bpin">HYD &ndash; 500013</div>
        </div>
        <div class="bmap">
          <iframe
            src="https://www.google.com/maps?q=2-2-647/201/9+Central+Excise+Colony+Bagh+Amberpet+Hyderabad+500013&output=embed"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            allowfullscreen></iframe>
        </div>
        <a class="bmap-link" href="https://www.google.com/maps/search/?api=1&query=2-2-647%2F201%2F9+Central+Excise+Colony+Bagh+Amberpet+Hyderabad+500013" target="_blank" rel="noopener">View larger map &rarr;</a>
        <div class="bname">Main Branch <span class="bmain-tag">HQ</span></div>
        <div class="baddr">2-2-647/201/9, Central Excise Colony, Bagh Amberpet, Hyderabad</div>
      </div>

      <div class="branch-card branch-card--green" style="--delay:0.1s">
        <div class="bcard-glow"></div>
        <div class="bcard-top">
          <div class="bcode">T&middot;01</div>
          <div class="bpin">HYD &ndash; 500008</div>
        </div>
        <div class="bmap">
          <iframe
            src="https://www.google.com/maps?q=Mawin+Arcade+Complex+7+Tombs+Road+Tolichowki+Hyderabad+500008&output=embed"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            allowfullscreen></iframe>
        </div>
        <a class="bmap-link" href="https://www.google.com/maps/search/?api=1&query=Mawin+Arcade+Complex+7+Tombs+Road+Tolichowki+Hyderabad+500008" target="_blank" rel="noopener">View larger map &rarr;</a>
        <div class="bname">Tolichowki Branch</div>
        <div class="baddr">Shop# 16, Mawin Arcade Complex, Beside Al Saba Hotel, 7 Tombs Road, Tolichowki</div>
      </div>

      <div class="branch-card branch-card--teal" style="--delay:0.2s">
        <div class="bcard-glow"></div>
        <div class="bcard-top">
          <div class="bcode">S&middot;02</div>
          <div class="bpin">HYD &ndash; 500059</div>
        </div>
        <div class="bmap">
          <iframe
            src="https://www.google.com/maps?q=Creida+Road+Santosh+Nagar+Colony+Hyderabad+500059&output=embed"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            allowfullscreen></iframe>
        </div>
        <a class="bmap-link" href="https://www.google.com/maps/search/?api=1&query=Creida+Road+Santosh+Nagar+Colony+Hyderabad+500059" target="_blank" rel="noopener">View larger map &rarr;</a>
        <div class="bname">Santosh Nagar Colony Branch</div>
        <div class="baddr">Shop # 3, Opp. Grand Function Hall, Creida Road, Santosh Nagar Colony</div>
      </div>

      <div class="branch-card branch-card--amber" style="--delay:0.3s">
        <div class="bcard-glow"></div>
        <div class="bcard-top">
          <div class="bcode">D&middot;03</div>
          <div class="bpin">HYD &ndash; 500002</div>
        </div>
        <div class="bmap">
          <iframe
            src="https://www.google.com/maps?q=Yahya+Complex+Komatwadi+Labour+Adda+Dabeerpura+Darwaza+Hyderabad+500002&output=embed"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            allowfullscreen></iframe>
        </div>
        <a class="bmap-link" href="https://www.google.com/maps/search/?api=1&query=Yahya+Complex+Komatwadi+Labour+Adda+Dabeerpura+Darwaza+Hyderabad+500002" target="_blank" rel="noopener">View larger map &rarr;</a>
        <div class="bname">Dabeerpura Branch</div>
        <div class="baddr">Shop # 2, Yahya Complex, Opp. Avinash Tiffin Centre, Komatwadi, Labour Adda, Dabeerpura Darwaza</div>
      </div>

      <div class="branch-card branch-card--violet" style="--delay:0.4s">
        <div class="bcard-glow"></div>
        <div class="bcard-top">
          <div class="bcode">V&middot;04</div>
          <div class="bpin">HYD &ndash; 500057</div>
        </div>
        <div class="bmap">
          <iframe
            src="https://www.google.com/maps?q=Union+Bank+Lane+Vijaya+Nagar+Colony+Masab+Tank+Hyderabad+500057&output=embed"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            allowfullscreen></iframe>
        </div>
        <a class="bmap-link" href="https://www.google.com/maps/search/?api=1&query=Union+Bank+Lane+Vijaya+Nagar+Colony+Masab+Tank+Hyderabad+500057" target="_blank" rel="noopener">View larger map &rarr;</a>
        <div class="bname">Vijayanagar Colony Branch</div>
        <div class="baddr">Shop # 2, Beside Vijaya Swagruha Foods, Union Bank Lane, Vijaya Nagar Colony, Masab Tank</div>
      </div>

    </div>
  </div>
</section>

<style>
/* New Responsive Grid Layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 32px;
  align-items: start;
}

form {
  width: 100%;
}

/*.form-group {*/
/*  margin-bottom: 20px;*/
/*}*/

.form-group.last {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--ink);
  font-family: inherit;
  box-sizing: border-box;
}

.form-group textarea {
  height: 60px;
  resize: none;
}


.btn-submit {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  width: 100%; /* Stretches to full width on small screens for better UX */
}

/* Desktop Breakpoint Settings */
@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
  }
  
  .btn-submit {
    width: auto; /* Resets to native inline-block width on desktop */
  }
}


.branch-grid {
  display: grid;
  gap: 24px;
}
.branch-grid.col-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .branch-grid.col-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .branch-grid.col-3 { grid-template-columns: 1fr; }
}

.branch-card {
  position: relative;
  padding: 28px 24px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 36px rgba(0,0,0,0.16);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.branch-card:hover {
  box-shadow: 0 20px 36px rgba(0,0,0,0.16);
}

/* ---- animated gradient top bar ---- */
.branch-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background-size: 200% 100%;
  animation: barShift 3s linear infinite;
}

@keyframes barShift {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ---- moving glow blob inside the card ---- */
.bcard-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.18;
  z-index: -1;
  top: -60px;
  right: -60px;
  animation: glowFloat 6s ease-in-out infinite;
}

@keyframes glowFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-20px, 20px) scale(1.15); }
}

/* ---- shimmer sweep on hover ---- */
.branch-card::after {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}

.branch-card:hover::after {
  left: 150%;
}

.bcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.bcode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 52px;
  padding: 0 10px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  animation: badgePulse 2.8s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
  50%      { box-shadow: 0 4px 18px rgba(0,0,0,0.3); }
}

.bpin {
  font-size: 0.8rem;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.02em;
}

.bname {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1a1a1a;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bmain-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: var(--accent, #c0392b);
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
}

.baddr {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #666;
  margin-bottom: 16px;
}

/* ---- embedded map ---- */
.bmap {
  position: relative;
  width: 100%;
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

.bmap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(15%) contrast(1.02);
  transition: filter 0.3s ease;
}

.branch-card:hover .bmap iframe {
  filter: grayscale(0%);
}

.bmap-link {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent, #1a1a1a);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.bmap-link:hover {
  transform: translateX(3px);
}

/* ---- per-branch gradient themes ---- */
.branch-card--green {
  --accent: var(--green);
}
.branch-card--green::before { background-image: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 40%, white), var(--green)); }
.branch-card--green .bcode  { background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green) 60%, black)); }
.branch-card--green .bcard-glow { background: radial-gradient(circle, var(--green), transparent 70%); }

.branch-card--teal {
  --accent: var(--teal);
}
.branch-card--teal::before  { background-image: linear-gradient(90deg, var(--teal), color-mix(in srgb, var(--teal) 40%, white), var(--teal)); }
.branch-card--teal .bcode   { background: linear-gradient(135deg, var(--teal), color-mix(in srgb, var(--teal) 60%, black)); }
.branch-card--teal .bcard-glow { background: radial-gradient(circle, var(--teal), transparent 70%); }

.branch-card--amber {
  --accent: var(--amber);
}
.branch-card--amber::before { background-image: linear-gradient(90deg, var(--amber), color-mix(in srgb, var(--amber) 40%, white), var(--amber)); }
.branch-card--amber .bcode  { background: linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 60%, black)); }
.branch-card--amber .bcard-glow { background: radial-gradient(circle, var(--amber), transparent 70%); }

.branch-card--violet {
  --accent: var(--violet);
}
.branch-card--violet::before { background-image: linear-gradient(90deg, var(--violet), color-mix(in srgb, var(--violet) 40%, white), var(--violet)); }
.branch-card--violet .bcode  { background: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 60%, black)); }
.branch-card--violet .bcard-glow { background: radial-gradient(circle, var(--violet), transparent 70%); }

/* ---- main branch (rose) — self-contained, doesn't depend on root vars ---- */
.branch-card--rose {
  --accent: #c0392b;
}
.branch-card--rose::before { background-image: linear-gradient(90deg, #c0392b, #e57368, #c0392b); }
.branch-card--rose .bcode  { background: linear-gradient(135deg, #c0392b, #7c2015); }
.branch-card--rose .bcard-glow { background: radial-gradient(circle, #c0392b, transparent 70%); }

.branch-card--main {
  box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(0,0,0,0.06);
}
</style>

<?php include'footer.php'?>