/*
Theme Name: MobileSurgeon
Theme URI: https://mobilesurgeon.in
Author: MobileSurgeon
Description: Custom theme for MobileSurgeon.in — mobile screen repair & wholesale display distributor in Amritsar. Converted from HTML design prototype.
Version: 1.0
*/
:root{
  --primary:#0B57D0;--primary-dark:#083f9c;--secondary:#111111;--accent:#00C853;
  --bg:#F8F9FA;--white:#FFFFFF;--gray:#6B7280;--border:#E7E9EC;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Inter',sans-serif;color:var(--secondary);background:var(--bg);}
a{color:var(--primary);}
a:hover{color:var(--primary-dark);}
input::placeholder, textarea::placeholder{color:#A6ABB3;}

@keyframes msFadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes msPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@keyframes msStepFade{0%{opacity:0;transform:scale(0.96);}4%{opacity:1;transform:scale(1);}21%{opacity:1;transform:scale(1);}25%{opacity:0;transform:scale(0.96);}100%{opacity:0;}}
@keyframes msStepBar{0%{transform:scaleX(0);}4%{transform:scaleX(0);}21%{transform:scaleX(1);}25%{transform:scaleX(1);}25.5%{transform:scaleX(0);}100%{transform:scaleX(0);}}
@keyframes msMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.ms-brand-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.ms-brand-track{display:flex; align-items:stretch; gap:16px; width:max-content; animation:msMarquee 34s linear infinite;}
.ms-brand-track:hover{animation-play-state:paused;}
.ms-brand-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:140px; height:92px; flex-shrink:0; padding:14px; border:1.5px solid var(--border); border-radius:14px; background:var(--bg); color:var(--gray); transition:color .2s ease, border-color .2s ease, background .2s ease;}
.ms-brand-card:hover{border-color:var(--primary); background:#fff;}
.ms-brand-logo{display:block; width:32px; height:28px; background-color:var(--gray); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; transition:background-color .2s ease;}
.ms-brand-card:hover .ms-brand-logo{background-color:var(--primary);}
.ms-brand-card span{font-weight:700; font-size:13px; color:var(--secondary); text-align:center; line-height:1.2;}
@media (prefers-reduced-motion: reduce){ .ms-brand-track{animation:none;} }

.msh-primary:hover{color:var(--primary) !important;}
.msh-navactive{color:var(--primary) !important;font-weight:700 !important;}
.msh-green:hover{background:#00A847 !important;}
.msh-outline:hover{border-color:var(--primary) !important;color:var(--primary) !important;}
.msh-outline-fill:hover{border-color:var(--primary) !important;color:var(--primary) !important;background:#F3F6FC !important;}
.msh-card-lift:hover{border-color:var(--primary) !important;box-shadow:0 12px 24px rgba(11,87,208,0.1) !important;transform:translateY(-2px);}
.msh-underline:hover{text-decoration:underline !important;}
.ms-float-btn{transition:transform .15s ease, box-shadow .15s ease;}
.ms-float-btn:hover{transform:translateY(-3px);}
.msh-white:hover{color:#fff !important;}
.msh-whatsapp:hover{color:#25D366 !important;}
.msh-social:hover{background:var(--primary) !important;}
.msh-ghost:hover{background:rgba(255,255,255,0.18) !important;}

.ms-faq-item .ms-faq-a{display:none;}
.ms-faq-item.ms-open .ms-faq-a{display:block;}

@media (max-width: 980px){
  .ms-desktop-nav{display:none !important;}
  .ms-mobile-toggle{display:flex !important;}
}
@media (max-width:980px){ .ms-mobile-bar{display:flex !important;} }
@media (max-width:900px){
  .ms-grid-2{grid-template-columns:1fr !important;}
  .ms-grid-3{grid-template-columns:repeat(2,1fr) !important;}
  .ms-grid-4{grid-template-columns:repeat(2,1fr) !important;}
  .ms-grid-5{grid-template-columns:repeat(2,1fr) !important;}
  .ms-grid-6{grid-template-columns:repeat(3,1fr) !important;}
  .ms-grid-7{grid-template-columns:repeat(4,1fr) !important;}
  .ms-footer-grid{grid-template-columns:1fr 1fr !important;}
}
@media (max-width:600px){
  .ms-grid-3{grid-template-columns:1fr !important;}
  .ms-grid-4{grid-template-columns:1fr 1fr !important;}
  .ms-grid-5{grid-template-columns:1fr 1fr !important;}
  .ms-grid-6{grid-template-columns:1fr 1fr !important;}
  .ms-grid-7{grid-template-columns:1fr 1fr !important;}
  .ms-footer-grid{grid-template-columns:1fr !important;}
}