/* Shared layout and identity — one source for section rhythm and surfaces. */
:root {
  --navy: #10233d;
  --deep-navy: #081a2e;
  --gold: #bd9850;
  --gold-text: #a47d35;
  --ivory: #faf9f6;
  --muted: #596574;
  --border: #e7e1d6;
  --radius: 8px;
  --shadow: 0 5px 20px rgba(20,35,50,.045);
  --hover-shadow: 0 12px 28px rgba(20,35,50,.09);
  --ease: 240ms ease;
  --gutter: clamp(20px, 3.4vw, 56px);
  --section-space: clamp(56px, 6vw, 88px);
  --header-height: 88px;
}

/* ==========================================
   About Profile Row
========================================== */

.about-profile-row {
  padding: 0 0 80px;
  background: #faf9f6;
}

.about-profile-grid {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  direction: rtl;
}

.about-profile-card {
  min-height: 260px;
  padding: 24px;
  background: #fff;
  border: 1px solid #e7e1d6;
  border-radius: 7px;
  box-shadow: 0 5px 18px rgba(20, 35, 50, 0.035);
}

.about-profile-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee9e1;
}

.about-profile-card-title > i {
  color: #b8944f;
  font-size: 25px;
}

.about-profile-card-title h2 {
  color: #10233d;
  font-size: 22px;
  font-weight: 700;
}

.about-profile-memberships {
  display: grid;
  gap: 12px;
}

.about-profile-membership {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #faf9f6;
  border: 1px solid #eee8de;
  border-radius: 6px;
  color: #10233d;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
}

.about-profile-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3ecdf;
  border-radius: 5px;
  color: #b8944f;
  font-size: 21px;
}

.about-profile-quote {
  min-height: 150px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 58px;
  text-align: center;
}

.about-profile-quote p {
  max-width: 600px;
  color: #596574;
  font-size: 17px;
  line-height: 2;
}

.about-profile-quote > i {
  position: absolute;
  color: #b8944f;
  font-size: 30px;
}

.about-profile-quote-start {
  top: 14px;
  right: 12px;
}

.about-profile-quote-end {
  bottom: 14px;
  left: 12px;
}

