/*=====================================
  TRUSTEDBUILD COLOR SYSTEM
  Centralized Color Management - Navy Elite Theme
  Created: 2025-10-06
  Purpose: Navy Elite theme color management
=====================================*/

:root {
  /*=====================================
    BRAND IDENTITY COLORS - NAVY ELITE THEME
  =====================================*/

  /* Core Brand Colors - Navy, Red, Gray Palette */
  --brand-primary: #1e3a5f; /* Deep navy blue */
  --brand-secondary: #dc3545; /* Classic red */
  --brand-accent: #6c757d; /* Medium gray */

  /* Status Colors - Navy Theme Variations */
  --status-success: #28a745; /* Green (unchanged for clarity) */
  --status-warning: #ffc107; /* Yellow (unchanged for clarity) */
  --status-error: #dc3545; /* Red accent */
  --status-info: #17a2b8; /* Blue info (unchanged) */

  /* Dark variants */
  --status-success-dark: #1e7e34;
  --status-warning-dark: #e0a800;
  --status-error-dark: #c82333;
  --status-info-dark: #138496;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-gray-50: #f8f9fa;
  --color-gray-100: #e9eaeb;
  --color-gray-200: #dee2e6;
  --color-gray-300: #ced4da;
  --color-gray-400: #adb5bd;
  --color-gray-500: #6c757d;
  --color-gray-600: #495057;
  --color-gray-700: #343a40;
  --color-gray-800: #212529;
  --color-gray-900: #2c3e50;

  /* Text Colors */
  --text-primary: #2c3e50;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --text-light: #ced4da;
  --text-inverse: #ffffff;

  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-light: #f9f9f9;
  --bg-section: #f9f9f9;
  --bg-dark: #212529;
  --bg-overlay: rgba(0, 0, 0, 0.4);
  --bg-overlay-light: rgba(255, 255, 255, 0.1);
  --section-bg-color: rgba(248, 249, 250, 0.8);

  /*=====================================
    INTERACTIVE ELEMENTS
  =====================================*/

  /* Button System */
  --btn-primary-bg: #1e3a5f;
  --btn-primary-hover: #dc3545;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #1e3a5f;

  --btn-secondary-bg: #28a745;
  --btn-secondary-hover: #1e7e34;
  --btn-secondary-text: #ffffff;
  --btn-secondary-border: #28a745;

  --btn-outline-bg: rgba(255, 255, 255, 0.8);
  --btn-outline-border: #dee2e6;
  --btn-outline-text: #6c757d;
  --btn-outline-hover-bg: #28a745;
  --btn-outline-hover-text: #ffffff;
  --btn-outline-hover-border: transparent;

  /* Form Elements */
  --form-bg: #ffffff;
  --form-border: #e9eaeb;
  --form-border-focus: #1e3a5f;
  --form-border-focus-shadow: rgba(30, 58, 95, 0.25);
  --form-text: #2c3e50;
  --form-placeholder: #6c757d;

  /* Links */
  --link-color: #28a745;
  --link-hover: #1e7e34;
  --link-decoration: none;
  --link-hover-decoration: underline;

  /*=====================================
    NAVIGATION SYSTEM
  =====================================*/

  /* Header & Navigation */
  --navbar-bg: linear-gradient(
    to right,
    rgba(180, 195, 210, 0.92) 0%,
    rgba(140, 160, 180, 0.9) 15%,
    rgba(100, 130, 150, 0.88) 30%,
    rgba(70, 95, 120, 0.9) 50%,
    rgba(44, 62, 80, 0.92) 100%
  );
  --navbar-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  --navbar-brand-color: #ffffff;
  --navbar-tagline-color: #ffffff;
  --navbar-link-color: rgba(255, 255, 255, 0.9);
  --navbar-link-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --navbar-link-hover-bg: rgba(255, 215, 79, 0.15);
  --navbar-link-hover-color: #ffffff;
  --navbar-link-hover-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  /* Dropdown & Mega Menu */
  --dropdown-bg: rgba(255, 255, 255, 0.98);
  --dropdown-border: rgba(30, 58, 95, 0.2);
  --dropdown-shadow: 0 0.5rem 1rem rgba(30, 58, 95, 0.15);
  --dropdown-header-color: #1e3a5f;
  --dropdown-item-color: #2c3e50;
  --dropdown-item-hover-bg: rgba(30, 58, 95, 0.1);
  --dropdown-item-hover-color: #1e3a5f;
  --dropdown-divider-color: #dee2e6;

  /* CTA Toolbar */
  --toolbar-bg: linear-gradient(
    to right,
    rgba(80, 95, 120, 0.65) 0%,
    rgba(65, 80, 105, 0.74) 15%,
    rgba(45, 60, 85, 0.85) 40%,
    rgba(25, 45, 75, 0.82) 75%,
    rgba(15, 30, 50, 0.85) 100%
  );
  --toolbar-scrolled-bg: rgba(35, 63, 100, 0.82);
  --toolbar-border: transparent;
  --toolbar-scrolled-border: rgba(255, 255, 255, 0.3);
  --toolbar-shadow: 0 2px 10px rgba(30, 58, 95, 0.08);
  --toolbar-scrolled-shadow: 0 8px 32px rgba(30, 58, 95, 0.12);
  --toolbar-text: #ffffff;
  --toolbar-emergency: #dc3545;
  --toolbar-emergency-hover: #c82333;

  /*=====================================
    HERO SECTION
  =====================================*/

  --hero-bg: linear-gradient(
    135deg,
    #1e3a5f 0%,
    #dc3545 100%
  );
  --hero-text-color: #ffffff;
  --hero-heading-color: #ffffff;
  --hero-heading-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  --hero-form-bg: linear-gradient(
    to right,
    rgba(15, 30, 50, 0.95) 0%,
    rgba(20, 35, 55, 0.93) 25%,
    rgba(25, 40, 65, 0.91) 30%,
    rgba(30, 45, 70, 0.93) 50%,
    rgba(20, 35, 55, 0.95) 75%,
    rgba(15, 30, 50, 0.96) 100%
  );
  --hero-form-border-radius: 20px;
  --hero-form-shadow: 0 10px 30px rgba(30, 58, 95, 0.25);
  --hero-form-border: rgba(35, 63, 100, 0.4);
  --hero-input-bg: rgba(255, 255, 255, 0.95);
  --hero-input-border: 3px solid rgba(30, 58, 95, 0.6);
  --hero-input-border-radius: 16px;
  --hero-input-text: #1e3a5f;
  --hero-input-placeholder: #6c757d;
  --hero-input-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --hero-btn-bg: #ffffff;
  --hero-btn-text: #dc3545;
  --hero-btn-hover-bg: transparent;
  --hero-btn-hover-text: #ffffff;
  --emergency-phone-text: #ffffff;
  --emergency-phone-bg: linear-gradient(
    135deg,
    #1e3a5f 0%,
    #2a4a7f 50%,
    #1e3a5f 100%
  );
  --emergency-phone-shadow: 0 8px 30px rgba(30, 58, 95, 0.4),
    0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);

  /* Additional emergency styling for other elements */
  --hero-emergency-bg: rgba(30, 58, 95, 0.5);
  --hero-emergency-border: rgba(35, 63, 100, 0.4);
  --hero-emergency-text: #ffffff;
  --hero-emergency-accent: rgba(220, 53, 69, 0.15);
  --hero-emergency-shadow: 0 8px 32px rgba(30, 58, 95, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.2);

  /* Emergency Phone Display - Original yellow button */
  --emergency-phone-bg: linear-gradient(
    135deg,
    #FFD700 0%,
    #FFC107 50%,
    #FFB300 100%
  );

  /*=====================================
    STICKY CALL BUTTON
  =====================================*/

  --sticky-call-bg: linear-gradient(
    135deg,
    #1e3a5f,
    #6c757d
  );
  --sticky-call-text: #ffffff;
  --sticky-call-icon: #ffffff;
  --sticky-call-border: rgba(255, 255, 255, 0.2);
  --sticky-call-shadow: 0 6px 25px rgba(30, 58, 95, 0.4),
    0 2px 10px rgba(0, 0, 0, 0.1);
  --sticky-call-hover-shadow: 0 12px 35px rgba(30, 58, 95, 0.5),
    0 4px 15px rgba(0, 0, 0, 0.15);
  --sticky-call-hover-border: rgba(255, 255, 255, 0.3);
  --sticky-call-active-shadow: 0 6px 20px rgba(30, 58, 95, 0.4);

  /*=====================================
    SERVICE BLOCKS
  =====================================*/

  --service-block-bg: #ffffff;
  --service-block-border-radius: 10px;
  --service-block-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --service-block-border: 1px solid rgba(0, 0, 0, 0.05);
  --service-block-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  --service-block-title-color: #2c3e50;
  --service-block-text-color: #6c757d;
  --service-block-btn-bg: #28a745;
  --service-block-btn-text: #ffffff;
  --service-block-btn-border: none;
  --service-block-btn-border-radius: 4px;
  --service-block-btn-hover-bg: #1e7e34;
  --service-block-btn-hover-shadow: 0 4px 12px rgba(0, 141, 79, 0.3);

  /*=====================================
    FORMS & INPUTS
  =====================================*/

  --form-input-bg: #ffffff;
  --form-input-shadow: none;
  --form-input-border: 0;
  --form-input-text: #2c3e50;
  --form-input-focus-border: #dc3545;

  /*=====================================
    SHADOWS & BORDERS
  =====================================*/

  /* Shadow System */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-light: rgba(0, 0, 0, 0.08);
  --shadow-dark: rgba(0, 0, 0, 0.15);

  /* Border System */
  --border-color: #e9eaeb;
  --border-light: #e9eaeb;
  --border-medium: #dee2e6;
  --border-dark: #ced4da;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --border-radius-xl: 100px;

  /*=====================================
    SOCIAL MEDIA COLORS
  =====================================*/

  --social-twitter: #1da1f2;
  --social-facebook: #1877f2;
  --social-instagram: #c13584;
  --social-pinterest: #e60023;
  --social-whatsapp: #25d366;
  --social-linkedin: #0077b5;

  /*=====================================
    LONDON MAP COLORS
  =====================================*/

  /* Map Region Colors - Navy Theme */
  --map-central: #1e3a5f;
  --map-north: #dc3545;
  --map-south: #28a745;
  --map-east: #6c757d;
  --map-west: #17a2b8;
  --map-northwest: #ffc107;
  --map-northeast: #fd7e14;
  --map-southwest: #20c997;
  --map-southeast: #6f42c1;

  /* Map UI Colors */
  --map-text-primary: #2c3e50;
  --map-text-secondary: #6c757d;
  --map-accent: #28a745;
  --map-overlay: #b0b0b0;
  --map-popup-bg: #ffffff;
  --map-border: #999999;
  --map-hover-fill: #1e3a5f;
  --map-hover-border: #dc3545;
  --map-landmark-fill: #1e3a5f;
  --map-landmark-border: #ffffff;

  /*=====================================
    SPECIALIZED COMPONENTS
  =====================================*/

  /* Emergency Services */
  --emergency-text: #dc3545;
  --emergency-text-hover: #a93226;
  --emergency-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  --emergency-text-shadow-hover: 1px 1px 3px rgba(0, 0, 0, 0.4);

  /* Emergency Phone Display - Keep original styling for readability */
  --emergency-phone-text: #1a1a1a;

  /* Badges & Labels */
  --badge-bg: #1e3a5f;
  --badge-text: #ffffff;
  --badge-border: #1e3a5f;

  /*=====================================
    FOOTER
  =====================================*/

  --footer-bg: #212529;
  --footer-heading-color: #ffffff;
  --footer-link-hover-color: #dc3545;
  --footer-copyright-color: rgba(255, 255, 255, 0.7);
  --social-icon-color: #6c757d;
  --social-icon-hover-color: #dc3545;

  /*=====================================
    LEGACY COMPATIBILITY
    =====================================*/
  /* Temporary aliases for backward compatibility */
  --tooplate-red: #dc3545;
  --tooplate-green: #1e3a5f;
  --tooplate-black: #2c3e50;
  --tooplate-white: #ffffff;

  /* Additional Legacy Properties */
  --brand-primary-light: #2a4a7f;
  --brand-primary-dark: #152a42;
  --brand-primary-faded: rgba(30, 58, 95, 0.1);
  --brand-primary-rgb: 30, 58, 95;
  --brand-secondary-light: #e85d6a;
  --brand-secondary-dark: #a02622;
  --brand-secondary-faded: rgba(220, 53, 69, 0.1);
  --brand-accent-hover: #5a6268;
  --status-success-rgb: 40, 167, 69;
  --status-error-rgb: 220, 53, 69;
  --status-warning-rgb: 255, 193, 7;
  --status-info-rgb: 23, 162, 184;
}

