.elementor-16412 .elementor-element.elementor-element-485de41{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-16412 .elementor-element.elementor-element-5db58e7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:150px;--padding-bottom:100px;--padding-left:120px;--padding-right:120px;}.elementor-16412 .elementor-element.elementor-element-5d4aac2{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:16px 16px;--row-gap:16px;--column-gap:16px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-16412 .elementor-element.elementor-element-11c8a16 .elementor-button{background-color:#5A9E2F00;font-family:"Almarai", Sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;fill:#1B8DC4;color:#1B8DC4;border-radius:999px 999px 999px 999px;padding:0px 0px 0px 0px;}.elementor-16412 .elementor-element.elementor-element-11c8a16 .elementor-button-content-wrapper{flex-direction:row;}.elementor-16412 .elementor-element.elementor-element-11c8a16 .elementor-button .elementor-button-content-wrapper{gap:12px;}.elementor-16412 .elementor-element.elementor-element-11c8a16 .elementor-button:hover, .elementor-16412 .elementor-element.elementor-element-11c8a16 .elementor-button:focus{color:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-11c8a16 .elementor-button:hover svg, .elementor-16412 .elementor-element.elementor-element-11c8a16 .elementor-button:focus svg{fill:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-5292bf5{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-16412 .elementor-element.elementor-element-e7d4628{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-16412 .elementor-element.elementor-element-491c510 img{height:100%;}.elementor-16412 .elementor-element.elementor-element-ae3b6f3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--margin-top:22px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-16412 .elementor-element.elementor-element-ebaee94{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-16412 .elementor-element.elementor-element-e6a529a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:18px 18px;--row-gap:18px;--column-gap:18px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-16412 .elementor-element.elementor-element-568e02e .elementor-icon-wrapper{text-align:center;}.elementor-16412 .elementor-element.elementor-element-568e02e.elementor-view-stacked .elementor-icon{background-color:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-568e02e.elementor-view-framed .elementor-icon, .elementor-16412 .elementor-element.elementor-element-568e02e.elementor-view-default .elementor-icon{color:#1A3A5C;border-color:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-568e02e.elementor-view-framed .elementor-icon, .elementor-16412 .elementor-element.elementor-element-568e02e.elementor-view-default .elementor-icon svg{fill:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-568e02e .elementor-icon{font-size:20px;}.elementor-16412 .elementor-element.elementor-element-568e02e .elementor-icon svg{height:20px;}.elementor-16412 .elementor-element.elementor-element-9cf7a38{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-16412 .elementor-element.elementor-element-8b570a8 .elementor-heading-title{font-family:"Almarai", Sans-serif;font-size:11px;font-weight:400;line-height:1.45em;color:#6F7681;}.elementor-16412 .elementor-element.elementor-element-a598555 .elementor-heading-title{font-family:"Almarai", Sans-serif;font-size:13px;font-weight:600;line-height:1.55em;color:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-5cd860b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:18px 18px;--row-gap:18px;--column-gap:18px;}.elementor-16412 .elementor-element.elementor-element-41050b0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;}.elementor-16412 .elementor-element.elementor-element-0b9be0f .elementor-icon-wrapper{text-align:center;}.elementor-16412 .elementor-element.elementor-element-0b9be0f.elementor-view-stacked .elementor-icon{background-color:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-0b9be0f.elementor-view-framed .elementor-icon, .elementor-16412 .elementor-element.elementor-element-0b9be0f.elementor-view-default .elementor-icon{color:#1A3A5C;border-color:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-0b9be0f.elementor-view-framed .elementor-icon, .elementor-16412 .elementor-element.elementor-element-0b9be0f.elementor-view-default .elementor-icon svg{fill:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-0b9be0f .elementor-icon{font-size:22px;}.elementor-16412 .elementor-element.elementor-element-0b9be0f .elementor-icon svg{height:22px;}.elementor-16412 .elementor-element.elementor-element-5207138{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-16412 .elementor-element.elementor-element-ca61793 .elementor-heading-title{font-family:"Almarai", Sans-serif;font-size:11px;font-weight:400;line-height:1.45em;color:#6F7681;}.elementor-16412 .elementor-element.elementor-element-394a4cc{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-16412 .elementor-element.elementor-element-95af172{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-16412 .elementor-element.elementor-element-7f8bd97 .elementor-heading-title{font-family:"Almarai", Sans-serif;font-size:48px;font-weight:800;line-height:1.1em;color:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-578c46c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-16412 .elementor-element.elementor-element-578c46c .elementor-heading-title{font-family:"Almarai", Sans-serif;font-size:22px;font-weight:700;line-height:1.4em;color:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-1a19d52{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-16412 .elementor-element.elementor-element-28fc3cb{font-family:"Almarai", Sans-serif;font-size:15px;font-weight:300;line-height:1.75em;color:#334155;}.elementor-16412 .elementor-element.elementor-element-85f6e61{font-family:"Almarai", Sans-serif;font-size:15px;font-weight:300;line-height:1.75em;color:#334155;}.elementor-16412 .elementor-element.elementor-element-ff7db52{font-family:"Almarai", Sans-serif;font-size:15px;font-weight:300;line-height:1.75em;color:#334155;}.elementor-16412 .elementor-element.elementor-element-6fe48c8{font-family:"Almarai", Sans-serif;font-size:15px;font-weight:300;line-height:1.75em;color:#334155;}.elementor-16412 .elementor-element.elementor-element-fc4ad90{--display:flex;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-16412 .elementor-element.elementor-element-5147a96{text-align:start;}.elementor-16412 .elementor-element.elementor-element-5147a96 img{height:20px;}.elementor-16412 .elementor-element.elementor-element-eb6fa7c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-16412 .elementor-element.elementor-element-516b1cc{font-family:"Almarai", Sans-serif;font-size:20px;font-weight:700;line-height:1.375em;color:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-8acf3c3 .elementor-heading-title{font-family:"Almarai", Sans-serif;font-size:18px;font-weight:700;line-height:1.4em;color:#1A3A5C;}.elementor-16412 .elementor-element.elementor-element-d6e9aac{font-family:"Almarai", Sans-serif;font-size:16px;font-weight:300;line-height:1.5em;color:#334155;}.elementor-16412 .elementor-element.elementor-element-4ae1841{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-16412 .elementor-element.elementor-element-128690e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-16412 .elementor-element.elementor-element-9771ce7{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-16412 .elementor-element.elementor-element-9cf7a38{--width:73%;}}@media(max-width:1366px){.elementor-16412 .elementor-element.elementor-element-5db58e7{--padding-top:150px;--padding-bottom:60px;--padding-left:60px;--padding-right:60px;}.elementor-16412 .elementor-element.elementor-element-4ae1841{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:1200px){.elementor-16412 .elementor-element.elementor-element-5db58e7{--padding-top:150px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-16412 .elementor-element.elementor-element-4ae1841{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:1024px){.elementor-16412 .elementor-element.elementor-element-5db58e7{--padding-top:150px;--padding-bottom:50px;--padding-left:30px;--padding-right:30px;}.elementor-16412 .elementor-element.elementor-element-11c8a16 .elementor-button{padding:15px 31px 15px 31px;}.elementor-16412 .elementor-element.elementor-element-5292bf5{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:40px 40px;--row-gap:40px;--column-gap:40px;}.elementor-16412 .elementor-element.elementor-element-7f8bd97 .elementor-heading-title{font-size:34px;}.elementor-16412 .elementor-element.elementor-element-4ae1841{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-16412 .elementor-element.elementor-element-5db58e7{--padding-top:150px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-16412 .elementor-element.elementor-element-11c8a16 .elementor-button{padding:10px 0px 10px 0px;}.elementor-16412 .elementor-element.elementor-element-ebaee94{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16412 .elementor-element.elementor-element-e6a529a{--flex-wrap:nowrap;}.elementor-16412 .elementor-element.elementor-element-9cf7a38{--width:72%;}.elementor-16412 .elementor-element.elementor-element-7f8bd97 .elementor-heading-title{font-size:30px;}.elementor-16412 .elementor-element.elementor-element-578c46c .elementor-heading-title{font-size:18px;}.elementor-16412 .elementor-element.elementor-element-fc4ad90{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16412 .elementor-element.elementor-element-516b1cc{font-size:18px;}.elementor-16412 .elementor-element.elementor-element-4ae1841{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:1024px) and (min-width:768px){.elementor-16412 .elementor-element.elementor-element-e7d4628{--width:100%;}.elementor-16412 .elementor-element.elementor-element-95af172{--width:100%;}}/* Start custom CSS for button, class: .elementor-element-11c8a16 */.success-stories-btn .elementor-button-icon {
transition: transform 0.3s ease;
}
.success-stories-btn:hover .elementor-button-icon {
transform: translateX(-2px);
}
html[lang^="ar"] .success-stories-btn .elementor-button-content-wrapper {
flex-direction: row-reverse !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5db58e7 */.success-story-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
@media (min-width: 1024px) {
.back-link {
display: inline-flex;
}
}
.back-link {
margin-bottom: 10px;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--blue);
transition: color 0.3s;
display: flex;
}
.back-link:hover {
color: var(--navy);
}
.success-story-header .back-link:hover svg {
transform: translateX(-3px);
}
.about-image-hover {
overflow: hidden;
border-radius: 30px !important;
display: block;
}
.about-image-hover .about-img {
transition: transform 0.4s ease;
display: block;
width: 100%;
height: auto;
}
.about-image-hover:hover .about-img {
transform: scale(1.08);
}
.prog-card-img.icon {
width: 30px;
object-fit: contain !important;
}
.prog-card-body {
margin-top: 40px;
gap: 20px !important;
border-radius: 20px 20px 20px 20px;
background: #E7F1FB;
}
.prog-title {
margin-top: 0px;
padding-top: 10px !important;
margin-bottom: 0px !important;
}
.prog-desc {
margin: 0;
font-size: 16px !important;
}
.prog-desc {
margin-left: 20px !important;
margin-top: 2px !important;
}
p.prog-title.activities {
padding: 0px !important;
margin-top: 0px !important;
margin-bottom: 10px !important;
}
@media (min-width: 1536px) {
.section-title
{
font-size: 48px !important;
}
}
p.body-text.partner {
font-size: 14px !important;
font-weight: 300 !important;
}
@media (min-width: 768px) {
p.body-text.partner {
font-size: 15px !important;
}
}
/* Layout */
.about-grid {
display: grid;
grid-template-columns: 45% 55%;
gap: 60px;
align-items: start;
align-items: flex-start !important;
}
/* Sticky Image */
.about-image-col {
position: sticky !important;
top: 100px!important;
height: fit-content!important;
}
.about-img {
width: 100%;
display: block;
border-radius: 20px;
}
/* Content */
.about-text-group {
display: flex;
flex-direction: column;
gap: 24px;
}
p.eyebrow.partner {
font-weight: 700 !important;
}
/* Animation Base */
.animate-left,
.animate-right {
opacity: 0;
transition: all 0.8s ease;
}
/* Image Animation */
.animate-left {
transform: translateX(-80px);
}
/* Content Animation */
.animate-right {
transform: translateX(80px);
}
/* Active State */
.animate-left.show,
.animate-right.show {
opacity: 1;
transform: translateX(0);
}
/* Mobile */
@media (max-width: 991px) {
.about-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.about-image-col {
position: relative;
top: auto;
}
}
.info-card {
margin-top: 40px;
}
.info-card {
display: flex;
flex-direction: row;
gap: 16px;
width: 100%;
}
.info-row {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 20px;
border-radius: 20px 20px 20px 20px;
box-shadow: 0px 0px 10px 2px #F0F3F9;
}
.info-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: hsl(215, 100%, 27%);
}
.info-text {
display: flex;
flex-direction: column;
}
.info-label {
font-size: 11px;
line-height: 16px;
color: hsl(218, 9%, 47%);
margin: 0;
}
.info-value {
font-size: 13px;
line-height: 20px;
font-weight: 600;
color: #1a3a5c;
margin: 0;
margin-top: 3px !important;
}
.info-sublabel {
font-size: 12px;
line-height: 16px;
color: hsl(218, 9%, 47%);
margin: 0;
}
@media (max-width: 767px) {
.info-card {
flex-direction: column;
}
}
.prog-desc-activity {
font-size: 20px;
font-weight: 700;
line-height: 1.375;
color: var(--navy);
padding-bottom: 15px;
border-bottom: 1px solid var(--slate2);
}
.prog-desc {
margin-left: 20px ;
margin-top: 2px;
}
body {
overflow-x: hidden;
}
/*
FIX: .gallery-meta / .meta-card must allow overflow so the always-open
popup isn't clipped by the card's own box.
*/
.gallery-meta {
overflow: visible;
}
.meta-card {
overflow: visible;
position: relative;
z-index: 1;
}
/*
Share button + popup sit inline in one row (button, then icons),
matching the reference layout: icon + 3-line stacked label on the
left, larger purple icon circles on the right with extra gap.
*/
.share-btn-wrapper {
position: relative;
display: flex;
align-items: center;
gap: 24px;
align-self: flex-start;
width: fit-content;
flex: 0 0 auto;
}
/* Share Button */
#share-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0;
background: transparent;
color: #1A3A5C;
border: 0px;
text-decoration: none;
transition: .3s ease;
flex-shrink: 0;
}
/*#share-btn:hover {*/
/* color: #5A9E2F;*/
/*}*/
#share-btn:hover .share-icon-circle {
border-color: #5A9E2F;
}
.share-icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
display: flex
;
justify-content: center;
align-items: center;
border-radius: 50%;
background: #E7F1FB;
color: #243c8f;;
color: inherit;
transition: border-color .3s ease;
flex-shrink: 0;
}
.share-icon-circle svg {
width: 24px;
height: 24px;
}
/*
FIX: label now wraps to 3 stacked lines ("Share / this / story")
instead of sitting inline as one line of text.
*/
.share-btn-text {
text-transform: uppercase;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .3px;
color: #1A3A5C;
}
/*
FIX: popup is always visible, sits inline next to the button with a
larger gap so it reads as a separate group (matching reference).
*/
.share-popup {
position: relative;
background: transparent;
padding: 0;
border-radius: 0;
box-shadow: none;
z-index: 1;
opacity: 1;
visibility: visible;
pointer-events: auto;
width: auto;
white-space: nowrap;
display: flex;
flex-direction: column;
gap: 8px;
}
.share-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-left: 0px;
}
.share-icons a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: .3s ease;
background: #1A3A5C;
border-radius: 50%;
}
.share-icons a:hover {
background: #5A9E2F;
transform: scale(1.08);
}
.share-icons img {
width: 18px;
height: 18px;
object-fit: contain;
display: block;
filter: brightness(0) invert(1);
}
@media (max-width:767px){
.share-btn-wrapper{
flex-wrap: wrap;
gap: 14px;
}
.share-popup{
flex-wrap: wrap;
white-space:normal;
}
.share-icons{
gap:8px;
flex-wrap:wrap;
}
.share-icons a{
width:36px;
height:36px;
}
.share-icons img{
width:16px;
height:16px;
}
}
@media (max-width: 1600px) {
.safety-image-col {
height: 1000px;
overflow: hidden;
}
.safety-img.slide-1,
.safety-img.slide-2 {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* Ensure the flex layout allows the new text block to sit on its own row */
.qa-item {
flex-wrap: wrap;
cursor: pointer; /* Shows a hand icon so users know it's clickable */
}
/* Hide the content by default and set its layout */
.qa-content {
width: 100%;
display: none;
margin-top: 12px;
/* Adds a faint line between title and text */
color: #64748b; /* A soft grey color for the sub-text */
font-size: 14px;
}
/* When the item is clicked and gets the 'active' class, show the content */
.qa-item.active .qa-content {
display: block;
}
/* Optional: Smoothly flip the chevron arrow pointing up when active */
.qa-chevron {
transition: transform 0.3s ease;
}
.qa-item.active .qa-chevron {
transform: rotate(180deg);
}
/* =========================================
FIP ABOUT PAGE — FULL CSS
========================================= */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--blue: #1B8DC4;
--blue-dark: #1A3A5C;
--green: #5A9E2F;
--gray-body: #6B7280;
--white: #ffffff;
--slate-700: #334155;
--slate-600: #475569;
--slate-200: #e2e8f0;
--slate-100: #f1f5f9;
--slate-50: #f8fafc;
--font: 'Almarai', sans-serif;
}
body {
font-family: var(--font);
background: #ffffff;
color: #334155;
overflow-x: hidden;
}
img {
display: block;
max-width: 100%;
height: auto;
}
/* ---- CONTAINER ---- */
/*.container {*/
/* max-width: 1440px;*/
/* max-width: 1800px;*/
/* margin: 0 auto;*/
/* padding: 0 96px;*/
/*}*/
@media (min-width: 1920px) {
.container {
max-width: 1920px !important;
padding-left: 8rem !important;
padding-right: 8rem !important;
}
}
/*.container {*/
/* max-width: 1920px !important;*/
/* padding-left: 8rem !important;*/
/* padding-right: 8rem !important;*/
/* }*/
@media (max-width: 1280px) { .container { padding: 0 64px; } }
@media (max-width: 1024px) { .container { padding: 0 40px; } }
@media (max-width: 768px) { .container { padding: 0 24px; } }
/* ---- TYPOGRAPHY HELPERS ---- */
.section-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 8px !important;
}
.section-heading {
font-size:1.8rem;
font-weight: 800;
line-height: 1.1;
color: var(--blue-dark);
font-family: Almarai;
}
@media (max-width: 1024px) {
.section-heading {
font-size: 1.5rem;
}
}
.section-heading-white {
font-size: 1.8rem;
font-weight: 800;
line-height: 1.1;
color: #ffffff;
margin-bottom: 20px;
font-family: Almarai;
}
@media (max-width: 1024px) {
.section-heading-white {
font-size: 1.5rem;
}
}
.body-text {
font-size: 15px;
font-weight: 300;
line-height: 1.75;
color: var(--slate-700);
}
.body-text-white {
font-size: 15px;
font-weight: 300;
line-height: 1.75;
color: rgba(255,255,255,0.85);
}
.body-text-dark {
font-size: 14px;
font-weight: 300;
line-height: 1.75;
color: var(--slate-700);
}
/* =========================================
HERO BANNER
========================================= */
.hero-banner {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
@media (max-width: 768px) { .hero-banner { height: 300px; } }
.hero-image-wrap {
position: absolute;
inset: 0;
}
.hero-img {
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: center;
transform: scale(1.13);
}
.hero-overlay-t {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(26,58,92,0.15), transparent);
}
.hero-overlay-b {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(26,58,92,0.20), transparent);
}
.hero-overlay-radial {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 50%, rgba(26,58,92,0.15) 100%);
}
.hero-breadcrumb {
position: absolute;
bottom: 32px;
left: 0;
right: 0;
}
.breadcrumb-inner {
display: flex;
align-items: center;
gap: 8px;
}
.breadcrumb-home {
font-size: 12px;
font-weight: 300;
font-family: var(--font);
color: rgba(255,255,255,0.70);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 0.2s;
}
.breadcrumb-home:hover { color: rgba(255,255,255,0.95); }
.breadcrumb-arrow {
color: rgba(255,255,255,0.50);
flex-shrink: 0;
}
.breadcrumb-current {
font-size: 12px;
font-weight: 300;
font-family: var(--font);
color: rgba(255,255,255,0.90);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* =========================================
ABOUT SECTION
========================================= */
.about-section {
background: #ffffff;
padding: 80px 0;
}
@media (max-width: 768px) { .about-section { padding: 48px 0; } }
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
@media (max-width: 1024px) {
.about-grid { grid-template-columns: 1fr; gap: 40px; }
}
.about-text-col {
display: flex;
flex-direction: column;
/*gap: 20px;*/
}
.about-text-group {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 96%;
}
.about-image-col {
display: flex;
justify-content: center;
}
.about-image-wrap {
position: relative;
width: 100%;
max-width: 100%;
}
.about-image-glow {
position: absolute;
inset: 0;
background: linear-gradient(to bottom right, rgba(27,141,196,0.20), rgba(90,158,47,0.20));
border-radius: 24px;
filter: blur(24px);
opacity: 0.6;
}
.about-img {
position: relative;
width: 100%;
object-fit: contain;
}
/* =========================================
VISION & MISSION
========================================= */
.vm-section {
background: #ffffff;
padding: 48px 0 80px;
}
@media (max-width: 768px) { .vm-section { padding: 40px 0; } }
.vm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
@media (max-width: 768px) { .vm-grid { grid-template-columns: 1fr; } }
.vm-card {
position: relative;
padding: 32px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transition: box-shadow 0.3s ease;
}
.vm-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
.vm-card-blue {
background: linear-gradient(135deg, rgba(27,141,196,0.10), rgba(239,246,255,0.50), #ffffff);
border: 1px solid rgba(27,141,196,0.20);
}
.vm-card-green {
background: linear-gradient(135deg, rgba(90,158,47,0.10), rgba(240,253,244,0.50), #ffffff);
border: 1px solid rgba(90,158,47,0.20);
}
.vm-card-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.vm-icon-wrap {
position: relative;
margin-bottom: 24px;
}
.vm-icon-glow {
position: absolute;
inset: 0;
border-radius: 50%;
filter: blur(16px);
transition: filter 0.3s;
}
.vm-icon-glow-blue { background: rgba(27,141,196,0.20); }
.vm-icon-glow-green { background: rgba(90,158,47,0.20); }
.vm-card:hover .vm-icon-glow { filter: blur(24px); }
.vm-icon {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid rgba(255,255,255,0.50);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
color: #ffffff;
transition: transform 0.3s;
}
.vm-card:hover .vm-icon { transform: scale(1.10); }
.vm-icon-blue { background: linear-gradient(135deg, var(--blue), rgba(27,141,196,0.80)); }
.vm-icon-green { background: linear-gradient(135deg, var(--green), rgba(90,158,47,0.80)); }
.vm-title {
font-size: 20px;
font-weight: 700;
color: var(--blue-dark);
margin-bottom: 16px;
}
.vm-text {
font-size: 14px;
font-weight: 300;
color: var(--slate-700);
line-height: 1.75;
max-width: 420px;
}
/* =========================================
CORE VALUES
========================================= */
.values-section {
padding: 80px 0;
}
.values-header {
text-align: center;
margin-bottom: 64px;
}
.values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
@media (max-width: 1024px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .values-grid { grid-template-columns: 1fr; } }
.value-card {
position: relative;
padding: 32px;
border-radius: 16px;
background: #ffffff;
border: 1px solid var(--slate-100);
box-shadow: 0 10px 15px rgba(0,0,0,0.07);
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.value-card:hover { box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
.value-hover-glow {
position: absolute;
top: 0;
right: 0;
width: 160px;
height: 160px;
opacity: 0;
transition: opacity 0.5s;
border-radius: 50%;
}
.value-card:hover .value-hover-glow { opacity: 0.10; }
.value-hover-glow-blue { background: radial-gradient(circle, var(--blue) 0%, transparent 70%); }
.value-hover-glow-green { background: radial-gradient(circle, var(--green) 0%, transparent 70%); }
.value-hover-glow-gray { background: radial-gradient(circle, #6B7280 0%, transparent 70%); }
.value-icon-wrap {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
color: #ffffff;
transition: transform 0.3s;
}
.value-card:hover .value-icon-wrap { transform: scale(1.10); }
.value-icon-blue { background: linear-gradient(135deg, var(--blue), rgba(27,141,196,0.70)); }
.value-icon-green { background: linear-gradient(135deg, var(--green), rgba(90,158,47,0.70)); }
.value-icon-gray { background: linear-gradient(135deg, #6B7280, rgba(107,114,128,0.70)); }
.value-title {
font-size: 20px;
font-weight: 700;
color: var(--blue-dark);
margin-bottom: 16px;
}
.value-text {
font-size: 14px;
font-weight: 300;
color: var(--slate-700);
line-height: 1.75;
}
/* =========================================
ACCREDITATION + INTERNATIONAL PARTNERSHIPS
========================================= */
.accred-section {
width: 100%;
}
.accred-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 1024px) { .accred-grid { grid-template-columns: 1fr; } }
/* Left: dark navy */
.accred-left {
background: linear-gradient(135deg, #1A3A5C, #1B3A5A, #0F2840);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.accred-left-deco-1 {
position: absolute;
top: 0; right: 0;
width: 384px; height: 384px;
background: rgba(27,141,196,0.10);
border-radius: 50%;
filter: blur(64px);
}
.accred-left-deco-2 {
position: absolute;
bottom: 0; left: 0;
width: 320px; height: 320px;
background: rgba(90,158,47,0.10);
border-radius: 50%;
filter: blur(64px);
}
.accred-left-inner {
max-width: 898px;
margin-left: auto;
padding-left: 96px;
padding-right: 40px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 24px;
}
@media (max-width: 1280px) { .accred-left-inner { padding-left: 64px; } }
@media (max-width: 1024px) { .accred-left-inner { max-width: 100%; margin: 0; padding: 0 40px; } }
@media (max-width: 768px) { .accred-left-inner { padding: 0 24px; } }
.accred-logos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 640px) { .accred-logos-grid { grid-template-columns: repeat(2, 1fr); } }
.accred-logo-card {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(255,255,255,0.90);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.30);
box-shadow: 0 4px 15px rgba(0,0,0,0.12);
height: 112px;
transition: background 0.3s, box-shadow 0.3s;
}
.accred-logo-card:hover {
background: #ffffff;
box-shadow: 0 8px 30px rgba(0,0,0,0.20);
}
.accred-logo-card img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
}
/* Right: map background */
.accred-right {
background:
linear-gradient(135deg, rgba(26,58,92,0.85), rgba(27,141,196,0.80)),
url('https://media.base44.com/images/public/69c90aef988026bd62a082ee/60d2d66a4_world.jpg') center / cover no-repeat;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.accred-right-inner {
max-width: 898px;
margin-right: auto;
padding-right: 96px;
padding-left: 40px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 24px;
}
@media (max-width: 1280px) { .accred-right-inner { padding-right: 64px; } }
@media (max-width: 1024px) { .accred-right-inner { max-width: 100%; margin: 0; padding: 0 40px; } }
@media (max-width: 768px) { .accred-right-inner { padding: 0 24px; } }
.intl-logos-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.intl-logo-card {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(255,255,255,0.10);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 4px 15px rgba(0,0,0,0.12);
height: 96px;
transition: background 0.3s;
cursor: default;
}
.intl-logo-card:hover { background: rgba(255,255,255,0.15); }
.intl-logo-text {
font-size: 12px;
font-weight: 600;
color: #ffffff;
text-align: center;
line-height: 1.4;
}
/* =========================================
QUALITY ASSURANCE FRAMEWORK
========================================= */
.qa-section {
background: linear-gradient(to bottom, #f8fafc, #ffffff);
padding: 80px 0;
}
@media (max-width: 768px) { .qa-section { padding: 48px 0; } }
.qa-header {
margin-bottom: 48px;
}
.qa-desc {
font-size: 14px;
font-weight: 300;
color: var(--slate-600);
line-height: 1.75;
max-width: 768px;
margin-top: 16px;
}
.qa-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 768px) { .qa-grid { grid-template-columns: 1fr; } }
.qa-col {
display: flex;
flex-direction: column;
gap: 16px;
}
.qa-item {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: #ffffff;
border: 1px solid var(--slate-200);
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
transition: box-shadow 0.3s, background 0.3s;
cursor: pointer;
}
.qa-item:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
background: rgba(239,246,255,0.50);
}
.qa-icon-wrap {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 8px;
background: #dbeafe;
display: flex;
align-items: center;
justify-content: center;
color: var(--blue);
transition: background 0.3s;
}
.qa-item:hover .qa-icon-wrap { background: #bfdbfe; }
.qa-item-title {
flex: 1;
font-size: 14px;
font-weight: 600;
color: var(--slate-700);
transition: color 0.3s;
margin-bottom: 0px;
}
.qa-item:hover .qa-item-title { color: var(--blue-dark); }
.qa-chevron {
flex-shrink: 0;
color: #94a3b8;
transition: color 0.3s;
}
.qa-item:hover .qa-chevron { color: var(--blue); }
/* =========================================
SAFETY AT FIP
========================================= */
/* 1. Ensure the parent grid makes both columns equal height */
.safety-grid {
display: flex; /* or grid, depending on your setup */
align-items: stretch; /* Forces the image column to match the text column's height */
}
/* If using CSS Grid instead of Flexbox: */
/*
.safety-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
*/
/* 2. Make the image column a structural container */
.safety-image-col {
position: relative;
width: 100%;
height: 100%; /* Tells it to fill the stretched height */
overflow: hidden; /* Prevents anything from spilling out */
display: flex;
}
/* 3. The magic fix for the images */
.safety-img {
/* If you are fading between slide-1 and slide-2, absolute positioning is required */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* object-fit: cover acts like background-size: cover but for ![]()
tags */
object-fit: cover;
/* display: block removes the default inline descender gap (the mysterious bottom space) */
display: block;
}
.safety-image-col {
position: relative;
overflow: hidden;
height: 100%;
}
.safety-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.safety-section {
width: 100%;
}
.safety-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
@media (max-width: 1024px) { .safety-grid { grid-template-columns: 1fr; } }
.safety-text-col {
background: #D9E8E0;
padding: 80px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.safety-text-inner {
max-width: 898px;
margin-left: auto;
padding-left: 96px;
padding-right: 40px;
height: 100%;
}
@media (max-width: 1280px) { .safety-text-inner { padding-left: 64px; } }
@media (max-width: 1024px) { .safety-text-inner { max-width: 100%; margin: 0; padding: 0 40px; } }
@media (max-width: 768px) { .safety-text-inner { padding: 0 24px; } }
.safety-content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
gap: 32px;
}
.safety-text-group {
display: flex;
flex-direction: column;
gap: 24px;
}
.safety-heading {
font-size:1.8rem;
font-weight: 800;
color: var(--blue-dark);
line-height: 1.15;
font-family: Almarai;
}
@media (max-width: 1024px) {
.safety-heading {
font-size: 1.5rem; /* 20px */
}
}
.safety-paragraphs {
display: flex;
flex-direction: column;
gap: 16px;
}
.safety-badges {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding-top: 32px;
}
.safety-badge-card {
background: rgba(255,255,255,0.60);
border-radius: 12px;
padding: 16px;
border: 1px solid rgba(255,255,255,0.40);
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
transition: box-shadow 0.3s;
}
.safety-badge-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.safety-badge-card img {
height: 64px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06));
transition: filter 0.3s;
}
.safety-badge-card:hover img { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12)); }
/* Right: image */
.safety-image-col {
position: relative;
overflow: hidden;
min-height: 500px;
}
@media (max-width: 768px) { .safety-image-col { min-height: 400px; } }
.safety-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.13);
}
.safety-img-overlay-t {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(26,58,92,0.40), rgba(27,141,196,0.15), transparent);
}
.safety-img-overlay-b {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(27,141,196,0.15), transparent);
}
.safety-img-overlay-r {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(26,58,92,0.20), transparent, rgba(26,58,92,0.20));
}
.safety-img-overlay-radial {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 0%, rgba(26,58,92,0.25) 100%);
}
.safety-logo-element {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 16rem !important;
object-fit: contain;
padding: 16px;
z-index: 10;
}
@media (max-width: 1280px) { .safety-logo-element { width: 240px; } }
@media (max-width: 1024px) { .safety-logo-element { width: 10rem !important; } }
/* =========================================
SOCIAL RESPONSIBILITIES (CSR)
========================================= */
.csr-section {
position: relative;
padding: 80px 0;
background-image: url('https://media.base44.com/images/public/69c90aef988026bd62a082ee/c38429e6a_CSRBG.png');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
@media (max-width: 768px) {
.csr-section {
padding: 48px 0;
background-attachment: scroll;
}
}
.csr-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(15,31,60,0.80), rgba(15,31,60,0.70), rgba(26,47,42,0.75));
}
.csr-inner {
position: relative;
z-index: 1;
}
.csr-header {
margin-bottom: 48px;
}
.csr-desc {
max-width: 768px;
margin-top: 8px;
}
.csr-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
@media (max-width: 1024px) { .csr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .csr-grid { grid-template-columns: 1fr; } }
.csr-card {
display: flex;
flex-direction: column;
/*gap: 16px;*/
padding: 32px;
background: rgba(255,255,255,0.05);
border-right: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.10);
cursor: default;
transition: background 0.3s;
}
.csr-card:last-child { border-right: 0; }
@media (max-width: 1024px) {
.csr-card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 640px) {
.csr-card { border-right: 0; }
}
.csr-card:hover { background: rgba(255,255,255,0.10); }
.csr-icon-wrap {
width: 48px;
height: 48px;
border-radius: 8px;
background: rgba(255,255,255,0.10);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
flex-shrink: 0;
transition: background 0.3s;
margin-bottom: 15px;
}
.csr-card:hover .csr-icon-wrap { background: #5B9FD1; }
.csr-title {
font-size: 16px;
font-weight: 700;
color: #ffffff;
line-height: 1.35;
transition: color 0.3s;
}
.csr-card:hover .csr-title { color: #5B9FD1; }
.csr-text {
font-size: 14px;
font-weight: 300;
color: rgba(255,255,255,0.80);
line-height: 1.75;
transition: color 0.3s;
}
.csr-card:hover .csr-text { color: rgba(255,255,255,1); }
/* =========================================
RESPONSIVE ADJUSTMENTS
========================================= */
@media (max-width: 768px) {
.about-section,
.vm-section,
.values-section,
.qa-section { padding: 48px 0; }
.accred-left,
.accred-right,
.safety-text-col { padding: 48px 0; }
.safety-image-col { min-height: 350px; }
.csr-section { padding: 48px 0; }
.csr-grid { gap: 0; }
.csr-card { border-right: 0; }
}
/* =========================================
Entrance Animations (Scroll Reveal)
========================================= */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger the entrance of the grid items slightly for a cascading effect */
.qa-col:nth-child(1) .qa-item:nth-child(1) { transition-delay: 0.1s; }
.qa-col:nth-child(1) .qa-item:nth-child(2) { transition-delay: 0.2s; }
.qa-col:nth-child(1) .qa-item:nth-child(3) { transition-delay: 0.3s; }
.qa-col:nth-child(1) .qa-item:nth-child(4) { transition-delay: 0.4s; }
.qa-col:nth-child(2) .qa-item:nth-child(1) { transition-delay: 0.2s; }
.qa-col:nth-child(2) .qa-item:nth-child(2) { transition-delay: 0.3s; }
.qa-col:nth-child(2) .qa-item:nth-child(3) { transition-delay: 0.4s; }
.qa-col:nth-child(2) .qa-item:nth-child(4) { transition-delay: 0.5s; }
/* =========================================
Accordion Functionality Styles
========================================= */
.qa-item {
cursor: pointer;
/* Ensure the item has relative positioning if you have background changes on hover */
}
.qa-content {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease-out, opacity 0.4s ease-out, margin-top 0.4s ease-out;
margin-top: 0;
}
/* When the .active class is added via JavaScript */
.qa-item.active .qa-content {
opacity: 1;
margin-top: 16px; /* Adjust spacing between title and paragraph */
}
.qa-chevron {
transition: transform 0.3s ease-in-out;
}
.qa-item.active .qa-chevron {
transform: rotate(180deg);
}
/* Initial state: cards are invisible and pushed down */
.csr-card {
opacity: 0;
transform: translateY(40px);
/* The cubic-bezier creates the bouncy "jump" effect */
transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* State when the JS triggers the animation */
.csr-card.animate-in {
opacity: 1;
transform: translateY(0);
}
/* Stagger the animations so they pop up one after the other */
.csr-card:nth-child(1) { transition-delay: 0.1s; }
.csr-card:nth-child(2) { transition-delay: 0.2s; }
.csr-card:nth-child(3) { transition-delay: 0.3s; }
.csr-card:nth-child(4) { transition-delay: 0.4s; }
/* 1. Left Container: Starts hidden and shifted 50px to the left */
.animate-from-left {
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
/* 2. Right Container: Starts hidden and shifted 50px to the right */
.animate-from-right {
opacity: 0;
transform: translateX(50px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
/* 3. The final state for BOTH when triggered by the intersection observer */
.animate-from-left.is-visible,
.animate-from-right.is-visible {
opacity: 1;
transform: none; /* Forces them back to their natural center point */
}
/* 1. Left Text: Starts left (-50px) and moves right to center */
.animate-slide-right {
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
/* 2. Right Text: Starts right (50px) and moves left to center */
.animate-slide-left {
opacity: 0;
transform: translateX(50px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
/* 3. Image Pop-Up: Starts smaller (scale 0.8) and pops up */
.animate-pop-up {
opacity: 0;
transform: scale(0.8) translateY(20px);
/* The bezier here creates a slight "bounce/pop" effect */
transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: opacity, transform;
}
/* Final visible state forces all of them to original size/position */
.animate-slide-right.is-visible,
.animate-slide-left.is-visible,
.animate-pop-up.is-visible {
opacity: 1;
transform: none;
}
/* Start hidden and pushed down by 40px */
.animate-fade-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
/* Snap to full opacity and original position when triggered */
.animate-fade-up.is-visible {
opacity: 1;
transform: none;
}
/* Initial hidden state: pushed down 40px */
.animate-card {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
/* The final state when the element enters the viewport */
.animate-card.is-visible {
opacity: 1;
transform: none;
}
/* 1. Left Column: Starts hidden and shifted 50px to the left */
.about-text-col.animate-on-scroll {
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
/* 2. Right Column: Starts hidden and shifted 50px to the right */
.about-image-col.animate-on-scroll {
opacity: 0;
transform: translateX(50px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
/* 3. The final state for BOTH when they become visible */
.animate-on-scroll.is-visible {
opacity: 1;
transform: none; /* This forces them back to their original center position */
}
/* ==========================
LEFT GALLERY
========================== */
.about-image-col {
flex-direction: column;
}
.gallery-featured{
transition:opacity .35s ease;
}
.gallery-main{
overflow:hidden;
border-radius:24px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}
.gallery-featured{
width:100%;
height:540px;
object-fit:cover;
display:block;
border-radius:24px;
transition:.4s;
}
.gallery-main:hover img{
transform:scale(1.03);
}
.gallery-thumbs{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:22px;
}
.gallery-thumb{
border-radius:18px;
overflow:hidden;
cursor:pointer;
transition:.35s;
border:2px solid transparent;
}
.gallery-thumb.active{
border-color:#233f94;
}
.gallery-thumb img{
width:100%;
height:120px;
object-fit:cover;
display:block;
transition:.35s;
}
.gallery-thumb:hover img{
transform:scale(1.05);
}
.gallery-dots{
display:flex;
justify-content:center;
gap:10px;
margin:24px 0;
}
.gallery-dots .dot{
width:10px;
height:10px;
border-radius:50%;
background:#D7DBE6;
}
.gallery-dots .dot.active{
background:#243c8f;
}
/* ==========================
BOTTOM META CARDS
========================== */
.gallery-meta{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
padding-top: 20px;
}
.meta-card{
display:flex;
align-items:center;
gap:18px;
padding:0px;
);
}
.meta-icon{
width:58px;
height:58px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
background:#E7F1FB;
color:#1A3A5C;
}
.meta-icon svg{
width:24px;
height:24px;
}
@media(max-width:1200px){
.gallery-featured{
height:450px;
}
.section-title{
font-size:42px;
}
}
@media(max-width:991px){
.about-grid{
grid-template-columns:1fr;
gap:50px;
}
.about-image-col{
position:relative!important;
top:auto!important;
}
.gallery-featured{
height:420px;
}
.gallery-meta{
grid-template-columns:1fr;
}
}
@media(max-width:767px){
.gallery-featured{
height:300px;
}
.gallery-thumbs{
grid-template-columns:repeat(3,1fr);
gap:10px;
}
.gallery-thumb img{
height:85px;
}
.meta-card{
padding:20px;
}
.section-title{
font-size:34px;
}
.partner.eyebrow{
font-size:16px;
}
.prog-card-body{
padding:25px;
flex-direction:column;
}
.prog-desc-activity{
font-size:18px;
}
.share-icons{
flex-wrap:wrap;
}
}
@media (min-width: 1300px) and (max-width: 1500px) {
.share-icons a {
width: 35px;
height: 35px;
}
.share-icons img {
width: 15px;
height: 15px;
}
.share-icon-circle , .meta-icon {
width: 45px;
height: 45px;
}
.share-icon-circle svg {
width: 20px;
height: 20px;
}
}
/* ===================================================================
ELEMENTOR ADAPTATION LAYER
Typography and colour are set natively on each widget (Elementor
panel), so this layer only handles structure: the tags Elementor
nests inside .elementor-widget-container, and the legacy grid
declarations that fight the container settings.
=================================================================== */
/* --- layout: these classes are now driven by container settings ---- */
.about-grid, .gallery-thumbs, .gallery-meta, .share-icons,
.about-text-group, .prog-card-body, .prog-card-content,
.share-popup, .share-btn-wrapper, .success-story-header,
.about-image-col, .about-text-col {
display: flex !important;
grid-template-columns: none !important;
}
/* equal halves that account for the 64px gap (the browser shrank the
original percentage grid tracks the same way) */
.about-grid > .e-con { flex: 1 1 0 !important; width: auto !important; min-width: 0; }
.gallery-thumbs > .elementor-element { flex: 1 1 0; min-width: 0; }
.gallery-meta > .e-con { flex: 1 1 0; min-width: 0; }
.share-icons > .elementor-element { flex: 0 0 auto; }
@media (max-width: 991px) {
.about-grid { flex-direction: column !important; }
.about-grid > .e-con { width: 100% !important; }
}
/* --- images: the class lands on the wrapper, style the ![]()
------- */
.gallery-featured img { width:100%; height:540px; object-fit:cover; display:block;
border-radius:24px; transition:.4s; }
.gallery-main:hover img { transform:scale(1.03); }
.gallery-thumb img { width:100%; height:120px; object-fit:cover; display:block; transition:.35s; }
.gallery-thumb:hover img { transform:scale(1.05); }
.prog-card-img.icon img { width:30px; object-fit:contain !important; }
@media (max-width:1200px) { .gallery-featured img { height:450px; } }
@media (max-width:991px) { .gallery-featured img { height:420px; } }
@media (max-width:767px) { .gallery-featured img { height:300px; }
.gallery-thumb img { height:85px; } }
/* --- back link: strip the Elementor button chrome ------------------ */
.back-link .elementor-button { background:transparent; border:0; padding:0; border-radius:0; }
.back-link .elementor-button:hover,
.back-link .elementor-button:focus { background:transparent; }
.back-link .elementor-button-content-wrapper { display:flex; align-items:center; }
.back-link .elementor-button-icon { transition:transform .3s; display:flex; }
.back-link:hover .elementor-button-icon { transform:translateX(-3px); }
/* --- icon widgets (date + share circle) ---------------------------- */
.meta-icon .elementor-icon-wrapper,
.share-icon-circle .elementor-icon-wrapper { display:flex; line-height:0; }
.meta-icon .elementor-icon,
.share-icon-circle .elementor-icon { display:flex; }
#share-btn { cursor:pointer; }
/* --- share icon links ---------------------------------------------- */
.share-icons .elementor-widget-container { display:flex; }
.share-icons a { text-decoration:none; }
/* --- the * { margin:0 } reset above already flattens Elementor's own
paragraph margins, exactly as it did for the hand-written HTML - *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a66cfce */.prog-card-img.icon {
width: 30px;
object-fit: contain !important;
}
.prog-card-body {
margin-top: 40px;
gap: 20px !important;
border-radius: 20px 20px 20px 20px;
background: #E7F1FB;
}
.prog-title {
margin-top: 0px;
padding-top: 10px !important;
margin-bottom: 0px !important;
}
.prog-desc {
margin: 0;
font-size: 16px !important;
}
.prog-desc {
margin-left: 20px !important;
margin-top: 2px !important;
}
p.prog-title.activities {
padding: 0px !important;
margin-top: 0px !important;
margin-bottom: 10px !important;
}
@media (min-width: 1536px) {
.section-title
{
font-size: 48px !important;
}
}
p.body-text.partner {
font-size: 14px !important;
font-weight: 300 !important;
}
@media (min-width: 768px) {
p.body-text.partner {
font-size: 15px !important;
}
}
/* Layout */
.about-grid {
display: grid;
grid-template-columns: 45% 55%;
gap: 60px;
align-items: start;
align-items: flex-start !important;
}
/* Sticky Image */
.about-image-col {
position: sticky !important;
top: 100px!important;
height: fit-content!important;
}
.about-img {
width: 100%;
display: block;
border-radius: 20px;
}
/* Content */
.about-text-group {
display: flex;
flex-direction: column;
gap: 24px;
}
p.eyebrow.partner {
font-weight: 700 !important;
}
/* Animation Base */
.animate-left,
.animate-right {
opacity: 0;
transition: all 0.8s ease;
}
/* Image Animation */
.animate-left {
transform: translateX(-80px);
}
/* Content Animation */
.animate-right {
transform: translateX(80px);
}
/* Active State */
.animate-left.show,
.animate-right.show {
opacity: 1;
transform: translateX(0);
}
/* Mobile */
@media (max-width: 991px) {
.about-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.about-image-col {
position: relative;
top: auto;
}
}
.info-card {
margin-top: 40px;
}
.info-card {
display: flex;
flex-direction: row;
gap: 16px;
width: 100%;
}
.info-row {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 20px;
border-radius: 20px 20px 20px 20px;
box-shadow: 0px 0px 10px 2px #F0F3F9;
}
.info-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: hsl(215, 100%, 27%);
}
.info-text {
display: flex;
flex-direction: column;
}
.info-label {
font-size: 11px;
line-height: 16px;
color: hsl(218, 9%, 47%);
margin: 0;
}
.info-value {
font-size: 13px;
line-height: 20px;
font-weight: 600;
color: #1a3a5c;
margin: 0;
margin-top: 3px !important;
}
.info-sublabel {
font-size: 12px;
line-height: 16px;
color: hsl(218, 9%, 47%);
margin: 0;
}
@media (max-width: 767px) {
.info-card {
flex-direction: column;
}
}
.prog-desc-activity {
font-size: 20px;
font-weight: 700;
line-height: 1.375;
color: var(--navy);
padding-bottom: 15px;
border-bottom: 1px solid var(--slate2);
}
.prog-desc {
margin-left: 20px ;
margin-top: 2px;
}/* End custom CSS */