/* ALECSO home v3: the classic (v1) home page with Almarai typography and the v2 figures bar.
   Loaded after the classic template stylesheets (see Home::v3). */

@font-face { font-family: "Almarai"; font-weight: 300; font-display: swap; src: url("../../v2/fonts/almarai-arabic-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Almarai"; font-weight: 400; font-display: swap; src: url("../../v2/fonts/almarai-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Almarai"; font-weight: 700; font-display: swap; src: url("../../v2/fonts/almarai-arabic-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Almarai"; font-weight: 800; font-display: swap; src: url("../../v2/fonts/almarai-arabic-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../../v2/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../../v2/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("../../v2/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }

/* Body fonts the administrator can choose between (Site settings > Appearance): Almarai (above), Cairo, Alyamama, and Alecso (Janna LT, self-hosted) */
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/cairo-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/cairo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alyamama"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/alyamama-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Alyamama"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/alyamama-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alecso"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/alecso-regular.ttf") format("truetype"); }
@font-face { font-family: "Alecso"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/alecso-bold.ttf") format("truetype"); }

:root { --v3-font: "Alyamama", "IBM Plex Sans", system-ui, sans-serif; }

/* Typography: Almarai for every text, except the hero title, its framed word and the .section-title h1/h5 and .heading_title headings, which keep the classic display font (AlecsoText3).
   (:where() keeps the exclusion list at zero specificity, so the icon rules below can still win.) */
body.v3 { font-family: var(--v3-font) !important; }
body.v3 *:not(:where(.header_title > h1, .header_title > h1 *, .header_title > .box .text, .header_title > .box .text *, .section-title h1, .section-title h1 *, .section-title h5, .section-title h5 *, .heading_title, .heading_title *, .page-header h1, .page-header h1 *)) {
  font-family: var(--v3-font) !important;
}
body.v3 :is(.fas, .fa, .far) { font-family: "Font Awesome 5 Free" !important; }
body.v3 :is(.fab) { font-family: "Font Awesome 5 Brands" !important; }
body.v3 :is(.bi, [class^="bi-"], [class*=" bi-"]) { font-family: "bootstrap-icons" !important; }

/* Header menu */
body.v3 .header_menu, body.v3 .header_menu * { font-size: 17px !important; font-weight: 600 !important; }

/* Shortcut links block: smaller bold labels */
body.v3 .shortcut_links, body.v3 .shortcut_links * { font-size: .9rem !important; font-weight: 700 !important; }

/* Technical departments (الإدارات الفنية): bento grid of photo cards */
.v3-depts { padding-block: clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, #fff 0%, #f1f7f6 100%); }
.v3-depts-head { display: block; margin-block-end: 2rem; }
.v3-depts-head .heading_title { margin: 0 0 1rem !important; }
.v3-depts-intro { margin: 0; inline-size: 100%; max-inline-size: none; color: #3C4A49; font-size: .9rem; line-height: 1.8; padding-inline-start: .8rem; border-inline-start: 3px solid #0D6B68; }

.v3-depts-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 15rem; gap: 1.1rem; }
.v3-dept { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 10px; color: #fff; text-decoration: none; background: #03201F; box-shadow: 0 10px 28px -18px rgb(3 32 31 / .7); grid-column: span 3; transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s; }
.v3-dept:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgb(3 32 31 / .85); color: #fff; }
.v3-dept img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.v3-dept:hover img { transform: scale(1.07); }
.v3-dept::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(3 32 31 / .94) 0%, rgb(3 32 31 / .62) 42%, rgb(3 32 31 / .08) 78%); transition: background .5s; }
.v3-dept:hover::after { background: linear-gradient(to top, rgb(8 76 74 / .96) 0%, rgb(8 76 74 / .68) 48%, rgb(3 32 31 / .12) 82%); }
.v3-dept-num { position: absolute; inset-block-start: .9rem; inset-inline-start: .9rem; padding: .1rem .7rem; border-radius: 8px; background: rgb(13 107 104 / .92); font-size: 1rem; font-weight: 800; line-height: 1.6; color: #fff; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.v3-dept-body { padding: 1.25rem 1.4rem 1.3rem; padding-inline-end: 4rem; }
.v3-dept-body h3 { margin: 0 0 .35rem; font-size: 1.5rem; line-height: 1.4; font-weight: 800; color: #fff; }
.v3-dept-body p { margin: 0; font-size: .92rem; line-height: 1.7; color: #DCE7E5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v3-dept-go { position: absolute; inset-block-end: 1.2rem; inset-inline-end: 1.2rem; inline-size: 2.4rem; block-size: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: rgb(157 249 237 / .18); border: 1px solid rgb(157 249 237 / .55); color: #9DF9ED; transition: background .3s, color .3s, transform .4s cubic-bezier(.16, 1, .3, 1); }
.v3-dept:hover .v3-dept-go { background: #9DF9ED; color: #03201F; transform: scale(1.1); }

/* Layout: three cards on the first row, two wider ones below (executive board on the start side, ICT on the end side) */
.v3-dept { grid-column: span 2; }
.v3-depts-grid > .v3-dept:nth-child(4) { grid-column: 4 / span 3; grid-row: 2; }
.v3-depts-grid > .v3-dept:nth-child(5) { grid-column: 1 / span 3; grid-row: 2; }
.v3-dept-body p { -webkit-line-clamp: 3; }

@media (max-width: 991.98px) {
  .v3-depts-grid { grid-template-columns: repeat(2, 1fr); }
  .v3-dept, .v3-depts-grid > .v3-dept:nth-child(n) { grid-column: span 1; grid-row: auto; }
  .v3-depts-grid > .v3-dept:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .v3-depts-grid { grid-template-columns: 1fr; grid-auto-rows: 14rem; }
  .v3-dept, .v3-depts-grid > .v3-dept:nth-child(n) { grid-column: 1 / -1; }
  .v3-dept-body h3 { font-size: 1.3rem; }
  .v3-depts-head { margin-block-end: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .v3-dept, .v3-dept img, .v3-dept-go { transition: none; } }

/* Footer and buttons */
body.v3 .footer, body.v3 .btn { font-size: 1.0rem; }
body.v3 .footer .copyright { font-size: 0.8rem; }

/* Important announcements: layout adapts to how many there are (1, 2, 3, 4, 5, 6 or more) */
.v3-ann { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 11.5rem; gap: .9rem; }
.v3-ann-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 10px; color: #fff; text-decoration: none; background: linear-gradient(135deg, #0d6b68, #063A38); box-shadow: 0 10px 26px -18px rgb(3 32 31 / .7); grid-column: span 2; transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s; }
.v3-ann-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgb(3 32 31 / .85); color: #fff; }
.v3-ann-card img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.v3-ann-card:hover img { transform: scale(1.06); }
.v3-ann-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(3 32 31 / .94) 0%, rgb(3 32 31 / .55) 46%, rgb(3 32 31 / .05) 80%); }
.v3-ann-body { padding: 1rem 3.4rem 1rem 1.1rem; padding-inline: 1.1rem 3.6rem; }
.v3-ann-body h4 { margin: 0; font-size: 1rem; line-height: 1.55; font-weight: 700; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v3-ann-tag { position: absolute; inset-block-start: .7rem; inset-inline-start: .7rem; padding: .1rem .65rem; border-radius: 8px; background: rgb(13 107 104 / .92); color: #fff; font-size: .78rem; font-weight: 700; line-height: 1.7; }
.v3-ann-go { position: absolute; inset-block-end: .9rem; inset-inline-end: .9rem; inline-size: 2rem; block-size: 2rem; display: grid; place-items: center; border-radius: 50%; background: rgb(157 249 237 / .18); border: 1px solid rgb(157 249 237 / .55); color: #9DF9ED; font-size: .8rem; transition: background .3s, color .3s; }
.v3-ann-card:hover .v3-ann-go { background: #9DF9ED; color: #03201F; }

/* 1: a wide banner. 2: two equal cards. 3: lead + two stacked. 4: 2x2. 5: lead + two stacked, then two. 6 and more: 3 columns. */
.v3-ann--n1 { grid-auto-rows: 16rem; }
.v3-ann--n1 .v3-ann-card { grid-column: 1 / -1; }
.v3-ann--n1 .v3-ann-body h4 { font-size: 1.5rem; -webkit-line-clamp: 2; }
.v3-ann--n2 { grid-auto-rows: 15rem; }
.v3-ann--n2 .v3-ann-card, .v3-ann--n4 .v3-ann-card { grid-column: span 3; }
.v3-ann--n3 .v3-ann-card:first-child, .v3-ann--n5 .v3-ann-card:first-child { grid-column: span 4; grid-row: span 2; }
.v3-ann--n3 .v3-ann-card:first-child .v3-ann-body h4, .v3-ann--n5 .v3-ann-card:first-child .v3-ann-body h4 { font-size: 1.35rem; }
.v3-ann--n5 .v3-ann-card:nth-child(n+4) { grid-column: span 3; }
.v3-ann--n4 { grid-auto-rows: 12.5rem; }
.v3-ann-more { margin: 1.1rem 0 0; }
.v3-ann-count { display: inline-block; min-inline-size: 1.6rem; padding: 0 .45rem; border-radius: 99px; background: #0d6b68; color: #fff; font-size: .75rem; text-align: center; line-height: 1.6rem; }

@media (max-width: 767.98px) {
  .v3-ann { grid-template-columns: 1fr 1fr; grid-auto-rows: 10.5rem; }
  .v3-ann .v3-ann-card, .v3-ann .v3-ann-card:nth-child(n) { grid-column: span 1; grid-row: auto; }
  .v3-ann--n1 .v3-ann-card, .v3-ann--n3 .v3-ann-card:first-child, .v3-ann--n5 .v3-ann-card:first-child { grid-column: 1 / -1 !important; grid-row: auto; }
  .v3-ann--n1 { grid-auto-rows: 13rem; }
}
@media (max-width: 479.98px) { .v3-ann { grid-template-columns: 1fr; } .v3-ann .v3-ann-card, .v3-ann .v3-ann-card:nth-child(n) { grid-column: 1 / -1 !important; } }
@media (prefers-reduced-motion: reduce) { .v3-ann-card, .v3-ann-card img { transition: none; } }

/* Featured videos: two rows at most. One featured video beside two videos (one per row), then the link to all videos */
.v3-videos { padding-block: clamp(3rem, 6vw, 5rem); background: linear-gradient(135deg, #03201F 0%, #063A38 60%, #084C4A 100%); color: #fff; }
.v3-videos .heading_title { color: #fff; margin-block-end: 1.75rem; }
.v3-vid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; }
.v3-vid--n1 { grid-template-columns: 1fr; }
.v3-vid-play--sm { inline-size: 1.9rem; block-size: 1.9rem; font-size: .65rem; }
.v3-vid-card { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: 10px; min-block-size: 15.5rem; background: linear-gradient(135deg, #0d6b68, #063A38); color: #fff; text-decoration: none; box-shadow: 0 14px 34px -20px rgb(0 0 0 / .8); }
.v3-vid-card:hover { color: #fff; }
.v3-vid-card img, .v3-vid-thumb img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.v3-vid-card:hover img, .v3-vid-row:hover img { transform: scale(1.05); }
.v3-vid-card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgb(3 32 31 / .92) 0%, rgb(3 32 31 / .35) 48%, rgb(3 32 31 / .05) 78%); }
.v3-vid-title { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0; padding: 1rem 1.2rem; font-weight: 700; line-height: 1.5; font-size: 1.2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3-vid-tag { position: absolute; z-index: 2; inset-block-start: .9rem; inset-inline-start: .9rem; padding: .1rem .75rem; border-radius: 8px; background: rgb(13 107 104 / .92); font-size: .8rem; font-weight: 700; line-height: 1.8; }
.v3-vid-play { position: absolute; z-index: 2; inset: 50% auto auto 50%; translate: -50% -50%; inline-size: 3.8rem; block-size: 3.8rem; display: grid; place-items: center; border-radius: 50%; background: rgb(3 32 31 / .55); border: 2px solid rgb(157 249 237 / .85); color: #9DF9ED; font-size: 1.1rem; transition: background .3s, color .3s, scale .4s cubic-bezier(.16, 1, .3, 1); }
.v3-vid-play i { margin-inline-start: .2rem; }
.v3-vid-play--sm { inline-size: 2.4rem; block-size: 2.4rem; font-size: .8rem; border-width: 1.5px; }
.v3-vid-card:hover .v3-vid-play, .v3-vid-row:hover .v3-vid-play { background: #9DF9ED; color: #03201F; scale: 1.1; }
.v3-vid-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; }
.v3-vid-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .8rem; align-items: center; padding: .6rem; border-radius: 10px; background: rgb(255 255 255 / .06); border: 1px solid rgb(157 249 237 / .18); color: #fff; text-decoration: none; transition: background .3s, border-color .3s; }
.v3-vid-row:hover { background: rgb(157 249 237 / .12); border-color: rgb(157 249 237 / .5); color: #fff; }
.v3-vid-thumb { position: relative; display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0d6b68, #063A38); }
.v3-vid-rowtitle { font-weight: 700; font-size: .92rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v3-vid--n2 .v3-vid-row { grid-column: 1 / -1; grid-row: 1 / -1; }
.v3-vid--n3 .v3-vid-side { grid-template-columns: 1fr; }
.v3-vid--n4 .v3-vid-row:nth-child(3) { grid-column: 1 / -1; }
.v3-vid-more { margin: 1.4rem 0 0; }
.v3-vid-more a { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.2rem; border: 1px solid rgb(157 249 237 / .55); border-radius: 99px; color: #9DF9ED; font-weight: 700; text-decoration: none; transition: background .3s, color .3s; }
.v3-vid-more a:hover { background: #9DF9ED; color: #03201F; }
@media (max-width: 991.98px) {
  .v3-vid { grid-template-columns: 1fr; }
  .v3-vid-card { min-block-size: 14rem; }
  .v3-vid-side { grid-template-rows: none; }
}
@media (max-width: 575.98px) { .v3-vid-side { grid-template-columns: 1fr; } .v3-vid--n4 .v3-vid-row:nth-child(3) { grid-column: auto; } }
@media (max-width: 479.98px) { .v3-vid-row { grid-template-columns: 8.5rem minmax(0, 1fr); gap: .7rem; } }
@media (prefers-reduced-motion: reduce) { .v3-vid-card img, .v3-vid-thumb img, .v3-vid-play { transition: none; } }

/* Top bar (same as the v2 theme): contact details, social icons and language switch, floating above the hero */
.v3-topbar { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 1032; background: #03201f99; color: #C9DAD8; font-size: .8125rem; line-height: 1; }
.v3-topbar-in { inline-size: min(100% - 2rem, 76rem); margin-inline: auto; min-block-size: 2.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.v3-topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.25rem; transition: color .16s; }
.v3-topbar a:hover { color: #9DF9ED; }
.v3-topbar-info { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.v3-topbar-social { display: inline-flex; align-items: center; gap: .15rem; margin-inline-start: .35rem; padding-inline-start: .9rem; border-inline-start: 1px solid rgb(157 249 237 / .25); }
.v3-topbar-social a { inline-size: 1.9rem; justify-content: center; }
.v3-ico { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.v3-topbar-lang { display: inline-flex; border: 1px solid rgb(255 255 255 / .25); border-radius: 99px; overflow: hidden; }
.v3-topbar-lang a { padding: .2rem .7rem; min-block-size: 1.9rem; font-weight: 700; }
.v3-topbar-lang a[aria-current="true"] { background: #9DF9ED; color: #03201F; }
/* the classic navbar is absolutely positioned at the top of the hero: slide it below the bar */
body.v3-home .sticky-top { top: 2.25rem !important; }
@media (max-width: 575.98px) {
  .v3-topbar-info a:not(.v3-topbar-social a) { display: none; }
  .v3-topbar-social { margin: 0; padding: 0; border: 0; }
}
.v3-ico-img { inline-size: 1rem; block-size: 1rem; object-fit: contain; opacity: .85; transition: opacity .16s; }
.v3-topbar a:hover .v3-ico-img { opacity: 1; }
.v3-topbar-social .fab { font-size: 1rem; line-height: 1; }
.v3-ico--fill { fill: currentColor; stroke: none; }
/* Facebook and YouTube are drawn on a 24px grid with wide margins: enlarge them so their glyphs match X and Flickr */
.v3-topbar-social .v3-ico:not(.v3-ico--fill) { inline-size: 1.4rem; block-size: 1.4rem; }

/* Stat carousel (hero foot): 15px bold labels and counters */
body.v3-home .stat-carousel, body.v3-home .stat-carousel * { font-size: calc(15px * var(--v3-zoom-stat, 1)) !important; font-weight: 700 !important; }
body.v3-home .stat-carousel .item img { height: calc(24px * var(--v3-zoom-stat, 1)) !important; width: calc(24px * var(--v3-zoom-stat, 1)) !important; }

/* ===== Hero that adapts to the screen height (and width) =====
   The classic hero positions its content absolutely on a video that is exactly one viewport high, so it only fits one
   screen shape. Here the section is a column that is at least one screen high and grows with its content: the video and
   its overlay are backgrounds, the title/carousel block is centred in the free space and the figures sit at the foot. */
body.v3-home .main-banner { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; margin-bottom: 0; }
body.v3-home .main-banner #bg-video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; min-block-size: 0; max-block-size: none; object-fit: cover; }
body.v3-home .main-banner .hero-header { position: relative !important; top: auto !important; margin-top: 0 !important; flex: 1 0 auto; display: flex; align-items: center; z-index: 2; padding-top: calc(7.5rem * var(--v3-zoom-ui, 1)); padding-bottom: 6.4rem; }
body.v3-home .main-banner .hero-header > .container { padding-top: 0 !important; }
body.v3-home .main-banner .hero-header .row { margin-bottom: 0 !important; align-items: flex-start !important; }
body.v3-home .main-banner .header-carousel { margin-top: 70px !important; }
body.v3-home .main-banner .hero-header0.bg-light { position: relative !important; bottom: auto !important; flex: none; z-index: 2; margin: 0; }

/* On desktop screens the title / box / slider block and the stat figures keep the proportions of the 1536 x 730 reference
   design: v3.js measures the screen and sets --v3-zoom (= the largest scale at which that design still fits), and the
   block is zoomed by that factor, so text, slider and images shrink or grow together instead of overlapping. */
@media (min-width: 992px) {
  /* the block is laid out for the reference width (100% / zoom) and then scaled around its centre; a transform is used rather
     than CSS zoom because the jQuery slider measures its width and mis-sizes itself under zoom */
  body.v3-home .main-banner .hero-header > .container {
    max-width: none; width: calc(100% / var(--v3-zoom, 1) - 80px); margin-inline: calc((1 - 1 / var(--v3-zoom, 1)) * 50% + 40px);
    transform: scale(var(--v3-zoom, 1)); transform-origin: 50% 50%;
  }
  body.v3-home .v3-topbar-in, body.v3-home .sticky-top > .container { zoom: var(--v3-zoom-ui, 1); }
  body.v3-home .sticky-top { top: calc(2.25rem * var(--v3-zoom-ui, 1)) !important; }
}
@media (min-width: 992px) { body.v3-home .main-banner .hero-header { padding-bottom: calc(6.4rem * var(--v3-zoom, 1)); } }
@media (min-width: 992px) and (max-height: 700px) { body.v3-home .main-banner .hero-header { padding-top: 6.75rem; } }

/* Menu between 992 and 1279px: tighter items so the whole menu (search and language included) fits */
@media (min-width: 992px) and (max-width: 1279.98px) {
  body.v3-home .header_menu, body.v3-home .header_menu * { font-size: 15px !important; }
  body.v3-home .header_menu .nav-link { padding-inline: .35rem !important; margin: 0 .3rem !important; }
}

/* The slider clips its stage exactly at the container edge, which cut the first digit of the left-most figure on wide screens:
   let it paint a little beyond the edge (the neighbouring clones are centred in their slots, so nothing else shows) */
body.v3-home .stat-carousel .owl-stage-outer { overflow: visible; clip-path: inset(0 -2rem); }