/* =====================================================================
REIP custom styles — layered on top of the Industry template.
Uses the theme's CSS variables (--color-primary etc. from skin-reip.css)
===================================================================== */
/* ---------- Full-screen VIDEO hero (Homepage Option A) ---------- */
.reip-video-hero{position:relative;width:100%;height:100vh;min-height:640px;overflow:hidden;background:#07243a;}
.reip-video-hero video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translate(-50%,-50%);object-fit:cover;z-index:0;}
.reip-video-hero .reip-hero-overlay{position:absolute;inset:0;z-index:1;
background:linear-gradient(120deg,rgba(7,36,58,.90) 0%,rgba(13,80,125,.55) 45%,rgba(68,187,102,.20) 100%);}
.reip-video-hero .reip-hero-inner{position:relative;z-index:2;height:100%;display:flex;align-items:center;}
/* ---------- Shared hero content typography ---------- */
.reip-hero-content{max-width:760px;color:#fff;}
.reip-hero-content .reip-eyebrow{display:inline-block;letter-spacing:3px;text-transform:uppercase;
font-size:13px;font-weight:600;color:#fff;background:var(--color-secondry);padding:7px 16px;border-radius:30px;margin-bottom:22px;}
.reip-hero-content h1{color:#fff;font-weight:800;font-size:58px;line-height:1.08;margin-bottom:22px;}
.reip-hero-content p.lead{color:rgba(255,255,255,.88);font-size:19px;line-height:1.6;margin-bottom:32px;max-width:620px;}
.reip-hero-content .reip-hero-btns .site-button{margin:0 14px 12px 0;}
@media (max-width:768px){.reip-hero-content h1{font-size:36px;}.reip-hero-content p.lead{font-size:16px;}}
/* ---------- Hero stat strip ---------- */
.reip-stat-strip{position:relative;z-index:3;}
.reip-stat-strip .reip-stat{padding:10px 0;}
.reip-stat-strip .reip-stat .num{font-size:40px;font-weight:800;color:#fff;line-height:1;}
.reip-stat-strip .reip-stat .lbl{font-size:14px;color:rgba(255,255,255,.8);margin-top:6px;display:block;}
.reip-stat-strip.on-light .reip-stat .num{color:var(--color-primary);}
.reip-stat-strip.on-light .reip-stat .lbl{color:#5a6168;}
/* overlay strip pinned near bottom of a full-screen hero */
.reip-hero-stats-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;
background:rgba(7,36,58,.55);backdrop-filter:blur(4px);border-top:1px solid rgba(255,255,255,.12);padding:18px 0;}
/* ---------- Photo slider hero (Option B) — uses Swiper ---------- */
.reip-photo-hero{position:relative;width:100%;height:100vh;min-height:640px;}
.reip-photo-hero .swiper,.reip-photo-hero .swiper-wrapper,.reip-photo-hero .swiper-slide{height:100%;}
.reip-photo-hero .swiper-slide{position:relative;background-size:cover;background-position:center;}
.reip-photo-hero .swiper-slide::after{content:"";position:absolute;inset:0;
background:linear-gradient(120deg,rgba(7,36,58,.88) 0%,rgba(13,80,125,.5) 50%,rgba(68,187,102,.18) 100%);}
.reip-photo-hero .reip-slide-content{position:relative;z-index:2;height:100%;display:flex;align-items:center;}
.reip-photo-hero .swiper-pagination-bullet{background:#fff;opacity:.5;}
.reip-photo-hero .swiper-pagination-bullet-active{background:var(--color-primary);opacity:1;}
.reip-photo-hero .swiper-button-next,.reip-photo-hero .swiper-button-prev{color:#fff;}
/* ---------- Split hero (Option C) ---------- */
.reip-split-hero{position:relative;background:#07243a;overflow:hidden;}
.reip-split-hero .reip-split-text{padding:120px 0;}
.reip-split-hero .reip-split-media{position:relative;min-height:520px;background-size:cover;background-position:center;}
.reip-split-hero .reip-split-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media (min-width:992px){.reip-split-hero .reip-split-media{position:absolute;top:0;right:0;height:100%;width:48%;}}
/* ---------- Header logo sizing ----------
The REIP logo is a tall, stacked mark (waves over wordmark, ~333x220). The template
sizes logos by WIDTH (180px), which makes a tall logo overflow the bar. Size by HEIGHT
instead so it fits, and shrink it in the sticky/floating header to match the nav items. */
.logo-header{display:flex;align-items:center;float:left;width:auto;height:70px;}
.is-fixed .logo-header{height:70px;}
.logo-header a{display:flex;align-items:center;}
.logo-header img,.logo-header a img{width:auto;max-width:none;height:62px;transition:height .4s;
transform:translateY(-3px);} /* client feedback: sit the mark slightly higher in the bar */
.is-fixed .logo-header img,.is-fixed .logo-header a img{height:46px;}
@media (max-width:991px){
.logo-header,.is-fixed .logo-header{width:auto;max-width:none;height:60px;}
.logo-header img,.is-fixed .logo-header img{max-width:none;height:48px;}
}
/* ---------- Responsive YouTube embed (homepage who-we-are) ---------- */
.reip-video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
box-shadow:0 16px 44px rgba(0,0,0,.12);background:#07243a;}
.reip-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
@supports not (aspect-ratio:1){.reip-video-embed{padding-top:56.25%;}}
/* ---------- X (Twitter) brand icon ----------
The template ships Font Awesome 5, which predates the X logo (fa-x-twitter
exists only in FA 6.4+), so the class renders an empty box. Draw the official
glyph as a mask filled with currentColor so it colors like any font icon. */
.fab.fa-x-twitter::before{content:"";display:inline-block;width:1em;height:1em;vertical-align:-.125em;
background-color:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;}
/* ---------- Footer social icons: white so they stand out (client feedback) ----------
templete.css sets these to #3b4044 via .site-footer.style1 .footer-bottom-in ... —
match that specificity so this later rule wins. */
.site-footer.style1 .footer-bottom-in .dlab-social-icon li a{color:#fff;}
.site-footer.style1 .footer-bottom-in .dlab-social-icon li a:hover{color:var(--color-secondry);}
/* ---------- About-page staff spotlight (fed by the newest spotlight post) ----------
Post photos are landscape; crop to the team-card portrait ratio. */
.reip-spotlight-media img{width:100%;aspect-ratio:358/460;object-fit:cover;}
@supports not (aspect-ratio:1){.reip-spotlight-media img{height:420px;}}
/* The template team card hides the role line until hover (info panel sits at
bottom:-55px). The single spotlight card keeps its panel fully in flow. */
.reip-spotlight-card .dlab-info{position:relative;bottom:auto;}
/* ---------- News article bodies ----------
The template flattens to font-weight 400 globally; restore real
bold inside article text so editor formatting is visible. */
.dlab-post-text strong,.dlab-post-text b{font-weight:700;color:#333;}
/* ---------- Careers page: job cards + empty state ---------- */
.reip-job-card{background:#fff;height:100%;}
.reip-job-meta{list-style:none;margin:0 0 15px;padding:0;}
.reip-job-meta li{display:inline-block;margin:0 18px 6px 0;font-size:14px;color:#5a6168;}
.reip-job-meta li i{color:var(--color-primary);margin-right:6px;}
.reip-jobs-empty{background:#fff;border:1px dashed #c9d2da;border-radius:8px;padding:56px 30px;}
.reip-jobs-empty i{display:block;font-size:42px;color:var(--color-primary);margin-bottom:18px;}
.reip-jobs-empty p{margin:0;font-size:17px;color:#5a6168;}
/* ---------- misc helpers ---------- */
.reip-badge-soft{display:inline-block;background:var(--rgba-primary-1);color:var(--color-primary);
font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:6px 14px;border-radius:30px;}
.bg-green-deep{background:#07243a !important;}
.reip-overlay-card{background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.12);border-radius:8px;}
/* ---------- Team initials avatar (used when no people photos available) ---------- */
.reip-avatar{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:358/460;
background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondry) 100%);
color:#fff;font-weight:800;font-size:64px;letter-spacing:2px;font-family:'Montserrat',sans-serif;}
@supports not (aspect-ratio:1){.reip-avatar{height:300px;}}
/* ---------- Rwanda network map ---------- */
.reip-network-map{position:relative;max-width:620px;margin:0 auto;}
.reip-network-map > img{display:block;width:100%;height:auto;}
.reip-pin{position:absolute;transform:translate(-50%,-50%);z-index:2;}
.reip-pin i{display:block;width:16px;height:16px;border-radius:50%;background:var(--color-secondry);
border:3px solid #fff;box-shadow:0 2px 8px rgba(7,36,58,.35);position:relative;}
.reip-pin i::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--color-secondry);
opacity:.6;animation:reip-pulse 2.4s ease-out infinite;}
@keyframes reip-pulse{0%{transform:scale(.55);opacity:.75}70%{opacity:0}100%{transform:scale(1.9);opacity:0}}
.reip-pin b{position:absolute;left:20px;top:50%;transform:translateY(-50%);white-space:nowrap;
font-size:13px;font-weight:700;color:var(--color-primary);background:rgba(255,255,255,.82);
padding:3px 9px;border-radius:20px;line-height:1.15;}
.reip-pin b small{display:block;font-weight:500;font-size:11px;color:#5a6168;}
.reip-pin.to-left b{left:auto;right:20px;text-align:right;}
/* centre legend list */
.reip-centre-list{list-style:none;margin:0;padding:0;}
.reip-centre-list li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #eef1f4;}
.reip-centre-list li:last-child{border-bottom:0;}
.reip-centre-list .dot{flex:0 0 auto;width:13px;height:13px;border-radius:50%;
background:var(--color-secondry);box-shadow:0 0 0 4px var(--rgba-primary-1);}
.reip-centre-list h6{font-size:16px;}
.reip-centre-list span{font-size:13px;color:#5a6168;}
.reip-mobile-note{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:600;color:var(--color-primary);}
.reip-mobile-note i{font-size:20px;color:var(--color-secondry);}
/* Below the desktop layout the map is too narrow for nowrap labels — show dots only
(centre names are always listed in the adjacent legend / cards). */
@media (max-width:991px){
.reip-network-map{overflow:hidden;}
.reip-pin b{display:none;}
.reip-pin i{width:14px;height:14px;}
}
/* ---------- Network centre cards with facility photos ---------- */
.reip-centre-card{background:#fff;border-radius:8px;overflow:hidden;height:100%;
box-shadow:0 10px 30px rgba(7,36,58,.06);transition:box-shadow .3s ease,transform .3s ease;}
.reip-centre-card:hover{box-shadow:0 18px 46px rgba(7,36,58,.12);transform:translateY(-4px);}
.reip-centre-photo{aspect-ratio:800/520;overflow:hidden;background:#eef1f4;}
@supports not (aspect-ratio:1){.reip-centre-photo{height:210px;}}
.reip-centre-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.reip-centre-body{padding:22px 24px 26px;}
.reip-centre-body .dlab-tilte{margin-bottom:2px;}
/* ---------- Footer info-bar: equal-height cards ----------
Bootstrap stretches the columns, but the card inside must fill the column height. */
.footer-info-bar .icon-bx-wraper{height:100%;}
/* Footer-bottom logo: drop the template's blue chip background — the white logo
sits directly on the dark footer. */
.site-footer.style1 .footer-bottom-in .footer-bottom-logo a{background:transparent;padding:0;}
/* Vertically centre the footer-bottom row (logo · copyright · social icons). */
.site-footer.style1 .footer-bottom-in{align-items:center;}
/* ---------- Partner logo cards ---------- */
.reip-partner{display:flex;flex-direction:column;align-items:center;justify-content:center;
background:#fff;border:1px solid #eef1f4;border-radius:8px;padding:24px 18px;height:100%;min-height:150px;
transition:box-shadow .3s ease,transform .3s ease;}
.reip-partner:hover{box-shadow:0 16px 40px rgba(7,36,58,.10);transform:translateY(-3px);}
.reip-partner .reip-partner-logo{height:66px;display:flex;align-items:center;justify-content:center;}
.reip-partner img{max-height:66px;max-width:100%;width:auto;object-fit:contain;}
.reip-partner span{margin-top:14px;font-size:13px;font-weight:600;color:var(--text-sec);text-align:center;line-height:1.3;}
.reip-partner span small{display:block;font-weight:400;color:#7a828a;font-size:11px;}
/* ---------- Alternating service rows ---------- */
.reip-service-row{align-items:center;}
.reip-service-media img{width:100%;border-radius:8px;box-shadow:0 16px 44px rgba(0,0,0,.12);}
.reip-service-num{display:inline-block;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
color:var(--color-primary);margin-bottom:10px;}
.reip-quote{border-left:4px solid var(--color-primary);padding:6px 0 6px 22px;margin:24px 0;
font-style:italic;font-size:19px;line-height:1.55;color:#07243a;}