/* ============================================================
   site-ui.css
   Global UI polish overlay for Peterson Law Group website.
   Loads after style.css + responsive.css on every page.
   ============================================================ */

/* ── Smooth scrolling + font rendering ─────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM PRELOADER
   ══════════════════════════════════════════════════════════════ */
#preloader-active .preloader {
  background: linear-gradient(135deg, #0a1508 0%, #132a10 50%, #0d1f0b 100%) !important;
}

/* Center radial glow behind rings */
#preloader-active .preloader::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(200,230,201,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Outer ring — slow, reverse spin */
#preloader-active .preloader-inner {
  animation: preloaderFadeIn 0.6s ease-out both;
}
#preloader-active .preloader-inner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  margin-left: -60px;
  border: 1px solid rgba(200,230,201,0.15);
  border-top-color: rgba(200,230,201,0.5);
  border-radius: 50%;
  animation: preloaderSpinReverse 3s linear infinite;
  z-index: 5;
}

/* Inner ring — faster spin */
#preloader-active .preloader-inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  margin-left: -28px;
  border: 1px solid rgba(200,230,201,0.12);
  border-bottom-color: rgba(200,230,201,0.45);
  border-radius: 50%;
  animation: preloaderSpin 1.5s linear infinite;
  z-index: 5;
}

/* Main ring — refined styling */
#preloader-active .preloader-circle {
  width: 88px !important;
  height: 88px !important;
  border-width: 2px !important;
  border-top-color: #c8e6c9 !important;
  border-right-color: rgba(200,230,201,0.2) !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  background-color: transparent !important;
  box-shadow: 0 0 40px rgba(200,230,201,0.1), inset 0 0 40px rgba(200,230,201,0.05) !important;
  animation: preloaderSpin 1.8s linear infinite !important;
}

/* Logo with glow */
#preloader-active .preloader-img {
  z-index: 200 !important;
}
#preloader-active .preloader-img img {
  max-width: 48px !important;
  mix-blend-mode: screen;
  animation: preloaderPulse 2.5s ease-in-out infinite !important;
}

/* Horizontal accent line below loader */
#preloader-active .preloader-inner .preloader-img::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c8e6c9, transparent);
  margin: 18px auto 0;
  animation: preloaderLineGrow 1.2s ease-out 0.3s forwards;
  border-radius: 2px;
}

/* Keyframes */
@keyframes preloaderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes preloaderSpinReverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes preloaderPulse {
  0%, 100% { opacity: 0.7; transform: translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.06); }
}
@keyframes preloaderFadeIn {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes preloaderLineGrow {
  0% { width: 0; opacity: 0; }
  100% { width: 60px; opacity: 1; }
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* prevent horizontal scroll without clipping positioned children */
}

/* ── Responsive image safety net ───────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Accessibility: focus rings ─────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #0778b9;
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════
   HEADER & STICKY
   ══════════════════════════════════════════════════════════════ */

.header-area {
  transition: box-shadow 0.25s ease;
}
.header-sticky.sticky-bar.sticky {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.09) !important;
}

/* ── Free Consultation button polish ────────────────────────── */
.header-btn .btn,
.header-btn .red-btn {
  box-shadow: 0 2px 10px rgba(7, 120, 185, 0.22);
  transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.header-btn .btn:hover,
.header-btn .red-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(7, 120, 185, 0.36);
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION — smooth dropdowns & clickable parent links
   ══════════════════════════════════════════════════════════════ */

/* Prevent nav wrapping at intermediate desktop widths */
/* Force TOP-LEVEL nav items to stay on one line (not submenus) */
@media (min-width: 992px) {
  .header-area .main-menu > ul#navigation {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .header-area .main-menu > ul#navigation > li {
    display: inline-flex !important;
    flex-shrink: 1 !important;
    white-space: nowrap !important;
  }
  /* Submenus remain in normal block flow */
  .header-area .main-menu ul.submenu,
  .header-area .main-menu ul.submenu2 {
    display: block !important;
    white-space: normal !important;
  }
  .header-area .main-menu ul.submenu > li,
  .header-area .main-menu ul.submenu2 > li {
    display: block !important;
  }
}

/* CRITICAL FIX: Hide Free Consultation button to prevent nav wrapping */
/* Button hidden from 992px up to 1350px - nav needs this space */
@media (min-width: 992px) and (max-width: 1350px) {
  .header-area .header-btn,
  .header-area .col-xl-3 {
    display: none !important;
  }
  /* Allow nav column to expand into freed space */
  .header-area .col-xl-7 {
    flex: 1 1 auto !important;
    max-width: none !important;
  }
}

