/* =====================================================
   Marketec Agency — Responsive Rules
   ===================================================== */

/* ============ Hero — Tablet 768–1199px ============
   فيديوهان فقط (أعلى-يسار وأعلى-يمين)، نسبة 9:16 ثابتة عبر clamp()،
   بدون أي مزج بين vw وvh، وبدون أي تقاطع مع منطقة النص المحمية. */
@media (max-width: 1199px){
  .hero{ padding-block:50px; }
  .hero__mast-word{ font-size:18vw; }

  .hero__frame--bl,
  .hero__frame--br{ display:none; }

  .hero__frame--tl{
    width:clamp(120px, 14vw, 150px);
    top:12%;
    inset-inline-start:6%;
  }
  .hero__frame--tr{
    width:clamp(120px, 14vw, 150px);
    top:12%;
    inset-inline-end:6%;
  }

  .hero__content,
  .hero__title{ max-width:min(480px, 52vw); }
  .hero__title{ font-size:clamp(2.2rem, 4.2vw, 2.9rem); }
}

/* ============ Hero + Process — Mobile ≤767px ============ */

@media (max-width: 767px){

  /* ===== Hero ===== */

  .hero{
    min-height:auto;
    flex-direction:column;
    padding-top:120px;
    padding-bottom:56px;
  }

  .hero__mast-word{
    font-size:22vw;
  }

  .hero__inner{
    order:1;
  }

  .hero__content{
    max-width:100%;
    margin-top:0;
  }

  .hero__title{
    font-size:clamp(1.9rem, 8vw, 2.3rem);
    max-width:100%;
  }

  .hero__desc{
    max-width:340px;
  }

  .hero__frames{
    position:static;
    order:2;
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:12px;
    width:100%;
    max-width:340px;
    margin:32px auto 0;
    inset:auto;
  }

  .hero__frame{
    position:static;
    flex:1 1 0;
    width:auto;
    max-width:150px;
  }

  .hero__frame--bl,
  .hero__frame--br{
    display:none;
  }

  .hero__actions{
    flex-direction:column;
    align-items:center;
    gap:16px;
  }

  .hero .btn{
    width:100%;
    max-width:280px;
  }

  /* ===== Process ===== */

  .process__timeline{
    grid-template-columns:1fr;
    gap:32px;
  }

  .process__step{
    width:100%;
    max-width:380px;
    margin-inline:auto;
    text-align:center;
  }

  .process__timeline::before{
    display:none;
  }

}
/* ---------- Tablets (≤1100px) ---------- */

@media (max-width: 1100px){

  /* ===== Services ===== */

  .services__grid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }

  .service-card,
  .service-card--wide{
    min-height:220px;
    padding:30px 24px 26px;
  }

  .service-card--wide{
    grid-column:auto;
  }

  .service-card > svg,
  .service-card--wide > svg,
  .service-card > [data-lucide],
  .service-card--wide > [data-lucide]{
    width:48px;
    height:48px;
    padding:13px;
    top:22px;
    inset-inline-start:22px;
  }

  .service-card__num,
  .service-card--wide .service-card__num{
    font-size:2rem;
    top:23px;
    inset-inline-end:22px;
  }

  .service-card h3,
  .service-card--wide h3{
    font-size:1rem;
  }

  .service-card p,
  .service-card--wide p{
    font-size:.84rem;
  }


  /* ===== باقي الكود ===== */

  .portfolio__grid{
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:28px 22px;
}

.portfolio-card{
  min-width:0;
}

.portfolio-card__body{
  padding:18px 16px 20px;
}

.portfolio-card h3{
  font-size:1rem;
  line-height:1.45;
}

.portfolio-card p{
  font-size:.84rem;
  line-height:1.7;
}

.portfolio-card .btn,
.portfolio-card__link{
  margin-top:16px;
}
  .why-us__list{
    grid-template-columns:repeat(2,1fr);
  }

  .process__timeline{
  grid-template-columns:repeat(2,1fr);
  gap:42px 28px;
}