@media (max-width: 992px) {
  .about-profile-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .about-profile-row {
    padding-bottom: 50px;
  }

  .about-profile-card {
    min-height: 0;
    padding: 18px;
  }

  .about-profile-card-title h2 {
    font-size: 20px;
  }

  .about-profile-quote {
    padding: 28px 35px;
  }

  .about-profile-quote p {
    font-size: 15px;
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { direction: rtl; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }
body { font-family: "Tajawal", sans-serif; background: #fff; color: var(--navy); direction: rtl; text-align: right; line-height: 1.8; }
a { text-decoration: none; color: inherit; transition: color var(--ease); }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 700; line-height: 1.5; text-wrap: pretty; }
p { text-wrap: pretty; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
:where(.header-container, .about-container, .qualifications-container, .practice-container, .articles-container, .judgments-container, .legislation-container, .library-search-container, .contact-container, .footer-container) {
  width: min(1440px, calc(100% - var(--gutter) * 2)); margin-inline: auto; min-width: 0;
}
:where(.about-section, .qualifications-section, .practice-section, .articles-section, .judgments-section, .legislation-section, .library-search-section, .contact-section) { padding-block: var(--section-space); }
:where(.qualifications-section, .articles-section, .judgments-section, .contact-section) { background: var(--ivory); }
:where(.section-heading, .practice-heading, .contact-heading, .library-search-heading) { text-align: center; margin-bottom: 36px; }
:where(.articles-heading, .judgments-heading, .legislation-heading) { text-align: center; }
:where(.about-label, .section-heading > span, .practice-heading > span, .articles-heading > span, .judgments-heading > span, .legislation-heading > span, .library-search-heading > span, .contact-heading > span) {
  display: block; color: var(--gold-text); font-size: 15px; font-weight: 600; margin-bottom: 8px; line-height: 1.6;
}
:where(.about-content, .section-heading, .practice-heading, .articles-heading, .judgments-heading, .legislation-heading, .library-search-heading, .contact-heading) h2 {
  font-size: clamp(28px, 2.7vw, 40px); line-height: 1.45;
}
:where(.about-line, .heading-line, .practice-line, .articles-line, .judgments-line, .legislation-line, .contact-line) {
  width: 72px; height: 2px; background: var(--gold); margin: 16px auto 0;
}
.about-line { margin: 16px 0 24px; }
:where(.articles-top, .judgments-top, .legislation-top) { position: relative; margin-bottom: 36px; padding-inline: 200px; }
:where(.view-all-articles, .view-all-judgments, .view-all-legislation) {
  position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 10px; color: var(--gold-text); font-size: 15px; font-weight: 600; min-height: 44px;
}
:where(.view-all-articles, .view-all-judgments, .view-all-legislation, .law-read, .article-footer a):hover { color: var(--navy); }
/* Compact sticky navigation. */
.site-header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-container { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 22px; position: relative; }
.brand, .footer-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark, .footer-brand-mark {
  width: 42px; height: 56px; flex-shrink: 0; display: grid; place-items: center; background: var(--gold); color: #fff; font: 700 28px Georgia, serif;
  clip-path: polygon(50% 0%,100% 18%,100% 82%,50% 100%,0% 82%,0% 18%);
}
.brand-text, .footer-brand-text { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.brand-ar { font-size: 18px; font-weight: 700; white-space: nowrap; }
.brand-en { margin-top: 5px; font-size: 10px; font-weight: 600; letter-spacing: 2px; direction: ltr; }
.brand-role { margin-top: 3px; font-size: 7px; letter-spacing: 4px; direction: ltr; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.3vw, 22px); flex: 1; }
.main-nav a { position: relative; color: #24354a; font-size: 14px; font-weight: 500; white-space: nowrap; padding-block: 28px; }
.main-nav a::after, .footer-nav a::after { content: ""; position: absolute; bottom: 16px; left: 50%; width: 0; height: 2px; background: var(--gold); transform: translateX(-50%); transition: width var(--ease); }
.main-nav a:hover, .main-nav a.active { color: var(--gold-text); }
.main-nav a:hover::after, .main-nav a.active::after { width: 28px; }
.contact-btn, .hero-btn, .about-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 10px 24px; border: 1px solid var(--gold); border-radius: var(--radius); font-size: 16px; font-weight: 700; transition: background var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease); }
.contact-btn { flex-shrink: 0; min-height: 46px; padding-inline: 20px; font-size: 15px; }
.contact-btn, .hero-btn-primary { color: #fff; background: var(--gold); box-shadow: var(--shadow); }
.contact-btn:hover, .hero-btn-primary:hover { background: #a9833e; transform: translateY(-2px); box-shadow: var(--hover-shadow); }
.menu-toggle { display: none; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); }
.menu-toggle span { width: 22px; height: 2px; background: var(--navy); transition: transform var(--ease), opacity var(--ease); }
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Hero retains the original image, softened only at its perimeter. */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; background: var(--deep-navy); padding-inline: max(var(--gutter), calc((100% - 1440px) / 2)); overflow: hidden; }
.hero-content { order: 1; padding-block: 64px; padding-inline-end: 30px; min-width: 0; position: relative; z-index: 1; }
.hero-content h1 { color: #e2bf78; font-size: clamp(36px, 3.8vw, 62px); line-height: 1.35; margin-bottom: 14px; }
.hero-content h2 { color: #fff; font-size: clamp(18px, 1.6vw, 25px); line-height: 1.8; font-weight: 500; margin-bottom: 22px; }
.hero-line { width: min(240px, 65%); height: 2px; background: var(--gold); margin-bottom: 24px; }
.hero-content p { color: #e3e8ed; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.95; max-width: 580px; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.hero-btn { min-height: 56px; }
.hero-btn-outline { color: #fff; background: transparent; }
.hero-btn-outline:hover { background: var(--gold); transform: translateY(-2px); }
.hero-image { order: 2; height: clamp(480px, 42vw, 620px); position: relative; align-self: end; display: flex; align-items: end; justify-content: center; }
.hero-image img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; mask-image: linear-gradient(to right,transparent,#000 12%,#000 86%,transparent),linear-gradient(to top,transparent,#000 16%,#000 96%,transparent); mask-composite: intersect; }
/* About */
.about-container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.about-content p { color: var(--muted); font-size: 17px; line-height: 2; margin-bottom: 14px; }
.about-btn { margin-top: 12px; border-color: #b7b8bb; font-size: 15px; font-weight: 600; }
.about-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.about-visual { height: 440px; position: relative; overflow: hidden; }
.about-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) brightness(1.08); }
.about-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left,#fff,rgba(255,255,255,.6) 20%,transparent 55%),linear-gradient(to top,#fff,transparent 20%,transparent 80%,#fff),linear-gradient(to right,#fff,transparent 12%); pointer-events: none; }
.about-image-text { position: absolute; top: 50%; inset-inline-start: 32px; transform: translateY(-50%); z-index: 1; display: flex; flex-direction: column; gap: 5px; color: #20334a; }
.about-image-text span { font-size: 18px; font-weight: 500; }
.about-image-text strong { font-size: 23px; }
/* Card grids share equal tracks, surfaces and motion. */
.qualifications-grid, .practice-grid, .articles-grid, .judgments-grid, .legislation-grid { display: grid; gap: 24px; grid-auto-rows: 1fr; }
.qualifications-grid, .practice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.articles-grid, .judgments-grid, .legislation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qualification-card, .practice-card, .article-card, .judgment-card, .law-card, .contact-card { min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); }
.qualification-card, .practice-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 22px; }
.qualification-card { min-height: 190px; }
.qualification-icon, .practice-icon { width: 52px; height: 52px; display: grid; place-items: center; color: var(--gold); font-size: 38px; margin-bottom: 16px; }
.qualification-card h3 { font-size: 18px; line-height: 1.75; }
.qualification-card h3 span { display: block; }
.practice-section { background: radial-gradient(circle at 15% 20%,rgba(189,152,80,.08),transparent 35%),linear-gradient(135deg,#07182a,#0b2238); }
.practice-heading h2, .library-search-heading h2 { color: #fff; }
.practice-heading > span, .library-search-heading > span { color: #c7a45e; }
.practice-card { min-height: 260px; background: #fbfaf7; justify-content: flex-start; }
.practice-card h3 { font-size: 19px; margin-bottom: 10px; }
.practice-card p { font-size: 15px; line-height: 1.9; color: var(--muted); }
.article-card { overflow: hidden; display: flex; flex-direction: column; }
.article-image { aspect-ratio: 16 / 10; overflow: hidden; flex-shrink: 0; }
.article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.article-content { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.article-content h3, .judgment-card h3, .law-card h3 { font-size: 21px; line-height: 1.65; min-height: 3.3em; }
.article-title-line { width: 44px; height: 2px; flex-shrink: 0; background: var(--gold); margin-block: 16px; }
.article-content p { color: var(--muted); font-size: 15px; line-height: 1.95; flex: 1; }
.article-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.article-date, .article-footer a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.article-date { color: var(--muted); }
.article-date i, .article-footer a { color: var(--gold-text); }
.judgment-card, .law-card { padding: 24px; }
.judgment-card h3 { text-align: right; margin-bottom: 20px; }
.judgment-meta { border-top: 1px solid var(--border); }
.judgment-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.85; }
.judgment-row:last-child { border-bottom: 0; }
.judgment-row .label, .law-label { color: var(--gold-text); font-weight: 700; }
.judgment-row .value, .law-value { color: var(--muted); overflow-wrap: anywhere; }
.judgment-principle { grid-template-columns: 1fr; gap: 4px; }
.law-card { display: flex; flex-direction: column; }
.law-card h3 { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); min-height: calc(3.3em + 19px); }
.law-card-body { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 18px; align-items: center; flex: 1; }
.law-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-block: 9px; border-bottom: 1px solid var(--border); font-size: 15px; }
.law-row:last-child { border-bottom: 0; }
.law-status { color: #36774d; background: #edf5ee; border-radius: 4px; padding: 1px 10px; font-size: 14px; font-weight: 600; }
.law-icon { width: 76px; height: 96px; display: grid; place-items: center; background: #f5f0e6; border-radius: var(--radius); color: var(--gold); font-size: 42px; }
.law-read { display: flex; align-items: center; gap: 10px; color: var(--gold-text); font-size: 15px; font-weight: 600; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
/* Legal library */
.library-search-section { position: relative; background: var(--deep-navy) url("../images/legal-library-bg.jpg") center / cover no-repeat; }
.library-search-overlay { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(5,22,38,.92),rgba(7,30,50,.82),rgba(5,22,38,.92)); }
.library-search-container { position: relative; }
.library-search-heading h2 { margin-bottom: 16px; }
.library-search-heading h2::after { content: ""; display: block; width: 72px; height: 2px; margin: 16px auto 20px; background: var(--gold); }
.library-search-heading p { color: #d5dce3; font-size: 17px; line-height: 1.9; }
.legal-search-form { width: min(100%, 1060px); margin-inline: auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); background: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius); box-shadow: 0 12px 35px rgba(0,0,0,.18); direction: rtl; }
.legal-search-form:focus-within { outline: 2px solid var(--gold); outline-offset: 4px; }
.search-type { display: flex; align-items: center; position: relative; border-inline-end: 1px solid var(--border); min-width: 0; }
.search-type select { width: 100%; height: 68px; padding: 0 22px 0 44px; border: 0; border-radius: var(--radius); background: transparent; appearance: none; color: var(--navy); font-size: 16px; direction: rtl; }
.search-type i { position: absolute; inset-inline-end: 20px; font-size: 12px; pointer-events: none; }
.search-input-wrap { display: flex; align-items: center; min-width: 0; direction: rtl; }
.search-input-wrap input { min-width: 0; width: 100%; height: 68px; padding-inline: 24px; border: 0; background: transparent; color: var(--navy); direction: rtl; text-align: right; font-size: 16px; }
.search-input-wrap input::placeholder { color: #737e89; opacity: 1; }
.search-input-wrap button { width: 64px; height: 52px; margin-inline-end: 8px; flex-shrink: 0; border: 0; border-radius: 6px; background: var(--gold); color: #fff; font-size: 20px; transition: background var(--ease); }
.search-input-wrap button:hover { background: #a9833e; }
.library-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.library-filters button { min-height: 44px; padding: 8px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.32); border-radius: var(--radius); background: rgba(255,255,255,.04); color: #fff; font-size: 14px; transition: background var(--ease), border-color var(--ease); }
.library-filters button i { color: #d5b573; }
.library-filters button:hover, .library-filters button.active { background: #a9833e; border-color: var(--gold); }
.library-filters button.active i { color: #fff; }
/* Contact and footer */
.contact-content { display: flex; align-items: center; gap: 40px; }
.contact-cards { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; grid-auto-rows: 1fr; }
.contact-card { display: flex; align-items: center; min-height: 112px; padding: 20px; gap: 16px; }
.contact-card-icon { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius); font-size: 28px; }
.whatsapp-icon { background: #ecf8ef; color: #269250; }
.email-icon { background: #f4eee2; color: var(--gold-text); }
.contact-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact-card-text span { color: var(--muted); font-size: 14px; }
.contact-card-text strong { font-size: 17px; overflow-wrap: anywhere; text-align: right; }
.social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.social-item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 60px; color: var(--muted); transition: transform var(--ease), color var(--ease); }
.social-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--navy); font-size: 23px; }
.social-item span { font-size: 12px; direction: ltr; }
.social-item:hover { transform: translateY(-3px); color: var(--gold-text); }
.site-footer { background: linear-gradient(135deg,#07182a,#0a2238 55%,#07182a); color: #fff; padding-block: 48px 24px; }
.footer-container { display: grid; grid-template-columns: 250px minmax(0,1fr); align-items: start; gap: 32px 48px; }
.footer-brand-text strong { font-size: 18px; white-space: nowrap; }
.footer-brand-text span { font-size: 10px; letter-spacing: 2px; color: #d8c49a; margin-top: 6px; direction: ltr; }
.footer-brand-text small { font-size: 7px; letter-spacing: 4px; margin-top: 3px; direction: ltr; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 18px; }
.footer-nav a { position: relative; color: #e5e8ec; font-size: 14px; padding-block: 8px; }
.footer-nav a::after { bottom: 2px; }
.footer-nav a:hover, .footer-nav a.active { color: #d4b56d; }
.footer-nav a.active::after { width: 28px; }
.footer-description { max-width: 680px; color: #c1cad3; font-size: 14px; line-height: 1.95; }
.footer-copyright { grid-column: 1 / -1; text-align: center; font-size: 13px; color: #c1cad3; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
@media (hover: hover) {
  :is(.qualification-card, .practice-card, .article-card, .judgment-card, .law-card, .contact-card):hover { transform: translateY(-4px); border-color: rgba(189,152,80,.6); box-shadow: var(--hover-shadow); }
  .article-card:hover .article-image img { transform: scale(1.035); }
}
/* Laptop navigation collapses before Arabic links become crowded. */
@media (max-width: 1250px) {
  .menu-toggle { display: flex; }
  .contact-btn { margin-inline-start: auto; }
  .main-nav { position: absolute; top: 100%; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; max-height: calc(100dvh - var(--header-height) - 16px); overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--hover-shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--ease), transform var(--ease), visibility var(--ease); }
  .main-nav.active { opacity: 1; visibility: visible; transform: none; }
  .main-nav a { padding: 10px 16px; border-radius: 4px; }
  .main-nav a.active { background: var(--ivory); }
  .main-nav a::after { display: none; }
  .contact-content { flex-direction: column; gap: 32px; }
  .contact-cards { width: 100%; }
}
@media (max-width: 1100px) {
  .hero-content { padding-inline-end: 20px; }
  .hero-btn { padding-inline: 18px; font-size: 15px; }
  .about-container { gap: 28px; }
  .judgment-card, .law-card, .article-content { padding: 20px; }
  .law-card-body { gap: 12px; grid-template-columns: minmax(0,1fr) 60px; }
  .law-icon { width: 60px; height: 82px; font-size: 34px; }
  :where(.articles-top, .judgments-top, .legislation-top) { padding-inline: 0; }
  :where(.view-all-articles, .view-all-judgments, .view-all-legislation) { position: static; transform: none; display: flex; justify-content: center; margin-top: 12px; }
}
@media (max-width: 992px) {
  .qualifications-grid, .practice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .articles-grid, .judgments-grid, .legislation-grid { grid-template-columns: 1fr; }
  .article-image { aspect-ratio: 16 / 9; }
  .article-content h3, .judgment-card h3, .law-card h3 { min-height: 0; }
  .hero { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .hero-content { padding-block: 48px; }
  .hero-image { height: 460px; }
  .about-container { grid-template-columns: 1fr; gap: 28px; }
  .about-visual { height: 360px; }
  .footer-container { grid-template-columns: 1fr; gap: 28px; }
  .footer-nav { gap: 8px 22px; }
}
@media (max-width: 700px) {
  :root { --header-height: 76px; }
  .header-container { gap: 12px; }
  .brand-mark { width: 36px; height: 48px; font-size: 24px; }
  .brand-ar { font-size: 16px; }
  .brand-en { font-size: 9px; }
  .brand-role { font-size: 6px; }
  .contact-btn { display: none; }
  .menu-toggle { margin-inline-start: auto; }
  .hero { grid-template-columns: minmax(0,1fr); }
  .hero-content { padding: 44px 0 16px; }
  .hero-content h1 { font-size: clamp(34px,8.5vw,48px); }
  .hero-image { height: 370px; width: min(100%,460px); justify-self: center; }
  .hero-actions { gap: 12px; }
  .hero-btn { flex: 1 1 100%; min-height: 56px; }
  .contact-cards { grid-template-columns: 1fr; }
  .legal-search-form { grid-template-columns: minmax(0,1fr); }
  .search-type { border-inline-end: 0; border-bottom: 1px solid var(--border); }
  .search-type select { height: 54px; }
  .search-input-wrap input { height: 64px; padding-inline: 16px; }
  .search-input-wrap button { width: 50px; height: 48px; }
  .library-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .library-filters button { padding-inline: 8px; }
  .footer-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 20px; }
  .footer-nav a { width: fit-content; }
}
@media (max-width: 576px) {
  .qualifications-grid, .practice-grid { grid-template-columns: 1fr; gap: 18px; }
  .qualification-card { min-height: 176px; }
  .practice-card { min-height: 230px; }
  .about-visual { height: 300px; }
  .about-content p { font-size: 16px; }
  .about-image-text { inset-inline-start: 20px; }
  .about-image-text strong { font-size: 21px; }
  .article-content h3, .judgment-card h3, .law-card h3 { font-size: 20px; }
  .law-card-body { grid-template-columns: minmax(0,1fr) 76px; gap: 18px; }
  .law-icon { width: 76px; height: 96px; font-size: 40px; }
  .contact-card-text strong { font-size: 16px; }
  .social-links { gap: 10px; }
  .social-item { min-width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* Shared rows keep long Arabic headings aligned without clipping content. */
@media (min-width: 993px) {
  .articles-grid, .judgments-grid, .legislation-grid { grid-auto-rows: auto; }
  .article-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .article-content { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .judgment-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .law-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
/* ==========================================
   About Page Hero
========================================== */

.about-page-hero {
  position: relative;

  width: 100%;
  min-height: 360px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 35%,
      rgba(193, 155, 82, 0.13),
      transparent 35%
    ),
    linear-gradient(
      120deg,
      #07182a 0%,
      #0b2238 55%,
      #07182a 100%
    );
}


/* Overlay */

.about-page-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 24, 42, 0.12) 0%,
      rgba(7, 24, 42, 0.20) 50%,
      rgba(7, 24, 42, 0.45) 100%
    );

  pointer-events: none;
}


/* Container */

.about-page-hero-container {
  position: relative;

  z-index: 2;

  min-height: 360px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 0.75fr;

  align-items: center;

  direction: rtl;
}


/* Content */

.about-page-hero-content {
  text-align: right;

  padding: 45px 0;
}


.about-page-kicker {
  display: inline-block;

  color: #c7a45e;

  font-size: 15px;
  font-weight: 600;

  margin-bottom: 12px;
}


.about-page-hero-content h1 {
  color: #ffffff;

  font-size: clamp(46px, 4vw, 68px);

  line-height: 1.2;

  font-weight: 700;

  margin: 0;
}


.about-page-line {
  width: 80px;
  height: 3px;

  background: #c19b52;

  margin: 18px 0 20px auto;
}


/* Breadcrumb */

.about-breadcrumb {
  display: flex;

  align-items: center;

  gap: 12px;

  color: #d9dfe5;

  font-size: 15px;
}


.about-breadcrumb a {
  color: #ffffff;

  transition: 0.25s ease;
}


.about-breadcrumb a:hover {
  color: #c19b52;
}


.about-breadcrumb i {
  color: #c19b52;

  font-size: 12px;
}


/* ==========================================
   Lawyer Image
========================================== */

.about-page-hero-image {
  position: relative;

  height: 360px;

  display: flex;

  align-items: flex-end;
  justify-content: center;

  overflow: hidden;

  direction: ltr;
}


.about-page-hero-image img {
  position: relative;

  z-index: 2;

  width: auto;
  height: 112%;

  max-width: 100%;

  object-fit: contain;
  object-position: center bottom;

  display: block;
}


/* دمج الصورة مع الخلفية */

.about-page-hero-image::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 3;

  background:
    linear-gradient(
      to right,
      rgba(7, 24, 42, 0.72) 0%,
      rgba(7, 24, 42, 0.15) 25%,
      transparent 50%
    ),
    linear-gradient(
      to top,
      #07182a 0%,
      rgba(7, 24, 42, 0.15) 18%,
      transparent 40%
    );

  pointer-events: none;
}


/* Gold Decoration */

.about-page-hero-image::before {
  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  border: 1px solid rgba(193, 155, 82, 0.22);

  border-radius: 50%;

  top: 35px;
  left: 50%;

  transform: translateX(-50%);

  z-index: 1;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

  .about-page-hero-container {

    grid-template-columns: 1fr 0.8fr;
  }

  .about-page-hero,
  .about-page-hero-container,
  .about-page-hero-image {
    min-height: 320px;
    height: 320px;
  }

  .about-page-hero-image img {
    height: 105%;
  }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 650px) {

  .about-page-hero {
    min-height: 280px;
  }

  .about-page-hero-container {

    min-height: 280px;

    grid-template-columns: 1fr;
  }


  .about-page-hero-content {
    position: relative;

    z-index: 5;

    text-align: center;

    padding: 55px 0;
  }


  .about-page-hero-content h1 {
    font-size: 42px;
  }


  .about-page-line {
    margin:
      16px auto
      18px;
  }


  .about-breadcrumb {
    justify-content: center;
  }


  .about-page-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0.18;
  }


  .about-page-hero-image img {
    height: 115%;

    margin-right: auto;
  }


  .about-page-hero-image::after {
    background:
      rgba(7, 24, 42, 0.5);
  }

}


/* ==========================================
   About Lawyer Details
========================================== */

.about-lawyer-details {
  width: 100%;

  padding: 75px 0 70px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #faf9f6 100%
    );

  overflow: hidden;
}


.about-lawyer-container {

  margin: 0 auto;
}


/* ==========================================
   Top
========================================== */

.about-lawyer-top {
  display: grid;

  grid-template-columns:
    1.05fr 0.95fr;

  align-items: center;

  gap: 70px;

  direction: rtl;
}


/* Text */

.about-lawyer-text {
  text-align: right;
}


.about-small-title {
  display: block;

  color: #b8944f;

  font-size: 15px;
  font-weight: 600;

  margin-bottom: 10px;
}


.about-lawyer-text h2 {
  color: #10233d;

  font-size: clamp(40px, 3.6vw, 58px);

  line-height: 1.2;

  font-weight: 700;

  margin: 0;
}


.about-title-line {
  width: 80px;
  height: 2px;

  background: #bd9850;

  margin: 17px 0 23px auto;
}


.about-lawyer-text p {
  max-width: 820px;

  color: #626d79;

  font-size: 17px;

  line-height: 2;

  margin-bottom: 10px;
}


/* ==========================================
   Court Image
========================================== */

.about-court-image {
  position: relative;

  height: 390px;

  overflow: hidden;
}


.about-court-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;

  filter:
    saturate(0.72)
    brightness(1.05);
}


/* دمج الصورة مع الأبيض */

.about-court-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to right,
      rgba(255,255,255,0) 45%,
      rgba(255,255,255,0.45) 72%,
      #ffffff 100%
    ),
    linear-gradient(
      to top,
      #ffffff 0%,
      rgba(255,255,255,0.15) 25%,
      transparent 50%
    );

  pointer-events: none;
}


/* ==========================================
   Feature Items
========================================== */

.about-features {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 24px;

  margin-top: 25px;
}


.about-feature {
  min-height: 110px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;

  padding: 15px 20px;
}


.about-feature-icon {
  width: 68px;
  height: 68px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  background: #f5efe4;

  border-radius: 7px;
}


.about-feature-icon i {
  color: #b8944f;

  font-size: 31px;
}


.about-feature h3 {
  color: #10233d;

  font-size: 18px;

  line-height: 1.5;

  font-weight: 700;

  margin-bottom: 4px;
}


.about-feature p {
  color: #68727c;

  font-size: 14px;

  line-height: 1.7;

  margin: 0;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {


  .about-lawyer-top {
    grid-template-columns: 1fr;

    gap: 40px;
  }


  .about-court-image {
    height: 340px;
  }


  .about-features {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 600px) {

  .about-lawyer-details {
    padding: 55px 0;
  }


  .about-lawyer-text h2 {
    font-size: 34px;
  }


  .about-lawyer-text p {
    font-size: 15px;

    line-height: 1.9;
  }


  .about-court-image {
    height: 280px;
  }


  .about-features {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .about-feature {
    justify-content: flex-start;

    padding: 14px 5px;
  }


  .about-feature-icon {
    width: 58px;
    height: 58px;
  }


  .about-feature-icon i {
    font-size: 26px;
  }

}
/* ==========================================
   Career Section
========================================== */

.career-section {
  width: 100%;
  padding: 70px 0 90px;

  background:
    linear-gradient(
      180deg,
      #faf9f6 0%,
      #ffffff 100%
    );
}


.career-container {
  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 24px;

  direction: rtl;
}


/* panel */

.career-panel {
  background: #ffffff;

  border: 1px solid #e5dfd3;

  padding: 24px;

  box-shadow:
    0 5px 18px
    rgba(20, 35, 50, 0.035);
}


.career-panel-title {
  display: flex;

  align-items: center;

  gap: 12px;

  padding-bottom: 14px;

  margin-bottom: 20px;

  border-bottom: 1px solid #eee9e1;
}


.career-panel-title i {
  color: #b8944f;

  font-size: 26px;
}


.career-panel-title h2 {
  color: #10233d;

  font-size: 24px;
  font-weight: 700;
}


/* ==========================================
   Qualifications
========================================== */

.qualification-list {
  display: grid;

  gap: 12px;
}


.qualification-item {
  display: flex;

  align-items: center;

  gap: 18px;

  padding: 16px;

  background: #faf9f6;

  border: 1px solid #eee8de;
}


.qualification-item > i {
  width: 54px;
  height: 54px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  background: #f3ecdf;

  color: #b8944f;

  font-size: 24px;
}


.qualification-item h3 {
  color: #10233d;

  font-size: 17px;

  margin-bottom: 4px;
}


.qualification-item p {
  color: #717b86;

  font-size: 14px;
}


/* ==========================================
   Experience Timeline
========================================== */

.experience-timeline {
  position: relative;
}


.experience-item {
  display: grid;

  grid-template-columns:
    90px 22px 1fr;

  gap: 15px;

  min-height: 95px;

  position: relative;
}


.timeline-year {
  color: #b8944f;

  font-size: 14px;
  font-weight: 600;

  padding-top: 4px;
}


.timeline-dot {
  position: relative;
}


.timeline-dot::before {
  content: "";

  position: absolute;

  top: 8px;
  right: 50%;

  width: 10px;
  height: 10px;

  transform: translateX(50%);

  background: #b8944f;

  border-radius: 50%;
}


.timeline-dot::after {
  content: "";

  position: absolute;

  top: 18px;
  bottom: 0;

  right: 50%;

  width: 1px;

  transform: translateX(50%);

  background: #d7c39a;
}


.experience-item:last-child
.timeline-dot::after {
  display: none;
}


.timeline-content h3 {
  color: #10233d;

  font-size: 16px;

  margin-bottom: 4px;
}


.timeline-content p {
  color: #68727c;

  font-size: 14px;

  line-height: 1.7;
}


/* ==========================================
   Memberships
========================================== */

.membership-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 12px;
}


.membership-item {
  min-height: 78px;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px;

  border: 1px solid #eee8de;

  background: #faf9f6;
}


.membership-item i {
  width: 46px;
  height: 46px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #b8944f;

  background: #f3ecdf;

  font-size: 21px;
}


.membership-item span {
  color: #20344d;

  font-size: 14px;

  line-height: 1.6;

  font-weight: 600;
}


/* ==========================================
   Philosophy
========================================== */

.philosophy-content {
  min-height: 150px;

  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 25px 65px;

  text-align: center;
}


.philosophy-content p {
  color: #596574;

  font-size: 17px;

  line-height: 2;

  max-width: 600px;
}


.quote-start,
.quote-end {
  position: absolute;

  color: #b8944f;

  font-size: 32px;
}


.quote-start {
  top: 15px;
  right: 20px;
}


.quote-end {
  bottom: 15px;
  left: 20px;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

  .career-container {

    grid-template-columns: 1fr;
  }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 600px) {

  .career-section {
    padding: 50px 0;
  }


  .career-panel {
    padding: 18px;
  }


  .career-panel-title h2 {
    font-size: 20px;
  }


  .experience-item {
    grid-template-columns:
      70px 18px 1fr;
  }


  .membership-grid {
    grid-template-columns: 1fr;
  }


  .philosophy-content {
    padding: 25px 35px;
  }


  .philosophy-content p {
    font-size: 15px;
  }

}

/* ==========================================
   Practice Page Hero
========================================== */

.practice-page-hero {
  position: relative;

  width: 100%;
  min-height: 360px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    url("../images/practice-hero.png")
    left center / cover no-repeat;
}


/* Dark Blend */

.practice-page-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 24, 42, 0.05) 0%,
      rgba(7, 24, 42, 0.22) 30%,
      rgba(7, 24, 42, 0.75) 58%,
      #07182a 100%
    );

  z-index: 1;
}


/* Extra dark layer */

.practice-page-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(3, 15, 28, 0.08),
      rgba(3, 15, 28, 0.18)
    );

  z-index: 2;
}


/* Container */

.practice-page-hero-container {
  position: relative;

  z-index: 3;

  margin: 0 auto;

  display: flex;

  justify-content: flex-start;

  direction: rtl;
}


/* Content */

.practice-page-hero-content {
  width: 58%;

  text-align: right;

  padding: 55px 0;
}


.practice-page-hero-content h1 {
  color: #ffffff;

  font-size: clamp(42px, 4vw, 66px);

  line-height: 1.25;

  font-weight: 700;

  margin: 0;
}


/* Gold line */

.practice-page-line {
  width: 90px;
  height: 3px;

  background: #c19b52;

  margin: 20px 0 22px auto;
}


/* Breadcrumb */

.practice-breadcrumb {
  display: flex;

  align-items: center;

  gap: 14px;

  color: #d5dce3;

  font-size: 15px;
}


.practice-breadcrumb a {
  color: #ffffff;

  transition: 0.25s ease;
}


.practice-breadcrumb a:hover {
  color: #c19b52;
}


.practice-breadcrumb i {
  color: #c19b52;

  font-size: 12px;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

  .practice-page-hero {
    min-height: 320px;
  }

  .practice-page-hero-content {
    width: 70%;
  }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 600px) {

  .practice-page-hero {
    min-height: 280px;

    background-position: center;
  }


  .practice-page-hero::before {
    background:
      rgba(7, 24, 42, 0.78);
  }


  .practice-page-hero-container {

    justify-content: center;
  }


  .practice-page-hero-content {
    width: 100%;

    text-align: center;

    padding: 45px 0;
  }


  .practice-page-hero-content h1 {
    font-size: 36px;
  }


  .practice-page-line {
    margin:
      17px auto
      20px;
  }


  .practice-breadcrumb {
    justify-content: center;

    font-size: 13px;
  }

}

/* ==========================================
   Legal Approach
========================================== */

.legal-approach-section {
  width: 100%;
  padding: 85px 0;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.96) 45%,
      rgba(250,249,246,0.96) 100%
    ),
    url("../images/legal-approach-bg.png")
    left center / cover no-repeat;
}

.legal-approach-container {
  margin: 0 auto;
}

.legal-approach-content {
  max-width: 760px;
  margin-right: 0;
  margin-left: auto;

  text-align: right;
}

.legal-approach-content h2 {
  color: #10233d;

  font-size: clamp(36px, 3vw, 50px);

  margin: 0;
}

.legal-approach-content p {
  color: #5f6a77;

  font-size: 17px;
  line-height: 2;

  margin-top: 22px;
}


/* Steps */

.legal-approach-steps {
  margin-top: 45px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  border: 1px solid #e7e1d6;

  background: rgba(255,255,255,0.92);
}

.approach-step {
  min-height: 135px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 15px;

  text-align: center;

  border-left: 1px solid #e7e1d6;
}

.approach-step:last-child {
  border-left: none;
}

.approach-icon i {
  color: #b8944f;

  font-size: 32px;
}

.approach-step h3 {
  color: #10233d;

  font-size: 16px;
  font-weight: 700;
}


/* Tablet */

@media (max-width: 992px) {

  .legal-approach-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .approach-step {
    border-bottom: 1px solid #e7e1d6;
  }

}


/* Mobile */

@media (max-width: 600px) {

  .legal-approach-section {
    padding: 55px 0;
  }

  .legal-approach-steps {
    grid-template-columns: 1fr;
  }

  .approach-step {
    border-left: none;
    border-bottom: 1px solid #e7e1d6;
  }

  .approach-step:last-child {
    border-bottom: none;
  }

}

/* ==========================================
   Practice Areas Page
========================================== */

.practice-areas-page {
  width: 100%;
  padding: 80px 0 95px;

  background:
    linear-gradient(
      180deg,
      #fcfbf8 0%,
      #f8f6f1 100%
    );
}

.practice-areas-container {
  margin: 0 auto;
}


/* Heading */

.practice-areas-heading {
  max-width: 950px;

  margin: 0 auto 48px;

  text-align: center;
}

.practice-areas-heading > span {
  color: #b8944f;

  font-size: 15px;
  font-weight: 600;
}

.practice-areas-heading h2 {
  color: #10233d;

  font-size: clamp(36px, 3vw, 50px);

  margin: 8px 0 0;

  font-weight: 700;
}

.practice-heading-line {
  width: 75px;
  height: 2px;

  background: #bd9850;

  margin: 15px auto 18px;
}

.practice-areas-heading p {
  color: #64707d;

  font-size: 17px;

  line-height: 1.9;
}


/* Grid */

.practice-areas-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 24px;
}


/* Card */

.practice-area-card {
  background: #ffffff;

  overflow: hidden;

  min-height: 460px;

  display: flex;
  flex-direction: column;
}

.practice-area-card:hover {

  border-color:
    rgba(189, 152, 80, 0.55);
}


/* Image */

.practice-area-image {
  position: relative;

  width: 100%;
  height: 185px;

  overflow: visible;
}

.practice-area-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.4s ease;
}

.practice-area-card:hover
.practice-area-image img {
  transform: scale(1.04);
}


/* Floating Icon */

.practice-area-icon {
  position: absolute;

  left: 18px;
  bottom: -28px;

  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f7f0e3;

  border: 1px solid #eadfca;

  border-radius: 7px;

  box-shadow:
    0 8px 20px
    rgba(30, 40, 50, 0.09);
}

.practice-area-icon i {
  color: #b8944f;

  font-size: 27px;
}


/* Content */

.practice-area-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 43px 25px 24px;

  text-align: right;
}

.practice-area-content h3 {
  color: #10233d;

  font-size: 21px;
  font-weight: 700;

  margin-bottom: 10px;
}

.practice-area-content p {
  color: #697480;

  font-size: 15px;
  line-height: 1.85;

  margin-bottom: 22px;
}

.practice-area-content a {
  margin-top: auto;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  width: fit-content;

  color: #a77d39;

  font-size: 14px;
  font-weight: 600;

  transition: 0.25s ease;
}

.practice-area-content a:hover {
  color: #10233d;

  gap: 12px;
}


/* Tablet */

@media (max-width: 1100px) {

  .practice-areas-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* Mobile */

@media (max-width: 600px) {

  .practice-areas-page {
    padding: 55px 0;
  }

  .practice-areas-grid {
    grid-template-columns: 1fr;
  }

  .practice-area-card {
    min-height: auto;
  }

  .practice-area-image {
    height: 210px;
  }

  .practice-area-content h3 {
    font-size: 20px;
  }

}
/* ==========================================
   Consultation CTA
========================================== */

.consultation-cta {
  position: relative;

  width: 100%;
  min-height: 330px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    url("../images/consultation-cta.png")
    left center / cover no-repeat;
}


/* Dark Overlay */

.consultation-cta-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 24, 42, 0.12) 0%,
      rgba(7, 24, 42, 0.55) 45%,
      rgba(7, 24, 42, 0.94) 100%
    );
}


/* Container */

.consultation-cta-container {
  position: relative;
  z-index: 2;

  margin: 0 auto;

  display: flex;

  justify-content: flex-start;

  direction: rtl;
}


/* Content */

.consultation-cta-content {
  width: 60%;

  text-align: right;
}


.consultation-kicker {
  display: block;

  color: #d3ac61;

  font-size: 16px;
  font-weight: 600;

  margin-bottom: 10px;
}


.consultation-cta-content h2 {
  color: #ffffff;

  font-size: clamp(36px, 3vw, 52px);

  line-height: 1.3;

  font-weight: 700;

  margin-bottom: 12px;
}


.consultation-cta-content p {
  color: #e0e5ea;

  font-size: 17px;

  line-height: 1.9;

  margin-bottom: 28px;
}


/* Buttons */

.consultation-actions {
  display: flex;

  align-items: center;

  gap: 16px;

  flex-wrap: wrap;
}


.consultation-btn {
  min-width: 205px;
  min-height: 54px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  padding: 0 25px;

  font-size: 15px;
  font-weight: 700;

  transition: 0.3s ease;
}


/* Gold */

.consultation-btn.primary {
  background: #c19b52;

  border: 1px solid #c19b52;

  color: #ffffff;
}


.consultation-btn.primary:hover {
  background: #aa8340;

  border-color: #aa8340;

  transform: translateY(-2px);
}


/* Outline */

.consultation-btn.outline {
  background: transparent;

  border: 1px solid rgba(255,255,255,0.75);

  color: #ffffff;
}


.consultation-btn.outline:hover {
  background: rgba(255,255,255,0.08);

  border-color: #ffffff;

  transform: translateY(-2px);
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

  .consultation-cta-content {
    width: 75%;
  }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 600px) {

  .consultation-cta {
    min-height: 380px;

    background-position: center;
  }


  .consultation-cta-overlay {
    background:
      rgba(7, 24, 42, 0.83);
  }


  .consultation-cta-container {

    justify-content: center;
  }


  .consultation-cta-content {
    width: 100%;

    text-align: center;
  }


  .consultation-actions {
    flex-direction: column;

    width: 100%;
  }


  .consultation-btn {
    width: 100%;
  }

}
/* ==========================================
   Articles Page Hero
========================================== */

.articles-page-hero {
  position: relative;

  width: 100%;
  min-height: 360px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    url("../images/articles-hero.png")
    left center / cover no-repeat;
}


/* Blend */

.articles-page-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 24, 42, 0.05) 0%,
      rgba(7, 24, 42, 0.18) 28%,
      rgba(7, 24, 42, 0.70) 58%,
      #07182a 100%
    );

  z-index: 1;
}


