  <style>
    /* Reset & Base */
    *, *::before, *::after {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: 'Poppins', sans-serif;
      line-height: 1.6;
      color: #000;
      background: #fff;
      scroll-behavior: smooth;
    }
    a {
      color: #00da90;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    a:hover, button:hover {
      color: #007a56;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    /* Container */
    .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
    }
    /* Header */
    header {
      background: #000;
      color: #fff;
      padding: 1rem 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }
    header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      font-weight: 900;
      font-size: 1.5rem;
      color: #00da90;
      user-select: none;
    }
    nav ul {
      list-style: none;
      display: flex;
      gap: 1.5rem;
      margin: 0;
      padding: 0;
    }
    nav ul li a {
      font-weight: 600;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }
    nav ul li a:hover, nav ul li a:focus {
      background-color: #00da90;
      color: #000;
      outline: none;
    }
    /* Hero Section */
    #hero {
      background: #f9f9f9;
      padding: 3rem 0 4rem;
    }
    #hero .container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2rem;
    }
    #hero-text {
      flex: 1 1 400px;
    }
    #hero-text h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      line-height: 1.2;
    }
    #hero-text h1 .highlight {
      background-color: #00da90;
      color: #000;
      padding: 0 0.25rem;
      border-radius: 3px;
      font-weight: 700;
    }
    #hero-text p {
      font-size: 1.125rem;
      margin-bottom: 1.5rem;
      font-weight: 600;
      color: #333;
    }
    /* WhatsApp CTA Button */
    .btn-whatsapp {
      display: inline-flex;
      align-items: center;
      background-color: #00da90;
      color: #000;
      font-weight: 700;
      padding: 0.75rem 1.25rem;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      text-decoration: none;
      font-size: 1rem;
      box-shadow: 0 4px 8px rgba(0, 218, 144, 0.4);
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
    .btn-whatsapp:hover,
    .btn-whatsapp:focus {
      background-color: #007a56;
      box-shadow: 0 6px 12px rgba(0, 122, 86, 0.6);
      color: #fff;
      outline: none;
    }
    #hero-image {
      flex: 1 1 300px;
      max-width: 350px;
    }
    /* Pricing Section */
    #pricing {
      padding: 3rem 0;
    }
    #pricing h2 {
      font-size: 2rem;
      margin-bottom: 2rem;
      text-align: center;
    }
    #pricing h2 .highlight {
      background-color: #00da90;
      color: #000;
      padding: 0 0.3rem;
      border-radius: 3px;
      font-weight: 700;
    }
    .pricing-table {
      display: flex;
      justify-content: center;
    }
    .price-card {
      background: #fff;
      border: 2px solid #00da90;
      border-radius: 12px;
      padding: 2rem;
      max-width: 350px;
      text-align: center;
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
      transition: box-shadow 0.3s ease;
    }
    .price-card:hover {
      box-shadow: 0 10px 30px rgba(0, 218, 144, 0.3);
    }
    .price-card h3 {
      font-size: 1.5rem;
      color: #00da90;
      margin-bottom: 1rem;
    }
    .price {
      font-size: 2rem;
      font-weight: 700;
      margin: 1rem 0;
      color: #007a56;
    }
    .price-card p {
      font-size: 1rem;
      margin: 0.5rem 0;
      color: #333;
    }
    /* Why Us Section */
    #why-us {
      background: #f9f9f9;
      padding: 3rem 0;
    }
    #why-us h2 {
      font-size: 2rem;
      margin-bottom: 2rem;
      text-align: center;
    }
    #why-us h2 .highlight {
      background-color: #00da90;
      color: #000;
      padding: 0 0.3rem;
      border-radius: 3px;
      font-weight: 700;
    }
    #why-us .row {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: space-between;
      max-width: 1100px;
      margin: 0 auto;
    }
    #why-us .column {
      flex: 1 1 45%;
      font-size: 1rem;
      color: #222;
    }
    #why-us ul {
      list-style: none;
      padding-left: 1.25rem;
    }
    #why-us ul li {
      margin-bottom: 1rem;
      position: relative;
      padding-left: 1.5rem;
    }
    #why-us ul li::before {
      content: "✔️";
      position: absolute;
      left: 0;
      top: 0;
      font-size: 1.2rem;
      line-height: 1;
      color: #00da90;
    }
    /* FAQs Section */
    #faqs {
      padding: 3rem 0;
    }
    #faqs h2 {
      font-size: 2rem;
      margin-bottom: 2rem;
      text-align: center;
    }
    #faqs h2 .highlight {
      background-color: #00da90;
      color: #000;
      padding: 0 0.3rem;
      border-radius: 3px;
      font-weight: 700;
    }
    .faq {
      max-width: 800px;
      margin: 0 auto;
    }
    .faq-item {
      margin-bottom: 1.5rem;
    }
    .faq-item h3 {
      font-size: 1.25rem;
      color: #00da90;
      margin-bottom: 0.5rem;
    }
    .faq-item p {
      font-size: 1rem;
      color: #333;
    }
    /* Contact Section */
    #contact {
      padding: 3rem 0;
      text-align: center;
    }
    #contact h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    #contact h2 .highlight {
      background-color: #00da90;
      color: #000;
      padding: 0 0.3rem;
      border-radius: 3px;
      font-weight: 700;
    }
    #contact p {
      font-size: 1.125rem;
      margin-bottom: 2rem;
      color: #222;
    }
    /* Footer */
    footer {
      background: #000;
      color: #fff;
      padding: 1.5rem 0;
      text-align: center;
      font-size: 0.9rem;
    }
    footer a {
      color: #00da90;
      text-decoration: none;
    }
    /* Responsive */
    @media (max-width: 768px) {
      #hero .container,
      #why-us .row {
        flex-direction: column;
        align-items: center;
      }
      #why-us .column {
        flex: 1 1 100%;
      }
      #hero-text h1 {
        font-size: 2.2rem;
      }
      .price-card {
        max-width: 100%;
      }
    }

    /* Reset and base */
    *, *::before, *::after {
      box-sizing: border-box;
    }
    body {
      margin: 0;
  font-family: 'Poppins', sans-serif;
      line-height: 1.6;
      color: #000;
      background: #fff;
      scroll-behavior: smooth;
    }
    a {
      color: #00da90;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    a:hover,
    button:hover {
      color: #007a56;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    /* Container */
    .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
    }
    /* Header */
    header {
      background: #000;
      color: #fff;
      padding: 1rem 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }
    header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      font-weight: 900;
      font-size: 1.5rem;
      color: #00da90;
      user-select: none;
    }
    nav ul {
      list-style: none;
      display: flex;
      gap: 1.5rem;
      margin: 0;
      padding: 0;
    }
    nav ul li a {
      font-weight: 600;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }
    nav ul li a:hover,
    nav ul li a:focus {
      background-color: #00da90;
      color: #000;
      outline: none;
    }
    /* Hero Section */
    #hero {
      background: #f9f9f9;
      padding: 3rem 0 4rem;
    }
    #hero .container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2rem;
    }
    #hero-text {
      flex: 1 1 400px;
    }
    #hero-text h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      line-height: 1.2;
    }
    #hero-text h1 .highlight {
      background-color: #00da90;
      color: #000;
      padding: 0 0.25rem;
      border-radius: 3px;
      font-weight: 700;
    }
    #hero-text p {
      font-size: 1.125rem;
      margin-bottom: 1.5rem;
      font-weight: 600;
      color: #333;
    }
    /* WhatsApp CTA Button */
    .btn-whatsapp {
      display: inline-flex;
      align-items: center;
      background-color: #00da90;
      color: #000;
      font-weight: 700;
      padding: 0.75rem 1.25rem;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      text-decoration: none;
      font-size: 1rem;
      box-shadow: 0 4px 8px rgba(0, 218, 144, 0.4);
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
    .btn-whatsapp svg {
      width: 20px;
      height: 20px;
      margin-right: 0.5rem;
      fill: #000;
    }
    .btn-whatsapp:hover,
    .btn-whatsapp:focus {
      background-color: #007a56;
      box-shadow: 0 6px 12px rgba(0, 122, 86, 0.6);
      color: #fff;
      outline: none;
    }
    #hero-image {
      flex: 1 1 300px;
      max-width: 350px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
    /* Stats Section */
    #stats {
      background: #000;
      color: #fff;
      padding: 3rem 0;
    }
    #stats .container {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
      gap: 2rem;
      text-align: center;
    }
    #stats .stat {
      font-weight: 600;
    }
    #stats .stat h3 {
      font-size: 1.5rem;
      margin: 0.5rem 0;
    }
    #stats .stat p {
      font-size: 1rem;
      color: #ccc;
      margin: 0;
    }
    /* Services Section */
    #services {
      padding: 3rem 0;
      background: #f9f9f9;
    }
    #services h2 {
      font-size: 2rem;
      margin-bottom: 2rem;
      text-align: center;
    }
    #services h2 .highlight {
      background-color: #00da90;
      color: #000;
      padding: 0 0.3rem;
      border-radius: 3px;
      font-weight: 700;
    }
    #services .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
      gap: 1.5rem;
    }
    #services .service {
      background: #fff;
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 1.25rem 1rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      cursor: default;
    }
    #services .service:hover,
    #services .service:focus-within {
      border-color: #00da90;
      box-shadow: 0 8px 20px rgba(0, 218, 144, 0.3);
      outline: none;
    }
    #services .service h3 {
      margin-top: 0;
      margin-bottom: 0.5rem;
      font-weight: 700;
      color: #00da90;
      font-size: 1.125rem;
    }
    #services .service p {
      margin: 0;
      font-size: 0.95rem;
      color: #333;
    }
    /* Why Choose Us Section */
    #why-us {
      padding: 3rem 0;
    }
    #why-us .container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
    }
    #why-us h2 {
      width: 100%;
      font-size: 2rem;
      margin-bottom: 2rem;
      text-align: center;
    }
    #why-us h2 .highlight {
      background-color: #00da90;
      color: #000;
      padding: 0 0.3rem;
      border-radius: 3px;
      font-weight: 700;
    }
    #why-us .benefits {
      flex: 1 1 300px;
      font-size: 1rem;
      color: #222;
    }
    #why-us ul {
      list-style: none;
      padding-left: 1.25rem;
    }
    #why-us ul li {
      margin-bottom: 1rem;
      position: relative;
      padding-left: 1.5rem;
    }
    #why-us ul li::before {
      content: "✔️";
      position: absolute;
      left: 0;
      top: 0;
      font-size: 1.2rem;
      line-height: 1;
      color: #00da90;
    }
    /* Our Work Section */
    #our-work {
      background: #f9f9f9;
      padding: 3rem 0;
    }
    #our-work .container {
      max-width: 1100px;
      margin: 0 auto;
    }
    #our-work h2 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
      text-align: center;
    }
    #our-work h2 .highlight {
      background-color: #00da90;
      color: #000;
      padding: 0 0.3rem;
      border-radius: 3px;
      font-weight: 700;
    }
    #our-work p.description {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 2rem;
      font-size: 1rem;
      color: #333;
    }
    #our-work .work-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
      gap: 1.5rem;
    }
    #our-work .work-grid img {
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
      cursor: pointer;
    

    }
    #our-work .work-grid img:hover,
    #our-work .work-grid img:focus {
      transform: scale(1.05);
      outline: none;
    }
    /* Contact Section */
    #contact {
      padding: 3rem 0;
    }
    #contact .container {
      max-width: 600px;
      margin: 0 auto;
    }
    #contact h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
      text-align: center;
    }
    #contact h2 .highlight {
      background-color: #00da90;
      color: #000;
      padding: 0 0.3rem;
      border-radius: 3px;
      font-weight: 700;
    }
    #contact .contact-info {
      text-align: center;
      margin-bottom: 2rem;
      font-size: 1rem;
      color: #222;
    }
    #contact .contact-info a {
      font-weight: 700;
      color: #00da90;
    }
    #contact form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    #contact label {
      font-weight: 600;
      margin-bottom: 0.25rem;
      display: block;
      color: #000;
    }
    #contact input,
    #contact textarea {
      padding: 0.75rem 1rem;
      border: 2px solid #ccc;
      border-radius: 8px;
      font-size: 1rem;
      resize: vertical;
      transition: border-color 0.3s ease;
      font-family: inherit;
    }
    #contact input:focus,
    #contact textarea:focus {
      border-color: #00da90;
      outline: none;
      box-shadow: 0 0 8px rgba(0, 218, 144, 0.5);
    }
    #contact button[type="submit"] {
      background-color: #00da90;
      color: #000;
      font-weight: 700;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      font-size: 1.125rem;
      box-shadow: 0 4px 8px rgba(0, 218, 144, 0.4);
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
    #contact button[type="submit"]:hover,
    #contact button[type="submit"]:focus {
      background-color: #007a56;
      box-shadow: 0 6px 12px rgba(0, 122, 86, 0.6);
      color: #fff;
      outline: none;
    }
    /* Footer */
    footer {
      background: #000;
      color: #fff;
      padding: 1.5rem 0;
      text-align: center;
      font-size: 0.9rem;
    }
    footer nav ul {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      padding: 0;
      margin: 0 0 0.5rem 0;
      list-style: none;
    }
    footer nav ul li a {
      color: #00da90;
      font-weight: 600;
      transition: color 0.3s ease;
    }
    footer nav ul li a:hover,
    footer nav ul li a:focus {
      color: #007a56;
      outline: none;
    }
    /* Responsive */
    @media (max-width: 768px) {
      #hero .container {
        flex-direction: column;
        text-align: center;
      }
      #hero-text, #hero-image {
        flex: 1 1 100%;
      }
      #why-us .container {
        flex-direction: column;
      }
      #why-us .benefits {
        flex: 1 1 100%;
      }
    }

    /* FAQ Section Styling */
