/* Smooth scrolling for anchor links */
html {
scroll-behavior: smooth;
}
/* Offset for fixed header when scrolling to anchors */
[id] {
scroll-margin-top: 120px;
}
.intl-tel-input { position: relative; }
.intl-tel-input .hide { display: none; }
.intl-tel-input .flag-dropdown { position: absolute; z-index: 1; cursor: pointer; }
.intl-tel-input .flag-dropdown .selected-flag { margin: 1px; padding: 6px 16px 6px 6px; }
.intl-tel-input .flag-dropdown .selected-flag:hover { }
.intl-tel-input .flag-dropdown .selected-flag .down-arrow { top: 6px; position: relative; left: 20px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; }
.intl-tel-input .flag-dropdown .country-list { list-style: none; padding: 0; margin: 0; z-index: 1; overflow-y: scroll; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); background-color: white; border: 1px solid #cccccc; position: absolute; top: 29px; width: 330px; max-height: 200px; }
.intl-tel-input .flag-dropdown .country-list .divider { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #cccccc; }
.intl-tel-input .flag-dropdown .country-list .country { line-height: 16px; padding: 4px 10px; }
.intl-tel-input .flag-dropdown .country-list .country .dial-code { color: #999999; }
.intl-tel-input .flag-dropdown .country-list .country.highlight { background-color: rgba(0, 0, 0, 0.05); }
.intl-tel-input .flag-dropdown .country-list .flag { display: inline-block; vertical-align: bottom; }
.intl-tel-input .flag-dropdown .country-list .flag, .intl-tel-input .flag-dropdown .country-list .country-name { margin-right: 6px; }
.intl-tel-input input {
box-sizing: border-box; -moz-box-sizing: border-box; height: 30px; padding-left: 47px; position: relative; z-index: 0;
color:#000;
}
/* originally from https://github.com/lafeber/world-flags-sprite */
.f16 .flag { width: 16px; height: 16px; background: url("../media/images/flags16.png") no-repeat; }
.f16 ._African_Union { background-position: 0 -16px; }
.f16 ._Arab_League { background-position: 0 -32px; }
.f16 ._ASEAN { background-position: 0 -48px; }
.f16 ._CARICOM { background-position: 0 -64px; }
.f16 ._CIS { background-position: 0 -80px; }
.f16 ._Commonwealth { background-position: 0 -96px; }
.f16 ._England { background-position: 0 -112px; }
.f16 ._European_Union { background-position: 0 -128px; }
.f16 ._Islamic_Conference { background-position: 0 -144px; }
.f16 ._Kosovo { background-position: 0 -160px; }
.f16 ._NATO { background-position: 0 -176px; }
.f16 ._Northern_Cyprus { background-position: 0 -192px; }
.f16 ._Northern_Ireland { background-position: 0 -208px; }
.f16 ._Olimpic_Movement { background-position: 0 -224px; }
.f16 ._OPEC { background-position: 0 -240px; }
.f16 ._Red_Cross { background-position: 0 -256px; }
.f16 ._Scotland { background-position: 0 -272px; }
.f16 ._Somaliland { background-position: 0 -288px; }
.f16 ._Tibet { background-position: 0 -304px; }
.f16 ._United_Nations { background-position: 0 -320px; }
.f16 ._Wales { background-position: 0 -336px; }
.f16 .ad { background-position: 0 -352px; }
.f16 .ae { background-position: 0 -368px; }
.f16 .af { background-position: 0 -384px; }
.f16 .ag { background-position: 0 -400px; }
.f16 .ai { background-position: 0 -416px; }
.f16 .al { background-position: 0 -432px; }
.f16 .am { background-position: 0 -448px; }
.f16 .an { background-position: 0 -464px; }
.f16 .ao { background-position: 0 -480px; }
.f16 .aq { background-position: 0 -496px; }
.f16 .ar { background-position: 0 -512px; }
.f16 .as { background-position: 0 -528px; }
.f16 .at { background-position: 0 -544px; }
.f16 .au { background-position: 0 -560px; }
.f16 .aw { background-position: 0 -576px; }
.f16 .az { background-position: 0 -592px; }
.f16 .ba { background-position: 0 -608px; }
.f16 .bb { background-position: 0 -624px; }
.f16 .bd { background-position: 0 -640px; }
.f16 .be { background-position: 0 -656px; }
.f16 .bf { background-position: 0 -672px; }
.f16 .bg { background-position: 0 -688px; }
.f16 .bh { background-position: 0 -704px; }
.f16 .bi { background-position: 0 -720px; }
.f16 .bj { background-position: 0 -736px; }
.f16 .bm { background-position: 0 -752px; }
.f16 .bn { background-position: 0 -768px; }
.f16 .bo { background-position: 0 -784px; }
.f16 .br { background-position: 0 -800px; }
.f16 .bs { background-position: 0 -816px; }
.f16 .bt { background-position: 0 -832px; }
.f16 .bw { background-position: 0 -848px; }
.f16 .by { background-position: 0 -864px; }
.f16 .bz { background-position: 0 -880px; }
.f16 .ca { background-position: 0 -896px; }
.f16 .cg { background-position: 0 -912px; }
.f16 .cf { background-position: 0 -928px; }
.f16 .cd { background-position: 0 -944px; }
.f16 .ch { background-position: 0 -960px; }
.f16 .ci { background-position: 0 -976px; }
.f16 .ck { background-position: 0 -992px; }
.f16 .cl { background-position: 0 -1008px; }
.f16 .cm { background-position: 0 -1024px; }
.f16 .cn { background-position: 0 -1040px; }
.f16 .co { background-position: 0 -1056px; }
.f16 .cr { background-position: 0 -1072px; }
.f16 .cu { background-position: 0 -1088px; }
.f16 .cv { background-position: 0 -1104px; }
.f16 .cy { background-position: 0 -1120px; }
.f16 .cz { background-position: 0 -1136px; }
.f16 .de { background-position: 0 -1152px; }
.f16 .dj { background-position: 0 -1168px; }
.f16 .dk { background-position: 0 -1184px; }
.f16 .dm { background-position: 0 -1200px; }
.f16 .do { background-position: 0 -1216px; }
.f16 .dz { background-position: 0 -1232px; }
.f16 .ec { background-position: 0 -1248px; }
.f16 .ee { background-position: 0 -1264px; }
.f16 .eg { background-position: 0 -1280px; }
.f16 .eh { background-position: 0 -1296px; }
.f16 .er { background-position: 0 -1312px; }
.f16 .es { background-position: 0 -1328px; }
.f16 .et { background-position: 0 -1344px; }
.f16 .fi { background-position: 0 -1360px; }
.f16 .fj { background-position: 0 -1376px; }
.f16 .fm { background-position: 0 -1392px; }
.f16 .fo { background-position: 0 -1408px; }
.f16 .fr { background-position: 0 -1424px; }
.f16 .ga { background-position: 0 -1440px; }
.f16 .gb { background-position: 0 -1456px; }
.f16 .gd { background-position: 0 -1472px; }
.f16 .ge { background-position: 0 -1488px; }
.f16 .gg { background-position: 0 -1504px; }
.f16 .gh { background-position: 0 -1520px; }
.f16 .gi { background-position: 0 -1536px; }
.f16 .gl { background-position: 0 -1552px; }
.f16 .gm { background-position: 0 -1568px; }
.f16 .gn { background-position: 0 -1584px; }
.f16 .gp { background-position: 0 -1600px; }
.f16 .gq { background-position: 0 -1616px; }
.f16 .gr { background-position: 0 -1632px; }
.f16 .gt { background-position: 0 -1648px; }
.f16 .gu { background-position: 0 -1664px; }
.f16 .gw { background-position: 0 -1680px; }
.f16 .gy { background-position: 0 -1696px; }
.f16 .hk { background-position: 0 -1712px; }
.f16 .hn { background-position: 0 -1728px; }
.f16 .hr { background-position: 0 -1744px; }
.f16 .ht { background-position: 0 -1760px; }
.f16 .hu { background-position: 0 -1776px; }
.f16 .id { background-position: 0 -1792px; }
.f16 .mc { background-position: 0 -1792px; }
.f16 .ie { background-position: 0 -1808px; }
.f16 .il { background-position: 0 -1824px; }
.f16 .im { background-position: 0 -1840px; }
.f16 .in { background-position: 0 -1856px; }
.f16 .iq { background-position: 0 -1872px; }
.f16 .ir { background-position: 0 -1888px; }
.f16 .is { background-position: 0 -1904px; }
.f16 .it { background-position: 0 -1920px; }
.f16 .je { background-position: 0 -1936px; }
.f16 .jm { background-position: 0 -1952px; }
.f16 .jo { background-position: 0 -1968px; }
.f16 .jp { background-position: 0 -1984px; }
.f16 .ke { background-position: 0 -2000px; }
.f16 .kg { background-position: 0 -2016px; }
.f16 .kh { background-position: 0 -2032px; }
.f16 .ki { background-position: 0 -2048px; }
.f16 .km { background-position: 0 -2064px; }
.f16 .kn { background-position: 0 -2080px; }
.f16 .kp { background-position: 0 -2096px; }
.f16 .kr { background-position: 0 -2112px; }
.f16 .kw { background-position: 0 -2128px; }
.f16 .ky { background-position: 0 -2144px; }
.f16 .kz { background-position: 0 -2160px; }
.f16 .la { background-position: 0 -2176px; }
.f16 .lb { background-position: 0 -2192px; }
.f16 .lc { background-position: 0 -2208px; }
.f16 .li { background-position: 0 -2224px; }
.f16 .lk { background-position: 0 -2240px; }
.f16 .lr { background-position: 0 -2256px; }
.f16 .ls { background-position: 0 -2272px; }
.f16 .lt { background-position: 0 -2288px; }
.f16 .lu { background-position: 0 -2304px; }
.f16 .lv { background-position: 0 -2320px; }
.f16 .ly { background-position: 0 -2336px; }
.f16 .ma { background-position: 0 -2352px; }
.f16 .md { background-position: 0 -2368px; }
.f16 .me { background-position: 0 -2384px; }
.f16 .mg { background-position: 0 -2400px; }
.f16 .mh { background-position: 0 -2416px; }
.f16 .mk { background-position: 0 -2432px; }
.f16 .ml { background-position: 0 -2448px; }
.f16 .mm { background-position: 0 -2464px; }
.f16 .mn { background-position: 0 -2480px; }
.f16 .mo { background-position: 0 -2496px; }
.f16 .mq { background-position: 0 -2512px; }
.f16 .mr { background-position: 0 -2528px; }
.f16 .ms { background-position: 0 -2544px; }
.f16 .mt { background-position: 0 -2560px; }
.f16 .mu { background-position: 0 -2576px; }
.f16 .mv { background-position: 0 -2592px; }
.f16 .mw { background-position: 0 -2608px; }
.f16 .mx { background-position: 0 -2624px; }
.f16 .my { background-position: 0 -2640px; }
.f16 .mz { background-position: 0 -2656px; }
.f16 .na { background-position: 0 -2672px; }
.f16 .nc { background-position: 0 -2688px; }
.f16 .ne { background-position: 0 -2704px; }
.f16 .ng { background-position: 0 -2720px; }
.f16 .ni { background-position: 0 -2736px; }
.f16 .nl { background-position: 0 -2752px; }
.f16 .no { background-position: 0 -2768px; }
.f16 .np { background-position: 0 -2784px; }
.f16 .nr { background-position: 0 -2800px; }
.f16 .nz { background-position: 0 -2816px; }
.f16 .om { background-position: 0 -2832px; }
.f16 .pa { background-position: 0 -2848px; }
.f16 .pe { background-position: 0 -2864px; }
.f16 .pf { background-position: 0 -2880px; }
.f16 .pg { background-position: 0 -2896px; }
.f16 .ph { background-position: 0 -2912px; }
.f16 .pk { background-position: 0 -2928px; }
.f16 .pl { background-position: 0 -2944px; }
.f16 .pr { background-position: 0 -2960px; }
.f16 .ps { background-position: 0 -2976px; }
.f16 .pt { background-position: 0 -2992px; }
.f16 .pw { background-position: 0 -3008px; }
.f16 .py { background-position: 0 -3024px; }
.f16 .qa { background-position: 0 -3040px; }
.f16 .re { background-position: 0 -3056px; }
.f16 .ro { background-position: 0 -3072px; }
.f16 .rs { background-position: 0 -3088px; }
.f16 .ru { background-position: 0 -3104px; }
.f16 .rw { background-position: 0 -3120px; }
.f16 .sa { background-position: 0 -3136px; }
.f16 .sb { background-position: 0 -3152px; }
.f16 .sc { background-position: 0 -3168px; }
.f16 .sd { background-position: 0 -3184px; }
.f16 .se { background-position: 0 -3200px; }
.f16 .sg { background-position: 0 -3216px; }
.f16 .si { background-position: 0 -3232px; }
.f16 .sk { background-position: 0 -3248px; }
.f16 .sl { background-position: 0 -3264px; }
.f16 .sm { background-position: 0 -3280px; }
.f16 .sn { background-position: 0 -3296px; }
.f16 .so { background-position: 0 -3312px; }
.f16 .sr { background-position: 0 -3328px; }
.f16 .st { background-position: 0 -3344px; }
.f16 .sv { background-position: 0 -3360px; }
.f16 .sy { background-position: 0 -3376px; }
.f16 .sz { background-position: 0 -3392px; }
.f16 .tc { background-position: 0 -3408px; }
.f16 .td { background-position: 0 -3424px; }
.f16 .tg { background-position: 0 -3440px; }
.f16 .th { background-position: 0 -3456px; }
.f16 .tj { background-position: 0 -3472px; }
.f16 .tl { background-position: 0 -3488px; }
.f16 .tm { background-position: 0 -3504px; }
.f16 .tn { background-position: 0 -3520px; }
.f16 .to { background-position: 0 -3536px; }
.f16 .tr { background-position: 0 -3552px; }
.f16 .tt { background-position: 0 -3568px; }
.f16 .tv { background-position: 0 -3584px; }
.f16 .tw { background-position: 0 -3600px; }
.f16 .tz { background-position: 0 -3616px; }
.f16 .ua { background-position: 0 -3632px; }
.f16 .ug { background-position: 0 -3648px; }
.f16 .us { background-position: 0 -3664px; }
.f16 .uy { background-position: 0 -3680px; }
.f16 .uz { background-position: 0 -3696px; }
.f16 .va { background-position: 0 -3712px; }
.f16 .vc { background-position: 0 -3728px; }
.f16 .ve { background-position: 0 -3744px; }
.f16 .vg { background-position: 0 -3760px; }
.f16 .vi { background-position: 0 -3776px; }
.f16 .vn { background-position: 0 -3792px; }
.f16 .vu { background-position: 0 -3808px; }
.f16 .ws { background-position: 0 -3824px; }
.f16 .ye { background-position: 0 -3840px; }
.f16 .za { background-position: 0 -3856px; }
.f16 .zm { background-position: 0 -3872px; }
.f16 .zw { background-position: 0 -3888px; }
.intl-tel-input .input-style{
border:0;
border-bottom:1px solid #fff;
background-color:transparent;
height:40px;
padding: 10px 30px 10px 40px;
font-size: 18px;
width: 100%;
-webkit-transition: ease all 0.5s;
transition: ease all 0.5s;
}
.intl-tel-input .input-style::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color:#000;
opacity: 1;
}
.intl-tel-input .flag-dropdown .selected-flag {
margin: 1px;
padding: 11px 0px 11px 0px;
}
.intl-tel-input input{
padding-left: 57px;
}
.side-menu
.dropdown-menu{
position: relative;
}
.side-menu .drop-down a:after{
display: none;
}
/* */
.site-change{
position: relative;
}
.site-change .country-dd-menu {
background-color: #FAEB00;
position: absolute;
padding: 7px 10px;
z-index: 10;
right: 0;
top: 40px;
opacity: 0;
visibility: hidden;
-webkit-transition: ease all 0.5s;
transition: ease all 0.5s;
min-width: 80px;
}
.site-change:hover .country-dd-menu {
opacity: 1;
visibility: visible;
top:30px;
}
.site-change .country-dd-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-change .country-dd-menu ul li a {
color: #000;
}
.site-change .country-dd-menu:before {
content: '';
position: absolute;
border-bottom: 10px solid #FAEB00;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
right: 15px;
top: -9px;
}
.chart1 iframe{
min-height:400px;
}
.testimonial .owl-carousel .owl-item img{
width: 100%;
height: 100%;
object-fit: cover;
}
.country-dd .country-dd-menu ul li .ll a{
width: 100%;
}
.unhcr-navbar.navbar .nav-item.active .nav-link {
color: #fff;
}
.f-social-media a svg {
fill:#fff!important;
opacity:.4
}
.f-social-media a:hover svg {
fill: #FAEB00!important;
opacity:1
}
@media(max-width:991px){
.chart1 iframe {
min-height: 290px;
}
.chart1{
height: auto;
}
.header .header-top {
top: 0;
background-color: transparent;
position: relative;
margin: 0;
padding: 1rem 0;
display: flex;
justify-content: space-between;
}
.social-media-header {
margin: 0!important;
}
.top-header-toggle-bar {
display: none;
}
.header {
padding-top: 0;
padding-bottom: 0;
}
.header-bottom {
position: relative;
}
.language-wrapper p,
.social-media-header p {display: none;}
button.navbar-toggler {
display: block!important;
padding: 0!important;
}
.header-right {
right: 20px;
top: 0px;
margin: 0;
}
}
@media(max-width:767px){
.chart1 iframe {
min-height: 190px;
}
}
@media(max-width:767px){
/* .header .header-top {
top: 0;
background-color: transparent;
position: relative;
margin: 0;
padding: 1rem 0;
display: flex;
justify-content: space-between;
}
.social-media-header {
margin: 0!important;
}
.top-header-toggle-bar {
display: none;
}
.header {
padding-top: 0;
padding-bottom: 0;
}
.header-bottom {
position: relative;
}
.language-wrapper p,
.social-media-header p {display: none;}
button.navbar-toggler {
display: block!important;
padding: 0!important;
}
.header-right {
right: 20px;
top: 0px;
margin: 0;
} */
}
img[src="https://sp.analytics.yahoo.com/spp.pl?a=10000&.yp=10080075"] {display:none}
.rtl .sk-box .bottom .rm2{letter-spacing:0px;}
.sd-section .scroll-height {
overflow: hidden auto;
}
/** Update the alignement of the titles in the right section of the page 'executive-summary' **/
/* section.v-gap.bg-light-blue.refugee_list p,
.title.no-badge {
width: 100%;
text-align: left;
}
[lang="ar"] .title.no-badge,
[lang="ar"] section.v-gap.bg-light-blue.refugee_list p {
text-align: right!important;
width: 100%;
} */
/* =====================================================
ANNUAL REPORT 2025 - CUSTOM STYLES
===================================================== */
/* Hero Section 2025 */
.hero-2025 {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
align-items: flex-end;
padding-bottom: 80px;
}
.hero-2025 .hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hero-2025 .hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-2025 .hero-bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0) 70%);
z-index: 1;
}
.hero-2025 .hero-content {
position: relative;
z-index: 3;
padding: 0 40px 0 60px;
max-width: 650px;
margin-bottom: 280px;
}
.hero-2025 .hero-title {
margin-bottom: 10px;
}
.hero-2025 .hero-title h1 {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 72px;
line-height: 1.1;
margin: 0;
color: #000;
}
.hero-2025 .hero-title h1 span {
background-color: #FAEB00;
display: inline;
padding: 0 10px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
/*Randa*/
line-height: 1.4;
}
.hero-2025 .hero-subtitle {
font-family: 'Proxima Nova', sans-serif;
font-weight: 600;
font-size: 22px;
letter-spacing: 2px;
color: #fff;
text-transform: uppercase;
margin-bottom: 40px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
/* Hero Arrow - Independent positioning */
.hero-2025 .hero-arrow {
position: absolute;
bottom: 270px;
left: 100px;
z-index: 4;
animation: bounce 2s infinite;
}
.hero-2025 .hero-arrow img {
height: 80px;
width: auto;
}
/* Watch Video Button - Independent positioning */
.hero-2025 .hero-watch-video {
position: absolute;
bottom: 230px;
left: 110px;
z-index: 4;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: 3px;
color: #FAEB00;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
}
.hero-2025 .hero-watch-video:hover {
color: #fff;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(10px);
}
60% {
transform: translateY(5px);
}
}
/* Hero Circle Ring Decoration */
.hero-2025 .hero-circle-ring {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
z-index: 2;
pointer-events: none;
}
.hero-2025 .hero-circle-ring img {
width: 100%;
height: auto;
display: block;
}
/* Hero 2025 Responsive */
@media (max-width: 991px) {
.hero-2025 .hero-title h1 {
font-size: 52px;
}
.hero-2025 .hero-subtitle {
font-size: 18px;
}
.hero-2025 .hero-content {
padding: 0 30px;
margin-bottom: 200px;
}
.hero-2025 .hero-arrow {
bottom: 160px;
left: 100px;
}
.hero-2025 .hero-watch-video {
bottom: 100px;
left: 60px;
}
}
@media (max-width: 767px) {
.hero-2025 {
min-height: 100vh;
padding-bottom: 0;
}
.hero-2025 .hero-title h1 {
font-size: 38px;
}
.hero-2025 .hero-subtitle {
font-size: 14px;
letter-spacing: 1px;
}
.hero-2025 .hero-content {
padding: 0 20px;
margin-bottom: 280px;
}
.hero-2025 .hero-circle-ring {
bottom: 50px;
width: 150%;
left: -10%;
}
.hero-2025 .hero-arrow {
bottom: 220px;
left: 30px;
}
.hero-2025 .hero-arrow img {
height: 50px;
}
.hero-2025 .hero-watch-video {
bottom: 170px;
left: 30px;
font-size: 12px;
letter-spacing: 2px;
}
}
@media (max-width: 480px) {
.hero-2025 .hero-title h1 {
font-size: 32px;
}
.hero-2025 .hero-subtitle {
font-size: 12px;
}
.hero-2025 .hero-content {
margin-bottom: 260px;
}
.hero-2025 .hero-circle-ring {
bottom: 80px;
width: 170%;
left: -5%;
}
.hero-2025 .hero-arrow {
bottom: 200px;
left: 25px;
}
.hero-2025 .hero-arrow img {
height: 45px;
}
.hero-2025 .hero-watch-video {
bottom: 155px;
left: 25px;
font-size: 11px;
letter-spacing: 1.5px;
}
}
/* Introduction Section 2025 */
.intro-section-2025 {
padding: 0 0 80px 0;
position: relative;
z-index: 5;
}
.intro-section-2025::before {
content: '';
position: absolute;
top: 80px;
left: 0;
right: 0;
bottom: 0;
background-color: #FAEB00;
z-index: -1;
}
.intro-section-2025 .intro-container-wrapper {
background-color: #fff;
padding: 60px 50px;
margin-top: -80px;
margin-left: 40px;
margin-right: 40px;
position: relative;
z-index: 6;
}
.intro-section-2025 .intro-header {
margin-bottom: 50px;
}
.intro-section-2025 .intro-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
color: #0072BC;
text-transform: uppercase;
margin-bottom: 15px;
}
.intro-section-2025 .intro-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 42px;
line-height: 1.2;
color: #1a1a1a;
margin: 0;
}
.intro-section-2025 .intro-card {
display: flex;
gap: 40px;
align-items: flex-start;
}
.intro-section-2025 .intro-image-wrapper {
flex-shrink: 0;
position: relative;
width: 250px;
margin-right: 20px;
}
.intro-section-2025 .intro-image-frame {
position: absolute;
top: -15px;
right: -15px;
width: 100%;
height: 100%;
border: 4px solid #FAEB00;
z-index: 0;
pointer-events: none;
}
.intro-section-2025 .intro-image-frame .frame-bg {
display: none;
}
.intro-section-2025 .intro-image {
position: relative;
width: 100%;
height: auto;
display: block;
z-index: 1;
}
.intro-section-2025 .intro-content {
flex: 1;
}
.intro-section-2025 .intro-author {
margin-bottom: 20px;
}
.intro-section-2025 .intro-author-name {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 26px;
color: #1a1a1a;
margin: 0 0 5px 0;
}
.intro-section-2025 .intro-author-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 400;
font-size: 16px;
color: #666;
margin: 0 0 2px 0;
}
.intro-section-2025 .intro-author-org {
font-family: 'Proxima Nova', sans-serif;
font-weight: 600;
font-size: 16px;
color: #1a1a1a;
margin: 0;
}
.intro-section-2025 .intro-text {
font-family: 'Proxima Nova', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #444;
margin-bottom: 25px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.intro-section-2025 .intro-text p {
margin: 0;
}
.intro-section-2025 .btn-read-more {
display: inline-block;
background-color: #0072BC;
color: #fff;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 15px 35px;
text-decoration: none;
transition: all 0.3s ease;
}
.intro-section-2025 .btn-read-more:hover {
background-color: #005a96;
color: #fff;
}
/* Introduction Section 2025 Responsive */
@media (max-width: 991px) {
.intro-section-2025::before {
top: 100px;
}
.intro-section-2025 .intro-container-wrapper {
margin-left: 30px;
margin-right: 30px;
padding: 50px 40px;
margin-top: -100px;
}
.intro-section-2025 .intro-title {
font-size: 34px;
}
.intro-section-2025 .intro-card {
gap: 30px;
}
.intro-section-2025 .intro-image-wrapper {
width: 200px;
}
.intro-section-2025 .intro-image-frame {
top: -10px;
right: -10px;
border-width: 3px;
}
}
@media (max-width: 767px) {
.intro-section-2025 {
padding-bottom: 50px;
}
.intro-section-2025::before {
top: 80px;
}
.intro-section-2025 .intro-container-wrapper {
margin-left: 20px;
margin-right: 20px;
padding: 40px 25px;
margin-top: -80px;
}
.intro-section-2025 .intro-title {
font-size: 28px;
}
.intro-section-2025 .intro-card {
flex-direction: column;
gap: 25px;
}
.intro-section-2025 .intro-image-wrapper {
width: 100%;
max-width: 220px;
margin-right: 0;
margin-bottom: 10px;
}
.intro-section-2025 .intro-image-frame {
top: -10px;
right: -10px;
}
.intro-section-2025 .intro-author-name {
font-size: 22px;
}
}
/* RTL Support for 2025 Sections */
.rtl .hero-2025 .hero-content {
text-align: right;
}
.rtl .hero-2025 .hero-bg::after {
background: linear-gradient(to left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
}
/* RTL: Flip the circle ring so the blue circle sits on the right side */
.rtl .hero-2025 .hero-circle-ring img {
transform: scaleX(-1);
}
/* RTL: Move arrow and watch video to the right side (next to the flipped circle) */
.rtl .hero-2025 .hero-arrow {
left: auto;
right: 100px;
}
.rtl .hero-2025 .hero-watch-video {
left: auto;
right: 110px;
}
@media (max-width: 991px) {
.rtl .hero-2025 .hero-arrow {
left: auto;
right: 100px;
}
.rtl .hero-2025 .hero-watch-video {
left: auto;
right: 60px;
}
}
@media (max-width: 767px) {
.rtl .hero-2025 .hero-arrow {
left: auto;
right: 30px;
}
.rtl .hero-2025 .hero-watch-video {
left: auto;
right: 30px;
}
/* The circle ring image is flipped with scaleX(-1) for RTL, but the LTR
mobile positioning (left: -10%, width: 150%) would then push the blue
circle (which ends up on the right side after the flip) off-screen.
Shift it the same amount on the right instead so it's visible. */
.rtl .hero-2025 .hero-circle-ring {
left: auto;
right: -10%;
}
}
@media (max-width: 480px) {
.rtl .hero-2025 .hero-arrow {
left: auto;
right: 25px;
}
.rtl .hero-2025 .hero-watch-video {
left: auto;
right: 25px;
}
.rtl .hero-2025 .hero-circle-ring {
left: auto;
right: -5%;
}
}
/* RTL intro frame is handled by the image itself */
.rtl .intro-section-2025 .intro-card {
flex-direction: row-reverse;
}
@media (max-width: 767px) {
.rtl .intro-section-2025 .intro-card {
flex-direction: column;
}
}
/* ==========================================================================
Executive Summary Section 2025
========================================================================== */
.exec-summary-2025 {
position: relative;
background-color: #fff;
overflow: visible;
padding-bottom: 80px;
}
/* Yellow Bar Decoration at Top */
.exec-summary-2025 .exec-summary-top-decoration {
position: absolute;
top: 80px;
left: 0;
width: 60%;
z-index: 5;
pointer-events: none;
}
.exec-summary-2025 .exec-summary-top-decoration img {
width: 100%;
height: auto;
display: block;
}
.exec-summary-2025 .exec-summary-wrapper {
display: flex;
align-items: stretch;
min-height: 700px;
position: relative;
padding-top: 120px;
}
/* Left Image - positioned to allow overlap */
.exec-summary-2025 .exec-summary-image {
flex: 0 0 25%;
position: relative;
overflow: hidden;
z-index: 1;
}
.exec-summary-2025 .exec-summary-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
}
/* Right Content Area */
.exec-summary-2025 .exec-summary-content-area {
flex: 1;
padding: 60px 60px 60px 0;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 3;
margin-left: -80px;
}
/* Label - outside the box, top layer */
.exec-summary-2025 .exec-summary-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #0072BC;
margin-bottom: 15px;
margin-left: 100px;
position: relative;
z-index: 5;
}
/* Title with yellow highlight - overlaps the white box */
.exec-summary-2025 .exec-summary-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 42px;
line-height: 1.6;
color: #000;
margin: 0 0 0 90px;
position: relative;
z-index: 5;
}
.exec-summary-2025 .exec-summary-title span {
background-color: #FAEB00;
padding: 2px 15px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
/* White content box - overlaps the image */
.exec-summary-2025 .exec-summary-content-box {
background-color: #fff;
padding: 40px 50px;
margin-top: -20px;
margin-left: 40px;
position: relative;
z-index: 4;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
.exec-summary-2025 .exec-summary-text {
font-family: 'Proxima Nova', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #444;
margin-bottom: 30px;
}
.exec-summary-2025 .exec-summary-text p {
margin: 0 0 20px 0;
}
.exec-summary-2025 .exec-summary-text p:last-child {
margin-bottom: 0;
}
.exec-summary-2025 .btn-read-more {
display: inline-block;
background-color: #0072BC;
color: #fff;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 15px 35px;
text-decoration: none;
transition: all 0.3s ease;
}
.exec-summary-2025 .btn-read-more:hover {
background-color: #005a96;
color: #fff;
}
/* Blue Triangle Decoration - front layer */
.exec-summary-2025 .exec-summary-decoration {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
pointer-events: none;
z-index: 10;
}
.exec-summary-2025 .exec-summary-decoration img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
}
/* Executive Summary 2025 Responsive */
@media (max-width: 1199px) {
.exec-summary-2025 .exec-summary-content-area {
padding: 50px 40px 50px 0;
}
.exec-summary-2025 .exec-summary-title {
font-size: 36px;
}
.exec-summary-2025 .exec-summary-content-box {
padding: 35px 40px;
margin-left: 30px;
}
}
@media (max-width: 991px) {
.exec-summary-2025 .exec-summary-wrapper {
flex-direction: column;
min-height: auto;
padding-top: 80px;
}
.exec-summary-2025 .exec-summary-top-decoration {
top: 40px;
width: 80%;
}
.exec-summary-2025 .exec-summary-image {
flex: none;
height: 400px;
z-index: 1;
}
.exec-summary-2025 .exec-summary-content-area {
padding: 30px 40px;
margin-left: 0;
margin-top: 0;
z-index: 2;
position: relative;
}
.exec-summary-2025 .exec-summary-label {
margin-left: 0;
}
.exec-summary-2025 .exec-summary-title {
font-size: 32px;
margin-left: 0;
}
.exec-summary-2025 .exec-summary-content-box {
margin-left: 0;
padding: 30px;
}
}
@media (max-width: 767px) {
.exec-summary-2025 .exec-summary-wrapper {
padding-top: 60px;
}
.exec-summary-2025 .exec-summary-top-decoration {
top: 20px;
width: 90%;
}
.exec-summary-2025 .exec-summary-image {
height: 350px;
z-index: 1;
}
.exec-summary-2025 .exec-summary-content-area {
padding: 20px 20px 30px;
margin-top: 0;
z-index: 2;
position: relative;
}
.exec-summary-2025 .exec-summary-label {
margin-left: 0;
margin-bottom: 10px;
}
.exec-summary-2025 .exec-summary-title {
font-size: 26px;
margin-left: 0;
}
.exec-summary-2025 .exec-summary-content-box {
padding: 25px 20px;
margin-left: 0;
}
}
/* Executive Summary 2025 RTL - Mirror entire layout */
/* Note: With direction:rtl on body, flex-direction:row already flows right-to-left */
/* We need to ensure LTR direction on wrapper so flexbox behaves predictably */
.rtl .exec-summary-2025 .exec-summary-wrapper {
direction: ltr;
flex-direction: row-reverse !important;
}
.rtl .exec-summary-2025 .exec-summary-image {
/* Image on right side for RTL */
}
.rtl .exec-summary-2025 .exec-summary-image img {
object-position: center left;
}
.rtl .exec-summary-2025 .exec-summary-content-area {
direction: rtl;
padding: 60px 0 60px 60px;
margin-left: 0;
margin-right: -80px;
text-align: right;
}
.rtl .exec-summary-2025 .exec-summary-content-box {
margin-left: 0;
margin-right: 40px;
}
/* RTL: Title and label aligned to right edge (inner side in RTL) */
.rtl .exec-summary-2025 .exec-summary-title {
margin-left: 0;
margin-right: 90px;
}
.rtl .exec-summary-2025 .exec-summary-label {
margin-left: 0;
margin-right: 100px;
}
/* RTL: Yellow bar decoration on right side */
.rtl .exec-summary-2025 .exec-summary-top-decoration {
left: auto;
right: 0;
}
.rtl .exec-summary-2025 .exec-summary-top-decoration img {
transform: scaleX(-1);
}
/* RTL: Blue triangle decoration on left side */
.rtl .exec-summary-2025 .exec-summary-decoration {
right: auto;
left: 0;
}
.rtl .exec-summary-2025 .exec-summary-decoration img {
margin-left: 0;
margin-right: auto;
transform: scaleX(-1);
}
@media (max-width: 991px) {
.rtl .exec-summary-2025 .exec-summary-wrapper {
flex-direction: column !important;
}
.rtl .exec-summary-2025 .exec-summary-content-area {
padding: 40px;
margin-left: 0;
margin-right: 0;
margin-top: -60px;
}
.rtl .exec-summary-2025 .exec-summary-content-box {
margin-left: 0;
margin-right: 0;
}
.rtl .exec-summary-2025 .exec-summary-title {
margin-left: 0;
margin-right: 60px;
}
.rtl .exec-summary-2025 .exec-summary-label {
margin-left: 0;
margin-right: 40px;
}
}
@media (max-width: 767px) {
.rtl .exec-summary-2025 .exec-summary-content-area {
padding: 20px 20px 30px;
margin-top: 0;
}
.rtl .exec-summary-2025 .exec-summary-title {
margin-left: 0;
margin-right: 0;
}
.rtl .exec-summary-2025 .exec-summary-label {
margin-left: 0;
margin-right: 0;
}
}
/* ==========================================================================
Impact Section 2025
========================================================================== */
.impact-section-2025 {
position: relative;
padding: 80px 0;
background-color: #f5f5f5;
overflow: hidden;
}
/* Decorative Shapes */
.impact-section-2025 .impact-shape-left {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 80px;
z-index: 1;
pointer-events: none;
}
.impact-section-2025 .impact-shape-left img {
width: 100%;
height: auto;
}
.impact-section-2025 .impact-shape-right {
position: absolute;
right: 0;
top: 0;
width: 120px;
z-index: 1;
pointer-events: none;
}
.impact-section-2025 .impact-shape-right img {
width: 100%;
height: auto;
}
/* Main Card */
.impact-section-2025 .impact-card {
background-color: #fff;
border: 1px solid #e0e0e0;
padding: 50px;
position: relative;
z-index: 2;
}
/* Header */
.impact-section-2025 .impact-header {
margin-bottom: 30px;
}
.impact-section-2025 .impact-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #0072BC;
margin-bottom: 10px;
}
.impact-section-2025 .impact-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 42px;
line-height: 1.2;
color: #000;
margin: 0;
}
.impact-section-2025 .impact-title span {
background-color: #FAEB00;
padding: 5px 15px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
/* Tab Navigation */
.impact-section-2025 .impact-tabs {
margin-bottom: 40px;
}
.impact-section-2025 .impact-tabs .nav-pills {
background-color: #0072BC;
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
}
.impact-section-2025 .impact-tabs .nav-item {
flex: 1;
}
.impact-section-2025 .impact-tabs .nav-link {
display: block;
width: 100%;
padding: 15px 20px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
text-align: center;
background: transparent;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.3s ease;
}
.impact-section-2025 .impact-tabs .nav-item:last-child .nav-link {
border-right: none;
}
.impact-section-2025 .impact-tabs .nav-link:hover,
.impact-section-2025 .impact-tabs .nav-link.active {
background-color: rgba(255, 255, 255, 0.15);
}
/* Tab Content */
.impact-section-2025 .impact-content {
min-height: 400px;
}
.impact-section-2025 .impact-embed-content {
text-align: center;
}
.impact-section-2025 .impact-embed-content img {
max-width: 100%;
height: auto;
}
/* Inner Tabbed Content */
.impact-section-2025 .impact-tabbed-inner {
display: flex;
gap: 30px;
}
.impact-section-2025 .impact-inner-nav {
flex: 0 0 200px;
}
.impact-section-2025 .impact-inner-nav .nav-tabs {
flex-direction: column;
border: none;
}
.impact-section-2025 .impact-inner-nav .nav-link {
text-align: left;
padding: 15px 20px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 600;
font-size: 14px;
color: #333;
background-color: #f5f5f5;
border: none;
margin-bottom: 5px;
transition: all 0.3s ease;
}
.impact-section-2025 .impact-inner-nav .nav-link:hover,
.impact-section-2025 .impact-inner-nav .nav-link.active {
background-color: #0072BC;
color: #fff;
}
.impact-section-2025 .impact-inner-content {
flex: 1;
}
/* Stats Row */
.impact-section-2025 .impact-stats-row {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 30px;
}
.impact-section-2025 .impact-stat-item {
background-color: #FAEB00;
padding: 25px 30px;
text-align: center;
min-width: 200px;
}
.impact-section-2025 .impact-stat-item .icon {
display: block;
margin-bottom: 10px;
}
.impact-section-2025 .impact-stat-item .icon img {
width: 40px;
height: auto;
}
.impact-section-2025 .impact-stat-item h3 {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 36px;
color: #000;
margin: 0 0 5px 0;
}
.impact-section-2025 .impact-stat-item p {
font-family: 'Proxima Nova', sans-serif;
font-weight: 400;
font-size: 14px;
color: #333;
margin: 0;
}
/* Impact Section 2025 Responsive */
@media (max-width: 1199px) {
.impact-section-2025 .impact-card {
padding: 40px;
}
.impact-section-2025 .impact-title {
font-size: 36px;
}
}
@media (max-width: 991px) {
.impact-section-2025 .impact-shape-left,
.impact-section-2025 .impact-shape-right {
display: none;
}
.impact-section-2025 .impact-card {
padding: 30px;
}
.impact-section-2025 .impact-title {
font-size: 32px;
}
.impact-section-2025 .impact-tabs .nav-link {
font-size: 11px;
padding: 12px 10px;
}
.impact-section-2025 .impact-tabbed-inner {
flex-direction: column;
}
.impact-section-2025 .impact-inner-nav {
flex: none;
}
.impact-section-2025 .impact-inner-nav .nav-tabs {
flex-direction: row;
flex-wrap: wrap;
}
.impact-section-2025 .impact-inner-nav .nav-link {
flex: 1;
text-align: center;
min-width: 100px;
}
}
@media (max-width: 767px) {
.impact-section-2025 {
padding: 50px 0;
}
.impact-section-2025 .impact-card {
padding: 25px 20px;
}
.impact-section-2025 .impact-title {
font-size: 26px;
}
.impact-section-2025 .impact-tabs .nav-pills {
flex-direction: column;
}
.impact-section-2025 .impact-tabs .nav-link {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.impact-section-2025 .impact-tabs .nav-item:last-child .nav-link {
border-bottom: none;
}
.impact-section-2025 .impact-stats-row {
flex-direction: column;
}
.impact-section-2025 .impact-stat-item {
min-width: auto;
}
}
/* Impact Section 2025 RTL */
.rtl .impact-section-2025 .impact-shape-left {
left: auto;
right: 0;
}
.rtl .impact-section-2025 .impact-shape-right {
right: auto;
left: 0;
}
.rtl .impact-section-2025 .impact-inner-nav .nav-link {
text-align: right;
}
/* ==========================================================================
New Operations Section 2025
========================================================================== */
.new-operations-2025 {
position: relative;
background-color: #f5f5f5;
overflow: hidden;
}
.new-operations-2025 .new-operations-wrapper {
display: flex;
min-height: 600px;
}
/* Left: Yellow Content Area - Overlaps the image */
.new-operations-2025 .new-operations-content {
flex: 0 0 50.75%;
background-color: #FAEB00;
display: flex;
align-items: center;
justify-content: center;
padding: 60px;
position: relative;
z-index: 3;
margin-right: -80px;
}
.new-operations-2025 .new-operations-inner {
max-width: 500px;
}
.new-operations-2025 .new-operations-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 42px;
line-height: 1.2;
color: #000;
margin: 0 0 30px 0;
}
.new-operations-2025 .new-operations-text {
font-family: 'Proxima Nova', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.7;
color: #333;
margin-bottom: 30px;
}
.new-operations-2025 .new-operations-text p {
margin: 0 0 20px 0;
}
.new-operations-2025 .new-operations-text p:last-child {
margin-bottom: 0;
}
.new-operations-2025 .btn-read-more {
display: inline-block;
background-color: #0072BC;
color: #fff;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 15px 35px;
text-decoration: none;
transition: all 0.3s ease;
}
.new-operations-2025 .btn-read-more:hover {
background-color: #005a96;
color: #fff;
}
/* Right: Featured Image */
.new-operations-2025 .new-operations-image {
flex: 1;
position: relative;
overflow: hidden;
z-index: 1;
}
.new-operations-2025 .new-operations-image > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Blue Circle Decoration - Full Width */
.new-operations-2025 .new-operations-circle {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
z-index: 2;
pointer-events: none;
}
.new-operations-2025 .new-operations-circle img {
width: 100%;
height: auto;
display: block;
}
/* New Operations 2025 Responsive */
@media (max-width: 1199px) {
.new-operations-2025 .new-operations-content {
padding: 50px 40px;
}
.new-operations-2025 .new-operations-title {
font-size: 36px;
}
}
@media (max-width: 991px) {
.new-operations-2025 .new-operations-wrapper {
flex-direction: column;
min-height: auto;
}
.new-operations-2025 .new-operations-content {
flex: none;
padding: 50px 40px;
margin-right: 0;
margin-bottom: -60px;
}
.new-operations-2025 .new-operations-image {
height: 400px;
}
.new-operations-2025 .new-operations-title {
font-size: 32px;
}
}
@media (max-width: 767px) {
.new-operations-2025 .new-operations-content {
padding: 40px 25px;
}
.new-operations-2025 .new-operations-image {
height: 300px;
}
.new-operations-2025 .new-operations-title {
font-size: 28px;
}
.new-operations-2025 .new-operations-text {
font-size: 14px;
}
}
/* New Operations 2025 RTL */
/* Note: With direction:rtl on body, flex needs LTR context to use row-reverse properly */
.rtl .new-operations-2025 .new-operations-wrapper {
direction: ltr;
flex-direction: row-reverse;
}
.rtl .new-operations-2025 .new-operations-content {
direction: rtl;
text-align: right;
margin-right: 0;
margin-left: -80px;
}
.rtl .new-operations-2025 .new-operations-circle {
right: auto;
left: 0;
transform: scaleX(-1);
}
@media (max-width: 991px) {
.rtl .new-operations-2025 .new-operations-wrapper {
flex-direction: column;
}
.rtl .new-operations-2025 .new-operations-content {
margin-left: 0;
margin-bottom: -60px;
}
}
/* ==========================================================================
Stories from the Field Section 2025
========================================================================== */
.stories-section-2025 {
position: relative;
padding: 80px 0 100px;
background-color: #fff;
overflow: hidden;
}
/* Blue Shape Decoration - Right */
.stories-section-2025 .stories-shape-blue {
position: absolute;
top: 0;
right: 0;
width: 100%;
z-index: 1;
pointer-events: none;
}
.stories-section-2025 .stories-shape-blue img {
width: 100%;
height: auto;
display: block;
}
/* Black Shape Decoration - Bottom Left */
.stories-section-2025 .stories-shape-black {
position: absolute;
bottom: 0;
left: 0;
width: 25%;
z-index: 1;
pointer-events: none;
}
.stories-section-2025 .stories-shape-black img {
width: 100%;
height: auto;
display: block;
}
/* Header */
.stories-section-2025 .stories-header {
margin-bottom: 50px;
position: relative;
z-index: 2;
}
.stories-section-2025 .stories-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #0072BC;
margin-bottom: 10px;
}
.stories-section-2025 .stories-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 42px;
line-height: 1.2;
color: #000;
margin: 0;
}
.stories-section-2025 .stories-title span {
background-color: #FAEB00;
padding: 5px 15px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
/* Stories Grid */
.stories-section-2025 .stories-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
position: relative;
z-index: 2;
}
.stories-section-2025 .stories-item {
width: 100%;
}
.stories-section-2025 .stories-card {
display: block;
text-decoration: none;
position: relative;
height: 100%;
}
.stories-section-2025 .stories-image {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
border-radius: 8px;
}
.stories-section-2025 .stories-image picture {
display: block;
width: 100%;
height: 100%;
}
.stories-section-2025 .stories-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Yellow Frame - Hover Effect on All Stories */
.stories-section-2025 .stories-card {
position: relative;
display: block;
}
.stories-section-2025 .stories-card::before {
content: '';
position: absolute;
top: -15px;
left: 15px;
right: 15px;
bottom: 20px;
border: 4px solid #FAEB00;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 3;
}
.stories-section-2025 .stories-card:hover::before {
opacity: 1;
}
/* Story Content - Overlays bottom of image on Hover */
.stories-section-2025 .stories-content {
position: absolute;
bottom: 20px;
left: 15px;
right: 15px;
padding: 60px 25px 25px 25px;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.stories-section-2025 .stories-card:hover .stories-content {
opacity: 1;
pointer-events: auto;
}
.stories-section-2025 .stories-name {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 22px;
color: #fff;
margin: 0 0 10px 0;
}
.stories-section-2025 .stories-excerpt {
font-family: 'Proxima Nova', sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 1.6;
color: #fff;
margin: 0;
}
/* Stories Section 2025 Responsive */
@media (max-width: 1199px) {
.stories-section-2025 .stories-title {
font-size: 36px;
}
}
@media (max-width: 991px) {
.stories-section-2025 {
padding: 60px 0 80px;
}
.stories-section-2025 .stories-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stories-section-2025 .stories-item {
margin-bottom: 20px;
}
.stories-section-2025 .stories-title {
font-size: 32px;
}
.stories-section-2025 .stories-shape-black {
width: 35%;
}
}
/*Randa*/
@media (min-width: 767px) {
/*Mid year 2026 Report - Hide the background blue on the right section*/
.stories-section-2025 .stories-shape-blue img{
display: none;
}
/*Make the 2 items full screen*/
.stories-section-2025 .stories-grid {
display: flex;
}
}
@media (max-width: 767px) {
.stories-section-2025 {
padding: 50px 0 60px;
}
.stories-section-2025 .stories-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.stories-section-2025 .stories-title {
font-size: 28px;
}
.stories-section-2025 .stories-name {
font-size: 18px;
}
.stories-section-2025 .stories-shape-black {
width: 50%;
}
/* Always show content and frame on mobile (no hover) */
.stories-section-2025 .stories-card::before {
opacity: 1;
top: -10px;
left: 10px;
right: 10px;
bottom: 15px;
border-width: 3px;
}
.stories-section-2025 .stories-content {
opacity: 1;
pointer-events: auto;
left: 10px;
right: 10px;
bottom: 15px;
padding: 40px 15px 15px 15px;
}
.stories-section-2025 .stories-excerpt {
font-size: 12px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Stories Section 2025 RTL */
.rtl .stories-section-2025 .stories-shape-blue {
right: auto;
left: 0;
transform: scaleX(-1);
}
.rtl .stories-section-2025 .stories-shape-black {
left: auto;
right: 0;
transform: scaleX(-1);
}
.rtl .stories-section-2025 .stories-content {
text-align: right;
}
/* ==========================================================================
Key Highlights Section 2025
========================================================================== */
.highlights-section-2025 {
position: relative;
padding: 80px 0 100px;
background-color: #f8f8f8;
overflow: visible;
}
/* Yellow Shape Decoration - Top Right - Overlaps into Stories section */
.highlights-section-2025 .highlights-shape {
position: absolute;
top: -80px;
right: 0;
width: 100%;
z-index: 1;
pointer-events: none;
}
.highlights-section-2025 .highlights-shape img {
width: 100%;
height: auto;
display: block;
}
/* Header */
.highlights-section-2025 .highlights-header {
margin-bottom: 50px;
position: relative;
z-index: 2;
}
.highlights-section-2025 .highlights-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #0072BC;
margin-bottom: 10px;
}
.highlights-section-2025 .highlights-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 42px;
line-height: 1.2;
color: #000;
margin: 0;
}
.highlights-section-2025 .highlights-title span {
background-color: #FAEB00;
padding: 5px 15px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
/* Highlights Grid - supports 2, 3, or 4 active items */
.highlights-section-2025 .highlights-grid {
display: flex;
gap: 25px;
position: relative;
z-index: 2;
flex-wrap: wrap;
}
.highlights-section-2025 .highlights-grid.highlights-grid-4 .highlights-item {
flex: 0 0 calc(25% - 19px);
}
.highlights-section-2025 .highlights-grid.highlights-grid-3 .highlights-item {
flex: 0 0 calc(33.333% - 17px);
}
.highlights-section-2025 .highlights-grid.highlights-grid-2 .highlights-item {
flex: 0 0 calc(50% - 13px);
}
.highlights-section-2025 .highlights-item {
flex: 1;
min-width: 0;
}
.highlights-section-2025 .highlights-card {
display: block;
text-decoration: none;
position: relative;
}
.highlights-section-2025 .highlights-image {
position: relative;
overflow: hidden;
}
.highlights-section-2025 .highlights-image picture {
display: block;
width: 100%;
}
.highlights-section-2025 .highlights-image img {
width: 100%;
height: auto;
display: block;
}
/* Yellow Frame - Hover Effect */
.highlights-section-2025 .highlights-card::before {
content: '';
position: absolute;
top: -15px;
left: 15px;
right: 15px;
bottom: 20px;
border: 4px solid #FAEB00;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 3;
}
.highlights-section-2025 .highlights-card:hover::before {
opacity: 1;
}
/* Highlight Content - Overlays bottom of image on Hover */
.highlights-section-2025 .highlights-content {
position: absolute;
bottom: 20px;
left: 15px;
right: 15px;
padding: 60px 25px 25px 25px;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.highlights-section-2025 .highlights-card:hover .highlights-content {
opacity: 1;
pointer-events: auto;
}
.highlights-section-2025 .highlights-name {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 22px;
color: #FAEB00;
margin: 0 0 10px 0;
}
.highlights-section-2025 .highlights-excerpt {
font-family: 'Proxima Nova', sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 1.6;
color: #fff;
margin: 0;
}
/* Highlights Section 2025 Responsive */
@media (max-width: 1199px) {
.highlights-section-2025 .highlights-title {
font-size: 36px;
}
}
@media (max-width: 991px) {
.highlights-section-2025 {
padding: 60px 0 80px;
}
.highlights-section-2025 .highlights-grid {
flex-wrap: wrap;
}
/* Match the specificity of the desktop .highlights-grid-4 / -3 / -2 rules
so the mobile override actually wins. */
.highlights-section-2025 .highlights-grid.highlights-grid-4 .highlights-item,
.highlights-section-2025 .highlights-grid.highlights-grid-3 .highlights-item,
.highlights-section-2025 .highlights-grid.highlights-grid-2 .highlights-item,
.highlights-section-2025 .highlights-item {
flex: 0 0 calc(50% - 15px);
margin-bottom: 30px;
}
.highlights-section-2025 .highlights-title {
font-size: 32px;
}
}
@media (max-width: 767px) {
.highlights-section-2025 {
padding: 50px 0 60px;
}
.highlights-section-2025 .highlights-grid.highlights-grid-4 .highlights-item,
.highlights-section-2025 .highlights-grid.highlights-grid-3 .highlights-item,
.highlights-section-2025 .highlights-grid.highlights-grid-2 .highlights-item,
.highlights-section-2025 .highlights-item {
flex: 0 0 100%;
}
.highlights-section-2025 .highlights-title {
font-size: 28px;
}
.highlights-section-2025 .highlights-name {
font-size: 18px;
}
/* Always show content and frame on mobile (no hover) */
.highlights-section-2025 .highlights-card::before {
opacity: 1;
top: -10px;
left: 10px;
right: 10px;
bottom: 15px;
border-width: 3px;
}
.highlights-section-2025 .highlights-content {
opacity: 1;
pointer-events: auto;
left: 10px;
right: 10px;
bottom: 15px;
padding: 40px 15px 15px 15px;
}
.highlights-section-2025 .highlights-excerpt {
font-size: 12px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Highlights Section 2025 RTL */
.rtl .highlights-section-2025 .highlights-shape {
right: auto;
left: 0;
transform: scaleX(-1);
}
.rtl .highlights-section-2025 .highlights-content {
text-align: right;
}
/* ==========================================================================
Partnerships Section 2025
========================================================================== */
.partnerships-section-2025 {
background-color: transparent;
padding: 80px 0;
position: relative;
z-index: 15;
}
/* Yellow Bar Background behind the box */
.partnerships-section-2025::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 200px;
background-color: #FAEB00;
transform: translateY(-50%);
z-index: 0;
}
.partnerships-section-2025 > .container {
position: relative;
z-index: 1;
}
.partnerships-section-2025 .partnerships-header {
text-align: center;
margin-bottom: 30px;
padding-top: 30px;
}
.partnerships-section-2025 .partnerships-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
color: #0072BC;
margin-bottom: 15px;
text-transform: uppercase;
}
.partnerships-section-2025 .partnerships-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 42px;
color: #000;
margin: 0;
/*Randa*/
/*display: inline-block;*/
display: none;
}
.partnerships-section-2025 .partnerships-title span {
background-color: #FAEB00;
padding: 5px 15px;
display: inline-block;
}
/* Black Border Frame - Wraps both sections */
.partnerships-section-2025 .partnerships-frame {
border: 3px solid #000;
padding: 40px 40px 50px;
max-width: 1100px;
margin: 0 auto;
background-color: #fff;
}
/* Partnerships Grid */
.partnerships-section-2025 .partnerships-grid {
display: flex;
gap: 40px;
justify-content: space-between;
margin-bottom: 60px;
}
.partnerships-section-2025 .partnership-card {
flex: 1;
text-align: left;
}
.partnerships-section-2025 .partnership-logo {
height: 100px;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.partnerships-section-2025 .partnership-logo img {
max-height: 100px;
width: auto;
object-fit: contain;
}
.partnerships-section-2025 .partnership-name {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 18px;
color: #000;
margin: 0 0 12px 0;
}
.partnerships-section-2025 .partnership-description {
font-family: 'Proxima Nova', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.6;
color: #333;
}
.partnerships-section-2025 .partnership-description p {
margin: 0;
}
.partnerships-section-2025 .partnership-card {
display: flex;
flex-direction: column;
}
.partnerships-section-2025 .partnership-description {
flex: 1 1 auto;
margin-bottom: 15px;
}
.partnerships-section-2025 .partnership-read-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
color: #00AEEF;
text-decoration: none;
margin-top: auto;
padding-top: 10px;
transition: color 0.3s ease, transform 0.3s ease;
}
.partnerships-section-2025 .partnership-read-more:hover {
color: #005D6E;
text-decoration: none;
}
.partnerships-section-2025 .partnership-read-more i {
transition: transform 0.3s ease;
}
.partnerships-section-2025 .partnership-read-more:hover i {
transform: translateX(4px);
}
.rtl .partnerships-section-2025 .partnership-read-more i {
transform: scaleX(-1);
}
.rtl .partnerships-section-2025 .partnership-read-more:hover i {
transform: scaleX(-1) translateX(4px);
}
/* Partners Across the Globe */
.partnerships-section-2025 .partners-globe {
text-align: center;
}
.partnerships-section-2025 .partners-globe-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 36px;
color: #000;
margin: 0 0 40px 0;
display: inline-block;
}
.partnerships-section-2025 .partners-globe-title span {
background-color: #FAEB00;
padding: 5px 20px;
display: inline-block;
}
/* Partners Carousel */
.partnerships-section-2025 .partners-carousel-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.partnerships-section-2025 .partners-arrow {
background: none;
border: none;
cursor: pointer;
padding: 10px;
flex-shrink: 0;
transition: opacity 0.3s ease;
}
.partnerships-section-2025 .partners-arrow:hover {
opacity: 0.7;
}
.partnerships-section-2025 .partners-arrow img {
width: 40px;
height: auto;
}
.partnerships-section-2025 .partners-carousel {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
overflow: hidden;
}
.partnerships-section-2025 .partner-logo-item {
display: flex;
align-items: center;
justify-content: center;
}
.partnerships-section-2025 .partner-logo-item img {
max-height: 110px;
max-width: 180px;
width: auto;
object-fit: contain;
filter: grayscale(0);
transition: filter 0.3s ease;
}
.partnerships-section-2025 .partner-logo-item:hover img {
filter: grayscale(0);
}
/* Partnerships Section 2025 Responsive */
@media (max-width: 1199px) {
.partnerships-section-2025 .partnerships-title {
font-size: 36px;
}
.partnerships-section-2025 .partnerships-grid {
gap: 30px;
}
}
@media (max-width: 991px) {
.partnerships-section-2025 {
padding: 60px 0;
}
.partnerships-section-2025 .partnerships-focus {
margin-bottom: 60px;
}
.partnerships-section-2025 .partnerships-grid {
flex-wrap: wrap;
}
.partnerships-section-2025 .partnership-card {
flex: 0 0 calc(50% - 20px);
margin-bottom: 30px;
}
.partnerships-section-2025 .partnerships-frame {
padding: 30px;
}
}
@media (max-width: 767px) {
.partnerships-section-2025 {
padding: 50px 0;
}
.partnerships-section-2025 .partnerships-title {
font-size: 28px;
}
.partnerships-section-2025 .partners-globe-title {
font-size: 28px;
}
.partnerships-section-2025 .partnership-card {
flex: 0 0 100%;
}
.partnerships-section-2025 .partnerships-frame {
padding: 20px;
}
.partnerships-section-2025 .partners-arrow img {
width: 30px;
}
.partnerships-section-2025 .partners-carousel {
gap: 20px;
}
.partnerships-section-2025 .partner-logo-item img {
max-height: 70px;
max-width: 120px;
}
}
/* Partnerships Section 2025 RTL */
.rtl .partnerships-section-2025 .partnership-card {
text-align: right;
}
.rtl .partnerships-section-2025 .partners-arrow-left {
order: 2;
}
.rtl .partnerships-section-2025 .partners-arrow-right {
order: 0;
}
.rtl .partnerships-section-2025 .partners-carousel {
order: 1;
}
/* ==========================================================================
About Us Section 2025
========================================================================== */
.about-section-2025 {
position: relative;
background-color: transparent;
overflow: visible;
padding-bottom: 0;
margin-top: -120px; /* Overlap behind partnerships section */
z-index: 5;
}
.about-section-2025 .about-wrapper {
display: flex;
align-items: stretch;
min-height: 500px;
position: relative;
overflow: visible;
}
/* Left: Image Area */
.about-section-2025 .about-image-area {
flex: 0 0 40%;
position: relative;
overflow: visible;
z-index: 10;
margin-top: -100px;
}
.about-section-2025 .about-image {
position: relative;
z-index: 1;
height: 100%;
}
.about-section-2025 .about-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-section-2025 .about-circle-decoration {
position: absolute;
top: 10%;
left: -50px;
transform: translateY(-50%);
z-index: 2;
pointer-events: none;
}
.about-section-2025 .about-circle-decoration img {
width: auto;
height: auto;
max-width: none;
max-height: 350px;
}
.about-section-2025 .about-image {
height: 100%;
}
.about-section-2025 .about-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/* The desktop layout computes the section height from this image's
natural proportions, so a landscape photo used to collapse the whole
section and break the overlap with the partnerships card (seen on the
FR live home, 2026-09 feedback). Locking the design's portrait ratio
(about-bg-2025.jpg = 1050x1698) keeps the section geometry identical
for any uploaded photo - other ratios are simply center-cropped.
Below 992px the image area has a fixed height, so this has no effect
there. */
aspect-ratio: 1050 / 1698;
}
/* Right: Content Area - Same design as Executive Summary */
.about-section-2025 .about-content-area {
flex: 1;
padding: 60px 60px 60px 0;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 15;
margin-left: -80px;
}
/* Label - outside the box, top layer */
.about-section-2025 .about-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #0072BC;
margin-bottom: 15px;
margin-left: 100px;
position: relative;
z-index: 5;
}
/* Title with yellow highlight - overlaps the white box */
.about-section-2025 .about-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 42px;
line-height: 1.2;
color: #000;
margin: 0 0 0 90px;
position: relative;
z-index: 5;
}
.about-section-2025 .about-title span {
background-color: #FAEB00;
padding: 5px 15px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
/* White content box - overlaps the image */
.about-section-2025 .about-content-box {
background-color: #fff;
padding: 40px 50px;
margin-top: -20px;
margin-left: 0;
position: relative;
z-index: 4;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
.about-section-2025 .about-text {
font-family: 'Proxima Nova', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #444;
margin-bottom: 30px;
}
.about-section-2025 .about-text p {
margin: 0 0 20px 0;
}
.about-section-2025 .about-text p:last-child {
margin-bottom: 0;
}
.about-section-2025 .btn-read-more {
display: inline-block;
background-color: #0072BC;
color: #fff;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 15px 35px;
text-decoration: none;
transition: all 0.3s ease;
}
.about-section-2025 .btn-read-more:hover {
background-color: #005a96;
color: #fff;
}
/* Blue Triangle Decoration - Full Width */
.about-section-2025 .about-triangle-decoration {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
pointer-events: none;
z-index: 11;
}
.about-section-2025 .about-triangle-decoration img {
width: 100%;
height: auto;
display: block;
}
/* Bottom Bars Decoration - Full Width */
.about-section-2025 .about-bottom-decoration {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
pointer-events: none;
z-index: 10;
}
.about-section-2025 .about-bottom-decoration img {
width: 100%;
height: auto;
display: block;
}
/* About Section 2025 Responsive */
@media (max-width: 1199px) {
.about-section-2025 .about-content-area {
padding: 50px 40px 50px 0;
}
.about-section-2025 .about-title {
font-size: 36px;
}
.about-section-2025 .about-content-box {
padding: 35px 40px;
margin-left: 30px;
}
}
@media (max-width: 991px) {
.about-section-2025 {
margin-top: -80px;
}
.about-section-2025 .about-wrapper {
flex-direction: column;
min-height: auto;
}
.about-section-2025 .about-image-area {
flex: none;
height: 350px;
margin-top: -60px;
}
.about-section-2025 .about-content-area {
padding: 40px;
margin-left: 0;
margin-top: -60px;
}
.about-section-2025 .about-label {
margin-left: 40px;
}
.about-section-2025 .about-title {
font-size: 32px;
margin-left: 60px;
}
.about-section-2025 .about-content-box {
margin-left: 0;
padding: 30px;
}
.about-section-2025 .about-circle-decoration {
left: -50px;
}
.about-section-2025 .about-circle-decoration img {
max-height: 250px;
}
}
@media (max-width: 767px) {
.about-section-2025 {
margin-top: -60px;
}
.about-section-2025 .about-image-area {
height: 280px;
margin-top: -40px;
z-index: 1;
}
.about-section-2025 .about-content-area {
padding: 20px 20px 30px;
margin-top: 0;
z-index: 2;
position: relative;
}
.about-section-2025 .about-label {
margin-left: 0;
margin-bottom: 10px;
}
.about-section-2025 .about-title {
font-size: 26px;
margin-left: 0;
}
.about-section-2025 .about-content-box {
padding: 25px 20px;
margin-left: 0;
}
.about-section-2025 .about-circle-decoration {
left: -40px;
}
.about-section-2025 .about-circle-decoration img {
max-height: 180px;
}
}
/* About Section 2025 RTL */
/* Note: With direction:rtl on body, flex needs LTR context to use row-reverse properly */
.rtl .about-section-2025 .about-wrapper {
direction: ltr;
flex-direction: row-reverse;
}
.rtl .about-section-2025 .about-content-area {
direction: rtl;
padding: 60px 0 60px 60px;
margin-left: 0;
margin-right: -80px;
text-align: right;
}
.rtl .about-section-2025 .about-image-area {
direction: ltr;
position: relative;
}
.rtl .about-section-2025 .about-label {
margin-left: 0;
margin-right: 100px;
}
.rtl .about-section-2025 .about-title {
margin-left: 0;
margin-right: 90px;
}
.rtl .about-section-2025 .about-content-box {
margin-left: 0;
margin-right: 40px;
}
.rtl .about-section-2025 .about-circle-decoration {
left: auto !important;
right: -80px;
transform: translateY(-50%) scaleX(-1);
}
.rtl .about-section-2025 .about-triangle-decoration {
transform: scaleX(-1);
}
.rtl .about-section-2025 .about-bottom-decoration {
transform: scaleX(-1);
}
@media (max-width: 991px) {
.rtl .about-section-2025 .about-wrapper {
flex-direction: column;
}
.rtl .about-section-2025 .about-content-area {
padding: 40px;
margin-right: 0;
margin-top: -60px;
}
.rtl .about-section-2025 .about-label {
margin-right: 40px;
}
.rtl .about-section-2025 .about-title {
margin-right: 60px;
}
.rtl .about-section-2025 .about-content-box {
margin-right: 0;
}
.rtl .about-section-2025 .about-circle-decoration {
left: auto !important;
right: -50px;
}
}
@media (max-width: 767px) {
.rtl .about-section-2025 .about-content-area {
padding: 20px 20px 30px;
margin-top: 0;
}
.rtl .about-section-2025 .about-label {
margin-right: 0;
}
.rtl .about-section-2025 .about-title {
margin-right: 0;
}
}
/* ==========================================================================
Footer 2025
========================================================================== */
.footer-2025 {
font-family: 'Proxima Nova', sans-serif;
}
.footer-2025-main {
background-color: #024b6c;
padding: 60px 0;
padding-top: 180px;
margin-top: -120px;
position: relative;
z-index: 1;
}
.footer-2025-wrapper {
display: flex;
flex-direction: column;
gap: 40px;
}
/* Logos */
.footer-2025-logos {
display: flex;
align-items: center;
gap: 30px;
}
.footer-2025-logos img {
filter: brightness(0) invert(1);
}
.footer-2025-logos .footer-unhcr-logo {
height: 60px;
width: auto;
}
.footer-2025-logos .footer-rzf-logo {
height: 50px;
width: auto;
}
/* Content Columns */
.footer-2025-content {
display: flex;
gap: 80px;
}
.footer-2025-about {
flex: 0 0 60%;
padding-right: 40px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-2025-giving {
flex: 1;
}
.footer-2025-title {
font-size: 24px;
font-weight: 700;
color: #fff;
margin: 0 0 20px 0;
}
.footer-2025-text {
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 25px 0;
}
/* Social Icons */
.footer-2025-social {
display: flex;
gap: 12px;
}
.footer-2025-social .social-icon {
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
text-decoration: none;
transition: all 0.3s ease;
}
.footer-2025-social .social-icon:hover {
background-color: #fff;
color: #024b6c;
border-color: #fff;
}
.footer-2025-social .social-icon-x svg {
width: 16px;
height: 16px;
fill: #fff;
transition: fill 0.3s ease;
}
.footer-2025-social .social-icon-x:hover svg {
fill: #024b6c;
}
/* Links */
.footer-2025-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-2025-links li {
margin-bottom: 12px;
}
.footer-2025-links li a {
font-size: 15px;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-2025-links li a:hover {
color: #FAEB00;
}
/* Bottom Bar */
.footer-2025-bottom {
background-color: #000;
padding: 25px 0;
}
.footer-2025-copyright {
font-size: 14px;
color: #fff;
margin: 0 0 15px 0;
}
.footer-2025-disclaimer {
font-size: 12px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
/* Footer 2025 Responsive */
@media (max-width: 991px) {
.footer-2025-content {
flex-direction: column;
gap: 40px;
}
.footer-2025-about {
flex: none;
padding-right: 0;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding-bottom: 40px;
}
}
@media (max-width: 767px) {
.footer-2025-main {
padding: 40px 0;
padding-top: 60px;
margin-top: 0;
z-index: 20;
}
.footer-2025-logos {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.footer-2025-title {
font-size: 20px;
}
}
/* Footer 2025 RTL */
.rtl .footer-2025-about {
padding-right: 0;
padding-left: 40px;
border-right: none;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.rtl .footer-2025-text {
text-align: right;
}
.rtl .footer-2025-links {
text-align: right;
}
@media (max-width: 991px) {
.rtl .footer-2025-about {
padding-left: 0;
border-left: none;
}
}
/* ==========================================================================
Single Story 2025
========================================================================== */
.single-story-2025 {
background-color: #fff;
}
/* ===== VIDEO HERO STYLE ===== */
/* Transparent header for story pages */
.single-story-2025 header.header,
.single-story-2025 header.header.blackbg {
background: transparent !important;
position: absolute;
width: 100%;
z-index: 100;
}
.single-story-2025 header.header.sticky-nav,
.single-story-2025 header.header.blackbg.sticky-nav {
background: #00A0DF !important;
position: fixed;
top: 0;
left: 0;
right: 0;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
.single-story-2025.video-hero-style .story-video-hero,
.single-story-2025 .story-image-hero,
.single-story-2025 .story-slider-hero {
position: relative;
height: 100vh;
min-height: 600px;
overflow: hidden;
padding-top: 0; /* Header is absolute positioned over hero */
}
.video-hero-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.video-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
/* YouTube poster background (when using YouTube instead of local video) */
.video-hero-bg.video-hero-poster {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.video-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.6) 100%);
z-index: 2;
}
.video-hero-content {
position: absolute;
bottom: 150px;
left: 0;
right: 0;
z-index: 3;
}
.video-hero-text {
max-width: 700px;
}
.video-hero-label {
display: inline-block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 4px;
text-transform: uppercase;
color: #000;
background-color: #FAEB00;
padding: 12px 30px;
border-radius: 30px;
margin-bottom: 25px;
}
.video-hero-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 64px;
line-height: 1.1;
color: #fff;
margin: 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.video-hero-title small {
font-size: 32px;
font-weight: 400;
opacity: 0.9;
}
.video-play-btn {
position: absolute;
bottom: 150px;
right: 80px;
z-index: 5;
display: flex;
align-items: center;
gap: 15px;
color: #fff;
text-decoration: none;
font-family: 'Proxima Nova', sans-serif;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
transition: all 0.3s ease;
}
.video-play-btn:hover {
color: #FAEB00;
}
.video-play-btn .play-icon {
width: 70px;
height: 70px;
border: 3px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.video-play-btn:hover .play-icon {
border-color: #FAEB00;
background-color: #FAEB00;
}
.video-play-btn:hover .play-icon svg path {
fill: #000;
}
.video-scroll-indicator,
.slider-scroll-indicator,
.highlight-scroll-indicator {
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: opacity 0.3s ease;
}
.video-scroll-indicator:hover,
.slider-scroll-indicator:hover,
.highlight-scroll-indicator:hover {
color: #fff !important;
opacity: 1;
text-decoration: none;
}
.scroll-to-content {
scroll-behavior: smooth;
}
html {
scroll-behavior: smooth;
}
#story-content,
#highlight-content {
scroll-margin-top: 80px;
}
.video-scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
text-align: center;
color: rgba(255,255,255,0.7);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
}
.scroll-arrow {
width: 20px;
height: 30px;
border: 2px solid rgba(255,255,255,0.5);
border-radius: 10px;
margin: 10px auto 0;
position: relative;
}
.scroll-arrow::before {
content: '';
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
background-color: #FAEB00;
border-radius: 50%;
animation: scrollBounce 2s infinite;
}
@keyframes scrollBounce {
0%, 100% { top: 8px; opacity: 1; }
50% { top: 30px; opacity: 0.3; }
}
.video-hero-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 10px;
background-color: #FAEB00;
z-index: 10;
}
/* Image Hero Fallback */
.story-image-hero {
position: relative;
height: 70vh;
min-height: 500px;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
}
.image-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
}
.image-hero-content {
position: relative;
z-index: 2;
padding-bottom: 80px;
padding-left: 60px;
}
.video-hero-content .container {
padding-left: 60px;
}
.image-hero-label {
display: inline-block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 4px;
text-transform: uppercase;
color: #000;
background-color: #FAEB00;
padding: 12px 30px;
border-radius: 30px;
margin-bottom: 20px;
}
.image-hero-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 56px;
line-height: 1.1;
color: #fff;
margin: 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.image-hero-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 10px;
background-color: #FAEB00;
}
/* ===== SLIDER HERO STYLE ===== */
.story-slider-hero {
position: relative;
height: 100vh;
min-height: 600px;
overflow: hidden;
}
.slider-hero-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.story-hero-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.story-hero-slider,
.story-hero-slider .owl-stage-outer,
.story-hero-slider .owl-stage,
.story-hero-slider .owl-item,
.story-hero-slider .slider-slide {
height: 100% !important;
}
.slider-slide {
width: 100%;
height: 100%;
position: relative;
}
.slider-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.slider-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.6) 100%);
z-index: 2;
pointer-events: none;
}
.slider-hero-content {
position: absolute;
bottom: 150px;
left: 0;
right: 0;
z-index: 3;
padding-left: 60px;
}
.slider-hero-text {
max-width: 700px;
}
.slider-hero-label {
display: inline-block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 4px;
text-transform: uppercase;
color: #000;
background-color: #FAEB00;
padding: 12px 30px;
border-radius: 30px;
margin-bottom: 25px;
}
.slider-hero-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 64px;
line-height: 1.1;
color: #fff;
margin: 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.slider-hero-title small {
font-size: 32px;
font-weight: 400;
opacity: 0.9;
}
/* Slider Navigation */
.slider-nav {
position: absolute;
bottom: 150px;
right: 80px;
z-index: 5;
display: flex;
gap: 15px;
}
.slider-nav button {
width: 50px;
height: 50px;
border: 2px solid #fff;
border-radius: 50%;
background: transparent;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.slider-nav button:hover {
background: #FAEB00;
border-color: #FAEB00;
color: #000;
}
.slider-scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
text-align: center;
color: rgba(255,255,255,0.7);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
}
.slider-hero-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 10px;
background-color: #FAEB00;
z-index: 10;
}
/* Responsive */
@media (max-width: 991px) {
.slider-hero-title {
font-size: 48px;
}
.slider-hero-title small {
font-size: 24px;
}
.slider-nav {
right: 40px;
bottom: 120px;
}
.slider-hero-content {
bottom: 120px;
padding-left: 40px;
}
}
@media (max-width: 767px) {
.story-slider-hero {
height: 80vh;
min-height: 500px;
}
.slider-hero-title {
font-size: 36px;
}
.slider-hero-title small {
font-size: 20px;
}
.slider-hero-label {
font-size: 12px;
padding: 10px 20px;
}
.slider-nav {
right: 20px;
bottom: 100px;
}
.slider-nav button {
width: 40px;
height: 40px;
font-size: 14px;
}
.slider-hero-content {
bottom: 100px;
padding-left: 20px;
}
}
/* Content Section for Video Hero Style */
.single-story-2025.video-hero-style .story-content-2025 {
padding: 80px 0 100px;
background-color: #f8f8f8;
}
.single-story-2025.video-hero-style .story-content-wrapper {
background-color: #fff;
padding: 60px 70px;
box-shadow: 0 15px 50px rgba(0,0,0,0.08);
border-radius: 10px;
margin-top: -100px;
position: relative;
z-index: 10;
}
.story-share-top {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
font-family: 'Proxima Nova', sans-serif;
font-size: 14px;
color: #666;
}
.story-share-top a {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #01a0e0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.story-share-top a:hover {
background-color: #024b6c;
}
.story-share-top a svg {
width: 14px;
height: 14px;
}
.story-share-top a svg path {
fill: #fff;
}
/* Responsive */
@media (max-width: 991px) {
.video-hero-title {
font-size: 48px;
}
.video-hero-title small {
font-size: 24px;
}
.video-play-btn {
right: 40px;
bottom: 120px;
}
.video-hero-content {
bottom: 120px;
}
}
@media (max-width: 767px) {
.single-story-2025.video-hero-style .story-video-hero {
height: 80vh;
min-height: 500px;
}
.video-hero-title {
font-size: 36px;
}
.video-hero-title small {
font-size: 20px;
}
.video-hero-label {
font-size: 12px;
padding: 10px 20px;
}
.video-play-btn {
right: 20px;
bottom: 100px;
}
.video-play-btn span {
display: none;
}
.video-play-btn .play-icon {
width: 50px;
height: 50px;
}
.video-hero-content {
bottom: 100px;
}
.single-story-2025.video-hero-style .story-content-wrapper {
padding: 40px 30px;
margin-top: -60px;
}
.image-hero-title {
font-size: 36px;
}
}
/* Hero Section */
.story-hero-2025 {
position: relative;
padding: 60px 0 100px;
overflow: visible;
}
.story-hero-wrapper {
display: flex;
align-items: stretch;
max-width: 1400px;
margin: 0 auto;
padding: 0 30px;
min-height: 500px;
}
/* Left: Featured Image */
.story-hero-image {
flex: 0 0 45%;
position: relative;
z-index: 2;
}
.story-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.story-image-frame {
position: absolute;
top: 20px;
left: 20px;
right: -20px;
bottom: -20px;
border: 3px solid #FAEB00;
z-index: -1;
}
/* Right: Content */
.story-hero-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px 60px;
background-color: #f8f8f8;
margin-left: -60px;
z-index: 1;
}
.story-hero-inner {
max-width: 600px;
}
.story-breadcrumb {
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
.story-breadcrumb a {
color: #0072BC;
text-decoration: none;
}
.story-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #0072BC;
margin-bottom: 15px;
}
.story-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 42px;
line-height: 1.2;
color: #000;
margin: 0 0 25px 0;
}
.story-title span {
background-color: #FAEB00;
padding: 5px 15px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
.story-excerpt {
font-family: 'Proxima Nova', sans-serif;
font-size: 16px;
line-height: 1.7;
color: #555;
margin-bottom: 30px;
}
.story-excerpt p {
margin: 0;
}
/* Social Share */
.story-share {
display: flex;
align-items: center;
gap: 12px;
}
.story-share .share-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 600;
font-size: 14px;
color: #333;
}
.story-share .share-icon {
width: 36px;
height: 36px;
border: 1px solid #ddd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
}
.story-share .share-icon:hover {
background-color: #0072BC;
border-color: #0072BC;
color: #fff;
}
.story-share .share-icon svg {
width: 14px;
height: 14px;
}
/* Hero Decoration */
.story-hero-decoration {
position: absolute;
bottom: 0;
right: 0;
width: 40%;
pointer-events: none;
z-index: 0;
}
.story-hero-decoration img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
}
/* Video Section */
.story-video-2025 {
padding: 60px 0;
background-color: #fff;
}
.story-video-wrapper {
position: relative;
max-width: 900px;
margin: 0 auto;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.story-video-wrapper .video-poster {
width: 100%;
display: block;
}
.story-video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
z-index: 2;
}
.story-video-play .play-button {
width: 80px;
height: 80px;
background-color: #FAEB00;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 24px;
transition: all 0.3s ease;
}
.story-video-play:hover .play-button {
transform: scale(1.1);
background-color: #0072BC;
color: #fff;
}
.story-video-play .play-text {
margin-top: 15px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* Content Section */
.story-content-2025 {
padding: 80px 0;
background-color: #fff;
position: relative;
}
.story-content-wrapper {
background-color: #fff;
}
.story-content-wrapper .content-heading {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 28px;
color: #000;
margin: 0 0 30px 0;
padding-bottom: 20px;
border-bottom: 3px solid #FAEB00;
}
.story-text {
font-family: 'Proxima Nova', sans-serif;
font-size: 17px;
line-height: 1.8;
color: #444;
}
.story-text p {
margin: 0 0 25px 0;
}
.story-text p:last-child {
margin-bottom: 0;
}
.story-text h2, .story-text h3, .story-text h4 {
font-weight: 700;
color: #000;
margin: 40px 0 20px 0;
}
.story-text blockquote {
border-left: 4px solid #FAEB00;
padding: 20px 30px;
margin: 30px 0;
background-color: #f8f8f8;
font-style: italic;
font-size: 18px;
color: #333;
}
.featured-heading {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 22px;
color: #0072BC;
margin: 40px 0 0 0;
}
.story-content-decoration {
position: absolute;
bottom: -50px;
left: 0;
width: 30%;
pointer-events: none;
z-index: 10;
}
.story-content-decoration img {
width: 100%;
height: auto;
}
/* Related Stories Section */
.related-stories-2025 {
padding: 100px 0 80px;
background-color: #f5f5f5;
position: relative;
overflow: hidden;
}
.related-header {
text-align: center;
margin-bottom: 50px;
}
.related-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #0072BC;
margin-bottom: 15px;
}
.related-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 36px;
color: #000;
margin: 0;
}
.related-title span {
background-color: #FAEB00;
padding: 5px 20px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.related-card {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.related-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.related-card-image {
position: relative;
height: 220px;
overflow: hidden;
}
.related-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.related-card:hover .related-card-image img {
transform: scale(1.05);
}
.related-card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3));
}
.related-card-content {
padding: 25px;
}
.related-card-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 20px;
color: #000;
margin: 0 0 12px 0;
line-height: 1.3;
}
.related-card-excerpt {
font-family: 'Proxima Nova', sans-serif;
font-size: 14px;
line-height: 1.6;
color: #666;
margin: 0 0 20px 0;
}
.related-card-link {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
color: #0072BC;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.3s ease;
}
.related-card-link:hover {
gap: 12px;
}
.related-decoration {
position: absolute;
bottom: 0;
right: 0;
width: 35%;
pointer-events: none;
}
.related-decoration img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
}
/* Single Story 2025 Responsive */
@media (max-width: 1199px) {
.story-title {
font-size: 36px;
}
.story-hero-content {
padding: 30px 40px;
}
}
@media (max-width: 991px) {
.story-hero-wrapper {
flex-direction: column;
}
.story-hero-image {
flex: none;
height: 400px;
}
.story-image-frame {
display: none;
}
.story-hero-content {
margin-left: 0;
margin-top: -40px;
padding: 40px 30px;
}
.story-title {
font-size: 32px;
}
.related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.story-hero-2025 {
padding: 40px 0 80px;
}
.story-hero-image {
height: 300px;
}
.story-title {
font-size: 26px;
}
.story-content-2025 {
padding: 50px 0;
}
.related-grid {
grid-template-columns: 1fr;
}
.related-stories-2025 {
padding: 60px 0;
}
}
/* Single Story 2025 RTL */
.rtl .story-hero-wrapper {
flex-direction: row-reverse;
}
.rtl .story-hero-content {
margin-left: 0;
margin-right: -60px;
text-align: right;
}
.rtl .story-image-frame {
left: -20px;
right: 20px;
}
.rtl .story-share {
justify-content: flex-end;
}
.rtl .story-hero-decoration {
right: auto;
left: 0;
transform: scaleX(-1);
}
.rtl .story-content-decoration {
left: auto;
right: 0;
transform: scaleX(-1);
}
.rtl .story-text blockquote {
border-left: none;
border-right: 4px solid #FAEB00;
}
.rtl .related-decoration {
right: auto;
left: 0;
transform: scaleX(-1);
}
@media (max-width: 991px) {
.rtl .story-hero-wrapper {
flex-direction: column;
}
.rtl .story-hero-content {
margin-right: 0;
}
}
/* ==========================================================================
Single Foreword 2025
========================================================================== */
.single-foreword-2025 {
background-color: #f4f4f4;
}
/* ---------- Hero ---------- */
.foreword-hero-2025 {
position: relative;
background-color: #01a0e0;
padding: 0;
overflow: visible;
z-index: 1;
}
.foreword-hero-wrapper {
display: flex;
align-items: flex-start;
gap: 55px;
padding-top: 150px; /* clear the fixed header (~108px) */
padding-bottom: 150px;
position: relative;
z-index: 1;
}
/* Photo with offset yellow frame */
.foreword-photo {
flex: 0 0 360px;
max-width: 360px;
position: relative;
z-index: 3;
}
.foreword-photo-frame {
position: relative;
}
.foreword-photo-frame::before {
content: '';
position: absolute;
top: -18px;
right: -18px;
left: 14px;
bottom: 14px;
border: 5px solid #FAEB00;
z-index: 0;
pointer-events: none;
}
.foreword-photo-frame img {
width: 100%;
height: auto;
display: block;
position: relative;
z-index: 1;
}
/* Info */
.foreword-info {
flex: 1;
padding-top: 30px;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.foreword-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
margin-bottom: 14px;
}
.foreword-name {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 44px;
line-height: 1.25;
color: #0b0b0b;
margin: 0 0 22px 0;
}
.foreword-name span {
background-color: #FAEB00;
padding: 4px 16px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
.foreword-role {
font-family: 'Proxima Nova', sans-serif;
font-size: 18px;
line-height: 1.6;
color: #eaf5ff;
}
.foreword-role p { margin: 0 0 4px 0; color: #eaf5ff; }
/* Back to main */
.foreword-back-main {
display: inline-flex;
align-items: center;
gap: 14px;
align-self: flex-end;
margin-top: 60px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #FAEB00;
text-decoration: none;
transition: opacity .25s ease;
}
.foreword-back-main:hover { color: #FAEB00; opacity: .8; }
.foreword-back-main svg { display: block; color: #fff; } /* white arrow, yellow text (2026-07 feedback) */
/* ---------- Content card ---------- */
.foreword-content-2025 {
position: relative;
background-color: transparent;
padding: 0 0 90px;
margin-top: -110px; /* pull the whole card section up, in front of the blue hero */
z-index: 3;
}
/* Full-width yellow bar behind the white card. It starts BELOW the card's top
edge so the card visibly cuts into the blue first, then the yellow band
follows underneath (blue → yellow → grey layering in the page gutters). */
.foreword-content-2025::before {
content: '';
position: absolute;
top: 55px;
left: 0;
width: 100%;
height: 115px;
background-color: #FAEB00;
z-index: 1;
}
.foreword-content-wrapper {
position: relative;
z-index: 2; /* white card in front of the yellow bar + blue hero */
background-color: #fff;
padding: 60px 70px 70px;
/* Lifted "overlapping layer" look: soft halo on top/sides where it sits over
the blue + yellow, and a deeper drop shadow below. */
box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.10),
18px 0 40px rgba(0, 0, 0, 0.06),
-18px 0 40px rgba(0, 0, 0, 0.06),
0 34px 70px rgba(0, 0, 0, 0.22);
}
.foreword-card-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 34px;
line-height: 1.2;
color: #111;
margin: 0 0 28px 0;
}
.foreword-message {
font-family: 'Proxima Nova', sans-serif;
font-size: 16px;
line-height: 1.9;
color: #4a4a4a;
}
.foreword-message p { margin: 0 0 22px 0; }
.foreword-message p:last-child { margin-bottom: 0; }
.foreword-signature {
margin: 34px 0 0;
}
.foreword-signature img { max-width: 200px; height: auto; }
/* share */
.foreword-share {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 40px;
}
.foreword-share-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: #0072BC;
color: #fff;
border: 0;
padding: 13px 28px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: background-color .25s ease;
}
.foreword-share-btn:hover { background-color: #005a95; }
.foreword-share-menu {
display: flex;
align-items: center;
gap: 10px;
opacity: 0;
visibility: hidden;
transform: translateX(-8px);
transition: all .25s ease;
}
.foreword-share.is-open .foreword-share-menu {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.foreword-share-menu a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f0f0f0;
color: #0072BC;
font-size: 15px;
text-decoration: none;
transition: all .25s ease;
}
.foreword-share-menu a:hover { background-color: #0072BC; color: #fff; }
/* ---------- Related ---------- */
.related-forewords-2025 {
background-color: #f4f4f4;
padding: 20px 0 90px;
position: relative;
z-index: 2; /* let the corner triangle paint over the footer below */
}
/* Blue triangle decoration in the bottom-right corner, overlapping the footer.
Attached to the LAST section of the page so it still shows when the
related-forewords section is absent (e.g. only one foreword in a language). */
.single-foreword-2025 > section:last-of-type::after {
content: '';
position: absolute;
bottom: -80px; /* extends down onto the footer */
right: 0;
width: 340px;
height: 330px;
background-color: #01a0e0;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
pointer-events: none;
}
.related-forewords-2025 .container {
position: relative;
z-index: 1;
}
.related-forewords-2025 .related-header {
text-align: center;
margin-bottom: 45px;
}
.related-forewords-2025 .related-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #0072BC;
margin-bottom: 14px;
}
.related-forewords-2025 .related-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 34px;
color: #111;
margin: 0;
display: inline-block;
}
.related-forewords-2025 .related-title span {
background-color: #FAEB00;
padding: 2px 18px;
display: inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* The cards inside this section now use the SAME story26-* classes as the
Stories / Key Highlights / Partnerships listings (2026-08 feedback), so
all four related sections share one identical card design. The old
.related-card overrides that used to live here were removed. */
/* ---------- Foreword responsive ---------- */
@media (max-width: 991px) {
.foreword-hero-wrapper { flex-direction: column; gap: 30px; padding-top: 130px; padding-bottom: 130px; }
.foreword-photo { flex: none; max-width: 300px; }
.foreword-info { padding-top: 0; }
.foreword-name { font-size: 34px; }
.foreword-back-main { margin-top: 26px; }
.foreword-content-2025 { margin-top: -90px; }
.foreword-content-2025::before { top: 45px; height: 100px; }
.foreword-content-wrapper { padding: 45px 40px 50px; }
}
@media (max-width: 767px) {
.foreword-name { font-size: 28px; }
.foreword-card-title { font-size: 26px; }
.foreword-content-2025 { margin-top: -80px; }
.foreword-content-2025::before { top: 40px; height: 90px; }
.foreword-content-wrapper { padding: 34px 24px 40px; }
.related-forewords-2025 .related-title { font-size: 26px; }
.single-foreword-2025 > section:last-of-type::after { width: 180px; height: 175px; bottom: -45px; }
.foreword-share { flex-wrap: wrap; }
}
/* ===== EXECUTIVE SUMMARY PAGE 2026 DESIGN (Template-1) ===== */
.exec-summary-page-2026 {
background-color: #fff;
}
/* ---------- Hero ---------- */
.exec26-hero {
position: relative;
background-size: cover;
background-position: center;
z-index: 1;
}
.exec26-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.45) 100%);
z-index: 1;
}
.exec26-hero-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
min-height: 92vh;
padding-top: 150px; /* clear the fixed header */
padding-bottom: 170px; /* room for the stats card overlap */
}
.exec26-hero-text {
margin: auto 0;
max-width: 640px;
}
.exec26-hero-label {
display: block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
margin-bottom: 14px;
}
.exec26-hero-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 44px;
line-height: 1.5;
color: #0b0b0b;
margin: 0;
}
.exec26-hero-title span {
background-color: #FAEB00;
padding: 2px 15px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
.exec26-hero-intro {
font-family: 'Proxima Nova', sans-serif;
font-size: 16px;
line-height: 1.7;
color: #fff;
max-width: 560px;
margin: 24px 0 0;
/* 40% black overlay behind the normal banner text ONLY — the yellow
highlighted title must stay overlay-free (2026-08 feedback) */
display: inline-block;
background-color: rgba(0, 0, 0, 0.4);
padding: 10px 15px;
}
.exec26-hero-bottom {
margin-top: auto;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
}
.exec26-watch-video {
display: inline-flex;
flex-direction: column; /* long down arrow ABOVE the label, per the design */
align-items: flex-start;
gap: 12px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #FAEB00; /* yellow text, white arrow (2026-07 feedback) */
text-decoration: none;
transition: opacity .25s ease;
}
.exec26-watch-video:hover { color: #FAEB00; opacity: .75; }
.exec26-watch-video svg { display: block; color: #fff; }
.exec26-back-main {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #FAEB00;
text-decoration: none;
transition: opacity .25s ease;
}
.exec26-back-main:hover { color: #FAEB00; opacity: .8; }
.exec26-back-main svg { display: block; color: #fff; } /* white arrow, yellow text */
/* ---------- Impact stats card ---------- */
.exec26-impact {
position: relative;
margin-top: -140px; /* overlap up into the hero */
padding-bottom: 20px;
z-index: 3;
}
/* Full-width yellow band behind the card (blue/photo -> yellow -> white layering) */
.exec26-impact::before {
content: '';
position: absolute;
top: 70px;
left: 0;
width: 100%;
height: 160px;
background-color: #FAEB00;
z-index: 1;
}
/* Executive Summary page only: per the Template-1 design the yellow band
starts exactly at the hero bottom edge and runs ~90px past the card
bottom (2026-09 feedback). Scoped so About Us / New Operations keep
their existing band. */
.exec-main-2026 .exec26-impact::before {
top: 140px; /* = hero bottom (card overlaps the hero by 140px) */
height: auto;
bottom: -70px; /* extends below the card into the first content block */
}
/* Yellow column continuing down the page left edge behind the first
content row image, per the Template-1 design (2026-09 feedback). */
.exec-main-2026 .exec26-blocks::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 253px;
height: 320px;
background-color: #FAEB00;
z-index: 0;
pointer-events: none;
}
/* White square decoration inside the yellow column (Template-1 design).
A real element (not ::after) because .exec26-blocks::after is already
used for the blue corner triangle. */
.exec-main-2026 .exec26-deco-square {
position: absolute;
top: 152px;
left: 70px;
width: 98px;
height: 98px;
background-color: #fff;
z-index: 0;
pointer-events: none;
}
/* On laptop screens the content container leaves no room for the square
beside the first row image, so the image overlapped it (2026-09 live
feedback). Only show the square on large desktops where it fully fits
to the side of the image, like in the design file. */
@media (max-width: 1679px) {
.exec-main-2026 .exec26-blocks::before { display: none; }
}
/* Rows paint above the yellow column so the first image overlaps it. */
.exec-main-2026 .exec26-row {
position: relative;
z-index: 1;
}
.exec26-impact-card {
position: relative;
z-index: 2;
background-color: #fff;
text-align: center;
padding: 50px 60px 55px;
box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.10),
18px 0 40px rgba(0, 0, 0, 0.06),
-18px 0 40px rgba(0, 0, 0, 0.06),
0 34px 70px rgba(0, 0, 0, 0.22);
}
.exec26-impact-label {
display: block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #01a0e0;
margin-bottom: 10px;
}
.exec26-impact-heading {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 32px;
color: #111;
margin: 0 0 40px;
}
.exec26-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
/* Light divider between the stat cards, per the Template-1 design
(2026-09 feedback). border-inline-start flips automatically in RTL. */
.exec26-stats-grid .exec26-stat + .exec26-stat {
border-inline-start: 1px solid #e4e4e4;
}
.exec26-stat-icon {
width: 54px;
height: 54px;
background-color: #FAEB00;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
}
.exec26-stat-icon img {
max-width: 34px;
max-height: 34px;
}
.exec26-stat-icon svg { display: block; }
.exec26-stat-number {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 34px;
line-height: 1.1;
color: #111;
margin-bottom: 8px;
}
.exec26-stat-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
color: #555;
}
/* ---------- Alternating content blocks ---------- */
.exec26-blocks {
position: relative;
background-color: #fff;
padding: 70px 0 150px;
z-index: 2;
}
.exec26-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 75px;
align-items: center;
padding: 55px 0;
}
.exec26-row.reversed .exec26-row-image { order: 2; }
.exec26-row.reversed .exec26-row-text { order: 1; }
/* Alternating full-width light band behind the reversed rows, per the
Template-1 design (2026-07 feedback). The box-shadow + clip-path pair
stretches the background edge-to-edge without breaking the layout. */
.exec26-row.reversed {
background-color: #f2f3f5;
box-shadow: 0 0 0 100vmax #f2f3f5;
clip-path: inset(0 -100vmax);
}
.exec26-image-frame {
position: relative;
}
/* Yellow offset frame behind the image */
.exec26-image-frame::before {
content: '';
position: absolute;
top: 16px;
bottom: -18px;
left: -18px;
right: 16px;
border: 5px solid #FAEB00;
z-index: 0;
pointer-events: none;
}
/* Per the Template-1 design the yellow frame sticks out bottom-left on
EVERY row, including the reversed ones (2026-08 feedback) */
.exec26-image-frame img {
position: relative;
z-index: 1;
width: 100%;
height: auto;
/* Square-ish crop like the design file (2026-08 feedback) */
aspect-ratio: 20 / 21;
object-fit: cover;
display: block;
}
.exec26-row-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 34px; /* matches the Template-1 design (2026-08 feedback) */
line-height: 1.2;
color: #01a0e0;
margin: 0 0 20px;
}
.exec26-row-body {
font-family: 'Proxima Nova', sans-serif;
font-size: 16px;
line-height: 1.8;
color: #4a4a4a;
/* Clamp to whole lines so no line of text is cut in half when the
"Read More" button is shown (2026-07 feedback). No max-height
fallback: with multi-paragraph content the paragraph margins made
the fixed max-height clip a line in half before the line-clamp
kicked in (2026-09 About Us feedback) — line-clamp alone always
cuts after a whole line. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
overflow: hidden;
position: relative;
}
.exec26-row-body.is-open {
display: block;
-webkit-line-clamp: unset;
}
.exec26-row-body p { margin: 0 0 18px; }
.exec26-row-body p:last-child { margin-bottom: 0; }
.exec26-read-more {
display: inline-block;
margin-top: 22px;
background-color: #0072BC;
color: #fff;
border: 0;
padding: 10px 24px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: background-color .25s ease;
}
.exec26-read-more:hover { background-color: #005a95; }
/* Blue triangle decoration overlapping the footer */
.exec-summary-page-2026 > section:last-of-type::after {
content: '';
position: absolute;
bottom: -80px;
right: 0;
width: 340px;
height: 330px;
background-color: #01a0e0;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
pointer-events: none;
}
/* ---------- RTL ---------- */
.rtl .exec26-back-main svg,
.rtl .exec26-watch-video svg {
transform: scaleX(-1);
}
.rtl .exec26-hero-label,
.rtl .exec26-impact-label,
.rtl .exec26-stat-label,
.rtl .exec26-back-main,
.rtl .exec26-watch-video,
.rtl .exec26-read-more {
font-family: 'Tajawal', 'Proxima Nova', sans-serif;
letter-spacing: normal;
}
/* RTL mirror: the frame sticks out bottom-right on every row */
.rtl .exec26-image-frame::before {
left: 16px;
right: -18px;
}
/* RTL mirror: yellow column + white square decoration flip to the right */
.rtl .exec-main-2026 .exec26-blocks::before {
left: auto;
right: 0;
}
.rtl .exec-main-2026 .exec26-deco-square {
left: auto;
right: 70px;
}
.rtl .exec-summary-page-2026 > section:last-of-type::after {
right: auto;
left: 0;
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
.exec26-hero-title { font-size: 38px; }
.exec26-stats-grid { gap: 20px; }
}
@media (max-width: 991px) {
.exec26-hero-inner { min-height: auto; padding-top: 130px; padding-bottom: 150px; }
.exec26-hero-text { margin: 0 0 60px; }
.exec26-hero-title { font-size: 32px; }
.exec26-impact { margin-top: -120px; }
.exec26-impact-card { padding: 40px 35px 45px; }
.exec26-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 35px 20px; }
.exec26-stats-grid .exec26-stat + .exec26-stat { border-inline-start: 0; }
.exec26-row { grid-template-columns: 1fr; gap: 45px; padding: 45px 0; }
.exec26-row.reversed .exec26-row-image { order: 0; }
.exec26-row.reversed .exec26-row-text { order: 1; }
/* Stacked layout: hide the desktop-only yellow column decorations */
.exec-main-2026 .exec26-impact::before { top: 120px; }
.exec-main-2026 .exec26-blocks::before,
.exec-main-2026 .exec26-deco-square { display: none; }
}
@media (max-width: 767px) {
.exec26-hero-title { font-size: 26px; }
.exec26-hero-intro { font-size: 15px; }
.exec26-hero-bottom { flex-direction: column; align-items: flex-start; gap: 22px; }
.exec26-impact::before { top: 50px; height: 120px; }
.exec-main-2026 .exec26-impact::before { top: 120px; height: auto; bottom: -30px; }
.exec26-impact-heading { font-size: 26px; }
.exec26-stat-number { font-size: 28px; }
.exec26-row-title { font-size: 24px; }
.exec26-blocks { padding: 50px 0 120px; }
.exec-summary-page-2026 > section:last-of-type::after { width: 180px; height: 175px; bottom: -45px; }
}
/* ===== ABOUT US / NEW OPERATIONS 2026 (Executive Summary design system) ===== */
/* Rich text inside the overlapping white card (kicker/heading stay centered) */
.exec26-card-text {
text-align: start;
font-family: 'Proxima Nova', sans-serif;
font-size: 16px;
line-height: 1.9;
color: #4a4a4a;
}
.exec26-card-text p { margin: 0 0 20px; }
.exec26-card-text p:last-child { margin-bottom: 0; }
/* Standalone text block between the alternating rows */
.exec26-content-only {
max-width: 900px;
margin: 0 auto;
padding: 45px 0;
}
/* When the content card is the page's last section (New Operations without
image rows), give the corner triangle room below the card */
.newops-page-2026 > section.exec26-impact:last-of-type {
padding-bottom: 200px;
}
/* ---------- Endorsements and fatwas logo grid (About Us) ---------- */
.about26-endorse {
position: relative;
background-color: #fff;
padding: 20px 0 170px;
z-index: 2; /* let the corner triangle paint over the footer below */
}
.about26-endorse-header {
text-align: center;
margin-bottom: 55px;
}
.about26-endorse-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 32px;
line-height: 1.6;
color: #0b0b0b;
margin: 0;
}
.about26-endorse-title span {
background-color: #FAEB00;
padding: 4px 18px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
.about26-endorse-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
}
.about26-endorse-grid a,
.about26-endorse-grid span {
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 110px;
background-color: #fff;
border: 1px solid #ececec;
padding: 14px;
transition: box-shadow .25s ease, transform .25s ease;
}
.about26-endorse-grid a:hover {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
transform: translateY(-3px);
}
.about26-endorse-grid img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
@media (max-width: 767px) {
.about26-endorse { padding-bottom: 130px; }
.about26-endorse-title { font-size: 25px; }
.about26-endorse-grid { gap: 14px; }
.about26-endorse-grid a,
.about26-endorse-grid span { width: 125px; height: 95px; }
.newops-page-2026 > section.exec26-impact:last-of-type { padding-bottom: 150px; }
}
/* Legacy styles - keep for backwards compatibility */
.single-exec-summary-2025 {
overflow: visible;
}
/* Hero Section */
.exec-page-hero-2025 {
position: relative;
padding: 0;
background-color: #01a0e0;
overflow: visible;
z-index: 2;
min-height: 500px;
}
.exec-page-hero-wrapper {
display: flex;
align-items: flex-start;
gap: 50px;
position: relative;
z-index: 1;
padding-top: 140px;
padding-bottom: 60px;
}
/* Image */
.exec-page-image {
flex: 0 0 45%;
position: relative;
z-index: 10;
margin-bottom: -200px;
}
.exec-page-image img {
width: 100%;
height: auto;
display: block;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
/* Info */
.exec-page-info {
flex: 1;
padding-top: 20px;
}
.exec-page-breadcrumb {
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 20px;
}
.exec-page-breadcrumb a {
color: #fff;
text-decoration: none;
}
.exec-page-breadcrumb a:hover {
text-decoration: underline;
}
.exec-page-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #FAEB00;
margin-bottom: 15px;
}
.exec-page-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 42px;
line-height: 1.2;
color: #000;
margin: 0;
}
.exec-page-title span {
background-color: #FAEB00;
padding: 5px 15px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
/* Content Section */
.exec-page-content-2025 {
padding: 80px 0 100px;
background-color: #f8f8f8;
position: relative;
z-index: 1;
}
.exec-page-content-wrapper {
position: relative;
background-color: #fff;
padding: 60px 70px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.exec-page-body {
font-family: 'Proxima Nova', sans-serif;
font-size: 17px;
line-height: 1.8;
color: #333;
}
.exec-page-body h2 {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 28px;
color: #0072BC;
margin: 40px 0 20px 0;
}
.exec-page-body h2:first-child {
margin-top: 0;
}
.exec-page-body h3 {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 22px;
color: #333;
margin: 30px 0 15px 0;
}
.exec-page-body p {
margin-bottom: 20px;
}
.exec-page-body ul,
.exec-page-body ol {
margin-bottom: 20px;
padding-left: 25px;
}
.exec-page-body li {
margin-bottom: 10px;
}
.exec-page-body strong {
font-weight: 700;
color: #000;
}
/* Content Blocks */
.exec-content-block {
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
.exec-content-block:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.exec-block-label {
display: inline-block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: #0072BC;
margin-bottom: 10px;
}
/* Image with Content Block */
.exec-image-content-block {
display: flex;
gap: 30px;
align-items: flex-start;
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
.exec-image-content-block:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.exec-block-image {
flex: 0 0 200px;
}
.exec-block-image img {
width: 100%;
height: auto;
border-radius: 8px;
}
.exec-block-content {
flex: 1;
}
.exec-block-content h3 {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 20px;
color: #0072BC;
margin: 0 0 15px 0;
}
.exec-block-icon {
display: inline-block;
margin-bottom: 15px;
}
.exec-block-icon img {
max-width: 60px;
height: auto;
}
@media (max-width: 767px) {
.exec-image-content-block {
flex-direction: column;
}
.exec-block-image {
flex: none;
max-width: 100%;
}
}
/* Responsive */
@media (max-width: 991px) {
.exec-page-hero-wrapper {
flex-direction: column;
padding-top: 120px;
}
.exec-page-image {
flex: none;
max-width: 100%;
margin-bottom: 30px;
}
.exec-page-title {
font-size: 32px;
}
.exec-page-content-2025 .col-lg-10 {
max-width: 100%;
flex: 0 0 100%;
margin-left: 0;
}
}
@media (max-width: 767px) {
.exec-page-hero-2025 {
min-height: auto;
}
.exec-page-hero-wrapper {
padding-top: 100px;
padding-bottom: 40px;
}
.exec-page-title {
font-size: 28px;
}
.exec-page-content-wrapper {
padding: 30px;
}
.exec-page-content-2025 {
padding: 50px 0 70px;
}
}
/* Executive Summary 2025 RTL */
.rtl .exec-page-hero-wrapper {
flex-direction: row-reverse;
}
/* ===== NEW OPERATIONS PAGE 2025 ===== */
.new-operations-page-2025 {
overflow: hidden;
}
/* Hero */
.new-ops-hero-fullscreen {
position: relative;
min-height: 80vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.new-ops-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.4) 100%);
z-index: 1;
}
.new-ops-hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 120px 0 80px;
}
.new-ops-hero-text {
max-width: 800px;
margin: 0 auto;
}
.new-ops-hero-label {
display: inline-block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 4px;
text-transform: uppercase;
color: #000;
background-color: #FAEB00;
margin-bottom: 20px;
padding: 12px 30px;
border-radius: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.new-ops-hero-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 64px;
line-height: 1.1;
color: #fff;
margin: 0 0 30px 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.4);
}
.new-ops-hero-intro {
font-family: 'Proxima Nova', sans-serif;
font-size: 20px;
line-height: 1.6;
color: #fff;
margin: 0 auto;
max-width: 650px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.new-ops-hero-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 10px;
background-color: #FAEB00;
z-index: 3;
}
/* Content Sections */
.new-ops-content-sections {
background-color: #f8f8f8;
position: relative;
z-index: 5;
padding-top: 80px;
padding-bottom: 80px;
}
.new-ops-content-block {
padding: 0;
}
.new-ops-block-inner {
max-width: 900px;
margin: -180px auto 0 auto;
text-align: center;
background-color: #fff;
padding: 60px 70px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
border-radius: 10px;
position: relative;
z-index: 10;
}
.new-ops-block-label {
display: inline-block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: #01a0e0;
margin-bottom: 15px;
}
.new-ops-block-inner h2 {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 38px;
color: #333;
margin: 0 0 30px 0;
}
.new-ops-block-text {
font-family: 'Proxima Nova', sans-serif;
font-size: 17px;
line-height: 1.8;
color: #555;
}
.new-ops-block-text p {
margin-bottom: 20px;
}
/* Image Block */
.new-ops-image-block {
padding: 100px 0;
position: relative;
overflow: hidden;
}
.new-ops-image-block:nth-child(odd) {
background-color: #fff;
}
.new-ops-image-block:nth-child(even) {
background-color: #FAEB00;
}
.new-ops-image-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.new-ops-image-block.reversed .new-ops-image-grid {
direction: rtl;
}
.new-ops-image-block.reversed .new-ops-image-grid > * {
direction: ltr;
}
.new-ops-image-area {
position: relative;
}
.new-ops-image-area .image-wrapper {
position: relative;
z-index: 2;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.new-ops-image-area .image-wrapper img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.new-ops-image-area:hover .image-wrapper img {
transform: scale(1.03);
}
.new-ops-image-area .image-frame {
position: absolute;
top: 20px;
left: 20px;
right: -20px;
bottom: -20px;
border: 4px solid #01a0e0;
border-radius: 10px;
z-index: 1;
}
.new-ops-image-block:nth-child(even) .new-ops-image-area .image-frame {
border-color: #fff;
}
.new-ops-text-area h3 {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 32px;
color: #01a0e0;
margin: 0 0 20px 0;
line-height: 1.2;
}
.new-ops-image-block:nth-child(even) .new-ops-text-area h3 {
color: #333;
}
.new-ops-text-area .ops-icon {
margin-bottom: 20px;
}
.new-ops-text-area .ops-icon img {
max-width: 70px;
height: auto;
}
.new-ops-text-area .ops-content {
font-family: 'Proxima Nova', sans-serif;
font-size: 17px;
line-height: 1.8;
color: #555;
}
.new-ops-image-block:nth-child(even) .new-ops-text-area .ops-content {
color: #333;
}
.new-ops-text-area .ops-content p {
margin-bottom: 20px;
}
/* Responsive */
@media (max-width: 991px) {
.new-ops-hero-title {
font-size: 42px;
}
.new-ops-image-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.new-ops-image-block.reversed .new-ops-image-grid {
direction: ltr;
}
.new-ops-block-inner {
margin-top: -120px;
padding: 40px 50px;
}
}
@media (max-width: 767px) {
.new-ops-hero-fullscreen {
min-height: 60vh;
background-attachment: scroll;
}
.new-ops-hero-title {
font-size: 32px;
}
.new-ops-hero-label {
font-size: 12px;
padding: 10px 20px;
}
.new-ops-content-sections {
padding-top: 40px;
}
.new-ops-content-block,
.new-ops-image-block {
padding: 0 0 40px 0;
}
.new-ops-block-inner {
margin-top: -100px;
padding: 30px 25px;
}
.new-ops-block-inner h2 {
font-size: 28px;
}
.new-ops-text-area h3 {
font-size: 26px;
}
}
/* New Operations 2025 RTL */
.rtl .new-ops-image-block .new-ops-image-grid {
direction: rtl;
}
.rtl .new-ops-image-block.reversed .new-ops-image-grid {
direction: ltr;
}
.rtl .exec-page-info {
text-align: right;
}
.rtl .exec-page-breadcrumb {
text-align: right;
}
/* Foreword 2025 RTL */
/* Natural RTL flow: photo (1st child) on the RIGHT, name/info on the LEFT */
.rtl .foreword-hero-wrapper {
flex-direction: row;
}
.rtl .foreword-info {
text-align: right;
}
/* Mirror the yellow photo frame to the top-left */
.rtl .foreword-photo-frame::before {
right: 14px;
left: -18px;
}
/* Flip the "back to main" arrow */
.rtl .foreword-back-main svg {
transform: scaleX(-1);
}
.rtl .foreword-content-wrapper {
text-align: right;
}
/* Share menu slides from the right */
.rtl .foreword-share-menu { transform: translateX(8px); }
.rtl .foreword-share.is-open .foreword-share-menu { transform: translateX(0); }
/* Mirror the bottom corner triangle to the left */
.rtl .single-foreword-2025 > section:last-of-type::after {
right: auto;
left: 0;
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* The related cards now use the shared story26-* classes; their RTL
mirroring is handled by the global .rtl .story26-rel-image::before rule. */
@media (max-width: 991px) {
.rtl .foreword-hero-wrapper {
flex-direction: column;
}
}
/* ==========================================================================
Single Key Highlight 2025
========================================================================== */
.single-highlight-2025 {
background-color: #fff;
}
/* Transparent header for highlight pages */
.single-highlight-2025.image-hero-style header.header,
.single-highlight-2025.image-hero-style header.header.blackbg {
background: transparent !important;
position: absolute;
width: 100%;
z-index: 100;
}
.single-highlight-2025.image-hero-style header.header.sticky-nav,
.single-highlight-2025.image-hero-style header.header.blackbg.sticky-nav {
background: #00A0DF !important;
position: fixed;
top: 0;
left: 0;
right: 0;
}
/* Image Hero Style (matches story page) */
.single-highlight-2025.image-hero-style .highlight-image-hero {
position: relative;
height: 100vh;
min-height: 600px;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
}
.single-highlight-2025.image-hero-style .highlight-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.6) 100%);
}
.single-highlight-2025.image-hero-style .highlight-hero-content {
position: relative;
z-index: 2;
padding-bottom: 120px;
padding-left: 60px;
}
.single-highlight-2025.image-hero-style .highlight-hero-text {
max-width: 700px;
}
.single-highlight-2025.image-hero-style .highlight-hero-label {
display: inline-block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 4px;
text-transform: uppercase;
color: #000;
background-color: #FAEB00;
padding: 12px 30px;
border-radius: 30px;
margin-bottom: 25px;
}
.single-highlight-2025.image-hero-style .highlight-hero-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 56px;
line-height: 1.1;
color: #fff;
margin: 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.single-highlight-2025.image-hero-style .highlight-scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
text-align: center;
color: rgba(255,255,255,0.7);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
}
.single-highlight-2025.image-hero-style .highlight-hero-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 10px;
background-color: #FAEB00;
}
/* Stats Section for Image Hero Style */
.highlight-stats-section {
padding: 60px 0;
background-color: #01a0e0;
}
.highlight-stats-section .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.highlight-stats-section .stat-card {
text-align: center;
color: #fff;
}
.highlight-stats-section .stat-number {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 48px;
line-height: 1;
margin-bottom: 10px;
}
.highlight-stats-section .stat-label {
font-family: 'Proxima Nova', sans-serif;
font-size: 16px;
opacity: 0.9;
}
/* Content Section for Image Hero Style */
.single-highlight-2025.image-hero-style .highlight-content-2025 {
padding: 80px 0 100px;
background-color: #f8f8f8;
}
.single-highlight-2025.image-hero-style .highlight-content-wrapper {
background-color: #fff;
padding: 60px 70px;
box-shadow: 0 15px 50px rgba(0,0,0,0.08);
border-radius: 10px;
}
.highlight-share-top {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
font-family: 'Proxima Nova', sans-serif;
font-size: 14px;
color: #666;
}
.highlight-share-top a {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #01a0e0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.highlight-share-top a:hover {
background-color: #024b6c;
}
.highlight-share-top a svg path {
fill: #fff;
}
/* Responsive for Image Hero Style */
@media (max-width: 991px) {
.single-highlight-2025.image-hero-style .highlight-hero-title {
font-size: 42px;
}
.single-highlight-2025.image-hero-style .highlight-hero-content {
padding-left: 40px;
padding-bottom: 100px;
}
}
@media (max-width: 767px) {
.single-highlight-2025.image-hero-style .highlight-image-hero {
height: 70vh;
min-height: 450px;
}
.single-highlight-2025.image-hero-style .highlight-hero-title {
font-size: 32px;
}
.single-highlight-2025.image-hero-style .highlight-hero-label {
font-size: 12px;
padding: 10px 20px;
}
.single-highlight-2025.image-hero-style .highlight-hero-content {
padding-left: 20px;
padding-bottom: 80px;
}
.single-highlight-2025.image-hero-style .highlight-content-wrapper {
padding: 40px 30px;
}
.highlight-stats-section .stat-number {
font-size: 36px;
}
}
/* Original Hero Section */
.highlight-hero-2025 {
position: relative;
}
.highlight-hero-wrapper {
position: relative;
min-height: 500px;
display: flex;
align-items: center;
}
.highlight-hero-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.highlight-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.highlight-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.highlight-hero-content {
position: relative;
z-index: 1;
max-width: 650px;
padding: 80px 0;
}
.highlight-breadcrumb {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
}
.highlight-breadcrumb a {
color: #FAEB00;
text-decoration: none;
}
.highlight-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #FAEB00;
margin-bottom: 15px;
}
.highlight-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 48px;
line-height: 1.2;
color: #fff;
margin: 0 0 25px 0;
}
.highlight-title span {
background-color: #FAEB00;
color: #000;
padding: 5px 15px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
.highlight-excerpt {
font-family: 'Proxima Nova', sans-serif;
font-size: 18px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
}
.highlight-excerpt p {
margin: 0;
}
.highlight-hero-bar {
height: 8px;
background-color: #FAEB00;
}
/* Stats Section */
.highlight-stats-2025 {
padding: 60px 0;
background-color: #f8f8f8;
}
.stats-grid {
display: flex;
justify-content: center;
gap: 80px;
flex-wrap: wrap;
}
.stat-item {
text-align: center;
}
.stat-number {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 56px;
color: #0072BC;
line-height: 1;
margin-bottom: 10px;
}
.stat-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 600;
font-size: 16px;
color: #333;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Content Section */
.highlight-content-2025 {
padding: 80px 0;
background-color: #fff;
position: relative;
}
.highlight-content-wrapper {
background-color: #fff;
}
.highlight-text {
font-family: 'Proxima Nova', sans-serif;
font-size: 17px;
line-height: 1.8;
color: #444;
}
.highlight-text p {
margin: 0 0 25px 0;
}
.highlight-text h2, .highlight-text h3, .highlight-text h4 {
font-weight: 700;
color: #000;
margin: 40px 0 20px 0;
}
.highlight-text ul, .highlight-text ol {
margin: 0 0 25px 20px;
}
.highlight-text li {
margin-bottom: 10px;
}
.highlight-share {
margin-top: 50px;
padding-top: 30px;
border-top: 2px solid #FAEB00;
display: flex;
align-items: center;
gap: 15px;
}
.highlight-share .share-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 600;
font-size: 14px;
color: #333;
}
.highlight-share .share-icons {
display: flex;
gap: 10px;
}
.highlight-share .share-icon {
width: 36px;
height: 36px;
border: 1px solid #ddd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
}
.highlight-share .share-icon:hover {
background-color: #0072BC;
border-color: #0072BC;
color: #fff;
}
.highlight-decoration {
position: absolute;
bottom: 0;
right: 0;
width: 35%;
pointer-events: none;
}
.highlight-decoration img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
}
/* Related Highlights */
.related-highlights-2025 {
padding: 80px 0;
background-color: #f5f5f5;
}
/* Highlight 2025 Responsive */
@media (max-width: 991px) {
.highlight-hero-wrapper {
min-height: 400px;
}
.highlight-title {
font-size: 36px;
}
.stats-grid {
gap: 40px;
}
.stat-number {
font-size: 42px;
}
}
@media (max-width: 767px) {
.highlight-hero-wrapper {
min-height: 350px;
}
.highlight-hero-content {
padding: 50px 0;
}
.highlight-title {
font-size: 28px;
}
.highlight-content-2025 {
padding: 50px 0;
}
.stats-grid {
flex-direction: column;
gap: 30px;
}
}
/* Highlight 2025 RTL */
.rtl .highlight-hero-overlay {
background: linear-gradient(to left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.rtl .highlight-hero-content {
text-align: right;
margin-left: auto;
margin-right: 0;
}
.rtl .highlight-share {
justify-content: flex-end;
}
.rtl .highlight-decoration {
right: auto;
left: 0;
transform: scaleX(-1);
}
/* Single Story 2025 RTL */
.rtl .video-play-btn {
right: auto;
left: 80px;
}
.rtl .video-hero-content {
text-align: right;
}
.rtl .video-hero-label {
margin-right: 0;
margin-left: auto;
}
.rtl .video-scroll-indicator {
left: auto;
right: 50%;
transform: translateX(50%);
}
@media (max-width: 991px) {
.rtl .video-play-btn {
left: 40px;
right: auto;
}
}
@media (max-width: 767px) {
.rtl .video-play-btn {
left: 20px;
right: auto;
}
}
/* Single Story Slider 2025 RTL */
.rtl .slider-nav {
right: auto;
left: 80px;
flex-direction: row-reverse;
}
.rtl .slider-nav button i {
transform: scaleX(-1);
}
.rtl .slider-hero-content {
text-align: right;
}
.rtl .slider-scroll-indicator {
left: auto;
right: 50%;
transform: translateX(50%);
}
@media (max-width: 991px) {
.rtl .slider-nav {
left: 40px;
right: auto;
}
}
@media (max-width: 767px) {
.rtl .slider-nav {
left: 20px;
right: auto;
}
}
/* Fix slider images visibility */
.story-hero-slider .owl-stage-outer {
height: 100% !important;
}
.story-hero-slider .owl-stage {
height: 100% !important;
}
.story-hero-slider .owl-item {
height: 100% !important;
}
.story-hero-slider .slider-slide {
height: 100% !important;
}
.story-hero-slider .slider-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Force slider images to be visible */
.story-slider-hero {
position: relative;
background-color: #333; /* Fallback color */
}
.slider-hero-wrapper {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
}
.story-hero-slider {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 1 !important;
}
.story-hero-slider .owl-stage-outer,
.story-hero-slider .owl-stage,
.story-hero-slider .owl-item {
height: 100% !important;
}
.slider-slide {
height: 100% !important;
width: 100% !important;
}
.slider-slide img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Fix RTL Owl Carousel direction */
.rtl .story-hero-slider.owl-carousel {
direction: ltr;
}
.rtl .story-hero-slider .owl-stage-outer,
.rtl .story-hero-slider .owl-stage,
.rtl .story-hero-slider .owl-item {
direction: ltr;
}
/* Fix slider nav chevron icons for RTL - swap the icons */
/* Ensure slider wrapper has correct direction for RTL */
.rtl .slider-hero-wrapper {
direction: ltr;
}
.rtl .slider-hero-content {
direction: rtl;
}
.rtl .slider-hero-text {
direction: rtl;
text-align: right;
}
/* ==========================================
Impact Section 2025 - Tabbed Static Images
========================================== */
/* Tab Navigation */
.impact-tabs-2025 {
margin: 30px 0;
}
.impact-tab-nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
background: #0072BC;
border-radius: 5px;
padding: 5px;
}
.impact-tab-item {
flex: 1;
min-width: 150px;
}
.impact-tab-btn {
width: 100%;
padding: 15px 20px;
background: transparent;
border: none;
color: #fff;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 3px;
}
.impact-tab-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.impact-tab-btn.active {
background: transparent;
color: #FAEB00;
}
/* Tab Content */
.impact-content-2025 {
position: relative;
min-height: 500px;
background: #ffffff;
border-radius: 10px;
overflow: hidden;
}
.impact-tab-pane {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.impact-tab-pane.active {
display: block;
opacity: 1;
}
.impact-graphic {
width: 100%;
height: auto;
display: block;
}
/* RTL Support */
.rtl .impact-tab-nav {
flex-direction: row-reverse;
}
/* Responsive */
@media (max-width: 991px) {
.impact-tabs-2025 {
overflow: visible;
}
.impact-tab-nav {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 8px;
justify-content: flex-start;
}
.impact-tab-nav::-webkit-scrollbar {
display: none;
}
.impact-tab-item {
flex-shrink: 0;
min-width: auto;
}
.impact-tab-item:first-child .impact-tab-btn {
margin-left: 5px;
}
.impact-tab-btn {
padding: 12px 15px;
font-size: 12px;
white-space: nowrap;
}
.impact-content-2025 {
min-height: 400px;
}
}
@media (max-width: 767px) {
.impact-tabs-2025 {
margin: 20px -15px;
padding: 0 15px;
}
.impact-tab-nav {
border-radius: 5px;
gap: 0;
padding: 8px;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
justify-content: flex-start;
}
.impact-tab-nav::-webkit-scrollbar {
display: none;
}
.impact-tab-item {
flex-shrink: 0;
}
.impact-tab-btn {
padding: 10px 15px;
font-size: 10px;
letter-spacing: 0.5px;
white-space: nowrap;
}
.impact-content-2025 {
min-height: 300px;
border-radius: 5px;
}
.impact-graphic {
max-width: 100%;
height: auto;
}
}
/* ==========================================
Back to Home Button for Detail Pages
========================================== */
.back-to-home-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 25px;
background: transparent;
border: 2px solid #fff;
border-radius: 30px;
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.back-to-home-btn:hover {
background: #FAEB00;
border-color: #FAEB00;
color: #000;
}
.back-to-home-btn i {
font-size: 16px;
transition: transform 0.3s ease;
}
.back-to-home-btn:hover i {
transform: translateX(-5px);
}
/* RTL Support */
.rtl .back-to-home-btn:hover i {
transform: translateX(5px);
}
/* Responsive */
@media (max-width: 991px) {
.back-to-home-btn {
padding: 10px 20px;
font-size: 13px;
}
}
@media (max-width: 767px) {
.back-to-home-btn {
padding: 10px 15px;
font-size: 12px;
margin-bottom: 15px;
}
.back-to-home-btn span {
display: none;
}
.back-to-home-btn i {
font-size: 18px;
}
}
/* ==========================================================================
About Us / Refugee Zakat Fund Page 2025
========================================================================== */
.about-us-page-2025 {
background-color: #fff;
}
/* Hero */
.about-us-page-2025 .about-us-hero {
position: relative;
min-height: 70vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
display: flex;
align-items: center;
}
.about-us-page-2025 .about-us-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,93,110,0.85) 0%, rgba(0,174,239,0.45) 100%);
}
.about-us-page-2025 .about-us-hero-content {
position: relative;
z-index: 2;
width: 100%;
padding: 100px 0;
}
.about-us-page-2025 .about-us-hero-text {
text-align: center;
color: #fff;
max-width: 720px;
margin: 0 auto;
}
.about-us-page-2025 .about-us-hero-label {
display: inline-block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 4px;
text-transform: uppercase;
color: #000;
background-color: #FAEB00;
padding: 10px 24px;
margin-bottom: 25px;
border-radius: 30px;
}
.about-us-page-2025 .about-us-hero-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 64px;
line-height: 1.1;
color: #fff;
margin: 0;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.about-us-page-2025 .about-us-scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
text-align: center;
color: rgba(255,255,255,0.7);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.about-us-page-2025 .about-us-scroll-indicator:hover {
color: #fff;
text-decoration: none;
}
.about-us-page-2025 .about-us-hero-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 8px;
background-color: #FAEB00;
z-index: 3;
}
/* Intro Section */
.about-us-intro-2025 {
padding: 90px 0 60px;
background-color: #f8f8f8;
scroll-margin-top: 80px;
}
.about-us-intro-2025 .about-us-intro-label {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 3px;
text-transform: uppercase;
color: #00AEEF;
margin-bottom: 15px;
}
.about-us-intro-2025 .about-us-intro-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 42px;
line-height: 1.6;
color: #000;
margin: 0 0 30px;
}
.about-us-intro-2025 .about-us-intro-title span {
background-color: #FAEB00;
padding: 2px 18px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
.about-us-intro-2025 .about-us-intro-text {
font-family: 'Proxima Nova', sans-serif;
font-size: 18px;
line-height: 1.7;
color: #444;
}
.about-us-intro-2025 .about-us-intro-text p {
margin: 0 0 18px;
}
/* Sections */
.about-us-sections-2025 {
padding: 60px 0 100px;
background-color: #f8f8f8;
}
.about-us-sections-2025 .about-us-row {
padding: 50px 0;
}
.about-us-sections-2025 .about-us-row.reversed .about-us-grid {
direction: rtl;
}
.about-us-sections-2025 .about-us-row.reversed .about-us-grid > * {
direction: ltr;
}
.about-us-sections-2025 .about-us-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-us-sections-2025 .about-us-image {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.about-us-sections-2025 .about-us-image img {
width: 100%;
height: auto;
display: block;
}
.about-us-sections-2025 .about-us-text-icon {
margin-bottom: 18px;
}
.about-us-sections-2025 .about-us-text-icon img {
max-height: 60px;
width: auto;
}
.about-us-sections-2025 .about-us-text h3 {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 32px;
color: #005D6E;
margin: 0 0 18px;
}
.about-us-sections-2025 .about-us-text-body {
font-family: 'Proxima Nova', sans-serif;
font-size: 17px;
line-height: 1.7;
color: #333;
}
.about-us-sections-2025 .about-us-text-body p,
.about-us-sections-2025 .about-us-text-body ul {
margin: 0 0 18px;
}
.about-us-sections-2025 .about-us-content-only {
background-color: #fff;
padding: 50px 0;
margin: 30px 0;
box-shadow: 0 10px 40px rgba(0,0,0,0.05);
border-radius: 10px;
}
.about-us-sections-2025 .about-us-content-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 28px;
color: #005D6E;
margin: 0 0 20px;
}
.about-us-sections-2025 .about-us-content-body {
font-family: 'Proxima Nova', sans-serif;
font-size: 17px;
line-height: 1.7;
color: #333;
}
.about-us-sections-2025 .about-us-content-body p,
.about-us-sections-2025 .about-us-content-body ul {
margin: 0 0 18px;
}
@media (max-width: 991px) {
.about-us-page-2025 .about-us-hero-title {
font-size: 46px;
}
.about-us-intro-2025 .about-us-intro-title {
font-size: 34px;
}
.about-us-sections-2025 .about-us-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.about-us-sections-2025 .about-us-row.reversed .about-us-grid {
direction: ltr;
}
.about-us-sections-2025 .about-us-text h3 {
font-size: 26px;
}
}
@media (max-width: 767px) {
.about-us-page-2025 .about-us-hero {
min-height: 55vh;
}
.about-us-page-2025 .about-us-hero-title {
font-size: 32px;
}
.about-us-intro-2025 {
padding: 60px 0 40px;
}
.about-us-intro-2025 .about-us-intro-title {
font-size: 28px;
}
.about-us-sections-2025 {
padding: 40px 0 70px;
}
}
/* RTL */
.rtl .about-us-page-2025 .about-us-scroll-indicator {
left: auto;
right: 50%;
transform: translateX(50%);
}
/* ==========================================================================
Mobile Responsive Fixes — 2026-04-29
Addresses Randa's mobile review feedback:
- Impact section overflow on small screens
- New Operations: image above title/text on mobile
- Stories: 1 item per line on mobile
- Partnerships: larger logos on mobile
- Key Highlights: shorter cards on mobile
- Arabic / iPhone: text being cut off on the right edge
========================================================================== */
/* ---------- (a) Impact section: tighten the wrapper padding on mobile.
The infographic itself is made truly responsive in a dedicated block
further down ("Impact Infographic — proper mobile responsive layout"). */
@media (max-width: 991px) {
.impact-section-2025 {
padding: 50px 0;
}
.impact-section-2025 .impact-card {
padding: 25px 14px;
}
.impact-section-2025 .impact-title {
font-size: 28px;
line-height: 1.3;
}
}
@media (max-width: 575px) {
.impact-section-2025 .impact-card {
padding: 18px 10px;
}
.impact-section-2025 .impact-title {
font-size: 22px;
}
.impact-section-2025 .impact-label {
font-size: 12px;
}
}
/* ---------- (b) New Operations: image above title/text on mobile.
Stack reverses so the photo comes first, then the yellow content block. */
@media (max-width: 991px) {
.new-operations-2025 .new-operations-wrapper {
flex-direction: column-reverse;
}
.new-operations-2025 .new-operations-content {
margin-top: -60px;
margin-bottom: 0;
}
.rtl .new-operations-2025 .new-operations-wrapper {
flex-direction: column-reverse !important;
}
.rtl .new-operations-2025 .new-operations-content {
margin-top: -60px;
margin-bottom: 0;
}
}
/* ---------- (c) Stories: one item per line on mobile (≤767px). */
@media (max-width: 767px) {
.stories-section-2025 .stories-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.stories-section-2025 .stories-image {
aspect-ratio: 16 / 11;
}
.stories-section-2025 .stories-card::before {
top: -8px;
left: 8px;
right: 8px;
bottom: 12px;
}
.stories-section-2025 .stories-content {
left: 8px;
right: 8px;
bottom: 12px;
padding: 50px 18px 18px 18px;
}
.stories-section-2025 .stories-name {
font-size: 22px;
}
.stories-section-2025 .stories-excerpt {
font-size: 13px;
}
}
/* ---------- (d) Partnerships in Focus: larger logos on mobile. */
@media (max-width: 767px) {
.partnerships-section-2025 .partnership-logo {
height: 140px;
margin-bottom: 18px;
}
.partnerships-section-2025 .partnership-logo img {
max-height: 140px;
max-width: 100%;
}
.partnerships-section-2025 .partnership-name {
font-size: 20px;
}
.partnerships-section-2025 .partnership-description {
font-size: 15px;
}
/* Partners-across-the-globe carousel logos also a little larger on mobile */
.partnerships-section-2025 .partner-logo-item img {
max-height: 90px;
max-width: 150px;
}
}
/* ---------- (e) Key Highlights: cap card height on mobile to avoid excessive scroll. */
@media (max-width: 767px) {
.highlights-section-2025 .highlights-item {
margin-bottom: 24px;
}
.highlights-section-2025 .highlights-image {
height: 240px;
}
.highlights-section-2025 .highlights-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.highlights-section-2025 .highlights-content {
padding: 40px 18px 18px 18px;
}
}
@media (max-width: 480px) {
.highlights-section-2025 .highlights-image {
height: 220px;
}
}
/* ---------- (f) Arabic + iPhone: prevent right-edge text cut-off.
Defensive overflow + a touch more right-side breathing room on small screens. */
@media (max-width: 767px) {
/* Stop horizontal page-level scroll caused by decorative full-width children */
body.rtl,
.rtl .home,
.rtl .exec-summary-2025,
.rtl .new-operations-2025,
.rtl .impact-section-2025,
.rtl .partnerships-section-2025,
.rtl .highlights-section-2025,
.rtl .stories-section-2025 {
overflow-x: hidden;
}
/* Executive Summary: ensure the Arabic blue label / yellow title sit comfortably
inside the viewport with extra right-side padding instead of touching the edge. */
.rtl .exec-summary-2025 .exec-summary-content-area {
padding: 24px 24px 32px 24px;
}
.rtl .exec-summary-2025 .exec-summary-label {
margin-right: 0;
padding-right: 4px;
}
.rtl .exec-summary-2025 .exec-summary-title {
margin-right: 0;
padding-right: 0;
font-size: 28px;
line-height: 1.55;
}
.rtl .exec-summary-2025 .exec-summary-content-box {
padding: 24px 20px;
margin-right: 0;
}
/* Hero on Arabic mobile: keep the WATCH VIDEO label fully on-screen */
.rtl .hero-2025 .hero-watch-video {
right: 30px;
left: auto;
max-width: 60vw;
white-space: nowrap;
}
.rtl .hero-2025 .hero-arrow {
right: 30px;
left: auto;
}
}
@media (max-width: 480px) {
.rtl .exec-summary-2025 .exec-summary-content-area {
padding: 20px 20px 28px 20px;
}
.rtl .exec-summary-2025 .exec-summary-title {
font-size: 24px;
}
.rtl .hero-2025 .hero-watch-video {
right: 25px;
font-size: 12px;
}
.rtl .hero-2025 .hero-arrow {
right: 25px;
}
}
/* ==========================================================================
Global fix (2026-04-29): Yellow-highlight overlap on multi-line titles
----------------------------------------------------------------------------
When a section title wraps to multiple lines and the highlighted span uses
`display: inline; box-decoration-break: clone;`, every wrapped line gets
its own yellow box. With the original `line-height: 1.2` + `padding: 5px 15px`
those boxes vertically overlap. Apply the same correction we used on the
Executive Summary (`line-height: 1.6` + `padding: 2px 15px`) globally to
every section title that uses this pattern.
========================================================================== */
/* Increase leading so consecutive highlighted lines don't collide */
.impact-section-2025 .impact-title,
.stories-section-2025 .stories-title,
.highlights-section-2025 .highlights-title,
.about-section-2025 .about-title,
.story-title,
.foreword-name,
.exec-page-title,
.highlight-title,
.related-title,
.related-partnerships-2025 .related-title {
line-height: 1.6;
}
/* Reduce vertical padding on the yellow span so the boxes are slimmer
and the gap between wrapped lines stays comfortable. */
.impact-section-2025 .impact-title span,
.stories-section-2025 .stories-title span,
.highlights-section-2025 .highlights-title span,
.about-section-2025 .about-title span,
.story-title span,
.foreword-name span,
.exec-page-title span,
.highlight-title span,
.related-title span,
.related-partnerships-2025 .related-title span {
padding: 2px 15px;
}
/* ==========================================================================
Impact Infographic — proper mobile responsive layout (2026-04-29)
----------------------------------------------------------------------------
The unhcr-infographic plugin was built for a fixed 1120px page. On mobile
that overflows the viewport. These overrides come from the THEME (so the
plugin file is untouched and can ship its own native responsive update
with the next plugin release):
- Make .infographic-page and .slide-tabs flex with the container
- Stack .p1-grid / .p2-grid columns vertically
- Convert vertical dividers to horizontal
- Allow the donut/bar canvases to scale via CSS
- Reduce font sizes (52px → 38px → 32px depending on breakpoint)
- Hide purely decorative elements that would break the narrow layout
========================================================================== */
@media (max-width: 991px) {
/* Container: fluid width instead of fixed 1120px */
.impact-section-2025 .unhcr-infographic-wrap .infographic-page,
.impact-section-2025 .unhcr-infographic-wrap .slide-tabs {
width: 100% !important;
max-width: 100%;
min-width: 0;
}
.impact-section-2025 .unhcr-infographic-wrap .infographic-page {
min-height: auto;
margin: 0 0 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.impact-section-2025 .unhcr-infographic-wrap .page-inner {
padding: 28px 18px 36px 18px;
}
.impact-section-2025 .unhcr-infographic-wrap .page-1-inner {
padding-left: 24px; /* leave room for the left blue stripe */
}
/* Title bar on each slide */
.impact-section-2025 .unhcr-infographic-wrap .page-title-bar {
padding: 10px 18px;
}
.impact-section-2025 .unhcr-infographic-wrap .page-title-bar h1 {
font-size: 20px;
}
/* Stack the two-column slide layouts */
.impact-section-2025 .unhcr-infographic-wrap .p1-grid,
.impact-section-2025 .unhcr-infographic-wrap .p2-grid {
flex-direction: column;
gap: 0;
}
.impact-section-2025 .unhcr-infographic-wrap .p1-left,
.impact-section-2025 .unhcr-infographic-wrap .p1-right,
.impact-section-2025 .unhcr-infographic-wrap .p2-left,
.impact-section-2025 .unhcr-infographic-wrap .p2-right {
flex: 1 1 100%;
padding: 0;
margin-bottom: 32px;
}
.impact-section-2025 .unhcr-infographic-wrap .p1-left:last-child,
.impact-section-2025 .unhcr-infographic-wrap .p1-right:last-child {
margin-bottom: 0;
}
/* Vertical divider becomes a horizontal rule */
.impact-section-2025 .unhcr-infographic-wrap .p1-divider {
width: 100%;
height: 3px;
margin: 0 0 28px;
align-self: auto;
}
/* Section labels */
.impact-section-2025 .unhcr-infographic-wrap .section-label-bar {
font-size: 13px;
padding: 4px 14px 4px 10px;
}
/* Percentages — smaller, still bold and centered */
.impact-section-2025 .unhcr-infographic-wrap .pct-row {
gap: 24px;
justify-content: center;
}
.impact-section-2025 .unhcr-infographic-wrap .pct-value {
font-size: 40px;
}
/* Donut chart — let CSS scale the canvas */
.impact-section-2025 .unhcr-infographic-wrap .donut-wrap {
width: 200px;
height: 200px;
}
.impact-section-2025 .unhcr-infographic-wrap .donut-wrap canvas {
max-width: 100%;
height: auto !important;
}
.impact-section-2025 .unhcr-infographic-wrap .donut-icon img {
width: 90px;
height: 90px;
}
/* Summary table — tighter typography */
.impact-section-2025 .unhcr-infographic-wrap .summary-tbl,
.impact-section-2025 .unhcr-infographic-wrap .summary-tbl th,
.impact-section-2025 .unhcr-infographic-wrap .summary-tbl td {
font-size: 11px;
}
.impact-section-2025 .unhcr-infographic-wrap .summary-tbl th,
.impact-section-2025 .unhcr-infographic-wrap .summary-tbl td {
padding: 5px 6px;
}
/* Bar labels (Total Income / Beneficiaries columns).
The bars frame stays pinned at left:50px width:200px even on mobile, so the
number labels above must use the SAME offset/width — otherwise (as reported
on iPad) the numbers float centered while the bars sit on the left and the
two no longer line up. Keep each label centered over its own bar. */
.impact-section-2025 .unhcr-infographic-wrap .bar-labels-row,
.impact-section-2025 .unhcr-infographic-wrap .p2-bar-labels {
width: 200px;
max-width: 200px;
margin-left: 50px;
margin-right: 0;
justify-content: space-between;
}
.impact-section-2025 .unhcr-infographic-wrap .bar-big-num {
font-size: 24px;
white-space: nowrap;
}
/* Banded bars + yellow income box overlay — shrink and recentre */
.impact-section-2025 .unhcr-infographic-wrap .bars-overlay-container {
height: 360px;
}
.impact-section-2025 .unhcr-infographic-wrap .income-dist-box {
left: 0;
right: 0;
top: 150px;
padding: 12px 16px;
}
.impact-section-2025 .unhcr-infographic-wrap .idb-header {
font-size: 11px;
}
.impact-section-2025 .unhcr-infographic-wrap .idb-year {
font-size: 30px;
}
.impact-section-2025 .unhcr-infographic-wrap .idb-total {
font-size: 22px;
}
/* Slide 1 "Total Income Received" + Slide 2 "Beneficiaries": on a narrow screen
there is no room for the yellow box text beside the bars, so the absolutely-
overlapped layout hid it behind the bars (and pushed it off-screen). Stack it
instead — bars on top, the yellow box below — with the round badge sitting at
the junction. */
.impact-section-2025 .unhcr-infographic-wrap .page-1 .bars-overlay-container,
.impact-section-2025 .unhcr-infographic-wrap .page-2 .bars-overlay-container {
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.impact-section-2025 .unhcr-infographic-wrap .page-1 .banded-bars-frame,
.impact-section-2025 .unhcr-infographic-wrap .page-2 .banded-bars-frame {
position: static;
order: 1;
left: auto;
top: auto;
width: 200px;
height: 230px;
margin: 0;
}
.impact-section-2025 .unhcr-infographic-wrap .page-1 .dollar-icon-overlay,
.impact-section-2025 .unhcr-infographic-wrap .page-2 .dollar-icon-overlay {
position: static;
order: 2;
left: auto;
bottom: auto;
margin: -50px 0 0;
z-index: 6;
}
.impact-section-2025 .unhcr-infographic-wrap .page-1 .income-dist-box,
.impact-section-2025 .unhcr-infographic-wrap .page-2 .ben-total-box {
position: static;
order: 3;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 100%;
margin-top: -24px;
padding: 30px 18px 16px;
text-align: center;
}
/* "Countries Supported" list: on a narrow screen the 4-column table was wider
than the yellow box (the box's side margins ate into the available width), so
the right-hand column spilled outside the yellow background. Drop the side
margins, let the box hug the table, and trim the type a touch so all four
columns sit inside the yellow on a phone. */
.impact-section-2025 .unhcr-infographic-wrap .country-grid {
margin-left: 0;
margin-right: 0;
padding: 8px 10px;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
box-sizing: border-box;
}
.impact-section-2025 .unhcr-infographic-wrap .country-grid table {
width: auto;
}
.impact-section-2025 .unhcr-infographic-wrap .country-grid td {
font-size: 10.5px;
padding: 2px 5px;
white-space: nowrap;
}
/* "Historical Income" rows: the desktop layout lines up [year] [bars+values]
[yellow total] in one row, which doesn't fit on a phone — the bars area gets
crushed and the value numbers overlap the yellow total. Stack it: year +
total on the top line, the bars (now scaled down by the script) full-width
below. */
.impact-section-2025 .unhcr-infographic-wrap .hist-row {
flex-wrap: wrap;
gap: 6px 12px;
padding: 12px 14px;
}
.impact-section-2025 .unhcr-infographic-wrap .hist-yr {
order: 1;
width: 52px;
height: 52px;
font-size: 15px;
border-width: 3px;
}
.impact-section-2025 .unhcr-infographic-wrap .hist-tot {
order: 2;
flex: 1;
text-align: left;
padding-left: 0;
}
.impact-section-2025 .unhcr-infographic-wrap .hist-tot-val {
font-size: 17px;
}
.impact-section-2025 .unhcr-infographic-wrap .hist-bwrap {
order: 3;
flex: 1 1 100%;
}
.impact-section-2025 .unhcr-infographic-wrap .hist-v {
font-size: 11px;
}
/* Tabs — wrap onto two rows on narrow screens */
.impact-section-2025 .unhcr-infographic-wrap .slide-tabs {
flex-wrap: wrap;
margin: 24px auto 0;
}
.impact-section-2025 .unhcr-infographic-wrap .slide-tab {
flex: 1 1 50%;
font-size: 12px;
padding: 12px 8px;
line-height: 1.3;
}
/* Page header badge (small caption in top-right of each slide) */
.impact-section-2025 .unhcr-infographic-wrap .page-header-badge {
font-size: 8px;
}
/* Decorative shapes that don't fit a narrow layout — hide on mobile */
.impact-section-2025 .unhcr-infographic-wrap .deco-circle-tr,
.impact-section-2025 .unhcr-infographic-wrap .deco-circle-tr-grey,
.impact-section-2025 .unhcr-infographic-wrap .deco-circle-br-blue,
.impact-section-2025 .unhcr-infographic-wrap .p2-grey-circle {
display: none;
}
/* Slide 2 — page-2 has a 50/50 white/blue gradient that doesn't make
sense in a stacked mobile layout; drop the gradient + tighten the
inner padding. */
.impact-section-2025 .unhcr-infographic-wrap .page-2 {
background: var(--white, #fff);
}
.impact-section-2025 .unhcr-infographic-wrap .page-2 .page-inner {
margin: 0;
padding: 24px 18px 36px 18px;
}
/* Slide 3 / Slide 4 — historical bars: let inner content fit the page */
.impact-section-2025 .unhcr-infographic-wrap .hist-rows,
.impact-section-2025 .unhcr-infographic-wrap .legend-box,
.impact-section-2025 .unhcr-infographic-wrap .grand-total-box {
max-width: 100%;
}
.impact-section-2025 .unhcr-infographic-wrap .grand-total-box .gt-big,
.impact-section-2025 .unhcr-infographic-wrap .grand-total-box .gt-number {
font-size: 22px;
}
}
@media (max-width: 575px) {
.impact-section-2025 .unhcr-infographic-wrap .page-inner,
.impact-section-2025 .unhcr-infographic-wrap .page-1-inner {
padding: 22px 14px 30px;
}
.impact-section-2025 .unhcr-infographic-wrap .page-1-inner {
padding-left: 20px;
}
.impact-section-2025 .unhcr-infographic-wrap .page-title-bar h1 {
font-size: 17px;
}
.impact-section-2025 .unhcr-infographic-wrap .pct-value {
font-size: 34px;
}
.impact-section-2025 .unhcr-infographic-wrap .donut-wrap {
width: 170px;
height: 170px;
}
.impact-section-2025 .unhcr-infographic-wrap .donut-icon img {
width: 78px;
height: 78px;
}
.impact-section-2025 .unhcr-infographic-wrap .summary-tbl,
.impact-section-2025 .unhcr-infographic-wrap .summary-tbl th,
.impact-section-2025 .unhcr-infographic-wrap .summary-tbl td {
font-size: 10px;
padding: 4px 5px;
}
.impact-section-2025 .unhcr-infographic-wrap .bar-big-num {
font-size: 20px;
}
.impact-section-2025 .unhcr-infographic-wrap .bars-overlay-container {
height: 320px;
}
.impact-section-2025 .unhcr-infographic-wrap .income-dist-box {
top: 130px;
}
.impact-section-2025 .unhcr-infographic-wrap .idb-year {
font-size: 26px;
}
.impact-section-2025 .unhcr-infographic-wrap .idb-total {
font-size: 18px;
}
}
@media (max-width: 380px) {
.impact-section-2025 .unhcr-infographic-wrap .pct-value {
font-size: 30px;
}
.impact-section-2025 .unhcr-infographic-wrap .pct-row {
gap: 14px;
}
.impact-section-2025 .unhcr-infographic-wrap .donut-wrap {
width: 150px;
height: 150px;
}
.impact-section-2025 .unhcr-infographic-wrap .donut-icon img {
width: 70px;
height: 70px;
}
}
/* =========================================================
"Read More" buttons on Stories & Key Highlights cards
(home listing + Other Stories / Other Highlights cards)
========================================================= */
.stories-section-2025 .btn-card-readmore,
.highlights-section-2025 .btn-card-readmore {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
color: #FAEB00;
line-height: 1;
transition: gap 0.25s ease, color 0.25s ease;
}
.stories-section-2025 .stories-card:hover .btn-card-readmore,
.highlights-section-2025 .highlights-card:hover .btn-card-readmore {
gap: 14px;
color: #fff;
}
.stories-section-2025 .btn-card-readmore i,
.highlights-section-2025 .btn-card-readmore i {
font-size: 14px;
}
/* RTL: flip the arrow direction */
[dir="rtl"] .stories-section-2025 .btn-card-readmore i,
[dir="rtl"] .highlights-section-2025 .btn-card-readmore i,
.rtl .stories-section-2025 .btn-card-readmore i,
.rtl .highlights-section-2025 .btn-card-readmore i {
transform: scaleX(-1);
}
/* On mobile the card content is always visible, so render the button as a
solid pill for clear tap affordance. */
@media (max-width: 767px) {
.stories-section-2025 .btn-card-readmore,
.highlights-section-2025 .btn-card-readmore {
background-color: #0072BC;
color: #fff;
padding: 10px 20px;
border-radius: 4px;
}
.stories-section-2025 .stories-card:hover .btn-card-readmore,
.highlights-section-2025 .highlights-card:hover .btn-card-readmore {
color: #fff;
}
}
/* ==========================================================================
Fix (2026-06-04): Arabic label glyphs clipped (notably on iPhone)
--------------------------------------------------------------------------
All labels use 'Proxima Nova' (a Latin-only font), so in Arabic the browser
falls back to the system Arabic font (e.g. SF Arabic / Geeza Pro on iOS).
That fallback has taller ascenders and diacritics, which the tight Latin
line-height + letter-spacing clipped — most visibly the hero "شاهد الفيديو"
label and the blue "مقدمة" labels.
For RTL only: remove letter-spacing (it breaks cursive Arabic joining and is
not used in Arabic typography), drop the no-op uppercase, give a generous
line-height, and allow the glyphs to render outside the tight line box.
These are RTL-scoped so the English layout is untouched.
========================================================================== */
.rtl .hero-2025 .hero-watch-video,
.rtl .intro-label,
.rtl .intro-section-2025 .intro-label,
.rtl .exec-summary-2025 .exec-summary-label,
.rtl .stories-section-2025 .stories-label,
.rtl .highlights-section-2025 .highlights-label,
.rtl .about-section-2025 .about-label,
.rtl .impact-section-2025 .impact-label,
.rtl .partnerships-section-2025 .partnerships-label,
.rtl .related-label,
.rtl .foreword-label,
.rtl .video-hero-label,
.rtl .slider-hero-label,
.rtl .image-hero-label,
.rtl .highlight-hero-label,
.rtl .partnership-hero-label,
.rtl .about-us-hero-label,
.rtl .about-us-intro-label,
.rtl .exec-hero-label,
.rtl .new-ops-hero-label,
.rtl .new-ops-block-label {
font-family: 'Tajawal', 'Proxima Nova', sans-serif;
letter-spacing: normal !important;
word-spacing: normal !important;
text-transform: none;
line-height: 1.8;
overflow: visible;
padding-top: 2px;
padding-bottom: 2px;
}
/* The hero "Watch Video" label is in an absolute box above the scroll arrow;
give it a touch more room and keep it on a single line. */
.rtl .hero-2025 .hero-watch-video {
line-height: 1.7;
padding: 4px 0;
white-space: nowrap;
}
/* ==========================================================================
Fix (2026-06-18): Arabic glyphs "split"/disconnected on some devices
--------------------------------------------------------------------------
Root cause: the UI labels use 'Proxima Nova', which has NO Arabic glyphs, so
the browser falls back to whatever default Arabic font the *device* happens to
ship. Some devices (notably certain iPhones) render that fallback with broken
cursive joining ("شاهد الفيديو" / "مقدمة" look split), while other devices
render it fine — which is why it looked correct for us but not for QA.
Fix: embed a proper Arabic web font (Tajawal) so every device renders Arabic
identically, regardless of its default font. The @font-face is scoped with
unicode-range to Arabic code points only, so Latin text stays on Proxima Nova
and icon fonts (Private Use Area) are completely unaffected.
Self-hosted (no external CDN dependency) under /ui/fonts/tajawal/.
========================================================================== */
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/tajawal/tajawal-arabic-400.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/tajawal/tajawal-arabic-500.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/tajawal/tajawal-arabic-700.woff2') format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* RTL baseline: put the embedded Arabic font ahead of the generic fallback so
any Arabic text inherits consistent shaping. Because the @font-face above is
unicode-range-restricted to Arabic, Latin characters here still resolve to
Proxima Nova and icon glyphs are untouched. */
body.rtl,
.rtl {
font-family: 'Tajawal', 'Proxima Nova', sans-serif;
}
/* ==========================================================================
SINGLE STORY 2026 DESIGN (Template-2)
========================================================================== */
.single-story-2026 {
background-color: #f4f7f9;
}
/* ---------- Hero: blue panel + photo right ---------- */
.story26-hero {
position: relative;
background-color: #01a0e0;
z-index: 1;
}
.story26-hero-photo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%; /* 50/50 split with the blue panel (2026-07 feedback) */
overflow: hidden;
}
.story26-hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.story26-hero-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
min-height: 660px;
padding-top: 165px; /* clear the fixed header */
padding-bottom: 170px; /* room for the content card overlap */
}
.story26-hero-text {
max-width: 50%;
margin: auto 0;
}
.story26-hero-label {
display: block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
margin-bottom: 14px;
}
.story26-hero-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 42px;
line-height: 1.5;
color: #0b0b0b;
margin: 0;
}
.story26-hero-title span {
background-color: #FAEB00;
padding: 2px 15px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
.story26-hero-sub {
font-family: 'Proxima Nova', sans-serif;
font-weight: 600;
font-size: 17px;
line-height: 1.6;
color: #fff;
max-width: 420px;
margin: 22px 0 0;
}
.story26-hero-bottom {
margin-top: auto;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
}
.story26-watch-video {
display: inline-flex;
flex-direction: column; /* long down arrow ABOVE the label, per the design */
align-items: flex-start;
gap: 12px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #FAEB00;
text-decoration: none;
transition: opacity .25s ease;
}
.story26-watch-video:hover { color: #FAEB00; opacity: .75; }
.story26-watch-video svg { display: block; color: #fff; } /* white arrow, yellow text */
.story26-back-main {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #FAEB00; /* yellow text, white arrow (2026-07 feedback) */
text-decoration: none;
transition: opacity .25s ease;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.story26-back-main:hover { color: #FAEB00; opacity: .8; }
.story26-back-main svg { display: block; color: #fff; }
/* ---------- Content card (overlapping layer) ---------- */
.story26-content {
position: relative;
padding: 0 0 70px;
margin-top: -110px; /* overlap up into the hero */
z-index: 3;
}
/* Full-width yellow band behind the card (blue -> yellow -> grey layering) */
.story26-content::before {
content: '';
position: absolute;
top: 55px;
left: 0;
width: 100%;
height: 115px;
background-color: #FAEB00;
z-index: 1;
}
.story26-card {
position: relative;
z-index: 2;
background-color: #fff;
padding: 55px 65px 60px;
box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.10),
18px 0 40px rgba(0, 0, 0, 0.06),
-18px 0 40px rgba(0, 0, 0, 0.06),
0 34px 70px rgba(0, 0, 0, 0.22);
}
.story26-card-caption {
display: block;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #01a0e0;
margin-bottom: 10px;
}
.story26-card-headline {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 32px;
line-height: 1.2;
color: #111;
margin: 0 0 26px;
}
.story26-card-body {
font-family: 'Proxima Nova', sans-serif;
font-size: 16px;
line-height: 1.9;
color: #4a4a4a;
}
.story26-card-body p { margin: 0 0 20px; }
.story26-card-body p:last-child { margin-bottom: 0; }
/* share */
.story26-share {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 38px;
}
.story26-share-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: #0072BC;
color: #fff;
border: 0;
padding: 13px 28px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: background-color .25s ease;
}
.story26-share-btn:hover { background-color: #005a95; }
.story26-share-menu {
display: flex;
align-items: center;
gap: 10px;
opacity: 0;
visibility: hidden;
transform: translateX(-8px);
transition: all .25s ease;
}
.story26-share.is-open .story26-share-menu {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.story26-share-menu a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f0f0f0;
color: #0072BC;
font-size: 15px;
text-decoration: none;
transition: all .25s ease;
}
.story26-share-menu a:hover { background-color: #0072BC; color: #fff; }
/* ---------- Related stories ---------- */
.story26-related {
position: relative;
padding: 30px 0 150px;
z-index: 2; /* let the corner triangle paint over the footer below */
}
.story26-related-header {
text-align: center;
margin-bottom: 60px;
}
.story26-related-kicker {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #01a0e0;
margin-bottom: 14px;
}
.story26-related-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 32px;
color: #0b0b0b;
margin: 0;
}
.story26-related-title span {
background-color: #FAEB00;
padding: 4px 18px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
display: inline;
}
.story26-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 45px;
}
.story26-rel-image {
position: relative;
display: block;
margin-bottom: 26px;
}
/* Yellow offset frame (sticks out bottom-right) */
.story26-rel-image::before {
content: '';
position: absolute;
top: 14px;
left: 14px;
right: -14px;
bottom: -14px;
border: 4px solid #FAEB00;
z-index: 0;
pointer-events: none;
}
.story26-rel-image img {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 6 / 7; /* card frame per the design (2026-07 feedback) */
height: auto;
object-fit: cover;
display: block;
}
.story26-rel-title {
font-family: 'Proxima Nova', sans-serif;
font-weight: 800;
font-size: 22px;
line-height: 1.3;
color: #0b0b0b; /* dark title per the design (2026-07 feedback) */
margin: 0 0 12px;
}
.story26-rel-title a { color: inherit; text-decoration: none; }
.story26-rel-title a:hover { color: #0072BC; }
.story26-rel-excerpt {
font-family: 'Proxima Nova', sans-serif;
font-size: 14px;
line-height: 1.7;
color: #555;
margin: 0 0 18px;
}
.story26-rel-btn {
display: inline-block;
background-color: #0072BC;
color: #fff;
padding: 9px 22px;
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
transition: background-color .25s ease;
}
.story26-rel-btn:hover { background-color: #005a95; color: #fff; }
/* Blue triangle decoration overlapping the footer */
.single-story-2026 > section:last-of-type::after {
content: '';
position: absolute;
bottom: -80px;
right: 0;
width: 340px;
height: 330px;
background-color: #01a0e0;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
pointer-events: none;
}
/* ---------- RTL ---------- */
.rtl .story26-hero-photo {
right: auto;
left: 0;
}
.rtl .story26-back-main svg,
.rtl .story26-watch-video svg {
transform: scaleX(-1);
}
.rtl .story26-hero-label,
.rtl .story26-card-caption,
.rtl .story26-related-kicker,
.rtl .story26-back-main,
.rtl .story26-watch-video,
.rtl .story26-share-btn,
.rtl .story26-rel-btn {
font-family: 'Tajawal', 'Proxima Nova', sans-serif;
letter-spacing: normal;
}
.rtl .story26-share-menu { transform: translateX(8px); }
.rtl .story26-share.is-open .story26-share-menu { transform: translateX(0); }
.rtl .story26-rel-image::before {
left: -14px;
right: 14px;
}
.rtl .single-story-2026 > section:last-of-type::after {
right: auto;
left: 0;
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
.story26-hero-title { font-size: 36px; }
.story26-related-grid { gap: 30px; }
}
@media (max-width: 991px) {
.story26-hero { padding-top: 100px; } /* blue behind the fixed header */
.story26-hero-photo {
position: static;
width: 100%;
height: 360px;
}
.story26-hero-inner {
min-height: auto;
padding-top: 45px;
padding-bottom: 150px;
}
.story26-hero-text { max-width: 100%; margin: 0 0 50px; }
.story26-hero-title { font-size: 30px; }
.story26-card { padding: 45px 40px 50px; }
.story26-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.story26-hero { padding-top: 90px; }
.story26-hero-photo { height: 260px; }
.story26-hero-title { font-size: 25px; }
.story26-hero-sub { font-size: 15px; }
.story26-hero-bottom { flex-direction: column; align-items: flex-start; gap: 22px; }
.story26-content { margin-top: -95px; }
.story26-content::before { top: 45px; height: 100px; }
.story26-card { padding: 34px 24px 40px; }
.story26-card-headline { font-size: 25px; }
.story26-share { flex-wrap: wrap; }
.story26-related { padding: 10px 0 120px; }
.story26-related-title { font-size: 25px; }
.story26-related-grid { grid-template-columns: 1fr; gap: 40px; }
.single-story-2026 > section:last-of-type::after { width: 180px; height: 175px; bottom: -45px; }
}
/* ==========================================================================
SINGLE PARTNERSHIP 2026 DESIGN (Template-4)
Shares the story26-* card/related/triangle styles; only the hero differs:
full-width photo with a white partner-logo box next to the title.
========================================================================== */
.part26-hero {
position: relative;
background-color: #0b3550;
z-index: 1;
}
.part26-hero-photo {
position: absolute;
inset: 0;
overflow: hidden;
}
.part26-hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Darken the photo so the white/yellow hero text stays readable */
.part26-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.45) 100%);
}
.part26-hero-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
min-height: 640px;
padding-top: 170px; /* clear the fixed header */
padding-bottom: 150px; /* room for the content card overlap */
}
.part26-hero-main {
display: flex;
align-items: center;
gap: 50px;
margin: auto 0;
}
.part26-logo-box {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 270px;
min-height: 235px;
background-color: #fff;
padding: 28px 30px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30);
}
.part26-logo-box img {
max-width: 100%;
max-height: 165px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.part26-hero-text {
max-width: 520px;
}
/* 40% black overlay behind the normal banner text ONLY — the yellow
highlighted title must stay overlay-free (2026-08 feedback) */
.part26-hero-text .story26-hero-sub {
display: inline-block;
background-color: rgba(0, 0, 0, 0.4);
padding: 10px 15px;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.part26-hero-bottom {
margin-top: auto;
display: flex;
justify-content: flex-end;
}
/* Back link on the photo: yellow label + white arrow, per the design */
.part26-hero .story26-back-main { color: #FAEB00; }
.part26-hero .story26-back-main svg { color: #fff; }
.part26-hero .story26-back-main:hover { color: #FAEB00; }
/* ---------- Content card: images/quotes from the ACF Component blocks ---------- */
.part26-block-image {
margin: 0 0 28px;
}
.part26-block-image img {
width: 100%;
height: auto;
display: block;
}
.part26-message {
margin: 0 0 28px;
padding: 22px 28px;
border-left: 4px solid #FAEB00;
background-color: #f8f8f8;
font-style: italic;
font-size: 18px;
line-height: 1.7;
color: #222;
}
.single-partnership-2026 .story26-card-body h3 {
font-family: 'Proxima Nova', sans-serif;
font-weight: 700;
font-size: 22px;
color: #0072BC;
margin: 30px 0 16px;
}
/* ---------- Related cards: logo on white inside the yellow frame,
near-black titles per Template-4 ---------- */
/* "Other Partnerships" cards render their image EXACTLY like the
"Other Stories" / "Other Key Highlights" cards — full-bleed cover fill
inside the same 6/7 yellow-offset frame (2026-09 feedback). The old
.part26-rel-logo contain-on-white panel was removed; the shared
.story26-rel-image styling now applies to all partnership cards, and
admins can upload a dedicated photo via the new "Listing / Card Image"
field on each partnership. */
/* ---------- RTL ---------- */
.rtl .part26-message {
border-left: 0;
border-right: 4px solid #FAEB00;
}
/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
.part26-logo-box { width: 240px; min-height: 210px; }
}
@media (max-width: 991px) {
.part26-hero-inner {
min-height: auto;
padding-top: 130px;
padding-bottom: 150px;
}
.part26-hero-main { gap: 35px; margin: 0 0 55px; }
.part26-logo-box { width: 200px; min-height: 175px; padding: 20px; }
.part26-logo-box img { max-height: 125px; }
}
@media (max-width: 767px) {
.part26-hero-inner { padding-top: 115px; padding-bottom: 140px; }
.part26-hero-main {
flex-direction: column;
align-items: flex-start;
gap: 28px;
margin-bottom: 45px;
}
.part26-hero-bottom { justify-content: flex-start; }
}
/* ============================================================
FEEDBACK ROUND 2026-07 (Randa) — scoped to .report-2026
(body class added for blog_id >= 7 in functions.php)
============================================================ */
/* 1) Fixed header on scroll: black @ 80% opacity (was blue #00A0DF) */
.report-2026 header.header.sticky-nav,
.report-2026 header.header.blackbg.sticky-nav {
background-color: rgba(0, 0, 0, 0.8) !important;
}
/* 2) Home banner: keep the title clear of the fixed header.
The hero is bottom-anchored; on short desktop viewports
(1280x720 / 1536x864) the title used to reach the top of the
screen and slide under the header. Reserve space for the header
and scale the type down on short screens. */
.report-2026 .hero-2025 {
padding-top: 150px;
}
@media (min-width: 992px) and (max-height: 860px) {
.report-2026 .hero-2025 .hero-content { margin-bottom: 210px; }
.report-2026 .hero-2025 .hero-title h1 { font-size: 56px; }
.report-2026 .hero-2025 .hero-subtitle { font-size: 18px; margin-bottom: 30px; }
.report-2026 .hero-2025 .hero-arrow { bottom: 205px; }
.report-2026 .hero-2025 .hero-arrow img { height: 60px; }
.report-2026 .hero-2025 .hero-watch-video { bottom: 172px; }
}
@media (min-width: 992px) and (max-height: 680px) {
.report-2026 .hero-2025 .hero-content { margin-bottom: 150px; }
.report-2026 .hero-2025 .hero-title h1 { font-size: 44px; }
.report-2026 .hero-2025 .hero-arrow { bottom: 150px; }
.report-2026 .hero-2025 .hero-arrow img { height: 48px; }
.report-2026 .hero-2025 .hero-watch-video { bottom: 120px; }
}