/* Light compression at medium-wide viewports */
@media (min-width: 992px) and (max-width: 1200px) {
  .header-area .main-menu ul li a {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 14.5px !important;
  }
}
/* More compression at tighter widths */
@media (min-width: 992px) and (max-width: 1050px) {
  .header-area .main-menu ul li a {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14px !important;
  }
  .header-area .col-xl-2 {
    flex: 0 0 auto !important;
    max-width: 180px !important;
  }
}

/* Chevron on parent items — rotates on hover */
.header-area .main-menu ul li.has-sub > a::after {
  content: ' ▾';
  font-size: 0.72em;
  opacity: 0.5;
  display: inline-block;
  transition: opacity 0.15s ease, transform 0.22s ease;
  transform-origin: center 60%;
}
.header-area .main-menu ul li.has-sub:hover > a::after {
  opacity: 1;
  transform: rotate(180deg);
}

/* ── Primary dropdown ───────────────────────────────────────── */
.header-area .main-menu ul ul.submenu {
  position: absolute !important;
  width: 230px !important;
  background: #fff !important;
  border-top: 3px solid #0778b9 !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 16px 40px rgba(11, 28, 57, 0.15), 0 2px 8px rgba(11, 28, 57, 0.06) !important;
  padding: 6px 0 10px !important;
  left: 0;
  top: 100% !important;
  /* Slide-down reveal */
  transform: translateY(-10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s !important;
  z-index: 9999 !important;
}
.header-area ul > li:hover > ul.submenu {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s !important;
}

/* Wide variant for Practice Areas */
.header-area .main-menu ul ul.submenu.submenu--wide {
  width: 270px !important;
}

/* Section labels ("Litigation", "Family Law") */
.header-area .main-menu ul ul.submenu > li.submenu-header {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #9aa4b8 !important;
  padding: 12px 18px 3px !important;
  cursor: default !important;
  pointer-events: none !important;
  display: block !important;
  margin-left: 0 !important;
  line-height: 1 !important;
}

/* Divider lines between groups */
.header-area .main-menu ul ul.submenu > li.submenu-divider {
  height: 1px !important;
  background: #eaeef5 !important;
  margin: 6px 16px !important;
  padding: 0 !important;
  display: block !important;
  margin-left: 16px !important;
}

/* Regular dropdown items */
.header-area .main-menu ul ul.submenu > li {
  margin-left: 0 !important;
  display: block !important;
}
.header-area .main-menu ul ul.submenu > li > a {
  padding: 9px 18px !important;
  font-size: 0.875rem !important;
  color: #2d3748 !important;
  display: block !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  transition: background 0.12s ease, color 0.12s ease, padding-left 0.15s ease !important;
}
.header-area .main-menu ul ul.submenu > li > a:hover {
  background: #f4f7fc !important;
  color: #0778b9 !important;
  padding-left: 24px !important;
}

/* Denied Claim Review nav highlight */
.header-area .main-menu ul li a.nav-denied-link {
  color: #c0392b !important;
  font-weight: 700 !important;
}
.header-area .main-menu ul li a.nav-denied-link:hover {
  color: #a93226 !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE NAV — full overhaul for ≤ 991px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Force logo + hamburger onto ONE row ─────────────────── */
  /* Bootstrap stacks col-md-1 to full-width at xs; we override */
  .header-area .container-fluid {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .header-area .row {
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 64px;
  }

  /* Logo column: shrink to content width */
  .header-area .col-xl-2,
  .header-area .col-lg-1,
  .header-area .col-md-1 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 15px !important;
    padding-right: 10px !important;
  }
  .header-area .logo img {
    height: 46px !important;
    width: auto !important;
    max-width: none !important;
    display: block;
  }

  /* Mobile menu col: take remaining space, push button right */
  .header-area .col-12 {
    flex: 1 1 0% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-right: 8px !important;
    position: static !important; /* prevent it being a containing block */
  }

  /* ── Hamburger button: in-flow, no negative tricks ────────── */
  .mobile_menu {
    position: static !important;
    transform: none !important;
    width: auto !important;
    overflow: visible !important;
    z-index: 9999 !important;
  }
  .slicknav_menu {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    overflow: visible !important;
  }
  .header-area .slicknav_btn,
  .slicknav_btn {
    position: static !important;
    display: block !important;
    float: none !important;
    top: auto !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    line-height: 1;
  }

  /* Hamburger bars */
  .slicknav_menu .slicknav_icon-bar {
    background-color: #234d20 !important;
    width: 26px !important;
    height: 3px !important;
    margin: 5px 0 !important;
    border-radius: 2px !important;
    display: block !important;
    transition: all 0.3s ease;
  }

  /* ── Nav dropdown: fixed below header, full viewport width ── */
  .slicknav_nav {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    background: #122611 !important;
    padding: 12px 0 24px !important;
    border-top: 3px solid #2e7d32 !important;
    box-shadow: 0 12px 32px rgba(13, 26, 11, 0.35) !important;
    z-index: 99999 !important;
    margin: 0 !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .slicknav_nav a {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 13px 24px !important;
    font-size: 0.95em !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
    transition: background 0.2s, color 0.2s, padding-left 0.2s;
    border-left: 3px solid transparent !important;
  }
  .slicknav_nav a:hover {
    background: rgba(200, 230, 201, 0.08) !important;
    color: #c8e6c9 !important;
    border-left: 3px solid #2e7d32 !important;
    padding-left: 28px !important;
    border-radius: 0 !important;
  }
  .slicknav_nav .slicknav_item a {
    padding: 0 !important;
    border-left: none !important;
  }
  .slicknav_nav .slicknav_item a:hover {
    border-left: none !important;
    padding-left: 0 !important;
  }
  .slicknav_nav ul {
    margin-left: 12px !important;
    border-left: 1px solid rgba(200, 230, 201, 0.12) !important;
  }
  .slicknav_nav .slicknav_arrow {
    color: #2e7d32 !important;
    font-size: 1.1rem !important;
    float: right !important;
    transition: transform 0.2s;
  }
  .slicknav_nav .slicknav_row:hover,
  .slicknav_nav .slicknav_row:hover .slicknav_arrow {
    background: rgba(200, 230, 201, 0.08) !important;
    color: #c8e6c9 !important;
    border-radius: 0 !important;
  }

  /* Hide section labels and dividers in mobile nav */
  .slicknav_nav .submenu-header,
  .slicknav_nav .submenu-divider {
    display: none !important;
  }

  /* Hide desktop-only header elements cleanly */
  .header-area .col-xl-7,
  .header-area .col-lg-8,
  .header-area .col-md-6,
  .header-area .col-xl-3,
  .header-area .col-lg-3.col-md-3 {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   LANDING HERO – RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* Tablet (below lg: 992px) — cards stack below text */
@media (max-width: 991px) {
  .dc-hero {
    min-height: auto !important;
    padding: 110px 0 60px !important;
  }
  .dc-hero-heading {
    font-size: 2.5rem !important;
  }
  .dc-hero-heading .dc-hero-subtitle {
    font-size: 2rem !important;
  }
  .dc-hero-desc {
    font-size: 1.1rem !important;
  }
  .dc-hero-cards-col {
    margin-top: 48px;
  }
  .dc-hero-svg,
  .dc-hero-badge {
    display: none !important;
  }
  .dc-hero-cards-grid {
    gap: 14px !important;
  }
}

/* Mobile (below md: 768px) */
@media (max-width: 767px) {
  .dc-hero {
    padding: 100px 0 48px !important;
  }
  .dc-hero-heading {
    font-size: 2rem !important;
    margin-bottom: 16px !important;
  }
  .dc-hero-heading .dc-hero-subtitle {
    font-size: 1.5rem !important;
  }
  .dc-hero-desc {
    font-size: 1rem !important;
    margin-bottom: 24px !important;
  }
  .dc-hero-cta {
    margin-bottom: 32px !important;
  }
  .dc-hero-cta .btn-dc-primary,
  .dc-hero-cta .btn-dc-ghost {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
  }
  .dc-hero-contact {
    gap: 20px !important;
    padding: 18px 0 !important;
  }
  .dc-hero-cards-col {
    margin-top: 36px;
  }
  .dc-hero-cards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .dc-hero-cards-grid > div {
    padding: 14px !important;
  }
  .dc-hero-cards-grid h4 {
    font-size: 0.9rem !important;
  }
  .dc-hero-cards-grid p {
    font-size: 0.75rem !important;
  }
  .dc-hero-cards-grid > div > div:first-child {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 8px !important;
  }
  .dc-hero-cards-grid > div > div:first-child svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Small mobile (below 480px) */
@media (max-width: 480px) {
  .dc-hero {
    padding: 90px 0 40px !important;
  }
  .dc-hero-heading {
    font-size: 1.6rem !important;
  }
  .dc-hero-heading .dc-hero-subtitle {
    font-size: 1.25rem !important;
  }
  .dc-hero-desc {
    font-size: 0.92rem !important;
  }
  .dc-hero-contact > div p:first-child {
    font-size: 0.75rem !important;
  }
  .dc-hero-contact a {
    font-size: 0.95rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   INNER PAGE HERO BANNER
   (.hero-cap used on all inner pages: attorneys, practice areas, etc.)
   Removes need for inline color styles on h1/h3.
   ══════════════════════════════════════════════════════════════ */

.hero-cap h1 {
  color: #fff !important;
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.hero-cap h2 {
  color: #fff !important;
}
.hero-cap h3 {
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding-top: 14px !important;
  margin-top: 6px !important;
  letter-spacing: 0.03em;
  text-transform: none !important;
}

/* Inner page banner minimum height */
.slider-height2 {
  min-height: 280px !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION TITLES
   ══════════════════════════════════════════════════════════════ */

.section-tittle h2,
.section-tittle-l h2,
.section-tittle-testi h2 {
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS — global hover improvements
   ══════════════════════════════════════════════════════════════ */

.red-btn {
  transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.red-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(7, 120, 185, 0.35);
}

.boxed-btn {
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.boxed-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(7, 120, 185, 0.3);
}

.btn {
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(7, 120, 185, 0.3);
}

/* ══════════════════════════════════════════════════════════════
   PRACTICE AREA CARDS
   ══════════════════════════════════════════════════════════════ */

.single-practice {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  border-radius: 6px;
  overflow: hidden;
}
.single-practice:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(11, 28, 57, 0.1);
}
.practice-caption2 {
  padding: 20px 22px 26px !important;
}
.practice-caption2 h4 {
  font-family: 'Playfair Display', serif;
  line-height: 1.3;
  font-size: 1.1rem;
}
.read-more1 {
  transition: color 0.15s, letter-spacing 0.15s;
}
.read-more1:hover {
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════════════════
   ATTORNEY PAGE
   ══════════════════════════════════════════════════════════════ */

/* Responsive attorney photos — override hardcoded 400x400px */
.generic-blockquote img {
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  border-radius: 6px;
  float: left;
  margin: 4px 28px 16px 0 !important;
  display: block;
  box-shadow: 0 4px 18px rgba(11, 28, 57, 0.12);
}
@media (max-width: 640px) {
  .generic-blockquote img {
    float: none !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
  }
}

/* Better attorney bio blockquote */
.generic-blockquote {
  background: #f8f9fc;
  border-left: 4px solid #0778b9;
  border-radius: 0 6px 6px 0;
  padding: 28px 32px 32px !important;
  line-height: 1.8;
  color: #3d4455;
  font-size: 0.97em;
  overflow: hidden; /* clear float */
}
@media (max-width: 767px) {
  .generic-blockquote {
    padding: 20px 18px 24px !important;
  }
}

/* Attorney section headers */
.section-top-border {
  padding-top: 40px;
  margin-bottom: 40px;
}
.section-top-border h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.65rem !important;
  color: #0b1c39;
  padding-bottom: 14px;
  border-bottom: 2px solid #e0e5ef;
  margin-bottom: 22px !important;
}

/* LinkedIn icon in attorney heading */
.section-top-border h3 img {
  width: 22px !important;
  height: auto !important;
  margin-left: 12px !important;
  vertical-align: middle;
  opacity: 0.75;
  transition: opacity 0.15s;
  float: none !important;
  max-width: 22px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.section-top-border h3 a:hover img {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   VICTORIES / TESTIMONIALS CAROUSEL
   ══════════════════════════════════════════════════════════════ */

.testimonial-top-cap p {
  line-height: 1.75;
  font-size: 0.97em;
}
.founder-img span {
  font-family: 'Playfair Display', serif;
  font-size: 1.05em !important;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════
   CONTACT FORM
   ══════════════════════════════════════════════════════════════ */

.contact-form input:focus,
.contact-form .nice-select:focus,
.contact-form textarea:focus {
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(7, 120, 185, 0.12) !important;
  outline: none;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER POLISH
   ══════════════════════════════════════════════════════════════ */

.footer-area .footer-pera p {
  line-height: 1.75;
  font-size: 0.94em;
  color: #8fa898;
}
.footer-pera2 h3 {
  font-size: 1.05em !important;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.footer-pera2 h5 {
  font-size: 0.9em !important;
  margin-top: 8px;
  color: #7a9484 !important;
}
.footer-pera2 p {
  font-size: 0.9em;
  color: #7a9484;
  line-height: 1.6;
}
.footer-bottom-area p {
  font-size: 0.82em !important;
  color: #6a8474;
  line-height: 1.6;
}
.footer-bottom-area a {
  color: #8fbf91 !important;
  text-decoration: none;
  transition: color 0.15s;
}
.footer-bottom-area a:hover {
  color: #c8e6c9 !important;
  text-decoration: none;
}

/* Footer office grid responsive */
@media (max-width: 767px) {
  .footer-tittle div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .footer-tittle div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ABOUT SECTION
   ══════════════════════════════════════════════════════════════ */

.about-caption p {
  line-height: 1.8;
  font-size: 0.98em;
}

/* ══════════════════════════════════════════════════════════════
   TABS (Practice Areas on homepage)
   ══════════════════════════════════════════════════════════════ */

.recent-case-area .nav-tabs .nav-link {
  transition: color 0.15s, border-color 0.15s;
  font-size: 0.95rem;
  padding: 10px 18px;
  font-weight: 500;
}
.recent-case-area .nav-tabs .nav-link:hover {
  color: #0778b9;
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE SLIDER — mobile layout fixes
   ══════════════════════════════════════════════════════════════ */

/* Force background images to persist across viewport changes */
.single-slider[data-background] {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* Mobile: prevent button collision with bottom bar */
@media (max-width: 767px) {
  .slider-area .hero__caption {
    padding-bottom: 140px !important; /* space for bottom bar + margin */
  }
  .slider-area .hero__caption h1 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }
  .slider-area .hero__caption p {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
  }
  /* Stack buttons vertically on small screens */
  .slider-area .hero__caption .btn {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
  }
  /* Bottom bar: reduce height, adjust positioning */
  .slider-area .slider-bottom {
    padding: 18px 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .slider-area .slider-bottom .slider-bottom-cap {
    width: auto !important;
    text-align: center !important;
  }
  .slider-area .slider-bottom .slider-bottom-cap p {
    font-size: 0.85rem !important;
    margin-bottom: 2px !important;
  }
  .slider-area .slider-bottom .slider-bottom-cap span {
    font-size: 1.1rem !important;
  }
}

@media (max-width: 480px) {
  .slider-area .hero__caption h1 {
    font-size: 1.5rem !important;
  }
  .slider-area .hero__caption p {
    font-size: 0.95rem !important;
  }
  .slider-area .hero__caption {
    padding-bottom: 130px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE FIXES
   ══════════════════════════════════════════════════════════════ */

/* Tighter section padding on mobile */
@media (max-width: 767px) {
  .services-details.section-padding2 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .hero-cap h1 {
    font-size: 2rem !important;
  }
  .hero-cap h3 {
    font-size: 0.95rem !important;
  }
}

/* overflow-x:hidden is on body (above) — do NOT add it to container-fluid
   as that clips absolutely-positioned children like the mobile nav button */

/* ══════════════════════════════════════════════════════════════
   VICTORIES PAGE — responsive
   ══════════════════════════════════════════════════════════════ */

/* Result cards — hover lift */
.victories-result-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.victories-result-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(11,28,57,0.14) !important;
}

/* Tablet */
@media (max-width: 991px) {
  .victories-headline {
    font-size: 1.6rem !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .victories-headline {
    font-size: 1.3rem !important;
    line-height: 1.5 !important;
  }
  .victories-category-header div:first-child {
    font-size: 0.78rem !important;
    padding: 6px 12px !important;
  }
  .victories-result-card {
    padding: 18px 20px !important;
  }
  .victories-result-card h4 {
    font-size: 1.1rem !important;
  }
  .victories-result-card p {
    font-size: 0.92rem !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .victories-headline {
    font-size: 1.15rem !important;
  }
  .victories-result-card {
    padding: 16px 16px !important;
  }
  .victories-result-card h4 {
    font-size: 1rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL MOBILE — iPhone Safari safe areas & touch targets
   ══════════════════════════════════════════════════════════════ */

/* Respect safe areas on iPhone X+ (notch, home indicator) */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer-bottom-area {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .slicknav_nav {
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

/* Ensure touch targets are at least 44px (Apple HIG) */
@media (max-width: 991px) {
  .slicknav_nav a {
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
  .dc-card,
  .victories-result-card {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Prevent text size adjustment on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Smooth momentum scrolling on iOS */
.slicknav_nav,
main {
  -webkit-overflow-scrolling: touch;
}

/* dc-section padding responsive */
@media (max-width: 767px) {
  .dc-section {
    padding: 40px 0 !important;
  }
}
@media (max-width: 480px) {
  .dc-section {
    padding: 32px 0 !important;
  }
}