/* ═══════════════════════════════════════════════════
   full-truck-load.css — Total Cargo Express
   Page: Full Truck Load Services in Delhi
   Self-contained. No dependency on old Elementor/plugin CSS.

   Brand palette (pulled from the site's own theme file):
   --dark   #1b1b1b   (header/footer/dark sections)
   --gold   #f7c600   (brand accent)
   --gray   #5b5b5b   (secondary text)
   --line   #dfdfdf   (borders)
   Font: Sarabun (matches theme's original font-family)

   TABLE OF CONTENTS
   1. Reset & base
   2. Buttons
   3. Top bar
   4. Header / nav
   5. Hero
   6. Section shell + services grid
   7. Why choose (dark section)
   8. Areas we serve
   9. How it works (steps)
   10. FTL vs LTL table
   11. Testimonials
   12. FAQ accordion
   13. Final CTA
   14. Footer
   15. Media queries
═══════════════════════════════════════════════════ */

/* 1. RESET & BASE ─────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --dark: #1b1b1b;
  --dark-2: #262626;
  --gold: #f7c600;
  --gray: #5b5b5b;
  --muted: #7a7a7a;
  --line: #e4e4e4;
  --bg-alt: #f7f7f8;
  --radius: 14px;
}

body {
  font-family: 'Sarabun', sans-serif;
  color: #262626;
  line-height: 1.7;
  font-size: 16px;
  background: #fff;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
h1, h2, h3, h4 { font-weight: 700; color: var(--dark); line-height: 1.25; }

.tc-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.tc-container--narrow { max-width: 860px; }

.tc-sec { padding: 50px 0; }
.tc-sec--alt { background: var(--bg-alt); }
.tc-sec--dark { background: var(--dark); }

.tc-sec-head { text-align: center; margin: 0 auto 46px; }
.tc-sec-head--light h2 { color: #fff; }
.tc-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: 10px;
}
.tc-sec-head h2 { font-size: clamp(26px, 3.4vw, 36px);margin:0px !important }

/* 2. BUTTONS ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border: 2px solid transparent;
}
.btn-lg { padding: 15px 32px; font-size: 16px; }
.btn-gold {
  background: var(--gold);
  color: var(--dark);
  box-shadow: 0 8px 20px rgba(247,198,0,.35);
}
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(247, 198, 0, .45);
    color: #fff;
}
.btn-outline {
  border-color: var(--dark);
  color: var(--dark);
}
.btn-outline:hover { background: var(--dark); color: #fff; }
.btn-outline-light {
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.btn-outline-light:hover { background: #fff; color: var(--dark); }

/* 3. TOP BAR ──────────────────────────────────────── */
.tc-topbar { background: var(--dark); color: #cfcfcf; font-size: 13.5px; }
.tc-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 24px;
  flex-wrap: wrap;
  gap: 8px;
}
.tc-topbar-left { display: flex; gap: 22px; flex-wrap: wrap; }
.tc-topbar a:hover { color: var(--gold); }
.tc-topbar i { color: var(--gold); margin-right: 5px; }

/* 4. HEADER / NAV ─────────────────────────────────── */
.tc-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.tc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 20px;
}
.tc-logo img { height: 42px; width: auto; }

.tc-nav ul { display: flex; gap: 8px; align-items: center; }
.tc-nav > ul > li { position: relative; }
.tc-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 15px;
  color: var(--dark);
  border-radius: 6px;
  transition: color .15s ease;
}
.tc-nav > ul > li > a:hover { color: var(--gold); }
.tc-nav .fa-chevron-down { font-size: 10px; opacity: .6; }

.tc-drop {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
  min-width: 220px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .15s ease;
}
.has-drop:hover .tc-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.tc-drop li a { display: block; padding: 10px 12px; border-radius: 6px; font-size: 14.5px; color: var(--dark); }
.tc-drop li a:hover { background: var(--bg-alt); color: var(--gold); }

.tc-header-cta { flex-shrink: 0; }
.tc-burger {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--dark);
  cursor: pointer;
}

/* 5. HERO (v2 — dark premium, centered, background image + overlay) */
.tc-hero-v2 {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* min-height: 640px; */
    padding: 80px 0 80px;
    isolation: isolate;
}
.tc-hero-v2-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.tc-hero-v2-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-hero-v2-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,15,15,.88) 0%, rgba(15,15,15,.80) 45%, rgba(15,15,15,.94) 100%);
}
.tc-hero-v2-glow {
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 480px;
  background: radial-gradient(closest-side, rgba(247,198,0,.35), transparent 70%);
  filter: blur(30px);
  z-index: -1;
  animation: tcGlowPulse 6s ease-in-out infinite;
}
@keyframes tcGlowPulse {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: .9;  transform: translateX(-50%) scale(1.08); }
}

