/* ==========================================================================
   VQT Official Design System & Pattern Library Stylesheet
   Brand Identity Guidelines — Edition 01 (October 2026)
   Tagline: "TRUST AT EACH BYTE" / "ثقة في كل بايت"
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ------------------------------------------------------------------------
     1. OFFICIAL BRAND COLOURS (Page 05 — Colour Guidelines)
     Balance on a typical page:
     White & Mist 70% | Navy 12% | Blue Deep 8% | Blue 5% | Silver 3% | Red 2%
     ------------------------------------------------------------------------ */

  /* Primary · From the Logo */
  --vq-blue:            #2295BA; /* RGB 34 149 186 | Brand colour: icons, links, highlights, 6px eyebrow dot */
  --vq-red:             #DC3331; /* RGB 220 51 49  | Signal: main action (ONE per view, never a background) */
  --vq-silver:          #A9ADB1; /* RGB 169 173 177| Logo V-stroke & quiet details (index 01, 02, slashes) */

  /* Supporting · Interface and Print */
  --vq-navy:            #0B2A3A; /* Headings, footer, active tab, dark cards (14.9:1 AAA with White) */
  --vq-blue-deep:       #17708C; /* Links, form actions, eyebrow text, active nav (5.6:1 AA with White) */
  --vq-graphite:        #1F2A33; /* Default body text */
  --vq-slate:           #5B6773; /* Secondary text, captions, topbar text, placeholders */
  --vq-mist:            #F5F8FA; /* Alternating section background, topbar, tabbar, tag chips */
  --vq-line:            #E2E8ED; /* 1px borders, dividers (Cards have 1px #E2E8ED and NO shadow) */

  /* Extended Interface Surfaces & Borders (from Live Website) */
  --vq-white:           #FFFFFF; /* Primary page & card surface */
  --vq-tint:            #EAF4F8; /* 52x52 icon boxes & 48x48 icon circles */
  --vq-highlight:       #F3F9FB; /* Highlighted card surface ("Trust at each byte") */
  --vq-border-tint:     #CFE6EE; /* Highlighted card border & "SOON" badge border */
  --vq-border-mid:      #DCE5EB; /* Certificate verification card border, ISO stamp inner ring */
  --vq-border-control:  #D5DEE5; /* Topbar circular icon buttons */
  --vq-border-input:    #C7D3DB; /* Form inputs default border & footer body text */
  --vq-navy-line:       #1E4357; /* 1px dividers on dark Navy footer/cards */
  --vq-navy-label:      #9FB3C1; /* Mono uppercase labels & icons on dark Navy footer */
  --vq-red-hover:       #C42826; /* Hover state for VQT Red signal button */

  /* Legacy/Semantic Aliases */
  --vq-teal:            var(--vq-blue-deep);
  --vq-cyan:            var(--vq-blue);
  --vq-text-primary:    var(--vq-graphite);
  --vq-text-heading:    var(--vq-navy);
  --vq-text-muted:      var(--vq-slate);
  --vq-text-subtle:     var(--vq-silver);
  --vq-bg-white:        var(--vq-white);
  --vq-bg-subtle:       var(--vq-mist);
  --vq-border-light:    var(--vq-line);

  /* ------------------------------------------------------------------------
     2. OFFICIAL TYPOGRAPHY (Page 06 — Typography Guidelines)
     "One family in three cuts, so English, Arabic and codes always sit together."
     - English: IBM Plex Sans (Light 300, Regular 400, Medium 500, SemiBold 600)
     - Arabic:  IBM Plex Sans Arabic (Light 300, Regular 400, Medium 500, SemiBold 600)
     - Codes:   IBM Plex Mono (Regular 400, Medium 500)
     - Tagline: Poppins Medium (ONLY inside the logo SVG, nowhere else!)
     ------------------------------------------------------------------------ */
  --vq-font-sans:       'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Segoe UI', Helvetica, sans-serif;
  --vq-font-arabic:     'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  --vq-font-mono:       'IBM Plex Mono', Menlo, Consolas, monospace;

  /* Type Scale (Fluid + Official Specs: Display 58/62, H2 40/46, H3 22/28, Lead 18/30, Body 15-16/24, Caption 13/20, Label 12/16) */
  --vq-fs-display:      clamp(2.25rem, 4.2vw, 3.625rem); /* 36px -> 58px (lh: 62px / 1.07, weight: 500) */
  --vq-fs-h1-inner:     clamp(2.25rem, 4.2vw, 3.5rem);   /* 36px -> 56px (lh: 1.08, weight: 500) */
  --vq-fs-h2:           clamp(1.75rem, 3vw, 2.5rem);     /* 28px -> 40px (lh: 46px / 1.15, weight: 500) */
  --vq-fs-h2-compact:   clamp(1.625rem, 2.6vw, 2.125rem);/* 26px -> 34px (lh: 1.20, weight: 500) */
  --vq-fs-h3-code:      clamp(1.375rem, 2.2vw, 1.75rem); /* 22px -> 28px (lh: 1.22, weight: 500) */
  --vq-fs-h3:           1.375rem;                        /* 22px (lh: 28px / 1.25, weight: 600) */
  --vq-fs-card-title:   1.3125rem;                       /* 21px (lh: 1.25, weight: 600) */
  --vq-fs-iso-title:    1.25rem;                         /* 20px (lh: 1.25, weight: 600) */
  --vq-fs-lead:         1.125rem;                        /* 18px (lh: 30px / 1.65, weight: 400) */
  --vq-fs-body:         1rem;                            /* 16px (lh: 1.65-1.7, weight: 400) */
  --vq-fs-ui:           0.9375rem;                       /* 15px (lh: 24px / 1.5, weight: 400/500/600) */
  --vq-fs-sm:           0.875rem;                        /* 14px (lh: 1.5) */
  --vq-fs-caption:      0.8125rem;                       /* 13px (lh: 20px / 1.45, weight: 400) */
  --vq-fs-label:        0.75rem;                         /* 12px Mono (lh: 16px, weight: 500, +0.14em) */
  --vq-fs-mono-sm:      0.6875rem;                       /* 11px Mono */
  --vq-fs-mono-xs:      0.65625rem;                      /* 10.5px Mono */

  /* ------------------------------------------------------------------------
     3. INTERFACE GEOMETRY & LAYOUT (Page 07 — Interface Guidelines)
     - Container: 1200 px · 32 px sides (1320 px for Header/Topbar)
     - Sections:  96 px vertical · 64 px on phone
     - Radius:    6 px controls · 12 px cards
     - Lines:     1 px #E2E8ED
     - Icons:     1.8 px stroke · round ends
     - Shadows:   ONLY for floating menus/captions; NEVER on standard cards
     ------------------------------------------------------------------------ */
  --vq-container:       1200px;
  --vq-container-wide:  1320px;
  --vq-gutter:          32px;
  --vq-gutter-mobile:   20px;

  --vq-sec-py:          96px;
  --vq-sec-py-compact:  72px;
  --vq-sec-py-mobile:   64px;

  --vq-radius-badge:    4px;
  --vq-radius-control:  6px;
  --vq-radius-thumb:    8px;
  --vq-radius-float:    10px;
  --vq-radius-card:     12px;
  --vq-radius-pill:     9999px;

  --vq-shadow-float:    0 16px 40px rgba(11, 42, 58, 0.08);
  --vq-shadow-menu:     0 16px 40px rgba(11, 42, 58, 0.12);
  --vq-shadow-drawer:   0 28px 48px rgba(11, 42, 58, 0.14);
  --vq-focus-ring:      0 0 0 3px rgba(34, 149, 186, 0.15);

  --vq-ease:            0.2s ease;
}

