:root{
  --navy:#0B3665;
  --navy-deep:#082747;
  --navy-ink:#06203C;
  --teal:#17B2A2;
  --teal-soft:#5fd3c4;
  --gray:#6A7177;
  --white:#FFFFFF;
  --paper:#FAFAF7;
  --line:#DCE2E4;
  --line-dark:rgba(255,255,255,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Tajawal',sans-serif !important;
  color:var(--navy);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.en{font-family:'Poppins',sans-serif;direction:ltr;unicode-bidi:isolate;}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
section{position:relative;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px;
}

h1,h2,h3,h4{margin:0;color:var(--navy);}
.sec-title{font-size:clamp(28px,3.2vw,40px); font-weight:800; line-height:1.3; max-width:640px;}
.sec-text{color:var(--gray); font-size:18px; line-height:1.95; max-width:620px; margin-top:16px;}
.sec-head{margin-bottom:56px; padding-bottom:36px; border-bottom:1px solid var(--line);}
.sec-head.light{border-bottom-color:var(--line-dark);}
.sec-head.light h2{font-size: clamp(28px, 3.2vw, 40px);  color: var(--white)!important;}
.sec-head.light .sec-text{color:rgba(255,255,255,.68); text-align:justify;}
.sec-head.center{text-align:center;}
.sec-head.center .sec-title, .sec-head.center .sec-text{margin-inline:auto;}
.sec-head-split{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.sec-head-split .sec-title{margin-bottom:0;}
.view-all-link{
  display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:var(--navy);
  padding-bottom:4px; border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.view-all-link svg{width:16px; height:16px; stroke:currentColor; transition:transform .25s var(--ease);}
.view-all-link:hover{color:var(--teal); border-color:var(--teal);}
.view-all-link:hover svg{transform:translateX(-4px);}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px;
  border-radius:2px; font-weight:700; font-size:16.5px;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn-teal{background:var(--teal); color:var(--white);}
.btn-teal:hover{background:var(--teal-soft);}
.btn-line{border:1px solid rgba(255,255,255,.4); color:var(--white);}
.btn-line:hover{border-color:var(--teal-soft); color:var(--teal-soft);}
.btn-primary{background:var(--navy); color:var(--white);}
.btn-primary:hover{background:var(--teal);}
.btn-block{width:100%; justify-content:center;}

/* ================= HERO — full media ================= */
.hero{
  position:relative; background:var(--navy-ink); overflow:hidden;
  height:100vh; min-height:640px; display:flex; align-items:flex-end;
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media-img, .hero-media-video{width:100%; height:100%; object-fit:cover;}
.hero-media-video.is-mobile{display:none;}
.hero-media-youtube{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; pointer-events:none;
  transform:scale(1.35);
}
@media (max-width:768px){
  .hero-media-video.is-desktop{display:none;}
  .hero-media-video.is-mobile{display:block;}
}
.hero-media-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,32,60,.88) 0%, rgba(6,32,60,.35) 45%, rgba(6,32,60,.15) 100%);
}
.hero-box-wrap{position:relative; z-index:2; width:100%; padding-bottom:64px;}
.hero-box{
  margin-inline-end:auto; max-width:460px;
  background:rgba(6,32,60,.55); backdrop-filter:blur(10px);
  border:1px solid var(--line-dark); padding:36px 34px;
}
.hero-box h1{color:var(--white); font-size:clamp(22px,2.4vw,28px); font-weight:800; line-height:1.5;}
.hero-box p{color:rgba(255,255,255,.72); font-size:16px; line-height:1.85; margin:16px 0 26px;}

/* ================= STATS BAND ================= */
.stats-band{padding:60px 0; background:var(--navy); text-align:center;}
.stats-heading{color:var(--white); font-size: clamp(28px, 3.2vw, 40px);font-weight: 800;line-height: 1.3;margin:0 0 34px;}
.stats-grid{display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line-dark);}
.stat-item{padding:24px 18px 0; border-inline-start:1px solid var(--line-dark);}
.stat-item:first-child{border-inline-start:none;}
.stat-item b{
  display:block; font-family:'Poppins',sans-serif; font-weight:600;
  font-size:clamp(26.5px,2.4vw,34.5px); color:var(--teal-soft);
}
.stat-item span{display:block; margin-top:10px; font-size:13.5px; color:rgba(255,255,255,.6); line-height:1.7; font-weight: 700;}

/* ================= CHAIRMAN MESSAGE ================= */
.chairman{padding:120px 0; background:var(--paper); border-top:1px solid var(--line);}
.chairman-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:64px; align-items:start;}
.chairman-content{order:1;}
.chairman-content .sec-head{margin-bottom:34px; padding-bottom:0; border-bottom:none;}
.chairman-text p{color:var(--gray); font-size:17.5px; line-height:2; margin:0 0 22px; text-align:justify;}
.chairman-text p:last-child{margin-bottom:0;}
.chairman-signoff{color:var(--navy) !important; font-weight:700; margin-top:6px !important;}

