/* ==========================================================================
   ALFABETA GROUP — Company Profile Stylesheet (Executive Corporate Slide Booklet)
   Square Booklet Slide Format (Screen & Direct Print PDF Export)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&family=Poppins:wght@300;400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  --cyan-primary: #00a5e5;
  --cyan-dark: #0084ba;
  --slate-blue: #385a6c;
  --slate-dark: #1e2e38;
  --text-dark: #222222;
  --text-muted: #666666;
  --bg-light: #ffffff;
  --bg-offwhite: #f8fafc;
  --border-color: #cbd5e1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #121820;
  color: var(--text-dark);
  direction: ltr;
  text-align: left;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* RTL Support for Arabic project details sections */
.arabic-text {
  direction: rtl;
  text-align: right;
  font-family: 'Tajawal', sans-serif;
}

/* ==========================================
   TOP CONTROL BAR (Screen Only)
   ========================================== */
.top-control-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(18, 24, 32, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1000;
  color: #ffffff;
}

.brand-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1rem;
}

.brand-title img {
  height: 32px;
  background: #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
}

.btn-print {
  background: var(--cyan-primary);
  color: #ffffff;
  border: none;
  padding: 9px 22px;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 165, 229, 0.3);
  transition: all 0.2s ease;
}

.btn-print:hover {
  background: var(--cyan-dark);
  transform: translateY(-2px);
}

/* ==========================================
   DOCUMENT VIEW CONTAINER (Square Slide Booklet)
   ========================================== */
.document-container {
  margin-top: 20px;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 20px;
}

/* A4 Portrait Pages (210mm x 297mm ≈ 794px x 1123px @96dpi) */
.profile-slide {
  width: 794px;
  height: 1123px;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Slide Page Numbering */
.slide-page-number {
  position: absolute;
  bottom: 25px;
  right: 35px;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* ==========================================
   SLIDE 1: COVER PAGE
   ========================================== */
.slide-cover {
  background: #071422;
  position: relative;
}

.cover-preview-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('assets/land_cover_bg.png') center/cover no-repeat;
  filter: brightness(0.65) contrast(1.1);
}

.cover-preview-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(4, 11, 19, 0.8), rgba(6, 17, 29, 0.72) 55%, rgba(4, 11, 19, 0.88));
}

.cwrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  text-align: center;
  width: 100%;
  z-index: 10;
}

.cover-logo-img {
  width: 300px;
  height: auto;
  margin-bottom: 22px;
  display: inline-block;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.c-en {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  letter-spacing: 12px;
  font-size: 2.3rem;
  color: #ffffff;
  text-transform: uppercase;
}

.c-line {
  width: 140px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  margin: 18px auto;
}

.c-tag {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  letter-spacing: 6px;
  font-size: 1rem;
  color: #e6eef5;
  text-transform: uppercase;
}

.dots {
  position: absolute;
  top: 40px;
  right: 44px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 9px;
  z-index: 10;
}

.dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.55;
}

.corner {
  position: absolute;
  top: 44px;
  left: 44px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 3px;
  color: #c7d6e4;
  z-index: 10;
}

.taxreg {
  position: absolute;
  bottom: 34px;
  right: 44px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 2px;
  color: #ffffff;
  z-index: 10;
}

.taxreg span {
  color: #8fb9db;
  margin-left: 6px;
}

.webfoot {
  position: absolute;
  bottom: 34px;
  left: 44px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 1px;
  color: #cfe0ee;
  z-index: 10;
}

/* ==========================================
   SLIDE 2: TABLE OF CONTENTS (Quarter 1/3 Grid Spacing & Enlarged CAD Blueprint)
   ========================================== */
.slide-toc {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Header & 3-row menu container (Quarter 1 & Quarter 3 alignment) */
.toc-header-container {
  position: absolute;
  top: 75px;
  left: 70px;
  right: 70px;
  z-index: 20;
  text-align: left;
}

.toc-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cyan-primary);
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 35px;
}

