/* =========================================================
   RESPONSIVE - TABLET (600px - 900px)
   Breakpoints used here: 900px, 768px, 760px
   Load AFTER root.css and home.css, BEFORE home-mobile.css
   ========================================================= */

/* =========================================================
   HEADER — MOBILE RESPONSIVE + HAMBURGER MENU (hardened)
   Isse apni mobile-responsive.css file me paste kar dena.

   ⚠️ ZAROORI: Agar tumhari mobile-responsive.css me pehle se
   "nav.glass-menu" ke liye koi @media (max-width:760px) rule
   hai (order:3; overflow-x:auto wala), use DHOOND KE DELETE
   kar do — warna wo is naye rule ko override kar dega.
   Ctrl+F karke "nav.glass-menu" search karo, jo bhi purana
   block mile (header-mobile rules ke alawa), hata do.
   ========================================================= */

/* Hamburger button: hidden on desktop by default */
.hamburger-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--glass-border);
  background:var(--glass);
  cursor:pointer;
  flex:none;
  padding:0;
  z-index:1101;
}
.hamburger-btn span{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:var(--text);
  transition:transform .3s ease, opacity .3s ease;
}
.hamburger-btn.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2){ opacity:0; }
.hamburger-btn.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav-cta{ display:none; }

.mobile-nav-overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,0.55);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:1099 !important;
}
.mobile-nav-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

body.mobile-nav-locked{
  overflow:hidden !important;
}

@media (max-width:760px){

  header{
    padding:10px 16px !important;
    gap:12px !important;
    flex-wrap:nowrap !important;
  }

  .logo-img{
    width:44px !important;
    height:44px !important;
  }

  .hamburger-btn{
    display:flex !important;
    order:3 !important;
    margin-left:auto !important;
  }
  .header-right{
    display:none !important;
  }

  nav.glass-menu{
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    bottom:auto !important;
    height:100vh !important;
    width:min(78vw,320px) !important;
    max-width:320px !important;
    background:var(--bg) !important;
    border:none !important;
    border-left:1px solid var(--glass-border) !important;
    border-radius:0 !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:4px !important;
    padding:80px 22px 30px !important;
    margin:0 !important;
    transform:translateX(100%) !important;
    transition:transform .35s cubic-bezier(.16,1,.3,1) !important;
    z-index:1100 !important;
    overflow-x:visible !important;
    overflow-y:auto !important;
    order:0 !important;
  }
  nav.glass-menu.open{
    transform:translateX(0) !important;
  }
  nav.glass-menu a{
    width:100% !important;
    padding:14px 12px !important;
    font-size:15px !important;
    border-bottom:1px solid var(--glass-border);
    border-radius:0 !important;
    white-space:normal !important;
  }
  nav.glass-menu a::after{
    display:none !important;
  }
  nav.glass-menu a:hover,
  nav.glass-menu a.active{
    background:rgba(225,181,76,0.1);
  }

  .mobile-nav-cta{
    display:flex !important;
    justify-content:center;
    margin-top:18px;
    width:100%;
  }
}

/* =========================================================
   OFFER BAR + TICKER + HERO — MOBILE RESPONSIVE
   Isse apni mobile-responsive.css file me paste kar dena
   ========================================================= */

@media (max-width:900px){
  .hero{
    gap:26px;
    padding:32px 24px 40px;
  }
  .orbit-wrap{
    width:min(60vw,440px);
    height:min(60vw,410px);
  }
}