.chairman-profile{
  order:2; position:sticky; top:110px;
}
.chairman-photo{
  width:100%; aspect-ratio:3/4; overflow:hidden; background:var(--navy-ink);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:16px 16px;
}

.chairman-photo img{width:100%; height:100%; object-fit:cover;}
.chairman-card{
  background:var(--white); border:1px solid var(--line); padding:24px 28px;
   margin-top: 15px;
}
.chairman-name{color:var(--navy); font-size:21px; font-weight:800; margin:0 0 8px;}
.chairman-role{color:var(--gray); font-size:15px; line-height:1.8; margin:0;}

@media (max-width:960px){
  .chairman-grid{grid-template-columns:1fr; gap:40px;}
  .chairman-content{order:2;}
  .chairman-profile{order:1; position:static; max-width:420px; margin:0 auto;}
}
@media (max-width:640px){
  .chairman{padding:80px 0;}
}

/* ================= SECTORS — editorial grid, brand-consistent ================= */
.sectors{padding:120px 0; background:var(--white); position:relative; overflow:hidden;}
.sectors::before{
  content:""; position:absolute; inset-inline-end:-140px; top:20px; width:420px; height:420px;
  background-image:radial-gradient(var(--line) 1.5px, transparent 1.5px);
  background-size:22px 22px; opacity:.6; pointer-events:none; z-index:0;
}
.sector-row{position:relative; z-index:1;}
.sector-track{
  display:flex; gap:15px;
  /* scroll-behavior:auto عمدًا (لا smooth) — الحركة السلسة هنا يتحكم فيها
     السكربت يدويًا عبر requestAnimationFrame (smoothScrollBy). لو بقي
     scroll-behavior:smooth هنا، بعض المتصفحات (خصوصًا Chrome) بتحاول
     تطبّق smoothing خاص بيها على كل تحديث لـ scrollLeft بيعمله السكربت
     على كل فريم، فتتعارض الحركتان مع بعض وتتحول النتيجة من انزلاق سلس
     لقفزات متقطّعة (تبان كأنها تقلب "صفحة" كاملة من البطاقات دفعة واحدة). */
  overflow-x:auto; overflow-y:visible; scroll-behavior:auto; scroll-snap-type:x proximity; padding: 10px 0;
}
.sector-track::-webkit-scrollbar{display:none;}
.sector-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--white); padding:40px 34px 0;  min-width:260px; overflow:hidden;
  scroll-snap-align:start; flex:0 0 calc((100% - 30px) / 3); /* 3 بطاقات + فجوتين 15px = 100% بالضبط */
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); border:1px solid var(--line);
  box-shadow:0 34px 60px -32px rgba(6,32,60,.35);
}
.sector-card::before{
  content:""; position:absolute; inset-inline-start:0; top:0; inset-inline-end:0; height:3px;
  background:var(--teal); transform:scaleX(0); transition:transform .45s var(--ease);
}
.sector-card::before{
  content:""; position:absolute; inset-inline-start:0; bottom:0; inset-inline-end:0; height:3px;
  background:var(--teal); transform:scaleY(0); transition:transform .55s var(--ease);
}
.sector-card:hover{transform:translateY(-8px); z-index:2;}
.sector-card:hover::before{transform:scaleX(1);}
.sector-card:hover::after{transform:scaleY(1);}
.sector-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px;}
.sector-index{
  font-family:'Poppins',sans-serif; font-size:14px; font-weight:600; color:var(--line);
  letter-spacing:.03em; transition:color .35s var(--ease);
}
.sector-card:hover .sector-index{color:var(--teal);}
.sector-logo{
  height:100px; width:100%; display:flex; align-items:center; justify-content:center; margin-bottom:24px;
}
.sector-logo img{
  max-height:100%; max-width:72%; object-fit:contain;
  
}
.sector-card:hover .sector-logo img{filter:grayscale(0) opacity(1);}
.sector-logo.placeholder{
  width:100%; height:72px; border:1px dashed var(--line); align-items:center; justify-content:center;
  color:var(--gray); font-family:'Tajawal',sans-serif; font-size:13px; gap:6px;
}
.sector-logo.placeholder svg{width:20px; height:20px; stroke:var(--gray); fill:none;}
.sector-body{flex:1; text-align:center;}
.sector-card .s-company{font-size:21px; font-weight:800; line-height:1.5; margin-bottom:12px;}
.sector-card .s-sector{
  display:inline-block; color:var(--teal); font-size:13.5px; font-weight:700;
  background:rgba(23,178,162,.08); padding:6px 16px; border-radius:2px;
  width: 100%; text-align: center;
}
.sector-more-row{
  margin-top:30px; padding:20px 0; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--navy); font-weight:700; font-size:16px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.sector-more-row svg{width:16px; height:16px; stroke:currentColor; transition:transform .35s var(--ease);}