.toc-rows-grid {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.toc-row {
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
}

.item-dot {
  color: var(--cyan-primary);
  font-size: 1.4rem;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}

.toc-menu-item {
  font-family: 'Poppins', sans-serif;
  font-size: 2.2rem;
  font-weight: 300;
  color: #0d1f30;
  text-decoration: none;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: all 0.25s ease;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}

.toc-menu-item:hover {
  color: var(--cyan-primary);
  letter-spacing: 5px;
}

/* Enlarged CAD Blueprint Image at Bottom-Left */
.toc-bottom-left-img {
  position: absolute;
  bottom: -60px;
  left: -20px;
  width: 860px;
  transform: rotate(-9deg);
  transform-origin: bottom left;
  mix-blend-mode: multiply;
  z-index: 5;
  opacity: 0.85;
}

.toc-bottom-left-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================
   SLIDE 3: ABOUT US (Exact Replicant of El Masry Image 3)
   ========================================== */
.slide-about {
  background: #ffffff;
  justify-content: flex-start;
}

.about-header-banner {
  height: 220px;
  background: #1ea2dc;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 65px;
  overflow: hidden;
}

.about-banner-pattern {
  position: absolute;
  right: -30px;
  top: -10px;
  width: 520px;
  height: 240px;
  opacity: 0.95;
}

.about-header-title {
  font-family: 'Poppins', sans-serif;
  font-size: 6.4rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 2px;
  position: relative;
  z-index: 10;
  text-transform: uppercase;
  line-height: 1;
}

.about-body-content {
  padding: 55px 70px 40px 70px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.about-paragraph {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #555555;
  font-weight: 400;
}

.about-paragraph strong {
  color: #2b3648;
  font-weight: 700;
}

/* ==========================================
   SLIDE 5: LEGAL DATA (Deep Navy Blue Theme)
   ========================================== */
.slide-legal-dark {
  background: #19314e;
  color: #ffffff;
  padding: 50px 75px 60px 75px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}

.legal-dark-title {
  font-family: 'Poppins', sans-serif;
  font-size: 5.2rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1;
}

.legal-dark-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 2px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.legal-dark-table-wrapper {
  margin-top: 0;
  margin-bottom: 20px;
}

.legal-dark-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', sans-serif;
}

.legal-dark-matrix td {
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 300;
  color: #ffffff;
}

.legal-dark-matrix td.lbl {
  font-weight: 400;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  width: 22%;
  letter-spacing: 0.5px;
}

.legal-dark-matrix td.val {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 300;
  width: 28%;
}

/* ==========================================
   SLIDE 4: OUR VALUES (Vertical Sidebar Strip & 20% Logo Watermark)
   ========================================== */
.slide-values-new {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.values-sidebar-strip {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 180px;
  background: #1ea2dc;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.values-sidebar-dots {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.values-sidebar-title {
  font-family: 'Poppins', sans-serif;
  font-size: 5.5rem;
  font-weight: 900;
  color: #ffffff;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: 4px;
  line-height: 1;
  position: relative;
  z-index: 12;
}

.values-main-area {
  position: absolute;
  top: 0;
  left: 180px;
  right: 0;
  bottom: 0;
  background: #ffffff;
  padding: 55px 65px;
  display: block;
  z-index: 5;
  overflow: hidden;
}

.intro-values-row {
  display: flex;
  align-items: center;
  margin-top: 14px;
  width: 100%;
}

.logo-center-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.values-red-box-logo {
  height: 62px;
  width: auto;
  opacity: 0.20;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.values-main-intro {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #475569;
  max-width: 680px;
  position: relative;
  z-index: 10;
}

.values-main-intro strong {
  color: #0f172a;
  font-weight: 700;
}

.values-grid-new {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 50px;
  position: relative;
  z-index: 10;
}

.value-item-box-new {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.value-item-title-new {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.5px;
}

.thin-word {
  font-weight: 300;
  font-size: 1.35rem;
  color: #334155;
  display: block;
  margin-bottom: -2px;
  letter-spacing: 0.5px;
}

.value-item-desc-new {
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #475569;
  font-weight: 400;
}

/* ==========================================
   SLIDE 6: SERVICES COVER SLIDE (El Masry Style)
   ========================================== */
.slide-services-cover {
  position: relative;
  overflow: hidden;
  background: #0f172a;
}

.services-cover-bg-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('assets/site_work.jpg') center/cover no-repeat;
  filter: brightness(0.55) contrast(1.1);
  z-index: 1;
}

.services-cover-dark-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.88) 100%);
  z-index: 2;
}

