/* ========== Reset & Base ========== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Cairo',sans-serif;
}
body{
  color:#111;
  background:#fff;
  direction:rtl;
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding-inline:40px; /* محاذاة يمين/يسار موحدة */
}

/* ========== Header ========== */
.header{
  position:fixed;
  top:0;
  width:100%;
  background:transparent;
  z-index:1000;
  transition:background-color .3s ease;
}
.header.scrolled{ background-color:#003b2f; }

.header-flex{
  display:flex;
  align-items:center;
  justify-content:start;     /* قربنا القوائم للّوجو */
  gap:40px;                   /* مسافة معقولة بين الشعار والقوائم */
  padding:25px 0;
}
.logo{ flex:0 0 auto; }
.logo img{ height:120px; }

.nav{
  display:flex;
  justify-content:right;
  text-align:right;
  gap:15px;
  margin:0;
}
.nav a,
.lang-link{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:18px;
  transition:background-color .3s ease,color .3s ease;
}
.nav a:hover,
.nav a:focus,
.nav a:active{
  background:#cce5d8;
  color:#003b2f;
  border-radius:4px;
  padding:5px 10px;
}

/* ========== Hero (خلفية أعلى الصفحة) ========== */
.hero{
  height:95vh;
  background-image:url('../img/background.jpg'); /* الرئيسية */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* ======= Hero Text Box (موحّد لكل الصفحات) ======= */
.hero-content{
  position:relative;
  max-width:640px;               /* عرض مريح للقراءة */
  margin:0px 190px 120px auto;      /* يمين (RTL) + نزول بسيط */
  padding:18px 22px;
  color:#fff;

  /* خلفية شفافة بدرجة قريبة جداً من سايت */
 
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.hero-content h1{
  margin:0 0 8px;
  font-size:42px;
  line-height:1.2;
  color:#a2ffde;                 /* لمعة خفيفة للعنوان */
  letter-spacing:.5px;
}
.hero-content p{
  margin:0 0 14px;
  font-size:17px;
  line-height:1.8;
  color:#f1f5f4;
}
.hero-content .btn{
  background:#003b2f;
  color:#fff;
  padding:10px 20px;
  text-decoration:none;
  border-radius:6px;
  font-weight:700;
  display:inline-block;
  margin-top:6px;
}

/* ========== Services (خدماتنا في الصفحة الرئيسية) ========== */
.services{
  padding:100px 0 80px;
  text-align:right;
  margin-top:80px;
}
.services h2{
  font-size:28px;
  margin-bottom:20px;
}
.tabs{ display:flex; margin-bottom:20px; }
.tab{
  flex:1;
  padding:15px;
  background:#e8efe5;
  text-align:center;
  cursor:pointer;
}
.tab.active{
  background:#cce5d8;
  border-bottom:3px solid #003b2f;
}
.tab-content .content{ display:none; }
.tab-content .content.active{ display:block; }
.tab-btn-wrapper{ margin-top:30px; }

/* صندوق محتوى التبويب */
.service-box{
  background:#e8efe5;
  padding:30px 20px;
  border-radius:8px;
  transition:all .3s ease;
}

/* ========== Certificates (سير شعارات الاعتماد) ========== */
.certificates{
  padding:100px 0 80px;
  text-align:center;
  margin-top:80px;
}
.certificates h2{
  font-size:28px;
  margin-bottom:30px;
}
.slider-wrapper{
  overflow:hidden;
  width:100%;
  direction:ltr;
}
.slides{
  display:flex;
  animation:scroll 20s linear infinite;
  width:max-content;
}
.slides img{
  height:120px;
  margin:0 20px;
  flex-shrink:0;
  object-fit:contain;
}
@keyframes scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ========== Contact (تواصل معنا) ========== */
.contact{
  background:#e8efe5;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* الشريط/المثلث الأخضر العلوي */
.contact::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width: 42vw;           /* تقدير، كبّر/صغّر حسب حاجتك */
  height: 140px;         /* ارتفاع الشريط */
  background:#003b2f;
  clip-path: polygon(100% 0, 0 0, 85% 100%); /* يعطي طرف مائل */
}

/* صف داخلي: عنوان يمين + نص وزر يسار */
.contact-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

/* العنوان الكبير يمين */
.contact-title{
  font-size: 48px;
  margin: 0;
  margin-top: 15px;
  color:#0c2f27;
  flex: 0 0 auto;
}

/* النص والزر */
.contact-info{
  text-align: right;
  max-width: 720px;
}

.contact-info .lead{
  font-size: 22px;
  margin: 0 0 20px;
  color:#0c2f27;
}

.contact .btn{
  background:#003b2f;
  color:#fff;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration:none;
  font-weight:700;
  display:inline-block;
}

.working-hours {
  font-size: 20px; 
  color: #fff;  
}


/* تجاوب */
@media (max-width: 900px){
  .contact-row{
    flex-direction: column;
    align-items: flex-start; /* يظل يمين مع RTL */
    gap:20px;
  }
  .contact-title{ font-size: 36px; }
  .contact-info .lead{ font-size: 18px; }
  .contact::after{ width:65vw; height:110px; }
}

/* ========== Footer ========== */
footer{
  background:#003b2f;
  color:#fff;
  padding:40px 0;
}
.rights{ text-align:center; font-weight: bold; }

/* ========== Services Page (service.html) ========== */
/* هيرو الخدمات (خلفية مختلفة) */
.services-hero{
  height:95vh;
  background-image:url('../img/picfoeser.jpg'); /* غيري الصورة إذا تبين */
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}
/* نستخدم نفس .hero-content فوق، يكفي وجوده */

/* كروت الخدمات */
.services-page{ padding:80px 0; }
.cards-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}
.card{
  background:#fff;
  border-radius:8px;
  padding:20px;
  text-align:right;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
}
.card-head img.mini-logo{ width:30px; height:auto; }
.card h3{ font-size:20px; color:#003b2f; }
.card p{ font-size:16px; margin-bottom:20px; color:#555; }
.btn-ghost{
  background:transparent;
  border:2px solid #003b2f;
  color:#003b2f;
  padding:8px 15px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  text-align:center;
  transition:background-color .3s ease,color .3s ease;
}
.btn-ghost:hover{ background:#003b2f; color:#fff; }

/* ========== About Page (about.html) ========== */
/* هيرو من نحن (خلفية مختلفة) */
.about-hero{
  height:95vh;
  background-image:url('../img/pic.jpg');
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.section{ padding:80px 0; }
.section-title{
  font-size:28px;
  margin-bottom:25px;
  text-align:right;
  color:#003b2f;
}

/* نبذة */
.about-intro p{
  font-size:18px;
  line-height:1.9;
  text-align:right;
  color:#222;
}

/* رؤيتنا / رسالتنا (كروت) */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.card.vr{
  background:#e8efe5;
  border-radius:10px;
  padding:24px;
}
.card.vr h2{
  color:#003b2f;
  font-size:24px;
  margin-bottom:10px;
}
.card.vr p{ font-size:18px; margin:0; }

/* قيمنا */
.values{ background:#f3f6f4; }
.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.value{
  background:#fff;
  border:1px solid #e3ece7;
  border-radius:10px;
  padding:20px;
  text-align:right;
}
.value h3{
  margin-bottom:8px;
  color:#0c2f27;
  font-size:20px;
}
.value p{ margin:0; color:#333; }

/* كروت (رؤيتنا/رسالتنا/أهدافنا) بنمط موحّد */
.vision-mission-goals{ padding:50px 0; background:#f9f9f9; }
.cards-container{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}
.card-box{
  background:#eaf3ec;
  padding:20px;
  border-radius:10px;
  flex:1 1 250px;
  max-width:300px;
  text-align:center;
  box-shadow:0 2px 5px rgba(0,0,0,.1);
}
.card-box h3{
  color:#006633;
  margin-bottom:10px;
  font-size:20px;
}
.card-box p{
  color:#333;
  font-size:15px;
  line-height:1.6;
}

/* الرئيس التنفيذي */
.ceo-wrap{ align-items:center; }
.ceo-photo img{
  width:260px; height:260px; object-fit:cover;
  border-radius:50%;
  display:block; margin:0 auto;
  border:6px solid #e8efe5;
}
.ceo-quote{
  background:#e8efe5;
  border-radius:12px;
  padding:22px;
}
.ceo-quote p{
  font-size:18px;
  margin:0 0 12px;
  line-height:1.9;
}
.ceo-name{ font-weight:700; color:#0c2f27; }
.ceo-title{ color:#4b5c57; font-size:15px; }

/* دعوة للتواصل */
.cta{ background:#0c2f27; color:#fff; text-align:center; }
.cta-box h2{ font-size:28px; margin-bottom:10px; }
.cta-box p{ font-size:18px; margin-bottom:18px; }


.works-hero{
  height: 56vh;
  background-image: url('../img/picworks.jpg'); /* بدّلي الاسم للصورة اللي تبينها */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.hero-overlay{
  background: rgba(0,59,47,0.55);  /* نفس الدرجة اللي اتفقنا عليها */
  padding: 18px 22px;
  border-radius: 8px;
  margin-bottom: 70px;
  max-width: 760px;
}
.works-hero .text-box h1{
  color: #a2ffde;
  font-size: 40px;
  margin-bottom: 6px;
}
.works-hero .text-box p{
  color: #fff;
  font-size: 17px;
}

.centered-heading {
    text-align: center;
    margin-top: 5vh;    /* مسافة علوية تتناسب مع ارتفاع الشاشة */
    margin-bottom: 1.5vh; /* مسافة سفلية */
}

/* حجم الخط ديناميكي حسب عرض الشاشة */
.centered-heading h1 {
    font-size: 3.5vw;   /* حجم الخط يتناسب مع عرض الشاشة */
    color: #003b2f;
}

/* Media Queries للشاشات الصغيرة */
@media (max-width: 1024px) {
    .centered-heading h1 {
        font-size: 5vw;   /* أكبر نصوص على التابلت/شاشات أصغر */
    }
    .centered-heading {
        margin-top: 6vh;
        margin-bottom: 2vh;
    }
}

@media (max-width: 600px) {
    .centered-heading h1 {
        font-size: 7vw;   /* نصوص مناسبة للهواتف */
    }
    .centered-heading {
        margin-top: 8vh;
        margin-bottom: 3vh;
    }
}

.animate-on-scroll{ opacity:0; transform: translateY(20px); transition: .6s ease; }
.animate-on-scroll.show{ opacity:1; transform:none; }

/* ===== شبكة الأعمال ===== */
.works-page{ padding: 70px 0 100px; }
.works-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.work-card{
  background:#fff;
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
}
.work-thumb{
  width:100%;
  aspect-ratio: 16/9;
  background:#eef3f1;
  display:flex; align-items:center; justify-content:center;
}
.work-thumb img{ max-width:85%; max-height:85%; object-fit:contain; }
.work-body{ padding: 18px 18px 20px; text-align:right; }
.work-body h3{ color:#003b2f; font-size:20px; margin-bottom:8px; }
.work-body p{ color:#444; font-size:15px; line-height:1.8; margin-bottom:14px; }
.work-list{ padding-right:18px; margin: 0 0 14px; color:#444; line-height:1.8; }
.work-list li{ margin-bottom:6px; }

/* زر شفاف */
.btn-ghost{
  background:transparent;
  border:2px solid #003b2f;
  color:#003b2f;
  padding:8px 16px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  display:inline-block;
  transition:.25s;
}
.btn-ghost:hover{ background:#003b2f; color:#fff; }

/* استجابة */
@media (max-width: 900px){
  .works-grid{ grid-template-columns: 1fr; }
  .works-hero{ height: 46vh; }
  .hero-overlay{ margin-bottom: 48px; max-width:100%; }
  .centered-heading h1{ font-size: 28px; }
}

/*الاعمال السابقه*/

/* aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
.work-hero{
background-image:url('../img/working.jpg');

}
.centered-heading {
  text-align: center;       /* ✅ يجعل النص بالمنتصف */
  margin-top: 50px;         /* مسافة من الأعلى (اختياري) */
}

.centered-heading h1 {
  font-size: 64px;          
  color: #36836f;             
  font-family: 'Cairo', sans-serif;
}



/* قبل الظهور */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.8s ease-out;
}

/* بعد ظهور العنصر */
.animate-on-scroll.show {
  opacity: 1;
  transform: translateY(0);
}
/* aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
.cards-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px); /* gap عمودي وأفقي ديناميكي */
}

.report-card {
  height: clamp(380px, 50vh, 580px);     /* ارتفاع ديناميكي */
  width: clamp(320px, 45vw, 520px);      /* عرض ديناميكي */
  border-radius: clamp(12px, 2vw, 20px);
  overflow: hidden;
  background-color: #fff;
  color: #36836f;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(10px, 2vh, 20px);
  box-shadow: 0 0 clamp(10px, 1vw, 12px) #49baa64d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.report-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 clamp(20px, 3vw, 40px) #42b39ecc;
}

.card-img {
  width: clamp(300px, 60%, 300px);   /* عرض ديناميكي */
  height: clamp(100px, 33vh, 200px); /* ارتفاع ديناميكي */
  object-fit: cover;
  border-radius: clamp(8px, 1.5vw, 12px);
  transition: opacity 0.4s ease;
  margin-bottom: clamp(10px, 2vh, 20px);
}

.report-card:hover .card-img {
  opacity: 0.15;
}

.report-card h3 {
  font-size: clamp(20px, 4vw, 34px);
  color: #36836f;
  margin: 0;
  padding: 0;
  text-align: center;
}

.tag {
  display: inline-block;
  border-radius: clamp(12px, 2vw, 20px);
  font-size: clamp(14px, 2vw, 20px);
  margin-top: clamp(5px, 1vh, 0px);
  color: rgb(0, 0, 0);
  text-align: center;
  font-weight: 500;
}



/* aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
/* جزئية التواصل */
.image-container {
  position: relative;
  width: 100%;
  height: clamp(800px, 120vh, 1000px);   /* ارتفاع ديناميكي حسب حجم الشاشة */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-direction: column;
  gap: clamp(20px, 2vw, 40px);          /* مسافة ديناميكية بين العناصر */
}

.background-image {
  width: 100%;
  height: clamp(120%, 120vh, 150%);      /* ارتفاع ديناميكي مع الحفاظ على تغطية الخلفية */
  object-fit: cover;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}


.overlay-content {
  position: relative;
  z-index: 2;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 2vw, 40px);   /* المسافة بين العناصر تتكيف مع عرض الشاشة */
  flex-wrap: wrap;
  margin-top: clamp(10px, 2vh, 30px); /* المسافة من الأعلى تتناسب مع ارتفاع الشاشة */
}


.contact-box {
  background-color: rgba(255, 255, 255, 0.9);
  padding: clamp(20px, 3vh, 60px) clamp(15px, 2vw, 40px);  /* padding عمودي وأفقي ديناميكي */
  border-radius: clamp(8px, 1vw, 16px);                   /* نصف قطر الزوايا ديناميكي */
  width: clamp(280px, 53%, 580px);                        /* عرض ديناميكي يتناسب مع حجم الشاشة */
  text-align: center;
  box-shadow: 0 clamp(2px, 0.3vh, 6px) clamp(6px, 1vw, 12px) rgba(0, 0, 0, 0.25); /* ظل ديناميكي */
  font-size: clamp(20px, 3vw, 35px);                      /* حجم الخط ديناميكي */
  line-height: 2;
  direction: rtl;
}


.contact-box h2 {
  display: flex;
  align-items: center;
  justify-content: center;       /* يحافظ على توسيط النص والأيقونة */
  gap: clamp(5px, 1vw, 15px);    /* المسافة بين النص والأيقونة ديناميكية */
  color: #025645;
  font-size: clamp(20px, 4vw, 35px); /* حجم النص ديناميكي حسب عرض الشاشة */
  margin-bottom: clamp(10px, 2vh, 20px); /* المسافة السفلية ديناميكية حسب ارتفاع الشاشة */
}


.contact-box a {
  color: #36836f;           
  text-decoration: none;  
  font-weight: normal;    
}

.contact-box h2 .icon {
  width: clamp(30px, 5vw, 60px);   /* عرض ديناميكي حسب حجم الشاشة */
  height: clamp(30px, 5vw, 60px);  /* ارتفاع ديناميكي مطابق للعرض */
  object-fit: contain;
  display: inline-block;
}

/* لو تريد عند التحويم تبقى بدون خط */
.contact-box a:hover,
.contact-box a:focus,
.contact-box a:active {
  text-decoration: none;
  color: rgb(4, 94, 52); /* أو لون آخر لو تحب */
  cursor: pointer;
  text-decoration: underline;
}


.map-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: clamp(300px, 90%, 1200px);        /* الحد الأقصى للعرض ديناميكي */
  height: clamp(330px, 60vh, 500px);           /* ارتفاع ديناميكي حسب ارتفاع الشاشة */
  margin-bottom: clamp(15px, 3vh, 40px);       /* المسافة السفلية ديناميكية */
  overflow: hidden;
  border-radius: clamp(8px, 1vw, 15px);        /* زوايا ديناميكية */
  box-shadow: 0 clamp(2px, 0.3vh, 4px) clamp(8px, 1vw, 15px) rgba(0,0,0,0.3); /* ظل ديناميكي */
}



.map-iframe {
  width: 100%;
  height: clamp(330px, 60vh, 500px); /* ارتفاع ديناميكي حسب حجم الشاشة */
  border: 0;
  clip-path: polygon(
    0 0,
    20vw 0,
    30vw 32.5%,
    100% 32.5%,
    100% 100%,
    0 100%
  );
  z-index: 1;
  position: relative;
}



.curved-text-bar {
  position: absolute;
  width: clamp(300px, 80%, 880px);          /* نفس نسبة العرض بالنسبة للشاشات */
  height: clamp(105px, 27vh, 200px);        /* ارتفاع ديناميكي يتناسب مع الشاشة */
  top: 0;
  
  transform: translateX(-50%);              /* يتمركز أفقياً */
  background-color: #025645;
  color: white;
  padding: clamp(10px, 2vh, 20px) clamp(20px, 4vw, 40px);  /* padding ديناميكي مع الحفاظ على النسب */
  border-bottom-left-radius: clamp(15px, 20%, 20%);       /* نفس الشكل المنحني كنسبة */
  font-size: clamp(16px, 1.7vw, 1.7em);                    /* حجم الخط ديناميكي حسب الشاشة */
  font-weight: bold;
  z-index: 5;
  box-shadow: 0 clamp(2px, 0.3vh, 4px) clamp(6px, 1vw, 10px) rgba(0, 0, 0, 0.2);
  line-height: 1.3;
  text-align: center;
  user-select: none;
  text-decoration: none;
  
  opacity: 0;
  transform: translateX(100px); /* نفس حركة hidden-on-load */
  transition: all 0.8s ease-in-out;
}






.curved-text-bar.visible {
  opacity: 1;
  transform: translateX(0);
}

.location-icon {
  width: clamp(30px, 5vw, 60px);    /* عرض ديناميكي حسب حجم الشاشة */
  height: clamp(30px, 5vw, 60px);   /* ارتفاع مطابق للعرض */
  vertical-align: middle;
  margin-left: clamp(2px, 1vw, 5px); /* مسافة ديناميكية بين العناصر */
}

.clock-icon {
  width: clamp(16px, 3vw, 33px);    /* عرض ديناميكي */
  height: clamp(16px, 3vw, 33px);   /* ارتفاع مطابق للعرض */
  vertical-align: middle;
  margin-left: clamp(4px, 2vw, 8px); /* مسافة ديناميكية بين العناصر */
}





/* الحالة الابتدائية (قبل الظهور) */
.hidden-on-load {
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.8s ease-in-out;
}

/* الحالة بعد الظهور */
.visible {
  opacity: 1;
  transform: translateX(0);
}




/* في شارة */

.centered-heading {
  text-align: center;             /* ✅ يجعل النص بالمنتصف */
  margin-top: 5vh;                /* مسافة من الأعلى تتناسب مع ارتفاع الشاشة */
}

.centered-heading h1 {
  font-size: clamp(24px, 3vw, 36px);  /* حجم ديناميكي: لا يقل عن 24px، يتوسع حسب العرض، ولا يزيد عن 36px */
  color: #111;
  font-family: 'Cairo', sans-serif;
}

.highlight {
  font-size: clamp(28px, 6vw, 64px);  /* حجم ديناميكي للنصوص المميزة */
  color: #36836f;
  font-weight: bold;
}


/* قبل الظهور */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.8s ease-out;
}

/* بعد ظهور العنصر */
.animate-on-scroll.show {
  opacity: 1;
  transform: translateY(0);
}




/* make the booton strong */


.btn {
  display: inline-block;
  padding: clamp(6px, 1.5vh, 12px) clamp(12px, 3vw, 24px);  /* padding ديناميكي عمودي وأفقي */
  background-color: #003b2f !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: clamp(4px, 1vw, 8px);  /* نصف قطر الزوايا ديناميكي */
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 20px);  /* حجم الخط ديناميكي */
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #025443 !important;
}



/* صفحة ملخص الدراسات */

.report-box {
  background-color: #f7f7ed;
  border-radius: clamp(8px, 1vw, 12px);
  box-shadow: 0 clamp(1px, 0.2vh, 2px) clamp(4px, 0.5vw, 8px) rgba(0,0,0,0.1);
  max-width: clamp(300px, 90%, 1420px);
  margin: auto;
  padding: clamp(10px, 2vh, 20px);
}

.report-box h2 {
  margin-bottom: clamp(15px, 2.5vh, 25px);
  color: #333;
  font-size: clamp(18px, 2.5vw, 28px);
}

.report-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(8px, 1.5vh, 15px) 0;
  border-top: 1px solid #e0e0e0;
}

.report-item:first-child {
  border-top: none;
}

.report-info {
  display: flex;
  flex-direction: column;
  font-size: clamp(14px, 1.5vw, 20px);
  color: #333;
}

.report-meta {
  font-size: clamp(10px, 1vw, 13px);
  color: #888;
}

.report-actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 15px);
  font-size: clamp(14px, 1.5vw, 20px);
  color: #0077b6;
  cursor: pointer;
}

.download-icon {
  width: clamp(16px, 2vw, 24px);
  height: clamp(16px, 2vw, 24px);
  transition: transform 0.2s ease;
}

.download-icon:hover {
  transform: scale(1.2);
}





.works-hero {
  background-image: url('../img/working.jpg');
}

.studies-hero {
  background-image: url('../img/likesite.avif');
}

.contact-hero {
  background-image: url('../img/tnenewist.jpg');
}



/* ========== Responsive ========== */
@media (max-width:1200px){
  .logo img{ height:100px; }
}
@media (max-width:992px){
  .header-flex{ gap:24px; }
  .hero-content{
    margin:0 20px 80px auto;
    max-width:520px;
  }
  .hero-content h1{ font-size:34px; }
  .cards-grid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .ceo-photo img{ width:220px; height:220px; }
}
@media (max-width:600px){
  .hero-content{
    margin:0 16px 60px auto;
    max-width:100%;
    padding:16px 18px;
  }
  .hero-content h1{ font-size:28px; }
  .hero-content p{ font-size:15px; }
  .values-grid{ grid-template-columns:1fr; }
}
/* زر القائمة (الهامبرجر) */
.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

/* للجوال والآيباد الصغير */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  
  .nav {
    display: none;
    flex-direction: column;
    gap: 10px;
    background-color: white;
    padding: 15px;
    position: absolute;
    top: 60px;
    right: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  .nav.active {
    display: flex;
  }
}
/* ======== OVERRIDES (requested) ======== */

/* كبّرنا أيقونة الهامبرجر وخَلّيناه أوضح */
.menu-toggle{
  display:block;
  font-size:34px;         /* كبّري إلى 38 أو 40 لو تبين */
  line-height:1;
  color:#ffffff;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:8px;
  background:rgba(0,0,0,.15);
  backdrop-filter: blur(4px);
}

/* قائمة الجوال/الآيباد تكون أوضح */
@media (max-width: 768px){
  .nav{
    display:none;
    position:absolute;
    top:66px;              /* تحت الهيدر على طول */
    right:10px; left:10px;
    flex-direction:column;
    gap:12px;
    background:#003b2f;
    padding:16px;
    border-radius:12px;
    box-shadow:0 12px 28px rgba(0,0,0,.22);
    z-index: 1001;
  }
  .nav.active{ display:flex; }
  .nav a{
    color:#fff;
    padding:10px 12px;
    border-radius:8px;
  }
  .nav a:hover{ background:rgba(255,255,255,.12); }
}

/* خلي الهيدر داكن شوي على الشاشات الصغيرة عشان اللوجو/البرقر واضح */
@media (max-width: 768px){
  .header{
    background: rgba(0,59,47,.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* حل تغطية المثلث لقسم تواصل معنا */
.contact{ position: relative; }
.contact::after{
  z-index: 0;    /* المثلث تحت */
}
.contact-row{
  position: relative;
  z-index: 1;    /* المحتوى فوق */
}

/* مساحة بسيطة أعلى المحتوى على الشاشات الصغيرة */
@media (max-width: 900px){
  .contact-row{ padding-top: 16px; }
}

/* تحسين تباين نص روابط الهيدر فوق الصور */
.header .nav a{
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* ====== OVERRIDES (Burger visible only on mobile + Contact mobile layout) ====== */

/* 1) الهامبرجر يظهر فقط على الموبايل/الآيباد ويختفي على الكمبيوتر */
@media (min-width: 993px){
  .menu-toggle{ display: none !important; }
  .nav{ display: flex !important; }  /* تأكيد ظهور القوائم على الكمبيوتر */
}
@media (max-width: 992px){
  .menu-toggle{
    display: block;
    font-size: 36px;         /* كبّري إلى 40px لو تبين */
    line-height: 1;
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.25);
  }
  /* القائمة الجانبية بالجوال */
  .nav{
    display: none;
    position: absolute;
    top: 70px; right: 12px; left: 12px;
    flex-direction: column;
    gap: 10px;
    background: #003b2f;
    padding: 14px;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    z-index: 1100;
  }
  .nav.active{ display: flex; }
  .nav a{ color: #fff; padding: 10px 12px; border-radius: 6px; }
  .nav a:hover{ background: rgba(255,255,255,.12); }
  /* الهيدر داكن شوي عشان الزر واضح فوق الصورة */
  .header{
    background: rgba(0,59,47,.75);
    backdrop-filter: blur(6px);
  }
}