.tc-hero-v2-inner {
/*  max-width: 780px;*/
  margin: 0 auto;
  padding: 0 24px;
}
.tc-eyebrow--light {
  color: var(--gold);
  background: rgba(247,198,0,.10);
  border: 1px solid rgba(247,198,0,.35);
  padding: 7px 18px;
  border-radius: 999px;
}
.tc-hero-v2 h1 {
  color: #fff;
  font-size: clamp(32px, 5.4vw, 54px);
  line-height: 1.18;
  margin: 20px 0 18px;
}
.tc-hero-v2 h1 span { color: var(--gold); }
.tc-hero-v2 p {
  color: rgba(255,255,255,.78);
  font-size: 17.5px;
  max-width: 600px;
  margin: 0 auto 34px;
}
.tc-hero-v2-icons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 38px;
}
.tc-hero-v2-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  padding: 10px 18px;
  border-radius: 999px;
}
.tc-hero-v2-icon i { color: var(--gold); }
.tc-hero-v2-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* subtle staggered fade-up entrance animation */
.tc-fade-up {
  opacity: 0;
  transform: translateY(18px);
  animation: tcFadeUp .7s ease forwards;
}
.tc-fade-up--d1 { animation-delay: .08s; }
.tc-fade-up--d2 { animation-delay: .16s; }
.tc-fade-up--d3 { animation-delay: .24s; }
.tc-fade-up--d4 { animation-delay: .32s; }
@keyframes tcFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* 6. SERVICES GRID ────────────────────────────────── */
.tc-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.tc-services-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tc-services-grid--4 { grid-template-columns: repeat(2, 1fr); }

/* NEW — centers an incomplete last row (e.g. 5 cards in a 3-col grid).
   Add this class alongside .tc-services-grid on that section's grid div:
   <div class="tc-services-grid tc-services-grid--center-last"> */
.tc-services-grid--center-last {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.tc-services-grid--center-last > .tc-service-card {
  flex: 0 1 calc((100% - 52px) / 3); /* 3 per row, 26px gap */
  min-width: 260px;
}
@media (max-width: 1024px) {
  .tc-services-grid--center-last > .tc-service-card { flex: 0 1 calc((100% - 26px) / 2); }
}
@media (max-width: 640px) {
  .tc-services-grid--center-last > .tc-service-card { flex: 0 1 100%; }
}
.tc-service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tc-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  border-color: transparent;
}
.tc-service-ic {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #fff6d8;
  color: #b58900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}
.tc-service-card h3 { font-size: 18px; margin-bottom: 10px; }
.tc-service-card p { color: var(--gray); font-size: 15px; }

/* NEW — sec-sub-text helper (used under some section headings) */
.tc-sec-sub-text { margin-top: 14px; color: var(--gray); font-size: 16px; }
.tc-sec-sub-text--light { color: rgba(255,255,255,.7); }

/* NEW — overview split (text + quote card), used on dedicated-truck-hire-india.html */
.tc-overview-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 54px;
  align-items: start;
}
.tc-overview-text p { color: var(--gray); font-size: 15.5px; margin: 16px 0; line-height: 1.8; }
.tc-overview-quote { position: relative; }
.tc-overview-quote img { border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,.14);height: 450px}
.tc-overview-quote-box {
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 30px 28px;
  margin-top: -40px;
  margin-left: 24px;
  margin-right: 24px;
  position: relative;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.tc-overview-quote-box i { color: var(--gold); font-size: 22px; margin-bottom: 10px; }
.tc-overview-quote-box p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.88); }
.tc-overview-quote-box strong { color: var(--gold); }

/* NEW — coverage section (image left, text right), used on dedicated-truck-hire-india.html */
.tc-coverage-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 50px;
  align-items: center;
}
.tc-coverage-img img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.14);
}
.tc-coverage-text p { color: var(--gray); font-size: 15.5px; margin: 14px 0; line-height: 1.8; }

/* NEW — fleet options (image cards), used on dedicated-truck-hire-india.html */
.tc-fleet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tc-fleet-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tc-fleet-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.tc-fleet-img { position: relative; height: 180px; overflow: hidden; }
.tc-fleet-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tc-fleet-card:hover .tc-fleet-img img { transform: scale(1.06); }
.tc-fleet-badge {
  position: absolute; bottom: 12px; left: 12px;
  background: var(--gold); color: var(--dark);
  font-size: 12.5px; font-weight: 800;
  padding: 5px 12px; border-radius: 999px;
}
.tc-fleet-card h3 { font-size: 17px; margin: 20px 24px 8px; }
.tc-fleet-card p { color: var(--gray); font-size: 14.5px; margin: 0 24px 22px; line-height: 1.6; }

