/* =========================================================
   ALLPACK SYSTEMS — STYLESHEET
   ---------------------------------------------------------
   This file is organized into clearly labeled sections.
   Each section controls ONE part of the page only.

   TIP: Use Ctrl+F (Find) and search for the section name
   in CAPITAL LETTERS (e.g. "HERO SECTION") to jump there.

   Editing one section will NOT affect other sections.
   ========================================================= */


/* =========================================================
   1. COLORS & GLOBAL SETTINGS
   ---------------------------------------------------------
   Change colors here ONCE and they update everywhere.
   ========================================================= */
:root{
  --navy:   #1B2A41;   /* main dark blue color */
  --orange: #E0651A;   /* accent / highlight color */
  --cream:  #F5F3EE;   /* background color */
  --graphite: #2E3440; /* main text color */
  --grey:   #E3E1DC;   /* light grey background */
  --line:   #D7D4CC;   /* border / divider lines */
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth; /* smooth scroll when clicking menu links */
}

body{
  font-family: 'Inter', sans-serif;
  color: var(--graphite);
  background: var(--cream);
  line-height: 1.6;
}

h1, h2, h3, .eyebrow, .logo-text{
  font-family: 'Oswald', sans-serif;
}

/* Center content and limit max width on large screens */
.container{
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
}

/* General spacing for every section */
section{
  padding: 80px 0;
  scroll-margin-top: 70px; /* so menu links don't hide behind header */
}

.section-head{
  max-width: 680px;
  margin-bottom: 50px;
}
.section-head .eyebrow{ margin-bottom: 12px; }
.section-head h2{
  font-size: 36px;
  color: var(--navy);
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: 14px;
}
.section-head p{ color:#666; font-size:16px; }

.eyebrow{
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 18px;
}


/* =========================================================
   2. HEADER & MENU
   ---------------------------------------------------------
   Controls: top logo bar + navigation menu (desktop & mobile)
   ========================================================= */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
}

/* Logo */
.logo{ display:flex; align-items:center; gap:10px; }
.logo-img{
  height:38px;       /* controls logo size - adjust if needed */
  width:auto;
  display:block;
}

/* Menu links (desktop) */
.nav-links{
  display:flex; gap:32px;
  font-size:14px; font-weight:500;
}
.nav-links a{
  color: var(--graphite);
  text-decoration:none;
  letter-spacing:.5px;
}
.nav-links a:hover{ color: var(--orange); }

/* Hamburger button (only visible on mobile) */
.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.menu-toggle span{
  display:block;
  width:24px; height:2px;
  background: var(--navy);
}


/* =========================================================
   3. HERO SECTION (top banner with heading + map graphic)
   ========================================================= */
