/* ================= GLOBAL FIX ================= */
html, body{
  overflow-x: hidden;
}

/* ================= LAPTOP (max 1024px) ================= */
@media (max-width:1024px){
  .hero{ padding:60px 5%; height:auto; }
  .hero-left h1{ font-size:38px !important; line-height:46px !important; }
  .service-grid{ padding:20px 40px; }
  .steps{ gap:20px; }
  .left-content{ width:55%; }
  .stats-card{ width:42%; }
  .stat{ padding:30px; }
  .app-right img{ width:240px; height:460px; }
  .testimonial-grid{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .footer-right{ gap:60px; margin-right:40px; }
  /* publication cards */
  .pub-card{ flex-direction:row; }
  .pub-img-wrap img{ width:220px; min-width:220px; height:180px; }
  /* index publication grid */
  #pub-grid > div{ flex-direction:row; }
  #pub-grid img{ width:220px !important; min-width:220px !important; height:180px !important; }
}

/* ================= iPAD MINI (max 768px) ================= */
@media (max-width:768px){
  /* NAVBAR */
  .hamburger{ display:block; font-size:28px; cursor:pointer; z-index:1001; }
  .desktop-download-btn{ display:none; }
  .mobile-download-btn{ display:block; width:100%; margin-top:10px; }
  #navMenu{
    position:fixed; top:0; right:-100%;
    width:75%; max-width:300px;
    height:auto;
    display:flex; flex-direction:column;
    justify-content:flex-start; align-items:stretch;
    padding:0;
    background:#fff; box-shadow:-5px 0 25px rgba(0,0,0,0.15);
    transition:0.35s ease-in-out; z-index:1000;
    border-radius:0 0 0 16px;
    top:70px;
  }
  #navMenu .nav-links-wrap{
    display:flex; flex-direction:column;
    padding:10px 0 16px;
  }
  #navMenu .nav-links-wrap a{
    font-size:15px; font-weight:500; color:#333;
    padding:13px 24px;
    text-decoration:none;
    border-bottom:1px solid #f0f0f0;
    transition:0.2s;
  }
  #navMenu .nav-links-wrap a:last-of-type{ border-bottom:none; }
  #navMenu .nav-links-wrap a:hover{ color:#ff4b2b; background:#fff5f3; }
  #navMenu .download-dropdown-wrap{
    position:relative;
  }
  #navMenu .mobile-download-btn{
    margin:12px 16px 16px;
    width:calc(100% - 32px);
    padding:12px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
  }
  #navMenu .download-dropdown-wrap .play-dropdown{
    left:16px;
    right:16px;
    top:calc(100% - 6px);
    min-width:0;
  }
  #navMenu.active{ right:0; }
  #menuOverlay.active{ display:block !important; }

  /* HERO */
  .hero{ flex-direction:column; padding:50px 5%; height:auto; text-align:center; }
  .hero-left h1{ font-size:32px !important; line-height:40px !important; }
  .hero-left p{ font-size:14px; margin:15px auto !important; text-align:center; right:0 !important; border:none; padding:10px 0; margin-left:0 !important; max-width:100% !important; }
  .hero-icons{ justify-content:center; flex-wrap:wrap; }

  /* SERVICES */
  .service-grid{ grid-template-columns:1fr; padding:15px 20px; }
  .service-card img{ width:120px; }

  /* HOW IT WORKS */
  .steps{ flex-direction:column; gap:20px; }
  .arrow{ display:none; }
  .step{ width:100%; max-width:100%; margin:0; padding:20px; }

  /* WHY */
  .container{ flex-direction:column; }
  .left-content{ width:100%; }
  .left-content h1{ font-size:28px; margin-left:0 !important; }
  .stats-card{ width:100%; margin-top:30px; grid-template-columns:1fr 1fr; }
  .stat{ padding:25px; }
  .feature{ flex-direction:row; text-align:left; }
  .icon{ width:44px; height:44px; padding:0; flex-shrink:0; }
  .icon img{ width:100%; height:100%; object-fit:contain; padding:8px; }

  /* APP */
  .app{ flex-direction:column; padding:40px 5%; }
  .app-left{ max-width:100%; padding:20px 0; }
  .app-left h2{ font-size:26px; }
  .app-right{ flex-direction:column; gap:15px; padding:10px; }
  .app-right img{ width:100%; max-width:320px; height:auto; }
  .stores{ flex-direction:column; }
  .store-btn{ width:100%; justify-content:center; }
  .store-btn .icon{ width:40px; height:40px; padding:0; flex-shrink:0; }
  .store-btn .icon img{ width:100%; height:100%; object-fit:contain; padding:6px; }
  .features-card{ margin-left:0; }
  .features-card li{ padding-left:0; display:flex; align-items:flex-start; gap:8px; }
  .features-card li::before{ position:static; flex-shrink:0; margin-top:2px; }

  /* TESTIMONIAL */
  .testimonial-grid{ grid-template-columns:1fr; }

  /* BLOGS */
  .blog-grid{ grid-template-columns:1fr; }

  /* PUBLICATION - page */
  .pub-section{ padding:20px 4%; }
  .pub-card{ flex-direction:column; }
  .pub-img-wrap img{ width:100%; min-width:unset; height:200px; }

  /* PUBLICATION - index */
  #pub-grid > div{ flex-direction:column !important; }
  #pub-grid img{ width:100% !important; min-width:unset !important; height:200px !important; }

  /* FOOTER */
  .footer-container{ flex-direction:column; gap:30px; }
  .footer-left{ max-width:100%; }
  .footer-right{ gap:30px; width:100%; }
  .footer-col{ min-width:120px; }
}