.services-typo-watermark {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
  padding-bottom: 90px;
}

.typo-line.bold-white {
  font-size: 5.2rem;
  color: rgba(30, 162, 220, 0.55);
  letter-spacing: 6px;
  text-align: center;
}

.services-cover-bottom-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.92);
  padding: 32px 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 10;
}

.services-cover-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 1.0rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 300;
}

.services-cover-desc strong {
  font-weight: 700;
  color: #ffffff;
}

/* ==========================================
   SLIDES 7-13: INDIVIDUAL DEDICATED SERVICE SLIDES (50/50 Split)
   ========================================== */
.slide-single-service {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.service-top-block {
  height: 50%;
  background: #19314e;
  color: #ffffff;
  padding: 50px 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 5;
}

.service-single-title {
  font-family: 'Poppins', sans-serif;
  font-size: 3.8rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1.5px;
  line-height: 1.1;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.service-single-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  max-width: 680px;
}

.service-bottom-img {
  height: 50%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.service-bottom-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Vertical 50/50 Split (Left Navy Block + Right Full-Height Photo) */
.slide-single-service.vertical-split {
  flex-direction: row;
}

.slide-single-service.vertical-split .service-left-block {
  width: 50%;
  height: 100%;
  background: #19314e;
  color: #ffffff;
  padding: 50px 55px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 5;
}

.slide-single-service.vertical-split .service-right-img {
  width: 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.slide-single-service.vertical-split .service-right-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 20% Opacity Tinted Overlay for Bottom Photo */
.service-bottom-img.tinted-overlay {
  position: relative;
}

.img-color-tint-20 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(25, 49, 78, 0.20);
  pointer-events: none;
  z-index: 2;
}

#slide-service-2 .service-top-block {
  height: 38%;
  padding: 35px 65px;
}

#slide-service-2 .service-bottom-img {
  height: 62%;
}

#slide-service-2 .service-bottom-img img {
  object-position: center 0%;
}

#slide-service-4 .service-bottom-img {
  background: #ffffff;
}

#slide-service-4 .service-bottom-img img {
  object-fit: cover;
  object-position: center 65%;
}

#slide-service-5 .service-bottom-img img {
  object-position: center 20%;
}

/* Full-Page Deep Navy Blue Slide with 30% Image Opacity Overlay */
.slide-single-service.full-blue-tint-slide {
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 65px 75px;
}

.full-blue-overlay-30 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(25, 49, 78, 0.75);
  z-index: 1;
}

.full-blue-content {
  position: relative;
  z-index: 10;
  color: #ffffff;
}

/* Slide 4 BIM: Full-Page Royal Indigo Blue Tint (Solves Pixelation & Distinguishes from Slide 3) */
.slide-bim-indigo {
  background-color: #0c1c30;
}

.full-blue-overlay-bim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(12, 28, 48, 0.88);
  z-index: 1;
}

/* Full-Page Background Photo with 80% Semi-Transparent Navy Header Block */
.slide-single-service.full-bg-photo-slide {
  background-size: cover;
  background-position: left center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
}

.full-slide-img-hd {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  z-index: 1;
}

