:root {
    /* Color Scheme */
    --primary: #1755aa;
    --primary-light: #4895ef;
    --primary-dark: #3a0ca3;
    --secondary: #f72585;
    --success: #4cc9f0;
    --danger: #f94144;
    --warning: #f8961e;
    --info: #43aa8b;
    --dark: #212529;
    --light: #f8f9fa;
    
    /* Status Colors */
    --status-online: var(--success);
    --status-offline: var(--danger);
    --status-idle: var(--warning);
    --status-boost: #9b59b6;
    
    /* Card Styles */
    --card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    --card-radius: 0.5rem;
    
    /* Animation */
    --transition-speed: 0.3s;
    
    /* Dark Mode Colors - Base */
    --bg-dark: #1a1a2e; /* Dark background for body */
    --card-dark: #16213e; /* Dark background for cards */
    --text-dark: #e6e6e6; /* Light text color for dark mode */
    --border-dark: #2d3748; /* Darker border color */
    --header-dark: #1b2640; /* Slightly lighter dark for headers/navbars */
    
    /* Boost Mode Button */
    --boost-active-bg: var(--warning);
    --boost-active-border: var(--warning);
    --boost-active-text: var(--dark);
    --boost-active-glow: rgba(248, 150, 30, 0.5);
    --boost-glow-size: 0.25rem;

    /* About Us Page specific variables */
    --hero-bg-light: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    --hero-bg-dark: linear-gradient(135deg, var(--header-dark), #101828); /* Darker gradient for hero in dark mode */
    --cta-bg-light: var(--primary);
    --cta-bg-dark: var(--card-dark); /* Using card-dark for CTA in dark mode */
  }
  
  /* Dark Mode Styles */
  [data-bs-theme="dark"] {
    --bs-body-bg: var(--bg-dark);
    --bs-body-color: var(--text-dark);
    --primary: var(--primary-light); /* Make primary color lighter in dark mode */

    /* Apply to html and body directly */
    body, html { 
      background-color: var(--bs-body-bg);
      color: var(--bs-body-color);
    }

    /* Apply background and text color to common elements that might not be cards */
    .modal-body, .form-control, select {
        background-color: var(--bs-body-bg); 
        color: var(--bs-body-color); 
    }
    .footer_container{
        background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important; 
        color: var(--text-dark); 
    }
    
    /* Card and Modal Backgrounds */
    .card, .modal-content {
      background-color: var(--card-dark);
      border-color: var(--border-dark);
    }

    /* Ensure all text within cards is light in dark mode */
    .card h1,
    .card h2,
    .card h3,
    .card h4,
    .card h5,
    .card h6,
    .card p,
    .card span,
    .card div { 
        color: var(--text-dark) !important; 
    }

    /* Headings outside cards but within main body context */
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-dark) !important;
    }

    /* Inputs within dark mode forms */
    .form-control, .form-select {
        background-color: var(--card-dark) !important; 
        color: var(--text-dark) !important; 
        border-color: var(--border-dark) !important;
    }
    .form-control::placeholder {
        color: rgba(230, 230, 230, 0.7) !important; 
    }
    .form-check-label {
        color: var(--text-dark) !important;
    }


    /* Muted Text Color */
    .text-muted {
      color: #a0aec0 !important; 
    }
    
    /* Table Styling */
    .table {
      --bs-table-color: var(--text-dark);
      --bs-table-bg: transparent;
      --bs-table-border-color: var(--border-dark);
    }
    
    .table-hover tbody tr:hover {
      --bs-table-accent-bg: rgba(255, 255, 255, 0.05);
    }

    /* Table Headers */
    .table thead th {
        color: var(--text-dark); 
        border-bottom-color: var(--border-dark);
    }
    
    /* Dark Mode Boost Button Adjustments */
    --boost-active-text: var(--text-dark);

    /* Navbar background in dark mode */
    .bg-navbar {
      background-color: var(--header-dark) !important; 
    }

    /* Specific text colors for navbar and social links */
    .navbar-brand,
    .navbar-nav .nav-link,
    .social-links a {
      color: var(--text-dark) !important;
    }
    .navbar-nav .nav-link.active {
        color: var(--primary-light) !important; 
    }
    /* Icons */
    .fa-air-freshener, .fa-chart-line, .fa-exclamation-triangle, .fa-sliders-h, .fa-cog, .fa-history, .fa-tachometer-alt, .fa-info-circle, .moon-color {
        color: var(--text-dark) !important; 
    }

    /* Ensure primary color for icons/headings uses primary-light in dark mode */
    .text-primary-tailwind-fix {
        color: var(--primary-light) !important; 
    }

    /* Modal specific dark mode adjustments */
    .modal-header {
        background-color: var(--header-dark);
        border-bottom-color: var(--border-dark);
        color: var(--text-dark);
    }
    .modal-title {
        color: var(--text-dark);
    }
    .modal-body {
        background-color: var(--card-dark);
        color: var(--text-dark); 
    }
    .modal-footer {
        background-color: var(--header-dark);
        border-top-color: var(--border-dark);
    }

    /* NEW: About Us Page Dark Mode Overrides */
    .hero-section {
        background: var(--hero-bg-dark) !important;
    }
    .hero-section h1, .hero-section p, .hero-section .btn {
        color: var(--text-dark) !important; /* Ensure hero text is light */
    }
    .call-to-action-section {
        background: var(--cta-bg-dark) !important;
    }
    .call-to-action-section h2, .call-to-action-section p, .call-to-action-section .btn {
        color: var(--text-dark) !important; /* Ensure CTA text is light */
    }
    /* Ensure main content container is not white */
    .main-content-section {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
        border-color: var(--border-dark) !important;
    }
    /* Borders for team member cards */
    .team-member-card {
        border-color: var(--border-dark) !important;
    }
  }
  
  /* Base Styles */
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color var(--transition-speed) ease;
  }
  
  /* Card Styles */
  .card {
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: all var(--transition-speed) ease;
    overflow: hidden;
  }
  
  .card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
  }
  