/* ==========================================================================
   BASE & RTL / ARABIC SUPPORT
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--vq-white);
  color: var(--vq-graphite);
  font-family: var(--vq-font-sans);
  font-size: var(--vq-fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[dir="rtl"],
:lang(ar) {
  font-family: var(--vq-font-arabic);
}

a {
  color: var(--vq-blue-deep);
  text-decoration: none;
  transition: color var(--vq-ease);
}

a:hover {
  color: var(--vq-navy);
}

a:not([href]) {
  cursor: default;
}

input::placeholder,
textarea::placeholder {
  color: var(--vq-slate);
}

/* ==========================================================================
   CONTAINERS & SECTIONS
   ========================================================================== */
.vq-wrap {
  max-width: var(--vq-container);
  margin: 0 auto;
  padding-left: var(--vq-gutter);
  padding-right: var(--vq-gutter);
}

.vq-wrap--wide {
  max-width: var(--vq-container-wide);
}

.vq-sec {
  padding-top: var(--vq-sec-py);
  padding-bottom: var(--vq-sec-py);
}

.vq-sec--compact {
  padding-top: var(--vq-sec-py-compact);
  padding-bottom: var(--vq-sec-py-compact);
}

.vq-sec--mist {
  background-color: var(--vq-mist);
}

.vq-sec--white {
  background-color: var(--vq-white);
}

.vq-sec--navy {
  background-color: var(--vq-navy);
  color: var(--vq-border-input);
}

/* Section Header Pattern */
.vq-sec-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.vq-sec-head__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 620px;
}

/* ==========================================================================
   TYPOGRAPHY & LABELS
   ========================================================================== */
.vq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vq-font-mono);
  font-size: var(--vq-fs-label);
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-blue-deep);
}

.vq-eyebrow__dot {
  width: 6px;
  height: 6px;
  background-color: var(--vq-blue);
  flex-shrink: 0;
}

.vq-display {
  margin: 0;
  font-size: var(--vq-fs-display);
  line-height: 1.07;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--vq-navy);
  text-wrap: balance;
}

.vq-display__accent {
  color: var(--vq-blue-deep);
}

.vq-h2 {
  margin: 0;
  font-size: var(--vq-fs-h2);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--vq-navy);
  text-wrap: balance;
}

.vq-h3 {
  margin: 0;
  font-size: var(--vq-fs-h3);
  line-height: 1.25;
  font-weight: 600;
  color: var(--vq-navy);
}

.vq-lead {
  margin: 0;
  font-size: var(--vq-fs-lead);
  line-height: 1.65;
  font-weight: 400;
  color: var(--vq-slate);
  text-wrap: pretty;
}

.vq-index {
  font-family: var(--vq-font-mono);
  font-size: var(--vq-fs-caption);
  color: var(--vq-silver);
}

.vq-callout {
  margin: 0;
  padding-inline-start: 18px;
  border-inline-start: 2px solid var(--vq-blue);
  font-size: var(--vq-fs-lead);
  line-height: 1.55;
  font-weight: 500;
  color: var(--vq-navy);
}

.vq-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vq-font-mono);
  font-size: var(--vq-fs-label);
  letter-spacing: 0.08em;
  color: var(--vq-slate);
}
.vq-breadcrumb a { color: var(--vq-slate); }
.vq-breadcrumb a:hover { color: var(--vq-blue-deep); }
.vq-breadcrumb__sep { color: var(--vq-silver); }
.vq-breadcrumb__current { color: var(--vq-navy); }

/* ==========================================================================
   BUTTONS & ACTIONS (Page 07 — 4 Official Button Types)
   Rule: "Red is the signal: one main action per view, never a background."
   ========================================================================== */
.vq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border-radius: var(--vq-radius-control);
  font-family: inherit;
  font-size: var(--vq-fs-ui);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--vq-ease), border-color var(--vq-ease), color var(--vq-ease);
}

/* 1. Primary Signal Action (VQT Red — ONE per view) */
.vq-btn--primary {
  background-color: var(--vq-red);
  color: var(--vq-white);
}
.vq-btn--primary:hover {
  background-color: var(--vq-red-hover);
  color: var(--vq-white);
}

/* 2. Secondary Action (White surface, 1px Navy border) */
.vq-btn--secondary {
  background-color: var(--vq-white);
  border-color: var(--vq-navy);
  color: var(--vq-navy);
  font-weight: 500;
  padding: 0 22px;
}
.vq-btn--secondary:hover {
  border-color: var(--vq-blue-deep);
  color: var(--vq-blue-deep);
}

/* 3. Form Action (Blue Deep #17708C) */
.vq-btn--form {
  background-color: var(--vq-blue-deep);
  color: var(--vq-white);
  padding: 0 28px;
}
.vq-btn--form:hover {
  background-color: var(--vq-navy);
  color: var(--vq-white);
}

/* Header CTA height modifier */
.vq-btn--header {
  height: 46px;
  padding: 0 24px;
}

/* 4. Text Link Action */
.vq-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--vq-fs-ui);
  font-weight: 600;
  color: var(--vq-blue-deep);
  text-decoration: none;
}
.vq-text-link:hover {
  color: var(--vq-navy);
}

/* Topbar Circular Icon Button */
.vq-ic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--vq-border-control);
  border-radius: var(--vq-radius-pill);
  background: var(--vq-white);
  transition: border-color var(--vq-ease), background var(--vq-ease);
}
.vq-ic-btn:hover {
  border-color: var(--vq-blue-deep) !important;
}

