/* ==========================================================================
   Compatibility layer for content copied from the WordPress (Gutenberg) pages.
   Only the block styles actually used by the site are included.
   ========================================================================== */
:root {
  --wp--preset--color--contrast: var(--gp-contrast);
  --wp--preset--color--contrast-2: var(--gp-contrast-2);
  --wp--preset--color--contrast-3: var(--gp-contrast-3);
  --wp--preset--color--base: var(--gp-base);
  --wp--preset--color--base-2: var(--gp-base-2);
  --wp--preset--color--base-3: var(--gp-base-3);
  --wp--preset--color--accent: var(--gp-accent);
  --wp--preset--font-size--small: 13px;
  --wp--preset--font-size--medium: 20px;
  --wp--preset--font-size--large: 36px;
  --wp--preset--font-size--x-large: 42px;
  --wp--preset--spacing--20: 0.44rem;
  --wp--preset--spacing--30: 0.67rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.38rem;
  --wp--preset--spacing--80: 5.06rem;
}

.wp-content { max-width: 1200px; }
.wp-content > * + * { margin-top: 0; }
.wp-content p { margin-bottom: 1.5em; }
.wp-content h1, .wp-content h2, .wp-content h3, .wp-content h4 { margin-bottom: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.wp-content h2 { font-size: 30px; }
.wp-content h3 { font-size: 24px; }

/* ----- Columns ----- */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap !important;
  align-items: normal !important;
  gap: 2em;
  margin-bottom: 1.75em;
}
.wp-block-column { flex-grow: 1; flex-basis: 0; min-width: 0; word-break: break-word; overflow-wrap: break-word; }
.wp-block-columns.are-vertically-aligned-top { align-items: flex-start !important; }
.wp-block-columns.are-vertically-aligned-center { align-items: center !important; }
.wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end !important; }
.wp-block-column.is-vertically-aligned-top { align-self: flex-start; }
.wp-block-column.is-vertically-aligned-center { align-self: center; }
.wp-block-column.is-vertically-aligned-bottom { align-self: flex-end; }
@media (min-width: 782px) {
  .wp-block-columns { flex-wrap: nowrap !important; }
  .wp-block-column[style*="flex-basis"] { flex-grow: 0; }
}
@media (max-width: 781.98px) {
  .wp-block-column { flex-basis: 100% !important; }
}

/* ----- Groups / backgrounds / colours ----- */
.wp-block-group { box-sizing: border-box; }
.has-background { padding: 1.25em 2.375em; }
.wp-block-column.has-background, .wp-block-group.has-background { padding: 1.25em; }
.has-contrast-color { color: var(--gp-contrast) !important; }
.has-contrast-2-color { color: var(--gp-contrast-2) !important; }
.has-contrast-3-color { color: var(--gp-contrast-3) !important; }
.has-base-color { color: var(--gp-base) !important; }
.has-base-3-color { color: var(--gp-base-3) !important; }
.has-accent-color { color: var(--gp-accent) !important; }
.has-base-background-color { background-color: var(--gp-base) !important; }
.has-base-2-background-color { background-color: var(--gp-base-2) !important; }
.has-base-3-background-color { background-color: var(--gp-base-3) !important; }
.has-contrast-3-background-color { background-color: var(--gp-contrast-3) !important; }
.has-accent-background-color { background-color: var(--gp-accent) !important; }
mark.has-inline-color { background: transparent; padding: 0; }

/* ----- Typography ----- */
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-text-align-left { text-align: left; }
/* This content was originally authored in Arabic (RTL), where "align right" means
   "aligned to the natural start of the line". On English (LTR) pages the same class
   would otherwise still pin text to the physical right — flip it back to the true
   reading start there. (Arabic pages are untouched.) */
html[dir="ltr"] .has-text-align-right { text-align: left; }
.has-small-font-size { font-size: var(--wp--preset--font-size--small) !important; }
.has-medium-font-size { font-size: var(--wp--preset--font-size--medium) !important; }
.has-large-font-size { font-size: var(--wp--preset--font-size--large) !important; }
.has-x-large-font-size { font-size: var(--wp--preset--font-size--x-large) !important; }

/* ----- Images ----- */
.wp-content figure { margin: 0 0 1em; }
.wp-content img { max-width: 100%; height: auto; }
.wp-block-image img { vertical-align: bottom; }
.wp-block-image .aligncenter, .wp-block-image.aligncenter, figure.aligncenter { display: table; margin-left: auto; margin-right: auto; }
.wp-block-image .alignleft, figure.alignleft { float: left; margin: .5em 1em .5em 0; }
.wp-block-image .alignright, figure.alignright { float: right; margin: .5em 0 .5em 1em; }
.wp-block-image::after, .wp-block-column::after { content: ""; display: table; clear: both; }
.wp-block-image figcaption { font-size: 14px; text-align: center; margin-top: .5em; color: var(--gp-contrast-2); }

