@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap');
:root{--bg:#f8fafc;--white:#fff;--text:#0f172a;--muted:#475569;--blue:#2563eb;--cyan:#06b6d4;--purple:#7c3aed;--green:#16a34a;--border:#e2e8f0;--cream:#fff7ed;--shadow:0 24px 60px rgba(15,23,42,.10)}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.7}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,92%);margin:auto}.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}.nav{height:82px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:12px;font-weight:800}.logo img{height:54px;width:auto;border-radius:12px}.menu{display:flex;gap:22px;align-items:center}.menu a{font-weight:700;font-size:14px}.dropdown{position:relative}.mega{display:none;position:absolute;right:-180px;top:36px;width:760px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);border-radius:24px;padding:24px;grid-template-columns:repeat(3,1fr);gap:18px}.dropdown:hover .mega{display:grid}.mega h4{margin:0 0 10px}.mega a{display:block;padding:5px 0;color:var(--muted);font-weight:600}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:800;box-shadow:0 12px 25px rgba(37,99,235,.22);border:0;cursor:pointer}.btn.green{background:var(--green)}.hero-carousel{position:relative;min-height:650px;overflow:hidden;background:linear-gradient(135deg,#eff6ff 0%,#fff 45%,#f5f3ff 100%)}.slide{display:none;min-height:650px;align-items:center;text-align:center;padding:90px 0}.slide.active{display:flex}.eyebrow{display:inline-block;background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 15px;color:var(--blue);font-weight:800;margin-bottom:18px}.hero h1{font-family:Poppins;font-size:clamp(38px,7vw,78px);line-height:1.02;margin:0 auto 22px;max-width:1000px}.hero p{font-size:clamp(17px,2vw,22px);max-width:850px;margin:0 auto 28px;color:var(--muted)}.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.dots{position:absolute;bottom:34px;left:0;right:0;text-align:center}.dot{width:12px;height:12px;border-radius:50%;border:0;margin:0 5px;background:#cbd5e1}.dot.active{background:var(--blue)}section{padding:86px 0}.section-head{max-width:780px;margin:0 auto 46px;text-align:center}.section-head h2{font-family:Poppins;font-size:clamp(30px,4vw,48px);line-height:1.15;margin:0 0 14px}.section-head p{color:var(--muted);font-size:18px}.grid{display:grid;gap:24px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}.card{background:#fff;border:1px solid var(--border);border-radius:28px;padding:30px;box-shadow:0 12px 34px rgba(15,23,42,.06)}.card h3{font-family:Poppins;margin-top:0}.service-card:hover,.portfolio-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.service-card,.portfolio-card{transition:.25s}.light{background:#fff}.cream{background:var(--cream)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat{background:#fff;border-radius:22px;padding:24px;text-align:center;border:1px solid var(--border)}.stat b{font-size:34px;color:var(--blue)}.service-visual{background:#fff;border:1px solid var(--border);border-radius:32px;padding:18px;box-shadow:var(--shadow);overflow:hidden}.service-visual img{border-radius:24px;width:100%}.service-visual:before,.service-visual:after{display:none!important;content:none!important}.inner-hero{padding:92px 0;background:linear-gradient(135deg,#eff6ff,#fff,#f5f3ff)}.inner-hero h1{font-family:Poppins;font-size:clamp(36px,6vw,64px);line-height:1.08;margin:0 0 18px}.inner-hero p{font-size:20px;color:var(--muted);max-width:850px}.content p{color:var(--muted)}.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}.checklist div{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;font-weight:700}.about-photo{background:linear-gradient(135deg,#e0f2fe,#fff);border-radius:34px;padding:18px;box-shadow:var(--shadow)}.about-photo img{border-radius:28px;filter:drop-shadow(0 18px 28px rgba(15,23,42,.16))}.map iframe{width:100%;height:420px;border:0;border-radius:28px}.form input,.form textarea,.form select{width:100%;padding:15px 16px;border:1px solid var(--border);border-radius:14px;margin-bottom:14px;font:inherit}.footer{background:#0f172a;color:#cbd5e1;padding:60px 0 26px}.footer h3,.footer h4{color:#fff}.social{display:flex;gap:12px;flex-wrap:wrap}.social a{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#0f172a;font-weight:900}.whatsapp{position:fixed;right:22px;bottom:22px;z-index:80;background:#16a34a;color:#fff;padding:14px 18px;border-radius:999px;font-weight:900;box-shadow:var(--shadow)}@media(max-width:900px){.menu{display:none}.grid-3,.grid-2,.stats{grid-template-columns:1fr}.nav{height:72px}.slide,.hero-carousel{min-height:590px}.mega{display:none}.checklist{grid-template-columns:1fr}section{padding:60px 0}}
.recommendations{background:#fff}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.testimonial-card{background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:26px;box-shadow:0 18px 45px rgba(15,23,42,.08)}.testimonial-card p{color:#475569;line-height:1.7}.testimonial-card h3{font-size:18px;margin:18px 0 5px}.testimonial-card h3 a{color:#0f172a;text-decoration:none}.testimonial-card h3 a:hover{color:#2563eb}.testimonial-card span{font-size:13px;color:#64748b}.avatar{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;font-weight:800;margin-bottom:18px}@media(max-width:991px){.testimonial-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:575px){.testimonial-grid{grid-template-columns:1fr}}

.recommendations-section{background:linear-gradient(180deg,#fff,#f8fafc)}
.recommendations-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.recommendation-card{background:#fff;border:1px solid var(--border-light,#e2e8f0);border-radius:24px;padding:28px;box-shadow:0 18px 45px rgba(15,23,42,.08);transition:.3s ease}
.recommendation-card:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(37,99,235,.14)}
.rec-avatar{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#2563eb,#06b6d4,#7c3aed);margin-bottom:18px}
.recommendation-card p{color:#475569;line-height:1.7;margin-bottom:20px}
.recommendation-card h3{font-size:18px;margin:0 0 6px}.recommendation-card h3 a{color:#0f172a;text-decoration:none}.recommendation-card h3 a:hover{color:#2563eb}
.recommendation-card span{font-size:14px;color:#64748b}
@media(max-width:991px){.recommendations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){.recommendations-grid{grid-template-columns:1fr}.recommendation-card{padding:22px}}

/* ===== Mega menu fix: keep dropdown visible on service pages ===== */
.site-header, .navbar, .main-header, header { position: sticky; top: 0; z-index: 9999; overflow: visible !important; }
.navbar .container, .header-inner, .nav-wrapper, .main-nav, .menu, .navbar-nav { overflow: visible !important; }
.has-mega, .menu-item-has-children, .nav-item.dropdown { position: static !important; }
.mega-menu, .services-mega, .dropdown-menu.mega-menu {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px);
  top: calc(100% - 2px) !important;
  width: min(1120px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 110px);
  overflow-y: auto !important;
  z-index: 10050 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 26px !important;
  border: 1px solid rgba(37,99,235,.16);
  border-radius: 26px;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 30px 90px rgba(15,23,42,.18);
  backdrop-filter: blur(18px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.has-mega:hover .mega-menu, .has-mega:focus-within .mega-menu,
.menu-item-has-children:hover .mega-menu, .menu-item-has-children:focus-within .mega-menu,
.nav-item.dropdown:hover .dropdown-menu.mega-menu, .nav-item.dropdown:focus-within .dropdown-menu.mega-menu,
.mega-menu.is-open, .services-mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega-menu a, .services-mega a { display: block; padding: 10px 12px; border-radius: 12px; color: #0f172a !important; text-decoration: none; line-height: 1.35; }
.mega-menu a:hover, .services-mega a:hover { background: #eef6ff; color: #2563eb !important; }
.mega-menu h4, .services-mega h4, .mega-menu .mega-title { margin: 0 0 10px; color:#0f172a; font-size: 15px; font-weight: 800; }
@media (max-width: 991px){
  .mega-menu, .services-mega, .dropdown-menu.mega-menu { position: static !important; width: 100% !important; max-height: none; transform:none !important; opacity:1; visibility:visible; pointer-events:auto; display:none !important; grid-template-columns:1fr; box-shadow:none; border-radius:16px; margin-top:10px; }
  .has-mega.open .mega-menu, .menu-item-has-children.open .mega-menu, .nav-item.dropdown.open .dropdown-menu.mega-menu, .mega-menu.is-open { display:grid !important; }
}


/* Final fixes: stable mega menu, centered value sections, AI answer blocks */
.site-header,.navbar,.nav-wrap{overflow:visible!important;z-index:9999!important}.menu-item.has-mega{position:relative}.mega-menu{top:100%!important;left:50%!important;transform:translateX(-50%)!important;margin-top:0!important;z-index:10000!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}.menu-item.has-mega:hover .mega-menu,.menu-item.has-mega:focus-within .mega-menu,.menu-item.has-mega.open .mega-menu{opacity:1!important;visibility:visible!important;pointer-events:auto!important}.mega-menu:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;background:transparent}.mega-menu a{white-space:nowrap}.what-you-get,.deliverables,.service-benefits{text-align:center}.what-you-get p,.deliverables p,.service-benefits p{margin-left:auto;margin-right:auto;max-width:820px}.what-you-get .grid,.deliverables .grid,.service-benefits .grid{text-align:left}.service-info,.helpful-info,.service-answer-section{background:linear-gradient(135deg,#eff6ff,#ffffff 55%,#ecfeff);border:1px solid #dbeafe;border-radius:28px;padding:34px;margin:34px 0;box-shadow:0 20px 50px rgba(15,23,42,.08)}.service-info h2,.helpful-info h2,.service-answer-section h2{color:#0f172a;text-align:center;margin-bottom:12px}.service-info p,.helpful-info p,.service-answer-section p{color:#475569;font-size:17px;line-height:1.75}.service-info .info-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}.service-info .info-list div{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:18px}.service-info .info-list strong{display:block;color:#2563eb;margin-bottom:6px}@media(max-width:768px){.mega-menu{position:absolute!important;left:0!important;right:0!important;transform:none!important;width:100%!important;max-height:70vh;overflow:auto}.service-info .info-list{grid-template-columns:1fr}}

/* ===== FINAL CORRECTION: real header mega menu + centered service benefits ===== */
.topbar,.topbar .container,.nav,.menu,.dropdown{overflow:visible!important;}
.topbar{z-index:99999!important;}
.dropdown{position:relative!important;padding-bottom:0;}
.dropdown > a{display:inline-flex;align-items:center;height:82px;}
.dropdown::after{content:"";position:absolute;left:-18px;right:-18px;top:100%;height:22px;background:transparent;z-index:10001;}
.dropdown .mega{
  position:absolute!important;
  top:calc(100% + 0px)!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%) translateY(8px)!important;
  width:min(1060px, calc(100vw - 32px))!important;
  max-height:calc(100vh - 110px)!important;
  overflow-y:auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  z-index:10000!important;
  padding:26px!important;
  border-radius:26px!important;
  border:1px solid rgba(37,99,235,.14)!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 30px 90px rgba(15,23,42,.18)!important;
  backdrop-filter:blur(18px);
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease!important;
}
.dropdown:hover .mega,.dropdown:focus-within .mega,.dropdown.open .mega,.dropdown .mega.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateX(-50%) translateY(0)!important;
}
.dropdown .mega::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px;background:transparent;}
.dropdown .mega h4{font-size:15px;font-weight:800;color:#0f172a;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid #e2e8f0;}
.dropdown .mega a{display:block!important;padding:9px 12px!important;border-radius:12px!important;color:#475569!important;font-weight:700!important;line-height:1.35;white-space:normal!important;}
.dropdown .mega a:hover{background:#eef6ff!important;color:#2563eb!important;}
.light .section-head{text-align:center!important;margin-left:auto!important;margin-right:auto!important;}
.checklist{
  width:min(1180px,92%)!important;
  max-width:1180px!important;
  margin:34px auto 0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(280px,1fr))!important;
  gap:16px!important;
  justify-content:center!important;
  align-items:stretch!important;
}
.checklist div{text-align:left!important;min-height:64px;display:flex;align-items:center;}
.service-info-section{width:min(1180px,92%);margin:0 auto;padding:0;}
.service-info-card{background:linear-gradient(135deg,#eff6ff,#ffffff 55%,#ecfeff);border:1px solid #dbeafe;border-radius:30px;padding:34px;box-shadow:0 20px 50px rgba(15,23,42,.08);}
.service-info-card h2{text-align:center;font-family:Poppins;margin:0 0 14px;font-size:clamp(28px,4vw,42px);line-height:1.15;color:#0f172a;}
.service-info-card p{max-width:920px;margin:0 auto;color:#475569;font-size:17px;line-height:1.8;text-align:center;}
.service-info-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px;}
.service-info-points div{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:18px;color:#475569;}
.service-info-points strong{display:block;color:#2563eb;margin-bottom:6px;}
@media(max-width:900px){
  .dropdown > a{height:auto;}
  .dropdown .mega{position:static!important;transform:none!important;width:100%!important;max-height:none!important;display:none!important;grid-template-columns:1fr!important;box-shadow:none!important;margin-top:12px!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
  .dropdown.open .mega,.dropdown .mega.is-open{display:grid!important;}
  .checklist{grid-template-columns:1fr!important;width:min(680px,92%)!important;}
  .service-info-points{grid-template-columns:1fr;}
}


/* Final responsive mobile menu and hero slider controls */
.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--border);border-radius:14px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;box-shadow:0 8px 20px rgba(15,23,42,.08)}
.menu-toggle span{display:block;width:22px;height:2px;background:#0f172a;border-radius:2px;transition:.25s}.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);z-index:98;opacity:0;visibility:hidden;transition:.25s}.mobile-overlay.active{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}.hero h1{background:linear-gradient(135deg,#0f172a 0%,#2563eb 45%,#7c3aed 80%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:54px;height:54px;border-radius:50%;border:1px solid #dbeafe;background:rgba(255,255,255,.92);box-shadow:0 18px 40px rgba(15,23,42,.14);font-size:40px;line-height:1;color:#0f172a;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s}.hero-arrow:hover{background:#2563eb;color:#fff}.hero-prev{left:28px}.hero-next{right:28px}
@media(max-width:900px){.topbar{z-index:100}.menu-toggle{display:flex}.nav>.btn{display:none}.menu{position:fixed!important;top:0;right:-100%;width:min(86vw,360px);height:100vh;background:#fff!important;z-index:9999;display:flex!important;flex-direction:column;align-items:stretch;gap:0;padding:92px 0 28px;overflow-y:auto;box-shadow:-14px 0 45px rgba(15,23,42,.18);transition:right .32s ease;border-left:1px solid var(--border)}.menu.active{right:0}.menu a{display:block;width:100%;padding:14px 24px;color:#0f172a!important;border-bottom:1px solid #f1f5f9;background:#fff;font-size:15px}.menu a:hover{background:#f8fafc;color:#2563eb!important}.dropdown{position:static!important;width:100%}.dropdown>a::after{content:' +';float:right;font-weight:900}.dropdown.open>a::after{content:' −'}.mega{position:static!important;display:none!important;width:100%!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:6px 0 12px 0!important;background:#f8fafc!important;grid-template-columns:1fr!important;max-height:none!important;overflow:visible!important}.dropdown.open .mega{display:grid!important}.mega h4{padding:12px 24px 2px;margin:0;color:#2563eb;font-size:13px;text-transform:uppercase;letter-spacing:.05em}.mega a{padding:9px 38px!important;background:#f8fafc!important;border-bottom:0!important;color:#334155!important;font-size:14px}.hero-arrow{width:42px;height:42px;font-size:30px}.hero-prev{left:12px}.hero-next{right:12px}.dots{bottom:22px}.slide{padding:78px 26px}.hero h1{font-size:clamp(34px,10vw,48px)}}

/* ==========================================================
   ABSOLUTE FINAL MOBILE MENU FIX - anildesigner.com
   Purpose: .com white/blue theme + overlay never covers menu
   ========================================================== */
@media (max-width:900px){
  html, body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body.menu-open{
    overflow:hidden!important;
  }

  .topbar,
  header.topbar{
    position:sticky!important;
    top:0!important;
    z-index:200000!important;
    overflow:visible!important;
    background:rgba(255,255,255,.96)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    border-bottom:1px solid #e2e8f0!important;
  }

  .topbar .container,
  .nav{
    overflow:visible!important;
  }

  .nav{
    height:72px!important;
    position:relative!important;
    z-index:200002!important;
  }

  .nav > .btn{
    display:none!important;
  }

  .menu-toggle{
    display:flex!important;
    position:relative!important;
    z-index:200004!important;
    width:44px!important;
    height:44px!important;
    background:#ffffff!important;
    border:1px solid #e2e8f0!important;
    border-radius:14px!important;
    box-shadow:0 8px 20px rgba(15,23,42,.10)!important;
  }

  .menu-toggle span{
    background:#0f172a!important;
  }

  /* Overlay covers ONLY the area outside right-side menu */
  .mobile-overlay{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    width:100vw!important;
    height:100vh!important;
    min-height:100dvh!important;
    background:rgba(15,23,42,.55)!important;
    backdrop-filter:blur(4px)!important;
    -webkit-backdrop-filter:blur(4px)!important;
    z-index:199000!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .25s ease, visibility .25s ease!important;
  }

  .mobile-overlay.active{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Right-side mobile menu panel */
  .menu{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:min(86vw,360px)!important;
    max-width:360px!important;
    height:100vh!important;
    height:100dvh!important;
    transform:translateX(105%)!important;
    z-index:200003!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    margin:0!important;
    padding:86px 0 32px!important;
    background:#ffffff!important;
    color:#0f172a!important;
    border-left:1px solid #e2e8f0!important;
    box-shadow:-18px 0 55px rgba(15,23,42,.18)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    transition:transform .32s ease!important;
    pointer-events:auto!important;
  }

  .menu.active{
    transform:translateX(0)!important;
  }

  .menu a{
    display:block!important;
    width:100%!important;
    padding:14px 24px!important;
    margin:0!important;
    color:#0f172a!important;
    background:#ffffff!important;
    border-bottom:1px solid #f1f5f9!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.35!important;
    text-align:left!important;
    white-space:normal!important;
  }

  .menu a:hover,
  .menu a:focus{
    background:#f8fafc!important;
    color:#2563eb!important;
  }

  .dropdown{
    position:static!important;
    width:100%!important;
    display:block!important;
  }

  .dropdown > a{
    position:relative!important;
    padding-right:56px!important;
  }

  .dropdown > a::after{
    content:'+'!important;
    float:none!important;
    position:absolute!important;
    right:24px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    font-size:18px!important;
    font-weight:900!important;
    color:#2563eb!important;
  }

  .dropdown.open > a::after{
    content:'−'!important;
  }

  .dropdown:hover .mega,
  .dropdown:focus-within .mega{
    display:none!important;
  }

  .dropdown.open .mega{
    display:block!important;
  }

  .mega{
    position:static!important;
    display:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:10px 14px 16px!important;
    margin:0!important;
    background:#f8fafc!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    grid-template-columns:1fr!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
  }

  .mega::before,
  .mega::after{
    display:none!important;
    content:none!important;
  }

  .mega > div{
    width:100%!important;
    min-width:0!important;
    margin:0 0 12px!important;
  }

  .mega h4{
    margin:8px 0 8px!important;
    padding:0 10px!important;
    color:#2563eb!important;
    font-size:12px!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }

  .mega a{
    padding:10px 12px!important;
    margin:0 0 5px!important;
    background:#ffffff!important;
    border:1px solid #e2e8f0!important;
    border-radius:10px!important;
    color:#334155!important;
    font-size:13px!important;
    font-weight:700!important;
  }

  .mega a:hover,
  .mega a:focus{
    background:#eef6ff!important;
    color:#2563eb!important;
  }
}

/* =========================================================
   FINAL MOBILE MENU SUBMENU FIX - anildesigner.com
   Keeps Services dropdown inside the right slide panel.
   ========================================================= */
@media (max-width: 900px){
  html, body{
    width:100% !important;
    overflow-x:hidden !important;
  }

  body.menu-open{
    overflow:hidden !important;
    touch-action:none;
    height: 100dvh!important;
  }

  .topbar{
    z-index:1000 !important;
  }

  .mobile-overlay{
    position:fixed !important;
    inset:0 !important;
    background:rgba(15,23,42,.55) !important;
    backdrop-filter:blur(2px) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:9997 !important;
    transition:opacity .25s ease, visibility .25s ease !important;
  }

  .mobile-overlay.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .nav .menu,
  header .menu,
  .topbar .menu{
    position:fixed !important;
    top:0 !important;
    right:-100% !important;
    left:auto !important;
    width:min(330px,86vw) !important;
    max-width:86vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    display:block !important;
    padding:82px 0 26px !important;
    margin:0 !important;
    background:#ffffff !important;
    border-left:1px solid #e2e8f0 !important;
    box-shadow:-18px 0 45px rgba(15,23,42,.18) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    z-index:9999 !important;
    transform:none !important;
    transition:right .3s ease !important;
  }

  .nav .menu.active,
  header .menu.active,
  .topbar .menu.active{
    right:0 !important;
  }

  .menu-toggle{
    position:relative !important;
    z-index:10001 !important;
  }

  .menu a,
  .menu .dropdown > a{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:15px 22px !important;
    margin:0 !important;
    background:#ffffff !important;
    color:#0f172a !important;
    border-bottom:1px solid #f1f5f9 !important;
    text-align:left !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.35 !important;
    white-space:normal !important;
    box-sizing:border-box !important;
  }

  .menu .dropdown{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:#ffffff !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  .menu .dropdown > a{
    position:relative !important;
    padding-right:54px !important;
  }

  .menu .dropdown > a::after{
    content:'+' !important;
    position:absolute !important;
    right:22px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    color:#2563eb !important;
    font-size:18px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

  .menu .dropdown.open > a::after{
    content:'−' !important;
  }

  /* Stop desktop hover mega menu behavior on mobile */
  .menu .dropdown:hover > .mega,
  .menu .dropdown:focus-within > .mega{
    display:none !important;
  }

  /* The key fix: keep submenu inside the mobile panel, not absolute/left side */
  .menu.active .dropdown > .mega,
  .topbar .menu.active .dropdown > .mega,
  header .menu.active .dropdown > .mega,
  .nav .menu.active .dropdown > .mega{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    left:0 !important;
    right:auto !important;
    bottom:auto !important;
    display:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    padding:10px 14px 16px !important;
    background:#f8fafc !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    overflow:visible !important;
    grid-template-columns:1fr !important;
    box-sizing:border-box !important;
  }

  .menu.active .dropdown.open > .mega,
  .topbar .menu.active .dropdown.open > .mega,
  header .menu.active .dropdown.open > .mega,
  .nav .menu.active .dropdown.open > .mega{
    display:block !important;
  }

  .menu.active .mega::before,
  .menu.active .mega::after{
    display:none !important;
    content:none !important;
  }

  .menu.active .mega > div{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 0 12px !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  .menu.active .mega h4{
    display:block !important;
    width:100% !important;
    margin:8px 0 8px !important;
    padding:0 8px !important;
    color:#2563eb !important;
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
  }

  .menu.active .mega a{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 6px !important;
    padding:11px 12px !important;
    background:#ffffff !important;
    border:1px solid #e2e8f0 !important;
    border-radius:10px !important;
    color:#334155 !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    box-sizing:border-box !important;
  }
}