:root {
      --primary-blue: #0d1b4d;
      /* Dark Blue from screenshot */
      --solar-green: #22c55e;
      /* Vibrant Green */
      --white: #ffffff;
      --text-gray: #4b5563;
      --og-blue: #0d1b4d;
            --og-green: #22c55e;
            --og-white: #ffffff;
            --og-light: #f1f5f9;
               --off-blue: #0d1b4d;
            --off-green: #22c55e;
            --off-white: #ffffff;
            --off-light: #f1f5f9;
                --hyb-blue: #0d1b4d;
            --hyb-green: #22c55e;
            --hyb-white: #ffffff;
            --hyb-light: #f1f5f9;
              --ind-blue: #0d1b4d;
            --ind-green: #22c55e;
            --ind-white: #ffffff;
            --ind-light: #f8fafc;
             --vns-blue: #0d1b4d;
            --vns-green: #22c55e;
            --vns-white: #ffffff;
            --vns-light: #f4f7f6;
             --hr-blue: #0d1b4d;
            --hr-green: #22c55e;
            --hr-white: #ffffff;
            --hr-light: #fdfdfd;
            --wh-blue: #0d1b4d;
            --wh-green: #22c55e;
            --wh-white: #ffffff;
            --wh-light: #f4f8fb;
             --primary-blue: #0d1b4d;
            --solar-green: #22c55e;
            --tab-active-bg: #e8edff;
            --text-gray: #4b5563;
            --border-color: #e5e7eb;
       
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
  }

  body {
      background-color: var(--white);
  }

  /* --- Navigation Bar --- */
  header {
      background: var(--white);
      padding: 15px 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .logo {
      font-size: 22px;
      font-weight: 700;
      color: var(--primary-blue);
      text-decoration: none;
      display: flex;
      align-items: center;
  }

  .logo span {
      color: var(--solar-green);
  }

  .nav-links {
      display: flex;
      list-style: none;
      align-items: center;
  }

  .nav-links li {
      position: relative;
      margin: 0 15px;
  }

  .nav-links a {
      text-decoration: none;
      color: var(--primary-blue);
      font-weight: 500;
      font-size: 15px;
      transition: 0.3s;
  }

  .nav-links a:hover {
      color: var(--solar-green);
  }

  /* Dropdown Styling */
  .dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: var(--white);
      min-width: 250px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      padding: 10px 0;
      /* margin-top: 10px; */
  }

  .nav-links li:hover .dropdown-menu {
      display: block;
  }

  .dropdown-menu a {
      padding: 10px 20px;
      display: block;
      font-size: 14px;
      border-bottom: 1px solid #f3f4f6;
  }

  .dropdown-menu a:last-child {
      border: none;
  }

  .nav-cta {
      background: var(--primary-blue);
      color: white !important;
      padding: 10px 22px;
      border-radius: 50px;
      font-weight: 600;
      margin-left: 20px;
  }

  /* Mobile Menu Icon */
  .mobile-menu-btn {
      display: none;
      font-size: 24px;
      color: var(--primary-blue);
      cursor: pointer;
  }

  /* --- Hero Section --- */
  .hero {
      position: relative;
      height: 90vh;
      min-height: 500px;
    background-size: cover;
    background-position: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
      padding: 0 20px;
  }

  .hero h1 {
      font-size: clamp(2rem, 5vw, 4rem);
      font-weight: 700;
      margin-bottom: 10px;
  }

  .hero p {
      font-size: clamp(1rem, 2vw, 1.5rem);
      margin-bottom: 30px;
  }

  .hero-btn {
      background: var(--primary-blue);
      color: white;
      padding: 15px 35px;
      text-decoration: none;
      border-radius: 50px;
      font-weight: 600;
      font-size: 18px;
      transition: 0.3s;
      border: 2px solid transparent;
  }

  .hero-btn:hover {
      background: var(--solar-green);
  }

  /* Google Rating Badge */
  .rating-badge {
      position: absolute;
      bottom: 40px;
      background: white;
      padding: 10px 25px;
      border-radius: 50px;
      display: flex;
      align-items: center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      color: #333;
      max-width: 90%;
  }

  .rating-badge img {
      width: 30px;
      margin-right: 15px;
  }

  .rating-badge .text {
      text-align: left;
  }

  .rating-badge .text b {
      color: var(--primary-blue);
  }

  .rating-badge .text span {
      color: #4285F4;
      font-size: 13px;
      font-weight: 600;
  }


  /* --- Solar Solutions Section CSS --- */
  .solutions-section {
      padding: 80px 5%;
      background-color: #ffffff;
  }

  .container {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
  }

  .section-title {
      font-size: 32px;
      color: #0d1b4d;
      /* Primary Blue */
      font-weight: 700;
      margin-bottom: 10px;
  }

  .section-subtitle {
      color: #666;
      margin-bottom: 50px;
      font-size: 16px;
  }

  /* Grid Layout */
  .solutions-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      /* 4 Cards in a row for Desktop */
      gap: 25px;
  }

  /* Individual Card Styling */
  .solution-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-align: left;
      display: flex;
      flex-direction: column;
  }

  .solution-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }

  .card-img img {
      width: 100%;
      height: 200px;
      object-fit: cover;
  }

  .card-content {
      padding: 20px;
      flex-grow: 1;
  }

  .card-content h3 {
      font-size: 20px;
      color: #0d1b4d;
      margin-bottom: 12px;
      font-weight: 600;
  }

  .card-content p {
      font-size: 14px;
      color: #555;
      line-height: 1.6;
      margin-bottom: 20px;
  }

  /* Learn More Link (Green color) */
  .learn-more {
      text-decoration: none;
      color: #22c55e;
      /* Solar Green */
      font-weight: 600;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: 0.3s;
  }

  .learn-more:hover {
      gap: 12px;
      color: #0d1b4d;
  }

  /* --- Trusted By Section CSS --- */
  .trusted-section {
      padding: 60px 0;
      background-color: #ffffff;
      /* White background as requested */
      overflow: hidden;
  }

  /* Slider Container */
  .slider-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 20px 0;
  }

  /* The Track that moves */
  .logo-track {
      display: flex;
      width: calc(250px * 10);
      /* Logo width * total logos (original + duplicate) */
      animation: scroll 20s linear infinite;
      /* Auto move animation */
  }

  /* Individual Slide */
  .slide {
      width: 250px;
      /* Logo area width */
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 40px;
  }

  .slide img {
      max-width: 150px;
      max-height: 60px;
      filter: grayscale(100%);
      /* Logos grayscale by default for professional look */
      opacity: 0.7;
      transition: 0.3s ease;
  }

  .slide img:hover {
      filter: grayscale(0%);
      /* Color on hover */
      opacity: 1;
  }

  /* --- Animation Keyframes --- */
  @keyframes scroll {
      0% {
          transform: translateX(0);
      }

      100% {
          transform: translateX(calc(-250px * 5));
          /* Moves back half the distance */
      }
  }


  /* FAQ Section Styles */
  .faq-section {
      padding: 60px 5%;
      background-color: #fff;
  }

  .faq-section .section-title {
      text-align: center;
      font-size: 28px;
      color: #0d1b4d;
      margin-bottom: 40px;
      font-weight: 700;
  }

  /* Tabs Styling */
  .faq-tabs {
      display: flex;
      justify-content: center;
      border-bottom: 1px solid #ddd;
      margin-bottom: 30px;
      overflow-x: auto;
      /* Swipe for mobile */
      white-space: nowrap;
  }

  .tab-btn {
      padding: 12px 25px;
      border: none;
      background: none;
      font-size: 15px;
      font-weight: 600;
      color: #0d1b4d;
      cursor: pointer;
      transition: 0.3s;
      border-bottom: 3px solid transparent;
  }

  .tab-btn.active {
      background-color: #0d1b4d;
      /* Dark Blue */
      color: #fff;
      border-radius: 5px 5px 0 0;
  }

  /* Wrapper Layout */
  .faq-content-wrapper {
      display: flex;
      gap: 40px;
      align-items: flex-start;
  }

  .faq-accordion-container {
      flex: 1;
  }

  /* Accordion Styling */
  .tab-content {
      display: none;
  }

  .tab-content.active {
      display: block;
  }

  .accordion-item {
      border-bottom: 1px solid #eee;
      padding: 15px 0;
  }

  .accordion-header {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-weight: 500;
      color: #333;
      font-size: 15px;
  }

  .accordion-header .icon {
      color: #22c55e;
      /* Green Icon */
      font-weight: bold;
      font-size: 20px;
      margin-right: 15px;
      transition: 0.3s;
  }

  .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
      padding-left: 30px;
  }

  .accordion-body p {
      padding-top: 10px;
      color: #666;
      font-size: 14px;
  }

  .accordion-item.active .icon {
      transform: rotate(45deg);
      /* Plus becomes Cross */
      color: #0d1b4d;
  }

  .accordion-item.active .accordion-body {
      max-height: 200px;
  }

  /* Expert Image Styling */
  .faq-image {
      flex: 0.8;
      display: flex;
      justify-content: center;
  }

  .expert-circle {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      overflow: hidden;
      border: 10px solid #f4f7f6;
      background: #00AEEF;
      /* Sky blue background like screenshot */
  }

  .expert-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  /* --- In the News Section CSS --- */
  .news-section {
      padding: 60px 5%;
      background-color: #ffffff;
  }

  .news-main-title {
      font-size: 32px;
      font-weight: 700;
      color: #1a1a1a;
      /* Blackish Blue */
      margin-bottom: 30px;
      text-align: left;
  }

  /* Grid Layout */
  .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* Desktop: 3 columns */
      gap: 30px;
  }

  .news-card {
      background: transparent;
      display: flex;
      flex-direction: column;
  }

  .news-img {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 15px;
  }

  .news-img img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      transition: transform 0.3s ease;
  }

  .news-card:hover .news-img img {
      transform: scale(1.05);
  }

  /* Text Content */
  .news-info {
      text-align: left;
  }

  .news-date {
      font-size: 11px;
      font-weight: 600;
      color: #777;
      text-transform: uppercase;
      margin-bottom: 8px;
      letter-spacing: 0.5px;
  }

  .news-headline {
      font-size: 17px;
      font-weight: 700;
      line-height: 1.4;
      color: #0d1b4d;
      /* Theme Blue */
      margin-bottom: 15px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      /* Max 3 lines */
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .read-more-link {
      font-size: 14px;
      font-weight: 600;
      color: #3b82f6;
      /* Link Blue */
      text-decoration: underline;
      transition: color 0.3s;
  }

  .read-more-link:hover {
      color: #22c55e;
      /* Green on hover */
  }

  /* Pagination Dots */
  .news-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 40px;
  }

  .dot {
      width: 6px;
      height: 6px;
      background-color: #ddd;
      border-radius: 50%;
  }

  .dot.active {
      background-color: #333;
      width: 8px;
      height: 8px;
  }

  /* --- Footer Styling --- */
  .main-footer {
      background-color: #0d1b4d;
      /* Theme Dark Blue */
      color: #ffffff;
      padding: 60px 5% 20px;
      font-size: 14px;
  }

  .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.2fr 1fr 1.2fr;
      /* 3 Columns */
      gap: 40px;
  }

  .footer-col h4 {
      color: #ffffff;
      font-size: 18px;
      margin-bottom: 25px;
      position: relative;
      padding-bottom: 10px;
      font-weight: 600;
  }

  .footer-col h4::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 40px;
      height: 2px;
      background-color: #22c55e;
      /* Solar Green Accent */
  }

  /* Logo in Footer */
  .footer-logo {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 20px;
  }

  .footer-logo span {
      color: #22c55e;
  }

  .about-col p {
      color: #cbd5e1;
      line-height: 1.6;
      margin-bottom: 20px;
  }

  /* Links Styling */
  .footer-col ul {
      list-style: none;
      padding: 0;
  }

  .footer-col ul li {
      margin-bottom: 12px;
  }

  .footer-col ul li a {
      color: #cbd5e1;
      text-decoration: none;
      transition: 0.3s;
  }

  .footer-col ul li a:hover {
      color: #22c55e;
      padding-left: 5px;
  }

  /* Contact Items */
  .contact-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15px;
  }

  .contact-item i {
      color: #22c55e;
      /* Green Icons */
      margin-right: 15px;
      margin-top: 5px;
      font-size: 16px;
  }

  .contact-item p,
  .contact-item a {
      color: #cbd5e1;
      text-decoration: none;
      line-height: 1.5;
  }

  /* Social Icons */
  .social-links {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
  }

  .social-links a {
      width: 35px;
      height: 35px;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #fff;
      transition: 0.3s;
  }

  .social-links a:hover {
      background: #22c55e;
      transform: translateY(-3px);
  }

  .made-in {
      font-weight: 600;
      color: #ffffff;
      margin-top: 10px;
  }

  /* Bottom Bar */
  .footer-bottom {
      margin-top: 50px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #94a3b8;
      font-size: 12px;
  }

  .bottom-links a {
      color: #94a3b8;
      text-decoration: none;
      margin-left: 20px;
  }

  /* --- Why Choose Us Section CSS --- */
  .why-choose-us {
      padding: 80px 5%;
      background-color: #f8fafc;
      /* Very light gray/blue background */
      text-align: center;
  }

  .why-choose-us .section-title {
      color: #0d1b4d;
      /* Theme Blue */
      font-size: 32px;
      margin-bottom: 10px;
      font-weight: 700;
  }

  .why-choose-us .section-subtitle {
      color: #64748b;
      margin-bottom: 50px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
  }

  /* Grid Layout */
  .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      /* Desktop: 4 Columns */
      gap: 25px;
      max-width: 1200px;
      margin: 0 auto;
  }

  /* Card Styling */
  .why-card {
      background: #ffffff;
      padding: 30px 20px;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(13, 27, 77, 0.05);
      transition: all 0.3s ease;
      border-bottom: 4px solid transparent;
  }

  .why-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 35px rgba(13, 27, 77, 0.1);
      border-bottom: 4px solid #22c55e;
      /* Solar Green hover effect */
  }

  /* Icon Styling */
  .why-icon {
      width: 60px;
      height: 60px;
      background: rgba(34, 197, 94, 0.1);
      /* Light Green background */
      color: #22c55e;
      /* Solar Green Icon */
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      margin: 0 auto 20px;
      transition: 0.3s;
  }

  .why-card:hover .why-icon {
      background: #22c55e;
      color: #ffffff;
  }

  .why-card h3 {
      color: #0d1b4d;
      font-size: 18px;
      margin-bottom: 15px;
      font-weight: 600;
  }

  .why-card p {
      color: #64748b;
      font-size: 14px;
      line-height: 1.6;
  }

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

  /* Section Title Global */
  .section-tag {
      color: var(--solar-green);
      font-weight: 600;
      text-transform: uppercase;
      font-size: 14px;
      display: block;
      margin-bottom: 10px;
  }

  .section-head {
      font-size: 32px;
      margin-bottom: 20px;
      line-height: 1.2;
  }

 /* --- SECTION 1: MODERN HERO (Visual Background) --- */
        .hero-creative {
            position: relative;
            height: 40vh;
            min-height: 500px;
            background: url('https://images.unsplash.com/photo-1466611653911-95282fc3656b?q=80&w=2070&auto=format&fit=crop') no-repeat center center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero-creative::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, rgba(13, 27, 77, 0.9) 0%, rgba(34, 197, 94, 0.3) 100%);
        }

        .hero-box {
            position: relative;
            z-index: 2;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            padding: 40px;
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            text-align: center;
            max-width: 800px;
            margin: 0 20px;
            color: white;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }

        .hero-box h1 { font-size: clamp(32px, 8vw, 60px); font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
        .hero-box p { font-size: 18px; color: #e2e8f0; font-weight: 300; letter-spacing: 1px; }

        /* --- SECTION 2: STATS BAR (The Trust Factor) --- */
        .stats-bar {
            background: var(--dark-blue);
            padding: 40px 0;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: -50px;
            position: relative;
            z-index: 5;
            width: 90%;
            margin-left: auto; margin-right: auto;
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }

        .stat-item { text-align: center; color: white; flex: 1; min-width: 120px; }
        .stat-item h2 { font-size: 36px; color: var(--solar-green); font-weight: 700; }
        .stat-item p { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #1f2020; }

        /* --- SECTION 3: OVERLAPPING STORY (Unique Design) --- */
        .story-modern { padding: 100px 5%; position: relative; }
        .story-container { display: flex; align-items: center; flex-wrap: wrap; gap: 40px; }
        
        .story-img-stack { flex: 1; position: relative; min-width: 300px; height: 400px; }
        .img-big { width: 85%; height: 90%; border-radius: 20px; object-fit: cover; }
        .img-small { 
            position: absolute; bottom: 0; right: 0; 
            width: 50%; height: 50%; border-radius: 20px; 
            border: 10px solid white; object-fit: cover;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .story-content { flex: 1; min-width: 300px; }
        .tagline { color: var(--solar-green); font-weight: 700; text-transform: uppercase; font-size: 14px; }
        .story-content h2 { font-size: 40px; color: var(--dark-blue); margin: 10px 0 25px; line-height: 1.2; }
        .story-content p { color: #475569; line-height: 1.8; margin-bottom: 20px; }

        /* --- SECTION 4: THE SOLAR JOURNEY (Timeline Card) --- */
        .journey-section { padding: 80px 5%; background: #f1f5f9; position: relative; }
        .journey-card {
            background: white;
            padding: 50px;
            border-radius: 30px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        }

        .journey-item { position: relative; padding-left: 30px; border-left: 3px solid var(--solar-green); }
        .journey-item h3 { color: var(--dark-blue); margin-bottom: 10px; }
        .year-mark { position: absolute; left: -10px; top: 0; width: 17px; height: 17px; background: var(--solar-green); border-radius: 50%; }
 /* --- SECTION 5: IMPROVED ENERGY REVOLUTION CTA --- */
.final-cta {
    position: relative;
    padding: 120px 5%;
    /* Modern Animated Gradient Background */
    background: linear-gradient(-45deg, #0d1b4d, #1e3a8a, #22c55e, #166534);
    background-size: 400% 400%;
    animation: energyGradient 15s ease infinite; /* Color moving animation */
    text-align: center;
    color: white;
    border-radius: 60px 60px 0 0;
    margin-top: 60px;
    overflow: hidden;
    box-shadow: 0 -20px 40px rgba(0,0,0,0.1);
}

/* Subtle Geometric Pattern Overlay for Tech Look */
.final-cta::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px; /* Dot pattern like a solar grid */
    opacity: 0.3;
}

/* Moving Glow Effect */
.final-cta::after {
    content: "";
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.2) 0%, transparent 70%);
    animation: rotateGlow 10s linear infinite;
}

.final-cta h2 {
    font-size: clamp(28px, 6vw, 48px);
    margin-bottom: 25px;
    font-weight: 800;
    position: relative;
    z-index: 5;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.final-cta p {
    font-size: 18px;
    margin-bottom: 40px;
    color: #f0fdf4;
    position: relative;
    z-index: 5;
}

.btn-modern {
    position: relative;
    z-index: 10;
    padding: 18px 50px;
    background: #ffffff;
    color: #0d1b4d; /* Dark Blue Text */
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 18px;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: inline-block;
}

.btn-modern:hover {
    background: #22c55e;
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(34, 197, 94, 0.5);
}

/* --- KEYFRAMES FOR ANIMATION --- */

/* Gradient Movement */
@keyframes energyGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Rotating Glow in Background */
@keyframes rotateGlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

    .vns-og-wrapper { width: 100%; overflow-x: hidden; }
        .vns-og-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* --- 1. Unique Hero Section --- */
        .vns-og-hero-sec {
            height: 40vh;
            background: linear-gradient(rgba(13, 27, 77, 0.85), rgba(13, 27, 77, 0.7)), 
                        url('https://images.unsplash.com/photo-1509391366360-feaffa648b8b?q=80&w=1500');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .vns-og-hero-title { font-size: clamp(30px, 7vw, 55px); font-weight: 800; margin-bottom: 15px; }
        .vns-og-hero-sub { font-size: 18px; color: var(--og-green); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }

        /* --- 2. Definition Section --- */
        .vns-og-intro-area { padding: 80px 0; }
        .vns-og-flex-row { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
        .vns-og-content-left { flex: 1; min-width: 300px; }
        .vns-og-img-right { flex: 1; min-width: 300px; position: relative; }
        .vns-og-main-img { width: 100%; height: 500px; border-radius: 30px; box-shadow: 20px 20px 0 var(--og-green); }
        .vns-og-tag { color: var(--og-green); font-weight: 700; margin-bottom: 10px; display: block; }

        /* --- 3. How It Works (Grid Cards) --- */
        .vns-og-process-sec { padding: 80px 0; background: var(--og-light); }
        .vns-og-grid-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-top: 50px; }
        .vns-og-step-card { background: white; padding: 40px 30px; border-radius: 20px; text-align: center; transition: 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
        .vns-og-step-card:hover { transform: translateY(-10px); }
        .vns-og-step-icon { width: 70px; height: 70px; background: rgba(34, 197, 94, 0.1); color: var(--og-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 20px; }

        /* --- 4. Net Metering & Subsidy (Tech Info) --- */
        .vns-og-info-panel { padding: 80px 0; }
        .vns-og-dark-box { background: var(--og-blue); color: white; padding: 50px; border-radius: 40px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
        .vns-og-info-text { flex: 1.5; }
        .vns-og-info-badge { flex: 1; background: var(--og-green); padding: 30px; border-radius: 20px; text-align: center; }
        .vns-og-info-badge h2 { font-size: 40px; margin-bottom: 5px; }

        /* --- 5. Benefits List --- */
        .vns-og-benefit-sec { padding: 80px 0; background: white; }
        .vns-og-list-item { display: flex; align-items: flex-start; margin-bottom: 25px; gap: 15px; }
        .vns-og-check { color: var(--og-green); font-size: 20px; margin-top: 5px; }

        /* --- Buttons --- */
        .vns-og-btn-primary { background: var(--og-green); color: white; padding: 15px 40px; border-radius: 50px; text-decoration: none; font-weight: 700; display: inline-block; transition: 0.3s; border: none; cursor: pointer; }
        .vns-og-btn-primary:hover { background: var(--og-blue); transform: scale(1.05); }
   .vns-off-wrapper { width: 100%; overflow-x: hidden; }
        .vns-off-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* --- 1. Unique Hero Section --- */
        .vns-off-hero-sec {
            height: 70vh;
            background: linear-gradient(rgba(13, 27, 77, 0.85), rgba(13, 27, 77, 0.7)), 
                        url('https://images.unsplash.com/photo-1613665813446-82a78c468a1d?q=80&w=1500');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .vns-off-hero-title { font-size: clamp(30px, 7vw, 55px); font-weight: 800; margin-bottom: 15px; }
        .vns-off-hero-sub { font-size: 18px; color: var(--off-green); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }

        /* --- 2. Definition Section --- */
        .vns-off-intro-area { padding: 80px 0; }
        .vns-off-flex-row { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
        .vns-off-content-left { flex: 1; min-width: 300px; }
        .vns-off-img-right { flex: 1; min-width: 300px; position: relative; }
        .vns-off-main-img { width: 100%; border-radius: 30px; box-shadow: 20px 20px 0 var(--off-green); }
        .vns-off-tag { color: var(--off-green); font-weight: 700; margin-bottom: 10px; display: block; }

        /* --- 3. How It Works (Components) --- */
        .vns-off-process-sec { padding: 80px 0; background: var(--off-light); }
        .vns-off-grid-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-top: 50px; }
        .vns-off-step-card { background: white; padding: 40px 30px; border-radius: 20px; text-align: center; transition: 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
        .vns-off-step-card:hover { transform: translateY(-10px); }
        .vns-off-step-icon { width: 70px; height: 70px; background: rgba(34, 197, 94, 0.1); color: var(--off-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 20px; }

        /* --- 4. Battery Storage Info --- */
        .vns-off-info-panel { padding: 80px 0; }
        .vns-off-dark-box { background: var(--off-blue); color: white; padding: 50px; border-radius: 40px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
        .vns-off-info-text { flex: 1.5; }
        .vns-off-info-badge { flex: 1; background: var(--off-green); padding: 30px; border-radius: 20px; text-align: center; }
        .vns-off-info-badge h2 { font-size: 40px; margin-bottom: 5px; }

        /* --- 5. Benefits List --- */
        .vns-off-benefit-sec { padding: 80px 0; background: white; }
        .vns-off-list-item { display: flex; align-items: flex-start; margin-bottom: 25px; gap: 15px; }
        .vns-off-check { color: var(--off-green); font-size: 20px; margin-top: 5px; }

        /* --- Buttons --- */
        .vns-off-btn-primary { background: var(--off-green); color: white; padding: 15px 40px; border-radius: 50px; text-decoration: none; font-weight: 700; display: inline-block; transition: 0.3s; border: none; cursor: pointer; text-align: center; }
        .vns-off-btn-primary:hover { background: var(--off-blue); transform: scale(1.05); }

            .vns-hyb-wrapper { width: 100%; overflow-x: hidden; }
        .vns-hyb-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* --- 1. Hero Section --- */
        .vns-hyb-hero-sec {
            height: 70vh;
            background: linear-gradient(rgba(13, 27, 77, 0.85), rgba(13, 27, 77, 0.7)), 
                        url('https://images.unsplash.com/photo-1548516173-3cabfa4607e9?q=80&w=1500');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .vns-hyb-hero-title { font-size: clamp(30px, 7vw, 55px); font-weight: 800; margin-bottom: 15px; }
        .vns-hyb-hero-sub { font-size: 18px; color: var(--hyb-green); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }

        /* --- 2. Definition Section --- */
        .vns-hyb-intro-area { padding: 80px 0; }
        .vns-hyb-flex-row { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
        .vns-hyb-content-left { flex: 1; min-width: 300px; }
        .vns-hyb-img-right { flex: 1; min-width: 300px; position: relative; }
        .vns-hyb-main-img { width: 100%; border-radius: 30px; box-shadow: 20px 20px 0 var(--hyb-green); }
        .vns-hyb-tag { color: var(--hyb-green); font-weight: 700; margin-bottom: 10px; display: block; }

        /* --- 3. How It Works (Hybrid Components) --- */
        .vns-hyb-process-sec { padding: 80px 0; background: var(--hyb-light); }
        .vns-hyb-grid-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-top: 50px; }
        .vns-hyb-step-card { background: white; padding: 40px 30px; border-radius: 20px; text-align: center; transition: 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
        .vns-hyb-step-card:hover { transform: translateY(-10px); }
        .vns-hyb-step-icon { width: 70px; height: 70px; background: rgba(34, 197, 94, 0.1); color: var(--hyb-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 20px; }

        /* --- 4. Intelligent Power Info --- */
        .vns-hyb-info-panel { padding: 80px 0; }
        .vns-hyb-dark-box { background: var(--hyb-blue); color: white; padding: 50px; border-radius: 40px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
        .vns-hyb-info-text { flex: 1.5; }
        .vns-hyb-info-badge { flex: 1; background: var(--hyb-green); padding: 30px; border-radius: 20px; text-align: center; }
        .vns-hyb-info-badge h2 { font-size: 35px; margin-bottom: 5px; }

        /* --- 5. Benefits List --- */
        .vns-hyb-benefit-sec { padding: 80px 0; background: white; }
        .vns-hyb-list-item { display: flex; align-items: flex-start; margin-bottom: 25px; gap: 15px; }
        .vns-hyb-check { color: var(--hyb-green); font-size: 20px; margin-top: 5px; }

        /* --- Button Style --- */
        .vns-hyb-btn-primary { background: var(--hyb-green); color: white; padding: 15px 40px; border-radius: 50px; text-decoration: none; font-weight: 700; display: inline-block; transition: 0.3s; border: none; cursor: pointer; text-align: center; }
        .vns-hyb-btn-primary:hover { background: var(--hyb-blue); transform: scale(1.05); }
        .vns-ind-wrapper { width: 100%; overflow-x: hidden; }
        .vns-ind-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* --- 1. Industrial Hero Section --- */
        .vns-ind-hero-sec {
            height: 75vh;
            background: linear-gradient(rgba(13, 27, 77, 0.8), rgba(13, 27, 77, 0.6)), 
                        url('https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?q=80&w=1500');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .vns-ind-hero-title { font-size: clamp(32px, 8vw, 60px); font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
        .vns-ind-hero-sub { font-size: 18px; color: var(--ind-green); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; }

        /* --- 2. Sectors We Serve (Grid Layout) --- */
        .vns-ind-sectors-sec { padding: 80px 0; background: var(--ind-light); }
        .vns-ind-section-head { text-align: center; margin-bottom: 50px; }
        .vns-ind-section-head h2 { font-size: 36px; font-weight: 700; }
        
        .vns-ind-sector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
        .vns-ind-sector-card { background: white; border-radius:  20px; cursor: pointer;
    height: 100%;  overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.3s; }
        .vns-ind-sector-card:hover { transform: translateY(-10px); border-bottom: 5px solid var(--ind-green); }
        .vns-ind-card-img { width: 100%; height: 200px; object-fit: cover; }
        .vns-ind-card-body { padding: 25px; }
        .vns-ind-card-body i { font-size: 24px; color: var(--ind-green); margin-bottom: 10px; }

        /* --- 3. ROI & Financial Benefits (Key Google Info) --- */
        .vns-ind-finance-sec { padding: 100px 0; position: relative; }
        .vns-ind-flex { display: flex; align-items: center; gap: 60px; flex-wrap: wrap; }
        .vns-ind-finance-content { flex: 1.5; min-width: 300px; }
        .vns-ind-finance-stats { flex: 1; min-width: 250px; background: var(--ind-blue); color: white; padding: 40px; border-radius: 30px; }
        .vns-ind-stat-item { margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
        .vns-ind-stat-item h3 { font-size: 32px; color: var(--ind-green); }

        /* --- 4. Technical Advantages List --- */
        .vns-ind-tech-list { list-style: none; margin-top: 30px; }
        .vns-ind-tech-list li { display: flex; gap: 15px; margin-bottom: 15px; font-size: 15px; }
        .vns-ind-tech-list i { color: var(--ind-green); font-size: 18px; margin-top: 4px; }

        /* --- 5. High-Energy CTA --- */
        .vns-ind-cta-sec { 
            padding: 80px 0; 
            background: linear-gradient(rgba(34, 197, 94, 0.9), rgba(22, 101, 52, 0.9)), url('https://images.unsplash.com/photo-1466611653911-95282fc3656b?q=80&w=1500');
            background-size: cover; background-attachment: fixed; text-align: center; color: white; border-radius: 40px; margin: 40px 20px;
        }

        /* --- Buttons --- */
        .vns-ind-btn { padding: 18px 45px; border-radius: 50px; font-weight: 700; text-decoration: none; display: inline-block; transition: 0.3s; cursor: pointer; border: none; }
        .vns-ind-btn-primary { background: var(--ind-green); color: white; }
        .vns-ind-btn-white { background: white; color: var(--ind-blue); font-size: 18px; }
        .vns-ind-btn:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.vns-ind-card-link {
    text-decoration: none; /* Underline hatane ke liye */
    color: inherit;       /* Default text color maintain rakhne ke liye */
    display: block;       /* Poore card ko clickable banane ke liye */
    transition: 0.3s;
}

.vns-ind-card-link:hover {
    text-decoration: none;
    color: inherit;
}

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

        /* --- 1. Hero Section --- */
        .vns-em-hero {
            height: 65vh;
            background: linear-gradient(rgba(13, 27, 77, 0.8), rgba(13, 27, 77, 0.7)), 
                        url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?q=80&w=1500');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .vns-em-hero-h1 { font-size: clamp(28px, 7vw, 50px); font-weight: 800; margin-bottom: 15px; line-height: 1.2; }
        .vns-em-hero-p { font-size: 18px; color: var(--vns-green); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }

        /* --- 2. Dual Sector Cards --- */
        .vns-em-sector-sec { padding: 80px 0; background: var(--vns-light); }
        .vns-em-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
        
        .vns-em-main-card { background: white; border-radius: 25px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.05); transition: 0.4s; }
        .vns-em-main-card:hover { transform: translateY(-10px); }
        .vns-em-card-img { width: 100%; height: 250px; object-fit: cover; }
        .vns-em-card-body { padding: 35px; }
        .vns-em-card-body h2 { font-size: 26px; margin-bottom: 15px; color: var(--vns-blue); display: flex; align-items: center; gap: 10px; }
        .vns-em-card-body h2 i { color: var(--vns-green); }
        
        .vns-em-features { list-style: none; margin: 20px 0; }
        .vns-em-features li { margin-bottom: 12px; display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: #4b5563; }
        .vns-em-features li i { color: var(--vns-green); margin-top: 5px; }

        /* --- 3. Key Benefits Grid --- */
        .vns-em-benefits { padding: 80px 0; text-align: center; }
        .vns-em-ben-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 50px; }
        .vns-em-ben-item { padding: 30px; border-radius: 15px; background: white; border: 1px solid #eee; transition: 0.3s; }
        .vns-em-ben-item:hover { background: var(--vns-blue); color: white; border-color: var(--vns-blue); }
        .vns-em-ben-item i { font-size: 35px; color: var(--vns-green); margin-bottom: 20px; }

        /* --- 4. CTA Section --- */
        .vns-em-cta { 
            background: var(--vns-blue); color: white; padding: 60px 20px; text-align: center; 
            border-radius: 40px; margin: 40px 20px; position: relative; overflow: hidden;
        }
        .vns-em-cta-btn { 
            display: inline-block; padding: 15px 45px; background: var(--vns-green); color: white; 
            text-decoration: none; border-radius: 50px; font-weight: 700; margin-top: 25px; transition: 0.3s;
        }
        .vns-em-cta-btn:hover { background: white; color: var(--vns-blue); transform: scale(1.05); }
.vns-hr-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* --- 1. Luxury Hero Section --- */
        .vns-hr-hero {
            height: 70vh;
            background: linear-gradient(rgba(13, 27, 77, 0.7), rgba(13, 27, 77, 0.6)), 
                        url('https://images.unsplash.com/photo-1566073771259-6a8506099945?q=80&w=1500');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .vns-hr-hero-h1 { font-size: clamp(30px, 8vw, 55px); font-weight: 800; margin-bottom: 15px; }
        .vns-hr-hero-p { font-size: 18px; color: var(--hr-green); font-weight: 600; text-transform: uppercase; letter-spacing: 3px; }

        /* --- 2. The Green Appeal Section --- */
        .vns-hr-appeal { padding: 80px 0; background: var(--hr-light); }
        .vns-hr-flex { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
        .vns-hr-img-box { flex: 1; min-width: 300px; position: relative; }
        .vns-hr-img-box img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .vns-hr-content { flex: 1.2; min-width: 300px; }
        .vns-hr-tag { color: var(--hr-green); font-weight: 700; font-size: 14px; text-transform: uppercase; }

        /* --- 3. Solution Cards (HVAC & Lighting) --- */
        .vns-hr-solutions { padding: 80px 0; }
        .vns-hr-sol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; }
        .vns-hr-sol-card { padding: 40px 30px; background: white; border-radius: 20px; border: 1px solid #eee; transition: 0.3s; position: relative; overflow: hidden; }
        .vns-hr-sol-card:hover { transform: translateY(-10px); border-color: var(--hr-green); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .vns-hr-sol-card i { font-size: 40px; color: var(--hr-green); margin-bottom: 20px; }
        .vns-hr-sol-card h3 { margin-bottom: 15px; font-size: 20px; }

        /* --- 4. Savings Highlight Section --- */
        .vns-hr-savings { padding: 80px 0; background: var(--hr-blue); color: white; border-radius: 50px 50px 0 0; }
        .vns-hr-save-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; text-align: center; }
        .vns-hr-save-item h2 { font-size: 45px; color: var(--hr-green); font-weight: 800; }
        .vns-hr-save-item p { font-size: 14px; color: #cbd5e1; text-transform: uppercase; letter-spacing: 1px; }

        /* --- 5. Final CTA --- */
        .vns-hr-cta { 
            padding: 100px 20px; text-align: center; 
            background: linear-gradient(rgba(34, 197, 94, 0.9), rgba(22, 101, 52, 0.9)), url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?q=80&w=1500');
            background-size: cover; background-attachment: fixed; color: white; margin: 40px 20px; border-radius: 40px;
        }
        .vns-hr-btn { display: inline-block; padding: 18px 50px; background: white; color: var(--hr-blue); text-decoration: none; border-radius: 50px; font-weight: 700; font-size: 18px; transition: 0.3s; margin-top: 30px; }
        .vns-hr-btn:hover { background: var(--hr-blue); color: white; transform: scale(1.05); }

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

        /* --- 1. Industrial Hero Section --- */
        .vns-wh-hero {
            height: 70vh;
            background: linear-gradient(rgba(13, 27, 77, 0.75), rgba(13, 27, 77, 0.65)), 
                        url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=1500');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .vns-wh-hero-h1 { font-size: clamp(30px, 8vw, 55px); font-weight: 800; line-height: 1.1; margin-bottom: 15px; }
        .vns-wh-hero-p { font-size: 18px; color: var(--wh-green); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }

        /* --- 2. Idle Roof Utilization --- */
        .vns-wh-intro { padding: 80px 0; background: var(--wh-light); }
        .vns-wh-flex { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
        .vns-wh-img-box { flex: 1; min-width: 300px; border-radius: 25px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .vns-wh-img-box img { width: 100%; display: block; }
        .vns-wh-content { flex: 1.2; min-width: 300px; }
        .vns-wh-tag { color: var(--wh-green); font-weight: 700; font-size: 14px; text-transform: uppercase; margin-bottom: 10px; display: block; }

        /* --- 3. Cold Storage Specialization --- */
        .vns-wh-special { padding: 80px 0; }
        .vns-wh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; }
        .vns-wh-card { padding: 40px 30px; background: white; border-radius: 20px; border: 1px solid #eee; transition: 0.3s; position: relative; }
        .vns-wh-card:hover { border-color: var(--wh-green); transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .vns-wh-card i { font-size: 40px; color: var(--wh-green); margin-bottom: 20px; }
        .vns-wh-card h3 { margin-bottom: 15px; font-size: 20px; font-weight: 700; }

        /* --- 4. ROI & Net Metering Section --- */
        .vns-wh-stats { padding: 80px 0; background: var(--wh-blue); color: white; border-radius: 60px 60px 0 0; }
        .vns-wh-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; text-align: center; }
        .vns-wh-stat-item h2 { font-size: 45px; color: var(--wh-green); font-weight: 800; }
        .vns-wh-stat-item p { font-size: 14px; color: #cbd5e1; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }

        /* --- 5. Final CTA --- */
        .vns-wh-cta { 
            padding: 100px 20px; text-align: center; 
            background: linear-gradient(rgba(34, 197, 94, 0.9), rgba(22, 101, 52, 0.9)), url('https://images.unsplash.com/photo-1553413077-190dd305871c?q=80&w=1500');
            background-size: cover; background-attachment: fixed; color: white; margin: 40px 20px; border-radius: 40px;
        }
        .vns-wh-btn { display: inline-block; padding: 18px 50px; background: white; color: var(--wh-blue); text-decoration: none; border-radius: 50px; font-weight: 700; font-size: 18px; transition: 0.3s; margin-top: 30px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        .vns-wh-btn:hover { background: var(--wh-blue); color: white; transform: scale(1.05); }
   
  /* --- Main Wrapper to avoid Header Overlap --- */
        .vns-simple-gallery {
            padding-top: 40px; /* Isse header ke niche space rahega */
            max-width: 1200px;
            margin: 0 auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        .vns-gal-title {
            text-align: center;
            font-size: 30px;
            margin-bottom: 30px;
            color: var(--og-blue);
            border-bottom: 3px solid var(--og-green);
            display: inline-block;
            padding-bottom: 5px;
            width: 100%;
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }

        /* --- Video Section --- */
        .vns-video-box {
            width: 100%;
            max-width: 900px;
            margin: 0 auto 50px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            background: #000;
        }

        .vns-video-box iframe, .vns-video-box video {
            width: 100%;
            aspect-ratio: 16/9;
            display: block;
            border: none;
        }

        /* --- Image Grid --- */
        .vns-image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 50px;
        }

        .vns-img-card {
            border-radius: 12px;
            overflow: hidden;
            height: 220px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            border: 1px solid #eee;
            cursor: pointer;
            transition: 0.3s;
        }

        .vns-img-card:hover {
            transform: scale(1.03);
            border-color: var(--og-green);
        }

        .vns-img-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
  /* --- Header Overlap Fix & Main Background --- */
        .vns-news-wrapper {
            padding-top: 130px; /* Big gap for header */
            background-color: var(--vns-light);
            min-height: 100vh;
            padding-bottom: 80px;
        }

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

        /* --- Page Title (Bigger) --- */
        .vns-page-head { text-align: center; margin-bottom: 60px; }
        .vns-page-head h1 { font-size: clamp(36px, 8vw, 56px); font-weight: 800; color: var(--vns-blue); line-height: 1.1; }
        .vns-page-head span { color: var(--vns-green); text-transform: uppercase; font-size: 16px; letter-spacing: 3px; font-weight: 700; display: block; margin-bottom: 10px; }

        /* --- Featured News (Big & Descriptive) --- */
        .vns-featured-article {
            background: white;
            border-radius: 30px;
            overflow: hidden;
            display: flex;
            box-shadow: 0 20px 50px rgba(13, 27, 77, 0.08);
            margin-bottom: 70px;
            flex-wrap: wrap;
            border: 1px solid #e2e8f0;
        }
        .vns-f-media { flex: 1.3; min-width: 300px; height: 450px; }
        .vns-f-media img { width: 100%; height: 100%; object-fit: cover; }
        
        .vns-f-info { flex: 1; padding: 50px; display: flex; flex-direction: column; justify-content: center; }
        .vns-date-tag { font-size: 14px; color: #64748b; font-weight: 700; margin-bottom: 20px; border-left: 4px solid var(--vns-green); padding-left: 15px; }
        .vns-f-info h2 { font-size: clamp(24px, 4vw, 34px); margin-bottom: 25px; line-height: 1.3; color: var(--vns-blue); font-weight: 800; }
        .vns-f-info p { color: var(--vns-text); font-size: 18px; line-height: 1.8; }

        /* --- News Grid (Larger Cards) --- */
        .vns-news-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }
        .vns-news-box {
            background: white;
            border-radius: 25px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.04);
            border: 1px solid #f1f5f9;
        }
        .vns-box-img { width: 100%; height: 260px; }
        .vns-box-img img { width: 100%; height: 100%; object-fit: cover; }
        
        .vns-box-body { padding: 35px; }
        .vns-box-body h3 { font-size: 22px; margin-bottom: 20px; line-height: 1.5; font-weight: 700; color: var(--vns-blue); }
        .vns-box-body p { color: var(--vns-text); font-size: 16px; line-height: 1.7; margin-bottom: 10px; }
        
        /* Highlight Label (No Link) */
        .vns-status { color: var(--vns-green); font-weight: 700; font-size: 14px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
        .vns-status::before { content: ""; width: 8px; height: 8px; background: var(--vns-green); border-radius: 50%; }

   /* --- Header Overlap Fix --- */
        .vns-news-main-sec {
            padding-top: 130px; /* Big gap for navbar */
            background-color: var(--vns-white);
            min-height: 100vh;
            padding-bottom: 80px;
        }

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

        /* --- Left-Right Layout Section --- */
        .vns-lr-flex {
            display: flex;
            align-items: center;
            background: white;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(13, 27, 77, 0.08);
            border: 1px solid #f1f5f9;
            flex-wrap: wrap; /* Important for Mobile */
        }

        /* Image Side (Left) */
        .vns-lr-image {
            flex: 1.2;
            min-width: 350px;
            height: 550px; /* Big height for Large Impact */
        }

        .vns-lr-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Content Side (Right) */
        .vns-lr-content {
            flex: 1;
            padding: 60px;
            min-width: 350px;
        }

        .vns-meta-tag {
            font-size: 14px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 25px;
            display: block;
            border-left: 4px solid var(--vns-green);
            padding-left: 15px;
        }

        .vns-lr-content h1 {
            font-size: clamp(28px, 4vw, 42px);
            font-weight: 800;
            color: var(--vns-blue);
            line-height: 1.2;
            margin-bottom: 30px;
        }

        .vns-lr-content p {
            font-size: 19px;
            line-height: 1.8;
            color: var(--vns-text);
            margin-bottom: 35px;
        }

        /* Large Status Label (No Link) */
        .vns-verified-label {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: rgba(34, 197, 94, 0.1);
            color: #166534;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 16px;
            border: 1px solid rgba(34, 197, 94, 0.2);
        }

        /* --- Stats Row (Optional extra content to fill space) --- */
        .vns-stats-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 60px;
        }

        .vns-stat-card {
            background: var(--vns-light);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            border-bottom: 4px solid var(--vns-green);
        }

        .vns-stat-card h3 { font-size: 36px; color: var(--vns-blue); margin-bottom: 10px; }
        .vns-stat-card p { font-size: 14px; text-transform: uppercase; font-weight: 700; color: #64748b; }
      
        /* --- Main Contact Section --- */
        .vns-contact-section {
            padding: 80px 5%;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 50px;
            align-items: flex-start;
        }

        /* --- Left Side: Contact Info --- */
        .vns-contact-info {
            flex: 1;
            min-width: 300px;
        }

        .vns-contact-info h2 {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--primary-blue);
        }

        .vns-contact-info p.sub-text {
            color: var(--text-gray);
            margin-bottom: 40px;
            font-size: 16px;
        }

        .info-box {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 30px;
        }

        .info-box i {
            font-size: 20px;
            color: white;
            background: var(--solar-green);
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
        }

        .info-text h4 { font-size: 18px; margin-bottom: 5px; }
        .info-text p, .info-text a { color: var(--text-gray); text-decoration: none; font-size: 15px; transition: 0.3s; }
        .info-text a:hover { color: var(--solar-green); }

        /* Social Icons */
        .vns-social-box { margin-top: 40px; }
        .vns-social-box h4 { margin-bottom: 15px; }
        .social-link-item {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #fff;
            padding: 10px 20px;
            border-radius: 50px;
            text-decoration: none;
            color: var(--primary-blue);
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            transition: 0.3s;
        }
        .social-link-item:hover { transform: translateY(-3px); color: #E1306C; }
        .social-link-item i { font-size: 20px; color: #E1306C; }

        /* --- Right Side: Form (Previously Designed) --- */
        .vns-form-card {
            flex: 1;
            min-width: 320px;
            background: #fff;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.08);
            border: 1px solid var(--border-color);
        }

        /* Tabs Styling */
        .vns-tabs {
            display: flex;
            background: #f8fafc;
            border: 1px solid var(--border-color);
            border-radius: 50px;
            padding: 5px;
            margin-bottom: 25px;
        }

        .tab-btn {
            flex: 1;
            padding: 10px 5px;
            border: none;
            background: none;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            border-radius: 40px;
            color: var(--text-gray);
            transition: 0.3s;
        }

        .tab-btn.active {
            background-color: var(--primary-blue);
            color: white;
        }

        /* Form Fields */
        .vns-field-group { margin-bottom: 15px; }
        label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
        label span { color: #ef4444; }

        input {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 14px;
            outline: none;
        }

        /* Bill Selection Grid */
        .bill-options-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin: 15px 0;
        }

        .bill-btn {
            padding: 8px;
            border: 1px solid var(--border-color);
            background: #fff;
            border-radius: 8px;
            font-size: 12px;
            cursor: pointer;
            text-align: center;
        }

        .bill-btn.selected {
            border-color: var(--solar-green);
            background-color: #f0fdf4;
            color: var(--solar-green);
            font-weight: 600;
        }

        .submit-btn {
            width: 100%;
            padding: 15px;
            background: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
        }

/* =========================================
   Moving Recent Work CSS (Bulletproof)
   ========================================= */

.moving-work {
    padding: 60px 0;
    background-color: #f8f9fa; /* Light background for contrast */
    overflow: hidden;
    width: 100%;
}

.moving-work .section-title {
    font-size: 32px;
    color: #0d1b4d;
    margin-bottom: 40px;
    text-align: center;
    font-weight: 700;
}

/* Slider Container */
.work-slider {
    display: flex !important;
    overflow: hidden !important;
    width: 100% !important;
    padding: 15px 0;
}

/* Moving Track - Forcefully locked to horizontal row */
.work-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    animation: scrollMarquee 25s linear infinite;
}

/* Pause animation on hover */
.work-slider:hover .work-track {
    animation-play-state: paused;
}

/* Grouping - Forcefully locked to horizontal row */
.work-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 30px !important;
    padding-right: 30px !important;
    flex-shrink: 0 !important;
}

/* Individual Card */
.work-item {
    width: 240px !important;
    flex-shrink: 0 !important;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.work-item img{
    height: 100px !Important;
}

.work-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Image Wrapper (Fixes image distortion) */
.img-wrapper {
    width: 100% !important;
    height: 120px !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff;
    box-sizing: border-box !important;
}

.img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* PERFECT FOR LOGOS */
    display: block !important;
    margin: 0 auto !important;
}

/* Label Styling */
.work-label {
    background: #0d1b4d;
    color: #ffffff;
    text-align: center;
    padding: 12px 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-top: 3px solid #22c55e;
    margin-top: auto !important; /* Pushes label to bottom */
}

/* Seamless Animation */
@keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Perfect infinite loop */
}


        /* --- Responsive Design --- */
  @media (max-width: 992px) {
      .nav-links {
          display: none;
          /* Mobile menu will handle this */
          flex-direction: column;
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          background: white;
          padding: 20px;
          box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
      }

      .nav-links.active {
          display: flex;
      }

      .nav-links li {
          margin: 10px 0;
          width: 100%;
      }
 .nav-links li.open .dropdown-menu {
        display: block !important;
    }
    .nav-links li.open i.fa-chevron-down {
        transform: rotate(180deg);
    }
      .dropdown-menu {
          position: static;
          box-shadow: none;
          border-left: 3px solid var(--solar-green);
      }

      .mobile-menu-btn {
          display: block;
      }

      .nav-cta {
          margin: 10px 0;
          text-align: center;
          width: 100%;
      }

      .solutions-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .why-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .section-title {
          font-size: 28px;
      }

      .faq-content-wrapper {
          flex-direction: column-reverse;
          /* Image moves to bottom on mobile */
      }

      .faq-image {
          width: 100%;
          margin-top: 30px;
      }

      .expert-circle {
          width: 250px;
          height: 250px;
      }

      .news-grid {
          grid-template-columns: repeat(2, 1fr);
          /* 2 columns for tablet */
      }

      .footer-container {
          grid-template-columns: 1fr 1fr;
      }
      .vns-ind-flex { flex-direction: column; text-align: center; }
            .vns-ind-tech-list li { text-align: left; }
             .vns-featured-article { flex-direction: column; }
            .vns-f-media { width: 100%; height: 300px; }
            .vns-f-info { padding: 35px; }
             .vns-lr-image { height: 400px; }
            .vns-lr-content { padding: 40px 25px; }
              .vns-em-card-grid { grid-template-columns: 1fr; }
            .vns-em-hero { height: 50vh; }
            
             .work-item { width: 200px !important; }
    .img-wrapper { height: 100px !important; padding: 15px !important; }
    .work-label { font-size: 14px; padding: 10px; }
  }

  @media (max-width: 768px) {
      .mv-grid {
          grid-template-columns: 1fr;
      }

      .story-flex {
          gap: 30px;
      }

      .story-img {
          box-shadow: 10px 10px 0 var(--solar-green);
          margin-bottom: 20px;
      }
       .vns-off-flex-row { flex-direction: column; text-align: center; }
            .vns-off-main-img { box-shadow: 10px 10px 0 var(--off-green); }
            .vns-off-dark-box { padding: 30px 20px; text-align: center; }
             .vns-hyb-flex-row { flex-direction: column; text-align: center; }
            .vns-hyb-main-img { box-shadow: 10px 10px 0 var(--hyb-green); }
            .vns-hyb-dark-box { padding: 30px 20px; text-align: center; }
              .vns-hr-flex { flex-direction: column; text-align: center; }
            .vns-hr-hero { height: 50vh; }
                        .vns-wh-flex { flex-direction: column; text-align: center; }
            .vns-wh-hero { height: 50vh; }
            .vns-contact-section { flex-direction: column; padding: 40px 20px; }
            .vns-contact-info h2 { font-size: 28px; }
            .vns-form-card { min-width: 100%; }
             .vns-image-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .vns-img-card { height: 160px; }
            .vns-gal-title { font-size: 24px; }
             .vns-featured-card { flex-direction: column; }
            .vns-featured-img { width: 100%; height: 250px; }
            .vns-featured-content { padding: 30px 20px; }
          

  }

  @media (max-width: 600px) {
      .solutions-grid {
          grid-template-columns: 1fr;
      }

      .solutions-section {
          padding: 50px 20px;
      }

      .section-title {
          font-size: 24px;
      }

      .card-img img {
          height: 180px;
      }

      .news-main-title {
          font-size: 26px;
          margin-bottom: 20px;
      }

      .news-grid {
          grid-template-columns: 1fr;
          /* 1 column for mobile */
          gap: 40px;
      }

      .news-img img {
          height: 200px;
          /* Thoda chota image for mobile */
      }

      .news-headline {
          font-size: 16px;
      }

      .main-footer {
          padding: 40px 20px 20px;
      }

      .footer-container {
          grid-template-columns: 1fr;
          /* Single column on mobile */
          gap: 30px;
      }

      .footer-col h4 {
          margin-bottom: 15px;
      }

      .footer-bottom {
          flex-direction: column;
          text-align: center;
          gap: 15px;
      }

      .bottom-links {
          margin-left: 0;
      }

      .bottom-links a {
          margin: 0 10px;
      }
       .moving-work { padding: 40px 0; }
    .moving-work .section-title { font-size: 24px; margin-bottom: 25px; }
    
    .work-group {
        gap: 15px !important; 
        padding-right: 15px !important;
    }

    .work-item {
        width: 150px !important; /* Perfect width for Mobile */
        border-radius: 8px;
    }

    .img-wrapper {
        height: 85px !important; /* Small height for Mobile */
        padding: 12px !important;
    }

    .work-label {
        font-size: 12px;
        padding: 8px 5px;
    }
    .image{
        height: 70px;
    }
     
  }

  /* Mobile (1 column - 320px Ready) */
  @media (max-width: 500px) {
      .why-grid {
          grid-template-columns: 1fr;
      }

      .why-choose-us {
          padding: 50px 20px;
      }

      .why-choose-us .section-title {
          font-size: 24px;
      }

      .why-card {
          padding: 25px 15px;
      }
  }

  @media (max-width: 480px) {
 
     

      .faq-section .section-title {
          font-size: 22px;
      }

      .tab-btn {
          padding: 10px 15px;
          font-size: 13px;
      }

      .accordion-header p {
          font-size: 14px;
      }
       .vns-hyb-hero-title { font-size: 28px; }
            .vns-hyb-hero-sec { height: 50vh; }
            .vns-hyb-step-card { padding: 25px 15px; }
             .vns-ind-hero-title { font-size: 32px; }
            .vns-ind-section-head h2 { font-size: 26px; }
            .vns-ind-hero-sec { height: 60vh; }
            .vns-em-hero-h1 { font-size: 28px; }
            .vns-em-card-body { padding: 25px 20px; }
            .vns-em-card-body h2 { font-size: 22px; }
             .vns-hr-hero-h1 { font-size: 32px; }
            .vns-hr-save-item h2 { font-size: 35px; }
            .vns-wh-hero-h1 { font-size: 32px; }
            .vns-wh-stat-item h2 { font-size: 35px; }
             .vns-form-card { padding: 20px 15px; }
            .tab-btn { font-size: 11px; padding: 8px 2px; }
            .bill-options-grid { grid-template-columns: 1fr; }
            .vns-bill-label { font-size: 13px; }
            .vns-news-wrapper { padding-top: 100px; }
            .vns-page-head h1 { font-size: 32px; }
            .vns-f-info h2 { font-size: 22px; }
            .vns-box-body h3 { font-size: 19px; }
            .vns-box-img { height: 200px; }
            .vns-news-main-sec { padding-top: 100px; }
            .vns-lr-image { min-width: 100%; height: 280px; }
            .vns-lr-content { min-width: 100%; text-align: center; }
            .vns-meta-tag { border-left: none; padding-left: 0; text-align: center; }
            .vns-lr-content h1 { font-size: 24px; }
            .vns-lr-content p { font-size: 16px; }
            .vns-em-hero-h1 { font-size: 28px; }
            .vns-em-card-body { padding: 25px 20px; }
            .vns-em-card-body h2 { font-size: 22px; }
           
    .work-item img {
        height: 75px;
    }
  }

  /* Hover par animation pause ho jaye (Optional) */
  .slider-container:hover .logo-track {
      animation-play-state: paused;
  }
 

  @media (max-width: 320px) {
      header {
          padding: 10px 3%;
      }

      .logo {
          font-size: 18px;
      }

      .hero h1 {
          font-size: 1.8rem;
      }

      .rating-badge {
          padding: 8px 15px;
          bottom: 20px;
      }

      .rating-badge img {
          width: 20px;
      }

      .rating-badge .text span {
          font-size: 11px;
      }

      .card-content h3 {
          font-size: 18px;
      }

      .card-content p {
          font-size: 13px;
      }

      .section-title {
          font-size: 22px;
      }

      .faq-tabs {
          justify-content: flex-start;
      }

      /* Allow scrolling */
      .expert-circle {
          width: 200px;
          height: 200px;
      }

      .accordion-header p {
          font-size: 13px;
      }

      .news-main-title {
          font-size: 22px;
      }

      .news-info {
          padding: 0 5px;
          /* Side padding for tiny screens */
      }

      .footer-logo {
          font-size: 20px;
      }

      .footer-col h4 {
          font-size: 16px;
      }

      .contact-item p {
          font-size: 13px;
      }

      .why-choose-us .section-title {
          font-size: 22px;
      }

      .why-card h3 {
          font-size: 16px;
      }

      .why-card p {
          font-size: 13px;
      }

      .section-head {
          font-size: 24px;
      }

      .story-text,
      .story-img {
          min-width: 100%;
      }

      .mv-card {
          padding: 25px;
      }

      .about-hero {
          height: 30vh;
      }

      .container {
          padding: 0 15px;
      }
      .vns-off-hero-title { font-size: 26px; }
            .vns-off-container { padding: 0 10px; }
            .vns-off-hero-sub { font-size: 12px; }
            .vns-off-dark-box h2 { font-size: 22px; }
            .vns-off-info-badge h2 { font-size: 28px; }
            .vns-off-info-badge p { font-size: 12px; }
            .vns-off-btn-primary { padding: 12px 20px; font-size: 14px; width: 100%; }
             .vns-hyb-hero-title { font-size: 24px; }
            .vns-hyb-container { padding: 0 10px; }
            .vns-hyb-hero-sub { font-size: 11px; }
            .vns-hyb-dark-box h2 { font-size: 20px; }
            .vns-hyb-info-badge h2 { font-size: 26px; }
            .vns-hyb-info-badge p { font-size: 12px; }
            .vns-hyb-btn-primary { padding: 12px 20px; font-size: 14px; width: 100%; }
            .vns-ind-hero-title { font-size: 26px; }
            .vns-ind-container { padding: 0 15px; }
            .vns-ind-card-body h3 { font-size: 18px; }
            .vns-ind-stat-item h3 { font-size: 26px; }
            .vns-ind-cta-sec h2 { font-size: 22px; }
            .vns-ind-btn-white { width: 100%; padding: 15px 20px; font-size: 16px; }
             .vns-ind-sector-card {
        margin-bottom: 10px;
    }
    .vns-em-hero-h1 { font-size: 24px; }
            .vns-em-hero-p { font-size: 12px; letter-spacing: 1px; }
            .vns-em-container { padding: 0 10px; }
            .vns-em-main-card { border-radius: 15px; }
            .vns-em-card-img { height: 180px; }
            .vns-em-features li { font-size: 13px; }
            .vns-em-cta h2 { font-size: 20px; }
            .vns-em-cta-btn { padding: 12px 25px; font-size: 14px; width: 100%; }
          .vns-hr-hero-h1 { font-size: 26px; }
            .vns-hr-hero-p { font-size: 12px; letter-spacing: 1px; }
            .vns-hr-container { padding: 0 15px; }
            .vns-hr-img-box { min-width: 100%; }
            .vns-hr-content h2 { font-size: 24px; }
            .vns-hr-sol-card { padding: 25px 20px; }
            .vns-hr-savings { border-radius: 30px 30px 0 0; padding: 50px 0; }
            .vns-hr-cta h2 { font-size: 22px; }
            .vns-hr-btn { padding: 12px 25px; font-size: 15px; width: 100%; }
             .vns-wh-hero-h1 { font-size: 26px; }
            .vns-wh-hero-p { font-size: 12px; letter-spacing: 1px; }
            .vns-wh-container { padding: 0 15px; }
            .vns-wh-img-box { min-width: 100%; }
            .vns-wh-content h2 { font-size: 24px; }
            .vns-wh-card { padding: 25px 20px; }
            .vns-wh-stats { border-radius: 30px 30px 0 0; padding: 50px 0; }
            .vns-wh-stat-item h2 { font-size: 30px; }
            .vns-wh-cta h2 { font-size: 22px; }
            .vns-wh-btn { padding: 12px 25px; font-size: 15px; width: 100%; }
            .vns-tabs { border-radius: 10px; }
            .tab-btn { border-radius: 5px; }
            .vns-contact-info h2 { font-size: 24px; }
            .info-box { gap: 10px; }
            .info-text h4 { font-size: 16px; }
            .info-text p { font-size: 13px; }
            .bill-options-grid { grid-template-columns: 1fr; }
            .vns-form-card { padding: 20px 15px; }
             .vns-image-grid { grid-template-columns: 1fr; } /* Single column for 320px */
            .vns-img-card { height: 200px; }
            .vns-gal-title { font-size: 20px; }
            .vns-simple-gallery { padding-top: 20px; }
             .vns-news-header h1 { font-size: 24px; }
            .vns-news-header p { font-size: 11px; }
            .vns-featured-content h2 { font-size: 20px; }
            .vns-news-card-body h3 { font-size: 16px; }
            .vns-news-grid { grid-template-columns: 1fr; gap: 20px; }
            .vns-news-container { padding: 0 15px; }
            .vns-page-head h1 { font-size: 28px; }
            .vns-f-info { padding: 20px; }
            .vns-f-info p { font-size: 16px; }
            .vns-box-body { padding: 20px; }
            .vns-container { padding: 0 15px; }
            .vns-news-row { grid-template-columns: 1fr; }
             .vns-lr-content h1 { font-size: 22px; }
            .vns-lr-content p { font-size: 15px; }
            .vns-container { padding: 0 10px; }
            .vns-lr-content { padding: 30px 15px; }
            .vns-stat-card h3 { font-size: 28px; }
             .vns-em-hero-h1 { font-size: 24px; }
            .vns-em-hero-p { font-size: 12px; letter-spacing: 1px; }
            .vns-em-container { padding: 0 10px; }
            .vns-em-main-card { border-radius: 15px; }
            .vns-em-card-img { height: 180px; }
            .vns-em-features li { font-size: 13px; }
            .vns-em-cta h2 { font-size: 20px; }
            .vns-em-cta-btn { padding: 12px 25px; font-size: 14px; width: 100%; }
  }