/* === MonasteryHill Responsive for EAKTY === */

/* Tablet */
@media (max-width: 1024px) {
  .container{padding:0 30px}
  h1{font-size:34px}h2{font-size:26px}h3{font-size:18px}
  .card-grid,.values-grid,.service-grid{grid-template-columns:repeat(2,1fr)}
  .card-grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .about-content{grid-template-columns:1fr;gap:40px}
  .about-image{order:-1}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .header-left .tagline{display:none}
  .hero{min-height:500px}
  .hero-content h1{font-size:36px}
  .hero-content p{font-size:16px}
  .stats{gap:30px}
  .stat-number{font-size:32px}
  .product-filters{gap:8px}
  .filter-btn{padding:7px 16px;font-size:12px}
  .header-nav>a{font-size:12px;padding:8px 7px}
  .nav-item>a,.nav-item>.nav-link{font-size:12px;padding:8px 7px}
  .lang-switch{font-size:11px;padding:4px 10px;margin-left:4px}
}

/* =============== MOBILE (max-width: 992px) =============== */
@media (max-width: 992px) {

  /* ---- Header ---- */
  .site-header{position:fixed !important;top:0;left:0;right:0;height:64px;background:rgba(255,255,255,0.97) !important;box-shadow:0 2px 20px rgba(0,0,0,0.08);z-index:1000}
  .site-header.sticky{height:56px}
  .header-logo .logo-text{color:#1A1A1A !important;font-size:12px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-logo .logo-sub{display:none}
  .header-logo img{height:36px !important}
  .mobile-toggle{display:flex !important}
  .mobile-toggle span{background:#1A1A1A !important}
  .header-left{display:none}

  /* ---- Overlay (only covers left side, NOT the nav panel) ---- */
  .mobile-menu-overlay{display:none;position:fixed;top:0;left:0;right:280px;height:100%;background:rgba(0,0,0,0.4);z-index:9999}
  body.menu-open .mobile-menu-overlay{display:block}

  /* ---- Side nav panel ---- */
  .header-nav{
    position:fixed !important;
    top:0;
    right:-300px;
    width:280px;
    height:100vh;
    background:#FFFFFF;
    padding:70px 20px 30px;
    transition:right 0.3s ease;
    box-shadow:-5px 0 30px rgba(0,0,0,0.15);
    z-index:10001;
    gap:0;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .header-nav.open{right:0}

  /* Body lock */
  body.menu-open{overflow:hidden !important}

  /* ---- Nav links ---- */
  .header-nav>a{
    color:#3F4249 !important;
    font-size:15px !important;
    font-weight:500;
    padding:14px 0 !important;
    width:100%;
    border-bottom:1px solid #F0F0F0;
    text-decoration:none !important;
    display:block !important;
    white-space:normal;
  }
  .header-nav>a::after{display:none !important}
  .header-nav>a:active{color:#2F6ABC !important}

  /* ---- Products dropdown ---- */
  .nav-item{width:100%;position:relative !important}
  .nav-item>a,.nav-item>.nav-link{
    color:#3F4249 !important;
    font-size:15px !important;
    font-weight:500;
    padding:14px 0 !important;
    width:100%;
    border-bottom:1px solid #F0F0F0;
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    text-decoration:none !important;
    white-space:normal;
  }
  .nav-item>a::after,.nav-item>.nav-link::after{display:none !important}
  .nav-item>a:active,.nav-item>.nav-link:active{color:#2F6ABC !important}

  /* Chevron rotation */
  .nav-item.dropdown-open>a .fa-chevron-down,
  .nav-item.dropdown-open>.nav-link .fa-chevron-down{transform:rotate(180deg)}
  .nav-item>a .fa-chevron-down,
  .nav-item>.nav-link .fa-chevron-down{transition:transform 0.3s}

  /* Disable desktop hover */
  .nav-item:hover .nav-megamenu{display:none !important;opacity:0 !important;visibility:hidden !important}

  /* ---- Megamenu (stacked) ---- */
  .nav-megamenu{position:static !important;transform:none !important;opacity:1 !important;visibility:visible !important;box-shadow:none !important;border-radius:0 !important;display:none !important;flex-direction:column !important;width:100% !important;background:#F0F2F5;border-bottom:1px solid #E0E0E0;margin:0;overflow:visible !important}
  .nav-item.dropdown-open .nav-megamenu{display:flex !important;opacity:1 !important;visibility:visible !important}

  .nav-megamenu-left{width:100% !important;border-right:none !important;border-bottom:none !important;padding:0 !important;background:#F0F2F5 !important;flex-direction:column !important}
  .megamenu-cat{padding:12px 16px 12px 20px !important;font-size:14px !important;font-weight:500 !important;border-left:none !important;color:#3F4249 !important;text-decoration:none !important;display:flex !important;align-items:center !important;justify-content:space-between !important;white-space:normal !important;border-bottom:1px solid #E8E8E8 !important}
  .megamenu-cat:active,.megamenu-cat.active{color:#2F6ABC !important;background:#FFFFFF !important}
  .megamenu-arrow{font-size:10px;color:#999;transition:transform 0.2s}
  .megamenu-cat.cat-open .megamenu-arrow{transform:rotate(90deg);color:#2F6ABC}
  .megamenu-cat.cat-open{color:#2F6ABC !important;background:#FFFFFF !important}

  /* Hide desktop right panel on mobile */
  .nav-megamenu-right{display:none !important}

  /* ---- Mobile accordion: inline sub-items ---- */
  .megamenu-sub-inline{display:none;background:#FFFFFF}
  .megamenu-sub-inline.open{display:block}
  .megamenu-sub-inline .megamenu-sub-item{padding:10px 20px 10px 36px !important;font-size:13px !important;color:#5A5E66 !important;text-decoration:none !important;display:block !important;border-bottom:1px solid #F5F5F5;white-space:normal !important}
  .megamenu-sub-inline .megamenu-sub-item:active{color:#2F6ABC !important;background:#F7F7F7}
  .megamenu-sub-inline .megamenu-sub-item::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#D0D5DD;margin-right:10px;vertical-align:middle}

  /* Close button */
  .mobile-close{display:flex !important;position:absolute;top:16px;right:16px;width:36px;height:36px;border:none;background:#F5F5F5;border-radius:50%;font-size:20px;color:#3F4249;cursor:pointer;align-items:center;justify-content:center;z-index:2}

  /* Language switch */
  .lang-switch{margin-left:0;margin-top:16px;display:inline-block;color:#2F6ABC !important;border-color:#2F6ABC !important}

  /* Content offset for fixed header */
  .hero{margin-top:64px}
  .page-banner{margin-top:64px;padding-top:100px}
}

/* Small tablet / large phone */
@media (max-width: 768px) {
  .container{padding:0 20px}
  .section{padding:50px 0}
  h1{font-size:28px}h2{font-size:22px}h3{font-size:16px}
  .card-grid,.card-grid-2,.card-grid-4,.values-grid,.service-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .process-grid{grid-template-columns:1fr}
  .stats{flex-direction:column;gap:24px}
  .hero{min-height:400px}
  .hero-content h1{font-size:28px}
  .hero-content p{font-size:14px;line-height:22px}
  .hero-content .btn{font-size:13px;padding:10px 20px}
  .card-body{padding:16px}
  .side-contact-panel{width:100%;right:-100%}
  .page-banner h1{font-size:28px}
}

@media (max-width: 480px) {
  h1{font-size:24px}h2{font-size:20px}
  .hero{min-height:350px}
  .hero-content h1{font-size:22px}
  .container{padding:0 16px}
}