/*=====================================
  NAVY ELITE THEME STYLES
  (Previously required theme-navy class, now default)
=====================================*/

/* Navy theme main page background */
body {
  background: linear-gradient(
    135deg,
    rgba(15, 30, 50, 0.05) 0%,
    rgba(30, 58, 95, 0.03) 50%,
    rgba(15, 30, 50, 0.05) 100%
  ) !important;
  min-height: 100vh;
}

/* Ensure the background applies to the entire document */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(15, 30, 50, 0.05) 0%,
    rgba(30, 58, 95, 0.03) 50%,
    rgba(15, 30, 50, 0.05) 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* Component-specific overrides for Navy theme */
.custom-block {
  background: #ffffff;
  border: 1px solid rgba(30, 58, 95, 0.1);
}

.custom-block h3 {
  color: #2c3e50;
}

.custom-block .custom-btn {
  background: #28a745;
  color: #ffffff;
}

.custom-block .custom-btn:hover {
  background: #1e7e34;
}

.navbar {
  background: linear-gradient(
    to right,
    rgba(80, 95, 120, 0.65) 0%,
    rgba(65, 80, 105, 0.74) 15%,
    rgba(45, 60, 85, 0.85) 40%,
    rgba(10, 25, 40, 0.99) 70%,
    rgba(5, 20, 35, 1) 100%
  );
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Make brand taglines white in Navy theme for better contrast */
.brand-tagline {
  color: #ffffff !important;
}

/* Make TrustedBuild title colors brighter in Navy theme */
#header-title {
  color: #ffffff !important;
}