/* Extra Overlay */

.articles-page-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(3, 15, 28, 0.08),
      rgba(3, 15, 28, 0.18)
    );

  z-index: 2;
}


/* Container */

.articles-page-hero-container {
  position: relative;

  z-index: 3;

  margin: 0 auto;

  display: flex;
  justify-content: flex-start;

  direction: rtl;
}


/* Content */

.articles-page-hero-content {
  width: 58%;

  text-align: right;

  padding: 55px 0;
}


.articles-page-hero-content h1 {
  color: #ffffff;

  font-size: clamp(42px, 4vw, 66px);

  line-height: 1.25;

  font-weight: 700;

  margin: 0;
}


/* Gold Line */

.articles-page-line {
  width: 90px;
  height: 3px;

  background: #c19b52;

  margin: 20px 0 22px auto;
}


/* Breadcrumb */

.articles-breadcrumb {
  display: flex;

  align-items: center;

  gap: 14px;

  color: #d5dce3;

  font-size: 15px;
}


.articles-breadcrumb a {
  color: #ffffff;

  transition: 0.25s ease;
}


.articles-breadcrumb a:hover {
  color: #c19b52;
}


.articles-breadcrumb i {
  color: #c19b52;

  font-size: 12px;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

  .articles-page-hero {
    min-height: 320px;
  }

  .articles-page-hero-content {
    width: 70%;
  }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 600px) {

  .articles-page-hero {
    min-height: 280px;

    background-position: center;
  }


  .articles-page-hero::before {
    background:
      rgba(7, 24, 42, 0.78);
  }


  .articles-page-hero-container {

    justify-content: center;
  }


  .articles-page-hero-content {
    width: 100%;

    text-align: center;

    padding: 45px 0;
  }


  .articles-page-hero-content h1 {
    font-size: 36px;
  }


  .articles-page-line {
    margin:
      17px auto
      20px;
  }


  .articles-breadcrumb {
    justify-content: center;

    font-size: 13px;
  }

}
/* ==========================================
   Articles Listing Page
========================================== */