/* Badges & Tag Chips */
.vq-badge {
  display: inline-block;
  font-family: var(--vq-font-mono);
  font-size: var(--vq-fs-mono-xs);
  line-height: 1.2;
  color: var(--vq-slate);
  border: 1px solid var(--vq-line);
  border-radius: var(--vq-radius-badge);
  padding: 1px 5px;
}
.vq-badge--soon {
  color: var(--vq-blue-deep);
  border-color: var(--vq-border-tint);
}

.vq-chip {
  display: inline-block;
  font-family: var(--vq-font-mono);
  font-size: var(--vq-fs-label);
  color: var(--vq-navy);
  background: var(--vq-mist);
  border: 1px solid var(--vq-line);
  border-radius: var(--vq-radius-control);
  padding: 5px 9px;
}

/* ==========================================================================
   CARDS & INTERFACE PATTERNS (Page 07)
   Rule: "Cards are white with a 1 px line and no shadow."
   ========================================================================== */
.vq-card {
  padding: 28px;
  background: var(--vq-white);
  border: 1px solid var(--vq-line);
  border-radius: var(--vq-radius-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vq-card--highlight {
  background: var(--vq-highlight);
  border-color: var(--vq-border-tint);
}

.vq-card--mist {
  background: var(--vq-mist);
  border: none;
}

.vq-card--navy {
  background: var(--vq-navy);
  border-color: var(--vq-navy);
  color: var(--vq-white);
}

.vq-act {
  transition: border-color var(--vq-ease), transform var(--vq-ease);
}
.vq-act:hover {
  border-color: var(--vq-blue-deep) !important;
}

/* Icon Containers */
.vq-icon-sq {
  width: 52px;
  height: 52px;
  border-radius: var(--vq-radius-card);
  background: var(--vq-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vq-icon-rd {
  width: 48px;
  height: 48px;
  border-radius: var(--vq-radius-pill);
  background: var(--vq-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Stat Block */
.vq-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 2px solid var(--vq-navy);
}
.vq-stat__num {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--vq-navy);
}
.vq-stat__desc {
  font-size: var(--vq-fs-caption);
  line-height: 1.45;
  color: var(--vq-slate);
}

/* Byte Matrix Decorative Motif (from Cover & Our Code 03) */
.vq-byte-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: 52px;
}
.vq-byte-grid span {
  height: 10px;
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */
.vq-in {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--vq-border-input);
  border-radius: var(--vq-radius-control);
  background: var(--vq-white);
  font-family: inherit;
  font-size: var(--vq-fs-ui);
  color: var(--vq-navy);
  outline: none;
  transition: border-color var(--vq-ease), box-shadow var(--vq-ease);
}

.vq-in:focus {
  border-color: var(--vq-blue-deep);
  box-shadow: var(--vq-focus-ring);
}

textarea.vq-in {
  height: 150px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}

select.vq-in {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%235B6773' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

[dir="rtl"] select.vq-in {
  background-position: left 14px center;
  padding-right: 14px;
  padding-left: 38px;
}

/* ==========================================================================
   INTERACTIVE UTILITIES (Dropdowns, Burger, Tabs, Marquee, Gallery)
   ========================================================================== */
.vq-dd { display: none; }
.vq-item:hover > .vq-dd,
.vq-item:focus-within > .vq-dd { display: flex; }
.vq-dd a:hover { background: var(--vq-mist); color: var(--vq-navy); }

.vq-burger { display: none; }
.vq-burger > summary, .vq-acc > summary { list-style: none; cursor: pointer; }
.vq-burger > summary::-webkit-details-marker, .vq-acc > summary::-webkit-details-marker { display: none; }
.vq-burger .vq-ic-close { display: none; }
.vq-burger[open] .vq-ic-open { display: none; }
.vq-burger[open] .vq-ic-close { display: block; }
.vq-burger[open] > summary { background: var(--vq-mist); }

.vq-acc > summary svg { transition: transform var(--vq-ease); }
.vq-acc[open] > summary svg { transform: rotate(180deg); }
.vq-acc[open] > summary { color: var(--vq-blue-deep); }
.vq-drawer a:hover { color: var(--vq-blue-deep); }

.vq-lg img {
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--vq-ease), opacity var(--vq-ease);
}
.vq-lg:hover img {
  filter: none;
  opacity: 1;
}

@keyframes vq-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); }
}
.vq-track { animation: vq-marquee 45s linear infinite; }
.vq-track-r { animation-direction: reverse; }
.vq-marquee:hover .vq-track { animation-play-state: paused; }

.vq-g img { transition: transform 0.5s ease; }
.vq-g:hover img { transform: scale(1.04); }