.header-translucent-80 {
  height: 42%;
  background: rgba(25, 49, 78, 0.80);
  backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 40px 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* ==========================================
   PROJECTS SECTION (Deep Navy Executive Design)
   ========================================== */
.slide-project-navy {
  background: #19314e;
  color: #ffffff;
  padding: 45px 55px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Poppins', sans-serif;
}

.project-navy-header {
  margin-bottom: 22px;
}

.project-eyebrow-navy {
  font-size: 0.85rem;
  font-weight: 700;
  color: #cbd5e1;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.project-title-navy {
  font-size: 2.5rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.project-badge-cyan {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(226, 232, 240, 0.25);
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 10px;
}

.project-navy-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 30px;
  align-items: start;
  flex: 1;
}

.project-navy-info {
  display: flex;
  flex-direction: column;
}

.project-navy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-bottom: 15px;
}

.project-navy-table td {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  line-height: 1.5;
}

.project-navy-table td.lbl {
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  width: 33%;
}

.project-navy-table td.val {
  color: #ffffff;
  font-weight: 400;
}

.project-navy-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid #cbd5e1;
  padding: 16px 20px;
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #cbd5e1;
}

.navy-box-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff;
  margin-bottom: 6px;
}

.navy-scope-list {
  list-style: disc;
  padding-left: 20px;
  font-size: 0.9rem;
  color: #e2e8f0;
  line-height: 1.7;
  margin-bottom: 20px;
}

.navy-scope-list li {
  margin-bottom: 8px;
}

.navy-scope-list b {
  color: #ffffff;
  font-weight: 700;
}

/* 10-Photo Dynamic Stretched Uniform Grid (100% Dynamic Sub-Pixel Alignment with Table Top & Box Bottom) */
.project-photos-uniform-10 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 5px;
  height: 100%;
  align-self: stretch;
}

.project-photos-uniform-10 img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 0px !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

/* 5-Photo Grid with Sharp 90-Degree Square Corners and 5px Gaps (Slide 2) */
.project-photos-5-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  align-self: stretch;
}

.project-photos-5-grid img.img-top-featured {
  width: 100%;
  flex: 1.2;
  min-height: 0;
  object-fit: cover;
  border-radius: 0px !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.sub-photos-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
  flex: 1.8;
  min-height: 0;
}

.sub-photos-grid-4 img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 0px !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Slide 13 — 7-photo right column (1 featured + 2x3 grid) */
.project-photos-7-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
}

.project-photos-7-grid img.img-top-featured {
  width: 100%;
  flex: 1.15;
  min-height: 0;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 0px !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.sub-photos-grid-6 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 5px;
  flex: 2.1;
  min-height: 0;
}

.sub-photos-grid-6 img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 0px !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Slide 13 — 2 photos under the text, side by side */
.project-photos-2-bottom {
  display: flex;
  gap: 5px;
  margin-top: 15px;
  flex: 1;
  min-height: 0;
}

.project-photos-2-bottom img {
  flex: 1;
  width: 50%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 0px !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

/* 4 Bottom Photos Grid for Slide 2 Left Column (2 Large, 2 Small Pair) */
.project-photos-4-bottom {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 15px;
  flex: 1;
  min-height: 0;
}

.project-photos-4-bottom img {
  width: 100%;
  object-fit: cover;
  border-radius: 0px !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.project-photos-4-bottom img.img-large {
  flex: 1.25;
  min-height: 0;
  height: auto;
}

.sub-pair-2 {
  display: flex;
  gap: 5px;
  flex: 1;
  min-height: 0;
}

.sub-pair-2 img {
  flex: 1;
  height: 100%;
  min-height: 0;
}

/* Slide 13 — both columns stretch to the exact same top/bottom page margins */
#slide-p1-scope,
#slide-p2-scope {
  padding-bottom: 70px;
}

#slide-p1-scope .project-navy-grid,
#slide-p2-scope .project-navy-grid {
  min-height: 0;
  height: 100%;
  align-items: stretch;
  grid-auto-rows: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

#slide-p1-scope .project-navy-info,
#slide-p2-scope .project-navy-info {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#slide-p1-scope .navy-scope-list,
#slide-p2-scope .navy-scope-list {
  font-size: 0.85rem;
  line-height: 1.55;
  margin-bottom: 14px;
}

#slide-p1-scope .project-navy-box,
#slide-p2-scope .project-navy-box {
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 12px 16px;
}