.articles-listing-section {
  width: 100%;
  padding: 80px 0 95px;

  background:
    linear-gradient(
      180deg,
      #fcfbf8 0%,
      #f8f6f1 100%
    );
}

.articles-listing-container {
  margin: 0 auto;
}


/* Heading */

.articles-listing-heading {
  max-width: 900px;

  margin: 0 auto 40px;

  text-align: center;
}

.articles-kicker {
  color: #b8944f;

  font-size: 15px;
  font-weight: 600;
}

.articles-listing-heading h2 {
  color: #10233d;

  font-size: clamp(36px, 3vw, 50px);

  margin: 8px 0 0;
}

.articles-heading-line {
  width: 75px;
  height: 2px;

  background: #bd9850;

  margin: 15px auto 18px;
}

.articles-listing-heading p {
  color: #68727d;

  font-size: 17px;
  line-height: 1.9;
}


/* Toolbar */

.articles-toolbar {
  display: grid;

  grid-template-columns:
    1.5fr repeat(3, 0.75fr);

  gap: 15px;

  margin-bottom: 32px;
}


.articles-search {
  position: relative;
}


.articles-search input,
.articles-toolbar select {
  width: 100%;
  height: 54px;

  background: #ffffff;

  border: 1px solid #e3ddd2;

  outline: none;

  padding: 0 18px;

  color: #344457;

  font-family: inherit;

  font-size: 14px;
}


