
/* ===== FINAL RESPONSIVE FIXES FOR MTC DIGITAL ===== */
html{scroll-behavior:smooth;overflow-x:hidden;}
body{overflow-x:hidden;max-width:100%;}
img,svg{max-width:100%;}
button,a{-webkit-tap-highlight-color:transparent;}

/* Header + mobile menu */
.navbar{position:relative;}
.mobile-toggle{display:none;width:44px;height:44px;border:0;border-radius:12px;background:linear-gradient(90deg,#7c3aed,#2563eb);color:#fff;font-size:24px;line-height:1;cursor:pointer;align-items:center;justify-content:center;}
body.menu-open{overflow:hidden;}
.menu a:hover{color:#ff0000;}

/* Hero scaling */
h1{font-size:clamp(30px,4vw,50px)!important;}
.container{width:100%;}
.right{max-width:500px;}
.flow{transform-origin:top center;}

/* Prevent global card conflicts */
.mtc-dashboard-counter .card,
.mtc-clients-section .card,
.mtc-pricing-section .pricing-card,
.mtc-features-section .feature-card{max-width:100%;}

/* Better modules image handling */
.mtc-modules-section .slide img{height:auto;object-fit:cover;}

@media(max-width:1100px){
  .container{gap:24px;padding:25px 18px;}
  .right{width:45%;min-width:420px;}
  .mtc-pricing-section .pricing-grid{gap:18px;}
  .mtc-pricing-section .pricing-card{padding:24px;}
  .mtc-pricing-section .price{font-size:44px;}
}

@media(max-width:900px){
  body{padding-top:74px!important;}
  .navbar{padding:12px 16px!important;}
  .logo{font-size:22px!important;}
  .mobile-toggle{display:flex;order:3;}
  .nav-btns{display:none!important;}
  .menu{display:flex!important;position:fixed;top:68px;left:12px;right:12px;background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.18);padding:18px;flex-direction:column;gap:0;z-index:10000;transform:translateY(-18px);opacity:0;pointer-events:none;transition:.25s ease;}
  .menu.active{transform:translateY(0);opacity:1;pointer-events:auto;}
  .menu a{display:block;padding:14px 12px;border-bottom:1px solid #f1f1f1;font-size:16px!important;}
  .menu a:last-child{border-bottom:0;}
  .container{flex-direction:column!important;align-items:stretch!important;padding:24px 16px!important;}
  .left{width:100%;}
  .right{width:100%!important;min-width:0;height:auto!important;overflow:auto;padding-bottom:10px;}
  .flow{width:500px;height:600px;transform:scale(.82);margin:0 auto -95px;}
  .card{padding:20px!important;}
  .action button{width:100%;}
  .mtc-dashboard-counter .dashboard{width:94%;}
  .mtc-features-section,.mtc-pricing-section,.mtc-modules-section,.contact-section{padding-left:16px!important;padding-right:16px!important;}
  .mtc-pricing-section .top-badges{flex-wrap:wrap;}
}

@media(max-width:768px){
  .mtc-dashboard-counter .cards{grid-template-columns:repeat(2,1fr)!important;}
  .mtc-clients-section{padding:45px 12px!important;}
  .mtc-clients-section .section-top h2,
  .mtc-features-section .section-header h2,
  .mtc-pricing-section .pricing-header h2,
  .mtc-modules-section .section-header h2{font-size:clamp(28px,8vw,38px)!important;}
  .mtc-pricing-section .pricing-grid,
  .mtc-features-section .feature-grid,
  .office-grid{grid-template-columns:1fr!important;}
  .mtc-pricing-section .featured{transform:none!important;}
  .contact-header h2{font-size:38px!important;}
}

@media(max-width:560px){
  .navbar{gap:10px;}
  h1 br{display:none;}
  h1{line-height:1.25!important;}
  .tag{font-size:13px!important;}
  .flow{transform:scale(.62);margin-left:50%;translate:-50% 0;margin-top:-20px;margin-bottom:-210px;}
  .right{min-height:395px;overflow:hidden;}
  .mtc-dashboard-counter .cards{grid-template-columns:1fr!important;}
  .mtc-dashboard-counter .card{padding:18px!important;}
  .mtc-clients-section .card{width:240px!important;min-width:240px!important;padding:22px 18px!important;}
  .mtc-features-section .feature-card,.mtc-pricing-section .pricing-card,.office-card{padding:22px!important;}
  .mtc-pricing-section .price{font-size:36px!important;word-break:break-word;}
  .mtc-modules-section .module-slider{padding:12px!important;border-radius:18px!important;}
  .contact-buttons .btn{width:100%;max-width:280px;}
  .social-icons a{width:42px;height:42px;}
}

@media(max-width:380px){
  .flow{transform:scale(.55);margin-bottom:-255px;}
  .right{min-height:350px;}
  .box{font-size:12px!important;padding:12px 20px!important;}
}

/* ===== Section navigation fixes ===== */
html{scroll-behavior:smooth;}
#home,#features,#pricing,#services,#contact{scroll-margin-top:110px;}
.menu a.active{
  color:#ff0000;
  font-weight:700;
}
.menu a{transition:.25s;}
.menu a:hover{color:#ff0000;}
