:root {
  --color-primary-dark: #0B1F2A;
  --color-deep-navy: #102F3A;
  --color-primary: #176B5B;
  --color-primary-light: #2A8C75;
  --color-gold: #C9A45C;
  --color-gold-light: #E2C98A;
  --color-background: #F8F5EE;
  --color-surface: #F1EFE8;
  --color-white: #FFFFFF;
  --color-text: #17232A;
  --color-text-secondary: #66747A;
  --color-border: #D9DED9;
  --color-success: #176B5B;
}

/* Global Premium Palette Overrides */
body {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text) !important;
}

p, li, span, label {
  color: var(--color-text);
}

.text-muted, .subtitle, .meta, .desc, p.desc {
  color: var(--color-text-secondary) !important;
}

/* Header & Navigation */
header, .header-ditto, .main-header, .navbar {
  background-color: var(--color-white) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.nav-link, .nav-menu a {
  color: var(--color-text) !important;
}

.nav-link:hover, .nav-menu a:hover, .nav-link.active, .nav-menu a.active {
  color: var(--color-primary) !important;
}

/* Primary CTAs & Buttons */
.btn-primary, .cta-btn, .btn-submit, button[type="submit"], .hero-cta, .quote-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
  color: var(--color-white) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(23, 107, 91, 0.35) !important;
}

.btn-primary:hover, .cta-btn:hover, .btn-submit:hover, button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%) !important;
  box-shadow: 0 6px 20px rgba(23, 107, 91, 0.45) !important;
}

/* Secondary & Gold Buttons */
.btn-secondary, .btn-outline {
  border: 1.5px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: transparent !important;
}

.btn-secondary:hover, .btn-outline:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.btn-gold, .badge-gold, .accent-gold {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%) !important;
  color: var(--color-primary-dark) !important;
}

/* Rating Stars */
.star, .stars, .rating-stars, .fa-star, .star-rating {
  color: var(--color-gold) !important;
}

/* Dark Sections & Footer */
footer, .footer, .footer-ditto, .dark-section, .hero-overlay {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}

footer h1, footer h2, footer h3, footer h4, footer a, .footer a {
  color: var(--color-white) !important;
}

footer a:hover {
  color: var(--color-gold) !important;
}

/* Cards & Surfaces */
.card, .service-card, .testimonial-card, .faq-card, .feature-card, .area-link-card, .pricing-card {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 4px 18px rgba(11, 31, 42, 0.06) !important;
}

.card:hover, .service-card:hover, .faq-card:hover {
  border-color: var(--color-primary) !important;
}

/* Fixed Mobile Bottom Action Bar */
.fixed-mobile-bottom-bar {
  background: var(--color-primary-dark) !important;
  border-top: 2px solid var(--color-gold) !important;
}

.fixed-bar-btn.call-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
}

.fixed-bar-btn.wa-btn {
  background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
}


/*
 * Elite Home Packers & Movers — Ditto "Shifty" Premium Light Theme
 * Palette: Clean Off-White (#ffffff / #F8F5EE), Dark Charcoal (#0B1F2A), Vibrant Warm Orange (#176B5B)
 * Fonts: Outfit (Display & Headings) & Inter (UI & Body)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Colors */
  --bg-white: #ffffff;
  --bg-light: #F8F5EE;
  --bg-alt: #F1EFE8;
  --bg-dark: #0B1F2A;
  
  --accent-orange: #176B5B;
  --accent-orange-hover: #102F3A;
  --accent-orange-light: #fff3e0;
  
  --text-dark: #0B1F2A;
  --text-heading: #102F3A;
  --text-muted: #66747A;
  --text-subtle: #94a3b8;
  
  --border-light: #D9DED9;
  --border-dark: rgba(255, 255, 255, 0.1);
  
  /* Fonts */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Shadows */
  --shadow-sm: 0 4px 10px rgba(11, 31, 42, 0.03);
  --shadow-md: 0 10px 30px rgba(11, 31, 42, 0.06);
  --shadow-lg: 0 20px 50px rgba(11, 31, 42, 0.1);
  --shadow-orange: 0 10px 25px rgba(23, 107, 91, 0.3);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  
  --container-width: 1240px;
}

/* --- Reset & Core Layout --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  overflow-x: hidden;
  background-color: var(--bg-white);
}

body {
  font-family: var(--font-body);
  color: var(--text-heading);
  background-color: var(--bg-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, canvas, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-dark);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

p {
  color: var(--text-muted);
  font-size: 1.02rem;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.section-padding {
  padding: 90px 0;
}

/* --- Top Announcement Bar --- */
.top-announcement-bar {
  background: var(--bg-dark);
  color: #94a3b8;
  font-size: 0.85rem;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.announcement-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.announcement-text {
  color: #D9DED9;
  font-weight: 500;
}

.announcement-contact {
  display: flex;
  align-items: center;
  gap: 24px;
}

.announcement-contact a {
  color: #D9DED9;
  font-weight: 600;
}

.announcement-contact a:hover {
  color: var(--accent-orange);
}

/* --- Navigation Header --- */
.main-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999 !important;
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.main-header .container,
.main-header .header-container,
.header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 88px !important;
}

.logo-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-brand img {
  height: 95px;
  max-height: 105px;
  width: auto;
  object-fit: contain;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: #66747A;
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
}

.nav-link:hover, .nav-link.active {
  color: var(--accent-orange);
}

/* ══ FADE + SLIDE ANIMATED DROPDOWN MENU ══ */
.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px rgba(11, 31, 42, 0.12);
  border: 1px solid var(--border-light);
  padding: 10px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 1000;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  padding: 10px 20px;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: var(--accent-orange-light);
  color: var(--accent-orange);
  padding-left: 26px;
}

.btn-pill-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent-orange);
  color: var(--bg-white);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 26px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-orange);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-pill-orange:hover {
  background: var(--accent-orange-hover);
  transform: translateY(-2px);
}

.btn-pill-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-dark);
  color: var(--bg-white);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 26px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-pill-dark:hover {
  background: #102F3A;
  transform: translateY(-2px);
}

.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  color: var(--text-dark);
  cursor: pointer;
}

/* --- Hero Section Container (Ditto Reference) --- */
.hero-card-container {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: 20px;
  min-height: 540px;
  background: linear-gradient(90deg, rgba(11, 19, 43, 0.92) 0%, rgba(11, 19, 43, 0.65) 60%),
              url('assets/hero_moving_truck.webp') center/cover no-repeat;
  padding: 60px 60px;
  display: flex;
  align-items: center;
}

.hero-grid-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  width: 100%;
  align-items: center;
}

.hero-left-box {
  max-width: 600px;
}

.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: #176B5B;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 800;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
}

.hero-trust-badge i {
  color: #176B5B;
  font-size: 1rem;
}

.hero-main-title {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 900;
  color: var(--bg-white);
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-main-title span {
  color: var(--accent-orange);
}

.hero-sub-text {
  font-size: 1.1rem;
  color: #D9DED9;
  margin-bottom: 32px;
  line-height: 1.6;
}

.hero-buttons-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-call-circle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.15);
  color: var(--bg-white);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  font-weight: 700;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.btn-call-circle:hover {
  background: rgba(255,255,255,0.25);
}

.icon-circle-orange {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-white);
}

/* Floating Glass Quote Card Right (+30% Height Increase & Equal Spacing) */
.quote-card-glassmorphic {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 28px;
  padding: 54px 40px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.quote-card-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--bg-white);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.quote-card-sub {
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 24px;
  line-height: 1.4;
}

/* Hero Quote Form Flex layout with EXACT 22px equal gap between all fields */
#hero-quote-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-input-white {
  width: 100%;
  height: 54px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  color: var(--text-dark);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0; /* Equal 22px gap managed by #hero-quote-form */
  box-sizing: border-box;
  outline: none;
  transition: all 0.25s ease;
}

.form-input-white:focus {
  background: #ffffff;
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3.5px rgba(23, 107, 91, 0.25);
}

.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 0; /* Equal 22px gap managed by #hero-quote-form */
}

.form-row-2col .form-input-white {
  margin-bottom: 0;
}

.btn-submit-orange {
  width: 100%;
  height: 56px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #176B5B 0%, #102F3A 100%);
  color: var(--bg-white);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(23, 107, 91, 0.38);
  margin-top: 0; /* Equal 22px gap managed by #hero-quote-form */
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-submit-orange:hover {
  background: linear-gradient(135deg, #f4511e 0%, #d84315 100%);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(23, 107, 91, 0.48);
}

.btn-submit-orange:active {
  transform: translateY(0);
}

/* --- Section 2: Safe Moving Solutions (About & Stats) --- */
.safe-moving-header {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 50px;
}

.about-badge-small {
  display: inline-block;
  padding: 4px 14px;
  background: var(--accent-orange-light);
  color: var(--accent-orange);
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.safe-moving-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
}

.safe-moving-grid-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.visual-left-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.visual-left-photo img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.floating-badge-orange-circle {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: var(--bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  border: 3px solid var(--bg-white);
  z-index: 5;
}

.floating-badge-orange-circle h3 {
  font-size: 2rem;
  color: var(--bg-white);
  line-height: 1;
}

.floating-badge-orange-circle p {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.1;
  margin-top: 2px;
}

.stats-right-box {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.stat-item-block .stat-num-big {
  font-size: 3rem;
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-item-block h4 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 6px;
}

/* --- Section 3: Why Clients Trust Us --- */
.trust-grid-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.trust-features-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}

.trust-feature-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.trust-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-orange-light);
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-feature-content h4 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.trust-photo-right {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.trust-photo-right img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.badge-badge-15k {
  position: absolute;
  bottom: 40px;
  right: 40px;
  background: var(--accent-orange);
  color: var(--bg-white);
  padding: 16px 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-orange);
  border: 3px solid var(--bg-white);
}

.badge-badge-15k h3 {
  font-size: 1.8rem;
  color: var(--bg-white);
  line-height: 1;
}

.badge-badge-15k p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.1;
}

/* --- Section 4: Simple & Organized Moving Process (Dark Container) --- */
.dark-process-wrapper {
  background: var(--bg-dark);
  border-radius: var(--radius-xl);
  padding: 80px 60px;
  color: var(--bg-white);
}

.dark-process-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px auto;
}

.dark-process-header h2 {
  font-size: 2.6rem;
  color: var(--bg-white);
  margin-bottom: 12px;
}

.process-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.process-step-card {
  background: var(--bg-white);
  color: var(--text-dark);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  position: relative;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.process-step-card:hover {
  transform: translateY(-8px);
}

.step-num-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.2rem;
  margin-bottom: 24px;
}

.process-step-card h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 10px;
}

/* --- Section 5: Moments from Our Moving Projects (Gallery) --- */
.moments-grid-6col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.moment-card-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 260px;
  position: relative;
}

.moment-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.moment-card-photo:hover img {
  transform: scale(1.08);
}

/* --- Site Footer High-Contrast Bright Text & Clean Desktop 5-Col Grid --- */
.site-footer-ditto,
.site-footer {
  background: #0b132b !important;
  color: #D9DED9 !important;
  padding-top: 70px !important;
  padding-bottom: 40px !important;
  margin-top: 80px !important;
}

.site-footer-ditto p,
.site-footer p,
.footer-desc-text {
  color: #D9DED9 !important;
  line-height: 1.6 !important;
}

.footer-grid-4col,
.footer-top-grid {
  display: grid !important;
  grid-template-columns: 2.2fr 1fr 1fr 1.1fr 1.2fr !important;
  gap: 32px !important;
  margin-bottom: 50px !important;
}

.footer-col h4,
.footer-col-header {
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
}

.footer-col ul,
.footer-links-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-col ul li,
.footer-links-list li {
  margin-bottom: 10px !important;
}