.hero{
  padding: 90px 0 70px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:60px;
  align-items:center;
}
.hero h1{
  font-size:52px; font-weight:700; line-height:1.15;
  color: var(--navy);
  margin-bottom:22px; letter-spacing:.5px;
}
.hero h1 em{ color: var(--orange); font-style:normal; }
.hero p{ font-size:17px; max-width:480px; color:#555; margin-bottom:30px; }

.hero-ctas{ display:flex; gap:16px; }

/* Buttons */
.btn{
  display:inline-block; padding:14px 30px;
  font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:1.5px;
  text-transform:uppercase; text-decoration:none; font-weight:500;
  border:2px solid var(--navy); transition:.2s;
}
.btn-primary{ background: var(--navy); color: var(--cream); }
.btn-primary:hover{ background: var(--orange); border-color: var(--orange); }
.btn-secondary{ color: var(--navy); }
.btn-secondary:hover{ background: var(--navy); color: var(--cream); }

/* India map graphic inside hero */
.map-wrap{
  position:relative;
  background: var(--navy);
  border-radius:4px;
  padding:30px;
  display:flex; align-items:center; justify-content:center;
}
.map-svg{ width:100%; height:auto; }
.map-label{
  position:absolute; bottom:24px; left:30px;
  color: var(--cream); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; font-family:'Oswald',sans-serif;
}
.map-label span{ color: var(--orange); }


/* =========================================================
   4. STATS BAR (the dark strip with numbers: 9, B2B, 360° etc.)
   ========================================================= */
.stats{
  background: var(--navy);
  color: var(--cream);
  padding: 34px 0;
}
.stats .container{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:20px;
  text-align:center;
}
.stat-num{
  font-family:'Oswald',sans-serif;
  font-size:34px; font-weight:600;
  color: var(--orange);
}
.stat-label{
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  margin-top:6px; color:#cfd6e0;
}


/* =========================================================
   5. ABOUT / SERVICES SECTION (the 3 cards: 01, 02, 03)
   ========================================================= */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:28px;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  padding:32px 28px;
}
.card-num{
  font-family:'Oswald',sans-serif; font-size:13px; color: var(--orange);
  letter-spacing:2px; margin-bottom:14px; font-weight:600;
}
.card h3{ font-size:19px; color: var(--navy); margin-bottom:10px; font-weight:600; }
.card p{ font-size:14.5px; color:#666; }


/* =========================================================
   6. REGIONS / COVERAGE SECTION (the state list grid)
   ---------------------------------------------------------
   Currently set up for 9 states in a 3-column grid.
   If you ADD or REMOVE states later:
     - Keep the column count a divisor that fits nicely
       (3 columns works well for 6, 9, 12 items)
     - You may need to adjust the border rules below.
   ========================================================= */
.regions{ background:#fff; }

.region-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* <- change number of columns here */
  border:1px solid var(--line);
}
.region-item{
  padding:26px 20px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
}
/* remove right border on last column */
.region-item:nth-child(3n){ border-right:none; }
/* remove bottom border on last row (last 3 items) */
.region-item:nth-last-child(-n+3){ border-bottom:none; }

.region-item .num{
  font-family:'Oswald',sans-serif; color: var(--orange);
  font-size:13px; letter-spacing:2px; margin-bottom:8px; font-weight:600;
}
.region-item h4{ color: var(--navy); font-size:16px; font-weight:600; margin-bottom:4px; }
.region-item span{ font-size:13px; color:#888; }


/* =========================================================
   7. WHY PARTNER SECTION (grey background, A/B/C/D/E boxes)
   ========================================================= */
.why{ background: var(--grey); }

.why-grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:40px 60px;
}
/* On big screens, show 3 columns instead of 2 */
@media(min-width:1100px){
  .why-grid{ grid-template-columns: repeat(3,1fr); }
}

.why-item{ display:flex; gap:18px; }
.why-icon{
  flex:0 0 46px; height:46px;
  border:2px solid var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-weight:600; color: var(--navy); font-size:16px;
}
.why-text h4{ color: var(--navy); font-size:17px; margin-bottom:6px; font-weight:600; }
.why-text p{ font-size:14.5px; color:#666; }


/* =========================================================
   8. PROCESS SECTION (4-step "How We Onboard" row)
   ========================================================= */
.process-row{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.process-step{
  padding:34px 26px;
  border-right:1px solid var(--line);
  position:relative;
}
.process-step:last-child{ border-right:none; }
.process-step .step-num{
  font-family:'Oswald',sans-serif; font-size:42px; color: var(--grey);
  font-weight:700; line-height:1; margin-bottom:14px;
}
.process-step h4{ color: var(--navy); font-size:16px; margin-bottom:8px; font-weight:600; }
.process-step p{ font-size:14px; color:#666; }


/* =========================================================
   9. CONTACT SECTION (dark navy bottom section + form)
   ========================================================= */
.contact{ background: var(--navy); color: var(--cream); }
.contact .section-head h2{ color: var(--cream); }
.contact .section-head p{ color:#b8c0cc; }

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:start;
}
.contact-info p{ font-size:15px; color:#cfd6e0; margin-bottom:24px; line-height:1.8; }
.info-row{ display:flex; gap:14px; margin-bottom:18px; font-size:15px; }
.info-row .label{
  color: var(--orange); font-family:'Oswald',sans-serif;
  letter-spacing:1px; font-size:13px; min-width:110px; text-transform:uppercase;
}

.contact-form{ display:flex; flex-direction:column; gap:14px; }

/* Honeypot field - hidden from real visitors, bots still see/fill it */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
}
.contact-form input,
.contact-form textarea{
  background:transparent;
  border:1px solid #44536b;
  padding:14px 16px;
  color: var(--cream);
  font-family:'Inter',sans-serif;
  font-size:14px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:#8a96aa; }
.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid var(--orange);
  border-color: var(--orange);
}
.contact-form button{
  margin-top:6px;
  background: var(--orange);
  color: var(--navy);
  border:none;
  padding:15px;
  font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:2px;
  text-transform:uppercase; font-weight:600; cursor:pointer; transition:.2s;
}
.contact-form button:hover{ background: var(--cream); }

/* Success / error message shown after form submit */
.form-status{
  margin-top:14px;
  padding:14px 16px;
  font-size:14px;
  display:none; /* hidden until script.js shows it */
}
.form-status.success{
  display:block;
  background: rgba(76,175,80,0.15);
  border:1px solid #4CAF50;
  color:#cdeed0;
}
.form-status.error{
  display:block;
  background: rgba(224,101,26,0.15);
  border:1px solid var(--orange);
  color:#ffd9c2;
}


/* =========================================================
   10. FOOTER (bottom copyright strip)
   ========================================================= */
footer{
  background: var(--graphite);
  color:#8a96aa;
  padding:26px 0;
  font-size:13px;
  text-align:center;
  letter-spacing:.5px;
}
footer span{ color: var(--orange); }