/* More specific solution if needed */
.row.g-4 > .col-md-6.col-lg-3 {
    display: flex;
  }
  
  .stat-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border-left: 4px solid;
  }
  
  .stat-card .card-body {
    flex-grow: 1;
    padding: 1.25rem;
  }


  .bg-navbar{
    background-color: var(--primary); /* Default light mode navbar color */
  }
  
  .moon-color{
    color:white ;
  }


  .ozone-card {
    border-left-color: var(--primary);
  }
  
  .temp-card {
    border-left-color: var(--danger);
  }
  
  .humidity-card {
    border-left-color: var(--info);
  }
  
  .status-card {
    border-left-color: var(--warning);
  }
  /* Add to your existing CSS */

.status-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--status-offline);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-title {
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 600;
}
  /* Boost Mode Button Styles */
  #boostBtn {
    transition: all var(--transition-speed) ease;
  }
  
  #boostBtn.active {
    background-color: var(--boost-active-bg);
    border-color: var(--boost-active-border);
    color: var(--boost-active-text);
    box-shadow: 0 0 0 var(--boost-glow-size) var(--boost-active-glow);
  }
  
  #boostBtn.active:hover {
    background-color: var(--boost-active-bg);
    border-color: var(--boost-active-border);
  }
  
  /* Status Indicators */
  .status-indicator {
    font-weight: 500;
  }
  
  .status-indicator.safe {
    color: var(--success);
  }
  
  .status-indicator.optimal {
    color: var(--info);
  }
  
  .status-indicator.ideal {
    color: var(--primary);
  }
  
  .status-indicator.warning {
    color: var(--warning);
  }
  
  .status-indicator.danger {
    color: var(--danger);
  }
  
  /* Status Display */
  .status-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  .status-card .card-body {
    position: relative; /* Needed for absolute positioning */
    padding-top: 0.3rem; /* Make space for status badge */
  }
  
  .status-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
  }
  
  .status-circle.online {
    background-color: var(--status-online);
  }
  
  .status-circle.offline {
    background-color: var(--status-offline);
  }
  
  .status-circle.idle {
    background-color: var(--status-idle);
  }
  
  .status-circle.boost {
    background-color: var(--status-boost);
  }
  
  .status-circle.pulse {
    animation: pulse 2s infinite;
  }
  
  .status-text {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
  }
  
  /* Progress Bars */
  .progress {
    height: 6px;
    border-radius: 3px;
  }
  
  .thin-progress {
    height: 4px;
  }
  
  .progress-bar {
    transition: width 1s ease, background-color 0.5s ease;
  }
  
  /* Trend Indicators */
  .trend-indicator {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
  }
  
  .trend-indicator.up {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--danger);
  }
  
  .trend-indicator.down {
    background-color: rgba(25, 135, 84, 0.1);
    color: var(--success);
  }
  
  .trend-indicator.neutral {
    background-color: rgba(13, 110, 253, 0.1);
    color: var(--primary);
  }
  
  /* Card Values */
  .card-value {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0;
    line-height: 1;
  }
  
  .unit {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.7;
  }
  