.articles-search input {
  padding-right: 48px;
}


.articles-search i {
  position: absolute;

  right: 18px;
  top: 50%;

  transform: translateY(-50%);

  color: #b8944f;
}


/* Grid */

.articles-page-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 25px;
}


/* Card */

.articles-page-card {
  display: flex;
  flex-direction: column;

  background: #ffffff;

  overflow: hidden;

  min-height: 500px;
}


.articles-page-card:hover {

  box-shadow:
    0 18px 38px
    rgba(15, 34, 56, 0.09);
}


/* Image */

.articles-card-image {
  position: relative;

  height: 220px;

  overflow: hidden;
}


.articles-card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.4s ease;
}


.articles-page-card:hover
.articles-card-image img {
  transform: scale(1.04);
}


.articles-card-category {
  position: absolute;

  top: 15px;
  right: 15px;

  background: #b8944f;

  color: #ffffff;

  padding: 7px 13px;

  font-size: 12px;
  font-weight: 600;
}


/* Body */

.articles-card-body {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 24px;
}


.articles-card-meta {
  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 15px;

  color: #8a929a;

  font-size: 12px;
}


.articles-card-meta span {
  display: flex;

  align-items: center;

  gap: 6px;
}


.articles-card-meta i {
  color: #b8944f;
}


.articles-card-body h3 {
  color: #10233d;

  font-size: 20px;

  line-height: 1.65;

  margin-bottom: 12px;
}


.articles-card-body p {
  color: #68727d;

  font-size: 14px;

  line-height: 1.9;

  margin-bottom: 20px;
}


.articles-card-body > a {
  margin-top: auto;

  color: #a77d39;

  font-size: 14px;
  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  width: fit-content;
}


/* Pagination */

.articles-pagination {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  margin-top: 45px;
}


.articles-pagination button {
  width: 42px;
  height: 42px;

  border: 1px solid #e2ddd3;

  background: #ffffff;

  color: #64707b;

  font-family: inherit;

  cursor: pointer;

  transition: 0.25s ease;
}


.articles-pagination button:hover,
.articles-pagination button.active {
  background: #b8944f;

  border-color: #b8944f;

  color: #ffffff;
}


/* Tablet */

@media (max-width: 992px) {

  .articles-toolbar {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .articles-page-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* Mobile */

@media (max-width: 600px) {

  .articles-listing-section {
    padding: 55px 0;
  }

  .articles-toolbar {
    grid-template-columns: 1fr;
  }

  .articles-page-grid {
    grid-template-columns: 1fr;
  }

  .articles-page-card {
    min-height: auto;
  }

}

/* ==========================================
   Judgments Page Hero
========================================== */

.judgments-page-hero {
  position: relative;

  width: 100%;
  min-height: 360px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    url("../images/judgments-hero.png")
    left center / cover no-repeat;
}


/* Main Blend */

.judgments-page-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 24, 42, 0.04) 0%,
      rgba(7, 24, 42, 0.15) 28%,
      rgba(7, 24, 42, 0.72) 60%,
      #07182a 100%
    );

  z-index: 1;
}


/* Extra Dark Overlay */

.judgments-page-overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  background:
    linear-gradient(
      180deg,
      rgba(3, 15, 28, 0.06),
      rgba(3, 15, 28, 0.17)
    );
}


/* Container */

.judgments-page-hero-container {
  position: relative;

  z-index: 3;

  margin: 0 auto;

  display: flex;
  justify-content: flex-start;

  direction: rtl;
}


/* Content */

.judgments-page-hero-content {
  width: 60%;

  text-align: right;

  padding: 55px 0;
}


.judgments-page-hero-content h1 {
  color: #ffffff;

  font-size: clamp(42px, 4vw, 66px);

  line-height: 1.25;

  font-weight: 700;

  margin: 0;
}


/* Gold Line */

.judgments-page-line {
  width: 90px;
  height: 3px;

  background: #c19b52;

  margin: 20px 0 22px auto;
}


/* Breadcrumb */

.judgments-breadcrumb {
  display: flex;

  align-items: center;

  gap: 14px;

  color: #d5dce3;

  font-size: 15px;
}


.judgments-breadcrumb a {
  color: #ffffff;

  transition: 0.25s ease;
}


.judgments-breadcrumb a:hover {
  color: #c19b52;
}


.judgments-breadcrumb i {
  color: #c19b52;

  font-size: 12px;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

  .judgments-page-hero {
    min-height: 320px;
  }

  .judgments-page-hero-content {
    width: 72%;
  }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 600px) {

  .judgments-page-hero {
    min-height: 280px;

    background-position: center;
  }


  .judgments-page-hero::before {
    background:
      rgba(7, 24, 42, 0.80);
  }


  .judgments-page-hero-container {

    justify-content: center;
  }


  .judgments-page-hero-content {
    width: 100%;

    text-align: center;

    padding: 45px 0;
  }


  .judgments-page-hero-content h1 {
    font-size: 34px;
  }


  .judgments-page-line {
    margin:
      17px auto
      20px;
  }


  .judgments-breadcrumb {
    justify-content: center;

    font-size: 13px;
  }

}
/* ==========================================
   Judgments Listing
========================================== */

.judgments-listing {
  padding: 80px 0 95px;

  background:
    linear-gradient(
      180deg,
      #fcfbf8,
      #f8f6f1
    );
}


.judgments-listing-container {

  margin: 0 auto;
}


/* Heading */

.judgments-listing-heading {
  max-width: 900px;

  margin: 0 auto 40px;

  text-align: center;
}


.judgments-listing-heading > span {
  color: #b8944f;

  font-size: 15px;
  font-weight: 600;
}


.judgments-listing-heading h2 {
  color: #10233d;

  font-size: clamp(36px, 3vw, 50px);

  margin: 8px 0 0;
}


.judgments-heading-line {
  width: 75px;
  height: 2px;

  background: #bd9850;

  margin: 15px auto 18px;
}


.judgments-listing-heading p {
  color: #68727d;

  font-size: 17px;

  line-height: 1.9;
}


/* Toolbar */

.judgments-toolbar {
  display: grid;

  grid-template-columns:
    1.5fr repeat(3, 0.75fr);

  gap: 15px;

  margin-bottom: 32px;
}


.judgments-search {
  position: relative;
}


.judgments-search input,
.judgments-toolbar select {
  width: 100%;
  height: 54px;

  background: #ffffff;

  border: 1px solid #e3ddd2;

  outline: none;

  padding: 0 18px;

  color: #344457;

  font-family: inherit;
}


.judgments-search input {
  padding-right: 48px;
}


.judgments-search i {
  position: absolute;

  right: 18px;
  top: 50%;

  transform: translateY(-50%);

  color: #b8944f;
}


/* Grid */

.judgments-page-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 25px;
}


/* Card */

.judgment-page-card {
  background: #ffffff;

  overflow: hidden;

  min-height: 475px;

  display: flex;
  flex-direction: column;
}


.judgment-page-card:hover {

  box-shadow:
    0 18px 38px
    rgba(15,34,56,0.09);
}


/* Image */

.judgment-card-image {
  position: relative;

  height: 200px;

  overflow: hidden;
}


.judgment-card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;
}


.judgment-page-card:hover
.judgment-card-image img {
  transform: scale(1.04);
}


.judgment-card-image > span {
  position: absolute;

  top: 14px;
  right: 14px;

  background: #b8944f;

  color: #ffffff;

  padding: 7px 13px;

  font-size: 12px;
}


/* Body */

.judgment-card-body {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 22px 24px;
}


.judgment-card-meta {
  display: flex;

  justify-content: space-between;

  gap: 10px;

  color: #7d8790;

  font-size: 12px;

  margin-bottom: 14px;
}


.judgment-card-meta span {
  display: flex;

  align-items: center;

  gap: 6px;
}


.judgment-card-meta i {
  color: #b8944f;
}


.judgment-card-body h3 {
  color: #10233d;

  font-size: 20px;

  line-height: 1.6;

  margin-bottom: 10px;
}


.judgment-card-body p {
  color: #68727d;

  font-size: 14px;

  line-height: 1.9;

  margin-bottom: 18px;
}


.judgment-card-body > a {
  margin-top: auto;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  width: fit-content;

  color: #a77d39;

  font-size: 14px;

  font-weight: 600;
}


/* Pagination */

.judgments-pagination {
  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 45px;
}


.judgments-pagination button {
  width: 42px;
  height: 42px;

  background: #ffffff;

  border: 1px solid #e2ddd3;

  color: #64707b;

  cursor: pointer;
}


.judgments-pagination button.active,
.judgments-pagination button:hover {
  background: #b8944f;

  border-color: #b8944f;

  color: #ffffff;
}


/* Tablet */

@media (max-width: 992px) {

  .judgments-toolbar {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .judgments-page-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* Mobile */

@media (max-width: 600px) {

  .judgments-listing {
    padding: 55px 0;
  }

  .judgments-toolbar {
    grid-template-columns: 1fr;
  }

  .judgments-page-grid {
    grid-template-columns: 1fr;
  }

}
/* ==========================================
   Legislation Page Hero
========================================== */

.legislation-page-hero {
  position: relative;

  width: 100%;
  min-height: 360px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    url("../images/legislation-hero.png")
    left center / cover no-repeat;
}


/* Background Blend */

.legislation-page-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(7, 24, 42, 0.03) 0%,
      rgba(7, 24, 42, 0.18) 30%,
      rgba(7, 24, 42, 0.72) 60%,
      #07182a 100%
    );
}


/* Extra Overlay */

.legislation-page-overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  background:
    linear-gradient(
      180deg,
      rgba(3, 15, 28, 0.05),
      rgba(3, 15, 28, 0.15)
    );
}


/* Container */

.legislation-page-hero-container {
  position: relative;

  z-index: 3;

  margin: 0 auto;

  display: flex;
  justify-content: flex-start;

  direction: rtl;
}


/* Content */

.legislation-page-hero-content {
  width: 60%;

  text-align: right;

  padding: 55px 0;
}


.legislation-page-hero-content h1 {
  color: #ffffff;

  font-size: clamp(42px, 4vw, 66px);

  line-height: 1.25;

  font-weight: 700;

  margin: 0;
}


/* Gold Line */

.legislation-page-line {
  width: 90px;
  height: 3px;

  background: #c19b52;

  margin: 20px 0 22px auto;
}


/* Breadcrumb */