.footer-col ul li a,
.footer-links-list li a {
  color: #D9DED9 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

.footer-col ul li a:hover,
.footer-links-list li a:hover {
  color: var(--accent-orange, #176B5B) !important;
}

.footer-logo-brand img,
.footer-logo-img {
  height: 54px !important;
  max-width: 200px !important;
  object-fit: contain !important;
  display: block !important;
  margin-bottom: 14px !important;
  background: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
}

.footer-social-circles {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.footer-circle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.footer-circle:hover {
  background: #176B5B !important;
  transform: translateY(-2px) !important;
}

.footer-bottom-ditto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.88rem;
  color: #94a3b8 !important;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all 0.25s ease;
  text-decoration: none;
}

.footer-social a:hover {
  background: #176B5B;
  color: #ffffff;
  transform: translateY(-3px);
}

/* 🌟 Universal Dark Background High Contrast Text Safeguard */
.dark-section p,
.dark-process-wrapper p,
div[style*="background: linear-gradient(135deg, #0b132b"] p,
div[style*="background: #0b132b"] p,
div[style*="background: var(--bg-dark)"] p {
  color: #D9DED9 !important;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .hero-grid-split, .safe-moving-header, .safe-moving-grid-visual, .trust-grid-split {
    grid-template-columns: 1fr;
  }
  
  .process-steps-grid, .moments-grid-6col {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-grid-4col {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .announcement-flex {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  
@media (max-width: 991px) {
  .nav-menu {
    display: none !important;
  }

  .nav-menu.active {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 70px) !important;
    background: #ffffff !important;
    padding: 20px 16px 30px 16px !important;
    gap: 10px !important;
    z-index: 1000000 !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    box-shadow: 0 20px 50px rgba(11, 19, 43, 0.25) !important;
    border-bottom: 4px solid #176B5B !important;
  }

  .nav-menu.active .nav-link {
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    color: #0b132b !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1.5px solid #D9DED9 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
    text-decoration: none !important;
    pointer-events: auto !important;
  }

  .nav-menu.active .nav-link:active {
    background: #F8F5EE !important;
    border-color: #176B5B !important;
  }

  /* Expanded Submenu Container */
  .nav-menu.active .nav-dropdown.active .dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1.5px solid #176B5B !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    margin-top: 6px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    box-shadow: 0 6px 20px rgba(11, 123, 62, 0.08) !important;
  }

  /* Submenu Dropdown Items */
  .nav-menu.active .dropdown-item {
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #102F3A !important;
    border-radius: 8px !important;
    display: block !important;
    text-decoration: none !important;
    pointer-events: auto !important;
  }

  .nav-menu.active .dropdown-item:active,
  .nav-menu.active .dropdown-item:hover {
    background: rgba(11, 123, 62, 0.08) !important;
    color: #176B5B !important;
  }
  
  .mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: rgba(23, 107, 91, 0.1) !important;
    border: 1.5px solid rgba(23, 107, 91, 0.3) !important;
    color: #176B5B !important;
    font-size: 1.25rem !important;
    cursor: pointer !important;
  }
}

  .nav-menu.active .dropdown-item:active,
  .nav-menu.active .dropdown-item:hover {
    background: #F8F5EE !important;
  }

  .mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: rgba(23, 107, 91, 0.1) !important;
    border: 1.5px solid rgba(23, 107, 91, 0.3) !important;
    color: #176B5B !important;
    font-size: 1.25rem !important;
    cursor: pointer !important;
  }
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 19, 43, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Must stay BELOW .main-header's z-index (1000). .nav-menu lives inside
     <header>, and .main-header (position: sticky + z-index) creates its own
     stacking context — so no z-index on .nav-menu can ever paint above this
     backdrop while the backdrop's z-index beats the header's. That mismatch
     (this used to be 999998) is what made the open mobile menu render
     underneath the dark blurred backdrop instead of on top of it. 500 is
     still well above all normal page content (max z-index elsewhere is 12)
     but below the header's 1000/1001, so the header (and the menu inside
     it) now stacks correctly above the dimmed background. */
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-nav-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
  
  .hero-card-container {
    padding: 40px 24px;
  }
  
  .process-steps-grid, .moments-grid-6col {
    grid-template-columns: 1fr;
  }
  
  .dark-process-wrapper {
    padding: 50px 24px;
  }
  
  .footer-grid-4col {
    grid-template-columns: 1fr;
  }
}

/* ══ PREMIUM ENQUIRY FORM POPUP MODAL ══ */
dialog#globalQuoteModal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  background: transparent;
  max-width: 540px;
  width: 92%;
  box-shadow: 0 25px 60px rgba(11, 31, 42, 0.4);
  margin: auto;
}

dialog#globalQuoteModal::backdrop {
  background: rgba(11, 31, 42, 0.7);
  backdrop-filter: blur(8px);
}

.popup-modal-inner {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
}

.popup-close-btn, .ehpm-x {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s ease;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.popup-close-btn:hover, .ehpm-x:hover {
  color: var(--accent-orange);
}

/* ══ SERVICES MASTER GRID 3-COLUMNS ══ */
.services-grid-3col {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
}

.service-card-ditto {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-card-ditto:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-orange);
}

