/* (Same CSS from before - keep all original styling here) */
 :root {
     --bg: #f5f7f9;
     --surface: #ffffff;
     --ink: #181a1f;
     --muted: #5b6068;
     --brand: #2f9e44;
     --brand-2: #0077cc;
     --accent: #25d366;
     --shadow: 0 10px 30px rgba(0, 0, 0, .08);
     --radius: 18px;
     --radius-lg: 26px;
     --maxw: 1200px;
     --header-height: 100px;
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     background-color: white;
     /* background:linear-gradient(180deg,#f8fafc, var(--bg)); */
     font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     color: var(--ink);
 }

 img {
     max-width: 100%;
     display: block
 }

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

 /* Header / Nav */
 header {
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(255, 255, 255, .95);
     backdrop-filter: blur(6px);
     border-bottom: 1px solid #e9ecef;
     height: var(--header-height);
     display: flex;
     align-items: center;
 }

 .nav {
     max-width: var(--maxw);
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 20px;
     width: 100%
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 12px
 }

 .brand-logo {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     box-shadow: var(--shadow);
     object-fit: cover;
     background: #e6f4ea
 }

 .brand h1 {
     font-size: 18px;
     line-height: 1.1;
     margin: 0
 }

 .brand small {
     display: block;
     color: var(--muted);
     font-weight: 500
 }

 nav ul {
     display: flex;
     gap: 18px;
     list-style: none;
     margin: 0;
     padding: 0;
     align-items: center
 }

 nav a {
     padding: 10px 12px;
     border-radius: 12px;
     font-weight: 500;
     color: var(--muted)
 }

 nav a:hover {
     background: #f1f5f9;
     color: var(--ink)
 }

 .cta {
     display: flex;
     gap: 10px
 }

 .btn {
     padding: 10px 16px;
     border-radius: 999px;
     font-weight: 600;
     box-shadow: var(--shadow);
     display: inline-flex;
     align-items: center;
     gap: 10px
 }

 .btn-primary {
     background: var(--brand);
     color: #fff;
     justify-content: center
 }

 ;

 .btn-outline {
     border: 1px solid #d0d7de;
     background: #fff;
     color: var(--ink)
 }

 /* Hero */
 .hero {
     position: relative;
     overflow: hidden
 }

 .hero-wrap {
     max-width: var(--maxw);
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 40px;
     align-items: center;
     padding: 80px 20px
 }

 .hero h2 {
     font-size: 48px;
     line-height: 1.1;
     margin: 0 0 14px
 }

 .hero p {
     color: var(--muted);
     margin: 0 0 22px
 }

 .hero .pill {
     display: inline-block;
     background: #e6f4ea;
     color: var(--brand);
     font-weight: 600;
     padding: 8px 14px;
     border-radius: 999px;
     margin-bottom: 14px;
     font-size: 13px;
 }

 .hero-card {
     background: var(--surface);
     padding: 20px;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow)
 }

 /* Section generic */
 section {
     padding: 70px 20px
 }

 .container {
     max-width: var(--maxw);
     margin: 0 auto
 }

 .section-title {
     font-size: 30px;
     margin: 0 0 10px
 }

 .section-sub {
     color: var(--muted);
     margin: 0 0 30px
 }

 .grid {
     display: grid;
     gap: 24px
 }

 /* About */
 .about {
     background: #ffffff
 }

 .about-grid {
     grid-template-columns: .8fr 1.2fr
 }

 .about-card {
     background: var(--surface);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 24px
 }

 /* Founders */
 .founder {
     background: linear-gradient(180deg, #ffffff, #f3fbf6)
 }

 .founder-wrap {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     align-items: start
 }

 .founder-photo {
     border-radius: 50%;
     width: 220px;
     height: 220px;
     object-fit: cover;
     box-shadow: var(--shadow);
     background: #e6f4ea;
     margin-bottom: 16px;
     text-align: center
 }

 .goal {
     background: #ffffff;
     border-left: 6px solid var(--brand);
     padding: 18px 18px;
     border-radius: 12px;
     box-shadow: var(--shadow)
 }

 /* Benefits */
 .benefits {
     background: #fff
 }

 .cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px
 }

 .card {
     background: var(--surface);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .card h4 {
     margin: 8px 0
 }

 /* Products */
 .products {
     background: #ffffff
 }

 .product-grid {
     grid-template-columns: repeat(4, 1fr)
 }

 .product {
     background: var(--surface);
     border-radius: 16px;
     box-shadow: var(--shadow);
     overflow: hidden
 }

 .product .info {
     padding: 14px
 }

 .product img {
     width: 100%;
     height: 220px;
     object-fit: contain;
     border-radius: 12px;
     display: block;
 }

 .tag {
     display: inline-block;
     background: #eef6ff;
     color: var(--brand-2);
     font-size: 12px;
     font-weight: 600;
     padding: 6px 10px;
     border-radius: 999px
 }

 /* Process */
 /* .process-step{display:flex;flex-direction:column;gap:10px;align-items:start;background:var(--surface);padding:16px;border-radius:14px;box-shadow:var(--shadow)}
    .step-num{width:48px;height:48px;border-radius:12px;background:#e6f4ea;color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:700} */

 /* Process */
 .process-step {
     background: var(--surface);
     padding: 16px;
     border-radius: 14px;
     box-shadow: var(--shadow);
     margin-bottom: 16px;
 }

 .process-step h4 {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 8px;
     /* color: var(--brand); */
 }

 .step-num {
     /* color: var(--brand); */
     font-weight: 700;
     margin-right: 6px;
 }

 /* Testimonials */
 .testimonials {
     background: linear-gradient(180deg, #f8fafc, #eef7ff)
 }

 .quote {
     background: #fff;
     border-radius: 16px;
     box-shadow: var(--shadow);
     padding: 20px
 }

 /* Gallery */
 .gallery {
     background: #fff
 }

 .gallery-grid {
     grid-template-columns: repeat(4, 1fr)
 }

 .gallery img {
     border-radius: 16px;
     /* box-shadow: var(--shadow); */
     background-color: none;
 }

 /* FAQ */
 .faq-item {
     background: #fff;
     border-radius: 16px;
     box-shadow: var(--shadow);
     padding: 18px
 }

 .faq-item summary {
     cursor: pointer;
     font-weight: 600
 }

 /* Contact */
 .contact {
     background: linear-gradient(180deg, #ffffff, #f6f9ff)
 }

 .contact-grid {
     grid-template-columns: 1fr 1fr
 }

 form {
     display: grid;
     gap: 12px
 }

 input,
 textarea,
 select {
     padding: 12px 14px;
     border: 1px solid #dde1e6;
     border-radius: 12px;
     font: inherit
 }

 textarea {
     min-height: 120px
 }

 .map {
     border: 0;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: var(--shadow)
 }

 /* Footer */
 footer {
     background: #181a1f;
     color: #f0f3f6
 }

 .footer-wrap {
     max-width: var(--maxw);
     margin: 0 auto;
     padding: 28px 20px;
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 20px;
     align-items: center
 }

 .socials {
     display: flex;
     /* Arrange in a row */
     gap: 12px;
     /* Space between icons */
     justify-content: center;
     /* Center them horizontally (optional) */
     align-items: center;
     /* Align vertically */
 }

 .socials a img {
     width: 40px;
     height: 40px;
     display: block;
     /* Removes extra spacing around images */
 }


 /* Floating WhatsApp */
 .whatsapp {
     z-index: 100;
     position: fixed;
     right: 18px;
     bottom: 80px;
     background: var(--accent);
     color: #fff;
     border-radius: 999px;
     padding: 12px 16px;
     box-shadow: var(--shadow);
     display: flex;
     gap: 10px;
     align-items: center;
     font-weight: 700
 }

 /* Hamburger */
 .hamburger {
     display: none;
     background: none;
     border: 0;
     cursor: pointer;
     width: 44px;
     height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
 }

 .hamburger svg {
     width: 22px;
     height: 22px;
     stroke: var(--ink);
 }

 /* Mobile nav fullscreen overlay (right slide) */
 .mobile-nav {
     position: fixed;
     top: 0;
     right: 0;
     width: 82%;
     max-width: 340px;
     height: 100%;
     background: #fff;
     z-index: 1200;
     padding-top: var(--header-height);
     transform: translateX(100%);
     transition: transform 0.28s ease;
     box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
 }

 .mobile-nav.open {
     transform: translateX(0);
 }

 .mobile-nav .close-btn {
     position: absolute;
     top: 12px;
     right: 12px;
     background: none;
     border: 0;
     font-size: 26px;
     cursor: pointer;
     padding: 8px;
 }

 .mobile-nav ul {
     list-style: none;
     margin: 0;
     padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .mobile-nav a {
     display: block;
     padding: 12px 14px;
     font-weight: 600;
     font-size: 16px;
     color: var(--ink);
     border-radius: 8px
 }

 .mobile-nav a:hover {
     background: #f1f5f9
 }

 /* Overlay behind menu */
 #overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.36);
     z-index: 1100;
     display: none;
 }

 #overlay.show {
     display: block
 }

 .gallery img {
     width: 100%;
     height: 400px;
     object-fit: cover;
     border-radius: 12px;
 }

 .swiper {
     width: 100%;
     max-width: 450px;
     margin: auto;
 }

 .swiper img {
     height: 320px;
 }

 .swiper-button-next,
 .swiper-button-prev {
     color: #333;
     gap: 300px;
     /* Change arrow color */
 }

 .swiper-pagination-bullet {
     background: #333;
 }


 /* Show hamburger on mobile and hide desktop nav */
 @media (max-width: 900px) {
     nav ul {
         display: none;
     }

     .hamburger {
         display: flex;
     }
 }

 /* Responsive tweaks */
 @media (max-width: 1000px) {
     .hero-wrap {
         grid-template-columns: 1fr
     }

     .about-grid,
     .founder-wrap,
     .contact-grid {
         grid-template-columns: 1fr
     }

     .product-grid {
         grid-template-columns: repeat(1, 1fr)
     }

     .gallery-grid {
         grid-template-columns: repeat(3, 1fr)
     }

     .cards {
         grid-template-columns: repeat(1, 1fr)
     }

     .brand-logo {
         width: 60px;
         height: 60px
     }
 }

 @media (max-width: 600px) {
     body {
         font-size: 15px
     }

     .hero h2 {
         font-size: 26px;
         line-height: 1.2
     }

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

     .section-sub {
         font-size: 14px
     }

     section {
         padding: 40px 16px
     }

     .hero-wrap {
         padding: 50px 16px
     }

     .founder-photo {
         width: 180px;
         height: 180px
     }

     .gallery img {
         height: 420px
     }

     .whatsapp {
         right: 12px;
         bottom: 70px;
         padding: 10px 14px;
         font-size: 14px
     }

     .btn {
         padding: 10px 14px;
         font-size: 10px
     }

     .mobile-nav {
         width: 70%;
         max-width: none
     }
 }

 .skills img,
 .card img {
     height: 80px;
     width: 80px;
     object-fit: contain;
     display: inline-block;
     vertical-align: middle;
 }





 .hero-wrap .p2 img {
     max-width: 100%;
     height: auto;
     border-radius: 12px;
     max-height: 400px;
     object-fit: cover;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
     margin: 0 auto;
     display: block;
     transition: transform 0.3s ease-in-out;
 }

 .hero-wrap .p2 img:hover {
     transform: scale(1.02);

 }

 .certificates {
     display: flex;
     flex-direction: row;
 }

 .certification-card {
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     text-align: center;
     width: 320px;
     padding: 16px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     margin: 0 auto;
     /* height: 370px; */
 }


 .certification-card:hover {
     transform: scale(1.05);
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
 }

 .certification-card img {
     border-radius: 10px;
     width: 100%;
     height: 200px;
     object-fit: contain;
 }

 .certification-card p {
     font-size: 1rem;
     margin-top: 20px;
     color: #000;
     line-height: 1.4;
 }

 .carousel-control-prev-icon,
 .carousel-control-next-icon {
     width: 24px;
     height: 24px;
 }

 .carousel-control-prev,
 .carousel-control-next {
     width: 5%;
     top: 40%;
 }

 .gallery img,
 .swiper img {
     height: auto;
     max-height: 160px;
     object-fit: contain;
     width: 100%;
 }

 @media (max-width:700px) {
     .container {
         flex-direction: column;
         gap: 22px;
     }
 }

 .cert-row {
     display: flex;
     gap: 32px;
 }

 .cert-col {
     flex: 1;
     min-width: 260px;
 }

 @media (max-width:700px) {
     .cert-row {
         flex-direction: column;
         gap: 22px;
     }
 }

 .card {
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .card:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .product {
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .product:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .certificate-name {
     text-align: center;
     margin-bottom: 40px;
 }

 @media (max-width: 700px) {
     .certificates {
         flex-direction: column;
         gap: 40px;
         /* Space between mainline and micro sections */
     }

     .gallerySwiper {
         width: 100%;
         max-width: none;
     }

     .swiper {
         max-width: 100%;
     }
 }

 /* Reduce size of Swiper navigation buttons specifically in gallery section */
 #gallery .swiper-button-next,
 #gallery .swiper-button-prev {
     width: 30px;
     /* default is 44px */
     height: 30px;
     /* default is 44px */
 }

 #gallery .swiper-button-next::after,
 #gallery .swiper-button-prev::after {
     font-size: 16px;
     /* default is 20px */
 }

 .swiper-slide {
     background-color: transparent;
 }

 .text-center {
     text-align: center;
     font-size: 14px;
 }

 /* Hover effect for project section buttons */
 .products .btn {
     transition: all 0.3s ease;
 }

 .products .btn:hover {
     background-color: #e5f4e9;
     color: #2f9e44;
     transform: translateY(-3px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }

 #particles-js {
     position: absolute;
     /* or fixed if you want it full-screen */
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     /* behind everything */
     pointer-events: none;
     /* allows clicks to pass through */
 }

 .education-card h4 {
     font-size: 22px;
     margin-bottom: 20px;
     color: #181a1f;
     border-bottom: 2px solid #ddd;
     padding-bottom: 8px;
 }

 .timeline {
     display: flex;
     flex-direction: column;
     gap: 18px;
     margin-top: 10px;
 }

 .timeline-item {
     position: relative;
     padding-left: 20px;
     border-left: 3px solid #0077cc;
 }

 .timeline-item::before {
     content: '';
     position: absolute;
     left: -7px;
     top: 6px;
     width: 12px;
     height: 12px;
     background: #0077cc;
     border-radius: 50%;
 }

 .timeline-content h5 {
     font-size: 15px;
     margin: 0;
     font-weight: 600;
 }

 .timeline-content p {
     margin: 3px 0;
     font-size: 15px;
     color: #555;
 }

 .timeline-content .tag {
     display: inline-block;
     margin-top: 6px;
     background: #eef6ff;
     color: #0077cc;
     font-size: 13px;
     padding: 4px 10px;
     border-radius: 12px;
     font-weight: 500;
 }

 .blog-highlight {
     background-color: #d9f7d9;
     /* light green */
     padding: 60px 20px;
     text-align: center;
 }

 .blog-highlight-container {
     max-width: 900px;
     margin: 0 auto;
 }

 .blog-highlight-title {
     font-size: 2rem;
     font-weight: 700;
     color: #181a1f;
     margin-bottom: 12px;
 }

 .blog-highlight-subtitle {
     font-size: 1.1rem;
     color: #333;
     line-height: 1.6;
     margin-bottom: 28px;
 }

 .blog-highlight-subtitle span {
     color: #0077cc;
     font-weight: 600;
 }

 .blog-highlight-btn {
     display: inline-block;
     padding: 12px 28px;
     background: #0077cc;
     color: #fff;
     font-size: 1rem;
     font-weight: 600;
     border-radius: 28px;
     text-decoration: none;
     transition: background 0.3s ease, transform 0.3s ease;
 }

 .blog-highlight-btn:hover {
     background: #005fa3;
     transform: translateY(-3px);
 }