.legislation-breadcrumb {
  display: flex;

  align-items: center;

  gap: 14px;

  color: #d5dce3;

  font-size: 15px;
}


.legislation-breadcrumb a {
  color: #ffffff;

  transition: 0.25s ease;
}


.legislation-breadcrumb a:hover {
  color: #c19b52;
}


.legislation-breadcrumb i {
  color: #c19b52;

  font-size: 12px;
}


/* Tablet */

@media (max-width: 992px) {

  .legislation-page-hero {
    min-height: 320px;
  }

  .legislation-page-hero-content {
    width: 72%;
  }

}


/* Mobile */

@media (max-width: 600px) {

  .legislation-page-hero {
    min-height: 280px;

    background-position: center;
  }


  .legislation-page-hero::before {
    background:
      rgba(7, 24, 42, 0.80);
  }


  .legislation-page-hero-container {

    justify-content: center;
  }


  .legislation-page-hero-content {
    width: 100%;

    text-align: center;

    padding: 45px 0;
  }


  .legislation-page-hero-content h1 {
    font-size: 36px;
  }


  .legislation-page-line {
    margin:
      17px auto
      20px;
  }


  .legislation-breadcrumb {
    justify-content: center;

    font-size: 13px;
  }

}

/* ==========================================
   Legislation Listing
========================================== */

.legislation-listing {
  padding: 80px 0 95px;
  background: linear-gradient(180deg, #fcfbf8, #f8f6f1);
}

.legislation-listing-container {
  margin: 0 auto;
}


/* Heading */

.legislation-listing-heading {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

.legislation-listing-heading > span {
  color: #b8944f;
  font-size: 15px;
  font-weight: 600;
}

.legislation-listing-heading h2 {
  color: #10233d;
  font-size: clamp(36px, 3vw, 50px);
  margin: 8px 0 0;
}

.legislation-heading-line {
  width: 75px;
  height: 2px;
  background: #bd9850;
  margin: 15px auto 18px;
}

.legislation-listing-heading p {
  color: #68727d;
  font-size: 17px;
  line-height: 1.9;
}


/* Toolbar */

.legislation-toolbar {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 0.75fr);
  gap: 15px;
  margin-bottom: 32px;
}

.legislation-search {
  position: relative;
}

.legislation-search input,
.legislation-toolbar select {
  width: 100%;
  height: 54px;
  background: #ffffff;
  border: 1px solid #e3ddd2;
  outline: none;
  padding: 0 18px;
  color: #344457;
  font-family: inherit;
  font-size: 14px;
}

.legislation-search input {
  padding-right: 48px;
}

.legislation-search i {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #b8944f;
}


/* Grid */

.legislation-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}


/* Card */

.legislation-card {
  background: #ffffff;
  overflow: hidden;
  min-height: 475px;
  display: flex;
  flex-direction: column;
}

.legislation-card:hover {
  box-shadow: 0 18px 38px rgba(15,34,56,0.09);
}

.legislation-card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.legislation-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.legislation-card:hover .legislation-card-image img {
  transform: scale(1.04);
}

.legislation-card-image > span {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #b8944f;
  color: #ffffff;
  padding: 7px 13px;
  font-size: 12px;
  border-radius: 3px;
}


/* Body */

.legislation-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  text-align: right;
}

.legislation-card-body h3 {
  color: #10233d;
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.legislation-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #7d8790;
  font-size: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.legislation-meta-row span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legislation-meta-row i {
  color: #b8944f;
}

.legislation-card-body p {
  color: #68727d;
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 18px;
}

.legislation-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.legislation-actions a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a77d39;
  font-size: 14px;
  font-weight: 600;
  transition: 0.25s ease;
}

.legislation-actions a:hover {
  color: #10233d;
}


/* Pagination */

.legislation-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 45px;
}

.legislation-pagination button {
  width: 42px;
  height: 42px;
  background: #ffffff;
  border: 1px solid #e2ddd3;
  color: #64707b;
  cursor: pointer;
  transition: 0.25s ease;
}

.legislation-pagination button.active,
.legislation-pagination button:hover {
  background: #b8944f;
  border-color: #b8944f;
  color: #ffffff;
}


/* Tablet */

@media (max-width: 992px) {

  .legislation-toolbar {
    grid-template-columns: repeat(2, 1fr);
  }

  .legislation-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Mobile */

@media (max-width: 600px) {
  .legislation-listing {
    padding: 55px 0;
  }

  .legislation-toolbar {
    grid-template-columns: 1fr;
  }

  .legislation-page-grid {
    grid-template-columns: 1fr;
  }

  .legislation-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================
   Library Page Hero
========================================== */

.library-page-hero {
  position: relative;

  width: 100%;
  min-height: 360px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    url("../images/library-hero.png")
    left center / cover no-repeat;
}


/* Main Blend */

.library-page-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(7, 24, 42, 0.03) 0%,
      rgba(7, 24, 42, 0.16) 28%,
      rgba(7, 24, 42, 0.70) 58%,
      #07182a 100%
    );
}


/* Extra Overlay */

.library-page-overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  background:
    linear-gradient(
      180deg,
      rgba(3, 15, 28, 0.05),
      rgba(3, 15, 28, 0.16)
    );
}


/* Container */

.library-page-hero-container {
  position: relative;

  z-index: 3;

  margin: 0 auto;

  display: flex;
  justify-content: flex-start;

  direction: rtl;
}


/* Content */

.library-page-hero-content {
  width: 60%;

  text-align: right;

  padding: 55px 0;
}


.library-page-hero-content h1 {
  color: #ffffff;

  font-size: clamp(42px, 4vw, 66px);

  line-height: 1.25;

  font-weight: 700;

  margin: 0;
}


/* Gold Line */

.library-page-line {
  width: 90px;
  height: 3px;

  background: #c19b52;

  margin: 20px 0 22px auto;
}


/* Breadcrumb */

.library-breadcrumb {
  display: flex;

  align-items: center;

  gap: 14px;

  color: #d5dce3;

  font-size: 15px;
}


.library-breadcrumb a {
  color: #ffffff;

  transition: 0.25s ease;
}


.library-breadcrumb a:hover {
  color: #c19b52;
}


.library-breadcrumb i {
  color: #c19b52;

  font-size: 12px;
}


/* Tablet */

@media (max-width: 992px) {

  .library-page-hero {
    min-height: 320px;
  }

  .library-page-hero-content {
    width: 72%;
  }

}


/* Mobile */

@media (max-width: 600px) {

  .library-page-hero {
    min-height: 280px;

    background-position: center;
  }


  .library-page-hero::before {
    background:
      rgba(7, 24, 42, 0.80);
  }


  .library-page-hero-container {

    justify-content: center;
  }


  .library-page-hero-content {
    width: 100%;

    text-align: center;

    padding: 45px 0;
  }


  .library-page-hero-content h1 {
    font-size: 36px;
  }


  .library-page-line {
    margin:
      17px auto
      20px;
  }


  .library-breadcrumb {
    justify-content: center;

    font-size: 13px;
  }

}
/* ==========================================
   Library Categories
========================================== */

.library-categories-section {
  width: 100%;
  padding: 80px 0 95px;

  background:
    linear-gradient(
      180deg,
      #fcfbf8 0%,
      #f8f6f1 100%
    );
}

.library-categories-container {
  margin: 0 auto;
}


/* Heading */

.library-categories-heading {
  max-width: 900px;

  margin: 0 auto 40px;

  text-align: center;
}

.library-categories-heading > span {
  color: #b8944f;

  font-size: 15px;
  font-weight: 600;
}

.library-categories-heading h2 {
  color: #10233d;

  font-size: clamp(36px, 3vw, 50px);

  margin: 8px 0 0;
}

.library-categories-line {
  width: 75px;
  height: 2px;

  background: #bd9850;

  margin: 15px auto 18px;
}

.library-categories-heading p {
  color: #68727d;

  font-size: 17px;
  line-height: 1.9;
}


/* Toolbar */

.library-categories-toolbar {
  display: grid;

  grid-template-columns:
    1.5fr repeat(3, 0.75fr);

  gap: 15px;

  margin-bottom: 32px;
}

.library-category-search {
  position: relative;
}

.library-category-search input,
.library-categories-toolbar select {
  width: 100%;
  height: 54px;

  background: #ffffff;

  border: 1px solid #e3ddd2;

  outline: none;

  padding: 0 18px;

  font-family: inherit;

  color: #344457;
}

.library-category-search input {
  padding-right: 48px;
}

.library-category-search i {
  position: absolute;

  right: 18px;
  top: 50%;

  transform: translateY(-50%);

  color: #b8944f;
}


/* Grid */

.library-category-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 24px;
}


/* Card */

.library-category-card {
  position: relative;

  min-height: 330px;

  background: #ffffff;

  overflow: hidden;
}

.library-category-card:hover {

  box-shadow:
    0 18px 38px
    rgba(15, 34, 56, 0.09);
}


/* Image */

.library-category-image {
  width: 100%;
  height: 155px;

  overflow: hidden;
}

.library-category-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;
}

.library-category-card:hover
.library-category-image img {
  transform: scale(1.05);
}


/* Icon */

.library-category-icon {
  width: 64px;
  height: 64px;

  position: absolute;

  top: 123px;
  right: 50%;

  transform: translateX(50%);

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #ffffff;

  border: 1px solid #e7ded0;

  box-shadow:
    0 8px 22px
    rgba(18, 34, 52, 0.08);

  color: #b8944f;

  font-size: 25px;
}


/* Content */

.library-category-content {
  padding: 43px 20px 22px;

  text-align: center;
}

.library-category-content h3 {
  color: #10233d;

  font-size: 19px;
  font-weight: 700;

  margin-bottom: 9px;
}

.library-category-content > span {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 6px;

  color: #7b858f;

  font-size: 13px;

  margin-bottom: 19px;
}

.library-category-content > span i {
  color: #b8944f;
}

.library-category-content a {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #a77d39;

  font-size: 14px;
  font-weight: 600;
}

.library-category-content a:hover {
  color: #10233d;
}


/* Tablet */

@media (max-width: 1100px) {

  .library-category-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* Mobile */

@media (max-width: 600px) {

  .library-categories-section {
    padding: 55px 0;
  }

  .library-categories-toolbar {
    grid-template-columns: 1fr;
  }

  .library-category-grid {
    grid-template-columns: 1fr;
  }

}
/* ==========================================
   Latest Library Resources
========================================== */

.latest-library-section {
  width: 100%;
  padding: 25px 0 90px;

  background:
    linear-gradient(
      180deg,
      #f8f6f1 0%,
      #fcfbf8 100%
    );
}

.latest-library-container {
  margin: 0 auto;
}


/* Heading */

.latest-library-heading {
  text-align: center;
  margin-bottom: 38px;
}

.latest-library-heading > span {
  display: block;

  color: #b8944f;

  font-size: 15px;
  font-weight: 600;

  margin-bottom: 7px;
}

.latest-library-heading h2 {
  color: #10233d;

  font-size: clamp(34px, 3vw, 48px);

  margin: 0;
}

.latest-library-line {
  width: 75px;
  height: 2px;

  margin: 14px auto 0;

  background: #bd9850;
}


/* Grid */

.latest-library-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 22px;
}


/* Card */

.latest-resource-card {
  background: #ffffff;

  overflow: hidden;

  min-height: 430px;

  display: flex;
  flex-direction: column;
}

