body, html {
      margin: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      transition: background-color 0.3s, color 0.3s;
    }

   body {
       padding-top: 60px; /* adjust to your navbar height */
       }
.navbar {
  transition: background-color 0.3s;
  padding-bottom: 0.4rem;
  position: fixed;       /* added */
  top: 0;                /* added */
  left: 0;               /* added */
  width: 100%;           /* added */
  z-index: 1030;         /* added to stay above content */
}

.navbar-brand span {
      font-weight: 700;
      color: var(--nav-text);
      font-size: 1.3rem;
}
.navbar-nav {
      display: flex;
      align-items: center;
}
.navbar-nav .nav-item {
      display: flex;
      align-items: center;
}
.navbar-nav .nav-link {
      color: var(--nav-text);
      font-weight: 500;
      padding: 0 10px;
      transition: color 0.3s;
    }
.navbar-nav .separator {
      color: rgba(255, 255, 255, 0.6);
      margin: 0 8px;
    }
.navbar-nav .nav-link:hover {
      color: #a9c9ff;
    }

/* Theme Styles */
body.light-mode {
      --bg: #f8f9fa;
      --surface: #ffffff;
      --text: #212529;
      --muted: #6c757d;
      --border: rgba(0, 0, 0, 0.12);
      --nav-bg: #0a5e73;
      --nav-text: #ffffff;
      --footer-bg: #0a5e73;
      --footer-text: #ffffff;
      background-color: var(--bg);
      color: var(--text);
    }
body.light-mode .navbar {
      background-color: var(--nav-bg);
    }

.mobile-header,
.mobile-nav-bar {
  background-color: var(--nav-bg);
}

body.light-mode .mobile-navbar {
  background-color: var(--nav-bg);
}

body.dark-mode {
      --bg: #0b0f14;
      --surface: #111827;
      --text: #e5e7eb;
      --muted: #9ca3af;
      --border: rgba(255, 255, 255, 0.08);
      --nav-bg: #0b0f14;
      --nav-text: #e5e7eb;
      --footer-bg: #0b0f14;
      --footer-text: #e5e7eb;
      background-color: var(--bg);
      color: var(--text);
    }
body.dark-mode .navbar {
      background-color: var(--nav-bg) !important;
      border-color: var(--border) !important;
    }
body.dark-mode .navbar .navbar-brand {
      background-color: transparent !important;
      color: var(--nav-text) !important;
    }

body.dark-mode .mobile-navbar,
body.dark-mode .mobile-header {
      background-color: var(--nav-bg) !important;
      border-color: var(--border) !important;
    }

body.dark-mode .mobile-nav-bar {
      background-color: var(--nav-bg) !important;
      border-color: var(--border) !important;
    }

body.dark-mode .navbar-nav .nav-link {
      color: var(--nav-text);
    }
body.dark-mode .navbar-nav .nav-link:hover {
      color: #a9c9ff;
    }
body.dark-mode .navbar-nav .separator {
      color: rgba(232, 234, 237, 0.5);
    }
body.dark-mode .navbar-brand,
body.dark-mode .navbar-brand span {
      color: var(--nav-text) !important;
    }
body.dark-mode .mobile-header,
body.dark-mode .mobile-header a,
body.dark-mode .mobile-header span {
      color: var(--nav-text) !important;
    }