#slide-p1-scope .navy-scope-list,
#slide-p2-scope .navy-scope-list,
#slide-p1-scope .project-navy-box,
#slide-p2-scope .project-navy-box {
  flex: 0 0 auto;
}

#slide-p1-scope .project-photos-7-grid,
#slide-p2-scope .project-photos-7-grid {
  height: 100%;
  min-height: 0;
}

.project-navy-photos-5 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.project-navy-photos-5 img.img-large {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.sub-photos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  flex: 1;
}

.sub-photos-grid img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.slide-page-number-light {
  position: absolute;
  bottom: 25px;
  right: 35px;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

.project-val-badge {
  display: inline-block;
  background: #19314e;
  color: #ffffff;
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 8px;
}

.project-body-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 30px;
  align-items: start;
}

.project-arabic-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', 'Cairo', sans-serif;
  font-size: 0.88rem;
}

.project-arabic-table td {
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  line-height: 1.5;
}

.project-arabic-table td.lbl {
  font-weight: 700;
  background: #f8fafc;
  color: #1e293b;
  width: 32%;
}

.project-arabic-table td.val {
  color: #0f172a;
  font-weight: 400;
}

.scope-list-arabic {
  list-style: disc;
  padding-left: 20px;
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.65;
  margin-bottom: 15px;
}

.scope-list-arabic li {
  margin-bottom: 6px;
}

.challenge-box-modern {
  background: #f1f5f9;
  border-left: 4px solid #19314e;
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #334155;
}

.challenge-box-modern strong {
  color: #0f172a;
  display: block;
  margin-bottom: 4px;
}

.project-photos-5grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.project-photos-5grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.project-photos-5grid img:first-child {
  grid-column: span 2;
  height: 170px;
}

/* Translucent Card Overlay Style (Full background photo with semi-transparent floating navy text card) */
.slide-single-service.card-overlay-style {
  background-size: cover;
  background-position: center;
  position: relative;
}

.service-translucent-card {
  position: absolute;
  top: 55px;
  left: 55px;
  max-width: 580px;
  background: rgba(25, 49, 78, 0.88);
  backdrop-filter: blur(12px);
  padding: 42px 48px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  z-index: 10;
}

/* Stat strip (About page) */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 8px;
}

.stat-item {
  background: var(--bg-offwhite);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--cyan-primary);
  border-radius: 4px;
  padding: 16px 12px;
  text-align: center;
}

.stat-num {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--slate-blue);
  letter-spacing: 0.5px;
}

.stat-lbl {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

/* ==========================================
   SLIDE 9 & 10: PROJECTS SAMPLES
   ========================================== */
.slide-project {
  background: #ffffff;
}

.project-container-box {
  padding: 30px 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-header {
  border-bottom: 3px solid var(--cyan-primary);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.project-eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: var(--cyan-dark);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.project-title {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--slate-blue);
  letter-spacing: 0.5px;
}

.project-val-tag {
  display: inline-block;
  background: #10b981;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 4px 14px;
  border-radius: 20px;
  margin-top: 4px;
}

.project-grid-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: flex-start;
}

.project-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.project-data-table td {
  padding: 7px 10px;
  border: 1px solid var(--border-color);
}

.project-data-table tr:nth-child(even) {
  background: #f8fafc;
}

.project-data-table td.lbl {
  font-weight: 700;
  background: #f1f5f9;
  color: var(--slate-dark);
  width: 34%;
}

.project-data-table tr:nth-child(even) td.lbl {
  background: #e8eef4;
}

.project-img-display {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.project-desc-box {
  background: var(--bg-offwhite);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--cyan-primary);
  border-radius: 4px;
  padding: 18px 20px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #333333;
}

.mini-heading {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--slate-blue);
  margin-bottom: 6px;
}

.scope-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #333333;
}

.scope-list.compact {
  font-size: 0.85rem;
  gap: 6px;
}

.scope-list li {
  position: relative;
  padding-left: 20px;
}

.scope-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background: var(--cyan-primary);
  border-radius: 2px;
}