.latest-resource-card:hover {

  box-shadow:
    0 18px 38px
    rgba(15, 34, 56, 0.08);
}


/* Image */

.latest-resource-image {
  position: relative;

  height: 185px;

  overflow: hidden;
}

.latest-resource-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.4s ease;
}

.latest-resource-card:hover
.latest-resource-image img {
  transform: scale(1.04);
}


/* Type Label */

.resource-type {
  position: absolute;

  top: 14px;
  right: 14px;

  padding: 7px 13px;

  background: #b8944f;

  color: #ffffff;

  font-size: 12px;
  font-weight: 600;

  border-radius: 3px;
}


/* Content */

.latest-resource-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 22px;
}

.latest-resource-content h3 {
  color: #10233d;

  font-size: 19px;
  line-height: 1.6;

  margin-bottom: 12px;
}


/* Meta */

.resource-meta {
  display: flex;

  justify-content: space-between;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 15px;

  color: #7e8790;

  font-size: 12px;
}

.resource-meta span {
  display: inline-flex;

  align-items: center;

  gap: 6px;
}

.resource-meta i {
  color: #b8944f;
}


/* Description */

.latest-resource-content p {
  color: #68727d;

  font-size: 14px;
  line-height: 1.85;

  margin-bottom: 20px;
}


/* Actions */

.resource-actions {
  margin-top: auto;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.resource-actions a {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: #a77d39;

  font-size: 13px;
  font-weight: 600;

  transition: 0.25s ease;
}

.resource-actions a:hover {
  color: #10233d;
}


/* Pagination */

.latest-library-pagination {
  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 42px;
}

.latest-library-pagination button {
  width: 42px;
  height: 42px;

  background: #ffffff;

  border: 1px solid #e2ddd3;

  color: #64707b;

  cursor: pointer;

  transition: 0.25s ease;
}

.latest-library-pagination button.active,
.latest-library-pagination button:hover {
  background: #b8944f;

  border-color: #b8944f;

  color: #ffffff;
}


/* Tablet */

@media (max-width: 1100px) {

  .latest-library-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* Mobile */

@media (max-width: 600px) {

  .latest-library-section {
    padding: 20px 0 55px;
  }

  .latest-library-grid {
    grid-template-columns: 1fr;
  }

  .latest-resource-card {
    min-height: auto;
  }

  .resource-actions {
    flex-wrap: wrap;
  }

}

/* ==========================================
   Contact Page Hero
========================================== */

.contact-page-hero {
  position: relative;

  width: 100%;
  min-height: 360px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    url("../images/contact-hero.png")
    left center / cover no-repeat;
}


/* Main Blend */

.contact-page-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(7, 24, 42, 0.03) 0%,
      rgba(7, 24, 42, 0.16) 28%,
      rgba(7, 24, 42, 0.72) 58%,
      #07182a 100%
    );
}


/* Extra Overlay */

.contact-page-overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  background:
    linear-gradient(
      180deg,
      rgba(3, 15, 28, 0.05),
      rgba(3, 15, 28, 0.15)
    );
}


/* Container */

.contact-page-hero-container {
  position: relative;

  z-index: 3;

  margin: 0 auto;

  display: flex;
  justify-content: flex-start;

  direction: rtl;
}


/* Content */

.contact-page-hero-content {
  width: 60%;

  text-align: right;

  padding: 55px 0;
}


.contact-page-hero-content h1 {
  color: #ffffff;

  font-size: clamp(42px, 4vw, 66px);

  line-height: 1.25;

  font-weight: 700;

  margin: 0;
}


/* Gold Line */

.contact-page-line {
  width: 90px;
  height: 3px;

  background: #c19b52;

  margin: 20px 0 22px auto;
}


/* Breadcrumb */

.contact-breadcrumb {
  display: flex;

  align-items: center;

  gap: 14px;

  color: #d5dce3;

  font-size: 15px;
}


.contact-breadcrumb a {
  color: #ffffff;

  transition: 0.25s ease;
}


.contact-breadcrumb a:hover {
  color: #c19b52;
}


.contact-breadcrumb i {
  color: #c19b52;

  font-size: 12px;
}


/* Tablet */

@media (max-width: 992px) {

  .contact-page-hero {
    min-height: 320px;
  }

  .contact-page-hero-content {
    width: 72%;
  }

}


/* Mobile */

@media (max-width: 600px) {

  .contact-page-hero {
    min-height: 280px;

    background-position: center;
  }

  .contact-page-hero::before {
    background:
      rgba(7, 24, 42, 0.80);
  }

  .contact-page-hero-container {

    justify-content: center;
  }

  .contact-page-hero-content {
    width: 100%;

    text-align: center;

    padding: 45px 0;
  }

  .contact-page-hero-content h1 {
    font-size: 36px;
  }

  .contact-page-line {
    margin:
      17px auto
      20px;
  }

  .contact-breadcrumb {
    justify-content: center;

    font-size: 13px;
  }

}


/* ==========================================
   Contact Information
========================================== */

.contact-info-section {
  width: 100%;
  padding: 80px 0 90px;

  background:
    linear-gradient(
      180deg,
      #fcfbf8 0%,
      #f9f7f2 100%
    );
}


.contact-info-container {
  margin: 0 auto;
}


/* Heading */

.contact-info-heading {
  max-width: 900px;

  margin: 0 auto 45px;

  text-align: center;
}


.contact-info-heading > span {
  display: block;

  color: #b8944f;

  font-size: 16px;
  font-weight: 600;

  margin-bottom: 9px;
}


.contact-info-heading h2 {
  color: #10233d;

  font-size: clamp(38px, 3.2vw, 54px);

  line-height: 1.3;

  margin: 0;
}


.contact-info-line {
  width: 75px;
  height: 2px;

  background: #bd9850;

  margin: 15px auto 20px;
}


.contact-info-heading p {
  color: #68727d;

  font-size: 17px;

  line-height: 1.9;

  max-width: 760px;

  margin: 0 auto;
}


/* Grid */

.contact-info-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 22px;
}


/* Card */

.contact-info-card {
  min-height: 170px;

  padding: 28px 25px;

  display: flex;

  align-items: flex-start;

  gap: 20px;

  background: #ffffff;

  box-shadow:
    0 6px 20px
    rgba(15, 34, 56, 0.035);
}


.contact-info-card:hover {

  border-color:
    rgba(189, 152, 80, 0.55);
}


/* Icon */

.contact-info-icon {
  width: 58px;
  height: 58px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #c6a15c,
      #ad813b
    );

  color: #ffffff;

  font-size: 24px;
}


/* Content */

.contact-info-content {
  display: flex;

  flex-direction: column;

  gap: 7px;

  text-align: right;
}


.contact-info-content h3 {
  color: #10233d;

  font-size: 19px;

  font-weight: 700;

  margin-bottom: 3px;
}


.contact-info-content p,
.contact-info-content span,
.contact-info-content a {
  color: #6b7681;

  font-size: 14px;

  line-height: 1.75;
}


.contact-info-content a {
  transition: 0.25s ease;
}


.contact-info-content a:hover {
  color: #b8944f;
}


/* Tablet */

@media (max-width: 1000px) {

  .contact-info-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* Mobile */

@media (max-width: 600px) {

  .contact-info-section {
    padding: 55px 0;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  .contact-info-card {
    min-height: 140px;

    padding: 22px;
  }

  .contact-info-icon {
    width: 52px;
    height: 52px;

    font-size: 21px;
  }

}

/* ==========================================
   Contact Form Section
========================================== */

.contact-form-section {
  width: 100%;
  padding: 15px 0 90px;

  background:
    linear-gradient(
      180deg,
      #f9f7f2 0%,
      #fcfbf8 100%
    );
}

.contact-form-container {
  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1.15fr 0.85fr;

  gap: 28px;

  align-items: stretch;

  direction: rtl;
}


/* ==========================================
   Form Box
========================================== */

.contact-form-box {
  background: #ffffff;

  padding: 38px;
}


.contact-form-heading {
  margin-bottom: 30px;
}


.contact-form-heading h2 {
  color: #10233d;

  font-size: 34px;
  font-weight: 700;

  margin-bottom: 8px;
}


.contact-form-heading p {
  color: #75808b;

  font-size: 15px;

  line-height: 1.8;
}


/* ==========================================
   Form
========================================== */

.contact-form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 22px;
}


.contact-field {
  display: flex;

  flex-direction: column;

  gap: 9px;
}


.contact-field label {
  color: #10233d;

  font-size: 14px;
  font-weight: 700;
}


.contact-field label span {
  color: #b14a3f;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;

  border: 1px solid #ded8cf;

  background: #ffffff;

  color: #344457;

  font-family: inherit;

  font-size: 14px;

  outline: none;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.contact-field input,
.contact-field select {
  height: 54px;

  padding: 0 16px;
}


.contact-field textarea {
  resize: vertical;

  min-height: 160px;

  padding: 15px 16px;

  line-height: 1.8;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #a1a8af;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: #b8944f;

  box-shadow:
    0 0 0 3px
    rgba(184, 148, 79, 0.08);
}


/* Message */

.contact-message-field {
  margin-top: 22px;
}


/* ==========================================
   Submit Button
========================================== */

.contact-submit-btn {
  width: 100%;
  min-height: 56px;

  margin-top: 22px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  border: 1px solid #bd9850;

  background:
    linear-gradient(
      90deg,
      #ad813b,
      #c49e55
    );

  color: #ffffff;

  font-family: inherit;

  font-size: 15px;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.contact-submit-btn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 25px
    rgba(174, 132, 63, 0.20);
}


/* ==========================================
   Office Visual
========================================== */

.contact-office-card {
  position: relative;

  min-height: 580px;

  overflow: hidden;

  background: #07182a;
}


.contact-office-card img {
  width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  object-fit: cover;

  display: block;
}


/* dark bottom */

.contact-office-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(5, 20, 35, 0.94) 0%,
      rgba(5, 20, 35, 0.55) 30%,
      transparent 62%
    );
}


/* Quote */

.contact-office-quote {
  position: absolute;

  z-index: 2;

  bottom: 35px;
  right: 35px;
  left: 35px;

  color: #ffffff;

  text-align: right;
}


.contact-office-quote > i {
  color: #c19b52;

  font-size: 42px;

  margin-bottom: 10px;
}


.contact-office-quote p {
  max-width: 420px;

  color: #ffffff;

  font-size: 19px;

  line-height: 1.8;

  font-weight: 500;

  margin: 0;
}


.office-quote-line {
  width: 50px;
  height: 3px;

  background: #c19b52;

  margin-top: 18px;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

  .contact-form-container {

    grid-template-columns: 1fr;
  }


  .contact-office-card {
    min-height: 500px;

    order: 2;
  }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 600px) {

  .contact-form-section {
    padding-bottom: 55px;
  }


  .contact-form-container {

    gap: 20px;
  }


  .contact-form-box {
    padding: 25px 18px;
  }


  .contact-form-heading h2 {
    font-size: 28px;
  }


  .contact-form-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }


  .contact-message-field {
    margin-top: 18px;
  }


  .contact-office-card {
    min-height: 420px;
  }


  .contact-office-quote {
    right: 22px;
    left: 22px;
    bottom: 25px;
  }


  .contact-office-quote p {
    font-size: 16px;
  }

}

