/* Home page — new SEO content sections added 2026-09-22 (does not touch existing site CSS) */
/* Reused on other pages too once they link this stylesheet (e.g. website-designing-company-india.php) — see master guidelines §19.1 */

/* two-column paired sections (design/development, wordpress/responsive, seo/redesign) */
.ti-pair-section .ti-section-desc { text-align: left; max-width: none; margin: 10px 0 0; }
.ti-pair-section .col-lg-6:nth-child(2) { border-left: 1px solid var(--ti-border); padding-left: 40px; }
.ti-pair-section .col-lg-6:nth-child(1) { padding-right: 40px; }
/* The 6 mandi/city pages (Azadpur, Dwarka, Kamla Nagar, Laxmi Nagar, Mukherjee
   Nagar, Saket) use col-md-12 + col-md-12 for this same pair-section (widened
   from col-md-6 for the "Typical projects" full-width ask) instead of the
   col-lg-6 + col-lg-6 pattern above, so the col-lg-6 rules never matched
   them -- once both columns went full-width and stacked, there was nothing
   giving the two headings/blocks any vertical separation at all. Adds the
   same divider-line treatment the col-lg-6 pages already get at mobile
   widths, just vertically instead of horizontally. */
.ti-pair-section .col-md-12.gsap-reveal + .col-md-12.gsap-reveal {
  border-top: 1px solid var(--ti-border);
  padding-top: 28px;
  margin-top: 20px;
}
/* Round 43: the 15 remaining location-based-services pages (14 col-lg-6
   "DESIGN/DEVELOPMENT"-style pair-sections, plus website-designing-company-india.php's
   3 pair-sections) were also widened from col-lg-6/col-md-6 to col-lg-12/col-md-12 --
   same reasoning as the col-md-12 rule above, so the same divider needs a matching
   selector for the col-lg-12 class name. */
.ti-pair-section .col-lg-12.gsap-reveal + .col-lg-12.gsap-reveal {
  border-top: 1px solid var(--ti-border);
  padding-top: 28px;
  margin-top: 20px;
}
@media (max-width: 991px) {
  .ti-pair-section .col-lg-6:nth-child(2) { border-left: none; border-top: 1px solid var(--ti-border); padding-top: 28px; margin-top: 8px; padding-left: 15px; }
  .ti-pair-section .col-lg-6:nth-child(1) { padding-right: 15px; }
}

/* "types of website" chip grid */
.ti-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 34px;
  align-items: stretch;
}
.ti-type-card {
  background: var(--ti-light-bg);
  border: 1px solid var(--ti-border);
  border-top: 3px solid transparent;
  border-radius: var(--ti-radius);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ti-text);
  transition: var(--ti-transition);
}
.ti-type-card:hover {
  box-shadow: var(--ti-shadow-hover);
  border-color: var(--ti-accent);
  border-top-color: var(--ti-accent);
  transform: translateY(-4px);
}
.ti-type-card strong { display: block; color: var(--ti-heading); font-size: 15.5px; margin-bottom: 3px; }
.ti-type-card a { color: var(--ti-accent); text-decoration: none; }
.ti-type-card a:hover { color: var(--ti-accent-dark); text-decoration: underline; }

/* category cards that hold a heading + a nested link list (website-designing-company-india.php) */
.ti-type-card h3 {
  color: var(--ti-heading);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ti-border);
}
.ti-type-card ul { list-style: none; margin: 0; padding: 0; }
.ti-type-card ul li { margin-bottom: 8px; padding-left: 16px; position: relative; }
.ti-type-card ul li:last-child { margin-bottom: 0; }
.ti-type-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ti-accent);
}