.sector-card:hover .sector-more-row{color:var(--teal); border-color:var(--teal);}
.sector-card:hover .sector-more-row svg{transform:translateX(-5px);}
main[data-culture="en"] .sector-card:hover .sector-more-row svg{transform:translateX(5px);}
.sector-arrows{display:flex; align-items:center; gap:10px; padding-top:28px;}
.sector-progress{flex:1; height:2px; background:var(--line); position:relative; overflow:hidden;}
.sector-progress-bar{
  position:absolute; top:0; inset-inline-start:0; height:100%; width:25%; background:var(--teal);
  transition:width .3s var(--ease), inset-inline-start .3s var(--ease);
}
.sector-nav{display:flex; gap:10px; flex:0 0 auto;}


/* ================= CLIENTS ================= */
.clients{padding:110px 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.client-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.client-card{background:var(--paper); padding:36px 30px; transition:background .3s var(--ease);}
.client-card:hover{background:var(--white);}
.client-card .icn{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.client-card .icn svg{width:100%; height:100%; fill:none; stroke:var(--teal); stroke-linecap:round; stroke-linejoin:round;}
.client-card h4{font-size:19px; font-weight:700; margin-bottom:10px; line-height:1.5;}
.client-card p{color:var(--gray); font-size:15.5px; line-height:1.85; margin:0; text-align:justify;}

/* ================= COOP — one-by-one slider ================= */
.coop{padding:110px 0 100px; background:var(--navy-ink);}
.coop .sec-title{color:var(--white);}
.coop-slider{position:relative;margin:0 auto;}
.coop-track{position:relative; min-height:320px;}
.coop-slide{
  position:absolute; inset:0; display:flex; align-items:stretch;
  border:1px solid var(--line-dark); background:rgba(255,255,255,.03);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.coop-slide.active{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s;
}
.coop-content{
  flex:1 1 50%; padding:44px 46px; display:flex; flex-direction:column; justify-content:center; text-align:right;
}
.coop-media{
  flex:0 0 42%;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:18px 18px; background-color:rgba(255,255,255,.02);
  border-inline-start:1px solid var(--line-dark);
}
.coop-media img{width:100%; height:100%; object-fit:cover;}
.coop-icon{
  width:54px; height:54px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  background:rgba(255,255,255,.06); border:1px solid var(--line-dark);
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.coop-icon svg{width:24px; height:24px; fill:none; stroke:var(--teal-soft); stroke-linecap:round; stroke-linejoin:round;}
.coop-slide.active .coop-icon{opacity:1; transform:translateY(0); background:var(--teal); border-color:var(--teal);}
.coop-slide.active .coop-icon svg{stroke:var(--white);}
.coop-slide h4{
  color:var(--white); font-size:23.5px; font-weight:700; margin:18px 0 14px; line-height:1.5;
  opacity:0; transform:translateY(8px); transition:all .5s var(--ease) .15s;
}
.coop-slide p{
  color:rgba(255,255,255,.6); font-size:16.5px; line-height:1.9; margin:0; max-width:420px;
  opacity:0; transform:translateY(8px); transition:all .5s var(--ease) .3s; text-align:justify;
}
.coop-slide.active h4, .coop-slide.active p{opacity:1; transform:translateY(0);}
.coop-dots{display:flex; justify-content:center; gap:9px; margin-top:32px;}
.coop-dot{width:8px; height:8px; border-radius:50%; background:var(--line-dark); transition:background .3s var(--ease), transform .3s var(--ease);}
.coop-dot.active{background:var(--teal); transform:scale(1.25);}
@media (max-width:760px){
  .coop-track{min-height:700px;}
  .coop-slide{flex-direction:column;}
  .coop-media{flex-basis:220px; border-inline-start:none; border-bottom:1px solid var(--line-dark); order:-1;}
  .coop-content{padding:32px 28px; text-align:right; min-height: 100px;}
}

/* ================= NEWS — cards ================= */
.news{padding:110px 0; background:var(--white);}
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.news-card{
  display:block; border:1px solid var(--line); color:inherit; cursor:pointer;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.news-card:hover{transform:translateY(-4px); box-shadow:0 24px 40px -28px rgba(6,32,60,.3);}
.news-card:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
.news-img{
  height:200px;
  width: 100%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:18px 18px; background-color:var(--paper);
  display:flex; align-items:flex-end; border-bottom:1px solid var(--line);
  position: relative;
}
.news-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} 
.news-body{padding:22px 24px 26px; position: relative;min-height: 200px;}
.news-date{
  display:block; font-family:'Poppins',sans-serif; font-size:13px; font-weight:600; color:var(--gray);
  margin-bottom:12px;
}
.news-body h4{font-size:18px; font-weight:700; line-height:1.65; margin-bottom:14px; min-height:54px;}
.news-body .read-more{color:var(--teal); font-weight:700; font-size:15.5px; position: absolute;bottom: 20px;right: 25px;}

/* ================= PROJECTS ================= */
.projects{padding:110px 0; background:var(--paper); border-top:1px solid var(--line);}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px;}
.tab{
  padding:10px 20px; border:1px solid var(--line); font-size:15.5px; font-weight:600; color:var(--gray);
  transition:all .25s var(--ease);
  background: var(--white);
}
.tab.active, .tab:hover{background:var(--navy); border-color:var(--navy); color:var(--white);}
.proj-row{position:relative;}
.proj-track{
  position:relative; min-height:0; transition:height .35s var(--ease);
  border:1px solid var(--line); background:var(--white); overflow:hidden;
}
.proj-slide{
  position:absolute; top:0; inset-inline:0; /* بدون bottom:0 — الارتفاع أصبح تلقائيًا حسب المحتوى بدل مطابقة ارتفاع proj-track بالقوة */
  display:flex; align-items:stretch;
  direction:ltr; /* locks the media to the physical left regardless of page direction */
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.proj-slide.active{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s;
}
.proj-media{
  position:relative; /* يسمح بتثبيت الصورة عبر position:absolute بالأسفل */
  flex:0 0 46%; max-width:46%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:18px 18px; background-color:var(--paper);
  border-inline-end:1px solid var(--line);
  overflow:hidden;
}
/* الصورة absolute بدل أن تكون عنصر flex عادي — بهذا الشكل لا تفرض الصورة (بنسبة
   أبعادها الطبيعية) ارتفاعًا على الصف؛ الارتفاع يصبح محكومًا فقط بمحتوى proj-content
   النصي، والصورة تتمدد/تُقصّ (object-fit:cover) لتملأ هذا الارتفاع بالضبط بدل أن
   تكبّره. هذا هو ما كان يسبب المساحة الفارغة وطول الكرت الزائد. */
.proj-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.proj-content{
  flex:1 1 auto; min-height:0; direction:rtl; /* restores normal Arabic reading direction for the text side */
  padding: 15px 30px 15px 15px; display:flex; flex-direction:column; justify-content:center;
}
.proj-content-top{
  width:100px; height:100px; margin-bottom:18px;padding: 10px; display: flex; align-items: center; justify-content: flex-end;
}
.proj-content-top img{width:100%; height:100%; object-fit:contain;}
.proj-content .cat{ font-size:12.5px !important; font-weight:600; color:var(--teal); letter-spacing:.02em;}
.proj-content h4{font-size:24.5px; font-weight:700; margin:14px 0 14px; line-height:1.5;}
.proj-content p{color:var(--gray); font-size:16.5px; line-height:1.9; margin:0; max-width:460px; text-align:justify;}
/* justify-content:flex-end بدل space-between لأن .proj-dots صارت display:none
   فلم يعد هناك عنصر على اليسار يوازنها. و flex:0 0 auto على .proj-arrows يمنع
   انكماشها أو انزياحها خارج الحاوية على الشاشات الضيقة. */
.proj-footer{display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-top:24px; direction:ltr;}
.proj-arrows{display:flex; gap:10px; flex:0 0 auto;}
/* كانت opacity:0 — أي مخفية بصريًا لكنها تحجز عرضها كاملًا. ومع توليد نقطة لكل
   مشروع في تبويب "الكل" كان مجموع عرض النقاط + الفواصل (gap لا ينكمش) يتجاوز
   عرض .wrap على الهاتف فيدفع أزرار التنقل خارج الشاشة. display:none يحرّر المساحة
   فعليًا. الـ JS يعمل معها بشكل طبيعي (innerHTML و querySelectorAll لا يتأثران). */
.proj-dots{display:none; align-items:center; gap:9px;}
.proj-dots .proj-dot{
  width:8px; height:8px; border-radius:50%; background:var(--line); padding:0;
  transition:background .3s var(--ease), transform .3s var(--ease), width .3s var(--ease);
}
.proj-dots .proj-dot.active{background:var(--navy); width:22px; border-radius:5px;}
.proj-dots .proj-dot:hover{background:var(--teal);}
.arrow-btn{
  width:44px; height:44px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition:all .25s var(--ease); background: var(--white);
}
.arrow-btn:hover{background:var(--navy); border-color:var(--navy);}
.arrow-btn svg{width:16px; height:16px; stroke:var(--navy); transition:stroke .25s;}
.arrow-btn:hover svg{stroke:var(--white);}

/* ================= WHY US ================= */
.why{padding:110px 0; border-top:1px solid var(--line);}
.why-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.why-card{
  position:relative; background:var(--white); padding:36px 30px 30px; overflow:hidden;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.why-card::before{
  content:""; position:absolute; inset-inline-start:0; top:0; width:3px; height:0; background:var(--teal);
  transition:height .35s var(--ease);
}
.why-card:hover{transform:translateY(-4px);}
.why-card:hover::before{height:100%;}
.why-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.why-icon{
  width:46px; height:46px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--navy); transition:background .3s var(--ease);
}
.why-icon svg{width:22px; height:22px; fill:none; stroke:var(--white); stroke-linecap:round; stroke-linejoin:round;}
.why-card:hover .why-icon{background:var(--teal);}
.why-num{font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:600; color:var(--line); letter-spacing:.02em;}
.why-card h4{font-size:18px; font-weight:700; margin:0 0 10px; line-height:1.5;}
.why-card p{color:var(--gray); font-size:15.5px; line-height:1.85; margin:0; text-align:justify;}
@media (max-width:1080px){
  .why-grid{grid-template-columns:repeat(2,1fr);}
}

/* ================= PARTNERS — logos ================= */
.partners{padding:90px 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.partners .sec-head{margin-bottom:44px; padding-bottom:0; border-bottom:none;}
.partner-strip{
  overflow:hidden; direction:ltr;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  padding:4px 0 16px;
}
.partner-track{
  display:flex; flex-wrap:nowrap; align-items:center; gap:16px; width:max-content;
  animation:partnerScroll 60s linear infinite;
}
.partner-track.paused{animation-play-state:paused;}
@keyframes partnerScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.partner-logo{
  flex:0 0 auto;
  width:200px; height:150px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--white); color:var(--gray);
  font-family:'Poppins',sans-serif; font-size:13px; font-weight:600; text-align:center; transition:all .3s var(--ease);
}
.partner-logo:hover{ border-color:var(--teal);}
.partner-logo img{max-width:75%; max-height:56%; width:auto; height:auto; object-fit:contain;}
@media (prefers-reduced-motion: reduce){
  .partner-track{animation:none;}
}

/* ================= CONTACT ================= */
.contact{padding:120px 0; background:var(--white);}
.contact-box{
  display:grid; grid-template-columns:1.35fr 1fr; align-items:stretch;
  max-width:1000px; margin:0 auto;
  background:var(--white); border:1px solid var(--line);
  overflow:hidden;
}
.contact-copy{padding: 35px 30px;display:flex; flex-direction:column; align-items:flex-start;}
.contact-badge{
  width:52px; height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(23,178,162,.1); margin-bottom:22px;
}
.contact-badge svg{width:24px; height:24px; stroke:var(--teal); fill:none;}
.contact-copy h2{font-size:clamp(24px,2.6vw,32px); font-weight:800; line-height:1.5; margin:0 0 18px; }
.contact-copy p{color:var(--gray); font-size:17.5px; line-height:1.95; text-align:justify;}
.contact-copy .btn{margin-top:28px;}
.contact-visual{
  position:relative; overflow:hidden; min-height:220px;
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 55%, #04162c 100%);
}
.contact-visual-pattern{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:22px 22px;
}
.contact-visual img {
  width: 100% ;
  height: 100% ;
   object-fit: cover ;
}
.contact-phone{
  display:block; margin-top:20px; font-size:22px; font-weight:700; color:var(--navy);
  border-bottom:2px solid var(--teal); padding-bottom:4px; width:fit-content;
}
.contact-form .field{margin-bottom:26px;}
.contact-form label{display:block; font-size:15px; font-weight:600; color:var(--gray); margin-bottom:10px;}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; border:none; border-bottom:1px solid var(--line); background:transparent;
  padding:10px 2px; font-family:inherit; font-size:17px; color:var(--navy);
  transition:border-color .25s var(--ease);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  border-color:var(--teal); outline:none;
}
.contact-form textarea{resize:vertical; min-height:90px;}

/* ================= Toast / back-top ================= */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy-ink); color:var(--white); padding:14px 26px; font-size:16px; font-weight:600;
  opacity:0; pointer-events:none; transition:all .35s var(--ease); z-index:200; white-space:nowrap;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.back-top{
  position:fixed; bottom:28px; inset-inline-end:28px; width:48px; height:48px; background:var(--navy);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s var(--ease); z-index:150;
}
.back-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-top svg{width:18px; height:18px; stroke:var(--white);}
.back-top:hover{background:var(--teal);}

/* ================= Responsive ================= */
@media (max-width:960px){
  .sector-card{flex-basis:calc((100% - 15px) / 2);}
  .stats-grid{grid-template-columns:repeat(3,1fr);}
  .stat-item:nth-child(4){border-inline-start:none;}
  .stat-item{padding-bottom:22px; border-bottom:1px solid var(--line-dark); margin-bottom:4px;}
  .client-grid{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:1fr;}
  .contact-box{grid-template-columns:1fr;}
  .contact-visual{min-height:150px; order:-1;}
  .contact-copy{padding:48px 32px;}
  .hero-box{margin-inline-start:0; max-width:100%;}
  .proj-slide{flex-direction:column;}
  .proj-media{flex-basis:220px; max-width:100%; border-inline-end:none; border-bottom:1px solid var(--line);}
  .proj-content{padding:32px 28px;}
}
@media (max-width:640px){
  .sector-card{flex-basis:88%;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat-item:nth-child(3){border-inline-start:none;}
  .client-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .sec-head{margin-bottom:40px; padding-bottom:26px;}
  .sec-head-split{align-items:flex-start;}
  .sec-head-split .view-all-link{margin-top:4px;}
  .hero{padding-top:110px; padding-bottom:0;}
  .hero-box-wrap{padding-bottom:40px;}
  .contact-box{margin:0 6px;}
  .partner-logo{width:150px; height:100px; }
  .contact-visual {
    display: none;
  }
}