.tooplate-green {
  color: #dc3545 !important;
}

.hero-form {
  background: linear-gradient(
    135deg,
    rgba(35, 50, 70, 0.95) 0%,
    rgba(50, 78, 115, 0.92) 50%,
    rgba(35, 50, 70, 0.95) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 30px rgba(35, 50, 70, 0.25);
}

.dropdown-menu-mega {
  background: linear-gradient(
    135deg,
    rgba(30, 58, 95, 0.95),
    rgba(25, 45, 75, 0.92)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(30, 58, 95, 0.3), 0 8px 25px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 0;
  overflow: hidden;

  /* Fix positioning to prevent overflow */
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  min-width: 800px !important;
  max-width: 95vw !important;
  z-index: 1000 !important;
}

/* Override Bootstrap dropdown positioning for Services menu */
.dropdown.show .dropdown-menu-mega,
.dropdown-menu-mega.show {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  min-width: 800px !important;
  max-width: 95vw !important;
  z-index: 1000 !important;
}

/* Enhanced styling for mega menu content */
.dropdown-menu-mega .container {
  padding: 24px;
}

/* Mega menu column headers */
.dropdown-menu-mega h6 {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(220, 53, 69, 0.6);
}

/* Mega menu links */
.dropdown-menu-mega .dropdown-item {
  color: rgba(255, 255, 255, 0.85);
  padding: 10px 16px;
  margin: 2px 0;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-weight: 500;
  border: 1px solid transparent;
}

.dropdown-menu-mega .dropdown-item:hover {
  background: rgba(220, 53, 69, 0.15);
  color: #ffffff;
  border-color: rgba(220, 53, 69, 0.3);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.1);
}

/* Mega menu headings and descriptions */
.dropdown-menu-mega h5 {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 12px;
}

.dropdown-menu-mega p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Mega menu section separators */
.dropdown-menu-mega .row > div {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 24px;
  padding-left: 24px;
}

.dropdown-menu-mega .row > div:last-child {
  border-right: none;
  padding-right: 0;
}

.dropdown-menu-mega .row > div:first-child {
  padding-left: 0;
}

/* Mega menu special highlight sections */
.dropdown-menu-mega .bg-light,
.dropdown-menu-mega .bg-gray {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mega menu icons */
.dropdown-menu-mega .bi,
.dropdown-menu-mega i {
  color: rgba(220, 53, 69, 0.8);
  margin-right: 8px;
  transition: color 0.2s ease;
}

.dropdown-menu-mega .dropdown-item:hover .bi,
.dropdown-menu-mega .dropdown-item:hover i {
  color: #dc3545;
}

/* Mega menu image containers */
.dropdown-menu-mega img {
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.dropdown-menu-mega img:hover {
  transform: scale(1.05);
}

/* Mega menu special call-to-action items */
.dropdown-menu-mega .btn-outline-primary,
.dropdown-menu-mega .btn-outline-secondary {
  border-color: rgba(220, 53, 69, 0.6);
  color: rgba(220, 53, 69, 0.9);
  background: transparent;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown-menu-mega .btn-outline-primary:hover,
.dropdown-menu-mega .btn-outline-secondary:hover {
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.8);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220, 53, 69, 0.2);
}

/* Responsive positioning for mega menu */
@media screen and (max-width: 768px) {
  .dropdown-menu-mega {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    min-width: auto !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
}

@media screen and (max-width: 1200px) {
  .dropdown-menu-mega {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    min-width: 600px !important;
    max-width: 90vw !important;
    z-index: 1000 !important;
  }
}

.site-footer {
  background: #ffffff;
  color: #6c757d;
}

.site-footer h3 {
  color: #1e3a5f;
}

.site-footer .custom-link {
  color: #2c3e50;
}

.site-footer .custom-link:hover {
  color: #dc3545;
}

.toolbar-section {
  background: linear-gradient(
    to right,
    rgba(35, 63, 100, 0.78) 0%,
    rgba(49, 67, 85, 0.73) 25%,
    rgba(57, 78, 99, 0.68) 50%,
    rgba(49, 67, 85, 0.73) 75%,
    rgba(35, 63, 100, 0.78) 100%
  );
}

.emergency-phone-link {
  color: #dc3545;
}


.social-icon-link {
  color: #2c3e50;
}

.social-icon-link:hover {
  color: #dc3545;
}

/* Theme-specific emergency service styling for Navy theme */
.service-info-box {
  background: rgba(30, 58, 95, 0.85);
  border: 2px solid rgba(220, 53, 69, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(30, 58, 95, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 20px rgba(220, 53, 69, 0.1);
  transition: all 0.3s ease;
}

.service-info-box:hover {
  border-color: rgba(220, 53, 69, 0.6);
  box-shadow: 0 8px 32px rgba(30, 58, 95, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 25px rgba(220, 53, 69, 0.15);
}

/* Emergency phone link in hero section - keep original styling */
.emergency-phone-link {
  color: #1a1a1a;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}


#emergency-service-container h5 {
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#emergency-service-container .badge {
  background: #dc3545;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

/* CTA Toolbar Button Styling for Navy Elite Theme */
.toolbar-btn {
  border-color: #dc3545;
  background: rgba(30, 58, 95, 0.25);
  color: #ffffff;
  transition: all 0.3s ease;
}

.toolbar-btn .bi {
  color: #ffffff;
  transition: all 0.3s ease;
}

/* Override text-success, text-primary, text-danger, and text-dark for Navy theme */
.text-success,
.text-primary,
.text-danger,
.text-dark {
  color: #ffffff !important;
}

/* Toolbar button text and icons should be white */
.toolbar-btn .text-success,
.toolbar-btn .text-primary {
  color: #ffffff !important;
}

.toolbar-btn::before {
  background: linear-gradient(
    135deg,
    #dc3545,
    #c82333
  );
}

.toolbar-btn:hover {
  border-color: #1e3a5f;
  background: rgba(30, 58, 95, 0.08);
  color: #ffffff;
}

.toolbar-btn:hover .bi {
  color: #ffffff;
}

/* Override text-success and text-primary hover states for Navy theme */
.toolbar-btn:hover .text-success,
.toolbar-btn:hover .text-primary {
  color: #ffffff !important;
}

.text-success:hover,
.text-primary:hover,
.text-danger:hover,
.text-dark:hover {
  color: #ffffff !important;
}

.toolbar-btn:hover::before {
  background: linear-gradient(135deg, #1e3a5f, #0f1e2f);
}

/* Unified styling for CTA toolbar buttons (except WhatsApp) in Navy theme */
#toolbar-quote-btn,
#toolbar-call-btn,
#toolbar-consultation-btn {
  border: 2px solid rgba(192, 192, 192, 0.8);
  background: linear-gradient(
    135deg,
    rgba(30, 58, 95, 0.95) 0%,
    rgba(44, 62, 80, 0.9) 50%,
    rgba(52, 73, 94, 0.85) 100%
  );
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 15px rgba(30, 58, 95, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* WhatsApp button with official WhatsApp colors - transparent background */
#toolbar-whatsapp-btn {
  border: 2px solid rgba(37, 211, 102, 0.9);
  background: transparent;
  color: rgba(37, 211, 102, 0.9) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* WhatsApp button icon should remain green */
#toolbar-whatsapp-btn .bi {
  color: #25d366 !important;
}

/* WhatsApp button icon should remain green on hover too */
#toolbar-whatsapp-btn:hover .bi {
  color: #25d366 !important;
}

#toolbar-quote-btn .bi,
#toolbar-call-btn .bi,
#toolbar-consultation-btn .bi {
  color: #ffffff !important;
  transition: all 0.3s ease;
}

#toolbar-whatsapp-btn .bi {
  color: rgba(37, 211, 102, 0.9) !important;
  transition: all 0.3s ease;
}

#toolbar-quote-btn .text-success,
#toolbar-quote-btn .text-primary,
#toolbar-call-btn .text-success,
#toolbar-call-btn .text-primary,
#toolbar-consultation-btn .text-success,
#toolbar-consultation-btn .text-primary {
  color: #ffffff !important;
}

#toolbar-quote-btn::before,
#toolbar-call-btn::before,
#toolbar-consultation-btn::before,
#toolbar-whatsapp-btn::before {
  background: linear-gradient(135deg, #1e3a5f, #0f1e2f);
}

/* Hover effects for regular buttons */
#toolbar-quote-btn:hover,
#toolbar-call-btn:hover,
#toolbar-consultation-btn:hover {
  border-color: rgba(220, 53, 69, 0.9);
  background: linear-gradient(
    135deg,
    rgba(220, 53, 69, 0.95) 0%,
    rgba(200, 35, 51, 0.9) 50%,
    rgba(180, 30, 45, 0.85) 100%
  );
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Hover effect for WhatsApp button - brighter green */
#toolbar-whatsapp-btn:hover {
  border-color: rgba(25, 167, 78, 0.9);
  background: linear-gradient(
    135deg,
    rgba(25, 167, 78, 0.95) 0%,
    rgba(20, 147, 65, 0.9) 50%,
    rgba(16, 128, 56, 0.85) 100%
  );
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(25, 167, 78, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
}

#toolbar-quote-btn:hover .bi,
#toolbar-call-btn:hover .bi,
#toolbar-consultation-btn:hover .bi {
  color: #ffffff;
}

#toolbar-whatsapp-btn:hover .bi {
  color: rgba(37, 211, 102, 0.9) !important;
}

#toolbar-quote-btn:hover .text-success,
#toolbar-quote-btn:hover .text-primary,
#toolbar-call-btn:hover .text-success,
#toolbar-call-btn:hover .text-primary,
#toolbar-consultation-btn:hover .text-success,
#toolbar-consultation-btn:hover .text-primary {
  color: #ffffff !important;
}

#toolbar-quote-btn:hover::before,
#toolbar-call-btn:hover::before,
#toolbar-consultation-btn:hover::before,
#toolbar-whatsapp-btn:hover::before {
  background: linear-gradient(
    135deg,
    #dc3545,
    #c82333
  );
}