/* Clients & Partners */
.clients-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.client-card {
  background: var(--bg-offwhite);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--cyan-primary);
  border-radius: 4px;
  padding: 16px 18px;
}

.client-name {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--slate-blue);
}

.client-note {
  font-size: 0.84rem;
  color: #555555;
  line-height: 1.5;
  margin-top: 4px;
}

.note-strip {
  background: #eef6fb;
  border: 1px dashed var(--cyan-primary);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--slate-dark);
  font-weight: 600;
}

.clients-image {
  width: 100%;
  height: 175px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--border-color);
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.contact-card {
  background: var(--bg-offwhite);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--cyan-primary);
  border-radius: 4px;
  padding: 22px;
}

.contact-card-title {
  color: var(--slate-blue);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.contact-card-text {
  font-size: 0.94rem;
  color: #444444;
  line-height: 1.7;
}

.contact-footer-bar {
  background: #111722;
  color: #ffffff;
  padding: 22px 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cf-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--cyan-primary);
  letter-spacing: 1px;
}

.cf-meta {
  font-size: 0.84rem;
  color: #94a3b8;
  margin-top: 5px;
}

.contact-footer-bar img {
  height: 46px;
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 4px;
}

/* ==========================================
   SLIDE 11: ENGINEERING CHALLENGES & SOLUTIONS
   ========================================== */
.challenge-box {
  background: var(--bg-offwhite);
  border: 1px solid var(--border-color);
  border-left: 5px solid var(--cyan-dark);
  padding: 22px;
  border-radius: 4px;
}

.challenge-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--slate-blue);
  margin-bottom: 10px;
}

.challenge-desc {
  font-size: 0.93rem;
  line-height: 1.7;
  color: #333333;
}

/* ==========================================
   PRINT / PDF EXPORT MEDIA STYLES
   ========================================== */