/* 7. WHY CHOOSE (dark) ────────────────────────────── */
.tc-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.tc-why-card {
  background: var(--dark-2);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
}
.tc-why-num {
  display: block;
  font-size: 34px;
  font-weight: 800;
  color: var(--gold);
  opacity: .5;
  margin-bottom: 10px;
}
.tc-why-card h3 { color: #fff; font-size: 17px; margin-bottom: 8px; }
.tc-why-card p { color: #b8b8b8; font-size: 14.5px; }

/* 8. AREAS WE SERVE ───────────────────────────────── */
.tc-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.tc-areas span {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dark);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tc-areas span:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); }

/* 9. HOW IT WORKS (steps) ─────────────────────────── */
.tc-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.new_gir {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tc-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
}
.tc-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--gold);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.tc-step h3 { font-size: 16px; margin-bottom: 8px; }
.tc-step p { font-size: 14px; color: var(--gray); }

/* 10. FTL vs LTL TABLE (dark, modern, rounded, hover rows) */
.tc-table-wrap { overflow-x: auto; }
.tc-table-wrap--dark { overflow-x: visible; }
.tc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 640px;
}
.tc-table th, .tc-table td {
  padding: 16px 22px;
  text-align: left;
  font-size: 14.5px;
}
.tc-table thead th {
  background: var(--dark);
  color: #fff;
  font-weight: 700;
}
.tc-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.tc-table tbody td:first-child { font-weight: 700; }
.tc-table-note {
  margin-top: 22px;
  text-align: center;
  color: var(--gray);
  font-size: 14.5px;
}
.tc-table-note strong { color: var(--dark); }
.tc-table-note--dark { color: rgba(255,255,255,.65); }
.tc-table-note--dark strong { color: var(--gold); }

/* dark variant */
.tc-table--dark {
  min-width: 0;
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.tc-table--dark thead th {
  background: rgba(247,198,0,.12);
  color: var(--gold);
  font-size: 13.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(247,198,0,.2);
}
.tc-table--dark tbody tr { transition: background .2s ease, transform .2s ease; }
.tc-table--dark tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
.tc-table--dark tbody tr:hover { background: rgba(247,198,0,.08); transform: scale(1.008); }
.tc-table--dark tbody td { color: rgba(255,255,255,.82); border-bottom: 1px solid rgba(255,255,255,.06); }
.tc-table--dark tbody tr:last-child td { border-bottom: none; }
.tc-table--dark tbody td:first-child { color: #fff; }

/* 11. TESTIMONIALS (3-column grid) ────────────────── */
.tc-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.tc-testimonial-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tc-testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.10); }
.tc-testimonial-card i.fa-quote-left { color: var(--gold); font-size: 22px; margin-bottom: 14px; }
.tc-testimonial-stars { color: var(--gold); font-size: 13px; margin-bottom: 14px; }
.tc-testimonial-stars i { margin-right: 2px; }
.tc-testimonial-card p { font-size: 15px; color: var(--gray); font-style: italic; margin-bottom: 18px; line-height: 1.65; }
.tc-testimonial-card h4 { font-size: 15.5px; }
.tc-testimonial-card span { font-size: 13px; color: var(--muted); }

/* 12. FAQ (2-column layout, 5 + 5) ────────────────── */
.tc-faq--cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.tc-faq-col { display: flex; flex-direction: column; }

.tc-faq-item {
  border-bottom: 1px solid var(--line);
  transition: background .2s ease;
  border-radius: 8px;
}
.tc-faq-item:hover { background: var(--bg-alt); }
.tc-faq-item.open { background: #fff9e6; border-bottom-color: rgba(247,198,0,.4); }
.tc-faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 20px 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: inherit;
}
.tc-faq-q i {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: transform .25s ease, background .25s ease;
}
.tc-faq-item.open .tc-faq-q i { transform: rotate(45deg); background: var(--gold); color: var(--dark); }
.tc-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.tc-faq-item.open .tc-faq-a { max-height: 300px; }
.tc-faq-a p { padding: 0 14px 20px 14px; color: var(--gray); font-size: 15px; line-height: 1.7; }