.vq-tab-in { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.vq-panel { display: none; }
#vq-iso-ias:checked ~ .vq-panel-ias,
#vq-iso-egac:checked ~ .vq-panel-egac { display: grid; }
.vq-tab { color: var(--vq-slate); transition: background var(--vq-ease), color var(--vq-ease); }
.vq-tab:hover { color: var(--vq-navy); }
#vq-iso-ias:checked ~ div .vq-tab-vq-iso-ias,
#vq-iso-egac:checked ~ div .vq-tab-vq-iso-egac { background: var(--vq-navy); color: var(--vq-white); }
#vq-iso-ias:focus-visible ~ div .vq-tab-vq-iso-ias,
#vq-iso-egac:focus-visible ~ div .vq-tab-vq-iso-egac { outline: 2px solid var(--vq-blue); outline-offset: 2px; }

.vq-soc a { opacity: 0.82; transition: opacity var(--vq-ease); }
.vq-soc a:hover { opacity: 1; }
.vq-dup { display: none !important; }

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@keyframes vq-marquee2 {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 1340px) {
  .vq-mainnav { gap: 0 22px !important; }
  .vq-mainnav > .vq-item > a { font-size: 14.5px !important; }
}
@media (max-width: 1260px) {
  .vq-addr { display: none !important; }
}
@media (max-width: 1220px) {
  .vq-mainnav { gap: 0 16px !important; }
  .vq-mainnav > .vq-item > a { font-size: 14px !important; }
}
@media (max-width: 1140px) {
  .vq-toplinks, .vq-mainnav { display: none !important; }
  .vq-burger { display: block; }
}
@media (max-width: 1100px) {
  .vq-panel-ias { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1000px) {
  .vq-contact-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 999px) {
  .vq-ev-img { flex: none !important; min-height: 0 !important; aspect-ratio: 3/2; }
}
@media (max-width: 903px) {
  .vq-rec-main { flex: none !important; min-height: 0 !important; aspect-ratio: 3/2; }
}
@media (max-width: 860px) {
  .vq-panel-ias, .vq-panel-egac { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vq-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 170px !important; gap: 12px !important; }
  .vq-gallery .vq-g { grid-row: auto !important; }
  .vq-gallery .vq-g-wide { grid-column: span 2 !important; }
  .vq-g-cap { font-size: 9px !important; letter-spacing: 0.06em !important; left: 8px !important; bottom: 8px !important; padding: 5px 7px !important; }
}
@media (max-width: 720px) {
  .vq-strip-row { grid-template-columns: 1fr !important; }
  .vq-vp { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
  .vq-dup { display: block !important; }
  .vq-strip-logos { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0 !important; width: max-content; animation: vq-marquee2 26s linear infinite; }
  .vq-strip-logos > a { margin-right: 36px; flex-shrink: 0; }
  .vq-strip-p { animation-direction: reverse; }
  .vq-acc-grid { display: flex !important; gap: 0 !important; width: max-content; animation: vq-marquee2 30s linear infinite; }
  .vq-acc-grid > a { width: 168px; margin-right: 14px; flex-shrink: 0; }
  .vq-acc-grid > a.vq-dup { display: flex !important; }
  .vq-tb { font-size: 12px !important; gap: 6px !important; }
  .vq-tb .vq-ic-btn { width: 24px !important; height: 24px !important; }
  .vq-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .vq-sec { padding-top: 64px !important; padding-bottom: 64px !important; }
  .vq-hero { padding-top: 40px !important; }
  .vq-logo { width: 76px !important; height: 48px !important; }
  .vq-logo-link { padding: 12px 0 !important; }
  .vq-cta-h { height: 40px !important; padding: 0 16px !important; font-size: 14px !important; }
  .vq-burger-btn { width: 40px !important; height: 40px !important; }
  .vq-story-img { height: 420px !important; }
  .vq-pad { padding: 24px !important; }
  .vq-fcols { gap: 32px 24px !important; }
  .vq-fcol { min-width: min(140px, 100%) !important; }
  .vq-code { min-height: 0 !important; }
}
@media (max-width: 560px) {
  .vq-hero-btn { min-width: 0 !important; flex: 1 1 0; padding: 0 12px !important; }
  .vq-hero-btn:last-child { flex-grow: 1.5; }
  .vq-hero-media { padding-bottom: 64px !important; }
  .vq-hero-cap { width: 54% !important; padding: 12px 14px !important; }
  .vq-hero-cap > span:last-child { font-size: 13px !important; }
  .vq-ev-card { padding: 4px 16px !important; }
  .vq-ev-thumb { width: 80px !important; height: 60px !important; }
  .vq-read { display: none !important; }
  .vq-ev-title { font-size: 16px !important; }
  .vq-stats { grid-template-columns: 1fr !important; gap: 16px !important; }
  .vq-stat { flex-direction: row !important; align-items: baseline; gap: 16px !important; }
  .vq-stat > span:first-child { flex: 0 0 140px; font-size: 26px !important; white-space: nowrap; }
  .vq-search-btn { flex: 1 1 100% !important; }
  .vq-form-grid { grid-template-columns: 1fr !important; }
  .vq-panel-ias, .vq-panel-egac { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .vq-tabbar { width: 100%; }
  .vq-tab { flex: 1 1 0; justify-content: center; }
  .vq-iso-card { padding: 16px !important; gap: 12px !important; }
  .vq-iso-card svg { width: 46px; height: 46px; }
  .vq-iso-card .vq-iso-t { font-size: 16px !important; white-space: normal !important; }
  .vq-iso-card .vq-iso-n { font-size: 9.5px !important; min-height: 42px !important; }
  .vq-iso-card .vq-iso-more { display: none; }
  .vq-iso-card .vq-iso-idx { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .vq-track, .vq-strip-logos, .vq-acc-grid { animation: none !important; }
}


/* ==========================================================================
   15. EXACT STATIC PAGE UTILITY & RESPONSIVE RULES (index / about / contact)
   ========================================================================== */

/* --- From index.html --- */
body{margin:0;background:#FFFFFF}
a{color:#17708C}a:hover{color:#0B2A3A}
input::placeholder{color:#5B6773}
.vq-dd{display:none}
.vq-item:hover>.vq-dd,.vq-item:focus-within>.vq-dd{display:flex}
.vq-dd a:hover{background:#F5F8FA;color:#0B2A3A}
.vq-burger{display:none}
.vq-burger>summary,.vq-acc>summary{list-style:none;cursor:pointer}
.vq-burger>summary::-webkit-details-marker,.vq-acc>summary::-webkit-details-marker{display:none}
.vq-burger .vq-ic-close{display:none}
.vq-burger[open] .vq-ic-open{display:none}
.vq-burger[open] .vq-ic-close{display:block}
.vq-burger[open]>summary{background:#F5F8FA}
.vq-acc>summary svg{transition:transform .2s ease}
.vq-acc[open]>summary svg{transform:rotate(180deg)}
.vq-acc[open]>summary{color:#17708C}
.vq-drawer a:hover{color:#17708C}
.vq-lg img{filter:grayscale(1);opacity:.62;transition:filter .2s ease,opacity .2s ease}.vq-lg:hover img{filter:none;opacity:1}
@keyframes vq-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}
.vq-track{animation:vq-marquee 45s linear infinite}.vq-marquee:hover .vq-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.vq-track{animation:none}}
.vq-btn-ic{flex-shrink:0}
.vq-tab-in{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.vq-panel{display:none}
#vq-iso-ias:checked~.vq-panel-ias,#vq-iso-egac:checked~.vq-panel-egac{display:grid}
.vq-tab{color:#5B6773;transition:background .2s ease,color .2s ease}.vq-tab:hover{color:#0B2A3A}
#vq-iso-ias:checked~div .vq-tab-vq-iso-ias,#vq-iso-egac:checked~div .vq-tab-vq-iso-egac{background:#0B2A3A;color:#FFFFFF}
#vq-iso-ias:focus-visible~div .vq-tab-vq-iso-ias,#vq-iso-egac:focus-visible~div .vq-tab-vq-iso-egac{outline:2px solid #2295BA;outline-offset:2px}
@media (max-width:1100px){.vq-panel-ias{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media (max-width:860px){.vq-panel-ias,.vq-panel-egac{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:560px){.vq-panel-ias,.vq-panel-egac{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}.vq-tabbar{width:100%}.vq-tab{flex:1 1 0;justify-content:center}.vq-iso-card{padding:16px !important;gap:12px !important}.vq-iso-card svg{width:46px;height:46px}.vq-iso-card .vq-iso-t{font-size:16px !important;white-space:normal !important}.vq-iso-card .vq-iso-n{font-size:9.5px !important;min-height:42px !important}.vq-iso-card .vq-iso-more{display:none}.vq-iso-card .vq-iso-idx{font-size:16px !important}}
.vq-ic-btn{transition:border-color .2s ease,background .2s ease}.vq-ic-btn:hover{border-color:#17708C !important}
.vq-soc a{opacity:.82;transition:opacity .2s ease}.vq-soc a:hover{opacity:1}

.vq-track-r{animation-direction:reverse}
.vq-dup{display:none !important}
.vq-ctam{display:none !important}
@keyframes vq-marquee2{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:720px){
.vq-strip-row{grid-template-columns:1fr !important}
.vq-vp{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
.vq-dup{display:block !important}
.vq-strip-logos{display:flex !important;flex-wrap:nowrap !important;justify-content:flex-start !important;gap:0 !important;width:max-content;animation:vq-marquee2 26s linear infinite}
.vq-strip-logos>a{margin-right:36px;flex-shrink:0}
.vq-strip-p{animation-direction:reverse}
.vq-acc-grid{display:flex !important;gap:0 !important;width:max-content;animation:vq-marquee2 30s linear infinite}
.vq-acc-grid>a{width:168px;margin-right:14px;flex-shrink:0}.vq-acc-grid>a.vq-dup{display:flex !important}
.vq-tb{font-size:12px !important;gap:6px !important}
.vq-tb .vq-ic-btn{width:24px !important;height:24px !important}
}
@media (prefers-reduced-motion:reduce){.vq-strip-logos,.vq-acc-grid{animation:none !important}}
@media (max-width:560px){.vq-hero-btn{min-width:0 !important;flex:1 1 0;padding:0 12px !important}.vq-hero-btn:last-child{flex-grow:1.5}}
@media (max-width:1340px){.vq-mainnav{gap:0 22px !important}.vq-mainnav>.vq-item>a{font-size:14.5px !important}}
@media (max-width:1220px){.vq-mainnav{gap:0 16px !important}.vq-mainnav>.vq-item>a{font-size:14px !important}}
@media (max-width:1260px){.vq-addr{display:none !important}}
@media (max-width:1140px){.vq-toplinks,.vq-mainnav{display:none !important}.vq-burger{display:block}}
@media (max-width:999px){.vq-ev-img{flex:none !important;min-height:0 !important;aspect-ratio:3/2}}
@media (max-width:903px){.vq-rec-main{flex:none !important;min-height:0 !important;aspect-ratio:3/2}}
@media (max-width:720px){
.vq-addr{display:none !important}
.vq-wrap{padding-left:20px !important;padding-right:20px !important}
.vq-sec{padding-top:64px !important;padding-bottom:64px !important}
.vq-hero{padding-top:40px !important}
.vq-logo{width:76px !important;height:48px !important}
.vq-logo-link{padding:12px 0 !important}
.vq-cta-h{height:40px !important;padding:0 16px !important;font-size:14px !important}
.vq-burger-btn{width:40px !important;height:40px !important}
.vq-story-img{height:420px !important}
.vq-pad{padding:24px !important}
.vq-fcols{gap:32px 24px !important}
.vq-fcol{min-width:min(140px,100%) !important}
.vq-code{min-height:0 !important}
}
@media (max-width:560px){
.vq-hero-media{padding-bottom:64px !important}
.vq-hero-cap{width:54% !important;padding:12px 14px !important}
.vq-hero-cap>span:last-child{font-size:13px !important}
.vq-ev-card{padding:4px 16px !important}
.vq-ev-thumb{width:80px !important;height:60px !important}
.vq-read{display:none !important}
.vq-ev-title{font-size:16px !important}
.vq-stats{grid-template-columns:1fr !important;gap:16px !important}
.vq-stat{flex-direction:row !important;align-items:baseline;gap:16px !important}
.vq-stat>span:first-child{flex:0 0 140px;font-size:26px !important;white-space:nowrap}
.vq-search-btn{flex:1 1 100% !important}
}

a:not([href]){cursor:default}

/* --- From about.html --- */
body{margin:0;background:#FFFFFF}
a{color:#17708C}a:hover{color:#0B2A3A}
input::placeholder{color:#5B6773}
.vq-dd{display:none}
.vq-item:hover>.vq-dd,.vq-item:focus-within>.vq-dd{display:flex}
.vq-dd a:hover{background:#F5F8FA;color:#0B2A3A}
.vq-burger{display:none}
.vq-burger>summary,.vq-acc>summary{list-style:none;cursor:pointer}
.vq-burger>summary::-webkit-details-marker,.vq-acc>summary::-webkit-details-marker{display:none}
.vq-burger .vq-ic-close{display:none}
.vq-burger[open] .vq-ic-open{display:none}
.vq-burger[open] .vq-ic-close{display:block}
.vq-burger[open]>summary{background:#F5F8FA}
.vq-acc>summary svg{transition:transform .2s ease}
.vq-acc[open]>summary svg{transform:rotate(180deg)}
.vq-acc[open]>summary{color:#17708C}
.vq-drawer a:hover{color:#17708C}
.vq-lg img{filter:grayscale(1);opacity:.62;transition:filter .2s ease,opacity .2s ease}.vq-lg:hover img{filter:none;opacity:1}
@keyframes vq-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}
.vq-track{animation:vq-marquee 45s linear infinite}.vq-marquee:hover .vq-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.vq-track{animation:none}}
.vq-btn-ic{flex-shrink:0}
.vq-g img{transition:transform .5s ease}.vq-g:hover img{transform:scale(1.04)}
@media (max-width:860px){.vq-gallery{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:170px !important;gap:12px !important}.vq-gallery .vq-g{grid-row:auto !important}.vq-gallery .vq-g-wide{grid-column:span 2 !important}.vq-g-cap{font-size:9px !important;letter-spacing:0.06em !important;left:8px !important;bottom:8px !important;padding:5px 7px !important}}
.vq-tab-in{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.vq-panel{display:none}
#vq-iso-ias:checked~.vq-panel-ias,#vq-iso-egac:checked~.vq-panel-egac{display:grid}
.vq-tab{color:#5B6773;transition:background .2s ease,color .2s ease}.vq-tab:hover{color:#0B2A3A}
#vq-iso-ias:checked~div .vq-tab-vq-iso-ias,#vq-iso-egac:checked~div .vq-tab-vq-iso-egac{background:#0B2A3A;color:#FFFFFF}
#vq-iso-ias:focus-visible~div .vq-tab-vq-iso-ias,#vq-iso-egac:focus-visible~div .vq-tab-vq-iso-egac{outline:2px solid #2295BA;outline-offset:2px}
@media (max-width:1100px){.vq-panel-ias{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media (max-width:860px){.vq-panel-ias,.vq-panel-egac{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:560px){.vq-panel-ias,.vq-panel-egac{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}.vq-tabbar{width:100%}.vq-tab{flex:1 1 0;justify-content:center}.vq-iso-card{padding:16px !important;gap:12px !important}.vq-iso-card svg{width:46px;height:46px}.vq-iso-card .vq-iso-t{font-size:16px !important;white-space:normal !important}.vq-iso-card .vq-iso-n{font-size:9.5px !important;min-height:42px !important}.vq-iso-card .vq-iso-more{display:none}.vq-iso-card .vq-iso-idx{font-size:16px !important}}
.vq-ic-btn{transition:border-color .2s ease,background .2s ease}.vq-ic-btn:hover{border-color:#17708C !important}
.vq-soc a{opacity:.82;transition:opacity .2s ease}.vq-soc a:hover{opacity:1}

.vq-track-r{animation-direction:reverse}
.vq-dup{display:none !important}
.vq-ctam{display:none !important}
@keyframes vq-marquee2{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:720px){
.vq-strip-row{grid-template-columns:1fr !important}
.vq-vp{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
.vq-dup{display:block !important}
.vq-strip-logos{display:flex !important;flex-wrap:nowrap !important;justify-content:flex-start !important;gap:0 !important;width:max-content;animation:vq-marquee2 26s linear infinite}
.vq-strip-logos>a{margin-right:36px;flex-shrink:0}
.vq-strip-p{animation-direction:reverse}
.vq-acc-grid{display:flex !important;gap:0 !important;width:max-content;animation:vq-marquee2 30s linear infinite}
.vq-acc-grid>a{width:168px;margin-right:14px;flex-shrink:0}.vq-acc-grid>a.vq-dup{display:flex !important}
.vq-tb{font-size:12px !important;gap:6px !important}
.vq-tb .vq-ic-btn{width:24px !important;height:24px !important}
}
@media (prefers-reduced-motion:reduce){.vq-strip-logos,.vq-acc-grid{animation:none !important}}
@media (max-width:560px){.vq-hero-btn{min-width:0 !important;flex:1 1 0;padding:0 12px !important}.vq-hero-btn:last-child{flex-grow:1.5}}
@media (max-width:1340px){.vq-mainnav{gap:0 22px !important}.vq-mainnav>.vq-item>a{font-size:14.5px !important}}
@media (max-width:1220px){.vq-mainnav{gap:0 16px !important}.vq-mainnav>.vq-item>a{font-size:14px !important}}
@media (max-width:1260px){.vq-addr{display:none !important}}
@media (max-width:1140px){.vq-toplinks,.vq-mainnav{display:none !important}.vq-burger{display:block}}
@media (max-width:999px){.vq-ev-img{flex:none !important;min-height:0 !important;aspect-ratio:3/2}}
@media (max-width:903px){.vq-rec-main{flex:none !important;min-height:0 !important;aspect-ratio:3/2}}
@media (max-width:720px){
.vq-addr{display:none !important}
.vq-wrap{padding-left:20px !important;padding-right:20px !important}
.vq-sec{padding-top:64px !important;padding-bottom:64px !important}
.vq-hero{padding-top:40px !important}
.vq-logo{width:76px !important;height:48px !important}
.vq-logo-link{padding:12px 0 !important}
.vq-cta-h{height:40px !important;padding:0 16px !important;font-size:14px !important}
.vq-burger-btn{width:40px !important;height:40px !important}
.vq-story-img{height:420px !important}
.vq-pad{padding:24px !important}
.vq-fcols{gap:32px 24px !important}
.vq-fcol{min-width:min(140px,100%) !important}
.vq-code{min-height:0 !important}
}
@media (max-width:560px){
.vq-hero-media{padding-bottom:64px !important}
.vq-hero-cap{width:54% !important;padding:12px 14px !important}
.vq-hero-cap>span:last-child{font-size:13px !important}
.vq-ev-card{padding:4px 16px !important}
.vq-ev-thumb{width:80px !important;height:60px !important}
.vq-read{display:none !important}
.vq-ev-title{font-size:16px !important}
.vq-stats{grid-template-columns:1fr !important;gap:16px !important}
.vq-stat{flex-direction:row !important;align-items:baseline;gap:16px !important}
.vq-stat>span:first-child{flex:0 0 140px;font-size:26px !important;white-space:nowrap}
.vq-search-btn{flex:1 1 100% !important}
}

a:not([href]){cursor:default}

/* --- From contact.html --- */
body{margin:0;background:#FFFFFF}
a{color:#17708C}a:hover{color:#0B2A3A}
input::placeholder{color:#5B6773}
.vq-dd{display:none}
.vq-item:hover>.vq-dd,.vq-item:focus-within>.vq-dd{display:flex}
.vq-dd a:hover{background:#F5F8FA;color:#0B2A3A}
.vq-burger{display:none}
.vq-burger>summary,.vq-acc>summary{list-style:none;cursor:pointer}
.vq-burger>summary::-webkit-details-marker,.vq-acc>summary::-webkit-details-marker{display:none}
.vq-burger .vq-ic-close{display:none}
.vq-burger[open] .vq-ic-open{display:none}
.vq-burger[open] .vq-ic-close{display:block}
.vq-burger[open]>summary{background:#F5F8FA}
.vq-acc>summary svg{transition:transform .2s ease}
.vq-acc[open]>summary svg{transform:rotate(180deg)}
.vq-acc[open]>summary{color:#17708C}
.vq-drawer a:hover{color:#17708C}
.vq-lg img{filter:grayscale(1);opacity:.62;transition:filter .2s ease,opacity .2s ease}.vq-lg:hover img{filter:none;opacity:1}
@keyframes vq-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}
.vq-track{animation:vq-marquee 45s linear infinite}.vq-marquee:hover .vq-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.vq-track{animation:none}}
.vq-btn-ic{flex-shrink:0}
.vq-in{width:100%;box-sizing:border-box;height:50px;padding:0 14px;border:1px solid #C7D3DB;border-radius:6px;background:#FFFFFF;font-family:inherit;font-size:15px;color:#0B2A3A;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.vq-in:focus{border-color:#17708C;box-shadow:0 0 0 3px rgba(34,149,186,.15)}textarea.vq-in{height:150px;padding:12px 14px;resize:vertical;line-height:1.5}select.vq-in{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%235B6773' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.vq-act{transition:border-color .2s ease,transform .2s ease}.vq-act:hover{border-color:#17708C !important}
@media (max-width:560px){.vq-form-grid{grid-template-columns:1fr !important}}
@media (max-width:1000px){.vq-contact-grid{grid-template-columns:1fr !important}}
.vq-tab-in{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.vq-panel{display:none}
#vq-iso-ias:checked~.vq-panel-ias,#vq-iso-egac:checked~.vq-panel-egac{display:grid}
.vq-tab{color:#5B6773;transition:background .2s ease,color .2s ease}.vq-tab:hover{color:#0B2A3A}
#vq-iso-ias:checked~div .vq-tab-vq-iso-ias,#vq-iso-egac:checked~div .vq-tab-vq-iso-egac{background:#0B2A3A;color:#FFFFFF}
#vq-iso-ias:focus-visible~div .vq-tab-vq-iso-ias,#vq-iso-egac:focus-visible~div .vq-tab-vq-iso-egac{outline:2px solid #2295BA;outline-offset:2px}
@media (max-width:1100px){.vq-panel-ias{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media (max-width:860px){.vq-panel-ias,.vq-panel-egac{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:560px){.vq-panel-ias,.vq-panel-egac{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}.vq-tabbar{width:100%}.vq-tab{flex:1 1 0;justify-content:center}.vq-iso-card{padding:16px !important;gap:12px !important}.vq-iso-card svg{width:46px;height:46px}.vq-iso-card .vq-iso-t{font-size:16px !important;white-space:normal !important}.vq-iso-card .vq-iso-n{font-size:9.5px !important;min-height:42px !important}.vq-iso-card .vq-iso-more{display:none}.vq-iso-card .vq-iso-idx{font-size:16px !important}}
.vq-ic-btn{transition:border-color .2s ease,background .2s ease}.vq-ic-btn:hover{border-color:#17708C !important}
.vq-soc a{opacity:.82;transition:opacity .2s ease}.vq-soc a:hover{opacity:1}

.vq-track-r{animation-direction:reverse}
.vq-dup{display:none !important}
.vq-ctam{display:none !important}
@keyframes vq-marquee2{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:720px){
.vq-strip-row{grid-template-columns:1fr !important}
.vq-vp{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
.vq-dup{display:block !important}
.vq-strip-logos{display:flex !important;flex-wrap:nowrap !important;justify-content:flex-start !important;gap:0 !important;width:max-content;animation:vq-marquee2 26s linear infinite}
.vq-strip-logos>a{margin-right:36px;flex-shrink:0}
.vq-strip-p{animation-direction:reverse}
.vq-acc-grid{display:flex !important;gap:0 !important;width:max-content;animation:vq-marquee2 30s linear infinite}
.vq-acc-grid>a{width:168px;margin-right:14px;flex-shrink:0}.vq-acc-grid>a.vq-dup{display:flex !important}
.vq-tb{font-size:12px !important;gap:6px !important}
.vq-tb .vq-ic-btn{width:24px !important;height:24px !important}
}
@media (prefers-reduced-motion:reduce){.vq-strip-logos,.vq-acc-grid{animation:none !important}}
@media (max-width:560px){.vq-hero-btn{min-width:0 !important;flex:1 1 0;padding:0 12px !important}.vq-hero-btn:last-child{flex-grow:1.5}}
@media (max-width:1340px){.vq-mainnav{gap:0 22px !important}.vq-mainnav>.vq-item>a{font-size:14.5px !important}}
@media (max-width:1220px){.vq-mainnav{gap:0 16px !important}.vq-mainnav>.vq-item>a{font-size:14px !important}}
@media (max-width:1260px){.vq-addr{display:none !important}}
@media (max-width:1140px){.vq-toplinks,.vq-mainnav{display:none !important}.vq-burger{display:block}}
@media (max-width:999px){.vq-ev-img{flex:none !important;min-height:0 !important;aspect-ratio:3/2}}
@media (max-width:903px){.vq-rec-main{flex:none !important;min-height:0 !important;aspect-ratio:3/2}}
@media (max-width:720px){
.vq-addr{display:none !important}
.vq-wrap{padding-left:20px !important;padding-right:20px !important}
.vq-sec{padding-top:64px !important;padding-bottom:64px !important}
.vq-hero{padding-top:40px !important}
.vq-logo{width:76px !important;height:48px !important}
.vq-logo-link{padding:12px 0 !important}
.vq-cta-h{height:40px !important;padding:0 16px !important;font-size:14px !important}
.vq-burger-btn{width:40px !important;height:40px !important}
.vq-story-img{height:420px !important}
.vq-pad{padding:24px !important}
.vq-fcols{gap:32px 24px !important}
.vq-fcol{min-width:min(140px,100%) !important}
.vq-code{min-height:0 !important}
}
@media (max-width:560px){
.vq-hero-media{padding-bottom:64px !important}
.vq-hero-cap{width:54% !important;padding:12px 14px !important}
.vq-hero-cap>span:last-child{font-size:13px !important}
.vq-ev-card{padding:4px 16px !important}
.vq-ev-thumb{width:80px !important;height:60px !important}
.vq-read{display:none !important}
.vq-ev-title{font-size:16px !important}
.vq-stats{grid-template-columns:1fr !important;gap:16px !important}
.vq-stat{flex-direction:row !important;align-items:baseline;gap:16px !important}
.vq-stat>span:first-child{flex:0 0 140px;font-size:26px !important;white-space:nowrap}
.vq-search-btn{flex:1 1 100% !important}
}

a:not([href]){cursor:default}

/* ==========================================================================
   VQT MOBILE DRAWER FULL-WIDTH POSITIONING ENGINE
   ========================================================================== */
html, body {
  overflow-x: hidden;
}

.vq-drawer {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8ED !important;
  border-bottom: 1px solid #E2E8ED !important;
  box-shadow: 0 28px 48px rgba(11, 42, 58, 0.14) !important;
  max-height: calc(100vh - 84px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 99999 !important;
}

/* Force navbar row flex container to never wrap on any device/mobile breakpoint */
/* Force navbar row flex container to never wrap on any device/mobile breakpoint */
/* Overall Header Wrapper */
.vq-hf-header,
header.vq-hf-header {
  position: relative !important;
  z-index: 1000 !important;
}

/* 1. Topbar Container (المنيو العلوية)
   Must have HIGHER z-index than Navbar so its dropdowns (About Us, Events)
   render ABOVE the navbar, never getting clipped or trapped underneath! */
.elementor-25 .e-parent:first-child,
.vq-hf-header .e-parent:first-child,
.elementor-25 > .elementor-element:first-child {
  position: relative !important;
  width: 100% !important;
  z-index: 100 !important;
}

.elementor-25 .e-parent:first-child:hover,
.elementor-25 .e-parent:first-child:focus-within,
.vq-hf-header .e-parent:first-child:hover,
.vq-hf-header .e-parent:first-child:focus-within {
  z-index: 200 !important;
}

/* Force navbar row flex container to never wrap on any device/mobile breakpoint */
.elementor-25 .e-parent:last-child .e-con-inner,
.vq-hf-header .e-parent:last-child .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* 2. Main Navbar Container (المنيو الرئيسية)
   Desktop: z-index 50 (80 on hover), lower than Topbar so Topbar dropdowns stack over it,
   but higher than all page content (Hero, sliders, etc.) */
.elementor-25 .e-parent:last-child,
.vq-hf-header .e-parent:last-child,
.elementor-25 > .elementor-element:last-child {
  position: relative !important;
  width: 100% !important;
  z-index: 50 !important;
}

.elementor-25 .e-parent:last-child:hover,
.elementor-25 .e-parent:last-child:focus-within,
.vq-hf-header .e-parent:last-child:hover,
.vq-hf-header .e-parent:last-child:focus-within {
  z-index: 80 !important;
}

/* All dropdown popups have highest internal z-index */
.vq-dd {
  z-index: 99999 !important;
}

@media (max-width: 1140px) {
  /* Release all intermediate wrappers from trapping the absolute drawer */
  .elementor-widget-vqt_brand_button,
  .elementor-widget-vqt_brand_button .elementor-widget-container,
  .elementor-widget-vqt_main_nav,
  .elementor-widget-vqt_main_nav .elementor-widget-container,
  .vq-nav-actions,
  .vq-burger,
  .elementor-25 .e-parent:last-child .e-con-boxed,
  .elementor-25 .e-parent:last-child .e-con-inner,
  .elementor-25 .e-parent:last-child .elementor-widget,
  .elementor-25 .e-parent:last-child .elementor-widget-container,
  .elementor-25 .e-parent:last-child .vq-nav-actions,
  .elementor-25 .e-parent:last-child .vq-burger,
  .vq-hf-header .elementor-element.e-con-boxed,
  .vq-hf-header .elementor-element.e-child,
  .vq-hf-header .e-con-inner,
  .vq-hf-header .elementor-widget,
  .vq-hf-header .elementor-widget-container {
    position: static !important;
  }

  .vq-drawer {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   GLOBAL FOOTER (Dark Navy #0B2A3A) — Bulletproof Layout & Flexibility
   Guarantees 3 stacked vertical sections across all pages & Elementor cache states
   ========================================================================== */
.vq-hf-footer,
footer.vq-hf-footer,
.elementor-26 {
  background-color: #0B2A3A !important;
  color: #C7D3DB !important;
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  display: block !important;
}

/* Outer parent container */
.vq-hf-footer .elementor-element-0f47702,
.elementor-26 .elementor-element-0f47702,
.vq-hf-footer > .elementor > .e-parent,
.vq-hf-footer > .e-parent {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background-color: #0B2A3A !important;
  padding: 56px 0 32px 0 !important;
  box-sizing: border-box !important;
}

/* Boxed inner container and its .e-con-inner */
.vq-hf-footer .elementor-element-a9375cb,
.elementor-26 .elementor-element-a9375cb,
.vq-hf-footer .elementor-element-a9375cb > .e-con-inner,
.elementor-26 .elementor-element-a9375cb > .e-con-inner,
.vq-hf-footer .e-con-boxed > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  gap: 40px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}

/* Row 1: Logo + Certificate verification */
.vq-hf-footer .elementor-element-2f95bca,
.elementor-26 .elementor-element-2f95bca {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px 32px !important;
  width: 100% !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid #1E4357 !important;
  box-sizing: border-box !important;
}

/* Row 2: The 4 Content Columns Container */
.vq-hf-footer .elementor-element-fc786f1,
.elementor-26 .elementor-element-fc786f1 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 40px 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* The 4 Individual Columns */
.vq-hf-footer .elementor-element-cc82296,
.elementor-26 .elementor-element-cc82296 {
  flex: 1.6 1 300px !important;
  min-width: min(300px, 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.vq-hf-footer .elementor-element-b3ecf35,
.elementor-26 .elementor-element-b3ecf35,
.vq-hf-footer .elementor-element-e735abf,
.elementor-26 .elementor-element-e735abf,
.vq-hf-footer .elementor-element-5f78190,
.elementor-26 .elementor-element-5f78190 {
  flex: 1 1 180px !important;
  min-width: min(180px, 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Row 3: Bottom Copyright & Credits */
.vq-hf-footer .elementor-element-eff7dcc,
.elementor-26 .elementor-element-eff7dcc {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px 24px !important;
  width: 100% !important;
  padding-top: 24px !important;
  border-top: 1px solid #1E4357 !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  .vq-hf-footer .elementor-element-a9375cb > .e-con-inner,
  .elementor-26 .elementor-element-a9375cb > .e-con-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 32px !important;
  }
  .vq-hf-footer .elementor-element-cc82296,
  .elementor-26 .elementor-element-cc82296,
  .vq-hf-footer .elementor-element-b3ecf35,
  .elementor-26 .elementor-element-b3ecf35,
  .vq-hf-footer .elementor-element-e735abf,
  .elementor-26 .elementor-element-e735abf,
  .vq-hf-footer .elementor-element-5f78190,
  .elementor-26 .elementor-element-5f78190 {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
}

/* Also support Elementor Editor Live Preview of Drawer */
.elementor-editor-active .vq-burger[open],
.elementor-editor-active .vq-burger[open] .vq-drawer {
  display: block !important;
}
.elementor-editor-active .vq-burger[open] .vq-ic-open {
  display: none !important;
}
.elementor-editor-active .vq-burger[open] .vq-ic-close {
  display: block !important;
}

/* Single Event Photo Gallery Grid */
.vq-event-photo-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}
.vq-event-photo-grid > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}
.vq-event-photo-card {
  flex: 1 1 calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #E2E8ED !important;
  background: #F5F8FA !important;
  box-sizing: border-box !important;
}
.vq-event-photo-card img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}
.vq-event-photo-card:hover img {
  transform: scale(1.02);
}
.vq-event-hero-img img {
  display: block !important;
  width: 100% !important;
  max-height: 540px !important;
  object-fit: cover !important;
}
@media (max-width: 767px) {
  .vq-event-photo-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}