/* ==========================================================================
   TASCO IT Solutions - MOBILE & TABLET LAYER
   Loaded last (after site.css and light.css). Only tunes sizes, spacing and
   stacking for small screens; desktop is unchanged.
   ========================================================================== */

/* ---------- Global safety (all sizes) ---------------------------------- */
html{overflow-x:clip}
body.tasco{overflow-x:hidden;max-width:100%}
.tasco .e-con,.tasco .e-con-inner,.tasco .elementor-widget{min-width:0}
.tasco img,.tasco svg,.tasco video,.tasco iframe{max-width:100%}
.tasco .elementor-heading-title,.tasco .elementor-widget-text-editor,.t-prose,.t-post h2,.t-post h3{overflow-wrap:break-word;word-wrap:break-word}
.t-prose a,.t-footer a,.t-contact-list .elementor-icon-list-text{overflow-wrap:anywhere}
/* "$" counter prefix needs no gap (was set for "AED ") */
.t-stat .elementor-counter-number-prefix{margin-right:0}

/* ---------- Tablet (<=1024px) ------------------------------------------ */
@media(max-width:1024px){
  .e-con.t-hero{--padding-top:72px;--padding-bottom:84px;min-height:0}
  .e-con.t-phero{--padding-top:70px;--padding-bottom:70px}
  .e-con.t-orbit{max-width:380px;margin:0 auto}
  .t-hero-visual{min-height:0}
  .e-con.t-split > .e-con{width:100%!important;max-width:100%!important}
  .e-con.t-statrow{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px 24px!important}
  .e-con.t-statrow > .elementor-element{width:auto!important;max-width:none!important}
}