.faq-section {
  padding: 3rem 1rem;
  background: #f9f9f9;
  border-top: 4px solid #00da90;
  border-radius: 12px;
}

.faq-heading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #000;
}

.faq-heading .highlight {
  background-color: #00da90;
  color: #000;
  padding: 0 0.4rem;
  border-radius: 4px;
}

.faq-toggle {
  display: none;
}

.faq-question {
  display: block;
  font-weight: 600;
  background: #000;
  color: #fff;
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
  position: relative;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 1.5rem;
  color: #00da90;
}

.faq-toggle:checked + .faq-question::after {
  content: "−";
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background: #fff;
  color: #333;
  border: 1px solid #00da90;
  border-radius: 6px;
  padding: 0 1.25rem;
}

.faq-toggle:checked + .faq-question + .faq-answer {
  max-height: 300px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
 
}
  
/* Dropdown container relative for positioning */
nav ul li.dropdown {
  position: relative;
}

/* Hide dropdown by default */
nav ul li .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #000;
  padding: 0.5rem 0;
  border-radius: 4px;
  min-width: 220px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 999;
}

/* Dropdown links styling */
nav ul li .dropdown-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

nav ul li .dropdown-menu li a:hover,
nav ul li .dropdown-menu li a:focus {
  background-color: #00da90;
  color: #000;
  outline: none;
}

/* Show dropdown on hover for desktop */
nav ul li.dropdown:hover > .dropdown-menu,
nav ul li.dropdown:focus-within > .dropdown-menu {
  display: block;
}

/* On smaller screens, use click to toggle dropdown - add JS for this */
@media (max-width: 768px) {
  nav ul li.dropdown .dropdown-menu {
    position: static;
    box-shadow: none;
    padding-left: 1rem;
    background-color: transparent;
  }
  nav ul li.dropdown:hover > .dropdown-menu {
    display: none;
  }
}

  </style>