/* ================= MOBILE (max 480px) ================= */
@media (max-width:480px){
  html,body{ width:100%; overflow-x:hidden; }
  img,iframe{ max-width:100%; }

  /* NAVBAR */
  #navMenu{ width:min(260px,calc(100vw - 24px)); }

  /* HERO */
  .hero-left h1{ font-size:26px !important; line-height:34px !important; }

  /* WHY */
  .stats-card{ grid-template-columns:1fr; }
  .stat{ padding:20px; }
  .icon{ width:44px; height:44px; padding:0 !important; flex-shrink:0; }
  .icon img{ width:100%; height:100%; object-fit:contain; padding:8px; }

  /* APP */
  .app-left h2{ font-size:24px; }
  .app-right img{ max-width:100%; height:auto; }
  .store-btn .icon{ width:40px; height:40px; padding:0 !important; }
  .store-btn .icon img{ width:100%; height:100%; object-fit:contain; padding:6px; }

  /* TESTIMONIAL */
  .testimonial-grid{ grid-template-columns:1fr; }

  /* PUBLICATION */
  .pub-card{ flex-direction:column; }
  .pub-img-wrap img{ width:100%; min-width:unset; height:180px; }
  #pub-grid > div{ flex-direction:column !important; }
  #pub-grid img{ width:100% !important; min-width:unset !important; height:180px !important; }

  /* FOOTER */
  .footer-container{ flex-direction:column; gap:30px; }
  .footer-left{ max-width:100%; }
  .footer-right{ gap:30px; width:100%; }
  .footer-col{ min-width:120px; }
}

/* ================= iPAD (769px - 1024px) ================= */
@media (min-width:769px) and (max-width:1024px){
  .hamburger{ display:block; font-size:28px; cursor:pointer; z-index:1001; }
  .desktop-download-btn{ display:none; }
  .mobile-download-btn{ display:block; }
  #navMenu{
    position:fixed; top:70px; right:-100%;
    width:70%; max-width:320px; height:auto;
    display:flex; flex-direction:column;
    justify-content:flex-start; align-items:stretch;
    padding:0;
    background:#fff; box-shadow:-5px 0 25px rgba(0,0,0,0.15);
    transition:0.4s ease-in-out; z-index:1000;
    border-radius:0 0 0 16px;
  }
  #navMenu .nav-links-wrap{
    display:flex; flex-direction:column;
    padding:10px 0 16px;
  }
  #navMenu .nav-links-wrap a{
    font-size:15px; font-weight:500; color:#333;
    padding:13px 24px;
    text-decoration:none;
    border-bottom:1px solid #f0f0f0;
  }
  #navMenu .nav-links-wrap a:hover{ color:#ff4b2b; background:#fff5f3; }
  #navMenu .download-dropdown-wrap{
    position:relative;
  }
  #navMenu .mobile-download-btn{
    margin:12px 16px 16px;
    width:calc(100% - 32px);
    padding:12px;
    border-radius:8px;
  }
  #navMenu .download-dropdown-wrap .play-dropdown{
    left:16px;
    right:16px;
    top:calc(100% - 6px);
    min-width:0;
  }
  #navMenu.active{ right:0; }
  #menuOverlay.active{ display:block !important; }

  /* HERO */
  .hero{ padding:60px 5%; height:auto; }
  .hero-left h1{ font-size:36px !important; line-height:44px !important; }

  /* SERVICES */
  .service-grid{ grid-template-columns:repeat(2,1fr); padding:20px 30px; }

  /* WHY */
  .container{ flex-direction:column; }
  .left-content,.stats-card{ width:100%; }
  .stats-card{ margin-top:30px; }
  .stat{ padding:30px; }

  /* APP */
  .app{ flex-direction:column; }
  .app-left{ max-width:100%; }
  .app-right img{ width:220px; height:420px; }
  .stores{ flex-wrap:wrap; }

  /* TESTIMONIAL */
  .testimonial-grid{ grid-template-columns:repeat(2,1fr); }

  /* BLOGS */
  .blog-grid{ grid-template-columns:repeat(2,1fr); }

  /* PUBLICATION */
  .pub-card{ flex-direction:row; }
  .pub-img-wrap img{ width:220px; min-width:220px; height:180px; }
  #pub-grid > div{ flex-direction:row !important; }
  #pub-grid img{ width:220px !important; min-width:220px !important; height:180px !important; }

  /* FOOTER */
  .footer-container{ flex-direction:column; gap:20px; }
  .footer-right{ flex-direction:row; flex-wrap:wrap; width:100%; margin-right:0; gap:30px; }
}