/* ==========================================
   Contact Location Section
========================================== */

.contact-location-section {
  width: 100%;

  padding: 20px 0 90px;

  background:
    linear-gradient(
      180deg,
      #fcfbf8 0%,
      #f8f6f1 100%
    );
}


.contact-location-container {

  margin: 0 auto;
}


/* ==========================================
   Map Layout
========================================== */

.contact-location-grid {
  display: grid;

  grid-template-columns:
    0.75fr 1.55fr;

  gap: 28px;

  align-items: stretch;

  direction: rtl;
}


/* ==========================================
   Location Info
========================================== */

.location-info-card {
  min-height: 410px;

  padding: 38px;

  background: #ffffff;

  box-shadow:
    0 6px 20px
    rgba(15, 34, 56, 0.035);
}


.location-info-card h2 {
  color: #10233d;

  font-size: 30px;
  font-weight: 700;

  margin-bottom: 10px;
}


.location-info-card > p {
  color: #75808b;

  font-size: 15px;

  line-height: 1.8;

  margin-bottom: 28px;
}


/* Office Address Box */

.office-location-box {
  display: flex;

  align-items: center;

  gap: 17px;

  min-height: 100px;

  padding: 20px;

  margin-bottom: 22px;

  background:
    linear-gradient(
      135deg,
      #fbf7ef,
      #f7f0e3
    );
}


.office-location-icon {
  width: 52px;
  height: 52px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #b8944f;

  font-size: 28px;
}


.office-location-box > div:last-child {
  display: flex;

  flex-direction: column;

  gap: 7px;
}


.office-location-box strong {
  color: #10233d;

  font-size: 16px;
}


.office-location-box span {
  color: #68727d;

  font-size: 14px;

  line-height: 1.7;
}


/* Map Button */

.open-map-btn {
  width: 100%;

  min-height: 55px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  border: 1px solid #b8944f;

  color: #a77d39;

  background: #ffffff;

  font-size: 14px;
  font-weight: 700;

  transition: 0.25s ease;
}


.open-map-btn:hover {
  background: #b8944f;

  color: #ffffff;
}


/* ==========================================
   Map
========================================== */

.contact-map {
  min-height: 410px;

  overflow: hidden;

  border: 1px solid #e4ddd2;

  background: #eeeeee;
}


.contact-map iframe {
  width: 100%;
  height: 100%;

  min-height: 410px;

  display: block;

  border: 0;
}


/* ==========================================
   Trust Cards
========================================== */

.contact-trust-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 22px;

  margin-top: 28px;
}


.contact-trust-card {
  min-height: 120px;

  display: flex;

  align-items: center;

  gap: 18px;

  padding: 24px 26px;

  background: #ffffff;

  box-shadow:
    0 5px 18px
    rgba(15, 34, 56, 0.025);
}


.contact-trust-card:hover {

  border-color:
    rgba(184, 148, 79, 0.55);
}


.trust-icon {
  width: 58px;
  height: 58px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #b8944f;

  font-size: 29px;
}


.contact-trust-card h3 {
  color: #10233d;

  font-size: 18px;

  margin-bottom: 5px;
}


.contact-trust-card p {
  color: #75808b;

  font-size: 13px;

  line-height: 1.7;

  margin: 0;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {


  .contact-location-grid {
    grid-template-columns: 1fr;
  }


  .location-info-card {
    min-height: auto;
  }


  .contact-map,
  .contact-map iframe {
    min-height: 380px;
  }


  .contact-trust-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 600px) {

  .contact-location-section {
    padding: 15px 0 55px;
  }


  .location-info-card {
    padding: 25px 20px;
  }


  .location-info-card h2 {
    font-size: 26px;
  }


  .contact-map,
  .contact-map iframe {
    min-height: 300px;
  }


  .contact-trust-grid {
    grid-template-columns: 1fr;
  }


  .contact-trust-card {
    min-height: 105px;

    padding: 20px;
  }


  .trust-icon {
    width: 50px;
    height: 50px;

    font-size: 25px;
  }

}
/* Shared finishing rules across the existing eight pages. */
.header-container,
.about-page-hero-container,
.about-lawyer-container,
.career-container,
.footer-container,
.articles-page-hero-container,
.articles-listing-container,
.consultation-cta-container,
.contact-page-hero-container,
.contact-info-container,
.contact-form-container,
.contact-location-container,
.about-container,
.qualifications-container,
.practice-container,
.articles-container,
.judgments-container,
.legislation-container,
.library-search-container,
.contact-container,
.judgments-page-hero-container,
.judgments-listing-container,
.legislation-page-hero-container,
.legislation-listing-container,
.library-page-hero-container,
.library-categories-container,
.latest-library-container,
.practice-page-hero-container,
.practice-areas-container,
.legal-approach-container,
.about-profile-grid { width: min(1450px, calc(100% - var(--gutter) * 2)); margin-inline: auto; min-width: 0; }
.practice-area-card,
.articles-page-card,
.judgment-page-card,
.legislation-card,
.library-category-card,
.latest-resource-card,
.contact-info-card,
.contact-trust-card,
.contact-form-box,
.location-info-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
@media (hover: hover) {
.practice-area-card:hover,
.articles-page-card:hover,
.judgment-page-card:hover,
.legislation-card:hover,
.library-category-card:hover,
.latest-resource-card:hover,
.contact-info-card:hover,
.contact-trust-card:hover,
.contact-form-box:hover,
.location-info-card:hover { transform: translateY(-4px); border-color: rgba(189,152,80,.6); box-shadow: var(--hover-shadow); }
}
[hidden] { display: none !important; }
:is(input, select, textarea) { max-width: 100%; min-width: 0; direction: rtl; }
:is(input[type="search"], select, button) { min-height: 44px; }
:is(p, h1, h2, h3) { overflow-wrap: break-word; }
:is(.articles-toolbar, .judgments-toolbar, .legislation-toolbar, .library-categories-toolbar) > * { min-width: 0; }
:is(.practice-areas-grid, .articles-page-grid, .judgments-page-grid, .legislation-page-grid, .library-category-grid, .latest-library-grid, .contact-info-grid, .contact-trust-grid) { align-items: stretch; }
:is(.articles-page-card, .judgment-page-card, .legislation-card, .latest-resource-card, .practice-area-card) { display: flex; flex-direction: column; }
:is(.articles-card-body, .judgment-card-body, .legislation-card-body, .latest-resource-content, .practice-area-content) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
:is(.articles-card-body, .judgment-card-body, .practice-area-content) > a,
:is(.legislation-actions, .resource-actions) { margin-top: auto; }
:is(.articles-card-image, .judgment-card-image, .legislation-card-image, .latest-resource-image, .practice-area-image, .library-category-image) { flex-shrink: 0; }
:is(.articles-card-image, .judgment-card-image, .legislation-card-image, .latest-resource-image, .practice-area-image, .library-category-image) img { width: 100%; height: 100%; object-fit: cover; }
:is(.practice-areas-heading, .articles-listing-heading, .judgments-listing-heading, .legislation-listing-heading, .library-categories-heading, .latest-library-heading, .contact-info-heading) h2 { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.45; }
:is(.practice-areas-heading, .articles-listing-heading, .judgments-listing-heading, .legislation-listing-heading, .library-categories-heading, .latest-library-heading, .contact-info-heading) > span { color: var(--gold-text); font-size: 15px; font-weight: 600; line-height: 1.6; }
:is(.practice-areas-heading, .articles-listing-heading, .judgments-listing-heading, .legislation-listing-heading, .library-categories-heading, .contact-info-heading) p { line-height: 1.95; }
:is(.practice-heading-line, .articles-heading-line, .judgments-heading-line, .legislation-heading-line, .library-categories-line, .latest-library-line, .contact-info-line) { width: 72px; height: 2px; background: var(--gold); }
:is(.practice-page-hero, .articles-page-hero, .judgments-page-hero, .legislation-page-hero, .library-page-hero, .contact-page-hero) { background-color: var(--deep-navy); }
.missing-image { position: relative; background: linear-gradient(135deg, #f5f0e6, #faf9f6); }
.missing-image-label { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.results-status { color: var(--muted); font-size: 15px; margin-block: 18px; }
.search-results { max-width: 1060px; margin: 24px auto 0; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); padding: 20px; color: #fff; background: rgba(8,26,46,.85); }
.search-results ul { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.search-results a { display: block; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.15); }
.search-results a:hover { color: #e2bf78; }
.form-status { padding: 14px 18px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--ivory); color: var(--muted); line-height: 1.8; }
.form-status.success { background: #edf5ee; color: #36774d; }
button:disabled { opacity: .45; cursor: not-allowed; }
a[aria-disabled="true"] { cursor: not-allowed; }
:is(.articles-page-card, .judgment-page-card, .legislation-card, .latest-resource-card, .latest-library-section) { scroll-margin-top: 110px; }
@media (max-width: 1250px) {
  /* Expanded navigation stays in flow instead of covering the page. */
  .header-container { flex-wrap: wrap; padding-block: 10px; }
  .main-nav { order: 4; position: static; flex: 0 0 100%; display: none; box-shadow: none; transform: none; max-height: min(65dvh, 460px); }
  .main-nav.active { display: flex; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .articles-page-grid, .judgments-page-grid, .legislation-page-grid, .latest-library-grid, .library-category-grid, .contact-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .articles-toolbar, .judgments-toolbar, .legislation-toolbar, .library-categories-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .articles-search, .judgments-search, .legislation-search, .library-category-search { grid-column: 1 / -1; }
  .contact-form-container, .contact-location-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px) {
  .articles-page-grid, .judgments-page-grid, .legislation-page-grid, .latest-library-grid, .library-category-grid, .contact-info-grid, .contact-trust-grid { grid-template-columns: minmax(0,1fr); }
  .articles-toolbar, .judgments-toolbar, .legislation-toolbar, .library-categories-toolbar { grid-template-columns: minmax(0,1fr); }
  .contact-form-box { padding: 22px 18px; }
  .contact-form-grid { grid-template-columns: minmax(0,1fr); }
  :is(.practice-page-hero, .articles-page-hero, .judgments-page-hero, .legislation-page-hero, .library-page-hero, .contact-page-hero) { min-height: 260px; }
  :is(.practice-page-hero-content, .articles-page-hero-content, .judgments-page-hero-content, .legislation-page-hero-content, .library-page-hero-content, .contact-page-hero-content) { width: 100%; padding-block: 40px; }
  :is(.practice-page-hero-content, .articles-page-hero-content, .judgments-page-hero-content, .legislation-page-hero-content, .library-page-hero-content, .contact-page-hero-content) h1 { font-size: 32px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
:is(.about-page-hero-content, .practice-page-hero-content, .articles-page-hero-content, .judgments-page-hero-content, .legislation-page-hero-content, .library-page-hero-content, .contact-page-hero-content) { text-align: right; }
:is(.about-breadcrumb, .practice-breadcrumb, .articles-breadcrumb, .judgments-breadcrumb, .legislation-breadcrumb, .library-breadcrumb, .contact-breadcrumb) { justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 600px) {
  :is(.about-page-line, .practice-page-line, .articles-page-line, .judgments-page-line, .legislation-page-line, .library-page-line, .contact-page-line) { margin-inline: 0 auto; }
}