/* ---------- Phones (<=767px) ------------------------------------------- */
@media(max-width:767px){
  body.tasco{font-size:16px}

  /* top bar: compact, centred, no overflow */
  .t-topbar{font-size:12px}
  .t-topbar .t-wrap{justify-content:center;min-height:34px;padding-top:6px;padding-bottom:6px}
  .t-topbar .tb-l{flex-wrap:wrap;justify-content:center;gap:4px 14px;text-align:center}
  .t-topbar .tb-social{display:none}

  /* header */
  .t-header .t-wrap{min-height:64px;gap:10px}
  .t-brand{gap:8px;min-width:0}
  .t-brand .mark{width:44px;height:32px;background-size:66px 66px;background-position:-14px -10px}
  .t-nav{padding:76px 18px 36px}
  .t-mega ul a{font-size:15px;padding:10px}

  /* section rhythm */
  .e-con.t-sec{--padding-top:56px;--padding-bottom:56px}
  .e-con.t-sec,.e-con.t-hero,.e-con.t-phero{--padding-left:18px;--padding-right:18px}
  .e-con.t-sec > .e-con-inner{--gap:30px}
  .e-con.t-split{--gap:32px}
  .e-con.t-head{--gap:10px}

  /* type scale for a wide display font */
  .t-h1 .elementor-heading-title{font-size:clamp(29px,8.4vw,38px)!important;line-height:1.1;letter-spacing:-.02em}
  .t-h2 .elementor-heading-title{font-size:clamp(23px,6.6vw,30px)!important;line-height:1.16}
  .t-h3 .elementor-heading-title{font-size:18px!important}
  .t-eyebrow .elementor-heading-title{font-size:11px!important;letter-spacing:.14em!important}
  .t-lead.elementor-widget-text-editor{font-size:16.5px}
  .tasco .elementor-widget-text-editor{font-size:16px}

  /* hero */
  .e-con.t-hero{--padding-top:44px;--padding-bottom:64px}
  .e-con.t-hero::after{height:70px}
  .e-con.t-orbit{max-width:260px}
  .t-orbit-fx i:nth-child(3){inset:2%}
  .e-con.t-phero{--padding-top:48px;--padding-bottom:52px}

  /* buttons: full width, easy to tap */
  .e-con.t-btns{width:100%;flex-direction:column!important;align-items:stretch!important}
  .e-con.t-btns > .elementor-widget-button{width:100%!important;max-width:100%!important}
  .e-con.t-btns .elementor-button{width:100%;justify-content:center;display:flex}
  .tasco .t-btn .elementor-button,.tasco .t-btn-white .elementor-button{padding:16px 22px}
  .tasco .t-btn-ghost .elementor-button{padding:15px 22px}

  /* chips: smaller */
  .t-chips .elementor-icon-list-item{padding:7px 12px!important}
  .t-chips .elementor-icon-list-text{font-size:12px!important}

  /* cards */
  .t-card .elementor-icon-box-wrapper,.e-con.t-card{padding:24px 20px}
  .t-card .elementor-icon-box-title{font-size:17.5px!important}
  .t-card .elementor-icon-box-description{font-size:15px!important}
  .t-card.t-link .elementor-icon-box-wrapper::after{right:18px;top:24px}
  .t-mini .elementor-icon-box-wrapper{padding:20px 18px}
  .e-con.t-g2,.e-con.t-g3,.e-con.t-g4,.e-con.t-g5{gap:14px;--gap:14px}

  /* stats */
  .t-stat .elementor-counter-number-wrapper{font-size:32px!important}
  .t-stat .elementor-counter-title{font-size:13px!important}

  /* marquee */
  .t-marquee .elementor-icon-list-items{gap:32px!important}
  .t-marquee .elementor-icon-list-text{font-size:16px!important}

  /* work + game cards */
  .e-con.t-work .t-work-top{padding:22px;min-height:120px}
  .e-con.t-work .t-work-body{padding:20px 20px 22px}
  .e-con.t-game{padding:20px}
  .e-con.t-compare{padding:24px 20px}

  /* FAQ */
  .t-faq .elementor-accordion .elementor-tab-title{font-size:16px!important;padding:18px 0!important;gap:14px}
  .t-faq .elementor-accordion .elementor-tab-content{font-size:15.5px}

  /* CTA panel */
  .e-con.t-cta{padding:36px 20px;border-radius:22px}
  .e-con.t-cta::after{display:none}

  /* contact: 16px inputs stop iPhone zoom-on-focus */
  .e-con.t-contact-card{padding:24px 18px}
  .t-form input,.t-form select,.t-form textarea{font-size:16px}
  .t-contact-list .elementor-icon-list-icon{flex-basis:40px;height:40px}
  .t-contact-list .elementor-icon-list-text{font-size:15.5px}

  /* blog + generic pages */
  .t-pagehead{padding:52px 0 44px}
  .t-pagehead .lede{font-size:16.5px}
  .t-pagehead .t-cats{gap:6px}
  .t-pagehead .t-cats a{padding:7px 11px;font-size:12px}
  .t-article{padding:28px 0 56px}
  .t-article .t-wrap{gap:28px}
  .t-prose{padding:22px 18px;border-radius:16px;font-size:16.5px;line-height:1.75}
  .t-prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .t-prose pre{overflow-x:auto}
  .t-side{position:static}
  .t-post .body{padding:18px 18px 20px}
  .t-post h2,.t-post h3{font-size:17.5px}

  /* footer */
  .t-footer{font-size:14.5px}
  .t-footer .f-top{gap:30px 20px;padding:56px 0 40px}
  .t-footer .f-about,.t-footer .f-contact-col{grid-column:1/-1}
  .t-footer .f-bottom{flex-direction:column;align-items:flex-start;padding-bottom:90px}
  .t-footer .f-bottom nav{gap:12px 18px}
  .t-footer ul{gap:12px}

  /* WhatsApp button: smaller, out of the way */
  .t-wa{width:52px;height:52px;right:14px;bottom:14px}
  .t-wa svg{width:27px;height:27px}
}

/* ---------- Small phones (<=400px) ------------------------------------- */
@media(max-width:400px){
  .t-brand .word{font-size:12.5px}
  .t-hcta .t-btnx.primary{padding:10px}
  .t-burger{width:40px;height:40px}
  .t-h1 .elementor-heading-title{font-size:27px!important}
  .t-footer .f-top{grid-template-columns:1fr}
  .e-con.t-statrow{gap:24px 14px!important}
  .t-stat .elementor-counter-number-wrapper{font-size:28px!important}
}