/* An image sitting alone inside a column (icon/logo grids, e.g. "Why Choose Us"
   and the Collaboration partner logos) is meant to be centered, not floated —
   the "alignleft" the original WordPress editor saved here was never an
   intentional float-with-text-wrap. Plain (un-aligned) images in that same
   position default to text-direction start/end, which is off-center too, so
   both get corrected the same way regardless of language. */
.wp-block-column > .wp-block-image { text-align: center; }
.wp-block-column > .wp-block-image figure.alignleft,
.wp-block-column > .wp-block-image figure.alignright {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

/* ----- Separator ----- */
.wp-block-separator {
  border: none;
  border-top: 2px solid currentColor;
  margin: 1.65em auto;
  opacity: 1;
}
.wp-block-separator.has-background { border: 0; height: 1px; padding: 0; }
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100px; }
.wp-block-separator.is-style-wide { width: 100%; }

/* ----- Buttons ----- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: 1em; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-button.has-custom-width { max-width: none; }
.wp-block-button__width-100 { flex-basis: 100%; }
.wp-block-button__link {
  display: inline-block;
  width: 100%;
  background: var(--gp-accent);
  color: #fff;
  padding: calc(.667em + 2px) calc(1.333em + 2px);
  border-radius: 9999px;
  text-align: center;
  text-decoration: none;
  transition: background .2s;
}
.wp-block-button__link:hover { background: var(--gp-navy); color: #fff; text-decoration: none; }

/* ----- Lists ----- */
.wp-block-list { padding-right: 1.5em; padding-left: 0; margin-bottom: 1.5em; }

/* ----- Site custom classes (from the WordPress "Additional CSS") ----- */
.page-title { padding: 1.5em; text-align: center; }
.page-heading { margin: 0; }
.page-paragraph { padding: 1em 3em; }
.contact-us-container { padding: 0 4em; }
.contact-us-form-container { padding: 2em; }
.card-md { box-shadow: 1px 1px 13px -4px gray; border-radius: 10px; }
.card-sm { border: 1px solid #ececec; border-radius: 10px; }
.card-md img, .card-sm img { border-radius: 10px; }
.custom-block-space { padding: 0 !important; }
.custom-block-space p { min-height: 8.1em; }
.custom-solutions-block { min-height: 37em; width: 16em; }
.custom-logo-margin { margin-right: -48px !important; }
.custom-logo-margin-solutions { margin-left: -35px !important; }
p.sticky { position: sticky; top: 61px; z-index: 10; }
@media (max-width: 430px) {
  .custom-logo-margin { margin-right: 0 !important; margin-left: 20px !important; }
  .custom-logo-margin-solutions { margin-right: 20px !important; margin-left: 0 !important; }
  .custom-solutions-block { width: auto; }
}
@media (max-width: 767.98px) {
  .contact-us-container, .page-paragraph { padding-left: 0; padding-right: 0; }
}

/* ----- Management page: employee modal must sit above the sticky navbar ----- */
.emp-modal { z-index: 1060 !important; }

/* ----- Contact page ----- */
.contact-form .form-control { background: var(--gp-base); border-color: transparent; min-height: 43px; }
.contact-form .form-control:focus { background: #fff; border-color: var(--gp-accent); box-shadow: none; }
.map-embed { margin-bottom: 1.5em; border-radius: 6px; overflow: hidden; }
.map-embed iframe { border: 0; }

/* ----- Cool Timeline plugin (events & news) ----- */
.cool-timeline-block-list { position: relative; margin-bottom: 2em; }
.cool-timeline-block-list::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  right: 181px; width: 3px; background: var(--gp-base);
}
.ctl-row { position: relative; display: flex; gap: 20px; align-items: flex-start; padding-bottom: 2.5em; }
.timeline-block-time { flex: 0 0 150px; text-align: left; color: var(--gp-accent); padding-top: 4px; }
.timeline-block-time p { margin: 0; }
.timeline-block-icon {
  flex: 0 0 24px; height: 24px; margin-top: 4px; border-radius: 50%;
  background: #fff; border: 3px solid var(--gp-accent); color: transparent;
  position: relative; z-index: 1;
}
.timeline-block-icon svg { display: none; }
.timeline-block-detail { flex: 1 1 auto; min-width: 0; }
.story-details {
  background: var(--gp-base-2); border: 1px solid var(--gp-base); border-radius: 8px;
  padding: 1.5em; box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.story-details img { border-radius: 6px; width: 100%; }
.ctlb-block-title { font-size: 20px; margin-bottom: .5em; }
@media (max-width: 767.98px) {
  .cool-timeline-block-list::before { right: 11px; }
  .ctl-row { flex-wrap: wrap; gap: 8px 16px; }
  .timeline-block-time { order: 2; flex: 1 1 calc(100% - 40px); text-align: right; padding-top: 2px; }
  .timeline-block-icon { order: 1; }
  .timeline-block-detail { order: 3; flex-basis: 100%; padding-right: 40px; }
}