/* Special effect for Call button - keep pulse animation */
#toolbar-call-btn .bi {
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Sticky Call Button for Navy Theme - Match Get Quote Button */
#sticky-call-btn {
  background: white !important;
  border: 2px solid white !important;
  color: #dc3545 !important;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15) !important;
  transition: box-shadow 0.3s ease !important;
}

#sticky-call-btn:hover {
  background: linear-gradient(135deg, #dc3545, #c82333) !important;
  border: 2px solid #dc3545 !important;
  color: white !important;
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4) !important;
  transform: translateY(-2px) !important;
}

#sticky-call-btn .bi {
  color: #dc3545 !important;
  transition: color 0.3s ease !important;
}

#sticky-call-btn:hover .bi {
  color: white !important;
}

#sticky-call-btn::before {
  background: linear-gradient(135deg, #dc3545, #c82333) !important;
}

/*=====================================
  HERO GET QUOTE BUTTON - NAVY THEME
=====================================*/

/* Enhanced Get Quote Button for Navy theme - Override Bootstrap */
.btn-outline-success.get-quote-btn,
.hero-section-text
  .custom-form
  .btn-outline-success.get-quote-btn,
.get-quote-btn,
.hero-section-text .custom-form .get-quote-btn {
  background: white !important;
  border: 2px solid white !important;
  color: #dc3545 !important;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15) !important;
  transition: box-shadow 0.3s ease !important;
}