@media (max-width:760px){

  /* ---------- Sticky Offer Bar ---------- */
  .offer-bar-inner{
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
    gap:10px;
    padding:12px 18px;
  }
  .offer-price{
    order:1;
  }
  .offer-price .new-price{
    font-size:17px;
  }
  .offer-price .old-price{
    font-size:14px;
  }
  .offer-timer{
    order:2;
    font-size:12px;
    gap:6px;
    width:100%;
    justify-content:center;
  }
  .offer-timer .offer-time{
    padding:2px 6px;
    font-size:13px;
  }
  .offer-cta{
    order:3;
    width:100%;
    text-align:center;
    padding:10px 20px;
    font-size:13px;
  }

  /* ---------- Live Ticker ---------- */
  .ticker-bar{
    height:38px;
  }
  .ticker-live{
    padding:0 12px;
    padding-right:24px;
    font-size:10.5px;
    gap:6px;
  }
  .ticker-track-wrap{
    margin-left:-10px;
  }
  .ticker-track{
    height:38px;
  }
  .ticker-item{
    font-size:11.5px;
    gap:7px;
    padding:0 18px;
  }
  .ticker-item .tag{
    font-size:9px;
    padding:2px 6px;
  }

  /* ---------- Hero ---------- */
  .hero{
    flex-direction:column;
    padding:24px 18px 44px;
    gap:32px;
  }
  .hero-left{
    min-width:100%;
    text-align:center;
  }
  .eyebrow{
    font-size:11px;
    padding:5px 12px;
    margin-bottom:16px;
  }
  .hero-left h1{
    font-size:clamp(26px,7vw,34px);
    margin:0 auto 16px;
  }
  .hero-left p.sub{
    font-size:14.5px;
    margin:0 auto 24px;
    max-width:100%;
  }
  .hero-btns{
    justify-content:center;
  }
  .btn-primary,
  .btn-secondary{
    flex:1 1 auto;
    text-align:center;
    padding:12px 18px;
    font-size:13.5px;
  }

  .logo-marquee{
    margin-top:20px;
  }
  .logo-track img{
    height:44px;
    width:44px;
  }

  .hero-right{
    margin-top:0;
    width:100%;
  }
  .orbit-wrap{
    width:88vw;
    height:88vw;
    max-width:380px;
    max-height:380px;
    margin:0 auto;
  }
  .card{
    min-width:0;
    max-width:150px;
    padding:5px 12px 5px 5px;
  }
  .card .icon{
    width:22px;
    height:22px;
  }
  .card .icon svg{
    width:11px;
    height:11px;
  }
  .card .label{
    font-size:9px;
  }
  .center{
    width:70%;
  }
  .center .center-tag{
    font-size:10px;
  }
  .center h2{
    font-size:14px;
  }
}

/* ============ TABLET / 768px ============ */

@media (max-width:768px){

  /* ---------- Video Showcase (ai-shift) ---------- */
  .ai-shift{
    padding:36px 24px;
  }
  .video-showcase .ai-shift-wrap{
    flex-direction:column;
    gap:28px;
  }
  .ai-shift-text,
  .video-showcase .ai-shift-visual{
    flex:1 1 100%;
    width:100%;
    justify-content:center;
    max-width:100%;
  }

  /* ---------- Problem Section ---------- */
  .problem{
    padding:0 24px 40px;
  }
  .problem-top{
    gap:32px;
  }
  .stat-hero{
    margin-top:0;
  }
  .source-box{
    align-self:flex-start;
    margin-top:0;
  }
}

/* ============ TABLET / 768px ============ */

@media (max-width:768px){

  /* ---------- Context Hero ---------- */
  .context-hero{
    padding:40px 24px;
  }
  .context-hero-inner{
    flex-direction:column;
    gap:32px;
  }
  .context-hero-left{
    flex:1 1 100%;
    max-width:100%;
    width:100%;
    min-width:0;
  }
  .context-hero-right{
    flex:1 1 100%;
    max-width:100%;
    width:100%;
    min-width:0;
    order:-1;
  }
  .context-graphic{
    max-width:340px;
    margin:0 auto;
  }

  /* ---------- Shift CTA ---------- */
  .shift-cta{
    padding:0 24px;
  }
  .shift-cta-card{
    flex-direction:column;
    gap:28px;
  }
  .shift-cta-left,
  .shift-cta-right{
    flex:1 1 100%;
    width:100%;
    min-width:0;
  }
}

/* ============ TABLET / 768px ============ */

@media (max-width:768px){

  .evolution{
    padding:24px 24px;
  }
  .evolution-card{
    flex-direction:column;
    align-items:stretch;
    gap:24px;
    padding:22px 24px;
  }
  .evo-divider{
    width:100%;
    height:1px;
    align-self:stretch;
  }
  .evo-today{
    flex:1 1 100%;
    min-width:0;
  }
  .evo-steps{
    justify-content:flex-start;
  }
}

/* ============ TABLET / 768px ============ */

