/* --- CSS Variables for Theming --- */
   :root {
       --bg-color: #050b14;
       --text-color: #ffffff;
       --text-muted: #9ca3af;
       --section-alt: #111827;
       /* Used for Testimonial & CTA card */
       --card-bg: transparent;
       --accent-color: #34d399;
       --accent-hover: #2ebc85;
       --modal-bg: #050b14;
       --modal-border: rgba(255, 255, 255, 0.1);
       --input-border: #374151;
   }

   /* Light Mode Overrides */
   body.light-mode {
       --bg-color: #ffffff;
       --text-color: #111827;
       --text-muted: #4b5563;
       --section-alt: #f3f4f6;
       --card-bg: #f9fafb;
       --modal-bg: #ffffff;
       --modal-border: #e5e7eb;
       --input-border: #d1d5db;
   }

   /* --- Reset & Base Styles --- */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
   }

   body {
       background-color: var(--bg-color);
       color: var(--text-color);
       line-height: 1.6;
   }

   a {
       text-decoration: none;
       color: inherit;
   }

   ul {
       list-style: none;
   }

   /* --- Layout Utilities --- */
   .headerContainer {
       max-width: 1200px;
       padding: 0 20px;
       z-index: 1;


   }

   .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;

   }

   .btn {
       display: inline-block;
       padding: 12px 24px;
       border-radius: 6px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
       font-size: 0.95rem;
       border: none;
       text-align: center;
       transition-duration: 0.4s;
       animation: ease-in-out;
   }

   .btn-primary {
       background-color: var(--accent-color);
       color: #050b14;
   }

   .btn:hover {
       transform: scale(1.08);
       background-color: transparent;
       border: 2px solid var(--accent-color);
       color: var(--accent-color);
   }

   .btn-outline {
       background: transparent;
       border: 1px solid rgba(255, 255, 255, 0.3);
       color: white;
       /* Hero buttons always white */
   }

   .btn-outline:hover {
       background: rgba(255, 255, 255, 0.1);
   }

   /* --- Dark Mode Toggle (Top Right) --- */
   .theme-toggle {
       position: fixed;
       top: 20px;
       right: 20px;
       background: var(--section-alt);
       border: 1px solid var(--input-border);
       color: var(--text-color);
       width: 45px;
       height: 45px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       z-index: 1000;
       font-size: 1.2rem;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

   .theme-toggle:hover {
       transform: scale(1.1);
   }

   /* --- Modal Styles --- */
   .modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.8);
       display: none;
       align-items: center;
       justify-content: center;
       z-index: 2000;
       opacity: 0;
       transition: opacity 0.3s ease;
       backdrop-filter: blur(5px);
   }

   .modal-overlay.active {
       display: flex;
       opacity: 1;
   }

   .modal-content {
       background: var(--modal-bg);
       padding: 40px;
       border-radius: 12px;
       width: 100%;
       max-width: 450px;
       position: relative;
       border: 1px solid var(--modal-border);
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
       color: var(--text-color);
   }

   .modal-close {
       position: absolute;
       top: 15px;
       right: 15px;
       font-size: 1.5rem;
       cursor: pointer;
       color: var(--text-muted);
   }

   .modal-header {
       margin-bottom: 25px;
   }

   .modal-header h2 {
       font-size: 1.8rem;
   }

   .form-group {
       margin-bottom: 15px;
   }

   .form-group label {
       display: block;
       margin-bottom: 8px;
       color: var(--text-muted);
       font-size: 0.9rem;
   }

   .form-group input {
       width: 100%;
       padding: 12px;
       border-radius: 6px;
       border: 1px solid var(--input-border);
       background: transparent;
       color: var(--text-color);
       font-size: 1rem;
   }

   .form-group input:focus {
       outline: none;
       border-color: var(--accent-color);
   }

   /* Hidden Success State */
   .success-message {
       display: none;
       text-align: center;
       padding: 20px 0;
   }

   .success-icon {
       font-size: 3rem;
       color: var(--accent-color);
       margin-bottom: 20px;
   }

   /* --- Header / Hero Section --- */
   /* --- Video Header Layout --- */

   header {
       position: relative;
       height: 90vh;
       /* Makes the header take up 90% of the screen height */
       min-height: 600px;
       overflow: hidden;
       /* Crucial: stops the video from spilling out of the header */
   }

   /* 1. The Video Background */
   .header-video {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       /* Stretches the video perfectly without squashing it */
       z-index: 0;
       /* Pushes the video to the very bottom layer */
   }

   /* 2. The Dark Overlay & Container Wrapper */
   .subHeader {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(5, 11, 20, 0.6);
       /* Dark tint so the white text is readable! */
       z-index: 1;
       /* Sits on top of the video */
       display: flex;
       align-items: center;
       /* Centers your text vertically */
   }

   /* 3. Your Text Content Alignment */
   .headerContainer {
       max-width: 1200px;
    
       padding: 0 20px;
       width: 100%;
   }


   /* .header-bg {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            background-color: rgba(5, 11, 20, 0.7);
        } */

   .nav-brand {
       position: absolute;
       top: 20px;
       left: 20px;
       font-size: 1.5rem;
       font-weight: 700;
       display: flex;
       align-items: center;
       gap: 10px;
       color: white;
       /* Always white on hero */
   }

   .hero-content {
       max-width: 100%;
       color: white;
       /* Always white on hero */

   }

   .hero-title {
       font-size: 3.5rem;
       line-height: 1.1;
       margin-bottom: 20px;
       font-weight: 800;
   }

   .hero-text {
       color: #d1d5db;
       /* Light gray specifically for dark hero bg */
       margin-bottom: 30px;
       font-size: 1.1rem;
   }

   .hero-buttons {
       display: flex;
       gap: 15px;
       margin-bottom: 25px;
   }

   .social-proof {
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 0.9rem;
       color: #d1d5db;
   }

   .stars {
       color: #fbbf24;
   }

   .avatar-mini {
       width: 30px;
       height: 30px;
       border-radius: 50%;
       object-fit: cover;
   }

   /* --- Features Section --- */
   .features {
       padding: 100px 0;
       background-color: var(--bg-color);
   }

   .features-layout {
       display: grid;
       grid-template-columns: 1fr 2fr;
       gap: 70px;
       align-items: start;
   }

   .features-header h2 {
       font-size: 2.5rem;
       margin-bottom: 20px;
       color: var(--text-color);
   }

   .features-header p {
       color: var(--text-muted);
   }

   /* --- Text List Layout Styles --- */
   .service-lists {
       margin-top: 25px;
       display: flex;
       flex-direction: column;
       gap: 40px;
   }

   .category-title {
       color: var(--accent-color);
       /* Teal green color */
       font-size: 1.4rem;
       margin-bottom: 20px;
       border-bottom: 1px solid var(--input-border);
       padding-bottom: 10px;
   }

   .list-card {
       margin-bottom: 22px;
   }

   .list-card h4 {
       color: var(--text-color);
       font-size: 1.1rem;
       margin-bottom: 10px;
       font-weight: 700;
   }

   .list-card ul {
       list-style-type: disc;
       padding-left: 20px;
       color: var(--text-muted);
   }

   .list-card ul li {
       margin-bottom: 8px;
       font-size: 0.95rem;
   }

   .features-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 30px;
   }

   .feature-card {
       background: transparent;
       /* In light mode, we might want a slight background or just keep it clean */
   }

   .feature-img {
       width: 100%;
       height: 200px;
       object-fit: cover;
       border-radius: 12px;
       margin-bottom: 20px;
   }

   .feature-title {
       font-size: 1.25rem;
       margin-bottom: 10px;
       font-weight: 700;
       color: var(--text-color);
   }

   .feature-desc {
       color: var(--text-muted);
       font-size: 0.95rem;
   }

   /* --- Testimonial Section --- */
   .testimonial {
       background-color: rgb(83 77 77 / .7);
       padding: 80px 0;
       text-align: center;
   }

   .quote {
       font-size: 1.5rem;
       font-weight: 600;
       max-width: 800px;
       margin: 0 auto 30px;
       line-height: 1.4;
       color: var(--text-color);
   }

   .testimonial-author {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 12px;
       color: var(--text-color);
   }

   .author-avatar {
       width: 40px;
       height: 40px;
       border-radius: 50%;
   }

   /* --- CTA Section --- */
   .cta-section {
       padding: 100px 0;
       background-color: var(--bg-color);

       height: fit-content;
   }

   .cta-card {
       background: var(--section-alt);
       padding: 80px 40px;
       border-radius: 20px;
       text-align: center;
       max-width: 900px;
       margin: 0 auto;
       position: relative;
       overflow: hidden;
       color: var(--text-color);
       max-height: fit-content;
   }

   .cta-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: radial-gradient(circle at top right, rgba(52, 211, 153, 0.1), transparent 40%);
       pointer-events: none;
   }

   .cta-title {
       font-size: 2.5rem;
       margin-bottom: 20px;
       font-weight: 800;
   }

   .cta-text {
       color: var(--text-muted);
       max-width: 600px;
       margin: 0 auto 30px;
   }

   .cta-btn {

       height: 8vh;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 20px;


   }

   /* --- Footer --- */
   footer {
       padding: 50px 0;
       text-align: center;
       border-top: 1px solid var(--input-border);
       color: var(--text-muted);
       background-color: var(--bg-color);
       font-size: 0.9rem;
   }

   .social-links {
       margin-bottom: 20px;
       display: flex;
       justify-content: center;
       gap: 20px;
   }

   .social-links a {
       font-size: 1.2rem;
       transition: color 0.3s;
       color: var(--text-muted);
   }

   .social-links a:hover {
       color: var(--text-color);
   }

   /* --- Responsive Adjustments --- */
   @media (max-width: 768px) {
       .hero-title {
           font-size: 2.5rem;
       }

       .features-layout {
           grid-column-end: auto;
           grid-template-columns: 1fr;
       }

       .hero-buttons {
           flex-direction: column;
       }
       .cta-btn{
              flex-direction: column;
       }
       .btn {
           width: 100%;
       }
   }