@media print {
  .top-control-bar {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .document-container {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .profile-slide {
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ==========================================
   SLIDE 16 — GET IN TOUCH (Final Page)
   ========================================== */
.slide-contact-final {
  background: #f2f2f2;
  padding: 30px 60px 55px;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.contact-final-logo {
  width: 100%;
  margin: 0 0 10px;
}

.contact-final-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.contact-final-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 50px;
  align-items: start;
  flex: 1;
}

.cf-eyebrow {
  grid-column: 1 / -1;
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: #0d1f30;
}

.cf-rule {
  grid-column: 1 / -1;
  width: 90px;
  height: 3px;
  background: var(--cyan-primary);
  margin: 12px 0 8px;
}

.cf-block {
  margin-bottom: 6px;
}

.cf-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cyan-primary);
  margin-bottom: 6px;
}

.cf-value {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.7;
  color: #1e2e38;
}

.cf-legal {
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(30, 46, 56, 0.18);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.3px;
  color: #5b6b76;
}


/* PDF EXPORT — A4 portrait pages, no margins */
@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  body { background: #ffffff; }
  .document-container { margin: 0; padding: 0; gap: 0; display: block; }
  .profile-slide {
    box-shadow: none !important;
    break-after: page;
    page-break-after: always;
    margin: 0;
  }
  .profile-slide:last-child { break-after: auto; page-break-after: auto; }
}


/* Print-density tuning so text never clips on the fixed square page */
.slide-about .about-paragraph { font-size: 0.92rem; line-height: 1.65; }
.slide-values-new .value-desc, .slide-values-new p { line-height: 1.55; }

/* ---- Fixed-page density fixes (values + final contact page) ---- */
.values-main-area { padding: 40px 55px; }
.values-main-area .values-grid-2col,
.values-main-area .values-columns { gap: 14px 34px; }
.value-item-title, .value-title { font-size: 1.05rem !important; }
.value-item-desc, .value-desc { font-size: 0.78rem !important; line-height: 1.5 !important; }

.contact-final-grid {
  display: block;
}

.cf-eyebrow {
  font-size: 1.45rem;
  white-space: nowrap;
}

.cf-columns {
  display: flex;
  gap: 34px;
  margin-top: 6px;
}

.cf-columns .cf-block { flex: 1; margin-bottom: 0; }

.values-grid-new { gap: 16px 34px !important; }
.value-item-title-new { font-size: 1.05rem !important; margin-bottom: 5px !important; }
.value-item-desc-new { font-size: 0.78rem !important; line-height: 1.5 !important; }

@media print {
  html, body { margin: 0; padding: 0; background: #ffffff; }
  .document-container { margin: 0; padding: 0; gap: 0; display: block; width: 210mm; }
  .profile-slide { width: 210mm; height: 297mm; margin: 0; box-shadow: none; overflow: hidden; }
}

/* About Us — tighter gap under the blue banner */
.about-body-content { padding-top: 30px !important; }
.slide-about .about-header-banner { flex: 0 0 auto; }

/* Values — tighter middle gutter between the two columns */
.values-grid-new { gap: 16px 26px !important; }

/* Values — fixed 30px gap between "Our core values are:" and the grid */
.values-main-area { justify-content: flex-start !important; }
.values-main-intro { margin-bottom: 0 !important; }
.intro-values-row { margin-top: 10px !important; }
.values-grid-new { margin-top: 30px !important; }

/* ==========================================================================
   VERTICAL BALANCE FIX (A4 portrait)
   Content was tuned for a shorter square page, so text clustered at the top
   leaving an empty band at the bottom. These rules distribute content evenly
   so top and bottom margins look balanced on the taller page.
   ========================================================================== */

/* About Us — center the body text between the blue banner and the page bottom */
.slide-about .about-body-content {
  flex: 1 1 auto;
  justify-content: center;
}

/* Values — vertically center the content column in the area beside the sidebar */
.slide-values-new .values-main-area {
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
}

/* Legal Data — vertically center the title block and the matrix table */
.slide-legal-dark { justify-content: center !important; }

/* Get in Touch — logo stays near the top; the contact info block is centered
   in the space beneath it so it isn't bunched up right under the logo */
.slide-contact-final .contact-final-grid {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

/* Project overview slides (Shobra 01 & Maskan 02) — stretch both columns to
   fill the full page height, so the photo grid and info reach the bottom
   margin instead of leaving an empty navy band (mirrors the scope slides). */
#slide-p1 .project-navy-grid,
#slide-p2 .project-navy-grid {
  align-items: stretch;
  height: 100%;
  min-height: 0;
}
#slide-p1 .project-navy-info,
#slide-p2 .project-navy-info {
  height: 100%;
  min-height: 0;
}
#slide-p1 .project-navy-info .project-navy-box,
#slide-p2 .project-navy-info .project-navy-box {
  margin-top: auto;
}
#slide-p1 .project-photos-uniform-10,
#slide-p2 .project-photos-uniform-10 {
  height: 100% !important;
  min-height: 0;
}

/* ==========================================================================
   BREATHING ROOM — looser line-height and larger gaps so text on the
   content pages doesn't read as one compressed block.
   ========================================================================== */

/* About Us — more space between lines and between paragraphs */
.slide-about .about-body-content { gap: 34px; }
.slide-about .about-paragraph { font-size: 1rem !important; line-height: 1.95 !important; }

/* Values — looser intro, bigger gaps between the six value blocks */
.slide-values-new .values-main-intro { line-height: 1.85; }
.slide-values-new .values-grid-new { gap: 30px 34px !important; margin-top: 34px !important; }
.slide-values-new .value-item-title-new { margin-bottom: 9px !important; }
.slide-values-new .value-item-desc-new { line-height: 1.72 !important; }

/* Legal Data — taller cells so the table rows breathe */
.slide-legal-dark .legal-dark-matrix td { padding: 22px 22px !important; line-height: 1.75 !important; }

/* Get in Touch — looser contact lines */
.slide-contact-final .cf-value { line-height: 1.95 !important; }
.slide-contact-final .cf-block { margin-bottom: 10px; }

/* Smooth scrolling for in-page Table-of-Contents navigation */
html { scroll-behavior: smooth; }