body.dark-mode section,
body.dark-mode .bg-light,
body.dark-mode .bg-white {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

body.dark-mode .container,
body.dark-mode .container-fluid {
  background-color: transparent !important;
  color: inherit !important;
}

body.dark-mode .card,
body.dark-mode .feature-card,
body.dark-mode .qc-form-container,
body.dark-mode #thankYouCard {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

body.dark-mode .card-body {
  background-color: transparent !important;
  color: inherit !important;
}

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

body.dark-mode p,
body.dark-mode .lead,
body.dark-mode .text-muted,
body.dark-mode .text-secondary {
  color: var(--muted) !important;
}

body.dark-mode .hero-section,
body.dark-mode .cta-section {
  background: var(--bg) !important;
}

body.dark-mode footer {
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
}

body.dark-mode .footer-links a,
body.dark-mode .contact-section a,
body.dark-mode .footer-logo span,
body.dark-mode .mantra {
  color: var(--footer-text) !important;
}

.theme-toggle-btn {
      cursor: pointer;
      font-size: 1.3rem;
      color: var(--nav-text);
      border: none;
      background: transparent;
      margin-left: 15px;
      transition: color 0.3s;
    }
.theme-toggle-btn:hover {
      color: #a9c9ff;
    }
    /* --- Side Widget --- */
    .quick-contact-widget {
      position: fixed;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 15px;
      z-index: 9999;
    }

    .qc-button {
      border: none;
      background: none;
      cursor: pointer;
      font-size: 1.6rem;
      color: #0a5e73;
      transition: transform 0.2s;
    }
    .qc-button:hover { transform: scale(1.2); }

    /* --- Forms --- */
    .qc-form-container, #thankYouCard {
      position: fixed;
      right: 60px;
      top: 50%;
      transform: translateY(-50%);
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 0 6px 15px rgba(0,0,0,0.3);
      padding: 25px;
      width: 400px;
      max-width: 90%;
      display: none;
      flex-direction: column;
      gap: 15px;
      z-index: 10000;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
    }

    /* --- Slide Animation --- */
    .slide-in { animation-name: slideIn; }
    .slide-out { animation-name: slideOut; }
    @keyframes slideIn {
      from { transform: translate(100%, -50%); opacity: 0; }
      to   { transform: translateY(-50%); opacity: 1; }
    }
    @keyframes slideOut {
      from { transform: translateY(-50%); opacity: 1; }
      to   { transform: translate(100%, -50%); opacity: 0; }
    }

    .qc-form-container h4 {
      margin-bottom: 15px;
      color: #0a5e73;
      font-size: 1.2rem;
      font-weight: 700;
    }

    .qc-form-container input,
    .qc-form-container textarea,
    .qc-form-container select,
    .qc-form-container button {
      font-size: 1rem;
    }

    .qc-form-container input,
    .qc-form-container select,
    .qc-form-container textarea {
      width: 100%;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
    }

    .qc-form-container textarea {
      min-height: 100px;
      resize: vertical;
    }

    .qc-form-container button.submit-btn {
      background-color: #0a5e73;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 10px 15px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
    }
    .qc-form-container button.submit-btn:hover {
      background-color: #07565e;
      transform: scale(1.05);
    }

    /* Thank you card */
    #thankYouCard {
      text-align: center;
      align-items: center;
    }
    #thankYouCard img { height: 50px; margin-bottom: 10px; }
    #thankYouCard span {
      font-weight: 700;
      color: #0a5e73;
      font-size: 1.3rem;
      margin-bottom: 10px;
    }

    /* Country code + phone group */
    .phone-group {
      display: flex;
      gap: 8px;
    }
    .phone-group select { flex: 1; }
    .phone-group input { flex: 2; }
    /* Colored icons inside forms */
    .call-number i {
      color: #0a5e73;
      font-size: 1.2rem;
    }

    /* --- Custom Call Form Styling --- */
    .call-header {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .call-header img {
      height: 40px;
    }

    .call-header h5 {
      margin: 0;
      font-weight: 600;
      font-size: 1.1rem;
      color: #333;
    }

    .call-card {
      text-align: center;
      position: relative;
    }
    .call-number {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 1.1rem;
      font-weight: 600;
      padding: 12px 0;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      margin-bottom: 10px;
      transition: all 0.3s ease;
      background-color: #f9f9f9;
      cursor: pointer;
    }
    .call-number:hover {
      background-color: #e8f5e9;
      transform: scale(1.03);
      border-color: #28a745;
    }

    /* Copied message */
    .copied-msg {
      position: absolute;
      top: -25px;
      background-color: #28a745;
      color: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 0.9rem;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }
    .copied-msg.show { opacity: 1; }

    /* --- Dark Mode Form Text & Buttons & Thank You Card --- */
    body.dark-mode .qc-form-container,
    body.dark-mode #thankYouCard {
      background-color: var(--surface);
      color: var(--text);
      border-color: var(--border);
    }

    body.dark-mode .qc-form-container input,
    body.dark-mode .qc-form-container select,
    body.dark-mode .qc-form-container textarea {
      background-color: var(--surface);
      color: var(--text);
      border-color: var(--border);
    }

    body.dark-mode .qc-form-container input::placeholder,
    body.dark-mode .qc-form-container textarea::placeholder {
      color: var(--muted);
    }

    body.dark-mode .qc-form-container button.submit-btn {
      background-color: #0a5e73;
      color: #ffffff;
    }

    body.dark-mode .qc-form-container button.submit-btn:hover {
      background-color: #07565e;
      color: #ffffff;
    }

    /* This is the updated part: dark mode for call form header & paragraph text */
    body.dark-mode .call-header h5,
    body.dark-mode .qc-form-container p.text-muted {
      color: var(--text);
    }

    body.dark-mode .call-number {
      background-color: var(--surface);
      color: var(--text);
      border-color: var(--border);
    }

    body.dark-mode .call-number:hover {
      background-color: #0a5e73;
    }

    /* Widget icons: white in dark mode but keep light theme behavior */
    body.dark-mode .quick-contact-widget .qc-button {
      color: #ffffff !important;
    }
    body.dark-mode .call-header h5,
    body.dark-mode .qc-form-container p.text-muted {
      color: #ffffff !important;
    }

       footer {
      background-color: var(--footer-bg);
      color: var(--footer-text);
      padding: 25px 60px 15px 60px;
      font-weight: 350;
      font-size: 0.9rem;
      margin-top: auto;
      display: flex;
      flex-direction: column;
      transition: background-color 0.3s, color 0.3s;
    }

    .footer-content {
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 15px;
    }

    .footer-section-logo {
      flex: 1;
      min-width: 280px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 5px;
    }

    .footer-logo img { width: 30px; height: 30px; }
    .footer-logo { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
    .footer-logo span { font-size: 1.2rem; font-weight: 600; color: var(--footer-text); }
    .footer-logo a { text-decoration: none; color: inherit; }
    .mantra { font-style: italic; font-size: 0.95rem; font-weight: 400; color: var(--footer-text); margin: 3px 0 5px 0; }
    .social-icons { margin-top: 5px; }

    .footer-links {
      flex: 1;
      min-width: 280px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }

    .links-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 5px; }
    .footer-links h6 { font-weight: 500; margin-bottom: 8px; text-align: left; color: var(--footer-text); }
    .footer-links a {
      color: var(--footer-text);
      text-decoration: none;
      display: flex;
      align-items: center;
      font-weight: 350;
      font-size: 0.9rem;
      transition: color 0.3s;
    }
    .footer-links a i { margin-right: 12px; }
    .footer-links a i.bi-house-door { color: #ff6b6b; }
    .footer-links a i.bi-info-circle { color: #feca57; }
    .footer-links a i.bi-box-seam { color: #1dd1a1; }
    .footer-links a i.bi-people { color: #09f21c; }

    .footer-links a[href="index.html"]:hover { color: #ff6b6b; }
    .footer-links a[href="#"]:nth-of-type(2):hover { color: #feca57; }
    .footer-links a[href="#"]:nth-of-type(3):hover { color: #1dd1a1; }
    .footer-links a[href="#"]:nth-of-type(4):hover { color: #09f21c; }

    .contact-section {
      flex: 1;
      min-width: 280px;
      text-align: left;
      line-height: 1.5;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .contact-section h6 {
      font-weight: 500;
      margin-bottom: 8px;
      text-align: center;
      color: var(--footer-text);
    }

    .contact-item { margin-bottom: 5px; }
    .contact-item i.bi-geo-alt { color: #ff6b6b; }
    .contact-item i.bi-envelope { color: #feca57; }
    .contact-item i.bi-telephone { color: #1dd1a1; }
    .contact-item i.bi-whatsapp { color: #25d366; }
    .contact-item i.bi-telegram { color: #0088cc; }

    .contact-section a {
      color: var(--footer-text);
      text-decoration: none;
      font-weight: 350;
      font-size: 0.9rem;
      transition: color 0.3s;
    }

    .contact-section a[href*="maps"]:hover { color: #ff6b6b; }
    .contact-section a[href*="mailto"]:hover { color: #feca57; }
    .contact-section a[href="tel:+251912138528"]:hover { color: #1dd1a1; }
    .contact-section a[href="tel:+251925056238"]:hover { color: #1dd1a1; }
    .contact-section a[href*="wa.me"]:hover { color: #25d366; }
    .contact-section a[href*="t.me"]:hover { color: #0088cc; }

    .social-icons a {
      margin: 0 8px;
      font-size: 1.4rem;
      transition: transform 0.3s, opacity 0.3s;
    }

    .bi-linkedin { color: #02a2f8; }
    .bi-facebook { color: #1877f2; }
    .bi-instagram { color: #f90505; }
    .bi-twitter-x { color: #0769fb; }
    .bi-envelope { color: #ea4335; }

    .social-icons a:hover { transform: scale(1.2); opacity: 0.85; }

    .footer-divider {
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      margin: 25px 0 10px 0;
      transition: border-color 0.3s;
    }

    body.dark-mode footer { background-color: var(--footer-bg); color: var(--footer-text); }
    body.dark-mode .footer-links a,
    body.dark-mode .contact-section a { color: var(--footer-text); }
    body.dark-mode .footer-links a:hover,
    body.dark-mode .contact-section a:hover { color: inherit; }
    body.dark-mode .footer-divider { border-color: rgba(232,234,237,0.5); }
    /* Footer shadow or border in dark mode */
    body.dark-mode footer,
    html.dark-mode footer {
      box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.6);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

  .text-theme { color: #0a5e73; }
  /* Mobile  styles */
@media (max-width: 991px) {
    body {
    padding-top: 0; /* no initial padding since navigation scrolls */
     }
      .navbar-collapse {
        display: none !important;
      }
   .desktop-navbar-logo {
        display: none !important;
      }

    /* Mobile Header Bar */
    .mobile-header {
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    font-weight: 600;
    transition: background-color 0.3s;
    position: relative;
    width: 100vw !important;
    padding: 10px 15px;
    height: 50px;
    box-sizing: border-box;
    z-index: 1000;
    }

    .mobile-header a {
      color: white !important;
    }

    /* Mobile Navigation Bar */
    .mobile-nav-bar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    position: relative;
    width: 100vw !important;
    height: 60px !important;
    min-height: 60px !important;
    box-sizing: border-box;
    overflow: visible !important;
    background-color: var(--nav-bg) !important;
    z-index: 1001;
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap !important;
    }

    /* Mobile navigation bar - always sticky */
    .mobile-nav-bar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1031 !important;
    }
    
    /* Sticky navigation bar class (JavaScript fallback) */
    .mobile-nav-bar.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1031 !important;
    width: 100vw !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }

    .mobile-nav-bar.sticky .nav-logo {
      display: inline-block !important;
    }

    .mobile-nav-list {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px;
    min-width: max-content;
    }

    .mobile-nav-item {
    display: flex;
    align-items: center;
    }

    .mobile-nav-link {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    text-decoration: none;
    color: #ffffff !important;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
    background: transparent;
    border: none;
    }

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

    .mobile-nav-link.active {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .mobile-nav-item {
    position: relative;
    }

    .mobile-nav-link-logo {
    display: flex;
    align-items: center;
    padding: 10px 8px;
    text-decoration: none;
    background: transparent;
    border: none;
    margin-right: 5px;
    }

      /* Force navbar to never overflow */
    .mobile-header, 
    .mobile-nav-bar,
    .navbar {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    .nav-link {
        padding: 0.25rem 0.5rem;
      }

      .qc-form-container {
        width: 80%;
        padding: 20px;
      }
      .qc-form-container textarea { min-height: 80px; }
      footer { padding: 20px 30px; }
      .footer-content { flex-direction: column; align-items: center; gap: 30px; }
      .footer-section-logo, .footer-links, .contact-section { flex: none; width: 100%; text-align: center; }

      /* Remove heading lines in mobile */
      .footer-links h6::after,
      .contact-section h6::after {
        content: none;
      }

      /* Links, contact, mantra, copyright lighter and softer */
      .footer-links a,
      .contact-section a,
      .mantra,
      .text-center {
        font-weight: 350 !important;
        color: rgba(255,255,255,0.85);
      }

      /* Make first section slightly bolder */
      .footer-section-logo span,
      .footer-section-logo .mantra {
        font-weight: 500 !important;
        color: rgba(255,255,255,0.9);
      }

      .footer-links .links-grid { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-left: 0; }
      .footer-links a { font-size: 0.9rem; }
      .contact-section .contact-item { display: flex; justify-content: center; gap: 5px; margin-bottom: 6px; }
      .contact-section a { font-size: 0.9rem; }
      .mantra { font-size: 0.9rem; }
      .social-icons a { font-size: 1.2rem; }
      .text-center { font-size: 0.9rem; }
      .social-icons { justify-content: center; }

      /* Section dividers in mobile except after last section */
      .footer-content > div:not(:last-child) {
        border-bottom: 1px solid rgba(255,255,255,0.2);
        padding-bottom: 20px;
        margin-bottom: 20px;
      }
      body.dark-mode .footer-content > div:not(:last-child) {
        border-color: rgba(232,234,237,0.3);
      }

 }


@media (min-width: 992px) {
      .mobile-navbar,
      .mobile-header,
      .mobile-nav-bar {
        display: none !important;
      }
    }