/* Chart Container */
  .chart-container {
    position: relative;
    height: 250px;
    width: 100%;
  }
  
  
  #ozoneChart {
    width: 100%;
    height: 100%;
  }
  
  .ozone-status {
    transition: all 0.3s ease;
  }
  
  .ozone-status.safe {
    color: #28a745;
  }
  
  .ozone-status.warning {
    color: #ffc107;
  }
  
  .ozone-status.danger {
    color: #dc3545;
  }


  
  
  
  /* History Log */
  .table-hover tbody tr {
    transition: all var(--transition-speed) ease;
  }
  
  /* Animations */
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* NEW: Button Glow Effect */
  .custom-btn-glow {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  .custom-btn-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2); /* Light glow */
    border-radius: 50%;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    transform: translate(-50%, -50%);
    z-index: 0;
  }
  .custom-btn-glow:hover::before {
    width: 200%;
    height: 200%;
    opacity: 1;
  }
  .custom-btn-glow > * { /* Ensure text/icon are on top of glow */
    position: relative;
    z-index: 1;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .card-value {
      font-size: 1.75rem;
    }
    
    .status-text {
      font-size: 1.1rem;
    }
    
    .btn-lg {
      padding: 0.75rem;
      font-size: 1rem;
    }
  
    /* Boost Button Mobile Adjustments */
    #boostBtn.active {
      --boost-glow-size: 0.15rem; /* Smaller glow on mobile */
    }

    /* About Us specific responsive adjustments */
    .hero-section h1 {
        font-size: 3rem; /* Adjust font size for mobile */
    }
    .hero-section p {
        font-size: 1.1rem;
    }
  }

  /* NEW: About Us Page Specific Styles */
  .hero-section {
    background: var(--hero-bg-light); /* Default light mode background */
    background-size: cover;
    background-position: center;
    color: #fff; /* White text on hero */
    position: relative;
    overflow: hidden;
  }

  .main-content-section {
      background-color: var(--light); /* Default white background for content container */
      box-shadow: var(--card-shadow);
      border-radius: var(--card-radius);
      border: 1px solid rgba(0,0,0,0.1);
  }

  /* NEW: Team Member Card Design */
  .team-member-card {
      position: relative;
      overflow: hidden; /* Crucial for containing the image and overlay */
      height: 350px; /* Fixed height for consistent cards. Adjust as needed */
      display: flex; /* Helps align content vertically */
      align-items: flex-end; /* Pushes overlay to the bottom initially */
      border: none !important; /* Remove any default card border */
      padding: 0 !important; /* Remove any default card padding */
      border-radius: var(--card-radius); /* Use global card radius */
      box-shadow: var(--card-shadow); /* Use global card shadow */
      cursor: pointer;
      isolation: isolate; /* Creates new stacking context for z-index */
  }

  .team-member-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Ensures the image covers the card area */
      transition: transform 0.5s ease;
      z-index: 1; /* Below overlay */
  }

  .team-member-card:hover .team-member-image {
      transform: scale(1.08); /* Slight zoom on hover */
  }

  .team-member-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.6) 50%, transparent); /* Dark gradient overlay */
      padding: 1.5rem 1rem; /* Adjust padding for text */
      color: #fff; /* Default text color for overlay */
      transform: translateY(100%); /* Start off-screen */
      transition: transform 0.4s ease-out, opacity 0.4s ease-out; /* Smooth slide and fade */
      opacity: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      text-align: center; /* Center overlay text */
      z-index: 2; /* Above image */
  }

  .team-member-card:hover .team-member-overlay {
      transform: translateY(0); /* Slide up on hover */
      opacity: 1; /* Fade in on hover */
  }

  /* Ensure text within overlay is readable */
  .team-member-overlay h4,
  .team-member-overlay p,
  .team-member-overlay .social-icons a {
      color: #fff !important; /* Force white text */
  }
  .team-member-overlay .social-icons a:hover {
      color: var(--primary-light) !important; /* Lighter primary color on hover for icons */
  }

  .call-to-action-section {
    background-color: var(--cta-bg-light); /* Default primary color for CTA */
    color: #fff;
    margin-top: 3rem; /* Spacing from previous section */
    padding: 3rem 1.5rem; /* More padding */
    border-radius: var(--card-radius);
  }
  .call-to-action-section .btn {
      border-radius: 9999px; /* Pill button */
      font-weight: 600;
  }