/* Round 40: compact "chip" redesign for .ti-type-card link-lists (location-based-services.php's
   "Browse by Region" grid, website-designing-company-in-delhi-ncr.php's "Types of Websites by
   Industry" grid). The plain bulleted <ul> above made cards with many links (e.g. "Delhi
   (Area-wise)" with 14 links) far taller than cards with only 1-4 links, and .ti-type-grid's
   align-items:stretch then stretched every card in that row to match the tallest one, leaving
   huge empty space in the short cards -- this is the "ek box bada dikh raha hai" bulkiness.
   Wrapping pill chips take far less vertical room per link (no own-line, no bullet dot), so a
   14-link card no longer dominates its row. Scoped to a new .ti-type-card-chips modifier so
   cards still using the original prose/bullet style (index.php, digital-marketing.php etc.)
   are completely untouched. */
.ti-type-card.ti-type-card-chips ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ti-type-card.ti-type-card-chips ul li {
  margin: 0;
  padding: 0;
}
.ti-type-card.ti-type-card-chips ul li::before {
  content: none;
}
.ti-type-card.ti-type-card-chips ul li a {
  display: inline-block;
  background: var(--ti-light-bg);
  border: 1px solid var(--ti-border);
  border-radius: 30px;
  padding: 7px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ti-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--ti-transition);
}
.ti-type-card.ti-type-card-chips ul li a:hover {
  background: var(--ti-accent);
  color: #fff;
  border-color: var(--ti-accent);
}
/* Ravi (2026-09-24): "font size 16px", "chota-bada sahi se arrange karo", "big list walo
   bottom mein dalo" -- chip font raised to a uniform 16px above, and this modifier lets the
   one oversized card in a .ti-type-grid row (14 links on location-based-services.php, 8 on
   the delhi-ncr industry grid) span the full row on its own instead of forcing align-items:
   stretch to blow up its short neighbors to match its height. Applied only to that one card's
   markup, so every other .ti-type-card everywhere else is untouched. */
.ti-type-card.ti-type-card-wide {
  grid-column: 1 / -1;
}
.ti-type-card.ti-type-card-wide ul {
  gap: 10px;
}

@media (max-width: 991px) { .ti-type-grid { grid-template-columns: repeat(2, 1fr); } }

/* "Types of Websites by Industry" (website-designing-company-india.php only) */
.servews-list.ti-type-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 575px) { .servews-list.ti-type-grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
  .ti-type-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .ti-type-card { padding: 14px 16px; font-size: 14px; }
}

/* This section's <ul> also carries the page's old (pre-redesign) .servews-list class
   alongside .ti-type-grid/.ti-type-card. That legacy CSS (style.css) still matches this exact
   markup and, because it uses more type selectors (ul.servews-list > li > ul > li etc.), wins
   the specificity fight over the .ti-type-card rules above for several properties -- including
   the reported bug, white nested-link text left over from the old design. Restated here at
   higher specificity (3 classes), scoped to this exact class + element combination, which
   exists on no other page/section -- so it cannot affect .servews-list or .ti-type-card
   anywhere they might be used separately. */
.servews-list.ti-type-grid {
  display: grid;
  grid-auto-rows: 1fr;
}
.servews-list.ti-type-grid > li.ti-type-card {
  flex: none;
  margin: 0;
  padding: 18px 20px;
  background: var(--ti-light-bg);
  border: 1px solid var(--ti-border);
  border-top: 3px solid transparent;
}
.servews-list.ti-type-grid > li.ti-type-card:hover {
  border-color: var(--ti-accent);
  border-top-color: var(--ti-accent);
}
.servews-list.ti-type-grid > li.ti-type-card > ul > li {
  color: var(--ti-text);
  text-align: left;
}
.servews-list.ti-type-grid > li.ti-type-card > ul > li > a {
  color: var(--ti-accent);
}

/* Last card (9th, the odd one out in a 2-column grid) spans the full row instead of
   leaving an empty half-row gap; its own link list splits into 2 columns to keep its
   height in line with the other cards once all rows are equalized above. */
.servews-list.ti-type-grid > li.ti-type-card:last-child {
  grid-column: 1 / -1;
}
.servews-list.ti-type-grid > li.ti-type-card:last-child > ul {
  columns: 2;
  column-gap: 24px;
}