@media (max-width: 992px) {
  .services-grid-3col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .services-grid-3col {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE DESIGN (< 768px & < 480px)
   CRITICAL RULE: DESKTOP (>= 768px) REMAINS 100% UNTOUCHED
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* 1. Global Reset & Overflow Containment */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
  }

  body {
    padding-bottom: 75px !important; /* Prevents bottom floating bar overlapping footer */
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. Top Announcement Bar Optimization */
  .top-announcement-bar {
    padding: 8px 12px !important;
  }

  .announcement-flex {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }

  .announcement-text {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }

  .announcement-contact {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .announcement-contact a {
    white-space: nowrap !important; /* Prevents phone number splitting across lines */
    font-size: 0.82rem !important;
  }

  /* 3. Header & Logo Responsive Scaling */
  .main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
    background: var(--bg-white) !important;
  }

  .header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120px;
}

  .logo-brand img {
  height: 95px;
  max-height: 105px;
  width: auto;
  object-fit: contain;
}

  .header-container .btn-pill-orange {
    padding: 8px 14px !important;
    font-size: 0.82rem !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 20px !important;
  }

  .header-container .btn-pill-orange span:last-child {
    display: none !important; /* Hide arrow on compact mobile header */
  }

  .mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.3rem !important;
    background: var(--bg-light) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-light) !important;
  }

  /* Slide-Down Mobile Navigation Menu */
  .nav-menu.active {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 68px) !important;
    overflow-y: auto !important;
    background: var(--bg-white) !important;
    padding: 24px 20px !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
    gap: 16px !important;
    z-index: 999 !important;
  }

  .nav-menu li {
    width: 100% !important;
  }

  .nav-link {
    display: block !important;
    padding: 10px 0 !important;
    font-size: 1.05rem !important;
    border-bottom: 1px solid var(--border-light) !important;
  }

  /* 4. Typography Scale System (<768px) */
  h1, .hero-title {
    font-size: clamp(1.85rem, 6vw, 2.2rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  h2 {
    font-size: clamp(1.5rem, 5vw, 1.8rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  h3 {
    font-size: clamp(1.2rem, 4vw, 1.4rem) !important;
    line-height: 1.35 !important;
  }

  h4 {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }

  p, .hero-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  /* 5. Section & Card Spacing (<768px) */
  .section-padding {
    padding: 44px 0 !important;
  }

  .hero-card-container {
    padding: 28px 20px !important;
    margin: 16px 0 !important;
    border-radius: var(--radius-lg) !important;
  }

  .hero-actions-group {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }

  .hero-actions-group .btn-pill-dark,
  .hero-actions-group .btn-pill-orange {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px !important; /* 48px touch target */
    padding: 14px 20px !important;
    box-sizing: border-box !important;
  }

  /* 6. Multi-Column Grids -> Single Column on Mobile */
  .grid-2col, .grid-3col, .grid-4col, 
  .services-grid-3col, .footer-grid-4col,
  .safe-moving-grid-visual, .trust-grid-split,
  .process-steps-grid, .moments-grid-6col {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .dark-process-wrapper {
    padding: 40px 16px !important;
    border-radius: var(--radius-md) !important;
  }

  .process-step-card {
    padding: 24px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 7. Form Inputs & Buttons (<768px) */
  .form-row-2col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .form-input-white, .btn-submit-orange {
    width: 100% !important;
    min-height: 48px !important; /* 48px Touch target */
    box-sizing: border-box !important;
  }

  dialog#globalQuoteModal {
    width: 95% !important;
    max-width: 95% !important;
  }

  .popup-modal-inner {
    padding: 28px 20px !important;
  }

  /* 8. Table & Image Responsiveness (<991px) */
  .table-scroll,
  .table-responsive,
  div[style*="overflow-x: auto"] {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 20px !important;
    border-radius: 12px !important;
  }

  table,
  .rate-table,
  .doc-table,
  .grade-table {
    display: table !important;
    width: 100% !important;
    min-width: 640px !important;
    border-collapse: collapse !important;
    white-space: normal !important;
  }

  table th, table td {
    white-space: nowrap !important;
  }

  div[style*="padding: 44px"],
  div[style*="padding: 40px"] {
    padding: 20px 14px !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 9. Floating Bottom Action Bar (<768px) */
  .floating-actions {
    position: fixed !important;
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    z-index: 1001 !important;
  }

  .float-btn {
    flex: 1 !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
  }
}

@media (max-width: 480px) {
  h1, .hero-title {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.45rem !important;
  }

  .hero-card-container {
    padding: 22px 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   FARMER'S DOG STYLE PREMIUM MINIMALIST UI (2ND SCREENSHOT INSPIRATION)
   ══════════════════════════════════════════════════════════════ */

/* Circular Minimalist Hamburger Button */
.mobile-toggle {
  display: none;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #F1EFE8 !important;
  border: 1px solid #D9DED9 !important;
  color: #0B1F2A !important;
  font-size: 1.1rem !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.mobile-toggle:hover {
  background: #D9DED9 !important;
  color: var(--accent-orange) !important;
}

/* Farmer's Dog Style Hero Card Overlay & Badges */
.hero-card-farmers-dog {
  background: #ffffff;
  border-radius: 28px;
  padding: 44px 40px;
  box-shadow: 0 20px 50px rgba(11, 31, 42, 0.08);
  border: 1px solid #F1EFE8;
}

.farmers-dog-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff5f2;
  color: var(--accent-orange);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.farmers-dog-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0B1F2A;
  line-height: 1.2;
  margin-bottom: 16px;
}

.farmers-dog-subtitle {
  font-size: 1.1rem;
  color: #66747A;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 560px;
}

.farmers-dog-btn-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-farmers-orange {
  background: #176B5B;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 25px rgba(23, 107, 91, 0.3);
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-farmers-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(23, 107, 91, 0.4);
}

.btn-farmers-outline {
  background: transparent;
  color: #0B1F2A;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 24px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #D9DED9;
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-farmers-outline:hover {
  background: #F8F5EE;
  border-color: #0B1F2A;
}

@media (max-width: 768px) {
  .header-container {
    height: 76px !important;
  }

  .logo-brand img {
    height: 56px !important;
    max-height: 62px !important;
  }

  .mobile-toggle {
    display: flex !important;
  }

  .hero-card-farmers-dog {
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }

  .farmers-dog-btn-group {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .btn-farmers-orange, .btn-farmers-outline {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   EXACT "FARMER'S DOG" MOBILE UI SPECIFICATIONS (< 768px)
   DESKTOP (>= 768px) REMAINS 100% UNTOUCHED
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Clean Canvas Background */
  body {
    background-color: #fbfbfd !important;
    color: #0B1F2A !important;
  }

  /* Header Bar - Farmer's Dog Style */
  .main-header {
    background: #ffffff !important;
    border-bottom: 1px solid #F1EFE8 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
  }

  .header-container {
    height: 72px !important;
    padding: 0 20px !important;
  }

  .logo-brand img {
    height: 52px !important;
    max-height: 56px !important;
  }

  /* Hide Header Free Quote Button on Mobile to match clean 2-element Top Bar (Logo Left, Circular Menu Right) */
  .header-container .btn-pill-orange {
    display: none !important;
  }

  /* Circular Hamburger Button */
  .mobile-toggle {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #F1EFE8 !important;
    border: 1px solid #D9DED9 !important;
    color: #0B1F2A !important;
    font-size: 1.15rem !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  }

  /* Hero Card & Typography (Exact Screenshot Match) */
  .hero-card-container {
    background: #ffffff !important;
    border-radius: 28px !important;
    padding: 32px 22px !important;
    margin: 16px 0 !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05) !important;
    border: 1px solid #F1EFE8 !important;
  }

  .hero-main-title {
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    color: #0B1F2A !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
  }

  .hero-main-title span {
    color: #176B5B !important;
  }

  .hero-sub-text {
    font-size: 1.02rem !important;
    color: #66747A !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }

  /* Buttons Row - Exact Match (Explore Services Pill + How It Works Link) */
  .hero-buttons-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  .btn-pill-dark {
    background: #176B5B !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 14px 28px !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(23, 107, 91, 0.28) !important;
    width: auto !important;
  }

  .btn-call-circle {
    background: transparent !important;
    color: #66747A !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 8px 12px !important;
    border-radius: 30px !important;
  }

  .icon-circle-orange {
    width: 32px !important;
    height: 32px !important;
    background: #176B5B !important;
    color: #ffffff !important;
    border-radius: 50% !important;
  }

  /* Glassmorphic Form Card on Mobile */
  .quote-card-glassmorphic {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 28px 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    border: 1px solid #F1EFE8 !important;
    margin-top: 24px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   MASTER AUDITED MOBILE-ONLY RESPONSIVE SUITE (< 768px & < 480px)
   DESKTOP (>= 768px) REMAINS 100% UNTOUCHED
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* 1. GLOBAL LAYOUT & ZERO OVERFLOW */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body {
    padding-bottom: 75px !important; /* Space for fixed bottom CTA bar */
    background-color: #fbfbfd !important;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .section-padding {
    padding: 40px 0 !important;
  }

  /* 2. HEADER & LOGO SCALING */
  .main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #F1EFE8 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
  }

  .header-container {
    height: 70px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .logo-brand img {
    height: 48px !important;
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .header-container .btn-pill-orange {
    display: none !important; /* Hidden on mobile header to preserve clean logo & circular hamburger menu */
  }

  .mobile-toggle {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #F1EFE8 !important;
    border: 1px solid #D9DED9 !important;
    color: #0B1F2A !important;
    font-size: 1.15rem !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  }

  /* 3. TYPOGRAPHY SCALING SYSTEM */
  h1, .hero-main-title {
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    color: #0B1F2A !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
  }

  h2 {
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  h3 {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  h4 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
  }

  p, .hero-sub-text {
    font-size: 0.98rem !important;
    color: #66747A !important;
    line-height: 1.65 !important;
  }

  /* 4. IMAGES & GALLERIES */
  img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  .gallery-grid, .moments-grid-6col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 5. CARDS & SERVICE GRIDS */
  .services-grid-3col, .grid-2col, .grid-3col, .grid-4col,
  .safe-moving-grid-visual, .trust-grid-split,
  .process-steps-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .service-card-ditto {
    padding: 24px 20px !important;
    border-radius: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-card-container {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 28px 20px !important;
    margin: 16px 0 !important;
    box-shadow: 0 10px 35px rgba(0,0,0,0.05) !important;
    border: 1px solid #F1EFE8 !important;
  }

  /* 6. FORMS & POPUPS (<768px) */
  .form-row-2col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .form-input-white, .btn-submit-orange {
    width: 100% !important;
    min-height: 48px !important; /* 48px Touch target */
    box-sizing: border-box !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
  }

  dialog#globalQuoteModal {
    width: 95% !important;
    max-width: 95% !important;
    margin: auto !important;
  }

  .popup-modal-inner {
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }

  /* 7. FOOTER MOBILIZATION - 40% Height Reduction & Neat 2-Column Grid */
  @media (max-width: 768px) {
    footer, .site-footer-ditto {
      padding: 16px 14px calc(var(--bottombar-h, 62px) + 10px) !important;
      font-size: 0.76rem !important;
      line-height: 1.35 !important;
    }

    .footer-grid-4col {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px 10px !important;
      align-items: start !important;
    }

    .footer-grid-4col > div:first-child,
    footer .footer-col:first-child {
      grid-column: 1 / -1 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      margin-bottom: 8px !important;
      width: 100% !important;
    }

    footer img, footer .footer-logo, footer .footer-logo-card {
      max-width: 196px !important;
      max-height: 88px !important;
      height: auto !important;
      padding: 8px 16px !important;
      border-radius: 12px !important;
      margin: 0 auto 10px !important;
      display: block !important;
    }

    footer p {
      font-size: 0.75rem !important;
      line-height: 1.35 !important;
      margin: 0 auto 6px !important;
      max-width: 320px !important;
      color: #D9DED9 !important;
      text-align: center !important;
    }

    footer .footer-col {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      text-align: left !important;
      width: 100% !important;
      margin: 0 !important;
    }

    footer h4 {
      font-size: 0.82rem !important;
      font-weight: 800 !important;
      margin: 0 0 6px !important;
      color: #ffffff !important;
      text-transform: uppercase !important;
      letter-spacing: 0.03em !important;
      text-align: left !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
      padding-bottom: 3px !important;
      width: 100% !important;
    }

    /* 2-Column Grid inside each section's list items! */
    footer .footer-col ul,
    footer ul {
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 4px 6px !important;
      width: 100% !important;
      text-align: left !important;
    }

    footer .footer-col li,
    footer li {
      margin: 0 !important;
      line-height: 1.35 !important;
      text-align: left !important;
    }

    footer .footer-col a,
    footer a {
      font-size: 0.73rem !important;
      line-height: 1.35 !important;
      color: #D9DED9 !important;
      text-decoration: none !important;
      display: block !important;
      padding: 1px 0 !important;
      text-align: left !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    footer .footer-social {
      padding: 10px 0 4px !important;
      gap: 10px !important;
      justify-content: center !important;
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
    }

    footer .footer-social a,
    .footer-social a {
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: rgba(255, 255, 255, 0.12) !important;
      color: #ffffff !important;
      font-size: 1rem !important;
      padding: 0 !important;
      margin: 0 !important;
      line-height: 1 !important;
      text-align: center !important;
    }

    footer .footer-social a i,
    .footer-social a i {
      display: inline-block !important;
      font-size: 1rem !important;
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1 !important;
      text-align: center !important;
    }

    footer .footer-bottom-ditto, footer .copyright {
      padding-top: 6px !important;
      margin-top: 6px !important;
      font-size: 0.70rem !important;
      border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
      text-align: center !important;
      color: #94a3b8 !important;
    }
  }

  /* 8. FLOATING CALL & WHATSAPP ACTION BAR */
  .floating-actions {
    position: fixed !important;
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    z-index: 1001 !important;
  }

  .float-btn {
    flex: 1 !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
  }
}

@media (max-width: 480px) {
  h1, .hero-main-title {
    font-size: 1.8rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★ MOBILE UI MASTER OVERRIDE — v802 (2026-08-06) ★★
   Single authoritative mobile layer. Appended LAST so it resolves the
   conflicts between the four earlier @media(max-width:768px) blocks that
   were each fighting over .logo-brand img with !important.
   Desktop (>= 769px) is completely untouched.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── 1. BIGGER, BOLDER LOGO (primary brand fix) ─────────────────────── */
  .main-header .header-container,
  .header-container {
    height: 84px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .logo-brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  /* Logo raised 48px -> 68px (+42% larger, fills the header properly) */
  .logo-brand img,
  .logo img,
  .logo-img {
    height: 68px !important;
    max-height: 68px !important;
    width: auto !important;
    max-width: 190px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* ─── 2. TOUCH TARGETS — WCAG 2.1 AA minimum 44x44px ─────────────────── */
  .mobile-toggle {
    display: flex !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 50% !important;
    background: #F1EFE8 !important;
    border: 1px solid #D9DED9 !important;
    color: #0B1F2A !important;
    font-size: 1.2rem !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
  }

  a.btn, button, .btn, .cta-call, .cta-wa,
  .btn-farmers-orange, .btn-farmers-outline, .btn-pill-orange {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
  }

  /* ─── 3. TYPOGRAPHY — consistent professional mobile scale ───────────── */
  h1, .hero-main-title { font-size: 1.95rem !important; line-height: 1.22 !important; letter-spacing: -0.02em !important; margin-bottom: 14px !important; }
  h2                   { font-size: 1.5rem  !important; line-height: 1.3  !important; margin-bottom: 12px !important; }
  h3                   { font-size: 1.2rem  !important; line-height: 1.35 !important; }
  h4                   { font-size: 1.05rem !important; }
  p, li                { font-size: 1rem    !important; line-height: 1.7  !important; }

  /* Kill oversized inline font-size on the GEO/AIO block headings */
  section h2[style*="2.2rem"] { font-size: 1.5rem !important; }

  /* ─── 4. IMAGES — never overflow, never distort ──────────────────────── */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  .logo-brand img, .logo img, .logo-img { height: 68px !important; } /* re-assert after generic rule */

  /* ─── 5. BUTTONS — full width stacking, even spacing ─────────────────── */
  .area-cta-bar {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 4px !important;
  }
  .area-cta-bar a { width: 100% !important; }

  /* ─── 6. GRIDS — single/two column, no cramped cards ─────────────────── */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .svc-pill      { font-size: 0.82rem !important; padding: 12px 8px !important; }

  /* GEO/AIO trust list was a rigid 2-col grid — stack it */
  section ul[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ─── 7. SPACING RHYTHM ──────────────────────────────────────────────── */
  .area-hero    { padding: 44px 18px 40px !important; }
  .area-content { padding: 34px 18px !important; }
  .area-content h2 { margin: 28px 0 10px !important; }
  section[style*="padding: 30px"] { padding: 22px 18px !important; }

  /* ─── 8. HERO STAT ROW — 2x2 grid instead of cramped single line ─────── */
  .area-hero > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 10px !important;
    max-width: 320px !important;
    margin: 26px auto 0 !important;
  }
  .area-hero > div:last-child > div > div:first-child { font-size: 1.45rem !important; }
  .area-hero > div:last-child > div > div:last-child  { font-size: 0.72rem !important; }

  /* ─── 9. FAQ + REVIEW CARDS ──────────────────────────────────────────── */
  .faq-q { font-size: 0.92rem !important; padding: 14px 16px !important; }
  .faq-a { font-size: 0.9rem  !important; padding: 14px 16px !important; }
  .review-box { padding: 16px 18px !important; }

  /* ─── 10. NEARBY TAGS — readable pills ───────────────────────────────── */
  .nearby-tag { font-size: 0.78rem !important; padding: 6px 12px !important; margin: 3px !important; }

  /* ─── 11. FLOATING WHATSAPP — clear of the bottom CTA bar ────────────── */
  a[href*="wa.me"][style*="position:fixed"] {
    bottom: 88px !important;
    right: 16px !important;
    width: 54px !important;
    height: 54px !important;
  }

  /* ─── 12. FOOTER ─────────────────────────────────────────────────────── */
  footer { padding: 20px 16px !important; font-size: 0.8rem !important; line-height: 1.7 !important; }

  /* ─── 13. NO HORIZONTAL SCROLL (belt & braces) ───────────────────────── */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  * { max-width: 100% !important; }
  .logo-brand img, .logo-img { max-width: 190px !important; }
}

/* ─── SMALL PHONES (<= 400px) — proportional step-down ─────────────────── */
@media (max-width: 400px) {
  .header-container { height: 76px !important; padding: 0 12px !important; }
  .logo-brand img, .logo img, .logo-img {
    height: 58px !important; max-height: 58px !important; max-width: 155px !important;
  }
  h1, .hero-main-title { font-size: 1.68rem !important; }
  h2 { font-size: 1.32rem !important; }
  .services-grid { grid-template-columns: 1fr !important; }
  .area-hero { padding: 36px 14px 32px !important; }
  .area-content { padding: 28px 14px !important; }
  .cta-call, .cta-wa { font-size: 0.92rem !important; padding: 13px 18px !important; }
}

/* ─── ACCESSIBILITY: respect reduced-motion preference ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   HERO HEIGHT COMPACT ADJUSTMENT & BADGE EDGE POSITIONING
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Compact Hero Height & Snug Padding */
  .hero-card-container {
    padding: 20px 16px !important;
    margin: 8px 0 !important;
    border-radius: 20px !important;
  }

  .hero-left-box {
    margin-bottom: 12px !important;
  }

  .hero-main-title {
    font-size: 1.75rem !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
  }

  .hero-sub-text {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }

  .hero-buttons-row {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .quote-card-glassmorphic {
    padding: 20px 16px !important;
    margin-top: 12px !important;
    border-radius: 18px !important;
  }

  .form-input-white {
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    font-size: 0.88rem !important;
  }

  /* 6+ Years Experience Badge Placed Right against the Top Corner Edge */
  .floating-badge-orange-circle {
    top: 8px !important;
    left: 8px !important;
    width: 72px !important;
    height: 72px !important;
    border: 2px solid #ffffff !important;
  }

  .floating-badge-orange-circle h3 {
    font-size: 1.2rem !important;
  }

  .floating-badge-orange-circle p {
    font-size: 0.56rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   GLOBAL MOBILE HEIGHT REDUCTION (30-40%) & COMPACT CARD LAYOUTS
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* 1. Global Section Height Reduction (30-40% Less Padding) */
  .section-padding {
    padding: 26px 0 !important;
  }

  /* 2. Dark Banners & CTA Sections Height Reduction (Screenshot 1 Fix) */
  .dark-process-wrapper, .service-cta-banner, .cta-banner-dark,
  div[style*="background: #0B1F2A"], div[style*="background: var(--bg-dark)"] {
    padding: 24px 16px !important;
    border-radius: 18px !important;
    margin: 12px 0 !important;
  }

  .dark-process-header {
    margin-bottom: 16px !important;
  }

  /* Compact Action Buttons in Banners */
  .dark-process-wrapper a, .dark-process-wrapper button,
  .service-cta-banner a, .service-cta-banner button {
    min-height: 42px !important;
    height: 42px !important;
    padding: 10px 18px !important;
    font-size: 0.88rem !important;
  }

  /* 3. Feature Cards Single-Column & Compact Height (Screenshot 2 Fix) */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  div[style*="border-left: 4px solid"] {
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }

  div[style*="border-left: 4px solid"] h4 {
    font-size: 0.98rem !important;
    margin-bottom: 3px !important;
    line-height: 1.3 !important;
  }

  div[style*="border-left: 4px solid"] p {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
  }

  /* 4. Compact Icon Sizing & Spacing Adjustments */
  .trust-icon-box, .service-icon, .feature-icon-circle {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.05rem !important;
    margin-bottom: 8px !important;
  }

  div[style*="padding: 30px 24px"],
  div[style*="padding: 32px 28px"] {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  /* 5. Clean Single-Line Button Labels */
  .btn-call-circle span, .btn-pill-orange span {
    white-space: nowrap !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   3RD IMAGE COMPLETE MOBILE DESIGN SYSTEM (< 768px)
   DESKTOP (>= 768px) REMAINS 100% UNTOUCHED
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* 1. Global Reset & Off-white Canvas */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    background-color: #F8F5EE !important;
    color: #0B1F2A !important;
  }

  body {
    padding-bottom: 56px !important; /* Dual bottom fixed bar space */
  }

  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .section-padding {
    padding: 22px 0 !important;
  }

  /* 2. Top Announcement Bar (Green Top Bar + Split Contact Bar) */
  .top-announcement-bar {
    background: #0B1F2A !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
  }

  .sub-contact-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #D9DED9 !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    font-size: 0.8rem !important;
    color: #0B1F2A !important;
  }

  .sub-contact-bar a {
    color: #0B1F2A !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .sub-contact-bar i {
    color: #0B1F2A !important;
  }

  /* 3. Header Bar */
  .main-header {
    background: #ffffff !important;
    border-bottom: 1px solid #D9DED9 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .header-container {
    height: 64px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .logo-brand img {
    height: 44px !important;
    max-height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .mobile-toggle {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #D9DED9 !important;
    color: #0B1F2A !important;
    font-size: 1.15rem !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
  }

  /* 4. Green Pill Badge & Hero Titles */
  .badge-pill-green {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #e8f5e9 !important;
    color: #0B1F2A !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
    border: 1px solid #c8e6c9 !important;
  }

  .badge-pill-orange {
    display: inline-block !important;
    background: #176B5B !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
  }

  .hero-main-title {
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    color: #0B1F2A !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.02em !important;
  }

  .hero-main-title span {
    color: #0B1F2A !important;
  }

  .hero-sub-text {
    font-size: 0.95rem !important;
    color: #66747A !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
  }

  /* 5. Hero Buttons Row (Green Pill + Call White Pill) */
  .hero-buttons-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .btn-pill-dark {
    background: #0B1F2A !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 12px 22px !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(14, 62, 35, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .btn-call-circle {
    background: #ffffff !important;
    color: #0B1F2A !important;
    border: 1px solid #0B1F2A !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 11px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .icon-circle-orange {
    width: 28px !important;
    height: 28px !important;
    background: #0B1F2A !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 6. Dark Emerald Service Page Hero Card */
  .hero-card-dark-emerald {
    background: linear-gradient(145deg, #0B1F2A, #072514) !important;
    color: #ffffff !important;
    border-radius: 24px !important;
    padding: 26px 18px !important;
    text-align: center !important;
    margin: 14px 0 !important;
    box-shadow: 0 15px 35px rgba(7, 37, 20, 0.3) !important;
  }

  .hero-card-dark-emerald h1 {
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  .hero-card-dark-emerald h1 span {
    color: #176B5B !important;
  }

  .hero-card-dark-emerald p {
    color: #D9DED9 !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }

  /* 7. 4-Grid Trust Features (White Card) */
  .trust-4grid-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 16px 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
    border: 1px solid #D9DED9 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    text-align: center !important;
    margin: 16px 0 !important;
  }

  .trust-4grid-item i {
    font-size: 1.4rem !important;
    color: #0B1F2A !important;
    margin-bottom: 6px !important;
  }

  .trust-4grid-item h5 {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #0B1F2A !important;
    line-height: 1.2 !important;
  }

  /* 8. Green Instant Fare Banner Card */
  .green-fare-banner {
    background: #0B1F2A !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #ffffff !important;
    margin: 16px 0 !important;
    box-shadow: 0 8px 24px rgba(14, 62, 35, 0.25) !important;
  }

  .green-fare-banner-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .green-fare-banner-left i {
    font-size: 1.8rem !important;
    color: #ffffff !important;
  }

  .green-fare-banner-left p {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
  }

  .btn-get-estimate-white {
    background: #ffffff !important;
    color: #0B1F2A !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  }

  /* 9. Feature Cards with Green Left Border */
  div[style*="border-left: 4px solid"], .green-left-border-card {
    background: #ffffff !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border-left: 4px solid #0B1F2A !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
    margin-bottom: 10px !important;
  }

  div[style*="border-left: 4px solid"] h4, .green-left-border-card h4 {
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    color: #0B1F2A !important;
    margin-bottom: 4px !important;
  }

  div[style*="border-left: 4px solid"] p, .green-left-border-card p {
    font-size: 0.84rem !important;
    color: #66747A !important;
    line-height: 1.45 !important;
  }

  /* 10. Numbered Step Cards (STEP 1, STEP 2, STEP 3, STEP 4) */
  .step-badge-orange {
    display: inline-block !important;
    background: #176B5B !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
  }

  .step-card-box {
    background: #ffffff !important;
    border: 1px solid #D9DED9 !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  }

  /* 11. Pricing Tariff Table Card */
  .pricing-table-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #D9DED9 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
    margin: 16px 0 !important;
  }

  .pricing-table-header {
    background: #0B1F2A !important;
    color: #ffffff !important;
    padding: 14px 16px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .pricing-table-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #F1EFE8 !important;
    font-size: 0.88rem !important;
  }

  .pricing-table-row:nth-child(even) {
    background: #F8F5EE !important;
  }

  .pricing-table-row span:first-child {
    font-weight: 700 !important;
    color: #0B1F2A !important;
  }

  .pricing-table-row span:last-child {
    font-weight: 800 !important;
    color: #176B5B !important;
  }

  /* 12. FIXED DUAL BOTTOM ACTION BAR (50/50 Green Call / Orange WhatsApp) */
  .floating-actions, .fixed-bottom-dual-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    height: 52px !important;
    z-index: 1001 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .btn-dual-call {
    flex: 1 !important;
    background: #0B1F2A !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    height: 52px !important;
  }

  .btn-dual-whatsapp {
    flex: 1 !important;
    background: #176B5B !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    height: 52px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   EXACT 9-SCREEN MOBILE UI & SLIDE-DOWN DRAWER MENU SYSTEM (< 768px)
   DESKTOP (>= 768px) REMAINS 100% UNTOUCHED
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* 1. Canvas & Reset */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    background-color: #F8F5EE !important;
    color: #0B1F2A !important;
  }

  body {
    padding-bottom: 52px !important; /* Bottom dual bar height */
  }

  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. Top Green Announcement Bar & Sub-Contact Header */
  .top-announcement-bar {
    background: #0B1F2A !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
  }

  .sub-contact-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #D9DED9 !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    font-size: 0.8rem !important;
  }

  .sub-contact-bar a {
    color: #0B1F2A !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .sub-contact-bar i {
    color: #0B1F2A !important;
  }

  /* 3. Header & Slide-Down Drawer Menu (Screen 9) */
  .main-header {
    background: #ffffff !important;
    border-bottom: 1px solid #D9DED9 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .header-container {
    height: 64px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .logo-brand img {
    height: 44px !important;
    max-height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .mobile-toggle {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #D9DED9 !important;
    color: #0B1F2A !important;
    font-size: 1.15rem !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
  }

  /* Screen 9 Slide-Down Drawer Menu */
  .nav-menu.active {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 64px !important;
    right: 14px !important;
    width: 260px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
    padding: 16px !important;
    gap: 10px !important;
    border: 1px solid #D9DED9 !important;
    z-index: 9999 !important;
  }

  .nav-menu.active li {
    width: 100% !important;
  }

  .nav-menu.active a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #0B1F2A !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    transition: background 0.2s ease !important;
  }

  .nav-menu.active a:hover {
    background: #F1EFE8 !important;
  }

  /* 4. Badges (Green & Orange) */
  .badge-pill-green {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #e8f5e9 !important;
    color: #0B1F2A !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
    border: 1px solid #c8e6c9 !important;
  }

  .badge-pill-orange {
    display: inline-block !important;
    background: #176B5B !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
  }

  /* 5. Typography Scale (<768px) */
  h1, .hero-main-title {
    font-size: 2.05rem !important;
    font-weight: 800 !important;
    color: #0B1F2A !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.02em !important;
  }

  h1 span, .hero-main-title span {
    color: #176B5B !important;
  }

  h2 {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    color: #0B1F2A !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  /* 6. Screen 2 & 8 Dark Emerald Cards */
  .hero-card-dark-emerald {
    background: linear-gradient(145deg, #0B1F2A, #072514) !important;
    color: #ffffff !important;
    border-radius: 24px !important;
    padding: 26px 18px !important;
    text-align: center !important;
    margin: 14px 0 !important;
    box-shadow: 0 15px 35px rgba(7, 37, 20, 0.3) !important;
  }

  .hero-card-dark-emerald h1 {
    font-size: 2.05rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  .hero-card-dark-emerald h1 span {
    color: #176B5B !important;
  }

  .hero-card-dark-emerald p {
    color: #D9DED9 !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }

  /* 7. Screen 1 4-Grid Trust Card */
  .trust-4grid-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 16px 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
    border: 1px solid #D9DED9 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    text-align: center !important;
    margin: 16px 0 !important;
  }

  .trust-4grid-item i {
    font-size: 1.4rem !important;
    color: #0B1F2A !important;
    margin-bottom: 6px !important;
  }

  .trust-4grid-item h5 {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #0B1F2A !important;
    line-height: 1.2 !important;
  }

  /* 8. Screen 1 & 2 Green Instant Fare Banner */
  .green-fare-banner {
    background: #0B1F2A !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #ffffff !important;
    margin: 16px 0 !important;
    box-shadow: 0 8px 24px rgba(14, 62, 35, 0.25) !important;
  }

  .green-fare-banner-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .green-fare-banner-left i {
    font-size: 1.8rem !important;
    color: #ffffff !important;
  }

  .green-fare-banner-left p {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
  }

  .btn-get-estimate-white {
    background: #ffffff !important;
    color: #0B1F2A !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  }

  /* 9. Screen 3 Green Left-Border Feature Cards */
  div[style*="border-left: 4px solid"], .green-left-border-card {
    background: #ffffff !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    border-left: 4px solid #0B1F2A !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    margin-bottom: 12px !important;
  }

  div[style*="border-left: 4px solid"] h4, .green-left-border-card h4 {
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    color: #0B1F2A !important;
    margin-bottom: 4px !important;
  }

  div[style*="border-left: 4px solid"] p, .green-left-border-card p {
    font-size: 0.84rem !important;
    color: #66747A !important;
    line-height: 1.45 !important;
  }

  /* 10. Screen 5 Numbered Step Cards (STEP 1, STEP 2, STEP 3, STEP 4) */
  .step-badge-orange {
    display: inline-block !important;
    background: #176B5B !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
  }

  .step-card-box {
    background: #ffffff !important;
    border: 1px solid #D9DED9 !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  }

  /* 11. Screen 6 Pricing Tariff Table Card */
  .pricing-table-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #D9DED9 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
    margin: 16px 0 !important;
  }

  .pricing-table-header {
    background: #0B1F2A !important;
    color: #ffffff !important;
    padding: 14px 16px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .pricing-table-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #F1EFE8 !important;
    font-size: 0.88rem !important;
  }

  .pricing-table-row:nth-child(even) {
    background: #F8F5EE !important;
  }

  .pricing-table-row span:first-child {
    font-weight: 700 !important;
    color: #0B1F2A !important;
  }

  .pricing-table-row span:last-child {
    font-weight: 800 !important;
    color: #176B5B !important;
  }

  /* 12. FIXED DUAL BOTTOM STICKY BAR (50/50 Green Call / Orange WhatsApp) */
  .floating-actions, .fixed-bottom-dual-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    height: 52px !important;
    z-index: 1001 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .btn-dual-call {
    flex: 1 !important;
    background: #0B1F2A !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    height: 52px !important;
  }

  .btn-dual-whatsapp {
    flex: 1 !important;
    background: #176B5B !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    height: 52px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   GLOBAL DYNAMIC FLUID RESPONSIVE SYSTEM (320px to 4K Ultra Wide)
   AUTOMATICALLY ADJUSTS EVERYTHING WITHOUT CROPPING OR OVERFLOW
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box !important;
}

html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

img, video, iframe, svg, canvas {
  max-width: 100% !important;
  height: auto !important;
}

p, span, h1, h2, h3, h4, h5, h6, a, li, td, th {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

/* Fluid Responsive Typography Scale */
h1 {
  font-size: clamp(1.85rem, 4vw + 1rem, 3.2rem) !important;
}

h2 {
  font-size: clamp(1.5rem, 3vw + 0.8rem, 2.6rem) !important;
}

h3 {
  font-size: clamp(1.25rem, 2.5vw + 0.5rem, 1.8rem) !important;
}

h4 {
  font-size: clamp(1.05rem, 1.5vw + 0.4rem, 1.35rem) !important;
}

/* Dynamic Grid Auto-Fit for smooth responsiveness across all screen sizes */
@media (max-width: 768px) {
  .hero-card-container, .dark-process-wrapper, .service-cta-banner,
  .quote-card-glassmorphic, .service-card-ditto {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   EXACT 2ND IMAGE HERO UI & PROMINENT HEADER LOGO (< 768px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Prominent Logo & Header Scaling */
  .header-container {
    height: 72px !important;
    padding: 0 16px !important;
  }

  .logo-brand img {
    height: 52px !important;
    max-height: 56px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .mobile-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #D9DED9 !important;
    color: #0B1F2A !important;
    font-size: 1.2rem !important;
  }

  /* Exact Hero Title & Color Highlights */
  .hero-main-title {
    font-size: 2.15rem !important;
    font-weight: 800 !important;
    color: #0B1F2A !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.02em !important;
  }

  .hero-main-title span {
    color: #176B5B !important; /* Orange highlight for Moving Services */
  }

  .hero-sub-text {
    font-size: 0.96rem !important;
    color: #66747A !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }

  /* Buttons Row (Dark Green Pill + Call White Pill) */
  .hero-buttons-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  .btn-pill-dark {
    background: #0B1F2A !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 13px 26px !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(14, 62, 35, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
  }

  .btn-call-circle {
    background: #ffffff !important;
    color: #0B1F2A !important;
    border: 1.5px solid #0B1F2A !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 12px 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: fit-content !important;
  }

  .icon-circle-orange {
    width: 30px !important;
    height: 30px !important;
    background: #0B1F2A !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Instant Fare Estimate Glass Card */
  .quote-card-glassmorphic {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 24px 18px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    border: 1px solid #F1EFE8 !important;
    margin-top: 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   EXACT UPLOADED SCREENSHOT MOBILE HERO & SERVICES UI (< 768px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Green Top Announcement Bar */
  .top-announcement-bar {
    background: #0B1F2A !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
  }

  /* Sub-Contact Header Bar */
  .sub-contact-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #D9DED9 !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    font-size: 0.8rem !important;
  }

  .sub-contact-bar a {
    color: #0B1F2A !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .sub-contact-bar i {
    color: #0B1F2A !important;
  }

  /* Main Header & Prominent Logo */
  .main-header {
    background: #ffffff !important;
    border-bottom: 1px solid #D9DED9 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .header-container {
    height: 66px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .logo-brand img {
    height: 46px !important;
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .mobile-toggle {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #D9DED9 !important;
    color: #0B1F2A !important;
    font-size: 1.15rem !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
  }

  /* Trusted Packers Green Pill Badge */
  .badge-pill-green {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #e8f5e9 !important;
    color: #0B1F2A !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
    border: 1px solid #c8e6c9 !important;
  }

  /* Hero Title & Green Color Highlight */
  .hero-main-title {
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    color: #0B1F2A !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.02em !important;
  }

  .hero-main-title span {
    color: #0B1F2A !important; /* Green highlight matching screenshot */
  }

  .hero-sub-text {
    font-size: 0.95rem !important;
    color: #66747A !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
  }

  /* Hero Buttons Row (Dark Green Pill + Call White Pill) */
  .hero-buttons-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .btn-pill-dark {
    background: #0B1F2A !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 12px 22px !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(14, 62, 35, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .btn-call-circle {
    background: #ffffff !important;
    color: #0B1F2A !important;
    border: 1px solid #0B1F2A !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 11px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .icon-circle-orange {
    width: 28px !important;
    height: 28px !important;
    background: #0B1F2A !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 4-Grid Trust Features Row */
  .trust-4grid-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 16px 10px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
    border: 1px solid #D9DED9 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    text-align: center !important;
    margin: 16px 0 !important;
  }

  .trust-4grid-item i {
    font-size: 1.4rem !important;
    color: #0B1F2A !important;
    margin-bottom: 6px !important;
  }

  .trust-4grid-item h5 {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #0B1F2A !important;
    line-height: 1.2 !important;
  }

  /* Green Instant Fare Banner Card */
  .green-fare-banner {
    background: #0B1F2A !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #ffffff !important;
    margin: 16px 0 !important;
    box-shadow: 0 8px 24px rgba(14, 62, 35, 0.25) !important;
  }

  .green-fare-banner-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .green-fare-banner-left i {
    font-size: 1.8rem !important;
    color: #ffffff !important;
  }

  .green-fare-banner-left p {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
  }

  .btn-get-estimate-white {
    background: #ffffff !important;
    color: #0B1F2A !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  }

  /* 50/50 Dual Fixed Bottom Bar */
  .floating-actions, .fixed-bottom-dual-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    height: 52px !important;
    z-index: 1001 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .btn-dual-call {
    flex: 1 !important;
    background: #0B1F2A !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    height: 52px !important;
  }

  .btn-dual-whatsapp {
    flex: 1 !important;
    background: #176B5B !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    height: 52px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   INTERACTIVE GALLERY LIGHTBOX & CARD OVERLAY ENHANCEMENTS
   ══════════════════════════════════════════════════════════════════════════ */
.moment-card-photo {
  border-radius: 18px;
  overflow: hidden;
  height: 260px;
  position: relative;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.moment-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.moment-card-photo:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(11, 123, 62, 0.35), 0 0 0 2px rgba(11, 123, 62, 0.25);
}

.moment-card-photo:hover img {
  transform: scale(1.08);
}

.moment-card-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 19, 43, 0) 35%, rgba(11, 19, 43, 0.75) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.moment-card-photo:hover::before {
  opacity: 1;
}

/* Full-Screen Executive Lightbox Modal */
.ehpm-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 19, 43, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ehpm-lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.ehpm-lightbox-backdrop {
  position: absolute;
  inset: 0;
}

.ehpm-lightbox-content {
  position: relative;
  z-index: 2;
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ehpm-lightbox-img-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ehpm-lightbox-img-wrapper img {
  max-width: 88vw;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  animation: ehpmLightboxPop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes ehpmLightboxPop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.ehpm-lightbox-caption {
  margin-top: 14px;
  color: #F8F5EE;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  background: rgba(11, 31, 42, 0.85);
  padding: 8px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.ehpm-lightbox-close {
  position: absolute;
  top: -48px;
  right: -10px;
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff !important;
  border: none;
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 12;
}

.ehpm-lightbox-close:hover {
  background: #e65100;
  transform: scale(1.1);
}

.ehpm-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff !important;
  border: none;
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.ehpm-lightbox-nav:hover {
  background: #176B5B;
  transform: translateY(-50%) scale(1.1);
}

.ehpm-lightbox-nav.prev { left: -65px; }
.ehpm-lightbox-nav.next { right: -65px; }



/* Master Transition Base: 3D Lift & Luxury Emerald/Orange Dual Glow setup */
.service-card-ditto,
.gallery-card,
.process-step-card,
.feature-card,
.price-card,
div[style*="border-radius: 18px"],
div[style*="border-radius: 20px"],
div[style*="border-radius: 24px"] {
  transition: transform 0.38s cubic-bezier(0.165, 0.84, 0.44, 1),
              box-shadow 0.38s cubic-bezier(0.165, 0.84, 0.44, 1),
              border-color 0.38s ease,
              background-color 0.38s ease !important;
  will-change: transform, box-shadow;
  position: relative;
}

/* Master Hover State: 3D Lift & Luxury Emerald/Orange Dual Glow */
.service-card-ditto:hover,
.gallery-card:hover,
.process-step-card:hover,
.feature-card:hover,
.price-card:hover,
div[style*="border-radius: 18px"]:hover,
div[style*="border-radius: 20px"]:hover,
div[style*="border-radius: 24px"]:hover {
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow: 0 22px 50px rgba(11, 123, 62, 0.16), 0 10px 25px rgba(23, 107, 91, 0.14) !important;
  border-color: rgba(23, 107, 91, 0.45) !important;
}

/* Shimmer Light Reflection Sweep Animation on Hover */
.service-card-ditto::after,
div[style*="border-radius: 20px"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
  pointer-events: none;
  border-radius: inherit;
}

.service-card-ditto:hover::after,
div[style*="border-radius: 20px"]:hover::after {
  left: 140%;
}

/* Icon Zoom Effect Inside Cards */
.service-card-ditto:hover i,
div[style*="border-radius: 20px"]:hover i,
div[style*="border-radius: 18px"]:hover i {
  transform: scale(1.18) rotate(-4deg);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Image Frame Depth Zoom inside Cards */
.service-card-ditto:hover img,
div[style*="border-radius: 20px"]:hover img,
div[style*="border-radius: 24px"]:hover img {
  transform: scale(1.06);
  transition: transform 0.5s ease;
}

/* 📱 TARGETED MOBILE RESPONSIVE FIXES (PIXEL-PERFECT ALIGNMENT) */
/* 📱 TARGETED MOBILE RESPONSIVE FIXES (FULL-WIDTH PIXEL-PERFECT BOOKING FORM) */
@media (max-width: 768px) {

  /* Fix 1: Collapse parent split booking card grid container from 2 columns (1fr 1.1fr) to single 100% column */
  #contact div[style*="grid-template-columns: 1fr 1.1fr"],
  div[style*="grid-template-columns: 1fr 1.1fr"] {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Completely hide the dark helpline column of the split booking card on mobile screens */
  .survey-dark-card {
    display: none !important;
  }

  /* Fix 2: Prevent orange experience badge from overlapping outside crew photo frame */
  div[style*="position: absolute; bottom: 24px; left: 24px"] {
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
    border-radius: 30px !important;
    text-align: center !important;
    width: auto !important;
    box-shadow: 0 4px 15px rgba(23, 107, 91, 0.4) !important;
  }

  /* Fix 3: Stack Social Media & Feature Cards cleanly 1 per row on mobile */
  div[style*="grid-template-columns: repeat(auto-fit, minmax(270px, 1fr))"],
  div[style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Fix 4: Crew photo frame height on mobile */
  div[style*="height: 440px"] {
    height: 280px !important;
    border-radius: 18px !important;
  }

  /* Fix 5: Booking Card Form Alignment & Padding on Mobile */
  div[style*="padding: 48px 44px"] {
    padding: 28px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  div[style*="padding: 48px 44px"] h3 {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    margin-bottom: 6px !important;
    color: var(--text-dark, #0b132b) !important;
  }

  div[style*="padding: 48px 44px"] p {
    font-size: 0.88rem !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
    color: var(--text-muted, #66747A) !important;
  }

  /* 9:16 Optimized Compact Mobile Form Layout */
  #main-contact-form,
  #contact-page-form,
  form#main-contact-form,
  form#contact-page-form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  /* Keep 2-column grid side-by-side on mobile screens for 9:16 ratio */
  #main-contact-form div[style*="grid-template-columns"],
  form#main-contact-form div[style*="grid-template-columns"],
  form#contact-page-form div[style*="grid-template-columns"],
  .form-row-2col-mobile {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #main-contact-form label,
  #contact-page-form label,
  form#main-contact-form label,
  form#contact-page-form label {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--text-dark, #0b132b) !important;
    margin-bottom: 3px !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #main-contact-form input,
  #main-contact-form select,
  #main-contact-form input[type="date"],
  #contact-page-form input,
  #contact-page-form select,
  form#main-contact-form input,
  form#main-contact-form select,
  form#main-contact-form input[type="date"],
  form#contact-page-form input,
  form#contact-page-form select,
  .form-input-white,
  .form-input-dark {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
    padding: 0 10px !important;
    font-size: 0.82rem !important;
    font-family: inherit !important;
    border-radius: 10px !important;
    border: 1.5px solid #D9DED9 !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    min-width: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }

  form#main-contact-form select,
  #main-contact-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px 12px !important;
    padding-right: 26px !important;
  }

  #main-contact-form button[type="submit"],
  #contact-page-form button[type="submit"],
  form#main-contact-form button[type="submit"],
  form#contact-page-form button[type="submit"],
  .btn-submit-orange {
    width: 100% !important;
    height: 42px !important;
    padding: 8px 16px !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    border-radius: 999px !important;
    margin-top: 4px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
    box-shadow: 0 8px 25px rgba(23, 107, 91, 0.35) !important;
    box-sizing: border-box !important;
  }
}

/* 💻 GUARANTEED EXECUTIVE DESKTOP PAGE RESTORATION (min-width: 992px) */
@media (min-width: 992px) {
  /* Desktop Header Bar */
  .main-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    border-bottom: 1px solid #F1EFE8 !important;
  }

  .header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 96px !important;
    padding: 0 40px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
  }

  .logo-brand img, .logo img {
    height: 64px !important;
    max-height: 64px !important;
    max-width: 240px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Desktop Navigation Horizontal List */
  .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 28px !important;
    z-index: auto !important;
    border: none !important;
    overflow: visible !important;
  }

  .nav-menu .nav-link {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: #0b132b !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .nav-menu .nav-link:hover {
    color: #176B5B !important;
  }

  /* Desktop Dropdown Submenu Floating Card */
  .nav-dropdown {
    position: relative !important;
  }

  .nav-dropdown .dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 240px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(11, 19, 43, 0.15) !important;
    padding: 12px !important;
    border: 1px solid #D9DED9 !important;
    z-index: 1001 !important;
    margin-top: 0 !important;
  }

  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown.active .dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .nav-dropdown .dropdown-item {
    padding: 10px 14px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #102F3A !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.2s ease !important;
    border: none !important;
  }

  .nav-dropdown .dropdown-item:hover {
    background: rgba(11, 123, 62, 0.08) !important;
    color: #176B5B !important;
  }

  /* Desktop Booking Card Split View */
  .survey-dark-card {
    display: flex !important;
  }

  /* Desktop Services Grid (4 Cards Per Row) */
  .services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }

  /* Desktop Footer (5 Columns) */
  .footer-grid-4col {
    display: grid !important;
    grid-template-columns: 2.2fr 1fr 1fr 1.1fr 1.2fr !important;
    gap: 32px !important;
  }

  /* Desktop Gallery Moments Grid (Exclusively 3 Cards Per Row on Desktop) */
  .moments-grid-6col,
  .gallery-grid,
  .moments-grid,
  div[class*="moments-grid"],
  div[class*="gallery-grid"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }

  .moment-card-photo {
    height: 260px !important;
  }
}

/* ── Ultra-Premium Circular Floating Back-to-Top Button ── */
#scrollTopBtn {
  position: fixed !important;
  bottom: 25px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #176B5B 0%, #0B1F2A 100%) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 24px rgba(11, 123, 62, 0.45), 0 2px 8px rgba(0, 0, 0, 0.22) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 999999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

#scrollTopBtn svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #ffffff !important;
  stroke-width: 3 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  transition: transform 0.2s ease;
}

#scrollTopBtn:hover {
  background: linear-gradient(135deg, #2A8C75 0%, #176B5B 100%) !important;
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.5), 0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

#scrollTopBtn:hover svg {
  transform: translateY(-2px);
}

#scrollTopBtn:active {
  transform: translateY(0) scale(0.95) !important;
}

@media (max-width: 991px) {
  #scrollTopBtn {
    bottom: calc(var(--bottombar-h, 62px) + env(safe-area-inset-bottom, 0px) + 5px) !important;
    right: 14px !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  #scrollTopBtn svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ── Areas Link Grid 6-Card Limit & View More Button ── */
.areas-link-grid.collapsed .area-link-card:nth-child(n+7) {
  display: none !important;
}

.areas-view-more-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  background: linear-gradient(135deg, #176B5B 0%, #0B1F2A 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(11, 123, 62, 0.35) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.areas-view-more-btn:hover {
  background: linear-gradient(135deg, #2A8C75 0%, #176B5B 100%) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 26px rgba(249, 115, 22, 0.45) !important;
}

.areas-view-more-btn:active {
  transform: translateY(0) scale(0.97) !important;
}

/* ── Locality Pill Badges (Clickable Links) ── */
.locality-pill-badge,
a.locality-pill-badge {
  background: var(--bg-light, #F1EFE8) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--text-dark, #0B1F2A) !important;
  text-decoration: none !important;
  display: inline-block !important;
  border: 1px solid #D9DED9 !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

.locality-pill-badge:hover,
a.locality-pill-badge:hover {
  background: linear-gradient(135deg, #176B5B 0%, #0B1F2A 100%) !important;
  color: #ffffff !important;
  border-color: #176B5B !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(11, 123, 62, 0.28) !important;
}

.locality-pill-badge:active,
a.locality-pill-badge:active {
  transform: translateY(0) scale(0.96) !important;
}

/* ── Ultra-Premium Mobile Scroll Reveal & Touch Feedback Micro-Interactions ── */
html {
  scroll-behavior: smooth !important;
  -webkit-tap-highlight-color: transparent !important;
}

.mobile-reveal-item,
.reveal-up {
  opacity: 0 !important;
  transform: translateY(28px) scale(0.97) !important;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

.reveal-scale {
  opacity: 0 !important;
  transform: scale(0.92) !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

.mobile-reveal-item.active,
.reveal-up.active,
.reveal-scale.active {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Native App Tactile Touch Feedback */
button,
a,
.service-card-v2,
.area-link-card,
.locality-pill-badge,
.review-card-modern,
.faq-header-dhaka,
.btn-pill-orange,
.btn-pill-dark,
.btn-submit-orange,
.btn-call-circle {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, background-color 0.2s ease, color 0.2s ease !important;
}

button:active,
a:active,
.service-card-v2:active,
.area-link-card:active,
.locality-pill-badge:active,
.review-card-modern:active,
.faq-header-dhaka:active {
  transform: scale(0.96) translateY(1px) !important;
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM INTERACTIVE HOVER, TOUCH & SCROLLING ANIMATION SUITE
   ══════════════════════════════════════════════════════════════ */

/* 1. Global Smooth Scroll & Scrollbar Styling */
html {
  scroll-behavior: smooth !important;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F1EFE8;
}
::-webkit-scrollbar-thumb {
  background: #176B5B;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #176B5B;
}

/* 2. Service Cards Hover & Touch Micro-interactions */
.home-svc-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease, background 0.3s ease !important;
  will-change: transform, box-shadow !important;
}

.home-svc-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 16px 36px rgba(11, 123, 62, 0.14), 0 4px 12px rgba(11, 31, 42, 0.05) !important;
  border-color: #176B5B !important;
}

.home-svc-card:hover i {
  transform: scale(1.15) rotate(-3deg) !important;
  color: #176B5B !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.home-svc-card:active {
  transform: scale(0.96) translateY(2px) !important;
  box-shadow: 0 4px 12px rgba(11, 123, 62, 0.08) !important;
}

/* 3. Quote Form Glass Card Micro-Glow & Hover */
.quote-card-glassmorphic {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease !important;
}

.quote-card-glassmorphic:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.42), 0 0 40px rgba(255, 255, 255, 0.15) !important;
}

/* 4. Form Input Focus & Hover Transitions */
.form-input-white {
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-input-white:hover {
  border-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

/* 5. Mobile Sticky CTA Bar Touch & Hover */
.mobile-bottom-bar a {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.mobile-bottom-bar a:active {
  transform: scale(0.95) !important;
}

/* 6. Gallery / Moment Cards Hover Zoom */
.moment-card-photo img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.moment-card-photo:hover img {
  transform: scale(1.08) !important;
}





/* ══════════════════════════════════════════════════════════════════════════
   EXECUTIVE ACTION BUTTONS & DOCK SYSTEM (ZERO OVERLAPPING & PERFECT 10px GAP)
   ══════════════════════════════════════════════════════════════════════════ */

/* Suppress all legacy duplicate floating bars across the entire site */
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
}

/* ── 1. DESKTOP VIEW (>= 992px): VERTICAL CIRCULAR DOCK ON RIGHT SIDE WITH 10px GAP ── */
@media (min-width: 992px) {
    .mobile-bottom-bar {
        position: fixed !important;
        right: 24px !important;
        bottom: 80px !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-end !important;
        padding: 0 !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        background: #0B1F2A !important;
        box-shadow: 0 8px 24px rgba(11, 31, 42, 0.35) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        padding: 0 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    .mobile-bar-item:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 30px rgba(11, 31, 42, 0.45) !important;
    }

    .mobile-bar-item span {
        position: absolute !important;
        right: 62px !important;
        top: 50% !important;
        transform: translateY(-50%) translateX(10px) !important;
        background: rgba(11, 31, 42, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: #ffffff !important;
        padding: 7px 15px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .mobile-bar-item:hover span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) translateX(0) !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
        transform: none !important;
    }

    .mobile-bar-item.center-wa:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 32px rgba(37, 211, 102, 0.7) !important;
    }

    .mobile-bar-wa-elevated {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 24px !important;
        height: 24px !important;
    }

    .mobile-bar-item.quote-btn-item {
        background: linear-gradient(135deg, #176B5B 0%, #102F3A 100%) !important;
        box-shadow: 0 8px 24px rgba(23, 107, 91, 0.45) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    }

    /* Scroll To Top Button on Desktop - Positioned in exact 10px vertical sequence below Quote button */
    #scrollTopBtn,
    .scroll-top,
    .back-to-top {
        position: fixed !important;
        right: 24px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: #102F3A !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 8px 24px rgba(11, 86, 47, 0.45) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 99998 !important;
        transition: all 0.25s ease !important;
        cursor: pointer !important;
    }

    #scrollTopBtn:hover,
    .scroll-top:hover,
    .back-to-top:hover {
        background: #102F3A !important;
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 30px rgba(11, 86, 47, 0.6) !important;
    }
}

/* ── 2. MOBILE VIEW (< 991px): STATIC NON-SCROLLABLE BOTTOM BAR WITH ZERO OVERLAPPING ── */
@media (max-width: 991px) {
    body {
        padding-bottom: 64px !important;
    }

    .mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 58px !important;
        margin: 0 !important;
        background: #0B1F2A !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 -4px 20px rgba(11, 31, 42, 0.35) !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        align-items: center !important;
        justify-items: center !important;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) 6px !important;
        z-index: 99999 !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: 2px solid #C9A45C !important;
        box-sizing: border-box !important;
    }

    .mobile-bar-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        gap: 6px !important;
        padding: 6px 4px !important;
        border-radius: 20px !important;
        background: transparent !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-bar-item span {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        pointer-events: auto !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background: rgba(23, 107, 91, 0.25) !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(201, 164, 92, 0.3) !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 13px !important;
        height: 13px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45) !important;
        padding: 6px 10px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        transform: none !important;
        height: 42px !important;
    }

    .mobile-bar-wa-elevated {
        width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Scroll To Top Button on Mobile - Shifted above bottom bar so zero overlap */
    #scrollTopBtn,
    .scroll-top,
    .back-to-top {
        position: fixed !important;
        right: 14px !important;
        bottom: 70px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(11, 31, 42, 0.9) !important;
        color: #C9A45C !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
        z-index: 99998 !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   EXECUTIVE 1 HORIZONTAL ROW ACTION BAR (NO LINE-BREAKS, ZERO OVERLAPPING)
   ══════════════════════════════════════════════════════════════════════════ */

/* Suppress all legacy duplicate floating bars across the entire site */
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
}

/* ── 1. DESKTOP VIEW (>= 992px): VERTICAL CIRCULAR DOCK ON RIGHT SIDE WITH 10px GAP ── */
@media (min-width: 992px) {
    .mobile-bottom-bar {
        position: fixed !important;
        right: 24px !important;
        bottom: 80px !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-end !important;
        padding: 0 !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        background: #0B1F2A !important;
        box-shadow: 0 8px 24px rgba(11, 31, 42, 0.35) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        padding: 0 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        flex: 0 0 50px !important;
        max-width: 50px !important;
    }

    .mobile-bar-item:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 30px rgba(11, 31, 42, 0.45) !important;
    }

    .mobile-bar-item span {
        position: absolute !important;
        right: 62px !important;
        top: 50% !important;
        transform: translateY(-50%) translateX(10px) !important;
        background: rgba(11, 31, 42, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: #ffffff !important;
        padding: 7px 15px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .mobile-bar-item:hover span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) translateX(0) !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
        transform: none !important;
    }

    .mobile-bar-item.center-wa:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 32px rgba(37, 211, 102, 0.7) !important;
    }

    .mobile-bar-wa-elevated {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 24px !important;
        height: 24px !important;
    }

    .mobile-bar-item.quote-btn-item {
        background: linear-gradient(135deg, #176B5B 0%, #102F3A 100%) !important;
        box-shadow: 0 8px 24px rgba(23, 107, 91, 0.45) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 24px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: #102F3A !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 8px 24px rgba(11, 86, 47, 0.45) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 99998 !important;
        transition: all 0.25s ease !important;
        cursor: pointer !important;
    }
}

/* ── 2. MOBILE VIEW (< 991px): STRICT 1 HORIZONTAL ROW SIDE-BY-SIDE ── */
@media (max-width: 991px) {
    body {
        padding-bottom: 64px !important;
    }

    .mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 58px !important;
        margin: 0 !important;
        background: #0B1F2A !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 -4px 20px rgba(11, 31, 42, 0.4) !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* STRICT: FORCE 1 SINGLE HORIZONTAL ROW */
        align-items: center !important;
        justify-content: space-around !important;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) 6px !important;
        z-index: 99999 !important;
        border: none !important;
        border-top: 2px solid #C9A45C !important;
        box-sizing: border-box !important;
    }

    .mobile-bar-item {
        flex: 1 1 33.333% !important; /* STRICT: 3 EQUAL COLUMNS */
        max-width: 33.333% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        gap: 4px !important;
        padding: 6px 2px !important;
        border-radius: 20px !important;
        background: transparent !important;
        height: 44px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .mobile-bar-item span {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        pointer-events: auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: rgba(23, 107, 91, 0.25) !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(201, 164, 92, 0.3) !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 12px !important;
        height: 12px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45) !important;
        padding: 6px 6px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        transform: none !important;
        height: 42px !important;
        flex: 1 1 33.333% !important;
        max-width: 33.333% !important;
    }

    .mobile-bar-wa-elevated {
        width: 18px !important;
        height: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 15px !important;
        height: 15px !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 14px !important;
        bottom: 70px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(11, 31, 42, 0.9) !important;
        color: #C9A45C !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
        z-index: 99998 !important;
    }

    @media (max-width: 360px) {
        .mobile-bar-item span {
            font-size: 10px !important;
        }
        .mobile-bar-item {
            gap: 2px !important;
        }
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   EXECUTIVE 2-BUTTON (50/50 CALL & WHATSAPP) ACTION DOCK SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/* Suppress all legacy duplicate floating bars across the entire site */
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
}

/* ── 1. DESKTOP VIEW (>= 992px): VERTICAL CIRCULAR DOCK ON RIGHT SIDE WITH 10px GAP ── */
@media (min-width: 992px) {
    .mobile-bottom-bar {
        position: fixed !important;
        right: 24px !important;
        bottom: 80px !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-end !important;
        padding: 0 !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        background: #0B1F2A !important;
        box-shadow: 0 8px 24px rgba(11, 31, 42, 0.35) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        padding: 0 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        flex: 0 0 50px !important;
        max-width: 50px !important;
    }

    .mobile-bar-item:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 30px rgba(11, 31, 42, 0.45) !important;
    }

    .mobile-bar-item span {
        position: absolute !important;
        right: 62px !important;
        top: 50% !important;
        transform: translateY(-50%) translateX(10px) !important;
        background: rgba(11, 31, 42, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: #ffffff !important;
        padding: 7px 15px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .mobile-bar-item:hover span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) translateX(0) !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
        transform: none !important;
    }

    .mobile-bar-item.center-wa:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 32px rgba(37, 211, 102, 0.7) !important;
    }

    .mobile-bar-wa-elevated {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 24px !important;
        height: 24px !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 24px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: #102F3A !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 8px 24px rgba(11, 86, 47, 0.45) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 99998 !important;
        transition: all 0.25s ease !important;
        cursor: pointer !important;
    }
}

/* ── 2. MOBILE VIEW (< 991px): DUAL 50/50 SPLIT BUTTONS FOR CALL & WHATSAPP ONLY ── */
@media (max-width: 991px) {
    body {
        padding-bottom: 64px !important;
    }

    .mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 60px !important;
        margin: 0 !important;
        background: #0B1F2A !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 -4px 20px rgba(11, 31, 42, 0.45) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 50/50 DUAL BUTTON SPLIT */
        gap: 8px !important;
        align-items: center !important;
        justify-items: center !important;
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)) 10px !important;
        z-index: 99999 !important;
        border: none !important;
        border-top: 2px solid #C9A45C !important;
        box-sizing: border-box !important;
    }

    .mobile-bar-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        border-radius: 26px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        width: 100% !important;
        height: 44px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        transition: all 0.2s ease !important;
        max-width: 100% !important;
        flex: 1 1 50% !important;
    }

    .mobile-bar-item span {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        letter-spacing: 0.2px !important;
        pointer-events: auto !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        background: rgba(23, 107, 91, 0.3) !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 14px !important;
        height: 14px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5) !important;
        padding: 10px 14px !important;
        border-radius: 26px !important;
        border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
        transform: none !important;
        height: 44px !important;
        max-width: 100% !important;
    }

    .mobile-bar-wa-elevated {
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 18px !important;
        height: 18px !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 14px !important;
        bottom: 70px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(11, 31, 42, 0.9) !important;
        color: #C9A45C !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
        z-index: 99998 !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   COMPLETELY REMOVED & HIDDEN BOTTOM ACTION BARS
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-bottom-bar,
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

body {
    padding-bottom: 0 !important;
}




/* ══════════════════════════════════════════════════════════════════════════
   RESTORED EXECUTIVE 2-BUTTON (50/50 CALL & WHATSAPP) ACTION DOCK SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/* Suppress all legacy duplicate floating bars across the entire site */
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
}

/* ── 1. DESKTOP VIEW (>= 992px): VERTICAL CIRCULAR DOCK ON RIGHT SIDE WITH 10px GAP ── */
@media (min-width: 992px) {
    .mobile-bottom-bar {
        position: fixed !important;
        right: 24px !important;
        bottom: 80px !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-end !important;
        padding: 0 !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        background: #0B1F2A !important;
        box-shadow: 0 8px 24px rgba(11, 31, 42, 0.35) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        padding: 0 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        flex: 0 0 50px !important;
        max-width: 50px !important;
    }

    .mobile-bar-item:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 30px rgba(11, 31, 42, 0.45) !important;
    }

    .mobile-bar-item span {
        position: absolute !important;
        right: 62px !important;
        top: 50% !important;
        transform: translateY(-50%) translateX(10px) !important;
        background: rgba(11, 31, 42, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: #ffffff !important;
        padding: 7px 15px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .mobile-bar-item:hover span {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) translateX(0) !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
        transform: none !important;
    }

    .mobile-bar-item.center-wa:hover {
        transform: scale(1.1) translateY(-2px) !important;
        box-shadow: 0 12px 32px rgba(37, 211, 102, 0.7) !important;
    }

    .mobile-bar-wa-elevated {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 24px !important;
        height: 24px !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 24px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: #102F3A !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 8px 24px rgba(11, 86, 47, 0.45) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 99998 !important;
        transition: all 0.25s ease !important;
        cursor: pointer !important;
    }
}

/* ── 2. MOBILE VIEW (< 991px): DUAL 50/50 SPLIT BUTTONS FOR CALL & WHATSAPP ONLY ── */
@media (max-width: 991px) {
    body {
        padding-bottom: 64px !important;
    }

    .mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 60px !important;
        margin: 0 !important;
        background: #0B1F2A !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 -4px 20px rgba(11, 31, 42, 0.45) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 50/50 DUAL BUTTON SPLIT */
        gap: 8px !important;
        align-items: center !important;
        justify-items: center !important;
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)) 10px !important;
        z-index: 99999 !important;
        border: none !important;
        border-top: 2px solid #C9A45C !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        border-radius: 26px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        width: 100% !important;
        height: 44px !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        transition: all 0.2s ease !important;
        max-width: 100% !important;
        flex: 1 1 50% !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-bar-item span {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        letter-spacing: 0.2px !important;
        pointer-events: auto !important;
    }

    .mobile-bar-icon-circle.green-soft {
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        background: rgba(23, 107, 91, 0.3) !important;
        color: #C9A45C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-icon-circle.green-soft svg {
        width: 14px !important;
        height: 14px !important;
    }

    .mobile-bar-item.center-wa {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5) !important;
        padding: 10px 14px !important;
        border-radius: 26px !important;
        border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
        transform: none !important;
        height: 44px !important;
        max-width: 100% !important;
    }

    .mobile-bar-wa-elevated {
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .mobile-bar-wa-elevated svg {
        width: 18px !important;
        height: 18px !important;
    }

    #scrollTopBtn, .scroll-top, .back-to-top {
        position: fixed !important;
        right: 14px !important;
        bottom: 70px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(11, 31, 42, 0.9) !important;
        color: #C9A45C !important;
        border: 1px solid rgba(201, 164, 92, 0.4) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
        z-index: 99998 !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   COMPLETELY REMOVED UNDER-FOOTER SECTIONS & BOTTOM ACTION BARS
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-bottom-bar,
.floating-actions,
.fixed-bottom-dual-bar,
.floating-wa-btn,
.mobile-sticky-footer,
.btn-dual-call,
.btn-dual-whatsapp {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

body {
    padding-bottom: 0 !important;
}




/* ══════════════════════════════════════════════════════════════════════════
   NON-SCROLLABLE FIXED MOBILE BOTTOM ACTION BAR (CALL & WHATSAPP ONLY)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    body {
        padding-bottom: 66px !important;
    }

    .fixed-mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 60px !important;
        background: #0B1F2A !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 -4px 20px rgba(11, 31, 42, 0.5) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 12px !important;
        z-index: 999999 !important;
        border-top: 2px solid #C9A45C !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .fixed-bar-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        height: 44px !important;
        border-radius: 24px !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        box-sizing: border-box !important;
        transition: transform 0.2s ease !important;
    }

    .fixed-bar-btn.call-btn {
        background: linear-gradient(135deg, #176B5B 0%, #102F3A 100%) !important;
        border: 1.5px solid rgba(201, 164, 92, 0.4) !important;
        box-shadow: 0 4px 14px rgba(23, 107, 91, 0.4) !important;
    }

    .fixed-bar-btn.wa-btn {
        background: linear-gradient(135deg, #25D366 0%, #0F9D58 100%) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
        box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5) !important;
    }

    .fixed-bar-btn svg {
        flex-shrink: 0 !important;
    }

    .fixed-bar-btn span {
        white-space: nowrap !important;
        letter-spacing: 0.3px !important;
    }
}

@media (min-width: 992px) {
    .fixed-mobile-bottom-bar {
        display: none !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   ENQUIRY POPUP MODAL 10px+ BOTTOM CLEARANCE ABOVE QUICK ACTION BAR
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    #ehpmEnq {
        padding: 12px 12px calc(60px + 16px + env(safe-area-inset-bottom, 0px)) 12px !important;
    }
    
    #ehpmEnq .ehpm-box {
        max-height: calc(100dvh - 88px) !important;
        margin-bottom: 0 !important;
    }

    #ehpmEnq .ehpm-note {
        padding-bottom: 8px !important;
        margin-bottom: 4px !important;
    }

    .modal-dialog,
    #quoteModal .modal-dialog,
    .quote-modal-dialog {
        margin-bottom: calc(60px + 16px) !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   STRICT WCAG TEXT CONTRAST & ANTI-BLENDING PROTECTION SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. LIGHT SURFACE TEXT ISOLATION ── */
body, main, section, .section, .light-bg, .card, .service-card, .testimonial-card, 
.faq-card, .feature-card, .area-link-card, .pricing-card, .bg-white, .bg-light {
    color: #17232A !important;
}

body h1, body h2, body h3, body h4, body h5, body h6,
.section h1, .section h2, .section h3, .section h4, .section h5, .section h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.service-card h1, .service-card h2, .service-card h3, .service-card h4,
.testimonial-card h1, .testimonial-card h2, .testimonial-card h3,
.faq-header-dhaka, .faq-header, .faq-question {
    color: #17232A !important;
    text-shadow: none !important;
}

p, li, .desc, .text-content, .card-body p, .faq-body p, .faq-answer {
    color: #17232A;
}

.text-muted, .subtitle, .meta, .date, .blog-date, .author, .faq-body, .service-desc {
    color: #66747A !important;
}

/* ── 2. DARK SURFACE TEXT ISOLATION (HERO, FOOTER, DRAWER, DARK CARDS) ── */
footer, .footer, .footer-ditto, .hero, .hero-ditto, .hero-section, .hero-overlay, 
.dark-section, .bg-dark, .mobile-nav-drawer, .drawer-header, .drawer-body, 
.drawer-footer, .nav-drawer, .header-dark {
    background-color: #0B1F2A !important;
    color: #FFFFFF !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.hero-title, .hero-heading, .dark-section h1, .dark-section h2, .dark-section h3,
.mobile-nav-drawer h1, .mobile-nav-drawer h2, .mobile-nav-drawer h3, .mobile-nav-drawer h4 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

footer p, footer li, footer span, footer td,
.hero p, .hero li, .hero span, .hero-subtitle, .hero-description,
.dark-section p, .dark-section li, .dark-section span,
.drawer-body p, .drawer-body li, .drawer-body a, .drawer-body span {
    color: #F1EFE8 !important;
}

footer .footer-desc, footer .copyright, .hero-lead, .dark-section .subtitle {
    color: #CBD4D1 !important;
}

footer a, .footer a {
    color: #F1EFE8 !important;
}

footer a:hover, .footer a:hover, .drawer-body a:hover {
    color: #C9A45C !important;
}

/* ── 3. BUTTON CONTRAST PROTECTION ── */
.btn-primary, .cta-btn, .btn-submit, button[type="submit"], .hero-cta, .quote-btn {
    background: linear-gradient(135deg, #176B5B 0%, #2A8C75 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn-primary *, .cta-btn *, .btn-submit * {
    color: #FFFFFF !important;
}

.btn-gold, .badge-gold, .accent-gold, .gold-pill {
    background: linear-gradient(135deg, #C9A45C 0%, #E2C98A 100%) !important;
    color: #0B1F2A !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

.btn-gold *, .badge-gold *, .accent-gold * {
    color: #0B1F2A !important;
}

.btn-secondary, .btn-outline {
    background: transparent !important;
    border: 1.5px solid #176B5B !important;
    color: #176B5B !important;
    font-weight: 700 !important;
}

.btn-secondary:hover, .btn-outline:hover {
    background: #176B5B !important;
    color: #FFFFFF !important;
}

/* ── 4. FORM CONTROL CONTRAST ── */
input, select, textarea, .form-control {
    background-color: #FFFFFF !important;
    color: #17232A !important;
    border: 1.5px solid #D9DED9 !important;
    font-weight: 500 !important;
}

input::placeholder, textarea::placeholder {
    color: #66747A !important;
    opacity: 1 !important;
}

input:focus, select:focus, textarea:focus {
    border-color: #176B5B !important;
    background-color: #FFFFFF !important;
    color: #17232A !important;
    box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.18) !important;
}

/* ── 5. RATING STARS & BADGES ── */
.star, .stars, .rating-stars, .fa-star, .star-rating {
    color: #C9A45C !important;
}

.badge-primary, .service-badge, .tag-primary {
    background-color: #176B5B !important;
    color: #FFFFFF !important;
}

/* ── 6. HEADER & MOBILE DRAWER NAVIGATION ── */
.header-ditto, .main-header, header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #D9DED9 !important;
}

.header-ditto a, .main-header a, header a {
    color: #17232A !important;
}

.header-ditto a:hover, .main-header a:hover, header a:hover,
.nav-link.active, .nav-menu a.active {
    color: #176B5B !important;
}

/* Drawer Menu Items */
.drawer-nav-item, .drawer-menu a, .mobile-nav-link {
    color: #F1EFE8 !important;
}

.drawer-nav-item:hover, .drawer-menu a:hover, .mobile-nav-link:hover,
.drawer-nav-item.active, .drawer-menu a.active {
    color: #C9A45C !important;
}




/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP COMPREHENSIVE TEXT READABILITY & CONTRAST PROTECTION (>= 992px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* 1. HERO TEXT OVER BACKGROUND IMAGES & BANNERS */
    .hero, .hero-section, .hero-ditto, .banner, .page-header {
        position: relative !important;
    }
    
    .hero::before, .hero-section::before, .banner::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(135deg, rgba(11, 31, 42, 0.88) 0%, rgba(16, 47, 58, 0.72) 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .hero-content, .hero-text, .hero-title, .hero-subtitle, .hero-cta,
    .banner-content, .page-header-content {
        position: relative !important;
        z-index: 2 !important;
    }

    .hero h1, .hero h2, .hero h3, .hero-title, .banner h1 {
        color: #FFFFFF !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
        font-weight: 900 !important;
    }

    .hero p, .hero li, .hero span, .hero-subtitle, .banner p {
        color: #F1EFE8 !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
    }

    /* 2. DESKTOP NAVBAR & HEADER CONTRAST */
    header, .main-header, .header-ditto {
        background: #FFFFFF !important;
        border-bottom: 1px solid #D9DED9 !important;
        box-shadow: 0 4px 20px rgba(11, 31, 42, 0.05) !important;
    }

    .nav-link, .nav-menu a, .header-link {
        color: #17232A !important;
        font-weight: 700 !important;
        transition: color 0.2s ease !important;
    }

    .nav-link:hover, .nav-menu a:hover, .header-link:hover {
        color: #176B5B !important;
    }

    .nav-link.active, .nav-menu a.active {
        color: #176B5B !important;
        border-bottom: 2px solid #C9A45C !important;
    }

    /* 3. LIGHT SECTION & CARD TEXT ISOLATION */
    .section, section, .card, .service-card, .testimonial-card, 
    .faq-card, .feature-card, .area-link-card, .pricing-card {
        color: #17232A !important;
    }

    .section h1, .section h2, .section h3, .section h4,
    .card h1, .card h2, .card h3, .card h4,
    .service-card h2, .service-card h3, .testimonial-card h3,
    .faq-header-dhaka, .faq-question {
        color: #17232A !important;
        font-weight: 800 !important;
    }

    .card p, .service-card p, .testimonial-card p, .faq-body p {
        color: #17232A !important;
    }

    .card-meta, .service-desc, .testimonial-author, .text-muted, .breadcrumb {
        color: #66747A !important;
    }

    .breadcrumb a {
        color: #176B5B !important;
    }

    .breadcrumb a:hover {
        color: #2A8C75 !important;
    }

    /* 4. DARK SECTIONS & FOOTER CONTRAST */
    footer, .footer, .footer-ditto, .dark-section, .bg-dark {
        background-color: #0B1F2A !important;
        color: #FFFFFF !important;
    }

    footer h1, footer h2, footer h3, footer h4, footer h5,
    .dark-section h1, .dark-section h2, .dark-section h3 {
        color: #FFFFFF !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    }

    footer p, footer li, footer span, footer td,
    .dark-section p, .dark-section span {
        color: #F1EFE8 !important;
    }

    footer a, .footer a {
        color: #F1EFE8 !important;
    }

    footer a:hover, .footer a:hover {
        color: #C9A45C !important;
    }

    footer .copyright, footer .footer-bottom {
        color: #CBD4D1 !important;
    }

    /* 5. FORM LABELS & INPUT CONTRAST */
    form label, .form-group label {
        color: #17232A !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
    }

    input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea {
        background-color: #FFFFFF !important;
        color: #17232A !important;
        border: 1.5px solid #D9DED9 !important;
        font-weight: 600 !important;
    }

    input::placeholder, textarea::placeholder {
        color: #66747A !important;
        opacity: 1 !important;
    }

    input:focus, select:focus, textarea:focus {
        border-color: #176B5B !important;
        background-color: #FFFFFF !important;
        color: #17232A !important;
        box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.18) !important;
    }

    /* 6. BUTTON CONTRAST PROTECTION */
    .btn-primary, .cta-btn, .btn-submit, button[type="submit"] {
        background: linear-gradient(135deg, #176B5B 0%, #2A8C75 100%) !important;
        color: #FFFFFF !important;
        font-weight: 800 !important;
        border: none !important;
        box-shadow: 0 4px 16px rgba(23, 107, 91, 0.35) !important;
    }

    .btn-gold, .badge-gold, .gold-pill {
        background: linear-gradient(135deg, #C9A45C 0%, #E2C98A 100%) !important;
        color: #0B1F2A !important;
        font-weight: 800 !important;
    }
}




/* ══════════════════════════════════════════════════════════════════════════
   MASTER HIGH-CONTRAST ANTI-BLENDING PROTECTION SYSTEM (ALL DEVICES & PAGES)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DARK SECTIONS, HERO & CONTACT CONTAINER TEXT PROTECTION ── */
.hero, .hero-section, .hero-ditto, .dark-section, .bg-dark, .contact-section, 
.cta-section, .booking-section, footer, .footer, .footer-ditto, .mobile-nav-drawer {
    background-color: #0B1F2A !important;
    color: #FFFFFF !important;
}

.hero h1, .hero h2, .hero h3, .hero h4,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4,
.hero-ditto h1, .hero-ditto h2, .hero-ditto h3, .hero-ditto h4,
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4,
.contact-section h1, .contact-section h2, .contact-section h3, .contact-section h4,
.cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4,
.booking-section h1, .booking-section h2, .booking-section h3,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
footer h1, footer h2, footer h3, footer h4,
#hero-heading, .hero-title, .section-title-dark {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

/* Green/Gold highlight text inside dark headings */
.hero h1 span, .hero h2 span, .hero h3 span,
.hero-section h1 span, .hero-section h2 span,
.dark-section h1 span, .dark-section h2 span,
.contact-section h1 span, .contact-section h2 span {
    color: #4ADE80 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.hero p, .hero li, .hero label,
.hero-section p, .hero-section li, .hero-section label,
.dark-section p, .dark-section li, .dark-section label,
.contact-section p, .contact-section li, .contact-section label,
.cta-section p, .cta-section li, .cta-section label,
.bg-dark p, .bg-dark li, .bg-dark label,
.trust-points span, .feature-list li, .check-list li {
    color: #F1EFE8 !important;
}

.trust-points i, .feature-list i, .check-list i, .trust-badge i, .check-icon {
    color: #C9A45C !important;
}

/* ── 2. BUTTON CONTRAST ISOLATION (ZERO BLENDING) ── */
/* Primary Buttons */
.btn-primary, .hero-cta, .cta-btn, .btn-submit, button[type="submit"], .btn-emerald {
    background: linear-gradient(135deg, #176B5B 0%, #2A8C75 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(23, 107, 91, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-primary *, .hero-cta *, .cta-btn *, .btn-submit * {
    color: #FFFFFF !important;
}

/* Dark Navy Buttons */
.btn-dark, .btn-navy {
    background: #102F3A !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 800 !important;
}

.btn-dark *, .btn-navy * {
    color: #FFFFFF !important;
}

/* Outline / Secondary Buttons on Light Surfaces */
.btn-outline, .btn-secondary, a.btn-outline, button.btn-outline {
    background: #FFFFFF !important;
    border: 1.5px solid #176B5B !important;
    color: #176B5B !important;
    font-weight: 800 !important;
}

.btn-outline *, .btn-secondary * {
    color: #176B5B !important;
}

/* Outline Buttons inside Dark Containers */
.hero .btn-outline, .dark-section .btn-outline, .bg-dark .btn-outline, 
.contact-section .btn-outline, .hero-ditto .btn-outline {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1.5px solid #FFFFFF !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    backdrop-filter: blur(8px) !important;
}

.hero .btn-outline *, .dark-section .btn-outline *, .contact-section .btn-outline * {
    color: #FFFFFF !important;
}

/* Gold Pill Buttons */
.btn-gold, .gold-pill, .badge-gold {
    background: linear-gradient(135deg, #C9A45C 0%, #E2C98A 100%) !important;
    color: #0B1F2A !important;
    font-weight: 800 !important;
    border: none !important;
}

.btn-gold *, .gold-pill *, .badge-gold * {
    color: #0B1F2A !important;
}

/* ── 3. LIGHT SECTION & CARD TEXT PROTECTION ── */
.section-light, .card, .service-card, .testimonial-card, .about-section, .faq-section {
    background-color: #FFFFFF !important;
    color: #17232A !important;
}

.card h1, .card h2, .card h3, .card h4,
.service-card h1, .service-card h2, .service-card h3, .service-card h4,
.testimonial-card h1, .testimonial-card h2, .testimonial-card h3,
.about-section h1, .about-section h2, .about-section h3,
.faq-section h1, .faq-section h2, .faq-section h3 {
    color: #17232A !important;
    font-weight: 800 !important;
}

.card p, .card li, .service-card p, .testimonial-card p, .about-section p {
    color: #17232A !important;
}

.card-meta, .service-desc, .text-muted {
    color: #66747A !important;
}

/* ── 4. FORM INPUTS CONTRAST ── */
input, select, textarea, .form-control {
    background-color: #FFFFFF !important;
    color: #17232A !important;
    border: 1.5px solid #D9DED9 !important;
    font-weight: 600 !important;
}

input::placeholder, textarea::placeholder {
    color: #66747A !important;
    opacity: 1 !important;
}

input:focus, select:focus, textarea:focus {
    border-color: #176B5B !important;
    background-color: #FFFFFF !important;
    color: #17232A !important;
    box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.18) !important;
}




/* ══════════════════════════════════════════════════════════════════════════
   UNIVERSAL ABSOLUTE ANTI-BLENDING LIGHT TEXT FOR ALL DARK SURFACES
   ══════════════════════════════════════════════════════════════════════════ */

/* Target ALL elements inside ANY dark container or section */
.hero *, .hero-section *, .hero-ditto *, .dark-section *, .bg-dark *, 
.contact-section *, .cta-section *, .booking-section *, footer *, .footer *, 
.footer-ditto *, .mobile-nav-drawer *, [class*="dark"] *, [style*="background:#0B1F2A"] *, 
[style*="background: #0B1F2A"] *, [style*="background-color:#0B1F2A"] *, [style*="background-color: #0B1F2A"] * {
    color: #F1EFE8 !important;
}

/* Enforce Pure White (#FFFFFF) on all headings, titles, links, and bold text inside dark containers */
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4,
.hero-ditto h1, .hero-ditto h2, .hero-ditto h3, .hero-ditto h4,
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4,
.contact-section h1, .contact-section h2, .contact-section h3, .contact-section h4,
.cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4,
.booking-section h1, .booking-section h2, .booking-section h3,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
footer h1, footer h2, footer h3, footer h4,
[class*="dark"] h1, [class*="dark"] h2, [class*="dark"] h3, [class*="dark"] h4,
.hero strong, .dark-section strong, .contact-section strong, .cta-section strong,
.hero b, .dark-section b, .contact-section b, .cta-section b,
.hero a, .dark-section a, .contact-section a, .cta-section a, footer a {
    color: #FFFFFF !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Green & Gold Highlights on Dark Surfaces */
.hero h1 span, .hero h2 span, .hero h3 span,
.hero-section h1 span, .hero-section h2 span,
.dark-section h1 span, .dark-section h2 span,
.contact-section h1 span, .contact-section h2 span,
.highlight-green, .accent-emerald {
    color: #4ADE80 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

.hero h1 span.gold, .hero h2 span.gold, .dark-section span.gold, .accent-gold {
    color: #C9A45C !important;
}

/* Buttons inside dark sections MUST have crisp contrasting text */
.hero .btn-primary, .dark-section .btn-primary, .contact-section .btn-primary, .cta-section .btn-primary,
.hero .btn-submit, .dark-section .btn-submit, .contact-section .btn-submit {
    background: linear-gradient(135deg, #176B5B 0%, #2A8C75 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border: none !important;
}

.hero .btn-primary *, .dark-section .btn-primary *, .contact-section .btn-primary * {
    color: #FFFFFF !important;
}

.hero .btn-outline, .dark-section .btn-outline, .contact-section .btn-outline, .cta-section .btn-outline {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1.5px solid #FFFFFF !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

.hero .btn-outline *, .dark-section .btn-outline *, .contact-section .btn-outline * {
    color: #FFFFFF !important;
}

.hero .btn-gold, .dark-section .btn-gold, .contact-section .btn-gold, .cta-section .btn-gold {
    background: linear-gradient(135deg, #C9A45C 0%, #E2C98A 100%) !important;
    color: #0B1F2A !important;
    font-weight: 800 !important;
}

.hero .btn-gold *, .dark-section .btn-gold *, .contact-section .btn-gold * {
    color: #0B1F2A !important;
}