/* ══════════════════════════════════════════════
   WEBNEX ACADEMY — responsive.css
   Sirf mobile/tablet ke liye
══════════════════════════════════════════════ */



/* ─────────────────────────────────────────────
   TABLET (≤ 1024px)
───────────────────────────────────────────── */
@media (max-width: 1024px) {

  .courses-grid { grid-template-columns: repeat(2, 1fr); }

  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .stat-card    { border-bottom: 1px solid rgba(255,255,255,0.07); }
  .stat-card:nth-child(2) { border-right: none; }
  .stat-card:nth-child(3),
  .stat-card:nth-child(4) { border-bottom: none; }

  .testimonial-card { min-width: calc(50% - 10px); }

  .footer-grid  { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: span 2; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-card-large { grid-column: span 2; }
  .gallery-card-wide  { grid-column: span 2; }

  .contact-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}


/* ─────────────────────────────────────────────
   MOBILE (≤ 768px)
───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* === GLOBAL === */
  .container { padding: 0 16px; }
  .section   { padding: 56px 0; }
  .section-header { margin-bottom: 36px; }
  .section-title  { font-size: 1.9rem; }

  /* === NAVBAR === */
  .hamburger { display: flex !important; }

.nav-links {
position:fixed;
overflow:hidden;
  display:flex !important;

 



  top:0;
  right:-100%;

  width:240px;

  height:100vh;

  background:#15120f;

  border-left:2px solid #ff4f00;

  flex-direction:column;

  align-items:flex-start;

  justify-content:flex-start;

  padding:90px 24px 30px;

  gap:4px;

  transition:right .35s ease;

  z-index:1001;

  box-shadow:
  -10px 0 40px rgba(0,0,0,.65);

}

.nav-links.open{
  right:0;
}

.nav-link{

  width:100%;

  padding:14px 0;

  font-size:.95rem;

  color:#ffffff !important;

  font-family:var(--font-display);

  font-weight:800;

  letter-spacing:.06em;

  text-transform:uppercase;

  border-bottom:
  1px solid rgba(255,255,255,.08);

}

.nav-link:hover{

  color:#ff4f00 !important;

  background:transparent;

  border-bottom-color:
  rgba(255,255,255,.07);

}
  .nav-cta {
    margin-top: 12px !important;
    width: 100% !important;
    text-align: center !important;
    clip-path: none !important;
    border-radius: 4px !important;
  }

  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
  }
  .nav-overlay.open { display: block; }


/* ─────────────────────────────────────────────
   HERO MOBILE (≤ 768px)
───────────────────────────────────────────── */