@media (max-width:768px){

  /* ---------- AI Shift (image + text) ---------- */
  .ai-shift{
    padding:36px 24px;
  }
  .ai-shift-wrap{
    flex-direction:column;
    gap:24px;
  }
  .ai-shift-visual,
  .ai-shift-text{
    flex:1 1 100%;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /* ---------- AI News Section ---------- */
  .ai-news-section .container{
    width:92%;
  }
  .news-layout{
    grid-template-columns:1fr;
    gap:24px;
  }
  .news-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .news-right{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .counter-box,
  .timeline,
  .cta-box{
    flex:1 1 135px;
  }
}

/* ============ TABLET / 768px ============ */

@media (max-width:768px){

  .why{
    padding:40px 24px;
  }
  .why-content{
    grid-template-columns:1fr;
    gap:32px;
  }
  .why-certificate{
    order:-1;
    max-width:420px;
    margin:0 auto;
  }
}

/* ============ TABLET / 768px ============ */

@media (max-width:768px){

  .placements{
    padding:8px 24px 44px;
  }
  .placement-pill{
    font-size:11.5px;
    padding:9px 20px;
  }
  .placement-marquee{
    margin-top:28px;
  }
  .placement-logo{
    padding:0 32px;
    height:42px;
  }
  .placement-logo img{
    max-height:42px;
    max-width:120px;
  }
}

/* ============ TABLET / 768px ============ */

@media (max-width:768px){

  .jt-section{
    padding:0 24px 24px;
  }
  .jt-cards{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }
  .jt-hero{
    position:static;
    min-height:0;
    padding:32px 26px;
  }
}

/* ============ TABLET / 768px ============ */

@media (max-width:768px){

  /* ---------- Blog ---------- */
  .blog{
    padding:40px 24px;
  }
  .grid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }
  .intro{
    grid-column:1 / -1;
  }
  .post-card.featured{
    transform:none;
  }

  /* ---------- Testimonials ---------- */
  .testi{
    padding:40px 24px;
  }
  .t-head p{
    padding:0 40px;
  }
  .t-body{
    flex-direction:column;
    gap:28px;
  }
  .sidebar{
    flex:1 1 100%;
    padding-top:0;
  }
  .t-card{
    flex:0 0 calc((100% - 18px)/2);
  }

  /* ---------- FAQ ---------- */
  .faq{
    padding:40px 24px;
    gap:36px;
  }
  .faq-left,
  .faq-right{
    flex:1 1 100%;
  }
}

/* =========================================================
   FOOTER — MOBILE RESPONSIVE
   Isse apni mobile-responsive.css file me paste kar dena
   (header-mobile.css ke rules ke niche add kar sakte ho)
   ========================================================= */

@media (max-width:900px){

  .footer-wrap{
    padding:0 20px;
  }

  /* Row 1: brand + newsletter → stack vertically */
  .footer-top-row{
    grid-template-columns:1fr;
    gap:26px;
    padding:22px 0;
  }
  .footer-newsletter{
    justify-self:start;
    max-width:100%;
    margin-top:0;
  }

  /* Row 2: link columns → 2 per row */
  .footer-links-row{
    grid-template-columns:1fr 1fr;
    gap:24px 20px;
  }
}

@media (max-width:760px){

  /* Office address block */
  .footer-address{
    margin-top:40px;
    flex-wrap:wrap;
    gap:10px;
  }
  .footer-address-text p{
    font-size:12.5px;
  }

  /* Trust badges row */
  .footer-trust-row{
    gap:12px;
    flex-wrap:wrap;
  }
  .trust-card{
    padding:10px 20px;
    flex:1 1 auto;
  }
  .ssl-badge{
    width:52px;
    padding-top:0;
  }

  /* Newsletter form */
  .footer-newsletter h3{
    font-size:15px;
  }
  .footer-newsletter form{
    flex-direction:column;
    gap:10px;
  }
  .footer-newsletter button{
    width:100%;
  }

  /* Social icons row */
  .footer-social{
    gap:10px;
  }
  .social-ico{
    width:32px;
    height:32px;
  }
  .social-ico svg{
    width:32px;
    height:32px;
  }

  /* Bottom bar */
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    text-align:left;
    padding:20px 0;
    margin-bottom: 100px;
  }
  .footer-bottom .legal-links{
    gap:16px;
    flex-wrap:wrap;
  }

  /* ===== Floating action buttons ===== */
  .fab-stack{
    right:16px;
    bottom:18px;
    gap:10px;
  }
  .fab{
    width:46px;
    height:46px;
  }
  .fab svg{
    width:21px;
    height:21px;
  }

  /* ===== Counsellor popup ===== */
  .counsellor-modal{
    flex-direction:column;
    max-height:92vh;
  }
  .counsellor-visual{
    padding:26px 22px;
  }
  .counsellor-visual h3{
    font-size:20px;
  }
  .counsellor-form-side{
    padding:26px 22px;
  }
  .cf-row{
    flex-direction:column;
    gap:0;
  }
  .counsellor-close{
    top:10px;
    right:10px;
  }
}