/* 13. FINAL CTA ───────────────────────────────────── */
.tc-cta {
  background: var(--dark);
  padding: 70px 0;
  text-align: center;
}
.tc-cta h2 { color: #fff; font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 12px; margin-top:0px }
.tc-cta p { color: #b8b8b8; margin-bottom: 30px; }
.tc-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.qodef-h4, h4 {
    margin: 25px 0 5px;
}

/* 14. FOOTER ──────────────────────────────────────── */
.tc-footer { background: var(--dark-2); color: #cfcfcf; padding-top: 60px; }
.tc-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.tc-footer-logo { height: 40px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.tc-footer-about p { font-size: 14.5px; margin-bottom: 12px; color: #b8b8b8; }
.tc-footer-about p a i { color: var(--gold); margin-right: 6px; }
.tc-footer h5 { color: #fff; font-size: 15px; margin-bottom: 18px; }
.tc-footer-col ul li { margin-bottom: 10px; }
.tc-footer-col ul li a { font-size: 14.5px; color: #b8b8b8; }
.tc-footer-col ul li a:hover { color: var(--gold); }
.tc-social { display: flex; gap: 12px; margin-top: 16px; }
.tc-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.tc-social a:hover { background: var(--gold); color: var(--dark); }
.tc-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; }
.tc-footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: #999;
}
.tc-footer-bottom-inner a:hover { color: var(--gold); }

h2.new-css {
    font-size: 38px;
}

/* 15. MEDIA QUERIES ───────────────────────────────── */
@media (max-width: 1024px) {
  .tc-nav { position: fixed; top: 0; right: -100%; height: 100vh; width: 280px; background: #fff; flex-direction: column; padding: 90px 24px 24px; transition: right .25s ease; box-shadow: -10px 0 30px rgba(0,0,0,.15); overflow-y: auto; }
  .tc-nav.open { right: 0; }
  .tc-nav ul { flex-direction: column; align-items: flex-start; width: 100%; }
  .tc-nav > ul > li { width: 100%; }
  .tc-drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; display: none; margin-top: 4px; }
  .has-drop.open .tc-drop { display: block; }
  .tc-burger { display: block; }
  .tc-header-cta { display: none; }

  .tc-hero-inner { grid-template-columns: 1fr; }
  .tc-hero-visual { order: -1; }
  .tc-services-grid, .tc-why-grid, .tc-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .tc-steps { grid-template-columns: repeat(3, 1fr); }
  .tc-footer-grid { grid-template-columns: 1fr 1fr; }

  .tc-hero-v2 { min-height: 0; padding: 40px 0 40px; }
  .tc-faq--cols { grid-template-columns: 1fr; }

  /* NEW — for dedicated-truck-hire-india.html sections */
  .tc-overview-grid { grid-template-columns: 1fr; gap: 34px; }
  .tc-overview-quote-box { margin-left: 0; margin-right: 0; }
  .tc-services-grid--3, .tc-services-grid--4, .tc-fleet-grid { grid-template-columns: repeat(2, 1fr); }
  .tc-coverage-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 640px) {
  .tc-topbar-left { display: none; }
  .tc-services-grid, .tc-why-grid, .tc-steps, .tc-testimonial-grid { grid-template-columns: 1fr; }
  .tc-hero-cta, .tc-cta-btns { flex-direction: column; }
  .tc-hero-cta .btn, .tc-cta-btns .btn { width: 100%; justify-content: center; }
  .tc-footer-grid { grid-template-columns: 1fr; }

  .tc-hero-v2-cta { flex-direction: column; width: 100%; }
  .tc-hero-v2-cta .btn { width: 100%; justify-content: center; }
  .tc-hero-v2-icons { gap: 10px; }
  .tc-hero-v2 h1 { font-size: 30px; }

  /* FTL vs LTL table → stacked cards, no horizontal scroll */
  .tc-table-wrap--dark { overflow-x: visible; }
  .tc-table--dark, .tc-table--dark thead, .tc-table--dark tbody, .tc-table--dark th, .tc-table--dark td, .tc-table--dark tr {
    display: block;
    width: 100%;
  }
  .tc-table--dark { min-width: 0; }
  .tc-table--dark thead { display: none; }
  .tc-table--dark tbody tr {
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    padding: 6px 4px;
  }
  .tc-table--dark tbody tr:hover { transform: none; }
  .tc-table--dark td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    text-align: right;
  }
  .tc-table--dark td:last-child { border-bottom: none; }
  .tc-table--dark td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--gold);
    text-align: left;
    flex-shrink: 0;
  }

  .tc-testimonial-card { padding: 30px 22px; }

  .tc-service-card, .tc-why-card, .tc-step {
    padding: 15px 15px;
}

.tc-areas span {
    width: 100%;
}

table td {
    border-right: 0px solid #a6a6a6;
}

.tc-sec, .tc-cta {
    padding: 30px 0;
}


.tc-why-card h3 {
    margin-top: 0px;
}

  /* NEW — for dedicated-truck-hire-india.html sections */
  .tc-services-grid--3, .tc-services-grid--4, .tc-fleet-grid { grid-template-columns: 1fr; }
  .tc-overview-quote-box { margin-top: -24px; }

  .tc-overview-quote img {
    height: auto;
}

h2.new-css {
    font-size: 26px;
}

}