* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Arial", sans-serif;
        line-height: 1.6;
        color: #333;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        min-height: 100vh;
      }
      .social-icons {
        display: flex;
        gap: 15px; /* space between icons */
        align-items: center;
        justify-content: flex-start; /* or center if you want icons centered */
        margin-top: 10px;
        pointer-events: none;
      }

.social-icons a {
  color: #333; /* default icon color */
  font-size: 20px; /* icon size */
  text-decoration: none;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #007bff; /* default hover color */
}
h5.social{
    margin-top: 5px;
    margin-bottom: 0;
}
/* Brand-specific hover colors (optional) */
.social-icons a:nth-child(1):hover { color: #1877F2; } /* Facebook */
.social-icons a:nth-child(2):hover { color: #1DA1F2; } /* X (Twitter) */
.social-icons a:nth-child(3):hover { color: #E4405F; } /* Instagram */
.social-icons a:nth-child(4):hover { color: #FF0000; } /* YouTube */

      .grid-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
            justify-content: space-between;
        }
        .panel {
            background-color: #ffffff;
            border-radius: 10px;
            padding: 20px 0;
            text-align: left;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            flex: 1 1 calc(33.33% - 13.33px); /* Approx 1/3 width minus gap adjustment */
            min-width: 0; /* Ensure flex items shrink properly */
        }
        .panel h2 {
          position: relative;
              top: -20px;
            color: #ffffff;
            font-size: 1.5em;
            margin: 0 0 15px 0;
            padding: 10px;
            background-color: #2B3A4D;
            border-radius: 5px 5px 0 0;
            width: 100%;
            text-align: center;
            box-sizing: border-box;
        }
        .panel ul {
            list-style-type: disc;
            padding-left: 36%;
            color: #2c3e50;
            margin: 0;
        }
        .panel ul li {
            margin-bottom: 10px;
            color: #192436;
            font-size: large;
            font-weight: bold;
        }
        @media (max-width: 767px) {
            .panel {
                flex: 1 1 100%; /* Full width on small screens */
            }
        }
      .solutions-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  align-items: stretch; /* Make all cards equal height */
}

.solution-card {
  background: rgba(51, 65, 85, 0.8);
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  transition: transform 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(10px);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* keep content aligned from top */
}

.solution-card:hover {
  transform: translateY(-5px);
  border-color: rgba(34, 197, 94, 0.5);
}

.solution-card h3 {
  color: #22c55e;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  min-height: 48px; /* Reserve space so height stays same even if 1 line */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.solution-card img {
  width: 100%;
  height: 200px; /* Fixed height for uniformity */
  object-fit: cover;
  border-radius: 10px;
}

.hamburger {
  display: none;
  font-size: 1.8rem;
  color: #e2e8f0;
  cursor: pointer;
  border: none;
  background: none;
  z-index: 1001;
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
.nav-container {
    position: relative;
  }

  .nav-links {
    flex-direction: column;
    background: rgba(15, 23, 42, 0.95);
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    padding: 1rem 2rem;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: none; /* default hidden */
  }
.nav-links.show {
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
  }
}

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

      /* Navigation */
      nav {
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(10px);
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        border-bottom: 1px solid rgba(34, 197, 94, 0.2);
      }

      .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 2rem;
      }
i.fa-brands.fa-whatsapp {
    font-size: x-large;
}
      .nx-logo{
        font-family: "Rubik", serif;
    text-transform: lowercase !important;
    color: #d1dd2d !important;
    font-weight: bold;
    position: relative;
        top: -6px;
    left: 2px;
        font-size: 1.8rem;
      }
      .nx-AI{
        font-family: "Rubik", serif;
    text-transform: lowercase !important;
    color: #ffffff !important;
    font-weight: bold;
     position: relative;
        top: -6px;
    left: 2px;
        font-size: 1.8rem;
      }
      .AI-text{
        font-family: "Rubik", serif;
    text-transform: uppercase !important;
    color: #ffffff !important;
    font-weight: bold;
     position: relative;
        top: -6px;
    left: 2px;
      }
      .header-whatsapp { font-size: 1.5rem; }
        .icon-whatsapp::before { content: "\f232"; font-family: "Font Awesome 6 Free"; }
      .logo {
        font-size: 1.8rem;
        font-weight: bold;
        color: #22c55e;
        text-decoration: none;
      }

      .nav-links {
        display: flex;
        list-style: none;
        gap: 2rem;
      }

      .nav-links a {
        color: #e2e8f0;
        text-decoration: none;
        transition: color 0.3s ease;
        cursor: pointer;
      }

      .nav-links a:hover {
        color: #22c55e;
      }
      .nav-links a.active {
        color: #22c55e;
      }
      /* Page Content */
      .page {
        padding-top: 80px;
        min-height: 100vh;
      }

      /* .page.active {
        display: block;
      } */

      /* Hero Section */
      .hero {
        background: linear-gradient(
          135deg,
          #0f172a 0%,
          #1e293b 50%,
          #22c55e 100%
        );
        padding: 6rem 0;
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      .hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(34,197,94,0.1)" points="0,1000 1000,0 1000,1000"/></svg>');
      }

      .hero-content {
        position: relative;
        z-index: 1;
      }

      .hero h1 {
        font-size: 3.5rem;
        color: #fff;
        margin-bottom: 1rem;
        animation: fadeInUp 1s ease;
      }

      .hero p {
        font-size: 1.3rem;
        color: #e2e8f0;
        margin-bottom: 2rem;
        animation: fadeInUp 1s ease 0.2s both;
      }

      .cta-button {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: white;
        padding: 1rem 2rem;
        border: none;
        border-radius: 50px;
        font-size: 1.1rem;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        animation: fadeInUp 1s ease 0.4s both;
        text-decoration: none;
        display: inline-block;
      }

      .cta-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);
      }

      /* Features Grid */
      .features {
        padding: 4rem 0;
        background: rgba(30, 41, 59, 0.5);
      }
      .features-grid-home {
          display: flex;
          gap: 1rem;
          flex-wrap: wrap;
          margin-top: 3rem;
          width: 100%;
      }

      .features-grid-home > * {
          flex: 1; /* makes all children equal width */
      }
      .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-top: 3rem;
      }
      .feature-card-home {
        display: flex;
        align-items: center;  /* vertical center */
        justify-content: center; /* optional: horizontal center */
        text-align: center;  /* center text if multiple lines */
        }
    .feature-card.feature-card-home h3 {
        font-size: 1.12rem;
      }

      .feature-card {
        background: rgba(51, 65, 85, 0.8);
        padding: 2rem;
        border-radius: 15px;
        border: 1px solid rgba(34, 197, 94, 0.2);
        transition: transform 0.3s ease, border-color 0.3s ease;
        backdrop-filter: blur(10px);
      }

      .feature-card:hover {
        transform: translateY(-5px);
        border-color: rgba(34, 197, 94, 0.5);
      }

      .feature-icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #22c55e, #16a34a);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        font-size: 1.5rem;
      }

      .feature-card h3 {
        /* color: #22c55e; */
         color: #ffffff;
        margin-bottom: 1rem;
        font-size: 1.3rem;
      }

      .feature-card p {
        color: #e2e8f0;
        line-height: 1.8;
      }

      /* Section Styles */
      .section {
        padding: 4rem 0;
      }

      .section h2 {
        font-size: 2.5rem;
        color: #22c55e;
        text-align: center;
        margin-bottom: 2rem;
      }

      .section-content {
        background: rgba(51, 65, 85, 0.8);
        padding: 3rem;
        border-radius: 15px;
        border: 1px solid rgba(34, 197, 94, 0.2);
        backdrop-filter: blur(10px);
        color: #e2e8f0;
        line-height: 1.8;
      }

      /* Pricing Cards */
      .pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        margin-top: 3rem;
      }

      .pricing-card {
        background: rgba(51, 65, 85, 0.8);
        padding: 2.5rem;
        border-radius: 15px;
        border: 1px solid rgba(34, 197, 94, 0.2);
        text-align: center;
        transition: transform 0.3s ease, border-color 0.3s ease;
        backdrop-filter: blur(10px);
      }

      .pricing-card.featured {
        border-color: #22c55e;
        transform: scale(1.05);
      }

      .pricing-card:hover {
        transform: translateY(-5px);
        border-color: rgba(34, 197, 94, 0.5);
      }

      .pricing-card.featured:hover {
        transform: scale(1.05) translateY(-5px);
      }

      .price {
        font-size: 3rem;
        color: #22c55e;
        font-weight: bold;
        margin: 1rem 0;
      }

      .price-period {
        color: #94a3b8;
        font-size: 0.9rem;
      }

      /* Contact Form */
      .contact-form {
        max-width: 600px;
        margin: 0 auto;
        background: rgba(51, 65, 85, 0.8);
        padding: 3rem;
        border-radius: 15px;
        border: 1px solid rgba(34, 197, 94, 0.2);
        backdrop-filter: blur(10px);
      }

      .form-group {
        margin-bottom: 1.5rem;
      }

      .form-group label {
        display: block;
        color: #22c55e;
        margin-bottom: 0.5rem;
        font-weight: bold;
      }

      .form-group input,
      .form-group textarea,
      .form-group select {
        width: 100%;
        padding: 1rem;
        border: 1px solid rgba(34, 197, 94, 0.3);
        border-radius: 8px;
        background: rgba(30, 41, 59, 0.8);
        color: #e2e8f0;
        font-size: 1rem;
      }

      .form-group input:focus,
      .form-group textarea:focus,
      .form-group select:focus {
        outline: none;
        border-color: #22c55e;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
      }

      /* Team Grid */
      .team-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
        margin-top: 3rem;
      }

      .team-member {
        background: rgba(51, 65, 85, 0.8);
        padding: 2rem;
        border-radius: 15px;
        border: 1px solid rgba(34, 197, 94, 0.2);
        text-align: center;
        transition: transform 0.3s ease;
        backdrop-filter: blur(10px);
      }

      .team-member:hover {
        transform: translateY(-5px);
      }

      .team-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: linear-gradient(135deg, #22c55e, #16a34a);
        margin: 0 auto 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: white;
      }

      .team-member h4 {
        color: #22c55e;
        margin-bottom: 0.5rem;
      }

      .team-member .role {
        color: #94a3b8;
        margin-bottom: 1rem;
      }

      .team-member p {
        color: #e2e8f0;
        font-size: 0.9rem;
        line-height: 1.6;
      }
.footer {
  background: rgba(15, 23, 42, 0.95);
  color: #e2e8f0;
  padding: 3rem 2rem;
  border-top: 1px solid rgba(34, 197, 94, 0.2);
  backdrop-filter: blur(8px);
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.footer-column {
  flex: 1 1 22%; /* Responsive width: roughly 4 columns */
  min-width: 220px;
}

.footer h5 {
  color: #22c55e;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.footer p,
.footer a {
  font-size: 0.95rem;
  color: #e2e8f0;
  text-decoration: none;
  line-height: 1.6;
}

.footer a:hover {
  color: #ffffff;
}

.footer-links {
  list-style: none;
  padding-left: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.cta-button {
  display: inline-block;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  font-size: 0.95rem;
  margin-top: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);
}

/* Responsive layout: stack columns on small screens */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
  }
}


      /* Animations */
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Responsive */
      @media (max-width: 768px) {
        .nav-links {
          flex-direction: column !important;
          gap: 1rem;
        }

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

        .hero p {
          font-size: 1.1rem;
        }

        .features-grid {
          grid-template-columns: 1fr;
        }

        .pricing-grid {
          grid-template-columns: 1fr;
        }

        .pricing-card.featured {
          transform: none;
        }
      }