.process__timeline::before{
  display:none;
}
  .about__inner,
  .contact__inner{
    grid-template-columns:1fr;
    gap:48px;
  }

  .about__text,
  .about__cards{
    max-width:680px;
    margin-inline:auto;
    width:100%;
  }

  .about__text{
    text-align:start;
  }
}

/* ---------- Small tablets / large phones (≤860px) ---------- */
@media (max-width: 860px){
  .container{ padding:0 22px; }

  .nav-links{
    position:fixed; top:0; inset-inline-end:0; height:100vh; width:min(320px,80vw);
    background:var(--color-ivory);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:26px; padding:32px;
    transform:translateX(100%); transition:transform .4s var(--ease);
    box-shadow:-20px 0 60px rgba(28,23,20,.15); z-index:600;
  }
  html[dir="rtl"] .nav-links{ transform:translateX(-100%); }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links .nav-link{ font-size:1.1rem; }

  .nav-cta{ display:none; }
  .menu-toggle{ display:flex; }

  .stats{ grid-template-columns:repeat(2,1fr); }
  .why-us__list{ grid-template-columns:1fr; }
  .process__timeline{ grid-template-columns:repeat(2,1fr); }

  .custom-cursor{ display:none; }
}

/* ---------- Phones (≤640px) ---------- */
@media (max-width: 640px){
  /* ===== About mobile ===== */

  
  .about__inner{
    gap:44px;
  }

  .about__text h2{
    font-size:2rem;
  }

  .about__card{
    grid-template-columns:58px 1fr;
    column-gap:16px;
    padding:24px 0;
  }

  .about__card-num{
    font-size:2rem;
  }

  .about__card h3{
    font-size:1rem;
  }

  .about__card p{
    font-size:.85rem;
  }
/* ===== Footer mobile ===== */

.footer__inner{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:24px;
  width:100%;
}

.footer__brand{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center !important;
  justify-content:center;
  text-align:center !important;
  margin:0 auto;
}

.footer__brand .brand__en,
.footer__brand .brand__ar,
.footer__brand p{
  display:block;
  width:100%;
  max-width:100%;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.footer__brand p{
  max-width:320px;
  margin-inline:auto;
  text-align:center;
}

.footer__links{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 20px;
  text-align:center;
}

.footer__social{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}

.footer__bottom{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
}

.footer__bottom p,
.footer__tagline{
  width:100%;
  margin:0 auto;
  text-align:center;
}

.footer__bottom p,
.footer__tagline{
  width:100%;
  margin-inline:auto;
  text-align:center;
}
  /* ===== باقي Responsive الموجود عندك ===== */
  .services__grid{ grid-template-columns:1fr; }
  .service-card--wide{ grid-column:span 1; }
  .portfolio__grid{ grid-template-columns:1fr; }
  .process__timeline{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }

  .about, .services, .portfolio, .why-us, .process, .cta, .contact{ padding-block:90px; }

  .cta__actions{ flex-direction:column; align-items:stretch; }
  .cta__actions .btn{ justify-content:center; }

  .footer__inner{ flex-direction:column; align-items:flex-start; text-align:start; }

  .contact__form{ padding:26px; }

  .floating-whatsapp{ width:52px; height:52px; font-size:1.4rem; }
  .floating-whatsapp-wrap{ bottom:20px; inset-inline-start:20px; }
  .floating-whatsapp__tooltip{ display:none; }
  .back-to-top{ width:44px; height:44px; bottom:20px; inset-inline-end:20px; }

  .video-modal__box{ border-radius:16px; }
}

/* ---------- Extra-small phones (≤380px) ---------- */
@media (max-width: 380px){
  .stats{ grid-template-columns:1fr; }
  .hero__mast-word{ font-size:19vw; }
  .hero__title{ font-size:1.7rem; }
}