.btn-outline-success.get-quote-btn:hover,
.hero-section-text
  .custom-form
  .btn-outline-success.get-quote-btn:hover,
.get-quote-btn:hover,
.hero-section-text .custom-form .get-quote-btn:hover {
  background: linear-gradient(135deg, #dc3545, #c82333) !important;
  border: 2px solid #dc3545 !important;
  color: white !important;
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4) !important;
  transform: translateY(-2px) !important;
}

/*=====================================
  HOW IT WORKS SECTION - NAVY THEME
=====================================*/

/* Process section background - matching Services section */
.process-section {
  background: #212529 !important;
}

/* Process section text styling for better readability */
.process-section h2 {
  color: #ffffff !important;
}

.process-section p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.process-section .section-small-title {
  color: rgba(255, 255, 255, 0.8) !important;
}

.process-block {
  background: rgba(30, 58, 95, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(30, 58, 95, 0.25) !important;
}

.process-block:hover {
  background: rgba(30, 58, 95, 0.9) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 40px rgba(30, 58, 95, 0.35) !important;
  border-color: #dc3545 !important;
}

.process-block .step-number {
  background: #dc3545 !important;
  color: #ffffff !important;
}

.process-block .bi {
  color: #ffd74f !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.process-block h5 {
  color: #ffffff !important;
}

.process-block p {
  color: rgba(255, 255, 255, 0.8) !important;
}

/*=====================================
  OUR COVERAGE MAP SECTION - NAVY THEME
=====================================*/

.london-map-section {
  background: #212529 !important;
  margin-bottom: 0 !important;
  padding-bottom: var(--spacing-lg) !important;
}

/* Map section text styling for better readability */
.london-map-section h2 {
  color: #ffffff !important;
}

.london-map-section p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.london-map-section .section-small-title {
  color: rgba(255, 255, 255, 0.8) !important;
}

.london-map-layout {
  background: rgba(30, 58, 95, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 40px rgba(30, 58, 95, 0.2) !important;
}

.london-map-container {
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(30, 58, 95, 0.3) !important;
}

.map-control-btn {
  background: rgba(30, 58, 95, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.map-control-btn:hover {
  background: #dc3545 !important;
  border-color: #ffffff !important;
  transform: scale(1.05) !important;
}

.map-info-panel {
  background: rgba(30, 58, 95, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
}

/* Enhanced text styling for map info panel */
.map-info-panel h3,
.map-info-panel h4,
.map-info-panel h5,
.map-info-panel h6 {
  color: #ffffff !important;
}

.map-info-panel p,
.map-info-panel span,
.map-info-panel div {
  color: rgba(255, 255, 255, 0.9) !important;
}

.map-info-panel .text-dark,
.map-info-panel .text-primary {
  color: #ffffff !important;
}

.map-info-panel .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.map-legend {
  background: rgba(30, 58, 95, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/*=====================================
  OUR SERVICES SECTION - NAVY THEME
=====================================*/

.services-section {
  background: #212529 !important;
  margin-top: 0 !important;
  padding-top: var(--spacing-lg) !important;
}

/* Services section text styling for better readability */
.services-section h2 {
  color: #ffffff !important;
}

.services-section p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.services-section .section-small-title {
  color: rgba(255, 255, 255, 0.8) !important;
}

.services-section .custom-block {
  background: rgba(30, 58, 95, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(30, 58, 95, 0.25) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.services-section .custom-block:hover {
  background: rgba(30, 58, 95, 0.95) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 45px rgba(30, 58, 95, 0.4) !important;
  border-color: #dc3545 !important;
}

.services-section .custom-block h3 {
  color: #ffffff !important;
}

.services-section .custom-block p {
  color: rgba(255, 255, 255, 0.85) !important;
}

.services-section .custom-block .custom-btn {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
}

.services-section .custom-block .custom-btn:hover {
  background: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Remove borders between header and CTA toolbar for seamless appearance */
.cta-toolbar,
.toolbar-section {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}

/* Enhanced glass effect for Navy theme scrolled toolbar */
.toolbar-section.scrolled {
  background: linear-gradient(
    to right,
    rgba(35, 63, 100, 0.55) 0%,
    rgba(40, 68, 105, 0.5) 25%,
    rgba(45, 73, 110, 0.48) 50%,
    rgba(40, 68, 105, 0.5) 75%,
    rgba(35, 63, 100, 0.55) 100%
  );
  backdrop-filter: blur(20px) saturate(150%) contrast(90%) brightness(108%);
  -webkit-backdrop-filter: blur(20px) saturate(150%) contrast(90%)
    brightness(108%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08),
    0 3px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  /* Ensure sticky positioning is maintained for Navy theme too */
  position: fixed !important;
  top: 71px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1025 !important;
}

/* Respect reduced motion for Navy theme */
@media (prefers-reduced-motion: reduce) {
  .toolbar-section.scrolled {
    background: linear-gradient(
      to right,
      rgba(35, 63, 100, 0.88) 0%,
      rgba(40, 68, 105, 0.85) 25%,
      rgba(45, 73, 110, 0.87) 50%,
      rgba(40, 68, 105, 0.85) 75%,
      rgba(35, 63, 100, 0.88) 100%
    ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  }
}

/* Navy theme glass overlay effect */
/* Temporarily disabled to troubleshoot positioning issue */
.toolbar-section.scrolled::before {
  display: none;
}

/* Hide glass overlay for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toolbar-section.scrolled::before {
    display: none;
  }
}

/* Ensure seamless transition between header and toolbar */
.header-wrapper + .cta-toolbar,
.navbar + .toolbar-section {
  border-top: none !important;
  margin-top: -1px !important;
}

.custom-block .badge-float {
  background: #dc3545 !important;
  color: #ffffff !important;
}

/*=====================================
  FOOTER SECTION - NAVY THEME
=====================================*/

.site-footer {
  background: #212529 !important;
  border-top: none !important;
}

.site-footer h3 {
  color: #ffffff !important;
}

.site-footer h3 .custom-link {
  color: #ffffff !important;
}

.site-footer h3 .custom-link:hover {
  color: #dc3545 !important;
}

.site-footer p,
.site-footer .text-white {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Footer links with proper visibility for dark backgrounds */
.site-footer .footer-links a {
  color: #f8f9fa !important;
  transition: all 0.2s ease;
  position: relative;
  opacity: 0.9;
}

.site-footer .footer-links a:hover {
  color: var(--brand-secondary, #dc3545) !important;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Footer contact info links */
.site-footer .footer-contact-info a {
  color: #17a2b8 !important;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
  opacity: 0.85;
}

.site-footer .footer-contact-info a:hover {
  color: var(--brand-secondary, #dc3545) !important;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Footer copyright links */
.site-footer .footer-bottom a {
  color: #17a2b8 !important;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
  opacity: 0.85;
}

.site-footer .footer-bottom a:hover {
  color: var(--brand-secondary, #dc3545) !important;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.copyright-text {
  color: rgba(255, 255, 255, 0.6) !important;
}

.social-icon-link {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

.social-icon-link:hover {
  color: #dc3545 !important;
  transform: translateY(-2px) !important;
}

/* SVG separator - remove border and eliminate gap with footer */
.footer-separator-svg {
  border: none !important;
  margin-bottom: -1px !important; /* Remove gap between SVG and footer */
  display: block !important;
}

/* Create gradient definition that matches footer */
.footer-separator-svg defs stop:first-child {
  stop-color: rgba(15, 30, 50, 0.98);
}

.footer-separator-svg defs stop:last-child {
  stop-color: rgba(30, 58, 95, 0.95);
}

/*=====================================
  RESPONSIVE COLOR ADJUSTMENTS
=====================================*/

/* Enhanced contrast for mobile */
@media (max-width: 767.98px) {
  :root {
    --btn-outline-bg: rgba(255, 255, 255, 0.9);
    --form-border-focus-shadow: rgba(30, 58, 95, 0.3);
    --navbar-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --btn-outline-bg: #ffffff;
    --btn-outline-border: #495057;
    --form-border: #6c757d;
    --border-color: #6c757d;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btn-themed,
  .btn-outline-cta {
    transition: none;
  }
}

/*=====================================
  HERO OVERLAY - NAVY THEME UPDATE
=====================================*/

/* Update hero section brightness for Navy theme */
.hero-section::before {
  /* Removed dark overlay filter - image now shows at full brightness */
  /* filter: brightness(0.7) contrast(1.05); */
}

/*=====================================
  MOBILE MENU - NAVY THEME
=====================================*/

/* Mobile menu styling for Navy theme */
.mobile-menu-content {
  background: linear-gradient(
    135deg,
    rgba(30, 58, 95, 0.95) 0%,
    rgba(15, 30, 50, 0.98) 50%,
    rgba(44, 62, 80, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -4px 0 30px rgba(30, 58, 95, 0.4);
}

.mobile-menu-header {
  background: rgba(15, 30, 50, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-menu-title {
  color: #ffffff;
}

.mobile-menu-close {
  color: rgba(255, 255, 255, 0.8);
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.mobile-nav-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-nav-item:last-child {
  border-bottom: none;
}

.mobile-nav-link {
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.15s ease;
}

.mobile-nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.mobile-nav-link .bi {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s ease;
}

.mobile-nav-link:hover .bi {
  color: #ffffff;
}

.mobile-menu-cta {
  background: rgba(15, 30, 50, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-cta-divider {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-cta-btn {
  background: linear-gradient(
    135deg,
    rgba(220, 53, 69, 0.9) 0%,
    rgba(200, 35, 51, 0.85) 100%
  );
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-cta-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(220, 53, 69, 0.95) 0%,
    rgba(200, 35, 51, 0.9) 100%
  );
  border-color: rgba(220, 53, 69, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
}

/* WhatsApp button styling */
.mobile-cta-btn.whatsapp {
  background: transparent;
  border: 2px solid rgba(37, 211, 102, 0.8);
  color: rgba(37, 211, 102, 0.9);
}

.mobile-cta-btn.whatsapp:hover {
  background: rgba(37, 211, 102, 0.9);
  color: #ffffff;
  border-color: rgba(37, 211, 102, 1);
}

.mobile-cta-btn .bi {
  color: inherit;
}

/*=====================================
  MOBILE MENU LAYOUT FIXES - NAVY THEME
=====================================*/

/* Fix mobile menu layout for proper scrolling and sticky CTA */
.mobile-menu-body {
  display: flex;
  flex-direction: column;
  height: calc(100% - 80px); /* Subtract header height */
  padding: 0;
  padding-bottom: 140px; /* 140px space from bottom */
}

.mobile-nav-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

/* Mobile Dropdown Styling */
.mobile-nav-dropdown {
  position: relative;
}

.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  transition: all 0.15s ease;
  cursor: pointer;
}

.mobile-dropdown-toggle:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.mobile-dropdown-toggle i {
  color: rgba(255, 255, 255, 0.7);
  margin-right: 12px;
}

.mobile-dropdown-arrow {
  transition: transform 0.15s ease;
  color: rgba(255, 255, 255, 0.5);
  margin-left: auto;
}

.mobile-nav-dropdown.open .mobile-dropdown-arrow,
.mobile-nav-dropdown.active .mobile-dropdown-arrow {
  transform: rotate(180deg);
}

/* Mobile Dropdown Menu */
.mobile-dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
  background: rgba(0, 0, 0, 0.1);
}

.mobile-nav-dropdown.open .mobile-dropdown-menu,
.mobile-nav-dropdown.active .mobile-dropdown-menu {
  max-height: 500px;
}

.mobile-dropdown-header {
  padding: 12px 20px 8px 32px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 8px;
}

.mobile-dropdown-header:first-child {
  margin-top: 0;
}

.mobile-dropdown-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.mobile-dropdown-item:last-child {
  border-bottom: none;
}

.mobile-dropdown-link {
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 32px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.mobile-dropdown-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  padding-left: 37px;
}

.mobile-dropdown-link i {
  color: rgba(255, 255, 255, 0.6);
  margin-right: 8px;
}

.mobile-dropdown-link:hover i {
  color: rgba(255, 255, 255, 0.8);
}

/* CTA Section - Positioned higher for better visibility */
.mobile-menu-cta {
  background: linear-gradient(
    135deg,
    rgba(15, 30, 50, 0.95) 0%,
    rgba(30, 58, 95, 0.92) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px 20px;
  margin: 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.mobile-cta-divider {
  display: none; /* Hide divider in sticky design */
}

.mobile-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.15s ease;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-cta-btn:last-child {
  margin-bottom: 0;
}

.mobile-cta-btn.mobile-cta-call {
  background: linear-gradient(
    135deg,
    rgba(25, 135, 84, 0.9) 0%,
    rgba(20, 147, 65, 0.85) 100%
  );
  border: 1px solid rgba(25, 135, 84, 0.3);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(25, 135, 84, 0.2);
}

.mobile-cta-btn.mobile-cta-call:hover {
  background: linear-gradient(
    135deg,
    rgba(25, 135, 84, 0.95) 0%,
    rgba(20, 147, 65, 0.9) 100%
  );
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(25, 135, 84, 0.3);
}

.mobile-cta-btn.mobile-cta-whatsapp {
  background: transparent;
  border: 2px solid rgba(37, 211, 102, 0.8);
  color: rgba(37, 211, 102, 0.9);
}

.mobile-cta-btn.mobile-cta-whatsapp:hover {
  background: rgba(37, 211, 102, 0.9);
  color: #ffffff;
  border-color: rgba(37, 211, 102, 1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.25);
}

/* Multi-column layout for complex content */
.mobile-dropdown-menu {
  /* For future multi-column implementation */
}

/* Scrollbar styling for mobile menu */
.mobile-nav-list::-webkit-scrollbar {
  width: 4px;
}

.mobile-nav-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.mobile-nav-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.mobile-nav-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/*=====================================
  UTILITY CLASSES
=====================================*/

/* Semantic Color Classes */
.text-brand-primary {
  color: #1e3a5f;
}
.text-brand-secondary {
  color: #dc3545;
}
.text-success {
  color: #28a745;
}
.text-error {
  color: #dc3545;
}
.text-warning {
  color: #ffc107;
}
.text-info {
  color: #17a2b8;
}

.bg-brand-primary {
  background-color: #1e3a5f;
}
.bg-brand-secondary {
  background-color: #dc3545;
}
.bg-success {
  background-color: #28a745;
}
.bg-error {
  background-color: #dc3545;
}
.bg-warning {
  background-color: #ffc107;
}
.bg-info {
  background-color: #17a2b8;
}

/* Legacy Compatibility Classes */
.tooplate-red {
  color: #dc3545;
}
.tooplate-green {
  color: #1e3a5f;
}
.tooplate-black {
  color: #2c3e50;
}
.tooplate-white {
  color: #ffffff;
}

/* Button Theme Classes */
.btn-themed {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
  color: #ffffff;
}

.btn-themed:hover {
  background-color: #dc3545;
  border-color: #dc3545;
}