@media (max-width:768px){

  .hero{
    min-height:auto;
    padding-top:70px;
  }

  .hero-content{

    display:flex !important;
    flex-direction:column !important;

    align-items:center;

    text-align:center;

    gap:40px;

    padding:48px 16px 40px;
  }

  .hero-content > .hero-badge,
  .hero-content > .hero-title,
  .hero-content > .hero-subtitle,
  .hero-content > .hero-cta{

    grid-column:auto !important;

    text-align:center;
  }

  .hero-title{

    font-size:clamp(2.3rem,10vw,3.5rem);

    line-height:1;

    margin-bottom:16px;
  }

  .hero-subtitle{

    font-size:.95rem;

    margin-bottom:28px;

    max-width:100%;
  }

  .hero-cta{

    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

    gap:12px;

    margin-bottom:20px;
  }

  .hero-cta .btn{

    width:100%;

    max-width:300px;

    justify-content:center;

    clip-path:none;

    border-radius:4px;
  }

  .hero-code-window{

    grid-column:auto !important;

    grid-row:auto !important;

    justify-self:auto !important;

    width:100%;

    max-width:100%;
  }

  .code-block{

    padding:16px;

    font-size:.72rem;

    height:260px;
  }

  .hero-scroll-indicator{
    display:none;
  }

}

  
  /* === ABOUT — overlap fix === */
  .about-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .about-visual {
    position: relative !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .about-card-main {
    position: static !important;
    width: 100% !important;
    right: auto !important;
    top: auto !important;
    padding: 24px !important;
  }

  .about-card-side {
    position: static !important;
    width: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 18px 24px !important;
  }

  .about-content { width: 100%; }

  /* === COURSES === */
  .courses-grid { grid-template-columns: 1fr !important; gap: 2px; }
  .featured-course { order: -1; }
  .course-card { padding: 28px 20px; }

  /* === TECH === */
  .tech-section { padding: 40px 0; }
  .tech-item { min-width: 120px; padding: 18px 10px; }
  .tech-icon img { width: 40px; height: 40px; }

  /* === WHY === */
  .why-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .why-card { padding: 22px 16px; }
  .why-extra { flex-direction: column; border-radius: 16px; }
  .why-extra-stat {
    padding: 28px 20px;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .why-extra-stat:last-child { border-bottom: none; }

  /* === STATS — MAIN FIX === */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,0.07);
  }

  .stat-card {
    padding: 36px 16px !important;
    border-right: 1px solid rgba(255,255,255,0.07) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }

  .stat-card:nth-child(2) { border-right: none !important; }
  .stat-card:nth-child(3) { border-bottom: none !important; }
  .stat-card:nth-child(4) { border-right: none !important; border-bottom: none !important; }

  .stat-number { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .stat-plus   { font-size: 1.4rem; margin-top: -4px; }
  .stat-label  { font-size: 0.68rem; letter-spacing: 0.08em; margin-top: 8px; }
  .stat-bar    { margin-top: 14px; }

  /* === TESTIMONIALS === */
  .testimonial-card { min-width: calc(100vw - 48px); padding: 22px; }

  /* === GALLERY === */
  .gallery-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .gallery-card-large,
  .gallery-card-wide { grid-column: span 1 !important; }
  .gallery-card { min-height: 180px; }

  /* === CONTACT === */
  .contact-grid { grid-template-columns: 1fr !important; gap: 36px; }
  .form-row  { grid-template-columns: 1fr; }
  .form-card { padding: 28px 18px; }

  /* === FOOTER === */
  .footer-grid  { grid-template-columns: 1fr 1fr !important; gap: 28px; }
  .footer-brand { grid-column: span 2; }

  /* === FLOATING === */
  .whatsapp-float { bottom: 85px; right: 16px; width: 48px; height: 48px; font-size: 22px; }
  .chat-toggle { right: 16px; bottom: 16px; width: 180px; padding: 11px 16px; }
  .chatbox { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 20px 20px 0 0; height: min(80vh, 600px); }
  .scroll-top { bottom: 85px; right: 16px; width: 40px; height: 40px; clip-path: none; }
}


/* ─────────────────────────────────────────────
   MOBILE SMALL (≤ 480px)
───────────────────────────────────────────── */
@media (max-width: 480px) {

  .section { padding: 44px 0; }
  .section-title { font-size: 1.65rem; }

  .hero-title { font-size: clamp(2rem, 11vw, 2.8rem); }
  .code-block { font-size: 0.65rem; }

  .about-block { flex-direction: column; padding: 16px; }

  .course-card { padding: 22px 16px; }
  .course-meta { flex-direction: column; gap: 4px; }

  .why-grid { grid-template-columns: 1fr; }
  .why-card { text-align: center; }

  /* Stats — single column on very small screens */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
  }
  .stat-card {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    padding: 28px 20px !important;
  }
  .stat-card:last-child { border-bottom: none !important; }
  .stat-number { font-size: 2.8rem !important; }

  .footer-grid  { grid-template-columns: 1fr !important; }
  .footer-brand { grid-column: span 1; }
  .form-card { padding: 20px 14px; }

  .chat-toggle span { display: none; }
  .chat-toggle { width: auto; padding: 12px; border-radius: 50%; }
}

@media(max-width:768px){

  .chat-toggle{
    display:none;
  }

  .phone2-link{
    display:none;
  }

}