/* ==========================================================================
   Mohammad Owais — Portfolio Responsive Stylesheet
   Breakpoints: 980px (tablet), 560px (mobile), 380px (small mobile)
   ========================================================================== */

@media (max-width:980px){
  .hero-grid,.about-grid{grid-template-columns:1fr;gap:44px;}
  .hero-visual{order:-1;}
  .profile-ring{width:220px;height:220px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .case-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .process-row{grid-template-columns:repeat(2,1fr);}
  .skills-grid{grid-template-columns:1fr;}
  .cert-grid{grid-template-columns:repeat(2,1fr);}
  .media-grid{grid-template-columns:repeat(2,1fr);}
  .contact-card-main{grid-template-columns:1fr;text-align:center;padding:36px 24px;}
  .contact-row{justify-content:center;}
  .nav-links{
    position:fixed;top:60px;left:0;right:0;
    background:rgba(20,18,16,0.98);backdrop-filter:blur(16px);
    flex-direction:column;align-items:flex-start;
    padding:22px;gap:18px;border-bottom:1px solid rgba(255,255,255,0.08);
    transform:translateY(-150%);transition:transform 0.3s ease;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{display:block;}
  .timeline::before{left:16px;}
  .tl-item,.tl-item:nth-child(even){width:100%;left:0;text-align:left;padding:0 0 36px 44px;}
  .tl-item:nth-child(odd) .tl-dot,.tl-item:nth-child(even) .tl-dot{left:8px;right:auto;}
  section{padding:60px 0;}
  .hero{padding:120px 0 50px;}
  .mouse-glow{display:none;}
}

@media (max-width:560px){
  .why-grid,.services-grid,.cert-grid,.media-grid{grid-template-columns:1fr;}
  .process-row{grid-template-columns:1fr;}
  .container{padding:0 18px;}
  section{padding:48px 0;}
  .hero{padding:104px 0 40px;}
  .section-head{margin-bottom:36px;}
  .logo{font-size:17px;}
  .nav-inner{padding:0 18px;}
  .hero-tags{font-size:13px;}
  h1.hero-title{font-size:clamp(34px,10vw,44px);}
  .hero-subtitle{font-size:19px;}
  .hero-desc{font-size:15.5px;}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:12px;}
  .hero-ctas .btn{justify-content:center;width:100%;}
  .hero-social{gap:10px;}
  .social-pill{font-size:12.5px;padding:8px 13px;}
  .hero-badges{gap:10px;}
  .badge{flex:1 1 30%;min-width:0;padding:10px 8px;}
  .badge-num{font-size:18px;}
  .badge-label{font-size:10px;}
  .profile-ring{width:190px;height:190px;}
  .hero-video{margin-top:36px;}
  .hero-video-label{font-size:12px;margin-bottom:12px;}
  .stats-grid{gap:14px;}
  .stat-card{padding:22px 16px;}
  .stat-number{font-size:30px;}
  .about-text p{font-size:15.5px;}
  .highlight-box{padding:24px 20px;}
  .why-card{padding:22px 18px;}
  .service-card{padding:20px 16px;}
  .skill-card{padding:22px 20px;}
  .process-step{padding:20px 14px;}
  .tl-card{padding:20px 18px;}
  .case-body{padding:22px 20px;}
  .cert-card{padding:20px 14px;}
  .media-card{padding:26px 22px;}
  .faq-q{padding:17px 18px;font-size:14.5px;}
  .faq-a{padding:0 18px;}
  .faq-item.open .faq-a{padding:0 18px 18px;}
  .contact-card-main{padding:30px 20px;}
  .contact-avatar{width:88px;height:88px;}
  .contact-btns{flex-direction:column;align-items:stretch;}
  .contact-btns .btn{justify-content:center;width:100%;}
  .footer-inner{flex-direction:column;text-align:center;gap:16px;}
  .marquee-track{gap:12px;}
  .client-card{padding:18px 24px;font-size:14px;}
  .back-to-top{width:42px;height:42px;bottom:18px;right:18px;font-size:16px;}
}

@media (max-width:380px){
  .badge{flex:1 1 100%;}
  .hero-social .social-pill{flex:1 1 auto;justify-content:center;}
}